npm - @helixui/library - Versions diffs - 3.6.0 → 3.8.0 - Mend

@helixui/library 3.6.0 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (280) hide show

package/dist/shared/hx-tab-panel-BfisavKo.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-tab-panel-BfisavKo.js","sources":["../../src/components/hx-tabs/hx-tabs.styles.ts","../../src/components/hx-tabs/hx-tabs.ts","../../src/components/hx-tabs/hx-tab.styles.ts","../../src/components/hx-tabs/hx-tab.ts","../../src/components/hx-tabs/hx-tab-panel.styles.ts","../../src/components/hx-tabs/hx-tab-panel.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTabsStyles = css`\n :host {\n display: block;\n font-family: var(--hx-tabs-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Container ─── */\n\n .tabs {\n display: flex;\n flex-direction: column;\n gap: var(--hx-tabs-gap, 0);\n }\n\n :host([orientation='vertical']) .tabs {\n flex-direction: row;\n }\n\n /* ─── Tablist ─── */\n\n .tablist {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n gap: 0;\n border-bottom: var(--hx-tabs-border-width, 1px) solid\n var(--hx-tabs-border-color, var(--hx-color-neutral-200, #d6dbd5));\n overflow-x: auto;\n scrollbar-width: none;\n }\n\n .tablist::-webkit-scrollbar {\n display: none;\n }\n\n /* ─── Vertical Orientation ─── */\n\n :host([orientation='vertical']) {\n --_tab-indicator-bottom: 0px;\n --_tab-indicator-end: var(--hx-tabs-indicator-size, 2px);\n --_tab-indicator-bottom-color: transparent;\n --_tab-indicator-end-color: var(\n --hx-tabs-indicator-color,\n var(--hx-color-primary-500, #429797)\n );\n }\n\n :host([orientation='vertical']) .tablist {\n flex-direction: column;\n border-bottom: none;\n border-inline-end: var(--hx-tabs-border-width, 1px) solid\n var(--hx-tabs-border-color, var(--hx-color-neutral-200, #d6dbd5));\n overflow-x: visible;\n overflow-y: auto;\n min-width: var(--hx-tabs-vertical-width, 12rem);\n flex-shrink: 0;\n }\n\n /* ─── Panels Container ─── */\n\n .panels {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .tablist {\n scroll-behavior: auto;\n }\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .tablist {\n border-bottom-color: CanvasText;\n }\n\n :host([orientation='vertical']) .tablist {\n border-inline-end-color: CanvasText;\n }\n }\n`;\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixTabsStyles } from './hx-tabs.styles.js';\nimport type { HelixTab } from './hx-tab.js';\nimport type { HelixTabPanel } from './hx-tab-panel.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport {\n installAriaIdrefMirror,\n resolveIdrefTokens,\n supportsIdrefElementReferences,\n type AriaIdrefMirrorHandle,\n} from '../../utils/aria-idref.js';\nimport { flattenAccName } from '../../utils/aria-flatten.js';\n\nconst _nextTabsId = createIdCounter('hx-tabs');\n\n/** Detail for the hx-tab-change event dispatched by hx-tabs. */\nexport interface HxTabChangeDetail {\n tabId: string;\n index: number;\n}\n\n/**\n * A tabbed content organizer that manages a set of `<hx-tab>` and `<hx-tab-panel>` children.\n * Supports horizontal and vertical orientations, automatic and manual activation modes,\n * and full keyboard navigation per the ARIA Authoring Practices Guide.\n *\n * Group 5a host-canonical: `role=\"tablist\"` lives on the host via\n * `_internals.role`. `aria-orientation`, `aria-label`, and consumer\n * `aria-labelledby` resolve through the host. Per-tab `role=\"tab\"` and\n * per-panel `role=\"tabpanel\"` likewise live on their respective hosts.\n *\n * Activation defaults to **manual** per healthcare patterns — keyboard arrow\n * keys move focus only; Enter/Space activates. APG explicitly allows both\n * automatic and manual activation; manual is safer when panels are heavy or\n * announce changes via live regions.\n *\n * @summary Tab container that organizes content into selectable panels.\n *\n * @tag hx-tabs\n *\n * @slot tab - Slot for `<hx-tab>` elements. Rendered inside the tablist.\n * @slot - Default slot for `<hx-tab-panel>` elements.\n *\n * @fires {CustomEvent<{tabId: string, index: number}>} hx-tab-change - Dispatched when the active tab changes.\n *\n * @csspart tablist - The tablist container element.\n * @csspart panels - The panel content container element.\n *\n * @cssprop [--hx-tabs-border-color=var(--hx-color-neutral-200, #D6DBD5)] - Tablist border color.\n * @cssprop [--hx-tabs-border-width=1px] - Tablist border width.\n * @cssprop [--hx-tabs-vertical-width=12rem] - Width of the tablist in vertical orientation.\n * @cssprop [--hx-tabs-gap=0] - Gap between the tablist and panels container.\n * @cssprop [--hx-tabs-tab-color=var(--hx-color-neutral-600, #4A5362)] - Inactive tab text color.\n * @cssprop [--hx-tabs-tab-active-color=var(--hx-color-primary-600, #0F7078)] - Active tab text color.\n * @cssprop [--hx-tabs-tab-hover-color=var(--hx-color-neutral-800, #202B39)] - Tab hover text color.\n * @cssprop [--hx-tabs-tab-hover-bg=var(--hx-color-neutral-50, #F5F8F3)] - Tab hover background.\n * @cssprop [--hx-tabs-tab-font-size=var(--hx-font-size-md, 1rem)] - Tab font size.\n * @cssprop [--hx-tabs-tab-font-weight=var(--hx-font-weight-medium, 500)] - Tab font weight.\n * @cssprop [--hx-tabs-tab-active-font-weight=var(--hx-font-weight-semibold, 600)] - Active tab font weight.\n * @cssprop [--hx-tabs-tab-padding-x=var(--hx-space-4, 1rem)] - Horizontal tab padding.\n * @cssprop [--hx-tabs-tab-padding-y=var(--hx-space-2, 0.5rem)] - Vertical tab padding.\n * @cssprop [--hx-tabs-indicator-color=var(--hx-color-primary-500, #429797)] - Active indicator color.\n * @cssprop [--hx-tabs-indicator-size=2px] - Active indicator thickness.\n * @cssprop [--hx-tabs-focus-ring-color=var(--hx-focus-ring-color, #6AB1B1)] - Focus ring color for tabs and panels.\n * @cssprop [--hx-tabs-panel-padding=var(--hx-space-4, 1rem)] - Panel inner padding.\n * @cssprop [--hx-tabs-panel-color=var(--hx-color-neutral-700, #313E4B)] - Panel text color.\n * @cssprop [--hx-tabs-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @aaa-certified 2026-05-08\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-tabs/AAA-AUDIT.md\n * @keyboard-contract navigate=Arrow,Home,End; activate=Enter,Space; disabled-suppresses=true\n * @aria-pattern tabs\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated false\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-tabs\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n */\n@customElement('hx-tabs')\nexport class HelixTabs extends HelixElement {\n static override styles = [helixTabsStyles, forcedColorsInteractive];\n\n // ─── Internal ID ───\n\n /** @internal */\n private _id = _nextTabsId();\n\n // ─── Properties ───\n\n /**\n * The layout orientation of the tabs.\n * @attr orientation\n */\n @property({ type: String, reflect: true })\n orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Controls how keyboard navigation activates tabs.\n * In `automatic` mode, focus also activates the tab.\n * In `manual` mode, focus moves independently; Space or Enter activates.\n *\n * Group 5a default: `manual` — safer for healthcare patterns where panel\n * content may be heavy or announce updates via live regions. APG explicitly\n * allows both modes; manual avoids disorienting auto-activation when users\n * scan tabs with arrow keys.\n *\n * @attr activation\n */\n @property({ type: String, attribute: 'activation', reflect: true })\n activation: 'manual' | 'automatic' = 'manual';\n\n /**\n * Accessible label for the tablist. Drives the host `internals.ariaLabel`.\n * Provide a brief description of what the tabs represent (e.g., \"Patient\n * record sections\"). Consumer `aria-label` / `aria-labelledby` on the host\n * override this property when present.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = '';\n\n // ─── State ───\n\n /** @internal */\n @state() private _activePanel = '';\n\n /** @internal */\n @state() private _supportsIdrefRefs = true;\n\n // ─── Host-canonical ARIA bookkeeping ───\n\n /** @internal */\n private _ariaMirror: AriaIdrefMirrorHandle | null = null;\n\n // ─── Child Accessors ───\n\n /** @internal */\n private _cachedTabs: HelixTab[] | null = null;\n /** @internal */\n private _cachedPanels: HelixTabPanel[] | null = null;\n /** @internal */\n private _observer: MutationObserver | null = null;\n /**\n * Stores a requested tab index from the `selected-index` attribute before the component\n * has finished its first update (e.g. server-rendered Drupal pages).\n * @internal\n */\n private _pendingIndex: number | null = null;\n\n // ─── Attribute Observation ───\n\n static override get observedAttributes(): string[] {\n return [...(super.observedAttributes ?? []), 'selected-index'];\n }\n\n override attributeChangedCallback(name: string, old: string | null, value: string | null): void {\n super.attributeChangedCallback(name, old, value);\n if (name === 'selected-index' && value !== null && old !== value) {\n const index = parseInt(value, 10);\n if (!isNaN(index) && index >= 0) {\n if (this.hasUpdated) {\n // Already initialised — apply immediately\n const tab = this._getTabs()[index];\n if (tab && !tab.disabled) {\n this._activateTab(tab, false);\n }\n } else {\n // Store for application in firstUpdated\n this._pendingIndex = index;\n }\n }\n }\n }\n\n // ─── Public API ───\n\n /**\n * Gets or sets the zero-based index of the currently selected tab.\n * Setting this programmatically activates the tab at the given index.\n * Can also be set via the `selected-index` HTML attribute for server-side\n * pre-selection (e.g. Drupal Twig templates).\n */\n get selectedIndex(): number {\n return this._getTabs().findIndex((tab) => tab.panel === this._activePanel);\n }\n\n set selectedIndex(index: number) {\n const tab = this._getTabs()[index];\n if (tab && !tab.disabled) {\n this._activateTab(tab, true);\n }\n }\n\n /** @internal */\n private _getTabs(): HelixTab[] {\n if (!this._cachedTabs) {\n this._cachedTabs = Array.from(this.querySelectorAll(':scope > hx-tab')).filter(\n (el): el is HelixTab => el.tagName.toLowerCase() === 'hx-tab',\n );\n }\n return this._cachedTabs;\n }\n\n /** @internal */\n private _getPanels(): HelixTabPanel[] {\n if (!this._cachedPanels) {\n this._cachedPanels = Array.from(this.querySelectorAll(':scope > hx-tab-panel')).filter(\n (el): el is HelixTabPanel => el.tagName.toLowerCase() === 'hx-tab-panel',\n );\n }\n return this._cachedPanels;\n }\n\n /** @internal */\n private _getEnabledTabs(): HelixTab[] {\n return this._getTabs().filter((tab) => !tab.disabled);\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._supportsIdrefRefs = supportsIdrefElementReferences(this._internals);\n this.addEventListener('hx-tab-select', this._handleTabSelect);\n this.addEventListener('keydown', this._handleKeydown);\n // Watch for panel/name attribute changes on child tabs and panels\n if (typeof MutationObserver !== 'undefined') {\n this._observer = new MutationObserver(() => {\n this._cachedTabs = null;\n this._cachedPanels = null;\n this._syncTabsAndPanels();\n });\n this._observer.observe(this, {\n subtree: false,\n attributeFilter: ['panel', 'name'],\n });\n }\n // Seed host-canonical semantics so the role/label appear before first paint.\n this._syncHostAriaSemantics();\n this._ariaMirror = installAriaIdrefMirror(this, () => {\n this._syncHostAriaSemantics();\n });\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('hx-tab-select', this._handleTabSelect);\n this.removeEventListener('keydown', this._handleKeydown);\n this._observer?.disconnect();\n this._observer = null;\n this._ariaMirror?.disconnect();\n this._ariaMirror = null;\n }\n\n override firstUpdated(): void {\n if (this.label === '') {\n devWarn(\n 'hx-tabs',\n 'No accessible label provided. Set the `label` attribute on hx-tabs to describe what the tabs represent (e.g., \"Patient record sections\"). An unlabeled tablist violates WCAG 4.1.2.',\n );\n }\n\n this._syncTabsAndPanels();\n\n // Apply a pending selected-index (set via HTML attribute before upgrade, e.g. Drupal Twig)\n if (this._pendingIndex !== null) {\n const pendingTab = this._getTabs()[this._pendingIndex];\n this._pendingIndex = null;\n if (pendingTab && !pendingTab.disabled) {\n this._activateTab(pendingTab, false);\n return;\n }\n }\n\n // Activate the first enabled tab if none is selected\n if (!this._activePanel) {\n const firstEnabled = this._getEnabledTabs()[0];\n if (firstEnabled) {\n this._activateTab(firstEnabled, false);\n }\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if ((changedProperties as Map<PropertyKey, unknown>).has('_activePanel')) {\n this._updateTabsAndPanels();\n }\n if (\n (changedProperties as Map<PropertyKey, unknown>).has('orientation') ||\n (changedProperties as Map<PropertyKey, unknown>).has('label')\n ) {\n this._syncHostAriaSemantics();\n }\n }\n\n // ─── Host ARIA Sync ───\n\n /**\n * Mirror tablist semantics onto the host via ElementInternals so consumer-\n * supplied `aria-label`, `aria-labelledby`, and the `label` property all\n * reach the announced control. The host carries `role=\"tablist\"` and the\n * orientation reflects the `orientation` property reactively.\n * @internal\n */\n private _syncHostAriaSemantics(): void {\n const internals = this._internals;\n internals.role = 'tablist';\n internals.ariaOrientation = this.orientation;\n\n const hostAriaLabel = this.getAttribute('aria-label')?.trim() || '';\n const consumerLabelledBy = this.getAttribute('aria-labelledby');\n const labelEls = resolveIdrefTokens(this, consumerLabelledBy);\n const hasEffectiveLabelledBy = labelEls.length > 0;\n\n type InternalsWithRefs = ElementInternals & {\n ariaLabelledByElements: Element[] | null;\n };\n\n if (this._supportsIdrefRefs) {\n const refsInternals = internals as InternalsWithRefs;\n refsInternals.ariaLabelledByElements = hasEffectiveLabelledBy ? labelEls : null;\n }\n\n // Precedence: consumer aria-label > consumer aria-labelledby (resolved) >\n // `label` property. When labelledby resolves on the modern path, the IDL\n // refs above carry the live target; clear ariaLabel so the element refs\n // win. On the fallback path, flatten the labelledby targets to a string.\n if (hostAriaLabel) {\n internals.ariaLabel = hostAriaLabel;\n } else if (hasEffectiveLabelledBy) {\n if (this._supportsIdrefRefs) {\n internals.ariaLabel = null;\n } else {\n internals.ariaLabel =\n labelEls\n .map((el) => flattenAccName(el))\n .filter(Boolean)\n .join(' ') ||\n this.label ||\n null;\n }\n } else {\n internals.ariaLabel = this.label || null;\n }\n }\n\n // ─── Tab / Panel Sync ───\n\n /** @internal */\n private _syncTabsAndPanels(): void {\n const tabs = this._getTabs();\n const panels = this._getPanels();\n\n tabs.forEach((tab, i) => {\n const tabId = tab.id || `hx-tab-${this._id}-${i}`;\n tab.id = tabId;\n\n // Connect tab to its panel by aria-controls\n const panelName = tab.panel;\n const panel = panels.find((p) => p.name === panelName) ?? panels[i];\n if (panel) {\n const panelId = panel.id || `hx-panel-${this._id}-${i}`;\n panel.id = panelId;\n // String IDREF (legacy fallback path) — the inner button mirrors this\n // when the platform lacks IDL element references.\n tab.controls = panelId;\n // Modern path: project the panel host as an element reference so AT\n // walks across the shadow boundary by reference rather than IDREF.\n tab.setControlsPanel(panel);\n // Project the tab host as the panel's labelledby reference. Cross-\n // shadow naming via IDL element references resolves the tab's\n // accessible name (its slotted label content) without serialization.\n // Legacy fallback: the parent additionally writes a flattened\n // `aria-label` string on the panel host so AT without IDL refs still\n // names the panel.\n panel.setLabelledByTabs([tab]);\n\n if (!this._supportsIdrefRefs) {\n // Extract only default-slot children (no `slot` attribute) to exclude\n // prefix/suffix slot content (e.g. badge counts) from the panel\n // accessible name (WCAG 1.3.1).\n const tabLabel = Array.from(tab.childNodes)\n .filter(\n (node) =>\n node.nodeType === Node.TEXT_NODE ||\n (node.nodeType === Node.ELEMENT_NODE && !(node as Element).hasAttribute('slot')),\n )\n .map((node) => node.textContent ?? '')\n .join('')\n .trim();\n if (tabLabel) {\n panel.setAttribute('aria-label', tabLabel);\n panel.removeAttribute('aria-labelledby');\n } else {\n // Fall back to aria-labelledby string ID if no text content yet;\n // this gets corrected on the next slotchange.\n panel.setAttribute('aria-labelledby', tabId);\n }\n } else {\n // Modern path: scrub legacy fallback attributes so a previously-\n // mounted-on-legacy panel doesn't leak stale strings.\n panel.removeAttribute('aria-label');\n panel.removeAttribute('aria-labelledby');\n }\n }\n });\n\n this._updateTabsAndPanels();\n }\n\n /** @internal */\n private _updateTabsAndPanels(): void {\n const tabs = this._getTabs();\n const panels = this._getPanels();\n\n tabs.forEach((tab) => {\n const isSelected = tab.panel === this._activePanel;\n tab.selected = isSelected;\n // Single-host roving tabindex (Group 5a): the host is the only focusable\n // surface for the tab. The inner button is `tabindex=-1` and\n // presentational on the modern path. document.activeElement compares\n // directly against the host.\n tab.tabIndex = isSelected ? 0 : -1;\n });\n\n panels.forEach((panel) => {\n const isActive = panel.name === this._activePanel;\n if (isActive) {\n panel.removeAttribute('hidden');\n panel.setAttribute('tabindex', '0');\n } else {\n panel.setAttribute('hidden', '');\n panel.setAttribute('tabindex', '-1');\n }\n });\n }\n\n // ─── Tab Activation ───\n\n /** @internal */\n private _activateTab(tab: HelixTab, dispatchEvent = true): void {\n if (tab.disabled) {\n return;\n }\n\n const tabs = this._getTabs();\n const previousPanel = this._activePanel;\n this._activePanel = tab.panel;\n\n if (dispatchEvent && previousPanel !== this._activePanel) {\n const index = tabs.indexOf(tab);\n /**\n * Dispatched when the active tab changes.\n * @event hx-tab-change\n */\n this.dispatchEvent(\n new CustomEvent<{ tabId: string; index: number }>('hx-tab-change', {\n bubbles: true,\n composed: true,\n detail: { tabId: tab.id, index },\n }),\n );\n }\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleTabSelect = (e: Event): void => {\n if (!(e instanceof CustomEvent)) return;\n e.stopPropagation();\n const tab = e\n .composedPath()\n .find((el): el is HelixTab => el instanceof Element && el.tagName.toLowerCase() === 'hx-tab');\n if (tab) {\n this._activateTab(tab);\n // Host-canonical (Group 5a): hx-tab renders a `div[tabindex=\"-1\"]`\n // rather than a native button, so a click leaves activeElement on\n // whatever the user clicked from. Without an explicit focus call,\n // arrow/Home/End keyboard navigation has no anchor inside the\n // tablist until the user tabs back in. `preventScroll: true` keeps\n // the click from triggering a viewport scroll-into-view that the\n // user did not request — the tab is already in view because the\n // user just clicked it.\n if (!tab.disabled) {\n tab.focus({ preventScroll: true });\n }\n }\n };\n\n /** @internal */\n private _warnInvalidSlotContent(): void {\n const tabSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"tab\"]');\n const panelSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (tabSlot) {\n const invalid = tabSlot\n .assignedElements()\n .filter((el) => el.tagName.toLowerCase() !== 'hx-tab');\n if (invalid.length > 0) {\n devWarn(\n 'hx-tabs',\n `Slot \"tab\" expects <hx-tab> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n );\n }\n }\n if (panelSlot) {\n const invalid = panelSlot\n .assignedElements()\n .filter((el) => el.tagName.toLowerCase() !== 'hx-tab-panel');\n if (invalid.length > 0) {\n devWarn(\n 'hx-tabs',\n `Default slot expects <hx-tab-panel> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n );\n }\n }\n }\n\n /** @internal */\n private _handleSlotChange = (): void => {\n this._warnInvalidSlotContent();\n this._cachedTabs = null;\n this._cachedPanels = null;\n this._syncTabsAndPanels();\n // If the active panel was removed, fall back to the first enabled tab\n const panels = this._getPanels();\n const activePanelExists = panels.some((p) => p.name === this._activePanel);\n if (!activePanelExists) {\n const firstEnabled = this._getEnabledTabs()[0];\n if (firstEnabled) {\n this._activateTab(firstEnabled, false);\n } else {\n this._activePanel = '';\n }\n }\n };\n\n /** @internal */\n private _handleKeydown = (e: KeyboardEvent): void => {\n // Use ALL tabs (including disabled) so keyboard users can discover disabled tabs\n // per ARIA APG tab pattern — disabled tabs receive focus but are not activated.\n const allTabs = this._getTabs();\n if (allTabs.length === 0) {\n return;\n }\n\n const isHorizontal = this.orientation === 'horizontal';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n\n const isNavigationKey = [prevKey, nextKey, 'Home', 'End', ' ', 'Enter'].includes(e.key);\n if (!isNavigationKey) {\n return;\n }\n\n // Determine focused tab — host-canonical: the host IS the focusable\n // surface, so document.activeElement matches the hx-tab host directly\n // (no shadow-DOM activeElement traversal needed on the modern path).\n // On the legacy fallback path, focus may land on the inner button; the\n // tab host is still the focused element in document.activeElement\n // because the shadow root is closed at the host boundary for outer-tree\n // queries.\n const focusedTab = allTabs.find((tab) => tab === document.activeElement);\n\n if (e.key === ' ' || e.key === 'Enter') {\n // Only activate if the focused tab is not disabled\n if (focusedTab && !focusedTab.disabled) {\n e.preventDefault();\n this._activateTab(focusedTab);\n focusedTab.focus();\n }\n return;\n }\n\n e.preventDefault();\n\n let currentIndex = focusedTab ? allTabs.indexOf(focusedTab) : -1;\n // Fall back to the active tab's index if nothing is focused yet\n if (currentIndex === -1) {\n const activeTab = allTabs.find((tab) => tab.panel === this._activePanel);\n currentIndex = activeTab ? allTabs.indexOf(activeTab) : 0;\n }\n\n let nextIndex: number;\n\n if (e.key === 'Home') {\n nextIndex = 0;\n } else if (e.key === 'End') {\n nextIndex = allTabs.length - 1;\n } else if (e.key === nextKey) {\n nextIndex = (currentIndex + 1) % allTabs.length;\n } else {\n // prevKey\n nextIndex = currentIndex <= 0 ? allTabs.length - 1 : currentIndex - 1;\n }\n\n const targetTab = allTabs[nextIndex];\n if (!targetTab) {\n return;\n }\n\n // Focus the host directly — single-host roving tabindex (Group 5a).\n // The host owns the tab stop; the inner button is presentational.\n targetTab.focus();\n\n // Only activate in automatic mode if the target tab is not disabled\n if (this.activation === 'automatic' && !targetTab.disabled) {\n this._activateTab(targetTab);\n }\n };\n\n // ─── Render ───\n\n override render() {\n return html`\n <div class=\"tabs\">\n <div part=\"tablist\" class=\"tablist\">\n <slot name=\"tab\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n <div part=\"panels\" class=\"panels\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tabs': HelixTabs;\n }\n interface HTMLElementEventMap {\n 'hx-tab-change': CustomEvent<{ tabId: string; index: number }>;\n }\n}\n","import { css } from 'lit';\n\nexport const helixTabStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n * {\n box-sizing: border-box;\n }\n\n .tab {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n min-height: var(--hx-touch-target-min, 44px);\n padding: var(--hx-tabs-tab-padding-y, var(--hx-space-2, 0.5rem))\n var(--hx-tabs-tab-padding-x, var(--hx-space-4, 1rem));\n border: none;\n border-bottom: var(--_tab-indicator-bottom, var(--hx-tabs-indicator-size, 2px)) solid\n transparent;\n border-inline-end: var(--_tab-indicator-end, 0px) solid transparent;\n background: none;\n font-family: var(--hx-tabs-tab-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-tabs-tab-font-size, var(--hx-font-size-md, 1rem));\n font-weight: var(--hx-tabs-tab-font-weight, var(--hx-font-weight-medium, 500));\n color: var(--hx-tabs-tab-color, var(--hx-color-neutral-600, #4a5362));\n line-height: var(--hx-line-height-tight, 1.25);\n cursor: pointer;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n transition:\n color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease),\n border-inline-end-color var(--hx-transition-fast, 150ms ease),\n background-color var(--hx-transition-fast, 150ms ease);\n position: relative;\n }\n\n /* ─── Hover State ───\n Group 5a host-canonical: drive visual state from host attributes\n (selected / disabled are reflect: true), not from inner-element ARIA\n attributes which now live on the host's ElementInternals. */\n\n :host(:not([selected]):not([disabled])) .tab:hover {\n color: var(--hx-tabs-tab-hover-color, var(--hx-color-neutral-800, #202b39));\n background-color: var(--hx-tabs-tab-hover-bg, var(--hx-color-neutral-50, #f5f8f3));\n }\n\n /* ─── Selected State ─── */\n\n :host([selected]) .tab {\n color: var(--hx-tabs-tab-active-color, var(--hx-color-text-link, #0f6363));\n border-bottom-color: var(\n --_tab-indicator-bottom-color,\n var(--hx-tabs-indicator-color, var(--hx-color-primary-500, #429797))\n );\n border-inline-end-color: var(--_tab-indicator-end-color, transparent);\n font-weight: var(--hx-tabs-tab-active-font-weight, var(--hx-font-weight-semibold, 600));\n }\n\n /* ─── Focus State ───\n Focus lands on the HOST in Group 5a host-canonical mode. The inner\n [part=\"tab\"] is presentational (tabindex=-1). Paint the ring on BOTH\n the host and the inner [part=\"tab\"] so:\n (1) the visible affordance lives on the styled tab surface\n (2) the host carries a measurable computed outline-width — required\n by AAA 2.4.13 verification harnesses that read getComputedStyle\n on the focused element itself (not its shadow descendants in\n the slotted-host scenario where the parent <hx-tabs> walker\n cannot reach into the slotted child's shadow root). */\n\n :host(:focus-visible) {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n :host(:focus-visible) .tab {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n /* Strip the default :focus state — :focus-visible above provides the\n ring for keyboard interaction. */\n :host(:focus:not(:focus-visible)) {\n outline: none;\n }\n\n /* ─── Disabled State ─── */\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n :host([disabled]) .tab {\n pointer-events: none;\n color: var(--hx-tabs-tab-disabled-color, var(--hx-color-neutral-400, #8e9c98));\n }\n\n /* ─── Prefix / Suffix Slots ─── */\n\n .tab__prefix,\n .tab__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .tab {\n transition: none;\n }\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .tab {\n forced-color-adjust: none;\n color: ButtonText;\n border-bottom-color: transparent;\n background-color: ButtonFace;\n }\n\n :host([selected]) .tab {\n color: HighlightText;\n background-color: Highlight;\n border-bottom-color: Highlight;\n }\n\n :host(:focus-visible),\n :host(:focus-visible) .tab {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n :host([disabled]) .tab {\n color: GrayText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixTabStyles } from './hx-tab.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport {\n installAriaIdrefMirror,\n resolveIdrefTokens,\n supportsIdrefElementReferences,\n type AriaIdrefMirrorHandle,\n} from '../../utils/aria-idref.js';\nimport { flattenAccName } from '../../utils/aria-flatten.js';\n\n/**\n * An individual tab button, designed to be used inside an `<hx-tabs>` container.\n * Must be placed in the `tab` named slot of `<hx-tabs>`.\n *\n * Group 5a host-canonical: `role=\"tab\"` lives on the **host** via\n * `_internals.role`. The host is the focusable surface (carries the roving\n * tabindex); the inner `<button>` retains click activation semantics\n * (Enter/Space and pointer events) but is no longer the AT-announced surface\n * — its role and ARIA state are stripped on the modern path so the host's\n * canonical surface wins. `internals.ariaSelected`, `ariaDisabled`, and\n * `ariaControlsElements` mirror reactive state. The host `aria-label` /\n * `aria-labelledby` resolved via the shared IDREF mirror name the tab\n * cross-shadow.\n *\n * @summary Presentational tab button that activates a corresponding panel.\n *\n * @tag hx-tab\n *\n * @slot - Default slot for the tab label text or content.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Icon or content rendered after the label.\n *\n * @csspart tab - The underlying button element.\n * @csspart prefix - The container for prefix slot content (e.g. icons).\n * @csspart suffix - The container for suffix slot content (e.g. badges).\n *\n * @cssprop [--hx-tabs-tab-color=var(--hx-color-neutral-600, #4A5362)] - Inactive tab text color.\n * @cssprop [--hx-tabs-tab-active-color=var(--hx-color-primary-600, #0F7078)] - Active tab text color.\n * @cssprop [--hx-tabs-tab-hover-color=var(--hx-color-neutral-800, #202B39)] - Tab hover text color.\n * @cssprop [--hx-tabs-tab-hover-bg=var(--hx-color-neutral-50, #F5F8F3)] - Tab hover background.\n * @cssprop [--hx-tabs-tab-font-size=var(--hx-font-size-md, 1rem)] - Tab font size.\n * @cssprop [--hx-tabs-tab-font-weight=var(--hx-font-weight-medium, 500)] - Tab font weight.\n * @cssprop [--hx-tabs-tab-active-font-weight=var(--hx-font-weight-semibold, 600)] - Active tab font weight.\n * @cssprop [--hx-tabs-tab-padding-x=var(--hx-space-4, 1rem)] - Horizontal tab padding.\n * @cssprop [--hx-tabs-tab-padding-y=var(--hx-space-2, 0.5rem)] - Vertical tab padding.\n * @cssprop [--hx-tabs-indicator-color=var(--hx-color-primary-500, #429797)] - Active indicator color.\n * @cssprop [--hx-tabs-indicator-size=2px] - Active indicator thickness.\n * @cssprop [--hx-tabs-focus-ring-color=var(--hx-focus-ring-color, #6AB1B1)] - Focus ring color.\n */\n@customElement('hx-tab')\nexport class HelixTab extends HelixElement {\n static override styles = [helixTabStyles, forcedColorsInteractive];\n\n // ─── Properties ───\n\n /**\n * The name of the `<hx-tab-panel>` this tab controls. Must match the `name`\n * attribute on the corresponding `<hx-tab-panel>`.\n * @attr panel\n */\n @property({ type: String, reflect: true })\n panel = '';\n\n /**\n * Whether this tab is currently selected. Managed by the parent `<hx-tabs>`.\n * @attr selected\n */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /**\n * Whether this tab is disabled. Prevents selection and keyboard navigation.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * The id of the panel this tab controls. Set by the parent `<hx-tabs>` to\n * establish the aria-controls relationship via element references on the\n * host (modern path) or as a string fallback (legacy path).\n * @internal\n */\n @property({ type: String, attribute: false })\n controls = '';\n\n // ─── Host-canonical ARIA bookkeeping ───\n\n /** @internal */\n @state() private _supportsIdrefRefs = true;\n\n /** @internal */\n private _ariaMirror: AriaIdrefMirrorHandle | null = null;\n\n /**\n * Element reference for the controlled `<hx-tab-panel>` host. Set by the\n * parent `<hx-tabs>` via `setControlsPanel()` and projected onto\n * `internals.ariaControlsElements` so cross-shadow controls resolution\n * works via IDL element references. Falls through to the `controls`\n * string property on the legacy path.\n * @internal\n */\n private _controlledPanel: Element | null = null;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._supportsIdrefRefs = supportsIdrefElementReferences(this._internals);\n if (!this.closest('hx-tabs')) {\n devWarn('hx-tab', 'hx-tab must be a direct child of hx-tabs to function correctly.');\n }\n this._syncHostAriaSemantics();\n this._ariaMirror = installAriaIdrefMirror(this, () => {\n this._syncHostAriaSemantics();\n });\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._ariaMirror?.disconnect();\n this._ariaMirror = null;\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (\n changedProperties.has('selected') ||\n changedProperties.has('disabled') ||\n changedProperties.has('controls') ||\n changedProperties.has('panel')\n ) {\n this._syncHostAriaSemantics();\n }\n }\n\n /**\n * Set by `<hx-tabs>` whenever the tab→panel relationship is recomputed.\n * Drives `internals.ariaControlsElements` (modern path) so AT walks across\n * the shadow boundary to the controlled panel by element reference.\n * @internal\n */\n setControlsPanel(panel: Element | null): void {\n this._controlledPanel = panel;\n this._syncHostAriaSemantics();\n }\n\n /**\n * Mirror reactive ARIA state onto ElementInternals on the **host**. The\n * inner `<button>` no longer carries role/aria-* on the modern path — the\n * host is the canonical AT-announced surface. The button stays as the\n * activation surface (Enter/Space/click) but is `tabindex=-1` and\n * presentational from AT's perspective.\n * @internal\n */\n private _syncHostAriaSemantics(): void {\n const internals = this._internals;\n internals.role = 'tab';\n internals.ariaSelected = this.selected ? 'true' : 'false';\n internals.ariaDisabled = this.disabled ? 'true' : null;\n\n // ariaControls — modern path uses element references; legacy path falls\n // back to a string IDREF (set on the host element directly via\n // setAttribute below so AT that does not implement element references\n // still has a token to walk).\n type InternalsWithRefs = ElementInternals & {\n ariaControlsElements: Element[] | null;\n ariaLabelledByElements: Element[] | null;\n };\n\n if (this._supportsIdrefRefs) {\n const refsInternals = internals as InternalsWithRefs;\n refsInternals.ariaControlsElements = this._controlledPanel ? [this._controlledPanel] : null;\n }\n\n // Resolve consumer host aria-labelledby / aria-label so the tab announces\n // with the consumer's chosen name when present. Default name comes from\n // the slotted text content (handled by AT walking the host's children\n // through the shadow slot — works for accessible name computation in\n // modern engines because the host carries the role).\n const consumerLabelledBy = this.getAttribute('aria-labelledby');\n const hostAriaLabel = this.getAttribute('aria-label');\n const labelEls = resolveIdrefTokens(this, consumerLabelledBy);\n\n if (this._supportsIdrefRefs) {\n const refsInternals = internals as InternalsWithRefs;\n refsInternals.ariaLabelledByElements = labelEls.length > 0 ? labelEls : null;\n }\n\n if (hostAriaLabel && hostAriaLabel.trim()) {\n internals.ariaLabel = hostAriaLabel;\n } else if (!this._supportsIdrefRefs && labelEls.length > 0) {\n // Legacy fallback: flatten consumer aria-labelledby targets into a\n // string so AT without IDL refs still names the tab.\n internals.ariaLabel =\n labelEls\n .map((el) => flattenAccName(el))\n .filter(Boolean)\n .join(' ') || null;\n } else {\n internals.ariaLabel = null;\n }\n }\n\n // ─── Slot Visibility ───\n\n /** @internal */\n @state() private _hasPrefixSlot = false;\n /** @internal */\n @state() private _hasSuffixSlot = false;\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleClick(): void {\n if (this.disabled) {\n return;\n }\n /**\n * Internal event dispatched to signal tab selection to the parent container.\n * Not part of the public API.\n * @internal\n */\n this.dispatchEvent(\n new CustomEvent<{ panel: string }>('hx-tab-select', {\n bubbles: true,\n composed: true,\n detail: { panel: this.panel },\n }),\n );\n }\n\n /** @internal */\n private _handlePrefixSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasPrefixSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n /** @internal */\n private _handleSuffixSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasSuffixSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Render ───\n\n override render() {\n // Host-canonical Path A: `role=\"tab\"`, `aria-selected`, `aria-disabled`,\n // and `aria-controls` are projected onto the HOST via `_internals` —\n // NOT on the inner button. The inner button is the activation surface\n // (Enter/Space/click) but is presentational from AT's perspective:\n // tabindex=-1 keeps focus on the host (which carries the roving tabindex\n // managed by `<hx-tabs>`), and no role/aria-* attributes leak through.\n //\n // Legacy fallback: when the platform lacks IDL element references on\n // ElementInternals, mirror `aria-controls` as a string IDREF on the host\n // so AT that walks string tokens still resolves the panel relationship.\n if (!this._supportsIdrefRefs && this.controls) {\n this.setAttribute('aria-controls', this.controls);\n } else if (this._supportsIdrefRefs && this.hasAttribute('aria-controls')) {\n this.removeAttribute('aria-controls');\n }\n\n // Modern path: the inner element is a presentational <div> click\n // surface — no native button semantics to leak to AT alongside the\n // host's `role=\"tab\"`. ARIA 1.2 forbids `role=\"presentation\"` on\n // focusable elements, so the cleanest strip is to use a non-button\n // tag. Click handler still fires; keyboard activation is owned by the\n // parent `<hx-tabs>` keydown handler operating on the host (which\n // carries the canonical `role=\"tab\"` + roving tabindex).\n //\n // Legacy fallback (no IDL element references): keep the `<button>`\n // with `role=\"tab\"` and ARIA state on the button, since `_internals`\n // can't expose element-references on engines without that API. The\n // host attribute mirror (this.controls → aria-controls string) is\n // applied above for AT that walks string IDREFs.\n if (this._supportsIdrefRefs) {\n // `aria-disabled` is mirrored on the inner element so axe-core's\n // color-contrast rule recognizes the disabled state and excludes the\n // surface from contrast checks (axe excludes `aria-disabled=\"true\"`\n // elements). The HOST is the canonical AT surface — its\n // `internals.ariaDisabled` is what AT announces; this attribute on the\n // inner div is a presentational signal for static analyzers and CSS.\n return html`\n <div\n part=\"tab\"\n class=\"tab\"\n tabindex=\"-1\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n @click=${this._handleClick}\n >\n <span part=\"prefix\" class=\"tab__prefix\" ?hidden=${!this._hasPrefixSlot}>\n <slot name=\"prefix\" @slotchange=${this._handlePrefixSlotChange}></slot>\n </span>\n <slot></slot>\n <span part=\"suffix\" class=\"tab__suffix\" ?hidden=${!this._hasSuffixSlot}>\n <slot name=\"suffix\" @slotchange=${this._handleSuffixSlotChange}></slot>\n </span>\n </div>\n `;\n }\n\n return html`\n <button\n part=\"tab\"\n class=\"tab\"\n role=\"tab\"\n tabindex=\"-1\"\n aria-selected=${this.selected ? 'true' : 'false'}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n aria-controls=${this.controls || nothing}\n @click=${this._handleClick}\n >\n <span part=\"prefix\" class=\"tab__prefix\" ?hidden=${!this._hasPrefixSlot}>\n <slot name=\"prefix\" @slotchange=${this._handlePrefixSlotChange}></slot>\n </span>\n <slot></slot>\n <span part=\"suffix\" class=\"tab__suffix\" ?hidden=${!this._hasSuffixSlot}>\n <slot name=\"suffix\" @slotchange=${this._handleSuffixSlotChange}></slot>\n </span>\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tab': HelixTab;\n }\n}\n","import { css } from 'lit';\n\nexport const helixTabPanelStyles = css`\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n :host(:focus-visible) {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n .panel {\n padding: var(--hx-tabs-panel-padding, var(--hx-space-4, 1rem));\n font-family: var(--hx-tab-panel-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--hx-tabs-panel-color, var(--hx-color-neutral-700, #313e4b));\n line-height: var(--hx-line-height-normal, 1.5);\n outline: none;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n :host(:focus-visible) {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .panel {\n color: CanvasText;\n }\n }\n`;\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\nimport { helixTabPanelStyles } from './hx-tab-panel.styles.js';\nimport {\n installAriaIdrefMirror,\n resolveIdrefTokens,\n supportsIdrefElementReferences,\n type AriaIdrefMirrorHandle,\n} from '../../utils/aria-idref.js';\n\n/**\n * A content panel associated with an `<hx-tab>`, managed by a parent `<hx-tabs>`.\n * Group 5a host-canonical: `role=\"tabpanel\"` lives on the host via\n * `_internals.role`. The host carries the canonical AT surface — consumer\n * `aria-labelledby` / `aria-describedby` on the host resolve through the\n * shared IDREF mirror. The parent `hx-tabs` writes `internals.ariaLabelledByElements`\n * referencing the corresponding `<hx-tab>` host so cross-shadow naming works\n * via IDL element references (the modern path) without serializing tab text.\n *\n * @summary Tab content panel shown when its corresponding tab is selected.\n *\n * @tag hx-tab-panel\n *\n * @slot - Default slot for panel content.\n *\n * @csspart panel - The panel content wrapper.\n *\n * @cssprop [--hx-tabs-panel-padding=var(--hx-space-4, 1rem)] - Panel inner padding.\n * @cssprop [--hx-tabs-panel-color=var(--hx-color-neutral-700, #313E4B)] - Panel text color.\n * @cssprop [--hx-tabs-focus-ring-color=var(--hx-focus-ring-color, #6AB1B1)] - Focus ring color.\n */\n@customElement('hx-tab-panel')\nexport class HelixTabPanel extends HelixElement {\n static override styles = [helixTabPanelStyles, forcedColorsField];\n\n // ─── Properties ───\n\n /**\n * The name that corresponds to the `panel` attribute on the associated `<hx-tab>`.\n * @attr name\n */\n @property({ type: String, reflect: true })\n name = '';\n\n // ─── Host-canonical ARIA bookkeeping ───\n\n /**\n * Element references for the controlling `<hx-tab>` host(s). Set by the\n * parent `<hx-tabs>` via `setLabelledByTabs()` and projected onto\n * `internals.ariaLabelledByElements` so cross-shadow naming via IDL element\n * references resolves to the live tab host without flattening text.\n * @internal\n */\n private _labelledByTabs: Element[] = [];\n\n /**\n * Whether the platform supports IDL element references on `ElementInternals`.\n * @internal\n */\n @state() private _supportsIdrefRefs = true;\n\n /** @internal */\n private _ariaMirror: AriaIdrefMirrorHandle | null = null;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._supportsIdrefRefs = supportsIdrefElementReferences(this._internals);\n // Host-canonical role via ElementInternals — replaces the imperative\n // setAttribute('role', 'tabpanel') from pre-aria-group-5 code.\n this._internals.role = 'tabpanel';\n this._syncHostAriaSemantics();\n this._ariaMirror = installAriaIdrefMirror(this, () => {\n this._syncHostAriaSemantics();\n });\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._ariaMirror?.disconnect();\n this._ariaMirror = null;\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n this._syncHostAriaSemantics();\n }\n\n /**\n * Set by `<hx-tabs>` whenever the tab→panel relationship is recomputed.\n * Drives `internals.ariaLabelledByElements` so AT walks across the shadow\n * boundary to the announcing tab host(s) by element reference rather than\n * IDREF string. Pass an empty array to clear.\n * @internal\n */\n setLabelledByTabs(tabs: Element[]): void {\n this._labelledByTabs = tabs;\n this._syncHostAriaSemantics();\n }\n\n /** @internal */\n private _syncHostAriaSemantics(): void {\n const internals = this._internals;\n // Re-assert role on every sync so a stale connect path doesn't leave the\n // panel role-less if internals are accessed before connect (e.g. tests).\n internals.role = 'tabpanel';\n\n // Resolve consumer-supplied IDREFs — host-canonical: light-DOM aria-labelledby\n // / aria-describedby on `<hx-tab-panel>` should reach the announced surface.\n const consumerLabelledBy = this.getAttribute('aria-labelledby');\n const consumerDescribedBy = this.getAttribute('aria-describedby');\n const consumerLabelEls = resolveIdrefTokens(this, consumerLabelledBy);\n const consumerDescEls = resolveIdrefTokens(this, consumerDescribedBy);\n\n // Host aria-label, if explicitly provided by the consumer, wins.\n const hostAriaLabel = this.getAttribute('aria-label');\n\n // Build the labelledBy element list: consumer takes precedence; otherwise\n // fall back to the parent-projected `<hx-tab>` host references so the\n // panel announces with the tab's accessible name without text flattening.\n const labelEls: Element[] =\n consumerLabelEls.length > 0 ? consumerLabelEls : [...this._labelledByTabs];\n\n type InternalsWithRefs = ElementInternals & {\n ariaLabelledByElements: Element[] | null;\n ariaDescribedByElements: Element[] | null;\n };\n\n if (this._supportsIdrefRefs) {\n const refsInternals = internals as InternalsWithRefs;\n refsInternals.ariaLabelledByElements = labelEls.length > 0 ? labelEls : null;\n refsInternals.ariaDescribedByElements = consumerDescEls.length > 0 ? consumerDescEls : null;\n // Modern path: the consumer's `aria-label` (if any) wins via internals.\n // When absent, leave it null so the element-references path supplies the name.\n internals.ariaLabel = hostAriaLabel && hostAriaLabel.trim() ? hostAriaLabel : null;\n } else {\n // No-IDL-ref fallback: cross-shadow tab→panel naming via element refs is\n // unavailable. The parent `hx-tabs` mirrors a serialized `aria-label`\n // string onto the host attribute (legacy fallback) — leave that in\n // place. Consumer `aria-label` overrides via internals string.\n internals.ariaLabel = hostAriaLabel && hostAriaLabel.trim() ? hostAriaLabel : null;\n }\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div part=\"panel\" class=\"panel\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tab-panel': HelixTabPanel;\n }\n}\n"],"names":["helixTabsStyles","css","_nextTabsId","createIdCounter","HelixTabs","HelixElement","e","tab","el","p","firstEnabled","allTabs","isHorizontal","prevKey","nextKey","focusedTab","currentIndex","activeTab","nextIndex","targetTab","name","old","value","index","supportsIdrefElementReferences","installAriaIdrefMirror","_a","_b","pendingTab","changedProperties","internals","hostAriaLabel","consumerLabelledBy","labelEls","resolveIdrefTokens","hasEffectiveLabelledBy","refsInternals","flattenAccName","tabs","panels","tabId","panelName","panel","panelId","tabLabel","node","isSelected","dispatchEvent","previousPanel","tabSlot","panelSlot","invalid","devWarn","html","forcedColorsInteractive","__decorateClass","property","state","customElement","helixTabStyles","HelixTab","slot","nothing","helixTabPanelStyles","HelixTabPanel","consumerDescribedBy","consumerLabelEls","consumerDescEls","forcedColorsField"],"mappings":"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"}

package/dist/shared/{hx-text-input-D6FlOZM-.js → hx-text-input-V5sQOpDh.js} RENAMED Viewed

@@ -287,7 +287,10 @@ const T = (e) => {
     font-size: var(--_text-input-font-size);
     color: var(--_text-input-color);
     line-height: var(--hx-line-height-normal, 1.5);
-    min-height: var(--hx-size-10, 2.5rem);
+    /* WCAG 2.5.5 (Enhanced) AAA — primary input surface must meet 44×44.
+       --hx-touch-target-min resolves to 2.75rem (44px); --hx-size-10 alone
+       resolves to 2.5rem (40px) and fails AAA on the inner input. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
     width: 100%;
   }
@@ -707,4 +710,4 @@ export {
   T as F,
   r as H
 };
-//# sourceMappingURL=hx-text-input-D6FlOZM-.js.map
+//# sourceMappingURL=hx-text-input-V5sQOpDh.js.map

package/dist/shared/hx-text-input-V5sQOpDh.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-text-input-V5sQOpDh.js","sources":["../../src/mixins/FocusMixin.ts","../../src/components/hx-text-input/hx-text-input.styles.ts","../../src/components/hx-text-input/hx-text-input.ts"],"sourcesContent":["import { LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n * Mixin constructor type — must use `any[]` args per TypeScript mixin requirements (TS2545).\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T = object> = new (...args: any[]) => T;\n\n/**\n * The public interface added by FocusMixin.\n * Consumers can use this type for typed references.\n *\n * @public\n */\nexport interface FocusMixinInterface {\n /** True when the component host has focus (including descendant focus). */\n readonly focused: boolean;\n /** True when focus arrived via keyboard (not pointer). */\n readonly focusedVisible: boolean;\n}\n\n/**\n * FocusMixin — standardized focus delegation for HELiX web components.\n *\n * Modeled after Lion's `FocusMixin` and Material Web's `mixinDelegatesAria`.\n * Provides:\n * - `_focusableNode` getter for subclasses to declare the inner focusable element\n * - `focused` reflected attribute as a styling hook for `:host([focused])`\n * - `focusedVisible` reflected attribute for keyboard-only focus rings\n * - Delegated `focus()` / `blur()` routing to the inner element\n * - Autofocus support after first render\n *\n * ### Usage\n *\n * ```ts\n * class MyInput extends FocusMixin(HelixElement) {\n * @query('input') private _input: HTMLInputElement | undefined;\n *\n * protected override get _focusableNode(): HTMLElement | null {\n * return this._input ?? null;\n * }\n * }\n * ```\n *\n * @param superClass - A Lit element constructor to mix into\n * @returns A new class with focus management capabilities\n *\n * @public\n */\nexport const FocusMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n class FocusMixinClass extends superClass implements FocusMixinInterface {\n /**\n * True when the component or any of its descendants has focus.\n * Reflects to attribute `focused` for CSS selector use.\n *\n * @attr focused\n */\n @property({ type: Boolean, reflect: true })\n focused = false;\n\n /**\n * True when focus was reached via keyboard navigation (Tab / Shift+Tab)\n * rather than pointer interaction. Reflects to attribute `focused-visible`\n * for rendering keyboard-only focus rings.\n *\n * @attr focused-visible\n */\n @property({ type: Boolean, reflect: true, attribute: 'focused-visible' })\n focusedVisible = false;\n\n /** @internal — whether a `focus()` call was queued before first render */\n private _focusPending = false;\n\n /**\n * @internal — tracks whether the most recent interaction toward this\n * element was via pointer (true) or keyboard (false).\n *\n * Set to false on `pointerdown` so that the subsequent `focusin` can\n * determine it is not keyboard-initiated.\n */\n private _lastInteractionWasPointer = false;\n\n /**\n * Returns the inner focusable element that `focus()` and `blur()` will\n * delegate to. Subclasses MUST override this getter.\n *\n * @returns The inner focusable element, or `null` if not yet rendered.\n * @internal\n */\n protected get _focusableNode(): HTMLElement | null {\n return null;\n }\n\n /**\n * Delegates focus to the inner focusable element.\n * If the element has not yet rendered, queues the focus call for\n * `firstUpdated`.\n */\n override focus(options?: FocusOptions): void {\n const node = this._focusableNode;\n if (node !== null) {\n node.focus(options);\n } else {\n this._focusPending = true;\n }\n }\n\n /** Delegates blur to the inner focusable element. */\n override blur(): void {\n this._focusableNode?.blur();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('focusin', this._handleFocusIn);\n this.addEventListener('focusout', this._handleFocusOut);\n this.addEventListener('pointerdown', this._handlePointerDown);\n this.addEventListener('keydown', this._handleKeyDown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('focusin', this._handleFocusIn);\n this.removeEventListener('focusout', this._handleFocusOut);\n this.removeEventListener('pointerdown', this._handlePointerDown);\n this.removeEventListener('keydown', this._handleKeyDown);\n }\n\n override firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n\n // Honour the native `autofocus` attribute after the first render cycle\n if (this.hasAttribute('autofocus')) {\n this.focus();\n }\n\n // Flush any focus() call that arrived before the shadow DOM was stamped\n if (this._focusPending) {\n this._focusPending = false;\n this.focus();\n }\n }\n\n // ─── Private Event Handlers ────────────────────────────────────────────────\n\n /** @internal */\n private _handleFocusIn = (): void => {\n this.focused = true;\n // focusedVisible is true only when focus arrived via keyboard\n this.focusedVisible = !this._lastInteractionWasPointer;\n };\n\n /** @internal */\n private _handleFocusOut = (): void => {\n this.focused = false;\n this.focusedVisible = false;\n // Reset for the next interaction cycle\n this._lastInteractionWasPointer = false;\n };\n\n /**\n * Marks the next focusin as pointer-initiated.\n * @internal\n */\n private _handlePointerDown = (): void => {\n this._lastInteractionWasPointer = true;\n };\n\n /**\n * Ensures that keyboard navigation (Tab / Shift+Tab arriving from outside)\n * is correctly flagged as keyboard-initiated even when no prior `pointerdown`\n * fired on this element.\n *\n * This fires BEFORE `focusin` so the flag is in the correct state when\n * `_handleFocusIn` runs.\n * @internal\n */\n private _handleKeyDown = (): void => {\n this._lastInteractionWasPointer = false;\n };\n }\n\n return FocusMixinClass as unknown as T & Constructor<FocusMixinInterface>;\n};\n","import { css } from 'lit';\n\n/**\n * hx-text-input styles.\n *\n * Component-tier tokens introduced in 3.2.0 — every visual property exposes\n * `--hx-text-input-*` overrides while preserving backward-compatible\n * `--hx-input-*` aliases that earlier consumers may already use.\n *\n * Two-level var() fallback pattern is canonical:\n * var(--hx-text-input-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (primary-600=#0F7078,\n * neutral-200=#D6DBD5, etc.) introduced in the same release.\n */\nexport const helixTextInputStyles = css`\n :host {\n display: block;\n\n /* ─── Component tokens (3.2.0) ──────────────────────────────────── */\n\n /* Surface */\n --_text-input-bg: var(\n --hx-text-input-bg,\n var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))\n );\n --_text-input-color: var(\n --hx-text-input-color,\n var(--hx-input-color, var(--hx-color-text-strong, #202b39))\n );\n --_text-input-placeholder-color: var(\n --hx-text-input-placeholder-color,\n var(--hx-color-text-placeholder, #66787b)\n );\n\n /* Border */\n --_text-input-border-color: var(\n --hx-text-input-border-color,\n var(--hx-input-border-color, var(--hx-color-border-strong, #66787b))\n );\n --_text-input-border-color-hover: var(\n --hx-text-input-border-color-hover,\n var(--hx-color-border-strong, #66787b)\n );\n --_text-input-border-color-focus: var(\n --hx-text-input-border-color-focus,\n var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #0f7078))\n );\n --_text-input-border-color-invalid: var(\n --hx-text-input-border-color-invalid,\n var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))\n );\n --_text-input-border-width: var(--hx-text-input-border-width, var(--hx-border-width-thin, 1px));\n --_text-input-border-radius: var(\n --hx-text-input-border-radius,\n var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))\n );\n\n /* Spacing */\n --_text-input-padding-x: var(--hx-text-input-padding-x, var(--hx-space-3, 0.75rem));\n --_text-input-padding-y: var(--hx-text-input-padding-y, var(--hx-space-2, 0.5rem));\n\n /* Typography */\n --_text-input-font-family: var(\n --hx-text-input-font-family,\n var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))\n );\n --_text-input-font-size: var(--hx-text-input-font-size, var(--hx-font-size-md, 1rem));\n\n /* Focus ring */\n --_text-input-focus-ring-color: var(\n --hx-text-input-focus-ring-color,\n var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #0f7078))\n );\n --_text-input-focus-ring-width: var(\n --hx-text-input-focus-ring-width,\n var(--hx-focus-ring-width, 2px)\n );\n --_text-input-focus-ring-offset: var(\n --hx-text-input-focus-ring-offset,\n var(--hx-focus-ring-offset, 0px)\n );\n\n /* Disabled */\n --_text-input-disabled-bg: var(\n --hx-text-input-disabled-bg,\n var(--hx-color-surface-sunken, #ebeee9)\n );\n --_text-input-disabled-color: var(\n --hx-text-input-disabled-color,\n var(--hx-color-text-disabled, #8e9c98)\n );\n\n /* Label / help / error */\n --_text-input-label-color: var(\n --hx-text-input-label-color,\n var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))\n );\n --_text-input-help-text-color: var(\n --hx-text-input-help-text-color,\n var(--hx-color-text-muted, #4a5362)\n );\n --_text-input-error-color: var(\n --hx-text-input-error-color,\n var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))\n );\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n /*\n * Attribute-based focus hooks set by FocusMixin.\n * :host([focused]) — fires whenever the component or any descendant has focus.\n * :host([focused-visible]) — fires only for keyboard-initiated focus.\n * These complement the :focus-within rules on .field__input-wrapper and are\n * exposed as theming hooks for consumers who target the host element.\n */\n :host([focused]) .field__input-wrapper,\n :host([focused-visible]) .field__input-wrapper {\n border-color: var(--_text-input-border-color-focus);\n box-shadow: 0 0 0 var(--_text-input-focus-ring-width)\n color-mix(\n in srgb,\n var(--_text-input-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n * {\n box-sizing: border-box;\n }\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--_text-input-font-family);\n }\n\n /* ─── Label ─── */\n\n .field__label-wrapper {\n display: contents;\n }\n\n .field__label {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1, 0.25rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--_text-input-label-color);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__required-marker {\n color: var(--_text-input-error-color);\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n /* ─── Input Wrapper ─── */\n\n .field__input-wrapper {\n display: flex;\n align-items: center;\n border: var(--_text-input-border-width) solid var(--_text-input-border-color);\n border-radius: var(--_text-input-border-radius);\n background-color: var(--_text-input-bg);\n transition:\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n overflow: hidden;\n }\n\n .field__input-wrapper:hover {\n border-color: var(--_text-input-border-color-hover);\n }\n\n .field__input-wrapper:focus-within {\n border-color: var(--_text-input-border-color-focus);\n box-shadow: 0 0 0 var(--_text-input-focus-ring-width)\n color-mix(\n in srgb,\n var(--_text-input-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n /* ─── Error State ─── */\n\n .field--error .field__input-wrapper {\n border-color: var(--_text-input-border-color-invalid);\n }\n\n .field--error .field__input-wrapper:focus-within {\n border-color: var(--_text-input-border-color-invalid);\n box-shadow: 0 0 0 var(--_text-input-focus-ring-width)\n color-mix(\n in srgb,\n var(--_text-input-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n /* ─── Slots (Prefix / Suffix) ─── */\n\n .field__prefix,\n .field__suffix {\n display: flex;\n align-items: center;\n color: var(--hx-color-text-muted, #4a5362);\n flex-shrink: 0;\n }\n\n /* Only add padding when slot has content — avoids phantom space on empty slots */\n .field__prefix--filled {\n padding: 0 var(--_text-input-padding-x);\n }\n\n .field__suffix--filled {\n padding: 0 var(--_text-input-padding-x);\n }\n\n /* ─── Native Input ─── */\n\n .field__input {\n flex: 1;\n border: none;\n outline: none;\n background: transparent;\n padding: var(--_text-input-padding-y) var(--_text-input-padding-x);\n font-family: inherit;\n font-size: var(--_text-input-font-size);\n color: var(--_text-input-color);\n line-height: var(--hx-line-height-normal, 1.5);\n /* WCAG 2.5.5 (Enhanced) AAA — primary input surface must meet 44×44.\n --hx-touch-target-min resolves to 2.75rem (44px); --hx-size-10 alone\n resolves to 2.5rem (40px) and fails AAA on the inner input. */\n min-height: var(--hx-touch-target-min, 2.75rem);\n width: 100%;\n }\n\n .field__input::placeholder {\n color: var(--_text-input-placeholder-color);\n }\n\n .field__input:focus-visible {\n outline: none; /* wrapper ring handles keyboard focus indication */\n }\n\n .field__input:disabled {\n cursor: not-allowed;\n background-color: var(--_text-input-disabled-bg);\n color: var(--_text-input-disabled-color);\n }\n\n :host([disabled]) .field__input-wrapper {\n background-color: var(--_text-input-disabled-bg);\n }\n\n /* ─── Size Variants ─── */\n\n .field--size-sm .field__input {\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n min-height: var(--hx-size-8, 2rem);\n font-size: var(--hx-text-input-sm-font-size, var(--hx-input-sm-font-size, 0.875rem));\n }\n\n .field--size-md .field__input {\n /* md is the default — no overrides needed */\n }\n\n .field--size-lg .field__input {\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n min-height: var(--hx-size-12, 3rem);\n font-size: var(--hx-text-input-lg-font-size, var(--hx-input-lg-font-size, 1.125rem));\n }\n\n /* ─── Help Text & Error Messages ─── */\n\n .field__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--_text-input-help-text-color);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--_text-input-error-color);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n /* ─── Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .field__input-wrapper {\n transition: none;\n }\n }\n\n /* ─── High Contrast Mode (forced-colors) ───\n *\n * Bespoke block — sole owner of forced-colors deference for hx-text-input.\n * Covers wrapper/input/placeholder/focus/disabled/error/label/help-text;\n * strictly more than forcedColorsField. The mixin is intentionally NOT\n * composed (XOR rule — see styles/forced-colors.ts COMPOSITION RULES).\n */\n\n @media (forced-colors: active) {\n .field__input-wrapper {\n forced-color-adjust: none;\n background-color: Field;\n color: FieldText;\n border: 2px solid ButtonText;\n }\n\n .field__input {\n color: FieldText;\n }\n\n .field__input::placeholder {\n color: GrayText;\n }\n\n .field__input-wrapper:focus-within {\n border-color: Highlight;\n box-shadow: none;\n }\n\n .field__input:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: -3px;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n :host([disabled]) .field__input-wrapper {\n border-color: GrayText;\n color: GrayText;\n }\n\n :host([disabled]) .field__input {\n color: GrayText;\n }\n\n .field--error .field__input-wrapper {\n border-color: LinkText;\n }\n\n .field__label {\n color: CanvasText;\n }\n\n .field__help-text {\n color: GrayText;\n }\n\n .field__error {\n color: LinkText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FocusMixin } from '../../mixins/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixTextInputStyles } from './hx-text-input.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n// Module-level counter for stable, SSR-compatible IDs (avoids Math.random() hydration mismatch)\nconst _nextTextInputId = createIdCounter('hx-text-input');\n\n/** Detail for hx-input and hx-change events dispatched by hx-text-input. */\nexport interface HxTextInputDetail {\n value: string;\n}\n\n/**\n * A text input component with label, validation, and form association.\n * Supports accessible labeling via `label` property, `aria-label` attribute, or the `label` slot.\n * Uses `aria-invalid` and `aria-describedby` on the native input for screen reader support. Native `required` provides implicit aria-required mapping per HTML-AAM.\n * Error messages are announced via `role=\"alert\"`. Keyboard navigation follows native input behavior.\n *\n * @summary Form-associated text input with built-in label, error, and help text.\n *\n * @tag hx-text-input\n *\n * @slot label - Custom label content (overrides the label property). Use for Drupal Form API rendered labels.\n * @slot prefix - Content rendered before the input (e.g., icon).\n * @slot suffix - Content rendered after the input (e.g., icon or button).\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property). Use for Drupal Form API rendered errors.\n *\n * @fires {CustomEvent<{value: string}>} hx-input - Dispatched on every keystroke as the user types.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the input loses focus after its value changed.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart input-wrapper - The wrapper around prefix, input, and suffix.\n * @csspart input - The native input element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-input-bg=var(--hx-color-surface-default)] - Input background color.\n * @cssprop [--hx-input-color=var(--hx-color-text-strong)] - Input text color.\n * @cssprop [--hx-input-border-color=var(--hx-color-border-strong)] - Input border color.\n * @cssprop [--hx-input-border-radius=var(--hx-border-radius-md)] - Input border radius.\n * @cssprop [--hx-input-font-family=var(--hx-font-family-sans)] - Input font family.\n * @cssprop [--hx-input-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-input-error-color=var(--hx-color-error-text)] - Error state color.\n * @cssprop [--hx-input-label-color=var(--hx-color-text-strong)] - Label text color.\n * @cssprop [--hx-input-sm-font-size=0.875rem] - Font size for the sm size variant.\n * @cssprop [--hx-input-lg-font-size=1.125rem] - Font size for the lg size variant.\n *\n * @cssprop [--hx-text-input-border-width=var(--hx-border-width-thin)] - Outer border-width override (canonical hx-{tag}-* prefix; sits above --hx-input-* aliases in the cascade).\n * @cssprop [--hx-text-input-padding-x=var(--hx-space-3)] - Outer horizontal padding override.\n * @cssprop [--hx-text-input-padding-y=var(--hx-space-2)] - Outer vertical padding override.\n * @cssprop [--hx-text-input-font-size=var(--hx-font-size-md)] - Outer font-size override.\n * @cssprop [--hx-text-input-sm-font-size] - Outer sm-variant font-size override (falls through to --hx-input-sm-font-size).\n * @cssprop [--hx-text-input-lg-font-size] - Outer lg-variant font-size override (falls through to --hx-input-lg-font-size).\n *\n * @cssprop [--hx-color-surface-default] - Resting field surface (semantic).\n * @cssprop [--hx-color-text-strong] - Resting input text + label color (semantic).\n * @cssprop [--hx-color-border-strong] - Resting border color (semantic).\n * @cssprop [--hx-color-error-text] - Error state text + border color (semantic).\n * @cssprop [--hx-color-error-600] - Error border primitive fallback inside the invalid-state cascade.\n * @aaa-certified 2026-05-08\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-text-input/AAA-AUDIT.md\n * @keyboard-contract activate=character-input; disabled-suppresses=true\n * @aria-pattern textbox\n * @aria-pattern-source https://www.w3.org/TR/wai-aria-1.2/#textbox\n * @forced-colors-supported true\n * @stability stable\n * @since 3.6.0\n * @form-associated true\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-text-input\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n */\n@customElement('hx-text-input')\nexport class HelixTextInput extends FocusMixin(FormMixin(HelixElement)) {\n // 3.2.1: forced-colors deference is owned by the bespoke @media block in\n // hx-text-input.styles.ts (covers wrapper/input/placeholder/focus/disabled/\n // error/label/help-text — strictly more than the shared mixin). XOR rule:\n // do NOT also compose forcedColorsField — overlapping selectors inside the\n // same media query create a fragile specificity war.\n static override styles = [helixTextInputStyles];\n\n // ─── Form Association ───\n\n /** @internal */\n static override formAssociated = true;\n\n // ─── Properties ───\n\n /**\n * The visible label text for the input.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Placeholder text shown when the input is empty.\n * @attr placeholder\n */\n @property({ type: String })\n placeholder = '';\n\n /**\n * The current value of the input.\n * @attr value\n * @remarks When `null` is passed programmatically, Lit coerces it to an empty string.\n * This is expected behavior — the input treats null as equivalent to an empty string value.\n */\n @property({ type: String })\n value = '';\n\n /**\n * The type of the native input element.\n * @attr type\n */\n @property({ type: String })\n type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' | 'date' = 'text';\n\n /**\n * Whether the input is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the input is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Error message to display. When set, the input enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the input for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * The name of the input, used for form submission.\n * @attr name\n */\n @property({ type: String, reflect: true })\n name = '';\n\n /**\n * Accessible name for screen readers, if different from the visible label.\n * Uses `accessible-label` attribute instead of `aria-label` to avoid\n * ARIAMixin shadowing on the host element. The value is forwarded to the\n * internal native input's `aria-label`.\n *\n * Note: `mixinDelegatesAria` is not applied to this component because form\n * inputs with associated labels delegate accessible naming via `<label>`\n * association and `aria-labelledby`, not host-level ARIA delegation. The\n * `accessible-label` attribute is a fallback for label-free usage.\n * @attr accessible-label\n */\n @property({ type: String, attribute: 'accessible-label' })\n accessibleLabel: string | null = null;\n\n /**\n * Whether the input is read-only.\n * @attr readonly\n */\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /**\n * Minimum number of characters allowed.\n * @attr minlength\n */\n @property({ type: Number })\n minlength: number | undefined = undefined;\n\n /**\n * Maximum number of characters allowed.\n * @attr maxlength\n */\n @property({ type: Number })\n maxlength: number | undefined = undefined;\n\n /**\n * A regular expression pattern the value must match for form validation.\n * @attr pattern\n */\n @property({ type: String })\n pattern = '';\n\n /**\n * Hint for the browser's autocomplete feature. Accepts standard HTML autocomplete values.\n * @attr autocomplete\n */\n @property({ type: String })\n autocomplete = '';\n\n /**\n * Validation message shown when the field is required but empty.\n * @attr required-message\n */\n @property({ attribute: 'required-message' })\n requiredMessage = 'This field is required.';\n\n /**\n * Visual size of the input field.\n * @attr hx-size\n */\n @property({ type: String, attribute: 'hx-size', reflect: true })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n // ─── Internal References ───\n\n /** @internal */\n @query('.field__input')\n private _input: HTMLInputElement | undefined;\n\n // ─── FocusMixin integration ───\n\n /**\n * Declares the inner focusable element for FocusMixin delegation.\n * @internal\n */\n protected get _focusableNode(): HTMLElement | null {\n return this._input ?? null;\n }\n\n // ─── Slot Tracking ───\n\n /** @internal */\n @state() private _hasLabelSlot = false;\n /** @internal */\n @state() private _hasErrorSlot = false;\n /** @internal */\n @state() private _hasPrefixSlot = false;\n /** @internal */\n @state() private _hasSuffixSlot = false;\n /** @internal */\n @state() private _hasHelpTextSlot = false;\n\n /** @internal */\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasLabelSlot = slot.assignedElements().length > 0;\n if (this._hasLabelSlot) {\n const slottedLabel = slot.assignedElements()[0];\n if (slottedLabel && !slottedLabel.id) {\n slottedLabel.id = `${this._inputId}-slotted-label`;\n }\n }\n }\n\n /** @internal */\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedElements().length > 0;\n }\n\n /** @internal */\n private _handlePrefixSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasPrefixSlot = slot.assignedElements().length > 0;\n }\n\n /** @internal */\n private _handleSuffixSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasSuffixSlot = slot.assignedElements().length > 0;\n }\n\n /** @internal */\n private _handleHelpTextSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHelpTextSlot = slot.assignedElements().length > 0;\n }\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n this._internals.setFormValue(this.value);\n }\n if (\n (changedProperties.has('value') || changedProperties.has('type')) &&\n this.type === 'number' &&\n this.value !== '' &&\n isNaN(Number(this.value))\n ) {\n devWarn(\n 'hx-text-input',\n `type=\"number\" received non-numeric value \"${this.value}\". Browser will display empty input.`,\n );\n }\n }\n\n // ─── Form Integration ───\n\n /** Returns the associated form element, if any. */\n override get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** Returns the validation message. */\n override get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Returns the ValidityState object. */\n override get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** @internal */\n _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || this.requiredMessage,\n this._input,\n );\n } else if (\n this.minlength !== undefined &&\n this.value.length > 0 &&\n this.value.length < this.minlength\n ) {\n this._internals.setValidity(\n { tooShort: true },\n this.error || `Please lengthen this text to ${this.minlength} characters or more.`,\n this._input,\n );\n } else if (this.maxlength !== undefined && this.value.length > this.maxlength) {\n this._internals.setValidity(\n { tooLong: true },\n this.error || `Please shorten this text to ${this.maxlength} characters or fewer.`,\n this._input,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n // ─── Form Lifecycle Hooks ───\n\n protected override _onFormReset(): void {\n this.value = '';\n this._internals.setFormValue('');\n this._resetInteractionState();\n }\n\n protected override _onFormStateRestore(\n state: File | string | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleInput(e: Event): void {\n const target = e.target as HTMLInputElement;\n this.value = target.value;\n this._internals.setFormValue(this.value);\n this._handleInteractionInput();\n\n /**\n * Dispatched on every keystroke as the user types.\n * @event hx-input\n */\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-input', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n /** @internal */\n private _handleChange(e: Event): void {\n const target = e.target as HTMLInputElement;\n this.value = target.value;\n this._internals.setFormValue(this.value);\n this._handleInteractionBlur();\n\n /**\n * Dispatched when the input loses focus after its value changed.\n * @event hx-change\n */\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n // ─── Public Methods ───\n\n /** Selects all text in the input. */\n select(): void {\n this._input?.select();\n }\n\n // ─── Render ───\n\n /** @internal */\n private _inputId = _nextTextInputId();\n /** @internal */\n private _helpTextId = `${this._inputId}-help`;\n /** @internal */\n private _errorId = `${this._inputId}-error`;\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n [`field--size-${this.size}`]: true,\n };\n\n const describedBy =\n [\n hasError ? this._errorId : null,\n this.helpText || this._hasHelpTextSlot ? this._helpTextId : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <div class=\"field__label-wrapper\">\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n ${this.label\n ? html`\n <label part=\"label\" class=\"field__label\" for=${this._inputId}>\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </label>\n `\n : nothing}\n </slot>\n </div>\n\n <div part=\"input-wrapper\" class=\"field__input-wrapper\">\n <span\n class=${classMap({\n field__prefix: true,\n 'field__prefix--filled': this._hasPrefixSlot,\n })}\n >\n <slot name=\"prefix\" @slotchange=${this._handlePrefixSlotChange}></slot>\n </span>\n\n <input\n part=\"input\"\n class=\"field__input\"\n id=${this._inputId}\n type=${this.type}\n .value=${live(this.value)}\n placeholder=${ifDefined(this.placeholder || undefined)}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n name=${ifDefined(this.name || undefined)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n pattern=${ifDefined(this.pattern || undefined)}\n autocomplete=${ifDefined(this.autocomplete || undefined)}\n aria-label=${ifDefined(this.accessibleLabel || undefined)}\n aria-labelledby=${ifDefined(\n this._hasLabelSlot ? `${this._inputId}-slotted-label` : undefined,\n )}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n @input=${this._handleInput}\n @change=${this._handleChange}\n />\n\n <span\n class=${classMap({\n field__suffix: true,\n 'field__suffix--filled': this._hasSuffixSlot,\n })}\n >\n <slot name=\"suffix\" @slotchange=${this._handleSuffixSlotChange}></slot>\n </span>\n </div>\n\n ${hasError\n ? html`<div\n part=\"error\"\n class=\"field__error\"\n id=${this._errorId}\n role=\"alert\"\n aria-atomic=\"true\"\n >\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>${this.error}</slot>\n </div>`\n : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n ${this._hasHelpTextSlot\n ? html`\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}>\n ${this.helpText}\n </slot>\n </div>\n `\n : this.helpText && !hasError\n ? html`\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}>\n ${this.helpText}\n </slot>\n </div>\n `\n : html`<slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}></slot>`}\n </div>\n `;\n }\n}\n\n/**\n * Per-component event map for type-safe addEventListener on hx-text-input.\n * The `hx-change` detail is `{ value: string }` only — no `checked` property.\n */\nexport interface HxTextInputEventMap {\n 'hx-input': CustomEvent<{ value: string }>;\n 'hx-change': CustomEvent<{ value: string }>;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-text-input': HelixTextInput;\n }\n interface HTMLElementEventMap {\n 'hx-input': CustomEvent<{ value: string }>;\n }\n}\n\n/** Primary type alias for hx-text-input */\nexport type HxTextInput = HelixTextInput;\n"],"names":["FocusMixin","superClass","FocusMixinClass","options","node","_a","changedProperties","__decorateClass","property","helixTextInputStyles","css","_nextTextInputId","createIdCounter","HelixTextInput","FormMixin","HelixElement","slot","slottedLabel","devWarn","state","_mode","disabled","target","hasError","fieldClasses","describedBy","html","classMap","nothing","live","ifDefined","query","customElement"],"mappings":"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"}

package/dist/shared/hx-textarea-CNG590KY.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-textarea-CNG590KY.js","sources":["../../src/components/hx-textarea/hx-textarea.styles.ts","../../src/components/hx-textarea/hx-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTextareaStyles = css`\n :host {\n display: block;\n\n /* ─── Component tokens (3.2.0) ──────────────────────────────────── /\n --_textarea-bg: var(\n --hx-textarea-bg,\n var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))\n );\n --_textarea-color: var(\n --hx-textarea-color,\n var(--hx-input-color, var(--hx-color-text-strong, #202b39))\n );\n --_textarea-border-color: var(\n --hx-textarea-border-color,\n var(--hx-input-border-color, var(--hx-color-border-strong, #66787b))\n );\n --_textarea-border-color-focus: var(\n --hx-textarea-border-color-focus,\n var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #0f7078))\n );\n --_textarea-border-color-invalid: var(\n --hx-textarea-border-color-invalid,\n var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))\n );\n --_textarea-border-radius: var(\n --hx-textarea-border-radius,\n var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))\n );\n --_textarea-padding-x: var(--hx-textarea-padding-x, var(--hx-space-3, 0.75rem));\n --_textarea-padding-y: var(--hx-textarea-padding-y, var(--hx-space-2, 0.5rem));\n --_textarea-font-size: var(--hx-textarea-font-size, var(--hx-font-size-md, 1rem));\n --_textarea-placeholder-color: var(\n --hx-textarea-placeholder-color,\n var(--hx-color-text-placeholder, #66787b)\n );\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n {\n box-sizing: border-box;\n }\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(\n --hx-textarea-font-family,\n var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))\n );\n }\n\n /* --- Label --- /\n\n .field__label-wrapper {\n display: contents;\n }\n\n .field__label {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1, 0.25rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(\n --hx-textarea-label-color,\n var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))\n );\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__required-marker {\n color: var(\n --hx-textarea-error-color,\n var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))\n );\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n / --- Textarea Wrapper --- /\n\n .field__textarea-wrapper {\n display: flex;\n flex-direction: column;\n border: var(--hx-border-width-thin, 1px) solid var(--_textarea-border-color);\n border-radius: var(--_textarea-border-radius);\n background-color: var(--_textarea-bg);\n transition:\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n overflow: hidden;\n }\n\n .field__textarea-wrapper:focus-within {\n border-color: var(--_textarea-border-color-focus);\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--_textarea-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) 100%),\n transparent\n );\n }\n\n /* --- Error State --- /\n\n .field--error .field__textarea-wrapper {\n border-color: var(--_textarea-border-color-invalid);\n }\n\n .field--error .field__textarea-wrapper:focus-within {\n border-color: var(--_textarea-border-color-invalid);\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--_textarea-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) 100%),\n transparent\n );\n }\n\n /* --- Native Textarea --- /\n\n .field__textarea {\n border: none;\n outline: none;\n background: transparent;\n padding: var(--_textarea-padding-y) var(--_textarea-padding-x);\n font-family: inherit;\n font-size: var(--_textarea-font-size);\n color: var(--_textarea-color);\n line-height: var(--hx-line-height-normal, 1.5);\n min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));\n width: 100%;\n resize: vertical;\n }\n\n .field__textarea::placeholder {\n color: var(--_textarea-placeholder-color);\n }\n\n .field__textarea:focus-visible {\n outline: none; / wrapper ring handles keyboard focus indication /\n }\n\n .field__textarea:disabled {\n cursor: not-allowed;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .field__textarea-wrapper {\n transition: none;\n }\n }\n\n / --- Resize Variants --- /\n\n :host([resize='none']) .field__textarea {\n resize: none;\n }\n\n / resize: vertical is the base default — no override needed for [resize='vertical'] /\n\n :host([resize='both']) .field__textarea {\n resize: both;\n }\n\n :host([resize='auto']) .field__textarea {\n resize: none;\n overflow: hidden;\n }\n\n / --- Character Counter --- /\n\n .field__counter {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-textarea-counter-color, var(--hx-color-text-muted, #4a5362));\n line-height: var(--hx-line-height-normal, 1.5);\n text-align: end;\n }\n\n / --- Visually Hidden (screen reader only) --- /\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n / --- Help Text & Error Messages --- /\n\n .field__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-textarea-help-text-color, var(--hx-color-text-muted, #4a5362));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(\n --hx-textarea-error-color,\n var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))\n );\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n / ─── High Contrast Mode (forced-colors) ─── /\n\n @media (forced-colors: active) {\n .field__textarea-wrapper {\n forced-color-adjust: none;\n background-color: Field;\n color: FieldText;\n border: 2px solid ButtonText;\n }\n\n .field__textarea {\n color: FieldText;\n }\n\n .field__textarea::placeholder {\n color: GrayText;\n }\n\n .field__textarea-wrapper:focus-within {\n border-color: Highlight;\n box-shadow: none;\n }\n\n .field__textarea:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: -3px;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n :host([disabled]) .field__textarea-wrapper {\n border-color: GrayText;\n color: GrayText;\n }\n\n :host([disabled]) .field__textarea {\n color: GrayText;\n }\n\n .field--error .field__textarea-wrapper {\n border-color: LinkText;\n }\n\n .field__label {\n color: CanvasText;\n }\n\n .field__help-text {\n color: GrayText;\n }\n\n .field__error {\n color: LinkText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixTextareaStyles } from './hx-textarea.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\n\nconst _nextTextareaId = createIdCounter('hx-textarea');\n\n/* Detail for hx-input and hx-change events dispatched by hx-textarea. /\nexport interface HxTextareaDetail {\n value: string;\n}\n\n/\n A multi-line text area component with label, validation, and form association.\n \n Uses `aria-invalid` to convey error state and `aria-describedby` to link\n * error/help text to the textarea. Label association is handled through\n * `aria-labelledby` (for slotted labels) or the standard `<label for>` pattern.\n * Supports `aria-label` for cases where a visible label is not present.\n * Validation errors are announced via `role=\"alert\"` (assertive live region).\n \n @summary Form-associated textarea with built-in label, error, help text, character counter, and auto-resize.\n \n @tag hx-textarea\n \n @slot label - Custom label content (overrides the label property). Use for Drupal Form API rendered labels.\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property). Use for Drupal Form API rendered errors.\n \n @fires {CustomEvent<{value: string}>} hx-input - Dispatched on every keystroke as the user types.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the textarea loses focus after its value changed.\n \n @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart textarea-wrapper - The wrapper around the textarea.\n * @csspart textarea - The native textarea element.\n * @csspart counter - The character count display.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n \n @cssprop [--hx-input-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-input-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-input-border-color=var(--hx-color-neutral-300)] - Input border color.\n * @cssprop [--hx-input-border-radius=var(--hx-border-radius-md)] - Input border radius.\n * @cssprop [--hx-input-font-family=var(--hx-font-family-sans)] - Input font family.\n * @cssprop [--hx-input-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-input-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-input-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-textarea-min-height=var(--hx-size-20, 5rem)] - Minimum textarea height.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-opacity] - CSS custom property.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-size-20] - Size token.\n * @cssprop [--hx-color-neutral-400] - Color.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-500] - Color.\n /\n@customElement('hx-textarea')\nexport class HelixTextarea extends FormMixin(HelixElement) {\n static override styles = [helixTextareaStyles, forcedColorsField];\n\n // ─── Form Association ───\n\n /* @internal /\n static override formAssociated = true;\n\n // ─── Properties ───\n\n /\n The visible label text for the textarea.\n * @attr label\n /\n @property({ type: String })\n label = '';\n\n /\n Placeholder text shown when the textarea is empty.\n * @attr placeholder\n /\n @property({ type: String })\n placeholder = '';\n\n /\n The current value of the textarea.\n * @attr value\n /\n @property({ type: String })\n value = '';\n\n /\n Whether the textarea is required for form submission.\n * @attr required\n /\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /\n Whether the textarea is disabled.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Error message to display. When set, the textarea enters an error state.\n * @attr error\n /\n @property({ type: String })\n error = '';\n\n /\n Help text displayed below the textarea for guidance.\n * @attr help-text\n /\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /\n The name of the textarea, used for form submission.\n * @attr name\n /\n @property({ type: String, reflect: true })\n name = '';\n\n /\n The number of visible text rows. Must be a positive integer (minimum 1).\n * Invalid values are clamped to the nearest valid value.\n * @attr rows\n /\n @property({ type: Number })\n rows = 4;\n\n /\n Minimum number of characters required.\n * @attr minlength\n /\n @property({ type: Number, attribute: 'minlength' })\n minlength: number \| undefined;\n\n /\n Maximum number of characters allowed.\n * @attr maxlength\n /\n @property({ type: Number, attribute: 'maxlength' })\n maxlength: number \| undefined;\n\n /\n Whether the textarea is read-only. Read-only fields are visible but\n * cannot be edited by the user. Common in healthcare for displaying\n * non-editable patient data inline with editable fields.\n * @attr readonly\n /\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /\n Controls how the textarea can be resized. Use 'auto' for auto-grow behavior.\n * @attr resize\n /\n @property({ type: String, reflect: true })\n resize: 'none' \| 'vertical' \| 'both' \| 'auto' = 'vertical';\n\n /\n Whether to show a character count below the textarea.\n * @attr show-count\n /\n @property({ type: Boolean, attribute: 'show-count' })\n showCount = false;\n\n /\n Validation message shown when the field is required but empty.\n * @attr required-message\n /\n @property({ attribute: 'required-message' })\n requiredMessage = 'This field is required.';\n\n /\n Accessible name for screen readers, if different from the visible label.\n * Uses `accessible-label` attribute instead of `aria-label` to avoid\n * ARIAMixin shadowing on the host element.\n \n Note: `mixinDelegatesAria` is not applied to this component because form\n * inputs with associated labels delegate accessible naming via `<label>`\n * association and `aria-labelledby`, not host-level ARIA delegation. The\n * `accessible-label` attribute is a fallback for label-free usage. The value is forwarded to the\n * internal native textarea's `aria-label`.\n * @attr accessible-label\n /\n @property({ type: String, attribute: 'accessible-label' })\n accessibleLabel: string \| null = null;\n\n // ─── Internal References ───\n\n /* @internal /\n @query('.field__textarea')\n private _textarea: HTMLTextAreaElement \| undefined;\n\n // ─── Slot Tracking ───\n\n /* @internal /\n @state() private _hasLabelSlot = false;\n /* @internal /\n @state() private _hasErrorSlot = false;\n /* @internal /\n @state() private _hasHelpTextSlot = false;\n\n // ─── Live Announcement ───\n\n /\n Debounced announcement text for the hidden polite live region.\n * Only populated when the user is approaching the character limit.\n * @internal\n /\n @state() private _liveAnnouncement = '';\n\n /* Timer handle for the debounced character-count announcement. @internal /\n private _announceTimer: ReturnType<typeof setTimeout> \| null = null;\n\n /* @internal /\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasLabelSlot = slot.assignedElements().length > 0;\n if (this._hasLabelSlot) {\n const slottedLabel = slot.assignedElements()[0];\n if (slottedLabel && !slottedLabel.id) {\n slottedLabel.id = `${this._textareaId}-slotted-label`;\n }\n }\n }\n\n /* @internal /\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedElements().length > 0;\n }\n\n /* @internal /\n private _handleHelpTextSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHelpTextSlot = slot.assignedElements().length > 0;\n }\n\n // ─── Lifecycle ───\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this._announceTimer !== null) {\n clearTimeout(this._announceTimer);\n this._announceTimer = null;\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('rows')) {\n const clamped = Math.max(1, Math.round(this.rows));\n if (clamped !== this.rows) {\n this.rows = clamped;\n }\n }\n if (changedProperties.has('value')) {\n this._internals.setFormValue(this.value);\n }\n // Auto-grow: respond to programmatic value changes\n if (changedProperties.has('value') && this.resize === 'auto' && this._textarea) {\n this._textarea.style.height = 'auto';\n this._textarea.style.height = `${this._textarea.scrollHeight}px`;\n }\n }\n\n // ─── Form Integration ───\n\n /* @internal /\n override _updateValidity(): void {\n const anchor = this._textarea ?? undefined;\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error \|\| this.requiredMessage,\n anchor,\n );\n } else if (\n this.minlength !== undefined &&\n this.value.length > 0 &&\n this.value.length < this.minlength\n ) {\n this._internals.setValidity(\n { tooShort: true },\n this.error \|\| `Value must be at least ${this.minlength} characters.`,\n anchor,\n );\n } else if (this.maxlength !== undefined && this.value.length > this.maxlength) {\n this._internals.setValidity(\n { tooLong: true },\n this.error \|\| `Value must be ${this.maxlength} characters or fewer.`,\n anchor,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /* @internal /\n protected override _onFormReset(): void {\n this.value = '';\n this._internals.setFormValue('');\n this._resetInteractionState();\n }\n\n /* @internal /\n protected override _onFormStateRestore(\n state: File \| string \| FormData \| null,\n _mode: 'restore' \| 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n /* @internal /\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Event Handling ───\n\n /* @internal /\n private _handleInput(e: Event): void {\n const target = e.target as HTMLTextAreaElement;\n this.value = target.value;\n this._handleInteractionInput();\n // Note: setFormValue is called in updated() via the value change — no double-call here (P1-06 fix)\n\n // Auto-grow: reset height then set to scrollHeight\n if (this.resize === 'auto') {\n target.style.height = 'auto';\n target.style.height = `${target.scrollHeight}px`;\n }\n\n // Debounced character-count announcement (WCAG 4.1.3):\n // Only announce when near/at the maxlength limit; suppress every-keystroke noise.\n if (this._announceTimer !== null) {\n clearTimeout(this._announceTimer);\n }\n this._announceTimer = setTimeout(() => {\n this._announceTimer = null;\n if (this.maxlength !== undefined && this.value.length >= this.maxlength 0.8) {\n this._liveAnnouncement = `${this.value.length} of ${this.maxlength} characters`;\n } else {\n this._liveAnnouncement = '';\n }\n }, 1000);\n\n /*\n Dispatched on every keystroke as the user types.\n * @event hx-input\n /\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-input', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n /* @internal /\n private _handleChange(e: Event): void {\n const target = e.target as HTMLTextAreaElement;\n this.value = target.value;\n this._internals.setFormValue(this.value);\n this._handleInteractionBlur();\n\n /\n Dispatched when the textarea loses focus after its value changed.\n * @event hx-change\n /\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n // ─── Public Methods ───\n\n /* Moves focus to the textarea element. /\n override focus(options?: FocusOptions): void {\n this._textarea?.focus(options);\n }\n\n /* Selects all text in the textarea. /\n select(): void {\n this._textarea?.select();\n }\n\n // ─── Render ───\n\n /* @internal /\n private _textareaId = _nextTextareaId();\n /* @internal /\n private _helpTextId = `${this._textareaId}-help`;\n /* @internal /\n private _errorId = `${this._textareaId}-error`;\n /* @internal /\n private _counterId = `${this._textareaId}-counter`;\n\n /* @internal /\n private _renderCounter() {\n if (!this.showCount) return nothing;\n\n // Use Array.from() to count grapheme clusters (handles emoji correctly)\n const count = Array.from(this.value ?? '').length;\n const display = this.maxlength !== undefined ? `${count} / ${this.maxlength}` : `${count}`;\n\n // aria-live=\"polite\" announces counter changes without interrupting the user.\n // The debounced _liveAnnouncement region provides additional context when nearing the limit.\n return html`\n <div part=\"counter\" class=\"field__counter\" id=${this._counterId} aria-hidden=\"true\">\n ${display}\n </div>\n `;\n }\n\n override render() {\n const hasError = !!this.error \|\| this._hasErrorSlot;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n };\n\n // P0-02 fix: help text container renders when slot is used OR property is set\n const hasHelpText = (!!this.helpText \|\| this._hasHelpTextSlot) && !hasError;\n\n // Do NOT include the counter in aria-describedby: the counter element has\n // aria-hidden=\"true\" (it is a visual-only display), and referencing an\n // aria-hidden element from aria-describedby is a WCAG conflict.\n // Screen reader users receive character-count announcements via the\n // debounced aria-live=\"polite\" region (_liveAnnouncement) instead.\n const describedBy =\n [hasError ? this._errorId : null, hasHelpText ? this._helpTextId : null]\n .filter(Boolean)\n .join(' ') \|\| undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <div class=\"field__label-wrapper\">\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n ${this.label\n ? html`\n <label part=\"label\" class=\"field__label\" for=${this._textareaId}>\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\"></span>`\n : nothing}\n </label>\n `\n : nothing}\n </slot>\n </div>\n\n <div part=\"textarea-wrapper\" class=\"field__textarea-wrapper\">\n <textarea\n part=\"textarea\"\n class=\"field__textarea\"\n id=${this._textareaId}\n .value=${live(this.value)}\n placeholder=${ifDefined(this.placeholder \|\| undefined)}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n rows=${this.rows}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n name=${ifDefined(this.name \|\| undefined)}\n aria-label=${ifDefined(this.accessibleLabel ?? undefined)}\n aria-labelledby=${ifDefined(\n this._hasLabelSlot ? `${this._textareaId}-slotted-label` : undefined,\n )}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n @input=${this._handleInput}\n @change=${this._handleChange}\n ></textarea>\n </div>\n\n ${this._renderCounter()}\n <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">${this._liveAnnouncement}</div>\n ${hasError\n ? html`\n <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>${this.error}</slot>\n </div>\n `\n : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n ${hasHelpText\n ? html`\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}>\n ${this.helpText}\n </slot>\n </div>\n `\n : html`<slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}></slot>`}\n </div>\n `;\n }\n}\n\n/*\n Per-component event map for type-safe addEventListener on hx-textarea.\n * The `hx-change` detail is `{ value: string }` only — no `checked` property.\n /\nexport interface HxTextareaEventMap {\n 'hx-input': CustomEvent<{ value: string }>;\n 'hx-change': CustomEvent<{ value: string }>;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-textarea': HelixTextarea;\n }\n interface HTMLElementEventMap {\n 'hx-input': CustomEvent<{ value: string }>;\n }\n}\n\n/* Canonical type alias for the hx-textarea component. */\nexport type HxTextarea = HelixTextarea;\n"],"names":["helixTextareaStyles","css","_nextTextareaId","createIdCounter","HelixTextarea","FormMixin","HelixElement","slot","slottedLabel","changedProperties","clamped","anchor","state","_mode","disabled","target","options","_a","nothing","count","display","html","hasError","fieldClasses","hasHelpText","describedBy","classMap","live","ifDefined","forcedColorsField","__decorateClass","property","query","customElement"],"mappings":";;;;;;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}
1	+ {"version":3,"file":"hx-textarea-CNG590KY.js","sources":["../../src/components/hx-textarea/hx-textarea.styles.ts","../../src/components/hx-textarea/hx-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTextareaStyles = css`\n :host {\n display: block;\n\n /* ─── Component tokens (3.2.0) ──────────────────────────────────── /\n --_textarea-bg: var(\n --hx-textarea-bg,\n var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))\n );\n --_textarea-color: var(\n --hx-textarea-color,\n var(--hx-input-color, var(--hx-color-text-strong, #202b39))\n );\n --_textarea-border-color: var(\n --hx-textarea-border-color,\n var(--hx-input-border-color, var(--hx-color-border-strong, #66787b))\n );\n --_textarea-border-color-focus: var(\n --hx-textarea-border-color-focus,\n var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #0f7078))\n );\n --_textarea-border-color-invalid: var(\n --hx-textarea-border-color-invalid,\n var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))\n );\n --_textarea-border-radius: var(\n --hx-textarea-border-radius,\n var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))\n );\n --_textarea-padding-x: var(--hx-textarea-padding-x, var(--hx-space-3, 0.75rem));\n --_textarea-padding-y: var(--hx-textarea-padding-y, var(--hx-space-2, 0.5rem));\n --_textarea-font-size: var(--hx-textarea-font-size, var(--hx-font-size-md, 1rem));\n --_textarea-placeholder-color: var(\n --hx-textarea-placeholder-color,\n var(--hx-color-text-placeholder, #66787b)\n );\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n {\n box-sizing: border-box;\n }\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(\n --hx-textarea-font-family,\n var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))\n );\n }\n\n /* --- Label --- /\n\n .field__label-wrapper {\n display: contents;\n }\n\n .field__label {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1, 0.25rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(\n --hx-textarea-label-color,\n var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))\n );\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__required-marker {\n color: var(\n --hx-textarea-error-color,\n var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))\n );\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n / --- Textarea Wrapper --- /\n\n .field__textarea-wrapper {\n display: flex;\n flex-direction: column;\n border: var(--hx-border-width-thin, 1px) solid var(--_textarea-border-color);\n border-radius: var(--_textarea-border-radius);\n background-color: var(--_textarea-bg);\n transition:\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n overflow: hidden;\n }\n\n .field__textarea-wrapper:focus-within {\n border-color: var(--_textarea-border-color-focus);\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--_textarea-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) 100%),\n transparent\n );\n }\n\n /* --- Error State --- /\n\n .field--error .field__textarea-wrapper {\n border-color: var(--_textarea-border-color-invalid);\n }\n\n .field--error .field__textarea-wrapper:focus-within {\n border-color: var(--_textarea-border-color-invalid);\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--_textarea-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) 100%),\n transparent\n );\n }\n\n /* --- Native Textarea --- /\n\n .field__textarea {\n border: none;\n outline: none;\n background: transparent;\n padding: var(--_textarea-padding-y) var(--_textarea-padding-x);\n font-family: inherit;\n font-size: var(--_textarea-font-size);\n color: var(--_textarea-color);\n line-height: var(--hx-line-height-normal, 1.5);\n min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));\n width: 100%;\n resize: vertical;\n }\n\n .field__textarea::placeholder {\n color: var(--_textarea-placeholder-color);\n }\n\n .field__textarea:focus-visible {\n outline: none; / wrapper ring handles keyboard focus indication /\n }\n\n .field__textarea:disabled {\n cursor: not-allowed;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .field__textarea-wrapper {\n transition: none;\n }\n }\n\n / --- Resize Variants --- /\n\n :host([resize='none']) .field__textarea {\n resize: none;\n }\n\n / resize: vertical is the base default — no override needed for [resize='vertical'] /\n\n :host([resize='both']) .field__textarea {\n resize: both;\n }\n\n :host([resize='auto']) .field__textarea {\n resize: none;\n overflow: hidden;\n }\n\n / --- Character Counter --- /\n\n .field__counter {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-textarea-counter-color, var(--hx-color-text-muted, #4a5362));\n line-height: var(--hx-line-height-normal, 1.5);\n text-align: end;\n }\n\n / --- Visually Hidden (screen reader only) --- /\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n / --- Help Text & Error Messages --- /\n\n .field__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-textarea-help-text-color, var(--hx-color-text-muted, #4a5362));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(\n --hx-textarea-error-color,\n var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))\n );\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n / ─── High Contrast Mode (forced-colors) ─── /\n\n @media (forced-colors: active) {\n .field__textarea-wrapper {\n forced-color-adjust: none;\n background-color: Field;\n color: FieldText;\n border: 2px solid ButtonText;\n }\n\n .field__textarea {\n color: FieldText;\n }\n\n .field__textarea::placeholder {\n color: GrayText;\n }\n\n .field__textarea-wrapper:focus-within {\n border-color: Highlight;\n box-shadow: none;\n }\n\n .field__textarea:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: -3px;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n :host([disabled]) .field__textarea-wrapper {\n border-color: GrayText;\n color: GrayText;\n }\n\n :host([disabled]) .field__textarea {\n color: GrayText;\n }\n\n .field--error .field__textarea-wrapper {\n border-color: LinkText;\n }\n\n .field__label {\n color: CanvasText;\n }\n\n .field__help-text {\n color: GrayText;\n }\n\n .field__error {\n color: LinkText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixTextareaStyles } from './hx-textarea.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\n\nconst _nextTextareaId = createIdCounter('hx-textarea');\n\n/* Detail for hx-input and hx-change events dispatched by hx-textarea. /\nexport interface HxTextareaDetail {\n value: string;\n}\n\n/\n A multi-line text area component with label, validation, and form association.\n \n Uses `aria-invalid` to convey error state and `aria-describedby` to link\n * error/help text to the textarea. Label association is handled through\n * `aria-labelledby` (for slotted labels) or the standard `<label for>` pattern.\n * Supports `aria-label` for cases where a visible label is not present.\n * Validation errors are announced via `role=\"alert\"` (assertive live region).\n \n @summary Form-associated textarea with built-in label, error, help text, character counter, and auto-resize.\n \n @tag hx-textarea\n \n @slot label - Custom label content (overrides the label property). Use for Drupal Form API rendered labels.\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property). Use for Drupal Form API rendered errors.\n \n @fires {CustomEvent<{value: string}>} hx-input - Dispatched on every keystroke as the user types.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the textarea loses focus after its value changed.\n \n @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart textarea-wrapper - The wrapper around the textarea.\n * @csspart textarea - The native textarea element.\n * @csspart counter - The character count display.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n \n @cssprop [--hx-input-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-input-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-input-border-color=var(--hx-color-neutral-300)] - Input border color.\n * @cssprop [--hx-input-border-radius=var(--hx-border-radius-md)] - Input border radius.\n * @cssprop [--hx-input-font-family=var(--hx-font-family-sans)] - Input font family.\n * @cssprop [--hx-input-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-input-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-input-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-textarea-min-height=var(--hx-size-20, 5rem)] - Minimum textarea height.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-opacity] - CSS custom property.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-size-20] - Size token.\n * @cssprop [--hx-color-neutral-400] - Color.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @aaa-certified 2026-05-08\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-textarea/AAA-AUDIT.md\n * @keyboard-contract activate=character-input; disabled-suppresses=true\n * @aria-pattern textbox\n * @aria-pattern-source https://www.w3.org/TR/wai-aria-1.2/#textbox\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated true\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-textarea\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n /\n@customElement('hx-textarea')\nexport class HelixTextarea extends FormMixin(HelixElement) {\n static override styles = [helixTextareaStyles, forcedColorsField];\n\n // ─── Form Association ───\n\n /* @internal /\n static override formAssociated = true;\n\n // ─── Properties ───\n\n /\n The visible label text for the textarea.\n * @attr label\n /\n @property({ type: String })\n label = '';\n\n /\n Placeholder text shown when the textarea is empty.\n * @attr placeholder\n /\n @property({ type: String })\n placeholder = '';\n\n /\n The current value of the textarea.\n * @attr value\n /\n @property({ type: String })\n value = '';\n\n /\n Whether the textarea is required for form submission.\n * @attr required\n /\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /\n Whether the textarea is disabled.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Error message to display. When set, the textarea enters an error state.\n * @attr error\n /\n @property({ type: String })\n error = '';\n\n /\n Help text displayed below the textarea for guidance.\n * @attr help-text\n /\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /\n The name of the textarea, used for form submission.\n * @attr name\n /\n @property({ type: String, reflect: true })\n name = '';\n\n /\n The number of visible text rows. Must be a positive integer (minimum 1).\n * Invalid values are clamped to the nearest valid value.\n * @attr rows\n /\n @property({ type: Number })\n rows = 4;\n\n /\n Minimum number of characters required.\n * @attr minlength\n /\n @property({ type: Number, attribute: 'minlength' })\n minlength: number \| undefined;\n\n /\n Maximum number of characters allowed.\n * @attr maxlength\n /\n @property({ type: Number, attribute: 'maxlength' })\n maxlength: number \| undefined;\n\n /\n Whether the textarea is read-only. Read-only fields are visible but\n * cannot be edited by the user. Common in healthcare for displaying\n * non-editable patient data inline with editable fields.\n * @attr readonly\n /\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /\n Controls how the textarea can be resized. Use 'auto' for auto-grow behavior.\n * @attr resize\n /\n @property({ type: String, reflect: true })\n resize: 'none' \| 'vertical' \| 'both' \| 'auto' = 'vertical';\n\n /\n Whether to show a character count below the textarea.\n * @attr show-count\n /\n @property({ type: Boolean, attribute: 'show-count' })\n showCount = false;\n\n /\n Validation message shown when the field is required but empty.\n * @attr required-message\n /\n @property({ attribute: 'required-message' })\n requiredMessage = 'This field is required.';\n\n /\n Accessible name for screen readers, if different from the visible label.\n * Uses `accessible-label` attribute instead of `aria-label` to avoid\n * ARIAMixin shadowing on the host element.\n \n Note: `mixinDelegatesAria` is not applied to this component because form\n * inputs with associated labels delegate accessible naming via `<label>`\n * association and `aria-labelledby`, not host-level ARIA delegation. The\n * `accessible-label` attribute is a fallback for label-free usage. The value is forwarded to the\n * internal native textarea's `aria-label`.\n * @attr accessible-label\n /\n @property({ type: String, attribute: 'accessible-label' })\n accessibleLabel: string \| null = null;\n\n // ─── Internal References ───\n\n /* @internal /\n @query('.field__textarea')\n private _textarea: HTMLTextAreaElement \| undefined;\n\n // ─── Slot Tracking ───\n\n /* @internal /\n @state() private _hasLabelSlot = false;\n /* @internal /\n @state() private _hasErrorSlot = false;\n /* @internal /\n @state() private _hasHelpTextSlot = false;\n\n // ─── Live Announcement ───\n\n /\n Debounced announcement text for the hidden polite live region.\n * Only populated when the user is approaching the character limit.\n * @internal\n /\n @state() private _liveAnnouncement = '';\n\n /* Timer handle for the debounced character-count announcement. @internal /\n private _announceTimer: ReturnType<typeof setTimeout> \| null = null;\n\n /* @internal /\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasLabelSlot = slot.assignedElements().length > 0;\n if (this._hasLabelSlot) {\n const slottedLabel = slot.assignedElements()[0];\n if (slottedLabel && !slottedLabel.id) {\n slottedLabel.id = `${this._textareaId}-slotted-label`;\n }\n }\n }\n\n /* @internal /\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedElements().length > 0;\n }\n\n /* @internal /\n private _handleHelpTextSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHelpTextSlot = slot.assignedElements().length > 0;\n }\n\n // ─── Lifecycle ───\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this._announceTimer !== null) {\n clearTimeout(this._announceTimer);\n this._announceTimer = null;\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('rows')) {\n const clamped = Math.max(1, Math.round(this.rows));\n if (clamped !== this.rows) {\n this.rows = clamped;\n }\n }\n if (changedProperties.has('value')) {\n this._internals.setFormValue(this.value);\n }\n // Auto-grow: respond to programmatic value changes\n if (changedProperties.has('value') && this.resize === 'auto' && this._textarea) {\n this._textarea.style.height = 'auto';\n this._textarea.style.height = `${this._textarea.scrollHeight}px`;\n }\n }\n\n // ─── Form Integration ───\n\n /* @internal /\n override _updateValidity(): void {\n const anchor = this._textarea ?? undefined;\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error \|\| this.requiredMessage,\n anchor,\n );\n } else if (\n this.minlength !== undefined &&\n this.value.length > 0 &&\n this.value.length < this.minlength\n ) {\n this._internals.setValidity(\n { tooShort: true },\n this.error \|\| `Value must be at least ${this.minlength} characters.`,\n anchor,\n );\n } else if (this.maxlength !== undefined && this.value.length > this.maxlength) {\n this._internals.setValidity(\n { tooLong: true },\n this.error \|\| `Value must be ${this.maxlength} characters or fewer.`,\n anchor,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /* @internal /\n protected override _onFormReset(): void {\n this.value = '';\n this._internals.setFormValue('');\n this._resetInteractionState();\n }\n\n /* @internal /\n protected override _onFormStateRestore(\n state: File \| string \| FormData \| null,\n _mode: 'restore' \| 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n /* @internal /\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Event Handling ───\n\n /* @internal /\n private _handleInput(e: Event): void {\n const target = e.target as HTMLTextAreaElement;\n this.value = target.value;\n this._handleInteractionInput();\n // Note: setFormValue is called in updated() via the value change — no double-call here (P1-06 fix)\n\n // Auto-grow: reset height then set to scrollHeight\n if (this.resize === 'auto') {\n target.style.height = 'auto';\n target.style.height = `${target.scrollHeight}px`;\n }\n\n // Debounced character-count announcement (WCAG 4.1.3):\n // Only announce when near/at the maxlength limit; suppress every-keystroke noise.\n if (this._announceTimer !== null) {\n clearTimeout(this._announceTimer);\n }\n this._announceTimer = setTimeout(() => {\n this._announceTimer = null;\n if (this.maxlength !== undefined && this.value.length >= this.maxlength 0.8) {\n this._liveAnnouncement = `${this.value.length} of ${this.maxlength} characters`;\n } else {\n this._liveAnnouncement = '';\n }\n }, 1000);\n\n /*\n Dispatched on every keystroke as the user types.\n * @event hx-input\n /\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-input', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n /* @internal /\n private _handleChange(e: Event): void {\n const target = e.target as HTMLTextAreaElement;\n this.value = target.value;\n this._internals.setFormValue(this.value);\n this._handleInteractionBlur();\n\n /\n Dispatched when the textarea loses focus after its value changed.\n * @event hx-change\n /\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n // ─── Public Methods ───\n\n /* Moves focus to the textarea element. /\n override focus(options?: FocusOptions): void {\n this._textarea?.focus(options);\n }\n\n /* Selects all text in the textarea. /\n select(): void {\n this._textarea?.select();\n }\n\n // ─── Render ───\n\n /* @internal /\n private _textareaId = _nextTextareaId();\n /* @internal /\n private _helpTextId = `${this._textareaId}-help`;\n /* @internal /\n private _errorId = `${this._textareaId}-error`;\n /* @internal /\n private _counterId = `${this._textareaId}-counter`;\n\n /* @internal /\n private _renderCounter() {\n if (!this.showCount) return nothing;\n\n // Use Array.from() to count grapheme clusters (handles emoji correctly)\n const count = Array.from(this.value ?? '').length;\n const display = this.maxlength !== undefined ? `${count} / ${this.maxlength}` : `${count}`;\n\n // aria-live=\"polite\" announces counter changes without interrupting the user.\n // The debounced _liveAnnouncement region provides additional context when nearing the limit.\n return html`\n <div part=\"counter\" class=\"field__counter\" id=${this._counterId} aria-hidden=\"true\">\n ${display}\n </div>\n `;\n }\n\n override render() {\n const hasError = !!this.error \|\| this._hasErrorSlot;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n };\n\n // P0-02 fix: help text container renders when slot is used OR property is set\n const hasHelpText = (!!this.helpText \|\| this._hasHelpTextSlot) && !hasError;\n\n // Do NOT include the counter in aria-describedby: the counter element has\n // aria-hidden=\"true\" (it is a visual-only display), and referencing an\n // aria-hidden element from aria-describedby is a WCAG conflict.\n // Screen reader users receive character-count announcements via the\n // debounced aria-live=\"polite\" region (_liveAnnouncement) instead.\n const describedBy =\n [hasError ? this._errorId : null, hasHelpText ? this._helpTextId : null]\n .filter(Boolean)\n .join(' ') \|\| undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <div class=\"field__label-wrapper\">\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n ${this.label\n ? html`\n <label part=\"label\" class=\"field__label\" for=${this._textareaId}>\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\"></span>`\n : nothing}\n </label>\n `\n : nothing}\n </slot>\n </div>\n\n <div part=\"textarea-wrapper\" class=\"field__textarea-wrapper\">\n <textarea\n part=\"textarea\"\n class=\"field__textarea\"\n id=${this._textareaId}\n .value=${live(this.value)}\n placeholder=${ifDefined(this.placeholder \|\| undefined)}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n rows=${this.rows}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n name=${ifDefined(this.name \|\| undefined)}\n aria-label=${ifDefined(this.accessibleLabel ?? undefined)}\n aria-labelledby=${ifDefined(\n this._hasLabelSlot ? `${this._textareaId}-slotted-label` : undefined,\n )}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n @input=${this._handleInput}\n @change=${this._handleChange}\n ></textarea>\n </div>\n\n ${this._renderCounter()}\n <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">${this._liveAnnouncement}</div>\n ${hasError\n ? html`\n <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>${this.error}</slot>\n </div>\n `\n : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n ${hasHelpText\n ? html`\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}>\n ${this.helpText}\n </slot>\n </div>\n `\n : html`<slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}></slot>`}\n </div>\n `;\n }\n}\n\n/*\n Per-component event map for type-safe addEventListener on hx-textarea.\n * The `hx-change` detail is `{ value: string }` only — no `checked` property.\n /\nexport interface HxTextareaEventMap {\n 'hx-input': CustomEvent<{ value: string }>;\n 'hx-change': CustomEvent<{ value: string }>;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-textarea': HelixTextarea;\n }\n interface HTMLElementEventMap {\n 'hx-input': CustomEvent<{ value: string }>;\n }\n}\n\n/* Canonical type alias for the hx-textarea component. */\nexport type HxTextarea = HelixTextarea;\n"],"names":["helixTextareaStyles","css","_nextTextareaId","createIdCounter","HelixTextarea","FormMixin","HelixElement","slot","slottedLabel","changedProperties","clamped","anchor","state","_mode","disabled","target","options","_a","nothing","count","display","html","hasError","fieldClasses","hasHelpText","describedBy","classMap","live","ifDefined","forcedColorsField","__decorateClass","property","query","customElement"],"mappings":";;;;;;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}