@ds-mo/ui 8.1.0 → 8.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/.build-stamp +1 -1
- package/dist/agent.json +501 -47
- package/dist/angular/ds-field.d.ts +1 -1
- package/dist/angular/ds-field.js +3 -3
- package/dist/angular/ds-input.d.ts +1 -1
- package/dist/angular/ds-input.js +3 -3
- package/dist/angular/ds-panel-nav.d.ts +1 -1
- package/dist/angular/ds-panel-nav.js +3 -3
- package/dist/angular/ds-radio.d.ts +18 -0
- package/dist/angular/{ds-radio-group.js → ds-radio.js} +12 -12
- package/dist/angular/ds-slider.d.ts +12 -3
- package/dist/angular/ds-slider.js +8 -4
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +1 -1
- package/dist/angular/proxies.d.ts +1 -1
- package/dist/angular/proxies.js +1 -1
- package/dist/angular/radio-value-accessor.d.ts +1 -1
- package/dist/angular/radio-value-accessor.js +2 -2
- package/dist/components/ds-app-shell.js +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js.map +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card.js +1 -1
- package/dist/components/ds-chart-bar.js +1 -1
- package/dist/components/ds-chart-bar.js.map +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-donut.js.map +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-line.js +1 -1
- package/dist/components/ds-chart-line.js.map +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-field.js.map +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-input.js.map +1 -1
- package/dist/components/ds-loader.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-modal.js.map +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js.map +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/{ds-radio-group.d.ts → ds-radio.d.ts} +4 -4
- package/dist/components/ds-radio.js +2 -0
- package/dist/components/ds-radio.js.map +1 -0
- package/dist/components/ds-select-multi.js +1 -1
- package/dist/components/ds-select-multi.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tab-group.js.map +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-CTmsQjsE.js → p-BU_gxTiw.js} +2 -2
- package/dist/components/p-BU_gxTiw.js.map +1 -0
- package/dist/components/{p-Ckiwpsgw.js → p-BjhTeU17.js} +2 -2
- package/dist/components/{p-Du9UUSJ5.js → p-C91iXoXj.js} +2 -2
- package/dist/components/{p-WdtWRvVr.js → p-CDu_LfhF.js} +2 -2
- package/dist/components/{p-_zP4v-Al.js → p-CSyIAX11.js} +2 -2
- package/dist/components/p-CSyIAX11.js.map +1 -0
- package/dist/components/{p-BMbadvZo.js → p-Cj4vIqqx.js} +2 -2
- package/dist/components/{p-BMbadvZo.js.map → p-Cj4vIqqx.js.map} +1 -1
- package/dist/components/{p-wxw8arTd.js → p-Cpr3K41-.js} +1 -1
- package/dist/components/{p-wxw8arTd.js.map → p-Cpr3K41-.js.map} +1 -1
- package/dist/components/{p-CwaC4wLu.js → p-CqsgiNwB.js} +2 -2
- package/dist/components/p-CqsgiNwB.js.map +1 -0
- package/dist/components/{p-JsVSx7ZR.js → p-DHJZDpNk.js} +2 -2
- package/dist/components/{p-DDBLO7bY.js → p-DKVDYHxb.js} +2 -2
- package/dist/components/p-DRqbwDzo.js +2 -0
- package/dist/components/p-DRqbwDzo.js.map +1 -0
- package/dist/components/{p-B2FhhQba.js → p-KeMecQN9.js} +2 -2
- package/dist/components/p-NwPqPArp.js +2 -0
- package/dist/components/p-NwPqPArp.js.map +1 -0
- package/dist/components/{p-COzps7J4.js → p-PP5602IN.js} +2 -2
- package/dist/components/p-PP5602IN.js.map +1 -0
- package/dist/components/p-VKIsOVza.js +2 -0
- package/dist/components/p-VKIsOVza.js.map +1 -0
- package/dist/components/p-kGSowBA8.js +2 -0
- package/dist/components/{p-auwU64d8.js.map → p-kGSowBA8.js.map} +1 -1
- package/dist/docs/components.json +1391 -166
- package/dist/lib/components/Text/text-types.d.ts +1 -1
- package/dist/react/components.d.ts +1 -1
- package/dist/react/components.js +1 -1
- package/dist/react/ds-radio.d.ts +12 -0
- package/dist/react/ds-radio.js +12 -0
- package/dist/react/ds-slider.d.ts +4 -3
- package/dist/react/ds-slider.js +4 -1
- package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +2 -1
- package/dist/types/components/Field/Field.d.ts +37 -2
- package/dist/types/components/Icon/Icon.d.ts +6 -1
- package/dist/types/components/Input/Input.d.ts +26 -0
- package/dist/types/components/Loader/Loader.d.ts +6 -1
- package/dist/types/components/Menu/Menu.d.ts +6 -0
- package/dist/types/components/Modal/Modal.d.ts +5 -0
- package/dist/types/components/PanelNav/PanelNav.d.ts +9 -0
- package/dist/types/components/{RadioGroup/RadioGroup.d.ts → Radio/Radio.d.ts} +18 -2
- package/dist/types/components/Radio/index.d.ts +2 -0
- package/dist/types/components/Slider/Slider.d.ts +101 -7
- package/dist/types/components/Switch/Switch.d.ts +4 -0
- package/dist/types/components/TabGroup/TabGroup.d.ts +1 -0
- package/dist/types/components/Text/Text.d.ts +6 -0
- package/dist/types/components/Text/text-types.d.ts +1 -1
- package/dist/types/components.d.ts +431 -46
- package/package.json +9 -4
- package/dist/angular/ds-radio-group.d.ts +0 -15
- package/dist/components/ds-radio-group.js +0 -2
- package/dist/components/ds-radio-group.js.map +0 -1
- package/dist/components/p-BEmVLLnN.js +0 -2
- package/dist/components/p-BEmVLLnN.js.map +0 -1
- package/dist/components/p-BcB-zkOx.js +0 -2
- package/dist/components/p-BcB-zkOx.js.map +0 -1
- package/dist/components/p-COzps7J4.js.map +0 -1
- package/dist/components/p-CTmsQjsE.js.map +0 -1
- package/dist/components/p-CwaC4wLu.js.map +0 -1
- package/dist/components/p-_zP4v-Al.js.map +0 -1
- package/dist/components/p-auwU64d8.js +0 -2
- package/dist/components/p-f0a1l4Uc.js +0 -2
- package/dist/components/p-f0a1l4Uc.js.map +0 -1
- package/dist/react/ds-radio-group.d.ts +0 -12
- package/dist/react/ds-radio-group.js +0 -12
- package/dist/types/components/RadioGroup/index.d.ts +0 -2
- /package/dist/components/{p-Ckiwpsgw.js.map → p-BjhTeU17.js.map} +0 -0
- /package/dist/components/{p-Du9UUSJ5.js.map → p-C91iXoXj.js.map} +0 -0
- /package/dist/components/{p-WdtWRvVr.js.map → p-CDu_LfhF.js.map} +0 -0
- /package/dist/components/{p-JsVSx7ZR.js.map → p-DHJZDpNk.js.map} +0 -0
- /package/dist/components/{p-DDBLO7bY.js.map → p-DKVDYHxb.js.map} +0 -0
- /package/dist/components/{p-B2FhhQba.js.map → p-KeMecQN9.js.map} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ds-mo/ui",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.2.0",
|
|
4
4
|
"description": "CompoMo — composable web components styled with TokoMo design tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -81,10 +81,13 @@
|
|
|
81
81
|
"prestorybook:build": "node scripts/write-build-stamp.mjs",
|
|
82
82
|
"storybook": "node scripts/storybook-dev.mjs",
|
|
83
83
|
"storybook:build": "storybook build",
|
|
84
|
+
"storybook:test:a11y": "playwright test --config playwright.storybook.config.ts",
|
|
85
|
+
"storybook:test:a11y:update": "STORYBOOK_A11Y_UPDATE=1 playwright test --config playwright.storybook.config.ts",
|
|
84
86
|
"clean": "rm -rf dist",
|
|
85
87
|
"clean:framework-proxies": "node scripts/clean-framework-proxies.mjs",
|
|
86
88
|
"typecheck": "tsc --noEmit",
|
|
87
|
-
"
|
|
89
|
+
"typecheck:storybook": "tsc -p tsconfig.storybook-tests.json",
|
|
90
|
+
"lint": "eslint src/ playwright.storybook.config.ts tests/storybook/ && npm run lint:css",
|
|
88
91
|
"lint:css": "stylelint \"src/wc/components/**/*.css\" \"src/wc/utils/**/*.css\"",
|
|
89
92
|
"registry:build": "node scripts/build-registry.mjs",
|
|
90
93
|
"agent:validate": "node scripts/validate-agent-contract.mjs",
|
|
@@ -100,7 +103,7 @@
|
|
|
100
103
|
"@angular/core": ">=19 <23",
|
|
101
104
|
"@angular/forms": ">=19 <23",
|
|
102
105
|
"@ds-mo/icons": "^6.2.0",
|
|
103
|
-
"@ds-mo/tokens": "^3.1.
|
|
106
|
+
"@ds-mo/tokens": "^3.1.1",
|
|
104
107
|
"react": "^18 || ^19",
|
|
105
108
|
"react-dom": "^18 || ^19"
|
|
106
109
|
},
|
|
@@ -125,19 +128,21 @@
|
|
|
125
128
|
"@angular/forms": "^22.0.4",
|
|
126
129
|
"@axe-core/playwright": "^4.12.1",
|
|
127
130
|
"@ds-mo/icons": "^6.2.0",
|
|
128
|
-
"@ds-mo/tokens": "^3.1.
|
|
131
|
+
"@ds-mo/tokens": "^3.1.1",
|
|
129
132
|
"@eslint/js": "^10.0.1",
|
|
130
133
|
"@figma/code-connect": "^1.4.9",
|
|
131
134
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
132
135
|
"@playwright/test": "^1.55.0",
|
|
133
136
|
"@stencil/angular-output-target": "^1.4.0",
|
|
134
137
|
"@stencil/core": "^4.43.5",
|
|
138
|
+
"@storybook/addon-a11y": "^10.5.1",
|
|
135
139
|
"@storybook/addon-docs": "^10.5.0",
|
|
136
140
|
"@storybook/web-components": "^10.5.0",
|
|
137
141
|
"@storybook/web-components-vite": "^10.5.0",
|
|
138
142
|
"@types/d3-array": "^3.2.2",
|
|
139
143
|
"@types/d3-scale": "^4.0.9",
|
|
140
144
|
"@types/d3-shape": "^3.1.8",
|
|
145
|
+
"@types/node": "^24.13.3",
|
|
141
146
|
"@types/react": "^19.2.17",
|
|
142
147
|
"@types/react-dom": "^19.2.3",
|
|
143
148
|
"ajv": "^8.20.0",
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
|
|
2
|
-
import type { Components } from '@ds-mo/ui/components';
|
|
3
|
-
import type { DsRadioGroupCustomEvent } from '@ds-mo/ui/components';
|
|
4
|
-
import * as i0 from "@angular/core";
|
|
5
|
-
export declare class DsRadioGroup {
|
|
6
|
-
protected z: NgZone;
|
|
7
|
-
protected el: HTMLDsRadioGroupElement;
|
|
8
|
-
dsChange: EventEmitter<DsRadioGroupCustomEvent<string>>;
|
|
9
|
-
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
10
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<DsRadioGroup, never>;
|
|
11
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DsRadioGroup, "ds-radio-group", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "name": { "alias": "name"; "required": false; }; "options": { "alias": "options"; "required": false; }; "required": { "alias": "required"; "required": false; }; "requiredMessage": { "alias": "requiredMessage"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "dsChange": "dsChange"; }, never, ["*"], true, never>;
|
|
12
|
-
}
|
|
13
|
-
export declare interface DsRadioGroup extends Components.DsRadioGroup {
|
|
14
|
-
dsChange: EventEmitter<DsRadioGroupCustomEvent<string>>;
|
|
15
|
-
}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as i,H as e,c as s,h as r,a as o,t}from"./index.js";import{d as a}from"./p-CwaC4wLu.js";const n=()=>`.ds-control-inactive.sc-ds-radio-group-h,.ds-control-inactive.sc-ds-radio-group{opacity:0.25;pointer-events:none;cursor:not-allowed}.group.sc-ds-radio-group{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.group--horizontal.sc-ds-radio-group{flex-direction:row;gap:var(--dimension-space-100)}.radio-item.sc-ds-radio-group{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2);outline:none}.radio-item.sc-ds-radio-group:hover{background-color:var(--color-interaction-hover)}.radio-item.sc-ds-radio-group:active{background-color:var(--color-interaction-pressed)}.radio-item.sc-ds-radio-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.circle.sc-ds-radio-group{width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);flex-shrink:0;border:var(--dimension-stroke-width-018) solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-half);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:border-color var(--effect-motion-short-2)}.circle--checked.sc-ds-radio-group{border-color:var(--color-foreground-primary)}.dot.sc-ds-radio-group{width:var(--dimension-size-150);height:var(--dimension-size-150);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-primary)}.radio-label.sc-ds-radio-group{flex:1;min-width:0}`;const d=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(i?null:this.value);const e=this.required&&!i&&this.value.length===0;this.internals.setValidity(e?{valueMissing:true}:{},e?this.requiredMessage:"")}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=typeof i==="string"?i:""}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(i){const e=this.activeItems;if(!e.length)return;const s=e.find((i=>i===document.activeElement));if(!s)return;const r=e.indexOf(s);let o=-1;switch(i.key){case"ArrowDown":case"ArrowRight":i.preventDefault();o=(r+1)%e.length;break;case"ArrowUp":case"ArrowLeft":i.preventDefault();o=(r-1+e.length)%e.length;break;case"Home":i.preventDefault();o=0;break;case"End":i.preventDefault();o=e.length-1;break}if(o>=0){e[o].focus();const i=e[o].dataset["value"];if(i&&i!==this.value){this.value=i;this.dsChange.emit(i)}}}selectItem(i){if(this.isInactive||this.disabled||this.formDisabled)return;if(i!==this.value){this.value=i;this.dsChange.emit(i)}}render(){const i=this.isInactive||this.disabled||this.formDisabled;const e=this.options.findIndex((i=>i.value===this.value));const s=this.options.findIndex((e=>!i&&!e.isInactive));const t=e>=0&&!i&&!this.options[e]?.isInactive?e:s;return r(o,{key:"dd7e25b89426f9ffeb7759394ded6d72a4033273",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,class:{group:true,"group--horizontal":this.direction==="horizontal"}},this.options.map(((e,s)=>{const o=i||!!e.isInactive;const a=e.value===this.value;const n=o?-1:s===t?0:-1;return r("div",{key:e.value,role:"radio","aria-checked":String(a),"aria-disabled":o?"true":undefined,tabIndex:n,"data-radio-item":true,"data-value":e.value,"data-inactive":o||undefined,class:{"radio-item":true,"ds-control-inactive":o},onClick:()=>!o&&this.selectItem(e.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!o){i.preventDefault();this.selectItem(e.value)}}},r("span",{class:{circle:true,"circle--checked":a}},a&&r("span",{class:"dot"})),r("ds-text",{class:"radio-label",as:"span",variant:"text-body-medium"},e.label))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return n()}},[66,"ds-radio-group",{options:[16],value:[1025],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function c(){if(typeof customElements==="undefined"){return}const i=["ds-radio-group","ds-text"];i.forEach((i=>{switch(i){case"ds-radio-group":if(!customElements.get(t(i))){customElements.define(t(i),d)}break;case"ds-text":if(!customElements.get(t(i))){a()}break}}))}c();const l=d;const u=c;export{l as DsRadioGroup,u as defineCustomElement};
|
|
2
|
-
//# sourceMappingURL=ds-radio-group.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["radioGroupCss","RadioGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","disabled","required","requiredMessage","direction","isInactive","ariaLabel","initialValue","formDisabled","componentWillLoad","syncFormValue","inactive","internals","setFormValue","missing","length","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","activeItems","Array","from","el","querySelectorAll","handleKeyDown","e","items","focused","find","item","document","activeElement","idx","indexOf","next","key","preventDefault","focus","nextValue","dataset","dsChange","emit","selectItem","optValue","render","selectedIdx","findIndex","o","firstActiveIdx","focusableIdx","h","Host","role","ariaLabelledby","class","group","map","opt","i","isItemInactive","isChecked","tabIdx","String","undefined","tabIndex","onClick","onKeyDown","circle","as","variant","label"],"sources":["src/wc/components/RadioGroup/RadioGroup.css?tag=ds-radio-group&encapsulation=scoped","src/wc/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n.group {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-025);\n}\n\n.group--horizontal {\n flex-direction: row;\n gap: var(--dimension-space-100);\n}\n\n/* ── Radio item ──────────────────────────────────────────────────────────── */\n\n.radio-item {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-075);\n height: var(--dimension-size-400);\n box-sizing: border-box;\n cursor: pointer;\n user-select: none;\n border-radius: var(--dimension-radius-075);\n transition: background-color var(--effect-motion-short-2);\n outline: none;\n}\n\n.radio-item:hover {\n background-color: var(--color-interaction-hover);\n}\n\n.radio-item:active {\n background-color: var(--color-interaction-pressed);\n}\n\n.radio-item:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n/* ── Circle indicator ────────────────────────────────────────────────────── */\n\n.circle {\n width: var(--dimension-iconography-md);\n height: var(--dimension-iconography-md);\n flex-shrink: 0;\n border: var(--dimension-stroke-width-018) solid var(--color-foreground-secondary);\n border-radius: var(--dimension-radius-half);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n transition: border-color var(--effect-motion-short-2);\n}\n\n.circle--checked {\n border-color: var(--color-foreground-primary);\n}\n\n.dot {\n width: var(--dimension-size-150);\n height: var(--dimension-size-150);\n border-radius: var(--dimension-radius-half);\n background-color: var(--color-foreground-primary);\n}\n\n/* ── Label ───────────────────────────────────────────────────────────────── */\n\n.radio-label {\n flex: 1;\n min-width: 0;\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\n\nexport interface RadioOption {\n label: string;\n value: string;\n isInactive?: boolean;\n}\n\n@Component({\n tag: 'ds-radio-group',\n styleUrl: 'RadioGroup.css',\n scoped: true,\n formAssociated: true,\n})\nexport class RadioGroup {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n @Prop() options: RadioOption[] = [];\n @Prop({ mutable: true }) value: string = '';\n @Prop({ reflect: true }) name: string | undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) required: boolean = false;\n @Prop() requiredMessage: string = 'This field is required.';\n @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n @Prop() isInactive: boolean = false;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n\n private initialValue = '';\n @State() private formDisabled = false;\n\n componentWillLoad() {\n this.initialValue = this.value;\n this.syncFormValue();\n }\n\n @Watch('value')\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('required')\n syncFormValue() {\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n this.internals.setFormValue(inactive ? null : this.value);\n const missing = this.required && !inactive && this.value.length === 0;\n this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n this.value = typeof state === 'string' ? state : '';\n }\n\n private get activeItems(): HTMLElement[] {\n return Array.from(this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])'));\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n const items = this.activeItems;\n if (!items.length) return;\n\n const focused = items.find(item => item === document.activeElement);\n if (!focused) return;\n\n const idx = items.indexOf(focused);\n let next = -1;\n\n switch (e.key) {\n case 'ArrowDown':\n case 'ArrowRight':\n e.preventDefault();\n next = (idx + 1) % items.length;\n break;\n case 'ArrowUp':\n case 'ArrowLeft':\n e.preventDefault();\n next = (idx - 1 + items.length) % items.length;\n break;\n case 'Home':\n e.preventDefault();\n next = 0;\n break;\n case 'End':\n e.preventDefault();\n next = items.length - 1;\n break;\n }\n\n if (next >= 0) {\n items[next].focus();\n const nextValue = items[next].dataset['value'];\n if (nextValue && nextValue !== this.value) {\n this.value = nextValue;\n this.dsChange.emit(nextValue);\n }\n }\n }\n\n private selectItem(optValue: string) {\n if (this.isInactive || this.disabled || this.formDisabled) return;\n if (optValue !== this.value) {\n this.value = optValue;\n this.dsChange.emit(optValue);\n }\n }\n\n render() {\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n const selectedIdx = this.options.findIndex(o => o.value === this.value);\n const firstActiveIdx = this.options.findIndex(o => !inactive && !o.isInactive);\n const focusableIdx = selectedIdx >= 0 && !inactive && !this.options[selectedIdx]?.isInactive\n ? selectedIdx\n : firstActiveIdx;\n\n return (\n <Host\n role=\"radiogroup\"\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n class={{ group: true, 'group--horizontal': this.direction === 'horizontal' }}\n >\n {this.options.map((opt, i) => {\n const isItemInactive = inactive || !!opt.isInactive;\n const isChecked = opt.value === this.value;\n const tabIdx = isItemInactive ? -1 : (i === focusableIdx ? 0 : -1);\n\n return (\n <div\n key={opt.value}\n role=\"radio\"\n aria-checked={String(isChecked)}\n aria-disabled={isItemInactive ? 'true' : undefined}\n tabIndex={tabIdx}\n data-radio-item\n data-value={opt.value}\n data-inactive={isItemInactive || undefined}\n class={{ 'radio-item': true, 'ds-control-inactive': isItemInactive }}\n onClick={() => !isItemInactive && this.selectItem(opt.value)}\n onKeyDown={(e: KeyboardEvent) => {\n if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {\n e.preventDefault();\n this.selectItem(opt.value);\n }\n }}\n >\n <span class={{ circle: true, 'circle--checked': isChecked }}>\n {isChecked && <span class=\"dot\" />}\n </span>\n <ds-text class=\"radio-label\" as=\"span\" variant=\"text-body-medium\">\n {opt.label}\n </ds-text>\n </div>\n );\n })}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as s,H as i,c as o,h as e,a as c,t as n}from"./index.js";import{d as t}from"./p-BMbadvZo.js";import{d as r}from"./p-CwaC4wLu.js";const a=()=>`.ds-control-inactive.sc-ds-checkbox-h,.ds-control-inactive.sc-ds-checkbox{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-checkbox-h,.ds-control--md.sc-ds-checkbox{--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-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-checkbox-h,.ds-control--sm.sc-ds-checkbox{--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-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-checkbox-h,.ds-control--xs.sc-ds-checkbox{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.sc-ds-checkbox-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-checkbox-h:focus-visible,.ds-focus-ring.sc-ds-checkbox: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-checkbox-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-checkbox{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-checkbox-h:focus-visible,.ds-focus-ring-inset.sc-ds-checkbox:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-checkbox-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-checkbox: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-checkbox-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-checkbox{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-checkbox-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-checkbox::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-checkbox-h,.ds-interaction-fill.sc-ds-checkbox{position:relative;z-index:0;--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-fill.sc-ds-checkbox-h::before,.ds-interaction-fill.sc-ds-checkbox::before,.ds-interaction-fill.sc-ds-checkbox-h::after,.ds-interaction-fill.sc-ds-checkbox::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-checkbox-h::before,.ds-interaction-fill.sc-ds-checkbox::before{z-index:1}.ds-interaction-fill.sc-ds-checkbox-h::after,.ds-interaction-fill.sc-ds-checkbox::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-checkbox-h,.ds-interaction-fill--bordered.sc-ds-checkbox{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-checkbox-h::before,.ds-interaction-fill--selected.sc-ds-checkbox::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-checkbox-h,.ds-interaction-fill--selected.sc-ds-checkbox{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-checkbox-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-checkbox:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-checkbox-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-checkbox:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-checkbox-h>.ds-interaction-fill__content.sc-ds-checkbox,.ds-interaction-fill.sc-ds-checkbox>.ds-interaction-fill__content.sc-ds-checkbox,.ds-interaction-fill__content.sc-ds-checkbox{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-checkbox-h,.ds-interaction-fill--on-faint.sc-ds-checkbox{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-checkbox-h,.ds-interaction-fill--on-medium.sc-ds-checkbox{--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-checkbox-h,.ds-interaction-fill--on-bold.sc-ds-checkbox{--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-checkbox-h,.ds-interaction-fill--on-strong.sc-ds-checkbox{--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-checkbox-h,.ds-interaction-fill--on-translucent.sc-ds-checkbox{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-checkbox-h,.ds-interaction-fill--on-inverted.sc-ds-checkbox{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-checkbox-h,.ds-interaction-fill--on-media.sc-ds-checkbox{--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-checkbox-h,.ds-interaction-fill--on-always-dark.sc-ds-checkbox{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-checkbox-h,.ds-interaction-fill--on-navigation.sc-ds-checkbox{--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)}.sc-ds-checkbox-h{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:pointer;user-select:none}.checkbox--presentation.sc-ds-checkbox-h{width:var(--ds-control-icon);height:var(--ds-control-icon);padding:0;gap:0;pointer-events:none}.checkbox--md.sc-ds-checkbox-h{--_checkbox-box:var(--dimension-iconography-sm)}.checkbox--sm.sc-ds-checkbox-h{--_checkbox-box:var(--dimension-iconography-xs)}.checkbox--xs.sc-ds-checkbox-h{--_checkbox-box:var(--dimension-size-100)}.checkbox__placement.sc-ds-checkbox{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.box.sc-ds-checkbox{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_checkbox-box);height:var(--_checkbox-box);border:0;border-radius:var(--dimension-radius-025);box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);transition:background-color var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);background-color:var(--color-background-bold-brand)}.checkmark.sc-ds-checkbox{flex-shrink:0}.checkmark--xs.sc-ds-checkbox{transform:scale(0.6667)}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const d={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const l={md:"sm",sm:"xs",xs:"xs"};let h=0;const b=s(class s extends i{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.internals=this.attachInternals();this.labelId=`ds-checkbox-label-${++h}`;this.checked=false;this.size="md";this.value="on";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.indeterminate=false;this.isInactive=false;this.presentation=false;this.initialChecked=false;this.initialIndeterminate=false;this.formDisabled=false;this.handleActivate=()=>{if(this.isInactive||this.disabled||this.formDisabled||this.presentation)return;if(this.indeterminate)this.indeterminate=false;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=s=>{if(s.key==="Enter"||s.key===" "){s.preventDefault();this.handleActivate()}}}componentWillLoad(){this.initialChecked=this.checked;this.initialIndeterminate=this.indeterminate;this.syncFormValue()}syncFormValue(){const s=this.isInactive||this.disabled||this.formDisabled||this.presentation;this.internals.setFormValue(!s&&this.checked?this.value:null);const i=this.required&&!s&&!this.checked;this.internals.setValidity(i?{valueMissing:true}:{},i?this.requiredMessage:"")}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked;this.indeterminate=this.initialIndeterminate}render(){const s=this.isInactive||this.disabled||this.formDisabled;const i=this.checked||this.indeterminate;const o=this.indeterminate?"Subtract":"Check";return e(c,{key:"ac93155a8bf1a30c3394772e9227569897126cca",role:this.presentation?undefined:"checkbox","aria-checked":this.presentation?undefined:this.indeterminate?"mixed":String(this.checked),"aria-disabled":!this.presentation&&s?"true":undefined,"aria-labelledby":this.presentation?undefined:this.labelId,"aria-hidden":this.presentation?"true":undefined,tabIndex:this.presentation||s?-1:0,class:{checkbox:true,"checkbox--presentation":this.presentation,[`checkbox--${this.size}`]:true,[`ds-control--${this.size}`]:true,"ds-control-inactive":s&&!this.presentation,"ds-focus-ring-inset":!this.presentation,"ds-interaction-fill":!s&&!this.presentation},onClick:this.presentation?undefined:this.handleActivate,onKeyDown:this.presentation?undefined:this.handleKeyDown},e("span",{key:"4e62e5996d62ec899783c8f61dd6710754b94784",class:"checkbox__placement ds-interaction-fill__content","aria-hidden":"true"},e("span",{key:"7b98c304bcb77e9ba1ddc52b959aeedf15a71cc9",class:{box:true,"box--marked":i}},i&&e("ds-icon",{key:"98265e84a5b26502b481a797ff31fcf190e67ca0",class:{checkmark:true,"checkmark--xs":this.size==="xs"},name:o,size:l[this.size],color:"inherit"}))),!this.presentation&&e("ds-text",{key:"cda17523f0e32f207a393bcdcf58200db9fdd83b",class:"checkbox__label ds-interaction-fill__content",as:"span",variant:d[this.size],textId:this.labelId},this.label))}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],presentation:[{syncFormValue:0}]}}static get style(){return a()}},[66,"ds-checkbox",{label:[1],checked:[1028],size:[1],name:[513],value:[1],disabled:[516],required:[516],requiredMessage:[1,"required-message"],indeterminate:[1028],isInactive:[4,"is-inactive"],presentation:[4],formDisabled:[32]},undefined,{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],presentation:[{syncFormValue:0}]}]);function f(){if(typeof customElements==="undefined"){return}const s=["ds-checkbox","ds-icon","ds-text"];s.forEach((s=>{switch(s){case"ds-checkbox":if(!customElements.get(n(s))){customElements.define(n(s),b)}break;case"ds-icon":if(!customElements.get(n(s))){t()}break;case"ds-text":if(!customElements.get(n(s))){r()}break}}))}f();export{b as C,f as d};
|
|
2
|
-
//# sourceMappingURL=p-BEmVLLnN.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["checkboxCss","LABEL_VARIANT","md","sm","xs","GLYPH_SIZE","idCounter","Checkbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","labelId","checked","size","value","disabled","required","requiredMessage","indeterminate","isInactive","presentation","initialChecked","initialIndeterminate","formDisabled","handleActivate","dsChange","emit","handleKeyDown","e","key","preventDefault","componentWillLoad","syncFormValue","inactive","internals","setFormValue","missing","setValidity","valueMissing","formDisabledCallback","formResetCallback","render","isMarked","icon","h","Host","role","undefined","String","tabIndex","class","checkbox","onClick","onKeyDown","box","checkmark","name","color","as","variant","textId","label"],"sources":["src/wc/components/Checkbox/Checkbox.css?tag=ds-checkbox&encapsulation=scoped","src/wc/components/Checkbox/Checkbox.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n gap: var(--ds-control-gap);\n height: var(--ds-control-height);\n padding: 0 var(--ds-control-padding-inline);\n border-radius: var(--ds-control-radius);\n cursor: pointer;\n user-select: none;\n}\n\n:host(.checkbox--presentation) {\n width: var(--ds-control-icon);\n height: var(--ds-control-icon);\n padding: 0;\n gap: 0;\n pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n:host(.checkbox--md) {\n --_checkbox-box: var(--dimension-iconography-sm);\n}\n\n:host(.checkbox--sm) {\n --_checkbox-box: var(--dimension-iconography-xs);\n}\n\n:host(.checkbox--xs) {\n --_checkbox-box: var(--dimension-size-100);\n}\n\n.checkbox__placement {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--ds-control-icon);\n height: var(--ds-control-icon);\n}\n\n.box {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--_checkbox-box);\n height: var(--_checkbox-box);\n border: 0;\n border-radius: var(--dimension-radius-025);\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);\n transition:\n background-color var(--effect-motion-short-2);\n}\n\n.box--marked {\n color: var(--color-foreground-on-bold-background-primary);\n background-color: var(--color-background-bold-brand);\n}\n\n.checkmark {\n flex-shrink: 0;\n}\n\n.checkmark--xs {\n transform: scale(0.6667);\n}\n\n.checkbox__label {\n flex: 1;\n min-width: 0;\n padding: 0 var(--ds-control-label-inset);\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport type CheckboxSize = 'md' | 'sm' | 'xs';\n\nconst LABEL_VARIANT: Record<CheckboxSize, 'text-body-medium' | 'text-body-small' | 'text-caption'> = {\n md: 'text-body-medium',\n sm: 'text-body-small',\n xs: 'text-caption',\n};\n\nconst GLYPH_SIZE: Record<CheckboxSize, 'sm' | 'xs'> = {\n md: 'sm',\n sm: 'xs',\n xs: 'xs',\n};\n\nlet idCounter = 0;\n\n@Component({\n tag: 'ds-checkbox',\n styleUrl: 'Checkbox.css',\n scoped: true,\n formAssociated: true,\n})\nexport class Checkbox {\n @AttachInternals() internals!: ElementInternals;\n private labelId = `ds-checkbox-label-${++idCounter}`;\n\n /** Visible label and accessible name. Omitted only in presentation mode. */\n @Prop() label!: string;\n /** Current checked state. */\n @Prop({ mutable: true }) checked: boolean = false;\n /** Visual and placement density. */\n @Prop() size: CheckboxSize = 'md';\n /** Native form field name. */\n @Prop({ reflect: true }) name: string | undefined;\n /** Submitted value when checked. */\n @Prop() value: string = 'on';\n /** Native disabled state. */\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Require the checkbox to be checked for form validity. */\n @Prop({ reflect: true }) required: boolean = false;\n /** Validation message used when a required checkbox is unchecked. */\n @Prop() requiredMessage: string = 'This field is required.';\n /** Mixed visual state. Activation clears it before toggling checked. */\n @Prop({ mutable: true }) indeterminate: boolean = false;\n /** Design-system inactive state. */\n @Prop() isInactive: boolean = false;\n /** Visual-only indicator for a composite control that owns selection semantics. */\n @Prop() presentation: boolean = false;\n\n /** Emitted after user activation with the new checked state. */\n @Event() dsChange!: EventEmitter<boolean>;\n\n private initialChecked = false;\n private initialIndeterminate = false;\n @State() private formDisabled = false;\n\n componentWillLoad() {\n this.initialChecked = this.checked;\n this.initialIndeterminate = this.indeterminate;\n this.syncFormValue();\n }\n\n @Watch('checked')\n @Watch('value')\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('required')\n @Watch('presentation')\n syncFormValue() {\n const inactive = this.isInactive || this.disabled || this.formDisabled || this.presentation;\n this.internals.setFormValue(!inactive && this.checked ? this.value : null);\n const missing = this.required && !inactive && !this.checked;\n this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.checked = this.initialChecked;\n this.indeterminate = this.initialIndeterminate;\n }\n\n private handleActivate = () => {\n if (this.isInactive || this.disabled || this.formDisabled || this.presentation) return;\n if (this.indeterminate) this.indeterminate = false;\n this.checked = !this.checked;\n this.dsChange.emit(this.checked);\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.handleActivate();\n }\n };\n\n render() {\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n const isMarked = this.checked || this.indeterminate;\n const icon = this.indeterminate ? 'Subtract' : 'Check';\n\n return (\n <Host\n role={this.presentation ? undefined : 'checkbox'}\n aria-checked={this.presentation ? undefined : this.indeterminate ? 'mixed' : String(this.checked)}\n aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n aria-labelledby={this.presentation ? undefined : this.labelId}\n aria-hidden={this.presentation ? 'true' : undefined}\n tabIndex={this.presentation || inactive ? -1 : 0}\n class={{\n checkbox: true,\n 'checkbox--presentation': this.presentation,\n [`checkbox--${this.size}`]: true,\n [`ds-control--${this.size}`]: true,\n 'ds-control-inactive': inactive && !this.presentation,\n 'ds-focus-ring-inset': !this.presentation,\n 'ds-interaction-fill': !inactive && !this.presentation,\n }}\n onClick={this.presentation ? undefined : this.handleActivate}\n onKeyDown={this.presentation ? undefined : this.handleKeyDown}\n >\n <span class=\"checkbox__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n <span class={{ box: true, 'box--marked': isMarked }}>\n {isMarked && (\n <ds-icon\n class={{\n checkmark: true,\n 'checkmark--xs': this.size === 'xs',\n }}\n name={icon}\n size={GLYPH_SIZE[this.size]}\n color=\"inherit\"\n />\n )}\n </span>\n </span>\n {!this.presentation && (\n <ds-text\n class=\"checkbox__label ds-interaction-fill__content\"\n as=\"span\"\n variant={LABEL_VARIANT[this.size]}\n textId={this.labelId}\n >\n {this.label}\n </ds-text>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as i,H as t,c as e,h as s,a as n,t as o}from"./index.js";const r=()=>`:host{--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)}:host(.ds-focus-ring:focus-visible),.ds-focus-ring:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring.ds-focus-ring--visible),.ds-focus-ring.ds-focus-ring--visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring-inset:focus-visible),.ds-focus-ring-inset:focus-visible{outline:none}:host(.ds-focus-ring-inset:focus-visible)::after,.ds-focus-ring-inset:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}:host(.ds-focus-ring-inset.ds-focus-ring--visible),.ds-focus-ring-inset.ds-focus-ring--visible{outline:none}:host(.ds-focus-ring-inset.ds-focus-ring--visible)::after,.ds-focus-ring-inset.ds-focus-ring--visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}:host(.ds-interaction-fill),.ds-interaction-fill{position:relative;z-index:0;--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}:host(.ds-interaction-fill)::before,.ds-interaction-fill::before,:host(.ds-interaction-fill)::after,.ds-interaction-fill::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}:host(.ds-interaction-fill)::before,.ds-interaction-fill::before{z-index:1}:host(.ds-interaction-fill)::after,.ds-interaction-fill::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}:host(.ds-interaction-fill--bordered),.ds-interaction-fill--bordered{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}:host(.ds-interaction-fill--selected)::before,.ds-interaction-fill--selected::before{background:var(--ds-interaction-active)}:host(.ds-interaction-fill--selected),.ds-interaction-fill--selected{--ds-interaction-dot-ring:var(--ds-interaction-active)}:host(.ds-interaction-fill:hover:not(:disabled))::after,.ds-interaction-fill:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}:host(.ds-interaction-fill:active:not(:disabled))::after,.ds-interaction-fill:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}:host(.ds-interaction-fill)>.ds-interaction-fill__content,.ds-interaction-fill>.ds-interaction-fill__content,.ds-interaction-fill__content{position:relative;z-index:2}:host(.ds-interaction-fill--on-faint),.ds-interaction-fill--on-faint{--ds-interaction-active:var(--color-interaction-active)}:host(.ds-interaction-fill--on-medium),.ds-interaction-fill--on-medium{--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)}:host(.ds-interaction-fill--on-bold),.ds-interaction-fill--on-bold{--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)}:host(.ds-interaction-fill--on-strong),.ds-interaction-fill--on-strong{--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)}:host(.ds-interaction-fill--on-translucent),.ds-interaction-fill--on-translucent{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}:host(.ds-interaction-fill--on-inverted),.ds-interaction-fill--on-inverted{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}:host(.ds-interaction-fill--on-media),.ds-interaction-fill--on-media{--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)}:host(.ds-interaction-fill--on-always-dark),.ds-interaction-fill--on-always-dark{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}:host(.ds-interaction-fill--on-navigation),.ds-interaction-fill--on-navigation{--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)}:host(.ds-control-inactive),.ds-control-inactive{opacity:0.25;pointer-events:none;cursor:not-allowed}:host{--ds-switch-width:calc(var(--dimension-size-400) + var(--dimension-size-050));--ds-switch-height:var(--dimension-size-300);--ds-switch-thumb-size:var(--dimension-size-200);--ds-switch-gap:var(--dimension-space-050);--ds-switch-thumb-stroke:var(--dimension-stroke-width-012);--ds-switch-inset:var(--ds-switch-gap);--ds-switch-thumb-border-color:var(--color-border-tertiary);--ds-switch-thumb-hover:var(--color-interaction-hover);--ds-switch-thumb-pressed:var(--color-interaction-pressed);--ds-switch-travel:calc( var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) - var(--ds-switch-inset) );--ds-interaction-border-color:var(--color-border-secondary);position:relative;display:inline-flex;width:var(--ds-switch-width);height:var(--ds-switch-height);padding:0;border:none;border-radius:var(--dimension-radius-half);box-sizing:border-box;flex-shrink:0;overflow:visible;cursor:pointer;user-select:none;outline:none;background-color:var(--color-background-medium-neutral);transition:background-color var(--effect-motion-short-3)}:host(.switch.ds-interaction-fill){--ds-interaction-hover:transparent;--ds-interaction-pressed:transparent}:host(.switch--sm){--ds-switch-width:var(--dimension-size-300);--ds-switch-height:var(--dimension-size-200);--ds-switch-thumb-size:var(--dimension-size-150);--ds-switch-gap:var(--dimension-space-025)}:host(.switch--xs){--ds-switch-width:var(--dimension-size-150);--ds-switch-height:var(--dimension-size-100);--ds-switch-thumb-size:var(--dimension-size-075);--ds-switch-gap:var(--dimension-space-012)}:host(.checked){background-color:var(--color-background-bold-brand)}:host(.switch--readonly),:host(.switch--presentation){--ds-interaction-hover:transparent;--ds-interaction-pressed:transparent}:host(.switch--readonly){cursor:default}:host(.switch--presentation){pointer-events:none}.thumb{position:absolute;top:50%;left:var(--ds-switch-inset);width:var(--ds-switch-thumb-size);height:var(--ds-switch-thumb-size);border-radius:var(--dimension-radius-half);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--ds-switch-thumb-stroke) var(--ds-switch-thumb-border-color);transform:translateY(-50%);transition:transform var(--effect-motion-short-3);pointer-events:none}.thumb::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none}:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation)) .thumb::after{background:var(--ds-switch-thumb-hover)}:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation)) .thumb::after{background:var(--ds-switch-thumb-pressed)}:host(.checked) .thumb{transform:translate3d(var(--ds-switch-travel), -50%, 0)}:host(:dir(rtl)) .thumb{right:var(--ds-switch-inset);left:auto}:host(:dir(rtl).checked) .thumb{transform:translate3d(calc(-1 * var(--ds-switch-travel)), -50%, 0)}@media (prefers-reduced-motion: reduce){.thumb{transition:none}}`;let a=0;const c=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.__attachShadow();this.dsChange=e(this,"dsChange");this.internals=this.attachInternals();this.checked=false;this.value="on";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage="This field is required.";this.isInactive=false;this.size="md";this.presentation=false;this.initialChecked=false;this.formDisabled=false;this.handleClick=()=>{if(this.presentation||this.readOnly||this.isInactive||this.disabled||this.formDisabled)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=i=>{if(this.presentation||this.readOnly||this.isInactive||this.disabled||this.formDisabled)return;if(i.key===" "||i.key==="Enter"){i.preventDefault();this.handleClick()}}}componentWillLoad(){this.initialChecked=this.checked;this.syncFormValue()}componentDidLoad(){this.syncNativeLabels()}syncFormValue(){const i=this.presentation||this.isInactive||this.disabled||this.formDisabled;const t=this.checked?this.value:this.uncheckedValue??null;const e=this.checked?"checked":"unchecked";this.internals.setFormValue(i?null:t,e);const s=this.required&&!i&&!this.checked;this.internals.setValidity(s?{valueMissing:true}:{},s?this.requiredMessage:"")}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked}formStateRestoreCallback(i){this.checked=i==="checked"}syncNativeLabels(){if(this.presentation)return;if(this.el.hasAttribute("aria-label")||this.el.hasAttribute("aria-labelledby"))return;const i=Array.from(this.internals.labels).map((i=>{if(!i.id)i.id=`ds-switch-label-${++a}`;return i.id}));if(i.length)this.el.setAttribute("aria-labelledby",i.join(" "))}render(){const i=this.isInactive||this.disabled||this.formDisabled;return s(n,{key:"a10cd7d16db9abd2830b7a5a370f17e98c68144e",role:this.presentation?undefined:"switch","aria-checked":this.presentation?undefined:String(this.checked),"aria-disabled":!this.presentation&&i?"true":undefined,"aria-readonly":!this.presentation&&this.readOnly?"true":undefined,"aria-hidden":this.presentation?"true":undefined,"data-checked":this.checked?"":undefined,"data-unchecked":!this.checked?"":undefined,"data-disabled":i?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,tabIndex:this.presentation||i?-1:0,class:{switch:true,checked:this.checked,"switch--md":this.size==="md","switch--sm":this.size==="sm","switch--xs":this.size==="xs","switch--readonly":this.readOnly,"switch--presentation":this.presentation,"ds-focus-ring":true,"ds-interaction-fill":true,"ds-interaction-fill--bordered":true,"ds-control-inactive":i},onClick:this.handleClick,onKeyDown:this.handleKeyDown},s("span",{key:"5cf211d4b4106291320fe9b135c5ea532415511d",class:"thumb ds-interaction-fill__content"}))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],uncheckedValue:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],presentation:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return r()}},[65,"ds-switch",{checked:[1028],name:[513],value:[1],uncheckedValue:[1,"unchecked-value"],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],isInactive:[4,"is-inactive"],size:[1],presentation:[4],formDisabled:[32]},undefined,{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],uncheckedValue:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],presentation:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function d(){if(typeof customElements==="undefined"){return}const i=["ds-switch"];i.forEach((i=>{switch(i){case"ds-switch":if(!customElements.get(o(i))){customElements.define(o(i),c)}break}}))}d();export{c as S,d};
|
|
2
|
-
//# sourceMappingURL=p-BcB-zkOx.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["switchCss","generatedLabelId","Switch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","checked","value","disabled","readOnly","required","requiredMessage","isInactive","size","presentation","initialChecked","formDisabled","handleClick","dsChange","emit","handleKeyDown","event","key","preventDefault","componentWillLoad","syncFormValue","componentDidLoad","syncNativeLabels","inactive","submissionValue","uncheckedValue","state","internals","setFormValue","missing","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","el","hasAttribute","labelIds","Array","from","labels","map","label","id","length","setAttribute","join","render","h","Host","role","undefined","String","tabIndex","class","switch","onClick","onKeyDown"],"sources":["src/wc/components/Switch/Switch.css?tag=ds-switch&encapsulation=shadow","src/wc/components/Switch/Switch.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n --ds-switch-width: calc(var(--dimension-size-400) + var(--dimension-size-050));\n --ds-switch-height: var(--dimension-size-300);\n --ds-switch-thumb-size: var(--dimension-size-200);\n --ds-switch-gap: var(--dimension-space-050);\n --ds-switch-thumb-stroke: var(--dimension-stroke-width-012);\n --ds-switch-inset: var(--ds-switch-gap);\n --ds-switch-thumb-border-color: var(--color-border-tertiary);\n --ds-switch-thumb-hover: var(--color-interaction-hover);\n --ds-switch-thumb-pressed: var(--color-interaction-pressed);\n --ds-switch-travel: calc(\n var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) -\n var(--ds-switch-inset)\n );\n --ds-interaction-border-color: var(--color-border-secondary);\n\n position: relative;\n display: inline-flex;\n width: var(--ds-switch-width);\n height: var(--ds-switch-height);\n padding: 0;\n border: none;\n border-radius: var(--dimension-radius-half);\n box-sizing: border-box;\n flex-shrink: 0;\n overflow: visible;\n cursor: pointer;\n user-select: none;\n outline: none;\n background-color: var(--color-background-medium-neutral);\n transition: background-color var(--effect-motion-short-3);\n}\n\n:host(.switch.ds-interaction-fill) {\n /* The host owns the hit target; interaction washes paint on the thumb. */\n --ds-interaction-hover: transparent;\n --ds-interaction-pressed: transparent;\n}\n\n:host(.switch--sm) {\n --ds-switch-width: var(--dimension-size-300);\n --ds-switch-height: var(--dimension-size-200);\n --ds-switch-thumb-size: var(--dimension-size-150);\n --ds-switch-gap: var(--dimension-space-025);\n}\n\n:host(.switch--xs) {\n --ds-switch-width: var(--dimension-size-150);\n --ds-switch-height: var(--dimension-size-100);\n --ds-switch-thumb-size: var(--dimension-size-075);\n --ds-switch-gap: var(--dimension-space-012);\n}\n\n:host(.checked) {\n background-color: var(--color-background-bold-brand);\n}\n\n:host(.switch--readonly),\n:host(.switch--presentation) {\n --ds-interaction-hover: transparent;\n --ds-interaction-pressed: transparent;\n}\n\n:host(.switch--readonly) {\n cursor: default;\n}\n\n:host(.switch--presentation) {\n pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.thumb {\n position: absolute;\n top: 50%;\n left: var(--ds-switch-inset);\n width: var(--ds-switch-thumb-size);\n height: var(--ds-switch-thumb-size);\n border-radius: var(--dimension-radius-half);\n background-color: var(--color-background-primary);\n /* Outset stroke: does not consume the thumb's declared diameter. */\n box-shadow:\n 0 0 0 var(--ds-switch-thumb-stroke)\n var(--ds-switch-thumb-border-color);\n transform: translateY(-50%);\n transition: transform var(--effect-motion-short-3);\n pointer-events: none;\n}\n\n.thumb::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: transparent;\n pointer-events: none;\n}\n\n:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n .thumb::after {\n background: var(--ds-switch-thumb-hover);\n}\n\n:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n .thumb::after {\n background: var(--ds-switch-thumb-pressed);\n}\n\n:host(.checked) .thumb {\n transform: translate3d(var(--ds-switch-travel), -50%, 0);\n}\n\n:host(:dir(rtl)) .thumb {\n right: var(--ds-switch-inset);\n left: auto;\n}\n\n:host(:dir(rtl).checked) .thumb {\n transform: translate3d(calc(-1 * var(--ds-switch-travel)), -50%, 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .thumb {\n transition: none;\n }\n}\n","import { AttachInternals, Component, Element, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport type SwitchSize = 'md' | 'sm' | 'xs';\n\nlet generatedLabelId = 0;\n\n@Component({\n tag: 'ds-switch',\n styleUrl: 'Switch.css',\n shadow: true,\n formAssociated: true,\n})\nexport class Switch {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /** Current on/off state. The initial value is restored when the owning form resets. */\n @Prop({ mutable: true }) checked: boolean = false;\n\n @Prop({ reflect: true }) name: string | undefined;\n @Prop() value: string = 'on';\n\n /** Optional value submitted when unchecked; omitted by default like a native checkbox. */\n @Prop() uncheckedValue: string | undefined;\n\n /** Associates the switch with a form by id when it is rendered outside that form. */\n @Prop({ reflect: true }) form: string | undefined;\n\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop({ reflect: true }) required: boolean = false;\n @Prop() requiredMessage: string = 'This field is required.';\n @Prop() isInactive: boolean = false;\n\n /** Compact track size for placement inside controls, menus, and form rows. */\n @Prop() size: SwitchSize = 'md';\n\n /**\n * Removes standalone control semantics so a composite owner such as a\n * `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.\n */\n @Prop() presentation: boolean = false;\n\n @Event() dsChange!: EventEmitter<boolean>;\n\n private initialChecked = false;\n @State() private formDisabled = false;\n\n componentWillLoad() {\n this.initialChecked = this.checked;\n this.syncFormValue();\n }\n\n componentDidLoad() {\n this.syncNativeLabels();\n }\n\n @Watch('checked')\n @Watch('value')\n @Watch('uncheckedValue')\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('presentation')\n @Watch('required')\n syncFormValue() {\n const inactive = this.presentation || this.isInactive || this.disabled || this.formDisabled;\n const submissionValue = this.checked ? this.value : this.uncheckedValue ?? null;\n const state = this.checked ? 'checked' : 'unchecked';\n this.internals.setFormValue(inactive ? null : submissionValue, state);\n\n const missing = this.required && !inactive && !this.checked;\n this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.checked = this.initialChecked;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n this.checked = state === 'checked';\n }\n\n private syncNativeLabels() {\n if (this.presentation) return;\n if (this.el.hasAttribute('aria-label') || this.el.hasAttribute('aria-labelledby')) return;\n\n const labelIds = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n if (!label.id) label.id = `ds-switch-label-${++generatedLabelId}`;\n return label.id;\n });\n if (labelIds.length) this.el.setAttribute('aria-labelledby', labelIds.join(' '));\n }\n\n private handleClick = () => {\n if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n this.checked = !this.checked;\n this.dsChange.emit(this.checked);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n this.handleClick();\n }\n };\n\n render() {\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n return (\n <Host\n role={this.presentation ? undefined : 'switch'}\n aria-checked={this.presentation ? undefined : String(this.checked)}\n aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n aria-readonly={!this.presentation && this.readOnly ? 'true' : undefined}\n aria-hidden={this.presentation ? 'true' : undefined}\n data-checked={this.checked ? '' : undefined}\n data-unchecked={!this.checked ? '' : undefined}\n data-disabled={inactive ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-required={this.required ? '' : undefined}\n tabIndex={this.presentation || inactive ? -1 : 0}\n class={{\n switch: true,\n checked: this.checked,\n 'switch--md': this.size === 'md',\n 'switch--sm': this.size === 'sm',\n 'switch--xs': this.size === 'xs',\n 'switch--readonly': this.readOnly,\n 'switch--presentation': this.presentation,\n 'ds-focus-ring': true,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--bordered': true,\n 'ds-control-inactive': inactive,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <span class=\"thumb ds-interaction-fill__content\" />\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["buttonFilledCss","ICON_SIZE","md","sm","xs","ButtonFilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","intent","contrast","rounded","isInactive","isLoading","type","ariaLabel","buttonEl","handleClick","event","dsClick","emit","setFocus","focus","showIcon","showLabel","accessibleName","undefined","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","onClick","color","name","as","emphasis"],"sources":["src/wc/components/ButtonFilled/ButtonFilled.css?tag=ds-button-filled&encapsulation=scoped","src/wc/components/ButtonFilled/ButtonFilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n display: inline-flex;\n outline: none;\n --ds-button-filled-bg: var(--color-background-bold-brand);\n --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-filled-host--icon.ds-control-width--hug) {\n width: var(--ds-control-height, var(--dimension-size-400));\n height: var(--ds-control-height, var(--dimension-size-400));\n min-width: var(--ds-control-height, var(--dimension-size-400));\n min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-filled-host--icon.ds-control-width--fill) {\n height: var(--ds-control-height, var(--dimension-size-400));\n min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-filled {\n width: 100%;\n}\n\n.button-filled {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n gap: var(--ds-control-gap, var(--dimension-space-050));\n border: none;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n background-color: var(--ds-button-filled-bg);\n color: var(--ds-button-filled-fg);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n overflow: hidden;\n transition:\n background-color var(--effect-motion-short-2),\n color var(--effect-motion-short-2),\n transform var(--effect-motion-short-2);\n /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n.button-filled--icon {\n width: 100%;\n height: 100%;\n padding: 0;\n}\n\n.button-filled--rounded {\n --ds-control-radius: var(--dimension-radius-half);\n}\n\n.button-filled:active:not(:disabled):not(.ds-control-inactive) {\n transform: scale(var(--dimension-scale-subtle));\n}\n\n@media (prefers-reduced-motion: reduce) {\n .button-filled {\n transition:\n background-color var(--effect-motion-short-2),\n color var(--effect-motion-short-2);\n }\n\n .button-filled:active:not(:disabled):not(.ds-control-inactive) {\n transform: none;\n }\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.button-filled__icon-wrap {\n position: relative;\n width: var(--ds-control-icon, var(--dimension-iconography-md));\n height: var(--ds-control-icon, var(--dimension-iconography-md));\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n z-index: 2;\n}\n\n.button-filled__label {\n position: relative;\n z-index: 2;\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n white-space: nowrap;\n flex-shrink: 0;\n min-width: 0;\n}\n\n.button-filled__label--loading {\n visibility: hidden;\n}\n\n.button-filled > .button-filled__loader-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n}\n\n/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-bold-neutral);\n --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-bold-brand);\n --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-bold-ai);\n --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-bold-negative);\n --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-bold-warning);\n --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-bold-caution);\n --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-bold-positive);\n --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-bold-guide);\n --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-strong-neutral);\n --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-strong-brand);\n --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-strong-ai);\n --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-strong-negative);\n --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-strong-warning);\n --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-strong-caution);\n --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-strong-positive);\n --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-strong-guide);\n --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-medium-neutral);\n --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-medium-brand);\n --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-medium-ai);\n --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-medium-negative);\n --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-medium-warning);\n --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-medium-caution);\n --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-medium-positive);\n --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-medium-guide);\n --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-faint-neutral);\n --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-faint-brand);\n --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-faint-ai);\n --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-faint-negative);\n --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-faint-warning);\n --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-faint-caution);\n --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-faint-positive);\n --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-faint-guide);\n --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type ButtonFilledIntent =\n | 'neutral'\n | 'brand'\n | 'ai'\n | 'negative'\n | 'warning'\n | 'caution'\n | 'positive'\n | 'guide'\n | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonFilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonFilledWidth = ControlWidth;\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonFilledSize, 'md' | 'sm' | 'xs'> = {\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\n@Component({\n tag: 'ds-button-filled',\n styleUrl: 'ButtonFilled.css',\n scoped: true,\n})\nexport class ButtonFilled {\n @Element() el!: HTMLElement;\n\n /**\n * Content layout. Default is label-only; pass `icon` for icon-only chrome\n * (nav / tool rails) or `icon-label` for leading icon + text.\n */\n @Prop() variant: ButtonFilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonFilledSize = 'md';\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonFilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /** Semantic colour intent. */\n @Prop() intent: ButtonFilledIntent = 'brand';\n\n /**\n * Background fill weight. Foreground uses the paired contrast token:\n * bold → faint, strong → medium, medium → strong, faint → bold.\n */\n @Prop() contrast: ButtonFilledContrast = 'bold';\n\n /** Use the half-radius treatment instead of the default control radius. */\n @Prop() rounded: boolean = false;\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n @Prop() isLoading: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /** Accessible name override. Required for icon-only buttons. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n\n private buttonEl: HTMLButtonElement | null = null;\n\n @Method()\n async setFocus() {\n this.buttonEl?.focus();\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) return;\n this.dsClick.emit(event);\n };\n\n private get showIcon(): boolean {\n return this.variant === 'icon' || this.variant === 'icon-label';\n }\n\n private get showLabel(): boolean {\n return this.variant === 'label' || this.variant === 'icon-label';\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n return undefined;\n }\n\n render() {\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n\n const cls: Record<string, boolean> = {\n 'button-filled': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': !this.isInactive,\n /* Bold is the default filled contrast — on-bold interaction tokens. */\n 'ds-interaction-fill--on-bold': this.contrast === 'bold',\n 'ds-interaction-fill--on-strong': this.contrast === 'strong',\n 'ds-interaction-fill--on-medium': this.contrast === 'medium',\n /* faint → default app interaction tokens (no --on-*). */\n 'ds-control-inactive': this.isInactive,\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'button-filled--icon': this.variant === 'icon',\n 'button-filled--label': this.variant === 'label',\n 'button-filled--icon-label': this.variant === 'icon-label',\n 'button-filled--rounded': this.rounded,\n [`button-filled--intent-${this.intent}`]: true,\n [`button-filled--contrast-${this.contrast}`]: this.contrast !== 'bold',\n };\n\n return (\n <Host\n class={{\n 'button-filled-host': true,\n 'button-filled-host--icon': this.variant === 'icon',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n ...controlWidthClass(this.width),\n }}\n tabIndex={-1}\n >\n <button\n ref={el => {\n this.buttonEl = el ?? null;\n }}\n type={this.type}\n class={cls}\n disabled={this.isInactive || this.isLoading}\n aria-label={this.accessibleName}\n aria-busy={this.isLoading ? 'true' : undefined}\n onClick={this.handleClick}\n >\n {this.showIcon && (\n <span class=\"button-filled__icon-wrap ds-interaction-fill__content\">\n {this.isLoading\n ? <ds-loader size={iconSize} color=\"inherit\" />\n : <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n }\n </span>\n )}\n {this.showLabel && (\n <ds-text\n class={{\n 'button-filled__label': true,\n 'button-filled__label--loading': this.isLoading && this.variant === 'label',\n 'ds-interaction-fill__content': true,\n }}\n as=\"span\"\n variant={textVariant}\n emphasis\n color=\"inherit\"\n >\n {this.label}\n </ds-text>\n )}\n {this.isLoading && this.variant === 'label' && (\n <span class=\"button-filled__loader-overlay ds-interaction-fill__content\">\n <ds-loader size={iconSize} color=\"inherit\" />\n </span>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["computeMenuPosition","computeAnchoredPopupPosition","isMenuGradientPickerSection","section","variant","menuCss","POSITION_RETRY_BUDGET","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","sections","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","initialFocusVisible","menuLabel","shouldRender","closing","pos","x","y","focusedIndex","positionReady","focusRingVisible","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","positionRetryRaf","listenersReady","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","closeAnimationMs","finishClose","setTimeout","onAnchorChange","onPositionPropsChange","viewportPadPx","resolveCssLengthPx","TOKEN_DEFAULTS","sideOffsetPx","alignOffsetPx","popupFallbackWidthPx","menuWidthXs","popupFallbackHeightPx","menuFallbackHeight","resolveMotionTimeMs","motionShort2","animationDurationShort3","resolvedAnchor","anchor","anchorId","document","getElementById","activeSections","length","flatItems","flatMap","cancelAnimationFrame","onReady","remaining","attempt","calculatePosition","requestAnimationFrame","anchorEl","popup","el","querySelector","anchorRect","getBoundingClientRect","popupWidth","offsetWidth","popupHeight","offsetHeight","viewportWidth","window","innerWidth","viewportHeight","innerHeight","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","querySelectorAll","focus","e","t","target","contains","close","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleKeyDown","enabled","map","i","filter","cur","indexOf","safe","key","preventDefault","stopPropagation","focusItem","idx","handleItemClick","item","dsSelect","handleGradientSelect","preset","dsGradientSelect","render","h","Host","style","display","flatIdx","popupStyle","position","left","top","transform","Math","round","zIndex","visibility","menuWidth","minWidth","class","role","si","header","undefined","as","emphasis","color","value","onDsChange","detail","isFocused","type","isDestructive","showSwitch","String","switchValue","disabled","tabIndex","onMouseDown","onClick","onFocus","label","subtext","dot","hasRing","size","checked","presentation"],"sources":["src/wc/components/Menu/menu-position.ts","src/wc/components/Menu/menu-types.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["import {\n computeAnchoredPopupPosition,\n type AnchoredPopupAlign,\n type AnchoredPopupPositionInput,\n type AnchoredPopupSide,\n} from '../../utils/anchored-popup';\n\nexport type MenuSide = AnchoredPopupSide;\nexport type MenuAlign = AnchoredPopupAlign;\nexport type MenuPositionInput = AnchoredPopupPositionInput;\n\n/** Backward-compatible menu alias for the shared anchored-popup layout math. */\nexport const computeMenuPosition = computeAnchoredPopupPosition;\n","import type { ShellGradientPreset } from '../../shell/shell-gradient-presets';\n\nexport type { MenuAlign, MenuSide } from './menu-position';\nexport {\n PANEL_NAV_USER_MENU_PLACEMENT,\n type MenuPlacement,\n} from './menu-placement';\n\nexport interface MenuItemData {\n label: string;\n value?: string;\n subtext?: string;\n /** Show a supplemental brand notification dot. */\n dot?: boolean;\n isSelected?: boolean;\n isInactive?: boolean;\n isDestructive?: boolean;\n /** Render a compact switch indicator; the menu row owns interaction. */\n showSwitch?: boolean;\n switchValue?: boolean;\n}\n\nexport interface MenuItemsSection {\n header?: string;\n items: MenuItemData[];\n}\n\nexport interface MenuGradientPickerSection {\n header?: string;\n variant: 'gradient-picker';\n value: ShellGradientPreset;\n}\n\nexport type MenuSection = MenuItemsSection | MenuGradientPickerSection;\n\nexport function isMenuGradientPickerSection(\n section: MenuSection,\n): section is MenuGradientPickerSection {\n return 'variant' in section && section.variant === 'gradient-picker';\n}\n\nexport type { ShellGradientPreset };\n","@import '../../utils/choice-list.css';\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.menu-item--destructive .menu-item__label {\n /* Beat ds-text color-* host classes for destructive rows. */\n color: var(--color-foreground-bold-negative) !important;\n}\n\n/* Standard md icon zone keeps the dot aligned with other control suffixes. */\n.menu-item__dot-box {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--ds-control-icon, var(--dimension-iconography-md));\n height: var(--ds-control-icon, var(--dimension-iconography-md));\n pointer-events: none;\n}\n\n/* ── Switch suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__switch {\n flex-shrink: 0;\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport { resolveCssLengthPx, resolveMotionTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';\nimport { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\nimport { isMenuGradientPickerSection } from './menu-types';\nimport type { ShellGradientPreset } from '../../shell/shell-gradient-presets';\n\n/** rAF retries while the popup mounts or the anchor resolves. */\nconst POSITION_RETRY_BUDGET = 8;\n\n@Component({\n tag: 'ds-menu',\n styleUrl: 'Menu.css',\n scoped: true,\n})\nexport class Menu {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) open: boolean = false;\n @Prop() items: MenuItemData[] = [];\n @Prop() sections: MenuSection[] = [];\n @Prop() side: MenuSide = 'bottom';\n @Prop() align: MenuAlign = 'start';\n /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n @Prop() menuWidth: string | undefined;\n @Prop() minWidth: string | undefined;\n /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n @Prop() anchor: HTMLElement | undefined;\n /** ID of the external trigger element for positioning */\n @Prop() anchorId: string | undefined;\n /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n @Prop() initialFocusVisible: boolean = false;\n /** Accessible name for the popup menu. */\n @Prop() menuLabel: string = 'Menu';\n\n @State() private shouldRender: boolean = false;\n @State() private closing: boolean = false;\n @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n @State() private focusedIndex: number = 0;\n @State() private positionReady: boolean = false;\n @State() private focusRingVisible: boolean = false;\n\n @Event() dsClose!: EventEmitter<void>;\n @Event() dsSelect!: EventEmitter<MenuItemData>;\n /** Emitted when a `gradient-picker` section swatch is chosen. */\n @Event() dsGradientSelect!: EventEmitter<ShellGradientPreset>;\n\n private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n private scrollResizeHandler: (() => void) | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private itemEls: HTMLElement[] = [];\n private positionRetryRaf: number | null = null;\n private listenersReady = false;\n\n componentDidLoad() {\n if (this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.cancelPositionRetry();\n this.teardownListeners();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.teardownListeners();\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.listenersReady = false;\n this.focusRingVisible = this.initialFocusVisible;\n this.listenersReady = true;\n this.setupListeners();\n this.schedulePositionUpdate(() => {\n this.focusInitialItem();\n });\n } else if (this.shouldRender) {\n this.cancelPositionRetry();\n this.closing = true;\n this.teardownListeners();\n this.listenersReady = false;\n const closeAnimationMs = this.closeAnimationMs;\n if (closeAnimationMs <= 0) {\n this.finishClose();\n return;\n }\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n this.finishClose();\n }, closeAnimationMs);\n }\n }\n\n @Watch('anchor')\n @Watch('anchorId')\n onAnchorChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n @Watch('side')\n @Watch('align')\n @Watch('sideOffset')\n @Watch('alignOffset')\n onPositionPropsChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get popupFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n }\n\n private get popupFallbackHeightPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private get closeAnimationMs(): number {\n return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private finishClose() {\n this.shouldRender = false;\n this.closing = false;\n }\n\n private get resolvedAnchor(): HTMLElement | null {\n if (this.anchor) return this.anchor;\n if (this.anchorId) return document.getElementById(this.anchorId);\n return null;\n }\n\n private get activeSections(): MenuSection[] {\n if (this.sections.length > 0) return this.sections;\n if (this.items.length > 0) return [{ items: this.items }];\n return [];\n }\n\n private get flatItems(): MenuItemData[] {\n return this.activeSections.flatMap(section =>\n isMenuGradientPickerSection(section) ? [] : section.items,\n );\n }\n\n private cancelPositionRetry() {\n if (this.positionRetryRaf !== null) {\n cancelAnimationFrame(this.positionRetryRaf);\n this.positionRetryRaf = null;\n }\n }\n\n /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n private schedulePositionUpdate(onReady?: () => void) {\n if (!this.open) return;\n\n this.cancelPositionRetry();\n this.positionReady = false;\n\n let remaining = POSITION_RETRY_BUDGET;\n\n const attempt = () => {\n this.positionRetryRaf = null;\n if (!this.open) return;\n\n if (this.calculatePosition()) {\n this.positionReady = true;\n onReady?.();\n return;\n }\n\n if (remaining > 0) {\n remaining -= 1;\n this.positionRetryRaf = requestAnimationFrame(attempt);\n }\n };\n\n this.positionRetryRaf = requestAnimationFrame(attempt);\n }\n\n /** @returns `true` when anchor and popup were found and `pos` was updated. */\n private calculatePosition(): boolean {\n const anchorEl = this.resolvedAnchor;\n if (!anchorEl) return false;\n const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n if (!popup) return false;\n\n this.pos = computeMenuPosition({\n anchorRect: anchorEl.getBoundingClientRect(),\n popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n side: this.side,\n align: this.align,\n sideOffsetPx: this.sideOffsetPx,\n alignOffsetPx: this.alignOffsetPx,\n viewportPadPx: this.viewportPadPx,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n });\n return true;\n }\n\n /** Focus the selected item when present, otherwise the first enabled item. */\n private focusInitialItem() {\n const flat = this.flatItems;\n const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n this.focusedIndex = selectedIdx >= 0\n ? selectedIdx\n : (firstEnabledIdx >= 0 ? firstEnabledIdx : 0);\n\n requestAnimationFrame(() => {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[this.focusedIndex]?.focus();\n });\n }\n\n private setupListeners() {\n this.clickOutsideHandler = (e: MouseEvent) => {\n const t = e.target as Node;\n const popup = this.el.querySelector('.menu-popup');\n const anchorEl = this.resolvedAnchor;\n if (popup?.contains(t) || anchorEl?.contains(t)) return;\n this.close();\n };\n\n this.scrollResizeHandler = () => {\n if (this.shouldRender && !this.closing) this.calculatePosition();\n };\n\n document.addEventListener('mousedown', this.clickOutsideHandler, true);\n window.addEventListener('scroll', this.scrollResizeHandler, true);\n window.addEventListener('resize', this.scrollResizeHandler);\n }\n\n private teardownListeners() {\n if (this.clickOutsideHandler) {\n document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n this.clickOutsideHandler = null;\n }\n if (this.scrollResizeHandler) {\n window.removeEventListener('scroll', this.scrollResizeHandler, true);\n window.removeEventListener('resize', this.scrollResizeHandler);\n this.scrollResizeHandler = null;\n }\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private close() {\n this.resolvedAnchor?.focus();\n this.dsClose.emit();\n this.open = false;\n this.onOpenChange(false);\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (!this.shouldRender || this.closing) return;\n const flat = this.flatItems;\n const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);\n if (!enabled.length) return;\n\n const cur = enabled.indexOf(this.focusedIndex);\n const safe = cur < 0 ? 0 : cur;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe + 1) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'ArrowUp':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'Home':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[0];\n this.focusItem(this.focusedIndex);\n break;\n case 'End':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[enabled.length - 1];\n this.focusItem(this.focusedIndex);\n break;\n case 'Escape':\n e.preventDefault();\n this.close();\n break;\n case 'Tab':\n e.preventDefault();\n this.close();\n break;\n }\n }\n\n private focusItem(idx: number) {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[idx]?.focus();\n }\n\n private handleItemClick(item: MenuItemData) {\n if (item.isInactive) return;\n this.dsSelect.emit(item);\n }\n\n private handleGradientSelect(preset: ShellGradientPreset) {\n this.dsGradientSelect.emit(preset);\n }\n\n render() {\n if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n const sections = this.activeSections;\n let flatIdx = 0;\n\n const popupStyle: Record<string, string> = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: '9998',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n return (\n <Host style={{ display: 'contents' }}>\n <div\n class={{\n 'menu-popup': true,\n 'menu-popup--closing': this.closing,\n 'ds-choice-popup': true,\n 'ds-choice-popup--closing': this.closing,\n }}\n style={popupStyle}\n role=\"menu\"\n aria-label={this.menuLabel}\n aria-orientation=\"vertical\"\n >\n <div class=\"ds-choice-list\">\n {sections.map((section, si) => (\n <div\n key={si}\n class={{\n 'menu-section': true,\n 'menu-section--divided': si < sections.length - 1,\n 'menu-section--gradient-picker': isMenuGradientPickerSection(section),\n 'ds-choice-section': true,\n 'ds-choice-section--divided': si < sections.length - 1,\n }}\n role={section.header ? 'group' : undefined}\n aria-label={section.header}\n >\n {section.header && (\n <ds-text\n class=\"section-header ds-choice-section__header ds-control--md\"\n as=\"span\"\n variant=\"text-body-small\"\n emphasis\n color=\"primary\"\n aria-hidden=\"true\"\n >\n {section.header}\n </ds-text>\n )}\n {isMenuGradientPickerSection(section) ? (\n <ds-shell-gradient-picker\n value={section.value}\n onDsChange={(e: CustomEvent<ShellGradientPreset>) => {\n e.stopPropagation();\n this.handleGradientSelect(e.detail);\n }}\n />\n ) : (\n section.items.map(item => {\n const idx = flatIdx++;\n const isFocused = this.focusedIndex === idx;\n return (\n <button\n key={idx}\n type=\"button\"\n class={{\n 'menu-item': true,\n 'ds-choice-item': true,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n 'ds-interaction-fill': !item.isInactive,\n 'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,\n 'menu-item--selected': !!item.isSelected,\n 'ds-control-inactive': !!item.isInactive,\n 'menu-item--destructive': !!item.isDestructive,\n 'menu-item--focused': isFocused,\n }}\n role={item.showSwitch ? 'menuitemcheckbox' : 'menuitem'}\n aria-checked={item.showSwitch ? String(!!item.switchValue) : undefined}\n aria-current={!item.showSwitch && item.isSelected ? 'true' : undefined}\n disabled={item.isInactive}\n tabIndex={isFocused ? 0 : -1}\n onMouseDown={() => { this.focusRingVisible = false; }}\n onClick={() => this.handleItemClick(item)}\n onFocus={() => { this.focusedIndex = idx; }}\n >\n <div class=\"menu-item__content ds-choice-item__content ds-interaction-fill__content\">\n <ds-text\n class=\"menu-item__label ds-choice-item__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color={item.isSelected ? 'primary' : 'secondary'}\n >\n {item.label}\n </ds-text>\n {item.subtext && (\n <ds-text class=\"menu-item__subtext ds-choice-item__subtext\" as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n {item.subtext}\n </ds-text>\n )}\n </div>\n {item.dot && (\n <span class=\"menu-item__dot-box ds-interaction-fill__content\" aria-hidden=\"true\">\n <ds-badge\n class=\"menu-item__dot\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n />\n </span>\n )}\n {item.showSwitch && (\n <ds-switch\n class=\"menu-item__switch ds-interaction-fill__content\"\n size=\"sm\"\n checked={!!item.switchValue}\n presentation\n />\n )}\n </button>\n );\n }))}\n </div>\n ))}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"wYAYO,MAAMA,EAAsBC,ECuB7B,SAAUC,EACdC,GAEA,MAAO,YAAaA,GAAWA,EAAQC,UAAY,iBACrD,CCvCA,MAAMC,EAAU,IAAM,mqYCQtB,MAAMC,EAAwB,E,MAOjBC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,6JAQ2BC,KAAAC,KAAgB,MACjCD,KAAAE,MAAwB,GACxBF,KAAAG,SAA0B,GAC1BH,KAAAI,KAAiB,SACjBJ,KAAAK,MAAmB,QAEnBL,KAAAM,WAA8BC,EAAkBC,SAEhDR,KAAAS,YAA+B,EAQ/BT,KAAAU,oBAA+B,MAE/BV,KAAAW,UAAoB,OAEXX,KAAAY,aAAwB,MACxBZ,KAAAa,QAAmB,MACnBb,KAAAc,IAAgC,CAAEC,EAAG,EAAGC,EAAG,GAC3ChB,KAAAiB,aAAuB,EACvBjB,KAAAkB,cAAyB,MACzBlB,KAAAmB,iBAA4B,MAOrCnB,KAAAoB,oBAAwD,KACxDpB,KAAAqB,oBAA2C,KAC3CrB,KAAAsB,WAAmD,KACnDtB,KAAAuB,QAAyB,GACzBvB,KAAAwB,iBAAkC,KAClCxB,KAAAyB,eAAiB,KA+Z1B,CA7ZC,gBAAAC,GACE,GAAI1B,KAAKC,KAAMD,KAAK2B,aAAa,K,CAGnC,oBAAAC,GACE5B,KAAK6B,sBACL7B,KAAK8B,mB,CAIP,YAAAH,CAAaI,GACX,GAAIA,EAAQ,CACV/B,KAAK8B,oBACL9B,KAAKY,aAAe,KACpBZ,KAAKa,QAAU,MACfb,KAAKkB,cAAgB,MACrBlB,KAAKyB,eAAiB,MACtBzB,KAAKmB,iBAAmBnB,KAAKU,oBAC7BV,KAAKyB,eAAiB,KACtBzB,KAAKgC,iBACLhC,KAAKiC,wBAAuB,KAC1BjC,KAAKkC,kBAAkB,G,MAEpB,GAAIlC,KAAKY,aAAc,CAC5BZ,KAAK6B,sBACL7B,KAAKa,QAAU,KACfb,KAAK8B,oBACL9B,KAAKyB,eAAiB,MACtB,MAAMU,EAAmBnC,KAAKmC,iBAC9B,GAAIA,GAAoB,EAAG,CACzBnC,KAAKoC,cACL,M,CAEFpC,KAAKsB,WAAae,YAAW,KAC3BrC,KAAKsB,WAAa,KAClBtB,KAAKoC,aAAa,GACjBD,E,EAMP,cAAAG,GACE,GAAItC,KAAKC,KAAMD,KAAKiC,wB,CAOtB,qBAAAM,GACE,GAAIvC,KAAKC,KAAMD,KAAKiC,wB,CAGtB,iBAAYO,GACV,OAAOC,EAAmBC,EAAelC,SAAUkC,EAAelC,S,CAGpE,gBAAYmC,GACV,OAAOF,EAAmBzC,KAAKM,WAAYoC,EAAelC,S,CAG5D,iBAAYoC,GACV,OAAOH,EAAmBzC,KAAKS,YAAa,E,CAG9C,wBAAYoC,GACV,OAAOJ,EAAmBC,EAAeI,YAAaJ,EAAeI,Y,CAGvE,yBAAYC,GACV,OAAON,EAAmBC,EAAeM,mBAAoBN,EAAeM,mB,CAG9E,oBAAYb,GACV,OAAOc,EAAoBP,EAAeQ,aAAcR,EAAeS,wB,CAGjE,WAAAf,GACNpC,KAAKY,aAAe,MACpBZ,KAAKa,QAAU,K,CAGjB,kBAAYuC,GACV,GAAIpD,KAAKqD,OAAQ,OAAOrD,KAAKqD,OAC7B,GAAIrD,KAAKsD,SAAU,OAAOC,SAASC,eAAexD,KAAKsD,UACvD,OAAO,I,CAGT,kBAAYG,GACV,GAAIzD,KAAKG,SAASuD,OAAS,EAAG,OAAO1D,KAAKG,SAC1C,GAAIH,KAAKE,MAAMwD,OAAS,EAAG,MAAO,CAAC,CAAExD,MAAOF,KAAKE,QACjD,MAAO,E,CAGT,aAAYyD,GACV,OAAO3D,KAAKyD,eAAeG,SAAQrE,GACjCD,EAA4BC,GAAW,GAAKA,EAAQW,O,CAIhD,mBAAA2B,GACN,GAAI7B,KAAKwB,mBAAqB,KAAM,CAClCqC,qBAAqB7D,KAAKwB,kBAC1BxB,KAAKwB,iBAAmB,I,EAKpB,sBAAAS,CAAuB6B,GAC7B,IAAK9D,KAAKC,KAAM,OAEhBD,KAAK6B,sBACL7B,KAAKkB,cAAgB,MAErB,IAAI6C,EAAYrE,EAEhB,MAAMsE,EAAU,KACdhE,KAAKwB,iBAAmB,KACxB,IAAKxB,KAAKC,KAAM,OAEhB,GAAID,KAAKiE,oBAAqB,CAC5BjE,KAAKkB,cAAgB,KACrB4C,MACA,M,CAGF,GAAIC,EAAY,EAAG,CACjBA,GAAa,EACb/D,KAAKwB,iBAAmB0C,sBAAsBF,E,GAIlDhE,KAAKwB,iBAAmB0C,sBAAsBF,E,CAIxC,iBAAAC,GACN,MAAME,EAAWnE,KAAKoD,eACtB,IAAKe,EAAU,OAAO,MACtB,MAAMC,EAAQpE,KAAKqE,GAAGC,cAAc,eACpC,IAAKF,EAAO,OAAO,MAEnBpE,KAAKc,IAAM1B,EAAoB,CAC7BmF,WAAYJ,EAASK,wBACrBC,WAAYL,EAAMM,aAAe1E,KAAK6C,qBACtC8B,YAAaP,EAAMQ,cAAgB5E,KAAK+C,sBACxC3C,KAAMJ,KAAKI,KACXC,MAAOL,KAAKK,MACZsC,aAAc3C,KAAK2C,aACnBC,cAAe5C,KAAK4C,cACpBJ,cAAexC,KAAKwC,cACpBqC,cAAeC,OAAOC,WACtBC,eAAgBF,OAAOG,cAEzB,OAAO,I,CAID,gBAAA/C,GACN,MAAMgD,EAAOlF,KAAK2D,UAClB,MAAMwB,EAAcD,EAAKE,WAAUC,GAAMA,EAAGC,aAAeD,EAAGE,aAC9D,MAAMC,EAAkBN,EAAKE,WAAUC,IAAOA,EAAGE,aACjDvF,KAAKiB,aAAekE,GAAe,EAC/BA,EACCK,GAAmB,EAAIA,EAAkB,EAE9CtB,uBAAsB,KACpB,MAAMuB,EAAOzF,KAAKqE,GAAGqB,iBAA8B,cACnDD,EAAKzF,KAAKiB,eAAe0E,OAAO,G,CAI5B,cAAA3D,GACNhC,KAAKoB,oBAAuBwE,IAC1B,MAAMC,EAAID,EAAEE,OACZ,MAAM1B,EAAQpE,KAAKqE,GAAGC,cAAc,eACpC,MAAMH,EAAWnE,KAAKoD,eACtB,GAAIgB,GAAO2B,SAASF,IAAM1B,GAAU4B,SAASF,GAAI,OACjD7F,KAAKgG,OAAO,EAGdhG,KAAKqB,oBAAsB,KACzB,GAAIrB,KAAKY,eAAiBZ,KAAKa,QAASb,KAAKiE,mBAAmB,EAGlEV,SAAS0C,iBAAiB,YAAajG,KAAKoB,oBAAqB,MACjE0D,OAAOmB,iBAAiB,SAAUjG,KAAKqB,oBAAqB,MAC5DyD,OAAOmB,iBAAiB,SAAUjG,KAAKqB,oB,CAGjC,iBAAAS,GACN,GAAI9B,KAAKoB,oBAAqB,CAC5BmC,SAAS2C,oBAAoB,YAAalG,KAAKoB,oBAAqB,MACpEpB,KAAKoB,oBAAsB,I,CAE7B,GAAIpB,KAAKqB,oBAAqB,CAC5ByD,OAAOoB,oBAAoB,SAAUlG,KAAKqB,oBAAqB,MAC/DyD,OAAOoB,oBAAoB,SAAUlG,KAAKqB,qBAC1CrB,KAAKqB,oBAAsB,I,CAE7B,GAAIrB,KAAKsB,WAAY,CACnB6E,aAAanG,KAAKsB,YAClBtB,KAAKsB,WAAa,I,EAId,KAAA0E,GACNhG,KAAKoD,gBAAgBuC,QACrB3F,KAAKoG,QAAQC,OACbrG,KAAKC,KAAO,MACZD,KAAK2B,aAAa,M,CAIpB,aAAA2E,CAAcV,GACZ,IAAK5F,KAAKY,cAAgBZ,KAAKa,QAAS,OACxC,MAAMqE,EAAOlF,KAAK2D,UAClB,MAAM4C,EAAUrB,EAAKsB,KAAI,CAACnB,EAAIoB,KAAC,CAAQpB,KAAIoB,QAAMC,QAAO,EAAGrB,SAAUA,EAAGE,aAAYiB,KAAI,EAAGC,KAAQA,IACnG,IAAKF,EAAQ7C,OAAQ,OAErB,MAAMiD,EAAMJ,EAAQK,QAAQ5G,KAAKiB,cACjC,MAAM4F,EAAOF,EAAM,EAAI,EAAIA,EAE3B,OAAQf,EAAEkB,KACR,IAAK,YACHlB,EAAEmB,iBAAkBnB,EAAEoB,kBACtBhH,KAAKmB,iBAAmB,KACxBnB,KAAKiB,aAAesF,GAASM,EAAO,GAAKN,EAAQ7C,QACjD1D,KAAKiH,UAAUjH,KAAKiB,cACpB,MACF,IAAK,UACH2E,EAAEmB,iBAAkBnB,EAAEoB,kBACtBhH,KAAKmB,iBAAmB,KACxBnB,KAAKiB,aAAesF,GAASM,EAAO,EAAIN,EAAQ7C,QAAU6C,EAAQ7C,QAClE1D,KAAKiH,UAAUjH,KAAKiB,cACpB,MACF,IAAK,OACH2E,EAAEmB,iBAAkBnB,EAAEoB,kBACtBhH,KAAKmB,iBAAmB,KACxBnB,KAAKiB,aAAesF,EAAQ,GAC5BvG,KAAKiH,UAAUjH,KAAKiB,cACpB,MACF,IAAK,MACH2E,EAAEmB,iBAAkBnB,EAAEoB,kBACtBhH,KAAKmB,iBAAmB,KACxBnB,KAAKiB,aAAesF,EAAQA,EAAQ7C,OAAS,GAC7C1D,KAAKiH,UAAUjH,KAAKiB,cACpB,MACF,IAAK,SACH2E,EAAEmB,iBACF/G,KAAKgG,QACL,MACF,IAAK,MACHJ,EAAEmB,iBACF/G,KAAKgG,QACL,M,CAIE,SAAAiB,CAAUC,GAChB,MAAMzB,EAAOzF,KAAKqE,GAAGqB,iBAA8B,cACnDD,EAAKyB,IAAMvB,O,CAGL,eAAAwB,CAAgBC,GACtB,GAAIA,EAAK7B,WAAY,OACrBvF,KAAKqH,SAAShB,KAAKe,E,CAGb,oBAAAE,CAAqBC,GAC3BvH,KAAKwH,iBAAiBnB,KAAKkB,E,CAG7B,MAAAE,GACE,IAAKzH,KAAKY,aAAc,OAAO8G,EAACC,EAAI,CAACC,MAAO,CAAEC,QAAS,cAEvD,MAAM1H,EAAWH,KAAKyD,eACtB,IAAIqE,EAAU,EAEd,MAAMC,EAAqC,CACzCC,SAAU,QACVC,KAAM,IACNC,IAAK,IACLC,UAAW,aAAaC,KAAKC,MAAMrI,KAAKc,IAAIC,SAASqH,KAAKC,MAAMrI,KAAKc,IAAIE,QACzEsH,OAAQ,OACRC,WAAYvI,KAAKkB,cAAgB,UAAY,UAG/C,GAAIlB,KAAKwI,UAAWT,EAAW,SAAW/H,KAAKwI,UAC/C,GAAIxI,KAAKyI,SAAUV,EAAW,aAAe/H,KAAKyI,SAElD,OACEf,EAACC,EAAI,CAACC,MAAO,CAAEC,QAAS,aACtBH,EAAA,OACEgB,MAAO,CACL,aAAc,KACd,sBAAuB1I,KAAKa,QAC5B,kBAAmB,KACnB,2BAA4Bb,KAAKa,SAEnC+G,MAAOG,EACPY,KAAK,OAAM,aACC3I,KAAKW,UAAS,mBACT,YAEjB+G,EAAA,OAAKgB,MAAM,kBACVvI,EAASqG,KAAI,CAACjH,EAASqJ,IACtBlB,EAAA,OACEZ,IAAK8B,EACLF,MAAO,CACL,eAAgB,KAChB,wBAAyBE,EAAKzI,EAASuD,OAAS,EAChD,gCAAiCpE,EAA4BC,GAC7D,oBAAqB,KACrB,6BAA8BqJ,EAAKzI,EAASuD,OAAS,GAEvDiF,KAAMpJ,EAAQsJ,OAAS,QAAUC,UAAS,aAC9BvJ,EAAQsJ,QAEnBtJ,EAAQsJ,QACPnB,EAAA,WACEgB,MAAM,0DACNK,GAAG,OACHvJ,QAAQ,kBACRwJ,SAAQ,KACRC,MAAM,UAAS,cACH,QAEX1J,EAAQsJ,QAGZvJ,EAA4BC,GAC3BmI,EAAA,4BACEwB,MAAO3J,EAAQ2J,MACfC,WAAavD,IACXA,EAAEoB,kBACFhH,KAAKsH,qBAAqB1B,EAAEwD,OAAO,IAIvC7J,EAAQW,MAAMsG,KAAIY,IAClB,MAAMF,EAAMY,IACZ,MAAMuB,EAAYrJ,KAAKiB,eAAiBiG,EACxC,OACEQ,EAAA,UACEZ,IAAKI,EACLoC,KAAK,SACLZ,MAAO,CACL,YAAa,KACb,iBAAkB,KAClB,iBAAkB,KAClB,sBAAuB,KACvB,yBAA0BW,GAAarJ,KAAKmB,iBAC5C,uBAAwBiG,EAAK7B,WAC7B,kCAAmC6B,EAAK9B,aAAe8B,EAAK7B,WAC5D,wBAAyB6B,EAAK9B,WAC9B,wBAAyB8B,EAAK7B,WAC9B,2BAA4B6B,EAAKmC,cACjC,qBAAsBF,GAExBV,KAAMvB,EAAKoC,WAAa,mBAAqB,WAAU,eACzCpC,EAAKoC,WAAaC,SAASrC,EAAKsC,aAAeZ,UAAS,gBACvD1B,EAAKoC,YAAcpC,EAAK9B,WAAa,OAASwD,UAC7Da,SAAUvC,EAAK7B,WACfqE,SAAUP,EAAY,GAAI,EAC1BQ,YAAa,KAAQ7J,KAAKmB,iBAAmB,KAAK,EAClD2I,QAAS,IAAM9J,KAAKmH,gBAAgBC,GACpC2C,QAAS,KAAQ/J,KAAKiB,aAAeiG,CAAG,GAExCQ,EAAA,OAAKgB,MAAM,2EACThB,EAAA,WACEgB,MAAM,yCACNK,GAAG,OACHvJ,QAAQ,mBACRyJ,MAAO7B,EAAK9B,WAAa,UAAY,aAEpC8B,EAAK4C,OAEP5C,EAAK6C,SACJvC,EAAA,WAASgB,MAAM,6CAA6CK,GAAG,OAAOvJ,QAAQ,kBAAkByJ,MAAM,aACnG7B,EAAK6C,UAIX7C,EAAK8C,KACJxC,EAAA,QAAMgB,MAAM,kDAAiD,cAAa,QACxEhB,EAAA,YACEgB,MAAM,iBACNlJ,QAAQ,MACR2K,QAAS,MACTH,MAAM,MAIX5C,EAAKoC,YACJ9B,EAAA,aACEgB,MAAM,iDACN0B,KAAK,KACLC,UAAWjD,EAAKsC,YAChBY,aAAY,OAGT,S","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["textVariantClass","variant","replace","textDisplayClass","element","textCss","Text","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","emphasis","color","italic","shimmer","lineTruncation","fontFeature","as","render","Tag","isCustomColor","c","startsWith","truncationLines","Number","cls","wrap","decoration","align","style","undefined","extraProps","for","textId","h","Host","key","class"],"sources":["src/wc/components/Text/text-utils.ts","src/wc/components/Text/Text.css?tag=ds-text&encapsulation=scoped","src/wc/components/Text/Text.tsx"],"sourcesContent":["import type { TextElement, TextVariant } from './text-types';\n\n/** `text-body-medium` → `ds-text--body-medium` */\nexport function textVariantClass(variant: TextVariant): string {\n return `ds-text--${variant.replace(/^text-/, '')}`;\n}\n\n/** Inline semantics get a measurable inline box; paragraphs/headings get a block box. */\nexport function textDisplayClass(element: TextElement): string {\n return element === 'span' || element === 'label'\n ? 'ds-text--inline-box'\n : 'ds-text--block-box';\n}\n","@import '../../utils/typography.css';\n@import '../../utils/shimmer.css';\n\n:host {\n box-sizing: border-box;\n max-width: 100%;\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n font-family: var(--typography-font-family);\n}\n\n:host(:where(.ds-text--inline-box)) {\n display: inline-block;\n}\n\n:host(:where(.ds-text--block-box)) {\n display: block;\n width: 100%;\n}\n\n/*\n * The host is the measurable typography box. The semantic inner element fills\n * it and inherits every text metric without adding margins, padding, or its own\n * line-height strut. One rendered line therefore measures exactly one token\n * line-height; N lines measure N × that token.\n */\n.ds-text__element {\n display: block;\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n font: inherit;\n line-height: inherit;\n letter-spacing: inherit;\n color: inherit;\n text-transform: inherit;\n text-align: inherit;\n text-decoration: inherit;\n font-style: inherit;\n font-variant-numeric: inherit;\n font-feature-settings: inherit;\n white-space: inherit;\n text-wrap: inherit;\n overflow-wrap: inherit;\n word-break: inherit;\n /* Consumer truncation on the host (PanelNav, ChartLegend, …) must reach the\n text node — overflow/text-overflow are not inherited by default. */\n overflow: inherit;\n text-overflow: inherit;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--truncate-1) {\n overflow: hidden;\n}\n\n:host(.ds-text--truncate-1) .ds-text__element {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.ds-text--truncate-2),\n:host(.ds-text--truncate-3),\n:host(.ds-text--truncate-4),\n:host(.ds-text--truncate-5) {\n overflow: hidden;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element,\n:host(.ds-text--truncate-3) .ds-text__element,\n:host(.ds-text--truncate-4) .ds-text__element,\n:host(.ds-text--truncate-5) .ds-text__element {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-word;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element { -webkit-line-clamp: 2; }\n:host(.ds-text--truncate-3) .ds-text__element { -webkit-line-clamp: 3; }\n:host(.ds-text--truncate-4) .ds-text__element { -webkit-line-clamp: 4; }\n:host(.ds-text--truncate-5) .ds-text__element { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--nowrap),\n:host(.ds-text--nowrap) .ds-text__element {\n white-space: nowrap;\n word-break: normal;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n:host(.ds-text--balance),\n:host(.ds-text--balance) .ds-text__element { text-wrap: balance; }\n\n:host(.ds-text--pretty),\n:host(.ds-text--pretty) .ds-text__element { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--color-primary) { color: var(--color-foreground-primary); }\n:host(.ds-text--color-secondary) { color: var(--color-foreground-secondary); }\n:host(.ds-text--color-tertiary) { color: var(--color-foreground-tertiary); }\n:host(.ds-text--color-brand) { color: var(--color-foreground-bold-brand); }\n:host(.ds-text--color-negative) { color: var(--color-foreground-bold-negative); }\n:host(.ds-text--color-positive) { color: var(--color-foreground-bold-positive); }\n:host(.ds-text--color-warning) { color: var(--color-foreground-bold-warning); }\n:host(.ds-text--color-caution) { color: var(--color-foreground-bold-caution); }\n:host(.ds-text--color-ai) { color: var(--color-foreground-bold-ai); }\n:host(.ds-text--color-on-strong) { color: var(--color-foreground-on-strong-background-primary); }\n:host(.ds-text--color-on-bold) { color: var(--color-foreground-on-bold-background-primary); }\n:host(.ds-text--color-inherit) { color: inherit; }\n\n/* ── Decorations ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--decoration-underline) {\n text-decoration: underline;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n:host(.ds-text--decoration-dotted-underline) {\n text-decoration: underline dotted;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--italic) { font-style: italic; }\n\n:host(.ds-text--font-feature-tabular-nums) {\n font-variant-numeric: tabular-nums;\n font-feature-settings: 'tnum';\n}\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--align-left) { text-align: left; }\n:host(.ds-text--align-center) { text-align: center; }\n:host(.ds-text--align-right) { text-align: right; }\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { textDisplayClass, textVariantClass } from './text-utils';\nimport type {\n TextAlign,\n TextColor,\n TextDecoration,\n TextElement,\n TextFontFeature,\n TextVariant,\n LineTruncation,\n TextWrap,\n} from './text-types';\n\n@Component({\n tag: 'ds-text',\n styleUrl: 'Text.css',\n scoped: true,\n})\nexport class Text {\n @Prop() variant: TextVariant = 'text-body-medium';\n /**\n * Heavier weight + tighter letter-spacing for the variant.\n * `false` (default): one step below emphasis (display semibold, title/body\n * medium, caption medium).\n * `true`: display bold, title/caption semibold, body medium.\n */\n @Prop() emphasis: boolean = false;\n @Prop() color: TextColor = 'inherit';\n /** Link underline or dotted hidden-interaction affordance; does not add semantics. */\n @Prop() decoration: TextDecoration | undefined;\n @Prop() italic: boolean = false;\n /** Animate the visible glyphs with the shared loading shimmer treatment. */\n @Prop() shimmer: boolean = false;\n @Prop() align: TextAlign | undefined;\n @Prop() lineTruncation: LineTruncation = 'none';\n @Prop() wrap: TextWrap | undefined;\n @Prop() fontFeature: TextFontFeature = 'normal';\n @Prop() as: TextElement = 'p';\n /** Maps to `for` attribute on <label> elements. */\n @Prop() for: string | undefined;\n /** Forwarded to the inner element (e.g. aria-labelledby targets). */\n @Prop() textId: string | undefined;\n\n render() {\n // Polymorphic element: TSX treats a variable tag as a component, so a\n // dynamic intrinsic element name must be cast to `any` to render.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const Tag = this.as as any;\n const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');\n const truncationLines = Number(this.lineTruncation);\n\n const cls: Record<string, boolean> = {\n 'ds-text': true,\n [textDisplayClass(this.as)]: true,\n [textVariantClass(this.variant)]: true,\n 'ds-text--emphasis': this.emphasis,\n 'ds-text--regular': !this.emphasis,\n 'ds-text--nowrap': this.wrap === 'nowrap',\n 'ds-text--balance': this.wrap === 'balance',\n 'ds-text--pretty': this.wrap === 'pretty',\n 'ds-text--truncate-1': truncationLines === 1 && this.wrap !== 'nowrap',\n 'ds-text--truncate-2': truncationLines === 2 && this.wrap !== 'nowrap',\n 'ds-text--truncate-3': truncationLines === 3 && this.wrap !== 'nowrap',\n 'ds-text--truncate-4': truncationLines === 4 && this.wrap !== 'nowrap',\n 'ds-text--truncate-5': truncationLines === 5 && this.wrap !== 'nowrap',\n 'ds-text--color-primary': this.color === 'primary',\n 'ds-text--color-secondary': this.color === 'secondary',\n 'ds-text--color-tertiary': this.color === 'tertiary',\n 'ds-text--color-brand': this.color === 'brand',\n 'ds-text--color-negative': this.color === 'negative',\n 'ds-text--color-positive': this.color === 'positive',\n 'ds-text--color-warning': this.color === 'warning',\n 'ds-text--color-caution': this.color === 'caution',\n 'ds-text--color-ai': this.color === 'ai',\n 'ds-text--color-on-strong': this.color === 'on-strong',\n 'ds-text--color-on-bold': this.color === 'on-bold',\n 'ds-text--color-inherit': this.color === 'inherit',\n 'ds-text--decoration-underline': this.decoration === 'underline',\n 'ds-text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n 'ds-text--italic': this.italic,\n 'ds-text--align-left': this.align === 'left',\n 'ds-text--align-center': this.align === 'center',\n 'ds-text--align-right': this.align === 'right',\n 'ds-text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',\n };\n\n const style = this.color && isCustomColor(this.color)\n ? { color: this.color as string }\n : undefined;\n\n const extraProps: Record<string, string> = {};\n if (this.as === 'label' && this.for) extraProps['for'] = this.for;\n if (this.textId) extraProps['id'] = this.textId;\n\n return (\n <Host class={cls} style={style}>\n <Tag\n class={{\n 'ds-text__element': true,\n 'ds-shimmer-text': this.shimmer,\n }}\n {...extraProps}\n >\n <slot />\n </Tag>\n </Host>\n );\n }\n}\n"],"mappings":"2DAGM,SAAUA,EAAiBC,GAC/B,MAAO,YAAYA,EAAQC,QAAQ,SAAU,KAC/C,CAGM,SAAUC,EAAiBC,GAC/B,OAAOA,IAAY,QAAUA,IAAY,QACrC,sBACA,oBACN,CCZA,MAAMC,EAAU,IAAM,4lW,MCkBTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAV,QAAuB,mBAOvBU,KAAAC,SAAoB,MACpBD,KAAAE,MAAmB,UAGnBF,KAAAG,OAAkB,MAElBH,KAAAI,QAAmB,MAEnBJ,KAAAK,eAAiC,OAEjCL,KAAAM,YAA+B,SAC/BN,KAAAO,GAAkB,GAuE3B,CAjEC,MAAAC,GAIE,MAAMC,EAAMT,KAAKO,GACjB,MAAMG,EAAiBC,UAAwBA,IAAM,UAAYA,EAAEC,WAAW,UAC9E,MAAMC,EAAkBC,OAAOd,KAAKK,gBAEpC,MAAMU,EAA+B,CACnC,UAAW,KACX,CAACvB,EAAiBQ,KAAKO,KAAM,KAC7B,CAAClB,EAAiBW,KAAKV,UAAW,KAClC,oBAAqBU,KAAKC,SAC1B,oBAAqBD,KAAKC,SAC1B,kBAAmBD,KAAKgB,OAAS,SACjC,mBAAoBhB,KAAKgB,OAAS,UAClC,kBAAmBhB,KAAKgB,OAAS,SACjC,sBAAuBH,IAAoB,GAAKb,KAAKgB,OAAS,SAC9D,sBAAuBH,IAAoB,GAAKb,KAAKgB,OAAS,SAC9D,sBAAuBH,IAAoB,GAAKb,KAAKgB,OAAS,SAC9D,sBAAuBH,IAAoB,GAAKb,KAAKgB,OAAS,SAC9D,sBAAuBH,IAAoB,GAAKb,KAAKgB,OAAS,SAC9D,yBAA4BhB,KAAKE,QAAU,UAC3C,2BAA4BF,KAAKE,QAAU,YAC3C,0BAA4BF,KAAKE,QAAU,WAC3C,uBAA4BF,KAAKE,QAAU,QAC3C,0BAA4BF,KAAKE,QAAU,WAC3C,0BAA4BF,KAAKE,QAAU,WAC3C,yBAA4BF,KAAKE,QAAU,UAC3C,yBAA4BF,KAAKE,QAAU,UAC3C,oBAA4BF,KAAKE,QAAU,KAC3C,2BAA4BF,KAAKE,QAAU,YAC3C,yBAA4BF,KAAKE,QAAU,UAC3C,yBAA4BF,KAAKE,QAAU,UAC3C,gCAAwCF,KAAKiB,aAAe,YAC5D,uCAAwCjB,KAAKiB,aAAe,mBAC5D,kBAAmBjB,KAAKG,OACxB,sBAAyBH,KAAKkB,QAAU,OACxC,wBAAyBlB,KAAKkB,QAAU,SACxC,uBAAyBlB,KAAKkB,QAAU,QACxC,qCAAsClB,KAAKM,cAAgB,gBAG7D,MAAMa,EAAQnB,KAAKE,OAASQ,EAAcV,KAAKE,OAC3C,CAAEA,MAAOF,KAAKE,OACdkB,UAEJ,MAAMC,EAAqC,GAC3C,GAAIrB,KAAKO,KAAO,SAAWP,KAAKsB,IAAKD,EAAW,OAASrB,KAAKsB,IAC9D,GAAItB,KAAKuB,OAAQF,EAAW,MAAQrB,KAAKuB,OAEzC,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOZ,EAAKI,MAAOA,GACvBK,EAACf,EAAG,CAAAiB,IAAA,2CACFC,MAAO,CACL,mBAAoB,KACpB,kBAAmB3B,KAAKI,YAEtBiB,GAEJG,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["buttonUnfilledCss","ICON_SIZE","md","sm","xs","ButtonUnfilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","isActive","activeFill","hasBorder","rounded","dot","isInactive","isLoading","type","ariaLabel","buttonEl","handleClick","event","dsClick","emit","dsChange","setFocus","focus","showIcon","showLabel","showDot","dotRing","accessibleName","undefined","render","bg","background","textVariant","CONTROL_TEXT_VARIANT","iconSize","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","focusTabIndex","controls","expanded","String","haspopup","pressed","onClick","color","name","as","emphasis"],"sources":["src/wc/components/ButtonUnfilled/ButtonUnfilled.css?tag=ds-button-unfilled&encapsulation=scoped","src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n display: inline-flex;\n outline: none;\n --ds-button-unfilled-fg: var(--color-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-unfilled-host--icon.ds-control-width--hug) {\n width: var(--ds-control-height, var(--dimension-size-400));\n height: var(--ds-control-height, var(--dimension-size-400));\n min-width: var(--ds-control-height, var(--dimension-size-400));\n min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-unfilled-host--icon.ds-control-width--fill) {\n height: var(--ds-control-height, var(--dimension-size-400));\n min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-unfilled {\n width: 100%;\n}\n\n.button-unfilled {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n gap: var(--ds-control-gap, var(--dimension-space-050));\n background: transparent;\n border: none;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n color: var(--ds-button-unfilled-fg);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n overflow: hidden;\n transition: color var(--effect-motion-short-2);\n /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n Active always promotes foreground to primary (toggle mode). */\n}\n\n.button-unfilled--icon {\n width: 100%;\n height: 100%;\n padding: 0;\n}\n\n.button-unfilled--rounded {\n --ds-control-radius: var(--dimension-radius-half);\n}\n\n.button-unfilled--active {\n color: var(--ds-button-unfilled-fg-active);\n}\n\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Fallback if interaction-fill is omitted (should be rare — prefer keep the util class). */\n.button-unfilled--bordered:not(.ds-interaction-fill) {\n box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--background-medium {\n --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--background-bold {\n --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--background-strong {\n --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--background-translucent {\n --ds-button-unfilled-fg: var(--color-translucent-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-translucent-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-translucent-translucent);\n --ds-button-unfilled-border: var(--color-translucent-border-secondary);\n}\n\n.button-unfilled--background-inverted {\n --ds-button-unfilled-fg: var(--color-inverted-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-inverted-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-inverted-background);\n --ds-button-unfilled-border: var(--color-inverted-border-secondary);\n}\n\n.button-unfilled--background-media {\n --ds-button-unfilled-fg: var(--color-media-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-media-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-media-background);\n --ds-button-unfilled-border: var(--color-media-border-secondary);\n}\n\n.button-unfilled--on-always-dark {\n --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n\n.button-unfilled__icon-wrap {\n position: relative;\n width: var(--ds-control-icon, var(--dimension-iconography-md));\n height: var(--ds-control-icon, var(--dimension-iconography-md));\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n z-index: 2;\n}\n\n.button-unfilled__label {\n position: relative;\n z-index: 2;\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n white-space: nowrap;\n flex-shrink: 0;\n min-width: 0;\n}\n\n.button-unfilled__label--loading {\n visibility: hidden;\n}\n\n.button-unfilled > .button-unfilled__loader-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n}\n\n.button-unfilled__dot {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n pointer-events: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type ButtonUnfilledBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'always-dark';\n\nexport type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonUnfilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonUnfilledWidth = ControlWidth;\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonUnfilledSize, 'md' | 'sm' | 'xs'> = {\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\n@Component({\n tag: 'ds-button-unfilled',\n styleUrl: 'ButtonUnfilled.css',\n scoped: true,\n})\nexport class ButtonUnfilled {\n @Element() el!: HTMLElement;\n\n /**\n * Content layout. Default is label-only; pass `icon` for icon-only chrome\n * (nav / tool rails) or `icon-label` for leading icon + text.\n */\n @Prop() variant: ButtonUnfilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonUnfilledSize = 'md';\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonUnfilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /** Active/selected visual state. Always promotes foreground to primary. */\n @Prop() isActive: boolean = false;\n\n /**\n * When active, render the selected interaction fill.\n * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n * `false` so selection is foreground-only (primary color, no fill).\n */\n @Prop() activeFill: boolean = true;\n\n /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n @Prop() hasBorder: boolean = true;\n\n /** Use the half-radius treatment instead of the default control radius. */\n @Prop() rounded: boolean = false;\n\n /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n @Prop() dot: boolean = false;\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n @Prop() isLoading: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /** Actual parent surface context. Omit on primary and secondary surfaces. */\n @Prop() background: ButtonUnfilledBackground | undefined;\n\n /** Accessible name override. Required for icon-only buttons. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop() controls: string | undefined;\n @Prop() expanded: boolean | undefined;\n @Prop() haspopup: string | undefined;\n @Prop() pressed: boolean | undefined;\n\n /**\n * Native `tabindex` for roving keyboard groups in shell chrome.\n * Omit for the default button tab stop (`0`).\n */\n @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n @Event() dsChange!: EventEmitter<boolean>;\n\n private buttonEl: HTMLButtonElement | null = null;\n\n @Method()\n async setFocus() {\n this.buttonEl?.focus();\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) return;\n this.dsClick.emit(event);\n this.dsChange.emit(!this.isActive);\n };\n\n private get showIcon(): boolean {\n return this.variant === 'icon' || this.variant === 'icon-label';\n }\n\n private get showLabel(): boolean {\n return this.variant === 'label' || this.variant === 'icon-label';\n }\n\n private get showDot(): boolean {\n return this.variant === 'icon' && this.dot && !this.isLoading;\n }\n\n /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n private get dotRing(): string {\n if (this.isActive && this.activeFill) {\n return 'var(--ds-interaction-active)';\n }\n return 'var(--ds-button-unfilled-dot-ring)';\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n return undefined;\n }\n\n render() {\n const bg = this.background;\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n\n const cls: Record<string, boolean> = {\n 'button-unfilled': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--selected': this.isActive && this.activeFill && !this.isInactive,\n 'ds-interaction-fill--on-faint': bg === 'faint',\n 'ds-interaction-fill--on-medium': bg === 'medium',\n 'ds-interaction-fill--on-bold': bg === 'bold',\n 'ds-interaction-fill--on-strong': bg === 'strong',\n 'ds-interaction-fill--on-translucent': bg === 'translucent',\n 'ds-interaction-fill--on-inverted': bg === 'inverted',\n 'ds-interaction-fill--on-media': bg === 'media',\n 'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n 'button-unfilled--active': this.isActive,\n 'button-unfilled--bordered': this.hasBorder,\n 'button-unfilled--rounded': this.rounded,\n 'ds-control-inactive': this.isInactive,\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'button-unfilled--icon': this.variant === 'icon',\n 'button-unfilled--label': this.variant === 'label',\n 'button-unfilled--icon-label': this.variant === 'icon-label',\n 'button-unfilled--background-faint': bg === 'faint',\n 'button-unfilled--background-medium': bg === 'medium',\n 'button-unfilled--background-bold': bg === 'bold',\n 'button-unfilled--background-strong': bg === 'strong',\n 'button-unfilled--background-translucent': bg === 'translucent',\n 'button-unfilled--background-inverted': bg === 'inverted',\n 'button-unfilled--background-media': bg === 'media',\n 'button-unfilled--on-always-dark': bg === 'always-dark',\n };\n\n return (\n <Host\n class={{\n 'button-unfilled-host': true,\n 'button-unfilled-host--icon': this.variant === 'icon',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n ...controlWidthClass(this.width),\n }}\n tabIndex={-1}\n >\n <button\n ref={el => {\n this.buttonEl = el ?? null;\n }}\n type={this.type}\n class={cls}\n disabled={this.isInactive || this.isLoading}\n tabIndex={this.focusTabIndex ?? 0}\n aria-label={this.accessibleName}\n aria-busy={this.isLoading ? 'true' : undefined}\n aria-controls={this.controls}\n aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n aria-haspopup={this.haspopup}\n aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n onClick={this.handleClick}\n >\n {this.showIcon && (\n <span class=\"button-unfilled__icon-wrap ds-interaction-fill__content\">\n {this.isLoading\n ? <ds-loader size={iconSize} color=\"inherit\" />\n : <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n }\n {this.showDot && (\n <ds-badge\n class=\"button-unfilled__dot\"\n variant=\"dot\"\n background={this.dotRing}\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n )}\n {this.showLabel && (\n <ds-text\n class={{\n 'button-unfilled__label': true,\n 'button-unfilled__label--loading': this.isLoading && this.variant === 'label',\n 'ds-interaction-fill__content': true,\n }}\n as=\"span\"\n variant={textVariant}\n emphasis\n color=\"inherit\"\n >\n {this.label}\n </ds-text>\n )}\n {this.isLoading && this.variant === 'label' && (\n <span class=\"button-unfilled__loader-overlay ds-interaction-fill__content\">\n <ds-loader size={iconSize} color=\"inherit\" />\n </span>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as e,H as s,h as r,a as o,t as n}from"./index.js";const i=()=>`:host(.ds-control--md),.ds-control--md{--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-radius:var(--dimension-radius-025)}:host(.ds-control--sm),.ds-control--sm{--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-radius:var(--dimension-radius-025)}:host(.ds-control--xs),.ds-control--xs{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}@keyframes ds-shimmer-text-motion{0%{background-position:100% 0}76.923%{background-position:0 0}100%{background-position:0 0}}@keyframes ds-shimmer-surface-motion{0%{background-position:100% 0}76.923%{background-position:0 0}100%{background-position:0 0}}.ds-shimmer-text{--ds-shimmer-base:currentColor;--ds-shimmer-duration:var(--effect-animation-duration-long-2);--ds-shimmer-repeat-delay:var(--effect-animation-delay-short-3);--ds-shimmer-cycle-duration:calc( var(--ds-shimmer-duration) + var(--ds-shimmer-repeat-delay) );--ds-shimmer-easing:var(--effect-animation-easing-linear);--ds-shimmer-spread:var(--dimension-size-500);--ds-shimmer-travel:calc( var(--dimension-size-800) + var(--dimension-size-500) + var(--dimension-size-200) );background-color:var(--ds-shimmer-base);background-image:linear-gradient( 330deg, transparent calc(50% - var(--ds-shimmer-spread)), var(--ds-shimmer, var(--color-shimmer-shimmer)) 50%, transparent calc(50% + var(--ds-shimmer-spread)) );background-repeat:no-repeat;background-position:100% 0;background-size:calc( 200% + var(--ds-shimmer-spread) * 2 + var(--ds-shimmer-travel) * 2 ) 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:ds-shimmer-text-motion var(--ds-shimmer-cycle-duration) var(--ds-shimmer-easing) infinite}.ds-shimmer-surface{--ds-shimmer-surface-base:var(--color-foreground-quaternary);--ds-shimmer-duration:var(--effect-animation-duration-long-2);--ds-shimmer-repeat-delay:var(--effect-animation-delay-short-3);--ds-shimmer-cycle-duration:calc( var(--ds-shimmer-duration) + var(--ds-shimmer-repeat-delay) );--ds-shimmer-easing:var(--effect-animation-easing-linear);--ds-shimmer-spread:var(--dimension-size-500);--ds-shimmer-travel:calc( var(--dimension-size-800) + var(--dimension-size-500) + var(--dimension-size-200) );position:relative;overflow:hidden;background-color:var(--ds-shimmer-surface-base)}.ds-shimmer-surface::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient( 330deg, transparent calc(50% - var(--ds-shimmer-spread)), var(--ds-shimmer, var(--color-shimmer-shimmer)) 50%, transparent calc(50% + var(--ds-shimmer-spread)) );background-repeat:no-repeat;background-position:100% 0;background-size:calc( 200% + var(--ds-shimmer-spread) * 2 + var(--ds-shimmer-travel) * 2 ) 100%;animation:ds-shimmer-surface-motion var(--ds-shimmer-cycle-duration) var(--ds-shimmer-easing) infinite}:where([dir='rtl'],[dir='rtl'] *) .ds-shimmer-text,:where([dir='rtl'],[dir='rtl'] *) .ds-shimmer-surface::after{animation-direction:reverse}:host-context([dir='rtl']) .ds-shimmer-text,:host-context([dir='rtl']) .ds-shimmer-surface::after{animation-direction:reverse}@media (prefers-reduced-motion: reduce){.ds-shimmer-text{animation:none;background-image:none;-webkit-text-fill-color:currentColor}.ds-shimmer-surface::after{display:none;animation:none}}:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;vertical-align:middle;--ds-skeleton-base:var(--color-foreground-quaternary);--ds-shimmer:var(--color-shimmer-shimmer)}.skeleton__shape{--ds-shimmer-surface-base:var(--ds-skeleton-base);display:block;width:100%;height:100%;flex:0 0 auto;background-color:var(--ds-skeleton-base);border-radius:var(--dimension-radius-025)}:host(.skeleton--background-medium){--ds-skeleton-base:var(--color-foreground-on-medium-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-medium-background)}:host(.skeleton--background-bold){--ds-skeleton-base:var(--color-foreground-on-bold-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-bold-background)}:host(.skeleton--background-strong){--ds-skeleton-base:var(--color-foreground-on-strong-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-strong-background)}:host(.skeleton--background-translucent){--ds-skeleton-base:var(--color-translucent-foreground-quaternary);--ds-shimmer:var(--color-translucent-shimmer)}:host(.skeleton--background-inverted){--ds-skeleton-base:var(--color-inverted-foreground-quaternary);--ds-shimmer:var(--color-inverted-shimmer)}:host(.skeleton--background-media){--ds-skeleton-base:var(--color-media-foreground-quaternary);--ds-shimmer:var(--color-media-shimmer)}:host(.skeleton--background-always-dark){--ds-skeleton-base:var(--color-always-dark-foreground-quaternary);--ds-shimmer:var(--color-always-dark-shimmer)}:host(.skeleton--background-navigation){--ds-skeleton-base:var(--color-navigation-foreground-quaternary);--ds-shimmer:var(--color-navigation-shimmer)}:host(.skeleton--text){width:100%;height:var(--ds-skeleton-canvas-size);padding-block:var(--dimension-space-025)}:host(.skeleton--text) .skeleton__shape{height:calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050))}:host(.skeleton--text-text-display-medium){--ds-skeleton-canvas-size:var(--typography-lineheight-3xl)}:host(.skeleton--text-text-display-small){--ds-skeleton-canvas-size:var(--typography-lineheight-2xl)}:host(.skeleton--text-text-title-large){--ds-skeleton-canvas-size:var(--typography-lineheight-xl)}:host(.skeleton--text-text-title-medium),:host(.skeleton--text-text-body-large){--ds-skeleton-canvas-size:var(--typography-lineheight-lg)}:host(.skeleton--text-text-title-small),:host(.skeleton--text-text-body-medium){--ds-skeleton-canvas-size:var(--typography-lineheight-md)}:host(.skeleton--text-text-body-small){--ds-skeleton-canvas-size:var(--typography-lineheight-sm)}:host(.skeleton--text-text-caption){--ds-skeleton-canvas-size:var(--typography-lineheight-xs)}:host(.skeleton--icon){width:var(--ds-skeleton-canvas-size);height:var(--ds-skeleton-canvas-size);padding:var(--dimension-space-025)}:host(.skeleton--icon) .skeleton__shape{width:calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));height:calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050))}:host(.skeleton--icon.skeleton--rounded) .skeleton__shape{border-radius:var(--dimension-radius-half)}:host(.skeleton--icon-xs){--ds-skeleton-canvas-size:var(--dimension-iconography-xs)}:host(.skeleton--icon-sm){--ds-skeleton-canvas-size:var(--dimension-iconography-sm)}:host(.skeleton--icon-md){--ds-skeleton-canvas-size:var(--dimension-iconography-md)}:host(.skeleton--icon-lg){--ds-skeleton-canvas-size:var(--dimension-iconography-lg)}:host(.skeleton--icon-xl){--ds-skeleton-canvas-size:var(--dimension-iconography-xl)}:host(.skeleton--icon-2xl){--ds-skeleton-canvas-size:var(--dimension-iconography-2xl)}:host(.skeleton--icon-3xl){--ds-skeleton-canvas-size:var(--dimension-iconography-3xl)}:host(.skeleton--control){width:100%;height:var(--ds-control-height)}:host(.skeleton--control.skeleton--rounded) .skeleton__shape{border-radius:var(--dimension-radius-half)}`;const t=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.variant="text";this.textVariant="text-body-medium";this.iconSize="md";this.controlSize="md";this.rounded=false;this.shimmer=true}get widthCss(){const e=this.width;if(e==null)return undefined;return typeof e==="number"?`${e}px`:e}render(){return r(o,{key:"cebc0050d0f944bfa050d16d3e22bd517bd125c7","aria-hidden":"true",class:{skeleton:true,[`skeleton--${this.variant}`]:true,[`skeleton--text-${this.textVariant}`]:this.variant==="text",[`skeleton--icon-${this.iconSize}`]:this.variant==="icon",[`ds-control--${this.controlSize}`]:this.variant==="control",[`skeleton--background-${this.background}`]:!!this.background,"skeleton--rounded":this.variant!=="text"&&this.rounded},style:this.variant==="icon"?undefined:{width:this.widthCss}},r("span",{key:"cb5a3ea92d92599e81581d9a80ac996d14c85dde",class:{skeleton__shape:true,"ds-shimmer-surface":this.shimmer}}))}static get style(){return i()}},[1,"ds-skeleton",{variant:[1],textVariant:[1,"text-variant"],iconSize:[1,"icon-size"],controlSize:[1,"control-size"],width:[8],rounded:[4],shimmer:[4],background:[1]}]);function a(){if(typeof customElements==="undefined"){return}const e=["ds-skeleton"];e.forEach((e=>{switch(e){case"ds-skeleton":if(!customElements.get(n(e))){customElements.define(n(e),t)}break}}))}a();export{t as S,a as d};
|
|
2
|
-
//# sourceMappingURL=p-auwU64d8.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{h as e}from"./index.js";const n=({value:n,placeholder:t,controls:o,activeDescendant:s,inputRef:i,clearLabel:a,onValueChange:r,onKeyDown:c})=>{let l=null;return e("div",{class:"select-search"},e("div",{class:"select-search__control ds-control--md"},e("ds-icon",{name:"MagnifyingGlass",size:"md",color:"inherit"}),e("input",{class:"ds-text--body-medium ds-text--regular",ref:e=>{l=e??null;i(l)},type:"search",value:n,placeholder:t,"aria-label":t,"aria-controls":o,"aria-activedescendant":s,onInput:e=>r(e.target.value),onKeyDown:c}),n&&e("ds-button-unfilled",{class:"select-search__clear",variant:"icon",size:"sm",icon:"Cross",hasBorder:false,rounded:true,ariaLabel:`${a} ${t}`,onDsClick:()=>{r("");requestAnimationFrame((()=>l?.focus()))}})))};const t=({clearLabel:n,summary:t,onClear:o})=>e("div",{class:"ds-choice-footer"},e("div",{class:"ds-choice-footer__content ds-control--md"},t&&e("ds-text",{class:"ds-choice-footer__summary",as:"span",variant:"text-body-medium",color:"secondary"},t),e("button",{type:"button",class:"ds-choice-footer__clear ds-focus-ring",onClick:o},e("ds-text",{as:"span",variant:"text-body-medium",color:"inherit"},n))));const o=({id:n,option:t,selected:o,active:s,focusRingVisible:i,usesSubtext:a,leading:r,onHover:c,onSelect:l})=>e("div",{id:n,class:{"select-option":true,"ds-choice-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":s&&i,"ds-interaction-fill":!t.isInactive,"ds-interaction-fill--selected":o&&!t.isInactive,"ds-control-inactive":!!t.isInactive,"select-option--active":s},role:"option","aria-selected":String(o),"aria-disabled":t.isInactive?"true":undefined,onMouseDown:e=>e.preventDefault(),onMouseMove:()=>{if(!t.isInactive)c()},onClick:l},r,e("div",{class:"ds-choice-item__content ds-interaction-fill__content"},e("ds-text",{class:"ds-choice-item__label",as:"span",variant:"text-body-medium",color:o?"primary":"secondary"},t.label),a&&e("ds-text",{class:"ds-choice-item__subtext",as:"span",variant:"text-body-small",color:"secondary"},t.subtext?.trim()||"—")));function s(e,n){return n.length>0?n:[{options:e}]}function i(e){return e.flatMap((e=>e.options))}function a(e){return e.length>0&&e.every((e=>Boolean(e.icon)))}function r(e){return e.some((e=>Boolean(e.subtext?.trim())))}function c(e,n){const t=n.trim().toLocaleLowerCase();if(!t)return e;return e.map((e=>{const n=e.header?.toLocaleLowerCase().includes(t);return{...e,options:n?e.options:e.options.filter((e=>`${e.label} ${e.subtext??""}`.toLocaleLowerCase().includes(t)))}})).filter((e=>e.options.length>0))}function l(e){return e.map(((e,n)=>({option:e,index:n}))).filter((({option:e})=>!e.isInactive)).map((({index:e})=>e))}function d(e,n,t){const o=l(e);if(!o.length)return-1;const s=o.indexOf(n);const i=s>=0?s:t===1?-1:0;return o[(i+t+o.length)%o.length]}function u(e,n,t){const o=n.toLocaleLowerCase();if(!o)return-1;for(let n=1;n<=e.length;n+=1){const s=(Math.max(t,-1)+n)%e.length;const i=e[s];if(!i.isInactive&&i.label.toLocaleLowerCase().startsWith(o))return s}return-1}function f(e){return{"ds-interaction-fill--on-faint":e==="faint","ds-interaction-fill--on-medium":e==="medium","ds-interaction-fill--on-bold":e==="bold","ds-interaction-fill--on-strong":e==="strong","ds-interaction-fill--on-translucent":e==="translucent","ds-interaction-fill--on-inverted":e==="inverted","ds-interaction-fill--on-media":e==="media","ds-interaction-fill--on-always-dark":e==="always-dark"}}export{o as C,c as a,u as b,a as c,r as d,l as e,i as f,n as g,t as h,f as i,d as m,s as r};
|
|
2
|
-
//# sourceMappingURL=p-f0a1l4Uc.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["ChoiceSearch","value","placeholder","controls","activeDescendant","inputRef","clearLabel","onValueChange","onKeyDown","inputElement","h","class","name","size","color","ref","element","type","onInput","event","target","variant","icon","hasBorder","rounded","ariaLabel","onDsClick","requestAnimationFrame","focus","ChoiceFooter","summary","onClear","as","onClick","ChoiceOptionRow","id","option","selected","active","focusRingVisible","usesSubtext","leading","onHover","onSelect","isInactive","role","String","undefined","onMouseDown","preventDefault","onMouseMove","label","subtext","trim","resolveChoiceSections","options","sections","length","flattenChoiceSections","flatMap","section","choiceListUsesIcons","every","Boolean","choiceListUsesSubtext","some","filterChoiceSections","searchTerm","normalized","toLocaleLowerCase","map","sectionMatches","header","includes","filter","enabledChoiceIndexes","index","moveChoiceIndex","currentIndex","direction","enabled","currentEnabledIndex","indexOf","start","findChoiceTypeaheadMatch","query","offset","Math","max","startsWith","choiceBackgroundClassMap","background"],"sources":["src/wc/utils/choice-list-parts.tsx","src/wc/utils/choice-list.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Stencil's configured JSX factory requires h at compile time.\nimport { FunctionalComponent, h, VNode } from '@stencil/core';\nimport type { ChoiceOption } from './choice-list';\n\ninterface ChoiceSearchProps {\n value: string;\n placeholder: string;\n controls: string;\n activeDescendant?: string;\n inputRef: (element: HTMLInputElement | null) => void;\n clearLabel: string;\n onValueChange: (value: string) => void;\n onKeyDown: (event: KeyboardEvent) => void;\n}\n\nexport const ChoiceSearch: FunctionalComponent<ChoiceSearchProps> = ({\n value,\n placeholder,\n controls,\n activeDescendant,\n inputRef,\n clearLabel,\n onValueChange,\n onKeyDown,\n}) => {\n let inputElement: HTMLInputElement | null = null;\n\n return (\n <div class=\"select-search\">\n <div class=\"select-search__control ds-control--md\">\n <ds-icon name=\"MagnifyingGlass\" size=\"md\" color=\"inherit\" />\n <input\n class=\"ds-text--body-medium ds-text--regular\"\n ref={element => {\n inputElement = (element as HTMLInputElement) ?? null;\n inputRef(inputElement);\n }}\n type=\"search\"\n value={value}\n placeholder={placeholder}\n aria-label={placeholder}\n aria-controls={controls}\n aria-activedescendant={activeDescendant}\n onInput={event => onValueChange((event.target as HTMLInputElement).value)}\n onKeyDown={onKeyDown}\n />\n {value && (\n <ds-button-unfilled\n class=\"select-search__clear\"\n variant=\"icon\"\n size=\"sm\"\n icon=\"Cross\"\n hasBorder={false}\n rounded\n ariaLabel={`${clearLabel} ${placeholder}`}\n onDsClick={() => {\n onValueChange('');\n requestAnimationFrame(() => inputElement?.focus());\n }}\n />\n )}\n </div>\n </div>\n );\n};\n\ninterface ChoiceFooterProps {\n clearLabel: string;\n summary?: string;\n onClear: (event: MouseEvent) => void;\n}\n\nexport const ChoiceFooter: FunctionalComponent<ChoiceFooterProps> = ({\n clearLabel,\n summary,\n onClear,\n}) => (\n <div class=\"ds-choice-footer\">\n <div class=\"ds-choice-footer__content ds-control--md\">\n {summary && (\n <ds-text class=\"ds-choice-footer__summary\" as=\"span\" variant=\"text-body-medium\" color=\"secondary\">\n {summary}\n </ds-text>\n )}\n <button\n type=\"button\"\n class=\"ds-choice-footer__clear ds-focus-ring\"\n onClick={onClear}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n {clearLabel}\n </ds-text>\n </button>\n </div>\n </div>\n);\n\ninterface ChoiceOptionRowProps {\n id: string;\n option: ChoiceOption;\n selected: boolean;\n active: boolean;\n focusRingVisible: boolean;\n usesSubtext: boolean;\n leading?: VNode;\n onHover: () => void;\n onSelect: () => void;\n}\n\nexport const ChoiceOptionRow: FunctionalComponent<ChoiceOptionRowProps> = ({\n id,\n option,\n selected,\n active,\n focusRingVisible,\n usesSubtext,\n leading,\n onHover,\n onSelect,\n}) => (\n <div\n id={id}\n class={{\n 'select-option': true,\n 'ds-choice-item': true,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible': active && focusRingVisible,\n 'ds-interaction-fill': !option.isInactive,\n 'ds-interaction-fill--selected': selected && !option.isInactive,\n 'ds-control-inactive': !!option.isInactive,\n 'select-option--active': active,\n }}\n role=\"option\"\n aria-selected={String(selected)}\n aria-disabled={option.isInactive ? 'true' : undefined}\n onMouseDown={event => event.preventDefault()}\n onMouseMove={() => {\n if (!option.isInactive) onHover();\n }}\n onClick={onSelect}\n >\n {leading}\n <div class=\"ds-choice-item__content ds-interaction-fill__content\">\n <ds-text\n class=\"ds-choice-item__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color={selected ? 'primary' : 'secondary'}\n >\n {option.label}\n </ds-text>\n {usesSubtext && (\n <ds-text class=\"ds-choice-item__subtext\" as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n {option.subtext?.trim() || '—'}\n </ds-text>\n )}\n </div>\n </div>\n);\n","export interface ChoiceOption {\n label: string;\n value: string;\n subtext?: string;\n /** Rendered only when every option in the complete list supplies an icon. */\n icon?: string;\n isInactive?: boolean;\n}\n\nexport interface ChoiceSection {\n header?: string;\n options: ChoiceOption[];\n divider?: boolean;\n}\n\nexport type ChoiceBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'always-dark';\n\nexport function resolveChoiceSections(\n options: ChoiceOption[],\n sections: ChoiceSection[],\n): ChoiceSection[] {\n return sections.length > 0 ? sections : [{ options }];\n}\n\nexport function flattenChoiceSections(sections: ChoiceSection[]): ChoiceOption[] {\n return sections.flatMap(section => section.options);\n}\n\n/** A choice list has one stable row layout: every option has an icon, or none do. */\nexport function choiceListUsesIcons(options: ChoiceOption[]): boolean {\n return options.length > 0 && options.every(option => Boolean(option.icon));\n}\n\n/** Once one option needs supporting text, every row keeps the same two-line structure. */\nexport function choiceListUsesSubtext(options: ChoiceOption[]): boolean {\n return options.some(option => Boolean(option.subtext?.trim()));\n}\n\nexport function filterChoiceSections(\n sections: ChoiceSection[],\n searchTerm: string,\n): ChoiceSection[] {\n const normalized = searchTerm.trim().toLocaleLowerCase();\n if (!normalized) return sections;\n\n return sections\n .map(section => {\n const sectionMatches = section.header?.toLocaleLowerCase().includes(normalized);\n return {\n ...section,\n options: sectionMatches\n ? section.options\n : section.options.filter(option =>\n `${option.label} ${option.subtext ?? ''}`.toLocaleLowerCase().includes(normalized),\n ),\n };\n })\n .filter(section => section.options.length > 0);\n}\n\nexport function enabledChoiceIndexes(options: ChoiceOption[]): number[] {\n return options\n .map((option, index) => ({ option, index }))\n .filter(({ option }) => !option.isInactive)\n .map(({ index }) => index);\n}\n\nexport function moveChoiceIndex(\n options: ChoiceOption[],\n currentIndex: number,\n direction: 1 | -1,\n): number {\n const enabled = enabledChoiceIndexes(options);\n if (!enabled.length) return -1;\n\n const currentEnabledIndex = enabled.indexOf(currentIndex);\n const start = currentEnabledIndex >= 0 ? currentEnabledIndex : direction === 1 ? -1 : 0;\n return enabled[(start + direction + enabled.length) % enabled.length];\n}\n\nexport function findChoiceTypeaheadMatch(\n options: ChoiceOption[],\n query: string,\n currentIndex: number,\n): number {\n const normalized = query.toLocaleLowerCase();\n if (!normalized) return -1;\n\n for (let offset = 1; offset <= options.length; offset += 1) {\n const index = (Math.max(currentIndex, -1) + offset) % options.length;\n const option = options[index];\n if (!option.isInactive && option.label.toLocaleLowerCase().startsWith(normalized)) return index;\n }\n return -1;\n}\n\nexport function choiceBackgroundClassMap(\n background: ChoiceBackground | undefined,\n): Record<string, boolean> {\n return {\n 'ds-interaction-fill--on-faint': background === 'faint',\n 'ds-interaction-fill--on-medium': background === 'medium',\n 'ds-interaction-fill--on-bold': background === 'bold',\n 'ds-interaction-fill--on-strong': background === 'strong',\n 'ds-interaction-fill--on-translucent': background === 'translucent',\n 'ds-interaction-fill--on-inverted': background === 'inverted',\n 'ds-interaction-fill--on-media': background === 'media',\n 'ds-interaction-fill--on-always-dark': background === 'always-dark',\n };\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This file was automatically generated by the Stencil React Output Target.
|
|
3
|
-
* Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
|
|
4
|
-
*/
|
|
5
|
-
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
|
|
6
|
-
import { type DsRadioGroupCustomEvent } from "@ds-mo/ui";
|
|
7
|
-
import type { Components } from "@ds-mo/ui/dist/components";
|
|
8
|
-
import { DsRadioGroup as DsRadioGroupElement } from "@ds-mo/ui/dist/components/ds-radio-group.js";
|
|
9
|
-
export type DsRadioGroupEvents = {
|
|
10
|
-
onDsChange: EventName<DsRadioGroupCustomEvent<string>>;
|
|
11
|
-
};
|
|
12
|
-
export declare const DsRadioGroup: StencilReactComponent<DsRadioGroupElement, DsRadioGroupEvents, Components.DsRadioGroup>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { createComponent } from '@stencil/react-output-target/runtime';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { DsRadioGroup as DsRadioGroupElement, defineCustomElement as defineDsRadioGroup } from "@ds-mo/ui/dist/components/ds-radio-group.js";
|
|
5
|
-
export const DsRadioGroup = /*@__PURE__*/ createComponent({
|
|
6
|
-
tagName: 'ds-radio-group',
|
|
7
|
-
elementClass: DsRadioGroupElement,
|
|
8
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
9
|
-
react: React,
|
|
10
|
-
events: { onDsChange: 'dsChange' },
|
|
11
|
-
defineCustomElement: defineDsRadioGroup
|
|
12
|
-
});
|
|
File without changes
|
|
File without changes
|