npm - @helixui/library - Versions diffs - 0.1.0 - Mend

@helixui/library 0.1.0

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

Files changed (778) hide show

package/dist/shared/hx-form-BJeLK34m.js.map ADDED Viewed

@@ -0,0 +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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCEFC,IAAqBD;;;;;;AC8B3B,IAAME,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAQ,UAAU,IAAIC,EAA6B,MAAMH,GAAoB,QAAQ,GAKrF,KAAQ,oBAA8D,CAAA,GAwBtE,KAAA,SAAS,IAOT,KAAA,SAAyB,QAQzB,KAAA,aAAa,IAOb,KAAA,OAAO,IAQP,KAAA,UACE,qCAkMF,KAAQ,gBAAgB,CAAC,MAAmB;AAE1C,UAAI,KAAK;AACP;AAMF,UAFA,EAAE,eAAA,GAEE,CAAC,KAAK,cAAc,CAAC,KAAK,iBAAiB;AAC7C,cAAMI,IAAS,KAAK,yBAAA;AACpB,aAAK,oBAAoBA,GACzB,KAAK,8BAAA,GAML,KAAK;AAAA,UACH,IAAI,YAAY,cAAc;AAAA,YAC5B,SAAS;AAAA,YACT,UAAU;AAAA,YACV,QAAQ,EAAE,QAAAA,EAAA;AAAA,UAAO,CAClB;AAAA,QAAA;AAEH;AAAA,MACF;AAGA,WAAK,oBAAoB,CAAA,GACzB,KAAK,kBAAA;AAEL,YAAMC,IAAW,KAAK,YAAA,GAChBC,IAAoE,CAAA;AAC1E,iBAAWC,KAAO,IAAI,IAAIF,EAAS,KAAA,CAAM,GAAG;AAC1C,cAAMG,IAAMH,EAAS,OAAOE,CAAG;AAC/B,QAAIC,EAAI,WAAW,KAAKA,EAAI,CAAC,MAAM,SACjCF,EAAOC,CAAG,IAAIC,EAAI,CAAC,IAEnBF,EAAOC,CAAG,IAAIC;AAAA,MAElB;AAMA,WAAK;AAAA,QACH,IAAI,YAAY,aAAa;AAAA,UAC3B,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ,EAAE,OAAO,IAAM,QAAAF,GAAQ,UAAAD,EAAA;AAAA,QAAS,CACzC;AAAA,MAAA;AAAA,IAEL,GAEA,KAAQ,eAAe,MAAY;AACjC,WAAK,oBAAoB,CAAA,GACzB,KAAK,kBAAA,GAML,KAAK;AAAA,QACH,IAAI,YAAY,YAAY;AAAA,UAC1B,SAAS;AAAA,UACT,UAAU;AAAA,QAAA,CACX;AAAA,MAAA;AAAA,IAEL;AAAA,EAAA;AAAA;AAAA,EA1US,mBAAgC;AACvC,WAAO;AAAA,EACT;AAAA;AAAA,EAaS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,iBAAiB,UAAU,KAAK,aAAa,GAClD,KAAK,iBAAiB,SAAS,KAAK,YAAY;AAAA,EAClD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,oBAAoB,UAAU,KAAK,aAAa,GACrD,KAAK,oBAAoB,SAAS,KAAK,YAAY;AAAA,EACrD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiDA,gBAAyB;AAEvB,WADqB,KAAK,2BAAA,EACN,MAAM,CAACI,MACrB,mBAAmBA,KAAM,OAAOA,EAAG,iBAAkB,aAC/CA,EAAwB,cAAA,IAE3B,EACR;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAA0B;AACxB,UAAMC,IAAe,KAAK,2BAAA;AAC1B,QAAIC,IAAW;AACf,eAAWF,KAAMC;AACf,MAAI,oBAAoBD,KAAM,OAAOA,EAAG,kBAAmB,eACnDA,EAAwB,qBAC5BE,IAAW;AAIjB,WAAOA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAAwB;AAEtB,UAAMC,IAAS,KAAK,cAAc,MAAM;AACxC,QAAIA;AACF,aAAO,IAAI,SAASA,CAAM;AAI5B,UAAMP,IAAW,IAAI,SAAA,GACfQ,IAAW,KAAK,sBAAA;AACtB,eAAWJ,KAAMI,GAAU;AACzB,YAAMC,IAAQL;AACd,MAAKK,EAAM,SAEPA,aAAiB,qBACfA,EAAM,SAAS,cAAcA,EAAM,SAAS,WAC1CA,EAAM,WACRT,EAAS,OAAOS,EAAM,MAAMA,EAAM,SAAS,IAAI,IAMnDT,EAAS,OAAOS,EAAM,MAAMA,EAAM,KAAK;AAAA,IAE3C;AAEA,WAAOT;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,kBAAiC;AAC/B,WAAO,MAAM;AAAA,MACX,KAAK;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,wBAEE;AACA,WAAO,MAAM;AAAA,MACX,KAAK,iBAEH,iCAAiC;AAAA,IAAA;AAAA,EAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,UAAUD,GAAwD;AAChE,SAAK,oBAAoBA,GACzB,KAAK,4BAA4BA,CAAM;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,cAAcW,GAAcC,GAAuB;AACjD,UAAMC,IAAW,KAAK,kBAAkB,OAAO,CAACC,MAAMA,EAAE,SAASH,CAAI;AACrE,SAAK,UAAU,CAAC,GAAGE,GAAU,EAAE,MAAAF,GAAM,SAAAC,EAAA,CAAS,CAAC;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAAoB;AAClB,SAAK,kBAAA,GACL,KAAK,oBAAoB,CAAA;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,6BAA4C;AAClD,UAAMG,IAAS,MAAM,KAAK,KAAK,iBAA8B,yBAAyB,CAAC,GACjFC,IAAa,KAAK,gBAAA,EAAkB;AAAA,MACxC,CAACX,MACC,mBAAmBA,KACnB,OAAQA,EAA+B,iBAAkB;AAAA,IAAA;AAE7D,WAAO,CAAC,GAAGU,GAAQ,GAAGC,CAAU;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA,EAKQ,4BAA4BhB,GAAwD;AAC1F,UAAMiB,IAAa,IAAI,IAAIjB,EAAO,IAAI,CAACc,MAAMA,EAAE,IAAI,CAAC,GAC9CI,IAAc,KAAK,2BAAA;AACzB,eAAWb,KAAMa,GAAa;AAE5B,YAAMC,IADQd,EACU,QAAQA,EAAG,QAAQ,YAAA;AAC3C,MAAIY,EAAW,IAAIE,CAAS,IAC1Bd,EAAG,aAAa,gBAAgB,MAAM,IAEtCA,EAAG,gBAAgB,cAAc;AAAA,IAErC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKQ,gCAAsC;AAC5C,UAAMa,IAAc,KAAK,2BAAA;AACzB,eAAWb,KAAMa;AACf,MAAI,cAAcb,MACIA,EACH,SAAS,QAGxBA,EAAG,gBAAgB,cAAc,IAFjCA,EAAG,aAAa,gBAAgB,MAAM;AAAA,EAM9C;AAAA;AAAA;AAAA;AAAA,EAKQ,oBAA0B;AAChC,UAAMa,IAAc,KAAK,2BAAA;AACzB,eAAWb,KAAMa;AACf,MAAAb,EAAG,gBAAgB,cAAc;AAAA,EAErC;AAAA,EA4EQ,2BAAqE;AAC3E,UAAML,IAAmD,CAAA,GACnDS,IAAW,KAAK,2BAAA;AAEtB,eAAWJ,KAAMI;AACf,UAAI,cAAcJ,KAAM,uBAAuBA,GAAI;AACjD,cAAMe,IAAcf;AACpB,QAAKe,EAAY,SAAS,SACxBpB,EAAO,KAAK;AAAA,UACV,MAAMoB,EAAY,QAAQA,EAAY,QAAQ,YAAA;AAAA,UAC9C,SAASA,EAAY;AAAA,QAAA,CACtB;AAAA,MAEL;AAGF,WAAOpB;AAAA,EACT;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMqB,IACJ,KAAK,kBAAkB,SAAS,IAC5BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAQQ,KAAK,kBAAkB;AAAA,MACvB,CAACC,MAAUD,QAAWC,EAAM,WAAWA,EAAM,IAAI;AAAA,IAAA,CAClD;AAAA;AAAA;AAAA,cAIPC;AAEN,WAAI,KAAK,SACAF;AAAA,UACHD,CAAY;AAAA;AAAA,mBAEH,KAAK,MAAM;AAAA,mBACX,KAAK,MAAM;AAAA,oBACV,KAAK,OAAO;AAAA,iBACfI,EAAU,KAAK,QAAQ,MAAS,CAAC;AAAA,wBAC1B,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA,UAO5BH,IAAOD,CAAY;AAAA,EAC5B;AACF;AA1XUK,EAAA;AAAA,EADPC,EAAA;AAAM,GAbI9B,EAcH,WAAA,qBAAA,CAAA;AAwBR6B,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArCf/B,EAsCX,WAAA,UAAA,CAAA;AAOA6B,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5Cf/B,EA6CX,WAAA,UAAA,CAAA;AAQA6B,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GApDhB/B,EAqDX,WAAA,cAAA,CAAA;AAOA6B,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3Df/B,EA4DX,WAAA,QAAA,CAAA;AAQA6B,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnEf/B,EAoEX,WAAA,WAAA,CAAA;AApEWA,IAAN6B,EAAA;AAAA,EADNG,EAAc,SAAS;AAAA,GACXhC,CAAA;"}

package/dist/shared/hx-format-date-BIR66MeC.js ADDED Viewed

@@ -0,0 +1,172 @@
+import { css as _, LitElement as D, html as M } from "lit";
+import { property as h, customElement as w } from "lit/decorators.js";
+import { t as N } from "./lit-Dpo7RLp4.js";
+const T = _`
+  :host {
+    display: inline;
+  }
+  [part='base'] {
+    display: inline;
+    font: inherit;
+    color: inherit;
+  }
+`;
+var $ = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, n = (o, t, i, e) => {
+  for (var a = e > 1 ? void 0 : e ? Z(t, i) : t, s = o.length - 1, c; s >= 0; s--)
+    (c = o[s]) && (a = (e ? c(t, i, a) : c(a)) || a);
+  return e && a && $(t, i, a), a;
+};
+let r = class extends D {
+  constructor() {
+    super(...arguments), this.date = "", this.lang = "", this.month = void 0, this.year = void 0, this.day = void 0, this.weekday = void 0, this.hour = void 0, this.minute = void 0, this.second = void 0, this.timeZoneName = void 0, this.timeZone = void 0, this.hourFormat = "auto", this.numeric = "auto", this.relative = !1;
+  }
+  // ─── Private helpers ───
+  _getDate() {
+    const o = this.date;
+    if (o === "") return /* @__PURE__ */ new Date();
+    if (o instanceof Date)
+      return isNaN(o.getTime()) ? /* @__PURE__ */ new Date() : o;
+    if (typeof o == "number") {
+      const e = new Date(o);
+      return isNaN(e.getTime()) ? /* @__PURE__ */ new Date() : e;
+    }
+    const t = Number(o);
+    if (!isNaN(t)) {
+      const e = new Date(t);
+      return isNaN(e.getTime()) ? /* @__PURE__ */ new Date() : e;
+    }
+    const i = new Date(o);
+    return isNaN(i.getTime()) ? /* @__PURE__ */ new Date() : i;
+  }
+  _getLocale() {
+    return this.lang ? this.lang : document.documentElement.lang || navigator.language || "en";
+  }
+  _getHour12() {
+    if (this.hourFormat === "12") return !0;
+    if (this.hourFormat === "24") return !1;
+  }
+  /**
+   * Returns the `datetime` attribute value. When `timeZone` is set, returns a
+   * timezone-offset ISO string (e.g. `2024-09-20T05:00:00-04:00`) so that
+   * assistive technology reads the same local time as the visual display.
+   */
+  _getDatetimeAttr(o) {
+    if (!this.timeZone) return o.toISOString();
+    try {
+      const t = {
+        timeZone: this.timeZone,
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: !1
+      }, i = (m) => m.reduce((g, d) => (d.type !== "literal" && (g[d.type] = d.value), g), {}), e = i(new Intl.DateTimeFormat("en-CA", t).formatToParts(o)), a = i(
+        new Intl.DateTimeFormat("en-CA", { ...t, timeZone: "UTC" }).formatToParts(o)
+      ), s = (m) => Date.UTC(
+        parseInt(m.year ?? "0"),
+        parseInt(m.month ?? "1") - 1,
+        parseInt(m.day ?? "1"),
+        parseInt(m.hour === "24" ? "0" : m.hour ?? "0"),
+        parseInt(m.minute ?? "0"),
+        parseInt(m.second ?? "0")
+      ), c = Math.round((s(e) - s(a)) / 6e4), y = c >= 0 ? "+" : "-", l = Math.abs(c), f = String(Math.floor(l / 60)).padStart(2, "0"), v = String(l % 60).padStart(2, "0"), p = e.hour === "24" ? "00" : e.hour ?? "00";
+      return `${e.year}-${e.month}-${e.day}T${p}:${e.minute}:${e.second}${y}${f}:${v}`;
+    } catch {
+      return o.toISOString();
+    }
+  }
+  _formatRelative(o) {
+    const t = /* @__PURE__ */ new Date(), i = o.getTime() - t.getTime(), e = Math.round(i / 1e3), a = Math.abs(e), s = Math.round(e / 60), c = Math.abs(s), y = Math.round(e / 3600), l = Math.abs(y), f = Math.round(e / 86400), v = Math.abs(f), p = Math.round(f / 30), m = Math.abs(p), g = Math.round(f / 365), d = this._getLocale(), b = `${d}|${this.numeric}`;
+    let u = r._rtfCache.get(b);
+    if (!u)
+      try {
+        u = new Intl.RelativeTimeFormat(d, { numeric: this.numeric }), r._rtfCache.set(b, u);
+      } catch {
+        return "";
+      }
+    try {
+      return a < 60 ? u.format(e, "second") : c < 60 ? u.format(s, "minute") : l < 24 ? u.format(y, "hour") : v < 30 ? u.format(f, "day") : m < 12 ? u.format(p, "month") : u.format(g, "year");
+    } catch {
+      return "";
+    }
+  }
+  _formatAbsolute(o) {
+    const t = {};
+    this.month !== void 0 && (t.month = this.month), this.year !== void 0 && (t.year = this.year), this.day !== void 0 && (t.day = this.day), this.weekday !== void 0 && (t.weekday = this.weekday), this.hour !== void 0 && (t.hour = this.hour), this.minute !== void 0 && (t.minute = this.minute), this.second !== void 0 && (t.second = this.second), this.timeZoneName !== void 0 && (t.timeZoneName = this.timeZoneName), this.timeZone !== void 0 && (t.timeZone = this.timeZone);
+    const i = this._getHour12();
+    i !== void 0 && (t.hour12 = i), Object.keys(t).length === 0 && (t.year = "numeric", t.month = "long", t.day = "numeric");
+    const e = this._getLocale(), a = `${e}|${JSON.stringify(t)}`;
+    let s = r._dtfCache.get(a);
+    if (!s)
+      try {
+        s = new Intl.DateTimeFormat(e, t), r._dtfCache.set(a, s);
+      } catch {
+        return "";
+      }
+    try {
+      return s.format(o);
+    } catch {
+      return "";
+    }
+  }
+  // ─── Render ───
+  render() {
+    const o = this._getDate(), t = this._getDatetimeAttr(o), i = this.relative ? this._formatRelative(o) : this._formatAbsolute(o);
+    return M`<time part="base" datetime=${t}>${i}</time>`;
+  }
+};
+r.styles = [N, T];
+r._dtfCache = /* @__PURE__ */ new Map();
+r._rtfCache = /* @__PURE__ */ new Map();
+n([
+  h()
+], r.prototype, "date", 2);
+n([
+  h()
+], r.prototype, "lang", 2);
+n([
+  h()
+], r.prototype, "month", 2);
+n([
+  h()
+], r.prototype, "year", 2);
+n([
+  h()
+], r.prototype, "day", 2);
+n([
+  h()
+], r.prototype, "weekday", 2);
+n([
+  h()
+], r.prototype, "hour", 2);
+n([
+  h()
+], r.prototype, "minute", 2);
+n([
+  h()
+], r.prototype, "second", 2);
+n([
+  h({ attribute: "time-zone-name" })
+], r.prototype, "timeZoneName", 2);
+n([
+  h({ attribute: "time-zone" })
+], r.prototype, "timeZone", 2);
+n([
+  h({ attribute: "hour-format" })
+], r.prototype, "hourFormat", 2);
+n([
+  h()
+], r.prototype, "numeric", 2);
+n([
+  h({ type: Boolean })
+], r.prototype, "relative", 2);
+r = n([
+  w("hx-format-date")
+], r);
+export {
+  r as H
+};
+//# sourceMappingURL=hx-format-date-BIR66MeC.js.map

package/dist/shared/hx-format-date-BIR66MeC.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-format-date-BIR66MeC.js","sources":["../../src/components/hx-format-date/hx-format-date.styles.ts","../../src/components/hx-format-date/hx-format-date.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFormatDateStyles = css`\n :host {\n display: inline;\n }\n\n [part='base'] {\n display: inline;\n font: inherit;\n color: inherit;\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixFormatDateStyles } from './hx-format-date.styles.js';\n\n/**\n * Formats and displays a date/time value using the browser's `Intl.DateTimeFormat`\n * (or `Intl.RelativeTimeFormat` when `relative` is set). Renders as an inline\n * `<time>` element — machine-readable via `datetime`, human-readable via formatted text.\n *\n * No external dependencies. Uses native Intl APIs only.\n *\n * @summary Inline date/time formatter using Intl APIs with semantic `<time>` output.\n *\n * @tag hx-format-date\n *\n * @csspart base - The inner `<time>` element.\n */\n@customElement('hx-format-date')\nexport class HelixFormatDate extends LitElement {\n static override styles = [tokenStyles, helixFormatDateStyles];\n\n // ─── Intl formatter caches (keyed by locale+options fingerprint) ───\n private static _dtfCache = new Map<string, Intl.DateTimeFormat>();\n private static _rtfCache = new Map<string, Intl.RelativeTimeFormat>();\n\n /**\n * The date/time value to format. Accepts an ISO string, a Unix timestamp (ms), or\n * a `Date` object. Defaults to the current date/time when empty.\n * @attr date\n */\n @property()\n date: string | number | Date = '';\n\n /**\n * BCP 47 locale tag used for formatting (e.g. `\"en-US\"`, `\"de\"`, `\"ja\"`).\n * Defaults to `document.documentElement.lang`, then `navigator.language`.\n * @attr lang\n */\n @property()\n override lang = '';\n\n /**\n * Month display format.\n * @attr month\n */\n @property()\n month: 'narrow' | 'short' | 'long' | 'numeric' | '2-digit' | undefined = undefined;\n\n /**\n * Year display format.\n * @attr year\n */\n @property()\n year: 'numeric' | '2-digit' | undefined = undefined;\n\n /**\n * Day display format.\n * @attr day\n */\n @property()\n day: 'numeric' | '2-digit' | undefined = undefined;\n\n /**\n * Weekday display format.\n * @attr weekday\n */\n @property()\n weekday: 'narrow' | 'short' | 'long' | undefined = undefined;\n\n /**\n * Hour display format.\n * @attr hour\n */\n @property()\n hour: 'numeric' | '2-digit' | undefined = undefined;\n\n /**\n * Minute display format.\n * @attr minute\n */\n @property()\n minute: 'numeric' | '2-digit' | undefined = undefined;\n\n /**\n * Second display format.\n * @attr second\n */\n @property()\n second: 'numeric' | '2-digit' | undefined = undefined;\n\n /**\n * Time zone name display format. Accepts all values supported by\n * `Intl.DateTimeFormatOptions.timeZoneName` including `'short'`, `'long'`,\n * `'shortOffset'`, `'longOffset'`, `'shortGeneric'`, and `'longGeneric'`.\n * @attr time-zone-name\n */\n @property({ attribute: 'time-zone-name' })\n timeZoneName: Intl.DateTimeFormatOptions['timeZoneName'] = undefined;\n\n /**\n * IANA time zone identifier (e.g. `\"America/New_York\"`, `\"UTC\"`).\n * @attr time-zone\n */\n @property({ attribute: 'time-zone' })\n timeZone: string | undefined = undefined;\n\n /**\n * Whether to use 12-hour or 24-hour clock. `\"auto\"` defers to locale default.\n * @attr hour-format\n */\n @property({ attribute: 'hour-format' })\n hourFormat: 'auto' | '12' | '24' = 'auto';\n\n /**\n * Controls whether `Intl.RelativeTimeFormat` always shows numeric output\n * (`\"always\"`) or uses natural language when possible (`\"auto\"`, e.g. \"yesterday\").\n * Only used when `relative` is true.\n * @attr numeric\n */\n @property()\n numeric: 'always' | 'auto' = 'auto';\n\n /**\n * When true, displays a relative time string such as \"2 hours ago\" or \"in 3 days\"\n * using `Intl.RelativeTimeFormat`.\n *\n * **Important:** The relative time string is computed once at render time and does\n * not auto-update. If the displayed text must stay current (e.g. a live \"X minutes\n * ago\" counter), the consuming component must re-set the `date` property on its own\n * interval to trigger a re-render.\n * @attr relative\n */\n @property({ type: Boolean })\n relative = false;\n\n // ─── Private helpers ───\n\n private _getDate(): Date {\n const val = this.date;\n if (val === '') return new Date();\n if (val instanceof Date) {\n return isNaN(val.getTime()) ? new Date() : val;\n }\n if (typeof val === 'number') {\n const d = new Date(val);\n return isNaN(d.getTime()) ? new Date() : d;\n }\n // Numeric strings (e.g. Unix timestamps set via HTML attribute) must be\n // converted to a number before passing to Date — new Date(\"1718462400000\")\n // returns Invalid Date in most JS engines.\n const asNumber = Number(val);\n if (!isNaN(asNumber)) {\n const d = new Date(asNumber);\n return isNaN(d.getTime()) ? new Date() : d;\n }\n const parsed = new Date(val);\n return isNaN(parsed.getTime()) ? new Date() : parsed;\n }\n\n private _getLocale(): string {\n if (this.lang) return this.lang;\n return document.documentElement.lang || navigator.language || 'en';\n }\n\n private _getHour12(): boolean | undefined {\n if (this.hourFormat === '12') return true;\n if (this.hourFormat === '24') return false;\n return undefined;\n }\n\n /**\n * Returns the `datetime` attribute value. When `timeZone` is set, returns a\n * timezone-offset ISO string (e.g. `2024-09-20T05:00:00-04:00`) so that\n * assistive technology reads the same local time as the visual display.\n */\n private _getDatetimeAttr(date: Date): string {\n if (!this.timeZone) return date.toISOString();\n try {\n const fmtOpts: Intl.DateTimeFormatOptions = {\n timeZone: this.timeZone,\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n hour12: false,\n };\n const reduceParts = (parts: Intl.DateTimeFormatPart[]) =>\n parts.reduce<Record<string, string>>((acc, p) => {\n if (p.type !== 'literal') acc[p.type] = p.value;\n return acc;\n }, {});\n\n const tzParts = reduceParts(new Intl.DateTimeFormat('en-CA', fmtOpts).formatToParts(date));\n const utcParts = reduceParts(\n new Intl.DateTimeFormat('en-CA', { ...fmtOpts, timeZone: 'UTC' }).formatToParts(date),\n );\n\n const toMs = (p: Record<string, string>) =>\n Date.UTC(\n parseInt(p['year'] ?? '0'),\n parseInt(p['month'] ?? '1') - 1,\n parseInt(p['day'] ?? '1'),\n parseInt(p['hour'] === '24' ? '0' : (p['hour'] ?? '0')),\n parseInt(p['minute'] ?? '0'),\n parseInt(p['second'] ?? '0'),\n );\n\n const offsetMin = Math.round((toMs(tzParts) - toMs(utcParts)) / 60000);\n const sign = offsetMin >= 0 ? '+' : '-';\n const absMin = Math.abs(offsetMin);\n const hh = String(Math.floor(absMin / 60)).padStart(2, '0');\n const mm = String(absMin % 60).padStart(2, '0');\n const h = tzParts['hour'] === '24' ? '00' : (tzParts['hour'] ?? '00');\n return `${tzParts['year']}-${tzParts['month']}-${tzParts['day']}T${h}:${tzParts['minute']}:${tzParts['second']}${sign}${hh}:${mm}`;\n } catch {\n return date.toISOString();\n }\n }\n\n private _formatRelative(date: Date): string {\n const now = new Date();\n const diffMs = date.getTime() - now.getTime();\n const diffSec = Math.round(diffMs / 1000);\n const absSec = Math.abs(diffSec);\n const diffMin = Math.round(diffSec / 60);\n const absMin = Math.abs(diffMin);\n const diffHour = Math.round(diffSec / 3600);\n const absHour = Math.abs(diffHour);\n const diffDay = Math.round(diffSec / 86400);\n const absDay = Math.abs(diffDay);\n const diffMonth = Math.round(diffDay / 30);\n const absMonth = Math.abs(diffMonth);\n const diffYear = Math.round(diffDay / 365);\n\n const locale = this._getLocale();\n const cacheKey = `${locale}|${this.numeric}`;\n let rtf = HelixFormatDate._rtfCache.get(cacheKey);\n if (!rtf) {\n try {\n rtf = new Intl.RelativeTimeFormat(locale, { numeric: this.numeric });\n HelixFormatDate._rtfCache.set(cacheKey, rtf);\n } catch {\n return '';\n }\n }\n\n try {\n if (absSec < 60) return rtf.format(diffSec, 'second');\n if (absMin < 60) return rtf.format(diffMin, 'minute');\n if (absHour < 24) return rtf.format(diffHour, 'hour');\n if (absDay < 30) return rtf.format(diffDay, 'day');\n if (absMonth < 12) return rtf.format(diffMonth, 'month');\n return rtf.format(diffYear, 'year');\n } catch {\n return '';\n }\n }\n\n private _formatAbsolute(date: Date): string {\n const options: Intl.DateTimeFormatOptions = {};\n\n if (this.month !== undefined) options.month = this.month;\n if (this.year !== undefined) options.year = this.year;\n if (this.day !== undefined) options.day = this.day;\n if (this.weekday !== undefined) options.weekday = this.weekday;\n if (this.hour !== undefined) options.hour = this.hour;\n if (this.minute !== undefined) options.minute = this.minute;\n if (this.second !== undefined) options.second = this.second;\n if (this.timeZoneName !== undefined) options.timeZoneName = this.timeZoneName;\n if (this.timeZone !== undefined) options.timeZone = this.timeZone;\n\n const hour12 = this._getHour12();\n if (hour12 !== undefined) options.hour12 = hour12;\n\n // Fall back to a sensible default when no format options are specified\n if (Object.keys(options).length === 0) {\n options.year = 'numeric';\n options.month = 'long';\n options.day = 'numeric';\n }\n\n const locale = this._getLocale();\n const cacheKey = `${locale}|${JSON.stringify(options)}`;\n let dtf = HelixFormatDate._dtfCache.get(cacheKey);\n if (!dtf) {\n try {\n dtf = new Intl.DateTimeFormat(locale, options);\n HelixFormatDate._dtfCache.set(cacheKey, dtf);\n } catch {\n // Invalid options (e.g. unknown timeZone) — return empty string\n return '';\n }\n }\n\n try {\n return dtf.format(date);\n } catch {\n return '';\n }\n }\n\n // ─── Render ───\n\n override render() {\n const date = this._getDate();\n const datetimeAttr = this._getDatetimeAttr(date);\n const formattedText = this.relative ? this._formatRelative(date) : this._formatAbsolute(date);\n\n return html`<time part=\"base\" datetime=${datetimeAttr}>${formattedText}</time>`;\n }\n}\n\nexport type HxFormatDate = HelixFormatDate;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-format-date': HelixFormatDate;\n }\n}\n"],"names":["helixFormatDateStyles","css","HelixFormatDate","LitElement","val","d","asNumber","parsed","date","fmtOpts","reduceParts","parts","acc","p","tzParts","utcParts","toMs","offsetMin","sign","absMin","hh","mm","h","now","diffMs","diffSec","absSec","diffMin","diffHour","absHour","diffDay","absDay","diffMonth","absMonth","diffYear","locale","cacheKey","rtf","options","hour12","dtf","datetimeAttr","formattedText","html","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/hx-grid-Dgo7fnWu.js ADDED Viewed

@@ -0,0 +1,118 @@
+import { css as m, LitElement as c, html as d } from "lit";
+import { property as s, customElement as g } from "lit/decorators.js";
+import { t as y } from "./lit-Dpo7RLp4.js";
+const f = m`
+  :host {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+  }
+`, v = m`
+  :host {
+    display: block;
+    min-width: 0;
+    min-height: 0;
+  }
+`;
+var x = Object.defineProperty, G = Object.getOwnPropertyDescriptor, e = (t, l, a, p) => {
+  for (var o = p > 1 ? void 0 : p ? G(l, a) : l, n = t.length - 1, u; n >= 0; n--)
+    (u = t[n]) && (o = (p ? u(l, a, o) : u(o)) || o);
+  return p && o && x(l, a, o), o;
+};
+const h = {
+  none: "0",
+  xs: "var(--hx-space-1, 0.25rem)",
+  sm: "var(--hx-space-2, 0.5rem)",
+  md: "var(--hx-space-4, 1rem)",
+  lg: "var(--hx-space-6, 1.5rem)",
+  xl: "var(--hx-space-8, 2rem)"
+};
+let r = class extends c {
+  constructor() {
+    super(...arguments), this.columns = 1, this.gap = "md", this.align = "stretch", this.justify = "stretch";
+  }
+  _gridTemplateColumns() {
+    const t = this.columns;
+    return typeof t == "number" || /^\d+$/.test(String(t)) ? `var(--hx-grid-columns, repeat(${t}, 1fr))` : `var(--hx-grid-columns, ${t})`;
+  }
+  _resolveGap(t) {
+    return h[t] ?? h.md;
+  }
+  _computedRowGap() {
+    return this.rowGap ? `var(--hx-grid-row-gap, ${this._resolveGap(this.rowGap)})` : `var(--hx-grid-row-gap, var(--hx-grid-gap, ${this._resolveGap(this.gap)}))`;
+  }
+  _computedColumnGap() {
+    return this.columnGap ? `var(--hx-grid-column-gap, ${this._resolveGap(this.columnGap)})` : `var(--hx-grid-column-gap, var(--hx-grid-gap, ${this._resolveGap(this.gap)}))`;
+  }
+  _baseStyle() {
+    return [
+      "display: grid",
+      `grid-template-columns: ${this._gridTemplateColumns()}`,
+      `row-gap: ${this._computedRowGap()}`,
+      `column-gap: ${this._computedColumnGap()}`,
+      `align-items: ${this.align}`,
+      `justify-items: ${this.justify}`
+    ].join("; ");
+  }
+  render() {
+    return d`
+      <div part="base" role="presentation" style=${this._baseStyle()}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+r.styles = [y, f];
+e([
+  s({ reflect: !0 })
+], r.prototype, "columns", 2);
+e([
+  s({ reflect: !0 })
+], r.prototype, "gap", 2);
+e([
+  s({ attribute: "row-gap", reflect: !0 })
+], r.prototype, "rowGap", 2);
+e([
+  s({ attribute: "column-gap", reflect: !0 })
+], r.prototype, "columnGap", 2);
+e([
+  s({ reflect: !0 })
+], r.prototype, "align", 2);
+e([
+  s({ reflect: !0 })
+], r.prototype, "justify", 2);
+r = e([
+  g("hx-grid")
+], r);
+let i = class extends c {
+  updated(t) {
+    (t.has("column") || t.has("row") || t.has("span")) && this._applyHostGridStyles();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._applyHostGridStyles();
+  }
+  _applyHostGridStyles() {
+    this.column ? this.style.gridColumn = this.column : this.span !== void 0 ? this.style.gridColumn = `span ${this.span}` : this.style.gridColumn = "", this.row ? this.style.gridRow = this.row : this.style.gridRow = "";
+  }
+  render() {
+    return d`<slot></slot>`;
+  }
+};
+i.styles = [y, v];
+e([
+  s({ reflect: !0 })
+], i.prototype, "column", 2);
+e([
+  s({ reflect: !0 })
+], i.prototype, "row", 2);
+e([
+  s({ type: Number, reflect: !0 })
+], i.prototype, "span", 2);
+i = e([
+  g("hx-grid-item")
+], i);
+export {
+  r as H,
+  i as a
+};
+//# sourceMappingURL=hx-grid-Dgo7fnWu.js.map

package/dist/shared/hx-grid-Dgo7fnWu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-grid-Dgo7fnWu.js","sources":["../../src/components/hx-grid/hx-grid.styles.ts","../../src/components/hx-grid/hx-grid.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixGridStyles = css`\n :host {\n display: block;\n box-sizing: border-box;\n width: 100%;\n }\n`;\n\nexport const helixGridItemStyles = css`\n :host {\n display: block;\n min-width: 0;\n min-height: 0;\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixGridStyles, helixGridItemStyles } from './hx-grid.styles.js';\n\ntype GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\ntype AlignValue = 'start' | 'center' | 'end' | 'stretch';\ntype JustifyValue = 'start' | 'center' | 'end' | 'stretch';\n\nconst GAP_TOKENS: Record<GapSize, string> = {\n none: '0',\n xs: 'var(--hx-space-1, 0.25rem)',\n sm: 'var(--hx-space-2, 0.5rem)',\n md: 'var(--hx-space-4, 1rem)',\n lg: 'var(--hx-space-6, 1.5rem)',\n xl: 'var(--hx-space-8, 2rem)',\n};\n\n/**\n * A CSS Grid layout wrapper with design-token-based column and gap system.\n *\n * @summary CSS Grid layout primitive for building responsive grid layouts.\n *\n * @tag hx-grid\n *\n * @slot - Default slot for grid content (use `hx-grid-item` for precise placement).\n *\n * @csspart base - The grid container element.\n *\n * @cssprop [--hx-grid-columns] - Override the computed grid-template-columns.\n * @cssprop [--hx-grid-gap] - Override the computed gap.\n * @cssprop [--hx-grid-row-gap] - Override the computed row-gap.\n * @cssprop [--hx-grid-column-gap] - Override the computed column-gap.\n */\n@customElement('hx-grid')\nexport class HelixGrid extends LitElement {\n static override styles = [tokenStyles, helixGridStyles];\n\n /**\n * Number of equal columns (`repeat(N, 1fr)`) or a CSS grid-template-columns string.\n * @attr columns\n */\n @property({ reflect: true })\n columns: number | string = 1;\n\n /**\n * Gap size applied to both row and column gaps.\n * @attr gap\n */\n @property({ reflect: true })\n gap: GapSize = 'md';\n\n /**\n * Row gap override. When set, takes precedence over `gap` for row spacing.\n * @attr row-gap\n */\n @property({ attribute: 'row-gap', reflect: true })\n rowGap: GapSize | undefined;\n\n /**\n * Column gap override. When set, takes precedence over `gap` for column spacing.\n * @attr column-gap\n */\n @property({ attribute: 'column-gap', reflect: true })\n columnGap: GapSize | undefined;\n\n /**\n * Aligns grid items along the block axis (align-items).\n * @attr align\n */\n @property({ reflect: true })\n align: AlignValue = 'stretch';\n\n /**\n * Justifies grid items along the inline axis (justify-items).\n * @attr justify\n */\n @property({ reflect: true })\n justify: JustifyValue = 'stretch';\n\n private _gridTemplateColumns(): string {\n const cols = this.columns;\n if (typeof cols === 'number' || /^\\d+$/.test(String(cols))) {\n return `var(--hx-grid-columns, repeat(${cols}, 1fr))`;\n }\n return `var(--hx-grid-columns, ${cols})`;\n }\n\n private _resolveGap(size: GapSize): string {\n return GAP_TOKENS[size] ?? GAP_TOKENS.md;\n }\n\n private _computedRowGap(): string {\n if (this.rowGap) {\n return `var(--hx-grid-row-gap, ${this._resolveGap(this.rowGap)})`;\n }\n return `var(--hx-grid-row-gap, var(--hx-grid-gap, ${this._resolveGap(this.gap)}))`;\n }\n\n private _computedColumnGap(): string {\n if (this.columnGap) {\n return `var(--hx-grid-column-gap, ${this._resolveGap(this.columnGap)})`;\n }\n return `var(--hx-grid-column-gap, var(--hx-grid-gap, ${this._resolveGap(this.gap)}))`;\n }\n\n private _baseStyle(): string {\n return [\n 'display: grid',\n `grid-template-columns: ${this._gridTemplateColumns()}`,\n `row-gap: ${this._computedRowGap()}`,\n `column-gap: ${this._computedColumnGap()}`,\n `align-items: ${this.align}`,\n `justify-items: ${this.justify}`,\n ].join('; ');\n }\n\n override render() {\n return html`\n <div part=\"base\" role=\"presentation\" style=${this._baseStyle()}>\n <slot></slot>\n </div>\n `;\n }\n}\n\n/**\n * Optional companion element for precise grid item placement.\n * Applies grid-column and grid-row directly to the host element\n * so it participates correctly in the parent CSS grid layout.\n *\n * @summary Grid item with explicit column/row placement.\n *\n * @tag hx-grid-item\n *\n * @slot - Default slot for item content.\n */\n@customElement('hx-grid-item')\nexport class HelixGridItem extends LitElement {\n static override styles = [tokenStyles, helixGridItemStyles];\n\n /**\n * CSS grid-column value (e.g., \"1 / 3\", \"span 2\").\n * @attr column\n */\n @property({ reflect: true })\n column: string | undefined;\n\n /**\n * CSS grid-row value (e.g., \"1 / 2\").\n * @attr row\n */\n @property({ reflect: true })\n row: string | undefined;\n\n /**\n * Column span shorthand — equivalent to setting `column: \"span N\"`.\n * @attr span\n */\n @property({ type: Number, reflect: true })\n span: number | undefined;\n\n override updated(changed: Map<string, unknown>): void {\n if (changed.has('column') || changed.has('row') || changed.has('span')) {\n this._applyHostGridStyles();\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._applyHostGridStyles();\n }\n\n private _applyHostGridStyles(): void {\n if (this.column) {\n this.style.gridColumn = this.column;\n } else if (this.span !== undefined) {\n this.style.gridColumn = `span ${this.span}`;\n } else {\n this.style.gridColumn = '';\n }\n if (this.row) {\n this.style.gridRow = this.row;\n } else {\n this.style.gridRow = '';\n }\n }\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-grid': HelixGrid;\n 'hx-grid-item': HelixGridItem;\n }\n}\n"],"names":["helixGridStyles","css","helixGridItemStyles","GAP_TOKENS","HelixGrid","LitElement","cols","size","html","tokenStyles","__decorateClass","property","customElement","HelixGridItem","changed"],"mappings":"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"}

package/dist/shared/hx-help-text-C3WCP11-.js ADDED Viewed

@@ -0,0 +1,135 @@
+import { css as p, html as n, LitElement as v, nothing as c } from "lit";
+import { property as f, customElement as u } from "lit/decorators.js";
+import { classMap as d } from "lit/directives/class-map.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import { t as m } from "./lit-Dpo7RLp4.js";
+const g = p`
+  :host {
+    display: block;
+  }
+  .help-text {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--hx-help-text-icon-gap, 0.375rem);
+    font-family: var(--hx-help-text-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));
+    font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));
+    line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));
+    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #6b7280));
+    margin: 0;
+  }
+  .help-text__icon {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+  }
+  .help-text__text {
+    min-width: 0;
+  }
+  /* ─── Variant: default ─── */
+  .help-text--default {
+    --hx-help-text-color: var(--hx-color-neutral-500, #6b7280);
+  }
+  /* ─── Variant: error ─── */
+  .help-text--error {
+    --hx-help-text-color: var(--hx-color-error-600, #dc2626);
+  }
+  /* ─── Variant: warning ─── */
+  .help-text--warning {
+    --hx-help-text-color: var(--hx-color-warning-700, #b45309);
+  }
+  /* ─── Variant: success ─── */
+  .help-text--success {
+    --hx-help-text-color: var(--hx-color-success-700, #15803d);
+  }
+`;
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, x = (l, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? y(e, o) : e, s = l.length - 1, a; s >= 0; s--)
+    (a = l[s]) && (t = (r ? a(e, o, t) : a(t)) || t);
+  return r && t && w(e, o, t), t;
+};
+const k = n`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
+  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" fill="none" />
+  <line
+    x1="8"
+    y1="4.5"
+    x2="8"
+    y2="8.5"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <circle cx="8" cy="11" r="0.75" fill="currentColor" />
+</svg>`, _ = n`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
+  <path
+    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"
+    stroke="currentColor"
+    stroke-width="1.25"
+    fill="none"
+  />
+  <line
+    x1="8"
+    y1="6"
+    x2="8"
+    y2="9"
+    stroke="currentColor"
+    stroke-width="1.25"
+    stroke-linecap="round"
+  />
+  <circle cx="8" cy="11" r="0.625" fill="currentColor" />
+</svg>`, C = n`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
+  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" fill="none" />
+  <path
+    d="M5.25 8.25l1.75 1.75 3.75-3.75"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+</svg>`, b = {
+  default: c,
+  error: k,
+  warning: _,
+  success: C
+};
+let i = class extends v {
+  constructor() {
+    super(...arguments), this.variant = "default";
+  }
+  render() {
+    const l = {
+      "help-text": !0,
+      [`help-text--${this.variant}`]: !0
+    }, e = b[this.variant], o = this.variant === "error" ? "alert" : void 0, r = this.variant === "warning" || this.variant === "success" ? "polite" : void 0;
+    return n`<span
+      part="base"
+      class=${d(l)}
+      role=${h(o)}
+      aria-live=${h(r)}
+      >${e !== c ? n`<span part="icon" class="help-text__icon">${e}</span>` : c}<span part="text" class="help-text__text"><slot></slot></span>
+    </span>`;
+  }
+};
+i.styles = [m, g];
+x([
+  f({ type: String, reflect: !0 })
+], i.prototype, "variant", 2);
+i = x([
+  u("hx-help-text")
+], i);
+export {
+  i as H
+};
+//# sourceMappingURL=hx-help-text-C3WCP11-.js.map