npm - @ds-mo/ui - Versions diffs - 15.6.0 → 15.8.0 - Mend

@ds-mo/ui 15.6.0 → 15.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (297) hide show

package/dist/components/p-UWU23pbX.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{p as e,H as i,c as s,h as n,a as o,t}from"./index.js";import{d as r}from"./p-CqW2eyiF.js";import{d as a}from"./p-BWJb2rih.js";import{d}from"./p-kL4EOsx5.js";import{d as c}from"./p-BVsVUnAw.js";import{d as l}from"./p-0XTyQNRG.js";import{d as v}from"./p-BREDkBUv.js";import{d as h}from"./p-BbvAWFJA.js";import{d as m}from"./p-BJf49edB.js";const b=()=>`.sc-ds-mobile-sheet-nav-h,.sc-ds-mobile-sheet-nav:where(.ds-table),.sc-ds-mobile-sheet-nav:where(.tooltip-popup),.sc-ds-mobile-sheet-nav:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-mobile-sheet-nav,.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav,.ds-control--sm.sc-ds-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-nav,.ds-control--xs.sc-ds-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-nav{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--lg.sc-ds-mobile-sheet-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-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}.ds-chrome-space--sm.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--sm.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--ds-chrome-space-sm-padding, var(--dimension-space-050));--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--md.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--lg.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav,.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav,.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-nav{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav{flex-direction:column}.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-nav{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-mobile-sheet-nav:root,.sc-ds-mobile-sheet-nav-h,.ds-forced-colors-scope.sc-ds-mobile-sheet-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring.sc-ds-mobile-sheet-nav,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-sheet-nav-h:focus-visible,.ds-focus-ring.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-sheet-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-mobile-sheet-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-mobile-sheet-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-mobile-sheet-nav:root,.sc-ds-mobile-sheet-nav-h,.ds-forced-colors-scope.sc-ds-mobile-sheet-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill.sc-ds-mobile-sheet-nav{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--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-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--bordered.sc-ds-mobile-sheet-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill.sc-ds-mobile-sheet-nav>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill__content.sc-ds-mobile-sheet-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-bold.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-strong.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-sheet-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-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-sheet-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-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-media.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-sheet-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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-chrome.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-sheet-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)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-mobile-sheet-nav-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-mobile-sheet-nav:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-mobile-sheet-nav-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-mobile-sheet-nav:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.ds-nav-disclosure.sc-ds-mobile-sheet-nav,.ds-nav-disclosure-divider.sc-ds-mobile-sheet-nav{--ds-nav-disclosure-duration:calc( var(--effect-animation-duration-short-3) * 2 + var(--effect-animation-duration-short-2) );--ds-nav-disclosure-wait:calc( var(--effect-animation-duration-short-3) + var(--effect-animation-duration-short-1) );--ds-nav-disclosure-fade:var(--ds-nav-disclosure-duration);--ds-nav-disclosure-stagger:var(--effect-animation-duration-short-1)}.ds-nav-disclosure.sc-ds-mobile-sheet-nav{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ds-nav-disclosure-duration) var(--effect-animation-easing-ease-in-out) var(--ds-nav-disclosure-wait)}.ds-nav-disclosure--open.sc-ds-mobile-sheet-nav{grid-template-rows:1fr;transition-delay:var(--effect-animation-duration-instant)}.ds-nav-disclosure.sc-ds-mobile-sheet-nav .ds-nav-disclosure__item.sc-ds-mobile-sheet-nav{opacity:0;pointer-events:none;transition:opacity var(--ds-nav-disclosure-fade) var(--effect-animation-easing-ease-out) calc(var(--ds-nav-disclosure-reverse-index) * var(--ds-nav-disclosure-stagger)), color var(--effect-motion-short-1)}.ds-nav-disclosure--open.sc-ds-mobile-sheet-nav .ds-nav-disclosure__item.sc-ds-mobile-sheet-nav{opacity:1;pointer-events:auto;transition-delay:calc( var(--ds-nav-disclosure-wait) + var(--ds-nav-disclosure-index) * var(--ds-nav-disclosure-stagger) ), var(--effect-animation-duration-instant)}.ds-nav-disclosure-divider.sc-ds-mobile-sheet-nav{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--ds-nav-disclosure-duration) var(--effect-animation-easing-ease-in-out) var(--ds-nav-disclosure-wait), opacity var(--ds-nav-disclosure-duration) var(--effect-animation-easing-ease-out)}.ds-nav-disclosure-divider--open.sc-ds-mobile-sheet-nav{grid-template-rows:1fr;opacity:1;transition-delay:var(--effect-animation-duration-instant), var(--effect-animation-duration-instant)}.ds-nav-disclosure-divider__clip.sc-ds-mobile-sheet-nav{min-height:0;overflow:hidden}@media (prefers-reduced-motion: reduce){.ds-nav-disclosure.sc-ds-mobile-sheet-nav,.ds-nav-disclosure-divider.sc-ds-mobile-sheet-nav,.ds-nav-disclosure.sc-ds-mobile-sheet-nav .ds-nav-disclosure__item.sc-ds-mobile-sheet-nav{transition-duration:var(--effect-animation-duration-instant) !important;transition-delay:var(--effect-animation-duration-instant) !important}}.sc-ds-mobile-sheet-nav-h{display:block;min-width:0;min-height:0;height:100%;background:var(--color-background-primary)}.sc-ds-mobile-sheet-nav-h:not([open]){display:none}.mobile-sheet-nav.sc-ds-mobile-sheet-nav{display:grid;grid-template-rows:auto minmax(0, 1fr);height:100%;min-height:0;background:var(--color-background-primary)}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav{position:relative;grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr)}.mobile-sheet-nav__header--expanded-context.sc-ds-mobile-sheet-nav{grid-template-columns:minmax(var(--dimension-size-500), 1fr) minmax(0, 4fr) minmax(var(--dimension-size-500), 1fr)}.mobile-sheet-nav__header--expanded-context.sc-ds-mobile-sheet-nav .mobile-sheet-nav__context.sc-ds-mobile-sheet-nav{width:100%}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.mobile-sheet-nav__brand.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-start;min-width:0}.mobile-sheet-nav__logo.sc-ds-mobile-sheet-nav{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-500);height:var(--dimension-size-500);padding:var(--dimension-space-100);box-sizing:border-box;color:var(--color-foreground-primary)}.mobile-sheet-nav__logo-mark.sc-ds-mobile-sheet-nav{width:var(--dimension-iconography-lg);height:var(--dimension-iconography-lg);flex:0 0 auto}.mobile-sheet-nav__context.sc-ds-mobile-sheet-nav{justify-self:center}.mobile-sheet-nav__actions.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--dimension-space-050);min-width:0}.mobile-sheet-nav__body.sc-ds-mobile-sheet-nav{min-height:0;overflow:auto;overscroll-behavior:contain}.mobile-sheet-nav__sections.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-400)}.mobile-sheet-nav__items.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-100)}.mobile-sheet-nav__item.sc-ds-mobile-sheet-nav{appearance:none;width:100%;height:var(--ds-control-height);min-height:var(--ds-control-height);padding-inline:var(--ds-control-padding-inline);border:0;border-radius:var(--ds-control-radius);background:transparent;color:var(--color-foreground-secondary);display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-gap);cursor:default;text-align:start;box-sizing:border-box}.mobile-sheet-nav__item--selected.sc-ds-mobile-sheet-nav{color:var(--color-foreground-primary)}.mobile-sheet-nav__item-label.sc-ds-mobile-sheet-nav{min-width:0;padding-inline:var(--ds-control-label-inset)}.mobile-sheet-nav__dot.sc-ds-mobile-sheet-nav{margin-inline-start:auto}.mobile-sheet-nav__children.sc-ds-mobile-sheet-nav{display:flex;flex-direction:column;gap:var(--dimension-space-100);min-height:0;overflow:hidden}.mobile-sheet-nav__child.sc-ds-mobile-sheet-nav{flex:0 0 var(--ds-control-height);padding-inline-start:calc( var(--ds-control-padding-inline) + var(--dimension-iconography-lg) + var(--ds-control-gap) )}.mobile-sheet-nav__child.sc-ds-mobile-sheet-nav:first-child{margin-block-start:var(--dimension-space-100)}.mobile-sheet-nav__child.sc-ds-mobile-sheet-nav:disabled{color:var(--color-foreground-tertiary)}.mobile-sheet-nav__parent--muted.sc-ds-mobile-sheet-nav{color:var(--color-foreground-secondary)}.mobile-sheet-nav__divider-line.sc-ds-mobile-sheet-nav{display:block;height:var(--dimension-stroke-width-012);margin-inline:var(--dimension-space-100);background:var(--color-border-tertiary)}.mobile-sheet-nav__divider--before.sc-ds-mobile-sheet-nav .mobile-sheet-nav__divider-line.sc-ds-mobile-sheet-nav{margin-block:var(--dimension-space-050) var(--dimension-space-150)}.mobile-sheet-nav__divider--after.sc-ds-mobile-sheet-nav .mobile-sheet-nav__divider-line.sc-ds-mobile-sheet-nav{margin-block:var(--dimension-space-150) var(--dimension-space-050)}`;const u=[{id:"dashboard",label:"Dashboard",icon:"Dashboard",variant:"icon"},{id:"settings",label:"Settings",icon:"Gear",variant:"icon"}];let f=0;const p=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAreaSelect=s(this,"dsAreaSelect",7);this.dsNavChildSelect=s(this,"dsNavChildSelect",7);this.dsBrowseContextChange=s(this,"dsBrowseContextChange",7);this.dsClose=s(this,"dsClose",7);this.open=false;this.browseContext="dashboard";this.dashboardGroups=[];this.settingsGroups=[];this.currentUrl="";this.presentation="flat";this.routeSelectionActive=true;this.navigationLabel="Application navigation";this.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.helpLabel="Help & Support";this.showAccount=true;this.expandedParentId="";this.instanceId=f++;this.handleContextChange=e=>{const i=e.detail==="settings"?"settings":"dashboard";if(i===this.browseContext)return;this.dsBrowseContextChange.emit(i)}}get groups(){return this.browseContext==="settings"?this.settingsGroups:this.dashboardGroups}get selection(){return r(this.routeSelectionActive?this.currentUrl:"",this.groups.flatMap((e=>e.items)))}componentWillLoad(){this.syncExpandedParent()}syncExpandedParent(){this.expandedParentId=this.presentation==="nested"?this.selection.parentId:""}handleOpenChange(e){if(!e)return;this.syncExpandedParent();requestAnimationFrame((()=>{const e=this.el.querySelector('[aria-current="page"]');const i=this.el.querySelector(".mobile-sheet-nav__item:not(:disabled)");(e??i)?.focus({preventScroll:true})}))}handleKeyDown(e){if(!this.open\|\|e.key!=="Escape")return;e.preventDefault();this.dsClose.emit()}renderItem(e){const i=e.id===this.selection.parentId;const s=this.presentation==="nested"&&!!e.children?.length;const o=s&&e.id===this.expandedParentId;return n("button",{id:this.parentId(e.id),type:"button",class:{"mobile-sheet-nav__item":true,"mobile-sheet-nav__item--selected":i,"mobile-sheet-nav__parent--muted":this.presentation==="nested"&&this.expandedParentId!==""&&this.expandedParentId!==e.id,"ds-control--lg":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":i&&!s?"page":undefined,"aria-expanded":s?String(o):undefined,"aria-controls":s?this.childrenId(e.id):undefined,onClick:()=>s?this.expandedParentId=o?"":e.id:this.dsAreaSelect.emit(e.id)},n("ds-icon",{class:"ds-interaction-fill__content",name:e.icon,size:"lg",color:"inherit"}),n("ds-text",{class:"mobile-sheet-nav__item-label ds-interaction-fill__content",as:"span",variant:"text-body-large",emphasis:i,color:"inherit",lineTruncation:1},e.label),e.dot&&n("ds-badge",{class:"mobile-sheet-nav__dot ds-interaction-fill__content",variant:"dot",hasRing:false,label:"","aria-hidden":"true"}))}parentId(e){return`mobile-sheet-${this.instanceId}-${encodeURIComponent(e)}`}childrenId(e){return`${this.parentId(e)}-children`}renderChild(e,i,s){const o=e.id===this.selection.parentId&&i.id===this.selection.childId;return n("button",{type:"button",disabled:i.isInactive,class:{"mobile-sheet-nav__item":true,"mobile-sheet-nav__child":true,"mobile-sheet-nav__item--selected":o,"ds-nav-disclosure__item":true,"ds-control--lg":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},style:{"--ds-nav-disclosure-index":String(s),"--ds-nav-disclosure-reverse-index":String((e.children?.length??0)-s-1)},"aria-current":o?"page":undefined,onClick:()=>{if(!i.isInactive)this.dsNavChildSelect.emit({parentId:e.id,childId:i.id,href:i.href})},onKeyDown:i=>{if(i.key==="ArrowLeft"){i.preventDefault();this.expandedParentId="";this.el.querySelector(`#${CSS.escape(this.parentId(e.id))}`)?.focus()}}},n("ds-text",{class:"mobile-sheet-nav__item-label ds-interaction-fill__content",as:"span",variant:"text-body-large",emphasis:o,color:"inherit",lineTruncation:1},i.label),i.dot?n("ds-badge",{class:"mobile-sheet-nav__dot ds-interaction-fill__content",variant:"dot",hasRing:false,label:"","aria-hidden":"true"}):null)}renderBranchDivider(e,i){return n("div",{class:{"ds-nav-disclosure-divider":true,"ds-nav-disclosure-divider--open":i,"mobile-sheet-nav__divider":true,[`mobile-sheet-nav__divider--${e}`]:true},"aria-hidden":"true"},n("div",{class:"ds-nav-disclosure-divider__clip"},n("span",{class:"mobile-sheet-nav__divider-line"})))}renderBranch(e,i,s){const o=this.presentation==="nested"&&!!e.children?.length;const t=o&&this.expandedParentId===e.id;return n("div",{key:e.id,class:"mobile-sheet-nav__branch"},o&&i>0?this.renderBranchDivider("before",t):null,this.renderItem(e),this.presentation==="nested"&&e.children?.length?n("div",{class:{"ds-nav-disclosure":true,"ds-nav-disclosure--open":t},inert:!t?true:undefined,"aria-hidden":!t?"true":undefined},n("div",{class:"mobile-sheet-nav__children",id:this.childrenId(e.id),role:"group","aria-labelledby":this.parentId(e.id)},e.children.map(((i,s)=>this.renderChild(e,i,s))))):null,o&&i<s-1?this.renderBranchDivider("after",t):null)}renderLogo(){return n("span",{class:"mobile-sheet-nav__logo","aria-hidden":"true"},n("svg",{class:"mobile-sheet-nav__logo-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},n("path",{d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"})))}renderHeaderDestination(e,i,s){return n("ds-tooltip",{label:s,side:"bottom",size:"sm"},n("ds-button-unfilled",{variant:"icon",size:"lg",icon:i,"aria-label":s,activeFill:false,hasBorder:false,onDsClick:()=>this.dsAreaSelect.emit(e)}))}render(){const e=[{...u[0],label:this.dashboardLabel},{...u[1],label:this.settingsLabel}];return n(o,{key:"b0760655591871808c01c289cd59f0a437263646","aria-hidden":this.open?undefined:"true",inert:this.open?undefined:true},n("section",{key:"ed25677ec14e8d2a2c9e55c73e6ea8a03241640e",id:"ds-mobile-sheet-nav",class:"mobile-sheet-nav"},n("header",{key:"da812576633be8c26e427686f1ba2e3f7995e0cc",class:{"mobile-sheet-nav__header":true,"mobile-sheet-nav__header--expanded-context":!this.showAccount,"ds-chrome-grid":true,"ds-chrome-space--md":true}},n("div",{key:"c46cd0aa4ed2e29056a594c39511c004dbba91a9",class:"mobile-sheet-nav__brand"},this.renderLogo()),n("ds-tab-group",{key:"df329db1c4d7b851bee13883942b910c8e22c2a2",class:"mobile-sheet-nav__context",tabs:e,value:this.browseContext,size:"lg",width:this.showAccount?"hug":"fill","aria-label":"Browse context",onDsChange:this.handleContextChange}),n("div",{key:"8c350b07b15e723d69c3fd23d4fe9bd907b652ee",class:"mobile-sheet-nav__actions"},this.renderHeaderDestination("help","QuestionCircle",this.helpLabel),this.showAccount?this.renderHeaderDestination("account","PersonCircle",this.accountLabel):null)),n("nav",{key:"3a5a073dddf5d954b42800a5464be4bbe9ed7d88",class:"mobile-sheet-nav__body ds-chrome-column ds-chrome-space--md","aria-label":this.navigationLabel},n("div",{key:"b4bdd9155f4481cc48206e1a42a4cea8cf5fbe43",class:"mobile-sheet-nav__sections"},this.groups.filter((e=>e.items.length>0)).map((e=>n("div",{class:"mobile-sheet-nav__items"},e.items.map(((i,s)=>this.renderBranch(i,s,e.items.length))))))))))}get el(){return this}static get watchers(){return{presentation:[{syncExpandedParent:0}],currentUrl:[{syncExpandedParent:0}],browseContext:[{syncExpandedParent:0}],routeSelectionActive:[{syncExpandedParent:0}],open:[{handleOpenChange:0}]}}static get style(){return b()}},[2,"ds-mobile-sheet-nav",{open:[516],browseContext:[1,"browse-context"],dashboardGroups:[16],settingsGroups:[16],currentUrl:[1,"current-url"],presentation:[1],routeSelectionActive:[4,"route-selection-active"],navigationLabel:[1,"navigation-label"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],helpLabel:[1,"help-label"],showAccount:[4,"show-account"],expandedParentId:[32]},[[0,"keydown","handleKeyDown"]],{presentation:[{syncExpandedParent:0}],currentUrl:[{syncExpandedParent:0}],browseContext:[{syncExpandedParent:0}],routeSelectionActive:[{syncExpandedParent:0}],open:[{handleOpenChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-mobile-sheet-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-tab-group","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-mobile-sheet-nav":if(!customElements.get(t(e))){customElements.define(t(e),p)}break;case"ds-badge":if(!customElements.get(t(e))){a()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){d()}break;case"ds-icon":if(!customElements.get(t(e))){c()}break;case"ds-loader":if(!customElements.get(t(e))){l()}break;case"ds-tab-group":if(!customElements.get(t(e))){v()}break;case"ds-text":if(!customElements.get(t(e))){h()}break;case"ds-tooltip":if(!customElements.get(t(e))){m()}break}}))}g();export{p as M,g as d};
2	+ //# sourceMappingURL=p-UWU23pbX.js.map

package/dist/components/{p-KA8srEed.js.map → p-UWU23pbX.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["mobileSheetNavCss","CONTEXT_TABS","id","label","icon","variant","nextSheetId","MobileSheetNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","browseContext","dashboardGroups","settingsGroups","currentUrl","presentation","routeSelectionActive","navigationLabel","dashboardLabel","settingsLabel","accountLabel","helpLabel","showAccount","expandedParentId","instanceId","handleContextChange","event","next","detail","dsBrowseContextChange","emit","groups","selection","derivePanelNavSelectionFromUrl","flatMap","group","items","componentWillLoad","syncExpandedParent","parentId","handleOpenChange","requestAnimationFrame","selected","el","querySelector","first","focus","preventScroll","handleKeyDown","key","preventDefault","dsClose","renderItem","item","disclosure","children","length","expanded","h","type","class","undefined","String","childrenId","onClick","dsAreaSelect","name","size","color","as","emphasis","lineTruncation","dot","hasRing","encodeURIComponent","renderChild","parent","child","index","childId","disabled","isInactive","style","dsNavChildSelect","href","onKeyDown","CSS","escape","renderBranchDivider","position","renderBranch","count","hasChildren","inert","role","map","renderLogo","viewBox","fill","xmlns","focusable","d","renderHeaderDestination","side","activeFill","hasBorder","onDsClick","render","contextTabs","Host","tabs","value","width","onDsChange","filter"],"sources":["src/wc/components/MobileSheetNav/MobileSheetNav.css?tag=ds-mobile-sheet-nav&encapsulation=scoped","src/wc/components/MobileSheetNav/MobileSheetNav.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/nav-disclosure.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.mobile-sheet-nav {\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n height: 100%;\n min-height: 0;\n background: var(--color-background-primary);\n}\n\n.mobile-sheet-nav__header {\n position: relative;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n.mobile-sheet-nav__header--expanded-context {\n grid-template-columns:\n minmax(var(--dimension-size-500), 1fr)\n minmax(0, 4fr)\n minmax(var(--dimension-size-500), 1fr);\n}\n\n.mobile-sheet-nav__header--expanded-context .mobile-sheet-nav__context {\n width: 100%;\n}\n\n.mobile-sheet-nav__header::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-end: 0;\n height: var(--dimension-stroke-width-012);\n background: var(--color-border-tertiary);\n pointer-events: none;\n}\n\n.mobile-sheet-nav__brand {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n}\n\n.mobile-sheet-nav__logo {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--dimension-size-500);\n height: var(--dimension-size-500);\n padding: var(--dimension-space-100);\n box-sizing: border-box;\n color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__logo-mark {\n width: var(--dimension-iconography-lg);\n height: var(--dimension-iconography-lg);\n flex: 0 0 auto;\n}\n\n.mobile-sheet-nav__context {\n justify-self: center;\n}\n\n.mobile-sheet-nav__actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--dimension-space-050);\n min-width: 0;\n}\n\n.mobile-sheet-nav__body {\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n}\n\n.mobile-sheet-nav__sections {\n display: grid;\n gap: var(--dimension-space-400);\n}\n\n.mobile-sheet-nav__items {\n display: grid;\n gap: var(--dimension-space-100);\n}\n\n.mobile-sheet-nav__item {\n appearance: none;\n width: 100%;\n height: var(--ds-control-height);\n min-height: var(--ds-control-height);\n padding-inline: var(--ds-control-padding-inline);\n border: 0;\n border-radius: var(--ds-control-radius);\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-gap);\n cursor: default;\n text-align: start;\n box-sizing: border-box;\n}\n\n.mobile-sheet-nav__item--selected {\n color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__item-label {\n min-width: 0;\n padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-sheet-nav__dot {\n margin-inline-start: auto;\n}\n\n.mobile-sheet-nav__children {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-100);\n min-height: 0;\n overflow: hidden;\n}\n\n.mobile-sheet-nav__child {\n flex: 0 0 var(--ds-control-height);\n padding-inline-start: calc(\n var(--ds-control-padding-inline) + var(--dimension-iconography-lg) + var(--ds-control-gap)\n );\n}\n\n.mobile-sheet-nav__child:first-child {\n margin-block-start: var(--dimension-space-100);\n}\n\n.mobile-sheet-nav__child:disabled {\n color: var(--color-foreground-tertiary);\n}\n\n.mobile-sheet-nav__parent--muted {\n color: var(--color-foreground-secondary);\n}\n\n.mobile-sheet-nav__divider-line {\n display: block;\n height: var(--dimension-stroke-width-012);\n margin-inline: var(--dimension-space-100);\n background: var(--color-border-tertiary);\n}\n\n.mobile-sheet-nav__divider--before .mobile-sheet-nav__divider-line {\n margin-block: var(--dimension-space-050) var(--dimension-space-150);\n}\n\n.mobile-sheet-nav__divider--after .mobile-sheet-nav__divider-line {\n margin-block: var(--dimension-space-150) var(--dimension-space-050);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport { derivePanelNavSelectionFromUrl } from '../PanelNav/panel-nav-utils';\nimport type {\n PanelNavChildItem,\n PanelNavChildSelectDetail,\n PanelNavGroup,\n PanelNavItem,\n PanelNavPresentation,\n} from '../PanelNav/panel-nav-types';\n\ntype MobileSheetNavHeaderDestinationId = 'account' \| 'help';\n\nconst CONTEXT_TABS = [\n { id: 'dashboard', label: 'Dashboard', icon: 'Dashboard', variant: 'icon' as const },\n { id: 'settings', label: 'Settings', icon: 'Gear', variant: 'icon' as const },\n];\nlet nextSheetId = 0;\n\n@Component({\n tag: 'ds-mobile-sheet-nav',\n styleUrl: 'MobileSheetNav.css',\n scoped: true,\n})\nexport class MobileSheetNav {\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 /** Flat area navigation or inline disclosure of each area's child routes. /\n @Prop() presentation: PanelNavPresentation = 'flat';\n /* Whether the router-derived current area owns the active mobile stage. /\n @Prop() routeSelectionActive: boolean = true;\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 /* Show the optional Account shortcut in the sheet header. /\n @Prop() showAccount: boolean = true;\n\n @Event() dsAreaSelect!: EventEmitter<string>;\n /* Selecting a child requests routing; expanding its parent never navigates. /\n @Event() dsNavChildSelect!: EventEmitter<PanelNavChildSelectDetail>;\n @Event() dsBrowseContextChange!: EventEmitter<NavChromeStyle>;\n @Event() dsClose!: EventEmitter<void>;\n @State() private expandedParentId = '';\n private readonly instanceId = nextSheetId++;\n\n private get groups(): PanelNavGroup[] {\n return this.browseContext === 'settings' ? this.settingsGroups : this.dashboardGroups;\n }\n\n private get selection() {\n return derivePanelNavSelectionFromUrl(\n this.routeSelectionActive ? this.currentUrl : '',\n this.groups.flatMap(group => group.items)\n );\n }\n\n componentWillLoad() {\n this.syncExpandedParent();\n }\n\n @Watch('presentation')\n @Watch('currentUrl')\n @Watch('browseContext')\n @Watch('routeSelectionActive')\n syncExpandedParent() {\n this.expandedParentId = this.presentation === 'nested' ? this.selection.parentId : '';\n }\n\n @Watch('open')\n handleOpenChange(open: boolean) {\n if (!open) return;\n this.syncExpandedParent();\n requestAnimationFrame(() => {\n const selected = this.el.querySelector<HTMLElement>('[aria-current=\"page\"]');\n const first = this.el.querySelector<HTMLElement>('.mobile-sheet-nav__item:not(:disabled)');\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 renderItem(item: PanelNavItem) {\n const selected = item.id === this.selection.parentId;\n const disclosure = this.presentation === 'nested' && !!item.children?.length;\n const expanded = disclosure && item.id === this.expandedParentId;\n return (\n <button\n id={this.parentId(item.id)}\n type=\"button\"\n class={{\n 'mobile-sheet-nav__item': true,\n 'mobile-sheet-nav__item--selected': selected,\n 'mobile-sheet-nav__parent--muted':\n this.presentation === 'nested' &&\n this.expandedParentId !== '' &&\n this.expandedParentId !== item.id,\n 'ds-control--lg': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n aria-current={selected && !disclosure ? 'page' : undefined}\n aria-expanded={disclosure ? String(expanded) : undefined}\n aria-controls={disclosure ? this.childrenId(item.id) : undefined}\n onClick={() =>\n disclosure\n ? (this.expandedParentId = expanded ? '' : item.id)\n : this.dsAreaSelect.emit(item.id)\n }\n >\n <ds-icon class=\"ds-interaction-fill__content\" name={item.icon} size=\"lg\" color=\"inherit\" />\n <ds-text\n class=\"mobile-sheet-nav__item-label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-large\"\n emphasis={selected}\n color=\"inherit\"\n lineTruncation={1}\n >\n {item.label}\n </ds-text>\n {item.dot && (\n <ds-badge\n class=\"mobile-sheet-nav__dot ds-interaction-fill__content\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </button>\n );\n }\n\n private parentId(id: string) {\n return `mobile-sheet-${this.instanceId}-${encodeURIComponent(id)}`;\n }\n private childrenId(id: string) {\n return `${this.parentId(id)}-children`;\n }\n\n private renderChild(parent: PanelNavItem, child: PanelNavChildItem, index: number) {\n const selected = parent.id === this.selection.parentId && child.id === this.selection.childId;\n return (\n <button\n type=\"button\"\n disabled={child.isInactive}\n class={{\n 'mobile-sheet-nav__item': true,\n 'mobile-sheet-nav__child': true,\n 'mobile-sheet-nav__item--selected': selected,\n 'ds-nav-disclosure__item': true,\n 'ds-control--lg': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n style={{\n '--ds-nav-disclosure-index': String(index),\n '--ds-nav-disclosure-reverse-index': String((parent.children?.length ?? 0) - index - 1),\n }}\n aria-current={selected ? 'page' : undefined}\n onClick={() => {\n if (!child.isInactive)\n this.dsNavChildSelect.emit({\n parentId: parent.id,\n childId: child.id,\n href: child.href,\n });\n }}\n onKeyDown={(event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.expandedParentId = '';\n this.el.querySelector<HTMLElement>(`#${CSS.escape(this.parentId(parent.id))}`)?.focus();\n }\n }}\n >\n <ds-text\n class=\"mobile-sheet-nav__item-label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-large\"\n emphasis={selected}\n color=\"inherit\"\n lineTruncation={1}\n >\n {child.label}\n </ds-text>\n {child.dot ? (\n <ds-badge\n class=\"mobile-sheet-nav__dot ds-interaction-fill__content\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n aria-hidden=\"true\"\n />\n ) : null}\n </button>\n );\n }\n\n private renderBranchDivider(position: 'before' \| 'after', expanded: boolean) {\n return (\n <div\n class={{\n 'ds-nav-disclosure-divider': true,\n 'ds-nav-disclosure-divider--open': expanded,\n 'mobile-sheet-nav__divider': true,\n [`mobile-sheet-nav__divider--${position}`]: true,\n }}\n aria-hidden=\"true\"\n >\n <div class=\"ds-nav-disclosure-divider__clip\">\n <span class=\"mobile-sheet-nav__divider-line\" />\n </div>\n </div>\n );\n }\n\n private renderBranch(item: PanelNavItem, index: number, count: number) {\n const hasChildren = this.presentation === 'nested' && !!item.children?.length;\n const expanded = hasChildren && this.expandedParentId === item.id;\n return (\n <div key={item.id} class=\"mobile-sheet-nav__branch\">\n {hasChildren && index > 0 ? this.renderBranchDivider('before', expanded) : null}\n {this.renderItem(item)}\n {this.presentation === 'nested' && item.children?.length ? (\n <div\n class={{ 'ds-nav-disclosure': true, 'ds-nav-disclosure--open': expanded }}\n inert={!expanded ? true : undefined}\n aria-hidden={!expanded ? 'true' : undefined}\n >\n <div\n class=\"mobile-sheet-nav__children\"\n id={this.childrenId(item.id)}\n role=\"group\"\n aria-labelledby={this.parentId(item.id)}\n >\n {item.children.map((child, index) => this.renderChild(item, child, index))}\n </div>\n </div>\n ) : null}\n {hasChildren && index < count - 1 ? this.renderBranchDivider('after', expanded) : null}\n </div>\n );\n }\n\n private renderLogo() {\n return (\n <span class=\"mobile-sheet-nav__logo\" aria-hidden=\"true\">\n {/ eslint-disable-next-line compomo/prefer-ds-icon -- Motive brand mark is not part of the IcoMo runtime catalog. */}\n <svg\n class=\"mobile-sheet-nav__logo-mark\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n );\n }\n\n private renderHeaderDestination(\n id: MobileSheetNavHeaderDestinationId,\n icon: string,\n label: string\n ) {\n return (\n <ds-tooltip label={label} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n variant=\"icon\"\n size=\"lg\"\n icon={icon}\n aria-label={label}\n activeFill={false}\n hasBorder={false}\n onDsClick={() => this.dsAreaSelect.emit(id)}\n />\n </ds-tooltip>\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 id=\"ds-mobile-sheet-nav\" class=\"mobile-sheet-nav\">\n <header\n class={{\n 'mobile-sheet-nav__header': true,\n 'mobile-sheet-nav__header--expanded-context': !this.showAccount,\n 'ds-chrome-grid': true,\n 'ds-chrome-space--md': true,\n }}\n >\n <div class=\"mobile-sheet-nav__brand\">{this.renderLogo()}</div>\n <ds-tab-group\n class=\"mobile-sheet-nav__context\"\n tabs={contextTabs}\n value={this.browseContext}\n size=\"lg\"\n width={this.showAccount ? 'hug' : 'fill'}\n aria-label=\"Browse context\"\n onDsChange={this.handleContextChange}\n />\n <div class=\"mobile-sheet-nav__actions\">\n {this.renderHeaderDestination('help', 'QuestionCircle', this.helpLabel)}\n {this.showAccount\n ? this.renderHeaderDestination('account', 'PersonCircle', this.accountLabel)\n : null}\n </div>\n </header>\n\n <nav\n class=\"mobile-sheet-nav__body ds-chrome-column ds-chrome-space--md\"\n aria-label={this.navigationLabel}\n >\n <div class=\"mobile-sheet-nav__sections\">\n {this.groups\n .filter(group => group.items.length > 0)\n .map(group => (\n <div class=\"mobile-sheet-nav__items\">\n {group.items.map((item, index) =>\n this.renderBranch(item, index, group.items.length)\n )}\n </div>\n ))}\n </div>\n </nav>\n </section>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["mobileSheetNavCss","CONTEXT_TABS","id","label","icon","variant","nextSheetId","MobileSheetNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","browseContext","dashboardGroups","settingsGroups","currentUrl","presentation","routeSelectionActive","navigationLabel","dashboardLabel","settingsLabel","accountLabel","helpLabel","showAccount","expandedParentId","instanceId","handleContextChange","event","next","detail","dsBrowseContextChange","emit","groups","selection","derivePanelNavSelectionFromUrl","flatMap","group","items","componentWillLoad","syncExpandedParent","parentId","handleOpenChange","requestAnimationFrame","selected","el","querySelector","first","focus","preventScroll","handleKeyDown","key","preventDefault","dsClose","renderItem","item","disclosure","children","length","expanded","h","type","class","undefined","String","childrenId","onClick","dsAreaSelect","name","size","color","as","emphasis","lineTruncation","dot","hasRing","encodeURIComponent","renderChild","parent","child","index","childId","disabled","isInactive","style","dsNavChildSelect","href","onKeyDown","CSS","escape","renderBranchDivider","position","renderBranch","count","hasChildren","inert","role","map","renderLogo","viewBox","fill","xmlns","focusable","d","renderHeaderDestination","side","activeFill","hasBorder","onDsClick","render","contextTabs","Host","tabs","value","width","onDsChange","filter"],"sources":["src/wc/components/MobileSheetNav/MobileSheetNav.css?tag=ds-mobile-sheet-nav&encapsulation=scoped","src/wc/components/MobileSheetNav/MobileSheetNav.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/nav-disclosure.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.mobile-sheet-nav {\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n height: 100%;\n min-height: 0;\n background: var(--color-background-primary);\n}\n\n.mobile-sheet-nav__header {\n position: relative;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n.mobile-sheet-nav__header--expanded-context {\n grid-template-columns:\n minmax(var(--dimension-size-500), 1fr)\n minmax(0, 4fr)\n minmax(var(--dimension-size-500), 1fr);\n}\n\n.mobile-sheet-nav__header--expanded-context .mobile-sheet-nav__context {\n width: 100%;\n}\n\n.mobile-sheet-nav__header::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-end: 0;\n height: var(--dimension-stroke-width-012);\n background: var(--color-border-tertiary);\n pointer-events: none;\n}\n\n.mobile-sheet-nav__brand {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n}\n\n.mobile-sheet-nav__logo {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--dimension-size-500);\n height: var(--dimension-size-500);\n padding: var(--dimension-space-100);\n box-sizing: border-box;\n color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__logo-mark {\n width: var(--dimension-iconography-lg);\n height: var(--dimension-iconography-lg);\n flex: 0 0 auto;\n}\n\n.mobile-sheet-nav__context {\n justify-self: center;\n}\n\n.mobile-sheet-nav__actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--dimension-space-050);\n min-width: 0;\n}\n\n.mobile-sheet-nav__body {\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n}\n\n.mobile-sheet-nav__sections {\n display: grid;\n gap: var(--dimension-space-400);\n}\n\n.mobile-sheet-nav__items {\n display: grid;\n gap: var(--dimension-space-100);\n}\n\n.mobile-sheet-nav__item {\n appearance: none;\n width: 100%;\n height: var(--ds-control-height);\n min-height: var(--ds-control-height);\n padding-inline: var(--ds-control-padding-inline);\n border: 0;\n border-radius: var(--ds-control-radius);\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-gap);\n cursor: default;\n text-align: start;\n box-sizing: border-box;\n}\n\n.mobile-sheet-nav__item--selected {\n color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__item-label {\n min-width: 0;\n padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-sheet-nav__dot {\n margin-inline-start: auto;\n}\n\n.mobile-sheet-nav__children {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-100);\n min-height: 0;\n overflow: hidden;\n}\n\n.mobile-sheet-nav__child {\n flex: 0 0 var(--ds-control-height);\n padding-inline-start: calc(\n var(--ds-control-padding-inline) + var(--dimension-iconography-lg) + var(--ds-control-gap)\n );\n}\n\n.mobile-sheet-nav__child:first-child {\n margin-block-start: var(--dimension-space-100);\n}\n\n.mobile-sheet-nav__child:disabled {\n color: var(--color-foreground-tertiary);\n}\n\n.mobile-sheet-nav__parent--muted {\n color: var(--color-foreground-secondary);\n}\n\n.mobile-sheet-nav__divider-line {\n display: block;\n height: var(--dimension-stroke-width-012);\n margin-inline: var(--dimension-space-100);\n background: var(--color-border-tertiary);\n}\n\n.mobile-sheet-nav__divider--before .mobile-sheet-nav__divider-line {\n margin-block: var(--dimension-space-050) var(--dimension-space-150);\n}\n\n.mobile-sheet-nav__divider--after .mobile-sheet-nav__divider-line {\n margin-block: var(--dimension-space-150) var(--dimension-space-050);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport { derivePanelNavSelectionFromUrl } from '../PanelNav/panel-nav-utils';\nimport type {\n PanelNavChildItem,\n PanelNavChildSelectDetail,\n PanelNavGroup,\n PanelNavItem,\n PanelNavPresentation,\n} from '../PanelNav/panel-nav-types';\n\ntype MobileSheetNavHeaderDestinationId = 'account' \| 'help';\n\nconst CONTEXT_TABS = [\n { id: 'dashboard', label: 'Dashboard', icon: 'Dashboard', variant: 'icon' as const },\n { id: 'settings', label: 'Settings', icon: 'Gear', variant: 'icon' as const },\n];\nlet nextSheetId = 0;\n\n@Component({\n tag: 'ds-mobile-sheet-nav',\n styleUrl: 'MobileSheetNav.css',\n scoped: true,\n})\nexport class MobileSheetNav {\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 /** Flat area navigation or inline disclosure of each area's child routes. /\n @Prop() presentation: PanelNavPresentation = 'flat';\n /* Whether the router-derived current area owns the active mobile stage. /\n @Prop() routeSelectionActive: boolean = true;\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 /* Show the optional Account shortcut in the sheet header. /\n @Prop() showAccount: boolean = true;\n\n @Event() dsAreaSelect!: EventEmitter<string>;\n /* Selecting a child requests routing; expanding its parent never navigates. /\n @Event() dsNavChildSelect!: EventEmitter<PanelNavChildSelectDetail>;\n @Event() dsBrowseContextChange!: EventEmitter<NavChromeStyle>;\n @Event() dsClose!: EventEmitter<void>;\n @State() private expandedParentId = '';\n private readonly instanceId = nextSheetId++;\n\n private get groups(): PanelNavGroup[] {\n return this.browseContext === 'settings' ? this.settingsGroups : this.dashboardGroups;\n }\n\n private get selection() {\n return derivePanelNavSelectionFromUrl(\n this.routeSelectionActive ? this.currentUrl : '',\n this.groups.flatMap(group => group.items)\n );\n }\n\n componentWillLoad() {\n this.syncExpandedParent();\n }\n\n @Watch('presentation')\n @Watch('currentUrl')\n @Watch('browseContext')\n @Watch('routeSelectionActive')\n syncExpandedParent() {\n this.expandedParentId = this.presentation === 'nested' ? this.selection.parentId : '';\n }\n\n @Watch('open')\n handleOpenChange(open: boolean) {\n if (!open) return;\n this.syncExpandedParent();\n requestAnimationFrame(() => {\n const selected = this.el.querySelector<HTMLElement>('[aria-current=\"page\"]');\n const first = this.el.querySelector<HTMLElement>('.mobile-sheet-nav__item:not(:disabled)');\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 renderItem(item: PanelNavItem) {\n const selected = item.id === this.selection.parentId;\n const disclosure = this.presentation === 'nested' && !!item.children?.length;\n const expanded = disclosure && item.id === this.expandedParentId;\n return (\n <button\n id={this.parentId(item.id)}\n type=\"button\"\n class={{\n 'mobile-sheet-nav__item': true,\n 'mobile-sheet-nav__item--selected': selected,\n 'mobile-sheet-nav__parent--muted':\n this.presentation === 'nested' &&\n this.expandedParentId !== '' &&\n this.expandedParentId !== item.id,\n 'ds-control--lg': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n aria-current={selected && !disclosure ? 'page' : undefined}\n aria-expanded={disclosure ? String(expanded) : undefined}\n aria-controls={disclosure ? this.childrenId(item.id) : undefined}\n onClick={() =>\n disclosure\n ? (this.expandedParentId = expanded ? '' : item.id)\n : this.dsAreaSelect.emit(item.id)\n }\n >\n <ds-icon class=\"ds-interaction-fill__content\" name={item.icon} size=\"lg\" color=\"inherit\" />\n <ds-text\n class=\"mobile-sheet-nav__item-label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-large\"\n emphasis={selected}\n color=\"inherit\"\n lineTruncation={1}\n >\n {item.label}\n </ds-text>\n {item.dot && (\n <ds-badge\n class=\"mobile-sheet-nav__dot ds-interaction-fill__content\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </button>\n );\n }\n\n private parentId(id: string) {\n return `mobile-sheet-${this.instanceId}-${encodeURIComponent(id)}`;\n }\n private childrenId(id: string) {\n return `${this.parentId(id)}-children`;\n }\n\n private renderChild(parent: PanelNavItem, child: PanelNavChildItem, index: number) {\n const selected = parent.id === this.selection.parentId && child.id === this.selection.childId;\n return (\n <button\n type=\"button\"\n disabled={child.isInactive}\n class={{\n 'mobile-sheet-nav__item': true,\n 'mobile-sheet-nav__child': true,\n 'mobile-sheet-nav__item--selected': selected,\n 'ds-nav-disclosure__item': true,\n 'ds-control--lg': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n style={{\n '--ds-nav-disclosure-index': String(index),\n '--ds-nav-disclosure-reverse-index': String((parent.children?.length ?? 0) - index - 1),\n }}\n aria-current={selected ? 'page' : undefined}\n onClick={() => {\n if (!child.isInactive)\n this.dsNavChildSelect.emit({\n parentId: parent.id,\n childId: child.id,\n href: child.href,\n });\n }}\n onKeyDown={(event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.expandedParentId = '';\n this.el.querySelector<HTMLElement>(`#${CSS.escape(this.parentId(parent.id))}`)?.focus();\n }\n }}\n >\n <ds-text\n class=\"mobile-sheet-nav__item-label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-large\"\n emphasis={selected}\n color=\"inherit\"\n lineTruncation={1}\n >\n {child.label}\n </ds-text>\n {child.dot ? (\n <ds-badge\n class=\"mobile-sheet-nav__dot ds-interaction-fill__content\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n aria-hidden=\"true\"\n />\n ) : null}\n </button>\n );\n }\n\n private renderBranchDivider(position: 'before' \| 'after', expanded: boolean) {\n return (\n <div\n class={{\n 'ds-nav-disclosure-divider': true,\n 'ds-nav-disclosure-divider--open': expanded,\n 'mobile-sheet-nav__divider': true,\n [`mobile-sheet-nav__divider--${position}`]: true,\n }}\n aria-hidden=\"true\"\n >\n <div class=\"ds-nav-disclosure-divider__clip\">\n <span class=\"mobile-sheet-nav__divider-line\" />\n </div>\n </div>\n );\n }\n\n private renderBranch(item: PanelNavItem, index: number, count: number) {\n const hasChildren = this.presentation === 'nested' && !!item.children?.length;\n const expanded = hasChildren && this.expandedParentId === item.id;\n return (\n <div key={item.id} class=\"mobile-sheet-nav__branch\">\n {hasChildren && index > 0 ? this.renderBranchDivider('before', expanded) : null}\n {this.renderItem(item)}\n {this.presentation === 'nested' && item.children?.length ? (\n <div\n class={{ 'ds-nav-disclosure': true, 'ds-nav-disclosure--open': expanded }}\n inert={!expanded ? true : undefined}\n aria-hidden={!expanded ? 'true' : undefined}\n >\n <div\n class=\"mobile-sheet-nav__children\"\n id={this.childrenId(item.id)}\n role=\"group\"\n aria-labelledby={this.parentId(item.id)}\n >\n {item.children.map((child, index) => this.renderChild(item, child, index))}\n </div>\n </div>\n ) : null}\n {hasChildren && index < count - 1 ? this.renderBranchDivider('after', expanded) : null}\n </div>\n );\n }\n\n private renderLogo() {\n return (\n <span class=\"mobile-sheet-nav__logo\" aria-hidden=\"true\">\n {/ eslint-disable-next-line compomo/prefer-ds-icon -- Motive brand mark is not part of the IcoMo runtime catalog. */}\n <svg\n class=\"mobile-sheet-nav__logo-mark\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n );\n }\n\n private renderHeaderDestination(\n id: MobileSheetNavHeaderDestinationId,\n icon: string,\n label: string\n ) {\n return (\n <ds-tooltip label={label} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n variant=\"icon\"\n size=\"lg\"\n icon={icon}\n aria-label={label}\n activeFill={false}\n hasBorder={false}\n onDsClick={() => this.dsAreaSelect.emit(id)}\n />\n </ds-tooltip>\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 id=\"ds-mobile-sheet-nav\" class=\"mobile-sheet-nav\">\n <header\n class={{\n 'mobile-sheet-nav__header': true,\n 'mobile-sheet-nav__header--expanded-context': !this.showAccount,\n 'ds-chrome-grid': true,\n 'ds-chrome-space--md': true,\n }}\n >\n <div class=\"mobile-sheet-nav__brand\">{this.renderLogo()}</div>\n <ds-tab-group\n class=\"mobile-sheet-nav__context\"\n tabs={contextTabs}\n value={this.browseContext}\n size=\"lg\"\n width={this.showAccount ? 'hug' : 'fill'}\n aria-label=\"Browse context\"\n onDsChange={this.handleContextChange}\n />\n <div class=\"mobile-sheet-nav__actions\">\n {this.renderHeaderDestination('help', 'QuestionCircle', this.helpLabel)}\n {this.showAccount\n ? this.renderHeaderDestination('account', 'PersonCircle', this.accountLabel)\n : null}\n </div>\n </header>\n\n <nav\n class=\"mobile-sheet-nav__body ds-chrome-column ds-chrome-space--md\"\n aria-label={this.navigationLabel}\n >\n <div class=\"mobile-sheet-nav__sections\">\n {this.groups\n .filter(group => group.items.length > 0)\n .map(group => (\n <div class=\"mobile-sheet-nav__items\">\n {group.items.map((item, index) =>\n this.renderBranch(item, index, group.items.length)\n )}\n </div>\n ))}\n </div>\n </nav>\n </section>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-YFjXYN8s.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{p as o,H as i,c as e,h as s,a as t,t as r}from"./index.js";import{A as a,r as d,d as n}from"./p-BJf49edB.js";import{C as c}from"./p-DlsjHRU3.js";import{A as l}from"./p-CwUXroLs.js";import{b as u,d as p,C as h}from"./p-Tf6odBOV.js";import{d as g}from"./p-BWJb2rih.js";import{d as f}from"./p-kL4EOsx5.js";import{d as v}from"./p-IfsszNF0.js";import{d as m}from"./p-D_iZPukF.js";import{d as b}from"./p-BcmJBzB6.js";import{d as x}from"./p-BVsVUnAw.js";import{d as w}from"./p-0XTyQNRG.js";import{d as y}from"./p-BbvAWFJA.js";import{r as _}from"./p-ioGH5SoA.js";import{r as k}from"./p-DhKvqh5G.js";import{b as z,T as C,a as j}from"./p-CeXf9-X3.js";const T=()=>`.sc-ds-data-group-h,.sc-ds-data-group:where(.ds-table),.sc-ds-data-group:where(.tooltip-popup),.sc-ds-data-group:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}@media (forced-colors: active){.sc-ds-data-group:root,.sc-ds-data-group-h,.ds-forced-colors-scope.sc-ds-data-group{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-data-group-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-data-group-h,.ds-focus-ring.sc-ds-data-group,.ds-focus-ring-inset.sc-ds-data-group-h,.ds-focus-ring-inset.sc-ds-data-group{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-data-group-h:focus-visible,.ds-focus-ring.sc-ds-data-group: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-data-group-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-data-group{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-data-group-h:focus-visible,.ds-focus-ring-inset.sc-ds-data-group:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-data-group-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-data-group: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-data-group-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-data-group{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-data-group-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-data-group::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-data-group-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-data-group:root,.sc-ds-data-group-h,.ds-forced-colors-scope.sc-ds-data-group{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@media (forced-colors: active){.sc-ds-data-group:root,.sc-ds-data-group-h,.ds-forced-colors-scope.sc-ds-data-group{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-data-group-h,.ds-interaction-fill.sc-ds-data-group{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--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-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-data-group-h::before,.ds-interaction-fill.sc-ds-data-group::before,.ds-interaction-fill.sc-ds-data-group-h::after,.ds-interaction-fill.sc-ds-data-group::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-data-group-h::before,.ds-interaction-fill.sc-ds-data-group::before{z-index:1}.ds-interaction-fill.sc-ds-data-group-h::after,.ds-interaction-fill.sc-ds-data-group::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-data-group-h,.ds-interaction-fill--bordered.sc-ds-data-group{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-data-group-h::before,.ds-interaction-fill--selected.sc-ds-data-group::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-data-group-h,.ds-interaction-fill--selected.sc-ds-data-group{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-data-group-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-data-group:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-data-group-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-data-group:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-data-group-h::after,.ds-interaction-fill--grouped.sc-ds-data-group::after,.ds-interaction-fill--grouped.sc-ds-data-group-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-data-group:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-data-group-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-data-group:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-data-group-h,.ds-interaction-fill--grouped.sc-ds-data-group{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-data-group-h>.ds-interaction-fill__content.sc-ds-data-group,.ds-interaction-fill.sc-ds-data-group>.ds-interaction-fill__content.sc-ds-data-group,.ds-interaction-fill__content.sc-ds-data-group{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-data-group-h,.ds-interaction-fill--on-faint.sc-ds-data-group{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-data-group-h,.ds-interaction-fill--on-medium.sc-ds-data-group{--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-data-group-h,.ds-interaction-fill--on-bold.sc-ds-data-group{--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-data-group-h,.ds-interaction-fill--on-strong.sc-ds-data-group{--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-data-group-h,.ds-interaction-fill--on-translucent.sc-ds-data-group{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-data-group-h,.ds-interaction-fill--on-inverted.sc-ds-data-group{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-data-group-h,.ds-interaction-fill--on-media.sc-ds-data-group{--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-data-group-h,.ds-interaction-fill--on-always-dark.sc-ds-data-group{--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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-data-group-h,.ds-interaction-fill--on-chrome.sc-ds-data-group{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-data-group-h,.ds-interaction-fill--on-navigation.sc-ds-data-group{--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-interaction-fill.ds-interaction-fill--surface-open.sc-ds-data-group-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-data-group:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-data-group-h::after,.ds-interaction-fill.sc-ds-data-group::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-data-group-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-data-group:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-data-group-h::before,.ds-interaction-fill--selected.sc-ds-data-group::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-data-group-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-data-group:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-data-group:root,.sc-ds-data-group-h,.ds-forced-colors-scope.sc-ds-data-group{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-data-group-h,.ds-control-inactive.sc-ds-data-group{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-data-group-h,.ds-control-inactive.sc-ds-data-group{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-data-group,.ds-control--lg.sc-ds-data-group-h,.ds-control--md.sc-ds-data-group-h,.ds-control--md.sc-ds-data-group,.ds-control--sm.sc-ds-data-group-h,.ds-control--sm.sc-ds-data-group,.ds-control--xs.sc-ds-data-group-h,.ds-control--xs.sc-ds-data-group{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-data-group-h,.ds-control--lg.sc-ds-data-group{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-data-group-h,.ds-control--md.sc-ds-data-group{--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-data-group-h,.ds-control--sm.sc-ds-data-group{--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-data-group-h,.ds-control--xs.sc-ds-data-group{--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-chrome-space--sm.sc-ds-data-group-h,.ds-chrome-space--sm.sc-ds-data-group{--ds-chrome-padding:var(--ds-chrome-space-sm-padding, var(--dimension-space-050));--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-data-group-h,.ds-chrome-space--md.sc-ds-data-group{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-data-group-h,.ds-chrome-space--lg.sc-ds-data-group{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-data-group-h,.ds-chrome-row.sc-ds-data-group,.ds-chrome-column.sc-ds-data-group-h,.ds-chrome-column.sc-ds-data-group,.ds-chrome-grid.sc-ds-data-group-h,.ds-chrome-grid.sc-ds-data-group{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-data-group-h,.ds-chrome-row.sc-ds-data-group{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-data-group-h,.ds-chrome-column.sc-ds-data-group{flex-direction:column}.ds-chrome-grid.sc-ds-data-group-h,.ds-chrome-grid.sc-ds-data-group{display:grid;align-items:center}.ds-control-frame.sc-ds-data-group{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-data-group{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-control-icon-box.sc-ds-data-group{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-data-group{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-data-group{position:relative;padding-inline-end:calc( var(--ds-control-label-inset, var(--dimension-space-025)) + var(--ds-control-gap, var(--dimension-space-050)) )}.ds-control-label-dot__badge.sc-ds-data-group{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-empty-region.sc-ds-data-group{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0}.ds-empty-region--padded.sc-ds-data-group{padding:var(--dimension-space-200)}.sc-ds-data-group:where(.ds-text-decoration,.ds-text-action).sc-ds-data-group{text-decoration-color:var(--ds-text-decoration-color, var(--color-foreground-tertiary));text-decoration-thickness:var(--ds-text-decoration-thickness, var(--dimension-stroke-width-012));text-underline-offset:var(--ds-text-decoration-offset, var(--dimension-space-025))}.ds-text-action.sc-ds-data-group{--ds-text-action-foreground:var(--color-foreground-bold-brand);--ds-text-decoration-color:var(--ds-text-action-foreground);color:var(--ds-text-action-foreground);text-decoration-line:none}.ds-text-action--on-medium.sc-ds-data-group{--ds-text-action-foreground:var(--color-foreground-on-medium-background-primary);--ds-text-decoration-color:var(--color-foreground-on-medium-background-secondary);text-decoration-line:underline}.ds-text-action--on-strong.sc-ds-data-group{--ds-text-action-foreground:var(--color-foreground-on-strong-background-primary);--ds-text-decoration-color:var(--color-foreground-on-strong-background-secondary);text-decoration-line:underline}.ds-text-action--on-bold.sc-ds-data-group{--ds-text-action-foreground:var(--color-foreground-on-bold-background-primary);--ds-text-decoration-color:var(--color-foreground-on-bold-background-secondary);text-decoration-line:underline}@media (hover: hover) and (pointer: fine){.ds-text-action.sc-ds-data-group:hover{text-decoration-line:underline}}@media (forced-colors: active){.ds-text-action.sc-ds-data-group{text-decoration-line:underline;text-decoration-color:currentcolor}}.ds-choice-popup.sc-ds-data-group{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--ds-choice-popup-min-inline-size, var(--dimension-menu-width-xs));max-width:min(var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)));max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--ds-radius-menu);box-shadow:var(--effect-shadow-elevated-floating);color:var(--color-foreground-secondary);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-data-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-data-group{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-data-group{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-data-group{opacity:0}}@media (forced-colors: active){.ds-choice-popup.sc-ds-data-group{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.ds-choice-popup.sc-ds-data-group::after{box-shadow:none}}.ds-choice-list.sc-ds-data-group{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section--divided.sc-ds-data-group{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-data-group{text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-section--headed-after-first.sc-ds-data-group{margin-block-start:var(--dimension-space-050)}.select-option-row.sc-ds-data-group{display:flex;flex-direction:column;min-width:0}.ds-choice-item.sc-ds-data-group{width:100%;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:default;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-data-group:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item.ds-control--xs.sc-ds-data-group:has(.ds-choice-item__subtext){padding-block:0}.ds-choice-item__content.sc-ds-data-group{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-data-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-data-group{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-data-group,.ds-choice-item__suffix.sc-ds-data-group{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-item.ds-interaction-fill--selected.sc-ds-data-group .ds-choice-item__icon.sc-ds-data-group{color:var(--color-foreground-primary)}.ds-choice-item__tag.sc-ds-data-group{flex-shrink:0;pointer-events:none}.ds-choice-empty.sc-ds-data-group,.ds-choice-loading.sc-ds-data-group{min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-data-group{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-data-group::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-data-group{display:flex;align-items:center;justify-content:space-between;column-gap:var(--dimension-space-050);box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400))}.ds-choice-footer__summary.sc-ds-data-group,.ds-choice-footer__summary-measure.sc-ds-data-group,.ds-choice-footer__clear.sc-ds-data-group ds-text.sc-ds-data-group,.ds-choice-footer__action.sc-ds-data-group ds-text.sc-ds-data-group{padding-inline:calc( var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-choice-footer__summary.sc-ds-data-group,.ds-choice-footer__summary-measure.sc-ds-data-group,.ds-choice-footer__clear.sc-ds-data-group,.ds-choice-footer__action.sc-ds-data-group{white-space:nowrap}.ds-choice-footer__summary-measure.sc-ds-data-group{position:absolute;visibility:hidden;pointer-events:none}.ds-choice-footer__clear.sc-ds-data-group,.ds-choice-footer__action.sc-ds-data-group{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;cursor:default}@media (forced-colors: active){.ds-choice-section--divided.sc-ds-data-group{border-bottom-color:var(--ds-forced-color-content)}.ds-choice-footer.sc-ds-data-group::before{background-color:var(--ds-forced-color-content)}}.ds-control-frame.sc-ds-data-group{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-data-group{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-control-icon-box.sc-ds-data-group{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-data-group{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-data-group{position:relative;padding-inline-end:calc( var(--ds-control-label-inset, var(--dimension-space-025)) + var(--ds-control-gap, var(--dimension-space-050)) )}.ds-control-label-dot__badge.sc-ds-data-group{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-table-caption-control.sc-ds-data-group-h{--ds-choice-popup-min-inline-size:var(--dimension-menu-width-xs)}.ds-table-caption-control.ds-table-caption-control--compact.sc-ds-data-group-h{flex:0 0 auto;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));max-width:var(--ds-control-height, var(--dimension-size-400));inline-size:var(--ds-control-height, var(--dimension-size-400));min-inline-size:var(--ds-control-height, var(--dimension-size-400));max-inline-size:var(--ds-control-height, var(--dimension-size-400))}.ds-table-caption-control.ds-table-caption-control--compact.sc-ds-data-group-h .trigger.sc-ds-data-group{justify-content:center;inline-size:100%;min-inline-size:100%;height:100%;padding-inline:0}.ds-table-caption-control.ds-table-caption-control--compact.sc-ds-data-group-h .trigger--has-value.sc-ds-data-group:not(.trigger--label-placeholder){--ds-select-prefix-fg:var(--ds-select-fg-active)}.sc-ds-data-group-h{display:inline-flex;min-inline-size:0;max-inline-size:var(--dimension-menu-width-xs)}[hidden].sc-ds-data-group-h{display:none}.data-group__body.sc-ds-data-group{display:grid;grid-template-columns:var(--dimension-menu-width-xs) var(--dimension-menu-width-sm);min-height:calc(var(--dimension-size-800) * 4 + var(--dimension-space-150));max-height:calc(100vh - var(--dimension-size-800) - var(--dimension-size-600))}.data-group__data-pane.sc-ds-data-group,.data-group__order-pane.sc-ds-data-group{display:flex;min-width:0;min-height:0;flex-direction:column}.data-group__data-pane.sc-ds-data-group{border-inline-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.data-group__list.sc-ds-data-group{flex:1 1 auto}.data-group__empty.sc-ds-data-group{flex:1 1 auto}.data-group__footer.sc-ds-data-group{flex:0 0 auto}.data-group__footer.sc-ds-data-group .ds-choice-footer__content.sc-ds-data-group{justify-content:flex-start}.data-group__footer[aria-hidden='true'].sc-ds-data-group::before{visibility:hidden}.data-group__footer[aria-hidden='true'].sc-ds-data-group .ds-choice-footer__content.sc-ds-data-group{visibility:hidden}@media (forced-colors: active){.data-group__data-pane.sc-ds-data-group{border-inline-end-color:var(--ds-forced-color-content)}}.data-preferences-embedded.sc-ds-data-group{display:flex;flex-direction:column;min-width:0;min-height:0;color:var(--color-foreground-secondary)}.sc-ds-data-group-h:has(.data-preferences-embedded){display:block;max-inline-size:none}.data-preferences-embedded.sc-ds-data-group .data-group__body.sc-ds-data-group{grid-template-columns:min(var(--dimension-menu-width-xs), 40%) minmax(0, 1fr)}.data-group-vertical.sc-ds-data-group-h .data-group__body.sc-ds-data-group{grid-template-columns:minmax(0, 1fr)}.data-group-vertical.sc-ds-data-group-h .data-group__data-pane.sc-ds-data-group{border-inline-end:0}.data-group-vertical.sc-ds-data-group-h .data-group__footer.sc-ds-data-group{display:none}`;const O=[{label:"Ascending",direction:"asc"},{label:"Descending",direction:"desc"}];let E=0;const D=o(class o extends i{constructor(o){super();if(o!==false){this.__registerHost()}this.dsGroupChange=e(this,"dsGroupChange",7);this.dsClear=e(this,"dsClear",7);this.dsOpenChange=e(this,"dsOpenChange",7);this.hasBorder=true;this.vertical=false;this.embedded=false;this.options=[];this.grouping=null;this.ariaLabel=null;this.open=false;this.emptyMessage="Select a group to choose its order.";this.clearLabel="Clear";this.shouldRender=false;this.closing=false;this.positionReady=false;this.pos={x:0,y:0};this.focusRingVisible=false;this.componentId=`ds-data-group-${++E}`;this.triggerId=`${this.componentId}-trigger`;this.popupId=`${this.componentId}-popup`;this.triggerElement=null;this.pendingInitialFocusVisible=false;this.closeTimer=null;this.loaded=false;this.tasks=new c((()=>this.el.isConnected));this.position=new a({getAnchor:()=>this.triggerElement,getPopup:()=>this.el.querySelector(".data-group-popup"),getOwnerDocument:()=>this.el.ownerDocument,measure:(o,i)=>{if(!this.open)return null;const e=_(C.space050,C.space050);return{anchorRect:o.getBoundingClientRect(),popupWidth:i.offsetWidth\|\|this.popupFallbackWidth,popupHeight:i.offsetHeight\|\|this.popupFallbackHeight,side:"bottom",align:"end",sideOffsetPx:_(j.space050,C.space050),alignOffsetPx:k({align:"end",alignOffsetPx:0,sectionInsetPx:e}),viewportPadPx:_(C.space050,C.space050),viewportWidth:window.innerWidth,viewportHeight:window.innerHeight,collisionRect:d(o)}},apply:({x:o,y:i})=>{this.pos={x:o,y:i}},onReady:()=>{this.positionReady=true},liveUpdate:"double-frame",observeResize:true,topLayer:true});this.interaction=new l({getAnchor:()=>this.triggerElement,getPopup:()=>this.el.querySelector(".data-group-popup"),getOwnerDocument:()=>this.el.ownerDocument,onOutsideActivation:()=>this.close()})}componentDidLoad(){this.loaded=true;if(this.open)this.onOpenChange(true)}connectedCallback(){if(this.loaded&&this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardown();this.shouldRender=false;this.closing=false;this.positionReady=false;this.pendingInitialFocusVisible=false}onOpenChange(o){if(this.embedded\|\|!this.loaded\|\|!this.el.isConnected)return;if(o){this.teardown();this.shouldRender=true;this.closing=false;this.positionReady=false;this.focusRingVisible=this.pendingInitialFocusVisible;this.interaction.connect();this.position.observe();this.position.schedule((()=>this.focusInitialDataPoint()));return}if(!this.shouldRender\|\|this.closing)return;this.tasks.cancel();this.position.cancel();this.closing=true;this.interaction.disconnect();this.position.unobserve();const i=z(C.motionShort2,C.animationDurationShort3);if(i<=0)this.finishClose();else this.closeTimer=setTimeout((()=>this.finishClose()),i)}handleKeyDown(o){if(this.embedded&&(o.key==="Escape"\|\|o.key==="Tab"))return;if(!this.shouldRender&&!this.embedded\|\|this.closing)return;if(o.key==="Escape"){o.preventDefault();this.close();return}if(o.key!=="Tab"\|\|!this.interaction.tabLeavesPopup(o))return;o.preventDefault();this.close(false);this.interaction.moveFocusAfterTab(o.shiftKey)}get popupFallbackWidth(){return _(C.menuWidthLg,C.menuWidthLg)}get popupFallbackHeight(){return _(C.menuFallbackHeight,C.menuFallbackHeight)}teardown(){this.tasks.cancel();this.position.unobserve();this.interaction.disconnect();if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}toggle(o=false){if(this.open){this.close();return}this.pendingInitialFocusVisible=o;this.open=true;this.dsOpenChange.emit(true);this.onOpenChange(true)}close(o=true){if(o)this.interaction.focusAnchor();this.open=false;this.dsOpenChange.emit(false);this.onOpenChange(false)}finishClose(){if(this.open\|\|!this.closing\|\|!this.el.isConnected)return;const o=this.el.querySelector(".data-group-popup");if(o?.matches(":popover-open"))o.hidePopover();this.shouldRender=false;this.closing=false;this.closeTimer=null}focusInitialDataPoint(){this.tasks.frame((()=>{if(!this.open\|\|this.closing)return;const o=this.grouping?this.el.querySelector(`[data-group-value="${CSS.escape(this.grouping.fieldId)}"] [role="option"]`):null;const i=o??this.el.querySelector('[data-group-value] [role="option"]:not([aria-disabled="true"])');i?.focus();this.pendingInitialFocusVisible=false}))}selectData(o){if(o.value==="__none__"){this.dsClear.emit();return}if(o.isInactive)return;if(this.grouping?.fieldId===o.value){this.dsGroupChange.emit({...this.grouping});return}const i=o.orderOptions?.[0];this.dsGroupChange.emit({fieldId:o.value,direction:i?.direction??"asc",...i?.orderBy?{orderBy:i.orderBy}:{}})}get activeOrderOptions(){const o=this.options.find((o=>o.value===this.grouping?.fieldId))?.orderOptions;return o?.length?o:O}get selectedOrderIndex(){if(!this.grouping)return-1;const o=this.activeOrderOptions.findIndex((o=>o.direction===this.grouping?.direction&&o.orderBy===this.grouping?.orderBy));if(o>=0)return o;if(this.grouping.orderBy===undefined){return this.activeOrderOptions.findIndex((o=>o.direction===this.grouping?.direction))}return-1}selectOrder(o,i){if(!this.grouping\|\|this.selectedOrderIndex===i)return;const e={fieldId:this.grouping.fieldId,direction:o.direction};if(o.orderBy)e.orderBy=o.orderBy;this.dsGroupChange.emit(e)}moveFocus(o,i,e,s){if(s&&(o.key==="ArrowLeft"\|\|o.key==="ArrowRight")){o.preventDefault();this.focusRingVisible=true;this.el.querySelector(s)?.focus();return}if(!["ArrowDown","ArrowUp","Home","End"].includes(o.key))return;o.preventDefault();const t=Array.from(this.el.querySelectorAll(i)).filter((o=>o.getAttribute("aria-disabled")!=="true"));if(!t.length)return;let r;if(o.key==="Home")r=0;else if(o.key==="End")r=t.length-1;else r=(e+(o.key==="ArrowDown"?1:-1)+t.length)%t.length;this.focusRingVisible=true;t[r]?.focus()}renderDataOption(o,i){const e=o.value==="__none__"?!this.grouping:o.value===this.grouping?.fieldId;return s(h,{id:`${this.componentId}-data-${i}`,option:{...o},selected:e,active:e,focusRingVisible:this.focusRingVisible,usesSubtext:Boolean(o.description),tabIndex:e\|\|!this.grouping&&i===0?0:-1,onHover:()=>{this.focusRingVisible=false},onSelect:()=>this.selectData(o),onKeyDown:i=>{if(i.key==="Enter"\|\|i.key===" "){i.preventDefault();this.selectData(o);return}this.moveFocus(i,'[data-group-value] [role="option"]',this.options.filter((o=>!o.isInactive)).findIndex((i=>i.value===o.value)),this.grouping?`[data-group-order-index="${this.selectedOrderIndex}"] [role="option"]`:undefined)}})}renderOrder(o,i){const e=i===this.selectedOrderIndex;return s(h,{id:`${this.componentId}-order-${i}`,option:{label:o.label,value:String(i)},selected:e,active:e,focusRingVisible:this.focusRingVisible,usesSubtext:false,tabIndex:e?0:-1,onHover:()=>{this.focusRingVisible=false},onSelect:()=>this.selectOrder(o,i),onKeyDown:e=>{if(e.key==="Enter"\|\|e.key===" "){e.preventDefault();this.selectOrder(o,i);return}this.moveFocus(e,'[data-group-order-index] [role="option"]',i,`[data-group-value="${CSS.escape(this.grouping?.fieldId??"")}"] [role="option"]`)}})}render(){const o=this.ariaLabel?.trim()\|\|"Group table";const i={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};return s(t,{key:"aef6b3065e081df1e049281537538372ca849a77",class:{"data-group-vertical":this.vertical},hidden:this.options.length===0?true:undefined},this.options.length&&!this.embedded?s("ds-button-unfilled",{hasBorder:this.hasBorder,ref:o=>{this.triggerElement=o??null},id:this.triggerId,variant:"icon-label",size:"md",icon:"SectionList",label:"Group",labelEmphasis:false,pressScale:false,"aria-label":o,haspopup:"dialog",collapseLabel:true,expanded:this.open,surfaceOpen:this.open\|\|this.closing,controls:this.popupId,onDsClick:o=>this.toggle(o.detail.detail===0)}):null,this.shouldRender\|\|this.embedded?s("div",{id:this.popupId,popover:this.embedded?undefined:"manual",class:{"data-group-popup":true,"ds-choice-popup":!this.embedded,"data-preferences-embedded":this.embedded,"ds-choice-popup--closing":this.closing},style:this.embedded?undefined:i,role:"dialog","aria-label":o},s("div",{class:"data-group__body"},s("div",{class:"data-group__data-pane"},s(u,{heading:"Data",ariaLabel:"Group data",className:"data-group__list"},this.vertical&&this.renderDataOption({label:"No grouping",value:"__none__"},-1),this.options.map(((o,i)=>s("div",{"data-group-value":o.value},this.renderDataOption(o,i))))),s("div",{hidden:this.vertical,class:"data-group__footer ds-choice-footer","aria-hidden":!this.grouping?"true":undefined},s("div",{class:"ds-choice-footer__content ds-control--md"},this.grouping?s("button",{class:"ds-choice-footer__clear ds-text-action ds-focus-ring",type:"button",onClick:()=>this.dsClear.emit()},s("ds-text",{as:"span",variant:"text-body-medium",color:"inherit"},this.clearLabel)):null))),s("div",{class:"data-group__order-pane"},this.grouping?s(u,{heading:"Order",ariaLabel:"Group order",className:"data-group__list"},this.activeOrderOptions.map(((o,i)=>s("div",{"data-group-order-index":i},this.renderOrder(o,i))))):s("div",{class:"data-group__empty ds-choice-empty ds-empty-region"},s("ds-empty-state",{body:this.emptyMessage}))))):null)}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return T()}},[2,"ds-data-group",{hasBorder:[4,"has-border"],vertical:[4],embedded:[4],options:[16],grouping:[16],ariaLabel:[1,"aria-label"],open:[1028],emptyMessage:[1,"empty-message"],clearLabel:[1,"clear-label"],shouldRender:[32],closing:[32],positionReady:[32],pos:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}]}]);function B(){if(typeof customElements==="undefined"){return}const o=["ds-data-group","ds-badge","ds-button-unfilled","ds-chip","ds-divider","ds-empty-state","ds-icon","ds-input","ds-loader","ds-text","ds-tooltip"];o.forEach((o=>{switch(o){case"ds-data-group":if(!customElements.get(r(o))){customElements.define(r(o),D)}break;case"ds-badge":if(!customElements.get(r(o))){g()}break;case"ds-button-unfilled":if(!customElements.get(r(o))){f()}break;case"ds-chip":if(!customElements.get(r(o))){v()}break;case"ds-divider":if(!customElements.get(r(o))){m()}break;case"ds-empty-state":if(!customElements.get(r(o))){b()}break;case"ds-icon":if(!customElements.get(r(o))){x()}break;case"ds-input":if(!customElements.get(r(o))){p()}break;case"ds-loader":if(!customElements.get(r(o))){w()}break;case"ds-text":if(!customElements.get(r(o))){y()}break;case"ds-tooltip":if(!customElements.get(r(o))){n()}break}}))}B();export{D,B as d};
2	+ //# sourceMappingURL=p-YFjXYN8s.js.map

package/dist/components/{p-Ouk6FCxc.js.map → p-YFjXYN8s.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["dataGroupCss","DEFAULT_ORDER_OPTIONS","label","direction","tableGroupSeq","DataGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","hasBorder","vertical","embedded","options","grouping","ariaLabel","open","emptyMessage","clearLabel","shouldRender","closing","positionReady","pos","x","y","focusRingVisible","componentId","triggerId","popupId","triggerElement","pendingInitialFocusVisible","closeTimer","loaded","tasks","ConnectionTasks","el","isConnected","position","AnchoredPositionController","getAnchor","getPopup","querySelector","getOwnerDocument","ownerDocument","measure","anchor","popup","sectionInsetPx","resolveCssLengthPx","TOKEN_DEFAULTS","space050","anchorRect","getBoundingClientRect","popupWidth","offsetWidth","popupFallbackWidth","popupHeight","offsetHeight","popupFallbackHeight","side","align","sideOffsetPx","TOKEN_CSS_LENGTHS","alignOffsetPx","resolveChoicePopupAlignOffset","viewportPadPx","viewportWidth","window","innerWidth","viewportHeight","innerHeight","collisionRect","resolveAnchoredOverlayBoundaryRect","apply","onReady","liveUpdate","observeResize","topLayer","interaction","AnchoredOverlayInteractionController","onOutsideActivation","close","componentDidLoad","onOpenChange","connectedCallback","disconnectedCallback","teardown","isOpen","connect","observe","schedule","focusInitialDataPoint","cancel","disconnect","unobserve","duration","resolveMotionTimeMs","motionShort2","animationDurationShort3","finishClose","setTimeout","handleKeyDown","event","key","preventDefault","tabLeavesPopup","moveFocusAfterTab","shiftKey","menuWidthLg","menuFallbackHeight","clearTimeout","toggle","fromKeyboard","dsOpenChange","emit","restoreFocus","focusAnchor","matches","hidePopover","frame","selected","CSS","escape","fieldId","initial","focus","selectData","option","value","dsClear","isInactive","dsGroupChange","initialOrder","orderOptions","orderBy","activeOrderOptions","configured","find","length","selectedOrderIndex","exact","findIndex","undefined","selectOrder","index","moveFocus","selector","currentIndex","oppositeSelector","includes","items","Array","from","querySelectorAll","filter","item","getAttribute","next","renderDataOption","h","ChoiceOptionRow","id","active","usesSubtext","Boolean","description","tabIndex","onHover","onSelect","onKeyDown","candidate","renderOrder","String","render","name","trim","popupStyle","left","top","transform","Math","round","zIndex","visibility","Host","class","hidden","ref","element","variant","size","icon","labelEmphasis","pressScale","haspopup","collapseLabel","expanded","surfaceOpen","controls","onDsClick","detail","popover","style","role","ChoiceListSection","heading","className","map","type","onClick","as","color","body"],"sources":["src/wc/components/DataGroup/DataGroup.css?tag=ds-data-group&encapsulation=scoped","src/wc/components/DataGroup/DataGroup.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/choice-list.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/table-caption-control.css';\n\n:host {\n display: inline-flex;\n min-inline-size: 0;\n max-inline-size: var(--dimension-menu-width-xs);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.data-group__body {\n display: grid;\n grid-template-columns: var(--dimension-menu-width-xs) var(--dimension-menu-width-sm);\n min-height: calc(var(--dimension-size-800) * 4 + var(--dimension-space-150));\n max-height: calc(100vh - var(--dimension-size-800) - var(--dimension-size-600));\n}\n\n.data-group__data-pane,\n.data-group__order-pane {\n display: flex;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n}\n\n.data-group__data-pane {\n border-inline-end: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.data-group__list {\n flex: 1 1 auto;\n}\n\n.data-group__empty {\n flex: 1 1 auto;\n}\n\n.data-group__footer {\n flex: 0 0 auto;\n}\n\n.data-group__footer .ds-choice-footer__content {\n justify-content: flex-start;\n}\n\n.data-group__footer[aria-hidden='true']::before {\n visibility: hidden;\n}\n\n.data-group__footer[aria-hidden='true'] .ds-choice-footer__content {\n visibility: hidden;\n}\n\n@media (forced-colors: active) {\n .data-group__data-pane {\n border-inline-end-color: var(--ds-forced-color-content);\n }\n}\n\n.data-preferences-embedded {\n display: flex;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n color: var(--color-foreground-secondary);\n}\n\n:host:has(.data-preferences-embedded) {\n display: block;\n max-inline-size: none;\n}\n.data-preferences-embedded .data-group__body {\n grid-template-columns: min(var(--dimension-menu-width-xs), 40%) minmax(0, 1fr);\n}\n\n:host(.data-group-vertical) .data-group__body {\n grid-template-columns: minmax(0, 1fr);\n}\n:host(.data-group-vertical) .data-group__data-pane {\n border-inline-end: 0;\n}\n\n:host(.data-group-vertical) .data-group__footer {\n display: none;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport {\n resolveChoicePopupAlignOffset,\n resolveCssLengthPx,\n resolveMotionTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { ChoiceListSection, ChoiceOptionRow } from '../../utils/choice-list-parts';\nimport type { DataGroupingState, DataSortDirection } from '../Table/table-types';\n\nexport interface TableGroupOrderOption {\n label: string;\n direction: DataSortDirection;\n /** Optional application-owned data point used to order the group sections. /\n orderBy?: string;\n}\n\nexport interface DataGroupOption {\n label: string;\n value: string;\n description?: string;\n isInactive?: boolean;\n /* Product-owned order choices for this grouping data point. /\n orderOptions?: TableGroupOrderOption[];\n}\n\nconst DEFAULT_ORDER_OPTIONS: TableGroupOrderOption[] = [\n { label: 'Ascending', direction: 'asc' },\n { label: 'Descending', direction: 'desc' },\n];\n\nlet tableGroupSeq = 0;\n\n@Component({\n tag: 'ds-data-group',\n styleUrl: 'DataGroup.css',\n scoped: true,\n})\nexport class DataGroup {\n @Element() private el!: HTMLElement;\n\n /* Product-owned data points that may group the table. /\n /* Render content inside a parent-owned surface; the parent owns dismissal and positioning. /\n /* Show the trigger border. /\n @Prop() hasBorder: boolean = true;\n @Prop() vertical: boolean = false;\n @Prop() embedded: boolean = false;\n @Prop() options: DataGroupOption[] = [];\n /* Controlled grouping field and the order of its group sections. /\n @Prop() grouping: DataGroupingState \| null = null;\n /* Accessible name for the trigger and non-modal dialog. /\n @Prop({ attribute: 'aria-label' }) ariaLabel: string \| null = null;\n /* Controlled popup visibility. /\n @Prop({ mutable: true }) open = false;\n /* Empty message kept in the order pane until a grouping data point is selected. /\n @Prop() emptyMessage = 'Select a group to choose its order.';\n /* Clear action label. /\n @Prop() clearLabel = 'Clear';\n\n /* Requests replacement of the complete controlled grouping state. /\n @Event() dsGroupChange!: EventEmitter<DataGroupingState>;\n /* Requests removal of the controlled grouping state. /\n @Event() dsClear!: EventEmitter<void>;\n /* Reports controlled popup visibility changes. */\n @Event() dsOpenChange!: EventEmitter<boolean>;\n\n @State() private shouldRender = false;\n @State() private closing = false;\n @State() private positionReady = false;\n @State() private pos = { x: 0, y: 0 };\n @State() private focusRingVisible = false;\n\n private readonly componentId = `ds-data-group-${++tableGroupSeq}`;\n private readonly triggerId = `${this.componentId}-trigger`;\n private readonly popupId = `${this.componentId}-popup`;\n private triggerElement: HTMLElement \| null = null;\n private pendingInitialFocusVisible = false;\n private closeTimer: ReturnType<typeof setTimeout> \| null = null;\n private loaded = false;\n private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.triggerElement,\n getPopup: () => this.el.querySelector<HTMLElement>('.data-group-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n measure: (anchor, popup) => {\n if (!this.open) return null;\n const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n return {\n anchorRect: anchor.getBoundingClientRect(),\n popupWidth: popup.offsetWidth \|\| this.popupFallbackWidth,\n popupHeight: popup.offsetHeight \|\| this.popupFallbackHeight,\n side: 'bottom',\n align: 'end',\n sideOffsetPx: resolveCssLengthPx(TOKEN_CSS_LENGTHS.space050, TOKEN_DEFAULTS.space050),\n alignOffsetPx: resolveChoicePopupAlignOffset({\n align: 'end',\n alignOffsetPx: 0,\n sectionInsetPx,\n }),\n viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n };\n },\n apply: ({ x, y }) => {\n this.pos = { x, y };\n },\n onReady: () => {\n this.positionReady = true;\n },\n liveUpdate: 'double-frame',\n observeResize: true,\n topLayer: true,\n });\n\n private readonly interaction = new AnchoredOverlayInteractionController({\n getAnchor: () => this.triggerElement,\n getPopup: () => this.el.querySelector<HTMLElement>('.data-group-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n onOutsideActivation: () => this.close(),\n });\n\n componentDidLoad() {\n this.loaded = true;\n if (this.open) this.onOpenChange(true);\n }\n\n connectedCallback() {\n if (this.loaded && this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.teardown();\n this.shouldRender = false;\n this.closing = false;\n this.positionReady = false;\n this.pendingInitialFocusVisible = false;\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (this.embedded \|\| !this.loaded \|\| !this.el.isConnected) return;\n if (isOpen) {\n this.teardown();\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.focusRingVisible = this.pendingInitialFocusVisible;\n this.interaction.connect();\n this.position.observe();\n this.position.schedule(() => this.focusInitialDataPoint());\n return;\n }\n if (!this.shouldRender \|\| this.closing) return;\n this.tasks.cancel();\n this.position.cancel();\n this.closing = true;\n this.interaction.disconnect();\n this.position.unobserve();\n const duration = resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort2,\n TOKEN_DEFAULTS.animationDurationShort3\n );\n if (duration <= 0) this.finishClose();\n else this.closeTimer = setTimeout(() => this.finishClose(), duration);\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (this.embedded && (event.key === 'Escape' \|\| event.key === 'Tab')) return;\n if ((!this.shouldRender && !this.embedded) \|\| this.closing) return;\n if (event.key === 'Escape') {\n event.preventDefault();\n this.close();\n return;\n }\n if (event.key !== 'Tab' \|\| !this.interaction.tabLeavesPopup(event)) return;\n event.preventDefault();\n this.close(false);\n this.interaction.moveFocusAfterTab(event.shiftKey);\n }\n\n private get popupFallbackWidth(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthLg, TOKEN_DEFAULTS.menuWidthLg);\n }\n\n private get popupFallbackHeight(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private teardown() {\n this.tasks.cancel();\n this.position.unobserve();\n this.interaction.disconnect();\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private toggle(fromKeyboard = false) {\n if (this.open) {\n this.close();\n return;\n }\n this.pendingInitialFocusVisible = fromKeyboard;\n this.open = true;\n this.dsOpenChange.emit(true);\n this.onOpenChange(true);\n }\n\n private close(restoreFocus = true) {\n if (restoreFocus) this.interaction.focusAnchor();\n this.open = false;\n this.dsOpenChange.emit(false);\n this.onOpenChange(false);\n }\n\n private finishClose() {\n if (this.open \|\| !this.closing \|\| !this.el.isConnected) return;\n const popup = this.el.querySelector<HTMLElement>('.data-group-popup');\n if (popup?.matches(':popover-open')) popup.hidePopover();\n this.shouldRender = false;\n this.closing = false;\n this.closeTimer = null;\n }\n\n private focusInitialDataPoint() {\n this.tasks.frame(() => {\n if (!this.open \|\| this.closing) return;\n const selected = this.grouping\n ? this.el.querySelector<HTMLElement>(\n `[data-group-value=\"${CSS.escape(this.grouping.fieldId)}\"] [role=\"option\"]`\n )\n : null;\n const initial =\n selected ??\n this.el.querySelector<HTMLElement>(\n '[data-group-value] [role=\"option\"]:not([aria-disabled=\"true\"])'\n );\n initial?.focus();\n this.pendingInitialFocusVisible = false;\n });\n }\n\n private selectData(option: DataGroupOption) {\n if (option.value === '__none__') {\n this.dsClear.emit();\n return;\n }\n if (option.isInactive) return;\n if (this.grouping?.fieldId === option.value) {\n this.dsGroupChange.emit({ ...this.grouping });\n return;\n }\n const initialOrder = option.orderOptions?.[0];\n this.dsGroupChange.emit({\n fieldId: option.value,\n direction: initialOrder?.direction ?? 'asc',\n ...(initialOrder?.orderBy ? { orderBy: initialOrder.orderBy } : {}),\n });\n }\n\n private get activeOrderOptions(): TableGroupOrderOption[] {\n const configured = this.options.find(\n option => option.value === this.grouping?.fieldId\n )?.orderOptions;\n return configured?.length ? configured : DEFAULT_ORDER_OPTIONS;\n }\n\n private get selectedOrderIndex(): number {\n if (!this.grouping) return -1;\n const exact = this.activeOrderOptions.findIndex(\n option =>\n option.direction === this.grouping?.direction && option.orderBy === this.grouping?.orderBy\n );\n if (exact >= 0) return exact;\n if (this.grouping.orderBy === undefined) {\n return this.activeOrderOptions.findIndex(\n option => option.direction === this.grouping?.direction\n );\n }\n return -1;\n }\n\n private selectOrder(option: TableGroupOrderOption, index: number) {\n if (!this.grouping \|\| this.selectedOrderIndex === index) return;\n const grouping: DataGroupingState = {\n fieldId: this.grouping.fieldId,\n direction: option.direction,\n };\n if (option.orderBy) grouping.orderBy = option.orderBy;\n this.dsGroupChange.emit(grouping);\n }\n\n private moveFocus(\n event: KeyboardEvent,\n selector: string,\n currentIndex: number,\n oppositeSelector?: string\n ) {\n if (oppositeSelector && (event.key === 'ArrowLeft' \|\| event.key === 'ArrowRight')) {\n event.preventDefault();\n this.focusRingVisible = true;\n this.el.querySelector<HTMLElement>(oppositeSelector)?.focus();\n return;\n }\n if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n event.preventDefault();\n const items = Array.from(this.el.querySelectorAll<HTMLElement>(selector)).filter(\n item => item.getAttribute('aria-disabled') !== 'true'\n );\n if (!items.length) return;\n let next: number;\n if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = items.length - 1;\n else next = (currentIndex + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;\n this.focusRingVisible = true;\n items[next]?.focus();\n }\n\n private renderDataOption(option: DataGroupOption, index: number) {\n const selected =\n option.value === '__none__' ? !this.grouping : option.value === this.grouping?.fieldId;\n return (\n <ChoiceOptionRow\n id={`${this.componentId}-data-${index}`}\n option={{ ...option }}\n selected={selected}\n active={selected}\n focusRingVisible={this.focusRingVisible}\n usesSubtext={Boolean(option.description)}\n tabIndex={selected \|\| (!this.grouping && index === 0) ? 0 : -1}\n onHover={() => {\n this.focusRingVisible = false;\n }}\n onSelect={() => this.selectData(option)}\n onKeyDown={(event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.selectData(option);\n return;\n }\n this.moveFocus(\n event,\n '[data-group-value] [role=\"option\"]',\n this.options\n .filter(candidate => !candidate.isInactive)\n .findIndex(candidate => candidate.value === option.value),\n this.grouping\n ? `[data-group-order-index=\"${this.selectedOrderIndex}\"] [role=\"option\"]`\n : undefined\n );\n }}\n />\n );\n }\n\n private renderOrder(option: TableGroupOrderOption, index: number) {\n const selected = index === this.selectedOrderIndex;\n return (\n <ChoiceOptionRow\n id={`${this.componentId}-order-${index}`}\n option={{ label: option.label, value: String(index) }}\n selected={selected}\n active={selected}\n focusRingVisible={this.focusRingVisible}\n usesSubtext={false}\n tabIndex={selected ? 0 : -1}\n onHover={() => {\n this.focusRingVisible = false;\n }}\n onSelect={() => this.selectOrder(option, index)}\n onKeyDown={(event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.selectOrder(option, index);\n return;\n }\n this.moveFocus(\n event,\n '[data-group-order-index] [role=\"option\"]',\n index,\n `[data-group-value=\"${CSS.escape(this.grouping?.fieldId ?? '')}\"] [role=\"option\"]`\n );\n }}\n />\n );\n }\n\n render() {\n const name = this.ariaLabel?.trim() \|\| 'Group table';\n const popupStyle: Record<string, string> = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: '9998',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n return (\n <Host\n class={{ 'data-group-vertical': this.vertical }}\n hidden={this.options.length === 0 ? true : undefined}\n >\n {this.options.length && !this.embedded ? (\n <ds-button-unfilled\n hasBorder={this.hasBorder}\n ref={element => {\n this.triggerElement = (element as HTMLElement) ?? null;\n }}\n id={this.triggerId}\n variant=\"icon-label\"\n size=\"md\"\n icon=\"SectionList\"\n label=\"Group\"\n labelEmphasis={false}\n pressScale={false}\n aria-label={name}\n haspopup=\"dialog\"\n collapseLabel={true}\n expanded={this.open}\n surfaceOpen={this.open \|\| this.closing}\n controls={this.popupId}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.toggle(event.detail.detail === 0)}\n />\n ) : null}\n\n {this.shouldRender \|\| this.embedded ? (\n <div\n id={this.popupId}\n popover={this.embedded ? undefined : 'manual'}\n class={{\n 'data-group-popup': true,\n 'ds-choice-popup': !this.embedded,\n 'data-preferences-embedded': this.embedded,\n 'ds-choice-popup--closing': this.closing,\n }}\n style={this.embedded ? undefined : popupStyle}\n role=\"dialog\"\n aria-label={name}\n >\n <div class=\"data-group__body\">\n <div class=\"data-group__data-pane\">\n <ChoiceListSection\n heading=\"Data\"\n ariaLabel=\"Group data\"\n className=\"data-group__list\"\n >\n {this.vertical &&\n this.renderDataOption({ label: 'No grouping', value: '__none__' }, -1)}\n {this.options.map((option, index) => (\n <div data-group-value={option.value}>\n {this.renderDataOption(option, index)}\n </div>\n ))}\n </ChoiceListSection>\n <div\n hidden={this.vertical}\n class=\"data-group__footer ds-choice-footer\"\n aria-hidden={!this.grouping ? 'true' : undefined}\n >\n <div class=\"ds-choice-footer__content ds-control--md\">\n {this.grouping ? (\n <button\n class=\"ds-choice-footer__clear ds-text-action ds-focus-ring\"\n type=\"button\"\n onClick={() => this.dsClear.emit()}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n {this.clearLabel}\n </ds-text>\n </button>\n ) : null}\n </div>\n </div>\n </div>\n\n <div class=\"data-group__order-pane\">\n {this.grouping ? (\n <ChoiceListSection\n heading=\"Order\"\n ariaLabel=\"Group order\"\n className=\"data-group__list\"\n >\n {this.activeOrderOptions.map((option, index) => (\n <div data-group-order-index={index}>{this.renderOrder(option, index)}</div>\n ))}\n </ChoiceListSection>\n ) : (\n <div class=\"data-group__empty ds-choice-empty ds-empty-region\">\n <ds-empty-state body={this.emptyMessage} />\n </div>\n )}\n </div>\n </div>\n </div>\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"woBAAA,MAAMA,EAAe,IAAM,wu4BC0C3B,MAAMC,EAAiD,CACrD,CAAEC,MAAO,YAAaC,UAAW,OACjC,CAAED,MAAO,aAAcC,UAAW,SAGpC,IAAIC,EAAgB,E,MAOPC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,qKAWUC,KAAAC,UAAqB,KACrBD,KAAAE,SAAoB,MACpBF,KAAAG,SAAoB,MACpBH,KAAAI,QAA6B,GAE7BJ,KAAAK,SAAqC,KAEVL,KAAAM,UAA2B,KAErCN,KAAAO,KAAO,MAExBP,KAAAQ,aAAe,sCAEfR,KAAAS,WAAa,QASJT,KAAAU,aAAe,MACfV,KAAAW,QAAU,MACVX,KAAAY,cAAgB,MAChBZ,KAAAa,IAAM,CAAEC,EAAG,EAAGC,EAAG,GACjBf,KAAAgB,iBAAmB,MAEnBhB,KAAAiB,YAAc,mBAAmBvB,IACjCM,KAAAkB,UAAY,GAAGlB,KAAKiB,sBACpBjB,KAAAmB,QAAU,GAAGnB,KAAKiB,oBAC3BjB,KAAAoB,eAAqC,KACrCpB,KAAAqB,2BAA6B,MAC7BrB,KAAAsB,WAAmD,KACnDtB,KAAAuB,OAAS,MACAvB,KAAAwB,MAAQ,IAAIC,GAAgB,IAAMzB,KAAK0B,GAAGC,cAE1C3B,KAAA4B,SAAW,IAAIC,EAA2B,CACzDC,UAAW,IAAM9B,KAAKoB,eACtBW,SAAU,IAAM/B,KAAK0B,GAAGM,cAA2B,qBACnDC,iBAAkB,IAAMjC,KAAK0B,GAAGQ,cAChCC,QAAS,CAACC,EAAQC,KAChB,IAAKrC,KAAKO,KAAM,OAAO,KACvB,MAAM+B,EAAiBC,EAAmBC,EAAeC,SAAUD,EAAeC,UAClF,MAAO,CACLC,WAAYN,EAAOO,wBACnBC,WAAYP,EAAMQ,aAAe7C,KAAK8C,mBACtCC,YAAaV,EAAMW,cAAgBhD,KAAKiD,oBACxCC,KAAM,SACNC,MAAO,MACPC,aAAcb,EAAmBc,EAAkBZ,SAAUD,EAAeC,UAC5Ea,cAAeC,EAA8B,CAC3CJ,MAAO,MACPG,cAAe,EACfhB,mBAEFkB,cAAejB,EAAmBC,EAAeC,SAAUD,EAAeC,UAC1EgB,cAAeC,OAAOC,WACtBC,eAAgBF,OAAOG,YACvBC,cAAeC,EAAmC3B,GACnD,EAEH4B,MAAO,EAAGlD,IAAGC,QACXf,KAAKa,IAAM,CAAEC,IAAGC,IAAG,EAErBkD,QAAS,KACPjE,KAAKY,cAAgB,IAAI,EAE3BsD,WAAY,eACZC,cAAe,KACfC,SAAU,OAGKpE,KAAAqE,YAAc,IAAIC,EAAqC,CACtExC,UAAW,IAAM9B,KAAKoB,eACtBW,SAAU,IAAM/B,KAAK0B,GAAGM,cAA2B,qBACnDC,iBAAkB,IAAMjC,KAAK0B,GAAGQ,cAChCqC,oBAAqB,IAAMvE,KAAKwE,SA+XnC,CA5XC,gBAAAC,GACEzE,KAAKuB,OAAS,KACd,GAAIvB,KAAKO,KAAMP,KAAK0E,aAAa,K,CAGnC,iBAAAC,GACE,GAAI3E,KAAKuB,QAAUvB,KAAKO,KAAMP,KAAK0E,aAAa,K,CAGlD,oBAAAE,GACE5E,KAAK6E,WACL7E,KAAKU,aAAe,MACpBV,KAAKW,QAAU,MACfX,KAAKY,cAAgB,MACrBZ,KAAKqB,2BAA6B,K,CAIpC,YAAAqD,CAAaI,GACX,GAAI9E,KAAKG,WAAaH,KAAKuB,SAAWvB,KAAK0B,GAAGC,YAAa,OAC3D,GAAImD,EAAQ,CACV9E,KAAK6E,WACL7E,KAAKU,aAAe,KACpBV,KAAKW,QAAU,MACfX,KAAKY,cAAgB,MACrBZ,KAAKgB,iBAAmBhB,KAAKqB,2BAC7BrB,KAAKqE,YAAYU,UACjB/E,KAAK4B,SAASoD,UACdhF,KAAK4B,SAASqD,UAAS,IAAMjF,KAAKkF,0BAClC,M,CAEF,IAAKlF,KAAKU,cAAgBV,KAAKW,QAAS,OACxCX,KAAKwB,MAAM2D,SACXnF,KAAK4B,SAASuD,SACdnF,KAAKW,QAAU,KACfX,KAAKqE,YAAYe,aACjBpF,KAAK4B,SAASyD,YACd,MAAMC,EAAWC,EACf/C,EAAegD,aACfhD,EAAeiD,yBAEjB,GAAIH,GAAY,EAAGtF,KAAK0F,mBACnB1F,KAAKsB,WAAaqE,YAAW,IAAM3F,KAAK0F,eAAeJ,E,CAI9D,aAAAM,CAAcC,GACZ,GAAI7F,KAAKG,WAAa0F,EAAMC,MAAQ,UAAYD,EAAMC,MAAQ,OAAQ,OACtE,IAAM9F,KAAKU,eAAiBV,KAAKG,UAAaH,KAAKW,QAAS,OAC5D,GAAIkF,EAAMC,MAAQ,SAAU,CAC1BD,EAAME,iBACN/F,KAAKwE,QACL,M,CAEF,GAAIqB,EAAMC,MAAQ,QAAU9F,KAAKqE,YAAY2B,eAAeH,GAAQ,OACpEA,EAAME,iBACN/F,KAAKwE,MAAM,OACXxE,KAAKqE,YAAY4B,kBAAkBJ,EAAMK,S,CAG3C,sBAAYpD,GACV,OAAOP,EAAmBC,EAAe2D,YAAa3D,EAAe2D,Y,CAGvE,uBAAYlD,GACV,OAAOV,EAAmBC,EAAe4D,mBAAoB5D,EAAe4D,mB,CAGtE,QAAAvB,GACN7E,KAAKwB,MAAM2D,SACXnF,KAAK4B,SAASyD,YACdrF,KAAKqE,YAAYe,aACjB,GAAIpF,KAAKsB,WAAY,CACnB+E,aAAarG,KAAKsB,YAClBtB,KAAKsB,WAAa,I,EAId,MAAAgF,CAAOC,EAAe,OAC5B,GAAIvG,KAAKO,KAAM,CACbP,KAAKwE,QACL,M,CAEFxE,KAAKqB,2BAA6BkF,EAClCvG,KAAKO,KAAO,KACZP,KAAKwG,aAAaC,KAAK,MACvBzG,KAAK0E,aAAa,K,CAGZ,KAAAF,CAAMkC,EAAe,MAC3B,GAAIA,EAAc1G,KAAKqE,YAAYsC,cACnC3G,KAAKO,KAAO,MACZP,KAAKwG,aAAaC,KAAK,OACvBzG,KAAK0E,aAAa,M,CAGZ,WAAAgB,GACN,GAAI1F,KAAKO,OAASP,KAAKW,UAAYX,KAAK0B,GAAGC,YAAa,OACxD,MAAMU,EAAQrC,KAAK0B,GAAGM,cAA2B,qBACjD,GAAIK,GAAOuE,QAAQ,iBAAkBvE,EAAMwE,cAC3C7G,KAAKU,aAAe,MACpBV,KAAKW,QAAU,MACfX,KAAKsB,WAAa,I,CAGZ,qBAAA4D,GACNlF,KAAKwB,MAAMsF,OAAM,KACf,IAAK9G,KAAKO,MAAQP,KAAKW,QAAS,OAChC,MAAMoG,EAAW/G,KAAKK,SAClBL,KAAK0B,GAAGM,cACN,sBAAsBgF,IAAIC,OAAOjH,KAAKK,SAAS6G,8BAEjD,KACJ,MAAMC,EACJJ,GACA/G,KAAK0B,GAAGM,cACN,kEAEJmF,GAASC,QACTpH,KAAKqB,2BAA6B,KAAK,G,CAInC,UAAAgG,CAAWC,GACjB,GAAIA,EAAOC,QAAU,WAAY,CAC/BvH,KAAKwH,QAAQf,OACb,M,CAEF,GAAIa,EAAOG,WAAY,OACvB,GAAIzH,KAAKK,UAAU6G,UAAYI,EAAOC,MAAO,CAC3CvH,KAAK0H,cAAcjB,KAAK,IAAKzG,KAAKK,WAClC,M,CAEF,MAAMsH,EAAeL,EAAOM,eAAe,GAC3C5H,KAAK0H,cAAcjB,KAAK,CACtBS,QAASI,EAAOC,MAChB9H,UAAWkI,GAAclI,WAAa,SAClCkI,GAAcE,QAAU,CAAEA,QAASF,EAAaE,SAAY,I,CAIpE,sBAAYC,GACV,MAAMC,EAAa/H,KAAKI,QAAQ4H,MAC9BV,GAAUA,EAAOC,QAAUvH,KAAKK,UAAU6G,WACzCU,aACH,OAAOG,GAAYE,OAASF,EAAaxI,C,CAG3C,sBAAY2I,GACV,IAAKlI,KAAKK,SAAU,OAAO,EAC3B,MAAM8H,EAAQnI,KAAK8H,mBAAmBM,WACpCd,GACEA,EAAO7H,YAAcO,KAAKK,UAAUZ,WAAa6H,EAAOO,UAAY7H,KAAKK,UAAUwH,UAEvF,GAAIM,GAAS,EAAG,OAAOA,EACvB,GAAInI,KAAKK,SAASwH,UAAYQ,UAAW,CACvC,OAAOrI,KAAK8H,mBAAmBM,WAC7Bd,GAAUA,EAAO7H,YAAcO,KAAKK,UAAUZ,W,CAGlD,OAAO,C,CAGD,WAAA6I,CAAYhB,EAA+BiB,GACjD,IAAKvI,KAAKK,UAAYL,KAAKkI,qBAAuBK,EAAO,OACzD,MAAMlI,EAA8B,CAClC6G,QAASlH,KAAKK,SAAS6G,QACvBzH,UAAW6H,EAAO7H,WAEpB,GAAI6H,EAAOO,QAASxH,EAASwH,QAAUP,EAAOO,QAC9C7H,KAAK0H,cAAcjB,KAAKpG,E,CAGlB,SAAAmI,CACN3C,EACA4C,EACAC,EACAC,GAEA,GAAIA,IAAqB9C,EAAMC,MAAQ,aAAeD,EAAMC,MAAQ,cAAe,CACjFD,EAAME,iBACN/F,KAAKgB,iBAAmB,KACxBhB,KAAK0B,GAAGM,cAA2B2G,IAAmBvB,QACtD,M,CAEF,IAAK,CAAC,YAAa,UAAW,OAAQ,OAAOwB,SAAS/C,EAAMC,KAAM,OAClED,EAAME,iBACN,MAAM8C,EAAQC,MAAMC,KAAK/I,KAAK0B,GAAGsH,iBAA8BP,IAAWQ,QACxEC,GAAQA,EAAKC,aAAa,mBAAqB,SAEjD,IAAKN,EAAMZ,OAAQ,OACnB,IAAImB,EACJ,GAAIvD,EAAMC,MAAQ,OAAQsD,EAAO,OAC5B,GAAIvD,EAAMC,MAAQ,MAAOsD,EAAOP,EAAMZ,OAAS,OAC/CmB,GAAQV,GAAgB7C,EAAMC,MAAQ,YAAc,GAAI,GAAM+C,EAAMZ,QAAUY,EAAMZ,OACzFjI,KAAKgB,iBAAmB,KACxB6H,EAAMO,IAAOhC,O,CAGP,gBAAAiC,CAAiB/B,EAAyBiB,GAChD,MAAMxB,EACJO,EAAOC,QAAU,YAAcvH,KAAKK,SAAWiH,EAAOC,QAAUvH,KAAKK,UAAU6G,QACjF,OACEoC,EAACC,EAAe,CACdC,GAAI,GAAGxJ,KAAKiB,oBAAoBsH,IAChCjB,OAAQ,IAAKA,GACbP,SAAUA,EACV0C,OAAQ1C,EACR/F,iBAAkBhB,KAAKgB,iBACvB0I,YAAaC,QAAQrC,EAAOsC,aAC5BC,SAAU9C,IAAc/G,KAAKK,UAAYkI,IAAU,EAAK,GAAI,EAC5DuB,QAAS,KACP9J,KAAKgB,iBAAmB,KAAK,EAE/B+I,SAAU,IAAM/J,KAAKqH,WAAWC,GAChC0C,UAAYnE,IACV,GAAIA,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CD,EAAME,iBACN/F,KAAKqH,WAAWC,GAChB,M,CAEFtH,KAAKwI,UACH3C,EACA,qCACA7F,KAAKI,QACF6I,QAAOgB,IAAcA,EAAUxC,aAC/BW,WAAU6B,GAAaA,EAAU1C,QAAUD,EAAOC,QACrDvH,KAAKK,SACD,4BAA4BL,KAAKkI,uCACjCG,UACL,G,CAMD,WAAA6B,CAAY5C,EAA+BiB,GACjD,MAAMxB,EAAWwB,IAAUvI,KAAKkI,mBAChC,OACEoB,EAACC,EAAe,CACdC,GAAI,GAAGxJ,KAAKiB,qBAAqBsH,IACjCjB,OAAQ,CAAE9H,MAAO8H,EAAO9H,MAAO+H,MAAO4C,OAAO5B,IAC7CxB,SAAUA,EACV0C,OAAQ1C,EACR/F,iBAAkBhB,KAAKgB,iBACvB0I,YAAa,MACbG,SAAU9C,EAAW,GAAI,EACzB+C,QAAS,KACP9J,KAAKgB,iBAAmB,KAAK,EAE/B+I,SAAU,IAAM/J,KAAKsI,YAAYhB,EAAQiB,GACzCyB,UAAYnE,IACV,GAAIA,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CD,EAAME,iBACN/F,KAAKsI,YAAYhB,EAAQiB,GACzB,M,CAEFvI,KAAKwI,UACH3C,EACA,2CACA0C,EACA,sBAAsBvB,IAAIC,OAAOjH,KAAKK,UAAU6G,SAAW,wBAC5D,G,CAMT,MAAAkD,GACE,MAAMC,EAAOrK,KAAKM,WAAWgK,QAAU,cACvC,MAAMC,EAAqC,CACzC3I,SAAU,QACV4I,KAAM,IACNC,IAAK,IACLC,UAAW,aAAaC,KAAKC,MAAM5K,KAAKa,IAAIC,SAAS6J,KAAKC,MAAM5K,KAAKa,IAAIE,QACzE8J,OAAQ,OACRC,WAAY9K,KAAKY,cAAgB,UAAY,UAG/C,OACE0I,EAACyB,EAAI,CAAAjF,IAAA,2CACHkF,MAAO,CAAE,sBAAuBhL,KAAKE,UACrC+K,OAAQjL,KAAKI,QAAQ6H,SAAW,EAAI,KAAOI,WAE1CrI,KAAKI,QAAQ6H,SAAWjI,KAAKG,SAC5BmJ,EAAA,sBACErJ,UAAWD,KAAKC,UAChBiL,IAAKC,IACHnL,KAAKoB,eAAkB+J,GAA2B,IAAI,EAExD3B,GAAIxJ,KAAKkB,UACTkK,QAAQ,aACRC,KAAK,KACLC,KAAK,cACL9L,MAAM,QACN+L,cAAe,MACfC,WAAY,MAAK,aACLnB,EACZoB,SAAS,SACTC,cAAe,KACfC,SAAU3L,KAAKO,KACfqL,YAAa5L,KAAKO,MAAQP,KAAKW,QAC/BkL,SAAU7L,KAAKmB,QACf2K,UAAYjG,GAAmC7F,KAAKsG,OAAOT,EAAMkG,OAAOA,SAAW,KAEnF,KAEH/L,KAAKU,cAAgBV,KAAKG,SACzBmJ,EAAA,OACEE,GAAIxJ,KAAKmB,QACT6K,QAAShM,KAAKG,SAAWkI,UAAY,SACrC2C,MAAO,CACL,mBAAoB,KACpB,mBAAoBhL,KAAKG,SACzB,4BAA6BH,KAAKG,SAClC,2BAA4BH,KAAKW,SAEnCsL,MAAOjM,KAAKG,SAAWkI,UAAYkC,EACnC2B,KAAK,SAAQ,aACD7B,GAEZf,EAAA,OAAK0B,MAAM,oBACT1B,EAAA,OAAK0B,MAAM,yBACT1B,EAAC6C,EAAiB,CAChBC,QAAQ,OACR9L,UAAU,aACV+L,UAAU,oBAETrM,KAAKE,UACJF,KAAKqJ,iBAAiB,CAAE7J,MAAO,cAAe+H,MAAO,aAAc,GACpEvH,KAAKI,QAAQkM,KAAI,CAAChF,EAAQiB,IACzBe,EAAA,0BAAuBhC,EAAOC,OAC3BvH,KAAKqJ,iBAAiB/B,EAAQiB,OAIrCe,EAAA,OACE2B,OAAQjL,KAAKE,SACb8K,MAAM,sCAAqC,eAC7BhL,KAAKK,SAAW,OAASgI,WAEvCiB,EAAA,OAAK0B,MAAM,4CACRhL,KAAKK,SACJiJ,EAAA,UACE0B,MAAM,uDACNuB,KAAK,SACLC,QAAS,IAAMxM,KAAKwH,QAAQf,QAE5B6C,EAAA,WAASmD,GAAG,OAAOrB,QAAQ,mBAAmBsB,MAAM,WACjD1M,KAAKS,aAGR,QAKV6I,EAAA,OAAK0B,MAAM,0BACRhL,KAAKK,SACJiJ,EAAC6C,EAAiB,CAChBC,QAAQ,QACR9L,UAAU,cACV+L,UAAU,oBAETrM,KAAK8H,mBAAmBwE,KAAI,CAAChF,EAAQiB,IACpCe,EAAA,gCAA6Bf,GAAQvI,KAAKkK,YAAY5C,EAAQiB,OAIlEe,EAAA,OAAK0B,MAAM,qDACT1B,EAAA,kBAAgBqD,KAAM3M,KAAKQ,mBAMnC,K","ignoreList":[]}
1	+ {"version":3,"names":["dataGroupCss","DEFAULT_ORDER_OPTIONS","label","direction","tableGroupSeq","DataGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","hasBorder","vertical","embedded","options","grouping","ariaLabel","open","emptyMessage","clearLabel","shouldRender","closing","positionReady","pos","x","y","focusRingVisible","componentId","triggerId","popupId","triggerElement","pendingInitialFocusVisible","closeTimer","loaded","tasks","ConnectionTasks","el","isConnected","position","AnchoredPositionController","getAnchor","getPopup","querySelector","getOwnerDocument","ownerDocument","measure","anchor","popup","sectionInsetPx","resolveCssLengthPx","TOKEN_DEFAULTS","space050","anchorRect","getBoundingClientRect","popupWidth","offsetWidth","popupFallbackWidth","popupHeight","offsetHeight","popupFallbackHeight","side","align","sideOffsetPx","TOKEN_CSS_LENGTHS","alignOffsetPx","resolveChoicePopupAlignOffset","viewportPadPx","viewportWidth","window","innerWidth","viewportHeight","innerHeight","collisionRect","resolveAnchoredOverlayBoundaryRect","apply","onReady","liveUpdate","observeResize","topLayer","interaction","AnchoredOverlayInteractionController","onOutsideActivation","close","componentDidLoad","onOpenChange","connectedCallback","disconnectedCallback","teardown","isOpen","connect","observe","schedule","focusInitialDataPoint","cancel","disconnect","unobserve","duration","resolveMotionTimeMs","motionShort2","animationDurationShort3","finishClose","setTimeout","handleKeyDown","event","key","preventDefault","tabLeavesPopup","moveFocusAfterTab","shiftKey","menuWidthLg","menuFallbackHeight","clearTimeout","toggle","fromKeyboard","dsOpenChange","emit","restoreFocus","focusAnchor","matches","hidePopover","frame","selected","CSS","escape","fieldId","initial","focus","selectData","option","value","dsClear","isInactive","dsGroupChange","initialOrder","orderOptions","orderBy","activeOrderOptions","configured","find","length","selectedOrderIndex","exact","findIndex","undefined","selectOrder","index","moveFocus","selector","currentIndex","oppositeSelector","includes","items","Array","from","querySelectorAll","filter","item","getAttribute","next","renderDataOption","h","ChoiceOptionRow","id","active","usesSubtext","Boolean","description","tabIndex","onHover","onSelect","onKeyDown","candidate","renderOrder","String","render","name","trim","popupStyle","left","top","transform","Math","round","zIndex","visibility","Host","class","hidden","ref","element","variant","size","icon","labelEmphasis","pressScale","haspopup","collapseLabel","expanded","surfaceOpen","controls","onDsClick","detail","popover","style","role","ChoiceListSection","heading","className","map","type","onClick","as","color","body"],"sources":["src/wc/components/DataGroup/DataGroup.css?tag=ds-data-group&encapsulation=scoped","src/wc/components/DataGroup/DataGroup.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/choice-list.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/table-caption-control.css';\n\n:host {\n display: inline-flex;\n min-inline-size: 0;\n max-inline-size: var(--dimension-menu-width-xs);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.data-group__body {\n display: grid;\n grid-template-columns: var(--dimension-menu-width-xs) var(--dimension-menu-width-sm);\n min-height: calc(var(--dimension-size-800) * 4 + var(--dimension-space-150));\n max-height: calc(100vh - var(--dimension-size-800) - var(--dimension-size-600));\n}\n\n.data-group__data-pane,\n.data-group__order-pane {\n display: flex;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n}\n\n.data-group__data-pane {\n border-inline-end: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.data-group__list {\n flex: 1 1 auto;\n}\n\n.data-group__empty {\n flex: 1 1 auto;\n}\n\n.data-group__footer {\n flex: 0 0 auto;\n}\n\n.data-group__footer .ds-choice-footer__content {\n justify-content: flex-start;\n}\n\n.data-group__footer[aria-hidden='true']::before {\n visibility: hidden;\n}\n\n.data-group__footer[aria-hidden='true'] .ds-choice-footer__content {\n visibility: hidden;\n}\n\n@media (forced-colors: active) {\n .data-group__data-pane {\n border-inline-end-color: var(--ds-forced-color-content);\n }\n}\n\n.data-preferences-embedded {\n display: flex;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n color: var(--color-foreground-secondary);\n}\n\n:host:has(.data-preferences-embedded) {\n display: block;\n max-inline-size: none;\n}\n.data-preferences-embedded .data-group__body {\n grid-template-columns: min(var(--dimension-menu-width-xs), 40%) minmax(0, 1fr);\n}\n\n:host(.data-group-vertical) .data-group__body {\n grid-template-columns: minmax(0, 1fr);\n}\n:host(.data-group-vertical) .data-group__data-pane {\n border-inline-end: 0;\n}\n\n:host(.data-group-vertical) .data-group__footer {\n display: none;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport {\n resolveChoicePopupAlignOffset,\n resolveCssLengthPx,\n resolveMotionTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { ChoiceListSection, ChoiceOptionRow } from '../../utils/choice-list-parts';\nimport type { DataGroupingState, DataSortDirection } from '../Table/table-types';\n\nexport interface TableGroupOrderOption {\n label: string;\n direction: DataSortDirection;\n /** Optional application-owned data point used to order the group sections. /\n orderBy?: string;\n}\n\nexport interface DataGroupOption {\n label: string;\n value: string;\n description?: string;\n isInactive?: boolean;\n /* Product-owned order choices for this grouping data point. /\n orderOptions?: TableGroupOrderOption[];\n}\n\nconst DEFAULT_ORDER_OPTIONS: TableGroupOrderOption[] = [\n { label: 'Ascending', direction: 'asc' },\n { label: 'Descending', direction: 'desc' },\n];\n\nlet tableGroupSeq = 0;\n\n@Component({\n tag: 'ds-data-group',\n styleUrl: 'DataGroup.css',\n scoped: true,\n})\nexport class DataGroup {\n @Element() private el!: HTMLElement;\n\n /* Product-owned data points that may group the table. /\n /* Render content inside a parent-owned surface; the parent owns dismissal and positioning. /\n /* Show the trigger border. /\n @Prop() hasBorder: boolean = true;\n @Prop() vertical: boolean = false;\n @Prop() embedded: boolean = false;\n @Prop() options: DataGroupOption[] = [];\n /* Controlled grouping field and the order of its group sections. /\n @Prop() grouping: DataGroupingState \| null = null;\n /* Accessible name for the trigger and non-modal dialog. /\n @Prop({ attribute: 'aria-label' }) ariaLabel: string \| null = null;\n /* Controlled popup visibility. /\n @Prop({ mutable: true }) open = false;\n /* Empty message kept in the order pane until a grouping data point is selected. /\n @Prop() emptyMessage = 'Select a group to choose its order.';\n /* Clear action label. /\n @Prop() clearLabel = 'Clear';\n\n /* Requests replacement of the complete controlled grouping state. /\n @Event() dsGroupChange!: EventEmitter<DataGroupingState>;\n /* Requests removal of the controlled grouping state. /\n @Event() dsClear!: EventEmitter<void>;\n /* Reports controlled popup visibility changes. */\n @Event() dsOpenChange!: EventEmitter<boolean>;\n\n @State() private shouldRender = false;\n @State() private closing = false;\n @State() private positionReady = false;\n @State() private pos = { x: 0, y: 0 };\n @State() private focusRingVisible = false;\n\n private readonly componentId = `ds-data-group-${++tableGroupSeq}`;\n private readonly triggerId = `${this.componentId}-trigger`;\n private readonly popupId = `${this.componentId}-popup`;\n private triggerElement: HTMLElement \| null = null;\n private pendingInitialFocusVisible = false;\n private closeTimer: ReturnType<typeof setTimeout> \| null = null;\n private loaded = false;\n private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.triggerElement,\n getPopup: () => this.el.querySelector<HTMLElement>('.data-group-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n measure: (anchor, popup) => {\n if (!this.open) return null;\n const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n return {\n anchorRect: anchor.getBoundingClientRect(),\n popupWidth: popup.offsetWidth \|\| this.popupFallbackWidth,\n popupHeight: popup.offsetHeight \|\| this.popupFallbackHeight,\n side: 'bottom',\n align: 'end',\n sideOffsetPx: resolveCssLengthPx(TOKEN_CSS_LENGTHS.space050, TOKEN_DEFAULTS.space050),\n alignOffsetPx: resolveChoicePopupAlignOffset({\n align: 'end',\n alignOffsetPx: 0,\n sectionInsetPx,\n }),\n viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n };\n },\n apply: ({ x, y }) => {\n this.pos = { x, y };\n },\n onReady: () => {\n this.positionReady = true;\n },\n liveUpdate: 'double-frame',\n observeResize: true,\n topLayer: true,\n });\n\n private readonly interaction = new AnchoredOverlayInteractionController({\n getAnchor: () => this.triggerElement,\n getPopup: () => this.el.querySelector<HTMLElement>('.data-group-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n onOutsideActivation: () => this.close(),\n });\n\n componentDidLoad() {\n this.loaded = true;\n if (this.open) this.onOpenChange(true);\n }\n\n connectedCallback() {\n if (this.loaded && this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.teardown();\n this.shouldRender = false;\n this.closing = false;\n this.positionReady = false;\n this.pendingInitialFocusVisible = false;\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (this.embedded \|\| !this.loaded \|\| !this.el.isConnected) return;\n if (isOpen) {\n this.teardown();\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.focusRingVisible = this.pendingInitialFocusVisible;\n this.interaction.connect();\n this.position.observe();\n this.position.schedule(() => this.focusInitialDataPoint());\n return;\n }\n if (!this.shouldRender \|\| this.closing) return;\n this.tasks.cancel();\n this.position.cancel();\n this.closing = true;\n this.interaction.disconnect();\n this.position.unobserve();\n const duration = resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort2,\n TOKEN_DEFAULTS.animationDurationShort3\n );\n if (duration <= 0) this.finishClose();\n else this.closeTimer = setTimeout(() => this.finishClose(), duration);\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (this.embedded && (event.key === 'Escape' \|\| event.key === 'Tab')) return;\n if ((!this.shouldRender && !this.embedded) \|\| this.closing) return;\n if (event.key === 'Escape') {\n event.preventDefault();\n this.close();\n return;\n }\n if (event.key !== 'Tab' \|\| !this.interaction.tabLeavesPopup(event)) return;\n event.preventDefault();\n this.close(false);\n this.interaction.moveFocusAfterTab(event.shiftKey);\n }\n\n private get popupFallbackWidth(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthLg, TOKEN_DEFAULTS.menuWidthLg);\n }\n\n private get popupFallbackHeight(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private teardown() {\n this.tasks.cancel();\n this.position.unobserve();\n this.interaction.disconnect();\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private toggle(fromKeyboard = false) {\n if (this.open) {\n this.close();\n return;\n }\n this.pendingInitialFocusVisible = fromKeyboard;\n this.open = true;\n this.dsOpenChange.emit(true);\n this.onOpenChange(true);\n }\n\n private close(restoreFocus = true) {\n if (restoreFocus) this.interaction.focusAnchor();\n this.open = false;\n this.dsOpenChange.emit(false);\n this.onOpenChange(false);\n }\n\n private finishClose() {\n if (this.open \|\| !this.closing \|\| !this.el.isConnected) return;\n const popup = this.el.querySelector<HTMLElement>('.data-group-popup');\n if (popup?.matches(':popover-open')) popup.hidePopover();\n this.shouldRender = false;\n this.closing = false;\n this.closeTimer = null;\n }\n\n private focusInitialDataPoint() {\n this.tasks.frame(() => {\n if (!this.open \|\| this.closing) return;\n const selected = this.grouping\n ? this.el.querySelector<HTMLElement>(\n `[data-group-value=\"${CSS.escape(this.grouping.fieldId)}\"] [role=\"option\"]`\n )\n : null;\n const initial =\n selected ??\n this.el.querySelector<HTMLElement>(\n '[data-group-value] [role=\"option\"]:not([aria-disabled=\"true\"])'\n );\n initial?.focus();\n this.pendingInitialFocusVisible = false;\n });\n }\n\n private selectData(option: DataGroupOption) {\n if (option.value === '__none__') {\n this.dsClear.emit();\n return;\n }\n if (option.isInactive) return;\n if (this.grouping?.fieldId === option.value) {\n this.dsGroupChange.emit({ ...this.grouping });\n return;\n }\n const initialOrder = option.orderOptions?.[0];\n this.dsGroupChange.emit({\n fieldId: option.value,\n direction: initialOrder?.direction ?? 'asc',\n ...(initialOrder?.orderBy ? { orderBy: initialOrder.orderBy } : {}),\n });\n }\n\n private get activeOrderOptions(): TableGroupOrderOption[] {\n const configured = this.options.find(\n option => option.value === this.grouping?.fieldId\n )?.orderOptions;\n return configured?.length ? configured : DEFAULT_ORDER_OPTIONS;\n }\n\n private get selectedOrderIndex(): number {\n if (!this.grouping) return -1;\n const exact = this.activeOrderOptions.findIndex(\n option =>\n option.direction === this.grouping?.direction && option.orderBy === this.grouping?.orderBy\n );\n if (exact >= 0) return exact;\n if (this.grouping.orderBy === undefined) {\n return this.activeOrderOptions.findIndex(\n option => option.direction === this.grouping?.direction\n );\n }\n return -1;\n }\n\n private selectOrder(option: TableGroupOrderOption, index: number) {\n if (!this.grouping \|\| this.selectedOrderIndex === index) return;\n const grouping: DataGroupingState = {\n fieldId: this.grouping.fieldId,\n direction: option.direction,\n };\n if (option.orderBy) grouping.orderBy = option.orderBy;\n this.dsGroupChange.emit(grouping);\n }\n\n private moveFocus(\n event: KeyboardEvent,\n selector: string,\n currentIndex: number,\n oppositeSelector?: string\n ) {\n if (oppositeSelector && (event.key === 'ArrowLeft' \|\| event.key === 'ArrowRight')) {\n event.preventDefault();\n this.focusRingVisible = true;\n this.el.querySelector<HTMLElement>(oppositeSelector)?.focus();\n return;\n }\n if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n event.preventDefault();\n const items = Array.from(this.el.querySelectorAll<HTMLElement>(selector)).filter(\n item => item.getAttribute('aria-disabled') !== 'true'\n );\n if (!items.length) return;\n let next: number;\n if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = items.length - 1;\n else next = (currentIndex + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;\n this.focusRingVisible = true;\n items[next]?.focus();\n }\n\n private renderDataOption(option: DataGroupOption, index: number) {\n const selected =\n option.value === '__none__' ? !this.grouping : option.value === this.grouping?.fieldId;\n return (\n <ChoiceOptionRow\n id={`${this.componentId}-data-${index}`}\n option={{ ...option }}\n selected={selected}\n active={selected}\n focusRingVisible={this.focusRingVisible}\n usesSubtext={Boolean(option.description)}\n tabIndex={selected \|\| (!this.grouping && index === 0) ? 0 : -1}\n onHover={() => {\n this.focusRingVisible = false;\n }}\n onSelect={() => this.selectData(option)}\n onKeyDown={(event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.selectData(option);\n return;\n }\n this.moveFocus(\n event,\n '[data-group-value] [role=\"option\"]',\n this.options\n .filter(candidate => !candidate.isInactive)\n .findIndex(candidate => candidate.value === option.value),\n this.grouping\n ? `[data-group-order-index=\"${this.selectedOrderIndex}\"] [role=\"option\"]`\n : undefined\n );\n }}\n />\n );\n }\n\n private renderOrder(option: TableGroupOrderOption, index: number) {\n const selected = index === this.selectedOrderIndex;\n return (\n <ChoiceOptionRow\n id={`${this.componentId}-order-${index}`}\n option={{ label: option.label, value: String(index) }}\n selected={selected}\n active={selected}\n focusRingVisible={this.focusRingVisible}\n usesSubtext={false}\n tabIndex={selected ? 0 : -1}\n onHover={() => {\n this.focusRingVisible = false;\n }}\n onSelect={() => this.selectOrder(option, index)}\n onKeyDown={(event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.selectOrder(option, index);\n return;\n }\n this.moveFocus(\n event,\n '[data-group-order-index] [role=\"option\"]',\n index,\n `[data-group-value=\"${CSS.escape(this.grouping?.fieldId ?? '')}\"] [role=\"option\"]`\n );\n }}\n />\n );\n }\n\n render() {\n const name = this.ariaLabel?.trim() \|\| 'Group table';\n const popupStyle: Record<string, string> = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: '9998',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n return (\n <Host\n class={{ 'data-group-vertical': this.vertical }}\n hidden={this.options.length === 0 ? true : undefined}\n >\n {this.options.length && !this.embedded ? (\n <ds-button-unfilled\n hasBorder={this.hasBorder}\n ref={element => {\n this.triggerElement = (element as HTMLElement) ?? null;\n }}\n id={this.triggerId}\n variant=\"icon-label\"\n size=\"md\"\n icon=\"SectionList\"\n label=\"Group\"\n labelEmphasis={false}\n pressScale={false}\n aria-label={name}\n haspopup=\"dialog\"\n collapseLabel={true}\n expanded={this.open}\n surfaceOpen={this.open \|\| this.closing}\n controls={this.popupId}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.toggle(event.detail.detail === 0)}\n />\n ) : null}\n\n {this.shouldRender \|\| this.embedded ? (\n <div\n id={this.popupId}\n popover={this.embedded ? undefined : 'manual'}\n class={{\n 'data-group-popup': true,\n 'ds-choice-popup': !this.embedded,\n 'data-preferences-embedded': this.embedded,\n 'ds-choice-popup--closing': this.closing,\n }}\n style={this.embedded ? undefined : popupStyle}\n role=\"dialog\"\n aria-label={name}\n >\n <div class=\"data-group__body\">\n <div class=\"data-group__data-pane\">\n <ChoiceListSection\n heading=\"Data\"\n ariaLabel=\"Group data\"\n className=\"data-group__list\"\n >\n {this.vertical &&\n this.renderDataOption({ label: 'No grouping', value: '__none__' }, -1)}\n {this.options.map((option, index) => (\n <div data-group-value={option.value}>\n {this.renderDataOption(option, index)}\n </div>\n ))}\n </ChoiceListSection>\n <div\n hidden={this.vertical}\n class=\"data-group__footer ds-choice-footer\"\n aria-hidden={!this.grouping ? 'true' : undefined}\n >\n <div class=\"ds-choice-footer__content ds-control--md\">\n {this.grouping ? (\n <button\n class=\"ds-choice-footer__clear ds-text-action ds-focus-ring\"\n type=\"button\"\n onClick={() => this.dsClear.emit()}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n {this.clearLabel}\n </ds-text>\n </button>\n ) : null}\n </div>\n </div>\n </div>\n\n <div class=\"data-group__order-pane\">\n {this.grouping ? (\n <ChoiceListSection\n heading=\"Order\"\n ariaLabel=\"Group order\"\n className=\"data-group__list\"\n >\n {this.activeOrderOptions.map((option, index) => (\n <div data-group-order-index={index}>{this.renderOrder(option, index)}</div>\n ))}\n </ChoiceListSection>\n ) : (\n <div class=\"data-group__empty ds-choice-empty ds-empty-region\">\n <ds-empty-state body={this.emptyMessage} />\n </div>\n )}\n </div>\n </div>\n </div>\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"woBAAA,MAAMA,EAAe,IAAM,2w4BC0C3B,MAAMC,EAAiD,CACrD,CAAEC,MAAO,YAAaC,UAAW,OACjC,CAAED,MAAO,aAAcC,UAAW,SAGpC,IAAIC,EAAgB,E,MAOPC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,qKAWUC,KAAAC,UAAqB,KACrBD,KAAAE,SAAoB,MACpBF,KAAAG,SAAoB,MACpBH,KAAAI,QAA6B,GAE7BJ,KAAAK,SAAqC,KAEVL,KAAAM,UAA2B,KAErCN,KAAAO,KAAO,MAExBP,KAAAQ,aAAe,sCAEfR,KAAAS,WAAa,QASJT,KAAAU,aAAe,MACfV,KAAAW,QAAU,MACVX,KAAAY,cAAgB,MAChBZ,KAAAa,IAAM,CAAEC,EAAG,EAAGC,EAAG,GACjBf,KAAAgB,iBAAmB,MAEnBhB,KAAAiB,YAAc,mBAAmBvB,IACjCM,KAAAkB,UAAY,GAAGlB,KAAKiB,sBACpBjB,KAAAmB,QAAU,GAAGnB,KAAKiB,oBAC3BjB,KAAAoB,eAAqC,KACrCpB,KAAAqB,2BAA6B,MAC7BrB,KAAAsB,WAAmD,KACnDtB,KAAAuB,OAAS,MACAvB,KAAAwB,MAAQ,IAAIC,GAAgB,IAAMzB,KAAK0B,GAAGC,cAE1C3B,KAAA4B,SAAW,IAAIC,EAA2B,CACzDC,UAAW,IAAM9B,KAAKoB,eACtBW,SAAU,IAAM/B,KAAK0B,GAAGM,cAA2B,qBACnDC,iBAAkB,IAAMjC,KAAK0B,GAAGQ,cAChCC,QAAS,CAACC,EAAQC,KAChB,IAAKrC,KAAKO,KAAM,OAAO,KACvB,MAAM+B,EAAiBC,EAAmBC,EAAeC,SAAUD,EAAeC,UAClF,MAAO,CACLC,WAAYN,EAAOO,wBACnBC,WAAYP,EAAMQ,aAAe7C,KAAK8C,mBACtCC,YAAaV,EAAMW,cAAgBhD,KAAKiD,oBACxCC,KAAM,SACNC,MAAO,MACPC,aAAcb,EAAmBc,EAAkBZ,SAAUD,EAAeC,UAC5Ea,cAAeC,EAA8B,CAC3CJ,MAAO,MACPG,cAAe,EACfhB,mBAEFkB,cAAejB,EAAmBC,EAAeC,SAAUD,EAAeC,UAC1EgB,cAAeC,OAAOC,WACtBC,eAAgBF,OAAOG,YACvBC,cAAeC,EAAmC3B,GACnD,EAEH4B,MAAO,EAAGlD,IAAGC,QACXf,KAAKa,IAAM,CAAEC,IAAGC,IAAG,EAErBkD,QAAS,KACPjE,KAAKY,cAAgB,IAAI,EAE3BsD,WAAY,eACZC,cAAe,KACfC,SAAU,OAGKpE,KAAAqE,YAAc,IAAIC,EAAqC,CACtExC,UAAW,IAAM9B,KAAKoB,eACtBW,SAAU,IAAM/B,KAAK0B,GAAGM,cAA2B,qBACnDC,iBAAkB,IAAMjC,KAAK0B,GAAGQ,cAChCqC,oBAAqB,IAAMvE,KAAKwE,SA+XnC,CA5XC,gBAAAC,GACEzE,KAAKuB,OAAS,KACd,GAAIvB,KAAKO,KAAMP,KAAK0E,aAAa,K,CAGnC,iBAAAC,GACE,GAAI3E,KAAKuB,QAAUvB,KAAKO,KAAMP,KAAK0E,aAAa,K,CAGlD,oBAAAE,GACE5E,KAAK6E,WACL7E,KAAKU,aAAe,MACpBV,KAAKW,QAAU,MACfX,KAAKY,cAAgB,MACrBZ,KAAKqB,2BAA6B,K,CAIpC,YAAAqD,CAAaI,GACX,GAAI9E,KAAKG,WAAaH,KAAKuB,SAAWvB,KAAK0B,GAAGC,YAAa,OAC3D,GAAImD,EAAQ,CACV9E,KAAK6E,WACL7E,KAAKU,aAAe,KACpBV,KAAKW,QAAU,MACfX,KAAKY,cAAgB,MACrBZ,KAAKgB,iBAAmBhB,KAAKqB,2BAC7BrB,KAAKqE,YAAYU,UACjB/E,KAAK4B,SAASoD,UACdhF,KAAK4B,SAASqD,UAAS,IAAMjF,KAAKkF,0BAClC,M,CAEF,IAAKlF,KAAKU,cAAgBV,KAAKW,QAAS,OACxCX,KAAKwB,MAAM2D,SACXnF,KAAK4B,SAASuD,SACdnF,KAAKW,QAAU,KACfX,KAAKqE,YAAYe,aACjBpF,KAAK4B,SAASyD,YACd,MAAMC,EAAWC,EACf/C,EAAegD,aACfhD,EAAeiD,yBAEjB,GAAIH,GAAY,EAAGtF,KAAK0F,mBACnB1F,KAAKsB,WAAaqE,YAAW,IAAM3F,KAAK0F,eAAeJ,E,CAI9D,aAAAM,CAAcC,GACZ,GAAI7F,KAAKG,WAAa0F,EAAMC,MAAQ,UAAYD,EAAMC,MAAQ,OAAQ,OACtE,IAAM9F,KAAKU,eAAiBV,KAAKG,UAAaH,KAAKW,QAAS,OAC5D,GAAIkF,EAAMC,MAAQ,SAAU,CAC1BD,EAAME,iBACN/F,KAAKwE,QACL,M,CAEF,GAAIqB,EAAMC,MAAQ,QAAU9F,KAAKqE,YAAY2B,eAAeH,GAAQ,OACpEA,EAAME,iBACN/F,KAAKwE,MAAM,OACXxE,KAAKqE,YAAY4B,kBAAkBJ,EAAMK,S,CAG3C,sBAAYpD,GACV,OAAOP,EAAmBC,EAAe2D,YAAa3D,EAAe2D,Y,CAGvE,uBAAYlD,GACV,OAAOV,EAAmBC,EAAe4D,mBAAoB5D,EAAe4D,mB,CAGtE,QAAAvB,GACN7E,KAAKwB,MAAM2D,SACXnF,KAAK4B,SAASyD,YACdrF,KAAKqE,YAAYe,aACjB,GAAIpF,KAAKsB,WAAY,CACnB+E,aAAarG,KAAKsB,YAClBtB,KAAKsB,WAAa,I,EAId,MAAAgF,CAAOC,EAAe,OAC5B,GAAIvG,KAAKO,KAAM,CACbP,KAAKwE,QACL,M,CAEFxE,KAAKqB,2BAA6BkF,EAClCvG,KAAKO,KAAO,KACZP,KAAKwG,aAAaC,KAAK,MACvBzG,KAAK0E,aAAa,K,CAGZ,KAAAF,CAAMkC,EAAe,MAC3B,GAAIA,EAAc1G,KAAKqE,YAAYsC,cACnC3G,KAAKO,KAAO,MACZP,KAAKwG,aAAaC,KAAK,OACvBzG,KAAK0E,aAAa,M,CAGZ,WAAAgB,GACN,GAAI1F,KAAKO,OAASP,KAAKW,UAAYX,KAAK0B,GAAGC,YAAa,OACxD,MAAMU,EAAQrC,KAAK0B,GAAGM,cAA2B,qBACjD,GAAIK,GAAOuE,QAAQ,iBAAkBvE,EAAMwE,cAC3C7G,KAAKU,aAAe,MACpBV,KAAKW,QAAU,MACfX,KAAKsB,WAAa,I,CAGZ,qBAAA4D,GACNlF,KAAKwB,MAAMsF,OAAM,KACf,IAAK9G,KAAKO,MAAQP,KAAKW,QAAS,OAChC,MAAMoG,EAAW/G,KAAKK,SAClBL,KAAK0B,GAAGM,cACN,sBAAsBgF,IAAIC,OAAOjH,KAAKK,SAAS6G,8BAEjD,KACJ,MAAMC,EACJJ,GACA/G,KAAK0B,GAAGM,cACN,kEAEJmF,GAASC,QACTpH,KAAKqB,2BAA6B,KAAK,G,CAInC,UAAAgG,CAAWC,GACjB,GAAIA,EAAOC,QAAU,WAAY,CAC/BvH,KAAKwH,QAAQf,OACb,M,CAEF,GAAIa,EAAOG,WAAY,OACvB,GAAIzH,KAAKK,UAAU6G,UAAYI,EAAOC,MAAO,CAC3CvH,KAAK0H,cAAcjB,KAAK,IAAKzG,KAAKK,WAClC,M,CAEF,MAAMsH,EAAeL,EAAOM,eAAe,GAC3C5H,KAAK0H,cAAcjB,KAAK,CACtBS,QAASI,EAAOC,MAChB9H,UAAWkI,GAAclI,WAAa,SAClCkI,GAAcE,QAAU,CAAEA,QAASF,EAAaE,SAAY,I,CAIpE,sBAAYC,GACV,MAAMC,EAAa/H,KAAKI,QAAQ4H,MAC9BV,GAAUA,EAAOC,QAAUvH,KAAKK,UAAU6G,WACzCU,aACH,OAAOG,GAAYE,OAASF,EAAaxI,C,CAG3C,sBAAY2I,GACV,IAAKlI,KAAKK,SAAU,OAAO,EAC3B,MAAM8H,EAAQnI,KAAK8H,mBAAmBM,WACpCd,GACEA,EAAO7H,YAAcO,KAAKK,UAAUZ,WAAa6H,EAAOO,UAAY7H,KAAKK,UAAUwH,UAEvF,GAAIM,GAAS,EAAG,OAAOA,EACvB,GAAInI,KAAKK,SAASwH,UAAYQ,UAAW,CACvC,OAAOrI,KAAK8H,mBAAmBM,WAC7Bd,GAAUA,EAAO7H,YAAcO,KAAKK,UAAUZ,W,CAGlD,OAAO,C,CAGD,WAAA6I,CAAYhB,EAA+BiB,GACjD,IAAKvI,KAAKK,UAAYL,KAAKkI,qBAAuBK,EAAO,OACzD,MAAMlI,EAA8B,CAClC6G,QAASlH,KAAKK,SAAS6G,QACvBzH,UAAW6H,EAAO7H,WAEpB,GAAI6H,EAAOO,QAASxH,EAASwH,QAAUP,EAAOO,QAC9C7H,KAAK0H,cAAcjB,KAAKpG,E,CAGlB,SAAAmI,CACN3C,EACA4C,EACAC,EACAC,GAEA,GAAIA,IAAqB9C,EAAMC,MAAQ,aAAeD,EAAMC,MAAQ,cAAe,CACjFD,EAAME,iBACN/F,KAAKgB,iBAAmB,KACxBhB,KAAK0B,GAAGM,cAA2B2G,IAAmBvB,QACtD,M,CAEF,IAAK,CAAC,YAAa,UAAW,OAAQ,OAAOwB,SAAS/C,EAAMC,KAAM,OAClED,EAAME,iBACN,MAAM8C,EAAQC,MAAMC,KAAK/I,KAAK0B,GAAGsH,iBAA8BP,IAAWQ,QACxEC,GAAQA,EAAKC,aAAa,mBAAqB,SAEjD,IAAKN,EAAMZ,OAAQ,OACnB,IAAImB,EACJ,GAAIvD,EAAMC,MAAQ,OAAQsD,EAAO,OAC5B,GAAIvD,EAAMC,MAAQ,MAAOsD,EAAOP,EAAMZ,OAAS,OAC/CmB,GAAQV,GAAgB7C,EAAMC,MAAQ,YAAc,GAAI,GAAM+C,EAAMZ,QAAUY,EAAMZ,OACzFjI,KAAKgB,iBAAmB,KACxB6H,EAAMO,IAAOhC,O,CAGP,gBAAAiC,CAAiB/B,EAAyBiB,GAChD,MAAMxB,EACJO,EAAOC,QAAU,YAAcvH,KAAKK,SAAWiH,EAAOC,QAAUvH,KAAKK,UAAU6G,QACjF,OACEoC,EAACC,EAAe,CACdC,GAAI,GAAGxJ,KAAKiB,oBAAoBsH,IAChCjB,OAAQ,IAAKA,GACbP,SAAUA,EACV0C,OAAQ1C,EACR/F,iBAAkBhB,KAAKgB,iBACvB0I,YAAaC,QAAQrC,EAAOsC,aAC5BC,SAAU9C,IAAc/G,KAAKK,UAAYkI,IAAU,EAAK,GAAI,EAC5DuB,QAAS,KACP9J,KAAKgB,iBAAmB,KAAK,EAE/B+I,SAAU,IAAM/J,KAAKqH,WAAWC,GAChC0C,UAAYnE,IACV,GAAIA,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CD,EAAME,iBACN/F,KAAKqH,WAAWC,GAChB,M,CAEFtH,KAAKwI,UACH3C,EACA,qCACA7F,KAAKI,QACF6I,QAAOgB,IAAcA,EAAUxC,aAC/BW,WAAU6B,GAAaA,EAAU1C,QAAUD,EAAOC,QACrDvH,KAAKK,SACD,4BAA4BL,KAAKkI,uCACjCG,UACL,G,CAMD,WAAA6B,CAAY5C,EAA+BiB,GACjD,MAAMxB,EAAWwB,IAAUvI,KAAKkI,mBAChC,OACEoB,EAACC,EAAe,CACdC,GAAI,GAAGxJ,KAAKiB,qBAAqBsH,IACjCjB,OAAQ,CAAE9H,MAAO8H,EAAO9H,MAAO+H,MAAO4C,OAAO5B,IAC7CxB,SAAUA,EACV0C,OAAQ1C,EACR/F,iBAAkBhB,KAAKgB,iBACvB0I,YAAa,MACbG,SAAU9C,EAAW,GAAI,EACzB+C,QAAS,KACP9J,KAAKgB,iBAAmB,KAAK,EAE/B+I,SAAU,IAAM/J,KAAKsI,YAAYhB,EAAQiB,GACzCyB,UAAYnE,IACV,GAAIA,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CD,EAAME,iBACN/F,KAAKsI,YAAYhB,EAAQiB,GACzB,M,CAEFvI,KAAKwI,UACH3C,EACA,2CACA0C,EACA,sBAAsBvB,IAAIC,OAAOjH,KAAKK,UAAU6G,SAAW,wBAC5D,G,CAMT,MAAAkD,GACE,MAAMC,EAAOrK,KAAKM,WAAWgK,QAAU,cACvC,MAAMC,EAAqC,CACzC3I,SAAU,QACV4I,KAAM,IACNC,IAAK,IACLC,UAAW,aAAaC,KAAKC,MAAM5K,KAAKa,IAAIC,SAAS6J,KAAKC,MAAM5K,KAAKa,IAAIE,QACzE8J,OAAQ,OACRC,WAAY9K,KAAKY,cAAgB,UAAY,UAG/C,OACE0I,EAACyB,EAAI,CAAAjF,IAAA,2CACHkF,MAAO,CAAE,sBAAuBhL,KAAKE,UACrC+K,OAAQjL,KAAKI,QAAQ6H,SAAW,EAAI,KAAOI,WAE1CrI,KAAKI,QAAQ6H,SAAWjI,KAAKG,SAC5BmJ,EAAA,sBACErJ,UAAWD,KAAKC,UAChBiL,IAAKC,IACHnL,KAAKoB,eAAkB+J,GAA2B,IAAI,EAExD3B,GAAIxJ,KAAKkB,UACTkK,QAAQ,aACRC,KAAK,KACLC,KAAK,cACL9L,MAAM,QACN+L,cAAe,MACfC,WAAY,MAAK,aACLnB,EACZoB,SAAS,SACTC,cAAe,KACfC,SAAU3L,KAAKO,KACfqL,YAAa5L,KAAKO,MAAQP,KAAKW,QAC/BkL,SAAU7L,KAAKmB,QACf2K,UAAYjG,GAAmC7F,KAAKsG,OAAOT,EAAMkG,OAAOA,SAAW,KAEnF,KAEH/L,KAAKU,cAAgBV,KAAKG,SACzBmJ,EAAA,OACEE,GAAIxJ,KAAKmB,QACT6K,QAAShM,KAAKG,SAAWkI,UAAY,SACrC2C,MAAO,CACL,mBAAoB,KACpB,mBAAoBhL,KAAKG,SACzB,4BAA6BH,KAAKG,SAClC,2BAA4BH,KAAKW,SAEnCsL,MAAOjM,KAAKG,SAAWkI,UAAYkC,EACnC2B,KAAK,SAAQ,aACD7B,GAEZf,EAAA,OAAK0B,MAAM,oBACT1B,EAAA,OAAK0B,MAAM,yBACT1B,EAAC6C,EAAiB,CAChBC,QAAQ,OACR9L,UAAU,aACV+L,UAAU,oBAETrM,KAAKE,UACJF,KAAKqJ,iBAAiB,CAAE7J,MAAO,cAAe+H,MAAO,aAAc,GACpEvH,KAAKI,QAAQkM,KAAI,CAAChF,EAAQiB,IACzBe,EAAA,0BAAuBhC,EAAOC,OAC3BvH,KAAKqJ,iBAAiB/B,EAAQiB,OAIrCe,EAAA,OACE2B,OAAQjL,KAAKE,SACb8K,MAAM,sCAAqC,eAC7BhL,KAAKK,SAAW,OAASgI,WAEvCiB,EAAA,OAAK0B,MAAM,4CACRhL,KAAKK,SACJiJ,EAAA,UACE0B,MAAM,uDACNuB,KAAK,SACLC,QAAS,IAAMxM,KAAKwH,QAAQf,QAE5B6C,EAAA,WAASmD,GAAG,OAAOrB,QAAQ,mBAAmBsB,MAAM,WACjD1M,KAAKS,aAGR,QAKV6I,EAAA,OAAK0B,MAAM,0BACRhL,KAAKK,SACJiJ,EAAC6C,EAAiB,CAChBC,QAAQ,QACR9L,UAAU,cACV+L,UAAU,oBAETrM,KAAK8H,mBAAmBwE,KAAI,CAAChF,EAAQiB,IACpCe,EAAA,gCAA6Bf,GAAQvI,KAAKkK,YAAY5C,EAAQiB,OAIlEe,EAAA,OAAK0B,MAAM,qDACT1B,EAAA,kBAAgBqD,KAAM3M,KAAKQ,mBAMnC,K","ignoreList":[]}

package/dist/components/{p-B9y6azEw.js → p-eKnJNQtL.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{p as s,H as c,c as e,h as r,a as i,t}from"./index.js";function o(s,c){return c.length>0?c.flatMap((s=>s.options)):[...s]}function a(s,c){const e=s.findIndex((s=>s.value===c&&!s.isInactive));if(e>=0)return e;return s.findIndex((s=>!s.isInactive))}function n(s,c,e){const r=s.map(((s,c)=>({option:s,index:c}))).filter((({option:s})=>!s.isInactive)).map((({index:s})=>s));if(r.length===0)return null;if(e==="Home")return r[0];if(e==="End")return r[r.length-1];const i=e==="ArrowRight"||e==="ArrowDown"?1:-1;const t=r.indexOf(c);if(t<0){return i>0?r[0]:r[r.length-1]}return r[(t+i+r.length)%r.length]}function d(s){if(s===undefined||!Number.isFinite(s))return 1;return Math.min(1,Math.max(0,s))}const h=()=>`@media (forced-colors: active){.sc-ds-swatch-picker:root,.sc-ds-swatch-picker-h,.ds-forced-colors-scope.sc-ds-swatch-picker{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.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,.ds-focus-ring.sc-ds-swatch-picker,.ds-focus-ring-inset.sc-ds-swatch-picker-h,.ds-focus-ring-inset.sc-ds-swatch-picker{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.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))}@media (forced-colors: active){.sc-ds-swatch-picker-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-swatch-picker:root,.sc-ds-swatch-picker-h,.ds-forced-colors-scope.sc-ds-swatch-picker{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-swatch-picker-h,.ds-control-inactive.sc-ds-swatch-picker{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-swatch-picker-h,.ds-control-inactive.sc-ds-swatch-picker{color:var(--ds-forced-color-disabled);opacity:1}}@media (forced-colors: active){.sc-ds-swatch-picker:root,.sc-ds-swatch-picker-h,.ds-forced-colors-scope.sc-ds-swatch-picker{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.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:default;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}@media (hover: hover) and (pointer: fine){.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}}@media (forced-colors: active){.swatch-picker__fill.sc-ds-swatch-picker{forced-color-adjust:none}.swatch-picker__border.sc-ds-swatch-picker{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.swatch-picker__halo.sc-ds-swatch-picker{box-shadow:none}.swatch-picker__stroke.sc-ds-swatch-picker{box-shadow:none;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.swatch-picker__divider.sc-ds-swatch-picker{background-color:var(--ds-forced-color-content)}}`;const l=s(class s extends c{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=e(this,"dsChange",7);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 c=this.el.querySelectorAll(".swatch-picker__option");c[s]?.focus()}))}handleOptionKeyDown(s,c){const e=s.key;if(!["ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Home","End"].includes(e)){return}const r=n(this.activeOptions,c,e);if(r===null)return;s.preventDefault();const i=this.activeOptions[r];this.selectOption(i);this.focusOption(r)}renderOption(s,c,e){const i=s.value===this.value;const t=d(s.preview.opacity);return r("button",{key:s.value,type:"button",class:{"swatch-picker__option":true,"swatch-picker__option--selected":i,"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(t)},role:"radio","aria-label":s.label,"aria-checked":i?"true":"false",tabIndex:c===e?0:-1,disabled:s.isInactive,onClick:()=>this.selectOption(s),onKeyDown:s=>this.handleOptionKeyDown(s,c)},r("span",{class:"swatch-picker__fill","aria-hidden":"true"}),r("span",{class:"swatch-picker__border","aria-hidden":"true"}),r("span",{class:"swatch-picker__interaction","aria-hidden":"true"}),r("span",{class:"swatch-picker__halo","aria-hidden":"true"}),r("span",{class:"swatch-picker__stroke","aria-hidden":"true"}))}render(){const s=this.activeOptions;const c=a(s,this.value);let e=0;return r(i,{key:"590044cffca2f4d7097829ca2d9ac89487fd4d8e"},r("div",{key:"4a9029c47be288739241e20408c6225177cd800b",class:"swatch-picker",role:"radiogroup","aria-label":this.groupLabel},(this.sections.length>0?this.sections:[{options:this.options}]).map(((s,i)=>[s.options.map((s=>{const r=e++;return this.renderOption(s,r,c)})),i<(this.sections.length>0?this.sections.length:1)-1&&r("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 p(){if(typeof customElements==="undefined"){return}const s=["ds-swatch-picker"];s.forEach((s=>{switch(s){case"ds-swatch-picker":if(!customElements.get(t(s))){customElements.define(t(s),l)}break}}))}p();export{l as S,p as d};
-//# sourceMappingURL=p-B9y6azEw.js.map
+import{p as s,H as c,c as e,h as r,a as i,t}from"./index.js";function o(s,c){return c.length>0?c.flatMap((s=>s.options)):[...s]}function a(s,c){const e=s.findIndex((s=>s.value===c&&!s.isInactive));if(e>=0)return e;return s.findIndex((s=>!s.isInactive))}function n(s,c,e){const r=s.map(((s,c)=>({option:s,index:c}))).filter((({option:s})=>!s.isInactive)).map((({index:s})=>s));if(r.length===0)return null;if(e==="Home")return r[0];if(e==="End")return r[r.length-1];const i=e==="ArrowRight"||e==="ArrowDown"?1:-1;const t=r.indexOf(c);if(t<0){return i>0?r[0]:r[r.length-1]}return r[(t+i+r.length)%r.length]}function d(s){if(s===undefined||!Number.isFinite(s))return 1;return Math.min(1,Math.max(0,s))}const h=()=>`@media (forced-colors: active){.sc-ds-swatch-picker:root,.sc-ds-swatch-picker-h,.ds-forced-colors-scope.sc-ds-swatch-picker{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.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,.ds-focus-ring.sc-ds-swatch-picker,.ds-focus-ring-inset.sc-ds-swatch-picker-h,.ds-focus-ring-inset.sc-ds-swatch-picker{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.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))}@media (forced-colors: active){.sc-ds-swatch-picker-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-swatch-picker:root,.sc-ds-swatch-picker-h,.ds-forced-colors-scope.sc-ds-swatch-picker{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-swatch-picker-h,.ds-control-inactive.sc-ds-swatch-picker{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-swatch-picker-h,.ds-control-inactive.sc-ds-swatch-picker{color:var(--ds-forced-color-disabled);opacity:1}}@media (forced-colors: active){.sc-ds-swatch-picker:root,.sc-ds-swatch-picker-h,.ds-forced-colors-scope.sc-ds-swatch-picker{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.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:default;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}@media (hover: hover) and (pointer: fine){.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}}@media (forced-colors: active){.swatch-picker__fill.sc-ds-swatch-picker{forced-color-adjust:none}.swatch-picker__border.sc-ds-swatch-picker{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.swatch-picker__halo.sc-ds-swatch-picker{box-shadow:none}.swatch-picker__stroke.sc-ds-swatch-picker{box-shadow:none;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.swatch-picker__divider.sc-ds-swatch-picker{background-color:var(--ds-forced-color-content)}}`;const l=s(class s extends c{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=e(this,"dsChange",7);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 c=this.el.querySelectorAll(".swatch-picker__option");c[s]?.focus()}))}handleOptionKeyDown(s,c){const e=s.key;if(!["ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Home","End"].includes(e)){return}const r=n(this.activeOptions,c,e);if(r===null)return;s.preventDefault();const i=this.activeOptions[r];this.selectOption(i);this.focusOption(r)}renderOption(s,c,e){const i=s.value===this.value;const t=d(s.preview.opacity);return r("button",{key:s.value,type:"button",class:{"swatch-picker__option":true,"swatch-picker__option--selected":i,"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(t)},role:"radio","aria-label":s.label,"aria-checked":i?"true":"false",tabIndex:c===e?0:-1,disabled:s.isInactive,onClick:()=>this.selectOption(s),onKeyDown:s=>this.handleOptionKeyDown(s,c)},r("span",{class:"swatch-picker__fill","aria-hidden":"true"}),r("span",{class:"swatch-picker__border","aria-hidden":"true"}),r("span",{class:"swatch-picker__interaction","aria-hidden":"true"}),r("span",{class:"swatch-picker__halo","aria-hidden":"true"}),r("span",{class:"swatch-picker__stroke","aria-hidden":"true"}))}render(){const s=this.activeOptions;const c=a(s,this.value);let e=0;return r(i,{key:"20901fff78101d1eeece513ce8907dcda1a97a2b"},r("div",{key:"6e5415e5e70fd26a471e0921462ca5cd4a1134e4",class:"swatch-picker",role:"radiogroup","aria-label":this.groupLabel},(this.sections.length>0?this.sections:[{options:this.options}]).map(((s,i)=>[s.options.map((s=>{const r=e++;return this.renderOption(s,r,c)})),i<(this.sections.length>0?this.sections.length:1)-1&&r("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 p(){if(typeof customElements==="undefined"){return}const s=["ds-swatch-picker"];s.forEach((s=>{switch(s){case"ds-swatch-picker":if(!customElements.get(t(s))){customElements.define(t(s),l)}break}}))}p();export{l as S,p as d};
+//# sourceMappingURL=p-eKnJNQtL.js.map