@pine-ds/core 3.28.0 → 3.29.0

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

@@ -11,6 +11,8 @@ export default {
     image: null,
     initials: null,
     size: null,
+    status: null,
+    statusRing: false,
     variant: 'customer',
   },
   component: 'pds-avatar',
@@ -25,6 +27,8 @@ const BaseTemplate = (args) => html`<pds-avatar
 	image="${args.image}"
 	initials="${args.initials}"
 	size="${args.size}"
+	status="${args.status}"
+	status-ring="${args.statusRing}"
 	variant="${args.variant}"
 >
 </pds-avatar>`;
@@ -76,3 +80,22 @@ InitialsWithBadge.args = {
 	initials: 'KJ',
 	size: 'lg'
 }
+
+export const Status = BaseTemplate.bind();
+Status.args = {
+	initials: 'KJ',
+	size: 'lg',
+	status: 'online'
+}
+
+export const AllStatuses = () => html`<div style="display: flex; gap: 16px; align-items: center;">
+	<pds-avatar initials="KJ" size="lg" status="online"></pds-avatar>
+	<pds-avatar initials="KJ" size="lg" status="away"></pds-avatar>
+	<pds-avatar initials="KJ" size="lg" status="offline"></pds-avatar>
+</div>`;
+
+export const StatusRing = () => html`<div style="display: flex; gap: 16px; align-items: center;">
+	<pds-avatar initials="KJ" size="lg" status="online" status-ring="true"></pds-avatar>
+	<pds-avatar initials="KJ" size="lg" status="away" status-ring="true"></pds-avatar>
+	<pds-avatar initials="KJ" size="lg" status="offline" status-ring="true"></pds-avatar>
+</div>`;

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

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 import { hasShadowDom } from "../../utils/utils";
 import { caretDown, addCircle } from "@pine-ds/icons/icons";
 /**
- * @part button - Exposes the button element for styling.
+ * @part button - Exposes the underlying button (or anchor) element for styling, including custom size, shape, or surface on icon-only placements (e.g. a compact square or inverse icon button).
  * @part button-content - Exposes the button content for styling.
  * @part button-text - Exposes the button text for styling.
  * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.

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

@@ -251,3 +251,28 @@ Sizes.args = {
   type: 'button',
   variant: 'primary'
 }
+
+// Demonstrates the supported `::part(button)` hook: a compact fixed-size,
+// inverse-surface icon button (e.g. a chat composer send affordance) that the
+// stock size/variant props don't express.
+export const CompactIconButtonViaPart = {
+  render: () => html`
+    <style>
+      .compact-inverse-icon-button::part(button) {
+        width: var(--pine-dimension-400);
+        height: var(--pine-dimension-400);
+        min-width: 0;
+        padding: 0;
+        border-radius: var(--pine-border-radius-md);
+        background: var(--pine-color-background-inverse-inset);
+        color: var(--pine-color-text-primary);
+      }
+    </style>
+    <pds-button class="compact-inverse-icon-button" variant="unstyled" icon-only icon="arrow-up">
+      Send message
+    </pds-button>
+  `,
+  parameters: {
+    controls: { exclude: ['icon'] },
+  },
+};

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

@@ -70,4 +70,14 @@
 .pds-link--plain:hover {
   color: var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));
   text-decoration: underline;
+}
+
+:host([active]) .pds-link {
+  color: var(--pds-context-link-color, var(--pine-color-text-strong));
+  text-decoration: underline;
+}
+
+:host([active]) .pds-link:hover {
+  color: var(--pds-context-link-color-hover, var(--pine-color-text-strong));
+  text-decoration: underline;
 }

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

@@ -7,6 +7,13 @@ import { launch } from "@pine-ds/icons/icons";
  */
 export class PdsLink {
     constructor() {
+        /**
+         * Marks the link as the current/active navigation item — for tab strips and
+         * nav rails built from links. Applies the active treatment (persistent
+         * underline + strong text) and sets `aria-current="page"`.
+         * @defaultValue false
+         */
+        this.active = false;
         /**
          * Determines whether the link should open in a new tab.
          * @defaultValue false
@@ -49,8 +56,8 @@ export class PdsLink {
         const targetValue = this.target || (this.external ? '_blank' : undefined);
         const showExternalIcon = this.external;
         const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
-        return (h("a", { key: '314a6249f39716ab2e632c2cb4c588ce2c74a77b', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: 'ceab5601c349ece4b142f16f682d5a2d2d0ba59a' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: 'cba3137af21eb374c8318e43e279e77fefdc1b5c', icon: launch, size: this.fontSize })));
+        return (h("a", { key: '5d0c5a0a5b8b80a8cdff802a3d78dad85a9ccdc4', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: '06b7be14d867eae1b7acba8570f1e94bdf840fbb' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: '678414f7d20fd20b6931cc401163180c3ad0094c', icon: launch, size: this.fontSize })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -66,6 +73,29 @@ export class PdsLink {
     }
     static get properties() {
         return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Marks the link as the current/active navigation item \u2014 for tab strips and\nnav rails built from links. Applies the active treatment (persistent\nunderline + strong text) and sets `aria-current=\"page\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
             "color": {
                 "type": "string",
                 "mutable": false,

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

@@ -58,3 +58,17 @@ WithoutCustomTextInSlot.args = {
   fontSize: 'lg',
   variant: 'inline'
 };
+
+// A per-URL tab strip built from links (pds-tabs is an in-page panel switcher,
+// not navigation). `active` marks the current destination — persistent underline
+// + strong text, and `aria-current="page"`, which is the correct ARIA token for
+// links that navigate to distinct pages.
+export const NavTabs = {
+  render: () => html`
+    <nav aria-label="Club sections" style="display: flex; gap: var(--pine-dimension-md);">
+      <pds-link href="/clubs/1/chat" font-size="md" ?active=${true}>Chat</pds-link>
+      <pds-link href="/clubs/1/resources" font-size="md" variant="plain">Resources</pds-link>
+      <pds-link href="/clubs/1/members" font-size="md" variant="plain">Members</pds-link>
+    </nav>
+  `,
+};

package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css

@@ -29,7 +29,7 @@ pds-tab {
 .pds-tab.is-active .pds-tab__content::after, .pds-tab[aria-selected=true] .pds-tab__content::after {
   opacity: 1;
 }
-.pds-tab:hover:not(:disabled) {
+.pds-tab:hover:not(:disabled, .is-disabled) {
   color: var(--pine-color-text);
 }
 .pds-tab:focus {
@@ -85,7 +85,7 @@ pds-tab {
 .pds-tabs--availability .pds-tab.is-active .pds-tab-edge, .pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge {
   z-index: var(--pine-z-index-raised);
 }
-.pds-tabs--availability .pds-tab:hover:not(.is-active, [aria-selected=true], :disabled) {
+.pds-tabs--availability .pds-tab:hover:not(.is-active, [aria-selected=true], :disabled, .is-disabled) {
   --color-background-tab: var(--pine-color-secondary-hover);
   color: var(--pine-color-text);
 }
@@ -139,10 +139,10 @@ pds-tab {
   background-color: var(--pine-color-primary);
   color: var(--pine-color-text-primary);
 }
-.pds-tabs--filter .pds-tab.is-active:hover:not(:disabled), .pds-tabs--filter .pds-tab[aria-selected=true]:hover:not(:disabled) {
+.pds-tabs--filter .pds-tab.is-active:hover:not(:disabled, .is-disabled), .pds-tabs--filter .pds-tab[aria-selected=true]:hover:not(:disabled, .is-disabled) {
   background-color: var(--pine-color-primary-hover);
 }
-.pds-tabs--filter .pds-tab:hover:not(.is-active, [aria-selected=true], :disabled) {
+.pds-tabs--filter .pds-tab:hover:not(.is-active, [aria-selected=true], :disabled, .is-disabled) {
   background-color: var(--pine-color-border-disabled);
 }
 .pds-tabs--filter .pds-tab:disabled, .pds-tabs--filter .pds-tab.is-disabled {

package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Fragment, Host, h } from "@stencil/core";
 export class PdsTab {
     constructor() {
         /**
@@ -6,6 +6,13 @@ export class PdsTab {
          * @defaultValue false
          */
         this.disabled = false;
+        /**
+         * Marks this tab as the current one in navigation mode (`href` set). Applies
+         * the active treatment and `aria-current="page"`. Ignored in panel mode, where
+         * the active tab is derived from the parent's `activeTabName`.
+         * @defaultValue false
+         */
+        this.active = false;
         /**
          * Keeps track of the tabpanel selected state, this property is passed by parent component
          */
@@ -17,18 +24,46 @@ export class PdsTab {
             return;
         this.pdsTabClick.emit([index, parentComponentId]);
     }
+    // An empty string is treated as "no destination" everywhere (isNav fallback,
+    // href attribute, role) so a nav tab never renders `href=""` (which would
+    // navigate to the current page).
+    get hasHref() {
+        return this.href != null && this.href !== '';
+    }
+    get isNav() {
+        var _a;
+        // The parent `pds-tabs` is authoritative when present (via `navMode`), so its
+        // tabs share one mode. Standalone, fall back to a usable `href`.
+        return (_a = this.navMode) !== null && _a !== void 0 ? _a : this.hasHref;
+    }
+    get isActive() {
+        // Navigation mode is server-driven via `active`; panel mode is parent-driven
+        // via `selected` (from `activeTabName`).
+        return this.isNav ? this.active : this.selected;
+    }
     classNames() {
         const classes = [
             'pds-tab',
-            this.selected && 'is-active',
+            this.isActive && 'is-active',
             this.disabled && 'is-disabled',
         ];
         return classes.filter(Boolean).join(' ');
     }
     render() {
-        const availabilityTabEdgeInlineStart = (h("span", { key: '934d84846bd84471047f9ab7503e5bb151426cbc', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (h("span", { key: 'e35b9da7b312ed95dab7bf803c40a22b3485ee05', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (h(Host, { key: '310188521230d3e16cff23b857769c4b5d04fd8d', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '9df38c2aa1fa29487fdce62ce7dc5f67df6bcde1', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.disabled ? "-1" : (this.selected ? "0" : "-1"), "aria-selected": this.selected ? "true" : "false", "aria-disabled": this.disabled ? "true" : null, disabled: this.disabled, class: this.classNames(), onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: '4936599dd547f236880ea9a0ccabc4b50836d1d5', class: "pds-tab__content" }, h("slot", { key: '567388faf912bb307676cea9a4626ce9669087dd' })))));
+        const availabilityTabEdgeInlineStart = (h("span", { class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (h("span", { class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        const content = (h(Fragment, null, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { class: "pds-tab__content" }, h("slot", null))));
+        // Navigation mode: a real anchor, so keyboard activation and navigation are
+        // native (and Turbo-driven when framed) with no controller — and the current
+        // item carries `aria-current="page"` rather than `role="tab"`/`aria-selected`.
+        if (this.isNav) {
+            return (h(Host, { variant: this.variant, slot: "tabs", index: this.index }, h("a", { href: this.disabled || !this.hasHref ? undefined : this.href,
+                // An anchor without an href (disabled, or forced into nav mode with no
+                // usable href) loses its implicit link role; restore it explicitly so
+                // assistive tech still announces the item rather than as plain text.
+                role: this.disabled || !this.hasHref ? "link" : undefined, id: this.parentComponentId + "__" + this.name, class: this.classNames(), target: this.target, rel: this.target === "_blank" ? "noopener noreferrer" : undefined, "aria-current": this.isActive ? "page" : undefined, "aria-disabled": this.disabled ? "true" : null, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined }, content)));
+        }
+        return (h(Host, { variant: this.variant, slot: "tabs", index: this.index }, h("button", { role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.disabled ? "-1" : (this.selected ? "0" : "-1"), "aria-selected": this.selected ? "true" : "false", "aria-disabled": this.disabled ? "true" : null, disabled: this.disabled, class: this.classNames(), onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, content)));
     }
     static get is() { return "pds-tab"; }
     static get originalStyleUrls() {
@@ -66,6 +101,105 @@ export class PdsTab {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Turns the tab into a navigation link to this URL. When set, the tab renders\nan `<a href>` (marked `aria-current=\"page\"` when `active`) instead of a\n`role=\"tab\"` button, so each tab is its own page/URL \u2014 for tab strips that\nnavigate rather than switch in-page panels. Pairs with `pds-tabs` navigation\nmode; no `pds-tabpanel`s are needed. Apply `href` to all tabs in a\n`pds-tabs` or none \u2014 mixing navigation and panel tabs is not supported."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Marks this tab as the current one in navigation mode (`href` set). Applies\nthe active treatment and `aria-current=\"page\"`. Ignored in panel mode, where\nthe active tab is derived from the parent's `activeTabName`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_self' | '_parent' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Where to open the linked URL, in navigation mode. Maps to the anchor's\n`target` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "turboFrame": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigation mode: the Turbo Frame to target. Maps to `data-turbo-frame` on the\nanchor, so a tab can swap a single frame (e.g. a page body) while leaving the\nrest of the page in place."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "turbo-frame"
+            },
+            "turboAction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'advance' | 'replace'",
+                    "resolved": "\"advance\" | \"replace\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigation mode: the Turbo visit action. Maps to `data-turbo-action` on the\nanchor (`advance` gives each tab its own history entry)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "turbo-action"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -173,6 +307,28 @@ export class PdsTab {
                 "reflect": false,
                 "attribute": "selected",
                 "defaultValue": "false"
+            },
+            "navMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "nav-mode"
             }
         };
     }

package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.css

@@ -2,6 +2,15 @@
   display: block;
 }
 
+:host(.pds-tabpanel--stretch-active) {
+  flex: 1 1 auto;
+  min-block-size: 0;
+}
+
+:host(.pds-tabpanel--stretch-active) .pds-tabpanel.is-active {
+  block-size: 100%;
+}
+
 .pds-tabpanel {
   display: none;
   margin-top: var(--tabs-dimension-panel-margin-top);

package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js

@@ -6,9 +6,14 @@ export class PdsTabpanel {
          */
         /** @internal */
         this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
+        /**
+         * Keeps track of the parent `stretch` state so the active panel can fill height, this property is passed by parent component
+         */
+        /** @internal */
+        this.stretch = false;
     }
     render() {
-        return (h(Host, { key: '6ba83ea71c899d61f67884780731591a05aa1894', slot: "tabpanels" }, h("div", { key: 'abaa610f7a68a3977303e08f1221976ae2840272', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: 'b80ecc1380f424d545b31843b53de1b2854e9f28' }))));
+        return (h(Host, { key: '88dfc12ce8b2413824e6d3425aa38674fa14c764', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, h("div", { key: 'bcfe8be6480dc253b10d63d6e37caacec4a8fe7f', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: '96ee87a0917e5f538a5c053045a5d6821684cf3a' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {
@@ -108,6 +113,29 @@ export class PdsTabpanel {
                 "reflect": false,
                 "attribute": "selected",
                 "defaultValue": "false"
+            },
+            "stretch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stretch",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -16,6 +16,20 @@
   gap: var(--pine-dimension-md);
 }
 
+:host(.pds-tabs--divider) .pds-tabs__tablist {
+  border-block-end: var(--pine-border-width-thin) solid var(--pine-color-border-subtle);
+}
+
+:host(.pds-tabs--stretch) {
+  block-size: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+:host(.pds-tabs--stretch) .pds-tabs__tablist {
+  flex: 0 0 auto;
+}
+
 :host(.pds-tabs--availability) .pds-tabs__tablist {
   gap: var(--pine-dimension-xs);
 }