@pine-ds/core 4.0.0 → 4.2.0

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

@@ -60,6 +60,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 +115,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", { 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))));
         return chipContent;
     }
     get hostStyles() {
@@ -170,7 +179,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: '3b796c1340ac4e37569bf7904dbed05ba6938e4b', 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"; }

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-divider/pds-divider.css

@@ -12,6 +12,26 @@
   width: 1px;
 }
 
+.pds-divider--labeled {
+  align-items: center;
+  background: none;
+  color: var(--pine-color-text);
+  font: var(--pine-typography-body-sm-medium);
+  gap: var(--pine-dimension-sm);
+  height: auto;
+  width: auto;
+}
+.pds-divider--labeled::before, .pds-divider--labeled::after {
+  background: var(--pine-color-border);
+  content: "";
+  flex: 1;
+  height: var(--pine-border-width);
+}
+
+.pds-divider__label {
+  text-align: center;
+}
+
 .pds-divider--offset-xxs {
   margin: 0 calc(var(--pine-dimension-2xs) * -1);
   padding: 0 var(--pine-dimension-2xs);
@@ -20,6 +40,9 @@
   margin: calc(var(--pine-dimension-2xs) * -1) 0;
   padding: var(--pine-dimension-2xs) 0;
 }
+.pds-divider--offset-xxs.pds-divider--labeled {
+  padding: 0;
+}
 
 .pds-divider--offset-xs {
   margin: 0 calc(var(--pine-dimension-xs) * -1);
@@ -29,6 +52,9 @@
   margin: calc(var(--pine-dimension-xs) * -1) 0;
   padding: var(--pine-dimension-xs) 0;
 }
+.pds-divider--offset-xs.pds-divider--labeled {
+  padding: 0;
+}
 
 .pds-divider--offset-sm {
   margin: 0 calc(var(--pine-dimension-sm) * -1);
@@ -38,6 +64,9 @@
   margin: calc(var(--pine-dimension-sm) * -1) 0;
   padding: var(--pine-dimension-sm) 0;
 }
+.pds-divider--offset-sm.pds-divider--labeled {
+  padding: 0;
+}
 
 .pds-divider--offset-md {
   margin: 0 calc(var(--pine-dimension-md) * -1);
@@ -47,6 +76,9 @@
   margin: calc(var(--pine-dimension-md) * -1) 0;
   padding: var(--pine-dimension-md) 0;
 }
+.pds-divider--offset-md.pds-divider--labeled {
+  padding: 0;
+}
 
 .pds-divider--offset-lg {
   margin: 0 calc(var(--pine-dimension-lg) * -1);
@@ -56,6 +88,9 @@
   margin: calc(var(--pine-dimension-lg) * -1) 0;
   padding: var(--pine-dimension-lg) 0;
 }
+.pds-divider--offset-lg.pds-divider--labeled {
+  padding: 0;
+}
 
 .pds-divider--offset-xl {
   margin: 0 calc(var(--pine-dimension-xl) * -1);
@@ -65,6 +100,9 @@
   margin: calc(var(--pine-dimension-xl) * -1) 0;
   padding: var(--pine-dimension-xl) 0;
 }
+.pds-divider--offset-xl.pds-divider--labeled {
+  padding: 0;
+}
 
 .pds-divider--offset-xxl {
   margin: 0 calc(var(--pine-dimension-2xl) * -1);
@@ -74,6 +112,9 @@
   margin: calc(var(--pine-dimension-2xl) * -1) 0;
   padding: var(--pine-dimension-2xl) 0;
 }
+.pds-divider--offset-xxl.pds-divider--labeled {
+  padding: 0;
+}
 
 @media (max-width: 767px) {
   .pds-divider--vertical {

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

@@ -1,4 +1,7 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @part label - Exposes the label text for styling, such as a custom color. Appears only when `label` is set and `vertical` is `false`.
+ */
 export class PdsDivider {
     constructor() {
         /**
@@ -7,11 +10,18 @@ export class PdsDivider {
          */
         this.vertical = false;
     }
+    get hasLabel() {
+        var _a;
+        return Boolean((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()) && !this.vertical;
+    }
     classNames() {
         const classNames = ['pds-divider'];
         if (this.vertical) {
             classNames.push('pds-divider--vertical');
         }
+        if (this.hasLabel) {
+            classNames.push('pds-divider--labeled');
+        }
         if (this.offset) {
             const offsetClassName = 'pds-divider--offset-' + this.offset;
             classNames.push(offsetClassName);
@@ -19,7 +29,7 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'c3a01882db1119b8397353aaed193813cba0bfb8', id: this.componentId }, h("hr", { key: 'fe20a28dbd2f10cec125df4dbb4ba7a2837628f1', class: this.classNames() })));
+        return (h(Host, { key: 'c6f887ca1f68c8e572bd518c43d88f052f6d9dd1', id: this.componentId }, this.hasLabel ? (h("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, h("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (h("hr", { class: this.classNames() }))));
     }
     static get is() { return "pds-divider"; }
     static get encapsulation() { return "shadow"; }
@@ -54,6 +64,25 @@ export class PdsDivider {
                 "reflect": false,
                 "attribute": "component-id"
             },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to be displayed as the divider label, centered between two lines. Ignored when `vertical` is `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
             "offset": {
                 "type": "string",
                 "mutable": false,

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

@@ -8,6 +8,7 @@ export default {
 const BaseTemplate = (args) => html`
   <pds-divider
     component-id=${args.componentId}
+    label=${args.label ?? ''}
     offset=${args.offset}
     vertical=${args.vertical}
   />`;
@@ -21,3 +22,9 @@ export const Vertical = BaseTemplate.bind();
 Vertical.args = {
   vertical: true,
 }
+
+export const WithLabel = BaseTemplate.bind();
+WithLabel.args = {
+  label: 'Today',
+  vertical: false,
+}

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;
+}