@ds-mo/ui 2.13.1 → 2.15.0

package/src/wc/components/Tooltip/Tooltip.tsx

@@ -1,23 +1,19 @@
 import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';
-import { resolveCssLengthPx, resolveCssTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';
+import {
+  CONTROL_TEXT_VARIANT,
+  resolveCssLengthPx,
+  resolveCssTimeMs,
+  TOKEN_CSS_LENGTHS,
+  TOKEN_DEFAULTS,
+} from '../../utils';
+import type { TextVariant } from '../Text/text-types';
+// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.
+import '../Text/Text';
 
 export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
 export type TooltipAlign = 'start' | 'center' | 'end';
 export type TooltipSize = 'md' | 'sm' | 'xs';
 
-/** Body text per control-density size (regular weight — not emphasis). */
-const TEXT_VARIANT: Record<TooltipSize, string> = {
-  md: 'text-body-medium',
-  sm: 'text-body-small',
-  xs: 'text-caption',
-};
-
-const LINE_HEIGHT: Record<TooltipSize, string> = {
-  md: 'var(--typography-lineheight-md)',
-  sm: 'var(--typography-lineheight-sm)',
-  xs: 'var(--typography-lineheight-xs)',
-};
-
 const FALLBACK_HEIGHT: Record<TooltipSize, string> = {
   md: TOKEN_DEFAULTS.size400,
   sm: TOKEN_DEFAULTS.size300,
@@ -29,6 +25,28 @@ let tooltipIdCounter = 0;
 /** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */
 let activeTooltip: Tooltip | null = null;
 
+type DsTextEl = HTMLElement & {
+  as: string;
+  variant: TextVariant;
+  emphasis: boolean;
+  color: string;
+};
+
+function createDsText(opts: {
+  variant: TextVariant;
+  emphasis?: boolean;
+  color?: string;
+  text: string;
+}): DsTextEl {
+  const el = document.createElement('ds-text') as DsTextEl;
+  el.as = 'span';
+  el.variant = opts.variant;
+  el.emphasis = opts.emphasis ?? false;
+  el.color = opts.color ?? 'inherit';
+  el.textContent = opts.text;
+  return el;
+}
+
 /**
  * Imperative body portal for the popup.
  * Stencil must not own the portaled node — moving a VDOM child to `document.body`
@@ -263,28 +281,36 @@ export class Tooltip {
 
   private renderPopupContent() {
     if (!this.popupEl) return;
-    const textVariant = TEXT_VARIANT[this.size];
-    const lineHeight = LINE_HEIGHT[this.size];
+    const textVariant = CONTROL_TEXT_VARIANT[this.size];
     const density =
       this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';
-    // Every node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.
+    // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.
     const sc = 'sc-ds-tooltip';
 
-    const startKey =
-      this.shortcutKey && this.shortcutKeyPosition === 'start'
-        ? `<div class="key-hint ${sc}" aria-hidden="true"><span class="text-caption-emphasis ${sc}">${escapeHtml(this.shortcutKey)}</span></div>`
-        : '';
-    const endKey =
-      this.shortcutKey && this.shortcutKeyPosition === 'end'
-        ? `<div class="key-hint ${sc}" aria-hidden="true"><span class="text-caption-emphasis ${sc}">${escapeHtml(this.shortcutKey)}</span></div>`
-        : '';
-
-    this.popupEl.innerHTML =
-      `<div class="tooltip-inner ${density} ${sc}">` +
-      startKey +
-      `<span class="tooltip-label ${textVariant} ${sc}" style="line-height:${lineHeight}">${escapeHtml(this.label)}</span>` +
-      endKey +
-      `</div>`;
+    const inner = document.createElement('div');
+    inner.className = `tooltip-inner ${density} ${sc}`;
+
+    const appendShortcut = (position: 'start' | 'end') => {
+      if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;
+      const hint = document.createElement('div');
+      hint.className = `key-hint ${sc}`;
+      hint.setAttribute('aria-hidden', 'true');
+      hint.appendChild(
+        createDsText({ variant: 'text-caption', emphasis: true, text: this.shortcutKey }),
+      );
+      inner.appendChild(hint);
+    };
+
+    appendShortcut('start');
+
+    const labelWrap = document.createElement('span');
+    labelWrap.className = `tooltip-label ${sc}`;
+    labelWrap.appendChild(createDsText({ variant: textVariant, text: this.label }));
+    inner.appendChild(labelWrap);
+
+    appendShortcut('end');
+
+    this.popupEl.replaceChildren(inner);
   }
 
   private calculatePosition() {
@@ -338,12 +364,3 @@ export class Tooltip {
     );
   }
 }
-
-function escapeHtml(value: string): string {
-  return value
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-}

package/src/wc/components/TooltipDataViz/TooltipDataViz.tsx

@@ -126,7 +126,7 @@ export class TooltipDataViz {
             </ds-text>
           </span>
           <span class="tooltip-data-viz__value">
-            <ds-text as="span" variant="text-body-medium-emphasis" color="var(--color-foreground-on-translucent-background-primary)">
+            <ds-text as="span" variant="text-body-medium" emphasis color="var(--color-foreground-on-translucent-background-primary)">
               {this.value}
             </ds-text>
           </span>

package/src/wc/components.d.ts

@@ -37,7 +37,7 @@ import { TabBackground } from "./components/TabGroup/TabGroup";
 import { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
 import { SortState, TableColumn } from "./components/Table/Table";
 import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
-import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/Text";
+import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 import { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
 export { NavChromeStyle } from "./nav/nav-chrome";
 export { ShellGradientPreset } from "./nav/shell-gradient-presets";
@@ -71,7 +71,7 @@ export { TabBackground } from "./components/TabGroup/TabGroup";
 export { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
 export { SortState, TableColumn } from "./components/Table/Table";
 export { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
-export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/Text";
+export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 export { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
 export namespace Components {
     interface DsAppShell {
@@ -793,7 +793,7 @@ export namespace Components {
          */
         "activateTool": (id: PanelToolsToolId) => Promise<void>;
         /**
-          * Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`.
+          * Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`.
           * @default ''
          */
         "activeTool": PanelToolsToolId | '';
@@ -1069,6 +1069,11 @@ export namespace Components {
         "as": TextElement;
         "color": TextColor | undefined;
         "decoration": TextDecoration | undefined;
+        /**
+          * Heavier weight + tighter letter-spacing for the variant. `false` (default): regular weight (caption stays medium). `true`: display bold, title/caption semibold, body medium.
+          * @default false
+         */
+        "emphasis": boolean;
         /**
           * @default 'normal'
          */
@@ -1085,6 +1090,10 @@ export namespace Components {
           * @default 'none'
          */
         "lineTruncation": LineTruncation;
+        /**
+          * Forwarded to the inner element (e.g. aria-labelledby targets).
+         */
+        "textId": string | undefined;
         /**
           * @default 'text-body-medium'
          */
@@ -2677,7 +2686,7 @@ declare namespace LocalJSX {
     }
     interface DsPanelTools {
         /**
-          * Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`.
+          * Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`.
           * @default ''
          */
         "activeTool"?: PanelToolsToolId | '';
@@ -2975,6 +2984,11 @@ declare namespace LocalJSX {
         "as"?: TextElement;
         "color"?: TextColor | undefined;
         "decoration"?: TextDecoration | undefined;
+        /**
+          * Heavier weight + tighter letter-spacing for the variant. `false` (default): regular weight (caption stays medium). `true`: display bold, title/caption semibold, body medium.
+          * @default false
+         */
+        "emphasis"?: boolean;
         /**
           * @default 'normal'
          */
@@ -2991,6 +3005,10 @@ declare namespace LocalJSX {
           * @default 'none'
          */
         "lineTruncation"?: LineTruncation;
+        /**
+          * Forwarded to the inner element (e.g. aria-labelledby targets).
+         */
+        "textId"?: string | undefined;
         /**
           * @default 'text-body-medium'
          */
@@ -3367,6 +3385,7 @@ declare namespace LocalJSX {
     }
     interface DsTextAttributes {
         "variant": TextVariant;
+        "emphasis": boolean;
         "color": TextColor | undefined;
         "decoration": TextDecoration | undefined;
         "italic": boolean;
@@ -3376,6 +3395,7 @@ declare namespace LocalJSX {
         "fontFeature": TextFontFeature;
         "as": TextElement;
         "for": string | undefined;
+        "textId": string | undefined;
     }
     interface DsToggleAttributes {
         "checked": boolean;

package/src/wc/utils/control-density.css

@@ -3,7 +3,8 @@
  * (Tag, PanelNav items, BarNav tabs, Menu items, Chip, etc.).
  *
  * Apply `.ds-control--md|sm|xs` on the control (host or inner row). Then use the
- * `--ds-control-*` vars for height, padding, icon box, label inset, gap, and radius.
+ * `--ds-control-*` vars for height, padding, icon box, label inset, gap, radius,
+ * and line-height (for wrappers around `ds-text`).
  *
  * Both `:host(.ds-control--*)` and `.ds-control--*` are listed so Stencil scoped
  * components work whether the class is on the host (Tag) or an inner item (PanelNav).
@@ -19,6 +20,8 @@
   --ds-control-label-inset: var(--dimension-space-025);
   --ds-control-gap: var(--dimension-space-050);
   --ds-control-radius: var(--dimension-radius-025);
+  /* Matches text-body-medium line-height — wrappers around ds-text need this. */
+  --ds-control-line-height: var(--typography-lineheight-md);
 }
 
 :host(.ds-control--sm),
@@ -29,6 +32,7 @@
   --ds-control-label-inset: var(--dimension-space-025);
   --ds-control-gap: var(--dimension-space-025);
   --ds-control-radius: var(--dimension-radius-025);
+  --ds-control-line-height: var(--typography-lineheight-sm);
 }
 
 :host(.ds-control--xs),
@@ -39,4 +43,5 @@
   --ds-control-label-inset: var(--dimension-space-025);
   --ds-control-gap: var(--dimension-space-025);
   --ds-control-radius: var(--dimension-radius-025);
+  --ds-control-line-height: var(--typography-lineheight-xs);
 }

package/src/wc/utils/control-text.ts

@@ -0,0 +1,11 @@
+import type { TextVariant } from '../components/Text/text-types';
+
+/** Control-density sizes shared by buttons, tags, chips, select, tooltip. */
+export type ControlDensitySize = 'md' | 'sm' | 'xs';
+
+/** Body/caption variant per control-density size (emphasis is separate). */
+export const CONTROL_TEXT_VARIANT: Record<ControlDensitySize, TextVariant> = {
+  md: 'text-body-medium',
+  sm: 'text-body-small',
+  xs: 'text-caption',
+};

package/src/wc/utils/index.ts

@@ -23,3 +23,5 @@ export { TOKEN_DEFAULTS, TOKEN_CSS_LENGTHS } from './token-defaults';
 export type { TokenDefaultKey } from './token-defaults';
 export { controlWidthClass } from './control-width';
 export type { ControlWidth } from './control-width';
+export { CONTROL_TEXT_VARIANT } from './control-text';
+export type { ControlDensitySize } from './control-text';

package/dist/components/p-1m8r0wFg.js

@@ -1,2 +0,0 @@
-import{p as o,H as r,c as t,h as s,a as n,t as a}from"./index.js";import{g as i,i as e}from"./p-BQq26pt9.js";import{d}from"./p-EK1hOP19.js";const c=()=>`.sc-ds-tab-group-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-tab-group-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-tab-group-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-tab-group-nav-h,.ds-control-inactive.sc-ds-tab-group-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsRovingExit=t(this,"dsRovingExit");this.value="";this.tabs=[];this.orientation="horizontal";this.selectionFollowsFocus=true;this.rovingEnabled=true;this.focusedTabId=""}get selectableTabs(){return i(this.tabs)}componentWillLoad(){this.syncFocusedTabId(this.value)}onValueChange(o,r){if(!this.selectionFollowsFocus){if(r===undefined||o!==this.focusedTabId){this.syncFocusedTabId(o)}return}if(r===undefined||o===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const t=r.getAttribute("data-tab-id");if(t===o)return;const s=this.el.querySelector(`[data-tab-id="${o}"]`);if(s){s.focus({preventScroll:true})}else{r.blur()}}))}onTabsChange(){if(!this.selectableTabs.some((o=>o.id===this.focusedTabId))){this.syncFocusedTabId(this.value)}}async focusTab(o){this.focusedTabId=o;const r=this.el.querySelector(`[data-tab-id="${o}"]`);r?.focus({preventScroll:true})}async focusLastTab(){const o=this.selectableTabs;const r=[...o].reverse().find((o=>!o.isInactive));if(r)await this.focusTab(r.id)}async focusFirstTab(){const o=this.selectableTabs.find((o=>!o.isInactive));if(o)await this.focusTab(o.id)}syncFocusedTabId(o){const r=this.selectableTabs;if(r.some((r=>r.id===o&&!r.isInactive))){this.focusedTabId=o;return}const t=r.find((o=>!o.isInactive));this.focusedTabId=t?.id??""}selectTab(o,r){this.value=o;this.focusedTabId=o;this.dsChange.emit(o);if(r?.focus!==false){void this.focusTab(o)}}getFocusedIndex(){return this.selectableTabs.findIndex((o=>o.id===this.focusedTabId))}findEnabledLinear(o,r){const t=this.selectableTabs;for(let s=o+r;s>=0&&s<t.length;s+=r){if(!t[s]?.isInactive)return s}return null}findEnabled(o,r){const t=this.selectableTabs;const s=t.length;for(let n=0;n<s;n++){const a=(o+r*(n+1)+s*(n+1))%s;if(!t[a]?.isInactive)return a}return o}moveFocusToIndex(o){const r=this.selectableTabs[o];if(!r)return;this.focusedTabId=r.id;void this.focusTab(r.id)}activateFocusedTab(o){if(o.key!=="Enter"&&o.key!==" ")return;const r=this.selectableTabs.find((o=>o.id===this.focusedTabId));if(!r||r.isInactive)return;o.preventDefault();this.selectTab(r.id,{focus:true})}handleKeyDown(o){const r=this.selectableTabs;if(!r.length)return;if(!this.selectionFollowsFocus){if(o.key==="Enter"||o.key===" "){this.activateFocusedTab(o);return}}const t=this.selectionFollowsFocus?r.findIndex((o=>o.id===this.value)):this.getFocusedIndex();if(t<0)return;const s=this.orientation==="vertical";let n=null;let a=null;if(!s){if(o.key==="ArrowRight"){if(this.selectionFollowsFocus){n=this.findEnabled(t,1)}else{const o=this.findEnabledLinear(t,1);if(o===null)a="end";else n=o}}else if(o.key==="ArrowLeft"){if(this.selectionFollowsFocus){n=this.findEnabled(t,-1)}else{const o=this.findEnabledLinear(t,-1);if(o===null)a="start";else n=o}}}else{if(o.key==="ArrowDown"){if(this.selectionFollowsFocus){n=this.findEnabled(t,1)}else{const o=this.findEnabledLinear(t,1);if(o===null)a="end";else n=o}}else if(o.key==="ArrowUp"){if(this.selectionFollowsFocus){n=this.findEnabled(t,-1)}else{const o=this.findEnabledLinear(t,-1);if(o===null)a="start";else n=o}}}if(o.key==="Home"){const o=r.findIndex((o=>!o.isInactive));n=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.isInactive));n=o===-1?null:r.length-1-o}if(a){o.preventDefault();this.dsRovingExit.emit(a);return}if(n!==null&&n!==t){o.preventDefault();const t=r[n];if(this.selectionFollowsFocus){this.selectTab(t.id)}else{this.moveFocusToIndex(n)}}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}tabIndexForTab(o){if(!this.rovingEnabled)return-1;if(this.selectionFollowsFocus){return o.id===this.value?0:-1}return o.id===this.focusedTabId?0:-1}render(){const o=this.getBgClass();const r=this.orientation==="vertical";const t=this.background==="navigation";return s(n,{key:"78efd00569e0f71d8a3cecc991d3ced1b369353f",class:"tab-group-nav-host"},s("div",{key:"d810f8b9d3a081271c52747a751ca5ad0347f8dd",role:"tablist",class:{"tab-list":true,"tab-list--vertical":r,"tab-list--on-navigation":t},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":r?"vertical":undefined},this.tabs.map(((t,n)=>{if(e(t)){return s("div",{key:`divider-${n}`,class:{"tab-divider":true,"tab-divider--vertical":r},"aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const a=t.id===this.value;return s("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":a,"ds-focus-ring-inset":true,"ds-control-inactive":!!t.isInactive,[o]:!!o},"aria-selected":a,"aria-disabled":t.isInactive||undefined,"aria-controls":t.panelId??undefined,disabled:t.isInactive,tabIndex:this.tabIndexForTab(t),onClick:()=>!t.isInactive&&this.selectTab(t.id),onFocus:()=>{if(!this.selectionFollowsFocus){this.focusedTabId=t.id}}},s("span",{class:{tab__label:true,"tab__label--dot":!!t.dot,[a?"text-body-medium-emphasis":"text-body-medium"]:true}},t.label,t.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return c()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1],selectionFollowsFocus:[4,"selection-follows-focus"],rovingEnabled:[4,"roving-enabled"],focusedTabId:[32],focusTab:[64],focusLastTab:[64],focusFirstTab:[64]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group-nav","ds-badge"];o.forEach((o=>{switch(o){case"ds-tab-group-nav":if(!customElements.get(a(o))){customElements.define(a(o),l)}break;case"ds-badge":if(!customElements.get(a(o))){d()}break}}))}u();export{l as T,u as d};
-//# sourceMappingURL=p-1m8r0wFg.js.map

package/dist/components/p-1m8r0wFg.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabGroupNavCss","TabGroupNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","orientation","selectionFollowsFocus","rovingEnabled","focusedTabId","selectableTabs","getSelectableTabs","componentWillLoad","syncFocusedTabId","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","el","contains","activeId","getAttribute","nextTab","querySelector","focus","preventScroll","blur","onTabsChange","some","tab","id","focusTab","btn","focusLastTab","last","reverse","find","isInactive","focusFirstTab","first","preferred","selectTab","options","dsChange","emit","getFocusedIndex","findIndex","findEnabledLinear","from","step","i","length","findEnabled","len","n","moveFocusToIndex","nextIdx","activateFocusedTab","e","key","item","preventDefault","handleKeyDown","currentIdx","t","isVertical","exit","candidate","lastEnabled","dsRovingExit","getBgClass","background","tabIndexForTab","render","bgClass","isNavigation","h","Host","class","role","ariaLabel","ariaLabelledby","map","index","isTabDivider","isSelected","type","panelId","disabled","tabIndex","onClick","onFocus","tab__label","dot","label","variant"],"sources":["src/wc/components/TabGroupNav/TabGroupNav.css?tag=ds-tab-group-nav&encapsulation=scoped","src/wc/components/TabGroupNav/TabGroupNav.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n}\n\n/* Vertical orientation */\n.tab-list--vertical {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  position: relative;\n  /* Only transition color — hover bg is instant (see ::after below) */\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--dimension-size-400);\n  min-width: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_dot: var(--color-foreground-bold-brand);\n  --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.tab::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.tab:hover::after  { background: var(--_hover-bg);   transition: none; }\n.tab:active::after { background: var(--_pressed-bg);  transition: none; }\n\n.tab--selected { color: var(--color-foreground-primary); }\n\n/* Inactive: `.ds-control-inactive` (25% opacity) — applied via class in TSX. */\n\n/* Vertical tabs read as a list — left-align the label */\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n/* Label — dot anchors top-right like BarNav action icon zone */\n.tab__label {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--dimension-space-025);\n  white-space: nowrap;\n}\n\n/* Clearance for top-right dot — slightly less than space-025 + space-075 */\n.tab__label--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n/* Notification dot — top-right corner of the label zone */\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n/* Background context */\n.on-medium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_dot-ring: var(--color-background-medium-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-medium-background-focus);\n}\n\n.on-bold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_dot-ring: var(--color-background-bold-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_dot-ring: var(--color-background-strong-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-strong-background-focus);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_dot-ring: var(--color-always-dark-background);\n  --ds-focus-ring-color: var(--color-always-dark-interaction-focus);\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.on-navigation {\n  color: var(--color-navigation-foreground-secondary);\n  --_hover-bg: var(--color-navigation-interaction-hover);\n  --_pressed-bg: var(--color-navigation-interaction-pressed);\n  --_dot: var(--color-navigation-foreground-brand);\n  --_dot-ring: var(--color-navigation-background);\n  --ds-focus-ring-color: var(--color-navigation-interaction-focus);\n}\n\n.on-navigation.tab--selected { color: var(--color-navigation-foreground-primary); }\n\n.tab-list--on-navigation .tab-divider__line {\n  background-color: var(--color-navigation-border-tertiary);\n}\n\n/* In-tablist visual group separator — not focusable, skipped by keyboard nav */\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-space-100);\n  height: var(--dimension-size-400);\n  padding-block: var(--dimension-space-075);\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  align-self: stretch;\n  background-color: var(--color-border-secondary);\n}\n\n.tab-divider--vertical {\n  width: auto;\n  height: var(--dimension-space-100);\n  align-self: stretch;\n  padding-block: 0;\n  padding-inline: var(--dimension-space-075);\n}\n\n.tab-divider--vertical .tab-divider__line {\n  width: auto;\n  height: var(--dimension-stroke-width-012);\n  align-self: stretch;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, Method, State, h, Host } from '@stencil/core';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\nexport type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';\n\n@Component({\n  tag: 'ds-tab-group-nav',\n  styleUrl: 'TabGroupNav.css',\n  scoped: true,\n})\nexport class TabGroupNav {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabItem[] = [];\n  @Prop() background: TabGroupNavBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * When `false`, arrow keys move focus only — Space/Enter (or click) commits selection.\n   * Used by bar nav where each tab is a full page transition.\n   */\n  @Prop() selectionFollowsFocus: boolean = true;\n\n  /** When `false`, every tab uses `tabindex=\"-1\"` (another chrome control owns the tab stop). */\n  @Prop() rovingEnabled: boolean = true;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  /** Fired when arrow navigation reaches the first/last tab in manual selection mode. */\n  @Event() dsRovingExit!: EventEmitter<'start' | 'end'>;\n\n  @State() private focusedTabId: string = '';\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  componentWillLoad() {\n    this.syncFocusedTabId(this.value);\n  }\n\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (!this.selectionFollowsFocus) {\n      if (prev === undefined || next !== this.focusedTabId) {\n        this.syncFocusedTabId(next);\n      }\n      return;\n    }\n\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${next}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  @Watch('tabs')\n  onTabsChange() {\n    if (!this.selectableTabs.some(tab => tab.id === this.focusedTabId)) {\n      this.syncFocusedTabId(this.value);\n    }\n  }\n\n  @Method()\n  async focusTab(id: string) {\n    this.focusedTabId = id;\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  @Method()\n  async focusLastTab() {\n    const tabs = this.selectableTabs;\n    const last = [...tabs].reverse().find(tab => !tab.isInactive);\n    if (last) await this.focusTab(last.id);\n  }\n\n  @Method()\n  async focusFirstTab() {\n    const first = this.selectableTabs.find(tab => !tab.isInactive);\n    if (first) await this.focusTab(first.id);\n  }\n\n  private syncFocusedTabId(preferred: string) {\n    const tabs = this.selectableTabs;\n    if (tabs.some(tab => tab.id === preferred && !tab.isInactive)) {\n      this.focusedTabId = preferred;\n      return;\n    }\n    const first = tabs.find(tab => !tab.isInactive);\n    this.focusedTabId = first?.id ?? '';\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.focusedTabId = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      void this.focusTab(id);\n    }\n  }\n\n  private getFocusedIndex(): number {\n    return this.selectableTabs.findIndex(tab => tab.id === this.focusedTabId);\n  }\n\n  private findEnabledLinear(from: number, step: 1 | -1): number | null {\n    const tabs = this.selectableTabs;\n    for (let i = from + step; i >= 0 && i < tabs.length; i += step) {\n      if (!tabs[i]?.isInactive) return i;\n    }\n    return null;\n  }\n\n  /**\n   * Find the next non-inactive tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.isInactive) return i;\n    }\n    return from;\n  }\n\n  private moveFocusToIndex(nextIdx: number) {\n    const next = this.selectableTabs[nextIdx];\n    if (!next) return;\n    this.focusedTabId = next.id;\n    void this.focusTab(next.id);\n  }\n\n  private activateFocusedTab(e: KeyboardEvent) {\n    if (e.key !== 'Enter' && e.key !== ' ') return;\n    const tab = this.selectableTabs.find(item => item.id === this.focusedTabId);\n    if (!tab || tab.isInactive) return;\n    e.preventDefault();\n    this.selectTab(tab.id, { focus: true });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    if (!this.selectionFollowsFocus) {\n      if (e.key === 'Enter' || e.key === ' ') {\n        this.activateFocusedTab(e);\n        return;\n      }\n    }\n\n    const currentIdx = this.selectionFollowsFocus\n      ? tabs.findIndex(t => t.id === this.value)\n      : this.getFocusedIndex();\n    if (currentIdx < 0) return;\n\n    const isVertical = this.orientation === 'vertical';\n    let nextIdx: number | null = null;\n    let exit: 'start' | 'end' | null = null;\n\n    if (!isVertical) {\n      if (e.key === 'ArrowRight') {\n        if (this.selectionFollowsFocus) {\n          nextIdx = this.findEnabled(currentIdx, 1);\n        } else {\n          const candidate = this.findEnabledLinear(currentIdx, 1);\n          if (candidate === null) exit = 'end';\n          else nextIdx = candidate;\n        }\n      } else if (e.key === 'ArrowLeft') {\n        if (this.selectionFollowsFocus) {\n          nextIdx = this.findEnabled(currentIdx, -1);\n        } else {\n          const candidate = this.findEnabledLinear(currentIdx, -1);\n          if (candidate === null) exit = 'start';\n          else nextIdx = candidate;\n        }\n      }\n    } else {\n      if (e.key === 'ArrowDown') {\n        if (this.selectionFollowsFocus) {\n          nextIdx = this.findEnabled(currentIdx, 1);\n        } else {\n          const candidate = this.findEnabledLinear(currentIdx, 1);\n          if (candidate === null) exit = 'end';\n          else nextIdx = candidate;\n        }\n      } else if (e.key === 'ArrowUp') {\n        if (this.selectionFollowsFocus) {\n          nextIdx = this.findEnabled(currentIdx, -1);\n        } else {\n          const candidate = this.findEnabledLinear(currentIdx, -1);\n          if (candidate === null) exit = 'start';\n          else nextIdx = candidate;\n        }\n      }\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.isInactive);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (exit) {\n      e.preventDefault();\n      this.dsRovingExit.emit(exit);\n      return;\n    }\n\n    if (nextIdx !== null && nextIdx !== currentIdx) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      if (this.selectionFollowsFocus) {\n        this.selectTab(next.id);\n      } else {\n        this.moveFocusToIndex(nextIdx);\n      }\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background || this.background === 'faint') return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    if (this.background === 'navigation') return 'on-navigation';\n    return `on-${this.background}`;\n  }\n\n  private tabIndexForTab(tab: TabItemTab): number {\n    if (!this.rovingEnabled) return -1;\n    if (this.selectionFollowsFocus) {\n      return tab.id === this.value ? 0 : -1;\n    }\n    return tab.id === this.focusedTabId ? 0 : -1;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const isVertical = this.orientation === 'vertical';\n    const isNavigation = this.background === 'navigation';\n\n    return (\n      <Host class=\"tab-group-nav-host\">\n        <div\n          role=\"tablist\"\n          class={{\n            'tab-list': true,\n            'tab-list--vertical': isVertical,\n            'tab-list--on-navigation': isNavigation,\n          }}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-orientation={isVertical ? 'vertical' : undefined}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class={{\n                    'tab-divider': true,\n                    'tab-divider--vertical': isVertical,\n                  }}\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  'ds-focus-ring-inset': true,\n                  'ds-control-inactive': !!tab.isInactive,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-selected={isSelected}\n                aria-disabled={tab.isInactive || undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.isInactive}\n                tabIndex={this.tabIndexForTab(tab)}\n                onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n                onFocus={() => {\n                  if (!this.selectionFollowsFocus) {\n                    this.focusedTabId = tab.id;\n                  }\n                }}\n              >\n                <span class={{\n                  tab__label: true,\n                  'tab__label--dot': !!tab.dot,\n                  [isSelected ? 'text-body-medium-emphasis' : 'text-body-medium']: true,\n                }}>\n                  {tab.label}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      background=\"var(--_dot-ring)\"\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-3FLHei19.js

@@ -1,2 +0,0 @@
-import{p as t,H as i,h as o,a as s,t as a}from"./index.js";import{d as e}from"./p-CtwNUCnp.js";import{T as n}from"./p-B_g8X0eh.js";import{r as d}from"./p-C1cBr-Ri.js";const r=()=>`.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-radius:var(--dimension-radius-025)}.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-radius:var(--dimension-radius-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:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.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-background-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));line-height:var(--typography-lineheight-md)}@keyframes tooltip-data-viz-fade-in{from{opacity:0}to{opacity:1}}`;const c=12;const l=8;const p=t(class t extends i{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 i=t.right>window.innerWidth-l?"left":"right";const o=t.bottom>window.innerHeight-l?"top":"bottom";if(i!==this.side)this.side=i;if(o!==this.align)this.align=o}render(){const t=this.side==="right"?`${c}px`:`calc(-100% - ${c}px)`;const i=this.align==="bottom"?`${c}px`:`calc(-100% - ${c}px)`;return o(s,{key:"06233152937562e477fa04f4151683ab24f8c89b",class:{"tooltip-data-viz":true,"tooltip-data-viz--visible":this.visible},style:{left:`${this.x}px`,top:`${this.y}px`,transform:`translate(${t}, ${i})`}},o("div",{key:"d5c1ba43e1209e50c74ac45aaa34ac25d331e5e1",class:"tooltip-data-viz__item ds-control--md"},o("span",{key:"1561bfb05835ba6faf5501a1700acf56f7b2468b",class:"tooltip-data-viz__label"},o("ds-text",{key:"2ed44657c21814e4921679263cb1ba49d7357e7c",as:"span",variant:"text-body-medium",color:"var(--color-foreground-on-translucent-background-secondary)"},this.label)),o("span",{key:"deeefe07b3942991c9845dea61129a4cfc6e90e9",class:"tooltip-data-viz__value"},o("ds-text",{key:"d95181dbc54d1883f1f0687ca7204a67651a2ac9",as:"span",variant:"text-body-medium-emphasis",color:"var(--color-foreground-on-translucent-background-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-3FLHei19.js.map

package/dist/components/p-3FLHei19.js.map

@@ -1 +0,0 @@
-{"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"],"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-background-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/* <ds-text>'s host is `display: contents` — padding/line-height on it would no-op, so this\n   wrapper owns both: label inset around the text, and line-height matching text-body-medium\n   so the wrapper hugs its actual content instead of inheriting the browser default. */\n.tooltip-data-viz__label,\n.tooltip-data-viz__value {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  line-height: var(--typography-lineheight-md);\n}\n\n@keyframes tooltip-data-viz-fade-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\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 (donut slice, bar,\n * line point, ...). 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          <span class=\"tooltip-data-viz__label\">\n            <ds-text as=\"span\" variant=\"text-body-medium\" color=\"var(--color-foreground-on-translucent-background-secondary)\">\n              {this.label}\n            </ds-text>\n          </span>\n          <span class=\"tooltip-data-viz__value\">\n            <ds-text as=\"span\" variant=\"text-body-medium-emphasis\" color=\"var(--color-foreground-on-translucent-background-primary)\">\n              {this.value}\n            </ds-text>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uKAAA,MAAMA,EAAoB,IAAM,orECGhC,MAAMC,EAAmB,GACzB,MAAMC,EAAkB,E,MAwBXC,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,IAsF5D,CApFC,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,QAAAE,IAAA,2CAAMC,MAAM,2BACVH,EAAA,WAAAE,IAAA,2CAASM,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,+DACjDlD,KAAKE,QAGVsC,EAAA,QAAAE,IAAA,2CAAMC,MAAM,2BACVH,EAAA,WAAAE,IAAA,2CAASM,GAAG,OAAOC,QAAQ,4BAA4BC,MAAM,6DAC1DlD,KAAKC,S","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["cardCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","FAINT_BRAND_TITLE_COLOR","Card","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","appearance","render","editing","h","Host","key","class","card","style","variant","color","as","heading","name"],"sources":["src/wc/components/Card/Card.css?tag=ds-card&encapsulation=scoped","src/wc/components/Card/Card.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-width);\n  min-height: var(--_card-min-height);\n  max-width: 100%;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n  overflow: hidden;\n}\n\n:host(.card--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  height: var(--dimension-size-600);\n  flex-shrink: 0;\n  padding: var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n:host(.card--editing) .card__header {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.card__title-wrap {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-075);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card__title {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  padding: var(--dimension-space-025);\n}\n\n.card__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card__actions:empty {\n  display: none;\n}\n\n.card__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-sizing: border-box;\n}\n\n:host(.card--editing) .card__body {\n  border-radius: var(--dimension-radius-025);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type CardWidth = 'sm' | 'md' | 'lg';\n\n/** Visual chrome recipe — default app surface, or settings edit wash. */\nexport type CardAppearance = 'default' | 'editing';\n\nconst CARD_WIDTH_VARS: Record<CardWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n/**\n * Shared card chrome — width + matching min-height tokens, header (title + actions),\n * and a flex body that fills leftover space. Compose this from settings / data-viz cards.\n */\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'Card.css',\n  scoped: true,\n})\nexport class Card {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n   * matching `--dimension-card-height-*` so empty bodies still fill the card.\n   */\n  @Prop() cardWidth: CardWidth = 'md';\n\n  /** Chrome recipe — `editing` applies the settings edit wash. */\n  @Prop() appearance: CardAppearance = 'default';\n\n  render() {\n    const editing = this.appearance === 'editing';\n\n    return (\n      <Host\n        class={{\n          card: true,\n          'card--editing': editing,\n        }}\n        style={{\n          '--_card-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card__header\">\n          <div class=\"card__title-wrap\">\n            <ds-text\n              class=\"card__title\"\n              variant=\"text-title-small\"\n              color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n              as=\"h2\"\n            >\n              {this.heading}\n            </ds-text>\n          </div>\n          <div class=\"card__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </header>\n        <div class=\"card__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAU,IAAM,mtDCOtB,MAAMC,EAA6C,CACjDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAA8C,CAClDH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mCAGN,MAAME,EAA0B,sC,MAWnBC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAaUC,KAAAC,UAAuB,KAGvBD,KAAAE,WAA6B,SAqCtC,CAnCC,MAAAC,GACE,MAAMC,EAAUJ,KAAKE,aAAe,UAEpC,OACEG,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,KAAM,KACN,gBAAiBL,GAEnBM,MAAO,CACL,gBAAiBrB,EAAgBW,KAAKC,WACtC,qBAAsBR,EAAiBO,KAAKC,aAG9CI,EAAA,UAAAE,IAAA,2CAAQC,MAAM,gBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,cACNG,QAAQ,mBACRC,MAAOR,EAAUV,EAA0B,UAC3CmB,GAAG,MAEFb,KAAKc,UAGVT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,cAGfV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cACTH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/p-B5NcWtpp.js

@@ -1,2 +0,0 @@
-import{p as t,H as o,c as n,h as i,a as d,t as l}from"./index.js";import{c as e}from"./p-DuFm-ieS.js";import{d as r}from"./p-B82KZX9D.js";const s=()=>`.sc-ds-button-filled-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-button-filled:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-filled{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-button-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-filled-h,.ds-interaction-fill.sc-ds-button-filled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-button-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-button-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--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:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none;--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled-host--icon.ds-control-width--hug.sc-ds-button-filled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.button-filled-host--icon.ds-control-width--fill.sc-ds-button-filled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-filled-h .button-filled.sc-ds-button-filled{width:100%}.button-filled.sc-ds-button-filled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-2),     color var(--effect-motion-short-2),     transform var(--effect-motion-short-2)}.button-filled--icon.sc-ds-button-filled{width:100%;height:100%;padding:0}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:scale(var(--dimension-scale-subtle))}.button-filled__icon-wrap.sc-ds-button-filled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-filled__label.sc-ds-button-filled{position:relative;z-index:2;line-height:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}`;const a={md:"text-body-medium-emphasis",sm:"text-body-small-emphasis",xs:"text-caption-emphasis"};const c={md:"md",sm:"sm",xs:"xs"};const u=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.intent="brand";this.contrast="bold";this.isInactive=false;this.type="button";this.buttonEl=null;this.handleClick=t=>{if(this.isInactive)return;this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const t=a[this.size];const o=c[this.size];const n={"button-filled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-filled--icon":this.variant==="icon","button-filled--label":this.variant==="label","button-filled--icon-label":this.variant==="icon-label",[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:this.contrast!=="bold"};return i(d,{key:"5dca400b9d213bf9d07ea0bdcdaddced4d122cb9",class:{"button-filled-host":true,"button-filled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...e(this.width)},tabIndex:-1},i("button",{key:"dbb6bf749620b38120bbfc28eaeda7311e652a49",ref:t=>{this.buttonEl=t??null},type:this.type,class:n,disabled:this.isInactive,"aria-label":this.accessibleName,onClick:this.handleClick},this.showIcon&&i("span",{key:"0796f5b04bbec883101990e42525347d56e984eb",class:"button-filled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"54de2b4933f0f1b47d816486c8211963b12e87c2",name:this.icon,size:o,color:"inherit"})),this.showLabel&&i("span",{key:"83b9de7f4a8ae1d5bd5c91c4da6d3dad1a777a2e",class:{"button-filled__label":true,[t]:true,"ds-interaction-fill__content":true}},this.label)))}get el(){return this}static get style(){return s()}},[2,"ds-button-filled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],intent:[1],contrast:[1],isInactive:[4,"is-inactive"],type:[1],ariaLabel:[1,"aria-label"],setFocus:[64]}]);function f(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-icon"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(l(t))){customElements.define(l(t),u)}break;case"ds-icon":if(!customElements.get(l(t))){r()}break}}))}f();export{u as B,f as d};
-//# sourceMappingURL=p-B5NcWtpp.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["buttonFilledCss","TEXT_VARIANT","md","sm","xs","ICON_SIZE","ButtonFilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","intent","contrast","isInactive","type","buttonEl","handleClick","event","dsClick","emit","setFocus","focus","showIcon","showLabel","accessibleName","ariaLabel","undefined","render","textVariant","iconSize","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","onClick","name","color"],"sources":["src/wc/components/ButtonFilled/ButtonFilled.css?tag=ds-button-filled&encapsulation=scoped","src/wc/components/ButtonFilled/ButtonFilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n  display: inline-flex;\n  outline: none;\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-filled-host--icon.ds-control-width--hug) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-filled-host--icon.ds-control-width--fill) {\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-filled {\n  width: 100%;\n}\n\n.button-filled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  background-color: var(--ds-button-filled-bg);\n  color: var(--ds-button-filled-fg);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition:\n    background-color var(--effect-motion-short-2),\n    color var(--effect-motion-short-2),\n    transform var(--effect-motion-short-2);\n  /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n.button-filled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-filled:active:not(:disabled):not(.ds-control-inactive) {\n  transform: scale(var(--dimension-scale-subtle));\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  line-height: 0;\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/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-bold-neutral);\n  --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-bold-ai);\n  --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-bold-negative);\n  --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-bold-warning);\n  --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-bold-caution);\n  --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-bold-positive);\n  --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-bold-guide);\n  --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-strong-neutral);\n  --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-strong-brand);\n  --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-strong-ai);\n  --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-strong-negative);\n  --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-strong-warning);\n  --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-strong-caution);\n  --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-strong-positive);\n  --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-strong-guide);\n  --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-medium-neutral);\n  --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-medium-brand);\n  --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-medium-ai);\n  --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-medium-negative);\n  --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-medium-warning);\n  --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-medium-caution);\n  --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-medium-positive);\n  --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-medium-guide);\n  --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-faint-neutral);\n  --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-faint-brand);\n  --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-faint-ai);\n  --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-faint-negative);\n  --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-faint-warning);\n  --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-faint-caution);\n  --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-faint-positive);\n  --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-faint-guide);\n  --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, type ControlWidth } from '../../utils/control-width';\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/** Emphasis text per control-density size (buttons use emphasis, unlike Tag). */\nconst TEXT_VARIANT: Record<ButtonFilledSize, string> = {\n  md: 'text-body-medium-emphasis',\n  sm: 'text-body-small-emphasis',\n  xs: 'text-caption-emphasis',\n};\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  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\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) return;\n    this.dsClick.emit(event);\n  };\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.showLabel && this.label) return undefined;\n    if (this.variant === 'icon') return this.icon || 'action';\n    return this.label || 'action';\n  }\n\n  render() {\n    const textVariant = 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--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          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-filled__icon-wrap ds-interaction-fill__content\">\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n          {this.showLabel && (\n            <span class={{ 'button-filled__label': true, [textVariant]: true, 'ds-interaction-fill__content': true }}>\n              {this.label}\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAkB,IAAM,o8eCuB9B,MAAMC,EAAiD,CACrDC,GAAI,4BACJC,GAAI,2BACJC,GAAI,yBAON,MAAMC,EAA0D,CAC9DH,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAQOE,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,2EAYUC,KAAAC,QAA+B,QAG/BD,KAAAE,KAAyB,KAGzBF,KAAAG,MAA2B,MAG3BH,KAAAI,MAAgB,GAGhBJ,KAAAK,KAAe,GAGfL,KAAAM,OAA6B,QAM7BN,KAAAO,SAAiC,OAGjCP,KAAAQ,WAAsB,MAGtBR,KAAAS,KAAsC,SAMtCT,KAAAU,SAAqC,KAOrCV,KAAAW,YAAeC,IACrB,GAAIZ,KAAKQ,WAAY,OACrBR,KAAKa,QAAQC,KAAKF,EAAM,CA8E3B,CApFC,cAAMG,GACJf,KAAKU,UAAUM,O,CAQjB,YAAYC,GACV,OAAOjB,KAAKC,UAAY,QAAUD,KAAKC,UAAY,Y,CAGrD,aAAYiB,GACV,OAAOlB,KAAKC,UAAY,SAAWD,KAAKC,UAAY,Y,CAGtD,kBAAYkB,GACV,GAAInB,KAAKoB,UAAW,OAAOpB,KAAKoB,UAChC,GAAIpB,KAAKkB,WAAalB,KAAKI,MAAO,OAAOiB,UACzC,GAAIrB,KAAKC,UAAY,OAAQ,OAAOD,KAAKK,MAAQ,SACjD,OAAOL,KAAKI,OAAS,Q,CAGvB,MAAAkB,GACE,MAAMC,EAAcjC,EAAaU,KAAKE,MACtC,MAAMsB,EAAW9B,EAAUM,KAAKE,MAEhC,MAAMuB,EAA+B,CACnC,gBAAiB,KACjB,sBAAuB,KACvB,uBAAwBzB,KAAKQ,WAE7B,+BAAgCR,KAAKO,WAAa,OAClD,iCAAkCP,KAAKO,WAAa,SACpD,iCAAkCP,KAAKO,WAAa,SAEpD,sBAAuBP,KAAKQ,WAC5B,iBAAkBR,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,sBAAuBF,KAAKC,UAAY,OACxC,uBAAwBD,KAAKC,UAAY,QACzC,4BAA6BD,KAAKC,UAAY,aAC9C,CAAC,yBAAyBD,KAAKM,UAAW,KAC1C,CAAC,2BAA2BN,KAAKO,YAAaP,KAAKO,WAAa,QAGlE,OACEmB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,qBAAsB,KACtB,2BAA4B7B,KAAKC,UAAY,OAC7C,iBAAkBD,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,QAC7B4B,EAAkB9B,KAAKG,QAE5B4B,UAAU,GAEVL,EAAA,UAAAE,IAAA,2CACEI,IAAKC,IACHjC,KAAKU,SAAWuB,GAAM,IAAI,EAE5BxB,KAAMT,KAAKS,KACXoB,MAAOJ,EACPS,SAAUlC,KAAKQ,WAAU,aACbR,KAAKmB,eACjBgB,QAASnC,KAAKW,aAEbX,KAAKiB,UACJS,EAAA,QAAAE,IAAA,2CAAMC,MAAM,yDACVH,EAAA,WAAAE,IAAA,2CAASQ,KAAMpC,KAAKK,KAAMH,KAAMsB,EAAUa,MAAM,aAGnDrC,KAAKkB,WACJQ,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAE,uBAAwB,KAAMN,CAACA,GAAc,KAAM,+BAAgC,OAC/FvB,KAAKI,Q","ignoreList":[]}

package/dist/components/p-CDHRJqea.js

@@ -1,2 +0,0 @@
-import{p as t,H as i,h as s,a as o,t as n}from"./index.js";import{a as e,T as r}from"./p-B_g8X0eh.js";import{r as a}from"./p-BWUTr_XN.js";import{r as h}from"./p-C1cBr-Ri.js";const l=()=>`.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--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:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-label.sc-ds-tooltip{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}.key-hint.sc-ds-tooltip{width:var(--ds-control-icon, var(--dimension-size-200));height:var(--ds-control-icon, var(--dimension-size-200));flex-shrink:0;display:flex;align-items:center;justify-content:center;border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const d={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c={md:"var(--typography-lineheight-md)",sm:"var(--typography-lineheight-sm)",xs:"var(--typography-lineheight-xs)"};const p={md:r.size400,sm:r.size300,xs:r.size200};let u=0;let m=0;let f=null;const g=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=e.space050;this.alignOffset=0;this.delay=r.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++m}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.skipEnterAnimation=false;this.isOpen=false;this.mouseEnterHandler=()=>this.show();this.mouseLeaveHandler=()=>this.hide();this.focusHandler=()=>this.show();this.blurHandler=t=>{const i=t.relatedTarget;if(i&&this.anchor?.contains(i))return;this.hide()}}componentDidLoad(){this.bindAnchor()}disconnectedCallback(){if(f===this)f=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.calculatePosition()}get viewportPadPx(){return a(r.space050,r.space050)}get sideOffsetPx(){return a(this.sideOffset,r.space050)}get alignOffsetPx(){return a(this.alignOffset,0)}get hoverDelayMs(){return h(this.delay,r.animationDelayMedium3)}get instantReopenMs(){return h(r.animationDurationMedium1,r.animationDurationMedium1)}get fadeOutMs(){return h(r.motionShort3,r.animationDurationShort3)}get tooltipFallbackWidthPx(){return a(r.tooltipFallbackWidth,r.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=p[this.size];return a(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const s=i[0]??this.el.firstElementChild;if(!s)return;this.anchor=s;s.setAttribute("aria-describedby",this.tooltipId);s.addEventListener("mouseenter",this.mouseEnterHandler);s.addEventListener("mouseleave",this.mouseLeaveHandler);s.addEventListener("focusin",this.focusHandler);s.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.anchor.removeAttribute("aria-describedby");this.anchor.removeEventListener("mouseenter",this.mouseEnterHandler);this.anchor.removeEventListener("mouseleave",this.mouseLeaveHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}destroyPopup(){if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}hideInstant(){this.clearTimers();u=Date.now();if(f===this)f=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-u<this.instantReopenMs;if(f&&f!==this){f.hideInstant();t=true}f=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;u=Date.now();if(f===this)f=null;if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.calculatePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=d[this.size];const i=c[this.size];const s=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const o="sc-ds-tooltip";const n=this.shortcutKey&&this.shortcutKeyPosition==="start"?`<div class="key-hint ${o}" aria-hidden="true"><span class="text-caption-emphasis ${o}">${v(this.shortcutKey)}</span></div>`:"";const e=this.shortcutKey&&this.shortcutKeyPosition==="end"?`<div class="key-hint ${o}" aria-hidden="true"><span class="text-caption-emphasis ${o}">${v(this.shortcutKey)}</span></div>`:"";this.popupEl.innerHTML=`<div class="tooltip-inner ${s} ${o}">`+n+`<span class="tooltip-label ${t} ${o}" style="line-height:${i}">${v(this.label)}</span>`+e+`</div>`}calculatePosition(){if(!this.anchor||!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const s=t.offsetWidth||this.tooltipFallbackWidthPx;const o=t.offsetHeight||this.tooltipFallbackHeightPx;const n=this.sideOffsetPx;const e=this.alignOffsetPx;const r=this.viewportPadPx;let a=0,h=0;switch(this.side){case"top":h=i.top-o-n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"bottom":h=i.bottom+n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"left":a=i.left-s-n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break;case"right":a=i.right+n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break}const l=Math.min(Math.max(a,r),window.innerWidth-s-r);const d=Math.min(Math.max(h,r),window.innerHeight-o-r);t.style.transform=`translate(${Math.round(l)}px, ${Math.round(d)}px)`}render(){return s(o,{key:"608e8c701ab1755da852125ca3a988345f9285f5",style:{display:"contents"}},s("slot",{key:"5d7c992aefe4b18a4e9c10b30a8cc177c7e280d9"}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return l()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function v(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function y(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),g)}break}}))}y();export{g as T,y as d};
-//# sourceMappingURL=p-CDHRJqea.js.map