npm - @helixui/library - Versions diffs - 0.3.4 → 1.0.1 - Mend

@helixui/library 0.3.4 → 1.0.1

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 (452) hide show

package/dist/shared/{hx-text-input-BUMgOQHX.js → hx-text-input-CCZZbWQ9.js} RENAMED Viewed

@@ -259,6 +259,10 @@ let $ = 0, r = class extends x {
   formStateRestoreCallback(e) {
     this.value = e;
   }
+  // Called when a parent fieldset is disabled/enabled
+  formDisabledCallback(e) {
+    this.disabled = e;
+  }
   // ─── Event Handling ───
   /** @internal */
   _handleInput(e) {
@@ -362,11 +366,11 @@ let $ = 0, r = class extends x {
           </span>
         </div>
-        ${e ? n`
-              <div part="error" class="field__error" id=${this._errorId} role="alert">
-                <slot name="error" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>
-              </div>
-            ` : n`<slot name="error" @slotchange=${this._handleErrorSlotChange}></slot>`}
+        <div part="error" class="field__error" id=${this._errorId} role="alert" aria-atomic="true">
+          ${e ? n`<slot name="error" @slotchange=${this._handleErrorSlotChange}
+                >${this.error}</slot
+              >` : n`<slot name="error" @slotchange=${this._handleErrorSlotChange}></slot>`}
+        </div>
         ${(this.helpText || this._hasHelpTextSlot) && !e ? n`
               <div part="help-text" class="field__help-text" id=${this._helpTextId}>
                 <slot name="help-text" @slotchange=${this._handleHelpTextSlotChange}>
@@ -437,4 +441,4 @@ r = i([
 export {
   r as H
 };
-//# sourceMappingURL=hx-text-input-BUMgOQHX.js.map
+//# sourceMappingURL=hx-text-input-CCZZbWQ9.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-text-input-CCZZbWQ9.js","sources":["../../src/components/hx-text-input/hx-text-input.styles.ts","../../src/components/hx-text-input/hx-text-input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTextInputStyles = css`\n :host {\n display: block;\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(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\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(--hx-input-label-color, var(--hx-color-neutral-700, #343a40));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__required-marker {\n color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));\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(--hx-border-width-thin, 1px) solid\n var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));\n border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));\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:focus-within {\n border-color: var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb))\n 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(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n }\n\n .field--error .field__input-wrapper:focus-within {\n border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))\n 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-neutral-500, #6c757d);\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(--hx-space-3, 0.75rem);\n }\n\n .field__suffix--filled {\n padding: 0 var(--hx-space-3, 0.75rem);\n }\n\n /* ─── Native Input ─── */\n\n .field__input {\n flex: 1;\n border: none;\n outline: none;\n background: transparent;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-family: inherit;\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));\n line-height: var(--hx-line-height-normal, 1.5);\n min-height: var(--hx-size-10, 2.5rem);\n width: 100%;\n }\n\n .field__input::placeholder {\n color: var(--hx-color-neutral-400, #adb5bd);\n }\n\n .field__input:disabled {\n cursor: not-allowed;\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-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-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(--hx-color-neutral-500, #6c757d);\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(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));\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","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query } 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 { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTextInputStyles } from './hx-text-input.styles.js';\n\n// Module-level counter for stable, SSR-compatible IDs (avoids Math.random() hydration mismatch)\nlet _hxTextInputIdCounter = 0;\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-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-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@customElement('hx-text-input')\nexport class HelixTextInput extends LitElement {\n static override styles = [tokenStyles, helixTextInputStyles];\n\n // ─── Form Association ───\n\n /** @internal */\n static formAssociated = true;\n\n /** @internal */\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\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 */\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 })\n name = '';\n\n /**\n * Accessible name for screen readers, if different from the visible label.\n * @attr aria-label\n */\n @property({ type: String, attribute: 'aria-label' })\n override ariaLabel: 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 * 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 // ─── Slot Tracking ───\n\n /** @internal */\n private _hasLabelSlot = false;\n /** @internal */\n private _hasErrorSlot = false;\n /** @internal */\n private _hasPrefixSlot = false;\n /** @internal */\n private _hasSuffixSlot = false;\n /** @internal */\n 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 this.requestUpdate();\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 this.requestUpdate();\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 this.requestUpdate();\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 this.requestUpdate();\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 this.requestUpdate();\n }\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n this._internals.setFormValue(this.value);\n }\n if (\n changedProperties.has('value') ||\n changedProperties.has('required') ||\n changedProperties.has('minlength') ||\n changedProperties.has('maxlength')\n ) {\n this._updateValidity();\n }\n }\n\n // ─── Form Integration ───\n\n /** Returns the associated form element, if any. */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** Returns the validation message. */\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Returns the ValidityState object. */\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Checks whether the input satisfies its constraints. */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /** Reports validity and shows the browser's constraint validation UI. */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n /** @internal */\n private _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || 'This field is required.',\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 // Called by the form when it resets\n formResetCallback(): void {\n this.value = '';\n this._internals.setFormValue('');\n }\n\n // Called when the form restores state (e.g., back/forward navigation)\n formStateRestoreCallback(state: string): void {\n this.value = state;\n }\n\n // Called when a parent fieldset is disabled/enabled\n formDisabledCallback(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\n /**\n * Dispatched on every keystroke as the user types.\n * @event hx-input\n */\n this.dispatchEvent(\n new CustomEvent('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._updateValidity();\n\n /**\n * Dispatched when the input loses focus after its value changed.\n * @event hx-change\n */\n this.dispatchEvent(\n new CustomEvent('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 input element. */\n override focus(options?: FocusOptions): void {\n this._input?.focus(options);\n }\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 = `hx-text-input-${++_hxTextInputIdCounter}`;\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.ariaLabel || 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 <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\" aria-atomic=\"true\">\n ${hasError\n ? html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}\n >${this.error}</slot\n >`\n : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n </div>\n ${(this.helpText || this._hasHelpTextSlot) && !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\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-text-input': HelixTextInput;\n }\n}\n\n/** Primary type alias for hx-text-input */\nexport type HxTextInput = HelixTextInput;\n\n/** @deprecated Use HxTextInput instead */\nexport type WcTextInput = HelixTextInput;\n"],"names":["helixTextInputStyles","css","_hxTextInputIdCounter","HelixTextInput","LitElement","slot","slottedLabel","changedProperties","state","disabled","target","options","_a","hasError","fieldClasses","describedBy","html","classMap","nothing","live","ifDefined","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-textarea-B_nmxzhC.js → hx-textarea-BsQdB1Rk.js} RENAMED Viewed

@@ -1,10 +1,10 @@
-import { css as c, LitElement as f, nothing as d, html as o } from "lit";
-import { property as i, query as v, state as x, customElement as _ } from "lit/decorators.js";
-import { classMap as g } from "lit/directives/class-map.js";
+import { css as x, LitElement as f, nothing as d, html as o } from "lit";
+import { property as i, query as v, state as c, customElement as _ } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
 import { ifDefined as h } from "lit/directives/if-defined.js";
-import { live as b } from "lit/directives/live.js";
-import { tokenStyles as m } from "@helixui/tokens/lit";
-const y = c`
+import { live as g } from "lit/directives/live.js";
+import { tokenStyles as b } from "@helixui/tokens/lit";
+const y = x`
   :host {
     display: block;
   }
@@ -145,6 +145,20 @@ const y = c`
     text-align: right;
   }
+  /* --- Visually Hidden (screen reader only) --- */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
   /* --- Help Text & Error Messages --- */
   .field__help-text {
@@ -160,13 +174,13 @@ const y = c`
   }
 `;
 var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (e, t, l, n) => {
-  for (var s = n > 1 ? void 0 : n ? $(t, l) : t, p = e.length - 1, u; p >= 0; p--)
-    (u = e[p]) && (s = (n ? u(t, l, s) : u(s)) || s);
+  for (var s = n > 1 ? void 0 : n ? $(t, l) : t, u = e.length - 1, p; u >= 0; u--)
+    (p = e[u]) && (s = (n ? p(t, l, s) : p(s)) || s);
   return n && s && w(t, l, s), s;
 };
 let S = 0, r = class extends f {
   constructor() {
-    super(), this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.name = "", this.rows = 4, this.readonly = !1, this.resize = "vertical", this.showCount = !1, this.ariaLabel = null, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpTextSlot = !1, this._textareaId = `hx-textarea-${++S}`, this._helpTextId = `${this._textareaId}-help`, this._errorId = `${this._textareaId}-error`, this._counterId = `${this._textareaId}-counter`, this._internals = this.attachInternals();
+    super(), this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.name = "", this.rows = 4, this.readonly = !1, this.resize = "vertical", this.showCount = !1, this.ariaLabel = null, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpTextSlot = !1, this._liveAnnouncement = "", this._announceTimer = null, this._textareaId = `hx-textarea-${++S}`, this._helpTextId = `${this._textareaId}-help`, this._errorId = `${this._textareaId}-error`, this._counterId = `${this._textareaId}-counter`, this._internals = this.attachInternals();
   }
   /** @internal */
   _handleLabelSlotChange(e) {
@@ -187,6 +201,9 @@ let S = 0, r = class extends f {
     this._hasHelpTextSlot = t.assignedElements().length > 0;
   }
   // ─── Lifecycle ───
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._announceTimer !== null && (clearTimeout(this._announceTimer), this._announceTimer = null);
+  }
   updated(e) {
     if (super.updated(e), e.has("rows")) {
       const t = Math.max(1, Math.round(this.rows));
@@ -240,11 +257,17 @@ let S = 0, r = class extends f {
   formStateRestoreCallback(e) {
     this.value = e;
   }
+  /** Called when a parent fieldset is disabled/enabled. */
+  formDisabledCallback(e) {
+    this.disabled = e;
+  }
   // ─── Event Handling ───
   /** @internal */
   _handleInput(e) {
     const t = e.target;
-    this.value = t.value, this.resize === "auto" && (t.style.height = "auto", t.style.height = `${t.scrollHeight}px`), this.dispatchEvent(
+    this.value = t.value, this.resize === "auto" && (t.style.height = "auto", t.style.height = `${t.scrollHeight}px`), this._announceTimer !== null && clearTimeout(this._announceTimer), this._announceTimer = setTimeout(() => {
+      this._announceTimer = null, this.maxlength !== void 0 && this.value.length >= this.maxlength * 0.8 ? this._liveAnnouncement = `${this.value.length} of ${this.maxlength} characters` : this._liveAnnouncement = "";
+    }, 1e3), this.dispatchEvent(
       new CustomEvent("hx-input", {
         bubbles: !0,
         composed: !0,
@@ -279,7 +302,13 @@ let S = 0, r = class extends f {
     if (!this.showCount) return d;
     const e = this.value.length, t = this.maxlength !== void 0 ? `${e} / ${this.maxlength}` : `${e}`;
     return o`
-      <div part="counter" class="field__counter" id=${this._counterId} aria-live="polite">
+      <div
+        part="counter"
+        class="field__counter"
+        id=${this._counterId}
+        aria-live="polite"
+        aria-atomic="true"
+      >
         ${t}
       </div>
     `;
@@ -296,7 +325,7 @@ let S = 0, r = class extends f {
       this.showCount ? this._counterId : null
     ].filter(Boolean).join(" ") || void 0;
     return o`
-      <div part="field" class=${g(t)}>
+      <div part="field" class=${m(t)}>
         <div class="field__label-wrapper">
           <slot name="label" @slotchange=${this._handleLabelSlotChange}>
             ${this.label ? o`
@@ -313,7 +342,7 @@ let S = 0, r = class extends f {
             part="textarea"
             class="field__textarea"
             id=${this._textareaId}
-            .value=${b(this.value)}
+            .value=${g(this.value)}
             placeholder=${h(this.placeholder || void 0)}
             ?required=${this.required}
             ?disabled=${this.disabled}
@@ -334,6 +363,7 @@ let S = 0, r = class extends f {
         </div>
         ${this._renderCounter()}
+        <div aria-live="polite" aria-atomic="true" class="sr-only">${this._liveAnnouncement}</div>
         ${e ? o`
               <div part="error" class="field__error" id=${this._errorId} role="alert">
                 <slot name="error" @slotchange=${this._handleErrorSlotChange}>${this.error}</slot>
@@ -350,7 +380,7 @@ let S = 0, r = class extends f {
     `;
   }
 };
-r.styles = [m, y];
+r.styles = [b, y];
 r.formAssociated = !0;
 a([
   i({ type: String })
@@ -401,18 +431,21 @@ a([
   v(".field__textarea")
 ], r.prototype, "_textarea", 2);
 a([
-  x()
+  c()
 ], r.prototype, "_hasLabelSlot", 2);
 a([
-  x()
+  c()
 ], r.prototype, "_hasErrorSlot", 2);
 a([
-  x()
+  c()
 ], r.prototype, "_hasHelpTextSlot", 2);
+a([
+  c()
+], r.prototype, "_liveAnnouncement", 2);
 r = a([
   _("hx-textarea")
 ], r);
 export {
   r as H
 };
-//# sourceMappingURL=hx-textarea-B_nmxzhC.js.map
+//# sourceMappingURL=hx-textarea-BsQdB1Rk.js.map

package/dist/shared/hx-textarea-BsQdB1Rk.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-textarea-BsQdB1Rk.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\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(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\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(--hx-input-label-color, var(--hx-color-neutral-700, #343a40));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__required-marker {\n color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));\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\n var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));\n border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));\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(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n /* Solid fallback for browsers without color-mix() (Chrome < 111, Safari < 16.2) — WCAG 1.4.11 */\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n rgba(37, 99, 235, var(--hx-focus-ring-opacity, 0.25));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb))\n 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(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n }\n\n .field--error .field__textarea-wrapper:focus-within {\n border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n /* Solid fallback for browsers without color-mix() — WCAG 1.4.11 */\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n rgba(220, 53, 69, var(--hx-focus-ring-opacity, 0.25));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))\n 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(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-family: inherit;\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));\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(--hx-color-neutral-400, #adb5bd);\n }\n\n .field__textarea:disabled {\n cursor: not-allowed;\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-color-neutral-500, #6c757d);\n line-height: var(--hx-line-height-normal, 1.5);\n text-align: right;\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-color-neutral-500, #6c757d);\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(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\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 { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTextareaStyles } from './hx-textarea.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxTextareaIdCounter = 0;\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 */\n@customElement('hx-textarea')\nexport class HelixTextarea extends LitElement {\n static override styles = [tokenStyles, helixTextareaStyles];\n\n // ─── Form Association ───\n\n /** Enables the element to participate in form submission and validation. */\n static formAssociated = true;\n\n /** ElementInternals instance for form association, validation, and ARIA. */\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\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 })\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 * Accessible name for screen readers, if different from the visible label.\n * @attr aria-label\n */\n @property({ type: String, attribute: 'aria-label' })\n override ariaLabel: 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: Map<string, unknown>): 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 if (\n changedProperties.has('value') ||\n changedProperties.has('required') ||\n changedProperties.has('minlength') ||\n changedProperties.has('maxlength')\n ) {\n this._updateValidity();\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 /** Returns the associated form element, if any. */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** Returns the validation message. */\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Returns the ValidityState object. */\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Checks whether the textarea satisfies its constraints. */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /** Reports validity and shows the browser's constraint validation UI. */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n /** @internal */\n private _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 field is required.',\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 /** Called by the browser when the owning form is reset. */\n formResetCallback(): void {\n this.value = '';\n this._internals.setFormValue('');\n }\n\n /** Called by the browser to restore form state (e.g., back/forward navigation). */\n formStateRestoreCallback(state: string): void {\n this.value = state;\n }\n\n /** Called when a parent fieldset is disabled/enabled. */\n formDisabledCallback(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 // 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('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._updateValidity();\n\n /**\n * Dispatched when the textarea loses focus after its value changed.\n * @event hx-change\n */\n this.dispatchEvent(\n new CustomEvent('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 = `hx-textarea-${++_hxTextareaIdCounter}`;\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 const count = 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\n part=\"counter\"\n class=\"field__counter\"\n id=${this._counterId}\n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\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 // Include counter in aria-describedby so screen readers associate it with the textarea.\n // The counter also has aria-live=\"polite\" for dynamic updates (WCAG 4.1.3).\n const describedBy =\n [\n hasError ? this._errorId : null,\n hasHelpText ? this._helpTextId : null,\n this.showCount ? this._counterId : 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._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.ariaLabel ?? 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\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-textarea': HelixTextarea;\n }\n}\n\n/** Canonical type alias for the hx-textarea component. */\nexport type HxTextarea = HelixTextarea;\n\n/** @deprecated Use {@link HxTextarea} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcTextarea = HelixTextarea;\n"],"names":["helixTextareaStyles","css","_hxTextareaIdCounter","HelixTextarea","LitElement","slot","slottedLabel","changedProperties","clamped","anchor","state","disabled","target","options","_a","nothing","count","display","html","hasError","fieldClasses","hasHelpText","describedBy","classMap","live","ifDefined","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-time-picker-a-BCkecJ.js → hx-time-picker-CJcIjH3C.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { css as C, LitElement as E, nothing as u, html as x } from "lit";
-import { property as h, state as _, query as $, customElement as L } from "lit/decorators.js";
+import { css as C, LitElement as E, nothing as _, html as x } from "lit";
+import { property as h, state as p, query as $, customElement as L } from "lit/decorators.js";
 import { classMap as w } from "lit/directives/class-map.js";
 import { ifDefined as f } from "lit/directives/if-defined.js";
 import { live as V } from "lit/directives/live.js";
@@ -227,9 +227,9 @@ const O = C`
     line-height: var(--hx-line-height-normal, 1.5);
   }
 `;
-var A = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (e, t, o, i) => {
-  for (var r = i > 1 ? void 0 : i ? P(t, o) : t, a = e.length - 1, n; a >= 0; a--)
-    (n = e[a]) && (r = (i ? n(t, o, r) : n(r)) || r);
+var A = Object.defineProperty, P = Object.getOwnPropertyDescriptor, a = (e, t, o, i) => {
+  for (var r = i > 1 ? void 0 : i ? P(t, o) : t, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (r = (i ? n(t, o, r) : n(r)) || r);
   return i && r && A(t, o, r), r;
 };
 function d(e) {
@@ -244,12 +244,12 @@ function m(e, t) {
 function k(e) {
   const t = d(e);
   if (!t) return e;
-  const { hours: o, minutes: i } = t, r = o < 12 ? "AM" : "PM", a = o % 12 === 0 ? 12 : o % 12;
-  return `${String(a).padStart(2, "0")}:${String(i).padStart(2, "0")} ${r}`;
+  const { hours: o, minutes: i } = t, r = o < 12 ? "AM" : "PM", l = o % 12 === 0 ? 12 : o % 12;
+  return `${String(l).padStart(2, "0")}:${String(i).padStart(2, "0")} ${r}`;
 }
 function z(e, t, o, i) {
-  const r = d(e) ?? { hours: 0, minutes: 0 }, a = d(t) ?? { hours: 23, minutes: 59 }, n = r.hours * 60 + r.minutes, c = a.hours * 60 + a.minutes, p = Math.max(1, Math.round(o)), v = [];
-  for (let b = n; b <= c; b += p) {
+  const r = d(e) ?? { hours: 0, minutes: 0 }, l = d(t) ?? { hours: 23, minutes: 59 }, n = r.hours * 60 + r.minutes, c = l.hours * 60 + l.minutes, u = Math.max(1, Math.round(o)), v = [];
+  for (let b = n; b <= c; b += u) {
     const I = Math.floor(b / 60) % 24, S = b % 60, g = m(I, S);
     v.push({
       value: g,
@@ -262,27 +262,31 @@ function y(e, t, o) {
   if (!e) return "";
   const i = d(e);
   if (!i) return "";
-  const r = i.hours * 60 + i.minutes, a = d(t) ?? { hours: 0, minutes: 0 }, n = d(o) ?? { hours: 23, minutes: 59 }, c = a.hours * 60 + a.minutes, p = n.hours * 60 + n.minutes;
-  return r < c ? m(a.hours, a.minutes) : r > p ? m(n.hours, n.minutes) : m(i.hours, i.minutes);
+  const r = i.hours * 60 + i.minutes, l = d(t) ?? { hours: 0, minutes: 0 }, n = d(o) ?? { hours: 23, minutes: 59 }, c = l.hours * 60 + l.minutes, u = n.hours * 60 + n.minutes;
+  return r < c ? m(l.hours, l.minutes) : r > u ? m(n.hours, n.minutes) : m(i.hours, i.minutes);
 }
-function T(e) {
+function H(e) {
   const t = e.trim().toUpperCase(), o = d(t);
   if (o) return m(o.hours, o.minutes);
   const i = /^(\d{1,2})(?::(\d{2}))?\s*(AM|PM)$/.exec(t) ?? /^(\d{1,2})(\d{2})\s*(AM|PM)$/.exec(t);
   if (i) {
     let r = parseInt(i[1] ?? "0", 10);
-    const a = i[2] !== void 0 ? parseInt(i[2], 10) : 0, n = i[3] ?? "";
-    return r < 1 || r > 12 || a < 0 || a > 59 ? null : (n === "AM" ? r = r === 12 ? 0 : r : r = r === 12 ? 12 : r + 12, m(r, a));
+    const l = i[2] !== void 0 ? parseInt(i[2], 10) : 0, n = i[3] ?? "";
+    return r < 1 || r > 12 || l < 0 || l > 59 ? null : (n === "AM" ? r = r === 12 ? 0 : r : r = r === 12 ? 12 : r + 12, m(r, l));
   }
   return null;
 }
 let s = class extends E {
   constructor() {
-    super(), this.name = "", this.value = "", this.min = "00:00", this.max = "23:59", this.step = 30, this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.format = "12h", this._open = !1, this._activeIndex = -1, this._inputDisplayValue = "", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._slottedLabelId = "", this._id = `hx-time-picker-${++s._instanceCount}`, this._listboxId = `${this._id}-listbox`, this._errorId = `${this._id}-error`, this._helpId = `${this._id}-help`, this._cachedSlots = null, this._slotsKey = "", this._handleOutsideClick = (e) => {
+    super(), this.name = "", this.value = "", this.min = "00:00", this.max = "23:59", this.step = 30, this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.format = "12h", this._open = !1, this._activeIndex = -1, this._inputDisplayValue = "", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._slottedLabelId = "", this._id = `hx-time-picker-${++s._instanceCount}`, this._listboxId = `${this._id}-listbox`, this._errorId = `${this._id}-error`, this._helpId = `${this._id}-help`, this._cachedSlots = null, this._slotsKey = "", this._handleOutsideClick = (e) => {
       var t;
       !this.contains(e.target) && !((t = this.shadowRoot) != null && t.contains(e.target)) && this._closeListbox();
     }, this._internals = this.attachInternals();
   }
+  /**
+   * Lazily generates and caches the list of time slots based on current min, max, step, and format.
+   * @internal
+   */
   get _slots() {
     const e = `${this.min}|${this.max}|${this.step}|${this.format}`;
     return (this._cachedSlots === null || e !== this._slotsKey) && (this._slotsKey = e, this._cachedSlots = z(this.min, this.max, this.step, this.format)), this._cachedSlots;
@@ -367,6 +371,10 @@ let s = class extends E {
     const t = e.target;
     this._hasErrorSlot = t.assignedNodes({ flatten: !0 }).length > 0;
   }
+  _handleHelpSlotChange(e) {
+    const t = e.target;
+    this._hasHelpSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  }
   // ─── Event Dispatch ───
   _dispatchChange(e) {
     this.dispatchEvent(
@@ -395,7 +403,7 @@ let s = class extends E {
       this.value = "", this._internals.setFormValue(null), this._updateValidity(), this._dispatchChange("");
       return;
     }
-    const i = T(o);
+    const i = H(o);
     if (i) {
       const r = y(i, this.min, this.max);
       this.value = r, this._dispatchChange(r);
@@ -454,7 +462,7 @@ let s = class extends E {
       "field--error": e,
       "field--disabled": this.disabled,
       "field--required": this.required
-    }, i = this._open && this._activeIndex >= 0 ? `${this._listboxId}-option-${this._activeIndex}` : void 0, r = this.format === "12h" ? "hh:mm AM" : "hh:mm", a = [e ? this._errorId : null, this._helpId].filter(Boolean).join(" ") || void 0;
+    }, i = this._open && this._activeIndex >= 0 ? `${this._listboxId}-option-${this._activeIndex}` : void 0, r = this.format === "12h" ? "hh:mm AM" : "hh:mm", l = [e ? this._errorId : null, this._hasHelpSlot ? this._helpId : null].filter(Boolean).join(" ") || void 0;
     return x`
       <div part="field" class=${w(o)}>
         <!-- Label -->
@@ -462,9 +470,9 @@ let s = class extends E {
           ${this.label ? x`
                 <label part="label" class="field__label" for=${this._id}>
                   ${this.label}
-                  ${this.required ? x`<span class="field__required-marker" aria-hidden="true">*</span>` : u}
+                  ${this.required ? x`<span class="field__required-marker" aria-hidden="true">*</span>` : _}
                 </label>
-              ` : u}
+              ` : _}
         </slot>
         <!-- Combobox wrapper; role="combobox" lives on the input per ARIA 1.2 -->
@@ -488,9 +496,9 @@ let s = class extends E {
             aria-autocomplete="list"
             aria-controls=${f(this._open ? this._listboxId : void 0)}
             aria-activedescendant=${f(i)}
-            aria-invalid=${e ? "true" : u}
-            aria-describedby=${f(a)}
-            aria-required=${this.required ? "true" : u}
+            aria-invalid=${e ? "true" : _}
+            aria-describedby=${f(l)}
+            aria-required=${this.required ? "true" : _}
             aria-labelledby=${f(
       this._hasLabelSlot && this._slottedLabelId ? this._slottedLabelId : void 0
     )}
@@ -543,18 +551,18 @@ let s = class extends E {
       t,
       (n) => n.value,
       (n, c) => {
-        const p = n.value === this.value, v = c === this._activeIndex;
+        const u = n.value === this.value, v = c === this._activeIndex;
         return x`
                         <li
                           part="option"
                           class=${w({
           field__option: !0,
-          "field__option--selected": p,
+          "field__option--selected": u,
           "field__option--active": v
         })}
                           id="${this._listboxId}-option-${c}"
                           role="option"
-                          aria-selected=${p ? "true" : "false"}
+                          aria-selected=${u ? "true" : "false"}
                           @pointerdown=${this._handleOptionPointerDown}
                           @click=${() => this._handleOptionClick(n)}
                           @mouseenter=${() => this._handleOptionMouseEnter(c)}
@@ -565,7 +573,7 @@ let s = class extends E {
       }
     )}
                 </ul>
-              ` : u}
+              ` : _}
         </div>
         <!-- Error slot / property -->
@@ -574,12 +582,12 @@ let s = class extends E {
                 <div part="error" class="field__error" id=${this._errorId} role="alert">
                   ${this.error}
                 </div>
-              ` : u}
+              ` : _}
         </slot>
         <!-- Help slot -->
         <div part="help-text" class="field__help-text" id=${this._helpId}>
-          <slot name="help"></slot>
+          <slot name="help-text" @slotchange=${this._handleHelpSlotChange}></slot>
         </div>
       </div>
     `;
@@ -588,64 +596,67 @@ let s = class extends E {
 s.styles = [M, O];
 s.formAssociated = !0;
 s._instanceCount = 0;
-l([
+a([
   h({ type: String })
 ], s.prototype, "name", 2);
-l([
+a([
   h({ type: String, reflect: !0 })
 ], s.prototype, "value", 2);
-l([
+a([
   h({ type: String })
 ], s.prototype, "min", 2);
-l([
+a([
   h({ type: String })
 ], s.prototype, "max", 2);
-l([
+a([
   h({ type: Number })
 ], s.prototype, "step", 2);
-l([
+a([
   h({ type: String })
 ], s.prototype, "label", 2);
-l([
+a([
   h({ type: Boolean, reflect: !0 })
 ], s.prototype, "required", 2);
-l([
+a([
   h({ type: Boolean, reflect: !0 })
 ], s.prototype, "disabled", 2);
-l([
+a([
   h({ type: String })
 ], s.prototype, "error", 2);
-l([
+a([
   h({ type: String, reflect: !0 })
 ], s.prototype, "format", 2);
-l([
-  _()
+a([
+  p()
 ], s.prototype, "_open", 2);
-l([
-  _()
+a([
+  p()
 ], s.prototype, "_activeIndex", 2);
-l([
-  _()
+a([
+  p()
 ], s.prototype, "_inputDisplayValue", 2);
-l([
-  _()
+a([
+  p()
 ], s.prototype, "_hasLabelSlot", 2);
-l([
-  _()
+a([
+  p()
 ], s.prototype, "_hasErrorSlot", 2);
-l([
-  _()
+a([
+  p()
+], s.prototype, "_hasHelpSlot", 2);
+a([
+  p()
 ], s.prototype, "_slottedLabelId", 2);
-l([
+a([
   $(".field__input")
 ], s.prototype, "_inputEl", 2);
-l([
+a([
   $(".field__listbox")
 ], s.prototype, "_listboxEl", 2);
-s = l([
+s = a([
   L("hx-time-picker")
 ], s);
 export {
   s as H
 };
-//# sourceMappingURL=hx-time-picker-a-BCkecJ.js.map
+//# sourceMappingURL=hx-time-picker-CJcIjH3C.js.map