@helixui/library 1.0.0 → 1.1.1

package/dist/shared/hx-form-BpS6v3Iu.js

@@ -0,0 +1,258 @@
+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, t, o) => {
+  for (var a = o > 1 ? void 0 : o ? y(r, t) : r, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (a = (o ? l(r, t, a) : l(a)) || a);
+  return o && a && g(r, t, a), a;
+};
+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 o = this._collectValidationErrors();
+        this._validationErrors = o, this._applyAriaInvalidFromValidity(), this.dispatchEvent(
+          new CustomEvent("hx-invalid", {
+            bubbles: !0,
+            composed: !0,
+            detail: { errors: o }
+          })
+        );
+        return;
+      }
+      this._validationErrors = [], this._clearAriaInvalid();
+      const r = this.getFormData(), t = {};
+      for (const o of new Set(r.keys())) {
+        const a = r.getAll(o);
+        a.length === 1 && a[0] !== void 0 ? t[o] = a[0] : t[o] = a;
+      }
+      this.dispatchEvent(
+        new CustomEvent("hx-submit", {
+          bubbles: !0,
+          composed: !0,
+          detail: { valid: !0, values: t, 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 t of e)
+      "reportValidity" in t && typeof t.reportValidity == "function" && (t.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(), t = this.getNativeFormElements();
+    for (const o of t) {
+      const a = o;
+      a.name && (a instanceof HTMLInputElement && (a.type === "checkbox" || a.type === "radio") ? a.checked && r.append(a.name, a.value || "on") : r.append(a.name, a.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 t = this._validationErrors.filter((o) => o.name !== e);
+    this.setErrors([...t, { 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(
+      (t) => "checkValidity" in t && typeof t.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((o) => o.name)), t = this._getAllValidatableElements();
+    for (const o of t) {
+      const n = o.name ?? o.tagName.toLowerCase();
+      r.has(n) ? o.setAttribute("aria-invalid", "true") : o.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 t of r)
+      if ("validity" in t && "validationMessage" in t) {
+        const o = t;
+        o.validity.valid || e.push({
+          name: o.name || o.tagName.toLowerCase(),
+          message: o.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"
+            >
+              <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-BpS6v3Iu.js.map

package/dist/shared/hx-form-BpS6v3Iu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-form-BpS6v3Iu.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) =>\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<{ 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            >\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":"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"}

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

@@ -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,11 @@ 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";
   }
+  /** @internal */
   _getHour12() {
     if (this.hourFormat === "12") return !0;
     if (this.hourFormat === "24") return !1;
@@ -51,6 +54,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 {
@@ -78,6 +82,7 @@ let r = class extends D {
       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);
@@ -93,6 +98,7 @@ let r = class extends D {
       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 +175,4 @@ r = n([
 export {
   r as H
 };
-//# sourceMappingURL=hx-format-date-BsVr8gpD.js.map
+//# sourceMappingURL=hx-format-date-BdnWV2kX.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-format-date-BdnWV2kX.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    return document.documentElement.lang || navigator.language || '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","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 → hx-grid-gEjuF0cR.js}

@@ -1,23 +1,24 @@
 import { css as m, LitElement as c, html as d } from "lit";
 import { property as s, customElement as g } from "lit/decorators.js";
+import { styleMap as f } from "lit/directives/style-map.js";
 import { tokenStyles as y } from "@helixui/tokens/lit";
-const f = m`
+const v = m`
   :host {
     display: block;
     box-sizing: border-box;
     width: 100%;
   }
-`, v = m`
+`, x = m`
   :host {
     display: block;
     min-width: 0;
     min-height: 0;
   }
 `;
-var x = Object.defineProperty, G = Object.getOwnPropertyDescriptor, e = (t, l, a, p) => {
-  for (var o = p > 1 ? void 0 : p ? G(l, a) : l, n = t.length - 1, u; n >= 0; n--)
+var G = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (t, l, a, p) => {
+  for (var o = p > 1 ? void 0 : p ? _(l, a) : l, n = t.length - 1, u; n >= 0; n--)
     (u = t[n]) && (o = (p ? u(l, a, o) : u(o)) || o);
-  return p && o && x(l, a, o), o;
+  return p && o && G(l, a, o), o;
 };
 const h = {
   none: "0",
@@ -31,38 +32,43 @@ let r = class extends c {
   constructor() {
     super(...arguments), this.columns = 1, this.gap = "md", this.align = "stretch", this.justify = "stretch";
   }
+  /** @internal */
   _gridTemplateColumns() {
     const t = this.columns;
     return typeof t == "number" || /^\d+$/.test(String(t)) ? `var(--hx-grid-columns, repeat(${t}, 1fr))` : `var(--hx-grid-columns, ${t})`;
   }
+  /** @internal */
   _resolveGap(t) {
     return h[t] ?? h.md;
   }
+  /** @internal */
   _computedRowGap() {
     return this.rowGap ? `var(--hx-grid-row-gap, ${this._resolveGap(this.rowGap)})` : `var(--hx-grid-row-gap, var(--hx-grid-gap, ${this._resolveGap(this.gap)}))`;
   }
+  /** @internal */
   _computedColumnGap() {
     return this.columnGap ? `var(--hx-grid-column-gap, ${this._resolveGap(this.columnGap)})` : `var(--hx-grid-column-gap, var(--hx-grid-gap, ${this._resolveGap(this.gap)}))`;
   }
-  _baseStyle() {
-    return [
-      "display: grid",
-      `grid-template-columns: ${this._gridTemplateColumns()}`,
-      `row-gap: ${this._computedRowGap()}`,
-      `column-gap: ${this._computedColumnGap()}`,
-      `align-items: ${this.align}`,
-      `justify-items: ${this.justify}`
-    ].join("; ");
+  /** @internal */
+  _baseStyleMap() {
+    return {
+      display: "grid",
+      "grid-template-columns": this._gridTemplateColumns(),
+      "row-gap": this._computedRowGap(),
+      "column-gap": this._computedColumnGap(),
+      "align-items": this.align,
+      "justify-items": this.justify
+    };
   }
   render() {
     return d`
-      <div part="base" role="presentation" style=${this._baseStyle()}>
+      <div part="base" role="presentation" style=${f(this._baseStyleMap())}>
         <slot></slot>
       </div>
     `;
   }
 };
-r.styles = [y, f];
+r.styles = [y, v];
 e([
   s({ reflect: !0 })
 ], r.prototype, "columns", 2);
@@ -91,6 +97,7 @@ let i = class extends c {
   connectedCallback() {
     super.connectedCallback(), this._applyHostGridStyles();
   }
+  /** @internal */
   _applyHostGridStyles() {
     this.column ? this.style.gridColumn = this.column : this.span !== void 0 ? this.style.gridColumn = `span ${this.span}` : this.style.gridColumn = "", this.row ? this.style.gridRow = this.row : this.style.gridRow = "";
   }
@@ -98,7 +105,7 @@ let i = class extends c {
     return d`<slot></slot>`;
   }
 };
-i.styles = [y, v];
+i.styles = [y, x];
 e([
   s({ reflect: !0 })
 ], i.prototype, "column", 2);
@@ -115,4 +122,4 @@ export {
   r as H,
   i as a
 };
-//# sourceMappingURL=hx-grid-BsDBCTbt.js.map
+//# sourceMappingURL=hx-grid-gEjuF0cR.js.map

package/dist/shared/hx-grid-gEjuF0cR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-grid-gEjuF0cR.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, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.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  /** @internal */\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  /** @internal */\n  private _resolveGap(size: GapSize): string {\n    return GAP_TOKENS[size] ?? GAP_TOKENS.md;\n  }\n\n  /** @internal */\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  /** @internal */\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  /** @internal */\n  private _baseStyleMap(): Record<string, 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    };\n  }\n\n  override render() {\n    return html`\n      <div part=\"base\" role=\"presentation\" style=${styleMap(this._baseStyleMap())}>\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: PropertyValues<this>): 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  /** @internal */\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","styleMap","tokenStyles","__decorateClass","property","customElement","HelixGridItem","changed"],"mappings":"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"}

package/dist/shared/{hx-help-text-DaOPN1iB.js → hx-help-text-BAcEGRUE.js}

@@ -1,4 +1,4 @@
-import { css as p, html as n, LitElement as v, nothing as c } from "lit";
+import { css as p, LitElement as v, nothing as c, html as n } from "lit";
 import { property as f, customElement as u } from "lit/decorators.js";
 import { classMap as d } from "lit/directives/class-map.js";
 import { ifDefined as h } from "lit/directives/if-defined.js";
@@ -132,4 +132,4 @@ i = x([
 export {
   i as H
 };
-//# sourceMappingURL=hx-help-text-DaOPN1iB.js.map
+//# sourceMappingURL=hx-help-text-BAcEGRUE.js.map