@ds-mo/ui 1.3.0 → 1.4.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.
- package/dist/components/ds-bar-nav-action.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +1 -1
- package/dist/components/ds-breadcrumb.js +1 -1
- package/dist/components/ds-button-group.js +1 -1
- package/dist/components/ds-button.js +1 -1
- package/dist/components/ds-card.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-fade.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-header.js +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-radio-group.js +1 -1
- package/dist/components/ds-radio-group.js.map +1 -1
- package/dist/components/ds-scrollbar.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-surface.js +1 -1
- package/dist/components/ds-tab-group-nav.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toast-provider.js +1 -1
- package/dist/components/ds-toggle-button-group.js +1 -1
- package/dist/components/ds-toggle-button.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/index.d.ts +3 -4
- package/dist/components/index.js +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/{p-COsKOwZR.js → p--YDw8Q4o.js} +2 -2
- package/dist/components/{p-OT-Q-NxH.js → p-C9za7IDu.js} +2 -2
- package/dist/components/p-DceSoh5V.js +2 -0
- package/dist/components/p-DceSoh5V.js.map +1 -0
- package/dist/components/{p-DrDrPeVV.js → p-DqBCQRRd.js} +2 -2
- package/dist/components/p-DznbYg1m.js +2 -0
- package/dist/components/p-DznbYg1m.js.map +1 -0
- package/dist/components/{p-qfvbc9w-.js → p-_LI2ymhS.js} +2 -2
- package/dist/components/p-_LI2ymhS.js.map +1 -0
- package/dist/components/{p-U1A-rprN.js → p-uMN1Ppw2.js} +2 -2
- package/dist/components/{p-X1N_ggsY.js → p-vW9EMP8s.js} +2 -2
- package/dist/types/{.stencil → components}/BarNav/BarNav.d.ts +6 -17
- package/dist/types/components/BarNav/bar-nav-types.d.ts +14 -0
- package/dist/types/{.stencil → components}/BarNav/bar-nav-utils.d.ts +1 -1
- package/dist/types/components/BarNav/index.d.ts +3 -0
- package/dist/types/{.stencil → components}/BarNavAction/BarNavAction.d.ts +1 -1
- package/dist/types/{.stencil → components}/PanelNav/PanelNav.d.ts +11 -26
- package/dist/types/components/PanelNav/index.d.ts +4 -0
- package/dist/types/components/PanelNav/panel-nav-types.d.ts +20 -0
- package/dist/types/components/PanelNav/panel-nav-utils.d.ts +26 -0
- package/dist/types/{.stencil → components}/TabGroupNav/TabGroupNav.d.ts +1 -1
- package/dist/types/components.d.ts +30 -28
- package/dist/types/nav/index.d.ts +5 -0
- package/dist/types/nav/nav-chrome.d.ts +14 -0
- package/dist/types/nav/shell-view-transition.d.ts +21 -0
- package/package.json +7 -2
- package/src/angular/proxies.ts +4 -4
- package/src/wc/components/BarNav/BarNav.tsx +18 -26
- package/src/wc/components/BarNav/bar-nav-types.ts +15 -0
- package/src/wc/components/BarNav/bar-nav-utils.ts +1 -1
- package/src/wc/components/BarNav/index.ts +2 -1
- package/src/wc/components/BarNavAction/BarNavAction.tsx +2 -1
- package/src/wc/components/PanelNav/PanelNav.tsx +46 -90
- package/src/wc/components/PanelNav/index.ts +9 -4
- package/src/wc/components/PanelNav/panel-nav-types.ts +22 -0
- package/src/wc/components/PanelNav/panel-nav-utils.ts +32 -64
- package/src/wc/components/TabGroupNav/TabGroupNav.tsx +8 -2
- package/src/wc/components.d.ts +30 -28
- package/src/wc/nav/index.ts +19 -0
- package/src/wc/nav/nav-chrome.ts +45 -0
- package/src/wc/nav/shell-view-transition.ts +102 -0
- package/dist/components/p-DOtcc9UU.js +0 -2
- package/dist/components/p-DOtcc9UU.js.map +0 -1
- package/dist/components/p-qfvbc9w-.js.map +0 -1
- package/dist/types/.stencil/BarNav/index.d.ts +0 -2
- package/dist/types/.stencil/PanelNav/index.d.ts +0 -3
- package/dist/types/.stencil/PanelNav/panel-nav-utils.d.ts +0 -27
- /package/dist/components/{p-COsKOwZR.js.map → p--YDw8Q4o.js.map} +0 -0
- /package/dist/components/{p-OT-Q-NxH.js.map → p-C9za7IDu.js.map} +0 -0
- /package/dist/components/{p-DrDrPeVV.js.map → p-DqBCQRRd.js.map} +0 -0
- /package/dist/components/{p-U1A-rprN.js.map → p-uMN1Ppw2.js.map} +0 -0
- /package/dist/components/{p-X1N_ggsY.js.map → p-vW9EMP8s.js.map} +0 -0
- /package/dist/types/{.stencil → components}/Accordion/Accordion.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Badge/Badge.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Badge/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Banner/Banner.d.ts +0 -0
- /package/dist/types/{.stencil → components}/BarNav/bar-nav-dom-utils.d.ts +0 -0
- /package/dist/types/{.stencil → components}/BarNav/bar-nav-tabs-menu-utils.d.ts +0 -0
- /package/dist/types/{.stencil → components}/BarNavAction/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Breadcrumb/Breadcrumb.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Button/Button.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Button/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/ButtonGroup/ButtonGroup.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Card/Card.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Checkbox/Checkbox.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Checkbox/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Chip/Chip.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Chip/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Divider/Divider.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Divider/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/EmptyState/EmptyState.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Fade/Fade.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Fade/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Field/Field.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Header/Header.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Icon/Icon.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Icon/flag-icon-catalog.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Icon/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Icon/system-icon-catalog.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Input/Input.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Input/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Loader/Loader.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Loader/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Menu/Menu.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Modal/Modal.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Pagination/Pagination.d.ts +0 -0
- /package/dist/types/{.stencil → components}/RadioGroup/RadioGroup.d.ts +0 -0
- /package/dist/types/{.stencil → components}/RadioGroup/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Scrollbar/Scrollbar.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Select/Select.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Sidebar/Sidebar.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Skeleton/Skeleton.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Skeleton/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Slider/Slider.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Slider/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Surface/Surface.d.ts +0 -0
- /package/dist/types/{.stencil → components}/TabGroup/TabGroup.d.ts +0 -0
- /package/dist/types/{.stencil → components}/TabGroup/tab-item-utils.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Table/Table.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Tag/Tag.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Tag/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Text/Text.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Text/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Toast/Toast.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Toast/toast-service.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Toggle/Toggle.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Toggle/index.d.ts +0 -0
- /package/dist/types/{.stencil → components}/ToggleButton/ToggleButton.d.ts +0 -0
- /package/dist/types/{.stencil → components}/ToggleButtonGroup/ToggleButtonGroup.d.ts +0 -0
- /package/dist/types/{.stencil → components}/Tooltip/Tooltip.d.ts +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as o,d as s}from"./p-
|
|
1
|
+
import{B as o,d as s}from"./p-_LI2ymhS.js";const t=o;const m=s;export{t as DsBarNavAction,m as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-bar-nav-action.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,c as a,h as s,a as i,t as n}from"./index.js";import{g as r,i as o}from"./p-BQq26pt9.js";import{d as h}from"./p-B_enucPQ.js";import{d}from"./p-qfvbc9w-.js";import{d as c}from"./p-DrDrPeVV.js";import{d as b}from"./p-CpbnmEu1.js";import{d as l}from"./p-DOtcc9UU.js";function u(e,t,a){if(!e||!t){return{value:"",hideTabs:false}}if(e!==t&&!e.startsWith(`${t}/`)){return{value:"",hideTabs:false}}const s=e.slice(t.length);const i=s.startsWith("/")?s.slice(1).split("/")[0]:"";const n=r(a);if(!i){return{value:n[0]?.id??"",hideTabs:false}}const o=n.find((e=>e.id===i));if(o){return{value:o.id,hideTabs:false}}return{value:"",hideTabs:true}}function v(e,t,a,s,i,n){const r=a?f(a,[]):t??[];const o=n?f(n,[]):i??[];return e.length===0&&r.length>0||s.length===0&&o.length>0}function f(e,t){if(Array.isArray(e))return e;if(typeof e==="string"&&e!==""){try{const a=JSON.parse(e);return Array.isArray(a)?a:t}catch{return t}}return t}function g(e,t){if(!e)return null;const a=e.shadowRoot??e;return a.querySelector(t)}function p(e){return g(e,'[role="tablist"]')}function m(e,t){const a=[];let s=[];for(const i of e){if(o(i)){if(s.length>0){a.push({items:s});s=[]}continue}s.push({label:i.label,value:i.id,isSelected:i.id===t,isInactive:i.disabled})}if(s.length>0){a.push({items:s})}return a}function _(e,t){const a=r(e);return a.find((e=>e.id===t))??a[0]}function k(e,t){return _(e,t)?.label??"Tabs"}function y(e,t,a,s=2){const i=e-t;if(a){return i>-s}return i>s}const w=()=>`.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.bg-primary.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-primary);background-color:var(--_bar-nav-bg)}.bg-secondary.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);background-color:var(--_bar-nav-bg)}.bg-transparent.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-primary);background-color:transparent}.bg-translucent.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-translucent);background-color:var(--_bar-nav-bg);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:0;align-items:center}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger.sc-ds-bar-nav{flex:0 1 auto;min-width:0;max-width:100%;width:auto;overflow:hidden}.bar-nav__between.sc-ds-bar-nav{flex:1 1 0%;min-width:var(--dimension-space-100)}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label.sc-ds-bar-nav{flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:block;flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__actions.sc-ds-bar-nav{flex:0 0 auto;margin-left:0}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__left.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{flex:1;min-width:0}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{width:max-content}.bar-nav__tabs-visible.sc-ds-bar-nav{width:100%;min-width:0}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);visibility:hidden;pointer-events:none}.bar-nav__tab-trigger.sc-ds-bar-nav{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--dimension-space-050);flex:0 1 auto;min-width:0;width:max-content;max-width:100%;padding:var(--dimension-space-075);background-color:transparent;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-primary);position:relative;transition:color var(--effect-motion-short-2);height:var(--dimension-size-400);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.bar-nav__tab-trigger.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none;z-index:2}.bar-nav__tab-trigger.sc-ds-bar-nav:hover::after{background:var(--_hover-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:active::after{background:var(--_pressed-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.bar-nav__tab-trigger--open.sc-ds-bar-nav::after{background:var(--_hover-bg)}.bar-nav__tab-trigger-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;padding:0 var(--dimension-space-025);overflow:hidden;--_fade-right:var(--dimension-space-025);z-index:1}.bar-nav__tab-trigger-label--truncated.sc-ds-bar-nav::after{content:'';position:absolute;top:0;right:var(--_fade-right);bottom:0;width:var(--dimension-size-400);background:linear-gradient(to right, transparent, var(--_bar-nav-bg));pointer-events:none;z-index:1}.bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:inline-block;max-width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;vertical-align:bottom}.bar-nav__tab-trigger-label-text--truncated.sc-ds-bar-nav{-webkit-mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--dimension-size-400)), transparent 100% );mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--dimension-size-400)), transparent 100% );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.bar-nav__tab-trigger-label--dot.sc-ds-bar-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050));--_fade-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.bar-nav__tab-trigger-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none;z-index:1}.bar-nav__tab-trigger-chevron.sc-ds-bar-nav{position:relative;flex-shrink:0;z-index:1}.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);color:var(--color-foreground-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex:0 0 auto;margin-left:auto}`;const x=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsTabChange=a(this,"dsTabChange");this.dsActionChange=a(this,"dsActionChange");this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.background="secondary";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.resolvedActions=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.triggerLabelTruncated=false;this.headerEl=null;this.triggerEl=null;this.triggerLabelTextEl=null;this.triggerLabelObserver=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.overflowCheckScheduled=false;this.intrinsicWidthRetryCount=0}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return k(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!_(this.resolvedTabs,this.effectiveValue)?.dot}onPropsChange(){this.resolvedTabs=this.tabsJson?f(this.tabsJson,[]):this.tabs??[];this.resolvedActions=this.actionsJson?f(this.actionsJson,[]):this.actions??[];this.syncValueFromUrl();this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}onUrlChange(){this.syncValueFromUrl();this.scheduleOverflowCheck()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(e){if(this.menuEl){this.menuEl.open=e}}onTabsCollapsedChange(e,t){if(!e){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(e){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(e||t===undefined||t===e)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.onPropsChange()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.scheduleOverflowCheck()}componentDidRender(){this.scheduleOverflowCheck();this.syncMenuAnchor();if(this.tabsCollapsed){this.updateTriggerLabelTruncation()}}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.syncTriggerLabelObserver(true)}syncHostPropsIfNeeded(){if(v(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.onPropsChange()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=e.HOST_PROP_SYNC_BUDGET;const a=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(a)}};queueMicrotask(a)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>this.scheduleOverflowCheck()));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.overflowCheckScheduled)return;this.overflowCheckScheduled=true;requestAnimationFrame((()=>{this.overflowCheckScheduled=false;this.updateTabsCollapsed();this.updateTriggerLabelTruncation()}))}syncTriggerLabelObserver(e=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(e||!this.tabsCollapsed||!this.triggerLabelTextEl){return}this.updateTriggerLabelTruncation();if(typeof ResizeObserver==="undefined")return;this.triggerLabelObserver=new ResizeObserver((()=>this.updateTriggerLabelTruncation()));this.triggerLabelObserver.observe(this.triggerLabelTextEl);if(this.triggerEl){this.triggerLabelObserver.observe(this.triggerEl)}}updateTriggerLabelTruncation(){const e=this.triggerLabelTextEl;if(!e||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const t=e.scrollWidth>e.clientWidth+1;if(t!==this.triggerLabelTruncated){this.triggerLabelTruncated=t}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const e=getComputedStyle(this.headerEl);const t=parseFloat(e.columnGap||e.gap||"0")||0;const a=this.headerEl.querySelector(".bar-nav__actions");const s=a?.offsetWidth??0;const i=(parseFloat(e.paddingLeft)||0)+(parseFloat(e.paddingRight)||0);const n=this.tabsCollapsed?parseFloat(getComputedStyle(this.headerEl).getPropertyValue("--dimension-space-100").trim())||8:a?t:0;const r=this.headerEl.clientWidth-i-s-n;return Math.max(0,r)}getTabsIntrinsicWidth(){const e=p(this.probeTabGroupEl);return e?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=e.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;return}const e=this.getTabsIntrinsicWidth();if(e===0){this.scheduleIntrinsicWidthRetry();return}this.intrinsicWidthRetryCount=0;const t=y(e,this.getLeftZoneAvailableWidth(),this.tabsCollapsed);if(t!==this.tabsCollapsed){this.tabsCollapsed=t;if(!t){this.menuOpen=false}}}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.tabsCollapsed)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(e){const t=e.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=m(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:e,hideTabs:t}=u(this.currentUrl,this.basePath,this.resolvedTabs);this.urlDerivedValue=e;this.hideTabsForDetailRoute=t}selectTab(e){this.value=e;this.dsTabChange.emit(e)}focusVisibleSelectedTab(){const e=g(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);e?.focus({preventScroll:true})}handleTabChange(e){this.selectTab(e.detail)}handleActionChange(e,t){const a=t.detail;this.dsActionChange.emit({id:e,selected:a})}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(e){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(e.key==="ArrowDown"||e.key==="ArrowUp"||e.key==="Enter"||e.key===" "){e.preventDefault();this.toggleTabMenu()}return}if(e.key==="Escape"){e.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}render(){const e=this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const t={};const a=t[this.background];return s(i,{key:"6a9d06038e714910ee3375976014d5afe659e2c6"},s("header",{key:"3c4d7c65013ce9da9c4a1d9588446bfdbdf1bcb4",class:{"bar-nav":true,[`bg-${this.background}`]:true,"bar-nav--tabs-collapsed":e&&this.tabsCollapsed},ref:e=>{this.headerEl=e;if(e&&!this.resizeObserver){this.setupOverflowObserver()}}},e&&s("div",{key:"36f1e91251e9989b80a3bb281f2847158759cb4d",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},s("ds-tab-group-nav",{key:"a24197e86bdde94923267d19c423886dfd363de3",ref:e=>{this.probeTabGroupEl=e??null;if(e){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue})),e&&!this.tabsCollapsed&&s("div",{key:"7bc48ddd515153663513ab7c16609fa94183816f",class:"bar-nav__left"},s("ds-tab-group-nav",{key:"f80f1d9cc146da03f90585e4649d2705fe2c705b",class:"bar-nav__tabs-visible",ref:e=>{this.visibleTabGroupEl=e??null},tabs:this.resolvedTabs,value:this.effectiveValue,onDsChange:e=>this.handleTabChange(e)})),!e&&this.heading&&s("span",{key:"19019151704839426b23973cbc5699bdc6b270ca",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),e&&this.tabsCollapsed&&s("button",{key:"9aaafe90f6ac0978dc1f25515f7ee3cd7f6ad19d",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:e=>{this.triggerEl=e},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:e=>this.handleTriggerKeyDown(e)},s("span",{key:"0eaac771fba9716c6be8de618927129d74c2c92c",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"bar-nav__tab-trigger-label--truncated":this.triggerLabelTruncated}},s("span",{key:"79eada547183c260649ced329217039ed76c154c",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:e=>{const t=e??null;if(t===this.triggerLabelTextEl)return;this.triggerLabelTextEl=t;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&s("ds-badge",{key:"d01174ec2e7472c420057eb7c1bcf5caeb59e78c",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})),s("ds-icon",{key:"0ad57d2982bf042c1182635d450f4535ac3a9e8c",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"})),e&&this.tabsCollapsed&&this.resolvedActions.length>0&&s("div",{key:"3810a859c0478ec91eb4afdeb3e8659964e1f9fa",class:"bar-nav__between","aria-hidden":"true"}),this.resolvedActions.length>0&&s("div",{key:"96f178d000fc3bb3d9581f416931640f55035c6b",class:"bar-nav__actions"},this.resolvedActions.map((e=>s("ds-bar-nav-action",{key:e.id,icon:e.icon,selected:e.selected??false,dot:e.dot??false,inactive:e.inactive,"aria-label":e.ariaLabel??e.id,background:a,onDsChange:t=>this.handleActionChange(e.id,t)}))))),e&&this.tabsCollapsed&&s("ds-menu",{key:"4e1522090ab98325cbc554874a50d32d34400472",ref:e=>{this.menuEl=e??null},open:this.menuOpen,sections:m(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:e=>this.handleMenuSelect(e),onDsClose:()=>this.handleMenuClose()}))}static get watchers(){return{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return w()}},[2,"ds-bar-nav",{tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],actions:[16],actionsJson:[1,"actions-json"],heading:[1],background:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],resolvedActions:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],triggerLabelTruncated:[32]},undefined,{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);x.HOST_PROP_SYNC_BUDGET=8;x.INTRINSIC_WIDTH_RETRY_MAX=3;function C(){if(typeof customElements==="undefined"){return}const e=["ds-bar-nav","ds-badge","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group-nav"];e.forEach((e=>{switch(e){case"ds-bar-nav":if(!customElements.get(n(e))){customElements.define(n(e),x)}break;case"ds-badge":if(!customElements.get(n(e))){h()}break;case"ds-bar-nav-action":if(!customElements.get(n(e))){d()}break;case"ds-icon":if(!customElements.get(n(e))){c()}break;case"ds-menu":if(!customElements.get(n(e))){b()}break;case"ds-tab-group-nav":if(!customElements.get(n(e))){l()}break}}))}C();const T=x;const z=C;export{T as DsBarNav,z as defineCustomElement};
|
|
1
|
+
import{p as a,H as e,c as t,h as s,a as i,t as n}from"./index.js";import{S as r}from"./p-DznbYg1m.js";import{g as o,i as h}from"./p-BQq26pt9.js";import{d}from"./p-B_enucPQ.js";import{d as b}from"./p-_LI2ymhS.js";import{d as c}from"./p-DqBCQRRd.js";import{d as l}from"./p-CpbnmEu1.js";import{d as v}from"./p-DceSoh5V.js";function f(a,e,t){if(!a||!e){return{value:"",hideTabs:false}}if(a!==e&&!a.startsWith(`${e}/`)){return{value:"",hideTabs:false}}const s=a.slice(e.length);const i=s.startsWith("/")?s.slice(1).split("/")[0]:"";const n=o(t);if(!i){return{value:n[0]?.id??"",hideTabs:false}}const r=n.find((a=>a.id===i));if(r){return{value:r.id,hideTabs:false}}return{value:"",hideTabs:true}}function u(a,e,t,s,i,n){const r=t?g(t,[]):e??[];const o=n?g(n,[]):i??[];return a.length===0&&r.length>0||s.length===0&&o.length>0}function g(a,e){if(Array.isArray(a))return a;if(typeof a==="string"&&a!==""){try{const t=JSON.parse(a);return Array.isArray(t)?t:e}catch{return e}}return e}function p(a,e){if(!a)return null;const t=a.shadowRoot??a;return t.querySelector(e)}function m(a){return p(a,'[role="tablist"]')}function _(a,e){const t=[];let s=[];for(const i of a){if(h(i)){if(s.length>0){t.push({items:s});s=[]}continue}s.push({label:i.label,value:i.id,isSelected:i.id===e,isInactive:i.disabled})}if(s.length>0){t.push({items:s})}return t}function y(a,e){const t=o(a);return t.find((a=>a.id===e))??t[0]}function k(a,e){return y(a,e)?.label??"Tabs"}function w(a,e,t,s=2){const i=a-e;if(t){return i>-s}return i>s}const x=()=>`.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3)}.bar-nav--default.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}.bar-nav--navigation.sc-ds-bar-nav{--_bar-nav-bg:var(--color-navigation-background);--_bar-nav-border:var(--color-navigation-border-tertiary);--_bar-nav-fg-primary:var(--color-navigation-foreground-primary);--_bar-nav-fg-secondary:var(--color-navigation-foreground-secondary);--_bar-nav-hover:var(--color-navigation-interaction-hover);--_bar-nav-pressed:var(--color-navigation-interaction-pressed);--_bar-nav-focus:var(--color-navigation-interaction-focus);--_bar-nav-dot:var(--color-navigation-foreground-brand)}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:0;align-items:center}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger.sc-ds-bar-nav{flex:0 1 auto;min-width:0;max-width:100%;width:auto;overflow:hidden}.bar-nav__between.sc-ds-bar-nav{flex:1 1 0%;min-width:var(--dimension-space-100)}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label.sc-ds-bar-nav{flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:block;flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__actions.sc-ds-bar-nav{flex:0 0 auto;margin-left:0}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__left.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{flex:1;min-width:0}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{width:max-content}.bar-nav__tabs-visible.sc-ds-bar-nav{width:100%;min-width:0}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);visibility:hidden;pointer-events:none}.bar-nav__tab-trigger.sc-ds-bar-nav{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--dimension-space-050);flex:0 1 auto;min-width:0;width:max-content;max-width:100%;padding:var(--dimension-space-075);background-color:transparent;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_bar-nav-fg-primary);position:relative;transition:color var(--effect-motion-short-2);height:var(--dimension-size-400);--_hover-bg:var(--_bar-nav-hover);--_pressed-bg:var(--_bar-nav-pressed);--_dot:var(--_bar-nav-dot);--_dot-ring:var(--_bar-nav-bg)}.bar-nav__tab-trigger.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none;z-index:2}.bar-nav__tab-trigger.sc-ds-bar-nav:hover::after{background:var(--_hover-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:active::after{background:var(--_pressed-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--_bar-nav-focus);outline-offset:var(--dimension-space-025)}.bar-nav__tab-trigger--open.sc-ds-bar-nav::after{background:var(--_hover-bg)}.bar-nav__tab-trigger-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;padding:0 var(--dimension-space-025);overflow:hidden;--_fade-right:var(--dimension-space-025);z-index:1}.bar-nav__tab-trigger-label--truncated.sc-ds-bar-nav::after{content:'';position:absolute;top:0;right:var(--_fade-right);bottom:0;width:var(--dimension-size-400);background:linear-gradient(to right, transparent, var(--_bar-nav-bg));pointer-events:none;z-index:1}.bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:inline-block;max-width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;vertical-align:bottom}.bar-nav__tab-trigger-label-text--truncated.sc-ds-bar-nav{-webkit-mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--dimension-size-400)), transparent 100% );mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--dimension-size-400)), transparent 100% );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.bar-nav__tab-trigger-label--dot.sc-ds-bar-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050));--_fade-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.bar-nav__tab-trigger-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none;z-index:1}.bar-nav__tab-trigger-chevron.sc-ds-bar-nav{position:relative;flex-shrink:0;z-index:1}.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);color:var(--_bar-nav-fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex:0 0 auto;margin-left:auto}`;const C=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.dsTabChange=t(this,"dsTabChange");this.dsActionChange=t(this,"dsActionChange");this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.navStyle="default";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.resolvedActions=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.triggerLabelTruncated=false;this.headerEl=null;this.triggerEl=null;this.triggerLabelTextEl=null;this.triggerLabelObserver=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.overflowCheckScheduled=false;this.intrinsicWidthRetryCount=0}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return k(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!y(this.resolvedTabs,this.effectiveValue)?.dot}onPropsChange(){this.resolvedTabs=this.tabsJson?g(this.tabsJson,[]):this.tabs??[];this.resolvedActions=this.actionsJson?g(this.actionsJson,[]):this.actions??[];this.syncValueFromUrl();this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}onUrlChange(){this.syncValueFromUrl();this.scheduleOverflowCheck()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(a){if(this.menuEl){this.menuEl.open=a}}onTabsCollapsedChange(a,e){if(!a){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(a){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(a||e===undefined||e===a)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.onPropsChange()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.scheduleOverflowCheck()}componentDidRender(){this.scheduleOverflowCheck();this.syncMenuAnchor();if(this.tabsCollapsed){this.updateTriggerLabelTruncation()}}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.syncTriggerLabelObserver(true)}syncHostPropsIfNeeded(){if(u(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.onPropsChange()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let e=a.HOST_PROP_SYNC_BUDGET;const t=()=>{this.syncHostPropsIfNeeded();if(--e>0){requestAnimationFrame(t)}};queueMicrotask(t)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>this.scheduleOverflowCheck()));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.overflowCheckScheduled)return;this.overflowCheckScheduled=true;requestAnimationFrame((()=>{this.overflowCheckScheduled=false;this.updateTabsCollapsed();this.updateTriggerLabelTruncation()}))}syncTriggerLabelObserver(a=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(a||!this.tabsCollapsed||!this.triggerLabelTextEl){return}this.updateTriggerLabelTruncation();if(typeof ResizeObserver==="undefined")return;this.triggerLabelObserver=new ResizeObserver((()=>this.updateTriggerLabelTruncation()));this.triggerLabelObserver.observe(this.triggerLabelTextEl);if(this.triggerEl){this.triggerLabelObserver.observe(this.triggerEl)}}updateTriggerLabelTruncation(){const a=this.triggerLabelTextEl;if(!a||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const e=a.scrollWidth>a.clientWidth+1;if(e!==this.triggerLabelTruncated){this.triggerLabelTruncated=e}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const a=getComputedStyle(this.headerEl);const e=parseFloat(a.columnGap||a.gap||"0")||0;const t=this.headerEl.querySelector(".bar-nav__actions");const s=t?.offsetWidth??0;const i=(parseFloat(a.paddingLeft)||0)+(parseFloat(a.paddingRight)||0);const n=this.tabsCollapsed?parseFloat(getComputedStyle(this.headerEl).getPropertyValue("--dimension-space-100").trim())||8:t?e:0;const r=this.headerEl.clientWidth-i-s-n;return Math.max(0,r)}getTabsIntrinsicWidth(){const a=m(this.probeTabGroupEl);return a?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=a.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;return}const a=this.getTabsIntrinsicWidth();if(a===0){this.scheduleIntrinsicWidthRetry();return}this.intrinsicWidthRetryCount=0;const e=w(a,this.getLeftZoneAvailableWidth(),this.tabsCollapsed);if(e!==this.tabsCollapsed){this.tabsCollapsed=e;if(!e){this.menuOpen=false}}}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.tabsCollapsed)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(a){const e=a.detail;if(e?.value!==undefined){this.selectTab(String(e.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=_(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:a,hideTabs:e}=f(this.currentUrl,this.basePath,this.resolvedTabs);this.urlDerivedValue=a;this.hideTabsForDetailRoute=e}selectTab(a){this.value=a;this.dsTabChange.emit(a)}focusVisibleSelectedTab(){const a=p(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);a?.focus({preventScroll:true})}handleTabChange(a){this.selectTab(a.detail)}handleActionChange(a,e){const t=e.detail;this.dsActionChange.emit({id:a,selected:t})}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(a){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(a.key==="ArrowDown"||a.key==="ArrowUp"||a.key==="Enter"||a.key===" "){a.preventDefault();this.toggleTabMenu()}return}if(a.key==="Escape"){a.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}get tabSurface(){return this.navStyle==="navigation"?"navigation":undefined}render(){const a=this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const e=this.tabSurface;return s(i,{key:"7e641e23ce2dd35c24cfa703c9d262362bdde855"},s("header",{key:"c727d27f8a2bfff94b42f15db783b9face7098f6",class:{"bar-nav":true,"bar-nav--navigation":this.navStyle==="navigation","bar-nav--default":this.navStyle==="default","bar-nav--tabs-collapsed":a&&this.tabsCollapsed},style:{viewTransitionName:r},ref:a=>{this.headerEl=a;if(a&&!this.resizeObserver){this.setupOverflowObserver()}}},a&&s("div",{key:"a237045bb6646dd51cd62e2b6799412f403457a2",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},s("ds-tab-group-nav",{key:"dd053f55c8f738a3645b8f94d8b17d627606c537",ref:a=>{this.probeTabGroupEl=a??null;if(a){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue,background:e})),a&&!this.tabsCollapsed&&s("div",{key:"85606147847d16e086c36f16665f8af842bf598f",class:"bar-nav__left"},s("ds-tab-group-nav",{key:"558a684d4a0f73a885a32909ebcd2101ce035780",class:"bar-nav__tabs-visible",ref:a=>{this.visibleTabGroupEl=a??null},tabs:this.resolvedTabs,value:this.effectiveValue,background:e,onDsChange:a=>this.handleTabChange(a)})),!a&&this.heading&&s("span",{key:"3775475d9c79078d1797757a98c03db19334cf6f",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),a&&this.tabsCollapsed&&s("button",{key:"f3a170f42b0c781e048f8f9398f5938f97aff92c",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:a=>{this.triggerEl=a},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:a=>this.handleTriggerKeyDown(a)},s("span",{key:"07c90e6264c5636944680451e0c1b89bc3470a2a",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"bar-nav__tab-trigger-label--truncated":this.triggerLabelTruncated}},s("span",{key:"54c7357b701858b2d05824f3cac39003bda26e8d",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:a=>{const e=a??null;if(e===this.triggerLabelTextEl)return;this.triggerLabelTextEl=e;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&s("ds-badge",{key:"94618fb7922938b92159c38b4900de4dc8c9ce27",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_bar-nav-bg)",label:"","aria-hidden":"true"})),s("ds-icon",{key:"2566a308b90761d0b6bb9ad3d41b3e5a10a4e218",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"})),a&&this.tabsCollapsed&&this.resolvedActions.length>0&&s("div",{key:"895791a2f34560f87bef98e5df4e5f5c7dbdde8d",class:"bar-nav__between","aria-hidden":"true"}),this.resolvedActions.length>0&&s("div",{key:"54442d862cc26f74b3e5496021b303cbc3fa99f8",class:"bar-nav__actions"},this.resolvedActions.map((a=>s("ds-bar-nav-action",{key:a.id,icon:a.icon,selected:a.selected??false,dot:a.dot??false,inactive:a.inactive,"aria-label":a.ariaLabel??a.id,background:e,onDsChange:e=>this.handleActionChange(a.id,e)}))))),a&&this.tabsCollapsed&&s("ds-menu",{key:"fa553ba9588b806df0c61c1389ef847acdae0ed5",ref:a=>{this.menuEl=a??null},open:this.menuOpen,sections:_(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:a=>this.handleMenuSelect(a),onDsClose:()=>this.handleMenuClose()}))}static get watchers(){return{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return x()}},[2,"ds-bar-nav",{tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],actions:[16],actionsJson:[1,"actions-json"],heading:[1],navStyle:[513,"nav-style"],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],resolvedActions:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],triggerLabelTruncated:[32]},undefined,{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);C.HOST_PROP_SYNC_BUDGET=8;C.INTRINSIC_WIDTH_RETRY_MAX=3;function T(){if(typeof customElements==="undefined"){return}const a=["ds-bar-nav","ds-badge","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group-nav"];a.forEach((a=>{switch(a){case"ds-bar-nav":if(!customElements.get(n(a))){customElements.define(n(a),C)}break;case"ds-badge":if(!customElements.get(n(a))){d()}break;case"ds-bar-nav-action":if(!customElements.get(n(a))){b()}break;case"ds-icon":if(!customElements.get(n(a))){c()}break;case"ds-menu":if(!customElements.get(n(a))){l()}break;case"ds-tab-group-nav":if(!customElements.get(n(a))){v()}break}}))}T();const z=C;const S=T;export{z as DsBarNav,S as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-bar-nav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["deriveBarNavValueFromUrl","path","basePath","tabs","value","hideTabs","startsWith","remainder","slice","length","seg","split","selectableTabs","getSelectableTabs","id","tab","find","t","shouldResyncBarNavProps","resolvedTabs","tabsJson","resolvedActions","actions","actionsJson","tabsIncoming","parseJsonArrayProp","actionsIncoming","fallback","Array","isArray","parsed","JSON","parse","queryWithinComponentHost","host","selector","root","shadowRoot","querySelector","getTabListFromTabGroup","tabGroupEl","tabsToMenuSections","selectedId","sections","batch","item","isTabDivider","push","items","label","isSelected","isInactive","disabled","getActiveTab","selectable","getActiveTabLabel","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","currentUrl","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","tabLayoutCommitted","triggerLabelTruncated","headerEl","triggerEl","triggerLabelTextEl","triggerLabelObserver","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","overflowCheckScheduled","intrinsicWidthRetryCount","effectiveValue","activeTabLabel","activeTabHasDot","dot","onPropsChange","syncValueFromUrl","scheduleOverflowCheck","onUrlChange","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","syncTriggerLabelObserver","requestAnimationFrame","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","componentDidRender","syncMenuAnchor","updateTriggerLabelTruncation","disconnectedCallback","disconnect","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","updateTabsCollapsed","disconnectOnly","el","truncated","scrollWidth","clientWidth","getLeftZoneAvailableWidth","headerStyle","getComputedStyle","gap","parseFloat","columnGap","actionsEl","actionsWidth","offsetWidth","horizontalPadding","paddingLeft","paddingRight","spacing","getPropertyValue","trim","available","Math","max","getTabsIntrinsicWidth","tabList","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","intrinsicWidth","shouldCollapse","anchor","handleMenuSelect","e","detail","selectTab","String","handleMenuClose","dsTabChange","emit","focus","preventScroll","handleTabChange","handleActionChange","actionId","selected","dsActionChange","toggleTabMenu","minWidth","handleTriggerKeyDown","key","preventDefault","render","hasTabs","bgToActionBg","actionBg","h","Host","class","ref","inert","onDsChange","heading","type","onClick","onKeyDown","next","variant","name","size","color","map","action","icon","inactive","ariaLabel","side","align","onDsSelect","onDsClose"],"sources":["src/wc/components/BarNav/bar-nav-utils.ts","src/wc/components/BarNav/bar-nav-dom-utils.ts","src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["import { getSelectableTabs } from '../TabGroup/tab-item-utils';\nimport type { BarNavActionItem, BarNavTab } from './BarNav';\n\nexport interface BarNavUrlState {\n /** Tab id derived from the URL, or empty when none applies. */\n value: string;\n /** When true, tabs should be hidden (e.g. non-tab child routes like detail pages). */\n hideTabs: boolean;\n}\n\n/** Derive BarNav tab selection from `currentUrl` relative to `basePath`.\n * Mirrors motive-webapp-lab `resolveBarNavState` tab-selection semantics. */\nexport function deriveBarNavValueFromUrl(\n path: string,\n basePath: string,\n tabs: BarNavTab[],\n): BarNavUrlState {\n if (!path || !basePath) {\n return { value: '', hideTabs: false };\n }\n\n if (path !== basePath && !path.startsWith(`${basePath}/`)) {\n return { value: '', hideTabs: false };\n }\n\n const remainder = path.slice(basePath.length);\n const seg = remainder.startsWith('/') ? remainder.slice(1).split('/')[0] : '';\n const selectableTabs = getSelectableTabs(tabs);\n\n if (!seg) {\n return { value: selectableTabs[0]?.id ?? '', hideTabs: false };\n }\n\n const tab = selectableTabs.find(t => t.id === seg);\n if (tab) {\n return { value: tab.id, hideTabs: false };\n }\n\n return { value: '', hideTabs: true };\n}\n\n/** True when host array/json props have data but resolved internal state is still empty. */\nexport function shouldResyncBarNavProps(\n resolvedTabs: BarNavTab[],\n tabs: BarNavTab[],\n tabsJson: string,\n resolvedActions: BarNavActionItem[],\n actions: BarNavActionItem[],\n actionsJson: string,\n): boolean {\n const tabsIncoming = tabsJson\n ? parseJsonArrayProp(tabsJson, [])\n : (tabs ?? []);\n const actionsIncoming = actionsJson\n ? parseJsonArrayProp(actionsJson, [])\n : (actions ?? []);\n\n return (\n (resolvedTabs.length === 0 && tabsIncoming.length > 0) ||\n (resolvedActions.length === 0 && actionsIncoming.length > 0)\n );\n}\n\n/** Parse tabs/actions from either a JSON attribute string or a JS property array. */\nexport function parseJsonArrayProp<T>(value: string | T[] | undefined, fallback: T[]): T[] {\n if (Array.isArray(value)) return value;\n if (typeof value === 'string' && value !== '') {\n try {\n const parsed = JSON.parse(value);\n return Array.isArray(parsed) ? parsed : fallback;\n } catch {\n return fallback;\n }\n }\n return fallback;\n}\n","export type QueryableHost = {\n shadowRoot?: ShadowRoot | null;\n querySelector: (selectors: string) => Element | null;\n};\n\n/**\n * Query within a Stencil custom-element host (light DOM today, shadow DOM–safe).\n * Use for child nodes owned by ds-tab-group and similar components.\n */\nexport function queryWithinComponentHost(\n host: QueryableHost | null | undefined,\n selector: string,\n): HTMLElement | null {\n if (!host) return null;\n const root = host.shadowRoot ?? host;\n return root.querySelector(selector) as HTMLElement | null;\n}\n\nexport function getTabListFromTabGroup(\n tabGroupEl: QueryableHost | null | undefined,\n): HTMLElement | null {\n return queryWithinComponentHost(tabGroupEl, '[role=\"tablist\"]');\n}\n","import type { MenuSection } from '../Menu/Menu';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n const sections: MenuSection[] = [];\n let batch: MenuSection['items'] = [];\n\n for (const item of tabs) {\n if (isTabDivider(item)) {\n if (batch.length > 0) {\n sections.push({ items: batch });\n batch = [];\n }\n continue;\n }\n\n batch.push({\n label: item.label,\n value: item.id,\n isSelected: item.id === selectedId,\n isInactive: item.disabled,\n });\n }\n\n if (batch.length > 0) {\n sections.push({ items: batch });\n }\n\n return sections;\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n const selectable = getSelectableTabs(tabs);\n return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n tabListScrollWidth: number,\n containerClientWidth: number,\n collapsed: boolean,\n hysteresis = 2,\n): boolean {\n const diff = tabListScrollWidth - containerClientWidth;\n if (collapsed) {\n return diff > -hysteresis;\n }\n return diff > hysteresis;\n}\n",":host {\n display: block;\n}\n\n.bar-nav {\n display: flex;\n align-items: center;\n position: relative;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n gap: var(--dimension-space-100);\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n/* Background variants — mirrors ds-header pattern */\n.bg-primary {\n --_bar-nav-bg: var(--color-background-primary);\n background-color: var(--_bar-nav-bg);\n}\n.bg-secondary {\n --_bar-nav-bg: var(--color-background-secondary);\n background-color: var(--_bar-nav-bg);\n}\n.bg-transparent {\n --_bar-nav-bg: var(--color-background-primary);\n background-color: transparent;\n}\n.bg-translucent {\n --_bar-nav-bg: var(--color-background-translucent);\n background-color: var(--_bar-nav-bg);\n backdrop-filter: blur(var(--effect-blur-md));\n -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n/* Collapsed — explicit spacer keeps the 8px minimum while the trigger can shrink. */\n.bar-nav--tabs-collapsed {\n display: flex;\n gap: 0;\n align-items: center;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger {\n flex: 0 1 auto;\n min-width: 0;\n max-width: 100%;\n width: auto;\n overflow: hidden;\n}\n\n.bar-nav__between {\n flex: 1 1 0%;\n min-width: var(--dimension-space-100);\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger-label {\n flex: 1 1 0%;\n min-width: 0;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger-label-text {\n display: block;\n flex: 1 1 0%;\n min-width: 0;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__actions {\n flex: 0 0 auto;\n margin-left: 0;\n}\n\n/* Expanded tabs — consume space between start and actions */\n.bar-nav__left {\n position: relative;\n flex: 1 1 0%;\n min-width: 0;\n width: 0;\n display: flex;\n align-items: center;\n}\n\n.bar-nav__left ds-tab-group-nav {\n flex: 1;\n min-width: 0;\n}\n\n/* Unconstrained width so intrinsic tab row width is measurable while collapsed */\n.bar-nav__tabs-probe {\n position: absolute;\n left: 0;\n top: 0;\n visibility: hidden;\n pointer-events: none;\n overflow: visible;\n width: max-content;\n max-width: none;\n z-index: -1;\n}\n\n.bar-nav__tabs-probe ds-tab-group-nav {\n width: max-content;\n}\n\n.bar-nav__tabs-visible {\n width: 100%;\n min-width: 0;\n}\n\n/* In-flow placeholder while measuring overflow — avoids layout jump; hidden from view/accessibility. */\n.bar-nav__tabs-pending {\n flex: 1;\n min-width: 0;\n height: var(--dimension-size-400);\n visibility: hidden;\n pointer-events: none;\n}\n\n/* Collapsed tab trigger — mirrors TabGroup .tab (+ chevron when collapsed) */\n.bar-nav__tab-trigger {\n all: unset;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n gap: var(--dimension-space-050);\n flex: 0 1 auto;\n min-width: 0;\n width: max-content;\n max-width: 100%;\n padding: var(--dimension-space-075);\n background-color: transparent;\n border-radius: var(--dimension-radius-025);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n color: var(--color-foreground-primary);\n position: relative;\n transition: color var(--effect-motion-short-2);\n height: var(--dimension-size-400);\n --_hover-bg: var(--color-interaction-hover);\n --_pressed-bg: var(--color-interaction-pressed);\n --_dot: var(--color-foreground-bold-brand);\n --_dot-ring: var(--color-background-secondary);\n}\n\n.bar-nav__tab-trigger::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025);\n background: transparent;\n pointer-events: none;\n transition: none;\n z-index: 2;\n}\n\n.bar-nav__tab-trigger:hover::after {\n background: var(--_hover-bg);\n transition: none;\n}\n\n.bar-nav__tab-trigger:active::after {\n background: var(--_pressed-bg);\n transition: none;\n}\n\n.bar-nav__tab-trigger:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n.bar-nav__tab-trigger--open::after {\n background: var(--_hover-bg);\n}\n\n.bar-nav__tab-trigger-label {\n position: relative;\n display: inline-flex;\n align-items: center;\n flex: 0 1 auto;\n min-width: 0;\n max-width: 100%;\n padding: 0 var(--dimension-space-025);\n overflow: hidden;\n --_fade-right: var(--dimension-space-025);\n z-index: 1;\n}\n\n.bar-nav__tab-trigger-label--truncated::after {\n content: '';\n position: absolute;\n top: 0;\n right: var(--_fade-right);\n bottom: 0;\n width: var(--dimension-size-400);\n background: linear-gradient(to right, transparent, var(--_bar-nav-bg));\n pointer-events: none;\n z-index: 1;\n}\n\n.bar-nav__tab-trigger-label-text {\n display: inline-block;\n max-width: 100%;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n vertical-align: bottom;\n}\n\n.bar-nav__tab-trigger-label-text--truncated {\n -webkit-mask-image: linear-gradient(\n to right,\n #000 0,\n #000 calc(100% - var(--dimension-size-400)),\n transparent 100%\n );\n mask-image: linear-gradient(\n to right,\n #000 0,\n #000 calc(100% - var(--dimension-size-400)),\n transparent 100%\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.bar-nav__tab-trigger-label--dot {\n padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n --_fade-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n.bar-nav__tab-trigger-dot {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n z-index: 1;\n}\n\n.bar-nav__tab-trigger-chevron {\n position: relative;\n flex-shrink: 0;\n z-index: 1;\n}\n\n/* Fallback heading when no tabs — matches a single (selected) tab so the area\n name shares the tab label's type token, color, height and horizontal inset.\n Inset = tab button padding (space-075, 6px) + label inset (space-025, 2px). */\n.bar-nav__heading {\n display: inline-flex;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n color: var(--color-foreground-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Right zone — pinned to the end; header gap is the min space from tabs/trigger */\n.bar-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n flex: 0 0 auto;\n margin-left: auto;\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n Watch,\n State,\n h,\n Host,\n} from '@stencil/core';\nimport type { MenuItemData } from '../Menu/Menu';\nimport type { BarNavActionBackground } from '../BarNavAction/BarNavAction';\nimport type { TabItem } from '../TabGroup/tab-item-utils';\nimport {\n deriveBarNavValueFromUrl,\n parseJsonArrayProp,\n shouldResyncBarNavProps,\n} from './bar-nav-utils';\nimport {\n getTabListFromTabGroup,\n queryWithinComponentHost,\n type QueryableHost,\n} from './bar-nav-dom-utils';\nimport {\n getActiveTab,\n getActiveTabLabel,\n tabsOverflowContainer,\n tabsToMenuSections,\n} from './bar-nav-tabs-menu-utils';\n\nexport type BarNavBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\n/** Same shape as `TabItem` — supports `{ type: 'divider' }` between tab groups. */\nexport type BarNavTab = TabItem;\n\nexport interface BarNavActionItem {\n id: string;\n /** Icon name for <ds-icon>. */\n icon: string;\n /** Whether this action button is currently pressed/active. */\n selected?: boolean;\n /** Show a notification dot. */\n dot?: boolean;\n inactive?: boolean;\n ariaLabel?: string;\n}\n\n@Component({\n tag: 'ds-bar-nav',\n styleUrl: 'BarNav.css',\n scoped: true,\n})\nexport class BarNav {\n /**\n * Tab items for the left section.\n * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n */\n @Prop() tabs: BarNavTab[] = [];\n\n /** JSON fallback for `tabs` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n\n /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Action items rendered in the right section.\n * Set via JS property: `el.actions = [...]`. Replace the array reference to update.\n */\n @Prop() actions: BarNavActionItem[] = [];\n\n /** JSON fallback for `actions` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'actions-json' }) actionsJson: string = '';\n\n /**\n * Fallback heading shown when no tabs are provided.\n * When tabs are present the heading is hidden.\n */\n @Prop() heading: string | undefined;\n\n /** Surface background variant. */\n @Prop() background: BarNavBackground = 'secondary';\n\n /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n @Prop() basePath: string = '';\n\n /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n @Prop() currentUrl: string = '';\n\n /** Emitted when the active tab changes. Detail = tab id. */\n @Event() dsTabChange!: EventEmitter<string>;\n\n /** Emitted when an action button is toggled. Detail = { id, selected }. */\n @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;\n\n @State() private resolvedTabs: BarNavTab[] = [];\n @State() private resolvedActions: BarNavActionItem[] = [];\n @State() private urlDerivedValue: string = '';\n @State() private hideTabsForDetailRoute = false;\n @State() private tabsCollapsed = false;\n @State() private menuOpen = false;\n /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n @State() private tabLayoutCommitted = false;\n @State() private triggerLabelTruncated = false;\n\n private static readonly HOST_PROP_SYNC_BUDGET = 8;\n private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n\n private headerEl: HTMLElement | null = null;\n private triggerEl: HTMLButtonElement | null = null;\n private triggerLabelTextEl: HTMLElement | null = null;\n private triggerLabelObserver: ResizeObserver | null = null;\n private menuEl: HTMLDsMenuElement | null = null;\n private visibleTabGroupEl: QueryableHost | null = null;\n private probeTabGroupEl: QueryableHost | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private overflowCheckScheduled = false;\n private intrinsicWidthRetryCount = 0;\n\n private get effectiveValue(): string {\n if (this.currentUrl && this.basePath) {\n return this.urlDerivedValue;\n }\n return this.value;\n }\n\n private get activeTabLabel(): string {\n return getActiveTabLabel(this.resolvedTabs, this.effectiveValue);\n }\n\n private get activeTabHasDot(): boolean {\n return !!getActiveTab(this.resolvedTabs, this.effectiveValue)?.dot;\n }\n\n @Watch('tabs')\n @Watch('tabsJson')\n @Watch('actions')\n @Watch('actionsJson')\n onPropsChange() {\n this.resolvedTabs = this.tabsJson\n ? parseJsonArrayProp(this.tabsJson, [])\n : (this.tabs ?? []);\n this.resolvedActions = this.actionsJson\n ? parseJsonArrayProp(this.actionsJson, [])\n : (this.actions ?? []);\n this.syncValueFromUrl();\n this.intrinsicWidthRetryCount = 0;\n this.scheduleOverflowCheck();\n }\n\n @Watch('currentUrl')\n @Watch('basePath')\n onUrlChange() {\n this.syncValueFromUrl();\n this.scheduleOverflowCheck();\n }\n\n @Watch('value')\n @Watch('urlDerivedValue')\n onSelectionChange() {\n this.syncMenuSections();\n this.scheduleOverflowCheck();\n }\n\n @Watch('menuOpen')\n onMenuOpenChange(open: boolean) {\n if (this.menuEl) {\n this.menuEl.open = open;\n }\n }\n\n @Watch('tabsCollapsed')\n onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n if (!collapsed) {\n this.menuOpen = false;\n this.menuEl = null;\n this.triggerLabelTruncated = false;\n this.syncTriggerLabelObserver();\n }\n this.scheduleOverflowCheck();\n if (collapsed) {\n requestAnimationFrame(() => {\n this.scheduleOverflowCheck();\n this.syncTriggerLabelObserver();\n });\n }\n if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n queueMicrotask(() => this.focusVisibleSelectedTab());\n }\n\n componentWillLoad() {\n this.onPropsChange();\n }\n\n componentDidLoad() {\n this.syncHostPropsIfNeeded();\n this.scheduleDeferredHostPropSync();\n this.setupOverflowObserver();\n this.scheduleOverflowCheck();\n }\n\n componentDidRender() {\n this.scheduleOverflowCheck();\n this.syncMenuAnchor();\n if (this.tabsCollapsed) {\n this.updateTriggerLabelTruncation();\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.syncTriggerLabelObserver(true);\n }\n\n /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n private syncHostPropsIfNeeded() {\n if (\n shouldResyncBarNavProps(\n this.resolvedTabs,\n this.tabs,\n this.tabsJson,\n this.resolvedActions,\n this.actions,\n this.actionsJson,\n )\n ) {\n this.onPropsChange();\n } else if (this.currentUrl && this.basePath) {\n this.syncValueFromUrl();\n }\n }\n\n /** Poll across animation frames — host props may land without triggering @Watch. */\n private scheduleDeferredHostPropSync() {\n let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n const tick = () => {\n this.syncHostPropsIfNeeded();\n if (--remaining > 0) {\n requestAnimationFrame(tick);\n }\n };\n queueMicrotask(tick);\n }\n\n private setupOverflowObserver() {\n if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n this.resizeObserver?.disconnect();\n this.resizeObserver = new ResizeObserver(() => this.scheduleOverflowCheck());\n this.resizeObserver.observe(this.headerEl);\n }\n\n private scheduleOverflowCheck() {\n if (this.overflowCheckScheduled) return;\n this.overflowCheckScheduled = true;\n requestAnimationFrame(() => {\n this.overflowCheckScheduled = false;\n this.updateTabsCollapsed();\n this.updateTriggerLabelTruncation();\n });\n }\n\n private syncTriggerLabelObserver(disconnectOnly = false) {\n this.triggerLabelObserver?.disconnect();\n this.triggerLabelObserver = null;\n\n if (disconnectOnly || !this.tabsCollapsed || !this.triggerLabelTextEl) {\n return;\n }\n\n this.updateTriggerLabelTruncation();\n\n if (typeof ResizeObserver === 'undefined') return;\n\n this.triggerLabelObserver = new ResizeObserver(() => this.updateTriggerLabelTruncation());\n this.triggerLabelObserver.observe(this.triggerLabelTextEl);\n if (this.triggerEl) {\n this.triggerLabelObserver.observe(this.triggerEl);\n }\n }\n\n private updateTriggerLabelTruncation() {\n const el = this.triggerLabelTextEl;\n if (!el || !this.tabsCollapsed) {\n if (this.triggerLabelTruncated) {\n this.triggerLabelTruncated = false;\n }\n return;\n }\n\n const truncated = el.scrollWidth > el.clientWidth + 1;\n if (truncated !== this.triggerLabelTruncated) {\n this.triggerLabelTruncated = truncated;\n }\n }\n\n /** Width left for tabs after actions. */\n private getLeftZoneAvailableWidth(): number {\n if (!this.headerEl) return 0;\n\n const headerStyle = getComputedStyle(this.headerEl);\n const gap = parseFloat(headerStyle.columnGap || headerStyle.gap || '0') || 0;\n const actionsEl = this.headerEl.querySelector('.bar-nav__actions') as HTMLElement | null;\n const actionsWidth = actionsEl?.offsetWidth ?? 0;\n const horizontalPadding =\n (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n const spacing = this.tabsCollapsed\n ? parseFloat(\n getComputedStyle(this.headerEl).getPropertyValue('--dimension-space-100').trim(),\n ) || 8\n : actionsEl\n ? gap\n : 0;\n const available =\n this.headerEl.clientWidth - horizontalPadding - actionsWidth - spacing;\n\n return Math.max(0, available);\n }\n\n private getTabsIntrinsicWidth(): number {\n const tabList = getTabListFromTabGroup(this.probeTabGroupEl);\n return tabList?.scrollWidth ?? 0;\n }\n\n private scheduleIntrinsicWidthRetry() {\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n this.intrinsicWidthRetryCount++;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n }\n\n private updateTabsCollapsed() {\n if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n if (this.tabsCollapsed) {\n this.tabsCollapsed = false;\n this.menuOpen = false;\n }\n this.intrinsicWidthRetryCount = 0;\n return;\n }\n\n const intrinsicWidth = this.getTabsIntrinsicWidth();\n if (intrinsicWidth === 0) {\n this.scheduleIntrinsicWidthRetry();\n return;\n }\n this.intrinsicWidthRetryCount = 0;\n\n const shouldCollapse = tabsOverflowContainer(\n intrinsicWidth,\n this.getLeftZoneAvailableWidth(),\n this.tabsCollapsed,\n );\n\n if (shouldCollapse !== this.tabsCollapsed) {\n this.tabsCollapsed = shouldCollapse;\n if (!shouldCollapse) {\n this.menuOpen = false;\n }\n }\n }\n\n private syncMenuAnchor() {\n if (!this.menuEl || !this.triggerEl || !this.tabsCollapsed) return;\n this.menuEl.anchor = this.triggerEl;\n this.syncMenuSections();\n }\n\n private handleMenuSelect(e: Event) {\n const detail = (e as CustomEvent<MenuItemData>).detail;\n if (detail?.value !== undefined) {\n this.selectTab(String(detail.value));\n }\n this.menuOpen = false;\n }\n\n private handleMenuClose() {\n this.menuOpen = false;\n }\n\n private syncMenuSections() {\n if (!this.menuEl) return;\n this.menuEl.sections = tabsToMenuSections(this.resolvedTabs, this.effectiveValue);\n }\n\n private syncValueFromUrl() {\n if (!this.currentUrl || !this.basePath) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n const { value, hideTabs } = deriveBarNavValueFromUrl(\n this.currentUrl,\n this.basePath,\n this.resolvedTabs,\n );\n this.urlDerivedValue = value;\n this.hideTabsForDetailRoute = hideTabs;\n }\n\n private selectTab(id: string) {\n this.value = id;\n this.dsTabChange.emit(id);\n }\n\n /** Move focus to the selected tab in the visible tab group (after expand). */\n private focusVisibleSelectedTab() {\n const tab = queryWithinComponentHost(\n this.visibleTabGroupEl,\n `[data-tab-id=\"${this.effectiveValue}\"]`,\n );\n tab?.focus({ preventScroll: true });\n }\n\n private handleTabChange(e: Event) {\n this.selectTab((e as CustomEvent<string>).detail);\n }\n\n private handleActionChange(actionId: string, e: Event) {\n const selected = (e as CustomEvent<boolean>).detail;\n this.dsActionChange.emit({ id: actionId, selected });\n }\n\n private toggleTabMenu() {\n if (this.menuOpen) {\n this.menuOpen = false;\n return;\n }\n\n if (this.menuEl && this.triggerEl) {\n this.menuEl.anchor = this.triggerEl;\n this.menuEl.minWidth = `${this.triggerEl.offsetWidth}px`;\n this.syncMenuSections();\n }\n\n this.menuOpen = true;\n }\n\n private handleTriggerKeyDown(e: KeyboardEvent) {\n if (!this.tabsCollapsed) return;\n\n if (!this.menuOpen) {\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.toggleTabMenu();\n }\n return;\n }\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.menuOpen = false;\n this.triggerEl?.focus();\n }\n }\n\n render() {\n const hasTabs = this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n\n const bgToActionBg: Partial<Record<BarNavBackground, BarNavActionBackground>> = {};\n const actionBg: BarNavActionBackground | undefined = bgToActionBg[this.background];\n\n return (\n <Host>\n <header\n class={{\n 'bar-nav': true,\n [`bg-${this.background}`]: true,\n 'bar-nav--tabs-collapsed': hasTabs && this.tabsCollapsed,\n }}\n ref={el => {\n this.headerEl = el as HTMLElement;\n if (el && !this.resizeObserver) {\n this.setupOverflowObserver();\n }\n }}\n >\n {hasTabs && (\n <div class=\"bar-nav__tabs-probe\" aria-hidden=\"true\" inert>\n <ds-tab-group-nav\n ref={el => {\n this.probeTabGroupEl = el ?? null;\n if (el) {\n this.intrinsicWidthRetryCount = 0;\n this.scheduleOverflowCheck();\n }\n }}\n tabs={this.resolvedTabs}\n value={this.effectiveValue}\n />\n </div>\n )}\n\n {hasTabs && !this.tabsCollapsed && (\n <div class=\"bar-nav__left\">\n <ds-tab-group-nav\n class=\"bar-nav__tabs-visible\"\n ref={el => {\n this.visibleTabGroupEl = el ?? null;\n }}\n tabs={this.resolvedTabs}\n value={this.effectiveValue}\n onDsChange={(e: Event) => this.handleTabChange(e)}\n />\n </div>\n )}\n\n {!hasTabs && this.heading && (\n <span class=\"bar-nav__heading text-body-medium-emphasis\">{this.heading}</span>\n )}\n\n {hasTabs && this.tabsCollapsed && (\n <button\n type=\"button\"\n class={{\n 'bar-nav__tab-trigger': true,\n 'bar-nav__tab-trigger--open': this.menuOpen,\n }}\n ref={el => {\n this.triggerEl = el as HTMLButtonElement;\n }}\n aria-haspopup=\"menu\"\n aria-expanded={this.menuOpen}\n aria-label={`${this.activeTabLabel} tabs`}\n onClick={() => this.toggleTabMenu()}\n onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n >\n <span\n class={{\n 'bar-nav__tab-trigger-label': true,\n 'bar-nav__tab-trigger-label--dot': this.activeTabHasDot,\n 'bar-nav__tab-trigger-label--truncated': this.triggerLabelTruncated,\n }}\n >\n <span\n class={{\n 'bar-nav__tab-trigger-label-text': true,\n 'bar-nav__tab-trigger-label-text--truncated': this.triggerLabelTruncated,\n 'text-body-medium-emphasis': true,\n }}\n ref={el => {\n const next = el ?? null;\n if (next === this.triggerLabelTextEl) return;\n this.triggerLabelTextEl = next;\n if (this.tabsCollapsed) {\n this.syncTriggerLabelObserver();\n }\n }}\n >\n {this.activeTabLabel}\n </span>\n {this.activeTabHasDot && (\n <ds-badge\n class=\"bar-nav__tab-trigger-dot\"\n variant=\"dot\"\n background=\"var(--_dot-ring)\"\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n <ds-icon\n name=\"ChevronDown\"\n size=\"md\"\n color=\"inherit\"\n class=\"bar-nav__tab-trigger-chevron\"\n />\n </button>\n )}\n\n {hasTabs && this.tabsCollapsed && this.resolvedActions.length > 0 && (\n <div class=\"bar-nav__between\" aria-hidden=\"true\" />\n )}\n\n {this.resolvedActions.length > 0 && (\n <div class=\"bar-nav__actions\">\n {this.resolvedActions.map(action => (\n <ds-bar-nav-action\n key={action.id}\n icon={action.icon}\n selected={action.selected ?? false}\n dot={action.dot ?? false}\n inactive={action.inactive}\n aria-label={action.ariaLabel ?? action.id}\n background={actionBg}\n onDsChange={(e: Event) => this.handleActionChange(action.id, e)}\n />\n ))}\n </div>\n )}\n\n </header>\n\n {hasTabs && this.tabsCollapsed && (\n <ds-menu\n ref={el => {\n this.menuEl = (el as HTMLDsMenuElement) ?? null;\n }}\n open={this.menuOpen}\n sections={tabsToMenuSections(this.resolvedTabs, this.effectiveValue)}\n side=\"bottom\"\n align=\"start\"\n onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n onDsClose={() => this.handleMenuClose()}\n />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"qSAYgBA,EACdC,EACAC,EACAC,GAEA,IAAKF,IAASC,EAAU,CACtB,MAAO,CAAEE,MAAO,GAAIC,SAAU,M,CAGhC,GAAIJ,IAASC,IAAaD,EAAKK,WAAW,GAAGJ,MAAc,CACzD,MAAO,CAAEE,MAAO,GAAIC,SAAU,M,CAGhC,MAAME,EAAYN,EAAKO,MAAMN,EAASO,QACtC,MAAMC,EAAMH,EAAUD,WAAW,KAAOC,EAAUC,MAAM,GAAGG,MAAM,KAAK,GAAK,GAC3E,MAAMC,EAAiBC,EAAkBV,GAEzC,IAAKO,EAAK,CACR,MAAO,CAAEN,MAAOQ,EAAe,IAAIE,IAAM,GAAIT,SAAU,M,CAGzD,MAAMU,EAAMH,EAAeI,MAAKC,GAAKA,EAAEH,KAAOJ,IAC9C,GAAIK,EAAK,CACP,MAAO,CAAEX,MAAOW,EAAID,GAAIT,SAAU,M,CAGpC,MAAO,CAAED,MAAO,GAAIC,SAAU,KAChC,CAGM,SAAUa,EACdC,EACAhB,EACAiB,EACAC,EACAC,EACAC,GAEA,MAAMC,EAAeJ,EACjBK,EAAmBL,EAAU,IAC5BjB,GAAQ,GACb,MAAMuB,EAAkBH,EACpBE,EAAmBF,EAAa,IAC/BD,GAAW,GAEhB,OACGH,EAAaV,SAAW,GAAKe,EAAaf,OAAS,GACnDY,EAAgBZ,SAAW,GAAKiB,EAAgBjB,OAAS,CAE9D,CAGM,SAAUgB,EAAsBrB,EAAiCuB,GACrE,GAAIC,MAAMC,QAAQzB,GAAQ,OAAOA,EACjC,UAAWA,IAAU,UAAYA,IAAU,GAAI,CAC7C,IACE,MAAM0B,EAASC,KAAKC,MAAM5B,GAC1B,OAAOwB,MAAMC,QAAQC,GAAUA,EAASH,C,CACxC,MACA,OAAOA,C,EAGX,OAAOA,CACT,CClEM,SAAUM,EACdC,EACAC,GAEA,IAAKD,EAAM,OAAO,KAClB,MAAME,EAAOF,EAAKG,YAAcH,EAChC,OAAOE,EAAKE,cAAcH,EAC5B,CAEM,SAAUI,EACdC,GAEA,OAAOP,EAAyBO,EAAY,mBAC9C,CCbM,SAAUC,EAAmBtC,EAAiBuC,GAClD,MAAMC,EAA0B,GAChC,IAAIC,EAA8B,GAElC,IAAK,MAAMC,KAAQ1C,EAAM,CACvB,GAAI2C,EAAaD,GAAO,CACtB,GAAID,EAAMnC,OAAS,EAAG,CACpBkC,EAASI,KAAK,CAAEC,MAAOJ,IACvBA,EAAQ,E,CAEV,Q,CAGFA,EAAMG,KAAK,CACTE,MAAOJ,EAAKI,MACZ7C,MAAOyC,EAAK/B,GACZoC,WAAYL,EAAK/B,KAAO4B,EACxBS,WAAYN,EAAKO,U,CAIrB,GAAIR,EAAMnC,OAAS,EAAG,CACpBkC,EAASI,KAAK,CAAEC,MAAOJ,G,CAGzB,OAAOD,CACT,CAEM,SAAUU,EAAalD,EAAiBuC,GAC5C,MAAMY,EAAazC,EAAkBV,GACrC,OAAOmD,EAAWtC,MAAKD,GAAOA,EAAID,KAAO4B,KAAeY,EAAW,EACrE,CAEM,SAAUC,EAAkBpD,EAAiBuC,GACjD,OAAOW,EAAalD,EAAMuC,IAAaO,OAAS,MAClD,CAGM,SAAUO,EACdC,EACAC,EACAC,EACAC,EAAa,GAEb,MAAMC,EAAOJ,EAAqBC,EAClC,GAAIC,EAAW,CACb,OAAOE,GAAQD,C,CAEjB,OAAOC,EAAOD,CAChB,CC1DA,MAAME,EAAY,IAAM,goK,MCoDXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,gIAUUC,KAAAjE,KAAoB,GAGMiE,KAAAhD,SAAmB,GAG5BgD,KAAAhE,MAAgB,GAMjCgE,KAAA9C,QAA8B,GAGD8C,KAAA7C,YAAsB,GASnD6C,KAAAC,WAA+B,YAG/BD,KAAAlE,SAAmB,GAGnBkE,KAAAE,WAAqB,GAQZF,KAAAjD,aAA4B,GAC5BiD,KAAA/C,gBAAsC,GACtC+C,KAAAG,gBAA0B,GAC1BH,KAAAI,uBAAyB,MACzBJ,KAAAK,cAAgB,MAChBL,KAAAM,SAAW,MAEXN,KAAAO,mBAAqB,MACrBP,KAAAQ,sBAAwB,MAKjCR,KAAAS,SAA+B,KAC/BT,KAAAU,UAAsC,KACtCV,KAAAW,mBAAyC,KACzCX,KAAAY,qBAA8C,KAC9CZ,KAAAa,OAAmC,KACnCb,KAAAc,kBAA0C,KAC1Cd,KAAAe,gBAAwC,KACxCf,KAAAgB,eAAwC,KACxChB,KAAAiB,uBAAyB,MACzBjB,KAAAkB,yBAA2B,CA6epC,CA3eC,kBAAYC,GACV,GAAInB,KAAKE,YAAcF,KAAKlE,SAAU,CACpC,OAAOkE,KAAKG,e,CAEd,OAAOH,KAAKhE,K,CAGd,kBAAYoF,GACV,OAAOjC,EAAkBa,KAAKjD,aAAciD,KAAKmB,e,CAGnD,mBAAYE,GACV,QAASpC,EAAae,KAAKjD,aAAciD,KAAKmB,iBAAiBG,G,CAOjE,aAAAC,GACEvB,KAAKjD,aAAeiD,KAAKhD,SACrBK,EAAmB2C,KAAKhD,SAAU,IACjCgD,KAAKjE,MAAQ,GAClBiE,KAAK/C,gBAAkB+C,KAAK7C,YACxBE,EAAmB2C,KAAK7C,YAAa,IACpC6C,KAAK9C,SAAW,GACrB8C,KAAKwB,mBACLxB,KAAKkB,yBAA2B,EAChClB,KAAKyB,uB,CAKP,WAAAC,GACE1B,KAAKwB,mBACLxB,KAAKyB,uB,CAKP,iBAAAE,GACE3B,KAAK4B,mBACL5B,KAAKyB,uB,CAIP,gBAAAI,CAAiBC,GACf,GAAI9B,KAAKa,OAAQ,CACfb,KAAKa,OAAOiB,KAAOA,C,EAKvB,qBAAAC,CAAsBxC,EAAoByC,GACxC,IAAKzC,EAAW,CACdS,KAAKM,SAAW,MAChBN,KAAKa,OAAS,KACdb,KAAKQ,sBAAwB,MAC7BR,KAAKiC,0B,CAEPjC,KAAKyB,wBACL,GAAIlC,EAAW,CACb2C,uBAAsB,KACpBlC,KAAKyB,wBACLzB,KAAKiC,0BAA0B,G,CAGnC,GAAI1C,GAAayC,IAAkBG,WAAaH,IAAkBzC,EAAW,OAC7E2C,uBAAsB,IAAMlC,KAAKyB,0BACjCW,gBAAe,IAAMpC,KAAKqC,2B,CAG5B,iBAAAC,GACEtC,KAAKuB,e,CAGP,gBAAAgB,GACEvC,KAAKwC,wBACLxC,KAAKyC,+BACLzC,KAAK0C,wBACL1C,KAAKyB,uB,CAGP,kBAAAkB,GACE3C,KAAKyB,wBACLzB,KAAK4C,iBACL,GAAI5C,KAAKK,cAAe,CACtBL,KAAK6C,8B,EAIT,oBAAAC,GACE9C,KAAKgB,gBAAgB+B,aACrB/C,KAAKgB,eAAiB,KACtBhB,KAAKiC,yBAAyB,K,CAIxB,qBAAAO,GACN,GACE1F,EACEkD,KAAKjD,aACLiD,KAAKjE,KACLiE,KAAKhD,SACLgD,KAAK/C,gBACL+C,KAAK9C,QACL8C,KAAK7C,aAEP,CACA6C,KAAKuB,e,MACA,GAAIvB,KAAKE,YAAcF,KAAKlE,SAAU,CAC3CkE,KAAKwB,kB,EAKD,4BAAAiB,GACN,IAAIO,EAAYrD,EAAOsD,sBACvB,MAAMC,EAAO,KACXlD,KAAKwC,wBACL,KAAMQ,EAAY,EAAG,CACnBd,sBAAsBgB,E,GAG1Bd,eAAec,E,CAGT,qBAAAR,GACN,UAAWS,iBAAmB,cAAgBnD,KAAKS,SAAU,OAC7DT,KAAKgB,gBAAgB+B,aACrB/C,KAAKgB,eAAiB,IAAImC,gBAAe,IAAMnD,KAAKyB,0BACpDzB,KAAKgB,eAAeoC,QAAQpD,KAAKS,S,CAG3B,qBAAAgB,GACN,GAAIzB,KAAKiB,uBAAwB,OACjCjB,KAAKiB,uBAAyB,KAC9BiB,uBAAsB,KACpBlC,KAAKiB,uBAAyB,MAC9BjB,KAAKqD,sBACLrD,KAAK6C,8BAA8B,G,CAI/B,wBAAAZ,CAAyBqB,EAAiB,OAChDtD,KAAKY,sBAAsBmC,aAC3B/C,KAAKY,qBAAuB,KAE5B,GAAI0C,IAAmBtD,KAAKK,gBAAkBL,KAAKW,mBAAoB,CACrE,M,CAGFX,KAAK6C,+BAEL,UAAWM,iBAAmB,YAAa,OAE3CnD,KAAKY,qBAAuB,IAAIuC,gBAAe,IAAMnD,KAAK6C,iCAC1D7C,KAAKY,qBAAqBwC,QAAQpD,KAAKW,oBACvC,GAAIX,KAAKU,UAAW,CAClBV,KAAKY,qBAAqBwC,QAAQpD,KAAKU,U,EAInC,4BAAAmC,GACN,MAAMU,EAAKvD,KAAKW,mBAChB,IAAK4C,IAAOvD,KAAKK,cAAe,CAC9B,GAAIL,KAAKQ,sBAAuB,CAC9BR,KAAKQ,sBAAwB,K,CAE/B,M,CAGF,MAAMgD,EAAYD,EAAGE,YAAcF,EAAGG,YAAc,EACpD,GAAIF,IAAcxD,KAAKQ,sBAAuB,CAC5CR,KAAKQ,sBAAwBgD,C,EAKzB,yBAAAG,GACN,IAAK3D,KAAKS,SAAU,OAAO,EAE3B,MAAMmD,EAAcC,iBAAiB7D,KAAKS,UAC1C,MAAMqD,EAAMC,WAAWH,EAAYI,WAAaJ,EAAYE,KAAO,MAAQ,EAC3E,MAAMG,EAAYjE,KAAKS,SAASvC,cAAc,qBAC9C,MAAMgG,EAAeD,GAAWE,aAAe,EAC/C,MAAMC,GACHL,WAAWH,EAAYS,cAAgB,IAAMN,WAAWH,EAAYU,eAAiB,GACxF,MAAMC,EAAUvE,KAAKK,cACjB0D,WACEF,iBAAiB7D,KAAKS,UAAU+D,iBAAiB,yBAAyBC,SACvE,EACLR,EACEH,EACA,EACN,MAAMY,EACJ1E,KAAKS,SAASiD,YAAcU,EAAoBF,EAAeK,EAEjE,OAAOI,KAAKC,IAAI,EAAGF,E,CAGb,qBAAAG,GACN,MAAMC,EAAU3G,EAAuB6B,KAAKe,iBAC5C,OAAO+D,GAASrB,aAAe,C,CAGzB,2BAAAsB,GACN,GAAI/E,KAAKkB,0BAA4BvB,EAAOqF,0BAA2B,OACvEhF,KAAKkB,2BACLgB,uBAAsB,IAAMlC,KAAKyB,yB,CAG3B,mBAAA4B,GACN,IAAKrD,KAAKS,UAAYT,KAAKjD,aAAaV,SAAW,GAAK2D,KAAKI,uBAAwB,CACnF,GAAIJ,KAAKK,cAAe,CACtBL,KAAKK,cAAgB,MACrBL,KAAKM,SAAW,K,CAElBN,KAAKkB,yBAA2B,EAChC,M,CAGF,MAAM+D,EAAiBjF,KAAK6E,wBAC5B,GAAII,IAAmB,EAAG,CACxBjF,KAAK+E,8BACL,M,CAEF/E,KAAKkB,yBAA2B,EAEhC,MAAMgE,EAAiB9F,EACrB6F,EACAjF,KAAK2D,4BACL3D,KAAKK,eAGP,GAAI6E,IAAmBlF,KAAKK,cAAe,CACzCL,KAAKK,cAAgB6E,EACrB,IAAKA,EAAgB,CACnBlF,KAAKM,SAAW,K,GAKd,cAAAsC,GACN,IAAK5C,KAAKa,SAAWb,KAAKU,YAAcV,KAAKK,cAAe,OAC5DL,KAAKa,OAAOsE,OAASnF,KAAKU,UAC1BV,KAAK4B,kB,CAGC,gBAAAwD,CAAiBC,GACvB,MAAMC,EAAUD,EAAgCC,OAChD,GAAIA,GAAQtJ,QAAUmG,UAAW,CAC/BnC,KAAKuF,UAAUC,OAAOF,EAAOtJ,O,CAE/BgE,KAAKM,SAAW,K,CAGV,eAAAmF,GACNzF,KAAKM,SAAW,K,CAGV,gBAAAsB,GACN,IAAK5B,KAAKa,OAAQ,OAClBb,KAAKa,OAAOtC,SAAWF,EAAmB2B,KAAKjD,aAAciD,KAAKmB,e,CAG5D,gBAAAK,GACN,IAAKxB,KAAKE,aAAeF,KAAKlE,SAAU,CACtCkE,KAAKG,gBAAkB,GACvBH,KAAKI,uBAAyB,MAC9B,M,CAGF,MAAMpE,MAAEA,EAAKC,SAAEA,GAAaL,EAC1BoE,KAAKE,WACLF,KAAKlE,SACLkE,KAAKjD,cAEPiD,KAAKG,gBAAkBnE,EACvBgE,KAAKI,uBAAyBnE,C,CAGxB,SAAAsJ,CAAU7I,GAChBsD,KAAKhE,MAAQU,EACbsD,KAAK0F,YAAYC,KAAKjJ,E,CAIhB,uBAAA2F,GACN,MAAM1F,EAAMkB,EACVmC,KAAKc,kBACL,iBAAiBd,KAAKmB,oBAExBxE,GAAKiJ,MAAM,CAAEC,cAAe,M,CAGtB,eAAAC,CAAgBT,GACtBrF,KAAKuF,UAAWF,EAA0BC,O,CAGpC,kBAAAS,CAAmBC,EAAkBX,GAC3C,MAAMY,EAAYZ,EAA2BC,OAC7CtF,KAAKkG,eAAeP,KAAK,CAAEjJ,GAAIsJ,EAAUC,Y,CAGnC,aAAAE,GACN,GAAInG,KAAKM,SAAU,CACjBN,KAAKM,SAAW,MAChB,M,CAGF,GAAIN,KAAKa,QAAUb,KAAKU,UAAW,CACjCV,KAAKa,OAAOsE,OAASnF,KAAKU,UAC1BV,KAAKa,OAAOuF,SAAW,GAAGpG,KAAKU,UAAUyD,gBACzCnE,KAAK4B,kB,CAGP5B,KAAKM,SAAW,I,CAGV,oBAAA+F,CAAqBhB,GAC3B,IAAKrF,KAAKK,cAAe,OAEzB,IAAKL,KAAKM,SAAU,CAClB,GAAI+E,EAAEiB,MAAQ,aAAejB,EAAEiB,MAAQ,WAAajB,EAAEiB,MAAQ,SAAWjB,EAAEiB,MAAQ,IAAK,CACtFjB,EAAEkB,iBACFvG,KAAKmG,e,CAEP,M,CAGF,GAAId,EAAEiB,MAAQ,SAAU,CACtBjB,EAAEkB,iBACFvG,KAAKM,SAAW,MAChBN,KAAKU,WAAWkF,O,EAIpB,MAAAY,GACE,MAAMC,EAAUzG,KAAKjD,aAAaV,OAAS,IAAM2D,KAAKI,uBAEtD,MAAMsG,EAA0E,GAChF,MAAMC,EAA+CD,EAAa1G,KAAKC,YAEvE,OACE2G,EAACC,EAAI,CAAAP,IAAA,4CACHM,EAAA,UAAAN,IAAA,2CACEQ,MAAO,CACL,UAAW,KACX,CAAC,MAAM9G,KAAKC,cAAe,KAC3B,0BAA2BwG,GAAWzG,KAAKK,eAE7C0G,IAAKxD,IACHvD,KAAKS,SAAW8C,EAChB,GAAIA,IAAOvD,KAAKgB,eAAgB,CAC9BhB,KAAK0C,uB,IAIN+D,GACCG,EAAA,OAAAN,IAAA,2CAAKQ,MAAM,sBAAqB,cAAa,OAAOE,MAAK,MACvDJ,EAAA,oBAAAN,IAAA,2CACES,IAAKxD,IACHvD,KAAKe,gBAAkBwC,GAAM,KAC7B,GAAIA,EAAI,CACNvD,KAAKkB,yBAA2B,EAChClB,KAAKyB,uB,GAGT1F,KAAMiE,KAAKjD,aACXf,MAAOgE,KAAKmB,kBAKjBsF,IAAYzG,KAAKK,eAChBuG,EAAA,OAAAN,IAAA,2CAAKQ,MAAM,iBACTF,EAAA,oBAAAN,IAAA,2CACEQ,MAAM,wBACNC,IAAKxD,IACHvD,KAAKc,kBAAoByC,GAAM,IAAI,EAErCxH,KAAMiE,KAAKjD,aACXf,MAAOgE,KAAKmB,eACZ8F,WAAa5B,GAAarF,KAAK8F,gBAAgBT,OAKnDoB,GAAWzG,KAAKkH,SAChBN,EAAA,QAAAN,IAAA,2CAAMQ,MAAM,8CAA8C9G,KAAKkH,SAGhET,GAAWzG,KAAKK,eACfuG,EAAA,UAAAN,IAAA,2CACEa,KAAK,SACLL,MAAO,CACL,uBAAwB,KACxB,6BAA8B9G,KAAKM,UAErCyG,IAAKxD,IACHvD,KAAKU,UAAY6C,CAAuB,EACzC,gBACa,OAAM,gBACLvD,KAAKM,SAAQ,aAChB,GAAGN,KAAKoB,sBACpBgG,QAAS,IAAMpH,KAAKmG,gBACpBkB,UAAYhC,GAAqBrF,KAAKqG,qBAAqBhB,IAE3DuB,EAAA,QAAAN,IAAA,2CACEQ,MAAO,CACL,6BAA8B,KAC9B,kCAAmC9G,KAAKqB,gBACxC,wCAAyCrB,KAAKQ,wBAGhDoG,EAAA,QAAAN,IAAA,2CACEQ,MAAO,CACL,kCAAmC,KACnC,6CAA8C9G,KAAKQ,sBACnD,4BAA6B,MAE/BuG,IAAKxD,IACH,MAAM+D,EAAO/D,GAAM,KACnB,GAAI+D,IAAStH,KAAKW,mBAAoB,OACtCX,KAAKW,mBAAqB2G,EAC1B,GAAItH,KAAKK,cAAe,CACtBL,KAAKiC,0B,IAIRjC,KAAKoB,gBAEPpB,KAAKqB,iBACJuF,EAAA,YAAAN,IAAA,2CACEQ,MAAM,2BACNS,QAAQ,MACRtH,WAAW,mBACXpB,MAAM,GAAE,cACI,UAIlB+H,EAAA,WAAAN,IAAA,2CACEkB,KAAK,cACLC,KAAK,KACLC,MAAM,UACNZ,MAAM,kCAKXL,GAAWzG,KAAKK,eAAiBL,KAAK/C,gBAAgBZ,OAAS,GAC9DuK,EAAA,OAAAN,IAAA,2CAAKQ,MAAM,mBAAkB,cAAa,SAG7C9G,KAAK/C,gBAAgBZ,OAAS,GAC7BuK,EAAA,OAAAN,IAAA,2CAAKQ,MAAM,oBACR9G,KAAK/C,gBAAgB0K,KAAIC,GACxBhB,EAAA,qBACEN,IAAKsB,EAAOlL,GACZmL,KAAMD,EAAOC,KACb5B,SAAU2B,EAAO3B,UAAY,MAC7B3E,IAAKsG,EAAOtG,KAAO,MACnBwG,SAAUF,EAAOE,SAAQ,aACbF,EAAOG,WAAaH,EAAOlL,GACvCuD,WAAY0G,EACZM,WAAa5B,GAAarF,KAAK+F,mBAAmB6B,EAAOlL,GAAI2I,SAQtEoB,GAAWzG,KAAKK,eACfuG,EAAA,WAAAN,IAAA,2CACES,IAAKxD,IACHvD,KAAKa,OAAU0C,GAA4B,IAAI,EAEjDzB,KAAM9B,KAAKM,SACX/B,SAAUF,EAAmB2B,KAAKjD,aAAciD,KAAKmB,gBACrD6G,KAAK,SACLC,MAAM,QACNC,WAAa7C,GAAarF,KAAKoF,iBAAiBC,GAChD8C,UAAW,IAAMnI,KAAKyF,oB,4iCAnfR9F,EAAAsD,sBAAwB,EACxBtD,EAAAqF,0BAA4B,E","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["deriveBarNavValueFromUrl","path","basePath","tabs","value","hideTabs","startsWith","remainder","slice","length","seg","split","selectableTabs","getSelectableTabs","id","tab","find","t","shouldResyncBarNavProps","resolvedTabs","tabsJson","resolvedActions","actions","actionsJson","tabsIncoming","parseJsonArrayProp","actionsIncoming","fallback","Array","isArray","parsed","JSON","parse","queryWithinComponentHost","host","selector","root","shadowRoot","querySelector","getTabListFromTabGroup","tabGroupEl","tabsToMenuSections","selectedId","sections","batch","item","isTabDivider","push","items","label","isSelected","isInactive","disabled","getActiveTab","selectable","getActiveTabLabel","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","currentUrl","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","tabLayoutCommitted","triggerLabelTruncated","headerEl","triggerEl","triggerLabelTextEl","triggerLabelObserver","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","overflowCheckScheduled","intrinsicWidthRetryCount","effectiveValue","activeTabLabel","activeTabHasDot","dot","onPropsChange","syncValueFromUrl","scheduleOverflowCheck","onUrlChange","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","syncTriggerLabelObserver","requestAnimationFrame","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","componentDidRender","syncMenuAnchor","updateTriggerLabelTruncation","disconnectedCallback","disconnect","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","updateTabsCollapsed","disconnectOnly","el","truncated","scrollWidth","clientWidth","getLeftZoneAvailableWidth","headerStyle","getComputedStyle","gap","parseFloat","columnGap","actionsEl","actionsWidth","offsetWidth","horizontalPadding","paddingLeft","paddingRight","spacing","getPropertyValue","trim","available","Math","max","getTabsIntrinsicWidth","tabList","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","intrinsicWidth","shouldCollapse","anchor","handleMenuSelect","e","detail","selectTab","String","handleMenuClose","dsTabChange","emit","focus","preventScroll","handleTabChange","handleActionChange","actionId","selected","dsActionChange","toggleTabMenu","minWidth","handleTriggerKeyDown","key","preventDefault","tabSurface","render","hasTabs","h","Host","class","style","viewTransitionName","SHELL_BAR_NAV_VT_NAME","ref","inert","background","onDsChange","heading","type","onClick","onKeyDown","next","variant","name","size","color","map","action","icon","inactive","ariaLabel","side","align","onDsSelect","onDsClose"],"sources":["src/wc/components/BarNav/bar-nav-utils.ts","src/wc/components/BarNav/bar-nav-dom-utils.ts","src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["import { getSelectableTabs } from '../TabGroup/tab-item-utils';\nimport type { BarNavActionItem, BarNavTab } from './bar-nav-types';\n\nexport interface BarNavUrlState {\n /** Tab id derived from the URL, or empty when none applies. */\n value: string;\n /** When true, tabs should be hidden (e.g. non-tab child routes like detail pages). */\n hideTabs: boolean;\n}\n\n/** Derive BarNav tab selection from `currentUrl` relative to `basePath`.\n * Mirrors motive-webapp-lab `resolveBarNavState` tab-selection semantics. */\nexport function deriveBarNavValueFromUrl(\n path: string,\n basePath: string,\n tabs: BarNavTab[],\n): BarNavUrlState {\n if (!path || !basePath) {\n return { value: '', hideTabs: false };\n }\n\n if (path !== basePath && !path.startsWith(`${basePath}/`)) {\n return { value: '', hideTabs: false };\n }\n\n const remainder = path.slice(basePath.length);\n const seg = remainder.startsWith('/') ? remainder.slice(1).split('/')[0] : '';\n const selectableTabs = getSelectableTabs(tabs);\n\n if (!seg) {\n return { value: selectableTabs[0]?.id ?? '', hideTabs: false };\n }\n\n const tab = selectableTabs.find(t => t.id === seg);\n if (tab) {\n return { value: tab.id, hideTabs: false };\n }\n\n return { value: '', hideTabs: true };\n}\n\n/** True when host array/json props have data but resolved internal state is still empty. */\nexport function shouldResyncBarNavProps(\n resolvedTabs: BarNavTab[],\n tabs: BarNavTab[],\n tabsJson: string,\n resolvedActions: BarNavActionItem[],\n actions: BarNavActionItem[],\n actionsJson: string,\n): boolean {\n const tabsIncoming = tabsJson\n ? parseJsonArrayProp(tabsJson, [])\n : (tabs ?? []);\n const actionsIncoming = actionsJson\n ? parseJsonArrayProp(actionsJson, [])\n : (actions ?? []);\n\n return (\n (resolvedTabs.length === 0 && tabsIncoming.length > 0) ||\n (resolvedActions.length === 0 && actionsIncoming.length > 0)\n );\n}\n\n/** Parse tabs/actions from either a JSON attribute string or a JS property array. */\nexport function parseJsonArrayProp<T>(value: string | T[] | undefined, fallback: T[]): T[] {\n if (Array.isArray(value)) return value;\n if (typeof value === 'string' && value !== '') {\n try {\n const parsed = JSON.parse(value);\n return Array.isArray(parsed) ? parsed : fallback;\n } catch {\n return fallback;\n }\n }\n return fallback;\n}\n","export type QueryableHost = {\n shadowRoot?: ShadowRoot | null;\n querySelector: (selectors: string) => Element | null;\n};\n\n/**\n * Query within a Stencil custom-element host (light DOM today, shadow DOM–safe).\n * Use for child nodes owned by ds-tab-group and similar components.\n */\nexport function queryWithinComponentHost(\n host: QueryableHost | null | undefined,\n selector: string,\n): HTMLElement | null {\n if (!host) return null;\n const root = host.shadowRoot ?? host;\n return root.querySelector(selector) as HTMLElement | null;\n}\n\nexport function getTabListFromTabGroup(\n tabGroupEl: QueryableHost | null | undefined,\n): HTMLElement | null {\n return queryWithinComponentHost(tabGroupEl, '[role=\"tablist\"]');\n}\n","import type { MenuSection } from '../Menu/Menu';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n const sections: MenuSection[] = [];\n let batch: MenuSection['items'] = [];\n\n for (const item of tabs) {\n if (isTabDivider(item)) {\n if (batch.length > 0) {\n sections.push({ items: batch });\n batch = [];\n }\n continue;\n }\n\n batch.push({\n label: item.label,\n value: item.id,\n isSelected: item.id === selectedId,\n isInactive: item.disabled,\n });\n }\n\n if (batch.length > 0) {\n sections.push({ items: batch });\n }\n\n return sections;\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n const selectable = getSelectableTabs(tabs);\n return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n tabListScrollWidth: number,\n containerClientWidth: number,\n collapsed: boolean,\n hysteresis = 2,\n): boolean {\n const diff = tabListScrollWidth - containerClientWidth;\n if (collapsed) {\n return diff > -hysteresis;\n }\n return diff > hysteresis;\n}\n",":host {\n display: block;\n}\n\n.bar-nav {\n display: flex;\n align-items: center;\n position: relative;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n gap: var(--dimension-space-100);\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n background-color: var(--_bar-nav-bg);\n color: var(--_bar-nav-fg-primary);\n transition:\n background-color var(--effect-motion-short-3),\n border-color var(--effect-motion-short-3),\n color var(--effect-motion-short-3);\n}\n\n/* Default chrome — matches standard app surfaces (former secondary bar) */\n.bar-nav--default {\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Navigation chrome — sync with ds-panel-nav navigation style */\n.bar-nav--navigation {\n --_bar-nav-bg: var(--color-navigation-background);\n --_bar-nav-border: var(--color-navigation-border-tertiary);\n --_bar-nav-fg-primary: var(--color-navigation-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-navigation-foreground-secondary);\n --_bar-nav-hover: var(--color-navigation-interaction-hover);\n --_bar-nav-pressed: var(--color-navigation-interaction-pressed);\n --_bar-nav-focus: var(--color-navigation-interaction-focus);\n --_bar-nav-dot: var(--color-navigation-foreground-brand);\n}\n\n/* Collapsed — explicit spacer keeps the 8px minimum while the trigger can shrink. */\n.bar-nav--tabs-collapsed {\n display: flex;\n gap: 0;\n align-items: center;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger {\n flex: 0 1 auto;\n min-width: 0;\n max-width: 100%;\n width: auto;\n overflow: hidden;\n}\n\n.bar-nav__between {\n flex: 1 1 0%;\n min-width: var(--dimension-space-100);\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger-label {\n flex: 1 1 0%;\n min-width: 0;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger-label-text {\n display: block;\n flex: 1 1 0%;\n min-width: 0;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__actions {\n flex: 0 0 auto;\n margin-left: 0;\n}\n\n/* Expanded tabs — consume space between start and actions */\n.bar-nav__left {\n position: relative;\n flex: 1 1 0%;\n min-width: 0;\n width: 0;\n display: flex;\n align-items: center;\n}\n\n.bar-nav__left ds-tab-group-nav {\n flex: 1;\n min-width: 0;\n}\n\n/* Unconstrained width so intrinsic tab row width is measurable while collapsed */\n.bar-nav__tabs-probe {\n position: absolute;\n left: 0;\n top: 0;\n visibility: hidden;\n pointer-events: none;\n overflow: visible;\n width: max-content;\n max-width: none;\n z-index: -1;\n}\n\n.bar-nav__tabs-probe ds-tab-group-nav {\n width: max-content;\n}\n\n.bar-nav__tabs-visible {\n width: 100%;\n min-width: 0;\n}\n\n/* In-flow placeholder while measuring overflow — avoids layout jump; hidden from view/accessibility. */\n.bar-nav__tabs-pending {\n flex: 1;\n min-width: 0;\n height: var(--dimension-size-400);\n visibility: hidden;\n pointer-events: none;\n}\n\n/* Collapsed tab trigger — mirrors TabGroup .tab (+ chevron when collapsed) */\n.bar-nav__tab-trigger {\n all: unset;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n gap: var(--dimension-space-050);\n flex: 0 1 auto;\n min-width: 0;\n width: max-content;\n max-width: 100%;\n padding: var(--dimension-space-075);\n background-color: transparent;\n border-radius: var(--dimension-radius-025);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n color: var(--_bar-nav-fg-primary);\n position: relative;\n transition: color var(--effect-motion-short-2);\n height: var(--dimension-size-400);\n --_hover-bg: var(--_bar-nav-hover);\n --_pressed-bg: var(--_bar-nav-pressed);\n --_dot: var(--_bar-nav-dot);\n --_dot-ring: var(--_bar-nav-bg);\n}\n\n.bar-nav__tab-trigger::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025);\n background: transparent;\n pointer-events: none;\n transition: none;\n z-index: 2;\n}\n\n.bar-nav__tab-trigger:hover::after {\n background: var(--_hover-bg);\n transition: none;\n}\n\n.bar-nav__tab-trigger:active::after {\n background: var(--_pressed-bg);\n transition: none;\n}\n\n.bar-nav__tab-trigger:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--_bar-nav-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n.bar-nav__tab-trigger--open::after {\n background: var(--_hover-bg);\n}\n\n.bar-nav__tab-trigger-label {\n position: relative;\n display: inline-flex;\n align-items: center;\n flex: 0 1 auto;\n min-width: 0;\n max-width: 100%;\n padding: 0 var(--dimension-space-025);\n overflow: hidden;\n --_fade-right: var(--dimension-space-025);\n z-index: 1;\n}\n\n.bar-nav__tab-trigger-label--truncated::after {\n content: '';\n position: absolute;\n top: 0;\n right: var(--_fade-right);\n bottom: 0;\n width: var(--dimension-size-400);\n background: linear-gradient(to right, transparent, var(--_bar-nav-bg));\n pointer-events: none;\n z-index: 1;\n}\n\n.bar-nav__tab-trigger-label-text {\n display: inline-block;\n max-width: 100%;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n vertical-align: bottom;\n}\n\n.bar-nav__tab-trigger-label-text--truncated {\n -webkit-mask-image: linear-gradient(\n to right,\n #000 0,\n #000 calc(100% - var(--dimension-size-400)),\n transparent 100%\n );\n mask-image: linear-gradient(\n to right,\n #000 0,\n #000 calc(100% - var(--dimension-size-400)),\n transparent 100%\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.bar-nav__tab-trigger-label--dot {\n padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n --_fade-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n.bar-nav__tab-trigger-dot {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n z-index: 1;\n}\n\n.bar-nav__tab-trigger-chevron {\n position: relative;\n flex-shrink: 0;\n z-index: 1;\n}\n\n/* Fallback heading when no tabs — matches a single (selected) tab so the area\n name shares the tab label's type token, color, height and horizontal inset.\n Inset = tab button padding (space-075, 6px) + label inset (space-025, 2px). */\n.bar-nav__heading {\n display: inline-flex;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n color: var(--_bar-nav-fg-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Right zone — pinned to the end; header gap is the min space from tabs/trigger */\n.bar-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n flex: 0 0 auto;\n margin-left: auto;\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n Watch,\n State,\n h,\n Host,\n} from '@stencil/core';\nimport type { MenuItemData } from '../Menu/Menu';\nimport type { BarNavActionBackground } from '../BarNavAction/BarNavAction';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport { SHELL_BAR_NAV_VT_NAME } from '../../nav/shell-view-transition';\nimport type { BarNavActionItem, BarNavTab } from './bar-nav-types';\nimport {\n deriveBarNavValueFromUrl,\n parseJsonArrayProp,\n shouldResyncBarNavProps,\n} from './bar-nav-utils';\nimport {\n getTabListFromTabGroup,\n queryWithinComponentHost,\n type QueryableHost,\n} from './bar-nav-dom-utils';\nimport {\n getActiveTab,\n getActiveTabLabel,\n tabsOverflowContainer,\n tabsToMenuSections,\n} from './bar-nav-tabs-menu-utils';\n\n@Component({\n tag: 'ds-bar-nav',\n styleUrl: 'BarNav.css',\n scoped: true,\n})\nexport class BarNav {\n /**\n * Tab items for the left section.\n * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n */\n @Prop() tabs: BarNavTab[] = [];\n\n /** JSON fallback for `tabs` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n\n /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Action items rendered in the right section.\n * Set via JS property: `el.actions = [...]`. Replace the array reference to update.\n */\n @Prop() actions: BarNavActionItem[] = [];\n\n /** JSON fallback for `actions` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'actions-json' }) actionsJson: string = '';\n\n /**\n * Fallback heading shown when no tabs are provided.\n * When tabs are present the heading is hidden.\n */\n @Prop() heading: string | undefined;\n\n /** Chrome style: `navigation` = navigation tokens, `default` = app tokens.\n * Property: `navStyle`. HTML attribute: `nav-style`. */\n @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'default';\n\n /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n @Prop() basePath: string = '';\n\n /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n @Prop() currentUrl: string = '';\n\n /** Emitted when the active tab changes. Detail = tab id. */\n @Event() dsTabChange!: EventEmitter<string>;\n\n /** Emitted when an action button is toggled. Detail = { id, selected }. */\n @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;\n\n @State() private resolvedTabs: BarNavTab[] = [];\n @State() private resolvedActions: BarNavActionItem[] = [];\n @State() private urlDerivedValue: string = '';\n @State() private hideTabsForDetailRoute = false;\n @State() private tabsCollapsed = false;\n @State() private menuOpen = false;\n /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n @State() private tabLayoutCommitted = false;\n @State() private triggerLabelTruncated = false;\n\n private static readonly HOST_PROP_SYNC_BUDGET = 8;\n private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n\n private headerEl: HTMLElement | null = null;\n private triggerEl: HTMLButtonElement | null = null;\n private triggerLabelTextEl: HTMLElement | null = null;\n private triggerLabelObserver: ResizeObserver | null = null;\n private menuEl: HTMLDsMenuElement | null = null;\n private visibleTabGroupEl: QueryableHost | null = null;\n private probeTabGroupEl: QueryableHost | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private overflowCheckScheduled = false;\n private intrinsicWidthRetryCount = 0;\n\n private get effectiveValue(): string {\n if (this.currentUrl && this.basePath) {\n return this.urlDerivedValue;\n }\n return this.value;\n }\n\n private get activeTabLabel(): string {\n return getActiveTabLabel(this.resolvedTabs, this.effectiveValue);\n }\n\n private get activeTabHasDot(): boolean {\n return !!getActiveTab(this.resolvedTabs, this.effectiveValue)?.dot;\n }\n\n @Watch('tabs')\n @Watch('tabsJson')\n @Watch('actions')\n @Watch('actionsJson')\n onPropsChange() {\n this.resolvedTabs = this.tabsJson\n ? parseJsonArrayProp(this.tabsJson, [])\n : (this.tabs ?? []);\n this.resolvedActions = this.actionsJson\n ? parseJsonArrayProp(this.actionsJson, [])\n : (this.actions ?? []);\n this.syncValueFromUrl();\n this.intrinsicWidthRetryCount = 0;\n this.scheduleOverflowCheck();\n }\n\n @Watch('currentUrl')\n @Watch('basePath')\n onUrlChange() {\n this.syncValueFromUrl();\n this.scheduleOverflowCheck();\n }\n\n @Watch('value')\n @Watch('urlDerivedValue')\n onSelectionChange() {\n this.syncMenuSections();\n this.scheduleOverflowCheck();\n }\n\n @Watch('menuOpen')\n onMenuOpenChange(open: boolean) {\n if (this.menuEl) {\n this.menuEl.open = open;\n }\n }\n\n @Watch('tabsCollapsed')\n onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n if (!collapsed) {\n this.menuOpen = false;\n this.menuEl = null;\n this.triggerLabelTruncated = false;\n this.syncTriggerLabelObserver();\n }\n this.scheduleOverflowCheck();\n if (collapsed) {\n requestAnimationFrame(() => {\n this.scheduleOverflowCheck();\n this.syncTriggerLabelObserver();\n });\n }\n if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n queueMicrotask(() => this.focusVisibleSelectedTab());\n }\n\n componentWillLoad() {\n this.onPropsChange();\n }\n\n componentDidLoad() {\n this.syncHostPropsIfNeeded();\n this.scheduleDeferredHostPropSync();\n this.setupOverflowObserver();\n this.scheduleOverflowCheck();\n }\n\n componentDidRender() {\n this.scheduleOverflowCheck();\n this.syncMenuAnchor();\n if (this.tabsCollapsed) {\n this.updateTriggerLabelTruncation();\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.syncTriggerLabelObserver(true);\n }\n\n /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n private syncHostPropsIfNeeded() {\n if (\n shouldResyncBarNavProps(\n this.resolvedTabs,\n this.tabs,\n this.tabsJson,\n this.resolvedActions,\n this.actions,\n this.actionsJson,\n )\n ) {\n this.onPropsChange();\n } else if (this.currentUrl && this.basePath) {\n this.syncValueFromUrl();\n }\n }\n\n /** Poll across animation frames — host props may land without triggering @Watch. */\n private scheduleDeferredHostPropSync() {\n let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n const tick = () => {\n this.syncHostPropsIfNeeded();\n if (--remaining > 0) {\n requestAnimationFrame(tick);\n }\n };\n queueMicrotask(tick);\n }\n\n private setupOverflowObserver() {\n if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n this.resizeObserver?.disconnect();\n this.resizeObserver = new ResizeObserver(() => this.scheduleOverflowCheck());\n this.resizeObserver.observe(this.headerEl);\n }\n\n private scheduleOverflowCheck() {\n if (this.overflowCheckScheduled) return;\n this.overflowCheckScheduled = true;\n requestAnimationFrame(() => {\n this.overflowCheckScheduled = false;\n this.updateTabsCollapsed();\n this.updateTriggerLabelTruncation();\n });\n }\n\n private syncTriggerLabelObserver(disconnectOnly = false) {\n this.triggerLabelObserver?.disconnect();\n this.triggerLabelObserver = null;\n\n if (disconnectOnly || !this.tabsCollapsed || !this.triggerLabelTextEl) {\n return;\n }\n\n this.updateTriggerLabelTruncation();\n\n if (typeof ResizeObserver === 'undefined') return;\n\n this.triggerLabelObserver = new ResizeObserver(() => this.updateTriggerLabelTruncation());\n this.triggerLabelObserver.observe(this.triggerLabelTextEl);\n if (this.triggerEl) {\n this.triggerLabelObserver.observe(this.triggerEl);\n }\n }\n\n private updateTriggerLabelTruncation() {\n const el = this.triggerLabelTextEl;\n if (!el || !this.tabsCollapsed) {\n if (this.triggerLabelTruncated) {\n this.triggerLabelTruncated = false;\n }\n return;\n }\n\n const truncated = el.scrollWidth > el.clientWidth + 1;\n if (truncated !== this.triggerLabelTruncated) {\n this.triggerLabelTruncated = truncated;\n }\n }\n\n /** Width left for tabs after actions. */\n private getLeftZoneAvailableWidth(): number {\n if (!this.headerEl) return 0;\n\n const headerStyle = getComputedStyle(this.headerEl);\n const gap = parseFloat(headerStyle.columnGap || headerStyle.gap || '0') || 0;\n const actionsEl = this.headerEl.querySelector('.bar-nav__actions') as HTMLElement | null;\n const actionsWidth = actionsEl?.offsetWidth ?? 0;\n const horizontalPadding =\n (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n const spacing = this.tabsCollapsed\n ? parseFloat(\n getComputedStyle(this.headerEl).getPropertyValue('--dimension-space-100').trim(),\n ) || 8\n : actionsEl\n ? gap\n : 0;\n const available =\n this.headerEl.clientWidth - horizontalPadding - actionsWidth - spacing;\n\n return Math.max(0, available);\n }\n\n private getTabsIntrinsicWidth(): number {\n const tabList = getTabListFromTabGroup(this.probeTabGroupEl);\n return tabList?.scrollWidth ?? 0;\n }\n\n private scheduleIntrinsicWidthRetry() {\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n this.intrinsicWidthRetryCount++;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n }\n\n private updateTabsCollapsed() {\n if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n if (this.tabsCollapsed) {\n this.tabsCollapsed = false;\n this.menuOpen = false;\n }\n this.intrinsicWidthRetryCount = 0;\n return;\n }\n\n const intrinsicWidth = this.getTabsIntrinsicWidth();\n if (intrinsicWidth === 0) {\n this.scheduleIntrinsicWidthRetry();\n return;\n }\n this.intrinsicWidthRetryCount = 0;\n\n const shouldCollapse = tabsOverflowContainer(\n intrinsicWidth,\n this.getLeftZoneAvailableWidth(),\n this.tabsCollapsed,\n );\n\n if (shouldCollapse !== this.tabsCollapsed) {\n this.tabsCollapsed = shouldCollapse;\n if (!shouldCollapse) {\n this.menuOpen = false;\n }\n }\n }\n\n private syncMenuAnchor() {\n if (!this.menuEl || !this.triggerEl || !this.tabsCollapsed) return;\n this.menuEl.anchor = this.triggerEl;\n this.syncMenuSections();\n }\n\n private handleMenuSelect(e: Event) {\n const detail = (e as CustomEvent<MenuItemData>).detail;\n if (detail?.value !== undefined) {\n this.selectTab(String(detail.value));\n }\n this.menuOpen = false;\n }\n\n private handleMenuClose() {\n this.menuOpen = false;\n }\n\n private syncMenuSections() {\n if (!this.menuEl) return;\n this.menuEl.sections = tabsToMenuSections(this.resolvedTabs, this.effectiveValue);\n }\n\n private syncValueFromUrl() {\n if (!this.currentUrl || !this.basePath) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n const { value, hideTabs } = deriveBarNavValueFromUrl(\n this.currentUrl,\n this.basePath,\n this.resolvedTabs,\n );\n this.urlDerivedValue = value;\n this.hideTabsForDetailRoute = hideTabs;\n }\n\n private selectTab(id: string) {\n this.value = id;\n this.dsTabChange.emit(id);\n }\n\n /** Move focus to the selected tab in the visible tab group (after expand). */\n private focusVisibleSelectedTab() {\n const tab = queryWithinComponentHost(\n this.visibleTabGroupEl,\n `[data-tab-id=\"${this.effectiveValue}\"]`,\n );\n tab?.focus({ preventScroll: true });\n }\n\n private handleTabChange(e: Event) {\n this.selectTab((e as CustomEvent<string>).detail);\n }\n\n private handleActionChange(actionId: string, e: Event) {\n const selected = (e as CustomEvent<boolean>).detail;\n this.dsActionChange.emit({ id: actionId, selected });\n }\n\n private toggleTabMenu() {\n if (this.menuOpen) {\n this.menuOpen = false;\n return;\n }\n\n if (this.menuEl && this.triggerEl) {\n this.menuEl.anchor = this.triggerEl;\n this.menuEl.minWidth = `${this.triggerEl.offsetWidth}px`;\n this.syncMenuSections();\n }\n\n this.menuOpen = true;\n }\n\n private handleTriggerKeyDown(e: KeyboardEvent) {\n if (!this.tabsCollapsed) return;\n\n if (!this.menuOpen) {\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.toggleTabMenu();\n }\n return;\n }\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.menuOpen = false;\n this.triggerEl?.focus();\n }\n }\n\n private get tabSurface(): BarNavActionBackground | undefined {\n return this.navStyle === 'navigation' ? 'navigation' : undefined;\n }\n\n render() {\n const hasTabs = this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n const tabSurface = this.tabSurface;\n\n return (\n <Host>\n <header\n class={{\n 'bar-nav': true,\n 'bar-nav--navigation': this.navStyle === 'navigation',\n 'bar-nav--default': this.navStyle === 'default',\n 'bar-nav--tabs-collapsed': hasTabs && this.tabsCollapsed,\n }}\n style={{ viewTransitionName: SHELL_BAR_NAV_VT_NAME }}\n ref={el => {\n this.headerEl = el as HTMLElement;\n if (el && !this.resizeObserver) {\n this.setupOverflowObserver();\n }\n }}\n >\n {hasTabs && (\n <div class=\"bar-nav__tabs-probe\" aria-hidden=\"true\" inert>\n <ds-tab-group-nav\n ref={el => {\n this.probeTabGroupEl = el ?? null;\n if (el) {\n this.intrinsicWidthRetryCount = 0;\n this.scheduleOverflowCheck();\n }\n }}\n tabs={this.resolvedTabs}\n value={this.effectiveValue}\n background={tabSurface}\n />\n </div>\n )}\n\n {hasTabs && !this.tabsCollapsed && (\n <div class=\"bar-nav__left\">\n <ds-tab-group-nav\n class=\"bar-nav__tabs-visible\"\n ref={el => {\n this.visibleTabGroupEl = el ?? null;\n }}\n tabs={this.resolvedTabs}\n value={this.effectiveValue}\n background={tabSurface}\n onDsChange={(e: Event) => this.handleTabChange(e)}\n />\n </div>\n )}\n\n {!hasTabs && this.heading && (\n <span class=\"bar-nav__heading text-body-medium-emphasis\">{this.heading}</span>\n )}\n\n {hasTabs && this.tabsCollapsed && (\n <button\n type=\"button\"\n class={{\n 'bar-nav__tab-trigger': true,\n 'bar-nav__tab-trigger--open': this.menuOpen,\n }}\n ref={el => {\n this.triggerEl = el as HTMLButtonElement;\n }}\n aria-haspopup=\"menu\"\n aria-expanded={this.menuOpen}\n aria-label={`${this.activeTabLabel} tabs`}\n onClick={() => this.toggleTabMenu()}\n onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n >\n <span\n class={{\n 'bar-nav__tab-trigger-label': true,\n 'bar-nav__tab-trigger-label--dot': this.activeTabHasDot,\n 'bar-nav__tab-trigger-label--truncated': this.triggerLabelTruncated,\n }}\n >\n <span\n class={{\n 'bar-nav__tab-trigger-label-text': true,\n 'bar-nav__tab-trigger-label-text--truncated': this.triggerLabelTruncated,\n 'text-body-medium-emphasis': true,\n }}\n ref={el => {\n const next = el ?? null;\n if (next === this.triggerLabelTextEl) return;\n this.triggerLabelTextEl = next;\n if (this.tabsCollapsed) {\n this.syncTriggerLabelObserver();\n }\n }}\n >\n {this.activeTabLabel}\n </span>\n {this.activeTabHasDot && (\n <ds-badge\n class=\"bar-nav__tab-trigger-dot\"\n variant=\"dot\"\n background=\"var(--_bar-nav-bg)\"\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n <ds-icon\n name=\"ChevronDown\"\n size=\"md\"\n color=\"inherit\"\n class=\"bar-nav__tab-trigger-chevron\"\n />\n </button>\n )}\n\n {hasTabs && this.tabsCollapsed && this.resolvedActions.length > 0 && (\n <div class=\"bar-nav__between\" aria-hidden=\"true\" />\n )}\n\n {this.resolvedActions.length > 0 && (\n <div class=\"bar-nav__actions\">\n {this.resolvedActions.map(action => (\n <ds-bar-nav-action\n key={action.id}\n icon={action.icon}\n selected={action.selected ?? false}\n dot={action.dot ?? false}\n inactive={action.inactive}\n aria-label={action.ariaLabel ?? action.id}\n background={tabSurface}\n onDsChange={(e: Event) => this.handleActionChange(action.id, e)}\n />\n ))}\n </div>\n )}\n\n </header>\n\n {hasTabs && this.tabsCollapsed && (\n <ds-menu\n ref={el => {\n this.menuEl = (el as HTMLDsMenuElement) ?? null;\n }}\n open={this.menuOpen}\n sections={tabsToMenuSections(this.resolvedTabs, this.effectiveValue)}\n side=\"bottom\"\n align=\"start\"\n onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n onDsClose={() => this.handleMenuClose()}\n />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as r,c as s,h as a,a as i,t as c}from"./index.js";const n=()=>`.breadcrumb.sc-ds-breadcrumb{display:flex;align-items:center}.list.sc-ds-breadcrumb{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:var(--dimension-space-050)}.item.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.item-inner.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.link.sc-ds-breadcrumb{color:var(--color-foreground-secondary);text-decoration:none;padding:var(--dimension-space-025) var(--dimension-space-050);border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.link.sc-ds-breadcrumb:hover{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.link.sc-ds-breadcrumb:active{background-color:var(--color-interaction-pressed)}.link.sc-ds-breadcrumb:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.separator.sc-ds-breadcrumb{color:var(--color-foreground-tertiary);-webkit-user-select:none;user-select:none}.current.sc-ds-breadcrumb{color:var(--color-foreground-primary);padding:var(--dimension-space-025) var(--dimension-space-050)}`;const o=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavigate=s(this,"dsNavigate");this.items=[];this.separator="/"}handleClick(e,r,s){if(!e.href){s.preventDefault()}this.dsNavigate.emit({item:e,index:r})}render(){return a(i,{key:"
|
|
1
|
+
import{p as e,H as r,c as s,h as a,a as i,t as c}from"./index.js";const n=()=>`.breadcrumb.sc-ds-breadcrumb{display:flex;align-items:center}.list.sc-ds-breadcrumb{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:var(--dimension-space-050)}.item.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.item-inner.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.link.sc-ds-breadcrumb{color:var(--color-foreground-secondary);text-decoration:none;padding:var(--dimension-space-025) var(--dimension-space-050);border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.link.sc-ds-breadcrumb:hover{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.link.sc-ds-breadcrumb:active{background-color:var(--color-interaction-pressed)}.link.sc-ds-breadcrumb:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.separator.sc-ds-breadcrumb{color:var(--color-foreground-tertiary);-webkit-user-select:none;user-select:none}.current.sc-ds-breadcrumb{color:var(--color-foreground-primary);padding:var(--dimension-space-025) var(--dimension-space-050)}`;const o=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavigate=s(this,"dsNavigate");this.items=[];this.separator="/"}handleClick(e,r,s){if(!e.href){s.preventDefault()}this.dsNavigate.emit({item:e,index:r})}render(){return a(i,{key:"c83edf092e37ca66378ed729d2ea5fba64b93816"},a("nav",{key:"d4c6663353db2fa3a2097365a6894bd0c79e8589","aria-label":"Breadcrumb",class:"breadcrumb"},a("ol",{key:"4a5c409f7e6446b6fe76954309848bc721ebab63",class:"list"},this.items.map(((e,r)=>{const s=r===this.items.length-1;return a("li",{class:"item",key:r},s?a("span",{class:"text-body-medium-emphasis current","aria-current":"page"},e.label):a("span",{class:"item-inner"},a("a",{href:e.href??"#",class:"link text-body-medium",onClick:s=>this.handleClick(e,r,s)},e.label),a("span",{class:"separator text-body-small","aria-hidden":"true"},this.separator)))})))))}static get style(){return n()}},[2,"ds-breadcrumb",{items:[16],separator:[1]}]);function t(){if(typeof customElements==="undefined"){return}const e=["ds-breadcrumb"];e.forEach((e=>{switch(e){case"ds-breadcrumb":if(!customElements.get(c(e))){customElements.define(c(e),o)}break}}))}t();const d=o;const l=t;export{d as DsBreadcrumb,l as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-breadcrumb.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as o,c as r,h as s,a as i,t as d}from"./index.js";import{d as e}from"./p
|
|
1
|
+
import{p as t,H as o,c as r,h as s,a as i,t as d}from"./index.js";import{d as e}from"./p--YDw8Q4o.js";import{d as n}from"./p-DqBCQRRd.js";import{d as a}from"./p-BcuUR5Ao.js";const u=()=>`.group.sc-ds-button-group{display:inline-flex;align-items:stretch;border-radius:var(--dimension-radius-050);position:relative}.group.sc-ds-button-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}.groupElevated.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-sm)}.groupElevated.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-sm)}.groupFlat.sc-ds-button-group::after{box-shadow:inset 0 0 0 1px var(--color-border-tertiary)}.groupFloating.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-floating)}.groupFloating.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-floating)}.groupRounded.sc-ds-button-group{border-radius:var(--dimension-radius-half)}.item.sc-ds-button-group{flex-shrink:0;box-shadow:none !important;border:none !important}.item.sc-ds-button-group:active{transform:none !important}.divider.sc-ds-button-group{width:1px;flex-shrink:0;background-color:var(--color-border-tertiary);position:relative;z-index:1;margin:0 -0.5px;pointer-events:none}.dividerGhost.sc-ds-button-group{height:20px;align-self:center}.dividerGhostXS.sc-ds-button-group{height:12px}.dividerGhostSM.sc-ds-button-group{height:16px}.dividerGhostLG.sc-ds-button-group{height:24px}.item.sc-ds-button-group:hover+.dividerGhost.sc-ds-button-group,.dividerGhost.sc-ds-button-group:has(+.item:hover){opacity:0}.group.sc-ds-button-group .itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.first.sc-ds-button-group{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.last.sc-ds-button-group{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.middle.sc-ds-button-group{border-radius:0 !important}.groupRounded.sc-ds-button-group .first.itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-half) !important;border-bottom-left-radius:var(--dimension-radius-half) !important}.groupRounded.sc-ds-button-group .last.itemShort.sc-ds-button-group::after{border-top-right-radius:var(--dimension-radius-half) !important;border-bottom-right-radius:var(--dimension-radius-half) !important}.roundedFirstMD.sc-ds-button-group{padding-right:var(--dimension-space-100) !important}.roundedLastMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important}.roundedMidMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important;padding-right:var(--dimension-space-100) !important}.roundedFirstSM.sc-ds-button-group{padding-right:var(--dimension-space-075) !important}.roundedLastSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important}.roundedMidSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important;padding-right:var(--dimension-space-075) !important}.roundedFirstLG.sc-ds-button-group{padding-right:var(--dimension-space-150) !important}.roundedLastLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important}.roundedMidLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important;padding-right:var(--dimension-space-150) !important}`;const p=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=r(this,"dsClick");this.items=[];this.elevation="flat";this.size="md";this.rounded=false}render(){const t=this.items;const o=t.length;const r=this.elevation;const d=r.charAt(0).toUpperCase()+r.slice(1);const e=r==="none";const n={group:true,[`group${d}`]:true,groupRounded:this.rounded};return s(i,{key:"a49a471ef45ebc7caf2883cffaaf7b0970b12906"},s("div",{key:"d98701ed3c7826adfe98057c2a2f00f02f9fc404",class:n,role:"group"},t.map(((t,i)=>{const d=i===0;const n=i===o-1;const a=!d&&!n;const u=t.variant??"secondary";const p=!!t.icon&&!t.label;const c=this.rounded&&!p&&this.size!=="xs";const g=this.size.toUpperCase();const m={item:true,first:d,last:n,middle:a,itemShort:e&&u==="secondary",[`roundedFirst${g}`]:!!(c&&d),[`roundedLast${g}`]:!!(c&&n),[`roundedMid${g}`]:!!(c&&a)};const b={divider:true,dividerGhost:e,dividerGhostXS:e&&this.size==="xs",dividerGhostSM:e&&this.size==="sm",dividerGhostLG:e&&this.size==="lg"};return[i>0&&s("div",{class:b,"aria-hidden":"true"}),s("ds-button",{class:m,variant:u,intent:t.intent??"none",elevation:r,size:this.size,label:t.label,rounded:this.rounded,inactive:t.inactive,href:t.href,onDsClick:()=>this.dsClick.emit(i)},t.icon&&s("ds-icon",{slot:"icon",name:t.icon}))]}))))}static get style(){return u()}},[2,"ds-button-group",{items:[16],elevation:[1],size:[1],rounded:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-button-group","ds-button","ds-icon","ds-loader"];t.forEach((t=>{switch(t){case"ds-button-group":if(!customElements.get(d(t))){customElements.define(d(t),p)}break;case"ds-button":if(!customElements.get(d(t))){e()}break;case"ds-icon":if(!customElements.get(d(t))){n()}break;case"ds-loader":if(!customElements.get(d(t))){a()}break}}))}c();const g=p;const m=c;export{g as DsButtonGroup,m as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-button-group.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as
|
|
1
|
+
import{B as o,d as s}from"./p--YDw8Q4o.js";const t=o;const p=s;export{t as DsButton,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-button.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as
|
|
1
|
+
import{p as e,H as a,h as d,a as s,t as r}from"./index.js";const o=()=>`.sc-ds-card-h{display:block;box-sizing:border-box;background-color:var(--color-background-primary);overflow:hidden}.elevation-flat.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-none)}.elevation-elevated.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-floating.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-floating)}.radius-sm.sc-ds-card-h{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-card-h{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-card-h{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-card-h{border-radius:var(--dimension-radius-175)}.sc-ds-card-s>[slot="header"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.body.sc-ds-card{padding:var(--dimension-space-200)}.sc-ds-card-s>[slot="footer"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary)}`;const i=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.elevation="elevated";this.radius="lg"}render(){return d(s,{key:"f92cb7076ca96f00ff110f3a460ac2ad81a813a0",class:{card:true,[`elevation-${this.elevation}`]:true,[`radius-${this.radius}`]:true}},d("slot",{key:"d505ecd16a3b0003f3fc42a2a2beab5dc39145ae",name:"header"}),d("div",{key:"5a9d354517dbe84e51723de9011f1198147611fc",class:"body"},d("slot",{key:"8d5b4ee052451e92ece5a2596b3ce6b93a19941d"})),d("slot",{key:"8f19fe7dbc8f1bab56e360e9d957e0faf966a0ce",name:"footer"}))}static get style(){return o()}},[262,"ds-card",{elevation:[1],radius:[1]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-card"];e.forEach((e=>{switch(e){case"ds-card":if(!customElements.get(r(e))){customElements.define(r(e),i)}break}}))}c();const t=i;const n=c;export{t as DsCard,n as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-card.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as
|
|
1
|
+
import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let n=0;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.labelId=`ds-checkbox-label-${++n}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return c(i,{key:"2fe9993383566619b0317d67dfe616143540195d",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"601103bbc7e7540b7f5d596c70f8df817ee1ec6c",class:{box:true,"box--marked":e}},e&&c("span",{key:"3c660f726dc2e2c40360fa4ec5f6660af0989ca5",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"4e093cd91726322d663cef3e61d097b97e325345",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),a)}break}}))}d();const h=a;const l=d;export{h as DsCheckbox,l as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-checkbox.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as o,H as t,c as r,h as a,a as n,t as e}from"./index.js";const i=()=>`.sc-ds-chip-h{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-050);box-sizing:border-box;color:var(--color-foreground-primary);position:relative;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.tag--size-md.sc-ds-chip-h{height:var(--dimension-size-400);padding:0 var(--dimension-space-075);gap:0}.tag--size-sm.sc-ds-chip-h{height:var(--dimension-size-300);padding:0 var(--dimension-space-050);gap:0}.tag--size-xs.sc-ds-chip-h{height:var(--dimension-size-200);padding:0 var(--dimension-space-025);gap:0}.tag--rounded.sc-ds-chip-h{border-radius:var(--dimension-radius-half)}.tag--on-medium.sc-ds-chip-h{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.tag--on-bold.sc-ds-chip-h{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed)}.tag--on-strong.sc-ds-chip-h{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed)}.tag--on-always-dark.sc-ds-chip-h{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed)}.tag--elevation-flat.sc-ds-chip-h{background-color:transparent !important;box-shadow:inset 0 0 0 var(--dimension-stroke-width-015) currentColor}.tag--elevation-elevated.sc-ds-chip-h{box-shadow:var(--effect-elevation-elevated-sm)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-positive)}.tag--intent-neutral.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-chip-h{cursor:pointer;user-select:none;outline:none}.tag--interactive.sc-ds-chip-h:hover{background-color:var(--_hover-bg)}.tag--interactive.sc-ds-chip-h:active{background-color:var(--_pressed-bg)}.tag--interactive.sc-ds-chip-h:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tag--pressed.sc-ds-chip-h{background-color:var(--color-background-faint-brand) !important;color:var(--color-foreground-bold-brand) !important}.tag__label.sc-ds-chip{line-height:0;padding:0 var(--dimension-space-025);white-space:nowrap;flex-shrink:0}.tag__icon-slot.sc-ds-chip{display:contents}.tag--removable.sc-ds-chip-h .tag__label.sc-ds-chip{padding-inline-end:0}.tag__remove.sc-ds-chip{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;border-radius:var(--dimension-radius-050)}.tag--size-md.tag--removable.sc-ds-chip-h .tag__remove.sc-ds-chip,.tag--size-sm.tag--removable.sc-ds-chip-h .tag__remove.sc-ds-chip{margin-inline-start:var(--dimension-space-050)}.tag--size-xs.tag--removable.sc-ds-chip-h .tag__remove.sc-ds-chip{margin-inline-start:var(--dimension-space-025)}.tag__remove.sc-ds-chip::before{content:'';position:absolute;inset:-2px;border-radius:var(--dimension-radius-025);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-chip:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-chip:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:-1px;border-radius:3px}.tag--size-xs.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:0;border-radius:var(--dimension-radius-050)}.tag--rounded.sc-ds-chip-h .tag__remove.sc-ds-chip,.tag--rounded.sc-ds-chip-h .tag__remove.sc-ds-chip::before{border-radius:var(--dimension-radius-half)}.tag__remove-x.sc-ds-chip{display:inline-flex;line-height:0;font-size:inherit}.tag--inactive.sc-ds-chip-h{opacity:0.5;pointer-events:none;cursor:not-allowed}`;const c={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const s={md:20,sm:16,xs:12};const d=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsRemove=r(this,"dsRemove");this.dsClick=r(this,"dsClick");this.dsPressedChange=r(this,"dsPressedChange");this.intent="neutral";this.contrast="faint";this.elevation="none";this.size="md";this.rounded=false;this.removable=false;this.inactive=false;this.pressed=false;this.handleClick=()=>{if(this.inactive)return;this.pressed=!this.pressed;this.dsPressedChange.emit(this.pressed);this.dsClick.emit()};this.handleKeyDown=o=>{if(this.inactive)return;if(o.key==="Enter"||o.key===" "){o.preventDefault();this.handleClick()}};this.handleRemove=o=>{o.stopPropagation();this.dsRemove.emit()}}render(){const o=this.size.toUpperCase();const t=c[this.size];const r=s[this.size];const e=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const i={tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--elevation-${this.elevation}`]:true,[`tag--size-${this.size}`]:true,"tag--rounded":this.rounded,"tag--rounded-no-icon-left":this.rounded,"tag--rounded-no-remove-right":this.rounded&&!this.removable,[`tag--icon-left-${o}`]:false,[`tag--icon-right-${o}`]:this.removable,"tag--removable":this.removable,"tag--interactive":true,"tag--inactive":this.inactive,"tag--pressed":this.pressed,"tag--on-medium":this.background==="medium","tag--on-bold":this.background==="bold","tag--on-strong":this.background==="strong","tag--on-always-dark":this.background==="always-dark"};return a(n,{key:"aaf8974cb708497a77a439bead6db62589a2766e",class:i,style:e,onClick:this.handleClick,onKeyDown:this.handleKeyDown,role:"button",tabIndex:this.inactive?-1:0,"aria-pressed":String(this.pressed),"aria-disabled":this.inactive||undefined},a("span",{key:"3136b1acb0db4056f0db3f5464957d39da7c8886",class:"tag__icon-slot",style:{fontSize:`${r}px`,lineHeight:"0"}},a("slot",{key:"e56dcbe1ce26ff6a837b412c1f58cf67506cb3f4",name:"icon"})),a("span",{key:"e685a9a0d71a47de352a139cb8f1eb07d1516b31",class:{tag__label:true,[t]:true}},this.label),this.removable&&a("button",{key:"aa92d7cae16566a35998a2af96e7e1e595abbedf",type:"button",class:"tag__remove",onClick:this.handleRemove,"aria-label":`Remove ${this.label}`,tabIndex:-1},a("slot",{key:"455f664ff64bc1effd56baba636487c1580be930",name:"remove-icon"},a("span",{key:"e68b6823714050a170f8a5332a1814b7e894a42a",class:"tag__remove-x",style:{fontSize:`${r}px`,lineHeight:"0"}},"✕"))))}static get style(){return i()}},[262,"ds-chip",{label:[1],intent:[1],contrast:[1],elevation:[1],size:[1],rounded:[4],removable:[4],maxWidth:[8,"max-width"],inactive:[4],background:[1],pressed:[1028]}]);function g(){if(typeof customElements==="undefined"){return}const o=["ds-chip"];o.forEach((o=>{switch(o){case"ds-chip":if(!customElements.get(e(o))){customElements.define(e(o),d)}break}}))}g();const l=d;const h=g;export{l as DsChip,h as defineCustomElement};
|
|
1
|
+
import{p as o,H as t,c as r,h as a,a as n,t as e}from"./index.js";const i=()=>`.sc-ds-chip-h{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-050);box-sizing:border-box;color:var(--color-foreground-primary);position:relative;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.tag--size-md.sc-ds-chip-h{height:var(--dimension-size-400);padding:0 var(--dimension-space-075);gap:0}.tag--size-sm.sc-ds-chip-h{height:var(--dimension-size-300);padding:0 var(--dimension-space-050);gap:0}.tag--size-xs.sc-ds-chip-h{height:var(--dimension-size-200);padding:0 var(--dimension-space-025);gap:0}.tag--rounded.sc-ds-chip-h{border-radius:var(--dimension-radius-half)}.tag--on-medium.sc-ds-chip-h{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.tag--on-bold.sc-ds-chip-h{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed)}.tag--on-strong.sc-ds-chip-h{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed)}.tag--on-always-dark.sc-ds-chip-h{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed)}.tag--elevation-flat.sc-ds-chip-h{background-color:transparent !important;box-shadow:inset 0 0 0 var(--dimension-stroke-width-015) currentColor}.tag--elevation-elevated.sc-ds-chip-h{box-shadow:var(--effect-elevation-elevated-sm)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-positive)}.tag--intent-neutral.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-chip-h{cursor:pointer;user-select:none;outline:none}.tag--interactive.sc-ds-chip-h:hover{background-color:var(--_hover-bg)}.tag--interactive.sc-ds-chip-h:active{background-color:var(--_pressed-bg)}.tag--interactive.sc-ds-chip-h:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tag--pressed.sc-ds-chip-h{background-color:var(--color-background-faint-brand) !important;color:var(--color-foreground-bold-brand) !important}.tag__label.sc-ds-chip{line-height:0;padding:0 var(--dimension-space-025);white-space:nowrap;flex-shrink:0}.tag__icon-slot.sc-ds-chip{display:contents}.tag--removable.sc-ds-chip-h .tag__label.sc-ds-chip{padding-inline-end:0}.tag__remove.sc-ds-chip{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;border-radius:var(--dimension-radius-050)}.tag--size-md.tag--removable.sc-ds-chip-h .tag__remove.sc-ds-chip,.tag--size-sm.tag--removable.sc-ds-chip-h .tag__remove.sc-ds-chip{margin-inline-start:var(--dimension-space-050)}.tag--size-xs.tag--removable.sc-ds-chip-h .tag__remove.sc-ds-chip{margin-inline-start:var(--dimension-space-025)}.tag__remove.sc-ds-chip::before{content:'';position:absolute;inset:-2px;border-radius:var(--dimension-radius-025);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-chip:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-chip:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:-1px;border-radius:3px}.tag--size-xs.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:0;border-radius:var(--dimension-radius-050)}.tag--rounded.sc-ds-chip-h .tag__remove.sc-ds-chip,.tag--rounded.sc-ds-chip-h .tag__remove.sc-ds-chip::before{border-radius:var(--dimension-radius-half)}.tag__remove-x.sc-ds-chip{display:inline-flex;line-height:0;font-size:inherit}.tag--inactive.sc-ds-chip-h{opacity:0.5;pointer-events:none;cursor:not-allowed}`;const c={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const s={md:20,sm:16,xs:12};const d=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsRemove=r(this,"dsRemove");this.dsClick=r(this,"dsClick");this.dsPressedChange=r(this,"dsPressedChange");this.intent="neutral";this.contrast="faint";this.elevation="none";this.size="md";this.rounded=false;this.removable=false;this.inactive=false;this.pressed=false;this.handleClick=()=>{if(this.inactive)return;this.pressed=!this.pressed;this.dsPressedChange.emit(this.pressed);this.dsClick.emit()};this.handleKeyDown=o=>{if(this.inactive)return;if(o.key==="Enter"||o.key===" "){o.preventDefault();this.handleClick()}};this.handleRemove=o=>{o.stopPropagation();this.dsRemove.emit()}}render(){const o=this.size.toUpperCase();const t=c[this.size];const r=s[this.size];const e=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const i={tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--elevation-${this.elevation}`]:true,[`tag--size-${this.size}`]:true,"tag--rounded":this.rounded,"tag--rounded-no-icon-left":this.rounded,"tag--rounded-no-remove-right":this.rounded&&!this.removable,[`tag--icon-left-${o}`]:false,[`tag--icon-right-${o}`]:this.removable,"tag--removable":this.removable,"tag--interactive":true,"tag--inactive":this.inactive,"tag--pressed":this.pressed,"tag--on-medium":this.background==="medium","tag--on-bold":this.background==="bold","tag--on-strong":this.background==="strong","tag--on-always-dark":this.background==="always-dark"};return a(n,{key:"f790b6e888a0e4b0ca91c04930fdf329cb8ac7e0",class:i,style:e,onClick:this.handleClick,onKeyDown:this.handleKeyDown,role:"button",tabIndex:this.inactive?-1:0,"aria-pressed":String(this.pressed),"aria-disabled":this.inactive||undefined},a("span",{key:"0a68da9713ff0c9205d21e91c184d1b6209d1e53",class:"tag__icon-slot",style:{fontSize:`${r}px`,lineHeight:"0"}},a("slot",{key:"0cdb3ff1100f65b196ca701d465842e3a69a5ffd",name:"icon"})),a("span",{key:"0803570b312ebda0796f6e2859c3d8bcb196aba3",class:{tag__label:true,[t]:true}},this.label),this.removable&&a("button",{key:"dde090d8dad8c0a4a9b92cf7e91baea90eafe212",type:"button",class:"tag__remove",onClick:this.handleRemove,"aria-label":`Remove ${this.label}`,tabIndex:-1},a("slot",{key:"cedcadb478376330f140b88f6a7b425a01d50438",name:"remove-icon"},a("span",{key:"eb0476b570bfbd5d0c6fb323682f3b3a45bb4362",class:"tag__remove-x",style:{fontSize:`${r}px`,lineHeight:"0"}},"✕"))))}static get style(){return i()}},[262,"ds-chip",{label:[1],intent:[1],contrast:[1],elevation:[1],size:[1],rounded:[4],removable:[4],maxWidth:[8,"max-width"],inactive:[4],background:[1],pressed:[1028]}]);function g(){if(typeof customElements==="undefined"){return}const o=["ds-chip"];o.forEach((o=>{switch(o){case"ds-chip":if(!customElements.get(e(o))){customElements.define(e(o),d)}break}}))}g();const l=d;const h=g;export{l as DsChip,h as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chip.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as i,H as e,h as d,a as r,t as s}from"./index.js";const a=()=>`.sc-ds-divider-h{--_divider-color:var(--color-divider-divider);--_divider-inset:0;--_divider-length:100%;display:block;flex-shrink:0;width:var(--_divider-length);height:var(--dimension-stroke-width-012);margin:0 var(--_divider-inset);border:none;background-color:var(--_divider-color)}.divider--vertical.sc-ds-divider-h{width:var(--dimension-stroke-width-012);height:var(--_divider-length);min-height:var(--dimension-stroke-width-012);margin:var(--_divider-inset) 0;align-self:stretch}.divider--vertical.divider--custom-length.sc-ds-divider-h{align-self:center}[surface='on-bold-background'].sc-ds-divider-h,.divider--surface-on-bold-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-bold-background)}[surface='on-strong-background'].sc-ds-divider-h,.divider--surface-on-strong-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-strong-background)}[surface='on-medium-background'].sc-ds-divider-h,.divider--surface-on-medium-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-medium-background)}[surface='on-translucent-background'].sc-ds-divider-h,.divider--surface-on-translucent-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-translucent-background)}[surface='navigation'].sc-ds-divider-h,.divider--surface-navigation.sc-ds-divider-h{--_divider-color:var(--color-navigation-divider)}[surface='media'].sc-ds-divider-h,.divider--surface-media.sc-ds-divider-h{--_divider-color:var(--color-media-divider)}[surface='always-dark'].sc-ds-divider-h,.divider--surface-always-dark.sc-ds-divider-h{--_divider-color:var(--color-always-dark-divider)}[surface='inverted'].sc-ds-divider-h,.divider--surface-inverted.sc-ds-divider-h{--_divider-color:var(--color-inverted-divider)}`;const n={none:"0","space-000":"var(--dimension-space-000)","space-012":"var(--dimension-space-012)","space-025":"var(--dimension-space-025)","space-050":"var(--dimension-space-050)","space-075":"var(--dimension-space-075)","space-100":"var(--dimension-space-100)","space-125":"var(--dimension-space-125)","space-150":"var(--dimension-space-150)","space-175":"var(--dimension-space-175)","space-200":"var(--dimension-space-200)","space-250":"var(--dimension-space-250)","space-300":"var(--dimension-space-300)","space-400":"var(--dimension-space-400)","space-600":"var(--dimension-space-600)","space-800":"var(--dimension-space-800)"};const c=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.orientation="horizontal";this.surface="default";this.inset="none";this.length="auto";this.semantic=false}resolveInset(){return Object.prototype.hasOwnProperty.call(n,this.inset)?n[this.inset]:this.inset}resolveLength(){return this.length==="auto"||this.length==="full"?"100%":this.length}render(){const i=this.orientation==="vertical";const e=this.length!=="auto"&&this.length!=="full";return d(r,{key:"
|
|
1
|
+
import{p as i,H as e,h as d,a as r,t as s}from"./index.js";const a=()=>`.sc-ds-divider-h{--_divider-color:var(--color-divider-divider);--_divider-inset:0;--_divider-length:100%;display:block;flex-shrink:0;width:var(--_divider-length);height:var(--dimension-stroke-width-012);margin:0 var(--_divider-inset);border:none;background-color:var(--_divider-color)}.divider--vertical.sc-ds-divider-h{width:var(--dimension-stroke-width-012);height:var(--_divider-length);min-height:var(--dimension-stroke-width-012);margin:var(--_divider-inset) 0;align-self:stretch}.divider--vertical.divider--custom-length.sc-ds-divider-h{align-self:center}[surface='on-bold-background'].sc-ds-divider-h,.divider--surface-on-bold-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-bold-background)}[surface='on-strong-background'].sc-ds-divider-h,.divider--surface-on-strong-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-strong-background)}[surface='on-medium-background'].sc-ds-divider-h,.divider--surface-on-medium-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-medium-background)}[surface='on-translucent-background'].sc-ds-divider-h,.divider--surface-on-translucent-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-translucent-background)}[surface='navigation'].sc-ds-divider-h,.divider--surface-navigation.sc-ds-divider-h{--_divider-color:var(--color-navigation-divider)}[surface='media'].sc-ds-divider-h,.divider--surface-media.sc-ds-divider-h{--_divider-color:var(--color-media-divider)}[surface='always-dark'].sc-ds-divider-h,.divider--surface-always-dark.sc-ds-divider-h{--_divider-color:var(--color-always-dark-divider)}[surface='inverted'].sc-ds-divider-h,.divider--surface-inverted.sc-ds-divider-h{--_divider-color:var(--color-inverted-divider)}`;const n={none:"0","space-000":"var(--dimension-space-000)","space-012":"var(--dimension-space-012)","space-025":"var(--dimension-space-025)","space-050":"var(--dimension-space-050)","space-075":"var(--dimension-space-075)","space-100":"var(--dimension-space-100)","space-125":"var(--dimension-space-125)","space-150":"var(--dimension-space-150)","space-175":"var(--dimension-space-175)","space-200":"var(--dimension-space-200)","space-250":"var(--dimension-space-250)","space-300":"var(--dimension-space-300)","space-400":"var(--dimension-space-400)","space-600":"var(--dimension-space-600)","space-800":"var(--dimension-space-800)"};const c=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.orientation="horizontal";this.surface="default";this.inset="none";this.length="auto";this.semantic=false}resolveInset(){return Object.prototype.hasOwnProperty.call(n,this.inset)?n[this.inset]:this.inset}resolveLength(){return this.length==="auto"||this.length==="full"?"100%":this.length}render(){const i=this.orientation==="vertical";const e=this.length!=="auto"&&this.length!=="full";return d(r,{key:"67d78e91871d35d2599b3cb77370446ae9e929f1",role:this.semantic?"separator":undefined,"aria-orientation":this.semantic?this.orientation:undefined,"aria-hidden":this.semantic?undefined:"true",class:{divider:true,"divider--vertical":i,"divider--custom-length":e,[`divider--surface-${this.surface}`]:true},style:{"--_divider-inset":this.resolveInset(),"--_divider-length":this.resolveLength()}})}static get style(){return a()}},[2,"ds-divider",{orientation:[1],surface:[1],inset:[1],length:[1],semantic:[4]}]);function o(){if(typeof customElements==="undefined"){return}const i=["ds-divider"];i.forEach((i=>{switch(i){case"ds-divider":if(!customElements.get(s(i))){customElements.define(s(i),c)}break}}))}o();const t=c;const v=o;export{t as DsDivider,v as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-divider.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,h as s,a as
|
|
1
|
+
import{p as t,H as e,h as s,a as c,t as n}from"./index.js";const o=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.empty-state.sc-ds-empty-state{display:flex;align-items:center;justify-content:center;height:100%;min-height:400px;width:100%}.empty-state.sc-ds-empty-state p.sc-ds-empty-state{margin:0}`;const a={"no-content":"No page contents to display.","no-results":"No results found.","no-results-filter":"No results found. Please update search criteria.","no-access":"You don't have access to this page."};const d=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.type="no-content"}render(){return s(c,{key:"f816c5ae1509e330f91f2f5d3e70b008d1243bdb"},s("div",{key:"206174ec0127619414c373e5197db87312c62212",class:"empty-state"},s("p",{key:"57d4cc0d22a2695d73ca809db206c861cf698de5",class:"text-body-medium",style:{color:"var(--color-foreground-secondary)"}},this.message||a[this.type])))}static get style(){return o()}},[2,"ds-empty-state",{type:[1],message:[1]}]);function i(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(n(t))){customElements.define(n(t),d)}break}}))}i();const r=d;const p=i;export{r as DsEmptyState,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-empty-state.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{F as s,d as o}from"./p-
|
|
1
|
+
import{F as s,d as o}from"./p-vW9EMP8s.js";const t=s;const p=o;export{t as DsFade,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-fade.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,h as d,a as l,t}from"./index.js";const c=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let i=0;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++i}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"
|
|
1
|
+
import{p as e,H as s,h as d,a as l,t}from"./index.js";const c=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let i=0;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++i}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"c09c4245b4c55dee46f2ce7fa7684e71748a55f1"},d("div",{key:"aba8706c496f107cb64bd1c22f812ca290d807b1",class:"field"},d("label",{key:"a50f2952d36ed02b909e0d9054dcd923927ca591",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"15a41141b29a35bc81e545e21e9383fe2cfe7781"})))}static get style(){return c()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),a)}break}}))}f();const n=a;const o=f;export{n as DsField,o as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-field.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as a,h as r,a as s,t}from"./index.js";const c=()=>`.sc-ds-header-h{display:flex;align-items:center;justify-content:space-between;height:var(--dimension-size-600, 48px);padding:0 var(--dimension-space-100);flex-shrink:0;gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);box-sizing:border-box}.bg-primary.sc-ds-header-h{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-header-h{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-header-h{background-color:transparent}.bg-translucent.sc-ds-header-h{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.left.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-100);flex-shrink:0;min-width:0}.title.sc-ds-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center.sc-ds-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);flex:1;min-width:0}.right.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const d=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.background="secondary"}render(){return r(s,{key:"
|
|
1
|
+
import{p as e,H as a,h as r,a as s,t}from"./index.js";const c=()=>`.sc-ds-header-h{display:flex;align-items:center;justify-content:space-between;height:var(--dimension-size-600, 48px);padding:0 var(--dimension-space-100);flex-shrink:0;gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);box-sizing:border-box}.bg-primary.sc-ds-header-h{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-header-h{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-header-h{background-color:transparent}.bg-translucent.sc-ds-header-h{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.left.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-100);flex-shrink:0;min-width:0}.title.sc-ds-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center.sc-ds-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);flex:1;min-width:0}.right.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const d=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.background="secondary"}render(){return r(s,{key:"f3da06e35b0cbf0589de928acbdf28c293b57839",class:{header:true,[`bg-${this.background}`]:true},role:"banner"},r("div",{key:"19f06fd4a44877f49e6632ff061560af4a279adb",class:"left"},r("slot",{key:"73fc7fa1ea0481756bb471d08c4f26525ab1f458",name:"left"}),this.heading&&r("span",{key:"501ccfeece679b1b57b1945f5c30ee62a79ca466",class:"title text-title-small"},this.heading)),r("div",{key:"77501b993ad38a007f6c102d62cb7072e1eead51",class:"center"},r("slot",{key:"2ff12a4ea88df78215d3eac2ba008ebdaf78626b",name:"center"})),r("div",{key:"3c558e67438a34d188abf426ad526779b8cacb72",class:"right"},r("slot",{key:"9fb22a436ef36098332d66dff55cd5b3221e9764",name:"right"})))}static get style(){return c()}},[262,"ds-header",{heading:[1],background:[1]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-header"];e.forEach((e=>{switch(e){case"ds-header":if(!customElements.get(t(e))){customElements.define(t(e),d)}break}}))}n();const i=d;const o=n;export{i as DsHeader,o as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-header.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{I as o,d as
|
|
1
|
+
import{I as o,d as s}from"./p-DqBCQRRd.js";const t=o;const p=s;export{t as DsIcon,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-icon.js.map
|