@pine-ds/core 3.28.0 → 3.29.0

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

@@ -301,10 +301,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: '838d12ba686fb041996c44522d3fd30e1b56c610', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'bd3eef138a5c8f2cd4e48c007561bb1b12f4e575', class: "pds-textarea" }, this.label &&
-            h("div", { key: 'f83f23b17cd157d48bb5c0c5067ca5f611d73529', class: "pds-textarea__label-wrapper" }, h("label", { key: '896b7b495ad6f7deb8d4738e623f0676f0a98c1f', htmlFor: this.componentId }, h("span", { key: '02b06db969467f6c4e83e0f713bee0be76f8dfff', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '15c5964576e73db36cee4a9ca868c28571250a27', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '74713a5d438fc01103ca99f0c77abd84b7d2d16a', 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: 'e42f174f4153363ce745db264fd3a9ee46178a03', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: '44189515611ff9fa51d2815a7066626b6ba5df2c', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '64d275da09cdf1c2cc27d4c0a780dd414c265534', 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"; }

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

@@ -121,13 +121,13 @@ export class PdsToast {
         return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (h(Host, { key: 'a1ec97158a6665aa25b58b1954b4b5c622590615', hidden: !this.isVisible }, h("div", { key: 'd9b01164364c76512852a260cede50000b73a563', class: {
+        return (h(Host, { key: '87c9b15656a2765eb9e722c85dba5c5edbe07c42', hidden: !this.isVisible }, h("div", { key: 'bd8b26ef0c33b96603313bce74505953d8fe7410', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: '1f581c7c29ea3fc795dfca061d3575c5a9895b3c', class: "pds-toast__message" }, h("slot", { key: '645b31eae3be23de63ab2562234caf0be2510645' })), this.dismissible && (h("button", { key: '44a62b304468c0fca0b8d490ad9c8b5932176ac9', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: '5f7fd6b70fe130d8b0915da07640bec01b3b2bcb', class: "pds-toast__message" }, h("slot", { key: '4aa0cf737b420ae51297126b423b44d2a8610226' })), this.dismissible && (h("button", { key: 'a8b8e5e9ba956b2d9cca284d114afa37b80570cf', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: 'fde63f279f696d9f02875cc1beee3542c97f0c7e', name: "remove" }))))));
+            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: 'dac8f2099b2ab8a68d208aac288d48019df6d7e7', name: "remove" }))))));
     }
     static get is() { return "pds-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -312,9 +312,9 @@ export class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: '4e6188e03c2f1d33e571b96a3006a585840716bd', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '0b82d180295421c32548577fb2038422b8ebd3be', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (h(Host, { key: '6af9c969e0dae4f3969cba2153797a1bccfc6d21', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '97c48a8b8d626ee913412bd55aefb17f36fad401', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '661014ee46b11bcc906e7b64ef8c8a5739d459f0' })), h("div", { key: '1861ce9b260f5f7d2eb0a1f337dadd63a0dfee97', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '963fb263c72fba432c2b672a2c3e85ca524f2b67', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '37715fc0bf525695a62af1944ff853228080302a' })), h("div", { key: 'a9a925b1de9ea45d2f6b9f39ec5e386537313217', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '1486b30af21dc69758d7dc9890cbaf227bafffc7', name: "content" }))));
     }
     static get is() { return "pds-tooltip"; }
     static get originalStyleUrls() {