@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

package/dist/collection/components/z-accordion/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-accordion/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Args, Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZAccordion} from \".\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-tag/index\";\nimport \"./index\";\n\nconst cssPropsArgs = {\n  \"--z-accordion-bg\": getColorTokenArgConfig(true),\n  \"--z-accordion-label-color\": getColorTokenArgConfig(true),\n  \"--z-accordion-disabled-label-color\": {\n    ...getColorTokenArgConfig(true),\n    if: {\n      arg: \"isDisabled\",\n      truthy: true,\n    },\n  },\n  \"--z-accordion-content-bg\": getColorTokenArgConfig(true),\n  \"--z-accordion-content-fg\": getColorTokenArgConfig(true),\n  \"--z-accordion-hover-color\": getColorTokenArgConfig(true),\n  \"--z-accordion-highlight-color\": {\n    ...getColorTokenArgConfig(true),\n    if: {\n      arg: \"highlight\",\n      truthy: true,\n    },\n  },\n} as const;\n\ntype ZAccordionStoriesArgs = ZAccordion &\n  CSSVarsArguments<\n    | keyof typeof cssPropsArgs\n    | `z-accordion-${\"left\" | \"right\"}-padding`\n    | \"z-accordion-label-font-weight\"\n    | `z-accordion-highlight-color${number | undefined}`\n  >;\n\n/**\n * To add the highlight band on the left, set the `highlight` property to `true` then set the `--z-accordion-highlight-color` CSS variable to the desired color.\n */\nconst StoryMeta = {\n  title: \"ZAccordion\",\n  component: \"z-accordion\",\n  argTypes: {\n    ...cssPropsArgs,\n    icon: {\n      options: [null, ...Object.keys(ICONS).sort()],\n      control: {\n        type: \"select\",\n        labels: {\n          null: \"—\",\n        },\n      },\n    },\n    shadow: {\n      if: {\n        arg: \"variant\",\n        eq: AccordionVariant.BACKGROUND,\n      },\n    },\n    size: {\n      options: Object.values(ControlSize),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    variant: {\n      options: Object.values(AccordionVariant),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    \"--z-accordion-bg\": null,\n    \"--z-accordion-label-color\": null,\n    \"--z-accordion-disabled-label-color\": null,\n    \"--z-accordion-content-bg\": null,\n    \"--z-accordion-content-fg\": null,\n    \"--z-accordion-hover-color\": null,\n    \"--z-accordion-highlight-color\": null,\n    \"--z-accordion-right-padding\": \"var(--space-unit)\",\n    \"--z-accordion-left-padding\": \"calc(var(--space-unit) * 2)\",\n    \"--z-accordion-label-font-weight\": \"var(--font-sb)\",\n    \"highlight\": false,\n    \"icon\": null,\n    \"isDisabled\": false,\n    \"label\": \"Text label\",\n    \"open\": false,\n    \"shadow\": true,\n    \"size\": ControlSize.BIG,\n    \"variant\": AccordionVariant.DEFAULT,\n  },\n  render: (args: Args): TemplateResult =>\n    html`<z-accordion\n      .highlight=${args.highlight}\n      .icon=${args.icon}\n      .isDisabled=${args.isDisabled}\n      .open=${args.open}\n      .shadow=${args.shadow}\n      label=${args.label}\n      size=${args.size}\n      variant=${args.variant}\n      style=${styleMap({\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n        \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n        \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n        \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n        \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n        \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n        \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n        \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n        \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n        \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n      })}\n    >\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n      sum nescius esse utilitatem in historia, non modo voluptatem.\n    </z-accordion>`,\n} satisfies Meta<ZAccordionStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZAccordionStoriesArgs>;\n\nexport const Default = {};\n\n/**\n * When multiple `ZAccordion`s are placed in stack, the style is automatically optimized through global styles.\n */\nexport const Stack = {\n  argTypes: {\n    \"--z-accordion-highlight-color2\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n    \"--z-accordion-highlight-color3\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n    \"--z-accordion-highlight-color4\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n  },\n  args: {\n    \"--z-accordion-highlight-color2\": null,\n    \"--z-accordion-highlight-color3\": null,\n    \"--z-accordion-highlight-color4\": null,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"open\"],\n    },\n  },\n  render: (args) =>\n    html`${[\n      StoryMeta.render(args),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color2\"],\n      }),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color3\"],\n      }),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color4\"],\n      }),\n    ]}`,\n} satisfies Story;\n\nexport const WithTags = {\n  render: (args) => html`\n    <z-accordion\n      .highlight=${args.highlight}\n      .icon=${args.icon}\n      .isDisabled=${args.isDisabled}\n      .open=${args.open}\n      .shadow=${args.shadow}\n      label=${args.label}\n      size=${args.size}\n      variant=${args.variant}\n      style=${styleMap({\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n        \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n        \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n        \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n        \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n        \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n        \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n        \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n        \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n        \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n      })}\n    >\n      <z-tag slot=\"tag\">Tag 1</z-tag>\n      <z-tag slot=\"tag\">Tag 2</z-tag>\n      <z-tag slot=\"tag\">Tag 3</z-tag>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n      sum nescius esse utilitatem in historia, non modo voluptatem.\n    </z-accordion>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-accordion/styles.css

@@ -84,7 +84,7 @@ summary {
 }
 
 summary:focus:focus-visible {
-  background-color: var(--color-surface03);
+  background-color: var(--z-accordion-hover-color);
   box-shadow: var(--shadow-focus-primary);
   outline: none;
 }

package/dist/collection/components/z-anchor-navigation/index.js

@@ -1,8 +1,8 @@
 import { h, Host } from "@stencil/core";
 import { ButtonVariant } from "../../beans";
 /**
- * * Anchor navigation component.
- * @slot Main slot. Put some `<a>` tags inside. If you need an action button/icon, wrap it and the <a> inside another tag.
+ * Anchor navigation component.
+ * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.
  * @example
  * ```
  * <z-anchor-navigation>
@@ -18,15 +18,17 @@ import { ButtonVariant } from "../../beans";
 export class ZAnchorNavigation {
     constructor() {
         this.hideUnselected = false;
+        this.autoCurrent = true;
         this.collapsed = false;
     }
     /**
-     * Set aria-current attribute to the anchors.
+     * Set `aria-current` attribute to the anchors.
      */
-    setAriaCurrent() {
+    setCurrent() {
+        const currentElement = Array.from(this.nav.querySelectorAll("a")).find((anchor) => anchor.href === this.host.ownerDocument.location.href);
         Array.from(this.nav.children).forEach((item) => {
             const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector("a");
-            const isCurrent = window.location.href === anchor.href;
+            const isCurrent = anchor === currentElement;
             anchor.setAttribute("aria-current", isCurrent.toString());
             item.toggleAttribute("data-current", isCurrent);
         });
@@ -38,14 +40,16 @@ export class ZAnchorNavigation {
         this.collapsed = !this.collapsed;
     }
     componentDidLoad() {
-        window.addEventListener("hashchange", this.setAriaCurrent.bind(this));
-        this.setAriaCurrent();
+        if (this.autoCurrent) {
+            window.addEventListener("hashchange", this.setCurrent.bind(this));
+            this.setCurrent();
+        }
     }
     disconnectedCallback() {
-        window.removeEventListener("hashchange", this.setAriaCurrent);
+        window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        return (h(Host, { key: '334a479e907631a2f25b757b6a37d136a78eaa4b', collapsed: this.collapsed }, h("z-button", { key: 'cdfdae6b09a0f1b0f23004d9c56eaaf39d49e94e', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { key: '11406c615df8d8c6779428d7275a8f77ff7484d0', ref: (el) => (this.nav = el) }, h("slot", { key: 'b33c4318e70c79d606d27a3a6e0aad5550f45442' }))));
+        return (h(Host, { key: '6869675f35b8ca58e36058d10ed89301d2b49034', collapsed: this.collapsed }, h("z-button", { key: 'd6bacaf89ac6731dacb2250793c7ffba4a43a989', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { key: '0c308debc3e444015e1c8733af628d0b7a5d8b6e', ref: (el) => (this.nav = el) }, h("slot", { key: '02b49c5a23db78d839ba6320f1cbbd770cfa6d3f' }))));
     }
     static get is() { return "z-anchor-navigation"; }
     static get originalStyleUrls() {
@@ -77,6 +81,24 @@ export class ZAnchorNavigation {
                 "attribute": "hide-unselected",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "autoCurrent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables automatic inference of the current item, listening for hash change\nand checking the `href` of the slotted anchors.\nWhen disabled, the highlight of current item must be handled manually by setting the `data-current`\nattribute to the correct slotted items and the `aria-current` attribute to the anchors."
+                },
+                "attribute": "auto-current",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -85,5 +107,6 @@ export class ZAnchorNavigation {
             "collapsed": {}
         };
     }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/z-anchor-navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-anchor-navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,iBAAiB;;8BAMX,KAAK;yBAMV,KAAK;;IAKjB;;OAEG;IACK,cAAc;QACpB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC7C,MAAM,MAAM,GAAG,IAAI,YAAY,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAClF,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC;YACvD,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC1D,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,gBAAgB;QACd,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAChE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,SAAS;YAC7B,iEACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EACpD,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,cAG/B;YACX,4DAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;gBAC/B,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/**\n * * Anchor navigation component.\n * @slot Main slot. Put some `<a>` tags inside. If you need an action button/icon, wrap it and the <a> inside another tag.\n * @example\n * ```\n * <z-anchor-navigation>\n *  <div>\n *    <a href=\"#section-id\">Section name</a>\n *    <button type=\"button\">\n *      <z-icon name=\"share\" />\n *    </button>\n *  </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n  tag: \"z-anchor-navigation\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n})\nexport class ZAnchorNavigation {\n  /**\n   * If enabled, the text of each anchor will be hidden unless\n   * for the current one or the one the user is hovering.\n   */\n  @Prop({reflect: true})\n  hideUnselected = false;\n\n  /**\n   * Whether the mobile list is collapsed.\n   */\n  @State()\n  collapsed = false;\n\n  /** Reference to the nav element. */\n  private nav: HTMLElement;\n\n  /**\n   * Set aria-current attribute to the anchors.\n   */\n  private setAriaCurrent(): void {\n    Array.from(this.nav.children).forEach((item) => {\n      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n      const isCurrent = window.location.href === anchor.href;\n      anchor.setAttribute(\"aria-current\", isCurrent.toString());\n      item.toggleAttribute(\"data-current\", isCurrent);\n    });\n  }\n\n  /**\n   * Toggle collapsed state.\n   */\n  private toggleCollapsed(): void {\n    this.collapsed = !this.collapsed;\n  }\n\n  componentDidLoad(): void {\n    window.addEventListener(\"hashchange\", this.setAriaCurrent.bind(this));\n    this.setAriaCurrent();\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"hashchange\", this.setAriaCurrent);\n  }\n\n  render(): HTMLZAnchorNavigationElement {\n    return (\n      <Host collapsed={this.collapsed}>\n        <z-button\n          class=\"toggle\"\n          variant={ButtonVariant.SECONDARY}\n          icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n          onClick={this.toggleCollapsed.bind(this)}\n        >\n          salta a\n        </z-button>\n        <nav ref={(el) => (this.nav = el)}>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-anchor-navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,iBAAiB;;8BAMX,KAAK;2BASR,IAAI;yBAMN,KAAK;;IAOjB;;OAEG;IACK,UAAU;QAChB,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CACpE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAClE,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC7C,MAAM,MAAM,GAAG,IAAI,YAAY,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAClF,MAAM,SAAS,GAAG,MAAM,KAAK,cAAc,CAAC;YAC5C,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC1D,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAClE,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,SAAS;YAC7B,iEACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EACpD,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,cAG/B;YACX,4DAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;gBAC/B,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/**\n * Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\n * @example\n * ```\n * <z-anchor-navigation>\n *  <div>\n *    <a href=\"#section-id\">Section name</a>\n *    <button type=\"button\">\n *      <z-icon name=\"share\" />\n *    </button>\n *  </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n  tag: \"z-anchor-navigation\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n})\nexport class ZAnchorNavigation {\n  /**\n   * If enabled, the text of each anchor will be hidden unless\n   * for the current one or the one the user is hovering.\n   */\n  @Prop({reflect: true})\n  hideUnselected = false;\n\n  /**\n   * Enables automatic inference of the current item, listening for hash change\n   * and checking the `href` of the slotted anchors.\n   * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n   * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n   */\n  @Prop()\n  autoCurrent = true;\n\n  /**\n   * Whether the mobile list is collapsed.\n   */\n  @State()\n  collapsed = false;\n\n  @Element() host: HTMLZAnchorNavigationElement;\n\n  /** Reference to the nav element. */\n  private nav: HTMLElement;\n\n  /**\n   * Set `aria-current` attribute to the anchors.\n   */\n  private setCurrent(): void {\n    const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n      (anchor) => anchor.href === this.host.ownerDocument.location.href\n    );\n    Array.from(this.nav.children).forEach((item) => {\n      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n      const isCurrent = anchor === currentElement;\n      anchor.setAttribute(\"aria-current\", isCurrent.toString());\n      item.toggleAttribute(\"data-current\", isCurrent);\n    });\n  }\n\n  /**\n   * Toggle collapsed state.\n   */\n  private toggleCollapsed(): void {\n    this.collapsed = !this.collapsed;\n  }\n\n  componentDidLoad(): void {\n    if (this.autoCurrent) {\n      window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n      this.setCurrent();\n    }\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"hashchange\", this.setCurrent);\n  }\n\n  render(): HTMLZAnchorNavigationElement {\n    return (\n      <Host collapsed={this.collapsed}>\n        <z-button\n          class=\"toggle\"\n          variant={ButtonVariant.SECONDARY}\n          icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n          onClick={this.toggleCollapsed.bind(this)}\n        >\n          salta a\n        </z-button>\n        <nav ref={(el) => (this.nav = el)}>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-anchor-navigation/index.stories.js

@@ -0,0 +1,332 @@
+import { html } from "lit";
+import "../z-button/index";
+import "../z-icon/index";
+import "./index";
+import "./index.stories.css";
+const StoryMeta = {
+    title: "ZAnchorNavigation",
+    component: "z-anchor-navigation",
+    args: {
+        hideUnselected: false,
+    },
+};
+export default StoryMeta;
+export const Default = {
+    render: (args) => html `
+    <div class="z-anchor-navigation-story-wrapper">
+      <z-anchor-navigation .hideUnselected=${args.hideUnselected}>
+        <div>
+          <a
+            href="#first-section"
+            target="_self"
+            >First section</a
+          >
+          <z-button
+            variant="tertiary"
+            icon="share"
+            size="x-small"
+          ></z-button>
+        </div>
+        <div>
+          <a
+            href="#second-section"
+            target="_self"
+            >Second section</a
+          >
+        </div>
+        <div>
+          <a
+            href="#third-section"
+            target="_self"
+            >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines
+            Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines
+          </a>
+          <button
+            type="button"
+            aria-label="share"
+          >
+            <z-icon name="share" />
+          </button>
+        </div>
+        <a
+          href="#fourth-section"
+          target="_self"
+          >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines
+          Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines
+        </a>
+      </z-anchor-navigation>
+      <div>
+        <div id="first-section">
+          <h4>First section</h4>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
+            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?
+            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo
+            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,
+            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo
+            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem
+            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte
+            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni
+            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat
+            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam
+            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas
+            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis
+            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,
+            quod non referatur ad corpus.
+          </p>
+        </div>
+        <div class="separator"></div>
+        <div id="second-section">
+          <h4>Second section</h4>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
+            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?
+            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo
+            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,
+            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo
+            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem
+            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte
+            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni
+            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat
+            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam
+            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas
+            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis
+            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,
+            quod non referatur ad corpus.
+          </p>
+        </div>
+        <div class="separator"></div>
+        <div id="third-section">
+          <h4>Third section</h4>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
+            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?
+            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo
+            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,
+            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo
+            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem
+            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte
+            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni
+            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat
+            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam
+            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas
+            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis
+            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,
+            quod non referatur ad corpus.
+          </p>
+        </div>
+        <div class="separator"></div>
+        <div id="fourth-section">
+          <h4>Fourth section</h4>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
+            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?
+            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo
+            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,
+            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo
+            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem
+            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte
+            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni
+            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat
+            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam
+            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas
+            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis
+            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,
+            quod non referatur ad corpus.
+          </p>
+        </div>
+        <div class="separator"></div>
+      </div>
+    </div>
+  `,
+};
+/**
+ * Setting `autoCurrent` to `false` disables the automatic highlighting of the current section in the anchor navigation
+ * and allows manual handling.
+ * In this story, for example, the highlighting of the current section is done by clicking on the related button.
+ */
+export const AutoCurrentDisabling = {
+    args: {
+        autoCurrent: false,
+    },
+    parameters: {
+        controls: {
+            exclude: ["autoCurrent"],
+        },
+    },
+    render: (args) => html `
+    <script>
+      Array.from(document.querySelectorAll(".z-anchor-navigation-manual-current z-button")).forEach((item) =>
+        item.addEventListener("click", (ev) => {
+          const sectionID = ev.target.closest("z-button")?.dataset.to;
+          const current = document.querySelector("#" + sectionID + "-anchor");
+          const nav = current?.closest("nav");
+          Array.from(nav?.children ?? []).forEach((item) => {
+            const isCurrent = item.contains(current);
+            if (isCurrent) {
+              item.setAttribute("data-current", "");
+            } else {
+              item.removeAttribute("data-current");
+            }
+            const anchor = item.tagName === "A" ? item : item.querySelector("a");
+            item?.setAttribute("aria-current", isCurrent.toString());
+          });
+          const section = document.querySelector("#" + sectionID);
+          section?.scrollIntoView();
+        })
+      );
+    </script>
+
+    <div class="z-anchor-navigation-manual-current">
+      <z-button
+        size="x-small"
+        data-to="first-section"
+        >To first section</z-button
+      >
+      <z-button
+        size="x-small"
+        data-to="second-section"
+        >To second section</z-button
+      >
+      <z-button
+        size="x-small"
+        data-to="third-section"
+        >To third section</z-button
+      >
+      <z-button
+        size="x-small"
+        data-to="fourth-section"
+        >Highlight fourth section</z-button
+      >
+    </div>
+    <div class="z-anchor-navigation-story-wrapper">
+      <z-anchor-navigation
+        .hideUnselected=${args.hideUnselected}
+        .autoCurrent=${args.autoCurrent}
+      >
+        <div>
+          <a id="first-section-anchor">First section</a>
+          <z-button
+            variant="tertiary"
+            icon="share"
+            size="x-small"
+          ></z-button>
+        </div>
+        <div>
+          <a id="second-section-anchor">Second section</a>
+        </div>
+        <div>
+          <a id="third-section-anchor"
+            >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines
+            Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines
+          </a>
+          <button
+            type="button"
+            aria-label="share"
+          >
+            <z-icon name="share" />
+          </button>
+        </div>
+        <a id="fourth-section-anchor"
+          >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines
+          Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines
+        </a>
+      </z-anchor-navigation>
+      <div class="z-anchor-navigation-demo-sections">
+        <div
+          class="section"
+          id="first-section"
+        >
+          <h4>First section</h4>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
+            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?
+            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo
+            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,
+            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo
+            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem
+            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte
+            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni
+            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat
+            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam
+            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas
+            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis
+            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,
+            quod non referatur ad corpus.
+          </p>
+        </div>
+        <div class="separator"></div>
+        <div
+          class="section"
+          id="second-section"
+        >
+          <h4>Second section</h4>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
+            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?
+            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo
+            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,
+            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo
+            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem
+            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte
+            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni
+            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat
+            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam
+            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas
+            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis
+            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,
+            quod non referatur ad corpus.
+          </p>
+        </div>
+        <div class="separator"></div>
+        <div
+          class="section"
+          id="third-section"
+        >
+          <h4>Third section</h4>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
+            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?
+            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo
+            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,
+            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo
+            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem
+            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte
+            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni
+            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat
+            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam
+            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas
+            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis
+            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,
+            quod non referatur ad corpus.
+          </p>
+        </div>
+        <div class="separator"></div>
+        <div
+          class="section"
+          id="fourth-section"
+        >
+          <h4>Fourth section</h4>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
+            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?
+            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo
+            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,
+            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo
+            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem
+            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte
+            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni
+            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat
+            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam
+            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas
+            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis
+            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,
+            quod non referatur ad corpus.
+          </p>
+        </div>
+        <div class="separator"></div>
+      </div>
+    </div>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-anchor-navigation/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-anchor-navigation/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;KACtB;CACgC,CAAC;AAEpC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;6CAEqB,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4H7D;CACoC,CAAC;AAExC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;KACnB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,aAAa,CAAC;SACzB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA+CE,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HpC;CACoC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAnchorNavigation} from \".\";\nimport \"../z-button/index\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n  title: \"ZAnchorNavigation\",\n  component: \"z-anchor-navigation\",\n  args: {\n    hideUnselected: false,\n  },\n} satisfies Meta<ZAnchorNavigation>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) => html`\n    <div class=\"z-anchor-navigation-story-wrapper\">\n      <z-anchor-navigation .hideUnselected=${args.hideUnselected}>\n        <div>\n          <a\n            href=\"#first-section\"\n            target=\"_self\"\n            >First section</a\n          >\n          <z-button\n            variant=\"tertiary\"\n            icon=\"share\"\n            size=\"x-small\"\n          ></z-button>\n        </div>\n        <div>\n          <a\n            href=\"#second-section\"\n            target=\"_self\"\n            >Second section</a\n          >\n        </div>\n        <div>\n          <a\n            href=\"#third-section\"\n            target=\"_self\"\n            >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n            Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          </a>\n          <button\n            type=\"button\"\n            aria-label=\"share\"\n          >\n            <z-icon name=\"share\" />\n          </button>\n        </div>\n        <a\n          href=\"#fourth-section\"\n          target=\"_self\"\n          >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n        </a>\n      </z-anchor-navigation>\n      <div>\n        <div id=\"first-section\">\n          <h4>First section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div id=\"second-section\">\n          <h4>Second section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div id=\"third-section\">\n          <h4>Third section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div id=\"fourth-section\">\n          <h4>Fourth section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n      </div>\n    </div>\n  `,\n} satisfies StoryObj<ZAnchorNavigation>;\n\n/**\n * Setting `autoCurrent` to `false` disables the automatic highlighting of the current section in the anchor navigation\n * and allows manual handling.\n * In this story, for example, the highlighting of the current section is done by clicking on the related button.\n */\nexport const AutoCurrentDisabling = {\n  args: {\n    autoCurrent: false,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"autoCurrent\"],\n    },\n  },\n  render: (args) => html`\n    <script>\n      Array.from(document.querySelectorAll(\".z-anchor-navigation-manual-current z-button\")).forEach((item) =>\n        item.addEventListener(\"click\", (ev) => {\n          const sectionID = ev.target.closest(\"z-button\")?.dataset.to;\n          const current = document.querySelector(\"#\" + sectionID + \"-anchor\");\n          const nav = current?.closest(\"nav\");\n          Array.from(nav?.children ?? []).forEach((item) => {\n            const isCurrent = item.contains(current);\n            if (isCurrent) {\n              item.setAttribute(\"data-current\", \"\");\n            } else {\n              item.removeAttribute(\"data-current\");\n            }\n            const anchor = item.tagName === \"A\" ? item : item.querySelector(\"a\");\n            item?.setAttribute(\"aria-current\", isCurrent.toString());\n          });\n          const section = document.querySelector(\"#\" + sectionID);\n          section?.scrollIntoView();\n        })\n      );\n    </script>\n\n    <div class=\"z-anchor-navigation-manual-current\">\n      <z-button\n        size=\"x-small\"\n        data-to=\"first-section\"\n        >To first section</z-button\n      >\n      <z-button\n        size=\"x-small\"\n        data-to=\"second-section\"\n        >To second section</z-button\n      >\n      <z-button\n        size=\"x-small\"\n        data-to=\"third-section\"\n        >To third section</z-button\n      >\n      <z-button\n        size=\"x-small\"\n        data-to=\"fourth-section\"\n        >Highlight fourth section</z-button\n      >\n    </div>\n    <div class=\"z-anchor-navigation-story-wrapper\">\n      <z-anchor-navigation\n        .hideUnselected=${args.hideUnselected}\n        .autoCurrent=${args.autoCurrent}\n      >\n        <div>\n          <a id=\"first-section-anchor\">First section</a>\n          <z-button\n            variant=\"tertiary\"\n            icon=\"share\"\n            size=\"x-small\"\n          ></z-button>\n        </div>\n        <div>\n          <a id=\"second-section-anchor\">Second section</a>\n        </div>\n        <div>\n          <a id=\"third-section-anchor\"\n            >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n            Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          </a>\n          <button\n            type=\"button\"\n            aria-label=\"share\"\n          >\n            <z-icon name=\"share\" />\n          </button>\n        </div>\n        <a id=\"fourth-section-anchor\"\n          >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n        </a>\n      </z-anchor-navigation>\n      <div class=\"z-anchor-navigation-demo-sections\">\n        <div\n          class=\"section\"\n          id=\"first-section\"\n        >\n          <h4>First section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"second-section\"\n        >\n          <h4>Second section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"third-section\"\n        >\n          <h4>Third section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"fourth-section\"\n        >\n          <h4>Fourth section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n      </div>\n    </div>\n  `,\n} satisfies StoryObj<ZAnchorNavigation>;\n"]}

package/dist/collection/components/z-anchor-navigation/styles.css

@@ -47,7 +47,10 @@ z-anchor-navigation nav > * {
   border-left: var(--border-size-large) solid var(--color-surface04);
   color: var(--color-default-text);
   font-family: var(--font-family-sans);
-  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
+  transition:
+    background-color 0.3s ease-in-out,
+    border-color 0.3s ease-in-out,
+    color 0.3s ease-in-out;
 }
 
 z-anchor-navigation nav > [data-current] {
@@ -56,7 +59,7 @@ z-anchor-navigation nav > [data-current] {
   font-weight: var(--font-sb);
 }
 
-z-anchor-navigation nav > * > *:is(z-button, button, z-icon) {
+z-anchor-navigation nav > * > *:is(z-button, button) {
   position: absolute;
   top: 50%;
   right: 0;
@@ -64,6 +67,12 @@ z-anchor-navigation nav > * > *:is(z-button, button, z-icon) {
   transition: opacity 0.3s ease-in-out;
 }
 
+z-anchor-navigation nav > *:focus:focus-visible,
+z-anchor-navigation nav > * > *:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
 z-anchor-navigation nav button {
   padding: 0;
   border: none;
@@ -71,15 +80,6 @@ z-anchor-navigation nav button {
   background-color: transparent;
 }
 
-z-anchor-navigation nav z-icon {
-  --z-icon-width: 16px;
-  --z-icon-height: 16px;
-
-  display: flex;
-  padding: calc(var(--space-unit) * 1.5);
-  fill: var(--color-default-icon);
-}
-
 @media (min-width: 768px) {
   z-anchor-navigation z-button.toggle {
     display: none !important;
@@ -89,11 +89,19 @@ z-anchor-navigation nav z-icon {
     display: flex;
   }
 
-  z-anchor-navigation nav a {
-    outline: none;
+  /* hide anchor actions by default... */
+  z-anchor-navigation nav > * > :is(z-button, button) {
+    opacity: 0;
+    pointer-events: none;
   }
 
   @media (hover: hover) {
+    /* ...show them only hovering/focusing the anchor */
+    z-anchor-navigation nav > :is([data-current], :hover, :focus, :focus-within) > :is(z-button, button) {
+      opacity: 1;
+      pointer-events: unset;
+    }
+
     z-anchor-navigation nav > *:hover {
       border-left-color: var(--color-hover-secondary);
       background-color: var(--color-hover-surface);
@@ -101,28 +109,8 @@ z-anchor-navigation nav z-icon {
     }
   }
 
-  z-anchor-navigation nav > *:is(:focus, :focus-within),
-  z-anchor-navigation nav :is(z-icon, button):focus:focus-visible {
-    box-shadow: var(--shadow-focus-primary);
-    outline: none;
-  }
-
   z-anchor-navigation[hide-unselected] nav > *:not([data-current], :hover, :focus, :focus-within) {
     color: transparent;
-  }
-
-  z-anchor-navigation
-    nav
-    > *:not([data-current], :hover, :focus, :focus-within)
-    > *:is(z-button, button, z-icon):not(:focus:focus-visible) {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  @media (hover: none) {
-    z-anchor-navigation:not([hide-unselected]) nav > * > *:is(z-button, button, z-icon) {
-      opacity: 1;
-      pointer-events: all;
-    }
+    fill: transparent;
   }
 }