@pine-ds/core 4.7.1 → 4.8.0

package/dist/esm/pds-popover.entry.js

@@ -48,8 +48,12 @@ const cssEscape = (value) => {
 
 const pdsPopoverCss = () => `:host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__content-slot-wrapper{display:none}`;
 
-/** Open auto popovers, in the order they opened: Escape goes to the last one it applies to. */
-const openAutoPopovers = [];
+/** Open popovers that close on Escape, in the order they opened: Escape goes to the last one it applies to. */
+const popoversTakingEscape = [];
+/** Hovering the trigger waits this long before opening, so a pointer passing over it doesn't open it. */
+const HOVER_OPEN_DELAY_MS = 120;
+/** Leaving the trigger and panel waits this long before closing, which covers the gap between them. */
+const HOVER_CLOSE_DELAY_MS = 200;
 /** The focused element, followed down through shadow roots to the control that has focus. */
 function deepActiveElement() {
     var _a;
@@ -109,11 +113,29 @@ const PdsPopover = class {
          * Timestamp when popover was opened (for preventing immediate close)
          */
         this.openTimestamp = 0;
+        /**
+         * Set while hover holds the popover open, until a click pins it or it closes
+         */
+        this.hoverOpened = false;
+        /**
+         * Set when the pointer left while focus was in the panel, so focus leaving it closes it instead
+         */
+        this.closeWhenFocusLeaves = false;
+        /**
+         * How far the pointer was from the panel at its last move after leaving the trigger
+         */
+        this.panelDistance = Infinity;
         /**
          * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
          * @defaultValue "show"
          */
         this.popoverTargetAction = 'show';
+        /**
+         * Determines how the popover opens. With `hover`, it also opens when the pointer rests on the trigger and closes
+         * when the pointer leaves, until a click on the trigger keeps it open. Enter or Space on the trigger opens it either way.
+         * @defaultValue "click"
+         */
+        this.openOn = 'click';
         /**
          * Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover.
          * Manual popovers require the consumer to handle the visibility of the popover.
@@ -124,6 +146,11 @@ const PdsPopover = class {
          * @defaultValue 352
          */
         this.maxWidth = 352;
+        /**
+         * Sets the padding of the popover content
+         * @defaultValue "md"
+         */
+        this.padding = 'md';
         /**
          * Determines the preferred position of the popover
          * @defaultValue "right"
@@ -138,6 +165,7 @@ const PdsPopover = class {
             // Clean up previous trigger's event listener if it exists
             if (this.triggerEl != null) {
                 this.triggerEl.removeEventListener('click', this.handleTriggerClick);
+                this.stopListeningForHover(this.triggerEl);
             }
             if (assignedElements.length > 0) {
                 // Use the first assigned element as the trigger
@@ -145,6 +173,7 @@ const PdsPopover = class {
                 this.linkTriggerToPortal();
                 // Attach click listener to handle popover visibility
                 this.triggerEl.addEventListener('click', this.handleTriggerClick);
+                this.listenForHover(this.triggerEl);
             }
             else {
                 this.triggerEl = null;
@@ -171,6 +200,13 @@ const PdsPopover = class {
             if (!anchorWithHref) {
                 event.preventDefault();
             }
+            if (this.openOn === 'hover' && this.popoverTargetAction !== 'hide') {
+                const heldByHover = this.hoverOpened;
+                this.pin();
+                // Pinning, not toggling: the hover before a click has already opened it.
+                if (heldByHover)
+                    return;
+            }
             // Execute the appropriate action based on popoverTargetAction prop
             switch (this.popoverTargetAction) {
                 case 'show':
@@ -185,6 +221,60 @@ const PdsPopover = class {
                     break;
             }
         };
+        // A tap sends touch pointer events and then a click, so touch takes the click path alone.
+        this.handleHoverEnter = (event) => {
+            if (event.pointerType === 'touch')
+                return;
+            this.clearHoverTimers();
+            if (this.active)
+                return;
+            this.hoverOpenTimer = setTimeout(() => {
+                this.hoverOpenTimer = undefined;
+                if (this.active || this.portalEl == null)
+                    return;
+                this.hoverOpened = true;
+                this.show();
+            }, HOVER_OPEN_DELAY_MS);
+        };
+        this.handleHoverLeave = (event) => {
+            if (event.pointerType === 'touch')
+                return;
+            this.clearHoverTimers();
+            if (!this.hoverOpened)
+                return;
+            this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
+            if (event.currentTarget !== this.triggerEl)
+                return;
+            this.panelDistance = this.distanceToPanel(event);
+            document.addEventListener('pointermove', this.handleMoveTowardPanel);
+        };
+        // A slow diagonal from the trigger to a panel shorter than it runs beside the panel for longer
+        // than the close delay, so each move that brings the pointer closer starts the delay again.
+        this.handleMoveTowardPanel = (event) => {
+            const distance = this.distanceToPanel(event);
+            if (distance < this.panelDistance) {
+                clearTimeout(this.hoverCloseTimer);
+                this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
+            }
+            this.panelDistance = distance;
+        };
+        this.handleHoverFocusOut = (event) => {
+            if (!this.closeWhenFocusLeaves || containsComposed(this.portalEl, event.relatedTarget))
+                return;
+            this.closeWhenFocusLeaves = false;
+            this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
+        };
+        this.closeFromHover = () => {
+            this.clearHoverTimers();
+            if (!this.hoverOpened)
+                return;
+            // Content shown on hover stays while focus is in it (WCAG 1.4.13).
+            if (containsComposed(this.portalEl, deepActiveElement())) {
+                this.closeWhenFocusLeaves = true;
+                return;
+            }
+            this.hide();
+        };
         /** The focus style copied into a shadow root the panel opened in, which `document.head` can't reach. */
         this.shadowFocusStyle = null;
         /** The dialog the panel was opened in, closed along with it. */
@@ -206,6 +296,32 @@ const PdsPopover = class {
             }
         };
     }
+    openOnChanged() {
+        this.pin();
+        this.stopListeningForHover(this.triggerEl);
+        this.stopListeningForHover(this.portalEl);
+        // Out of the page, connectedCallback binds them when it comes back.
+        if (!this.isComponentMounted)
+            return;
+        this.listenForHover(this.triggerEl);
+        this.listenForHover(this.portalEl);
+    }
+    applyPadding() {
+        if (this.portalEl != null)
+            this.portalEl.style.padding = this.paddingToken();
+    }
+    paddingToken() {
+        switch (this.padding) {
+            case 'none':
+                return 'var(--pine-dimension-none)';
+            case 'xs':
+                return 'var(--pine-dimension-xs)';
+            case 'sm':
+                return 'var(--pine-dimension-sm)';
+            default:
+                return 'var(--pine-dimension-md)';
+        }
+    }
     restorePlacementDefault(newValue) {
         this.placement = restoreReflectedDefault(this.el, 'placement', newValue, 'right');
     }
@@ -256,6 +372,48 @@ const PdsPopover = class {
         // Skips values already in place, so the trigger observer's own callback doesn't loop.
         return setAttributesIfChanged(this.triggerEl, { 'aria-expanded': String(this.active), 'aria-controls': this.portalEl.id });
     }
+    listenForHover(el) {
+        if (this.openOn !== 'hover' || el == null)
+            return;
+        el.addEventListener('pointerenter', this.handleHoverEnter);
+        el.addEventListener('pointerleave', this.handleHoverLeave);
+        el.addEventListener('focusout', this.handleHoverFocusOut);
+    }
+    stopListeningForHover(el) {
+        if (el == null)
+            return;
+        el.removeEventListener('pointerenter', this.handleHoverEnter);
+        el.removeEventListener('pointerleave', this.handleHoverLeave);
+        el.removeEventListener('focusout', this.handleHoverFocusOut);
+    }
+    distanceToPanel({ clientX, clientY }) {
+        const panel = this.portalEl.getBoundingClientRect();
+        return Math.hypot(Math.max(panel.left - clientX, 0, clientX - panel.right), Math.max(panel.top - clientY, 0, clientY - panel.bottom));
+    }
+    /**
+     * Keeps a popover that hover opened open, closing from then on as one opened by a click does. A
+     * manual one gives up Escape again, which it took only while hover held it.
+     */
+    pin() {
+        var _a;
+        this.clearHoverTimers();
+        if (!this.hoverOpened)
+            return;
+        this.hoverOpened = false;
+        if (this.popoverType === 'auto')
+            return;
+        this.forgetOpen();
+        (_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-pds-popover-open');
+        document.removeEventListener('keydown', this.boundEscapeKeyHandler);
+    }
+    clearHoverTimers() {
+        clearTimeout(this.hoverOpenTimer);
+        clearTimeout(this.hoverCloseTimer);
+        this.hoverOpenTimer = undefined;
+        this.hoverCloseTimer = undefined;
+        this.closeWhenFocusLeaves = false;
+        document.removeEventListener('pointermove', this.handleMoveTowardPanel);
+    }
     // componentDidLoad doesn't run again when a popover comes back, so rebuild whatever
     // disconnectedCallback tore down. Each step is a no-op when nothing was.
     connectedCallback() {
@@ -265,6 +423,7 @@ const PdsPopover = class {
         this.isComponentMounted = true;
         this.createPortal();
         (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handleTriggerClick);
+        this.listenForHover(this.triggerEl);
         this.observeTrigger();
         this.linkTriggerToPortal();
         // Still open after a move: the trigger moved, so the portal follows it, into the dialog it
@@ -299,6 +458,7 @@ const PdsPopover = class {
         if (this.triggerEl != null) {
             this.triggerEl.removeEventListener('click', this.handleTriggerClick);
         }
+        this.stopListeningForHover(this.triggerEl);
         (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.triggerObserver = null;
         // Clean up all event listeners
@@ -307,6 +467,8 @@ const PdsPopover = class {
         document.removeEventListener('submit', this.handleSubmitFromPanel, true);
         // Clear any pending debounce timers
         this.clearDebounceTimers();
+        this.clearHoverTimers();
+        this.hoverOpened = false;
         // Remove portal from DOM
         this.removePortal();
     }
@@ -340,7 +502,7 @@ const PdsPopover = class {
         this.portalEl.style.borderRadius = 'var(--pine-dimension-125)';
         this.portalEl.style.boxShadow = 'var(--pine-box-shadow-200)';
         this.portalEl.style.margin = 'var(--pine-dimension-none)';
-        this.portalEl.style.padding = 'var(--pine-dimension-md)';
+        this.portalEl.style.padding = this.paddingToken();
         // Generate unique ID
         if (!this.componentId) {
             (_a = this.generatedPortalId) !== null && _a !== void 0 ? _a : (this.generatedPortalId = `pds-popover-portal-${PdsPopover.instanceCounter++}`);
@@ -354,6 +516,7 @@ const PdsPopover = class {
         // Add global focus styles to match Pine design system
         // This is done after appending to ensure it's part of the document and can access CSS variables
         this.addPortalFocusStyles();
+        this.listenForHover(this.portalEl);
     }
     /**
      * Adds Pine design system focus styles and dark mode border to the portal element
@@ -481,8 +644,8 @@ const PdsPopover = class {
         // Update portal content with latest slot content
         this.updatePortalContent();
         // Show portal. The attribute tells a modal around it that this popover takes Escape first; only
-        // an auto popover listens for Escape.
-        if (this.popoverType === 'auto')
+        // an auto popover, or one hover opened, listens for Escape.
+        if (this.popoverType === 'auto' || this.hoverOpened)
             this.portalEl.setAttribute('data-pds-popover-open', '');
         this.portalEl.style.display = 'block';
         this.portalEl.style.opacity = '1';
@@ -496,11 +659,16 @@ const PdsPopover = class {
         // Add scroll and resize listeners for repositioning (always)
         this.addScrollAndResizeListeners();
         document.addEventListener('submit', this.handleSubmitFromPanel, true);
-        // Add document listeners for light dismiss and escape key (auto type only)
+        // Add document listeners for light dismiss and escape key (auto type only), or for the escape
+        // key alone while hover holds a manual popover open
         if (this.popoverType === 'auto') {
-            openAutoPopovers.push(this);
+            popoversTakingEscape.push(this);
             this.addLightDismissListeners();
         }
+        else if (this.hoverOpened) {
+            popoversTakingEscape.push(this);
+            document.addEventListener('keydown', this.boundEscapeKeyHandler);
+        }
         // Emit open event
         this.pdsPopoverOpen.emit({
             componentId: this.componentId,
@@ -511,9 +679,11 @@ const PdsPopover = class {
      * Closes the popover programmatically
      */
     async hide() {
+        this.clearHoverTimers();
         if (!this.active || !this.portalEl)
             return;
         this.active = false;
+        this.hoverOpened = false;
         this.unwatchDialogClose();
         // Restoring the content drops its focus to the body, so check where focus is first. In a
         // shadow root, document.activeElement is only its host.
@@ -592,9 +762,9 @@ const PdsPopover = class {
         this.portalEl.style.border = root instanceof ShadowRoot && closest('[data-theme="dark"]', this.el) ? 'var(--pine-border)' : '';
     }
     forgetOpen() {
-        const index = openAutoPopovers.indexOf(this);
+        const index = popoversTakingEscape.indexOf(this);
         if (index >= 0)
-            openAutoPopovers.splice(index, 1);
+            popoversTakingEscape.splice(index, 1);
     }
     /**
      * Whether an Escape is this popover's. One from a dialog the popover isn't in belongs to that
@@ -703,7 +873,7 @@ const PdsPopover = class {
             return;
         // Like the native Popover API, Escape closes only the top popover: the last one opened that
         // it applies to. Every open popover hears it, so each checks whether it's that one.
-        const top = [...openAutoPopovers].reverse().find(popover => popover.takesEscapeFrom(event));
+        const top = [...popoversTakingEscape].reverse().find(popover => popover.takesEscapeFrom(event));
         if (top !== this)
             return;
         // Take the key, so the dialog or modal around it doesn't close too.
@@ -828,10 +998,16 @@ const PdsPopover = class {
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (h(Host, { key: 'da8a0c715df1199231b1265085f3f9ae0234032d', id: this.componentId }, h("span", { key: 'f35023492399420829cec2e88556462f5ac1663e', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '38ebe92eebb87665467b3f92ff94dc8095450063', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '8917930f4520544d14bbd68b4c7936dd60af19e3', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '28d3f9112256edd95721a79a7072a9e35a3712bf', onSlotchange: this.handleContentSlotChange }))));
+        return (h(Host, { key: 'e48b897acdc9e89f2e6b1449e7a358da7da1060c', id: this.componentId }, h("span", { key: 'b83b2c234b07703c2c850a9991c94939ed2fdaf7', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '0a7f7829ee445fd57cf824ebee1409b3c571f983', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '8c1fe2d4d7c4342b4bd5eb4c56e596f17b4e14fa', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '4ccfce1f335acbc436f7942e497f5d360f849d48', onSlotchange: this.handleContentSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "openOn": [{
+                "openOnChanged": 0
+            }],
+        "padding": [{
+                "applyPadding": 0
+            }],
         "placement": [{
                 "restorePlacementDefault": 0
             }]

package/dist/esm/pds-radio-group.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
 import { m as messageId } from './form-BuRbS7Hp.js';
-import { b as danger } from './index-BJXk71tO.js';
+import { b as danger } from './index-BWDu62Mo.js';
 import './keep-hydrated-BLG6RDBt.js';
 
 const pdsRadioGroupCss = () => `.sc-pds-radio-group-h{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-sm)}.is-invalid.sc-pds-radio-group-h .pds-radio-group__message--error.sc-pds-radio-group{color:var(--pine-color-text-message-danger)}.pds-radio-group__label.sc-pds-radio-group{color:var(--pine-color-text-label);font:var(--pine-typography-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-radio-group__radios.sc-pds-radio-group{display:-ms-flexbox;display:flex;gap:var(--pds-radio-group-gap, var(--pine-dimension-xs))}.pds-radio-group__radios--row.sc-pds-radio-group{-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.pds-radio-group__radios--column.sc-pds-radio-group{-ms-flex-direction:column;flex-direction:column}.pds-radio-group__message.sc-pds-radio-group{color:var(--pine-color-text-message);font:var(--pine-typography-body);width:100%}.pds-radio-group__message--error.sc-pds-radio-group{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio-group__message--error.sc-pds-radio-group pds-icon.sc-pds-radio-group{-webkit-margin-before:var(--pine-dimension-050);margin-block-start:var(--pine-dimension-050)}`;
@@ -169,7 +169,7 @@ const PdsRadioGroup = class {
                 'pds-radio-group__radios': true,
                 'pds-radio-group__radios--row': this.direction === 'row',
                 'pds-radio-group__radios--column': this.direction === 'column',
-            } }, h("slot", { key: 'd88dde3c631e25c01bc7b6d3ef5d517255fabd1a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'a229214ed01663b0fc34f35e27c7148b4eb412ab', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'dc092f2e6dbef0cb369cf00a6eccf9a095a0313d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'd242da328731e55fa52d8e624fdfc750bfa6cce4', icon: danger, size: "small" }), this.errorMessage))));
+            } }, h("slot", { key: 'd88dde3c631e25c01bc7b6d3ef5d517255fabd1a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'a229214ed01663b0fc34f35e27c7148b4eb412ab', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'dc092f2e6dbef0cb369cf00a6eccf9a095a0313d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '83b0129d3d45b74ef1f53acc923387b2de7f079b', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/pds-radio.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
 import { H as HostStylingKeeper } from './attributes-WXw_I_uJ.js';
 import { e as exposeTypeProperty, a as assignDescription, m as messageId } from './form-BuRbS7Hp.js';
-import { b as danger } from './index-BJXk71tO.js';
+import { b as danger } from './index-BWDu62Mo.js';
 import './keep-hydrated-BLG6RDBt.js';
 
 const labelCss = () => `.sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
@@ -104,11 +104,11 @@ const PdsRadio = class {
         const renderLabelAndMessages = () => [
             h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'ccd618855831bcee309e815f2cd2712fd4e8fe1f', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: '2e372a880c28f48fb804bac2518208082c141fad', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
             this.helperMessage && (h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
-            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '889d502575f6a162f450b6b58d76a6f6f1c74e4b', icon: danger, size: "small" }), this.errorMessage))
+            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '08e7a2319eddc1d314ee9dddd51a5ce88cd4ae48', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))
         ];
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: '374003032b28407581a55f1fb0a304c49acf3c16', class: hostClass }, this.hasImage() && (h("div", { key: '7eeb516267de1afcfa85fc7567999db488c2f4f5', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'a312fea06f0c015bffab3bb392ff04d4913fd1c0', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        return (h(Host, { key: '351376552abee90f50c3aceb03ecf8a81ae1b82b', class: hostClass }, this.hasImage() && (h("div", { key: 'fd85fd36b2ebd99b12c3bb2a13cf3d3e3c26530f', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'abe75dbe38d29340b805f70861b084c1b3836be9', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/pds-select.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
 import { H as HostStylingKeeper } from './attributes-WXw_I_uJ.js';
 import { e as exposeTypeProperty, m as messageId, i as isSpecTest, a as assignDescription } from './form-BuRbS7Hp.js';
-import { b as danger, e as enlarge } from './index-BJXk71tO.js';
+import { b as danger, e as enlarge } from './index-BWDu62Mo.js';
 import './keep-hydrated-BLG6RDBt.js';
 
 const pdsSelectTokensCss = () => `:host{--pine-select-color-background-danger:var(--pine-color-red-050)}`;

package/dist/esm/pds-sortable-item.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
 import { H as HostStylingKeeper } from './attributes-WXw_I_uJ.js';
-import { h as handle } from './index-BJXk71tO.js';
+import { h as handle } from './index-BWDu62Mo.js';
 import './keep-hydrated-BLG6RDBt.js';
 
 const pdsSortableItemCss = () => `.pds-sortable-item.sc-pds-sortable-item-h{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-start-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-end-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h{cursor:not-allowed;opacity:0.5}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:not-allowed}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:transparent}.pds-sortable:not(.pds-sortable--disabled) .pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--pine-color-background-container-hover)}.pds-sortable:not(.pds-sortable--disabled) .pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--pine-color-info)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container);border-radius:0;-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container-hover);border-radius:0}`;

package/dist/esm/pds-switch.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
 import { e as exposeTypeProperty, i as isSpecTest, m as messageId, a as assignDescription } from './form-BuRbS7Hp.js';
-import { b as danger } from './index-BJXk71tO.js';
+import { b as danger } from './index-BWDu62Mo.js';
 import { H as HostStylingKeeper, i as inheritAriaAttributes } from './attributes-WXw_I_uJ.js';
 import './keep-hydrated-BLG6RDBt.js';
 
@@ -120,7 +120,7 @@ const PdsSwitch = class {
         this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
         return (h(Host, { key: 'b8bd2870be101081aa8a65cdee45397bc4c21435', class: hostClass, "aria-disabled": ariaDisabled }, h("label", { key: '1e223f22f7fc6c576098353ad67dc11500def8b4', htmlFor: this.componentId }, h("input", Object.assign({ key: 'edf59869e165a65b97465ea9de06f7ea82fbc9a6', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '1c252b9455471069f8c6ea6c13f2e88c99308b41', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: 'ce0d471918bd3018f5e55d0d1e6c5c2247790f81', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
             h("div", { key: '64874b15403f1f42344715ac34febdfb8d94042a', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '560ea486859124bb0ac2f75ab4bd34b0bca7efbc', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f49caaba976579eb5588e442499595c7dba7ceff', icon: danger, size: "small" }), this.errorMessage)));
+            h("div", { key: '560ea486859124bb0ac2f75ab4bd34b0bca7efbc', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '2ae8dc876745af26fa2418f2265248aeb8f97a2b', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/pds-table-cell.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
 import { a as isScrolledFromInlineStart } from './scroll-DtgUQhjl.js';
-import { s as setupTruncationTooltip } from './truncation-tooltip-DRXsdKk1.js';
+import { s as setupTruncationTooltip } from './truncation-tooltip-FaW67DiY.js';
 import './keep-hydrated-BLG6RDBt.js';
 import './floating-ui.dom-BPqJgIq6.js';
 

package/dist/esm/pds-table-head-cell.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
-import { i as upSmall, d as downSmall } from './index-BJXk71tO.js';
+import { i as upSmall, d as downSmall } from './index-BWDu62Mo.js';
 import { a as isScrolledFromInlineStart } from './scroll-DtgUQhjl.js';
 import './keep-hydrated-BLG6RDBt.js';
 
@@ -209,7 +209,7 @@ const PdsTableHeadCell = class {
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '96084d87a34d7b601a8e8325f344f1fe6601204e' }), this.sortable && this.isActive && (h("pds-icon", { key: 'cba838fa029b280561676c2b57af7f8f00055511', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, h("slot", { key: '96084d87a34d7b601a8e8325f344f1fe6601204e' }), this.sortable && this.isActive && (h("pds-icon", { key: '79606519d810dc9882a91cbc3b6a199457086631', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon", "aria-hidden": "true" }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/pds-text.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, a as getElement } from './index-Cw9J31qd.js';
 import { s as setColor } from './utils-OYK5-nwe.js';
-import { s as setupTruncationTooltip } from './truncation-tooltip-DRXsdKk1.js';
+import { s as setupTruncationTooltip } from './truncation-tooltip-FaW67DiY.js';
 import { TEXT_SIZES } from './index.js';
 import './keep-hydrated-BLG6RDBt.js';
 import './floating-ui.dom-BPqJgIq6.js';

package/dist/esm/pds-textarea.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, a as getElement
 import { i as isSpecTest, b as isRequired, e as exposeTypeProperty, a as assignDescription, m as messageId } from './form-BuRbS7Hp.js';
 import { d as debounceEvent, f as flushDebouncedEvent, c as cancelDebouncedEvent } from './utils-OYK5-nwe.js';
 import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes-WXw_I_uJ.js';
-import { b as danger } from './index-BJXk71tO.js';
+import { b as danger } from './index-BWDu62Mo.js';
 import { f as formatMessage } from './i18n-format-BJgZHCWe.js';
 import './keep-hydrated-BLG6RDBt.js';
 
@@ -320,7 +320,7 @@ const PdsTextarea = class {
         return (h(Host, { key: '5933dab0c3cd25b1cf2f6851ece8e8064bc7f3b9', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '4f1752514d8e5b0f0e3439515cb9e5f043607da1', class: "pds-textarea" }, this.label &&
             h("div", { key: 'd4e6df0b381d781b70eeae72ff2f0e9428c0d901', class: "pds-textarea__label-wrapper" }, h("label", { key: '747d82067eb571d02840cfd981865821099f288b', htmlFor: this.componentId }, h("span", { key: 'bfab6e8ede66d0169dd020b7dd97e125aba417b0', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: 'a18611c03270e7491c1af69f931419c832192c06', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '868382c7b04a4e59c0daa9d98afcdc9048f6224f', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
             h("p", { key: 'dcb36f21443d2a782c25b7c29c4ce6215f3b212b', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'be30fb1a38453296e26b775955389c0ec569df67', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'd93dce10d9d9db5815ac5f331848940aed735ba0', icon: danger, size: "small" }), this.errorMessage))));
+            h("p", { key: 'be30fb1a38453296e26b775955389c0ec569df67', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '853f06489ef6ca50205799659d221bd3bea7d8da', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/pds-toast.entry.js

@@ -130,7 +130,7 @@ const PdsToast = class {
                 'pds-toast--animating-out': this.isAnimatingOut
             }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: 'eaf615d41c138e2c73088d29bac9349f49a63ba7', class: "pds-toast__message" }, h("slot", { key: '33973447154d80b016f5a7954b0473db03228379' })), this.dismissible && (h("button", { key: 'e189834633e1e648282ee43633fd05e53ce38869', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: '623a0e4d56e30781fb31bcd085511c17a4777edc', name: "remove" }))))));
+            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: '913201979e52be743ba933ff173e023b81553362', name: "remove", "aria-hidden": "true" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {