@ds-mo/ui 2.1.0 → 2.1.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/.build-stamp
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
1783118154132
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as r,H as e,c as o,h as
|
|
1
|
+
import{p as r,H as e,c as o,h as t,a,t as s}from"./index.js";import{g as i,i as n}from"./p-BQq26pt9.js";import{d}from"./p-CiEc8Nwx.js";const c=()=>`.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content;max-width:100%;height:var(--dimension-size-400);padding:calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);border-radius:var(--dimension-radius-half);box-sizing:border-box}.tab-list--vertical.sc-ds-tab-group{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-050);background-color:transparent;border:var(--dimension-stroke-width-012) solid transparent;border-radius:var(--dimension-radius-half);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-300);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group::after{content:'';position:absolute;inset:calc(var(--dimension-stroke-width-012) * -1);border-radius:inherit;background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group:active::after{background:var(--_pressed-bg);transition:none}.tab.sc-ds-tab-group:focus-visible:not(:hover):not(:active)::after{background:transparent}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);border-color:var(--color-border-tertiary)}.tab.sc-ds-tab-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group .tab.sc-ds-tab-group{justify-content:flex-start}.tab__label.sc-ds-tab-group{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-stroke-width-012);align-self:center;padding:0;flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);height:var(--typography-lineheight-sm);flex-shrink:0;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch;padding:0}.tab-divider--vertical.sc-ds-tab-group .tab-divider__line.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=r(class r extends e{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}get selectableTabs(){return i(this.tabs)}selectTab(r,e){this.value=r;this.dsChange.emit(r);if(e?.focus!==false){this.focusTab(r)}}focusTab(r){const e=this.el.querySelector(`[data-tab-id="${r}"]`);e?.focus({preventScroll:true})}onValueChange(r,e){if(e===undefined||r===e)return;requestAnimationFrame((()=>{const e=document.activeElement;if(!e||!this.el.contains(e))return;const o=e.getAttribute("data-tab-id");if(o===r)return;const t=this.el.querySelector(`[data-tab-id="${r}"]`);if(t){t.focus({preventScroll:true})}else{e.blur()}}))}findEnabled(r,e){const o=this.selectableTabs;const t=o.length;for(let a=0;a<t;a++){const s=(r+e*(a+1)+t*(a+1))%t;if(!o[s]?.disabled)return s}return r}handleKeyDown(r){const e=this.selectableTabs;if(!e.length)return;const o=e.findIndex((r=>r.id===this.value));const t=this.orientation==="vertical";let a=null;if(!t){if(r.key==="ArrowRight"){a=this.findEnabled(o,1)}else if(r.key==="ArrowLeft"){a=this.findEnabled(o,-1)}}else{if(r.key==="ArrowDown"){a=this.findEnabled(o,1)}else if(r.key==="ArrowUp"){a=this.findEnabled(o,-1)}}if(r.key==="Home"){const r=e.findIndex((r=>!r.disabled));a=r===-1?null:r}else if(r.key==="End"){const r=[...e].reverse().findIndex((r=>!r.disabled));a=r===-1?null:e.length-1-r}if(a!==null){r.preventDefault();const o=e[a];this.selectTab(o.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const r=this.getBgClass();const e=this.orientation==="vertical";return t(a,{key:"3169bbef555225fc37eebbc55efac726b2def9c6",class:"tab-group-host"},t("div",{key:"18770a26e5ebfd75e95dda95548a67b2d32e61b6",role:"tablist",class:{"tab-list":true,"tab-list--vertical":e},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":e?"vertical":undefined},this.tabs.map(((o,a)=>{if(n(o)){return t("div",{key:`divider-${a}`,class:{"tab-divider":true,"tab-divider--vertical":e},"aria-hidden":"true"},t("div",{class:"tab-divider__line"}))}const s=o.id===this.value;return t("button",{key:o.id,type:"button",role:"tab","data-tab-id":o.id,class:{tab:true,"tab--selected":s,[r]:!!r},"aria-selected":s,"aria-disabled":o.disabled||undefined,"aria-controls":o.panelId??undefined,disabled:o.disabled,tabIndex:s?0:-1,onClick:()=>!o.disabled&&this.selectTab(o.id)},t("span",{class:{tab__label:true,"tab__label--dot":!!o.dot,[s?"text-body-small-emphasis":"text-body-small"]:true}},o.label,o.dot&&t("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return c()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const r=["ds-tab-group","ds-badge"];r.forEach((r=>{switch(r){case"ds-tab-group":if(!customElements.get(s(r))){customElements.define(s(r),l)}break;case"ds-badge":if(!customElements.get(s(r))){d()}break}}))}b();const u=l;const g=b;export{u as DsTabGroup,g as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-tab-group.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","orientation","selectableTabs","getSelectableTabs","selectTab","id","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","nextTab","blur","findEnabled","from","step","len","length","n","i","disabled","handleKeyDown","e","currentIdx","findIndex","t","isVertical","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabel","ariaLabelledby","map","tab","index","isTabDivider","isSelected","type","panelId","tabIndex","onClick","tab__label","dot","label","variant"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.tab-list {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n position: relative;\n width: max-content;\n max-width: 100%;\n height: var(--dimension-size-400);\n padding: calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));\n background-color: var(--color-background-secondary);\n border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n border-radius: var(--dimension-radius-half);\n box-sizing: border-box;\n}\n\n/* Vertical orientation */\n.tab-list--vertical {\n flex-direction: column;\n align-items: stretch;\n}\n\n.tab {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-050);\n background-color: transparent;\n border: var(--dimension-stroke-width-012) solid transparent;\n border-radius: var(--dimension-radius-half);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n color: var(--color-foreground-secondary);\n position: relative;\n /* Only transition color — hover bg is instant (see ::after below) */\n transition: color var(--effect-motion-short-2);\n flex-shrink: 0;\n height: var(--dimension-size-300);\n min-width: var(--dimension-size-400);\n box-sizing: border-box;\n --_hover-bg: var(--color-interaction-hover);\n --_pressed-bg: var(--color-interaction-pressed);\n --_dot: var(--color-foreground-bold-brand);\n --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.tab::after {\n content: '';\n position: absolute;\n inset: calc(var(--dimension-stroke-width-012) * -1);\n border-radius: inherit;\n background: transparent;\n pointer-events: none;\n transition: none;\n}\n\n.tab:hover::after { background: var(--_hover-bg); transition: none; }\n.tab:active::after { background: var(--_pressed-bg); transition: none; }\n\n/* Focus ring only — no persistent hover fill from keyboard focus */\n.tab:focus-visible:not(:hover):not(:active)::after {\n background: transparent;\n}\n\n.tab--selected {\n color: var(--color-foreground-primary);\n background-color: var(--color-background-primary);\n border-color: var(--color-border-tertiary);\n}\n\n.tab:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n.tab:disabled,\n.tab[aria-disabled=\"true\"] {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Vertical tabs read as a list — left-align the label */\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n/* Label — dot anchors top-right like BarNav action icon zone */\n.tab__label {\n position: relative;\n display: inline-flex;\n align-items: center;\n padding: 0 var(--dimension-space-025);\n white-space: nowrap;\n}\n\n/* Clearance for top-right dot — slightly less than space-025 + space-075 */\n.tab__label--dot {\n padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n/* Notification dot — top-right corner of the label zone */\n.tab__dot {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n}\n\n/* Background context */\n.on-medium {\n --_hover-bg: var(--color-interaction-on-medium-background-hover);\n --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n --_dot-ring: var(--color-background-medium-neutral);\n}\n\n.on-bold {\n --_hover-bg: var(--color-interaction-on-bold-background-hover);\n --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n --_dot-ring: var(--color-background-bold-neutral);\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n --_hover-bg: var(--color-interaction-on-strong-background-hover);\n --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n --_dot-ring: var(--color-background-strong-neutral);\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n --_hover-bg: var(--color-always-dark-interaction-hover);\n --_pressed-bg: var(--color-always-dark-interaction-pressed);\n --_dot-ring: var(--color-always-dark-background);\n color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n/* In-tablist visual group separator — not focusable, skipped by keyboard nav */\n.tab-divider {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--dimension-space-100);\n height: var(--dimension-size-400);\n padding-block: var(--dimension-space-075);\n flex-shrink: 0;\n pointer-events: none;\n}\n\n.tab-divider__line {\n width: var(--dimension-stroke-width-012);\n align-self: stretch;\n background-color: var(--color-border-secondary);\n}\n\n.tab-divider--vertical {\n width: auto;\n height: var(--dimension-space-100);\n align-self: stretch;\n padding-block: 0;\n padding-inline: var(--dimension-space-075);\n}\n\n.tab-divider--vertical .tab-divider__line {\n width: auto;\n height: var(--dimension-stroke-width-012);\n align-self: stretch;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\n@Component({\n tag: 'ds-tab-group',\n styleUrl: 'TabGroup.css',\n scoped: true,\n})\nexport class TabGroup {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop() tabs: TabItem[] = [];\n @Prop() background: TabBackground | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n @Event() dsChange!: EventEmitter<string>;\n\n private get selectableTabs(): TabItemTab[] {\n return getSelectableTabs(this.tabs);\n }\n\n private selectTab(id: string, options?: { focus?: boolean }) {\n this.value = id;\n this.dsChange.emit(id);\n if (options?.focus !== false) {\n this.focusTab(id);\n }\n }\n\n private focusTab(id: string) {\n const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n btn?.focus({ preventScroll: true });\n }\n\n /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n @Watch('value')\n onValueChange(next: string, prev: string | undefined) {\n if (prev === undefined || next === prev) return;\n\n requestAnimationFrame(() => {\n const active = document.activeElement as HTMLElement | null;\n if (!active || !this.el.contains(active)) return;\n\n const activeId = active.getAttribute('data-tab-id');\n if (activeId === next) return;\n\n const nextTab = this.el.querySelector(`[data-tab-id=\"${next}\"]`) as HTMLElement | null;\n if (nextTab) {\n nextTab.focus({ preventScroll: true });\n } else {\n active.blur();\n }\n });\n }\n\n /**\n * Find the next non-disabled tab index relative to `from`, stepping by `step`.\n * Returns `from` unchanged if no other enabled tab exists.\n */\n private findEnabled(from: number, step: 1 | -1): number {\n const tabs = this.selectableTabs;\n const len = tabs.length;\n for (let n = 0; n < len; n++) {\n const i = (from + step * (n + 1) + len * (n + 1)) % len;\n if (!tabs[i]?.disabled) return i;\n }\n return from;\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n const tabs = this.selectableTabs;\n if (!tabs.length) return;\n\n const currentIdx = tabs.findIndex(t => t.id === this.value);\n const isVertical = this.orientation === 'vertical';\n\n let nextIdx: number | null = null;\n\n if (!isVertical) {\n if (e.key === 'ArrowRight') {\n nextIdx = this.findEnabled(currentIdx, 1);\n } else if (e.key === 'ArrowLeft') {\n nextIdx = this.findEnabled(currentIdx, -1);\n }\n } else {\n if (e.key === 'ArrowDown') {\n nextIdx = this.findEnabled(currentIdx, 1);\n } else if (e.key === 'ArrowUp') {\n nextIdx = this.findEnabled(currentIdx, -1);\n }\n }\n\n if (e.key === 'Home') {\n const first = tabs.findIndex(t => !t.disabled);\n nextIdx = first === -1 ? null : first;\n } else if (e.key === 'End') {\n const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);\n nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n }\n\n if (nextIdx !== null) {\n e.preventDefault();\n const next = tabs[nextIdx];\n this.selectTab(next.id);\n }\n }\n\n private getBgClass(): string {\n if (!this.background || this.background === 'faint') return '';\n if (this.background === 'always-dark') return 'on-always-dark';\n return `on-${this.background}`;\n }\n\n render() {\n const bgClass = this.getBgClass();\n const isVertical = this.orientation === 'vertical';\n\n return (\n <Host class=\"tab-group-host\">\n <div\n role=\"tablist\"\n class={{ 'tab-list': true, 'tab-list--vertical': isVertical }}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-orientation={isVertical ? 'vertical' : undefined}\n >\n {this.tabs.map((tab, index) => {\n if (isTabDivider(tab)) {\n return (\n <div\n key={`divider-${index}`}\n class={{\n 'tab-divider': true,\n 'tab-divider--vertical': isVertical,\n }}\n aria-hidden=\"true\"\n >\n <div class=\"tab-divider__line\" />\n </div>\n );\n }\n\n const isSelected = tab.id === this.value;\n return (\n <button\n key={tab.id}\n type=\"button\"\n role=\"tab\"\n data-tab-id={tab.id}\n class={{\n tab: true,\n 'tab--selected': isSelected,\n [bgClass]: !!bgClass,\n }}\n aria-selected={isSelected}\n aria-disabled={tab.disabled || undefined}\n aria-controls={tab.panelId ?? undefined}\n disabled={tab.disabled}\n tabIndex={isSelected ? 0 : -1}\n onClick={() => !tab.disabled && this.selectTab(tab.id)}\n >\n <span class={{\n tab__label: true,\n 'tab__label--dot': !!tab.dot,\n [isSelected ? 'text-body-small-emphasis' : 'text-body-small']: true,\n }}>\n {tab.label}\n {tab.dot && (\n <ds-badge\n class=\"tab__dot\"\n variant=\"dot\"\n background=\"var(--_dot-ring)\"\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n </button>\n );\n })}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"4IAAA,MAAMA,EAAc,IAAM,q7I,MCebC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,6EAQ2BC,KAAAC,MAAgB,GACjCD,KAAAE,KAAkB,GAIlBF,KAAAG,YAAyC,YA4KlD,CAxKC,kBAAYC,GACV,OAAOC,EAAkBL,KAAKE,K,CAGxB,SAAAI,CAAUC,EAAYC,GAC5BR,KAAKC,MAAQM,EACbP,KAAKS,SAASC,KAAKH,GACnB,GAAIC,GAASG,QAAU,MAAO,CAC5BX,KAAKY,SAASL,E,EAIV,QAAAK,CAASL,GACf,MAAMM,EAAMb,KAAKc,GAAGC,cAAc,iBAAiBR,OACnDM,GAAKF,MAAM,CAAEK,cAAe,M,CAK9B,aAAAC,CAAcC,EAAcC,GAC1B,GAAIA,IAASC,WAAaF,IAASC,EAAM,OAEzCE,uBAAsB,KACpB,MAAMC,EAASC,SAASC,cACxB,IAAKF,IAAWtB,KAAKc,GAAGW,SAASH,GAAS,OAE1C,MAAMI,EAAWJ,EAAOK,aAAa,eACrC,GAAID,IAAaR,EAAM,OAEvB,MAAMU,EAAU5B,KAAKc,GAAGC,cAAc,iBAAiBG,OACvD,GAAIU,EAAS,CACXA,EAAQjB,MAAM,CAAEK,cAAe,M,KAC1B,CACLM,EAAOO,M,KASL,WAAAC,CAAYC,EAAcC,GAChC,MAAM9B,EAAOF,KAAKI,eAClB,MAAM6B,EAAM/B,EAAKgC,OACjB,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAKE,IAAK,CAC5B,MAAMC,GAAKL,EAAOC,GAAQG,EAAI,GAAKF,GAAOE,EAAI,IAAMF,EACpD,IAAK/B,EAAKkC,IAAIC,SAAU,OAAOD,C,CAEjC,OAAOL,C,CAIT,aAAAO,CAAcC,GACZ,MAAMrC,EAAOF,KAAKI,eAClB,IAAKF,EAAKgC,OAAQ,OAElB,MAAMM,EAAatC,EAAKuC,WAAUC,GAAKA,EAAEnC,KAAOP,KAAKC,QACrD,MAAM0C,EAAa3C,KAAKG,cAAgB,WAExC,IAAIyC,EAAyB,KAE7B,IAAKD,EAAY,CACf,GAAIJ,EAAEM,MAAQ,aAAc,CAC1BD,EAAU5C,KAAK8B,YAAYU,EAAY,E,MAClC,GAAID,EAAEM,MAAQ,YAAa,CAChCD,EAAU5C,KAAK8B,YAAYU,GAAY,E,MAEpC,CACL,GAAID,EAAEM,MAAQ,YAAa,CACzBD,EAAU5C,KAAK8B,YAAYU,EAAY,E,MAClC,GAAID,EAAEM,MAAQ,UAAW,CAC9BD,EAAU5C,KAAK8B,YAAYU,GAAY,E,EAI3C,GAAID,EAAEM,MAAQ,OAAQ,CACpB,MAAMC,EAAQ5C,EAAKuC,WAAUC,IAAMA,EAAEL,WACrCO,EAAUE,KAAU,EAAK,KAAOA,C,MAC3B,GAAIP,EAAEM,MAAQ,MAAO,CAC1B,MAAME,EAAc,IAAI7C,GAAM8C,UAAUP,WAAUC,IAAMA,EAAEL,WAC1DO,EAAUG,KAAgB,EAAK,KAAO7C,EAAKgC,OAAS,EAAIa,C,CAG1D,GAAIH,IAAY,KAAM,CACpBL,EAAEU,iBACF,MAAM/B,EAAOhB,EAAK0C,GAClB5C,KAAKM,UAAUY,EAAKX,G,EAIhB,UAAA2C,GACN,IAAKlD,KAAKmD,YAAcnD,KAAKmD,aAAe,QAAS,MAAO,GAC5D,GAAInD,KAAKmD,aAAe,cAAe,MAAO,iBAC9C,MAAO,MAAMnD,KAAKmD,Y,CAGpB,MAAAC,GACE,MAAMC,EAAUrD,KAAKkD,aACrB,MAAMP,EAAa3C,KAAKG,cAAgB,WAExC,OACEmD,EAACC,EAAI,CAAAV,IAAA,2CAACW,MAAM,kBACVF,EAAA,OAAAT,IAAA,2CACEY,KAAK,UACLD,MAAO,CAAE,WAAY,KAAM,qBAAsBb,GAAY,aACjD3C,KAAK0D,UAAS,kBACT1D,KAAK2D,eAAc,mBAClBhB,EAAa,WAAavB,WAE3CpB,KAAKE,KAAK0D,KAAI,CAACC,EAAKC,KACnB,GAAIC,EAAaF,GAAM,CACrB,OACEP,EAAA,OACET,IAAK,WAAWiB,IAChBN,MAAO,CACL,cAAe,KACf,wBAAyBb,GAC1B,cACW,QAEZW,EAAA,OAAKE,MAAM,sB,CAKjB,MAAMQ,EAAaH,EAAItD,KAAOP,KAAKC,MACnC,OACEqD,EAAA,UACET,IAAKgB,EAAItD,GACT0D,KAAK,SACLR,KAAK,MAAK,cACGI,EAAItD,GACjBiD,MAAO,CACLK,IAAK,KACL,gBAAiBG,EACjBX,CAACA,KAAYA,GACd,gBACcW,EAAU,gBACVH,EAAIxB,UAAYjB,UAAS,gBACzByC,EAAIK,SAAW9C,UAC9BiB,SAAUwB,EAAIxB,SACd8B,SAAUH,EAAa,GAAI,EAC3BI,QAAS,KAAOP,EAAIxB,UAAYrC,KAAKM,UAAUuD,EAAItD,KAEnD+C,EAAA,QAAME,MAAO,CACXa,WAAY,KACZ,oBAAqBR,EAAIS,IACzB,CAACN,EAAa,2BAA6B,mBAAoB,OAE9DH,EAAIU,MACJV,EAAIS,KACHhB,EAAA,YACEE,MAAM,WACNgB,QAAQ,MACRrB,WAAW,mBACXoB,MAAM,GAAE,cACI,UAIX,K","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","orientation","selectableTabs","getSelectableTabs","selectTab","id","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","nextTab","blur","findEnabled","from","step","len","length","n","i","disabled","handleKeyDown","e","currentIdx","findIndex","t","isVertical","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabel","ariaLabelledby","map","tab","index","isTabDivider","isSelected","type","panelId","tabIndex","onClick","tab__label","dot","label","variant"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.tab-list {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n position: relative;\n width: max-content;\n max-width: 100%;\n height: var(--dimension-size-400);\n padding: calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));\n background-color: var(--color-background-secondary);\n border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n border-radius: var(--dimension-radius-half);\n box-sizing: border-box;\n}\n\n/* Vertical orientation */\n.tab-list--vertical {\n flex-direction: column;\n align-items: stretch;\n}\n\n.tab {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-050);\n background-color: transparent;\n border: var(--dimension-stroke-width-012) solid transparent;\n border-radius: var(--dimension-radius-half);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n color: var(--color-foreground-secondary);\n position: relative;\n /* Only transition color — hover bg is instant (see ::after below) */\n transition: color var(--effect-motion-short-2);\n flex-shrink: 0;\n height: var(--dimension-size-300);\n min-width: var(--dimension-size-400);\n box-sizing: border-box;\n --_hover-bg: var(--color-interaction-hover);\n --_pressed-bg: var(--color-interaction-pressed);\n --_dot: var(--color-foreground-bold-brand);\n --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.tab::after {\n content: '';\n position: absolute;\n inset: calc(var(--dimension-stroke-width-012) * -1);\n border-radius: inherit;\n background: transparent;\n pointer-events: none;\n transition: none;\n}\n\n.tab:hover::after { background: var(--_hover-bg); transition: none; }\n.tab:active::after { background: var(--_pressed-bg); transition: none; }\n\n/* Focus ring only — no persistent hover fill from keyboard focus */\n.tab:focus-visible:not(:hover):not(:active)::after {\n background: transparent;\n}\n\n.tab--selected {\n color: var(--color-foreground-primary);\n background-color: var(--color-background-primary);\n border-color: var(--color-border-tertiary);\n}\n\n.tab:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n.tab:disabled,\n.tab[aria-disabled=\"true\"] {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Vertical tabs read as a list — left-align the label */\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n/* Label — dot anchors top-right like BarNav action icon zone */\n.tab__label {\n position: relative;\n display: inline-flex;\n align-items: center;\n padding: 0 var(--dimension-space-025);\n white-space: nowrap;\n}\n\n/* Clearance for top-right dot — slightly less than space-025 + space-075 */\n.tab__label--dot {\n padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n/* Notification dot — top-right corner of the label zone */\n.tab__dot {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n}\n\n/* Background context */\n.on-medium {\n --_hover-bg: var(--color-interaction-on-medium-background-hover);\n --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n --_dot-ring: var(--color-background-medium-neutral);\n}\n\n.on-bold {\n --_hover-bg: var(--color-interaction-on-bold-background-hover);\n --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n --_dot-ring: var(--color-background-bold-neutral);\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n --_hover-bg: var(--color-interaction-on-strong-background-hover);\n --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n --_dot-ring: var(--color-background-strong-neutral);\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n --_hover-bg: var(--color-always-dark-interaction-hover);\n --_pressed-bg: var(--color-always-dark-interaction-pressed);\n --_dot-ring: var(--color-always-dark-background);\n color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n/* In-tablist visual group separator — not focusable, skipped by keyboard nav.\n Pill tabs use text-body-small (line-height sm / 16px). Width is only the line;\n `.tab-list` gap supplies the same spacing as between tabs. */\n.tab-divider {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--dimension-stroke-width-012);\n align-self: center;\n padding: 0;\n flex-shrink: 0;\n pointer-events: none;\n}\n\n.tab-divider__line {\n width: var(--dimension-stroke-width-012);\n height: var(--typography-lineheight-sm);\n flex-shrink: 0;\n background-color: var(--color-border-secondary);\n}\n\n.tab-divider--vertical {\n width: auto;\n height: var(--dimension-stroke-width-012);\n align-self: stretch;\n padding: 0;\n}\n\n.tab-divider--vertical .tab-divider__line {\n width: auto;\n height: var(--dimension-stroke-width-012);\n align-self: stretch;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\n@Component({\n tag: 'ds-tab-group',\n styleUrl: 'TabGroup.css',\n scoped: true,\n})\nexport class TabGroup {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop() tabs: TabItem[] = [];\n @Prop() background: TabBackground | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n @Event() dsChange!: EventEmitter<string>;\n\n private get selectableTabs(): TabItemTab[] {\n return getSelectableTabs(this.tabs);\n }\n\n private selectTab(id: string, options?: { focus?: boolean }) {\n this.value = id;\n this.dsChange.emit(id);\n if (options?.focus !== false) {\n this.focusTab(id);\n }\n }\n\n private focusTab(id: string) {\n const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n btn?.focus({ preventScroll: true });\n }\n\n /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n @Watch('value')\n onValueChange(next: string, prev: string | undefined) {\n if (prev === undefined || next === prev) return;\n\n requestAnimationFrame(() => {\n const active = document.activeElement as HTMLElement | null;\n if (!active || !this.el.contains(active)) return;\n\n const activeId = active.getAttribute('data-tab-id');\n if (activeId === next) return;\n\n const nextTab = this.el.querySelector(`[data-tab-id=\"${next}\"]`) as HTMLElement | null;\n if (nextTab) {\n nextTab.focus({ preventScroll: true });\n } else {\n active.blur();\n }\n });\n }\n\n /**\n * Find the next non-disabled tab index relative to `from`, stepping by `step`.\n * Returns `from` unchanged if no other enabled tab exists.\n */\n private findEnabled(from: number, step: 1 | -1): number {\n const tabs = this.selectableTabs;\n const len = tabs.length;\n for (let n = 0; n < len; n++) {\n const i = (from + step * (n + 1) + len * (n + 1)) % len;\n if (!tabs[i]?.disabled) return i;\n }\n return from;\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n const tabs = this.selectableTabs;\n if (!tabs.length) return;\n\n const currentIdx = tabs.findIndex(t => t.id === this.value);\n const isVertical = this.orientation === 'vertical';\n\n let nextIdx: number | null = null;\n\n if (!isVertical) {\n if (e.key === 'ArrowRight') {\n nextIdx = this.findEnabled(currentIdx, 1);\n } else if (e.key === 'ArrowLeft') {\n nextIdx = this.findEnabled(currentIdx, -1);\n }\n } else {\n if (e.key === 'ArrowDown') {\n nextIdx = this.findEnabled(currentIdx, 1);\n } else if (e.key === 'ArrowUp') {\n nextIdx = this.findEnabled(currentIdx, -1);\n }\n }\n\n if (e.key === 'Home') {\n const first = tabs.findIndex(t => !t.disabled);\n nextIdx = first === -1 ? null : first;\n } else if (e.key === 'End') {\n const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);\n nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n }\n\n if (nextIdx !== null) {\n e.preventDefault();\n const next = tabs[nextIdx];\n this.selectTab(next.id);\n }\n }\n\n private getBgClass(): string {\n if (!this.background || this.background === 'faint') return '';\n if (this.background === 'always-dark') return 'on-always-dark';\n return `on-${this.background}`;\n }\n\n render() {\n const bgClass = this.getBgClass();\n const isVertical = this.orientation === 'vertical';\n\n return (\n <Host class=\"tab-group-host\">\n <div\n role=\"tablist\"\n class={{ 'tab-list': true, 'tab-list--vertical': isVertical }}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-orientation={isVertical ? 'vertical' : undefined}\n >\n {this.tabs.map((tab, index) => {\n if (isTabDivider(tab)) {\n return (\n <div\n key={`divider-${index}`}\n class={{\n 'tab-divider': true,\n 'tab-divider--vertical': isVertical,\n }}\n aria-hidden=\"true\"\n >\n <div class=\"tab-divider__line\" />\n </div>\n );\n }\n\n const isSelected = tab.id === this.value;\n return (\n <button\n key={tab.id}\n type=\"button\"\n role=\"tab\"\n data-tab-id={tab.id}\n class={{\n tab: true,\n 'tab--selected': isSelected,\n [bgClass]: !!bgClass,\n }}\n aria-selected={isSelected}\n aria-disabled={tab.disabled || undefined}\n aria-controls={tab.panelId ?? undefined}\n disabled={tab.disabled}\n tabIndex={isSelected ? 0 : -1}\n onClick={() => !tab.disabled && this.selectTab(tab.id)}\n >\n <span class={{\n tab__label: true,\n 'tab__label--dot': !!tab.dot,\n [isSelected ? 'text-body-small-emphasis' : 'text-body-small']: true,\n }}>\n {tab.label}\n {tab.dot && (\n <ds-badge\n class=\"tab__dot\"\n variant=\"dot\"\n background=\"var(--_dot-ring)\"\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n </button>\n );\n })}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|