@ds-mo/ui 2.11.1 → 2.12.0

package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts

@@ -0,0 +1,66 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ButtonUnfilledOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';
+export type ButtonUnfilledBackground = 'always-dark' | 'navigation';
+export type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';
+export type ButtonUnfilledSize = 'md' | 'sm' | 'xs';
+export declare class ButtonUnfilled {
+    el: HTMLElement;
+    /**
+     * Content layout. Default is label-only; pass `icon` for icon-only chrome
+     * (nav / tool rails) or `icon-label` for leading icon + text.
+     */
+    variant: ButtonUnfilledVariant;
+    /** Control density (height, padding, icon, type). */
+    size: ButtonUnfilledSize;
+    /** Visible text for `label` / `icon-label` variants. */
+    label: string;
+    /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */
+    icon: string;
+    /** Active/selected visual state. */
+    isActive: boolean;
+    /**
+     * When active, render the selected interaction fill.
+     * Default `true` for general UI. Shell chrome (nav / tool rails) should pass
+     * `false` so selection is foreground-only.
+     */
+    activeFill: boolean;
+    /** Show a 1px tertiary inset border. Default on; shell chrome can pass `false`. */
+    hasBorder: boolean;
+    /** Show a notification dot at the top-right of the icon zone (icon variant only). */
+    dot: boolean;
+    /** Disables interaction. */
+    isInactive: boolean;
+    /** Native button type. */
+    type: 'button' | 'submit' | 'reset';
+    /**
+     * Foreground and interaction tokens when the button sits on a contrasting parent
+     * background (default, medium, bold, or strong).
+     */
+    backgroundContrast?: ButtonUnfilledOnBackgroundContrast;
+    /** Parent surface context for navigation and always-dark chrome. */
+    background: ButtonUnfilledBackground | undefined;
+    ariaLabel: string | undefined;
+    controls: string | undefined;
+    expanded: boolean | undefined;
+    haspopup: string | undefined;
+    pressed: boolean | undefined;
+    /**
+     * Native `tabindex` for roving keyboard groups in shell chrome.
+     * Omit for the default button tab stop (`0`).
+     */
+    focusTabIndex?: number;
+    dsClick: EventEmitter<MouseEvent>;
+    dsChange: EventEmitter<boolean>;
+    private buttonEl;
+    setFocus(): Promise<void>;
+    private handleClick;
+    private effectiveContrast;
+    private get showIcon();
+    private get showLabel();
+    private get showDot();
+    /** Knock-out ring: selected fill → active wash; otherwise surface token. */
+    private get dotRing();
+    private get accessibleName();
+    render(): any;
+}
+//# sourceMappingURL=ButtonUnfilled.d.ts.map

package/dist/types/components/ButtonUnfilled/index.d.ts

@@ -0,0 +1,2 @@
+export type { ButtonUnfilledBackground, ButtonUnfilledOnBackgroundContrast, ButtonUnfilledSize, ButtonUnfilledVariant, } from './ButtonUnfilled';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/CardDataViz/CardDataViz.d.ts

@@ -1,4 +1,4 @@
-export type CardDataVizWidth = 'xs' | 'sm' | 'md' | 'lg';
+export type CardDataVizWidth = 'sm' | 'md' | 'lg';
 /**
  * Copied from CardSetting as a starting scaffold — header edit affordance removed for now
  * (data-viz widgets don't have an obvious "edit" action the way settings fields do); revisit
@@ -13,6 +13,10 @@ export declare class CardDataViz {
     private hasChartSlot;
     private hasLegendSlot;
     componentWillRender(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleChartHover;
+    private handleLegendHover;
     render(): any;
 }
 //# sourceMappingURL=CardDataViz.d.ts.map

package/dist/types/components/CardSetting/CardSetting.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type CardSettingWidth = 'xs' | 'sm' | 'md' | 'lg';
+export type CardSettingWidth = 'sm' | 'md' | 'lg';
 export declare class CardSetting {
     /** Section heading shown in the card header. */
     heading: string;

package/dist/types/components/ChartDonut/ChartDonut.d.ts

@@ -18,9 +18,13 @@ export declare class ChartDonut {
      * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling
      * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.
      * Falls back to this component's own pointer/focus hover when unset.
+     * External sync dims slices only — the data-viz tooltip is reserved for this
+     * component's own pointer/keyboard interaction.
      */
     activeLabel: string | null;
     private hoveredLabel;
+    /** Own-hover tooltip (cursor-following). Cleared on leave; not driven by `activeLabel`. */
+    private tooltip;
     /** Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. */
     private displayedValueText;
     private displayedCaptionText;
@@ -28,7 +32,10 @@ export declare class ChartDonut {
     dsSliceHover: EventEmitter<ChartDatum | null>;
     private valueTextEl?;
     private captionTextEl?;
+    private wrapperEl?;
     private handleHover;
+    private handleSliceMove;
+    private updateTooltip;
     componentDidRender(): void;
     render(): any;
 }

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -4,7 +4,7 @@ export declare class Checkbox {
     label: string;
     checked: boolean;
     indeterminate: boolean;
-    inactive: boolean;
+    isInactive: boolean;
     dsChange: EventEmitter<boolean>;
     private handleActivate;
     private handleKeyDown;

package/dist/types/components/Chip/Chip.d.ts

@@ -1,29 +1,33 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type ChipIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
-export type ChipContrast = 'strong' | 'bold' | 'medium' | 'faint';
-export type ChipElevation = 'none' | 'flat' | 'elevated';
+/**
+ * Semantic chip state — replaces Tag’s intent × contrast matrix.
+ * - `default` — neutral faint
+ * - `active` — brand faint
+ * - `error` — negative faint
+ * - `caution` — caution faint
+ */
+export type ChipState = 'default' | 'active' | 'error' | 'caution';
 export type ChipSize = 'md' | 'sm' | 'xs';
 export type ChipBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+/**
+ * Removable chip — same density recipe as Tag, but colored by semantic `state`
+ * (not intent × contrast). Not a toggle/select control; the only intentional
+ * action is remove.
+ */
 export declare class Chip {
     label: string;
-    intent: ChipIntent;
-    contrast: ChipContrast;
-    elevation: ChipElevation;
+    /** Semantic color state. @default 'default' */
+    state: ChipState;
     size: ChipSize;
     rounded: boolean;
+    /** When true (default), shows the trailing dismiss control. */
     removable: boolean;
     maxWidth: string | number | undefined;
-    inactive: boolean;
+    isInactive: boolean;
+    /** Surface context for interaction-fill tokens when the chip sits on a non-default surface. */
     background: ChipBackground | undefined;
-    pressed: boolean;
     /** Fired when the remove button is clicked. */
     dsRemove: EventEmitter<void>;
-    /** Fired when an interactive chip is clicked. */
-    dsClick: EventEmitter<void>;
-    /** Fired when the pressed state toggles. */
-    dsPressedChange: EventEmitter<boolean>;
-    private handleClick;
-    private handleKeyDown;
     private handleRemove;
     render(): any;
 }

package/dist/types/components/Chip/index.d.ts

@@ -1,2 +1,2 @@
-export type { ChipIntent, ChipContrast, ChipElevation, ChipSize, ChipBackground } from './Chip';
+export type { ChipState, ChipSize, ChipBackground } from './Chip';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/Input/Input.d.ts

@@ -7,7 +7,7 @@ export declare class Input {
     value: string;
     placeholder: string | undefined;
     type: InputType;
-    inactive: boolean;
+    isInactive: boolean;
     autoFocus: boolean;
     error: boolean;
     errorMessage: string | undefined;

package/dist/types/components/Pagination/Pagination.d.ts

@@ -3,7 +3,7 @@ export declare class Pagination {
     page: number;
     totalPages: number;
     siblingCount: number;
-    inactive: boolean;
+    isInactive: boolean;
     dsPageChange: EventEmitter<number>;
     private go;
     render(): any;

package/dist/types/components/PanelNav/PanelNav.d.ts

@@ -105,6 +105,8 @@ export declare class PanelNav {
     private handleResizeHandleMouseEnter;
     private handleResizeHandleMouseLeave;
     private handleResizeHandleMouseDown;
+    private renderFooterAction;
+    private renderFooterUser;
     private renderNavItem;
     render(): any;
 }

package/dist/types/components/PanelTools/panel-tools-types.d.ts

@@ -12,7 +12,7 @@ export interface PanelToolsItem {
     selected?: boolean;
     /** Show a notification dot. */
     dot?: boolean;
-    inactive?: boolean;
+    isInactive?: boolean;
     ariaLabel?: string;
 }
 //# sourceMappingURL=panel-tools-types.d.ts.map

package/dist/types/components/RadioGroup/RadioGroup.d.ts

@@ -2,14 +2,14 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export interface RadioOption {
     label: string;
     value: string;
-    inactive?: boolean;
+    isInactive?: boolean;
 }
 export declare class RadioGroup {
     el: HTMLElement;
     options: RadioOption[];
     value: string;
     direction: 'vertical' | 'horizontal';
-    inactive: boolean;
+    isInactive: boolean;
     ariaLabel: string | undefined;
     ariaLabelledby: string | undefined;
     dsChange: EventEmitter<string>;

package/dist/types/components/Select/Select.d.ts

@@ -14,8 +14,8 @@ export declare class Select {
     value: string;
     /** Placeholder shown when no value is selected. */
     placeholder: string;
-    /** Disables interaction. */
-    inactive: boolean;
+    /** Disables interaction (25% opacity via ds-control-inactive). */
+    isInactive: boolean;
     ariaLabel: string | undefined;
     ariaLabelledby: string | undefined;
     /** Emits the selected value string. */

package/dist/types/components/ShellGradientSwatch/ShellGradientSwatch.d.ts

@@ -5,7 +5,7 @@ export declare class ShellGradientSwatch {
     preset: ShellGradientPreset;
     /** Selected — brand stroke + halo over inner fill/border/interaction stack. */
     selected: boolean;
-    inactive: boolean;
+    isInactive: boolean;
     ariaLabel: string | undefined;
     dsSelect: EventEmitter<ShellGradientPreset>;
     private handleClick;

package/dist/types/components/Slider/Slider.d.ts

@@ -6,7 +6,7 @@ export declare class Slider {
     max: number;
     step: number;
     label: string;
-    inactive: boolean;
+    isInactive: boolean;
     valueText: string | undefined;
     /** Associates with an external <label>. Defaults to an auto-generated ID. */
     inputId: string | undefined;

package/dist/types/components/TabGroup/TabGroup.d.ts

@@ -16,7 +16,7 @@ export declare class TabGroup {
     /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */
     onValueChange(next: string, prev: string | undefined): void;
     /**
-     * Find the next non-disabled tab index relative to `from`, stepping by `step`.
+     * Find the next non-inactive tab index relative to `from`, stepping by `step`.
      * Returns `from` unchanged if no other enabled tab exists.
      */
     private findEnabled;

package/dist/types/components/TabGroup/tab-item-utils.d.ts

@@ -4,7 +4,8 @@ export interface TabItemDivider {
 export interface TabItemTab {
     id: string;
     label: string;
-    disabled?: boolean;
+    /** Disables the tab (same meaning as control `isInactive`). */
+    isInactive?: boolean;
     /** id of the tabpanel this tab controls */
     panelId?: string;
     /** Show a notification dot (brand) on the tab — no count, matching panel-nav. */

package/dist/types/components/TabGroupNav/TabGroupNav.d.ts

@@ -32,7 +32,7 @@ export declare class TabGroupNav {
     private getFocusedIndex;
     private findEnabledLinear;
     /**
-     * Find the next non-disabled tab index relative to `from`, stepping by `step`.
+     * Find the next non-inactive tab index relative to `from`, stepping by `step`.
      * Returns `from` unchanged if no other enabled tab exists.
      */
     private findEnabled;

package/dist/types/components/Tag/Tag.d.ts

@@ -1,12 +1,10 @@
 export type TagIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
 export type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';
-export type TagElevation = 'none' | 'flat' | 'elevated';
 export type TagSize = 'md' | 'sm' | 'xs';
 export declare class Tag {
     label: string;
     intent: TagIntent;
     contrast: TagContrast;
-    elevation: TagElevation;
     size: TagSize;
     rounded: boolean;
     maxWidth: string | number | undefined;

package/dist/types/components/Tag/index.d.ts

@@ -1,2 +1,2 @@
-export type { TagIntent, TagContrast, TagElevation, TagSize } from './Tag';
+export type { TagIntent, TagContrast, TagSize } from './Tag';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/Toggle/Toggle.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class Toggle {
     checked: boolean;
-    inactive: boolean;
+    isInactive: boolean;
     dsChange: EventEmitter<boolean>;
     private handleClick;
     private handleKeyDown;

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -1,33 +1,47 @@
 export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
 export type TooltipAlign = 'start' | 'center' | 'end';
+export type TooltipSize = 'md' | 'sm' | 'xs';
+/**
+ * Imperative body portal for the popup.
+ * Stencil must not own the portaled node — moving a VDOM child to `document.body`
+ * causes recreate → re-portal → @State loops that freeze the page.
+ */
 export declare class Tooltip {
     el: HTMLElement;
     label: string;
+    /** Control density (height, padding, type). */
+    size: TooltipSize;
     side: TooltipSide;
     align: TooltipAlign;
     /** Gap between anchor and tooltip — number (px) or TokoMo length. */
     sideOffset: number | string;
     /** Cross-axis offset — number (px) or TokoMo length. */
     alignOffset: number | string;
-    /** Show delay — number (ms) or TokoMo time token / `var(--effect-animation-delay-*)`. */
+    /**
+     * Hover show delay before the tooltip appears.
+     * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)
+     * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the
+     * initial hover/focus show only — after a recent dismiss, reopen is instant.
+     * Prefer the default; override only for denser chrome or rare/destructive actions.
+     */
     delay: number | string;
     shortcutKey: string | undefined;
     shortcutKeyPosition: 'start' | 'end';
-    private visible;
-    private closing;
-    private pos;
     private tooltipId;
     private delayTimer;
     private closeTimer;
     private anchor;
-    private tooltipEl;
+    private popupEl;
+    private skipEnterAnimation;
+    private isOpen;
     private mouseEnterHandler;
     private mouseLeaveHandler;
+    /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */
     private focusHandler;
     private blurHandler;
     componentDidLoad(): void;
     disconnectedCallback(): void;
-    onPositionPropsChange(): void;
+    onContentOrPositionChange(): void;
     private get viewportPadPx();
     private get sideOffsetPx();
     private get alignOffsetPx();
@@ -39,8 +53,13 @@ export declare class Tooltip {
     private bindAnchor;
     private unbindAnchor;
     private clearTimers;
+    private destroyPopup;
+    /** Drop the open tip immediately (warm handoff to another tooltip). */
+    private hideInstant;
     private show;
     private hide;
+    private mountPopup;
+    private renderPopupContent;
     private calculatePosition;
     render(): any;
 }

package/dist/types/components/TooltipDataViz/TooltipDataViz.d.ts

@@ -10,6 +10,9 @@ export type TooltipDataVizAlign = 'top' | 'bottom';
  * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right
  * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge
  * keeps it on-screen.
+ *
+ * Mount (or remount) when a hover session starts so `delay` applies once per hover;
+ * keep the instance mounted while the cursor moves so tracking stays instant.
  */
 export declare class TooltipDataViz {
     el: HTMLElement;
@@ -18,10 +21,25 @@ export declare class TooltipDataViz {
     /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */
     x: number;
     y: number;
+    /**
+     * Show delay after mount before the callout appears.
+     * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)
+     * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need
+     * immediate feedback while scrubbing; prefer the default. Mount once per
+     * hover session so any non-zero delay runs once, then track `x`/`y` instantly.
+     */
+    delay: number | string;
     private side;
     private align;
+    private visible;
+    private delayTimer;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
     onAnchorChange(): void;
+    onDelayChange(): void;
+    private get showDelayMs();
+    private clearDelayTimer;
+    private scheduleShow;
     private calculatePlacement;
     render(): any;
 }