@pine-ds/core 4.11.0 → 4.12.0

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

@@ -11,54 +11,96 @@ export default {
 
 const BaseTemplate = (args) => html`
 <pds-box
-	align-items="${args.alignItems}"
-  align-self="${args.alignSelf}"
-  auto="${args.auto}"
-  background-color="${args.backgroundColor}"
+	align-items="${ifDefined(args.alignItems)}"
+  align-self="${ifDefined(args.alignSelf)}"
+  ?auto=${args.auto}
+  background-color="${ifDefined(args.backgroundColor)}"
 	?border=${args.border}
   border-block-start="${ifDefined(args.borderBlockStart)}"
   border-block-end="${ifDefined(args.borderBlockEnd)}"
   border-inline-start="${ifDefined(args.borderInlineStart)}"
   border-inline-end="${ifDefined(args.borderInlineEnd)}"
-  border-color="${args.borderColor}"
-	border-radius="${args.borderRadius}"
-  direction="${args.direction}"
-	display="${args.display}"
-  fit="${args.fit}"
-  flex="${args.flex}"
-  gap="${args.gap}"
-  justify-content="${args.justifyContent}"
-  margin-block-start="${args.marginBlockStart}"
-  margin-inline-start="${args.marginInlineStart}"
-  margin-inline-end="${args.marginInlineEnd}"
-  margin-block-end="${args.marginBlockEnd}"
-  min-width="${args.minWidth}"
-  offset="${args.offset}"
-  offset-xs="${args.offsetXs}"
-  offset-sm="${args.offsetSm}"
-  offset-md="${args.offsetMd}"
-  offset-lg="${args.offsetLg}"
-  offset-xl="${args.offsetXl}"
-  padding="${args.padding}"
-  padding-block-start="${args.paddingBlockStart}"
-  padding-block-end="${args.paddingBlockEnd}"
-  padding-inline-start="${args.paddingInlineStart}"
-  padding-inline-end="${args.paddingInlineEnd}"
-  min-height="${args.minHeight}"
-  shadow="${args.shadow}"
-  size="${args.size}"
-  size-xs="${args.sizeXs}"
-  size-sm="${args.sizeSm}"
-  size-md="${args.sizeMd}"
-  size-lg="${args.sizeLg}"
-  size-xl="${args.sizeXl}"
+  border-color="${ifDefined(args.borderColor)}"
+	border-radius="${ifDefined(args.borderRadius)}"
+  container="${ifDefined(args.container)}"
+  direction="${ifDefined(args.direction)}"
+	display="${ifDefined(args.display)}"
+  ?fit=${args.fit}
+  flex="${ifDefined(args.flex)}"
+  gap="${ifDefined(args.gap)}"
+  justify-content="${ifDefined(args.justifyContent)}"
+  margin-block-start="${ifDefined(args.marginBlockStart)}"
+  margin-inline-start="${ifDefined(args.marginInlineStart)}"
+  margin-inline-end="${ifDefined(args.marginInlineEnd)}"
+  margin-block-end="${ifDefined(args.marginBlockEnd)}"
+  min-width="${ifDefined(args.minWidth)}"
+  offset="${ifDefined(args.offset)}"
+  offset-xs="${ifDefined(args.offsetXs)}"
+  offset-sm="${ifDefined(args.offsetSm)}"
+  offset-md="${ifDefined(args.offsetMd)}"
+  offset-lg="${ifDefined(args.offsetLg)}"
+  offset-xl="${ifDefined(args.offsetXl)}"
+  padding="${ifDefined(args.padding)}"
+  padding-block-start="${ifDefined(args.paddingBlockStart)}"
+  padding-block-end="${ifDefined(args.paddingBlockEnd)}"
+  padding-inline-start="${ifDefined(args.paddingInlineStart)}"
+  padding-inline-end="${ifDefined(args.paddingInlineEnd)}"
+  min-height="${ifDefined(args.minHeight)}"
+  shadow="${ifDefined(args.shadow)}"
+  size="${ifDefined(args.size)}"
+  size-xs="${ifDefined(args.sizeXs)}"
+  size-sm="${ifDefined(args.sizeSm)}"
+  size-md="${ifDefined(args.sizeMd)}"
+  size-lg="${ifDefined(args.sizeLg)}"
+  size-xl="${ifDefined(args.sizeXl)}"
 >
   Box content
 </pds-box>`;
 
 export const Default = BaseTemplate.bind();
 Default.args = {
-  componentId: 'opt0',
   border: true,
   minHeight: '100px',
 };
+
+const footerTemplate = (args) => html`
+<pds-box fit border="true" padding="sm" gap="sm" align-items="center">
+  <pds-button variant="destructive">Delete</pds-button>
+  <pds-box flex="none" gap="sm" margin-inline-start="${ifDefined(args.marginInlineStart)}">
+    <pds-button variant="secondary">Cancel</pds-button>
+    <pds-button>Save</pds-button>
+  </pds-box>
+</pds-box>`;
+
+export const MarginAuto = footerTemplate.bind();
+MarginAuto.args = {
+  marginInlineStart: 'auto',
+};
+
+const flexTemplate = (args) => html`
+<pds-container size="sm">
+  <pds-box fit border="true" padding="xs" gap="xs">
+    <pds-box flex="${ifDefined(args.flex)}" border="true" padding="xs">A box with long text that needs more room than the row has to give it.</pds-box>
+    <pds-box flex="${ifDefined(args.flex)}" border="true" padding="xs">A second box with long text that also needs more room than the row has.</pds-box>
+  </pds-box>
+</pds-container>`;
+
+export const FlexShrink = flexTemplate.bind();
+FlexShrink.args = {
+  flex: 'shrink',
+};
+
+const containerTemplate = (args) => html`
+<pds-container size="sm">
+  <pds-box fit border="true" padding="sm" gap="sm" align-items="center">
+    <pds-box container="${ifDefined(args.container)}" direction="column">
+      <pds-text truncate>A long file name that should truncate rather than push the action out of the card.pdf</pds-text>
+    </pds-box>
+    <pds-button variant="secondary">Replace</pds-button>
+  </pds-box>
+</pds-container>`;
+
+export const Container = containerTemplate.bind();
+Container.args = {
+  container: 'inline-size',
+};

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

@@ -125,6 +125,15 @@ export class PdsButton {
         (_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();
     }
@@ -181,6 +190,19 @@ export class PdsButton {
         if (this.contentEl)
             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'];
         if (this.variant) {
@@ -352,7 +374,7 @@ export class PdsButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If provided, renders the component as an anchor (`<a>`) element instead of a button.\nWhen using href, button-specific props (type, name, value, loading) will be ignored."
+                    "text": "If provided, renders the component as an anchor (`<a>`) element instead of a button.\nWhen using href, `type`, `name` and `value` are ignored, `loading` blocks navigation, and `disabled` removes the link's `href`."
                 },
                 "getter": false,
                 "setter": false,
@@ -440,7 +462,7 @@ export class PdsButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Provides the button with a submittable name."
+                    "text": "Sets the `name` attribute of the inner button. Not included in submitted form data,\nbecause the form is submitted through a hidden button that carries only the `type`."
                 },
                 "getter": false,
                 "setter": false,
@@ -501,7 +523,7 @@ export class PdsButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Provides button with a submittable value"
+                    "text": "Sets the `value` attribute of the inner button. Not included in submitted form data,\nbecause the form is submitted through a hidden button that carries only the `type`."
                 },
                 "getter": false,
                 "setter": false,
@@ -572,7 +594,7 @@ export class PdsButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the button is clicked, including from the keyboard, carrying the native click event.\nNot emitted while the button is `disabled` or `loading`. In a form, a `submit` or `reset` button's `submit` or `reset` event fires\nbefore this one. A form that fails validation fires no `submit` event."
                 },
                 "complexType": {
                     "original": "Event",

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

@@ -135,16 +135,29 @@ Disclosure.parameters = {
   controls: { exclude: 'icon' }
 }
 
-export const IconOnly = BaseTemplate.bind();
-IconOnly.args = {
-  ariaLabel: 'Favorite',
-  disabled: false,
-  fullWidth: false,
-  icon: 'favorite',
-  iconOnly: true,
-  loading: false,
-  type: 'button',
-  variant: 'secondary',
+export const IconOnly = {
+  render: (args) => html`
+    <pds-button
+      aria-label=${ifDefined(args.ariaLabel)}
+      ?disabled=${args.disabled}
+      ?full-width=${args.fullWidth}
+      ?icon-only=${args.iconOnly}
+      ?loading=${args.loading}
+      size=${ifDefined(args.size)}
+      type=${args.type}
+      variant=${args.variant}
+    >
+      <pds-icon slot="start" name="favorite" aria-hidden="true"></pds-icon>
+    </pds-button>`,
+  args: {
+    ariaLabel: 'Favorite',
+    disabled: false,
+    fullWidth: false,
+    iconOnly: true,
+    loading: false,
+    type: 'button',
+    variant: 'secondary',
+  },
 };
 
 export const Filter = BaseTemplate.bind({});
@@ -268,7 +281,8 @@ export const CompactIconButtonViaPart = {
         color: var(--pine-color-text-primary);
       }
     </style>
-    <pds-button class="compact-inverse-icon-button" variant="unstyled" icon-only icon="arrow-up">
+    <pds-button class="compact-inverse-icon-button" variant="unstyled" icon-only>
+      <pds-icon slot="start" name="arrow-up" aria-hidden="true"></pds-icon>
       Send message
     </pds-button>
   `,

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

@@ -124,9 +124,9 @@ export class PdsCheckbox {
     render() {
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: '8e9185653796f250ad425350b9adc1f65fd047c1', class: hostClass }, h("label", { key: 'e17bab4b96b4ffc716e311ecea488a3025e1551c', htmlFor: this.componentId }, h("input", Object.assign({ key: '8af9bbc3dbe18409532e95b4b490eab4aabc8762', type: "checkbox", "aria-describedby": 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)), h("span", { key: '1e4d9a826b6b5ec429ae47096d4aede3af43d110', class: this.hideLabel && this.variant !== 'pill' ? 'visually-hidden' : '' }, h("slot", { key: '7b10c7d1e018be4afe019cb56e82a5ec7a638de8', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            h("div", { key: 'c5455322eb07bf73805a17c28bf6acc1b5384337', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '0f7c8ec00362c31b1c5bd11c185c6e7bfc177f22', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f6eccfaac90505903aee379f2fc28b5735d8c4a9', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'ba31bb0a6b87946aabd6c919701d0f8ffb02e390', class: hostClass }, h("label", { key: '8670fb23e0eda01a23c2246f1f147adc682976e6', htmlFor: this.componentId }, h("input", Object.assign({ key: '1382be5f2887193e5b0d44586769ef3c36d7a994', type: "checkbox", "aria-describedby": 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)), h("span", { key: '0717737091cf2045064f11e2b9478e3adb3aa1e3', class: this.hideLabel && this.variant !== 'pill' ? 'visually-hidden' : '' }, h("slot", { key: '93c4e2842fcfd738a95fe8a34193339d683533e8', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            h("div", { key: 'd7c6aca24d1b1eea0e8c892349fea3380e23e70e', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '77983f7f87bb722adad8f2ea9ba479bf738071c8', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'b7ed2ed0012573a04cda9bc1ba10de03ac38d8de', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -213,7 +213,7 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Displays message text describing an invalid state."
+                    "text": "Displays an error message below the checkbox. It becomes the checkbox's accessible description only while `invalid` is set."
                 },
                 "getter": false,
                 "setter": false,
@@ -232,7 +232,7 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "String used for helper message below checkbox."
+                    "text": "Displays a message or hint below the checkbox."
                 },
                 "getter": false,
                 "setter": false,
@@ -251,7 +251,7 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the checkbox will visually appear as indeterminate.\nOnly JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\nHas no visual style when `variant` is `pill`."
+                    "text": "Shows the checkbox as indeterminate, for a checkbox whose group is only partly selected. It's exposed to screen readers as mixed.\nChanging `checked` clears it. Has no visual style when `variant` is `pill`."
                 },
                 "getter": false,
                 "setter": false,
@@ -270,7 +270,7 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "It determines whether or not the checkbox is invalid."
+                    "text": "Determines whether or not the checkbox is invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -289,7 +289,7 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "String used for label text next to checkbox."
+                    "text": "Text to be displayed as the checkbox label."
                 },
                 "getter": false,
                 "setter": false,
@@ -411,7 +411,7 @@ export class PdsCheckbox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted that contains the `value` and `checked`."
+                    "text": "Emitted when the user toggles the checkbox, by a click or `Space`, carrying the `value` and the new `checked` state.\n\nThis event will not emit when programmatically setting the `checked` property."
                 },
                 "complexType": {
                     "original": "CheckboxChangeEventDetail",
@@ -433,7 +433,7 @@ export class PdsCheckbox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the user toggles the checkbox, just before `pdsCheckboxChange`, carrying the `value` and `checked`.\n`checked` is still the state from before the toggle, so read the new state from `pdsCheckboxChange`.\n\nThis event will not emit when programmatically setting the `checked` property."
                 },
                 "complexType": {
                     "original": "CheckboxChangeEventDetail",

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

@@ -32,7 +32,7 @@ function besideListbox(wrapper) {
 }
 /**
  * @slot (default) - The chip's label text.
- * @part button
+ * @part button - Exposes the trigger button for styling. Appears only on the dropdown variant.
  * @part dot - Exposes the dot for styling, such as a custom color. Appears only when `dot` is set.
  * @part icon - Exposes the icon component for styling, such as a custom color. Appears only when `icon` is set.
  */
@@ -239,7 +239,7 @@ export class PdsChip {
         const hostClass = this.classNames();
         const hostStyles = this.hostStyles;
         this.hostKeeper.record(hostClass, hostStyles);
-        return (h(Host, { key: '0e6b05bfeae1d3b7d5cc23e71aaad2fa00fc7ddf', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
+        return (h(Host, { key: 'd8c5e90c4d55959e7b2d0cc8a994136fb0abc5dc', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -474,7 +474,7 @@ export class PdsChip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "HTTP method to use for the remove action.\nAdds data-method and data-turbo-method attributes for Rails/Turbo compatibility.\nOnly applies when removeUrl is provided."
+                    "text": "HTTP method to use for the remove action.\nMaps to the `data-method` and `data-turbo-method` attributes on the remove link, for frameworks that read link methods from them.\nOnly applies when removeUrl is provided."
                 },
                 "getter": false,
                 "setter": false,