@pine-ds/core 4.1.0 → 4.3.0

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() {
@@ -60,6 +73,11 @@ export class PdsChip {
                 hostEl: this.el,
                 contentEl: this.labelTextEl,
                 getTooltipText: () => this.el.textContent || '',
+                // The dropdown variant's label span already sits inside
+                // `<button class="pds-chip__button">`, which is already focusable and
+                // bubbles focusin to the host — a tabindex on the span too would nest
+                // a second tab stop inside the button.
+                manageTabIndex: this.effectiveVariant !== 'dropdown',
             });
             this.tooltipBoundEl = this.labelTextEl;
         }
@@ -110,11 +128,15 @@ export class PdsChip {
         // node — and a plain `<pds-chip>Some text</pds-chip>` slots text with no
         // wrapping element. Wrapping the slot itself in an internal span gives
         // maxWidth something to ellipsize regardless of what's slotted.
-        // A focus-triggered tooltip needs a focusable anchor. The dropdown's own
-        // button already takes focus (focusin bubbles to the host), so only the
-        // text/tag label span needs a tabindex — and only when it can truncate.
-        const labelTabindex = this.maxWidth ? '0' : undefined;
-        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", tabindex: labelTabindex, ref: (el) => (this.labelTextEl = el) }, h("slot", null))));
+        // A focus-triggered tooltip needs a focusable anchor, but the label span
+        // only earns a tab stop while its text is actually clipped — a chip whose
+        // label fits has nothing to reveal. setupTruncationTooltip owns that
+        // tabindex off the measurement for every variant except dropdown: its
+        // label span already sits inside `<button class="pds-chip__button">`,
+        // 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", { 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() {
@@ -123,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';
@@ -170,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: 'fd689f64fe35685c7e8e0f5e73a01c8564ad3c66', 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"; }
@@ -228,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,
@@ -247,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,
@@ -281,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-copytext/pds-copytext.js

@@ -63,6 +63,10 @@ export class PdsCopytext {
                 hostEl: this.el,
                 contentEl: this.valueSpanEl,
                 getTooltipText: () => this.value || '',
+                // valueSpanEl already sits inside the `<pds-button>` below, which is
+                // already focusable and bubbles focusin to the host — a tabindex on
+                // the span too would nest a second tab stop inside the button.
+                manageTabIndex: false,
             });
         }
     }
@@ -86,7 +90,7 @@ export class PdsCopytext {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '43a3870fa4c24416e2e6e99dd7c423a5c32ac91e', class: this.classNames(), id: this.componentId }, h("pds-button", { key: 'f0735d3f245dd7150e88b3dd1a191c3ee86b6293', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: 'ddf7cf205f9bb11dd4b4111435bb7efc15b0af61', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '7ba6d0452e1726ff951ec46433f838669961c277', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: '6e3ff4eb0dc42e57156a162196a06a675cac6f91', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '749a8dde35eb3c70941229d11dc6477aaf717ed1', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '7f457a164f3ae76a37814d37d7b5e3fce86bd803', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '0ff6dad44148c23ee9d693e82880598b91b0630e', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-drawer/pds-drawer-content/pds-drawer-content.css

@@ -0,0 +1,22 @@
+pds-drawer-content {
+  display: block;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.pds-drawer-content {
+  box-sizing: border-box;
+  display: block;
+  height: 100%;
+  padding: var(--pine-dimension-md);
+  width: 100%;
+}
+
+.pds-modal--scrollable pds-drawer-content {
+  overflow-y: auto;
+}
+
+.pds-modal:not(.pds-modal--scrollable) pds-drawer-content {
+  overflow-y: visible;
+}

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

@@ -0,0 +1,29 @@
+import { h } from "@stencil/core";
+import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * Fills the drawer panel's height by default — unlike `pds-modal-content`,
+ * which caps itself against the viewport for a centered, possibly-shorter
+ * modal, a drawer panel is already edge-to-edge, so its content can simply
+ * flex to fill whatever space the header and footer leave.
+ */
+export class PdsDrawerContent {
+    // Unwraps a nested .pds-drawer-content left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
+    }
+    render() {
+        return (h("div", { key: '432db626c93ab42365ec1af83562eec7ae1c4674', class: "pds-drawer-content" }, h("slot", { key: '901ab074f31726023add709a4953bddb43842de2' })));
+    }
+    static get is() { return "pds-drawer-content"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-drawer-content.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-drawer-content.css"]
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/pds-drawer/pds-drawer-footer/pds-drawer-footer.css

@@ -0,0 +1,15 @@
+pds-drawer-footer {
+  display: block;
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.pds-drawer__footer {
+  border-block-start: 1px solid var(--pine-color-border-subtle);
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--pine-dimension-sm);
+  justify-content: flex-end;
+  padding: var(--pine-dimension-md);
+  width: 100%;
+}

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

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+export class PdsDrawerFooter {
+    // Unwraps a nested .pds-drawer__footer left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
+    }
+    render() {
+        return (h("footer", { key: '71cb35f7b1ccba9e4187eb8942771741f13510dc', class: "pds-drawer__footer" }, h("slot", { key: '28927c76ee8194c44f416ee5d4e9ea2e0376bf5a' })));
+    }
+    static get is() { return "pds-drawer-footer"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-drawer-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-drawer-footer.css"]
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/pds-drawer/pds-drawer-header/pds-drawer-header.css

@@ -0,0 +1,15 @@
+pds-drawer-header {
+  display: block;
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.pds-drawer__header {
+  align-items: center;
+  border-block-end: 1px solid var(--pine-color-border-subtle);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--pine-dimension-md);
+  width: 100%;
+}

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

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+export class PdsDrawerHeader {
+    // Unwraps a nested .pds-drawer__header left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
+    }
+    render() {
+        return (h("header", { key: '48d0585e0e20c9d3142635f0fc0184c0803413b8', class: "pds-drawer__header" }, h("slot", { key: '14d9d0bde0116c81892140b22a2b6e9a2b1d969f' })));
+    }
+    static get is() { return "pds-drawer-header"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-drawer-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-drawer-header.css"]
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,36 @@
+.pds-drawer__modal > .pds-modal__backdrop {
+  align-items: stretch;
+  background-color: transparent;
+  pointer-events: none;
+}
+@supports (backdrop-filter: blur(3px)) {
+  .pds-drawer__modal > .pds-modal__backdrop {
+    backdrop-filter: none;
+  }
+}
+
+.pds-drawer__modal > .pds-modal__backdrop > .pds-modal {
+  border-radius: 0;
+  height: 100%;
+  margin: 0;
+  max-height: 100%;
+  max-width: 100%;
+  pointer-events: auto;
+  width: var(--pds-drawer-width, 500px);
+}
+
+.pds-drawer {
+  display: contents;
+}
+.pds-drawer.pds-drawer--end .pds-drawer__modal > .pds-modal__backdrop {
+  justify-content: flex-end;
+}
+.pds-drawer.pds-drawer--start .pds-drawer__modal > .pds-modal__backdrop {
+  justify-content: flex-start;
+}
+.pds-drawer.pds-drawer--sm {
+  --pds-drawer-width: 360px;
+}
+.pds-drawer.pds-drawer--md {
+  --pds-drawer-width: 500px;
+}