@helixui/library 0.3.4 → 1.0.1

package/dist/shared/{hx-form-BJeLK34m.js.map → hx-form-BFv_N1dm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-form-BJeLK34m.js","sources":["../../src/styles/form/form.scoped.css?raw","../../src/components/hx-form/hx-form.styles.ts","../../src/components/hx-form/hx-form.ts"],"sourcesContent":["export default \"/* ==========================================================================\\n * form.scoped.css — Scoped barrel file\\n *\\n * Contains all form styles with every selector prefixed by `hx-form` to\\n * prevent leaking outside the <hx-form> Light DOM wrapper.\\n *\\n * IMPORTANT: This file does NOT use @import because CSS imports cannot\\n * add scope prefixes. All styles are written inline.\\n * ==========================================================================\\n */\\n\\n/* ==========================================================================\\n * HOST / FORM ROOT TOKENS\\n * ========================================================================== */\\n\\nhx-form {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--hx-form-gap, var(--hx-space-4, 1rem));\\n  max-width: var(--hx-form-max-width, none);\\n  padding: var(--hx-form-padding, 0);\\n}\\n\\n/* ==========================================================================\\n * ERROR SUMMARY\\n * ========================================================================== */\\n\\nhx-form .hx-form-error-summary {\\n  border: var(--hx-border-width-thin, 1px) solid\\n    var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n  border-radius: var(--hx-border-radius-md, 0.375rem);\\n  background-color: var(--hx-color-error-50, #fef2f2);\\n  color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\\n}\\n\\nhx-form .hx-form-error-summary ul {\\n  margin: 0;\\n  padding: 0 0 0 var(--hx-space-4, 1rem);\\n}\\n\\nhx-form .hx-form-error-summary li {\\n  margin-bottom: var(--hx-space-1, 0.25rem);\\n}\\n\\nhx-form .hx-form-error-summary li:last-child {\\n  margin-bottom: 0;\\n}\\n\\n/* ==========================================================================\\n * FIELD (_field.css scoped)\\n * ========================================================================== */\\n\\n/* ─── Field Container ─── */\\n\\nhx-form .form-item {\\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\\nhx-form .form-item + .form-item {\\n  margin-top: var(--hx-space-4, 1rem);\\n}\\n\\n/* ─── Label ─── */\\n\\nhx-form 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/* ─── Required Marker ─── */\\n\\nhx-form .form-required {\\n  color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n  font-weight: var(--hx-font-weight-bold, 700);\\n}\\n\\n/* ─── Description / Help Text ─── */\\n\\nhx-form .description {\\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/* ─── Box Sizing Reset ─── */\\n\\nhx-form .form-item *,\\nhx-form .form-item *::before,\\nhx-form .form-item *::after {\\n  box-sizing: border-box;\\n}\\n\\n/* ==========================================================================\\n * TEXT INPUT (_text-input.css scoped)\\n * ========================================================================== */\\n\\nhx-form input[type='text'],\\nhx-form input[type='email'],\\nhx-form input[type='password'],\\nhx-form input[type='tel'],\\nhx-form input[type='url'],\\nhx-form input[type='search'],\\nhx-form input[type='number'] {\\n  display: block;\\n  width: 100%;\\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  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\\n  font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\\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  transition:\\n    border-color var(--hx-transition-fast, 150ms ease),\\n    box-shadow var(--hx-transition-fast, 150ms ease);\\n}\\n\\n/* ─── Placeholder ─── */\\n\\nhx-form input[type='text']::placeholder,\\nhx-form input[type='email']::placeholder,\\nhx-form input[type='password']::placeholder,\\nhx-form input[type='tel']::placeholder,\\nhx-form input[type='url']::placeholder,\\nhx-form input[type='search']::placeholder,\\nhx-form input[type='number']::placeholder {\\n  color: var(--hx-color-neutral-400, #adb5bd);\\n}\\n\\n/* ─── Focus State ─── */\\n\\nhx-form input[type='text']:focus,\\nhx-form input[type='email']:focus,\\nhx-form input[type='password']:focus,\\nhx-form input[type='tel']:focus,\\nhx-form input[type='url']:focus,\\nhx-form input[type='search']:focus,\\nhx-form input[type='number']:focus {\\n  outline: 0;\\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@media (forced-colors: active) {\\n  hx-form input[type='text']:focus,\\n  hx-form input[type='email']:focus,\\n  hx-form input[type='password']:focus,\\n  hx-form input[type='tel']:focus,\\n  hx-form input[type='url']:focus,\\n  hx-form input[type='search']:focus,\\n  hx-form input[type='number']:focus {\\n    outline: var(--hx-focus-ring-width, 2px) solid ButtonText;\\n    outline-offset: var(--hx-focus-ring-offset, 2px);\\n  }\\n}\\n\\n/* ─── Disabled State ─── */\\n\\nhx-form input[type='text']:disabled,\\nhx-form input[type='email']:disabled,\\nhx-form input[type='password']:disabled,\\nhx-form input[type='tel']:disabled,\\nhx-form input[type='url']:disabled,\\nhx-form input[type='search']:disabled,\\nhx-form input[type='number']:disabled {\\n  opacity: var(--hx-opacity-disabled, 0.5);\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\\n/* ─── Read-Only State ─── */\\n\\nhx-form input[type='text']:read-only,\\nhx-form input[type='email']:read-only,\\nhx-form input[type='password']:read-only,\\nhx-form input[type='tel']:read-only,\\nhx-form input[type='url']:read-only,\\nhx-form input[type='search']:read-only,\\nhx-form input[type='number']:read-only {\\n  background-color: var(--hx-color-neutral-100, #e9ecef);\\n}\\n\\n/* ─── Remove browser search decorations ─── */\\n\\nhx-form input[type='search']::-webkit-search-decoration,\\nhx-form input[type='search']::-webkit-search-cancel-button,\\nhx-form input[type='search']::-webkit-search-results-button,\\nhx-form input[type='search']::-webkit-search-results-decoration {\\n  -webkit-appearance: none;\\n}\\n\\n/* ─── Remove number input spinners ─── */\\n\\nhx-form input[type='number']::-webkit-inner-spin-button,\\nhx-form input[type='number']::-webkit-outer-spin-button {\\n  -webkit-appearance: none;\\n  margin: 0;\\n}\\n\\nhx-form input[type='number'] {\\n  appearance: textfield;\\n}\\n\\n/* ==========================================================================\\n * TEXTAREA (_textarea.css scoped)\\n * ========================================================================== */\\n\\nhx-form textarea {\\n  display: block;\\n  width: 100%;\\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  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\\n  font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\\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  resize: vertical;\\n  transition:\\n    border-color var(--hx-transition-fast, 150ms ease),\\n    box-shadow var(--hx-transition-fast, 150ms ease);\\n}\\n\\nhx-form textarea::placeholder {\\n  color: var(--hx-color-neutral-400, #adb5bd);\\n}\\n\\nhx-form textarea:focus {\\n  outline: 0;\\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@media (forced-colors: active) {\\n  hx-form textarea:focus {\\n    outline: var(--hx-focus-ring-width, 2px) solid ButtonText;\\n    outline-offset: var(--hx-focus-ring-offset, 2px);\\n  }\\n}\\n\\nhx-form textarea:disabled {\\n  opacity: var(--hx-opacity-disabled, 0.5);\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\\nhx-form textarea:read-only {\\n  background-color: var(--hx-color-neutral-100, #e9ecef);\\n}\\n\\n/* ==========================================================================\\n * SELECT (_select.css scoped)\\n * ========================================================================== */\\n\\nhx-form select {\\n  display: block;\\n  width: 100%;\\n  border: var(--hx-border-width-thin, 1px) solid\\n    var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));\\n  border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));\\n  background-color: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));\\n  padding: var(--hx-space-2, 0.5rem) var(--hx-space-8, 2rem) var(--hx-space-2, 0.5rem)\\n    var(--hx-space-3, 0.75rem);\\n  font-family: var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));\\n  font-size: var(--hx-font-size-md, 1rem);\\n  color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));\\n  cursor: pointer;\\n  transition:\\n    border-color var(--hx-transition-fast, 150ms ease),\\n    box-shadow var(--hx-transition-fast, 150ms ease);\\n  appearance: none;\\n  -webkit-appearance: none;\\n  -moz-appearance: none;\\n  background-image: url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E\\\");\\n  background-repeat: no-repeat;\\n  background-position: right var(--hx-space-3, 0.75rem) center;\\n  background-size: 12px 8px;\\n}\\n\\nhx-form select:focus {\\n  outline: 0;\\n  border-color: var(--hx-select-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-select-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@media (forced-colors: active) {\\n  hx-form select:focus {\\n    outline: var(--hx-focus-ring-width, 2px) solid ButtonText;\\n    outline-offset: var(--hx-focus-ring-offset, 2px);\\n  }\\n}\\n\\nhx-form select:disabled {\\n  opacity: var(--hx-opacity-disabled, 0.5);\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\\nhx-form select[multiple] {\\n  min-height: var(--hx-size-20, 5rem);\\n  padding-right: var(--hx-space-3, 0.75rem);\\n  background-image: none;\\n}\\n\\nhx-form select[multiple] option {\\n  padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\\n}\\n\\nhx-form select::-ms-expand {\\n  display: none;\\n}\\n\\n/* ==========================================================================\\n * CHECKBOX (_checkbox.css scoped)\\n * ========================================================================== */\\n\\nhx-form input[type='checkbox'] {\\n  appearance: none;\\n  -webkit-appearance: none;\\n  -moz-appearance: none;\\n  display: inline-flex;\\n  align-items: center;\\n  justify-content: center;\\n  flex-shrink: 0;\\n  width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\\n  height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\\n  margin: 0;\\n  border: var(--hx-border-width-medium, 2px) solid\\n    var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));\\n  border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));\\n  background-color: var(--hx-color-neutral-0, #ffffff);\\n  transition:\\n    background-color var(--hx-transition-fast, 150ms ease),\\n    border-color var(--hx-transition-fast, 150ms ease),\\n    box-shadow var(--hx-transition-fast, 150ms ease);\\n  cursor: pointer;\\n  vertical-align: middle;\\n}\\n\\nhx-form input[type='checkbox']:checked {\\n  background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\\n  border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\\n  background-image: url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\\\");\\n  background-repeat: no-repeat;\\n  background-position: center;\\n  background-size: 100%;\\n}\\n\\nhx-form input[type='checkbox']:indeterminate {\\n  background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\\n  border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\\n  background-image: url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8H12' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E\\\");\\n  background-repeat: no-repeat;\\n  background-position: center;\\n  background-size: 100%;\\n}\\n\\nhx-form input[type='checkbox']:focus-visible {\\n  outline: var(--hx-focus-ring-width, 2px) solid\\n    var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\\n  outline-offset: var(--hx-focus-ring-offset, 2px);\\n}\\n\\nhx-form input[type='checkbox']:hover:not(:disabled) {\\n  border-color: var(--hx-color-primary-500, #2563eb);\\n}\\n\\nhx-form input[type='checkbox']:checked:hover:not(:disabled) {\\n  filter: brightness(var(--hx-filter-brightness-hover, 0.9));\\n}\\n\\nhx-form input[type='checkbox']:disabled {\\n  opacity: var(--hx-opacity-disabled, 0.5);\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\\nhx-form .form-type-checkbox,\\nhx-form .form-type-checkbox-toggle {\\n  display: flex;\\n  align-items: flex-start;\\n  gap: var(--hx-space-2, 0.5rem);\\n}\\n\\nhx-form .form-type-checkbox label,\\nhx-form .form-type-checkbox-toggle label {\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  font-weight: var(--hx-font-weight-medium, 500);\\n  color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  cursor: pointer;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\n/* ==========================================================================\\n * RADIO (_radio.css scoped)\\n * ========================================================================== */\\n\\nhx-form input[type='radio'] {\\n  appearance: none;\\n  -webkit-appearance: none;\\n  -moz-appearance: none;\\n  display: inline-flex;\\n  align-items: center;\\n  justify-content: center;\\n  flex-shrink: 0;\\n  width: var(--hx-radio-size, var(--hx-size-5, 1.25rem));\\n  height: var(--hx-radio-size, var(--hx-size-5, 1.25rem));\\n  margin: 0;\\n  border: var(--hx-border-width-medium, 2px) solid\\n    var(--hx-radio-border-color, var(--hx-color-neutral-300, #ced4da));\\n  border-radius: var(--hx-border-radius-full, 9999px);\\n  background-color: var(--hx-color-neutral-0, #ffffff);\\n  transition:\\n    border-color var(--hx-transition-fast, 150ms ease),\\n    background-color var(--hx-transition-fast, 150ms ease),\\n    box-shadow var(--hx-transition-fast, 150ms ease);\\n  cursor: pointer;\\n  vertical-align: middle;\\n}\\n\\nhx-form input[type='radio']:checked {\\n  border-color: var(--hx-radio-checked-border-color, var(--hx-color-primary-500, #2563eb));\\n  background-color: var(--hx-radio-checked-bg, var(--hx-color-primary-500, #2563eb));\\n  box-shadow: inset 0 0 0 calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * 0.3)\\n    var(--hx-radio-dot-color, var(--hx-color-neutral-0, #ffffff));\\n}\\n\\nhx-form input[type='radio']:focus-visible {\\n  outline: var(--hx-focus-ring-width, 2px) solid\\n    var(--hx-radio-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\\n  outline-offset: var(--hx-focus-ring-offset, 2px);\\n}\\n\\nhx-form input[type='radio']:hover:not(:disabled):not(:checked) {\\n  border-color: var(--hx-color-neutral-400, #adb5bd);\\n}\\n\\nhx-form input[type='radio']:disabled {\\n  opacity: var(--hx-opacity-disabled, 0.5);\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\\nhx-form .form-type-radio {\\n  display: inline-flex;\\n  align-items: center;\\n  gap: var(--hx-space-2, 0.5rem);\\n}\\n\\nhx-form .form-type-radio label {\\n  font-size: var(--hx-font-size-md, 1rem);\\n  color: var(--hx-radio-label-color, var(--hx-color-neutral-700, #343a40));\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  cursor: pointer;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\nhx-form .form-radios {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--hx-radio-group-gap, var(--hx-space-3, 0.75rem));\\n}\\n\\nhx-form .form-radios--horizontal {\\n  flex-direction: row;\\n  flex-wrap: wrap;\\n}\\n\\n/* ==========================================================================\\n * SWITCH (_switch.css scoped)\\n * ========================================================================== */\\n\\nhx-form .form-type-switch {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--hx-space-1, 0.25rem);\\n  font-family: var(--hx-font-family-sans, sans-serif);\\n}\\n\\nhx-form .form-type-switch .switch__control-row {\\n  display: flex;\\n  align-items: center;\\n  gap: var(--hx-space-2, 0.5rem);\\n}\\n\\nhx-form .form-type-switch input[type='checkbox'] {\\n  appearance: none;\\n  -webkit-appearance: none;\\n  -moz-appearance: none;\\n  position: relative;\\n  display: inline-flex;\\n  align-items: center;\\n  flex-shrink: 0;\\n  width: var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));\\n  height: var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));\\n  margin: 0;\\n  border: none;\\n  border-radius: var(--hx-border-radius-full, 9999px);\\n  background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));\\n  transition: background-color var(--hx-transition-fast, 150ms ease);\\n  cursor: pointer;\\n  background-image: none;\\n}\\n\\nhx-form .form-type-switch input[type='checkbox']::before {\\n  content: '';\\n  position: absolute;\\n  top: 50%;\\n  left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\\n  transform: translateY(-50%);\\n  width: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\\n  height: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\\n  border-radius: var(--hx-border-radius-full, 9999px);\\n  background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));\\n  box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));\\n  transition: transform var(--hx-transition-fast, 150ms ease);\\n}\\n\\nhx-form .form-type-switch input[type='checkbox']:checked {\\n  background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));\\n  background-image: none;\\n}\\n\\nhx-form .form-type-switch input[type='checkbox']:checked::before {\\n  transform: translateY(-50%)\\n    translateX(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)));\\n}\\n\\nhx-form .form-type-switch input[type='checkbox']:focus-visible {\\n  outline: var(--hx-focus-ring-width, 2px) solid\\n    var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\\n  outline-offset: var(--hx-focus-ring-offset, 2px);\\n}\\n\\nhx-form .form-type-switch input[type='checkbox']:disabled {\\n  opacity: var(--hx-opacity-disabled, 0.5);\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\\nhx-form .form-type-switch label {\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  font-weight: var(--hx-font-weight-medium, 500);\\n  color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  cursor: pointer;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\n/* Small */\\nhx-form .form-type-switch--sm input[type='checkbox'] {\\n  width: var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));\\n  height: var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem));\\n}\\n\\nhx-form .form-type-switch--sm input[type='checkbox']::before {\\n  width: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\\n  height: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\\n}\\n\\nhx-form .form-type-switch--sm input[type='checkbox']:checked::before {\\n  transform: translateY(-50%)\\n    translateX(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem)));\\n}\\n\\n/* Large */\\nhx-form .form-type-switch--lg input[type='checkbox'] {\\n  width: var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));\\n  height: var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem));\\n}\\n\\nhx-form .form-type-switch--lg input[type='checkbox']::before {\\n  width: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\\n  height: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\\n}\\n\\nhx-form .form-type-switch--lg input[type='checkbox']:checked::before {\\n  transform: translateY(-50%)\\n    translateX(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)));\\n}\\n\\n/* ==========================================================================\\n * FORM LAYOUT (_form-layout.css scoped)\\n * ========================================================================== */\\n\\n/* ─── Form Root ─── */\\n\\nhx-form form {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--hx-form-gap, var(--hx-space-4, 1rem));\\n  font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\\n}\\n\\n/* ─── Fieldset ─── */\\n\\nhx-form fieldset {\\n  border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);\\n  border-radius: var(--hx-border-radius-md, 0.375rem);\\n  padding: var(--hx-space-4, 1rem) var(--hx-space-4, 1rem) var(--hx-space-4, 1rem);\\n  margin: 0;\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--hx-space-4, 1rem);\\n}\\n\\n/* ─── Legend ─── */\\n\\nhx-form legend {\\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-semibold, 600);\\n  color: var(--hx-color-neutral-700, #343a40);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  padding: 0 var(--hx-space-1, 0.25rem);\\n}\\n\\n/* ─── Details / Collapsible Fieldset (Drupal) ─── */\\n\\nhx-form details {\\n  border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);\\n  border-radius: var(--hx-border-radius-md, 0.375rem);\\n  padding: var(--hx-space-4, 1rem);\\n  margin: 0;\\n}\\n\\nhx-form summary {\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  font-weight: var(--hx-font-weight-semibold, 600);\\n  color: var(--hx-color-neutral-700, #343a40);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  cursor: pointer;\\n  padding: var(--hx-space-1, 0.25rem) 0;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\nhx-form summary:focus-visible {\\n  outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\\n  outline-offset: var(--hx-focus-ring-offset, 2px);\\n  border-radius: var(--hx-border-radius-sm, 0.25rem);\\n}\\n\\n/* ─── Form Actions (button group) ─── */\\n\\nhx-form .form-actions {\\n  display: flex;\\n  align-items: center;\\n  gap: var(--hx-space-3, 0.75rem);\\n  padding-top: var(--hx-space-4, 1rem);\\n}\\n\\nhx-form .form-actions--end {\\n  justify-content: flex-end;\\n}\\n\\nhx-form .form-actions--between {\\n  justify-content: space-between;\\n}\\n\\n/* ─── Multi-Column Layout ─── */\\n\\nhx-form .form-columns {\\n  display: grid;\\n  gap: var(--hx-space-4, 1rem);\\n}\\n\\nhx-form .form-columns--2 {\\n  grid-template-columns: repeat(2, 1fr);\\n}\\n\\nhx-form .form-columns--3 {\\n  grid-template-columns: repeat(3, 1fr);\\n}\\n\\nhx-form .form-columns--4 {\\n  grid-template-columns: repeat(4, 1fr);\\n}\\n\\n@media (max-width: 640px) {\\n  hx-form .form-columns--2,\\n  hx-form .form-columns--3,\\n  hx-form .form-columns--4 {\\n    grid-template-columns: 1fr;\\n  }\\n}\\n\\n/* ─── Full-Width Form Item (spans all columns) ─── */\\n\\nhx-form .form-item--full {\\n  grid-column: 1 / -1;\\n}\\n\\n/* ─── Inline Form Layout ─── */\\n\\nhx-form .form-inline {\\n  display: flex;\\n  flex-wrap: wrap;\\n  align-items: flex-end;\\n  gap: var(--hx-space-3, 0.75rem);\\n}\\n\\nhx-form .form-inline .form-item {\\n  flex: 1;\\n  min-width: 0;\\n}\\n\\nhx-form .form-inline .form-item + .form-item {\\n  margin-top: 0;\\n}\\n\\n/* ─── Form Divider ─── */\\n\\nhx-form .form-divider {\\n  border: none;\\n  border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);\\n  margin: var(--hx-space-2, 0.5rem) 0;\\n}\\n\\n/* ==========================================================================\\n * VALIDATION (_validation.css scoped)\\n * ========================================================================== */\\n\\n/* ─── Error State on Field Wrapper ─── */\\n\\nhx-form .form-item.error label,\\nhx-form .form-item.has-error label,\\nhx-form .form-item--error label {\\n  color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n}\\n\\nhx-form .form-item.error input[type='text'],\\nhx-form .form-item.error input[type='email'],\\nhx-form .form-item.error input[type='password'],\\nhx-form .form-item.error input[type='tel'],\\nhx-form .form-item.error input[type='url'],\\nhx-form .form-item.error input[type='search'],\\nhx-form .form-item.error input[type='number'],\\nhx-form .form-item.error textarea,\\nhx-form .form-item.error select,\\nhx-form .form-item.has-error input[type='text'],\\nhx-form .form-item.has-error input[type='email'],\\nhx-form .form-item.has-error input[type='password'],\\nhx-form .form-item.has-error input[type='tel'],\\nhx-form .form-item.has-error input[type='url'],\\nhx-form .form-item.has-error input[type='search'],\\nhx-form .form-item.has-error input[type='number'],\\nhx-form .form-item.has-error textarea,\\nhx-form .form-item.has-error select,\\nhx-form .form-item--error input[type='text'],\\nhx-form .form-item--error input[type='email'],\\nhx-form .form-item--error input[type='password'],\\nhx-form .form-item--error input[type='tel'],\\nhx-form .form-item--error input[type='url'],\\nhx-form .form-item--error input[type='search'],\\nhx-form .form-item--error input[type='number'],\\nhx-form .form-item--error textarea,\\nhx-form .form-item--error select {\\n  border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n}\\n\\nhx-form .form-item.error input[type='text']:focus,\\nhx-form .form-item.error input[type='email']:focus,\\nhx-form .form-item.error input[type='password']:focus,\\nhx-form .form-item.error input[type='tel']:focus,\\nhx-form .form-item.error input[type='url']:focus,\\nhx-form .form-item.error input[type='search']:focus,\\nhx-form .form-item.error input[type='number']:focus,\\nhx-form .form-item.error textarea:focus,\\nhx-form .form-item.error select:focus,\\nhx-form .form-item.has-error input[type='text']:focus,\\nhx-form .form-item.has-error input[type='email']:focus,\\nhx-form .form-item.has-error input[type='password']:focus,\\nhx-form .form-item.has-error input[type='tel']:focus,\\nhx-form .form-item.has-error input[type='url']:focus,\\nhx-form .form-item.has-error input[type='search']:focus,\\nhx-form .form-item.has-error input[type='number']:focus,\\nhx-form .form-item.has-error textarea:focus,\\nhx-form .form-item.has-error select:focus,\\nhx-form .form-item--error input[type='text']:focus,\\nhx-form .form-item--error input[type='email']:focus,\\nhx-form .form-item--error input[type='password']:focus,\\nhx-form .form-item--error input[type='tel']:focus,\\nhx-form .form-item--error input[type='url']:focus,\\nhx-form .form-item--error input[type='search']:focus,\\nhx-form .form-item--error input[type='number']:focus,\\nhx-form .form-item--error textarea:focus,\\nhx-form .form-item--error select:focus {\\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/* ─── Error State on Checkbox/Radio ─── */\\n\\nhx-form .form-item.error input[type='checkbox'],\\nhx-form .form-item.has-error input[type='checkbox'],\\nhx-form .form-item--error input[type='checkbox'] {\\n  border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\\n}\\n\\nhx-form .form-item.error input[type='checkbox']:checked,\\nhx-form .form-item.has-error input[type='checkbox']:checked,\\nhx-form .form-item--error input[type='checkbox']:checked {\\n  background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\\n  border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\\n}\\n\\nhx-form .form-item.error input[type='radio'],\\nhx-form .form-item.has-error input[type='radio'],\\nhx-form .form-item--error input[type='radio'] {\\n  border-color: var(--hx-color-error-500, #dc3545);\\n}\\n\\n/* ─── Inline Error Message ─── */\\n\\nhx-form .form-item__error-message,\\nhx-form .form-item .error-message,\\nhx-form .error-message {\\n  font-size: var(--hx-font-size-xs, 0.75rem);\\n  color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n  line-height: var(--hx-line-height-normal, 1.5);\\n}\\n\\n/* ─── Success State on Field Wrapper ─── */\\n\\nhx-form .form-item.success label,\\nhx-form .form-item.has-success label,\\nhx-form .form-item--success label {\\n  color: var(--hx-color-success-500, #198754);\\n}\\n\\nhx-form .form-item.success input[type='text'],\\nhx-form .form-item.success input[type='email'],\\nhx-form .form-item.success input[type='password'],\\nhx-form .form-item.success input[type='tel'],\\nhx-form .form-item.success input[type='url'],\\nhx-form .form-item.success input[type='search'],\\nhx-form .form-item.success input[type='number'],\\nhx-form .form-item.success textarea,\\nhx-form .form-item.success select,\\nhx-form .form-item.has-success input[type='text'],\\nhx-form .form-item.has-success input[type='email'],\\nhx-form .form-item.has-success input[type='password'],\\nhx-form .form-item.has-success input[type='tel'],\\nhx-form .form-item.has-success input[type='url'],\\nhx-form .form-item.has-success input[type='search'],\\nhx-form .form-item.has-success input[type='number'],\\nhx-form .form-item.has-success textarea,\\nhx-form .form-item.has-success select,\\nhx-form .form-item--success input[type='text'],\\nhx-form .form-item--success input[type='email'],\\nhx-form .form-item--success input[type='password'],\\nhx-form .form-item--success input[type='tel'],\\nhx-form .form-item--success input[type='url'],\\nhx-form .form-item--success input[type='search'],\\nhx-form .form-item--success input[type='number'],\\nhx-form .form-item--success textarea,\\nhx-form .form-item--success select {\\n  border-color: var(--hx-color-success-500, #198754);\\n}\\n\\nhx-form .form-item.success input[type='text']:focus,\\nhx-form .form-item.success input[type='email']:focus,\\nhx-form .form-item.success input[type='password']:focus,\\nhx-form .form-item.success input[type='tel']:focus,\\nhx-form .form-item.success input[type='url']:focus,\\nhx-form .form-item.success input[type='search']:focus,\\nhx-form .form-item.success input[type='number']:focus,\\nhx-form .form-item.success textarea:focus,\\nhx-form .form-item.success select:focus,\\nhx-form .form-item.has-success input[type='text']:focus,\\nhx-form .form-item.has-success input[type='email']:focus,\\nhx-form .form-item.has-success input[type='password']:focus,\\nhx-form .form-item.has-success input[type='tel']:focus,\\nhx-form .form-item.has-success input[type='url']:focus,\\nhx-form .form-item.has-success input[type='search']:focus,\\nhx-form .form-item.has-success input[type='number']:focus,\\nhx-form .form-item.has-success textarea:focus,\\nhx-form .form-item.has-success select:focus,\\nhx-form .form-item--success input[type='text']:focus,\\nhx-form .form-item--success input[type='email']:focus,\\nhx-form .form-item--success input[type='password']:focus,\\nhx-form .form-item--success input[type='tel']:focus,\\nhx-form .form-item--success input[type='url']:focus,\\nhx-form .form-item--success input[type='search']:focus,\\nhx-form .form-item--success input[type='number']:focus,\\nhx-form .form-item--success textarea:focus,\\nhx-form .form-item--success select:focus {\\n  border-color: var(--hx-color-success-500, #198754);\\n  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\\n    color-mix(\\n      in srgb,\\n      var(--hx-color-success-500, #198754) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\\n      transparent\\n    );\\n}\\n\\n/* ─── Inline Success Message ─── */\\n\\nhx-form .form-item__success-message,\\nhx-form .form-item .success-message,\\nhx-form .success-message {\\n  font-size: var(--hx-font-size-xs, 0.75rem);\\n  color: var(--hx-color-success-500, #198754);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n}\\n\\n/* ─── Drupal System Messages ─── */\\n\\nhx-form .messages--error {\\n  border: var(--hx-border-width-thin, 1px) solid\\n    var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n  border-radius: var(--hx-border-radius-md, 0.375rem);\\n  background-color: var(--hx-color-error-50, #fef2f2);\\n  color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n}\\n\\nhx-form .messages--status {\\n  border: var(--hx-border-width-thin, 1px) solid var(--hx-color-success-500, #198754);\\n  border-radius: var(--hx-border-radius-md, 0.375rem);\\n  background-color: var(--hx-color-success-50, #f0fdf4);\\n  color: var(--hx-color-success-500, #198754);\\n  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n}\\n\\nhx-form .messages--warning {\\n  border: var(--hx-border-width-thin, 1px) solid var(--hx-color-warning-500, #ffc107);\\n  border-radius: var(--hx-border-radius-md, 0.375rem);\\n  background-color: var(--hx-color-warning-50, #fffbeb);\\n  color: var(--hx-color-warning-700, #92400e);\\n  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n}\\n\\n/* ==========================================================================\\n * FORCED-COLORS / HIGH CONTRAST MODE (P1-01)\\n *\\n * When box-shadow is used for focus rings, it is invisible in Windows\\n * High Contrast Mode. Restore a visible outline.\\n * ========================================================================== */\\n\\n@media (forced-colors: active) {\\n  hx-form input[type='text']:focus,\\n  hx-form input[type='email']:focus,\\n  hx-form input[type='password']:focus,\\n  hx-form input[type='tel']:focus,\\n  hx-form input[type='url']:focus,\\n  hx-form input[type='search']:focus,\\n  hx-form input[type='number']:focus,\\n  hx-form textarea:focus,\\n  hx-form select:focus {\\n    outline: 2px solid CanvasText;\\n    outline-offset: 2px;\\n  }\\n\\n  hx-form .hx-form-error-summary {\\n    border-color: LinkText;\\n  }\\n}\\n\"","import formScopedCss from '../../styles/form/form.scoped.css?raw';\n\nexport const helixFormScopedCss = formScopedCss;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { AdoptedStylesheetsController } from '../../controllers/adopted-stylesheets.js';\nimport { helixFormScopedCss } from './hx-form.styles.js';\n\n/**\n * A Light DOM form wrapper that styles native HTML form elements and\n * hx-* components with the design system's form styles.\n *\n * When `action` is set, renders a `<form>` wrapper around slotted content.\n * When no `action` is set (the Drupal pattern), renders only a `<slot>`\n * so Drupal can provide its own `<form>` tag.\n *\n * Uses adopted stylesheets to inject scoped CSS into the document without\n * Shadow DOM, keeping native form participation and Drupal compatibility.\n *\n * @summary Light DOM form wrapper with scoped styles for native and hx-* form elements.\n *\n * @tag hx-form\n *\n * @slot - Default slot for form fields and controls.\n *\n * @fires {CustomEvent<{valid: boolean, values: Record<string, FormDataEntryValue | FormDataEntryValue[]>, formData: FormData}>} hx-submit - Dispatched on valid client-side submit when no action is set.\n * @fires {CustomEvent<{errors: Array<{name: string, message: string}>}>} hx-invalid - Dispatched when validation fails on submit.\n * @fires {CustomEvent} hx-reset - Dispatched when the form is reset.\n *\n * @cssprop [--hx-form-gap=var(--hx-space-4)] - Gap between form fields.\n * @cssprop [--hx-form-max-width=none] - Maximum width of the form.\n * @cssprop [--hx-form-padding=0] - Internal padding of the form.\n */\n@customElement('hx-form')\nexport class HelixForm extends LitElement {\n  // ─── Light DOM ───\n\n  override createRenderRoot(): HTMLElement {\n    return this;\n  }\n\n  // ─── Adopted Stylesheets ───\n\n  private _styles = new AdoptedStylesheetsController(this, helixFormScopedCss, document);\n\n  // ─── Internal State ───\n\n  @state()\n  private _validationErrors: Array<{ name: string; message: string }> = [];\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('submit', this._handleSubmit);\n    this.addEventListener('reset', this._handleReset);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('submit', this._handleSubmit);\n    this.removeEventListener('reset', this._handleReset);\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The URL to submit the form to. When empty, the form handles\n   * submission client-side only and dispatches `hx-submit`.\n   * @attr action\n   */\n  @property({ type: String })\n  action = '';\n\n  /**\n   * The HTTP method used when submitting the form.\n   * @attr method\n   */\n  @property({ type: String })\n  method: 'get' | 'post' = 'post';\n\n  /**\n   * When true, disables the browser's built-in constraint validation\n   * on form submission.\n   * @attr novalidate\n   */\n  @property({ type: Boolean })\n  novalidate = false;\n\n  /**\n   * Identifies the form for scripting and form discovery.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The encoding type for form submission. Only used when `action` is set.\n   * Use `multipart/form-data` for forms with file uploads.\n   * @attr enctype\n   */\n  @property({ type: String })\n  enctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' =\n    'application/x-www-form-urlencoded';\n\n  // ─── Public Methods ───\n\n  /**\n   * Checks the validity of all child form elements without showing\n   * validation UI. Returns `true` if all elements are valid.\n   */\n  checkValidity(): boolean {\n    const formElements = this._getAllValidatableElements();\n    return formElements.every((el) => {\n      if ('checkValidity' in el && typeof el.checkValidity === 'function') {\n        return (el as HTMLInputElement).checkValidity();\n      }\n      return true;\n    });\n  }\n\n  /**\n   * Checks validity and triggers the browser's constraint validation UI\n   * on each invalid element. Returns `true` if all elements are valid.\n   */\n  reportValidity(): boolean {\n    const formElements = this._getAllValidatableElements();\n    let allValid = true;\n    for (const el of formElements) {\n      if ('reportValidity' in el && typeof el.reportValidity === 'function') {\n        if (!(el as HTMLInputElement).reportValidity()) {\n          allValid = false;\n        }\n      }\n    }\n    return allValid;\n  }\n\n  /**\n   * Collects form data from all child form elements (native and hx-*).\n   * Returns a `FormData` object.\n   */\n  getFormData(): FormData {\n    // If there is a native <form> child, use it directly\n    const formEl = this.querySelector('form');\n    if (formEl) {\n      return new FormData(formEl);\n    }\n\n    // Otherwise, manually collect from all named inputs\n    const formData = new FormData();\n    const elements = this.getNativeFormElements();\n    for (const el of elements) {\n      const input = el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n      if (!input.name) continue;\n\n      if (input instanceof HTMLInputElement) {\n        if (input.type === 'checkbox' || input.type === 'radio') {\n          if (input.checked) {\n            formData.append(input.name, input.value || 'on');\n          }\n        } else {\n          formData.append(input.name, input.value);\n        }\n      } else {\n        formData.append(input.name, input.value);\n      }\n    }\n\n    return formData;\n  }\n\n  /**\n   * Returns all child hx-* form components that implement the form\n   * component contract (hx-text-input, hx-select, hx-checkbox, hx-textarea,\n   * hx-radio-group, hx-switch).\n   *\n   * Note: This uses a hardcoded allowlist. When a new hx-* form component\n   * is added, update this selector to include it.\n   */\n  getFormElements(): HTMLElement[] {\n    return Array.from(\n      this.querySelectorAll<HTMLElement>(\n        'hx-text-input, hx-select, hx-checkbox, hx-textarea, hx-radio-group, hx-switch',\n      ),\n    );\n  }\n\n  /**\n   * Returns all native form elements (input, select, textarea, button)\n   * found within this component's light DOM.\n   */\n  getNativeFormElements(): Array<\n    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement\n  > {\n    return Array.from(\n      this.querySelectorAll<\n        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement\n      >('input, select, textarea, button'),\n    );\n  }\n\n  /**\n   * Programmatically sets server-side validation errors on the form.\n   * Renders an error summary and sets `aria-invalid=\"true\"` on named fields.\n   *\n   * Useful for surfacing Drupal server-side validation responses.\n   *\n   * @param errors - Array of `{name, message}` pairs matching field `name` attributes.\n   */\n  setErrors(errors: Array<{ name: string; message: string }>): void {\n    this._validationErrors = errors;\n    this._applyAriaInvalidFromErrors(errors);\n  }\n\n  /**\n   * Programmatically sets a single field error. Merges with any existing errors.\n   *\n   * @param name - The `name` attribute of the field.\n   * @param message - The error message to display.\n   */\n  setFieldError(name: string, message: string): void {\n    const existing = this._validationErrors.filter((e) => e.name !== name);\n    this.setErrors([...existing, { name, message }]);\n  }\n\n  /**\n   * Clears all validation errors from the error summary and removes\n   * `aria-invalid` from all fields.\n   */\n  clearErrors(): void {\n    this._clearAriaInvalid();\n    this._validationErrors = [];\n  }\n\n  // ─── Private Helpers ───\n\n  /**\n   * Returns all elements that support constraint validation, including\n   * both native form elements and hx-* components with `checkValidity`.\n   */\n  private _getAllValidatableElements(): HTMLElement[] {\n    const native = Array.from(this.querySelectorAll<HTMLElement>('input, select, textarea'));\n    const wcElements = this.getFormElements().filter(\n      (el) =>\n        'checkValidity' in el &&\n        typeof (el as Record<string, unknown>).checkValidity === 'function',\n    );\n    return [...native, ...wcElements];\n  }\n\n  /**\n   * Sets `aria-invalid=\"true\"` on fields with errors, removes it from valid fields.\n   */\n  private _applyAriaInvalidFromErrors(errors: Array<{ name: string; message: string }>): void {\n    const errorNames = new Set(errors.map((e) => e.name));\n    const allElements = this._getAllValidatableElements();\n    for (const el of allElements) {\n      const named = el as HTMLElement & { name?: string };\n      const fieldName = named.name ?? el.tagName.toLowerCase();\n      if (errorNames.has(fieldName)) {\n        el.setAttribute('aria-invalid', 'true');\n      } else {\n        el.removeAttribute('aria-invalid');\n      }\n    }\n  }\n\n  /**\n   * Sets `aria-invalid` based on native constraint validation state.\n   */\n  private _applyAriaInvalidFromValidity(): void {\n    const allElements = this._getAllValidatableElements();\n    for (const el of allElements) {\n      if ('validity' in el) {\n        const validatable = el as HTMLInputElement;\n        if (!validatable.validity.valid) {\n          el.setAttribute('aria-invalid', 'true');\n        } else {\n          el.removeAttribute('aria-invalid');\n        }\n      }\n    }\n  }\n\n  /**\n   * Removes `aria-invalid` from all validatable elements.\n   */\n  private _clearAriaInvalid(): void {\n    const allElements = this._getAllValidatableElements();\n    for (const el of allElements) {\n      el.removeAttribute('aria-invalid');\n    }\n  }\n\n  // ─── Event Handling ───\n\n  private _handleSubmit = (e: Event): void => {\n    // If there is an action, let native form submission happen\n    if (this.action) {\n      return;\n    }\n\n    // Client-side only: prevent default and dispatch hx-submit or hx-invalid\n    e.preventDefault();\n\n    if (!this.novalidate && !this.checkValidity()) {\n      const errors = this._collectValidationErrors();\n      this._validationErrors = errors;\n      this._applyAriaInvalidFromValidity();\n\n      /**\n       * Dispatched when validation fails on submit.\n       * @event hx-invalid\n       */\n      this.dispatchEvent(\n        new CustomEvent('hx-invalid', {\n          bubbles: true,\n          composed: true,\n          detail: { errors },\n        }),\n      );\n      return;\n    }\n\n    // Clear any previous errors on successful submit\n    this._validationErrors = [];\n    this._clearAriaInvalid();\n\n    const formData = this.getFormData();\n    const values: Record<string, FormDataEntryValue | FormDataEntryValue[]> = {};\n    for (const key of new Set(formData.keys())) {\n      const all = formData.getAll(key);\n      if (all.length === 1 && all[0] !== undefined) {\n        values[key] = all[0];\n      } else {\n        values[key] = all;\n      }\n    }\n\n    /**\n     * Dispatched on valid client-side submit.\n     * @event hx-submit\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-submit', {\n        bubbles: true,\n        composed: true,\n        detail: { valid: true, values, formData },\n      }),\n    );\n  };\n\n  private _handleReset = (): void => {\n    this._validationErrors = [];\n    this._clearAriaInvalid();\n\n    /**\n     * Dispatched when the form is reset.\n     * @event hx-reset\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-reset', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _collectValidationErrors(): Array<{ name: string; message: string }> {\n    const errors: Array<{ name: string; message: string }> = [];\n    const elements = this._getAllValidatableElements();\n\n    for (const el of elements) {\n      if ('validity' in el && 'validationMessage' in el) {\n        const validatable = el as HTMLInputElement;\n        if (!validatable.validity.valid) {\n          errors.push({\n            name: validatable.name || validatable.tagName.toLowerCase(),\n            message: validatable.validationMessage,\n          });\n        }\n      }\n    }\n\n    return errors;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const errorSummary =\n      this._validationErrors.length > 0\n        ? html`\n            <div\n              class=\"hx-form-error-summary\"\n              role=\"alert\"\n              aria-live=\"assertive\"\n              aria-atomic=\"true\"\n            >\n              <ul>\n                ${this._validationErrors.map(\n                  (error) => html`<li>${error.message || error.name}</li>`,\n                )}\n              </ul>\n            </div>\n          `\n        : nothing;\n\n    if (this.action) {\n      return html`\n        ${errorSummary}\n        <form\n          action=${this.action}\n          method=${this.method}\n          enctype=${this.enctype}\n          name=${ifDefined(this.name || undefined)}\n          ?novalidate=${this.novalidate}\n        >\n          <slot></slot>\n        </form>\n      `;\n    }\n\n    return html`${errorSummary}<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-form': HelixForm;\n  }\n}\n"],"names":["formScopedCss","helixFormScopedCss","HelixForm","LitElement","AdoptedStylesheetsController","errors","formData","values","key","all","el","formElements","allValid","formEl","elements","input","name","message","existing","e","native","wcElements","errorNames","allElements","fieldName","validatable","errorSummary","html","error","nothing","ifDefined","__decorateClass","state","property","customElement"],"mappings":";;;;AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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"}
+{"version":3,"file":"hx-form-BFv_N1dm.js","sources":["../../src/styles/form/form.scoped.css?raw","../../src/components/hx-form/hx-form.styles.ts","../../src/components/hx-form/hx-form.ts"],"sourcesContent":["export default \"/* ==========================================================================\\n * form.scoped.css — Scoped barrel file\\n *\\n * Contains all form styles with every selector prefixed by `hx-form` to\\n * prevent leaking outside the <hx-form> Light DOM wrapper.\\n *\\n * IMPORTANT: This file does NOT use @import because CSS imports cannot\\n * add scope prefixes. All styles are written inline.\\n * ==========================================================================\\n */\\n\\n/* ==========================================================================\\n * HOST / FORM ROOT TOKENS\\n * ========================================================================== */\\n\\nhx-form {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--hx-form-gap, var(--hx-space-4, 1rem));\\n  max-width: var(--hx-form-max-width, none);\\n  padding: var(--hx-form-padding, 0);\\n}\\n\\n/* ==========================================================================\\n * ERROR SUMMARY\\n * ========================================================================== */\\n\\nhx-form .hx-form-error-summary {\\n  border: var(--hx-border-width-thin, 1px) solid\\n    var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n  border-radius: var(--hx-border-radius-md, 0.375rem);\\n  background-color: var(--hx-color-error-50, #fef2f2);\\n  color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\\n}\\n\\nhx-form .hx-form-error-summary ul {\\n  margin: 0;\\n  padding: 0 0 0 var(--hx-space-4, 1rem);\\n}\\n\\nhx-form .hx-form-error-summary li {\\n  margin-bottom: var(--hx-space-1, 0.25rem);\\n}\\n\\nhx-form .hx-form-error-summary li:last-child {\\n  margin-bottom: 0;\\n}\\n\\n/* ==========================================================================\\n * FIELD (_field.css scoped)\\n * ========================================================================== */\\n\\n/* ─── Field Container ─── */\\n\\nhx-form .form-item {\\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\\nhx-form .form-item + .form-item {\\n  margin-top: var(--hx-space-4, 1rem);\\n}\\n\\n/* ─── Label ─── */\\n\\nhx-form 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/* ─── Required Marker ─── */\\n\\nhx-form .form-required {\\n  color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n  font-weight: var(--hx-font-weight-bold, 700);\\n}\\n\\n/* ─── Description / Help Text ─── */\\n\\nhx-form .description {\\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/* ─── Box Sizing Reset ─── */\\n\\nhx-form .form-item *,\\nhx-form .form-item *::before,\\nhx-form .form-item *::after {\\n  box-sizing: border-box;\\n}\\n\\n/* ==========================================================================\\n * TEXT INPUT (_text-input.css scoped)\\n * ========================================================================== */\\n\\nhx-form input[type='text'],\\nhx-form input[type='email'],\\nhx-form input[type='password'],\\nhx-form input[type='tel'],\\nhx-form input[type='url'],\\nhx-form input[type='search'],\\nhx-form input[type='number'] {\\n  display: block;\\n  width: 100%;\\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  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\\n  font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\\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  transition:\\n    border-color var(--hx-transition-fast, 150ms ease),\\n    box-shadow var(--hx-transition-fast, 150ms ease);\\n}\\n\\n/* ─── Placeholder ─── */\\n\\nhx-form input[type='text']::placeholder,\\nhx-form input[type='email']::placeholder,\\nhx-form input[type='password']::placeholder,\\nhx-form input[type='tel']::placeholder,\\nhx-form input[type='url']::placeholder,\\nhx-form input[type='search']::placeholder,\\nhx-form input[type='number']::placeholder {\\n  color: var(--hx-color-neutral-400, #adb5bd);\\n}\\n\\n/* ─── Focus State ─── */\\n\\nhx-form input[type='text']:focus,\\nhx-form input[type='email']:focus,\\nhx-form input[type='password']:focus,\\nhx-form input[type='tel']:focus,\\nhx-form input[type='url']:focus,\\nhx-form input[type='search']:focus,\\nhx-form input[type='number']:focus {\\n  outline: 0;\\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@media (forced-colors: active) {\\n  hx-form input[type='text']:focus,\\n  hx-form input[type='email']:focus,\\n  hx-form input[type='password']:focus,\\n  hx-form input[type='tel']:focus,\\n  hx-form input[type='url']:focus,\\n  hx-form input[type='search']:focus,\\n  hx-form input[type='number']:focus {\\n    outline: var(--hx-focus-ring-width, 2px) solid ButtonText;\\n    outline-offset: var(--hx-focus-ring-offset, 2px);\\n  }\\n}\\n\\n/* ─── Disabled State ─── */\\n\\nhx-form input[type='text']:disabled,\\nhx-form input[type='email']:disabled,\\nhx-form input[type='password']:disabled,\\nhx-form input[type='tel']:disabled,\\nhx-form input[type='url']:disabled,\\nhx-form input[type='search']:disabled,\\nhx-form input[type='number']:disabled {\\n  opacity: var(--hx-opacity-disabled, 0.5);\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\\n/* ─── Read-Only State ─── */\\n\\nhx-form input[type='text']:read-only,\\nhx-form input[type='email']:read-only,\\nhx-form input[type='password']:read-only,\\nhx-form input[type='tel']:read-only,\\nhx-form input[type='url']:read-only,\\nhx-form input[type='search']:read-only,\\nhx-form input[type='number']:read-only {\\n  background-color: var(--hx-color-neutral-100, #e9ecef);\\n}\\n\\n/* ─── Remove browser search decorations ─── */\\n\\nhx-form input[type='search']::-webkit-search-decoration,\\nhx-form input[type='search']::-webkit-search-cancel-button,\\nhx-form input[type='search']::-webkit-search-results-button,\\nhx-form input[type='search']::-webkit-search-results-decoration {\\n  -webkit-appearance: none;\\n}\\n\\n/* ─── Remove number input spinners ─── */\\n\\nhx-form input[type='number']::-webkit-inner-spin-button,\\nhx-form input[type='number']::-webkit-outer-spin-button {\\n  -webkit-appearance: none;\\n  margin: 0;\\n}\\n\\nhx-form input[type='number'] {\\n  appearance: textfield;\\n}\\n\\n/* ==========================================================================\\n * TEXTAREA (_textarea.css scoped)\\n * ========================================================================== */\\n\\nhx-form textarea {\\n  display: block;\\n  width: 100%;\\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  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\\n  font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\\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  resize: vertical;\\n  transition:\\n    border-color var(--hx-transition-fast, 150ms ease),\\n    box-shadow var(--hx-transition-fast, 150ms ease);\\n}\\n\\nhx-form textarea::placeholder {\\n  color: var(--hx-color-neutral-400, #adb5bd);\\n}\\n\\nhx-form textarea:focus {\\n  outline: 0;\\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@media (forced-colors: active) {\\n  hx-form textarea:focus {\\n    outline: var(--hx-focus-ring-width, 2px) solid ButtonText;\\n    outline-offset: var(--hx-focus-ring-offset, 2px);\\n  }\\n}\\n\\nhx-form textarea:disabled {\\n  opacity: var(--hx-opacity-disabled, 0.5);\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\\nhx-form textarea:read-only {\\n  background-color: var(--hx-color-neutral-100, #e9ecef);\\n}\\n\\n/* ==========================================================================\\n * SELECT (_select.css scoped)\\n * ========================================================================== */\\n\\nhx-form select {\\n  display: block;\\n  width: 100%;\\n  border: var(--hx-border-width-thin, 1px) solid\\n    var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));\\n  border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));\\n  background-color: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));\\n  padding: var(--hx-space-2, 0.5rem) var(--hx-space-8, 2rem) var(--hx-space-2, 0.5rem)\\n    var(--hx-space-3, 0.75rem);\\n  font-family: var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));\\n  font-size: var(--hx-font-size-md, 1rem);\\n  color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));\\n  cursor: pointer;\\n  transition:\\n    border-color var(--hx-transition-fast, 150ms ease),\\n    box-shadow var(--hx-transition-fast, 150ms ease);\\n  appearance: none;\\n  -webkit-appearance: none;\\n  -moz-appearance: none;\\n  background-image: url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E\\\");\\n  background-repeat: no-repeat;\\n  background-position: right var(--hx-space-3, 0.75rem) center;\\n  background-size: 12px 8px;\\n}\\n\\nhx-form select:focus {\\n  outline: 0;\\n  border-color: var(--hx-select-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-select-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@media (forced-colors: active) {\\n  hx-form select:focus {\\n    outline: var(--hx-focus-ring-width, 2px) solid ButtonText;\\n    outline-offset: var(--hx-focus-ring-offset, 2px);\\n  }\\n}\\n\\nhx-form select:disabled {\\n  opacity: var(--hx-opacity-disabled, 0.5);\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\\nhx-form select[multiple] {\\n  min-height: var(--hx-size-20, 5rem);\\n  padding-right: var(--hx-space-3, 0.75rem);\\n  background-image: none;\\n}\\n\\nhx-form select[multiple] option {\\n  padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\\n}\\n\\nhx-form select::-ms-expand {\\n  display: none;\\n}\\n\\n/* ==========================================================================\\n * CHECKBOX (_checkbox.css scoped)\\n * ========================================================================== */\\n\\nhx-form input[type='checkbox'] {\\n  appearance: none;\\n  -webkit-appearance: none;\\n  -moz-appearance: none;\\n  display: inline-flex;\\n  align-items: center;\\n  justify-content: center;\\n  flex-shrink: 0;\\n  width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\\n  height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\\n  margin: 0;\\n  border: var(--hx-border-width-medium, 2px) solid\\n    var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));\\n  border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));\\n  background-color: var(--hx-color-neutral-0, #ffffff);\\n  transition:\\n    background-color var(--hx-transition-fast, 150ms ease),\\n    border-color var(--hx-transition-fast, 150ms ease),\\n    box-shadow var(--hx-transition-fast, 150ms ease);\\n  cursor: pointer;\\n  vertical-align: middle;\\n}\\n\\nhx-form input[type='checkbox']:checked {\\n  background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\\n  border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\\n  background-image: url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\\\");\\n  background-repeat: no-repeat;\\n  background-position: center;\\n  background-size: 100%;\\n}\\n\\nhx-form input[type='checkbox']:indeterminate {\\n  background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));\\n  border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));\\n  background-image: url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8H12' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E\\\");\\n  background-repeat: no-repeat;\\n  background-position: center;\\n  background-size: 100%;\\n}\\n\\nhx-form input[type='checkbox']:focus-visible {\\n  outline: var(--hx-focus-ring-width, 2px) solid\\n    var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\\n  outline-offset: var(--hx-focus-ring-offset, 2px);\\n}\\n\\nhx-form input[type='checkbox']:hover:not(:disabled) {\\n  border-color: var(--hx-color-primary-500, #2563eb);\\n}\\n\\nhx-form input[type='checkbox']:checked:hover:not(:disabled) {\\n  filter: brightness(var(--hx-filter-brightness-hover, 0.9));\\n}\\n\\nhx-form input[type='checkbox']:disabled {\\n  opacity: var(--hx-opacity-disabled, 0.5);\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\\nhx-form .form-type-checkbox,\\nhx-form .form-type-checkbox-toggle {\\n  display: flex;\\n  align-items: flex-start;\\n  gap: var(--hx-space-2, 0.5rem);\\n}\\n\\nhx-form .form-type-checkbox label,\\nhx-form .form-type-checkbox-toggle label {\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  font-weight: var(--hx-font-weight-medium, 500);\\n  color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  cursor: pointer;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\n/* ==========================================================================\\n * RADIO (_radio.css scoped)\\n * ========================================================================== */\\n\\nhx-form input[type='radio'] {\\n  appearance: none;\\n  -webkit-appearance: none;\\n  -moz-appearance: none;\\n  display: inline-flex;\\n  align-items: center;\\n  justify-content: center;\\n  flex-shrink: 0;\\n  width: var(--hx-radio-size, var(--hx-size-5, 1.25rem));\\n  height: var(--hx-radio-size, var(--hx-size-5, 1.25rem));\\n  margin: 0;\\n  border: var(--hx-border-width-medium, 2px) solid\\n    var(--hx-radio-border-color, var(--hx-color-neutral-300, #ced4da));\\n  border-radius: var(--hx-border-radius-full, 9999px);\\n  background-color: var(--hx-color-neutral-0, #ffffff);\\n  transition:\\n    border-color var(--hx-transition-fast, 150ms ease),\\n    background-color var(--hx-transition-fast, 150ms ease),\\n    box-shadow var(--hx-transition-fast, 150ms ease);\\n  cursor: pointer;\\n  vertical-align: middle;\\n}\\n\\nhx-form input[type='radio']:checked {\\n  border-color: var(--hx-radio-checked-border-color, var(--hx-color-primary-500, #2563eb));\\n  background-color: var(--hx-radio-checked-bg, var(--hx-color-primary-500, #2563eb));\\n  box-shadow: inset 0 0 0 calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * 0.3)\\n    var(--hx-radio-dot-color, var(--hx-color-neutral-0, #ffffff));\\n}\\n\\nhx-form input[type='radio']:focus-visible {\\n  outline: var(--hx-focus-ring-width, 2px) solid\\n    var(--hx-radio-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\\n  outline-offset: var(--hx-focus-ring-offset, 2px);\\n}\\n\\nhx-form input[type='radio']:hover:not(:disabled):not(:checked) {\\n  border-color: var(--hx-color-neutral-400, #adb5bd);\\n}\\n\\nhx-form input[type='radio']:disabled {\\n  opacity: var(--hx-opacity-disabled, 0.5);\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\\nhx-form .form-type-radio {\\n  display: inline-flex;\\n  align-items: center;\\n  gap: var(--hx-space-2, 0.5rem);\\n}\\n\\nhx-form .form-type-radio label {\\n  font-size: var(--hx-font-size-md, 1rem);\\n  color: var(--hx-radio-label-color, var(--hx-color-neutral-700, #343a40));\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  cursor: pointer;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\nhx-form .form-radios {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--hx-radio-group-gap, var(--hx-space-3, 0.75rem));\\n}\\n\\nhx-form .form-radios--horizontal {\\n  flex-direction: row;\\n  flex-wrap: wrap;\\n}\\n\\n/* ==========================================================================\\n * SWITCH (_switch.css scoped)\\n * ========================================================================== */\\n\\nhx-form .form-type-switch {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--hx-space-1, 0.25rem);\\n  font-family: var(--hx-font-family-sans, sans-serif);\\n}\\n\\nhx-form .form-type-switch .switch__control-row {\\n  display: flex;\\n  align-items: center;\\n  gap: var(--hx-space-2, 0.5rem);\\n}\\n\\nhx-form .form-type-switch input[type='checkbox'] {\\n  appearance: none;\\n  -webkit-appearance: none;\\n  -moz-appearance: none;\\n  position: relative;\\n  display: inline-flex;\\n  align-items: center;\\n  flex-shrink: 0;\\n  width: var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));\\n  height: var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));\\n  margin: 0;\\n  border: none;\\n  border-radius: var(--hx-border-radius-full, 9999px);\\n  background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));\\n  transition: background-color var(--hx-transition-fast, 150ms ease);\\n  cursor: pointer;\\n  background-image: none;\\n}\\n\\nhx-form .form-type-switch input[type='checkbox']::before {\\n  content: '';\\n  position: absolute;\\n  top: 50%;\\n  left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\\n  transform: translateY(-50%);\\n  width: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\\n  height: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\\n  border-radius: var(--hx-border-radius-full, 9999px);\\n  background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));\\n  box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));\\n  transition: transform var(--hx-transition-fast, 150ms ease);\\n}\\n\\nhx-form .form-type-switch input[type='checkbox']:checked {\\n  background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));\\n  background-image: none;\\n}\\n\\nhx-form .form-type-switch input[type='checkbox']:checked::before {\\n  transform: translateY(-50%)\\n    translateX(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)));\\n}\\n\\nhx-form .form-type-switch input[type='checkbox']:focus-visible {\\n  outline: var(--hx-focus-ring-width, 2px) solid\\n    var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\\n  outline-offset: var(--hx-focus-ring-offset, 2px);\\n}\\n\\nhx-form .form-type-switch input[type='checkbox']:disabled {\\n  opacity: var(--hx-opacity-disabled, 0.5);\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\\nhx-form .form-type-switch label {\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  font-weight: var(--hx-font-weight-medium, 500);\\n  color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  cursor: pointer;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\n/* Small */\\nhx-form .form-type-switch--sm input[type='checkbox'] {\\n  width: var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));\\n  height: var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem));\\n}\\n\\nhx-form .form-type-switch--sm input[type='checkbox']::before {\\n  width: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\\n  height: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\\n}\\n\\nhx-form .form-type-switch--sm input[type='checkbox']:checked::before {\\n  transform: translateY(-50%)\\n    translateX(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem)));\\n}\\n\\n/* Large */\\nhx-form .form-type-switch--lg input[type='checkbox'] {\\n  width: var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));\\n  height: var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem));\\n}\\n\\nhx-form .form-type-switch--lg input[type='checkbox']::before {\\n  width: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\\n  height: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\\n}\\n\\nhx-form .form-type-switch--lg input[type='checkbox']:checked::before {\\n  transform: translateY(-50%)\\n    translateX(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)));\\n}\\n\\n/* ==========================================================================\\n * FORM LAYOUT (_form-layout.css scoped)\\n * ========================================================================== */\\n\\n/* ─── Form Root ─── */\\n\\nhx-form form {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--hx-form-gap, var(--hx-space-4, 1rem));\\n  font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\\n}\\n\\n/* ─── Fieldset ─── */\\n\\nhx-form fieldset {\\n  border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);\\n  border-radius: var(--hx-border-radius-md, 0.375rem);\\n  padding: var(--hx-space-4, 1rem) var(--hx-space-4, 1rem) var(--hx-space-4, 1rem);\\n  margin: 0;\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--hx-space-4, 1rem);\\n}\\n\\n/* ─── Legend ─── */\\n\\nhx-form legend {\\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-semibold, 600);\\n  color: var(--hx-color-neutral-700, #343a40);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  padding: 0 var(--hx-space-1, 0.25rem);\\n}\\n\\n/* ─── Details / Collapsible Fieldset (Drupal) ─── */\\n\\nhx-form details {\\n  border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);\\n  border-radius: var(--hx-border-radius-md, 0.375rem);\\n  padding: var(--hx-space-4, 1rem);\\n  margin: 0;\\n}\\n\\nhx-form summary {\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  font-weight: var(--hx-font-weight-semibold, 600);\\n  color: var(--hx-color-neutral-700, #343a40);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n  cursor: pointer;\\n  padding: var(--hx-space-1, 0.25rem) 0;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\nhx-form summary:focus-visible {\\n  outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\\n  outline-offset: var(--hx-focus-ring-offset, 2px);\\n  border-radius: var(--hx-border-radius-sm, 0.25rem);\\n}\\n\\n/* ─── Form Actions (button group) ─── */\\n\\nhx-form .form-actions {\\n  display: flex;\\n  align-items: center;\\n  gap: var(--hx-space-3, 0.75rem);\\n  padding-top: var(--hx-space-4, 1rem);\\n}\\n\\nhx-form .form-actions--end {\\n  justify-content: flex-end;\\n}\\n\\nhx-form .form-actions--between {\\n  justify-content: space-between;\\n}\\n\\n/* ─── Multi-Column Layout ─── */\\n\\nhx-form .form-columns {\\n  display: grid;\\n  gap: var(--hx-space-4, 1rem);\\n}\\n\\nhx-form .form-columns--2 {\\n  grid-template-columns: repeat(2, 1fr);\\n}\\n\\nhx-form .form-columns--3 {\\n  grid-template-columns: repeat(3, 1fr);\\n}\\n\\nhx-form .form-columns--4 {\\n  grid-template-columns: repeat(4, 1fr);\\n}\\n\\n@media (max-width: 640px) {\\n  hx-form .form-columns--2,\\n  hx-form .form-columns--3,\\n  hx-form .form-columns--4 {\\n    grid-template-columns: 1fr;\\n  }\\n}\\n\\n/* ─── Full-Width Form Item (spans all columns) ─── */\\n\\nhx-form .form-item--full {\\n  grid-column: 1 / -1;\\n}\\n\\n/* ─── Inline Form Layout ─── */\\n\\nhx-form .form-inline {\\n  display: flex;\\n  flex-wrap: wrap;\\n  align-items: flex-end;\\n  gap: var(--hx-space-3, 0.75rem);\\n}\\n\\nhx-form .form-inline .form-item {\\n  flex: 1;\\n  min-width: 0;\\n}\\n\\nhx-form .form-inline .form-item + .form-item {\\n  margin-top: 0;\\n}\\n\\n/* ─── Form Divider ─── */\\n\\nhx-form .form-divider {\\n  border: none;\\n  border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);\\n  margin: var(--hx-space-2, 0.5rem) 0;\\n}\\n\\n/* ==========================================================================\\n * VALIDATION (_validation.css scoped)\\n * ========================================================================== */\\n\\n/* ─── Error State on Field Wrapper ─── */\\n\\nhx-form .form-item.error label,\\nhx-form .form-item.has-error label,\\nhx-form .form-item--error label {\\n  color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n}\\n\\nhx-form .form-item.error input[type='text'],\\nhx-form .form-item.error input[type='email'],\\nhx-form .form-item.error input[type='password'],\\nhx-form .form-item.error input[type='tel'],\\nhx-form .form-item.error input[type='url'],\\nhx-form .form-item.error input[type='search'],\\nhx-form .form-item.error input[type='number'],\\nhx-form .form-item.error textarea,\\nhx-form .form-item.error select,\\nhx-form .form-item.has-error input[type='text'],\\nhx-form .form-item.has-error input[type='email'],\\nhx-form .form-item.has-error input[type='password'],\\nhx-form .form-item.has-error input[type='tel'],\\nhx-form .form-item.has-error input[type='url'],\\nhx-form .form-item.has-error input[type='search'],\\nhx-form .form-item.has-error input[type='number'],\\nhx-form .form-item.has-error textarea,\\nhx-form .form-item.has-error select,\\nhx-form .form-item--error input[type='text'],\\nhx-form .form-item--error input[type='email'],\\nhx-form .form-item--error input[type='password'],\\nhx-form .form-item--error input[type='tel'],\\nhx-form .form-item--error input[type='url'],\\nhx-form .form-item--error input[type='search'],\\nhx-form .form-item--error input[type='number'],\\nhx-form .form-item--error textarea,\\nhx-form .form-item--error select {\\n  border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n}\\n\\nhx-form .form-item.error input[type='text']:focus,\\nhx-form .form-item.error input[type='email']:focus,\\nhx-form .form-item.error input[type='password']:focus,\\nhx-form .form-item.error input[type='tel']:focus,\\nhx-form .form-item.error input[type='url']:focus,\\nhx-form .form-item.error input[type='search']:focus,\\nhx-form .form-item.error input[type='number']:focus,\\nhx-form .form-item.error textarea:focus,\\nhx-form .form-item.error select:focus,\\nhx-form .form-item.has-error input[type='text']:focus,\\nhx-form .form-item.has-error input[type='email']:focus,\\nhx-form .form-item.has-error input[type='password']:focus,\\nhx-form .form-item.has-error input[type='tel']:focus,\\nhx-form .form-item.has-error input[type='url']:focus,\\nhx-form .form-item.has-error input[type='search']:focus,\\nhx-form .form-item.has-error input[type='number']:focus,\\nhx-form .form-item.has-error textarea:focus,\\nhx-form .form-item.has-error select:focus,\\nhx-form .form-item--error input[type='text']:focus,\\nhx-form .form-item--error input[type='email']:focus,\\nhx-form .form-item--error input[type='password']:focus,\\nhx-form .form-item--error input[type='tel']:focus,\\nhx-form .form-item--error input[type='url']:focus,\\nhx-form .form-item--error input[type='search']:focus,\\nhx-form .form-item--error input[type='number']:focus,\\nhx-form .form-item--error textarea:focus,\\nhx-form .form-item--error select:focus {\\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/* ─── Error State on Checkbox/Radio ─── */\\n\\nhx-form .form-item.error input[type='checkbox'],\\nhx-form .form-item.has-error input[type='checkbox'],\\nhx-form .form-item--error input[type='checkbox'] {\\n  border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\\n}\\n\\nhx-form .form-item.error input[type='checkbox']:checked,\\nhx-form .form-item.has-error input[type='checkbox']:checked,\\nhx-form .form-item--error input[type='checkbox']:checked {\\n  background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\\n  border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));\\n}\\n\\nhx-form .form-item.error input[type='radio'],\\nhx-form .form-item.has-error input[type='radio'],\\nhx-form .form-item--error input[type='radio'] {\\n  border-color: var(--hx-color-error-500, #dc3545);\\n}\\n\\n/* ─── Inline Error Message ─── */\\n\\nhx-form .form-item__error-message,\\nhx-form .form-item .error-message,\\nhx-form .error-message {\\n  font-size: var(--hx-font-size-xs, 0.75rem);\\n  color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n  line-height: var(--hx-line-height-normal, 1.5);\\n}\\n\\n/* ─── Success State on Field Wrapper ─── */\\n\\nhx-form .form-item.success label,\\nhx-form .form-item.has-success label,\\nhx-form .form-item--success label {\\n  color: var(--hx-color-success-500, #198754);\\n}\\n\\nhx-form .form-item.success input[type='text'],\\nhx-form .form-item.success input[type='email'],\\nhx-form .form-item.success input[type='password'],\\nhx-form .form-item.success input[type='tel'],\\nhx-form .form-item.success input[type='url'],\\nhx-form .form-item.success input[type='search'],\\nhx-form .form-item.success input[type='number'],\\nhx-form .form-item.success textarea,\\nhx-form .form-item.success select,\\nhx-form .form-item.has-success input[type='text'],\\nhx-form .form-item.has-success input[type='email'],\\nhx-form .form-item.has-success input[type='password'],\\nhx-form .form-item.has-success input[type='tel'],\\nhx-form .form-item.has-success input[type='url'],\\nhx-form .form-item.has-success input[type='search'],\\nhx-form .form-item.has-success input[type='number'],\\nhx-form .form-item.has-success textarea,\\nhx-form .form-item.has-success select,\\nhx-form .form-item--success input[type='text'],\\nhx-form .form-item--success input[type='email'],\\nhx-form .form-item--success input[type='password'],\\nhx-form .form-item--success input[type='tel'],\\nhx-form .form-item--success input[type='url'],\\nhx-form .form-item--success input[type='search'],\\nhx-form .form-item--success input[type='number'],\\nhx-form .form-item--success textarea,\\nhx-form .form-item--success select {\\n  border-color: var(--hx-color-success-500, #198754);\\n}\\n\\nhx-form .form-item.success input[type='text']:focus,\\nhx-form .form-item.success input[type='email']:focus,\\nhx-form .form-item.success input[type='password']:focus,\\nhx-form .form-item.success input[type='tel']:focus,\\nhx-form .form-item.success input[type='url']:focus,\\nhx-form .form-item.success input[type='search']:focus,\\nhx-form .form-item.success input[type='number']:focus,\\nhx-form .form-item.success textarea:focus,\\nhx-form .form-item.success select:focus,\\nhx-form .form-item.has-success input[type='text']:focus,\\nhx-form .form-item.has-success input[type='email']:focus,\\nhx-form .form-item.has-success input[type='password']:focus,\\nhx-form .form-item.has-success input[type='tel']:focus,\\nhx-form .form-item.has-success input[type='url']:focus,\\nhx-form .form-item.has-success input[type='search']:focus,\\nhx-form .form-item.has-success input[type='number']:focus,\\nhx-form .form-item.has-success textarea:focus,\\nhx-form .form-item.has-success select:focus,\\nhx-form .form-item--success input[type='text']:focus,\\nhx-form .form-item--success input[type='email']:focus,\\nhx-form .form-item--success input[type='password']:focus,\\nhx-form .form-item--success input[type='tel']:focus,\\nhx-form .form-item--success input[type='url']:focus,\\nhx-form .form-item--success input[type='search']:focus,\\nhx-form .form-item--success input[type='number']:focus,\\nhx-form .form-item--success textarea:focus,\\nhx-form .form-item--success select:focus {\\n  border-color: var(--hx-color-success-500, #198754);\\n  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\\n    color-mix(\\n      in srgb,\\n      var(--hx-color-success-500, #198754) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\\n      transparent\\n    );\\n}\\n\\n/* ─── Inline Success Message ─── */\\n\\nhx-form .form-item__success-message,\\nhx-form .form-item .success-message,\\nhx-form .success-message {\\n  font-size: var(--hx-font-size-xs, 0.75rem);\\n  color: var(--hx-color-success-500, #198754);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n}\\n\\n/* ─── Drupal System Messages ─── */\\n\\nhx-form .messages--error {\\n  border: var(--hx-border-width-thin, 1px) solid\\n    var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n  border-radius: var(--hx-border-radius-md, 0.375rem);\\n  background-color: var(--hx-color-error-50, #fef2f2);\\n  color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\\n  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n}\\n\\nhx-form .messages--status {\\n  border: var(--hx-border-width-thin, 1px) solid var(--hx-color-success-500, #198754);\\n  border-radius: var(--hx-border-radius-md, 0.375rem);\\n  background-color: var(--hx-color-success-50, #f0fdf4);\\n  color: var(--hx-color-success-500, #198754);\\n  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n}\\n\\nhx-form .messages--warning {\\n  border: var(--hx-border-width-thin, 1px) solid var(--hx-color-warning-500, #ffc107);\\n  border-radius: var(--hx-border-radius-md, 0.375rem);\\n  background-color: var(--hx-color-warning-50, #fffbeb);\\n  color: var(--hx-color-warning-700, #92400e);\\n  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\\n  font-size: var(--hx-font-size-sm, 0.875rem);\\n  line-height: var(--hx-line-height-normal, 1.5);\\n}\\n\\n/* ==========================================================================\\n * FORCED-COLORS / HIGH CONTRAST MODE (P1-01)\\n *\\n * When box-shadow is used for focus rings, it is invisible in Windows\\n * High Contrast Mode. Restore a visible outline.\\n * ========================================================================== */\\n\\n@media (forced-colors: active) {\\n  hx-form input[type='text']:focus,\\n  hx-form input[type='email']:focus,\\n  hx-form input[type='password']:focus,\\n  hx-form input[type='tel']:focus,\\n  hx-form input[type='url']:focus,\\n  hx-form input[type='search']:focus,\\n  hx-form input[type='number']:focus,\\n  hx-form textarea:focus,\\n  hx-form select:focus {\\n    outline: 2px solid CanvasText;\\n    outline-offset: 2px;\\n  }\\n\\n  hx-form .hx-form-error-summary {\\n    border-color: LinkText;\\n  }\\n}\\n\"","import formScopedCss from '../../styles/form/form.scoped.css?raw';\n\nexport const helixFormScopedCss = formScopedCss;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { AdoptedStylesheetsController } from '../../controllers/adopted-stylesheets.js';\nimport { helixFormScopedCss } from './hx-form.styles.js';\n\n/**\n * A Light DOM form wrapper that styles native HTML form elements and\n * hx-* components with the design system's form styles.\n *\n * When `action` is set, renders a `<form>` wrapper around slotted content.\n * When no `action` is set (the Drupal pattern), renders only a `<slot>`\n * so Drupal can provide its own `<form>` tag.\n *\n * Uses adopted stylesheets to inject scoped CSS into the document without\n * Shadow DOM, keeping native form participation and Drupal compatibility.\n *\n * @summary Light DOM form wrapper with scoped styles for native and hx-* form elements.\n *\n * @tag hx-form\n *\n * @slot - Default slot for form fields and controls.\n *\n * @fires {CustomEvent<{valid: boolean, values: Record<string, FormDataEntryValue | FormDataEntryValue[]>, formData: FormData}>} hx-submit - Dispatched on valid client-side submit when no action is set.\n * @fires {CustomEvent<{errors: Array<{name: string, message: string}>}>} hx-invalid - Dispatched when validation fails on submit.\n * @fires {CustomEvent} hx-reset - Dispatched when the form is reset.\n *\n * @cssprop [--hx-form-gap=var(--hx-space-4)] - Gap between form fields.\n * @cssprop [--hx-form-max-width=none] - Maximum width of the form.\n * @cssprop [--hx-form-padding=0] - Internal padding of the form.\n */\n@customElement('hx-form')\nexport class HelixForm extends LitElement {\n  // ─── Light DOM ───\n\n  override createRenderRoot(): HTMLElement {\n    return this;\n  }\n\n  // ─── Adopted Stylesheets ───\n\n  /**\n   * Controller that injects scoped CSS into the document via adopted stylesheets for Light DOM styling.\n   * @internal\n   */\n  private _styles = new AdoptedStylesheetsController(this, helixFormScopedCss, document);\n\n  // ─── Internal State ───\n\n  /**\n   * Current list of validation errors rendered in the error summary and used to set aria-invalid on fields.\n   * @internal\n   */\n  @state()\n  private _validationErrors: Array<{ name: string; message: string }> = [];\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('submit', this._handleSubmit);\n    this.addEventListener('reset', this._handleReset);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('submit', this._handleSubmit);\n    this.removeEventListener('reset', this._handleReset);\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The URL to submit the form to. When empty, the form handles\n   * submission client-side only and dispatches `hx-submit`.\n   * @attr action\n   */\n  @property({ type: String })\n  action = '';\n\n  /**\n   * The HTTP method used when submitting the form.\n   * @attr method\n   */\n  @property({ type: String })\n  method: 'get' | 'post' = 'post';\n\n  /**\n   * When true, disables the browser's built-in constraint validation\n   * on form submission.\n   * @attr novalidate\n   */\n  @property({ type: Boolean })\n  novalidate = false;\n\n  /**\n   * Identifies the form for scripting and form discovery.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The encoding type for form submission. Only used when `action` is set.\n   * Use `multipart/form-data` for forms with file uploads.\n   * @attr enctype\n   */\n  @property({ type: String })\n  enctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' =\n    'application/x-www-form-urlencoded';\n\n  // ─── Public Methods ───\n\n  /**\n   * Checks the validity of all child form elements without showing\n   * validation UI. Returns `true` if all elements are valid.\n   */\n  checkValidity(): boolean {\n    const formElements = this._getAllValidatableElements();\n    return formElements.every((el) => {\n      if ('checkValidity' in el && typeof el.checkValidity === 'function') {\n        return (el as HTMLInputElement).checkValidity();\n      }\n      return true;\n    });\n  }\n\n  /**\n   * Checks validity and triggers the browser's constraint validation UI\n   * on each invalid element. Returns `true` if all elements are valid.\n   */\n  reportValidity(): boolean {\n    const formElements = this._getAllValidatableElements();\n    let allValid = true;\n    for (const el of formElements) {\n      if ('reportValidity' in el && typeof el.reportValidity === 'function') {\n        if (!(el as HTMLInputElement).reportValidity()) {\n          allValid = false;\n        }\n      }\n    }\n    return allValid;\n  }\n\n  /**\n   * Collects form data from all child form elements (native and hx-*).\n   * Returns a `FormData` object.\n   */\n  getFormData(): FormData {\n    // If there is a native <form> child, use it directly\n    const formEl = this.querySelector('form');\n    if (formEl) {\n      return new FormData(formEl);\n    }\n\n    // Otherwise, manually collect from all named inputs\n    const formData = new FormData();\n    const elements = this.getNativeFormElements();\n    for (const el of elements) {\n      const input = el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n      if (!input.name) continue;\n\n      if (input instanceof HTMLInputElement) {\n        if (input.type === 'checkbox' || input.type === 'radio') {\n          if (input.checked) {\n            formData.append(input.name, input.value || 'on');\n          }\n        } else {\n          formData.append(input.name, input.value);\n        }\n      } else {\n        formData.append(input.name, input.value);\n      }\n    }\n\n    return formData;\n  }\n\n  /**\n   * Returns all child hx-* form components that implement the form\n   * component contract (hx-text-input, hx-select, hx-checkbox, hx-textarea,\n   * hx-radio-group, hx-switch).\n   *\n   * Note: This uses a hardcoded allowlist. When a new hx-* form component\n   * is added, update this selector to include it.\n   */\n  getFormElements(): HTMLElement[] {\n    return Array.from(\n      this.querySelectorAll<HTMLElement>(\n        'hx-text-input, hx-select, hx-checkbox, hx-textarea, hx-radio-group, hx-switch',\n      ),\n    );\n  }\n\n  /**\n   * Returns all native form elements (input, select, textarea, button)\n   * found within this component's light DOM.\n   */\n  getNativeFormElements(): Array<\n    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement\n  > {\n    return Array.from(\n      this.querySelectorAll<\n        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement\n      >('input, select, textarea, button'),\n    );\n  }\n\n  /**\n   * Programmatically sets server-side validation errors on the form.\n   * Renders an error summary and sets `aria-invalid=\"true\"` on named fields.\n   *\n   * Useful for surfacing Drupal server-side validation responses.\n   *\n   * @param errors - Array of `{name, message}` pairs matching field `name` attributes.\n   */\n  setErrors(errors: Array<{ name: string; message: string }>): void {\n    this._validationErrors = errors;\n    this._applyAriaInvalidFromErrors(errors);\n  }\n\n  /**\n   * Programmatically sets a single field error. Merges with any existing errors.\n   *\n   * @param name - The `name` attribute of the field.\n   * @param message - The error message to display.\n   */\n  setFieldError(name: string, message: string): void {\n    const existing = this._validationErrors.filter((e) => e.name !== name);\n    this.setErrors([...existing, { name, message }]);\n  }\n\n  /**\n   * Clears all validation errors from the error summary and removes\n   * `aria-invalid` from all fields.\n   */\n  clearErrors(): void {\n    this._clearAriaInvalid();\n    this._validationErrors = [];\n  }\n\n  // ─── Private Helpers ───\n\n  /**\n   * Returns all elements that support constraint validation, including\n   * both native form elements and hx-* components with `checkValidity`.\n   * @internal\n   */\n  private _getAllValidatableElements(): HTMLElement[] {\n    const native = Array.from(this.querySelectorAll<HTMLElement>('input, select, textarea'));\n    const wcElements = this.getFormElements().filter(\n      (el) =>\n        'checkValidity' in el &&\n        typeof (el as Record<string, unknown>).checkValidity === 'function',\n    );\n    return [...native, ...wcElements];\n  }\n\n  /**\n   * Sets `aria-invalid=\"true\"` on fields with errors, removes it from valid fields.\n   * @internal\n   */\n  private _applyAriaInvalidFromErrors(errors: Array<{ name: string; message: string }>): void {\n    const errorNames = new Set(errors.map((e) => e.name));\n    const allElements = this._getAllValidatableElements();\n    for (const el of allElements) {\n      const named = el as HTMLElement & { name?: string };\n      const fieldName = named.name ?? el.tagName.toLowerCase();\n      if (errorNames.has(fieldName)) {\n        el.setAttribute('aria-invalid', 'true');\n      } else {\n        el.removeAttribute('aria-invalid');\n      }\n    }\n  }\n\n  /**\n   * Sets `aria-invalid` based on native constraint validation state.\n   * @internal\n   */\n  private _applyAriaInvalidFromValidity(): void {\n    const allElements = this._getAllValidatableElements();\n    for (const el of allElements) {\n      if ('validity' in el) {\n        const validatable = el as HTMLInputElement;\n        if (!validatable.validity.valid) {\n          el.setAttribute('aria-invalid', 'true');\n        } else {\n          el.removeAttribute('aria-invalid');\n        }\n      }\n    }\n  }\n\n  /**\n   * Removes `aria-invalid` from all validatable elements.\n   * @internal\n   */\n  private _clearAriaInvalid(): void {\n    const allElements = this._getAllValidatableElements();\n    for (const el of allElements) {\n      el.removeAttribute('aria-invalid');\n    }\n  }\n\n  // ─── Event Handling ───\n\n  /**\n   * Handles native form submit events, intercepting for client-side validation and hx-submit dispatch.\n   * @internal\n   */\n  private _handleSubmit = (e: Event): void => {\n    // If there is an action, let native form submission happen\n    if (this.action) {\n      return;\n    }\n\n    // Client-side only: prevent default and dispatch hx-submit or hx-invalid\n    e.preventDefault();\n\n    if (!this.novalidate && !this.checkValidity()) {\n      const errors = this._collectValidationErrors();\n      this._validationErrors = errors;\n      this._applyAriaInvalidFromValidity();\n\n      /**\n       * Dispatched when validation fails on submit.\n       * @event hx-invalid\n       */\n      this.dispatchEvent(\n        new CustomEvent('hx-invalid', {\n          bubbles: true,\n          composed: true,\n          detail: { errors },\n        }),\n      );\n      return;\n    }\n\n    // Clear any previous errors on successful submit\n    this._validationErrors = [];\n    this._clearAriaInvalid();\n\n    const formData = this.getFormData();\n    const values: Record<string, FormDataEntryValue | FormDataEntryValue[]> = {};\n    for (const key of new Set(formData.keys())) {\n      const all = formData.getAll(key);\n      if (all.length === 1 && all[0] !== undefined) {\n        values[key] = all[0];\n      } else {\n        values[key] = all;\n      }\n    }\n\n    /**\n     * Dispatched on valid client-side submit.\n     * @event hx-submit\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-submit', {\n        bubbles: true,\n        composed: true,\n        detail: { valid: true, values, formData },\n      }),\n    );\n  };\n\n  /**\n   * Handles native form reset events, clearing validation errors and dispatching hx-reset.\n   * @internal\n   */\n  private _handleReset = (): void => {\n    this._validationErrors = [];\n    this._clearAriaInvalid();\n\n    /**\n     * Dispatched when the form is reset.\n     * @event hx-reset\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-reset', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  /**\n   * Collects constraint validation errors from all validatable elements after a failed submit attempt.\n   * @internal\n   */\n  private _collectValidationErrors(): Array<{ name: string; message: string }> {\n    const errors: Array<{ name: string; message: string }> = [];\n    const elements = this._getAllValidatableElements();\n\n    for (const el of elements) {\n      if ('validity' in el && 'validationMessage' in el) {\n        const validatable = el as HTMLInputElement;\n        if (!validatable.validity.valid) {\n          errors.push({\n            name: validatable.name || validatable.tagName.toLowerCase(),\n            message: validatable.validationMessage,\n          });\n        }\n      }\n    }\n\n    return errors;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const errorSummary =\n      this._validationErrors.length > 0\n        ? html`\n            <div\n              class=\"hx-form-error-summary\"\n              role=\"alert\"\n              aria-live=\"assertive\"\n              aria-atomic=\"true\"\n            >\n              <ul>\n                ${this._validationErrors.map(\n                  (error) => html`<li>${error.message || error.name}</li>`,\n                )}\n              </ul>\n            </div>\n          `\n        : nothing;\n\n    if (this.action) {\n      return html`\n        ${errorSummary}\n        <form\n          action=${this.action}\n          method=${this.method}\n          enctype=${this.enctype}\n          name=${ifDefined(this.name || undefined)}\n          ?novalidate=${this.novalidate}\n        >\n          <slot></slot>\n        </form>\n      `;\n    }\n\n    return html`${errorSummary}<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-form': HelixForm;\n  }\n}\n"],"names":["formScopedCss","helixFormScopedCss","HelixForm","LitElement","AdoptedStylesheetsController","errors","formData","values","key","all","el","formElements","allValid","formEl","elements","input","name","message","existing","e","native","wcElements","errorNames","allElements","fieldName","validatable","errorSummary","html","error","nothing","ifDefined","__decorateClass","state","property","customElement"],"mappings":";;;;AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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"}

package/dist/shared/hx-help-text-DaOPN1iB.js.map

@@ -1 +1 @@
-{"version":3,"file":"hx-help-text-DaOPN1iB.js","sources":["../../src/components/hx-help-text/hx-help-text.styles.ts","../../src/components/hx-help-text/hx-help-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixHelpTextStyles = css`\n  :host {\n    display: block;\n  }\n\n  .help-text {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--hx-help-text-icon-gap, 0.375rem);\n    font-family: var(--hx-help-text-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));\n    font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));\n    line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));\n    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #6b7280));\n    margin: 0;\n  }\n\n  .help-text__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .help-text__text {\n    min-width: 0;\n  }\n\n  /* ─── Variant: default ─── */\n\n  .help-text--default {\n    --hx-help-text-color: var(--hx-color-neutral-500, #6b7280);\n  }\n\n  /* ─── Variant: error ─── */\n\n  .help-text--error {\n    --hx-help-text-color: var(--hx-color-error-600, #dc2626);\n  }\n\n  /* ─── Variant: warning ─── */\n\n  .help-text--warning {\n    --hx-help-text-color: var(--hx-color-warning-700, #b45309);\n  }\n\n  /* ─── Variant: success ─── */\n\n  .help-text--success {\n    --hx-help-text-color: var(--hx-color-success-700, #15803d);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixHelpTextStyles } from './hx-help-text.styles.js';\n\n/** Icon SVG for error variant (circle with exclamation mark). */\nconst errorIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <line\n    x1=\"8\"\n    y1=\"4.5\"\n    x2=\"8\"\n    y2=\"8.5\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for warning variant (triangle with exclamation mark). */\nconst warningIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <path\n    d=\"M7.134 2.5a1 1 0 011.732 0l5.196 9a1 1 0 01-.866 1.5H2.804a1 1 0 01-.866-1.5l5.196-9z\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    fill=\"none\"\n  />\n  <line\n    x1=\"8\"\n    y1=\"6\"\n    x2=\"8\"\n    y2=\"9\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.625\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for success variant (circle with checkmark). */\nconst successIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <path\n    d=\"M5.25 8.25l1.75 1.75 3.75-3.75\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    fill=\"none\"\n  />\n</svg>`;\n\n/** Map of variant to icon template. Default has no icon. */\nconst variantIcons = {\n  default: nothing,\n  error: errorIcon,\n  warning: warningIcon,\n  success: successIcon,\n} as const;\n\n/**\n * Standardized help/hint text displayed below form fields.\n * Used by hx-field as a consistent sub-component for guidance and validation messages.\n *\n * Non-default variants render an inline icon alongside the text to satisfy\n * WCAG 1.4.1 (color is not the sole visual indicator). The `error` variant\n * uses `role=\"alert\"` for immediate screen-reader announcement; `warning`\n * and `success` use `aria-live=\"polite\"` for non-intrusive announcements.\n *\n * @summary Help text displayed below form controls for guidance or validation feedback.\n *\n * @tag hx-help-text\n *\n * @slot - The help text content.\n *\n * @csspart base - The root element of the help text.\n * @csspart icon - The icon wrapper (only rendered for non-default variants).\n * @csspart text - The text wrapper around the default slot.\n *\n * @cssprop [--hx-help-text-color=var(--hx-color-neutral-500)] - Text color.\n * @cssprop [--hx-help-text-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-help-text-font-size=var(--hx-font-size-sm)] - Font size.\n * @cssprop [--hx-help-text-font-weight=var(--hx-font-weight-normal)] - Font weight.\n * @cssprop [--hx-help-text-line-height=var(--hx-line-height-normal)] - Line height.\n * @cssprop [--hx-help-text-icon-gap=0.375rem] - Gap between icon and text.\n */\n@customElement('hx-help-text')\nexport class HelixHelpText extends LitElement {\n  static override styles = [tokenStyles, helixHelpTextStyles];\n\n  /**\n   * Visual variant that determines the text color and icon.\n   * Use `error` for validation errors, `warning` for cautions, `success` for confirmation.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'error' | 'warning' | 'success' = 'default';\n\n  override render() {\n    const classes = {\n      'help-text': true,\n      [`help-text--${this.variant}`]: true,\n    };\n\n    const icon = variantIcons[this.variant];\n    const role = this.variant === 'error' ? 'alert' : undefined;\n    const ariaLive =\n      this.variant === 'warning' || this.variant === 'success' ? 'polite' : undefined;\n\n    return html`<span\n      part=\"base\"\n      class=${classMap(classes)}\n      role=${ifDefined(role)}\n      aria-live=${ifDefined(ariaLive)}\n      >${icon !== nothing\n        ? html`<span part=\"icon\" class=\"help-text__icon\">${icon}</span>`\n        : nothing}<span part=\"text\" class=\"help-text__text\"><slot></slot></span>\n    </span>`;\n  }\n}\n\nexport type WcHelpText = HelixHelpText;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-help-text': HelixHelpText;\n  }\n}\n"],"names":["helixHelpTextStyles","css","errorIcon","html","warningIcon","successIcon","variantIcons","nothing","HelixHelpText","LitElement","classes","icon","role","ariaLive","classMap","ifDefined","tokenStyles","__decorateClass","property","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;;;;;;ACMnC,MAAMC,IAAYC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAeZC,IAAcD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAoBdE,IAAcF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAadG,IAAe;AAAA,EACnB,SAASC;AAAA,EACT,OAAOL;AAAA,EACP,SAASE;AAAA,EACT,SAASC;AACX;AA6BO,IAAMG,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,UAAuD;AAAA,EAAA;AAAA,EAE9C,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,aAAa;AAAA,MACb,CAAC,cAAc,KAAK,OAAO,EAAE,GAAG;AAAA,IAAA,GAG5BC,IAAOL,EAAa,KAAK,OAAO,GAChCM,IAAO,KAAK,YAAY,UAAU,UAAU,QAC5CC,IACJ,KAAK,YAAY,aAAa,KAAK,YAAY,YAAY,WAAW;AAExE,WAAOV;AAAA;AAAA,cAEGW,EAASJ,CAAO,CAAC;AAAA,aAClBK,EAAUH,CAAI,CAAC;AAAA,kBACVG,EAAUF,CAAQ,CAAC;AAAA,SAC5BF,MAASJ,IACRJ,8CAAiDQ,CAAI,YACrDJ,CAAO;AAAA;AAAA,EAEf;AACF;AAhCaC,EACK,SAAS,CAACQ,GAAahB,CAAmB;AAQ1DiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BV,EASX,WAAA,WAAA,CAAA;AATWA,IAANS,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBX,CAAA;"}
+{"version":3,"file":"hx-help-text-DaOPN1iB.js","sources":["../../src/components/hx-help-text/hx-help-text.styles.ts","../../src/components/hx-help-text/hx-help-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixHelpTextStyles = css`\n  :host {\n    display: block;\n  }\n\n  .help-text {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--hx-help-text-icon-gap, 0.375rem);\n    font-family: var(--hx-help-text-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));\n    font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));\n    line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));\n    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #6b7280));\n    margin: 0;\n  }\n\n  .help-text__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .help-text__text {\n    min-width: 0;\n  }\n\n  /* ─── Variant: default ─── */\n\n  .help-text--default {\n    --hx-help-text-color: var(--hx-color-neutral-500, #6b7280);\n  }\n\n  /* ─── Variant: error ─── */\n\n  .help-text--error {\n    --hx-help-text-color: var(--hx-color-error-600, #dc2626);\n  }\n\n  /* ─── Variant: warning ─── */\n\n  .help-text--warning {\n    --hx-help-text-color: var(--hx-color-warning-700, #b45309);\n  }\n\n  /* ─── Variant: success ─── */\n\n  .help-text--success {\n    --hx-help-text-color: var(--hx-color-success-700, #15803d);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixHelpTextStyles } from './hx-help-text.styles.js';\n\n/** Icon SVG for error variant (circle with exclamation mark). */\nconst errorIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <line\n    x1=\"8\"\n    y1=\"4.5\"\n    x2=\"8\"\n    y2=\"8.5\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for warning variant (triangle with exclamation mark). */\nconst warningIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <path\n    d=\"M7.134 2.5a1 1 0 011.732 0l5.196 9a1 1 0 01-.866 1.5H2.804a1 1 0 01-.866-1.5l5.196-9z\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    fill=\"none\"\n  />\n  <line\n    x1=\"8\"\n    y1=\"6\"\n    x2=\"8\"\n    y2=\"9\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.625\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for success variant (circle with checkmark). */\nconst successIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <path\n    d=\"M5.25 8.25l1.75 1.75 3.75-3.75\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    fill=\"none\"\n  />\n</svg>`;\n\n/** Map of variant to icon template. Default has no icon. */\nconst variantIcons = {\n  default: nothing,\n  error: errorIcon,\n  warning: warningIcon,\n  success: successIcon,\n} as const;\n\n/**\n * Standardized help/hint text displayed below form fields.\n * Used by hx-field as a consistent sub-component for guidance and validation messages.\n *\n * Non-default variants render an inline icon alongside the text to satisfy\n * WCAG 1.4.1 (color is not the sole visual indicator). The `error` variant\n * uses `role=\"alert\"` for immediate screen-reader announcement; `warning`\n * and `success` use `aria-live=\"polite\"` for non-intrusive announcements.\n *\n * @summary Help text displayed below form controls for guidance or validation feedback.\n *\n * @tag hx-help-text\n *\n * @slot - The help text content.\n *\n * @csspart base - The root element of the help text.\n * @csspart icon - The icon wrapper (only rendered for non-default variants).\n * @csspart text - The text wrapper around the default slot.\n *\n * @cssprop [--hx-help-text-color=var(--hx-color-neutral-500)] - Text color.\n * @cssprop [--hx-help-text-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-help-text-font-size=var(--hx-font-size-sm)] - Font size.\n * @cssprop [--hx-help-text-font-weight=var(--hx-font-weight-normal)] - Font weight.\n * @cssprop [--hx-help-text-line-height=var(--hx-line-height-normal)] - Line height.\n * @cssprop [--hx-help-text-icon-gap=0.375rem] - Gap between icon and text.\n */\n@customElement('hx-help-text')\nexport class HelixHelpText extends LitElement {\n  static override styles = [tokenStyles, helixHelpTextStyles];\n\n  /**\n   * Visual variant that determines the text color and icon.\n   * Use `error` for validation errors, `warning` for cautions, `success` for confirmation.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'error' | 'warning' | 'success' = 'default';\n\n  override render() {\n    const classes = {\n      'help-text': true,\n      [`help-text--${this.variant}`]: true,\n    };\n\n    const icon = variantIcons[this.variant];\n    const role = this.variant === 'error' ? 'alert' : undefined;\n    const ariaLive =\n      this.variant === 'warning' || this.variant === 'success' ? 'polite' : undefined;\n\n    return html`<span\n      part=\"base\"\n      class=${classMap(classes)}\n      role=${ifDefined(role)}\n      aria-live=${ifDefined(ariaLive)}\n      >${icon !== nothing\n        ? html`<span part=\"icon\" class=\"help-text__icon\">${icon}</span>`\n        : nothing}<span part=\"text\" class=\"help-text__text\"><slot></slot></span>\n    </span>`;\n  }\n}\n\n/** Canonical type alias for the hx-help-text component. */\nexport type HxHelpText = HelixHelpText;\n\n/** @deprecated Use {@link HxHelpText} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcHelpText = HelixHelpText;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-help-text': HelixHelpText;\n  }\n}\n"],"names":["helixHelpTextStyles","css","errorIcon","html","warningIcon","successIcon","variantIcons","nothing","HelixHelpText","LitElement","classes","icon","role","ariaLive","classMap","ifDefined","tokenStyles","__decorateClass","property","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;;;;;;ACMnC,MAAMC,IAAYC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAeZC,IAAcD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAoBdE,IAAcF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAadG,IAAe;AAAA,EACnB,SAASC;AAAA,EACT,OAAOL;AAAA,EACP,SAASE;AAAA,EACT,SAASC;AACX;AA6BO,IAAMG,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,UAAuD;AAAA,EAAA;AAAA,EAE9C,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,aAAa;AAAA,MACb,CAAC,cAAc,KAAK,OAAO,EAAE,GAAG;AAAA,IAAA,GAG5BC,IAAOL,EAAa,KAAK,OAAO,GAChCM,IAAO,KAAK,YAAY,UAAU,UAAU,QAC5CC,IACJ,KAAK,YAAY,aAAa,KAAK,YAAY,YAAY,WAAW;AAExE,WAAOV;AAAA;AAAA,cAEGW,EAASJ,CAAO,CAAC;AAAA,aAClBK,EAAUH,CAAI,CAAC;AAAA,kBACVG,EAAUF,CAAQ,CAAC;AAAA,SAC5BF,MAASJ,IACRJ,8CAAiDQ,CAAI,YACrDJ,CAAO;AAAA;AAAA,EAEf;AACF;AAhCaC,EACK,SAAS,CAACQ,GAAahB,CAAmB;AAQ1DiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BV,EASX,WAAA,WAAA,CAAA;AATWA,IAANS,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBX,CAAA;"}

package/dist/shared/{hx-icon-button-C_fsUJW4.js → hx-icon-button-iu0i_faq.js}

@@ -1,9 +1,9 @@
-import { css as p, LitElement as v, html as c, nothing as u } from "lit";
+import { css as v, LitElement as p, html as c, nothing as u } from "lit";
 import { property as e, customElement as x } from "lit/decorators.js";
 import { classMap as d } from "lit/directives/class-map.js";
 import { ifDefined as b } from "lit/directives/if-defined.js";
-import { tokenStyles as f } from "@helixui/tokens/lit";
-const m = p`
+import { tokenStyles as m } from "@helixui/tokens/lit";
+const f = v`
   :host {
     display: inline-block;
   }
@@ -45,10 +45,16 @@ const m = p`
 
   /* ─── Size Variants ─── */
 
+  /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target for all sizes.
+     min-width/min-height override the explicit size tokens when they fall below
+     the 2.75rem (44px) threshold, preserving the visual icon size via font-size. */
+
   .button--sm {
     padding: var(--hx-space-1);
     width: var(--hx-icon-button-size, var(--hx-size-8));
     height: var(--hx-icon-button-size, var(--hx-size-8));
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     font-size: var(--hx-font-size-sm);
   }
 
@@ -56,6 +62,8 @@ const m = p`
     padding: var(--hx-space-2);
     width: var(--hx-icon-button-size, var(--hx-size-10));
     height: var(--hx-icon-button-size, var(--hx-size-10));
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     font-size: var(--hx-font-size-md);
   }
 
@@ -63,6 +71,8 @@ const m = p`
     padding: var(--hx-space-3);
     width: var(--hx-icon-button-size, var(--hx-size-12));
     height: var(--hx-icon-button-size, var(--hx-size-12));
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     font-size: var(--hx-font-size-lg);
   }
 
@@ -146,12 +156,12 @@ const m = p`
     }
   }
 `;
-var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, n, s, a) => {
-  for (var i = a > 1 ? void 0 : a ? g(n, s) : n, h = t.length - 1, l; h >= 0; h--)
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, n, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? y(n, s) : n, h = t.length - 1, l; h >= 0; h--)
     (l = t[h]) && (i = (a ? l(n, s, i) : l(i)) || i);
-  return a && i && y(n, s, i), i;
+  return a && i && g(n, s, i), i;
 };
-let o = class extends v {
+let r = class extends p {
   constructor() {
     super(), this.label = "", this.variant = "ghost", this.size = "md", this.type = "button", this.disabled = !1, this.href = void 0, this.name = void 0, this.value = void 0, this._internals = this.attachInternals();
   }
@@ -217,41 +227,39 @@ let o = class extends v {
       >
         ${this._iconSlot()}
       </button>
-    ` : (console.warn(
-      "[hx-icon-button] The `label` property is required for accessibility. Render suppressed."
-    ), u);
+    ` : u;
   }
 };
-o.styles = [f, m];
-o.formAssociated = !0;
-r([
+r.styles = [m, f];
+r.formAssociated = !0;
+o([
   e({ type: String })
-], o.prototype, "label", 2);
-r([
+], r.prototype, "label", 2);
+o([
   e({ type: String, reflect: !0 })
-], o.prototype, "variant", 2);
-r([
+], r.prototype, "variant", 2);
+o([
   e({ type: String, reflect: !0, attribute: "hx-size" })
-], o.prototype, "size", 2);
-r([
+], r.prototype, "size", 2);
+o([
   e({ type: String })
-], o.prototype, "type", 2);
-r([
+], r.prototype, "type", 2);
+o([
   e({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-r([
+], r.prototype, "disabled", 2);
+o([
   e({ type: String })
-], o.prototype, "href", 2);
-r([
+], r.prototype, "href", 2);
+o([
   e({ type: String })
-], o.prototype, "name", 2);
-r([
+], r.prototype, "name", 2);
+o([
   e({ type: String })
-], o.prototype, "value", 2);
-o = r([
+], r.prototype, "value", 2);
+r = o([
   x("hx-icon-button")
-], o);
+], r);
 export {
-  o as H
+  r as H
 };
-//# sourceMappingURL=hx-icon-button-C_fsUJW4.js.map
+//# sourceMappingURL=hx-icon-button-iu0i_faq.js.map

package/dist/shared/hx-icon-button-iu0i_faq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-icon-button-iu0i_faq.js","sources":["../../src/components/hx-icon-button/hx-icon-button.styles.ts","../../src/components/hx-icon-button/hx-icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled);\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);\n    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));\n    background-color: var(--hx-icon-button-bg);\n    color: var(--hx-icon-button-color, var(--hx-color-primary-500));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast),\n      color var(--hx-transition-fast),\n      border-color var(--hx-transition-fast),\n      box-shadow var(--hx-transition-fast);\n    text-decoration: none;\n    user-select: none;\n    -webkit-user-select: none;\n    flex-shrink: 0;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width) solid\n      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));\n    outline-offset: var(--hx-focus-ring-offset);\n  }\n\n  .button:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Size Variants ─── */\n\n  /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target for all sizes.\n     min-width/min-height override the explicit size tokens when they fall below\n     the 2.75rem (44px) threshold, preserving the visual icon size via font-size. */\n\n  .button--sm {\n    padding: var(--hx-space-1);\n    width: var(--hx-icon-button-size, var(--hx-size-8));\n    height: var(--hx-icon-button-size, var(--hx-size-8));\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-sm);\n  }\n\n  .button--md {\n    padding: var(--hx-space-2);\n    width: var(--hx-icon-button-size, var(--hx-size-10));\n    height: var(--hx-icon-button-size, var(--hx-size-10));\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-md);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3);\n    width: var(--hx-icon-button-size, var(--hx-size-12));\n    height: var(--hx-icon-button-size, var(--hx-size-12));\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-lg);\n  }\n\n  /* ─── Style Variants ─── */\n\n  .button--primary {\n    --hx-icon-button-bg: var(--hx-color-primary-500);\n    --hx-icon-button-color: var(--hx-color-neutral-0);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  .button--primary:hover {\n    --hx-icon-button-bg: var(--hx-color-primary-600);\n  }\n\n  .button--secondary {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-primary-500);\n    --hx-icon-button-border-color: var(--hx-color-primary-500);\n  }\n\n  .button--secondary:hover {\n    --hx-icon-button-bg: var(--hx-color-primary-50);\n  }\n\n  .button--tertiary {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-neutral-700);\n    --hx-icon-button-border-color: var(--hx-color-neutral-300);\n  }\n\n  .button--tertiary:hover {\n    --hx-icon-button-bg: var(--hx-color-neutral-100);\n  }\n\n  .button--danger {\n    --hx-icon-button-bg: var(--hx-color-error-500);\n    --hx-icon-button-color: var(--hx-color-neutral-0);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  .button--danger:hover {\n    --hx-icon-button-bg: var(--hx-color-error-600);\n  }\n\n  .button--ghost {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-primary-500);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  .button--ghost:hover {\n    --hx-icon-button-bg: var(--hx-color-neutral-100);\n  }\n\n  /* ─── Icon Container ─── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1;\n    pointer-events: none;\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n    /* P1-02 fix: opacity is set only on :host([disabled]) above to prevent\n       multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. */\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixIconButtonStyles } from './hx-icon-button.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * An icon-only button component for compact, accessible actions.\n * Renders a square button or anchor element containing a single icon.\n * The `label` property is required and provides the accessible name\n * via `aria-label` and a native tooltip via the `title` attribute.\n *\n * @summary Icon-only action button with full accessibility support.\n *\n * @tag hx-icon-button\n *\n * @slot - Icon element to display (hx-icon, svg, or img).\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when the button is clicked (not disabled).\n *\n * @csspart button - The native button or anchor element.\n * @csspart icon - The icon container span wrapping the default slot.\n *\n * @cssprop [--hx-icon-button-bg=transparent] - Button background color.\n * @cssprop [--hx-icon-button-color=var(--hx-color-primary-500)] - Icon color.\n * @cssprop [--hx-icon-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-icon-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-icon-button-size] - Explicit width and height override for the button.\n * @cssprop [--hx-icon-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n */\n@customElement('hx-icon-button')\nexport class HelixIconButton extends LitElement {\n  static override styles = [tokenStyles, helixIconButtonStyles];\n\n  /**\n   * Accessible name for the button. Required. Rendered as `aria-label` and\n   * `title` on the underlying element. The component renders nothing when absent,\n   * and a console warning is emitted to alert developers during authoring.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Visual style variant of the button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' = 'ghost';\n\n  /**\n   * Size of the button.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * The type attribute for the underlying button element.\n   * Has no effect when `href` is set.\n   * @attr type\n   */\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Whether the button is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * When set, renders an `<a>` element instead of a `<button>`.\n   * @attr href\n   */\n  @property({ type: String })\n  href: string | undefined = undefined;\n\n  /**\n   * Name submitted with form data. Only applicable when rendering as a button.\n   * @attr name\n   */\n  @property({ type: String })\n  name: string | undefined = undefined;\n\n  /**\n   * Value submitted with form data. Only applicable when rendering as a button.\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  // ─── Form Association via ElementInternals ───\n\n  static formAssociated = true;\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  // ─── Event Handling ───\n\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    /**\n     * Dispatched when the button is clicked.\n     * @event hx-click\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      }),\n    );\n\n    // Handle form submission/reset if form-associated and not in href/link mode\n    if (!this.href) {\n      if (this.type === 'submit' && this._internals.form) {\n        this._internals.form.requestSubmit();\n      } else if (this.type === 'reset' && this._internals.form) {\n        this._internals.form.reset();\n      }\n    }\n  }\n\n  // ─── Render Helpers ───\n\n  private _normalizedLabel(): string {\n    return this.label.trim();\n  }\n\n  private _classes() {\n    return {\n      button: true,\n      [`button--${this.variant}`]: true,\n      [`button--${this.size}`]: true,\n    };\n  }\n\n  private _iconSlot() {\n    return html`<span part=\"icon\" class=\"icon\"><slot></slot></span>`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const normalizedLabel = this._normalizedLabel();\n    if (!normalizedLabel) {\n      devWarn(\n        'hx-icon-button',\n        'The `label` property is required for accessibility. Render suppressed.',\n      );\n      return nothing;\n    }\n\n    if (this.href !== undefined) {\n      // P1-03 fix: disabled anchor must set tabindex=\"-1\" explicitly — an <a>\n      // without href is non-focusable by default in most browsers, but this is\n      // browser-dependent. Explicit tabindex=\"-1\" guarantees keyboard exclusion\n      // across all conforming browsers.\n      // P1-07 note: aria-disabled IS required on the anchor branch because\n      // <a> elements have no native disabled attribute; aria-disabled is the\n      // only AT signal available.\n      return html`\n        <a\n          part=\"button\"\n          class=${classMap(this._classes())}\n          href=${ifDefined(this.disabled ? undefined : this.href)}\n          aria-label=${normalizedLabel}\n          title=${normalizedLabel}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : nothing}\n          @click=${this._handleClick}\n        >\n          ${this._iconSlot()}\n        </a>\n      `;\n    }\n\n    // P1-07 fix: aria-disabled is redundant on a natively disabled <button>.\n    // The native disabled attribute already exposes aria-disabled=\"true\"\n    // implicitly in the accessibility tree. Duplicate explicit aria-disabled\n    // creates ambiguity about design intent. Keep only native ?disabled.\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(this._classes())}\n        ?disabled=${this.disabled}\n        type=${this.type}\n        aria-label=${normalizedLabel}\n        title=${normalizedLabel}\n        name=${ifDefined(this.name)}\n        value=${ifDefined(this.value)}\n        @click=${this._handleClick}\n      >\n        ${this._iconSlot()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-icon-button': HelixIconButton;\n  }\n}\n"],"names":["helixIconButtonStyles","css","HelixIconButton","LitElement","e","html","normalizedLabel","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC+B9B,IAAMC,IAAN,cAA8BC,EAAW;AAAA,EAoE9C,cAAc;AACZ,UAAA,GA3DF,KAAA,QAAQ,IAOR,KAAA,UAAqE,SAOrE,KAAA,OAA2B,MAQ3B,KAAA,OAAsC,UAOtC,KAAA,WAAW,IAOX,KAAA,OAA2B,QAO3B,KAAA,OAA2B,QAO3B,KAAA,QAA4B,QAU1B,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,OAA+B;AACjC,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAIQ,aAAaC,GAAqB;AACxC,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AAMA,SAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,eAAeA,EAAA;AAAA,MAAE,CAC5B;AAAA,IAAA,GAIE,KAAK,SACJ,KAAK,SAAS,YAAY,KAAK,WAAW,OAC5C,KAAK,WAAW,KAAK,cAAA,IACZ,KAAK,SAAS,WAAW,KAAK,WAAW,QAClD,KAAK,WAAW,KAAK,MAAA;AAAA,EAG3B;AAAA;AAAA,EAIQ,mBAA2B;AACjC,WAAO,KAAK,MAAM,KAAA;AAAA,EACpB;AAAA,EAEQ,WAAW;AACjB,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,CAAC,WAAW,KAAK,OAAO,EAAE,GAAG;AAAA,MAC7B,CAAC,WAAW,KAAK,IAAI,EAAE,GAAG;AAAA,IAAA;AAAA,EAE9B;AAAA,EAEQ,YAAY;AAClB,WAAOC;AAAA,EACT;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAkB,KAAK,iBAAA;AAC7B,WAAKA,IAQD,KAAK,SAAS,SAQTD;AAAA;AAAA;AAAA,kBAGKE,EAAS,KAAK,UAAU,CAAC;AAAA,iBAC1BC,EAAU,KAAK,WAAW,SAAY,KAAK,IAAI,CAAC;AAAA,uBAC1CF,CAAe;AAAA,kBACpBA,CAAe;AAAA,0BACP,KAAK,WAAW,SAASG,CAAO;AAAA,qBACrC,KAAK,WAAW,OAAOA,CAAO;AAAA,mBAChC,KAAK,YAAY;AAAA;AAAA,YAExB,KAAK,WAAW;AAAA;AAAA,UASjBJ;AAAA;AAAA;AAAA,gBAGKE,EAAS,KAAK,UAAU,CAAC;AAAA,oBACrB,KAAK,QAAQ;AAAA,eAClB,KAAK,IAAI;AAAA,qBACHD,CAAe;AAAA,gBACpBA,CAAe;AAAA,eAChBE,EAAU,KAAK,IAAI,CAAC;AAAA,gBACnBA,EAAU,KAAK,KAAK,CAAC;AAAA,iBACpB,KAAK,YAAY;AAAA;AAAA,UAExB,KAAK,WAAW;AAAA;AAAA,QA3CbC;AAAA,EA8CX;AACF;AAvLaP,EACK,SAAS,CAACQ,GAAaV,CAAqB;AADjDE,EAgEJ,iBAAiB;AAtDxBS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfV,EAUX,WAAA,SAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhB9BV,EAiBX,WAAA,WAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GAvBpDV,EAwBX,WAAA,QAAA,CAAA;AAQAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/BfV,EAgCX,WAAA,QAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtC/BV,EAuCX,WAAA,YAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7CfV,EA8CX,WAAA,QAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApDfV,EAqDX,WAAA,QAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3DfV,EA4DX,WAAA,SAAA,CAAA;AA5DWA,IAANS,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBX,CAAA;"}

package/dist/shared/{hx-list-CF-AAnp-.js → hx-list-CdRNgeoP.js}

@@ -1,8 +1,8 @@
-import { css as v, LitElement as f, html as a, nothing as p } from "lit";
+import { css as f, LitElement as v, html as a, nothing as p } from "lit";
 import { property as o, customElement as b } from "lit/decorators.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
 import { tokenStyles as x } from "@helixui/tokens/lit";
-const y = v`
+const y = f`
   :host {
     display: block;
   }
@@ -50,7 +50,7 @@ const y = v`
     border-bottom: var(--hx-border-width-thin, 1px) solid
       var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));
   }
-`, _ = v`
+`, _ = f`
   :host {
     display: block;
   }
@@ -158,7 +158,7 @@ var g = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, c = (t, e, r
     (d = t[l]) && (i = (s ? d(e, r, i) : d(i)) || i);
   return s && i && g(e, r, i), i;
 };
-let n = class extends f {
+let n = class extends v {
   constructor() {
     super(...arguments), this.disabled = !1, this.selected = !1, this.href = void 0, this.value = void 0, this.interactive = !1, this.type = "default";
   }
@@ -285,7 +285,7 @@ var k = Object.defineProperty, w = Object.getOwnPropertyDescriptor, u = (t, e, r
     (d = t[l]) && (i = (s ? d(e, r, i) : d(i)) || i);
   return s && i && k(e, r, i), i;
 };
-let h = class extends f {
+let h = class extends v {
   constructor() {
     super(...arguments), this.variant = "plain", this.divided = !1, this.label = void 0, this._handleKeydown = (t) => {
       var l;
@@ -320,9 +320,7 @@ let h = class extends f {
     super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown);
   }
   updated(t) {
-    super.updated(t), t.has("variant") && this._updateItemStates(), this.variant === "interactive" && !this.label && console.warn(
-      '[hx-list] The "label" attribute is required when variant is "interactive". Add a label to provide an accessible name for the listbox (WCAG 2.1 SC 4.1.2).'
-    );
+    super.updated(t), t.has("variant") && this._updateItemStates(), this.variant === "interactive" && this.label;
   }
   /**
    * Sets the `interactive` property on all child hx-list-item elements
@@ -399,4 +397,4 @@ export {
   h as H,
   n as a
 };
-//# sourceMappingURL=hx-list-CF-AAnp-.js.map
+//# sourceMappingURL=hx-list-CdRNgeoP.js.map