@pine-ds/core 4.11.0 → 4.12.0

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

@@ -1,6 +1,6 @@
 /**
  * @part link - Link element styles.
- * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
+ * @slot (default) - Text content placed between the opening and closing tags. If the slot is empty (whitespace counts as content), the **href** will be used as a fallback.
  */
 export declare class PdsLink {
     /**
@@ -25,24 +25,24 @@ export declare class PdsLink {
      */
     componentId: string;
     /**
-     * Determines whether the link should open in a new tab.
+     * Shows the external-link (launch) icon. Opens in a new tab unless `target` says otherwise.
      * @defaultValue false
-     * @deprecated Consider using the `target` prop for more control. This prop will be maintained for backward compatibility.
      */
     external: boolean;
     /**
      * Accessible label for the icon that `external` shows, appended to the
-     * link's name. It isn't announced when `target` keeps the link in the same
-     * tab. Pass a translated string to localize it; defaults to English. Pass an
+     * link's name. It isn't announced when `target` is anything other than
+     * `_blank`. Pass a translated string to localize it; defaults to English. Pass an
      * empty string to make the icon decorative.
      * @defaultValue '(opens in a new tab)'
      */
     externalLabel?: string;
     /**
-     * Specifies where to open the linked document.
+     * Specifies where to open the linked document. Overrides the new-tab
+     * default of `external`; the icon still shows.
      * @defaultValue undefined
      * @example
-     * <pds-link href="https://example.com" target="_blank">Opens in new tab</pds-link>
+     * <pds-link href="/dashboard" target="_top">Opens in the top-level frame</pds-link>
      */
     target?: '_blank' | '_self' | '_parent' | '_top';
     /**
@@ -56,7 +56,7 @@ export declare class PdsLink {
      */
     fontSize: 'sm' | 'md' | 'lg';
     /**
-     * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.
+     * The hyperlink's destination URL. If the default slot is empty (whitespace counts as content), the href will be used as the link text.
      */
     href: string;
     /**

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

@@ -1,6 +1,6 @@
 /**
  * @part loader-svg - Exposes the spinner SVG element for color customization.
- * @slot label - Default slot for Loader label text.
+ * @slot label - Label text. Defaults to "Loading...". Text outside this slot isn't shown or read.
  */
 export declare class PdsLoader {
     el: HTMLPdsLoaderElement;
@@ -16,7 +16,8 @@ export declare class PdsLoader {
      */
     showLabel?: boolean;
     /**
-     * Sets the size of the spinner loader. Value can be preset or custom.
+     * Sets the size of the spinner loader: `xs` (24px), `sm` (32px), `md` (48px), `lg` (64px), `xl` (80px),
+     * or a custom CSS length such as `128px`. The `typing` variant ignores it.
      */
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
     /**

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

@@ -1,4 +1,5 @@
 /**
+ * Holds the modal's actions. It adds no padding or layout, so wrap its content in a `pds-box` with `padding="md"`.
  * @lightDom renders-markup
  */
 export declare class PdsModalFooter {

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

@@ -1,4 +1,5 @@
 /**
+ * Holds the modal's title and close control. It adds no padding or layout, so wrap its content in a `pds-box` with `padding="md"`.
  * @lightDom renders-markup
  */
 export declare class PdsModalHeader {

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

@@ -2,6 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import type { ModalSizeType } from "../../utils/types";
 /**
  * @lightDom renders-markup
+ * @part modal - The panel inside the dialog that holds the modal's content. `pds-modal` has no shadow root, so `::part(modal)` doesn't match it; select it with `pds-modal [part="modal"]` instead.
  */
 export declare class PdsModal {
     private modalRef;
@@ -46,15 +47,12 @@ export declare class PdsModal {
      */
     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.
+     * Whether to skip moving focus into the modal when it opens. Set it for a
+     * modal that can open from a background event while the user is mid-task
+     * elsewhere on the page, where moving focus would interrupt them. Pair it
+     * with `disableTopLayer`: in the top layer the rest of the page is inert, so
+     * focus can't stay there. On close, focus moves back only if nothing outside
+     * the modal has taken it.
      * @default false
      */
     disableInitialFocus: boolean;

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

@@ -12,6 +12,8 @@ import type { MultiselectOption, MultiselectChangeEventDetail, MultiselectSearch
  */
 export declare class PdsMultiselect {
     private triggerEl?;
+    private triggerTextTooltip;
+    private selectedItemTooltips;
     private pillInlineTriggerEl?;
     private searchInputEl?;
     private containerEl?;
@@ -275,15 +277,14 @@ export declare class PdsMultiselect {
      */
     pdsMultiselectCreate: EventEmitter<MultiselectCreateEventDetail>;
     /**
-     * Emitted when the dropdown is dismissed via Escape key or click outside.
+     * Emitted when the dropdown is dismissed with the Escape key, or by focus moving outside the
+     * component, such as with a click elsewhere on the page.
      *
-     * This event fires only when the user explicitly dismisses the panel without making a selection:
-     * - ✅ Fires: Pressing Escape key while dropdown is open
-     * - ✅ Fires: Clicking outside the component while dropdown is open
-     * - ❌ Does NOT fire: When panel closes due to selection (including when `closePanelOnSelect` is true)
-     * - ❌ Does NOT fire: When panel closes programmatically via `closeDropdown()`
-     *
-     * Equivalent to Sage's `onEscapeHook`. Use this to restore parent UI state or run cleanup when the user cancels their interaction.
+     * It doesn't fire when the panel closes any other way: from a selection (including with
+     * `closePanelOnSelect`) or an option action, a click on the trigger, Tab, or the multiselect
+     * becoming disabled. Safari doesn't focus a clicked button, so there a click on the trigger while
+     * the panel is open fires this event, and the panel opens again.
+     * Use it to restore parent UI state or run cleanup when the user cancels.
      */
     pdsMultiselectDismiss: EventEmitter<void>;
     /**
@@ -300,6 +301,8 @@ export declare class PdsMultiselect {
     componentWillLoad(): void;
     componentDidLoad(): void;
     private setupSlotChangeListener;
+    componentDidRender(): void;
+    private syncTruncationTooltips;
     disconnectedCallback(): void;
     protected setupDebounce(): void;
     protected valueChanged(newValue: string[] | string): void;
@@ -348,6 +351,9 @@ export declare class PdsMultiselect {
     private handleTriggerKeyDown;
     private handleSearchInputChange;
     private handleSearchInputKeyDown;
+    private handleSelectedListKeyDown;
+    private tabPastOptions;
+    private getSelectedItemTabbables;
     private handleFooterKeyDown;
     private getFooterTabbables;
     private isCaretAtEndOfSearch;

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

@@ -128,8 +128,8 @@ export declare class PdsPopover {
      */
     componentId: string;
     /**
-     * Sets the maximum width of the popover content
-     * @defaultValue 352
+     * Sets the maximum width of the popover, in pixels, including its padding.
+     * @defaultValue 400
      */
     maxWidth?: number;
     /**

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

@@ -14,7 +14,7 @@ export declare class PdsProgress {
     componentId: string;
     /**
     * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
-    * @defaultValue 'var(--pine-color-blue-300)'
+    * @defaultValue 'var(--pine-color-primary)'
     */
     fillColor: string;
     /**
@@ -22,7 +22,7 @@ export declare class PdsProgress {
     */
     label: string;
     /**
-    * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.
+    * Sets the progress fill percentage (0–100). Shown as text when `show-percent` is set.
     * @defaultValue 0
     */
     percent: number;

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

@@ -10,7 +10,7 @@ export declare class PdsRadio {
     private hostKeeper;
     private _hasImage;
     /**
-     * Determines whether or not the radio is checked.
+     * Determines whether or not the radio is checked. It keeps the value you set and doesn't change when the user picks a radio.
      * @defaultValue false
      */
     checked: boolean;
@@ -24,11 +24,11 @@ export declare class PdsRadio {
      */
     disabled: boolean;
     /**
-     * Displays error message text describing an invalid state.
+     * Displays an error message below the radio. It becomes the radio's accessible description only while `invalid` is set.
      */
     errorMessage: string;
     /**
-     * Displays helper message text below radio.
+     * Displays a message or hint below the radio.
      */
     helperMessage: string;
     /**
@@ -42,7 +42,7 @@ export declare class PdsRadio {
    */
     invalid: boolean;
     /**
-     * String used for label text next to radio.
+     * Text to be displayed as the radio label.
      */
     label: string;
     /**
@@ -68,7 +68,8 @@ export declare class PdsRadio {
      */
     variant: 'default' | 'pill';
     /**
-     * Emits a boolean indicating whether the radio is currently checked or unchecked.
+     * Emitted with `true` when the user checks the radio, by a click or an arrow key. The radio is `event.target`, so read its `value` there.
+     * Not emitted when picking another radio unchecks this one. Not emitted inside `pds-radio-group` either; listen for `pdsRadioGroupChange` there.
      */
     pdsRadioChange: EventEmitter<boolean>;
     private handleRadioChange;

package/dist/types/components/pds-radio-group/pds-radio-group.d.ts

@@ -21,11 +21,11 @@ export declare class PdsRadioGroup {
      */
     direction: 'row' | 'column';
     /**
-     * Displays error message text describing an invalid state for the entire group.
+     * Displays an error message below the radio group. It's part of the group's accessible description, with or without `invalid`.
      */
     errorMessage: string;
     /**
-     * Displays helper message text below the radio group.
+     * Displays a message or hint below the radio group.
      */
     helperMessage: string;
     /**
@@ -44,7 +44,7 @@ export declare class PdsRadioGroup {
      */
     invalid: boolean;
     /**
-     * String used for group label/heading.
+     * Text to be displayed as the radio group label. It also names the group, unless you set `aria-label` or `aria-labelledby` on it.
      */
     groupLabel: string;
     /**
@@ -58,7 +58,8 @@ export declare class PdsRadioGroup {
      */
     required: boolean;
     /**
-     * Emits when a radio in the group is selected, providing the selected value and component ID.
+     * Emitted when the user checks a radio in the group, by a click or an arrow key. `detail` has that radio's `value`
+     * and `componentId`, and `checked`, which is always `true`.
      */
     pdsRadioGroupChange: EventEmitter<RadioGroupChangeEventDetail>;
     handlePropsChange(): void;

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

@@ -1,6 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
+ * @slot (default) - The `option` and `optgroup` elements to choose from. Other elements are ignored.
  * @slot action - Content to be displayed in the label area, typically for help icons or links
+ * @part action - Exposes the wrapper around the `action` slot for styling. Appears only when the `action` slot has content.
+ * @part select - Exposes the native `select` element for styling.
  */
 export declare class PdsSelect {
     private selectEl;
@@ -26,7 +29,7 @@ export declare class PdsSelect {
      */
     disabled: boolean;
     /**
-     * Displays error message text describing an invalid state.
+     * Displays an error message below the select and marks the select as invalid, with or without `invalid`.
      */
     errorMessage: string;
     /**
@@ -35,7 +38,7 @@ export declare class PdsSelect {
      */
     hideLabel: boolean;
     /**
-     * Displays helper message text below select.
+     * Displays a message or hint below the select.
      */
     helperMessage: string;
     /**
@@ -70,7 +73,10 @@ export declare class PdsSelect {
      */
     value?: string | string[];
     /**
-     * Emitted when the select value changes.
+     * Emitted when the user changes the selection. `detail` is the native `change` event, so read the new value
+     * from the select's `value`: a string, or an array with `multiple`.
+     *
+     * This event will not emit when programmatically setting the `value` property.
      */
     pdsSelectChange: EventEmitter<InputEvent>;
     /**

package/dist/types/components/pds-sortable/pds-sortable-item/pds-sortable-item.d.ts

@@ -1,5 +1,5 @@
 /**
- * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.
+ * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered when `enable-actions` is set.
  * @lightDom renders-markup
  */
 export declare class PdsSortableItem {
@@ -18,10 +18,16 @@ export declare class PdsSortableItem {
      */
     componentId: string;
     /**
-     * Determines whether `sortable-item` should have a handle.
+     * Determines whether the reorder handle is shown. The handle itself renders whenever the list
+     * is reorderable, regardless of this prop; without it, the handle is visually hidden but still
+     * reachable from the keyboard.
      * @defaultValue false
      */
     showHandle: boolean;
+    /**
+     * Name of the item in its reorder handle's label and in the reorder announcements. Pass a translated string to localize it; defaults to the item's text content.
+     */
+    itemLabel?: string;
     componentDidRender(): void;
     componentWillRender(): void;
     render(): any;

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

@@ -6,7 +6,12 @@ import type { SortableEvent } from 'sortablejs';
 export declare class PdsSortable {
     el: HTMLPdsSortableElement;
     /**
-     * Event emitted when a sortable item is moved.
+     * Event emitted when a sortable item is moved, by dragging or from the keyboard. A keyboard move
+     * carries the same fields as a drag (`item`, `from`, `to`, `oldIndex`, `newIndex`,
+     * `oldDraggableIndex`, `newDraggableIndex`), with the event that ended the move as
+     * `originalEvent` -- a `KeyboardEvent` for Space or Enter, but a `FocusEvent`, `PointerEvent` or
+     * `MouseEvent` when the drop instead comes from focus leaving the row, a drag taking over, or a
+     * screen reader's browse-mode click.
      */
     pdsSortableItemMoved: EventEmitter<SortableEvent>;
     /**
@@ -31,12 +36,88 @@ export declare class PdsSortable {
      * Determines the grabbable area for the `pds-sortable-item`.
      */
     handleType: 'handle' | 'row';
+    /**
+     * Accessible label for each item's reorder handle, the button the keyboard reorders with. Pass a translated string to localize it; `{item}` is interpolated.
+     * @defaultValue 'Reorder {item}'
+     */
+    handleLabel: string;
+    /**
+     * Screen-reader announcement when an item is picked up from the keyboard. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+     * @defaultValue '{item}, picked up. Position {position} of {total}. Press the arrow keys to move, Space or Enter to drop, Escape to cancel.'
+     */
+    itemPickedUpLabel: string;
+    /**
+     * Screen-reader announcement when a picked-up item is moved. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+     * @defaultValue '{item}, moved to position {position} of {total}'
+     */
+    itemMovedLabel: string;
+    /**
+     * Screen-reader announcement when a picked-up item is dropped. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+     * @defaultValue '{item}, dropped at position {position} of {total}'
+     */
+    itemDroppedLabel: string;
+    /**
+     * Screen-reader announcement when a keyboard reorder is canceled and the item goes back. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+     * @defaultValue 'Reorder canceled. {item} returned to position {position} of {total}'
+     */
+    reorderCanceledLabel: string;
     private sortableInstance;
+    /** The item picked up from the keyboard, and where it started. */
+    private grabbed;
+    private liveRegion;
     handleDisabledChange(): void;
+    handleHandleTypeChange(): void;
+    updateItems(): void;
     private classNames;
     private hostKeeper;
     connectedCallback(): void;
     disconnectedCallback(): void;
     componentDidLoad(): void;
+    /** The children that can be reordered, counted as SortableJS counts them. */
+    private items;
+    /**
+     * The live region sits right after the list, not in it, so it's never counted as an item, by
+     * SortableJS or by a consumer reading the list's children, and it's still in the same modal. A
+     * morph that removes it gets it put back on the next focus.
+     */
+    private ensureLiveRegion;
+    private announce;
+    private droppedByPointerDown;
+    handlePointerDown(ev: PointerEvent): void;
+    private handleFocusIn;
+    /**
+     * Focus leaving a picked-up item drops it where it is, unless the whole window lost focus (the user
+     * switched apps), when the item stays picked up for their return. A real window blur does not move
+     * `document.activeElement` away from the handle that's losing focus (some browsers reset it to `body`
+     * instead, but never to a different element), so it's told apart from focus moving into an iframe or
+     * another embedded document that way: an iframe becomes a genuinely different active element, while a
+     * window blur leaves `activeElement` as the handle itself, `null`, or `body`.
+     */
+    private handleFocusOut;
+    /**
+     * Whether an item is picked up. One that's been taken out of the list meanwhile (a re-render, a
+     * stream update) is let go, as there's nothing left to move.
+     */
+    private isGrabbing;
+    /**
+     * Screen readers in browse mode turn Enter and Space on a button into a click with no key events,
+     * so a click that isn't from a pointer (`detail` is 0) picks up or drops too.
+     */
+    private handleClick;
+    /** The item whose handle `target` is, if it is one. */
+    private targetItem;
+    private handleKeyDown;
+    /** The item's handle, the button the keyboard reorders with. */
+    private focusTarget;
+    private indexes;
+    private pickUp;
+    /**
+     * Moves the other items around `item` rather than `item` itself, so it never leaves the DOM and
+     * keeps focus.
+     */
+    private moveTo;
+    private drop;
+    private cancel;
+    private release;
     render(): any;
 }

package/dist/types/components/pds-sortable/sortable-label.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The name a sortable item goes by in its handle's label and in reorder announcements: its
+ * `item-label`, or else its own text, leaving out the handle and the actions.
+ * @param item - A `pds-sortable-item`
+ * @returns The item's name, with whitespace collapsed
+ */
+export declare const sortableItemLabel: (item: HTMLElement) => string;

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

@@ -6,9 +6,13 @@ export declare class PdsSwitch {
     private inheritedAttributes;
     private internals?;
     private readonly _type;
+    private inputEl?;
+    private hostDescriptionObserver?;
+    private forwardsDescription;
     el: HTMLPdsSwitchElement;
     private hostKeeper;
     private hasLabelSlot;
+    private fieldsetDisabled;
     /**
      * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.
      */
@@ -42,7 +46,7 @@ export declare class PdsSwitch {
      */
     label: string;
     /**
-     * Identifies form data and unifies a group of radio inputs for toggling a single property/value.
+     * Specifies the name. Submitted with the form name/value pair when checked, or with `unchecked-value` while unchecked.
      */
     name: string;
     /**
@@ -53,17 +57,28 @@ export declare class PdsSwitch {
      * Provides input with a string submitted in form data.
      */
     value: string;
+    /**
+     * Provides a string submitted in form data under `name` while the switch is unchecked.
+     * When unset, an unchecked switch submits nothing, like a native checkbox.
+     */
+    uncheckedValue?: string;
     /**
      * Emits an event on input change.
      */
     pdsSwitchChange: EventEmitter<InputEvent>;
+    private isDisabled;
     private onSwitchUpdate;
     private switchClassNames;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    componentDidRender(): void;
     componentDidLoad(): void;
-    checkedChanged(): void;
+    syncFormValue(): void;
     private updateFormValue;
+    private formValue;
+    private checkedValue;
+    private forwardDescription;
+    private ownDescriptionId;
     formStateRestoreCallback(state: string | FormData | null): void;
     /**
      * Form Associated Custom Elements API: Called when the form is disabled

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

@@ -1,3 +1,6 @@
+/**
+ * @part body - Set on the `pds-table-body` element itself, so `::part(body)` matches it only from a shadow root that contains it. Style `pds-table-body` directly instead.
+ */
 export declare class PdsTableBody {
     render(): any;
 }

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

@@ -1,3 +1,6 @@
+/**
+ * @part cell - Set on the `pds-table-cell` element itself, so `::part(cell)` matches it only from a shadow root that contains it. Style `pds-table-cell` directly instead. In a `selectable` table, each row's selection cell sits in the row's shadow root: it has the `checkbox-cell` part when first rendered and `cell` after any re-render, so target both with `pds-table-row::part(checkbox-cell), pds-table-row::part(cell)`.
+ */
 export declare class PdsTableCell {
     hostElement: HTMLPdsTableCellElement;
     private tableRef;
@@ -13,6 +16,13 @@ export declare class PdsTableCell {
     private get needsScrollShadow();
     private setupScrollListener;
     private cleanupScrollListener;
+    /**
+     * Re-binds the scroll listener to the table's current responsive container. Called by
+     * `pds-table` after a live `responsive` toggle: the cell stays in light DOM across that change,
+     * so it never reconnects on its own and would otherwise keep listening to a container the
+     * table already replaced or removed.
+     */
+    rebindScrollListener(): Promise<void>;
     /**
      * Sets the text alignment within the cell.
      */

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

@@ -1,4 +1,8 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * @part head - Set on the `pds-table-head` element itself, so `::part(head)` matches it only from a shadow root that contains it. Style `pds-table-head` directly instead.
+ * @part select-all-checkbox - Exposes the select-all checkbox for styling. Appears only when the table is `selectable` and `disableSelectAll` isn't set.
+ */
 export declare class PdsTableHead {
     hostElement: HTMLPdsTableHeadElement;
     private tableRef;
@@ -7,7 +11,7 @@ export declare class PdsTableHead {
      */
     indeterminate?: boolean;
     /**
-    * Determines if the table row is currently selected.
+    * Determines if the select all checkbox is checked.
     * @defaultValue false
     */
     isSelected: boolean;

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

@@ -1,4 +1,8 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * @part head-cell - Set on the `pds-table-head-cell` element itself, so `::part(head-cell)` matches it only from a shadow root that contains it. Style `pds-table-head-cell` directly instead. In a `selectable` table, the select-all cell sits in `pds-table-head`'s shadow root: it has the `checkbox-cell` part when first rendered and `head-cell` after any re-render, so target both with `pds-table-head::part(checkbox-cell), pds-table-head::part(head-cell)`.
+ * @part sort-icon - Exposes the sort direction icon for styling. Appears only on a `sortable` column while it's the active sort.
+ */
 export declare class PdsTableHeadCell {
     hostElement: HTMLPdsTableHeadCellElement;
     private tableRef;
@@ -6,6 +10,7 @@ export declare class PdsTableHeadCell {
     private setupTimer;
     private setupRetries;
     private headObserver?;
+    private hasLoaded;
     /**
      * Sets the text alignment within the head cell.
      */
@@ -14,6 +19,12 @@ export declare class PdsTableHeadCell {
      * Determines whether the table column is sortable when set to `true`.
      */
     sortable: boolean;
+    /**
+     * Sets the width of the column. Accepts any CSS length (e.g. '148px', '12rem', '20%').
+     * When the table's `tableLayout` is `fixed`, the column keeps this width whatever its content.
+     * Otherwise the column is at least this wide and can grow to fit its content.
+     */
+    width?: string;
     /**
      * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.
      */
@@ -62,10 +73,19 @@ export declare class PdsTableHeadCell {
      */
     clearActiveSort(): Promise<void>;
     componentWillLoad(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
+    private setupHeadObserver;
     disconnectedCallback(): void;
     private setupScrollListener;
     private cleanupScrollListener;
+    /**
+     * Re-binds the scroll listener to the table's current responsive container. Called by
+     * `pds-table` after a live `responsive` toggle: the cell stays in light DOM across that
+     * change, so it never reconnects on its own and would otherwise keep listening to a container
+     * the table already replaced or removed.
+     */
+    rebindScrollListener(): Promise<void>;
     /**
      * Handles scroll events to update fixed column shadow state.
      * Updates the tableScrolling state to control CSS classes for fixed column shadows.
@@ -74,5 +94,6 @@ export declare class PdsTableHeadCell {
     private handleScroll;
     private toggleSort;
     private classNames;
+    private hostStyles;
     render(): any;
 }

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

@@ -1,4 +1,8 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * @part row - Set on the `pds-table-row` element itself, so `::part(row)` matches it only from a shadow root that contains it. Style `pds-table-row` directly instead.
+ * @part row-checkbox - Exposes the row's selection checkbox for styling. Appears only when the table is `selectable`.
+ */
 export declare class PdsTableRow {
     hostElement: HTMLPdsTableRowElement;
     private tableRef;