@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-tabs-Cip4nbb7.js

@@ -0,0 +1,622 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { i as uniqueId } from "./focus-aa5dlv8k.js";
+import { css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+//#region src/components/tabs/pk-tabs.styles.ts
+/**
+* Variant tokens are defined on `pk-tabs` and inherited by slotted
+* `pk-tab` / `pk-tab-panel` shadow roots (custom properties pierce shadow DOM).
+*/
+var pkTabsStyles = css`
+    @layer pk-component {
+        :host {
+            display: block;
+            max-width: 100%;
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-font-size-base);
+            line-height: var(--pk-line-height);
+            /* Frame chrome on the host (matches v1 PaneTabs root) so consumer
+             * overflow utilities on the host do not clip the pane shadow. */
+            border-radius: var(--pk-tabs-root-radius);
+            box-shadow: var(--pk-tabs-root-shadow);
+            overflow: var(--pk-tabs-root-overflow);
+
+            /* Root */
+            --pk-tabs-root-gap: 0.75rem;
+            --pk-tabs-root-height: auto;
+            --pk-tabs-root-radius: 0;
+            --pk-tabs-root-shadow: none;
+            --pk-tabs-root-overflow: visible;
+
+            /* List */
+            --pk-tabs-list-display: inline-flex;
+            --pk-tabs-list-width: fit-content;
+            --pk-tabs-list-align-self: flex-start;
+            --pk-tabs-list-align-items: center;
+            --pk-tabs-list-padding: 2px;
+            --pk-tabs-list-border-width: 1px;
+            --pk-tabs-list-border-color: var(--pk-color-gray-150);
+            --pk-tabs-list-border-bottom: var(--pk-tabs-list-border-width) solid var(--pk-tabs-list-border-color);
+            --pk-tabs-list-radius: var(--pk-radius-md);
+            --pk-tabs-list-bg: color-mix(in oklab, var(--pk-color-gray-100) 90%, transparent);
+            --pk-tabs-list-shadow: 0 1px 2px rgba(31, 41, 51, 0.06);
+            /* Transparent no-op — keyword none in a multi-shadow list invalidates the whole property. */
+            --pk-tabs-list-inset-shadow: 0 0 #0000;
+            --pk-tabs-list-color: var(--pk-color-gray-500);
+            --pk-tabs-list-overflow-x: auto;
+            --pk-tabs-list-overflow-y: visible;
+
+            /* Trigger (inherited by pk-tab) */
+            --pk-tabs-trigger-display: inline-flex;
+            --pk-tabs-trigger-justify: center;
+            --pk-tabs-trigger-width: auto;
+            --pk-tabs-trigger-gap: 0.5rem;
+            --pk-tabs-trigger-min-height: 2rem;
+            --pk-tabs-trigger-padding-block: 0.375rem;
+            --pk-tabs-trigger-padding-inline: 0.75rem;
+            --pk-tabs-trigger-radius: var(--pk-radius-sm);
+            --pk-tabs-trigger-color: inherit;
+            --pk-tabs-trigger-font-size: 13px;
+            --pk-tabs-trigger-font-weight: 400;
+            --pk-tabs-trigger-text-align: center;
+            --pk-tabs-trigger-text-transform: none;
+            --pk-tabs-trigger-border-top: 0 solid transparent;
+            --pk-tabs-trigger-hover-bg: rgb(255 255 255 / 0.7);
+            --pk-tabs-trigger-hover-color: var(--pk-color-gray-700);
+            --pk-tabs-trigger-selected-hover-bg: var(--pk-tabs-trigger-selected-bg, var(--pk-color-white));
+            --pk-tabs-trigger-selected-hover-color: var(--pk-tabs-trigger-selected-color, var(--pk-color-gray-800));
+            --pk-tabs-trigger-selected-bg: var(--pk-color-white);
+            --pk-tabs-trigger-selected-color: var(--pk-color-gray-800);
+            --pk-tabs-trigger-selected-shadow: 0 1px 2px rgba(31, 41, 51, 0.12);
+            --pk-tabs-trigger-selected-radius: var(--pk-radius-sm);
+            --pk-tabs-trigger-selected-border-top: 0 solid transparent;
+            --pk-tabs-trigger-underline-height: 0;
+            --pk-tabs-trigger-underline-inset: 15px;
+            --pk-tabs-trigger-label-flex: 0 1 auto;
+            --pk-tabs-trigger-icon-size: 1.125rem;
+            --pk-tabs-trigger-icon-color: inherit;
+            --pk-tabs-trigger-status-margin: 0;
+            --pk-tabs-trigger-status-color: inherit;
+
+            /* Group headings (pk-tab-heading) */
+            --pk-tabs-heading-padding: 0.75rem 0.5rem 0.375rem;
+            --pk-tabs-heading-color: var(--pk-color-gray-400);
+            --pk-tabs-heading-font-size: 11px;
+            --pk-tabs-heading-font-weight: 600;
+            --pk-tabs-heading-letter-spacing: 0.04em;
+            --pk-tabs-heading-text-transform: uppercase;
+
+            /* Panel (inherited by pk-tab-panel) */
+            --pk-tabs-panel-flex: none;
+            --pk-tabs-panel-min-height: 0;
+            --pk-tabs-panel-padding: 0;
+            --pk-tabs-panel-bg: transparent;
+            --pk-tabs-panel-radius: 0;
+            --pk-tabs-panel-font-size: var(--pk-font-size-base);
+        }
+
+        :host([variant='pane']),
+        :host([variant='modal']),
+        :host([variant='sidebar']) {
+            height: 100%;
+            min-height: 0;
+            --pk-tabs-root-height: 100%;
+        }
+
+        .tabs {
+            display: flex;
+            flex-direction: column;
+            gap: var(--pk-tabs-root-gap);
+            height: var(--pk-tabs-root-height);
+            min-height: 0;
+            /* Radius/shadow/overflow live on :host — keep the layout shell fill-only. */
+        }
+
+        .tabs[data-placement='bottom'] {
+            flex-direction: column-reverse;
+        }
+
+        .tabs[data-placement='start'],
+        .tabs[data-placement='end'] {
+            flex-direction: row;
+            align-items: flex-start;
+            gap: 1rem;
+        }
+
+        .tabs[data-placement='end'] {
+            flex-direction: row-reverse;
+        }
+
+        .tabs[data-placement='start'] .list,
+        .tabs[data-placement='end'] .list {
+            flex-direction: column;
+            align-self: stretch;
+        }
+
+        .list {
+            display: var(--pk-tabs-list-display);
+            width: var(--pk-tabs-list-width);
+            max-width: 100%;
+            align-self: var(--pk-tabs-list-align-self);
+            align-items: var(--pk-tabs-list-align-items);
+            justify-content: flex-start;
+            /* Tab strip must not shrink when panels flex-fill the column — otherwise
+             * overflow-y clips trigger padding and the modal active underline. */
+            flex-shrink: 0;
+            position: relative;
+            z-index: var(--pk-tabs-list-z-index, auto);
+            isolation: isolate;
+            padding: var(--pk-tabs-list-padding);
+            border: var(--pk-tabs-list-border-width) solid var(--pk-tabs-list-border-color);
+            border-bottom: var(--pk-tabs-list-border-bottom, var(--pk-tabs-list-border-width) solid var(--pk-tabs-list-border-color));
+            border-radius: var(--pk-tabs-list-radius);
+            background: var(--pk-tabs-list-bg);
+            box-shadow: var(--pk-tabs-list-shadow), var(--pk-tabs-list-inset-shadow);
+            color: var(--pk-tabs-list-color);
+            overflow-x: var(--pk-tabs-list-overflow-x, auto);
+            overflow-y: var(--pk-tabs-list-overflow-y, visible);
+        }
+
+        /* Pane — matches plugin-kit-react PaneTabs */
+        :host([variant='pane']) {
+            --pk-tabs-root-gap: 0;
+            --pk-tabs-root-radius: var(--pk-radius-lg);
+            --pk-tabs-root-shadow:
+                0 0 0 1px var(--pk-color-gray-200),
+                0 2px 12px rgb(205 216 228 / 50%);
+            --pk-tabs-root-overflow: visible;
+
+            --pk-tabs-list-display: flex;
+            --pk-tabs-list-width: auto;
+            --pk-tabs-list-align-self: stretch;
+            --pk-tabs-list-align-items: flex-end;
+            --pk-tabs-list-padding: 0;
+            --pk-tabs-list-border-width: 0;
+            --pk-tabs-list-radius: var(--pk-radius-lg) var(--pk-radius-lg) 0 0;
+            --pk-tabs-list-bg: var(--pk-color-gray-50);
+            /* Must not use keyword none — box-shadow: none, inset … is invalid and drops the hairline. */
+            --pk-tabs-list-shadow: inset 0 -1px 0 0 rgb(154 165 177 / 25%);
+            --pk-tabs-list-inset-shadow: 0 0 #0000;
+            --pk-tabs-list-overflow-x: auto;
+            --pk-tabs-list-overflow-y: visible;
+
+            --pk-tabs-trigger-display: flex;
+            --pk-tabs-trigger-justify: flex-start;
+            --pk-tabs-trigger-min-height: 45px;
+            --pk-tabs-trigger-padding-block: 0;
+            --pk-tabs-trigger-padding-inline: 24px;
+            --pk-tabs-trigger-radius: 0;
+            --pk-tabs-trigger-border-top: 0 solid transparent;
+            --pk-tabs-trigger-color: var(--pk-color-gray-550);
+            --pk-tabs-trigger-font-size: var(--pk-font-size-base);
+            --pk-tabs-trigger-font-weight: 400;
+            --pk-tabs-trigger-hover-bg: var(--pk-color-slate-100);
+            --pk-tabs-trigger-hover-color: var(--pk-color-gray-550);
+            --pk-tabs-trigger-selected-bg: var(--pk-color-white);
+            --pk-tabs-trigger-selected-color: var(--pk-color-gray-700);
+            --pk-tabs-trigger-selected-border-top: 0 solid transparent;
+            /* Match Craft .pane-tabs [role=tab].sel — inset top accent + elevation. */
+            --pk-tabs-trigger-selected-shadow:
+                inset 0 2px 0 var(--pk-color-gray-500),
+                0 0 0 1px rgb(51 64 77 / 10%),
+                0 2px 12px rgb(205 216 228 / 90%);
+            --pk-tabs-trigger-selected-radius: 2px 2px 0 0;
+
+            /* 0% basis — panel fills leftover height and scrolls; auto basis grew with
+             * content and clipped under dialog overflow:hidden (Edit Buttons Appearance). */
+            --pk-tabs-panel-flex: 1 1 0%;
+            --pk-tabs-panel-min-height: 0;
+            /*
+             * No built-in panel inset — matches v1 PaneTabsContent (padding came from
+             * the consumer: ReportTabPanel / FormBuilderTabContent / DefaultsPanel p-6).
+             * A non-zero value here double-pads those surfaces.
+             */
+            --pk-tabs-panel-padding: 0;
+            --pk-tabs-panel-bg: var(--pk-color-white);
+            --pk-tabs-panel-radius: 0 0 var(--pk-radius-lg) var(--pk-radius-lg);
+            --pk-tabs-panel-font-size: var(--pk-font-size-sm, 14px);
+        }
+
+        /* Craft bumps the first tab start corner to --radius-lg so the inset
+         * accent follows the pane radius instead of reading as clipped at 2px.
+         */
+        :host([variant='pane']) ::slotted(pk-tab:first-child) {
+            --pk-tabs-trigger-selected-radius: var(--pk-radius-lg) 2px 0 0;
+        }
+
+        /* Modal — matches plugin-kit-react ModalTabs */
+        :host([variant='modal']) {
+            --pk-tabs-root-gap: 0;
+            --pk-tabs-root-height: 100%;
+            /* Dialog already rounds the panel — host radius + overflow clips the
+             * first tab’s focus ring into a one-corner “rounded border”. */
+            --pk-tabs-root-radius: 0;
+            /* Clip to the height chain so panels scroll inside, not through the footer. */
+            --pk-tabs-root-overflow: hidden;
+
+            --pk-tabs-list-display: flex;
+            --pk-tabs-list-width: 100%;
+            --pk-tabs-list-align-self: stretch;
+            --pk-tabs-list-align-items: stretch;
+            --pk-tabs-list-padding: 0;
+            --pk-tabs-list-border-width: 0;
+            --pk-tabs-list-border-bottom: 1px solid var(--pk-color-gray-100);
+            --pk-tabs-list-radius: 0;
+            --pk-tabs-list-bg: var(--pk-color-white);
+            --pk-tabs-list-shadow: 0 1px 5px #cdd8e440;
+            /* Transparent no-op — keyword none in a multi-shadow list invalidates the whole property. */
+            --pk-tabs-list-inset-shadow: 0 0 #0000;
+            --pk-tabs-list-color: inherit;
+            --pk-tabs-list-overflow-x: auto;
+            /* auto (not hidden): overflow-x:auto + overflow-y:hidden clips ~1 device
+             * pixel of the bottom active underline, so the 2px sky bar reads as 1px. */
+            --pk-tabs-list-overflow-y: auto;
+            /* v1 ModalTabsList z-11 — keep the strip above scrolling panel content
+             * (editable-table action columns, etc.) when body/panel scrolls. */
+            --pk-tabs-list-z-index: 11;
+
+            --pk-tabs-trigger-display: inline-flex;
+            --pk-tabs-trigger-justify: center;
+            --pk-tabs-trigger-min-height: auto;
+            --pk-tabs-trigger-padding-block: 15px;
+            --pk-tabs-trigger-padding-inline: 15px;
+            --pk-tabs-trigger-radius: 0;
+            --pk-tabs-trigger-color: #64788d;
+            --pk-tabs-trigger-font-size: 12px;
+            --pk-tabs-trigger-font-weight: 500;
+            --pk-tabs-trigger-text-transform: uppercase;
+            --pk-tabs-trigger-hover-bg: transparent;
+            --pk-tabs-trigger-hover-color: var(--pk-color-sky-600);
+            --pk-tabs-trigger-selected-bg: transparent;
+            --pk-tabs-trigger-selected-color: #64788d;
+            --pk-tabs-trigger-selected-hover-bg: transparent;
+            --pk-tabs-trigger-selected-hover-color: var(--pk-color-sky-600);
+            /* Active (mouse) = 15px-inset underline. Active + :focus-visible = screen3 box. */
+            --pk-tabs-trigger-selected-shadow: none;
+            --pk-tabs-trigger-selected-radius: 0;
+            --pk-tabs-trigger-underline-height: 2px;
+            --pk-tabs-trigger-underline-inset: 15px;
+            --pk-tabs-trigger-focus-selected-shadow: inset 0 0 0 2px var(--pk-color-sky-600);
+            --pk-tabs-trigger-focus-selected-underline-height: 0;
+
+            /* 0% basis — panel fills leftover height and scrolls; auto basis grew with
+             * content and clipped under dialog overflow:hidden (Edit Buttons Appearance). */
+            --pk-tabs-panel-flex: 1 1 0%;
+            --pk-tabs-panel-min-height: 0;
+            --pk-tabs-panel-padding: 1rem;
+            --pk-tabs-panel-bg: transparent;
+            --pk-tabs-panel-radius: 0;
+            --pk-tabs-panel-font-size: var(--pk-font-size-sm, 14px);
+        }
+
+        /* Sidebar — vertical nav list with optional icons, status, and headings */
+        :host([variant='sidebar']) {
+            --pk-tabs-root-gap: 0;
+            --pk-tabs-root-radius: 0;
+            --pk-tabs-root-shadow: none;
+            --pk-tabs-root-overflow: visible;
+
+            --pk-tabs-list-display: flex;
+            --pk-tabs-list-width: var(--pk-tabs-sidebar-width, 14rem);
+            --pk-tabs-list-align-self: stretch;
+            --pk-tabs-list-align-items: stretch;
+            --pk-tabs-list-padding: 0.5rem;
+            --pk-tabs-list-border-width: 0;
+            --pk-tabs-list-border-bottom: 0 solid transparent;
+            --pk-tabs-list-radius: 0;
+            --pk-tabs-list-bg: var(--pk-color-gray-100);
+            --pk-tabs-list-shadow: 0 0 #0000;
+            --pk-tabs-list-inset-shadow: 0 0 #0000;
+            --pk-tabs-list-color: var(--pk-color-gray-600);
+            --pk-tabs-list-overflow-x: hidden;
+            --pk-tabs-list-overflow-y: auto;
+
+            --pk-tabs-trigger-display: flex;
+            --pk-tabs-trigger-justify: flex-start;
+            --pk-tabs-trigger-width: 100%;
+            /* Match Craft/Formie integrations nav: padding 7px 10px, 16px icons, content-sized height. */
+            --pk-tabs-trigger-gap: 10px;
+            --pk-tabs-trigger-min-height: 0;
+            --pk-tabs-trigger-padding-block: 7px;
+            --pk-tabs-trigger-padding-inline: 10px;
+            --pk-tabs-trigger-radius: var(--pk-radius-md);
+            --pk-tabs-trigger-color: var(--pk-color-gray-700);
+            --pk-tabs-trigger-font-size: 13px;
+            --pk-tabs-trigger-font-weight: 400;
+            --pk-tabs-trigger-line-height: 1.2;
+            --pk-tabs-trigger-text-align: start;
+            --pk-tabs-trigger-text-transform: none;
+            --pk-tabs-trigger-border-top: 0 solid transparent;
+            --pk-tabs-trigger-hover-bg: color-mix(in oklab, var(--pk-color-gray-200) 70%, transparent);
+            --pk-tabs-trigger-hover-color: var(--pk-color-gray-800);
+            --pk-tabs-trigger-selected-bg: var(--pk-color-gray-500);
+            --pk-tabs-trigger-selected-color: var(--pk-color-white);
+            --pk-tabs-trigger-selected-hover-bg: var(--pk-color-gray-500);
+            --pk-tabs-trigger-selected-hover-color: var(--pk-color-white);
+            --pk-tabs-trigger-selected-shadow: none;
+            --pk-tabs-trigger-selected-radius: var(--pk-radius-md);
+            --pk-tabs-trigger-selected-border-top: 0 solid transparent;
+            --pk-tabs-trigger-underline-height: 0;
+            --pk-tabs-trigger-label-flex: 1 1 auto;
+            --pk-tabs-trigger-icon-size: 16px;
+            --pk-tabs-trigger-status-margin: auto;
+            --pk-tabs-trigger-status-color: var(--pk-color-gray-400);
+
+            --pk-tabs-heading-padding: 14px 10px 5px;
+            --pk-tabs-heading-color: var(--pk-color-gray-400);
+            --pk-tabs-heading-font-size: 11px;
+            --pk-tabs-heading-font-weight: 600;
+            --pk-tabs-heading-letter-spacing: 0.04em;
+            --pk-tabs-heading-text-transform: uppercase;
+
+            /* 0% basis — panel fills leftover height and scrolls; auto basis grew with
+             * content and clipped under dialog overflow:hidden (Edit Buttons Appearance). */
+            --pk-tabs-panel-flex: 1 1 0%;
+            --pk-tabs-panel-min-height: 0;
+            --pk-tabs-panel-padding: 1.25rem;
+            --pk-tabs-panel-bg: var(--pk-color-white);
+            --pk-tabs-panel-radius: 0;
+            --pk-tabs-panel-font-size: var(--pk-font-size-base);
+        }
+
+        :host([variant='sidebar']) .tabs {
+            flex-direction: row;
+            align-items: stretch;
+            gap: 0;
+        }
+
+        :host([variant='sidebar']) .tabs[data-placement='end'] {
+            flex-direction: row-reverse;
+        }
+
+        :host([variant='sidebar']) .list {
+            flex-direction: column;
+            gap: 0.125rem;
+            flex: none;
+        }
+
+        :host([variant='sidebar']) ::slotted(pk-tab) {
+            display: block;
+            width: 100%;
+        }
+
+        :host([variant='sidebar']) ::slotted(pk-tab-heading) {
+            display: block;
+            width: 100%;
+        }
+
+        /* First group heading sits closer to the list top edge */
+        :host([variant='sidebar']) ::slotted(pk-tab-heading:first-child) {
+            --pk-tabs-heading-padding: 10px 10px 5px;
+        }
+
+        /* Hollow inactive dots read better on the selected dark pill */
+        :host([variant='sidebar']) ::slotted(pk-tab[selected]) {
+            --pk-tabs-trigger-status-color: var(--pk-color-gray-300);
+        }
+    }
+`;
+//#endregion
+//#region src/components/tabs/pk-tabs.ts
+var PkTabs = class PkTabs extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.variant = "default";
+		this.orientation = "horizontal";
+		this.placement = "top";
+		this.activation = "manual";
+		this.disabled = false;
+		this.ariaLabel = null;
+		this.baseId = uniqueId("pk-tabs");
+		this.tabs = [];
+		this.panels = [];
+		this.focusedValue = "";
+		this.syncTabs = () => {
+			const slot = this.shadowRoot?.querySelector("slot[name=\"nav\"]");
+			if (!slot) return;
+			this.tabs = slot.assignedElements({ flatten: true }).filter((element) => element.tagName === "PK-TAB");
+			this.ensureDefaultValue();
+			this.applySelection();
+		};
+		this.syncPanels = () => {
+			const slot = this.shadowRoot?.querySelector("slot:not([name])");
+			if (!slot) return;
+			this.panels = slot.assignedElements({ flatten: true }).filter((element) => element.tagName === "PK-TAB-PANEL");
+			this.applySelection();
+		};
+		this.handleTabSelect = (event) => {
+			if (!this.isOwnTabEvent(event) || this.disabled) return;
+			event.stopPropagation();
+			const { value } = event.detail;
+			if (value === this.value && this.activation === "manual") {
+				this.focusedValue = value;
+				this.applySelection();
+				return;
+			}
+			if (value === this.value) return;
+			this.selectTab(value);
+		};
+		this.handleTabKeyDown = (event) => {
+			if (!this.isOwnTabEvent(event)) return;
+			event.stopPropagation();
+			const keyboardEvent = event.detail.event;
+			const enabled = this.getEnabledTabs();
+			if (enabled.length === 0) return;
+			const currentIndex = enabled.findIndex((tab) => tab.value === event.detail.value);
+			if (currentIndex < 0) return;
+			let nextIndex = currentIndex;
+			const isHorizontal = this.getEffectiveOrientation() === "horizontal";
+			switch (keyboardEvent.key) {
+				case "ArrowDown":
+					if (isHorizontal) return;
+					keyboardEvent.preventDefault();
+					nextIndex = currentIndex >= enabled.length - 1 ? 0 : currentIndex + 1;
+					break;
+				case "ArrowUp":
+					if (isHorizontal) return;
+					keyboardEvent.preventDefault();
+					nextIndex = currentIndex <= 0 ? enabled.length - 1 : currentIndex - 1;
+					break;
+				case "ArrowRight":
+					if (!isHorizontal) return;
+					keyboardEvent.preventDefault();
+					nextIndex = currentIndex >= enabled.length - 1 ? 0 : currentIndex + 1;
+					break;
+				case "ArrowLeft":
+					if (!isHorizontal) return;
+					keyboardEvent.preventDefault();
+					nextIndex = currentIndex <= 0 ? enabled.length - 1 : currentIndex - 1;
+					break;
+				case "Home":
+					keyboardEvent.preventDefault();
+					nextIndex = 0;
+					break;
+				case "End":
+					keyboardEvent.preventDefault();
+					nextIndex = enabled.length - 1;
+					break;
+				default: return;
+			}
+			const next = enabled[nextIndex];
+			if (!next) return;
+			if (this.activation === "auto") if (next.value !== this.value) this.selectTab(next.value);
+			else next.focusControl();
+			else {
+				this.focusedValue = next.value;
+				this.applySelection();
+				next.focusControl();
+			}
+		};
+	}
+	static {
+		this.styles = pkTabsStyles;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("pk-tab-select", this.handleTabSelect);
+		this.addEventListener("pk-tab-keydown", this.handleTabKeyDown);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("pk-tab-select", this.handleTabSelect);
+		this.removeEventListener("pk-tab-keydown", this.handleTabKeyDown);
+		super.disconnectedCallback();
+	}
+	updated(changed) {
+		if (changed.has("value") || changed.has("disabled") || changed.has("activation")) {
+			if (changed.has("value")) this.focusedValue = this.value;
+			this.applySelection();
+		}
+	}
+	ensureDefaultValue() {
+		if (this.value || this.tabs.length === 0) return;
+		const firstEnabled = this.tabs.find((tab) => !tab.disabled && !this.disabled);
+		if (firstEnabled) {
+			this.value = firstEnabled.value;
+			this.focusedValue = this.value;
+		}
+	}
+	getEnabledTabs() {
+		return this.tabs.filter((tab) => !tab.disabled && !this.disabled);
+	}
+	/**
+	* Sidebar is inherently a vertical nav list. Layout CSS and keyboard arrows
+	* both follow this effective orientation so consumers can omit the attrs.
+	*/
+	getEffectiveOrientation() {
+		return this.variant === "sidebar" ? "vertical" : this.orientation;
+	}
+	getEffectivePlacement() {
+		if (this.variant === "sidebar") return this.placement === "top" || this.placement === "bottom" ? "start" : this.placement;
+		return this.placement;
+	}
+	applySelection() {
+		const previousValue = this.getAttribute("data-current-value") ?? "";
+		const focusTarget = this.activation === "manual" ? this.focusedValue : this.value;
+		for (const tab of this.tabs) {
+			const selected = tab.value === this.value;
+			const tabId = `${this.baseId}-tab-${tab.value}`;
+			const panelId = `${this.baseId}-panel-${tab.value}`;
+			tab.selected = selected;
+			tab.disabled = this.disabled || tab.hasAttribute("disabled");
+			tab.focusIndex = tab.value === focusTarget ? 0 : -1;
+			tab.panelId = panelId;
+			tab.id = tabId;
+		}
+		for (const panel of this.panels) {
+			const selected = panel.value === this.value;
+			const tabId = `${this.baseId}-tab-${panel.value}`;
+			const panelId = `${this.baseId}-panel-${panel.value}`;
+			if (panel.hidden !== !selected) {
+				if (selected) this.dispatchEvent(new CustomEvent("pk-tab-show", {
+					detail: { value: panel.value },
+					bubbles: true,
+					composed: true
+				}));
+				else if (previousValue === panel.value) this.dispatchEvent(new CustomEvent("pk-tab-hide", {
+					detail: { value: panel.value },
+					bubbles: true,
+					composed: true
+				}));
+			}
+			panel.hidden = !selected;
+			panel.tabId = tabId;
+			panel.id = panelId;
+		}
+		this.setAttribute("data-current-value", this.value);
+	}
+	/**
+	* `pk-tab-select` / `pk-tab-keydown` bubble + compose out of nested tab groups
+	* (e.g. modal tabs inside a pane). Only own nav-slot tabs may drive this instance.
+	*/
+	isOwnTabEvent(event) {
+		const target = event.target;
+		return target instanceof HTMLElement && target.tagName === "PK-TAB" && this.tabs.includes(target);
+	}
+	selectTab(value) {
+		this.value = value;
+		this.focusedValue = value;
+		this.applySelection();
+		this.dispatchEvent(new CustomEvent("pk-change", {
+			detail: { value: this.value },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const orientation = this.getEffectiveOrientation();
+		return html`
+            <div part="base" class="tabs pk-tabs" data-placement=${this.getEffectivePlacement()}>
+                <div
+                    part="list"
+                    class="list pk-tabs__list"
+                    role="tablist"
+                    aria-orientation=${orientation}
+                    aria-label=${this.ariaLabel ?? nothing}
+                    @slotchange=${this.syncTabs}
+                >
+                    <slot name="nav"></slot>
+                </div>
+                <slot @slotchange=${this.syncPanels}></slot>
+            </div>
+        `;
+	}
+};
+__decorate([property()], PkTabs.prototype, "value", void 0);
+__decorate([property({ reflect: true })], PkTabs.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], PkTabs.prototype, "orientation", void 0);
+__decorate([property({ reflect: true })], PkTabs.prototype, "placement", void 0);
+__decorate([property({ reflect: true })], PkTabs.prototype, "activation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkTabs.prototype, "disabled", void 0);
+__decorate([property({ attribute: "aria-label" })], PkTabs.prototype, "ariaLabel", void 0);
+__decorate([state()], PkTabs.prototype, "tabs", void 0);
+__decorate([state()], PkTabs.prototype, "panels", void 0);
+__decorate([state()], PkTabs.prototype, "focusedValue", void 0);
+PkTabs = __decorate([customElement("pk-tabs")], PkTabs);
+//#endregion
+export { PkTabs as t };
+
+//# sourceMappingURL=pk-tabs-Cip4nbb7.js.map