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

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

@@ -2,14 +2,29 @@ import { Host, h } from "@stencil/core";
 /**
 * @slot tabs - Content is placed within the `div[role="tablist"]` element as children
 * @slot tabpanels - Content is placed directly after the `div[role="tablist"]` element as siblings
+* @part tab-list - Exposes the container element that holds all the tab buttons for styling.
 */
 export class PdsTabs {
     constructor() {
-        this.tablistLabel = undefined;
-        this.componentId = undefined;
-        this.variant = undefined;
-        this.activeTabName = undefined;
-        this.activeTabIndex = undefined;
+        /**
+         * 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]) {
@@ -18,12 +33,48 @@ 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"];
-        if (keySet.includes(ev.key)) {
+        // Only handle keyboard navigation if the event originated from a tab button
+        // that belongs to THIS tabs component
+        const target = ev.target;
+        const targetTab = target.closest('pds-tab');
+        // Check if the tab belongs to this tabs instance (not a nested one)
+        const isOwnTab = targetTab && targetTab.closest('pds-tabs') === this.el;
+        if (keySet.includes(ev.key) && isOwnTab) {
             ev.preventDefault();
             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;
@@ -48,8 +99,12 @@ export class PdsTabs {
         this.activeTabIndex = moveFocusTo;
     }
     findAllChildren() {
-        this.tabs = this.el.querySelectorAll('pds-tab');
-        this.tabPanels = this.el.querySelectorAll('pds-tabpanel');
+        // Only select direct children tabs/tabpanels, not nested ones
+        const allTabs = Array.from(this.el.querySelectorAll('pds-tab'));
+        const allTabPanels = Array.from(this.el.querySelectorAll('pds-tabpanel'));
+        // Filter to only include tabs that belong to this tabs component (not nested)
+        this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);
+        this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);
     }
     propGeneration(child, index = 0) {
         child.parentComponentId = this.componentId.toString();
@@ -58,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() {
@@ -73,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: 'a36e242d5e746954f80778cf515879ca82258978', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'd6d89fd90a9a534f249c549e34308ed245773f60', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: '9b5e5268c27ecf2a5331cec64d2c7121cef366a1', name: "tabs" })), h("slot", { key: 'b835cf1befe68f54b1751a976846d271ce97634e', 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"; }
@@ -113,8 +190,10 @@ export class PdsTabs {
                     "tags": [],
                     "text": "Sets the aria-label attached to the tablist element"
                 },
-                "attribute": "tablist-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tablist-label"
             },
             "componentId": {
                 "type": "string",
@@ -130,15 +209,17 @@ export class PdsTabs {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "variant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'availability' | 'filter'",
-                    "resolved": "\"availability\" | \"filter\" | \"primary\"",
+                    "original": "'primary' | 'availability' | 'filter' | 'pill'",
+                    "resolved": "\"availability\" | \"filter\" | \"pill\" | \"primary\"",
                     "references": {}
                 },
                 "required": true,
@@ -147,8 +228,79 @@ export class PdsTabs {
                     "tags": [],
                     "text": "Sets tabs variant styles as outlined in Figma documentation"
                 },
-                "attribute": "variant",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "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",
@@ -158,14 +310,16 @@ 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."
                 },
-                "attribute": "active-tab-name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-tab-name"
             },
             "activeTabIndex": {
                 "type": "number",
@@ -184,8 +338,10 @@ export class PdsTabs {
                         }],
                     "text": ""
                 },
-                "attribute": "active-tab-index",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-tab-index"
             }
         };
     }
@@ -206,4 +362,3 @@ export class PdsTabs {
             }];
     }
 }
-//# sourceMappingURL=pds-tabs.js.map

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

@@ -1,18 +1,12 @@
-import { html, render } from 'lit';
-import { withActions } from '@storybook/addon-actions/decorator';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { html } from 'lit';
+
 
 export default {
-  argTypes: extractArgTypes('pds-tabs'),
+
   component: 'pds-tabs',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['pdsTabClick', 'keydown']
-    },
-  },
+  parameters: {},
   title: 'components/Tabs',
-}
+};
 
 const BaseTemplate = (args) => html`
 <pds-tabs active-tab-name=${args.activeTabName} variant=${args.variant} component-id=${args.componentId} tablist-label=${args.tablistLabel}>
@@ -25,6 +19,28 @@ const BaseTemplate = (args) => html`
 </pds-tabs>
 `;
 
+export const Default = BaseTemplate.bind({});
+Default.args = {
+  activeTabName: "Dollop",
+  componentId: "primary",
+  variant: "primary",
+  tablistLabel: "Foo",
+}
+
+export const Filter = BaseTemplate.bind({});
+Filter.args = {
+  activeTabName: "Sturdy",
+  componentId: "filter",
+  variant: 'filter',
+  tablistLabel: "Foo",
+}
+
+export const Pill = BaseTemplate.bind({});
+Pill.args = {
+  activeTabName: "Sturdy",
+  componentId: "pill",
+  variant: 'pill',
+}
 const AvailabilityTemplate = (args) => html`
 <div style="background-color: #ddd; padding: 20px;">
   <pds-tabs active-tab-name=${args.activeTabName} variant=${args.variant} component-id=${args.componentId} tablist-label=${args.tablistLabel}>
@@ -38,14 +54,6 @@ const AvailabilityTemplate = (args) => html`
 </div>
 `;
 
-export const Primary = BaseTemplate.bind({});
-Primary.args = {
-  activeTabName: "Dollop",
-  componentId: "primary",
-  variant: "primary",
-  tablistLabel: "Foo",
-}
-
 export const Availability = AvailabilityTemplate.bind({});
 Availability.args = {
   activeTabName: "tuesday",
@@ -54,10 +62,45 @@ Availability.args = {
   tablistLabel: "Foo",
 }
 
-export const Filter = BaseTemplate.bind({});
-Filter.args = {
-  activeTabName: "Sturdy",
-  componentId: "filter",
-  variant: 'filter',
-  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.css

@@ -0,0 +1,207 @@
+:host {
+  display: inline;
+}
+
+:host([decoration=underline-dotted]) > * {
+  text-decoration-color: var(--pine-color-text-tertiary);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-thickness: 12%;
+  text-underline-offset: 0.3rem;
+  text-underline-position: under;
+}
+
+:host([decoration=strikethrough]) > * {
+  text-decoration: line-through;
+}
+
+/* stylelint-disable */
+h1 {
+  font: var(--pine-typography-heading-1);
+  letter-spacing: var(--pine-letter-spacing-heading-1);
+}
+
+h2 {
+  font: var(--pine-typography-heading-2);
+  letter-spacing: var(--pine-letter-spacing-heading-2);
+}
+
+h3 {
+  font: var(--pine-typography-heading-3);
+  letter-spacing: var(--pine-letter-spacing-heading-3);
+}
+
+h4 {
+  font: var(--pine-typography-heading-4);
+  letter-spacing: var(--pine-letter-spacing-heading-4);
+}
+
+h5 {
+  font: var(--pine-typography-heading-5);
+  letter-spacing: var(--pine-letter-spacing-heading-5);
+}
+
+h6 {
+  font: var(--pine-typography-heading-6);
+  letter-spacing: var(--pine-letter-spacing-heading-6);
+}
+
+code, em, p, pre, strong {
+  font: var(--pine-typography-body);
+  letter-spacing: var(--pine-letter-spacing);
+}
+
+/* stylelint-enable */
+code, pre {
+  font-family: monospace;
+  letter-spacing: 0;
+  line-height: 1;
+}
+
+em {
+  font-style: normal;
+}
+
+strong {
+  font-weight: bolder;
+}
+
+:host([truncate]) {
+  display: block;
+  min-width: 0;
+}
+
+:host([truncate]) > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host([italic]) > * {
+  font-style: italic;
+}
+
+.pds-text {
+  color: var(--color, var(--pine-color-text));
+  margin: var(--pine-dimension-none);
+}
+
+.pds-text--size-2xl {
+  font-size: var(--pine-font-size-body-2xl);
+}
+
+.pds-text--size-xl {
+  font-size: var(--pine-font-size-body-xl);
+}
+
+.pds-text--size-lg {
+  font-size: var(--pine-font-size-body-lg);
+}
+
+.pds-text--size-md {
+  font-size: var(--pine-font-size-body-md);
+}
+
+.pds-text--size-sm {
+  font-size: var(--pine-font-size-body-sm);
+}
+
+.pds-text--size-xs {
+  font-size: var(--pine-font-size-body-xs);
+}
+
+.pds-text--size-2xs {
+  font-size: var(--pine-font-size-body-2xs);
+}
+
+.pds-text--size-h1 {
+  font-size: var(--pine-font-size-heading-1);
+}
+
+.pds-text--size-h2 {
+  font-size: var(--pine-font-size-heading-2);
+}
+
+.pds-text--size-h3 {
+  font-size: var(--pine-font-size-heading-3);
+}
+
+.pds-text--size-h4 {
+  font-size: var(--pine-font-size-heading-4);
+}
+
+.pds-text--size-h5 {
+  font-size: var(--pine-font-size-heading-5);
+}
+
+.pds-text--size-h6 {
+  font-size: var(--pine-font-size-heading-6);
+}
+
+.pds-text--weight-extra-light {
+  font-weight: var(--pine-font-weight-extra-light);
+}
+
+.pds-text--weight-light {
+  font-weight: var(--pine-font-weight-light);
+}
+
+.pds-text--weight-regular {
+  font-weight: var(--pine-font-weight-regular);
+}
+
+.pds-text--weight-medium {
+  font-weight: var(--pine-font-weight-medium);
+}
+
+.pds-text--weight-semibold {
+  font-weight: var(--pine-font-weight-semi-bold);
+}
+
+.pds-text--weight-bold {
+  font-weight: var(--pine-font-weight-bold);
+}
+
+.pds-text--gutter-2xl {
+  margin-block-end: var(--pine-dimension-2xl);
+}
+
+.pds-text--gutter-xl {
+  margin-block-end: var(--pine-dimension-xl);
+}
+
+.pds-text--gutter-lg {
+  margin-block-end: var(--pine-dimension-lg);
+}
+
+.pds-text--gutter-md {
+  margin-block-end: var(--pine-dimension-md);
+}
+
+.pds-text--gutter-sm {
+  margin-block-end: var(--pine-dimension-sm);
+}
+
+.pds-text--gutter-xs {
+  margin-block-end: var(--pine-dimension-xs);
+}
+
+.pds-text--gutter-2xs {
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-text--align-start {
+  text-align: start;
+}
+
+.pds-text--align-center {
+  text-align: center;
+}
+
+.pds-text--align-end {
+  text-align: end;
+}
+
+.pds-text--align-justify {
+  text-align: justify;
+}