@pine-ds/core 3.27.0 → 3.29.0

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

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

@@ -5,6 +5,27 @@ import { Host, h } from "@stencil/core";
 * @part tab-list - Exposes the container element that holds all the tab buttons for styling.
 */
 export class PdsTabs {
+    constructor() {
+        /**
+         * Adds a divider rule beneath the tab list.
+         * @defaultValue false
+         */
+        this.divider = false;
+        /**
+         * Stretches the component so the active tab panel fills the remaining height.
+         * Requires the component to have a constrained height (e.g. a flex parent).
+         * @defaultValue false
+         */
+        this.stretch = false;
+        /**
+         * Renders the tab strip as navigation instead of an in-page panel switcher: each
+         * `pds-tab` becomes an `<a href>` inside a `<nav>` landmark (with `aria-current`
+         * on the `active` tab) rather than a `role="tab"` button over a `pds-tabpanel`.
+         * Give every `pds-tab` an `href` and omit `pds-tabpanel`s.
+         * @defaultValue false
+         */
+        this.nav = false;
+    }
     tabClickHandler(event) {
         if (this.componentId === event.detail[1]) {
             this.activeTabIndex = event.detail[0];
@@ -12,6 +33,10 @@ export class PdsTabs {
         }
     }
     handleKeyDown(ev) {
+        // Navigation mode uses real links: Tab moves focus, Enter follows the href.
+        // The roving/arrow model is a panel-mode (role=tab) concern only.
+        if (this.isNav)
+            return;
         const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
         // Only handle keyboard navigation if the event originated from a tab button
         // that belongs to THIS tabs component
@@ -24,6 +49,32 @@ export class PdsTabs {
             this.moveActiveTab(ev.key);
         }
     }
+    // Navigation mode is an explicit, single source of truth: `nav` drives both the
+    // container (<nav> of links vs role=tablist of buttons) and every child tab (via
+    // `navMode`), so the tabs present when the strip initializes can't mix the two.
+    // (Child discovery is load-time only, like `variant`/`id`; tabs added after load
+    // aren't managed.)
+    get isNav() {
+        return !!this.nav;
+    }
+    // `nav` and per-tab `href` should agree. Warn on the two authoring mistakes
+    // rather than silently rendering a link with no destination, or ignoring an href.
+    warnOnNavConfig() {
+        var _a;
+        if (!((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        // An empty `href=""` is not a usable destination, so it counts as missing.
+        const withHref = this.tabs.filter((tab) => {
+            const href = tab.getAttribute('href');
+            return href != null && href !== '';
+        }).length;
+        if (this.nav && withHref < this.tabs.length) {
+            console.warn('pds-tabs: `nav` is set, so every pds-tab needs an `href`.');
+        }
+        else if (!this.nav && withHref > 0) {
+            console.warn('pds-tabs: a pds-tab has an `href` but `nav` is not set — add `nav` to pds-tabs for navigation mode; the href is ignored in panel mode.');
+        }
+    }
     moveActiveTab(key) {
         const firstTabNumber = 0;
         const lastTabNumber = this.tabs.length - 1;
@@ -62,13 +113,25 @@ export class PdsTabs {
         child['index'] = index;
     }
     passPropsToChildren() {
+        var _a;
+        // Panel mode needs a selected tab so the tablist stays keyboard-reachable
+        // (an all-unselected tablist has every button at tabindex="-1"). Default to
+        // the first ENABLED tab when the consumer omits `activeTabName` — a disabled
+        // tab is itself tabindex="-1", so selecting it would recreate the trap. Nav
+        // mode has no roving/selection, so it's left unset there.
+        if (!this.nav && this.activeTabName == null && this.tabs.length) {
+            const firstEnabled = (_a = this.tabs.find((tab) => !tab.disabled)) !== null && _a !== void 0 ? _a : this.tabs[0];
+            this.activeTabName = firstEnabled.name;
+        }
         this.tabs.forEach((child, index) => {
             if (this.activeTabName === child.name)
                 this.activeTabIndex = index;
             this.propGeneration(child, index);
+            child.navMode = this.nav;
         });
         this.tabPanels.forEach((child) => {
             this.propGeneration(child);
+            child.stretch = this.stretch;
         });
     }
     classNames() {
@@ -77,17 +140,27 @@ export class PdsTabs {
             const variantClassName = `pds-tabs--${this.variant}`;
             className += ' ' + variantClassName;
         }
+        if (this.divider) {
+            className += ' pds-tabs--divider';
+        }
+        if (this.stretch) {
+            className += ' pds-tabs--stretch';
+        }
         return className;
     }
     ;
     componentWillLoad() {
         this.findAllChildren();
+        this.warnOnNavConfig();
     }
     componentWillRender() {
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: '213dfbe8f2828b430ab81dce23f43c2137206861', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '68989e852e2eeed180f91e5ac901c4318d6c0d70', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, h("slot", { key: '4a06996745c049fdaf830460e8d57caefd50900b', name: "tabs" })), h("slot", { key: 'e0558392bff0955defb133b36dd4e7360f33acce', name: "tabpanels" })));
+        // Navigation mode: a <nav> landmark of links (aria-current marks the current
+        // page). Panel mode: the ARIA tablist of role=tab buttons over tabpanels.
+        const tabList = this.isNav ? (h("nav", { class: "pds-tabs__tablist", "aria-label": this.tablistLabel || undefined, part: "tab-list" }, h("slot", { name: "tabs" }))) : (h("div", { class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, h("slot", { name: "tabs" })));
+        return (h(Host, { key: '97bb6d788bd7bdf393b46eaecea612d9b0c9dee4', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, h("slot", { key: '252855bfa496bc3e04fbe6dc0bcb7597c7360407', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -160,6 +233,75 @@ export class PdsTabs {
                 "reflect": false,
                 "attribute": "variant"
             },
+            "divider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Adds a divider rule beneath the tab list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider",
+                "defaultValue": "false"
+            },
+            "stretch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Stretches the component so the active tab panel fills the remaining height.\nRequires the component to have a constrained height (e.g. a flex parent)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stretch",
+                "defaultValue": "false"
+            },
+            "nav": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Renders the tab strip as navigation instead of an in-page panel switcher: each\n`pds-tab` becomes an `<a href>` inside a `<nav>` landmark (with `aria-current`\non the `active` tab) rather than a `role=\"tab\"` button over a `pds-tabpanel`.\nGive every `pds-tab` an `href` and omit `pds-tabpanel`s."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "nav",
+                "defaultValue": "false"
+            },
             "activeTabName": {
                 "type": "string",
                 "mutable": true,
@@ -168,11 +310,11 @@ export class PdsTabs {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the starting active tab name and maintains the name as the component re-renders"
+                    "text": "Sets the starting active tab name and maintains the name as the component re-renders.\nPanel mode only \u2014 in navigation mode (`nav`) the active tab is set per-tab via\n`active`, so this is not required there."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -61,3 +61,46 @@ Availability.args = {
   variant: 'availability',
   tablistLabel: "Foo",
 }
+
+export const Divider = () => html`
+<pds-tabs active-tab-name="Dollop" component-id="divider" tablist-label="Foo" variant="primary" divider>
+  <pds-tab name="Sturdy">Sturdy</pds-tab>
+  <pds-tab name="Dollop">Dollop</pds-tab>
+  <pds-tab name="Waffle">Waffle</pds-tab>
+  <pds-tabpanel name="Sturdy">Content Sturdy</pds-tabpanel>
+  <pds-tabpanel name="Dollop">Content Dollop</pds-tabpanel>
+  <pds-tabpanel name="Waffle">Content Waffle</pds-tabpanel>
+</pds-tabs>
+`;
+
+export const Stretch = () => html`
+<div style="block-size: 240px; border: var(--pine-border-width-thin) solid var(--pine-color-border-subtle); display: flex;">
+  <pds-tabs active-tab-name="Dollop" component-id="stretch" tablist-label="Foo" variant="primary" divider stretch>
+    <pds-tab name="Sturdy">Sturdy</pds-tab>
+    <pds-tab name="Dollop">Dollop</pds-tab>
+    <pds-tab name="Waffle">Waffle</pds-tab>
+    <pds-tabpanel name="Sturdy">Content Sturdy</pds-tabpanel>
+    <pds-tabpanel name="Dollop">
+      <div style="align-items: end; background-color: var(--pine-color-background-muted); block-size: 100%; display: flex;">Composer pinned to the bottom</div>
+    </pds-tabpanel>
+    <pds-tabpanel name="Waffle">Content Waffle</pds-tabpanel>
+  </pds-tabs>
+</div>
+`;
+
+// Navigation mode: set `nav` on pds-tabs and give each pds-tab an `href` (plus
+// optional Turbo props). The strip renders as a <nav> of links with aria-current
+// on the active one — for per-URL tab strips (e.g. deep-linkable page tabs) rather
+// than in-page panels. No pds-tabpanels; the destination URL renders the content.
+//
+// This story exercises every nav-mode prop: the active tab drives a Turbo Frame
+// (turbo-frame/turbo-action), a disabled tab is dropped from tab order, and an
+// external tab opens in a new tab (target="_blank" → rel="noopener noreferrer").
+export const NavTabs = () => html`
+<pds-tabs component-id="nav" tablist-label="Club sections" variant="primary" divider nav>
+  <pds-tab name="chat" href="/clubs/1/chat" active turbo-frame="clubs-body" turbo-action="advance">Chat</pds-tab>
+  <pds-tab name="resources" href="/clubs/1/resources" turbo-frame="clubs-body" turbo-action="advance">Resources</pds-tab>
+  <pds-tab name="members" href="/clubs/1/members" disabled>Members</pds-tab>
+  <pds-tab name="help" href="https://help.example.com/clubs" target="_blank">Help</pds-tab>
+</pds-tabs>
+`;

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

@@ -83,7 +83,7 @@ export class PdsText {
             ? `pds-text--decoration-${this.decoration}`
             : ''}
     `;
-        return (h(Tag, { key: '36278c42c1669a3d2ff3ac2973727c03f2498023', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, h("slot", { key: 'cb3c83b54cb84fe485fd14c7073148fc037d78cd' })));
+        return (h(Tag, { key: '9ae3d5a57202ca1308c69b76645168fc8e18953b', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, h("slot", { key: 'e6c95b8240690a9c83927e206096bbd7615dd4d2' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,7 @@ import { assignDescription, isRequired, isSpecTest, messageId, exposeTypePropert
 import { debounceEvent } from "../../utils/utils";
 import { inheritAttributes, inheritAriaAttributes } from "../../utils/attributes";
 import { danger } from "@pine-ds/icons/icons";
+import { formatMessage } from "../../i18n";
 /**
  * @slot action - Content to be displayed in the label area, typically for help icons or links
  */
@@ -43,6 +44,12 @@ export class PdsTextarea {
          * If true, the textarea has action content in the label area
          */
         this.hasAction = false;
+        /**
+         * Template for the character-counter's accessible label. Pass a translated
+         * string to localize it; `{current}` and `{max}` are interpolated.
+         * @defaultValue '{current} of {max} characters'
+         */
+        this.characterCountLabel = '{current} of {max} characters';
         this.onBlur = (ev) => {
             this.hasFocus = false;
             if (this.focusedValue !== this.value) {
@@ -240,7 +247,7 @@ export class PdsTextarea {
             return null;
         }
         const currentLength = this.getValue().length;
-        return (h("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label": `${currentLength} of ${this.maxLength} characters` }, currentLength, " / ", this.maxLength));
+        return (h("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label": formatMessage(this.characterCountLabel, { current: currentLength, max: this.maxLength }) }, currentLength, " / ", this.maxLength));
     }
     renderAction() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
@@ -294,10 +301,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: '09726ef6454fe84a5c8d0ea25c6e8a7a6da128f9', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '6244104f11d26b25a908fbaf13a815988a3c33d9', class: "pds-textarea" }, this.label &&
-            h("div", { key: '5dd7f6caedd7ebf5ecaacf8d111ec5e2426e84ae', class: "pds-textarea__label-wrapper" }, h("label", { key: 'd19f62cd28612423abf0d5696ff1cd88f39d32fe', htmlFor: this.componentId }, h("span", { key: '37f4e9e34ae3205bafa5f1bc8574a98d3a90060d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '4c3c8fadc5596630485ee1775f5d87d77c11d95b', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: 'a60be5f3d362cb9bcd2ecf5af16ffc467fc8322a', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            h("p", { key: 'ae03337ef85ac2a3995e967fe671e0ad2c352710', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'a2bda9a477e7d2b81862833da43158a626d8cc6f', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '5ac785e8012aeb49dd0b1c5823233671531b0a7a', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: 'd13869d989752c76c80a46ebb0291df2c0546cc2', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '19454f642896485dc22bc5dac8b6ed3b4ae5627a', class: "pds-textarea" }, this.label &&
+            h("div", { key: 'def9e117ba3667a542e8cec32c2eabfa701c3305', class: "pds-textarea__label-wrapper" }, h("label", { key: '893a1db325ece460c627e72b765289098823e49e', htmlFor: this.componentId }, h("span", { key: 'd047f17441aa81800057d7403af15f6e38c53f6c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '7d0f2fab56fee9b9d9e0facabc7e607cb6bee23b', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: 'a3ecb78c5b8f42f8350abe623bacb55be6c4a0c0', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            h("p", { key: 'b5229a6ef0b2c4ee5dcb820ce2b9bbf6334adef8', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: '8e6dfa97496d553b8e1e2a50c1221fad3ddb539a', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'f3ed2677239e6d135480cf55d1d908936d746322', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -654,6 +661,29 @@ export class PdsTextarea {
                 "reflect": false,
                 "attribute": "value",
                 "defaultValue": "''"
+            },
+            "characterCountLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'{current} of {max} characters'"
+                        }],
+                    "text": "Template for the character-counter's accessible label. Pass a translated\nstring to localize it; `{current}` and `{max}` are interpolated."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "character-count-label",
+                "defaultValue": "'{current} of {max} characters'"
             }
         };
     }