@ds-mo/ui 12.5.0 → 12.6.1

package/dist/types/shell/index.d.ts

@@ -16,7 +16,7 @@ export { CHROME_TRANSITION_END, CHROME_TRANSITION_START, ChromeTransitionDepth,
 export { barGradientPositionFromPanelWidth, isPanelNavCollapsed, panelWidthPxFromTokens, readCssVarWidthPx, readPanelNavWidthTokens, } from './shell-chrome-metrics';
 export type { PanelNavWidthTokens } from './shell-chrome-metrics';
 export { SHELL_DEFAULT_INBOX_TOOL, SHELL_DESKTOP_BREAKPOINT, SHELL_MOBILE_BREAKPOINT, isShellInboxTool, resolveAvailableInboxTool, resolveShellResponsiveMode, shellMobileDestinationForTool, shouldEmitMobileDestinationChange, } from './shell-responsive';
-export type { ShellInboxToolId, ShellMobileDestination, ShellResponsiveMode, } from './shell-responsive';
+export type { ShellInboxToolId, MobileDestination, ShellResponsiveMode, } from './shell-responsive';
 export { BADGE_GRADIENT_POSITION_VAR, badgeGradientPosition, findGradientSurface, isShellGradientActive, parseCssBackgroundPosition, readShellGradientPosition, syncBadgeGradientPosition, } from './badge-gradient-ring';
 export type { GradientSurface } from './badge-gradient-ring';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/shell/shell-responsive.d.ts

@@ -1,14 +1,14 @@
 import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';
 export type ShellResponsiveMode = 'desktop' | 'tablet' | 'mobile';
-export type ShellMobileDestination = 'area' | 'search' | 'agents' | 'inbox';
+export type MobileDestination = 'area' | 'search' | 'agents' | 'inbox' | 'help';
 export type ShellInboxToolId = Extract<PanelToolsToolId, 'messages' | 'stacks' | 'activity'>;
 export declare const SHELL_DESKTOP_BREAKPOINT = 1200;
 export declare const SHELL_MOBILE_BREAKPOINT = 768;
 export declare const SHELL_DEFAULT_INBOX_TOOL: ShellInboxToolId;
 export declare function resolveShellResponsiveMode(width: number): ShellResponsiveMode;
-export declare function shellMobileDestinationForTool(open: boolean, tool: PanelToolsToolId | ''): ShellMobileDestination;
+export declare function shellMobileDestinationForTool(open: boolean, tool: PanelToolsToolId | ''): MobileDestination;
 export declare function isShellInboxTool(tool: string): tool is ShellInboxToolId;
 export declare function resolveAvailableInboxTool(preferred: string, available: readonly PanelToolsToolId[]): ShellInboxToolId | '';
 /** Active-destination reselects are inert unless they also dismiss the Menu pane. */
-export declare function shouldEmitMobileDestinationChange(active: ShellMobileDestination, next: ShellMobileDestination, navigationOpen: boolean): boolean;
+export declare function shouldEmitMobileDestinationChange(active: MobileDestination, next: MobileDestination, navigationOpen: boolean): boolean;
 //# sourceMappingURL=shell-responsive.d.ts.map

package/dist/types/utils/index.d.ts

@@ -9,6 +9,7 @@ export { SCROLL_EDGE_FADE_DEFAULT_SIZE, SCROLL_EDGE_FADE_SIZE_VAR, isScrollAtEdg
 export type { ScrollEdgeFadeEdge, ScrollEdgeFadeOptions, ScrollEdgeFadeSize, ScrollEdgeFadeSizeToken, } from './scroll-edge-fade';
 export { TOKEN_DEFAULTS, TOKEN_CSS_LENGTHS } from './token-defaults';
 export type { TokenDefaultKey } from './token-defaults';
+export { DEFAULT_REQUIRED_MESSAGE, setRequiredValidity } from './required-validity';
 export { controlWidthClass } from './control-width';
 export type { ControlWidth } from './control-width';
 export { CONTROL_TEXT_VARIANT } from './control-text';

package/dist/types/utils/required-validity.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Shared "required field" validity contract for form-associated custom
+ * elements (Checkbox, Radio, Switch, Input, Select, SelectMulti, …).
+ *
+ * Each control computes its own `missing` condition (what counts as empty
+ * differs: unchecked, no value, no selection, …) and its own form value, then
+ * calls `setRequiredValidity` instead of hand-rolling the `setValidity` call
+ * and the default message string.
+ *
+ * @see AGENTS.md — "Required-field validity"
+ */
+export declare const DEFAULT_REQUIRED_MESSAGE = "This field is required.";
+/** Sets or clears the `valueMissing` validity flag on a form-associated element. */
+export declare function setRequiredValidity(internals: ElementInternals, missing: boolean, message: string): void;
+//# sourceMappingURL=required-validity.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "12.5.0",
+  "version": "12.6.1",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/dist/angular/ds-shell-mobile-bar.d.ts

@@ -1,18 +0,0 @@
-import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
-import type { Components } from '@ds-mo/ui/components';
-import type { DsShellMobileBarCustomEvent } from '@ds-mo/ui/components';
-import type { ShellMobileBarDestinationDetail as IDsShellMobileBarShellMobileBarDestinationDetail } from '@ds-mo/ui/components';
-import * as i0 from "@angular/core";
-export declare class DsShellMobileBar {
-    protected z: NgZone;
-    protected el: HTMLDsShellMobileBarElement;
-    dsNavigationToggle: EventEmitter<DsShellMobileBarCustomEvent<boolean>>;
-    dsDestinationChange: EventEmitter<DsShellMobileBarCustomEvent<IDsShellMobileBarShellMobileBarDestinationDetail>>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DsShellMobileBar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsShellMobileBar, "ds-shell-mobile-bar", never, { "activeDestination": { "alias": "activeDestination"; "required": false; }; "agentsDot": { "alias": "agentsDot"; "required": false; }; "agentsLabel": { "alias": "agentsLabel"; "required": false; }; "currentArea": { "alias": "currentArea"; "required": false; }; "inboxDot": { "alias": "inboxDot"; "required": false; }; "inboxLabel": { "alias": "inboxLabel"; "required": false; }; "menuLabel": { "alias": "menuLabel"; "required": false; }; "navigationExpanded": { "alias": "navigationExpanded"; "required": false; }; "searchDot": { "alias": "searchDot"; "required": false; }; "searchLabel": { "alias": "searchLabel"; "required": false; }; }, { "dsNavigationToggle": "dsNavigationToggle"; "dsDestinationChange": "dsDestinationChange"; }, never, ["*"], true, never>;
-}
-export declare interface DsShellMobileBar extends Components.DsShellMobileBar {
-    dsNavigationToggle: EventEmitter<DsShellMobileBarCustomEvent<boolean>>;
-    dsDestinationChange: EventEmitter<DsShellMobileBarCustomEvent<IDsShellMobileBarShellMobileBarDestinationDetail>>;
-}

package/dist/angular/ds-shell-mobile-nav.d.ts

@@ -1,23 +0,0 @@
-import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
-import type { Components } from '@ds-mo/ui/components';
-import type { DsShellMobileNavCustomEvent } from '@ds-mo/ui/components';
-import type { NavChromeStyle as IDsShellMobileNavNavChromeStyle } from '@ds-mo/ui/components';
-import type { ShellMobileNavAuxiliaryDetail as IDsShellMobileNavShellMobileNavAuxiliaryDetail } from '@ds-mo/ui/components';
-import * as i0 from "@angular/core";
-export declare class DsShellMobileNav {
-    protected z: NgZone;
-    protected el: HTMLDsShellMobileNavElement;
-    dsAreaSelect: EventEmitter<DsShellMobileNavCustomEvent<string>>;
-    dsBrowseContextChange: EventEmitter<DsShellMobileNavCustomEvent<IDsShellMobileNavNavChromeStyle>>;
-    dsAuxiliarySelect: EventEmitter<DsShellMobileNavCustomEvent<IDsShellMobileNavShellMobileNavAuxiliaryDetail>>;
-    dsClose: EventEmitter<DsShellMobileNavCustomEvent<void>>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DsShellMobileNav, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsShellMobileNav, "ds-shell-mobile-nav", never, { "accountLabel": { "alias": "accountLabel"; "required": false; }; "browseContext": { "alias": "browseContext"; "required": false; }; "currentUrl": { "alias": "currentUrl"; "required": false; }; "dashboardGroups": { "alias": "dashboardGroups"; "required": false; }; "dashboardLabel": { "alias": "dashboardLabel"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "helpLabel": { "alias": "helpLabel"; "required": false; }; "navigationLabel": { "alias": "navigationLabel"; "required": false; }; "open": { "alias": "open"; "required": false; }; "settingsGroups": { "alias": "settingsGroups"; "required": false; }; "settingsLabel": { "alias": "settingsLabel"; "required": false; }; }, { "dsAreaSelect": "dsAreaSelect"; "dsBrowseContextChange": "dsBrowseContextChange"; "dsAuxiliarySelect": "dsAuxiliarySelect"; "dsClose": "dsClose"; }, never, ["*"], true, never>;
-}
-export declare interface DsShellMobileNav extends Components.DsShellMobileNav {
-    dsAreaSelect: EventEmitter<DsShellMobileNavCustomEvent<string>>;
-    dsBrowseContextChange: EventEmitter<DsShellMobileNavCustomEvent<IDsShellMobileNavNavChromeStyle>>;
-    dsAuxiliarySelect: EventEmitter<DsShellMobileNavCustomEvent<IDsShellMobileNavShellMobileNavAuxiliaryDetail>>;
-    dsClose: EventEmitter<DsShellMobileNavCustomEvent<void>>;
-}

package/dist/angular/ds-shell-mobile-section-nav.d.ts

@@ -1,18 +0,0 @@
-import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
-import type { Components } from '@ds-mo/ui/components';
-import type { DsShellMobileSectionNavCustomEvent } from '@ds-mo/ui/components';
-import * as i0 from "@angular/core";
-export declare class DsShellMobileSectionNav {
-    protected z: NgZone;
-    protected el: HTMLDsShellMobileSectionNavElement;
-    dsTabChange: EventEmitter<DsShellMobileSectionNavCustomEvent<string>>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DsShellMobileSectionNav, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsShellMobileSectionNav, "ds-shell-mobile-section-nav", never, { "basePath": { "alias": "basePath"; "required": false; }; "currentUrl": { "alias": "currentUrl"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "navigationLabel": { "alias": "navigationLabel"; "required": false; }; "tabs": { "alias": "tabs"; "required": false; }; "tabsJson": { "alias": "tabsJson"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "dsTabChange": "dsTabChange"; }, never, ["*"], true, never>;
-}
-export declare interface DsShellMobileSectionNav extends Components.DsShellMobileSectionNav {
-    /**
-     * Route intent; the application owns navigation.
-     */
-    dsTabChange: EventEmitter<DsShellMobileSectionNavCustomEvent<string>>;
-}

package/dist/components/ds-shell-mobile-bar.js

@@ -1,2 +0,0 @@
-import{p as i,H as e,c as s,h as o,a as r,t as n}from"./index.js";import{s as t}from"./p-BrusnEYP.js";import{d as a}from"./p-BAfG3M8z.js";import{d as l}from"./p-BwGnhInj.js";const c=()=>`.sc-ds-shell-mobile-bar-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-shell-mobile-bar-h:focus-visible,.ds-focus-ring.sc-ds-shell-mobile-bar:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-mobile-bar-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-mobile-bar{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-shell-mobile-bar-h:focus-visible,.ds-focus-ring-inset.sc-ds-shell-mobile-bar:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-mobile-bar-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-shell-mobile-bar:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-bar-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-bar{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-bar-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-bar::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-shell-mobile-bar-h,.ds-interaction-fill.sc-ds-shell-mobile-bar{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-shell-mobile-bar-h::before,.ds-interaction-fill.sc-ds-shell-mobile-bar::before,.ds-interaction-fill.sc-ds-shell-mobile-bar-h::after,.ds-interaction-fill.sc-ds-shell-mobile-bar::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-shell-mobile-bar-h::before,.ds-interaction-fill.sc-ds-shell-mobile-bar::before{z-index:1}.ds-interaction-fill.sc-ds-shell-mobile-bar-h::after,.ds-interaction-fill.sc-ds-shell-mobile-bar::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--bordered.sc-ds-shell-mobile-bar{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-shell-mobile-bar-h::before,.ds-interaction-fill--selected.sc-ds-shell-mobile-bar::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--selected.sc-ds-shell-mobile-bar{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-shell-mobile-bar-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-shell-mobile-bar:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-shell-mobile-bar-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-shell-mobile-bar:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-shell-mobile-bar-h>.ds-interaction-fill__content.sc-ds-shell-mobile-bar,.ds-interaction-fill.sc-ds-shell-mobile-bar>.ds-interaction-fill__content.sc-ds-shell-mobile-bar,.ds-interaction-fill__content.sc-ds-shell-mobile-bar{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-faint.sc-ds-shell-mobile-bar{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-medium.sc-ds-shell-mobile-bar{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-bold.sc-ds-shell-mobile-bar{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-strong.sc-ds-shell-mobile-bar{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-translucent.sc-ds-shell-mobile-bar{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-inverted.sc-ds-shell-mobile-bar{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-media.sc-ds-shell-mobile-bar{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-always-dark.sc-ds-shell-mobile-bar{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-navigation.sc-ds-shell-mobile-bar{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-shell-mobile-bar-h{display:block;min-width:0;background:var(--color-background-primary);color:var(--color-foreground-secondary)}.shell-mobile-bar.sc-ds-shell-mobile-bar{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));align-items:stretch;min-width:0;padding:var(--dimension-space-050) var(--dimension-space-050)     max(var(--dimension-space-050), env(safe-area-inset-bottom));border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);background:var(--color-background-primary);box-sizing:border-box}.shell-mobile-bar__item.sc-ds-shell-mobile-bar{appearance:none;min-width:0;min-height:var(--dimension-size-600);padding:var(--dimension-space-050) var(--dimension-space-025);border:0;border-radius:var(--dimension-radius-100);background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--dimension-space-025);cursor:pointer}.shell-mobile-bar__item--selected.sc-ds-shell-mobile-bar{color:var(--color-foreground-primary)}.shell-mobile-bar__item.sc-ds-shell-mobile-bar ds-text.sc-ds-shell-mobile-bar{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shell-mobile-bar__icon.sc-ds-shell-mobile-bar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md)}.shell-mobile-bar__dot.sc-ds-shell-mobile-bar{position:absolute;inset-block-start:calc(var(--dimension-space-025) * -1);inset-inline-end:calc(var(--dimension-space-025) * -1);width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half);background:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-background-primary)}`;const d=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsNavigationToggle=s(this,"dsNavigationToggle");this.dsDestinationChange=s(this,"dsDestinationChange");this.activeDestination="area";this.currentArea={id:"tracking",icon:"MapPage",label:"Tracking"};this.navigationExpanded=false;this.menuLabel="Menu";this.searchLabel="Search";this.agentsLabel="Agents";this.inboxLabel="Inbox";this.searchDot=false;this.agentsDot=false;this.inboxDot=false}destinationConfig(){return[{id:"area",icon:this.currentArea.icon||"MapPage",label:this.currentArea.label||"Area",dot:false},{id:"search",icon:"MagnifyingGlass",label:this.searchLabel,dot:this.searchDot},{id:"agents",icon:"AI",label:this.agentsLabel,dot:this.agentsDot},{id:"inbox",icon:"Inbox",label:this.inboxLabel,dot:this.inboxDot}]}selectDestination(i){if(!t(this.activeDestination,i,this.navigationExpanded)){return}this.dsDestinationChange.emit({destination:i})}async focusDestination(i){const e=this.el.querySelector(`#${i==="navigation"?"ds-shell-mobile-navigation-trigger":`ds-shell-mobile-${i}-trigger`}`);e?.focus({preventScroll:true})}renderDestination(i){const e=!this.navigationExpanded&&i.id===this.activeDestination;return o("button",{id:`ds-shell-mobile-${i.id}-trigger`,type:"button",class:{"shell-mobile-bar__item":true,"shell-mobile-bar__item--selected":e,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":e},"aria-current":e?"page":undefined,onClick:()=>this.selectDestination(i.id)},o("span",{class:"shell-mobile-bar__icon"},o("ds-icon",{name:i.icon,size:"md",color:"inherit"}),i.dot&&o("span",{class:"shell-mobile-bar__dot","aria-hidden":"true"})),o("ds-text",{as:"span",variant:"text-caption",color:"inherit"},i.label))}render(){return o(r,{key:"40c791b23a1cb0cd4e92b42ec758f56edef01913"},o("nav",{key:"9218fdf4db0ad0c74dcd3f73c487559d0a3d12d9",class:"shell-mobile-bar","aria-label":"Primary"},o("button",{key:"8f3bbd94b4bcd66438cb35f03c747e544e07df2f",id:"ds-shell-mobile-navigation-trigger",type:"button",class:{"shell-mobile-bar__item":true,"shell-mobile-bar__item--selected":this.navigationExpanded,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.navigationExpanded},"aria-expanded":String(this.navigationExpanded),"aria-controls":"ds-shell-mobile-navigation",onClick:()=>this.dsNavigationToggle.emit(!this.navigationExpanded)},o("span",{key:"fdfbe7de5b49cf7a65257146d066aa99415e6e08",class:"shell-mobile-bar__icon"},o("ds-icon",{key:"13edbce022ef3c86523cf33f82fff9397e421434",name:"Hamburger",size:"md",color:"inherit"})),o("ds-text",{key:"95d218fc70895003328fbc0eb75216316cc31401",as:"span",variant:"text-caption",color:"inherit"},this.menuLabel)),this.destinationConfig().map((i=>this.renderDestination(i)))))}get el(){return this}static get style(){return c()}},[2,"ds-shell-mobile-bar",{activeDestination:[1,"active-destination"],currentArea:[16],navigationExpanded:[4,"navigation-expanded"],menuLabel:[1,"menu-label"],searchLabel:[1,"search-label"],agentsLabel:[1,"agents-label"],inboxLabel:[1,"inbox-label"],searchDot:[4,"search-dot"],agentsDot:[4,"agents-dot"],inboxDot:[4,"inbox-dot"],focusDestination:[64]}]);function b(){if(typeof customElements==="undefined"){return}const i=["ds-shell-mobile-bar","ds-icon","ds-text"];i.forEach((i=>{switch(i){case"ds-shell-mobile-bar":if(!customElements.get(n(i))){customElements.define(n(i),d)}break;case"ds-icon":if(!customElements.get(n(i))){a()}break;case"ds-text":if(!customElements.get(n(i))){l()}break}}))}b();const h=d;const f=b;export{h as DsShellMobileBar,f as defineCustomElement};
-//# sourceMappingURL=ds-shell-mobile-bar.js.map

package/dist/components/ds-shell-mobile-bar.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["shellMobileBarCss","ShellMobileBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","activeDestination","currentArea","id","icon","label","navigationExpanded","menuLabel","searchLabel","agentsLabel","inboxLabel","searchDot","agentsDot","inboxDot","destinationConfig","dot","selectDestination","destination","shouldEmitMobileDestinationChange","dsDestinationChange","emit","focusDestination","target","el","querySelector","focus","preventScroll","renderDestination","item","selected","h","type","class","undefined","onClick","name","size","color","as","variant","render","Host","key","String","dsNavigationToggle","map"],"sources":["src/wc/components/ShellMobileBar/ShellMobileBar.css?tag=ds-shell-mobile-bar&encapsulation=scoped","src/wc/components/ShellMobileBar/ShellMobileBar.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-secondary);\n}\n\n.shell-mobile-bar {\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  align-items: stretch;\n  min-width: 0;\n  padding: var(--dimension-space-050) var(--dimension-space-050)\n    max(var(--dimension-space-050), env(safe-area-inset-bottom));\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background: var(--color-background-primary);\n  box-sizing: border-box;\n}\n\n.shell-mobile-bar__item {\n  appearance: none;\n  min-width: 0;\n  min-height: var(--dimension-size-600);\n  padding: var(--dimension-space-050) var(--dimension-space-025);\n  border: 0;\n  border-radius: var(--dimension-radius-100);\n  background: transparent;\n  color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n  cursor: pointer;\n}\n\n.shell-mobile-bar__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.shell-mobile-bar__item ds-text {\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.shell-mobile-bar__icon {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n}\n\n.shell-mobile-bar__dot {\n  position: absolute;\n  inset-block-start: calc(var(--dimension-space-025) * -1);\n  inset-inline-end: calc(var(--dimension-space-025) * -1);\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-background-primary);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport {\n  shouldEmitMobileDestinationChange,\n  type ShellMobileDestination,\n} from '../../shell/shell-responsive';\nimport type { PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type { ShellMobileBarDestinationDetail } from './shell-mobile-bar-types';\n\ninterface DestinationConfig {\n  id: ShellMobileDestination;\n  icon: string;\n  label: string;\n  dot: boolean;\n}\n\n@Component({\n  tag: 'ds-shell-mobile-bar',\n  styleUrl: 'ShellMobileBar.css',\n  scoped: true,\n})\nexport class ShellMobileBar {\n  @Element() el!: HTMLElement;\n\n  @Prop() activeDestination: ShellMobileDestination = 'area';\n  @Prop() currentArea: PanelNavItem = {\n    id: 'tracking',\n    icon: 'MapPage',\n    label: 'Tracking',\n  };\n  @Prop() navigationExpanded: boolean = false;\n  @Prop() menuLabel: string = 'Menu';\n  @Prop() searchLabel: string = 'Search';\n  @Prop() agentsLabel: string = 'Agents';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() searchDot: boolean = false;\n  @Prop() agentsDot: boolean = false;\n  @Prop() inboxDot: boolean = false;\n\n  @Event() dsNavigationToggle!: EventEmitter<boolean>;\n  @Event() dsDestinationChange!: EventEmitter<ShellMobileBarDestinationDetail>;\n\n  private destinationConfig(): DestinationConfig[] {\n    return [\n      {\n        id: 'area',\n        icon: this.currentArea.icon || 'MapPage',\n        label: this.currentArea.label || 'Area',\n        dot: false,\n      },\n      { id: 'search', icon: 'MagnifyingGlass', label: this.searchLabel, dot: this.searchDot },\n      { id: 'agents', icon: 'AI', label: this.agentsLabel, dot: this.agentsDot },\n      { id: 'inbox', icon: 'Inbox', label: this.inboxLabel, dot: this.inboxDot },\n    ];\n  }\n\n  private selectDestination(destination: ShellMobileDestination) {\n    if (\n      !shouldEmitMobileDestinationChange(\n        this.activeDestination,\n        destination,\n        this.navigationExpanded\n      )\n    ) {\n      return;\n    }\n    this.dsDestinationChange.emit({ destination });\n  }\n\n  @Method()\n  async focusDestination(destination: ShellMobileDestination | 'navigation') {\n    const target = this.el.querySelector<HTMLElement>(\n      `#${\n        destination === 'navigation'\n          ? 'ds-shell-mobile-navigation-trigger'\n          : `ds-shell-mobile-${destination}-trigger`\n      }`\n    );\n    target?.focus({ preventScroll: true });\n  }\n\n  private renderDestination(item: DestinationConfig) {\n    const selected = !this.navigationExpanded && item.id === this.activeDestination;\n    return (\n      <button\n        id={`ds-shell-mobile-${item.id}-trigger`}\n        type=\"button\"\n        class={{\n          'shell-mobile-bar__item': true,\n          'shell-mobile-bar__item--selected': selected,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n          'ds-interaction-fill--selected': selected,\n        }}\n        aria-current={selected ? 'page' : undefined}\n        onClick={() => this.selectDestination(item.id)}\n      >\n        <span class=\"shell-mobile-bar__icon\">\n          <ds-icon name={item.icon} size=\"md\" color=\"inherit\" />\n          {item.dot && (\n            <span class=\"shell-mobile-bar__dot\" aria-hidden=\"true\" />\n          )}\n        </span>\n        <ds-text as=\"span\" variant=\"text-caption\" color=\"inherit\">\n          {item.label}\n        </ds-text>\n      </button>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <nav class=\"shell-mobile-bar\" aria-label=\"Primary\">\n          <button\n            id=\"ds-shell-mobile-navigation-trigger\"\n            type=\"button\"\n            class={{\n              'shell-mobile-bar__item': true,\n              'shell-mobile-bar__item--selected': this.navigationExpanded,\n              'ds-focus-ring-inset': true,\n              'ds-interaction-fill': true,\n              'ds-interaction-fill--selected': this.navigationExpanded,\n            }}\n            aria-expanded={String(this.navigationExpanded)}\n            aria-controls=\"ds-shell-mobile-navigation\"\n            onClick={() => this.dsNavigationToggle.emit(!this.navigationExpanded)}\n          >\n            <span class=\"shell-mobile-bar__icon\">\n              <ds-icon name=\"Hamburger\" size=\"md\" color=\"inherit\" />\n            </span>\n            <ds-text\n              as=\"span\"\n              variant=\"text-caption\"\n              color=\"inherit\"\n            >\n              {this.menuLabel}\n            </ds-text>\n          </button>\n          {this.destinationConfig().map(item => this.renderDestination(item))}\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAoB,IAAM,ulR,MC6BnBC,EAAcC,EAAA,MAAAD,UAAAE,EAL3B,WAAAC,CAAAC,G,wJAQUC,KAAAC,kBAA4C,OAC5CD,KAAAE,YAA4B,CAClCC,GAAI,WACJC,KAAM,UACNC,MAAO,YAEDL,KAAAM,mBAA8B,MAC9BN,KAAAO,UAAoB,OACpBP,KAAAQ,YAAsB,SACtBR,KAAAS,YAAsB,SACtBT,KAAAU,WAAqB,QACrBV,KAAAW,UAAqB,MACrBX,KAAAY,UAAqB,MACrBZ,KAAAa,SAAoB,KA2G7B,CAtGS,iBAAAC,GACN,MAAO,CACL,CACEX,GAAI,OACJC,KAAMJ,KAAKE,YAAYE,MAAQ,UAC/BC,MAAOL,KAAKE,YAAYG,OAAS,OACjCU,IAAK,OAEP,CAAEZ,GAAI,SAAUC,KAAM,kBAAmBC,MAAOL,KAAKQ,YAAaO,IAAKf,KAAKW,WAC5E,CAAER,GAAI,SAAUC,KAAM,KAAMC,MAAOL,KAAKS,YAAaM,IAAKf,KAAKY,WAC/D,CAAET,GAAI,QAASC,KAAM,QAASC,MAAOL,KAAKU,WAAYK,IAAKf,KAAKa,U,CAI5D,iBAAAG,CAAkBC,GACxB,IACGC,EACClB,KAAKC,kBACLgB,EACAjB,KAAKM,oBAEP,CACA,M,CAEFN,KAAKmB,oBAAoBC,KAAK,CAAEH,e,CAIlC,sBAAMI,CAAiBJ,GACrB,MAAMK,EAAStB,KAAKuB,GAAGC,cACrB,IACEP,IAAgB,aACZ,qCACA,mBAAmBA,eAG3BK,GAAQG,MAAM,CAAEC,cAAe,M,CAGzB,iBAAAC,CAAkBC,GACxB,MAAMC,GAAY7B,KAAKM,oBAAsBsB,EAAKzB,KAAOH,KAAKC,kBAC9D,OACE6B,EAAA,UACE3B,GAAI,mBAAmByB,EAAKzB,aAC5B4B,KAAK,SACLC,MAAO,CACL,yBAA0B,KAC1B,mCAAoCH,EACpC,sBAAuB,KACvB,sBAAuB,KACvB,gCAAiCA,GAClC,eACaA,EAAW,OAASI,UAClCC,QAAS,IAAMlC,KAAKgB,kBAAkBY,EAAKzB,KAE3C2B,EAAA,QAAME,MAAM,0BACVF,EAAA,WAASK,KAAMP,EAAKxB,KAAMgC,KAAK,KAAKC,MAAM,YACzCT,EAAKb,KACJe,EAAA,QAAME,MAAM,wBAAuB,cAAa,UAGpDF,EAAA,WAASQ,GAAG,OAAOC,QAAQ,eAAeF,MAAM,WAC7CT,EAAKvB,O,CAMd,MAAAmC,GACE,OACEV,EAACW,EAAI,CAAAC,IAAA,4CACHZ,EAAA,OAAAY,IAAA,2CAAKV,MAAM,mBAAkB,aAAY,WACvCF,EAAA,UAAAY,IAAA,2CACEvC,GAAG,qCACH4B,KAAK,SACLC,MAAO,CACL,yBAA0B,KAC1B,mCAAoChC,KAAKM,mBACzC,sBAAuB,KACvB,sBAAuB,KACvB,gCAAiCN,KAAKM,oBACvC,gBACcqC,OAAO3C,KAAKM,oBAAmB,gBAChC,6BACd4B,QAAS,IAAMlC,KAAK4C,mBAAmBxB,MAAMpB,KAAKM,qBAElDwB,EAAA,QAAAY,IAAA,2CAAMV,MAAM,0BACVF,EAAA,WAAAY,IAAA,2CAASP,KAAK,YAAYC,KAAK,KAAKC,MAAM,aAE5CP,EAAA,WAAAY,IAAA,2CACEJ,GAAG,OACHC,QAAQ,eACRF,MAAM,WAELrC,KAAKO,YAGTP,KAAKc,oBAAoB+B,KAAIjB,GAAQ5B,KAAK2B,kBAAkBC,M","ignoreList":[]}

package/dist/components/ds-shell-mobile-nav.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,c as i,h as n,a as o,t as a}from"./index.js";import{d as t}from"./p-yhj1lIPx.js";import{d as l}from"./p-CH6cNXXF.js";import{d as r}from"./p-BAfG3M8z.js";import{d}from"./p-PZ6R_nGI.js";import{d as c}from"./p-BwGnhInj.js";const h=()=>`.ds-control--md.sc-ds-shell-mobile-nav-h,.ds-control--md.sc-ds-shell-mobile-nav,.ds-control--sm.sc-ds-shell-mobile-nav-h,.ds-control--sm.sc-ds-shell-mobile-nav,.ds-control--xs.sc-ds-shell-mobile-nav-h,.ds-control--xs.sc-ds-shell-mobile-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-shell-mobile-nav-h,.ds-control--md.sc-ds-shell-mobile-nav{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-shell-mobile-nav-h,.ds-control--sm.sc-ds-shell-mobile-nav{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-shell-mobile-nav-h,.ds-control--xs.sc-ds-shell-mobile-nav{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-shell-mobile-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-shell-mobile-nav-h:focus-visible,.ds-focus-ring.sc-ds-shell-mobile-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-mobile-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-mobile-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-shell-mobile-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-shell-mobile-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-mobile-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-shell-mobile-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-shell-mobile-nav-h,.ds-interaction-fill.sc-ds-shell-mobile-nav{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-shell-mobile-nav-h::before,.ds-interaction-fill.sc-ds-shell-mobile-nav::before,.ds-interaction-fill.sc-ds-shell-mobile-nav-h::after,.ds-interaction-fill.sc-ds-shell-mobile-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-shell-mobile-nav-h::before,.ds-interaction-fill.sc-ds-shell-mobile-nav::before{z-index:1}.ds-interaction-fill.sc-ds-shell-mobile-nav-h::after,.ds-interaction-fill.sc-ds-shell-mobile-nav::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--bordered.sc-ds-shell-mobile-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-shell-mobile-nav-h::before,.ds-interaction-fill--selected.sc-ds-shell-mobile-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--selected.sc-ds-shell-mobile-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-shell-mobile-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-shell-mobile-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-shell-mobile-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-shell-mobile-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-shell-mobile-nav-h>.ds-interaction-fill__content.sc-ds-shell-mobile-nav,.ds-interaction-fill.sc-ds-shell-mobile-nav>.ds-interaction-fill__content.sc-ds-shell-mobile-nav,.ds-interaction-fill__content.sc-ds-shell-mobile-nav{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-faint.sc-ds-shell-mobile-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-medium.sc-ds-shell-mobile-nav{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-bold.sc-ds-shell-mobile-nav{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-strong.sc-ds-shell-mobile-nav{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-translucent.sc-ds-shell-mobile-nav{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-inverted.sc-ds-shell-mobile-nav{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-media.sc-ds-shell-mobile-nav{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-shell-mobile-nav{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-navigation.sc-ds-shell-mobile-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-shell-mobile-nav-h{display:block;min-width:0;min-height:0;height:100%;background:var(--color-background-primary)}.sc-ds-shell-mobile-nav-h:not([open]){display:none}.shell-mobile-nav.sc-ds-shell-mobile-nav{display:grid;grid-template-rows:auto minmax(0, 1fr) auto;height:100%;min-height:0;background:var(--color-background-primary)}.shell-mobile-nav__header.sc-ds-shell-mobile-nav{display:grid;gap:var(--dimension-space-100);padding:var(--dimension-space-200);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.shell-mobile-nav__body.sc-ds-shell-mobile-nav{min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--dimension-space-100)}.shell-mobile-nav__group.sc-ds-shell-mobile-nav+.shell-mobile-nav__group.sc-ds-shell-mobile-nav{margin-block-start:var(--dimension-space-200)}.shell-mobile-nav__group-label.sc-ds-shell-mobile-nav{display:block;padding:0 var(--dimension-space-100) var(--dimension-space-050)}.shell-mobile-nav__items.sc-ds-shell-mobile-nav{display:grid;gap:var(--dimension-space-025)}.shell-mobile-nav__area.sc-ds-shell-mobile-nav,.shell-mobile-nav__auxiliary.sc-ds-shell-mobile-nav{appearance:none;width:100%;border:0;background:transparent;color:var(--color-foreground-secondary);display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-content-gap);padding-inline:var(--dimension-space-100);cursor:pointer;text-align:start}.shell-mobile-nav__area--selected.sc-ds-shell-mobile-nav{color:var(--color-foreground-primary)}.shell-mobile-nav__dot.sc-ds-shell-mobile-nav{width:var(--dimension-size-075);height:var(--dimension-size-075);margin-inline-start:auto;border-radius:var(--dimension-radius-half);background:var(--color-background-bold-brand)}.shell-mobile-nav__footer.sc-ds-shell-mobile-nav{display:grid;gap:var(--dimension-space-025);padding:var(--dimension-space-100);border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}`;const v=[{id:"dashboard",label:"Dashboard"},{id:"settings",label:"Settings"}];const b=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAreaSelect=i(this,"dsAreaSelect");this.dsBrowseContextChange=i(this,"dsBrowseContextChange");this.dsAuxiliarySelect=i(this,"dsAuxiliarySelect");this.dsClose=i(this,"dsClose");this.open=false;this.browseContext="dashboard";this.dashboardGroups=[];this.settingsGroups=[];this.currentUrl="";this.heading="Navigation";this.navigationLabel="Application navigation";this.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.helpLabel="Help & Support";this.handleContextChange=e=>{const s=e.detail==="settings"?"settings":"dashboard";if(s===this.browseContext)return;this.dsBrowseContextChange.emit(s)}}get groups(){return this.browseContext==="settings"?this.settingsGroups:this.dashboardGroups}get items(){return this.groups.flatMap((e=>e.items))}get activeId(){return t(this.currentUrl,[...this.dashboardGroups.flatMap((e=>e.items)),...this.settingsGroups.flatMap((e=>e.items))])}handleOpenChange(e){if(!e)return;requestAnimationFrame((()=>{const e=this.el.querySelector('[aria-current="page"]');const s=this.el.querySelector(".shell-mobile-nav__area");(e??s)?.focus({preventScroll:true})}))}handleKeyDown(e){if(!this.open||e.key!=="Escape")return;e.preventDefault();this.dsClose.emit()}selectAuxiliary(e,s){this.dsAuxiliarySelect.emit({id:e,anchor:s.currentTarget})}renderGroup(e,s){return n("section",{class:"shell-mobile-nav__group","aria-labelledby":e.label?`mobile-nav-group-${e.id??s}`:undefined},e.label&&n("ds-text",{id:`mobile-nav-group-${e.id??s}`,class:"shell-mobile-nav__group-label",as:"h2",variant:"text-caption",color:"secondary"},e.label),n("div",{class:"shell-mobile-nav__items"},e.items.map((e=>{const s=e.id===this.activeId;return n("button",{type:"button",class:{"shell-mobile-nav__area":true,"shell-mobile-nav__area--selected":s,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":s},"aria-current":s?"page":undefined,onClick:()=>this.dsAreaSelect.emit(e.id)},n("ds-icon",{name:e.icon,size:"md",color:"inherit"}),n("ds-text",{as:"span",variant:"text-body-medium",emphasis:true,color:"inherit"},e.label),e.dot&&n("span",{class:"shell-mobile-nav__dot","aria-hidden":"true"}))}))))}render(){const e=[{...v[0],label:this.dashboardLabel},{...v[1],label:this.settingsLabel}];return n(o,{key:"ac9d44755700a15982a9dbf95030fdc2cb94b42d","aria-hidden":this.open?undefined:"true",inert:this.open?undefined:true},n("section",{key:"d1ab3c7297a000581441c0381ccf2ac99818b395",id:"ds-shell-mobile-navigation",class:"shell-mobile-nav","aria-label":this.navigationLabel},n("header",{key:"fb04504a2773c96cd75ae9485562083463881e5c",class:"shell-mobile-nav__header"},n("ds-text",{key:"244cf658112d889e47488a0eae2003f50a7e8553",as:"h1",variant:"text-title-medium",emphasis:true},this.heading),n("ds-tab-group",{key:"e8cd9a945f35aa0f915dbebcce0324d40c21d011",tabs:e,value:this.browseContext,"aria-label":"Navigation context",onDsChange:this.handleContextChange})),n("nav",{key:"1e9d3a87021750de6aa4838a19f9dcbb6b5526d8",class:"shell-mobile-nav__body","aria-label":this.navigationLabel},this.groups.map(((e,s)=>this.renderGroup(e,s)))),n("footer",{key:"906862314bd16f93922e8e7feae19a699633b12b",class:"shell-mobile-nav__footer"},n("button",{key:"fcd5b86682cd18138e90e59711c6e9358eabe8dd",type:"button",class:"shell-mobile-nav__auxiliary ds-control--md ds-focus-ring-inset ds-interaction-fill",onClick:e=>this.selectAuxiliary("help",e)},n("ds-icon",{key:"b6b2c85dfc23d299addfc0edc581adb95e8481e0",name:"CircleQuestion",size:"md",color:"inherit"}),n("ds-text",{key:"9006a64aafc472db6d8e7d01a365a2b632cd3de6",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit"},this.helpLabel)),n("button",{key:"e334dad947f59f3bc86c08efc0ed926017aa95c8",type:"button",class:"shell-mobile-nav__auxiliary ds-control--md ds-focus-ring-inset ds-interaction-fill",onClick:e=>this.selectAuxiliary("account",e)},n("ds-icon",{key:"81a0d824511f13e75b726419ba089b7841364298",name:"Avatar",size:"md",color:"inherit"}),n("ds-text",{key:"632acdc5c31bb95237fe526a5d08c26b2069cbcd",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit"},this.accountLabel)))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return h()}},[2,"ds-shell-mobile-nav",{open:[516],browseContext:[1,"browse-context"],dashboardGroups:[16],settingsGroups:[16],currentUrl:[1,"current-url"],heading:[1],navigationLabel:[1,"navigation-label"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],helpLabel:[1,"help-label"]},[[0,"keydown","handleKeyDown"]],{open:[{handleOpenChange:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-shell-mobile-nav","ds-badge","ds-icon","ds-tab-group","ds-text"];e.forEach((e=>{switch(e){case"ds-shell-mobile-nav":if(!customElements.get(a(e))){customElements.define(a(e),b)}break;case"ds-badge":if(!customElements.get(a(e))){l()}break;case"ds-icon":if(!customElements.get(a(e))){r()}break;case"ds-tab-group":if(!customElements.get(a(e))){d()}break;case"ds-text":if(!customElements.get(a(e))){c()}break}}))}m();const u=b;const f=m;export{u as DsShellMobileNav,f as defineCustomElement};
-//# sourceMappingURL=ds-shell-mobile-nav.js.map

package/dist/components/ds-shell-mobile-nav.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["shellMobileNavCss","CONTEXT_TABS","id","label","ShellMobileNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","browseContext","dashboardGroups","settingsGroups","currentUrl","heading","navigationLabel","dashboardLabel","settingsLabel","accountLabel","helpLabel","handleContextChange","event","next","detail","dsBrowseContextChange","emit","groups","items","flatMap","group","activeId","deriveActiveIdFromUrl","handleOpenChange","requestAnimationFrame","selected","el","querySelector","first","focus","preventScroll","handleKeyDown","key","preventDefault","dsClose","selectAuxiliary","dsAuxiliarySelect","anchor","currentTarget","renderGroup","index","h","class","undefined","as","variant","color","map","item","type","onClick","dsAreaSelect","name","icon","size","emphasis","dot","render","contextTabs","Host","inert","tabs","value","onDsChange"],"sources":["src/wc/components/ShellMobileNav/ShellMobileNav.css?tag=ds-shell-mobile-nav&encapsulation=scoped","src/wc/components/ShellMobileNav/ShellMobileNav.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  background: var(--color-background-primary);\n}\n\n:host(:not([open])) {\n  display: none;\n}\n\n.shell-mobile-nav {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  height: 100%;\n  min-height: 0;\n  background: var(--color-background-primary);\n}\n\n.shell-mobile-nav__header {\n  display: grid;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-200);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.shell-mobile-nav__body {\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  padding: var(--dimension-space-100);\n}\n\n.shell-mobile-nav__group + .shell-mobile-nav__group {\n  margin-block-start: var(--dimension-space-200);\n}\n\n.shell-mobile-nav__group-label {\n  display: block;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-050);\n}\n\n.shell-mobile-nav__items {\n  display: grid;\n  gap: var(--dimension-space-025);\n}\n\n.shell-mobile-nav__area,\n.shell-mobile-nav__auxiliary {\n  appearance: none;\n  width: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-content-gap);\n  padding-inline: var(--dimension-space-100);\n  cursor: pointer;\n  text-align: start;\n}\n\n.shell-mobile-nav__area--selected {\n  color: var(--color-foreground-primary);\n}\n\n.shell-mobile-nav__dot {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  margin-inline-start: auto;\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-bold-brand);\n}\n\n.shell-mobile-nav__footer {\n  display: grid;\n  gap: var(--dimension-space-025);\n  padding: var(--dimension-space-100);\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport { deriveActiveIdFromUrl } from '../PanelNav/panel-nav-utils';\nimport type { PanelNavGroup, PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type {\n  ShellMobileNavAuxiliaryDetail,\n  ShellMobileNavAuxiliaryId,\n} from './shell-mobile-nav-types';\n\nconst CONTEXT_TABS = [\n  { id: 'dashboard', label: 'Dashboard' },\n  { id: 'settings', label: 'Settings' },\n];\n\n@Component({\n  tag: 'ds-shell-mobile-nav',\n  styleUrl: 'ShellMobileNav.css',\n  scoped: true,\n})\nexport class ShellMobileNav {\n  @Element() el!: HTMLElement;\n\n  @Prop({ reflect: true }) open: boolean = false;\n  @Prop() browseContext: NavChromeStyle = 'dashboard';\n  @Prop() dashboardGroups: PanelNavGroup[] = [];\n  @Prop() settingsGroups: PanelNavGroup[] = [];\n  @Prop() currentUrl: string = '';\n  @Prop() heading: string = 'Navigation';\n  @Prop() navigationLabel: string = 'Application navigation';\n  @Prop() dashboardLabel: string = 'Dashboard';\n  @Prop() settingsLabel: string = 'Settings';\n  @Prop() accountLabel: string = 'Account';\n  @Prop() helpLabel: string = 'Help & Support';\n\n  @Event() dsAreaSelect!: EventEmitter<string>;\n  @Event() dsBrowseContextChange!: EventEmitter<NavChromeStyle>;\n  @Event() dsAuxiliarySelect!: EventEmitter<ShellMobileNavAuxiliaryDetail>;\n  @Event() dsClose!: EventEmitter<void>;\n\n  private get groups(): PanelNavGroup[] {\n    return this.browseContext === 'settings' ? this.settingsGroups : this.dashboardGroups;\n  }\n\n  private get items(): PanelNavItem[] {\n    return this.groups.flatMap(group => group.items);\n  }\n\n  private get activeId(): string {\n    return deriveActiveIdFromUrl(this.currentUrl, [\n      ...this.dashboardGroups.flatMap(group => group.items),\n      ...this.settingsGroups.flatMap(group => group.items),\n    ]);\n  }\n\n  @Watch('open')\n  handleOpenChange(open: boolean) {\n    if (!open) return;\n    requestAnimationFrame(() => {\n      const selected = this.el.querySelector<HTMLElement>('[aria-current=\"page\"]');\n      const first = this.el.querySelector<HTMLElement>('.shell-mobile-nav__area');\n      (selected ?? first)?.focus({ preventScroll: true });\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open || event.key !== 'Escape') return;\n    event.preventDefault();\n    this.dsClose.emit();\n  }\n\n  private handleContextChange = (event: CustomEvent<string>) => {\n    const next = event.detail === 'settings' ? 'settings' : 'dashboard';\n    if (next === this.browseContext) return;\n    this.dsBrowseContextChange.emit(next);\n  };\n\n  private selectAuxiliary(id: ShellMobileNavAuxiliaryId, event: MouseEvent) {\n    this.dsAuxiliarySelect.emit({\n      id,\n      anchor: event.currentTarget as HTMLElement,\n    });\n  }\n\n  private renderGroup(group: PanelNavGroup, index: number) {\n    return (\n      <section class=\"shell-mobile-nav__group\" aria-labelledby={group.label ? `mobile-nav-group-${group.id ?? index}` : undefined}>\n        {group.label && (\n          <ds-text\n            id={`mobile-nav-group-${group.id ?? index}`}\n            class=\"shell-mobile-nav__group-label\"\n            as=\"h2\"\n            variant=\"text-caption\"\n            color=\"secondary\"\n          >\n            {group.label}\n          </ds-text>\n        )}\n        <div class=\"shell-mobile-nav__items\">\n          {group.items.map(item => {\n            const selected = item.id === this.activeId;\n            return (\n              <button\n                type=\"button\"\n                class={{\n                  'shell-mobile-nav__area': true,\n                  'shell-mobile-nav__area--selected': selected,\n                  'ds-control--md': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-interaction-fill': true,\n                  'ds-interaction-fill--selected': selected,\n                }}\n                aria-current={selected ? 'page' : undefined}\n                onClick={() => this.dsAreaSelect.emit(item.id)}\n              >\n                <ds-icon name={item.icon} size=\"md\" color=\"inherit\" />\n                <ds-text as=\"span\" variant=\"text-body-medium\" emphasis color=\"inherit\">\n                  {item.label}\n                </ds-text>\n                {item.dot && <span class=\"shell-mobile-nav__dot\" aria-hidden=\"true\" />}\n              </button>\n            );\n          })}\n        </div>\n      </section>\n    );\n  }\n\n  render() {\n    const contextTabs = [\n      { ...CONTEXT_TABS[0], label: this.dashboardLabel },\n      { ...CONTEXT_TABS[1], label: this.settingsLabel },\n    ];\n\n    return (\n      <Host aria-hidden={this.open ? undefined : 'true'} inert={this.open ? undefined : true}>\n        <section\n          id=\"ds-shell-mobile-navigation\"\n          class=\"shell-mobile-nav\"\n          aria-label={this.navigationLabel}\n        >\n          <header class=\"shell-mobile-nav__header\">\n            <ds-text as=\"h1\" variant=\"text-title-medium\" emphasis>\n              {this.heading}\n            </ds-text>\n            <ds-tab-group\n              tabs={contextTabs}\n              value={this.browseContext}\n              aria-label=\"Navigation context\"\n              onDsChange={this.handleContextChange}\n            />\n          </header>\n\n          <nav class=\"shell-mobile-nav__body\" aria-label={this.navigationLabel}>\n            {this.groups.map((group, index) => this.renderGroup(group, index))}\n          </nav>\n\n          <footer class=\"shell-mobile-nav__footer\">\n            <button\n              type=\"button\"\n              class=\"shell-mobile-nav__auxiliary ds-control--md ds-focus-ring-inset ds-interaction-fill\"\n              onClick={event => this.selectAuxiliary('help', event)}\n            >\n              <ds-icon name=\"CircleQuestion\" size=\"md\" color=\"inherit\" />\n              <ds-text as=\"span\" variant=\"text-body-medium\" emphasis color=\"inherit\">\n                {this.helpLabel}\n              </ds-text>\n            </button>\n            <button\n              type=\"button\"\n              class=\"shell-mobile-nav__auxiliary ds-control--md ds-focus-ring-inset ds-interaction-fill\"\n              onClick={event => this.selectAuxiliary('account', event)}\n            >\n              <ds-icon name=\"Avatar\" size=\"md\" color=\"inherit\" />\n              <ds-text as=\"span\" variant=\"text-body-medium\" emphasis color=\"inherit\">\n                {this.accountLabel}\n              </ds-text>\n            </button>\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-shell-mobile-section-nav.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DsShellMobileSectionNav extends Components.DsShellMobileSectionNav, HTMLElement {}
-export const DsShellMobileSectionNav: {
-    prototype: DsShellMobileSectionNav;
-    new (): DsShellMobileSectionNav;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ds-shell-mobile-section-nav.js

@@ -1,2 +0,0 @@
-import{p as i,H as e,c as s,h as n,a as o,t}from"./index.js";import{p as r,d as a}from"./p-BOQnc-M4.js";import{g as l,i as c}from"./p-BQq26pt9.js";import{d}from"./p-BwGnhInj.js";const v=()=>`.sc-ds-shell-mobile-section-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-shell-mobile-section-nav-h:focus-visible,.ds-focus-ring.sc-ds-shell-mobile-section-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-mobile-section-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-mobile-section-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-shell-mobile-section-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-shell-mobile-section-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-mobile-section-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-shell-mobile-section-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-section-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-section-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-section-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-section-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill.sc-ds-shell-mobile-section-nav{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h::before,.ds-interaction-fill.sc-ds-shell-mobile-section-nav::before,.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h::after,.ds-interaction-fill.sc-ds-shell-mobile-section-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h::before,.ds-interaction-fill.sc-ds-shell-mobile-section-nav::before{z-index:1}.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h::after,.ds-interaction-fill.sc-ds-shell-mobile-section-nav::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--bordered.sc-ds-shell-mobile-section-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-shell-mobile-section-nav-h::before,.ds-interaction-fill--selected.sc-ds-shell-mobile-section-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--selected.sc-ds-shell-mobile-section-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-shell-mobile-section-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-shell-mobile-section-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h>.ds-interaction-fill__content.sc-ds-shell-mobile-section-nav,.ds-interaction-fill.sc-ds-shell-mobile-section-nav>.ds-interaction-fill__content.sc-ds-shell-mobile-section-nav,.ds-interaction-fill__content.sc-ds-shell-mobile-section-nav{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-faint.sc-ds-shell-mobile-section-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-medium.sc-ds-shell-mobile-section-nav{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-bold.sc-ds-shell-mobile-section-nav{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-strong.sc-ds-shell-mobile-section-nav{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-translucent.sc-ds-shell-mobile-section-nav{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-inverted.sc-ds-shell-mobile-section-nav{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-media.sc-ds-shell-mobile-section-nav{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-shell-mobile-section-nav{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-navigation.sc-ds-shell-mobile-section-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-shell-mobile-section-nav-h{display:block;min-width:0;background:var(--color-background-primary);color:var(--color-foreground-secondary)}.shell-mobile-section-nav.sc-ds-shell-mobile-section-nav{min-width:0;min-height:var(--dimension-size-600);display:flex;align-items:center;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);background:var(--color-background-primary)}.shell-mobile-section-nav__scroller.sc-ds-shell-mobile-section-nav{width:100%;min-width:0;min-height:var(--dimension-size-600);display:flex;align-items:center;gap:var(--dimension-space-050);padding-inline:var(--dimension-space-100);overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:none;box-sizing:border-box}.shell-mobile-section-nav__scroller.sc-ds-shell-mobile-section-nav::-webkit-scrollbar{display:none}.shell-mobile-section-nav__tab.sc-ds-shell-mobile-section-nav{appearance:none;flex:0 0 auto;min-height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);border:0;border-radius:var(--dimension-radius-100);background:transparent;color:inherit;display:inline-flex;align-items:center;gap:var(--dimension-space-050);cursor:pointer}.shell-mobile-section-nav__tab--selected.sc-ds-shell-mobile-section-nav{color:var(--color-foreground-primary)}.shell-mobile-section-nav__tab.sc-ds-shell-mobile-section-nav:disabled{color:var(--color-foreground-tertiary);cursor:default}.shell-mobile-section-nav__divider.sc-ds-shell-mobile-section-nav{flex:0 0 auto;width:var(--dimension-stroke-width-012);height:var(--dimension-size-300);background:var(--color-border-tertiary)}.shell-mobile-section-nav__dot.sc-ds-shell-mobile-section-nav{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half);background:var(--color-background-bold-brand)}.shell-mobile-section-nav__heading.sc-ds-shell-mobile-section-nav{display:block;min-width:0;padding-inline:var(--dimension-space-200);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;const h=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsTabChange=s(this,"dsTabChange");this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.navigationLabel="Section navigation";this.lastScrolledValue=""}get resolvedTabs(){return this.tabsJson?r(this.tabsJson,[]):this.tabs??[]}get urlState(){return a(this.currentUrl,this.basePath,this.resolvedTabs)}get effectiveValue(){if(this.currentUrl&&this.basePath)return this.urlState.value;return this.value}componentDidLoad(){this.scrollSelectedIntoView()}componentDidRender(){this.scrollSelectedIntoView()}scrollSelectedIntoView(){const i=this.effectiveValue;if(!i||i===this.lastScrolledValue)return;this.lastScrolledValue=i;requestAnimationFrame((()=>{this.el.querySelector(`[data-section-id="${CSS.escape(i)}"]`)?.scrollIntoView({block:"nearest",inline:"center"})}))}selectTab(i,e){if(e||i===this.effectiveValue)return;this.dsTabChange.emit(i)}render(){const i=this.resolvedTabs;const e=l(i);const s=e.length>0&&!this.urlState.hideTabs;return n(o,{key:"a58d17180c6dc3f22e6753970d9119432e9fb046"},n("nav",{key:"ca8a3153e1d34d283d1eb927683248d09d86b7cf",class:"shell-mobile-section-nav","aria-label":this.navigationLabel},s?n("div",{class:"shell-mobile-section-nav__scroller"},i.map(((i,e)=>{if(c(i)){return n("span",{class:"shell-mobile-section-nav__divider","aria-hidden":"true",key:`divider-${e}`})}const s=i.id===this.effectiveValue;return n("button",{type:"button",class:{"shell-mobile-section-nav__tab":true,"shell-mobile-section-nav__tab--selected":s,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"data-section-id":i.id,disabled:i.isInactive,"aria-current":s?"page":undefined,onClick:()=>this.selectTab(i.id,i.isInactive)},n("ds-text",{as:"span",variant:"text-body-medium",emphasis:s,color:"inherit"},i.label),i.dot&&n("span",{class:"shell-mobile-section-nav__dot","aria-hidden":"true"}))}))):n("ds-text",{class:"shell-mobile-section-nav__heading",as:"span",variant:"text-body-medium",emphasis:true},this.heading??"")))}get el(){return this}static get style(){return v()}},[2,"ds-shell-mobile-section-nav",{tabs:[16],tabsJson:[1,"tabs-json"],value:[1],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],navigationLabel:[1,"navigation-label"]}]);function b(){if(typeof customElements==="undefined"){return}const i=["ds-shell-mobile-section-nav","ds-text"];i.forEach((i=>{switch(i){case"ds-shell-mobile-section-nav":if(!customElements.get(t(i))){customElements.define(t(i),h)}break;case"ds-text":if(!customElements.get(t(i))){d()}break}}))}b();const f=h;const m=b;export{f as DsShellMobileSectionNav,m as defineCustomElement};
-//# sourceMappingURL=ds-shell-mobile-section-nav.js.map

package/dist/components/ds-shell-mobile-section-nav.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["shellMobileSectionNavCss","ShellMobileSectionNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","tabs","tabsJson","value","basePath","currentUrl","navigationLabel","lastScrolledValue","resolvedTabs","parseJsonArrayProp","urlState","deriveBarNavValueFromUrl","effectiveValue","componentDidLoad","scrollSelectedIntoView","componentDidRender","selectedValue","requestAnimationFrame","el","querySelector","CSS","escape","scrollIntoView","block","inline","selectTab","id","isInactive","dsTabChange","emit","render","selectableTabs","getSelectableTabs","showTabs","length","hideTabs","h","Host","key","class","map","tab","index","isTabDivider","selected","type","disabled","undefined","onClick","as","variant","emphasis","color","label","dot","heading"],"sources":["src/wc/components/ShellMobileSectionNav/ShellMobileSectionNav.css?tag=ds-shell-mobile-section-nav&encapsulation=scoped","src/wc/components/ShellMobileSectionNav/ShellMobileSectionNav.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-secondary);\n}\n\n.shell-mobile-section-nav {\n  min-width: 0;\n  min-height: var(--dimension-size-600);\n  display: flex;\n  align-items: center;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background: var(--color-background-primary);\n}\n\n.shell-mobile-section-nav__scroller {\n  width: 100%;\n  min-width: 0;\n  min-height: var(--dimension-size-600);\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding-inline: var(--dimension-space-100);\n  overflow-x: auto;\n  overflow-y: hidden;\n  overscroll-behavior-inline: contain;\n  scrollbar-width: none;\n  box-sizing: border-box;\n}\n\n.shell-mobile-section-nav__scroller::-webkit-scrollbar {\n  display: none;\n}\n\n.shell-mobile-section-nav__tab {\n  appearance: none;\n  flex: 0 0 auto;\n  min-height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  border: 0;\n  border-radius: var(--dimension-radius-100);\n  background: transparent;\n  color: inherit;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  cursor: pointer;\n}\n\n.shell-mobile-section-nav__tab--selected {\n  color: var(--color-foreground-primary);\n}\n\n.shell-mobile-section-nav__tab:disabled {\n  color: var(--color-foreground-tertiary);\n  cursor: default;\n}\n\n.shell-mobile-section-nav__divider {\n  flex: 0 0 auto;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-size-300);\n  background: var(--color-border-tertiary);\n}\n\n.shell-mobile-section-nav__dot {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-bold-brand);\n}\n\n.shell-mobile-section-nav__heading {\n  display: block;\n  min-width: 0;\n  padding-inline: var(--dimension-space-200);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport type { BarNavTab } from '../BarNav/bar-nav-types';\nimport {\n  deriveBarNavValueFromUrl,\n  parseJsonArrayProp,\n} from '../BarNav/bar-nav-utils';\nimport { getSelectableTabs, isTabDivider } from '../TabGroup/tab-item-utils';\n\n@Component({\n  tag: 'ds-shell-mobile-section-nav',\n  styleUrl: 'ShellMobileSectionNav.css',\n  scoped: true,\n})\nexport class ShellMobileSectionNav {\n  @Element() el!: HTMLElement;\n\n  /** Route sections shared with the corresponding desktop BarNav. */\n  @Prop() tabs: BarNavTab[] = [];\n  /** JSON fallback for `tabs`. */\n  @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n  /** Controlled selected tab when URL-derived selection is unavailable. */\n  @Prop() value: string = '';\n  /** Active primary-area label shown when the route has no section row. */\n  @Prop() heading: string | undefined;\n  /** Section base path used to derive the selected route tab. */\n  @Prop() basePath: string = '';\n  /** Current application route. */\n  @Prop() currentUrl: string = '';\n  @Prop() navigationLabel: string = 'Section navigation';\n\n  /** Route intent; the application owns navigation. */\n  @Event() dsTabChange!: EventEmitter<string>;\n\n  private lastScrolledValue = '';\n\n  private get resolvedTabs(): BarNavTab[] {\n    return this.tabsJson\n      ? parseJsonArrayProp<BarNavTab>(this.tabsJson, [])\n      : (this.tabs ?? []);\n  }\n\n  private get urlState() {\n    return deriveBarNavValueFromUrl(this.currentUrl, this.basePath, this.resolvedTabs);\n  }\n\n  private get effectiveValue(): string {\n    if (this.currentUrl && this.basePath) return this.urlState.value;\n    return this.value;\n  }\n\n  componentDidLoad() {\n    this.scrollSelectedIntoView();\n  }\n\n  componentDidRender() {\n    this.scrollSelectedIntoView();\n  }\n\n  private scrollSelectedIntoView() {\n    const selectedValue = this.effectiveValue;\n    if (!selectedValue || selectedValue === this.lastScrolledValue) return;\n    this.lastScrolledValue = selectedValue;\n    requestAnimationFrame(() => {\n      this.el\n        .querySelector<HTMLElement>(`[data-section-id=\"${CSS.escape(selectedValue)}\"]`)\n        ?.scrollIntoView({ block: 'nearest', inline: 'center' });\n    });\n  }\n\n  private selectTab(id: string, isInactive: boolean | undefined) {\n    if (isInactive || id === this.effectiveValue) return;\n    this.dsTabChange.emit(id);\n  }\n\n  render() {\n    const tabs = this.resolvedTabs;\n    const selectableTabs = getSelectableTabs(tabs);\n    const showTabs = selectableTabs.length > 0 && !this.urlState.hideTabs;\n\n    return (\n      <Host>\n        <nav class=\"shell-mobile-section-nav\" aria-label={this.navigationLabel}>\n          {showTabs ? (\n            <div class=\"shell-mobile-section-nav__scroller\">\n              {tabs.map((tab, index) => {\n                if (isTabDivider(tab)) {\n                  return (\n                    <span\n                      class=\"shell-mobile-section-nav__divider\"\n                      aria-hidden=\"true\"\n                      key={`divider-${index}`}\n                    />\n                  );\n                }\n\n                const selected = tab.id === this.effectiveValue;\n                return (\n                  <button\n                    type=\"button\"\n                    class={{\n                      'shell-mobile-section-nav__tab': true,\n                      'shell-mobile-section-nav__tab--selected': selected,\n                      'ds-focus-ring-inset': true,\n                      'ds-interaction-fill': true,\n                    }}\n                    data-section-id={tab.id}\n                    disabled={tab.isInactive}\n                    aria-current={selected ? 'page' : undefined}\n                    onClick={() => this.selectTab(tab.id, tab.isInactive)}\n                  >\n                    <ds-text\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      emphasis={selected}\n                      color=\"inherit\"\n                    >\n                      {tab.label}\n                    </ds-text>\n                    {tab.dot && (\n                      <span class=\"shell-mobile-section-nav__dot\" aria-hidden=\"true\" />\n                    )}\n                  </button>\n                );\n              })}\n            </div>\n          ) : (\n            <ds-text\n              class=\"shell-mobile-section-nav__heading\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              emphasis\n            >\n              {this.heading ?? ''}\n            </ds-text>\n          )}\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kLAAA,MAAMA,EAA2B,IAAM,2vS,MCqB1BC,EAAqBC,EAAA,MAAAD,UAAAE,EALlC,WAAAC,CAAAC,G,mFASUC,KAAAC,KAAoB,GAEMD,KAAAE,SAAmB,GAE7CF,KAAAG,MAAgB,GAIhBH,KAAAI,SAAmB,GAEnBJ,KAAAK,WAAqB,GACrBL,KAAAM,gBAA0B,qBAK1BN,KAAAO,kBAAoB,EA0G7B,CAxGC,gBAAYC,GACV,OAAOR,KAAKE,SACRO,EAA8BT,KAAKE,SAAU,IAC5CF,KAAKC,MAAQ,E,CAGpB,YAAYS,GACV,OAAOC,EAAyBX,KAAKK,WAAYL,KAAKI,SAAUJ,KAAKQ,a,CAGvE,kBAAYI,GACV,GAAIZ,KAAKK,YAAcL,KAAKI,SAAU,OAAOJ,KAAKU,SAASP,MAC3D,OAAOH,KAAKG,K,CAGd,gBAAAU,GACEb,KAAKc,wB,CAGP,kBAAAC,GACEf,KAAKc,wB,CAGC,sBAAAA,GACN,MAAME,EAAgBhB,KAAKY,eAC3B,IAAKI,GAAiBA,IAAkBhB,KAAKO,kBAAmB,OAChEP,KAAKO,kBAAoBS,EACzBC,uBAAsB,KACpBjB,KAAKkB,GACFC,cAA2B,qBAAqBC,IAAIC,OAAOL,SAC1DM,eAAe,CAAEC,MAAO,UAAWC,OAAQ,UAAW,G,CAItD,SAAAC,CAAUC,EAAYC,GAC5B,GAAIA,GAAcD,IAAO1B,KAAKY,eAAgB,OAC9CZ,KAAK4B,YAAYC,KAAKH,E,CAGxB,MAAAI,GACE,MAAM7B,EAAOD,KAAKQ,aAClB,MAAMuB,EAAiBC,EAAkB/B,GACzC,MAAMgC,EAAWF,EAAeG,OAAS,IAAMlC,KAAKU,SAASyB,SAE7D,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,2BAA0B,aAAavC,KAAKM,iBACpD2B,EACCG,EAAA,OAAKG,MAAM,sCACRtC,EAAKuC,KAAI,CAACC,EAAKC,KACd,GAAIC,EAAaF,GAAM,CACrB,OACEL,EAAA,QACEG,MAAM,oCAAmC,cAC7B,OACZD,IAAK,WAAWI,K,CAKtB,MAAME,EAAWH,EAAIf,KAAO1B,KAAKY,eACjC,OACEwB,EAAA,UACES,KAAK,SACLN,MAAO,CACL,gCAAiC,KACjC,0CAA2CK,EAC3C,sBAAuB,KACvB,sBAAuB,MACxB,kBACgBH,EAAIf,GACrBoB,SAAUL,EAAId,WAAU,eACViB,EAAW,OAASG,UAClCC,QAAS,IAAMhD,KAAKyB,UAAUgB,EAAIf,GAAIe,EAAId,aAE1CS,EAAA,WACEa,GAAG,OACHC,QAAQ,mBACRC,SAAUP,EACVQ,MAAM,WAELX,EAAIY,OAENZ,EAAIa,KACHlB,EAAA,QAAMG,MAAM,gCAA+B,cAAa,SAEnD,KAKfH,EAAA,WACEG,MAAM,oCACNU,GAAG,OACHC,QAAQ,mBACRC,SAAQ,MAEPnD,KAAKuD,SAAW,K","ignoreList":[]}

package/dist/components/p-B6Vuayt6.js

@@ -1,2 +0,0 @@
-function n(n,t){const r=n.trim().split(/\s+/)[0]??"";const e=parseFloat(r);if(Number.isNaN(e))return t;if(/ms\s*$/.test(r))return e;if(/s\s*$/.test(r))return e*1e3;return e}function t(n){const t=n.match(/^var\(\s*(--[^),]+)/);if(t)return t[1].trim();if(n.startsWith("--"))return n.trim();return null}function r(r,e){if(typeof document==="undefined")return e;const u=t(r);if(!u)return n(r,e);const o=getComputedStyle(document.documentElement).getPropertyValue(u).trim();return n(o,e)}function e(e,u){if(typeof e==="number")return e;const o=typeof e==="string"&&e.trim()?e.trim():u;const f=t(o);if(f){return r(o,r(u,200))}return n(o,r(u,200))}function u(){return typeof window!=="undefined"&&typeof window.matchMedia==="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}function o(n,t){return u()?0:e(n,t)}export{o as a,u as b,n as p,e as r};
-//# sourceMappingURL=p-B6Vuayt6.js.map

package/dist/components/p-B6Vuayt6.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["parseCssTimeMs","value","fallback","firstToken","trim","split","num","parseFloat","Number","isNaN","test","extractCssCustomProp","ref","varMatch","match","startsWith","readTokenTimeMs","token","document","prop","raw","getComputedStyle","documentElement","getPropertyValue","resolveCssTimeMs","fallbackToken","prefersReducedMotion","window","matchMedia","matches","resolveMotionTimeMs"],"sources":["src/wc/utils/resolve-css-time-ms.ts"],"sourcesContent":["/** Parse a CSS <time> value (or motion shorthand's first token) to milliseconds. */\nexport function parseCssTimeMs(value: string, fallback: number): number {\n  const firstToken = value.trim().split(/\\s+/)[0] ?? '';\n  const num = parseFloat(firstToken);\n  if (Number.isNaN(num)) return fallback;\n  if (/ms\\s*$/.test(firstToken)) return num;\n  if (/s\\s*$/.test(firstToken)) return num * 1000;\n  return num;\n}\n\nfunction extractCssCustomProp(ref: string): string | null {\n  const varMatch = ref.match(/^var\\(\\s*(--[^),]+)/);\n  if (varMatch) return varMatch[1].trim();\n  if (ref.startsWith('--')) return ref.trim();\n  return null;\n}\n\nfunction readTokenTimeMs(token: string, fallback: number): number {\n  if (typeof document === 'undefined') return fallback;\n\n  const prop = extractCssCustomProp(token);\n  if (!prop) return parseCssTimeMs(token, fallback);\n\n  const raw = getComputedStyle(document.documentElement).getPropertyValue(prop).trim();\n  return parseCssTimeMs(raw, fallback);\n}\n\n/**\n * Resolve a duration to milliseconds for JS timers aligned with CSS motion tokens.\n * Accepts numbers (ms), raw times (`200ms`, `0.75s`), or `var(--effect-*)` references.\n */\nexport function resolveCssTimeMs(\n  value: number | string | undefined,\n  fallbackToken: string,\n): number {\n  if (typeof value === 'number') return value;\n\n  const token = typeof value === 'string' && value.trim() ? value.trim() : fallbackToken;\n  const prop = extractCssCustomProp(token);\n\n  if (prop) {\n    return readTokenTimeMs(token, readTokenTimeMs(fallbackToken, 200));\n  }\n\n  return parseCssTimeMs(token, readTokenTimeMs(fallbackToken, 200));\n}\n\n/** Whether the user has requested reduced non-essential motion. */\nexport function prefersReducedMotion(): boolean {\n  return typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function' &&\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Resolve an animation-coupled duration. Returns zero under reduced motion so\n * JS cleanup stays synchronized with CSS that removes the corresponding motion.\n */\nexport function resolveMotionTimeMs(\n  value: number | string | undefined,\n  fallbackToken: string,\n): number {\n  return prefersReducedMotion() ? 0 : resolveCssTimeMs(value, fallbackToken);\n}\n"],"mappings":"AACM,SAAUA,EAAeC,EAAeC,GAC5C,MAAMC,EAAaF,EAAMG,OAAOC,MAAM,OAAO,IAAM,GACnD,MAAMC,EAAMC,WAAWJ,GACvB,GAAIK,OAAOC,MAAMH,GAAM,OAAOJ,EAC9B,GAAI,SAASQ,KAAKP,GAAa,OAAOG,EACtC,GAAI,QAAQI,KAAKP,GAAa,OAAOG,EAAM,IAC3C,OAAOA,CACT,CAEA,SAASK,EAAqBC,GAC5B,MAAMC,EAAWD,EAAIE,MAAM,uBAC3B,GAAID,EAAU,OAAOA,EAAS,GAAGT,OACjC,GAAIQ,EAAIG,WAAW,MAAO,OAAOH,EAAIR,OACrC,OAAO,IACT,CAEA,SAASY,EAAgBC,EAAef,GACtC,UAAWgB,WAAa,YAAa,OAAOhB,EAE5C,MAAMiB,EAAOR,EAAqBM,GAClC,IAAKE,EAAM,OAAOnB,EAAeiB,EAAOf,GAExC,MAAMkB,EAAMC,iBAAiBH,SAASI,iBAAiBC,iBAAiBJ,GAAMf,OAC9E,OAAOJ,EAAeoB,EAAKlB,EAC7B,CAMM,SAAUsB,EACdvB,EACAwB,GAEA,UAAWxB,IAAU,SAAU,OAAOA,EAEtC,MAAMgB,SAAehB,IAAU,UAAYA,EAAMG,OAASH,EAAMG,OAASqB,EACzE,MAAMN,EAAOR,EAAqBM,GAElC,GAAIE,EAAM,CACR,OAAOH,EAAgBC,EAAOD,EAAgBS,EAAe,K,CAG/D,OAAOzB,EAAeiB,EAAOD,EAAgBS,EAAe,KAC9D,C,SAGgBC,IACd,cAAcC,SAAW,oBAChBA,OAAOC,aAAe,YAC7BD,OAAOC,WAAW,oCAAoCC,OAC1D,CAMM,SAAUC,EACd7B,EACAwB,GAEA,OAAOC,IAAyB,EAAIF,EAAiBvB,EAAOwB,EAC9D,Q","ignoreList":[]}

package/dist/components/p-BPS9VExm.js

@@ -1,2 +0,0 @@
-import{p as t,H as i,h as s,a as o,t as n}from"./index.js";import{c as e}from"./p-B8C_yfLQ.js";import{d as r}from"./p-BwGnhInj.js";import{a,T as d}from"./p-C_0Q8Cnp.js";import{r as h}from"./p-BJMRBHKW.js";import{r as l,a as c}from"./p-B6Vuayt6.js";import{C as p}from"./p-Cx-ywr1e.js";const u=new Set(["⌘","⇧","⌥","⌃"]);const m={alt:"⌥",cmd:"⌘",command:"⌘",control:"⌃",ctrl:"⌃",option:"⌥",shift:"⇧"};function f(t){return m[t.toLowerCase()]??t}function g(t){const i=t.trim();if(!i)return[];if(i.includes("+")){return i.split("+").map((t=>t.trim())).filter(Boolean).map(f)}if(/\s/.test(i)){return i.split(/\s+/).filter(Boolean).map(f)}const s=Array.from(i);const o=[];while(s.length>1&&u.has(s[0])){o.push(s.shift())}o.push(s.join(""));return o}const v=()=>`.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.key-hint-group.sc-ds-tooltip{display:inline-flex;align-items:center;gap:var(--dimension-stroke-width-012);width:max-content;flex-shrink:0}.key-hint.sc-ds-tooltip{box-sizing:border-box;min-width:var(--ds-control-icon, var(--dimension-iconography-md));width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));padding-inline:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-secondary)}.key-hint--wide.sc-ds-tooltip{width:calc(var(--ds-control-icon, var(--dimension-iconography-md)) * 1.5)}.key-hint__label.sc-ds-tooltip{display:inline-flex;width:max-content;min-width:max-content;font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);line-height:1;font-weight:var(--typography-weight-regular);letter-spacing:0;text-transform:uppercase;color:inherit}.ds-control--xs.sc-ds-tooltip .key-hint__label.sc-ds-tooltip{font-size:calc(var(--typography-fontsize-xs) * 0.78)}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-inner.sc-ds-tooltip>ds-text.sc-ds-tooltip{flex-shrink:0;min-width:max-content;max-width:none;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.tooltip-popup.sc-ds-tooltip,.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:none;opacity:0}}`;const y={md:d.size400,sm:d.size300,xs:d.size200};let b=0;let x=0;let w=null;function C(t){const i=document.createElement("ds-text");i.as="span";i.variant=t.variant;i.emphasis=t.emphasis??false;i.color=t.color??"inherit";if(t.wrap)i.wrap=t.wrap;i.textContent=t.text;return i}function k(t){t.style.flexShrink="0";t.style.minWidth="max-content";t.style.maxWidth="none";t.style.padding="0 var(--ds-control-label-inset, var(--dimension-space-025))";t.style.color="var(--color-foreground-primary)"}const O=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=a.space050;this.alignOffset=0;this.delay=d.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++x}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.positionObserver=null;this.anchorObserver=null;this.positionFrame=null;this.skipEnterAnimation=false;this.isOpen=false;this.lastInteractionWasKeyboard=false;this.pointerEnterHandler=t=>{if(t.pointerType==="touch")return;this.show()};this.pointerLeaveHandler=t=>{if(t.pointerType==="touch")return;this.hide()};this.pointerDownHandler=t=>{this.lastInteractionWasKeyboard=false;if(t.pointerType==="touch"&&(this.isOpen||this.popupEl))this.hideInstant()};this.keyDownHandler=()=>{this.lastInteractionWasKeyboard=true};this.focusHandler=()=>{if(this.lastInteractionWasKeyboard||this.anchor?.matches(":focus-visible"))this.show()};this.blurHandler=t=>{const i=t.relatedTarget;if(i&&this.anchor?.contains(i))return;this.hide()};this.scrollResizeHandler=()=>{if(this.positionFrame!==null)return;this.positionFrame=requestAnimationFrame((()=>{this.positionFrame=null;this.calculatePosition()}))};this.escapeHandler=t=>{if(t.key!=="Escape"||!this.isOpen)return;t.preventDefault();this.hide()};this.handleSlotChange=()=>{const t=this.el.querySelector("slot");const i=t?.assignedElements?.()[0]??this.el.firstElementChild;if(i===this.anchor)return;if(this.isOpen||this.popupEl)this.hideInstant();this.unbindAnchor();this.bindAnchor()}}componentDidLoad(){this.bindAnchor();this.anchorObserver=new MutationObserver((()=>this.handleSlotChange()));this.anchorObserver.observe(this.el,{childList:true})}disconnectedCallback(){if(w===this)w=null;this.anchorObserver?.disconnect();this.anchorObserver=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.schedulePosition()}get viewportPadPx(){return h(d.space050,d.space050)}get sideOffsetPx(){return h(this.sideOffset,d.space050)}get alignOffsetPx(){return h(this.alignOffset,0)}get hoverDelayMs(){return l(this.delay,d.animationDelayMedium3)}get instantReopenMs(){return l(d.animationDurationMedium1,d.animationDurationMedium1)}get fadeOutMs(){return c(d.motionShort3,d.animationDurationShort3)}get tooltipFallbackWidthPx(){return h(d.tooltipFallbackWidth,d.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=y[this.size];return h(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const s=i[0]??this.el.firstElementChild;if(!s||s===this.anchor)return;this.anchor=s;s.addEventListener("pointerenter",this.pointerEnterHandler);s.addEventListener("pointerleave",this.pointerLeaveHandler);s.addEventListener("pointerdown",this.pointerDownHandler);s.addEventListener("keydown",this.keyDownHandler);s.addEventListener("focusin",this.focusHandler);s.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.unlinkDescribedBy();this.anchor.removeEventListener("pointerenter",this.pointerEnterHandler);this.anchor.removeEventListener("pointerleave",this.pointerLeaveHandler);this.anchor.removeEventListener("pointerdown",this.pointerDownHandler);this.anchor.removeEventListener("keydown",this.keyDownHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}linkDescribedBy(){if(!this.anchor||!this.popupEl)return;const t=new Set((this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter(Boolean));t.add(this.tooltipId);this.anchor.setAttribute("aria-describedby",Array.from(t).join(" "))}unlinkDescribedBy(){if(!this.anchor)return;const t=(this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter((t=>t&&t!==this.tooltipId));if(t.length)this.anchor.setAttribute("aria-describedby",t.join(" "));else this.anchor.removeAttribute("aria-describedby")}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}setupOpenListeners(){window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler);document.addEventListener("keydown",this.escapeHandler)}teardownOpenListeners(){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);document.removeEventListener("keydown",this.escapeHandler);if(this.positionFrame!==null){cancelAnimationFrame(this.positionFrame);this.positionFrame=null}}destroyPopup(){this.teardownOpenListeners();this.positionObserver?.disconnect();this.positionObserver=null;this.unlinkDescribedBy();if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}schedulePosition(){if(!this.popupEl)return;const t=()=>{const t=this.popupEl?.querySelector(":scope > .tooltip-inner > ds-text");if(t instanceof i)k(t)};requestAnimationFrame((()=>{t();this.calculatePosition();requestAnimationFrame((()=>{t();this.calculatePosition()}))}));this.positionObserver?.disconnect();this.positionObserver=new ResizeObserver((()=>this.calculatePosition()));this.positionObserver.observe(this.popupEl);if(this.anchor)this.positionObserver.observe(this.anchor)}hideInstant(){this.clearTimers();b=Date.now();if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-b<this.instantReopenMs;if(w&&w!==this){w.hideInstant();t=true}w=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;b=Date.now();if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");if(this.fadeOutMs===0){if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false;return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.setupOpenListeners();this.linkDescribedBy();this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.schedulePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=p[this.size];const i=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const s="sc-ds-tooltip";const o=document.createElement("div");o.className=`tooltip-inner ${i} ${s}`;const n=t=>{if(!this.shortcutKey||this.shortcutKeyPosition!==t)return;const i=document.createElement("span");i.className=`key-hint-group ${s}`;i.setAttribute("aria-hidden","true");for(const t of g(this.shortcutKey)){const o=document.createElement("span");const n=Array.from(t).length>1?" key-hint--wide":"";o.className=`key-hint${n} ${s}`;const e=document.createElement("span");e.className=`key-hint__label ${s}`;e.textContent=t;o.appendChild(e);i.appendChild(o)}o.appendChild(i)};n("start");const e=C({variant:t,wrap:"nowrap",text:this.label});k(e);o.appendChild(e);n("end");this.popupEl.replaceChildren(o)}calculatePosition(){if(!this.anchor||!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const s=t.offsetWidth||this.tooltipFallbackWidthPx;const o=t.offsetHeight||this.tooltipFallbackHeightPx;const{x:n,y:r,resolvedSide:a}=e({anchorRect:i,popupWidth:s,popupHeight:o,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});t.dataset.side=a;t.style.transform=`translate(${Math.round(n)}px, ${Math.round(r)}px)`}render(){return s(o,{key:"242a699f2275fe46302623161cd4e0bde7d94fb8",style:{display:"contents"}},s("slot",{key:"802d61fb79aa7dcd10d719adb3ab99b748ba2d70",onSlotchange:this.handleSlotChange}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return v()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function P(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),O)}break;case"ds-text":if(!customElements.get(n(t))){r()}break}}))}P();export{O as T,P as d};
-//# sourceMappingURL=p-BPS9VExm.js.map

package/dist/components/p-BVV_rlIP.js

@@ -1,2 +0,0 @@
-import{p as s,H as e,c as i,h as r,a as t,t as n}from"./index.js";import{d as a}from"./p-BwGnhInj.js";const d=()=>`.sc-ds-breadcrumb-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-breadcrumb-h:focus-visible,.ds-focus-ring.sc-ds-breadcrumb:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-breadcrumb-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-breadcrumb{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-breadcrumb-h:focus-visible,.ds-focus-ring-inset.sc-ds-breadcrumb:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-breadcrumb-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-breadcrumb:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-breadcrumb-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-breadcrumb{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-breadcrumb-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-breadcrumb::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-breadcrumb-h{position:relative;display:block;min-width:0;box-sizing:border-box}.breadcrumb.sc-ds-breadcrumb{inline-size:100%;min-width:0}.breadcrumb__list.sc-ds-breadcrumb{display:flex;align-items:center;box-sizing:border-box;inline-size:100%;min-width:0;margin:0;padding:0;overflow:hidden;list-style:none}.breadcrumb__item.sc-ds-breadcrumb{display:flex;flex:0 0 auto;align-items:center;min-width:0}.breadcrumb__separator.sc-ds-breadcrumb{flex:0 0 auto;margin-inline:var(--dimension-space-050);user-select:none}.breadcrumb__link.sc-ds-breadcrumb,.breadcrumb__current.sc-ds-breadcrumb{display:inline-flex;flex:0 0 auto;min-width:0;overflow:hidden;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-secondary);font:inherit;text-decoration:none}.breadcrumb__link.sc-ds-breadcrumb{cursor:pointer}.breadcrumb__link.sc-ds-breadcrumb:hover .breadcrumb__label.sc-ds-breadcrumb{text-decoration:underline;text-decoration-color:var(--color-foreground-quaternary);text-underline-offset:var(--dimension-space-025);text-decoration-thickness:var(--dimension-stroke-width-012)}.breadcrumb__label.sc-ds-breadcrumb{display:inline-block;inline-size:var(--breadcrumb-label-width, auto);min-width:0}.breadcrumb__measurements.sc-ds-breadcrumb{position:absolute;inset:0 auto auto 0;visibility:hidden;pointer-events:none;white-space:nowrap}.breadcrumb__measurement.sc-ds-breadcrumb{display:inline-block;inline-size:max-content;max-inline-size:none}.breadcrumb__accessible-label.sc-ds-breadcrumb{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}`;const c=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=i(this,"dsSelect");this.items=[];this.ariaLabel="Breadcrumb";this.labelWidths=[];this.collapsedLabels=[];this.measurementElements=[];this.separatorElements=[]}componentDidLoad(){this.observeContainer();this.scheduleMeasurement();void document.fonts?.ready.then((()=>this.scheduleMeasurement()))}componentDidRender(){this.observeContainer();this.scheduleMeasurement()}disconnectedCallback(){this.resizeObserver?.disconnect();this.observedElement=undefined;if(this.measurementFrame!==undefined)cancelAnimationFrame(this.measurementFrame)}handleItemsChange(){this.labelWidths=[];this.collapsedLabels=[];this.scheduleMeasurement()}observeContainer(){if(!this.navElement||this.observedElement===this.navElement)return;this.resizeObserver??(this.resizeObserver=new ResizeObserver((()=>this.scheduleMeasurement())));this.resizeObserver.disconnect();this.resizeObserver.observe(this.navElement);this.observedElement=this.navElement}scheduleMeasurement(){if(this.measurementFrame!==undefined)return;this.measurementFrame=requestAnimationFrame((()=>{this.measurementFrame=undefined;this.measureLabels()}))}measureLabels(){if(!this.navElement||!this.listElement||!this.ellipsisMeasurement||this.items.length===0)return;const s=this.items.map(((s,e)=>this.measurementElements[e]?.getBoundingClientRect().width??0));const e=this.ellipsisMeasurement.getBoundingClientRect().width;if(s.some((s=>s===0))||e===0)return;const i=this.separatorElements.reduce(((s,e)=>{const i=getComputedStyle(e);return s+e.getBoundingClientRect().width+Number.parseFloat(i.marginInlineStart)+Number.parseFloat(i.marginInlineEnd)}),0);const r=Math.max(0,this.navElement.clientWidth-i);const t=s.map((s=>Math.min(s,e)));const n=[...t];let a=Math.max(0,r-t.reduce(((s,e)=>s+e),0));for(let e=s.length-1;e>=0&&a>0;e-=1){const i=Math.min(a,s[e]-t[e]);n[e]+=i;a-=i}const d=n.length!==this.labelWidths.length||n.some(((s,e)=>Math.abs(s-(this.labelWidths[e]??0))>.25));const c=n.map(((e,i)=>s[i]>t[i]&&Math.abs(e-t[i])<=.25));const o=c.length!==this.collapsedLabels.length||c.some(((s,e)=>s!==this.collapsedLabels[e]));if(d)this.labelWidths=n;if(o)this.collapsedLabels=c}handleSelect(s,e){const i=this.dsSelect.emit({item:s,originalEvent:e});if(i.defaultPrevented)e.preventDefault()}renderItem(s,e){const i=this.labelWidths[e];const t=this.collapsedLabels[e]??false;const n=[r("ds-text",{class:"breadcrumb__label",as:"span",variant:"text-caption",color:"inherit",lineTruncation:t?"none":1,"aria-hidden":t?"true":undefined,style:i===undefined?undefined:{"--breadcrumb-label-width":`${i}px`}},t?"…":s.label),t?r("span",{class:"breadcrumb__accessible-label"},s.label):null];if(s.isCurrent){return r("span",{class:"breadcrumb__current","aria-current":"page","aria-label":s.ariaLabel},n)}if(s.href){return r("a",{class:"breadcrumb__link ds-focus-ring",href:s.href,"aria-label":s.ariaLabel,onClick:e=>this.handleSelect(s,e)},n)}return r("button",{class:"breadcrumb__link ds-focus-ring",type:"button","aria-label":s.ariaLabel,onClick:e=>this.handleSelect(s,e)},n)}render(){if(this.items.length===0)return null;this.measurementElements=[];this.separatorElements=[];return r(t,null,r("nav",{class:"breadcrumb","aria-label":this.ariaLabel,ref:s=>{this.navElement=s}},r("div",{class:"breadcrumb__measurements","aria-hidden":"true"},this.items.map(((s,e)=>r("ds-text",{class:"breadcrumb__measurement",as:"span",variant:"text-caption",color:"inherit",ref:s=>{if(s)this.measurementElements[e]=s}},s.label))),r("ds-text",{class:"breadcrumb__measurement",as:"span",variant:"text-caption",color:"inherit",ref:s=>{this.ellipsisMeasurement=s}},"…")),r("ol",{class:"breadcrumb__list",ref:s=>{this.listElement=s}},this.items.map(((s,e)=>r("li",{class:"breadcrumb__item",key:s.id},e>0?r("ds-text",{class:"breadcrumb__separator",as:"span",variant:"text-caption",color:"tertiary","aria-hidden":"true",ref:s=>{if(s)this.separatorElements[e-1]=s}},"/"):null,this.renderItem(s,e)))))))}static get watchers(){return{items:[{handleItemsChange:0}]}}static get style(){return d()}},[2,"ds-breadcrumb",{items:[16],ariaLabel:[1,"aria-label"],labelWidths:[32],collapsedLabels:[32]},undefined,{items:[{handleItemsChange:0}]}]);function o(){if(typeof customElements==="undefined"){return}const s=["ds-breadcrumb","ds-text"];s.forEach((s=>{switch(s){case"ds-breadcrumb":if(!customElements.get(n(s))){customElements.define(n(s),c)}break;case"ds-text":if(!customElements.get(n(s))){a()}break}}))}o();export{c as B,o as d};
-//# sourceMappingURL=p-BVV_rlIP.js.map

package/dist/components/p-BVV_rlIP.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["breadcrumbCss","Breadcrumb","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","ariaLabel","labelWidths","collapsedLabels","measurementElements","separatorElements","componentDidLoad","observeContainer","scheduleMeasurement","document","fonts","ready","then","componentDidRender","disconnectedCallback","resizeObserver","disconnect","observedElement","undefined","measurementFrame","cancelAnimationFrame","handleItemsChange","navElement","ResizeObserver","observe","requestAnimationFrame","measureLabels","listElement","ellipsisMeasurement","length","naturalWidths","map","_","index","getBoundingClientRect","width","ellipsisWidth","some","separatorWidth","reduce","total","separator","styles","getComputedStyle","Number","parseFloat","marginInlineStart","marginInlineEnd","availableWidth","Math","max","clientWidth","minimumWidths","min","nextWidths","remainingWidth","extraWidth","widthsChanged","abs","nextCollapsedLabels","collapsedLabelsChanged","isCollapsed","handleSelect","item","originalEvent","event","dsSelect","emit","defaultPrevented","preventDefault","renderItem","allocatedWidth","label","h","class","as","variant","color","lineTruncation","style","isCurrent","href","onClick","type","render","Host","ref","element","key","id"],"sources":["src/wc/components/Breadcrumb/Breadcrumb.css?tag=ds-breadcrumb&encapsulation=scoped","src/wc/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n\n:host {\n  position: relative;\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.breadcrumb {\n  inline-size: 100%;\n  min-width: 0;\n}\n\n.breadcrumb__list {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  list-style: none;\n}\n\n.breadcrumb__item {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  min-width: 0;\n}\n\n.breadcrumb__separator {\n  flex: 0 0 auto;\n  margin-inline: var(--dimension-space-050);\n  user-select: none;\n}\n\n.breadcrumb__link,\n.breadcrumb__current {\n  display: inline-flex;\n  flex: 0 0 auto;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  font: inherit;\n  text-decoration: none;\n}\n\n.breadcrumb__link {\n  cursor: pointer;\n}\n\n.breadcrumb__link:hover .breadcrumb__label {\n  text-decoration: underline;\n  text-decoration-color: var(--color-foreground-quaternary);\n  text-underline-offset: var(--dimension-space-025);\n  text-decoration-thickness: var(--dimension-stroke-width-012);\n}\n\n.breadcrumb__label {\n  display: inline-block;\n  inline-size: var(--breadcrumb-label-width, auto);\n  min-width: 0;\n}\n\n.breadcrumb__measurements {\n  position: absolute;\n  inset: 0 auto auto 0;\n  visibility: hidden;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.breadcrumb__measurement {\n  display: inline-block;\n  inline-size: max-content;\n  max-inline-size: none;\n}\n\n.breadcrumb__accessible-label {\n  position: absolute;\n  /* stylelint-disable declaration-property-value-disallowed-list -- classic visually-hidden clip pattern */\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n  /* stylelint-enable declaration-property-value-disallowed-list */\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { BreadcrumbItem, BreadcrumbSelectDetail } from './breadcrumb-types';\n\n@Component({\n  tag: 'ds-breadcrumb',\n  styleUrl: 'Breadcrumb.css',\n  scoped: true,\n})\nexport class Breadcrumb {\n  /** Ordered path from the broadest ancestor to the nearest page. */\n  @Prop() items: BreadcrumbItem[] = [];\n\n  /** Accessible name for the breadcrumb navigation landmark. */\n  @Prop() ariaLabel: string = 'Breadcrumb';\n\n  /** Emitted when an interactive breadcrumb item is activated. Prevent to cancel native navigation. */\n  @Event({ cancelable: true }) dsSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n  @State() private labelWidths: number[] = [];\n  @State() private collapsedLabels: boolean[] = [];\n\n  private navElement?: HTMLElement;\n  private listElement?: HTMLOListElement;\n  private measurementElements: HTMLElement[] = [];\n  private separatorElements: HTMLElement[] = [];\n  private ellipsisMeasurement?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private observedElement?: HTMLElement;\n  private measurementFrame?: number;\n\n  componentDidLoad() {\n    this.observeContainer();\n    this.scheduleMeasurement();\n    void document.fonts?.ready.then(() => this.scheduleMeasurement());\n  }\n\n  componentDidRender() {\n    this.observeContainer();\n    this.scheduleMeasurement();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.observedElement = undefined;\n    if (this.measurementFrame !== undefined) cancelAnimationFrame(this.measurementFrame);\n  }\n\n  @Watch('items')\n  handleItemsChange() {\n    this.labelWidths = [];\n    this.collapsedLabels = [];\n    this.scheduleMeasurement();\n  }\n\n  private observeContainer() {\n    if (!this.navElement || this.observedElement === this.navElement) return;\n    this.resizeObserver ??= new ResizeObserver(() => this.scheduleMeasurement());\n    this.resizeObserver.disconnect();\n    this.resizeObserver.observe(this.navElement);\n    this.observedElement = this.navElement;\n  }\n\n  private scheduleMeasurement() {\n    if (this.measurementFrame !== undefined) return;\n    this.measurementFrame = requestAnimationFrame(() => {\n      this.measurementFrame = undefined;\n      this.measureLabels();\n    });\n  }\n\n  private measureLabels() {\n    if (\n      !this.navElement ||\n      !this.listElement ||\n      !this.ellipsisMeasurement ||\n      this.items.length === 0\n    ) return;\n\n    const naturalWidths = this.items.map(\n      (_, index) => this.measurementElements[index]?.getBoundingClientRect().width ?? 0\n    );\n    const ellipsisWidth = this.ellipsisMeasurement.getBoundingClientRect().width;\n    if (naturalWidths.some(width => width === 0) || ellipsisWidth === 0) return;\n\n    const separatorWidth = this.separatorElements.reduce((total, separator) => {\n      const styles = getComputedStyle(separator);\n      return (\n        total +\n        separator.getBoundingClientRect().width +\n        Number.parseFloat(styles.marginInlineStart) +\n        Number.parseFloat(styles.marginInlineEnd)\n      );\n    }, 0);\n    const availableWidth = Math.max(0, this.navElement.clientWidth - separatorWidth);\n    const minimumWidths = naturalWidths.map(width => Math.min(width, ellipsisWidth));\n    const nextWidths = [...minimumWidths];\n    let remainingWidth = Math.max(\n      0,\n      availableWidth - minimumWidths.reduce((total, width) => total + width, 0)\n    );\n\n    // Protect the current/newest location. Extra width is granted newest-to-oldest,\n    // so ancestors collapse in path order as the available space decreases.\n    for (let index = naturalWidths.length - 1; index >= 0 && remainingWidth > 0; index -= 1) {\n      const extraWidth = Math.min(\n        remainingWidth,\n        naturalWidths[index] - minimumWidths[index]\n      );\n      nextWidths[index] += extraWidth;\n      remainingWidth -= extraWidth;\n    }\n\n    const widthsChanged =\n      nextWidths.length !== this.labelWidths.length ||\n      nextWidths.some(\n        (width, index) => Math.abs(width - (this.labelWidths[index] ?? 0)) > 0.25\n      );\n    const nextCollapsedLabels = nextWidths.map(\n      (width, index) =>\n        naturalWidths[index] > minimumWidths[index] &&\n        Math.abs(width - minimumWidths[index]) <= 0.25\n    );\n    const collapsedLabelsChanged =\n      nextCollapsedLabels.length !== this.collapsedLabels.length ||\n      nextCollapsedLabels.some(\n        (isCollapsed, index) => isCollapsed !== this.collapsedLabels[index]\n      );\n    if (widthsChanged) this.labelWidths = nextWidths;\n    if (collapsedLabelsChanged) this.collapsedLabels = nextCollapsedLabels;\n  }\n\n  private handleSelect(item: BreadcrumbItem, originalEvent: MouseEvent) {\n    const event = this.dsSelect.emit({ item, originalEvent });\n    if (event.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderItem(item: BreadcrumbItem, index: number) {\n    const allocatedWidth = this.labelWidths[index];\n    const isCollapsed = this.collapsedLabels[index] ?? false;\n    const label = (\n      [\n        <ds-text\n          class=\"breadcrumb__label\"\n          as=\"span\"\n          variant=\"text-caption\"\n          color=\"inherit\"\n          lineTruncation={isCollapsed ? 'none' : 1}\n          aria-hidden={isCollapsed ? 'true' : undefined}\n          style={\n            allocatedWidth === undefined\n              ? undefined\n              : { '--breadcrumb-label-width': `${allocatedWidth}px` }\n          }\n        >\n          {isCollapsed ? '…' : item.label}\n        </ds-text>,\n        isCollapsed ? <span class=\"breadcrumb__accessible-label\">{item.label}</span> : null,\n      ]\n    );\n\n    if (item.isCurrent) {\n      return (\n        <span class=\"breadcrumb__current\" aria-current=\"page\" aria-label={item.ariaLabel}>\n          {label}\n        </span>\n      );\n    }\n\n    if (item.href) {\n      return (\n        <a\n          class=\"breadcrumb__link ds-focus-ring\"\n          href={item.href}\n          aria-label={item.ariaLabel}\n          onClick={(event: MouseEvent) => this.handleSelect(item, event)}\n        >\n          {label}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        class=\"breadcrumb__link ds-focus-ring\"\n        type=\"button\"\n        aria-label={item.ariaLabel}\n        onClick={(event: MouseEvent) => this.handleSelect(item, event)}\n      >\n        {label}\n      </button>\n    );\n  }\n\n  render() {\n    if (this.items.length === 0) return null;\n\n    this.measurementElements = [];\n    this.separatorElements = [];\n\n    return (\n      <Host>\n        <nav\n          class=\"breadcrumb\"\n          aria-label={this.ariaLabel}\n          ref={element => {\n            this.navElement = element;\n          }}\n        >\n          <div class=\"breadcrumb__measurements\" aria-hidden=\"true\">\n            {this.items.map((item, index) => (\n              <ds-text\n                class=\"breadcrumb__measurement\"\n                as=\"span\"\n                variant=\"text-caption\"\n                color=\"inherit\"\n                ref={element => {\n                  if (element) this.measurementElements[index] = element;\n                }}\n              >\n                {item.label}\n              </ds-text>\n            ))}\n            <ds-text\n              class=\"breadcrumb__measurement\"\n              as=\"span\"\n              variant=\"text-caption\"\n              color=\"inherit\"\n              ref={element => {\n                this.ellipsisMeasurement = element;\n              }}\n            >\n              …\n            </ds-text>\n          </div>\n          <ol\n            class=\"breadcrumb__list\"\n            ref={element => {\n              this.listElement = element;\n            }}\n          >\n            {this.items.map((item, index) => (\n              <li class=\"breadcrumb__item\" key={item.id}>\n                {index > 0 ? (\n                  <ds-text\n                    class=\"breadcrumb__separator\"\n                    as=\"span\"\n                    variant=\"text-caption\"\n                    color=\"tertiary\"\n                    aria-hidden=\"true\"\n                    ref={element => {\n                      if (element) this.separatorElements[index - 1] = element;\n                    }}\n                  >\n                    /\n                  </ds-text>\n                ) : null}\n                {this.renderItem(item, index)}\n              </li>\n            ))}\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-BhxwpOH8.js

@@ -1,2 +0,0 @@
-import{p as t,H as o,c as n,h as i,a as d,t as e}from"./index.js";import{d as l}from"./p-BAfG3M8z.js";import{d as r}from"./p-Cpr3K41-.js";import{d as s}from"./p-BwGnhInj.js";import{C as a}from"./p-Cx-ywr1e.js";import{c}from"./p-DuFm-ieS.js";const u=()=>`.sc-ds-button-filled-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-button-filled-h:focus-visible,.ds-focus-ring.sc-ds-button-filled:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-filled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-filled{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-button-filled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-filled:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-filled-h,.ds-interaction-fill.sc-ds-button-filled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-button-filled-h,.ds-interaction-fill--on-faint.sc-ds-button-filled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-button-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-button-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-button-filled-h,.ds-interaction-fill--on-translucent.sc-ds-button-filled{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-button-filled-h,.ds-interaction-fill--on-inverted.sc-ds-button-filled{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-button-filled-h,.ds-interaction-fill--on-media.sc-ds-button-filled{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled,.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled,.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none;--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand);--ds-button-filled-border:var(--color-border-secondary)}.button-filled-host--icon.ds-control-width--hug.sc-ds-button-filled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.button-filled-host--icon.ds-control-width--fill.sc-ds-button-filled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-filled-h .button-filled.sc-ds-button-filled{width:100%}.button-filled.sc-ds-button-filled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-2),     color var(--effect-motion-short-2),     transform var(--effect-motion-short-2)}.button-filled--icon.sc-ds-button-filled{width:100%;height:100%;padding:0}.button-filled--rounded.sc-ds-button-filled{--ds-control-radius:var(--dimension-radius-half)}.button-filled--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-button-filled-border)}.button-filled--bordered.sc-ds-button-filled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.button-filled--background-medium.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-medium-background-secondary)}.button-filled--background-bold.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-bold-background-secondary)}.button-filled--background-strong.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-strong-background-secondary)}.button-filled--background-translucent.sc-ds-button-filled{--ds-button-filled-border:var(--color-translucent-border-secondary)}.button-filled--background-inverted.sc-ds-button-filled{--ds-button-filled-border:var(--color-inverted-border-secondary)}.button-filled--background-media.sc-ds-button-filled{--ds-button-filled-border:var(--color-media-border-secondary)}.button-filled--background-always-dark.sc-ds-button-filled{--ds-button-filled-border:var(--color-always-dark-border-secondary)}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:scale(var(--dimension-scale-subtle))}@media (prefers-reduced-motion: reduce){.button-filled.sc-ds-button-filled{transition:background-color var(--effect-motion-short-2),       color var(--effect-motion-short-2)}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:none}}.button-filled__icon-wrap.sc-ds-button-filled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-filled__label.sc-ds-button-filled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-filled__label--loading.sc-ds-button-filled{visibility:hidden}.button-filled.sc-ds-button-filled>.button-filled__loader-overlay.sc-ds-button-filled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}`;const f={md:"md",sm:"sm",xs:"xs"};const b=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.intent="brand";this.contrast="bold";this.hasBorder=false;this.rounded=false;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=t=>{if(this.isInactive||this.isLoading){t.preventDefault();t.stopPropagation();return}this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}render(){const t=a[this.size];const o=f[this.size];const n={"button-filled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","button-filled--bordered":this.hasBorder,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-filled--icon":this.variant==="icon","button-filled--label":this.variant==="label","button-filled--icon-label":this.variant==="icon-label","button-filled--rounded":this.rounded,[`button-filled--background-${this.background}`]:this.background!==undefined,[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:this.contrast!=="bold"};return i(d,{key:"6c5ef66ea2c1297960b27de4c7d800dc21a02f37",class:{"button-filled-host":true,"button-filled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...c(this.width)},tabIndex:-1},i("button",{key:"f2437cb5bb65e96a8aaba1ce77c341d081efba3a",ref:t=>{this.buttonEl=t??null},type:this.type,class:n,disabled:this.isInactive,"aria-label":this.accessibleName,"aria-busy":this.isLoading?"true":undefined,"aria-disabled":this.isLoading?"true":undefined,onClick:this.handleClick},this.showIcon&&i("span",{key:"229d299465213a2fcc5ed84e33f3b74b4e629e0c",class:"button-filled__icon-wrap ds-interaction-fill__content"},this.isLoading?i("ds-loader",{size:o,color:"inherit"}):i("ds-icon",{name:this.icon,size:o,color:"inherit"})),this.showLabel&&i("ds-text",{key:"fd527c19014e7fcdabb283ef8eb77a95dc67673d",class:{"button-filled__label":true,"button-filled__label--loading":this.isLoading&&this.variant==="label","ds-interaction-fill__content":true},as:"span",variant:t,emphasis:true,color:"inherit"},this.label),this.isLoading&&this.variant==="label"&&i("span",{key:"57f59189ee7a5f5b19f33fa92f7881cc82013eb3",class:"button-filled__loader-overlay ds-interaction-fill__content"},i("ds-loader",{key:"cc60149fa7318dafcda71a0fecf78137d33787f1",size:o,color:"inherit"}))))}get el(){return this}static get style(){return u()}},[2,"ds-button-filled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],intent:[1],contrast:[1],hasBorder:[4,"has-border"],background:[1],rounded:[4],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],ariaLabel:[1,"aria-label"],setFocus:[64]}]);function g(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(e(t))){customElements.define(e(t),b)}break;case"ds-icon":if(!customElements.get(e(t))){l()}break;case"ds-loader":if(!customElements.get(e(t))){r()}break;case"ds-text":if(!customElements.get(e(t))){s()}break}}))}g();export{b as B,g as d};
-//# sourceMappingURL=p-BhxwpOH8.js.map

package/dist/components/p-Biz6xo-z.js

@@ -1,2 +0,0 @@
-import{p as s,H as i,c,h as e,a as t,t as r}from"./index.js";function o(s,i){return i.length>0?i.flatMap((s=>s.options)):[...s]}function a(s,i){const c=s.findIndex((s=>s.value===i&&!s.isInactive));if(c>=0)return c;return s.findIndex((s=>!s.isInactive))}function n(s,i,c){const e=s.map(((s,i)=>({option:s,index:i}))).filter((({option:s})=>!s.isInactive)).map((({index:s})=>s));if(e.length===0)return null;if(c==="Home")return e[0];if(c==="End")return e[e.length-1];const t=c==="ArrowRight"||c==="ArrowDown"?1:-1;const r=e.indexOf(i);if(r<0){return t>0?e[0]:e[e.length-1]}return e[(r+t+e.length)%e.length]}function d(s){if(s===undefined||!Number.isFinite(s))return 1;return Math.min(1,Math.max(0,s))}const h=()=>`.sc-ds-swatch-picker-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-swatch-picker-h:focus-visible,.ds-focus-ring.sc-ds-swatch-picker:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-swatch-picker-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-swatch-picker{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-swatch-picker-h:focus-visible,.ds-focus-ring-inset.sc-ds-swatch-picker:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-swatch-picker-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-swatch-picker:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-swatch-picker-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-swatch-picker{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-swatch-picker-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-swatch-picker::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-swatch-picker-h,.ds-control-inactive.sc-ds-swatch-picker{opacity:0.5;pointer-events:none;cursor:not-allowed}.sc-ds-swatch-picker-h{box-sizing:border-box;display:block;width:100%;--_swatch-inner-inset:calc(     var(--dimension-stroke-width-025) + var(--dimension-space-025)   );--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.swatch-picker.sc-ds-swatch-picker{box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;width:100%;min-height:var(--dimension-size-400);gap:var(--dimension-space-100);padding:var(--dimension-space-100)}.swatch-picker__option.sc-ds-swatch-picker{position:relative;box-sizing:border-box;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:pointer;isolation:isolate}.swatch-picker__fill.sc-ds-swatch-picker,.swatch-picker__border.sc-ds-swatch-picker,.swatch-picker__interaction.sc-ds-swatch-picker,.swatch-picker__halo.sc-ds-swatch-picker,.swatch-picker__stroke.sc-ds-swatch-picker{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.swatch-picker__fill.sc-ds-swatch-picker{z-index:1;background-color:var(--_swatch-preview-color);background-image:var(--_swatch-preview-image);background-repeat:no-repeat;background-position:center;background-size:cover;opacity:var(--_swatch-preview-opacity);transition:inset var(--_swatch-select-motion)}.swatch-picker__border.sc-ds-swatch-picker{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);transition:inset var(--_swatch-select-motion)}.swatch-picker__interaction.sc-ds-swatch-picker{z-index:3;background-color:transparent;transition:inset var(--_swatch-select-motion),     background-color 0s}.swatch-picker__option.sc-ds-swatch-picker:hover:not(:disabled) .swatch-picker__interaction.sc-ds-swatch-picker{background-color:var(--color-interaction-hover)}.swatch-picker__option.sc-ds-swatch-picker:active:not(:disabled) .swatch-picker__interaction.sc-ds-swatch-picker{background-color:var(--color-interaction-pressed)}.swatch-picker__halo.sc-ds-swatch-picker,.swatch-picker__stroke.sc-ds-swatch-picker{opacity:0;transform:scale(1.2);transform-origin:center;transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.swatch-picker__halo.sc-ds-swatch-picker{z-index:4;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg)}.swatch-picker__stroke.sc-ds-swatch-picker{z-index:5;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__fill.sc-ds-swatch-picker,.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__border.sc-ds-swatch-picker,.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__interaction.sc-ds-swatch-picker{inset:var(--_swatch-inner-inset)}.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__halo.sc-ds-swatch-picker,.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__stroke.sc-ds-swatch-picker{opacity:1;transform:scale(1)}.swatch-picker__divider.sc-ds-swatch-picker{flex:0 0 auto;align-self:center;width:var(--dimension-stroke-width-012);height:var(--dimension-size-300);background-color:var(--color-border-tertiary)}@media (prefers-reduced-motion: reduce){.swatch-picker__fill.sc-ds-swatch-picker,.swatch-picker__border.sc-ds-swatch-picker,.swatch-picker__interaction.sc-ds-swatch-picker,.swatch-picker__halo.sc-ds-swatch-picker,.swatch-picker__stroke.sc-ds-swatch-picker{transition:none}}`;const p=s(class s extends i{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=c(this,"dsChange");this.value="";this.options=[];this.sections=[];this.groupLabel="Swatch options"}get activeOptions(){return o(this.options,this.sections)}selectOption(s){if(s.isInactive||s.value===this.value)return;this.value=s.value;this.dsChange.emit(s.value)}focusOption(s){requestAnimationFrame((()=>{const i=this.el.querySelectorAll(".swatch-picker__option");i[s]?.focus()}))}handleOptionKeyDown(s,i){const c=s.key;if(!["ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Home","End"].includes(c)){return}const e=n(this.activeOptions,i,c);if(e===null)return;s.preventDefault();const t=this.activeOptions[e];this.selectOption(t);this.focusOption(e)}renderOption(s,i,c){const t=s.value===this.value;const r=d(s.preview.opacity);return e("button",{key:s.value,type:"button",class:{"swatch-picker__option":true,"swatch-picker__option--selected":t,"ds-focus-ring-inset":true,"ds-control-inactive":!!s.isInactive},style:{"--_swatch-preview-color":s.preview.backgroundColor??"var(--color-background-secondary)","--_swatch-preview-image":s.preview.backgroundImage??"none","--_swatch-preview-opacity":String(r)},role:"radio","aria-label":s.label,"aria-checked":t?"true":"false",tabIndex:i===c?0:-1,disabled:s.isInactive,onClick:()=>this.selectOption(s),onKeyDown:s=>this.handleOptionKeyDown(s,i)},e("span",{class:"swatch-picker__fill","aria-hidden":"true"}),e("span",{class:"swatch-picker__border","aria-hidden":"true"}),e("span",{class:"swatch-picker__interaction","aria-hidden":"true"}),e("span",{class:"swatch-picker__halo","aria-hidden":"true"}),e("span",{class:"swatch-picker__stroke","aria-hidden":"true"}))}render(){const s=this.activeOptions;const i=a(s,this.value);let c=0;return e(t,{key:"0db6c89970c68955c870a6729b6bc9b0d39ebec2"},e("div",{key:"6023f991039d57f94b007b6c7a97645fe8a766a0",class:"swatch-picker",role:"radiogroup","aria-label":this.groupLabel},(this.sections.length>0?this.sections:[{options:this.options}]).map(((s,t)=>[s.options.map((s=>{const e=c++;return this.renderOption(s,e,i)})),t<(this.sections.length>0?this.sections.length:1)-1&&e("span",{class:"swatch-picker__divider","aria-hidden":"true"})]))))}get el(){return this}static get style(){return h()}},[2,"ds-swatch-picker",{value:[1537],options:[16],sections:[16],groupLabel:[1,"group-label"]}]);function w(){if(typeof customElements==="undefined"){return}const s=["ds-swatch-picker"];s.forEach((s=>{switch(s){case"ds-swatch-picker":if(!customElements.get(r(s))){customElements.define(r(s),p)}break}}))}w();export{p as S,w as d};
-//# sourceMappingURL=p-Biz6xo-z.js.map