@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-option-C3Zqmu3z.js

@@ -0,0 +1,312 @@
+import { t as icons_exports } from "./icons-BR8JcQj2.js";
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
+import { css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+//#region src/utils/highlight-text.ts
+/** Split label text into matched/unmatched segments for typeahead highlighting. */
+function splitHighlightParts(text, search) {
+	const label = String(text ?? "");
+	const query = String(search ?? "").trim();
+	if (!query) return [{
+		text: label,
+		match: false
+	}];
+	const lowerLabel = label.toLowerCase();
+	const lowerQuery = query.toLowerCase();
+	const parts = [];
+	let cursor = 0;
+	let matchIndex = lowerLabel.indexOf(lowerQuery);
+	while (matchIndex !== -1) {
+		if (matchIndex > cursor) parts.push({
+			text: label.slice(cursor, matchIndex),
+			match: false
+		});
+		parts.push({
+			text: label.slice(matchIndex, matchIndex + query.length),
+			match: true
+		});
+		cursor = matchIndex + query.length;
+		matchIndex = lowerLabel.indexOf(lowerQuery, cursor);
+	}
+	if (cursor < label.length) parts.push({
+		text: label.slice(cursor),
+		match: false
+	});
+	return parts.length > 0 ? parts : [{
+		text: label,
+		match: false
+	}];
+}
+//#endregion
+//#region src/components/select/pk-option.styles.ts
+var pkOptionStyles = css`
+    @layer pk-component {
+        :host {
+            display: block;
+        }
+
+        .option {
+            position: relative;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            width: 100%;
+            margin: 0;
+            min-height: var(--pk-select-item-min-height, var(--pk-input-height));
+            padding-block: var(--pk-select-item-padding-block, 6px);
+            padding-inline-start: var(--pk-select-item-padding-inline, 10px);
+            padding-inline-end: var(--pk-select-item-padding-inline-end, 2rem);
+            border: var(--pk-select-trigger-border-width, 1px) solid transparent;
+            background: transparent;
+            /* Craft CP body text (~gray-700), not gray-900. */
+            color: var(--pk-color-gray-700);
+            font: inherit;
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-select-item-font-size, var(--pk-font-size-base));
+            line-height: var(--pk-select-item-line-height, 1.4);
+            text-align: left;
+            white-space: nowrap;
+            cursor: default;
+            user-select: none;
+            outline: none;
+            box-sizing: border-box;
+        }
+
+        .start {
+            display: none;
+            flex: 0 0 auto;
+            align-items: center;
+        }
+
+        :host([data-has-start]) .start {
+            display: inline-flex;
+        }
+
+        :host([hidden]) {
+            display: none !important;
+        }
+
+        .option:focus-visible,
+        :host([highlighted]) .option {
+            background: var(--pk-color-slate-100);
+        }
+
+        :host([disabled]) .option,
+        .option[aria-disabled='true'] {
+            pointer-events: none;
+            opacity: 0.5;
+        }
+
+        .check {
+            position: absolute;
+            inset-inline-end: var(--pk-select-item-indicator-inset, 0.5rem);
+            top: 50%;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            width: var(--pk-select-item-indicator-size, 0.75rem);
+            height: var(--pk-select-item-indicator-size, 0.75rem);
+            color: var(--pk-color-gray-700);
+            pointer-events: none;
+            transform: translateY(-50%);
+            line-height: 0;
+        }
+
+        :host([selected]) .check {
+            display: inline-flex;
+        }
+
+        .check svg {
+            display: block;
+            width: var(--pk-select-item-indicator-size, 0.75rem);
+            height: var(--pk-select-item-indicator-size, 0.75rem);
+            flex-shrink: 0;
+            pointer-events: none;
+        }
+
+        .label {
+            flex: 1;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            /* Allow custom multi-line option layouts (title + subtitle) to stack. */
+            white-space: normal;
+        }
+
+        .match {
+            padding: 0;
+            border-radius: 2px;
+            background: var(--pk-color-blue-100);
+            color: inherit;
+        }
+    }
+`;
+//#endregion
+//#region src/components/select/pk-option.ts
+var CHECK_ICON = renderIconHtml(icons_exports.check);
+var PkOption = class PkOption extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.label = "";
+		this.disabled = false;
+		this.selected = false;
+		this.highlighted = false;
+		this.hidden = false;
+		this.focusIndex = -1;
+		this.optionId = "";
+		this.matchQuery = "";
+	}
+	static {
+		this.styles = pkOptionStyles;
+	}
+	focusControl(preventScroll = true) {
+		this.shadowRoot?.querySelector(".option")?.focus({ preventScroll });
+	}
+	/**
+	* Label for the closed combobox/select value.
+	* Prefers the `label` attribute when set; otherwise default-slot text
+	* (excluding `slot="start"`), joined with spaces for multi-node layouts.
+	*/
+	getLabel() {
+		if (this.label.trim()) return this.label.trim();
+		const labelSlot = this.shadowRoot?.querySelector("slot:not([name])");
+		if (!labelSlot) return this.textContent?.trim() ?? this.value;
+		return labelSlot.assignedNodes().map((node) => (node.textContent ?? "").trim()).filter(Boolean).join(" ").trim();
+	}
+	/** Full default-slot text for typeahead matching (includes subtitle lines). */
+	getSearchText() {
+		const labelSlot = this.shadowRoot?.querySelector("slot:not([name])");
+		if (!labelSlot) return this.getLabel();
+		return labelSlot.assignedNodes().map((node) => (node.textContent ?? "").trim()).filter(Boolean).join(" ").trim() || this.getLabel();
+	}
+	/** True when the default slot has element children (custom multi-line / rich layouts). */
+	hasRichLabelContent() {
+		return [...this.children].some((node) => {
+			if (!(node instanceof HTMLElement)) return false;
+			return !node.slot || node.slot === "";
+		});
+	}
+	/** Light-DOM elements assigned to the start decoration slot. */
+	getStartElements() {
+		return [...this.querySelectorAll(":scope > [slot=\"start\"]")].filter((node) => node instanceof HTMLElement);
+	}
+	firstUpdated() {
+		(this.shadowRoot?.querySelector("slot[name=\"start\"]"))?.addEventListener("slotchange", () => this.syncStartDecoration());
+		this.syncStartDecoration();
+	}
+	syncStartDecoration() {
+		this.toggleAttribute("data-has-start", this.getStartElements().length > 0);
+	}
+	handleClick() {
+		if (this.disabled) return;
+		this.dispatchEvent(new CustomEvent("pk-option-select", {
+			detail: { value: this.value },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleMouseEnter() {
+		if (this.disabled || this.hidden) return;
+		this.dispatchEvent(new CustomEvent("pk-option-highlight", {
+			detail: { value: this.value },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleKeyDown(event) {
+		if (!new Set([
+			"ArrowDown",
+			"ArrowUp",
+			"ArrowLeft",
+			"ArrowRight",
+			"Home",
+			"End",
+			"Enter",
+			" ",
+			"Escape"
+		]).has(event.key)) return;
+		const owner = this.closest("pk-select, pk-combobox");
+		const panel = owner ? null : this.closest("[role=\"listbox\"]");
+		if (!owner && !panel) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const keydownEvent = new CustomEvent("pk-listbox-keydown", {
+			detail: { keyboardEvent: event },
+			bubbles: true
+		});
+		if (owner) {
+			owner.dispatchEvent(keydownEvent);
+			return;
+		}
+		panel.dispatchEvent(keydownEvent);
+	}
+	renderLabel() {
+		const query = this.matchQuery.trim();
+		if (!query || this.hasRichLabelContent()) return html`
+                <span part="label" class="label">
+                    <slot></slot>
+                </span>
+            `;
+		return html`
+            <span part="label" class="label">
+                ${splitHighlightParts(this.getLabel(), query).map((part) => part.match ? html`<mark class="match">${part.text}</mark>` : html`<span>${part.text}</span>`)}
+            </span>
+        `;
+	}
+	render() {
+		return html`
+            <button
+                part="option"
+                type="button"
+                class="option"
+                role="option"
+                id=${this.optionId || nothing}
+                ?disabled=${this.disabled}
+                aria-disabled=${this.disabled ? "true" : nothing}
+                aria-selected=${this.selected ? "true" : "false"}
+                tabindex=${this.focusIndex}
+                @click=${this.handleClick}
+                @mouseenter=${this.handleMouseEnter}
+                @keydown=${this.handleKeyDown}
+            >
+                <span part="start" class="start">
+                    <slot name="start"></slot>
+                </span>
+                ${this.renderLabel()}
+                <span part="check" class="check" aria-hidden="true">${unsafeSVG(CHECK_ICON)}</span>
+            </button>
+        `;
+	}
+};
+__decorate([property()], PkOption.prototype, "value", void 0);
+__decorate([property()], PkOption.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkOption.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkOption.prototype, "selected", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkOption.prototype, "highlighted", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkOption.prototype, "hidden", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "focus-index"
+})], PkOption.prototype, "focusIndex", void 0);
+__decorate([property()], PkOption.prototype, "optionId", void 0);
+__decorate([property({ attribute: false })], PkOption.prototype, "matchQuery", void 0);
+PkOption = __decorate([customElement("pk-option")], PkOption);
+//#endregion
+export { PkOption as t };
+
+//# sourceMappingURL=pk-option-C3Zqmu3z.js.map

package/dist/chunks/pk-option-C3Zqmu3z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-option-C3Zqmu3z.js","names":[],"sources":["../../src/utils/highlight-text.ts","../../src/components/select/pk-option.styles.ts","../../src/components/select/pk-option.ts"],"sourcesContent":["export type HighlightPart = {\n    text: string;\n    match: boolean;\n};\n\n/** Split label text into matched/unmatched segments for typeahead highlighting. */\nexport function splitHighlightParts(text: string, search: string): HighlightPart[] {\n    const label = String(text ?? '');\n    const query = String(search ?? '').trim();\n\n    if (!query) {\n        return [{ text: label, match: false }];\n    }\n\n    const lowerLabel = label.toLowerCase();\n    const lowerQuery = query.toLowerCase();\n    const parts: HighlightPart[] = [];\n    let cursor = 0;\n    let matchIndex = lowerLabel.indexOf(lowerQuery);\n\n    while (matchIndex !== -1) {\n        if (matchIndex > cursor) {\n            parts.push({\n                text: label.slice(cursor, matchIndex),\n                match: false,\n            });\n        }\n\n        parts.push({\n            text: label.slice(matchIndex, matchIndex + query.length),\n            match: true,\n        });\n\n        cursor = matchIndex + query.length;\n        matchIndex = lowerLabel.indexOf(lowerQuery, cursor);\n    }\n\n    if (cursor < label.length) {\n        parts.push({\n            text: label.slice(cursor),\n            match: false,\n        });\n    }\n\n    return parts.length > 0 ? parts : [{ text: label, match: false }];\n}\n","import { css } from 'lit';\n\nexport const pkOptionStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n        }\n\n        .option {\n            position: relative;\n            display: flex;\n            align-items: center;\n            gap: 0.5rem;\n            width: 100%;\n            margin: 0;\n            min-height: var(--pk-select-item-min-height, var(--pk-input-height));\n            padding-block: var(--pk-select-item-padding-block, 6px);\n            padding-inline-start: var(--pk-select-item-padding-inline, 10px);\n            padding-inline-end: var(--pk-select-item-padding-inline-end, 2rem);\n            border: var(--pk-select-trigger-border-width, 1px) solid transparent;\n            background: transparent;\n            /* Craft CP body text (~gray-700), not gray-900. */\n            color: var(--pk-color-gray-700);\n            font: inherit;\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-select-item-font-size, var(--pk-font-size-base));\n            line-height: var(--pk-select-item-line-height, 1.4);\n            text-align: left;\n            white-space: nowrap;\n            cursor: default;\n            user-select: none;\n            outline: none;\n            box-sizing: border-box;\n        }\n\n        .start {\n            display: none;\n            flex: 0 0 auto;\n            align-items: center;\n        }\n\n        :host([data-has-start]) .start {\n            display: inline-flex;\n        }\n\n        :host([hidden]) {\n            display: none !important;\n        }\n\n        .option:focus-visible,\n        :host([highlighted]) .option {\n            background: var(--pk-color-slate-100);\n        }\n\n        :host([disabled]) .option,\n        .option[aria-disabled='true'] {\n            pointer-events: none;\n            opacity: 0.5;\n        }\n\n        .check {\n            position: absolute;\n            inset-inline-end: var(--pk-select-item-indicator-inset, 0.5rem);\n            top: 50%;\n            display: none;\n            align-items: center;\n            justify-content: center;\n            width: var(--pk-select-item-indicator-size, 0.75rem);\n            height: var(--pk-select-item-indicator-size, 0.75rem);\n            color: var(--pk-color-gray-700);\n            pointer-events: none;\n            transform: translateY(-50%);\n            line-height: 0;\n        }\n\n        :host([selected]) .check {\n            display: inline-flex;\n        }\n\n        .check svg {\n            display: block;\n            width: var(--pk-select-item-indicator-size, 0.75rem);\n            height: var(--pk-select-item-indicator-size, 0.75rem);\n            flex-shrink: 0;\n            pointer-events: none;\n        }\n\n        .label {\n            flex: 1;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            /* Allow custom multi-line option layouts (title + subtitle) to stack. */\n            white-space: normal;\n        }\n\n        .match {\n            padding: 0;\n            border-radius: 2px;\n            background: var(--pk-color-blue-100);\n            color: inherit;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { check, renderIconHtml } from '../../icons/index.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport { splitHighlightParts } from '../../utils/highlight-text.js';\nimport { pkOptionStyles } from './pk-option.styles.js';\n\nconst CHECK_ICON = renderIconHtml(check);\n\n/**\n * Select option — use inside `pk-select` or `pk-combobox`.\n *\n * @slot start - Presentational decoration before the label (e.g. `pk-status`).\n * @slot - Option label\n *\n * @csspart start - Start decoration container\n * @csspart option - Option button\n * @csspart label - Option label\n * @csspart check - Selected-state check indicator\n */\n@customElement('pk-option')\nexport class PkOption extends PkElement {\n    static override styles = pkOptionStyles;\n\n    @property()\n    value = '';\n\n    /**\n     * Optional short label for the closed trigger / filter identity (v1 itemToStringLabel).\n     * When set, preferred over concatenating rich default-slot text (title + subtitle).\n     */\n    @property()\n    label = '';\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    selected = false;\n\n    @property({ type: Boolean, reflect: true })\n    highlighted = false;\n\n    @property({ type: Boolean, reflect: true })\n    hidden = false;\n\n    @property({ type: Number, attribute: 'focus-index' })\n    focusIndex = -1;\n\n    @property()\n    optionId = '';\n\n    /** When set, the label renders with matching query text highlighted (combobox filter). */\n    @property({ attribute: false })\n    matchQuery = '';\n\n    focusControl(preventScroll = true): void {\n        this.shadowRoot?.querySelector<HTMLButtonElement>('.option')?.focus({ preventScroll });\n    }\n\n    /**\n     * Label for the closed combobox/select value.\n     * Prefers the `label` attribute when set; otherwise default-slot text\n     * (excluding `slot=\"start\"`), joined with spaces for multi-node layouts.\n     */\n    getLabel(): string {\n        if (this.label.trim()) {\n            return this.label.trim();\n        }\n\n        const labelSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n        if (!labelSlot) {\n            return this.textContent?.trim() ?? this.value;\n        }\n\n        // Join with spaces so multi-line custom labels (\"Link\" + \"Craft CMS\") do not\n        // concatenate into \"LinkCraft CMS\" when no explicit `label` is set.\n        return labelSlot.assignedNodes()\n            .map((node) => (node.textContent ?? '').trim())\n            .filter(Boolean)\n            .join(' ')\n            .trim();\n    }\n\n    /** Full default-slot text for typeahead matching (includes subtitle lines). */\n    getSearchText(): string {\n        const labelSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n        if (!labelSlot) {\n            return this.getLabel();\n        }\n\n        const fromSlot = labelSlot.assignedNodes()\n            .map((node) => (node.textContent ?? '').trim())\n            .filter(Boolean)\n            .join(' ')\n            .trim();\n\n        return fromSlot || this.getLabel();\n    }\n\n    /** True when the default slot has element children (custom multi-line / rich layouts). */\n    private hasRichLabelContent(): boolean {\n        return [...this.children].some((node) => {\n            if (!(node instanceof HTMLElement)) {\n                return false;\n            }\n\n            // Named slots (e.g. start) are not part of the label.\n            return !node.slot || node.slot === '';\n        });\n    }\n\n    /** Light-DOM elements assigned to the start decoration slot. */\n    getStartElements(): HTMLElement[] {\n        return [...this.querySelectorAll(':scope > [slot=\"start\"]')].filter(\n            (node): node is HTMLElement => node instanceof HTMLElement,\n        );\n    }\n\n    override firstUpdated(): void {\n        const startSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"start\"]');\n\n        startSlot?.addEventListener('slotchange', () => this.syncStartDecoration());\n        this.syncStartDecoration();\n    }\n\n    private syncStartDecoration(): void {\n        this.toggleAttribute('data-has-start', this.getStartElements().length > 0);\n    }\n\n    private handleClick(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.dispatchEvent(new CustomEvent('pk-option-select', {\n            detail: { value: this.value },\n            bubbles: true,\n            composed: true,\n        }));\n    }\n\n    private handleMouseEnter(): void {\n        if (this.disabled || this.hidden) {\n            return;\n        }\n\n        this.dispatchEvent(new CustomEvent('pk-option-highlight', {\n            detail: { value: this.value },\n            bubbles: true,\n            composed: true,\n        }));\n    }\n\n    private handleKeyDown(event: KeyboardEvent): void {\n        const navKeys = new Set([\n            'ArrowDown',\n            'ArrowUp',\n            'ArrowLeft',\n            'ArrowRight',\n            'Home',\n            'End',\n            'Enter',\n            ' ',\n            'Escape',\n        ]);\n\n        if (!navKeys.has(event.key)) {\n            return;\n        }\n\n        const owner = this.closest('pk-select, pk-combobox');\n        const panel = owner ? null : this.closest('[role=\"listbox\"]');\n\n        if (!owner && !panel) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        const keydownEvent = new CustomEvent('pk-listbox-keydown', {\n            detail: { keyboardEvent: event },\n            bubbles: true,\n        });\n\n        if (owner) {\n            owner.dispatchEvent(keydownEvent);\n            return;\n        }\n\n        panel!.dispatchEvent(keydownEvent);\n    }\n\n    private renderLabel() {\n        const query = this.matchQuery.trim();\n        // Flat highlight replaces the default slot — that collapses custom layouts\n        // (title + subtitle) into one run when filtering. Keep the slot for rich content.\n        if (!query || this.hasRichLabelContent()) {\n            return html`\n                <span part=\"label\" class=\"label\">\n                    <slot></slot>\n                </span>\n            `;\n        }\n\n        const label = this.getLabel();\n        const parts = splitHighlightParts(label, query);\n\n        return html`\n            <span part=\"label\" class=\"label\">\n                ${parts.map((part) => part.match\n                    ? html`<mark class=\"match\">${part.text}</mark>`\n                    : html`<span>${part.text}</span>`)}\n            </span>\n        `;\n    }\n\n    override render() {\n        return html`\n            <button\n                part=\"option\"\n                type=\"button\"\n                class=\"option\"\n                role=\"option\"\n                id=${this.optionId || nothing}\n                ?disabled=${this.disabled}\n                aria-disabled=${this.disabled ? 'true' : nothing}\n                aria-selected=${this.selected ? 'true' : 'false'}\n                tabindex=${this.focusIndex}\n                @click=${this.handleClick}\n                @mouseenter=${this.handleMouseEnter}\n                @keydown=${this.handleKeyDown}\n            >\n                <span part=\"start\" class=\"start\">\n                    <slot name=\"start\"></slot>\n                </span>\n                ${this.renderLabel()}\n                <span part=\"check\" class=\"check\" aria-hidden=\"true\">${unsafeSVG(CHECK_ICON)}</span>\n            </button>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-option': PkOption;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/pk-option-group-CbI56A3T.js

@@ -0,0 +1,72 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { i as uniqueId } from "./focus-aa5dlv8k.js";
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/components/select/pk-option-group.styles.ts
+var pkOptionGroupStyles = css`
+    @layer pk-component {
+        :host {
+            display: block;
+        }
+
+        /* Hard hex fallbacks: when groups portal outside pk-select, size-token
+         * vars / theme tokens may be absent and invalid color inherits option black.
+         * Weight/color match v1 ComboboxLabel / SelectLabel (text-slate-700, no font-medium). */
+        .label {
+            padding-block-start: var(--pk-select-group-label-padding-block-start, 8px);
+            padding-block-end: var(--pk-select-group-label-padding-block-end, 2px);
+            padding-inline: var(--pk-select-item-padding-inline, 10px);
+            color: var(--pk-select-group-label-color, var(--pk-color-slate-700, rgba(96, 125, 159, 0.7)));
+            font-family: var(--pk-font-family);
+            /* Default matches v1 ComboboxLabel/SelectLabel text-xs (12px). */
+            font-size: var(--pk-select-group-label-font-size, 12px);
+            font-weight: 400;
+            line-height: 1.3;
+            /* Light-DOM ancestors (e.g. Formie empty dropzone text-center) must not center labels. */
+            text-align: left;
+            user-select: none;
+            pointer-events: none;
+        }
+
+        :host([hidden]),
+        :host([data-pk-filter-empty]) {
+            display: none !important;
+        }
+    }
+`;
+//#endregion
+//#region src/components/select/pk-option-group.ts
+var PkOptionGroup = class PkOptionGroup extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.hidden = false;
+		this.labelId = uniqueId("pk-option-group-label");
+	}
+	static {
+		this.styles = pkOptionGroupStyles;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "group");
+		this.setAttribute("aria-labelledby", this.labelId);
+	}
+	render() {
+		return html`
+            <div part="label" class="label" id=${this.labelId}>${this.label}</div>
+            <div role="presentation">
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+__decorate([property({ reflect: true })], PkOptionGroup.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkOptionGroup.prototype, "hidden", void 0);
+PkOptionGroup = __decorate([customElement("pk-option-group")], PkOptionGroup);
+//#endregion
+export { PkOptionGroup as t };
+
+//# sourceMappingURL=pk-option-group-CbI56A3T.js.map

package/dist/chunks/pk-option-group-CbI56A3T.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-option-group-CbI56A3T.js","names":[],"sources":["../../src/components/select/pk-option-group.styles.ts","../../src/components/select/pk-option-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkOptionGroupStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n        }\n\n        /* Hard hex fallbacks: when groups portal outside pk-select, size-token\n         * vars / theme tokens may be absent and invalid color inherits option black.\n         * Weight/color match v1 ComboboxLabel / SelectLabel (text-slate-700, no font-medium). */\n        .label {\n            padding-block-start: var(--pk-select-group-label-padding-block-start, 8px);\n            padding-block-end: var(--pk-select-group-label-padding-block-end, 2px);\n            padding-inline: var(--pk-select-item-padding-inline, 10px);\n            color: var(--pk-select-group-label-color, var(--pk-color-slate-700, rgba(96, 125, 159, 0.7)));\n            font-family: var(--pk-font-family);\n            /* Default matches v1 ComboboxLabel/SelectLabel text-xs (12px). */\n            font-size: var(--pk-select-group-label-font-size, 12px);\n            font-weight: 400;\n            line-height: 1.3;\n            /* Light-DOM ancestors (e.g. Formie empty dropzone text-center) must not center labels. */\n            text-align: left;\n            user-select: none;\n            pointer-events: none;\n        }\n\n        :host([hidden]),\n        :host([data-pk-filter-empty]) {\n            display: none !important;\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { pkOptionGroupStyles } from './pk-option-group.styles.js';\n\n/**\n * Visual option group for `pk-select` —  listbox grouping pattern.\n *\n * @slot - `pk-option` items in this group\n *\n * @csspart label - Group label\n */\n@customElement('pk-option-group')\nexport class PkOptionGroup extends PkElement {\n    static override styles = pkOptionGroupStyles;\n\n    @property({ reflect: true })\n    label = '';\n\n    @property({ type: Boolean, reflect: true })\n    hidden = false;\n\n    private readonly labelId = uniqueId('pk-option-group-label');\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n        this.setAttribute('role', 'group');\n        this.setAttribute('aria-labelledby', this.labelId);\n    }\n\n    override render() {\n        return html`\n            <div part=\"label\" class=\"label\" id=${this.labelId}>${this.label}</div>\n            <div role=\"presentation\">\n                <slot></slot>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-option-group': PkOptionGroup;\n    }\n}\n"],"mappings":";;;;;AAEA,IAAa,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACa/B,IAAA,gBAAA,MAAM,sBAAsB,UAAU;;;eAIjC;gBAGC;iBAEkB,SAAS,wBAAwB;;;gBARnC;;CAUzB,oBAAmC;AAC/B,QAAM,mBAAmB;AACzB,OAAK,aAAa,QAAQ,QAAQ;AAClC,OAAK,aAAa,mBAAmB,KAAK,QAAQ;;CAGtD,SAAkB;AACd,SAAO,IAAI;iDAC8B,KAAK,QAAQ,GAAG,KAAK,MAAM;;;;;;;YAhBvE,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,cAAA,WAAA,SAAA,KAAA,EAAA;YAG3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,UAAA,KAAA,EAAA;4BAP9C,cAAc,kBAAkB,CAAA,EAAA,cAAA"}