@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

package/dist/collection/components/z-menu-section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-menu-section/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot section - Single entry of the menu section. Set the same slot name to different elements to put many of them. Add the `data-active` attribute to a slotted element to highlight it (`active` also works but `data-active` is preferable).\n */\n@Component({\n  tag: \"z-menu-section\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSection {\n  @Element() host: HTMLZMenuSectionElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Tabindex value to set on the label button.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).\n   */\n  @Prop()\n  htmlTabindex = -1;\n\n  /** The opening state of the section. */\n  @Prop({mutable: true})\n  open: boolean;\n\n  @State()\n  hasItems: boolean;\n\n  @State()\n  items: HTMLElement[];\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private label: HTMLButtonElement;\n\n  private get focusableItem(): HTMLElement {\n    return this.items.find(({tabIndex}) => tabIndex === 0);\n  }\n\n  private toggle(): void {\n    if (!this.hasItems) {\n      return;\n    }\n\n    this.open = !this.open;\n  }\n\n  private setItemsA11yAttrs(): void {\n    if (!this.hasItems) {\n      return;\n    }\n\n    this.items.forEach((item) => {\n      item.setAttribute(\"role\", \"menuitem\");\n      item.tabIndex = -1;\n    });\n  }\n\n  private onItemsChange(): void {\n    this.items = Array.from(this.host.querySelectorAll('[slot=\"section\"]')) as HTMLElement[];\n    this.hasItems = this.items.length > 0;\n    this.setItemsA11yAttrs();\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n  }\n\n  private onLabelClick(): void {\n    this.toggle();\n    this.setFocus();\n  }\n\n  private onLabelKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.toggle();\n      if (this.open) {\n        this.focustFirstItem();\n      }\n    }\n  }\n\n  /**\n   * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n   * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n   */\n  private moveFocus(receiver: HTMLElement, current?: HTMLElement): void {\n    receiver.tabIndex = 0;\n    setTimeout(() => {\n      receiver.focus();\n    }, 100);\n    if (current) {\n      current.tabIndex = -1;\n    }\n  }\n\n  private focustFirstItem(): void {\n    this.moveFocus(this.items[0]);\n  }\n\n  /** Focus the last item. */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    this.moveFocus(this.items[this.items.length - 1]);\n  }\n\n  /** Set tabindex of the label to 0, then focus it. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.htmlTabindex = 0;\n    setTimeout(() => {\n      this.label.focus();\n    }, 100);\n  }\n\n  @Watch(\"open\")\n  onOpenChange(): void {\n    if (!this.open) {\n      this.setItemsA11yAttrs();\n      this.closed.emit();\n    } else {\n      this.opened.emit();\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  onTabindexChange(): void {\n    if (!this.label) {\n      return;\n    }\n\n    this.label.tabIndex = this.htmlTabindex;\n  }\n\n  @Listen(\"keydown\")\n  private onItemsKeydown(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open) {\n          break;\n        }\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.moveFocus(this.label, this.focusableItem);\n        this.open = false;\n        break;\n      case KeyboardCode.ARROW_RIGHT:\n        if (this.open) {\n          break;\n        }\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = true;\n        this.focustFirstItem();\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (!this.open) {\n          break;\n        }\n        if (document.activeElement === this.host) {\n          ev.preventDefault();\n          ev.stopPropagation();\n          this.focustFirstItem();\n          break;\n        }\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        const receiver = this.items[currentIndex + 1];\n        if (receiver) {\n          ev.preventDefault();\n          ev.stopPropagation();\n          this.moveFocus(receiver, this.focusableItem);\n        } else {\n          this.htmlTabindex = 0;\n          this.focusableItem.tabIndex = -1;\n        }\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (!this.open || document.activeElement === this.host) {\n          break;\n        }\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        const receiver = this.items[currentIndex - 1];\n        ev.preventDefault();\n        ev.stopPropagation();\n        if (receiver) {\n          this.moveFocus(receiver, this.focusableItem);\n        } else {\n          // since there isn't a previous item to focus, give the focus to the label element\n          this.focusableItem.tabIndex = -1;\n          this.setFocus();\n        }\n        break;\n      }\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelClick = this.onLabelClick.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n    this.onItemsKeydown = this.onItemsKeydown.bind(this);\n  }\n\n  connectedCallback(): void {\n    this.onItemsChange();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host open={this.open}>\n        <button\n          ref={(el) => (this.label = el)}\n          class=\"label\"\n          aria-haspopup={`${!!this.hasItems}`}\n          aria-expanded={`${!!this.open}`}\n          role=\"menuitem\"\n          tabindex={this.htmlTabindex}\n          onClick={this.onLabelClick}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          {this.hasItems && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        <div\n          class=\"items\"\n          role=\"menu\"\n          hidden={!this.open}\n        >\n          <slot\n            name=\"section\"\n            onSlotchange={this.onItemsChange}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-menu-section/index.stories.js

@@ -38,3 +38,4 @@ export const WithoutItems = {
     </z-menu-section>
   `,
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-menu-section/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;KACd;CAC2B,CAAC;AAE/B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;;;;GAmBtC;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,MAAM;;;GAGtC;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZMenuSection} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZMenu/ZMenuSection\",\n  component: \"z-menu-section\",\n  args: {\n    active: false,\n  },\n} satisfies Meta<ZMenuSection>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZMenuSection>;\n\nexport const WithItems = {\n  render: (args) => html`\n    <z-menu-section .active=${args.active}>\n      <h3>Label</h3>\n      <a\n        href=\"\"\n        slot=\"section\"\n        >Item 1</a\n      >\n      <a\n        href=\"\"\n        slot=\"section\"\n        >Item 2</a\n      >\n      <a\n        href=\"\"\n        slot=\"seection\"\n        active\n        >Item 3 - active</a\n      >\n    </z-menu-section>\n  `,\n} satisfies Story;\n\nexport const WithoutItems = {\n  render: (args) => html`\n    <z-menu-section .active=${args.active}>\n      <h3>Label</h3>\n    </z-menu-section>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-modal/index.js

@@ -9,15 +9,13 @@ const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [conte
  */
 export class ZModal {
     constructor() {
-        /** aria-label for close button (optional) */
+        this.modalid = undefined;
+        this.modaltitle = undefined;
+        this.modalsubtitle = undefined;
         this.closeButtonLabel = "chiudi modale";
-        /** add role "alertdialog" to dialog (optional, default is false) */
         this.alertdialog = false;
-        /** if true, the modal is closable (optional, default is true) */
         this.closable = true;
-        /** if true, the modal can scroll inside, if false the viewport can scroll */
         this.scrollInside = true;
-        /** if true, the page scroll is locked when the modal is open (optional, default is true) */
         this.lockPageScroll = true;
     }
     emitModalClose() {
@@ -125,16 +123,16 @@ export class ZModal {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: 'd958597dcd030d9d837aa27e3d951e58c76d1872', class: {
+        return (h("dialog", { key: 'ff8e8cf9ce5684a8ca081ab2aec3ef1c8824b6ae', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: 'f2d88dcae992749e9b26053f58b133ea11f42345', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '94c33c53083aafc4607fcb4b9c099c7d02c035b4', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: 'aee9e10e48814e98b334234742b8d9fddc8bd5b4', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '8f8cb63de53e06aba8c24aa775e7462d5c982cab' }, this.modaltitle && h("h1", { key: '7665e53dbf1c7ba2eb9bedc0df36e3b959407f36', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: 'd069b4cd21e388262db4734e5f19b27b14381d98', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'b7e149a290a5261aaecd47ddc1d53498c182c5dd', class: {
+            }, id: this.modalid }, h("header", { key: '0e17ec7ccaa1376b9cdabde14355fc6dcbec4f26', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '09a5a59ca386289939c61e29f79d201454d41165' }, this.modaltitle && h("h1", { key: '0cf7deea5e044b358882ae0e7bfe4502de1318f5', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '2fde62ccc507d999ccd4fd83aa369128e97b9b0c', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'e778555f2d7d88a965e454ee1231004da8d293e7', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: '3b5126b69ec95efe151a424edc24111978a22a5d', name: "modalContent" }))), h("div", { key: 'cd760b0fdb273c8b2166c05834127955c12c6556', class: {
+            }, id: "modal-content" }, h("slot", { key: 'acee4bb3444264df0b26a465c52f2ee282ccca76', name: "modalContent" }))), h("div", { key: '9abb8e64380030960d5669bec37a7f2f64d78693', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
@@ -170,10 +168,8 @@ export class ZModal {
                     "tags": [],
                     "text": "unique id"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "modalid"
+                "attribute": "modalid",
+                "reflect": false
             },
             "modaltitle": {
                 "type": "string",
@@ -189,10 +185,8 @@ export class ZModal {
                     "tags": [],
                     "text": "title text (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "modaltitle"
+                "attribute": "modaltitle",
+                "reflect": false
             },
             "modalsubtitle": {
                 "type": "string",
@@ -208,10 +202,8 @@ export class ZModal {
                     "tags": [],
                     "text": "subtitle (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "modalsubtitle"
+                "attribute": "modalsubtitle",
+                "reflect": false
             },
             "closeButtonLabel": {
                 "type": "string",
@@ -227,10 +219,8 @@ export class ZModal {
                     "tags": [],
                     "text": "aria-label for close button (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "close-button-label",
+                "reflect": false,
                 "defaultValue": "\"chiudi modale\""
             },
             "alertdialog": {
@@ -247,10 +237,8 @@ export class ZModal {
                     "tags": [],
                     "text": "add role \"alertdialog\" to dialog (optional, default is false)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "alertdialog",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "closable": {
@@ -267,10 +255,8 @@ export class ZModal {
                     "tags": [],
                     "text": "if true, the modal is closable (optional, default is true)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "closable",
+                "reflect": false,
                 "defaultValue": "true"
             },
             "scrollInside": {
@@ -287,10 +273,8 @@ export class ZModal {
                     "tags": [],
                     "text": "if true, the modal can scroll inside, if false the viewport can scroll"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "scroll-inside",
+                "reflect": false,
                 "defaultValue": "true"
             },
             "lockPageScroll": {
@@ -307,10 +291,8 @@ export class ZModal {
                     "tags": [],
                     "text": "if true, the page scroll is locked when the modal is open (optional, default is true)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "lock-page-scroll",
+                "reflect": false,
                 "defaultValue": "true"
             }
         };
@@ -412,3 +394,4 @@ export class ZModal {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-modal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Method, Prop, h} from \"@stencil/core\";\nimport dialogPolyfill from \"dialog-polyfill\";\nimport {KeyboardCode} from \"../../beans\";\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  ':is(button, input, select, textarea, [contenteditable=\"\"], [contenteditable=\"true\"], a[href], [tabindex], summary):not([disabled], [disabled=\"\"], [tabindex=\"-1\"], [aria-hidden=\"true\"], [hidden])';\n\n/**\n * @slot modalCloseButton - slot for custom close button\n * @slot modalContent - slot for the content of the modal\n * @cssprop --z-modal-content-padding - padding of the modal's content. The default is 16px (--space-unit * 2)\n */\n@Component({\n  tag: \"z-modal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZModal {\n  /** unique id */\n  @Prop()\n  modalid: string;\n\n  /** title text (optional) */\n  @Prop()\n  modaltitle?: string;\n\n  /** subtitle (optional) */\n  @Prop()\n  modalsubtitle?: string;\n\n  /** aria-label for close button (optional) */\n  @Prop()\n  closeButtonLabel = \"chiudi modale\";\n\n  /** add role \"alertdialog\" to dialog (optional, default is false) */\n  @Prop()\n  alertdialog?: boolean = false;\n\n  /** if true, the modal is closable (optional, default is true) */\n  @Prop()\n  closable?: boolean = true;\n\n  /** if true, the modal can scroll inside, if false the viewport can scroll */\n  @Prop()\n  scrollInside?: boolean = true;\n\n  /** if true, the page scroll is locked when the modal is open (optional, default is true) */\n  @Prop()\n  lockPageScroll?: boolean = true;\n\n  private dialog: HTMLDialogElement;\n\n  @Element() host: HTMLZModalElement;\n\n  /** emitted on close button click, returns modalid */\n  @Event()\n  modalClose: EventEmitter;\n\n  private emitModalClose(): void {\n    if (this.closable) {\n      this.modalClose.emit({modalid: this.modalid});\n      this.resetPageScroll();\n    }\n  }\n\n  /** emitted on modal header click, returns modalid */\n  @Event()\n  modalHeaderActive: EventEmitter;\n\n  private emitModalHeaderActive(): void {\n    this.modalHeaderActive.emit({modalid: this.modalid});\n  }\n\n  /** emitted on background click, returns modalid */\n  @Event()\n  modalBackgroundClick: EventEmitter;\n\n  private emitBackgroundClick(): void {\n    if (this.closable) {\n      this.modalBackgroundClick.emit({modalid: this.modalid});\n      this.resetPageScroll();\n    }\n  }\n\n  private resetPageScroll(): void {\n    if (this.lockPageScroll && document.body.style.overflowY === \"hidden\") {\n      document.body.style.overflowY = \"\";\n    }\n  }\n\n  componentDidLoad(): void {\n    if (typeof window.HTMLDialogElement !== \"function\") {\n      /* workaround to fix `registerDialog` in test environment:\n      stencil converts html elements to MockHTMLElement but this element is missing the `localName` property,\n      which is used by `registerDialog` to recognize the element as dialog */\n      if (!this.dialog.localName) {\n        Object.defineProperty(this.dialog, \"localName\", {value: \"dialog\"});\n      }\n      dialogPolyfill.registerDialog(this.dialog);\n      this.dialog.setAttribute(\"open\", \"true\");\n    } else {\n      this.open();\n    }\n    if (this.lockPageScroll) {\n      requestAnimationFrame(() => (document.body.style.overflowY = \"hidden\"));\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.resetPageScroll();\n  }\n\n  /** open modal */\n  @Method()\n  async open(): Promise<void> {\n    this.dialog?.showModal();\n    if (this.lockPageScroll) {\n      document.body.style.overflowY = \"hidden\";\n    }\n  }\n\n  /** close modal */\n  @Method()\n  async close(): Promise<void> {\n    if (this.closable) {\n      this.dialog?.close();\n      this.resetPageScroll();\n    }\n  }\n\n  /**\n   * Get a list of focusable elements in the dialog.\n   * Remove elements with `display: none` from the list, because they're not focusable.\n   *\n   * N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.\n   * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.\n   */\n  private get focusableElements(): HTMLElement[] {\n    return [\n      ...Array.from(this.host.shadowRoot.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n      ...Array.from(this.host.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n    ].filter((element) => getComputedStyle(element).display !== \"none\");\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === KeyboardCode.ESC && !this.closable) {\n      e.preventDefault();\n    }\n\n    if (e.code !== KeyboardCode.TAB) {\n      return;\n    }\n\n    const focusableElements = this.focusableElements;\n    const shadowActiveElement = this.host.shadowRoot.activeElement;\n    const activeElement = this.host.ownerDocument.activeElement;\n    const firstFocusableElement = focusableElements[0];\n    const lastFocusableElement = focusableElements[focusableElements.length - 1];\n    if (e.shiftKey && (shadowActiveElement == firstFocusableElement || activeElement == firstFocusableElement)) {\n      // shift + tab was pressed and current active element is the first focusable element\n      e.preventDefault();\n      lastFocusableElement.focus();\n    } else if (!e.shiftKey && (shadowActiveElement == lastFocusableElement || activeElement == lastFocusableElement)) {\n      // shift + tab was pressed and current active element is the first focusable element\n      e.preventDefault();\n      firstFocusableElement.focus();\n    }\n  }\n\n  private closeButtonSlot(): HTMLElement | void {\n    if (this.closable) {\n      return (\n        <slot name=\"modalCloseButton\">\n          <button\n            aria-label={this.closeButtonLabel}\n            onClick={() => this.close()}\n          >\n            <z-icon name=\"multiply-circle-filled\"></z-icon>\n          </button>\n        </slot>\n      );\n    }\n  }\n\n  private handleEscape(e: Event): void {\n    if (this.closable) {\n      return;\n    }\n    e.preventDefault();\n  }\n\n  render(): HTMLZModalElement {\n    return (\n      <dialog\n        class={{\n          \"modal-dialog\": !this.scrollInside,\n        }}\n        aria-labelledby=\"modal-title\"\n        aria-describedby=\"modal-content\"\n        role={this.alertdialog ? \"alertdialog\" : undefined}\n        ref={(el) => (this.dialog = el as HTMLDialogElement)}\n        onClose={() => this.emitModalClose()}\n        onCancel={(e) => this.handleEscape(e)}\n      >\n        <div\n          class={{\n            \"modal-container\": true,\n            \"modal-container-scroll-inside\": this.scrollInside,\n            \"modal-container-scroll-outside\": !this.scrollInside,\n          }}\n          id={this.modalid}\n        >\n          <header onClick={this.emitModalHeaderActive.bind(this)}>\n            <div>\n              {this.modaltitle && <h1 id=\"modal-title\">{this.modaltitle}</h1>}\n              {this.closeButtonSlot()}\n            </div>\n            {this.modalsubtitle && (\n              <div\n                class=\"subtitle\"\n                id=\"modal-subtitle\"\n              >\n                {this.modalsubtitle}\n              </div>\n            )}\n          </header>\n\n          <div\n            class={{\n              \"modal-content-scroll-inside\": this.scrollInside,\n              \"modal-content-scroll-outside\": !this.scrollInside,\n            }}\n            id=\"modal-content\"\n          >\n            <slot name=\"modalContent\"></slot>\n          </div>\n        </div>\n        <div\n          class={{\n            \"modal-background\": true,\n            \"modal-background-scroll-outside\": !this.scrollInside,\n          }}\n          data-action=\"modalBackground\"\n          data-modal={this.modalid}\n          onClick={() => {\n            this.emitBackgroundClick();\n            this.close();\n          }}\n        ></div>\n      </dialog>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-modal/index.stories.js

@@ -199,3 +199,4 @@ export const LongText = {
     <z-button onclick="openZModal()">apri modale</z-button>
   `,
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-modal/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAGzB,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE;QACJ,SAAS,EAAE,UAAU;QACrB,YAAY,EAAE,gBAAgB;QAC9B,eAAe,EAAE,mBAAmB;QACpC,kBAAkB,EAAE,eAAe;QACnC,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,IAAI;QACpB,gBAAgB,EAAE,IAAI;QACtB,2BAA2B,EAAE,6BAA6B;KAC3D;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;QASX,KAAK,EAAE;KACV;KACF;CACoC,CAAC;AAExC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,OAAO,EAAE,gBAAgB;KAC1B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,OAAO;mBACT,IAAI,CAAC,UAAU;sBACZ,IAAI,CAAC,aAAa;2BACb,IAAI,CAAC,gBAAgB;oBAC5B,IAAI,CAAC,WAAW;iBACnB,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;yBACd,IAAI,CAAC,cAAc;0CACF,IAAI,CAAC,2BAA2B,CAAC;;;;;;;;;GASxE;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,OAAO,EAAE,eAAe;KACzB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,OAAO;mBACT,IAAI,CAAC,UAAU;sBACZ,IAAI,CAAC,aAAa;2BACb,IAAI,CAAC,gBAAgB;oBAC5B,IAAI,CAAC,WAAW;iBACnB,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;yBACd,IAAI,CAAC,cAAc;0CACF,IAAI,CAAC,2BAA2B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HxE;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZModal} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../date-picker/z-date-picker/index\";\nimport \"../z-button/index\";\nimport \"../z-select/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZSearchbarStoriesArgs = ZModal & CSSVarsArguments<\"--z-modal-content-padding\">;\n\nconst StoryMeta = {\n  title: \"ZModal\",\n  component: \"z-modal\",\n  args: {\n    \"modalid\": \"my-modal\",\n    \"modaltitle\": \"My modal title\",\n    \"modalsubtitle\": \"My modal subtitle\",\n    \"closeButtonLabel\": \"chiudi modale\",\n    \"alertdialog\": false,\n    \"closable\": true,\n    \"scrollInside\": true,\n    \"lockPageScroll\": true,\n    \"--z-modal-content-padding\": \"calc(var(--space-unit) * 2)\",\n  },\n  decorators: [\n    (Story) => html`\n      <script>\n        function openZModal() {\n          document.querySelector(\"z-modal\").open();\n        }\n        function closeZModal() {\n          document.querySelector(\"z-modal\").close();\n        }\n      </script>\n      ${Story()}\n    `,\n  ],\n} satisfies Meta<ZSearchbarStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZModal>;\n\nexport const ShortText = {\n  args: {\n    modalid: \"my-modal-short\",\n  },\n  render: (args) => html`\n    <z-modal\n      modalid=${args.modalid}\n      modaltitle=${args.modaltitle}\n      modalsubtitle=${args.modalsubtitle}\n      close-button-label=${args.closeButtonLabel}\n      alertdialog=${args.alertdialog}\n      closable=${args.closable}\n      scroll-inside=${args.scrollInside}\n      lock-page-scroll=${args.lockPageScroll}\n      style=\"--z-modal-content-padding: ${args[\"--z-modal-content-padding\"]}\"\n    >\n      <div slot=\"modalContent\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n        <br />\n        <z-button onclick=\"closeZModal()\">close</z-button>\n      </div>\n    </z-modal>\n    <z-button onclick=\"openZModal()\">apri modale</z-button>\n  `,\n} satisfies Story;\n\nexport const LongText = {\n  args: {\n    modalid: \"my-modal-long\",\n  },\n  render: (args) => html`\n    <z-modal\n      modalid=${args.modalid}\n      modaltitle=${args.modaltitle}\n      modalsubtitle=${args.modalsubtitle}\n      close-button-label=${args.closeButtonLabel}\n      alertdialog=${args.alertdialog}\n      closable=${args.closable}\n      scroll-inside=${args.scrollInside}\n      lock-page-scroll=${args.lockPageScroll}\n      style=\"--z-modal-content-padding: ${args[\"--z-modal-content-padding\"]}\"\n    >\n      <div slot=\"modalContent\">\n        <z-date-picker\n          date-picker-id=\"date-picker-1\"\n          ariaLabel=\"stringaQualsiasi\"\n          label=\"label\"\n        ></z-date-picker>\n        Provaaaaa 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? Possumusne\n        ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul,\n        orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae\n        volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete.\n        Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec\n        honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te\n        enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset\n        inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae\n        superiori sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare\n        sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio\n        quem illum anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad\n        animum, falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis\n        ut et adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae,\n        inquit Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil\n        enim hoc differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem\n        ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui\n        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\n        vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem,\n        inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae\n        dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem\n        aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam,\n        inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori\n        sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent\n        tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum\n        anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum,\n        falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et\n        adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit\n        Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc\n        differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor\n        sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n        amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n        amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n        amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra.\n        <z-select\n          items='[{\"id\":\"item_1\",\"name\":\"first item\",\"selected\":false},{\"id\":\"item_2\",\"name\":\"second item\",\"selected\":true},{\"id\":\"item_3\",\"name\":\"disabled item\",\"selected\":false,\"disabled\":true},{\"id\":\"item_4\",\"name\":\"fourth item\",\"selected\":false}]'\n          label=\"this is the label\"\n          aria-label=\"\"\n          placeholder=\"select placeholder\"\n          name=\"\"\n          status=\"-\"\n          message=\"helper text\"\n          autocomplete=\"false\"\n          noresultslabel=\"Nessun risultato\"\n          disabled=\"false\"\n          readonly=\"false\"\n          htmlid=\"\"\n          htmltitle=\"\"\n          reset-item=\"\"\n          isfixed=\"false\"\n          size=\"big\"\n        ></z-select>\n      </div>\n    </z-modal>\n    <z-button onclick=\"openZModal()\">apri modale</z-button>\n  `,\n} satisfies Story;\n"]}

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
 /**
  * Navigation tabs component.
@@ -10,27 +10,16 @@ import { NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabs
 export class ZNavigationTabs {
     constructor() {
         /**
-         * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.
+         * Index of the last tab that held focus.
          */
+        this.focusedTab = undefined;
         this.ariaLabel = "";
-        /**
-         * Navigation tabs orientation.
-         */
         this.orientation = NavigationTabsOrientation.HORIZONTAL;
-        /**
-         * Navigation tabs size.
-         */
         this.size = NavigationTabsSize.BIG;
-        /**
-         * Index of the selected tab.
-         * Useful to programmatically select a tab.
-         * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.
-         */
         this.selectedTab = undefined;
-        /**
-         * Index of the last tab that held focus.
-         */
-        this.focusedTab = undefined;
+        this.canNavigate = undefined;
+        this.canNavigatePrev = undefined;
+        this.canNavigateNext = undefined;
     }
     /**
      * Getter for the direction to check based on current orientation.
@@ -232,10 +221,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '761584de624112312c9be881390dac16efd76e80', class: {
+        return (h(Host, { key: '69bc5562051734e576c1dbb2af850ef01a70a693', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: '450c0b481e8d776a079244036702521c772a385a', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '354b37e5367bc03ba1d2551793c62c932b0eb5cb', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'ca1996b8e92beecacb4ce6a9446efa7478f93d79', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '7f0f849a6d5e898c246efe58b4582e6c7320fb48' })), h("button", { key: 'cb2beffc86bfbac8f196cc783648a48020021270', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: 'ccb768726c813cb0fd7e49c1a0c30c1bbb4961b9', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: 'c851af9053873ea70d1dee5216bb680deea111f0', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '6a69b89400fea7a87fd18d8d59e183b85aa0c87f', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '997e215eecc0454b96e0034fece50be22cb1eef0', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '8a214ee36e66badda0a8825fbe7c2268ff0fc6df' })), h("button", { key: '627501af784136a1eff68c0e002812144062128e', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '68728de5a048363fd186c4a26cc8872fd4b0253e', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {
@@ -264,10 +253,8 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Set `aria-label` attribute to the internal `<nav>` element with `tablist` role."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "aria-label",
+                "reflect": false,
                 "defaultValue": "\"\""
             },
             "orientation": {
@@ -280,8 +267,7 @@ export class ZNavigationTabs {
                         "NavigationTabsOrientation": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::NavigationTabsOrientation",
-                            "referenceLocation": "NavigationTabsOrientation"
+                            "id": "src/beans/index.tsx::NavigationTabsOrientation"
                         }
                     }
                 },
@@ -291,10 +277,8 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Navigation tabs orientation."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "orientation",
+                "reflect": true,
                 "defaultValue": "NavigationTabsOrientation.HORIZONTAL"
             },
             "size": {
@@ -307,8 +291,7 @@ export class ZNavigationTabs {
                         "NavigationTabsSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::NavigationTabsSize",
-                            "referenceLocation": "NavigationTabsSize"
+                            "id": "src/beans/index.tsx::NavigationTabsSize"
                         }
                     }
                 },
@@ -318,10 +301,8 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Navigation tabs size."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "size",
+                "reflect": true,
                 "defaultValue": "NavigationTabsSize.BIG"
             },
             "selectedTab": {
@@ -338,10 +319,8 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Index of the selected tab.\nUseful to programmatically select a tab.\nThe tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "selected-tab",
+                "reflect": false,
                 "defaultValue": "undefined"
             }
         };
@@ -409,3 +388,4 @@ export class ZNavigationTabs {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-navigation-tabs/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/**\n * Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n */\n@Component({\n  tag: \"z-navigation-tabs\",\n  styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n  /**\n   * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n   */\n  @Prop()\n  ariaLabel = \"\";\n\n  /**\n   * Navigation tabs orientation.\n   */\n  @Prop({reflect: true})\n  orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Navigation tabs size.\n   */\n  @Prop({reflect: true})\n  size? = NavigationTabsSize.BIG;\n\n  /**\n   * Index of the selected tab.\n   * Useful to programmatically select a tab.\n   * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n   */\n  @Prop({mutable: true})\n  selectedTab: number = undefined;\n\n  /**\n   * Emitted when the selected tab changes.\n   * Contains the index of the new selected tab in the `detail` of the event.\n   */\n  @Event()\n  selected: EventEmitter<number>;\n\n  /**\n   * Whether to show navigation buttons.\n   */\n  @State()\n  canNavigate: boolean;\n\n  /**\n   * Whether backwards navigation is allowed.\n   */\n  @State()\n  canNavigatePrev: boolean;\n\n  /**\n   * Whether forward navigation is allowed.\n   */\n  @State()\n  canNavigateNext: boolean;\n\n  @Element() host: HTMLZNavigationTabsElement;\n\n  /**\n   * Index of the last tab that held focus.\n   */\n  private focusedTab = undefined;\n\n  /**\n   * Reference to the `<nav>` element\n   */\n  private nav: HTMLElement;\n\n  /**\n   * Getter for the direction to check based on current orientation.\n   */\n  get direction(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n  }\n\n  /**\n   * Getter for the dimension to check based on current orientation.\n   */\n  get dimension(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n  }\n\n  get tabs(): HTMLElement[] {\n    return Array.from(this.nav.children) as HTMLElement[];\n  }\n\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab(tabElement: HTMLElement): void {\n    const container = tabElement.parentElement;\n\n    if (!container) {\n      return;\n    }\n\n    setTimeout(() => {\n      const isHorizontal = this.orientation === NavigationTabsOrientation.HORIZONTAL;\n\n      const containerRect = container.getBoundingClientRect();\n      const tabRect = tabElement.getBoundingClientRect();\n\n      const offset = isHorizontal ? tabRect.left - containerRect.left : tabRect.top - containerRect.top;\n      const containerSize = isHorizontal ? container.clientWidth : container.clientHeight;\n      const tabSize = isHorizontal ? tabElement.clientWidth : tabElement.clientHeight;\n      const scrollAmount = offset - containerSize / 2 + tabSize / 2;\n\n      container.scrollTo({\n        [isHorizontal ? \"left\" : \"top\"]: container[isHorizontal ? \"scrollLeft\" : \"scrollTop\"] + scrollAmount,\n        behavior: \"smooth\",\n      });\n    }, 100);\n  }\n\n  /**\n   * Scroll the navigation bar half of its size backward.\n   */\n  private navigateBackwards(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size forward.\n   */\n  private navigateForward(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if a keyboard event was triggered by an arrow key.\n   */\n  private isArrowNavigation(e: KeyboardEvent): boolean {\n    return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n  }\n\n  /**\n   * Check if the navigation buttons are needed.\n   */\n  private checkScrollVisible(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n  }\n\n  /**\n   * Check if navigation buttons can be enabled for each direction.\n   */\n  @Watch(\"canNavigate\")\n  checkScrollEnabled(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigateNext =\n      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n  }\n\n  /**\n   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n   */\n  @Watch(\"selectedTab\")\n  onTabSelected(): void {\n    this.tabs.forEach((tab, i) => {\n      const zicon = tab.querySelector(\"z-icon\");\n      const strokeIcon = zicon?.name.replace(\"-filled\", \"\");\n      if (i !== this.selectedTab) {\n        tab.setAttribute(\"aria-selected\", \"false\");\n        tab.tabIndex = -1;\n        if (zicon) {\n          zicon.name = strokeIcon;\n        }\n\n        return;\n      }\n\n      if (zicon) {\n        zicon.name = `${strokeIcon}-filled`;\n      }\n      tab.setAttribute(\"aria-selected\", \"true\");\n    });\n    this.selected.emit(this.selectedTab);\n    if (this.selectedTab !== undefined) {\n      this.scrollToTab(this.tabs[this.selectedTab]);\n    }\n  }\n\n  /**\n   * Handle click on the tabs.\n   * @param event `click` event triggered by a child tab\n   */\n  @Listen(\"click\")\n  handleTabClick(event: MouseEvent): void {\n    const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n    if (!this.tabs.some((child) => child.contains(clickedTab))) {\n      return;\n    }\n\n    this.selectedTab = this.tabs.indexOf(clickedTab);\n  }\n\n  /**\n   * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n   */\n  @Listen(\"focusin\")\n  onTabFocusIn(event: FocusEvent): void {\n    const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n    if (focused === -1) {\n      return;\n    }\n\n    if (this.selectedTab !== undefined) {\n      this.tabs[this.selectedTab].tabIndex = -1;\n    }\n    this.focusedTab = focused;\n    this.tabs[this.focusedTab].tabIndex = -1;\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * Handle keyboard navigation through tabs with arrow keys.\n   */\n  @Listen(\"keydown\")\n  navigateThroughTabs(event: KeyboardEvent): void | boolean {\n    if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) || !this.isArrowNavigation(event)) {\n      return true;\n    }\n\n    event.preventDefault();\n    if (\n      (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move forward\n      this.focusedTab++;\n      if (this.focusedTab >= this.tabs.length) {\n        this.focusedTab = 0;\n      }\n    } else if (\n      (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move backward\n      this.focusedTab--;\n      if (this.focusedTab < 0) {\n        this.focusedTab = this.tabs.length - 1;\n      }\n    }\n    // Ignore disabled tabs\n    if (\n      this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n      this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n    ) {\n      return this.navigateThroughTabs(event);\n    }\n\n    this.tabs[this.focusedTab].focus();\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n   */\n  @Listen(\"focusout\")\n  onTabFocusOut(event: FocusEvent): void {\n    if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n      this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n      this.focusedTab = undefined;\n    }\n  }\n\n  connectedCallback(): void {\n    this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n  }\n\n  componentDidLoad(): void {\n    // Set role and tabindex to each slotted tab\n    this.tabs.forEach((tab) => {\n      tab.setAttribute(\"role\", \"tab\");\n      tab.tabIndex = -1;\n    });\n\n    const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n    if (preselectedTab !== -1) {\n      this.selectedTab = preselectedTab;\n      this.tabs[preselectedTab].tabIndex = 0;\n      this.onTabSelected();\n    } else {\n      this.tabs[0].tabIndex = 0;\n    }\n\n    this.resizeObserver.observe(this.nav);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLZNavigationTabsElement {\n    return (\n      <Host\n        class={{\n          \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n          \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n        }}\n        scrollable={this.canNavigate}\n      >\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateBackwards.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigatePrev}\n          aria-label=\"Mostra elementi precedenti\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n            width={16}\n            height={16}\n          />\n        </button>\n\n        <nav\n          role=\"tablist\"\n          aria-label={this.ariaLabel}\n          ref={(el) => (this.nav = el ?? this.nav)}\n          onScroll={this.checkScrollEnabled.bind(this)}\n          aria-orientation={this.orientation}\n        >\n          <slot></slot>\n        </nav>\n\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateForward.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigateNext}\n          aria-label=\"Mostra elementi successivi\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n            width={16}\n            height={16}\n          />\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -188,3 +188,4 @@ export const Tabpanels = {
     </div>
   `,
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-navigation-tabs/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZNavigationTabs} from \".\";\nimport {NavigationTabsOrientation, NavigationTabsSize} from \"../../beans/index\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZNavigationTabsStoriesArgs = ZNavigationTabs &\n  CSSVarsArguments<\"z-navigation-tabs-nav-buttons-bg\" | \"z-navigation-tabs-nav-buttons-fg\">;\n\nconst StoryMeta = {\n  title: \"ZNavigationTabs\",\n  component: \"z-navigation-tabs\",\n  argTypes: {\n    \"orientation\": {\n      options: Object.values(NavigationTabsOrientation),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    \"--z-navigation-tabs-nav-buttons-bg\": getColorTokenArgConfig(),\n    \"--z-navigation-tabs-nav-buttons-fg\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"--z-navigation-tabs-nav-buttons-bg\": undefined,\n    \"--z-navigation-tabs-nav-buttons-fg\": undefined,\n  },\n} satisfies Meta<ZNavigationTabsStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZNavigationTabsStoriesArgs>;\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const tabs = document.querySelector(\"z-navigation-tabs\");\n  tabs?.addEventListener(\"selected\", ({detail: selectedTab}) => {\n    const controlledPanel = tabs.querySelectorAll('[role=\"tab\"]')?.[selectedTab]?.getAttribute(\"aria-controls\");\n    const panels = Array.from(document.querySelectorAll('[role=\"tabpanel\"]'));\n    panels.forEach((panel: HTMLElement) => (panel.hidden = true));\n    const panelToActivate = panels.find((panel) => panel.id === controlledPanel) as HTMLElement;\n    if (panelToActivate) {\n      panelToActivate.hidden = false;\n    }\n  });\n});\n\nconst tabsTemplate = (): TemplateResult =>\n  html`<button>\n      <z-icon name=\"house\"></z-icon>\n      <span>Home</span>\n    </button>\n    <button>\n      <z-icon name=\"map\"></z-icon>\n      <span>Maps</span>\n    </button>\n    <button disabled>\n      <z-icon name=\"download\"></z-icon>\n      <span>Download</span>\n    </button>\n    <button>\n      <z-icon name=\"user-avatar\"></z-icon>\n      <span>Users</span>\n    </button>\n    <button>\n      <z-icon name=\"artist\"></z-icon>\n      <span>Artisti</span>\n    </button>\n    <a\n      href=\"https://www.google.com\"\n      target=\"_blank\"\n      title=\"Vai a Google\"\n    >\n      <z-icon name=\"arrow-quad-north-east\"></z-icon>\n      <span>Link esterno</span>\n    </a>`;\n\nexport const Horizontal = {\n  argTypes: {\n    size: {\n      options: Object.values(NavigationTabsSize),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    orientation: NavigationTabsOrientation.HORIZONTAL,\n    size: NavigationTabsSize.BIG,\n    ariaLabel: \"\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"orientation\"],\n    },\n  },\n  render: (args) => html`\n    <z-navigation-tabs\n      orientation=${args.orientation}\n      size=${args.size}\n      .ariaLabel=${args.ariaLabel}\n      style=${styleMap({\n        \"--z-navigation-tabs-nav-buttons-bg\": args[\"--z-navigation-tabs-nav-buttons-bg\"],\n        \"--z-navigation-tabs-nav-buttons-fg\": args[\"--z-navigation-tabs-nav-buttons-fg\"],\n      })}\n    >\n      ${tabsTemplate()}\n    </z-navigation-tabs>\n  `,\n} satisfies Story;\n\n/**\n * When orientation is set to `VERTICAL`, the text of slotted tabs is hidden by default.\n * Be sure to put an icon inside the tab to have something visible and don't forget to put an `aria-label` to provide a description for screen readers.\n */\nexport const Vertical = {\n  args: {\n    orientation: NavigationTabsOrientation.VERTICAL,\n    ariaLabel: \"\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"orientation\"],\n    },\n  },\n  render: (args) => html`\n    <z-navigation-tabs\n      orientation=${args.orientation}\n      .ariaLabel=${args.ariaLabel}\n      style=${styleMap({\n        \"--z-navigation-tabs-nav-buttons-bg\": args[\"--z-navigation-tabs-nav-buttons-bg\"],\n        \"--z-navigation-tabs-nav-buttons-fg\": args[\"--z-navigation-tabs-nav-buttons-fg\"],\n      })}\n    >\n      ${tabsTemplate()}\n    </z-navigation-tabs>\n  `,\n} satisfies Story;\n\n/**\n * This story provides an example of how to handle a `ZNavigationTabs` with switchable `tabpanel`s, which is the most common use for the navigation tabs.\n * Each panel must have the `tabpanel` role and the `aria-labelledby` attribute, referencing the tab that controls it (unless a different label is provided using `aria-label`).\n * Similarly, the `aria-controls` attribute must be set on the tabs with the `id` of the controlled panel.\n *\n * For more details check the documentation: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab\\_role\n */\nexport const Tabpanels = {\n  args: {\n    ariaLabel: \"\",\n    orientation: NavigationTabsOrientation.HORIZONTAL,\n  },\n  render: (args) => html`\n    <div class=\"panels-story-wrapper ${args.orientation}\">\n      <z-navigation-tabs\n        orientation=${args.orientation}\n        size=${NavigationTabsSize.BIG}\n        .ariaLabel=${args.ariaLabel}\n        .selectedTab=${0}\n        style=${styleMap({\n          \"--z-navigation-tabs-nav-buttons-bg\": args[\"--z-navigation-tabs-nav-buttons-bg\"],\n          \"--z-navigation-tabs-nav-buttons-fg\": args[\"--z-navigation-tabs-nav-buttons-fg\"],\n        })}\n      >\n        <button\n          aria-controls=\"panel-1\"\n          aria-label=\"home\"\n          id=\"tab-1\"\n        >\n          <z-icon name=\"house\" />\n          <span>Home</span>\n        </button>\n        <button\n          aria-controls=\"panel-2\"\n          aria-label=\"info\"\n          id=\"tab-2\"\n        >\n          <z-icon name=\"info\" />\n          <span>Info</span>\n        </button>\n      </z-navigation-tabs>\n      <div\n        class=\"panel\"\n        id=\"panel-1\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-1\"\n      >\n        <span>Pannello 1</span>\n        <span><z-icon name=\"house-filled\" /></span>\n      </div>\n      <div\n        class=\"panel\"\n        id=\"panel-2\"\n        role=\"tabpanel\"\n        aria-labelledby=\"tab-2\"\n        hidden\n      >\n        <span>Pannello 2</span>\n        <span><z-icon name=\"info-filled\" /></span>\n      </div>\n    </div>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-notification/index.js

@@ -3,6 +3,7 @@ import { Host, h } from "@stencil/core";
  * Notification bar component.
  * @slot - The text of the notification.
  * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
+ * @cssprop --z-notification--content-max-width - The max width of the notification content.
  */
 export class ZNotification {
     handleActionButtonClick(e) {
@@ -14,21 +15,19 @@ export class ZNotification {
         this.notificationClose.emit();
     }
     constructor() {
-        /** Enable close icon */
+        this.contenticonname = undefined;
+        this.actiontext = undefined;
+        this.type = undefined;
         this.showclose = false;
-        /**
-         * Enable shadow.
-         * @deprecated shadow is available only for the `sticky` version of the notification.
-         */
         this.showshadow = false;
-        /** Enable sticky notification bar. */
         this.sticky = false;
+        this.borderposition = "bottom";
         this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
         this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);
     }
     render() {
         var _a;
-        return (h(Host, { key: '689bfc013519c2ca0aba16a520c377c6e4edccbc' }, this.contenticonname && (h("z-icon", { key: '1c9296c9cac6cb65efe8467d458ba416fd837b37', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '973a065c148873e1009ad072d6c7e3e66b6e674c', class: "content-container" }, h("div", { key: '211e47b3cb03cbc180f6a2c2abdade49ad4319e2', class: "content-text" }, h("slot", { key: 'fb538aac60cb506ee8f30f7a9cf67b2954bfae09' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: 'bbf6e7e24f276e7608cf894611790db8204eb469', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '2f65452871ef504088ae5db0d6fa4bf9a8db12cb', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '67f6a236ac25106c9e24ea493759364e67a99045', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: '7a717d8687d3e8e6de06c25192f9e2f14b6563c1' }, h("div", { key: 'eee4aa9a69678e7f353ead6ef4e805544e55426e', class: "main-container" }, this.contenticonname && (h("z-icon", { key: '8d582f822e1e4ad440c65002d9a4abb5e0294040', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '2779b5f3d772ee729c67b1616523ccac1b4646f0', class: "content-container" }, h("div", { key: '1e622f63cc7d8523ab52561360a9de5e8829e976', class: "content-text" }, h("slot", { key: 'f0c65317530288e6ddeb9b604d21243858f25220' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '2cefcdb30e39df9dd2e80f4ddd41f9c887d3594e', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '1a4d7a77ae2b9d6f86cfab0c7b72c77daff9d3da', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '33377e8438a076a2c3eee32ab9f513885e15fbcf', name: "multiply-circle", width: 16, height: 16 }))))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -58,10 +57,8 @@ export class ZNotification {
                     "tags": [],
                     "text": "Name of the icon on the left of the content"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "contenticonname"
+                "attribute": "contenticonname",
+                "reflect": false
             },
             "actiontext": {
                 "type": "string",
@@ -77,10 +74,8 @@ export class ZNotification {
                     "tags": [],
                     "text": "Action button text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "actiontext"
+                "attribute": "actiontext",
+                "reflect": false
             },
             "type": {
                 "type": "string",
@@ -92,8 +87,7 @@ export class ZNotification {
                         "NotificationType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::NotificationType",
-                            "referenceLocation": "NotificationType"
+                            "id": "src/beans/index.tsx::NotificationType"
                         }
                     }
                 },
@@ -103,10 +97,8 @@ export class ZNotification {
                     "tags": [],
                     "text": "Alert variant type"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "type"
+                "attribute": "type",
+                "reflect": true
             },
             "showclose": {
                 "type": "boolean",
@@ -122,10 +114,8 @@ export class ZNotification {
                     "tags": [],
                     "text": "Enable close icon"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "showclose",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "showshadow": {
@@ -145,10 +135,8 @@ export class ZNotification {
                         }],
                     "text": "Enable shadow."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "showshadow",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "sticky": {
@@ -165,11 +153,27 @@ export class ZNotification {
                     "tags": [],
                     "text": "Enable sticky notification bar."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "sticky",
+                "reflect": true,
                 "defaultValue": "false"
+            },
+            "borderposition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"bottom\"",
+                    "resolved": "\"bottom\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Border position"
+                },
+                "attribute": "borderposition",
+                "reflect": true,
+                "defaultValue": "\"bottom\""
             }
         };
     }
@@ -207,3 +211,4 @@ export class ZNotification {
             }];
     }
 }
+//# sourceMappingURL=index.js.map