diff --git a/demo/api.md b/demo/api.md index 8d68db3..425245b 100644 --- a/demo/api.md +++ b/demo/api.md @@ -67,3 +67,132 @@ the current page the user is on. It should reflect a disabled hyperlink and the ``` + +### Anchornav + +Example when the `auro-nav` slot is populated with `auro-anchorlink` elements. + +
+ + + +
+
+ This is example content. Scrolling the content inside this box will automatically make selections in the menu on the right. +
+

Section 1

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id nibh tortor id aliquet lectus. Consequat interdum varius sit amet mattis vulputate. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Eget nunc lobortis mattis aliquam faucibus purus in. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Pellentesque sit amet porttitor eget dolor morbi non arcu. Turpis egestas maecenas pharetra convallis posuere morbi leo. Sagittis nisl rhoncus mattis rhoncus urna. Ut tellus elementum sagittis vitae. Viverra adipiscing at in tellus integer feugiat scelerisque. +

Section 2

+ Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Sed euismod nisi porta lorem mollis aliquam ut. Ac turpis egestas sed tempus urna et. Lectus urna duis convallis convallis tellus. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Dictum sit amet justo donec enim diam. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Orci phasellus egestas tellus rutrum tellus pellentesque eu. Sociis natoque penatibus et magnis dis. Aliquam purus sit amet luctus venenatis. Sed elementum tempus egestas sed sed risus pretium quam. +

Section 2.1

+ Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor. Sollicitudin ac orci phasellus egestas tellus. Dictum sit amet justo donec enim. Quam quisque id diam vel quam elementum pulvinar. In mollis nunc sed id semper risus in. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Duis ut diam quam nulla porttitor massa id. +

Section 3

+ Scelerisque viverra mauris in aliquam sem. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Augue interdum velit euismod in pellentesque massa. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Adipiscing elit ut aliquam purus. Non sodales neque sodales ut etiam. Amet commodo nulla facilisi nullam vehicula ipsum a. Nunc sed blandit libero volutpat sed cras. Vestibulum sed arcu non odio euismod lacinia at quis. Sagittis eu volutpat odio facilisis. Ipsum suspendisse ultrices gravida dictum fusce ut. Ut sem nulla pharetra diam sit amet nisl. Nec tincidunt praesent semper feugiat nibh. Urna neque viverra justo nec ultrices dui. +

Section 4

+ Massa sapien faucibus et molestie ac feugiat. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Ultrices mi tempus imperdiet nulla malesuada pellentesque. A diam sollicitudin tempor id eu nisl nunc. Morbi non arcu risus quis varius. Aliquam eleifend mi in nulla. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Sit amet facilisis magna etiam tempor orci eu lobortis. Tellus cras adipiscing enim eu turpis egestas. Odio euismod lacinia at quis risus. Posuere lorem ipsum dolor sit amet. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. At volutpat diam ut venenatis tellus in metus vulputate. Vivamus at augue eget arcu dictum varius duis at. Dictum sit amet justo donec enim diam vulputate ut. Euismod in pellentesque massa placerat duis ultricies lacus sed. Vitae nunc sed velit dignissim sodales ut eu sem integer. +

Section 5

+ Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor. Sollicitudin ac orci phasellus egestas tellus. Dictum sit amet justo donec enim. Quam quisque id diam vel quam elementum pulvinar. In mollis nunc sed id semper risus in. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Duis ut diam quam nulla porttitor massa id. +
+
+ + Anchor Navigation + View More + View Less + Section 1 + Section 2 + Section 2.1 + Section 3 + Section 4 - with really long text - Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor. + Section 5 + +
+ +
+ + See code + + + +```html + +
+
+ This is example content. Scrolling the content inside this box will automatically make selections in the menu on the right. +
+

Section 1

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id nibh tortor id aliquet lectus. Consequat interdum varius sit amet mattis vulputate. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Eget nunc lobortis mattis aliquam faucibus purus in. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Pellentesque sit amet porttitor eget dolor morbi non arcu. Turpis egestas maecenas pharetra convallis posuere morbi leo. Sagittis nisl rhoncus mattis rhoncus urna. Ut tellus elementum sagittis vitae. Viverra adipiscing at in tellus integer feugiat scelerisque. +

Section 2

+ Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Sed euismod nisi porta lorem mollis aliquam ut. Ac turpis egestas sed tempus urna et. Lectus urna duis convallis convallis tellus. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Dictum sit amet justo donec enim diam. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Orci phasellus egestas tellus rutrum tellus pellentesque eu. Sociis natoque penatibus et magnis dis. Aliquam purus sit amet luctus venenatis. Sed elementum tempus egestas sed sed risus pretium quam. +

Section 2.1

+ Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor. Sollicitudin ac orci phasellus egestas tellus. Dictum sit amet justo donec enim. Quam quisque id diam vel quam elementum pulvinar. In mollis nunc sed id semper risus in. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Duis ut diam quam nulla porttitor massa id. +

Section 3

+ Scelerisque viverra mauris in aliquam sem. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Augue interdum velit euismod in pellentesque massa. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Adipiscing elit ut aliquam purus. Non sodales neque sodales ut etiam. Amet commodo nulla facilisi nullam vehicula ipsum a. Nunc sed blandit libero volutpat sed cras. Vestibulum sed arcu non odio euismod lacinia at quis. Sagittis eu volutpat odio facilisis. Ipsum suspendisse ultrices gravida dictum fusce ut. Ut sem nulla pharetra diam sit amet nisl. Nec tincidunt praesent semper feugiat nibh. Urna neque viverra justo nec ultrices dui. +

Section 4

+ Massa sapien faucibus et molestie ac feugiat. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Ultrices mi tempus imperdiet nulla malesuada pellentesque. A diam sollicitudin tempor id eu nisl nunc. Morbi non arcu risus quis varius. Aliquam eleifend mi in nulla. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Sit amet facilisis magna etiam tempor orci eu lobortis. Tellus cras adipiscing enim eu turpis egestas. Odio euismod lacinia at quis risus. Posuere lorem ipsum dolor sit amet. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. At volutpat diam ut venenatis tellus in metus vulputate. Vivamus at augue eget arcu dictum varius duis at. Dictum sit amet justo donec enim diam vulputate ut. Euismod in pellentesque massa placerat duis ultricies lacus sed. Vitae nunc sed velit dignissim sodales ut eu sem integer. +

Section 5

+ Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor. Sollicitudin ac orci phasellus egestas tellus. Dictum sit amet justo donec enim. Quam quisque id diam vel quam elementum pulvinar. In mollis nunc sed id semper risus in. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Duis ut diam quam nulla porttitor massa id. +
+
+ + Anchor Navigation + View More + View Less + Section 1 + Section 2 + Section 2.1 + Section 3 + Section 4 - with really long text - Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Luctus accumsan tortor posuere ac ut consequat. Pretium viverra suspendisse potenti nullam ac tortor. + Section 5 + +
+``` + +
diff --git a/demo/index.md b/demo/index.md index 0f7ddca..afc2d70 100644 --- a/demo/index.md +++ b/demo/index.md @@ -15,7 +15,7 @@ The `` element should only be used for multi-page projects that have 3 ## Example(s) -### Default Example +### Breadcrumb Example using `auro-breadcrumb` for each link. This example renders as a horizontal list of links. The first icon in the list will display a home icon, all links will have a right chevron as a divider, and the last link will be disabled. @@ -51,6 +51,8 @@ will display a home icon, all links will have a right chevron as a divider, and ### Anchornav +The anchornav variation of `auro-nav` is a vertical list of link elements mapped to anchor elements in the designated scrollable element. As the content is scrolled, the marker will animate to highlight the currently viewed section of the content. +
diff --git a/docs/partials/api.md b/docs/partials/api.md index b7cd9df..acab8bd 100644 --- a/docs/partials/api.md +++ b/docs/partials/api.md @@ -21,3 +21,19 @@ the current page the user is on. It should reflect a disabled hyperlink and the +### Anchornav + +Example when the `auro-nav` slot is populated with `auro-anchorlink` elements. + +
+ + +
+ + + See code + + + + + diff --git a/docs/partials/index.md b/docs/partials/index.md index 6f7edf1..5e6f51b 100644 --- a/docs/partials/index.md +++ b/docs/partials/index.md @@ -10,7 +10,7 @@ ## Example(s) -### Default Example +### Breadcrumb Example using `auro-breadcrumb` for each link. This example renders as a horizontal list of links. The first icon in the list will display a home icon, all links will have a right chevron as a divider, and the last link will be disabled. @@ -30,6 +30,8 @@ will display a home icon, all links will have a right chevron as a divider, and ### Anchornav +The anchornav variation of `auro-nav` is a vertical list of link elements mapped to anchor elements in the designated scrollable element. As the content is scrolled, the marker will animate to highlight the currently viewed section of the content. +
diff --git a/package-lock.json b/package-lock.json index 01b06d3..bdbddbb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,17 @@ { "name": "@aurodesignsystem/auro-nav", - "version": "1.2.6", + "version": "1.2.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@aurodesignsystem/auro-nav", - "version": "1.2.6", + "version": "1.2.7", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { - "@aurodesignsystem/auro-button": "^7.2.7", - "@aurodesignsystem/auro-hyperlink": "^3.5.6", + "@aurodesignsystem/auro-button": "^7.2.8", + "@aurodesignsystem/auro-hyperlink": "^3.5.8", "chalk": "^5.3.0", "lit": "^3.1.0", "typescript": "^5.3.3" @@ -28,7 +28,7 @@ "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", "@semantic-release/npm": "^11.0.2", - "@web/dev-server": "^0.4.1", + "@web/dev-server": "^0.4.3", "@web/test-runner": "^0.18.0", "autoprefixer": "^10.4.17", "compression": "^1.7.4", @@ -37,11 +37,11 @@ "copyfiles": "^2.4.1", "core-js": "^3.36.0", "eslint": "^8.56.0", - "eslint-plugin-jsdoc": "^48.1.0", + "eslint-plugin-jsdoc": "^48.2.0", "husky": "^9.0.11", "lodash": "^4.17.21", "markdown-magic": "^2.6.1", - "nodemon": "^3.0.3", + "nodemon": "^3.1.0", "npm-run-all": "^4.1.5", "postcss": "^8.4.35", "postcss-discard-comments": "^6.0.1", @@ -49,7 +49,7 @@ "postcss-selector-replace": "^1.0.2", "rollup": "^4.12.0", "rollup-plugin-serve": "^1.1.1", - "sass": "^1.71.0", + "sass": "^1.71.1", "semantic-release": "^23.0.2", "stylelint": "^16.2.1", "stylelint-config-idiomatic-order": "^10.0.0", @@ -178,9 +178,9 @@ } }, "node_modules/@aurodesignsystem/auro-button": { - "version": "7.2.7", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-button/-/auro-button-7.2.7.tgz", - "integrity": "sha512-cDVnixuo53U5sR66mxxccHLOVWXaHQtvGufJqtVuRd30AVkjYxw7+VWAv8uFgQy5qS2Zz9yqHoBwuT5itiTd2g==", + "version": "7.2.8", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-button/-/auro-button-7.2.8.tgz", + "integrity": "sha512-OpFdXDsr4fuzTeU8yFKj7UmpqVD73fUueXELF6xGHQXmoAX7gh7GtynAlB/gFRlZL9DB+Nk+LMPOjefdW0jVig==", "hasInstallScript": true, "dependencies": { "@aurodesignsystem/auro-loader": "^2.0.4", @@ -196,9 +196,9 @@ } }, "node_modules/@aurodesignsystem/auro-hyperlink": { - "version": "3.5.6", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-hyperlink/-/auro-hyperlink-3.5.6.tgz", - "integrity": "sha512-XHQjukmRRgLkHDAX2/fOtRw8tM/xjWEp/97vDRnqdg7yvnpEB+UbuohUUka+2AgzcA/C0G+zD4s/aZ2bHBgKwA==", + "version": "3.5.8", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-hyperlink/-/auro-hyperlink-3.5.8.tgz", + "integrity": "sha512-f0buIJrFb0m4UOFN4f0NkPS5rAKRU3TKdQ2tcwblQZQ9PHM7mmfyl/x07vazXX94T+kLaHOGPLTzhg9E1Y2miw==", "hasInstallScript": true, "dependencies": { "chalk": "^5.3.0", @@ -2780,9 +2780,9 @@ } }, "node_modules/@web/dev-server": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/@web/dev-server/-/dev-server-0.4.2.tgz", - "integrity": "sha512-5IS2Rev+DRqIPtIiecOumoj+GZ4volRS6BeX+3mvuMF0OA51pCGhOozqUMVFFpAVuhHScihqIGk1gnHhw9d9kQ==", + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@web/dev-server/-/dev-server-0.4.3.tgz", + "integrity": "sha512-vf2ZVjdTj8ExrMSYagyHD+snRue9oRetynxd1p0P7ndEpZDKeNLYsvkJyo0pNU6moBxHmXnYeC5VrAT4E3+lNg==", "dev": true, "dependencies": { "@babel/code-frame": "^7.12.11", @@ -2795,7 +2795,7 @@ "command-line-usage": "^7.0.1", "debounce": "^1.2.0", "deepmerge": "^4.2.2", - "ip": "^1.1.5", + "ip": "^2.0.1", "nanocolors": "^0.2.1", "open": "^8.0.2", "portfinder": "^1.0.32" @@ -2854,6 +2854,12 @@ "node": ">=18.0.0" } }, + "node_modules/@web/dev-server/node_modules/ip": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz", + "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==", + "dev": true + }, "node_modules/@web/parse5-utils": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@web/parse5-utils/-/parse5-utils-2.1.0.tgz", @@ -5788,9 +5794,9 @@ } }, "node_modules/eslint-plugin-jsdoc": { - "version": "48.1.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.1.0.tgz", - "integrity": "sha512-g9S8ukmTd1DVcV/xeBYPPXOZ6rc8WJ4yi0+MVxJ1jBOrz5kmxV9gJJQ64ltCqIWFnBChLIhLVx3tbTSarqVyFA==", + "version": "48.2.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.2.0.tgz", + "integrity": "sha512-O2B1XLBJnUCRkggFzUQ+PBYJDit8iAgXdlu8ucolqGrbmOWPvttZQZX8d1sC0MbqDMSLs8SHSQxaNPRY1RQREg==", "dev": true, "dependencies": { "@es-joy/jsdoccomment": "~0.42.0", @@ -9747,9 +9753,9 @@ "dev": true }, "node_modules/nodemon": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.0.3.tgz", - "integrity": "sha512-7jH/NXbFPxVaMwmBCC2B9F/V6X1VkEdNgx3iu9jji8WxWcvhMWkmhNWhI5077zknOnZnBzba9hZP6bCPJLSReQ==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.0.tgz", + "integrity": "sha512-xqlktYlDMCepBJd43ZQhjWwMw2obW/JRvkrLxq5RCNcuDDX1DbcPT+qT1IlIIdf+DhnWs90JpTMe+Y5KxOchvA==", "dev": true, "dependencies": { "chokidar": "^3.5.2", @@ -14481,9 +14487,9 @@ "dev": true }, "node_modules/sass": { - "version": "1.71.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.0.tgz", - "integrity": "sha512-HKKIKf49Vkxlrav3F/w6qRuPcmImGVbIXJ2I3Kg0VMA+3Bav+8yE9G5XmP5lMj6nl4OlqbPftGAscNaNu28b8w==", + "version": "1.71.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz", + "integrity": "sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==", "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", diff --git a/package.json b/package.json index 7886ca4..75ee489 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,8 @@ "node": "18.x || 20.x" }, "dependencies": { - "@aurodesignsystem/auro-button": "^7.2.7", - "@aurodesignsystem/auro-hyperlink": "^3.5.6", + "@aurodesignsystem/auro-button": "^7.2.8", + "@aurodesignsystem/auro-hyperlink": "^3.5.8", "chalk": "^5.3.0", "lit": "^3.1.0", "typescript": "^5.3.3" @@ -43,7 +43,7 @@ "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", "@semantic-release/npm": "^11.0.2", - "@web/dev-server": "^0.4.1", + "@web/dev-server": "^0.4.3", "@web/test-runner": "^0.18.0", "autoprefixer": "^10.4.17", "compression": "^1.7.4", @@ -52,11 +52,11 @@ "copyfiles": "^2.4.1", "core-js": "^3.36.0", "eslint": "^8.56.0", - "eslint-plugin-jsdoc": "^48.1.0", + "eslint-plugin-jsdoc": "^48.2.0", "husky": "^9.0.11", "lodash": "^4.17.21", "markdown-magic": "^2.6.1", - "nodemon": "^3.0.3", + "nodemon": "^3.1.0", "npm-run-all": "^4.1.5", "postcss": "^8.4.35", "postcss-discard-comments": "^6.0.1", @@ -64,7 +64,7 @@ "postcss-selector-replace": "^1.0.2", "rollup": "^4.12.0", "rollup-plugin-serve": "^1.1.1", - "sass": "^1.71.0", + "sass": "^1.71.1", "semantic-release": "^23.0.2", "stylelint": "^16.2.1", "stylelint-config-idiomatic-order": "^10.0.0",