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

@helixui/library 1.0.1 → 1.1.2

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

package/dist/shared/hx-form-BFv_N1dm.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"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-format-date-BsVr8gpD.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-format-date-BsVr8gpD.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-BsDBCTbt.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-grid-BsDBCTbt.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-icon--xsJztDh.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-icon--xsJztDh.js","sources":["../../src/components/hx-icon/hx-icon.styles.ts","../../src/components/hx-icon/hx-icon.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconStyles = css`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* vertical-align: middle ensures the icon aligns to the visual centre of\n adjacent inline text rather than the text baseline. */\n vertical-align: middle;\n /* overflow: hidden prevents malformed or oversized icons from painting\n outside the component boundary. The inner SVG may still set\n overflow: visible for its own viewBox content. */\n overflow: hidden;\n width: var(--hx-icon-size, var(--hx-size-6, 1.5rem));\n height: var(--hx-icon-size, var(--hx-size-6, 1.5rem));\n color: var(--hx-icon-color, currentColor);\n flex-shrink: 0;\n }\n\n /* ─── Size Variants ───\n Fallback pixel values mirror the design token values at time of writing.\n If token values are updated the fallbacks should be updated to match. */\n\n :host([hx-size='xs']) {\n --hx-icon-size: var(--hx-size-4, 1rem);\n }\n\n :host([hx-size='sm']) {\n --hx-icon-size: var(--hx-size-5, 1.25rem);\n }\n\n :host([hx-size='md']) {\n --hx-icon-size: var(--hx-size-6, 1.5rem);\n }\n\n :host([hx-size='lg']) {\n --hx-icon-size: var(--hx-size-8, 2rem);\n }\n\n :host([hx-size='xl']) {\n --hx-icon-size: var(--hx-size-10, 2.5rem);\n }\n\n /* ─── SVG (sprite mode) ───\n In sprite mode [part=\"svg\"] is an actual <svg> element. The selector\n targets it specifically. In inline mode the part is applied to a <span>\n wrapper — see .icon__inline below. */\n\n svg[part='svg'] {\n width: 100%;\n height: 100%;\n fill: currentColor;\n display: block;\n overflow: visible;\n }\n\n /* ─── Inline SVG wrapper ───\n In inline mode [part=\"svg\"] is a <span> that wraps the fetched SVG.\n The inner <svg> is sized to fill the wrapper. */\n\n .icon__inline {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n }\n\n .icon__inline svg {\n width: 100%;\n height: 100%;\n fill: currentColor;\n display: block;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixIconStyles } from './hx-icon.styles.js';\n\n/**\n * An icon component that supports inline SVG fetching and SVG sprite sheet references.\n * Decorative icons are automatically hidden from assistive technology.\n * When a label is provided the icon is announced as an image with that label.\n *\n * **Render modes:**\n * - **Sprite mode** (recommended for Drupal/SSR): Set `name` and optionally `sprite-url`.\n * Renders an `<svg><use href=\"...#name\">` — works server-side without JavaScript.\n * - **Inline mode**: Set `src` to a URL of a standalone SVG file. The component fetches,\n * sanitizes, and embeds the SVG markup. Requires JavaScript; not server-side renderable.\n * For Drupal/Twig templates use sprite mode to avoid content shift before hydration.\n *\n * @summary SVG icon with sprite and inline fetch modes for healthcare applications.\n *\n * @tag hx-icon\n *\n * @csspart svg - The SVG element rendered in sprite mode, or the inline SVG container\n * in inline mode. In sprite mode this is an `<svg>` element; in inline mode it is a\n * `<span>` element wrapping the fetched SVG. Both expose the same `part` name for\n * consistent external styling via `::part(svg)`.\n *\n * @cssprop [--hx-icon-size=var(--hx-size-6,1.5rem)] - Width and height of the icon.\n * @cssprop [--hx-icon-color=currentColor] - Icon color.\n */\n@customElement('hx-icon')\nexport class HelixIcon extends LitElement {\n static override styles = [tokenStyles, helixIconStyles];\n\n /**\n * Icon name used as the fragment identifier when referencing a sprite sheet.\n * For sprite mode provide the bare symbol id (e.g. `check`). The component\n * will build the full href as `${spriteUrl}#${name}`. If `name` already\n * starts with `#` it is used as-is (inline sprite reference without a base\n * URL).\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * URL of a standalone SVG file to fetch and render inline. Takes precedence\n * over sprite mode when both `src` and `spriteUrl`/`name` are set.\n *\n * **Note:** Inline mode requires browser JavaScript (`fetch` + `DOMParser`).\n * It is not server-side renderable. For Drupal/Twig use sprite mode instead.\n * @attr src\n */\n @property({ type: String })\n src: string | undefined = undefined;\n\n /**\n * Base URL of the SVG sprite sheet. Used together with `name` to construct\n * the `<use>` href: `${spriteUrl}#${name}`.\n * @attr sprite-url\n */\n @property({ type: String, attribute: 'sprite-url' })\n spriteUrl: string | undefined = undefined;\n\n /**\n * Size variant of the icon.\n *\n * Set via the `hx-size` HTML attribute (e.g. `hx-size=\"lg\"`) or via the\n * `size` JavaScript property (e.g. `el.size = 'lg'`). Both are equivalent —\n * the `attribute: 'hx-size'` mapping is used to avoid colliding with the\n * native `<input>` `size` attribute in Drupal attribute-passthrough scenarios.\n * The CEM exposes both the JS property name (`size`) and the HTML attribute\n * name (`hx-size`).\n *\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n /**\n * Accessible label for the icon. When non-empty, `role=\"img\"` and\n * `aria-label` are applied so assistive technology announces the icon.\n * When empty the icon is treated as decorative and `aria-hidden=\"true\"` is\n * applied.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Stores the sanitized inner markup of an externally fetched SVG.\n */\n @state()\n private _inlineSvg = '';\n\n /**\n * Tracks the `src` URL that was last successfully fetched so that we only\n * refetch when it genuinely changes.\n */\n @state()\n private _fetchedSrc: string | undefined = undefined;\n\n /**\n * Monotonically-increasing sequence number. Incremented before each fetch so\n * that stale out-of-order responses can be discarded.\n */\n private _fetchSeq = 0;\n\n // ─── Lifecycle ───\n\n override updated(changed: Map<string, unknown>): void {\n if (changed.has('src') && this.src !== this._fetchedSrc) {\n void this._fetchInlineSvg(this.src);\n }\n }\n\n // ─── Inline SVG Fetch ───\n\n private async _fetchInlineSvg(url: string | undefined): Promise<void> {\n const seq = ++this._fetchSeq;\n\n if (!url) {\n this._inlineSvg = '';\n this._fetchedSrc = undefined;\n return;\n }\n\n // Use module-level cache to avoid duplicate network requests for the same URL.\n // Multiple hx-icon instances sharing the same src will share one in-flight fetch.\n try {\n let pending = _svgCache.get(url);\n if (!pending) {\n pending = fetch(url).then(async (response) => {\n if (!response.ok) {\n _svgCache.delete(url);\n return '';\n }\n return response.text();\n });\n _svgCache.set(url, pending);\n }\n\n const text = await pending;\n if (seq !== this._fetchSeq) return;\n\n if (!text) {\n this._inlineSvg = '';\n this._fetchedSrc = undefined;\n return;\n }\n\n const sanitized = this._sanitizeSvg(text);\n this._inlineSvg = sanitized;\n this._fetchedSrc = url;\n } catch {\n if (seq !== this._fetchSeq) return;\n _svgCache.delete(url);\n this._inlineSvg = '';\n this._fetchedSrc = undefined;\n }\n }\n\n /**\n * Parses the raw SVG text, strips dangerous content (script elements,\n * foreignObject, on* event-handler attributes, javascript:/data: URIs,\n * and style attributes that could carry CSS injection payloads), and\n * returns the outer SVG markup safe for rendering via `unsafeHTML`.\n *\n * Additionally injects `focusable=\"false\"` on the root SVG element to\n * prevent IE11/old-Edge from making the SVG keyboard-focusable, and strips\n * any ARIA attributes from the inner SVG to prevent conflicts with the\n * wrapper's own ARIA semantics.\n */\n private _sanitizeSvg(raw: string): string {\n const parser = new DOMParser();\n const doc = parser.parseFromString(raw, 'image/svg+xml');\n\n const parseError = doc.querySelector('parsererror');\n if (parseError) {\n return '';\n }\n\n const svgEl = doc.querySelector('svg');\n if (!svgEl) {\n return '';\n }\n\n // Remove dangerous embedded elements.\n svgEl.querySelectorAll('script, foreignObject').forEach((s) => {\n s.remove();\n });\n\n // URL-bearing attributes that can carry javascript:/data: payloads.\n const urlAttrs = new Set(['href', 'xlink:href', 'src', 'action', 'formaction']);\n\n // ARIA attributes that may conflict with the wrapper element's own semantics.\n // The wrapper <span part=\"svg\"> owns role/aria-label/aria-hidden — the inner\n // SVG must not duplicate or contradict these.\n const ariaAttrs = new Set(['role', 'aria-label', 'aria-labelledby', 'aria-hidden']);\n\n // Sanitize every element including the root svg.\n const allElements: Element[] = [svgEl, ...Array.from(svgEl.querySelectorAll('*'))];\n allElements.forEach((el) => {\n const attrs = Array.from(el.attributes);\n attrs.forEach((attr) => {\n const attrName = attr.name.toLowerCase();\n // Strip event-handler attributes.\n if (attrName.startsWith('on')) {\n el.removeAttribute(attr.name);\n return;\n }\n // Strip style attributes — CSS can carry injection payloads via\n // url(javascript:...), expression(), or external filter/clip-path references.\n if (attrName === 'style') {\n el.removeAttribute(attr.name);\n return;\n }\n // Strip javascript: and data: URIs from URL-bearing attributes.\n if (urlAttrs.has(attrName)) {\n const val = attr.value.replace(/\\s/g, '').toLowerCase();\n if (val.startsWith('javascript:') || val.startsWith('data:')) {\n el.removeAttribute(attr.name);\n }\n }\n });\n });\n\n // Strip ARIA attributes from the root SVG only — they conflict with the\n // wrapper element's ARIA. Child elements' ARIA is left intact.\n ariaAttrs.forEach((a) => svgEl.removeAttribute(a));\n\n // Inject focusable=\"false\" so IE11/old-Edge do not tab into the SVG.\n svgEl.setAttribute('focusable', 'false');\n\n return svgEl.outerHTML;\n }\n\n // ─── Render Helpers ───\n\n /**\n * Returns the href used in the `<use>` element for sprite mode.\n * If `name` already begins with `#` it is treated as an inline reference.\n */\n private _spriteHref(): string {\n const n = this.name;\n if (n.startsWith('#')) {\n return n;\n }\n const base = this.spriteUrl ?? '';\n return base ? `${base}#${n}` : `#${n}`;\n }\n\n private _renderSprite() {\n const isDecorative = !this.label.trim();\n\n return html`\n <svg\n part=\"svg\"\n class=\"icon__svg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=${isDecorative ? nothing : 'img'}\n aria-label=${isDecorative ? nothing : this.label}\n aria-hidden=${isDecorative ? 'true' : nothing}\n focusable=\"false\"\n >\n ${isDecorative ? nothing : html`<title>${this.label}</title>`}\n <use href=${this._spriteHref()}></use>\n </svg>\n `;\n }\n\n private _renderInline() {\n if (!this._inlineSvg) {\n return nothing;\n }\n\n const isDecorative = !this.label.trim();\n\n // The fetched SVG is rendered inside a wrapper span that carries the\n // csspart and ARIA semantics. The inner SVG from unsafeHTML fills the\n // container via the `.icon__inline svg` CSS rule. ARIA attributes and\n // focusable=\"false\" are injected into the inner SVG by _sanitizeSvg.\n return html`\n <span\n part=\"svg\"\n class=\"icon__inline\"\n role=${isDecorative ? nothing : 'img'}\n aria-label=${isDecorative ? nothing : this.label}\n aria-hidden=${isDecorative ? 'true' : nothing}\n >\n ${unsafeHTML(this._inlineSvg)}\n </span>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n // Inline fetch mode takes precedence when src is a non-empty string.\n if (typeof this.src === 'string' && this.src.trim().length > 0) {\n return this._renderInline();\n }\n\n // Sprite mode: requires at least a name.\n if (this.name) {\n return this._renderSprite();\n }\n\n return nothing;\n }\n}\n\n/**\n * Module-level SVG fetch cache. Shared across all `hx-icon` instances so that\n * multiple icons sharing the same `src` URL issue only one network request.\n * The cache stores in-flight `Promise<string>` values — resolved entries remain\n * cached for the lifetime of the page to prevent redundant re-fetches.\n */\nconst _svgCache = new Map<string, Promise<string>>();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-icon': HelixIcon;\n }\n}\n"],"names":["helixIconStyles","css","HelixIcon","LitElement","changed","url","seq","pending","_svgCache","response","text","sanitized","raw","doc","svgEl","s","urlAttrs","ariaAttrs","el","attr","attrName","val","a","n","base","isDecorative","html","nothing","unsafeHTML","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-image-xyb_tHCR.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-image-xyb_tHCR.js","sources":["../../src/components/hx-image/hx-image.styles.ts","../../src/components/hx-image/hx-image.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixImageStyles = css`\n :host {\n display: block;\n }\n\n .image__container {\n position: relative;\n display: block;\n overflow: hidden;\n margin: 0;\n padding: 0;\n aspect-ratio: var(--_ratio, var(--hx-image-aspect-ratio));\n border-radius: var(--_radius, var(--hx-image-border-radius, 0));\n }\n\n .image__container--error {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--hx-image-fallback-min-height, 3rem);\n background-color: var(--hx-color-neutral-100, #f3f4f6);\n color: var(--hx-color-neutral-500, #6b7280);\n }\n\n .image__img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: var(--_fit, var(--hx-image-object-fit, cover));\n }\n\n .image__caption {\n display: none;\n padding: var(--hx-image-caption-padding, 0.5rem 0 0);\n color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #4b5563));\n font-size: var(--hx-image-caption-font-size, 0.875rem);\n }\n\n .image__caption--visible {\n display: block;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixImageStyles } from './hx-image.styles.js';\n\n/**\n * An accessible image wrapper with lazy loading, fallback support, aspect ratio control,\n * responsive image (srcset/sizes) support, and optional caption.\n *\n * @summary Accessible image wrapper with lazy loading, fallback, srcset, and aspect ratio control.\n *\n * @tag hx-image\n *\n * @slot fallback - Custom content shown when the image fails to load and no fallback-src is set.\n * @slot caption - Optional caption content rendered in a figcaption element below the image.\n *\n * @csspart base - The inner img element.\n * @csspart caption - The figcaption element (visible only when caption content is present).\n *\n * @cssprop [--hx-image-object-fit] - Controls how the image fills its container. Maps to object-fit.\n * @cssprop [--hx-image-border-radius] - Border radius of the image. Overridden by the `rounded` prop.\n * @cssprop [--hx-image-aspect-ratio] - Aspect ratio of the image container. Overridden by the `ratio` prop.\n * @cssprop [--hx-image-caption-color] - Text color for the caption.\n * @cssprop [--hx-image-caption-font-size] - Font size for the caption.\n * @cssprop [--hx-image-caption-padding] - Padding for the caption.\n * @cssprop [--hx-image-fallback-min-height] - Minimum height of the error/fallback container.\n *\n * @fires hx-load - Dispatched when the image has successfully loaded.\n * @fires hx-error - Dispatched when the image fails to load (including after fallback-src also fails).\n */\n@customElement('hx-image')\nexport class HelixImage extends LitElement {\n static override styles = [tokenStyles, helixImageStyles];\n\n /**\n * The URL of the image to display.\n * @attr src\n */\n @property({ type: String, reflect: true })\n src = '';\n\n /**\n * Accessible text description of the image.\n * Required for informative images. Use the `decorative` prop for decorative images\n * instead of setting this to an empty string — explicit decorative intent is preferred.\n * @attr alt\n */\n @property({ type: String, reflect: true })\n alt: string | undefined = undefined;\n\n /**\n * Marks the image as decorative (hidden from screen readers).\n * Use this instead of `alt=\"\"` to make decorative intent explicit in markup.\n * When set, the inner img receives `alt=\"\"` and `role=\"presentation\"`.\n * @attr decorative\n */\n @property({ type: Boolean, reflect: true })\n decorative = false;\n\n /**\n * Width of the image element.\n * @attr width\n */\n @property({ reflect: true })\n width: number | string | undefined = undefined;\n\n /**\n * Height of the image element.\n * @attr height\n */\n @property({ reflect: true })\n height: number | string | undefined = undefined;\n\n /**\n * Loading strategy for the image.\n * @attr loading\n */\n @property({ type: String, reflect: true })\n loading: 'lazy' | 'eager' = 'lazy';\n\n /**\n * How the image should be resized to fit its container.\n * Maps to CSS object-fit.\n * @attr fit\n */\n @property({ type: String, reflect: true })\n fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | undefined = undefined;\n\n /**\n * CSS aspect-ratio value (e.g. \"16/9\", \"1\", \"4/3\").\n * When set, the container maintains this ratio.\n * @attr ratio\n */\n @property({ type: String, reflect: true })\n ratio: string | undefined = undefined;\n\n /**\n * Border radius for the image.\n * Boolean attribute (or `true`) applies the theme's medium radius token.\n * A string value is used directly as a CSS border-radius value (e.g. \"1rem\", \"50%\").\n *\n * Note: When set as an HTML attribute (`<hx-image rounded>`), Lit receives the value as\n * an empty string (`''`). When set programmatically (`el.rounded = true`), it receives\n * a boolean. Both forms apply the theme radius token.\n *\n * @attr rounded\n */\n @property({ type: String, reflect: true })\n rounded: boolean | string | undefined = undefined;\n\n /**\n * Fallback image URL shown when the primary src fails to load.\n * @attr fallback-src\n */\n @property({ type: String, attribute: 'fallback-src', reflect: true })\n fallbackSrc: string | undefined = undefined;\n\n /**\n * A comma-separated list of image candidates for responsive images.\n * Passed directly to the inner img's srcset attribute.\n * Enables Drupal responsive image styles and browser-native image selection.\n * @attr srcset\n */\n @property({ type: String, reflect: true })\n srcset: string | undefined = undefined;\n\n /**\n * Media conditions indicating which image size to use alongside srcset.\n * Works in conjunction with the `srcset` attribute.\n * @attr sizes\n */\n @property({ type: String, reflect: true })\n sizes: string | undefined = undefined;\n\n @state()\n private _error = false;\n\n @state()\n private _usedFallbackSrc = false;\n\n @state()\n private _hasCaptionSlot = false;\n\n private _handleLoad(): void {\n this.dispatchEvent(new CustomEvent('hx-load', { bubbles: true, composed: true }));\n }\n\n private _handleError(): void {\n if (!this._error && this.fallbackSrc && !this._usedFallbackSrc) {\n // Try the fallback-src before showing the fallback slot\n this._usedFallbackSrc = true;\n return;\n }\n this._error = true;\n this.dispatchEvent(new CustomEvent('hx-error', { bubbles: true, composed: true }));\n }\n\n private _onCaptionSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasCaptionSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _computeBorderRadius(): string | undefined {\n if (this.rounded === true || this.rounded === '' || this.rounded === 'true') {\n return 'var(--hx-border-radius-md, 0.375rem)';\n }\n if (typeof this.rounded === 'string' && this.rounded.length > 0 && this.rounded !== 'false') {\n return this.rounded;\n }\n return undefined;\n }\n\n private _currentSrc(): string {\n if (this._usedFallbackSrc && this.fallbackSrc) {\n return this.fallbackSrc;\n }\n return this.src;\n }\n\n override render() {\n const isDecorative = this.decorative || this.alt === '';\n const altText = isDecorative ? '' : (this.alt ?? '');\n const borderRadius = this._computeBorderRadius();\n const showCaption = this._hasCaptionSlot;\n\n const containerStyles = {\n ...(this.ratio ? { '--_ratio': this.ratio } : {}),\n ...(this.fit ? { '--_fit': this.fit } : {}),\n ...(borderRadius ? { '--_radius': borderRadius } : {}),\n ...(this.width != null\n ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }\n : {}),\n ...(this.height != null\n ? { height: typeof this.height === 'number' ? `${this.height}px` : this.height }\n : {}),\n };\n\n if (this._error) {\n return html`\n <figure\n class=\"image__container image__container--error\"\n style=${styleMap(containerStyles)}\n role=\"alert\"\n aria-live=\"polite\"\n >\n <slot name=\"fallback\"></slot>\n </figure>\n `;\n }\n\n return html`\n <figure class=\"image__container\" style=${styleMap(containerStyles)}>\n <img\n part=\"base\"\n class=\"image__img\"\n src=${this._currentSrc() || nothing}\n alt=${altText}\n role=${isDecorative ? 'presentation' : nothing}\n loading=${this.loading}\n width=${this.width != null ? this.width : nothing}\n height=${this.height != null ? this.height : nothing}\n srcset=${this.srcset ?? nothing}\n sizes=${this.sizes ?? nothing}\n @load=${this._handleLoad}\n @error=${this._handleError}\n />\n <figcaption\n part=\"caption\"\n class=${classMap({ image__caption: true, 'image__caption--visible': showCaption })}\n >\n <slot name=\"caption\" @slotchange=${this._onCaptionSlotChange}></slot>\n </figcaption>\n </figure>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-image': HelixImage;\n }\n}\n"],"names":["helixImageStyles","css","HelixImage","LitElement","e","slot","isDecorative","altText","borderRadius","showCaption","containerStyles","html","styleMap","nothing","classMap","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-link-DfNy_UU8.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-link-DfNy_UU8.js","sources":["../../src/components/hx-link/hx-link.styles.ts","../../src/components/hx-link/hx-link.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixLinkStyles = css`\n :host {\n display: inline;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n /* --- Base Link --- */\n\n .link {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n color: var(--hx-link-color, var(--hx-color-primary-500, #2563eb));\n font-family: var(--hx-link-font-family, var(--hx-font-family-sans, inherit));\n font-size: inherit;\n line-height: inherit;\n text-decoration: var(--hx-link-text-decoration, underline);\n text-underline-offset: var(--hx-link-underline-offset, 2px);\n cursor: pointer;\n outline: 0;\n transition:\n color var(--hx-transition-fast, 150ms ease),\n text-decoration-color var(--hx-transition-fast, 150ms ease);\n }\n\n .link:hover {\n color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));\n text-decoration: var(--hx-link-text-decoration-hover, underline);\n }\n\n .link:active {\n color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e40af));\n }\n\n .link:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-link-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.125rem);\n }\n\n /* --- Variant: subtle --- */\n\n .link--subtle {\n color: var(--hx-link-color-subtle, var(--hx-color-neutral-600, #475569));\n text-decoration: none;\n }\n\n .link--subtle:hover {\n color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));\n text-decoration: underline;\n }\n\n /* --- Variant: danger --- */\n\n .link--danger {\n color: var(--hx-link-color-danger, var(--hx-color-error-text, #b91c1c));\n }\n\n .link--danger:hover {\n color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #b91c1c));\n }\n\n /* --- Disabled --- */\n\n .link--disabled {\n color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));\n text-decoration: none;\n pointer-events: none;\n }\n\n /* --- External link icon --- */\n\n .link__external-icon {\n display: inline-flex;\n width: 0.75em;\n height: 0.75em;\n flex-shrink: 0;\n }\n\n /* --- Visually hidden (sr-only) --- */\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n`;\n","import { LitElement, html, nothing, svg } 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 { helixLinkStyles } from './hx-link.styles.js';\n\n/**\n * Variant options for the link component.\n */\nexport type LinkVariant = 'default' | 'subtle' | 'danger';\n\n/**\n * A semantic hyperlink component with accessibility-first design.\n * Renders a native `<a>` element for enabled state and a `<span>` for\n * disabled state with full keyboard and screen reader support.\n *\n * @summary Accessible hyperlink with external-link detection, disabled state,\n * and download support.\n *\n * @tag hx-link\n *\n * @slot - Default slot for link label text or content.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n * the link is clicked and is not disabled.\n *\n * @csspart link - The inner anchor or span element.\n * @csspart external-icon - The external link icon SVG (when target=\"_blank\").\n *\n * @cssprop [--hx-link-color=var(--hx-color-primary-500)] - Default link color.\n * @cssprop [--hx-link-color-hover=var(--hx-color-primary-700)] - Hover color.\n * @cssprop [--hx-link-color-active=var(--hx-color-primary-800)] - Active color.\n * @cssprop [--hx-link-color-disabled=var(--hx-color-neutral-400)] - Disabled color.\n * @cssprop [--hx-link-color-subtle=var(--hx-color-neutral-600)] - Subtle variant color.\n * @cssprop [--hx-link-color-danger=var(--hx-color-error-text)] - Danger variant color.\n * @cssprop [--hx-link-color-danger-hover=var(--hx-color-error-700)] - Danger variant hover color.\n * @cssprop [--hx-link-font-family=var(--hx-font-family-sans)] - Link font family.\n * @cssprop [--hx-link-text-decoration=underline] - Link text decoration.\n * @cssprop [--hx-link-text-decoration-hover=underline] - Hover text decoration.\n * @cssprop [--hx-link-underline-offset=2px] - Text underline offset.\n * @cssprop [--hx-link-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n *\n * @note The `:visited` pseudo-class does not work inside Shadow DOM due to\n * browser privacy restrictions. This is a known platform limitation.\n */\n@customElement('hx-link')\nexport class HelixLink extends LitElement {\n static override styles = [tokenStyles, helixLinkStyles];\n\n /**\n * The URL the link points to.\n * @attr href\n */\n @property({ type: String })\n href: string | undefined = undefined;\n\n /**\n * Where to display the linked URL (_self, _blank, etc.).\n * When set to \"_blank\", automatically adds rel=\"noopener noreferrer\"\n * and shows an external-link indicator.\n * @attr target\n */\n @property({ type: String })\n target: string | undefined = undefined;\n\n /**\n * Visual style variant of the link.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: LinkVariant = 'default';\n\n /**\n * Whether the link is disabled. Renders a span instead of an anchor.\n * The disabled span is keyboard-focusable (tabindex=\"0\") and announces\n * as a disabled link to screen readers.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Prompts the user to download the linked URL. When set to a string,\n * the value is used as the suggested filename.\n * @attr download\n */\n @property({ type: String })\n download: string | undefined = undefined;\n\n /**\n * Relationship between the current document and the linked URL.\n * Automatically set to \"noopener noreferrer\" when target=\"_blank\".\n * @attr rel\n */\n @property({ type: String })\n rel: string | undefined = undefined;\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 this.dispatchEvent(\n new CustomEvent('hx-click', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n }),\n );\n }\n\n // --- Render Helpers ---\n\n private _computeRel(): string | undefined {\n if (this.rel) return this.rel;\n if (this.target === '_blank') return 'noopener noreferrer';\n return undefined;\n }\n\n private _renderExternalIcon() {\n if (this.target !== '_blank') return nothing;\n\n return html`\n <svg\n class=\"link__external-icon\"\n part=\"external-icon\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n ${svg`<path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" /><polyline points=\"15 3 21 3 21 9\" /><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />`}\n </svg>\n <span class=\"sr-only\">(opens in new tab)</span>\n `;\n }\n\n // --- Render ---\n\n override render() {\n const classes = {\n link: true,\n [`link--${this.variant}`]: this.variant !== 'default',\n 'link--disabled': this.disabled,\n };\n\n if (this.disabled) {\n return html`\n <span\n part=\"link\"\n class=${classMap(classes)}\n role=\"link\"\n tabindex=\"0\"\n aria-disabled=\"true\"\n @click=${this._handleClick}\n >\n <slot></slot>\n </span>\n `;\n }\n\n return html`\n <a\n part=\"link\"\n class=${classMap(classes)}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n rel=${ifDefined(this._computeRel())}\n download=${ifDefined(this.download)}\n @click=${this._handleClick}\n >\n <slot></slot>\n ${this._renderExternalIcon()}\n </a>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-link': HelixLink;\n }\n}\n"],"names":["helixLinkStyles","css","HelixLink","LitElement","e","nothing","html","svg","classes","classMap","ifDefined","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/hx-list-CdRNgeoP.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-list-CdRNgeoP.js","sources":["../../src/components/hx-list/hx-list.styles.ts","../../src/components/hx-list/hx-list-item.styles.ts","../../src/components/hx-list/hx-list-item.ts","../../src/components/hx-list/hx-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixListStyles = css`\n :host {\n display: block;\n }\n\n .list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--hx-list-gap, 0);\n }\n\n /* ─── Variant: bulleted ─── */\n\n .list--bulleted {\n padding-inline-start: var(--hx-space-6, 1.5rem);\n list-style: disc;\n }\n\n /* ─── Variant: numbered ─── */\n\n .list--numbered {\n padding-inline-start: var(--hx-space-6, 1.5rem);\n list-style: decimal;\n }\n\n /* ─── Variant: interactive ─── */\n\n .list--interactive {\n list-style: none;\n padding: 0;\n }\n\n /* ─── Variant: description ─── */\n\n .list--description {\n padding: 0;\n list-style: none;\n }\n\n /* ─── Dividers ─── */\n\n :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n }\n`;\n","import { css } from 'lit';\n\nexport const helixListItemStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n /* ─── Base list item ─── */\n\n .list-item {\n display: flex;\n align-items: center;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-list-item-padding, var(--hx-space-3, 0.75rem));\n color: var(--hx-list-item-color, var(--hx-color-neutral-900, #0f172a));\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n cursor: default;\n box-sizing: border-box;\n width: 100%;\n }\n\n /* ─── Interactive items — use :host([interactive]) instead of deprecated :host-context() ─── */\n\n :host([interactive]) .list-item {\n cursor: pointer;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n background-color: var(--hx-list-item-bg-hover, var(--hx-color-neutral-50, #f8fafc));\n }\n\n :host([interactive]):focus-visible .list-item {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Selected state ─── */\n\n .list-item--selected {\n background-color: var(--hx-list-item-bg-selected, var(--hx-color-primary-50, #eff6ff));\n color: var(--hx-list-item-color-selected, var(--hx-color-primary-700, #1d4ed8));\n }\n\n /* ─── Disabled state ─── */\n\n .list-item--disabled {\n cursor: not-allowed;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n /* ─── Link mode ─── */\n\n .list-item__link {\n display: flex;\n align-items: center;\n gap: var(--hx-space-3, 0.75rem);\n width: 100%;\n text-decoration: none;\n color: inherit;\n }\n\n .list-item__link:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n /* ─── Slots ─── */\n\n .list-item__prefix,\n .list-item__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .list-item__body {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .list-item__label {\n display: block;\n }\n\n .list-item__description {\n display: block;\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-list-item-description-color, var(--hx-color-neutral-500, #64748b));\n margin-top: var(--hx-space-1, 0.25rem);\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixListItemStyles } from './hx-list-item.styles.js';\n\n/**\n * A rich list item for use inside `hx-list`.\n *\n * @summary Individual list item with optional prefix, suffix, description, link, and disabled/selected states.\n *\n * @tag hx-list-item\n *\n * @slot - Default slot for the item label text.\n * @slot prefix - Icon, avatar, or content rendered before the label.\n * @slot suffix - Icon, badge, or text rendered after the label.\n * @slot description - Secondary descriptive text rendered below the label.\n *\n * @fires {CustomEvent<{item: HelixListItem, value: string | undefined}>} hx-list-item-click -\n * Dispatched when the item is clicked and not disabled.\n *\n * @csspart base - The root item element (li, dt, dd, or wrapper).\n * @csspart prefix - The prefix slot container.\n * @csspart label - The label slot container.\n * @csspart description - The description slot container.\n * @csspart suffix - The suffix slot container.\n *\n * @cssprop [--hx-list-item-padding=var(--hx-space-3)] - Item padding.\n * @cssprop [--hx-list-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-list-item-bg-hover=var(--hx-color-neutral-50)] - Item hover background.\n * @cssprop [--hx-list-item-bg-selected=var(--hx-color-primary-50)] - Selected item background.\n * @cssprop [--hx-list-item-color-selected=var(--hx-color-primary-700)] - Selected item text color.\n * @cssprop [--hx-list-item-description-color=var(--hx-color-neutral-500)] - Description text color.\n */\n@customElement('hx-list-item')\nexport class HelixListItem extends LitElement {\n static override styles = [tokenStyles, helixListItemStyles];\n\n /**\n * Whether the item is disabled. Prevents interaction.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether the item is selected (used in interactive mode).\n * @attr selected\n */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /**\n * When set, renders the item as a link (only in non-interactive variants).\n * @attr href\n */\n @property({ type: String })\n href: string | undefined = undefined;\n\n /**\n * The value associated with this item (used with hx-select).\n * @attr value\n */\n @property({ type: String })\n value: string | undefined = undefined;\n\n /**\n * Set by the parent hx-list to indicate this item is part of an interactive listbox.\n * Controls CSS styling and ARIA role via host attributes.\n * @attr interactive\n */\n @property({ type: Boolean, reflect: true })\n interactive = false;\n\n /**\n * Item type for description list variant. Use 'term' for <dt> and 'definition' for <dd>.\n * @attr type\n */\n @property({ type: String, reflect: true })\n type: 'default' | 'term' | 'definition' = 'default';\n\n override updated(changedProps: Map<string, unknown>): void {\n super.updated(changedProps);\n if (\n changedProps.has('interactive') ||\n changedProps.has('selected') ||\n changedProps.has('disabled')\n ) {\n this._syncHostAria();\n }\n }\n\n /**\n * Syncs ARIA attributes to the host element when in interactive (listbox option) mode.\n * This ensures correct ARIA ownership: ul[role=listbox] > hx-list-item[role=option].\n */\n private _syncHostAria(): void {\n if (this.interactive) {\n this.setAttribute('role', 'option');\n this.setAttribute('aria-selected', String(this.selected));\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n if (!this.disabled) {\n this.setAttribute('tabindex', '0');\n } else {\n this.removeAttribute('tabindex');\n }\n } else {\n this.removeAttribute('role');\n this.removeAttribute('aria-selected');\n this.removeAttribute('aria-disabled');\n this.removeAttribute('tabindex');\n }\n }\n\n private _handleClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n this.dispatchEvent(\n new CustomEvent('hx-list-item-click', {\n bubbles: true,\n composed: true,\n detail: { item: this, value: this.value },\n }),\n );\n }\n\n private _renderContent() {\n return html`\n <span part=\"prefix\" class=\"list-item__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span class=\"list-item__body\">\n <span part=\"label\" class=\"list-item__label\">\n <slot></slot>\n </span>\n <span part=\"description\" class=\"list-item__description\">\n <slot name=\"description\"></slot>\n </span>\n </span>\n <span part=\"suffix\" class=\"list-item__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n `;\n }\n\n override render() {\n // Description list: render as <dt> (term) or <dd> (definition)\n if (this.type === 'term') {\n return html`\n <dt\n part=\"base\"\n class=\"list-item ${this.disabled ? 'list-item--disabled' : ''}\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n ${this._renderContent()}\n </dt>\n `;\n }\n\n if (this.type === 'definition') {\n return html`\n <dd\n part=\"base\"\n class=\"list-item ${this.disabled ? 'list-item--disabled' : ''}\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n ${this._renderContent()}\n </dd>\n `;\n }\n\n // Interactive mode: role is on the host element (ARIA ownership across shadow DOM).\n // Internal <li> uses role=\"presentation\" so AT sees: listbox > option (host).\n if (this.interactive) {\n // In interactive mode, links are not rendered as <a> to avoid\n // invalid ARIA: focusable content inside role=\"option\" is prohibited.\n return html`\n <li\n part=\"base\"\n role=\"presentation\"\n class=\"list-item ${this.selected ? 'list-item--selected' : ''} ${this.disabled\n ? 'list-item--disabled'\n : ''}\"\n @click=${this._handleClick}\n @keydown=${this._handleKeydown}\n >\n ${this._renderContent()}\n </li>\n `;\n }\n\n // Non-interactive with href: render as link\n if (this.href !== undefined && !this.disabled) {\n return html`\n <li\n part=\"base\"\n class=\"list-item\"\n role=\"listitem\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n <a class=\"list-item__link\" href=${ifDefined(this.href)} @click=${this._handleClick}>\n ${this._renderContent()}\n </a>\n </li>\n `;\n }\n\n // Default non-interactive\n return html`\n <li\n part=\"base\"\n class=\"list-item ${this.selected ? 'list-item--selected' : ''} ${this.disabled\n ? 'list-item--disabled'\n : ''}\"\n role=\"listitem\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n @click=${this._handleClick}\n @keydown=${this._handleKeydown}\n >\n ${this._renderContent()}\n </li>\n `;\n }\n\n private _handleKeydown(e: KeyboardEvent): void {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n if (!this.disabled) {\n this._handleClick(e as unknown as MouseEvent);\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-list-item': HelixListItem;\n }\n}\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixListStyles } from './hx-list.styles.js';\nimport { HelixListItem } from './hx-list-item.js'; // real import for instanceof check and property access\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A styled list container supporting plain, bulleted, numbered, description, and interactive variants.\n *\n * @summary Container for list items with optional dividers and interactive selection.\n *\n * @tag hx-list\n *\n * @slot - Default slot for `hx-list-item` elements.\n *\n * @fires {CustomEvent<{item: HelixListItem, value: string | undefined}>} hx-select - Dispatched\n * when an item is clicked in interactive mode.\n *\n * @csspart base - The root list element.\n *\n * @cssprop [--hx-list-gap=0] - Gap between list items.\n * @cssprop [--hx-list-divider-color=var(--hx-color-neutral-200)] - Divider line color.\n */\n@customElement('hx-list')\nexport class HelixList extends LitElement {\n static override styles = [tokenStyles, helixListStyles];\n\n /**\n * Visual variant of the list.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'plain' | 'bulleted' | 'numbered' | 'description' | 'interactive' = 'plain';\n\n /**\n * Whether to show dividers between list items.\n * @attr divided\n */\n @property({ type: Boolean, reflect: true })\n divided = false;\n\n /**\n * Accessible label for the list. Required when variant is \"interactive\" (listbox role).\n * @attr label\n */\n @property({ type: String })\n label: string | undefined = undefined;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n override updated(changedProps: Map<string, unknown>): void {\n super.updated(changedProps);\n if (changedProps.has('variant')) {\n this._updateItemStates();\n }\n if (this.variant === 'interactive' && !this.label) {\n devWarn(\n 'hx-list',\n 'The \"label\" attribute is required when variant is \"interactive\". ' +\n 'Add a label to provide an accessible name for the listbox (WCAG 2.1 SC 4.1.2).',\n );\n }\n }\n\n /**\n * Sets the `interactive` property on all child hx-list-item elements\n * so they can style and behave correctly without `:host-context()`.\n */\n private _updateItemStates(): void {\n const isInteractive = this.variant === 'interactive';\n const items = this.querySelectorAll('hx-list-item');\n for (const item of items) {\n (item as HelixListItem).interactive = isInteractive;\n }\n }\n\n private _handleSlotChange(): void {\n this._updateItemStates();\n }\n\n private readonly _handleKeydown = (e: KeyboardEvent): void => {\n if (this.variant !== 'interactive') return;\n\n const items = Array.from(this.querySelectorAll<HelixListItem>('hx-list-item:not([disabled])'));\n if (items.length === 0) return;\n\n const focused = this.querySelector<HelixListItem>('hx-list-item:focus');\n const currentIndex = focused ? items.indexOf(focused) : -1;\n\n let nextIndex = currentIndex;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'ArrowUp':\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n break;\n case 'Home':\n e.preventDefault();\n nextIndex = 0;\n break;\n case 'End':\n e.preventDefault();\n nextIndex = items.length - 1;\n break;\n default:\n return;\n }\n\n items[nextIndex]?.focus();\n };\n\n private _handleItemClick(e: Event): void {\n if (this.variant !== 'interactive') return;\n\n if (!(e.target instanceof HelixListItem)) return;\n const item = e.target;\n if (item.disabled) return;\n\n this.dispatchEvent(\n new CustomEvent('hx-select', {\n bubbles: true,\n composed: true,\n detail: { item, value: item.value },\n }),\n );\n }\n\n override render() {\n const isInteractive = this.variant === 'interactive';\n const isNumbered = this.variant === 'numbered';\n const isDescription = this.variant === 'description';\n\n const slot = html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n\n if (isDescription) {\n return html`\n <dl\n part=\"base\"\n class=\"list list--${this.variant}\"\n aria-label=${ifDefined(this.label)}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </dl>\n `;\n }\n\n if (isNumbered) {\n return html`\n <div\n part=\"base\"\n role=\"list\"\n class=\"list list--${this.variant}\"\n aria-label=${ifDefined(this.label)}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </div>\n `;\n }\n\n return html`\n <div\n part=\"base\"\n class=\"list list--${this.variant}\"\n role=${isInteractive ? 'listbox' : 'list'}\n aria-label=${ifDefined(this.label)}\n aria-multiselectable=${isInteractive ? 'false' : nothing}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-list': HelixList;\n }\n}\n"],"names":["helixListStyles","css","helixListItemStyles","HelixListItem","LitElement","changedProps","e","html","nothing","ifDefined","tokenStyles","__decorateClass","property","customElement","HelixList","items","focused","currentIndex","nextIndex","_a","isInteractive","item","isNumbered","isDescription","slot"],"mappings":"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"}

package/dist/shared/hx-menu-divider-DR8klkFT.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-menu-divider-DR8klkFT.js","sources":["../../src/components/hx-menu/hx-menu.styles.ts","../../src/components/hx-menu/hx-menu.ts","../../src/components/hx-menu/hx-menu-item.styles.ts","../../src/components/hx-menu/hx-menu-item.ts","../../src/components/hx-menu/hx-menu-divider.styles.ts","../../src/components/hx-menu/hx-menu-divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixMenuStyles = css`\n :host {\n display: block;\n }\n\n .menu {\n display: flex;\n flex-direction: column;\n padding: var(--hx-space-1, 0.25rem);\n background: var(--hx-menu-bg, var(--hx-color-neutral-0, #ffffff));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));\n border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));\n box-shadow: var(\n --hx-menu-shadow,\n 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -2px rgb(0 0 0 / 0.1)\n );\n min-width: var(--hx-menu-min-width, 10rem);\n outline: none;\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMenuStyles } from './hx-menu.styles.js';\nimport type { HelixMenuItem } from './hx-menu-item.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A menu container that manages keyboard navigation over a list of menu items.\n * Use with `hx-menu-item` and `hx-menu-divider`.\n *\n * @summary Context/action menu with keyboard-navigable items.\n *\n * @tag hx-menu\n *\n * @slot - Default slot for hx-menu-item and hx-menu-divider elements.\n *\n * @fires {CustomEvent<{item: HelixMenuItem, value: string}>} hx-select - Dispatched when an item is selected.\n * @fires {CustomEvent<void>} hx-close - Dispatched when Escape is pressed.\n *\n * @csspart base - The root menu element.\n *\n * @cssprop [--hx-menu-bg=var(--hx-color-neutral-0)] - Menu background color.\n * @cssprop [--hx-menu-border-color=var(--hx-color-neutral-200)] - Menu border color.\n * @cssprop [--hx-menu-border-radius=var(--hx-border-radius-md)] - Menu border radius.\n * @cssprop [--hx-menu-shadow] - Menu box shadow.\n * @cssprop [--hx-menu-min-width=10rem] - Minimum menu width.\n */\n@customElement('hx-menu')\nexport class HelixMenu extends LitElement {\n static override styles = [tokenStyles, helixMenuStyles];\n\n /**\n * Accessible label for the menu. Rendered as `aria-label` on the inner\n * `role=\"menu\"` element when set.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = '';\n\n /**\n * Index of the currently focused menu item within the list of enabled items.\n * @internal\n */\n private _focusedIndex = -1;\n\n /**\n * Accumulated character buffer for typeahead search within menu items.\n * @internal\n */\n private _typeaheadBuffer = '';\n\n /**\n * Timer handle that clears the typeahead buffer after a period of inactivity.\n * @internal\n */\n private _typeaheadTimeout: ReturnType<typeof setTimeout> | undefined;\n\n private _getItems(): HelixMenuItem[] {\n return Array.from(this.querySelectorAll<HelixMenuItem>('hx-menu-item')).filter(\n (item) => !item.disabled && !item.loading,\n );\n }\n\n /**\n * Synchronize roving tabindex across all enabled items.\n * Only the active item (or first item if none active) gets tabindex=0.\n */\n private _syncRovingTabIndex(): void {\n const items = this._getItems();\n const activeIndex = this._focusedIndex >= 0 ? this._focusedIndex : 0;\n items.forEach((item, i) => {\n item.setRovingTabIndex(i === activeIndex ? 0 : -1);\n });\n }\n\n /** Focus the first menu item. */\n focusFirst(): void {\n const items = this._getItems();\n const first = items[0];\n if (first !== undefined) {\n this._focusedIndex = 0;\n this._syncRovingTabIndex();\n first.focus();\n }\n }\n\n /** Focus the last menu item. */\n focusLast(): void {\n const items = this._getItems();\n const last = items[items.length - 1];\n if (last !== undefined) {\n this._focusedIndex = items.length - 1;\n this._syncRovingTabIndex();\n last.focus();\n }\n }\n\n private _focusItem(index: number): void {\n const items = this._getItems();\n if (items.length === 0) return;\n this._focusedIndex = Math.max(0, Math.min(index, items.length - 1));\n this._syncRovingTabIndex();\n const target = items[this._focusedIndex];\n if (target !== undefined) target.focus();\n }\n\n private _updateFocusedIndex(): void {\n const items = this._getItems();\n const active = this.shadowRoot?.activeElement ?? document.activeElement;\n // Find the active item by checking if any item's shadow root contains the active element\n const idx = items.findIndex((item) => item.matches(':focus-within') || item === active);\n if (idx !== -1) this._focusedIndex = idx;\n }\n\n private _handleKeyDown(e: KeyboardEvent): void {\n this._updateFocusedIndex();\n const items = this._getItems();\n if (items.length === 0) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n this._focusItem(this._focusedIndex + 1 < items.length ? this._focusedIndex + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n this._focusItem(this._focusedIndex > 0 ? this._focusedIndex - 1 : items.length - 1);\n break;\n case 'Home':\n e.preventDefault();\n this._focusItem(0);\n break;\n case 'End':\n e.preventDefault();\n this._focusItem(items.length - 1);\n break;\n case 'Escape':\n e.preventDefault();\n this.dispatchEvent(new CustomEvent('hx-close', { bubbles: true, composed: true }));\n break;\n default:\n if (e.key.length === 1 && e.key !== ' ' && !e.ctrlKey && !e.metaKey && !e.altKey) {\n this._handleTypeahead(e.key, items);\n }\n break;\n }\n }\n\n private _handleTypeahead(char: string, items: HelixMenuItem[]): void {\n clearTimeout(this._typeaheadTimeout);\n this._typeaheadBuffer += char.toLowerCase();\n this._typeaheadTimeout = setTimeout(() => {\n this._typeaheadBuffer = '';\n }, 500);\n\n const match = items.findIndex((item) => {\n if (item.disabled || item.hasAttribute('disabled')) return false;\n const text = item.textContent?.trim().toLowerCase() ?? '';\n return text.startsWith(this._typeaheadBuffer);\n });\n\n if (match !== -1) {\n this._focusItem(match);\n }\n }\n\n private _handleSlotChange(e: Event): void {\n const slot = e.target;\n if (!(slot instanceof HTMLSlotElement)) return;\n const validTags = new Set(['hx-menu-item', 'hx-menu-divider']);\n const invalid = slot\n .assignedElements()\n .filter((el) => !validTags.has(el.tagName.toLowerCase()));\n if (invalid.length > 0) {\n devWarn(\n 'hx-menu',\n `Default slot expects <hx-menu-item> or <hx-menu-divider> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n );\n }\n // Initialize roving tabindex when items are slotted\n this._syncRovingTabIndex();\n }\n\n private _handleItemSelect(e: Event): void {\n const detail = (e as CustomEvent<{ item: HelixMenuItem; value: string }>).detail;\n const items = this._getItems();\n this._focusedIndex = items.indexOf(detail.item);\n\n this.dispatchEvent(\n new CustomEvent('hx-select', {\n bubbles: true,\n composed: true,\n detail: { item: detail.item, value: detail.value },\n }),\n );\n }\n\n override firstUpdated(): void {\n if (!this.label) {\n devWarn(\n 'hx-menu',\n 'No accessible label provided. Set the `label` attribute on hx-menu so screen readers can identify this menu (WCAG 4.1.2).',\n );\n }\n }\n\n override render() {\n return html`\n <div\n part=\"base\"\n class=\"menu\"\n role=\"menu\"\n aria-label=${this.label || 'Menu'}\n @keydown=${this._handleKeyDown}\n @hx-item-select=${this._handleItemSelect}\n >\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-menu': HelixMenu;\n }\n}\n","import { css } from 'lit';\n\nexport const helixMenuItemStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n .menu-item {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n cursor: pointer;\n color: var(--hx-menu-item-color, var(--hx-color-neutral-900, #0f172a));\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-family: var(--hx-font-family-sans, sans-serif);\n line-height: var(--hx-line-height-tight, 1.25);\n user-select: none;\n -webkit-user-select: none;\n outline: none;\n background: none;\n width: 100%;\n box-sizing: border-box;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n .menu-item:hover,\n .menu-item:focus-visible {\n background-color: var(--hx-menu-item-hover-bg, var(--hx-color-neutral-100, #f1f5f9));\n }\n\n .menu-item:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-menu-item-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-menu-item-focus-ring-offset, 0px);\n }\n\n .menu-item__prefix,\n .menu-item__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .menu-item__label {\n flex: 1 1 auto;\n }\n\n .menu-item__checked-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n width: 1em;\n opacity: 0;\n transition: opacity var(--hx-transition-fast, 150ms ease);\n }\n\n .menu-item--checked .menu-item__checked-icon {\n opacity: 1;\n }\n\n .menu-item__submenu-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n margin-inline-start: auto;\n }\n\n .menu-item__spinner {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n animation: hx-menu-spin var(--hx-duration-spinner, 750ms) linear infinite;\n }\n\n @keyframes hx-menu-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .menu-item__spinner {\n animation: none;\n opacity: var(--hx-opacity-muted, 0.6);\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMenuItemStyles } from './hx-menu-item.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A single interactive item for use inside `hx-menu`. Supports normal, checkbox,\n * and radio types, loading state, prefix/suffix slots, and submenu nesting.\n * Use `aria-label` on the parent `hx-menu` to provide an accessible name.\n *\n * @summary Interactive item within an hx-menu.\n *\n * @tag hx-menu-item\n *\n * @slot - Default slot for the item label.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Shortcut text or icon rendered after the label.\n * @slot submenu - A nested hx-menu for submenu content.\n *\n * @fires {CustomEvent<{item: HelixMenuItem, value: string}>} hx-item-select - Dispatched when the item is activated via click, Enter, or Space.\n * @fires {CustomEvent<{item: HelixMenuItem}>} hx-item-submenu-open - Dispatched when ArrowRight is pressed on an item with a submenu.\n *\n * @csspart base - The root item element.\n * @csspart prefix - Prefix slot wrapper.\n * @csspart label - Label slot wrapper.\n * @csspart suffix - Suffix slot wrapper.\n * @csspart submenu-icon - The chevron icon indicating a submenu.\n * @csspart checked-icon - The checkmark icon for checkbox-type items.\n *\n * @cssprop [--hx-menu-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-menu-item-hover-bg=var(--hx-color-neutral-100)] - Item hover/focus background.\n */\n@customElement('hx-menu-item')\nexport class HelixMenuItem extends LitElement {\n static override styles = [tokenStyles, helixMenuItemStyles];\n\n /**\n * @internal Managed by parent hx-menu for roving tabindex.\n * Only the active item in the menu has tabindex=0; all others have -1.\n */\n @state()\n private _rovingTabIndex = -1;\n\n /** @internal Set the roving tabindex value. Called by parent hx-menu. */\n setRovingTabIndex(value: number): void {\n this._rovingTabIndex = value;\n }\n\n /**\n * The value associated with this item, emitted in the hx-select event.\n * @attr value\n */\n @property({ type: String })\n value = '';\n\n /**\n * Whether the item is disabled. Prevents interaction and event dispatch.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether the item is checked. Only meaningful when type=\"checkbox\".\n * @attr checked\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * The type of menu item. \"checkbox\" renders a checkmark and toggles checked state.\n * \"radio\" renders a checkmark and emits selection for radio-group behavior.\n * @attr type\n */\n @property({ type: String, reflect: true })\n type: 'normal' | 'checkbox' | 'radio' = 'normal';\n\n /**\n * Whether the item is in a loading state. Shows a spinner and prevents interaction.\n * @attr loading\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n @state()\n private _hasSubmenu = false;\n\n /** Focus the inner interactive element. */\n override focus(options?: FocusOptions): void {\n this.shadowRoot?.querySelector<HTMLElement>('.menu-item')?.focus(options);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n // WCAG 4.1.2: menuitem role is only valid inside a role=\"menu\" or role=\"menubar\" container.\n // Check the closest ancestor with a menu role.\n const menuHost = this.closest('hx-menu, hx-split-button, [role=\"menu\"], [role=\"menubar\"]');\n if (!menuHost) {\n devWarn(\n 'hx-menu-item',\n 'hx-menu-item must be used inside an hx-menu or an element with role=\"menu\". ' +\n 'An orphaned menuitem violates WCAG 1.3.1 (Info and Relationships).',\n );\n }\n }\n\n private _handleSubmenuSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasSubmenu = slot.assignedElements().length > 0;\n }\n\n private _activate(): void {\n if (this.disabled || this.loading) return;\n\n if (this.type === 'checkbox') {\n this.checked = !this.checked;\n } else if (this.type === 'radio') {\n const menu = this.closest('hx-menu');\n if (menu) {\n menu\n .querySelectorAll<HelixMenuItem>(':scope > hx-menu-item[type=\"radio\"]')\n .forEach((sibling) => {\n sibling.checked = sibling === this;\n });\n } else {\n this.checked = true;\n }\n }\n\n this.dispatchEvent(\n new CustomEvent('hx-item-select', {\n bubbles: true,\n composed: true,\n detail: { item: this, value: this.value },\n }),\n );\n }\n\n private _handleClick(e: MouseEvent): void {\n if (this.disabled || this.loading) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n this._activate();\n }\n\n private _handleKeyDown(e: KeyboardEvent): void {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this._activate();\n return;\n }\n\n if (e.key === 'ArrowRight' && this._hasSubmenu) {\n e.preventDefault();\n this.dispatchEvent(\n new CustomEvent('hx-item-submenu-open', {\n bubbles: true,\n composed: true,\n detail: { item: this },\n }),\n );\n }\n }\n\n private _renderCheckedIcon() {\n return html`\n <span part=\"checked-icon\" class=\"menu-item__checked-icon\" aria-hidden=\"true\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n </span>\n `;\n }\n\n private _renderSubmenuIcon() {\n return html`\n <span part=\"submenu-icon\" class=\"menu-item__submenu-icon\" aria-hidden=\"true\">\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"9 18 15 12 9 6\" />\n </svg>\n </span>\n `;\n }\n\n private _renderSpinner() {\n return html`\n <svg class=\"menu-item__spinner\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"3\" opacity=\"0.3\" />\n <path\n d=\"M12 2a10 10 0 0 1 10 10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n />\n </svg>\n `;\n }\n\n private _getRole(): string {\n switch (this.type) {\n case 'checkbox':\n return 'menuitemcheckbox';\n case 'radio':\n return 'menuitemradio';\n default:\n return 'menuitem';\n }\n }\n\n override render() {\n const role = this._getRole();\n const hasCheckableRole = this.type === 'checkbox' || this.type === 'radio';\n const classes = {\n 'menu-item': true,\n 'menu-item--checked': this.checked,\n };\n\n return html`\n <div\n part=\"base\"\n class=${classMap(classes)}\n role=${role}\n tabindex=${this.disabled ? '-1' : String(this._rovingTabIndex)}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-checked=${hasCheckableRole ? (this.checked ? 'true' : 'false') : nothing}\n aria-haspopup=${this._hasSubmenu ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n @click=${this._handleClick}\n @keydown=${this._handleKeyDown}\n >\n ${this.loading ? this._renderSpinner() : nothing}\n ${hasCheckableRole ? this._renderCheckedIcon() : nothing}\n <span part=\"prefix\" class=\"menu-item__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span part=\"label\" class=\"menu-item__label\">\n <slot></slot>\n </span>\n <span part=\"suffix\" class=\"menu-item__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n ${this._hasSubmenu ? this._renderSubmenuIcon() : nothing}\n <slot name=\"submenu\" @slotchange=${this._handleSubmenuSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-menu-item': HelixMenuItem;\n }\n}\n","import { css } from 'lit';\n\nexport const helixMenuDividerStyles = css`\n :host {\n display: block;\n }\n\n .menu-divider {\n height: var(--hx-border-width-thin, 1px);\n background-color: var(--hx-menu-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n margin: var(--hx-space-1, 0.25rem) calc(-1 * var(--hx-space-1, 0.25rem));\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMenuDividerStyles } from './hx-menu-divider.styles.js';\n\n/**\n * A visual separator for grouping items within an `hx-menu`.\n *\n * @summary Horizontal divider between menu sections.\n *\n * @tag hx-menu-divider\n *\n * @csspart base - The root separator element.\n *\n * @cssprop [--hx-menu-divider-color=var(--hx-color-neutral-200)] - Divider line color.\n */\n@customElement('hx-menu-divider')\nexport class HelixMenuDivider extends LitElement {\n static override styles = [tokenStyles, helixMenuDividerStyles];\n\n override render() {\n return html`<div\n part=\"base\"\n class=\"menu-divider\"\n role=\"separator\"\n aria-orientation=\"horizontal\"\n ></div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-menu-divider': HelixMenuDivider;\n }\n}\n"],"names":["helixMenuStyles","css","HelixMenu","LitElement","item","items","activeIndex","first","last","index","target","active","_a","idx","char","match","slot","validTags","invalid","el","devWarn","detail","html","tokenStyles","__decorateClass","property","customElement","helixMenuItemStyles","HelixMenuItem","value","options","_b","menu","sibling","role","hasCheckableRole","classes","classMap","nothing","state","helixMenuDividerStyles","HelixMenuDivider"],"mappings":"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"}

package/dist/shared/hx-meter-CZ7lnMra.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-meter-CZ7lnMra.js","sources":["../../src/components/hx-meter/hx-meter.styles.ts","../../src/components/hx-meter/hx-meter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixMeterStyles = css`\n :host {\n display: block;\n width: 100%;\n }\n\n .meter {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-2, 0.5rem);\n width: 100%;\n }\n\n .meter__label {\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #374151));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .meter__track {\n position: relative;\n width: 100%;\n height: var(--hx-meter-track-height, var(--hx-size-2, 0.5rem));\n background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e5e7eb));\n border-radius: var(--hx-meter-track-radius, var(--hx-radius-full, 9999px));\n overflow: hidden;\n }\n\n .meter__indicator {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n height: 100%;\n border-radius: inherit;\n background-color: var(--_indicator-color);\n transition:\n width var(--hx-duration-fast, 150ms) ease,\n background-color var(--hx-duration-fast, 150ms) ease;\n }\n\n /* ─── Default (no thresholds configured) ─── */\n\n :host {\n --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #3b82f6));\n }\n\n /* ─── Semantic state colors ─── */\n\n :host([data-state='optimum']) {\n --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #22c55e));\n }\n\n :host([data-state='warning']) {\n --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #f59e0b));\n }\n\n :host([data-state='danger']) {\n --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-danger-500, #ef4444));\n }\n\n /* ─── State Label (WCAG 1.4.1) ─── */\n /* Visible text label rendered below the track when a semantic state is active. */\n /* Ensures the meter state is not conveyed by fill color alone. */\n /* aria-hidden=\"true\" because aria-valuetext already includes the state for AT. */\n\n .meter__state-label {\n font-size: var(--hx-font-size-xs, 0.75rem);\n font-weight: var(--hx-font-weight-medium, 500);\n line-height: var(--hx-line-height-tight, 1.25);\n font-family: var(--hx-font-family-sans, sans-serif);\n }\n\n .meter__state-label[data-state='optimum'] {\n color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #15803d));\n }\n\n .meter__state-label[data-state='warning'] {\n color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #b45309));\n }\n\n .meter__state-label[data-state='danger'] {\n color: var(--hx-meter-color-danger, var(--hx-color-danger-700, #b91c1c));\n }\n\n /* ─── Native meter hidden (we use custom rendering) ─── */\n\n .meter__native {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMeterStyles } from './hx-meter.styles.js';\n\ntype MeterState = 'optimum' | 'warning' | 'danger' | 'default';\n\n/**\n * A scalar measurement within a known range — e.g., disk usage, health score,\n * or any numeric value with defined min/max bounds. Supports low/high/optimum\n * threshold markers for semantic color feedback.\n *\n * @summary Scalar measurement gauge within a defined range.\n *\n * @tag hx-meter\n *\n * @slot label - Visible label rendered above the meter track. When using this\n * slot without the `label` attribute, the accessible name is derived from the\n * slot content via `aria-labelledby`. The `label` attribute is NOT required\n * when slot content is provided — the component detects slot content and\n * switches to `aria-labelledby` automatically.\n *\n * @csspart base - The outer wrapper element.\n * @csspart track - The unfilled track bar element.\n * @csspart indicator - The filled bar indicating the current value.\n * @csspart label - The label wrapper element.\n *\n * @cssprop [--hx-meter-track-height] - Height of the track bar.\n * @cssprop [--hx-meter-track-color] - Background color of the unfilled track.\n * @cssprop [--hx-meter-track-radius] - Border radius of the track.\n * @cssprop [--hx-meter-indicator-color] - Default filled bar color (no thresholds).\n * @cssprop [--hx-meter-color-optimum] - Color when value is in the optimum zone.\n * @cssprop [--hx-meter-color-warning] - Color when value is in a warning zone.\n * @cssprop [--hx-meter-color-danger] - Color when value is in the danger zone.\n * @cssprop [--hx-meter-label-color] - Label text color.\n */\n@customElement('hx-meter')\nexport class HelixMeter extends LitElement {\n static override styles = [tokenStyles, helixMeterStyles];\n\n private static _counter = 0;\n private _uid = `hx-meter-${++HelixMeter._counter}`;\n\n /**\n * Current value of the meter.\n * @attr value\n */\n @property({ type: Number, reflect: true })\n value = 0;\n\n /**\n * Minimum value of the range.\n * @attr min\n */\n @property({ type: Number, reflect: true })\n min = 0;\n\n /**\n * Maximum value of the range.\n * @attr max\n */\n @property({ type: Number, reflect: true })\n max = 100;\n\n /**\n * Threshold below which the value is considered suboptimal (lower range warning).\n * @attr low\n */\n @property({ type: Number, reflect: true })\n low?: number;\n\n /**\n * Threshold above which the value is considered suboptimal (upper range warning).\n * @attr high\n */\n @property({ type: Number, reflect: true })\n high?: number;\n\n /**\n * The optimal value within the range. Used to determine which zone is \"good\".\n * @attr optimum\n */\n @property({ type: Number, reflect: true })\n optimum?: number;\n\n /**\n * Accessible label for the meter. Used as the visible label text and as\n * the source for `aria-labelledby`. When only slot content is provided\n * (no `label` attribute), the slot content is used for the accessible name.\n * @attr label\n */\n @property({ type: String })\n label?: string;\n\n @state()\n private _hasSlotContent = false;\n\n private _clampedValue(): number {\n return Math.min(Math.max(this.value, this.min), this.max);\n }\n\n private _percentage(): number {\n const range = this.max - this.min;\n if (range === 0) return 0;\n return ((this._clampedValue() - this.min) / range) * 100;\n }\n\n private _resolveState(): MeterState {\n const v = this._clampedValue();\n const hasLow = this.low !== undefined;\n const hasHigh = this.high !== undefined;\n const hasOptimum = this.optimum !== undefined;\n\n if (!hasLow && !hasHigh && !hasOptimum) return 'default';\n\n // When hasLow/hasHigh/hasOptimum are true, the corresponding property is defined.\n // Use nullish coalescing to satisfy the type checker while preserving the runtime logic.\n const lowVal = this.low ?? 0;\n const highVal = this.high ?? this.max;\n const inLowZone = hasLow && v < lowVal;\n const inHighZone = hasHigh && v > highVal;\n const inMiddleZone = !inLowZone && !inHighZone;\n\n if (!hasOptimum) {\n if (inLowZone || inHighZone) return 'warning';\n return 'optimum';\n }\n\n const opt = this.optimum ?? this.min;\n const optimumInLow = hasLow && opt < lowVal;\n const optimumInHigh = hasHigh && opt > highVal;\n const optimumInMiddle = !optimumInLow && !optimumInHigh;\n\n if (optimumInMiddle) {\n if (inMiddleZone) return 'optimum';\n return 'warning';\n } else if (optimumInLow) {\n if (inLowZone) return 'optimum';\n if (inMiddleZone) return 'warning';\n return 'danger';\n } else {\n // optimumInHigh\n if (inHighZone) return 'optimum';\n if (inMiddleZone) return 'warning';\n return 'danger';\n }\n }\n\n private _onLabelSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this._hasSlotContent = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n override updated() {\n // Set data-state on host so :host([data-state]) CSS selectors work\n this.dataset['state'] = this._resolveState();\n }\n\n // ─── WCAG 1.4.1: State label map ───\n // The indicator bar color alone is insufficient for color-blind users.\n // A visible state label is rendered below the track when a semantic state\n // (optimum/warning/danger) is active, providing a non-color visual cue.\n // aria-valuetext already embeds the state for AT users.\n\n private static readonly _STATE_LABELS: Partial<Record<MeterState, string>> = {\n optimum: 'Optimum',\n warning: 'Warning',\n danger: 'Danger',\n };\n\n override render() {\n const pct = this._percentage();\n const state = this._resolveState();\n const clampedValue = this._clampedValue();\n const stateLabel = state !== 'default' ? ` — ${state}` : '';\n const ariaValuetext = `${clampedValue} of ${this.max}${stateLabel}`;\n const hasVisibleLabel = this.label !== undefined || this._hasSlotContent;\n const visibleStateLabel = HelixMeter._STATE_LABELS[state];\n\n return html`\n <div\n part=\"base\"\n class=\"meter\"\n role=\"meter\"\n tabindex=\"0\"\n aria-valuenow=${clampedValue}\n aria-valuemin=${this.min}\n aria-valuemax=${this.max}\n aria-valuetext=${ariaValuetext}\n aria-label=${ifDefined(!hasVisibleLabel ? `${clampedValue} of ${this.max}` : undefined)}\n aria-labelledby=${ifDefined(hasVisibleLabel ? `${this._uid}-label` : undefined)}\n >\n <span\n id=${`${this._uid}-label`}\n part=\"label\"\n class=\"meter__label\"\n ?hidden=${!hasVisibleLabel}\n >\n <slot name=\"label\" @slotchange=${this._onLabelSlotChange}>${this.label ?? ''}</slot>\n </span>\n <div class=\"meter__track\" part=\"track\">\n <div\n part=\"indicator\"\n class=\"meter__indicator\"\n style=${styleMap({ width: `${pct}%` })}\n ></div>\n </div>\n ${visibleStateLabel\n ? html`<span class=\"meter__state-label\" data-state=${state} aria-hidden=\"true\"\n >${visibleStateLabel}</span\n >`\n : nothing}\n <meter\n class=\"meter__native\"\n value=${clampedValue}\n min=${this.min}\n max=${this.max}\n low=${ifDefined(this.low)}\n high=${ifDefined(this.high)}\n optimum=${ifDefined(this.optimum)}\n aria-hidden=\"true\"\n tabindex=\"-1\"\n ></meter>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-meter': HelixMeter;\n }\n}\n"],"names":["helixMeterStyles","css","HelixMeter","LitElement","range","v","hasLow","hasHigh","hasOptimum","lowVal","highVal","inLowZone","inHighZone","inMiddleZone","opt","optimumInLow","optimumInHigh","e","slot","pct","state","clampedValue","stateLabel","ariaValuetext","hasVisibleLabel","visibleStateLabel","html","ifDefined","styleMap","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}