@ds-mo/ui 2.8.0 → 2.10.0

package/dist/types/components.d.ts

@@ -12,10 +12,10 @@ import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 import { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 import { BarNavTab } from "./components/BarNav/bar-nav-types";
 import { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
-import { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
-import { ButtonGroupElevation, ButtonGroupItem, ButtonGroupSize } from "./components/ButtonGroup/ButtonGroup";
-import { ButtonUnfilledIconBackground } from "./components/ButtonUnfilledIcon/ButtonUnfilledIcon";
+import { ButtonFilledContrast, ButtonFilledIntent } from "./components/ButtonFilled/ButtonFilled";
+import { ButtonUnfilledIconBackground, ButtonUnfilledIconOnBackgroundContrast } from "./components/ButtonUnfilledIcon/ButtonUnfilledIcon";
 import { CardElevation, CardRadius } from "./components/Card/Card";
+import { CardSettingWidth } from "./components/CardSetting/CardSetting";
 import { ChipBackground, ChipContrast, ChipElevation, ChipIntent, ChipSize } from "./components/Chip/Chip";
 import { DividerInset, DividerLength, DividerOrientation, DividerSurface } from "./components/Divider/Divider";
 import { EmptyStateType } from "./components/EmptyState/EmptyState";
@@ -42,8 +42,6 @@ import { SortState, TableColumn } from "./components/Table/Table";
 import { TagContrast, TagElevation, TagIntent, TagSize } from "./components/Tag/Tag";
 import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/Text";
 import { ToastPosition } from "./components/Toast/Toast";
-import { ToggleButtonBackground, ToggleButtonElevation, ToggleButtonSize } from "./components/ToggleButton/ToggleButton";
-import { ToggleGroupBackground, ToggleGroupElevation, ToggleGroupItem, ToggleGroupSize } from "./components/ToggleButtonGroup/ToggleButtonGroup";
 import { TooltipAlign, TooltipSide } from "./components/Tooltip/Tooltip";
 export { AccordionItemData } from "./components/Accordion/Accordion";
 export { NavChromeStyle } from "./nav/nav-chrome";
@@ -52,10 +50,10 @@ export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 export { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 export { BarNavTab } from "./components/BarNav/bar-nav-types";
 export { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
-export { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
-export { ButtonGroupElevation, ButtonGroupItem, ButtonGroupSize } from "./components/ButtonGroup/ButtonGroup";
-export { ButtonUnfilledIconBackground } from "./components/ButtonUnfilledIcon/ButtonUnfilledIcon";
+export { ButtonFilledContrast, ButtonFilledIntent } from "./components/ButtonFilled/ButtonFilled";
+export { ButtonUnfilledIconBackground, ButtonUnfilledIconOnBackgroundContrast } from "./components/ButtonUnfilledIcon/ButtonUnfilledIcon";
 export { CardElevation, CardRadius } from "./components/Card/Card";
+export { CardSettingWidth } from "./components/CardSetting/CardSetting";
 export { ChipBackground, ChipContrast, ChipElevation, ChipIntent, ChipSize } from "./components/Chip/Chip";
 export { DividerInset, DividerLength, DividerOrientation, DividerSurface } from "./components/Divider/Divider";
 export { EmptyStateType } from "./components/EmptyState/EmptyState";
@@ -82,8 +80,6 @@ export { SortState, TableColumn } from "./components/Table/Table";
 export { TagContrast, TagElevation, TagIntent, TagSize } from "./components/Tag/Tag";
 export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/Text";
 export { ToastPosition } from "./components/Toast/Toast";
-export { ToggleButtonBackground, ToggleButtonElevation, ToggleButtonSize } from "./components/ToggleButton/ToggleButton";
-export { ToggleGroupBackground, ToggleGroupElevation, ToggleGroupItem, ToggleGroupSize } from "./components/ToggleButtonGroup/ToggleButtonGroup";
 export { TooltipAlign, TooltipSide } from "./components/Tooltip/Tooltip";
 export namespace Components {
     interface DsAccordion {
@@ -139,7 +135,7 @@ export namespace Components {
          */
         "count": number;
         /**
-          * Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`; set `on-gradient-background` to opt in/out explicitly.
+          * Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`; set `gradient-background` to opt in/out explicitly.  The attribute must NOT start with `on` — Stencil's setAccessor routes any unknown `on*` member down the event-listener path during attribute reflection, calling addEventListener with a non-listener and throwing.
           * @default false
          */
         "gradientBackground": boolean;
@@ -246,79 +242,37 @@ export namespace Components {
          */
         "separator": string;
     }
-    interface DsButton {
-        "ariaLabel": string | undefined;
-        "ariaLabelledby": string | undefined;
-        "background": ButtonBackground | undefined;
-        "badgeCount": number | undefined;
+    interface DsButtonFilled {
         /**
-          * @default 'bold'
+          * @default 'action'
          */
-        "contrast": ButtonContrast;
+        "ariaLabel": string;
         /**
-          * @default false
+          * Background fill weight. Foreground uses the paired contrast token: bold → faint, strong → medium, medium → strong, faint → bold.
+          * @default 'bold'
          */
-        "dropdown": boolean;
-        "elevation": ButtonElevation | undefined;
+        "contrast": ButtonFilledContrast;
         /**
-          * @default false
+          * Icon name passed to <ds-icon>.
+          * @default ''
          */
-        "fullWidth": boolean;
-        "href": string | undefined;
+        "icon": string;
         /**
+          * Disables interaction.
           * @default false
          */
         "inactive": boolean;
         /**
+          * Semantic colour intent.
           * @default 'brand'
          */
-        "intent": ButtonIntent;
-        "label": string | undefined;
-        /**
-          * @default false
-         */
-        "loading": boolean;
-        /**
-          * @default false
-         */
-        "rounded": boolean;
-        /**
-          * @default 'md'
-         */
-        "size": ButtonSize;
-        "target": string | undefined;
+        "intent": ButtonFilledIntent;
+        "setFocus": () => Promise<void>;
         /**
+          * Native button type.
           * @default 'button'
          */
         "type": 'button' | 'submit' | 'reset';
-        /**
-          * @default 'primary'
-         */
-        "variant": ButtonVariant;
-        "width": string | undefined;
-    }
-    interface DsButtonGroup {
-        /**
-          * Chrome level for the group container.
-          * @default 'flat'
-         */
-        "elevation": ButtonGroupElevation;
-        /**
-          * Array of button descriptors. Set via JS property.
-          * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];
-          * @default []
-         */
-        "items": ButtonGroupItem[];
-        /**
-          * Pill shape for group + buttons.
-          * @default false
-         */
-        "rounded": boolean;
-        /**
-          * Size passed to each ds-button.
-          * @default 'md'
-         */
-        "size": ButtonGroupSize;
     }
     interface DsButtonUnfilledIcon {
         /**
@@ -331,9 +285,13 @@ export namespace Components {
          */
         "ariaLabel": string;
         /**
-          * Parent surface context — adjusts hover/press/focus colours for coloured backgrounds.
+          * Parent surface context for navigation and always-dark chrome.
          */
         "background": ButtonUnfilledIconBackground | undefined;
+        /**
+          * Foreground and interaction tokens when the button sits on a contrasting parent background (default, medium, bold, or strong).
+         */
+        "backgroundContrast"?: ButtonUnfilledIconOnBackgroundContrast;
         "controls": string | undefined;
         /**
           * Show a notification dot at the top-right of the icon zone.
@@ -384,6 +342,22 @@ export namespace Components {
          */
         "radius": CardRadius;
     }
+    interface DsCardSetting {
+        /**
+          * Card width token.
+          * @default 'md'
+         */
+        "cardWidth": CardSettingWidth;
+        /**
+          * Controlled edit state — parent owns single-edit orchestration.
+          * @default false
+         */
+        "editing": boolean;
+        /**
+          * Section heading shown in the card header.
+         */
+        "heading": string;
+    }
     interface DsCheckbox {
         /**
           * @default false
@@ -1067,79 +1041,6 @@ export namespace Components {
          */
         "inactive": boolean;
     }
-    interface DsToggleButton {
-        "ariaLabel": string | undefined;
-        /**
-          * Parent surface context — adjusts hover tokens for colored backgrounds.
-         */
-        "background": ToggleButtonBackground | undefined;
-        /**
-          * Chrome level.   none     — ghost (transparent, no border, no shadow)   flat     — border only, transparent bg   elevated — bg-primary + shadow  [default]   floating — bg-primary + FAB-strength shadow
-          * @default 'elevated'
-         */
-        "elevation": ToggleButtonElevation;
-        /**
-          * Icon name for <ds-icon>. Set via JS property.
-          * @example el.icon = 'GridView';
-         */
-        "icon": string | undefined;
-        /**
-          * Disables interaction.
-          * @default false
-         */
-        "inactive": boolean;
-        /**
-          * Label text.
-         */
-        "label": string | undefined;
-        /**
-          * Controlled pressed state.
-          * @default false
-         */
-        "pressed": boolean;
-        /**
-          * Pill shape.
-          * @default false
-         */
-        "rounded": boolean;
-        /**
-          * Size: md (32px), sm (24px), xs (16px).
-          * @default 'md'
-         */
-        "size": ToggleButtonSize;
-    }
-    interface DsToggleButtonGroup {
-        /**
-          * Parent surface context.
-         */
-        "background": ToggleGroupBackground | undefined;
-        /**
-          * Chrome level for the group container.
-          * @default 'elevated'
-         */
-        "elevation": ToggleGroupElevation;
-        /**
-          * Array of item descriptors. Set via JS property.
-          * @example el.items = [{ id: 'list', label: 'List' }, { id: 'grid', icon: 'GridView' }];
-          * @default []
-         */
-        "items": ToggleGroupItem[];
-        /**
-          * Pill shape for group + buttons.
-          * @default false
-         */
-        "rounded": boolean;
-        /**
-          * Size passed to each ds-toggle-button.
-          * @default 'md'
-         */
-        "size": ToggleGroupSize;
-        /**
-          * ID of the currently selected / pressed item.
-          * @default ''
-         */
-        "value": string;
-    }
     interface DsTooltip {
         /**
           * @default 'center'
@@ -1188,18 +1089,18 @@ export interface DsBreadcrumbCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsBreadcrumbElement;
 }
-export interface DsButtonCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsButtonElement;
-}
-export interface DsButtonGroupCustomEvent<T> extends CustomEvent<T> {
+export interface DsButtonFilledCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLDsButtonGroupElement;
+    target: HTMLDsButtonFilledElement;
 }
 export interface DsButtonUnfilledIconCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsButtonUnfilledIconElement;
 }
+export interface DsCardSettingCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsCardSettingElement;
+}
 export interface DsCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsCheckboxElement;
@@ -1268,14 +1169,6 @@ export interface DsToggleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsToggleElement;
 }
-export interface DsToggleButtonCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsToggleButtonElement;
-}
-export interface DsToggleButtonGroupCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsToggleButtonGroupElement;
-}
 declare global {
     interface HTMLDsAccordionElementEventMap {
         "dsExpandedChange": string[];
@@ -1357,41 +1250,22 @@ declare global {
         prototype: HTMLDsBreadcrumbElement;
         new (): HTMLDsBreadcrumbElement;
     };
-    interface HTMLDsButtonElementEventMap {
+    interface HTMLDsButtonFilledElementEventMap {
         "dsClick": MouseEvent;
-        "dsMouseEnter": MouseEvent;
-        "dsMouseLeave": MouseEvent;
     }
-    interface HTMLDsButtonElement extends Components.DsButton, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsButtonElementEventMap>(type: K, listener: (this: HTMLDsButtonElement, ev: DsButtonCustomEvent<HTMLDsButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    interface HTMLDsButtonFilledElement extends Components.DsButtonFilled, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsButtonFilledElementEventMap>(type: K, listener: (this: HTMLDsButtonFilledElement, ev: DsButtonFilledCustomEvent<HTMLDsButtonFilledElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLDsButtonElementEventMap>(type: K, listener: (this: HTMLDsButtonElement, ev: DsButtonCustomEvent<HTMLDsButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsButtonFilledElementEventMap>(type: K, listener: (this: HTMLDsButtonFilledElement, ev: DsButtonFilledCustomEvent<HTMLDsButtonFilledElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLDsButtonElement: {
-        prototype: HTMLDsButtonElement;
-        new (): HTMLDsButtonElement;
-    };
-    interface HTMLDsButtonGroupElementEventMap {
-        "dsClick": number;
-    }
-    interface HTMLDsButtonGroupElement extends Components.DsButtonGroup, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsButtonGroupElementEventMap>(type: K, listener: (this: HTMLDsButtonGroupElement, ev: DsButtonGroupCustomEvent<HTMLDsButtonGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLDsButtonGroupElementEventMap>(type: K, listener: (this: HTMLDsButtonGroupElement, ev: DsButtonGroupCustomEvent<HTMLDsButtonGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLDsButtonGroupElement: {
-        prototype: HTMLDsButtonGroupElement;
-        new (): HTMLDsButtonGroupElement;
+    var HTMLDsButtonFilledElement: {
+        prototype: HTMLDsButtonFilledElement;
+        new (): HTMLDsButtonFilledElement;
     };
     interface HTMLDsButtonUnfilledIconElementEventMap {
         "dsClick": MouseEvent;
@@ -1417,6 +1291,23 @@ declare global {
         prototype: HTMLDsCardElement;
         new (): HTMLDsCardElement;
     };
+    interface HTMLDsCardSettingElementEventMap {
+        "dsEditingChange": boolean;
+    }
+    interface HTMLDsCardSettingElement extends Components.DsCardSetting, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsCardSettingElementEventMap>(type: K, listener: (this: HTMLDsCardSettingElement, ev: DsCardSettingCustomEvent<HTMLDsCardSettingElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsCardSettingElementEventMap>(type: K, listener: (this: HTMLDsCardSettingElement, ev: DsCardSettingCustomEvent<HTMLDsCardSettingElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsCardSettingElement: {
+        prototype: HTMLDsCardSettingElement;
+        new (): HTMLDsCardSettingElement;
+    };
     interface HTMLDsCheckboxElementEventMap {
         "dsChange": boolean;
     }
@@ -1802,40 +1693,6 @@ declare global {
         prototype: HTMLDsToggleElement;
         new (): HTMLDsToggleElement;
     };
-    interface HTMLDsToggleButtonElementEventMap {
-        "dsChange": boolean;
-    }
-    interface HTMLDsToggleButtonElement extends Components.DsToggleButton, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsToggleButtonElementEventMap>(type: K, listener: (this: HTMLDsToggleButtonElement, ev: DsToggleButtonCustomEvent<HTMLDsToggleButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLDsToggleButtonElementEventMap>(type: K, listener: (this: HTMLDsToggleButtonElement, ev: DsToggleButtonCustomEvent<HTMLDsToggleButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLDsToggleButtonElement: {
-        prototype: HTMLDsToggleButtonElement;
-        new (): HTMLDsToggleButtonElement;
-    };
-    interface HTMLDsToggleButtonGroupElementEventMap {
-        "dsChange": string;
-    }
-    interface HTMLDsToggleButtonGroupElement extends Components.DsToggleButtonGroup, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsToggleButtonGroupElementEventMap>(type: K, listener: (this: HTMLDsToggleButtonGroupElement, ev: DsToggleButtonGroupCustomEvent<HTMLDsToggleButtonGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLDsToggleButtonGroupElementEventMap>(type: K, listener: (this: HTMLDsToggleButtonGroupElement, ev: DsToggleButtonGroupCustomEvent<HTMLDsToggleButtonGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLDsToggleButtonGroupElement: {
-        prototype: HTMLDsToggleButtonGroupElement;
-        new (): HTMLDsToggleButtonGroupElement;
-    };
     interface HTMLDsTooltipElement extends Components.DsTooltip, HTMLStencilElement {
     }
     var HTMLDsTooltipElement: {
@@ -1849,10 +1706,10 @@ declare global {
         "ds-banner": HTMLDsBannerElement;
         "ds-bar-nav": HTMLDsBarNavElement;
         "ds-breadcrumb": HTMLDsBreadcrumbElement;
-        "ds-button": HTMLDsButtonElement;
-        "ds-button-group": HTMLDsButtonGroupElement;
+        "ds-button-filled": HTMLDsButtonFilledElement;
         "ds-button-unfilled-icon": HTMLDsButtonUnfilledIconElement;
         "ds-card": HTMLDsCardElement;
+        "ds-card-setting": HTMLDsCardSettingElement;
         "ds-checkbox": HTMLDsCheckboxElement;
         "ds-chip": HTMLDsChipElement;
         "ds-divider": HTMLDsDividerElement;
@@ -1883,8 +1740,6 @@ declare global {
         "ds-text": HTMLDsTextElement;
         "ds-toast-provider": HTMLDsToastProviderElement;
         "ds-toggle": HTMLDsToggleElement;
-        "ds-toggle-button": HTMLDsToggleButtonElement;
-        "ds-toggle-button-group": HTMLDsToggleButtonGroupElement;
         "ds-tooltip": HTMLDsTooltipElement;
     }
 }
@@ -1945,7 +1800,7 @@ declare namespace LocalJSX {
          */
         "count"?: number;
         /**
-          * Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`; set `on-gradient-background` to opt in/out explicitly.
+          * Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`; set `gradient-background` to opt in/out explicitly.  The attribute must NOT start with `on` — Stencil's setAccessor routes any unknown `on*` member down the event-listener path during attribute reflection, calling addEventListener with a non-listener and throwing.
           * @default false
          */
         "gradientBackground"?: boolean;
@@ -2058,86 +1913,37 @@ declare namespace LocalJSX {
          */
         "separator"?: string;
     }
-    interface DsButton {
-        "ariaLabel"?: string | undefined;
-        "ariaLabelledby"?: string | undefined;
-        "background"?: ButtonBackground | undefined;
-        "badgeCount"?: number | undefined;
+    interface DsButtonFilled {
         /**
-          * @default 'bold'
+          * @default 'action'
          */
-        "contrast"?: ButtonContrast;
+        "ariaLabel"?: string;
         /**
-          * @default false
+          * Background fill weight. Foreground uses the paired contrast token: bold → faint, strong → medium, medium → strong, faint → bold.
+          * @default 'bold'
          */
-        "dropdown"?: boolean;
-        "elevation"?: ButtonElevation | undefined;
+        "contrast"?: ButtonFilledContrast;
         /**
-          * @default false
+          * Icon name passed to <ds-icon>.
+          * @default ''
          */
-        "fullWidth"?: boolean;
-        "href"?: string | undefined;
+        "icon"?: string;
         /**
+          * Disables interaction.
           * @default false
          */
         "inactive"?: boolean;
         /**
+          * Semantic colour intent.
           * @default 'brand'
          */
-        "intent"?: ButtonIntent;
-        "label"?: string | undefined;
-        /**
-          * @default false
-         */
-        "loading"?: boolean;
-        "onDsClick"?: (event: DsButtonCustomEvent<MouseEvent>) => void;
-        "onDsMouseEnter"?: (event: DsButtonCustomEvent<MouseEvent>) => void;
-        "onDsMouseLeave"?: (event: DsButtonCustomEvent<MouseEvent>) => void;
-        /**
-          * @default false
-         */
-        "rounded"?: boolean;
-        /**
-          * @default 'md'
-         */
-        "size"?: ButtonSize;
-        "target"?: string | undefined;
+        "intent"?: ButtonFilledIntent;
+        "onDsClick"?: (event: DsButtonFilledCustomEvent<MouseEvent>) => void;
         /**
+          * Native button type.
           * @default 'button'
          */
         "type"?: 'button' | 'submit' | 'reset';
-        /**
-          * @default 'primary'
-         */
-        "variant"?: ButtonVariant;
-        "width"?: string | undefined;
-    }
-    interface DsButtonGroup {
-        /**
-          * Chrome level for the group container.
-          * @default 'flat'
-         */
-        "elevation"?: ButtonGroupElevation;
-        /**
-          * Array of button descriptors. Set via JS property.
-          * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];
-          * @default []
-         */
-        "items"?: ButtonGroupItem[];
-        /**
-          * Emits the index of the clicked item.
-         */
-        "onDsClick"?: (event: DsButtonGroupCustomEvent<number>) => void;
-        /**
-          * Pill shape for group + buttons.
-          * @default false
-         */
-        "rounded"?: boolean;
-        /**
-          * Size passed to each ds-button.
-          * @default 'md'
-         */
-        "size"?: ButtonGroupSize;
     }
     interface DsButtonUnfilledIcon {
         /**
@@ -2150,9 +1956,13 @@ declare namespace LocalJSX {
          */
         "ariaLabel"?: string;
         /**
-          * Parent surface context — adjusts hover/press/focus colours for coloured backgrounds.
+          * Parent surface context for navigation and always-dark chrome.
          */
         "background"?: ButtonUnfilledIconBackground | undefined;
+        /**
+          * Foreground and interaction tokens when the button sits on a contrasting parent background (default, medium, bold, or strong).
+         */
+        "backgroundContrast"?: ButtonUnfilledIconOnBackgroundContrast;
         "controls"?: string | undefined;
         /**
           * Show a notification dot at the top-right of the icon zone.
@@ -2204,6 +2014,26 @@ declare namespace LocalJSX {
          */
         "radius"?: CardRadius;
     }
+    interface DsCardSetting {
+        /**
+          * Card width token.
+          * @default 'md'
+         */
+        "cardWidth"?: CardSettingWidth;
+        /**
+          * Controlled edit state — parent owns single-edit orchestration.
+          * @default false
+         */
+        "editing"?: boolean;
+        /**
+          * Section heading shown in the card header.
+         */
+        "heading": string;
+        /**
+          * Emits when the user enters or exits edit mode.
+         */
+        "onDsEditingChange"?: (event: DsCardSettingCustomEvent<boolean>) => void;
+    }
     interface DsCheckbox {
         /**
           * @default false
@@ -2945,87 +2775,6 @@ declare namespace LocalJSX {
         "inactive"?: boolean;
         "onDsChange"?: (event: DsToggleCustomEvent<boolean>) => void;
     }
-    interface DsToggleButton {
-        "ariaLabel"?: string | undefined;
-        /**
-          * Parent surface context — adjusts hover tokens for colored backgrounds.
-         */
-        "background"?: ToggleButtonBackground | undefined;
-        /**
-          * Chrome level.   none     — ghost (transparent, no border, no shadow)   flat     — border only, transparent bg   elevated — bg-primary + shadow  [default]   floating — bg-primary + FAB-strength shadow
-          * @default 'elevated'
-         */
-        "elevation"?: ToggleButtonElevation;
-        /**
-          * Icon name for <ds-icon>. Set via JS property.
-          * @example el.icon = 'GridView';
-         */
-        "icon"?: string | undefined;
-        /**
-          * Disables interaction.
-          * @default false
-         */
-        "inactive"?: boolean;
-        /**
-          * Label text.
-         */
-        "label"?: string | undefined;
-        /**
-          * Emits the new pressed value (!pressed) on click.
-         */
-        "onDsChange"?: (event: DsToggleButtonCustomEvent<boolean>) => void;
-        /**
-          * Controlled pressed state.
-          * @default false
-         */
-        "pressed"?: boolean;
-        /**
-          * Pill shape.
-          * @default false
-         */
-        "rounded"?: boolean;
-        /**
-          * Size: md (32px), sm (24px), xs (16px).
-          * @default 'md'
-         */
-        "size"?: ToggleButtonSize;
-    }
-    interface DsToggleButtonGroup {
-        /**
-          * Parent surface context.
-         */
-        "background"?: ToggleGroupBackground | undefined;
-        /**
-          * Chrome level for the group container.
-          * @default 'elevated'
-         */
-        "elevation"?: ToggleGroupElevation;
-        /**
-          * Array of item descriptors. Set via JS property.
-          * @example el.items = [{ id: 'list', label: 'List' }, { id: 'grid', icon: 'GridView' }];
-          * @default []
-         */
-        "items"?: ToggleGroupItem[];
-        /**
-          * Emits the id of the newly selected item.
-         */
-        "onDsChange"?: (event: DsToggleButtonGroupCustomEvent<string>) => void;
-        /**
-          * Pill shape for group + buttons.
-          * @default false
-         */
-        "rounded"?: boolean;
-        /**
-          * Size passed to each ds-toggle-button.
-          * @default 'md'
-         */
-        "size"?: ToggleGroupSize;
-        /**
-          * ID of the currently selected / pressed item.
-          * @default ''
-         */
-        "value"?: string;
-    }
     interface DsTooltip {
         /**
           * @default 'center'
@@ -3099,31 +2848,13 @@ declare namespace LocalJSX {
     interface DsBreadcrumbAttributes {
         "separator": string;
     }
-    interface DsButtonAttributes {
-        "variant": ButtonVariant;
-        "intent": ButtonIntent;
-        "size": ButtonSize;
-        "label": string | undefined;
-        "rounded": boolean;
-        "fullWidth": boolean;
-        "width": string | undefined;
-        "contrast": ButtonContrast;
-        "background": ButtonBackground | undefined;
-        "dropdown": boolean;
-        "badgeCount": number | undefined;
-        "elevation": ButtonElevation | undefined;
-        "loading": boolean;
+    interface DsButtonFilledAttributes {
+        "icon": string;
+        "intent": ButtonFilledIntent;
+        "contrast": ButtonFilledContrast;
         "inactive": boolean;
-        "href": string | undefined;
-        "target": string | undefined;
         "type": 'button' | 'submit' | 'reset';
-        "ariaLabel": string | undefined;
-        "ariaLabelledby": string | undefined;
-    }
-    interface DsButtonGroupAttributes {
-        "elevation": ButtonGroupElevation;
-        "size": ButtonGroupSize;
-        "rounded": boolean;
+        "ariaLabel": string;
     }
     interface DsButtonUnfilledIconAttributes {
         "icon": string;
@@ -3133,6 +2864,7 @@ declare namespace LocalJSX {
         "dot": boolean;
         "inactive": boolean;
         "type": 'button' | 'submit' | 'reset';
+        "backgroundContrast": ButtonUnfilledIconOnBackgroundContrast;
         "background": ButtonUnfilledIconBackground | undefined;
         "ariaLabel": string;
         "controls": string | undefined;
@@ -3145,6 +2877,11 @@ declare namespace LocalJSX {
         "elevation": CardElevation;
         "radius": CardRadius;
     }
+    interface DsCardSettingAttributes {
+        "heading": string;
+        "cardWidth": CardSettingWidth;
+        "editing": boolean;
+    }
     interface DsCheckboxAttributes {
         "label": string;
         "checked": boolean;
@@ -3363,24 +3100,6 @@ declare namespace LocalJSX {
         "checked": boolean;
         "inactive": boolean;
     }
-    interface DsToggleButtonAttributes {
-        "elevation": ToggleButtonElevation;
-        "label": string | undefined;
-        "icon": string | undefined;
-        "size": ToggleButtonSize;
-        "rounded": boolean;
-        "background": ToggleButtonBackground | undefined;
-        "pressed": boolean;
-        "inactive": boolean;
-        "ariaLabel": string | undefined;
-    }
-    interface DsToggleButtonGroupAttributes {
-        "value": string;
-        "elevation": ToggleGroupElevation;
-        "size": ToggleGroupSize;
-        "rounded": boolean;
-        "background": ToggleGroupBackground | undefined;
-    }
     interface DsTooltipAttributes {
         "label": string;
         "side": TooltipSide;
@@ -3399,10 +3118,10 @@ declare namespace LocalJSX {
         "ds-banner": Omit<DsBanner, keyof DsBannerAttributes> & { [K in keyof DsBanner & keyof DsBannerAttributes]?: DsBanner[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `attr:${K}`]?: DsBannerAttributes[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `prop:${K}`]?: DsBanner[K] };
         "ds-bar-nav": Omit<DsBarNav, keyof DsBarNavAttributes> & { [K in keyof DsBarNav & keyof DsBarNavAttributes]?: DsBarNav[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `attr:${K}`]?: DsBarNavAttributes[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `prop:${K}`]?: DsBarNav[K] };
         "ds-breadcrumb": Omit<DsBreadcrumb, keyof DsBreadcrumbAttributes> & { [K in keyof DsBreadcrumb & keyof DsBreadcrumbAttributes]?: DsBreadcrumb[K] } & { [K in keyof DsBreadcrumb & keyof DsBreadcrumbAttributes as `attr:${K}`]?: DsBreadcrumbAttributes[K] } & { [K in keyof DsBreadcrumb & keyof DsBreadcrumbAttributes as `prop:${K}`]?: DsBreadcrumb[K] };
-        "ds-button": Omit<DsButton, keyof DsButtonAttributes> & { [K in keyof DsButton & keyof DsButtonAttributes]?: DsButton[K] } & { [K in keyof DsButton & keyof DsButtonAttributes as `attr:${K}`]?: DsButtonAttributes[K] } & { [K in keyof DsButton & keyof DsButtonAttributes as `prop:${K}`]?: DsButton[K] };
-        "ds-button-group": Omit<DsButtonGroup, keyof DsButtonGroupAttributes> & { [K in keyof DsButtonGroup & keyof DsButtonGroupAttributes]?: DsButtonGroup[K] } & { [K in keyof DsButtonGroup & keyof DsButtonGroupAttributes as `attr:${K}`]?: DsButtonGroupAttributes[K] } & { [K in keyof DsButtonGroup & keyof DsButtonGroupAttributes as `prop:${K}`]?: DsButtonGroup[K] };
+        "ds-button-filled": Omit<DsButtonFilled, keyof DsButtonFilledAttributes> & { [K in keyof DsButtonFilled & keyof DsButtonFilledAttributes]?: DsButtonFilled[K] } & { [K in keyof DsButtonFilled & keyof DsButtonFilledAttributes as `attr:${K}`]?: DsButtonFilledAttributes[K] } & { [K in keyof DsButtonFilled & keyof DsButtonFilledAttributes as `prop:${K}`]?: DsButtonFilled[K] };
         "ds-button-unfilled-icon": Omit<DsButtonUnfilledIcon, keyof DsButtonUnfilledIconAttributes> & { [K in keyof DsButtonUnfilledIcon & keyof DsButtonUnfilledIconAttributes]?: DsButtonUnfilledIcon[K] } & { [K in keyof DsButtonUnfilledIcon & keyof DsButtonUnfilledIconAttributes as `attr:${K}`]?: DsButtonUnfilledIconAttributes[K] } & { [K in keyof DsButtonUnfilledIcon & keyof DsButtonUnfilledIconAttributes as `prop:${K}`]?: DsButtonUnfilledIcon[K] };
         "ds-card": Omit<DsCard, keyof DsCardAttributes> & { [K in keyof DsCard & keyof DsCardAttributes]?: DsCard[K] } & { [K in keyof DsCard & keyof DsCardAttributes as `attr:${K}`]?: DsCardAttributes[K] } & { [K in keyof DsCard & keyof DsCardAttributes as `prop:${K}`]?: DsCard[K] };
+        "ds-card-setting": Omit<DsCardSetting, keyof DsCardSettingAttributes> & { [K in keyof DsCardSetting & keyof DsCardSettingAttributes]?: DsCardSetting[K] } & { [K in keyof DsCardSetting & keyof DsCardSettingAttributes as `attr:${K}`]?: DsCardSettingAttributes[K] } & { [K in keyof DsCardSetting & keyof DsCardSettingAttributes as `prop:${K}`]?: DsCardSetting[K] } & OneOf<"heading", DsCardSetting["heading"], DsCardSettingAttributes["heading"]>;
         "ds-checkbox": Omit<DsCheckbox, keyof DsCheckboxAttributes> & { [K in keyof DsCheckbox & keyof DsCheckboxAttributes]?: DsCheckbox[K] } & { [K in keyof DsCheckbox & keyof DsCheckboxAttributes as `attr:${K}`]?: DsCheckboxAttributes[K] } & { [K in keyof DsCheckbox & keyof DsCheckboxAttributes as `prop:${K}`]?: DsCheckbox[K] } & OneOf<"label", DsCheckbox["label"], DsCheckboxAttributes["label"]>;
         "ds-chip": Omit<DsChip, keyof DsChipAttributes> & { [K in keyof DsChip & keyof DsChipAttributes]?: DsChip[K] } & { [K in keyof DsChip & keyof DsChipAttributes as `attr:${K}`]?: DsChipAttributes[K] } & { [K in keyof DsChip & keyof DsChipAttributes as `prop:${K}`]?: DsChip[K] } & OneOf<"label", DsChip["label"], DsChipAttributes["label"]>;
         "ds-divider": Omit<DsDivider, keyof DsDividerAttributes> & { [K in keyof DsDivider & keyof DsDividerAttributes]?: DsDivider[K] } & { [K in keyof DsDivider & keyof DsDividerAttributes as `attr:${K}`]?: DsDividerAttributes[K] } & { [K in keyof DsDivider & keyof DsDividerAttributes as `prop:${K}`]?: DsDivider[K] };
@@ -3433,8 +3152,6 @@ declare namespace LocalJSX {
         "ds-text": Omit<DsText, keyof DsTextAttributes> & { [K in keyof DsText & keyof DsTextAttributes]?: DsText[K] } & { [K in keyof DsText & keyof DsTextAttributes as `attr:${K}`]?: DsTextAttributes[K] } & { [K in keyof DsText & keyof DsTextAttributes as `prop:${K}`]?: DsText[K] };
         "ds-toast-provider": Omit<DsToastProvider, keyof DsToastProviderAttributes> & { [K in keyof DsToastProvider & keyof DsToastProviderAttributes]?: DsToastProvider[K] } & { [K in keyof DsToastProvider & keyof DsToastProviderAttributes as `attr:${K}`]?: DsToastProviderAttributes[K] } & { [K in keyof DsToastProvider & keyof DsToastProviderAttributes as `prop:${K}`]?: DsToastProvider[K] };
         "ds-toggle": Omit<DsToggle, keyof DsToggleAttributes> & { [K in keyof DsToggle & keyof DsToggleAttributes]?: DsToggle[K] } & { [K in keyof DsToggle & keyof DsToggleAttributes as `attr:${K}`]?: DsToggleAttributes[K] } & { [K in keyof DsToggle & keyof DsToggleAttributes as `prop:${K}`]?: DsToggle[K] };
-        "ds-toggle-button": Omit<DsToggleButton, keyof DsToggleButtonAttributes> & { [K in keyof DsToggleButton & keyof DsToggleButtonAttributes]?: DsToggleButton[K] } & { [K in keyof DsToggleButton & keyof DsToggleButtonAttributes as `attr:${K}`]?: DsToggleButtonAttributes[K] } & { [K in keyof DsToggleButton & keyof DsToggleButtonAttributes as `prop:${K}`]?: DsToggleButton[K] };
-        "ds-toggle-button-group": Omit<DsToggleButtonGroup, keyof DsToggleButtonGroupAttributes> & { [K in keyof DsToggleButtonGroup & keyof DsToggleButtonGroupAttributes]?: DsToggleButtonGroup[K] } & { [K in keyof DsToggleButtonGroup & keyof DsToggleButtonGroupAttributes as `attr:${K}`]?: DsToggleButtonGroupAttributes[K] } & { [K in keyof DsToggleButtonGroup & keyof DsToggleButtonGroupAttributes as `prop:${K}`]?: DsToggleButtonGroup[K] };
         "ds-tooltip": Omit<DsTooltip, keyof DsTooltipAttributes> & { [K in keyof DsTooltip & keyof DsTooltipAttributes]?: DsTooltip[K] } & { [K in keyof DsTooltip & keyof DsTooltipAttributes as `attr:${K}`]?: DsTooltipAttributes[K] } & { [K in keyof DsTooltip & keyof DsTooltipAttributes as `prop:${K}`]?: DsTooltip[K] } & OneOf<"label", DsTooltip["label"], DsTooltipAttributes["label"]>;
     }
 }
@@ -3448,10 +3165,10 @@ declare module "@stencil/core" {
             "ds-banner": LocalJSX.IntrinsicElements["ds-banner"] & JSXBase.HTMLAttributes<HTMLDsBannerElement>;
             "ds-bar-nav": LocalJSX.IntrinsicElements["ds-bar-nav"] & JSXBase.HTMLAttributes<HTMLDsBarNavElement>;
             "ds-breadcrumb": LocalJSX.IntrinsicElements["ds-breadcrumb"] & JSXBase.HTMLAttributes<HTMLDsBreadcrumbElement>;
-            "ds-button": LocalJSX.IntrinsicElements["ds-button"] & JSXBase.HTMLAttributes<HTMLDsButtonElement>;
-            "ds-button-group": LocalJSX.IntrinsicElements["ds-button-group"] & JSXBase.HTMLAttributes<HTMLDsButtonGroupElement>;
+            "ds-button-filled": LocalJSX.IntrinsicElements["ds-button-filled"] & JSXBase.HTMLAttributes<HTMLDsButtonFilledElement>;
             "ds-button-unfilled-icon": LocalJSX.IntrinsicElements["ds-button-unfilled-icon"] & JSXBase.HTMLAttributes<HTMLDsButtonUnfilledIconElement>;
             "ds-card": LocalJSX.IntrinsicElements["ds-card"] & JSXBase.HTMLAttributes<HTMLDsCardElement>;
+            "ds-card-setting": LocalJSX.IntrinsicElements["ds-card-setting"] & JSXBase.HTMLAttributes<HTMLDsCardSettingElement>;
             "ds-checkbox": LocalJSX.IntrinsicElements["ds-checkbox"] & JSXBase.HTMLAttributes<HTMLDsCheckboxElement>;
             "ds-chip": LocalJSX.IntrinsicElements["ds-chip"] & JSXBase.HTMLAttributes<HTMLDsChipElement>;
             "ds-divider": LocalJSX.IntrinsicElements["ds-divider"] & JSXBase.HTMLAttributes<HTMLDsDividerElement>;
@@ -3482,8 +3199,6 @@ declare module "@stencil/core" {
             "ds-text": LocalJSX.IntrinsicElements["ds-text"] & JSXBase.HTMLAttributes<HTMLDsTextElement>;
             "ds-toast-provider": LocalJSX.IntrinsicElements["ds-toast-provider"] & JSXBase.HTMLAttributes<HTMLDsToastProviderElement>;
             "ds-toggle": LocalJSX.IntrinsicElements["ds-toggle"] & JSXBase.HTMLAttributes<HTMLDsToggleElement>;
-            "ds-toggle-button": LocalJSX.IntrinsicElements["ds-toggle-button"] & JSXBase.HTMLAttributes<HTMLDsToggleButtonElement>;
-            "ds-toggle-button-group": LocalJSX.IntrinsicElements["ds-toggle-button-group"] & JSXBase.HTMLAttributes<HTMLDsToggleButtonGroupElement>;
             "ds-tooltip": LocalJSX.IntrinsicElements["ds-tooltip"] & JSXBase.HTMLAttributes<HTMLDsTooltipElement>;
         }
     }