@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-tab-CzV7pOdp.js

@@ -0,0 +1,259 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/components/tabs/pk-tab-base.ts
+/** Shared tab trigger behaviour for all tab variants. */
+var PkTabBase = class extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.disabled = false;
+		this.selected = false;
+		this.focusIndex = -1;
+	}
+	focusControl() {
+		this.shadowRoot?.querySelector(".trigger")?.focus();
+	}
+	handleClick() {
+		if (this.disabled) return;
+		this.dispatchEvent(new CustomEvent("pk-tab-select", {
+			detail: { value: this.value },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleKeyDown(event) {
+		this.dispatchEvent(new CustomEvent("pk-tab-keydown", {
+			detail: {
+				event,
+				value: this.value
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	renderTrigger(className) {
+		return html`
+            <button
+                part="trigger"
+                type="button"
+                class=${className}
+                role="tab"
+                ?disabled=${this.disabled}
+                aria-disabled=${this.disabled ? "true" : nothing}
+                aria-selected=${this.selected ? "true" : "false"}
+                tabindex=${this.focusIndex}
+                aria-controls=${this.panelId ?? nothing}
+                @click=${this.handleClick}
+                @keydown=${this.handleKeyDown}
+            >
+                <span part="icon" class="icon">
+                    <slot name="icon"></slot>
+                </span>
+                <span part="label" class="label">
+                    <slot></slot>
+                </span>
+                <span part="status" class="status">
+                    <slot name="status"></slot>
+                </span>
+            </button>
+        `;
+	}
+};
+__decorate([property()], PkTabBase.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkTabBase.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkTabBase.prototype, "selected", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "focus-index"
+})], PkTabBase.prototype, "focusIndex", void 0);
+__decorate([property()], PkTabBase.prototype, "panelId", void 0);
+//#endregion
+//#region src/components/tabs/pk-tab.styles.ts
+var pkTabStyles = css`
+    @layer pk-component {
+        :host {
+            /* Size to the shadow trigger. Prefer flex-start so a short list line
+             * (or host utilities like Tailwind items-center) cannot stretch the
+             * host shorter than the trigger and clip the modal active underline. */
+            display: inline-flex;
+            flex-shrink: 0;
+            align-self: flex-start;
+            height: auto;
+            min-height: auto;
+            align-items: stretch;
+        }
+
+        .trigger {
+            position: relative;
+            display: var(--pk-tabs-trigger-display, inline-flex);
+            align-items: center;
+            justify-content: var(--pk-tabs-trigger-justify, center);
+            gap: var(--pk-tabs-trigger-gap, 0.5rem);
+            width: var(--pk-tabs-trigger-width, auto);
+            min-height: var(--pk-tabs-trigger-min-height, 2rem);
+            padding: var(--pk-tabs-trigger-padding-block, 0.375rem)
+                var(--pk-tabs-trigger-padding-inline, 0.75rem);
+            border: 0;
+            border-top: var(--pk-tabs-trigger-border-top, 0 solid transparent);
+            border-radius: var(--pk-tabs-trigger-radius, var(--pk-radius-sm));
+            background: transparent;
+            color: var(--pk-tabs-trigger-color, inherit);
+            font: inherit;
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-tabs-trigger-font-size, 13px);
+            font-weight: var(--pk-tabs-trigger-font-weight, 400);
+            line-height: var(--pk-tabs-trigger-line-height, 1.4);
+            text-align: var(--pk-tabs-trigger-text-align, center);
+            text-transform: var(--pk-tabs-trigger-text-transform, none);
+            white-space: nowrap;
+            cursor: pointer;
+            outline: none;
+            box-shadow: none;
+            box-sizing: border-box;
+            transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
+        }
+
+        /* Collapse optional icon/status lanes when nothing is slotted. */
+        .icon,
+        .status {
+            display: none;
+            flex: none;
+            align-items: center;
+            justify-content: center;
+            line-height: 0;
+        }
+
+        .icon:has(::slotted(*)),
+        .status:has(::slotted(*)) {
+            display: inline-flex;
+        }
+
+        .icon {
+            width: var(--pk-tabs-trigger-icon-size, 1.125rem);
+            height: var(--pk-tabs-trigger-icon-size, 1.125rem);
+            font-size: var(--pk-tabs-trigger-icon-size, 1.125rem);
+            color: var(--pk-tabs-trigger-icon-color, inherit);
+        }
+
+        .icon ::slotted(*) {
+            display: block;
+            max-width: 100%;
+            max-height: 100%;
+            /* Kill pk-icon text-baseline nudge so logos/icons sit on the flex midline. */
+            vertical-align: 0;
+        }
+
+        .label {
+            display: inline-flex;
+            flex: var(--pk-tabs-trigger-label-flex, 0 1 auto);
+            align-items: center;
+            min-width: 0;
+            line-height: inherit;
+        }
+
+        .status {
+            margin-inline-start: var(--pk-tabs-trigger-status-margin, 0);
+            color: var(--pk-tabs-trigger-status-color, inherit);
+        }
+
+        .trigger:hover:not(:disabled):not([aria-disabled='true']):not([aria-selected='true']) {
+            border-top-color: transparent;
+            background: var(--pk-tabs-trigger-hover-bg, rgb(255 255 255 / 0.7));
+            color: var(--pk-tabs-trigger-hover-color, var(--pk-color-gray-700));
+        }
+
+        /*
+         * Focus ring is only for :focus-visible on a non-selected tab (manual
+         * activation). Selected + focus-visible must NOT draw a ring — active
+         * chrome is the underline (mouse) or is replaced by the modal focus box
+         * via --pk-tabs-trigger-focus-selected-shadow when set.
+         */
+        .trigger:focus-visible:not([aria-selected='true']) {
+            box-shadow: inset 0 0 0 2px var(--pk-color-sky-600);
+        }
+
+        .trigger:disabled,
+        .trigger[aria-disabled='true'] {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        .trigger[aria-selected='true'],
+        :host([selected]) .trigger {
+            border-top: var(--pk-tabs-trigger-selected-border-top, var(--pk-tabs-trigger-border-top, 0 solid transparent));
+            border-radius: var(--pk-tabs-trigger-selected-radius, var(--pk-radius-sm));
+            background: var(--pk-tabs-trigger-selected-bg, var(--pk-color-white));
+            color: var(--pk-tabs-trigger-selected-color, var(--pk-color-gray-800));
+            box-shadow: var(--pk-tabs-trigger-selected-shadow, 0 1px 2px rgba(31, 41, 51, 0.12));
+        }
+
+        .trigger[aria-selected='true']:hover,
+        :host([selected]) .trigger:hover {
+            background: var(--pk-tabs-trigger-selected-hover-bg, var(--pk-tabs-trigger-selected-bg, var(--pk-color-white)));
+            color: var(--pk-tabs-trigger-selected-hover-color, var(--pk-tabs-trigger-selected-color, var(--pk-color-gray-800)));
+        }
+
+        /* screen3: keyboard focus on the active tab → full inset box, no underline. */
+        .trigger[aria-selected='true']:focus-visible,
+        :host([selected]) .trigger:focus-visible {
+            box-shadow: var(
+                --pk-tabs-trigger-focus-selected-shadow,
+                var(--pk-tabs-trigger-selected-shadow, 0 0 #0000)
+            );
+        }
+
+        .trigger[aria-selected='true']:focus-visible::after,
+        :host([selected]) .trigger:focus-visible::after {
+            height: var(--pk-tabs-trigger-focus-selected-underline-height, var(--pk-tabs-trigger-underline-height, 0));
+        }
+
+        .trigger[aria-selected='true']::after,
+        :host([selected]) .trigger::after {
+            content: '';
+            position: absolute;
+            right: var(--pk-tabs-trigger-underline-inset, 15px);
+            bottom: 0;
+            left: var(--pk-tabs-trigger-underline-inset, 15px);
+            height: var(--pk-tabs-trigger-underline-height, 0);
+            /* Keep the bar above the list hairline when both meet at the clip edge. */
+            z-index: 1;
+            background: var(--pk-color-sky-600);
+            pointer-events: none;
+        }
+
+        /*
+         * Validation error chrome (v1 ModalTabs / PaneTabs text-error).
+         * Host sets data-has-errors; light-DOM text-* cannot pierce the trigger.
+         */
+        :host([data-has-errors]) {
+            --pk-tabs-trigger-color: var(--pk-color-error, #d81f23);
+            --pk-tabs-trigger-hover-color: var(--pk-color-rose-700, #be123c);
+            --pk-tabs-trigger-selected-color: var(--pk-color-error, #d81f23);
+            --pk-tabs-trigger-selected-hover-color: var(--pk-color-rose-700, #be123c);
+            --pk-tabs-trigger-icon-color: inherit;
+            --pk-tabs-trigger-status-color: inherit;
+        }
+    }
+`;
+//#endregion
+//#region src/components/tabs/pk-tab.ts
+var PkTab = class PkTab extends PkTabBase {
+	static {
+		this.styles = pkTabStyles;
+	}
+	render() {
+		return this.renderTrigger("trigger pk-tabs__trigger");
+	}
+};
+PkTab = __decorate([customElement("pk-tab")], PkTab);
+//#endregion
+export { PkTab as t };
+
+//# sourceMappingURL=pk-tab-CzV7pOdp.js.map

package/dist/chunks/pk-tab-CzV7pOdp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-tab-CzV7pOdp.js","names":[],"sources":["../../src/components/tabs/pk-tab-base.ts","../../src/components/tabs/pk-tab.styles.ts","../../src/components/tabs/pk-tab.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\n\n/** Shared tab trigger behaviour for all tab variants. */\nexport class PkTabBase extends PkElement {\n    @property()\n    value = '';\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    selected = false;\n\n    @property({ type: Number, attribute: 'focus-index' })\n    focusIndex = -1;\n\n    @property()\n    panelId?: string;\n\n    focusControl(): void {\n        this.shadowRoot?.querySelector<HTMLButtonElement>('.trigger')?.focus();\n    }\n\n    protected handleClick(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.dispatchEvent(new CustomEvent('pk-tab-select', {\n            detail: { value: this.value },\n            bubbles: true,\n            composed: true,\n        }));\n    }\n\n    protected handleKeyDown(event: KeyboardEvent): void {\n        this.dispatchEvent(new CustomEvent('pk-tab-keydown', {\n            detail: { event, value: this.value },\n            bubbles: true,\n            composed: true,\n        }));\n    }\n\n    protected renderTrigger(className: string) {\n        return html`\n            <button\n                part=\"trigger\"\n                type=\"button\"\n                class=${className}\n                role=\"tab\"\n                ?disabled=${this.disabled}\n                aria-disabled=${this.disabled ? 'true' : nothing}\n                aria-selected=${this.selected ? 'true' : 'false'}\n                tabindex=${this.focusIndex}\n                aria-controls=${this.panelId ?? nothing}\n                @click=${this.handleClick}\n                @keydown=${this.handleKeyDown}\n            >\n                <span part=\"icon\" class=\"icon\">\n                    <slot name=\"icon\"></slot>\n                </span>\n                <span part=\"label\" class=\"label\">\n                    <slot></slot>\n                </span>\n                <span part=\"status\" class=\"status\">\n                    <slot name=\"status\"></slot>\n                </span>\n            </button>\n        `;\n    }\n}\n","import { css } from 'lit';\n\nexport const pkTabStyles = css`\n    @layer pk-component {\n        :host {\n            /* Size to the shadow trigger. Prefer flex-start so a short list line\n             * (or host utilities like Tailwind items-center) cannot stretch the\n             * host shorter than the trigger and clip the modal active underline. */\n            display: inline-flex;\n            flex-shrink: 0;\n            align-self: flex-start;\n            height: auto;\n            min-height: auto;\n            align-items: stretch;\n        }\n\n        .trigger {\n            position: relative;\n            display: var(--pk-tabs-trigger-display, inline-flex);\n            align-items: center;\n            justify-content: var(--pk-tabs-trigger-justify, center);\n            gap: var(--pk-tabs-trigger-gap, 0.5rem);\n            width: var(--pk-tabs-trigger-width, auto);\n            min-height: var(--pk-tabs-trigger-min-height, 2rem);\n            padding: var(--pk-tabs-trigger-padding-block, 0.375rem)\n                var(--pk-tabs-trigger-padding-inline, 0.75rem);\n            border: 0;\n            border-top: var(--pk-tabs-trigger-border-top, 0 solid transparent);\n            border-radius: var(--pk-tabs-trigger-radius, var(--pk-radius-sm));\n            background: transparent;\n            color: var(--pk-tabs-trigger-color, inherit);\n            font: inherit;\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-tabs-trigger-font-size, 13px);\n            font-weight: var(--pk-tabs-trigger-font-weight, 400);\n            line-height: var(--pk-tabs-trigger-line-height, 1.4);\n            text-align: var(--pk-tabs-trigger-text-align, center);\n            text-transform: var(--pk-tabs-trigger-text-transform, none);\n            white-space: nowrap;\n            cursor: pointer;\n            outline: none;\n            box-shadow: none;\n            box-sizing: border-box;\n            transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;\n        }\n\n        /* Collapse optional icon/status lanes when nothing is slotted. */\n        .icon,\n        .status {\n            display: none;\n            flex: none;\n            align-items: center;\n            justify-content: center;\n            line-height: 0;\n        }\n\n        .icon:has(::slotted(*)),\n        .status:has(::slotted(*)) {\n            display: inline-flex;\n        }\n\n        .icon {\n            width: var(--pk-tabs-trigger-icon-size, 1.125rem);\n            height: var(--pk-tabs-trigger-icon-size, 1.125rem);\n            font-size: var(--pk-tabs-trigger-icon-size, 1.125rem);\n            color: var(--pk-tabs-trigger-icon-color, inherit);\n        }\n\n        .icon ::slotted(*) {\n            display: block;\n            max-width: 100%;\n            max-height: 100%;\n            /* Kill pk-icon text-baseline nudge so logos/icons sit on the flex midline. */\n            vertical-align: 0;\n        }\n\n        .label {\n            display: inline-flex;\n            flex: var(--pk-tabs-trigger-label-flex, 0 1 auto);\n            align-items: center;\n            min-width: 0;\n            line-height: inherit;\n        }\n\n        .status {\n            margin-inline-start: var(--pk-tabs-trigger-status-margin, 0);\n            color: var(--pk-tabs-trigger-status-color, inherit);\n        }\n\n        .trigger:hover:not(:disabled):not([aria-disabled='true']):not([aria-selected='true']) {\n            border-top-color: transparent;\n            background: var(--pk-tabs-trigger-hover-bg, rgb(255 255 255 / 0.7));\n            color: var(--pk-tabs-trigger-hover-color, var(--pk-color-gray-700));\n        }\n\n        /*\n         * Focus ring is only for :focus-visible on a non-selected tab (manual\n         * activation). Selected + focus-visible must NOT draw a ring — active\n         * chrome is the underline (mouse) or is replaced by the modal focus box\n         * via --pk-tabs-trigger-focus-selected-shadow when set.\n         */\n        .trigger:focus-visible:not([aria-selected='true']) {\n            box-shadow: inset 0 0 0 2px var(--pk-color-sky-600);\n        }\n\n        .trigger:disabled,\n        .trigger[aria-disabled='true'] {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        .trigger[aria-selected='true'],\n        :host([selected]) .trigger {\n            border-top: var(--pk-tabs-trigger-selected-border-top, var(--pk-tabs-trigger-border-top, 0 solid transparent));\n            border-radius: var(--pk-tabs-trigger-selected-radius, var(--pk-radius-sm));\n            background: var(--pk-tabs-trigger-selected-bg, var(--pk-color-white));\n            color: var(--pk-tabs-trigger-selected-color, var(--pk-color-gray-800));\n            box-shadow: var(--pk-tabs-trigger-selected-shadow, 0 1px 2px rgba(31, 41, 51, 0.12));\n        }\n\n        .trigger[aria-selected='true']:hover,\n        :host([selected]) .trigger:hover {\n            background: var(--pk-tabs-trigger-selected-hover-bg, var(--pk-tabs-trigger-selected-bg, var(--pk-color-white)));\n            color: var(--pk-tabs-trigger-selected-hover-color, var(--pk-tabs-trigger-selected-color, var(--pk-color-gray-800)));\n        }\n\n        /* screen3: keyboard focus on the active tab → full inset box, no underline. */\n        .trigger[aria-selected='true']:focus-visible,\n        :host([selected]) .trigger:focus-visible {\n            box-shadow: var(\n                --pk-tabs-trigger-focus-selected-shadow,\n                var(--pk-tabs-trigger-selected-shadow, 0 0 #0000)\n            );\n        }\n\n        .trigger[aria-selected='true']:focus-visible::after,\n        :host([selected]) .trigger:focus-visible::after {\n            height: var(--pk-tabs-trigger-focus-selected-underline-height, var(--pk-tabs-trigger-underline-height, 0));\n        }\n\n        .trigger[aria-selected='true']::after,\n        :host([selected]) .trigger::after {\n            content: '';\n            position: absolute;\n            right: var(--pk-tabs-trigger-underline-inset, 15px);\n            bottom: 0;\n            left: var(--pk-tabs-trigger-underline-inset, 15px);\n            height: var(--pk-tabs-trigger-underline-height, 0);\n            /* Keep the bar above the list hairline when both meet at the clip edge. */\n            z-index: 1;\n            background: var(--pk-color-sky-600);\n            pointer-events: none;\n        }\n\n        /*\n         * Validation error chrome (v1 ModalTabs / PaneTabs text-error).\n         * Host sets data-has-errors; light-DOM text-* cannot pierce the trigger.\n         */\n        :host([data-has-errors]) {\n            --pk-tabs-trigger-color: var(--pk-color-error, #d81f23);\n            --pk-tabs-trigger-hover-color: var(--pk-color-rose-700, #be123c);\n            --pk-tabs-trigger-selected-color: var(--pk-color-error, #d81f23);\n            --pk-tabs-trigger-selected-hover-color: var(--pk-color-rose-700, #be123c);\n            --pk-tabs-trigger-icon-color: inherit;\n            --pk-tabs-trigger-status-color: inherit;\n        }\n    }\n`;\n","import { customElement } from 'lit/decorators.js';\n\nimport { PkTabBase } from './pk-tab-base.js';\nimport { pkTabStyles } from './pk-tab.styles.js';\n\n/**\n * Tab trigger — use inside `pk-tabs` with `slot=\"nav\"`.\n *\n * @slot - Tab label\n * @slot icon - Optional leading content (icon, logo, etc.)\n * @slot status - Optional trailing content (status dot, badge, etc.)\n *\n * @csspart trigger - Tab button\n * @csspart icon - Icon slot wrapper (hidden when empty)\n * @csspart label - Label slot wrapper\n * @csspart status - Status slot wrapper (hidden when empty)\n */\n@customElement('pk-tab')\nexport class PkTab extends PkTabBase {\n    static override styles = pkTabStyles;\n\n    override render() {\n        return this.renderTrigger('trigger pk-tabs__trigger');\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-tab': PkTab;\n    }\n}\n"],"mappings":";;;;;AAMA,IAAa,YAAb,cAA+B,UAAU;;;eAE7B;kBAGG;kBAGA;oBAGE;;CAKb,eAAqB;AACjB,OAAK,YAAY,cAAiC,WAAW,EAAE,OAAO;;CAG1E,cAA8B;AAC1B,MAAI,KAAK,SACL;AAGJ,OAAK,cAAc,IAAI,YAAY,iBAAiB;GAChD,QAAQ,EAAE,OAAO,KAAK,OAAO;GAC7B,SAAS;GACT,UAAU;GACb,CAAC,CAAC;;CAGP,cAAwB,OAA4B;AAChD,OAAK,cAAc,IAAI,YAAY,kBAAkB;GACjD,QAAQ;IAAE;IAAO,OAAO,KAAK;IAAO;GACpC,SAAS;GACT,UAAU;GACb,CAAC,CAAC;;CAGP,cAAwB,WAAmB;AACvC,SAAO,IAAI;;;;wBAIK,UAAU;;4BAEN,KAAK,SAAS;gCACV,KAAK,WAAW,SAAS,QAAQ;gCACjC,KAAK,WAAW,SAAS,QAAQ;2BACtC,KAAK,WAAW;gCACX,KAAK,WAAW,QAAQ;yBAC/B,KAAK,YAAY;2BACf,KAAK,cAAc;;;;;;;;;;;;;;;YApDzC,UAAU,CAAA,EAAA,UAAA,WAAA,SAAA,KAAA,EAAA;YAGV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,UAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,UAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC,CAAA,EAAA,UAAA,WAAA,cAAA,KAAA,EAAA;YAGpD,UAAU,CAAA,EAAA,UAAA,WAAA,WAAA,KAAA,EAAA;;;ACjBf,IAAa,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACgBvB,IAAA,QAAA,MAAM,cAAc,UAAU;;gBACR;;CAEzB,SAAkB;AACd,SAAO,KAAK,cAAc,2BAA2B;;;oBAL5D,cAAc,SAAS,CAAA,EAAA,MAAA"}

package/dist/chunks/pk-tab-heading-BWAB85ua.js

@@ -0,0 +1,50 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+//#region src/components/tabs/pk-tab-heading.styles.ts
+var pkTabHeadingStyles = css`
+    @layer pk-component {
+        :host {
+            display: block;
+            flex-shrink: 0;
+            width: 100%;
+        }
+
+        .heading {
+            margin: 0;
+            padding: var(--pk-tabs-heading-padding, 0.75rem 0.5rem 0.375rem);
+            color: var(--pk-tabs-heading-color, var(--pk-color-gray-400));
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-tabs-heading-font-size, 11px);
+            font-weight: var(--pk-tabs-heading-font-weight, 600);
+            line-height: 1.3;
+            letter-spacing: var(--pk-tabs-heading-letter-spacing, 0.04em);
+            text-transform: var(--pk-tabs-heading-text-transform, uppercase);
+            user-select: none;
+            pointer-events: none;
+        }
+    }
+`;
+//#endregion
+//#region src/components/tabs/pk-tab-heading.ts
+var PkTabHeading = class PkTabHeading extends PkElement {
+	static {
+		this.styles = pkTabHeadingStyles;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "presentation");
+	}
+	render() {
+		return html`
+            <div part="heading" class="heading">
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+PkTabHeading = __decorate([customElement("pk-tab-heading")], PkTabHeading);
+//#endregion
+export { PkTabHeading as t };
+
+//# sourceMappingURL=pk-tab-heading-BWAB85ua.js.map

package/dist/chunks/pk-tab-heading-BWAB85ua.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-tab-heading-BWAB85ua.js","names":[],"sources":["../../src/components/tabs/pk-tab-heading.styles.ts","../../src/components/tabs/pk-tab-heading.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkTabHeadingStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            flex-shrink: 0;\n            width: 100%;\n        }\n\n        .heading {\n            margin: 0;\n            padding: var(--pk-tabs-heading-padding, 0.75rem 0.5rem 0.375rem);\n            color: var(--pk-tabs-heading-color, var(--pk-color-gray-400));\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-tabs-heading-font-size, 11px);\n            font-weight: var(--pk-tabs-heading-font-weight, 600);\n            line-height: 1.3;\n            letter-spacing: var(--pk-tabs-heading-letter-spacing, 0.04em);\n            text-transform: var(--pk-tabs-heading-text-transform, uppercase);\n            user-select: none;\n            pointer-events: none;\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkTabHeadingStyles } from './pk-tab-heading.styles.js';\n\n/**\n * Non-interactive group heading inside `pk-tabs` `slot=\"nav\"`.\n * Use between `pk-tab` triggers (especially with `variant=\"sidebar\"`).\n *\n * @slot - Heading text\n *\n * @csspart heading - Heading container\n */\n@customElement('pk-tab-heading')\nexport class PkTabHeading extends PkElement {\n    static override styles = pkTabHeadingStyles;\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n        // Keep out of the tablist accessibility tree — only pk-tab triggers are tabs.\n        this.setAttribute('role', 'presentation');\n    }\n\n    override render() {\n        return html`\n            <div part=\"heading\" class=\"heading\">\n                <slot></slot>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-tab-heading': PkTabHeading;\n    }\n}\n"],"mappings":";;;;AAEA,IAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;ACa9B,IAAA,eAAA,MAAM,qBAAqB,UAAU;;gBACf;;CAEzB,oBAAmC;AAC/B,QAAM,mBAAmB;AAEzB,OAAK,aAAa,QAAQ,eAAe;;CAG7C,SAAkB;AACd,SAAO,IAAI;;;;;;;2BAXlB,cAAc,iBAAiB,CAAA,EAAA,aAAA"}

package/dist/chunks/pk-tab-panel-Q3Pqyq-f.js

@@ -0,0 +1,86 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/components/tabs/pk-tab-panel-base.ts
+/** Shared tab panel behaviour for all tab variants. */
+var PkTabPanelBase = class extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.hidden = true;
+	}
+	renderPanel(className) {
+		return html`
+            <div
+                part="content"
+                class=${className}
+                role="tabpanel"
+                id=${this.tabId ?? nothing}
+                aria-labelledby=${this.tabId ?? nothing}
+                aria-hidden=${this.hidden ? "true" : "false"}
+                tabindex=${this.hidden ? nothing : "0"}
+            >
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+__decorate([property()], PkTabPanelBase.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkTabPanelBase.prototype, "hidden", void 0);
+__decorate([property()], PkTabPanelBase.prototype, "tabId", void 0);
+//#endregion
+//#region src/components/tabs/pk-tab-panel.styles.ts
+var pkTabPanelStyles = css`
+    @layer pk-component {
+        :host {
+            /* Flex column so .content can own overflow when the host is height-capped
+             * by a modal/pane parent (flex: 1 1 0% + min-height: 0). */
+            display: flex;
+            flex-direction: column;
+            flex: var(--pk-tabs-panel-flex, none);
+            min-height: var(--pk-tabs-panel-min-height, 0);
+            min-width: 0;
+            overflow: hidden;
+        }
+
+        :host([hidden]) {
+            display: none !important;
+        }
+
+        .content {
+            flex: 1 1 auto;
+            min-height: 0;
+            padding: var(--pk-tabs-panel-padding, 0);
+            overflow-y: auto;
+            border-radius: var(--pk-tabs-panel-radius, 0);
+            background: var(--pk-tabs-panel-bg, transparent);
+            outline: none;
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-tabs-panel-font-size, var(--pk-font-size-base));
+            line-height: var(--pk-line-height);
+        }
+
+        .content:focus-visible {
+            box-shadow: inset 0 0 0 2px var(--pk-color-sky-600);
+            border-radius: var(--pk-radius-sm);
+        }
+    }
+`;
+//#endregion
+//#region src/components/tabs/pk-tab-panel.ts
+var PkTabPanel = class PkTabPanel extends PkTabPanelBase {
+	static {
+		this.styles = pkTabPanelStyles;
+	}
+	render() {
+		return this.renderPanel("content pk-tabs__content");
+	}
+};
+PkTabPanel = __decorate([customElement("pk-tab-panel")], PkTabPanel);
+//#endregion
+export { PkTabPanel as t };
+
+//# sourceMappingURL=pk-tab-panel-Q3Pqyq-f.js.map

package/dist/chunks/pk-tab-panel-Q3Pqyq-f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-tab-panel-Q3Pqyq-f.js","names":[],"sources":["../../src/components/tabs/pk-tab-panel-base.ts","../../src/components/tabs/pk-tab-panel.styles.ts","../../src/components/tabs/pk-tab-panel.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\n\n/** Shared tab panel behaviour for all tab variants. */\nexport class PkTabPanelBase extends PkElement {\n    @property()\n    value = '';\n\n    @property({ type: Boolean, reflect: true })\n    hidden = true;\n\n    @property()\n    tabId?: string;\n\n    protected renderPanel(className: string) {\n        return html`\n            <div\n                part=\"content\"\n                class=${className}\n                role=\"tabpanel\"\n                id=${this.tabId ?? nothing}\n                aria-labelledby=${this.tabId ?? nothing}\n                aria-hidden=${this.hidden ? 'true' : 'false'}\n                tabindex=${this.hidden ? nothing : '0'}\n            >\n                <slot></slot>\n            </div>\n        `;\n    }\n}\n","import { css } from 'lit';\n\nexport const pkTabPanelStyles = css`\n    @layer pk-component {\n        :host {\n            /* Flex column so .content can own overflow when the host is height-capped\n             * by a modal/pane parent (flex: 1 1 0% + min-height: 0). */\n            display: flex;\n            flex-direction: column;\n            flex: var(--pk-tabs-panel-flex, none);\n            min-height: var(--pk-tabs-panel-min-height, 0);\n            min-width: 0;\n            overflow: hidden;\n        }\n\n        :host([hidden]) {\n            display: none !important;\n        }\n\n        .content {\n            flex: 1 1 auto;\n            min-height: 0;\n            padding: var(--pk-tabs-panel-padding, 0);\n            overflow-y: auto;\n            border-radius: var(--pk-tabs-panel-radius, 0);\n            background: var(--pk-tabs-panel-bg, transparent);\n            outline: none;\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-tabs-panel-font-size, var(--pk-font-size-base));\n            line-height: var(--pk-line-height);\n        }\n\n        .content:focus-visible {\n            box-shadow: inset 0 0 0 2px var(--pk-color-sky-600);\n            border-radius: var(--pk-radius-sm);\n        }\n    }\n`;\n","import { customElement } from 'lit/decorators.js';\n\nimport { PkTabPanelBase } from './pk-tab-panel-base.js';\nimport { pkTabPanelStyles } from './pk-tab-panel.styles.js';\n\n/**\n * Tab panel — use inside `pk-tabs` default slot.\n *\n * @slot - Panel content\n *\n * @csspart content - Panel container\n */\n@customElement('pk-tab-panel')\nexport class PkTabPanel extends PkTabPanelBase {\n    static override styles = pkTabPanelStyles;\n\n    override render() {\n        return this.renderPanel('content pk-tabs__content');\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-tab-panel': PkTabPanel;\n    }\n}\n"],"mappings":";;;;;AAMA,IAAa,iBAAb,cAAoC,UAAU;;;eAElC;gBAGC;;CAKT,YAAsB,WAAmB;AACrC,SAAO,IAAI;;;wBAGK,UAAU;;qBAEb,KAAK,SAAS,QAAQ;kCACT,KAAK,SAAS,QAAQ;8BAC1B,KAAK,SAAS,SAAS,QAAQ;2BAClC,KAAK,SAAS,UAAU,IAAI;;;;;;;YAlBlD,UAAU,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;YAGV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,UAAA,KAAA,EAAA;YAG1C,UAAU,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;;;ACXf,IAAa,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACW5B,IAAA,aAAA,MAAM,mBAAmB,eAAe;;gBAClB;;CAEzB,SAAkB;AACd,SAAO,KAAK,YAAY,2BAA2B;;;yBAL1D,cAAc,eAAe,CAAA,EAAA,WAAA"}