@pine-ds/core 4.10.0 → 4.12.0

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;

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

@@ -1,4 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @part responsive-container - Exposes the horizontal scroll container for styling. Appears only when `responsive` is set.
+ * @part responsive-table - Set on the `pds-table` element itself when `responsive` is set, so `::part(responsive-table)` matches it only from a shadow root that contains it. Style `pds-table` directly instead.
+ * @part responsive-wrapper - Exposes the wrapper inside the scroll container for styling. Appears only when `responsive` is set.
+ * @part scroll-shadow-left - Exposes the scroll shadow at the inline-start edge for styling. Appears only when `responsive` is set.
+ * @part scroll-shadow-right - Exposes the scroll shadow at the inline-end edge for styling. Appears only when `responsive` is set.
+ * @part table - Set on the `pds-table` element itself, so `::part(table)` matches it only from a shadow root that contains it. Style `pds-table` directly instead.
+ * @part table-inner - Exposes the inner table element around the slotted head and body for styling. Appears only when `responsive` is set.
+ */
 export declare class PdsTable {
     el: HTMLPdsTableElement;
     private scrollContainer;
@@ -6,6 +15,11 @@ export declare class PdsTable {
     private _responsiveHandleResize;
     private _responsiveResizeObserver;
     private _teardownResponsive;
+    private _fixedLayoutResizeObserver;
+    private _fixedLayoutHandleResize;
+    private _fixedLayoutMutationObserver;
+    private _pendingColumnWidthsRecalc;
+    private hasLoaded;
     /**
      * Determines if the table displays with reduced table cell padding.
      */
@@ -19,7 +33,7 @@ export declare class PdsTable {
      */
     responsive: boolean;
     /**
-     * Determines if the should display a fixed first column.
+     * Determines if the table displays a fixed first column.
      */
     fixedColumn: boolean;
     /**
@@ -37,6 +51,18 @@ export declare class PdsTable {
      * @defaultValue false
      */
     rowDividers: boolean;
+    /**
+     * Sets how the table sizes its columns. With `auto`, each column is sized from its content,
+     * so columns can change width when the rows change (for example after a sort). With `fixed`,
+     * columns take the `width` set on their `pds-table-head-cell` and ignore their content;
+     * columns without a `width` share the remaining space. Under `responsive`, that remaining
+     * share keeps a 120px floor on narrow viewports where the other columns' widths already fill
+     * it, growing the table instead (scrollable) -- without `responsive` there's no floor, since
+     * there would be nothing to scroll the overflow it would create. Content longer than its
+     * column overflows, so add `truncate` to cells whose content may not fit.
+     * @defaultValue 'auto'
+     */
+    tableLayout: 'auto' | 'fixed';
     /**
      * The name of the column to sort by on initial load.
      * Must match the text content of a sortable column header.
@@ -59,7 +85,8 @@ export declare class PdsTable {
      */
     sortingDirection: 'asc' | 'desc';
     /**
-     * Event that is emitted when the select all checkbox is clicked, carrying the selected value.
+     * Event that is emitted by `pds-table-head` when the select all checkbox is clicked, carrying the selected value.
+     * It bubbles through the table; the table doesn't emit it itself.
      */
     pdsTableSelectAll: EventEmitter<{
         isSelected: boolean;
@@ -71,7 +98,54 @@ export declare class PdsTable {
      * @private
      */
     private applyDefaultSort;
+    /**
+     * Re-attaches the responsive scroll listeners and the fixed-layout width floor after the table
+     * reconnects (it was re-parented, reordered, or moved by a DOM morph) -- `disconnectedCallback`
+     * tears both down, and neither comes back on its own.
+     */
+    connectedCallback(): void;
+    private attachLifecycleBoundSetup;
     disconnectedCallback(): void;
+    /**
+     * `tableLayout` or `responsive` changing at runtime is handled here, deferred to
+     * `componentDidRender` rather than done directly -- a `@Watch` runs before this component's
+     * own re-render, and both the floor's measurement and the responsive scroll setup query
+     * `.pds-table-responsive-container`, which that re-render is what creates or removes. Reading
+     * it any earlier would still see the old tree.
+     */
+    private _pendingFixedLayoutInputsSync;
+    handleFixedLayoutInputsChange(): void;
+    componentDidRender(): void;
+    /**
+     * The floor only applies with `tableLayout="fixed"` and `responsive` both set, so either one
+     * changing at runtime can turn it on or off -- and `responsive` on its own also starts or stops
+     * the (separate) scroll listeners, same as it does on first load. A head cell only reads
+     * `tableLayout` during its own render, and the floor this sets lives in inline style, not a
+     * re-render -- so turning the floor off (including live, e.g. the Storybook control) needs
+     * both cleared explicitly, not just the observers torn down. The select-all column reads
+     * `tableLayout` the same way, one level up in `pds-table-head`'s own render, since it owns that
+     * cell rather than letting it through a `<slot>`. A `fixedColumn` cell's own sticky-shadow
+     * scroll listener is bound to this same container, cached on the cell itself -- it stays in
+     * light DOM across this change and never reconnects on its own, so it needs telling directly
+     * rather than finding out the container moved.
+     * @private
+     */
+    private syncFixedLayoutInputs;
+    private allHeadCells;
+    private allBodyCells;
+    /**
+     * Measures the explicit-width columns against the available space and gives the columns with
+     * no `width` of their own (which otherwise share whatever's left) a floor so none of them
+     * squeeze below `AUTO_COLUMN_FLOOR_WIDTH_PX`. Re-run on resize, since the responsive
+     * container's available width can change after load -- and only under `responsive`: that
+     * container is the one thing in this layout the floor's own growth can't also grow, which is
+     * what keeps this from measuring its own effect and oscillating.
+     * @private
+     */
+    private recalcAutoColumnWidths;
+    private setupFixedLayoutWidths;
+    private scheduleColumnWidthsRecalc;
+    private teardownFixedLayoutWidths;
     /**
      * Sets up responsive scrolling behavior for the table.
      *

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

@@ -37,7 +37,7 @@ export declare class PdsTabs {
      */
     divider?: boolean;
     /**
-     * Stretches the component so the active tab panel fills the remaining height.
+     * Stretches the component to fill its container's height. The active tab panel keeps the height of its content.
      * Requires the component to have a constrained height (e.g. a flex parent).
      * @defaultValue false
      */

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

@@ -2,6 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';
 /**
  * @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.
  */
 export declare class PdsTextarea {
     private nativeTextarea?;
@@ -14,26 +15,26 @@ export declare class PdsTextarea {
     private readonly _type;
     el: HTMLPdsTextareaElement;
     /**
-     * Emitted when the input loses focus.
+     * Emitted when the textarea loses focus.
      */
     pdsBlur: EventEmitter<FocusEvent>;
     /**
-     * Emitted when the input has focus.
+     * Emitted when the textarea has focus.
      */
     pdsFocus: EventEmitter<FocusEvent>;
     /**
-     * Emitted when a keyboard input occurs.
+     * Emitted after each `input` event, such as typing or pasting. With `debounce`, it waits until that many milliseconds have passed since the last one.
+     * `detail` has `value`, the current text, and `event`, the native `input` event.
      *
-     * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
-     * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
-     * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If
-     * the input is cleared on edit, the type is `null`.
+     * This event will not emit when programmatically setting the `value` property.
      */
     pdsInput: EventEmitter<TextareaInputEventDetail>;
     /**
-     * Event emitted whenever the value of the textarea changes.
+     * Emitted when the user changes the value and then leaves the textarea. `Enter` adds a new line, so it doesn't emit this event.
+     * `detail` has `value`, the text, and `event`, the native event behind it, usually `change`.
      *
-     * This event will not emit when programmatically setting the `value` property.
+     * This event will not emit when programmatically setting the `value` property, unless the field has focus at the time;
+     * then it emits when the field loses focus.
      */
     pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;
     /**
@@ -59,11 +60,11 @@ export declare class PdsTextarea {
      */
     disabled: boolean;
     /**
-     * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.
+     * Sets the number of milliseconds to wait after each input event before emitting `pdsInput`.
      */
     debounce?: number;
     /**
-     * Displays an error message below the textarea field.
+     * Displays an error message below the textarea while `invalid` is set.
      */
     errorMessage?: string;
     /**
@@ -71,7 +72,8 @@ export declare class PdsTextarea {
      */
     helperMessage?: string;
     /**
-     * Determines whether or not the textarea is invalid or throws an error.
+     * Determines whether or not the textarea is invalid. When `required` is set, the textarea sets it
+     * itself each time `pdsTextareaChange` fires, replacing a value you set.
      * @defaultValue false
      */
     invalid: boolean;
@@ -85,7 +87,7 @@ export declare class PdsTextarea {
      */
     hideLabel: boolean;
     /**
-     * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.
+     * Specifies the name. Submitted with the form name/value pair.
      */
     name: string;
     /**

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * @part dismiss
+ * @part dismiss - Exposes the dismiss button for styling. Appears unless `dismissible` is `false`.
  */
 export declare class PdsToast {
     el: HTMLPdsToastElement;
@@ -67,6 +67,10 @@ export declare class PdsToast {
     componentDidLoad(): void;
     disconnectedCallback(): void;
     handleDurationChange(newDuration: number): void;
+    /**
+     * Dismisses the toast, as the dismiss button and `duration` do: plays the exit animation and emits `pdsToastDismissed`, and the toast
+     * gets `hidden` on the next render, after the event. Works even when `dismissible` is `false`. The toast stays in the DOM.
+     */
     dismiss(): Promise<void>;
     private waitForDismissAnimation;
     private getDismissAnimationDurationMs;