@pine-ds/core 4.1.0 → 4.3.0

package/dist/types/components.d.ts

@@ -8,7 +8,7 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BoxColumnType, BoxShadowSizeType, BoxSpacingType, TextSizeType } from "./utils/types";
 import { Event } from "./stencil-public-runtime";
 import { CheckboxChangeEventDetail } from "./components/pds-checkbox/checkbox-interface";
-import { ChipSentimentType, ChipSizeType, ChipVariantType, PlacementType } from "./utils/types";
+import { ChipSentimentType, ChipSizeType, ChipVariantType, ModalSizeType, PlacementType } from "./utils/types";
 import { ComboboxLoadOptionsEventDetail, ComboboxOption, ComboboxSearchEventDetail } from "./components/pds-combobox/combobox-interface";
 import { PdsFilterClearEventDetail, PdsFilterCloseEventDetail, PdsFilterOpenEventDetail, PdsFilterVariant } from "./components/pds-filters/pds-filter/filter-interface";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/pds-input/input-interface";
@@ -21,7 +21,7 @@ import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./component
 export { BoxColumnType, BoxShadowSizeType, BoxSpacingType, TextSizeType } from "./utils/types";
 export { Event } from "./stencil-public-runtime";
 export { CheckboxChangeEventDetail } from "./components/pds-checkbox/checkbox-interface";
-export { ChipSentimentType, ChipSizeType, ChipVariantType, PlacementType } from "./utils/types";
+export { ChipSentimentType, ChipSizeType, ChipVariantType, ModalSizeType, PlacementType } from "./utils/types";
 export { ComboboxLoadOptionsEventDetail, ComboboxOption, ComboboxSearchEventDetail } from "./components/pds-combobox/combobox-interface";
 export { PdsFilterClearEventDetail, PdsFilterCloseEventDetail, PdsFilterOpenEventDetail, PdsFilterVariant } from "./components/pds-filters/pds-filter/filter-interface";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/pds-input/input-interface";
@@ -891,10 +891,18 @@ export namespace Components {
           * @defaultValue false
          */
         "dot": boolean;
+        /**
+          * Sets the dot color. Accepts a sentiment name other than `brand` (e.g. `success`), a color token, or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Defaults to the dot color of the chip's sentiment. Only applies when `dot` is set.
+         */
+        "dotColor"?: string;
         /**
           * The name of the icon to display before the chip text.
          */
         "icon"?: string;
+        /**
+          * Sets the icon color. Accepts a sentiment name other than `brand` (e.g. `success`), a color token, or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Defaults to the chip's text color. Only applies when `icon` is set.
+         */
+        "iconColor"?: string;
         /**
           * Sets the maximum width of the chip, truncating the label with an ellipsis when it overflows. Accepts any CSS length (e.g. '200px', '20ch'). The slot is documented as label text — slotting richer markup may not truncate the way you expect.
          */
@@ -1149,6 +1157,63 @@ export namespace Components {
          */
         "vertical": boolean;
     }
+    /**
+     * A non-modal side panel composed from `pds-modal`.
+     * Unlike `pds-modal`, the page stays interactive while a drawer is open: no
+     * dimming, no blur, no scroll lock, no click blocking. `pds-drawer` renders a
+     * `pds-modal` internally with `disableTopLayer` always on and its backdrop
+     * suppressed, and adds the edge, width and dismiss behavior a side panel
+     * needs on top. It does not reimplement focus, Escape or dialog semantics —
+     * those come from `pds-modal` unchanged.
+     */
+    interface PdsDrawer {
+        /**
+          * A unique identifier used for the underlying component `id` attribute.
+         */
+        "componentId": string;
+        /**
+          * Whether to move focus into the drawer when it opens. `auto` is right for a drawer opened by a direct user action (a click, a deep link the user just navigated to). Set to `none` for a drawer that can open from a background event while the user is mid-task elsewhere on the page — moving focus there would interrupt them, and the page stays live under a non-modal drawer, so it is a genuine data-entry risk, not just an annoyance.
+          * @default 'auto'
+         */
+        "initialFocus": 'auto' | 'none';
+        /**
+          * Whether the drawer can be dismissed with a pointerdown outside it. Replaces `pds-modal`'s `backdropDismiss` — there is no backdrop to click. This also gates Escape, matching how `backdropDismiss` gates Escape on `pds-modal` today: setting this to `false` means the close button is the only way out.  A trigger outside the drawer should only ever set `open` to `true` and leave closing to the drawer itself. A toggle-style trigger (`open = !open`) fights light dismiss: clicking it while open closes the drawer on `pointerdown`, then the trigger's own click handler re-opens it.
+          * @default true
+         */
+        "lightDismiss": boolean;
+        /**
+          * Whether the drawer is open
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Whether the drawer content should be scrollable
+          * @default true
+         */
+        "scrollable": boolean;
+        /**
+          * Which edge of the viewport the drawer is docked to. Logical, so this is free under RTL — `end` is the inline-end edge regardless of direction.
+          * @default 'end'
+         */
+        "side": 'start' | 'end';
+        /**
+          * The drawer's width.
+          * @default 'md'
+         */
+        "size": 'sm' | 'md';
+    }
+    /**
+     * Fills the drawer panel's height by default — unlike `pds-modal-content`,
+     * which caps itself against the viewport for a centered, possibly-shorter
+     * modal, a drawer panel is already edge-to-edge, so its content can simply
+     * flex to fill whatever space the header and footer leave.
+     */
+    interface PdsDrawerContent {
+    }
+    interface PdsDrawerFooter {
+    }
+    interface PdsDrawerHeader {
+    }
     interface PdsDropdownMenu {
         /**
           * A unique identifier used for the underlying component `id` attribute.
@@ -1498,6 +1563,11 @@ export namespace Components {
           * A unique identifier used for the underlying component `id` attribute.
          */
         "componentId": string;
+        /**
+          * Whether to skip moving focus into the modal when it opens — both our own `setInitialFocus()` and the browser's native "dialog focusing steps", which move focus into the dialog as soon as `show()`/`showModal()` is called regardless of application code. Focus return on close is unaffected either way. For a modal opened by something other than a direct user click — a redirect, a deep link, a background event — stealing focus on open can interrupt whatever the user was already doing. Default `false` preserves today's behavior for every existing consumer.
+          * @default false
+         */
+        "disableInitialFocus": boolean;
         /**
           * Whether the modal opens outside the browser top layer as a non-modal dialog. When `true` it opens with `dialog.show()` instead of `dialog.showModal()`, so overlays rendered elsewhere in the DOM (file pickers, editor menus) can display above it via `z-index`. The page is not made inert and focus is not trapped in this mode. Read when the modal opens; changing it while the modal is open is not supported.
           * @default false
@@ -1522,10 +1592,10 @@ export namespace Components {
          */
         "showModal": () => Promise<void>;
         /**
-          * The size of the modal
+          * The size of the modal. Can be a predefined value ('sm', 'md', 'lg', 'fullscreen') or a custom max-width as a CSS length (e.g., '1250px', '80vw'). A custom width stays fluid below that size. A value that is neither falls back to 'md'.
           * @default 'md'
          */
-        "size": 'sm' | 'md' | 'lg' | 'fullscreen';
+        "size": ModalSizeType | (string & Record<never, never>);
     }
     interface PdsModalContent {
         /**
@@ -2211,7 +2281,7 @@ export namespace Components {
          */
         "cellAlign"?: 'start' | 'center' | 'end' | 'justify';
         /**
-          * Truncates content to a max width and adds an ellipsis. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: When truncate is enabled, the element automatically receives tabindex="0" for keyboard accessibility.
+          * Truncates content to a max width and adds an ellipsis. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: While the content is overflowing, the cell receives tabindex="0" so the tooltip can be reached by keyboard. Content that fits is left out of the tab order.
          */
         "truncate": boolean;
     }
@@ -2357,7 +2427,7 @@ export namespace Components {
     | 'strong'
     | 'em';
         /**
-          * If set or `true`, the text will be truncated. Must add a `width` to the element. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: When truncate is enabled, the element automatically receives tabindex="0" for keyboard accessibility.
+          * If set or `true`, the text will be truncated. Must add a `width` to the element. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: While the text is overflowing, the element receives tabindex="0" so the tooltip can be reached by keyboard. Text that fits is left out of the tab order.
          */
         "truncate"?: boolean;
         /**
@@ -2562,6 +2632,10 @@ export interface PdsCopytextCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPdsCopytextElement;
 }
+export interface PdsDrawerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPdsDrawerElement;
+}
 export interface PdsDropdownMenuItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPdsDropdownMenuItemElement;
@@ -2804,6 +2878,57 @@ declare global {
         prototype: HTMLPdsDividerElement;
         new (): HTMLPdsDividerElement;
     };
+    interface HTMLPdsDrawerElementEventMap {
+        "pdsDrawerOpen": void;
+        "pdsDrawerClose": void;
+    }
+    /**
+     * A non-modal side panel composed from `pds-modal`.
+     * Unlike `pds-modal`, the page stays interactive while a drawer is open: no
+     * dimming, no blur, no scroll lock, no click blocking. `pds-drawer` renders a
+     * `pds-modal` internally with `disableTopLayer` always on and its backdrop
+     * suppressed, and adds the edge, width and dismiss behavior a side panel
+     * needs on top. It does not reimplement focus, Escape or dialog semantics —
+     * those come from `pds-modal` unchanged.
+     */
+    interface HTMLPdsDrawerElement extends Components.PdsDrawer, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPdsDrawerElementEventMap>(type: K, listener: (this: HTMLPdsDrawerElement, ev: PdsDrawerCustomEvent<HTMLPdsDrawerElementEventMap[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 HTMLPdsDrawerElementEventMap>(type: K, listener: (this: HTMLPdsDrawerElement, ev: PdsDrawerCustomEvent<HTMLPdsDrawerElementEventMap[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 HTMLPdsDrawerElement: {
+        prototype: HTMLPdsDrawerElement;
+        new (): HTMLPdsDrawerElement;
+    };
+    /**
+     * Fills the drawer panel's height by default — unlike `pds-modal-content`,
+     * which caps itself against the viewport for a centered, possibly-shorter
+     * modal, a drawer panel is already edge-to-edge, so its content can simply
+     * flex to fill whatever space the header and footer leave.
+     */
+    interface HTMLPdsDrawerContentElement extends Components.PdsDrawerContent, HTMLStencilElement {
+    }
+    var HTMLPdsDrawerContentElement: {
+        prototype: HTMLPdsDrawerContentElement;
+        new (): HTMLPdsDrawerContentElement;
+    };
+    interface HTMLPdsDrawerFooterElement extends Components.PdsDrawerFooter, HTMLStencilElement {
+    }
+    var HTMLPdsDrawerFooterElement: {
+        prototype: HTMLPdsDrawerFooterElement;
+        new (): HTMLPdsDrawerFooterElement;
+    };
+    interface HTMLPdsDrawerHeaderElement extends Components.PdsDrawerHeader, HTMLStencilElement {
+    }
+    var HTMLPdsDrawerHeaderElement: {
+        prototype: HTMLPdsDrawerHeaderElement;
+        new (): HTMLPdsDrawerHeaderElement;
+    };
     interface HTMLPdsDropdownMenuElement extends Components.PdsDropdownMenu, HTMLStencilElement {
     }
     var HTMLPdsDropdownMenuElement: {
@@ -3262,6 +3387,10 @@ declare global {
         "pds-container": HTMLPdsContainerElement;
         "pds-copytext": HTMLPdsCopytextElement;
         "pds-divider": HTMLPdsDividerElement;
+        "pds-drawer": HTMLPdsDrawerElement;
+        "pds-drawer-content": HTMLPdsDrawerContentElement;
+        "pds-drawer-footer": HTMLPdsDrawerFooterElement;
+        "pds-drawer-header": HTMLPdsDrawerHeaderElement;
         "pds-dropdown-menu": HTMLPdsDropdownMenuElement;
         "pds-dropdown-menu-item": HTMLPdsDropdownMenuItemElement;
         "pds-dropdown-menu-separator": HTMLPdsDropdownMenuSeparatorElement;
@@ -4185,10 +4314,18 @@ declare namespace LocalJSX {
           * @defaultValue false
          */
         "dot"?: boolean;
+        /**
+          * Sets the dot color. Accepts a sentiment name other than `brand` (e.g. `success`), a color token, or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Defaults to the dot color of the chip's sentiment. Only applies when `dot` is set.
+         */
+        "dotColor"?: string;
         /**
           * The name of the icon to display before the chip text.
          */
         "icon"?: string;
+        /**
+          * Sets the icon color. Accepts a sentiment name other than `brand` (e.g. `success`), a color token, or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Defaults to the chip's text color. Only applies when `icon` is set.
+         */
+        "iconColor"?: string;
         /**
           * Sets the maximum width of the chip, truncating the label with an ellipsis when it overflows. Accepts any CSS length (e.g. '200px', '20ch'). The slot is documented as label text — slotting richer markup may not truncate the way you expect.
          */
@@ -4455,6 +4592,71 @@ declare namespace LocalJSX {
          */
         "vertical"?: boolean;
     }
+    /**
+     * A non-modal side panel composed from `pds-modal`.
+     * Unlike `pds-modal`, the page stays interactive while a drawer is open: no
+     * dimming, no blur, no scroll lock, no click blocking. `pds-drawer` renders a
+     * `pds-modal` internally with `disableTopLayer` always on and its backdrop
+     * suppressed, and adds the edge, width and dismiss behavior a side panel
+     * needs on top. It does not reimplement focus, Escape or dialog semantics —
+     * those come from `pds-modal` unchanged.
+     */
+    interface PdsDrawer {
+        /**
+          * A unique identifier used for the underlying component `id` attribute.
+         */
+        "componentId"?: string;
+        /**
+          * Whether to move focus into the drawer when it opens. `auto` is right for a drawer opened by a direct user action (a click, a deep link the user just navigated to). Set to `none` for a drawer that can open from a background event while the user is mid-task elsewhere on the page — moving focus there would interrupt them, and the page stays live under a non-modal drawer, so it is a genuine data-entry risk, not just an annoyance.
+          * @default 'auto'
+         */
+        "initialFocus"?: 'auto' | 'none';
+        /**
+          * Whether the drawer can be dismissed with a pointerdown outside it. Replaces `pds-modal`'s `backdropDismiss` — there is no backdrop to click. This also gates Escape, matching how `backdropDismiss` gates Escape on `pds-modal` today: setting this to `false` means the close button is the only way out.  A trigger outside the drawer should only ever set `open` to `true` and leave closing to the drawer itself. A toggle-style trigger (`open = !open`) fights light dismiss: clicking it while open closes the drawer on `pointerdown`, then the trigger's own click handler re-opens it.
+          * @default true
+         */
+        "lightDismiss"?: boolean;
+        /**
+          * Emitted when the drawer is closed
+         */
+        "onPdsDrawerClose"?: (event: PdsDrawerCustomEvent<void>) => void;
+        /**
+          * Emitted when the drawer is opened
+         */
+        "onPdsDrawerOpen"?: (event: PdsDrawerCustomEvent<void>) => void;
+        /**
+          * Whether the drawer is open
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * Whether the drawer content should be scrollable
+          * @default true
+         */
+        "scrollable"?: boolean;
+        /**
+          * Which edge of the viewport the drawer is docked to. Logical, so this is free under RTL — `end` is the inline-end edge regardless of direction.
+          * @default 'end'
+         */
+        "side"?: 'start' | 'end';
+        /**
+          * The drawer's width.
+          * @default 'md'
+         */
+        "size"?: 'sm' | 'md';
+    }
+    /**
+     * Fills the drawer panel's height by default — unlike `pds-modal-content`,
+     * which caps itself against the viewport for a centered, possibly-shorter
+     * modal, a drawer panel is already edge-to-edge, so its content can simply
+     * flex to fill whatever space the header and footer leave.
+     */
+    interface PdsDrawerContent {
+    }
+    interface PdsDrawerFooter {
+    }
+    interface PdsDrawerHeader {
+    }
     interface PdsDropdownMenu {
         /**
           * A unique identifier used for the underlying component `id` attribute.
@@ -4828,6 +5030,11 @@ declare namespace LocalJSX {
           * A unique identifier used for the underlying component `id` attribute.
          */
         "componentId"?: string;
+        /**
+          * Whether to skip moving focus into the modal when it opens — both our own `setInitialFocus()` and the browser's native "dialog focusing steps", which move focus into the dialog as soon as `show()`/`showModal()` is called regardless of application code. Focus return on close is unaffected either way. For a modal opened by something other than a direct user click — a redirect, a deep link, a background event — stealing focus on open can interrupt whatever the user was already doing. Default `false` preserves today's behavior for every existing consumer.
+          * @default false
+         */
+        "disableInitialFocus"?: boolean;
         /**
           * Whether the modal opens outside the browser top layer as a non-modal dialog. When `true` it opens with `dialog.show()` instead of `dialog.showModal()`, so overlays rendered elsewhere in the DOM (file pickers, editor menus) can display above it via `z-index`. The page is not made inert and focus is not trapped in this mode. Read when the modal opens; changing it while the modal is open is not supported.
           * @default false
@@ -4852,10 +5059,10 @@ declare namespace LocalJSX {
          */
         "scrollable"?: boolean;
         /**
-          * The size of the modal
+          * The size of the modal. Can be a predefined value ('sm', 'md', 'lg', 'fullscreen') or a custom max-width as a CSS length (e.g., '1250px', '80vw'). A custom width stays fluid below that size. A value that is neither falls back to 'md'.
           * @default 'md'
          */
-        "size"?: 'sm' | 'md' | 'lg' | 'fullscreen';
+        "size"?: ModalSizeType | (string & Record<never, never>);
     }
     interface PdsModalContent {
         /**
@@ -5589,7 +5796,7 @@ declare namespace LocalJSX {
          */
         "cellAlign"?: 'start' | 'center' | 'end' | 'justify';
         /**
-          * Truncates content to a max width and adds an ellipsis. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: When truncate is enabled, the element automatically receives tabindex="0" for keyboard accessibility.
+          * Truncates content to a max width and adds an ellipsis. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: While the content is overflowing, the cell receives tabindex="0" so the tooltip can be reached by keyboard. Content that fits is left out of the tab order.
          */
         "truncate"?: boolean;
     }
@@ -5727,7 +5934,7 @@ declare namespace LocalJSX {
     | 'strong'
     | 'em';
         /**
-          * If set or `true`, the text will be truncated. Must add a `width` to the element. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: When truncate is enabled, the element automatically receives tabindex="0" for keyboard accessibility.
+          * If set or `true`, the text will be truncated. Must add a `width` to the element. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: While the text is overflowing, the element receives tabindex="0" so the tooltip can be reached by keyboard. Text that fits is left out of the tab order.
          */
         "truncate"?: boolean;
         /**
@@ -6111,7 +6318,9 @@ declare namespace LocalJSX {
     interface PdsChipAttributes {
         "componentId": string;
         "dot": boolean;
+        "dotColor": string;
         "icon": string;
+        "iconColor": string;
         "size": ChipSizeType;
         "sentiment": ChipSentimentType;
         "variant": ChipVariantType;
@@ -6171,6 +6380,15 @@ declare namespace LocalJSX {
         "offset": 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
         "vertical": boolean;
     }
+    interface PdsDrawerAttributes {
+        "componentId": string;
+        "open": boolean;
+        "side": 'start' | 'end';
+        "size": 'sm' | 'md';
+        "scrollable": boolean;
+        "lightDismiss": boolean;
+        "initialFocus": 'auto' | 'none';
+    }
     interface PdsDropdownMenuAttributes {
         "componentId": string;
         "placement": PlacementType;
@@ -6266,9 +6484,10 @@ declare namespace LocalJSX {
         "backdropDismiss": boolean;
         "componentId": string;
         "open": boolean;
-        "size": 'sm' | 'md' | 'lg' | 'fullscreen';
+        "size": ModalSizeType | (string & Record<never, never>);
         "scrollable": boolean;
         "disableTopLayer": boolean;
+        "disableInitialFocus": boolean;
     }
     interface PdsModalContentAttributes {
         "border": 'none' | 'both' | 'top' | 'bottom';
@@ -6539,6 +6758,10 @@ declare namespace LocalJSX {
         "pds-container": Omit<PdsContainer, keyof PdsContainerAttributes> & { [K in keyof PdsContainer & keyof PdsContainerAttributes]?: PdsContainer[K] } & { [K in keyof PdsContainer & keyof PdsContainerAttributes as `attr:${K}`]?: PdsContainerAttributes[K] } & { [K in keyof PdsContainer & keyof PdsContainerAttributes as `prop:${K}`]?: PdsContainer[K] };
         "pds-copytext": Omit<PdsCopytext, keyof PdsCopytextAttributes> & { [K in keyof PdsCopytext & keyof PdsCopytextAttributes]?: PdsCopytext[K] } & { [K in keyof PdsCopytext & keyof PdsCopytextAttributes as `attr:${K}`]?: PdsCopytextAttributes[K] } & { [K in keyof PdsCopytext & keyof PdsCopytextAttributes as `prop:${K}`]?: PdsCopytext[K] } & OneOf<"value", PdsCopytext["value"], PdsCopytextAttributes["value"]>;
         "pds-divider": Omit<PdsDivider, keyof PdsDividerAttributes> & { [K in keyof PdsDivider & keyof PdsDividerAttributes]?: PdsDivider[K] } & { [K in keyof PdsDivider & keyof PdsDividerAttributes as `attr:${K}`]?: PdsDividerAttributes[K] } & { [K in keyof PdsDivider & keyof PdsDividerAttributes as `prop:${K}`]?: PdsDivider[K] };
+        "pds-drawer": Omit<PdsDrawer, keyof PdsDrawerAttributes> & { [K in keyof PdsDrawer & keyof PdsDrawerAttributes]?: PdsDrawer[K] } & { [K in keyof PdsDrawer & keyof PdsDrawerAttributes as `attr:${K}`]?: PdsDrawerAttributes[K] } & { [K in keyof PdsDrawer & keyof PdsDrawerAttributes as `prop:${K}`]?: PdsDrawer[K] };
+        "pds-drawer-content": PdsDrawerContent;
+        "pds-drawer-footer": PdsDrawerFooter;
+        "pds-drawer-header": PdsDrawerHeader;
         "pds-dropdown-menu": Omit<PdsDropdownMenu, keyof PdsDropdownMenuAttributes> & { [K in keyof PdsDropdownMenu & keyof PdsDropdownMenuAttributes]?: PdsDropdownMenu[K] } & { [K in keyof PdsDropdownMenu & keyof PdsDropdownMenuAttributes as `attr:${K}`]?: PdsDropdownMenuAttributes[K] } & { [K in keyof PdsDropdownMenu & keyof PdsDropdownMenuAttributes as `prop:${K}`]?: PdsDropdownMenu[K] };
         "pds-dropdown-menu-item": Omit<PdsDropdownMenuItem, keyof PdsDropdownMenuItemAttributes> & { [K in keyof PdsDropdownMenuItem & keyof PdsDropdownMenuItemAttributes]?: PdsDropdownMenuItem[K] } & { [K in keyof PdsDropdownMenuItem & keyof PdsDropdownMenuItemAttributes as `attr:${K}`]?: PdsDropdownMenuItemAttributes[K] } & { [K in keyof PdsDropdownMenuItem & keyof PdsDropdownMenuItemAttributes as `prop:${K}`]?: PdsDropdownMenuItem[K] };
         "pds-dropdown-menu-separator": Omit<PdsDropdownMenuSeparator, keyof PdsDropdownMenuSeparatorAttributes> & { [K in keyof PdsDropdownMenuSeparator & keyof PdsDropdownMenuSeparatorAttributes]?: PdsDropdownMenuSeparator[K] } & { [K in keyof PdsDropdownMenuSeparator & keyof PdsDropdownMenuSeparatorAttributes as `attr:${K}`]?: PdsDropdownMenuSeparatorAttributes[K] } & { [K in keyof PdsDropdownMenuSeparator & keyof PdsDropdownMenuSeparatorAttributes as `prop:${K}`]?: PdsDropdownMenuSeparator[K] };
@@ -6598,6 +6821,25 @@ declare module "@stencil/core" {
             "pds-container": LocalJSX.IntrinsicElements["pds-container"] & JSXBase.HTMLAttributes<HTMLPdsContainerElement>;
             "pds-copytext": LocalJSX.IntrinsicElements["pds-copytext"] & JSXBase.HTMLAttributes<HTMLPdsCopytextElement>;
             "pds-divider": LocalJSX.IntrinsicElements["pds-divider"] & JSXBase.HTMLAttributes<HTMLPdsDividerElement>;
+            /**
+             * A non-modal side panel composed from `pds-modal`.
+             * Unlike `pds-modal`, the page stays interactive while a drawer is open: no
+             * dimming, no blur, no scroll lock, no click blocking. `pds-drawer` renders a
+             * `pds-modal` internally with `disableTopLayer` always on and its backdrop
+             * suppressed, and adds the edge, width and dismiss behavior a side panel
+             * needs on top. It does not reimplement focus, Escape or dialog semantics —
+             * those come from `pds-modal` unchanged.
+             */
+            "pds-drawer": LocalJSX.IntrinsicElements["pds-drawer"] & JSXBase.HTMLAttributes<HTMLPdsDrawerElement>;
+            /**
+             * Fills the drawer panel's height by default — unlike `pds-modal-content`,
+             * which caps itself against the viewport for a centered, possibly-shorter
+             * modal, a drawer panel is already edge-to-edge, so its content can simply
+             * flex to fill whatever space the header and footer leave.
+             */
+            "pds-drawer-content": LocalJSX.IntrinsicElements["pds-drawer-content"] & JSXBase.HTMLAttributes<HTMLPdsDrawerContentElement>;
+            "pds-drawer-footer": LocalJSX.IntrinsicElements["pds-drawer-footer"] & JSXBase.HTMLAttributes<HTMLPdsDrawerFooterElement>;
+            "pds-drawer-header": LocalJSX.IntrinsicElements["pds-drawer-header"] & JSXBase.HTMLAttributes<HTMLPdsDrawerHeaderElement>;
             "pds-dropdown-menu": LocalJSX.IntrinsicElements["pds-dropdown-menu"] & JSXBase.HTMLAttributes<HTMLPdsDropdownMenuElement>;
             "pds-dropdown-menu-item": LocalJSX.IntrinsicElements["pds-dropdown-menu-item"] & JSXBase.HTMLAttributes<HTMLPdsDropdownMenuItemElement>;
             "pds-dropdown-menu-separator": LocalJSX.IntrinsicElements["pds-dropdown-menu-separator"] & JSXBase.HTMLAttributes<HTMLPdsDropdownMenuSeparatorElement>;

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
+export { TEXT_SIZES } from './utils/types';
 import '@pine-ds/icons';

package/dist/types/utils/test/reduced-motion.d.ts

@@ -0,0 +1,30 @@
+import type { E2EPage } from '@stencil/core/testing';
+/**
+ * Asserts that an element's `transition-duration` collapses to `0s` once the
+ * page emulates `prefers-reduced-motion: reduce`.
+ *
+ * This is the runtime counterpart to the `pine-design-system/no-hardcoded-motion`
+ * Stylelint rule: the rule can only see a component's *source* — that it
+ * references `var(--pine-motion-duration-*)` somewhere. It can't see whether
+ * that reference actually reaches the declaration that runs at render time
+ * (a `var()` could be shadowed, overridden, or simply never wired up right).
+ * This closes that gap by reading the real computed style before and after
+ * emulating the preference, so a target that *doesn't* zero out fails loudly
+ * here even if it fooled the lint rule.
+ *
+ * Usage:
+ *
+ * ```ts
+ * const page = await newE2EPage();
+ * await page.setContent('<pds-switch></pds-switch>');
+ * await expectRespectsReducedMotion(page, 'pds-switch', 'input', 'after');
+ * ```
+ *
+ * @param page Stencil E2E page.
+ * @param hostTag Custom element tag hosting the shadow root to read from.
+ * @param innerSelector Selector for the element within `hostTag`'s shadow
+ *   root, or `null`/omitted to read `hostTag` itself.
+ * @param pseudoElement Pseudo-element to read from the target (e.g. `'after'`
+ *   for `::after`), or `null`/omitted to read the element's own style.
+ */
+export declare function expectRespectsReducedMotion(page: E2EPage, hostTag: string, innerSelector?: string | null, pseudoElement?: string | null): Promise<void>;

package/dist/types/utils/truncation-tooltip.d.ts

@@ -8,6 +8,16 @@ export interface TruncationTooltipOptions {
     getTooltipText: () => string;
     /** Tooltip placement preference (default: 'top') */
     placement?: PlacementType;
+    /**
+     * Whether to give `contentEl` a tab stop while its text is clipped (default: true).
+     *
+     * Set to `false` when `contentEl` already sits inside its own focusable
+     * control (e.g. a wrapping `<button>` or `<pds-button>`) that already
+     * receives focus and triggers this tooltip via `hostEl`'s `focusin`
+     * listener. Managing the tabindex there too would nest a second, nameless
+     * tab stop inside an already-interactive element.
+     */
+    manageTabIndex?: boolean;
 }
 /**
  * Sets up automatic tooltip behavior for a truncated element.
@@ -16,6 +26,8 @@ export interface TruncationTooltipOptions {
  * will display a tooltip showing the full text content. The tooltip is
  * rendered as a portal on document.body and positioned with Floating UI.
  *
+ * Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
+ *
  * @returns A cleanup function that removes all listeners, observers, and DOM elements.
  */
 export declare function setupTruncationTooltip(options: TruncationTooltipOptions): () => void;

package/dist/types/utils/types.d.ts

@@ -2,7 +2,8 @@ export type PlacementType = 'top-start' | 'top' | 'top-end' | 'left-start' | 'le
 export type BoxColumnType = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 export type BoxSpacingType = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '025' | '050' | '100' | '125' | '150' | '200' | '250' | '300' | '350' | '400' | '450' | '500' | '550' | '600' | '650' | '700' | '750' | '800';
 export type BoxShadowSizeType = 'none' | '050' | '100' | '150' | '200' | '300' | '400' | '500';
-export type ChipSentimentType = 'accent' | 'brand' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
+export type ChipSentimentType = 'accent' | 'brand' | 'danger' | 'info' | 'neutral' | 'solid' | 'subtle' | 'success' | 'warning';
+export type ModalSizeType = 'sm' | 'md' | 'lg' | 'fullscreen';
 export type ChipSizeType = 'sm' | 'md' | 'lg';
 export type ChipVariantType = 'text' | 'tag' | 'dropdown';
 export declare const TEXT_SIZES: readonly ["2xl", "xl", "lg", "md", "sm", "xs", "2xs", "h1", "h2", "h3", "h4", "h5", "h6"];

package/dist/types/utils/utils.d.ts

@@ -3,7 +3,15 @@ export declare const hasShadowDom: (el: Element) => boolean;
 export declare const debounceEvent: (event: EventEmitter, wait: number) => EventEmitter;
 export declare const debounce: (func: (...args: any[]) => void, wait?: number) => (...args: any[]) => any;
 /**
- * Normalizes color values to ensure consistent CSS variable usage
+ * Normalizes color values to ensure consistent CSS variable usage.
+ *
+ * This is the single low-level primitive for color-prop normalization in
+ * Pine. A component with its own semantic-keyword set (e.g. pds-chip's
+ * sentiment-to-dot-color map) should call this directly with its own
+ * `semanticMap` rather than inventing a new normalization helper. Reach for
+ * `setColor` below only when its specific text-role semantic set and
+ * `--color` output key already match what the component needs.
+ *
  * @param value - Raw token (--token), CSS variable (var(--token)), semantic name, or literal color
  * @param options.semanticMap - Optional mapping of semantic names to CSS variables
  * @returns Normalized color value or undefined for invalid inputs
@@ -11,4 +19,11 @@ export declare const debounce: (func: (...args: any[]) => void, wait?: number) =
 export declare const normalizeColorValue: (value: string | undefined, options?: {
     semanticMap?: Record<string, string>;
 }) => string | undefined;
+/**
+ * Convenience wrapper around `normalizeColorValue` for the common text-role
+ * semantic set (primary/secondary/accent/etc.), returned as a `--color`
+ * custom property. If a component needs a different semantic map or a
+ * different custom-property name (e.g. pds-chip's dot/icon-specific tokens),
+ * call `normalizeColorValue` directly instead of extending this function.
+ */
 export declare const setColor: (color: string, customColors?: Record<string, string>) => Record<string, string>;