@ds-mo/ui 2.11.2 → 2.13.0

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

@@ -0,0 +1,70 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ControlWidth } from '../../utils/control-width';
+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 type ButtonUnfilledWidth = ControlWidth;
+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;
+    /** Width fit — hug content (default) or fill the parent. */
+    width: ButtonUnfilledWidth;
+    /** 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. Always promotes foreground to primary. */
+    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 (primary color, no fill).
+     */
+    activeFill: boolean;
+    /** Show a 1px secondary 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, ButtonUnfilledWidth, } from './ButtonUnfilled';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,20 @@
+export type CardWidth = 'sm' | 'md' | 'lg';
+/** Visual chrome recipe — default app surface, or settings edit wash. */
+export type CardAppearance = 'default' | 'editing';
+/**
+ * Shared card chrome — width + matching min-height tokens, header (title + actions),
+ * and a flex body that fills leftover space. Compose this from settings / data-viz cards.
+ */
+export declare class Card {
+    /** Section heading shown in the card header. */
+    heading: string;
+    /**
+     * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the
+     * matching `--dimension-card-height-*` so empty bodies still fill the card.
+     */
+    cardWidth: CardWidth;
+    /** Chrome recipe — `editing` applies the settings edit wash. */
+    appearance: CardAppearance;
+    render(): any;
+}
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1,2 @@
+export type { CardWidth, CardAppearance } from './Card';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { CardWidth } from '../Card/Card';
+export type CardDataVizDonutWidth = CardWidth;
+/**
+ * Donut data-viz card — shared `ds-card` chrome with a fill chart region and
+ * content-sized legend. Hover sync between chart and legend stays here.
+ */
+export declare class CardDataVizDonut {
+    el: HTMLElement;
+    /** Widget heading shown in the card header. */
+    heading: string;
+    /** Card width token — also sets matching min-height. */
+    cardWidth: CardDataVizDonutWidth;
+    /** Emits when the header filter control is activated. */
+    dsFilterClick: EventEmitter<void>;
+    private hasChartSlot;
+    private hasLegendSlot;
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleChartHover;
+    private handleLegendHover;
+    private handleFilterClick;
+    render(): any;
+}
+//# sourceMappingURL=CardDataVizDonut.d.ts.map

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

@@ -0,0 +1,2 @@
+export type { CardDataVizDonutWidth } from './CardDataVizDonut';
+//# sourceMappingURL=index.d.ts.map

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

@@ -1,9 +1,14 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type CardSettingWidth = 'xs' | 'sm' | 'md' | 'lg';
+import type { CardWidth } from '../Card/Card';
+export type CardSettingWidth = CardWidth;
 export declare class CardSetting {
     /** Section heading shown in the card header. */
     heading: string;
-    /** Card width token. */
+    /**
+     * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the
+     * matching `--dimension-card-height-*` so the body fills available space
+     * even when the slot is empty.
+     */
     cardWidth: CardSettingWidth;
     /** Controlled edit state — parent owns single-edit orchestration. */
     editing: boolean;

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

@@ -1,9 +1,16 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { ChartDatum } from '../../utils/chart-types';
 export declare class ChartDonut {
+    el: HTMLElement;
     /** Slices to render. Set as a JS property (not an HTML attribute). */
     data: ChartDatum[];
-    size: number;
+    /**
+     * Explicit diameter in px. When unset, the donut sizes to its container
+     * (ResizeObserver) clamped between `--dimension-size-base * 16` (128px) and
+     * `* 24` (192px), and stays centered in the leftover space. Prefer unset
+     * inside card layouts.
+     */
+    size: number | undefined;
     /** Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px). */
     thickness: number | string;
     /** Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px). */
@@ -18,17 +25,40 @@ 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;
+    /** Measured fill diameter when `size` is unset. */
+    private measuredSize;
     /** Fires with the hovered/focused slice's datum, or `null` on leave/blur. */
     dsSliceHover: EventEmitter<ChartDatum | null>;
     private valueTextEl?;
     private captionTextEl?;
+    private wrapperEl?;
+    private resizeObserver;
+    private get isFillMode();
+    private get fillMinPx();
+    private get fillMaxPx();
+    /** Clamp available square side into the fill min/max band. */
+    private clampFillSize;
+    private get resolvedSize();
+    componentDidLoad(): void;
+    onSizePropChange(): void;
+    disconnectedCallback(): void;
+    private syncResizeObserver;
+    private measureHost;
+    private applyAvailableSize;
+    private teardownResizeObserver;
     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

@@ -1,8 +1,15 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { type ControlWidth } from '../../utils/control-width';
 export interface SelectOption {
     label: string;
     value: string;
 }
+export type SelectSize = 'md' | 'sm' | 'xs';
+export type SelectWidth = ControlWidth;
+/**
+ * Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in
+ * control-density sizes, with `ds-menu` for the option list.
+ */
 export declare class Select {
     el: HTMLElement;
     /**
@@ -14,8 +21,21 @@ export declare class Select {
     value: string;
     /** Placeholder shown when no value is selected. */
     placeholder: string;
-    /** Disables interaction. */
-    inactive: boolean;
+    /** Control density (height, padding, icon, type). */
+    size: SelectSize;
+    /** Width fit — fill the parent (default) or hug content. */
+    width: SelectWidth;
+    /** Disables interaction (25% opacity via ds-control-inactive). */
+    isInactive: boolean;
+    /**
+     * When a value is selected, render the selected interaction fill (same recipe
+     * as unfilled-button `activeFill`). Default `true`. Pass `false` for
+     * foreground-only selection (primary label, no fill).
+     * Selected/open promotes the label to primary; chevron stays secondary.
+     */
+    activeFill: boolean;
+    /** Show a 1px secondary inset border. Default on (matches unfilled button). */
+    hasBorder: boolean;
     ariaLabel: string | undefined;
     ariaLabelledby: string | undefined;
     /** Emits the selected value string. */
@@ -23,11 +43,23 @@ export declare class Select {
     private isOpen;
     private triggerEl;
     private menuEl;
+    /** True when the open was keyboard-driven — menu shows initial focus ring. */
+    private openWithFocusVisible;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
     onIsOpenChange(open: boolean): void;
     onOptionsChange(): void;
     onValueChange(): void;
+    private handleMenuSelect;
+    private handleMenuClose;
     private syncMenuItems;
+    /**
+     * Size/place the menu so option labels line up with the select label.
+     * Menu section padding insets items; we expand min-width by that chrome and
+     * shift left by the same amount (`alignOffset`). Menu can grow wider than
+     * the field (left-bottom / `align="start"`) when labels need more room.
+     */
+    private syncMenuLayout;
     private open;
     private close;
     private toggle;

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

@@ -0,0 +1,2 @@
+export type { SelectOption, SelectSize, SelectWidth } from './Select';
+//# sourceMappingURL=index.d.ts.map

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;
 }