@pine-ds/core 3.28.0 → 3.29.0

package/hydrate/index.js

@@ -3156,6 +3156,9 @@ var setContentReference = (elm) => {
   contentRefElm["s-cn"] = true;
   insertBefore(elm, contentRefElm, elm.firstChild);
 };
+
+// src/runtime/fragment.ts
+var Fragment = (_, children) => children;
 var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
   if (listeners && win.document) {
     listeners.map(([flags, name, method]) => {
@@ -5549,7 +5552,7 @@ class MockPdsModal {
     }; }
 }
 
-/* pds-icons v9.21.0, ES Modules */
+/* pds-icons v10.2.0, ES Modules */
 
 const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
 const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414'/></svg>";
@@ -5711,7 +5714,7 @@ class PdsAlert {
     }; }
 }
 
-const pdsAvatarCss = () => `:host{display:inline-block}div{--color-background-container:var(--pine-color-background-container-hover);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{outline:var(--pine-outline-focus)}.pds-avatar__badge{background-color:transparent;border:var(--pine-dimension-none);border-color:transparent;border-radius:var(--pine-border-radius-round);inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);position:absolute}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.pds-avatar__initials{color:var(--pine-color-brand);fill:var(--pine-color-brand);font-size:var(--pine-font-size-085);font-weight:var(--pine-font-weight-semi-bold);height:100%;text-align:center;width:100%}.pds-avatar__initials text{text-anchor:middle}`;
+const pdsAvatarCss = () => `:host{display:inline-block}div{--color-background-container:var(--pine-color-background-container-hover);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{outline:var(--pine-outline-focus)}.pds-avatar__badge{background-color:transparent;border:var(--pine-dimension-none);border-color:transparent;border-radius:var(--pine-border-radius-round);inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);position:absolute}:host([status=online]){--pds-avatar-status-color:var(--pine-color-green-500)}:host([status=away]){--pds-avatar-status-color:var(--pine-color-yellow-500)}:host([status=offline]){--pds-avatar-status-color:var(--pine-color-background-inset-emphasized)}.pds-avatar__status{background-color:var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));block-size:28%;border-radius:var(--pine-border-radius-full);-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);inline-size:28%;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);min-block-size:var(--pine-dimension-100);min-inline-size:var(--pine-dimension-100);position:absolute}:host(.pds-avatar--status-ring) div{-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized))}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.pds-avatar__initials{color:var(--pine-color-brand);fill:var(--pine-color-brand);font-size:var(--pine-font-size-085);font-weight:var(--pine-font-weight-semi-bold);height:100%;text-align:center;width:100%}.pds-avatar__initials text{text-anchor:middle}`;
 
 /**
  * @part asset-wrapper
@@ -5751,6 +5754,21 @@ class PdsAvatar {
          * @defaultValue lg
          */
         this.size = 'lg';
+        /**
+         * Displays a presence status indicator (a dot) on the avatar: `online`
+         * (success), `away` (warning), or `offline` (neutral). For a simple
+         * active/inactive presence, map active to `online` and inactive to `offline`.
+         * Takes precedence over `badge` — they share the same corner, so the badge is
+         * hidden while `status` is set.
+         * @defaultValue null
+         */
+        this.status = null;
+        /**
+         * Determines whether a ring is shown around the avatar in the `status` color.
+         * Has no effect unless `status` is set.
+         * @defaultValue false
+         */
+        this.statusRing = false;
         /**
          * Determines the variant of avatar. Changes appearance accordingly.
          * @defaultValue customer
@@ -5767,7 +5785,7 @@ class PdsAvatar {
                 height: this.avatarSize(),
                 width: this.avatarSize()
             };
-            return (hAsync("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge()));
+            return (hAsync("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge(), this.renderStatus()));
         };
         this.renderAvatar = () => {
             return (this.dropdown
@@ -5776,11 +5794,26 @@ class PdsAvatar {
                 :
                     this.renderAssetWrapper());
         };
-        this.renderBadge = () => (this.badge
+        this.renderBadge = () => (
+        // `badge` and `status` share the bottom-end corner; `status` wins so the
+        // presence dot is never painted over the badge.
+        this.badge && !this.status
             // Percentage is average size of icon in relation to total avatar size
             // of all preset sizes found in Figma.
             // Used to allow icons to scale to container size
             && hAsync("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
+        this.renderStatus = () => {
+            var _a;
+            if (!this.status)
+                return null;
+            // Inside the dropdown trigger, the button's aria-label owns the accessible
+            // name, so the dot's own label is never announced. Mark it decorative there
+            // and let consumers convey presence via `triggerLabel`.
+            if (this.dropdown) {
+                return hAsync("span", { class: "pds-avatar__status", part: "status", "aria-hidden": "true" });
+            }
+            return (hAsync("span", { class: "pds-avatar__status", part: "status", role: "img", "aria-label": (_a = this.statusLabel) !== null && _a !== void 0 ? _a : `${this.status} status` }));
+        };
         this.renderIconOrImage = () => {
             if (this.image) {
                 return hAsync("img", { alt: this.alt, src: this.image });
@@ -5797,7 +5830,8 @@ class PdsAvatar {
             'pds-avatar': true,
             [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector
             [`pds-avatar--has-initials`]: this.initials !== '' && this.initials !== null,
-            [`pds-avatar--${this.variant}`]: this.variant === 'admin'
+            [`pds-avatar--${this.variant}`]: this.variant === 'admin',
+            [`pds-avatar--status-ring`]: !!this.status && this.statusRing,
         });
     }
     avatarSize() {
@@ -5816,7 +5850,7 @@ class PdsAvatar {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'd8c417ed6fca497bac5bb51a184b1f7d0077bc03', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
+        return (hAsync(Host, { key: '594604d25190002ec166626b4a4a1a9a6be875d8', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
     }
     static get style() { return pdsAvatarCss(); }
     static get cmpMeta() { return {
@@ -5830,12 +5864,15 @@ class PdsAvatar {
             "image": [1],
             "initials": [1],
             "size": [513],
+            "status": [513],
+            "statusLabel": [1, "status-label"],
+            "statusRing": [4, "status-ring"],
             "variant": [513],
             "triggerLabel": [1, "trigger-label"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["size", "size"], ["variant", "variant"]]
+        "$attrsToReflect$": [["size", "size"], ["status", "status"], ["variant", "variant"]]
     }; }
 }
 
@@ -6180,7 +6217,7 @@ class PdsBox {
 const pdsButtonCss = () => `:host{--pds-button-background:var(--pds-button-color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--pds-button-outline-offset:var(--pine-border-width);--pds-button-color-border-default:transparent;--pds-button-color-border-disabled:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-border-hover:transparent;--button-loader-color:var(--pds-button-color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([aria-disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--pds-button-color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--pds-button-color-background-default));border:var(--pds-button-border);border-color:var(--pds-button-color-border-default);border-radius:var(--pds-button-border-radius);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-button-color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--pds-button-color-background-hover);border-color:var(--pds-button-color-border-hover)}.pds-button:focus-visible{border-color:var(--pds-button-color-border-focus);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.pds-button:disabled{background-color:var(--pds-button-color-background-disabled);border-color:var(--pds-button-color-border-disabled);color:var(--pds-button-color-text-disabled);pointer-events:none}.pds-button--primary{--pds-button-color-background-default:var(--pine-color-primary);--pds-button-color-background-hover:var(--pine-color-primary-hover);--pds-button-color-background-disabled:var(--pine-color-primary-disabled);--pds-button-color-border-default:var(--pine-color-primary);--pds-button-color-border-hover:var(--pine-color-primary-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-primary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--pds-button-color-background-default:var(--pine-color-accent);--pds-button-color-background-hover:var(--pine-color-accent-hover);--pds-button-color-background-disabled:var(--pine-color-accent-disabled);--pds-button-color-border-default:var(--pine-color-accent);--pds-button-color-border-hover:var(--pine-color-accent-hover);--pds-button-color-text-default:var(--pine-color-white);--pds-button-color-text-disabled:var(--pine-color-text-accent-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--pds-button-color-background-default:var(--pine-color-danger);--pds-button-color-background-hover:var(--pine-color-danger-hover);--pds-button-color-background-disabled:var(--pine-color-danger-disabled);--pds-button-color-border-default:var(--pine-color-danger);--pds-button-color-border-hover:var(--pine-color-danger-hover);--pds-button-color-text-default:var(--pine-color-white);--pds-button-color-text-disabled:var(--pine-color-text-danger-disabled);--pds-button-color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--pds-button-color-background-default:var(--pine-color-secondary);--pds-button-color-background-hover:var(--pine-color-secondary-hover);--pds-button-color-background-disabled:var(--pine-color-secondary-disabled);--pds-button-color-border-disabled:var(--pine-color-border-disabled);--pds-button-color-border-focus:var(--pine-color-border);--pds-button-color-border-hover:var(--pine-color-border-hover);--pds-button-color-border-default:var(--pine-color-border);--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--tertiary{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:var(--pine-color-background-muted);--pds-button-color-background-disabled:transparent;--pds-button-color-border-default:transparent;--pds-button-color-border-hover:var(--pine-color-background-muted);--pds-button-color-border-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--filter{--pds-button-color-background-default:var(--pine-color-background-container);--pds-button-color-background-hover:var(--pine-color-background-subtle);--pds-button-color-background-disabled:var(--pine-color-white);--pds-button-color-border-default:transparent;--pds-button-color-border-hover:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-hover:var(--pine-color-text-hover);--pds-button-color-text-disabled:var(--pine-color-text-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:disabled{background-color:var(--pine-color-background-container)}.pds-button--filter:hover{color:var(--pds-button-color-text-hover)}.pds-button--unstyled{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:transparent;--pds-button-color-background-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text);--button-loader-color:var(--pine-color-text);border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__icon--empty{display:none}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--small{min-height:var(--pine-dimension-400);padding:calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-button--micro{font-size:var(--pine-font-size-085);min-height:var(--pine-dimension-300);padding:var(--pine-dimension-025) var(--pine-dimension-xs)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-button--icon-only.pds-button--small{height:var(--pine-dimension-400);min-height:var(--pine-dimension-400);min-width:var(--pine-dimension-400);padding:var(--pine-dimension-2xs);width:var(--pine-dimension-400)}.pds-button--icon-only.pds-button--micro{height:var(--pine-dimension-300);min-height:var(--pine-dimension-300);min-width:var(--pine-dimension-300);padding:var(--pine-dimension-3xs);width:var(--pine-dimension-300)}`;
 
 /**
- * @part button - Exposes the button element for styling.
+ * @part button - Exposes the underlying button (or anchor) element for styling, including custom size, shape, or surface on icon-only placements (e.g. a compact square or inverse icon button).
  * @part button-content - Exposes the button content for styling.
  * @part button-text - Exposes the button text for styling.
  * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.
@@ -13726,7 +13763,7 @@ class PdsInput {
     }; }
 }
 
-const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}`;
+const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}:host([active]) .pds-link{color:var(--pds-context-link-color, var(--pine-color-text-strong));text-decoration:underline}:host([active]) .pds-link:hover{color:var(--pds-context-link-color-hover, var(--pine-color-text-strong));text-decoration:underline}`;
 
 /**
  * @part link - Link element styles.
@@ -13735,6 +13772,13 @@ const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-sta
 class PdsLink {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Marks the link as the current/active navigation item — for tab strips and
+         * nav rails built from links. Applies the active treatment (persistent
+         * underline + strong text) and sets `aria-current="page"`.
+         * @defaultValue false
+         */
+        this.active = false;
         /**
          * Determines whether the link should open in a new tab.
          * @defaultValue false
@@ -13777,14 +13821,15 @@ class PdsLink {
         const targetValue = this.target || (this.external ? '_blank' : undefined);
         const showExternalIcon = this.external;
         const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
-        return (hAsync("a", { key: '314a6249f39716ab2e632c2cb4c588ce2c74a77b', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, hAsync("slot", { key: 'ceab5601c349ece4b142f16f682d5a2d2d0ba59a' }, this.href), showExternalIcon &&
-            hAsync("pds-icon", { key: 'cba3137af21eb374c8318e43e279e77fefdc1b5c', icon: launch, size: this.fontSize })));
+        return (hAsync("a", { key: '5d0c5a0a5b8b80a8cdff802a3d78dad85a9ccdc4', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, hAsync("slot", { key: '06b7be14d867eae1b7acba8570f1e94bdf840fbb' }, this.href), showExternalIcon &&
+            hAsync("pds-icon", { key: '678414f7d20fd20b6931cc401163180c3ad0094c', icon: launch, size: this.fontSize })));
     }
     static get style() { return pdsLinkCss(); }
     static get cmpMeta() { return {
         "$flags$": 265,
         "$tagName$": "pds-link",
         "$members$": {
+            "active": [516],
             "color": [1],
             "download": [1],
             "componentId": [1, "component-id"],
@@ -13804,7 +13849,7 @@ class PdsLink {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["active", "active"]]
     }; }
 }
 
@@ -19796,7 +19841,7 @@ class PdsSwitch {
     }; }
 }
 
-const pdsTabCss = () => `pds-tab{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-tabs--pill pds-tab{-ms-flex:1;flex:1}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--pine-border-width-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--pine-dimension-none);-ms-flex-align:center;align-items:center;color:var(--pine-color-text-secondary);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{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:not(:disabled){color:var(--pine-color-text)}.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: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);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--pine-color-brand);content:"";height:3px;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}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);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(--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:var(--pine-z-index-raised)}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true],:disabled){--color-background-tab:var(--pine-color-secondary-hover);color:var(--pine-color-text)}.pds-tabs--availability .pds-tab:focus-visible{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{-webkit-padding-after:7px;padding-block-end:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:"";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter .pds-tab{background-color:var(--pine-color-background-muted);border-radius:50px;color:var(--pine-color-text);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{background-color:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-tabs--filter .pds-tab.is-active:hover:not(:disabled),.pds-tabs--filter .pds-tab[aria-selected=true]:hover:not(:disabled){background-color:var(--pine-color-primary-hover)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true],: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: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{-webkit-padding-after:var(--pine-dimension-none);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);-ms-flex:1;flex:1;height:34px;-ms-flex-pack:center;justify-content:center}.pds-tabs--pill .pds-tab .pds-tab__content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-padding-after:0;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);-webkit-box-shadow:var(--pine-box-shadow-100);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]{}.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]{}.pds-tabs--pill .pds-tab:disabled,.pds-tabs--pill .pds-tab.is-disabled{color:var(--pine-color-text-disabled)}`;
+const pdsTabCss = () => `pds-tab{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-tabs--pill pds-tab{-ms-flex:1;flex:1}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--pine-border-width-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--pine-dimension-none);-ms-flex-align:center;align-items:center;color:var(--pine-color-text-secondary);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{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:not(:disabled,.is-disabled){color:var(--pine-color-text)}.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: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);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--pine-color-brand);content:"";height:3px;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}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);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(--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:var(--pine-z-index-raised)}.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(--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{-webkit-padding-after:7px;padding-block-end:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:"";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter .pds-tab{background-color:var(--pine-color-background-muted);border-radius:50px;color:var(--pine-color-text);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{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: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{-webkit-padding-after:var(--pine-dimension-none);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);-ms-flex:1;flex:1;height:34px;-ms-flex-pack:center;justify-content:center}.pds-tabs--pill .pds-tab .pds-tab__content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-padding-after:0;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);-webkit-box-shadow:var(--pine-box-shadow-100);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]{}.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]{}.pds-tabs--pill .pds-tab:disabled,.pds-tabs--pill .pds-tab.is-disabled{color:var(--pine-color-text-disabled)}`;
 
 class PdsTab {
     constructor(hostRef) {
@@ -19807,6 +19852,13 @@ class PdsTab {
          * @defaultValue false
          */
         this.disabled = false;
+        /**
+         * Marks this tab as the current one in navigation mode (`href` set). Applies
+         * the active treatment and `aria-current="page"`. Ignored in panel mode, where
+         * the active tab is derived from the parent's `activeTabName`.
+         * @defaultValue false
+         */
+        this.active = false;
         /**
          * Keeps track of the tabpanel selected state, this property is passed by parent component
          */
@@ -19818,18 +19870,46 @@ class PdsTab {
             return;
         this.pdsTabClick.emit([index, parentComponentId]);
     }
+    // An empty string is treated as "no destination" everywhere (isNav fallback,
+    // href attribute, role) so a nav tab never renders `href=""` (which would
+    // navigate to the current page).
+    get hasHref() {
+        return this.href != null && this.href !== '';
+    }
+    get isNav() {
+        var _a;
+        // The parent `pds-tabs` is authoritative when present (via `navMode`), so its
+        // tabs share one mode. Standalone, fall back to a usable `href`.
+        return (_a = this.navMode) !== null && _a !== void 0 ? _a : this.hasHref;
+    }
+    get isActive() {
+        // Navigation mode is server-driven via `active`; panel mode is parent-driven
+        // via `selected` (from `activeTabName`).
+        return this.isNav ? this.active : this.selected;
+    }
     classNames() {
         const classes = [
             'pds-tab',
-            this.selected && 'is-active',
+            this.isActive && 'is-active',
             this.disabled && 'is-disabled',
         ];
         return classes.filter(Boolean).join(' ');
     }
     render() {
-        const availabilityTabEdgeInlineStart = (hAsync("span", { key: '934d84846bd84471047f9ab7503e5bb151426cbc', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (hAsync("span", { key: 'e35b9da7b312ed95dab7bf803c40a22b3485ee05', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (hAsync(Host, { key: '310188521230d3e16cff23b857769c4b5d04fd8d', variant: this.variant, slot: "tabs", index: this.index }, hAsync("button", { key: '9df38c2aa1fa29487fdce62ce7dc5f67df6bcde1', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.disabled ? "-1" : (this.selected ? "0" : "-1"), "aria-selected": this.selected ? "true" : "false", "aria-disabled": this.disabled ? "true" : null, disabled: this.disabled, class: this.classNames(), onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, hAsync("div", { key: '4936599dd547f236880ea9a0ccabc4b50836d1d5', class: "pds-tab__content" }, hAsync("slot", { key: '567388faf912bb307676cea9a4626ce9669087dd' })))));
+        const availabilityTabEdgeInlineStart = (hAsync("span", { class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (hAsync("span", { class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        const content = (hAsync(Fragment, null, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, hAsync("div", { class: "pds-tab__content" }, hAsync("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 (hAsync(Host, { variant: this.variant, slot: "tabs", index: this.index }, hAsync("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 (hAsync(Host, { variant: this.variant, slot: "tabs", index: this.index }, hAsync("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)));
     }
     get el() { return getElement(this); }
     static get style() { return pdsTabCss(); }
@@ -19838,11 +19918,17 @@ class PdsTab {
         "$tagName$": "pds-tab",
         "$members$": {
             "disabled": [4],
+            "href": [1],
+            "active": [4],
+            "target": [1],
+            "turboFrame": [1, "turbo-frame"],
+            "turboAction": [1, "turbo-action"],
             "name": [1],
             "parentComponentId": [1, "parent-component-id"],
             "variant": [1],
             "index": [2],
-            "selected": [4]
+            "selected": [4],
+            "navMode": [4, "nav-mode"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -20758,7 +20844,7 @@ class PdsTableRow {
     }; }
 }
 
-const pdsTabpanelCss = () => `:host{display:block}.pds-tabpanel{display:none;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}`;
+const pdsTabpanelCss = () => `:host{display:block}:host(.pds-tabpanel--stretch-active){-ms-flex:1 1 auto;flex:1 1 auto;min-block-size:0}:host(.pds-tabpanel--stretch-active) .pds-tabpanel.is-active{block-size:100%}.pds-tabpanel{display:none;margin-top:var(--tabs-dimension-panel-margin-top);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}`;
 
 class PdsTabpanel {
     constructor(hostRef) {
@@ -20768,9 +20854,14 @@ class PdsTabpanel {
          */
         /** @internal */
         this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
+        /**
+         * Keeps track of the parent `stretch` state so the active panel can fill height, this property is passed by parent component
+         */
+        /** @internal */
+        this.stretch = false;
     }
     render() {
-        return (hAsync(Host, { key: '6ba83ea71c899d61f67884780731591a05aa1894', slot: "tabpanels" }, hAsync("div", { key: 'abaa610f7a68a3977303e08f1221976ae2840272', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: 'b80ecc1380f424d545b31843b53de1b2854e9f28' }))));
+        return (hAsync(Host, { key: '88dfc12ce8b2413824e6d3425aa38674fa14c764', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, hAsync("div", { key: 'bcfe8be6480dc253b10d63d6e37caacec4a8fe7f', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: '96ee87a0917e5f538a5c053045a5d6821684cf3a' }))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsTabpanelCss(); }
@@ -20781,7 +20872,8 @@ class PdsTabpanel {
             "name": [1],
             "parentComponentId": [1, "parent-component-id"],
             "variant": [1],
-            "selected": [1028]
+            "selected": [1028],
+            "stretch": [4]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -20789,7 +20881,7 @@ class PdsTabpanel {
     }; }
 }
 
-const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{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:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}`;
+const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--divider) .pds-tabs__tablist{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host(.pds-tabs--stretch){block-size:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.pds-tabs--stretch) .pds-tabs__tablist{-ms-flex:0 0 auto;flex:0 0 auto}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{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:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}`;
 
 /**
 * @slot tabs - Content is placed within the `div[role="tablist"]` element as children
@@ -20799,6 +20891,25 @@ const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dim
 class PdsTabs {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * 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]) {
@@ -20807,6 +20918,10 @@ 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
@@ -20819,6 +20934,32 @@ 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;
@@ -20857,13 +20998,25 @@ 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() {
@@ -20872,17 +21025,27 @@ 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 (hAsync(Host, { key: '213dfbe8f2828b430ab81dce23f43c2137206861', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, hAsync("div", { key: '68989e852e2eeed180f91e5ac901c4318d6c0d70', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, hAsync("slot", { key: '4a06996745c049fdaf830460e8d57caefd50900b', name: "tabs" })), hAsync("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 ? (hAsync("nav", { class: "pds-tabs__tablist", "aria-label": this.tablistLabel || undefined, part: "tab-list" }, hAsync("slot", { name: "tabs" }))) : (hAsync("div", { class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, hAsync("slot", { name: "tabs" })));
+        return (hAsync(Host, { key: '97bb6d788bd7bdf393b46eaecea612d9b0c9dee4', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, hAsync("slot", { key: '252855bfa496bc3e04fbe6dc0bcb7597c7360407', name: "tabpanels" })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsTabsCss(); }
@@ -20893,6 +21056,9 @@ class PdsTabs {
             "tablistLabel": [1, "tablist-label"],
             "componentId": [1, "component-id"],
             "variant": [1],
+            "divider": [4],
+            "stretch": [4],
+            "nav": [4],
             "activeTabName": [1025, "active-tab-name"],
             "activeTabIndex": [1026, "active-tab-index"]
         },
@@ -21005,7 +21171,7 @@ class PdsText {
             ? `pds-text--decoration-${this.decoration}`
             : ''}
     `;
-        return (hAsync(Tag, { key: '36278c42c1669a3d2ff3ac2973727c03f2498023', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, hAsync("slot", { key: 'cb3c83b54cb84fe485fd14c7073148fc037d78cd' })));
+        return (hAsync(Tag, { key: '9ae3d5a57202ca1308c69b76645168fc8e18953b', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, hAsync("slot", { key: 'e6c95b8240690a9c83927e206096bbd7615dd4d2' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21346,10 +21512,10 @@ class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (hAsync(Host, { key: '838d12ba686fb041996c44522d3fd30e1b56c610', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: 'bd3eef138a5c8f2cd4e48c007561bb1b12f4e575', class: "pds-textarea" }, this.label &&
-            hAsync("div", { key: 'f83f23b17cd157d48bb5c0c5067ca5f611d73529', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '896b7b495ad6f7deb8d4738e623f0676f0a98c1f', htmlFor: this.componentId }, hAsync("span", { key: '02b06db969467f6c4e83e0f713bee0be76f8dfff', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '15c5964576e73db36cee4a9ca868c28571250a27', class: "pds-textarea__field-wrapper" }, hAsync("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 &&
-            hAsync("p", { key: 'e42f174f4153363ce745db264fd3a9ee46178a03', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            hAsync("p", { key: '44189515611ff9fa51d2815a7066626b6ba5df2c', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '64d275da09cdf1c2cc27d4c0a780dd414c265534', icon: danger, size: "small" }), this.errorMessage))));
+        return (hAsync(Host, { key: 'd13869d989752c76c80a46ebb0291df2c0546cc2', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '19454f642896485dc22bc5dac8b6ed3b4ae5627a', class: "pds-textarea" }, this.label &&
+            hAsync("div", { key: 'def9e117ba3667a542e8cec32c2eabfa701c3305', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '893a1db325ece460c627e72b765289098823e49e', htmlFor: this.componentId }, hAsync("span", { key: 'd047f17441aa81800057d7403af15f6e38c53f6c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '7d0f2fab56fee9b9d9e0facabc7e607cb6bee23b', class: "pds-textarea__field-wrapper" }, hAsync("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 &&
+            hAsync("p", { key: 'b5229a6ef0b2c4ee5dcb820ce2b9bbf6334adef8', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            hAsync("p", { key: '8e6dfa97496d553b8e1e2a50c1221fad3ddb539a', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'f3ed2677239e6d135480cf55d1d908936d746322', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -21523,13 +21689,13 @@ class PdsToast {
         return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (hAsync(Host, { key: 'a1ec97158a6665aa25b58b1954b4b5c622590615', hidden: !this.isVisible }, hAsync("div", { key: 'd9b01164364c76512852a260cede50000b73a563', class: {
+        return (hAsync(Host, { key: '87c9b15656a2765eb9e722c85dba5c5edbe07c42', hidden: !this.isVisible }, hAsync("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(), hAsync("span", { key: '1f581c7c29ea3fc795dfca061d3575c5a9895b3c', class: "pds-toast__message" }, hAsync("slot", { key: '645b31eae3be23de63ab2562234caf0be2510645' })), this.dismissible && (hAsync("button", { key: '44a62b304468c0fca0b8d490ad9c8b5932176ac9', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '5f7fd6b70fe130d8b0915da07640bec01b3b2bcb', class: "pds-toast__message" }, hAsync("slot", { key: '4aa0cf737b420ae51297126b423b44d2a8610226' })), this.dismissible && (hAsync("button", { key: 'a8b8e5e9ba956b2d9cca284d114afa37b80570cf', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'fde63f279f696d9f02875cc1beee3542c97f0c7e', name: "remove" }))))));
+            }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'dac8f2099b2ab8a68d208aac288d48019df6d7e7', name: "remove" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21873,9 +22039,9 @@ class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (hAsync(Host, { key: '4e6188e03c2f1d33e571b96a3006a585840716bd', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '0b82d180295421c32548577fb2038422b8ebd3be', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (hAsync(Host, { key: '6af9c969e0dae4f3969cba2153797a1bccfc6d21', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("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 }, hAsync("slot", { key: '661014ee46b11bcc906e7b64ef8c8a5739d459f0' })), hAsync("div", { key: '1861ce9b260f5f7d2eb0a1f337dadd63a0dfee97', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '963fb263c72fba432c2b672a2c3e85ca524f2b67', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '37715fc0bf525695a62af1944ff853228080302a' })), hAsync("div", { key: 'a9a925b1de9ea45d2f6b9f39ec5e386537313217', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '1486b30af21dc69758d7dc9890cbaf227bafffc7', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {