@ds-mo/ui 2.8.0 → 2.9.0

package/dist/components/ds-button-group.js

@@ -1,2 +0,0 @@
-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-DUDppafq.js";import{d as n}from"./p-DqBCQRRd.js";import{d as a}from"./p-DgDSRPSP.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};
-//# sourceMappingURL=ds-button-group.js.map

package/dist/components/ds-button-group.js.map

@@ -1 +0,0 @@
-{"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":[]}

package/dist/components/ds-button.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DsButton extends Components.DsButton, HTMLElement {}
-export const DsButton: {
-    prototype: DsButton;
-    new (): DsButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ds-button.js

@@ -1,2 +0,0 @@
-import{B as o,d as p}from"./p-DUDppafq.js";const s=o;const t=p;export{s as DsButton,t as defineCustomElement};
-//# sourceMappingURL=ds-button.js.map

package/dist/components/ds-toggle-button-group.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DsToggleButtonGroup extends Components.DsToggleButtonGroup, HTMLElement {}
-export const DsToggleButtonGroup: {
-    prototype: DsToggleButtonGroup;
-    new (): DsToggleButtonGroup;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ds-toggle-button-group.js

@@ -1,2 +0,0 @@
-import{p as t,H as o,c as r,h as e,a as s,t as i}from"./index.js";import{d}from"./p-DqBCQRRd.js";import{d as n}from"./p-C0CUGiLm.js";const a=()=>`.group.sc-ds-toggle-button-group{display:inline-flex;align-items:stretch;border-radius:var(--dimension-radius-050);position:relative}.group.sc-ds-toggle-button-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}.groupElevated.sc-ds-toggle-button-group{box-shadow:var(--effect-shadow-elevated-sm)}.groupElevated.sc-ds-toggle-button-group::after{box-shadow:var(--effect-highlight-elevated-sm)}.groupFlat.sc-ds-toggle-button-group::after{box-shadow:inset 0 0 0 1px var(--color-border-tertiary)}.groupFloating.sc-ds-toggle-button-group{box-shadow:var(--effect-shadow-elevated-floating)}.groupFloating.sc-ds-toggle-button-group::after{box-shadow:var(--effect-highlight-elevated-floating)}.groupRounded.sc-ds-toggle-button-group{border-radius:var(--dimension-radius-half)}.item.sc-ds-toggle-button-group{flex-shrink:0;box-shadow:none !important;border:none !important}.item.sc-ds-toggle-button-group:active{transform:none !important}.divider.sc-ds-toggle-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-toggle-button-group{height:20px;align-self:center}.dividerGhostXS.sc-ds-toggle-button-group{height:12px}.dividerGhostSM.sc-ds-toggle-button-group{height:16px}.item.sc-ds-toggle-button-group:hover+.dividerGhost.sc-ds-toggle-button-group,.dividerGhost.sc-ds-toggle-button-group:has(+.item:hover){opacity:0}.itemPressed.sc-ds-toggle-button-group+.dividerGhost.sc-ds-toggle-button-group,.dividerGhost.sc-ds-toggle-button-group:has(+.itemPressed){opacity:0}.group.sc-ds-toggle-button-group .itemShort.sc-ds-toggle-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}.group.sc-ds-toggle-button-group .itemPressed.sc-ds-toggle-button-group{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-toggle-button-group{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.last.sc-ds-toggle-button-group{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.middle.sc-ds-toggle-button-group{border-radius:0 !important}.groupRounded.sc-ds-toggle-button-group .first.itemShort.sc-ds-toggle-button-group::after,.groupRounded.sc-ds-toggle-button-group .first.itemPressed.sc-ds-toggle-button-group{border-top-left-radius:var(--dimension-radius-half) !important;border-bottom-left-radius:var(--dimension-radius-half) !important}.groupRounded.sc-ds-toggle-button-group .last.itemShort.sc-ds-toggle-button-group::after,.groupRounded.sc-ds-toggle-button-group .last.itemPressed.sc-ds-toggle-button-group{border-top-right-radius:var(--dimension-radius-half) !important;border-bottom-right-radius:var(--dimension-radius-half) !important}.roundedFirstMD.sc-ds-toggle-button-group{padding-right:var(--dimension-space-100) !important}.roundedLastMD.sc-ds-toggle-button-group{padding-left:var(--dimension-space-100) !important}.roundedMidMD.sc-ds-toggle-button-group{padding-left:var(--dimension-space-100) !important;padding-right:var(--dimension-space-100) !important}.roundedFirstSM.sc-ds-toggle-button-group{padding-right:var(--dimension-space-075) !important}.roundedLastSM.sc-ds-toggle-button-group{padding-left:var(--dimension-space-075) !important}.roundedMidSM.sc-ds-toggle-button-group{padding-left:var(--dimension-space-075) !important;padding-right:var(--dimension-space-075) !important}`;const g=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.items=[];this.value="";this.elevation="elevated";this.size="md";this.rounded=false}handleItemChange(t){if(t===this.value)return;this.value=t;this.dsChange.emit(t)}render(){const t=this.items;const o=t.length;const r=this.elevation;const i=r.charAt(0).toUpperCase()+r.slice(1);const d=this.background;const n=r==="none";const a={group:true,[`group${i}`]:true,groupRounded:this.rounded};return e(s,{key:"177fcde80791d2c5a607f8788653589f0c1041ea"},e("div",{key:"3c811f1ec76b010adc14e9e98f2d0277e89866d7",class:a,role:"group"},t.map(((t,s)=>{const i=s===0;const a=s===o-1;const g=!i&&!a;const u=t.id===this.value;const p=!!t.icon&&!t.label;const l=this.rounded&&!p&&this.size!=="xs";const c=this.size.toUpperCase();const m={item:true,first:i,last:a,middle:g,itemShort:n,itemPressed:n&&u,[`roundedFirst${c}`]:!!(l&&i),[`roundedLast${c}`]:!!(l&&a),[`roundedMid${c}`]:!!(l&&g)};const b={divider:true,dividerGhost:n,dividerGhostXS:n&&this.size==="xs",dividerGhostSM:n&&this.size==="sm"};return[s>0&&e("div",{class:b,"aria-hidden":"true"}),e("ds-toggle-button",{class:m,elevation:r,size:this.size,label:t.label,icon:t.icon,rounded:this.rounded,background:d,pressed:u,inactive:t.inactive,onDsChange:()=>this.handleItemChange(t.id)})]}))))}static get style(){return a()}},[2,"ds-toggle-button-group",{items:[16],value:[1025],elevation:[1],size:[1],rounded:[4],background:[1]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-toggle-button-group","ds-icon","ds-toggle-button"];t.forEach((t=>{switch(t){case"ds-toggle-button-group":if(!customElements.get(i(t))){customElements.define(i(t),g)}break;case"ds-icon":if(!customElements.get(i(t))){d()}break;case"ds-toggle-button":if(!customElements.get(i(t))){n()}break}}))}u();const p=g;const l=u;export{p as DsToggleButtonGroup,l as defineCustomElement};
-//# sourceMappingURL=ds-toggle-button-group.js.map

package/dist/components/ds-toggle-button-group.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["toggleButtonGroupCss","ToggleButtonGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","value","elevation","size","rounded","handleItemChange","id","dsChange","emit","render","count","length","elev","elevKey","charAt","toUpperCase","slice","bg","background","isGhost","groupCls","group","groupRounded","h","Host","key","class","role","map","item","i","isFirst","isLast","isMid","isPressed","isIconOnly","icon","label","needsRoundedCorrection","sizeKey","itemCls","first","last","middle","itemShort","itemPressed","dividerCls","divider","dividerGhost","dividerGhostXS","dividerGhostSM","pressed","inactive","onDsChange"],"sources":["src/wc/components/ToggleButtonGroup/ToggleButtonGroup.css?tag=ds-toggle-button-group&encapsulation=scoped","src/wc/components/ToggleButtonGroup/ToggleButtonGroup.tsx"],"sourcesContent":["/* ==========================================================================\n   ToggleButtonGroup — flush row of ds-toggle-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 — 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  /* Suppress scale-on-press to avoid gaps at the divider */\n}\n\n.item:active {\n  transform: none !important;\n}\n\n/* ── Divider ──────────────────────────────────────────────────────────────── */\n\n/* Full-height divider (elevated / flat / floating) */\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\n/* Ghost hover-fade: hide divider adjacent to hovered ghost button */\n.item:hover + .dividerGhost,\n.dividerGhost:has(+ .item:hover) { opacity: 0; }\n\n/* Ghost pressed-state: hide divider adjacent to selected button */\n.itemPressed + .dividerGhost,\n.dividerGhost:has(+ .itemPressed) { 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.group .itemPressed {\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.groupRounded .first.itemPressed {\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.groupRounded .last.itemPressed {\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","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ToggleGroupElevation  = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ToggleGroupSize       = 'md' | 'sm' | 'xs';\nexport type ToggleGroupBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nexport interface ToggleGroupItem {\n  id: string;\n  label?: string;\n  /** Icon name for <ds-icon>. */\n  icon?: string;\n  inactive?: boolean;\n}\n\n@Component({\n  tag: 'ds-toggle-button-group',\n  styleUrl: 'ToggleButtonGroup.css',\n  scoped: true,\n})\nexport class ToggleButtonGroup {\n  /**\n   * Array of item descriptors. Set via JS property.\n   * @example el.items = [{ id: 'list', label: 'List' }, { id: 'grid', icon: 'GridView' }];\n   */\n  @Prop() items: ToggleGroupItem[] = [];\n\n  /** ID of the currently selected / pressed item. */\n  @Prop({ mutable: true }) value: string = '';\n\n  /** Chrome level for the group container. */\n  @Prop() elevation: ToggleGroupElevation = 'elevated';\n\n  /** Size passed to each ds-toggle-button. */\n  @Prop() size: ToggleGroupSize = 'md';\n\n  /** Pill shape for group + buttons. */\n  @Prop() rounded: boolean = false;\n\n  /** Parent surface context. */\n  @Prop() background: ToggleGroupBackground | undefined;\n\n  /** Emits the id of the newly selected item. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  private handleItemChange(id: string) {\n    if (id === this.value) return;\n    this.value = id;\n    this.dsChange.emit(id);\n  }\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 bg = this.background;\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 isPressed = item.id === this.value;\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' | 'XS';\n\n            const itemCls: Record<string, boolean> = {\n              item: true,\n              first: isFirst,\n              last: isLast,\n              middle: isMid,\n              itemShort: isGhost,\n              itemPressed: isGhost && isPressed,\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            };\n\n            return [\n              i > 0 && (\n                <div class={dividerCls} aria-hidden=\"true\" />\n              ),\n              <ds-toggle-button\n                class={itemCls}\n                elevation={elev}\n                size={this.size}\n                label={item.label}\n                icon={item.icon}\n                rounded={this.rounded}\n                background={bg}\n                pressed={isPressed}\n                inactive={item.inactive}\n                onDsChange={() => this.handleItemChange(item.id)}\n              />,\n            ];\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qIAAA,MAAMA,EAAuB,IAAM,yuH,MCmBtBC,EAAiBC,EAAA,MAAAD,UAAAE,EAL9B,WAAAC,CAAAC,G,6EAUUC,KAAAC,MAA2B,GAGVD,KAAAE,MAAgB,GAGjCF,KAAAG,UAAkC,WAGlCH,KAAAI,KAAwB,KAGxBJ,KAAAK,QAAmB,KAiF5B,CAzES,gBAAAC,CAAiBC,GACvB,GAAIA,IAAOP,KAAKE,MAAO,OACvBF,KAAKE,MAAQK,EACbP,KAAKQ,SAASC,KAAKF,E,CAGrB,MAAAG,GACE,MAAMT,EAAQD,KAAKC,MACnB,MAAMU,EAAQV,EAAMW,OACpB,MAAMC,EAAOb,KAAKG,UAClB,MAAMW,EAAUD,EAAKE,OAAO,GAAGC,cAAgBH,EAAKI,MAAM,GAC1D,MAAMC,EAAKlB,KAAKmB,WAChB,MAAMC,EAAUP,IAAS,OAEzB,MAAMQ,EAAoC,CACxCC,MAAO,KACP,CAAC,QAAQR,KAAY,KACrBS,aAAcvB,KAAKK,SAGrB,OACEmB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAON,EAAUO,KAAK,SACxB3B,EAAM4B,KAAI,CAACC,EAAMC,KAChB,MAAMC,EAAUD,IAAM,EACtB,MAAME,EAASF,IAAMpB,EAAQ,EAC7B,MAAMuB,GAASF,IAAYC,EAC3B,MAAME,EAAYL,EAAKvB,KAAOP,KAAKE,MACnC,MAAMkC,IAAeN,EAAKO,OAASP,EAAKQ,MACxC,MAAMC,EAAyBvC,KAAKK,UAAY+B,GAAcpC,KAAKI,OAAS,KAC5E,MAAMoC,EAAUxC,KAAKI,KAAKY,cAE1B,MAAMyB,EAAmC,CACvCX,KAAM,KACNY,MAAOV,EACPW,KAAMV,EACNW,OAAQV,EACRW,UAAWzB,EACX0B,YAAa1B,GAAWe,EACxB,CAAC,eAAeK,QAAeD,GAA0BP,GACzD,CAAC,cAAcQ,QAAeD,GAA0BN,GACxD,CAAC,aAAaO,QAAeD,GAA0BL,IAGzD,MAAMa,EAAsC,CAC1CC,QAAS,KACTC,aAAc7B,EACd8B,eAAgB9B,GAAWpB,KAAKI,OAAS,KACzC+C,eAAgB/B,GAAWpB,KAAKI,OAAS,MAG3C,MAAO,CACL2B,EAAI,GACFP,EAAA,OAAKG,MAAOoB,EAAU,cAAc,SAEtCvB,EAAA,oBACEG,MAAOc,EACPtC,UAAWU,EACXT,KAAMJ,KAAKI,KACXkC,MAAOR,EAAKQ,MACZD,KAAMP,EAAKO,KACXhC,QAASL,KAAKK,QACdc,WAAYD,EACZkC,QAASjB,EACTkB,SAAUvB,EAAKuB,SACfC,WAAY,IAAMtD,KAAKM,iBAAiBwB,EAAKvB,MAEhD,K","ignoreList":[]}

package/dist/components/ds-toggle-button.js

@@ -1,2 +0,0 @@
-import{T as o,d as s}from"./p-C0CUGiLm.js";const t=o;const m=s;export{t as DsToggleButton,m as defineCustomElement};
-//# sourceMappingURL=ds-toggle-button.js.map

package/dist/components/ds-toggle-button.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components/p-BPMJx63I.js

@@ -1,2 +0,0 @@
-const n="--dimension-iconography-md";const o="--dimension-iconography-sm";const i="--dimension-iconography-xs";const t="--dimension-menu-width-xs";const a="--dimension-panel-width-md";const e="--dimension-size-300";const s="--dimension-space-050";const c="--effect-animation-delay-long-2";const m="--effect-animation-delay-medium-1";const d="--effect-animation-duration-medium-1";const r="--effect-animation-duration-short-3";const h="--effect-motion-short-2";const l="--effect-motion-short-3";const p={space050:s,size300:e,iconographyMd:n,iconographySm:o,iconographyXs:i,panelWidthMd:a,menuWidthXs:t,motionShort2:h,motionShort3:l,animationDurationShort3:r,animationDurationMedium1:d,animationDelayMedium1:m,animationDelayLong2:c,menuFallbackHeight:"calc(var(--dimension-size-base) * 20)",tooltipFallbackWidth:"calc(var(--dimension-size-800) + var(--dimension-size-200))"};const f={space050:`var(${s})`};export{p as T,f as a};
-//# sourceMappingURL=p-BPMJx63I.js.map

package/dist/components/p-BPMJx63I.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dimensionIconographyMd","dimensionIconographySm","dimensionIconographyXs","dimensionMenuWidthXs","dimensionPanelWidthMd","dimensionSize300","dimensionSpace050","effectAnimationDelayLong2","effectAnimationDelayMedium1","effectAnimationDurationMedium1","effectAnimationDurationShort3","effectMotionShort2","effectMotionShort3","TOKEN_DEFAULTS","space050","size300","iconographyMd","iconographySm","iconographyXs","panelWidthMd","menuWidthXs","motionShort2","motionShort3","animationDurationShort3","animationDurationMedium1","animationDelayMedium1","animationDelayLong2","menuFallbackHeight","tooltipFallbackWidth","TOKEN_CSS_LENGTHS"],"sources":["node_modules/@ds-mo/tokens/dist/index.mjs","src/wc/utils/token-defaults.ts"],"sourcesContent":["export const colorAlwaysDarkBackground = '--color-always-dark-background';\nexport const colorAlwaysDarkBorderBoldAi = '--color-always-dark-border-bold-ai';\nexport const colorAlwaysDarkBorderBoldBrand = '--color-always-dark-border-bold-brand';\nexport const colorAlwaysDarkBorderBoldCaution = '--color-always-dark-border-bold-caution';\nexport const colorAlwaysDarkBorderBoldGuide = '--color-always-dark-border-bold-guide';\nexport const colorAlwaysDarkBorderBoldNegative = '--color-always-dark-border-bold-negative';\nexport const colorAlwaysDarkBorderBoldNeutral = '--color-always-dark-border-bold-neutral';\nexport const colorAlwaysDarkBorderBoldPositive = '--color-always-dark-border-bold-positive';\nexport const colorAlwaysDarkBorderBoldWalkthrough = '--color-always-dark-border-bold-walkthrough';\nexport const colorAlwaysDarkBorderBoldWarning = '--color-always-dark-border-bold-warning';\nexport const colorAlwaysDarkBorderFaintAi = '--color-always-dark-border-faint-ai';\nexport const colorAlwaysDarkBorderFaintBrand = '--color-always-dark-border-faint-brand';\nexport const colorAlwaysDarkBorderFaintCaution = '--color-always-dark-border-faint-caution';\nexport const colorAlwaysDarkBorderFaintGuide = '--color-always-dark-border-faint-guide';\nexport const colorAlwaysDarkBorderFaintNegative = '--color-always-dark-border-faint-negative';\nexport const colorAlwaysDarkBorderFaintNeutral = '--color-always-dark-border-faint-neutral';\nexport const colorAlwaysDarkBorderFaintPositive = '--color-always-dark-border-faint-positive';\nexport const colorAlwaysDarkBorderFaintWalkthrough = '--color-always-dark-border-faint-walkthrough';\nexport const colorAlwaysDarkBorderFaintWarning = '--color-always-dark-border-faint-warning';\nexport const colorAlwaysDarkBorderMediumAi = '--color-always-dark-border-medium-ai';\nexport const colorAlwaysDarkBorderMediumBrand = '--color-always-dark-border-medium-brand';\nexport const colorAlwaysDarkBorderMediumCaution = '--color-always-dark-border-medium-caution';\nexport const colorAlwaysDarkBorderMediumGuide = '--color-always-dark-border-medium-guide';\nexport const colorAlwaysDarkBorderMediumNegative = '--color-always-dark-border-medium-negative';\nexport const colorAlwaysDarkBorderMediumNeutral = '--color-always-dark-border-medium-neutral';\nexport const colorAlwaysDarkBorderMediumPositive = '--color-always-dark-border-medium-positive';\nexport const colorAlwaysDarkBorderMediumWalkthrough = '--color-always-dark-border-medium-walkthrough';\nexport const colorAlwaysDarkBorderMediumWarning = '--color-always-dark-border-medium-warning';\nexport const colorAlwaysDarkBorderPrimary = '--color-always-dark-border-primary';\nexport const colorAlwaysDarkBorderSecondary = '--color-always-dark-border-secondary';\nexport const colorAlwaysDarkBorderStrongAi = '--color-always-dark-border-strong-ai';\nexport const colorAlwaysDarkBorderStrongBrand = '--color-always-dark-border-strong-brand';\nexport const colorAlwaysDarkBorderStrongCaution = '--color-always-dark-border-strong-caution';\nexport const colorAlwaysDarkBorderStrongGuide = '--color-always-dark-border-strong-guide';\nexport const colorAlwaysDarkBorderStrongNegative = '--color-always-dark-border-strong-negative';\nexport const colorAlwaysDarkBorderStrongNeutral = '--color-always-dark-border-strong-neutral';\nexport const colorAlwaysDarkBorderStrongPositive = '--color-always-dark-border-strong-positive';\nexport const colorAlwaysDarkBorderStrongWalkthrough = '--color-always-dark-border-strong-walkthrough';\nexport const colorAlwaysDarkBorderStrongWarning = '--color-always-dark-border-strong-warning';\nexport const colorAlwaysDarkBorderTertiary = '--color-always-dark-border-tertiary';\nexport const colorAlwaysDarkDivider = '--color-always-dark-divider';\nexport const colorAlwaysDarkForegroundAi = '--color-always-dark-foreground-ai';\nexport const colorAlwaysDarkForegroundBrand = '--color-always-dark-foreground-brand';\nexport const colorAlwaysDarkForegroundCaution = '--color-always-dark-foreground-caution';\nexport const colorAlwaysDarkForegroundGuide = '--color-always-dark-foreground-guide';\nexport const colorAlwaysDarkForegroundNegative = '--color-always-dark-foreground-negative';\nexport const colorAlwaysDarkForegroundNeutral = '--color-always-dark-foreground-neutral';\nexport const colorAlwaysDarkForegroundPositive = '--color-always-dark-foreground-positive';\nexport const colorAlwaysDarkForegroundPrimary = '--color-always-dark-foreground-primary';\nexport const colorAlwaysDarkForegroundQuaternary = '--color-always-dark-foreground-quaternary';\nexport const colorAlwaysDarkForegroundSecondary = '--color-always-dark-foreground-secondary';\nexport const colorAlwaysDarkForegroundTertiary = '--color-always-dark-foreground-tertiary';\nexport const colorAlwaysDarkForegroundWalkthrough = '--color-always-dark-foreground-walkthrough';\nexport const colorAlwaysDarkForegroundWarning = '--color-always-dark-foreground-warning';\nexport const colorAlwaysDarkInteractionActive = '--color-always-dark-interaction-active';\nexport const colorAlwaysDarkInteractionFocus = '--color-always-dark-interaction-focus';\nexport const colorAlwaysDarkInteractionHover = '--color-always-dark-interaction-hover';\nexport const colorAlwaysDarkInteractionPressed = '--color-always-dark-interaction-pressed';\nexport const colorBackgroundBoldAi = '--color-background-bold-ai';\nexport const colorBackgroundBoldBrand = '--color-background-bold-brand';\nexport const colorBackgroundBoldCaution = '--color-background-bold-caution';\nexport const colorBackgroundBoldGuide = '--color-background-bold-guide';\nexport const colorBackgroundBoldNegative = '--color-background-bold-negative';\nexport const colorBackgroundBoldNeutral = '--color-background-bold-neutral';\nexport const colorBackgroundBoldPositive = '--color-background-bold-positive';\nexport const colorBackgroundBoldWalkthrough = '--color-background-bold-walkthrough';\nexport const colorBackgroundBoldWarning = '--color-background-bold-warning';\nexport const colorBackgroundFaintAi = '--color-background-faint-ai';\nexport const colorBackgroundFaintBrand = '--color-background-faint-brand';\nexport const colorBackgroundFaintCaution = '--color-background-faint-caution';\nexport const colorBackgroundFaintGuide = '--color-background-faint-guide';\nexport const colorBackgroundFaintNegative = '--color-background-faint-negative';\nexport const colorBackgroundFaintNeutral = '--color-background-faint-neutral';\nexport const colorBackgroundFaintPositive = '--color-background-faint-positive';\nexport const colorBackgroundFaintWalkthrough = '--color-background-faint-walkthrough';\nexport const colorBackgroundFaintWarning = '--color-background-faint-warning';\nexport const colorBackgroundMediumAi = '--color-background-medium-ai';\nexport const colorBackgroundMediumBrand = '--color-background-medium-brand';\nexport const colorBackgroundMediumCaution = '--color-background-medium-caution';\nexport const colorBackgroundMediumGuide = '--color-background-medium-guide';\nexport const colorBackgroundMediumNegative = '--color-background-medium-negative';\nexport const colorBackgroundMediumNeutral = '--color-background-medium-neutral';\nexport const colorBackgroundMediumPositive = '--color-background-medium-positive';\nexport const colorBackgroundMediumWalkthrough = '--color-background-medium-walkthrough';\nexport const colorBackgroundMediumWarning = '--color-background-medium-warning';\nexport const colorBackgroundPrimary = '--color-background-primary';\nexport const colorBackgroundSecondary = '--color-background-secondary';\nexport const colorBackgroundShade = '--color-background-shade';\nexport const colorBackgroundStrongAi = '--color-background-strong-ai';\nexport const colorBackgroundStrongBrand = '--color-background-strong-brand';\nexport const colorBackgroundStrongCaution = '--color-background-strong-caution';\nexport const colorBackgroundStrongGuide = '--color-background-strong-guide';\nexport const colorBackgroundStrongNegative = '--color-background-strong-negative';\nexport const colorBackgroundStrongNeutral = '--color-background-strong-neutral';\nexport const colorBackgroundStrongPositive = '--color-background-strong-positive';\nexport const colorBackgroundStrongWalkthrough = '--color-background-strong-walkthrough';\nexport const colorBackgroundStrongWarning = '--color-background-strong-warning';\nexport const colorBackgroundTranslucent = '--color-background-translucent';\nexport const colorBackgroundTransparent = '--color-background-transparent';\nexport const colorBorderBoldAi = '--color-border-bold-ai';\nexport const colorBorderBoldBrand = '--color-border-bold-brand';\nexport const colorBorderBoldCaution = '--color-border-bold-caution';\nexport const colorBorderBoldGuide = '--color-border-bold-guide';\nexport const colorBorderBoldNegative = '--color-border-bold-negative';\nexport const colorBorderBoldNeutral = '--color-border-bold-neutral';\nexport const colorBorderBoldPositive = '--color-border-bold-positive';\nexport const colorBorderBoldWalkthrough = '--color-border-bold-walkthrough';\nexport const colorBorderBoldWarning = '--color-border-bold-warning';\nexport const colorBorderFaintAi = '--color-border-faint-ai';\nexport const colorBorderFaintBrand = '--color-border-faint-brand';\nexport const colorBorderFaintCaution = '--color-border-faint-caution';\nexport const colorBorderFaintGuide = '--color-border-faint-guide';\nexport const colorBorderFaintNegative = '--color-border-faint-negative';\nexport const colorBorderFaintNeutral = '--color-border-faint-neutral';\nexport const colorBorderFaintPositive = '--color-border-faint-positive';\nexport const colorBorderFaintWalkthrough = '--color-border-faint-walkthrough';\nexport const colorBorderFaintWarning = '--color-border-faint-warning';\nexport const colorBorderMediumAi = '--color-border-medium-ai';\nexport const colorBorderMediumBrand = '--color-border-medium-brand';\nexport const colorBorderMediumCaution = '--color-border-medium-caution';\nexport const colorBorderMediumGuide = '--color-border-medium-guide';\nexport const colorBorderMediumNegative = '--color-border-medium-negative';\nexport const colorBorderMediumNeutral = '--color-border-medium-neutral';\nexport const colorBorderMediumPositive = '--color-border-medium-positive';\nexport const colorBorderMediumWalkthrough = '--color-border-medium-walkthrough';\nexport const colorBorderMediumWarning = '--color-border-medium-warning';\nexport const colorBorderOnBoldBackgroundPrimary = '--color-border-on-bold-background-primary';\nexport const colorBorderOnBoldBackgroundSecondary = '--color-border-on-bold-background-secondary';\nexport const colorBorderOnBoldBackgroundTertiary = '--color-border-on-bold-background-tertiary';\nexport const colorBorderOnMediumBackgroundPrimary = '--color-border-on-medium-background-primary';\nexport const colorBorderOnMediumBackgroundSecondary = '--color-border-on-medium-background-secondary';\nexport const colorBorderOnMediumBackgroundTertiary = '--color-border-on-medium-background-tertiary';\nexport const colorBorderOnStrongBackgroundPrimary = '--color-border-on-strong-background-primary';\nexport const colorBorderOnStrongBackgroundSecondary = '--color-border-on-strong-background-secondary';\nexport const colorBorderOnStrongBackgroundTertiary = '--color-border-on-strong-background-tertiary';\nexport const colorBorderOnTranslucentBackgroundPrimary = '--color-border-on-translucent-background-primary';\nexport const colorBorderOnTranslucentBackgroundSecondary = '--color-border-on-translucent-background-secondary';\nexport const colorBorderOnTranslucentBackgroundTertiary = '--color-border-on-translucent-background-tertiary';\nexport const colorBorderPrimary = '--color-border-primary';\nexport const colorBorderSecondary = '--color-border-secondary';\nexport const colorBorderStrongAi = '--color-border-strong-ai';\nexport const colorBorderStrongBrand = '--color-border-strong-brand';\nexport const colorBorderStrongCaution = '--color-border-strong-caution';\nexport const colorBorderStrongGuide = '--color-border-strong-guide';\nexport const colorBorderStrongNegative = '--color-border-strong-negative';\nexport const colorBorderStrongNeutral = '--color-border-strong-neutral';\nexport const colorBorderStrongPositive = '--color-border-strong-positive';\nexport const colorBorderStrongWalkthrough = '--color-border-strong-walkthrough';\nexport const colorBorderStrongWarning = '--color-border-strong-warning';\nexport const colorBorderTertiary = '--color-border-tertiary';\nexport const colorColorIntentBlueBoldBackground = '--color-color-intent-blue-bold-background';\nexport const colorColorIntentBlueBoldBorder = '--color-color-intent-blue-bold-border';\nexport const colorColorIntentBlueBoldForeground = '--color-color-intent-blue-bold-foreground';\nexport const colorColorIntentBlueFaintBackground = '--color-color-intent-blue-faint-background';\nexport const colorColorIntentBlueFaintBorder = '--color-color-intent-blue-faint-border';\nexport const colorColorIntentBlueFaintForeground = '--color-color-intent-blue-faint-foreground';\nexport const colorColorIntentBlueMediumBackground = '--color-color-intent-blue-medium-background';\nexport const colorColorIntentBlueMediumBorder = '--color-color-intent-blue-medium-border';\nexport const colorColorIntentBlueMediumForeground = '--color-color-intent-blue-medium-foreground';\nexport const colorColorIntentBlueStrongBackground = '--color-color-intent-blue-strong-background';\nexport const colorColorIntentBlueStrongBorder = '--color-color-intent-blue-strong-border';\nexport const colorColorIntentBlueStrongForeground = '--color-color-intent-blue-strong-foreground';\nexport const colorColorIntentCyanBoldBackground = '--color-color-intent-cyan-bold-background';\nexport const colorColorIntentCyanBoldBorder = '--color-color-intent-cyan-bold-border';\nexport const colorColorIntentCyanBoldForeground = '--color-color-intent-cyan-bold-foreground';\nexport const colorColorIntentCyanFaintBackground = '--color-color-intent-cyan-faint-background';\nexport const colorColorIntentCyanFaintBorder = '--color-color-intent-cyan-faint-border';\nexport const colorColorIntentCyanFaintForeground = '--color-color-intent-cyan-faint-foreground';\nexport const colorColorIntentCyanMediumBackground = '--color-color-intent-cyan-medium-background';\nexport const colorColorIntentCyanMediumBorder = '--color-color-intent-cyan-medium-border';\nexport const colorColorIntentCyanMediumForeground = '--color-color-intent-cyan-medium-foreground';\nexport const colorColorIntentCyanStrongBackground = '--color-color-intent-cyan-strong-background';\nexport const colorColorIntentCyanStrongBorder = '--color-color-intent-cyan-strong-border';\nexport const colorColorIntentCyanStrongForeground = '--color-color-intent-cyan-strong-foreground';\nexport const colorColorIntentGreenBoldBackground = '--color-color-intent-green-bold-background';\nexport const colorColorIntentGreenBoldBorder = '--color-color-intent-green-bold-border';\nexport const colorColorIntentGreenBoldForeground = '--color-color-intent-green-bold-foreground';\nexport const colorColorIntentGreenFaintBackground = '--color-color-intent-green-faint-background';\nexport const colorColorIntentGreenFaintBorder = '--color-color-intent-green-faint-border';\nexport const colorColorIntentGreenFaintForeground = '--color-color-intent-green-faint-foreground';\nexport const colorColorIntentGreenMediumBackground = '--color-color-intent-green-medium-background';\nexport const colorColorIntentGreenMediumBorder = '--color-color-intent-green-medium-border';\nexport const colorColorIntentGreenMediumForeground = '--color-color-intent-green-medium-foreground';\nexport const colorColorIntentGreenStrongBackground = '--color-color-intent-green-strong-background';\nexport const colorColorIntentGreenStrongBorder = '--color-color-intent-green-strong-border';\nexport const colorColorIntentGreenStrongForeground = '--color-color-intent-green-strong-foreground';\nexport const colorColorIntentGreyBoldBackground = '--color-color-intent-grey-bold-background';\nexport const colorColorIntentGreyBoldBorder = '--color-color-intent-grey-bold-border';\nexport const colorColorIntentGreyBoldForeground = '--color-color-intent-grey-bold-foreground';\nexport const colorColorIntentGreyFaintBackground = '--color-color-intent-grey-faint-background';\nexport const colorColorIntentGreyFaintBorder = '--color-color-intent-grey-faint-border';\nexport const colorColorIntentGreyFaintForeground = '--color-color-intent-grey-faint-foreground';\nexport const colorColorIntentGreyMediumBackground = '--color-color-intent-grey-medium-background';\nexport const colorColorIntentGreyMediumBorder = '--color-color-intent-grey-medium-border';\nexport const colorColorIntentGreyMediumForeground = '--color-color-intent-grey-medium-foreground';\nexport const colorColorIntentGreyStrongBackground = '--color-color-intent-grey-strong-background';\nexport const colorColorIntentGreyStrongBorder = '--color-color-intent-grey-strong-border';\nexport const colorColorIntentGreyStrongForeground = '--color-color-intent-grey-strong-foreground';\nexport const colorColorIntentInteractionOnBoldBackgroundFocus = '--color-color-intent-interaction-on-bold-background-focus';\nexport const colorColorIntentInteractionOnBoldBackgroundHover = '--color-color-intent-interaction-on-bold-background-hover';\nexport const colorColorIntentInteractionOnBoldBackgroundPressed = '--color-color-intent-interaction-on-bold-background-pressed';\nexport const colorColorIntentInteractionOnFaintBackgroundFocus = '--color-color-intent-interaction-on-faint-background-focus';\nexport const colorColorIntentInteractionOnFaintBackgroundHover = '--color-color-intent-interaction-on-faint-background-hover';\nexport const colorColorIntentInteractionOnFaintBackgroundPressed = '--color-color-intent-interaction-on-faint-background-pressed';\nexport const colorColorIntentInteractionOnMediumBackgroundFocus = '--color-color-intent-interaction-on-medium-background-focus';\nexport const colorColorIntentInteractionOnMediumBackgroundHover = '--color-color-intent-interaction-on-medium-background-hover';\nexport const colorColorIntentInteractionOnMediumBackgroundPressed = '--color-color-intent-interaction-on-medium-background-pressed';\nexport const colorColorIntentInteractionOnStrongBackgroundFocus = '--color-color-intent-interaction-on-strong-background-focus';\nexport const colorColorIntentInteractionOnStrongBackgroundHover = '--color-color-intent-interaction-on-strong-background-hover';\nexport const colorColorIntentInteractionOnStrongBackgroundPressed = '--color-color-intent-interaction-on-strong-background-pressed';\nexport const colorColorIntentMagentaBoldBackground = '--color-color-intent-magenta-bold-background';\nexport const colorColorIntentMagentaBoldBorder = '--color-color-intent-magenta-bold-border';\nexport const colorColorIntentMagentaBoldForeground = '--color-color-intent-magenta-bold-foreground';\nexport const colorColorIntentMagentaFaintBackground = '--color-color-intent-magenta-faint-background';\nexport const colorColorIntentMagentaFaintBorder = '--color-color-intent-magenta-faint-border';\nexport const colorColorIntentMagentaFaintForeground = '--color-color-intent-magenta-faint-foreground';\nexport const colorColorIntentMagentaMediumBackground = '--color-color-intent-magenta-medium-background';\nexport const colorColorIntentMagentaMediumBorder = '--color-color-intent-magenta-medium-border';\nexport const colorColorIntentMagentaMediumForeground = '--color-color-intent-magenta-medium-foreground';\nexport const colorColorIntentMagentaStrongBackground = '--color-color-intent-magenta-strong-background';\nexport const colorColorIntentMagentaStrongBorder = '--color-color-intent-magenta-strong-border';\nexport const colorColorIntentMagentaStrongForeground = '--color-color-intent-magenta-strong-foreground';\nexport const colorColorIntentOliveBoldBackground = '--color-color-intent-olive-bold-background';\nexport const colorColorIntentOliveBoldBorder = '--color-color-intent-olive-bold-border';\nexport const colorColorIntentOliveBoldForeground = '--color-color-intent-olive-bold-foreground';\nexport const colorColorIntentOliveFaintBackground = '--color-color-intent-olive-faint-background';\nexport const colorColorIntentOliveFaintBorder = '--color-color-intent-olive-faint-border';\nexport const colorColorIntentOliveFaintForeground = '--color-color-intent-olive-faint-foreground';\nexport const colorColorIntentOliveMediumBackground = '--color-color-intent-olive-medium-background';\nexport const colorColorIntentOliveMediumBorder = '--color-color-intent-olive-medium-border';\nexport const colorColorIntentOliveMediumForeground = '--color-color-intent-olive-medium-foreground';\nexport const colorColorIntentOliveStrongBackground = '--color-color-intent-olive-strong-background';\nexport const colorColorIntentOliveStrongBorder = '--color-color-intent-olive-strong-border';\nexport const colorColorIntentOliveStrongForeground = '--color-color-intent-olive-strong-foreground';\nexport const colorColorIntentOrangeBoldBackground = '--color-color-intent-orange-bold-background';\nexport const colorColorIntentOrangeBoldBorder = '--color-color-intent-orange-bold-border';\nexport const colorColorIntentOrangeBoldForeground = '--color-color-intent-orange-bold-foreground';\nexport const colorColorIntentOrangeFaintBackground = '--color-color-intent-orange-faint-background';\nexport const colorColorIntentOrangeFaintBorder = '--color-color-intent-orange-faint-border';\nexport const colorColorIntentOrangeFaintForeground = '--color-color-intent-orange-faint-foreground';\nexport const colorColorIntentOrangeMediumBackground = '--color-color-intent-orange-medium-background';\nexport const colorColorIntentOrangeMediumBorder = '--color-color-intent-orange-medium-border';\nexport const colorColorIntentOrangeMediumForeground = '--color-color-intent-orange-medium-foreground';\nexport const colorColorIntentOrangeStrongBackground = '--color-color-intent-orange-strong-background';\nexport const colorColorIntentOrangeStrongBorder = '--color-color-intent-orange-strong-border';\nexport const colorColorIntentOrangeStrongForeground = '--color-color-intent-orange-strong-foreground';\nexport const colorColorIntentPinkBoldBackground = '--color-color-intent-pink-bold-background';\nexport const colorColorIntentPinkBoldBorder = '--color-color-intent-pink-bold-border';\nexport const colorColorIntentPinkBoldForeground = '--color-color-intent-pink-bold-foreground';\nexport const colorColorIntentPinkFaintBackground = '--color-color-intent-pink-faint-background';\nexport const colorColorIntentPinkFaintBorder = '--color-color-intent-pink-faint-border';\nexport const colorColorIntentPinkFaintForeground = '--color-color-intent-pink-faint-foreground';\nexport const colorColorIntentPinkMediumBackground = '--color-color-intent-pink-medium-background';\nexport const colorColorIntentPinkMediumBorder = '--color-color-intent-pink-medium-border';\nexport const colorColorIntentPinkMediumForeground = '--color-color-intent-pink-medium-foreground';\nexport const colorColorIntentPinkStrongBackground = '--color-color-intent-pink-strong-background';\nexport const colorColorIntentPinkStrongBorder = '--color-color-intent-pink-strong-border';\nexport const colorColorIntentPinkStrongForeground = '--color-color-intent-pink-strong-foreground';\nexport const colorColorIntentPurpleBoldBackground = '--color-color-intent-purple-bold-background';\nexport const colorColorIntentPurpleBoldBorder = '--color-color-intent-purple-bold-border';\nexport const colorColorIntentPurpleBoldForeground = '--color-color-intent-purple-bold-foreground';\nexport const colorColorIntentPurpleFaintBackground = '--color-color-intent-purple-faint-background';\nexport const colorColorIntentPurpleFaintBorder = '--color-color-intent-purple-faint-border';\nexport const colorColorIntentPurpleFaintForeground = '--color-color-intent-purple-faint-foreground';\nexport const colorColorIntentPurpleMediumBackground = '--color-color-intent-purple-medium-background';\nexport const colorColorIntentPurpleMediumBorder = '--color-color-intent-purple-medium-border';\nexport const colorColorIntentPurpleMediumForeground = '--color-color-intent-purple-medium-foreground';\nexport const colorColorIntentPurpleStrongBackground = '--color-color-intent-purple-strong-background';\nexport const colorColorIntentPurpleStrongBorder = '--color-color-intent-purple-strong-border';\nexport const colorColorIntentPurpleStrongForeground = '--color-color-intent-purple-strong-foreground';\nexport const colorColorIntentRedBoldBackground = '--color-color-intent-red-bold-background';\nexport const colorColorIntentRedBoldBorder = '--color-color-intent-red-bold-border';\nexport const colorColorIntentRedBoldForeground = '--color-color-intent-red-bold-foreground';\nexport const colorColorIntentRedFaintBackground = '--color-color-intent-red-faint-background';\nexport const colorColorIntentRedFaintBorder = '--color-color-intent-red-faint-border';\nexport const colorColorIntentRedFaintForeground = '--color-color-intent-red-faint-foreground';\nexport const colorColorIntentRedMediumBackground = '--color-color-intent-red-medium-background';\nexport const colorColorIntentRedMediumBorder = '--color-color-intent-red-medium-border';\nexport const colorColorIntentRedMediumForeground = '--color-color-intent-red-medium-foreground';\nexport const colorColorIntentRedStrongBackground = '--color-color-intent-red-strong-background';\nexport const colorColorIntentRedStrongBorder = '--color-color-intent-red-strong-border';\nexport const colorColorIntentRedStrongForeground = '--color-color-intent-red-strong-foreground';\nexport const colorColorIntentTealBoldBackground = '--color-color-intent-teal-bold-background';\nexport const colorColorIntentTealBoldBorder = '--color-color-intent-teal-bold-border';\nexport const colorColorIntentTealBoldForeground = '--color-color-intent-teal-bold-foreground';\nexport const colorColorIntentTealFaintBackground = '--color-color-intent-teal-faint-background';\nexport const colorColorIntentTealFaintBorder = '--color-color-intent-teal-faint-border';\nexport const colorColorIntentTealFaintForeground = '--color-color-intent-teal-faint-foreground';\nexport const colorColorIntentTealMediumBackground = '--color-color-intent-teal-medium-background';\nexport const colorColorIntentTealMediumBorder = '--color-color-intent-teal-medium-border';\nexport const colorColorIntentTealMediumForeground = '--color-color-intent-teal-medium-foreground';\nexport const colorColorIntentTealStrongBackground = '--color-color-intent-teal-strong-background';\nexport const colorColorIntentTealStrongBorder = '--color-color-intent-teal-strong-border';\nexport const colorColorIntentTealStrongForeground = '--color-color-intent-teal-strong-foreground';\nexport const colorColorIntentYellowBoldBackground = '--color-color-intent-yellow-bold-background';\nexport const colorColorIntentYellowBoldBorder = '--color-color-intent-yellow-bold-border';\nexport const colorColorIntentYellowBoldForeground = '--color-color-intent-yellow-bold-foreground';\nexport const colorColorIntentYellowFaintBackground = '--color-color-intent-yellow-faint-background';\nexport const colorColorIntentYellowFaintBorder = '--color-color-intent-yellow-faint-border';\nexport const colorColorIntentYellowFaintForeground = '--color-color-intent-yellow-faint-foreground';\nexport const colorColorIntentYellowMediumBackground = '--color-color-intent-yellow-medium-background';\nexport const colorColorIntentYellowMediumBorder = '--color-color-intent-yellow-medium-border';\nexport const colorColorIntentYellowMediumForeground = '--color-color-intent-yellow-medium-foreground';\nexport const colorColorIntentYellowStrongBackground = '--color-color-intent-yellow-strong-background';\nexport const colorColorIntentYellowStrongBorder = '--color-color-intent-yellow-strong-border';\nexport const colorColorIntentYellowStrongForeground = '--color-color-intent-yellow-strong-foreground';\nexport const colorDataCategory1 = '--color-data-category-1';\nexport const colorDataCategory10 = '--color-data-category-10';\nexport const colorDataCategory11 = '--color-data-category-11';\nexport const colorDataCategory12 = '--color-data-category-12';\nexport const colorDataCategory2 = '--color-data-category-2';\nexport const colorDataCategory3 = '--color-data-category-3';\nexport const colorDataCategory4 = '--color-data-category-4';\nexport const colorDataCategory5 = '--color-data-category-5';\nexport const colorDataCategory6 = '--color-data-category-6';\nexport const colorDataCategory7 = '--color-data-category-7';\nexport const colorDataCategory8 = '--color-data-category-8';\nexport const colorDataCategory9 = '--color-data-category-9';\nexport const colorDataDivergingBlueOrange51 = '--color-data-diverging-blue-orange-5-1';\nexport const colorDataDivergingBlueOrange52 = '--color-data-diverging-blue-orange-5-2';\nexport const colorDataDivergingBlueOrange53 = '--color-data-diverging-blue-orange-5-3';\nexport const colorDataDivergingBlueOrange54 = '--color-data-diverging-blue-orange-5-4';\nexport const colorDataDivergingBlueOrange55 = '--color-data-diverging-blue-orange-5-5';\nexport const colorDataDivergingBlueOrange71 = '--color-data-diverging-blue-orange-7-1';\nexport const colorDataDivergingBlueOrange72 = '--color-data-diverging-blue-orange-7-2';\nexport const colorDataDivergingBlueOrange73 = '--color-data-diverging-blue-orange-7-3';\nexport const colorDataDivergingBlueOrange74 = '--color-data-diverging-blue-orange-7-4';\nexport const colorDataDivergingBlueOrange75 = '--color-data-diverging-blue-orange-7-5';\nexport const colorDataDivergingBlueOrange76 = '--color-data-diverging-blue-orange-7-6';\nexport const colorDataDivergingBlueOrange77 = '--color-data-diverging-blue-orange-7-7';\nexport const colorDataDivergingBlueOrange91 = '--color-data-diverging-blue-orange-9-1';\nexport const colorDataDivergingBlueOrange92 = '--color-data-diverging-blue-orange-9-2';\nexport const colorDataDivergingBlueOrange93 = '--color-data-diverging-blue-orange-9-3';\nexport const colorDataDivergingBlueOrange94 = '--color-data-diverging-blue-orange-9-4';\nexport const colorDataDivergingBlueOrange95 = '--color-data-diverging-blue-orange-9-5';\nexport const colorDataDivergingBlueOrange96 = '--color-data-diverging-blue-orange-9-6';\nexport const colorDataDivergingBlueOrange97 = '--color-data-diverging-blue-orange-9-7';\nexport const colorDataDivergingBlueOrange98 = '--color-data-diverging-blue-orange-9-8';\nexport const colorDataDivergingBlueOrange99 = '--color-data-diverging-blue-orange-9-9';\nexport const colorDataMisc1 = '--color-data-misc-1';\nexport const colorDataMisc2 = '--color-data-misc-2';\nexport const colorDataMisc3 = '--color-data-misc-3';\nexport const colorDataMisc4 = '--color-data-misc-4';\nexport const colorDataSequenceBlue21 = '--color-data-sequence-blue-2-1';\nexport const colorDataSequenceBlue22 = '--color-data-sequence-blue-2-2';\nexport const colorDataSequenceBlue31 = '--color-data-sequence-blue-3-1';\nexport const colorDataSequenceBlue32 = '--color-data-sequence-blue-3-2';\nexport const colorDataSequenceBlue33 = '--color-data-sequence-blue-3-3';\nexport const colorDataSequenceBlue41 = '--color-data-sequence-blue-4-1';\nexport const colorDataSequenceBlue42 = '--color-data-sequence-blue-4-2';\nexport const colorDataSequenceBlue43 = '--color-data-sequence-blue-4-3';\nexport const colorDataSequenceBlue44 = '--color-data-sequence-blue-4-4';\nexport const colorDataWinLossLoss = '--color-data-win-loss-loss';\nexport const colorDataWinLossWin = '--color-data-win-loss-win';\nexport const colorDataWinLossWinAlt = '--color-data-win-loss-win-alt';\nexport const colorDividerDivider = '--color-divider-divider';\nexport const colorDividerOnBoldBackground = '--color-divider-on-bold-background';\nexport const colorDividerOnMediumBackground = '--color-divider-on-medium-background';\nexport const colorDividerOnStrongBackground = '--color-divider-on-strong-background';\nexport const colorDividerOnTranslucentBackground = '--color-divider-on-translucent-background';\nexport const colorDriverStatusBackgroundDriving = '--color-driver-status-background-driving';\nexport const colorDriverStatusBackgroundOffDuty = '--color-driver-status-background-off-duty';\nexport const colorDriverStatusBackgroundOnDuty = '--color-driver-status-background-on-duty';\nexport const colorDriverStatusBackgroundPersonalConveyance = '--color-driver-status-background-personal-conveyance';\nexport const colorDriverStatusBackgroundYardMove = '--color-driver-status-background-yard-move';\nexport const colorDriverStatusForeground = '--color-driver-status-foreground';\nexport const colorDriverStatusInteractionFocus = '--color-driver-status-interaction-focus';\nexport const colorDriverStatusInteractionHover = '--color-driver-status-interaction-hover';\nexport const colorDriverStatusInteractionPressed = '--color-driver-status-interaction-pressed';\nexport const colorElevationHighlight = '--color-elevation-highlight';\nexport const colorElevationShadow = '--color-elevation-shadow';\nexport const colorEntityClusterMarkerBackground = '--color-entity-cluster-marker-background';\nexport const colorEntityClusterMarkerForeground = '--color-entity-cluster-marker-foreground';\nexport const colorEntityClusterMarkerInteractionFocus = '--color-entity-cluster-marker-interaction-focus';\nexport const colorEntityClusterMarkerInteractionHover = '--color-entity-cluster-marker-interaction-hover';\nexport const colorEntityClusterMarkerInteractionPressed = '--color-entity-cluster-marker-interaction-pressed';\nexport const colorEntityMarkerBackgroundIdling = '--color-entity-marker-background-idling';\nexport const colorEntityMarkerBackgroundImmobilized = '--color-entity-marker-background-immobilized';\nexport const colorEntityMarkerBackgroundInMotion = '--color-entity-marker-background-in-motion';\nexport const colorEntityMarkerBackgroundStale = '--color-entity-marker-background-stale';\nexport const colorEntityMarkerBackgroundStationary = '--color-entity-marker-background-stationary';\nexport const colorEntityMarkerForeground = '--color-entity-marker-foreground';\nexport const colorEntityMarkerInteractionFocus = '--color-entity-marker-interaction-focus';\nexport const colorEntityMarkerInteractionHover = '--color-entity-marker-interaction-hover';\nexport const colorEntityMarkerInteractionPressed = '--color-entity-marker-interaction-pressed';\nexport const colorForegroundBoldAi = '--color-foreground-bold-ai';\nexport const colorForegroundBoldBrand = '--color-foreground-bold-brand';\nexport const colorForegroundBoldCaution = '--color-foreground-bold-caution';\nexport const colorForegroundBoldGuide = '--color-foreground-bold-guide';\nexport const colorForegroundBoldNegative = '--color-foreground-bold-negative';\nexport const colorForegroundBoldNeutral = '--color-foreground-bold-neutral';\nexport const colorForegroundBoldPositive = '--color-foreground-bold-positive';\nexport const colorForegroundBoldWalkthrough = '--color-foreground-bold-walkthrough';\nexport const colorForegroundBoldWarning = '--color-foreground-bold-warning';\nexport const colorForegroundFaintAi = '--color-foreground-faint-ai';\nexport const colorForegroundFaintBrand = '--color-foreground-faint-brand';\nexport const colorForegroundFaintCaution = '--color-foreground-faint-caution';\nexport const colorForegroundFaintGuide = '--color-foreground-faint-guide';\nexport const colorForegroundFaintNegative = '--color-foreground-faint-negative';\nexport const colorForegroundFaintNeutral = '--color-foreground-faint-neutral';\nexport const colorForegroundFaintPositive = '--color-foreground-faint-positive';\nexport const colorForegroundFaintWalkthrough = '--color-foreground-faint-walkthrough';\nexport const colorForegroundFaintWarning = '--color-foreground-faint-warning';\nexport const colorForegroundMediumAi = '--color-foreground-medium-ai';\nexport const colorForegroundMediumBrand = '--color-foreground-medium-brand';\nexport const colorForegroundMediumCaution = '--color-foreground-medium-caution';\nexport const colorForegroundMediumGuide = '--color-foreground-medium-guide';\nexport const colorForegroundMediumNegative = '--color-foreground-medium-negative';\nexport const colorForegroundMediumNeutral = '--color-foreground-medium-neutral';\nexport const colorForegroundMediumPositive = '--color-foreground-medium-positive';\nexport const colorForegroundMediumWalkthrough = '--color-foreground-medium-walkthrough';\nexport const colorForegroundMediumWarning = '--color-foreground-medium-warning';\nexport const colorForegroundOnBoldBackgroundPrimary = '--color-foreground-on-bold-background-primary';\nexport const colorForegroundOnBoldBackgroundQuaternary = '--color-foreground-on-bold-background-quaternary';\nexport const colorForegroundOnBoldBackgroundSecondary = '--color-foreground-on-bold-background-secondary';\nexport const colorForegroundOnBoldBackgroundTertiary = '--color-foreground-on-bold-background-tertiary';\nexport const colorForegroundOnMediumBackgroundPrimary = '--color-foreground-on-medium-background-primary';\nexport const colorForegroundOnMediumBackgroundQuaternary = '--color-foreground-on-medium-background-quaternary';\nexport const colorForegroundOnMediumBackgroundSecondary = '--color-foreground-on-medium-background-secondary';\nexport const colorForegroundOnMediumBackgroundTertiary = '--color-foreground-on-medium-background-tertiary';\nexport const colorForegroundOnStrongBackgroundPrimary = '--color-foreground-on-strong-background-primary';\nexport const colorForegroundOnStrongBackgroundQuaternary = '--color-foreground-on-strong-background-quaternary';\nexport const colorForegroundOnStrongBackgroundSecondary = '--color-foreground-on-strong-background-secondary';\nexport const colorForegroundOnStrongBackgroundTertiary = '--color-foreground-on-strong-background-tertiary';\nexport const colorForegroundOnTranslucentBackgroundPrimary = '--color-foreground-on-translucent-background-primary';\nexport const colorForegroundOnTranslucentBackgroundQuaternary = '--color-foreground-on-translucent-background-quaternary';\nexport const colorForegroundOnTranslucentBackgroundSecondary = '--color-foreground-on-translucent-background-secondary';\nexport const colorForegroundOnTranslucentBackgroundTertiary = '--color-foreground-on-translucent-background-tertiary';\nexport const colorForegroundPrimary = '--color-foreground-primary';\nexport const colorForegroundQuaternary = '--color-foreground-quaternary';\nexport const colorForegroundSecondary = '--color-foreground-secondary';\nexport const colorForegroundStrongAi = '--color-foreground-strong-ai';\nexport const colorForegroundStrongBrand = '--color-foreground-strong-brand';\nexport const colorForegroundStrongCaution = '--color-foreground-strong-caution';\nexport const colorForegroundStrongGuide = '--color-foreground-strong-guide';\nexport const colorForegroundStrongNegative = '--color-foreground-strong-negative';\nexport const colorForegroundStrongNeutral = '--color-foreground-strong-neutral';\nexport const colorForegroundStrongPositive = '--color-foreground-strong-positive';\nexport const colorForegroundStrongWalkthrough = '--color-foreground-strong-walkthrough';\nexport const colorForegroundStrongWarning = '--color-foreground-strong-warning';\nexport const colorForegroundTertiary = '--color-foreground-tertiary';\nexport const colorInteractionActive = '--color-interaction-active';\nexport const colorInteractionFocus = '--color-interaction-focus';\nexport const colorInteractionHover = '--color-interaction-hover';\nexport const colorInteractionOnBoldBackgroundActive = '--color-interaction-on-bold-background-active';\nexport const colorInteractionOnBoldBackgroundFocus = '--color-interaction-on-bold-background-focus';\nexport const colorInteractionOnBoldBackgroundHover = '--color-interaction-on-bold-background-hover';\nexport const colorInteractionOnBoldBackgroundPressed = '--color-interaction-on-bold-background-pressed';\nexport const colorInteractionOnMediumBackgroundActive = '--color-interaction-on-medium-background-active';\nexport const colorInteractionOnMediumBackgroundFocus = '--color-interaction-on-medium-background-focus';\nexport const colorInteractionOnMediumBackgroundHover = '--color-interaction-on-medium-background-hover';\nexport const colorInteractionOnMediumBackgroundPressed = '--color-interaction-on-medium-background-pressed';\nexport const colorInteractionOnStrongBackgroundActive = '--color-interaction-on-strong-background-active';\nexport const colorInteractionOnStrongBackgroundFocus = '--color-interaction-on-strong-background-focus';\nexport const colorInteractionOnStrongBackgroundHover = '--color-interaction-on-strong-background-hover';\nexport const colorInteractionOnStrongBackgroundPressed = '--color-interaction-on-strong-background-pressed';\nexport const colorInteractionOnTranslucentBackgroundActive = '--color-interaction-on-translucent-background-active';\nexport const colorInteractionOnTranslucentBackgroundFocus = '--color-interaction-on-translucent-background-focus';\nexport const colorInteractionOnTranslucentBackgroundHover = '--color-interaction-on-translucent-background-hover';\nexport const colorInteractionOnTranslucentBackgroundPressed = '--color-interaction-on-translucent-background-pressed';\nexport const colorInteractionPressed = '--color-interaction-pressed';\nexport const colorInvertedBackground = '--color-inverted-background';\nexport const colorInvertedBorderBoldAi = '--color-inverted-border-bold-ai';\nexport const colorInvertedBorderBoldBrand = '--color-inverted-border-bold-brand';\nexport const colorInvertedBorderBoldCaution = '--color-inverted-border-bold-caution';\nexport const colorInvertedBorderBoldGuide = '--color-inverted-border-bold-guide';\nexport const colorInvertedBorderBoldNegative = '--color-inverted-border-bold-negative';\nexport const colorInvertedBorderBoldNeutral = '--color-inverted-border-bold-neutral';\nexport const colorInvertedBorderBoldPositive = '--color-inverted-border-bold-positive';\nexport const colorInvertedBorderBoldWalkthrough = '--color-inverted-border-bold-walkthrough';\nexport const colorInvertedBorderBoldWarning = '--color-inverted-border-bold-warning';\nexport const colorInvertedBorderFaintAi = '--color-inverted-border-faint-ai';\nexport const colorInvertedBorderFaintBrand = '--color-inverted-border-faint-brand';\nexport const colorInvertedBorderFaintCaution = '--color-inverted-border-faint-caution';\nexport const colorInvertedBorderFaintGuide = '--color-inverted-border-faint-guide';\nexport const colorInvertedBorderFaintNegative = '--color-inverted-border-faint-negative';\nexport const colorInvertedBorderFaintNeutral = '--color-inverted-border-faint-neutral';\nexport const colorInvertedBorderFaintPositive = '--color-inverted-border-faint-positive';\nexport const colorInvertedBorderFaintWalkthrough = '--color-inverted-border-faint-walkthrough';\nexport const colorInvertedBorderFaintWarning = '--color-inverted-border-faint-warning';\nexport const colorInvertedBorderMediumAi = '--color-inverted-border-medium-ai';\nexport const colorInvertedBorderMediumBrand = '--color-inverted-border-medium-brand';\nexport const colorInvertedBorderMediumCaution = '--color-inverted-border-medium-caution';\nexport const colorInvertedBorderMediumGuide = '--color-inverted-border-medium-guide';\nexport const colorInvertedBorderMediumNegative = '--color-inverted-border-medium-negative';\nexport const colorInvertedBorderMediumNeutral = '--color-inverted-border-medium-neutral';\nexport const colorInvertedBorderMediumPositive = '--color-inverted-border-medium-positive';\nexport const colorInvertedBorderMediumWalkthrough = '--color-inverted-border-medium-walkthrough';\nexport const colorInvertedBorderMediumWarning = '--color-inverted-border-medium-warning';\nexport const colorInvertedBorderPrimary = '--color-inverted-border-primary';\nexport const colorInvertedBorderSecondary = '--color-inverted-border-secondary';\nexport const colorInvertedBorderStrongAi = '--color-inverted-border-strong-ai';\nexport const colorInvertedBorderStrongBrand = '--color-inverted-border-strong-brand';\nexport const colorInvertedBorderStrongCaution = '--color-inverted-border-strong-caution';\nexport const colorInvertedBorderStrongGuide = '--color-inverted-border-strong-guide';\nexport const colorInvertedBorderStrongNegative = '--color-inverted-border-strong-negative';\nexport const colorInvertedBorderStrongNeutral = '--color-inverted-border-strong-neutral';\nexport const colorInvertedBorderStrongPositive = '--color-inverted-border-strong-positive';\nexport const colorInvertedBorderStrongWalkthrough = '--color-inverted-border-strong-walkthrough';\nexport const colorInvertedBorderStrongWarning = '--color-inverted-border-strong-warning';\nexport const colorInvertedBorderTertiary = '--color-inverted-border-tertiary';\nexport const colorInvertedDivider = '--color-inverted-divider';\nexport const colorInvertedForegroundAi = '--color-inverted-foreground-ai';\nexport const colorInvertedForegroundBrand = '--color-inverted-foreground-brand';\nexport const colorInvertedForegroundCaution = '--color-inverted-foreground-caution';\nexport const colorInvertedForegroundGuide = '--color-inverted-foreground-guide';\nexport const colorInvertedForegroundNegative = '--color-inverted-foreground-negative';\nexport const colorInvertedForegroundNeutral = '--color-inverted-foreground-neutral';\nexport const colorInvertedForegroundPositive = '--color-inverted-foreground-positive';\nexport const colorInvertedForegroundPrimary = '--color-inverted-foreground-primary';\nexport const colorInvertedForegroundQuaternary = '--color-inverted-foreground-quaternary';\nexport const colorInvertedForegroundSecondary = '--color-inverted-foreground-secondary';\nexport const colorInvertedForegroundTertiary = '--color-inverted-foreground-tertiary';\nexport const colorInvertedForegroundWalkthrough = '--color-inverted-foreground-walkthrough';\nexport const colorInvertedForegroundWarning = '--color-inverted-foreground-warning';\nexport const colorInvertedInteractionActive = '--color-inverted-interaction-active';\nexport const colorInvertedInteractionFocus = '--color-inverted-interaction-focus';\nexport const colorInvertedInteractionHover = '--color-inverted-interaction-hover';\nexport const colorInvertedInteractionPressed = '--color-inverted-interaction-pressed';\nexport const colorLocationMarkerBackgroundBrand = '--color-location-marker-background-brand';\nexport const colorLocationMarkerBackgroundCaution = '--color-location-marker-background-caution';\nexport const colorLocationMarkerBackgroundNegative = '--color-location-marker-background-negative';\nexport const colorLocationMarkerBackgroundNeutral = '--color-location-marker-background-neutral';\nexport const colorLocationMarkerBackgroundPositive = '--color-location-marker-background-positive';\nexport const colorLocationMarkerBackgroundWarning = '--color-location-marker-background-warning';\nexport const colorLocationMarkerForeground = '--color-location-marker-foreground';\nexport const colorLocationMarkerInteractionFocus = '--color-location-marker-interaction-focus';\nexport const colorLocationMarkerInteractionHover = '--color-location-marker-interaction-hover';\nexport const colorLocationMarkerInteractionPressed = '--color-location-marker-interaction-pressed';\nexport const colorMediaBackground = '--color-media-background';\nexport const colorMediaBorderPrimary = '--color-media-border-primary';\nexport const colorMediaBorderSecondary = '--color-media-border-secondary';\nexport const colorMediaBorderTertiary = '--color-media-border-tertiary';\nexport const colorMediaDivider = '--color-media-divider';\nexport const colorMediaForegroundPrimary = '--color-media-foreground-primary';\nexport const colorMediaForegroundQuaternary = '--color-media-foreground-quaternary';\nexport const colorMediaForegroundSecondary = '--color-media-foreground-secondary';\nexport const colorMediaForegroundTertiary = '--color-media-foreground-tertiary';\nexport const colorMediaInteractionActive = '--color-media-interaction-active';\nexport const colorMediaInteractionFocus = '--color-media-interaction-focus';\nexport const colorMediaInteractionHover = '--color-media-interaction-hover';\nexport const colorMediaInteractionPressed = '--color-media-interaction-pressed';\nexport const colorNavigationBackground = '--color-navigation-background';\nexport const colorNavigationBorderPrimary = '--color-navigation-border-primary';\nexport const colorNavigationBorderSecondary = '--color-navigation-border-secondary';\nexport const colorNavigationBorderTertiary = '--color-navigation-border-tertiary';\nexport const colorNavigationDivider = '--color-navigation-divider';\nexport const colorNavigationForegroundBrand = '--color-navigation-foreground-brand';\nexport const colorNavigationForegroundPrimary = '--color-navigation-foreground-primary';\nexport const colorNavigationForegroundQuaternary = '--color-navigation-foreground-quaternary';\nexport const colorNavigationForegroundSecondary = '--color-navigation-foreground-secondary';\nexport const colorNavigationForegroundTertiary = '--color-navigation-foreground-tertiary';\nexport const colorNavigationInteractionActive = '--color-navigation-interaction-active';\nexport const colorNavigationInteractionFocus = '--color-navigation-interaction-focus';\nexport const colorNavigationInteractionHover = '--color-navigation-interaction-hover';\nexport const colorNavigationInteractionPressed = '--color-navigation-interaction-pressed';\nexport const colorReferenceBlack0 = '--color-reference-black-0';\nexport const colorReferenceBlack10 = '--color-reference-black-10';\nexport const colorReferenceBlack100 = '--color-reference-black-100';\nexport const colorReferenceBlack15 = '--color-reference-black-15';\nexport const colorReferenceBlack20 = '--color-reference-black-20';\nexport const colorReferenceBlack25 = '--color-reference-black-25';\nexport const colorReferenceBlack30 = '--color-reference-black-30';\nexport const colorReferenceBlack35 = '--color-reference-black-35';\nexport const colorReferenceBlack40 = '--color-reference-black-40';\nexport const colorReferenceBlack45 = '--color-reference-black-45';\nexport const colorReferenceBlack5 = '--color-reference-black-5';\nexport const colorReferenceBlack50 = '--color-reference-black-50';\nexport const colorReferenceBlack55 = '--color-reference-black-55';\nexport const colorReferenceBlack60 = '--color-reference-black-60';\nexport const colorReferenceBlack65 = '--color-reference-black-65';\nexport const colorReferenceBlack70 = '--color-reference-black-70';\nexport const colorReferenceBlack75 = '--color-reference-black-75';\nexport const colorReferenceBlack80 = '--color-reference-black-80';\nexport const colorReferenceBlack85 = '--color-reference-black-85';\nexport const colorReferenceBlack90 = '--color-reference-black-90';\nexport const colorReferenceBlack95 = '--color-reference-black-95';\nexport const colorReferenceDarkBlue250L27C05Faint = '--color-reference-dark-blue-250-l27-c05-faint';\nexport const colorReferenceDarkBlue250L50C17Medium = '--color-reference-dark-blue-250-l50-c17-medium';\nexport const colorReferenceDarkBlue250L65C20Bold = '--color-reference-dark-blue-250-l65-c20-bold';\nexport const colorReferenceDarkBlue250L91C05Strong = '--color-reference-dark-blue-250-l91-c05-strong';\nexport const colorReferenceDarkCyan215L27C05Faint = '--color-reference-dark-cyan-215-l27-c05-faint';\nexport const colorReferenceDarkCyan215L50C11Medium = '--color-reference-dark-cyan-215-l50-c11-medium';\nexport const colorReferenceDarkCyan215L70C15Bold = '--color-reference-dark-cyan-215-l70-c15-bold';\nexport const colorReferenceDarkCyan215L92C07Strong = '--color-reference-dark-cyan-215-l92-c07-strong';\nexport const colorReferenceDarkGreen145L27C05Faint = '--color-reference-dark-green-145-l27-c05-faint';\nexport const colorReferenceDarkGreen145L50C17Medium = '--color-reference-dark-green-145-l50-c17-medium';\nexport const colorReferenceDarkGreen145L70C19Bold = '--color-reference-dark-green-145-l70-c19-bold';\nexport const colorReferenceDarkGreen145L93C06Strong = '--color-reference-dark-green-145-l93-c06-strong';\nexport const colorReferenceDarkMagenta325L28C05Faint = '--color-reference-dark-magenta-325-l28-c05-faint';\nexport const colorReferenceDarkMagenta325L51C17Medium = '--color-reference-dark-magenta-325-l51-c17-medium';\nexport const colorReferenceDarkMagenta325L67C20Bold = '--color-reference-dark-magenta-325-l67-c20-bold';\nexport const colorReferenceDarkMagenta325L90C08Strong = '--color-reference-dark-magenta-325-l90-c08-strong';\nexport const colorReferenceDarkOlive115L27C05Faint = '--color-reference-dark-olive-115-l27-c05-faint';\nexport const colorReferenceDarkOlive115L51C13Medium = '--color-reference-dark-olive-115-l51-c13-medium';\nexport const colorReferenceDarkOlive115L75C19Bold = '--color-reference-dark-olive-115-l75-c19-bold';\nexport const colorReferenceDarkOlive115L93C05Strong = '--color-reference-dark-olive-115-l93-c05-strong';\nexport const colorReferenceDarkOrange60L28C05Faint = '--color-reference-dark-orange-60-l28-c05-faint';\nexport const colorReferenceDarkOrange60L51C13Medium = '--color-reference-dark-orange-60-l51-c13-medium';\nexport const colorReferenceDarkOrange60L75C20Bold = '--color-reference-dark-orange-60-l75-c20-bold';\nexport const colorReferenceDarkOrange60L92C06Strong = '--color-reference-dark-orange-60-l92-c06-strong';\nexport const colorReferenceDarkPink0L28C05Faint = '--color-reference-dark-pink-0-l28-c05-faint';\nexport const colorReferenceDarkPink0L52C17Medium = '--color-reference-dark-pink-0-l52-c17-medium';\nexport const colorReferenceDarkPink0L68C20Bold = '--color-reference-dark-pink-0-l68-c20-bold';\nexport const colorReferenceDarkPink0L92C05Strong = '--color-reference-dark-pink-0-l92-c05-strong';\nexport const colorReferenceDarkPurple290L28C05Faint = '--color-reference-dark-purple-290-l28-c05-faint';\nexport const colorReferenceDarkPurple290L52C17Medium = '--color-reference-dark-purple-290-l52-c17-medium';\nexport const colorReferenceDarkPurple290L67C20Bold = '--color-reference-dark-purple-290-l67-c20-bold';\nexport const colorReferenceDarkPurple290L92C05Strong = '--color-reference-dark-purple-290-l92-c05-strong';\nexport const colorReferenceDarkRed30L28C05Faint = '--color-reference-dark-red-30-l28-c05-faint';\nexport const colorReferenceDarkRed30L51C17Medium = '--color-reference-dark-red-30-l51-c17-medium';\nexport const colorReferenceDarkRed30L70C20Bold = '--color-reference-dark-red-30-l70-c20-bold';\nexport const colorReferenceDarkRed30L91C06Strong = '--color-reference-dark-red-30-l91-c06-strong';\nexport const colorReferenceDarkTeal180L27C05Faint = '--color-reference-dark-teal-180-l27-c05-faint';\nexport const colorReferenceDarkTeal180L50C12Medium = '--color-reference-dark-teal-180-l50-c12-medium';\nexport const colorReferenceDarkTeal180L70C15Bold = '--color-reference-dark-teal-180-l70-c15-bold';\nexport const colorReferenceDarkTeal180L93C08Strong = '--color-reference-dark-teal-180-l93-c08-strong';\nexport const colorReferenceDarkYellow85L28C05Faint = '--color-reference-dark-yellow-85-l28-c05-faint';\nexport const colorReferenceDarkYellow85L51C12Medium = '--color-reference-dark-yellow-85-l51-c12-medium';\nexport const colorReferenceDarkYellow85L80C18Bold = '--color-reference-dark-yellow-85-l80-c18-bold';\nexport const colorReferenceDarkYellow85L93C05Strong = '--color-reference-dark-yellow-85-l93-c05-strong';\nexport const colorReferenceGreyL18 = '--color-reference-grey-l18';\nexport const colorReferenceGreyL20 = '--color-reference-grey-l20';\nexport const colorReferenceGreyL27DarkFaint = '--color-reference-grey-l27-dark-faint';\nexport const colorReferenceGreyL30LightStrong = '--color-reference-grey-l30-light-strong';\nexport const colorReferenceGreyL50DarkMedium = '--color-reference-grey-l50-dark-medium';\nexport const colorReferenceGreyL51LightBold = '--color-reference-grey-l51-light-bold';\nexport const colorReferenceGreyL65DarkBold = '--color-reference-grey-l65-dark-bold';\nexport const colorReferenceGreyL75LightMedium = '--color-reference-grey-l75-light-medium';\nexport const colorReferenceGreyL91DarkStrong = '--color-reference-grey-l91-dark-strong';\nexport const colorReferenceGreyL93LightFaint = '--color-reference-grey-l93-light-faint';\nexport const colorReferenceGreyL98 = '--color-reference-grey-l98';\nexport const colorReferenceLightBlue250L33C09Strong = '--color-reference-light-blue-250-l33-c09-strong';\nexport const colorReferenceLightBlue250L50C18Bold = '--color-reference-light-blue-250-l50-c18-bold';\nexport const colorReferenceLightBlue250L70C18Medium = '--color-reference-light-blue-250-l70-c18-medium';\nexport const colorReferenceLightBlue250L92C04Faint = '--color-reference-light-blue-250-l92-c04-faint';\nexport const colorReferenceLightCyan215L30C07Strong = '--color-reference-light-cyan-215-l30-c07-strong';\nexport const colorReferenceLightCyan215L51C11Bold = '--color-reference-light-cyan-215-l51-c11-bold';\nexport const colorReferenceLightCyan215L75C17Medium = '--color-reference-light-cyan-215-l75-c17-medium';\nexport const colorReferenceLightCyan215L94C04Faint = '--color-reference-light-cyan-215-l94-c04-faint';\nexport const colorReferenceLightGreen145L35C13Strong = '--color-reference-light-green-145-l35-c13-strong';\nexport const colorReferenceLightGreen145L50C19Bold = '--color-reference-light-green-145-l50-c19-bold';\nexport const colorReferenceLightGreen145L75C22Medium = '--color-reference-light-green-145-l75-c22-medium';\nexport const colorReferenceLightGreen145L94C05Faint = '--color-reference-light-green-145-l94-c05-faint';\nexport const colorReferenceLightMagenta325L30C13Strong = '--color-reference-light-magenta-325-l30-c13-strong';\nexport const colorReferenceLightMagenta325L54C20Bold = '--color-reference-light-magenta-325-l54-c20-bold';\nexport const colorReferenceLightMagenta325L70C23Medium = '--color-reference-light-magenta-325-l70-c23-medium';\nexport const colorReferenceLightMagenta325L94C05Faint = '--color-reference-light-magenta-325-l94-c05-faint';\nexport const colorReferenceLightOlive115L35C09Strong = '--color-reference-light-olive-115-l35-c09-strong';\nexport const colorReferenceLightOlive115L51C13Bold = '--color-reference-light-olive-115-l51-c13-bold';\nexport const colorReferenceLightOlive115L85C22Medium = '--color-reference-light-olive-115-l85-c22-medium';\nexport const colorReferenceLightOlive115L93C05Faint = '--color-reference-light-olive-115-l93-c05-faint';\nexport const colorReferenceLightOrange60L35C09Strong = '--color-reference-light-orange-60-l35-c09-strong';\nexport const colorReferenceLightOrange60L52C13Bold = '--color-reference-light-orange-60-l52-c13-bold';\nexport const colorReferenceLightOrange60L75C20Medium = '--color-reference-light-orange-60-l75-c20-medium';\nexport const colorReferenceLightOrange60L93C05Faint = '--color-reference-light-orange-60-l93-c05-faint';\nexport const colorReferenceLightPink0L29C10Strong = '--color-reference-light-pink-0-l29-c10-strong';\nexport const colorReferenceLightPink0L53C20Bold = '--color-reference-light-pink-0-l53-c20-bold';\nexport const colorReferenceLightPink0L70C22Medium = '--color-reference-light-pink-0-l70-c22-medium';\nexport const colorReferenceLightPink0L93C05Faint = '--color-reference-light-pink-0-l93-c05-faint';\nexport const colorReferenceLightPurple290L35C13Strong = '--color-reference-light-purple-290-l35-c13-strong';\nexport const colorReferenceLightPurple290L52C20Bold = '--color-reference-light-purple-290-l52-c20-bold';\nexport const colorReferenceLightPurple290L75C15Medium = '--color-reference-light-purple-290-l75-c15-medium';\nexport const colorReferenceLightPurple290L92C04Faint = '--color-reference-light-purple-290-l92-c04-faint';\nexport const colorReferenceLightRed30L30C11Strong = '--color-reference-light-red-30-l30-c11-strong';\nexport const colorReferenceLightRed30L53C20Bold = '--color-reference-light-red-30-l53-c20-bold';\nexport const colorReferenceLightRed30L70C20Medium = '--color-reference-light-red-30-l70-c20-medium';\nexport const colorReferenceLightRed30L93C04Faint = '--color-reference-light-red-30-l93-c04-faint';\nexport const colorReferenceLightTeal180L35C09Strong = '--color-reference-light-teal-180-l35-c09-strong';\nexport const colorReferenceLightTeal180L50C12Bold = '--color-reference-light-teal-180-l50-c12-bold';\nexport const colorReferenceLightTeal180L75C17Medium = '--color-reference-light-teal-180-l75-c17-medium';\nexport const colorReferenceLightTeal180L94C05Faint = '--color-reference-light-teal-180-l94-c05-faint';\nexport const colorReferenceLightYellow85L40C09Strong = '--color-reference-light-yellow-85-l40-c09-strong';\nexport const colorReferenceLightYellow85L51C12Bold = '--color-reference-light-yellow-85-l51-c12-bold';\nexport const colorReferenceLightYellow85L85C20Medium = '--color-reference-light-yellow-85-l85-c20-medium';\nexport const colorReferenceLightYellow85L93C08Faint = '--color-reference-light-yellow-85-l93-c08-faint';\nexport const colorReferenceWhite0 = '--color-reference-white-0';\nexport const colorReferenceWhite10 = '--color-reference-white-10';\nexport const colorReferenceWhite100 = '--color-reference-white-100';\nexport const colorReferenceWhite15 = '--color-reference-white-15';\nexport const colorReferenceWhite20 = '--color-reference-white-20';\nexport const colorReferenceWhite25 = '--color-reference-white-25';\nexport const colorReferenceWhite30 = '--color-reference-white-30';\nexport const colorReferenceWhite35 = '--color-reference-white-35';\nexport const colorReferenceWhite40 = '--color-reference-white-40';\nexport const colorReferenceWhite45 = '--color-reference-white-45';\nexport const colorReferenceWhite5 = '--color-reference-white-5';\nexport const colorReferenceWhite50 = '--color-reference-white-50';\nexport const colorReferenceWhite55 = '--color-reference-white-55';\nexport const colorReferenceWhite60 = '--color-reference-white-60';\nexport const colorReferenceWhite65 = '--color-reference-white-65';\nexport const colorReferenceWhite70 = '--color-reference-white-70';\nexport const colorReferenceWhite75 = '--color-reference-white-75';\nexport const colorReferenceWhite80 = '--color-reference-white-80';\nexport const colorReferenceWhite85 = '--color-reference-white-85';\nexport const colorReferenceWhite90 = '--color-reference-white-90';\nexport const colorReferenceWhite95 = '--color-reference-white-95';\nexport const colorSafetyScoreBackgroundExcellent = '--color-safety-score-background-excellent';\nexport const colorSafetyScoreBackgroundFair = '--color-safety-score-background-fair';\nexport const colorSafetyScoreBackgroundGood = '--color-safety-score-background-good';\nexport const colorSafetyScoreForegroundOnExcellent = '--color-safety-score-foreground-on-excellent';\nexport const colorSafetyScoreForegroundOnFair = '--color-safety-score-foreground-on-fair';\nexport const colorSafetyScoreForegroundOnGood = '--color-safety-score-foreground-on-good';\nexport const colorSafetyScoreInteractionFocus = '--color-safety-score-interaction-focus';\nexport const colorSafetyScoreInteractionHover = '--color-safety-score-interaction-hover';\nexport const colorSafetyScoreInteractionPressed = '--color-safety-score-interaction-pressed';\nexport const colorSettingsProfileBackground = '--color-settings-profile-background';\nexport const colorSettingsProfileBorder = '--color-settings-profile-border';\nexport const colorSettingsProfileForeground = '--color-settings-profile-foreground';\nexport const colorShimmerFade = '--color-shimmer-fade';\nexport const colorShimmerHighlight = '--color-shimmer-highlight';\nexport const dimensionBase = '--dimension-base';\nexport const dimensionCardWidthLg = '--dimension-card-width-lg';\nexport const dimensionCardWidthMd = '--dimension-card-width-md';\nexport const dimensionCardWidthSm = '--dimension-card-width-sm';\nexport const dimensionCardWidthXs = '--dimension-card-width-xs';\nexport const dimensionFormWidthLg = '--dimension-form-width-lg';\nexport const dimensionFormWidthMd = '--dimension-form-width-md';\nexport const dimensionFormWidthSm = '--dimension-form-width-sm';\nexport const dimensionFormWidthXl = '--dimension-form-width-xl';\nexport const dimensionFormWidthXs = '--dimension-form-width-xs';\nexport const dimensionIconography2xl = '--dimension-iconography-2xl';\nexport const dimensionIconography3xl = '--dimension-iconography-3xl';\nexport const dimensionIconographyLg = '--dimension-iconography-lg';\nexport const dimensionIconographyMd = '--dimension-iconography-md';\nexport const dimensionIconographySm = '--dimension-iconography-sm';\nexport const dimensionIconographyXl = '--dimension-iconography-xl';\nexport const dimensionIconographyXs = '--dimension-iconography-xs';\nexport const dimensionMenuWidthLg = '--dimension-menu-width-lg';\nexport const dimensionMenuWidthMd = '--dimension-menu-width-md';\nexport const dimensionMenuWidthSm = '--dimension-menu-width-sm';\nexport const dimensionMenuWidthXs = '--dimension-menu-width-xs';\nexport const dimensionModalWidth2xl = '--dimension-modal-width-2xl';\nexport const dimensionModalWidthFill = '--dimension-modal-width-fill';\nexport const dimensionModalWidthLg = '--dimension-modal-width-lg';\nexport const dimensionModalWidthMd = '--dimension-modal-width-md';\nexport const dimensionModalWidthSm = '--dimension-modal-width-sm';\nexport const dimensionModalWidthXl = '--dimension-modal-width-xl';\nexport const dimensionModalWidthXs = '--dimension-modal-width-xs';\nexport const dimensionOffset000 = '--dimension-offset-000';\nexport const dimensionOffset025 = '--dimension-offset-025';\nexport const dimensionOffset050 = '--dimension-offset-050';\nexport const dimensionOffset075 = '--dimension-offset-075';\nexport const dimensionOffset100 = '--dimension-offset-100';\nexport const dimensionOffset125 = '--dimension-offset-125';\nexport const dimensionOffset150 = '--dimension-offset-150';\nexport const dimensionOffset175 = '--dimension-offset-175';\nexport const dimensionOffset200 = '--dimension-offset-200';\nexport const dimensionOffset250 = '--dimension-offset-250';\nexport const dimensionOffsetBase = '--dimension-offset-base';\nexport const dimensionOffsetN025 = '--dimension-offset-n025';\nexport const dimensionOffsetN050 = '--dimension-offset-n050';\nexport const dimensionOffsetN075 = '--dimension-offset-n075';\nexport const dimensionOffsetN100 = '--dimension-offset-n100';\nexport const dimensionOffsetN125 = '--dimension-offset-n125';\nexport const dimensionOffsetN150 = '--dimension-offset-n150';\nexport const dimensionOffsetN175 = '--dimension-offset-n175';\nexport const dimensionOffsetN200 = '--dimension-offset-n200';\nexport const dimensionOffsetN250 = '--dimension-offset-n250';\nexport const dimensionPanelWidth2xl = '--dimension-panel-width-2xl';\nexport const dimensionPanelWidth2xs = '--dimension-panel-width-2xs';\nexport const dimensionPanelWidthFill = '--dimension-panel-width-fill';\nexport const dimensionPanelWidthLg = '--dimension-panel-width-lg';\nexport const dimensionPanelWidthMd = '--dimension-panel-width-md';\nexport const dimensionPanelWidthSm = '--dimension-panel-width-sm';\nexport const dimensionPanelWidthXl = '--dimension-panel-width-xl';\nexport const dimensionPanelWidthXs = '--dimension-panel-width-xs';\nexport const dimensionRadius000 = '--dimension-radius-000';\nexport const dimensionRadius012 = '--dimension-radius-012';\nexport const dimensionRadius025 = '--dimension-radius-025';\nexport const dimensionRadius037 = '--dimension-radius-037';\nexport const dimensionRadius050 = '--dimension-radius-050';\nexport const dimensionRadius075 = '--dimension-radius-075';\nexport const dimensionRadius100 = '--dimension-radius-100';\nexport const dimensionRadius125 = '--dimension-radius-125';\nexport const dimensionRadius150 = '--dimension-radius-150';\nexport const dimensionRadius175 = '--dimension-radius-175';\nexport const dimensionRadius200 = '--dimension-radius-200';\nexport const dimensionRadius250 = '--dimension-radius-250';\nexport const dimensionRadius300 = '--dimension-radius-300';\nexport const dimensionRadius400 = '--dimension-radius-400';\nexport const dimensionRadius600 = '--dimension-radius-600';\nexport const dimensionRadiusBase = '--dimension-radius-base';\nexport const dimensionRadiusHalf = '--dimension-radius-half';\nexport const dimensionScaleDefault = '--dimension-scale-default';\nexport const dimensionScaleSubtle = '--dimension-scale-subtle';\nexport const dimensionSize000 = '--dimension-size-000';\nexport const dimensionSize050 = '--dimension-size-050';\nexport const dimensionSize075 = '--dimension-size-075';\nexport const dimensionSize100 = '--dimension-size-100';\nexport const dimensionSize150 = '--dimension-size-150';\nexport const dimensionSize200 = '--dimension-size-200';\nexport const dimensionSize250 = '--dimension-size-250';\nexport const dimensionSize300 = '--dimension-size-300';\nexport const dimensionSize400 = '--dimension-size-400';\nexport const dimensionSize500 = '--dimension-size-500';\nexport const dimensionSize600 = '--dimension-size-600';\nexport const dimensionSize800 = '--dimension-size-800';\nexport const dimensionSizeBase = '--dimension-size-base';\nexport const dimensionSpace000 = '--dimension-space-000';\nexport const dimensionSpace012 = '--dimension-space-012';\nexport const dimensionSpace025 = '--dimension-space-025';\nexport const dimensionSpace050 = '--dimension-space-050';\nexport const dimensionSpace075 = '--dimension-space-075';\nexport const dimensionSpace100 = '--dimension-space-100';\nexport const dimensionSpace125 = '--dimension-space-125';\nexport const dimensionSpace150 = '--dimension-space-150';\nexport const dimensionSpace175 = '--dimension-space-175';\nexport const dimensionSpace200 = '--dimension-space-200';\nexport const dimensionSpace250 = '--dimension-space-250';\nexport const dimensionSpace300 = '--dimension-space-300';\nexport const dimensionSpace400 = '--dimension-space-400';\nexport const dimensionSpace600 = '--dimension-space-600';\nexport const dimensionSpace800 = '--dimension-space-800';\nexport const dimensionSpaceBase = '--dimension-space-base';\nexport const dimensionSpaceN012 = '--dimension-space-n012';\nexport const dimensionSpaceN025 = '--dimension-space-n025';\nexport const dimensionSpaceN050 = '--dimension-space-n050';\nexport const dimensionSpaceN075 = '--dimension-space-n075';\nexport const dimensionSpaceN100 = '--dimension-space-n100';\nexport const dimensionSpaceN125 = '--dimension-space-n125';\nexport const dimensionSpaceN150 = '--dimension-space-n150';\nexport const dimensionSpaceN175 = '--dimension-space-n175';\nexport const dimensionSpaceN200 = '--dimension-space-n200';\nexport const dimensionSpaceN250 = '--dimension-space-n250';\nexport const dimensionSpaceN300 = '--dimension-space-n300';\nexport const dimensionSpaceN400 = '--dimension-space-n400';\nexport const dimensionSpaceN600 = '--dimension-space-n600';\nexport const dimensionSpaceN800 = '--dimension-space-n800';\nexport const dimensionStrokeWidth012 = '--dimension-stroke-width-012';\nexport const dimensionStrokeWidth015 = '--dimension-stroke-width-015';\nexport const dimensionStrokeWidth018 = '--dimension-stroke-width-018';\nexport const dimensionStrokeWidth025 = '--dimension-stroke-width-025';\nexport const dimensionStrokeWidth037 = '--dimension-stroke-width-037';\nexport const dimensionStrokeWidth050 = '--dimension-stroke-width-050';\nexport const dimensionStrokeWidthBase = '--dimension-stroke-width-base';\nexport const dimensionTableColumnWidthLg = '--dimension-table-column-width-lg';\nexport const dimensionTableColumnWidthMd = '--dimension-table-column-width-md';\nexport const dimensionTableColumnWidthSm = '--dimension-table-column-width-sm';\nexport const dimensionTableColumnWidthXl = '--dimension-table-column-width-xl';\nexport const dimensionTableColumnWidthXs = '--dimension-table-column-width-xs';\nexport const dimensionTooltipWidthLg = '--dimension-tooltip-width-lg';\nexport const dimensionTooltipWidthMd = '--dimension-tooltip-width-md';\nexport const dimensionTooltipWidthSm = '--dimension-tooltip-width-sm';\nexport const dimensionZIndexBase = '--dimension-z-index-base';\nexport const dimensionZIndexFloating = '--dimension-z-index-floating';\nexport const dimensionZIndexModal = '--dimension-z-index-modal';\nexport const dimensionZIndexOverlay = '--dimension-z-index-overlay';\nexport const dimensionZIndexRaised = '--dimension-z-index-raised';\nexport const dimensionZIndexTooltip = '--dimension-z-index-tooltip';\nexport const effectAnimationDelayInstant = '--effect-animation-delay-instant';\nexport const effectAnimationDelayLong1 = '--effect-animation-delay-long-1';\nexport const effectAnimationDelayLong2 = '--effect-animation-delay-long-2';\nexport const effectAnimationDelayLong3 = '--effect-animation-delay-long-3';\nexport const effectAnimationDelayMedium1 = '--effect-animation-delay-medium-1';\nexport const effectAnimationDelayMedium2 = '--effect-animation-delay-medium-2';\nexport const effectAnimationDelayMedium3 = '--effect-animation-delay-medium-3';\nexport const effectAnimationDelayShort1 = '--effect-animation-delay-short-1';\nexport const effectAnimationDelayShort2 = '--effect-animation-delay-short-2';\nexport const effectAnimationDelayShort3 = '--effect-animation-delay-short-3';\nexport const effectAnimationDurationInstant = '--effect-animation-duration-instant';\nexport const effectAnimationDurationLong1 = '--effect-animation-duration-long-1';\nexport const effectAnimationDurationLong2 = '--effect-animation-duration-long-2';\nexport const effectAnimationDurationLong3 = '--effect-animation-duration-long-3';\nexport const effectAnimationDurationMedium1 = '--effect-animation-duration-medium-1';\nexport const effectAnimationDurationMedium2 = '--effect-animation-duration-medium-2';\nexport const effectAnimationDurationMedium3 = '--effect-animation-duration-medium-3';\nexport const effectAnimationDurationShort1 = '--effect-animation-duration-short-1';\nexport const effectAnimationDurationShort2 = '--effect-animation-duration-short-2';\nexport const effectAnimationDurationShort3 = '--effect-animation-duration-short-3';\nexport const effectAnimationEasingEaseIn = '--effect-animation-easing-ease-in';\nexport const effectAnimationEasingEaseInOut = '--effect-animation-easing-ease-in-out';\nexport const effectAnimationEasingEaseInOutBack = '--effect-animation-easing-ease-in-out-back';\nexport const effectAnimationEasingEaseOut = '--effect-animation-easing-ease-out';\nexport const effectAnimationEasingLinear = '--effect-animation-easing-linear';\nexport const effectBlurLg = '--effect-blur-lg';\nexport const effectBlurMd = '--effect-blur-md';\nexport const effectBlurSm = '--effect-blur-sm';\nexport const effectElevationDepressedMd = '--effect-elevation-depressed-md';\nexport const effectElevationDepressedSm = '--effect-elevation-depressed-sm';\nexport const effectElevationElevatedFloating = '--effect-elevation-elevated-floating';\nexport const effectElevationElevatedMd = '--effect-elevation-elevated-md';\nexport const effectElevationElevatedNone = '--effect-elevation-elevated-none';\nexport const effectElevationElevatedPanelBottom = '--effect-elevation-elevated-panel-bottom';\nexport const effectElevationElevatedPanelLeft = '--effect-elevation-elevated-panel-left';\nexport const effectElevationElevatedPanelRight = '--effect-elevation-elevated-panel-right';\nexport const effectElevationElevatedPanelTop = '--effect-elevation-elevated-panel-top';\nexport const effectElevationElevatedSm = '--effect-elevation-elevated-sm';\nexport const effectFocusRing = '--effect-focus-ring';\nexport const effectHighlightDepressedMd = '--effect-highlight-depressed-md';\nexport const effectHighlightDepressedSm = '--effect-highlight-depressed-sm';\nexport const effectHighlightElevatedFloating = '--effect-highlight-elevated-floating';\nexport const effectHighlightElevatedMd = '--effect-highlight-elevated-md';\nexport const effectHighlightElevatedNone = '--effect-highlight-elevated-none';\nexport const effectHighlightElevatedPanelBottom = '--effect-highlight-elevated-panel-bottom';\nexport const effectHighlightElevatedPanelLeft = '--effect-highlight-elevated-panel-left';\nexport const effectHighlightElevatedPanelRight = '--effect-highlight-elevated-panel-right';\nexport const effectHighlightElevatedPanelTop = '--effect-highlight-elevated-panel-top';\nexport const effectHighlightElevatedSm = '--effect-highlight-elevated-sm';\nexport const effectMotionInstant = '--effect-motion-instant';\nexport const effectMotionLong1 = '--effect-motion-long-1';\nexport const effectMotionLong2 = '--effect-motion-long-2';\nexport const effectMotionLong3 = '--effect-motion-long-3';\nexport const effectMotionMedium1 = '--effect-motion-medium-1';\nexport const effectMotionMedium2 = '--effect-motion-medium-2';\nexport const effectMotionMedium3 = '--effect-motion-medium-3';\nexport const effectMotionShort1 = '--effect-motion-short-1';\nexport const effectMotionShort2 = '--effect-motion-short-2';\nexport const effectMotionShort3 = '--effect-motion-short-3';\nexport const effectShadowDepressedMd = '--effect-shadow-depressed-md';\nexport const effectShadowDepressedSm = '--effect-shadow-depressed-sm';\nexport const effectShadowElevatedFloating = '--effect-shadow-elevated-floating';\nexport const effectShadowElevatedMd = '--effect-shadow-elevated-md';\nexport const effectShadowElevatedNone = '--effect-shadow-elevated-none';\nexport const effectShadowElevatedPanelBottom = '--effect-shadow-elevated-panel-bottom';\nexport const effectShadowElevatedPanelLeft = '--effect-shadow-elevated-panel-left';\nexport const effectShadowElevatedPanelRight = '--effect-shadow-elevated-panel-right';\nexport const effectShadowElevatedPanelTop = '--effect-shadow-elevated-panel-top';\nexport const effectShadowElevatedSm = '--effect-shadow-elevated-sm';\nexport const effectTransitionInteractionBackgroundInstant = '--effect-transition-interaction-background-instant';\nexport const effectTransitionInteractionBackgroundLong1 = '--effect-transition-interaction-background-long-1';\nexport const effectTransitionInteractionBackgroundLong2 = '--effect-transition-interaction-background-long-2';\nexport const effectTransitionInteractionBackgroundLong3 = '--effect-transition-interaction-background-long-3';\nexport const effectTransitionInteractionBackgroundMedium1 = '--effect-transition-interaction-background-medium-1';\nexport const effectTransitionInteractionBackgroundMedium2 = '--effect-transition-interaction-background-medium-2';\nexport const effectTransitionInteractionBackgroundMedium3 = '--effect-transition-interaction-background-medium-3';\nexport const effectTransitionInteractionBackgroundShort1 = '--effect-transition-interaction-background-short-1';\nexport const effectTransitionInteractionBackgroundShort2 = '--effect-transition-interaction-background-short-2';\nexport const effectTransitionInteractionBackgroundShort3 = '--effect-transition-interaction-background-short-3';\nexport const effectTransitionInteractionBorderColorInstant = '--effect-transition-interaction-border-color-instant';\nexport const effectTransitionInteractionBorderColorLong1 = '--effect-transition-interaction-border-color-long-1';\nexport const effectTransitionInteractionBorderColorLong2 = '--effect-transition-interaction-border-color-long-2';\nexport const effectTransitionInteractionBorderColorLong3 = '--effect-transition-interaction-border-color-long-3';\nexport const effectTransitionInteractionBorderColorMedium1 = '--effect-transition-interaction-border-color-medium-1';\nexport const effectTransitionInteractionBorderColorMedium2 = '--effect-transition-interaction-border-color-medium-2';\nexport const effectTransitionInteractionBorderColorMedium3 = '--effect-transition-interaction-border-color-medium-3';\nexport const effectTransitionInteractionBorderColorShort1 = '--effect-transition-interaction-border-color-short-1';\nexport const effectTransitionInteractionBorderColorShort2 = '--effect-transition-interaction-border-color-short-2';\nexport const effectTransitionInteractionBorderColorShort3 = '--effect-transition-interaction-border-color-short-3';\nexport const effectTransitionInteractionColorInstant = '--effect-transition-interaction-color-instant';\nexport const effectTransitionInteractionColorLong1 = '--effect-transition-interaction-color-long-1';\nexport const effectTransitionInteractionColorLong2 = '--effect-transition-interaction-color-long-2';\nexport const effectTransitionInteractionColorLong3 = '--effect-transition-interaction-color-long-3';\nexport const effectTransitionInteractionColorMedium1 = '--effect-transition-interaction-color-medium-1';\nexport const effectTransitionInteractionColorMedium2 = '--effect-transition-interaction-color-medium-2';\nexport const effectTransitionInteractionColorMedium3 = '--effect-transition-interaction-color-medium-3';\nexport const effectTransitionInteractionColorShort1 = '--effect-transition-interaction-color-short-1';\nexport const effectTransitionInteractionColorShort2 = '--effect-transition-interaction-color-short-2';\nexport const effectTransitionInteractionColorShort3 = '--effect-transition-interaction-color-short-3';\nexport const effectTransitionInteractionOpacityInstant = '--effect-transition-interaction-opacity-instant';\nexport const effectTransitionInteractionOpacityLong1 = '--effect-transition-interaction-opacity-long-1';\nexport const effectTransitionInteractionOpacityLong2 = '--effect-transition-interaction-opacity-long-2';\nexport const effectTransitionInteractionOpacityLong3 = '--effect-transition-interaction-opacity-long-3';\nexport const effectTransitionInteractionOpacityMedium1 = '--effect-transition-interaction-opacity-medium-1';\nexport const effectTransitionInteractionOpacityMedium2 = '--effect-transition-interaction-opacity-medium-2';\nexport const effectTransitionInteractionOpacityMedium3 = '--effect-transition-interaction-opacity-medium-3';\nexport const effectTransitionInteractionOpacityShort1 = '--effect-transition-interaction-opacity-short-1';\nexport const effectTransitionInteractionOpacityShort2 = '--effect-transition-interaction-opacity-short-2';\nexport const effectTransitionInteractionOpacityShort3 = '--effect-transition-interaction-opacity-short-3';\nexport const effectTransitionInteractionTransformInstant = '--effect-transition-interaction-transform-instant';\nexport const effectTransitionInteractionTransformLong1 = '--effect-transition-interaction-transform-long-1';\nexport const effectTransitionInteractionTransformLong2 = '--effect-transition-interaction-transform-long-2';\nexport const effectTransitionInteractionTransformLong3 = '--effect-transition-interaction-transform-long-3';\nexport const effectTransitionInteractionTransformMedium1 = '--effect-transition-interaction-transform-medium-1';\nexport const effectTransitionInteractionTransformMedium2 = '--effect-transition-interaction-transform-medium-2';\nexport const effectTransitionInteractionTransformMedium3 = '--effect-transition-interaction-transform-medium-3';\nexport const effectTransitionInteractionTransformShort1 = '--effect-transition-interaction-transform-short-1';\nexport const effectTransitionInteractionTransformShort2 = '--effect-transition-interaction-transform-short-2';\nexport const effectTransitionInteractionTransformShort3 = '--effect-transition-interaction-transform-short-3';\nexport const typographyFontFamily = '--typography-font-family';\nexport const typographyFontsize2xl = '--typography-fontsize-2xl';\nexport const typographyFontsize3xl = '--typography-fontsize-3xl';\nexport const typographyFontsizeLg = '--typography-fontsize-lg';\nexport const typographyFontsizeMd = '--typography-fontsize-md';\nexport const typographyFontsizeSm = '--typography-fontsize-sm';\nexport const typographyFontsizeXl = '--typography-fontsize-xl';\nexport const typographyFontsizeXs = '--typography-fontsize-xs';\nexport const typographyLetterspacingNegative = '--typography-letterspacing-negative';\nexport const typographyLetterspacingNegativeDouble = '--typography-letterspacing-negative-double';\nexport const typographyLetterspacingNegativeHalf = '--typography-letterspacing-negative-half';\nexport const typographyLetterspacingNone = '--typography-letterspacing-none';\nexport const typographyLetterspacingPositive = '--typography-letterspacing-positive';\nexport const typographyLineheight2xl = '--typography-lineheight-2xl';\nexport const typographyLineheight3xl = '--typography-lineheight-3xl';\nexport const typographyLineheightLg = '--typography-lineheight-lg';\nexport const typographyLineheightMd = '--typography-lineheight-md';\nexport const typographyLineheightSm = '--typography-lineheight-sm';\nexport const typographyLineheightXl = '--typography-lineheight-xl';\nexport const typographyLineheightXs = '--typography-lineheight-xs';\nexport const typographyParagraphspacingLg = '--typography-paragraphspacing-lg';\nexport const typographyParagraphspacingMd = '--typography-paragraphspacing-md';\nexport const typographyParagraphspacingNone = '--typography-paragraphspacing-none';\nexport const typographyParagraphspacingSm = '--typography-paragraphspacing-sm';\nexport const typographyWeightBold = '--typography-weight-bold';\nexport const typographyWeightMedium = '--typography-weight-medium';\nexport const typographyWeightRegular = '--typography-weight-regular';\nexport const typographyWeightSemibold = '--typography-weight-semibold';\n","import {\n  dimensionIconographyMd,\n  dimensionIconographySm,\n  dimensionIconographyXs,\n  dimensionMenuWidthXs,\n  dimensionPanelWidth2xs,\n  dimensionPanelWidthLg,\n  dimensionPanelWidthMd,\n  dimensionSize300,\n  dimensionSize600,\n  dimensionSize800,\n  dimensionSpace050,\n  dimensionSpace200,\n  effectAnimationDelayLong2,\n  effectAnimationDelayMedium1,\n  effectAnimationDelayShort2,\n  effectAnimationDurationMedium1,\n  effectAnimationDurationShort3,\n  effectMotionShort2,\n  effectMotionShort3,\n} from '@ds-mo/tokens/ts';\n\n/** TokoMo CSS custom-property names for shared component defaults (runtime resolution). */\nexport const TOKEN_DEFAULTS = {\n  space050: dimensionSpace050,\n  space200: dimensionSpace200,\n  size300: dimensionSize300,\n  size600: dimensionSize600,\n  size800: dimensionSize800,\n  iconographyMd: dimensionIconographyMd,\n  iconographySm: dimensionIconographySm,\n  iconographyXs: dimensionIconographyXs,\n  panelWidth2xs: dimensionPanelWidth2xs,\n  panelWidthMd: dimensionPanelWidthMd,\n  panelWidthLg: dimensionPanelWidthLg,\n  menuWidthXs: dimensionMenuWidthXs,\n  motionShort2: effectMotionShort2,\n  motionShort3: effectMotionShort3,\n  animationDurationShort3: effectAnimationDurationShort3,\n  animationDurationMedium1: effectAnimationDurationMedium1,\n  animationDelayMedium1: effectAnimationDelayMedium1,\n  animationDelayShort2: effectAnimationDelayShort2,\n  animationDelayLong2: effectAnimationDelayLong2,\n  /** Unmeasured menu height fallback: 20× base (160px at default scale). */\n  menuFallbackHeight: 'calc(var(--dimension-size-base) * 20)',\n  /** Unmeasured tooltip width fallback: size-800 + size-200 (80px). */\n  tooltipFallbackWidth: 'calc(var(--dimension-size-800) + var(--dimension-size-200))',\n} as const;\n\nexport type TokenDefaultKey = keyof typeof TOKEN_DEFAULTS;\n\n/** Valid CSS length strings for overlay offset props — bind on `sideOffset` / `alignOffset` in hosts. */\nexport const TOKEN_CSS_LENGTHS = {\n  space050: `var(${dimensionSpace050})`,\n  space200: `var(${dimensionSpace200})`,\n  menuWidthXs: `var(${dimensionMenuWidthXs})`,\n} as const;\n"],"mappings":"AAotBO,MAAMA,EAAyB,6BAC/B,MAAMC,EAAyB,6BAE/B,MAAMC,EAAyB,6BAI/B,MAAMC,EAAuB,4BAgC7B,MAAMC,EAAwB,6BA8B9B,MAAMC,EAAmB,uBASzB,MAAMC,EAAoB,wBAkD1B,MAAMC,EAA4B,kCAElC,MAAMC,EAA8B,oCAUpC,MAAMC,EAAiC,uCAKvC,MAAMC,EAAgC,sCAsCtC,MAAMC,EAAqB,0BAC3B,MAAMC,EAAqB,0BCr3B3B,MAAMC,EAAiB,CAC5BC,SAAUR,EAEVS,QAASV,EAGTW,cAAehB,EACfiB,cAAehB,EACfiB,cAAehB,EAEfiB,aAAcf,EAEdgB,YAAajB,EACbkB,aAAcV,EACdW,aAAcV,EACdW,wBAAyBb,EACzBc,yBAA0Bf,EAC1BgB,sBAAuBjB,EAEvBkB,oBAAqBnB,EAErBoB,mBAAoB,wCAEpBC,qBAAsB,+DAMjB,MAAMC,EAAoB,CAC/Bf,SAAU,OAAOR,a","ignoreList":[]}

package/dist/components/p-BTndnbR_.js

@@ -1,2 +0,0 @@
-import{p as o,H as n,c as i,h as t,a as e,t as r}from"./index.js";import{d as s}from"./p-CiEc8Nwx.js";import{d}from"./p-DqBCQRRd.js";const c=()=>`.sc-ds-button-unfilled-icon-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-button-unfilled-icon:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled-icon{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-button-unfilled-icon:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled-icon:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-icon{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-icon::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-button-unfilled-icon-h{display:inline-flex;flex:0 0 auto;width:var(--dimension-size-400);height:var(--dimension-size-400);outline:none;--ds-button-unfilled-icon-fg:var(--color-foreground-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-secondary);--ds-button-unfilled-icon-border:var(--color-border-tertiary)}.button-icon.sc-ds-button-unfilled-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-400);height:var(--dimension-size-400);padding:var(--dimension-space-075);background:transparent;border:var(--dimension-stroke-width-012, 1px) solid transparent;border-radius:var(--dimension-radius-025);color:var(--ds-button-unfilled-icon-fg);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;transition:color var(--effect-motion-short-2)}.button-icon.sc-ds-button-unfilled-icon::before,.button-icon.sc-ds-button-unfilled-icon::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none;z-index:1}.button-icon.sc-ds-button-unfilled-icon::before{z-index:0}.button-icon--active-fill.sc-ds-button-unfilled-icon::before{background:var(--ds-button-unfilled-icon-active-bg)}.button-icon.sc-ds-button-unfilled-icon:hover:not(.button-icon--inactive)::after{background:var(--ds-button-unfilled-icon-hover-bg);transition:none}.button-icon.sc-ds-button-unfilled-icon:active:not(.button-icon--inactive)::after{background:var(--ds-button-unfilled-icon-pressed-bg);transition:none}.button-icon--active.sc-ds-button-unfilled-icon{color:var(--ds-button-unfilled-icon-fg-active)}.button-icon--bordered.sc-ds-button-unfilled-icon{border-color:var(--ds-button-unfilled-icon-border)}.button-icon--bordered.sc-ds-button-unfilled-icon::after{inset:var(--dimension-stroke-width-012, 1px)}.button-icon--bordered.sc-ds-button-unfilled-icon::before{inset:var(--dimension-stroke-width-012, 1px)}.button-icon--inactive.sc-ds-button-unfilled-icon{opacity:0.5;cursor:not-allowed;pointer-events:none}.button-icon--on-medium.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-active-bg:var(--color-interaction-on-medium-background-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-on-medium-background-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-on-medium-background-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.button-icon--on-bold.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-on-bold-background-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-on-bold-background-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-on-bold-background-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.button-icon--on-strong.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-on-strong-background-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-on-strong-background-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-on-strong-background-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.button-icon--on-always-dark.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-icon-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-icon-active-bg:var(--color-always-dark-interaction-active);--ds-button-unfilled-icon-hover-bg:var(--color-always-dark-interaction-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-always-dark-interaction-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.button-icon--on-navigation.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-navigation-foreground-secondary);--ds-button-unfilled-icon-fg-active:var(--color-navigation-foreground-primary);--ds-button-unfilled-icon-active-bg:var(--color-navigation-interaction-active);--ds-button-unfilled-icon-hover-bg:var(--color-navigation-interaction-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-navigation-interaction-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.button-icon__icon-wrap.sc-ds-button-unfilled-icon{position:relative;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-icon__dot.sc-ds-button-unfilled-icon{position:absolute;top:0;right:0;pointer-events:none}`;const a=o(class o extends n{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=i(this,"dsClick");this.dsChange=i(this,"dsChange");this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=false;this.dot=false;this.inactive=false;this.type="button";this.ariaLabel="action";this.buttonEl=null;this.handleClick=o=>{if(this.inactive)return;this.dsClick.emit(o);this.dsChange.emit(!this.isActive)}}async setFocus(){this.buttonEl?.focus()}render(){const o=this.background;const n={"button-icon":true,"ds-focus-ring-inset":true,"button-icon--active":this.isActive,"button-icon--active-fill":this.isActive&&this.activeFill,"button-icon--bordered":this.hasBorder,"button-icon--inactive":this.inactive,"button-icon--on-medium":o==="medium","button-icon--on-bold":o==="bold","button-icon--on-strong":o==="strong","button-icon--on-always-dark":o==="always-dark","button-icon--on-navigation":o==="navigation"};return t(e,{key:"466425a7da41dadac93c0dcb35356a818683d3d8",tabIndex:-1},t("button",{key:"20a042f19fbf4623e14f3e46fb44537e987a3ec7",ref:o=>{this.buttonEl=o??null},type:this.type,class:n,disabled:this.inactive,tabIndex:this.focusTabIndex??0,"aria-label":this.ariaLabel,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.haspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onClick:this.handleClick},t("span",{key:"c64a87014f56c3776cf5d09d792fdfc7d54bb8ac",class:"button-icon__icon-wrap"},t("ds-icon",{key:"4b7f901b63029f2f2abfd1eb76a83d1e7aa99392",name:this.icon,size:"md",color:"inherit"}),this.dot&&t("ds-badge",{key:"c0da9fe4d25d0f747308657474d8fb6ceb75e171",class:"button-icon__dot",variant:"dot",background:"var(--ds-button-unfilled-icon-dot-ring)",label:"","aria-hidden":"true"}))))}get el(){return this}static get style(){return c()}},[2,"ds-button-unfilled-icon",{icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],dot:[4],inactive:[4],type:[1],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-button-unfilled-icon","ds-badge","ds-icon"];o.forEach((o=>{switch(o){case"ds-button-unfilled-icon":if(!customElements.get(r(o))){customElements.define(r(o),a)}break;case"ds-badge":if(!customElements.get(r(o))){s()}break;case"ds-icon":if(!customElements.get(r(o))){d()}break}}))}u();export{a as B,u as d};
-//# sourceMappingURL=p-BTndnbR_.js.map

package/dist/components/p-BTndnbR_.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["buttonUnfilledIconCss","ButtonUnfilledIcon","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","icon","isActive","activeFill","hasBorder","dot","inactive","type","ariaLabel","buttonEl","handleClick","event","dsClick","emit","dsChange","setFocus","focus","render","bg","background","cls","h","Host","key","tabIndex","ref","el","class","disabled","focusTabIndex","controls","expanded","undefined","String","haspopup","pressed","onClick","name","size","color","variant","label"],"sources":["src/wc/components/ButtonUnfilledIcon/ButtonUnfilledIcon.css?tag=ds-button-unfilled-icon&encapsulation=scoped","src/wc/components/ButtonUnfilledIcon/ButtonUnfilledIcon.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n\n:host {\n  display: inline-flex;\n  flex: 0 0 auto;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n  outline: none;\n  --ds-button-unfilled-icon-fg: var(--color-foreground-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-foreground-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-secondary);\n  --ds-button-unfilled-icon-border: var(--color-border-tertiary);\n}\n\n.button-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n  padding: var(--dimension-space-075);\n  background: transparent;\n  border: var(--dimension-stroke-width-012, 1px) solid transparent;\n  border-radius: var(--dimension-radius-025);\n  color: var(--ds-button-unfilled-icon-fg);\n  cursor: pointer;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n  position: relative;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n}\n\n.button-icon::before,\n.button-icon::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n  z-index: 1;\n}\n\n.button-icon::before {\n  z-index: 0;\n}\n\n.button-icon--active-fill::before {\n  background: var(--ds-button-unfilled-icon-active-bg);\n}\n\n.button-icon:hover:not(.button-icon--inactive)::after {\n  background: var(--ds-button-unfilled-icon-hover-bg);\n  transition: none;\n}\n\n.button-icon:active:not(.button-icon--inactive)::after {\n  background: var(--ds-button-unfilled-icon-pressed-bg);\n  transition: none;\n}\n\n.button-icon--active {\n  color: var(--ds-button-unfilled-icon-fg-active);\n}\n\n.button-icon--bordered {\n  border-color: var(--ds-button-unfilled-icon-border);\n}\n\n.button-icon--bordered::after {\n  inset: var(--dimension-stroke-width-012, 1px);\n}\n\n.button-icon--bordered::before {\n  inset: var(--dimension-stroke-width-012, 1px);\n}\n\n.button-icon--inactive {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.button-icon--on-medium {\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-on-medium-background-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-on-medium-background-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-medium-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-medium-background-focus);\n}\n\n.button-icon--on-bold {\n  --ds-button-unfilled-icon-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-on-bold-background-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-on-bold-background-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-bold-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);\n}\n\n.button-icon--on-strong {\n  --ds-button-unfilled-icon-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-on-strong-background-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-on-strong-background-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-strong-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-strong-background-focus);\n}\n\n.button-icon--on-always-dark {\n  --ds-button-unfilled-icon-fg: var(--color-always-dark-foreground-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-always-dark-interaction-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-always-dark-interaction-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-always-dark-interaction-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-always-dark-background);\n  --ds-focus-ring-color: var(--color-always-dark-interaction-focus);\n}\n\n.button-icon--on-navigation {\n  --ds-button-unfilled-icon-fg: var(--color-navigation-foreground-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-navigation-foreground-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-navigation-interaction-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-navigation-interaction-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-navigation-interaction-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-navigation-background);\n  --ds-focus-ring-color: var(--color-navigation-interaction-focus);\n}\n\n.button-icon__icon-wrap {\n  position: relative;\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-icon__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\n\nexport type ButtonUnfilledIconBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'always-dark'\n  | 'navigation';\n\n@Component({\n  tag: 'ds-button-unfilled-icon',\n  styleUrl: 'ButtonUnfilledIcon.css',\n  scoped: true,\n})\nexport class ButtonUnfilledIcon {\n  @Element() el!: HTMLElement;\n\n  /** Icon name passed to <ds-icon>. */\n  @Prop() icon: string = '';\n\n  /** Active/selected visual state. */\n  @Prop() isActive: boolean = false;\n\n  /** When active, render the active interaction fill. Shell chrome can disable this while keeping active icon colour. */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px tertiary border without changing the interaction model. */\n  @Prop() hasBorder: boolean = false;\n\n  /** Show a notification dot at the top-right of the icon zone. */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() inactive: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Parent surface context — adjusts hover/press/focus colours for coloured backgrounds. */\n  @Prop() background: ButtonUnfilledIconBackground | undefined;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';\n  @Prop() controls: string | undefined;\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: string | undefined;\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Native `tabindex` for roving keyboard groups in shell chrome.\n   * Omit for the default button tab stop (`0`).\n   */\n  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.inactive) return;\n    this.dsClick.emit(event);\n    this.dsChange.emit(!this.isActive);\n  };\n\n  render() {\n    const bg = this.background;\n\n    const cls: Record<string, boolean> = {\n      'button-icon': true,\n      'ds-focus-ring-inset': true,\n      'button-icon--active': this.isActive,\n      'button-icon--active-fill': this.isActive && this.activeFill,\n      'button-icon--bordered': this.hasBorder,\n      'button-icon--inactive': this.inactive,\n      'button-icon--on-medium': bg === 'medium',\n      'button-icon--on-bold': bg === 'bold',\n      'button-icon--on-strong': bg === 'strong',\n      'button-icon--on-always-dark': bg === 'always-dark',\n      'button-icon--on-navigation': bg === 'navigation',\n    };\n\n    return (\n      <Host tabIndex={-1}>\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.inactive}\n          tabIndex={this.focusTabIndex ?? 0}\n          aria-label={this.ariaLabel}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.haspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onClick={this.handleClick}\n        >\n          <span class=\"button-icon__icon-wrap\">\n            <ds-icon name={this.icon} size=\"md\" color=\"inherit\" />\n            {this.dot && (\n              <ds-badge\n                class=\"button-icon__dot\"\n                variant=\"dot\"\n                background=\"var(--ds-button-unfilled-icon-dot-ring)\"\n                label=\"\"\n                aria-hidden=\"true\"\n              />\n            )}\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qIAAA,MAAMA,EAAwB,IAAM,q/M,MCevBC,EAAkBC,EAAA,MAAAD,UAAAE,EAL/B,WAAAC,CAAAC,G,4GASUC,KAAAC,KAAe,GAGfD,KAAAE,SAAoB,MAGpBF,KAAAG,WAAsB,KAGtBH,KAAAI,UAAqB,MAGrBJ,KAAAK,IAAe,MAGfL,KAAAM,SAAoB,MAGpBN,KAAAO,KAAsC,SAKXP,KAAAQ,UAAoB,SAe/CR,KAAAS,SAAqC,KAOrCT,KAAAU,YAAeC,IACrB,GAAIX,KAAKM,SAAU,OACnBN,KAAKY,QAAQC,KAAKF,GAClBX,KAAKc,SAASD,MAAMb,KAAKE,SAAS,CAqDrC,CA5DC,cAAMa,GACJf,KAAKS,UAAUO,O,CASjB,MAAAC,GACE,MAAMC,EAAKlB,KAAKmB,WAEhB,MAAMC,EAA+B,CACnC,cAAe,KACf,sBAAuB,KACvB,sBAAuBpB,KAAKE,SAC5B,2BAA4BF,KAAKE,UAAYF,KAAKG,WAClD,wBAAyBH,KAAKI,UAC9B,wBAAyBJ,KAAKM,SAC9B,yBAA0BY,IAAO,SACjC,uBAAwBA,IAAO,OAC/B,yBAA0BA,IAAO,SACjC,8BAA+BA,IAAO,cACtC,6BAA8BA,IAAO,cAGvC,OACEG,EAACC,EAAI,CAAAC,IAAA,2CAACC,UAAU,GACdH,EAAA,UAAAE,IAAA,2CACEE,IAAKC,IACH1B,KAAKS,SAAWiB,GAAM,IAAI,EAE5BnB,KAAMP,KAAKO,KACXoB,MAAOP,EACPQ,SAAU5B,KAAKM,SACfkB,SAAUxB,KAAK6B,eAAiB,EAAC,aACrB7B,KAAKQ,UAAS,gBACXR,KAAK8B,SAAQ,gBACb9B,KAAK+B,WAAaC,UAAYA,UAAYC,OAAOjC,KAAK+B,UAAS,gBAC/D/B,KAAKkC,SAAQ,eACdlC,KAAKmC,UAAYH,UAAYA,UAAYC,OAAOjC,KAAKmC,SACnEC,QAASpC,KAAKU,aAEdW,EAAA,QAAAE,IAAA,2CAAMI,MAAM,0BACVN,EAAA,WAAAE,IAAA,2CAASc,KAAMrC,KAAKC,KAAMqC,KAAK,KAAKC,MAAM,YACzCvC,KAAKK,KACJgB,EAAA,YAAAE,IAAA,2CACEI,MAAM,mBACNa,QAAQ,MACRrB,WAAW,0CACXsB,MAAM,GAAE,cACI,W","ignoreList":[]}

package/dist/components/p-C0CUGiLm.js

@@ -1,2 +0,0 @@
-import{p as o,H as e,c as n,h as s,a as r,t}from"./index.js";import{d as i}from"./p-DqBCQRRd.js";import{r as a}from"./p-BWUTr_XN.js";import{T as d}from"./p-BPMJx63I.js";const c=()=>`.toggle-btn.sc-ds-toggle-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;background:transparent;box-sizing:border-box;-webkit-user-select:none;user-select:none;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_border:var(--color-border-tertiary)}.toggle-btn.sc-ds-toggle-button:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.toggle-btn.sc-ds-toggle-button:hover:not(.inactive){background-color:var(--_hover-bg)}.toggle-btn.sc-ds-toggle-button:active:not(.inactive){background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.onMedium.sc-ds-toggle-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-toggle-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-toggle-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-toggle-button{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_border:var(--color-always-dark-border-tertiary)}.elevationElevated.sc-ds-toggle-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);color:var(--color-foreground-secondary);--_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))}.elevationFlat.sc-ds-toggle-button{box-shadow:inset 0 0 0 1px var(--_border);color:var(--color-foreground-secondary)}.elevationNone.sc-ds-toggle-button{color:var(--color-foreground-secondary)}.elevationFloating.sc-ds-toggle-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-floating);color:var(--color-foreground-secondary);--_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))}.onBold.elevationNone.sc-ds-toggle-button,.onBold.elevationFlat.sc-ds-toggle-button,.onStrong.elevationNone.sc-ds-toggle-button,.onStrong.elevationFlat.sc-ds-toggle-button{color:var(--color-foreground-on-bold-background-secondary)}.onAlwaysDark.elevationNone.sc-ds-toggle-button,.onAlwaysDark.elevationFlat.sc-ds-toggle-button{color:var(--color-always-dark-foreground-secondary)}.pressed.sc-ds-toggle-button{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.iconOnly.sc-ds-toggle-button{padding:0;width:var(--dimension-size-400);min-width:var(--dimension-size-400)}.labelOnly.sc-ds-toggle-button{padding:0 var(--dimension-space-100)}.iconAndLabel.sc-ds-toggle-button{padding:0 var(--dimension-space-100) 0 var(--dimension-space-075);gap:var(--dimension-space-025)}.sizeSM.sc-ds-toggle-button{height:var(--dimension-size-300)}.sizeSM.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-300);min-width:var(--dimension-size-300)}.sizeSM.labelOnly.sc-ds-toggle-button{padding:0 var(--dimension-space-075)}.sizeSM.iconAndLabel.sc-ds-toggle-button{padding:0 var(--dimension-space-075) 0 var(--dimension-space-050);gap:0}.sizeXS.sc-ds-toggle-button{height:var(--dimension-size-200)}.sizeXS.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-200);min-width:var(--dimension-size-200)}.sizeXS.labelOnly.sc-ds-toggle-button,.sizeXS.iconAndLabel.sc-ds-toggle-button{padding:0 var(--dimension-space-025);gap:0}.rounded.sc-ds-toggle-button{border-radius:var(--dimension-radius-half)}.rounded.labelOnly.sc-ds-toggle-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-toggle-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-toggle-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-toggle-button{padding-left:calc(var(--dimension-space-050) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-400);min-width:var(--dimension-size-400);padding:0}.rounded.sizeSM.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-300);min-width:var(--dimension-size-300)}.rounded.sizeXS.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-200);min-width:var(--dimension-size-200)}.inactive.sc-ds-toggle-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.toggle-btn__icon.sc-ds-toggle-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.toggle-btn__label.sc-ds-toggle-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;const l={md:"md",sm:"sm",xs:"xs"};const g={md:d.iconographyMd,sm:d.iconographySm,xs:d.iconographyXs};const b={md:"text-body-medium-emphasis",sm:"text-body-small-emphasis",xs:"text-caption-emphasis"};const u=o(class o extends e{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=n(this,"dsChange");this.elevation="elevated";this.size="md";this.rounded=false;this.pressed=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.dsChange.emit(!this.pressed)}}render(){const o=this.size;const e=l[o];const n=a(g[o],g[o]);const t=b[o];const i=!!this.icon;const d=!!this.label;const c=i&&!d;const u=d&&!i;const v=i&&d;const m=this.background;const p=this.elevation.charAt(0).toUpperCase()+this.elevation.slice(1);const h={"toggle-btn":true,[`elevation${p}`]:true,sizeSM:o==="sm",sizeXS:o==="xs",rounded:this.rounded,inactive:this.inactive,pressed:this.pressed,iconOnly:c,labelOnly:u,iconAndLabel:v,onMedium:m==="medium",onBold:m==="bold",onStrong:m==="strong",onAlwaysDark:m==="always-dark"};return s(r,{key:"5dccc1350f12d5861c84dbda0cba5a569910c168"},s("button",{key:"72a530d6fa2b468c9853d10d8ed7a602396ec4c0",type:"button",class:h,disabled:this.inactive,"aria-label":this.ariaLabel??this.label??"toggle","aria-pressed":this.pressed,onClick:this.handleClick},i&&s("span",{key:"6ceb9ae4685c08cc33b817d616bf38991957549e",class:"toggle-btn__icon",style:{fontSize:`${n}px`}},s("ds-icon",{key:"f536c207e6a9c38d5d7cafe35e0fbfe75629977a",name:this.icon,size:e})),d&&s("span",{key:"65b60a81f1f4f56bd3be7fd7d1b2560a23a3ba5f",class:`toggle-btn__label ${t}`},this.label)))}static get style(){return c()}},[2,"ds-toggle-button",{elevation:[1],label:[1],icon:[1],size:[1],rounded:[4],background:[1],pressed:[1028],inactive:[4],ariaLabel:[1,"aria-label"]}]);function v(){if(typeof customElements==="undefined"){return}const o=["ds-toggle-button","ds-icon"];o.forEach((o=>{switch(o){case"ds-toggle-button":if(!customElements.get(t(o))){customElements.define(t(o),u)}break;case"ds-icon":if(!customElements.get(t(o))){i()}break}}))}v();export{u as T,v as d};
-//# sourceMappingURL=p-C0CUGiLm.js.map

package/dist/components/p-C0CUGiLm.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["toggleButtonCss","ICON_SIZE","md","sm","xs","ICON_TOKEN","TOKEN_DEFAULTS","iconographyMd","iconographySm","iconographyXs","TEXT_CLASS","ToggleButton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","elevation","size","rounded","pressed","inactive","handleClick","dsChange","emit","render","iconSize","iconPx","resolveCssLengthPx","textClass","hasIcon","icon","hasLabel","label","isIconOnly","isLabelOnly","isIconAndLabel","bg","background","elevKey","charAt","toUpperCase","slice","cls","sizeSM","sizeXS","iconOnly","labelOnly","iconAndLabel","onMedium","onBold","onStrong","onAlwaysDark","h","Host","key","type","class","disabled","ariaLabel","onClick","style","fontSize","name"],"sources":["src/wc/components/ToggleButton/ToggleButton.css?tag=ds-toggle-button&encapsulation=scoped","src/wc/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["/* ==========================================================================\n   ToggleButton — hover/pressed via direct background-color + color-mix().\n   Elevation controls the chrome level:\n     elevated — bg-primary + shadow  (default)\n     flat     — border only\n     none     — ghost (transparent, no border, no shadow)\n     floating — bg-primary + FAB-strength shadow\n   ========================================================================== */\n\n.toggle-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  background: transparent;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n\n  /* Interaction — ghost defaults */\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_border: var(--color-border-tertiary);\n}\n\n.toggle-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.toggle-btn:hover:not(.inactive) {\n  background-color: var(--_hover-bg);\n}\n\n.toggle-btn:active:not(.inactive) {\n  background-color: var(--_pressed-bg);\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n/* ==========================================================================\n   Background context — parent surface awareness\n   ========================================================================== */\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/* ==========================================================================\n   Elevation levels\n   ========================================================================== */\n\n/* ── Elevated (default): bg-primary + shadow ───────────────────────────── */\n\n.elevationElevated {\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  color: var(--color-foreground-secondary);\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/* ── Flat: border only, transparent bg ─────────────────────────────────── */\n\n.elevationFlat {\n  box-shadow: inset 0 0 0 1px var(--_border);\n  color: var(--color-foreground-secondary);\n}\n\n/* ── None: ghost — transparent, no border, no shadow ───────────────────── */\n\n.elevationNone {\n  color: var(--color-foreground-secondary);\n}\n\n/* ── Floating: bg-primary + FAB-strength shadow ─────────────────────────── */\n\n.elevationFloating {\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  color: var(--color-foreground-secondary);\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/* ── Fg on bold / strong surface ────────────────────────────────────────── */\n\n.onBold.elevationNone, .onBold.elevationFlat,\n.onStrong.elevationNone, .onStrong.elevationFlat {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n/* ── Fg on always-dark surface ─────────────────────────────────────────── */\n\n.onAlwaysDark.elevationNone, .onAlwaysDark.elevationFlat {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n/* ==========================================================================\n   Pressed state — shared across all elevation levels\n   ========================================================================== */\n\n.pressed {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n/* ==========================================================================\n   Layout\n   ========================================================================== */\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\n/* ==========================================================================\n   Sizes\n   ========================================================================== */\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: 0; }\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/* ==========================================================================\n   Rounded (pill shape)\n   ========================================================================== */\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.iconOnly { width: var(--dimension-size-400); min-width: var(--dimension-size-400); padding: 0; }\n.rounded.sizeSM.iconOnly { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }\n.rounded.sizeXS.iconOnly { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }\n\n/* ==========================================================================\n   Disabled\n   ========================================================================== */\n\n.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* ==========================================================================\n   Inner slots\n   ========================================================================== */\n\n.toggle-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.toggle-btn__label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { IconSize } from '../Icon/Icon';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ToggleButtonElevation  = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ToggleButtonSize       = 'md' | 'sm' | 'xs';\nexport type ToggleButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nconst ICON_SIZE: Record<ToggleButtonSize, IconSize> = { md: 'md', sm: 'sm', xs: 'xs' };\n\nconst ICON_TOKEN: Record<ToggleButtonSize, string> = {\n  md: TOKEN_DEFAULTS.iconographyMd,\n  sm: TOKEN_DEFAULTS.iconographySm,\n  xs: TOKEN_DEFAULTS.iconographyXs,\n};\n\nconst TEXT_CLASS: Record<ToggleButtonSize, string> = {\n  md: 'text-body-medium-emphasis',\n  sm: 'text-body-small-emphasis',\n  xs: 'text-caption-emphasis',\n};\n\n@Component({\n  tag: 'ds-toggle-button',\n  styleUrl: 'ToggleButton.css',\n  scoped: true,\n})\nexport class ToggleButton {\n  /**\n   * Chrome level.\n   *   none     — ghost (transparent, no border, no shadow)\n   *   flat     — border only, transparent bg\n   *   elevated — bg-primary + shadow  [default]\n   *   floating — bg-primary + FAB-strength shadow\n   */\n  @Prop() elevation: ToggleButtonElevation = 'elevated';\n\n  /** Label text. */\n  @Prop() label: string | undefined;\n\n  /**\n   * Icon name for <ds-icon>. Set via JS property.\n   * @example el.icon = 'GridView';\n   */\n  @Prop() icon: string | undefined;\n\n  /** Size: md (32px), sm (24px), xs (16px). */\n  @Prop() size: ToggleButtonSize = 'md';\n\n  /** Pill shape. */\n  @Prop() rounded: boolean = false;\n\n  /** Parent surface context — adjusts hover tokens for colored backgrounds. */\n  @Prop() background: ToggleButtonBackground | undefined;\n\n  /** Controlled pressed state. */\n  @Prop({ mutable: true }) pressed: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() inactive: boolean = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n\n  /** Emits the new pressed value (!pressed) on click. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private handleClick = () => {\n    if (this.inactive) return;\n    this.dsChange.emit(!this.pressed);\n  };\n\n  render() {\n    const size = this.size;\n    const iconSize = ICON_SIZE[size];\n    const iconPx = resolveCssLengthPx(ICON_TOKEN[size], ICON_TOKEN[size]);\n    const textClass = TEXT_CLASS[size];\n    const hasIcon = !!this.icon;\n    const hasLabel = !!this.label;\n    const isIconOnly = hasIcon && !hasLabel;\n    const isLabelOnly = hasLabel && !hasIcon;\n    const isIconAndLabel = hasIcon && hasLabel;\n    const bg = this.background;\n    const elevKey = this.elevation.charAt(0).toUpperCase() + this.elevation.slice(1);\n\n    const cls: Record<string, boolean> = {\n      'toggle-btn': true,\n      [`elevation${elevKey}`]: true,\n      sizeSM: size === 'sm',\n      sizeXS: size === 'xs',\n      rounded: this.rounded,\n      inactive: this.inactive,\n      pressed: this.pressed,\n      iconOnly: isIconOnly,\n      labelOnly: isLabelOnly,\n      iconAndLabel: isIconAndLabel,\n      onMedium: bg === 'medium',\n      onBold: bg === 'bold',\n      onStrong: bg === 'strong',\n      onAlwaysDark: bg === 'always-dark',\n    };\n\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class={cls}\n          disabled={this.inactive}\n          aria-label={this.ariaLabel ?? this.label ?? 'toggle'}\n          aria-pressed={this.pressed}\n          onClick={this.handleClick}\n        >\n          {hasIcon && (\n            <span class=\"toggle-btn__icon\" style={{ fontSize: `${iconPx}px` }}>\n              <ds-icon name={this.icon} size={iconSize} />\n            </span>\n          )}\n          {hasLabel && (\n            <span class={`toggle-btn__label ${textClass}`}>{this.label}</span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yKAAA,MAAMA,EAAkB,IAAM,8hLCQ9B,MAAMC,EAAgD,CAAEC,GAAI,KAAMC,GAAI,KAAMC,GAAI,MAEhF,MAAMC,EAA+C,CACnDH,GAAII,EAAeC,cACnBJ,GAAIG,EAAeE,cACnBJ,GAAIE,EAAeG,eAGrB,MAAMC,EAA+C,CACnDR,GAAI,4BACJC,GAAI,2BACJC,GAAI,yB,MAQOO,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,6EAaUC,KAAAC,UAAmC,WAYnCD,KAAAE,KAAyB,KAGzBF,KAAAG,QAAmB,MAMFH,KAAAI,QAAmB,MAGpCJ,KAAAK,SAAoB,MAOpBL,KAAAM,YAAc,KACpB,GAAIN,KAAKK,SAAU,OACnBL,KAAKO,SAASC,MAAMR,KAAKI,QAAQ,CAuDpC,CApDC,MAAAK,GACE,MAAMP,EAAOF,KAAKE,KAClB,MAAMQ,EAAWzB,EAAUiB,GAC3B,MAAMS,EAASC,EAAmBvB,EAAWa,GAAOb,EAAWa,IAC/D,MAAMW,EAAYnB,EAAWQ,GAC7B,MAAMY,IAAYd,KAAKe,KACvB,MAAMC,IAAahB,KAAKiB,MACxB,MAAMC,EAAaJ,IAAYE,EAC/B,MAAMG,EAAcH,IAAaF,EACjC,MAAMM,EAAiBN,GAAWE,EAClC,MAAMK,EAAKrB,KAAKsB,WAChB,MAAMC,EAAUvB,KAAKC,UAAUuB,OAAO,GAAGC,cAAgBzB,KAAKC,UAAUyB,MAAM,GAE9E,MAAMC,EAA+B,CACnC,aAAc,KACd,CAAC,YAAYJ,KAAY,KACzBK,OAAQ1B,IAAS,KACjB2B,OAAQ3B,IAAS,KACjBC,QAASH,KAAKG,QACdE,SAAUL,KAAKK,SACfD,QAASJ,KAAKI,QACd0B,SAAUZ,EACVa,UAAWZ,EACXa,aAAcZ,EACda,SAAUZ,IAAO,SACjBa,OAAQb,IAAO,OACfc,SAAUd,IAAO,SACjBe,aAAcf,IAAO,eAGvB,OACEgB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAOd,EACPe,SAAU1C,KAAKK,SAAQ,aACXL,KAAK2C,WAAa3C,KAAKiB,OAAS,SAAQ,eACtCjB,KAAKI,QACnBwC,QAAS5C,KAAKM,aAEbQ,GACCuB,EAAA,QAAAE,IAAA,2CAAME,MAAM,mBAAmBI,MAAO,CAAEC,SAAU,GAAGnC,QACnD0B,EAAA,WAAAE,IAAA,2CAASQ,KAAM/C,KAAKe,KAAMb,KAAMQ,KAGnCM,GACCqB,EAAA,QAAAE,IAAA,2CAAME,MAAO,qBAAqB5B,KAAcb,KAAKiB,Q","ignoreList":[]}

package/dist/components/p-DUDppafq.js

@@ -1,2 +0,0 @@
-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-DgDSRPSP.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();export{l as B,b as d};
-//# sourceMappingURL=p-DUDppafq.js.map