@ds-mo/ui 11.0.0 → 11.1.0

package/dist/components/{p-DirD-b2y.js.map → p-ZTugT4as.js.map}

@@ -1 +1 @@
-{"version":3,"names":["panelToolHeaderCss","PanelToolHeader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","showBack","backIcon","backAriaLabel","showMenu","menuAriaLabel","menuTriggerId","menuExpanded","actions","focusMenuTrigger","trigger","el","querySelector","setFocus","render","authoredActions","length","id","icon","ariaLabel","triggerId","controls","menuControls","expanded","haspopup","h","Host","key","class","variant","size","activeFill","hasBorder","onDsClick","event","dsBack","emit","detail","as","emphasis","color","lineTruncation","map","action","undefined","pressed","isActive","isInactive","dsMenuToggle","dsAction","originalEvent"],"sources":["src/wc/components/PanelToolHeader/PanelToolHeader.css?tag=ds-panel-tool-header&encapsulation=scoped","src/wc/components/PanelToolHeader/PanelToolHeader.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n:host {\n  display: block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n}\n\n.panel-tool-header {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  color: var(--color-foreground-primary);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.panel-tool-header__leading,\n.panel-tool-header__trailing {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.panel-tool-header__leading:empty,\n.panel-tool-header__trailing:empty {\n  display: none;\n}\n\n.panel-tool-header__leading {\n  flex: 0 0 auto;\n}\n\n.panel-tool-header__trailing {\n  flex: 0 0 auto;\n  gap: var(--dimension-space-050);\n  justify-content: flex-end;\n}\n\nds-text.panel-tool-header__heading {\n  display: inline-flex;\n  flex: 1 1 0;\n  align-items: center;\n  width: auto;\n  min-width: 0;\n  height: var(--ds-control-height);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  box-sizing: border-box;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport type { PanelToolsHeaderAction } from '../PanelTools/panel-tools-types';\n\n@Component({\n  tag: 'ds-panel-tool-header',\n  styleUrl: 'PanelToolHeader.css',\n  scoped: true,\n})\nexport class PanelToolHeader {\n  @Element() el!: HTMLElement;\n\n  /** Visible heading for the active tool view. */\n  @Prop() heading: string = '';\n  /** Show the leading Back action. */\n  @Prop() showBack: boolean = false;\n  /** Canonical icon for the leading navigation or dismiss action. */\n  @Prop() backIcon: string = 'ChevronLeft';\n  /** Accessible name for the leading navigation or dismiss action. */\n  @Prop() backAriaLabel: string = 'Back';\n  /** Show the trailing options-menu trigger. */\n  @Prop() showMenu: boolean = true;\n  /** Accessible name for the options-menu trigger. */\n  @Prop() menuAriaLabel: string = 'More options';\n  /** Stable id placed on the menu trigger host for ds-menu anchoring. */\n  @Prop() menuTriggerId: string = '';\n  /** Id of the menu controlled by the trigger. */\n  @Prop() menuControls: string | undefined;\n  /** Whether the controlled menu is open. */\n  @Prop() menuExpanded: boolean = false;\n  /** Trailing application-owned icon actions. When present, these replace the legacy menu action. */\n  @Prop() actions: PanelToolsHeaderAction[] = [];\n\n  @Event() dsBack!: EventEmitter<MouseEvent>;\n  @Event() dsMenuToggle!: EventEmitter<MouseEvent>;\n  @Event() dsAction!: EventEmitter<{ id: string; originalEvent: MouseEvent }>;\n\n  @Method()\n  async focusMenuTrigger() {\n    const trigger = this.el.querySelector(\n      'ds-button-unfilled.panel-tool-header__menu, ds-button-unfilled[data-header-action-id=\"menu\"]'\n    ) as (HTMLElement & { setFocus?: () => Promise<void> }) | null;\n    await trigger?.setFocus?.();\n  }\n\n  render() {\n    const authoredActions = this.actions.length > 0;\n    const actions: PanelToolsHeaderAction[] = authoredActions\n      ? this.actions\n      : this.showMenu\n      ? [\n          {\n            id: 'menu',\n            icon: 'Ellipses',\n            ariaLabel: this.menuAriaLabel,\n            triggerId: this.menuTriggerId,\n            controls: this.menuControls,\n            expanded: this.menuExpanded,\n            haspopup: 'menu',\n          },\n        ]\n      : [];\n\n    return (\n      <Host>\n        <header class=\"panel-tool-header\">\n          <div class=\"panel-tool-header__leading\">\n            {this.showBack ? (\n              <ds-button-unfilled\n                class=\"panel-tool-header__back\"\n                variant=\"icon\"\n                icon={this.backIcon}\n                size=\"md\"\n                aria-label={this.backAriaLabel}\n                activeFill={false}\n                hasBorder={false}\n                onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n              />\n            ) : null}\n          </div>\n          <ds-text\n            class=\"panel-tool-header__heading ds-control--md\"\n            as=\"h2\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"primary\"\n            lineTruncation={1}\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"panel-tool-header__trailing\">\n            {actions.map(action => (\n              <ds-button-unfilled\n                key={action.id}\n                id={action.triggerId || undefined}\n                data-header-action-id={action.id}\n                class={{\n                  'panel-tool-header__action': true,\n                  'panel-tool-header__menu': action.id === 'menu',\n                }}\n                variant=\"icon\"\n                icon={action.icon}\n                size=\"md\"\n                aria-label={action.ariaLabel}\n                haspopup={action.haspopup}\n                controls={action.controls}\n                expanded={action.expanded}\n                pressed={action.pressed}\n                isActive={!!action.expanded}\n                isInactive={action.isInactive}\n                activeFill={false}\n                hasBorder={false}\n                onDsClick={(event: CustomEvent<MouseEvent>) => {\n                  if (!authoredActions && action.id === 'menu')\n                    this.dsMenuToggle.emit(event.detail);\n                  this.dsAction.emit({ id: action.id, originalEvent: event.detail });\n                }}\n              />\n            ))}\n          </div>\n        </header>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sPAAA,MAAMA,EAAqB,IAAM,67E,MCQpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,mJASUC,KAAAC,QAAkB,GAElBD,KAAAE,SAAoB,MAEpBF,KAAAG,SAAmB,cAEnBH,KAAAI,cAAwB,OAExBJ,KAAAK,SAAoB,KAEpBL,KAAAM,cAAwB,eAExBN,KAAAO,cAAwB,GAIxBP,KAAAQ,aAAwB,MAExBR,KAAAS,QAAoC,EA6F7C,CAtFC,sBAAMC,GACJ,MAAMC,EAAUX,KAAKY,GAAGC,cACtB,sGAEIF,GAASG,a,CAGjB,MAAAC,GACE,MAAMC,EAAkBhB,KAAKS,QAAQQ,OAAS,EAC9C,MAAMR,EAAoCO,EACtChB,KAAKS,QACLT,KAAKK,SACL,CACE,CACEa,GAAI,OACJC,KAAM,WACNC,UAAWpB,KAAKM,cAChBe,UAAWrB,KAAKO,cAChBe,SAAUtB,KAAKuB,aACfC,SAAUxB,KAAKQ,aACfiB,SAAU,SAGd,GAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAM,qBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,8BACR7B,KAAKE,SACJwB,EAAA,sBACEG,MAAM,0BACNC,QAAQ,OACRX,KAAMnB,KAAKG,SACX4B,KAAK,KAAI,aACG/B,KAAKI,cACjB4B,WAAY,MACZC,UAAW,MACXC,UAAYC,GAAmCnC,KAAKoC,OAAOC,KAAKF,EAAMG,UAEtE,MAENZ,EAAA,WAAAE,IAAA,2CACEC,MAAM,4CACNU,GAAG,KACHT,QAAQ,mBACRU,SAAQ,KACRC,MAAM,UACNC,eAAgB,GAEf1C,KAAKC,SAERyB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACRpB,EAAQkC,KAAIC,GACXlB,EAAA,sBACEE,IAAKgB,EAAO1B,GACZA,GAAI0B,EAAOvB,WAAawB,UAAS,wBACVD,EAAO1B,GAC9BW,MAAO,CACL,4BAA6B,KAC7B,0BAA2Be,EAAO1B,KAAO,QAE3CY,QAAQ,OACRX,KAAMyB,EAAOzB,KACbY,KAAK,KAAI,aACGa,EAAOxB,UACnBK,SAAUmB,EAAOnB,SACjBH,SAAUsB,EAAOtB,SACjBE,SAAUoB,EAAOpB,SACjBsB,QAASF,EAAOE,QAChBC,WAAYH,EAAOpB,SACnBwB,WAAYJ,EAAOI,WACnBhB,WAAY,MACZC,UAAW,MACXC,UAAYC,IACV,IAAKnB,GAAmB4B,EAAO1B,KAAO,OACpClB,KAAKiD,aAAaZ,KAAKF,EAAMG,QAC/BtC,KAAKkD,SAASb,KAAK,CAAEnB,GAAI0B,EAAO1B,GAAIiC,cAAehB,EAAMG,QAAS,Q","ignoreList":[]}
+{"version":3,"names":["panelToolHeaderCss","PanelToolHeader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","showBack","backIcon","backAriaLabel","showMenu","menuAriaLabel","menuTriggerId","menuExpanded","actions","focusMenuTrigger","trigger","el","querySelector","setFocus","render","authoredActions","length","id","icon","ariaLabel","triggerId","controls","menuControls","expanded","haspopup","h","Host","key","class","variant","size","activeFill","hasBorder","onDsClick","event","dsBack","emit","detail","as","emphasis","color","lineTruncation","map","action","undefined","pressed","isActive","isInactive","dsMenuToggle","dsAction","originalEvent"],"sources":["src/wc/components/PanelToolHeader/PanelToolHeader.css?tag=ds-panel-tool-header&encapsulation=scoped","src/wc/components/PanelToolHeader/PanelToolHeader.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n:host {\n  display: block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n}\n\n.panel-tool-header {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  color: var(--color-foreground-primary);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.panel-tool-header__leading,\n.panel-tool-header__trailing {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.panel-tool-header__leading:empty,\n.panel-tool-header__trailing:empty {\n  display: none;\n}\n\n.panel-tool-header__leading {\n  flex: 0 0 auto;\n}\n\n.panel-tool-header__trailing {\n  flex: 0 0 auto;\n  gap: var(--dimension-space-050);\n  justify-content: flex-end;\n}\n\nds-text.panel-tool-header__heading {\n  display: inline-flex;\n  flex: 1 1 0;\n  align-items: center;\n  width: auto;\n  min-width: 0;\n  height: var(--ds-control-height);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  box-sizing: border-box;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport type { PanelToolsHeaderAction } from '../PanelTools/panel-tools-types';\n\n@Component({\n  tag: 'ds-panel-tool-header',\n  styleUrl: 'PanelToolHeader.css',\n  scoped: true,\n})\nexport class PanelToolHeader {\n  @Element() el!: HTMLElement;\n\n  /** Visible heading for the active tool view. */\n  @Prop() heading: string = '';\n  /** Show the leading Back action. */\n  @Prop() showBack: boolean = false;\n  /** Canonical icon for the leading navigation or dismiss action. */\n  @Prop() backIcon: string = 'ChevronLeft';\n  /** Accessible name for the leading navigation or dismiss action. */\n  @Prop() backAriaLabel: string = 'Back';\n  /** Show the trailing options-menu trigger. */\n  @Prop() showMenu: boolean = true;\n  /** Accessible name for the options-menu trigger. */\n  @Prop() menuAriaLabel: string = 'More options';\n  /** Stable id placed on the menu trigger host for ds-menu anchoring. */\n  @Prop() menuTriggerId: string = '';\n  /** Id of the menu controlled by the trigger. */\n  @Prop() menuControls: string | undefined;\n  /** Whether the controlled menu is open. */\n  @Prop() menuExpanded: boolean = false;\n  /** Trailing application-owned icon actions. When present, these replace the legacy menu action. */\n  @Prop() actions: PanelToolsHeaderAction[] = [];\n\n  @Event() dsBack!: EventEmitter<MouseEvent>;\n  @Event() dsMenuToggle!: EventEmitter<MouseEvent>;\n  @Event() dsAction!: EventEmitter<{ id: string; originalEvent: MouseEvent }>;\n\n  @Method()\n  async focusMenuTrigger() {\n    const trigger = this.el.querySelector(\n      'ds-button-unfilled.panel-tool-header__menu, ds-button-unfilled[data-header-action-id=\"menu\"]'\n    ) as (HTMLElement & { setFocus?: () => Promise<void> }) | null;\n    await trigger?.setFocus?.();\n  }\n\n  render() {\n    const authoredActions = this.actions.length > 0;\n    const actions: PanelToolsHeaderAction[] = authoredActions\n      ? this.actions\n      : this.showMenu\n      ? [\n          {\n            id: 'menu',\n            icon: 'Ellipses',\n            ariaLabel: this.menuAriaLabel,\n            triggerId: this.menuTriggerId,\n            controls: this.menuControls,\n            expanded: this.menuExpanded,\n            haspopup: 'menu',\n          },\n        ]\n      : [];\n\n    return (\n      <Host>\n        <header class=\"panel-tool-header\">\n          <div class=\"panel-tool-header__leading\">\n            {this.showBack ? (\n              <ds-button-unfilled\n                class=\"panel-tool-header__back\"\n                variant=\"icon\"\n                icon={this.backIcon}\n                size=\"md\"\n                aria-label={this.backAriaLabel}\n                activeFill={false}\n                hasBorder={false}\n                onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n              />\n            ) : null}\n          </div>\n          <ds-text\n            class=\"panel-tool-header__heading ds-control--md\"\n            as=\"h2\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"primary\"\n            lineTruncation={1}\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"panel-tool-header__trailing\">\n            {actions.map(action => (\n              <ds-button-unfilled\n                key={action.id}\n                id={action.triggerId || undefined}\n                data-header-action-id={action.id}\n                class={{\n                  'panel-tool-header__action': true,\n                  'panel-tool-header__menu': action.id === 'menu',\n                }}\n                variant=\"icon\"\n                icon={action.icon}\n                size=\"md\"\n                aria-label={action.ariaLabel}\n                haspopup={action.haspopup}\n                controls={action.controls}\n                expanded={action.expanded}\n                pressed={action.pressed}\n                isActive={!!action.expanded}\n                isInactive={action.isInactive}\n                activeFill={false}\n                hasBorder={false}\n                onDsClick={(event: CustomEvent<MouseEvent>) => {\n                  if (!authoredActions && action.id === 'menu')\n                    this.dsMenuToggle.emit(event.detail);\n                  this.dsAction.emit({ id: action.id, originalEvent: event.detail });\n                }}\n              />\n            ))}\n          </div>\n        </header>\n      </Host>\n    );\n  }\n}\n"],"mappings":"4OAAA,MAAMA,EAAqB,IAAM,67E,MCQpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,mJASUC,KAAAC,QAAkB,GAElBD,KAAAE,SAAoB,MAEpBF,KAAAG,SAAmB,cAEnBH,KAAAI,cAAwB,OAExBJ,KAAAK,SAAoB,KAEpBL,KAAAM,cAAwB,eAExBN,KAAAO,cAAwB,GAIxBP,KAAAQ,aAAwB,MAExBR,KAAAS,QAAoC,EA6F7C,CAtFC,sBAAMC,GACJ,MAAMC,EAAUX,KAAKY,GAAGC,cACtB,sGAEIF,GAASG,a,CAGjB,MAAAC,GACE,MAAMC,EAAkBhB,KAAKS,QAAQQ,OAAS,EAC9C,MAAMR,EAAoCO,EACtChB,KAAKS,QACLT,KAAKK,SACL,CACE,CACEa,GAAI,OACJC,KAAM,WACNC,UAAWpB,KAAKM,cAChBe,UAAWrB,KAAKO,cAChBe,SAAUtB,KAAKuB,aACfC,SAAUxB,KAAKQ,aACfiB,SAAU,SAGd,GAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAM,qBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,8BACR7B,KAAKE,SACJwB,EAAA,sBACEG,MAAM,0BACNC,QAAQ,OACRX,KAAMnB,KAAKG,SACX4B,KAAK,KAAI,aACG/B,KAAKI,cACjB4B,WAAY,MACZC,UAAW,MACXC,UAAYC,GAAmCnC,KAAKoC,OAAOC,KAAKF,EAAMG,UAEtE,MAENZ,EAAA,WAAAE,IAAA,2CACEC,MAAM,4CACNU,GAAG,KACHT,QAAQ,mBACRU,SAAQ,KACRC,MAAM,UACNC,eAAgB,GAEf1C,KAAKC,SAERyB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACRpB,EAAQkC,KAAIC,GACXlB,EAAA,sBACEE,IAAKgB,EAAO1B,GACZA,GAAI0B,EAAOvB,WAAawB,UAAS,wBACVD,EAAO1B,GAC9BW,MAAO,CACL,4BAA6B,KAC7B,0BAA2Be,EAAO1B,KAAO,QAE3CY,QAAQ,OACRX,KAAMyB,EAAOzB,KACbY,KAAK,KAAI,aACGa,EAAOxB,UACnBK,SAAUmB,EAAOnB,SACjBH,SAAUsB,EAAOtB,SACjBE,SAAUoB,EAAOpB,SACjBsB,QAASF,EAAOE,QAChBC,WAAYH,EAAOpB,SACnBwB,WAAYJ,EAAOI,WACnBhB,WAAY,MACZC,UAAW,MACXC,UAAYC,IACV,IAAKnB,GAAmB4B,EAAO1B,KAAO,OACpClB,KAAKiD,aAAaZ,KAAKF,EAAMG,QAC/BtC,KAAKkD,SAASb,KAAK,CAAEnB,GAAI0B,EAAO1B,GAAIiC,cAAehB,EAAMG,QAAS,Q","ignoreList":[]}

package/dist/components/p-bNpFhP5L.js

@@ -0,0 +1,2 @@
+import{p as t,H as o,h as i,a as s,t as a}from"./index.js";import{d as e}from"./p-CZZYGqKz.js";import{T as n,r as d}from"./p-CrwU83-g.js";const r=()=>`.ds-control--md.sc-ds-tooltip-data-viz-h,.ds-control--md.sc-ds-tooltip-data-viz,.ds-control--sm.sc-ds-tooltip-data-viz-h,.ds-control--sm.sc-ds-tooltip-data-viz,.ds-control--xs.sc-ds-tooltip-data-viz-h,.ds-control--xs.sc-ds-tooltip-data-viz{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-tooltip-data-viz-h,.ds-control--md.sc-ds-tooltip-data-viz{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tooltip-data-viz-h,.ds-control--sm.sc-ds-tooltip-data-viz{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tooltip-data-viz-h,.ds-control--xs.sc-ds-tooltip-data-viz{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-tooltip-data-viz-h{position:absolute;z-index:var(--dimension-z-index-tooltip);display:block;box-sizing:border-box;background-color:var(--color-translucent-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md));border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;opacity:0}.tooltip-data-viz--visible.sc-ds-tooltip-data-viz-h{animation:tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards}.tooltip-data-viz__item.sc-ds-tooltip-data-viz{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--dimension-space-025);padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-data-viz__label.sc-ds-tooltip-data-viz,.tooltip-data-viz__value.sc-ds-tooltip-data-viz{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}@keyframes tooltip-data-viz-fade-in{from{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.tooltip-data-viz--visible.sc-ds-tooltip-data-viz-h{animation:none;opacity:1}}`;const l=12;const c=8;const p=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.value="";this.label="";this.x=0;this.y=0;this.delay=n.animationDelayInstant;this.side="right";this.align="bottom";this.visible=false;this.delayTimer=null}componentDidLoad(){this.scheduleShow();this.calculatePlacement()}disconnectedCallback(){this.clearDelayTimer()}onAnchorChange(){requestAnimationFrame((()=>this.calculatePlacement()))}onDelayChange(){if(!this.visible)this.scheduleShow()}get showDelayMs(){return d(this.delay,n.animationDelayInstant)}clearDelayTimer(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}}scheduleShow(){this.clearDelayTimer();this.visible=false;const t=this.showDelayMs;if(t<=0){this.visible=true;return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.visible=true;requestAnimationFrame((()=>this.calculatePlacement()))}),t)}calculatePlacement(){const t=this.el.getBoundingClientRect();if(!t.width||!t.height)return;const o=t.right>window.innerWidth-c?"left":"right";const i=t.bottom>window.innerHeight-c?"top":"bottom";if(o!==this.side)this.side=o;if(i!==this.align)this.align=i}render(){const t=this.side==="right"?`${l}px`:`calc(-100% - ${l}px)`;const o=this.align==="bottom"?`${l}px`:`calc(-100% - ${l}px)`;return i(s,{key:"9409f7bbef42ec0d55e8d0638bc0d64ea8f22173",class:{"tooltip-data-viz":true,"tooltip-data-viz--visible":this.visible},style:{left:`${this.x}px`,top:`${this.y}px`,transform:`translate(${t}, ${o})`}},i("div",{key:"2b7eebab49012f0a30a64d8b53d237331059b966",class:"tooltip-data-viz__item ds-control--md"},i("ds-text",{key:"b1d5010abede1ba402ffd1dab203a41fba0253c4",class:"tooltip-data-viz__label",as:"span",variant:"text-body-medium",color:"var(--color-translucent-foreground-secondary)"},this.label),i("ds-text",{key:"2b9fcd8c68a2896874e78f228e8ae5c9bf05a192",class:"tooltip-data-viz__value",as:"span",variant:"text-body-medium",emphasis:true,color:"var(--color-translucent-foreground-primary)"},this.value)))}get el(){return this}static get watchers(){return{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}}static get style(){return r()}},[2,"ds-tooltip-data-viz",{value:[8],label:[1],x:[2],y:[2],delay:[8],side:[32],align:[32],visible:[32]},undefined,{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip-data-viz","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip-data-viz":if(!customElements.get(a(t))){customElements.define(a(t),p)}break;case"ds-text":if(!customElements.get(a(t))){e()}break}}))}h();export{p as T,h as d};
+//# sourceMappingURL=p-bNpFhP5L.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tooltipDataVizCss","CURSOR_OFFSET_PX","VIEWPORT_PAD_PX","TooltipDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","label","x","y","delay","TOKEN_DEFAULTS","animationDelayInstant","side","align","visible","delayTimer","componentDidLoad","scheduleShow","calculatePlacement","disconnectedCallback","clearDelayTimer","onAnchorChange","requestAnimationFrame","onDelayChange","showDelayMs","resolveCssTimeMs","clearTimeout","ms","setTimeout","rect","el","getBoundingClientRect","width","height","nextSide","right","window","innerWidth","nextAlign","bottom","innerHeight","render","translateX","translateY","h","Host","key","class","style","left","top","transform","as","variant","color","emphasis"],"sources":["src/wc/components/TooltipDataViz/TooltipDataViz.css?tag=ds-tooltip-data-viz&encapsulation=scoped","src/wc/components/TooltipDataViz/TooltipDataViz.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n/* No padding here — the item div below owns all the spacing, so there's exactly one padding\n   box instead of stacking the host's padding on top of the item's. */\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-translucent-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-data-viz--visible) {\n  animation: tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards;\n}\n\n/* Density: md control recipe (height / pad / label inset) — non-interactive, no interaction-fill. */\n.tooltip-data-viz__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-025);\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n.tooltip-data-viz__label,\n.tooltip-data-viz__value {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n}\n\n@keyframes tooltip-data-viz-fade-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-data-viz--visible) {\n    animation: none;\n    opacity: 1;\n  }\n}\n","import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipDataVizSide = 'left' | 'right';\nexport type TooltipDataVizAlign = 'top' | 'bottom';\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point,\n * standalone donut slice, …). Donut compositions suppress it when a visible\n * legend already surfaces the hovered slice.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n  tag: 'ds-tooltip-data-viz',\n  styleUrl: 'TooltipDataViz.css',\n  scoped: true,\n})\nexport class TooltipDataViz {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\n  /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n  @Prop() x: number = 0;\n  @Prop() y: number = 0;\n\n  /**\n   * Show delay after mount before the callout appears.\n   * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n   * immediate feedback while scrubbing; prefer the default. Mount once per\n   * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n  @State() private side: TooltipDataVizSide = 'right';\n  @State() private align: TooltipDataVizAlign = 'bottom';\n  @State() private visible: boolean = false;\n\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.scheduleShow();\n    this.calculatePlacement();\n  }\n\n  disconnectedCallback() {\n    this.clearDelayTimer();\n  }\n\n  @Watch('x')\n  @Watch('y')\n  onAnchorChange() {\n    requestAnimationFrame(() => this.calculatePlacement());\n  }\n\n  @Watch('delay')\n  onDelayChange() {\n    if (!this.visible) this.scheduleShow();\n  }\n\n  private get showDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n  }\n\n  private clearDelayTimer() {\n    if (this.delayTimer) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n  }\n\n  private scheduleShow() {\n    this.clearDelayTimer();\n    this.visible = false;\n    const ms = this.showDelayMs;\n    if (ms <= 0) {\n      this.visible = true;\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      this.visible = true;\n      requestAnimationFrame(() => this.calculatePlacement());\n    }, ms);\n  }\n\n  private calculatePlacement() {\n    const rect = this.el.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n\n    const nextSide: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipDataVizAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n    if (nextSide !== this.side) this.side = nextSide;\n    if (nextAlign !== this.align) this.align = nextAlign;\n  }\n\n  render() {\n    const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n\n    return (\n      <Host\n        class={{\n          'tooltip-data-viz': true,\n          'tooltip-data-viz--visible': this.visible,\n        }}\n        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n      >\n        <div class=\"tooltip-data-viz__item ds-control--md\">\n          <ds-text\n            class=\"tooltip-data-viz__label\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"var(--color-translucent-foreground-secondary)\"\n          >\n            {this.label}\n          </ds-text>\n          <ds-text\n            class=\"tooltip-data-viz__value\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"var(--color-translucent-foreground-primary)\"\n          >\n            {this.value}\n          </ds-text>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAoB,IAAM,s3ECGhC,MAAMC,EAAmB,GACzB,MAAMC,EAAkB,E,MA0BXC,EAAcC,EAAA,MAAAD,UAAAE,EAL3B,WAAAC,CAAAC,G,4CAQUC,KAAAC,MAAyB,GACzBD,KAAAE,MAAgB,GAEhBF,KAAAG,EAAY,EACZH,KAAAI,EAAY,EASZJ,KAAAK,MAAyBC,EAAeC,sBAE/BP,KAAAQ,KAA2B,QAC3BR,KAAAS,MAA6B,SAC7BT,KAAAU,QAAmB,MAE5BV,KAAAW,WAAmD,IA6F5D,CA3FC,gBAAAC,GACEZ,KAAKa,eACLb,KAAKc,oB,CAGP,oBAAAC,GACEf,KAAKgB,iB,CAKP,cAAAC,GACEC,uBAAsB,IAAMlB,KAAKc,sB,CAInC,aAAAK,GACE,IAAKnB,KAAKU,QAASV,KAAKa,c,CAG1B,eAAYO,GACV,OAAOC,EAAiBrB,KAAKK,MAAOC,EAAeC,sB,CAG7C,eAAAS,GACN,GAAIhB,KAAKW,WAAY,CACnBW,aAAatB,KAAKW,YAClBX,KAAKW,WAAa,I,EAId,YAAAE,GACNb,KAAKgB,kBACLhB,KAAKU,QAAU,MACf,MAAMa,EAAKvB,KAAKoB,YAChB,GAAIG,GAAM,EAAG,CACXvB,KAAKU,QAAU,KACf,M,CAEFV,KAAKW,WAAaa,YAAW,KAC3BxB,KAAKW,WAAa,KAClBX,KAAKU,QAAU,KACfQ,uBAAsB,IAAMlB,KAAKc,sBAAqB,GACrDS,E,CAGG,kBAAAT,GACN,MAAMW,EAAOzB,KAAK0B,GAAGC,wBACrB,IAAKF,EAAKG,QAAUH,EAAKI,OAAQ,OAEjC,MAAMC,EAA+BL,EAAKM,MAAQC,OAAOC,WAAavC,EAAkB,OAAS,QACjG,MAAMwC,EAAiCT,EAAKU,OAASH,OAAOI,YAAc1C,EAAkB,MAAQ,SAEpG,GAAIoC,IAAa9B,KAAKQ,KAAMR,KAAKQ,KAAOsB,EACxC,GAAII,IAAclC,KAAKS,MAAOT,KAAKS,MAAQyB,C,CAG7C,MAAAG,GACE,MAAMC,EAAatC,KAAKQ,OAAS,QAAU,GAAGf,MAAuB,gBAAgBA,OACrF,MAAM8C,EAAavC,KAAKS,QAAU,SAAW,GAAGhB,MAAuB,gBAAgBA,OAEvF,OACE+C,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,mBAAoB,KACpB,4BAA6B3C,KAAKU,SAEpCkC,MAAO,CAAEC,KAAM,GAAG7C,KAAKG,MAAO2C,IAAK,GAAG9C,KAAKI,MAAO2C,UAAW,aAAaT,MAAeC,OAEzFC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,yCACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,0BACNK,GAAG,OACHC,QAAQ,mBACRC,MAAM,iDAELlD,KAAKE,OAERsC,EAAA,WAAAE,IAAA,2CACEC,MAAM,0BACNK,GAAG,OACHC,QAAQ,mBACRE,SAAQ,KACRD,MAAM,+CAELlD,KAAKC,Q","ignoreList":[]}

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-21T22:37:19",
+  "timestamp": "2026-07-21T23:24:49",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -1983,6 +1983,67 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "background",
+          "type": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"strong\" | \"translucent\" | undefined",
+          "complexType": {
+            "original": "ButtonFilledBackground | undefined",
+            "resolved": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"strong\" | \"translucent\" | undefined",
+            "references": {
+              "ButtonFilledBackground": {
+                "location": "local",
+                "path": "/home/runner/work/compomo/compomo/src/wc/components/ButtonFilled/ButtonFilled.tsx",
+                "id": "src/wc/components/ButtonFilled/ButtonFilled.tsx::ButtonFilledBackground"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "background",
+          "reflectToAttr": false,
+          "docs": "Actual parent surface context for the optional inset border color only.\nOmit on primary and secondary surfaces.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "always-dark",
+              "type": "string"
+            },
+            {
+              "value": "bold",
+              "type": "string"
+            },
+            {
+              "value": "faint",
+              "type": "string"
+            },
+            {
+              "value": "inverted",
+              "type": "string"
+            },
+            {
+              "value": "media",
+              "type": "string"
+            },
+            {
+              "value": "medium",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "translucent",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "contrast",
           "type": "\"bold\" | \"faint\" | \"medium\" | \"strong\"",
@@ -2031,6 +2092,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "hasBorder",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "has-border",
+          "reflectToAttr": false,
+          "docs": "Show a 1px secondary inset border.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "icon",
           "type": "string",
@@ -3939,7 +4029,7 @@
           "mutable": false,
           "attr": "active-label",
           "reflectToAttr": false,
-          "docs": "Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n`ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.\nFalls back to this component's own pointer/focus hover when unset.\nSlice hover dims peer slices and emits `dsSliceHover` for legend sync — no data-viz\ntooltip (the legend already surfaces label/value).",
+          "docs": "Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n`ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.\nFalls back to this component's own pointer/focus hover when unset.\nSlice hover dims peer slices and emits `dsSliceHover` for legend sync. External\nhighlight never opens the local tooltip.",
           "docsTags": [
             {
               "name": "default",
@@ -4163,6 +4253,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "showTooltip",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-tooltip",
+          "reflectToAttr": false,
+          "docs": "Show a chart-owned value callout for genuine pointer or keyboard focus.\nDisable when a visible legend already owns persistent label and value detail.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "true"
+            }
+          ],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "size",
           "type": "number | undefined",
@@ -4252,8 +4371,17 @@
       "parts": [],
       "states": [],
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
+      "dependencies": [
+        "ds-tooltip-data-viz"
+      ],
+      "dependencyGraph": {
+        "ds-chart-donut": [
+          "ds-tooltip-data-viz"
+        ],
+        "ds-tooltip-data-viz": [
+          "ds-text"
+        ]
+      }
     },
     {
       "filePath": "src/wc/components/ChartLegend/ChartLegend.tsx",
@@ -19372,7 +19500,7 @@
       "filePath": "src/wc/components/TooltipDataViz/TooltipDataViz.tsx",
       "encapsulation": "scoped",
       "tag": "ds-tooltip-data-viz",
-      "docs": "Positioned value/label callout for chart hover interactions (bar, line point, …).\nDonut charts skip this — legend sync already surfaces the hovered slice.\nUnlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\ncharts hover-highlight data that lives inside an SVG, so the chart itself computes\nthe anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n\nRenders `position: absolute` — place inside a `position: relative` chart wrapper,\nwith `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\nof the anchor (matching cursor-following tooltips), flipping to whichever side/edge\nkeeps it on-screen.\n\nMount (or remount) when a hover session starts so `delay` applies once per hover;\nkeep the instance mounted while the cursor moves so tracking stays instant.",
+      "docs": "Positioned value/label callout for chart hover interactions (bar, line point,\nstandalone donut slice, …). Donut compositions suppress it when a visible\nlegend already surfaces the hovered slice.\nUnlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\ncharts hover-highlight data that lives inside an SVG, so the chart itself computes\nthe anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n\nRenders `position: absolute` — place inside a `position: relative` chart wrapper,\nwith `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\nof the anchor (matching cursor-following tooltips), flipping to whichever side/edge\nkeeps it on-screen.\n\nMount (or remount) when a hover session starts so `delay` applies once per hover;\nkeep the instance mounted while the cursor moves so tracking stays instant.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -19535,13 +19663,18 @@
       "slots": [],
       "parts": [],
       "states": [],
-      "dependents": [],
+      "dependents": [
+        "ds-chart-donut"
+      ],
       "dependencies": [
         "ds-text"
       ],
       "dependencyGraph": {
         "ds-tooltip-data-viz": [
           "ds-text"
+        ],
+        "ds-chart-donut": [
+          "ds-tooltip-data-viz"
         ]
       }
     },
@@ -19647,6 +19780,11 @@
       "docstring": "",
       "path": "src/wc/components/ButtonFilled/ButtonFilled.tsx"
     },
+    "src/wc/components/ButtonFilled/ButtonFilled.tsx::ButtonFilledBackground": {
+      "declaration": "export type ChoiceBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';",
+      "docstring": "",
+      "path": "src/wc/components/ButtonFilled/ButtonFilled.tsx"
+    },
     "src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx::ButtonUnfilledVariant": {
       "declaration": "export type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';",
       "docstring": "",

package/dist/mcp/cli.js

@@ -31033,25 +31033,21 @@ ${component.registryDependencies.map((dependency) => `- \`${dependency}\``).join
 
 ${[...required2, ...optional2].join("\n")}`);
   }
-  if (meta3.intent) {
-    const intent = [
-      `**Use when**
+  const intent = [
+    `**Use when**
 ${meta3.intent.useWhen.map((item) => `- ${item}`).join("\n")}`,
-      `**Avoid when**
+    `**Avoid when**
 ${meta3.intent.avoidWhen.map((item) => `- ${item}`).join("\n")}`,
-      `**Accessibility**
+    `**Accessibility**
 ${meta3.intent.accessibility.map((item) => `- ${item}`).join("\n")}`
-    ];
-    sections.push(`## Design Intent
+  ];
+  sections.push(`## Design Intent
 
 ${intent.join("\n\n")}`);
-    if (meta3.intent.patterns?.length) {
-      sections.push(`## Composition Patterns
+  if (meta3.intent.patterns?.length) {
+    sections.push(`## Composition Patterns
 
 ${meta3.intent.patterns.map((pattern) => `- \`${pattern}\` \u2014 retrieve it with \`get_pattern\` for executable framework recipes.`).join("\n")}`);
-    }
-  } else {
-    sections.push("## Design Intent\n\nSemantic guidance is migration-pending. Use the generated API and Storybook examples, and verify component choice against adjacent components.");
   }
   if (consumption.complexPropertyNote) sections.push(`## Framework Note
 

package/dist/mcp-data/registry/button-filled.json

@@ -53,6 +53,8 @@
         "Use only one filled action per local decision area; render all secondary actions with ButtonUnfilled.",
         "Choose brand or neutral for general commands. Reserve positive, negative, warning, and caution for matching action consequences, and AI, guide, or walkthrough for actions that enter those feature experiences.",
         "Contrast serves both surface adaptation and hierarchy, but never permits a second filled action in the same decision area.",
+        "The optional inset border is off by default. Enable it only when the filled action needs an explicit edge against its parent surface.",
+        "Parent surface context changes only the optional inset border color. Contrast continues to own the button fill, foreground, hover, pressed, and focus treatments; never use surface context to change action hierarchy.",
         "Rounded changes only the control radius to the half-radius treatment; it does not change hierarchy, size, variant, intent, or interaction semantics.",
         "Loading prevents duplicate activation without applying inactive opacity or removing the current keyboard focus.",
         "Icon and icon-label loading replace the icon in place. Label-only loading centers the loader while preserving the button's measured width."
@@ -89,6 +91,14 @@
           "mutable": false,
           "description": "Accessible name override. Required for icon-only buttons."
         },
+        "background": {
+          "type": "ButtonFilledBackground | undefined",
+          "resolvedType": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"strong\" | \"translucent\" | undefined",
+          "attribute": "background",
+          "required": false,
+          "mutable": false,
+          "description": "Actual parent surface context for the optional inset border color only.\nOmit on primary and secondary surfaces."
+        },
         "contrast": {
           "type": "ButtonFilledContrast",
           "resolvedType": "\"bold\" | \"faint\" | \"medium\" | \"strong\"",
@@ -98,6 +108,15 @@
           "mutable": false,
           "description": "Background fill weight. Foreground uses the paired contrast token:\nbold → faint, strong → medium, medium → strong, faint → bold."
         },
+        "hasBorder": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "has-border",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Show a 1px secondary inset border."
+        },
         "icon": {
           "type": "string",
           "resolvedType": "string",
@@ -216,6 +235,14 @@
         "mutable": false,
         "description": "Accessible name override. Required for icon-only buttons."
       },
+      "background": {
+        "type": "ButtonFilledBackground | undefined",
+        "resolvedType": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"strong\" | \"translucent\" | undefined",
+        "attribute": "background",
+        "required": false,
+        "mutable": false,
+        "description": "Actual parent surface context for the optional inset border color only.\nOmit on primary and secondary surfaces."
+      },
       "contrast": {
         "type": "ButtonFilledContrast",
         "resolvedType": "\"bold\" | \"faint\" | \"medium\" | \"strong\"",
@@ -225,6 +252,15 @@
         "mutable": false,
         "description": "Background fill weight. Foreground uses the paired contrast token:\nbold → faint, strong → medium, medium → strong, faint → bold."
       },
+      "hasBorder": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "has-border",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Show a 1px secondary inset border."
+      },
       "icon": {
         "type": "string",
         "resolvedType": "string",
@@ -374,12 +410,12 @@
   "files": [
     {
       "path": "src/wc/components/ButtonFilled/ButtonFilled.css",
-      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n  display: inline-flex;\n  outline: none;\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-filled-host--icon.ds-control-width--hug) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-filled-host--icon.ds-control-width--fill) {\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-filled {\n  width: 100%;\n}\n\n.button-filled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  background-color: var(--ds-button-filled-bg);\n  color: var(--ds-button-filled-fg);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition:\n    background-color var(--effect-motion-short-2),\n    color var(--effect-motion-short-2),\n    transform var(--effect-motion-short-2);\n  /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n.button-filled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-filled--rounded {\n  --ds-control-radius: var(--dimension-radius-half);\n}\n\n.button-filled:active:not(:disabled):not(.ds-control-inactive) {\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .button-filled {\n    transition:\n      background-color var(--effect-motion-short-2),\n      color var(--effect-motion-short-2);\n  }\n\n  .button-filled:active:not(:disabled):not(.ds-control-inactive) {\n    transform: none;\n  }\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.button-filled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-filled__label {\n  position: relative;\n  z-index: 2;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.button-filled__label--loading {\n  visibility: hidden;\n}\n\n.button-filled > .button-filled__loader-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-bold-neutral);\n  --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-bold-ai);\n  --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-bold-negative);\n  --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-bold-warning);\n  --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-bold-caution);\n  --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-bold-positive);\n  --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-bold-guide);\n  --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-strong-neutral);\n  --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-strong-brand);\n  --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-strong-ai);\n  --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-strong-negative);\n  --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-strong-warning);\n  --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-strong-caution);\n  --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-strong-positive);\n  --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-strong-guide);\n  --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-medium-neutral);\n  --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-medium-brand);\n  --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-medium-ai);\n  --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-medium-negative);\n  --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-medium-warning);\n  --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-medium-caution);\n  --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-medium-positive);\n  --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-medium-guide);\n  --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-faint-neutral);\n  --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-faint-brand);\n  --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-faint-ai);\n  --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-faint-negative);\n  --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-faint-warning);\n  --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-faint-caution);\n  --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-faint-positive);\n  --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-faint-guide);\n  --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n  display: inline-flex;\n  outline: none;\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n  --ds-button-filled-border: var(--color-border-secondary);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-filled-host--icon.ds-control-width--hug) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-filled-host--icon.ds-control-width--fill) {\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-filled {\n  width: 100%;\n}\n\n.button-filled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  background-color: var(--ds-button-filled-bg);\n  color: var(--ds-button-filled-fg);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition:\n    background-color var(--effect-motion-short-2),\n    color var(--effect-motion-short-2),\n    transform var(--effect-motion-short-2);\n  /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n.button-filled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-filled--rounded {\n  --ds-control-radius: var(--dimension-radius-half);\n}\n\n/* Inset stroke via interaction-fill ::after (above hover and pressed washes). */\n.button-filled--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-button-filled-border);\n}\n\n/* Preserve the border while inactive, when interaction-fill is intentionally omitted. */\n.button-filled--bordered:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/*\n * Parent-surface context affects only the optional inset border.\n * Intent + contrast continue to own fill, foreground, and interaction overlays.\n */\n.button-filled--background-medium {\n  --ds-button-filled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-filled--background-bold {\n  --ds-button-filled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-filled--background-strong {\n  --ds-button-filled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-filled--background-translucent {\n  --ds-button-filled-border: var(--color-translucent-border-secondary);\n}\n\n.button-filled--background-inverted {\n  --ds-button-filled-border: var(--color-inverted-border-secondary);\n}\n\n.button-filled--background-media {\n  --ds-button-filled-border: var(--color-media-border-secondary);\n}\n\n.button-filled--background-always-dark {\n  --ds-button-filled-border: var(--color-always-dark-border-secondary);\n}\n\n.button-filled:active:not(:disabled):not(.ds-control-inactive) {\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .button-filled {\n    transition:\n      background-color var(--effect-motion-short-2),\n      color var(--effect-motion-short-2);\n  }\n\n  .button-filled:active:not(:disabled):not(.ds-control-inactive) {\n    transform: none;\n  }\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.button-filled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-filled__label {\n  position: relative;\n  z-index: 2;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.button-filled__label--loading {\n  visibility: hidden;\n}\n\n.button-filled > .button-filled__loader-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-bold-neutral);\n  --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-bold-ai);\n  --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-bold-negative);\n  --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-bold-warning);\n  --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-bold-caution);\n  --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-bold-positive);\n  --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-bold-guide);\n  --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-strong-neutral);\n  --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-strong-brand);\n  --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-strong-ai);\n  --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-strong-negative);\n  --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-strong-warning);\n  --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-strong-caution);\n  --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-strong-positive);\n  --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-strong-guide);\n  --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-medium-neutral);\n  --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-medium-brand);\n  --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-medium-ai);\n  --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-medium-negative);\n  --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-medium-warning);\n  --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-medium-caution);\n  --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-medium-positive);\n  --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-medium-guide);\n  --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-faint-neutral);\n  --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-faint-brand);\n  --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-faint-ai);\n  --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-faint-negative);\n  --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-faint-warning);\n  --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-faint-caution);\n  --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-faint-positive);\n  --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-faint-guide);\n  --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/ButtonFilled/ButtonFilled.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type ButtonFilledIntent =\n  | 'neutral'\n  | 'brand'\n  | 'ai'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive'\n  | 'guide'\n  | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonFilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonFilledWidth = ControlWidth;\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonFilledSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-button-filled',\n  styleUrl: 'ButtonFilled.css',\n  scoped: true,\n})\nexport class ButtonFilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonFilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonFilledSize = 'md';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonFilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Semantic colour intent. */\n  @Prop() intent: ButtonFilledIntent = 'brand';\n\n  /**\n   * Background fill weight. Foreground uses the paired contrast token:\n   * bold → faint, strong → medium, medium → strong, faint → bold.\n   */\n  @Prop() contrast: ButtonFilledContrast = 'bold';\n\n  /** Use the half-radius treatment instead of the default control radius. */\n  @Prop() rounded: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n  @Prop() isLoading: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsClick.emit(event);\n  };\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n    return undefined;\n  }\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-filled': true,\n      'ds-focus-ring-inset': true,\n      'ds-interaction-fill': !this.isInactive,\n      /* Bold is the default filled contrast — on-bold interaction tokens. */\n      'ds-interaction-fill--on-bold': this.contrast === 'bold',\n      'ds-interaction-fill--on-strong': this.contrast === 'strong',\n      'ds-interaction-fill--on-medium': this.contrast === 'medium',\n      /* faint → default app interaction tokens (no --on-*). */\n      'ds-control-inactive': this.isInactive,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-filled--icon': this.variant === 'icon',\n      'button-filled--label': this.variant === 'label',\n      'button-filled--icon-label': this.variant === 'icon-label',\n      'button-filled--rounded': this.rounded,\n      [`button-filled--intent-${this.intent}`]: true,\n      [`button-filled--contrast-${this.contrast}`]: this.contrast !== 'bold',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-filled-host': true,\n          'button-filled-host--icon': this.variant === 'icon',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          aria-label={this.accessibleName}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          aria-disabled={this.isLoading ? 'true' : undefined}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-filled__icon-wrap ds-interaction-fill__content\">\n              {this.isLoading\n                ? <ds-loader size={iconSize} color=\"inherit\" />\n                : <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              }\n            </span>\n          )}\n          {this.showLabel && (\n            <ds-text\n              class={{\n                'button-filled__label': true,\n                'button-filled__label--loading': this.isLoading && this.variant === 'label',\n                'ds-interaction-fill__content': true,\n              }}\n              as=\"span\"\n              variant={textVariant}\n              emphasis\n              color=\"inherit\"\n            >\n              {this.label}\n            </ds-text>\n          )}\n          {this.isLoading && this.variant === 'label' && (\n            <span class=\"button-filled__loader-overlay ds-interaction-fill__content\">\n              <ds-loader size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\nimport type { ChoiceBackground } from '../../utils/choice-list';\n\nexport type ButtonFilledIntent =\n  | 'neutral'\n  | 'brand'\n  | 'ai'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive'\n  | 'guide'\n  | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledBackground = ChoiceBackground;\n\nexport type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonFilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonFilledWidth = ControlWidth;\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonFilledSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-button-filled',\n  styleUrl: 'ButtonFilled.css',\n  scoped: true,\n})\nexport class ButtonFilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonFilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonFilledSize = 'md';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonFilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Semantic colour intent. */\n  @Prop() intent: ButtonFilledIntent = 'brand';\n\n  /**\n   * Background fill weight. Foreground uses the paired contrast token:\n   * bold → faint, strong → medium, medium → strong, faint → bold.\n   */\n  @Prop() contrast: ButtonFilledContrast = 'bold';\n\n  /** Show a 1px secondary inset border. */\n  @Prop() hasBorder: boolean = false;\n\n  /**\n   * Actual parent surface context for the optional inset border color only.\n   * Omit on primary and secondary surfaces.\n   */\n  @Prop() background: ButtonFilledBackground | undefined;\n\n  /** Use the half-radius treatment instead of the default control radius. */\n  @Prop() rounded: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n  @Prop() isLoading: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsClick.emit(event);\n  };\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n    return undefined;\n  }\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-filled': true,\n      'ds-focus-ring-inset': true,\n      'ds-interaction-fill': !this.isInactive,\n      /* Bold is the default filled contrast — on-bold interaction tokens. */\n      'ds-interaction-fill--on-bold': this.contrast === 'bold',\n      'ds-interaction-fill--on-strong': this.contrast === 'strong',\n      'ds-interaction-fill--on-medium': this.contrast === 'medium',\n      /* faint → default app interaction tokens (no --on-*). */\n      'button-filled--bordered': this.hasBorder,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-filled--icon': this.variant === 'icon',\n      'button-filled--label': this.variant === 'label',\n      'button-filled--icon-label': this.variant === 'icon-label',\n      'button-filled--rounded': this.rounded,\n      [`button-filled--background-${this.background}`]: this.background !== undefined,\n      [`button-filled--intent-${this.intent}`]: true,\n      [`button-filled--contrast-${this.contrast}`]: this.contrast !== 'bold',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-filled-host': true,\n          'button-filled-host--icon': this.variant === 'icon',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          aria-label={this.accessibleName}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          aria-disabled={this.isLoading ? 'true' : undefined}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-filled__icon-wrap ds-interaction-fill__content\">\n              {this.isLoading\n                ? <ds-loader size={iconSize} color=\"inherit\" />\n                : <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              }\n            </span>\n          )}\n          {this.showLabel && (\n            <ds-text\n              class={{\n                'button-filled__label': true,\n                'button-filled__label--loading': this.isLoading && this.variant === 'label',\n                'ds-interaction-fill__content': true,\n              }}\n              as=\"span\"\n              variant={textVariant}\n              emphasis\n              color=\"inherit\"\n            >\n              {this.label}\n            </ds-text>\n          )}\n          {this.isLoading && this.variant === 'label' && (\n            <span class=\"button-filled__loader-overlay ds-interaction-fill__content\">\n              <ds-loader size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/card-data-viz-donut.json

@@ -2,15 +2,84 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "card-data-viz-donut",
   "title": "CardDataVizDonut",
-  "description": "Donut data-viz card on dedicated ds-card-shell-data-viz chrome — fill chart region, content-sized legend, header filter action, and chart↔legend hover sync.",
+  "description": "Canonical donut-plus-legend dashboard card with shared data-viz chrome, a filter action, fill chart region, content-sized legend, and built-in hover synchronization.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
     "distribution": "npm",
     "storybook": "https://zainadeel.github.io/compomo/?path=/story/card-data-viz-donut",
     "source": "src/wc/components/CardDataVizDonut/CardDataVizDonut.tsx",
-    "intentStatus": "migration-pending",
-    "intent": null,
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "specialized",
+      "status": "experimental",
+      "summary": "Canonical donut-plus-legend dashboard card with shared data-viz chrome, a filter action, fill chart region, content-sized legend, and built-in hover synchronization.",
+      "useWhen": [
+        "A dashboard widget needs the standard donut and visible legend composition in one data-viz card.",
+        "Chart slices and legend rows should cross-highlight without application hover wiring.",
+        "The card needs the shared header filter action while the application owns filter state and menu content."
+      ],
+      "avoidWhen": [
+        "The visualization is a bar, line, metric, or custom chart; compose CardShellDataViz directly.",
+        "The product needs a custom legend treatment such as chips, external stat callouts, or selectable filters.",
+        "The surface is a settings section or generic content card."
+      ],
+      "alternatives": [
+        {
+          "when": "The visualization needs shared data-viz chrome without the canonical donut layout.",
+          "component": "component:ds-card-shell-data-viz",
+          "reason": "CardShellDataViz owns only the header, actions, width, and body boundary."
+        },
+        {
+          "when": "A donut and legend need a custom layout without card chrome.",
+          "component": "component:ds-chart-donut",
+          "reason": "Compose the chart and ChartLegend directly and own their layout and hover synchronization."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-card-shell-data-viz",
+        "component:ds-chart-donut",
+        "component:ds-chart-legend",
+        "component:ds-empty-state",
+        "component:ds-skeleton"
+      ],
+      "accessibility": [
+        "Provide a concise card heading and a localized filter label for the icon-only header action.",
+        "Keep essential values available through the chart and visible legend rather than encoding meaning through slice color alone.",
+        "The application owns meaningful loading, empty, and error status copy when either content region is temporarily replaced or absent."
+      ],
+      "states": [
+        "The chart region fills remaining card height while the legend remains content-sized.",
+        "Chart and legend regions render only when their corresponding slots contain content, allowing the owner to substitute loading, empty, or error presentations without dangling region padding.",
+        "Hover synchronization changes highlight only; it never represents selection, filtering, or navigation.",
+        "The filter action emits intent while the parent owns popup content, applied constraints, and data updates."
+      ],
+      "responsiveBehavior": [
+        "Select the token-based card width appropriate to the parent grid; the matching minimum height preserves the chart region.",
+        "The parent dashboard owns wrapping and column changes while the internal chart-over-legend arrangement remains stable."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Assign chart data and legend items as JavaScript properties and place the components in the chart and legend slots."
+        ],
+        "react": [
+          "Keep filter and dataset state in the owner; the card handles hover synchronization for the canonical slotted pair."
+        ],
+        "angular": [
+          "Keep filter and dataset state in the owner; the card handles hover synchronization for the canonical slotted pair."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/CardDataVizDonut/CardDataVizDonut.stories.ts"
+        },
+        {
+          "label": "Dashboard review examples",
+          "path": "src/wc/stories/DataViz/OverviewReview.stories.ts"
+        }
+      ]
+    },
     "api": {
       "props": {
         "cardWidth": {
@@ -136,7 +205,7 @@
     },
     {
       "path": "src/wc/components/CardDataVizDonut/CardDataVizDonut.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, State, h, Host, Prop } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizDonutWidth = CardShellDataVizWidth;\n\n/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */\ntype HoveredDatum = { label: string } | null;\n\n/** A slotted chart/legend that opts into hover sync by exposing an `activeLabel` prop. */\ntype SyncableSlot = HTMLElement & { activeLabel?: string | null };\n\n/**\n * Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and\n * content-sized legend. Hover sync between chart and legend stays here.\n */\n@Component({\n  tag: 'ds-card-data-viz-donut',\n  styleUrl: 'CardDataVizDonut.css',\n  scoped: true,\n})\nexport class CardDataVizDonut {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizDonutWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n  // padded box plus a body gap next to nothing.\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    // Not `:scope >` — Stencil's scoped slot polyfill relocates slotted children into\n    // region wrappers (and here into nested `ds-card-shell-data-viz`), so they may not stay direct\n    // host children across renders.\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidLoad() {\n    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n    // ds-chart-donut + ds-chart-legend pair cross-highlights without every consumer having to\n    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n    // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n    this.el.addEventListener('dsSliceHover', this.handleChartHover);\n    this.el.addEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n    this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  private handleChartHover = (e: Event) => {\n    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n    // slotted children into an inner region wrapper on render, so they're no longer direct\n    // children of the host by the time this fires.\n    const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot | null;\n    if (!legend || !('activeLabel' in legend)) return;\n    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleLegendHover = (e: Event) => {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('activeLabel' in chart)) return;\n    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-donut\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"card-data-viz-donut__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-donut__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-donut__legend-region\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, State, h, Host, Prop } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizDonutWidth = CardShellDataVizWidth;\n\n/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */\ntype HoveredDatum = { label: string } | null;\n\n/** A slotted chart/legend that opts into composition behavior through public props. */\ntype SyncableSlot = HTMLElement & {\n  activeLabel?: string | null;\n  showTooltip?: boolean;\n};\n\n/**\n * Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and\n * content-sized legend. Hover sync between chart and legend stays here.\n */\n@Component({\n  tag: 'ds-card-data-viz-donut',\n  styleUrl: 'CardDataVizDonut.css',\n  scoped: true,\n})\nexport class CardDataVizDonut {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizDonutWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n  // padded box plus a body gap next to nothing.\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    // Not `:scope >` — Stencil's scoped slot polyfill relocates slotted children into\n    // region wrappers (and here into nested `ds-card-shell-data-viz`), so they may not stay direct\n    // host children across renders.\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidLoad() {\n    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n    // ds-chart-donut + ds-chart-legend pair cross-highlights without every consumer having to\n    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n    // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n    this.el.addEventListener('dsSliceHover', this.handleChartHover);\n    this.el.addEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  componentDidRender() {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('showTooltip' in chart)) return;\n    chart.showTooltip = !this.hasLegendSlot;\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n    this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  private handleChartHover = (e: Event) => {\n    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n    // slotted children into an inner region wrapper on render, so they're no longer direct\n    // children of the host by the time this fires.\n    const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot | null;\n    if (!legend || !('activeLabel' in legend)) return;\n    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleLegendHover = (e: Event) => {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('activeLabel' in chart)) return;\n    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-donut\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"card-data-viz-donut__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-donut__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-donut__legend-region\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]