@pine-ds/core 4.3.0 → 4.4.1

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

@@ -1 +1,3 @@
 export declare const closest: (selector: string, el: Element | Document) => any;
+/** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
+export declare const containsComposed: (ancestor: Node | null | undefined, node: Node | null | undefined) => boolean;

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

@@ -1,7 +1,15 @@
 import type { EventEmitter } from "../stencil-public-runtime";
 export declare const hasShadowDom: (el: Element) => boolean;
 export declare const debounceEvent: (event: EventEmitter, wait: number) => EventEmitter;
-export declare const debounce: (func: (...args: any[]) => void, wait?: number) => (...args: any[]) => any;
+/** Drops an emit still waiting on a `debounceEvent` delay. A no-op on an undebounced emitter. */
+export declare const cancelDebouncedEvent: (event: EventEmitter | undefined) => void;
+/** Sends an emit still waiting on a `debounceEvent` delay right away. A no-op on an undebounced emitter. */
+export declare const flushDebouncedEvent: (event: EventEmitter | undefined) => void;
+export declare const debounce: (func: (...args: any[]) => void, wait?: number) => {
+    (...args: any[]): any;
+    cancel(): void;
+    flush(): void;
+};
 /**
  * Normalizes color values to ensure consistent CSS variable usage.
  *

package/dist/vscode.html-data.json

@@ -6961,7 +6961,7 @@
       "name": "pds-checkbox",
       "description": {
         "kind": "markdown",
-        "value": "Checkboxes provide users with selectable options like toggling a single setting or selecting multiple options from a list.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#default), [Checked](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#checked), [Indeterminate](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#indeterminate), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#disabled), [Message](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#message), [Invalid](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#invalid)\n\n**Events:**\n- `pdsCheckboxChange` - Event emitted that contains the `value` and `checked`.\n- `pdsCheckboxInput` - No description"
+        "value": "Checkboxes provide users with selectable options like toggling a single setting or selecting multiple options from a list.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#default), [Checked](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#checked), [Indeterminate](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#indeterminate), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#disabled), [Message](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#message), [Invalid](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#invalid), [Label slot](https://pine-design-system.netlify.app/?path=/docs/components-checkbox--docs#label-slot)\n\n**Slots:**\n- `label` - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.\n\n**Events:**\n- `pdsCheckboxChange` - Event emitted that contains the `value` and `checked`.\n- `pdsCheckboxInput` - No description"
       },
       "attributes": [
         {
@@ -7365,6 +7365,13 @@
             "value": "If true, the combobox is disabled.\n\n**Default:** `false`"
           }
         },
+        {
+          "name": "drill-in-back-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible prefix for the row that returns to the group list when `group-display` is\n`drill-in`, read before the open group's label. Pass a translated string to localize it; defaults to English.\n\n**Default:** `'Back'`"
+          }
+        },
         {
           "name": "dropdown-mount",
           "description": {
@@ -7422,6 +7429,38 @@
             "value": "Timeout in milliseconds for async fetch requests.\n\n**Type:** `number`\n\n**Default:** `30000`"
           }
         },
+        {
+          "name": "flyout-max-width",
+          "description": {
+            "kind": "markdown",
+            "value": "Maximum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width value.\n\n**Default:** `'380px'`"
+          }
+        },
+        {
+          "name": "flyout-min-width",
+          "description": {
+            "kind": "markdown",
+            "value": "Minimum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width value.\nThe flyout is as wide as its options, between this and `flyout-max-width`.\n\n**Default:** `'280px'`"
+          }
+        },
+        {
+          "name": "group-display",
+          "description": {
+            "kind": "markdown",
+            "value": "How option groups (`<optgroup>`, or the `group` field of `options`) are shown in the dropdown.\n`inline` lists each group's label above its options. `flyout` lists the groups, and opens a\ngroup's options in a panel beside it on hover or click; while searching, the matching options\nare listed under their group labels, and search also matches group labels. `flyout` groups\nby `<optgroup>` (or `group`) only: options under a `<pds-text>` heading are listed ungrouped.\n`drill-in` lists the groups too, but a click replaces the list with that group's options and a\nrow back to the groups; use it where nothing can open beside the dropdown, such as a side\npanel. `flyout` falls back to `drill-in` when there is no room for a flyout on either side.\n\n**Type:** `\"drill-in\" | \"flyout\" | \"inline\"`\n\n**Default:** `'inline'`"
+          },
+          "values": [
+            {
+              "name": "drill-in"
+            },
+            {
+              "name": "flyout"
+            },
+            {
+              "name": "inline"
+            }
+          ]
+        },
         {
           "name": "helper-message",
           "description": {
@@ -7486,6 +7525,13 @@
             "value": "The name of the form control. Submitted with the form as part of a name/value pair."
           }
         },
+        {
+          "name": "panel-search",
+          "description": {
+            "kind": "markdown",
+            "value": "Shows a search field at the top of the dropdown for the `button` and `chip` triggers, which\ncan't be typed into. Search filters the options the same way typing in the `input` trigger\ndoes; in a grouped display it also matches group labels.\n\n**Default:** `false`"
+          }
+        },
         {
           "name": "placeholder",
           "description": {
@@ -7493,6 +7539,20 @@
             "value": "Placeholder text for the input field."
           }
         },
+        {
+          "name": "search-options-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the search input inside the dropdown panel (`panel-search`). Pass a translated string to localize it; defaults to English.\n\n**Default:** `'Search options'`"
+          }
+        },
+        {
+          "name": "search-placeholder",
+          "description": {
+            "kind": "markdown",
+            "value": "Placeholder text for the search input inside the dropdown panel (`panel-search`). Pass a translated string to localize it; defaults to English.\n\n**Default:** `'Find...'`"
+          }
+        },
         {
           "name": "trigger",
           "description": {
@@ -7669,6 +7729,374 @@
         }
       ]
     },
+    {
+      "name": "pds-datepicker",
+      "description": {
+        "kind": "markdown",
+        "value": "Datepicker captures a single date, or in range mode a start and an end date. For a single date, people can type it as `YYYY-MM-DD` or pick it from a calendar that opens from the button in the field. The value is always a `YYYY-MM-DD` string (`YYYY-MM-DD/YYYY-MM-DD` for a range), so it never shifts by a day with the viewer's time zone.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs#default), [Min and max](https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs#min-and-max), [Locale and first day of the week](https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs#locale-and-first-day-of-the-week), [Format](https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs#format), [Range](https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs#range), [Range with presets](https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs#range-with-presets), [Range that applies on pick](https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs#range-that-applies-on-pick), [Range with times](https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs#range-with-times), [Month and year dropdowns](https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs#month-and-year-dropdowns), [Initially empty, with Clear](https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs#initially-empty,-with-clear), [Placement](https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs#placement), [Invalid](https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs#invalid), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs#disabled)\n\n**CSS Parts:**\n- `calendar` - The open calendar. It's portaled out of the datepicker, so style it with `.pds-datepicker-calendar-portal::part(calendar)`.\n- `presets` - The list of preset ranges in the calendar, styled with `.pds-datepicker-calendar-portal::part(presets)`.\n\n**Events:**\n- `pdsBlur` - Emitted when the datepicker loses focus: when focus leaves the field and the calendar.\n- `pdsDatepickerChange` - Emitted when the value changes.\n\nThis event will not emit when programmatically setting the `value` property.\n- `pdsFocus` - Emitted when the datepicker gains focus: when focus moves into the field or the calendar from outside."
+      },
+      "attributes": [
+        {
+          "name": "apply-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the button that applies the chosen dates.\n\n**Default:** `'Apply'`"
+          }
+        },
+        {
+          "name": "auto-apply",
+          "description": {
+            "kind": "markdown",
+            "value": "In range mode, applies the range as soon as its end or a preset is picked, without the Apply and\nCancel buttons. Has no effect with the time picker, whose times still need Apply.\n\n**Default:** `false`"
+          }
+        },
+        {
+          "name": "cancel-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the button that closes the calendar without changing the dates.\n\n**Default:** `'Cancel'`"
+          }
+        },
+        {
+          "name": "clear-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the button that empties the field, when `clearable` is set.\n\n**Default:** `'Clear'`"
+          }
+        },
+        {
+          "name": "clearable",
+          "description": {
+            "kind": "markdown",
+            "value": "Adds a button in the field that empties it, shown while there's a value. Where Apply and Cancel\nbuttons show, Clear also takes the place of Cancel.\n\n**Default:** `false`"
+          }
+        },
+        {
+          "name": "component-id",
+          "description": {
+            "kind": "markdown",
+            "value": "A unique identifier used for the underlying component `id` attribute."
+          }
+        },
+        {
+          "name": "custom-range-label",
+          "description": {
+            "kind": "markdown",
+            "value": "The label of the presets entry that stands for a range of your own. Range mode with presets only.\n\n**Default:** `'Custom range'`"
+          }
+        },
+        {
+          "name": "disabled",
+          "description": {
+            "kind": "markdown",
+            "value": "Determines whether or not the datepicker is disabled."
+          }
+        },
+        {
+          "name": "end-time-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the end time, in range mode with the time picker.\n\n**Default:** `'End time'`"
+          }
+        },
+        {
+          "name": "error-message",
+          "description": {
+            "kind": "markdown",
+            "value": "Specifies the error message and provides an error-themed treatment to the field."
+          }
+        },
+        {
+          "name": "first-day-of-week",
+          "description": {
+            "kind": "markdown",
+            "value": "The first day of the week in the calendar, from `0` (Sunday) to `6` (Saturday). Defaults to the\nlocale's first day where the browser reports it, otherwise Sunday.\n\n**Type:** `number`"
+          }
+        },
+        {
+          "name": "format",
+          "description": {
+            "kind": "markdown",
+            "value": "How the field shows dates and reads typed ones, as tokens: `YYYY`, `MMMM` or `MMM` (month name,\nin the locale), `MM` or `M` (month), `DD` or `D` (day), and with the time picker `HH` or `H`\n(24-hour), `hh` or `h` (12-hour), `mm` and `A` (AM/PM, in the locale), as `MM/DD/YYYY`,\n`MMM D, YYYY` or `D.M.YYYY h:mm A`. Put literal text in brackets, as `[Due] D/M/YYYY`. The value\nand the change event stay ISO (`YYYY-MM-DD`), whatever the format. Typed ISO dates are always\naccepted too.\n\n**Default:** `'YYYY-MM-DD'`"
+          }
+        },
+        {
+          "name": "full-width",
+          "description": {
+            "kind": "markdown",
+            "value": "Determines whether or not the datepicker takes full width of its container."
+          }
+        },
+        {
+          "name": "helper-message",
+          "description": {
+            "kind": "markdown",
+            "value": "Displays a message or hint below the field."
+          }
+        },
+        {
+          "name": "hide-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Visually hides the label text for instances where only the field should be displayed. Label remains accessible to assistive technology such as screen readers."
+          }
+        },
+        {
+          "name": "hour-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the hour in the time picker.\n\n**Default:** `'Hour'`"
+          }
+        },
+        {
+          "name": "invalid",
+          "description": {
+            "kind": "markdown",
+            "value": "Determines whether or not the datepicker is invalid or throws an error."
+          }
+        },
+        {
+          "name": "invalid-date-message",
+          "description": {
+            "kind": "markdown",
+            "value": "The validation message the form reports when the typed text isn't a date that can be picked.\n\n**Default:** `'Enter a date in the format shown.'`"
+          }
+        },
+        {
+          "name": "label",
+          "description": {
+            "kind": "markdown",
+            "value": "Text to be displayed as the datepicker label."
+          }
+        },
+        {
+          "name": "locale",
+          "description": {
+            "kind": "markdown",
+            "value": "The locale used for month and weekday names, as a BCP 47 language tag such as `en-US` or `fr`.\nDefaults to the nearest `lang` attribute, then the page's `<html lang>`, then `en`."
+          }
+        },
+        {
+          "name": "max",
+          "description": {
+            "kind": "markdown",
+            "value": "The latest date that can be picked, as `YYYY-MM-DD`."
+          }
+        },
+        {
+          "name": "max-date-message",
+          "description": {
+            "kind": "markdown",
+            "value": "The validation message the form reports for a date after `max`. `{date}` is replaced by the\nlatest date, in the field's format.\n\n**Default:** `'Choose {date} or earlier.'`"
+          }
+        },
+        {
+          "name": "min",
+          "description": {
+            "kind": "markdown",
+            "value": "The earliest date that can be picked, as `YYYY-MM-DD`."
+          }
+        },
+        {
+          "name": "min-date-message",
+          "description": {
+            "kind": "markdown",
+            "value": "The validation message the form reports for a date before `min`. `{date}` is replaced by the\nearliest date, in the field's format.\n\n**Default:** `'Choose {date} or later.'`"
+          }
+        },
+        {
+          "name": "minute-increment",
+          "description": {
+            "kind": "markdown",
+            "value": "The minutes the time picker steps by, such as `15` or `30`.\n\n**Type:** `number`\n\n**Default:** `1`"
+          }
+        },
+        {
+          "name": "minute-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the minute in the time picker.\n\n**Default:** `'Minute'`"
+          }
+        },
+        {
+          "name": "month-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the month dropdown, when `show-dropdowns` is set.\n\n**Default:** `'Month'`"
+          }
+        },
+        {
+          "name": "name",
+          "description": {
+            "kind": "markdown",
+            "value": "Specifies the name. Submitted with the form name/value pair."
+          }
+        },
+        {
+          "name": "next-month-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the button that shows the next month.\n\n**Default:** `'Next month'`"
+          }
+        },
+        {
+          "name": "period-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the AM or PM choice in the time picker, in locales with a 12-hour clock.\n\n**Default:** `'AM or PM'`"
+          }
+        },
+        {
+          "name": "placeholder",
+          "description": {
+            "kind": "markdown",
+            "value": "Specifies a short hint that describes the expected value of the field. Defaults to the format\nthe field takes, such as `YYYY-MM-DD`."
+          }
+        },
+        {
+          "name": "placement",
+          "description": {
+            "kind": "markdown",
+            "value": "The placement of the calendar relative to the field.\n\n**Type:** `\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"`\n\n**Default:** `'bottom-start'`"
+          },
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "bottom-end"
+            },
+            {
+              "name": "bottom-start"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "left-end"
+            },
+            {
+              "name": "left-start"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "right-end"
+            },
+            {
+              "name": "right-start"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "top-end"
+            },
+            {
+              "name": "top-start"
+            }
+          ]
+        },
+        {
+          "name": "presets",
+          "description": {
+            "kind": "markdown",
+            "value": "Ranges listed beside the calendar in range mode. A comma-separated list of built-in keys\n(`today`, `yesterday`, `last-7-days`, `last-30-days`, `last-90-days`, `this-month`,\n`last-month`, `this-quarter`, `last-quarter`, `this-year`, `last-year`, `year-to-date`,\n`last-12-months`), or an array of `{ key, label?, start?, end? }` to relabel built-ins or add\nyour own.\n\n**Type:** `DatepickerPreset[] | string`"
+          }
+        },
+        {
+          "name": "presets-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the list of presets, in range mode.\n\n**Default:** `'Presets'`"
+          }
+        },
+        {
+          "name": "previous-month-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the button that shows the previous month.\n\n**Default:** `'Previous month'`"
+          }
+        },
+        {
+          "name": "range",
+          "description": {
+            "kind": "markdown",
+            "value": "Picks a range: a start and an end date, from two months side by side, applied with the Apply\nbutton. The value is `YYYY-MM-DD/YYYY-MM-DD`.\n\n**Default:** `false`"
+          }
+        },
+        {
+          "name": "readonly",
+          "description": {
+            "kind": "markdown",
+            "value": "Determines whether or not the datepicker is readonly."
+          }
+        },
+        {
+          "name": "required",
+          "description": {
+            "kind": "markdown",
+            "value": "Determines whether or not the datepicker is required."
+          }
+        },
+        {
+          "name": "show-dropdowns",
+          "description": {
+            "kind": "markdown",
+            "value": "Shows month and year dropdowns in place of the month heading, for jumping far, as to a birth year.\n\n**Default:** `false`"
+          }
+        },
+        {
+          "name": "start-time-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the start time, in range mode with the time picker.\n\n**Default:** `'Start time'`"
+          }
+        },
+        {
+          "name": "time-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the time, with the time picker and a single date.\n\n**Default:** `'Time'`"
+          }
+        },
+        {
+          "name": "time-picker",
+          "description": {
+            "kind": "markdown",
+            "value": "Adds hour and minute pickers below the calendar, and the value carries the time as\n`YYYY-MM-DDTHH:mm`. The dates are applied with the Apply button.\n\n**Default:** `false`"
+          }
+        },
+        {
+          "name": "trigger-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the button that opens the calendar. The selected date is added to it.\n\n**Default:** `'Choose date'`"
+          }
+        },
+        {
+          "name": "value",
+          "description": {
+            "kind": "markdown",
+            "value": "The selected date as `YYYY-MM-DD`, or in range mode the range as `YYYY-MM-DD/YYYY-MM-DD`; with\nthe time picker, each date as `YYYY-MM-DDTHH:mm`. An empty string when nothing is selected.\n\n**Default:** `''`"
+          }
+        },
+        {
+          "name": "year-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Accessible label for the year dropdown, when `show-dropdowns` is set.\n\n**Default:** `'Year'`"
+          }
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://pine-design-system.netlify.app/?path=/docs/components-datepicker--docs"
+        }
+      ]
+    },
     {
       "name": "pds-divider",
       "description": {
@@ -8762,7 +9190,7 @@
       "name": "pds-multiselect",
       "description": {
         "kind": "markdown",
-        "value": "Multiselects let users pick several options from a searchable dropdown list. The trigger displays the selected count while the panel surfaces a filterable list of choices.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#default), [With Preselected Values](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-preselected-values), [Hidden Selected Items](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#hidden-selected-items), [Max Selections](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#max-selections), [Custom Widths](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#custom-widths), [Async with URL](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#async-with-url), [Consumer-Managed Async](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#consumer-managed-async), [With Error State](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-error-state), [With Create Option](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-create-option)\n\n**Slots:**\n- `(default)` - Static option elements for the multiselect\n- `empty` - Custom empty state message when no options match\n- `loading` - Custom loading indicator\n\n**CSS Parts:**\n- `pill-toggle` - The chevron button inside the inline pill trigger\n- `trigger` - The trigger surface that opens the dropdown panel\n\n**Events:**\n- `pdsMultiselectChange` - Emitted when selection changes.\n- `pdsMultiselectCreate` - Emitted when a new option is created.\n- `pdsMultiselectDismiss` - Emitted when the dropdown is dismissed via Escape key or click outside.\n\nThis event fires only when the user explicitly dismisses the panel without making a selection:\n- ✅ Fires: Pressing Escape key while dropdown is open\n- ✅ Fires: Clicking outside the component while dropdown is open\n- ❌ Does NOT fire: When panel closes due to selection (including when `closePanelOnSelect` is true)\n- ❌ Does NOT fire: When panel closes programmatically via `closeDropdown()`\n\nEquivalent to Sage's `onEscapeHook`. Use this to restore parent UI state or run cleanup when the user cancels their interaction.\n- `pdsMultiselectLoadOptions` - Emitted to request more options (pagination).\n- `pdsMultiselectSearch` - Emitted on search input (for consumer-managed async)."
+        "value": "Multiselects let users pick several options from a searchable dropdown list. The trigger displays the selected count while the panel surfaces a filterable list of choices.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#default), [With Preselected Values](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-preselected-values), [Hidden Selected Items](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#hidden-selected-items), [Max Selections](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#max-selections), [Custom Widths](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#custom-widths), [Async with URL](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#async-with-url), [Refreshing Options](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#refreshing-options), [Consumer-Managed Async](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#consumer-managed-async), [With Error State](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-error-state), [With Create Option](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-create-option)\n\n**Slots:**\n- `(default)` - Static option elements for the multiselect\n- `empty` - Custom empty state message when no options match\n- `footer` - Links or buttons displayed below the options inside the dropdown panel\n- `loading` - Custom loading indicator\n- `trigger` - Custom trigger element that replaces the built-in trigger. It opens the dropdown panel and receives `aria-expanded` and `aria-haspopup`; it supplies its own accessible name. Slot the focusable control itself, not a wrapper around it.\n\n**CSS Parts:**\n- `pill-toggle` - The chevron button inside the inline pill trigger\n- `trigger` - The trigger surface that opens the dropdown panel\n\n**Events:**\n- `pdsMultiselectChange` - Emitted when selection changes.\n- `pdsMultiselectCreate` - Emitted when a new option is created.\n- `pdsMultiselectDismiss` - Emitted when the dropdown is dismissed via Escape key or click outside.\n\nThis event fires only when the user explicitly dismisses the panel without making a selection:\n- ✅ Fires: Pressing Escape key while dropdown is open\n- ✅ Fires: Clicking outside the component while dropdown is open\n- ❌ Does NOT fire: When panel closes due to selection (including when `closePanelOnSelect` is true)\n- ❌ Does NOT fire: When panel closes programmatically via `closeDropdown()`\n\nEquivalent to Sage's `onEscapeHook`. Use this to restore parent UI state or run cleanup when the user cancels their interaction.\n- `pdsMultiselectLoadOptions` - Emitted to request more options (pagination).\n- `pdsMultiselectOptionAction` - Emitted when an option's action runs, from a click on its icon or Right Arrow on the highlighted option.\nThe panel closes and focus returns to the trigger first, so a modal opened from the handler restores focus to the trigger.\n- `pdsMultiselectSearch` - Emitted on search input (for consumer-managed async)."
       },
       "attributes": [
         {
@@ -8955,6 +9383,42 @@
             "value": "Text shown when no options match the search. Pass a translated string to localize it; defaults to English.\n\n**Default:** `'No options found'`"
           }
         },
+        {
+          "name": "option-action-description",
+          "description": {
+            "kind": "markdown",
+            "value": "Screen-reader hint on each option that has an action, naming the key that runs it. Pass a translated string to localize it; `{action}` is interpolated with the option's action label.\n\n**Default:** `'Press Right Arrow to {action}'`"
+          }
+        },
+        {
+          "name": "option-action-label",
+          "description": {
+            "kind": "markdown",
+            "value": "Tooltip for an option's action icon when the option has no `actionLabel`. Pass a translated string to localize it; `{text}` is interpolated.\n\n**Default:** `'Edit {text}'`"
+          }
+        },
+        {
+          "name": "option-actions",
+          "description": {
+            "kind": "markdown",
+            "value": "Shows an action icon on each option that has an `actionIcon`, such as an edit pencil.\nThe icon shows on the hovered or highlighted option; clicking it, or pressing Right Arrow on the highlighted option, emits `pdsMultiselectOptionAction`.\n\n**Default:** `false`"
+          }
+        },
+        {
+          "name": "option-display",
+          "description": {
+            "kind": "markdown",
+            "value": "Display mode for options in the dropdown panel.\n`'text'` shows each option's text (default). `'chip'` shows each option as a\npds-chip, with a dot when the option has a `dotColor`.\n\n**Type:** `\"chip\" | \"text\"`\n\n**Default:** `'text'`"
+          },
+          "values": [
+            {
+              "name": "chip"
+            },
+            {
+              "name": "text"
+            }
+          ]
+        },
         {
           "name": "options-label",
           "description": {
@@ -10038,7 +10502,7 @@
       "name": "pds-switch",
       "description": {
         "kind": "markdown",
-        "value": "Switches toggle a single setting between on and off, rendered as a sliding thumb inside a track. They work as form-associated inputs whose checked state submits with the surrounding form.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-switch--docs#default), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-switch--docs#disabled), [Helper Message](https://pine-design-system.netlify.app/?path=/docs/components-switch--docs#helper-message), [Invalid](https://pine-design-system.netlify.app/?path=/docs/components-switch--docs#invalid)\n\n**Events:**\n- `pdsSwitchChange` - Emits an event on input change."
+        "value": "Switches toggle a single setting between on and off, rendered as a sliding thumb inside a track. They work as form-associated inputs whose checked state submits with the surrounding form.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-switch--docs#default), [Disabled](https://pine-design-system.netlify.app/?path=/docs/components-switch--docs#disabled), [Helper Message](https://pine-design-system.netlify.app/?path=/docs/components-switch--docs#helper-message), [Invalid](https://pine-design-system.netlify.app/?path=/docs/components-switch--docs#invalid), [Label slot](https://pine-design-system.netlify.app/?path=/docs/components-switch--docs#label-slot)\n\n**Slots:**\n- `label` - Content displayed as the switch label in place of the `label` text. Clicking it toggles the switch.\n\n**Events:**\n- `pdsSwitchChange` - Emits an event on input change."
       },
       "attributes": [
         {