@pine-ds/core 4.11.0 → 4.12.0

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

@@ -2,7 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import type { ChipSentimentType, ChipSizeType, ChipVariantType } from "../../utils/types";
 /**
  * @slot (default) - The chip's label text.
- * @part button
+ * @part button - Exposes the trigger button for styling. Appears only on the dropdown variant.
  * @part dot - Exposes the dot for styling, such as a custom color. Appears only when `dot` is set.
  * @part icon - Exposes the icon component for styling, such as a custom color. Appears only when `icon` is set.
  */
@@ -63,7 +63,7 @@ export declare class PdsChip {
     removeUrl?: string;
     /**
      * HTTP method to use for the remove action.
-     * Adds data-method and data-turbo-method attributes for Rails/Turbo compatibility.
+     * Maps to the `data-method` and `data-turbo-method` attributes on the remove link, for frameworks that read link methods from them.
      * Only applies when removeUrl is provided.
      */
     removeHttpMethod?: 'get' | 'post' | 'put' | 'patch' | 'delete';

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

@@ -7,6 +7,10 @@ import type { ComboboxOption, ComboboxSearchEventDetail, ComboboxLoadOptionsEven
  * @slot trigger-content - Custom content for the button trigger when customTriggerContent is true
  * @slot empty - Custom empty state message when no options match
  * @slot loading - Custom loading indicator
+ * @part button-trigger - Exposes the button trigger for styling. Appears only when `trigger` is `button`.
+ * @part chip-trigger - Exposes the chip trigger for styling. Appears only when `trigger` is `chip`.
+ * @part combobox - Exposes the outer container around the label, trigger and messages for styling.
+ * @part input - Exposes the native `input` element for styling. Appears only when `trigger` is `input`, the default.
  */
 export declare class PdsCombobox implements BasePdsProps {
     /** Reference to the host element */
@@ -46,10 +50,10 @@ export declare class PdsCombobox implements BasePdsProps {
      */
     dropdownPlacement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
     /**
-     * Width of the dropdown. Any valid CSS width value.
-     * @default '236px'
+     * Width of the dropdown, including its padding. Any valid CSS width value.
+     * Without it, the dropdown is 252px wide, 244px with grouped options and 236px with a panel search.
      */
-    dropdownWidth: string;
+    dropdownWidth?: string;
     /**
      * Where to mount the dropdown listbox (`host` or `body`, sometimes called “append to body”).
      * Use `body` inside scrollable containers (for example modals) so the list is not clipped by
@@ -77,14 +81,16 @@ export declare class PdsCombobox implements BasePdsProps {
      */
     noOptionsFoundLabel: string;
     /**
-     * Maximum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width value.
-     * @default '380px'
+     * Maximum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width
+     * value, including its padding.
+     * @default '388px'
      */
     flyoutMaxWidth: string;
     /**
-     * Minimum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width value.
-     * The flyout is as wide as its options, between this and `flyout-max-width`.
-     * @default '280px'
+     * Minimum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width
+     * value, including its padding. The flyout is as wide as its options, between this and
+     * `flyout-max-width`.
+     * @default '288px'
      */
     flyoutMinWidth: string;
     /**
@@ -198,7 +204,7 @@ export declare class PdsCombobox implements BasePdsProps {
      */
     chipDot: boolean;
     /**
-     * The value of the combobox input.
+     * The `value` of the selected option.
      */
     value: string;
     /**
@@ -377,14 +383,35 @@ export declare class PdsCombobox implements BasePdsProps {
      * Scrolls just enough to show `el`, as `scrollIntoView({ block: 'nearest' })` does. In the drill-in
      * panel it scrolls the list alone, and never sideways: while a drill-in slide offsets a row past
      * the list's edge, `scrollIntoView` also scrolls the list horizontally to reach it, which eats most
-     * of the slide. There it keeps clear of the sticky row back, through the scroll padding set for it,
-     * but doesn't scroll the page or a scrolling ancestor.
+     * of the slide. It doesn't scroll the page or a scrolling ancestor.
      */
     private scrollIntoViewNearest;
+    /**
+     * The element that scrolls the panel's rows. Every layer is a header (the search field, or a
+     * drilled-in group's row back) above the rows that scroll: drilled in, the group's options;
+     * otherwise the list under the search field, or the panel itself.
+     */
+    private get scrollListEl();
     private focusPanel;
     /** Switching display mode leaves no flyout or hover timer from the last one. */
     protected groupDisplayChanged(): void;
     protected openGroupChanged(next: HTMLOptGroupElement | null, previous: HTMLOptGroupElement | null): void;
+    private releaseHeightHold;
+    /** The dropdown's height before a drill, so componentDidRender can ease it to the new view's. */
+    private drillFromHeight?;
+    /**
+     * Hands the dropdown's height before and after a drill to the SCSS glide. Neither is known ahead,
+     * so they're measured: CSS can't animate to the height its content turns out to be.
+     */
+    private glideDrillHeight;
+    private onHeightGlideCancel;
+    /** Ends a glide, and a drill still waiting to glide, so nothing starts once it renders. */
+    private endHeightGlide;
+    /**
+     * With `max-height`, the panel's own scroll, set inline so it outranks the stylesheet: hidden under a
+     * fixed search field, and while the height glides (so no scrollbar flashes), otherwise auto.
+     */
+    private syncPanelOverflow;
     /** A flyout with no room beside the dropdown drills in, which can hide the focused search field too. */
     protected flyoutFallbackChanged(): void;
     /**
@@ -447,6 +474,8 @@ export declare class PdsCombobox implements BasePdsProps {
      * `flyout` drills in instead. `flyout-min-width` is resolved through CSS, so any length works.
      */
     private checkFlyoutRoom;
+    /** The dropdown element last placed on rendering, so each newly rendered one is placed once. */
+    private placedListboxEl?;
     private openDropdownPositioning;
     private startBodyPortalAutoUpdate;
     private stopBodyPortalAutoUpdate;
@@ -570,7 +599,15 @@ export declare class PdsCombobox implements BasePdsProps {
     private onButtonTriggerKeyDown;
     private onButtonTriggerKeyUp;
     private onComboboxFocusOut;
+    /** A pick that fills the field from its placeholder fades in; a value it loads with doesn't. */
+    private fadesValueIn;
     private handleOptionClick;
+    /** The row shown while options load: at the top of the list, or of a drilled-in group's options. */
+    private renderLoadingRow;
+    /** The row after the last option while more can load, inside whatever scrolls them. */
+    private renderLoadMoreRow;
+    /** Drilled into a group: the group and its place among the panel's entries; otherwise null. */
+    private drilledInEntry;
     private handleScroll;
     private renderDropdown;
     private onPanelMouseDown;

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

@@ -37,7 +37,9 @@ export declare class PdsCopytext {
     private initTruncationTooltip;
     private destroyTruncationTooltip;
     /**
-     * Event fired when copyText button is clicked.
+     * Emitted after a click, once the copy to the clipboard succeeds or fails.
+     * `detail` is `Copied to clipboard` on success, or `Error writing text to clipboard: ` followed by the error on failure.
+     * Not emitted when `navigator.clipboard` is undefined, as it is outside a secure context.
      */
     pdsCopyTextClick: EventEmitter<string>;
     private copyToClipboard;

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

@@ -19,13 +19,29 @@ export interface DatepickerPreset {
     /**
      * A built-in key (`today`, `yesterday`, `last-7-days`, `last-30-days`, `last-90-days`,
      * `this-month`, `last-month`, `this-quarter`, `last-quarter`, `this-year`, `last-year`,
-     * `year-to-date`, `last-12-months`), or your own key when `start` and `end` are set.
+     * `year-to-date`, `last-12-months`), or your own key when it has `startOffset` or `endOffset`,
+     * or both `start` and `end`.
      */
     key: string;
-    /** The text shown in the list. Built-in keys have English defaults; set it to translate them. */
+    /**
+     * The text shown in the list. Built-in keys have English defaults; set it to translate them. A key
+     * of your own needs one, or it is left out of the list.
+     */
     label?: string;
-    /** For a preset of your own: its first day, `YYYY-MM-DD`. */
+    /**
+     * For a preset of your own that follows today: its first day, in whole days from today, so `-6`
+     * is six days ago and `0` is today. Resolved against today every time the list is read, as a
+     * built-in is, so the range stays relative however long the page stays open. Set one offset and
+     * the other is today.
+     */
+    startOffset?: number;
+    /** For a preset of your own that follows today: its last day, in whole days from today. */
+    endOffset?: number;
+    /**
+     * For a preset of your own on fixed days: its first day, `YYYY-MM-DD`. Fixed days do not follow
+     * today, so prefer `startOffset` and `endOffset` for a range meant to stay relative.
+     */
     start?: string;
-    /** For a preset of your own: its last day, `YYYY-MM-DD`. */
+    /** For a preset of your own on fixed days: its last day, `YYYY-MM-DD`. */
     end?: string;
 }

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

@@ -192,8 +192,9 @@ export declare class PdsDatepicker {
      * Ranges listed beside the calendar in range mode. A comma-separated list of built-in keys
      * (`today`, `yesterday`, `last-7-days`, `last-30-days`, `last-90-days`, `this-month`,
      * `last-month`, `this-quarter`, `last-quarter`, `this-year`, `last-year`, `year-to-date`,
-     * `last-12-months`), or an array of `{ key, label?, start?, end? }` to relabel built-ins or add
-     * your own.
+     * `last-12-months`), or an array of `{ key, label?, startOffset?, endOffset?, start?, end? }` to
+     * relabel built-ins or add your own: `startOffset` and `endOffset` follow today, `start` and `end`
+     * are fixed days.
      */
     presets?: string | DatepickerPreset[];
     /**

package/dist/types/components/pds-datepicker/presets.d.ts

@@ -11,10 +11,11 @@ export interface ResolvedPreset {
  * is N days ending today; "this" and "last" periods are whole periods; "to date" ends today.
  */
 export declare function builtInPresetRange(key: string, now: Date): [Date, Date] | null;
+/** A preset's offset range: whole days from today, a missing or `null` one being today. `null` if unusable. */
+export declare function offsetPresetRange(preset: DatepickerPreset, now: Date): [Date, Date] | null;
 /**
  * Normalizes the `presets` prop: a comma-separated list of built-in keys, or an array of presets
- * that may relabel a built-in (for translation) or give their own `start` and `end`. Entries that
- * resolve to no range are dropped.
+ * that may relabel a built-in or give their own range. Unusable entries are dropped with a warning.
  */
 export declare function resolvePresets(presets: string | DatepickerPreset[] | undefined, now: Date): ResolvedPreset[];
 /** The first preset covering exactly this range. */

package/dist/types/components/pds-drawer/pds-drawer-content/pds-drawer-content.d.ts

@@ -1,8 +1,5 @@
 /**
- * Fills the drawer panel's height by default — unlike `pds-modal-content`,
- * which caps itself against the viewport for a centered, possibly-shorter
- * modal, a drawer panel is already edge-to-edge, so its content can simply
- * flex to fill whatever space the header and footer leave.
+ * Fills the space between the drawer header and footer.
  * @lightDom renders-markup
  */
 export declare class PdsDrawerContent {

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

@@ -1,4 +1,5 @@
 /**
+ * Holds the drawer's actions in a padded row aligned to the end, with a divider above.
  * @lightDom renders-markup
  */
 export declare class PdsDrawerFooter {

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

@@ -1,4 +1,5 @@
 /**
+ * Holds the drawer's title and close control in a padded row, spaced apart, with a divider below.
  * @lightDom renders-markup
  */
 export declare class PdsDrawerHeader {

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

@@ -3,7 +3,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * A side panel composed from `pds-modal`, non-modal by default.
  *
  * By default, unlike `pds-modal`, the page stays interactive while a drawer
- * is open: no dimming, no blur, no scroll lock, no click blocking.
+ * is open: no dimming, no blur, no click blocking.
  * `pds-drawer` renders a `pds-modal` internally with `disableTopLayer` on and
  * its backdrop suppressed, and adds the edge, width and dismiss behavior a
  * side panel needs on top. With `modal`, it opens that `pds-modal` in the top
@@ -25,8 +25,8 @@ export declare class PdsDrawer {
      */
     open: boolean;
     /**
-     * Which edge of the viewport the drawer is docked to. Logical, so this is
-     * free under RTL — `end` is the inline-end edge regardless of direction.
+     * Which edge of the viewport the drawer is docked to. Logical: `end` is the
+     * inline-end edge, so an `end` drawer docks on the left in right-to-left layouts.
      * @default 'end'
      */
     side: 'start' | 'end';
@@ -52,9 +52,7 @@ export declare class PdsDrawer {
     /**
      * Whether the drawer can be dismissed with a pointerdown outside it (in a
      * `modal` drawer, a click on its backdrop).
-     * Replaces `pds-modal`'s `backdropDismiss`.
-     * This also gates Escape, matching how `backdropDismiss` gates Escape on
-     * `pds-modal` today: setting this to `false` means the close button is the
+     * Setting it to `false` also turns off Escape, so the close button is the
      * only way out.
      *
      * A trigger outside the drawer should only ever set `open` to `true` and

package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.d.ts

@@ -1,6 +1,8 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import type { BasePdsProps } from "../../../utils/interfaces";
 /**
+ * @slot (default) - The item's label.
+ * @slot start - Content to display before the item's label, such as a `pds-icon`. A `pds-icon` without an `aria-label` or `aria-labelledby` is decorative; a named one is announced before the label, so leave decorative icons unnamed.
  * @part button - Exposes the item's inner element for styling. Appears on button and informational items, not on links.
  */
 export declare class PdsDropdownMenuItem implements BasePdsProps {
@@ -10,12 +12,12 @@ export declare class PdsDropdownMenuItem implements BasePdsProps {
      */
     componentId: string;
     /**
-     * It determines whether or not the dropdown-item is destructive.
+     * Determines whether or not the dropdown menu item is destructive.
      * @defaultValue false
      */
     destructive: boolean;
     /**
-     * It determines whether or not the dropdown-item is disabled.
+     * Determines whether or not the dropdown menu item is disabled.
      * @defaultValue false
      */
     disabled: boolean;
@@ -27,40 +29,41 @@ export declare class PdsDropdownMenuItem implements BasePdsProps {
      */
     download?: string;
     /**
-     *  If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.
+     *  If provided, renders the dropdown menu item as an anchor (`<a>`) element instead of a button.
      *  Ignored when `informational` is set.
      */
     href: string | undefined;
     /**
-     * It determines whether or not the dropdown-item is informational: text that the arrow keys
+     * Determines whether or not the dropdown menu item is informational: text that the arrow keys
      * reach but that can't be activated. Takes precedence over `href` and `destructive`.
      * Screen readers announce it as dimmed or unavailable, the same way as a disabled item.
      * @defaultValue false
      */
     informational: boolean;
     /**
-     * Determines whether the link should open in a new tab and display an external icon.
-     * This is a simpler alternative to using `target="_blank"` for the common case.
-     * Ignored when `informational` is set.
+     * Shows the external-link (launch) icon. Opens in a new tab unless `target` says otherwise.
+     * Only applies when href is set. Ignored when `informational` is set.
      * @defaultValue false
      */
     external: boolean;
     /**
-     * Accessible label for the external-link icon, passed to the inner
-     * `pds-link`. Pass a translated string to localize it; defaults to English.
-     * Pass an empty string to make the icon decorative.
+     * Accessible label for the icon that `external` shows, passed to the inner
+     * `pds-link` and appended to the item'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 when href is provided.
-     * Takes precedence over the `external` prop if both are set.
+     * Overrides the new-tab default of `external`; the icon still shows.
      * Only applies when href is set. Ignored when `informational` is set.
      * @defaultValue undefined
      */
     target?: '_blank' | '_self' | '_parent' | '_top';
     /**
-     * Emitted when the dropdown-item is clicked.
+     * Emitted when the dropdown menu item is clicked.
      *
      */
     pdsClick: EventEmitter<{
@@ -69,15 +72,16 @@ export declare class PdsDropdownMenuItem implements BasePdsProps {
         content: string;
     }>;
     /**
-     * Trigger the click event
+     * Trigger the click event. Does nothing when the item is disabled or informational.
      */
     clickItem(): Promise<void>;
     private handleClick;
-    hasFocus: boolean;
-    private handleFocus;
-    private handleBlur;
+    private startSlotEl?;
+    private updateStartSlotEmpty;
+    private renderContent;
     private handleInformationalKeyDown;
     private renderElement;
+    private innerAnchor;
     private handleKeyDown;
     render(): any;
 }

package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.d.ts

@@ -5,7 +5,7 @@ export declare class PdsDropdownMenuSeparator implements BasePdsProps {
      */
     componentId: string;
     /**
-     * It determines whether or not the dropdown-item is disabled.
+     * Has no effect. A separator can't be focused or activated.
      * @defaultValue false
      */
     disabled: boolean;

package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu.d.ts

@@ -1,6 +1,8 @@
 import type { BasePdsProps } from "../../utils/interfaces";
 import { PlacementType } from "../../utils/types";
 /**
+ * @slot trigger - The trigger element for the dropdown menu. It receives `aria-expanded` and `aria-haspopup`, so slot the focusable control itself, such as a `pds-button`, not a wrapper around it.
+ * @slot (default) - The menu items: `pds-dropdown-menu-item` and `pds-dropdown-menu-separator` elements, or raw `<a>` and `<button>` elements.
  * @slot header - Non-interactive content displayed above the menu items inside the dropdown panel. It renders outside the menu role, so assistive tech reads it as plain content rather than as a menu item.
  * @part menu-panel - Exposes the dropdown menu container for styling.
  */
@@ -11,7 +13,9 @@ export declare class PdsDropdownMenu implements BasePdsProps {
     private isOpen;
     private menuItems;
     private cleanupAutoUpdate;
+    private openCount;
     private triggerObserver;
+    private triggerVisibility;
     host: HTMLPdsDropdownMenuElement;
     currentFocusIndex: number;
     hasHeader: boolean;
@@ -34,6 +38,9 @@ export declare class PdsDropdownMenu implements BasePdsProps {
     private handleSlotChange;
     private toggleDropdown;
     private openDropdown;
+    private capPanelHeight;
+    private watchTriggerVisibility;
+    private stopWatchingTriggerVisibility;
     private closeDropdown;
     private isFocusInMenu;
     private focusTrigger;

package/dist/types/components/pds-filters/pds-filter/pds-filter.d.ts

@@ -2,11 +2,8 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import type { BasePdsProps } from "../../../utils/interfaces";
 import type { PdsFilterOpenEventDetail, PdsFilterCloseEventDetail, PdsFilterClearEventDetail, PdsFilterVariant } from './filter-interface';
 /**
- * Individual filter component with cross-browser popover positioning.
- *
- * Uses a hybrid approach for optimal cross-browser compatibility:
- * - Modern browsers: CSS anchor positioning + JavaScript flip classes
- * - Fallback browsers: JavaScript positioning with viewport boundary detection
+ * A single filter in `pds-filters`: a trigger button that opens a popover holding the filter controls.
+ * The `clear` variant has no popover and emits `pdsFilterClear` instead.
  *
  * @part button - Exposes the trigger button element for styling.
  * @part button-content - Exposes the button content container for styling.
@@ -20,6 +17,7 @@ export declare class PdsFilter implements BasePdsProps {
     private popoverEl;
     private scrollRAF;
     private lastScrollTime;
+    private truncationTooltip;
     /**
      * A unique identifier used for the underlying component `id` attribute.
      */
@@ -36,6 +34,7 @@ export declare class PdsFilter implements BasePdsProps {
     icon?: string;
     /**
      * The text content displayed in the trigger button.
+     * When text overflows, a tooltip showing the full text will appear on hover/focus.
      */
     text?: string;
     /**
@@ -54,12 +53,14 @@ export declare class PdsFilter implements BasePdsProps {
      * Event emitted when the clear variant is clicked.
      */
     pdsFilterClear: EventEmitter<PdsFilterClearEventDetail>;
+    connectedCallback(): void;
     /**
      * Component lifecycle: Clean up when disconnected from DOM.
      * Prevents memory leaks by canceling pending operations and closing popovers.
      */
     disconnectedCallback(): void;
     componentDidRender(): void;
+    private syncTruncationTooltip;
     /**
      * Handle native popover toggle events directly on the element
      * This is needed for browsers with native Popover API support

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

@@ -0,0 +1,12 @@
+export interface ImageLoadEventDetail {
+    /** The URL the browser loaded, which can be a `srcset` candidate rather than `src`. */
+    currentSrc: string;
+    /** The loaded image's intrinsic height in pixels. */
+    naturalHeight: number;
+    /** The loaded image's intrinsic width in pixels. */
+    naturalWidth: number;
+}
+export interface ImageErrorEventDetail {
+    /** The URL that failed to load, which can be a `srcset` candidate rather than `src`. */
+    currentSrc: string;
+}

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;