@pine-ds/core 5.0.0-mercury.0 → 5.0.0

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

@@ -1,76 +1,66 @@
 pds-tab {
-  --border-none: var(--pine-border-width-none);
-  --border-radius-availability: var(--pine-border-radius-100);
-  --border-radius-default: var(--pine-border-radius-125);
-  --border-radius-none: var(--pine-border-radius-0);
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
-  --color-background-active: var(--pine-color-charcoal-400);
-  --color-background-availability: var(--pine-color-white);
-  --color-background-default: var(--pine-color-grey-300);
-  --color-background-hover: var(--pine-color-grey-400);
-  --color-text-active: var(--pine-color-charcoal-400);
-  --color-text-active-inverse: var(--pine-color-white);
-  --color-text-default: var(--pine-color-charcoal-200);
-  --color-text-focus: var(--pine-color-charcoal-300);
-  --font-size-availability-content: var(--pine-font-size-075);
-  --font-size-default: var(--pine-font-size-100);
-  --font-size-filter-content: var(--pine-font-size-087);
-  --font-weight-default: var(--pine-font-weight-medium);
-  --line-height-availability-content: var(--pine-line-height-100);
-  --line-height-default: var(--pine-line-height-150);
-  --line-height-filter-content: var(--pine-line-height-125);
-  --outline: 4px solid var(--pine-color-blue-200);
-  --spacing-padding-none: var(--pine-spacing-0);
-  display: inline-block;
+  align-items: center;
+  display: inline-flex;
   position: relative;
 }
+.pds-tabs--pill pds-tab {
+  flex: 1;
+}
 
 .pds-tab {
   appearance: none;
   background-color: transparent;
-  border: var(--border-none);
+  border: var(--pine-border-width-none);
   box-shadow: none;
   color: inherit;
   cursor: pointer;
   font-family: inherit;
-  padding: var(--spacing-padding-none);
+  padding: var(--pine-dimension-none);
   align-items: center;
-  color: var(--color-text-default);
+  color: var(--pine-color-text-secondary);
   display: inline-flex;
   position: relative;
   text-decoration: none;
   white-space: nowrap;
 }
 .pds-tab.is-active, .pds-tab[aria-selected=true] {
-  color: var(--color-text-active);
+  color: var(--pine-color-text);
 }
 .pds-tab.is-active .pds-tab__content::after, .pds-tab[aria-selected=true] .pds-tab__content::after {
   opacity: 1;
 }
-.pds-tab:hover {
-  color: var(--color-text-active);
+.pds-tab:hover:not(:disabled, .is-disabled) {
+  color: var(--pine-color-text);
 }
-.pds-tab:focus-visible {
-  box-shadow: var(--box-shadow-focus);
+.pds-tab:focus {
   outline: none;
 }
+.pds-tab:focus-visible {
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+.pds-tab:disabled, .pds-tab.is-disabled {
+  color: var(--pine-color-text-disabled);
+  cursor: not-allowed;
+}
 .pds-tab .pds-tab__content {
-  font-family: inherit;
-  font-size: var(--font-size-default);
-  font-weight: var(--font-weight-default);
-  line-height: var(--line-height-default);
+  font-family: var(--pine-font-family-body);
+  font-size: var(--pine-font-size);
+  font-weight: var(--pine-font-weight-medium);
+  letter-spacing: var(--pine-letter-spacing);
+  line-height: var(--pine-line-height-body);
   padding-block-end: 11px;
   position: relative;
 }
 .pds-tab .pds-tab__content::after {
-  background-color: currentColor;
-  bottom: 0;
+  background-color: var(--pine-color-brand);
   content: "";
   height: 3px;
-  left: 0;
+  inset-block-end: var(--pine-dimension-none);
+  inset-inline-end: var(--pine-dimension-none);
+  inset-inline-start: var(--pine-dimension-none);
   opacity: 0;
   position: absolute;
-  right: 0;
 }
 .pds-tab .pds-tab-edge {
   display: none;
@@ -81,28 +71,33 @@ pds-tab {
 }
 .pds-tabs--availability .pds-tab {
   background-color: var(--color-background-tab);
-  border-radius: var(--border-radius-availability) var(--border-radius-availability) var(--border-radius-none) var(--border-radius-none);
+  border-radius: calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);
+  color: var(--pine-color-text-secondary);
   padding: 8px 16px 13px;
 }
 .pds-tabs--availability .pds-tab.is-active, .pds-tabs--availability .pds-tab[aria-selected=true] {
-  --color-background-tab: var(--color-background-availability);
+  --color-background-tab: var(--pine-color-secondary);
+  color: var(--pine-color-text);
 }
 .pds-tabs--availability .pds-tab.is-active .pds-tab__content::after, .pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after {
   opacity: 1;
 }
 .pds-tabs--availability .pds-tab.is-active .pds-tab-edge, .pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge {
-  z-index: 1;
+  z-index: var(--pine-z-index-raised);
 }
-.pds-tabs--availability .pds-tab:hover:not(.is-active, [aria-selected=true]) {
-  --color-background-tab: var(--color-background-default);
+.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);
 }
 .pds-tabs--availability .pds-tab:focus-visible {
-  color: var(--color-text-default);
+  color: var(--pine-color-text-secondary);
+}
+.pds-tabs--availability .pds-tab:disabled, .pds-tabs--availability .pds-tab.is-disabled {
+  --color-background-tab: transparent;
+  color: var(--pine-color-text-disabled);
 }
 .pds-tabs--availability .pds-tab__content {
-  font-size: var(--font-size-availability-content);
-  line-height: var(--line-height-availability-content);
-  padding-bottom: 7px;
+  padding-block-end: 7px;
 }
 .pds-tabs--availability .pds-tab-edge {
   bottom: 0;
@@ -134,27 +129,74 @@ pds-tab {
   inset-inline-start: 0;
 }
 
-.pds-tabs--filter {
-  --color-background-tab: var(--color-background-active);
-}
 .pds-tabs--filter .pds-tab {
-  background-color: var(--color-background-tab);
+  background-color: var(--pine-color-background-muted);
   border-radius: 50px;
-  color: var(--color-text-active);
+  color: var(--pine-color-text);
   padding: 6px 15px;
 }
 .pds-tabs--filter .pds-tab.is-active, .pds-tabs--filter .pds-tab[aria-selected=true] {
-  --color-background-tab: var(--color-background-active);
-  color: var(--color-text-active-inverse);
+  background-color: var(--pine-color-primary);
+  color: var(--pine-color-text-primary);
+}
+.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, .is-disabled) {
+  background-color: var(--pine-color-border-disabled);
+}
+.pds-tabs--filter .pds-tab:disabled, .pds-tabs--filter .pds-tab.is-disabled {
+  background-color: transparent;
+  color: var(--pine-color-text-disabled);
 }
-.pds-tabs--filter .pds-tab:hover:not(.is-active, [aria-selected=true]) {
-  --color-background-tab: var(--color-background-hover);
+.pds-tabs--filter .pds-tab:disabled.is-active, .pds-tabs--filter .pds-tab:disabled[aria-selected=true], .pds-tabs--filter .pds-tab.is-disabled.is-active, .pds-tabs--filter .pds-tab.is-disabled[aria-selected=true] {
+  background-color: var(--pine-color-primary-disabled);
 }
 .pds-tabs--filter .pds-tab__content {
-  font-size: var(--font-size-filter-content);
-  line-height: var(--line-height-filter-content);
-  padding-block-end: 0;
+  padding-block-end: var(--pine-dimension-none);
 }
 .pds-tabs--filter .pds-tab__content::after {
   content: unset;
+}
+
+.pds-tabs--pill {
+  --color-background-tab: transparent;
+}
+.pds-tabs--pill .pds-tab {
+  background-color: var(--color-background-tab);
+  border: var(--pine-border-width-thin) solid transparent;
+  border-radius: var(--pine-dimension-xs);
+  color: var(--pine-color-text-muted);
+  flex: 1;
+  height: 34px;
+  justify-content: center;
+}
+.pds-tabs--pill .pds-tab .pds-tab__content {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding-block-end: 0;
+}
+.pds-tabs--pill .pds-tab.is-active, .pds-tabs--pill .pds-tab[aria-selected=true] {
+  --color-background-tab: var(--pine-color-background-container);
+  border-color: var(--pine-color-border);
+  box-shadow: var(--pine-box-shadow-100);
+  color: var(--pine-color-text-active);
+}
+.pds-tabs--pill .pds-tab.is-active:focus-visible, .pds-tabs--pill .pds-tab[aria-selected=true]:focus-visible {
+  border-color: var(--color-border-focus);
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+.pds-tabs--pill .pds-tab.is-active, .pds-tabs--pill .pds-tab[aria-selected=true] {
+  /* stylelint-disable max-nesting-depth */
+}
+.pds-tabs--pill .pds-tab.is-active .pds-tab__content::after, .pds-tabs--pill .pds-tab[aria-selected=true] .pds-tab__content::after {
+  opacity: 0;
+}
+.pds-tabs--pill .pds-tab.is-active, .pds-tabs--pill .pds-tab[aria-selected=true] {
+  /* stylelint-enable max-nesting-depth */
+}
+.pds-tabs--pill .pds-tab:disabled, .pds-tabs--pill .pds-tab.is-disabled {
+  color: var(--pine-color-text-disabled);
 }

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

@@ -1,19 +1,88 @@
-import { Host, h } from "@stencil/core";
+import { Fragment, Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../../utils/attributes";
+import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * @lightDom renders-markup
+ */
 export class PdsTab {
     constructor() {
-        this.name = undefined;
-        this.parentComponentId = undefined;
-        this.variant = undefined;
-        this.index = undefined;
+        this.hostKeeper = new HostStylingKeeper();
+        /**
+         * 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;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
+    // 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' })))));
+        // The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
+        // that strips it leaves this tab unslotted, and pds-tabs has no default slot. Put it back.
+        this.hostKeeper.record('', {}, { slot: 'tabs' });
+        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 +97,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 +233,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 +255,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 +277,10 @@ export class PdsTab {
                         }],
                     "text": ""
                 },
-                "attribute": "variant",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant"
             },
             "index": {
                 "type": "number",
@@ -102,8 +299,10 @@ export class PdsTab {
                         }],
                     "text": ""
                 },
-                "attribute": "index",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index"
             },
             "selected": {
                 "type": "boolean",
@@ -122,9 +321,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 +374,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;