@pine-ds/core 4.2.0 → 4.4.0

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

@@ -10,6 +10,10 @@
 :host(.is-invalid) input:checked {
   background: var(--pine-color-danger);
 }
+:host(.is-invalid) input:checked::after {
+  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
+  border-color: var(--pine-color-white);
+}
 :host(.is-invalid) input:checked:hover {
   background: var(--pine-color-danger-hover);
   border-color: var(--pine-color-border-danger-hover);
@@ -31,8 +35,7 @@
   border-color: var(--pine-color-accent-hover);
 }
 :host(.is-indeterminate) input::after {
-  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
-  border: 1px solid var(--pine-color-white);
+  border: 1px solid var(--pine-color-text-primary);
   border-block-end: var(--pine-border-width-none);
   border-block-start: var(--pine-border-width-none);
   border-inline-start: var(--pine-border-width-none);
@@ -71,8 +74,7 @@ input:checked:hover {
   border-color: var(--pine-color-accent-hover);
 }
 input:checked::after {
-  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
-  border: 1px solid var(--pine-color-white);
+  border: 1px solid var(--pine-color-text-primary);
   border-block-start: var(--pine-border-width-none);
   border-inline-start: var(--pine-border-width-none);
   content: "";
@@ -115,6 +117,13 @@ label {
   gap: var(--pine-dimension-xs);
 }
 
+:host(.has-label-slot) label {
+  align-items: center;
+}
+:host(.has-label-slot) input {
+  margin-block-start: 0;
+}
+
 .visually-hidden {
   border: 0;
   clip: rect(0 0 0 0);

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

@@ -2,10 +2,14 @@ import { h, Host } from "@stencil/core";
 import { assignDescription, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
 import { danger } from "@pine-ds/icons/icons";
 import { inheritAriaAttributes } from "../../utils/attributes";
+/**
+ * @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
+ */
 export class PdsCheckbox {
     constructor() {
         this.inheritedAttributes = {};
         this._type = 'checkbox';
+        this.hasLabelSlot = false;
         /**
          * It determines whether or not the checkbox is checked.
          */
@@ -28,6 +32,9 @@ export class PdsCheckbox {
                 value: this.value
             });
         };
+        this.updateHasLabelSlot = () => {
+            this.hasLabelSlot = Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'label');
+        };
     }
     updateIndeterminate() {
         this.indeterminate = undefined;
@@ -43,6 +50,9 @@ export class PdsCheckbox {
         if (this.disabled) {
             classNames.push('is-disabled');
         }
+        if (this.hasLabelSlot) {
+            classNames.push('has-label-slot');
+        }
         return classNames.join('  ');
     }
     connectedCallback() {
@@ -84,11 +94,12 @@ export class PdsCheckbox {
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.updateHasLabelSlot();
     }
     render() {
-        return (h(Host, { key: 'd4a447aba6ffa638b0bf3ed7a5cfd4580168da79', class: this.classNames() }, h("label", { key: '75fcd32809f736f8e4f6af2021f86d2c5b7bc110', htmlFor: this.componentId }, h("input", Object.assign({ key: 'bf6c15908ed3b1cebc35ce10eddd4b420a2d2b4e', 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 }, this.inheritedAttributes)), h("span", { key: 'dd8d96a9907c5f237ab52508a70adcc0ed1b7eb5', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: '8928bea1a022825777e40635ae91e7bdedaaea67', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'e09485a38fb7c66d9dbfa68eddf758e3cd0d81c8', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '0bea5bbdc7817b6f2136a7c1a8e67811f4119dce', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'aef1cece81ef5b59ee50d31f8542ffe627230734', class: this.classNames() }, h("label", { key: 'ad41c1039f2d11ff52e362e5e45d4c25e1d71b71', htmlFor: this.componentId }, h("input", Object.assign({ key: '180959e7154129ecbfe6a9151e13610d4799ece2', 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 }, this.inheritedAttributes)), h("span", { key: '37917f2d69bc0927d38fd8400f48201a451e1d4f', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: 'b406e52494565eec642ebc3449a95319cf772398', name: "label", onSlotchange: this.updateHasLabelSlot }, this.label))), this.helperMessage &&
+            h("div", { key: '3fb5410f4c504da78c64511e9bf0058b4a7aa23b', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'af9a7771b1b5444fc3e994e7c7904557a2507e3a', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '13f8ba65484f33df384dcff6179e756321c3238d', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -336,6 +347,11 @@ export class PdsCheckbox {
             }
         };
     }
+    static get states() {
+        return {
+            "hasLabelSlot": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "pdsCheckboxChange",

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

@@ -13,7 +13,7 @@
 }
 :host(.pds-chip--accent) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--pine-chip-color-accent-dot);
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-accent-dot));
 }
 :host(.pds-chip--accent) .pds-chip__label, :host(.pds-chip--accent) .pds-chip__button, :host(.pds-chip--accent) .pds-chip__close {
   /* stylelint-disable-next-line */
@@ -36,7 +36,7 @@
 }
 :host(.pds-chip--danger) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--pine-chip-color-danger-dot);
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-danger-dot));
 }
 :host(.pds-chip--danger) .pds-chip__label, :host(.pds-chip--danger) .pds-chip__button, :host(.pds-chip--danger) .pds-chip__close {
   /* stylelint-disable-next-line */
@@ -59,7 +59,7 @@
 }
 :host(.pds-chip--info) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--pine-chip-color-info-dot);
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-info-dot));
 }
 :host(.pds-chip--info) .pds-chip__label, :host(.pds-chip--info) .pds-chip__button, :host(.pds-chip--info) .pds-chip__close {
   /* stylelint-disable-next-line */
@@ -82,7 +82,7 @@
 }
 :host(.pds-chip--neutral) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--pine-chip-color-neutral-dot);
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-neutral-dot));
 }
 :host(.pds-chip--neutral) .pds-chip__label, :host(.pds-chip--neutral) .pds-chip__button, :host(.pds-chip--neutral) .pds-chip__close {
   /* stylelint-disable-next-line */
@@ -99,13 +99,59 @@
   background: var(--pine-chip-color-neutral-hover);
 }
 
+:host(.pds-chip--solid) {
+  background: var(--pine-chip-color-solid);
+  border: var(--pine-border-width) solid var(--pine-chip-color-solid-hover);
+}
+:host(.pds-chip--solid) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-solid-dot));
+}
+:host(.pds-chip--solid) .pds-chip__label, :host(.pds-chip--solid) .pds-chip__button, :host(.pds-chip--solid) .pds-chip__close {
+  /* stylelint-disable-next-line */
+  color: var(--pine-chip-color-solid-text);
+  font-weight: var(--pine-font-weight-medium);
+}
+:host(.pds-chip--solid) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--pine-chip-color-solid-hover);
+}
+
+:host(.pds-chip--solid.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--pine-chip-color-solid-hover);
+}
+
+:host(.pds-chip--subtle) {
+  background: var(--pine-chip-color-subtle);
+  border: var(--pine-border-width) solid var(--pine-chip-color-subtle-hover);
+}
+:host(.pds-chip--subtle) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-subtle-dot));
+}
+:host(.pds-chip--subtle) .pds-chip__label, :host(.pds-chip--subtle) .pds-chip__button, :host(.pds-chip--subtle) .pds-chip__close {
+  /* stylelint-disable-next-line */
+  color: var(--pine-chip-color-subtle-text);
+  font-weight: var(--pine-font-weight-medium);
+}
+:host(.pds-chip--subtle) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--pine-chip-color-subtle-hover);
+}
+
+:host(.pds-chip--subtle.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--pine-chip-color-subtle-hover);
+}
+
 :host(.pds-chip--success) {
   background: var(--pine-chip-color-success);
   border: var(--pine-border-width) solid var(--pine-chip-color-success-hover);
 }
 :host(.pds-chip--success) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--pine-chip-color-success-dot);
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-success-dot));
 }
 :host(.pds-chip--success) .pds-chip__label, :host(.pds-chip--success) .pds-chip__button, :host(.pds-chip--success) .pds-chip__close {
   /* stylelint-disable-next-line */
@@ -128,7 +174,7 @@
 }
 :host(.pds-chip--warning) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--pine-chip-color-warning-dot);
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-warning-dot));
 }
 :host(.pds-chip--warning) .pds-chip__label, :host(.pds-chip--warning) .pds-chip__button, :host(.pds-chip--warning) .pds-chip__close {
   /* stylelint-disable-next-line */
@@ -145,6 +191,10 @@
   background: var(--pine-chip-color-warning-hover);
 }
 
+:host(.pds-chip--solid) {
+  border-color: transparent;
+}
+
 .pds-chip__dot {
   border: var(--pine-border-width) solid transparent;
   border-radius: var(--pine-border-radius-full);
@@ -155,6 +205,10 @@
   width: var(--pine-dimension-2xs);
 }
 
+.pds-chip__icon {
+  color: var(--pds-chip-icon-color, currentColor);
+}
+
 .pds-chip__label {
   align-items: center;
   display: flex;

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

@@ -1,9 +1,22 @@
 import { downSmall, remove } from "@pine-ds/icons/icons";
 import { Host, h } from "@stencil/core";
 import { setupTruncationTooltip } from "../../utils/truncation-tooltip";
+import { normalizeColorValue } from "../../utils/utils";
+const SENTIMENT_DOT_COLORS = {
+    accent: 'var(--pine-chip-color-accent-dot)',
+    danger: 'var(--pine-chip-color-danger-dot)',
+    info: 'var(--pine-chip-color-info-dot)',
+    neutral: 'var(--pine-chip-color-neutral-dot)',
+    solid: 'var(--pine-chip-color-solid-dot)',
+    subtle: 'var(--pine-chip-color-subtle-dot)',
+    success: 'var(--pine-chip-color-success-dot)',
+    warning: 'var(--pine-chip-color-warning-dot)',
+};
 /**
  * @slot (default) - The chip's label text.
  * @part button
+ * @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.
  */
 export class PdsChip {
     constructor() {
@@ -123,7 +136,7 @@ export class PdsChip {
         // which is already focusable and bubbles focusin to the host, so
         // initTruncationTooltip passes `manageTabIndex: false` there to avoid
         // nesting a second tab stop inside the button.
-        const chipContent = isDropdown ? (h("button", { class: "pds-chip__button", type: "button", part: "button" }, this.icon && h("pds-icon", { icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), h("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, h("slot", null)), h("pds-icon", { icon: downSmall, size: this.iconSize, "aria-hidden": "true" }))) : (h("span", { class: "pds-chip__label" }, this.icon && h("pds-icon", { icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), h("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, h("slot", null))));
+        const chipContent = isDropdown ? (h("button", { class: "pds-chip__button", type: "button", part: "button" }, this.icon && h("pds-icon", { class: "pds-chip__icon", part: "icon", icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && h("i", { class: "pds-chip__dot", part: "dot", "aria-hidden": "true" }), h("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, h("slot", null)), h("pds-icon", { icon: downSmall, size: this.iconSize, "aria-hidden": "true" }))) : (h("span", { class: "pds-chip__label" }, this.icon && h("pds-icon", { class: "pds-chip__icon", part: "icon", icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && h("i", { class: "pds-chip__dot", part: "dot", "aria-hidden": "true" }), h("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, h("slot", null))));
         return chipContent;
     }
     get hostStyles() {
@@ -132,7 +145,21 @@ export class PdsChip {
         // query) without !important — the same pattern pds-box uses for min-width.
         // The width and the min-width/box-sizing that make it work are applied in
         // pds-chip.scss under :host([max-width]).
-        return this.maxWidth ? { '--pds-chip-max-width': this.maxWidth } : {};
+        const styles = {};
+        if (this.maxWidth) {
+            styles['--pds-chip-max-width'] = this.maxWidth;
+        }
+        // Custom properties rather than inline colors on the dot/icon, so a
+        // consumer's ::part(dot) or ::part(icon) rule still wins over the prop.
+        const dotColor = normalizeColorValue(this.dotColor, { semanticMap: SENTIMENT_DOT_COLORS });
+        if (dotColor !== undefined) {
+            styles['--pds-chip-dot-color'] = dotColor;
+        }
+        const iconColor = normalizeColorValue(this.iconColor, { semanticMap: SENTIMENT_DOT_COLORS });
+        if (iconColor !== undefined) {
+            styles['--pds-chip-icon-color'] = iconColor;
+        }
+        return styles;
     }
     renderCloseButton() {
         const CloseElement = this.removeUrl ? 'a' : 'button';
@@ -179,7 +206,7 @@ export class PdsChip {
         return (h(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), h("pds-icon", { icon: remove, size: this.iconSize })));
     }
     render() {
-        return (h(Host, { key: '3b796c1340ac4e37569bf7904dbed05ba6938e4b', class: this.classNames(), id: this.componentId, style: this.hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
+        return (h(Host, { key: '065b561b3532d724a420b3fb1e4abaccd05b8879', class: this.classNames(), id: this.componentId, style: this.hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -237,6 +264,25 @@ export class PdsChip {
                 "attribute": "dot",
                 "defaultValue": "false"
             },
+            "dotColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the dot color. Accepts a sentiment name other than `brand` (e.g. `success`), a color token, or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\nDefaults to the dot color of the chip's sentiment. Only applies when `dot` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dot-color"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,
@@ -256,6 +302,25 @@ export class PdsChip {
                 "reflect": false,
                 "attribute": "icon"
             },
+            "iconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the icon color. Accepts a sentiment name other than `brand` (e.g. `success`), a color token, or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\nDefaults to the chip's text color. Only applies when `icon` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-color"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -290,7 +355,7 @@ export class PdsChip {
                 "mutable": false,
                 "complexType": {
                     "original": "ChipSentimentType",
-                    "resolved": "\"accent\" | \"brand\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "resolved": "\"accent\" | \"brand\" | \"danger\" | \"info\" | \"neutral\" | \"solid\" | \"subtle\" | \"success\" | \"warning\"",
                     "references": {
                         "ChipSentimentType": {
                             "location": "import",

package/dist/collection/components/pds-chip/pds-chip.tokens.css

@@ -15,6 +15,14 @@
   --pine-chip-color-neutral-hover: var(--pine-color-grey-300);
   --pine-chip-color-neutral-dot: var(--pine-color-grey-600);
   --pine-chip-color-neutral-text: var(--pine-color-grey-950);
+  --pine-chip-color-solid: var(--pine-color-grey-900);
+  --pine-chip-color-solid-hover: var(--pine-color-grey-950);
+  --pine-chip-color-solid-dot: var(--pine-color-white);
+  --pine-chip-color-solid-text: var(--pine-color-white);
+  --pine-chip-color-subtle: var(--pine-color-white);
+  --pine-chip-color-subtle-hover: var(--pine-color-grey-300);
+  --pine-chip-color-subtle-dot: var(--pine-color-grey-900);
+  --pine-chip-color-subtle-text: var(--pine-color-grey-900);
   --pine-chip-color-success: var(--pine-color-green-100);
   --pine-chip-color-success-hover: var(--pine-color-green-300);
   --pine-chip-color-success-dot: var(--pine-color-green-600);
@@ -42,6 +50,14 @@
   --pine-chip-color-neutral-hover: var(--pine-color-grey-600);
   --pine-chip-color-neutral-dot: var(--pine-color-grey-300);
   --pine-chip-color-neutral-text: var(--pine-color-grey-100);
+  --pine-chip-color-solid: var(--pine-color-white);
+  --pine-chip-color-solid-hover: var(--pine-color-grey-100);
+  --pine-chip-color-solid-dot: var(--pine-color-grey-900);
+  --pine-chip-color-solid-text: var(--pine-color-grey-900);
+  --pine-chip-color-subtle: var(--pine-color-grey-900);
+  --pine-chip-color-subtle-hover: var(--pine-color-grey-500);
+  --pine-chip-color-subtle-dot: var(--pine-color-white);
+  --pine-chip-color-subtle-text: var(--pine-color-white);
   --pine-chip-color-success: var(--pine-color-green-900);
   --pine-chip-color-success-hover: var(--pine-color-green-800);
   --pine-chip-color-success-dot: var(--pine-color-green-400);

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

@@ -2,10 +2,24 @@ import { html } from 'lit';
 
 
 export default {
+  args: {
+    dotColor: '',
+    iconColor: '',
+  },
   argTypes: {
+    // `dot` and `icon` are also CSS part names; without these the parts
+    // entries replace the prop controls in the Controls panel.
+    dot: {
+      control: { type: 'boolean' },
+      table: { category: 'properties' },
+    },
+    icon: {
+      control: { type: 'text' },
+      table: { category: 'properties' },
+    },
     sentiment: {
       control: { type: 'select' },
-      options: ['accent', 'brand', 'danger', 'info', 'neutral', 'success', 'warning'],
+      options: ['accent', 'brand', 'danger', 'info', 'neutral', 'solid', 'subtle', 'success', 'warning'],
     },
     size: {
       control: { type: 'select' },
@@ -25,7 +39,9 @@ const BaseTemplate = (args) => html`
 <pds-chip
   component-id="${args.componentId}"
   ?dot=${args.dot}
+  dot-color="${args.dotColor}"
   icon="${args.icon}"
+  icon-color="${args.iconColor}"
   size="${args.size}"
   sentiment="${args.sentiment}"
   variant="${args.variant}"
@@ -77,6 +93,28 @@ Icon.args = {
   variant: "text",
 }
 
+export const DotColor = BaseTemplate.bind();
+DotColor.args = {
+  dot: true,
+  dotColor: "success",
+  icon: "",
+  size: "md",
+  sentiment: "neutral",
+  slot: "Active",
+  variant: "text",
+}
+
+export const IconColor = BaseTemplate.bind();
+IconColor.args = {
+  dot: false,
+  icon: "check",
+  iconColor: "success",
+  size: "md",
+  sentiment: "neutral",
+  slot: "Paid",
+  variant: "text",
+}
+
 export const Dropdown = BaseTemplate.bind();
 Dropdown.args = {
   dot: false,