@pine-ds/core 3.22.1 → 3.24.0

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

@@ -11,18 +11,25 @@ export declare class PdsSortable {
      * @defaultValue false
      */
     border: boolean;
+    /**
+     * Determines whether or not the sortable is disabled.
+     * @defaultValue false
+     */
+    disabled: boolean;
     /**
      * A unique identifier used for the sortable container `id` attribute.
      */
     componentId: string;
     /**
-     * Deternines whether `sortable` items should be divided with border.
+     * Determines whether `sortable` items should be divided with border.
      */
     dividers: boolean;
     /**
      * Determines the grabbable area for the `pds-sortable-item`.
      */
     handleType: 'handle' | 'row';
+    private sortableInstance;
+    handleDisabledChange(): void;
     private classNames;
     componentDidLoad(): void;
     render(): any;

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

@@ -1,6 +1,7 @@
 import type { SortableEvent } from 'sortablejs';
 export interface SortableType {
     animation: number;
+    disabled: boolean;
     ghostClass: string;
     dragClass: string;
     onEnd: (evt: SortableEvent) => void;

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

@@ -1,4 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @part dismiss
+ */
 export declare class PdsToast {
     /**
      * A unique identifier used for the underlying component `id` attribute.

package/dist/types/components.d.ts

@@ -953,7 +953,7 @@ export namespace Components {
          */
         "getSelectedValue": () => Promise<string | null>;
         /**
-          * Visually hides the label text for instances where only the combobox should be displayed. Label remains accessible to assistive technology such as screen readers.
+          * Visually hides the label text for instances where only the combobox should be displayed. The visible `<label>` is omitted (same pattern as `pds-select`) so label spacing does not reserve layout; the trigger uses `aria-label` so the name stays available to assistive technology.
           * @default false
          */
         "hideLabel": boolean;
@@ -996,6 +996,11 @@ export namespace Components {
           * @default 'input'
          */
         "trigger": 'input' | 'button' | 'chip';
+        /**
+          * The shape of the button trigger. Use 'input' to render the trigger with input-like styling (subtle border radius, input height) for use in form or filter rows alongside PdsSelect and PdsMultiselect.
+          * @default 'pill'
+         */
+        "triggerShape": 'pill' | 'input';
         /**
           * The visual variant for the button trigger. Matches Pine button variants.
           * @default 'secondary'
@@ -1012,6 +1017,22 @@ export namespace Components {
          */
         "value": string;
     }
+    interface PdsContainer {
+        /**
+          * If `true`, the container is centered horizontally using `margin-inline: auto`.
+          * @default true
+         */
+        "centered": boolean;
+        /**
+          * Sets the maximum width of the container. Accepts a named size token (`'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'`) or any valid CSS length value (e.g. `'640px'`, `'50rem'`). When omitted, no max-width is applied.
+         */
+        "size"?: string;
+        /**
+          * Sets the semantic HTML tag rendered as the inner container element.
+          * @default 'div'
+         */
+        "tag": 'div' | 'main' | 'section' | 'article';
+    }
     interface PdsCopytext {
         /**
           * Determines whether `copytext` should have a visible border.
@@ -1490,6 +1511,11 @@ export namespace Components {
           * @default '300px'
          */
         "maxHeight": string;
+        /**
+          * Maximum chips shown inline before collapsing to a "+N more" badge. Only applies when `selectedDisplay='pill'` and `pillPosition='inline'`.
+          * @default 3
+         */
+        "maxInlinePills": number;
         /**
           * Maximum number of selections allowed.
          */
@@ -1504,13 +1530,18 @@ export namespace Components {
          */
         "name"?: string;
         /**
-          * Options provided externally (for consumer-managed async).
+          * Options provided externally (for consumer-managed async). When using `group` on options, keep each group block contiguous in the array. The same `group` label appearing again after other items produces a separate header (same as native `<optgroup>`).
          */
         "options"?: MultiselectOption[];
         /**
           * Width of the dropdown panel. Defaults to the trigger width.
          */
         "panelWidth"?: string;
+        /**
+          * Position of pill chips when `selectedDisplay` is `'pill'`. `'inline'` places chips inside the trigger; `'below'` places chips in a flex-wrap row directly below the trigger.
+          * @default 'inline'
+         */
+        "pillPosition": 'inline' | 'below';
         /**
           * Placeholder text for the input field.
           * @default 'Select...'
@@ -1526,6 +1557,11 @@ export namespace Components {
           * @default 'Find...'
          */
         "searchPlaceholder": string;
+        /**
+          * Display mode for selected items outside the dropdown panel. `'count'` shows "N item(s)" text in the trigger (default). `'pill'` renders selected items as dismissible pds-chip tags.
+          * @default 'count'
+         */
+        "selectedDisplay": 'count' | 'pill';
         /**
           * Sets focus on the trigger button.
          */
@@ -1832,7 +1868,12 @@ export namespace Components {
          */
         "componentId": string;
         /**
-          * Deternines whether `sortable` items should be divided with border.
+          * Determines whether or not the sortable is disabled.
+          * @defaultValue false
+         */
+        "disabled": boolean;
+        /**
+          * Determines whether `sortable` items should be divided with border.
           * @default false
          */
         "dividers": boolean;
@@ -2522,6 +2563,12 @@ declare global {
         prototype: HTMLPdsComboboxElement;
         new (): HTMLPdsComboboxElement;
     };
+    interface HTMLPdsContainerElement extends Components.PdsContainer, HTMLStencilElement {
+    }
+    var HTMLPdsContainerElement: {
+        prototype: HTMLPdsContainerElement;
+        new (): HTMLPdsContainerElement;
+    };
     interface HTMLPdsCopytextElementEventMap {
         "pdsCopyTextClick": string;
     }
@@ -3000,6 +3047,7 @@ declare global {
         "pds-checkbox": HTMLPdsCheckboxElement;
         "pds-chip": HTMLPdsChipElement;
         "pds-combobox": HTMLPdsComboboxElement;
+        "pds-container": HTMLPdsContainerElement;
         "pds-copytext": HTMLPdsCopytextElement;
         "pds-divider": HTMLPdsDividerElement;
         "pds-dropdown-menu": HTMLPdsDropdownMenuElement;
@@ -3983,7 +4031,7 @@ declare namespace LocalJSX {
          */
         "formatResult"?: (item: unknown) => ComboboxOption;
         /**
-          * Visually hides the label text for instances where only the combobox should be displayed. Label remains accessible to assistive technology such as screen readers.
+          * Visually hides the label text for instances where only the combobox should be displayed. The visible `<label>` is omitted (same pattern as `pds-select`) so label spacing does not reserve layout; the trigger uses `aria-label` so the name stays available to assistive technology.
           * @default false
          */
         "hideLabel"?: boolean;
@@ -4034,6 +4082,11 @@ declare namespace LocalJSX {
           * @default 'input'
          */
         "trigger"?: 'input' | 'button' | 'chip';
+        /**
+          * The shape of the button trigger. Use 'input' to render the trigger with input-like styling (subtle border radius, input height) for use in form or filter rows alongside PdsSelect and PdsMultiselect.
+          * @default 'pill'
+         */
+        "triggerShape"?: 'pill' | 'input';
         /**
           * The visual variant for the button trigger. Matches Pine button variants.
           * @default 'secondary'
@@ -4050,6 +4103,22 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface PdsContainer {
+        /**
+          * If `true`, the container is centered horizontally using `margin-inline: auto`.
+          * @default true
+         */
+        "centered"?: boolean;
+        /**
+          * Sets the maximum width of the container. Accepts a named size token (`'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'`) or any valid CSS length value (e.g. `'640px'`, `'50rem'`). When omitted, no max-width is applied.
+         */
+        "size"?: string;
+        /**
+          * Sets the semantic HTML tag rendered as the inner container element.
+          * @default 'div'
+         */
+        "tag"?: 'div' | 'main' | 'section' | 'article';
+    }
     interface PdsCopytext {
         /**
           * Determines whether `copytext` should have a visible border.
@@ -4548,6 +4617,11 @@ declare namespace LocalJSX {
           * @default '300px'
          */
         "maxHeight"?: string;
+        /**
+          * Maximum chips shown inline before collapsing to a "+N more" badge. Only applies when `selectedDisplay='pill'` and `pillPosition='inline'`.
+          * @default 3
+         */
+        "maxInlinePills"?: number;
         /**
           * Maximum number of selections allowed.
          */
@@ -4582,13 +4656,18 @@ declare namespace LocalJSX {
          */
         "onPdsMultiselectSearch"?: (event: PdsMultiselectCustomEvent<MultiselectSearchEventDetail>) => void;
         /**
-          * Options provided externally (for consumer-managed async).
+          * Options provided externally (for consumer-managed async). When using `group` on options, keep each group block contiguous in the array. The same `group` label appearing again after other items produces a separate header (same as native `<optgroup>`).
          */
         "options"?: MultiselectOption[];
         /**
           * Width of the dropdown panel. Defaults to the trigger width.
          */
         "panelWidth"?: string;
+        /**
+          * Position of pill chips when `selectedDisplay` is `'pill'`. `'inline'` places chips inside the trigger; `'below'` places chips in a flex-wrap row directly below the trigger.
+          * @default 'inline'
+         */
+        "pillPosition"?: 'inline' | 'below';
         /**
           * Placeholder text for the input field.
           * @default 'Select...'
@@ -4604,6 +4683,11 @@ declare namespace LocalJSX {
           * @default 'Find...'
          */
         "searchPlaceholder"?: string;
+        /**
+          * Display mode for selected items outside the dropdown panel. `'count'` shows "N item(s)" text in the trigger (default). `'pill'` renders selected items as dismissible pds-chip tags.
+          * @default 'count'
+         */
+        "selectedDisplay"?: 'count' | 'pill';
         /**
           * Width of the trigger button (and reference for dropdown positioning).
           * @default '100%'
@@ -4926,7 +5010,12 @@ declare namespace LocalJSX {
          */
         "componentId": string;
         /**
-          * Deternines whether `sortable` items should be divided with border.
+          * Determines whether or not the sortable is disabled.
+          * @defaultValue false
+         */
+        "disabled"?: boolean;
+        /**
+          * Determines whether `sortable` items should be divided with border.
           * @default false
          */
         "dividers"?: boolean;
@@ -5392,6 +5481,7 @@ declare namespace LocalJSX {
         "pds-checkbox": PdsCheckbox;
         "pds-chip": PdsChip;
         "pds-combobox": PdsCombobox;
+        "pds-container": PdsContainer;
         "pds-copytext": PdsCopytext;
         "pds-divider": PdsDivider;
         "pds-dropdown-menu": PdsDropdownMenu;
@@ -5450,6 +5540,7 @@ declare module "@stencil/core" {
             "pds-checkbox": LocalJSX.PdsCheckbox & JSXBase.HTMLAttributes<HTMLPdsCheckboxElement>;
             "pds-chip": LocalJSX.PdsChip & JSXBase.HTMLAttributes<HTMLPdsChipElement>;
             "pds-combobox": LocalJSX.PdsCombobox & JSXBase.HTMLAttributes<HTMLPdsComboboxElement>;
+            "pds-container": LocalJSX.PdsContainer & JSXBase.HTMLAttributes<HTMLPdsContainerElement>;
             "pds-copytext": LocalJSX.PdsCopytext & JSXBase.HTMLAttributes<HTMLPdsCopytextElement>;
             "pds-divider": LocalJSX.PdsDivider & JSXBase.HTMLAttributes<HTMLPdsDividerElement>;
             "pds-dropdown-menu": LocalJSX.PdsDropdownMenu & JSXBase.HTMLAttributes<HTMLPdsDropdownMenuElement>;

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

@@ -19,3 +19,13 @@ export declare const isRequired: (target: any, component: any) => void;
  * @param type - The type value (string literal) or a getter function that returns the type
  */
 export declare function exposeTypeProperty(element: Element, type: string | (() => string)): void;
+/**
+ * Determines if code is running in Stencil's spec test environment.
+ * Stencil's mock-doc logs console.error on any ElementInternals
+ * property access during spec tests. Use this guard to skip
+ * ElementInternals calls in the mock environment.
+ *
+ * Uses __STENCIL_SPEC_TESTS__ (the same env var Stencil's mock-doc checks)
+ * to avoid false positives in downstream consumer test suites.
+ */
+export declare const isSpecTest: () => boolean;