@ds-mo/ui 14.30.0 → 14.31.1
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 +18 -11
- package/dist/angular/ds-score.d.ts +1 -1
- package/dist/angular/ds-score.js +3 -3
- package/dist/components/ds-bar-workflow.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-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-score.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-app.js.map +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/{p-Cx2dWjaW.js → p-Bv1nQIIF.js} +2 -2
- package/dist/components/{p-CyoLh8su.js → p-C6YTSS-w.js} +2 -2
- package/dist/components/p-C6YTSS-w.js.map +1 -0
- package/dist/components/{p-B5AZd41L.js → p-DP5_kL7t.js} +2 -2
- package/dist/components/p-GwqA_Gzi.js +2 -0
- package/dist/components/p-GwqA_Gzi.js.map +1 -0
- package/dist/docs/components.json +47 -1
- package/dist/mcp-data/registry/card-overview.json +2 -2
- package/dist/mcp-data/registry/mobile-section-switcher.json +4 -3
- package/dist/mcp-data/registry/registry.json +17 -10
- package/dist/mcp-data/registry/score.json +30 -10
- package/dist/mcp-data/registry/shell-app.json +1 -1
- package/dist/mcp-data/registry/table.json +5 -5
- package/dist/styles/table.css +55 -19
- package/dist/types/components/MobileSectionSwitcher/MobileSectionSwitcher.d.ts +7 -0
- package/dist/types/components/Score/Score.d.ts +6 -1
- package/dist/types/components/Score/index.d.ts +1 -1
- package/dist/types/components/Score/score-model.d.ts +10 -3
- package/dist/types/components/Score/score-types.d.ts +2 -0
- package/dist/types/components/Table/table-model.d.ts +11 -2
- package/dist/types/components/Table/table-types.d.ts +2 -0
- package/dist/types/components.d.ts +13 -2
- package/dist/vue/ds-score.js +1 -0
- package/package.json +1 -1
- package/dist/components/p-CyoLh8su.js.map +0 -1
- package/dist/components/p-DDOuPq-N.js +0 -2
- package/dist/components/p-DDOuPq-N.js.map +0 -1
- /package/dist/components/{p-Cx2dWjaW.js.map → p-Bv1nQIIF.js.map} +0 -0
- /package/dist/components/{p-B5AZd41L.js.map → p-DP5_kL7t.js.map} +0 -0
|
@@ -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-rSC7ZUpy.js";import{d as n}from"./p-Cea7rROU.js";import{d as c}from"./p-D1pPq-y0.js";import{d as m}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-rSC7ZUpy.js";import{d as n}from"./p-Cea7rROU.js";import{d as c}from"./p-D1pPq-y0.js";import{d as m}from"./p-C6YTSS-w.js";import{d as h}from"./p-BCFpqnAg.js";import{d as l}from"./p-Bl5wd3v3.js";import{d as b}from"./p-Crd3PEUx.js";import{d as p}from"./p-BGnRFtBa.js";import{d as g}from"./p-aMyflqva.js";const u=()=>`.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-500), 1fr) minmax(0, auto) minmax( var(--dimension-size-500), 1fr );width:100%;height:calc(var(--dimension-size-500) + var(--dimension-space-200));min-width:0;background:inherit;color:inherit}.mobile-header__primary--segmented.sc-ds-mobile-header{grid-template-columns:minmax(var(--dimension-size-500), 1fr) minmax(0, 4fr) minmax(var(--dimension-size-500), 1fr)}.mobile-header__primary--segmented.sc-ds-mobile-header .mobile-header__center.sc-ds-mobile-header,.mobile-header__primary--segmented.sc-ds-mobile-header ds-tab-group.sc-ds-mobile-header{width:100%}.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__primary--inline-subsections.sc-ds-mobile-header .mobile-header__center.sc-ds-mobile-header,.mobile-header__primary--combined-subsections.sc-ds-mobile-header .mobile-header__center.sc-ds-mobile-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);width:100%}.mobile-header__combined-subsections.sc-ds-mobile-header{min-width:0;max-width:100%}.mobile-header__primary--inline-subsections.sc-ds-mobile-header .mobile-header__heading.sc-ds-mobile-header{flex:0 1 auto;width:auto}.mobile-header__inline-subsections.sc-ds-mobile-header{flex:0 1 auto;min-width:0;max-width:60%}.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 f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSectionChange=i(this,"dsSectionChange",7);this.dsSubsectionChange=i(this,"dsSubsectionChange",7);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.subsectionsPlacement="below";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=i&&this.sectionsPresentation==="segmented";const n=o&&!i&&this.subsectionsPlacement==="inline";const c=o&&!i&&this.subsectionsPlacement==="combined";const m=this.tone==="brand"?"on-bold":"primary";return a(d,{key:"fd117d95a3129ade2518fd11869a4f83b8b56837"},a("header",{key:"4ab2df3f678f37370ad5ce922fec8360dc7ca852",class:"mobile-header"},a("div",{key:"b2fc6487dfe861b2b420ac77e9e526f3bdb66d40",class:{"mobile-header__primary":true,"mobile-header__primary--segmented":t,"mobile-header__primary--inline-subsections":n,"mobile-header__primary--combined-subsections":c,"ds-chrome-grid":true,"ds-chrome-space--md":true}},a("div",{key:"7e55be2948486a2a6610242da14006af16a11ca3",class:"mobile-header__lane mobile-header__lane--leading"},a("slot",{key:"48cafba086300023aed1583ece5798afdf4bbe38",name:"leading"})),a("div",{key:"bd15f0bb804d64f7481d63ea929cf28e649f2a73",class:"mobile-header__center"},c?[a("span",{class:"mobile-header__semantic-heading",role:"heading","aria-level":this.headingLevel==="h1"?"1":"2"},this.selectedLabel),a("nav",{class:"mobile-header__combined-subsections","aria-label":this.subsectionsAriaLabel},a("ds-mobile-section-switcher",{presentation:"sheet",pageLabel:this.selectedLabel,sections:this.resolvedSubsections,value:this.subvalue,navigationLabel:this.subsectionsAriaLabel,onDsChange:this.handleSubsectionChange}))]: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,width:"fill",ariaLabel:this.sectionsAriaLabel,onDsChange:this.handleSectionChange}):a("ds-mobile-section-switcher",{presentation:o?"menu":"sheet",sections:this.resolvedSections,value:this.value,navigationLabel:this.sectionsAriaLabel,onDsChange:this.handleSectionChange})]:a("ds-text",{class:"mobile-header__heading",as:e,variant:"text-body-large",emphasis:true,color:m,lineTruncation:1},this.selectedLabel),n?this.renderSubsections():null),a("div",{key:"fa4127537acf10411cb2c57597ea95746cda81ab",class:"mobile-header__lane mobile-header__lane--trailing"},a("slot",{key:"7d3b32f29e64f30ddb50479987e8ea290e2a03c1",name:"trailing"}))),o&&!n&&!c?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))}renderSubsections(){return a("nav",{class:"mobile-header__inline-subsections","aria-label":this.subsectionsAriaLabel},a("ds-mobile-section-switcher",{sections:this.resolvedSubsections,value:this.subvalue,navigationLabel:this.subsectionsAriaLabel,onDsChange:this.handleSubsectionChange}))}static get style(){return u()}},[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"],subsectionsPlacement:[1,"subsections-placement"],tone:[513]}]);function _(){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-tag","ds-text"];e.forEach((e=>{switch(e){case"ds-mobile-header":if(!customElements.get(o(e))){customElements.define(o(e),f)}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))){m()}break;case"ds-swatch-picker":if(!customElements.get(o(e))){h()}break;case"ds-switch":if(!customElements.get(o(e))){l()}break;case"ds-tab-group":if(!customElements.get(o(e))){b()}break;case"ds-tag":if(!customElements.get(o(e))){p()}break;case"ds-text":if(!customElements.get(o(e))){g()}break}}))}_();export{f as M,_ as d};
|
|
2
|
+
//# sourceMappingURL=p-Bv1nQIIF.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as i,H as e,c as s,h as t,a as o,t as n}from"./index.js";import{g as r,i as c}from"./p-BQq26pt9.js";import{d as a}from"./p-rSC7ZUpy.js";import{d}from"./p-Cea7rROU.js";import{d as l}from"./p-D1pPq-y0.js";import{d as h}from"./p-BCFpqnAg.js";import{d as m}from"./p-Bl5wd3v3.js";import{d as b}from"./p-BGnRFtBa.js";import{d as f}from"./p-aMyflqva.js";import{a as u,T as v}from"./p-CUL5_8JM.js";function g(i,e){const s=r(i);const t=s.findIndex((i=>i.id===e));const o=t>=0?t:0;return{selectedIndex:o,selected:s[o],hasPrevious:o>0,hasNext:o<s.length-1}}const w=()=>`@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--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-section-switcher-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-section-switcher-h,.ds-focus-ring.sc-ds-mobile-section-switcher,.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h,.ds-focus-ring-inset.sc-ds-mobile-section-switcher{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-section-switcher-h:focus-visible,.ds-focus-ring.sc-ds-mobile-section-switcher: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-section-switcher-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-section-switcher{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-section-switcher-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-section-switcher:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-section-switcher: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-section-switcher-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher::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-section-switcher-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill.sc-ds-mobile-section-switcher{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-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before,.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::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-section-switcher-h,.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher{--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-section-switcher-h>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill.sc-ds-mobile-section-switcher>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill__content.sc-ds-mobile-section-switcher{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-bold.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-strong.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-mobile-section-switcher-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-mobile-section-switcher:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-mobile-section-switcher-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-mobile-section-switcher:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::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-section-switcher-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.ds-control--lg.sc-ds-mobile-section-switcher,.ds-control--lg.sc-ds-mobile-section-switcher-h,.ds-control--md.sc-ds-mobile-section-switcher-h,.ds-control--md.sc-ds-mobile-section-switcher,.ds-control--sm.sc-ds-mobile-section-switcher-h,.ds-control--sm.sc-ds-mobile-section-switcher,.ds-control--xs.sc-ds-mobile-section-switcher-h,.ds-control--xs.sc-ds-mobile-section-switcher{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-mobile-section-switcher-h,.ds-control--lg.sc-ds-mobile-section-switcher{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-mobile-section-switcher-h,.ds-control--md.sc-ds-mobile-section-switcher{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-mobile-section-switcher-h,.ds-control--sm.sc-ds-mobile-section-switcher{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-mobile-section-switcher-h,.ds-control--xs.sc-ds-mobile-section-switcher{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-mobile-section-switcher-h{display:block;min-width:0;max-width:100%;color:var(--color-foreground-primary)}.mobile-section-switcher.sc-ds-mobile-section-switcher{appearance:none;display:grid;grid-template-columns:var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);align-items:center;justify-content:center;gap:var(--dimension-space-050);max-width:100%;min-height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);border:0;border-radius:var(--dimension-radius-100);background:var(--color-background-secondary);color:inherit;box-sizing:border-box;cursor:default}.mobile-section-switcher__label.sc-ds-mobile-section-switcher{min-width:0;max-width:100%;text-align:center}.mobile-section-switcher__position.sc-ds-mobile-section-switcher{width:var(--dimension-size-050);height:var(--dimension-size-050);border-radius:var(--dimension-radius-half);background:currentColor;opacity:0}.mobile-section-switcher__position--visible.sc-ds-mobile-section-switcher{opacity:1}.mobile-section-switcher--sheet.sc-ds-mobile-section-switcher{grid-template-columns:minmax(0, auto);min-height:var(--dimension-size-500);padding-inline:var(--dimension-space-150);border-radius:var(--dimension-radius-half);background:transparent;--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.mobile-section-switcher--combined.sc-ds-mobile-section-switcher{display:flex}.mobile-section-switcher__page-label.sc-ds-mobile-section-switcher{flex:0 1 auto;min-width:0}.mobile-section-switcher__separator.sc-ds-mobile-section-switcher{flex:0 0 auto}.mobile-section-switcher--combined.sc-ds-mobile-section-switcher .mobile-section-switcher__label.sc-ds-mobile-section-switcher{flex:0 0 auto;max-width:50%}.mobile-section-sheet.sc-ds-mobile-section-switcher{position:fixed;inset:0 0 auto;width:100%;max-width:none;max-height:calc(100dvh - var(--dimension-size-500) - var(--dimension-space-200));margin:0;padding:0;border:0;border-radius:0;box-sizing:border-box;overflow:hidden;background:var(--color-background-primary);color:var(--color-foreground-secondary);box-shadow:var(--effect-elevation-elevated-floating);outline:none}.mobile-section-sheet[open].sc-ds-mobile-section-switcher{display:flex;flex-direction:column;animation:mobileSectionSheetIn var(--effect-motion-short-2) both}.mobile-section-sheet.sc-ds-mobile-section-switcher::backdrop{background:var(--color-background-shade);animation:mobileSectionShadeIn var(--effect-motion-short-2) both}.mobile-section-sheet--closing[open].sc-ds-mobile-section-switcher{animation-name:mobileSectionSheetOut}.mobile-section-sheet--closing.sc-ds-mobile-section-switcher::backdrop{animation-name:mobileSectionShadeOut}.mobile-section-sheet__items.sc-ds-mobile-section-switcher{display:flex;flex-direction:column;gap:var(--dimension-space-100);min-height:0;padding:var(--dimension-space-100);padding-block-start:max(var(--dimension-space-100), env(safe-area-inset-top, 0px));overflow-y:auto;overscroll-behavior:contain}.mobile-section-sheet__item.sc-ds-mobile-section-switcher{appearance:none;flex:0 0 auto;display:flex;align-items:center;height:var(--ds-control-height);width:100%;min-width:0;padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:0;border-radius:var(--ds-control-radius);background:transparent;color:inherit;text-align:start}.mobile-section-sheet__item[aria-current='page'].sc-ds-mobile-section-switcher{color:var(--color-foreground-primary)}.mobile-section-sheet__item.sc-ds-mobile-section-switcher:disabled{color:var(--color-foreground-tertiary)}.mobile-section-sheet__label.sc-ds-mobile-section-switcher{min-width:0;padding-inline:var(--ds-control-label-inset)}.mobile-section-sheet__divider.sc-ds-mobile-section-switcher{flex:0 0 auto;height:var(--dimension-stroke-width-012);margin-inline:var(--dimension-space-100);background:var(--color-border-tertiary)}@keyframes mobileSectionSheetIn{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes mobileSectionSheetOut{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes mobileSectionShadeIn{from{opacity:0}to{opacity:1}}@keyframes mobileSectionShadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.mobile-section-sheet[open].sc-ds-mobile-section-switcher,.mobile-section-sheet.sc-ds-mobile-section-switcher::backdrop{animation:none}}`;let p=0;const x=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=s(this,"dsChange",7);this.sections=[];this.value="";this.navigationLabel="Change page section";this.presentation="menu";this.pageLabel="";this.menuOpen=false;this.menuSurfaceOpen=false;this.initialFocusVisible=false;this.sheetClosing=false;this.focusedSection="";this.instanceId=p++;this.triggerId=`ds-mobile-section-switcher-trigger-${this.instanceId}`;this.menuId=`ds-mobile-section-switcher-menu-${this.instanceId}`;this.triggerEl=null;this.dialogEl=null;this.closeTimer=null;this.handleSheetKeyDown=i=>{if(i.key==="Escape"){i.preventDefault();i.stopPropagation();this.closeMenu();return}const e=this.selectableSections.filter((i=>!i.isInactive));if(!e.length)return;const s=Math.max(0,e.findIndex((i=>i.id===this.focusedSection)));let t;if(i.key==="ArrowDown")t=(s+1)%e.length;else if(i.key==="ArrowUp")t=(s+e.length-1)%e.length;else if(i.key==="Home")t=0;else if(i.key==="End")t=e.length-1;else if(i.key==="Tab")t=s;else if(i.key.length===1&&!i.ctrlKey&&!i.metaKey&&!i.altKey&&i.key!==" "){const o=e.findIndex(((t,o)=>e[(s+o+1)%e.length].label.toLowerCase().startsWith(i.key.toLowerCase())));if(o<0)return;t=(s+o+1)%e.length}else return;i.preventDefault();this.initialFocusVisible=true;this.focusSheetItem(e[t].id)};this.toggleMenu=i=>{if(this.selectableSections.length<=1)return;this.initialFocusVisible=i.detail===0;if(this.presentation==="sheet"){if(this.menuOpen)this.closeMenu();else{this.focusedSection=this.selectedSection?.id??"";this.menuOpen=true}return}this.menuOpen=!this.menuOpen;if(this.menuOpen)this.menuSurfaceOpen=true};this.closeMenu=()=>{this.menuOpen=false;if(this.dialogEl?.open)this.sheetClosing=true};this.handleSelect=i=>{const e=String(i.detail.value??"");const s=this.selectableSections.find((i=>i.id===e));if(!s||s.isInactive)return;this.closeMenu();if(e!==this.selectedSection?.id)this.dsChange.emit(e);requestAnimationFrame((()=>this.triggerEl?.focus()))}}componentDidLoad(){this.visibilityObserver=new ResizeObserver((()=>{if(this.dialogEl?.open&&!this.triggerEl?.getClientRects().length){this.finishSheetClose(false)}}));this.visibilityObserver.observe(this.el)}componentDidRender(){if(!this.dialogEl)return;if(this.presentation==="sheet"&&this.menuOpen&&!this.dialogEl.open){const i=this.focusedSection;this.dialogEl.showModal();this.focusSheetItem(i)}if(this.sheetClosing&&this.dialogEl.open&&!this.closeTimer){const i=u(v.motionShort2,v.animationDurationShort3);if(!i)this.finishSheetClose();else this.closeTimer=setTimeout((()=>this.finishSheetClose()),i)}}disconnectedCallback(){this.visibilityObserver?.disconnect();this.menuSurfaceOpen=false;this.finishSheetClose(false)}handlePresentationChange(){this.menuSurfaceOpen=false;this.closeMenu()}handleContextChange(){this.closeMenu()}finishSheetClose(i=true){if(this.closeTimer)clearTimeout(this.closeTimer);this.closeTimer=null;const e=this.dialogEl?.open;this.dialogEl?.close();this.menuOpen=false;this.sheetClosing=false;if(e&&i&&this.triggerEl?.getClientRects().length)this.triggerEl.focus()}focusSheetItem(i){const e=Array.from(this.dialogEl?.querySelectorAll("button")??[]);const s=e.find((e=>e.value===i&&!e.disabled))??e.find((i=>!i.disabled));if(s){this.focusedSection=s.value;s.focus()}else this.dialogEl?.focus()}get resolvedSections(){return this.sections??[]}get selectableSections(){return r(this.resolvedSections)}get selectedIndex(){return g(this.resolvedSections,this.value).selectedIndex}get selectedSection(){return this.selectableSections[this.selectedIndex]}get hasPrevious(){return g(this.resolvedSections,this.value).hasPrevious}get hasNext(){return g(this.resolvedSections,this.value).hasNext}get triggerAriaLabel(){return`${this.presentation==="sheet"&&this.pageLabel?`${this.pageLabel}. `:""}${this.navigationLabel}. Current section: ${this.selectedSection?.label??""}`}get menuSections(){const i=[];let e=[];const s=()=>{if(e.length)i.push({items:e});e=[]};for(const i of this.resolvedSections){if(c(i)){s();continue}e.push({label:i.label,value:i.id,dot:i.dot,isSelected:i.id===this.selectedSection?.id,isInactive:i.isInactive})}s();return i}handleSectionsChange(){if(this.selectableSections.length<=1){this.closeMenu();this.menuSurfaceOpen=false}else if(this.dialogEl?.open&&!this.sheetClosing)this.focusSheetItem(this.focusedSection)}renderSheet(){return t("dialog",{id:this.menuId,ref:i=>{this.dialogEl=i??null},class:{"mobile-section-sheet":true,"mobile-section-sheet--closing":this.sheetClosing},"aria-label":this.navigationLabel,tabIndex:-1,onCancel:i=>{i.preventDefault();this.closeMenu()},onKeyDown:this.handleSheetKeyDown,onClick:i=>{if(!this.dialogEl||i.target!==this.dialogEl)return;const e=this.dialogEl.getBoundingClientRect();if(i.clientY<e.top||i.clientY>e.bottom||i.clientX<e.left||i.clientX>e.right)this.closeMenu()}},t("div",{class:"mobile-section-sheet__items",role:"menu","aria-label":this.navigationLabel},this.resolvedSections.map((i=>c(i)?t("div",{class:"mobile-section-sheet__divider",role:"separator"}):t("button",{type:"button",role:"menuitem",value:i.id,disabled:i.isInactive,"aria-current":i.id===this.selectedSection?.id?"page":undefined,tabIndex:i.id===this.focusedSection?0:-1,class:{"mobile-section-sheet__item":true,"ds-control--lg":true,"ds-interaction-fill":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":this.initialFocusVisible&&i.id===this.focusedSection},onFocus:()=>{this.focusedSection=i.id},onClick:()=>{if(this.sheetClosing||i.isInactive)return;this.closeMenu();if(i.id!==this.selectedSection?.id)this.dsChange.emit(i.id)}},t("ds-text",{class:"mobile-section-sheet__label ds-interaction-fill__content",as:"span",variant:"text-body-large",color:"inherit",emphasis:i.id===this.selectedSection?.id,lineTruncation:1},i.label))))))}render(){const i=this.selectedSection;if(!i)return t(o,null);const e=this.presentation==="sheet"&&!!this.pageLabel;return t(o,null,t("button",{ref:i=>{this.triggerEl=i??null},id:this.triggerId,class:{"mobile-section-switcher":true,"mobile-section-switcher--expanded":this.menuOpen,"ds-interaction-fill--surface-open":this.menuSurfaceOpen||this.menuOpen||this.sheetClosing,"mobile-section-switcher--sheet":this.presentation==="sheet","mobile-section-switcher--combined":e,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":this.presentation==="sheet"?"dialog":"menu","aria-controls":this.menuId,"aria-expanded":String(this.menuOpen),"aria-label":this.triggerAriaLabel,onClick:this.toggleMenu},this.presentation==="menu"?t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasPrevious,"ds-interaction-fill__content":true},"aria-hidden":"true"}):null,e?[t("ds-text",{class:"mobile-section-switcher__page-label ds-interaction-fill__content",as:"span",variant:"text-body-large",emphasis:true,color:"inherit",lineTruncation:1},this.pageLabel),t("ds-text",{class:"mobile-section-switcher__separator ds-interaction-fill__content",as:"span",variant:"text-body-large",color:"inherit","aria-hidden":"true"},"·")]:null,t("ds-text",{class:"mobile-section-switcher__label ds-interaction-fill__content",as:"span",variant:this.presentation==="sheet"?"text-body-large":"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},i.label),this.presentation==="menu"?t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasNext,"ds-interaction-fill__content":true},"aria-hidden":"true"}):null),this.presentation==="sheet"||this.sheetClosing?this.renderSheet():this.selectableSections.length>1?t("ds-menu",{id:this.menuId,anchorId:this.triggerId,align:"center",menuLabel:this.navigationLabel,open:this.menuOpen,initialFocusVisible:this.initialFocusVisible,sections:this.menuSections,onDsClose:this.closeMenu,onDsAfterClose:()=>{if(!this.menuOpen)this.menuSurfaceOpen=false},onDsSelect:this.handleSelect}):null)}get el(){return this}static get watchers(){return{presentation:[{handlePresentationChange:0}],value:[{handleContextChange:0}],pageLabel:[{handleContextChange:0}],sections:[{handleSectionsChange:0}]}}static get style(){return w()}},[2,"ds-mobile-section-switcher",{sections:[16],value:[1],navigationLabel:[1,"navigation-label"],presentation:[1],pageLabel:[1,"page-label"],menuOpen:[32],menuSurfaceOpen:[32],initialFocusVisible:[32],sheetClosing:[32],focusedSection:[32]},undefined,{presentation:[{handlePresentationChange:0}],value:[{handleContextChange:0}],pageLabel:[{handleContextChange:0}],sections:[{handleSectionsChange:0}]}]);function k(){if(typeof customElements==="undefined"){return}const i=["ds-mobile-section-switcher","ds-badge","ds-icon","ds-menu","ds-swatch-picker","ds-switch","ds-tag","ds-text"];i.forEach((i=>{switch(i){case"ds-mobile-section-switcher":if(!customElements.get(n(i))){customElements.define(n(i),x)}break;case"ds-badge":if(!customElements.get(n(i))){a()}break;case"ds-icon":if(!customElements.get(n(i))){d()}break;case"ds-menu":if(!customElements.get(n(i))){l()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){h()}break;case"ds-switch":if(!customElements.get(n(i))){m()}break;case"ds-tag":if(!customElements.get(n(i))){b()}break;case"ds-text":if(!customElements.get(n(i))){f()}break}}))}k();export{x as M,k as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as i,H as e,c as s,h as t,a as o,t as n}from"./index.js";import{g as r,i as c}from"./p-BQq26pt9.js";import{d as a}from"./p-rSC7ZUpy.js";import{d}from"./p-Cea7rROU.js";import{d as l}from"./p-D1pPq-y0.js";import{d as h}from"./p-BCFpqnAg.js";import{d as m}from"./p-Bl5wd3v3.js";import{d as b}from"./p-BGnRFtBa.js";import{d as f}from"./p-aMyflqva.js";import{a as u,T as v}from"./p-CUL5_8JM.js";function g(i,e){const s=r(i);const t=s.findIndex((i=>i.id===e));const o=t>=0?t:0;return{selectedIndex:o,selected:s[o],hasPrevious:o>0,hasNext:o<s.length-1}}const w=()=>`@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--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-section-switcher-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-section-switcher-h,.ds-focus-ring.sc-ds-mobile-section-switcher,.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h,.ds-focus-ring-inset.sc-ds-mobile-section-switcher{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-section-switcher-h:focus-visible,.ds-focus-ring.sc-ds-mobile-section-switcher: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-section-switcher-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-section-switcher{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-section-switcher-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-section-switcher:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-section-switcher: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-section-switcher-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher::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-section-switcher-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill.sc-ds-mobile-section-switcher{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-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before,.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::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-section-switcher-h,.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher{--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-section-switcher-h>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill.sc-ds-mobile-section-switcher>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill__content.sc-ds-mobile-section-switcher{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-bold.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-strong.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-mobile-section-switcher-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-mobile-section-switcher:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-mobile-section-switcher-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-mobile-section-switcher:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::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-section-switcher-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.ds-control--lg.sc-ds-mobile-section-switcher,.ds-control--lg.sc-ds-mobile-section-switcher-h,.ds-control--md.sc-ds-mobile-section-switcher-h,.ds-control--md.sc-ds-mobile-section-switcher,.ds-control--sm.sc-ds-mobile-section-switcher-h,.ds-control--sm.sc-ds-mobile-section-switcher,.ds-control--xs.sc-ds-mobile-section-switcher-h,.ds-control--xs.sc-ds-mobile-section-switcher{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-mobile-section-switcher-h,.ds-control--lg.sc-ds-mobile-section-switcher{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-mobile-section-switcher-h,.ds-control--md.sc-ds-mobile-section-switcher{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-mobile-section-switcher-h,.ds-control--sm.sc-ds-mobile-section-switcher{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-mobile-section-switcher-h,.ds-control--xs.sc-ds-mobile-section-switcher{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-mobile-section-switcher-h{display:block;min-width:0;max-width:100%;color:var(--color-foreground-primary)}.mobile-section-switcher.sc-ds-mobile-section-switcher{appearance:none;display:grid;grid-template-columns:var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);align-items:center;justify-content:center;gap:var(--dimension-space-050);max-width:100%;min-height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);border:0;border-radius:var(--dimension-radius-100);background:var(--color-background-secondary);color:inherit;box-sizing:border-box;cursor:default}.mobile-section-switcher__label.sc-ds-mobile-section-switcher{min-width:0;max-width:100%;text-align:center}.mobile-section-switcher__position.sc-ds-mobile-section-switcher{width:var(--dimension-size-050);height:var(--dimension-size-050);border-radius:var(--dimension-radius-half);background:currentColor;opacity:0}.mobile-section-switcher__position--visible.sc-ds-mobile-section-switcher{opacity:1}.mobile-section-switcher--sheet.sc-ds-mobile-section-switcher{grid-template-columns:minmax(0, auto);min-height:var(--dimension-size-500);padding-inline:var(--dimension-space-150);border-radius:var(--dimension-radius-half);background:transparent;--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.mobile-section-switcher--combined.sc-ds-mobile-section-switcher{display:flex}.mobile-section-switcher__page-label.sc-ds-mobile-section-switcher{flex:0 1 auto;min-width:0}.mobile-section-switcher__separator.sc-ds-mobile-section-switcher{flex:0 0 auto}.mobile-section-switcher--combined.sc-ds-mobile-section-switcher .mobile-section-switcher__label.sc-ds-mobile-section-switcher{flex:0 0 auto;max-width:50%}.mobile-section-sheet.sc-ds-mobile-section-switcher{position:fixed;inset:0 0 auto;width:100%;max-width:none;max-height:calc(100dvh - var(--dimension-size-500) - var(--dimension-space-200));margin:0;padding:0;border:0;border-radius:0;box-sizing:border-box;overflow:visible;background:transparent;color:var(--color-foreground-secondary);outline:none}.mobile-section-sheet[open].sc-ds-mobile-section-switcher{display:flex;flex-direction:column}.mobile-section-sheet[open].sc-ds-mobile-section-switcher .mobile-section-sheet__items.sc-ds-mobile-section-switcher{animation:mobileSectionSheetIn var(--effect-motion-short-2) both}.mobile-section-sheet.sc-ds-mobile-section-switcher::backdrop{background:var(--color-background-shade);animation:mobileSectionShadeIn var(--effect-motion-short-2) both}.mobile-section-sheet--closing[open].sc-ds-mobile-section-switcher .mobile-section-sheet__items.sc-ds-mobile-section-switcher{animation-name:mobileSectionSheetOut}.mobile-section-sheet--closing.sc-ds-mobile-section-switcher::backdrop{animation-name:mobileSectionShadeOut}.mobile-section-sheet__items.sc-ds-mobile-section-switcher{display:flex;flex-direction:column;gap:var(--dimension-space-100);min-height:0;max-height:inherit;box-sizing:border-box;background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-floating);padding:var(--dimension-space-100);padding-block-start:max(var(--dimension-space-100), env(safe-area-inset-top, 0px));overflow-y:auto;overscroll-behavior:contain}.mobile-section-sheet__item.sc-ds-mobile-section-switcher{appearance:none;flex:0 0 auto;display:flex;align-items:center;height:var(--ds-control-height);width:100%;min-width:0;padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:0;border-radius:var(--ds-control-radius);background:transparent;color:inherit;text-align:start}.mobile-section-sheet__item[aria-current='page'].sc-ds-mobile-section-switcher{color:var(--color-foreground-primary)}.mobile-section-sheet__item.sc-ds-mobile-section-switcher:disabled{color:var(--color-foreground-tertiary)}.mobile-section-sheet__label.sc-ds-mobile-section-switcher{min-width:0;padding-inline:var(--ds-control-label-inset)}.mobile-section-sheet__divider.sc-ds-mobile-section-switcher{flex:0 0 auto;height:var(--dimension-stroke-width-012);margin-inline:var(--dimension-space-100);background:var(--color-border-tertiary)}@keyframes mobileSectionSheetIn{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes mobileSectionSheetOut{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes mobileSectionShadeIn{from{opacity:0}to{opacity:1}}@keyframes mobileSectionShadeOut{from{opacity:1}to{opacity:0}}.mobile-section-switcher--pointer-focus.sc-ds-mobile-section-switcher-h .ds-focus-ring-inset.sc-ds-mobile-section-switcher::after{outline:none}.mobile-section-sheet__browser-edge.sc-ds-mobile-section-switcher{position:fixed;inset:auto 0 0;height:max(var(--dimension-space-200), env(safe-area-inset-bottom, 0px));pointer-events:none;color:var(--color-background-primary);background-color:var(--_mobile-section-edge-color, var(--color-background-primary))}.mobile-section-sheet[open].sc-ds-mobile-section-switcher .mobile-section-sheet__browser-edge.sc-ds-mobile-section-switcher{animation:mobileSectionEdgeIn var(--effect-motion-short-2) both}.mobile-section-sheet--closing[open].sc-ds-mobile-section-switcher .mobile-section-sheet__browser-edge.sc-ds-mobile-section-switcher{animation-name:mobileSectionEdgeOut}@keyframes mobileSectionEdgeIn{from{background-color:var(--color-background-primary)}to{background-color:var(--_mobile-section-edge-color, var(--color-background-primary))}}@keyframes mobileSectionEdgeOut{from{background-color:var(--_mobile-section-edge-color, var(--color-background-primary))}to{background-color:var(--color-background-primary)}}@media (prefers-reduced-motion: reduce){.mobile-section-sheet[open].sc-ds-mobile-section-switcher .mobile-section-sheet__items.sc-ds-mobile-section-switcher,.mobile-section-sheet[open].sc-ds-mobile-section-switcher .mobile-section-sheet__browser-edge.sc-ds-mobile-section-switcher,.mobile-section-sheet.sc-ds-mobile-section-switcher::backdrop{animation:none}}`;let p=0;const x=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=s(this,"dsChange",7);this.sections=[];this.value="";this.navigationLabel="Change page section";this.presentation="menu";this.pageLabel="";this.menuOpen=false;this.menuSurfaceOpen=false;this.initialFocusVisible=false;this.pointerFocus=false;this.sheetClosing=false;this.focusedSection="";this.instanceId=p++;this.triggerId=`ds-mobile-section-switcher-trigger-${this.instanceId}`;this.menuId=`ds-mobile-section-switcher-menu-${this.instanceId}`;this.triggerEl=null;this.dialogEl=null;this.browserEdgeEl=null;this.browserEdgeColors="";this.closeTimer=null;this.handleDocumentKeyDown=i=>{if(["Shift","Control","Alt","Meta"].includes(i.key))return;this.pointerFocus=false};this.updateBrowserEdgeColor=()=>{if(!this.browserEdgeEl||!this.dialogEl)return;const i=getComputedStyle(this.browserEdgeEl).color;const e=getComputedStyle(this.dialogEl,"::backdrop").backgroundColor;const s=`${i}|${e}`;if(s===this.browserEdgeColors)return;const t=this.el.ownerDocument.createElement("canvas");t.width=t.height=1;const o=t.getContext("2d");if(!o)return;o.fillStyle=i;o.fillRect(0,0,1,1);o.fillStyle=e;o.fillRect(0,0,1,1);const[n,r,c]=o.getImageData(0,0,1,1).data;this.browserEdgeEl.style.setProperty("--_mobile-section-edge-color",`rgb(${n}, ${r}, ${c})`);this.browserEdgeColors=s};this.handleSheetKeyDown=i=>{if(i.key==="Escape"){i.preventDefault();i.stopPropagation();this.closeMenu();return}const e=this.selectableSections.filter((i=>!i.isInactive));if(!e.length)return;const s=Math.max(0,e.findIndex((i=>i.id===this.focusedSection)));let t;if(i.key==="ArrowDown")t=(s+1)%e.length;else if(i.key==="ArrowUp")t=(s+e.length-1)%e.length;else if(i.key==="Home")t=0;else if(i.key==="End")t=e.length-1;else if(i.key==="Tab")t=s;else if(i.key.length===1&&!i.ctrlKey&&!i.metaKey&&!i.altKey&&i.key!==" "){const o=e.findIndex(((t,o)=>e[(s+o+1)%e.length].label.toLowerCase().startsWith(i.key.toLowerCase())));if(o<0)return;t=(s+o+1)%e.length}else return;i.preventDefault();this.initialFocusVisible=true;this.focusSheetItem(e[t].id)};this.toggleMenu=i=>{if(this.selectableSections.length<=1)return;this.initialFocusVisible=i.detail===0;if(this.presentation==="sheet"){if(this.menuOpen)this.closeMenu();else{this.focusedSection=this.selectedSection?.id??"";this.menuOpen=true}return}this.menuOpen=!this.menuOpen;if(this.menuOpen)this.menuSurfaceOpen=true};this.closeMenu=()=>{this.menuOpen=false;if(this.dialogEl?.open)this.sheetClosing=true};this.handleSelect=i=>{const e=String(i.detail.value??"");const s=this.selectableSections.find((i=>i.id===e));if(!s||s.isInactive)return;this.closeMenu();if(e!==this.selectedSection?.id)this.dsChange.emit(e);requestAnimationFrame((()=>this.triggerEl?.focus()))}}componentDidLoad(){this.el.ownerDocument.addEventListener("keydown",this.handleDocumentKeyDown,true);this.visibilityObserver=new ResizeObserver((()=>{if(this.dialogEl?.open&&!this.triggerEl?.getClientRects().length){this.finishSheetClose(false)}}));this.visibilityObserver.observe(this.el)}componentDidRender(){if(!this.dialogEl)return;if(this.presentation==="sheet"&&this.menuOpen&&!this.dialogEl.open){const i=this.focusedSection;this.updateBrowserEdgeColor();this.observeBrowserEdgeTheme();this.dialogEl.showModal();this.focusSheetItem(i)}if(this.sheetClosing&&this.dialogEl.open&&!this.closeTimer){const i=u(v.motionShort2,v.animationDurationShort3);if(!i)this.finishSheetClose();else this.closeTimer=setTimeout((()=>this.finishSheetClose()),i)}}disconnectedCallback(){this.el.ownerDocument.removeEventListener("keydown",this.handleDocumentKeyDown,true);this.visibilityObserver?.disconnect();this.menuSurfaceOpen=false;this.finishSheetClose(false)}handlePresentationChange(){this.menuSurfaceOpen=false;this.closeMenu()}handleContextChange(){this.closeMenu()}finishSheetClose(i=true){if(this.closeTimer)clearTimeout(this.closeTimer);this.closeTimer=null;const e=this.dialogEl?.open;this.dialogEl?.close();this.themeObserver?.disconnect();this.menuOpen=false;this.sheetClosing=false;if(e&&i&&this.triggerEl?.getClientRects().length)this.triggerEl.focus()}observeBrowserEdgeTheme(){this.themeObserver??(this.themeObserver=new MutationObserver(this.updateBrowserEdgeColor));for(let i=this.el;i;i=i.parentElement){this.themeObserver.observe(i,{attributes:true,attributeFilter:["class","style","data-theme"]})}}focusSheetItem(i){const e=Array.from(this.dialogEl?.querySelectorAll("button")??[]);const s=e.find((e=>e.value===i&&!e.disabled))??e.find((i=>!i.disabled));if(s){this.focusedSection=s.value;s.focus()}else this.dialogEl?.focus()}get resolvedSections(){return this.sections??[]}get selectableSections(){return r(this.resolvedSections)}get selectedIndex(){return g(this.resolvedSections,this.value).selectedIndex}get selectedSection(){return this.selectableSections[this.selectedIndex]}get hasPrevious(){return g(this.resolvedSections,this.value).hasPrevious}get hasNext(){return g(this.resolvedSections,this.value).hasNext}get triggerAriaLabel(){return`${this.presentation==="sheet"&&this.pageLabel?`${this.pageLabel}. `:""}${this.navigationLabel}. Current section: ${this.selectedSection?.label??""}`}get menuSections(){const i=[];let e=[];const s=()=>{if(e.length)i.push({items:e});e=[]};for(const i of this.resolvedSections){if(c(i)){s();continue}e.push({label:i.label,value:i.id,dot:i.dot,isSelected:i.id===this.selectedSection?.id,isInactive:i.isInactive})}s();return i}handleSectionsChange(){if(this.selectableSections.length<=1){this.closeMenu();this.menuSurfaceOpen=false}else if(this.dialogEl?.open&&!this.sheetClosing)this.focusSheetItem(this.focusedSection)}renderSheet(){return t("dialog",{id:this.menuId,ref:i=>{this.dialogEl=i??null},class:{"mobile-section-sheet":true,"mobile-section-sheet--closing":this.sheetClosing},"aria-label":this.navigationLabel,tabIndex:-1,onCancel:i=>{i.preventDefault();this.closeMenu()},onKeyDown:this.handleSheetKeyDown,onClick:i=>{if(!this.dialogEl||i.target!==this.dialogEl)return;const e=this.dialogEl.getBoundingClientRect();if(i.clientY<e.top||i.clientY>e.bottom||i.clientX<e.left||i.clientX>e.right)this.closeMenu()}},t("div",{class:"mobile-section-sheet__items",role:"menu","aria-label":this.navigationLabel},this.resolvedSections.map((i=>c(i)?t("div",{class:"mobile-section-sheet__divider",role:"separator"}):t("button",{type:"button",role:"menuitem",value:i.id,disabled:i.isInactive,"aria-current":i.id===this.selectedSection?.id?"page":undefined,tabIndex:i.id===this.focusedSection?0:-1,class:{"mobile-section-sheet__item":true,"ds-control--lg":true,"ds-interaction-fill":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":this.initialFocusVisible&&i.id===this.focusedSection},onFocus:()=>{this.focusedSection=i.id},onClick:()=>{if(this.sheetClosing||i.isInactive)return;this.closeMenu();if(i.id!==this.selectedSection?.id)this.dsChange.emit(i.id)}},t("ds-text",{class:"mobile-section-sheet__label ds-interaction-fill__content",as:"span",variant:"text-body-large",color:"inherit",emphasis:i.id===this.selectedSection?.id,lineTruncation:1},i.label))))),t("div",{ref:i=>{if(this.browserEdgeEl!==i)this.browserEdgeColors="";this.browserEdgeEl=i??null},class:"mobile-section-sheet__browser-edge","aria-hidden":"true"}))}render(){const i=this.selectedSection;if(!i)return t(o,null);const e=this.presentation==="sheet"&&!!this.pageLabel;return t(o,{class:{"mobile-section-switcher--pointer-focus":this.pointerFocus},onPointerDown:()=>{this.pointerFocus=true;this.initialFocusVisible=false}},t("button",{ref:i=>{this.triggerEl=i??null},id:this.triggerId,class:{"mobile-section-switcher":true,"mobile-section-switcher--expanded":this.menuOpen,"ds-interaction-fill--surface-open":this.menuSurfaceOpen||this.menuOpen||this.sheetClosing,"mobile-section-switcher--sheet":this.presentation==="sheet","mobile-section-switcher--combined":e,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":this.presentation==="sheet"?"dialog":"menu","aria-controls":this.menuId,"aria-expanded":String(this.menuOpen),"aria-label":this.triggerAriaLabel,onClick:this.toggleMenu},this.presentation==="menu"?t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasPrevious,"ds-interaction-fill__content":true},"aria-hidden":"true"}):null,e?[t("ds-text",{class:"mobile-section-switcher__page-label ds-interaction-fill__content",as:"span",variant:"text-body-large",emphasis:true,color:"inherit",lineTruncation:1},this.pageLabel),t("ds-text",{class:"mobile-section-switcher__separator ds-interaction-fill__content",as:"span",variant:"text-body-large",color:"inherit","aria-hidden":"true"},"·")]:null,t("ds-text",{class:"mobile-section-switcher__label ds-interaction-fill__content",as:"span",variant:this.presentation==="sheet"?"text-body-large":"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},i.label),this.presentation==="menu"?t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasNext,"ds-interaction-fill__content":true},"aria-hidden":"true"}):null),this.presentation==="sheet"||this.sheetClosing?this.renderSheet():this.selectableSections.length>1?t("ds-menu",{id:this.menuId,anchorId:this.triggerId,align:"center",menuLabel:this.navigationLabel,open:this.menuOpen,initialFocusVisible:this.initialFocusVisible,sections:this.menuSections,onDsClose:this.closeMenu,onDsAfterClose:()=>{if(!this.menuOpen)this.menuSurfaceOpen=false},onDsSelect:this.handleSelect}):null)}get el(){return this}static get watchers(){return{presentation:[{handlePresentationChange:0}],value:[{handleContextChange:0}],pageLabel:[{handleContextChange:0}],sections:[{handleSectionsChange:0}]}}static get style(){return w()}},[2,"ds-mobile-section-switcher",{sections:[16],value:[1],navigationLabel:[1,"navigation-label"],presentation:[1],pageLabel:[1,"page-label"],menuOpen:[32],menuSurfaceOpen:[32],initialFocusVisible:[32],pointerFocus:[32],sheetClosing:[32],focusedSection:[32]},undefined,{presentation:[{handlePresentationChange:0}],value:[{handleContextChange:0}],pageLabel:[{handleContextChange:0}],sections:[{handleSectionsChange:0}]}]);function k(){if(typeof customElements==="undefined"){return}const i=["ds-mobile-section-switcher","ds-badge","ds-icon","ds-menu","ds-swatch-picker","ds-switch","ds-tag","ds-text"];i.forEach((i=>{switch(i){case"ds-mobile-section-switcher":if(!customElements.get(n(i))){customElements.define(n(i),x)}break;case"ds-badge":if(!customElements.get(n(i))){a()}break;case"ds-icon":if(!customElements.get(n(i))){d()}break;case"ds-menu":if(!customElements.get(n(i))){l()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){h()}break;case"ds-switch":if(!customElements.get(n(i))){m()}break;case"ds-tag":if(!customElements.get(n(i))){b()}break;case"ds-text":if(!customElements.get(n(i))){f()}break}}))}k();export{x as M,k as d};
|
|
2
|
+
//# sourceMappingURL=p-C6YTSS-w.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["resolveMobileSectionPosition","sections","value","selectable","getSelectableTabs","matchedIndex","findIndex","section","id","selectedIndex","selected","hasPrevious","hasNext","length","mobileSectionSwitcherCss","nextMobileSectionSwitcherId","MobileSectionSwitcher","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navigationLabel","presentation","pageLabel","menuOpen","menuSurfaceOpen","initialFocusVisible","pointerFocus","sheetClosing","focusedSection","instanceId","triggerId","menuId","triggerEl","dialogEl","browserEdgeEl","browserEdgeColors","closeTimer","handleDocumentKeyDown","event","includes","key","updateBrowserEdgeColor","base","getComputedStyle","color","shade","backgroundColor","colors","canvas","el","ownerDocument","createElement","width","height","context","getContext","fillStyle","fillRect","red","green","blue","getImageData","data","style","setProperty","handleSheetKeyDown","preventDefault","stopPropagation","closeMenu","selectableSections","filter","isInactive","index","Math","max","next","ctrlKey","metaKey","altKey","match","_","offset","label","toLowerCase","startsWith","focusSheetItem","toggleMenu","detail","selectedSection","open","handleSelect","String","find","candidate","dsChange","emit","requestAnimationFrame","focus","componentDidLoad","addEventListener","visibilityObserver","ResizeObserver","getClientRects","finishSheetClose","observe","componentDidRender","initialSection","observeBrowserEdgeTheme","showModal","duration","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort2","animationDurationShort3","setTimeout","disconnectedCallback","removeEventListener","disconnect","handlePresentationChange","handleContextChange","restoreFocus","clearTimeout","wasOpen","close","themeObserver","MutationObserver","ancestor","parentElement","attributes","attributeFilter","buttons","Array","from","querySelectorAll","button","item","disabled","resolvedSections","triggerAriaLabel","menuSections","groups","items","commit","push","isTabDivider","dot","isSelected","handleSectionsChange","renderSheet","h","ref","element","class","tabIndex","onCancel","onKeyDown","onClick","target","rect","getBoundingClientRect","clientY","top","bottom","clientX","left","right","role","map","type","undefined","onFocus","as","variant","emphasis","lineTruncation","render","Host","combined","onPointerDown","anchorId","align","menuLabel","onDsClose","onDsAfterClose","onDsSelect"],"sources":["src/wc/components/MobileSectionSwitcher/mobile-section-switcher-utils.ts","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.css?tag=ds-mobile-section-switcher&encapsulation=scoped","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.tsx"],"sourcesContent":["import { getSelectableTabs, type TabItem, type TabItemTab } from '../TabGroup/tab-item-utils';\n\nexport interface MobileSectionPosition {\n selectedIndex: number;\n selected?: TabItemTab;\n hasPrevious: boolean;\n hasNext: boolean;\n}\n\n/** Resolve ordered selectable neighbors while ignoring visual divider entries. */\nexport function resolveMobileSectionPosition(\n sections: TabItem[],\n value: string\n): MobileSectionPosition {\n const selectable = getSelectableTabs(sections);\n const matchedIndex = selectable.findIndex(section => section.id === value);\n const selectedIndex = matchedIndex >= 0 ? matchedIndex : 0;\n return {\n selectedIndex,\n selected: selectable[selectedIndex],\n hasPrevious: selectedIndex > 0,\n hasNext: selectedIndex < selectable.length - 1,\n };\n}\n","@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-density.css';\n\n:host {\n display: block;\n min-width: 0;\n max-width: 100%;\n color: var(--color-foreground-primary);\n}\n\n.mobile-section-switcher {\n appearance: none;\n display: grid;\n grid-template-columns: var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-050);\n max-width: 100%;\n min-height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n border: 0;\n border-radius: var(--dimension-radius-100);\n background: var(--color-background-secondary);\n color: inherit;\n box-sizing: border-box;\n cursor: default;\n}\n\n.mobile-section-switcher__label {\n min-width: 0;\n max-width: 100%;\n text-align: center;\n}\n\n.mobile-section-switcher__position {\n width: var(--dimension-size-050);\n height: var(--dimension-size-050);\n border-radius: var(--dimension-radius-half);\n background: currentColor;\n opacity: 0;\n}\n\n.mobile-section-switcher__position--visible {\n opacity: 1;\n}\n\n.mobile-section-switcher--sheet {\n grid-template-columns: minmax(0, auto);\n min-height: var(--dimension-size-500);\n padding-inline: var(--dimension-space-150);\n border-radius: var(--dimension-radius-half);\n background: transparent;\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--color-border-tertiary);\n}\n\n.mobile-section-switcher--combined {\n display: flex;\n}\n\n.mobile-section-switcher__page-label {\n flex: 0 1 auto;\n min-width: 0;\n}\n\n.mobile-section-switcher__separator {\n flex: 0 0 auto;\n}\n\n.mobile-section-switcher--combined .mobile-section-switcher__label {\n flex: 0 0 auto;\n max-width: 50%;\n}\n\n.mobile-section-sheet {\n position: fixed;\n inset: 0 0 auto;\n width: 100%;\n max-width: none;\n max-height: calc(100dvh - var(--dimension-size-500) - var(--dimension-space-200));\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 0;\n box-sizing: border-box;\n overflow: visible;\n background: transparent;\n color: var(--color-foreground-secondary);\n outline: none;\n}\n\n.mobile-section-sheet[open] {\n display: flex;\n flex-direction: column;\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__items {\n animation: mobileSectionSheetIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet::backdrop {\n background: var(--color-background-shade);\n animation: mobileSectionShadeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__items {\n animation-name: mobileSectionSheetOut;\n}\n\n.mobile-section-sheet--closing::backdrop {\n animation-name: mobileSectionShadeOut;\n}\n\n.mobile-section-sheet__items {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-100);\n min-height: 0;\n max-height: inherit;\n box-sizing: border-box;\n background: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-floating);\n padding: var(--dimension-space-100);\n padding-block-start: max(var(--dimension-space-100), env(safe-area-inset-top, 0px));\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n\n.mobile-section-sheet__item {\n appearance: none;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n height: var(--ds-control-height);\n width: 100%;\n min-width: 0;\n padding: 0 var(--ds-control-padding-inline);\n box-sizing: border-box;\n border: 0;\n border-radius: var(--ds-control-radius);\n background: transparent;\n color: inherit;\n text-align: start;\n}\n\n.mobile-section-sheet__item[aria-current='page'] {\n color: var(--color-foreground-primary);\n}\n\n.mobile-section-sheet__item:disabled {\n color: var(--color-foreground-tertiary);\n}\n\n.mobile-section-sheet__label {\n min-width: 0;\n padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-section-sheet__divider {\n flex: 0 0 auto;\n height: var(--dimension-stroke-width-012);\n margin-inline: var(--dimension-space-100);\n background: var(--color-border-tertiary);\n}\n\n@keyframes mobileSectionSheetIn {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes mobileSectionSheetOut {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n}\n\n@keyframes mobileSectionShadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes mobileSectionShadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n/* Safari can preserve :focus-visible across modal entry and focus return after\n * a tap. Track the actual input, while leaving focus and keyboard access intact. */\n:host(.mobile-section-switcher--pointer-focus) .ds-focus-ring-inset::after {\n outline: none;\n}\n\n/* Keep this opaque strip in the modal top layer, outside the moving sheet.\n * Safari samples fixed edge backgrounds to tint its browser controls. */\n.mobile-section-sheet__browser-edge {\n position: fixed;\n inset: auto 0 0;\n height: max(var(--dimension-space-200), env(safe-area-inset-bottom, 0px));\n pointer-events: none;\n color: var(--color-background-primary);\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__browser-edge {\n animation: mobileSectionEdgeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__browser-edge {\n animation-name: mobileSectionEdgeOut;\n}\n\n/* Animate the opaque color, not opacity: the backdrop is already fading below. */\n@keyframes mobileSectionEdgeIn {\n from {\n background-color: var(--color-background-primary);\n }\n to {\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n }\n}\n\n@keyframes mobileSectionEdgeOut {\n from {\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n }\n to {\n background-color: var(--color-background-primary);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .mobile-section-sheet[open] .mobile-section-sheet__items,\n .mobile-section-sheet[open] .mobile-section-sheet__browser-edge,\n .mobile-section-sheet::backdrop {\n animation: none;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\nimport { resolveMobileSectionPosition } from './mobile-section-switcher-utils';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nlet nextMobileSectionSwitcherId = 0;\n\n@Component({\n tag: 'ds-mobile-section-switcher',\n styleUrl: 'MobileSectionSwitcher.css',\n scoped: true,\n})\nexport class MobileSectionSwitcher {\n @Element() el!: HTMLElement;\n\n /** Ordered controlled sections. Divider entries group the popup menu. */\n @Prop() sections: TabItem[] = [];\n /** Controlled selected section id. */\n @Prop() value: string = '';\n /** Accessible name for the section chooser. */\n @Prop() navigationLabel: string = 'Change page section';\n /** Anchored local-view menu or viewport-edge sheet for primary page sections. */\n @Prop() presentation: 'menu' | 'sheet' = 'menu';\n /** Stable page identity shown before the selected section in a sheet trigger. */\n @Prop() pageLabel: string = '';\n\n /** Selection intent. The route, tool, or workflow owner updates `value`. */\n @Event() dsChange!: EventEmitter<string>;\n\n @State() private menuOpen = false;\n @State() private menuSurfaceOpen = false;\n @State() private initialFocusVisible = false;\n @State() private pointerFocus = false;\n @State() private sheetClosing = false;\n @State() private focusedSection = '';\n\n private readonly instanceId = nextMobileSectionSwitcherId++;\n private readonly triggerId = `ds-mobile-section-switcher-trigger-${this.instanceId}`;\n private readonly menuId = `ds-mobile-section-switcher-menu-${this.instanceId}`;\n private triggerEl: HTMLButtonElement | null = null;\n private dialogEl: HTMLDialogElement | null = null;\n private browserEdgeEl: HTMLDivElement | null = null;\n private browserEdgeColors = '';\n private themeObserver?: MutationObserver;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private visibilityObserver?: ResizeObserver;\n\n private readonly handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (['Shift', 'Control', 'Alt', 'Meta'].includes(event.key)) return;\n this.pointerFocus = false;\n };\n\n componentDidLoad() {\n this.el.ownerDocument.addEventListener('keydown', this.handleDocumentKeyDown, true);\n this.visibilityObserver = new ResizeObserver(() => {\n if (this.dialogEl?.open && !this.triggerEl?.getClientRects().length) {\n this.finishSheetClose(false);\n }\n });\n this.visibilityObserver.observe(this.el);\n }\n\n componentDidRender() {\n if (!this.dialogEl) return;\n if (this.presentation === 'sheet' && this.menuOpen && !this.dialogEl.open) {\n const initialSection = this.focusedSection;\n this.updateBrowserEdgeColor();\n this.observeBrowserEdgeTheme();\n this.dialogEl.showModal();\n this.focusSheetItem(initialSection);\n }\n if (this.sheetClosing && this.dialogEl.open && !this.closeTimer) {\n const duration = resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort2,\n TOKEN_DEFAULTS.animationDurationShort3\n );\n if (!duration) this.finishSheetClose();\n else this.closeTimer = setTimeout(() => this.finishSheetClose(), duration);\n }\n }\n\n disconnectedCallback() {\n this.el.ownerDocument.removeEventListener('keydown', this.handleDocumentKeyDown, true);\n this.visibilityObserver?.disconnect();\n this.menuSurfaceOpen = false;\n this.finishSheetClose(false);\n }\n\n @Watch('presentation')\n handlePresentationChange() {\n this.menuSurfaceOpen = false;\n this.closeMenu();\n }\n\n @Watch('value')\n @Watch('pageLabel')\n handleContextChange() {\n this.closeMenu();\n }\n\n private finishSheetClose(restoreFocus = true) {\n if (this.closeTimer) clearTimeout(this.closeTimer);\n this.closeTimer = null;\n const wasOpen = this.dialogEl?.open;\n this.dialogEl?.close();\n this.themeObserver?.disconnect();\n this.menuOpen = false;\n this.sheetClosing = false;\n if (wasOpen && restoreFocus && this.triggerEl?.getClientRects().length) this.triggerEl.focus();\n }\n\n private updateBrowserEdgeColor = () => {\n if (!this.browserEdgeEl || !this.dialogEl) return;\n const base = getComputedStyle(this.browserEdgeEl).color;\n const shade = getComputedStyle(this.dialogEl, '::backdrop').backgroundColor;\n const colors = `${base}|${shade}`;\n if (colors === this.browserEdgeColors) return;\n // Let the browser resolve token colors, including alpha and non-sRGB syntax,\n // then flatten the shade over the bar into the opaque color Safari samples.\n const canvas = this.el.ownerDocument.createElement('canvas');\n canvas.width = canvas.height = 1;\n const context = canvas.getContext('2d');\n if (!context) return;\n context.fillStyle = base;\n context.fillRect(0, 0, 1, 1);\n context.fillStyle = shade;\n context.fillRect(0, 0, 1, 1);\n const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;\n this.browserEdgeEl.style.setProperty(\n '--_mobile-section-edge-color',\n `rgb(${red}, ${green}, ${blue})`\n );\n this.browserEdgeColors = colors;\n };\n\n private observeBrowserEdgeTheme() {\n this.themeObserver ??= new MutationObserver(this.updateBrowserEdgeColor);\n // Token themes are inherited from the page or a containing theme scope.\n for (let ancestor: HTMLElement | null = this.el; ancestor; ancestor = ancestor.parentElement) {\n this.themeObserver.observe(ancestor, {\n attributes: true,\n attributeFilter: ['class', 'style', 'data-theme'],\n });\n }\n }\n\n private focusSheetItem(id: string) {\n const buttons = Array.from(this.dialogEl?.querySelectorAll<HTMLButtonElement>('button') ?? []);\n const button =\n buttons.find(item => item.value === id && !item.disabled) ??\n buttons.find(item => !item.disabled);\n if (button) {\n this.focusedSection = button.value;\n button.focus();\n } else this.dialogEl?.focus();\n }\n\n private handleSheetKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n this.closeMenu();\n return;\n }\n const sections = this.selectableSections.filter(section => !section.isInactive);\n if (!sections.length) return;\n const index = Math.max(\n 0,\n sections.findIndex(section => section.id === this.focusedSection)\n );\n let next: number;\n if (event.key === 'ArrowDown') next = (index + 1) % sections.length;\n else if (event.key === 'ArrowUp') next = (index + sections.length - 1) % sections.length;\n else if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = sections.length - 1;\n else if (event.key === 'Tab') next = index;\n else if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey &&\n event.key !== ' '\n ) {\n const match = sections.findIndex((_, offset) =>\n sections[(index + offset + 1) % sections.length].label\n .toLowerCase()\n .startsWith(event.key.toLowerCase())\n );\n if (match < 0) return;\n next = (index + match + 1) % sections.length;\n } else return;\n event.preventDefault();\n this.initialFocusVisible = true;\n this.focusSheetItem(sections[next].id);\n };\n\n private get resolvedSections(): TabItem[] {\n return this.sections ?? [];\n }\n\n private get selectableSections(): TabItemTab[] {\n return getSelectableTabs(this.resolvedSections);\n }\n\n private get selectedIndex(): number {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).selectedIndex;\n }\n\n private get selectedSection(): TabItemTab | undefined {\n return this.selectableSections[this.selectedIndex];\n }\n\n private get hasPrevious(): boolean {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).hasPrevious;\n }\n\n private get hasNext(): boolean {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).hasNext;\n }\n\n private get triggerAriaLabel(): string {\n return `${this.presentation === 'sheet' && this.pageLabel ? `${this.pageLabel}. ` : ''}${this.navigationLabel}. Current section: ${this.selectedSection?.label ?? ''}`;\n }\n\n private get menuSections(): MenuSection[] {\n const groups: MenuSection[] = [];\n let items: MenuItemData[] = [];\n const commit = () => {\n if (items.length) groups.push({ items });\n items = [];\n };\n\n for (const section of this.resolvedSections) {\n if (isTabDivider(section)) {\n commit();\n continue;\n }\n items.push({\n label: section.label,\n value: section.id,\n dot: section.dot,\n isSelected: section.id === this.selectedSection?.id,\n isInactive: section.isInactive,\n });\n }\n commit();\n return groups;\n }\n\n @Watch('sections')\n handleSectionsChange() {\n if (this.selectableSections.length <= 1) {\n this.closeMenu();\n this.menuSurfaceOpen = false;\n } else if (this.dialogEl?.open && !this.sheetClosing) this.focusSheetItem(this.focusedSection);\n }\n\n private toggleMenu = (event: MouseEvent) => {\n if (this.selectableSections.length <= 1) return;\n this.initialFocusVisible = event.detail === 0;\n if (this.presentation === 'sheet') {\n if (this.menuOpen) this.closeMenu();\n else {\n this.focusedSection = this.selectedSection?.id ?? '';\n this.menuOpen = true;\n }\n return;\n }\n this.menuOpen = !this.menuOpen;\n if (this.menuOpen) this.menuSurfaceOpen = true;\n };\n\n private closeMenu = () => {\n this.menuOpen = false;\n if (this.dialogEl?.open) this.sheetClosing = true;\n };\n\n private renderSheet() {\n return (\n <dialog\n id={this.menuId}\n ref={element => {\n this.dialogEl = element ?? null;\n }}\n class={{ 'mobile-section-sheet': true, 'mobile-section-sheet--closing': this.sheetClosing }}\n aria-label={this.navigationLabel}\n tabIndex={-1}\n onCancel={event => {\n event.preventDefault();\n this.closeMenu();\n }}\n onKeyDown={this.handleSheetKeyDown}\n onClick={event => {\n if (!this.dialogEl || event.target !== this.dialogEl) return;\n const rect = this.dialogEl.getBoundingClientRect();\n if (\n event.clientY < rect.top ||\n event.clientY > rect.bottom ||\n event.clientX < rect.left ||\n event.clientX > rect.right\n )\n this.closeMenu();\n }}\n >\n <div class=\"mobile-section-sheet__items\" role=\"menu\" aria-label={this.navigationLabel}>\n {this.resolvedSections.map(section =>\n isTabDivider(section) ? (\n <div class=\"mobile-section-sheet__divider\" role=\"separator\" />\n ) : (\n <button\n type=\"button\"\n role=\"menuitem\"\n value={section.id}\n disabled={section.isInactive}\n aria-current={section.id === this.selectedSection?.id ? 'page' : undefined}\n tabIndex={section.id === this.focusedSection ? 0 : -1}\n class={{\n 'mobile-section-sheet__item': true,\n 'ds-control--lg': true,\n 'ds-interaction-fill': true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible':\n this.initialFocusVisible && section.id === this.focusedSection,\n }}\n onFocus={() => {\n this.focusedSection = section.id;\n }}\n onClick={() => {\n if (this.sheetClosing || section.isInactive) return;\n this.closeMenu();\n if (section.id !== this.selectedSection?.id) this.dsChange.emit(section.id);\n }}\n >\n <ds-text\n class=\"mobile-section-sheet__label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-large\"\n color=\"inherit\"\n emphasis={section.id === this.selectedSection?.id}\n lineTruncation={1}\n >\n {section.label}\n </ds-text>\n </button>\n )\n )}\n </div>\n <div\n ref={element => {\n if (this.browserEdgeEl !== element) this.browserEdgeColors = '';\n this.browserEdgeEl = element ?? null;\n }}\n class=\"mobile-section-sheet__browser-edge\"\n aria-hidden=\"true\"\n />\n </dialog>\n );\n }\n\n private handleSelect = (event: CustomEvent<MenuItemData>) => {\n const id = String(event.detail.value ?? '');\n const section = this.selectableSections.find(candidate => candidate.id === id);\n if (!section || section.isInactive) return;\n this.closeMenu();\n if (id !== this.selectedSection?.id) this.dsChange.emit(id);\n requestAnimationFrame(() => this.triggerEl?.focus());\n };\n\n render() {\n const selected = this.selectedSection;\n if (!selected) return <Host />;\n const combined = this.presentation === 'sheet' && !!this.pageLabel;\n\n return (\n <Host\n class={{ 'mobile-section-switcher--pointer-focus': this.pointerFocus }}\n onPointerDown={() => {\n this.pointerFocus = true;\n this.initialFocusVisible = false;\n }}\n >\n <button\n ref={element => {\n this.triggerEl = element ?? null;\n }}\n id={this.triggerId}\n class={{\n 'mobile-section-switcher': true,\n 'mobile-section-switcher--expanded': this.menuOpen,\n 'ds-interaction-fill--surface-open':\n this.menuSurfaceOpen || this.menuOpen || this.sheetClosing,\n 'mobile-section-switcher--sheet': this.presentation === 'sheet',\n 'mobile-section-switcher--combined': combined,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n type=\"button\"\n aria-haspopup={this.presentation === 'sheet' ? 'dialog' : 'menu'}\n aria-controls={this.menuId}\n aria-expanded={String(this.menuOpen)}\n aria-label={this.triggerAriaLabel}\n onClick={this.toggleMenu}\n >\n {this.presentation === 'menu' ? (\n <span\n class={{\n 'mobile-section-switcher__position': true,\n 'mobile-section-switcher__position--visible': this.hasPrevious,\n 'ds-interaction-fill__content': true,\n }}\n aria-hidden=\"true\"\n />\n ) : null}\n {combined\n ? [\n <ds-text\n class=\"mobile-section-switcher__page-label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-large\"\n emphasis\n color=\"inherit\"\n lineTruncation={1}\n >\n {this.pageLabel}\n </ds-text>,\n <ds-text\n class=\"mobile-section-switcher__separator ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-large\"\n color=\"inherit\"\n aria-hidden=\"true\"\n >\n ·\n </ds-text>,\n ]\n : null}\n <ds-text\n class=\"mobile-section-switcher__label ds-interaction-fill__content\"\n as=\"span\"\n variant={this.presentation === 'sheet' ? 'text-body-large' : 'text-body-medium'}\n emphasis\n color=\"inherit\"\n lineTruncation={1}\n >\n {selected.label}\n </ds-text>\n {this.presentation === 'menu' ? (\n <span\n class={{\n 'mobile-section-switcher__position': true,\n 'mobile-section-switcher__position--visible': this.hasNext,\n 'ds-interaction-fill__content': true,\n }}\n aria-hidden=\"true\"\n />\n ) : null}\n </button>\n\n {this.presentation === 'sheet' || this.sheetClosing ? (\n this.renderSheet()\n ) : this.selectableSections.length > 1 ? (\n <ds-menu\n id={this.menuId}\n anchorId={this.triggerId}\n align=\"center\"\n menuLabel={this.navigationLabel}\n open={this.menuOpen}\n initialFocusVisible={this.initialFocusVisible}\n sections={this.menuSections}\n onDsClose={this.closeMenu}\n onDsAfterClose={() => {\n if (!this.menuOpen) this.menuSurfaceOpen = false;\n }}\n onDsSelect={this.handleSelect}\n />\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as e,c as t,h as i,a as o,t as l}from"./index.js";import{o as a,a as r,r as n,b as d,d as h}from"./p-B5eMVBlz.js";import{i as c,r as m,a as u}from"./p-CgGcgMjs.js";import{d as b}from"./p-rSC7ZUpy.js";import{d as p}from"./p--yvQzZoO.js";import{d as f}from"./p-DbDYEEWq.js";import{d as g}from"./p-Cea7rROU.js";import{d as v}from"./p-0XTyQNRG.js";import{d as k}from"./p-D1pPq-y0.js";import{d as w}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as s,H as e,c as t,h as i,a as o,t as l}from"./index.js";import{o as a,a as r,r as n,b as d,d as h}from"./p-B5eMVBlz.js";import{i as c,r as m,a as u}from"./p-CgGcgMjs.js";import{d as b}from"./p-rSC7ZUpy.js";import{d as p}from"./p--yvQzZoO.js";import{d as f}from"./p-DbDYEEWq.js";import{d as g}from"./p-Cea7rROU.js";import{d as v}from"./p-0XTyQNRG.js";import{d as k}from"./p-D1pPq-y0.js";import{d as w}from"./p-Bv1nQIIF.js";import{d as _}from"./p-C6YTSS-w.js";import{d as y}from"./p-BmRHJ_jo.js";import{d as C}from"./p-BCFpqnAg.js";import{d as E}from"./p-Bl5wd3v3.js";import{d as j}from"./p-Crd3PEUx.js";import{d as x}from"./p-BGnRFtBa.js";import{d as B}from"./p-aMyflqva.js";import{d as T}from"./p-CN8PQLZu.js";const D=()=>`:host{display:block;min-width:0;min-height:0;height:100%;background:transparent}:host([responsive-mode='mobile']){width:100%;background:var(--color-background-primary)}.shell-tools__desktop,.shell-tools__desktop ds-panel-tools,.shell-tools__mobile{display:block;min-width:0;min-height:0;height:100%}.shell-tools__slot-proxy{display:block;width:100%;height:100%;min-width:0;min-height:0}.shell-tools__mobile{display:grid;grid-template-rows:auto minmax(0, 1fr);background:var(--color-background-primary)}.shell-tools__mobile-header{grid-row:1}.shell-tools__mobile-body,.shell-tools__view{min-width:0;min-height:0;height:100%}.shell-tools__mobile-body{grid-row:2;overflow:hidden}.shell-tools__view{overflow:auto;overscroll-behavior:contain}.shell-tools__view[hidden]{display:none}.shell-tools__view ::slotted(*){min-height:0}`;const L=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.dsToolChange=t(this,"dsToolChange",7);this.dsPresentationChange=t(this,"dsPresentationChange",7);this.dsHeaderBack=t(this,"dsHeaderBack",7);this.dsHeaderAction=t(this,"dsHeaderAction",7);this.dsRailAccessoryAction=t(this,"dsRailAccessoryAction",7);this.responsiveMode="desktop";this.open=false;this.activeTool="";this.presentation="drawer";this.fullscreenHeaderMode="shared";this.items=[];this.accessories=[];this.headers={};this.storageKey="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.inboxLabel="Inbox";this.inboxNavigationLabel="Inbox sections";this.panelToolsEl=null;this.selectInboxTool=s=>{const e=s.detail;if(!this.availableInboxTools.includes(e)||e===this.mobileActiveTool)return;this.open=true;this.activeTool=e;this.dsToolChange.emit({id:e,selected:true})};this.handlePanelToolChange=s=>{this.activeTool=s.detail.id;this.open=s.detail.selected};this.handlePanelPresentationChange=s=>{this.presentation=s.detail.presentation};this.handlePanelRailAccessoryAction=s=>{s.stopPropagation();this.dsRailAccessoryAction.emit(s.detail)};this.handleMobileHeaderAction=(s,e,t)=>{t.stopPropagation();this.dsHeaderAction.emit({tool:s,id:e})}}presentationChanged(s,e){if(s===e)return;if(this.panelToolsEl&&this.panelToolsEl.getAttribute("presentation")!==s){this.panelToolsEl.setAttribute("presentation",s)}}get resolvedItems(){return this.items??[]}get availableInboxTools(){return this.resolvedItems.filter((s=>!s.isInactive&&c(s))).map((s=>s.id))}get mobileViewOrder(){return a(this.resolvedItems).map((s=>s.id))}toolLabel(s){const e=this.resolvedItems.find((e=>e.id===s));return e?.label??e?.ariaLabel??r[s]??s}get mobileActiveTool(){const s=this.resolvedItems.find((s=>s.id===this.activeTool));const e=s?c(s):u(this.activeTool);if(!e)return this.activeTool;return m(this.activeTool,this.availableInboxTools)}componentWillLoad(){this.reconcileAvailability()}handleItemsChange(){this.reconcileAvailability()}reconcileAvailability(){const s=n(this.resolvedItems,this.open,this.activeTool);this.open=s.open;this.activeTool=s.activeTool}resolvedHeaders(){return this.headers??{}}activeHeader(s){return this.resolvedHeaders()[s]??{}}activateMobileTool(s){const e=this.resolvedItems.find((e=>e.id===s));if(!e||e.isInactive)return;const t=d(this.open,this.activeTool,s);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:s,selected:t.selected})}async activateTool(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.activateTool(s));return}this.activateMobileTool(s)}async closeDrawer(){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.closeDrawer());return}if(!this.open)return;const s=this.activeTool;this.open=false;if(s)this.dsToolChange.emit({id:s,selected:false})}async focusHeaderAction(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.focusHeaderAction(s));return}const e=(this.el.shadowRoot??this.el).querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}renderForwardedSlots(){return this.mobileViewOrder.flatMap((s=>[i("div",{key:`tool:${s}`,class:"shell-tools__slot-proxy",slot:s},i("slot",{name:s})),i("div",{key:`tool-view:${s}`,class:"shell-tools__slot-proxy",slot:`${s}-view`},i("slot",{name:`${s}-view`}))]))}renderDesktop(){return i("div",{class:"shell-tools__desktop"},i("ds-panel-tools",{open:this.open,activeTool:this.activeTool,presentation:this.presentation,fullscreenHeaderMode:this.fullscreenHeaderMode,items:this.resolvedItems,accessories:this.accessories??[],headers:this.resolvedHeaders(),storageKey:this.storageKey,toolsLabel:this.toolsLabel,toolShortcutsLabel:this.toolShortcutsLabel,ref:s=>{this.panelToolsEl=s},onDsToolChange:this.handlePanelToolChange,onDsPresentationChange:this.handlePanelPresentationChange,onDsRailAccessoryAction:this.handlePanelRailAccessoryAction},this.renderForwardedSlots()))}renderMobileHeader(s){const e=this.activeHeader(s);const t=e.title?.trim();const o=t||this.toolLabel(s);const l=(e.actions??[]).filter((s=>s.id!=="fullscreen"));const a=this.resolvedItems.find((e=>e.id===s));const r=Boolean(a&&c(a)&&!e.showBack);const n=r?this.availableInboxTools.map((s=>{const e=this.resolvedItems.find((e=>e.id===s));return{id:s,label:this.toolLabel(s),variant:"label",dot:e?.dot}})):[];return i("ds-mobile-header",{class:"shell-tools__mobile-header",heading:o,headingLevel:"h2",sections:n,value:s,sectionsAriaLabel:this.inboxNavigationLabel,sectionsPresentation:r?"segmented":"switcher",sectionsSize:"lg",onDsSectionChange:this.selectInboxTool},e.showBack?i("ds-tooltip",{slot:"leading",label:e.backAriaLabel||"Back",side:"bottom",size:"sm"},i("ds-button-unfilled",{variant:"icon",icon:e.backIcon||"ChevronLeft",size:"md","aria-label":e.backAriaLabel||"Back",activeFill:false,hasBorder:false,onDsClick:()=>this.dsHeaderBack.emit({tool:s})})):null,l.map((e=>i("ds-tooltip",{slot:"trailing",key:e.id,label:e.ariaLabel,side:"bottom",size:"sm"},i("ds-button-unfilled",{id:e.triggerId||undefined,"data-header-action-id":e.id,variant:"icon",icon:e.icon,size:"md","aria-label":e.ariaLabel,haspopup:e.haspopup,controls:e.controls,expanded:e.expanded,surfaceOpen:e.surfaceOpen,pressed:e.pressed,isInactive:e.isInactive,activeFill:false,hasBorder:false,onDsClick:t=>this.handleMobileHeaderAction(s,e.id,t)})))))}renderMobile(){const s=this.mobileActiveTool;return i("div",{class:"shell-tools__mobile","aria-hidden":this.open&&s?undefined:"true",inert:this.open&&s?undefined:true},s?this.renderMobileHeader(s):null,i("div",{class:"shell-tools__mobile-body"},this.mobileViewOrder.map((e=>{const t=this.open&&e===s;return i("div",{key:`mobile-tool-view:${e}`,class:{"shell-tools__view":true,"shell-tools__view--active":t},hidden:!t,"aria-hidden":t?undefined:"true",inert:t?undefined:true},i("slot",{name:`${e}-view`},i("slot",{name:e})))}))))}render(){const s=this.responsiveMode==="mobile";return i(o,{key:"39e2fd965c057e8202d2aa7f2ae8b344bd41986d",role:s?this.presentation==="fullscreen"?"dialog":"complementary":undefined,"aria-modal":s&&this.presentation==="fullscreen"?"true":undefined,"aria-label":s?this.toolsLabel:undefined},s?this.renderMobile():this.renderDesktop())}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],items:[{handleItemsChange:0}]}}static get style(){return D()}},[257,"ds-shell-tools",{responsiveMode:[513,"responsive-mode"],open:[1540],activeTool:[1537,"active-tool"],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],items:[16],accessories:[16],headers:[16],storageKey:[1,"storage-key"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],inboxLabel:[1,"inbox-label"],inboxNavigationLabel:[1,"inbox-navigation-label"],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},undefined,{presentation:[{presentationChanged:0}],items:[{handleItemsChange:0}]}]);function A(){if(typeof customElements==="undefined"){return}const s=["ds-shell-tools","ds-badge","ds-button-unfilled","ds-divider","ds-icon","ds-loader","ds-menu","ds-mobile-header","ds-mobile-section-switcher","ds-panel-tool-header","ds-panel-tools","ds-swatch-picker","ds-switch","ds-tab-group","ds-tag","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-shell-tools":if(!customElements.get(l(s))){customElements.define(l(s),L)}break;case"ds-badge":if(!customElements.get(l(s))){b()}break;case"ds-button-unfilled":if(!customElements.get(l(s))){p()}break;case"ds-divider":if(!customElements.get(l(s))){f()}break;case"ds-icon":if(!customElements.get(l(s))){g()}break;case"ds-loader":if(!customElements.get(l(s))){v()}break;case"ds-menu":if(!customElements.get(l(s))){k()}break;case"ds-mobile-header":if(!customElements.get(l(s))){w()}break;case"ds-mobile-section-switcher":if(!customElements.get(l(s))){_()}break;case"ds-panel-tool-header":if(!customElements.get(l(s))){y()}break;case"ds-panel-tools":if(!customElements.get(l(s))){h()}break;case"ds-swatch-picker":if(!customElements.get(l(s))){C()}break;case"ds-switch":if(!customElements.get(l(s))){E()}break;case"ds-tab-group":if(!customElements.get(l(s))){j()}break;case"ds-tag":if(!customElements.get(l(s))){x()}break;case"ds-text":if(!customElements.get(l(s))){B()}break;case"ds-tooltip":if(!customElements.get(l(s))){T()}break}}))}A();export{L as S,A as d};
|
|
2
|
+
//# sourceMappingURL=p-DP5_kL7t.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as e,H as s,h as o,a as r,t as n}from"./index.js";import{d as i}from"./p-1gt8QlyW.js";import{d as c}from"./p-aMyflqva.js";const a=["fair","good","excellent"];function t(e){return typeof e==="string"&&a.includes(e)}function d(e){if(typeof e==="string"&&e.trim()==="")return undefined;const s=typeof e==="number"?e:Number(e);if(!Number.isFinite(s)||s<0||s>100)return undefined;if(s<=50)return"fair";if(s<=80)return"good";return"excellent"}function l(e,s){return t(s)?s:d(e)}const g={default:{sm:"text-title-small",md:"text-title-medium",lg:"text-title-large"},dense:{sm:"text-title-medium",md:"text-title-large",lg:"text-display-small"}};const b=()=>`.ds-control-frame.sc-ds-score{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-score{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-control-icon-box.sc-ds-score{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-score{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-score{position:relative;padding-inline-end:calc( var(--ds-control-label-inset, var(--dimension-space-025)) + var(--ds-control-gap, var(--dimension-space-050)) )}.ds-control-label-dot__badge.sc-ds-score{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}@media (forced-colors: active){.sc-ds-score:root,.sc-ds-score-h,.ds-forced-colors-scope.sc-ds-score{--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-score-h{display:inline-flex;align-items:center;box-sizing:border-box;min-width:0;--_score-badge-inline-size:var(--dimension-size-500);--_score-badge-block-size:var(--dimension-size-400);--_score-skeleton-inset:calc(var(--_score-badge-block-size) / 8)}.score--sm.sc-ds-score-h{--_score-badge-inline-size:calc(var(--dimension-size-400) - var(--dimension-space-050));--_score-badge-block-size:var(--dimension-size-300)}.score--md.sc-ds-score-h{--_score-badge-inline-size:var(--dimension-size-500);--_score-badge-block-size:var(--dimension-size-400)}.score--lg.sc-ds-score-h{--_score-badge-inline-size:calc(var(--dimension-size-600) + var(--dimension-space-100));--_score-badge-block-size:var(--dimension-size-500)}.score__badge.sc-ds-score{display:flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;inline-size:var(--_score-badge-inline-size);block-size:var(--_score-badge-block-size);overflow:hidden;border-radius:var(--dimension-radius-025);background:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral);-webkit-user-select:none;user-select:none}.score__badge--fair.sc-ds-score{background:var(--color-safety-score-background-fair);color:var(--color-safety-score-foreground-on-fair)}.score__badge--good.sc-ds-score{background:var(--color-safety-score-background-good);color:var(--color-safety-score-foreground-on-good)}.score__badge--excellent.sc-ds-score{background:var(--color-safety-score-background-excellent);color:var(--color-safety-score-foreground-on-excellent)}.score__value.sc-ds-score,.score__badge.sc-ds-score ds-skeleton.sc-ds-score{flex:0 0 auto}.score__badge--loading.sc-ds-score{padding-inline:var(--_score-skeleton-inset)}.score__badge--loading.sc-ds-score .score__value.sc-ds-score{flex:1 1 auto;inline-size:100%;block-size:100%;max-inline-size:100%;max-block-size:100%;min-inline-size:0}@media (forced-colors: active){.score__badge.sc-ds-score{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);background:var(--ds-forced-color-surface);color:var(--ds-forced-color-content)}}`;const u=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.value="";this.size="md";this.variant="default";this.isLoading=false;this.label=""}render(){const e=this.size;const s=this.variant;const n=l(this.value,this.level);const i=g[s][e];const c=[this.label.trim(),this.isLoading?"":this.value].filter(Boolean).join(" ");return o(r,{key:"0617cf4e2a7717c59a1d331716c68d1ae07914a0",class:{score:true,[`score--${e}`]:true,[`score--${s}`]:true,"score--loading":this.isLoading},role:c?"img":undefined,"aria-busy":this.isLoading?"true":undefined,"aria-label":c||undefined},o("span",{key:"621550fab347f468849673a653170a047d40750c",class:{score__badge:true,[`score__badge--${n}`]:Boolean(n),"score__badge--loading":this.isLoading}},this.isLoading?o("ds-skeleton",{class:"score__value",variant:"text",textVariant:i,background:n?"bold":"faint"}):o("ds-text",{as:"span",class:"score__value ds-control-label-box",variant:i,emphasis:true,color:"inherit",fontFeature:"tabular-nums"},this.value)))}static get style(){return b()}},[2,"ds-score",{value:[8],size:[1],variant:[1],level:[1],isLoading:[4,"is-loading"],label:[1]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-score","ds-skeleton","ds-text"];e.forEach((e=>{switch(e){case"ds-score":if(!customElements.get(n(e))){customElements.define(n(e),u)}break;case"ds-skeleton":if(!customElements.get(n(e))){i()}break;case"ds-text":if(!customElements.get(n(e))){c()}break}}))}f();export{u as S,f as d,t as i};
|
|
2
|
+
//# sourceMappingURL=p-GwqA_Gzi.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["SAFETY_SCORE_LEVELS","isSafetyScoreLevel","value","includes","resolveSafetyScoreLevel","trim","undefined","numericValue","Number","isFinite","resolveScoreLevel","level","SCORE_VALUE_VARIANT","default","sm","md","lg","dense","scoreCss","Score","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","variant","isLoading","label","render","valueVariant","accessibleName","filter","Boolean","join","h","Host","key","class","score","role","score__badge","textVariant","background","as","emphasis","color","fontFeature"],"sources":["src/wc/components/Score/score-types.ts","src/wc/components/Score/score-model.ts","src/wc/components/Score/Score.css?tag=ds-score&encapsulation=scoped","src/wc/components/Score/Score.tsx"],"sourcesContent":["export type SafetyScoreLevel = 'fair' | 'good' | 'excellent';\nexport type ScoreSize = 'sm' | 'md' | 'lg';\nexport type ScoreVariant = 'default' | 'dense';\n\nexport const SCORE_SIZES = ['sm', 'md', 'lg'] as const;\nexport const SCORE_VARIANTS = ['default', 'dense'] as const;\nexport const SAFETY_SCORE_LEVELS = ['fair', 'good', 'excellent'] as const;\n","import {\n SAFETY_SCORE_LEVELS,\n type SafetyScoreLevel,\n type ScoreSize,\n type ScoreVariant,\n} from './score-types';\n\nexport function isSafetyScoreLevel(value: unknown): value is SafetyScoreLevel {\n return typeof value === 'string' && (SAFETY_SCORE_LEVELS as readonly string[]).includes(value);\n}\n\n/**\n * Infer a safety-score color level from a 0–100 figure. Non-numeric or out-of-range\n * values return undefined so the owner can supply `level` explicitly.\n */\nexport function resolveSafetyScoreLevel(value: string | number): SafetyScoreLevel | undefined {\n if (typeof value === 'string' && value.trim() === '') return undefined;\n const numericValue = typeof value === 'number' ? value : Number(value);\n if (!Number.isFinite(numericValue) || numericValue < 0 || numericValue > 100) return undefined;\n if (numericValue <= 50) return 'fair';\n if (numericValue <= 80) return 'good';\n return 'excellent';\n}\n\nexport function resolveScoreLevel(\n value: string | number,\n level?: SafetyScoreLevel\n): SafetyScoreLevel | undefined {\n return isSafetyScoreLevel(level) ? level : resolveSafetyScoreLevel(value);\n}\n\nexport const SCORE_VALUE_VARIANT = {\n default: {\n sm: 'text-title-small',\n md: 'text-title-medium',\n lg: 'text-title-large',\n },\n dense: {\n sm: 'text-title-medium',\n md: 'text-title-large',\n lg: 'text-display-small',\n },\n} as const satisfies Record<\n ScoreVariant,\n Record<\n ScoreSize,\n 'text-title-small' | 'text-title-medium' | 'text-title-large' | 'text-display-small'\n >\n>;\n","@import '../../utils/control-parts.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n min-width: 0;\n --_score-badge-inline-size: var(--dimension-size-500);\n --_score-badge-block-size: var(--dimension-size-400);\n /* Matches the text skeleton’s 75% bar so the fill inset is even on all sides. */\n --_score-skeleton-inset: calc(var(--_score-badge-block-size) / 8);\n}\n\n:host(.score--sm) {\n --_score-badge-inline-size: calc(var(--dimension-size-400) - var(--dimension-space-050));\n --_score-badge-block-size: var(--dimension-size-300);\n}\n\n:host(.score--md) {\n --_score-badge-inline-size: var(--dimension-size-500);\n --_score-badge-block-size: var(--dimension-size-400);\n}\n\n:host(.score--lg) {\n --_score-badge-inline-size: calc(var(--dimension-size-600) + var(--dimension-space-100));\n --_score-badge-block-size: var(--dimension-size-500);\n}\n\n.score__badge {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n inline-size: var(--_score-badge-inline-size);\n block-size: var(--_score-badge-block-size);\n overflow: hidden;\n border-radius: var(--dimension-radius-025);\n background: var(--color-background-faint-neutral);\n color: var(--color-foreground-bold-neutral);\n -webkit-user-select: none;\n user-select: none;\n}\n\n.score__badge--fair {\n background: var(--color-safety-score-background-fair);\n color: var(--color-safety-score-foreground-on-fair);\n}\n\n.score__badge--good {\n background: var(--color-safety-score-background-good);\n color: var(--color-safety-score-foreground-on-good);\n}\n\n.score__badge--excellent {\n background: var(--color-safety-score-background-excellent);\n color: var(--color-safety-score-foreground-on-excellent);\n}\n\n.score__value,\n.score__badge ds-skeleton {\n flex: 0 0 auto;\n}\n\n.score__badge--loading {\n padding-inline: var(--_score-skeleton-inset);\n}\n\n.score__badge--loading .score__value {\n flex: 1 1 auto;\n inline-size: 100%;\n block-size: 100%;\n max-inline-size: 100%;\n max-block-size: 100%;\n min-inline-size: 0;\n}\n\n@media (forced-colors: active) {\n .score__badge {\n border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n background: var(--ds-forced-color-surface);\n color: var(--ds-forced-color-content);\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { SCORE_VALUE_VARIANT, resolveScoreLevel } from './score-model';\nimport type { SafetyScoreLevel, ScoreSize, ScoreVariant } from './score-types';\n\n@Component({\n tag: 'ds-score',\n styleUrl: 'Score.css',\n scoped: true,\n})\nexport class Score {\n /** Display-ready headline figure. */\n @Prop() value: string | number = '';\n /**\n * Visual density matching control height: `sm` 24px, `md` 32px, `lg` 40px.\n * `lg` is the Card Overview recipe.\n */\n @Prop() size: ScoreSize = 'md';\n /**\n * Value typography recipe. `dense` keeps the selected size's fill dimensions\n * and uses a larger emphasized figure with tighter surrounding space.\n */\n @Prop() variant: ScoreVariant = 'default';\n /**\n * Safety-score color level. Numeric values from 0–100 infer fair (0–50),\n * good (51–80), or excellent (81–100) when this is omitted.\n */\n @Prop() level: SafetyScoreLevel | undefined;\n /** Replace the figure with a skeleton while data resolves. */\n @Prop() isLoading: boolean = false;\n /** Accessible name prefix, for example “Safety score”. */\n @Prop() label: string = '';\n\n render() {\n const size = this.size;\n const variant = this.variant;\n const level = resolveScoreLevel(this.value, this.level);\n const valueVariant = SCORE_VALUE_VARIANT[variant][size];\n const accessibleName = [this.label.trim(), this.isLoading ? '' : this.value]\n .filter(Boolean)\n .join(' ');\n\n return (\n <Host\n class={{\n score: true,\n [`score--${size}`]: true,\n [`score--${variant}`]: true,\n 'score--loading': this.isLoading,\n }}\n role={accessibleName ? 'img' : undefined}\n aria-busy={this.isLoading ? 'true' : undefined}\n aria-label={accessibleName || undefined}\n >\n <span\n class={{\n score__badge: true,\n [`score__badge--${level}`]: Boolean(level),\n 'score__badge--loading': this.isLoading,\n }}\n >\n {this.isLoading ? (\n <ds-skeleton\n class=\"score__value\"\n variant=\"text\"\n textVariant={valueVariant}\n background={level ? 'bold' : 'faint'}\n />\n ) : (\n <ds-text\n as=\"span\"\n class=\"score__value ds-control-label-box\"\n variant={valueVariant}\n emphasis={true}\n color=\"inherit\"\n fontFeature=\"tabular-nums\"\n >\n {this.value}\n </ds-text>\n )}\n </span>\n </Host>\n );\n }\n}\n"],"mappings":"mIAMO,MAAMA,EAAsB,CAAC,OAAQ,OAAQ,aCC9C,SAAUC,EAAmBC,GACjC,cAAcA,IAAU,UAAaF,EAA0CG,SAASD,EAC1F,CAMM,SAAUE,EAAwBF,GACtC,UAAWA,IAAU,UAAYA,EAAMG,SAAW,GAAI,OAAOC,UAC7D,MAAMC,SAAsBL,IAAU,SAAWA,EAAQM,OAAON,GAChE,IAAKM,OAAOC,SAASF,IAAiBA,EAAe,GAAKA,EAAe,IAAK,OAAOD,UACrF,GAAIC,GAAgB,GAAI,MAAO,OAC/B,GAAIA,GAAgB,GAAI,MAAO,OAC/B,MAAO,WACT,CAEM,SAAUG,EACdR,EACAS,GAEA,OAAOV,EAAmBU,GAASA,EAAQP,EAAwBF,EACrE,CAEO,MAAMU,EAAsB,CACjCC,QAAS,CACPC,GAAI,mBACJC,GAAI,oBACJC,GAAI,oBAENC,MAAO,CACLH,GAAI,oBACJC,GAAI,mBACJC,GAAI,uBCxCR,MAAME,EAAW,IAAM,yqH,MCSVC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CAOUC,KAAAtB,MAAyB,GAKzBsB,KAAAC,KAAkB,KAKlBD,KAAAE,QAAwB,UAOxBF,KAAAG,UAAqB,MAErBH,KAAAI,MAAgB,EAqDzB,CAnDC,MAAAC,GACE,MAAMJ,EAAOD,KAAKC,KAClB,MAAMC,EAAUF,KAAKE,QACrB,MAAMf,EAAQD,EAAkBc,KAAKtB,MAAOsB,KAAKb,OACjD,MAAMmB,EAAelB,EAAoBc,GAASD,GAClD,MAAMM,EAAiB,CAACP,KAAKI,MAAMvB,OAAQmB,KAAKG,UAAY,GAAKH,KAAKtB,OACnE8B,OAAOC,SACPC,KAAK,KAER,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,MAAO,KACP,CAAC,UAAUd,KAAS,KACpB,CAAC,UAAUC,KAAY,KACvB,iBAAkBF,KAAKG,WAEzBa,KAAMT,EAAiB,MAAQzB,UAAS,YAC7BkB,KAAKG,UAAY,OAASrB,UAAS,aAClCyB,GAAkBzB,WAE9B6B,EAAA,QAAAE,IAAA,2CACEC,MAAO,CACLG,aAAc,KACd,CAAC,iBAAiB9B,KAAUsB,QAAQtB,GACpC,wBAAyBa,KAAKG,YAG/BH,KAAKG,UACJQ,EAAA,eACEG,MAAM,eACNZ,QAAQ,OACRgB,YAAaZ,EACba,WAAYhC,EAAQ,OAAS,UAG/BwB,EAAA,WACES,GAAG,OACHN,MAAM,oCACNZ,QAASI,EACTe,SAAU,KACVC,MAAM,UACNC,YAAY,gBAEXvB,KAAKtB,Q","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-09-
|
|
2
|
+
"timestamp": "2026-09-05T02:44:38",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.43.5",
|
|
@@ -21777,6 +21777,47 @@
|
|
|
21777
21777
|
"required": false,
|
|
21778
21778
|
"getter": false,
|
|
21779
21779
|
"setter": false
|
|
21780
|
+
},
|
|
21781
|
+
{
|
|
21782
|
+
"name": "variant",
|
|
21783
|
+
"type": "\"default\" | \"dense\"",
|
|
21784
|
+
"complexType": {
|
|
21785
|
+
"original": "ScoreVariant",
|
|
21786
|
+
"resolved": "\"default\" | \"dense\"",
|
|
21787
|
+
"references": {
|
|
21788
|
+
"ScoreVariant": {
|
|
21789
|
+
"location": "import",
|
|
21790
|
+
"path": "./score-types",
|
|
21791
|
+
"id": "src/wc/components/Score/score-types.ts::ScoreVariant",
|
|
21792
|
+
"referenceLocation": "ScoreVariant"
|
|
21793
|
+
}
|
|
21794
|
+
}
|
|
21795
|
+
},
|
|
21796
|
+
"mutable": false,
|
|
21797
|
+
"attr": "variant",
|
|
21798
|
+
"reflectToAttr": false,
|
|
21799
|
+
"docs": "Value typography recipe. `dense` keeps the selected size's fill dimensions\nand uses a larger emphasized figure with tighter surrounding space.",
|
|
21800
|
+
"docsTags": [
|
|
21801
|
+
{
|
|
21802
|
+
"name": "default",
|
|
21803
|
+
"text": "'default'"
|
|
21804
|
+
}
|
|
21805
|
+
],
|
|
21806
|
+
"default": "'default'",
|
|
21807
|
+
"values": [
|
|
21808
|
+
{
|
|
21809
|
+
"value": "default",
|
|
21810
|
+
"type": "string"
|
|
21811
|
+
},
|
|
21812
|
+
{
|
|
21813
|
+
"value": "dense",
|
|
21814
|
+
"type": "string"
|
|
21815
|
+
}
|
|
21816
|
+
],
|
|
21817
|
+
"optional": false,
|
|
21818
|
+
"required": false,
|
|
21819
|
+
"getter": false,
|
|
21820
|
+
"setter": false
|
|
21780
21821
|
}
|
|
21781
21822
|
],
|
|
21782
21823
|
"methods": [],
|
|
@@ -36286,6 +36327,11 @@
|
|
|
36286
36327
|
"docstring": "",
|
|
36287
36328
|
"path": "src/wc/components/Score/score-types.ts"
|
|
36288
36329
|
},
|
|
36330
|
+
"src/wc/components/Score/score-types.ts::ScoreVariant": {
|
|
36331
|
+
"declaration": "export type ScoreVariant = 'default' | 'dense';",
|
|
36332
|
+
"docstring": "",
|
|
36333
|
+
"path": "src/wc/components/Score/score-types.ts"
|
|
36334
|
+
},
|
|
36289
36335
|
"src/wc/components/Score/score-types.ts::SafetyScoreLevel": {
|
|
36290
36336
|
"declaration": "export type SafetyScoreLevel = 'fair' | 'good' | 'excellent';",
|
|
36291
36337
|
"docstring": "",
|