@zanichelli/albe-web-components 19.3.0-rc1 → 19.4.0

package/dist/collection/components/z-input-range/styles.css

@@ -0,0 +1,262 @@
+:host,
+* {
+  box-sizing: border-box;
+}
+
+:host {
+  /* Internal CSS variable used to store the progress of the input range as a percentage.
+  Needed to color the progress in the runnable track of the input (only Firefox natively provides a pseudo-element to do that: `::-moz-range-progress`).
+  The value is updated by the component. */
+  --progress: 0%;
+
+  /* Internal CSS variable used to store the ratio of the current value to the total range, used for positioning the tooltip guide.
+  The value is updated by the component. */
+  --progress-ratio: 0;
+  --z-input-range-thumb-size: calc(var(--space-unit) * 3);
+
+  display: flex;
+  width: fit-content;
+  height: fit-content;
+  flex-direction: column;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host([size="small"]) {
+  --z-input-range-thumb-size: calc(var(--space-unit) * 2);
+}
+
+:host([size="x-small"]) {
+  --z-input-range-thumb-size: calc(var(--space-unit) * 1.5);
+}
+
+:host([orientation="vertical"]) {
+  height: 100%;
+  flex-direction: row;
+}
+
+.input-container {
+  /* Thickness of the track. It is calculated as one-third of the thumb size. */
+  --z-input-range-track-size: calc(var(--z-input-range-thumb-size) / 3);
+
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+label.z-label {
+  padding: 0;
+  margin-bottom: calc(var(--space-unit) * 1.5);
+}
+
+:host([orientation="vertical"]) label.z-label {
+  display: none;
+}
+
+input[type="range"] {
+  --main-color: var(--color-primary01);
+
+  width: 100%;
+  height: var(--z-input-range-thumb-size);
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  background: transparent;
+  writing-mode: horizontal-tb;
+}
+
+input[type="range"]:hover,
+input[type="range"]:hover ~ z-tooltip {
+  --main-color: var(--color-hover-primary);
+}
+
+input[type="range"]:focus:focus-visible {
+  outline: none;
+}
+
+input[type="range"]:disabled,
+input[type="range"]:disabled ~ z-tooltip {
+  --main-color: var(--color-form-disabled03);
+
+  cursor: default;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: var(--z-input-range-track-size);
+  border: none;
+  appearance: none;
+  background:
+    linear-gradient(var(--main-color), var(--main-color)) 0 / var(--progress) 100% no-repeat,
+    var(--color-surface03);
+  border-radius: var(--border-radius);
+}
+
+:host([orientation="vertical"]) input[type="range"] {
+  width: var(--z-input-range-thumb-size);
+  height: 100%;
+  direction: rtl;
+  writing-mode: vertical-lr;
+}
+
+:host([orientation="vertical"]) input[type="range"]::-webkit-slider-runnable-track {
+  width: var(--z-input-range-track-size);
+  height: 100%;
+  background:
+    linear-gradient(var(--main-color), var(--main-color)) 0 100% / 100% var(--progress) no-repeat,
+    var(--color-surface03);
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  width: var(--z-input-range-thumb-size);
+  height: var(--z-input-range-thumb-size);
+  box-sizing: border-box;
+  border: calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);
+  margin-top: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);
+  appearance: none;
+  background-color: var(--color-surface01);
+  border-radius: 50%;
+}
+
+:host([orientation="vertical"]) input[type="range"]::-webkit-slider-thumb {
+  margin-top: 0;
+  margin-left: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);
+}
+
+input[type="range"]:not(:disabled)::-webkit-slider-runnable-track {
+  cursor: pointer;
+}
+
+input[type="range"]:not(:disabled)::-webkit-slider-thumb {
+  cursor: grab;
+}
+
+input[type="range"]:focus:not(:active)::-webkit-slider-thumb {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+input[type="range"]:active:not(:disabled)::-webkit-slider-thumb {
+  cursor: grabbing;
+}
+
+/* --- Firefox styles --- */
+
+/* All styles must be duplicated, because using comma-separated selectors
+(like `input[type="range"]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb`) would break webkit styles...
+*/
+input[type="range"]::-moz-range-track {
+  width: 100%;
+  height: var(--z-input-range-track-size);
+  border: none;
+  appearance: none;
+  background: var(--color-surface03);
+  border-radius: var(--border-radius);
+}
+
+:host([orientation="vertical"]) input[type="range"]::-moz-range-track {
+  width: var(--z-input-range-track-size);
+  height: 100%;
+}
+
+input[type="range"]::-moz-range-progress {
+  height: var(--z-input-range-track-size);
+  border: none;
+  background: var(--main-color);
+  border-radius: var(--border-radius);
+}
+
+:host([orientation="vertical"]) input[type="range"]::-moz-range-progress {
+  width: var(--z-input-range-track-size);
+  height: auto;
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: var(--z-input-range-thumb-size);
+  height: var(--z-input-range-thumb-size);
+  box-sizing: border-box;
+  border: calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);
+  margin-top: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);
+  appearance: none;
+  background-color: var(--color-surface01);
+  border-radius: 50%;
+}
+
+:host([orientation="vertical"]) input[type="range"]::-moz-range-thumb {
+  margin-top: 0;
+  margin-left: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);
+}
+
+input[type="range"]:not(:disabled)::-moz-range-track,
+input[type="range"]:not(:disabled)::-moz-range-progress {
+  cursor: pointer;
+}
+
+input[type="range"]:not(:disabled)::-moz-range-thumb {
+  cursor: grab;
+}
+
+input[type="range"]:active:not(:disabled)::-moz-range-thumb {
+  cursor: grabbing;
+}
+
+input[type="range"]:focus:not(:active)::-moz-range-thumb {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+/* --- End of Firefox styles --- */
+
+.tooltip-guide {
+  --progress-position: calc(
+    (var(--progress-ratio) * (100% - var(--z-input-range-thumb-size))) + (var(--z-input-range-thumb-size) / 2)
+  );
+
+  position: absolute;
+  z-index: -1;
+  top: 0;
+
+  /* `--progress` is good for painting the filled track, but not enough for representing the thumb center.
+   * The thumb center cannot go from 0 to 100%:
+   * at min it sits at thumbSize/2, and at max it sits at width - thumbSize/2.
+   * So we map a normalized ratio (0..1) over the usable travel distance
+   * (width - thumbSize), then add thumbSize/2 to get the correct center coordinate.
+   */
+  left: var(--progress-position);
+  width: var(--z-input-range-thumb-size);
+  height: var(--z-input-range-thumb-size);
+  background: transparent;
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+:host([orientation="vertical"]) .tooltip-guide {
+  top: auto;
+  bottom: var(--progress-position);
+  left: 0;
+  transform: translateY(50%);
+}
+
+z-tooltip {
+  --main-color: var(--color-primary01);
+  --z-tooltip-theme--surface: var(--main-color);
+  --z-tooltip-theme--text: var(--color-text-inverse);
+  --z-tooltip-padding: calc(var(--space-unit) / 2);
+}
+
+z-tooltip .current-value {
+  min-width: calc(var(--space-unit) * 3.5);
+}
+
+.edges {
+  display: flex;
+  justify-content: space-between;
+}
+
+.edges :is(.min, .max) {
+  min-width: var(--z-input-range-thumb-size); /* visually align single digit values to the center of the thumb */
+  text-align: center;
+}
+
+:host([orientation="vertical"]) .edges {
+  display: none;
+}

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

@@ -8,7 +8,7 @@ export class ZLogo {
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: '649a64cb6a489dd102212f138c42446b3b1dbd79', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: '35e05af6b6f866d00ee18e9f88c56665a70ffaf1', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
     static get is() { return "z-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -141,3 +141,4 @@ export class ZLogo {
         };
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-logo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAO3E,MAAM,OAAO,KAAK;IAyBhB,MAAM;QACJ,MAAM,KAAK,GAAG,EAAE,CAAC;QAEjB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;QAC1D,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,KAAK,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC;QAC7D,CAAC;QAED,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,EAAC,IAEjC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;YAE7C,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACzB,CACL,CAAC,CAAC,CAAC,CACF,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5B,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-logo\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZLogo implements ComponentInterface {\n  /** image width */\n  @Prop()\n  width?: number;\n\n  /** image height */\n  @Prop()\n  height?: number;\n\n  /** alternative image text */\n  @Prop()\n  imageAlt?: string;\n\n  /** link url (optional) */\n  @Prop()\n  link?: string;\n\n  /** link target: true means _blank, false means _self */\n  @Prop()\n  targetBlank?: boolean;\n\n  /** if true, the mobile logo is displayed, otherwise the desktop one */\n  @Prop()\n  mobileLogo?: boolean;\n\n  render(): HTMLZLogoElement {\n    const style = {};\n\n    if (this.width) {\n      style[\"width\"] = style[\"max-width\"] = `${this.width}px`;\n    }\n\n    if (this.height) {\n      style[\"height\"] = style[\"max-height\"] = `${this.height}px`;\n    }\n\n    return (\n      <Host\n        style={style}\n        class={{mobile: !!this.mobileLogo}}\n      >\n        {this.link ? (\n          <a\n            href={this.link}\n            target={this.targetBlank ? \"_blank\" : \"_self\"}\n          >\n            <img alt={this.imageAlt} />\n          </a>\n        ) : (\n          <img alt={this.imageAlt} />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -19,6 +19,11 @@ a {
   height: 100%;
 }
 
+a:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
 :host(.mobile) {
   width: 31px;
   height: 40px;

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

@@ -6,7 +6,6 @@ const isZMenuSection = (el) => (el === null || el === void 0 ? void 0 : el.tagNa
  * @slot - Menu label
  * @slot header - Header to display as the first entry of the open menu.
  * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.
- * @cssprop --z-menu-label-color - Color of the label's text.
  */
 export class ZMenu {
     get focusableItem() {
@@ -535,3 +534,4 @@ export class ZMenu {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-menu/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst isZMenuSection = (el: HTMLElement | HTMLZMenuSectionElement): el is HTMLZMenuSectionElement =>\n  el?.tagName === \"Z-MENU-SECTION\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu implements ComponentInterface {\n  @Element() host: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = true;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  /**\n   * Tabindex value to set on the menu label.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).\n   */\n  @Prop({mutable: true})\n  htmlTabindex = -1;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private labelButton: HTMLButtonElement;\n\n  private content: HTMLElement;\n\n  private items: (HTMLElement | HTMLZMenuSectionElement)[] = [];\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  private get focusableItem(): HTMLZMenuSectionElement | HTMLElement | null {\n    return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));\n  }\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\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    this.setLabelA11yAttrs();\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (!this.floating) {\n      return;\n    }\n\n    if (this.content && this.hasContent) {\n      const {style} = this.content;\n      const {left} = this.host.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.host.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.host.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  private setItemTabindex(item: HTMLElement | HTMLZMenuSectionElement, tabIndex: number): void {\n    if (isZMenuSection(item)) {\n      item.htmlTabindex = tabIndex;\n    } else {\n      item.tabIndex = tabIndex;\n    }\n  }\n\n  /**\n   * Set `menuitem` role to all menu items (ZMenuSection items already have it).\n   * Set -1 to the tabindex of the items and 0 to the first one.\n   */\n  private setItemsA11yAttrs(): void {\n    this.items.forEach((item, index) => {\n      const tabindex = index === 0 ? 0 : -1;\n      this.setItemTabindex(item, tabindex);\n      if (!isZMenuSection(item)) {\n        item.setAttribute(\"role\", \"menuitem\");\n      }\n    });\n  }\n\n  private onItemsChange(): void {\n    this.checkContent();\n    this.items = Array.from(this.host.children).filter(({slot}) => slot === \"item\") as HTMLElement[];\n    this.setItemsA11yAttrs();\n    this.items.forEach((item) => {\n      if (!isZMenuSection(item)) {\n        item.dataset.text = item.textContent;\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   * If the receiver is a ZMenuSection and it's open, focus its first focusable item.\n   */\n  private moveFocus(\n    receiver: HTMLElement | HTMLZMenuSectionElement,\n    current?: HTMLElement | HTMLZMenuSectionElement\n  ): void {\n    if (isZMenuSection(receiver)) {\n      receiver.setFocus();\n    } else {\n      receiver.tabIndex = 0;\n      setTimeout(() => {\n        receiver.focus();\n      }, 100);\n    }\n    if (!current) {\n      return;\n    }\n\n    this.setItemTabindex(current, -1);\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.moveFocus(this.items[0]);\n      }\n\n      return;\n    }\n\n    if (!this.verticalContext) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.open = true;\n      this.moveFocus(this.items[0]);\n    }\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    const label = this.hasContent ? this.labelButton : (this.host.firstElementChild as HTMLElement);\n    label.focus();\n  }\n\n  /**\n   * Focus the last item.\n   */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    const lastItem = this.items[this.items.length - 1];\n    if (isZMenuSection(lastItem) && lastItem.open) {\n      lastItem.focusLastItem();\n\n      return;\n    }\n\n    this.moveFocus(lastItem);\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (!this.open) {\n      cancelAnimationFrame(this.raf);\n      this.closed.emit();\n      this.items.forEach((item) => {\n        if (isZMenuSection(item) && item.open) {\n          item.open = false;\n        }\n      });\n\n      return;\n    }\n\n    this.setItemsA11yAttrs();\n    this.opened.emit();\n    if (this.floating) {\n      this.reflow(true);\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  setLabelA11yAttrs(): void {\n    if (this.hasContent && this.labelButton) {\n      this.labelButton.tabIndex = this.htmlTabindex;\n\n      return;\n    }\n\n    const slottedLabel = this.host.firstElementChild as HTMLElement;\n    slottedLabel.role = \"menuitem\";\n    slottedLabel.tabIndex = this.htmlTabindex;\n  }\n\n  /**\n   * Set tabindex to -1 to all siblings of the clicked item.\n   */\n  @Listen(\"click\", {target: \"document\"})\n  onItemClick(ev: MouseEvent): void {\n    const clickedItem = this.items.find((item) => containsElement(item, ev.target as HTMLElement));\n    if (clickedItem) {\n      this.items.forEach((item) => {\n        if (item === clickedItem) {\n          return;\n        }\n\n        if (isZMenuSection(item)) {\n          item.htmlTabindex = -1;\n        } else {\n          item.tabIndex = -1;\n        }\n      });\n    }\n  }\n\n  @Listen(\"keydown\")\n  onKeyDown(ev: KeyboardEvent): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n        if (!this.open) {\n          break;\n        }\n        ev.stopPropagation();\n        ev.preventDefault();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext && !this.open) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[0]);\n          break;\n        }\n\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (this.verticalContext && currentIndex === this.items.length - 1) {\n          // navigation is going to leave this menu. restore tabindex to the label and let the parent handle it\n          this.setItemTabindex(this.items[currentIndex], -1);\n          this.htmlTabindex = 0;\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const receiver = this.items[currentIndex + 1];\n        // if the last item is already focused, navigate to the first one\n        this.moveFocus(receiver ?? this.items[0], this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          // open the menu and focus the last item\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[this.items.length - 1], this.focusableItem);\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (currentIndex === 0 && this.verticalContext) {\n          this.setItemTabindex(this.focusableItem, -1);\n          this.setFocus();\n          break;\n        }\n\n        const receiver = this.items[currentIndex - 1] ?? this.items[this.items.length - 1];\n        // if the receiver is a ZMenuSection and it's open, focus its last item\n        if (isZMenuSection(receiver) && receiver.open) {\n          this.setItemTabindex(this.focusableItem, -1);\n          receiver.focusLastItem();\n          break;\n        }\n\n        this.moveFocus(receiver, this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open || !this.verticalContext) {\n          break;\n        }\n\n        // close the menu and focus the label\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = false;\n        this.setFocus();\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelClick = this.onLabelClick.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setLabelA11yAttrs();\n    this.onItemsChange();\n  }\n\n  render(): HTMLDivElement | HTMLZMenuElement {\n    if (!this.hasContent) {\n      return (\n        <div class=\"menu-label\">\n          <slot onSlotchange={this.onLabelSlotChange} />\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <button\n          ref={(el) => (this.labelButton = el)}\n          class=\"menu-label\"\n          aria-expanded={`${!!this.open}`}\n          aria-haspopup={`${this.hasContent}`}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          role=\"menuitem\"\n          tabIndex={this.htmlTabindex}\n          onClick={this.onLabelClick}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n        </button>\n\n        <div\n          class=\"content\"\n          ref={(el) => (this.content = el)}\n        >\n          {this.hasHeader && (\n            <header class=\"header\">\n              <slot\n                name=\"header\"\n                onSlotchange={this.checkContent}\n              />\n            </header>\n          )}\n\n          <div\n            class=\"items\"\n            role=\"menu\"\n          >\n            <slot\n              name=\"item\"\n              onSlotchange={this.onItemsChange}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -6,6 +6,9 @@
 }
 
 :host {
+  /**
+   * @prop --z-menu-label-color: Color of the label's text.
+   */
   --z-menu-label-color: ;
 
   position: relative;

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

@@ -174,7 +174,7 @@ export class ZMenuSection {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: '4e6388d5919ca9010c78ef35df6b1c0b807d2dd6', open: this.open }, h("button", { key: '4093e9a7ce5cb5cf63ca7012bb44c7b49b638e90', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '0c88383d5be4c81aee5a78f89e4706a6b167dccb', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'd32c9dc28048a6d7441075da41cb2f255e5bdc73', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '0c24a7122314391262e640b440f87dce632eb2f3', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'fe79aa30aaa7d3a92621c6725e4d0ddca604726e', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: 'fff56aa316372fc2df80738c86be52be59e4deb9', open: this.open }, h("button", { key: '89630a6dc1985a9236dd7f7d0fdd2b5e5b8bd580', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '5b131d904e2154fb8c852a734bcc8dd9b421da65', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '0463aa91e57fa4766c0a11fd3e329752fd770240', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: 'f919168a46d3d3ebd7c12fce97d84f029ee938bc', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'e21f494480c18514ff4081b2aa75a8f856f74cc6', name: "section", onSlotchange: this.onItemsChange }))));
     }
     static get is() { return "z-menu-section"; }
     static get encapsulation() { return "shadow"; }
@@ -347,3 +347,4 @@ export class ZMenuSection {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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 {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} 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 implements ComponentInterface {\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-modal/index.js

@@ -1,13 +1,13 @@
 import { h } from "@stencil/core";
 import dialogPolyfill from "dialog-polyfill";
 import { KeyboardCode } from "../../beans";
-const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [contenteditable=""], [contenteditable="true"], a[href], [tabindex], summary):not([disabled], [disabled=""], [tabindex="-1"], [aria-hidden="true"], [hidden])';
+import { FocusTrapController } from "../../utils/focus-trap-controller";
+import { ReactiveControllerHost } from "../../utils/reactive-controller";
 /**
  * @slot modalCloseButton - slot for custom close button
  * @slot modalContent - slot for the content of the modal
- * @cssprop --z-modal-content-padding - padding of the modal's content. The default is 16px (--space-unit * 2)
  */
-export class ZModal {
+export class ZModal extends ReactiveControllerHost {
     constructor() {
         /** aria-label for close button (optional) */
         this.closeButtonLabel = "chiudi modale";
@@ -19,6 +19,10 @@ export class ZModal {
         this.scrollInside = true;
         /** if true, the page scroll is locked when the modal is open (optional, default is true) */
         this.lockPageScroll = true;
+        this.focusTrapController = new FocusTrapController(this, {
+            isActive: () => { var _a; return !!((_a = this.dialog) === null || _a === void 0 ? void 0 : _a.open); },
+        });
+        super();
     }
     emitModalClose() {
         if (this.closable) {
@@ -57,14 +61,17 @@ export class ZModal {
         if (this.lockPageScroll) {
             requestAnimationFrame(() => (document.body.style.overflowY = "hidden"));
         }
+        super.componentDidLoad();
     }
     disconnectedCallback() {
         this.resetPageScroll();
+        super.disconnectedCallback();
     }
     /** open modal */
     async open() {
         var _a;
         (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.showModal();
+        this.focusTrapController.sync();
         if (this.lockPageScroll) {
             document.body.style.overflowY = "hidden";
         }
@@ -74,44 +81,16 @@ export class ZModal {
         var _a;
         if (this.closable) {
             (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
+            this.focusTrapController.sync();
             this.resetPageScroll();
         }
     }
-    /**
-     * Get a list of focusable elements in the dialog.
-     * Remove elements with `display: none` from the list, because they're not focusable.
-     *
-     * N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.
-     * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.
-     */
-    get focusableElements() {
-        return [
-            ...Array.from(this.host.shadowRoot.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)),
-            ...Array.from(this.host.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)),
-        ].filter((element) => getComputedStyle(element).display !== "none");
-    }
     handleKeyDown(e) {
         if (e.code === KeyboardCode.ESC && !this.closable) {
             e.preventDefault();
-        }
-        if (e.code !== KeyboardCode.TAB) {
             return;
         }
-        const focusableElements = this.focusableElements;
-        const shadowActiveElement = this.host.shadowRoot.activeElement;
-        const activeElement = this.host.ownerDocument.activeElement;
-        const firstFocusableElement = focusableElements[0];
-        const lastFocusableElement = focusableElements[focusableElements.length - 1];
-        if (e.shiftKey && (shadowActiveElement == firstFocusableElement || activeElement == firstFocusableElement)) {
-            // shift + tab was pressed and current active element is the first focusable element
-            e.preventDefault();
-            lastFocusableElement.focus();
-        }
-        else if (!e.shiftKey && (shadowActiveElement == lastFocusableElement || activeElement == lastFocusableElement)) {
-            // shift + tab was pressed and current active element is the first focusable element
-            e.preventDefault();
-            firstFocusableElement.focus();
-        }
+        this.focusTrapController.handleWrapTab(e);
     }
     closeButtonSlot() {
         if (this.closable) {
@@ -125,16 +104,16 @@ export class ZModal {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: 'd958597dcd030d9d837aa27e3d951e58c76d1872', class: {
+        return (h("dialog", { key: '2fd3e4e2ddcca401f85e379b2a3110f53d7a3766', 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: 'f0f3eee2e047afb3e71fb0b6f706c2e1aa9a6e84', 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: '9f3fb52e15a1add072ad479b1e89aa6aa8a66613', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '38b22b4d59913dfa9ace56330e37354406db8533' }, this.modaltitle && h("h1", { key: '7c94dc6d10aca3812dd2ca1ff498ad9d8b34aecc', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '9bc717fd0b831c4de74a38eb92a69a44f51a0a4d', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '346772b20ab0d14758433644330f178bfbf147fd', 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: '10bb35f9925f7df7826566181db8bfaf07d665d1', name: "modalContent" }))), h("div", { key: '62fa5aa67f2fe84f88caf0af308ca5c4c0f2162f', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
@@ -412,3 +391,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\";\nimport {FocusTrapController} from \"../../utils/focus-trap-controller\";\nimport {ReactiveControllerHost} from \"../../utils/reactive-controller\";\n\n/**\n * @slot modalCloseButton - slot for custom close button\n * @slot modalContent - slot for the content of the modal\n */\n@Component({\n  tag: \"z-modal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZModal extends ReactiveControllerHost {\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  private focusTrapController = new FocusTrapController(this, {\n    isActive: () => !!this.dialog?.open,\n  });\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    super.componentDidLoad();\n  }\n\n  disconnectedCallback(): void {\n    this.resetPageScroll();\n    super.disconnectedCallback();\n  }\n\n  /** open modal */\n  @Method()\n  async open(): Promise<void> {\n    this.dialog?.showModal();\n    this.focusTrapController.sync();\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.focusTrapController.sync();\n      this.resetPageScroll();\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === KeyboardCode.ESC && !this.closable) {\n      e.preventDefault();\n\n      return;\n    }\n\n    this.focusTrapController.handleWrapTab(e);\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/styles.css

@@ -1,8 +1,11 @@
 :host {
+  /**
+   * @prop --z-modal-content-padding: padding of the modal's content. The default is `16px` (`--space-unit * 2`).
+   */
+  --z-modal-content-padding: ;
+
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
-
-  --z-modal-content-padding: ;
 }
 
 :host > dialog {

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

@@ -4,8 +4,6 @@ import { NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabs
  * Navigation tabs component.
  * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.
  * @slot - Main slot. Use `<button>` or `<a>` tags as children.
- * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
- * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
  */
 export class ZNavigationTabs {
     constructor() {
@@ -232,10 +230,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: 'e42f29ee8dd02deb457e708d9a81cba1c512e316', 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: '820b7b1f82db2415cf6c689388641eb66b59e37e', 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: '6f61292f4e0587755981a5baff24034c71ef6fcf', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'df2a90ce465c82acb651ae92782edce04aafd55c', 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: 'b441002c32b7de956a388f93568d2404c8faf5db' })), h("button", { key: '83de33b5686491cf99350dc23ab5b34a5c1a2846', 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: '725767832f004a26638807c64b8b305694499d55', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {
@@ -409,3 +407,4 @@ export class ZNavigationTabs {
             }];
     }
 }
+//# sourceMappingURL=index.js.map