@zanichelli/albe-web-components 16.3.0-rc1 → 16.3.1

package/dist/esm/z-toggle-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-a2130b6a.js';
+import { r as registerInstance, c as createEvent, h } from './index-c8ceadeb.js';
 
 const stylesCss = "button{display:flex;height:36px;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";
 const ZToggleButtonStyle0 = stylesCss;
@@ -21,10 +21,10 @@ const ZToggleButton = class {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: '66bb73dad322ae69c658327384573f81d3b98419', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: 'eef4aef08bdcf1537b12b43287cc58c05274bf37', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '8c0baf9fbfa1cdf7e67a95bde1cca92e52ec807a', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '93a555e6eec548e3932c28cb6574680d34ecdedf', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
 };
 ZToggleButton.style = ZToggleButtonStyle0;

package/dist/esm/z-toggle-switch.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as Host } from './index-a2130b6a.js';
+import { r as registerInstance, c as createEvent, h, a as Host } from './index-c8ceadeb.js';
 import { k as LabelPosition } from './index-b7dbacb4.js';
-import { r as randomId } from './utils-8ade9e2d.js';
-import './breakpoints-680e0e56.js';
+import { r as randomId } from './utils-acc8bdd0.js';
+import './breakpoints-d148bfde.js';
 
 const stylesCss = ".sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type=\"checkbox\"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}";
 const ZToggleSwitchStyle0 = stylesCss;
@@ -29,14 +29,14 @@ const ZToggleSwitch = class {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: '6389bb2d4bfdabffaa56a16db6dd8ecfa5131bbf' }, h("input", { key: 'cc387244dd0e06eba73c8fd297c404a93d5ca626', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '6d2fff265f1da504fa7f457522add6135d135e9f', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: '17bcfee6b1fcfcd715d5d2e8686d5227dc3b16cd' }, h("input", { key: '682e25a434a34c9e814103e30cc42cf769f74953', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'e0fb9679dded13e315aefaaf6c105e124a46c967', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: '45a9187dc9b39d507054dcdbfcc551339107912b' }, h("slot", { key: 'ea4ef56223b79672776ecf96dc3f6a72e5207c54' })), h("span", { key: 'daf05b63ff8f501ae578e065383e766b8cde9eb7', class: {
+            } }, h("span", { key: '9a5ff289a9e7faa3d1354ca8522833415fcdb517' }, h("slot", { key: 'cae4d0ba661998799cc549ef5c21398175aa8d0f' })), h("span", { key: '8f27fe985dec52b128c6635a0502fd76417f202d', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: '628c38acdfa68d2d0018da18b1696ab16a749f48', class: "circle" }, this.checked && (h("z-icon", { key: '1d1e368a76fb0e914d3d3f30bd2e776d724ecba6', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: 'a68c0fe55df17f133325eb51a2efbd757842eb97', class: "circle" }, this.checked && (h("z-icon", { key: '6e7168d8c6c88771a20381e31b995bc2ebcd89cd', width: 12, height: 12, name: "checkmark" })))))));
     }
 };
 ZToggleSwitch.style = ZToggleSwitchStyle0;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-a2130b6a.js';
+import { r as registerInstance, h } from './index-c8ceadeb.js';
 import { P as PopoverPosition } from './index-b7dbacb4.js';
 
 const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-default-text);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base))}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}z-popover{--z-popover-padding:var(--space-unit);--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}";
@@ -17,7 +17,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: '8d7f6392c1f63c4acbe31200d9df9cac9d3a0bf0', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: '00216297d52c182feaf93e6e7959c47986f8d581' })));
+        return (h("z-popover", { key: '6ddb780209f561f072220e597e9c03413cb58f79', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: '3891ffd31f733de168896c550304244f0b2a8131' })));
     }
 };
 ZTooltip.style = ZTooltipStyle0;

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

@@ -1,9 +1,9 @@
-export { Z as z_tr } from './index-34477eb0.js';
-import './index-a2130b6a.js';
-import './utils-8ade9e2d.js';
+export { Z as z_tr } from './index-66bd56db.js';
+import './index-c8ceadeb.js';
+import './utils-acc8bdd0.js';
 import './index-b7dbacb4.js';
-import './breakpoints-680e0e56.js';
-import './index-b8299b2f.js';
-import './index-6a12f127.js';
+import './breakpoints-d148bfde.js';
+import './index-cddfba10.js';
+import './index-89520805.js';
 
 //# sourceMappingURL=z-tr.entry.js.map

package/dist/esm/z-visually-hidden.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-a2130b6a.js';
+import { r as registerInstance, h } from './index-c8ceadeb.js';
 
 const stylesCss = ":host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
 const ZVisuallyHiddenStyle0 = stylesCss;
@@ -8,7 +8,7 @@ const ZVisuallyHidden = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("slot", { key: 'b6d8482116e31fafc2c3674ebf2c3f8b235f2f31' });
+        return h("slot", { key: 'cab952b13471ad0b374bdc45ca65bac7dcc75659' });
     }
 };
 ZVisuallyHidden.style = ZVisuallyHiddenStyle0;

package/dist/types/components/deprecated/z-app-header-deprecated/index.stories.d.ts

@@ -70,7 +70,7 @@ export declare const OffcanvasMenu: {
     render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
 };
 export declare const Stuck: {
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderDeprecatedStoriesArgs>) => TemplateResult<1>)[];
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderDeprecatedStoriesArgs>) => TemplateResult<1>)[];
     parameters: {
         docs: {
             inlineStories: boolean;
@@ -83,7 +83,7 @@ export declare const MaxWidth: {
     args: {
         "--app-header-content-max-width": string;
     };
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderDeprecatedStoriesArgs>) => TemplateResult<1>)[];
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderDeprecatedStoriesArgs>) => TemplateResult<1>)[];
     parameters: {
         docs: {
             inlineStories: boolean;
@@ -113,6 +113,6 @@ export declare const SearchPageButton: {
             exclude: string[];
         };
     };
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderDeprecatedStoriesArgs>) => TemplateResult<1>)[];
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderDeprecatedStoriesArgs>) => TemplateResult<1>)[];
     render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
 };

package/dist/types/components/list/z-list-group/index.stories.d.ts

@@ -24,7 +24,7 @@ declare const StoryMeta: {
             };
             options: DividerSize[];
         };
-        dividerColor: import("@storybook/types").Args;
+        dividerColor: import("@storybook/csf").Args;
         listType: {
             control: {
                 type: "inline-radio";

package/dist/types/components/table/cells/z-th/index.d.ts

@@ -16,12 +16,6 @@ export declare class ZTh {
      * Set a nullish value to hide the menu button.
      */
     showMenu: VisibilityCondition;
-    /**
-     * Enables the sorting button.
-     * Can be set to "hover" or "always" to show the button only on cell hover or always.
-     * Set a nullish value to hide the sort button.
-     */
-    showSorting: VisibilityCondition;
     /**
      * Whether the cell should stick.
      */
@@ -53,7 +47,6 @@ export declare class ZTh {
     private get ariaSortDirection();
     /**
      * Handle the click on the sort button.
-     * This method will also handle the z-index logic.
      * @fires sort
      */
     private handleSort;

package/dist/types/components/z-app-header/index.d.ts

@@ -6,8 +6,8 @@ import { EventEmitter } from "../../stencil-public-runtime";
  * @slot product-logo - To insert the product logo, it should be used with an img tag.
  * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
  * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
- * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
  * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
+ * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.
  * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
  * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
  */
@@ -19,7 +19,7 @@ export declare class ZAppHeader {
      */
     stuck: boolean;
     /**
-     * the menu bar is not displayed and a burger icon appears to open the offcanvas menu
+     * When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.
      */
     enableOffcanvas: boolean;
     /**
@@ -45,60 +45,53 @@ export declare class ZAppHeader {
      */
     enableZLogo: boolean;
     /**
-     * The stuck state of the bar.
+     * Emitted when the `stuck` state of the header changes
      */
-    private _stuck;
+    sticking: EventEmitter;
     /**
-     * Current viewport.
-     * Used to change the aspect of the search button (icon only) on mobile and tablet.
+     * The stuck state of the bar.
      */
-    private currentViewport;
+    private _stuck;
     /**
      * Current count of menu items.
      */
-    menuLength: number;
-    /**
-     * Emitted when the `stuck` state of the header changes
-     */
-    sticking: EventEmitter;
+    private menuLength;
     /**
      * The opening state of the drawer.
      */
     private drawerOpen;
+    private isMobile;
+    private isTablet;
     private container?;
-    private menuElements?;
+    private menuElements;
+    private menuWidth;
     private closeMenuButton;
     private burgerButton;
-    private searchbar;
-    /** Observer when the size of the element container changes */
-    private resizeObserver;
-    private currentIndex;
-    private observer?;
-    constructor();
-    evaluateViewport(): void;
-    handleKeyDown(e: KeyboardEvent): void;
-    private handleArrowsNav;
-    private getNextItem;
+    private menuResizeObserver;
+    private stuckIntersecObserver?;
     onStuck(): void;
     setMenuFloatingMode(): void;
-    onStuckMode(): void;
-    private enableStuckObserver;
-    private disableStuckMode;
+    onStuckChange(): void;
     private get title();
     private get scrollParent();
     private get canShowMenu();
+    private get focusableMenu();
     private openDrawer;
     private closeDrawer;
     private collectMenuElements;
-    private isSlotPresent;
+    /** Automatically use offcanvas mode when the menubar doesn't fit in the header. */
+    private setupMenuResizeObserver;
+    private hasSlot;
+    private moveFocus;
+    /** Close each menu except the one receiving focus/click */
+    manageMenus(ev: FocusEvent | PointerEvent): void;
+    handleMenubarKeydown(ev: KeyboardEvent): void;
     private renderSeachbar;
     private renderProductLogos;
     private renderMenuButton;
     private renderOffcanvas;
     private renderStuck;
-    private getWidthMenu;
-    private focusToFirstItemMenu;
-    private handleFocusItem;
+    constructor();
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;

package/dist/types/components/z-app-header/index.stories.d.ts

@@ -55,9 +55,6 @@ export declare const MenuWithTopTitle: {
             exclude: string[];
         };
     };
-    args: {
-        enableOffcanvas: true;
-    };
     render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
 };
 export declare const LongTitle: {
@@ -75,7 +72,7 @@ export declare const OffcanvasMenu: {
     render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
 };
 export declare const Stuck: {
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderStoriesArgs>) => TemplateResult<1>)[];
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderStoriesArgs>) => TemplateResult<1>)[];
     parameters: {
         docs: {
             inlineStories: boolean;
@@ -93,6 +90,6 @@ export declare const SearchPageButton: {
             exclude: string[];
         };
     };
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderStoriesArgs>) => TemplateResult<1>)[];
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderStoriesArgs>) => TemplateResult<1>)[];
     render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
 };

package/dist/types/components/z-book-card/index.stories.d.ts

@@ -24,8 +24,8 @@ declare const StoryMeta: {
             };
             options: string[];
         };
-        "--z-book-card-ribbon-background-color": import("@storybook/types").Args;
-        "--z-book-card-ribbon-shadow-color": import("@storybook/types").Args;
+        "--z-book-card-ribbon-background-color": import("@storybook/csf").Args;
+        "--z-book-card-ribbon-shadow-color": import("@storybook/csf").Args;
     };
     args: {
         variant: BookCardVariant.EXPANDED;

package/dist/types/components/z-carousel/index.stories.d.ts

@@ -27,7 +27,7 @@ type ZCarouselStoriesArgs = ZCarousel & {
 declare const StoryMeta: {
     title: string;
     component: string;
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZCarouselStoriesArgs>) => import("lit-html").TemplateResult<1>)[];
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZCarouselStoriesArgs>) => import("lit-html").TemplateResult<1>)[];
 };
 export default StoryMeta;
 export declare const SlideshowWithArrowsOver: {

package/dist/types/components/z-cover-hero/index.stories.d.ts

@@ -26,7 +26,7 @@ declare const StoryMeta: {
             };
             options: CoverHeroContentPosition[];
         };
-        "--cover-hero-text-color": import("@storybook/types").Args;
+        "--cover-hero-text-color": import("@storybook/csf").Args;
         "--cover-hero-overlay": {
             if: {
                 arg: string;

package/dist/types/components/z-menu/index.d.ts

@@ -2,11 +2,11 @@ import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * @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. Use `z-menu-section` for submenus.
+ * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `active` HTML attribute on the element to highlight it. Use `z-menu-section` for submenus.
  * @cssprop --z-menu-label-color - Color of the label's text.
  */
 export declare class ZMenu {
-    hostElement: HTMLZMenuElement;
+    host: HTMLZMenuElement;
     /** Flag to set the active status of the menu. */
     active?: boolean;
     /**
@@ -18,35 +18,28 @@ export declare class ZMenu {
     /** The opening state of the menu. */
     open: boolean;
     /**
-     * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).
+     * Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).
      * A small border is placed under it as a separator from other elements.
      */
     verticalContext: boolean;
+    /**
+     * Tabindex value to set on the menu label.
+     * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).
+     */
+    htmlTabindex: number;
     hasHeader: boolean;
     hasContent: boolean;
-    private content;
-    /** Animation frame request id. */
-    private raf;
     /** The menu has been opened. */
     opened: EventEmitter;
     /** The menu has been closed. */
     closed: EventEmitter;
-    private currentIndex;
-    private currentCanvasOpenStatus;
-    private firstElMenu;
-    private lastElMenu;
+    private labelButton;
+    private content;
+    private items;
+    /** Animation frame request id. */
+    private raf;
+    private get focusableItem();
     private toggle;
-    /** Close the floating list when a click is performed outside of this Element. */
-    handleClick(ev: MouseEvent): void;
-    canvasOpenStatusChanged(e: CustomEvent): void;
-    handleKeyDown(e: KeyboardEvent): void;
-    private handleNavigationSideArrow;
-    private handleArrowsNav;
-    private getNextItem;
-    private focusToParentAndCloseMenu;
-    onOpenChanged(): void;
-    constructor();
-    componentWillLoad(): void;
     /**
      * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
      * @param ev Slotchange event
@@ -62,11 +55,26 @@ export declare class ZMenu {
      */
     private checkContent;
     /**
-     * Set `menuitem` role to all menu items.
-     * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
+     * Set `menuitem` role to all menu items (ZMenuSection items already have it).
+     * Set -1 to the tabindex of the items and 0 to the first one.
      */
+    private setItemsA11yAttrs;
     private onItemsChange;
-    private focusFirstItemOnKeyUp;
-    private renderMenuLabel;
-    render(): HTMLZMenuElement;
+    /**
+     * Move focus and adjust the tabindex value of `receiver` and `current` elements,
+     * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.
+     * If the receiver is a ZMenuSection and it's open, focus its first focusable item.
+     */
+    private moveFocus;
+    private onLabelKeydown;
+    /** Set tabindex of the label to 0, then focus it. */
+    setFocus(): Promise<void>;
+    /** Focus the last item. */
+    focusLastItem(): Promise<void>;
+    onOpenChanged(): void;
+    setLabelA11yAttrs(): void;
+    onKeyDown(ev: KeyboardEvent): void;
+    constructor();
+    connectedCallback(): void;
+    render(): HTMLDivElement | HTMLZMenuElement;
 }

package/dist/types/components/z-menu/index.stories.d.ts

@@ -7,7 +7,6 @@ declare const StoryMeta: {
     args: {
         active: false;
         floating: true;
-        verticalContext: false;
     };
 };
 export default StoryMeta;
@@ -23,5 +22,5 @@ export declare const ActiveWithoutItems: {
             exclude: string[];
         };
     };
-    render: (args: ZMenu) => import("lit-html").TemplateResult<1>;
+    render: () => import("lit-html").TemplateResult<1>;
 };

package/dist/types/components/z-menu-section/index.d.ts

@@ -5,36 +5,46 @@ import { EventEmitter } from "../../stencil-public-runtime";
  * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.
  */
 export declare class ZMenuSection {
-    hostElement: HTMLZMenuSectionElement;
+    host: HTMLZMenuSectionElement;
     /** Active state */
     active?: boolean;
+    /**
+     * Tabindex value to set on the label button.
+     * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).
+     */
+    htmlTabindex: number;
+    /** The opening state of the section. */
     open: boolean;
-    hasContent: boolean;
+    hasItems: boolean;
+    items: HTMLElement[];
     /** The section has been opened. */
     opened: EventEmitter;
     /** The section has been closed. */
     closed: EventEmitter;
-    private currentIndex;
-    private currentCanvasOpenStatus;
-    canvasOpenStatusChanged(e: CustomEvent): void;
-    handleKeyDown(e: KeyboardEvent): void;
-    private handleNavigationSideArrow;
-    private handleArrowsNav;
-    private getNextItem;
-    private focusToParentAndCloseMenu;
+    private label;
+    private get focusableItem();
     private toggle;
-    /** Close the list when a click is performed outside of this Element. */
-    handleClick(ev: MouseEvent): void;
-    /**
-     * Check if some content slot is set.
-     */
-    private checkContent;
+    private setItemsA11yAttrs;
+    private onItemsChange;
     /**
      * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
      * @param ev Slotchange event
      */
     private onLabelSlotChange;
-    private focusFirstSectionItemOnKeyUp;
-    componentWillLoad(): void;
+    private onLabelKeydown;
+    /**
+     * Move focus and adjust the tabindex value of `receiver` and `current` elements,
+     * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.
+     */
+    private moveFocus;
+    /** Set tabindex of the label to 0, then focus it. */
+    setFocus(): Promise<void>;
+    /** Focus the last item. */
+    focusLastItem(): Promise<void>;
+    onOpenChange(): void;
+    onTabindexChange(): void;
+    private onItemsKeydown;
+    constructor();
+    connectedCallback(): void;
     render(): HTMLZMenuSectionElement;
 }

package/dist/types/components/z-modal/index.stories.d.ts

@@ -19,7 +19,7 @@ declare const StoryMeta: {
         scrollInside: true;
         "--z-modal-content-padding": string;
     };
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZSearchbarStoriesArgs>) => import("lit-html").TemplateResult<1>)[];
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZSearchbarStoriesArgs>) => import("lit-html").TemplateResult<1>)[];
 };
 export default StoryMeta;
 export declare const ShortText: {

package/dist/types/components/z-navigation-tabs/index.stories.d.ts

@@ -16,8 +16,8 @@ declare const StoryMeta: {
                 type: "inline-radio";
             };
         };
-        "--z-navigation-tabs-nav-buttons-bg": import("@storybook/types").Args;
-        "--z-navigation-tabs-nav-buttons-fg": import("@storybook/types").Args;
+        "--z-navigation-tabs-nav-buttons-bg": import("@storybook/csf").Args;
+        "--z-navigation-tabs-nav-buttons-fg": import("@storybook/csf").Args;
     };
     args: {
         "--z-navigation-tabs-nav-buttons-bg": any;

package/dist/types/components/z-popover/index.stories.d.ts

@@ -17,8 +17,8 @@ declare const StoryMeta: {
                 type: "select";
             };
         };
-        "--z-popover-theme--surface": import("@storybook/types").Args;
-        "--z-popover-theme--text": import("@storybook/types").Args;
+        "--z-popover-theme--surface": import("@storybook/csf").Args;
+        "--z-popover-theme--text": import("@storybook/csf").Args;
     };
     args: {
         "--z-popover-theme--surface": string;

package/dist/types/components/z-section-title/index.stories.d.ts

@@ -13,7 +13,7 @@ declare const StoryMeta: {
                 type: "inline-radio";
             };
         };
-        "--z-section-title--divider-color": import("@storybook/types").Args;
+        "--z-section-title--divider-color": import("@storybook/csf").Args;
     };
     args: {
         uppercase: true;

package/dist/types/components/z-tag/index.stories.d.ts

@@ -9,8 +9,8 @@ declare const StoryMeta: {
             };
             options: string[];
         };
-        "--z-tag-text-color": import("@storybook/types").Args;
-        "--z-tag-bg": import("@storybook/types").Args;
+        "--z-tag-text-color": import("@storybook/csf").Args;
+        "--z-tag-bg": import("@storybook/csf").Args;
     };
     args: {
         text: string;

package/dist/types/components/z-tooltip/index.stories.d.ts

@@ -19,7 +19,7 @@ declare const StoryMeta: {
                 type: "select";
             };
         };
-        "--z-tooltip-theme--surface": import("@storybook/types").Args;
+        "--z-tooltip-theme--surface": import("@storybook/csf").Args;
     };
     args: {
         dark: false;