@pine-ds/core 4.10.0 → 4.12.0

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

@@ -1,8 +1,11 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { ImageRatioType } from "../../utils/types";
+import type { ImageErrorEventDetail, ImageLoadEventDetail } from './image-interface';
 export declare class PdsImage {
     /**
-     * The image's alt tag. If none is provided,
-     * it will default to an empty string, which is desired for
-     * decorative images.
+     * The image's alt text. Defaults to an empty string, which marks the image
+     * as decorative and hides it from screen readers, so set it on any image
+     * that carries information.
      * @defaultValue ''
      */
     alt?: string;
@@ -11,9 +14,15 @@ export declare class PdsImage {
      */
     componentId: string;
     /**
-     * The height of the image in pixels. Setting this will
-     * devote space in the layout to prevent layout
-     * shifts when the image is loaded.
+     * Determines how the image fills the shape set by `ratio`.
+     * Has no effect if `ratio` is not set.
+     * @defaultValue cover
+     */
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    /**
+     * The height of the image in pixels. `height: auto` lets the loaded image's own
+     * proportions decide its rendered height, so unlike `width` this does not reserve
+     * space before the image loads.
      */
     height?: number;
     /**
@@ -21,6 +30,13 @@ export declare class PdsImage {
      * @defaultValue eager
      */
     loading?: 'eager' | 'lazy';
+    /**
+     * The aspect ratio the image is sized to, cropping whatever overflows the shape. A preset
+     * (`square` 1/1, `landscape` 4/3, `wide` 16/9, `portrait` 3/4, `tall` 9/16) or any custom
+     * CSS ratio, such as `21 / 9`. Use this, not `height` and `width`, to crop: those only
+     * reserve space, and only `width` reliably does even that.
+     */
+    ratio?: ImageRatioType | (string & Record<never, never>);
     /**
      * Determines the intended display size of an image
      * within certain breakpoints. Has no effect if `srcset`
@@ -37,10 +53,54 @@ export declare class PdsImage {
      */
     srcset?: string;
     /**
-     * The width of the image in pixels. Setting this will
-     * devote space in the layout to prevent layout
-     * shifts when the image is loaded.
+     * The width of the image in pixels. This reserves the image's width before it
+     * loads, but not its height: to reserve the height too, set
+     * `--dimension-aspect-ratio` to the image's own proportions.
      */
     width?: number;
+    /**
+     * Emitted when the image loads. Also emitted on first render for an image that
+     * finished loading before the component could listen, such as a server-rendered
+     * image. Emitted again after `src` or `srcset` changes and the new image loads, or
+     * when the browser picks a different `srcset` candidate, such as on a resize. Bubbles
+     * and is composed, so a listener on an ancestor gets every `pds-image`'s events —
+     * check `event.target` when more than one is in scope.
+     */
+    pdsImageLoad: EventEmitter<ImageLoadEventDetail>;
+    /**
+     * Emitted when the image fails to load, such as for a broken or empty `src`. An image
+     * with no `src` or `srcset` at all emits neither event, since it has nothing to load.
+     * Emitted again after `src` or `srcset` changes and the new image fails. Bubbles and is
+     * composed, so a listener on an ancestor gets every `pds-image`'s events — check
+     * `event.target` when more than one is in scope.
+     */
+    pdsImageError: EventEmitter<ImageErrorEventDetail>;
+    private imageEl?;
+    /**
+     * The source and event last emitted. A cached image can report `complete` on first
+     * render and still fire its own `load` event afterwards, so this keeps one source
+     * from emitting twice. A `load` still replaces an `error` for the same source, in
+     * case `decode()` misjudged an image that did load.
+     */
+    private settled;
+    handleSourceChange(): void;
+    componentDidLoad(): void;
+    private hasSource;
+    /**
+     * The resolved absolute URL `src` would become once applied, or `undefined` for no
+     * `src`. Resolving it (rather than comparing raw attribute text) matches `img.src`
+     * even when Stencil skipped writing the attribute because the resolved value already
+     * equaled it, such as a `src` change from a relative to an equivalent absolute URL.
+     */
+    private resolvedSrc;
+    /**
+     * Whether the inner image is showing the current `src` and `srcset`. Right after
+     * either changes, and before the next render applies it, an event can still arrive
+     * for the old source, and it shouldn't be emitted for the new one.
+     */
+    private showsCurrentSource;
+    private emitLoad;
+    private emitError;
+    private imageRatio;
     render(): any;
 }

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

@@ -6,6 +6,11 @@ import { InputChangeEventDetail, InputInputEventDetail } from './input-interface
  * @slot prepend - Content to be displayed before the input field
  * @slot suffix - Content that is displayed visually within the input field after the input field
  * @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 append - Exposes the wrapper around the `append` slot for styling. Appears only when the `append` slot has content.
+ * @part prefix - Exposes the wrapper around the `prefix` slot for styling. Appears only when the `prefix` slot has content.
+ * @part prepend - Exposes the wrapper around the `prepend` slot for styling. Appears only when the `prepend` slot has content.
+ * @part suffix - Exposes the wrapper around the `suffix` slot for styling. Appears only when the `suffix` slot has content.
  */
 export declare class PdsInput {
     private nativeInput?;
@@ -44,9 +49,11 @@ export declare class PdsInput {
      */
     pdsBlur: EventEmitter<FocusEvent>;
     /**
-     * Emitted when the value has changed.
+     * Emitted when the user changes the value and then presses `Enter` or leaves the field.
+     * `detail` has `value`, as a string, 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.
      */
     pdsChange: EventEmitter<InputChangeEventDetail>;
     /**
@@ -54,7 +61,10 @@ export declare class PdsInput {
      */
     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 value as a string, and `event`, the native `input` event.
+     *
+     * This event will not emit when programmatically setting the `value` property.
      */
     pdsInput: EventEmitter<InputInputEventDetail>;
     /**
@@ -75,7 +85,7 @@ export declare class PdsInput {
      */
     componentId: string;
     /**
-     * Sets the number of milliseconds to wait before updating the value.
+     * Sets the number of milliseconds to wait after each input event before emitting `pdsInput`.
      */
     debounce?: number;
     /**
@@ -83,7 +93,7 @@ export declare class PdsInput {
      */
     disabled?: boolean;
     /**
-     * Specifies the error message and provides an error-themed treatment to the field.
+     * Displays an error message below the input and gives the field error styling. It becomes the input's accessible description only while `invalid` is set.
      */
     errorMessage?: string;
     /**
@@ -91,7 +101,7 @@ export declare class PdsInput {
      */
     helperMessage?: string;
     /**
-     * Determines whether or not the input field is invalid or throws an error.
+     * Determines whether or not the input is invalid.
      */
     invalid?: boolean;
     /**
@@ -145,7 +155,7 @@ export declare class PdsInput {
     step?: string;
     /**
      * Determines the type of control that will be displayed
-     * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`
+     * `'email'`, `'number'`, `'password'`, `'search'`, `'tel'`, `'text'`, `'url'`
      * @defaultValue "text"
      */
     type: string;

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;