@pine-ds/core 4.0.0-mercury.0 → 4.1.0

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

@@ -1,19 +1,74 @@
-import { Host, h } from "@stencil/core";
+import { Fragment, Host, h } from "@stencil/core";
+import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 export class PdsTab {
     constructor() {
-        this.name = undefined;
-        this.parentComponentId = undefined;
-        this.variant = undefined;
-        this.index = undefined;
+        /**
+         * Determines the tab's disabled state.
+         * @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
+         */
+        /** @internal */
         this.selected = false;
     }
+    // Unwraps a nested <a>/<button> left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-tab__content'), 'a.pds-tab, button.pds-tab', '.pds-tab__content');
+    }
     onTabClick(index, parentComponentId) {
+        if (this.disabled)
+            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.isActive && 'is-active',
+            this.disabled && 'is-disabled',
+        ];
+        return classes.filter(Boolean).join(' ');
+    }
     render() {
-        const availabilityTabEdgeInlineStart = (h("span", { key: '5ea7f20d14e906993c0cfbef0ae9a37b305be9fd', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (h("span", { key: '9fc8287a57fd777472d9f909a451332b7edd8c39', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (h(Host, { key: '16d11c4bda123cbb698674c560dc7c826fe653ca', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '63e18d48cd1206c87e520cbe85c09e7fbd8752f0', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: '5db0ed6e01b1cfe58f47669b369bb72bd3caa033', class: "pds-tab__content" }, h("slot", { key: '1737f4b6a524cf165deb1eb1a2627ae834a76be2' })))));
+        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() {
@@ -28,6 +83,128 @@ export class PdsTab {
     }
     static get properties() {
         return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines the tab's disabled state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "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,
@@ -42,8 +219,10 @@ export class PdsTab {
                     "tags": [],
                     "text": "Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property"
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "parentComponentId": {
                 "type": "string",
@@ -62,8 +241,10 @@ export class PdsTab {
                         }],
                     "text": ""
                 },
-                "attribute": "parent-component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "parent-component-id"
             },
             "variant": {
                 "type": "string",
@@ -82,8 +263,10 @@ export class PdsTab {
                         }],
                     "text": ""
                 },
-                "attribute": "variant",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant"
             },
             "index": {
                 "type": "number",
@@ -102,8 +285,10 @@ export class PdsTab {
                         }],
                     "text": ""
                 },
-                "attribute": "index",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index"
             },
             "selected": {
                 "type": "boolean",
@@ -122,9 +307,33 @@ export class PdsTab {
                         }],
                     "text": ""
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "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"
             }
         };
     }
@@ -151,4 +360,3 @@ export class PdsTab {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=pds-tab.js.map

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

@@ -0,0 +1,15 @@
+import { html } from 'lit-html';
+
+export default {
+  component: 'pds-tab',
+  title: 'components/Tabs/Tab',
+}
+
+const BaseTemplate = (args) => html`
+<pds-tabs active-tab-name="Sturdy" variant="primary" component-id="primary" tablist-label="Foo">
+  <pds-tab name="${args.name}">Sturdy</pds-tab>
+  <pds-tabpanel name="Sturdy">Content Sturdy</pds-tabpanel>
+</pds-tabs>
+`;
+
+export const Default = BaseTemplate.bind({});

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

@@ -2,10 +2,23 @@
   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(--spacing-panel-margin-top);
-  padding: var(--spacing-panel-padding);
+  margin-top: var(--tabs-dimension-panel-margin-top);
+  padding: var(--tabs-dimension-panel-padding);
+}
+.pds-tabpanel:focus-visible {
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
 }
 .pds-tabpanel.is-active {
   display: block;

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

@@ -1,13 +1,24 @@
 import { Host, h } from "@stencil/core";
+import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 export class PdsTabpanel {
     constructor() {
-        this.name = undefined;
-        this.parentComponentId = undefined;
-        this.variant = undefined;
-        this.selected = false;
+        /**
+         * Keeps track of the tabpanel selected state, this property is passed by parent component
+         */
+        /** @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;
+    }
+    // Unwraps a nested .pds-tabpanel left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
     }
     render() {
-        return (h(Host, { key: 'b071d63a6211e70b09f11a18609d15728eb485c6', slot: "tabpanels" }, h("div", { key: 'ab8de65d7142136888c853170b7b8b190f21abcc', 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: '0cac8366d5502be7033d1b71b681bf564aa557e8' }))));
+        return (h(Host, { key: 'be561d592a9c7d2458987bcc09fe5d8d253bd2ba', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, h("div", { key: '98cb5eda73378d95519de8ce24c60f9263e89add', 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: '27b707d8fae77685f0cea7b0dc8c8dbcdb808f65' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {
@@ -36,8 +47,10 @@ export class PdsTabpanel {
                     "tags": [],
                     "text": "Sets the related tab name, this name must match a `pds-tab`'s tab name property"
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "parentComponentId": {
                 "type": "string",
@@ -56,8 +69,10 @@ export class PdsTabpanel {
                         }],
                     "text": ""
                 },
-                "attribute": "parent-component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "parent-component-id"
             },
             "variant": {
                 "type": "string",
@@ -76,8 +91,10 @@ export class PdsTabpanel {
                         }],
                     "text": ""
                 },
-                "attribute": "variant",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant"
             },
             "selected": {
                 "type": "boolean",
@@ -96,12 +113,36 @@ export class PdsTabpanel {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
+                "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"
             }
         };
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=pds-tabpanel.js.map

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

@@ -0,0 +1,15 @@
+import { html } from 'lit-html';
+
+export default {
+  component: 'pds-tabpanel',
+  title: 'components/Tabs/Tabpanel',
+}
+
+const BaseTemplate = (args) => html`
+<pds-tabs active-tab-name="Sturdy" variant="primary" component-id="primary" tablist-label="Foo">
+  <pds-tab name="Sturdy">Sturdy</pds-tab>
+  <pds-tabpanel name="${args.name}">Content Sturdy</pds-tabpanel>
+</pds-tabs>
+`;
+
+export const Default = BaseTemplate.bind({});

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

@@ -1,29 +1,49 @@
 :host {
   /**
-   * @prop --spacing-panel-margin-top: Optional margin-top for panels
+   * @prop --tabs-dimension-panel-margin-top: Optional margin-top for panels
    */
-  --spacing-panel-margin-top: 0;
+  --tabs-dimension-panel-margin-top: var(--pine-dimension-none);
   /**
-   * @prop --spacing-panel-padding: Optional padding for panels
+   * @prop --tabs-dimension-panel-padding: Optional padding for panels
    */
-  --spacing-panel-padding: 0;
-  --outline: 2px solid var(--pine-color-blue-200);
-  --spacing-gap-availability: var(--pine-spacing-100);
-  --spacing-gap-default: var(--pine-spacing-300);
-  --spacing-gap-filter: var(--pine-spacing-200);
+  --tabs-dimension-panel-padding: 0;
   display: block;
 }
 
 .pds-tabs__tablist {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-gap-default);
+  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(--spacing-gap-availability);
+  gap: var(--pine-dimension-xs);
 }
 
 :host(.pds-tabs--filter) .pds-tabs__tablist {
-  gap: var(--spacing-gap-filter);
+  gap: var(--pine-dimension-sm);
+}
+
+:host(.pds-tabs--pill) .pds-tabs__tablist {
+  background-color: var(--pine-color-background-app);
+  border: var(--pine-border-width-thin) solid var(--pine-color-border-subtle);
+  border-radius: var(--pine-dimension-100);
+  display: inline-flex;
+  display: flex;
+  gap: 0;
+  height: var(--pine-dimension-450);
 }