@pine-ds/core 4.2.0 → 4.3.0

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: '323831a875b5f0e786e1e835c230d6950c71d009', 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,

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

@@ -279,8 +279,7 @@
   --color-border-hover: var(--pine-color-accent-hover);
   --color-border-disabled: var(--pine-color-accent-disabled);
   --color-border-focus: var(--pine-color-accent);
-  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
-  --color-text-default: var(--pine-color-white);
+  --color-text-default: var(--pine-color-text-primary);
   --color-text-disabled: var(--pine-color-text-accent-disabled);
   --color-outline: var(--pine-color-focus-ring);
 }

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

@@ -1935,7 +1935,7 @@ export class PdsCombobox {
                 "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-modal/pds-modal.css

@@ -86,6 +86,10 @@ pds-modal .pds-modal__backdrop {
   max-width: 900px;
 }
 
+.pds-modal--custom {
+  max-width: var(--pds-modal-max-width, 700px);
+}
+
 .pds-modal--fullscreen {
   border-radius: 0;
   height: 100%;

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

@@ -1,5 +1,9 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../utils/reconnected-content";
+const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
+const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
+    /\d/.test(value) &&
+    (typeof CSS === 'undefined' || CSS.supports('max-width', value));
 export class PdsModal {
     constructor() {
         this.focusableElements = [];
@@ -14,7 +18,9 @@ export class PdsModal {
          */
         this.open = false;
         /**
-         * The size of the modal
+         * The size of the modal. Can be a predefined value ('sm', 'md', 'lg', 'fullscreen') or a custom
+         * max-width as a CSS length (e.g., '1250px', '80vw'). A custom width stays fluid below that size.
+         * A value that is neither falls back to 'md'.
          * @default 'md'
          */
         this.size = 'md';
@@ -140,6 +146,12 @@ export class PdsModal {
             }
         };
     }
+    componentWillLoad() {
+        this.warnOnInvalidSize();
+    }
+    sizeChanged() {
+        this.warnOnInvalidSize();
+    }
     componentDidLoad() {
         this.modalRef = this.el.querySelector('.pds-modal__backdrop');
         // Add keyboard event listener
@@ -398,15 +410,28 @@ export class PdsModal {
         const thisZIndex = this.getBackdropZIndex(this.el);
         return thisZIndex === maxZIndex;
     }
+    resolveSize() {
+        var _a;
+        const size = ((_a = this.size) !== null && _a !== void 0 ? _a : '').trim() || 'md';
+        if (PRESET_SIZES.includes(size))
+            return [size];
+        return isCustomLength(size) ? ['custom', size] : [undefined];
+    }
+    warnOnInvalidSize() {
+        if (this.resolveSize()[0] !== undefined)
+            return;
+        console.warn(`pds-modal: invalid size "${String(this.size).slice(0, 50)}", using md`);
+    }
     render() {
-        return (h("dialog", { key: 'f35044ec9bca1189069faf083c824d8144800053', class: {
+        const [sizeClass = 'md', customSize] = this.resolveSize();
+        return (h("dialog", { key: 'bbc56f2aaf3fe861ae309eb1930d51a588b4c727', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '99a53b36e160ac14dfd6d598aeaa94114855dacc', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: 'b3d6f9c2a7854845ebe94c05ee507000c38a1326', class: {
                 'pds-modal': true,
-                [`pds-modal--${this.size}`]: true,
+                [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, part: "modal" }, h("slot", { key: 'cfee7bdf3620d606b1d3130f4ebed4caa83084f1' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: '42ff9ae5e427bc69141c58e0824aad677f5c7756' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {
@@ -490,9 +515,20 @@ export class PdsModal {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sm' | 'md' | 'lg' | 'fullscreen'",
-                    "resolved": "\"fullscreen\" | \"lg\" | \"md\" | \"sm\"",
-                    "references": {}
+                    "original": "ModalSizeType | (string & Record<never, never>)",
+                    "resolved": "\"fullscreen\" | \"lg\" | \"md\" | \"sm\" | string & Record<never, never>",
+                    "references": {
+                        "ModalSizeType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::ModalSizeType",
+                            "referenceLocation": "ModalSizeType"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -501,7 +537,7 @@ export class PdsModal {
                             "name": "default",
                             "text": "'md'"
                         }],
-                    "text": "The size of the modal"
+                    "text": "The size of the modal. Can be a predefined value ('sm', 'md', 'lg', 'fullscreen') or a custom\nmax-width as a CSS length (e.g., '1250px', '80vw'). A custom width stays fluid below that size.\nA value that is neither falls back to 'md'."
                 },
                 "getter": false,
                 "setter": false,
@@ -663,6 +699,9 @@ export class PdsModal {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "size",
+                "methodName": "sizeChanged"
+            }, {
                 "propName": "open",
                 "methodName": "handleOpenChange"
             }];

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

@@ -13,6 +13,12 @@ export default {
     scrollable: true,
     size: 'md',
   },
+  argTypes: {
+    size: {
+      control: 'text',
+      description: "A preset ('sm', 'md', 'lg', 'fullscreen') or a CSS length such as '1100px'.",
+    },
+  },
   parameters: {}
 }
 
@@ -89,6 +95,14 @@ Default.args = {
   open: false,
 };
 
+// Any CSS length works as a size; it becomes the modal's max-width.
+export const CustomSize = BaseTemplate.bind({});
+CustomSize.args = {
+  componentId: 'custom-size-modal',
+  size: '1100px',
+  open: false,
+};
+
 const DestructiveTemplate = (args) => html`
   <div>
     <pds-button id="show-modal" onClick="document.querySelector('#${args.componentId}').open = true">

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { normalizeColorValue } from "../../utils/utils";
 export class PdsProgress {
     constructor() {
         /**
@@ -18,7 +19,8 @@ export class PdsProgress {
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: '0ae02615ceeb094270d4d385d27dc1e539984e88', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '8da2f2a5b260cb19cda3021cc9289bde18fff9fc', class: "pds-progress" }, h("label", { key: 'a84106244fafed602c1f14b63d83b16f123732f4', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '82fb1a46fb2e7c89d5b4ed4e8e3efa590c896d0d', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '36d041d1c5e656ac0864999200f48e15e53aa3f3', class: "pds-progress__percentage" }, this.percent, "%")));
+        const normalizedFillColor = normalizeColorValue(this.fillColor);
+        return (h(Host, { key: 'acca17890c316c056c61e4fad2917f0279126c39', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'f8140ac930335bd67e3576a0f3739092d492d884', class: "pds-progress" }, h("label", { key: '66416d0472024ae14a6413e4e533f08970cbc857', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '2bbbe4e1e3d186c2895401ac4b68dabac60a1df9', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '672956684adf944ea1de8769dbaba615c82a85b6', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -104,8 +104,7 @@ input:checked:hover {
   border-color: var(--pine-color-accent-hover);
 }
 input:checked::after {
-  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
-  background: var(--pine-color-white);
+  background: var(--pine-color-text-primary);
   border-radius: var(--pine-border-radius-full);
   content: "";
   display: block;

package/dist/collection/utils/utils.js

@@ -15,9 +15,16 @@ export const debounce = (func, wait = 0) => {
         timer = setTimeout(func, wait, ...args);
     };
 };
-// Add shared color normalization utility to unify token handling across components
 /**
- * Normalizes color values to ensure consistent CSS variable usage
+ * Normalizes color values to ensure consistent CSS variable usage.
+ *
+ * This is the single low-level primitive for color-prop normalization in
+ * Pine. A component with its own semantic-keyword set (e.g. pds-chip's
+ * sentiment-to-dot-color map) should call this directly with its own
+ * `semanticMap` rather than inventing a new normalization helper. Reach for
+ * `setColor` below only when its specific text-role semantic set and
+ * `--color` output key already match what the component needs.
+ *
  * @param value - Raw token (--token), CSS variable (var(--token)), semantic name, or literal color
  * @param options.semanticMap - Optional mapping of semantic names to CSS variables
  * @returns Normalized color value or undefined for invalid inputs
@@ -42,6 +49,13 @@ export const normalizeColorValue = (value, options) => {
     // Otherwise treat as literal CSS color value
     return trimmed;
 };
+/**
+ * Convenience wrapper around `normalizeColorValue` for the common text-role
+ * semantic set (primary/secondary/accent/etc.), returned as a `--color`
+ * custom property. If a component needs a different semantic map or a
+ * different custom-property name (e.g. pds-chip's dot/icon-specific tokens),
+ * call `normalizeColorValue` directly instead of extending this function.
+ */
 export const setColor = (color, customColors) => {
     // Return an empty object for empty/whitespace/undefined inputs to avoid invalid CSS styles
     if (!color)