@zanichelli/albe-web-components 7.3.4 → 7.3.5

package/dist/esm/index.js

@@ -1,9 +1,9 @@
-import { c as colorFromId } from './utils-f8eb3944.js';
-export { o as AlertType, A as AvatarSize, c as ButtonSize, b as ButtonType, B as ButtonVariant, C as CardVariant, R as CarouselArrowsPosition, U as CarouselProgressMode, d as ControlSize, Q as CoverHeroContentPosition, M as CoverHeroVariant, p as Device, g as DividerOrientation, D as DividerSize, j as ExpandableListButtonAlign, E as ExpandableListStyle, J as InfoRevealPosition, e as InputStatus, I as InputType, f as KeyboardCode, K as KeyboardKeyCode, k as LabelPosition, L as LicenseType, l as ListDividerType, h as ListSize, m as ListType, N as NavigationTabsOrientation, a as NavigationTabsSize, n as NotificationType, O as OffCanvasVariant, q as PocketStatus, P as PopoverPosition, i as Size, S as SortDirection, T as ThemeVariant, r as ToastNotification, t as ToastNotificationPosition, s as ToastNotificationTransition, v as TransitionDirection, u as ZAriaAlertMode, x as ZChipType, z as ZDatePickerMode, F as ZDatePickerModeValue, G as ZDatePickerPosition, w as ZFileUploadType, H as ZRangePickerMode, y as ZSectionTitleDividerPosition, Z as ZTableRowExpandedType } from './index-03c01696.js';
-import './breakpoints-14432d05.js';
+import { c as colorFromId } from './utils-a52a81ba.js';
+export { o as AlertType, A as AvatarSize, c as ButtonSize, b as ButtonType, B as ButtonVariant, C as CardVariant, R as CarouselArrowsPosition, U as CarouselProgressMode, d as ControlSize, Q as CoverHeroContentPosition, M as CoverHeroVariant, p as Device, g as DividerOrientation, D as DividerSize, j as ExpandableListButtonAlign, E as ExpandableListStyle, J as InfoRevealPosition, e as InputStatus, I as InputType, f as KeyboardCode, K as KeyboardKeyCode, k as LabelPosition, L as LicenseType, l as ListDividerType, h as ListSize, m as ListType, N as NavigationTabsOrientation, a as NavigationTabsSize, n as NotificationType, O as OffCanvasVariant, q as PocketStatus, P as PopoverPosition, i as Size, S as SortDirection, T as ThemeVariant, r as ToastNotification, t as ToastNotificationPosition, s as ToastNotificationTransition, v as TransitionDirection, u as ZAriaAlertMode, x as ZChipType, z as ZDatePickerMode, F as ZDatePickerModeValue, G as ZDatePickerPosition, w as ZFileUploadType, H as ZRangePickerMode, y as ZSectionTitleDividerPosition, Z as ZTableRowExpandedType } from './index-e36ec4a4.js';
+import './breakpoints-c386984e.js';
 
-const UTILS = {
-  colorFromId,
+const UTILS = {
+  colorFromId,
 };
 
 export { UTILS as Utils };

package/dist/esm/{utils-a7846d0f.js → utils-9641b4ed.js}

@@ -1,5 +1,5 @@
 import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-9943807e.js';
-import { G as ZDatePickerPosition, z as ZDatePickerMode, F as ZDatePickerModeValue } from './index-03c01696.js';
+import { G as ZDatePickerPosition, z as ZDatePickerMode, F as ZDatePickerModeValue } from './index-e36ec4a4.js';
 
 var HOOKS = [
     "onChange",
@@ -2621,80 +2621,80 @@ var it = createCommonjsModule(function (module, exports) {
 })));
 });
 
-function validateDate(dateStr, hasTime = false) {
-  const regex = hasTime ? /^\d{1,2}[/-]\d{1,2}[/-]\d{2,4} - \d{2}:\d{2}$/ : /^\d{1,2}[/-]\d{1,2}[/-]\d{2,4}$/;
-  if (dateStr.match(regex) === null) {
-    return false;
-  }
-  return true;
-}
-function setFlatpickrPosition(element, mode) {
-  const toggleHeight = element.children[0].clientHeight;
-  element.style.setProperty("--z-range-picker--toggle-height", `${toggleHeight}px`);
-  const flatpickrHeight = mode === ZDatePickerMode.DATE_TIME
-    ? ZDatePickerModeValue.DATE_TIME
-    : mode === ZDatePickerMode.MONTHS
-      ? ZDatePickerModeValue.MONTHS
-      : ZDatePickerModeValue.DATE;
-  const bottom = element.getBoundingClientRect().bottom;
-  const overflowBottom = bottom + flatpickrHeight > window.innerHeight;
-  const overflowTop = bottom - flatpickrHeight - toggleHeight < 0;
-  if (!overflowTop && overflowBottom) {
-    return ZDatePickerPosition.TOP;
-  }
-  return ZDatePickerPosition.BOTTOM;
-}
-function setAriaOptions(element, mode) {
-  const calendar = element.getElementsByClassName("flatpickr-calendar");
-  Array.from(calendar).forEach((element) => {
-    element.setAttribute("tabindex", "0");
-    const prevMonthArrow = element.getElementsByClassName("flatpickr-prev-month")[0];
-    const nextMonthArrow = element.getElementsByClassName("flatpickr-next-month")[0];
-    const tabindexElements = element.querySelectorAll('[tabindex = "-1"]');
-    tabindexElements.forEach((element) => element.setAttribute("tabindex", "0"));
-    Array.from(element.getElementsByClassName("flatpickr-day")).forEach((date) => {
-      if (date.classList.contains("flatpickr-disabled")) {
-        date.setAttribute("tabindex", "-1");
-      }
-    });
-    prevMonthArrow.setAttribute("tabindex", "0");
-    nextMonthArrow.setAttribute("tabindex", "0");
-    prevMonthArrow.setAttribute("role", "button");
-    nextMonthArrow.setAttribute("role", "button");
-    element.getElementsByClassName("cur-year")[0].setAttribute("aria-label", "Anno");
-    if (mode === ZDatePickerMode.DATE) {
-      setDateAriaOptions(element, prevMonthArrow, nextMonthArrow);
-    }
-    if (mode === ZDatePickerMode.DATE_TIME) {
-      setDateTimeAriaOptions(element, prevMonthArrow, nextMonthArrow);
-    }
-    if (mode === ZDatePickerMode.MONTHS) {
-      setMonthsAriaOptions(element, prevMonthArrow, nextMonthArrow);
-    }
-  });
-}
-function setDateAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
-  Array.from(calendar.getElementsByClassName("flatpickr-days")).forEach((element) => element.setAttribute("tabindex", "-1"));
-  Array.from(calendar.getElementsByClassName("flatpickr-day")).forEach((element) => element.setAttribute("role", "button"));
-  calendar.getElementsByClassName("flatpickr-monthDropdown-months")[0].setAttribute("aria-label", "Mese");
-  prevMonthArrow.setAttribute("aria-label", "Mese precedente");
-  nextMonthArrow.setAttribute("aria-label", "Mese successivo");
-}
-function setDateTimeAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
-  Array.from(calendar.getElementsByClassName("flatpickr-days")).forEach((element) => element.setAttribute("tabindex", "-1"));
-  Array.from(calendar.getElementsByClassName("flatpickr-day")).forEach((element) => element.setAttribute("role", "button"));
-  calendar.getElementsByClassName("flatpickr-monthDropdown-months")[0].setAttribute("aria-label", "Mese");
-  prevMonthArrow.setAttribute("aria-label", "Mese precedente");
-  nextMonthArrow.setAttribute("aria-label", "Mese successivo");
-  Array.from(calendar.getElementsByClassName("time24hr")).forEach((element) => element.setAttribute("tabindex", "-1"));
-  calendar.getElementsByClassName("flatpickr-hour")[0].setAttribute("aria-label", "Ora");
-  calendar.getElementsByClassName("flatpickr-minute")[0].setAttribute("aria-label", "Minuti");
-}
-function setMonthsAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
-  Array.from(calendar.getElementsByClassName("flatpickr-monthSelect-months")).forEach((element) => element.setAttribute("tabindex", "-1"));
-  Array.from(calendar.getElementsByClassName("flatpickr-monthSelect-month")).forEach((element) => element.setAttribute("role", "button"));
-  prevMonthArrow.setAttribute("aria-label", "Anno precedente");
-  nextMonthArrow.setAttribute("aria-label", "Anno successivo");
+function validateDate(dateStr, hasTime = false) {
+  const regex = hasTime ? /^\d{1,2}[/-]\d{1,2}[/-]\d{2,4} - \d{2}:\d{2}$/ : /^\d{1,2}[/-]\d{1,2}[/-]\d{2,4}$/;
+  if (dateStr.match(regex) === null) {
+    return false;
+  }
+  return true;
+}
+function setFlatpickrPosition(element, mode) {
+  const toggleHeight = element.children[0].clientHeight;
+  element.style.setProperty("--z-range-picker--toggle-height", `${toggleHeight}px`);
+  const flatpickrHeight = mode === ZDatePickerMode.DATE_TIME
+    ? ZDatePickerModeValue.DATE_TIME
+    : mode === ZDatePickerMode.MONTHS
+      ? ZDatePickerModeValue.MONTHS
+      : ZDatePickerModeValue.DATE;
+  const bottom = element.getBoundingClientRect().bottom;
+  const overflowBottom = bottom + flatpickrHeight > window.innerHeight;
+  const overflowTop = bottom - flatpickrHeight - toggleHeight < 0;
+  if (!overflowTop && overflowBottom) {
+    return ZDatePickerPosition.TOP;
+  }
+  return ZDatePickerPosition.BOTTOM;
+}
+function setAriaOptions(element, mode) {
+  const calendar = element.getElementsByClassName("flatpickr-calendar");
+  Array.from(calendar).forEach((element) => {
+    element.setAttribute("tabindex", "0");
+    const prevMonthArrow = element.getElementsByClassName("flatpickr-prev-month")[0];
+    const nextMonthArrow = element.getElementsByClassName("flatpickr-next-month")[0];
+    const tabindexElements = element.querySelectorAll('[tabindex = "-1"]');
+    tabindexElements.forEach((element) => element.setAttribute("tabindex", "0"));
+    Array.from(element.getElementsByClassName("flatpickr-day")).forEach((date) => {
+      if (date.classList.contains("flatpickr-disabled")) {
+        date.setAttribute("tabindex", "-1");
+      }
+    });
+    prevMonthArrow.setAttribute("tabindex", "0");
+    nextMonthArrow.setAttribute("tabindex", "0");
+    prevMonthArrow.setAttribute("role", "button");
+    nextMonthArrow.setAttribute("role", "button");
+    element.getElementsByClassName("cur-year")[0].setAttribute("aria-label", "Anno");
+    if (mode === ZDatePickerMode.DATE) {
+      setDateAriaOptions(element, prevMonthArrow, nextMonthArrow);
+    }
+    if (mode === ZDatePickerMode.DATE_TIME) {
+      setDateTimeAriaOptions(element, prevMonthArrow, nextMonthArrow);
+    }
+    if (mode === ZDatePickerMode.MONTHS) {
+      setMonthsAriaOptions(element, prevMonthArrow, nextMonthArrow);
+    }
+  });
+}
+function setDateAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
+  Array.from(calendar.getElementsByClassName("flatpickr-days")).forEach((element) => element.setAttribute("tabindex", "-1"));
+  Array.from(calendar.getElementsByClassName("flatpickr-day")).forEach((element) => element.setAttribute("role", "button"));
+  calendar.getElementsByClassName("flatpickr-monthDropdown-months")[0].setAttribute("aria-label", "Mese");
+  prevMonthArrow.setAttribute("aria-label", "Mese precedente");
+  nextMonthArrow.setAttribute("aria-label", "Mese successivo");
+}
+function setDateTimeAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
+  Array.from(calendar.getElementsByClassName("flatpickr-days")).forEach((element) => element.setAttribute("tabindex", "-1"));
+  Array.from(calendar.getElementsByClassName("flatpickr-day")).forEach((element) => element.setAttribute("role", "button"));
+  calendar.getElementsByClassName("flatpickr-monthDropdown-months")[0].setAttribute("aria-label", "Mese");
+  prevMonthArrow.setAttribute("aria-label", "Mese precedente");
+  nextMonthArrow.setAttribute("aria-label", "Mese successivo");
+  Array.from(calendar.getElementsByClassName("time24hr")).forEach((element) => element.setAttribute("tabindex", "-1"));
+  calendar.getElementsByClassName("flatpickr-hour")[0].setAttribute("aria-label", "Ora");
+  calendar.getElementsByClassName("flatpickr-minute")[0].setAttribute("aria-label", "Minuti");
+}
+function setMonthsAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
+  Array.from(calendar.getElementsByClassName("flatpickr-monthSelect-months")).forEach((element) => element.setAttribute("tabindex", "-1"));
+  Array.from(calendar.getElementsByClassName("flatpickr-monthSelect-month")).forEach((element) => element.setAttribute("role", "button"));
+  prevMonthArrow.setAttribute("aria-label", "Anno precedente");
+  nextMonthArrow.setAttribute("aria-label", "Anno successivo");
 }
 
 export { setFlatpickrPosition as a, flatpickr as f, it as i, setAriaOptions as s, validateDate as v };

package/dist/esm/{utils-f8eb3944.js → utils-a52a81ba.js}

@@ -1,98 +1,98 @@
-import { f as KeyboardCode, p as Device } from './index-03c01696.js';
-import { t as tabletBreakpoint, m as mobileBreakpoint } from './breakpoints-14432d05.js';
+import { f as KeyboardCode, p as Device } from './index-e36ec4a4.js';
+import { t as tabletBreakpoint, m as mobileBreakpoint } from './breakpoints-c386984e.js';
 
-/**
- * Return boolean value for passed value if a boolean corresponding value is found
- * Return passed value otherwise
- */
-function boolean(value) {
-  switch (value) {
-    case true:
-    case "true":
-    case 1:
-    case "1":
-    case "on":
-    case "yes":
-      return true;
-    case false:
-    case "false":
-    case 0:
-    case "0":
-    case "off":
-    case "no":
-      return false;
-    default:
-      return value;
-  }
-}
-function randomId() {
-  return Math.random().toString(36).replace("0.", "");
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function handleKeyboardSubmit(ev, callback, ...args) {
-  if (ev.code === KeyboardCode.ENTER || ev.code === KeyboardCode.SPACE) {
-    ev.preventDefault();
-    callback(...args);
-  }
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function handleEnterKeydSubmit(ev, callback, ...args) {
-  if (ev.code === KeyboardCode.ENTER) {
-    ev.preventDefault();
-    callback(...args);
-  }
-}
-function getClickedElement(elem = null) {
-  if (!elem) {
-    elem = document.activeElement;
-  }
-  if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {
-    elem = elem.shadowRoot.activeElement;
-    return getClickedElement(elem);
-  }
-  return elem;
-}
-function getElementTree(elem, tree = []) {
-  tree.push(elem);
-  if (elem.parentElement) {
-    elem = elem.parentElement;
-    return getElementTree(elem, tree);
-  }
-  else if (elem.parentNode && elem.parentNode.host) {
-    elem = elem.parentNode.host;
-    return getElementTree(elem, tree);
-  }
-  return tree;
-}
-function getDevice() {
-  switch (true) {
-    case window.innerWidth <= mobileBreakpoint:
-      return Device.MOBILE;
-    case window.innerWidth <= tabletBreakpoint:
-      return Device.TABLET;
-    default:
-      return Device.DESKTOP;
-  }
-}
-function convertJson(data) {
-  try {
-    return JSON.parse(data);
-  }
-  catch (_a) {
-    return false;
-  }
-}
-function colorFromId(id) {
-  const prefix = "avatar-C"; // prefix for color vars name
-  const colorsCount = 19; // available colors
-  const seed = Math.ceil(2 ** 31 - 1) * parseFloat(`0.${id}`);
-  let color = Math.ceil(colorsCount * (seed % 1));
-  // if result of mc is 0
-  // es.: 3895229
-  if (color === 0) {
-    color = 1;
-  }
-  return `${prefix}${color.toString().padStart(2, "0")}`;
+/**
+ * Return boolean value for passed value if a boolean corresponding value is found
+ * Return passed value otherwise
+ */
+function boolean(value) {
+  switch (value) {
+    case true:
+    case "true":
+    case 1:
+    case "1":
+    case "on":
+    case "yes":
+      return true;
+    case false:
+    case "false":
+    case 0:
+    case "0":
+    case "off":
+    case "no":
+      return false;
+    default:
+      return value;
+  }
+}
+function randomId() {
+  return Math.random().toString(36).replace("0.", "");
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function handleKeyboardSubmit(ev, callback, ...args) {
+  if (ev.code === KeyboardCode.ENTER || ev.code === KeyboardCode.SPACE) {
+    ev.preventDefault();
+    callback(...args);
+  }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function handleEnterKeydSubmit(ev, callback, ...args) {
+  if (ev.code === KeyboardCode.ENTER) {
+    ev.preventDefault();
+    callback(...args);
+  }
+}
+function getClickedElement(elem = null) {
+  if (!elem) {
+    elem = document.activeElement;
+  }
+  if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {
+    elem = elem.shadowRoot.activeElement;
+    return getClickedElement(elem);
+  }
+  return elem;
+}
+function getElementTree(elem, tree = []) {
+  tree.push(elem);
+  if (elem.parentElement) {
+    elem = elem.parentElement;
+    return getElementTree(elem, tree);
+  }
+  else if (elem.parentNode && elem.parentNode.host) {
+    elem = elem.parentNode.host;
+    return getElementTree(elem, tree);
+  }
+  return tree;
+}
+function getDevice() {
+  switch (true) {
+    case window.innerWidth <= mobileBreakpoint:
+      return Device.MOBILE;
+    case window.innerWidth <= tabletBreakpoint:
+      return Device.TABLET;
+    default:
+      return Device.DESKTOP;
+  }
+}
+function convertJson(data) {
+  try {
+    return JSON.parse(data);
+  }
+  catch (_a) {
+    return false;
+  }
+}
+function colorFromId(id) {
+  const prefix = "avatar-C"; // prefix for color vars name
+  const colorsCount = 19; // available colors
+  const seed = Math.ceil(2 ** 31 - 1) * parseFloat(`0.${id}`);
+  let color = Math.ceil(colorsCount * (seed % 1));
+  // if result of mc is 0
+  // es.: 3895229
+  if (color === 0) {
+    color = 1;
+  }
+  return `${prefix}${color.toString().padStart(2, "0")}`;
 }
 
 export { handleKeyboardSubmit as a, boolean as b, colorFromId as c, getElementTree as d, getClickedElement as e, convertJson as f, getDevice as g, handleEnterKeydSubmit as h, randomId as r };

package/dist/esm/z-alert.entry.js

@@ -2,14 +2,14 @@ import { r as registerInstance, h } from './index-a2ca4b97.js';
 
 const stylesCss = ":host{display:block;box-sizing:border-box;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);line-height:calc(var(--space-unit) * 2)}:host>div{padding:calc(var(--space-unit) * 2)}:host>.success{background:var(--color-success-inverse);fill:var(--color-success01)}:host>.warning{background:var(--color-warning-inverse);fill:var(--color-warning01)}:host>.error{background:var(--color-error-inverse);fill:var(--color-error01)}";
 
-const ZAlert = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h("div", { class: this.type }, h("slot", null)));
-  }
-};
+const ZAlert = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", { class: this.type }, h("slot", null)));
+  }
+};
 ZAlert.style = stylesCss;
 
 export { ZAlert as z_alert };

package/dist/esm/z-anchor-navigation.entry.js

@@ -1,49 +1,49 @@
 import { r as registerInstance, h, H as Host } from './index-a2ca4b97.js';
-import { B as ButtonVariant } from './index-03c01696.js';
+import { B as ButtonVariant } from './index-e36ec4a4.js';
 
 const stylesCss = "html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;color:inherit;font-weight:inherit;-webkit-line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-surface04);color:var(--color-text01);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out}z-anchor-navigation nav>[current]{border-left-color:var(--color-primary01);color:var(--color-link-primary);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button,z-icon){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}z-anchor-navigation nav z-icon{--z-icon-width:16px;--z-icon-height:16px;display:flex;padding:calc(var(--space-unit) * 1.5);fill:var(--color-icon02)}@media (min-width: 768px){z-anchor-navigation z-button.toggle{display:none !important}z-anchor-navigation nav{display:flex}z-anchor-navigation nav a{outline:none}@media (hover: hover){z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-secondary);background-color:var(--color-hover-surface);color:var(--color-hover-link)}}z-anchor-navigation nav>*:is(:focus,:focus-within),z-anchor-navigation nav :is(z-icon,button):focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation[hide-unselected] nav>*:not([current],:hover,:focus,:focus-within){color:transparent}z-anchor-navigation nav>*:not([current],:hover,:focus,:focus-within)>*:is(z-button,button,z-icon):not(:focus:focus-visible){opacity:0;pointer-events:none}@media (hover: none){z-anchor-navigation:not([hide-unselected]) nav>*>*:is(z-button,button,z-icon){opacity:1;pointer-events:all}}}";
 
-const ZAnchorNavigation = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * If enabled, the text of each anchor will be hidden unless
-     * for the current one or the one the user is hovering.
-     */
-    this.hideUnselected = false;
-    /**
-     * Whether the mobile list is collapsed.
-     */
-    this.collapsed = false;
-  }
-  /**
-   * Set aria-current attribute to the anchors and `current` to nav children.
-   */
-  setAriaCurrent() {
-    Array.from(this.nav.children).forEach((item) => {
-      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector("a");
-      const isCurrent = window.location.href === anchor.href;
-      anchor.setAttribute("aria-current", isCurrent.toString());
-      item.toggleAttribute("current", isCurrent);
-    });
-  }
-  /**
-   * Toggle collapsed state.
-   */
-  toggleCollapsed() {
-    this.collapsed = !this.collapsed;
-  }
-  componentDidLoad() {
-    window.addEventListener("hashchange", this.setAriaCurrent.bind(this));
-    this.setAriaCurrent();
-  }
-  disconnectedCallback() {
-    window.removeEventListener("hashchange", this.setAriaCurrent);
-  }
-  render() {
-    return (h(Host, { collapsed: this.collapsed }, h("z-button", { class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { ref: (el) => (this.nav = el) }, h("slot", null))));
-  }
-};
+const ZAnchorNavigation = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * If enabled, the text of each anchor will be hidden unless
+     * for the current one or the one the user is hovering.
+     */
+    this.hideUnselected = false;
+    /**
+     * Whether the mobile list is collapsed.
+     */
+    this.collapsed = false;
+  }
+  /**
+   * Set aria-current attribute to the anchors and `current` to nav children.
+   */
+  setAriaCurrent() {
+    Array.from(this.nav.children).forEach((item) => {
+      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector("a");
+      const isCurrent = window.location.href === anchor.href;
+      anchor.setAttribute("aria-current", isCurrent.toString());
+      item.toggleAttribute("current", isCurrent);
+    });
+  }
+  /**
+   * Toggle collapsed state.
+   */
+  toggleCollapsed() {
+    this.collapsed = !this.collapsed;
+  }
+  componentDidLoad() {
+    window.addEventListener("hashchange", this.setAriaCurrent.bind(this));
+    this.setAriaCurrent();
+  }
+  disconnectedCallback() {
+    window.removeEventListener("hashchange", this.setAriaCurrent);
+  }
+  render() {
+    return (h(Host, { collapsed: this.collapsed }, h("z-button", { class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { ref: (el) => (this.nav = el) }, h("slot", null))));
+  }
+};
 ZAnchorNavigation.style = stylesCss;
 
 export { ZAnchorNavigation as z_anchor_navigation };