@pine-ds/core 4.11.0 → 4.12.0

package/dist/cjs/pds-button.cjs.entry.js

@@ -2,52 +2,10 @@
 
 var index = require('./index-D9iJuJCP.js');
 var utils = require('./utils-BhRmyxT8.js');
+var ariaReferences = require('./aria-references-CUmqibnO.js');
 var index$1 = require('./index-BDnbr0DK.js');
 require('./keep-hydrated-AKoh0DG4.js');
 
-/**
- * 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.
- */
-const ARIA_REFERENCE_PROPERTIES = {
-    'aria-controls': 'ariaControlsElements',
-    'aria-describedby': 'ariaDescribedByElements',
-    'aria-labelledby': 'ariaLabelledByElements',
-};
-const ARIA_REFERENCE_ATTRIBUTES = Object.keys(ARIA_REFERENCE_PROPERTIES);
-/**
- * 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.
- */
-const findInAncestorRoots = (host, id) => {
-    let root = host.getRootNode();
-    while (root instanceof ShadowRoot) {
-        const found = root.getElementById(id);
-        if (found)
-            return found;
-        root = root.host.getRootNode();
-    }
-    return root instanceof Document ? root.getElementById(id) : 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.
- */
-const forwardAriaReferences = (host, target) => {
-    Object.entries(ARIA_REFERENCE_PROPERTIES).forEach(([attribute, property]) => {
-        var _a, _b;
-        if (!(property in target))
-            return;
-        const ids = (_b = (_a = host.getAttribute(attribute)) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
-        const referenced = ids.map((id) => findInAncestorRoots(host, id)).filter((el) => el !== null);
-        target[property] = referenced.length > 0 ? referenced : null;
-    });
-};
-
 const pdsButtonCss = () => `:host{--pds-button-background:var(--pds-button-color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--pds-button-outline-offset:var(--pine-border-width);--pds-button-color-border-default:transparent;--pds-button-color-border-disabled:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-border-hover:transparent;--button-loader-color:var(--pds-button-color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([aria-disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--pds-button-color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--pds-button-color-background-default));border:var(--pds-button-border);border-color:var(--pds-button-color-border-default);border-radius:var(--pds-button-border-radius);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-button-color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--pds-button-color-background-hover);border-color:var(--pds-button-color-border-hover)}.pds-button:focus-visible{border-color:var(--pds-button-color-border-focus);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.pds-button:disabled{background-color:var(--pds-button-color-background-disabled);border-color:var(--pds-button-color-border-disabled);color:var(--pds-button-color-text-disabled);pointer-events:none}.pds-button--primary{--pds-button-color-background-default:var(--pine-color-primary);--pds-button-color-background-hover:var(--pine-color-primary-hover);--pds-button-color-background-disabled:var(--pine-color-primary-disabled);--pds-button-color-border-default:var(--pine-color-primary);--pds-button-color-border-hover:var(--pine-color-primary-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-primary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--pds-button-color-background-default:var(--pine-color-accent);--pds-button-color-background-hover:var(--pine-color-accent-hover);--pds-button-color-background-disabled:var(--pine-color-accent-disabled);--pds-button-color-border-default:var(--pine-color-accent);--pds-button-color-border-hover:var(--pine-color-accent-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-accent-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--pds-button-color-background-default:var(--pine-color-danger);--pds-button-color-background-hover:var(--pine-color-danger-hover);--pds-button-color-background-disabled:var(--pine-color-danger-disabled);--pds-button-color-border-default:var(--pine-color-danger);--pds-button-color-border-hover:var(--pine-color-danger-hover);--pds-button-color-text-default:var(--pine-color-white);--pds-button-color-text-disabled:var(--pine-color-text-danger-disabled);--pds-button-color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--pds-button-color-background-default:var(--pine-color-secondary);--pds-button-color-background-hover:var(--pine-color-secondary-hover);--pds-button-color-background-disabled:var(--pine-color-secondary-disabled);--pds-button-color-border-disabled:var(--pine-color-border-disabled);--pds-button-color-border-focus:var(--pine-color-border);--pds-button-color-border-hover:var(--pine-color-border-hover);--pds-button-color-border-default:var(--pine-color-border);--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--tertiary{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:var(--pine-color-background-muted);--pds-button-color-background-disabled:transparent;--pds-button-color-border-default:transparent;--pds-button-color-border-hover:var(--pine-color-background-muted);--pds-button-color-border-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--filter{--pds-button-color-background-default:var(--pine-color-background-container);--pds-button-color-background-hover:var(--pine-color-background-subtle);--pds-button-color-background-disabled:var(--pine-color-white);--pds-button-color-border-default:transparent;--pds-button-color-border-hover:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-hover:var(--pine-color-text-hover);--pds-button-color-text-disabled:var(--pine-color-text-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:disabled{background-color:var(--pine-color-background-container)}.pds-button--filter:hover{color:var(--pds-button-color-text-hover)}.pds-button--unstyled{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:transparent;--pds-button-color-background-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text);--button-loader-color:var(--pine-color-text);border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__icon--empty{display:none}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--small{min-height:var(--pine-dimension-400);padding:calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-button--micro{font-size:var(--pine-font-size-085);min-height:var(--pine-dimension-300);padding:var(--pine-dimension-025) var(--pine-dimension-xs)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-button--icon-only.pds-button--small{height:var(--pine-dimension-400);min-height:var(--pine-dimension-400);min-width:var(--pine-dimension-400);padding:var(--pine-dimension-2xs);width:var(--pine-dimension-400)}.pds-button--icon-only.pds-button--micro{height:var(--pine-dimension-300);min-height:var(--pine-dimension-300);min-width:var(--pine-dimension-300);padding:var(--pine-dimension-3xs);width:var(--pine-dimension-300)}`;
 
 const FORWARDED_ARIA_ATTRIBUTES = ['aria-current', 'aria-expanded', 'aria-haspopup', 'aria-label', 'aria-pressed'];
@@ -156,7 +114,7 @@ const PdsButton = class {
         // Consumers, popovers and menus set these on the host, often after render, but only the inner element is announced.
         this.hostAriaObserver = new MutationObserver(this.syncHostAria);
         this.hostAriaObserver.observe(this.el, {
-            attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat(ARIA_REFERENCE_ATTRIBUTES),
+            attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat(ariaReferences.ARIA_REFERENCE_ATTRIBUTES),
         });
     }
     disconnectedCallback() {
@@ -164,6 +122,15 @@ const PdsButton = class {
         (_a = this.hostAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.hostAriaObserver = undefined;
     }
+    componentWillLoad() {
+        // slotchange only fires after the first render, and when the button is inserted inside a
+        // requestAnimationFrame callback the update it triggers lands a frame later, so the first paint
+        // would hide slotted icons and draw the button narrower.
+        // Only a slot the first render creates is seeded: a slot inserted later with no assigned
+        // nodes fires no slotchange, so a seeded true there would keep an empty gap.
+        this.hasStartContent = this.rendersStartSlot() && this.hasSlottedElement('start');
+        this.hasEndContent = this.rendersEndSlot() && this.hasSlottedElement('end');
+    }
     componentDidRender() {
         this.forwardAriaReferences();
     }
@@ -218,7 +185,20 @@ const PdsButton = class {
     }
     forwardAriaReferences() {
         if (this.contentEl)
-            forwardAriaReferences(this.el, this.contentEl);
+            ariaReferences.forwardAriaReferences(this.el, this.contentEl);
+    }
+    // A first-render guess; the slotchange handlers below stay the source of truth (a forwarded,
+    // empty <slot> counts here and is corrected on slotchange).
+    hasSlottedElement(name) {
+        return Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);
+    }
+    // The filter variant and the deprecated icon prop draw their own start icon instead of the slot.
+    rendersStartSlot() {
+        return this.variant !== 'filter' && !(this.icon && this.variant !== 'disclosure');
+    }
+    // Icon-only and disclosure buttons draw no end slot.
+    rendersEndSlot() {
+        return !this.iconOnly && this.variant !== 'disclosure';
     }
     classNames() {
         const classNames = ['pds-button'];

package/dist/cjs/pds-checkbox.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-D9iJuJCP.js');
 var form = require('./form-MhwfKTuo.js');
 var index$1 = require('./index-BDnbr0DK.js');
-var attributes = require('./attributes-CW49XqaL.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
 require('./keep-hydrated-AKoh0DG4.js');
 
 const labelCss = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
@@ -132,9 +132,9 @@ const PdsCheckbox = class {
     render() {
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (index.h(index.Host, { key: '8e9185653796f250ad425350b9adc1f65fd047c1', class: hostClass }, index.h("label", { key: 'e17bab4b96b4ffc716e311ecea488a3025e1551c', htmlFor: this.componentId }, index.h("input", Object.assign({ key: '8af9bbc3dbe18409532e95b4b490eab4aabc8762', type: "checkbox", "aria-describedby": form.assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput, class: this.variant === 'pill' ? 'visually-hidden' : undefined }, this.inheritedAttributes)), index.h("span", { key: '1e4d9a826b6b5ec429ae47096d4aede3af43d110', class: this.hideLabel && this.variant !== 'pill' ? 'visually-hidden' : '' }, index.h("slot", { key: '7b10c7d1e018be4afe019cb56e82a5ec7a638de8', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            index.h("div", { key: 'c5455322eb07bf73805a17c28bf6acc1b5384337', class: 'pds-checkbox__message', id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            index.h("div", { key: '0f7c8ec00362c31b1c5bd11c185c6e7bfc177f22', class: `pds-checkbox__message pds-checkbox__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: 'f6eccfaac90505903aee379f2fc28b5735d8c4a9', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage)));
+        return (index.h(index.Host, { key: 'ba31bb0a6b87946aabd6c919701d0f8ffb02e390', class: hostClass }, index.h("label", { key: '8670fb23e0eda01a23c2246f1f147adc682976e6', htmlFor: this.componentId }, index.h("input", Object.assign({ key: '1382be5f2887193e5b0d44586769ef3c36d7a994', type: "checkbox", "aria-describedby": form.assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput, class: this.variant === 'pill' ? 'visually-hidden' : undefined }, this.inheritedAttributes)), index.h("span", { key: '0717737091cf2045064f11e2b9478e3adb3aa1e3', class: this.hideLabel && this.variant !== 'pill' ? 'visually-hidden' : '' }, index.h("slot", { key: '93c4e2842fcfd738a95fe8a34193339d683533e8', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            index.h("div", { key: 'd7c6aca24d1b1eea0e8c892349fea3380e23e70e', class: 'pds-checkbox__message', id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            index.h("div", { key: '77983f7f87bb722adad8f2ea9ba479bf738071c8', class: `pds-checkbox__message pds-checkbox__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: 'b7ed2ed0012573a04cda9bc1ba10de03ac38d8de', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage)));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/pds-chip.cjs.entry.js

@@ -2,8 +2,8 @@
 
 var index = require('./index-D9iJuJCP.js');
 var index$1 = require('./index-BDnbr0DK.js');
-var attributes = require('./attributes-CW49XqaL.js');
-var truncationTooltip = require('./truncation-tooltip-Bikp7n9I.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
+var truncationTooltip = require('./truncation-tooltip-CM5HgRHh.js');
 var utils = require('./utils-BhRmyxT8.js');
 require('./keep-hydrated-AKoh0DG4.js');
 require('./floating-ui.dom-Dw41zbyY.js');
@@ -245,7 +245,7 @@ const PdsChip = class {
         const hostClass = this.classNames();
         const hostStyles = this.hostStyles;
         this.hostKeeper.record(hostClass, hostStyles);
-        return (index.h(index.Host, { key: '0e6b05bfeae1d3b7d5cc23e71aaad2fa00fc7ddf', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
+        return (index.h(index.Host, { key: 'd8c5e90c4d55959e7b2d0cc8a994136fb0abc5dc', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
     get el() { return index.getElement(this); }
 };