@ds-mo/ui 0.8.7 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ds-button-group.d.ts +11 -0
- package/dist/components/ds-button-group.js +2 -0
- package/dist/components/ds-button-group.js.map +1 -0
- package/dist/components/ds-button.js +1 -1
- package/dist/components/ds-button.js.map +1 -1
- package/dist/components/ds-card.js +1 -1
- package/dist/components/ds-card.js.map +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-checkbox.js.map +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-fade.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-field.js.map +1 -1
- package/dist/components/ds-header.js +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-label-wrap.d.ts +11 -0
- package/dist/components/ds-label-wrap.js +2 -0
- package/dist/components/ds-label-wrap.js.map +1 -0
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-menu.js.map +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-radio-group.js +1 -1
- package/dist/components/ds-scrollbar.js +1 -1
- package/dist/components/ds-select.d.ts +11 -0
- package/dist/components/ds-select.js +2 -0
- package/dist/components/ds-select.js.map +1 -0
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-surface.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-table.js.map +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toast-provider.js +1 -1
- package/dist/components/ds-toggle-button-group.d.ts +11 -0
- package/dist/components/ds-toggle-button-group.js +2 -0
- package/dist/components/ds-toggle-button-group.js.map +1 -0
- package/dist/components/ds-toggle-button.d.ts +11 -0
- package/dist/components/ds-toggle-button.js +2 -0
- package/dist/components/ds-toggle-button.js.map +1 -0
- package/dist/components/ds-toggle.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-Cakvrs26.js → p-CGuwZUFk.js} +2 -2
- package/dist/components/p-CrfnBySX.js +2 -0
- package/dist/components/p-CrfnBySX.js.map +1 -0
- package/dist/components/p-DRuXu8Ql.js +2 -0
- package/dist/components/p-DRuXu8Ql.js.map +1 -0
- package/dist/components/{p-CIMd6yG3.js → p-DZN5IIgI.js} +2 -2
- package/dist/components/p-DdN6WnFs.js +2 -0
- package/dist/components/p-DdN6WnFs.js.map +1 -0
- package/dist/types/.stencil/ButtonGroup/ButtonGroup.d.ts +29 -0
- package/dist/types/.stencil/LabelWrap/LabelWrap.d.ts +15 -0
- package/dist/types/.stencil/PanelNav/PanelNav.d.ts +5 -3
- package/dist/types/.stencil/Select/Select.d.ts +39 -0
- package/dist/types/.stencil/TabGroup/TabGroup.d.ts +13 -2
- package/dist/types/.stencil/ToggleButton/ToggleButton.d.ts +37 -0
- package/dist/types/.stencil/ToggleButtonGroup/ToggleButtonGroup.d.ts +33 -0
- package/dist/types/components.d.ts +471 -0
- package/package.json +1 -1
- package/src/angular/index.ts +5 -0
- package/src/angular/proxies.ts +147 -4
- /package/dist/components/{p-Cakvrs26.js.map → p-CGuwZUFk.js.map} +0 -0
- /package/dist/components/{p-CIMd6yG3.js.map → p-DZN5IIgI.js.map} +0 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface DsButtonGroup extends Components.DsButtonGroup, HTMLElement {}
|
|
4
|
+
export const DsButtonGroup: {
|
|
5
|
+
prototype: DsButtonGroup;
|
|
6
|
+
new (): DsButtonGroup;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as t,H as o,c as r,h as s,a as i,t as d}from"./index.js";import{d as e}from"./p-DdN6WnFs.js";import{d as n}from"./p-CGuwZUFk.js";import{d as a}from"./p-BcuUR5Ao.js";const u=()=>`.group.sc-ds-button-group{display:inline-flex;align-items:stretch;border-radius:var(--dimension-radius-050);position:relative}.group.sc-ds-button-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}.groupElevated.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-sm)}.groupElevated.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-sm)}.groupFlat.sc-ds-button-group::after{box-shadow:inset 0 0 0 1px var(--color-border-tertiary)}.groupFloating.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-floating)}.groupFloating.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-floating)}.groupRounded.sc-ds-button-group{border-radius:var(--dimension-radius-half)}.item.sc-ds-button-group{flex-shrink:0;box-shadow:none !important;border:none !important}.item.sc-ds-button-group:active{transform:none !important}.divider.sc-ds-button-group{width:1px;flex-shrink:0;background-color:var(--color-border-tertiary);position:relative;z-index:1;margin:0 -0.5px;pointer-events:none}.dividerGhost.sc-ds-button-group{height:20px;align-self:center}.dividerGhostXS.sc-ds-button-group{height:12px}.dividerGhostSM.sc-ds-button-group{height:16px}.dividerGhostLG.sc-ds-button-group{height:24px}.item.sc-ds-button-group:hover+.dividerGhost.sc-ds-button-group,.dividerGhost.sc-ds-button-group:has(+.item:hover){opacity:0}.group.sc-ds-button-group .itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.first.sc-ds-button-group{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.last.sc-ds-button-group{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.middle.sc-ds-button-group{border-radius:0 !important}.groupRounded.sc-ds-button-group .first.itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-half) !important;border-bottom-left-radius:var(--dimension-radius-half) !important}.groupRounded.sc-ds-button-group .last.itemShort.sc-ds-button-group::after{border-top-right-radius:var(--dimension-radius-half) !important;border-bottom-right-radius:var(--dimension-radius-half) !important}.roundedFirstMD.sc-ds-button-group{padding-right:var(--dimension-space-100) !important}.roundedLastMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important}.roundedMidMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important;padding-right:var(--dimension-space-100) !important}.roundedFirstSM.sc-ds-button-group{padding-right:var(--dimension-space-075) !important}.roundedLastSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important}.roundedMidSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important;padding-right:var(--dimension-space-075) !important}.roundedFirstLG.sc-ds-button-group{padding-right:var(--dimension-space-150) !important}.roundedLastLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important}.roundedMidLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important;padding-right:var(--dimension-space-150) !important}`;const p=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=r(this,"dsClick");this.items=[];this.elevation="flat";this.size="md";this.rounded=false}render(){const t=this.items;const o=t.length;const r=this.elevation;const d=r.charAt(0).toUpperCase()+r.slice(1);const e=r==="none";const n={group:true,[`group${d}`]:true,groupRounded:this.rounded};return s(i,{key:"c6b74f44497bd0dcb51fbe14a89ecd641988ff74"},s("div",{key:"be1be0faa562c6aa404c222d4562d29e24e10e21",class:n,role:"group"},t.map(((t,i)=>{const d=i===0;const n=i===o-1;const a=!d&&!n;const u=t.variant??"secondary";const p=!!t.icon&&!t.label;const c=this.rounded&&!p&&this.size!=="xs";const g=this.size.toUpperCase();const m={item:true,first:d,last:n,middle:a,itemShort:e&&u==="secondary",[`roundedFirst${g}`]:!!(c&&d),[`roundedLast${g}`]:!!(c&&n),[`roundedMid${g}`]:!!(c&&a)};const b={divider:true,dividerGhost:e,dividerGhostXS:e&&this.size==="xs",dividerGhostSM:e&&this.size==="sm",dividerGhostLG:e&&this.size==="lg"};return[i>0&&s("div",{class:b,"aria-hidden":"true"}),s("ds-button",{class:m,variant:u,intent:t.intent??"none",elevation:r,size:this.size,label:t.label,rounded:this.rounded,inactive:t.inactive,href:t.href,onDsClick:()=>this.dsClick.emit(i)},t.icon&&s("ds-icon",{slot:"icon",name:t.icon}))]}))))}static get style(){return u()}},[2,"ds-button-group",{items:[16],elevation:[1],size:[1],rounded:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-button-group","ds-button","ds-icon","ds-loader"];t.forEach((t=>{switch(t){case"ds-button-group":if(!customElements.get(d(t))){customElements.define(d(t),p)}break;case"ds-button":if(!customElements.get(d(t))){e()}break;case"ds-icon":if(!customElements.get(d(t))){n()}break;case"ds-loader":if(!customElements.get(d(t))){a()}break}}))}c();const g=p;const m=c;export{g as DsButtonGroup,m as defineCustomElement};
|
|
2
|
+
//# sourceMappingURL=ds-button-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["buttonGroupCss","ButtonGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","elevation","size","rounded","render","count","length","elev","elevKey","charAt","toUpperCase","slice","isGhost","groupCls","group","groupRounded","h","Host","key","class","role","map","item","i","isFirst","isLast","isMid","variant","isIconOnly","icon","label","needsRoundedCorrection","sizeKey","itemCls","first","last","middle","itemShort","dividerCls","divider","dividerGhost","dividerGhostXS","dividerGhostSM","dividerGhostLG","intent","inactive","href","onDsClick","dsClick","emit","slot","name"],"sources":["src/wc/components/ButtonGroup/ButtonGroup.css?tag=ds-button-group&encapsulation=scoped","src/wc/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["/* ==========================================================================\n ButtonGroup — flush row of ds-button components.\n The group container carries the elevation; individual button chrome\n (shadow/border) is suppressed via .item.\n ========================================================================== */\n\n.group {\n display: inline-flex;\n align-items: stretch;\n border-radius: var(--dimension-radius-050);\n position: relative;\n}\n\n/* Inset ring / highlight overlay — sits above button children */\n.group::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n}\n\n/* ── Group-level elevation ──────────────────────────────────────────────── */\n\n.groupElevated { box-shadow: var(--effect-shadow-elevated-sm); }\n.groupElevated::after { box-shadow: var(--effect-highlight-elevated-sm); }\n\n.groupFlat::after { box-shadow: inset 0 0 0 1px var(--color-border-tertiary); }\n\n.groupFloating { box-shadow: var(--effect-shadow-elevated-floating); }\n.groupFloating::after { box-shadow: var(--effect-highlight-elevated-floating); }\n\n/* groupNone = ghost / primary — no shadow, no border */\n\n.groupRounded { border-radius: var(--dimension-radius-half); }\n\n/* ── Base item ─────────────────────────────────────────────────────────────── */\n\n.item {\n flex-shrink: 0;\n /* Suppress individual elevation so the group reads as one unit */\n box-shadow: none !important;\n border: none !important;\n}\n\n.item:active {\n transform: none !important;\n}\n\n/* ── Divider ──────────────────────────────────────────────────────────────── */\n\n.divider {\n width: 1px;\n flex-shrink: 0;\n background-color: var(--color-border-tertiary);\n position: relative;\n z-index: 1;\n margin: 0 -0.5px;\n pointer-events: none;\n}\n\n/* Ghost: short centred divider at icon height */\n.dividerGhost { height: 20px; align-self: center; }\n.dividerGhostXS { height: 12px; }\n.dividerGhostSM { height: 16px; }\n.dividerGhostLG { height: 24px; }\n\n/* Ghost hover-fade */\n.item:hover + .dividerGhost,\n.dividerGhost:has(+ .item:hover) { opacity: 0; }\n\n/* ── Ghost interaction states: rounded chips ──────────────────────────────── */\n\n.group .itemShort::after {\n border-top-left-radius: var(--dimension-radius-050) !important;\n border-top-right-radius: var(--dimension-radius-050) !important;\n border-bottom-right-radius: var(--dimension-radius-050) !important;\n border-bottom-left-radius: var(--dimension-radius-050) !important;\n}\n\n/* ── Border radius: flatten inner-facing corners ──────────────────────────── */\n\n.first {\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n}\n\n.last {\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n}\n\n.middle {\n border-radius: 0 !important;\n}\n\n/* Rounded group: first — left corners become pill */\n.groupRounded .first.itemShort::after {\n border-top-left-radius: var(--dimension-radius-half) !important;\n border-bottom-left-radius: var(--dimension-radius-half) !important;\n}\n\n/* Rounded group: last — right corners become pill */\n.groupRounded .last.itemShort::after {\n border-top-right-radius: var(--dimension-radius-half) !important;\n border-bottom-right-radius: var(--dimension-radius-half) !important;\n}\n\n/* ── Rounded: inner-edge padding correction ──────────────────────────────── */\n\n/* MD — base padding: space-100 */\n.roundedFirstMD { padding-right: var(--dimension-space-100) !important; }\n.roundedLastMD { padding-left: var(--dimension-space-100) !important; }\n.roundedMidMD { padding-left: var(--dimension-space-100) !important; padding-right: var(--dimension-space-100) !important; }\n\n/* SM — base padding: space-075 */\n.roundedFirstSM { padding-right: var(--dimension-space-075) !important; }\n.roundedLastSM { padding-left: var(--dimension-space-075) !important; }\n.roundedMidSM { padding-left: var(--dimension-space-075) !important; padding-right: var(--dimension-space-075) !important; }\n\n/* LG — base padding: space-150 */\n.roundedFirstLG { padding-right: var(--dimension-space-150) !important; }\n.roundedLastLG { padding-left: var(--dimension-space-150) !important; }\n.roundedMidLG { padding-left: var(--dimension-space-150) !important; padding-right: var(--dimension-space-150) !important; }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ButtonGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ButtonGroupSize = 'xs' | 'sm' | 'md' | 'lg';\n\nexport interface ButtonGroupItem {\n label?: string;\n /** Icon name for <ds-icon>. Set via JS property. */\n icon?: string;\n variant?: 'primary' | 'secondary';\n intent?: 'none' | 'neutral' | 'brand' | 'negative' | 'warning' | 'positive';\n inactive?: boolean;\n href?: string;\n}\n\n@Component({\n tag: 'ds-button-group',\n styleUrl: 'ButtonGroup.css',\n scoped: true,\n})\nexport class ButtonGroup {\n /**\n * Array of button descriptors. Set via JS property.\n * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];\n */\n @Prop() items: ButtonGroupItem[] = [];\n\n /** Chrome level for the group container. */\n @Prop() elevation: ButtonGroupElevation = 'flat';\n\n /** Size passed to each ds-button. */\n @Prop() size: ButtonGroupSize = 'md';\n\n /** Pill shape for group + buttons. */\n @Prop() rounded: boolean = false;\n\n /** Emits the index of the clicked item. */\n @Event() dsClick!: EventEmitter<number>;\n\n render() {\n const items = this.items;\n const count = items.length;\n const elev = this.elevation;\n const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);\n const isGhost = elev === 'none';\n\n const groupCls: Record<string, boolean> = {\n group: true,\n [`group${elevKey}`]: true,\n groupRounded: this.rounded,\n };\n\n return (\n <Host>\n <div class={groupCls} role=\"group\">\n {items.map((item, i) => {\n const isFirst = i === 0;\n const isLast = i === count - 1;\n const isMid = !isFirst && !isLast;\n const variant = item.variant ?? 'secondary';\n const isIconOnly = !!item.icon && !item.label;\n const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';\n const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'LG' | 'XS';\n\n const itemCls: Record<string, boolean> = {\n item: true,\n first: isFirst,\n last: isLast,\n middle: isMid,\n itemShort: isGhost && variant === 'secondary',\n [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),\n [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),\n [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),\n };\n\n const dividerCls: Record<string, boolean> = {\n divider: true,\n dividerGhost: isGhost,\n dividerGhostXS: isGhost && this.size === 'xs',\n dividerGhostSM: isGhost && this.size === 'sm',\n dividerGhostLG: isGhost && this.size === 'lg',\n };\n\n return [\n i > 0 && (\n <div class={dividerCls} aria-hidden=\"true\" />\n ),\n <ds-button\n class={itemCls}\n variant={variant}\n intent={item.intent ?? 'none'}\n elevation={elev}\n size={this.size}\n label={item.label}\n rounded={this.rounded}\n inactive={item.inactive}\n href={item.href}\n onDsClick={() => this.dsClick.emit(i)}\n >\n {item.icon && (\n <ds-icon slot=\"icon\" name={item.icon} />\n )}\n </ds-button>,\n ];\n })}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"8KAAA,MAAMA,EAAiB,IAAM,uuG,MCoBhBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,2EAUUC,KAAAC,MAA2B,GAG3BD,KAAAE,UAAkC,OAGlCF,KAAAG,KAAwB,KAGxBH,KAAAI,QAAmB,KA2E5B,CAtEC,MAAAC,GACE,MAAMJ,EAAQD,KAAKC,MACnB,MAAMK,EAAQL,EAAMM,OACpB,MAAMC,EAAOR,KAAKE,UAClB,MAAMO,EAAUD,EAAKE,OAAO,GAAGC,cAAgBH,EAAKI,MAAM,GAC1D,MAAMC,EAAUL,IAAS,OAEzB,MAAMM,EAAoC,CACxCC,MAAO,KACP,CAAC,QAAQN,KAAY,KACrBO,aAAchB,KAAKI,SAGrB,OACEa,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAON,EAAUO,KAAK,SACxBpB,EAAMqB,KAAI,CAACC,EAAMC,KAChB,MAAMC,EAAUD,IAAM,EACtB,MAAME,EAASF,IAAMlB,EAAQ,EAC7B,MAAMqB,GAASF,IAAYC,EAC3B,MAAME,EAAUL,EAAKK,SAAW,YAChC,MAAMC,IAAeN,EAAKO,OAASP,EAAKQ,MACxC,MAAMC,EAAyBhC,KAAKI,UAAYyB,GAAc7B,KAAKG,OAAS,KAC5E,MAAM8B,EAAUjC,KAAKG,KAAKQ,cAE1B,MAAMuB,EAAmC,CACvCX,KAAM,KACNY,MAAOV,EACPW,KAAMV,EACNW,OAAQV,EACRW,UAAWzB,GAAWe,IAAY,YAClC,CAAC,eAAeK,QAAeD,GAA0BP,GACzD,CAAC,cAAcQ,QAAeD,GAA0BN,GACxD,CAAC,aAAaO,QAAeD,GAA0BL,IAGzD,MAAMY,EAAsC,CAC1CC,QAAS,KACTC,aAAc5B,EACd6B,eAAgB7B,GAAWb,KAAKG,OAAS,KACzCwC,eAAgB9B,GAAWb,KAAKG,OAAS,KACzCyC,eAAgB/B,GAAWb,KAAKG,OAAS,MAG3C,MAAO,CACLqB,EAAI,GACFP,EAAA,OAAKG,MAAOmB,EAAU,cAAc,SAEtCtB,EAAA,aACEG,MAAOc,EACPN,QAASA,EACTiB,OAAQtB,EAAKsB,QAAU,OACvB3C,UAAWM,EACXL,KAAMH,KAAKG,KACX4B,MAAOR,EAAKQ,MACZ3B,QAASJ,KAAKI,QACd0C,SAAUvB,EAAKuB,SACfC,KAAMxB,EAAKwB,KACXC,UAAW,IAAMhD,KAAKiD,QAAQC,KAAK1B,IAElCD,EAAKO,MACJb,EAAA,WAASkC,KAAK,OAAOC,KAAM7B,EAAKO,QAGrC,K","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as o,H as r,c as n,h as t,a,t as e}from"./index.js";import{d as i}from"./p-BcuUR5Ao.js";const s=()=>`.btn-host.sc-ds-button{display:inline-block}.btn-host--full.sc-ds-button{display:block;width:100%}.btn.sc-ds-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--dimension-radius-050);cursor:pointer;position:relative;transition:transform var(--effect-motion-short-2);height:var(--dimension-size-400);font-family:inherit;color:var(--color-foreground-primary);background:transparent;box-sizing:border-box;text-decoration:none;user-select:none;outline:none;width:100%;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_border:var(--color-border-tertiary)}.btn.sc-ds-button:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.btn.sc-ds-button:hover:not(.inactive){background-color:var(--_hover-bg)}.btn.sc-ds-button:active:not(.inactive){background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.onMedium.sc-ds-button{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_border:var(--color-border-on-medium-background-tertiary)}.onBold.sc-ds-button{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_border:var(--color-border-on-bold-background-tertiary)}.onStrong.sc-ds-button{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_border:var(--color-border-on-strong-background-tertiary)}.onAlwaysDark.sc-ds-button{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_border:var(--color-always-dark-border-tertiary)}.primary.sc-ds-button{color:var(--color-foreground-on-bold-background-primary)}.primary.intentNone.sc-ds-button{background-color:var(--color-inverted-background);color:var(--color-inverted-foreground-primary);--_hover-bg:color-mix(in oklch, var(--color-inverted-background) 90%, var(--color-inverted-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-inverted-background) 85%, var(--color-inverted-foreground-primary));--_border:var(--color-inverted-border-tertiary)}.primary.sc-ds-button:not(.intentNone){background-color:var(--_bg);--_hover-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-on-bold-background-primary))}.primary.intentBrand.sc-ds-button{--_bg:var(--color-background-bold-brand);color:var(--color-foreground-faint-brand)}.primary.intentNeutral.sc-ds-button{--_bg:var(--color-background-bold-neutral);color:var(--color-foreground-faint-neutral)}.primary.intentPositive.sc-ds-button{--_bg:var(--color-background-bold-positive);color:var(--color-foreground-faint-positive)}.primary.intentNegative.sc-ds-button{--_bg:var(--color-background-bold-negative);color:var(--color-foreground-faint-negative)}.primary.intentWarning.sc-ds-button{--_bg:var(--color-background-bold-warning);color:var(--color-foreground-faint-warning)}.primary.intentCaution.sc-ds-button{--_bg:var(--color-background-bold-caution);color:var(--color-foreground-faint-caution)}.primary.intentAi.sc-ds-button{--_bg:var(--color-background-bold-ai);color:var(--color-foreground-faint-ai)}.primary.contrastMedium.sc-ds-button{--_hover-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-primary))}.primary.contrastMedium.intentBrand.sc-ds-button{--_bg:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.primary.contrastMedium.intentNeutral.sc-ds-button{--_bg:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.primary.contrastMedium.intentPositive.sc-ds-button{--_bg:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.primary.contrastMedium.intentNegative.sc-ds-button{--_bg:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.primary.contrastMedium.intentWarning.sc-ds-button{--_bg:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.primary.contrastMedium.intentCaution.sc-ds-button{--_bg:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.primary.contrastMedium.intentAi.sc-ds-button{--_bg:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.primary.contrastStrong.sc-ds-button{--_hover-bg:color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-on-bold-background-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary))}.primary.contrastStrong.intentBrand.sc-ds-button{--_bg:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.primary.contrastStrong.intentNeutral.sc-ds-button{--_bg:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.primary.contrastStrong.intentPositive.sc-ds-button{--_bg:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.primary.contrastStrong.intentNegative.sc-ds-button{--_bg:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.primary.contrastStrong.intentWarning.sc-ds-button{--_bg:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.primary.contrastStrong.intentCaution.sc-ds-button{--_bg:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.primary.contrastStrong.intentAi.sc-ds-button{--_bg:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.primary.contrastFaint.sc-ds-button{--_hover-bg:color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary))}.primary.contrastFaint.intentBrand.sc-ds-button{--_bg:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.primary.contrastFaint.intentNeutral.sc-ds-button{--_bg:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.primary.contrastFaint.intentPositive.sc-ds-button{--_bg:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.primary.contrastFaint.intentNegative.sc-ds-button{--_bg:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.primary.contrastFaint.intentWarning.sc-ds-button{--_bg:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.primary.contrastFaint.intentCaution.sc-ds-button{--_bg:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.primary.contrastFaint.intentAi.sc-ds-button{--_bg:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.primary.intentNone.onStrong.sc-ds-button,.primary.intentNone.onAlwaysDark.sc-ds-button{background-color:var(--color-background-primary);color:var(--color-foreground-primary);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));--_border:var(--color-border-tertiary)}.secondary.sc-ds-button{background-color:transparent;color:var(--color-foreground-secondary)}.secondary.intentBrand.sc-ds-button{color:var(--color-foreground-bold-brand)}.secondary.intentNeutral.sc-ds-button{color:var(--color-foreground-bold-neutral)}.secondary.intentPositive.sc-ds-button{color:var(--color-foreground-bold-positive)}.secondary.intentNegative.sc-ds-button{color:var(--color-foreground-bold-negative)}.secondary.intentWarning.sc-ds-button{color:var(--color-foreground-bold-warning)}.secondary.intentCaution.sc-ds-button{color:var(--color-foreground-bold-caution)}.secondary.intentAi.sc-ds-button{color:var(--color-foreground-bold-ai)}.secondary.onMedium.sc-ds-button{color:var(--color-foreground-primary)}.secondary.onMedium.intentBrand.sc-ds-button{color:var(--color-foreground-strong-brand)}.secondary.onMedium.intentNeutral.sc-ds-button{color:var(--color-foreground-strong-neutral)}.secondary.onMedium.intentPositive.sc-ds-button{color:var(--color-foreground-strong-positive)}.secondary.onMedium.intentNegative.sc-ds-button{color:var(--color-foreground-strong-negative)}.secondary.onMedium.intentWarning.sc-ds-button{color:var(--color-foreground-strong-warning)}.secondary.onMedium.intentCaution.sc-ds-button{color:var(--color-foreground-strong-caution)}.secondary.onMedium.intentAi.sc-ds-button{color:var(--color-foreground-strong-ai)}.secondary.onBold.sc-ds-button{color:var(--color-foreground-on-bold-background-secondary)}.secondary.onBold.intentBrand.sc-ds-button{color:var(--color-foreground-faint-brand)}.secondary.onBold.intentNeutral.sc-ds-button{color:var(--color-foreground-faint-neutral)}.secondary.onBold.intentPositive.sc-ds-button{color:var(--color-foreground-faint-positive)}.secondary.onBold.intentNegative.sc-ds-button{color:var(--color-foreground-faint-negative)}.secondary.onBold.intentWarning.sc-ds-button{color:var(--color-foreground-faint-warning)}.secondary.onBold.intentCaution.sc-ds-button{color:var(--color-foreground-faint-caution)}.secondary.onBold.intentAi.sc-ds-button{color:var(--color-foreground-faint-ai)}.secondary.onAlwaysDark.sc-ds-button{color:var(--color-always-dark-foreground-secondary)}.secondary.onAlwaysDark.intentBrand.sc-ds-button{color:var(--color-always-dark-foreground-brand)}.secondary.onAlwaysDark.intentNeutral.sc-ds-button{color:var(--color-always-dark-foreground-neutral)}.secondary.onAlwaysDark.intentPositive.sc-ds-button{color:var(--color-always-dark-foreground-positive)}.secondary.onAlwaysDark.intentNegative.sc-ds-button{color:var(--color-always-dark-foreground-negative)}.secondary.onAlwaysDark.intentWarning.sc-ds-button{color:var(--color-always-dark-foreground-warning)}.secondary.onAlwaysDark.intentCaution.sc-ds-button{color:var(--color-always-dark-foreground-caution)}.secondary.onAlwaysDark.intentAi.sc-ds-button{color:var(--color-always-dark-foreground-ai)}.secondary.onStrong.sc-ds-button{color:var(--color-foreground-on-bold-background-secondary)}.secondary.onStrong.intentBrand.sc-ds-button{color:var(--color-foreground-faint-brand)}.secondary.onStrong.intentNeutral.sc-ds-button{color:var(--color-foreground-faint-neutral)}.secondary.onStrong.intentPositive.sc-ds-button{color:var(--color-foreground-faint-positive)}.secondary.onStrong.intentNegative.sc-ds-button{color:var(--color-foreground-faint-negative)}.secondary.onStrong.intentWarning.sc-ds-button{color:var(--color-foreground-faint-warning)}.secondary.onStrong.intentCaution.sc-ds-button{color:var(--color-foreground-faint-caution)}.secondary.onStrong.intentAi.sc-ds-button{color:var(--color-foreground-faint-ai)}.secondary.elevationFlat.sc-ds-button{box-shadow:inset 0 0 0 1px var(--_border)}.secondary.elevationElevated.sc-ds-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.secondary.elevationFloating.sc-ds-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-floating);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.primary.elevationElevated.sc-ds-button{box-shadow:var(--effect-elevation-elevated-sm)}.primary.elevationNone.sc-ds-button{box-shadow:none}.primary.elevationFlat.sc-ds-button{box-shadow:inset 0 0 0 1px var(--_border)}.primary.intentNone.elevationFlat.sc-ds-button{--_border:var(--color-border-tertiary)}.primary.elevationFloating.sc-ds-button{box-shadow:var(--effect-elevation-elevated-floating) !important}.iconOnly.sc-ds-button{padding:0;width:var(--dimension-size-400);min-width:var(--dimension-size-400)}.labelOnly.sc-ds-button{padding:0 var(--dimension-space-100)}.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-100) 0 var(--dimension-space-075);gap:var(--dimension-space-025)}.dropdown.sc-ds-button{gap:var(--dimension-space-050)}.sizeSM.sc-ds-button{height:var(--dimension-size-300)}.sizeSM.iconOnly.sc-ds-button{width:var(--dimension-size-300);min-width:var(--dimension-size-300)}.sizeSM.labelOnly.sc-ds-button{padding:0 var(--dimension-space-075)}.sizeSM.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-075) 0 var(--dimension-space-050);gap:1px}.sizeXS.sc-ds-button{height:var(--dimension-size-200)}.sizeXS.iconOnly.sc-ds-button{width:var(--dimension-size-200);min-width:var(--dimension-size-200)}.sizeXS.labelOnly.sc-ds-button,.sizeXS.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-025);gap:0}.sizeLG.sc-ds-button{height:var(--dimension-size-500)}.sizeLG.iconOnly.sc-ds-button{width:var(--dimension-size-500);min-width:var(--dimension-size-500)}.sizeLG.labelOnly.sc-ds-button{padding:0 var(--dimension-space-150)}.sizeLG.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-150) 0 var(--dimension-space-100);gap:var(--dimension-space-075)}.rounded.sc-ds-button{border-radius:var(--dimension-radius-half)}.rounded.labelOnly.sc-ds-button{padding-left:calc(var(--dimension-space-100) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.iconAndLabel.sc-ds-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.sizeSM.labelOnly.sc-ds-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.sizeSM.iconAndLabel.sc-ds-button{padding-left:calc(var(--dimension-space-050) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.sizeLG.labelOnly.sc-ds-button{padding-left:calc(var(--dimension-space-150) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-150) + var(--dimension-space-050))}.rounded.sizeLG.iconAndLabel.sc-ds-button{padding-left:calc(var(--dimension-space-100) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-150) + var(--dimension-space-050))}.inactive.sc-ds-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.fullWidth.sc-ds-button{display:flex;width:100%}.btn__icon.sc-ds-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.btn__label.sc-ds-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn__chevron.sc-ds-button{flex-shrink:0}.btn__badge.sc-ds-button{position:absolute;top:var(--dimension-space-025);right:var(--dimension-space-025);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-semibold);line-height:var(--typography-lineheight-xs);color:var(--color-foreground-secondary);pointer-events:none;z-index:10}`;const d={xs:12,sm:16,md:20,lg:24};const c={xs:"text-caption-emphasis",sm:"text-body-small-emphasis",md:"text-body-medium-emphasis",lg:"text-body-large-emphasis"};const l=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.dsMouseEnter=n(this,"dsMouseEnter");this.dsMouseLeave=n(this,"dsMouseLeave");this.variant="primary";this.intent="brand";this.size="md";this.rounded=false;this.fullWidth=false;this.contrast="bold";this.dropdown=false;this.loading=false;this.inactive=false;this.type="button";this.hasIcon=false;this.handleClick=o=>{if(this.inactive||this.loading)return;this.dsClick.emit(o)}}componentWillLoad(){this.hasIcon=!!this.el.querySelector('[slot="icon"]')}get effectiveElevation(){return this.elevation??(this.variant==="primary"?"none":"flat")}render(){const o=this.href?"a":"button";const r=this.size;const n=d[r];const e=c[r];const i=this.effectiveElevation;const s=!!this.label;const l=this.hasIcon||this.loading;const b=l&&!s;const g=s&&!l;const v=l&&s;const m=this.background;const p={btn:true,[this.variant]:true,[`intent${u(this.intent)}`]:true,[`size${r.toUpperCase()}`]:r!=="md",rounded:this.rounded,inactive:this.inactive||this.loading,iconOnly:b,labelOnly:g,iconAndLabel:v,dropdown:this.dropdown,[`contrast${u(this.contrast)}`]:this.variant==="primary"&&this.intent!=="none"&&this.contrast!=="bold",[`elevation${u(i)}`]:true,onMedium:m==="medium",onBold:m==="bold",onStrong:m==="strong",onAlwaysDark:m==="always-dark",fullWidth:this.fullWidth};const f={};if(o==="button"){f.type=this.type;f.disabled=this.inactive||this.loading}if(this.href)f.href=this.href;if(this.target)f.target=this.target;return t(a,{key:"53bffbeb6ad785dd542e220a0479abce151b53bf",class:{"btn-host":true,"btn-host--full":this.fullWidth}},t(o,{key:"bc22e851706ab643a4ba3d19c0b9300cce1bb863",class:p,style:this.width?{width:this.width}:undefined,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-disabled":this.inactive||this.loading||undefined,"aria-busy":this.loading||undefined,onClick:this.handleClick,onMouseEnter:o=>!this.inactive&&!this.loading&&this.dsMouseEnter.emit(o),onMouseLeave:o=>!this.inactive&&!this.loading&&this.dsMouseLeave.emit(o),...f},t("span",{key:"38a68e4945a8e7517f67bbc3677d4d85878f767d",class:"btn__icon",style:{fontSize:`${n}px`,display:l?undefined:"none"}},this.loading?t("ds-loader",{size:n}):t("slot",{name:"icon"})),s&&t("span",{key:"9fdb9b30dbc61863f05960301f3c867a25634203",class:`btn__label ${e}`},this.label),this.dropdown&&t("svg",{key:"2687d9a0465f28cfc1f8927a2431ae1fd5acc540",class:"btn__chevron",width:n,height:n,viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},t("path",{key:"03253b27426d2805522167c9f32be8345b80eb1c",d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),this.badgeCount!=null&&this.badgeCount>0&&t("span",{key:"57824101f159d9b75bfefd999d1e3c9234072372",class:"btn__badge"},this.badgeCount>9?"+":this.badgeCount)))}get el(){return this}static get style(){return s()}},[262,"ds-button",{variant:[1],intent:[1],size:[1],label:[1],rounded:[4],fullWidth:[4,"full-width"],width:[1],contrast:[1],background:[1],dropdown:[4],badgeCount:[2,"badge-count"],elevation:[1],loading:[4],inactive:[4],href:[1],target:[1],type:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],hasIcon:[32]}]);function u(o){return o.charAt(0).toUpperCase()+o.slice(1)}function b(){if(typeof customElements==="undefined"){return}const o=["ds-button","ds-loader"];o.forEach((o=>{switch(o){case"ds-button":if(!customElements.get(e(o))){customElements.define(e(o),l)}break;case"ds-loader":if(!customElements.get(e(o))){i()}break}}))}b();const g=l;const v=b;export{g as DsButton,v as defineCustomElement};
|
|
1
|
+
import{B as s,d as o}from"./p-DdN6WnFs.js";const t=s;const n=o;export{t as DsButton,n as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["buttonCss","ICON_SIZE","xs","sm","md","lg","TEXT_CLASS","Button","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","intent","size","rounded","fullWidth","contrast","dropdown","loading","inactive","type","hasIcon","handleClick","e","dsClick","emit","componentWillLoad","el","querySelector","effectiveElevation","elevation","render","Tag","href","iconSize","textClass","elev","hasLabel","label","showLeading","isIconOnly","isLabelOnly","isIconAndLabel","bg","background","btnCls","btn","cap","toUpperCase","iconOnly","labelOnly","iconAndLabel","onMedium","onBold","onStrong","onAlwaysDark","extraProps","disabled","target","h","Host","key","class","style","width","undefined","ariaLabel","ariaLabelledby","onClick","onMouseEnter","dsMouseEnter","onMouseLeave","dsMouseLeave","fontSize","display","name","height","viewBox","fill","d","stroke","badgeCount","s","charAt","slice"],"sources":["src/wc/components/Button/Button.css?tag=ds-button&encapsulation=scoped","src/wc/components/Button/Button.tsx"],"sourcesContent":["/* ── Host wrapper ─────────────────────────────────────────────────────────── */\n\n.btn-host {\n display: inline-block;\n}\n\n.btn-host--full {\n display: block;\n width: 100%;\n}\n\n/* ── Base button ──────────────────────────────────────────────────────────── */\n\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--dimension-radius-050);\n cursor: pointer;\n position: relative;\n transition: transform var(--effect-motion-short-2);\n height: var(--dimension-size-400);\n font-family: inherit;\n color: var(--color-foreground-primary);\n background: transparent;\n box-sizing: border-box;\n text-decoration: none;\n user-select: none;\n outline: none;\n width: 100%;\n\n --_hover-bg: var(--color-interaction-hover);\n --_pressed-bg: var(--color-interaction-pressed);\n --_border: var(--color-border-tertiary);\n}\n\n.btn:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n.btn:hover:not(.inactive) {\n background-color: var(--_hover-bg);\n}\n\n.btn:active:not(.inactive) {\n background-color: var(--_pressed-bg);\n transform: scale(var(--dimension-scale-subtle));\n}\n\n/* ── Background context ───────────────────────────────────────────────────── */\n\n.onMedium {\n --_hover-bg: var(--color-interaction-on-medium-background-hover);\n --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n --_border: var(--color-border-on-medium-background-tertiary);\n}\n\n.onBold {\n --_hover-bg: var(--color-interaction-on-bold-background-hover);\n --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n --_border: var(--color-border-on-bold-background-tertiary);\n}\n\n.onStrong {\n --_hover-bg: var(--color-interaction-on-strong-background-hover);\n --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n --_border: var(--color-border-on-strong-background-tertiary);\n}\n\n.onAlwaysDark {\n --_hover-bg: var(--color-always-dark-interaction-hover);\n --_pressed-bg: var(--color-always-dark-interaction-pressed);\n --_border: var(--color-always-dark-border-tertiary);\n}\n\n/* ── Primary variant ──────────────────────────────────────────────────────── */\n\n.primary {\n color: var(--color-foreground-on-bold-background-primary);\n}\n\n.primary.intentNone {\n background-color: var(--color-inverted-background);\n color: var(--color-inverted-foreground-primary);\n --_hover-bg: color-mix(in oklch, var(--color-inverted-background) 90%, var(--color-inverted-foreground-primary));\n --_pressed-bg: color-mix(in oklch, var(--color-inverted-background) 85%, var(--color-inverted-foreground-primary));\n --_border: var(--color-inverted-border-tertiary);\n}\n\n.primary:not(.intentNone) {\n background-color: var(--_bg);\n --_hover-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));\n --_pressed-bg: color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-on-bold-background-primary));\n}\n\n/* Bold contrast (default) */\n.primary.intentBrand { --_bg: var(--color-background-bold-brand); color: var(--color-foreground-faint-brand); }\n.primary.intentNeutral { --_bg: var(--color-background-bold-neutral); color: var(--color-foreground-faint-neutral); }\n.primary.intentPositive { --_bg: var(--color-background-bold-positive); color: var(--color-foreground-faint-positive); }\n.primary.intentNegative { --_bg: var(--color-background-bold-negative); color: var(--color-foreground-faint-negative); }\n.primary.intentWarning { --_bg: var(--color-background-bold-warning); color: var(--color-foreground-faint-warning); }\n.primary.intentCaution { --_bg: var(--color-background-bold-caution); color: var(--color-foreground-faint-caution); }\n.primary.intentAi { --_bg: var(--color-background-bold-ai); color: var(--color-foreground-faint-ai); }\n\n/* Medium contrast */\n.primary.contrastMedium {\n --_hover-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));\n --_pressed-bg: color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-primary));\n}\n.primary.contrastMedium.intentBrand { --_bg: var(--color-background-medium-brand); color: var(--color-foreground-strong-brand); }\n.primary.contrastMedium.intentNeutral { --_bg: var(--color-background-medium-neutral); color: var(--color-foreground-strong-neutral); }\n.primary.contrastMedium.intentPositive { --_bg: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n.primary.contrastMedium.intentNegative { --_bg: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n.primary.contrastMedium.intentWarning { --_bg: var(--color-background-medium-warning); color: var(--color-foreground-strong-warning); }\n.primary.contrastMedium.intentCaution { --_bg: var(--color-background-medium-caution); color: var(--color-foreground-strong-caution); }\n.primary.contrastMedium.intentAi { --_bg: var(--color-background-medium-ai); color: var(--color-foreground-strong-ai); }\n\n/* Strong contrast */\n.primary.contrastStrong {\n --_hover-bg: color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-on-bold-background-primary));\n --_pressed-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));\n}\n.primary.contrastStrong.intentBrand { --_bg: var(--color-background-strong-brand); color: var(--color-foreground-medium-brand); }\n.primary.contrastStrong.intentNeutral { --_bg: var(--color-background-strong-neutral); color: var(--color-foreground-medium-neutral); }\n.primary.contrastStrong.intentPositive { --_bg: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n.primary.contrastStrong.intentNegative { --_bg: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n.primary.contrastStrong.intentWarning { --_bg: var(--color-background-strong-warning); color: var(--color-foreground-medium-warning); }\n.primary.contrastStrong.intentCaution { --_bg: var(--color-background-strong-caution); color: var(--color-foreground-medium-caution); }\n.primary.contrastStrong.intentAi { --_bg: var(--color-background-strong-ai); color: var(--color-foreground-medium-ai); }\n\n/* Faint contrast */\n.primary.contrastFaint {\n --_hover-bg: color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-primary));\n --_pressed-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));\n}\n.primary.contrastFaint.intentBrand { --_bg: var(--color-background-faint-brand); color: var(--color-foreground-bold-brand); }\n.primary.contrastFaint.intentNeutral { --_bg: var(--color-background-faint-neutral); color: var(--color-foreground-bold-neutral); }\n.primary.contrastFaint.intentPositive { --_bg: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n.primary.contrastFaint.intentNegative { --_bg: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n.primary.contrastFaint.intentWarning { --_bg: var(--color-background-faint-warning); color: var(--color-foreground-bold-warning); }\n.primary.contrastFaint.intentCaution { --_bg: var(--color-background-faint-caution); color: var(--color-foreground-bold-caution); }\n.primary.contrastFaint.intentAi { --_bg: var(--color-background-faint-ai); color: var(--color-foreground-bold-ai); }\n\n/* intentNone on strong/always-dark */\n.primary.intentNone.onStrong,\n.primary.intentNone.onAlwaysDark {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n --_border: var(--color-border-tertiary);\n}\n\n/* ── Secondary variant ────────────────────────────────────────────────────── */\n\n.secondary {\n background-color: transparent;\n color: var(--color-foreground-secondary);\n}\n\n.secondary.intentBrand { color: var(--color-foreground-bold-brand); }\n.secondary.intentNeutral { color: var(--color-foreground-bold-neutral); }\n.secondary.intentPositive { color: var(--color-foreground-bold-positive); }\n.secondary.intentNegative { color: var(--color-foreground-bold-negative); }\n.secondary.intentWarning { color: var(--color-foreground-bold-warning); }\n.secondary.intentCaution { color: var(--color-foreground-bold-caution); }\n.secondary.intentAi { color: var(--color-foreground-bold-ai); }\n\n.secondary.onMedium { color: var(--color-foreground-primary); }\n.secondary.onMedium.intentBrand { color: var(--color-foreground-strong-brand); }\n.secondary.onMedium.intentNeutral { color: var(--color-foreground-strong-neutral); }\n.secondary.onMedium.intentPositive { color: var(--color-foreground-strong-positive); }\n.secondary.onMedium.intentNegative { color: var(--color-foreground-strong-negative); }\n.secondary.onMedium.intentWarning { color: var(--color-foreground-strong-warning); }\n.secondary.onMedium.intentCaution { color: var(--color-foreground-strong-caution); }\n.secondary.onMedium.intentAi { color: var(--color-foreground-strong-ai); }\n\n.secondary.onBold { color: var(--color-foreground-on-bold-background-secondary); }\n.secondary.onBold.intentBrand { color: var(--color-foreground-faint-brand); }\n.secondary.onBold.intentNeutral { color: var(--color-foreground-faint-neutral); }\n.secondary.onBold.intentPositive { color: var(--color-foreground-faint-positive); }\n.secondary.onBold.intentNegative { color: var(--color-foreground-faint-negative); }\n.secondary.onBold.intentWarning { color: var(--color-foreground-faint-warning); }\n.secondary.onBold.intentCaution { color: var(--color-foreground-faint-caution); }\n.secondary.onBold.intentAi { color: var(--color-foreground-faint-ai); }\n\n.secondary.onAlwaysDark { color: var(--color-always-dark-foreground-secondary); }\n.secondary.onAlwaysDark.intentBrand { color: var(--color-always-dark-foreground-brand); }\n.secondary.onAlwaysDark.intentNeutral { color: var(--color-always-dark-foreground-neutral); }\n.secondary.onAlwaysDark.intentPositive { color: var(--color-always-dark-foreground-positive); }\n.secondary.onAlwaysDark.intentNegative { color: var(--color-always-dark-foreground-negative); }\n.secondary.onAlwaysDark.intentWarning { color: var(--color-always-dark-foreground-warning); }\n.secondary.onAlwaysDark.intentCaution { color: var(--color-always-dark-foreground-caution); }\n.secondary.onAlwaysDark.intentAi { color: var(--color-always-dark-foreground-ai); }\n\n.secondary.onStrong { color: var(--color-foreground-on-bold-background-secondary); }\n.secondary.onStrong.intentBrand { color: var(--color-foreground-faint-brand); }\n.secondary.onStrong.intentNeutral { color: var(--color-foreground-faint-neutral); }\n.secondary.onStrong.intentPositive { color: var(--color-foreground-faint-positive); }\n.secondary.onStrong.intentNegative { color: var(--color-foreground-faint-negative); }\n.secondary.onStrong.intentWarning { color: var(--color-foreground-faint-warning); }\n.secondary.onStrong.intentCaution { color: var(--color-foreground-faint-caution); }\n.secondary.onStrong.intentAi { color: var(--color-foreground-faint-ai); }\n\n/* ── Elevation ────────────────────────────────────────────────────────────── */\n\n.secondary.elevationFlat {\n box-shadow: inset 0 0 0 1px var(--_border);\n}\n\n.secondary.elevationElevated {\n background-color: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-sm);\n --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n.secondary.elevationFloating {\n background-color: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-floating);\n --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n.primary.elevationElevated { box-shadow: var(--effect-elevation-elevated-sm); }\n.primary.elevationNone { box-shadow: none; }\n.primary.elevationFlat { box-shadow: inset 0 0 0 1px var(--_border); }\n.primary.intentNone.elevationFlat { --_border: var(--color-border-tertiary); }\n.primary.elevationFloating { box-shadow: var(--effect-elevation-elevated-floating) !important; }\n\n/* ── Layout modes ─────────────────────────────────────────────────────────── */\n\n.iconOnly { padding: 0; width: var(--dimension-size-400); min-width: var(--dimension-size-400); }\n.labelOnly { padding: 0 var(--dimension-space-100); }\n.iconAndLabel { padding: 0 var(--dimension-space-100) 0 var(--dimension-space-075); gap: var(--dimension-space-025); }\n.dropdown { gap: var(--dimension-space-050); }\n\n/* ── Sizes ────────────────────────────────────────────────────────────────── */\n\n.sizeSM { height: var(--dimension-size-300); }\n.sizeSM.iconOnly { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }\n.sizeSM.labelOnly { padding: 0 var(--dimension-space-075); }\n.sizeSM.iconAndLabel { padding: 0 var(--dimension-space-075) 0 var(--dimension-space-050); gap: 1px; }\n\n.sizeXS { height: var(--dimension-size-200); }\n.sizeXS.iconOnly { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }\n.sizeXS.labelOnly, .sizeXS.iconAndLabel { padding: 0 var(--dimension-space-025); gap: 0; }\n\n.sizeLG { height: var(--dimension-size-500); }\n.sizeLG.iconOnly { width: var(--dimension-size-500); min-width: var(--dimension-size-500); }\n.sizeLG.labelOnly { padding: 0 var(--dimension-space-150); }\n.sizeLG.iconAndLabel { padding: 0 var(--dimension-space-150) 0 var(--dimension-space-100); gap: var(--dimension-space-075); }\n\n/* ── Rounded ──────────────────────────────────────────────────────────────── */\n\n.rounded { border-radius: var(--dimension-radius-half); }\n.rounded.labelOnly { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }\n.rounded.iconAndLabel { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }\n.rounded.sizeSM.labelOnly { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }\n.rounded.sizeSM.iconAndLabel { padding-left: calc(var(--dimension-space-050) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }\n.rounded.sizeLG.labelOnly { padding-left: calc(var(--dimension-space-150) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-150) + var(--dimension-space-050)); }\n.rounded.sizeLG.iconAndLabel { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-150) + var(--dimension-space-050)); }\n\n/* ── Disabled ─────────────────────────────────────────────────────────────── */\n\n.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* ── Full width ───────────────────────────────────────────────────────────── */\n\n.fullWidth { display: flex; width: 100%; }\n\n/* ── Inner slots ──────────────────────────────────────────────────────────── */\n\n.btn__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n}\n\n.btn__label {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.btn__chevron {\n flex-shrink: 0;\n}\n\n.btn__badge {\n position: absolute;\n top: var(--dimension-space-025);\n right: var(--dimension-space-025);\n font-size: var(--typography-fontsize-xs);\n font-weight: var(--typography-weight-semibold);\n line-height: var(--typography-lineheight-xs);\n color: var(--color-foreground-secondary);\n pointer-events: none;\n z-index: 10;\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, h, Host } from '@stencil/core';\n\nexport type ButtonVariant = 'primary' | 'secondary';\nexport type ButtonElevation = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ButtonIntent = 'none' | 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonContrast = 'strong' | 'bold' | 'medium' | 'faint';\nexport type ButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nconst ICON_SIZE: Record<ButtonSize, number> = { xs: 12, sm: 16, md: 20, lg: 24 };\nconst TEXT_CLASS: Record<ButtonSize, string> = {\n xs: 'text-caption-emphasis',\n sm: 'text-body-small-emphasis',\n md: 'text-body-medium-emphasis',\n lg: 'text-body-large-emphasis',\n};\n\n@Component({\n tag: 'ds-button',\n styleUrl: 'Button.css',\n scoped: true,\n})\nexport class Button {\n @Element() el!: HTMLElement;\n\n @Prop() variant: ButtonVariant = 'primary';\n @Prop() intent: ButtonIntent = 'brand';\n @Prop() size: ButtonSize = 'md';\n @Prop() label: string | undefined;\n @Prop() rounded: boolean = false;\n @Prop() fullWidth: boolean = false;\n @Prop() width: string | undefined;\n @Prop() contrast: ButtonContrast = 'bold';\n @Prop() background: ButtonBackground | undefined;\n @Prop() dropdown: boolean = false;\n @Prop() badgeCount: number | undefined;\n @Prop() elevation: ButtonElevation | undefined;\n @Prop() loading: boolean = false;\n @Prop() inactive: boolean = false;\n @Prop() href: string | undefined;\n @Prop() target: string | undefined;\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n @State() private hasIcon: boolean = false;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n @Event() dsMouseEnter!: EventEmitter<MouseEvent>;\n @Event() dsMouseLeave!: EventEmitter<MouseEvent>;\n\n componentWillLoad() {\n this.hasIcon = !!this.el.querySelector('[slot=\"icon\"]');\n }\n\n private handleClick = (e: MouseEvent) => {\n if (this.inactive || this.loading) return;\n this.dsClick.emit(e);\n };\n\n private get effectiveElevation(): ButtonElevation {\n return this.elevation ?? (this.variant === 'primary' ? 'none' : 'flat');\n }\n\n render() {\n const Tag = this.href ? 'a' : 'button';\n const size = this.size;\n const iconSize = ICON_SIZE[size];\n const textClass = TEXT_CLASS[size];\n const elev = this.effectiveElevation;\n const hasLabel = !!this.label;\n const showLeading = this.hasIcon || this.loading;\n const isIconOnly = showLeading && !hasLabel;\n const isLabelOnly = hasLabel && !showLeading;\n const isIconAndLabel = showLeading && hasLabel;\n const bg = this.background;\n\n const btnCls: Record<string, boolean> = {\n btn: true,\n [this.variant]: true,\n [`intent${cap(this.intent)}`]: true,\n [`size${size.toUpperCase()}`]: size !== 'md',\n rounded: this.rounded,\n inactive: this.inactive || this.loading,\n iconOnly: isIconOnly,\n labelOnly: isLabelOnly,\n iconAndLabel: isIconAndLabel,\n dropdown: this.dropdown,\n [`contrast${cap(this.contrast)}`]: this.variant === 'primary' && this.intent !== 'none' && this.contrast !== 'bold',\n [`elevation${cap(elev)}`]: true,\n onMedium: bg === 'medium',\n onBold: bg === 'bold',\n onStrong: bg === 'strong',\n onAlwaysDark: bg === 'always-dark',\n fullWidth: this.fullWidth,\n };\n\n const extraProps: Record<string, unknown> = {};\n if (Tag === 'button') {\n extraProps.type = this.type;\n extraProps.disabled = this.inactive || this.loading;\n }\n if (this.href) extraProps.href = this.href;\n if (this.target) extraProps.target = this.target;\n\n return (\n <Host class={{ 'btn-host': true, 'btn-host--full': this.fullWidth }}>\n <Tag\n class={btnCls}\n style={this.width ? { width: this.width } : undefined}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.inactive || this.loading || undefined}\n aria-busy={this.loading || undefined}\n onClick={this.handleClick}\n onMouseEnter={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseEnter.emit(e)}\n onMouseLeave={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseLeave.emit(e)}\n {...extraProps}\n >\n {/* Leading icon / loader */}\n <span class=\"btn__icon\" style={{ fontSize: `${iconSize}px`, display: showLeading ? undefined : 'none' }}>\n {this.loading\n ? <ds-loader size={iconSize} />\n : <slot name=\"icon\" />\n }\n </span>\n {/* Label */}\n {hasLabel && (\n <span class={`btn__label ${textClass}`}>{this.label}</span>\n )}\n {/* Trailing chevron */}\n {this.dropdown && (\n <svg\n class=\"btn__chevron\"\n width={iconSize}\n height={iconSize}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n )}\n {/* Badge */}\n {this.badgeCount != null && this.badgeCount > 0 && (\n <span class=\"btn__badge\">\n {this.badgeCount > 9 ? '+' : this.badgeCount}\n </span>\n )}\n </Tag>\n </Host>\n );\n }\n}\n\nfunction cap(s: string) {\n return s.charAt(0).toUpperCase() + s.slice(1);\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as d,h as
|
|
1
|
+
import{p as e,H as d,h as a,a as s,t as r}from"./index.js";const o=()=>`.sc-ds-card-h{display:block;box-sizing:border-box;background-color:var(--color-background-primary);overflow:hidden}.elevation-flat.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-none)}.elevation-elevated.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-floating.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-floating)}.radius-sm.sc-ds-card-h{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-card-h{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-card-h{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-card-h{border-radius:var(--dimension-radius-175)}.sc-ds-card-s>[slot="header"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.body.sc-ds-card{padding:var(--dimension-space-200)}.sc-ds-card-s>[slot="footer"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary)}`;const i=e(class e extends d{constructor(e){super();if(e!==false){this.__registerHost()}this.elevation="elevated";this.radius="lg"}render(){return a(s,{key:"eab8ba1a4830a0a4981f644ae4ea47d79ab0f736",class:{card:true,[`elevation-${this.elevation}`]:true,[`radius-${this.radius}`]:true}},a("slot",{key:"377361a9165d4065d9403638fb176f5dbcb58953",name:"header"}),a("div",{key:"7bf27bcb83ac32810448d5f73132563511f1678d",class:"body"},a("slot",{key:"241a4f2d4d7ca54af83fde5ee173dfe0d2cf0bf4"})),a("slot",{key:"717d51ec4f23c6d02a9beba409f4c05c440f3522",name:"footer"}))}static get style(){return o()}},[262,"ds-card",{elevation:[1],radius:[1]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-card"];e.forEach((e=>{switch(e){case"ds-card":if(!customElements.get(r(e))){customElements.define(r(e),i)}break}}))}c();const t=i;const n=c;export{t as DsCard,n as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["cardCss","Card","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","elevation","radius","render","h","Host","key","class","card","name"],"sources":["src/wc/components/Card/Card.css?tag=ds-card&encapsulation=scoped","src/wc/components/Card/Card.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n overflow: hidden;\n}\n\n/* Elevation */\n:host(.elevation-flat) { box-shadow: var(--effect-elevation-elevated-none); }\n:host(.elevation-elevated) { box-shadow: var(--effect-elevation-elevated-sm); }\n:host(.elevation-floating) { box-shadow: var(--effect-elevation-elevated-floating); }\n\n/* Radius */\n:host(.radius-sm) { border-radius: var(--dimension-radius-075); }\n:host(.radius-md) { border-radius: var(--dimension-radius-100); }\n:host(.radius-lg) { border-radius: var(--dimension-radius-125); }\n:host(.radius-xl) { border-radius: var(--dimension-radius-175); }\n\n/* Sections */\n::slotted([slot=\"header\"]) {\n display: block;\n padding: var(--dimension-space-150) var(--dimension-space-200);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.body {\n padding: var(--dimension-space-200);\n}\n\n::slotted([slot=\"footer\"]) {\n display: block;\n padding: var(--dimension-space-150) var(--dimension-space-200);\n border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CardElevation = 'flat' | 'elevated' | 'floating';\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'xl';\n\n@Component({\n tag: 'ds-card',\n styleUrl: 'Card.css',\n scoped: true,\n})\nexport class Card {\n @Prop() elevation: CardElevation = 'elevated';\n @Prop() radius: CardRadius = 'lg';\n\n render() {\n return (\n <Host class={{ card: true, [`elevation-${this.elevation}`]: true, [`radius-${this.radius}`]: true }}>\n <slot name=\"header\" />\n <div class=\"body\">\n <slot />\n </div>\n <slot name=\"footer\" />\n </Host>\n );\n }\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["cardCss","Card","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","elevation","radius","render","h","Host","key","class","card","name"],"sources":["src/wc/components/Card/Card.css?tag=ds-card&encapsulation=scoped","src/wc/components/Card/Card.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n overflow: hidden;\n}\n\n/* Elevation */\n:host(.elevation-flat) { box-shadow: var(--effect-elevation-elevated-none); }\n:host(.elevation-elevated) { box-shadow: var(--effect-elevation-elevated-sm); }\n:host(.elevation-floating) { box-shadow: var(--effect-elevation-elevated-floating); }\n\n/* Radius */\n:host(.radius-sm) { border-radius: var(--dimension-radius-075); }\n:host(.radius-md) { border-radius: var(--dimension-radius-100); }\n:host(.radius-lg) { border-radius: var(--dimension-radius-125); }\n:host(.radius-xl) { border-radius: var(--dimension-radius-175); }\n\n/* Sections */\n::slotted([slot=\"header\"]) {\n display: block;\n padding: var(--dimension-space-150) var(--dimension-space-200);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.body {\n padding: var(--dimension-space-200);\n}\n\n::slotted([slot=\"footer\"]) {\n display: block;\n padding: var(--dimension-space-150) var(--dimension-space-200);\n border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CardElevation = 'flat' | 'elevated' | 'floating';\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'xl';\n\n@Component({\n tag: 'ds-card',\n styleUrl: 'Card.css',\n scoped: true,\n})\nexport class Card {\n @Prop() elevation: CardElevation = 'elevated';\n @Prop() radius: CardRadius = 'lg';\n\n render() {\n return (\n <Host class={{ card: true, [`elevation-${this.elevation}`]: true, [`radius-${this.radius}`]: true }}>\n <slot name=\"header\" />\n <div class=\"body\">\n <slot />\n </div>\n <slot name=\"footer\" />\n </Host>\n );\n }\n}\n"],"mappings":"2DAAA,MAAMA,EAAU,IAAM,2hC,MCUTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,UAA2B,WAC3BD,KAAAE,OAAqB,IAa9B,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,KAAM,KAAM,CAAC,aAAaR,KAAKC,aAAc,KAAM,CAAC,UAAUD,KAAKE,UAAW,OAC3FE,EAAA,QAAAE,IAAA,2CAAMG,KAAK,WACXL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMG,KAAK,W","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c,h as
|
|
1
|
+
import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let a=0;const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.labelId=`ds-checkbox-label-${++a}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return c(i,{key:"0a52eba5a20efae7cf4214bc5e88be15b0d47b12",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"053c607924ce2940add65fea65135bcf5bd1c50d",class:{box:true,"box--marked":e}},e&&c("span",{key:"ad1aaa0cabad80a93ab78bd1a0ffc71fd3d7a66a",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"07ba3ba551824707a52d67ad94516e89bd664ee1",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}d();const h=n;const b=d;export{h as DsCheckbox,b as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["checkboxCss","idCounter","Checkbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","labelId","checked","indeterminate","inactive","handleActivate","dsChange","emit","handleKeyDown","e","key","preventDefault","render","isMarked","h","Host","role","String","undefined","tabIndex","class","checkbox","onClick","onKeyDown","box","id","label"],"sources":["src/wc/components/Checkbox/Checkbox.css?tag=ds-checkbox&encapsulation=scoped","src/wc/components/Checkbox/Checkbox.tsx"],"sourcesContent":[".checkbox {\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}\n\n.checkbox:hover {\n background-color: var(--color-interaction-hover);\n}\n\n.checkbox:active {\n background-color: var(--color-interaction-pressed);\n}\n\n.inactive {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n}\n\n/* ── Default box indicator ───────────────────────────────────────────────── */\n\n.box {\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n border: 1.5px solid var(--color-foreground-secondary);\n border-radius: var(--dimension-radius-050);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n transition: all var(--effect-motion-short-2);\n}\n\n.box--marked {\n background-color: var(--color-foreground-primary);\n border-color: var(--color-foreground-primary);\n}\n\n.checkmark {\n color: var(--color-foreground-on-bold-background-primary);\n font-size: 14px;\n line-height: 1;\n font-weight: 700;\n}\n\n/* ── Label ───────────────────────────────────────────────────────────────── */\n\n.checkbox__label {\n flex: 1;\n min-width: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n tag: 'ds-checkbox',\n styleUrl: 'Checkbox.css',\n scoped: true,\n})\nexport class Checkbox {\n private labelId = `ds-checkbox-label-${++idCounter}`;\n\n @Prop() label!: string;\n @Prop({ mutable: true }) checked: boolean = false;\n @Prop() indeterminate: boolean = false;\n @Prop() inactive: boolean = false;\n\n @Event() dsChange!: EventEmitter<boolean>;\n\n private handleActivate = () => {\n if (this.inactive) return;\n this.checked = !this.checked;\n this.dsChange.emit(this.checked);\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault();\n this.handleActivate();\n }\n };\n\n render() {\n const isMarked = this.checked || this.indeterminate;\n\n return (\n <Host\n role=\"checkbox\"\n aria-checked={this.indeterminate ? 'mixed' : String(this.checked)}\n aria-disabled={this.inactive || undefined}\n aria-labelledby={this.labelId}\n tabIndex={this.inactive ? -1 : 0}\n class={{ checkbox: true, inactive: this.inactive }}\n onClick={this.handleActivate}\n onKeyDown={this.handleKeyDown}\n >\n <span class={{ box: true, 'box--marked': isMarked }}>\n {isMarked && (\n <span class=\"checkmark\" aria-hidden=\"true\">\n {this.indeterminate ? '−' : '✓'}\n </span>\n )}\n </span>\n <span id={this.labelId} class=\"text-body-medium checkbox__label\">\n {this.label}\n </span>\n </Host>\n );\n }\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["checkboxCss","idCounter","Checkbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","labelId","checked","indeterminate","inactive","handleActivate","dsChange","emit","handleKeyDown","e","key","preventDefault","render","isMarked","h","Host","role","String","undefined","tabIndex","class","checkbox","onClick","onKeyDown","box","id","label"],"sources":["src/wc/components/Checkbox/Checkbox.css?tag=ds-checkbox&encapsulation=scoped","src/wc/components/Checkbox/Checkbox.tsx"],"sourcesContent":[".checkbox {\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}\n\n.checkbox:hover {\n background-color: var(--color-interaction-hover);\n}\n\n.checkbox:active {\n background-color: var(--color-interaction-pressed);\n}\n\n.inactive {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n}\n\n/* ── Default box indicator ───────────────────────────────────────────────── */\n\n.box {\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n border: 1.5px solid var(--color-foreground-secondary);\n border-radius: var(--dimension-radius-050);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n transition: all var(--effect-motion-short-2);\n}\n\n.box--marked {\n background-color: var(--color-foreground-primary);\n border-color: var(--color-foreground-primary);\n}\n\n.checkmark {\n color: var(--color-foreground-on-bold-background-primary);\n font-size: 14px;\n line-height: 1;\n font-weight: 700;\n}\n\n/* ── Label ───────────────────────────────────────────────────────────────── */\n\n.checkbox__label {\n flex: 1;\n min-width: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n tag: 'ds-checkbox',\n styleUrl: 'Checkbox.css',\n scoped: true,\n})\nexport class Checkbox {\n private labelId = `ds-checkbox-label-${++idCounter}`;\n\n @Prop() label!: string;\n @Prop({ mutable: true }) checked: boolean = false;\n @Prop() indeterminate: boolean = false;\n @Prop() inactive: boolean = false;\n\n @Event() dsChange!: EventEmitter<boolean>;\n\n private handleActivate = () => {\n if (this.inactive) return;\n this.checked = !this.checked;\n this.dsChange.emit(this.checked);\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault();\n this.handleActivate();\n }\n };\n\n render() {\n const isMarked = this.checked || this.indeterminate;\n\n return (\n <Host\n role=\"checkbox\"\n aria-checked={this.indeterminate ? 'mixed' : String(this.checked)}\n aria-disabled={this.inactive || undefined}\n aria-labelledby={this.labelId}\n tabIndex={this.inactive ? -1 : 0}\n class={{ checkbox: true, inactive: this.inactive }}\n onClick={this.handleActivate}\n onKeyDown={this.handleKeyDown}\n >\n <span class={{ box: true, 'box--marked': isMarked }}>\n {isMarked && (\n <span class=\"checkmark\" aria-hidden=\"true\">\n {this.indeterminate ? '−' : '✓'}\n </span>\n )}\n </span>\n <span id={this.labelId} class=\"text-body-medium checkbox__label\">\n {this.label}\n </span>\n </Host>\n );\n }\n}\n"],"mappings":"kEAAA,MAAMA,EAAc,IAAM,mmCCE1B,IAAIC,EAAY,E,MAOHC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,6EAMUC,KAAAC,QAAU,uBAAuBP,IAGhBM,KAAAE,QAAmB,MACpCF,KAAAG,cAAyB,MACzBH,KAAAI,SAAoB,MAIpBJ,KAAAK,eAAiB,KACvB,GAAIL,KAAKI,SAAU,OACnBJ,KAAKE,SAAWF,KAAKE,QACrBF,KAAKM,SAASC,KAAKP,KAAKE,QAAQ,EAG1BF,KAAAQ,cAAiBC,IACvB,GAAIA,EAAEC,MAAQ,KAAOD,EAAEC,MAAQ,QAAS,CACtCD,EAAEE,iBACFX,KAAKK,gB,EA+BV,CA3BC,MAAAO,GACE,MAAMC,EAAWb,KAAKE,SAAWF,KAAKG,cAEtC,OACEW,EAACC,EAAI,CAAAL,IAAA,2CACHM,KAAK,WAAU,eACDhB,KAAKG,cAAgB,QAAUc,OAAOjB,KAAKE,SAAQ,gBAClDF,KAAKI,UAAYc,UAAS,kBACxBlB,KAAKC,QACtBkB,SAAUnB,KAAKI,UAAW,EAAK,EAC/BgB,MAAO,CAAEC,SAAU,KAAMjB,SAAUJ,KAAKI,UACxCkB,QAAStB,KAAKK,eACdkB,UAAWvB,KAAKQ,eAEhBM,EAAA,QAAAJ,IAAA,2CAAMU,MAAO,CAAEI,IAAK,KAAM,cAAeX,IACtCA,GACCC,EAAA,QAAAJ,IAAA,2CAAMU,MAAM,YAAW,cAAa,QACjCpB,KAAKG,cAAgB,IAAM,MAIlCW,EAAA,QAAAJ,IAAA,2CAAMe,GAAIzB,KAAKC,QAASmB,MAAM,oCAC3BpB,KAAK0B,O","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,h as s,t as r,a as i}from"./index.js";const o=()=>`:host{display:block;border:none;margin:0;flex-shrink:0;background-color:var(--color-border-secondary)}:host(:not(.vertical)){width:100%;height:1px}:host(.vertical){width:1px;height:100%;align-self:stretch}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.orientation="horizontal"}render(){return s(i,{key:"
|
|
1
|
+
import{p as t,H as e,h as s,t as r,a as i}from"./index.js";const o=()=>`:host{display:block;border:none;margin:0;flex-shrink:0;background-color:var(--color-border-secondary)}:host(:not(.vertical)){width:100%;height:1px}:host(.vertical){width:1px;height:100%;align-self:stretch}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.orientation="horizontal"}render(){return s(i,{key:"05d217d9d0d1330df80ff23120bdd578e29f46b6",role:"separator","aria-orientation":this.orientation,class:{vertical:this.orientation==="vertical"}})}static get style(){return o()}},[1,"ds-divider",{orientation:[1]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-divider"];t.forEach((t=>{switch(t){case"ds-divider":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}d();const a=n;const c=d;export{a as DsDivider,c as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-divider.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as
|
|
1
|
+
import{p as t,H as e,h as s,a as c,t as a}from"./index.js";const n=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.empty-state.sc-ds-empty-state{display:flex;align-items:center;justify-content:center;height:100%;min-height:400px;width:100%}.empty-state.sc-ds-empty-state p.sc-ds-empty-state{margin:0}`;const o={"no-content":"No page contents to display.","no-results":"No results found.","no-results-filter":"No results found. Please update search criteria.","no-access":"You don't have access to this page."};const d=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.type="no-content"}render(){return s(c,{key:"386f65dc8fabc2b510cd2769c86109e352f42803"},s("div",{key:"f4ae4a6507773d51f33f17c2d567c310fe2e9c5e",class:"empty-state"},s("p",{key:"65f599fb8782b80da7ae90f7e7d0f20dbd37a070",class:"text-body-medium",style:{color:"var(--color-foreground-secondary)"}},this.message||o[this.type])))}static get style(){return n()}},[2,"ds-empty-state",{type:[1],message:[1]}]);function i(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(a(t))){customElements.define(a(t),d)}break}}))}i();const r=d;const f=i;export{r as DsEmptyState,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-empty-state.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,h as a,t as r,a as s}from"./index.js";const o=()=>`:host{position:absolute;pointer-events:none;z-index:10;transform:translateZ(0);backface-visibility:hidden}@media (prefers-reduced-motion: reduce){:host{transition:none}}:host(.fade--top){top:0;left:0;right:0;background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}:host(.fade--bottom){bottom:0;left:0;right:0;background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--left){top:0;bottom:0;left:0;background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--right){top:0;bottom:0;right:0;background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.background="var(--color-background-secondary)"}render(){return a(s,{key:"
|
|
1
|
+
import{p as t,H as e,h as a,t as r,a as s}from"./index.js";const o=()=>`:host{position:absolute;pointer-events:none;z-index:10;transform:translateZ(0);backface-visibility:hidden}@media (prefers-reduced-motion: reduce){:host{transition:none}}:host(.fade--top){top:0;left:0;right:0;background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}:host(.fade--bottom){bottom:0;left:0;right:0;background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--left){top:0;bottom:0;left:0;background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--right){top:0;bottom:0;right:0;background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.background="var(--color-background-secondary)"}render(){return a(s,{key:"8b825987246fa9f643d107322e81e073d76dbd97","aria-hidden":"true",class:{fade:true,[`fade--${this.side}`]:true},style:{height:this.height,"--ds-fade-bg":this.background}})}static get style(){return o()}},[1,"ds-fade",{side:[1],height:[1],background:[1]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-fade"];t.forEach((t=>{switch(t){case"ds-fade":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}d();const i=n;const f=d;export{i as DsFade,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-fade.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,h as d,a as l,t
|
|
1
|
+
import{p as e,H as s,h as d,a as l,t}from"./index.js";const c=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let i=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++i}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"8f813ce7af789cf3a16841519e0c6314d9e4b5e8"},d("div",{key:"5c199a001430609dd83dffbb2795e2c7029f40c6",class:"field"},d("label",{key:"85bf00d09fc99527082ee60f5fd630951309a560",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"e0bc9dbcfd770e6ee3d4bd4c41d03ce5bbdd00c4"})))}static get style(){return c()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function a(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),f)}break}}))}a();const n=f;const o=a;export{n as DsField,o as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["fieldCss","fieldCounter","Field","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","resolvedId","render","id","fieldId","h","Host","key","class","htmlFor","label"],"sources":["src/wc/components/Field/Field.css?tag=ds-field&encapsulation=scoped","src/wc/components/Field/Field.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.field {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n}\n\n.field__label {\n display: block;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nlet fieldCounter = 0;\n\n@Component({\n tag: 'ds-field',\n styleUrl: 'Field.css',\n scoped: true,\n})\nexport class Field {\n @Prop() label!: string;\n /** ID forwarded to the slotted control via the label's `for` attribute. Auto-generated if omitted. */\n @Prop() fieldId: string | undefined;\n\n private resolvedId = `ds-field-${++fieldCounter}`;\n\n render() {\n const id = this.fieldId || this.resolvedId;\n return (\n <Host>\n <div class=\"field\">\n <label class=\"text-body-small-emphasis field__label\" htmlFor={id}>{this.label}</label>\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["fieldCss","fieldCounter","Field","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","resolvedId","render","id","fieldId","h","Host","key","class","htmlFor","label"],"sources":["src/wc/components/Field/Field.css?tag=ds-field&encapsulation=scoped","src/wc/components/Field/Field.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.field {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n}\n\n.field__label {\n display: block;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nlet fieldCounter = 0;\n\n@Component({\n tag: 'ds-field',\n styleUrl: 'Field.css',\n scoped: true,\n})\nexport class Field {\n @Prop() label!: string;\n /** ID forwarded to the slotted control via the label's `for` attribute. Auto-generated if omitted. */\n @Prop() fieldId: string | undefined;\n\n private resolvedId = `ds-field-${++fieldCounter}`;\n\n render() {\n const id = this.fieldId || this.resolvedId;\n return (\n <Host>\n <div class=\"field\">\n <label class=\"text-body-small-emphasis field__label\" htmlFor={id}>{this.label}</label>\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"sDAAA,MAAMA,EAAW,IAAM,6JCEvB,IAAIC,EAAe,E,MAONC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CAUUC,KAAAC,WAAa,cAAcP,GAapC,CAXC,MAAAQ,GACE,MAAMC,EAAKH,KAAKI,SAAWJ,KAAKC,WAChC,OACEI,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,wCAAwCC,QAASN,GAAKH,KAAKU,OACxEL,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as
|
|
1
|
+
import{p as e,H as a,h as r,a as s,t}from"./index.js";const c=()=>`.sc-ds-header-h{display:flex;align-items:center;justify-content:space-between;height:var(--dimension-size-600, 48px);padding:0 var(--dimension-space-100);flex-shrink:0;gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);box-sizing:border-box}.bg-primary.sc-ds-header-h{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-header-h{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-header-h{background-color:transparent}.bg-translucent.sc-ds-header-h{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.left.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-100);flex-shrink:0;min-width:0}.title.sc-ds-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center.sc-ds-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);flex:1;min-width:0}.right.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const d=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.background="secondary"}render(){return r(s,{key:"da0a5d4df9029fee8563eba64b21ffb149b32652",class:{header:true,[`bg-${this.background}`]:true},role:"banner"},r("div",{key:"442350df0e24431f7b1230b2875726879175224e",class:"left"},r("slot",{key:"0fbb9cc116b6d56c77eeddc3a0221b62afc4f9e4",name:"left"}),this.heading&&r("span",{key:"7eacaaebb8694bcfe1d31bf66d7843279412d634",class:"title text-title-small"},this.heading)),r("div",{key:"fcea6ce63814b460964f099f1aa7eb0704cb1576",class:"center"},r("slot",{key:"1fe99e1754f117298e71fe7a364f026660a31e73",name:"center"})),r("div",{key:"dc50a094ae6df86f66dbd7e4697b55f441b9d142",class:"right"},r("slot",{key:"93c33b68af8c9ad0ecce38cc0b776ac02568d588",name:"right"})))}static get style(){return c()}},[262,"ds-header",{heading:[1],background:[1]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-header"];e.forEach((e=>{switch(e){case"ds-header":if(!customElements.get(t(e))){customElements.define(t(e),d)}break}}))}n();const i=d;const o=n;export{i as DsHeader,o as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-header.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{I as
|
|
1
|
+
import{I as o,d as s}from"./p-CGuwZUFk.js";const t=o;const p=s;export{t as DsIcon,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-icon.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as i,c as s,h as
|
|
1
|
+
import{p as e,H as i,c as s,h as t,a as r,t as a}from"./index.js";const n=()=>`.input-container.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.wrapper.sc-ds-input{width:100%;height:var(--dimension-size-400);display:flex;align-items:center;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-depressed-sm);box-sizing:border-box}.wrapper.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-foreground-bold-brand)}.wrapper--error.sc-ds-input{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.wrapper--error.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.row.sc-ds-input{display:flex;align-items:center;width:100%;height:100%;gap:var(--dimension-space-050)}.native-input.sc-ds-input{flex:1;min-width:0;height:100%;padding:0 var(--dimension-space-100);background:transparent;border:none;outline:none;font-family:inherit;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{opacity:0.5;cursor:not-allowed}.native-input.sc-ds-input::placeholder{color:var(--color-foreground-secondary)}.native-input.sc-ds-input:focus::placeholder{color:var(--color-foreground-tertiary)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.clear-btn.sc-ds-input{flex-shrink:0;margin-right:var(--dimension-space-050);padding:var(--dimension-space-050);border:none;background:none;cursor:pointer;color:var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}.clear-btn.sc-ds-input:hover{background-color:var(--color-interaction-hover)}.suffix.sc-ds-input{display:flex;align-items:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.suffix.sc-ds-input:empty{display:none}.error-text.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);color:var(--color-foreground-bold-negative)}`;let o=0;const d=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.generatedId=`ds-input-${++o}`;this.errorId=`${this.generatedId}-error`;this.value="";this.type="text";this.inactive=false;this.autoFocus=false;this.error=false;this.handleInput=e=>{this.dsChange.emit(e.target.value)};this.handleClear=()=>{this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}async setFocus(){this.el.querySelector("input")?.focus()}render(){const e=this.inputId??this.generatedId;const i=this.type==="search"&&this.value.length>0&&!this.inactive;const s=this.error&&Boolean(this.errorMessage);const a=[this.ariaDescribedby,s?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return t(r,{key:"98eccc46df56e7925fb27fbab2cb930626e39bb7",class:"input-container"},t("div",{key:"c58204b977cdf3b9db367f86bfeb960e56ebdc5f",class:{wrapper:true,"wrapper--error":this.error}},t("div",{key:"a01b2908be7a66cb339f53488a151429411b1ed8",class:"row"},t("input",{key:"f0189940d32214e374ef121e9ec6c109377c05c0",type:this.type,id:e,value:this.value,placeholder:this.placeholder,disabled:this.inactive,autoFocus:this.autoFocus,class:"native-input","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":a,"aria-invalid":this.error||undefined,onInput:this.handleInput}),i&&t("button",{key:"6d459efce0326c68364a821a0ee069f5ae748265",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":"Clear"},t("span",{key:"713a237e736c8b93fd9006ee7a9d706d333a9459","aria-hidden":"true"},"×")),t("span",{key:"9b119c034619cdcf719653546fd9cddb1003f723",class:"suffix"},t("slot",{key:"e54cdf9b5ddfaffe66bb209bf1bfe56088f9e32e",name:"suffix"})))),s&&t("div",{key:"9249d849cb8d2e7a5a8a441b4000051e5e95bcce",id:this.errorId,role:"alert",class:"error-text"},this.errorMessage))}get el(){return this}static get style(){return n()}},[262,"ds-input",{value:[1],placeholder:[1],type:[1],inactive:[4],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],setFocus:[64]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-input"];e.forEach((e=>{switch(e){case"ds-input":if(!customElements.get(a(e))){customElements.define(a(e),d)}break}}))}c();const l=d;const p=c;export{l as DsInput,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-input.js.map
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface DsLabelWrap extends Components.DsLabelWrap, HTMLElement {}
|
|
4
|
+
export const DsLabelWrap: {
|
|
5
|
+
prototype: DsLabelWrap;
|
|
6
|
+
new (): DsLabelWrap;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as s,H as e,h as a,a as t,t as i}from"./index.js";const l=()=>`.label-wrap.sc-ds-label-wrap-h{display:inline-block;line-height:0;white-space:nowrap;flex-shrink:0;padding:0 var(--dimension-space-050)}.size-xs.sc-ds-label-wrap-h,.size-sm.sc-ds-label-wrap-h{padding:0 var(--dimension-space-025)}.truncate.sc-ds-label-wrap-h{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}`;const n=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.size="md";this.truncate=false}render(){return a(t,{key:"63918580201d398012afad55492d3f8a7701500a",class:{"label-wrap":true,"size-xs":this.size==="xs","size-sm":this.size==="sm","size-lg":this.size==="lg",truncate:this.truncate}},a("slot",{key:"b96e4d1644445272646c24aa6b3aecad2016ae1d"}))}static get style(){return l()}},[262,"ds-label-wrap",{size:[1],truncate:[4]}]);function r(){if(typeof customElements==="undefined"){return}const s=["ds-label-wrap"];s.forEach((s=>{switch(s){case"ds-label-wrap":if(!customElements.get(i(s))){customElements.define(i(s),n)}break}}))}r();const c=n;const d=r;export{c as DsLabelWrap,d as defineCustomElement};
|
|
2
|
+
//# sourceMappingURL=ds-label-wrap.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["labelWrapCss","LabelWrap","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","truncate","render","h","Host","key","class"],"sources":["src/wc/components/LabelWrap/LabelWrap.css?tag=ds-label-wrap&encapsulation=scoped","src/wc/components/LabelWrap/LabelWrap.tsx"],"sourcesContent":["/* ==========================================================================\n LabelWrap — kills line-height struts; adds optical horizontal padding.\n Used internally inside interactive components.\n ========================================================================== */\n\n:host(.label-wrap) {\n display: inline-block;\n line-height: 0;\n white-space: nowrap;\n flex-shrink: 0;\n /* md / lg: body scale optical padding */\n padding: 0 var(--dimension-space-050);\n}\n\n/* xs / sm: tighter scale optical padding */\n:host(.size-xs),\n:host(.size-sm) {\n padding: 0 var(--dimension-space-025);\n}\n\n/* Truncation mode — use inside full-width containers */\n:host(.truncate) {\n flex-shrink: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type LabelWrapSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * Internal utility wrapper that kills line-height struts and adds optical\n * horizontal padding. Used inside interactive components (Button, Tag, etc.)\n *\n * Not intended as a standalone consumer-facing component — internal use only.\n */\n@Component({\n tag: 'ds-label-wrap',\n styleUrl: 'LabelWrap.css',\n scoped: true,\n})\nexport class LabelWrap {\n /** Typography size — controls optical horizontal padding. */\n @Prop() size: LabelWrapSize = 'md';\n\n /** Enable truncation with ellipsis — use inside full-width containers. */\n @Prop() truncate: boolean = false;\n\n render() {\n return (\n <Host\n class={{\n 'label-wrap': true,\n 'size-xs': this.size === 'xs',\n 'size-sm': this.size === 'sm',\n 'size-lg': this.size === 'lg',\n truncate: this.truncate,\n }}\n >\n <slot />\n </Host>\n );\n }\n}\n"],"mappings":"2DAAA,MAAMA,EAAe,IAAM,sU,MCedC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,4CAOUC,KAAAC,KAAsB,KAGtBD,KAAAE,SAAoB,KAiB7B,CAfC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAc,KACd,UAAWP,KAAKC,OAAS,KACzB,UAAWD,KAAKC,OAAS,KACzB,UAAWD,KAAKC,OAAS,KACzBC,SAAUF,KAAKE,WAGjBE,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,c as s,h as i,a as n,t as o}from"./index.js";const r=()=>`.menu-popup.sc-ds-menu{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-125);box-shadow:var(--effect-elevation-elevated-floating);display:flex;flex-direction:column;min-width:200px;max-width:600px;overflow:hidden;animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-3) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{padding:var(--dimension-space-050);display:flex;flex-direction:column;gap:var(--dimension-space-025)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.section-header.sc-ds-menu{padding:var(--dimension-space-050) var(--dimension-space-075);display:flex;align-items:center;height:var(--dimension-size-400);-webkit-user-select:none;user-select:none}.section-label.sc-ds-menu{color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);border:none;background:transparent;border-radius:var(--dimension-radius-075);cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;width:100%;min-height:var(--dimension-size-400);box-sizing:border-box;transition:background-color var(--effect-motion-short-2);position:relative;color:inherit}.menu-item.sc-ds-menu:hover:not(:disabled){background-color:var(--color-interaction-hover)}.menu-item.sc-ds-menu:active:not(:disabled){background-color:var(--color-interaction-pressed)}.menu-item--focused.sc-ds-menu:not(:disabled){background-color:var(--color-interaction-hover)}.menu-item.sc-ds-menu:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:-2px}.menu-item--selected.sc-ds-menu{background-color:var(--color-interaction-hover)}.menu-item--inactive.sc-ds-menu{opacity:0.5;cursor:not-allowed;pointer-events:none}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{flex:1;display:flex;flex-direction:column;gap:var(--dimension-space-025);min-width:0}.menu-item__label.sc-ds-menu{color:var(--color-foreground-secondary)}.menu-item--selected.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-primary)}.menu-item__subtext.sc-ds-menu{color:var(--color-foreground-secondary);line-height:1.4}.menu-item__toggle.sc-ds-menu{width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);background-color:var(--color-background-translucent);border-radius:var(--dimension-radius-125);position:relative;flex-shrink:0;transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-foreground-on-bold-background-primary);border-radius:50%;position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const a=220;const c=4;const d=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsSelect=s(this,"dsSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[]}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.positionReady=false;requestAnimationFrame((()=>{this.calculatePosition();this.positionReady=true;this.focusFirstItem();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),a)}}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>e.items))}calculatePosition(){const e=this.resolvedAnchor;if(!e)return;const t=this.el.querySelector(".menu-popup");if(!t)return;const s=e.getBoundingClientRect();const i=t.offsetWidth||200;const n=t.offsetHeight||160;let o=0,r=0;switch(this.side){case"top":r=s.top-n-this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"bottom":r=s.bottom+this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"left":o=s.left-i-this.sideOffset;r=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-n+this.alignOffset:s.top+s.height/2-n/2+this.alignOffset;break;case"right":o=s.right+this.sideOffset;r=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-n+this.alignOffset:s.top+s.height/2-n/2+this.alignOffset;break}this.pos={x:Math.min(Math.max(o,c),window.innerWidth-i-c),y:Math.min(Math.max(r,c),window.innerHeight-n-c)}}focusFirstItem(){const e=this.flatItems;const t=e.findIndex((e=>!e.isInactive));this.focusedIndex=t>=0?t:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const t=e.target;const s=this.el.querySelector(".menu-popup");const i=this.resolvedAnchor;if(s?.contains(t)||i?.contains(t))return;this.close()};this.scrollResizeHandler=()=>this.calculatePosition();document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false}handleKeyDown(e){if(!this.open)return;const t=this.flatItems;const s=t.map(((e,t)=>({it:e,i:t}))).filter((({it:e})=>!e.isInactive)).map((({i:e})=>e));if(!s.length)return;const i=s.indexOf(this.focusedIndex);const n=i<0?0:i;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusedIndex=s[(n+1)%s.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusedIndex=s[(n-1+s.length)%s.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusedIndex=s[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusedIndex=s[s.length-1];this.focusItem(this.focusedIndex);break;case"Escape":e.preventDefault();this.close();break;case"Tab":e.preventDefault();this.close();break}}focusItem(e){const t=this.el.querySelectorAll(".menu-item");t[e]?.focus()}handleItemClick(e){if(e.isInactive)return;this.dsSelect.emit(e);this.close()}render(){if(!this.shouldRender)return i(n,{style:{display:"contents"}});const e=this.activeSections;let t=0;const s={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)s["width"]=this.menuWidth;if(this.minWidth)s["min-width"]=this.minWidth;return i(n,{style:{display:"contents"}},i("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:s,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},e.map(((s,n)=>i("div",{key:n,class:{"menu-section":true,"menu-section--divided":n<e.length-1},role:s.header?"group":undefined,"aria-label":s.header},s.header&&i("div",{class:"section-header","aria-hidden":"true"},i("span",{class:"text-body-small-emphasis section-label"},s.header)),s.items.map((e=>{const s=t++;const n=this.focusedIndex===s;return i("button",{key:s,type:"button",class:{"menu-item":true,"menu-item--selected":!!e.isSelected,"menu-item--inactive":!!e.isInactive,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":n},role:"menuitem",disabled:e.isInactive,tabIndex:n?0:-1,onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=s}},i("div",{class:"menu-item__content"},i("span",{class:e.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},e.label),e.subtext&&i("span",{class:"text-body-small menu-item__subtext"},e.subtext)),e.showToggle&&i("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!e.toggleValue},"aria-hidden":"true"},i("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return r()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[2,"side-offset"],alignOffset:[2,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const e=["ds-menu"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(o(e))){customElements.define(o(e),d)}break}}))}u();const m=d;const h=u;export{m as DsMenu,h as defineCustomElement};
|
|
1
|
+
import{M as o,d as s}from"./p-CrfnBySX.js";const r=o;const t=s;export{r as DsMenu,t as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["menuCss","CLOSE_ANIMATION_MS","VP_PAD","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","sections","side","align","sideOffset","alignOffset","shouldRender","closing","pos","x","y","focusedIndex","positionReady","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","componentDidLoad","onOpenChange","disconnectedCallback","teardownListeners","isOpen","requestAnimationFrame","calculatePosition","focusFirstItem","setupListeners","setTimeout","resolvedAnchor","anchor","anchorId","document","getElementById","activeSections","length","flatItems","flatMap","s","anchorEl","popup","el","querySelector","a","getBoundingClientRect","pw","offsetWidth","ph","offsetHeight","top","left","right","width","bottom","height","Math","min","max","window","innerWidth","innerHeight","flat","idx","findIndex","it","isInactive","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","handleItemClick","item","dsSelect","render","h","Host","style","display","flatIdx","popupStyle","position","transform","round","zIndex","visibility","menuWidth","minWidth","class","role","section","si","header","undefined","isFocused","type","isSelected","isDestructive","disabled","tabIndex","onClick","onFocus","label","subtext","showToggle","toggleValue"],"sources":["src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":[".menu-popup {\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n border-radius: var(--dimension-radius-125);\n box-shadow: var(--effect-elevation-elevated-floating);\n display: flex;\n flex-direction: column;\n min-width: 200px;\n max-width: 600px;\n overflow: hidden;\n animation: menuFadeIn var(--effect-motion-short-2) forwards;\n backface-visibility: hidden;\n will-change: transform;\n}\n\n.menu-popup--closing {\n animation: menuFadeOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes menuFadeIn {\n from { opacity: 0; transform: inherit scale(0.97); }\n to { opacity: 1; }\n}\n\n@keyframes menuFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n\n/* Sections */\n.menu-section {\n padding: var(--dimension-space-050);\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-025);\n}\n\n.menu-section--divided {\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n}\n\n.section-header {\n padding: var(--dimension-space-050) var(--dimension-space-075);\n display: flex;\n align-items: center;\n height: var(--dimension-size-400);\n -webkit-user-select: none;\n user-select: none;\n}\n\n.section-label { color: var(--color-foreground-secondary); }\n\n/* Items */\n.menu-item {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-075);\n border: none;\n background: transparent;\n border-radius: var(--dimension-radius-075);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n text-align: left;\n width: 100%;\n min-height: var(--dimension-size-400);\n box-sizing: border-box;\n transition: background-color var(--effect-motion-short-2);\n position: relative;\n color: inherit;\n}\n\n.menu-item:hover:not(:disabled) { background-color: var(--color-interaction-hover); }\n.menu-item:active:not(:disabled) { background-color: var(--color-interaction-pressed); }\n.menu-item--focused:not(:disabled) { background-color: var(--color-interaction-hover); }\n\n.menu-item:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: -2px;\n}\n\n.menu-item--selected { background-color: var(--color-interaction-hover); }\n.menu-item--inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n.menu-item--destructive .menu-item__label { color: var(--color-foreground-bold-negative) !important; }\n\n.menu-item__content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-025);\n min-width: 0;\n}\n\n.menu-item__label { color: var(--color-foreground-secondary); }\n.menu-item--selected .menu-item__label { color: var(--color-foreground-primary); }\n\n.menu-item__subtext {\n color: var(--color-foreground-secondary);\n line-height: 1.4;\n}\n\n/* Toggle */\n.menu-item__toggle {\n width: calc(var(--dimension-size-400) + var(--dimension-size-050));\n height: var(--dimension-size-250);\n background-color: var(--color-background-translucent);\n border-radius: var(--dimension-radius-125);\n position: relative;\n flex-shrink: 0;\n transition: background-color var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on { background-color: var(--color-background-medium-brand); }\n\n.menu-item__toggle-thumb {\n width: var(--dimension-size-200);\n height: var(--dimension-size-200);\n background-color: var(--color-foreground-on-bold-background-primary);\n border-radius: 50%;\n position: absolute;\n top: var(--dimension-space-025);\n left: var(--dimension-space-025);\n transition: transform var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on .menu-item__toggle-thumb {\n transform: translateX(var(--dimension-offset-200, 16px));\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\n\nexport type MenuSide = 'top' | 'right' | 'bottom' | 'left';\nexport type MenuAlign = 'start' | 'center' | 'end';\n\nexport interface MenuItemData {\n label: string;\n value?: string;\n subtext?: string;\n isSelected?: boolean;\n isInactive?: boolean;\n isDestructive?: boolean;\n showToggle?: boolean;\n toggleValue?: boolean;\n}\n\nexport interface MenuSection {\n header?: string;\n items: MenuItemData[];\n}\n\nconst CLOSE_ANIMATION_MS = 220;\nconst VP_PAD = 4;\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 @Prop() sideOffset: number = 4;\n @Prop() alignOffset: number = 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\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\n @Event() dsClose!: EventEmitter<void>;\n @Event() dsSelect!: EventEmitter<MenuItemData>;\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\n componentDidLoad() {\n if (this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.teardownListeners();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n requestAnimationFrame(() => {\n this.calculatePosition();\n this.positionReady = true;\n this.focusFirstItem();\n this.setupListeners();\n });\n } else if (this.shouldRender) {\n this.closing = true;\n this.teardownListeners();\n this.closeTimer = setTimeout(() => {\n this.shouldRender = false;\n this.closing = false;\n this.closeTimer = null;\n }, CLOSE_ANIMATION_MS);\n }\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(s => s.items);\n }\n\n private calculatePosition() {\n const anchorEl = this.resolvedAnchor;\n if (!anchorEl) return;\n const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n if (!popup) return;\n\n const a = anchorEl.getBoundingClientRect();\n const pw = popup.offsetWidth || 200;\n const ph = popup.offsetHeight || 160;\n let x = 0, y = 0;\n\n switch (this.side) {\n case 'top':\n y = a.top - ph - this.sideOffset;\n x = this.align === 'start' ? a.left + this.alignOffset\n : this.align === 'end' ? a.right - pw + this.alignOffset\n : a.left + a.width / 2 - pw / 2 + this.alignOffset;\n break;\n case 'bottom':\n y = a.bottom + this.sideOffset;\n x = this.align === 'start' ? a.left + this.alignOffset\n : this.align === 'end' ? a.right - pw + this.alignOffset\n : a.left + a.width / 2 - pw / 2 + this.alignOffset;\n break;\n case 'left':\n x = a.left - pw - this.sideOffset;\n y = this.align === 'start' ? a.top + this.alignOffset\n : this.align === 'end' ? a.bottom - ph + this.alignOffset\n : a.top + a.height / 2 - ph / 2 + this.alignOffset;\n break;\n case 'right':\n x = a.right + this.sideOffset;\n y = this.align === 'start' ? a.top + this.alignOffset\n : this.align === 'end' ? a.bottom - ph + this.alignOffset\n : a.top + a.height / 2 - ph / 2 + this.alignOffset;\n break;\n }\n\n this.pos = {\n x: Math.min(Math.max(x, VP_PAD), window.innerWidth - pw - VP_PAD),\n y: Math.min(Math.max(y, VP_PAD), window.innerHeight - ph - VP_PAD),\n };\n }\n\n private focusFirstItem() {\n const flat = this.flatItems;\n const idx = flat.findIndex(it => !it.isInactive);\n this.focusedIndex = idx >= 0 ? idx : 0;\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 = () => this.calculatePosition();\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 }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (!this.open) 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.focusedIndex = enabled[(safe + 1) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'ArrowUp':\n e.preventDefault(); e.stopPropagation();\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.focusedIndex = enabled[0];\n this.focusItem(this.focusedIndex);\n break;\n case 'End':\n e.preventDefault(); e.stopPropagation();\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 this.close();\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={{ 'menu-popup': true, 'menu-popup--closing': this.closing }}\n style={popupStyle}\n role=\"menu\"\n aria-label=\"Menu\"\n aria-orientation=\"vertical\"\n >\n {sections.map((section, si) => (\n <div\n key={si}\n class={{ 'menu-section': true, 'menu-section--divided': si < sections.length - 1 }}\n role={section.header ? 'group' : undefined}\n aria-label={section.header}\n >\n {section.header && (\n <div class=\"section-header\" aria-hidden=\"true\">\n <span class=\"text-body-small-emphasis section-label\">{section.header}</span>\n </div>\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 'menu-item--selected': !!item.isSelected,\n 'menu-item--inactive': !!item.isInactive,\n 'menu-item--destructive': !!item.isDestructive,\n 'menu-item--focused': isFocused,\n }}\n role=\"menuitem\"\n disabled={item.isInactive}\n tabIndex={isFocused ? 0 : -1}\n onClick={() => this.handleItemClick(item)}\n onFocus={() => { this.focusedIndex = idx; }}\n >\n <div class=\"menu-item__content\">\n <span class={item.isSelected ? 'text-body-medium-emphasis menu-item__label' : 'text-body-medium menu-item__label'}>\n {item.label}\n </span>\n {item.subtext && (\n <span class=\"text-body-small menu-item__subtext\">{item.subtext}</span>\n )}\n </div>\n {item.showToggle && (\n <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue }} aria-hidden=\"true\">\n <div class=\"menu-item__toggle-thumb\" />\n </div>\n )}\n </button>\n );\n })}\n </div>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,c as
|
|
1
|
+
import{p as e,H as t,c as a,h as s,a as o,t as i}from"./index.js";const d=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 32px);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-275, 22px);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const n={sm:"var(--dimension-modal-width-sm, 400px)",md:"var(--dimension-modal-width-md, 560px)",lg:"var(--dimension-modal-width-lg, 720px)"};const l=220;const r=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let c=0;const m=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=a(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++c;this.titleId=`ds-modal-title-${c}`;this.subtitleId=`ds-modal-subtitle-${c}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),l)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const t=this.getFocusables(e);(t[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(r)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const t=this.el.querySelector(".modal-dialog");if(!t)return;const a=this.getFocusables(t);if(!a.length){e.preventDefault();t.focus();return}const s=a[0];const o=a[a.length-1];const i=document.activeElement;if(e.shiftKey){if(i===s||i===t||!t.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!t.contains(i)){e.preventDefault();s.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return n[this.modalWidth]}return this.modalWidth}render(){const e=!this.shouldRender&&!this.closing;return s(o,{key:"7a43e148a0bb8395a2f1ef301b6eeca2933da1a3",style:{display:"contents"}},s("div",{key:"07c9e6b8238fa11e4569d994dbecb988490ffba7",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},s("div",{key:"afaf56766355ea95d17edf68d608749383ebde97",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 32px))`}},s("div",{key:"7653fc36a2e4386c5de987f32221002a13d65b35",class:"modal-header"},s("h2",{key:"97f14308a035989d05d0959495f37cf86890c85a",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&s("div",{key:"54752d6ae2f323269eeb7c5c5027b0db6432914b",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),s("div",{key:"4359549b810c27b755293dd8b80224ddf70ed402",class:"modal-body"},s("slot",{key:"9c59d6973b1e1e30ed3296026ac0f4175c1b40a1"})),s("div",{key:"db29f6da90175dc9737525d0889ea4b2df30d2ab",class:"modal-footer"},s("slot",{key:"37d9cf482ab3f689c62195d80c649fa3a0e57c65",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return d()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),m)}break}}))}h();const f=m;const u=h;export{f as DsModal,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-modal.js.map
|