@ds-mo/ui 1.0.2 → 1.1.0

package/src/wc/components.d.ts

@@ -0,0 +1,3028 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { AccordionItemData } from "./components/Accordion/Accordion";
+import { BannerContrast, BannerIntent } from "./components/Banner/Banner";
+import { BarNavActionItem, BarNavBackground, BarNavTab } from "./components/BarNav/BarNav";
+import { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
+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 { CardElevation, CardRadius } from "./components/Card/Card";
+import { DividerOrientation } from "./components/Divider/Divider";
+import { EmptyStateType } from "./components/EmptyState/EmptyState";
+import { FadeSide } from "./components/Fade/Fade";
+import { HeaderBackground } from "./components/Header/Header";
+import { IconColor, IconSize } from "./components/Icon/Icon";
+import { InputType } from "./components/Input/Input";
+import { LabelWrapSize } from "./components/LabelWrap/LabelWrap";
+import { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
+import { ModalWidth } from "./components/Modal/Modal";
+import { PanelNavGroup, PanelNavRouterMode, PanelNavVariant } from "./components/PanelNav/PanelNav";
+import { RadioOption } from "./components/RadioGroup/RadioGroup";
+import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
+import { SelectOption } from "./components/Select/Select";
+import { SidebarWidth } from "./components/Sidebar/Sidebar";
+import { SkeletonVariant } from "./components/Skeleton/Skeleton";
+import { SurfaceBackground, SurfaceContrast, SurfaceElement, SurfaceElevation, SurfaceIntent, SurfaceRadius } from "./components/Surface/Surface";
+import { TabItem } from "./components/TabGroup/tab-item-utils";
+import { TabBackground } from "./components/TabGroup/TabGroup";
+import { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
+import { SortState, TableColumn } from "./components/Table/Table";
+import { TagBackground, TagContrast, TagElevation, TagIntent, TagSize } from "./components/Tag/Tag";
+import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, 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 { BannerContrast, BannerIntent } from "./components/Banner/Banner";
+export { BarNavActionItem, BarNavBackground, BarNavTab } from "./components/BarNav/BarNav";
+export { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
+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 { CardElevation, CardRadius } from "./components/Card/Card";
+export { DividerOrientation } from "./components/Divider/Divider";
+export { EmptyStateType } from "./components/EmptyState/EmptyState";
+export { FadeSide } from "./components/Fade/Fade";
+export { HeaderBackground } from "./components/Header/Header";
+export { IconColor, IconSize } from "./components/Icon/Icon";
+export { InputType } from "./components/Input/Input";
+export { LabelWrapSize } from "./components/LabelWrap/LabelWrap";
+export { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
+export { ModalWidth } from "./components/Modal/Modal";
+export { PanelNavGroup, PanelNavRouterMode, PanelNavVariant } from "./components/PanelNav/PanelNav";
+export { RadioOption } from "./components/RadioGroup/RadioGroup";
+export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
+export { SelectOption } from "./components/Select/Select";
+export { SidebarWidth } from "./components/Sidebar/Sidebar";
+export { SkeletonVariant } from "./components/Skeleton/Skeleton";
+export { SurfaceBackground, SurfaceContrast, SurfaceElement, SurfaceElevation, SurfaceIntent, SurfaceRadius } from "./components/Surface/Surface";
+export { TabItem } from "./components/TabGroup/tab-item-utils";
+export { TabBackground } from "./components/TabGroup/TabGroup";
+export { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
+export { SortState, TableColumn } from "./components/Table/Table";
+export { TagBackground, TagContrast, TagElevation, TagIntent, TagSize } from "./components/Tag/Tag";
+export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, 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 {
+        /**
+          * Comma-separated list of expanded item IDs for controlled mode.
+          * @default ''
+         */
+        "expandedIds": string;
+        /**
+          * @default []
+         */
+        "items": AccordionItemData[];
+        /**
+          * @default false
+         */
+        "multiple": boolean;
+    }
+    interface DsBadge {
+        /**
+          * @default 0
+         */
+        "count": number;
+        /**
+          * @default false
+         */
+        "isSelected": boolean;
+        /**
+          * Accessible label. Defaults to the count as a string.
+         */
+        "label": string | undefined;
+    }
+    interface DsBanner {
+        /**
+          * @default 'medium'
+         */
+        "contrast": BannerContrast;
+        /**
+          * @default 'Dismiss'
+         */
+        "dismissLabel": string;
+        /**
+          * Renders at a fixed position (centered top) and auto-dismisses after 4 s.
+          * @default false
+         */
+        "floating": boolean;
+        /**
+          * Renders the diagonal-stripe accent bar above the body.
+          * @default false
+         */
+        "header": boolean;
+        /**
+          * @default 'neutral'
+         */
+        "intent": BannerIntent;
+        /**
+          * @default ''
+         */
+        "message": string;
+        /**
+          * @default false
+         */
+        "showDismiss": boolean;
+    }
+    interface DsBarNav {
+        /**
+          * Action items rendered in the right section. Set via JS property: `el.actions = [...]`. Replace the array reference to update.
+          * @default []
+         */
+        "actions": BarNavActionItem[];
+        /**
+          * JSON fallback for `actions` — useful when framework bindings don't propagate arrays.
+          * @default ''
+         */
+        "actionsJson": string;
+        /**
+          * Surface background variant.
+          * @default 'secondary'
+         */
+        "background": BarNavBackground;
+        /**
+          * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
+          * @default ''
+         */
+        "basePath": string;
+        /**
+          * Current route URL. When set with `basePath`, the active tab is derived automatically.
+          * @default ''
+         */
+        "currentUrl": string;
+        /**
+          * Fallback heading shown when no tabs are provided. When tabs are present the heading is hidden.
+         */
+        "heading": string | undefined;
+        /**
+          * Tab items for the left section. Set via JS property: `el.tabs = [...]`. Replace the array reference to update.
+          * @default []
+         */
+        "tabs": BarNavTab[];
+        /**
+          * JSON fallback for `tabs` — useful when framework bindings don't propagate arrays.
+          * @default ''
+         */
+        "tabsJson": string;
+        /**
+          * ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set.
+          * @default ''
+         */
+        "value": string;
+    }
+    interface DsBarNavAction {
+        /**
+          * @default 'action'
+         */
+        "ariaLabel": string;
+        /**
+          * Parent surface context — adjusts hover/press colours for coloured backgrounds.
+         */
+        "background": BarNavActionBackground | undefined;
+        /**
+          * Show a notification dot (brand colour) at the top-right of the icon.
+          * @default false
+         */
+        "dot": boolean;
+        /**
+          * Icon name passed to <ds-icon>.
+          * @default ''
+         */
+        "icon": string;
+        /**
+          * Disables interaction.
+          * @default false
+         */
+        "inactive": boolean;
+        /**
+          * Controlled toggle/selected state.
+          * @default false
+         */
+        "selected": boolean;
+    }
+    interface DsBreadcrumb {
+        /**
+          * @default []
+         */
+        "items": BreadcrumbItem[];
+        /**
+          * @default '/'
+         */
+        "separator": string;
+    }
+    interface DsButton {
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+        "background": ButtonBackground | undefined;
+        "badgeCount": number | undefined;
+        /**
+          * @default 'bold'
+         */
+        "contrast": ButtonContrast;
+        /**
+          * @default false
+         */
+        "dropdown": boolean;
+        "elevation": ButtonElevation | undefined;
+        /**
+          * @default false
+         */
+        "fullWidth": boolean;
+        "href": string | undefined;
+        /**
+          * @default false
+         */
+        "inactive": boolean;
+        /**
+          * @default 'brand'
+         */
+        "intent": ButtonIntent;
+        "label": string | undefined;
+        /**
+          * @default false
+         */
+        "loading": boolean;
+        /**
+          * @default false
+         */
+        "rounded": boolean;
+        /**
+          * @default 'md'
+         */
+        "size": ButtonSize;
+        "target": string | undefined;
+        /**
+          * @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 DsCard {
+        /**
+          * @default 'elevated'
+         */
+        "elevation": CardElevation;
+        /**
+          * @default 'lg'
+         */
+        "radius": CardRadius;
+    }
+    interface DsCheckbox {
+        /**
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * @default false
+         */
+        "inactive": boolean;
+        /**
+          * @default false
+         */
+        "indeterminate": boolean;
+        "label": string;
+    }
+    interface DsDivider {
+        /**
+          * Direction of the divider line. Defaults to 'horizontal'.
+          * @default 'horizontal'
+         */
+        "orientation": DividerOrientation;
+    }
+    interface DsEmptyState {
+        "message": string | undefined;
+        /**
+          * @default 'no-content'
+         */
+        "type": EmptyStateType;
+    }
+    interface DsFade {
+        /**
+          * Background color to fade from. Defaults to var(--color-background-secondary).
+          * @default 'var(--color-background-secondary)'
+         */
+        "background": string;
+        /**
+          * Height (or width for left/right) of the fade overlay — any CSS value.
+         */
+        "height": string | undefined;
+        "side": FadeSide;
+    }
+    interface DsField {
+        /**
+          * ID forwarded to the slotted control via the label's `for` attribute. Auto-generated if omitted.
+         */
+        "fieldId": string | undefined;
+        "label": string;
+    }
+    interface DsHeader {
+        /**
+          * @default 'secondary'
+         */
+        "background": HeaderBackground;
+        "heading": string | undefined;
+    }
+    interface DsIcon {
+        /**
+          * Semantic foreground color token, or a raw CSS var reference.
+         */
+        "color": IconColor | undefined;
+        /**
+          * Set `true` to look up from the flag icon set instead of the system icon set.
+          * @default false
+         */
+        "flag": boolean;
+        /**
+          * Accessible label. Sets `role="img"` and `aria-label`. Omit for decorative icons.
+         */
+        "label": string | undefined;
+        /**
+          * Name of the system icon (e.g. `"Gear"`, `"ArrowRight"`) or flag (e.g. `"US"`)
+          * @default ''
+         */
+        "name": string;
+        /**
+          * Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px.
+          * @default 'md'
+         */
+        "size": IconSize;
+    }
+    interface DsInput {
+        "ariaDescribedby": string | undefined;
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+        /**
+          * @default false
+         */
+        "autoFocus": boolean;
+        /**
+          * @default false
+         */
+        "error": boolean;
+        "errorMessage": string | undefined;
+        /**
+          * @default false
+         */
+        "inactive": boolean;
+        /**
+          * Associates the internal input with an external <label>.
+         */
+        "inputId": string | undefined;
+        "placeholder": string | undefined;
+        "setFocus": () => Promise<void>;
+        /**
+          * @default 'text'
+         */
+        "type": InputType;
+        /**
+          * @default ''
+         */
+        "value": string;
+    }
+    /**
+     * Internal utility wrapper that kills line-height struts and adds optical
+     * horizontal padding. Used inside interactive components (Button, Tag, etc.)
+     * Not intended as a standalone consumer-facing component — internal use only.
+     */
+    interface DsLabelWrap {
+        /**
+          * Typography size — controls optical horizontal padding.
+          * @default 'md'
+         */
+        "size": LabelWrapSize;
+        /**
+          * Enable truncation with ellipsis — use inside full-width containers.
+          * @default false
+         */
+        "truncate": boolean;
+    }
+    interface DsLoader {
+        /**
+          * Accessible label for standalone usage. Wraps the spinner in a live region and renders the label visually-hidden. Omit when the host element already conveys busy state via aria-busy.
+         */
+        "label": string | undefined;
+        /**
+          * Render size in px. Designed on a 16×16 viewBox; stroke scales proportionally.
+          * @default 20
+         */
+        "size": number;
+    }
+    interface DsMenu {
+        /**
+          * @default 'start'
+         */
+        "align": MenuAlign;
+        /**
+          * @default 0
+         */
+        "alignOffset": number;
+        /**
+          * External trigger element to position against. Set via JS: menuEl.anchor = buttonEl
+         */
+        "anchor": HTMLElement | undefined;
+        /**
+          * ID of the external trigger element for positioning
+         */
+        "anchorId": string | undefined;
+        /**
+          * @default []
+         */
+        "items": MenuItemData[];
+        "menuWidth": string | undefined;
+        "minWidth": string | undefined;
+        /**
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * @default []
+         */
+        "sections": MenuSection[];
+        /**
+          * @default 'bottom'
+         */
+        "side": MenuSide;
+        /**
+          * @default 4
+         */
+        "sideOffset": number;
+    }
+    interface DsModal {
+        "heading": string;
+        /**
+          * @default 'md'
+         */
+        "modalWidth": ModalWidth | string;
+        /**
+          * @default false
+         */
+        "open": boolean;
+        "subtitle": string | undefined;
+    }
+    interface DsPagination {
+        /**
+          * @default false
+         */
+        "inactive": boolean;
+        /**
+          * @default 1
+         */
+        "page": number;
+        /**
+          * @default 1
+         */
+        "siblingCount": number;
+        /**
+          * @default 1
+         */
+        "totalPages": number;
+    }
+    interface DsPanelNav {
+        /**
+          * ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set.
+          * @default ''
+         */
+        "activeId": string;
+        /**
+          * Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled.
+          * @default 0
+         */
+        "breakpoint": number;
+        /**
+          * Whether the nav is in collapsed (icon-only) state. When `storageKey` is set the component manages this internally — do not also bind it from outside in that mode.
+          * @default false
+         */
+        "collapsed": boolean;
+        /**
+          * Current route URL (e.g. `window.location.pathname` or the router's active URL). When set the component derives the active item by matching item `href` values against this string (longest segment-boundary prefix wins), overriding `activeId`.
+          * @default ''
+         */
+        "currentUrl": string;
+        /**
+          * When `true`, the component does not run its own View Transition on variant change — it just updates the rendered surface synchronously. Use this when the host app orchestrates the page transition itself (e.g. Angular Router's `withViewTransitions`), so the two don't fight or nest.
+          * @default false
+         */
+        "disableViewTransition": boolean;
+        /**
+          * Nav groups — set via JS property (`el.groups = [...]`) or JSON string attribute.
+          * @default '[]'
+         */
+        "groups": string | PanelNavGroup[];
+        /**
+          * How items with `href` render: - `anchor` (default): native `<a href>` — works with routers that intercept anchors. - `event`: always `<button>`; host handles navigation via `dsNavSelect`.
+          * @default 'anchor'
+         */
+        "routerMode": PanelNavRouterMode;
+        /**
+          * `localStorage` key used to persist the collapsed state across page loads. When set the component is self-managing for collapsed state; `dsNavToggle` still fires for consumers that want to observe the change.
+          * @default ''
+         */
+        "storageKey": string;
+        /**
+          * Single character shown in the collapsed avatar
+          * @default ''
+         */
+        "userInitial": string;
+        /**
+          * Display name for the footer user section
+          * @default ''
+         */
+        "userName": string;
+        /**
+          * Visual variant: `dashboard` = always-dark surface, `settings` = light surface
+          * @default 'dashboard'
+         */
+        "variant": PanelNavVariant;
+    }
+    interface DsRadioGroup {
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+        /**
+          * @default 'vertical'
+         */
+        "direction": 'vertical' | 'horizontal';
+        /**
+          * @default false
+         */
+        "inactive": boolean;
+        /**
+          * @default []
+         */
+        "options": RadioOption[];
+        /**
+          * @default ''
+         */
+        "value": string;
+    }
+    interface DsScrollbar {
+        /**
+          * @default true
+         */
+        "showTrackOnHover": boolean;
+        /**
+          * @default 'default'
+         */
+        "variant": ScrollbarVariant;
+    }
+    interface DsSelect {
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+        /**
+          * Disables interaction.
+          * @default false
+         */
+        "inactive": boolean;
+        /**
+          * Array of options. Set via JS property.
+          * @example el.options = [{ label: 'Apple', value: 'apple' }];
+          * @default []
+         */
+        "options": SelectOption[];
+        /**
+          * Placeholder shown when no value is selected.
+          * @default 'Select option'
+         */
+        "placeholder": string;
+        /**
+          * Currently selected value.
+          * @default ''
+         */
+        "value": string;
+    }
+    interface DsSidebar {
+        /**
+          * @default false
+         */
+        "collapsed": boolean;
+        /**
+          * @default false
+         */
+        "mobile": boolean;
+        /**
+          * @default true
+         */
+        "resizable": boolean;
+        /**
+          * @default 'default'
+         */
+        "width": SidebarWidth;
+    }
+    interface DsSkeleton {
+        /**
+          * Height as a CSS value string or number (px).
+         */
+        "height": string | number | undefined;
+        /**
+          * Number of text lines. Only used when variant is 'text'.
+          * @default 1
+         */
+        "lines": number;
+        /**
+          * Whether to show the shimmer animation.
+          * @default true
+         */
+        "shimmer": boolean;
+        /**
+          * @default 'text'
+         */
+        "variant": SkeletonVariant;
+        /**
+          * Width as a CSS value string (e.g. '200px', '100%') or number (px).
+         */
+        "width": string | number | undefined;
+    }
+    interface DsSlider {
+        /**
+          * @default false
+         */
+        "inactive": boolean;
+        /**
+          * Associates with an external <label>. Defaults to an auto-generated ID.
+         */
+        "inputId": string | undefined;
+        "label": string;
+        /**
+          * @default 100
+         */
+        "max": number;
+        /**
+          * @default 0
+         */
+        "min": number;
+        /**
+          * @default 1
+         */
+        "step": number;
+        /**
+          * @default 0
+         */
+        "value": number;
+        "valueText": string | undefined;
+    }
+    interface DsSurface {
+        /**
+          * @default 'div'
+         */
+        "as": SurfaceElement;
+        /**
+          * @default 'transparent'
+         */
+        "background": SurfaceBackground;
+        /**
+          * @default 'faint'
+         */
+        "contrast": SurfaceContrast;
+        /**
+          * Space-separated list of edges: "top bottom" etc. Only applies when elevation='none'.
+         */
+        "edge": string | undefined;
+        /**
+          * @default 'none'
+         */
+        "elevation": SurfaceElevation;
+        /**
+          * @default false
+         */
+        "inactive": boolean;
+        "intent": SurfaceIntent | undefined;
+        /**
+          * @default false
+         */
+        "interactive": boolean;
+        "radius": SurfaceRadius | undefined;
+        /**
+          * @default false
+         */
+        "selected": boolean;
+    }
+    interface DsTabGroup {
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+        "background": TabBackground | undefined;
+        /**
+          * @default 'horizontal'
+         */
+        "orientation": 'horizontal' | 'vertical';
+        /**
+          * @default []
+         */
+        "tabs": TabItem[];
+        /**
+          * @default ''
+         */
+        "value": string;
+    }
+    interface DsTabGroupNav {
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+        "background": TabGroupNavBackground | undefined;
+        /**
+          * @default 'horizontal'
+         */
+        "orientation": 'horizontal' | 'vertical';
+        /**
+          * @default []
+         */
+        "tabs": TabItem[];
+        /**
+          * @default ''
+         */
+        "value": string;
+    }
+    interface DsTable {
+        /**
+          * @default []
+         */
+        "columns": TableColumn[];
+        /**
+          * @default []
+         */
+        "data": unknown[];
+        /**
+          * @default 'No results found.'
+         */
+        "emptyMessage": string;
+        /**
+          * @default false
+         */
+        "loading": boolean;
+        /**
+          * Page index (0-based). Enables built-in pagination when set alongside pageSize.
+         */
+        "pageIndex": number | undefined;
+        /**
+          * @default 20
+         */
+        "pageSize": number;
+        /**
+          * Comma-separated zero-based row indices that are selected.
+          * @default ''
+         */
+        "selectedRows": string;
+        "sortState": SortState | undefined;
+    }
+    interface DsTag {
+        "background": TagBackground | undefined;
+        /**
+          * @default 'faint'
+         */
+        "contrast": TagContrast;
+        /**
+          * @default 'none'
+         */
+        "elevation": TagElevation;
+        /**
+          * @default false
+         */
+        "inactive": boolean;
+        /**
+          * @default 'neutral'
+         */
+        "intent": TagIntent;
+        /**
+          * Whether the tag has a click/toggle behavior.
+          * @default false
+         */
+        "interactive": boolean;
+        "label": string;
+        "maxWidth": string | number | undefined;
+        /**
+          * @default false
+         */
+        "pressed": boolean;
+        /**
+          * @default false
+         */
+        "removable": boolean;
+        /**
+          * @default false
+         */
+        "rounded": boolean;
+        /**
+          * @default 'md'
+         */
+        "size": TagSize;
+    }
+    interface DsText {
+        "align": TextAlign | undefined;
+        /**
+          * @default 'p'
+         */
+        "as": TextElement;
+        "color": TextColor | undefined;
+        "decoration": TextDecoration | undefined;
+        /**
+          * Maps to `for` attribute on <label> elements.
+         */
+        "for": string | undefined;
+        /**
+          * @default false
+         */
+        "italic": boolean;
+        /**
+          * @default 'none'
+         */
+        "lineTruncation": LineTruncation;
+        /**
+          * @default 'text-body-medium'
+         */
+        "variant": TextVariant;
+        "wrap": TextWrap | undefined;
+    }
+    interface DsToastProvider {
+        /**
+          * @default 'top-center'
+         */
+        "position": ToastPosition;
+    }
+    interface DsToggle {
+        /**
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * @default false
+         */
+        "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'
+         */
+        "align": TooltipAlign;
+        /**
+          * @default 0
+         */
+        "alignOffset": number;
+        /**
+          * @default HOVER_DELAY_MS
+         */
+        "delay": number;
+        "label": string;
+        "shortcutKey": string | undefined;
+        /**
+          * @default 'end'
+         */
+        "shortcutKeyPosition": 'start' | 'end';
+        /**
+          * @default 'top'
+         */
+        "side": TooltipSide;
+        /**
+          * @default 4
+         */
+        "sideOffset": number;
+    }
+}
+export interface DsAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsAccordionElement;
+}
+export interface DsBannerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsBannerElement;
+}
+export interface DsBarNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsBarNavElement;
+}
+export interface DsBarNavActionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsBarNavActionElement;
+}
+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> {
+    detail: T;
+    target: HTMLDsButtonGroupElement;
+}
+export interface DsCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsCheckboxElement;
+}
+export interface DsInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsInputElement;
+}
+export interface DsMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsMenuElement;
+}
+export interface DsModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsModalElement;
+}
+export interface DsPaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsPaginationElement;
+}
+export interface DsPanelNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsPanelNavElement;
+}
+export interface DsRadioGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsRadioGroupElement;
+}
+export interface DsSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsSelectElement;
+}
+export interface DsSidebarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsSidebarElement;
+}
+export interface DsSliderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsSliderElement;
+}
+export interface DsTabGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTabGroupElement;
+}
+export interface DsTabGroupNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTabGroupNavElement;
+}
+export interface DsTableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTableElement;
+}
+export interface DsTagCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTagElement;
+}
+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[];
+    }
+    interface HTMLDsAccordionElement extends Components.DsAccordion, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsAccordionElementEventMap>(type: K, listener: (this: HTMLDsAccordionElement, ev: DsAccordionCustomEvent<HTMLDsAccordionElementEventMap[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 HTMLDsAccordionElementEventMap>(type: K, listener: (this: HTMLDsAccordionElement, ev: DsAccordionCustomEvent<HTMLDsAccordionElementEventMap[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 HTMLDsAccordionElement: {
+        prototype: HTMLDsAccordionElement;
+        new (): HTMLDsAccordionElement;
+    };
+    interface HTMLDsBadgeElement extends Components.DsBadge, HTMLStencilElement {
+    }
+    var HTMLDsBadgeElement: {
+        prototype: HTMLDsBadgeElement;
+        new (): HTMLDsBadgeElement;
+    };
+    interface HTMLDsBannerElementEventMap {
+        "dsDismiss": void;
+    }
+    interface HTMLDsBannerElement extends Components.DsBanner, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsBannerElementEventMap>(type: K, listener: (this: HTMLDsBannerElement, ev: DsBannerCustomEvent<HTMLDsBannerElementEventMap[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 HTMLDsBannerElementEventMap>(type: K, listener: (this: HTMLDsBannerElement, ev: DsBannerCustomEvent<HTMLDsBannerElementEventMap[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 HTMLDsBannerElement: {
+        prototype: HTMLDsBannerElement;
+        new (): HTMLDsBannerElement;
+    };
+    interface HTMLDsBarNavElementEventMap {
+        "dsTabChange": string;
+        "dsActionChange": { id: string; selected: boolean };
+    }
+    interface HTMLDsBarNavElement extends Components.DsBarNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsBarNavElementEventMap>(type: K, listener: (this: HTMLDsBarNavElement, ev: DsBarNavCustomEvent<HTMLDsBarNavElementEventMap[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 HTMLDsBarNavElementEventMap>(type: K, listener: (this: HTMLDsBarNavElement, ev: DsBarNavCustomEvent<HTMLDsBarNavElementEventMap[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 HTMLDsBarNavElement: {
+        prototype: HTMLDsBarNavElement;
+        new (): HTMLDsBarNavElement;
+    };
+    interface HTMLDsBarNavActionElementEventMap {
+        "dsChange": boolean;
+    }
+    interface HTMLDsBarNavActionElement extends Components.DsBarNavAction, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsBarNavActionElementEventMap>(type: K, listener: (this: HTMLDsBarNavActionElement, ev: DsBarNavActionCustomEvent<HTMLDsBarNavActionElementEventMap[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 HTMLDsBarNavActionElementEventMap>(type: K, listener: (this: HTMLDsBarNavActionElement, ev: DsBarNavActionCustomEvent<HTMLDsBarNavActionElementEventMap[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 HTMLDsBarNavActionElement: {
+        prototype: HTMLDsBarNavActionElement;
+        new (): HTMLDsBarNavActionElement;
+    };
+    interface HTMLDsBreadcrumbElementEventMap {
+        "dsNavigate": { item: BreadcrumbItem; index: number };
+    }
+    interface HTMLDsBreadcrumbElement extends Components.DsBreadcrumb, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsBreadcrumbElementEventMap>(type: K, listener: (this: HTMLDsBreadcrumbElement, ev: DsBreadcrumbCustomEvent<HTMLDsBreadcrumbElementEventMap[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 HTMLDsBreadcrumbElementEventMap>(type: K, listener: (this: HTMLDsBreadcrumbElement, ev: DsBreadcrumbCustomEvent<HTMLDsBreadcrumbElementEventMap[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 HTMLDsBreadcrumbElement: {
+        prototype: HTMLDsBreadcrumbElement;
+        new (): HTMLDsBreadcrumbElement;
+    };
+    interface HTMLDsButtonElementEventMap {
+        "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;
+        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 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;
+    };
+    interface HTMLDsCardElement extends Components.DsCard, HTMLStencilElement {
+    }
+    var HTMLDsCardElement: {
+        prototype: HTMLDsCardElement;
+        new (): HTMLDsCardElement;
+    };
+    interface HTMLDsCheckboxElementEventMap {
+        "dsChange": boolean;
+    }
+    interface HTMLDsCheckboxElement extends Components.DsCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsCheckboxElementEventMap>(type: K, listener: (this: HTMLDsCheckboxElement, ev: DsCheckboxCustomEvent<HTMLDsCheckboxElementEventMap[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 HTMLDsCheckboxElementEventMap>(type: K, listener: (this: HTMLDsCheckboxElement, ev: DsCheckboxCustomEvent<HTMLDsCheckboxElementEventMap[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 HTMLDsCheckboxElement: {
+        prototype: HTMLDsCheckboxElement;
+        new (): HTMLDsCheckboxElement;
+    };
+    interface HTMLDsDividerElement extends Components.DsDivider, HTMLStencilElement {
+    }
+    var HTMLDsDividerElement: {
+        prototype: HTMLDsDividerElement;
+        new (): HTMLDsDividerElement;
+    };
+    interface HTMLDsEmptyStateElement extends Components.DsEmptyState, HTMLStencilElement {
+    }
+    var HTMLDsEmptyStateElement: {
+        prototype: HTMLDsEmptyStateElement;
+        new (): HTMLDsEmptyStateElement;
+    };
+    interface HTMLDsFadeElement extends Components.DsFade, HTMLStencilElement {
+    }
+    var HTMLDsFadeElement: {
+        prototype: HTMLDsFadeElement;
+        new (): HTMLDsFadeElement;
+    };
+    interface HTMLDsFieldElement extends Components.DsField, HTMLStencilElement {
+    }
+    var HTMLDsFieldElement: {
+        prototype: HTMLDsFieldElement;
+        new (): HTMLDsFieldElement;
+    };
+    interface HTMLDsHeaderElement extends Components.DsHeader, HTMLStencilElement {
+    }
+    var HTMLDsHeaderElement: {
+        prototype: HTMLDsHeaderElement;
+        new (): HTMLDsHeaderElement;
+    };
+    interface HTMLDsIconElement extends Components.DsIcon, HTMLStencilElement {
+    }
+    var HTMLDsIconElement: {
+        prototype: HTMLDsIconElement;
+        new (): HTMLDsIconElement;
+    };
+    interface HTMLDsInputElementEventMap {
+        "dsChange": string;
+        "dsClear": void;
+    }
+    interface HTMLDsInputElement extends Components.DsInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsInputElementEventMap>(type: K, listener: (this: HTMLDsInputElement, ev: DsInputCustomEvent<HTMLDsInputElementEventMap[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 HTMLDsInputElementEventMap>(type: K, listener: (this: HTMLDsInputElement, ev: DsInputCustomEvent<HTMLDsInputElementEventMap[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 HTMLDsInputElement: {
+        prototype: HTMLDsInputElement;
+        new (): HTMLDsInputElement;
+    };
+    /**
+     * Internal utility wrapper that kills line-height struts and adds optical
+     * horizontal padding. Used inside interactive components (Button, Tag, etc.)
+     * Not intended as a standalone consumer-facing component — internal use only.
+     */
+    interface HTMLDsLabelWrapElement extends Components.DsLabelWrap, HTMLStencilElement {
+    }
+    var HTMLDsLabelWrapElement: {
+        prototype: HTMLDsLabelWrapElement;
+        new (): HTMLDsLabelWrapElement;
+    };
+    interface HTMLDsLoaderElement extends Components.DsLoader, HTMLStencilElement {
+    }
+    var HTMLDsLoaderElement: {
+        prototype: HTMLDsLoaderElement;
+        new (): HTMLDsLoaderElement;
+    };
+    interface HTMLDsMenuElementEventMap {
+        "dsClose": void;
+        "dsSelect": MenuItemData;
+    }
+    interface HTMLDsMenuElement extends Components.DsMenu, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsMenuElementEventMap>(type: K, listener: (this: HTMLDsMenuElement, ev: DsMenuCustomEvent<HTMLDsMenuElementEventMap[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 HTMLDsMenuElementEventMap>(type: K, listener: (this: HTMLDsMenuElement, ev: DsMenuCustomEvent<HTMLDsMenuElementEventMap[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 HTMLDsMenuElement: {
+        prototype: HTMLDsMenuElement;
+        new (): HTMLDsMenuElement;
+    };
+    interface HTMLDsModalElementEventMap {
+        "dsClose": void;
+    }
+    interface HTMLDsModalElement extends Components.DsModal, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsModalElementEventMap>(type: K, listener: (this: HTMLDsModalElement, ev: DsModalCustomEvent<HTMLDsModalElementEventMap[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 HTMLDsModalElementEventMap>(type: K, listener: (this: HTMLDsModalElement, ev: DsModalCustomEvent<HTMLDsModalElementEventMap[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 HTMLDsModalElement: {
+        prototype: HTMLDsModalElement;
+        new (): HTMLDsModalElement;
+    };
+    interface HTMLDsPaginationElementEventMap {
+        "dsPageChange": number;
+    }
+    interface HTMLDsPaginationElement extends Components.DsPagination, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsPaginationElementEventMap>(type: K, listener: (this: HTMLDsPaginationElement, ev: DsPaginationCustomEvent<HTMLDsPaginationElementEventMap[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 HTMLDsPaginationElementEventMap>(type: K, listener: (this: HTMLDsPaginationElement, ev: DsPaginationCustomEvent<HTMLDsPaginationElementEventMap[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 HTMLDsPaginationElement: {
+        prototype: HTMLDsPaginationElement;
+        new (): HTMLDsPaginationElement;
+    };
+    interface HTMLDsPanelNavElementEventMap {
+        "dsNavSelect": string;
+        "dsNavToggle": boolean;
+        "dsNavFooterAction": void;
+        "dsNavUserAction": void;
+    }
+    interface HTMLDsPanelNavElement extends Components.DsPanelNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsPanelNavElementEventMap>(type: K, listener: (this: HTMLDsPanelNavElement, ev: DsPanelNavCustomEvent<HTMLDsPanelNavElementEventMap[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 HTMLDsPanelNavElementEventMap>(type: K, listener: (this: HTMLDsPanelNavElement, ev: DsPanelNavCustomEvent<HTMLDsPanelNavElementEventMap[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 HTMLDsPanelNavElement: {
+        prototype: HTMLDsPanelNavElement;
+        new (): HTMLDsPanelNavElement;
+    };
+    interface HTMLDsRadioGroupElementEventMap {
+        "dsChange": string;
+    }
+    interface HTMLDsRadioGroupElement extends Components.DsRadioGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsRadioGroupElementEventMap>(type: K, listener: (this: HTMLDsRadioGroupElement, ev: DsRadioGroupCustomEvent<HTMLDsRadioGroupElementEventMap[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 HTMLDsRadioGroupElementEventMap>(type: K, listener: (this: HTMLDsRadioGroupElement, ev: DsRadioGroupCustomEvent<HTMLDsRadioGroupElementEventMap[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 HTMLDsRadioGroupElement: {
+        prototype: HTMLDsRadioGroupElement;
+        new (): HTMLDsRadioGroupElement;
+    };
+    interface HTMLDsScrollbarElement extends Components.DsScrollbar, HTMLStencilElement {
+    }
+    var HTMLDsScrollbarElement: {
+        prototype: HTMLDsScrollbarElement;
+        new (): HTMLDsScrollbarElement;
+    };
+    interface HTMLDsSelectElementEventMap {
+        "dsChange": string;
+    }
+    interface HTMLDsSelectElement extends Components.DsSelect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsSelectElementEventMap>(type: K, listener: (this: HTMLDsSelectElement, ev: DsSelectCustomEvent<HTMLDsSelectElementEventMap[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 HTMLDsSelectElementEventMap>(type: K, listener: (this: HTMLDsSelectElement, ev: DsSelectCustomEvent<HTMLDsSelectElementEventMap[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 HTMLDsSelectElement: {
+        prototype: HTMLDsSelectElement;
+        new (): HTMLDsSelectElement;
+    };
+    interface HTMLDsSidebarElementEventMap {
+        "dsToggle": void;
+        "dsWidthChange": SidebarWidth;
+    }
+    interface HTMLDsSidebarElement extends Components.DsSidebar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsSidebarElementEventMap>(type: K, listener: (this: HTMLDsSidebarElement, ev: DsSidebarCustomEvent<HTMLDsSidebarElementEventMap[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 HTMLDsSidebarElementEventMap>(type: K, listener: (this: HTMLDsSidebarElement, ev: DsSidebarCustomEvent<HTMLDsSidebarElementEventMap[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 HTMLDsSidebarElement: {
+        prototype: HTMLDsSidebarElement;
+        new (): HTMLDsSidebarElement;
+    };
+    interface HTMLDsSkeletonElement extends Components.DsSkeleton, HTMLStencilElement {
+    }
+    var HTMLDsSkeletonElement: {
+        prototype: HTMLDsSkeletonElement;
+        new (): HTMLDsSkeletonElement;
+    };
+    interface HTMLDsSliderElementEventMap {
+        "dsChange": number;
+    }
+    interface HTMLDsSliderElement extends Components.DsSlider, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsSliderElementEventMap>(type: K, listener: (this: HTMLDsSliderElement, ev: DsSliderCustomEvent<HTMLDsSliderElementEventMap[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 HTMLDsSliderElementEventMap>(type: K, listener: (this: HTMLDsSliderElement, ev: DsSliderCustomEvent<HTMLDsSliderElementEventMap[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 HTMLDsSliderElement: {
+        prototype: HTMLDsSliderElement;
+        new (): HTMLDsSliderElement;
+    };
+    interface HTMLDsSurfaceElement extends Components.DsSurface, HTMLStencilElement {
+    }
+    var HTMLDsSurfaceElement: {
+        prototype: HTMLDsSurfaceElement;
+        new (): HTMLDsSurfaceElement;
+    };
+    interface HTMLDsTabGroupElementEventMap {
+        "dsChange": string;
+    }
+    interface HTMLDsTabGroupElement extends Components.DsTabGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTabGroupElementEventMap>(type: K, listener: (this: HTMLDsTabGroupElement, ev: DsTabGroupCustomEvent<HTMLDsTabGroupElementEventMap[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 HTMLDsTabGroupElementEventMap>(type: K, listener: (this: HTMLDsTabGroupElement, ev: DsTabGroupCustomEvent<HTMLDsTabGroupElementEventMap[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 HTMLDsTabGroupElement: {
+        prototype: HTMLDsTabGroupElement;
+        new (): HTMLDsTabGroupElement;
+    };
+    interface HTMLDsTabGroupNavElementEventMap {
+        "dsChange": string;
+    }
+    interface HTMLDsTabGroupNavElement extends Components.DsTabGroupNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTabGroupNavElementEventMap>(type: K, listener: (this: HTMLDsTabGroupNavElement, ev: DsTabGroupNavCustomEvent<HTMLDsTabGroupNavElementEventMap[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 HTMLDsTabGroupNavElementEventMap>(type: K, listener: (this: HTMLDsTabGroupNavElement, ev: DsTabGroupNavCustomEvent<HTMLDsTabGroupNavElementEventMap[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 HTMLDsTabGroupNavElement: {
+        prototype: HTMLDsTabGroupNavElement;
+        new (): HTMLDsTabGroupNavElement;
+    };
+    interface HTMLDsTableElementEventMap {
+        "dsSort": { columnId: string };
+        "dsRowClick": { row: unknown; rowIndex: number };
+        "dsPageChange": { pageIndex: number };
+    }
+    interface HTMLDsTableElement extends Components.DsTable, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTableElementEventMap>(type: K, listener: (this: HTMLDsTableElement, ev: DsTableCustomEvent<HTMLDsTableElementEventMap[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 HTMLDsTableElementEventMap>(type: K, listener: (this: HTMLDsTableElement, ev: DsTableCustomEvent<HTMLDsTableElementEventMap[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 HTMLDsTableElement: {
+        prototype: HTMLDsTableElement;
+        new (): HTMLDsTableElement;
+    };
+    interface HTMLDsTagElementEventMap {
+        "dsRemove": void;
+        "dsClick": void;
+        "dsPressedChange": boolean;
+    }
+    interface HTMLDsTagElement extends Components.DsTag, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTagElementEventMap>(type: K, listener: (this: HTMLDsTagElement, ev: DsTagCustomEvent<HTMLDsTagElementEventMap[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 HTMLDsTagElementEventMap>(type: K, listener: (this: HTMLDsTagElement, ev: DsTagCustomEvent<HTMLDsTagElementEventMap[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 HTMLDsTagElement: {
+        prototype: HTMLDsTagElement;
+        new (): HTMLDsTagElement;
+    };
+    interface HTMLDsTextElement extends Components.DsText, HTMLStencilElement {
+    }
+    var HTMLDsTextElement: {
+        prototype: HTMLDsTextElement;
+        new (): HTMLDsTextElement;
+    };
+    interface HTMLDsToastProviderElement extends Components.DsToastProvider, HTMLStencilElement {
+    }
+    var HTMLDsToastProviderElement: {
+        prototype: HTMLDsToastProviderElement;
+        new (): HTMLDsToastProviderElement;
+    };
+    interface HTMLDsToggleElementEventMap {
+        "dsChange": boolean;
+    }
+    interface HTMLDsToggleElement extends Components.DsToggle, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsToggleElementEventMap>(type: K, listener: (this: HTMLDsToggleElement, ev: DsToggleCustomEvent<HTMLDsToggleElementEventMap[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 HTMLDsToggleElementEventMap>(type: K, listener: (this: HTMLDsToggleElement, ev: DsToggleCustomEvent<HTMLDsToggleElementEventMap[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 HTMLDsToggleElement: {
+        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: {
+        prototype: HTMLDsTooltipElement;
+        new (): HTMLDsTooltipElement;
+    };
+    interface HTMLElementTagNameMap {
+        "ds-accordion": HTMLDsAccordionElement;
+        "ds-badge": HTMLDsBadgeElement;
+        "ds-banner": HTMLDsBannerElement;
+        "ds-bar-nav": HTMLDsBarNavElement;
+        "ds-bar-nav-action": HTMLDsBarNavActionElement;
+        "ds-breadcrumb": HTMLDsBreadcrumbElement;
+        "ds-button": HTMLDsButtonElement;
+        "ds-button-group": HTMLDsButtonGroupElement;
+        "ds-card": HTMLDsCardElement;
+        "ds-checkbox": HTMLDsCheckboxElement;
+        "ds-divider": HTMLDsDividerElement;
+        "ds-empty-state": HTMLDsEmptyStateElement;
+        "ds-fade": HTMLDsFadeElement;
+        "ds-field": HTMLDsFieldElement;
+        "ds-header": HTMLDsHeaderElement;
+        "ds-icon": HTMLDsIconElement;
+        "ds-input": HTMLDsInputElement;
+        "ds-label-wrap": HTMLDsLabelWrapElement;
+        "ds-loader": HTMLDsLoaderElement;
+        "ds-menu": HTMLDsMenuElement;
+        "ds-modal": HTMLDsModalElement;
+        "ds-pagination": HTMLDsPaginationElement;
+        "ds-panel-nav": HTMLDsPanelNavElement;
+        "ds-radio-group": HTMLDsRadioGroupElement;
+        "ds-scrollbar": HTMLDsScrollbarElement;
+        "ds-select": HTMLDsSelectElement;
+        "ds-sidebar": HTMLDsSidebarElement;
+        "ds-skeleton": HTMLDsSkeletonElement;
+        "ds-slider": HTMLDsSliderElement;
+        "ds-surface": HTMLDsSurfaceElement;
+        "ds-tab-group": HTMLDsTabGroupElement;
+        "ds-tab-group-nav": HTMLDsTabGroupNavElement;
+        "ds-table": HTMLDsTableElement;
+        "ds-tag": HTMLDsTagElement;
+        "ds-text": HTMLDsTextElement;
+        "ds-toast-provider": HTMLDsToastProviderElement;
+        "ds-toggle": HTMLDsToggleElement;
+        "ds-toggle-button": HTMLDsToggleButtonElement;
+        "ds-toggle-button-group": HTMLDsToggleButtonGroupElement;
+        "ds-tooltip": HTMLDsTooltipElement;
+    }
+}
+declare namespace LocalJSX {
+    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
+
+    interface DsAccordion {
+        /**
+          * Comma-separated list of expanded item IDs for controlled mode.
+          * @default ''
+         */
+        "expandedIds"?: string;
+        /**
+          * @default []
+         */
+        "items"?: AccordionItemData[];
+        /**
+          * @default false
+         */
+        "multiple"?: boolean;
+        "onDsExpandedChange"?: (event: DsAccordionCustomEvent<string[]>) => void;
+    }
+    interface DsBadge {
+        /**
+          * @default 0
+         */
+        "count"?: number;
+        /**
+          * @default false
+         */
+        "isSelected"?: boolean;
+        /**
+          * Accessible label. Defaults to the count as a string.
+         */
+        "label"?: string | undefined;
+    }
+    interface DsBanner {
+        /**
+          * @default 'medium'
+         */
+        "contrast"?: BannerContrast;
+        /**
+          * @default 'Dismiss'
+         */
+        "dismissLabel"?: string;
+        /**
+          * Renders at a fixed position (centered top) and auto-dismisses after 4 s.
+          * @default false
+         */
+        "floating"?: boolean;
+        /**
+          * Renders the diagonal-stripe accent bar above the body.
+          * @default false
+         */
+        "header"?: boolean;
+        /**
+          * @default 'neutral'
+         */
+        "intent"?: BannerIntent;
+        /**
+          * @default ''
+         */
+        "message"?: string;
+        "onDsDismiss"?: (event: DsBannerCustomEvent<void>) => void;
+        /**
+          * @default false
+         */
+        "showDismiss"?: boolean;
+    }
+    interface DsBarNav {
+        /**
+          * Action items rendered in the right section. Set via JS property: `el.actions = [...]`. Replace the array reference to update.
+          * @default []
+         */
+        "actions"?: BarNavActionItem[];
+        /**
+          * JSON fallback for `actions` — useful when framework bindings don't propagate arrays.
+          * @default ''
+         */
+        "actionsJson"?: string;
+        /**
+          * Surface background variant.
+          * @default 'secondary'
+         */
+        "background"?: BarNavBackground;
+        /**
+          * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
+          * @default ''
+         */
+        "basePath"?: string;
+        /**
+          * Current route URL. When set with `basePath`, the active tab is derived automatically.
+          * @default ''
+         */
+        "currentUrl"?: string;
+        /**
+          * Fallback heading shown when no tabs are provided. When tabs are present the heading is hidden.
+         */
+        "heading"?: string | undefined;
+        /**
+          * Emitted when an action button is toggled. Detail = { id, selected }.
+         */
+        "onDsActionChange"?: (event: DsBarNavCustomEvent<{ id: string; selected: boolean }>) => void;
+        /**
+          * Emitted when the active tab changes. Detail = tab id.
+         */
+        "onDsTabChange"?: (event: DsBarNavCustomEvent<string>) => void;
+        /**
+          * Tab items for the left section. Set via JS property: `el.tabs = [...]`. Replace the array reference to update.
+          * @default []
+         */
+        "tabs"?: BarNavTab[];
+        /**
+          * JSON fallback for `tabs` — useful when framework bindings don't propagate arrays.
+          * @default ''
+         */
+        "tabsJson"?: string;
+        /**
+          * ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set.
+          * @default ''
+         */
+        "value"?: string;
+    }
+    interface DsBarNavAction {
+        /**
+          * @default 'action'
+         */
+        "ariaLabel"?: string;
+        /**
+          * Parent surface context — adjusts hover/press colours for coloured backgrounds.
+         */
+        "background"?: BarNavActionBackground | undefined;
+        /**
+          * Show a notification dot (brand colour) at the top-right of the icon.
+          * @default false
+         */
+        "dot"?: boolean;
+        /**
+          * Icon name passed to <ds-icon>.
+          * @default ''
+         */
+        "icon"?: string;
+        /**
+          * Disables interaction.
+          * @default false
+         */
+        "inactive"?: boolean;
+        /**
+          * Emits the new selected value (!selected) on click.
+         */
+        "onDsChange"?: (event: DsBarNavActionCustomEvent<boolean>) => void;
+        /**
+          * Controlled toggle/selected state.
+          * @default false
+         */
+        "selected"?: boolean;
+    }
+    interface DsBreadcrumb {
+        /**
+          * @default []
+         */
+        "items"?: BreadcrumbItem[];
+        "onDsNavigate"?: (event: DsBreadcrumbCustomEvent<{ item: BreadcrumbItem; index: number }>) => void;
+        /**
+          * @default '/'
+         */
+        "separator"?: string;
+    }
+    interface DsButton {
+        "ariaLabel"?: string | undefined;
+        "ariaLabelledby"?: string | undefined;
+        "background"?: ButtonBackground | undefined;
+        "badgeCount"?: number | undefined;
+        /**
+          * @default 'bold'
+         */
+        "contrast"?: ButtonContrast;
+        /**
+          * @default false
+         */
+        "dropdown"?: boolean;
+        "elevation"?: ButtonElevation | undefined;
+        /**
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        "href"?: string | undefined;
+        /**
+          * @default false
+         */
+        "inactive"?: boolean;
+        /**
+          * @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;
+        /**
+          * @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 DsCard {
+        /**
+          * @default 'elevated'
+         */
+        "elevation"?: CardElevation;
+        /**
+          * @default 'lg'
+         */
+        "radius"?: CardRadius;
+    }
+    interface DsCheckbox {
+        /**
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * @default false
+         */
+        "inactive"?: boolean;
+        /**
+          * @default false
+         */
+        "indeterminate"?: boolean;
+        "label": string;
+        "onDsChange"?: (event: DsCheckboxCustomEvent<boolean>) => void;
+    }
+    interface DsDivider {
+        /**
+          * Direction of the divider line. Defaults to 'horizontal'.
+          * @default 'horizontal'
+         */
+        "orientation"?: DividerOrientation;
+    }
+    interface DsEmptyState {
+        "message"?: string | undefined;
+        /**
+          * @default 'no-content'
+         */
+        "type"?: EmptyStateType;
+    }
+    interface DsFade {
+        /**
+          * Background color to fade from. Defaults to var(--color-background-secondary).
+          * @default 'var(--color-background-secondary)'
+         */
+        "background"?: string;
+        /**
+          * Height (or width for left/right) of the fade overlay — any CSS value.
+         */
+        "height"?: string | undefined;
+        "side": FadeSide;
+    }
+    interface DsField {
+        /**
+          * ID forwarded to the slotted control via the label's `for` attribute. Auto-generated if omitted.
+         */
+        "fieldId"?: string | undefined;
+        "label": string;
+    }
+    interface DsHeader {
+        /**
+          * @default 'secondary'
+         */
+        "background"?: HeaderBackground;
+        "heading"?: string | undefined;
+    }
+    interface DsIcon {
+        /**
+          * Semantic foreground color token, or a raw CSS var reference.
+         */
+        "color"?: IconColor | undefined;
+        /**
+          * Set `true` to look up from the flag icon set instead of the system icon set.
+          * @default false
+         */
+        "flag"?: boolean;
+        /**
+          * Accessible label. Sets `role="img"` and `aria-label`. Omit for decorative icons.
+         */
+        "label"?: string | undefined;
+        /**
+          * Name of the system icon (e.g. `"Gear"`, `"ArrowRight"`) or flag (e.g. `"US"`)
+          * @default ''
+         */
+        "name"?: string;
+        /**
+          * Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px.
+          * @default 'md'
+         */
+        "size"?: IconSize;
+    }
+    interface DsInput {
+        "ariaDescribedby"?: string | undefined;
+        "ariaLabel"?: string | undefined;
+        "ariaLabelledby"?: string | undefined;
+        /**
+          * @default false
+         */
+        "autoFocus"?: boolean;
+        /**
+          * @default false
+         */
+        "error"?: boolean;
+        "errorMessage"?: string | undefined;
+        /**
+          * @default false
+         */
+        "inactive"?: boolean;
+        /**
+          * Associates the internal input with an external <label>.
+         */
+        "inputId"?: string | undefined;
+        "onDsChange"?: (event: DsInputCustomEvent<string>) => void;
+        "onDsClear"?: (event: DsInputCustomEvent<void>) => void;
+        "placeholder"?: string | undefined;
+        /**
+          * @default 'text'
+         */
+        "type"?: InputType;
+        /**
+          * @default ''
+         */
+        "value"?: string;
+    }
+    /**
+     * Internal utility wrapper that kills line-height struts and adds optical
+     * horizontal padding. Used inside interactive components (Button, Tag, etc.)
+     * Not intended as a standalone consumer-facing component — internal use only.
+     */
+    interface DsLabelWrap {
+        /**
+          * Typography size — controls optical horizontal padding.
+          * @default 'md'
+         */
+        "size"?: LabelWrapSize;
+        /**
+          * Enable truncation with ellipsis — use inside full-width containers.
+          * @default false
+         */
+        "truncate"?: boolean;
+    }
+    interface DsLoader {
+        /**
+          * Accessible label for standalone usage. Wraps the spinner in a live region and renders the label visually-hidden. Omit when the host element already conveys busy state via aria-busy.
+         */
+        "label"?: string | undefined;
+        /**
+          * Render size in px. Designed on a 16×16 viewBox; stroke scales proportionally.
+          * @default 20
+         */
+        "size"?: number;
+    }
+    interface DsMenu {
+        /**
+          * @default 'start'
+         */
+        "align"?: MenuAlign;
+        /**
+          * @default 0
+         */
+        "alignOffset"?: number;
+        /**
+          * External trigger element to position against. Set via JS: menuEl.anchor = buttonEl
+         */
+        "anchor"?: HTMLElement | undefined;
+        /**
+          * ID of the external trigger element for positioning
+         */
+        "anchorId"?: string | undefined;
+        /**
+          * @default []
+         */
+        "items"?: MenuItemData[];
+        "menuWidth"?: string | undefined;
+        "minWidth"?: string | undefined;
+        "onDsClose"?: (event: DsMenuCustomEvent<void>) => void;
+        "onDsSelect"?: (event: DsMenuCustomEvent<MenuItemData>) => void;
+        /**
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * @default []
+         */
+        "sections"?: MenuSection[];
+        /**
+          * @default 'bottom'
+         */
+        "side"?: MenuSide;
+        /**
+          * @default 4
+         */
+        "sideOffset"?: number;
+    }
+    interface DsModal {
+        "heading": string;
+        /**
+          * @default 'md'
+         */
+        "modalWidth"?: ModalWidth | string;
+        "onDsClose"?: (event: DsModalCustomEvent<void>) => void;
+        /**
+          * @default false
+         */
+        "open"?: boolean;
+        "subtitle"?: string | undefined;
+    }
+    interface DsPagination {
+        /**
+          * @default false
+         */
+        "inactive"?: boolean;
+        "onDsPageChange"?: (event: DsPaginationCustomEvent<number>) => void;
+        /**
+          * @default 1
+         */
+        "page"?: number;
+        /**
+          * @default 1
+         */
+        "siblingCount"?: number;
+        /**
+          * @default 1
+         */
+        "totalPages"?: number;
+    }
+    interface DsPanelNav {
+        /**
+          * ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set.
+          * @default ''
+         */
+        "activeId"?: string;
+        /**
+          * Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled.
+          * @default 0
+         */
+        "breakpoint"?: number;
+        /**
+          * Whether the nav is in collapsed (icon-only) state. When `storageKey` is set the component manages this internally — do not also bind it from outside in that mode.
+          * @default false
+         */
+        "collapsed"?: boolean;
+        /**
+          * Current route URL (e.g. `window.location.pathname` or the router's active URL). When set the component derives the active item by matching item `href` values against this string (longest segment-boundary prefix wins), overriding `activeId`.
+          * @default ''
+         */
+        "currentUrl"?: string;
+        /**
+          * When `true`, the component does not run its own View Transition on variant change — it just updates the rendered surface synchronously. Use this when the host app orchestrates the page transition itself (e.g. Angular Router's `withViewTransitions`), so the two don't fight or nest.
+          * @default false
+         */
+        "disableViewTransition"?: boolean;
+        /**
+          * Nav groups — set via JS property (`el.groups = [...]`) or JSON string attribute.
+          * @default '[]'
+         */
+        "groups"?: string | PanelNavGroup[];
+        /**
+          * Emitted when the footer left button (gear / dashboard) is clicked.
+         */
+        "onDsNavFooterAction"?: (event: DsPanelNavCustomEvent<void>) => void;
+        /**
+          * Emitted when a nav item is clicked. Detail = the item's `id`.
+         */
+        "onDsNavSelect"?: (event: DsPanelNavCustomEvent<string>) => void;
+        /**
+          * Emitted when the collapse toggle is clicked. Detail = new collapsed state.
+         */
+        "onDsNavToggle"?: (event: DsPanelNavCustomEvent<boolean>) => void;
+        /**
+          * Emitted when the footer user button is clicked.
+         */
+        "onDsNavUserAction"?: (event: DsPanelNavCustomEvent<void>) => void;
+        /**
+          * How items with `href` render: - `anchor` (default): native `<a href>` — works with routers that intercept anchors. - `event`: always `<button>`; host handles navigation via `dsNavSelect`.
+          * @default 'anchor'
+         */
+        "routerMode"?: PanelNavRouterMode;
+        /**
+          * `localStorage` key used to persist the collapsed state across page loads. When set the component is self-managing for collapsed state; `dsNavToggle` still fires for consumers that want to observe the change.
+          * @default ''
+         */
+        "storageKey"?: string;
+        /**
+          * Single character shown in the collapsed avatar
+          * @default ''
+         */
+        "userInitial"?: string;
+        /**
+          * Display name for the footer user section
+          * @default ''
+         */
+        "userName"?: string;
+        /**
+          * Visual variant: `dashboard` = always-dark surface, `settings` = light surface
+          * @default 'dashboard'
+         */
+        "variant"?: PanelNavVariant;
+    }
+    interface DsRadioGroup {
+        "ariaLabel"?: string | undefined;
+        "ariaLabelledby"?: string | undefined;
+        /**
+          * @default 'vertical'
+         */
+        "direction"?: 'vertical' | 'horizontal';
+        /**
+          * @default false
+         */
+        "inactive"?: boolean;
+        "onDsChange"?: (event: DsRadioGroupCustomEvent<string>) => void;
+        /**
+          * @default []
+         */
+        "options"?: RadioOption[];
+        /**
+          * @default ''
+         */
+        "value"?: string;
+    }
+    interface DsScrollbar {
+        /**
+          * @default true
+         */
+        "showTrackOnHover"?: boolean;
+        /**
+          * @default 'default'
+         */
+        "variant"?: ScrollbarVariant;
+    }
+    interface DsSelect {
+        "ariaLabel"?: string | undefined;
+        "ariaLabelledby"?: string | undefined;
+        /**
+          * Disables interaction.
+          * @default false
+         */
+        "inactive"?: boolean;
+        /**
+          * Emits the selected value string.
+         */
+        "onDsChange"?: (event: DsSelectCustomEvent<string>) => void;
+        /**
+          * Array of options. Set via JS property.
+          * @example el.options = [{ label: 'Apple', value: 'apple' }];
+          * @default []
+         */
+        "options"?: SelectOption[];
+        /**
+          * Placeholder shown when no value is selected.
+          * @default 'Select option'
+         */
+        "placeholder"?: string;
+        /**
+          * Currently selected value.
+          * @default ''
+         */
+        "value"?: string;
+    }
+    interface DsSidebar {
+        /**
+          * @default false
+         */
+        "collapsed"?: boolean;
+        /**
+          * @default false
+         */
+        "mobile"?: boolean;
+        "onDsToggle"?: (event: DsSidebarCustomEvent<void>) => void;
+        "onDsWidthChange"?: (event: DsSidebarCustomEvent<SidebarWidth>) => void;
+        /**
+          * @default true
+         */
+        "resizable"?: boolean;
+        /**
+          * @default 'default'
+         */
+        "width"?: SidebarWidth;
+    }
+    interface DsSkeleton {
+        /**
+          * Height as a CSS value string or number (px).
+         */
+        "height"?: string | number | undefined;
+        /**
+          * Number of text lines. Only used when variant is 'text'.
+          * @default 1
+         */
+        "lines"?: number;
+        /**
+          * Whether to show the shimmer animation.
+          * @default true
+         */
+        "shimmer"?: boolean;
+        /**
+          * @default 'text'
+         */
+        "variant"?: SkeletonVariant;
+        /**
+          * Width as a CSS value string (e.g. '200px', '100%') or number (px).
+         */
+        "width"?: string | number | undefined;
+    }
+    interface DsSlider {
+        /**
+          * @default false
+         */
+        "inactive"?: boolean;
+        /**
+          * Associates with an external <label>. Defaults to an auto-generated ID.
+         */
+        "inputId"?: string | undefined;
+        "label": string;
+        /**
+          * @default 100
+         */
+        "max"?: number;
+        /**
+          * @default 0
+         */
+        "min"?: number;
+        "onDsChange"?: (event: DsSliderCustomEvent<number>) => void;
+        /**
+          * @default 1
+         */
+        "step"?: number;
+        /**
+          * @default 0
+         */
+        "value"?: number;
+        "valueText"?: string | undefined;
+    }
+    interface DsSurface {
+        /**
+          * @default 'div'
+         */
+        "as"?: SurfaceElement;
+        /**
+          * @default 'transparent'
+         */
+        "background"?: SurfaceBackground;
+        /**
+          * @default 'faint'
+         */
+        "contrast"?: SurfaceContrast;
+        /**
+          * Space-separated list of edges: "top bottom" etc. Only applies when elevation='none'.
+         */
+        "edge"?: string | undefined;
+        /**
+          * @default 'none'
+         */
+        "elevation"?: SurfaceElevation;
+        /**
+          * @default false
+         */
+        "inactive"?: boolean;
+        "intent"?: SurfaceIntent | undefined;
+        /**
+          * @default false
+         */
+        "interactive"?: boolean;
+        "radius"?: SurfaceRadius | undefined;
+        /**
+          * @default false
+         */
+        "selected"?: boolean;
+    }
+    interface DsTabGroup {
+        "ariaLabel"?: string | undefined;
+        "ariaLabelledby"?: string | undefined;
+        "background"?: TabBackground | undefined;
+        "onDsChange"?: (event: DsTabGroupCustomEvent<string>) => void;
+        /**
+          * @default 'horizontal'
+         */
+        "orientation"?: 'horizontal' | 'vertical';
+        /**
+          * @default []
+         */
+        "tabs"?: TabItem[];
+        /**
+          * @default ''
+         */
+        "value"?: string;
+    }
+    interface DsTabGroupNav {
+        "ariaLabel"?: string | undefined;
+        "ariaLabelledby"?: string | undefined;
+        "background"?: TabGroupNavBackground | undefined;
+        "onDsChange"?: (event: DsTabGroupNavCustomEvent<string>) => void;
+        /**
+          * @default 'horizontal'
+         */
+        "orientation"?: 'horizontal' | 'vertical';
+        /**
+          * @default []
+         */
+        "tabs"?: TabItem[];
+        /**
+          * @default ''
+         */
+        "value"?: string;
+    }
+    interface DsTable {
+        /**
+          * @default []
+         */
+        "columns"?: TableColumn[];
+        /**
+          * @default []
+         */
+        "data"?: unknown[];
+        /**
+          * @default 'No results found.'
+         */
+        "emptyMessage"?: string;
+        /**
+          * @default false
+         */
+        "loading"?: boolean;
+        "onDsPageChange"?: (event: DsTableCustomEvent<{ pageIndex: number }>) => void;
+        "onDsRowClick"?: (event: DsTableCustomEvent<{ row: unknown; rowIndex: number }>) => void;
+        "onDsSort"?: (event: DsTableCustomEvent<{ columnId: string }>) => void;
+        /**
+          * Page index (0-based). Enables built-in pagination when set alongside pageSize.
+         */
+        "pageIndex"?: number | undefined;
+        /**
+          * @default 20
+         */
+        "pageSize"?: number;
+        /**
+          * Comma-separated zero-based row indices that are selected.
+          * @default ''
+         */
+        "selectedRows"?: string;
+        "sortState"?: SortState | undefined;
+    }
+    interface DsTag {
+        "background"?: TagBackground | undefined;
+        /**
+          * @default 'faint'
+         */
+        "contrast"?: TagContrast;
+        /**
+          * @default 'none'
+         */
+        "elevation"?: TagElevation;
+        /**
+          * @default false
+         */
+        "inactive"?: boolean;
+        /**
+          * @default 'neutral'
+         */
+        "intent"?: TagIntent;
+        /**
+          * Whether the tag has a click/toggle behavior.
+          * @default false
+         */
+        "interactive"?: boolean;
+        "label": string;
+        "maxWidth"?: string | number | undefined;
+        /**
+          * Fired when an interactive tag is clicked.
+         */
+        "onDsClick"?: (event: DsTagCustomEvent<void>) => void;
+        /**
+          * Fired when the pressed state toggles.
+         */
+        "onDsPressedChange"?: (event: DsTagCustomEvent<boolean>) => void;
+        /**
+          * Fired when the remove button is clicked.
+         */
+        "onDsRemove"?: (event: DsTagCustomEvent<void>) => void;
+        /**
+          * @default false
+         */
+        "pressed"?: boolean;
+        /**
+          * @default false
+         */
+        "removable"?: boolean;
+        /**
+          * @default false
+         */
+        "rounded"?: boolean;
+        /**
+          * @default 'md'
+         */
+        "size"?: TagSize;
+    }
+    interface DsText {
+        "align"?: TextAlign | undefined;
+        /**
+          * @default 'p'
+         */
+        "as"?: TextElement;
+        "color"?: TextColor | undefined;
+        "decoration"?: TextDecoration | undefined;
+        /**
+          * Maps to `for` attribute on <label> elements.
+         */
+        "for"?: string | undefined;
+        /**
+          * @default false
+         */
+        "italic"?: boolean;
+        /**
+          * @default 'none'
+         */
+        "lineTruncation"?: LineTruncation;
+        /**
+          * @default 'text-body-medium'
+         */
+        "variant"?: TextVariant;
+        "wrap"?: TextWrap | undefined;
+    }
+    interface DsToastProvider {
+        /**
+          * @default 'top-center'
+         */
+        "position"?: ToastPosition;
+    }
+    interface DsToggle {
+        /**
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * @default false
+         */
+        "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'
+         */
+        "align"?: TooltipAlign;
+        /**
+          * @default 0
+         */
+        "alignOffset"?: number;
+        /**
+          * @default HOVER_DELAY_MS
+         */
+        "delay"?: number;
+        "label": string;
+        "shortcutKey"?: string | undefined;
+        /**
+          * @default 'end'
+         */
+        "shortcutKeyPosition"?: 'start' | 'end';
+        /**
+          * @default 'top'
+         */
+        "side"?: TooltipSide;
+        /**
+          * @default 4
+         */
+        "sideOffset"?: number;
+    }
+
+    interface DsAccordionAttributes {
+        "multiple": boolean;
+        "expandedIds": string;
+    }
+    interface DsBadgeAttributes {
+        "count": number;
+        "isSelected": boolean;
+        "label": string | undefined;
+    }
+    interface DsBannerAttributes {
+        "intent": BannerIntent;
+        "contrast": BannerContrast;
+        "message": string;
+        "header": boolean;
+        "floating": boolean;
+        "showDismiss": boolean;
+        "dismissLabel": string;
+    }
+    interface DsBarNavAttributes {
+        "tabsJson": string;
+        "value": string;
+        "actionsJson": string;
+        "heading": string | undefined;
+        "background": BarNavBackground;
+        "basePath": string;
+        "currentUrl": string;
+    }
+    interface DsBarNavActionAttributes {
+        "icon": string;
+        "selected": boolean;
+        "dot": boolean;
+        "inactive": boolean;
+        "ariaLabel": string;
+        "background": BarNavActionBackground | undefined;
+    }
+    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;
+        "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;
+    }
+    interface DsCardAttributes {
+        "elevation": CardElevation;
+        "radius": CardRadius;
+    }
+    interface DsCheckboxAttributes {
+        "label": string;
+        "checked": boolean;
+        "indeterminate": boolean;
+        "inactive": boolean;
+    }
+    interface DsDividerAttributes {
+        "orientation": DividerOrientation;
+    }
+    interface DsEmptyStateAttributes {
+        "type": EmptyStateType;
+        "message": string | undefined;
+    }
+    interface DsFadeAttributes {
+        "side": FadeSide;
+        "height": string | undefined;
+        "background": string;
+    }
+    interface DsFieldAttributes {
+        "label": string;
+        "fieldId": string | undefined;
+    }
+    interface DsHeaderAttributes {
+        "heading": string | undefined;
+        "background": HeaderBackground;
+    }
+    interface DsIconAttributes {
+        "name": string;
+        "size": IconSize;
+        "color": IconColor | undefined;
+        "label": string | undefined;
+        "flag": boolean;
+    }
+    interface DsInputAttributes {
+        "value": string;
+        "placeholder": string | undefined;
+        "type": InputType;
+        "inactive": boolean;
+        "autoFocus": boolean;
+        "error": boolean;
+        "errorMessage": string | undefined;
+        "inputId": string | undefined;
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+        "ariaDescribedby": string | undefined;
+    }
+    interface DsLabelWrapAttributes {
+        "size": LabelWrapSize;
+        "truncate": boolean;
+    }
+    interface DsLoaderAttributes {
+        "size": number;
+        "label": string | undefined;
+    }
+    interface DsMenuAttributes {
+        "open": boolean;
+        "side": MenuSide;
+        "align": MenuAlign;
+        "sideOffset": number;
+        "alignOffset": number;
+        "menuWidth": string | undefined;
+        "minWidth": string | undefined;
+        "anchorId": string | undefined;
+    }
+    interface DsModalAttributes {
+        "open": boolean;
+        "heading": string;
+        "subtitle": string | undefined;
+        "modalWidth": ModalWidth | string;
+    }
+    interface DsPaginationAttributes {
+        "page": number;
+        "totalPages": number;
+        "siblingCount": number;
+        "inactive": boolean;
+    }
+    interface DsPanelNavAttributes {
+        "variant": PanelNavVariant;
+        "disableViewTransition": boolean;
+        "groups": string | PanelNavGroup[];
+        "routerMode": PanelNavRouterMode;
+        "activeId": string;
+        "collapsed": boolean;
+        "breakpoint": number;
+        "storageKey": string;
+        "currentUrl": string;
+        "userName": string;
+        "userInitial": string;
+    }
+    interface DsRadioGroupAttributes {
+        "value": string;
+        "direction": 'vertical' | 'horizontal';
+        "inactive": boolean;
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+    }
+    interface DsScrollbarAttributes {
+        "variant": ScrollbarVariant;
+        "showTrackOnHover": boolean;
+    }
+    interface DsSelectAttributes {
+        "value": string;
+        "placeholder": string;
+        "inactive": boolean;
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+    }
+    interface DsSidebarAttributes {
+        "collapsed": boolean;
+        "width": string;
+        "resizable": boolean;
+        "mobile": boolean;
+    }
+    interface DsSkeletonAttributes {
+        "variant": SkeletonVariant;
+        "width": string;
+        "height": string;
+        "lines": number;
+        "shimmer": boolean;
+    }
+    interface DsSliderAttributes {
+        "value": number;
+        "min": number;
+        "max": number;
+        "step": number;
+        "label": string;
+        "inactive": boolean;
+        "valueText": string | undefined;
+        "inputId": string | undefined;
+    }
+    interface DsSurfaceAttributes {
+        "background": SurfaceBackground;
+        "intent": SurfaceIntent | undefined;
+        "contrast": SurfaceContrast;
+        "elevation": SurfaceElevation;
+        "edge": string | undefined;
+        "radius": SurfaceRadius | undefined;
+        "interactive": boolean;
+        "selected": boolean;
+        "inactive": boolean;
+        "as": SurfaceElement;
+    }
+    interface DsTabGroupAttributes {
+        "value": string;
+        "background": TabBackground | undefined;
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+        "orientation": 'horizontal' | 'vertical';
+    }
+    interface DsTabGroupNavAttributes {
+        "value": string;
+        "background": TabGroupNavBackground | undefined;
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+        "orientation": 'horizontal' | 'vertical';
+    }
+    interface DsTableAttributes {
+        "loading": boolean;
+        "emptyMessage": string;
+        "selectedRows": string;
+        "pageIndex": number | undefined;
+        "pageSize": number;
+    }
+    interface DsTagAttributes {
+        "label": string;
+        "intent": TagIntent;
+        "contrast": TagContrast;
+        "elevation": TagElevation;
+        "size": TagSize;
+        "rounded": boolean;
+        "removable": boolean;
+        "maxWidth": string;
+        "inactive": boolean;
+        "background": TagBackground | undefined;
+        "pressed": boolean;
+        "interactive": boolean;
+    }
+    interface DsTextAttributes {
+        "variant": TextVariant;
+        "color": TextColor | undefined;
+        "decoration": TextDecoration | undefined;
+        "italic": boolean;
+        "align": TextAlign | undefined;
+        "lineTruncation": string;
+        "wrap": TextWrap | undefined;
+        "as": TextElement;
+        "for": string | undefined;
+    }
+    interface DsToastProviderAttributes {
+        "position": ToastPosition;
+    }
+    interface DsToggleAttributes {
+        "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;
+        "align": TooltipAlign;
+        "sideOffset": number;
+        "alignOffset": number;
+        "delay": number;
+        "shortcutKey": string | undefined;
+        "shortcutKeyPosition": 'start' | 'end';
+    }
+
+    interface IntrinsicElements {
+        "ds-accordion": Omit<DsAccordion, keyof DsAccordionAttributes> & { [K in keyof DsAccordion & keyof DsAccordionAttributes]?: DsAccordion[K] } & { [K in keyof DsAccordion & keyof DsAccordionAttributes as `attr:${K}`]?: DsAccordionAttributes[K] } & { [K in keyof DsAccordion & keyof DsAccordionAttributes as `prop:${K}`]?: DsAccordion[K] };
+        "ds-badge": Omit<DsBadge, keyof DsBadgeAttributes> & { [K in keyof DsBadge & keyof DsBadgeAttributes]?: DsBadge[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `attr:${K}`]?: DsBadgeAttributes[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `prop:${K}`]?: DsBadge[K] };
+        "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-bar-nav-action": Omit<DsBarNavAction, keyof DsBarNavActionAttributes> & { [K in keyof DsBarNavAction & keyof DsBarNavActionAttributes]?: DsBarNavAction[K] } & { [K in keyof DsBarNavAction & keyof DsBarNavActionAttributes as `attr:${K}`]?: DsBarNavActionAttributes[K] } & { [K in keyof DsBarNavAction & keyof DsBarNavActionAttributes as `prop:${K}`]?: DsBarNavAction[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-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-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-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] };
+        "ds-empty-state": Omit<DsEmptyState, keyof DsEmptyStateAttributes> & { [K in keyof DsEmptyState & keyof DsEmptyStateAttributes]?: DsEmptyState[K] } & { [K in keyof DsEmptyState & keyof DsEmptyStateAttributes as `attr:${K}`]?: DsEmptyStateAttributes[K] } & { [K in keyof DsEmptyState & keyof DsEmptyStateAttributes as `prop:${K}`]?: DsEmptyState[K] };
+        "ds-fade": Omit<DsFade, keyof DsFadeAttributes> & { [K in keyof DsFade & keyof DsFadeAttributes]?: DsFade[K] } & { [K in keyof DsFade & keyof DsFadeAttributes as `attr:${K}`]?: DsFadeAttributes[K] } & { [K in keyof DsFade & keyof DsFadeAttributes as `prop:${K}`]?: DsFade[K] } & OneOf<"side", DsFade["side"], DsFadeAttributes["side"]>;
+        "ds-field": Omit<DsField, keyof DsFieldAttributes> & { [K in keyof DsField & keyof DsFieldAttributes]?: DsField[K] } & { [K in keyof DsField & keyof DsFieldAttributes as `attr:${K}`]?: DsFieldAttributes[K] } & { [K in keyof DsField & keyof DsFieldAttributes as `prop:${K}`]?: DsField[K] } & OneOf<"label", DsField["label"], DsFieldAttributes["label"]>;
+        "ds-header": Omit<DsHeader, keyof DsHeaderAttributes> & { [K in keyof DsHeader & keyof DsHeaderAttributes]?: DsHeader[K] } & { [K in keyof DsHeader & keyof DsHeaderAttributes as `attr:${K}`]?: DsHeaderAttributes[K] } & { [K in keyof DsHeader & keyof DsHeaderAttributes as `prop:${K}`]?: DsHeader[K] };
+        "ds-icon": Omit<DsIcon, keyof DsIconAttributes> & { [K in keyof DsIcon & keyof DsIconAttributes]?: DsIcon[K] } & { [K in keyof DsIcon & keyof DsIconAttributes as `attr:${K}`]?: DsIconAttributes[K] } & { [K in keyof DsIcon & keyof DsIconAttributes as `prop:${K}`]?: DsIcon[K] };
+        "ds-input": Omit<DsInput, keyof DsInputAttributes> & { [K in keyof DsInput & keyof DsInputAttributes]?: DsInput[K] } & { [K in keyof DsInput & keyof DsInputAttributes as `attr:${K}`]?: DsInputAttributes[K] } & { [K in keyof DsInput & keyof DsInputAttributes as `prop:${K}`]?: DsInput[K] };
+        "ds-label-wrap": Omit<DsLabelWrap, keyof DsLabelWrapAttributes> & { [K in keyof DsLabelWrap & keyof DsLabelWrapAttributes]?: DsLabelWrap[K] } & { [K in keyof DsLabelWrap & keyof DsLabelWrapAttributes as `attr:${K}`]?: DsLabelWrapAttributes[K] } & { [K in keyof DsLabelWrap & keyof DsLabelWrapAttributes as `prop:${K}`]?: DsLabelWrap[K] };
+        "ds-loader": Omit<DsLoader, keyof DsLoaderAttributes> & { [K in keyof DsLoader & keyof DsLoaderAttributes]?: DsLoader[K] } & { [K in keyof DsLoader & keyof DsLoaderAttributes as `attr:${K}`]?: DsLoaderAttributes[K] } & { [K in keyof DsLoader & keyof DsLoaderAttributes as `prop:${K}`]?: DsLoader[K] };
+        "ds-menu": Omit<DsMenu, keyof DsMenuAttributes> & { [K in keyof DsMenu & keyof DsMenuAttributes]?: DsMenu[K] } & { [K in keyof DsMenu & keyof DsMenuAttributes as `attr:${K}`]?: DsMenuAttributes[K] } & { [K in keyof DsMenu & keyof DsMenuAttributes as `prop:${K}`]?: DsMenu[K] };
+        "ds-modal": Omit<DsModal, keyof DsModalAttributes> & { [K in keyof DsModal & keyof DsModalAttributes]?: DsModal[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `attr:${K}`]?: DsModalAttributes[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `prop:${K}`]?: DsModal[K] } & OneOf<"heading", DsModal["heading"], DsModalAttributes["heading"]>;
+        "ds-pagination": Omit<DsPagination, keyof DsPaginationAttributes> & { [K in keyof DsPagination & keyof DsPaginationAttributes]?: DsPagination[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `attr:${K}`]?: DsPaginationAttributes[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `prop:${K}`]?: DsPagination[K] };
+        "ds-panel-nav": Omit<DsPanelNav, keyof DsPanelNavAttributes> & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes]?: DsPanelNav[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `attr:${K}`]?: DsPanelNavAttributes[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `prop:${K}`]?: DsPanelNav[K] };
+        "ds-radio-group": Omit<DsRadioGroup, keyof DsRadioGroupAttributes> & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes]?: DsRadioGroup[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `attr:${K}`]?: DsRadioGroupAttributes[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `prop:${K}`]?: DsRadioGroup[K] };
+        "ds-scrollbar": Omit<DsScrollbar, keyof DsScrollbarAttributes> & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes]?: DsScrollbar[K] } & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes as `attr:${K}`]?: DsScrollbarAttributes[K] } & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes as `prop:${K}`]?: DsScrollbar[K] };
+        "ds-select": Omit<DsSelect, keyof DsSelectAttributes> & { [K in keyof DsSelect & keyof DsSelectAttributes]?: DsSelect[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `attr:${K}`]?: DsSelectAttributes[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `prop:${K}`]?: DsSelect[K] };
+        "ds-sidebar": Omit<DsSidebar, keyof DsSidebarAttributes> & { [K in keyof DsSidebar & keyof DsSidebarAttributes]?: DsSidebar[K] } & { [K in keyof DsSidebar & keyof DsSidebarAttributes as `attr:${K}`]?: DsSidebarAttributes[K] } & { [K in keyof DsSidebar & keyof DsSidebarAttributes as `prop:${K}`]?: DsSidebar[K] };
+        "ds-skeleton": Omit<DsSkeleton, keyof DsSkeletonAttributes> & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes]?: DsSkeleton[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `attr:${K}`]?: DsSkeletonAttributes[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `prop:${K}`]?: DsSkeleton[K] };
+        "ds-slider": Omit<DsSlider, keyof DsSliderAttributes> & { [K in keyof DsSlider & keyof DsSliderAttributes]?: DsSlider[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `attr:${K}`]?: DsSliderAttributes[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `prop:${K}`]?: DsSlider[K] } & OneOf<"label", DsSlider["label"], DsSliderAttributes["label"]>;
+        "ds-surface": Omit<DsSurface, keyof DsSurfaceAttributes> & { [K in keyof DsSurface & keyof DsSurfaceAttributes]?: DsSurface[K] } & { [K in keyof DsSurface & keyof DsSurfaceAttributes as `attr:${K}`]?: DsSurfaceAttributes[K] } & { [K in keyof DsSurface & keyof DsSurfaceAttributes as `prop:${K}`]?: DsSurface[K] };
+        "ds-tab-group": Omit<DsTabGroup, keyof DsTabGroupAttributes> & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes]?: DsTabGroup[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `attr:${K}`]?: DsTabGroupAttributes[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `prop:${K}`]?: DsTabGroup[K] };
+        "ds-tab-group-nav": Omit<DsTabGroupNav, keyof DsTabGroupNavAttributes> & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes]?: DsTabGroupNav[K] } & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes as `attr:${K}`]?: DsTabGroupNavAttributes[K] } & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes as `prop:${K}`]?: DsTabGroupNav[K] };
+        "ds-table": Omit<DsTable, keyof DsTableAttributes> & { [K in keyof DsTable & keyof DsTableAttributes]?: DsTable[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `attr:${K}`]?: DsTableAttributes[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `prop:${K}`]?: DsTable[K] };
+        "ds-tag": Omit<DsTag, keyof DsTagAttributes> & { [K in keyof DsTag & keyof DsTagAttributes]?: DsTag[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `attr:${K}`]?: DsTagAttributes[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `prop:${K}`]?: DsTag[K] } & OneOf<"label", DsTag["label"], DsTagAttributes["label"]>;
+        "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"]>;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "ds-accordion": LocalJSX.IntrinsicElements["ds-accordion"] & JSXBase.HTMLAttributes<HTMLDsAccordionElement>;
+            "ds-badge": LocalJSX.IntrinsicElements["ds-badge"] & JSXBase.HTMLAttributes<HTMLDsBadgeElement>;
+            "ds-banner": LocalJSX.IntrinsicElements["ds-banner"] & JSXBase.HTMLAttributes<HTMLDsBannerElement>;
+            "ds-bar-nav": LocalJSX.IntrinsicElements["ds-bar-nav"] & JSXBase.HTMLAttributes<HTMLDsBarNavElement>;
+            "ds-bar-nav-action": LocalJSX.IntrinsicElements["ds-bar-nav-action"] & JSXBase.HTMLAttributes<HTMLDsBarNavActionElement>;
+            "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-card": LocalJSX.IntrinsicElements["ds-card"] & JSXBase.HTMLAttributes<HTMLDsCardElement>;
+            "ds-checkbox": LocalJSX.IntrinsicElements["ds-checkbox"] & JSXBase.HTMLAttributes<HTMLDsCheckboxElement>;
+            "ds-divider": LocalJSX.IntrinsicElements["ds-divider"] & JSXBase.HTMLAttributes<HTMLDsDividerElement>;
+            "ds-empty-state": LocalJSX.IntrinsicElements["ds-empty-state"] & JSXBase.HTMLAttributes<HTMLDsEmptyStateElement>;
+            "ds-fade": LocalJSX.IntrinsicElements["ds-fade"] & JSXBase.HTMLAttributes<HTMLDsFadeElement>;
+            "ds-field": LocalJSX.IntrinsicElements["ds-field"] & JSXBase.HTMLAttributes<HTMLDsFieldElement>;
+            "ds-header": LocalJSX.IntrinsicElements["ds-header"] & JSXBase.HTMLAttributes<HTMLDsHeaderElement>;
+            "ds-icon": LocalJSX.IntrinsicElements["ds-icon"] & JSXBase.HTMLAttributes<HTMLDsIconElement>;
+            "ds-input": LocalJSX.IntrinsicElements["ds-input"] & JSXBase.HTMLAttributes<HTMLDsInputElement>;
+            /**
+             * Internal utility wrapper that kills line-height struts and adds optical
+             * horizontal padding. Used inside interactive components (Button, Tag, etc.)
+             * Not intended as a standalone consumer-facing component — internal use only.
+             */
+            "ds-label-wrap": LocalJSX.IntrinsicElements["ds-label-wrap"] & JSXBase.HTMLAttributes<HTMLDsLabelWrapElement>;
+            "ds-loader": LocalJSX.IntrinsicElements["ds-loader"] & JSXBase.HTMLAttributes<HTMLDsLoaderElement>;
+            "ds-menu": LocalJSX.IntrinsicElements["ds-menu"] & JSXBase.HTMLAttributes<HTMLDsMenuElement>;
+            "ds-modal": LocalJSX.IntrinsicElements["ds-modal"] & JSXBase.HTMLAttributes<HTMLDsModalElement>;
+            "ds-pagination": LocalJSX.IntrinsicElements["ds-pagination"] & JSXBase.HTMLAttributes<HTMLDsPaginationElement>;
+            "ds-panel-nav": LocalJSX.IntrinsicElements["ds-panel-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelNavElement>;
+            "ds-radio-group": LocalJSX.IntrinsicElements["ds-radio-group"] & JSXBase.HTMLAttributes<HTMLDsRadioGroupElement>;
+            "ds-scrollbar": LocalJSX.IntrinsicElements["ds-scrollbar"] & JSXBase.HTMLAttributes<HTMLDsScrollbarElement>;
+            "ds-select": LocalJSX.IntrinsicElements["ds-select"] & JSXBase.HTMLAttributes<HTMLDsSelectElement>;
+            "ds-sidebar": LocalJSX.IntrinsicElements["ds-sidebar"] & JSXBase.HTMLAttributes<HTMLDsSidebarElement>;
+            "ds-skeleton": LocalJSX.IntrinsicElements["ds-skeleton"] & JSXBase.HTMLAttributes<HTMLDsSkeletonElement>;
+            "ds-slider": LocalJSX.IntrinsicElements["ds-slider"] & JSXBase.HTMLAttributes<HTMLDsSliderElement>;
+            "ds-surface": LocalJSX.IntrinsicElements["ds-surface"] & JSXBase.HTMLAttributes<HTMLDsSurfaceElement>;
+            "ds-tab-group": LocalJSX.IntrinsicElements["ds-tab-group"] & JSXBase.HTMLAttributes<HTMLDsTabGroupElement>;
+            "ds-tab-group-nav": LocalJSX.IntrinsicElements["ds-tab-group-nav"] & JSXBase.HTMLAttributes<HTMLDsTabGroupNavElement>;
+            "ds-table": LocalJSX.IntrinsicElements["ds-table"] & JSXBase.HTMLAttributes<HTMLDsTableElement>;
+            "ds-tag": LocalJSX.IntrinsicElements["ds-tag"] & JSXBase.HTMLAttributes<HTMLDsTagElement>;
+            "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>;
+        }
+    }
+}