@zanichelli/albe-web-components 18.5.3 → 18.5.4-RC1

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

@@ -2,12 +2,6 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { PopoverPosition } from "../../beans";
 /**
  * Popover component.
- * This component displays a popover that can be bound to an element.
- * It supports various positions and can automatically adjust its position based on available space.
- *
- * Notes:
- * - To ensure the positioning algorithm finds the right container when calculating the position, set its container's `position` to `relative`.
- * - Consider manually adjusting the size of the slotted element (using `max-width`, `max-height`, etc...) when its content is "fluid" (like a big text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think that the popover doesn't fit in the available space).
  *
  * @cssprop --z-popover-theme--surface - background color of the popover.
  * @cssprop --z-popover-theme--text - foreground color of the popover.
@@ -15,12 +9,8 @@ import { PopoverPosition } from "../../beans";
  * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.
  */
 export declare class ZPopover {
-    /**
-     * The preferred position to render the popover.
-     * The popover will automatically search another position if not enough space is available for the preferred position.
-     * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.
-     */
-    position?: PopoverPosition;
+    /** Popover position. */
+    position: PopoverPosition;
     /**
      * The open state of the popover.
      */
@@ -45,7 +35,6 @@ export declare class ZPopover {
     closable: boolean;
     /**
      * The current position of the popover.
-     * It differs from `position` only when calculated automatically (position=auto) or when the position is recalculated for space reasons.
      */
     currentPosition?: PopoverPosition;
     /**
@@ -58,7 +47,6 @@ export declare class ZPopover {
     openChange: EventEmitter;
     host: HTMLZPopoverElement;
     private animationFrameRequestId?;
-    private readonly spaceTolerance;
     closePopoverWithKeyboard(e: KeyboardEvent): void;
     /**
      * Close the popover when clicking outside of its content.
@@ -72,45 +60,11 @@ export declare class ZPopover {
      * Setup popover behaviors on opening.
      */
     onOpen(): void;
-    private static readonly positionOrder;
-    /**
-     * Helper functions for space calculation
-     */
-    private hasCenteredHorizontalSpace;
-    private hasCenteredVerticalSpace;
-    private hasOffsetSpace;
-    /**
-     * Given a desired position and available space around the bound element, returns the best position
-     * that fits the popover, trying all positions if needed.
-     * Takes into account offsetModifier for centering.
-     * @param desiredPosition The desired position of the popover.
-     * @param availableSpace The available space around the bound element.
-     * @param boundElemSizes The sizes of the bound element.
-     * @param offsetModifier The modifier to apply to the offset for centering.
-     */
-    private getOptimalPopoverPosition;
-    /**
-     * Find the best fallback position based on available space when no position fits perfectly
-     */
-    private findBestFallbackPosition;
-    /**
-     * Calculate available space around the bound element
-     */
-    private calculateAvailableSpace;
-    /**
-     * Calculate relative offsets for positioning
-     */
-    private calculateRelativeOffsets;
-    /**
-     * Apply positioning styles based on position
-     */
-    private applyPositionStyles;
+    disconnectedCallback(): void;
     /**
      * Set the position of the popover.
      */
     private setPosition;
     componentWillLoad(): void;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    render(): HTMLZPopoverElement;
+    render(): HTMLSlotElement;
 }

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

@@ -1,63 +1,43 @@
 import { type ZPopover } from ".";
 import { PopoverPosition } from "../../beans";
 import { CSSVarsArguments } from "../../utils/storybook-utils";
-import "../list/z-list-element/index";
-import "../list/z-list/index";
 import "../z-button/index";
+import "../z-icon/index";
 import "./index";
 import "./index.stories.css";
-type ZPopoverStoriesArgs = ZPopover & CSSVarsArguments<"--z-popover-theme--surface" | "--z-popover-theme--text" | "--z-popover-padding" | "--z-popover-shadow-filter">;
+type ZPopoverStoriesArgs = ZPopover & CSSVarsArguments<"--z-popover-theme--surface" | "--z-popover-theme--text">;
 /**
- * To ensure the positioning algorithm finds the right container when calculating the position, set its container's `position` to `relative`.
+ * To be sure the AUTO algorithm finds the right container when calculating the position, set its container's position to `position: relative;`
  */
 declare const StoryMeta: {
     title: string;
     component: string;
     argTypes: {
         position: {
-            options: (PopoverPosition.TOP | PopoverPosition.RIGHT | PopoverPosition.BOTTOM | PopoverPosition.LEFT | PopoverPosition.TOP_RIGHT | PopoverPosition.TOP_LEFT | PopoverPosition.BOTTOM_RIGHT | PopoverPosition.BOTTOM_LEFT | PopoverPosition.RIGHT_TOP | PopoverPosition.RIGHT_BOTTOM | PopoverPosition.LEFT_TOP | PopoverPosition.LEFT_BOTTOM)[];
+            options: PopoverPosition[];
             control: {
                 type: "select";
-                labels: {
-                    null: string;
-                };
             };
         };
         "--z-popover-theme--surface": import("@storybook/csf").Args;
         "--z-popover-theme--text": import("@storybook/csf").Args;
     };
     args: {
-        position: any;
         "--z-popover-theme--surface": string;
         "--z-popover-theme--text": string;
-        "--z-popover-padding": string;
-    };
-    parameters: {
-        onTriggerClick: () => void;
     };
 };
 export default StoryMeta;
-export declare const Demo: {
-    args: {
-        "--z-popover-padding": string;
-        "--z-popover-shadow-filter": string;
-        center: false;
-        showArrow: false;
-    };
-    render: (args: ZPopoverStoriesArgs, { parameters }: import("@storybook/csf").StoryContext<import("@storybook/web-components").WebComponentsRenderer, ZPopoverStoriesArgs>) => import("lit-html").TemplateResult<1>;
-};
 export declare const ContextualMenuLike: {
     args: {
         "--z-popover-theme--surface": string;
-        "--z-popover-padding": string;
         position: PopoverPosition.RIGHT_BOTTOM;
     };
-    render: (args: ZPopoverStoriesArgs, { parameters }: import("@storybook/csf").StoryContext<import("@storybook/web-components").WebComponentsRenderer, ZPopoverStoriesArgs>) => import("lit-html").TemplateResult<1>;
+    render: (args: ZPopoverStoriesArgs) => import("lit-html").TemplateResult<1>;
 };
 export declare const TooltipLike: {
     args: {
         position: PopoverPosition.RIGHT;
-        "--z-popover-padding": string;
     };
-    render: (args: ZPopoverStoriesArgs, { parameters }: import("@storybook/csf").StoryContext<import("@storybook/web-components").WebComponentsRenderer, ZPopoverStoriesArgs>) => import("lit-html").TemplateResult<1>;
+    render: (args: ZPopoverStoriesArgs) => import("lit-html").TemplateResult<1>;
 };

package/dist/types/components.d.ts

@@ -1674,11 +1674,6 @@ export namespace Components {
     }
     /**
      * Popover component.
-     * This component displays a popover that can be bound to an element.
-     * It supports various positions and can automatically adjust its position based on available space.
-     * Notes:
-     * - To ensure the positioning algorithm finds the right container when calculating the position, set its container's `position` to `relative`.
-     * - Consider manually adjusting the size of the slotted element (using `max-width`, `max-height`, etc...) when its content is "fluid" (like a big text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think that the popover doesn't fit in the available space).
      * @cssprop --z-popover-theme--surface - background color of the popover.
      * @cssprop --z-popover-theme--text - foreground color of the popover.
      * @cssprop --z-popover-padding - padding of the popover.
@@ -1702,9 +1697,9 @@ export namespace Components {
          */
         "open": boolean;
         /**
-          * The preferred position to render the popover. The popover will automatically search another position if not enough space is available for the preferred position. If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.
+          * Popover position.
          */
-        "position"?: PopoverPosition;
+        "position": PopoverPosition;
         /**
           * Whether to show popover's arrow.
          */
@@ -3293,11 +3288,6 @@ declare global {
     }
     /**
      * Popover component.
-     * This component displays a popover that can be bound to an element.
-     * It supports various positions and can automatically adjust its position based on available space.
-     * Notes:
-     * - To ensure the positioning algorithm finds the right container when calculating the position, set its container's `position` to `relative`.
-     * - Consider manually adjusting the size of the slotted element (using `max-width`, `max-height`, etc...) when its content is "fluid" (like a big text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think that the popover doesn't fit in the available space).
      * @cssprop --z-popover-theme--surface - background color of the popover.
      * @cssprop --z-popover-theme--text - foreground color of the popover.
      * @cssprop --z-popover-padding - padding of the popover.
@@ -5525,11 +5515,6 @@ declare namespace LocalJSX {
     }
     /**
      * Popover component.
-     * This component displays a popover that can be bound to an element.
-     * It supports various positions and can automatically adjust its position based on available space.
-     * Notes:
-     * - To ensure the positioning algorithm finds the right container when calculating the position, set its container's `position` to `relative`.
-     * - Consider manually adjusting the size of the slotted element (using `max-width`, `max-height`, etc...) when its content is "fluid" (like a big text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think that the popover doesn't fit in the available space).
      * @cssprop --z-popover-theme--surface - background color of the popover.
      * @cssprop --z-popover-theme--text - foreground color of the popover.
      * @cssprop --z-popover-padding - padding of the popover.
@@ -5561,7 +5546,7 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
         /**
-          * The preferred position to render the popover. The popover will automatically search another position if not enough space is available for the preferred position. If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.
+          * Popover position.
          */
         "position"?: PopoverPosition;
         /**
@@ -6450,11 +6435,6 @@ declare module "@stencil/core" {
             "z-panel-elem": LocalJSX.ZPanelElem & JSXBase.HTMLAttributes<HTMLZPanelElemElement>;
             /**
              * Popover component.
-             * This component displays a popover that can be bound to an element.
-             * It supports various positions and can automatically adjust its position based on available space.
-             * Notes:
-             * - To ensure the positioning algorithm finds the right container when calculating the position, set its container's `position` to `relative`.
-             * - Consider manually adjusting the size of the slotted element (using `max-width`, `max-height`, etc...) when its content is "fluid" (like a big text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think that the popover doesn't fit in the available space).
              * @cssprop --z-popover-theme--surface - background color of the popover.
              * @cssprop --z-popover-theme--text - foreground color of the popover.
              * @cssprop --z-popover-padding - padding of the popover.

package/dist/web-components-library/index.esm.js

@@ -1,2 +1,2 @@
-import{c as aa}from"./p-a06fbbc0.js";export{_ as AccordionVariant,o as AlertType,A as AvatarSize,Y as BookCardDeprecatedVariant,X as BookCardVariant,V as BreadcrumbHomepageVariant,U as BreadcrumbPathStyle,d as ButtonSize,c as ButtonType,B as ButtonVariant,C as CardVariant,Q as CarouselArrowsPosition,R as CarouselProgressMode,e as ControlSize,M as CoverHeroContentPosition,J as CoverHeroVariant,p as Device,h as DividerOrientation,D as DividerSize,j as ExpandableListButtonAlign,E as ExpandableListStyle,$ as IconPosition,H as InfoRevealPosition,f as InputStatus,I as InputType,g as KeyboardCode,K as KeyboardKeyCode,k as LabelPosition,L as LicenseType,l as ListDividerType,i as ListSize,m as ListType,b as NavigationTabsKeyboardEvents,N as NavigationTabsOrientation,a as NavigationTabsSize,n as NotificationType,O as OffCanvasVariant,P as PopoverPosition,S as SortDirection,T as ThemeVariant,q as ToastNotification,s as ToastNotificationPosition,r as ToastNotificationTransition,u as TransitionDirection,W as VisibilityCondition,t as ZAriaAlertMode,w as ZChipType,y as ZDatePickerMode,z as ZDatePickerModeValue,F as ZDatePickerPosition,v as ZFileUploadType,G as ZRangePickerMode,x as ZSectionTitleDividerPosition,Z as ZTableRowExpandedType}from"./p-17af7fb2.js";import"./p-5145a606.js";const ia={colorFromId:aa};export{ia as Utils};
+import{c as aa}from"./p-02c55ed9.js";export{_ as AccordionVariant,o as AlertType,A as AvatarSize,Y as BookCardDeprecatedVariant,X as BookCardVariant,V as BreadcrumbHomepageVariant,U as BreadcrumbPathStyle,d as ButtonSize,c as ButtonType,B as ButtonVariant,C as CardVariant,Q as CarouselArrowsPosition,R as CarouselProgressMode,e as ControlSize,M as CoverHeroContentPosition,J as CoverHeroVariant,p as Device,h as DividerOrientation,D as DividerSize,j as ExpandableListButtonAlign,E as ExpandableListStyle,$ as IconPosition,H as InfoRevealPosition,f as InputStatus,I as InputType,g as KeyboardCode,K as KeyboardKeyCode,k as LabelPosition,L as LicenseType,l as ListDividerType,i as ListSize,m as ListType,b as NavigationTabsKeyboardEvents,N as NavigationTabsOrientation,a as NavigationTabsSize,n as NotificationType,O as OffCanvasVariant,P as PopoverPosition,S as SortDirection,T as ThemeVariant,q as ToastNotification,s as ToastNotificationPosition,r as ToastNotificationTransition,u as TransitionDirection,W as VisibilityCondition,t as ZAriaAlertMode,w as ZChipType,y as ZDatePickerMode,z as ZDatePickerModeValue,F as ZDatePickerPosition,v as ZFileUploadType,G as ZRangePickerMode,x as ZSectionTitleDividerPosition,Z as ZTableRowExpandedType}from"./p-b49aeff4.js";import"./p-5145a606.js";const ia={colorFromId:aa};export{ia as Utils};
 //# sourceMappingURL=index.esm.js.map

package/dist/web-components-library/{p-a06fbbc0.js → p-02c55ed9.js}

@@ -1,2 +1,2 @@
-import{g as e,p as t}from"./p-17af7fb2.js";import{B as n}from"./p-5145a606.js";function r(e){switch(e){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 e}}function a(){return Math.random().toString(36).replace("0.","")}function s(t,n,...r){if(t.code===e.ENTER||t.code===e.SPACE){t.preventDefault();n(...r)}}function u(t,n,...r){if(t.code===e.ENTER){t.preventDefault();n(...r)}}function c(e=null){if(!e){e=document.activeElement}if(e&&e.shadowRoot&&e.shadowRoot.activeElement){e=e.shadowRoot.activeElement;return c(e)}return e}function f(e,t=[]){t.push(e);if(e.parentElement){e=e.parentElement;return f(e,t)}else if(e.parentNode&&e.parentNode.host){e=e.parentNode.host;return f(e,t)}return t}function o(){switch(true){case window.innerWidth<=n.MOBILE:return t.MOBILE;case window.innerWidth<=n.TABLET:return t.TABLET;case window.innerWidth<=n.DESKTOP:return t.DESKTOP;default:return t.DESKTOP_WIDE}}function i(e){try{return JSON.parse(e)}catch(e){return false}}function l(e){const t="avatar-C";const n=19;const r=Math.ceil(2**31-1)*parseFloat(`0.${e}`);let a=Math.ceil(n*(r%1));if(a===0){a=1}return`${t}${a.toString().padStart(2,"0")}`}function d(e,t){var n;return e.contains(t)||!!((n=e.shadowRoot)===null||n===void 0?void 0:n.contains(t))}export{d as a,r as b,l as c,s as d,f as e,c as f,o as g,u as h,i,a as r};
-//# sourceMappingURL=p-a06fbbc0.js.map
+import{g as e,p as t}from"./p-b49aeff4.js";import{B as n}from"./p-5145a606.js";function r(e){switch(e){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 e}}function a(){return Math.random().toString(36).replace("0.","")}function s(t,n,...r){if(t.code===e.ENTER||t.code===e.SPACE){t.preventDefault();n(...r)}}function u(t,n,...r){if(t.code===e.ENTER){t.preventDefault();n(...r)}}function c(e=null){if(!e){e=document.activeElement}if(e&&e.shadowRoot&&e.shadowRoot.activeElement){e=e.shadowRoot.activeElement;return c(e)}return e}function f(e,t=[]){t.push(e);if(e.parentElement){e=e.parentElement;return f(e,t)}else if(e.parentNode&&e.parentNode.host){e=e.parentNode.host;return f(e,t)}return t}function o(){switch(true){case window.innerWidth<=n.MOBILE:return t.MOBILE;case window.innerWidth<=n.TABLET:return t.TABLET;case window.innerWidth<=n.DESKTOP:return t.DESKTOP;default:return t.DESKTOP_WIDE}}function i(e){try{return JSON.parse(e)}catch(e){return false}}function l(e){const t="avatar-C";const n=19;const r=Math.ceil(2**31-1)*parseFloat(`0.${e}`);let a=Math.ceil(n*(r%1));if(a===0){a=1}return`${t}${a.toString().padStart(2,"0")}`}function d(e,t){var n;return e.contains(t)||!!((n=e.shadowRoot)===null||n===void 0?void 0:n.contains(t))}export{d as a,r as b,l as c,s as d,f as e,c as f,o as g,u as h,i,a as r};
+//# sourceMappingURL=p-02c55ed9.js.map

package/{www/build/p-ac888c48.entry.js → dist/web-components-library/p-064c29b7.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as s,a as i,g as o}from"./p-75c4a726.js";import{g as a}from"./p-17af7fb2.js";const n=':host{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.label{display:flex;width:100%;align-items:center;padding:var(--space-unit) 0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface03);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}:host(:last-child:not([open])) .label{border-bottom:none}:host(:is([active],[open])) .label,.label:focus:focus-visible,.label:hover{border-color:var(--color-primary01)}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items[hidden]{display:none}::slotted([slot="section"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-1);line-height:1.333;outline:none}::slotted([slot="section"]:last-of-type){border:none}::slotted([slot="section"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}::slotted([slot="section"]:hover),::slotted([slot="section"]:focus:focus-visible),::slotted([slot="section"]:active),::slotted([slot="section"][active]),::slotted([slot="section"][data-active]){color:var(--color-primary01);font-weight:var(--font-bd)}';const h=n;const l=class{get focusableItem(){return this.items.find((({tabIndex:t})=>t===0))}toggle(){if(!this.hasItems){return}this.open=!this.open}setItemsA11yAttrs(){if(!this.hasItems){return}this.items.forEach((t=>{t.setAttribute("role","menuitem");t.tabIndex=-1}))}onItemsChange(){this.items=Array.from(this.host.querySelectorAll('[slot="section"]'));this.hasItems=this.items.length>0;this.setItemsA11yAttrs()}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=e===null||e===void 0?void 0:e.textContent}onLabelClick(){this.toggle();this.setFocus()}onLabelKeydown(t){if(t.key===a.ENTER||t.key===a.SPACE){t.preventDefault();t.stopPropagation();this.toggle();if(this.open){this.focustFirstItem()}}}moveFocus(t,e){t.tabIndex=0;setTimeout((()=>{t.focus()}),100);if(e){e.tabIndex=-1}}focustFirstItem(){this.moveFocus(this.items[0])}async focusLastItem(){this.moveFocus(this.items[this.items.length-1])}async setFocus(){this.htmlTabindex=0;setTimeout((()=>{this.label.focus()}),100)}onOpenChange(){if(!this.open){this.setItemsA11yAttrs();this.closed.emit()}else{this.opened.emit()}}onTabindexChange(){if(!this.label){return}this.label.tabIndex=this.htmlTabindex}onItemsKeydown(t){switch(t.key){case a.ESC:case a.ARROW_LEFT:if(!this.open){break}t.preventDefault();t.stopPropagation();this.moveFocus(this.label,this.focusableItem);this.open=false;break;case a.ARROW_RIGHT:if(this.open){break}t.preventDefault();t.stopPropagation();this.open=true;this.focustFirstItem();break;case a.ARROW_DOWN:{if(!this.open){break}if(document.activeElement===this.host){t.preventDefault();t.stopPropagation();this.focustFirstItem();break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e+1];if(s){t.preventDefault();t.stopPropagation();this.moveFocus(s,this.focusableItem)}else{this.htmlTabindex=0;this.focusableItem.tabIndex=-1}break}case a.ARROW_UP:{if(!this.open||document.activeElement===this.host){break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e-1];t.preventDefault();t.stopPropagation();if(s){this.moveFocus(s,this.focusableItem)}else{this.focusableItem.tabIndex=-1;this.setFocus()}break}}}constructor(s){t(this,s);this.opened=e(this,"opened",7);this.closed=e(this,"closed",7);this.active=undefined;this.htmlTabindex=-1;this.open=undefined;this.hasItems=undefined;this.items=undefined;this.toggle=this.toggle.bind(this);this.onItemsChange=this.onItemsChange.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onLabelClick=this.onLabelClick.bind(this);this.onLabelKeydown=this.onLabelKeydown.bind(this);this.onItemsKeydown=this.onItemsKeydown.bind(this)}connectedCallback(){this.onItemsChange()}render(){return s(i,{key:"b308fce3890a3094dca7d5de4f5837b47d6f2796",open:this.open},s("button",{key:"dd6eaa241e2f26c79b7fa0e6f7e14049c20b3ed6",ref:t=>this.label=t,class:"label","aria-haspopup":`${!!this.hasItems}`,"aria-expanded":`${!!this.open}`,role:"menuitem",tabindex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},s("slot",{key:"74f5c61fcf32df69b0b5d17ff0f06b5b62f940fa",onSlotchange:this.onLabelSlotChange}),this.hasItems&&s("z-icon",{key:"8338d8b57893c110475fe980320310236abb3446",name:this.open?"chevron-up":"chevron-down"})),s("div",{key:"4df11f5eaa5226c24930527caba7f0bfa048946a",class:"items",role:"menu",hidden:!this.open},s("slot",{key:"8393b22b945ec02e32e78248090505a012529253",name:"section",onSlotchange:this.onItemsChange})))}get host(){return o(this)}static get watchers(){return{open:["onOpenChange"],htmlTabindex:["onTabindexChange"]}}};l.style=h;export{l as z_menu_section};
-//# sourceMappingURL=p-ac888c48.entry.js.map
+import{r as t,c as e,h as s,a as i,g as o}from"./p-75c4a726.js";import{g as a}from"./p-b49aeff4.js";const n=':host{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.label{display:flex;width:100%;align-items:center;padding:var(--space-unit) 0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface03);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}:host(:last-child:not([open])) .label{border-bottom:none}:host(:is([active],[open])) .label,.label:focus:focus-visible,.label:hover{border-color:var(--color-primary01)}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items[hidden]{display:none}::slotted([slot="section"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-1);line-height:1.333;outline:none}::slotted([slot="section"]:last-of-type){border:none}::slotted([slot="section"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}::slotted([slot="section"]:hover),::slotted([slot="section"]:focus:focus-visible),::slotted([slot="section"]:active),::slotted([slot="section"][active]),::slotted([slot="section"][data-active]){color:var(--color-primary01);font-weight:var(--font-bd)}';const h=n;const l=class{get focusableItem(){return this.items.find((({tabIndex:t})=>t===0))}toggle(){if(!this.hasItems){return}this.open=!this.open}setItemsA11yAttrs(){if(!this.hasItems){return}this.items.forEach((t=>{t.setAttribute("role","menuitem");t.tabIndex=-1}))}onItemsChange(){this.items=Array.from(this.host.querySelectorAll('[slot="section"]'));this.hasItems=this.items.length>0;this.setItemsA11yAttrs()}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=e===null||e===void 0?void 0:e.textContent}onLabelClick(){this.toggle();this.setFocus()}onLabelKeydown(t){if(t.key===a.ENTER||t.key===a.SPACE){t.preventDefault();t.stopPropagation();this.toggle();if(this.open){this.focustFirstItem()}}}moveFocus(t,e){t.tabIndex=0;setTimeout((()=>{t.focus()}),100);if(e){e.tabIndex=-1}}focustFirstItem(){this.moveFocus(this.items[0])}async focusLastItem(){this.moveFocus(this.items[this.items.length-1])}async setFocus(){this.htmlTabindex=0;setTimeout((()=>{this.label.focus()}),100)}onOpenChange(){if(!this.open){this.setItemsA11yAttrs();this.closed.emit()}else{this.opened.emit()}}onTabindexChange(){if(!this.label){return}this.label.tabIndex=this.htmlTabindex}onItemsKeydown(t){switch(t.key){case a.ESC:case a.ARROW_LEFT:if(!this.open){break}t.preventDefault();t.stopPropagation();this.moveFocus(this.label,this.focusableItem);this.open=false;break;case a.ARROW_RIGHT:if(this.open){break}t.preventDefault();t.stopPropagation();this.open=true;this.focustFirstItem();break;case a.ARROW_DOWN:{if(!this.open){break}if(document.activeElement===this.host){t.preventDefault();t.stopPropagation();this.focustFirstItem();break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e+1];if(s){t.preventDefault();t.stopPropagation();this.moveFocus(s,this.focusableItem)}else{this.htmlTabindex=0;this.focusableItem.tabIndex=-1}break}case a.ARROW_UP:{if(!this.open||document.activeElement===this.host){break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e-1];t.preventDefault();t.stopPropagation();if(s){this.moveFocus(s,this.focusableItem)}else{this.focusableItem.tabIndex=-1;this.setFocus()}break}}}constructor(s){t(this,s);this.opened=e(this,"opened",7);this.closed=e(this,"closed",7);this.active=undefined;this.htmlTabindex=-1;this.open=undefined;this.hasItems=undefined;this.items=undefined;this.toggle=this.toggle.bind(this);this.onItemsChange=this.onItemsChange.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onLabelClick=this.onLabelClick.bind(this);this.onLabelKeydown=this.onLabelKeydown.bind(this);this.onItemsKeydown=this.onItemsKeydown.bind(this)}connectedCallback(){this.onItemsChange()}render(){return s(i,{key:"b308fce3890a3094dca7d5de4f5837b47d6f2796",open:this.open},s("button",{key:"dd6eaa241e2f26c79b7fa0e6f7e14049c20b3ed6",ref:t=>this.label=t,class:"label","aria-haspopup":`${!!this.hasItems}`,"aria-expanded":`${!!this.open}`,role:"menuitem",tabindex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},s("slot",{key:"74f5c61fcf32df69b0b5d17ff0f06b5b62f940fa",onSlotchange:this.onLabelSlotChange}),this.hasItems&&s("z-icon",{key:"8338d8b57893c110475fe980320310236abb3446",name:this.open?"chevron-up":"chevron-down"})),s("div",{key:"4df11f5eaa5226c24930527caba7f0bfa048946a",class:"items",role:"menu",hidden:!this.open},s("slot",{key:"8393b22b945ec02e32e78248090505a012529253",name:"section",onSlotchange:this.onItemsChange})))}get host(){return o(this)}static get watchers(){return{open:["onOpenChange"],htmlTabindex:["onTabindexChange"]}}};l.style=h;export{l as z_menu_section};
+//# sourceMappingURL=p-064c29b7.entry.js.map