@pine-ds/core 4.5.0 → 4.7.0

package/dist/collection/components/pds-drawer/pds-drawer.js

@@ -1,20 +1,22 @@
 import { Host, h } from "@stencil/core";
 import { closest, containsComposed } from "../../utils/closest";
 import { unwrapReconnectedContent } from "../../utils/reconnected-content";
-// Known selectors for content Pine components portal to document.body rather
-// than rendering in place — pds-popover, pds-tooltip, pds-combobox's dropdown.
+// Known selectors for content Pine components portal out of place rather than
+// rendering where they are — pds-tooltip and pds-combobox's dropdown in
+// document.body, pds-popover in the body or the open dialog it's in.
 // A pointerdown landing on one of these is not "outside" the drawer in the
 // sense light dismiss cares about: it belongs to an overlay something inside
 // the drawer opened, even though it is not a DOM descendant of the drawer.
 const PORTALED_OVERLAY_SELECTOR = '.pds-popover, .pds-tooltip, .pds-combobox-dropdown-portal';
 /**
- * A non-modal side panel composed from `pds-modal`.
+ * A side panel composed from `pds-modal`, non-modal by default.
  *
- * Unlike `pds-modal`, the page stays interactive while a drawer is open: no
- * dimming, no blur, no scroll lock, no click blocking. `pds-drawer` renders a
- * `pds-modal` internally with `disableTopLayer` always on and its backdrop
- * suppressed, and adds the edge, width and dismiss behavior a side panel
- * needs on top. It does not reimplement focus, Escape or dialog semantics —
+ * By default, unlike `pds-modal`, the page stays interactive while a drawer
+ * is open: no dimming, no blur, no scroll lock, 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
+ * layer instead and keeps its backdrop. It does not reimplement focus, Escape or dialog semantics —
  * those come from `pds-modal` unchanged.
  * @lightDom renders-markup
  */
@@ -42,8 +44,18 @@ export class PdsDrawer {
          */
         this.scrollable = true;
         /**
-         * Whether the drawer can be dismissed with a pointerdown outside it.
-         * Replaces `pds-modal`'s `backdropDismiss` — there is no backdrop to click.
+         * Whether the drawer is modal. A modal drawer dims the page behind it with a
+         * backdrop, makes the page inert, and keeps focus inside the drawer, like
+         * `pds-modal`. Use it for a task the page should wait on. Leave it off for a
+         * panel people work alongside the page. Read when the drawer opens; changing
+         * it while the drawer is open is not supported.
+         * @default false
+         */
+        this.modal = false;
+        /**
+         * 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
          * only way out.
@@ -62,7 +74,8 @@ export class PdsDrawer {
          * background event while the user is mid-task elsewhere on the page —
          * moving focus there would interrupt them, and the page stays live under
          * a non-modal drawer, so it is a genuine data-entry risk, not just an
-         * annoyance.
+         * annoyance. A `modal` drawer ignores `none`: the page behind it is inert,
+         * so focus starts in the drawer.
          * @default 'auto'
          */
         this.initialFocus = 'auto';
@@ -108,7 +121,8 @@ export class PdsDrawer {
     // page underneath stays genuinely clickable, which means a click there
     // never reaches pds-modal's backdrop element at all.
     handleOutsidePointerDown(e) {
-        if (!this.lightDismiss || !this.open)
+        // A modal drawer's backdrop takes the click instead, through pds-modal.
+        if (this.modal || !this.lightDismiss || !this.open)
             return;
         const target = e.target;
         if (!target)
@@ -118,7 +132,7 @@ export class PdsDrawer {
         if (target.closest(PORTALED_OVERLAY_SELECTOR))
             return;
         // A datepicker's portaled calendar counts as inside only when its datepicker is in the drawer,
-        // or in an overlay portaled from it (a pds-popover in the drawer puts its content on the body).
+        // or in an overlay portaled from it (a pds-popover in the drawer puts its content beside it).
         const calendar = target.closest('.pds-datepicker-calendar-portal');
         const owner = calendar === null || calendar === void 0 ? void 0 : calendar.pdsDatepicker;
         if (owner && (containsComposed(this.el, owner) || closest(PORTALED_OVERLAY_SELECTOR, owner)))
@@ -134,11 +148,11 @@ export class PdsDrawer {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '166bc90b45d29f64f11b6840e7c6ae798bf14261', class: {
+        return (h(Host, { key: '287bf043c991209488eb1b617031acffb59ff9af', class: {
                 'pds-drawer': true,
                 [`pds-drawer--${this.side}`]: true,
                 [`pds-drawer--${this.size}`]: true,
-            } }, h("pds-modal", { key: '2faa1cee1f34a85e9df0cabb8e78803982414982', class: "pds-drawer__modal", ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: true, backdropDismiss: this.lightDismiss, disableInitialFocus: this.initialFocus === 'none' }, h("slot", { key: '93968e612756c398f6d1faf9383f6c88c420da28' }))));
+            } }, h("pds-modal", { key: 'cd86fb552353f5cc12fb36fc956033432a91847c', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, h("slot", { key: '56bbe9b5c26b10b07c0f503ba147899a57a5de85' }))));
     }
     static get is() { return "pds-drawer"; }
     static get originalStyleUrls() {
@@ -264,6 +278,29 @@ export class PdsDrawer {
                 "attribute": "scrollable",
                 "defaultValue": "true"
             },
+            "modal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the drawer is modal. A modal drawer dims the page behind it with a\nbackdrop, makes the page inert, and keeps focus inside the drawer, like\n`pds-modal`. Use it for a task the page should wait on. Leave it off for a\npanel people work alongside the page. Read when the drawer opens; changing\nit while the drawer is open is not supported."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal",
+                "defaultValue": "false"
+            },
             "lightDismiss": {
                 "type": "boolean",
                 "mutable": false,
@@ -279,7 +316,7 @@ export class PdsDrawer {
                             "name": "default",
                             "text": "true"
                         }],
-                    "text": "Whether the drawer can be dismissed with a pointerdown outside it.\nReplaces `pds-modal`'s `backdropDismiss` \u2014 there is no backdrop to click.\nThis also gates Escape, matching how `backdropDismiss` gates Escape on\n`pds-modal` today: setting this to `false` means the close button is the\nonly way out.\n\nA trigger outside the drawer should only ever set `open` to `true` and\nleave closing to the drawer itself. A toggle-style trigger (`open =\n!open`) fights light dismiss: clicking it while open closes the drawer\non `pointerdown`, then the trigger's own click handler re-opens it."
+                    "text": "Whether the drawer can be dismissed with a pointerdown outside it (in a\n`modal` drawer, a click on its backdrop).\nReplaces `pds-modal`'s `backdropDismiss`.\nThis also gates Escape, matching how `backdropDismiss` gates Escape on\n`pds-modal` today: setting this to `false` means the close button is the\nonly way out.\n\nA trigger outside the drawer should only ever set `open` to `true` and\nleave closing to the drawer itself. A toggle-style trigger (`open =\n!open`) fights light dismiss: clicking it while open closes the drawer\non `pointerdown`, then the trigger's own click handler re-opens it."
                 },
                 "getter": false,
                 "setter": false,
@@ -302,7 +339,7 @@ export class PdsDrawer {
                             "name": "default",
                             "text": "'auto'"
                         }],
-                    "text": "Whether to move focus into the drawer when it opens. `auto` is right for\na drawer opened by a direct user action (a click, a deep link the user\njust navigated to). Set to `none` for a drawer that can open from a\nbackground event while the user is mid-task elsewhere on the page \u2014\nmoving focus there would interrupt them, and the page stays live under\na non-modal drawer, so it is a genuine data-entry risk, not just an\nannoyance."
+                    "text": "Whether to move focus into the drawer when it opens. `auto` is right for\na drawer opened by a direct user action (a click, a deep link the user\njust navigated to). Set to `none` for a drawer that can open from a\nbackground event while the user is mid-task elsewhere on the page \u2014\nmoving focus there would interrupt them, and the page stays live under\na non-modal drawer, so it is a genuine data-entry risk, not just an\nannoyance. A `modal` drawer ignores `none`: the page behind it is inert,\nso focus starts in the drawer."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/pds-drawer/stories/pds-drawer.stories.js

@@ -9,6 +9,7 @@ export default {
     size: 'md',
     scrollable: true,
     lightDismiss: true,
+    modal: false,
     initialFocus: 'auto',
     open: false,
   },
@@ -28,12 +29,13 @@ const BaseTemplate = (args) => html`
       size="${args.size}"
       scrollable="${args.scrollable}"
       light-dismiss="${args.lightDismiss}"
+      ?modal=${args.modal}
       initial-focus="${args.initialFocus}"
       ?open=${args.open}
     >
       <pds-drawer-header>
         <pds-box align-items="center" justify-content="space-between" fit>
-          <pds-text tag="h2" size="h4">Drawer Title</pds-text>
+          <pds-text tag="h2" size="h4" id="${args.componentId}-heading">Drawer Title</pds-text>
           <pds-button
             class="pds-drawer__close"
             variant="unstyled"
@@ -70,3 +72,6 @@ StartSide.args = { side: 'start' };
 
 export const Small = BaseTemplate.bind({});
 Small.args = { size: 'sm' };
+
+export const Modal = BaseTemplate.bind({});
+Modal.args = { modal: true, componentId: 'drawer-modal-demo' };

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js

@@ -72,7 +72,7 @@ export class PdsDropdownMenuItem {
             }, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
     }
     render() {
-        return (h(Host, { key: 'cf22f97df3869d59820ba0deff9a21bfee2628b8', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+        return (h(Host, { key: '33bd645d7c9547e3fd07429cf795302e6a482296', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
     }
     static get is() { return "pds-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.js

@@ -8,7 +8,7 @@ export class PdsDropdownMenuSeparator {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '63bd5fd3112b1030d1e86b331a659ab3a92dd387', id: this.componentId }, h("hr", { key: '0a8504d34a9b91db03abdddd86ce918c00534410' })));
+        return (h(Host, { key: '60407a2edc8b4667d39cbd1ba9a859d09b0b8ff1', id: this.componentId }, h("hr", { key: '8485d1c8508c5fe5e3635505f25e278f45f45b82' })));
     }
     static get is() { return "pds-dropdown-menu-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.css

@@ -19,8 +19,22 @@
   border: var(--pine-border);
 }
 
-::slotted(a),
-::slotted(button) {
+.pds-dropdown-menu__header {
+  border-block-end: var(--pine-border-width-thin) solid var(--pine-color-border);
+  margin-block-end: var(--pine-dimension-xs);
+  margin-inline: calc(var(--pine-dimension-xs) * -1);
+  padding-block-end: var(--pine-dimension-xs);
+  padding-inline: calc(var(--pine-dimension-xs) * 2 + var(--pine-border-width) + 2px);
+  text-align: start;
+}
+
+.pds-dropdown-menu__items {
+  display: flex;
+  flex-direction: column;
+}
+
+::slotted(a:not([slot=header])),
+::slotted(button:not([slot=header])) {
   align-items: center;
   appearance: none;
   background: transparent;
@@ -40,12 +54,12 @@
   width: calc(100% - (var(--pine-border-width) + 2px) * 2);
 }
 
-::slotted(.destructive) {
+::slotted(.destructive:not([slot=header])) {
   color: var(--pine-color-danger) !important;
 }
 
-::slotted([aria-disabled=true]),
-::slotted([disabled]:not([disabled=false])) {
+::slotted([aria-disabled=true]:not([slot=header])),
+::slotted([disabled]:not([disabled=false]):not([slot=header])) {
   cursor: not-allowed;
   opacity: 0.5;
   pointer-events: none;

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js

@@ -1,7 +1,9 @@
 import { Host, h } from "@stencil/core";
 import { setAttributesIfChanged } from "../../utils/attributes";
+import { limitRestores } from "../../utils/keep-hydrated";
 import { computePosition, flip, offset, shift, autoUpdate, } from "@floating-ui/dom";
 /**
+ * @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.
  */
 export class PdsDropdownMenu {
@@ -11,6 +13,7 @@ export class PdsDropdownMenu {
         this.cleanupAutoUpdate = null;
         this.triggerObserver = null;
         this.currentFocusIndex = -1;
+        this.hasHeader = false;
         /**
          * The placement of the dropdown panel relative to the trigger.
          */
@@ -29,8 +32,11 @@ export class PdsDropdownMenu {
         // Writes the trigger's ARIA from the menu's state, so the observer's own callback doesn't loop.
         this.syncTriggerAria = () => {
             if (!this.triggerEl)
-                return;
-            setAttributesIfChanged(this.triggerEl, { 'aria-haspopup': 'menu', 'aria-expanded': String(this.isOpen) });
+                return false;
+            return setAttributesIfChanged(this.triggerEl, { 'aria-haspopup': 'menu', 'aria-expanded': String(this.isOpen) });
+        };
+        this.handleHeaderSlotChange = (event) => {
+            this.hasHeader = event.target.assignedElements().length > 0;
         };
         this.handleSlotChange = (event) => {
             this.slotEl = event.target;
@@ -109,6 +115,9 @@ export class PdsDropdownMenu {
             this.toggleDropdown();
         };
     }
+    componentWillLoad() {
+        this.hasHeader = Array.from(this.host.children).some(el => el.getAttribute('slot') === 'header');
+    }
     componentDidRender() {
         var _a;
         this.panelEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box');
@@ -137,7 +146,8 @@ export class PdsDropdownMenu {
         this.triggerObserver = null;
         if (!this.triggerEl || typeof MutationObserver === 'undefined')
             return;
-        this.triggerObserver = new MutationObserver(this.syncTriggerAria);
+        // Capped against a script that keeps undoing it; opening and closing still write it directly.
+        this.triggerObserver = new MutationObserver(limitRestores(this.syncTriggerAria, 'pds-dropdown-menu: stopped restoring its trigger ARIA, as another script keeps changing it. It may be wrong until the menu opens or closes.', this.triggerEl));
         this.triggerObserver.observe(this.triggerEl, {
             attributes: true,
             attributeFilter: ['aria-haspopup', 'aria-expanded'],
@@ -243,15 +253,19 @@ export class PdsDropdownMenu {
             this.focusItemByIndex(prevIndex);
         }
     }
+    // Escape is taken in document's capture phase, before a modal around the menu hears it on
+    // document and closes too.
+    handleEscapeKeyDown(event) {
+        if (!this.isOpen || event.key !== 'Escape' || event.defaultPrevented)
+            return;
+        event.preventDefault();
+        this.closeDropdown();
+    }
     // Handle keyboard events for the dropdown
     handleKeyDown(event) {
         if (!this.isOpen)
             return;
         switch (event.key) {
-            case 'Escape':
-                event.preventDefault();
-                this.closeDropdown();
-                break;
             case 'ArrowDown':
                 event.preventDefault();
                 this.focusNextItem();
@@ -343,7 +357,7 @@ export class PdsDropdownMenu {
         }
     }
     render() {
-        return (h(Host, { key: '9d67972cf15c22bc666c32b86dcd8f143160ee0a', id: this.componentId }, h("slot", { key: 'e9cbc0612ce0e8c2bf55e1dc7930eda075fcc173', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '6fed3f11cf962a97f8ebb3cc69bd76efb425c464', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, h("slot", { key: 'b8757512713b913f3ee56d9518897e7ed3c3b830', onSlotchange: this.handleSlotChange }))));
+        return (h(Host, { key: '18dac4d59ea236fe171f4c16f6571cb1547059c6', id: this.componentId }, h("slot", { key: '95201a75a33ccb70dbd51a5cf9d78c76ebf26f65', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '7fc588f40f607ad81ad70bf74a525d078d32a80b', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: '73d13d94edccb68db7b703f930b50f729334efa8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: '7066f3a6f71c8961326f38f0509f1c0cc17098ae', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '9f07ec488b688c58c6422b575015ccd364075fe8', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: 'd0aad3f9ac3b58779669411523adbb8878dec61c', onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "pds-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -409,12 +423,19 @@ export class PdsDropdownMenu {
     }
     static get states() {
         return {
-            "currentFocusIndex": {}
+            "currentFocusIndex": {},
+            "hasHeader": {}
         };
     }
     static get elementRef() { return "host"; }
     static get listeners() {
         return [{
+                "name": "keydown",
+                "method": "handleEscapeKeyDown",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
                 "name": "keydown",
                 "method": "handleKeyDown",
                 "target": "window",

package/dist/collection/components/pds-filters/pds-filter/pds-filter.js

@@ -485,7 +485,7 @@ export class PdsFilter {
         return null;
     }
     render() {
-        return (h(Host, { key: '4abb55453c9ab4cd49b21a23047aa5ee4ab70056', id: this.componentId }, h("button", { key: 'e6b6bd81ca3f9d23f490219cf8e81f0bdf511798', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: '4cea081451f50508cef36e90d4c88cbd94933287', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '479f84087e7969fa555475b240f5e70ce5bcf136', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '85aec3d5d7b33a0cfb3602412238830929902eb1', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: 'ede4c3866bfdce974e0d21c6e6a3ae22aee47d2c' })))));
+        return (h(Host, { key: '3cae951aee1f9c75f3e207cf6c68633a23f8f6dc', id: this.componentId }, h("button", { key: 'f4c644710dc936248995be9a49cef8ad13031d61', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: '2dd87e53f363118becc762051ea1be664258b8b6', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '733ceb5e07198e844fbdc1af294d2046c4c571d8', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: 'beb65a21192c6f5c16703aec7ab9a92ea378ef3c', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: '5a481cc6b143b059a5fc33d377abe5ab79aefb4e' })))));
     }
     static get is() { return "pds-filter"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-filters/pds-filters.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class PdsFilters {
     render() {
-        return (h(Host, { key: '5587c41a5ca93cc48399d7c1af0762d4a3516b4d', id: this.componentId }, h("div", { key: '43ee499b9c3f49b52cf18beee8ac5cf97b8ad49a', class: "pds-filters" }, h("slot", { key: '79a452042d7aa7e0492d80fd773f71fb820c2211' }))));
+        return (h(Host, { key: '8688235fe7cdea1b4fc540156ff21bb9711b41b6', id: this.componentId }, h("div", { key: 'e51a37977df8c31f99b28d8c7e4bedb0d63e53c6', class: "pds-filters" }, h("slot", { key: '8ce936da4d3f0213408090bc3eeb011920f9aa6c' }))));
     }
     static get is() { return "pds-filters"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-image/pds-image.js

@@ -15,9 +15,9 @@ export class PdsImage {
         this.loading = 'eager';
     }
     render() {
-        return (h(Host, { key: 'fff1a796e59b8e666069e56390e174d7d2861f03', class: {
+        return (h(Host, { key: '1e8bb3882c2a629004ce1441e85d5c5a75a84e98', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: 'dbeda9da5adca51c58ec5a807cde673d6b479d0f', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: 'b50b19d51431d45027c7a918a4ba4c38493741d5', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get is() { return "pds-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-input/pds-input.js

@@ -289,10 +289,10 @@ export class PdsInput {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (h(Host, { key: '8c0829cc3502e5fa1fe52584d84b9345fcb0f3fd', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, h("div", { key: 'cf754e6fc72d2cf900e541a469a8e0ba62851538', class: "pds-input" }, label && (h("div", { key: 'f55793898eb2840322ec9a79daed186420ef0d90', class: {
+        return (h(Host, { key: '75eb8bc6cda5e947f8677ebefe7995688f03f947', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, h("div", { key: '93d7f90b9a64daccea1533abc08a8cb18825b828', class: "pds-input" }, label && (h("div", { key: '948109b3bfa1a1b8171572da9160425e3e35a7a6', class: {
                 'pds-input__label-wrapper': true,
                 'visually-hidden': this.hideLabel,
-            } }, h("label", { key: '2a7deac2a9443b1a648133a799b69414b96314e3', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: '75dc7787e0132c4f62272307867a8066f9cf6ce2' }, label, this.required && h("span", { key: 'c7c413addd2b3f275031596598b030c02f647969', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: 'eaf09d07c4fbc84ef835d2c7b4f00e252394f5ed', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: 'dca2390b44e430f0ab1d29daa4ce630ac3b12881', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: '0bd7859f44185ed0c1478833518cb5829ffea4ad', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'c40016f5bb03e292e01430c2940aff0ebb98abb5', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '54985d775ddf951b50cae4796b7847e98de7434f', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
+            } }, h("label", { key: 'bb0e6c6febb97ad4aa3942ac5e67ac42dc1bde0a', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: 'c6a122f829aa3b92ccb715c3f3975f6baadb3028' }, label, this.required && h("span", { key: 'dce7d1a9c010a545992734bd238e9f6a4ca7b4ce', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '1b92ab5d649a4a9cf8112ea9b8a8a1095714f6d0', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: 'bc3c4b907312149d375bb78f9912e4501da59348', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: 'f7bcbafc17a20310d602fce14a0adad522acbcb1', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'bbbd6dc3203b89e5759587147de74d2ce3ce6177', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '68a6a92c82c1756ad99f431e0cb56756e3cdf75c', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-link/pds-link.js

@@ -56,8 +56,8 @@ export class PdsLink {
         const targetValue = this.target || (this.external ? '_blank' : undefined);
         const showExternalIcon = this.external;
         const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
-        return (h("a", { key: '4757dc775fb132ea1fed93fed8e3cd18c77d45af', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: '88e5a1ef3b0fc384f7449979029fa45c627aab99' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: '6f1b9cf0dab342ea09c1f52c605228ef4d04f829', icon: launch, size: this.fontSize })));
+        return (h("a", { key: '3b6f9d19d7f50d0606cf5f3c3a97b85ee4aa63b0', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: 'a265f1c4c9b6ff089b23906d8f650bfd65b25013' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: '9553a8256b6811296ea4b762e32662c1a2f4aecf', icon: launch, size: this.fontSize })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-loader/pds-loader.js

@@ -66,7 +66,7 @@ export class PdsLoader {
             'aria-live': 'polite',
         };
         this.hostKeeper.record(hostClass, {}, hostAttributes);
-        return (h(Host, Object.assign({ key: '81f97b8a6adf4d2c0e5516aa2af9054e200629e1', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: '6e25806c83d6ddeb1141acdd083654867c6ff8a2', class: "pds-loader--spinner" }, h("svg", { key: '4798f27facfcf57da8d408319527fc6083489107', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '0c64abfabc18ccd51ef41017e088f6ec10736d61' }, h("linearGradient", { key: '3aa61edf6250dc827bf925938b69008860f96596', id: "spinner-secondHalf" }, h("stop", { key: '2693d8a866492ef4ca98cbc4beb5f9f1a34a8b52', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: 'ae229fdc73733e4d6ab15a6663e67b574bd49b40', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '8ddbb46a1a387113d74a82cc4e3e0e9c7e12d573', id: "spinner-firstHalf" }, h("stop", { key: 'd166a3c1ae37c3afa898351683b07f5c4d0ee906', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'e4c9790bc9a645d752aa56c238fb8708310208b5', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '8b3897ff925d4207f9060e2fb69afa657b1b8fe3', class: "pds-loader__spinner-path" }, h("path", { key: '603ef195d1fc64d2059d9fbfeb9b14e2bdb1cabe', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'a649ac9538248f5a22d48008377e18f4407efad9', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '37f3772b61d1459959cc4d8c0b5c729dbd6953ff', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'e510c2e6498a5542ce6e6573fdc03e8770121cd7', class: "pds-loader--typing" }, h("span", { key: 'bbf4f5a328175f06b221d9abc73118505a09455d' }), h("span", { key: '9a7e80b28e1455ef9d0c1bdb330a6425a3037709' }), h("span", { key: 'f8aa1eb4f822a6d0e2a14a982bbe99866a97815b' }))), h("div", { key: '3492189495798a2ea861d0dcb460f1b25d43d565', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'c1a19415b513a2a5f76a53d64b0ef5fbb4a5d100', name: "label" }, "Loading..."))));
+        return (h(Host, Object.assign({ key: 'c42c1aeec5c8db9a1065f35492734a8cb265f3ce', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: 'dc1b7943709d03e02467cca0817fb6a7ad5ed10a', class: "pds-loader--spinner" }, h("svg", { key: 'db38e607541ac1eb91be87b2cd0240341c8fb51d', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: 'd734ef70b0039758a25881c22bb3e6453ac40012' }, h("linearGradient", { key: '697627f516c5f7b4cd5351dd39de231c0cb9e429', id: "spinner-secondHalf" }, h("stop", { key: '03082c0ec354685eebf7d0132202d54b083d26df', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '181b661b36aeb44943e20dec513f7265a9487004', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '67f6c51aefe99bcbfdb741290337364501fc4fcb', id: "spinner-firstHalf" }, h("stop", { key: 'cb6adf27ecb06b42ba572a702153de960491b0b6', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'aeebabfa1ac00391937388feefa120bd0bb4d26c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'f06ca75e4df171b6db426fce9bc34076cfee5bca', class: "pds-loader__spinner-path" }, h("path", { key: 'a278b37de8f77a1000efecb62b89e3f751712a98', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'a035add4d01b60bcebf7625c8730d6a41ddf40ff', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '1189c8299d33a2a6bb6a8345b60f22bf4ad9beee', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '39826fae20e8826d9c73cf57ba938583d610e1ea', class: "pds-loader--typing" }, h("span", { key: '8f2b837c79548a1080710a7cc30c3be3a051e1dd' }), h("span", { key: '8efb1193ef51f110950861767eccc3896e90b81e' }), h("span", { key: '366f2d205adbb043691c253cff17d2d29d56a2cc' }))), h("div", { key: 'aeaa4aa12863b34088e84fd2791c2ce32dc05248', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '7a8ec45aed1cd6f9e60f4db2ec5376439fa41c81', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js

@@ -181,10 +181,10 @@ export class PdsModalContent {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (h(Host, { key: 'f66dbdd08d6af3f87b0a6e8f30e1948b2f674e34' }, h("div", { key: 'ac0469cbfe48002d5bc7f401e0dc30926cfd4421', class: {
+        return (h(Host, { key: 'd41d5632eb6a2dafe921546af60f835d3545cc4f' }, h("div", { key: '741ac9f28149039ecf5051142a939ab62ef26a87', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '26a8a45ab4dcd0349da68304fa3cacc64603208a' }))));
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '090a52e9425d4df61c2d8216cc19f0925babdffe' }))));
     }
     static get is() { return "pds-modal-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js

@@ -9,7 +9,7 @@ export class PdsModalFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (h("footer", { key: '1148892c2d6b9a461f6c04a670fceda76c1be53a', class: "pds-modal__footer" }, h("slot", { key: 'ccd754674c82c415f8c056c9dda6327df35dbd03' })));
+        return (h("footer", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__footer" }, h("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
     }
     static get is() { return "pds-modal-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js

@@ -9,7 +9,7 @@ export class PdsModalHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (h("header", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__header" }, h("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
+        return (h("header", { key: 'ee3ac5fb9b00a943aa86c3434ea07291b74d776c', class: "pds-modal__header" }, h("slot", { key: '0b0f7ff257635723099c536648a826be8dcc05e7' })));
     }
     static get is() { return "pds-modal-header"; }
     static get originalStyleUrls() {