@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/shared/hx-form-fJE-FJQV.js

@@ -0,0 +1,262 @@
+import { LitElement as m, html as c, nothing as x } from "lit";
+import { state as d, property as h, customElement as f } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { A as u } from "./adopted-stylesheets-BZZnCSAs.js";
+const v = `hx-form{display:flex;flex-direction:column;gap:var(--hx-form-gap, var(--hx-space-4, 1rem));max-width:var(--hx-form-max-width, none);padding:var(--hx-form-padding, 0)}hx-form .hx-form-error-summary{border:var(--hx-border-width-thin, 1px) solid var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));border-radius:var(--hx-border-radius-md, .375rem);background-color:var(--hx-color-error-50, #fef2f2);color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem);font-size:var(--hx-font-size-sm, .875rem);line-height:var(--hx-line-height-normal, 1.5);font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))}hx-form .hx-form-error-summary ul{margin:0;padding:0 0 0 var(--hx-space-4, 1rem)}hx-form .hx-form-error-summary li{margin-bottom:var(--hx-space-1, .25rem)}hx-form .hx-form-error-summary li:last-child{margin-bottom:0}hx-form .form-item{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))}hx-form .form-item+.form-item{margin-top:var(--hx-space-4, 1rem)}hx-form label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-input-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}hx-form .form-required{color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));font-weight:var(--hx-font-weight-bold, 700)}hx-form .description{font-size:var(--hx-font-size-xs, .75rem);color:var(--hx-color-neutral-500, #6c757d);line-height:var(--hx-line-height-normal, 1.5)}hx-form .form-item :is(*,*:before,*:after){box-sizing:border-box}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea){display:block;width:100%;border:var(--hx-border-width-thin, 1px) solid var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-input-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));font-size:var(--hx-font-size-md, 1rem);color:var(--hx-input-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}hx-form input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]){min-height:var(--hx-size-10, 2.5rem)}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea)::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea):focus{outline:0;border-color:var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea):disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea):read-only{background-color:var(--hx-color-neutral-100, #e9ecef)}hx-form input[type=search]::-webkit-search-decoration,hx-form input[type=search]::-webkit-search-cancel-button,hx-form input[type=search]::-webkit-search-results-button,hx-form input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}hx-form input[type=number]::-webkit-inner-spin-button,hx-form input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}hx-form input[type=number]{appearance:textfield}hx-form textarea{min-height:var(--hx-textarea-min-height, var(--hx-size-20, 5rem));resize:vertical}hx-form select{display:block;width:100%;border:var(--hx-border-width-thin, 1px) solid var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-select-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));padding:var(--hx-space-2, .5rem) var(--hx-space-8, 2rem) var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));font-size:var(--hx-font-size-md, 1rem);color:var(--hx-select-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-input-height-md, var(--hx-size-10, 2.5rem));cursor:pointer;transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);appearance:none;-webkit-appearance:none;-moz-appearance:none;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");background-repeat:no-repeat;background-position:right var(--hx-space-3, .75rem) center;background-size:12px 8px}hx-form select:focus{outline:0;border-color:var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form select:disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form select[multiple]{min-height:var(--hx-size-20, 5rem);padding-right:var(--hx-space-3, .75rem);background-image:none}hx-form select[multiple] option{padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem)}hx-form select::-ms-expand{display:none}hx-form :is(input[type=checkbox],input[type=radio]){appearance:none;-webkit-appearance:none;-moz-appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin:0;background-color:var(--hx-color-neutral-0, #ffffff);cursor:pointer;vertical-align:middle;transition:background-color var(--hx-transition-fast, .15s ease),border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}hx-form input[type=checkbox]{width:var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));height:var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));border:var(--hx-border-width-medium, 2px) solid var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, .25rem))}hx-form input[type=checkbox]:checked{background-color:var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));border-color:var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));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");background-repeat:no-repeat;background-position:center;background-size:100%}hx-form input[type=checkbox]:indeterminate{background-color:var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));border-color:var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));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");background-repeat:no-repeat;background-position:center;background-size:100%}hx-form input[type=checkbox]:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));outline-offset:var(--hx-focus-ring-offset, 2px)}hx-form input[type=checkbox]:hover:not(:disabled){border-color:var(--hx-color-primary-500, #2563eb)}hx-form input[type=checkbox]:checked:hover:not(:disabled){filter:brightness(var(--hx-filter-brightness-hover, .9))}hx-form :is(input[type=checkbox],input[type=radio]):disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form :is(.form-type-checkbox,.form-type-checkbox-toggle){display:flex;align-items:flex-start;gap:var(--hx-space-2, .5rem)}hx-form :is(.form-type-checkbox,.form-type-checkbox-toggle) label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5);cursor:pointer;user-select:none;-webkit-user-select:none}hx-form input[type=radio]{width:var(--hx-radio-size, var(--hx-size-5, 1.25rem));height:var(--hx-radio-size, var(--hx-size-5, 1.25rem));border:var(--hx-border-width-medium, 2px) solid var(--hx-radio-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-border-radius-full, 9999px)}hx-form input[type=radio]:checked{border-color:var(--hx-radio-checked-border-color, var(--hx-color-primary-500, #2563eb));background-color:var(--hx-radio-checked-bg, var(--hx-color-primary-500, #2563eb));box-shadow:inset 0 0 0 calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * .3) var(--hx-radio-dot-color, var(--hx-color-neutral-0, #ffffff))}hx-form input[type=radio]:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-radio-focus-ring-color, var(--hx-focus-ring-color, #2563eb));outline-offset:var(--hx-focus-ring-offset, 2px)}hx-form input[type=radio]:hover:not(:disabled):not(:checked){border-color:var(--hx-color-neutral-400, #adb5bd)}hx-form .form-type-radio{display:inline-flex;align-items:center;gap:var(--hx-space-2, .5rem)}hx-form .form-type-radio label{font-size:var(--hx-font-size-md, 1rem);color:var(--hx-radio-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5);cursor:pointer;user-select:none;-webkit-user-select:none}hx-form .form-radios{display:flex;flex-direction:column;gap:var(--hx-radio-group-gap, var(--hx-space-3, .75rem))}hx-form .form-radios--horizontal{flex-direction:row;flex-wrap:wrap}hx-form .form-type-switch{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-font-family-sans, sans-serif)}hx-form .form-type-switch .switch__control-row{display:flex;align-items:center;gap:var(--hx-space-2, .5rem)}hx-form .form-type-switch input[type=checkbox]{position:relative;width:var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));height:var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));border:none;border-radius:var(--hx-border-radius-full, 9999px);background-color:var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));transition:background-color var(--hx-transition-fast, .15s ease);background-image:none}hx-form .form-type-switch input[type=checkbox]:before{content:"";position:absolute;top:50%;left:var(--hx-switch-thumb-offset, var(--hx-space-0-5, .125rem));transform:translateY(-50%);width:var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));height:var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));border-radius:var(--hx-border-radius-full, 9999px);background-color:var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));box-shadow:var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05)));transition:transform var(--hx-transition-fast, .15s ease)}hx-form .form-type-switch input[type=checkbox]:checked{background-color:var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));background-image:none}hx-form .form-type-switch input[type=checkbox]:checked:before{transform:translateY(-50%) translate(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)))}hx-form .form-type-switch input[type=checkbox]:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #2563eb));outline-offset:var(--hx-focus-ring-offset, 2px)}hx-form .form-type-switch input[type=checkbox]:disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form .form-type-switch label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5);cursor:pointer;user-select:none;-webkit-user-select:none}hx-form .form-type-switch--sm input[type=checkbox]{width:var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));height:var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem))}hx-form .form-type-switch--sm input[type=checkbox]:before{width:var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, .875rem));height:var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, .875rem))}hx-form .form-type-switch--sm input[type=checkbox]:checked:before{transform:translateY(-50%) translate(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, .875rem)))}hx-form .form-type-switch--lg input[type=checkbox]{width:var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));height:var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem))}hx-form .form-type-switch--lg input[type=checkbox]:before{width:var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));height:var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem))}hx-form .form-type-switch--lg input[type=checkbox]:checked:before{transform:translateY(-50%) translate(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)))}hx-form form{display:flex;flex-direction:column;gap:var(--hx-form-gap, var(--hx-space-4, 1rem));font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))}hx-form fieldset{border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);border-radius:var(--hx-border-radius-md, .375rem);padding:var(--hx-space-4, 1rem);margin:0;display:flex;flex-direction:column;gap:var(--hx-space-4, 1rem)}hx-form :is(legend,summary){font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-700, #343a40);line-height:var(--hx-line-height-normal, 1.5)}hx-form legend{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);padding:0 var(--hx-space-1, .25rem)}hx-form details{border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);border-radius:var(--hx-border-radius-md, .375rem);padding:var(--hx-space-4, 1rem);margin:0}hx-form summary{cursor:pointer;padding:var(--hx-space-1, .25rem) 0;user-select:none;-webkit-user-select:none}hx-form summary:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);outline-offset:var(--hx-focus-ring-offset, 2px);border-radius:var(--hx-border-radius-sm, .25rem)}hx-form .form-actions{display:flex;align-items:center;gap:var(--hx-space-3, .75rem);padding-top:var(--hx-space-4, 1rem)}hx-form .form-actions--end{justify-content:flex-end}hx-form .form-actions--between{justify-content:space-between}hx-form .form-columns{display:grid;gap:var(--hx-space-4, 1rem)}hx-form .form-columns--2{grid-template-columns:repeat(2,1fr)}hx-form .form-columns--3{grid-template-columns:repeat(3,1fr)}hx-form .form-columns--4{grid-template-columns:repeat(4,1fr)}@media(max-width:640px){hx-form .form-columns--2,hx-form .form-columns--3,hx-form .form-columns--4{grid-template-columns:1fr}}hx-form .form-item--full{grid-column:1 / -1}hx-form .form-inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hx-space-3, .75rem)}hx-form .form-inline .form-item{flex:1;min-width:0}hx-form .form-inline .form-item+.form-item{margin-top:0}hx-form .form-divider{border:none;border-top:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);margin:var(--hx-space-2, .5rem) 0}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) label{color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select){border-color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select):focus{border-color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-input-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) input[type=checkbox]{border-color:var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) input[type=checkbox]:checked{background-color:var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));border-color:var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) input[type=radio]{border-color:var(--hx-color-error-500, #dc3545)}hx-form :is(.form-item__error-message,.form-item .error-message,.error-message,.form-item__success-message,.form-item .success-message,.success-message){font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}hx-form :is(.form-item__error-message,.form-item .error-message,.error-message){color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item__success-message,.form-item .success-message,.success-message){color:var(--hx-color-success-500, #198754)}hx-form :is(.form-item.success,.form-item.has-success,.form-item--success) label{color:var(--hx-color-success-500, #198754)}hx-form :is(.form-item.success,.form-item.has-success,.form-item--success) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select){border-color:var(--hx-color-success-500, #198754)}hx-form :is(.form-item.success,.form-item.has-success,.form-item--success) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select):focus{border-color:var(--hx-color-success-500, #198754);box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-color-success-500, #198754) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form :is(.messages--error,.messages--status,.messages--warning){border:var(--hx-border-width-thin, 1px) solid;border-radius:var(--hx-border-radius-md, .375rem);padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem);font-size:var(--hx-font-size-sm, .875rem);line-height:var(--hx-line-height-normal, 1.5)}hx-form .messages--error{border-color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));background-color:var(--hx-color-error-50, #fef2f2);color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form .messages--status{border-color:var(--hx-color-success-500, #198754);background-color:var(--hx-color-success-50, #f0fdf4);color:var(--hx-color-success-500, #198754)}hx-form .messages--warning{border-color:var(--hx-color-warning-500, #ffc107);background-color:var(--hx-color-warning-50, #fffbeb);color:var(--hx-color-warning-700, #92400e)}@media(forced-colors:active){hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select):focus{outline:2px solid CanvasText;outline-offset:2px}hx-form .hx-form-error-summary{border-color:LinkText}}
+`, b = v;
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (e, r, a, t) => {
+  for (var o = t > 1 ? void 0 : t ? y(r, a) : r, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (o = (t ? l(r, a, o) : l(o)) || o);
+  return t && o && g(r, a, o), o;
+};
+let i = class extends m {
+  constructor() {
+    super(...arguments), this._styles = new u(this, b, document), this._validationErrors = [], this.action = "", this.method = "post", this.novalidate = !1, this.name = "", this.enctype = "application/x-www-form-urlencoded", this._handleSubmit = (e) => {
+      if (this.action)
+        return;
+      if (e.preventDefault(), !this.novalidate && !this.checkValidity()) {
+        const t = this._collectValidationErrors();
+        this._validationErrors = t, this._applyAriaInvalidFromValidity(), this.updateComplete.then(() => {
+          const o = this.querySelector(".hx-form-error-summary");
+          o == null || o.focus();
+        }), this.dispatchEvent(
+          new CustomEvent("hx-invalid", {
+            bubbles: !0,
+            composed: !0,
+            detail: { errors: t }
+          })
+        );
+        return;
+      }
+      this._validationErrors = [], this._clearAriaInvalid();
+      const r = this.getFormData(), a = {};
+      for (const t of new Set(r.keys())) {
+        const o = r.getAll(t);
+        o.length === 1 && o[0] !== void 0 ? a[t] = o[0] : a[t] = o;
+      }
+      this.dispatchEvent(
+        new CustomEvent("hx-submit", {
+          bubbles: !0,
+          composed: !0,
+          detail: { valid: !0, values: a, formData: r }
+        })
+      );
+    }, this._handleReset = () => {
+      this._validationErrors = [], this._clearAriaInvalid(), this.dispatchEvent(
+        new CustomEvent("hx-reset", {
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+  }
+  // ─── Light DOM ───
+  createRenderRoot() {
+    return this;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("submit", this._handleSubmit), this.addEventListener("reset", this._handleReset);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("submit", this._handleSubmit), this.removeEventListener("reset", this._handleReset);
+  }
+  // ─── Public Methods ───
+  /**
+   * Checks the validity of all child form elements without showing
+   * validation UI. Returns `true` if all elements are valid.
+   */
+  checkValidity() {
+    return this._getAllValidatableElements().every((r) => "checkValidity" in r && typeof r.checkValidity == "function" ? r.checkValidity() : !0);
+  }
+  /**
+   * Checks validity and triggers the browser's constraint validation UI
+   * on each invalid element. Returns `true` if all elements are valid.
+   */
+  reportValidity() {
+    const e = this._getAllValidatableElements();
+    let r = !0;
+    for (const a of e)
+      "reportValidity" in a && typeof a.reportValidity == "function" && (a.reportValidity() || (r = !1));
+    return r;
+  }
+  /**
+   * Collects form data from all child form elements (native and hx-*).
+   * Returns a `FormData` object.
+   */
+  getFormData() {
+    const e = this.querySelector("form");
+    if (e)
+      return new FormData(e);
+    const r = new FormData(), a = this.getNativeFormElements();
+    for (const t of a) {
+      const o = t;
+      o.name && (o instanceof HTMLInputElement && (o.type === "checkbox" || o.type === "radio") ? o.checked && r.append(o.name, o.value || "on") : r.append(o.name, o.value));
+    }
+    return r;
+  }
+  /**
+   * Returns all child hx-* form components that implement the form
+   * component contract (hx-text-input, hx-select, hx-checkbox, hx-textarea,
+   * hx-radio-group, hx-switch).
+   *
+   * Note: This uses a hardcoded allowlist. When a new hx-* form component
+   * is added, update this selector to include it.
+   */
+  getFormElements() {
+    return Array.from(
+      this.querySelectorAll(
+        "hx-text-input, hx-select, hx-checkbox, hx-textarea, hx-radio-group, hx-switch"
+      )
+    );
+  }
+  /**
+   * Returns all native form elements (input, select, textarea, button)
+   * found within this component's light DOM.
+   */
+  getNativeFormElements() {
+    return Array.from(
+      this.querySelectorAll("input, select, textarea, button")
+    );
+  }
+  /**
+   * Programmatically sets server-side validation errors on the form.
+   * Renders an error summary and sets `aria-invalid="true"` on named fields.
+   *
+   * Useful for surfacing Drupal server-side validation responses.
+   *
+   * @param errors - Array of `{name, message}` pairs matching field `name` attributes.
+   */
+  setErrors(e) {
+    this._validationErrors = e, this._applyAriaInvalidFromErrors(e);
+  }
+  /**
+   * Programmatically sets a single field error. Merges with any existing errors.
+   *
+   * @param name - The `name` attribute of the field.
+   * @param message - The error message to display.
+   */
+  setFieldError(e, r) {
+    const a = this._validationErrors.filter((t) => t.name !== e);
+    this.setErrors([...a, { name: e, message: r }]);
+  }
+  /**
+   * Clears all validation errors from the error summary and removes
+   * `aria-invalid` from all fields.
+   */
+  clearErrors() {
+    this._clearAriaInvalid(), this._validationErrors = [];
+  }
+  // ─── Private Helpers ───
+  /**
+   * Returns all elements that support constraint validation, including
+   * both native form elements and hx-* components with `checkValidity`.
+   * @internal
+   */
+  _getAllValidatableElements() {
+    const e = Array.from(this.querySelectorAll("input, select, textarea")), r = this.getFormElements().filter(
+      (a) => "checkValidity" in a && typeof a.checkValidity == "function"
+    );
+    return [...e, ...r];
+  }
+  /**
+   * Sets `aria-invalid="true"` on fields with errors, removes it from valid fields.
+   * @internal
+   */
+  _applyAriaInvalidFromErrors(e) {
+    const r = new Set(e.map((t) => t.name)), a = this._getAllValidatableElements();
+    for (const t of a) {
+      const n = t.name ?? t.tagName.toLowerCase();
+      r.has(n) ? t.setAttribute("aria-invalid", "true") : t.removeAttribute("aria-invalid");
+    }
+  }
+  /**
+   * Sets `aria-invalid` based on native constraint validation state.
+   * @internal
+   */
+  _applyAriaInvalidFromValidity() {
+    const e = this._getAllValidatableElements();
+    for (const r of e)
+      "validity" in r && (r.validity.valid ? r.removeAttribute("aria-invalid") : r.setAttribute("aria-invalid", "true"));
+  }
+  /**
+   * Removes `aria-invalid` from all validatable elements.
+   * @internal
+   */
+  _clearAriaInvalid() {
+    const e = this._getAllValidatableElements();
+    for (const r of e)
+      r.removeAttribute("aria-invalid");
+  }
+  /**
+   * Collects constraint validation errors from all validatable elements after a failed submit attempt.
+   * @internal
+   */
+  _collectValidationErrors() {
+    const e = [], r = this._getAllValidatableElements();
+    for (const a of r)
+      if ("validity" in a && "validationMessage" in a) {
+        const t = a;
+        t.validity.valid || e.push({
+          name: t.name || t.tagName.toLowerCase(),
+          message: t.validationMessage
+        });
+      }
+    return e;
+  }
+  // ─── Render ───
+  render() {
+    const e = this._validationErrors.length > 0 ? c`
+            <div
+              class="hx-form-error-summary"
+              role="alert"
+              aria-live="assertive"
+              aria-atomic="true"
+              tabindex="-1"
+            >
+              <ul>
+                ${this._validationErrors.map(
+      (r) => c`<li>${r.message || r.name}</li>`
+    )}
+              </ul>
+            </div>
+          ` : x;
+    return this.action ? c`
+        ${e}
+        <form
+          action=${this.action}
+          method=${this.method}
+          enctype=${this.enctype}
+          name=${p(this.name || void 0)}
+          ?novalidate=${this.novalidate}
+        >
+          <slot></slot>
+        </form>
+      ` : c`${e}<slot></slot>`;
+  }
+};
+s([
+  d()
+], i.prototype, "_validationErrors", 2);
+s([
+  h({ type: String })
+], i.prototype, "action", 2);
+s([
+  h({ type: String })
+], i.prototype, "method", 2);
+s([
+  h({ type: Boolean })
+], i.prototype, "novalidate", 2);
+s([
+  h({ type: String })
+], i.prototype, "name", 2);
+s([
+  h({ type: String })
+], i.prototype, "enctype", 2);
+i = s([
+  f("hx-form")
+], i);
+export {
+  i as H
+};
+//# sourceMappingURL=hx-form-fJE-FJQV.js.map

package/dist/shared/hx-form-fJE-FJQV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-form-fJE-FJQV.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 \"hx-form{display:flex;flex-direction:column;gap:var(--hx-form-gap, var(--hx-space-4, 1rem));max-width:var(--hx-form-max-width, none);padding:var(--hx-form-padding, 0)}hx-form .hx-form-error-summary{border:var(--hx-border-width-thin, 1px) solid var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));border-radius:var(--hx-border-radius-md, .375rem);background-color:var(--hx-color-error-50, #fef2f2);color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem);font-size:var(--hx-font-size-sm, .875rem);line-height:var(--hx-line-height-normal, 1.5);font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))}hx-form .hx-form-error-summary ul{margin:0;padding:0 0 0 var(--hx-space-4, 1rem)}hx-form .hx-form-error-summary li{margin-bottom:var(--hx-space-1, .25rem)}hx-form .hx-form-error-summary li:last-child{margin-bottom:0}hx-form .form-item{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))}hx-form .form-item+.form-item{margin-top:var(--hx-space-4, 1rem)}hx-form label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-input-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}hx-form .form-required{color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));font-weight:var(--hx-font-weight-bold, 700)}hx-form .description{font-size:var(--hx-font-size-xs, .75rem);color:var(--hx-color-neutral-500, #6c757d);line-height:var(--hx-line-height-normal, 1.5)}hx-form .form-item :is(*,*:before,*:after){box-sizing:border-box}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea){display:block;width:100%;border:var(--hx-border-width-thin, 1px) solid var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-input-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));font-size:var(--hx-font-size-md, 1rem);color:var(--hx-input-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}hx-form input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]){min-height:var(--hx-size-10, 2.5rem)}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea)::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea):focus{outline:0;border-color:var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea):disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea):read-only{background-color:var(--hx-color-neutral-100, #e9ecef)}hx-form input[type=search]::-webkit-search-decoration,hx-form input[type=search]::-webkit-search-cancel-button,hx-form input[type=search]::-webkit-search-results-button,hx-form input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}hx-form input[type=number]::-webkit-inner-spin-button,hx-form input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}hx-form input[type=number]{appearance:textfield}hx-form textarea{min-height:var(--hx-textarea-min-height, var(--hx-size-20, 5rem));resize:vertical}hx-form select{display:block;width:100%;border:var(--hx-border-width-thin, 1px) solid var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-select-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));padding:var(--hx-space-2, .5rem) var(--hx-space-8, 2rem) var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));font-size:var(--hx-font-size-md, 1rem);color:var(--hx-select-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-input-height-md, var(--hx-size-10, 2.5rem));cursor:pointer;transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);appearance:none;-webkit-appearance:none;-moz-appearance:none;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\\\");background-repeat:no-repeat;background-position:right var(--hx-space-3, .75rem) center;background-size:12px 8px}hx-form select:focus{outline:0;border-color:var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form select:disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form select[multiple]{min-height:var(--hx-size-20, 5rem);padding-right:var(--hx-space-3, .75rem);background-image:none}hx-form select[multiple] option{padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem)}hx-form select::-ms-expand{display:none}hx-form :is(input[type=checkbox],input[type=radio]){appearance:none;-webkit-appearance:none;-moz-appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin:0;background-color:var(--hx-color-neutral-0, #ffffff);cursor:pointer;vertical-align:middle;transition:background-color var(--hx-transition-fast, .15s ease),border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}hx-form input[type=checkbox]{width:var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));height:var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));border:var(--hx-border-width-medium, 2px) solid var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, .25rem))}hx-form input[type=checkbox]:checked{background-color:var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));border-color:var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));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\\\");background-repeat:no-repeat;background-position:center;background-size:100%}hx-form input[type=checkbox]:indeterminate{background-color:var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));border-color:var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));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\\\");background-repeat:no-repeat;background-position:center;background-size:100%}hx-form input[type=checkbox]:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));outline-offset:var(--hx-focus-ring-offset, 2px)}hx-form input[type=checkbox]:hover:not(:disabled){border-color:var(--hx-color-primary-500, #2563eb)}hx-form input[type=checkbox]:checked:hover:not(:disabled){filter:brightness(var(--hx-filter-brightness-hover, .9))}hx-form :is(input[type=checkbox],input[type=radio]):disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form :is(.form-type-checkbox,.form-type-checkbox-toggle){display:flex;align-items:flex-start;gap:var(--hx-space-2, .5rem)}hx-form :is(.form-type-checkbox,.form-type-checkbox-toggle) label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5);cursor:pointer;user-select:none;-webkit-user-select:none}hx-form input[type=radio]{width:var(--hx-radio-size, var(--hx-size-5, 1.25rem));height:var(--hx-radio-size, var(--hx-size-5, 1.25rem));border:var(--hx-border-width-medium, 2px) solid var(--hx-radio-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-border-radius-full, 9999px)}hx-form input[type=radio]:checked{border-color:var(--hx-radio-checked-border-color, var(--hx-color-primary-500, #2563eb));background-color:var(--hx-radio-checked-bg, var(--hx-color-primary-500, #2563eb));box-shadow:inset 0 0 0 calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * .3) var(--hx-radio-dot-color, var(--hx-color-neutral-0, #ffffff))}hx-form input[type=radio]:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-radio-focus-ring-color, var(--hx-focus-ring-color, #2563eb));outline-offset:var(--hx-focus-ring-offset, 2px)}hx-form input[type=radio]:hover:not(:disabled):not(:checked){border-color:var(--hx-color-neutral-400, #adb5bd)}hx-form .form-type-radio{display:inline-flex;align-items:center;gap:var(--hx-space-2, .5rem)}hx-form .form-type-radio label{font-size:var(--hx-font-size-md, 1rem);color:var(--hx-radio-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5);cursor:pointer;user-select:none;-webkit-user-select:none}hx-form .form-radios{display:flex;flex-direction:column;gap:var(--hx-radio-group-gap, var(--hx-space-3, .75rem))}hx-form .form-radios--horizontal{flex-direction:row;flex-wrap:wrap}hx-form .form-type-switch{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-font-family-sans, sans-serif)}hx-form .form-type-switch .switch__control-row{display:flex;align-items:center;gap:var(--hx-space-2, .5rem)}hx-form .form-type-switch input[type=checkbox]{position:relative;width:var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));height:var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));border:none;border-radius:var(--hx-border-radius-full, 9999px);background-color:var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));transition:background-color var(--hx-transition-fast, .15s ease);background-image:none}hx-form .form-type-switch input[type=checkbox]:before{content:\\\"\\\";position:absolute;top:50%;left:var(--hx-switch-thumb-offset, var(--hx-space-0-5, .125rem));transform:translateY(-50%);width:var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));height:var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));border-radius:var(--hx-border-radius-full, 9999px);background-color:var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));box-shadow:var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05)));transition:transform var(--hx-transition-fast, .15s ease)}hx-form .form-type-switch input[type=checkbox]:checked{background-color:var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));background-image:none}hx-form .form-type-switch input[type=checkbox]:checked:before{transform:translateY(-50%) translate(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)))}hx-form .form-type-switch input[type=checkbox]:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #2563eb));outline-offset:var(--hx-focus-ring-offset, 2px)}hx-form .form-type-switch input[type=checkbox]:disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form .form-type-switch label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5);cursor:pointer;user-select:none;-webkit-user-select:none}hx-form .form-type-switch--sm input[type=checkbox]{width:var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));height:var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem))}hx-form .form-type-switch--sm input[type=checkbox]:before{width:var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, .875rem));height:var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, .875rem))}hx-form .form-type-switch--sm input[type=checkbox]:checked:before{transform:translateY(-50%) translate(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, .875rem)))}hx-form .form-type-switch--lg input[type=checkbox]{width:var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));height:var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem))}hx-form .form-type-switch--lg input[type=checkbox]:before{width:var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));height:var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem))}hx-form .form-type-switch--lg input[type=checkbox]:checked:before{transform:translateY(-50%) translate(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)))}hx-form form{display:flex;flex-direction:column;gap:var(--hx-form-gap, var(--hx-space-4, 1rem));font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))}hx-form fieldset{border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);border-radius:var(--hx-border-radius-md, .375rem);padding:var(--hx-space-4, 1rem);margin:0;display:flex;flex-direction:column;gap:var(--hx-space-4, 1rem)}hx-form :is(legend,summary){font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-700, #343a40);line-height:var(--hx-line-height-normal, 1.5)}hx-form legend{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);padding:0 var(--hx-space-1, .25rem)}hx-form details{border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);border-radius:var(--hx-border-radius-md, .375rem);padding:var(--hx-space-4, 1rem);margin:0}hx-form summary{cursor:pointer;padding:var(--hx-space-1, .25rem) 0;user-select:none;-webkit-user-select:none}hx-form summary:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);outline-offset:var(--hx-focus-ring-offset, 2px);border-radius:var(--hx-border-radius-sm, .25rem)}hx-form .form-actions{display:flex;align-items:center;gap:var(--hx-space-3, .75rem);padding-top:var(--hx-space-4, 1rem)}hx-form .form-actions--end{justify-content:flex-end}hx-form .form-actions--between{justify-content:space-between}hx-form .form-columns{display:grid;gap:var(--hx-space-4, 1rem)}hx-form .form-columns--2{grid-template-columns:repeat(2,1fr)}hx-form .form-columns--3{grid-template-columns:repeat(3,1fr)}hx-form .form-columns--4{grid-template-columns:repeat(4,1fr)}@media(max-width:640px){hx-form .form-columns--2,hx-form .form-columns--3,hx-form .form-columns--4{grid-template-columns:1fr}}hx-form .form-item--full{grid-column:1 / -1}hx-form .form-inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hx-space-3, .75rem)}hx-form .form-inline .form-item{flex:1;min-width:0}hx-form .form-inline .form-item+.form-item{margin-top:0}hx-form .form-divider{border:none;border-top:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);margin:var(--hx-space-2, .5rem) 0}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) label{color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select){border-color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select):focus{border-color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-input-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) input[type=checkbox]{border-color:var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) input[type=checkbox]:checked{background-color:var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));border-color:var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) input[type=radio]{border-color:var(--hx-color-error-500, #dc3545)}hx-form :is(.form-item__error-message,.form-item .error-message,.error-message,.form-item__success-message,.form-item .success-message,.success-message){font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}hx-form :is(.form-item__error-message,.form-item .error-message,.error-message){color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item__success-message,.form-item .success-message,.success-message){color:var(--hx-color-success-500, #198754)}hx-form :is(.form-item.success,.form-item.has-success,.form-item--success) label{color:var(--hx-color-success-500, #198754)}hx-form :is(.form-item.success,.form-item.has-success,.form-item--success) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select){border-color:var(--hx-color-success-500, #198754)}hx-form :is(.form-item.success,.form-item.has-success,.form-item--success) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select):focus{border-color:var(--hx-color-success-500, #198754);box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-color-success-500, #198754) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form :is(.messages--error,.messages--status,.messages--warning){border:var(--hx-border-width-thin, 1px) solid;border-radius:var(--hx-border-radius-md, .375rem);padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem);font-size:var(--hx-font-size-sm, .875rem);line-height:var(--hx-line-height-normal, 1.5)}hx-form .messages--error{border-color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));background-color:var(--hx-color-error-50, #fef2f2);color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form .messages--status{border-color:var(--hx-color-success-500, #198754);background-color:var(--hx-color-success-50, #f0fdf4);color:var(--hx-color-success-500, #198754)}hx-form .messages--warning{border-color:var(--hx-color-warning-500, #ffc107);background-color:var(--hx-color-warning-50, #fffbeb);color:var(--hx-color-warning-700, #92400e)}@media(forced-colors:active){hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select):focus{outline:2px solid CanvasText;outline-offset:2px}hx-form .hx-form-error-summary{border-color:LinkText}}\\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): el is HTMLElement & { checkValidity: () => boolean } =>\n        'checkValidity' in el &&\n        typeof (el as { checkValidity: 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      // Move focus to the error summary after it renders so screen readers announce it\n      // immediately. tabindex=\"-1\" on the summary allows programmatic focus (WCAG 2.4.3).\n      void this.updateComplete.then(() => {\n        const summary = this.querySelector<HTMLElement>('.hx-form-error-summary');\n        summary?.focus();\n      });\n\n      /**\n       * Dispatched when validation fails on submit.\n       * @event hx-invalid\n       */\n      this.dispatchEvent(\n        new CustomEvent<{ errors: Array<{ name: string; message: string }> }>('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<{\n        valid: boolean;\n        values: Record<string, FormDataEntryValue | FormDataEntryValue[]>;\n        formData: FormData;\n      }>('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<void>('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              tabindex=\"-1\"\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","summary","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":"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"}

package/dist/shared/{hx-format-date-BsVr8gpD.js → hx-format-date-C030ThSm.js}

@@ -13,8 +13,8 @@ const T = _`
   }
 `;
 var $ = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, n = (o, t, i, e) => {
-  for (var a = e > 1 ? void 0 : e ? Z(t, i) : t, s = o.length - 1, c; s >= 0; s--)
-    (c = o[s]) && (a = (e ? c(t, i, a) : c(a)) || a);
+  for (var a = e > 1 ? void 0 : e ? Z(t, i) : t, s = o.length - 1, u; s >= 0; s--)
+    (u = o[s]) && (a = (e ? u(t, i, a) : u(a)) || a);
   return e && a && $(t, i, a), a;
 };
 let r = class extends D {
@@ -22,6 +22,7 @@ let r = class extends D {
     super(...arguments), this.date = "", this.lang = "", this.month = void 0, this.year = void 0, this.day = void 0, this.weekday = void 0, this.hour = void 0, this.minute = void 0, this.second = void 0, this.timeZoneName = void 0, this.timeZone = void 0, this.hourFormat = "auto", this.numeric = "auto", this.relative = !1;
   }
   // ─── Private helpers ───
+  /** @internal */
   _getDate() {
     const o = this.date;
     if (o === "") return /* @__PURE__ */ new Date();
@@ -39,9 +40,13 @@ let r = class extends D {
     const i = new Date(o);
     return isNaN(i.getTime()) ? /* @__PURE__ */ new Date() : i;
   }
+  /** @internal */
   _getLocale() {
-    return this.lang ? this.lang : document.documentElement.lang || navigator.language || "en";
+    if (this.lang) return this.lang;
+    const o = typeof document < "u" ? document.documentElement.lang : "", t = typeof navigator < "u" ? navigator.language : "";
+    return o || t || "en";
   }
+  /** @internal */
   _getHour12() {
     if (this.hourFormat === "12") return !0;
     if (this.hourFormat === "24") return !1;
@@ -51,6 +56,7 @@ let r = class extends D {
    * timezone-offset ISO string (e.g. `2024-09-20T05:00:00-04:00`) so that
    * assistive technology reads the same local time as the visual display.
    */
+  /** @internal */
   _getDatetimeAttr(o) {
     if (!this.timeZone) return o.toISOString();
     try {
@@ -63,7 +69,7 @@ let r = class extends D {
         minute: "2-digit",
         second: "2-digit",
         hour12: !1
-      }, i = (m) => m.reduce((g, d) => (d.type !== "literal" && (g[d.type] = d.value), g), {}), e = i(new Intl.DateTimeFormat("en-CA", t).formatToParts(o)), a = i(
+      }, i = (m) => m.reduce((g, f) => (f.type !== "literal" && (g[f.type] = f.value), g), {}), e = i(new Intl.DateTimeFormat("en-CA", t).formatToParts(o)), a = i(
         new Intl.DateTimeFormat("en-CA", { ...t, timeZone: "UTC" }).formatToParts(o)
       ), s = (m) => Date.UTC(
         parseInt(m.year ?? "0"),
@@ -72,27 +78,29 @@ let r = class extends D {
         parseInt(m.hour === "24" ? "0" : m.hour ?? "0"),
         parseInt(m.minute ?? "0"),
         parseInt(m.second ?? "0")
-      ), c = Math.round((s(e) - s(a)) / 6e4), y = c >= 0 ? "+" : "-", l = Math.abs(c), f = String(Math.floor(l / 60)).padStart(2, "0"), v = String(l % 60).padStart(2, "0"), p = e.hour === "24" ? "00" : e.hour ?? "00";
-      return `${e.year}-${e.month}-${e.day}T${p}:${e.minute}:${e.second}${y}${f}:${v}`;
+      ), u = Math.round((s(e) - s(a)) / 6e4), y = u >= 0 ? "+" : "-", l = Math.abs(u), d = String(Math.floor(l / 60)).padStart(2, "0"), v = String(l % 60).padStart(2, "0"), p = e.hour === "24" ? "00" : e.hour ?? "00";
+      return `${e.year}-${e.month}-${e.day}T${p}:${e.minute}:${e.second}${y}${d}:${v}`;
     } catch {
       return o.toISOString();
     }
   }
+  /** @internal */
   _formatRelative(o) {
-    const t = /* @__PURE__ */ new Date(), i = o.getTime() - t.getTime(), e = Math.round(i / 1e3), a = Math.abs(e), s = Math.round(e / 60), c = Math.abs(s), y = Math.round(e / 3600), l = Math.abs(y), f = Math.round(e / 86400), v = Math.abs(f), p = Math.round(f / 30), m = Math.abs(p), g = Math.round(f / 365), d = this._getLocale(), b = `${d}|${this.numeric}`;
-    let u = r._rtfCache.get(b);
-    if (!u)
+    const t = /* @__PURE__ */ new Date(), i = o.getTime() - t.getTime(), e = Math.round(i / 1e3), a = Math.abs(e), s = Math.round(e / 60), u = Math.abs(s), y = Math.round(e / 3600), l = Math.abs(y), d = Math.round(e / 86400), v = Math.abs(d), p = Math.round(d / 30), m = Math.abs(p), g = Math.round(d / 365), f = this._getLocale(), b = `${f}|${this.numeric}`;
+    let c = r._rtfCache.get(b);
+    if (!c)
       try {
-        u = new Intl.RelativeTimeFormat(d, { numeric: this.numeric }), r._rtfCache.set(b, u);
+        c = new Intl.RelativeTimeFormat(f, { numeric: this.numeric }), r._rtfCache.set(b, c);
       } catch {
         return "";
       }
     try {
-      return a < 60 ? u.format(e, "second") : c < 60 ? u.format(s, "minute") : l < 24 ? u.format(y, "hour") : v < 30 ? u.format(f, "day") : m < 12 ? u.format(p, "month") : u.format(g, "year");
+      return a < 60 ? c.format(e, "second") : u < 60 ? c.format(s, "minute") : l < 24 ? c.format(y, "hour") : v < 30 ? c.format(d, "day") : m < 12 ? c.format(p, "month") : c.format(g, "year");
     } catch {
       return "";
     }
   }
+  /** @internal */
   _formatAbsolute(o) {
     const t = {};
     this.month !== void 0 && (t.month = this.month), this.year !== void 0 && (t.year = this.year), this.day !== void 0 && (t.day = this.day), this.weekday !== void 0 && (t.weekday = this.weekday), this.hour !== void 0 && (t.hour = this.hour), this.minute !== void 0 && (t.minute = this.minute), this.second !== void 0 && (t.second = this.second), this.timeZoneName !== void 0 && (t.timeZoneName = this.timeZoneName), this.timeZone !== void 0 && (t.timeZone = this.timeZone);
@@ -169,4 +177,4 @@ r = n([
 export {
   r as H
 };
-//# sourceMappingURL=hx-format-date-BsVr8gpD.js.map
+//# sourceMappingURL=hx-format-date-C030ThSm.js.map

package/dist/shared/hx-format-date-C030ThSm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-format-date-C030ThSm.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  /** @internal */\n  private static _dtfCache = new Map<string, Intl.DateTimeFormat>();\n  /** @internal */\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  /** @internal */\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  /** @internal */\n  private _getLocale(): string {\n    if (this.lang) return this.lang;\n    const docLang = typeof document !== 'undefined' ? document.documentElement.lang : '';\n    const navLang = typeof navigator !== 'undefined' ? navigator.language : '';\n    return docLang || navLang || 'en';\n  }\n\n  /** @internal */\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  /** @internal */\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  /** @internal */\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  /** @internal */\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","docLang","navLang","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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"}