@pine-ds/core 4.8.0 → 4.9.1

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

@@ -15,10 +15,13 @@ export declare class PdsTooltip {
     private resolvedPlacement;
     private triggerEl;
     private contentDiv;
+    private lastCopiedHtml;
     private slotMutationObserver;
+    private contentSyncFrame;
     private currentPathname;
     private pathnameCheckInterval;
     private stopAutoUpdate;
+    private stopWatchingPortalHost;
     /**
      * Reference to the Host element
      */
@@ -90,6 +93,35 @@ export declare class PdsTooltip {
      */
     private repositionPortal;
     private createPortal;
+    /**
+     * The host's own content slot wrapper. Matched among direct children only, so a nested
+     * pds-tooltip inside the trigger slot isn't mistaken for this one's.
+     */
+    private get contentSlotWrapper();
+    /**
+     * Copies the slotted content (or the `content` prop's text) into a detached container. The
+     * portal holds copies so the framework that owns the slotted nodes keeps them.
+     */
+    private copySlottedContent;
+    /**
+     * While the tooltip is open, keeps the portal's copy in step with the slotted content at any
+     * depth: content that loads or re-renders after opening shows without reopening. Changes are
+     * batched to one re-copy per animation frame, and a re-copy that matches the last one shown is
+     * dropped, so screen readers aren't re-announced, iframes don't reload and the tooltip isn't
+     * repositioned for nothing. Only the hidden slot wrapper is observed, so copying into the portal
+     * can't trigger another sync.
+     */
+    private startContentSync;
+    private scheduleContentSync;
+    /**
+     * A copy's serialized HTML with Stencil's own hydration and scope classes removed from every
+     * `pds-*` descendant, so a nested component finishing hydration (or re-hydrating once reconnected
+     * inside the portal) isn't mistaken for a real content change. Without this, that class-only
+     * difference fails the equality check above and triggers a recopy that replaces still-loaded
+     * nodes — reloading any iframe or media the slotted content held.
+     */
+    private strippedHtml;
+    private stopContentSync;
     private removePortal;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -108,6 +108,11 @@ export namespace Components {
           * @defaultValue false
          */
         "hideIcon": boolean;
+        /**
+          * Accessible label announcing the alert's severity, read before the heading and message. Pass a translated string to localize it; defaults to English for each variant (`Error`, `Info`, `Success`, `Warning`). The `default` variant has no severity and announces none unless this is set; pass an empty string to announce none for any variant.
+          * @defaultValue undefined
+         */
+        "severityLabel"?: string;
         /**
           * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.
           * @default false
@@ -130,6 +135,11 @@ export namespace Components {
           * @defaultValue false
          */
         "badge"?: boolean;
+        /**
+          * Accessible label for the badge icon. Pass a translated string to localize it; defaults to English. Pass an empty string to make the badge decorative. Has no effect on dropdown avatars, where the trigger's `triggerLabel` owns the accessible name.
+          * @defaultValue 'Verified'
+         */
+        "badgeLabel"?: string;
         /**
           * A unique identifier used for the underlying component `id` attribute.
          */
@@ -853,11 +863,11 @@ export namespace Components {
          */
         "helperMessage": string;
         /**
-          * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.
+          * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers. Ignored when `variant` is `pill`.
          */
         "hideLabel": boolean;
         /**
-          * If `true`, the checkbox will visually appear as indeterminate. Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
+          * If `true`, the checkbox will visually appear as indeterminate. Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes). Has no visual style when `variant` is `pill`.
          */
         "indeterminate": boolean;
         /**
@@ -880,6 +890,11 @@ export namespace Components {
           * The value of the checkbox that is submitted with a form.
          */
         "value": string;
+        /**
+          * Sets the style variant of the checkbox. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
+          * @defaultValue default
+         */
+        "variant": 'default' | 'pill';
     }
     interface PdsChip {
         /**
@@ -1136,6 +1151,11 @@ export namespace Components {
           * @default 'fit-content'
          */
         "triggerWidth": string;
+        /**
+          * Determines whether the button trigger's label and the option labels should truncate and display with an ellipsis. When a label overflows, a `title` showing the full label will appear on hover. Chip options, custom layouts and group rows aren't affected.
+          * @defaultValue false
+         */
+        "truncate": boolean;
         /**
           * The value of the combobox input.
           * @default ''
@@ -1539,6 +1559,11 @@ export namespace Components {
           * @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.
+          * @defaultValue '(opens in a new tab)'
+         */
+        "externalLabel"?: string;
         /**
           * If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button. Ignored when `informational` is set.
          */
@@ -1764,6 +1789,11 @@ export namespace Components {
           * @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 empty string to make the icon decorative.
+          * @defaultValue '(opens in a new tab)'
+         */
+        "externalLabel"?: string;
         /**
           * The font size of the link's text.
           * @defaultValue lg
@@ -2259,7 +2289,7 @@ export namespace Components {
          */
         "errorMessage": string;
         /**
-          * Adds a border around the radio component for better visual separation.
+          * Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`.
           * @defaultValue false
          */
         "hasBorder": boolean;
@@ -2268,7 +2298,7 @@ export namespace Components {
          */
         "helperMessage": string;
         /**
-          * Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.
+          * Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers. Ignored when `variant` is `pill`.
          */
         "hideLabel": boolean;
         /**
@@ -2293,6 +2323,11 @@ export namespace Components {
           * The value of the radio that is submitted with a form.
          */
         "value": string;
+        /**
+          * Sets the style variant of the radio. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
+          * @defaultValue default
+         */
+        "variant": 'default' | 'pill';
     }
     /**
      * @lightDom renders-markup
@@ -2785,7 +2820,7 @@ export namespace Components {
     | 'strong'
     | 'em';
         /**
-          * If set or `true`, the text will be truncated. Must add a `width` to the element. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: While the text is overflowing, the element receives tabindex="0" so the tooltip can be reached by keyboard. Text that fits is left out of the tab order.
+          * If set or `true`, the text will be truncated. Must add a `width` to the element. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: While the text is overflowing, the element receives tabindex="0" so the tooltip can be reached by keyboard. Text that fits is left out of the tab order. Inside a link or button (including `pds-button`, `pds-link`, `pds-tab`, and `pds-dropdown-menu-item`) that holds no other truncated text or `pds-chip` with a `max-width`, no tab stop is added; the tooltip appears when that control receives keyboard focus.
          */
         "truncate"?: boolean;
         /**
@@ -2908,6 +2943,11 @@ export namespace Components {
           * The name of the icon to display in the toast.
          */
         "icon"?: string;
+        /**
+          * Accessible label announcing the toast's severity, read before the message. Pass a translated string to localize it; defaults to English (`Error`) for the `danger` type. Other types announce none unless this is set; pass an empty string to announce none.
+          * @defaultValue undefined
+         */
+        "severityLabel"?: string;
         /**
           * The type of toast to display. - default: Grey background (default) - danger: Red background - loading: With spinner animation
           * @default 'default'
@@ -3958,6 +3998,11 @@ declare namespace LocalJSX {
           * Event emitted when the dismiss button is clicked.
          */
         "onPdsAlertDismissClick"?: (event: PdsAlertCustomEvent<void>) => void;
+        /**
+          * Accessible label announcing the alert's severity, read before the heading and message. Pass a translated string to localize it; defaults to English for each variant (`Error`, `Info`, `Success`, `Warning`). The `default` variant has no severity and announces none unless this is set; pass an empty string to announce none for any variant.
+          * @defaultValue undefined
+         */
+        "severityLabel"?: string;
         /**
           * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.
           * @default false
@@ -3980,6 +4025,11 @@ declare namespace LocalJSX {
           * @defaultValue false
          */
         "badge"?: boolean;
+        /**
+          * Accessible label for the badge icon. Pass a translated string to localize it; defaults to English. Pass an empty string to make the badge decorative. Has no effect on dropdown avatars, where the trigger's `triggerLabel` owns the accessible name.
+          * @defaultValue 'Verified'
+         */
+        "badgeLabel"?: string;
         /**
           * A unique identifier used for the underlying component `id` attribute.
          */
@@ -4708,11 +4758,11 @@ declare namespace LocalJSX {
          */
         "helperMessage"?: string;
         /**
-          * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.
+          * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers. Ignored when `variant` is `pill`.
          */
         "hideLabel"?: boolean;
         /**
-          * If `true`, the checkbox will visually appear as indeterminate. Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
+          * If `true`, the checkbox will visually appear as indeterminate. Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes). Has no visual style when `variant` is `pill`.
          */
         "indeterminate"?: boolean;
         /**
@@ -4740,6 +4790,11 @@ declare namespace LocalJSX {
           * The value of the checkbox that is submitted with a form.
          */
         "value"?: string;
+        /**
+          * Sets the style variant of the checkbox. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
+          * @defaultValue default
+         */
+        "variant"?: 'default' | 'pill';
     }
     interface PdsChip {
         /**
@@ -5004,6 +5059,11 @@ declare namespace LocalJSX {
           * @default 'fit-content'
          */
         "triggerWidth"?: string;
+        /**
+          * Determines whether the button trigger's label and the option labels should truncate and display with an ellipsis. When a label overflows, a `title` showing the full label will appear on hover. Chip options, custom layouts and group rows aren't affected.
+          * @defaultValue false
+         */
+        "truncate"?: boolean;
         /**
           * The value of the combobox input.
           * @default ''
@@ -5419,6 +5479,11 @@ declare namespace LocalJSX {
           * @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.
+          * @defaultValue '(opens in a new tab)'
+         */
+        "externalLabel"?: string;
         /**
           * If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button. Ignored when `informational` is set.
          */
@@ -5672,6 +5737,11 @@ declare namespace LocalJSX {
           * @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 empty string to make the icon decorative.
+          * @defaultValue '(opens in a new tab)'
+         */
+        "externalLabel"?: string;
         /**
           * The font size of the link's text.
           * @defaultValue lg
@@ -6179,7 +6249,7 @@ declare namespace LocalJSX {
          */
         "errorMessage"?: string;
         /**
-          * Adds a border around the radio component for better visual separation.
+          * Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`.
           * @defaultValue false
          */
         "hasBorder"?: boolean;
@@ -6188,7 +6258,7 @@ declare namespace LocalJSX {
          */
         "helperMessage"?: string;
         /**
-          * Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.
+          * Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers. Ignored when `variant` is `pill`.
          */
         "hideLabel"?: boolean;
         /**
@@ -6217,6 +6287,11 @@ declare namespace LocalJSX {
           * The value of the radio that is submitted with a form.
          */
         "value"?: string;
+        /**
+          * Sets the style variant of the radio. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
+          * @defaultValue default
+         */
+        "variant"?: 'default' | 'pill';
     }
     /**
      * @lightDom renders-markup
@@ -6733,7 +6808,7 @@ declare namespace LocalJSX {
     | 'strong'
     | 'em';
         /**
-          * If set or `true`, the text will be truncated. Must add a `width` to the element. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: While the text is overflowing, the element receives tabindex="0" so the tooltip can be reached by keyboard. Text that fits is left out of the tab order.
+          * If set or `true`, the text will be truncated. Must add a `width` to the element. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: While the text is overflowing, the element receives tabindex="0" so the tooltip can be reached by keyboard. Text that fits is left out of the tab order. Inside a link or button (including `pds-button`, `pds-link`, `pds-tab`, and `pds-dropdown-menu-item`) that holds no other truncated text or `pds-chip` with a `max-width`, no tab stop is added; the tooltip appears when that control receives keyboard focus.
          */
         "truncate"?: boolean;
         /**
@@ -6879,6 +6954,11 @@ declare namespace LocalJSX {
           * Event emitted when the toast is dismissed, either manually or automatically.
          */
         "onPdsToastDismissed"?: (event: PdsToastCustomEvent<{ componentId?: string }>) => void;
+        /**
+          * Accessible label announcing the toast's severity, read before the message. Pass a translated string to localize it; defaults to English (`Error`) for the `danger` type. Other types announce none unless this is set; pass an empty string to announce none.
+          * @defaultValue undefined
+         */
+        "severityLabel"?: string;
         /**
           * The type of toast to display. - default: Grey background (default) - danger: Red background - loading: With spinner animation
           * @default 'default'
@@ -6943,10 +7023,12 @@ declare namespace LocalJSX {
         "hideIcon": boolean;
         "variant": 'default' | 'danger' | 'info' | 'success' | 'warning';
         "dismissLabel": string;
+        "severityLabel": string;
     }
     interface PdsAvatarAttributes {
         "alt": string | null;
         "badge": boolean;
+        "badgeLabel": string;
         "componentId": string;
         "dropdown": boolean;
         "image": string | null;
@@ -7116,6 +7198,7 @@ declare namespace LocalJSX {
         "name": string;
         "required": boolean;
         "value": string;
+        "variant": 'default' | 'pill';
     }
     interface PdsChipAttributes {
         "componentId": string;
@@ -7161,6 +7244,7 @@ declare namespace LocalJSX {
         "triggerWidth": string;
         "triggerVariant": 'secondary' | 'primary' | 'accent' | 'destructive';
         "triggerShape": 'pill' | 'input';
+        "truncate": boolean;
         "chipSentiment": ChipSentimentType;
         "chipLarge": boolean;
         "chipIcon": string;
@@ -7259,6 +7343,7 @@ declare namespace LocalJSX {
         "href": string | undefined;
         "informational": boolean;
         "external": boolean;
+        "externalLabel": string;
         "target": '_blank' | '_self' | '_parent' | '_top';
     }
     interface PdsDropdownMenuSeparatorAttributes {
@@ -7315,6 +7400,7 @@ declare namespace LocalJSX {
         "download": string;
         "componentId": string;
         "external": boolean;
+        "externalLabel": string;
         "target": '_blank' | '_self' | '_parent' | '_top';
         "variant": 'inline' | 'plain';
         "fontSize": 'sm' | 'md' | 'lg';
@@ -7431,6 +7517,7 @@ declare namespace LocalJSX {
         "name": string;
         "required": boolean;
         "value": string;
+        "variant": 'default' | 'pill';
     }
     interface PdsRadioGroupAttributes {
         "componentId": string;
@@ -7599,6 +7686,7 @@ declare namespace LocalJSX {
         "icon": string;
         "type": 'default' | 'danger' | 'loading';
         "dismissLabel": string;
+        "severityLabel": string;
     }
     interface PdsTooltipAttributes {
         "content": string;

package/dist/types/utils/aria-references.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The ARIA attributes that take ID references, and the element-reflection property each is forwarded
+ * through. An ID on a host can't reach an element inside its shadow root, so a component that
+ * delegates focus forwards the elements the IDs point at instead. A browser without ARIA element
+ * reflection gets none of them.
+ */
+export declare const ARIA_REFERENCE_PROPERTIES: {
+    readonly 'aria-controls': "ariaControlsElements";
+    readonly 'aria-describedby': "ariaDescribedByElements";
+    readonly 'aria-labelledby': "ariaLabelledByElements";
+};
+export declare const ARIA_REFERENCE_ATTRIBUTES: string[];
+/**
+ * Finds an element by ID in the host's tree, then in each shadow root that contains it, so a host
+ * inside another component's shadow root still reaches, say, a popover portal on document.body.
+ * The closest root wins when an ID repeats.
+ */
+export declare const findInAncestorRoots: (host: Element, id: string) => HTMLElement | null;
+/**
+ * Points the target's reflected ARIA properties at the elements the host's ID-reference attributes
+ * name, or clears them. Run it again whenever the attributes or the referenced elements may have
+ * changed: element references don't follow an ID to a node added or replaced later.
+ */
+export declare const forwardAriaReferences: (host: Element, target: Element) => void;

package/dist/types/utils/portal-target.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The native `<dialog>` or open `popover` (as pds-filter's) an element sits in, so a popup portaled
+ * there shares its top layer and a click in it isn't outside it; otherwise `document.body`.
+ * `closest()` stops at shadow boundaries and misses one that only wraps slotted content, so this
+ * walks assigned slots and shadow hosts, as pds-combobox does. `isHost` picks which ancestor counts.
+ */
+export declare function findPortalTarget(from: HTMLElement, isHost?: (el: Element) => boolean): HTMLElement;
+/**
+ * A modal dialog or open popover, which paints in the top layer above anything in the body, that
+ * sits in the document itself: the document's stylesheets don't reach into a shadow root.
+ */
+export declare function isTopLayerInDocument(el: Element): boolean;
+/**
+ * Calls `onClose` once `host` leaves the top layer (its dialog closes or its popover hides), and
+ * returns a function that stops listening.
+ */
+export declare function onTopLayerClose(host: HTMLElement, onClose: () => void): () => void;

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

@@ -0,0 +1,2 @@
+/** The controls Tab reaches in `root`, in order: visible ones, and one radio per group. */
+export declare function tabbableIn(root: Element): HTMLElement[];

package/dist/types/utils/truncation-tooltip.d.ts

@@ -28,16 +28,19 @@ export interface TruncationTooltipOptions {
      * The element whose keyboard focus shows the tooltip (default: `hostEl`).
      *
      * Pass the wrapping control when it sits outside `hostEl`, so focusing it
-     * still reveals the text once `manageTabIndex` is `false`.
+     * still reveals the text once `manageTabIndex` is `false`. Focus on another
+     * tab stop nested in it, beside `hostEl`, doesn't.
      */
     focusEl?: HTMLElement;
 }
+export declare const FOCUSABLE_WRAPPER = "a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role=\"option\"]";
 /**
  * Sets up automatic tooltip behavior for a truncated element.
  *
  * When the element's text overflows, hovering the host element or giving it
  * keyboard focus will display a tooltip showing the full text content. The
- * tooltip is rendered as a portal on document.body and positioned with Floating UI.
+ * tooltip is rendered as a portal on document.body, or in the modal dialog or open popover around
+ * the host, and positioned with Floating UI.
  *
  * Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
  *