@pine-ds/core 4.1.0 → 4.2.0

package/dist/types/components/pds-drawer/pds-drawer-content/pds-drawer-content.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+export declare class PdsDrawerContent {
+    el: HTMLPdsDrawerContentElement;
+    componentDidRender(): void;
+    render(): any;
+}

package/dist/types/components/pds-drawer/pds-drawer-footer/pds-drawer-footer.d.ts

@@ -0,0 +1,5 @@
+export declare class PdsDrawerFooter {
+    el: HTMLPdsDrawerFooterElement;
+    componentDidRender(): void;
+    render(): any;
+}

package/dist/types/components/pds-drawer/pds-drawer-header/pds-drawer-header.d.ts

@@ -0,0 +1,5 @@
+export declare class PdsDrawerHeader {
+    el: HTMLPdsDrawerHeaderElement;
+    componentDidRender(): void;
+    render(): any;
+}

package/dist/types/components/pds-drawer/pds-drawer.d.ts

@@ -0,0 +1,78 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * 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.
+ */
+export declare class PdsDrawer {
+    el: HTMLPdsDrawerElement;
+    private modalEl?;
+    componentDidRender(): void;
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Whether the drawer is open
+     * @default false
+     */
+    open: 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';
+    /**
+     * Whether the drawer content should be scrollable
+     * @default true
+     */
+    scrollable: boolean;
+    /**
+     * 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 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';
+    /**
+     * Emitted when the drawer is opened
+     */
+    pdsDrawerOpen: EventEmitter<void>;
+    /**
+     * Emitted when the drawer is closed
+     */
+    pdsDrawerClose: EventEmitter<void>;
+    handleModalClose(e: CustomEvent<void>): void;
+    handleModalOpen(e: CustomEvent<void>): void;
+    handleOutsidePointerDown(e: PointerEvent): void;
+    render(): any;
+}

package/dist/types/components/pds-modal/pds-modal.d.ts

@@ -38,6 +38,19 @@ export declare class PdsModal {
      * @default false
      */
     disableTopLayer: boolean;
+    /**
+     * 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;
     /**
      * Emitted when the modal is opened
      */
@@ -79,6 +92,31 @@ export declare class PdsModal {
      * Gets the z-index of a modal's backdrop element
      */
     private getBackdropZIndex;
+    /**
+     * Whether `active` sits inside a surface actually stacked above this modal.
+     *
+     * Used to decide whether an Escape keypress belongs to that surface instead
+     * of this modal. Focus being merely *outside* this modal is not enough on
+     * its own: in `disableTopLayer` mode the page stays interactive (that's the
+     * point of a non-modal usage like a drawer), so focus will routinely be on
+     * ordinary page content while the modal is open, and that must not be
+     * mistaken for "an overlay owns Escape."
+     *
+     * Two ways a surface can be above: it is itself promoted to the browser's
+     * top layer (a regular `showModal()` dialog, which paints above everything
+     * outside the top layer regardless of z-index — a sibling pds-modal opened
+     * over a `disableTopLayer` drawer typically shares the exact same z-index
+     * token, so a numeric comparison alone would miss it), or it has a higher
+     * z-index than this modal's own backdrop (a `disableTopLayer` overlay, or
+     * anything else deliberately raised above it).
+     *
+     * `topLayerDialog` / `topLayerDialogWasModal` come pre-snapshotted from the
+     * keydown event (see handleKeyDown) rather than being re-derived here: by
+     * the time a later sibling modal's listener runs, an earlier one may have
+     * already closed itself, which clears `:modal` — reading it live here would
+     * lose that evidence depending on listener order.
+     */
+    private isStackedAboveOverlay;
     /**
      * Checks if this modal is the innermost (highest z-index) modal
      */

package/dist/types/components/pds-table/pds-table-cell/pds-table-cell.d.ts

@@ -17,7 +17,8 @@ export declare class PdsTableCell {
     /**
      * 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.
+     * 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;
     handleTruncateChange(newValue: boolean): void;

package/dist/types/components/pds-text/pds-text.d.ts

@@ -41,7 +41,8 @@ export declare class PdsText {
     /**
      * 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.
+     * 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;
     handleTruncateChange(newValue: boolean): void;

package/dist/types/components.d.ts

@@ -1149,6 +1149,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 +1555,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
@@ -2211,7 +2273,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 +2419,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 +2624,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 +2870,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 +3379,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;
@@ -4455,6 +4576,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 +5014,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
@@ -5589,7 +5780,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 +5918,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;
         /**
@@ -6171,6 +6362,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;
@@ -6269,6 +6469,7 @@ declare namespace LocalJSX {
         "size": 'sm' | 'md' | 'lg' | 'fullscreen';
         "scrollable": boolean;
         "disableTopLayer": boolean;
+        "disableInitialFocus": boolean;
     }
     interface PdsModalContentAttributes {
         "border": 'none' | 'both' | 'top' | 'bottom';
@@ -6539,6 +6740,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 +6803,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;