@verbb/plugin-kit-web 2.0.0

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

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

package/dist/chunks/pk-textarea-BEapC8Rk.js

@@ -0,0 +1,342 @@
+import { t as __decorate } from "./decorate-W02hmVTt.js";
+import { n as syncStandaloneControlAria } from "./control-aria-B2QMq4ji.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-DmZKgNPL.js";
+import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
+import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
+import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
+import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
+import { i as uniqueId } from "./focus-aa5dlv8k.js";
+import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-CoU9dnNq.js";
+import { css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+//#region src/components/textarea/pk-textarea.styles.ts
+var pkTextareaStyles = css`
+    @layer pk-component {
+        :host {
+            display: block;
+            width: 100%;
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-font-size-base);
+            line-height: var(--pk-line-height);
+        }
+
+        .textarea {
+            display: block;
+            width: 100%;
+            min-height: 5rem;
+            margin: 0;
+            padding: 7px 10px;
+            border: var(--pk-input-border);
+            border-radius: var(--pk-textarea-border-radius, var(--pk-radius-md));
+            background: var(--pk-input-bg);
+            background-clip: padding-box;
+            /* Craft CP body / field value text. */
+            color: var(--pk-color-gray-700);
+            font: inherit;
+            line-height: 1.4;
+            resize: vertical;
+            appearance: none;
+            box-sizing: border-box;
+            outline: none;
+            transition: border-color 0.12s ease, box-shadow 0.12s ease;
+        }
+
+        .textarea::placeholder {
+            color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));
+        }
+
+        /* Craft: focus is box-shadow only — do not also flip border-color (double ring). */
+        :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus,
+        :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,
+        :host([data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {
+            box-shadow: var(--pk-input-focus-shadow);
+        }
+
+        .textarea:disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+            background: var(--pk-color-gray-50);
+        }
+
+        :host([invalid]) .textarea,
+        :host(:state(user-invalid)) .textarea {
+            border-color: var(--pk-color-rose-600);
+        }
+
+        :host([invalid]) .textarea:focus,
+        :host([invalid]) .textarea:focus-visible,
+        :host([invalid][data-state='focus-visible']) .textarea,
+        :host(:state(user-invalid)) .textarea:focus,
+        :host(:state(user-invalid)) .textarea:focus-visible {
+            box-shadow: var(--pk-input-invalid-focus-shadow);
+        }
+
+        /* Editable-table cells (v1): flush into the row and fill cell height.
+         * Chain height through form-control — percentage on .textarea alone
+         * doesn't resolve when the wrapper sizes to content (rows / min-height). */
+        :host([fit-cell]),
+        :host([data-editable-table-input]) {
+            display: block;
+            height: 100%;
+            min-height: 100%;
+            box-sizing: border-box;
+            overflow: hidden;
+        }
+
+        :host([fit-cell]) .form-control,
+        :host([data-editable-table-input]) .form-control {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            min-height: 100%;
+        }
+
+        :host([fit-cell]) .textarea,
+        :host([data-editable-table-input]) .textarea {
+            flex: 1 1 auto;
+            border: none;
+            border-radius: 0;
+            background: transparent;
+            box-shadow: none;
+            height: 100%;
+            min-height: 0;
+            max-height: 100%;
+            /* Match text-cell inset (v1 py-1.5 / px-2). 0.5rem block padding +
+             * line-height 1.4 overflows the 34px et cell and shows a scrollbar
+             * even for empty / single-line notes. */
+            padding: 0.375rem 0.5rem;
+            line-height: 1.25;
+            overflow-x: hidden;
+            overflow-y: auto;
+            resize: none;
+        }
+
+        :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus,
+        :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,
+        :host([fit-cell][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea,
+        :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus,
+        :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,
+        :host([data-editable-table-input][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {
+            border: none;
+            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);
+        }
+
+        :host([fit-cell][invalid]) .textarea,
+        :host([fit-cell]:state(user-invalid)) .textarea,
+        :host([fit-cell][invalid]) .textarea:focus,
+        :host([fit-cell][invalid]) .textarea:focus-visible,
+        :host([fit-cell]:state(user-invalid)) .textarea:focus,
+        :host([fit-cell]:state(user-invalid)) .textarea:focus-visible,
+        :host([data-editable-table-input][invalid]) .textarea,
+        :host([data-editable-table-input]:state(user-invalid)) .textarea,
+        :host([data-editable-table-input][invalid]) .textarea:focus,
+        :host([data-editable-table-input][invalid]) .textarea:focus-visible,
+        :host([data-editable-table-input]:state(user-invalid)) .textarea:focus,
+        :host([data-editable-table-input]:state(user-invalid)) .textarea:focus-visible {
+            border: none;
+            box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);
+        }
+    }
+`;
+//#endregion
+//#region src/components/textarea/pk-textarea.ts
+var PkTextarea = class PkTextarea extends PkFormAssociatedElement {
+	constructor(..._args) {
+		super(..._args);
+		this.assumeInteractionOn = ["blur", "input"];
+		this.hasSlotController = new HasSlotController(this, "instructions", "hint", "label");
+		this.controlId = uniqueId("pk-textarea");
+		this.placeholder = "";
+		this._value = null;
+		this.defaultValue = null;
+		this.size = "default";
+		this.label = "";
+		this.instructions = "";
+		this.readonly = false;
+		this.invalid = false;
+		this.fitCell = false;
+		this.withLabel = false;
+		this.withInstructions = false;
+	}
+	static {
+		this.styles = [formControlStyles, pkTextareaStyles];
+	}
+	static get validators() {
+		return [
+			...super.validators,
+			MirrorValidator(),
+			RequiredValidator()
+		];
+	}
+	get value() {
+		if (this.valueHasChanged) return this._value ?? "";
+		return this._value ?? this.defaultValue ?? "";
+	}
+	set value(val) {
+		const next = val ?? "";
+		if (this._value === next) return;
+		this.valueHasChanged = true;
+		this._value = next;
+	}
+	connectedCallback() {
+		this.instructions = readLegacyInstructions(this, this.instructions);
+		if (this.hasAttribute("with-hint")) this.withInstructions = true;
+		super.connectedCallback();
+	}
+	syncFormValue() {
+		this.setValue(this.value || "");
+	}
+	resetToDefaultValue() {
+		this.valueHasChanged = false;
+		this._value = null;
+	}
+	restoreFormState(state) {
+		if (typeof state === "string") this.value = state;
+	}
+	formResetCallback() {
+		this.valueHasChanged = false;
+		this._value = null;
+		if (this.input) this.input.value = this.defaultValue ?? "";
+		super.formResetCallback();
+	}
+	updated(changed) {
+		if (changed.has("value") || changed.has("defaultValue")) this.setState("blank", !this.value);
+		super.updated(changed);
+	}
+	syncStandaloneAria() {
+		if (!this.input) return;
+		const hasLabel = this.hasLabelContent();
+		const hasInstructions = this.hasInstructionsContent();
+		syncStandaloneControlAria({
+			control: this.input,
+			labelId: `${this.controlId}-label`,
+			instructionsId: `${this.controlId}-instructions`,
+			hasLabel,
+			hasInstructions,
+			required: this.required,
+			invalid: this.invalid || !this.internals.validity.valid
+		});
+	}
+	hasLabelContent() {
+		return Boolean(this.label) || this.hasSlotController.test("label", this.withLabel);
+	}
+	hasInstructionsContent() {
+		return hasInstructionContent((name, flag) => this.hasSlotController.test(name, flag), this.instructions, this.withInstructions);
+	}
+	focus(options) {
+		this.input?.focus(options);
+	}
+	blur() {
+		this.input?.blur();
+	}
+	handleInput() {
+		this.value = this.input.value;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleChange(event) {
+		this.value = this.input.value;
+		event.stopPropagation();
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const hasLabel = this.hasLabelContent();
+		const hasInstructions = this.hasInstructionsContent();
+		return html`
+            <div part="form-control" class="form-control">
+                ${hasLabel ? html`
+                        <label
+                            part="label"
+                            class="form-control__label"
+                            id=${`${this.controlId}-label`}
+                            for=${`${this.controlId}-control`}
+                        >
+                            <slot name="label">${this.label}</slot>
+                        </label>
+                    ` : nothing}
+
+                ${hasInstructions ? html`
+                        <p
+                            part="instructions"
+                            class="form-control__instructions"
+                            id=${`${this.controlId}-instructions`}
+                        >
+                            <slot name="instructions">${this.instructions}</slot>
+                            <slot name="hint"></slot>
+                        </p>
+                    ` : nothing}
+
+                <textarea
+                    part="textarea"
+                    class="textarea"
+                    id=${hasLabel ? `${this.controlId}-control` : nothing}
+                    rows=${ifDefined(this.fitCell ? this.rows ?? 1 : this.rows)}
+                    .value=${live(this.value)}
+                    placeholder=${this.placeholder || nothing}
+                    maxlength=${ifDefined(this.maxlength)}
+                    ?disabled=${this.disabled}
+                    ?readonly=${this.readonly}
+                    ?required=${this.required}
+                    @input=${this.handleInput}
+                    @change=${this.handleChange}
+                    @focus=${() => this.dispatchEvent(new Event("focus", {
+			bubbles: true,
+			composed: true
+		}))}
+                    @blur=${() => this.dispatchEvent(new Event("blur", {
+			bubbles: true,
+			composed: true
+		}))}
+                ></textarea>
+            </div>
+        `;
+	}
+};
+__decorate([query("textarea")], PkTextarea.prototype, "input", void 0);
+__decorate([property()], PkTextarea.prototype, "placeholder", void 0);
+__decorate([state()], PkTextarea.prototype, "value", null);
+__decorate([property({
+	attribute: "value",
+	reflect: true
+})], PkTextarea.prototype, "defaultValue", void 0);
+__decorate([property({ reflect: true })], PkTextarea.prototype, "size", void 0);
+__decorate([property()], PkTextarea.prototype, "label", void 0);
+__decorate([property()], PkTextarea.prototype, "instructions", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkTextarea.prototype, "readonly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkTextarea.prototype, "invalid", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "fit-cell"
+})], PkTextarea.prototype, "fitCell", void 0);
+__decorate([property({ type: Number })], PkTextarea.prototype, "rows", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "max-length"
+})], PkTextarea.prototype, "maxlength", void 0);
+__decorate([property({
+	attribute: "with-label",
+	type: Boolean
+})], PkTextarea.prototype, "withLabel", void 0);
+__decorate([property({
+	attribute: "with-instructions",
+	type: Boolean
+})], PkTextarea.prototype, "withInstructions", void 0);
+PkTextarea = __decorate([customElement("pk-textarea")], PkTextarea);
+//#endregion
+export { PkTextarea as t };
+
+//# sourceMappingURL=pk-textarea-BEapC8Rk.js.map

package/dist/chunks/pk-textarea-BEapC8Rk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-textarea-BEapC8Rk.js","names":[],"sources":["../../src/components/textarea/pk-textarea.styles.ts","../../src/components/textarea/pk-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkTextareaStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            width: 100%;\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-base);\n            line-height: var(--pk-line-height);\n        }\n\n        .textarea {\n            display: block;\n            width: 100%;\n            min-height: 5rem;\n            margin: 0;\n            padding: 7px 10px;\n            border: var(--pk-input-border);\n            border-radius: var(--pk-textarea-border-radius, var(--pk-radius-md));\n            background: var(--pk-input-bg);\n            background-clip: padding-box;\n            /* Craft CP body / field value text. */\n            color: var(--pk-color-gray-700);\n            font: inherit;\n            line-height: 1.4;\n            resize: vertical;\n            appearance: none;\n            box-sizing: border-box;\n            outline: none;\n            transition: border-color 0.12s ease, box-shadow 0.12s ease;\n        }\n\n        .textarea::placeholder {\n            color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n        }\n\n        /* Craft: focus is box-shadow only — do not also flip border-color (double ring). */\n        :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n        :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n        :host([data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        .textarea:disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n            background: var(--pk-color-gray-50);\n        }\n\n        :host([invalid]) .textarea,\n        :host(:state(user-invalid)) .textarea {\n            border-color: var(--pk-color-rose-600);\n        }\n\n        :host([invalid]) .textarea:focus,\n        :host([invalid]) .textarea:focus-visible,\n        :host([invalid][data-state='focus-visible']) .textarea,\n        :host(:state(user-invalid)) .textarea:focus,\n        :host(:state(user-invalid)) .textarea:focus-visible {\n            box-shadow: var(--pk-input-invalid-focus-shadow);\n        }\n\n        /* Editable-table cells (v1): flush into the row and fill cell height.\n         * Chain height through form-control — percentage on .textarea alone\n         * doesn't resolve when the wrapper sizes to content (rows / min-height). */\n        :host([fit-cell]),\n        :host([data-editable-table-input]) {\n            display: block;\n            height: 100%;\n            min-height: 100%;\n            box-sizing: border-box;\n            overflow: hidden;\n        }\n\n        :host([fit-cell]) .form-control,\n        :host([data-editable-table-input]) .form-control {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            min-height: 100%;\n        }\n\n        :host([fit-cell]) .textarea,\n        :host([data-editable-table-input]) .textarea {\n            flex: 1 1 auto;\n            border: none;\n            border-radius: 0;\n            background: transparent;\n            box-shadow: none;\n            height: 100%;\n            min-height: 0;\n            max-height: 100%;\n            /* Match text-cell inset (v1 py-1.5 / px-2). 0.5rem block padding +\n             * line-height 1.4 overflows the 34px et cell and shows a scrollbar\n             * even for empty / single-line notes. */\n            padding: 0.375rem 0.5rem;\n            line-height: 1.25;\n            overflow-x: hidden;\n            overflow-y: auto;\n            resize: none;\n        }\n\n        :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n        :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n        :host([fit-cell][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea,\n        :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n        :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n        :host([data-editable-table-input][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n            border: none;\n            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);\n        }\n\n        :host([fit-cell][invalid]) .textarea,\n        :host([fit-cell]:state(user-invalid)) .textarea,\n        :host([fit-cell][invalid]) .textarea:focus,\n        :host([fit-cell][invalid]) .textarea:focus-visible,\n        :host([fit-cell]:state(user-invalid)) .textarea:focus,\n        :host([fit-cell]:state(user-invalid)) .textarea:focus-visible,\n        :host([data-editable-table-input][invalid]) .textarea,\n        :host([data-editable-table-input]:state(user-invalid)) .textarea,\n        :host([data-editable-table-input][invalid]) .textarea:focus,\n        :host([data-editable-table-input][invalid]) .textarea:focus-visible,\n        :host([data-editable-table-input]:state(user-invalid)) .textarea:focus,\n        :host([data-editable-table-input]:state(user-invalid)) .textarea:focus-visible {\n            border: none;\n            box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { syncStandaloneControlAria } from '../../internal/control-aria.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkTextareaStyles } from './pk-textarea.styles.js';\n\nexport type PkTextareaSize = 'default' | 'sm';\n\n/**\n * Multiline text field —  API, Craft visuals.\n *\n * @slot label\n * @slot instructions\n * @slot hint - Alias for `instructions`\n *\n * @csspart form-control - Wrapper\n * @csspart label - Label\n * @csspart instructions - Instructions\n * @csspart textarea - Native textarea\n */\n@customElement('pk-textarea')\nexport class PkTextarea extends PkFormAssociatedElement {\n    static override styles = [formControlStyles, pkTextareaStyles];\n\n    static override get validators() {\n        return [...super.validators, MirrorValidator(), RequiredValidator()];\n    }\n\n    override assumeInteractionOn = ['blur', 'input'];\n\n    private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint', 'label');\n\n    private readonly controlId = uniqueId('pk-textarea');\n\n    @query('textarea')\n    override input!: HTMLTextAreaElement;\n\n    @property()\n    placeholder = '';\n\n    private _value: string | null = null;\n\n    get value(): string {\n        if (this.valueHasChanged) {\n            return this._value ?? '';\n        }\n\n        return this._value ?? this.defaultValue ?? '';\n    }\n\n    @state()\n    set value(val: string | null) {\n        const next = val ?? '';\n\n        if (this._value === next) {\n            return;\n        }\n\n        this.valueHasChanged = true;\n        this._value = next;\n    }\n\n    @property({ attribute: 'value', reflect: true })\n    defaultValue: string | null = null;\n\n    @property({ reflect: true })\n    size: PkTextareaSize = 'default';\n\n    @property()\n    label = '';\n\n    @property()\n    instructions = '';\n\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    /** Flush + fill parent cell (editable tables). */\n    @property({ type: Boolean, reflect: true, attribute: 'fit-cell' })\n    fitCell = false;\n\n    /** Native `rows` — use `1` in table cells so intrinsic height doesn't overflow. */\n    @property({ type: Number })\n    rows?: number;\n\n    @property({ type: Number, attribute: 'max-length' })\n    maxlength?: number;\n\n    @property({ attribute: 'with-label', type: Boolean })\n    withLabel = false;\n\n    @property({ attribute: 'with-instructions', type: Boolean })\n    withInstructions = false;\n\n    override connectedCallback(): void {\n        this.instructions = readLegacyInstructions(this, this.instructions);\n\n        if (this.hasAttribute('with-hint')) {\n            this.withInstructions = true;\n        }\n\n        super.connectedCallback();\n    }\n\n    protected override syncFormValue(): void {\n        this.setValue(this.value || '');\n    }\n\n    protected override resetToDefaultValue(): void {\n        this.valueHasChanged = false;\n        this._value = null;\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (typeof state === 'string') {\n            this.value = state;\n        }\n    }\n\n    override formResetCallback(): void {\n        this.valueHasChanged = false;\n        this._value = null;\n\n        if (this.input) {\n            this.input.value = this.defaultValue ?? '';\n        }\n\n        super.formResetCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (changed.has('value') || changed.has('defaultValue')) {\n            this.setState('blank', !this.value);\n        }\n\n        super.updated(changed);\n    }\n\n    protected override syncStandaloneAria(): void {\n        if (!this.input) {\n            return;\n        }\n\n        const hasLabel = this.hasLabelContent();\n        const hasInstructions = this.hasInstructionsContent();\n\n        syncStandaloneControlAria({\n            control: this.input,\n            labelId: `${this.controlId}-label`,\n            instructionsId: `${this.controlId}-instructions`,\n            hasLabel,\n            hasInstructions,\n            required: this.required,\n            invalid: this.invalid || !this.internals.validity.valid,\n        });\n    }\n\n    private hasLabelContent(): boolean {\n        return Boolean(this.label) || this.hasSlotController.test('label', this.withLabel);\n    }\n\n    private hasInstructionsContent(): boolean {\n        return hasInstructionContent(\n            (name, flag) => this.hasSlotController.test(name, flag),\n            this.instructions,\n            this.withInstructions,\n        );\n    }\n\n    focus(options?: FocusOptions): void {\n        this.input?.focus(options);\n    }\n\n    blur(): void {\n        this.input?.blur();\n    }\n\n    private handleInput(): void {\n        this.value = this.input.value;\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n    }\n\n    private handleChange(event: Event): void {\n        this.value = this.input.value;\n        event.stopPropagation();\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n\n    override render() {\n        const hasLabel = this.hasLabelContent();\n        const hasInstructions = this.hasInstructionsContent();\n\n        return html`\n            <div part=\"form-control\" class=\"form-control\">\n                ${hasLabel\n                    ? html`\n                        <label\n                            part=\"label\"\n                            class=\"form-control__label\"\n                            id=${`${this.controlId}-label`}\n                            for=${`${this.controlId}-control`}\n                        >\n                            <slot name=\"label\">${this.label}</slot>\n                        </label>\n                    `\n                    : nothing}\n\n                ${hasInstructions\n                    ? html`\n                        <p\n                            part=\"instructions\"\n                            class=\"form-control__instructions\"\n                            id=${`${this.controlId}-instructions`}\n                        >\n                            <slot name=\"instructions\">${this.instructions}</slot>\n                            <slot name=\"hint\"></slot>\n                        </p>\n                    `\n                    : nothing}\n\n                <textarea\n                    part=\"textarea\"\n                    class=\"textarea\"\n                    id=${hasLabel ? `${this.controlId}-control` : nothing}\n                    rows=${ifDefined(this.fitCell ? (this.rows ?? 1) : this.rows)}\n                    .value=${live(this.value)}\n                    placeholder=${this.placeholder || nothing}\n                    maxlength=${ifDefined(this.maxlength)}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    ?required=${this.required}\n                    @input=${this.handleInput}\n                    @change=${this.handleChange}\n                    @focus=${() => this.dispatchEvent(new Event('focus', { bubbles: true, composed: true }))}\n                    @blur=${() => this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }))}\n                ></textarea>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-textarea': PkTextarea;\n    }\n}\n"],"mappings":"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"}