@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-dropdown-item-BFyjtsL5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-dropdown-item-BFyjtsL5.js","names":[],"sources":["../../src/components/dropdown-menu/dropdown-menu-size.styles.ts","../../src/components/dropdown-menu/pk-dropdown-item.styles.ts","../../src/components/dropdown-menu/pk-dropdown-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nconst dropdownMenuSizeTokens = {\n    default: css`\n        --pk-dropdown-item-padding-block: 8px;\n        --pk-dropdown-item-padding-inline: 12px;\n        --pk-dropdown-item-gap: 0.625rem;\n        --pk-dropdown-item-font-size: var(--pk-font-size-base);\n        --pk-dropdown-item-icon-size: 12px;\n        --pk-dropdown-label-padding-inline: 12px;\n        --pk-dropdown-label-font-size: 13px;\n        --pk-dropdown-details-font-size: var(--pk-font-size-sm);\n    `,\n    xs: css`\n        --pk-dropdown-item-padding-block: 3px;\n        --pk-dropdown-item-padding-inline: 8px;\n        --pk-dropdown-item-gap: 0.375rem;\n        --pk-dropdown-item-font-size: 12px;\n        --pk-dropdown-item-icon-size: 10px;\n        --pk-dropdown-label-padding-inline: 8px;\n        --pk-dropdown-label-font-size: 11px;\n        --pk-dropdown-details-font-size: 11px;\n    `,\n    sm: css`\n        --pk-dropdown-item-padding-block: 4px;\n        --pk-dropdown-item-padding-inline: 10px;\n        --pk-dropdown-item-gap: 0.4375rem;\n        --pk-dropdown-item-font-size: 13px;\n        --pk-dropdown-item-icon-size: 12px;\n        --pk-dropdown-label-padding-inline: 10px;\n        --pk-dropdown-label-font-size: 11px;\n        --pk-dropdown-details-font-size: 12px;\n    `,\n    lg: css`\n        --pk-dropdown-item-padding-block: 10px;\n        --pk-dropdown-item-padding-inline: 14px;\n        --pk-dropdown-item-gap: 0.75rem;\n        --pk-dropdown-item-font-size: 16px;\n        --pk-dropdown-item-icon-size: 14px;\n        --pk-dropdown-label-padding-inline: 14px;\n        --pk-dropdown-label-font-size: 14px;\n        --pk-dropdown-details-font-size: var(--pk-font-size-sm);\n    `,\n    xl: css`\n        --pk-dropdown-item-padding-block: 12px;\n        --pk-dropdown-item-padding-inline: 16px;\n        --pk-dropdown-item-gap: 0.75rem;\n        --pk-dropdown-item-font-size: 18px;\n        --pk-dropdown-item-icon-size: 16px;\n        --pk-dropdown-label-padding-inline: 16px;\n        --pk-dropdown-label-font-size: 15px;\n        --pk-dropdown-details-font-size: var(--pk-font-size-base);\n    `,\n} as const;\n\n/** Size tokens on `pk-dropdown-menu` — cascades to light-DOM menu children. */\nexport const dropdownMenuHostSizeStyles = css`\n    @layer pk-component {\n        :host {\n            ${dropdownMenuSizeTokens.default}\n        }\n\n        :host([size='xs']) {\n            ${dropdownMenuSizeTokens.xs}\n        }\n\n        :host([size='sm']) {\n            ${dropdownMenuSizeTokens.sm}\n        }\n\n        :host([size='lg']) {\n            ${dropdownMenuSizeTokens.lg}\n        }\n\n        :host([size='xl']) {\n            ${dropdownMenuSizeTokens.xl}\n        }\n    }\n`;\n\n/**\n * Size tokens on popup panels.\n * Do not include bare `:host` here; importing this in `pk-dropdown-item`\n * would reset every item back to the default size.\n */\nexport const dropdownMenuPanelSizeStyles = css`\n    @layer pk-component {\n        .panel[data-size='default'],\n        .submenu-panel[data-size='default'] {\n            ${dropdownMenuSizeTokens.default}\n        }\n\n        .panel[data-size='xs'],\n        .submenu-panel[data-size='xs'] {\n            ${dropdownMenuSizeTokens.xs}\n        }\n\n        .panel[data-size='sm'],\n        .submenu-panel[data-size='sm'] {\n            ${dropdownMenuSizeTokens.sm}\n        }\n\n        .panel[data-size='lg'],\n        .submenu-panel[data-size='lg'] {\n            ${dropdownMenuSizeTokens.lg}\n        }\n\n        .panel[data-size='xl'],\n        .submenu-panel[data-size='xl'] {\n            ${dropdownMenuSizeTokens.xl}\n        }\n    }\n`;\n\n/** @deprecated Use dropdownMenuHostSizeStyles + dropdownMenuPanelSizeStyles. */\nexport const dropdownMenuSizeStyles = css`\n    ${dropdownMenuHostSizeStyles}\n    ${dropdownMenuPanelSizeStyles}\n`;\n","import { css } from 'lit';\n\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\nimport { dropdownMenuPanelSizeStyles } from './dropdown-menu-size.styles.js';\n\nexport const pkDropdownItemStyles = [\n    popupContentAnimationStyles,\n    dropdownMenuPanelSizeStyles,\n    css`\n    @layer pk-component {\n        :host {\n            display: block;\n            position: relative;\n        }\n\n        .item {\n            display: flex;\n            align-items: center;\n            gap: var(--pk-dropdown-item-gap, 0.625rem);\n            width: 100%;\n            margin: 0;\n            padding: var(--pk-dropdown-item-padding-block, 8px) var(--pk-dropdown-item-padding-inline, 12px);\n            border: 0;\n            background: transparent;\n            color: inherit;\n            font: inherit;\n            font-size: var(--pk-dropdown-item-font-size, var(--pk-font-size-base));\n            font-weight: normal;\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        .item:hover:not([disabled]):not([aria-disabled='true']),\n        :host([data-highlighted]) .item,\n        :host([submenu-open]) .item {\n            background: var(--pk-color-slate-100);\n        }\n\n        .item:focus-visible {\n            background: var(--pk-color-slate-100);\n        }\n\n        .item[aria-disabled='true'] {\n            pointer-events: none;\n            opacity: 0.5;\n        }\n\n        .label {\n            flex: 1 1 auto;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .prefix {\n            display: inline-flex;\n            flex: 0 0 auto;\n            align-items: center;\n            justify-content: center;\n            width: var(--pk-dropdown-item-icon-size, 12px);\n            height: var(--pk-dropdown-item-icon-size, 12px);\n            line-height: 0;\n        }\n\n        .prefix--empty {\n            display: none;\n        }\n\n        .prefix ::slotted(*) {\n            display: inline-flex;\n            flex: 0 0 auto;\n            align-items: center;\n            justify-content: center;\n            width: var(--pk-dropdown-item-icon-size, 12px);\n            height: var(--pk-dropdown-item-icon-size, 12px);\n            /* Kill pk-icon text-baseline nudge inside the padded flex row. */\n            vertical-align: 0;\n        }\n\n        .prefix ::slotted(svg),\n        .prefix ::slotted(*) svg,\n        .prefix ::slotted(.pk-dropdown-item__prefix-icon) {\n            display: block;\n            width: var(--pk-dropdown-item-icon-size, 12px) !important;\n            height: var(--pk-dropdown-item-icon-size, 12px) !important;\n            max-width: var(--pk-dropdown-item-icon-size, 12px);\n            max-height: var(--pk-dropdown-item-icon-size, 12px);\n            flex-shrink: 0;\n            pointer-events: none;\n        }\n\n        .details {\n            margin-left: auto;\n            color: var(--pk-color-gray-500);\n            font-size: var(--pk-dropdown-details-font-size, var(--pk-font-size-sm));\n            letter-spacing: 0.04em;\n        }\n\n        .details:empty {\n            display: none;\n        }\n\n        .check {\n            display: inline-flex;\n            flex: 0 0 auto;\n            align-items: center;\n            justify-content: center;\n            width: 12px;\n            height: 12px;\n            color: var(--pk-color-gray-700);\n        }\n\n        .check svg {\n            display: block;\n            width: 12px;\n            height: 12px;\n            flex-shrink: 0;\n            pointer-events: none;\n        }\n\n        .submenu-icon {\n            display: inline-flex;\n            flex: 0 0 auto;\n            align-items: center;\n            justify-content: center;\n            width: 1rem;\n            color: var(--pk-color-gray-700);\n        }\n\n        .submenu-icon svg {\n            display: block;\n            width: 1em;\n            height: 1em;\n            flex-shrink: 0;\n            pointer-events: none;\n        }\n\n        .check {\n            opacity: 0;\n        }\n\n        :host([checked]) .check {\n            opacity: 1;\n        }\n\n        :host([type='checkbox']) .check,\n        :host([type='radio']) .check {\n            margin-left: auto;\n        }\n\n        :host([type='checkbox'][checked]) .check,\n        :host([type='radio'][checked]) .check {\n            opacity: 1;\n        }\n\n        .submenu-icon:empty {\n            display: none;\n        }\n\n        :host([destructive]) .item {\n            color: var(--pk-color-error);\n        }\n\n        :host([destructive]) .item:hover:not([disabled]):not([aria-disabled='true']),\n        :host([destructive]) .item:focus-visible {\n            color: var(--pk-color-error);\n        }\n\n        .submenu-panel {\n            width: max-content;\n            min-width: 8rem;\n            overflow: hidden;\n            padding: 4px 0;\n            border-radius: var(--pk-radius-md);\n            background: var(--pk-color-white);\n            box-shadow: var(--pk-shadow-popup);\n            /* Match root menu panel — Craft body text, not gray-900. */\n            color: var(--text-color, var(--pk-color-gray-700));\n        }\n\n        .submenu-panel ::slotted(pk-dropdown-item),\n        .submenu-panel ::slotted(pk-dropdown-separator),\n        .submenu-panel ::slotted(pk-dropdown-label) {\n            display: block;\n        }\n\n        .submenu-panel[hidden] {\n            display: none !important;\n        }\n    }\n`,\n];\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { check, chevronRight } from '@verbb/plugin-kit-icons';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { renderIconHtml } from '../../icons/render.js';\nimport {\n    syncPopupPlacementAnimation,\n    waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { pkDropdownItemStyles } from './pk-dropdown-item.styles.js';\n\nconst CHECK_ICON = renderIconHtml(check);\nconst SUBMENU_ICON = renderIconHtml(chevronRight);\n\nexport type PkDropdownItemType = 'normal' | 'checkbox' | 'radio';\n\ntype PkDropdownMenuSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\n/**\n * Dropdown menu item — use inside `pk-dropdown-menu`.\n *\n * @slot - Item label\n * @slot start - Leading icon (preferred; matches pk-button)\n * @slot prefix - Alias for `start` (legacy)\n * @slot details - Trailing shortcut text\n * @slot submenu - Nested menu items (`pk-dropdown-item`, separators, labels)\n *\n * @csspart item - Menu item button\n * @csspart prefix - Leading icon wrapper (hidden when empty)\n */\n@customElement('pk-dropdown-item')\nexport class PkDropdownItem extends PkElement {\n    static override styles = pkDropdownItemStyles;\n\n    @property()\n    value = '';\n\n    @property({ reflect: true })\n    type: PkDropdownItemType = 'normal';\n\n    @property({ attribute: 'radio-group' })\n    radioGroup = '';\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    destructive = false;\n\n    @property({ type: Boolean, reflect: true })\n    checked = false;\n\n    @property({ attribute: 'submenu-open', type: Boolean, reflect: true })\n    submenuOpen = false;\n\n    /**\n     * Roving highlight index for keyboard nav (`active`).\n     * Visual chrome uses `:focus-visible` / hover — not this flag — so mouse-open\n     * does not paint the first item selected (initial open).\n     */\n    @property({ type: Boolean })\n    active = false;\n\n    @state()\n    private submenuAnimated = false;\n\n    @query('.submenu-panel')\n    private submenuPanelElement!: HTMLDivElement;\n\n    @query('pk-popup')\n    private submenuPopupElement!: HTMLElement;\n\n    private readonly hasSlotController = new HasSlotController(this, 'submenu', 'details', 'start', 'prefix');\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n        this.syncRole();\n        this.syncSubmenuAria();\n        this.addEventListener('click', this.handleHostClick);\n        // Bind mouseenter on the host — covers the whole row, not just the button.\n        this.addEventListener('mouseenter', this.handleMouseEnter);\n    }\n\n    override disconnectedCallback(): void {\n        this.removeEventListener('click', this.handleHostClick);\n        this.removeEventListener('mouseenter', this.handleMouseEnter);\n        this.closeSubmenu();\n        super.disconnectedCallback();\n    }\n\n    override updated(changed: Map<string, unknown>): void {\n        if (changed.has('type') || changed.has('checked')) {\n            this.syncRole();\n        }\n\n        if (changed.has('submenuOpen') || changed.size === 0) {\n            this.syncSubmenuAria();\n        }\n\n        // Keyboard / external callers set `submenuOpen`; mouse path goes through openSubmenu().\n        if (changed.has('submenuOpen')) {\n            if (this.submenuOpen) {\n                this.ensureSubmenuSurface();\n            } else {\n                this.submenuAnimated = false;\n            }\n        }\n    }\n\n    /** Light-DOM `slot=\"submenu\"` — public for menu keyboard (`hasSubmenu`). */\n    hasSubmenu(): boolean {\n        return this.hasSlotController.test('submenu');\n    }\n\n    private syncSubmenuAria(): void {\n        const hasSubmenu = this.hasSubmenu();\n\n        if (hasSubmenu) {\n            this.setAttribute('aria-haspopup', 'menu');\n        } else {\n            this.removeAttribute('aria-haspopup');\n        }\n\n        this.setAttribute('aria-expanded', hasSubmenu && this.submenuOpen ? 'true' : 'false');\n    }\n\n    focusControl(): void {\n        this.shadowRoot?.querySelector<HTMLButtonElement>('.item')?.focus({ preventScroll: true });\n    }\n\n    /** Callers `item.focus()` — route into the shadow control button. */\n    override focus(options?: FocusOptions): void {\n        const button = this.shadowRoot?.querySelector<HTMLButtonElement>('.item');\n\n        if (button) {\n            button.focus(options);\n            return;\n        }\n\n        super.focus(options);\n    }\n\n    /** Public for menu leave-detection (`submenuElement`). */\n    get submenuElement(): HTMLDivElement | null {\n        return this.submenuPanelElement ?? null;\n    }\n\n    closeSubmenu(): void {\n        this.submenuAnimated = false;\n        this.submenuOpen = false;\n    }\n\n    /**\n     * Opens the nested submenu panel (mouse + keyboard).\n     * notify parent first so siblings close, then set `submenuOpen`.\n     */\n    openSubmenu(): void {\n        if (!this.hasSubmenu() || this.disabled || !this.isConnected) {\n            return;\n        }\n\n        this.notifyParentOfOpening();\n        this.submenuOpen = true;\n    }\n\n    /** `notifyParentOfOpening` — sibling close + bubble to the menu. */\n    private notifyParentOfOpening(): void {\n        this.dispatchEvent(new CustomEvent('pk-submenu-open', {\n            bubbles: true,\n            composed: true,\n            detail: { item: this },\n        }));\n\n        const parent = this.parentElement;\n\n        if (!parent) {\n            return;\n        }\n\n        // Same slot + same light-DOM parent = siblings (top-level or nested submenu).\n        for (const el of parent.children) {\n            if (\n                el !== this\n                && el instanceof PkDropdownItem\n                && el.getAttribute('slot') === this.getAttribute('slot')\n                && el.submenuOpen\n            ) {\n                el.submenuOpen = false;\n            }\n        }\n    }\n\n    private ensureSubmenuSurface(): void {\n        if (!this.hasSubmenu() || this.disabled) {\n            return;\n        }\n\n        this.submenuAnimated = true;\n\n        void this.updateComplete.then(() => {\n            if (!this.submenuOpen || !this.submenuPanelElement) {\n                return;\n            }\n\n            this.submenuPanelElement.hidden = false;\n            syncPopupPlacementAnimation(this.submenuPanelElement, 'right-start');\n\n            void waitForPopupReposition(this.submenuPopupElement, 'right-start').then((placement) => {\n                syncPopupPlacementAnimation(this.submenuPanelElement, placement);\n            });\n        });\n    }\n\n    private syncRole(): void {\n        if (this.type === 'checkbox') {\n            this.setAttribute('role', 'menuitemcheckbox');\n            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n            return;\n        }\n\n        if (this.type === 'radio') {\n            this.setAttribute('role', 'menuitemradio');\n            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n            return;\n        }\n\n        this.setAttribute('role', 'menuitem');\n        this.removeAttribute('aria-checked');\n    }\n\n    /** `handleMouseEnter` — open on hover; siblings close via notify. */\n    private handleMouseEnter = (): void => {\n        if (!this.hasSubmenu() || this.disabled) {\n            return;\n        }\n\n        this.notifyParentOfOpening();\n        this.submenuOpen = true;\n    };\n\n    /** Host has `role=\"menuitem\"` — block disabled activation; selection is handled by `pk-dropdown-menu`. */\n    private handleHostClick = (event: Event): void => {\n        if (this.disabled) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n        }\n    };\n\n    private handleClick(event: Event): void {\n        if (this.disabled) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            return;\n        }\n\n        if (this.hasSubmenu()) {\n            event.preventDefault();\n            this.openSubmenu();\n        }\n    }\n\n    override render() {\n        const hasSubmenu = this.hasSubmenu();\n        const showCheck = this.type === 'checkbox' || this.type === 'radio';\n        // Prefer start (button parity); prefix kept as legacy alias.\n        const hasLeadingIcon = this.hasSlotController.test('start') || this.hasSlotController.test('prefix');\n\n        return html`\n            <button\n                part=\"item\"\n                type=\"button\"\n                class=\"item\"\n                ?disabled=${this.disabled}\n                aria-disabled=${this.disabled ? 'true' : nothing}\n                @click=${this.handleClick}\n            >\n                <span\n                    part=\"prefix\"\n                    class=${hasLeadingIcon ? 'prefix' : 'prefix prefix--empty'}\n                >\n                    <slot name=\"start\"></slot>\n                    <slot name=\"prefix\"></slot>\n                </span>\n                <span class=\"label\"><slot></slot></span>\n                <span class=\"details\"><slot name=\"details\"></slot></span>\n                ${showCheck ? html`<span class=\"check\" aria-hidden=\"true\">${unsafeSVG(CHECK_ICON)}</span>` : nothing}\n                ${hasSubmenu ? html`<span class=\"submenu-icon\" aria-hidden=\"true\">${unsafeSVG(SUBMENU_ICON)}</span>` : nothing}\n            </button>\n            ${hasSubmenu ? html`\n                <pk-popup\n                    .active=${this.submenuOpen}\n                    .anchor=${this}\n                    placement=\"right-start\"\n                    .distance=${0}\n                    .skidding=${-4}\n                    flip\n                    shift\n                    hover-bridge\n                    style=\"--pk-popup-z-index: 1001\"\n                >\n                    <div\n                        part=\"submenu\"\n                        class=\"submenu-panel pk-popup-content\"\n                        role=\"menu\"\n                        data-size=${resolveMenuSize(this)}\n                        ?hidden=${!this.submenuOpen}\n                        data-open=${this.submenuAnimated ? '' : nothing}\n                        aria-orientation=\"vertical\"\n                    >\n                        <slot name=\"submenu\"></slot>\n                    </div>\n                </pk-popup>\n            ` : nothing}\n        `;\n    }\n}\n\nfunction resolveMenuSize(item: PkDropdownItem): PkDropdownMenuSize {\n    const panelSize = item.parentElement?.getAttribute('data-size');\n\n    if (panelSize === 'xs' || panelSize === 'sm' || panelSize === 'default' || panelSize === 'lg' || panelSize === 'xl') {\n        return panelSize;\n    }\n\n    const menu = item.closest('pk-dropdown-menu');\n    const menuSize = menu?.getAttribute('size');\n\n    if (menuSize === 'xs' || menuSize === 'sm' || menuSize === 'lg' || menuSize === 'xl') {\n        return menuSize;\n    }\n\n    return 'default';\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-dropdown-item': PkDropdownItem;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/pk-dropdown-label-DfACId-K.js

@@ -0,0 +1,48 @@
+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/dropdown-menu/pk-dropdown-label.styles.ts
+var pkDropdownLabelStyles = css`
+    @layer pk-component {
+        :host {
+            display: block;
+        }
+
+        /* Match v1 DropdownMenuLabel — text-slate-700, regular weight (not medium). */
+        .label {
+            margin: 0;
+            padding-block-start: 6px;
+            padding-block-end: 4px;
+            padding-inline: var(--pk-dropdown-label-padding-inline, 12px);
+            color: var(--pk-color-slate-700, rgba(96, 125, 159, 0.7));
+            font-size: var(--pk-dropdown-label-font-size, 13px);
+            font-weight: 400;
+            line-height: 1.3;
+            user-select: none;
+            pointer-events: none;
+        }
+    }
+`;
+//#endregion
+//#region src/components/dropdown-menu/pk-dropdown-label.ts
+var PkDropdownLabel = class PkDropdownLabel extends PkElement {
+	static {
+		this.styles = pkDropdownLabelStyles;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "presentation");
+	}
+	render() {
+		return html`
+            <div part="label" class="label">
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+PkDropdownLabel = __decorate([customElement("pk-dropdown-label")], PkDropdownLabel);
+//#endregion
+export { PkDropdownLabel as t };
+
+//# sourceMappingURL=pk-dropdown-label-DfACId-K.js.map

package/dist/chunks/pk-dropdown-label-DfACId-K.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-dropdown-label-DfACId-K.js","names":[],"sources":["../../src/components/dropdown-menu/pk-dropdown-label.styles.ts","../../src/components/dropdown-menu/pk-dropdown-label.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkDropdownLabelStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n        }\n\n        /* Match v1 DropdownMenuLabel — text-slate-700, regular weight (not medium). */\n        .label {\n            margin: 0;\n            padding-block-start: 6px;\n            padding-block-end: 4px;\n            padding-inline: var(--pk-dropdown-label-padding-inline, 12px);\n            color: var(--pk-color-slate-700, rgba(96, 125, 159, 0.7));\n            font-size: var(--pk-dropdown-label-font-size, 13px);\n            font-weight: 400;\n            line-height: 1.3;\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 { pkDropdownLabelStyles } from './pk-dropdown-label.styles.js';\n\n/** Non-interactive group label inside `pk-dropdown-menu`. */\n@customElement('pk-dropdown-label')\nexport class PkDropdownLabel extends PkElement {\n    static override styles = pkDropdownLabelStyles;\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n        this.setAttribute('role', 'presentation');\n    }\n\n    override render() {\n        return html`\n            <div part=\"label\" class=\"label\">\n                <slot></slot>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-dropdown-label': PkDropdownLabel;\n    }\n}\n"],"mappings":";;;;AAEA,IAAa,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;ACMjC,IAAA,kBAAA,MAAM,wBAAwB,UAAU;;gBAClB;;CAEzB,oBAAmC;AAC/B,QAAM,mBAAmB;AACzB,OAAK,aAAa,QAAQ,eAAe;;CAG7C,SAAkB;AACd,SAAO,IAAI;;;;;;;8BAVlB,cAAc,oBAAoB,CAAA,EAAA,gBAAA"}