@ds-mo/ui 13.12.0 → 13.14.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/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +68 -16
- package/dist/angular/ds-button-filled.d.ts +1 -1
- package/dist/angular/ds-button-filled.js +3 -3
- package/dist/angular/ds-button-unfilled.d.ts +1 -1
- package/dist/angular/ds-button-unfilled.js +3 -3
- package/dist/angular/ds-table.d.ts +7 -1
- package/dist/angular/ds-table.js +10 -4
- package/dist/angular/ds-tag.d.ts +1 -1
- package/dist/angular/ds-tag.js +3 -3
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-source-list.js +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-avatar.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-chart.js +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-overview.js.map +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-legend.js.map +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-chip.js.map +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-item.js.map +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-input.js.map +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.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-sub-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js.map +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-radio.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-tools.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-toast.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/p-Azjx2SsL.js +2 -0
- package/dist/components/p-Azjx2SsL.js.map +1 -0
- package/dist/components/p-B1JB0Zn-.js +2 -0
- package/dist/components/{p-BYre-ZDg.js.map → p-B1JB0Zn-.js.map} +1 -1
- package/dist/components/p-B2t8alvH.js +2 -0
- package/dist/components/{p-DK4PGrHm.js.map → p-B2t8alvH.js.map} +1 -1
- package/dist/components/{p-DBchq8Zw.js → p-B6linhwY.js} +2 -2
- package/dist/components/p-B8HG9OFh.js +2 -0
- package/dist/components/p-B8HG9OFh.js.map +1 -0
- package/dist/components/{p-DcmqsAMP.js → p-BJVzrR_P.js} +2 -2
- package/dist/components/p-BL0JHLJp.js +2 -0
- package/dist/components/{p-BFXN4ioL.js.map → p-BL0JHLJp.js.map} +1 -1
- package/dist/components/p-BPS17WvI.js +2 -0
- package/dist/components/{p-x9jO4lZ7.js.map → p-BPS17WvI.js.map} +1 -1
- package/dist/components/{p-BX57q1Lo.js → p-BSdAFIcG.js} +2 -2
- package/dist/components/{p-DGkWMhHO.js → p-BULWzaBs.js} +2 -2
- package/dist/components/{p-B_eqa09C.js → p-C-aCs6ID.js} +2 -2
- package/dist/components/{p-BRajO-Za.js → p-C5ecLNZA.js} +2 -2
- package/dist/components/p-C8U5BsJf.js +2 -0
- package/dist/components/p-C8U5BsJf.js.map +1 -0
- package/dist/components/{p-DKftz0O8.js → p-COmqMfQo.js} +2 -2
- package/dist/components/{p-DxygUurH.js → p-CeyoHpPn.js} +2 -2
- package/dist/components/{p-CdFnvBem.js → p-CiUciD5Z.js} +2 -2
- package/dist/components/p-CuwopElg.js.map +1 -1
- package/dist/components/p-DAM4CDXT.js +2 -0
- package/dist/components/{p-BxJurXEn.js.map → p-DAM4CDXT.js.map} +1 -1
- package/dist/components/{p-DBJJiSP0.js → p-DMJEOAwP.js} +2 -2
- package/dist/components/p-DYAQVvOu.js +2 -0
- package/dist/components/{p-CIlO_j3q.js.map → p-DYAQVvOu.js.map} +1 -1
- package/dist/components/p-DyDkQ8H9.js +2 -0
- package/dist/components/p-DyDkQ8H9.js.map +1 -0
- package/dist/components/{p-DkhE3BsH.js → p-Dz3Ufmr4.js} +2 -2
- package/dist/components/p-cPh32CFB.js +2 -0
- package/dist/components/{p-Bj7KrXzw.js.map → p-cPh32CFB.js.map} +1 -1
- package/dist/components/{p-Doz2uwRv.js → p-fkQhr5s9.js} +2 -2
- package/dist/components/p-oOKTL-yx.js +2 -0
- package/dist/components/{p-C5gZHZHU.js.map → p-oOKTL-yx.js.map} +1 -1
- package/dist/docs/components.json +362 -10
- package/dist/lib/components/ButtonFilled/ButtonFilled.d.ts +6 -0
- package/dist/lib/utils/control-text.d.ts +2 -0
- package/dist/lib/utils/index.d.ts +1 -1
- package/dist/lib/utils/index.js.map +2 -2
- package/dist/mcp-data/registry/agent-activity.json +1 -1
- package/dist/mcp-data/registry/agent-response.json +1 -1
- package/dist/mcp-data/registry/agent-source-list.json +1 -1
- package/dist/mcp-data/registry/agent-tool-call.json +1 -1
- package/dist/mcp-data/registry/attachment-list.json +1 -1
- package/dist/mcp-data/registry/avatar.json +1 -1
- package/dist/mcp-data/registry/badge.json +1 -1
- package/dist/mcp-data/registry/banner.json +1 -1
- package/dist/mcp-data/registry/bar-nav.json +1 -1
- package/dist/mcp-data/registry/bar-title.json +1 -1
- package/dist/mcp-data/registry/bar-workflow.json +1 -1
- package/dist/mcp-data/registry/breadcrumb.json +1 -1
- package/dist/mcp-data/registry/button-filled.json +39 -2
- package/dist/mcp-data/registry/button-unfilled.json +45 -6
- package/dist/mcp-data/registry/card-chart.json +1 -1
- package/dist/mcp-data/registry/card-overview.json +1 -1
- package/dist/mcp-data/registry/card-setting.json +1 -1
- package/dist/mcp-data/registry/chart-legend.json +1 -1
- package/dist/mcp-data/registry/chart.json +1 -1
- package/dist/mcp-data/registry/checkbox.json +1 -1
- package/dist/mcp-data/registry/chip.json +1 -1
- package/dist/mcp-data/registry/code-block.json +1 -1
- package/dist/mcp-data/registry/conversation-list-item.json +1 -1
- package/dist/mcp-data/registry/conversation-list-section.json +1 -1
- package/dist/mcp-data/registry/conversation-list.json +1 -1
- package/dist/mcp-data/registry/divider.json +1 -1
- package/dist/mcp-data/registry/empty-state.json +1 -1
- package/dist/mcp-data/registry/field.json +1 -1
- package/dist/mcp-data/registry/icon.json +2 -2
- package/dist/mcp-data/registry/input.json +1 -1
- package/dist/mcp-data/registry/loader.json +1 -1
- package/dist/mcp-data/registry/markdown.json +1 -1
- package/dist/mcp-data/registry/menu.json +1 -1
- package/dist/mcp-data/registry/message-actions.json +1 -1
- package/dist/mcp-data/registry/message-bubble.json +1 -1
- package/dist/mcp-data/registry/message-composer.json +1 -1
- package/dist/mcp-data/registry/message-scroller.json +1 -1
- package/dist/mcp-data/registry/message.json +1 -1
- package/dist/mcp-data/registry/mobile-bar-nav.json +1 -1
- package/dist/mcp-data/registry/mobile-header.json +1 -1
- package/dist/mcp-data/registry/mobile-section-switcher.json +1 -1
- package/dist/mcp-data/registry/mobile-sheet-nav.json +1 -1
- package/dist/mcp-data/registry/modal.json +1 -1
- package/dist/mcp-data/registry/panel-nav.json +1 -1
- package/dist/mcp-data/registry/panel-sub-nav.json +1 -1
- package/dist/mcp-data/registry/panel-tool-header.json +1 -1
- package/dist/mcp-data/registry/panel-tool-search.json +1 -1
- package/dist/mcp-data/registry/panel-tools.json +1 -1
- package/dist/mcp-data/registry/radio.json +1 -1
- package/dist/mcp-data/registry/registry.json +68 -16
- package/dist/mcp-data/registry/scroll-overlay.json +1 -1
- package/dist/mcp-data/registry/select.json +1 -1
- package/dist/mcp-data/registry/shell-app.json +1 -1
- package/dist/mcp-data/registry/shell-page.json +1 -1
- package/dist/mcp-data/registry/shell-tools.json +1 -1
- package/dist/mcp-data/registry/skeleton.json +1 -1
- package/dist/mcp-data/registry/slider.json +1 -1
- package/dist/mcp-data/registry/swatch-picker.json +1 -1
- package/dist/mcp-data/registry/switch.json +1 -1
- package/dist/mcp-data/registry/tab-group.json +1 -1
- package/dist/mcp-data/registry/table.json +141 -21
- package/dist/mcp-data/registry/tag.json +23 -5
- package/dist/mcp-data/registry/text.json +1 -1
- package/dist/mcp-data/registry/toast.json +1 -1
- package/dist/mcp-data/registry/tooltip-chart.json +1 -1
- package/dist/mcp-data/registry/tooltip.json +1 -1
- package/dist/mcp-data/registry/typing-indicator.json +1 -1
- package/dist/react/ds-table.d.ts +3 -1
- package/dist/react/ds-table.js +3 -1
- package/dist/styles/table.css +491 -76
- package/dist/types/components/ButtonFilled/ButtonFilled.d.ts +6 -0
- package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +13 -1
- package/dist/types/components/Table/Table.d.ts +41 -22
- package/dist/types/components/Table/index.d.ts +1 -1
- package/dist/types/components/Table/table-cell-model.d.ts +44 -0
- package/dist/types/components/Table/table-layout-controller.d.ts +65 -0
- package/dist/types/components/Table/table-load-controller.d.ts +49 -0
- package/dist/types/components/Table/table-model.d.ts +25 -0
- package/dist/types/components/Table/table-render-model.d.ts +41 -0
- package/dist/types/components/Table/table-types.d.ts +34 -2
- package/dist/types/components/Tag/Tag.d.ts +3 -0
- package/dist/types/components.d.ts +108 -8
- package/dist/types/utils/control-text.d.ts +2 -0
- package/dist/types/utils/index.d.ts +1 -1
- package/package.json +3 -3
- package/dist/components/p-BFXN4ioL.js +0 -2
- package/dist/components/p-BYre-ZDg.js +0 -2
- package/dist/components/p-Bj7KrXzw.js +0 -2
- package/dist/components/p-BxJurXEn.js +0 -2
- package/dist/components/p-C5gZHZHU.js +0 -2
- package/dist/components/p-CFNG0K3m.js +0 -2
- package/dist/components/p-CFNG0K3m.js.map +0 -1
- package/dist/components/p-CIlO_j3q.js +0 -2
- package/dist/components/p-DAbaMtEX.js +0 -2
- package/dist/components/p-DAbaMtEX.js.map +0 -1
- package/dist/components/p-DK4PGrHm.js +0 -2
- package/dist/components/p-DumWT7NN.js +0 -2
- package/dist/components/p-DumWT7NN.js.map +0 -1
- package/dist/components/p-c1pY-Mqq.js +0 -2
- package/dist/components/p-c1pY-Mqq.js.map +0 -1
- package/dist/components/p-x9jO4lZ7.js +0 -2
- /package/dist/components/{p-DBchq8Zw.js.map → p-B6linhwY.js.map} +0 -0
- /package/dist/components/{p-DcmqsAMP.js.map → p-BJVzrR_P.js.map} +0 -0
- /package/dist/components/{p-BX57q1Lo.js.map → p-BSdAFIcG.js.map} +0 -0
- /package/dist/components/{p-DGkWMhHO.js.map → p-BULWzaBs.js.map} +0 -0
- /package/dist/components/{p-B_eqa09C.js.map → p-C-aCs6ID.js.map} +0 -0
- /package/dist/components/{p-BRajO-Za.js.map → p-C5ecLNZA.js.map} +0 -0
- /package/dist/components/{p-DKftz0O8.js.map → p-COmqMfQo.js.map} +0 -0
- /package/dist/components/{p-DxygUurH.js.map → p-CeyoHpPn.js.map} +0 -0
- /package/dist/components/{p-CdFnvBem.js.map → p-CiUciD5Z.js.map} +0 -0
- /package/dist/components/{p-DBJJiSP0.js.map → p-DMJEOAwP.js.map} +0 -0
- /package/dist/components/{p-DkhE3BsH.js.map → p-Dz3Ufmr4.js.map} +0 -0
- /package/dist/components/{p-Doz2uwRv.js.map → p-fkQhr5s9.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as t,c as e,h as i,a as r,t as n}from"./index.js";import{g as a,i as o}from"./p-BQq26pt9.js";import{d as c}from"./p-DwKC_9u2.js";import{d}from"./p-c1pY-Mqq.js";import{d as h}from"./p-DumWT7NN.js";import{d as l}from"./p-Ca-I2UnB.js";import{d as b}from"./p-Bj7KrXzw.js";import{d as v}from"./p-DLwM1RNL.js";import{d as f}from"./p-Ch5yT3UA.js";import{d as u}from"./p-BNiIyZCn.js";function p(s,t,e){if(!s||!t){return{value:"",hideTabs:false}}if(s!==t&&!s.startsWith(`${t}/`)){return{value:"",hideTabs:false}}const i=s.slice(t.length);const r=i.startsWith("/")?i.slice(1).split("/")[0]:"";const n=a(e);if(!r){return{value:n[0]?.id??"",hideTabs:false}}const o=n.find((s=>s.id===r));if(o){return{value:o.id,hideTabs:false}}return{value:"",hideTabs:true}}function g(s,t){return s.length===0&&(t?.length??0)>0}function m(s,t){const e=[];let i=[];for(const r of s){if(o(r)){if(i.length>0){e.push({items:i});i=[]}continue}i.push({label:r.label,value:r.id,dot:r.dot,isSelected:r.id===t,isInactive:r.isInactive})}if(i.length>0){e.push({items:i})}return e}function _(s,t){return m(C(s),t)}function y(s,t,e,i=2){const r=s-t;if(e){return r>-i}return r>i}function w(s,t,e,i,r){if(s.length===0||t<=0)return 0;const n=T(s,s.length,i,r);if(n<=t)return s.length;const a=Math.max(0,t-e);let o=0;for(let t=1;t<=s.length;t++){const e=T(s,t,i,r);if(e>a)break;o=t}return o}function x(s){let t=s.length;while(t>0&&o(s[t-1])){t-=1}return s.slice(0,t)}function C(s){let t=0;while(t<s.length&&o(s[t])){t+=1}return s.slice(t)}function T(s,t,e,i){if(t<=0)return 0;const r=s.slice(0,t).reduce(((s,t)=>s+t),0);return i+r+e*Math.max(0,t-1)}const k="dsChromeTransitionStart";const S="dsChromeTransitionEnd";class F{constructor(){this.depth=0}enter(){this.depth+=1}exit(){this.depth=Math.max(0,this.depth-1)}get isActive(){return this.depth>0}}class M{constructor(){this.active=false}enter(){this.active=true}exit(){this.active=false}get isActive(){return this.active}}function D(s){let t=0;return{schedule(){if(t!==0)return;t=requestAnimationFrame((()=>{t=0;s()}))},cancel(){if(t!==0){cancelAnimationFrame(t);t=0}}}}function A(s){return s.detail?.source}function E(s){return s.detail?.phase}const O=()=>`.ds-control--lg.sc-ds-bar-nav,.ds-control--lg.sc-ds-bar-nav-h,.ds-control--md.sc-ds-bar-nav-h,.ds-control--md.sc-ds-bar-nav,.ds-control--sm.sc-ds-bar-nav-h,.ds-control--sm.sc-ds-bar-nav,.ds-control--xs.sc-ds-bar-nav-h,.ds-control--xs.sc-ds-bar-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-bar-nav-h,.ds-control--lg.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-bar-nav-h,.ds-control--md.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-bar-nav-h,.ds-control--sm.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-bar-nav-h,.ds-control--xs.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-bar-nav-h,.ds-chrome-space--sm.sc-ds-bar-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-bar-nav-h,.ds-chrome-space--md.sc-ds-bar-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-bar-nav-h,.ds-chrome-space--lg.sc-ds-bar-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-bar-nav-h,.ds-chrome-row.sc-ds-bar-nav,.ds-chrome-column.sc-ds-bar-nav-h,.ds-chrome-column.sc-ds-bar-nav,.ds-chrome-grid.sc-ds-bar-nav-h,.ds-chrome-grid.sc-ds-bar-nav{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-bar-nav-h,.ds-chrome-row.sc-ds-bar-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-bar-nav-h,.ds-chrome-column.sc-ds-bar-nav{flex-direction:column}.ds-chrome-grid.sc-ds-bar-nav-h,.ds-chrome-grid.sc-ds-bar-nav{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-bar-nav:root,.sc-ds-bar-nav-h,.ds-forced-colors-scope.sc-ds-bar-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-bar-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-nav-h,.ds-focus-ring.sc-ds-bar-nav,.ds-focus-ring-inset.sc-ds-bar-nav-h,.ds-focus-ring-inset.sc-ds-bar-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring.sc-ds-bar-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-bar-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-bar-nav:root,.sc-ds-bar-nav-h,.ds-forced-colors-scope.sc-ds-bar-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-bar-nav-h,.ds-control-inactive.sc-ds-bar-nav{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-bar-nav-h,.ds-control-inactive.sc-ds-bar-nav{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{position:relative;height:var(--dimension-size-600);border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_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);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.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)}ds-shell-app.sc-ds-bar-nav-h:not([gradient-preset='none']) .bar-nav.sc-ds-bar-nav,ds-shell-app:not([gradient-preset='none']) .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.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__tabs-visible.sc-ds-bar-nav{flex:1;min-width:0;width:100%}.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>div.sc-ds-bar-nav{width:max-content}.bar-nav__tab-list.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content}.bar-nav__tab.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:none;border-radius:var(--ds-control-radius);background-color:transparent;color:var(--_bar-nav-fg-secondary);cursor:default;position:relative;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.bar-nav__tab.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--ds-control-radius);background:transparent;pointer-events:none;cursor:inherit}.bar-nav__tab.sc-ds-bar-nav:hover::after{background:var(--_bar-nav-hover)}.bar-nav__tab.sc-ds-bar-nav:active::after{background:var(--_bar-nav-pressed)}.bar-nav__tab--selected.sc-ds-bar-nav{color:var(--_bar-nav-fg-primary)}.bar-nav__tab-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--ds-control-label-inset);white-space:nowrap}.bar-nav__tab-label--dot.sc-ds-bar-nav{padding-right:calc(var(--ds-control-label-inset) + var(--ds-control-gap))}.bar-nav__tab-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none}.bar-nav__tab-divider.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--ds-control-height);padding-block:var(--ds-control-padding-inline);flex-shrink:0;pointer-events:none}.bar-nav__tab-divider-line.sc-ds-bar-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--_bar-nav-border)}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--ds-control-height);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_bar-nav-fg-primary);--ds-interaction-hover:var(--_bar-nav-hover);--ds-interaction-pressed:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}ds-text.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--ds-control-height);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));-webkit-user-select:none;user-select:none}`;const H=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=e(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.value="";this.basePath="";this.currentUrl="";this.moreTabsLabel="More tabs";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuTriggerActive=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.focusedTabId="";this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabListEl=null;this.probeTabListEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new M;this.panelToolsTransition=new M;this.overflowCoalescer=D((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=A(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=E(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=A(s);if(t==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(t==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}};this.handleOverflowFocus=()=>{this.overflowRovingFocused=true};this.handleOverflowBlur=()=>{this.overflowRovingFocused=false}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get renderedSelectableTabs(){const s=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return a(s)}get hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}syncFocusedTabId(s,t){if(t.some((t=>t.id===s&&!t.isInactive))){this.focusedTabId=s;return}const e=t.find((s=>!s.isInactive));this.focusedTabId=e?.id??""}digestTabsConfig(s){return s.map((s=>o(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuTriggerActive=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncFocusedTabId(this.effectiveValue,this.renderedSelectableTabs);this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuTriggerActive=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps();this.syncFocusedTabId(this.effectiveValue,a(this.resolvedTabs))}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-shell-app");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(k,this.onChromeTransitionStart);s.addEventListener(S,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(k,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(S,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(g(this.resolvedTabs,this.tabs)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const e=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(e)}};queueMicrotask(e)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-t)}getTabsIntrinsicWidth(){return this.probeTabListEl?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=this.probeTabListEl;if(!s)return null;const t=Array.from(s.children);const e=t.map((s=>s.getBoundingClientRect().width));if(e.length===0||e.some((s=>s===0)))return null;const i=getComputedStyle(s);const r=parseFloat(i.columnGap||i.gap)||0;const n=e.reduce(((s,t)=>s+t),0);const a=r*Math.max(0,e.length-1);const o=Math.max(0,s.scrollWidth-n-a);return{itemWidths:e,itemGap:r,listExtraWidth:o}}setOverflowTabLayout(s,t){const e=t.length>0;const i=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const r=this.digestTabsConfig(t)!==this.digestTabsConfig(this.overflowTabs);if(i){this.visibleTabs=s}if(r){this.overflowTabs=t}if(e!==this.tabsCollapsed){this.tabsCollapsed=e;if(!e){this.menuOpen=false;this.menuTriggerActive=false}}this.syncFocusedTabId(this.effectiveValue,a(e?s:this.resolvedTabs))}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getProbeTabMetrics();const e=this.getTabsIntrinsicWidth();if(!t||e===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const i=y(e,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!i){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const r=w(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const n=x(this.resolvedTabs.slice(0,r));const a=this.resolvedTabs.slice(n.length);this.setOverflowTabLayout(n,a);this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.hasOverflowTabs)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const t=s.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuClose(){this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuAfterClose(){if(!this.menuOpen)this.menuTriggerActive=false}incomingTabs(){return this.tabs??[]}applyHostProps(){const s=this.basePath;const t=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(t){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const t=this.incomingTabs();if(t.length===0){return}this.pendingSection=""}const e=this.incomingTabs();const i=this.digestTabsConfig(e)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=e;this.syncValueFromUrl();this.committedSection=s;if(i){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=_(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:e}=p(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=e}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=this.visibleTabListEl?.querySelector(`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}focusVisibleTab(s){this.focusedTabId=s;const t=this.visibleTabListEl?.querySelector(`[data-tab-id="${s}"]`);t?.focus({preventScroll:true})}focusLastVisibleTab(){const s=[...this.renderedSelectableTabs].reverse().find((s=>!s.isInactive));if(s)this.focusVisibleTab(s.id)}findEnabledVisibleTab(s,t){const e=this.renderedSelectableTabs;for(let i=s+t;i>=0&&i<e.length;i+=t){if(!e[i]?.isInactive)return i}return null}handleTabKeyDown(s){const t=this.renderedSelectableTabs;if(!t.length)return;const e=s.target?.getAttribute("data-tab-id");const i=e??this.focusedTabId;if(s.key==="Enter"||s.key===" "){const e=t.find((s=>s.id===i));if(!e||e.isInactive)return;s.preventDefault();this.selectTab(e.id);return}const r=t.findIndex((s=>s.id===i));if(r<0)return;let n;if(s.key==="ArrowRight"){n=this.findEnabledVisibleTab(r,1);if(n===null&&this.hasOverflowTabs){s.preventDefault();this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.();return}}else if(s.key==="ArrowLeft"){n=this.findEnabledVisibleTab(r,-1)}else if(s.key==="Home"){n=t.findIndex((s=>!s.isInactive))}else if(s.key==="End"){const s=[...t].reverse().findIndex((s=>!s.isInactive));n=s<0?null:t.length-1-s}else{return}if(n===null||n<0||n===r)return;s.preventDefault();this.focusVisibleTab(t[n].id)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuTriggerActive=true;this.menuOpen=true}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;this.focusLastVisibleTab();return}if(s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}renderTabList(s,t){return i("div",{role:"tablist",class:"bar-nav__tab-list","aria-label":this.heading,ref:s=>{if(t){const t=s??null;if(t===this.probeTabListEl)return;this.probeTabListEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}}else{this.visibleTabListEl=s??null}},onKeyDown:t?undefined:s=>this.handleTabKeyDown(s),onFocusin:t?undefined:()=>{this.overflowRovingFocused=false}},s.map(((s,e)=>{if(o(s)){return i("div",{class:"bar-nav__tab-divider",key:`divider-${e}`,"aria-hidden":"true"},i("div",{class:"bar-nav__tab-divider-line"}))}const r=s.id===this.effectiveValue;return i("button",{key:s.id,type:"button",role:"tab","data-tab-id":s.id,class:{"bar-nav__tab":true,"bar-nav__tab--selected":r,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-control-inactive":!!s.isInactive},"aria-selected":r?"true":"false","aria-disabled":s.isInactive?"true":undefined,"aria-controls":s.panelId??undefined,disabled:s.isInactive,tabIndex:!t&&!this.overflowRovingFocused&&s.id===this.focusedTabId?0:-1,onClick:()=>!t&&!s.isInactive&&this.selectTab(s.id),onFocus:()=>{if(!t)this.focusedTabId=s.id}},i("span",{class:{"bar-nav__tab-label":true,"bar-nav__tab-label--dot":!!s.dot}},i("ds-text",{as:"span",variant:"text-body-medium",emphasis:r,color:"inherit"},s.label),s.dot&&i("ds-badge",{class:"bar-nav__tab-dot",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))})))}render(){const s=this.basePath===""||this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const e=this.basePath||"no-section";const n=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return i(r,{key:"f6a13028b6b2566796cc9ee258b754ddb2ce41fe"},i("header",{key:"447f1932a8988e7997674d6cc2d56597b91ffe0d",class:{"bar-nav":true,"ds-control--md":true,"ds-chrome-row":true,"ds-chrome-space--md":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":t&&this.hasOverflowTabs},ref:s=>{this.headerEl=s;if(s&&!this.resizeObserver){this.setupOverflowObserver()}}},t&&i("div",{key:"b9c085a990e5c0b0a0344e49689449f5365609ca",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},i("div",{key:`probe-${e}`},this.renderTabList(this.resolvedTabs,true))),t&&this.tabLayoutCommitted&&n.length>0&&i("div",{key:"d04d5c438c6662bc349018c212828fef9c9ae843",class:"bar-nav__left"},i("div",{key:`visible-${e}`,class:"bar-nav__tabs-visible"},this.renderTabList(n,false))),t&&!this.tabLayoutCommitted&&i("div",{key:"ca5542cdb0fe01bb4e8750ea44b7d1da66c88a9b",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&i("ds-text",{key:"81cbb92242452dbef45e312cb0e78f8d6ab29de6",class:"bar-nav__heading",lineTruncation:1,as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},this.heading),t&&this.hasOverflowTabs&&i("ds-button-unfilled",{key:"e583ce123427570af91691f8eec859a2a504f4cb",variant:"icon",class:{"bar-nav__overflow-trigger":true},icon:"ChevronDown",activeFill:false,hasBorder:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuTriggerActive,"aria-label":this.moreTabsLabel,onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&i("ds-menu",{key:"51842f98264fb812ba04d427b6f061474bf14e52",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:_(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose(),onDsAfterClose:()=>this.handleMenuAfterClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return O()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],moreTabsLabel:[1,"more-tabs-label"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],menuTriggerActive:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[32],focusedTabId:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);H.HOST_PROP_SYNC_BUDGET=8;H.INTRINSIC_WIDTH_RETRY_MAX=3;H.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;H.OVERFLOW_HYSTERESIS_PX=8;function L(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-text"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(n(s))){customElements.define(n(s),H)}break;case"ds-badge":if(!customElements.get(n(s))){c()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){d()}break;case"ds-icon":if(!customElements.get(n(s))){h()}break;case"ds-loader":if(!customElements.get(n(s))){l()}break;case"ds-menu":if(!customElements.get(n(s))){b()}break;case"ds-swatch-picker":if(!customElements.get(n(s))){v()}break;case"ds-switch":if(!customElements.get(n(s))){f()}break;case"ds-text":if(!customElements.get(n(s))){u()}break}}))}L();export{H as B,F as C,k as a,S as b,D as c,L as d,A as r};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as s,H as t,c as e,h as i,a as r,t as n}from"./index.js";import{g as a,i as o}from"./p-BQq26pt9.js";import{d as c}from"./p-DwKC_9u2.js";import{d}from"./p-Azjx2SsL.js";import{d as h}from"./p-C8U5BsJf.js";import{d as l}from"./p-Ca-I2UnB.js";import{d as b}from"./p-cPh32CFB.js";import{d as v}from"./p-DLwM1RNL.js";import{d as f}from"./p-Ch5yT3UA.js";import{d as u}from"./p-BNiIyZCn.js";function g(s,t,e){if(!s||!t){return{value:"",hideTabs:false}}if(s!==t&&!s.startsWith(`${t}/`)){return{value:"",hideTabs:false}}const i=s.slice(t.length);const r=i.startsWith("/")?i.slice(1).split("/")[0]:"";const n=a(e);if(!r){return{value:n[0]?.id??"",hideTabs:false}}const o=n.find((s=>s.id===r));if(o){return{value:o.id,hideTabs:false}}return{value:"",hideTabs:true}}function p(s,t){return s.length===0&&(t?.length??0)>0}function m(s,t){const e=[];let i=[];for(const r of s){if(o(r)){if(i.length>0){e.push({items:i});i=[]}continue}i.push({label:r.label,value:r.id,dot:r.dot,isSelected:r.id===t,isInactive:r.isInactive})}if(i.length>0){e.push({items:i})}return e}function _(s,t){return m(C(s),t)}function y(s,t,e,i=2){const r=s-t;if(e){return r>-i}return r>i}function w(s,t,e,i,r){if(s.length===0||t<=0)return 0;const n=T(s,s.length,i,r);if(n<=t)return s.length;const a=Math.max(0,t-e);let o=0;for(let t=1;t<=s.length;t++){const e=T(s,t,i,r);if(e>a)break;o=t}return o}function x(s){let t=s.length;while(t>0&&o(s[t-1])){t-=1}return s.slice(0,t)}function C(s){let t=0;while(t<s.length&&o(s[t])){t+=1}return s.slice(t)}function T(s,t,e,i){if(t<=0)return 0;const r=s.slice(0,t).reduce(((s,t)=>s+t),0);return i+r+e*Math.max(0,t-1)}const k="dsChromeTransitionStart";const S="dsChromeTransitionEnd";class F{constructor(){this.depth=0}enter(){this.depth+=1}exit(){this.depth=Math.max(0,this.depth-1)}get isActive(){return this.depth>0}}class M{constructor(){this.active=false}enter(){this.active=true}exit(){this.active=false}get isActive(){return this.active}}function A(s){let t=0;return{schedule(){if(t!==0)return;t=requestAnimationFrame((()=>{t=0;s()}))},cancel(){if(t!==0){cancelAnimationFrame(t);t=0}}}}function D(s){return s.detail?.source}function E(s){return s.detail?.phase}const L=()=>`.ds-control--lg.sc-ds-bar-nav,.ds-control--lg.sc-ds-bar-nav-h,.ds-control--md.sc-ds-bar-nav-h,.ds-control--md.sc-ds-bar-nav,.ds-control--sm.sc-ds-bar-nav-h,.ds-control--sm.sc-ds-bar-nav,.ds-control--xs.sc-ds-bar-nav-h,.ds-control--xs.sc-ds-bar-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-bar-nav-h,.ds-control--lg.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-bar-nav-h,.ds-control--md.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-bar-nav-h,.ds-control--sm.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-bar-nav-h,.ds-control--xs.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-bar-nav-h,.ds-chrome-space--sm.sc-ds-bar-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-bar-nav-h,.ds-chrome-space--md.sc-ds-bar-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-bar-nav-h,.ds-chrome-space--lg.sc-ds-bar-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-bar-nav-h,.ds-chrome-row.sc-ds-bar-nav,.ds-chrome-column.sc-ds-bar-nav-h,.ds-chrome-column.sc-ds-bar-nav,.ds-chrome-grid.sc-ds-bar-nav-h,.ds-chrome-grid.sc-ds-bar-nav{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-bar-nav-h,.ds-chrome-row.sc-ds-bar-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-bar-nav-h,.ds-chrome-column.sc-ds-bar-nav{flex-direction:column}.ds-chrome-grid.sc-ds-bar-nav-h,.ds-chrome-grid.sc-ds-bar-nav{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-bar-nav:root,.sc-ds-bar-nav-h,.ds-forced-colors-scope.sc-ds-bar-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-bar-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-nav-h,.ds-focus-ring.sc-ds-bar-nav,.ds-focus-ring-inset.sc-ds-bar-nav-h,.ds-focus-ring-inset.sc-ds-bar-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring.sc-ds-bar-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-bar-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-bar-nav:root,.sc-ds-bar-nav-h,.ds-forced-colors-scope.sc-ds-bar-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-bar-nav-h,.ds-control-inactive.sc-ds-bar-nav{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-bar-nav-h,.ds-control-inactive.sc-ds-bar-nav{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{position:relative;height:var(--dimension-size-600);border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_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);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.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)}ds-shell-app.sc-ds-bar-nav-h:not([gradient-preset='none']) .bar-nav.sc-ds-bar-nav,ds-shell-app:not([gradient-preset='none']) .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.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__tabs-visible.sc-ds-bar-nav{flex:1;min-width:0;width:100%}.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>div.sc-ds-bar-nav{width:max-content}.bar-nav__tab-list.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content}.bar-nav__tab.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:none;border-radius:var(--ds-control-radius);background-color:transparent;color:var(--_bar-nav-fg-secondary);cursor:default;position:relative;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.bar-nav__tab.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--ds-control-radius);background:transparent;pointer-events:none;cursor:inherit}.bar-nav__tab.sc-ds-bar-nav:hover::after{background:var(--_bar-nav-hover)}.bar-nav__tab.sc-ds-bar-nav:active::after{background:var(--_bar-nav-pressed)}.bar-nav__tab--selected.sc-ds-bar-nav{color:var(--_bar-nav-fg-primary)}.bar-nav__tab-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--ds-control-label-inset);white-space:nowrap}.bar-nav__tab-label--dot.sc-ds-bar-nav{padding-right:calc(var(--ds-control-label-inset) + var(--ds-control-gap))}.bar-nav__tab-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none}.bar-nav__tab-divider.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--ds-control-height);padding-block:var(--ds-control-padding-inline);flex-shrink:0;pointer-events:none}.bar-nav__tab-divider-line.sc-ds-bar-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--_bar-nav-border)}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--ds-control-height);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_bar-nav-fg-primary);--ds-interaction-hover:var(--_bar-nav-hover);--ds-interaction-pressed:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}ds-text.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--ds-control-height);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));-webkit-user-select:none;user-select:none}`;const O=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=e(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.value="";this.basePath="";this.currentUrl="";this.moreTabsLabel="More tabs";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuTriggerActive=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.focusedTabId="";this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabListEl=null;this.probeTabListEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new M;this.panelToolsTransition=new M;this.overflowCoalescer=A((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=D(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=E(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=D(s);if(t==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(t==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}};this.handleOverflowFocus=()=>{this.overflowRovingFocused=true};this.handleOverflowBlur=()=>{this.overflowRovingFocused=false}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get renderedSelectableTabs(){const s=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return a(s)}get hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}syncFocusedTabId(s,t){if(t.some((t=>t.id===s&&!t.isInactive))){this.focusedTabId=s;return}const e=t.find((s=>!s.isInactive));this.focusedTabId=e?.id??""}digestTabsConfig(s){return s.map((s=>o(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuTriggerActive=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncFocusedTabId(this.effectiveValue,this.renderedSelectableTabs);this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuTriggerActive=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps();this.syncFocusedTabId(this.effectiveValue,a(this.resolvedTabs))}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-shell-app");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(k,this.onChromeTransitionStart);s.addEventListener(S,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(k,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(S,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(p(this.resolvedTabs,this.tabs)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const e=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(e)}};queueMicrotask(e)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-t)}getTabsIntrinsicWidth(){return this.probeTabListEl?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=this.probeTabListEl;if(!s)return null;const t=Array.from(s.children);const e=t.map((s=>s.getBoundingClientRect().width));if(e.length===0||e.some((s=>s===0)))return null;const i=getComputedStyle(s);const r=parseFloat(i.columnGap||i.gap)||0;const n=e.reduce(((s,t)=>s+t),0);const a=r*Math.max(0,e.length-1);const o=Math.max(0,s.scrollWidth-n-a);return{itemWidths:e,itemGap:r,listExtraWidth:o}}setOverflowTabLayout(s,t){const e=t.length>0;const i=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const r=this.digestTabsConfig(t)!==this.digestTabsConfig(this.overflowTabs);if(i){this.visibleTabs=s}if(r){this.overflowTabs=t}if(e!==this.tabsCollapsed){this.tabsCollapsed=e;if(!e){this.menuOpen=false;this.menuTriggerActive=false}}this.syncFocusedTabId(this.effectiveValue,a(e?s:this.resolvedTabs))}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getProbeTabMetrics();const e=this.getTabsIntrinsicWidth();if(!t||e===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const i=y(e,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!i){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const r=w(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const n=x(this.resolvedTabs.slice(0,r));const a=this.resolvedTabs.slice(n.length);this.setOverflowTabLayout(n,a);this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.hasOverflowTabs)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const t=s.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuClose(){this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuAfterClose(){if(!this.menuOpen)this.menuTriggerActive=false}incomingTabs(){return this.tabs??[]}applyHostProps(){const s=this.basePath;const t=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(t){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const t=this.incomingTabs();if(t.length===0){return}this.pendingSection=""}const e=this.incomingTabs();const i=this.digestTabsConfig(e)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=e;this.syncValueFromUrl();this.committedSection=s;if(i){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=_(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:e}=g(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=e}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=this.visibleTabListEl?.querySelector(`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}focusVisibleTab(s){this.focusedTabId=s;const t=this.visibleTabListEl?.querySelector(`[data-tab-id="${s}"]`);t?.focus({preventScroll:true})}focusLastVisibleTab(){const s=[...this.renderedSelectableTabs].reverse().find((s=>!s.isInactive));if(s)this.focusVisibleTab(s.id)}findEnabledVisibleTab(s,t){const e=this.renderedSelectableTabs;for(let i=s+t;i>=0&&i<e.length;i+=t){if(!e[i]?.isInactive)return i}return null}handleTabKeyDown(s){const t=this.renderedSelectableTabs;if(!t.length)return;const e=s.target?.getAttribute("data-tab-id");const i=e??this.focusedTabId;if(s.key==="Enter"||s.key===" "){const e=t.find((s=>s.id===i));if(!e||e.isInactive)return;s.preventDefault();this.selectTab(e.id);return}const r=t.findIndex((s=>s.id===i));if(r<0)return;let n;if(s.key==="ArrowRight"){n=this.findEnabledVisibleTab(r,1);if(n===null&&this.hasOverflowTabs){s.preventDefault();this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.();return}}else if(s.key==="ArrowLeft"){n=this.findEnabledVisibleTab(r,-1)}else if(s.key==="Home"){n=t.findIndex((s=>!s.isInactive))}else if(s.key==="End"){const s=[...t].reverse().findIndex((s=>!s.isInactive));n=s<0?null:t.length-1-s}else{return}if(n===null||n<0||n===r)return;s.preventDefault();this.focusVisibleTab(t[n].id)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuTriggerActive=true;this.menuOpen=true}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;this.focusLastVisibleTab();return}if(s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}renderTabList(s,t){return i("div",{role:"tablist",class:"bar-nav__tab-list","aria-label":this.heading,ref:s=>{if(t){const t=s??null;if(t===this.probeTabListEl)return;this.probeTabListEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}}else{this.visibleTabListEl=s??null}},onKeyDown:t?undefined:s=>this.handleTabKeyDown(s),onFocusin:t?undefined:()=>{this.overflowRovingFocused=false}},s.map(((s,e)=>{if(o(s)){return i("div",{class:"bar-nav__tab-divider",key:`divider-${e}`,"aria-hidden":"true"},i("div",{class:"bar-nav__tab-divider-line"}))}const r=s.id===this.effectiveValue;return i("button",{key:s.id,type:"button",role:"tab","data-tab-id":s.id,class:{"bar-nav__tab":true,"bar-nav__tab--selected":r,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-control-inactive":!!s.isInactive},"aria-selected":r?"true":"false","aria-disabled":s.isInactive?"true":undefined,"aria-controls":s.panelId??undefined,disabled:s.isInactive,tabIndex:!t&&!this.overflowRovingFocused&&s.id===this.focusedTabId?0:-1,onClick:()=>!t&&!s.isInactive&&this.selectTab(s.id),onFocus:()=>{if(!t)this.focusedTabId=s.id}},i("span",{class:{"bar-nav__tab-label":true,"bar-nav__tab-label--dot":!!s.dot}},i("ds-text",{as:"span",variant:"text-body-medium",emphasis:r,color:"inherit"},s.label),s.dot&&i("ds-badge",{class:"bar-nav__tab-dot",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))})))}render(){const s=this.basePath===""||this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const e=this.basePath||"no-section";const n=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return i(r,{key:"f6a13028b6b2566796cc9ee258b754ddb2ce41fe"},i("header",{key:"447f1932a8988e7997674d6cc2d56597b91ffe0d",class:{"bar-nav":true,"ds-control--md":true,"ds-chrome-row":true,"ds-chrome-space--md":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":t&&this.hasOverflowTabs},ref:s=>{this.headerEl=s;if(s&&!this.resizeObserver){this.setupOverflowObserver()}}},t&&i("div",{key:"b9c085a990e5c0b0a0344e49689449f5365609ca",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},i("div",{key:`probe-${e}`},this.renderTabList(this.resolvedTabs,true))),t&&this.tabLayoutCommitted&&n.length>0&&i("div",{key:"d04d5c438c6662bc349018c212828fef9c9ae843",class:"bar-nav__left"},i("div",{key:`visible-${e}`,class:"bar-nav__tabs-visible"},this.renderTabList(n,false))),t&&!this.tabLayoutCommitted&&i("div",{key:"ca5542cdb0fe01bb4e8750ea44b7d1da66c88a9b",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&i("ds-text",{key:"81cbb92242452dbef45e312cb0e78f8d6ab29de6",class:"bar-nav__heading",lineTruncation:1,as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},this.heading),t&&this.hasOverflowTabs&&i("ds-button-unfilled",{key:"e583ce123427570af91691f8eec859a2a504f4cb",variant:"icon",class:{"bar-nav__overflow-trigger":true},icon:"ChevronDown",activeFill:false,hasBorder:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuTriggerActive,"aria-label":this.moreTabsLabel,onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&i("ds-menu",{key:"51842f98264fb812ba04d427b6f061474bf14e52",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:_(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose(),onDsAfterClose:()=>this.handleMenuAfterClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return L()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],moreTabsLabel:[1,"more-tabs-label"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],menuTriggerActive:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[32],focusedTabId:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);O.HOST_PROP_SYNC_BUDGET=8;O.INTRINSIC_WIDTH_RETRY_MAX=3;O.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;O.OVERFLOW_HYSTERESIS_PX=8;function H(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-text"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(n(s))){customElements.define(n(s),O)}break;case"ds-badge":if(!customElements.get(n(s))){c()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){d()}break;case"ds-icon":if(!customElements.get(n(s))){h()}break;case"ds-loader":if(!customElements.get(n(s))){l()}break;case"ds-menu":if(!customElements.get(n(s))){b()}break;case"ds-swatch-picker":if(!customElements.get(n(s))){v()}break;case"ds-switch":if(!customElements.get(n(s))){f()}break;case"ds-text":if(!customElements.get(n(s))){u()}break}}))}H();export{O as B,F as C,k as a,S as b,A as c,H as d,D as r};
|
|
2
|
+
//# sourceMappingURL=p-COmqMfQo.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as i,h as a,a as d,t as o}from"./index.js";import{g as r}from"./p-BQq26pt9.js";import{d as t}from"./p-DwKC_9u2.js";import{d as n}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as s,c as i,h as a,a as d,t as o}from"./index.js";import{g as r}from"./p-BQq26pt9.js";import{d as t}from"./p-DwKC_9u2.js";import{d as n}from"./p-C8U5BsJf.js";import{d as c}from"./p-cPh32CFB.js";import{d as h}from"./p-B1JB0Zn-.js";import{d as m}from"./p-DLwM1RNL.js";import{d as l}from"./p-Ch5yT3UA.js";import{d as b}from"./p-DAM4CDXT.js";import{d as p}from"./p-BNiIyZCn.js";const g=()=>`.ds-chrome-space--sm.sc-ds-mobile-header-h,.ds-chrome-space--sm.sc-ds-mobile-header{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-mobile-header-h,.ds-chrome-space--md.sc-ds-mobile-header{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-mobile-header-h,.ds-chrome-space--lg.sc-ds-mobile-header{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-mobile-header-h,.ds-chrome-row.sc-ds-mobile-header,.ds-chrome-column.sc-ds-mobile-header-h,.ds-chrome-column.sc-ds-mobile-header,.ds-chrome-grid.sc-ds-mobile-header-h,.ds-chrome-grid.sc-ds-mobile-header{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-mobile-header-h,.ds-chrome-row.sc-ds-mobile-header{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-mobile-header-h,.ds-chrome-column.sc-ds-mobile-header{flex-direction:column}.ds-chrome-grid.sc-ds-mobile-header-h,.ds-chrome-grid.sc-ds-mobile-header{display:grid;align-items:center}.sc-ds-mobile-header-h{display:block;min-width:0;box-sizing:border-box;background:var(--color-background-primary);color:var(--color-foreground-primary)}[tone='brand'].sc-ds-mobile-header-h{background:var(--color-background-bold-brand);color:var(--color-foreground-on-bold)}.mobile-header.sc-ds-mobile-header{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;background:inherit;color:inherit}.mobile-header__primary.sc-ds-mobile-header{grid-template-columns:minmax(var(--dimension-size-400), 1fr) minmax(0, auto) minmax(var(--dimension-size-400), 1fr);width:100%;height:calc(var(--dimension-size-500) + var(--dimension-space-200));min-width:0;background:inherit;color:inherit}.sc-ds-mobile-header-h:not([tone='brand']) .mobile-header.sc-ds-mobile-header::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.mobile-header__subsections.sc-ds-mobile-header{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--dimension-size-600);padding:var(--dimension-space-100) var(--dimension-space-200);box-sizing:border-box}.mobile-header__subsections.sc-ds-mobile-header ds-mobile-section-switcher.sc-ds-mobile-header{min-width:0;max-width:100%}.mobile-header__lane.sc-ds-mobile-header{display:flex;align-items:center;gap:var(--dimension-space-050);min-width:0}.mobile-header__lane--leading.sc-ds-mobile-header{justify-content:flex-start}.mobile-header__lane--trailing.sc-ds-mobile-header{justify-content:flex-end}.mobile-header__center.sc-ds-mobile-header{position:relative;min-width:0;max-width:100%;justify-self:center}.mobile-header__heading.sc-ds-mobile-header{display:block;min-width:0;max-width:100%;text-align:center}.mobile-header__semantic-heading.sc-ds-mobile-header{position:absolute;width:var(--dimension-stroke-width-012);height:var(--dimension-stroke-width-012);padding:0;margin:calc(var(--dimension-stroke-width-012) * -1);overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.sc-ds-mobile-header-s>[slot='leading'],.sc-ds-mobile-header-s>[slot='trailing']{flex:0 0 auto}`;const u=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSectionChange=i(this,"dsSectionChange");this.dsSubsectionChange=i(this,"dsSubsectionChange");this.heading="";this.headingLevel="h1";this.sections=[];this.value="";this.sectionsAriaLabel="Change page section";this.sectionsPresentation="switcher";this.sectionsSize="md";this.subsections=[];this.subvalue="";this.subsectionsAriaLabel="Change page subsection";this.tone="default";this.handleSectionChange=e=>{e.stopPropagation();this.dsSectionChange.emit(e.detail)};this.handleSubsectionChange=e=>{e.stopPropagation();this.dsSubsectionChange.emit(e.detail)}}get resolvedSections(){return this.sections??[]}get resolvedSubsections(){return this.subsections??[]}get selectedLabel(){const e=r(this.resolvedSections);return e.find((e=>e.id===this.value))?.label??e[0]?.label??this.heading}render(){const e=this.headingLevel;const s=r(this.resolvedSections);const i=s.length>1;const o=r(this.resolvedSubsections).length>1;const t=this.tone==="brand"?"on-bold":"primary";return a(d,{key:"8db47a679685b11f6a540387905fb284e4029425"},a("header",{key:"32247e412e461d0be0a443470012c65bb3e0d1df",class:"mobile-header"},a("div",{key:"249c39acb4f7f6c53e6207ab73d4701871e64152",class:"mobile-header__primary ds-chrome-grid ds-chrome-space--md"},a("div",{key:"bcdf49d4509b981173559974046ebcc3d1bb35e8",class:"mobile-header__lane mobile-header__lane--leading"},a("slot",{key:"3f8f454f38ee1606b1b6889df1d15d4f9db80f35",name:"leading"})),a("div",{key:"2296315661dd88dcb276369beb5d94a74ad08b8f",class:"mobile-header__center"},i?[a("span",{class:"mobile-header__semantic-heading",role:"heading","aria-level":this.headingLevel==="h1"?"1":"2"},this.selectedLabel),this.sectionsPresentation==="segmented"?a("ds-tab-group",{tabs:this.resolvedSections,value:this.value,size:this.sectionsSize,ariaLabel:this.sectionsAriaLabel,onDsChange:this.handleSectionChange}):a("ds-mobile-section-switcher",{sections:this.resolvedSections,value:this.value,navigationLabel:this.sectionsAriaLabel,onDsChange:this.handleSectionChange})]:a("ds-text",{class:"mobile-header__heading",as:e,variant:"text-body-medium",emphasis:true,color:t,lineTruncation:1},this.selectedLabel)),a("div",{key:"51f7b01492b9a89fd74217571e30ae5dac572217",class:"mobile-header__lane mobile-header__lane--trailing"},a("slot",{key:"de49ad4aeb1ee62ca3056eb93819a552832b50ec",name:"trailing"}))),o?a("nav",{class:"mobile-header__subsections","aria-label":this.subsectionsAriaLabel},a("ds-mobile-section-switcher",{sections:this.resolvedSubsections,value:this.subvalue,navigationLabel:this.subsectionsAriaLabel,onDsChange:this.handleSubsectionChange})):null))}static get style(){return g()}},[262,"ds-mobile-header",{heading:[1],headingLevel:[1,"heading-level"],sections:[16],value:[1],sectionsAriaLabel:[1,"sections-aria-label"],sectionsPresentation:[1,"sections-presentation"],sectionsSize:[1,"sections-size"],subsections:[16],subvalue:[1],subsectionsAriaLabel:[1,"subsections-aria-label"],tone:[513]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-mobile-header","ds-badge","ds-icon","ds-menu","ds-mobile-section-switcher","ds-swatch-picker","ds-switch","ds-tab-group","ds-text"];e.forEach((e=>{switch(e){case"ds-mobile-header":if(!customElements.get(o(e))){customElements.define(o(e),u)}break;case"ds-badge":if(!customElements.get(o(e))){t()}break;case"ds-icon":if(!customElements.get(o(e))){n()}break;case"ds-menu":if(!customElements.get(o(e))){c()}break;case"ds-mobile-section-switcher":if(!customElements.get(o(e))){h()}break;case"ds-swatch-picker":if(!customElements.get(o(e))){m()}break;case"ds-switch":if(!customElements.get(o(e))){l()}break;case"ds-tab-group":if(!customElements.get(o(e))){b()}break;case"ds-text":if(!customElements.get(o(e))){p()}break}}))}f();export{u as M,f as d};
|
|
2
|
+
//# sourceMappingURL=p-CeyoHpPn.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,h as a,a as s,t as o}from"./index.js";import{d as n}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as t,h as a,a as s,t as o}from"./index.js";import{d as n}from"./p-C8U5BsJf.js";import{d as l}from"./p-Ca-I2UnB.js";import{d as r}from"./p-BNiIyZCn.js";const i=()=>`.sc-ds-agent-tool-call-h{display:block}.agent-tool.sc-ds-agent-tool-call{border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);border-radius:var(--dimension-radius-050)}summary.sc-ds-agent-tool-call{align-items:center;cursor:default;display:grid;gap:var(--dimension-space-050);grid-template-columns:auto minmax(0, 1fr) auto;list-style:none;padding:var(--dimension-space-075) var(--dimension-space-100)}summary.sc-ds-agent-tool-call::-webkit-details-marker{display:none}.agent-tool__status.sc-ds-agent-tool-call{align-items:center;color:var(--color-foreground-faint-neutral);display:flex}.agent-tool--running.sc-ds-agent-tool-call .agent-tool__status.sc-ds-agent-tool-call,.agent-tool--queued.sc-ds-agent-tool-call .agent-tool__status.sc-ds-agent-tool-call{color:var(--color-foreground-faint-brand)}.agent-tool--error.sc-ds-agent-tool-call .agent-tool__status.sc-ds-agent-tool-call,.agent-tool--denied.sc-ds-agent-tool-call .agent-tool__status.sc-ds-agent-tool-call{color:var(--color-foreground-bold-negative)}.agent-tool__title.sc-ds-agent-tool-call{display:grid;gap:var(--dimension-space-025)}details[open].sc-ds-agent-tool-call .agent-tool__chevron.sc-ds-agent-tool-call{transform:rotate(90deg)}.agent-tool__details.sc-ds-agent-tool-call{display:grid;gap:var(--dimension-space-075);padding:0 var(--dimension-space-100) var(--dimension-space-100)}section.sc-ds-agent-tool-call{display:grid;gap:var(--dimension-space-025)}pre.sc-ds-agent-tool-call{background:var(--color-background-secondary);border-radius:var(--dimension-radius-050);margin:0;overflow:auto;padding:var(--dimension-space-075);white-space:pre-wrap}@media (prefers-reduced-motion: no-preference){.agent-tool__chevron.sc-ds-agent-tool-call{transition:transform var(--effect-motion-short-2)}}`;const d=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.name="";this.label="";this.state="queued";this.open=false}serialize(e){if(e===undefined)return"";if(typeof e==="string")return e;try{return JSON.stringify(e,null,2)}catch{return String(e)}}render(){const e=this.state==="queued"||this.state==="running";const t=this.state.charAt(0).toUpperCase()+this.state.slice(1);return a(s,{key:"3230d61f24b7327f6b9c371832b1bbbeeab70884"},a("details",{key:"cbae50b5c9e4f4b8ecd77e660bbd86dfeed3f7f3",class:`agent-tool agent-tool--${this.state}`,open:this.open},a("summary",{key:"8b6e2b7207cdf3990a6acced64ea7c7e0bfeb1e6"},a("span",{key:"0cd196831ad95d6b465dc894b9a0aab63671f55e",class:"agent-tool__status","aria-hidden":"true"},e?a("ds-loader",{size:"xs",color:"inherit"}):a("ds-icon",{name:this.state==="success"?"Check":"ErrorTriangle",size:"xs",color:"inherit"})),a("span",{key:"6e146b8ff6d4f070c8312bb35560d2e10280d024",class:"agent-tool__title"},a("ds-text",{key:"8b06a86bd070a01132c984a6607ab8dfa4c6a773",variant:"text-body-small",emphasis:true},this.label||this.name),a("ds-text",{key:"c8f59456fbeb11d7d01488447439c6beb1d428a4",variant:"text-caption",color:"secondary"},t)),a("ds-icon",{key:"110a285f0d3124750a002121d5f4202b5718053f",class:"agent-tool__chevron",name:"ChevronRight",size:"xs",color:"inherit"})),a("div",{key:"381c31344245c57ffd7803bd4b1cfdd5eb253a58",class:"agent-tool__details"},this.input!==undefined?a("section",null,a("ds-text",{variant:"text-caption",emphasis:true},"Input"),a("pre",null,this.serialize(this.input))):null,this.output!==undefined?a("section",null,a("ds-text",{variant:"text-caption",emphasis:true},"Output"),a("pre",null,this.serialize(this.output))):null,this.error?a("section",null,a("ds-text",{variant:"text-caption",emphasis:true},"Error"),a("pre",null,this.error)):null)))}static get style(){return i()}},[2,"ds-agent-tool-call",{name:[1],label:[1],state:[1],input:[16],output:[16],error:[1],open:[4]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-agent-tool-call","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-agent-tool-call":if(!customElements.get(o(e))){customElements.define(o(e),d)}break;case"ds-icon":if(!customElements.get(o(e))){n()}break;case"ds-loader":if(!customElements.get(o(e))){l()}break;case"ds-text":if(!customElements.get(o(e))){r()}break}}))}c();export{d as A,c as d};
|
|
2
|
+
//# sourceMappingURL=p-CiUciD5Z.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["CONTROL_TEXT_VARIANT","lg","md","sm","xs","CONTROL_SUPPORTING_TEXT_VARIANT"],"sources":["src/wc/utils/control-text.ts"],"sourcesContent":["import type { TextVariant } from '../components/Text/text-types';\n\n/** Shared public control sizes. Typography is derived; it is not a separate density API. */\nexport type ControlSize = 'lg' | 'md' | 'sm' | 'xs';\n\n/** Complete text variant selected internally by each control size. */\nexport const CONTROL_TEXT_VARIANT: Record<ControlSize, TextVariant> = {\n lg: 'text-body-large',\n md: 'text-body-medium',\n sm: 'text-body-small',\n xs: 'text-caption',\n};\n\n/** Supporting copy paired with each control density in two-line choice rows. */\nexport const CONTROL_SUPPORTING_TEXT_VARIANT: Record<ControlSize, TextVariant> = {\n lg: 'text-body-medium',\n md: 'text-body-small',\n sm: 'text-caption',\n xs: 'text-caption',\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["CONTROL_TEXT_VARIANT","lg","md","sm","xs","CONTROL_SUPPORTING_TEXT_VARIANT"],"sources":["src/wc/utils/control-text.ts"],"sourcesContent":["import type { TextVariant } from '../components/Text/text-types';\n\n/** Shared public control sizes. Typography is derived; it is not a separate density API. */\nexport type ControlSize = 'lg' | 'md' | 'sm' | 'xs';\n\n/** Outer-density reduction used when a control is nested inside a same-size frame. */\nexport type ControlInsetDepth = 'single' | 'double';\n\n/** Complete text variant selected internally by each control size. */\nexport const CONTROL_TEXT_VARIANT: Record<ControlSize, TextVariant> = {\n lg: 'text-body-large',\n md: 'text-body-medium',\n sm: 'text-body-small',\n xs: 'text-caption',\n};\n\n/** Supporting copy paired with each control density in two-line choice rows. */\nexport const CONTROL_SUPPORTING_TEXT_VARIANT: Record<ControlSize, TextVariant> = {\n lg: 'text-body-medium',\n md: 'text-body-small',\n sm: 'text-caption',\n xs: 'text-caption',\n};\n"],"mappings":"AASO,MAAMA,EAAyD,CACpEC,GAAI,kBACJC,GAAI,mBACJC,GAAI,kBACJC,GAAI,gBAIC,MAAMC,EAAoE,CAC/EJ,GAAI,mBACJC,GAAI,kBACJC,GAAI,eACJC,GAAI,uB","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as o,H as r,c as t,h as s,a as i,t as n}from"./index.js";import{g as e,i as a}from"./p-BQq26pt9.js";import{d}from"./p-DwKC_9u2.js";import{d as c}from"./p-C8U5BsJf.js";import{d as l}from"./p-BNiIyZCn.js";import{C as u}from"./p-CuwopElg.js";const b=()=>`.ds-control--lg.sc-ds-tab-group,.ds-control--lg.sc-ds-tab-group-h,.ds-control--md.sc-ds-tab-group-h,.ds-control--md.sc-ds-tab-group,.ds-control--sm.sc-ds-tab-group-h,.ds-control--sm.sc-ds-tab-group,.ds-control--xs.sc-ds-tab-group-h,.ds-control--xs.sc-ds-tab-group{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tab-group-h,.ds-control--lg.sc-ds-tab-group{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-tab-group-h,.ds-control--md.sc-ds-tab-group{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tab-group-h,.ds-control--sm.sc-ds-tab-group{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tab-group-h,.ds-control--xs.sc-ds-tab-group{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control--lg.ds-control--inset.sc-ds-tab-group-h,.ds-control--lg.ds-control--inset.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-050));--ds-control-padding-inline:calc( var(--dimension-space-100) - var(--dimension-space-025) )}.ds-control--md.ds-control--inset.sc-ds-tab-group-h,.ds-control--md.ds-control--inset.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-050));--ds-control-padding-inline:calc( var(--dimension-space-075) - var(--dimension-space-025) )}.ds-control--sm.ds-control--inset.sc-ds-tab-group-h,.ds-control--sm.ds-control--inset.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-050));--ds-control-padding-inline:calc( var(--dimension-space-050) - var(--dimension-space-025) )}.ds-control--xs.ds-control--inset.sc-ds-tab-group-h,.ds-control--xs.ds-control--inset.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-200) - var(--dimension-space-050));--ds-control-padding-inline:calc( var(--dimension-space-025) - var(--dimension-space-025) )}.ds-control--lg.ds-control--inset-double.sc-ds-tab-group-h,.ds-control--lg.ds-control--inset-double.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-100));--ds-control-padding-inline:calc( var(--dimension-space-100) - var(--dimension-space-050) )}.ds-control--md.ds-control--inset-double.sc-ds-tab-group-h,.ds-control--md.ds-control--inset-double.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-100));--ds-control-padding-inline:calc( var(--dimension-space-075) - var(--dimension-space-050) )}.ds-control--sm.ds-control--inset-double.sc-ds-tab-group-h,.ds-control--sm.ds-control--inset-double.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-100));--ds-control-padding-inline:calc( var(--dimension-space-050) - var(--dimension-space-050) )}@media (forced-colors: active){.sc-ds-tab-group:root,.sc-ds-tab-group-h,.ds-forced-colors-scope.sc-ds-tab-group{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-tab-group-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-tab-group-h,.ds-focus-ring.sc-ds-tab-group,.ds-focus-ring-inset.sc-ds-tab-group-h,.ds-focus-ring-inset.sc-ds-tab-group{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-tab-group-h:focus-visible,.ds-focus-ring.sc-ds-tab-group:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-tab-group-h:focus-visible,.ds-focus-ring-inset.sc-ds-tab-group:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-tab-group:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-tab-group-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-tab-group:root,.sc-ds-tab-group-h,.ds-forced-colors-scope.sc-ds-tab-group{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-tab-group-h,.ds-interaction-fill.sc-ds-tab-group{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before,.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before{z-index:1}.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-tab-group-h,.ds-interaction-fill--bordered.sc-ds-tab-group{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tab-group-h::before,.ds-interaction-fill--selected.sc-ds-tab-group::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tab-group-h,.ds-interaction-fill--selected.sc-ds-tab-group{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-tab-group-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-tab-group-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-tab-group-h::after,.ds-interaction-fill--grouped.sc-ds-tab-group::after,.ds-interaction-fill--grouped.sc-ds-tab-group-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tab-group:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tab-group-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tab-group:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}.ds-interaction-fill--grouped.sc-ds-tab-group-h,.ds-interaction-fill--grouped.sc-ds-tab-group{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-tab-group-h>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill.sc-ds-tab-group>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill__content.sc-ds-tab-group{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-tab-group-h,.ds-interaction-fill--on-faint.sc-ds-tab-group{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-tab-group-h,.ds-interaction-fill--on-medium.sc-ds-tab-group{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-tab-group-h,.ds-interaction-fill--on-bold.sc-ds-tab-group{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-tab-group-h,.ds-interaction-fill--on-strong.sc-ds-tab-group{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-tab-group-h,.ds-interaction-fill--on-translucent.sc-ds-tab-group{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-tab-group-h,.ds-interaction-fill--on-inverted.sc-ds-tab-group{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-tab-group-h,.ds-interaction-fill--on-media.sc-ds-tab-group{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-tab-group-h,.ds-interaction-fill--on-always-dark.sc-ds-tab-group{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-tab-group-h,.ds-interaction-fill--on-navigation.sc-ds-tab-group{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-tab-group-h::before,.ds-interaction-fill--selected.sc-ds-tab-group::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-tab-group-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-tab-group:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-tab-group:root,.sc-ds-tab-group-h,.ds-forced-colors-scope.sc-ds-tab-group{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-tab-group-h,.ds-control-inactive.sc-ds-tab-group{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-tab-group-h,.ds-control-inactive.sc-ds-tab-group{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-tab-group-h{display:block;--_tab-group-surface-border:var(--color-border-tertiary);--_tab-group-divider:var(--color-border-secondary)}.tab-group-host--on-medium.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-medium-background-tertiary);--_tab-group-divider:var(--color-border-on-medium-background-secondary)}.tab-group-host--on-bold.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-bold-background-tertiary);--_tab-group-divider:var(--color-border-on-bold-background-secondary)}.tab-group-host--on-strong.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-strong-background-tertiary);--_tab-group-divider:var(--color-border-on-strong-background-secondary)}.tab-group-host--on-translucent.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-translucent-border-tertiary);--_tab-group-divider:var(--color-translucent-border-secondary)}.tab-group-host--on-inverted.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-inverted-border-tertiary);--_tab-group-divider:var(--color-inverted-border-secondary)}.tab-group-host--on-media.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-media-border-tertiary);--_tab-group-divider:var(--color-media-border-secondary)}.tab-group-host--on-always-dark.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-always-dark-border-tertiary);--_tab-group-divider:var(--color-always-dark-border-secondary)}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--ds-control-gap);position:relative;width:max-content;max-width:100%;height:var(--ds-control-height);padding:calc(var(--dimension-space-025) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);border-radius:var(--dimension-radius-half);box-sizing:border-box}.tab-group-host--surface.sc-ds-tab-group-h .tab-list.sc-ds-tab-group{background-color:transparent}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);padding:0 var(--ds-control-padding-inline);background-color:transparent;border:none;border-radius:var(--dimension-radius-half);cursor:default;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--ds-control-height);min-width:var(--ds-control-height);box-sizing:border-box;--_dot:var(--color-foreground-bold-brand)}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--_tab-group-surface-border)}.tab-group-host--surface.sc-ds-tab-group-h .tab--selected.sc-ds-tab-group{background-color:var(--ds-interaction-active)}.tab--selected.sc-ds-tab-group:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.tab__content.sc-ds-tab-group{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);min-width:0}.tab__content--dot.sc-ds-tab-group{padding-right:var(--dimension-space-050)}.tab__label.sc-ds-tab-group{padding:0 var(--ds-control-label-inset);white-space:nowrap}.tab__icon.sc-ds-tab-group{flex-shrink:0}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;z-index:2;pointer-events:none}.on-medium.sc-ds-tab-group{color:var(--color-foreground-on-medium-background-secondary)}.on-medium.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-medium-background-primary)}.on-bold.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{color:var(--color-foreground-on-strong-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-strong-background-primary)}.on-translucent.sc-ds-tab-group{color:var(--color-translucent-foreground-secondary)}.on-translucent.tab--selected.sc-ds-tab-group{color:var(--color-translucent-foreground-primary)}.on-inverted.sc-ds-tab-group{color:var(--color-inverted-foreground-secondary)}.on-inverted.tab--selected.sc-ds-tab-group{color:var(--color-inverted-foreground-primary)}.on-media.sc-ds-tab-group{color:var(--color-media-foreground-secondary)}.on-media.tab--selected.sc-ds-tab-group{color:var(--color-media-foreground-primary)}.on-always-dark.sc-ds-tab-group{color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-stroke-width-012);align-self:center;padding:0;flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);height:var(--typography-lineheight-sm);flex-shrink:0;background-color:var(--_tab-group-divider)}`;const g=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.value="";this.tabs=[];this.size="md";this.ariaLabel=null}get selectableTabs(){return e(this.tabs)}get focusableTabId(){return this.selectableTabs.some((o=>o.id===this.value&&!o.isInactive))?this.value:this.selectableTabs.find((o=>!o.isInactive))?.id??""}selectTab(o,r){this.value=o;this.dsChange.emit(o);if(r?.focus!==false){this.focusTab(o)}}focusTab(o){const r=this.el.querySelector(`[data-tab-id="${o}"]`);r?.focus({preventScroll:true})}onValueChange(o,r){if(r===undefined||o===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const t=r.getAttribute("data-tab-id");if(t===o)return;const s=this.selectableTabs.some((r=>r.id===o&&!r.isInactive))?o:this.focusableTabId;const i=this.el.querySelector(`[data-tab-id="${s}"]`);if(i){i.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(o,r){const t=this.selectableTabs;const s=t.length;for(let i=0;i<s;i++){const n=(o+r*(i+1)+s*(i+1))%s;if(!t[n]?.isInactive)return n}return o}handleKeyDown(o){const r=this.selectableTabs;if(!r.length)return;const t=o.target?.closest("[data-tab-id]")?.dataset["tabId"];const s=r.findIndex((o=>o.id===(t??this.focusableTabId)));let i=null;if(o.key==="ArrowRight"){i=this.findEnabled(s,1)}else if(o.key==="ArrowLeft"){i=this.findEnabled(s,-1)}if(o.key==="Home"){const o=r.findIndex((o=>!o.isInactive));i=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.isInactive));i=o===-1?null:r.length-1-o}if(i!==null){o.preventDefault();const t=r[i];this.selectTab(t.id)}}getBgClass(){if(!this.background)return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const o=this.getBgClass();const r=this.focusableTabId;return s(i,{key:"1bcf5f90ae1a333dfa7b9954d74acd03f9247fa6",class:{"tab-group-host":true,[`tab-group-host--${this.size}`]:true,[`ds-control--${this.size}`]:true,"tab-group-host--surface":!!o,[`tab-group-host--${o}`]:!!o}},s("div",{key:"6d76c7d7d069fd682d774e3aee34732273f15644",role:"tablist",class:"tab-list","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.tabs.map(((t,i)=>{if(a(t)){return s("div",{key:`divider-${i}`,class:"tab-divider","aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const n=t.id===this.value;const e=t.variant??"label";const d=e==="icon"||e==="icon-label";const c=e==="label"||e==="icon-label";const l=n&&!o;return s("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":n,[`ds-control--${this.size}`]:true,"ds-control--inset":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!t.isInactive,"ds-interaction-fill--on-faint":o==="on-faint","ds-interaction-fill--on-medium":o==="on-medium","ds-interaction-fill--on-bold":o==="on-bold","ds-interaction-fill--on-strong":o==="on-strong","ds-interaction-fill--on-translucent":o==="on-translucent","ds-interaction-fill--on-inverted":o==="on-inverted","ds-interaction-fill--on-media":o==="on-media","ds-interaction-fill--on-always-dark":o==="on-always-dark","ds-control-inactive":!!t.isInactive,[o]:!!o},"aria-label":e==="icon"?t.label:undefined,"aria-selected":n,"aria-disabled":t.isInactive?"true":undefined,"aria-controls":t.panelId??undefined,disabled:t.isInactive,tabIndex:t.id===r?0:-1,onClick:()=>!t.isInactive&&this.selectTab(t.id)},s("span",{class:{tab__content:true,[`tab__content--${e}`]:true,"tab__content--dot":!!t.dot}},d&&s("ds-icon",{class:"tab__icon",name:t.icon,size:this.size,color:"inherit"}),c&&s("ds-text",{class:"tab__label",as:"span",variant:u[this.size],emphasis:l,color:"inherit"},t.label),t.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return b()}},[2,"ds-tab-group",{value:[1025],tabs:[16],size:[1],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group","ds-badge","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-tab-group":if(!customElements.get(n(o))){customElements.define(n(o),g)}break;case"ds-badge":if(!customElements.get(n(o))){d()}break;case"ds-icon":if(!customElements.get(n(o))){c()}break;case"ds-text":if(!customElements.get(n(o))){l()}break}}))}p();export{g as T,p as d};
|
|
2
|
+
//# sourceMappingURL=p-DAM4CDXT.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","size","ariaLabel","selectableTabs","getSelectableTabs","focusableTabId","some","tab","id","isInactive","find","selectTab","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","focusId","nextTab","blur","findEnabled","from","step","len","length","n","i","handleKeyDown","e","focusedId","target","closest","dataset","currentIdx","findIndex","t","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabelledby","map","index","isTabDivider","isSelected","variant","showIcon","showLabel","emphasizeLabel","type","label","panelId","disabled","tabIndex","onClick","tab__content","dot","name","icon","color","as","CONTROL_TEXT_VARIANT","emphasis","hasRing"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/control-density-inset.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n display: block;\n --_tab-group-surface-border: var(--color-border-tertiary);\n --_tab-group-divider: var(--color-border-secondary);\n}\n\n:host(.tab-group-host--on-medium) {\n --_tab-group-surface-border: var(--color-border-on-medium-background-tertiary);\n --_tab-group-divider: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.tab-group-host--on-bold) {\n --_tab-group-surface-border: var(--color-border-on-bold-background-tertiary);\n --_tab-group-divider: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.tab-group-host--on-strong) {\n --_tab-group-surface-border: var(--color-border-on-strong-background-tertiary);\n --_tab-group-divider: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.tab-group-host--on-translucent) {\n --_tab-group-surface-border: var(--color-translucent-border-tertiary);\n --_tab-group-divider: var(--color-translucent-border-secondary);\n}\n\n:host(.tab-group-host--on-inverted) {\n --_tab-group-surface-border: var(--color-inverted-border-tertiary);\n --_tab-group-divider: var(--color-inverted-border-secondary);\n}\n\n:host(.tab-group-host--on-media) {\n --_tab-group-surface-border: var(--color-media-border-tertiary);\n --_tab-group-divider: var(--color-media-border-secondary);\n}\n\n:host(.tab-group-host--on-always-dark) {\n --_tab-group-surface-border: var(--color-always-dark-border-tertiary);\n --_tab-group-divider: var(--color-always-dark-border-secondary);\n}\n\n.tab-list {\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap);\n position: relative;\n width: max-content;\n max-width: 100%;\n height: var(--ds-control-height);\n padding: calc(var(--dimension-space-025) - var(--dimension-stroke-width-012));\n background-color: var(--color-background-secondary);\n border: var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);\n border-radius: var(--dimension-radius-half);\n box-sizing: border-box;\n}\n\n:host(.tab-group-host--surface) .tab-list {\n background-color: transparent;\n}\n\n.tab {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--ds-control-gap);\n padding: 0 var(--ds-control-padding-inline);\n background-color: transparent;\n border: none;\n border-radius: var(--dimension-radius-half);\n cursor: default;\n -webkit-user-select: none;\n user-select: none;\n color: var(--color-foreground-secondary);\n transition: color var(--effect-motion-short-2);\n flex-shrink: 0;\n height: var(--ds-control-height);\n min-width: var(--ds-control-height);\n box-sizing: border-box;\n --_dot: var(--color-foreground-bold-brand);\n /* Hover/press: `.ds-interaction-fill` fills cover the complete segment. */\n}\n\n.tab--selected {\n color: var(--color-foreground-primary);\n background-color: var(--color-background-primary);\n /* Inset stroke on interaction-fill ::after — stays above hover wash. */\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--_tab-group-surface-border);\n}\n\n:host(.tab-group-host--surface) .tab--selected {\n background-color: var(--ds-interaction-active);\n}\n\n.tab--selected:not(.ds-interaction-fill) {\n box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) — applied via class in TSX. */\n\n.tab__content {\n position: relative;\n z-index: 2;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ds-control-gap);\n min-width: 0;\n}\n\n.tab__content--dot {\n padding-right: var(--dimension-space-050);\n}\n\n.tab__label {\n padding: 0 var(--ds-control-label-inset);\n white-space: nowrap;\n}\n\n.tab__icon {\n flex-shrink: 0;\n}\n\n.tab__dot {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n pointer-events: none;\n}\n\n.on-medium {\n color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.on-medium.tab--selected { color: var(--color-foreground-on-medium-background-primary); }\n\n.on-bold {\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-strong-background-primary); }\n\n.on-translucent { color: var(--color-translucent-foreground-secondary); }\n\n.on-translucent.tab--selected { color: var(--color-translucent-foreground-primary); }\n\n.on-inverted { color: var(--color-inverted-foreground-secondary); }\n\n.on-inverted.tab--selected { color: var(--color-inverted-foreground-primary); }\n\n.on-media { color: var(--color-media-foreground-secondary); }\n\n.on-media.tab--selected { color: var(--color-media-foreground-primary); }\n\n.on-always-dark {\n color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.tab-divider {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--dimension-stroke-width-012);\n align-self: center;\n padding: 0;\n flex-shrink: 0;\n pointer-events: none;\n}\n\n.tab-divider__line {\n width: var(--dimension-stroke-width-012);\n height: var(--typography-lineheight-sm);\n flex-shrink: 0;\n background-color: var(--_tab-group-divider);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabGroupItem,\n type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'always-dark';\n\nexport type TabGroupSize = 'sm' | 'md' | 'lg';\n\n@Component({\n tag: 'ds-tab-group',\n styleUrl: 'TabGroup.css',\n scoped: true,\n})\nexport class TabGroup {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop() tabs: TabGroupItem[] = [];\n /** Control density: 24px small, 32px medium, or 40px large track. */\n @Prop() size: TabGroupSize = 'md';\n @Prop() background: TabBackground | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n\n private get selectableTabs(): TabItemTab[] {\n return getSelectableTabs(this.tabs);\n }\n\n private get focusableTabId(): string {\n return this.selectableTabs.some(tab => tab.id === this.value && !tab.isInactive)\n ? this.value\n : (this.selectableTabs.find(tab => !tab.isInactive)?.id ?? '');\n }\n\n private selectTab(id: string, options?: { focus?: boolean }) {\n this.value = id;\n this.dsChange.emit(id);\n if (options?.focus !== false) {\n this.focusTab(id);\n }\n }\n\n private focusTab(id: string) {\n const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n btn?.focus({ preventScroll: true });\n }\n\n /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n @Watch('value')\n onValueChange(next: string, prev: string | undefined) {\n if (prev === undefined || next === prev) return;\n\n requestAnimationFrame(() => {\n const active = document.activeElement as HTMLElement | null;\n if (!active || !this.el.contains(active)) return;\n\n const activeId = active.getAttribute('data-tab-id');\n if (activeId === next) return;\n\n const focusId = this.selectableTabs.some(tab => tab.id === next && !tab.isInactive)\n ? next\n : this.focusableTabId;\n const nextTab = this.el.querySelector(`[data-tab-id=\"${focusId}\"]`) as HTMLElement | null;\n if (nextTab) {\n nextTab.focus({ preventScroll: true });\n } else {\n active.blur();\n }\n });\n }\n\n /**\n * Find the next non-inactive tab index relative to `from`, stepping by `step`.\n * Returns `from` unchanged if no other enabled tab exists.\n */\n private findEnabled(from: number, step: 1 | -1): number {\n const tabs = this.selectableTabs;\n const len = tabs.length;\n for (let n = 0; n < len; n++) {\n const i = (from + step * (n + 1) + len * (n + 1)) % len;\n if (!tabs[i]?.isInactive) return i;\n }\n return from;\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n const tabs = this.selectableTabs;\n if (!tabs.length) return;\n\n const focusedId = (e.target as Element | null)?.closest<HTMLElement>('[data-tab-id]')?.dataset['tabId'];\n const currentIdx = tabs.findIndex(t => t.id === (focusedId ?? this.focusableTabId));\n\n let nextIdx: number | null = null;\n\n if (e.key === 'ArrowRight') {\n nextIdx = this.findEnabled(currentIdx, 1);\n } else if (e.key === 'ArrowLeft') {\n nextIdx = this.findEnabled(currentIdx, -1);\n }\n\n if (e.key === 'Home') {\n const first = tabs.findIndex(t => !t.isInactive);\n nextIdx = first === -1 ? null : first;\n } else if (e.key === 'End') {\n const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\n nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n }\n\n if (nextIdx !== null) {\n e.preventDefault();\n const next = tabs[nextIdx];\n this.selectTab(next.id);\n }\n }\n\n private getBgClass(): string {\n if (!this.background) return '';\n if (this.background === 'always-dark') return 'on-always-dark';\n return `on-${this.background}`;\n }\n\n render() {\n const bgClass = this.getBgClass();\n const focusableTabId = this.focusableTabId;\n\n return (\n <Host\n class={{\n 'tab-group-host': true,\n [`tab-group-host--${this.size}`]: true,\n [`ds-control--${this.size}`]: true,\n 'tab-group-host--surface': !!bgClass,\n [`tab-group-host--${bgClass}`]: !!bgClass,\n }}\n >\n <div\n role=\"tablist\"\n class=\"tab-list\"\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n >\n {this.tabs.map((tab, index) => {\n if (isTabDivider(tab)) {\n return (\n <div\n key={`divider-${index}`}\n class=\"tab-divider\"\n aria-hidden=\"true\"\n >\n <div class=\"tab-divider__line\" />\n </div>\n );\n }\n\n const isSelected = tab.id === this.value;\n const variant = tab.variant ?? 'label';\n const showIcon = variant === 'icon' || variant === 'icon-label';\n const showLabel = variant === 'label' || variant === 'icon-label';\n const emphasizeLabel = isSelected && !bgClass;\n return (\n <button\n key={tab.id}\n type=\"button\"\n role=\"tab\"\n data-tab-id={tab.id}\n class={{\n tab: true,\n 'tab--selected': isSelected,\n [`ds-control--${this.size}`]: true,\n 'ds-control--inset': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': !tab.isInactive,\n 'ds-interaction-fill--on-faint': bgClass === 'on-faint',\n 'ds-interaction-fill--on-medium': bgClass === 'on-medium',\n 'ds-interaction-fill--on-bold': bgClass === 'on-bold',\n 'ds-interaction-fill--on-strong': bgClass === 'on-strong',\n 'ds-interaction-fill--on-translucent': bgClass === 'on-translucent',\n 'ds-interaction-fill--on-inverted': bgClass === 'on-inverted',\n 'ds-interaction-fill--on-media': bgClass === 'on-media',\n 'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',\n 'ds-control-inactive': !!tab.isInactive,\n [bgClass]: !!bgClass,\n }}\n aria-label={variant === 'icon' ? tab.label : undefined}\n aria-selected={isSelected}\n aria-disabled={tab.isInactive ? 'true' : undefined}\n aria-controls={tab.panelId ?? undefined}\n disabled={tab.isInactive}\n tabIndex={tab.id === focusableTabId ? 0 : -1}\n onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n >\n <span class={{\n tab__content: true,\n [`tab__content--${variant}`]: true,\n 'tab__content--dot': !!tab.dot,\n }}>\n {showIcon && (\n <ds-icon\n class=\"tab__icon\"\n name={tab.icon}\n size={this.size}\n color=\"inherit\"\n />\n )}\n {showLabel && (\n <ds-text\n class=\"tab__label\"\n as=\"span\"\n variant={CONTROL_TEXT_VARIANT[this.size]}\n emphasis={emphasizeLabel}\n color=\"inherit\"\n >\n {tab.label}\n </ds-text>\n )}\n {tab.dot && (\n <ds-badge\n class=\"tab__dot\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n </button>\n );\n })}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","size","ariaLabel","selectableTabs","getSelectableTabs","focusableTabId","some","tab","id","isInactive","find","selectTab","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","focusId","nextTab","blur","findEnabled","from","step","len","length","n","i","handleKeyDown","e","focusedId","target","closest","dataset","currentIdx","findIndex","t","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabelledby","map","index","isTabDivider","isSelected","variant","showIcon","showLabel","emphasizeLabel","type","label","panelId","disabled","tabIndex","onClick","tab__content","dot","name","icon","color","as","CONTROL_TEXT_VARIANT","emphasis","hasRing"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/control-density-inset.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n display: block;\n --_tab-group-surface-border: var(--color-border-tertiary);\n --_tab-group-divider: var(--color-border-secondary);\n}\n\n:host(.tab-group-host--on-medium) {\n --_tab-group-surface-border: var(--color-border-on-medium-background-tertiary);\n --_tab-group-divider: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.tab-group-host--on-bold) {\n --_tab-group-surface-border: var(--color-border-on-bold-background-tertiary);\n --_tab-group-divider: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.tab-group-host--on-strong) {\n --_tab-group-surface-border: var(--color-border-on-strong-background-tertiary);\n --_tab-group-divider: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.tab-group-host--on-translucent) {\n --_tab-group-surface-border: var(--color-translucent-border-tertiary);\n --_tab-group-divider: var(--color-translucent-border-secondary);\n}\n\n:host(.tab-group-host--on-inverted) {\n --_tab-group-surface-border: var(--color-inverted-border-tertiary);\n --_tab-group-divider: var(--color-inverted-border-secondary);\n}\n\n:host(.tab-group-host--on-media) {\n --_tab-group-surface-border: var(--color-media-border-tertiary);\n --_tab-group-divider: var(--color-media-border-secondary);\n}\n\n:host(.tab-group-host--on-always-dark) {\n --_tab-group-surface-border: var(--color-always-dark-border-tertiary);\n --_tab-group-divider: var(--color-always-dark-border-secondary);\n}\n\n.tab-list {\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap);\n position: relative;\n width: max-content;\n max-width: 100%;\n height: var(--ds-control-height);\n padding: calc(var(--dimension-space-025) - var(--dimension-stroke-width-012));\n background-color: var(--color-background-secondary);\n border: var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);\n border-radius: var(--dimension-radius-half);\n box-sizing: border-box;\n}\n\n:host(.tab-group-host--surface) .tab-list {\n background-color: transparent;\n}\n\n.tab {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--ds-control-gap);\n padding: 0 var(--ds-control-padding-inline);\n background-color: transparent;\n border: none;\n border-radius: var(--dimension-radius-half);\n cursor: default;\n -webkit-user-select: none;\n user-select: none;\n color: var(--color-foreground-secondary);\n transition: color var(--effect-motion-short-2);\n flex-shrink: 0;\n height: var(--ds-control-height);\n min-width: var(--ds-control-height);\n box-sizing: border-box;\n --_dot: var(--color-foreground-bold-brand);\n /* Hover/press: `.ds-interaction-fill` fills cover the complete segment. */\n}\n\n.tab--selected {\n color: var(--color-foreground-primary);\n background-color: var(--color-background-primary);\n /* Inset stroke on interaction-fill ::after — stays above hover wash. */\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--_tab-group-surface-border);\n}\n\n:host(.tab-group-host--surface) .tab--selected {\n background-color: var(--ds-interaction-active);\n}\n\n.tab--selected:not(.ds-interaction-fill) {\n box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) — applied via class in TSX. */\n\n.tab__content {\n position: relative;\n z-index: 2;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ds-control-gap);\n min-width: 0;\n}\n\n.tab__content--dot {\n padding-right: var(--dimension-space-050);\n}\n\n.tab__label {\n padding: 0 var(--ds-control-label-inset);\n white-space: nowrap;\n}\n\n.tab__icon {\n flex-shrink: 0;\n}\n\n.tab__dot {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n pointer-events: none;\n}\n\n.on-medium {\n color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.on-medium.tab--selected { color: var(--color-foreground-on-medium-background-primary); }\n\n.on-bold {\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-strong-background-primary); }\n\n.on-translucent { color: var(--color-translucent-foreground-secondary); }\n\n.on-translucent.tab--selected { color: var(--color-translucent-foreground-primary); }\n\n.on-inverted { color: var(--color-inverted-foreground-secondary); }\n\n.on-inverted.tab--selected { color: var(--color-inverted-foreground-primary); }\n\n.on-media { color: var(--color-media-foreground-secondary); }\n\n.on-media.tab--selected { color: var(--color-media-foreground-primary); }\n\n.on-always-dark {\n color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.tab-divider {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--dimension-stroke-width-012);\n align-self: center;\n padding: 0;\n flex-shrink: 0;\n pointer-events: none;\n}\n\n.tab-divider__line {\n width: var(--dimension-stroke-width-012);\n height: var(--typography-lineheight-sm);\n flex-shrink: 0;\n background-color: var(--_tab-group-divider);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabGroupItem,\n type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'always-dark';\n\nexport type TabGroupSize = 'sm' | 'md' | 'lg';\n\n@Component({\n tag: 'ds-tab-group',\n styleUrl: 'TabGroup.css',\n scoped: true,\n})\nexport class TabGroup {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop() tabs: TabGroupItem[] = [];\n /** Control density: 24px small, 32px medium, or 40px large track. */\n @Prop() size: TabGroupSize = 'md';\n @Prop() background: TabBackground | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n\n private get selectableTabs(): TabItemTab[] {\n return getSelectableTabs(this.tabs);\n }\n\n private get focusableTabId(): string {\n return this.selectableTabs.some(tab => tab.id === this.value && !tab.isInactive)\n ? this.value\n : (this.selectableTabs.find(tab => !tab.isInactive)?.id ?? '');\n }\n\n private selectTab(id: string, options?: { focus?: boolean }) {\n this.value = id;\n this.dsChange.emit(id);\n if (options?.focus !== false) {\n this.focusTab(id);\n }\n }\n\n private focusTab(id: string) {\n const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n btn?.focus({ preventScroll: true });\n }\n\n /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n @Watch('value')\n onValueChange(next: string, prev: string | undefined) {\n if (prev === undefined || next === prev) return;\n\n requestAnimationFrame(() => {\n const active = document.activeElement as HTMLElement | null;\n if (!active || !this.el.contains(active)) return;\n\n const activeId = active.getAttribute('data-tab-id');\n if (activeId === next) return;\n\n const focusId = this.selectableTabs.some(tab => tab.id === next && !tab.isInactive)\n ? next\n : this.focusableTabId;\n const nextTab = this.el.querySelector(`[data-tab-id=\"${focusId}\"]`) as HTMLElement | null;\n if (nextTab) {\n nextTab.focus({ preventScroll: true });\n } else {\n active.blur();\n }\n });\n }\n\n /**\n * Find the next non-inactive tab index relative to `from`, stepping by `step`.\n * Returns `from` unchanged if no other enabled tab exists.\n */\n private findEnabled(from: number, step: 1 | -1): number {\n const tabs = this.selectableTabs;\n const len = tabs.length;\n for (let n = 0; n < len; n++) {\n const i = (from + step * (n + 1) + len * (n + 1)) % len;\n if (!tabs[i]?.isInactive) return i;\n }\n return from;\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n const tabs = this.selectableTabs;\n if (!tabs.length) return;\n\n const focusedId = (e.target as Element | null)?.closest<HTMLElement>('[data-tab-id]')?.dataset['tabId'];\n const currentIdx = tabs.findIndex(t => t.id === (focusedId ?? this.focusableTabId));\n\n let nextIdx: number | null = null;\n\n if (e.key === 'ArrowRight') {\n nextIdx = this.findEnabled(currentIdx, 1);\n } else if (e.key === 'ArrowLeft') {\n nextIdx = this.findEnabled(currentIdx, -1);\n }\n\n if (e.key === 'Home') {\n const first = tabs.findIndex(t => !t.isInactive);\n nextIdx = first === -1 ? null : first;\n } else if (e.key === 'End') {\n const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\n nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n }\n\n if (nextIdx !== null) {\n e.preventDefault();\n const next = tabs[nextIdx];\n this.selectTab(next.id);\n }\n }\n\n private getBgClass(): string {\n if (!this.background) return '';\n if (this.background === 'always-dark') return 'on-always-dark';\n return `on-${this.background}`;\n }\n\n render() {\n const bgClass = this.getBgClass();\n const focusableTabId = this.focusableTabId;\n\n return (\n <Host\n class={{\n 'tab-group-host': true,\n [`tab-group-host--${this.size}`]: true,\n [`ds-control--${this.size}`]: true,\n 'tab-group-host--surface': !!bgClass,\n [`tab-group-host--${bgClass}`]: !!bgClass,\n }}\n >\n <div\n role=\"tablist\"\n class=\"tab-list\"\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n >\n {this.tabs.map((tab, index) => {\n if (isTabDivider(tab)) {\n return (\n <div\n key={`divider-${index}`}\n class=\"tab-divider\"\n aria-hidden=\"true\"\n >\n <div class=\"tab-divider__line\" />\n </div>\n );\n }\n\n const isSelected = tab.id === this.value;\n const variant = tab.variant ?? 'label';\n const showIcon = variant === 'icon' || variant === 'icon-label';\n const showLabel = variant === 'label' || variant === 'icon-label';\n const emphasizeLabel = isSelected && !bgClass;\n return (\n <button\n key={tab.id}\n type=\"button\"\n role=\"tab\"\n data-tab-id={tab.id}\n class={{\n tab: true,\n 'tab--selected': isSelected,\n [`ds-control--${this.size}`]: true,\n 'ds-control--inset': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': !tab.isInactive,\n 'ds-interaction-fill--on-faint': bgClass === 'on-faint',\n 'ds-interaction-fill--on-medium': bgClass === 'on-medium',\n 'ds-interaction-fill--on-bold': bgClass === 'on-bold',\n 'ds-interaction-fill--on-strong': bgClass === 'on-strong',\n 'ds-interaction-fill--on-translucent': bgClass === 'on-translucent',\n 'ds-interaction-fill--on-inverted': bgClass === 'on-inverted',\n 'ds-interaction-fill--on-media': bgClass === 'on-media',\n 'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',\n 'ds-control-inactive': !!tab.isInactive,\n [bgClass]: !!bgClass,\n }}\n aria-label={variant === 'icon' ? tab.label : undefined}\n aria-selected={isSelected}\n aria-disabled={tab.isInactive ? 'true' : undefined}\n aria-controls={tab.panelId ?? undefined}\n disabled={tab.isInactive}\n tabIndex={tab.id === focusableTabId ? 0 : -1}\n onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n >\n <span class={{\n tab__content: true,\n [`tab__content--${variant}`]: true,\n 'tab__content--dot': !!tab.dot,\n }}>\n {showIcon && (\n <ds-icon\n class=\"tab__icon\"\n name={tab.icon}\n size={this.size}\n color=\"inherit\"\n />\n )}\n {showLabel && (\n <ds-text\n class=\"tab__label\"\n as=\"span\"\n variant={CONTROL_TEXT_VARIANT[this.size]}\n emphasis={emphasizeLabel}\n color=\"inherit\"\n >\n {tab.label}\n </ds-text>\n )}\n {tab.dot && (\n <ds-badge\n class=\"tab__dot\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n </button>\n );\n })}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,h as s,a,t as c}from"./index.js";import{d as i}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as t,H as e,h as s,a,t as c}from"./index.js";import{d as i}from"./p-C8U5BsJf.js";import{d}from"./p-BNiIyZCn.js";const n=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.sc-ds-empty-state-h,.empty-state.sc-ds-empty-state,.empty-state__text.sc-ds-empty-state{box-sizing:border-box}.empty-state.sc-ds-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--dimension-space-100);height:100%;width:100%;text-align:center}.empty-state__icon.sc-ds-empty-state{flex:0 0 auto}.empty-state__text.sc-ds-empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--dimension-space-050);width:100%}`;const o=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.body=""}render(){const t=Boolean(this.heading?.trim());const e=t&&Boolean(this.icon);return s(a,{key:"1d4ba33624882c6b535092d5e9bd708cec22ed9a"},s("div",{key:"4f4f81a09e749ac38fb2cd3bb9abdad9d773e0e6",class:"empty-state"},e&&s("ds-icon",{key:"5262b1767f0a8def5b9c35a1693b3a60f8ea4f7b",class:"empty-state__icon",name:this.icon,size:"xl",color:"primary"}),s("div",{key:"6e65680480b943753f2c2687c3fbdc79ecff161c",class:"empty-state__text"},t&&s("ds-text",{key:"b12c11a8755e8df59f4ec26cc5c2da2e07a0d855",class:"empty-state__title",as:"div",variant:"text-title-small",color:"primary",align:"center"},this.heading),this.body&&s("ds-text",{key:"b633fc393de320ca7460aa92a553370b2f9561b3",class:"empty-state__body",as:"p",variant:"text-body-medium",color:"secondary",align:"center"},this.body))))}static get style(){return n()}},[2,"ds-empty-state",{icon:[1],heading:[1],body:[1]}]);function m(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(c(t))){customElements.define(c(t),o)}break;case"ds-icon":if(!customElements.get(c(t))){i()}break;case"ds-text":if(!customElements.get(c(t))){d()}break}}))}m();export{o as E,m as d};
|
|
2
|
+
//# sourceMappingURL=p-DMJEOAwP.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as i,H as e,c as n,h as o,a as r,t as s}from"./index.js";import{s as a}from"./p-DNpE0RBz.js";import{d as t}from"./p-DwKC_9u2.js";import{d}from"./p-C8U5BsJf.js";import{d as c}from"./p-BNiIyZCn.js";const l=()=>`.ds-chrome-space--sm.sc-ds-mobile-bar-nav-h,.ds-chrome-space--sm.sc-ds-mobile-bar-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-mobile-bar-nav-h,.ds-chrome-space--md.sc-ds-mobile-bar-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-mobile-bar-nav-h,.ds-chrome-space--lg.sc-ds-mobile-bar-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-mobile-bar-nav-h,.ds-chrome-row.sc-ds-mobile-bar-nav,.ds-chrome-column.sc-ds-mobile-bar-nav-h,.ds-chrome-column.sc-ds-mobile-bar-nav,.ds-chrome-grid.sc-ds-mobile-bar-nav-h,.ds-chrome-grid.sc-ds-mobile-bar-nav{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-mobile-bar-nav-h,.ds-chrome-row.sc-ds-mobile-bar-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-mobile-bar-nav-h,.ds-chrome-column.sc-ds-mobile-bar-nav{flex-direction:column}.ds-chrome-grid.sc-ds-mobile-bar-nav-h,.ds-chrome-grid.sc-ds-mobile-bar-nav{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-mobile-bar-nav:root,.sc-ds-mobile-bar-nav-h,.ds-forced-colors-scope.sc-ds-mobile-bar-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-mobile-bar-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-mobile-bar-nav-h,.ds-focus-ring.sc-ds-mobile-bar-nav,.ds-focus-ring-inset.sc-ds-mobile-bar-nav-h,.ds-focus-ring-inset.sc-ds-mobile-bar-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-bar-nav-h:focus-visible,.ds-focus-ring.sc-ds-mobile-bar-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-bar-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-bar-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-mobile-bar-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-bar-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-bar-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-bar-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-bar-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-mobile-bar-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-mobile-bar-nav:root,.sc-ds-mobile-bar-nav-h,.ds-forced-colors-scope.sc-ds-mobile-bar-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-mobile-bar-nav-h,.ds-interaction-fill.sc-ds-mobile-bar-nav{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-mobile-bar-nav-h::before,.ds-interaction-fill.sc-ds-mobile-bar-nav::before,.ds-interaction-fill.sc-ds-mobile-bar-nav-h::after,.ds-interaction-fill.sc-ds-mobile-bar-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-bar-nav-h::before,.ds-interaction-fill.sc-ds-mobile-bar-nav::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-bar-nav-h::after,.ds-interaction-fill.sc-ds-mobile-bar-nav::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-mobile-bar-nav-h,.ds-interaction-fill--bordered.sc-ds-mobile-bar-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-bar-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-bar-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-bar-nav-h,.ds-interaction-fill--selected.sc-ds-mobile-bar-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-bar-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-bar-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-bar-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-bar-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-mobile-bar-nav-h::after,.ds-interaction-fill--grouped.sc-ds-mobile-bar-nav::after,.ds-interaction-fill--grouped.sc-ds-mobile-bar-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-bar-nav:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-bar-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-bar-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}.ds-interaction-fill--grouped.sc-ds-mobile-bar-nav-h,.ds-interaction-fill--grouped.sc-ds-mobile-bar-nav{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-mobile-bar-nav-h>.ds-interaction-fill__content.sc-ds-mobile-bar-nav,.ds-interaction-fill.sc-ds-mobile-bar-nav>.ds-interaction-fill__content.sc-ds-mobile-bar-nav,.ds-interaction-fill__content.sc-ds-mobile-bar-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-bar-nav-h,.ds-interaction-fill--on-faint.sc-ds-mobile-bar-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-bar-nav-h,.ds-interaction-fill--on-medium.sc-ds-mobile-bar-nav{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-mobile-bar-nav-h,.ds-interaction-fill--on-bold.sc-ds-mobile-bar-nav{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-mobile-bar-nav-h,.ds-interaction-fill--on-strong.sc-ds-mobile-bar-nav{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-mobile-bar-nav-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-bar-nav{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-mobile-bar-nav-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-bar-nav{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-mobile-bar-nav-h,.ds-interaction-fill--on-media.sc-ds-mobile-bar-nav{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-mobile-bar-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-bar-nav{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-mobile-bar-nav-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-bar-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-mobile-bar-nav-h::after,.ds-interaction-fill.sc-ds-mobile-bar-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-mobile-bar-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-bar-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-bar-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-mobile-bar-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.sc-ds-mobile-bar-nav-h{display:block;min-width:0;background:var(--color-background-primary);color:var(--color-foreground-tertiary);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.mobile-bar-nav.sc-ds-mobile-bar-nav{justify-content:space-between;min-width:0;padding-block-end:max(var(--ds-chrome-padding), env(safe-area-inset-bottom));border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);background:var(--color-background-primary);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.mobile-bar-nav__group.sc-ds-mobile-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-100)}.mobile-bar-nav__item.sc-ds-mobile-bar-nav{appearance:none;flex:0 0 var(--dimension-size-500);width:var(--dimension-size-500);height:var(--dimension-size-500);padding:var(--dimension-space-100);border:0;border-radius:var(--dimension-radius-025);background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:default}.mobile-bar-nav__item--selected.sc-ds-mobile-bar-nav{color:var(--color-foreground-primary)}@media (hover: none) and (pointer: coarse){.mobile-bar-nav__item.ds-interaction-fill.sc-ds-mobile-bar-nav:active:not(:disabled)::after{background:transparent}.mobile-bar-nav__item--pressed.ds-interaction-fill.sc-ds-mobile-bar-nav::after,.mobile-bar-nav__item--pressed.ds-interaction-fill.sc-ds-mobile-bar-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}}.mobile-bar-nav__divider.sc-ds-mobile-bar-nav{flex:0 0 var(--dimension-stroke-width-012);width:var(--dimension-stroke-width-012);height:var(--dimension-iconography-lg);background:var(--color-border-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.mobile-bar-nav__icon.sc-ds-mobile-bar-nav{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-iconography-lg);height:var(--dimension-iconography-lg)}.mobile-bar-nav__dot.sc-ds-mobile-bar-nav{position:absolute;inset-block-start:calc(var(--dimension-space-025) * -1);inset-inline-end:calc(var(--dimension-space-025) * -1)}`;const b=120;const v=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsSheetNavToggle=n(this,"dsSheetNavToggle");this.dsDestinationChange=n(this,"dsDestinationChange");this.activeDestination="area";this.currentArea={id:"tracking",icon:"MapPage",label:"Tracking"};this.sheetNavExpanded=false;this.menuLabel="Menu";this.searchLabel="Search";this.inboxLabel="Inbox";this.messagesLabel="Messages";this.agentsLabel="Agents";this.helpLabel="Help & Support";this.searchDot=false;this.inboxDot=false;this.messagesDot=false;this.agentsDot=false;this.pressedItemId=null;this.activePointerId=null;this.pressedAt=0;this.pressClearTimer=null}disconnectedCallback(){this.clearPressedItem()}clearPressTimer(){if(this.pressClearTimer===null)return;clearTimeout(this.pressClearTimer);this.pressClearTimer=null}clearPressedItem(){this.clearPressTimer();this.activePointerId=null;this.pressedItemId=null}beginDirectPress(i,e){if(!e.isPrimary||e.pointerType==="mouse"||e.button!==0)return;this.clearPressTimer();this.activePointerId=e.pointerId;this.pressedAt=performance.now();this.pressedItemId=i;const n=e.currentTarget;try{n.setPointerCapture(e.pointerId)}catch{}}finishDirectPress(i){if(i.pointerId!==this.activePointerId)return;this.activePointerId=null;const e=Math.max(0,b-(performance.now()-this.pressedAt));this.clearPressTimer();this.pressClearTimer=setTimeout((()=>{this.pressClearTimer=null;this.pressedItemId=null}),e)}cancelDirectPress(i){if(i.pointerId!==this.activePointerId)return;this.clearPressedItem()}pressHandlers(i){return{onPointerDown:e=>this.beginDirectPress(i,e),onPointerUp:i=>this.finishDirectPress(i),onPointerCancel:i=>this.cancelDirectPress(i),onLostPointerCapture:i=>this.finishDirectPress(i)}}destinationConfig(){const i=this.activeDestination==="help"?{id:"help",icon:"CircleQuestion",label:this.helpLabel,dot:false}:{id:"area",icon:this.currentArea.icon||"MapPage",label:this.currentArea.label||"Area",dot:false};return[i,{id:"search",icon:"MagnifyingGlass",label:this.searchLabel,dot:this.searchDot},{id:"inbox",icon:"Inbox",label:this.inboxLabel,dot:this.inboxDot},{id:"messages",icon:"MessageBubbleStack",label:this.messagesLabel,dot:this.messagesDot},{id:"agents",icon:"AI",label:this.agentsLabel,dot:this.agentsDot}]}selectDestination(i){if(!a(this.activeDestination,i,this.sheetNavExpanded)){return}this.dsDestinationChange.emit({destination:i});requestAnimationFrame((()=>{void this.focusDestination(i)}))}async focusDestination(i){const e=this.el.querySelector(`#${i==="sheet-nav"?"ds-mobile-sheet-nav-trigger":`ds-mobile-bar-${i}-trigger`}`);e?.focus({preventScroll:true})}renderDestination(i){const e=!this.sheetNavExpanded&&i.id===this.activeDestination;return o("button",{id:`ds-mobile-bar-${i.id}-trigger`,type:"button",class:{"mobile-bar-nav__item":true,"mobile-bar-nav__item--selected":e,"mobile-bar-nav__item--pressed":this.pressedItemId===i.id,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-label":i.label,"aria-current":e?"page":undefined,onClick:()=>this.selectDestination(i.id),...this.pressHandlers(i.id)},o("span",{class:"mobile-bar-nav__icon ds-interaction-fill__content"},o("ds-icon",{name:i.icon,size:"lg",color:"inherit"}),i.dot&&o("ds-badge",{class:"mobile-bar-nav__dot",variant:"dot",label:"","aria-hidden":"true"})))}render(){const[i,...e]=this.destinationConfig();return o(r,{key:"d333fca78ec6ee30983fe22685ac9abb1920c4d7"},o("nav",{key:"d8a27b5f8727482a759370520c5206583aefa82a",class:"mobile-bar-nav ds-chrome-row ds-chrome-space--md","aria-label":"Primary"},o("div",{key:"625887b335d42a4cd994bad9d0a5e44e0e9478b8",class:"mobile-bar-nav__group mobile-bar-nav__group--context"},o("button",{key:"ccc7c249f176e9af0378b38b0038b8e081cb5b27",id:"ds-mobile-sheet-nav-trigger",type:"button",class:{"mobile-bar-nav__item":true,"mobile-bar-nav__item--selected":this.sheetNavExpanded,"mobile-bar-nav__item--pressed":this.pressedItemId==="sheet-nav","ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-label":this.menuLabel,"aria-expanded":String(this.sheetNavExpanded),"aria-controls":"ds-mobile-sheet-nav",onClick:()=>this.dsSheetNavToggle.emit(!this.sheetNavExpanded),...this.pressHandlers("sheet-nav")},o("span",{key:"e433d868b5d8feda91bebe57db8e4567d358b0d1",class:"mobile-bar-nav__icon ds-interaction-fill__content"},o("ds-icon",{key:"5e711ed2c28845a0bd447c0699083c72fb646b5b",name:this.sheetNavExpanded?"Cross":"Hamburger",size:"lg",color:"inherit"}))),o("span",{key:"900b8d718b7413b96f8db232a872238487ee2109",class:"mobile-bar-nav__divider","aria-hidden":"true"}),this.renderDestination(i)),o("div",{key:"e95a850ab6d93a8d2c4c7efa62c0c7c618cfc6de",class:"mobile-bar-nav__group mobile-bar-nav__group--tools"},e.map((i=>this.renderDestination(i))))))}get el(){return this}static get style(){return l()}},[2,"ds-mobile-bar-nav",{activeDestination:[1,"active-destination"],currentArea:[16],sheetNavExpanded:[4,"sheet-nav-expanded"],menuLabel:[1,"menu-label"],searchLabel:[1,"search-label"],inboxLabel:[1,"inbox-label"],messagesLabel:[1,"messages-label"],agentsLabel:[1,"agents-label"],helpLabel:[1,"help-label"],searchDot:[4,"search-dot"],inboxDot:[4,"inbox-dot"],messagesDot:[4,"messages-dot"],agentsDot:[4,"agents-dot"],pressedItemId:[32],focusDestination:[64]}]);function m(){if(typeof customElements==="undefined"){return}const i=["ds-mobile-bar-nav","ds-badge","ds-icon","ds-text"];i.forEach((i=>{switch(i){case"ds-mobile-bar-nav":if(!customElements.get(s(i))){customElements.define(s(i),v)}break;case"ds-badge":if(!customElements.get(s(i))){t()}break;case"ds-icon":if(!customElements.get(s(i))){d()}break;case"ds-text":if(!customElements.get(s(i))){c()}break}}))}m();export{v as M,m as d};
|
|
2
|
+
//# sourceMappingURL=p-DYAQVvOu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mobileBarNavCss","MINIMUM_DIRECT_PRESS_MS","MobileBarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","activeDestination","currentArea","id","icon","label","sheetNavExpanded","menuLabel","searchLabel","inboxLabel","messagesLabel","agentsLabel","helpLabel","searchDot","inboxDot","messagesDot","agentsDot","pressedItemId","activePointerId","pressedAt","pressClearTimer","disconnectedCallback","clearPressedItem","clearPressTimer","clearTimeout","beginDirectPress","itemId","event","isPrimary","pointerType","button","pointerId","performance","now","target","currentTarget","setPointerCapture","finishDirectPress","remaining","Math","max","setTimeout","cancelDirectPress","pressHandlers","onPointerDown","onPointerUp","onPointerCancel","onLostPointerCapture","destinationConfig","dot","selectDestination","destination","shouldEmitMobileDestinationChange","dsDestinationChange","emit","requestAnimationFrame","focusDestination","el","querySelector","focus","preventScroll","renderDestination","item","selected","h","type","class","undefined","onClick","name","size","color","variant","render","tools","Host","key","String","dsSheetNavToggle","map"],"sources":["src/wc/components/MobileBarNav/MobileBarNav.css?tag=ds-mobile-bar-nav&encapsulation=scoped","src/wc/components/MobileBarNav/MobileBarNav.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n display: block;\n min-width: 0;\n background: var(--color-background-primary);\n color: var(--color-foreground-tertiary);\n -webkit-user-select: none;\n user-select: none;\n -webkit-touch-callout: none;\n}\n\n.mobile-bar-nav {\n justify-content: space-between;\n min-width: 0;\n padding-block-end: max(var(--ds-chrome-padding), env(safe-area-inset-bottom));\n border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n background: var(--color-background-primary);\n -webkit-user-select: none;\n user-select: none;\n -webkit-touch-callout: none;\n}\n\n.mobile-bar-nav__group {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-100);\n}\n\n.mobile-bar-nav__item {\n appearance: none;\n flex: 0 0 var(--dimension-size-500);\n width: var(--dimension-size-500);\n height: var(--dimension-size-500);\n padding: var(--dimension-space-100);\n border: 0;\n border-radius: var(--dimension-radius-025);\n background: transparent;\n color: inherit;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: default;\n}\n\n.mobile-bar-nav__item--selected {\n color: var(--color-foreground-primary);\n}\n\n/*\n * Safari can retain its native :active state after a direct touch. On coarse\n * touch-only pointers, the component-owned class provides one deterministic\n * press frame and clears it after release/cancel.\n */\n@media (hover: none) and (pointer: coarse) {\n .mobile-bar-nav__item.ds-interaction-fill:active:not(:disabled)::after {\n background: transparent;\n }\n\n .mobile-bar-nav__item--pressed.ds-interaction-fill::after,\n .mobile-bar-nav__item--pressed.ds-interaction-fill:active:not(:disabled)::after {\n background: var(--ds-interaction-pressed);\n }\n}\n\n.mobile-bar-nav__divider {\n flex: 0 0 var(--dimension-stroke-width-012);\n width: var(--dimension-stroke-width-012);\n height: var(--dimension-iconography-lg);\n background: var(--color-border-tertiary);\n pointer-events: none;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.mobile-bar-nav__icon {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--dimension-iconography-lg);\n height: var(--dimension-iconography-lg);\n}\n\n.mobile-bar-nav__dot {\n position: absolute;\n inset-block-start: calc(var(--dimension-space-025) * -1);\n inset-inline-end: calc(var(--dimension-space-025) * -1);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport {\n shouldEmitMobileDestinationChange,\n type MobileDestination,\n} from '../../shell/shell-responsive';\nimport type { PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type { MobileBarNavDestinationDetail } from './mobile-bar-nav-types';\n\ninterface DestinationConfig {\n id: MobileDestination;\n icon: string;\n label: string;\n dot: boolean;\n}\n\nconst MINIMUM_DIRECT_PRESS_MS = 120;\n\n@Component({\n tag: 'ds-mobile-bar-nav',\n styleUrl: 'MobileBarNav.css',\n scoped: true,\n})\nexport class MobileBarNav {\n @Element() el!: HTMLElement;\n\n @Prop() activeDestination: MobileDestination = 'area';\n @Prop() currentArea: PanelNavItem = {\n id: 'tracking',\n icon: 'MapPage',\n label: 'Tracking',\n };\n @Prop() sheetNavExpanded: boolean = false;\n @Prop() menuLabel: string = 'Menu';\n @Prop() searchLabel: string = 'Search';\n @Prop() inboxLabel: string = 'Inbox';\n @Prop() messagesLabel: string = 'Messages';\n @Prop() agentsLabel: string = 'Agents';\n @Prop() helpLabel: string = 'Help & Support';\n @Prop() searchDot: boolean = false;\n @Prop() inboxDot: boolean = false;\n @Prop() messagesDot: boolean = false;\n @Prop() agentsDot: boolean = false;\n\n @State() private pressedItemId: string | null = null;\n\n @Event() dsSheetNavToggle!: EventEmitter<boolean>;\n @Event() dsDestinationChange!: EventEmitter<MobileBarNavDestinationDetail>;\n\n private activePointerId: number | null = null;\n private pressedAt = 0;\n private pressClearTimer: ReturnType<typeof setTimeout> | null = null;\n\n disconnectedCallback() {\n this.clearPressedItem();\n }\n\n private clearPressTimer() {\n if (this.pressClearTimer === null) return;\n clearTimeout(this.pressClearTimer);\n this.pressClearTimer = null;\n }\n\n private clearPressedItem() {\n this.clearPressTimer();\n this.activePointerId = null;\n this.pressedItemId = null;\n }\n\n private beginDirectPress(itemId: string, event: PointerEvent) {\n if (!event.isPrimary || event.pointerType === 'mouse' || event.button !== 0) return;\n\n this.clearPressTimer();\n this.activePointerId = event.pointerId;\n this.pressedAt = performance.now();\n this.pressedItemId = itemId;\n\n const target = event.currentTarget as HTMLElement;\n try {\n target.setPointerCapture(event.pointerId);\n } catch {\n // Pointer capture can fail if Safari has already cancelled the stream.\n }\n }\n\n private finishDirectPress(event: PointerEvent) {\n if (event.pointerId !== this.activePointerId) return;\n\n this.activePointerId = null;\n const remaining = Math.max(\n 0,\n MINIMUM_DIRECT_PRESS_MS - (performance.now() - this.pressedAt)\n );\n\n this.clearPressTimer();\n this.pressClearTimer = setTimeout(() => {\n this.pressClearTimer = null;\n this.pressedItemId = null;\n }, remaining);\n }\n\n private cancelDirectPress(event: PointerEvent) {\n if (event.pointerId !== this.activePointerId) return;\n this.clearPressedItem();\n }\n\n private pressHandlers(itemId: string) {\n return {\n onPointerDown: (event: PointerEvent) => this.beginDirectPress(itemId, event),\n onPointerUp: (event: PointerEvent) => this.finishDirectPress(event),\n onPointerCancel: (event: PointerEvent) => this.cancelDirectPress(event),\n onLostPointerCapture: (event: PointerEvent) => this.finishDirectPress(event),\n };\n }\n\n private destinationConfig(): DestinationConfig[] {\n const currentArea =\n this.activeDestination === 'help'\n ? {\n id: 'help' as const,\n icon: 'CircleQuestion',\n label: this.helpLabel,\n dot: false,\n }\n : {\n id: 'area' as const,\n icon: this.currentArea.icon || 'MapPage',\n label: this.currentArea.label || 'Area',\n dot: false,\n };\n\n return [\n currentArea,\n { id: 'search', icon: 'MagnifyingGlass', label: this.searchLabel, dot: this.searchDot },\n { id: 'inbox', icon: 'Inbox', label: this.inboxLabel, dot: this.inboxDot },\n {\n id: 'messages',\n icon: 'MessageBubbleStack',\n label: this.messagesLabel,\n dot: this.messagesDot,\n },\n { id: 'agents', icon: 'AI', label: this.agentsLabel, dot: this.agentsDot },\n ];\n }\n\n private selectDestination(destination: MobileDestination) {\n if (\n !shouldEmitMobileDestinationChange(\n this.activeDestination,\n destination,\n this.sheetNavExpanded\n )\n ) {\n return;\n }\n this.dsDestinationChange.emit({ destination });\n // Owners may replace the visible mobile stage (and transiently drop focus\n // in WebKit) while handling the controlled destination change.\n requestAnimationFrame(() => {\n void this.focusDestination(destination);\n });\n }\n\n @Method()\n async focusDestination(destination: MobileDestination | 'sheet-nav') {\n const target = this.el.querySelector<HTMLElement>(\n `#${\n destination === 'sheet-nav'\n ? 'ds-mobile-sheet-nav-trigger'\n : `ds-mobile-bar-${destination}-trigger`\n }`\n );\n target?.focus({ preventScroll: true });\n }\n\n private renderDestination(item: DestinationConfig) {\n const selected = !this.sheetNavExpanded && item.id === this.activeDestination;\n return (\n <button\n id={`ds-mobile-bar-${item.id}-trigger`}\n type=\"button\"\n class={{\n 'mobile-bar-nav__item': true,\n 'mobile-bar-nav__item--selected': selected,\n 'mobile-bar-nav__item--pressed': this.pressedItemId === item.id,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n aria-label={item.label}\n aria-current={selected ? 'page' : undefined}\n onClick={() => this.selectDestination(item.id)}\n {...this.pressHandlers(item.id)}\n >\n <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n <ds-icon name={item.icon} size=\"lg\" color=\"inherit\" />\n {item.dot && (\n <ds-badge class=\"mobile-bar-nav__dot\" variant=\"dot\" label=\"\" aria-hidden=\"true\" />\n )}\n </span>\n </button>\n );\n }\n\n render() {\n const [currentArea, ...tools] = this.destinationConfig();\n\n return (\n <Host>\n <nav class=\"mobile-bar-nav ds-chrome-row ds-chrome-space--md\" aria-label=\"Primary\">\n <div class=\"mobile-bar-nav__group mobile-bar-nav__group--context\">\n <button\n id=\"ds-mobile-sheet-nav-trigger\"\n type=\"button\"\n class={{\n 'mobile-bar-nav__item': true,\n 'mobile-bar-nav__item--selected': this.sheetNavExpanded,\n 'mobile-bar-nav__item--pressed':\n this.pressedItemId === 'sheet-nav',\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n aria-label={this.menuLabel}\n aria-expanded={String(this.sheetNavExpanded)}\n aria-controls=\"ds-mobile-sheet-nav\"\n onClick={() => this.dsSheetNavToggle.emit(!this.sheetNavExpanded)}\n {...this.pressHandlers('sheet-nav')}\n >\n <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n <ds-icon\n name={this.sheetNavExpanded ? 'Cross' : 'Hamburger'}\n size=\"lg\"\n color=\"inherit\"\n />\n </span>\n </button>\n <span class=\"mobile-bar-nav__divider\" aria-hidden=\"true\" />\n {this.renderDestination(currentArea)}\n </div>\n <div class=\"mobile-bar-nav__group mobile-bar-nav__group--tools\">\n {tools.map(item => this.renderDestination(item))}\n </div>\n </nav>\n </Host>\n );\n }\n}\n"],"mappings":"6MAAA,MAAMA,EAAkB,IAAM,woYCyB9B,MAAMC,EAA0B,I,MAOnBC,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,oJAQUC,KAAAC,kBAAuC,OACvCD,KAAAE,YAA4B,CAClCC,GAAI,WACJC,KAAM,UACNC,MAAO,YAEDL,KAAAM,iBAA4B,MAC5BN,KAAAO,UAAoB,OACpBP,KAAAQ,YAAsB,SACtBR,KAAAS,WAAqB,QACrBT,KAAAU,cAAwB,WACxBV,KAAAW,YAAsB,SACtBX,KAAAY,UAAoB,iBACpBZ,KAAAa,UAAqB,MACrBb,KAAAc,SAAoB,MACpBd,KAAAe,YAAuB,MACvBf,KAAAgB,UAAqB,MAEZhB,KAAAiB,cAA+B,KAKxCjB,KAAAkB,gBAAiC,KACjClB,KAAAmB,UAAY,EACZnB,KAAAoB,gBAAwD,IAkMjE,CAhMC,oBAAAC,GACErB,KAAKsB,kB,CAGC,eAAAC,GACN,GAAIvB,KAAKoB,kBAAoB,KAAM,OACnCI,aAAaxB,KAAKoB,iBAClBpB,KAAKoB,gBAAkB,I,CAGjB,gBAAAE,GACNtB,KAAKuB,kBACLvB,KAAKkB,gBAAkB,KACvBlB,KAAKiB,cAAgB,I,CAGf,gBAAAQ,CAAiBC,EAAgBC,GACvC,IAAKA,EAAMC,WAAaD,EAAME,cAAgB,SAAWF,EAAMG,SAAW,EAAG,OAE7E9B,KAAKuB,kBACLvB,KAAKkB,gBAAkBS,EAAMI,UAC7B/B,KAAKmB,UAAYa,YAAYC,MAC7BjC,KAAKiB,cAAgBS,EAErB,MAAMQ,EAASP,EAAMQ,cACrB,IACED,EAAOE,kBAAkBT,EAAMI,U,CAC/B,M,EAKI,iBAAAM,CAAkBV,GACxB,GAAIA,EAAMI,YAAc/B,KAAKkB,gBAAiB,OAE9ClB,KAAKkB,gBAAkB,KACvB,MAAMoB,EAAYC,KAAKC,IACrB,EACA9C,GAA2BsC,YAAYC,MAAQjC,KAAKmB,YAGtDnB,KAAKuB,kBACLvB,KAAKoB,gBAAkBqB,YAAW,KAChCzC,KAAKoB,gBAAkB,KACvBpB,KAAKiB,cAAgB,IAAI,GACxBqB,E,CAGG,iBAAAI,CAAkBf,GACxB,GAAIA,EAAMI,YAAc/B,KAAKkB,gBAAiB,OAC9ClB,KAAKsB,kB,CAGC,aAAAqB,CAAcjB,GACpB,MAAO,CACLkB,cAAgBjB,GAAwB3B,KAAKyB,iBAAiBC,EAAQC,GACtEkB,YAAclB,GAAwB3B,KAAKqC,kBAAkBV,GAC7DmB,gBAAkBnB,GAAwB3B,KAAK0C,kBAAkBf,GACjEoB,qBAAuBpB,GAAwB3B,KAAKqC,kBAAkBV,G,CAIlE,iBAAAqB,GACN,MAAM9C,EACJF,KAAKC,oBAAsB,OACvB,CACEE,GAAI,OACJC,KAAM,iBACNC,MAAOL,KAAKY,UACZqC,IAAK,OAEP,CACE9C,GAAI,OACJC,KAAMJ,KAAKE,YAAYE,MAAQ,UAC/BC,MAAOL,KAAKE,YAAYG,OAAS,OACjC4C,IAAK,OAGb,MAAO,CACL/C,EACA,CAAEC,GAAI,SAAUC,KAAM,kBAAmBC,MAAOL,KAAKQ,YAAayC,IAAKjD,KAAKa,WAC5E,CAAEV,GAAI,QAASC,KAAM,QAASC,MAAOL,KAAKS,WAAYwC,IAAKjD,KAAKc,UAChE,CACEX,GAAI,WACJC,KAAM,qBACNC,MAAOL,KAAKU,cACZuC,IAAKjD,KAAKe,aAEZ,CAAEZ,GAAI,SAAUC,KAAM,KAAMC,MAAOL,KAAKW,YAAasC,IAAKjD,KAAKgB,W,CAI3D,iBAAAkC,CAAkBC,GACxB,IACGC,EACCpD,KAAKC,kBACLkD,EACAnD,KAAKM,kBAEP,CACA,M,CAEFN,KAAKqD,oBAAoBC,KAAK,CAAEH,gBAGhCI,uBAAsB,UACfvD,KAAKwD,iBAAiBL,EAAY,G,CAK3C,sBAAMK,CAAiBL,GACrB,MAAMjB,EAASlC,KAAKyD,GAAGC,cACrB,IACEP,IAAgB,YACZ,8BACA,iBAAiBA,eAGzBjB,GAAQyB,MAAM,CAAEC,cAAe,M,CAGzB,iBAAAC,CAAkBC,GACxB,MAAMC,GAAY/D,KAAKM,kBAAoBwD,EAAK3D,KAAOH,KAAKC,kBAC5D,OACE+D,EAAA,UACE7D,GAAI,iBAAiB2D,EAAK3D,aAC1B8D,KAAK,SACLC,MAAO,CACL,uBAAwB,KACxB,iCAAkCH,EAClC,gCAAiC/D,KAAKiB,gBAAkB6C,EAAK3D,GAC7D,sBAAuB,KACvB,sBAAuB,MACxB,aACW2D,EAAKzD,MAAK,eACR0D,EAAW,OAASI,UAClCC,QAAS,IAAMpE,KAAKkD,kBAAkBY,EAAK3D,OACvCH,KAAK2C,cAAcmB,EAAK3D,KAE5B6D,EAAA,QAAME,MAAM,qDACVF,EAAA,WAASK,KAAMP,EAAK1D,KAAMkE,KAAK,KAAKC,MAAM,YACzCT,EAAKb,KACJe,EAAA,YAAUE,MAAM,sBAAsBM,QAAQ,MAAMnE,MAAM,GAAE,cAAa,U,CAOnF,MAAAoE,GACE,MAAOvE,KAAgBwE,GAAS1E,KAAKgD,oBAErC,OACEgB,EAACW,EAAI,CAAAC,IAAA,4CACHZ,EAAA,OAAAY,IAAA,2CAAKV,MAAM,mDAAkD,aAAY,WACvEF,EAAA,OAAAY,IAAA,2CAAKV,MAAM,wDACTF,EAAA,UAAAY,IAAA,2CACEzE,GAAG,8BACH8D,KAAK,SACLC,MAAO,CACL,uBAAwB,KACxB,iCAAkClE,KAAKM,iBACvC,gCACEN,KAAKiB,gBAAkB,YACzB,sBAAuB,KACvB,sBAAuB,MACxB,aACWjB,KAAKO,UAAS,gBACXsE,OAAO7E,KAAKM,kBAAiB,gBAC9B,sBACd8D,QAAS,IAAMpE,KAAK8E,iBAAiBxB,MAAMtD,KAAKM,qBAC5CN,KAAK2C,cAAc,cAEvBqB,EAAA,QAAAY,IAAA,2CAAMV,MAAM,qDACVF,EAAA,WAAAY,IAAA,2CACEP,KAAMrE,KAAKM,iBAAmB,QAAU,YACxCgE,KAAK,KACLC,MAAM,cAIZP,EAAA,QAAAY,IAAA,2CAAMV,MAAM,0BAAyB,cAAa,SACjDlE,KAAK6D,kBAAkB3D,IAE1B8D,EAAA,OAAAY,IAAA,2CAAKV,MAAM,sDACRQ,EAAMK,KAAIjB,GAAQ9D,KAAK6D,kBAAkBC,O","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["mobileBarNavCss","MINIMUM_DIRECT_PRESS_MS","MobileBarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","activeDestination","currentArea","id","icon","label","sheetNavExpanded","menuLabel","searchLabel","inboxLabel","messagesLabel","agentsLabel","helpLabel","searchDot","inboxDot","messagesDot","agentsDot","pressedItemId","activePointerId","pressedAt","pressClearTimer","disconnectedCallback","clearPressedItem","clearPressTimer","clearTimeout","beginDirectPress","itemId","event","isPrimary","pointerType","button","pointerId","performance","now","target","currentTarget","setPointerCapture","finishDirectPress","remaining","Math","max","setTimeout","cancelDirectPress","pressHandlers","onPointerDown","onPointerUp","onPointerCancel","onLostPointerCapture","destinationConfig","dot","selectDestination","destination","shouldEmitMobileDestinationChange","dsDestinationChange","emit","requestAnimationFrame","focusDestination","el","querySelector","focus","preventScroll","renderDestination","item","selected","h","type","class","undefined","onClick","name","size","color","variant","render","tools","Host","key","String","dsSheetNavToggle","map"],"sources":["src/wc/components/MobileBarNav/MobileBarNav.css?tag=ds-mobile-bar-nav&encapsulation=scoped","src/wc/components/MobileBarNav/MobileBarNav.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n display: block;\n min-width: 0;\n background: var(--color-background-primary);\n color: var(--color-foreground-tertiary);\n -webkit-user-select: none;\n user-select: none;\n -webkit-touch-callout: none;\n}\n\n.mobile-bar-nav {\n justify-content: space-between;\n min-width: 0;\n padding-block-end: max(var(--ds-chrome-padding), env(safe-area-inset-bottom));\n border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n background: var(--color-background-primary);\n -webkit-user-select: none;\n user-select: none;\n -webkit-touch-callout: none;\n}\n\n.mobile-bar-nav__group {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-100);\n}\n\n.mobile-bar-nav__item {\n appearance: none;\n flex: 0 0 var(--dimension-size-500);\n width: var(--dimension-size-500);\n height: var(--dimension-size-500);\n padding: var(--dimension-space-100);\n border: 0;\n border-radius: var(--dimension-radius-025);\n background: transparent;\n color: inherit;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: default;\n}\n\n.mobile-bar-nav__item--selected {\n color: var(--color-foreground-primary);\n}\n\n/*\n * Safari can retain its native :active state after a direct touch. On coarse\n * touch-only pointers, the component-owned class provides one deterministic\n * press frame and clears it after release/cancel.\n */\n@media (hover: none) and (pointer: coarse) {\n .mobile-bar-nav__item.ds-interaction-fill:active:not(:disabled)::after {\n background: transparent;\n }\n\n .mobile-bar-nav__item--pressed.ds-interaction-fill::after,\n .mobile-bar-nav__item--pressed.ds-interaction-fill:active:not(:disabled)::after {\n background: var(--ds-interaction-pressed);\n }\n}\n\n.mobile-bar-nav__divider {\n flex: 0 0 var(--dimension-stroke-width-012);\n width: var(--dimension-stroke-width-012);\n height: var(--dimension-iconography-lg);\n background: var(--color-border-tertiary);\n pointer-events: none;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.mobile-bar-nav__icon {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--dimension-iconography-lg);\n height: var(--dimension-iconography-lg);\n}\n\n.mobile-bar-nav__dot {\n position: absolute;\n inset-block-start: calc(var(--dimension-space-025) * -1);\n inset-inline-end: calc(var(--dimension-space-025) * -1);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport {\n shouldEmitMobileDestinationChange,\n type MobileDestination,\n} from '../../shell/shell-responsive';\nimport type { PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type { MobileBarNavDestinationDetail } from './mobile-bar-nav-types';\n\ninterface DestinationConfig {\n id: MobileDestination;\n icon: string;\n label: string;\n dot: boolean;\n}\n\nconst MINIMUM_DIRECT_PRESS_MS = 120;\n\n@Component({\n tag: 'ds-mobile-bar-nav',\n styleUrl: 'MobileBarNav.css',\n scoped: true,\n})\nexport class MobileBarNav {\n @Element() el!: HTMLElement;\n\n @Prop() activeDestination: MobileDestination = 'area';\n @Prop() currentArea: PanelNavItem = {\n id: 'tracking',\n icon: 'MapPage',\n label: 'Tracking',\n };\n @Prop() sheetNavExpanded: boolean = false;\n @Prop() menuLabel: string = 'Menu';\n @Prop() searchLabel: string = 'Search';\n @Prop() inboxLabel: string = 'Inbox';\n @Prop() messagesLabel: string = 'Messages';\n @Prop() agentsLabel: string = 'Agents';\n @Prop() helpLabel: string = 'Help & Support';\n @Prop() searchDot: boolean = false;\n @Prop() inboxDot: boolean = false;\n @Prop() messagesDot: boolean = false;\n @Prop() agentsDot: boolean = false;\n\n @State() private pressedItemId: string | null = null;\n\n @Event() dsSheetNavToggle!: EventEmitter<boolean>;\n @Event() dsDestinationChange!: EventEmitter<MobileBarNavDestinationDetail>;\n\n private activePointerId: number | null = null;\n private pressedAt = 0;\n private pressClearTimer: ReturnType<typeof setTimeout> | null = null;\n\n disconnectedCallback() {\n this.clearPressedItem();\n }\n\n private clearPressTimer() {\n if (this.pressClearTimer === null) return;\n clearTimeout(this.pressClearTimer);\n this.pressClearTimer = null;\n }\n\n private clearPressedItem() {\n this.clearPressTimer();\n this.activePointerId = null;\n this.pressedItemId = null;\n }\n\n private beginDirectPress(itemId: string, event: PointerEvent) {\n if (!event.isPrimary || event.pointerType === 'mouse' || event.button !== 0) return;\n\n this.clearPressTimer();\n this.activePointerId = event.pointerId;\n this.pressedAt = performance.now();\n this.pressedItemId = itemId;\n\n const target = event.currentTarget as HTMLElement;\n try {\n target.setPointerCapture(event.pointerId);\n } catch {\n // Pointer capture can fail if Safari has already cancelled the stream.\n }\n }\n\n private finishDirectPress(event: PointerEvent) {\n if (event.pointerId !== this.activePointerId) return;\n\n this.activePointerId = null;\n const remaining = Math.max(\n 0,\n MINIMUM_DIRECT_PRESS_MS - (performance.now() - this.pressedAt)\n );\n\n this.clearPressTimer();\n this.pressClearTimer = setTimeout(() => {\n this.pressClearTimer = null;\n this.pressedItemId = null;\n }, remaining);\n }\n\n private cancelDirectPress(event: PointerEvent) {\n if (event.pointerId !== this.activePointerId) return;\n this.clearPressedItem();\n }\n\n private pressHandlers(itemId: string) {\n return {\n onPointerDown: (event: PointerEvent) => this.beginDirectPress(itemId, event),\n onPointerUp: (event: PointerEvent) => this.finishDirectPress(event),\n onPointerCancel: (event: PointerEvent) => this.cancelDirectPress(event),\n onLostPointerCapture: (event: PointerEvent) => this.finishDirectPress(event),\n };\n }\n\n private destinationConfig(): DestinationConfig[] {\n const currentArea =\n this.activeDestination === 'help'\n ? {\n id: 'help' as const,\n icon: 'CircleQuestion',\n label: this.helpLabel,\n dot: false,\n }\n : {\n id: 'area' as const,\n icon: this.currentArea.icon || 'MapPage',\n label: this.currentArea.label || 'Area',\n dot: false,\n };\n\n return [\n currentArea,\n { id: 'search', icon: 'MagnifyingGlass', label: this.searchLabel, dot: this.searchDot },\n { id: 'inbox', icon: 'Inbox', label: this.inboxLabel, dot: this.inboxDot },\n {\n id: 'messages',\n icon: 'MessageBubbleStack',\n label: this.messagesLabel,\n dot: this.messagesDot,\n },\n { id: 'agents', icon: 'AI', label: this.agentsLabel, dot: this.agentsDot },\n ];\n }\n\n private selectDestination(destination: MobileDestination) {\n if (\n !shouldEmitMobileDestinationChange(\n this.activeDestination,\n destination,\n this.sheetNavExpanded\n )\n ) {\n return;\n }\n this.dsDestinationChange.emit({ destination });\n // Owners may replace the visible mobile stage (and transiently drop focus\n // in WebKit) while handling the controlled destination change.\n requestAnimationFrame(() => {\n void this.focusDestination(destination);\n });\n }\n\n @Method()\n async focusDestination(destination: MobileDestination | 'sheet-nav') {\n const target = this.el.querySelector<HTMLElement>(\n `#${\n destination === 'sheet-nav'\n ? 'ds-mobile-sheet-nav-trigger'\n : `ds-mobile-bar-${destination}-trigger`\n }`\n );\n target?.focus({ preventScroll: true });\n }\n\n private renderDestination(item: DestinationConfig) {\n const selected = !this.sheetNavExpanded && item.id === this.activeDestination;\n return (\n <button\n id={`ds-mobile-bar-${item.id}-trigger`}\n type=\"button\"\n class={{\n 'mobile-bar-nav__item': true,\n 'mobile-bar-nav__item--selected': selected,\n 'mobile-bar-nav__item--pressed': this.pressedItemId === item.id,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n aria-label={item.label}\n aria-current={selected ? 'page' : undefined}\n onClick={() => this.selectDestination(item.id)}\n {...this.pressHandlers(item.id)}\n >\n <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n <ds-icon name={item.icon} size=\"lg\" color=\"inherit\" />\n {item.dot && (\n <ds-badge class=\"mobile-bar-nav__dot\" variant=\"dot\" label=\"\" aria-hidden=\"true\" />\n )}\n </span>\n </button>\n );\n }\n\n render() {\n const [currentArea, ...tools] = this.destinationConfig();\n\n return (\n <Host>\n <nav class=\"mobile-bar-nav ds-chrome-row ds-chrome-space--md\" aria-label=\"Primary\">\n <div class=\"mobile-bar-nav__group mobile-bar-nav__group--context\">\n <button\n id=\"ds-mobile-sheet-nav-trigger\"\n type=\"button\"\n class={{\n 'mobile-bar-nav__item': true,\n 'mobile-bar-nav__item--selected': this.sheetNavExpanded,\n 'mobile-bar-nav__item--pressed':\n this.pressedItemId === 'sheet-nav',\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n aria-label={this.menuLabel}\n aria-expanded={String(this.sheetNavExpanded)}\n aria-controls=\"ds-mobile-sheet-nav\"\n onClick={() => this.dsSheetNavToggle.emit(!this.sheetNavExpanded)}\n {...this.pressHandlers('sheet-nav')}\n >\n <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n <ds-icon\n name={this.sheetNavExpanded ? 'Cross' : 'Hamburger'}\n size=\"lg\"\n color=\"inherit\"\n />\n </span>\n </button>\n <span class=\"mobile-bar-nav__divider\" aria-hidden=\"true\" />\n {this.renderDestination(currentArea)}\n </div>\n <div class=\"mobile-bar-nav__group mobile-bar-nav__group--tools\">\n {tools.map(item => this.renderDestination(item))}\n </div>\n </nav>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|