@zanichelli/albe-web-components 9.3.0-rc1 → 10.0.1

package/dist/cjs/z-skip-to-content.cjs.entry.js

@@ -7,7 +7,7 @@ const utils = require('./utils-4ac02425.js');
 const index$1 = require('./index-e8ce94a1.js');
 require('./breakpoints-ebe1a437.js');
 
-const stylesCss = ".sc-z-skip-to-content-h{position:absolute;left:-100%;height:60px;box-sizing:border-box;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);background-color:#24f4ff;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.skip-to-content-visible.sc-z-skip-to-content-h,.sc-z-skip-to-content-h:focus{position:static;display:block}.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{display:block;text-align:center}.sc-z-skip-to-content-h>z-link.link-invisible.sc-z-skip-to-content{overflow:hidden;width:0;height:0}.sc-z-skip-to-content-h>z-link.link-visible.sc-z-skip-to-content{width:initial;height:initial}.dark.sc-z-skip-to-content-h{background-color:var(--bg-grey-800);color:var(--color-white)}.light.sc-z-skip-to-content-h{border:2px solid var(--text-grey-800);background-color:var(--bg-white);color:var(--text-grey-800)}@media (min-width: 768px){.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{text-align:left}}@media (min-width: 1152px){.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{display:inline-block;padding:0 calc(var(--space-unit) * 3);border-right:1px solid var(--bg-grey-800)}.sc-z-skip-to-content-h>z-link.link-invisible.sc-z-skip-to-content{overflow:initial;width:initial;height:initial}.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:first-child{padding-left:0}.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:last-child,.dark.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:last-child,.light.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:last-child{padding-right:0;border-right:none}.dark.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{border-right:1px solid var(--bg-white)}}";
+const stylesCss = ".sc-z-skip-to-content-h{position:absolute;left:-100%;height:60px;box-sizing:border-box;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);background-color:#24f4ff;font-family:var(--font-family-sans);font-weight:var(--font-rg);text-align:center}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{display:inline-flex;height:100%;align-items:center}.skip-to-content-visible.sc-z-skip-to-content-h,.sc-z-skip-to-content-h:focus{position:static;display:block}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:hidden;width:0;height:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-visible.sc-z-skip-to-content{width:initial;height:initial}.dark.sc-z-skip-to-content-h{background-color:var(--bg-grey-800);color:var(--color-white)}.light.sc-z-skip-to-content-h{border:2px solid var(--text-grey-800);background-color:var(--bg-white);color:var(--text-grey-800)}@media (min-width: 768px){.sc-z-skip-to-content-h{text-align:start}}@media (min-width: 1152px){.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{padding:0 calc(var(--space-unit) * 3);border-right:1px solid var(--bg-grey-800)}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:initial;width:initial;height:initial}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:first-child{padding-left:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.light.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child{padding-right:0;border-right:none}.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{border-right:1px solid var(--bg-white)}}";
 
 const ZSkipToContent = class {
   constructor(hostRef) {
@@ -56,7 +56,15 @@ const ZSkipToContent = class {
         "skip-to-content-visible": this.visible,
       } }, this.links.map((link, i) => {
       const id = `skip-to-content-${i}`;
-      return (index.h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `body-1-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === index$1.ThemeVariant.DARK ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
+      return (index.h("div", { class: "link-container" }, index.h("a", { id: id, class: {
+          "body-1-sb": true,
+          "z-link": true,
+          "z-link-underline": true,
+          "z-link-white": this.variant === index$1.ThemeVariant.DARK,
+          "z-link-black": this.variant !== index$1.ThemeVariant.DARK,
+          "link-visible": id == this.visibleLink,
+          "link-invisible": id != this.visibleLink,
+        }, "aria-label": link.ariaLabel || link.label, href: link.href, onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label)));
     })));
   }
   get hostElement() { return index.getElement(this); }

package/dist/collection/collection-manifest.json

@@ -1,6 +1,5 @@
 {
   "entries": [
-    "./deprecated/typography/z-typography/index.js",
     "./components/buttons/z-button/index.js",
     "./components/buttons/z-button-sort/index.js",
     "./components/buttons/z-chip/index.js",
@@ -30,7 +29,6 @@
     "./components/navigation/tabs/z-navigation-tab-link/index.js",
     "./components/navigation/tabs/z-navigation-tabs/index.js",
     "./components/navigation/z-app-header/index.js",
-    "./components/navigation/z-link/index.js",
     "./components/navigation/z-menu/index.js",
     "./components/navigation/z-menu-section/index.js",
     "./components/notification/z-info-box/index.js",
@@ -65,8 +63,7 @@
     "./components/z-skip-to-content/index.js",
     "./components/z-tag/index.js",
     "./components/z-visually-hidden/index.js",
-    "./deprecated/typography/z-body/index.js",
-    "./deprecated/typography/z-heading/index.js",
+    "./deprecated/z-link/index.js",
     "./deprecated/z-table-deprecated/z-table-body/index.js",
     "./deprecated/z-table-deprecated/z-table-cell/index.js",
     "./deprecated/z-table-deprecated/z-table-empty-box/index.js",

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

@@ -184,7 +184,8 @@
     overflow: initial;
   }
 
-  .modal-container-scroll-outside > header {
+  .modal-container-scroll-outside > header,
+  .modal-container-scroll-inside > header {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
   }
@@ -209,11 +210,6 @@
     border-bottom-right-radius: var(--border-radius);
   }
 
-  .modal-container-scroll-inside > header {
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
-  }
-
   .modal-dialog::-webkit-scrollbar {
     display: none;
   }

package/dist/collection/components/navigation/tabs/navigation-tab.css

@@ -38,7 +38,8 @@ z-navigation-tab-link *::after {
 
 z-navigation-tab > *:focus:focus-visible,
 z-navigation-tab-link > *:focus:focus-visible {
-  box-shadow: inset var(--shadow-focus-primary);
+  z-index: 1;
+  box-shadow: inset 0 0 4px 3px var(--color-highlight);
 }
 
 z-navigation-tab:not([disabled]):hover > *,

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

@@ -1,8 +1,10 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { NavigationTabsOrientation, NavigationTabsSize } from "../../../../beans";
 import { ICONS } from "../../../icons/icons";
 /**
  * Single tab component to use inside `z-navigation-tabs`. It renders a button.
+ * This component uses the `tab` role:
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role
  */
 export class ZNavigationTab {
   constructor() {
@@ -27,9 +29,9 @@ export class ZNavigationTab {
    * Scroll into view to center the tab.
    */
   scrollToTab({ target: button }) {
-    const scrollOptions = this.orientation === NavigationTabsOrientation.HORIZONTAL
+    const scrollOptions = (this.orientation === NavigationTabsOrientation.HORIZONTAL
       ? { block: "nearest", inline: "center" }
-      : { block: "center", inline: "nearest" };
+      : { block: "center", inline: "nearest" });
     button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
   }
   onClick() {
@@ -56,7 +58,7 @@ export class ZNavigationTab {
     return h("z-icon", { name: icon });
   }
   render() {
-    return (h("button", { role: "tab", id: this.tabId, disabled: this.disabled, title: this.htmlTitle, onFocus: this.scrollToTab.bind(this), "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls, tabindex: this.selected ? "0" : "-1" }, this.icon && this.renderIcon(), this.orientation === NavigationTabsOrientation.HORIZONTAL && this.label));
+    return (h(Host, { role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, h("button", { tabIndex: this.selected ? 0 : -1, onFocus: this.scrollToTab.bind(this), disabled: this.disabled, title: this.htmlTitle }, this.icon && this.renderIcon(), this.orientation === NavigationTabsOrientation.HORIZONTAL && this.label)));
   }
   static get is() { return "z-navigation-tab"; }
   static get originalStyleUrls() {
@@ -82,8 +84,11 @@ export class ZNavigationTab {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "The aria-controls attribute refers to the id of the HTML element that has role=\"tabpanel\" and that contains the actual content of this tab.\nref: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls"
+          "tags": [{
+              "name": "link",
+              "text": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls"
+            }],
+          "text": "`aria-controls` attribute of the tab.\nIdentifies the element (with `role=tabpanel`) whose contents or presence are controlled by this tab.\nThe value must be the `id` of the element it controls."
         },
         "attribute": "aria-controls",
         "reflect": false
@@ -99,8 +104,14 @@ export class ZNavigationTab {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "set id attribute to tab property identifying a corresponding tabpanel attribute aria-labelledby.\nref: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role"
+          "tags": [{
+              "name": "link",
+              "text": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"
+            }, {
+              "name": "deprecated",
+              "text": "Use native `id` attribute instead"
+            }],
+          "text": "`id` attribute of the tab.\nSet this id to the `aria-labelledby` attribute of the controlled `tabpanel` element."
         },
         "attribute": "tab-id",
         "reflect": false

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

@@ -1,8 +1,10 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { NavigationTabsOrientation, NavigationTabsSize } from "../../../../beans";
 import { ICONS } from "../../../icons/icons";
 /**
  * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.
+ * This component uses the `tab` role:
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role
  */
 export class ZNavigationTabLink {
   constructor() {
@@ -27,9 +29,9 @@ export class ZNavigationTabLink {
    * Scroll into view to center the tab.
    */
   scrollToTab({ target: button }) {
-    const scrollOptions = this.orientation === NavigationTabsOrientation.HORIZONTAL
+    const scrollOptions = (this.orientation === NavigationTabsOrientation.HORIZONTAL
       ? { block: "nearest", inline: "center" }
-      : { block: "center", inline: "nearest" };
+      : { block: "center", inline: "nearest" });
     button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
   }
   onClick() {
@@ -54,7 +56,7 @@ export class ZNavigationTabLink {
     return h("z-icon", { name: icon });
   }
   render() {
-    return (h("a", { role: "tab", id: this.tabId, href: !this.disabled && this.href, title: this.htmlTitle, target: this.target, onFocus: this.scrollToTab.bind(this), "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls, tabindex: this.selected ? "0" : "-1" }, this.icon && this.renderIcon(), this.orientation === "horizontal" && this.label));
+    return (h(Host, { role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, h("a", { tabIndex: this.selected ? 0 : -1, onFocus: this.scrollToTab.bind(this), href: !this.disabled && this.href, title: this.htmlTitle, target: this.target }, this.icon && this.renderIcon(), this.orientation === "horizontal" && this.label)));
   }
   static get is() { return "z-navigation-tab-link"; }
   static get originalStyleUrls() {
@@ -80,8 +82,11 @@ export class ZNavigationTabLink {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "set aria-controls attribute to tab property identifying a corresponding tabpanel\n(that has a tabpanel role) by that element's id.\nWhen an element with the tabpanel role has focus, or a child of it has focus,\nthat indicates that the connected element with the tab role is the active tab in a tablist."
+          "tags": [{
+              "name": "link",
+              "text": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls"
+            }],
+          "text": "`aria-controls` attribute of the tab.\nIdentifies the element (with `role=tabpanel`) whose contents or presence are controlled by this tab.\nThe value must be the `id` of the element it controls."
         },
         "attribute": "aria-controls",
         "reflect": false
@@ -97,8 +102,14 @@ export class ZNavigationTabLink {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "set id attribute to tab property identifying a corresponding tabpanel\n(that has a tabpanel role) by that element's attribute  aria-labelledby."
+          "tags": [{
+              "name": "link",
+              "text": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"
+            }, {
+              "name": "deprecated",
+              "text": "Use native `id` attribute instead"
+            }],
+          "text": "`id` attribute of the tab.\nSet this id to the `aria-labelledby` attribute of the controlled `tabpanel` element."
         },
         "attribute": "tab-id",
         "reflect": false

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

@@ -27,22 +27,23 @@ export class ZNavigationTabs {
   get dimension() {
     return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Width" : "Height";
   }
+  get tabs() {
+    return Array.from(this.host.children);
+  }
   /**
    * Set the `size` prop to all `z-navigation-tab` children.
    */
   setChildrenSize() {
-    const children = Array.from(this.host.children);
-    children.forEach((child) => {
-      child.setAttribute("size", this.size);
+    this.tabs.forEach((tab) => {
+      tab.size = this.size;
     });
   }
   /**
    * Set the `orientation` prop to all `z-navigation-tab` children.
    */
   setChildrenOrientation() {
-    const children = Array.from(this.host.children);
-    children.forEach((child) => {
-      child.setAttribute("orientation", this.orientation);
+    this.tabs.forEach((tab) => {
+      tab.orientation = this.orientation;
     });
   }
   /**
@@ -73,11 +74,10 @@ export class ZNavigationTabs {
    * @param {CustomEvent} event `selected` event triggered by a child tab
    */
   onTabSelected(event) {
-    const tab = event.target;
-    const children = Array.from(this.host.children);
-    children.forEach((child, i) => {
-      if (child !== tab) {
-        child.removeAttribute("selected");
+    const selectedTab = event.target;
+    this.tabs.forEach((tab, i) => {
+      if (tab !== selectedTab) {
+        tab.selected = undefined;
       }
       else {
         this.tabFocus = i;
@@ -103,30 +103,31 @@ export class ZNavigationTabs {
     });
   }
   /**
-   * move focus though tabs using keyboad arrows.
+   * Move focus through tabs using keyboard arrows.
+   * When `TAB` is pressed, focus the currently selected tab, if any.
    */
   navigateThroughTabs(e) {
-    const children = Array.from(this.host.children);
+    const tabs = this.tabs;
     if (e.key === KeyboardCode.TAB) {
-      children.forEach((child, i) => {
-        var _a, _b;
-        if (child.hasAttribute("selected") &&
-          ((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.offsetParent) === null || _b === void 0 ? void 0 : _b.nodeName) === "Z-NAVIGATION-TABS") {
+      tabs.forEach((tab, i) => {
+        if (tab.selected && tabs.some((tab) => tab === e.target)) {
           this.tabFocus = i;
         }
       });
+      tabs[this.tabFocus].children[0].tabIndex = 0;
+      tabs[this.tabFocus].children[0].focus();
       return;
     }
     if (!this.isArrowNavigation(e)) {
       return true;
     }
     e.preventDefault();
-    children[this.tabFocus].querySelector('[role="tab"]').setAttribute("tabindex", "-1");
+    tabs[this.tabFocus].children[0].tabIndex = -1;
     // Move forward
     if ((e.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
       (e.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)) {
       this.tabFocus++;
-      if (this.tabFocus >= children.length) {
+      if (this.tabFocus >= tabs.length) {
         this.tabFocus = 0;
       }
       // Move backward
@@ -135,50 +136,41 @@ export class ZNavigationTabs {
       (e.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)) {
       this.tabFocus--;
       if (this.tabFocus < 0) {
-        this.tabFocus = children.length - 1;
+        this.tabFocus = tabs.length - 1;
       }
     }
-    //ignore disabled tabs
-    if (children[this.tabFocus].querySelector('[role="tab"]').hasAttribute("disabled")) {
+    // ignore disabled tabs
+    if (tabs[this.tabFocus].disabled) {
       this.navigateThroughTabs(e);
     }
     else {
-      children[this.tabFocus].querySelector('[role="tab"]').setAttribute("tabindex", "0");
-      children[this.tabFocus].querySelector('[role="tab"]').focus();
+      tabs[this.tabFocus].children[0].tabIndex = 0;
+      tabs[this.tabFocus].children[0].focus();
     }
   }
   /**
-   * move focus though tabs using keyboad arrows.
+   * Check if a keyboard event was triggered by an arrow key.
    */
   isArrowNavigation(e) {
-    return !!Object.keys(NavigationTabsKeyboardEvents).find((key) => NavigationTabsKeyboardEvents[key] === e.key);
-  }
-  setTabindex() {
-    var _a;
-    const children = Array.from(this.host.children);
-    if (children.length > 0) {
-      children.forEach((child, i) => {
-        var _a;
-        child.hasAttribute("aria-selected") && (this.tabFocus = i);
-        (_a = child.querySelector('[role="tab"]')) === null || _a === void 0 ? void 0 : _a.setAttribute("tabindex", "-1");
-      });
-      (_a = children[this.tabFocus].querySelector('[role="tab"]')) === null || _a === void 0 ? void 0 : _a.setAttribute("tabindex", "0");
-    }
-  }
-  componentWillLoad() {
-    this.tabFocus = 0;
+    return Object.values(NavigationTabsKeyboardEvents).includes(e.key);
   }
   componentDidRender() {
     this.setChildrenSize();
     this.setChildrenOrientation();
     this.checkScrollVisible();
-    this.setTabindex();
+    if (!this.tabFocus) {
+      this.tabFocus = 0;
+      const tabChild = this.tabs[this.tabFocus].children[0];
+      if (tabChild) {
+        tabChild.tabIndex = 0;
+      }
+    }
   }
   render() {
     return (h(Host, { class: {
         "interactive-2": this.size === NavigationTabsSize.SMALL,
         "interactive-1": this.size !== NavigationTabsSize.SMALL,
-      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), h("nav", { role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this) }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), onKeyDown: (e) => {
+      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), h("nav", { role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), onKeyDown: (e) => {
         this.navigateThroughTabs(e);
       }, tabindex: "-1", disabled: !this.canNavigateNext }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
   }

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

@@ -0,0 +1,11 @@
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelector("z-navigation-tabs")?.addEventListener("selected", (event) => {
+    const controlledPanel = event.target.closest("[aria-controls]")?.ariaControls;
+    const panels = Array.from(document.querySelectorAll("[role=tabpanel]"));
+    panels.forEach((panel) => (panel.hidden = true));
+    const panelToActivate = panels.find((panel) => panel.id === controlledPanel);
+    if (panelToActivate) {
+      panelToActivate.hidden = false;
+    }
+  });
+});

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

@@ -29,14 +29,14 @@
   margin: 0;
   background: var(--color-white);
   border-radius: var(--border-no-radius);
-  box-shadow: 0 0 4px 1px rgb(66 69 72 / 40%);
+  box-shadow: 0 0 4px 1px (--shadow-color-base);
   cursor: pointer;
   fill: var(--color-primary01);
   outline: none;
 }
 
 .navigation-button:focus:focus-visible {
-  box-shadow: inset var(--shadow-focus-primary);
+  box-shadow: inset 0 0 4px 3px var(--color-highlight);
   fill: var(--color-primary01);
 }
 

package/dist/collection/components/panel/z-panel-elem/index.js

@@ -17,10 +17,14 @@ export class ZPanelElem {
   }
   render() {
     const elemId = this.elemid ? this.elemid : "";
-    return (h("div", { class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { "aria-hidden": "true", class: "panel-elem-icon" }, this.renderIcon())), h("div", { class: "panel-elem-link" }, h("z-link", { href: this.url, icon: this.linkicon, isdisabled: this.isdisabled, target: this.target, htmlid: elemId + "link_id" }, this.linklabel)), this.descrSlotName && (h("div", { class: "panel-elem-desc body-long-01" }, h("slot", { name: this.descrSlotName })))));
+    return (h("div", { class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { "aria-hidden": "true", class: "panel-elem-icon" }, this.renderIcon())), h("div", { class: "panel-elem-link" }, h("a", { class: {
+        "z-link": true,
+        "z-link-disabled": this.isdisabled,
+        "z-link-icon": true,
+      }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { class: "z-link-icon-left", height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { class: "panel-elem-desc" }, h("slot", { name: this.descrSlotName })))));
   }
   static get is() { return "z-panel-elem"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["styles.css"]

package/dist/collection/components/panel/z-panel-elem/styles.css

@@ -21,13 +21,16 @@
 }
 
 .panel-elem-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin: var(--space-unit) auto 0;
   border-radius: var(--border-no-radius);
   font-size: 12px;
-  text-align: center;
 }
 
-.panel-elem-link > z-link {
+.panel-elem-link > a.z-link {
+  padding: calc(var(--space-unit) * 0.5) 0;
   font-weight: var(--font-sb);
 }
 
@@ -37,3 +40,7 @@
   letter-spacing: 0.16px;
   text-align: center;
 }
+
+a > z-icon {
+  margin-right: var(--space-unit);
+}

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

@@ -5,8 +5,16 @@ import { ControlSize, AccordionVariant } from "../../beans";
  *
  * @slot - Slot for the main content.
  * @slot tag - Slot for tags.
- * @cssprop --z-accordion-highlight-color - Color of the highlight band on the `summary`'s left edge. Only applies when `highlight` is true. Default: `transparent`.
- * @cssprop --z-accordion-bg - Background color of the accordion. Default: `var(--color-surface02)`.
+ * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
+ * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
+ * @cssprop --z-accordion-label-color - Label color. Default: `--color-text01`.
+ * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
+ * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
+ * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-text01`.
+ * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
+ * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
+ * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
+ * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.
  */
 export class ZAccordion {
   constructor() {

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

@@ -7,11 +7,18 @@
 :host {
   --z-accordion-highlight-color: transparent;
   --z-accordion-bg: var(--color-surface01);
+  --z-accordion-label-color: var(--color-text01);
+  --z-accordion-disabled-label-color: var(--color-text03);
+  --z-accordion-content-bg: var(--color-surface01);
+  --z-accordion-content-fg: var(--color-text01);
+  --z-accordion-hover-color: var(--color-surface03);
+  --z-accordion-left-padding: calc(var(--space-unit) * 2);
+  --z-accordion-right-padding: var(--space-unit);
+  --z-accordion-label-font-weight: var(--font-sb);
 
   display: block;
   border-top: var(--border-size-small) solid var(--color-surface03);
   border-bottom: var(--border-size-small) solid var(--color-surface03);
-  background-color: var(--z-accordion-bg);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
@@ -40,7 +47,9 @@ summary {
   display: flex;
   height: var(--summary-height);
   align-items: center;
-  padding: var(--summary-y-padding) var(--space-unit) var(--summary-y-padding) calc(var(--space-unit) * 2);
+  padding: var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)
+    var(--z-accordion-left-padding);
+  background-color: var(--z-accordion-bg);
   column-gap: var(--space-unit);
   cursor: pointer;
   list-style: none;
@@ -109,21 +118,21 @@ summary::before,
 
 :host([is-disabled][highlight]) summary::before,
 :host([is-disabled][highlight][variant="background"]) .z-accordion-content::before {
-  background-color: var(--color-text03);
+  background-color: var(--z-accordion-disabled-label-color);
 }
 
 summary > z-icon {
-  fill: var(--color-text01);
+  fill: var(--z-accordion-label-color);
 }
 
 :host([is-disabled]) summary > z-icon {
-  fill: var(--color-text03);
+  fill: var(--z-accordion-disabled-label-color);
 }
 
 .z-accordion-label {
-  color: var(--color-text01);
+  color: var(--z-accordion-label-color);
   font-size: var(--font-size-3); /* for "small" and "big" sizes */
-  font-weight: var(--font-sb);
+  font-weight: var(--z-accordion-label-font-weight);
 }
 
 :host([size="x-small"]) .z-accordion-label {
@@ -148,6 +157,8 @@ summary z-icon.z-accordion-chevron {
 .z-accordion-content {
   position: relative;
   padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
+  background-color: var(--z-accordion-content-bg);
+  color: var(--z-accordion-content-fg);
   font-size: var(--font-size-2); /* for "small" and "big" sizes */
 }
 
@@ -164,11 +175,11 @@ summary z-icon.z-accordion-chevron {
 }
 
 :host([is-disabled]) .z-accordion-label {
-  color: var(--color-text03);
+  color: var(--z-accordion-disabled-label-color);
 }
 
 :host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot="tag"]) {
-  --z-tag-bg: var(--color-text03) !important;
+  --z-tag-bg: var(--z-accordion-disabled-label-color) !important;
   --z-tag-text-color: var(--color-text-inverse) !important;
 }
 
@@ -180,7 +191,7 @@ summary z-icon.z-accordion-chevron {
   }
 
   :host(:not([is-disabled])) summary:hover {
-    background-color: var(--color-surface03);
+    background-color: var(--z-accordion-hover-color);
   }
 
   :host(:not([is-disabled])) summary:hover .z-accordion-label {

package/dist/collection/components/z-book-card/index.js

@@ -14,6 +14,10 @@ import { randomId } from "../../utils/utils";
  */
 export class ZBookCard {
   constructor() {
+    /**
+     * [optional] ISBN label
+     */
+    this.isbnLabel = "";
     this.isMobile = false;
     this.hasResources = false;
     this.showResources = false;
@@ -83,7 +87,7 @@ export class ZBookCard {
     return this.authors ? (h("div", { class: "authors", "aria-description": "Autori" }, this.authors)) : null;
   }
   renderIsbn() {
-    return this.isbn ? (h("div", { class: "isbn" }, h("span", { class: "code", "aria-description": "ISBN edizione cartacea" }, this.isbn), h("span", { class: "label" }, " (ed. cartacea)"))) : null;
+    return this.isbn ? (h("div", { class: "isbn" }, h("span", { class: "code", "aria-description": `ISBN ${this.isbnLabel}` }, this.isbn), this.isbnLabel ? h("span", { class: "label" }, " ", this.isbnLabel) : null)) : null;
   }
   renderShowResources() {
     return (h("button", { class: "show-resources", "aria-label": `Risorse del libro ${this.operaTitle}`, "aria-expanded": this.showResources.toString(), "aria-controls": `resources-${this.id}`, onClick: () => this.toggleResources() }, this.showResources ? "Chiudi" : "Vedi tutto", h("z-icon", { name: this.showResources ? "chevron-up" : "chevron-down" })));
@@ -227,6 +231,24 @@ export class ZBookCard {
         "attribute": "isbn",
         "reflect": false
       },
+      "isbnLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "[optional] ISBN label"
+        },
+        "attribute": "isbn-label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
       "ribbon": {
         "type": "string",
         "mutable": false,

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

@@ -153,7 +153,7 @@ export class ZBreadcrumb {
         if (item.hasTooltip) {
           this.popoverEllipsisOpen = false;
         }
-      }, innerHTML: mobile ? `<z-icon fill="color-link-primary" name="chevron-left"></z-icon> ${item.text}` : item.text })));
+      }, innerHTML: mobile ? `<z-icon fill="color-link-primary" name="chevron-left"></z-icon>${item.text}` : item.text })));
   }
   renderBreadcrumb() {
     return (h("nav", { ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {

package/dist/collection/components/z-skip-to-content/index.js

@@ -50,7 +50,15 @@ export class ZSkipToContent {
         "skip-to-content-visible": this.visible,
       } }, this.links.map((link, i) => {
       const id = `skip-to-content-${i}`;
-      return (h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `body-1-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === ThemeVariant.DARK ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
+      return (h("div", { class: "link-container" }, h("a", { id: id, class: {
+          "body-1-sb": true,
+          "z-link": true,
+          "z-link-underline": true,
+          "z-link-white": this.variant === ThemeVariant.DARK,
+          "z-link-black": this.variant !== ThemeVariant.DARK,
+          "link-visible": id == this.visibleLink,
+          "link-invisible": id != this.visibleLink,
+        }, "aria-label": link.ariaLabel || link.label, href: link.href, onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label)));
     })));
   }
   static get is() { return "z-skip-to-content"; }