@helixui/library 2.1.2 → 3.0.0-next.65

package/dist/shared/{hx-form-fJE-FJQV.js → hx-form-ButQFt9A.js}

@@ -1,7 +1,8 @@
-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";
+import { html as c, nothing as m } from "lit";
+import { state as x, property as h, customElement as d } from "lit/decorators.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { A as p } from "./adopted-stylesheets-BZZnCSAs.js";
+import { H as u } from "./helix-element-BNEYeiys.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) => {
@@ -9,9 +10,9 @@ var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (e, r, a
     (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 {
+let i = class extends u {
   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) => {
+    super(...arguments), this._styles = new p(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()) {
@@ -207,27 +208,21 @@ let i = class extends m {
   // ─── 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"
-            >
+            <div class="hx-form-error-summary" role="alert" aria-atomic="true" tabindex="-1">
               <ul>
                 ${this._validationErrors.map(
       (r) => c`<li>${r.message || r.name}</li>`
     )}
               </ul>
             </div>
-          ` : x;
+          ` : m;
     return this.action ? c`
         ${e}
         <form
           action=${this.action}
           method=${this.method}
           enctype=${this.enctype}
-          name=${p(this.name || void 0)}
+          name=${f(this.name || void 0)}
           ?novalidate=${this.novalidate}
         >
           <slot></slot>
@@ -236,7 +231,7 @@ let i = class extends m {
   }
 };
 s([
-  d()
+  x()
 ], i.prototype, "_validationErrors", 2);
 s([
   h({ type: String })
@@ -254,9 +249,9 @@ s([
   h({ type: String })
 ], i.prototype, "enctype", 2);
 i = s([
-  f("hx-form")
+  d("hx-form")
 ], i);
 export {
   i as H
 };
-//# sourceMappingURL=hx-form-fJE-FJQV.js.map
+//# sourceMappingURL=hx-form-ButQFt9A.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-form-ButQFt9A.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\n/**\n * Scoped CSS for hx-form (applied to light DOM via CSSStyleSheet adoption).\n *\n * @media (forced-colors: active) rules are authored directly in\n * `../../styles/form/form.scoped.css` so they remain co-located with the\n * selectors they override. See the bottom of that file for the complete\n * forced-colors block.\n */\nexport const helixFormScopedCss = formScopedCss;\n","import { html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.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 HelixElement {\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 class=\"hx-form-error-summary\" role=\"alert\" aria-atomic=\"true\" tabindex=\"-1\">\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","HelixElement","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-B7L9odbA.js → hx-format-date-CKnlQOmV.js}

@@ -1,7 +1,7 @@
-import { css as _, LitElement as D, html as M } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
+import { css as M, html as _ } from "lit";
 import { property as h, customElement as w } from "lit/decorators.js";
-const N = _`
+import { H as D } from "./helix-element-BNEYeiys.js";
+const N = M`
   :host {
     display: inline;
   }
@@ -11,6 +11,17 @@ const N = _`
     font: inherit;
     color: inherit;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-format-date renders text-only content using color: inherit from its parent.
+     forced-color-adjust: auto (default) is sufficient — the browser maps
+     inherited text color to CanvasText automatically in forced-colors mode. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 `;
 var T = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, n = (o, t, i, e) => {
   for (var a = e > 1 ? void 0 : e ? $(t, i) : t, s = o.length - 1, u; s >= 0; s--)
@@ -78,15 +89,15 @@ let r = class extends D {
         parseInt(m.hour === "24" ? "0" : m.hour ?? "0"),
         parseInt(m.minute ?? "0"),
         parseInt(m.second ?? "0")
-      ), 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}`;
+      ), u = Math.round((s(e) - s(a)) / 6e4), l = u >= 0 ? "+" : "-", y = Math.abs(u), d = String(Math.floor(y / 60)).padStart(2, "0"), v = String(y % 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}${l}${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), 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}`;
+    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), l = Math.round(e / 3600), y = Math.abs(l), 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 {
@@ -95,7 +106,7 @@ let r = class extends D {
         return "";
       }
     try {
-      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");
+      return a < 60 ? c.format(e, "second") : u < 60 ? c.format(s, "minute") : y < 24 ? c.format(l, "hour") : v < 30 ? c.format(d, "day") : m < 12 ? c.format(p, "month") : c.format(g, "year");
     } catch {
       return "";
     }
@@ -123,7 +134,7 @@ let r = class extends D {
   // ─── Render ───
   render() {
     const o = this._getDate(), t = this._getDatetimeAttr(o), i = this.relative ? this._formatRelative(o) : this._formatAbsolute(o);
-    return M`<time part="base" datetime=${t}>${i}</time>`;
+    return _`<time part="base" datetime=${t}>${i}</time>`;
   }
 };
 r.styles = [N];
@@ -177,4 +188,4 @@ r = n([
 export {
   r as H
 };
-//# sourceMappingURL=hx-format-date-B7L9odbA.js.map
+//# sourceMappingURL=hx-format-date-CKnlQOmV.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-format-date-CKnlQOmV.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  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  /* hx-format-date renders text-only content using color: inherit from its parent.\n     forced-color-adjust: auto (default) is sufficient — the browser maps\n     inherited text color to CanvasText automatically in forced-colors mode. */\n  @media (forced-colors: active) {\n    :host {\n      forced-color-adjust: auto;\n    }\n  }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\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 HelixElement {\n  static override styles = [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","HelixElement","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","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-grid-BIAR5h9m.js → hx-grid-CXZf3jeK.js}

@@ -1,26 +1,36 @@
-import { css as m, LitElement as c, html as d } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as s, customElement as g } from "lit/decorators.js";
+import { css as h, html as m } from "lit";
+import { property as s, customElement as d } from "lit/decorators.js";
 import { styleMap as y } from "lit/directives/style-map.js";
-const f = m`
+import { H as g } from "./helix-element-BNEYeiys.js";
+const f = h`
   :host {
     display: block;
     box-sizing: border-box;
     width: 100%;
   }
-`, v = m`
+`, v = h`
   :host {
     display: block;
     min-width: 0;
     min-height: 0;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-grid and hx-grid-item are layout wrappers with no state communicated
+     via color. forced-color-adjust: auto (default) is sufficient. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 `;
-var x = Object.defineProperty, G = Object.getOwnPropertyDescriptor, e = (t, l, a, p) => {
-  for (var o = p > 1 ? void 0 : p ? G(l, a) : l, n = t.length - 1, u; n >= 0; n--)
-    (u = t[n]) && (o = (p ? u(l, a, o) : u(o)) || o);
-  return p && o && x(l, a, o), o;
+var x = Object.defineProperty, G = Object.getOwnPropertyDescriptor, e = (t, l, p, a) => {
+  for (var o = a > 1 ? void 0 : a ? G(l, p) : l, u = t.length - 1, n; u >= 0; u--)
+    (n = t[u]) && (o = (a ? n(l, p, o) : n(o)) || o);
+  return a && o && x(l, p, o), o;
 };
-const h = {
+const c = {
   none: "0",
   xs: "var(--hx-space-1, 0.25rem)",
   sm: "var(--hx-space-2, 0.5rem)",
@@ -28,7 +38,7 @@ const h = {
   lg: "var(--hx-space-6, 1.5rem)",
   xl: "var(--hx-space-8, 2rem)"
 };
-let r = class extends c {
+let r = class extends g {
   constructor() {
     super(...arguments), this.columns = 1, this.gap = "md", this.align = "stretch", this.justify = "stretch";
   }
@@ -39,7 +49,7 @@ let r = class extends c {
   }
   /** @internal */
   _resolveGap(t) {
-    return h[t] ?? h.md;
+    return c[t] ?? c.md;
   }
   /** @internal */
   _computedRowGap() {
@@ -61,7 +71,7 @@ let r = class extends c {
     };
   }
   render() {
-    return d`
+    return m`
       <div part="base" role="presentation" style=${y(this._baseStyleMap())}>
         <slot></slot>
       </div>
@@ -88,9 +98,9 @@ e([
   s({ reflect: !0 })
 ], r.prototype, "justify", 2);
 r = e([
-  g("hx-grid")
+  d("hx-grid")
 ], r);
-let i = class extends c {
+let i = class extends g {
   updated(t) {
     super.updated(t), (t.has("column") || t.has("row") || t.has("span")) && this._applyHostGridStyles();
   }
@@ -102,7 +112,7 @@ let i = class extends c {
     this.column ? this.style.gridColumn = this.column : this.span !== void 0 ? this.style.gridColumn = `span ${this.span}` : this.style.gridColumn = "", this.row ? this.style.gridRow = this.row : this.style.gridRow = "";
   }
   render() {
-    return d`<slot></slot>`;
+    return m`<slot></slot>`;
   }
 };
 i.styles = [v];
@@ -116,10 +126,10 @@ e([
   s({ type: Number, reflect: !0 })
 ], i.prototype, "span", 2);
 i = e([
-  g("hx-grid-item")
+  d("hx-grid-item")
 ], i);
 export {
   r as H,
   i as a
 };
-//# sourceMappingURL=hx-grid-BIAR5h9m.js.map
+//# sourceMappingURL=hx-grid-CXZf3jeK.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-grid-CXZf3jeK.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  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  /* hx-grid and hx-grid-item are layout wrappers with no state communicated\n     via color. forced-color-adjust: auto (default) is sufficient. */\n  @media (forced-colors: active) {\n    :host {\n      forced-color-adjust: auto;\n    }\n  }\n`;\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixGridStyles, helixGridItemStyles } from './hx-grid.styles.js';\n\ntype GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\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 HelixElement {\n  static override styles = [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: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' = '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: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 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: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;\n\n  /**\n   * Aligns grid items along the block axis (align-items).\n   * @attr align\n   */\n  @property({ reflect: true })\n  align: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n  /**\n   * Justifies grid items along the inline axis (justify-items).\n   * @attr justify\n   */\n  @property({ reflect: true })\n  justify: 'start' | 'center' | 'end' | 'stretch' = '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 HelixElement {\n  static override styles = [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    super.updated(changed);\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","HelixElement","cols","size","html","styleMap","__decorateClass","property","customElement","HelixGridItem","changed"],"mappings":";;;;AAEO,MAAMA,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQlBC,IAAsBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACDnC,MAAME,IAAsC;AAAA,EAC1C,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAmBO,IAAMC,IAAN,cAAwBC,EAAa;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,UAA2B,GAO3B,KAAA,MAAiD,MAqBjD,KAAA,QAAgD,WAOhD,KAAA,UAAkD;AAAA,EAAA;AAAA;AAAA,EAG1C,uBAA+B;AACrC,UAAMC,IAAO,KAAK;AAClB,WAAI,OAAOA,KAAS,YAAY,QAAQ,KAAK,OAAOA,CAAI,CAAC,IAChD,iCAAiCA,CAAI,YAEvC,0BAA0BA,CAAI;AAAA,EACvC;AAAA;AAAA,EAGQ,YAAYC,GAAuB;AACzC,WAAOJ,EAAWI,CAAI,KAAKJ,EAAW;AAAA,EACxC;AAAA;AAAA,EAGQ,kBAA0B;AAChC,WAAI,KAAK,SACA,0BAA0B,KAAK,YAAY,KAAK,MAAM,CAAC,MAEzD,6CAA6C,KAAK,YAAY,KAAK,GAAG,CAAC;AAAA,EAChF;AAAA;AAAA,EAGQ,qBAA6B;AACnC,WAAI,KAAK,YACA,6BAA6B,KAAK,YAAY,KAAK,SAAS,CAAC,MAE/D,gDAAgD,KAAK,YAAY,KAAK,GAAG,CAAC;AAAA,EACnF;AAAA;AAAA,EAGQ,gBAAwC;AAC9C,WAAO;AAAA,MACL,SAAS;AAAA,MACT,yBAAyB,KAAK,qBAAA;AAAA,MAC9B,WAAW,KAAK,gBAAA;AAAA,MAChB,cAAc,KAAK,mBAAA;AAAA,MACnB,eAAe,KAAK;AAAA,MACpB,iBAAiB,KAAK;AAAA,IAAA;AAAA,EAE1B;AAAA,EAES,SAAS;AAChB,WAAOK;AAAA,mDACwCC,EAAS,KAAK,cAAA,CAAe,CAAC;AAAA;AAAA;AAAA;AAAA,EAI/E;AACF;AA9FaL,EACK,SAAS,CAACJ,CAAe;AAOzCU,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAPhBP,EAQX,WAAA,WAAA,CAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAdhBP,EAeX,WAAA,OAAA,CAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,WAAW,SAAS,IAAM;AAAA,GArBtCP,EAsBX,WAAA,UAAA,CAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,cAAc,SAAS,IAAM;AAAA,GA5BzCP,EA6BX,WAAA,aAAA,CAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAnChBP,EAoCX,WAAA,SAAA,CAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA1ChBP,EA2CX,WAAA,WAAA,CAAA;AA3CWA,IAANM,EAAA;AAAA,EADNE,EAAc,SAAS;AAAA,GACXR,CAAA;AA4GN,IAAMS,IAAN,cAA4BR,EAAa;AAAA,EAwBrC,QAAQS,GAAqC;AACpD,UAAM,QAAQA,CAAO,IACjBA,EAAQ,IAAI,QAAQ,KAAKA,EAAQ,IAAI,KAAK,KAAKA,EAAQ,IAAI,MAAM,MACnE,KAAK,qBAAA;AAAA,EAET;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,qBAAA;AAAA,EACP;AAAA;AAAA,EAGQ,uBAA6B;AACnC,IAAI,KAAK,SACP,KAAK,MAAM,aAAa,KAAK,SACpB,KAAK,SAAS,SACvB,KAAK,MAAM,aAAa,QAAQ,KAAK,IAAI,KAEzC,KAAK,MAAM,aAAa,IAEtB,KAAK,MACP,KAAK,MAAM,UAAU,KAAK,MAE1B,KAAK,MAAM,UAAU;AAAA,EAEzB;AAAA,EAES,SAAS;AAChB,WAAON;AAAA,EACT;AACF;AAvDaK,EACK,SAAS,CAACX,CAAmB;AAO7CQ,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAPhBE,EAQX,WAAA,UAAA,CAAA;AAOAH,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAdhBE,EAeX,WAAA,OAAA,CAAA;AAOAH,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArB9BE,EAsBX,WAAA,QAAA,CAAA;AAtBWA,IAANH,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBC,CAAA;"}

package/dist/shared/{hx-help-text-Bmb80bP4.js → hx-help-text-D7eytSim.js}

@@ -1,8 +1,8 @@
-import { css as p, LitElement as v, nothing as c, html as n } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as f, customElement as u } from "lit/decorators.js";
-import { classMap as d } from "lit/directives/class-map.js";
+import { css as p, nothing as c, html as l } from "lit";
+import { property as v, customElement as f } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
 import { ifDefined as h } from "lit/directives/if-defined.js";
+import { H as d } from "./helix-element-BNEYeiys.js";
 const m = p`
   :host {
     display: block;
@@ -16,7 +16,7 @@ const m = p`
     font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));
     line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));
-    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #6b7280));
+    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #64748b));
     margin: 0;
   }
 
@@ -33,33 +33,53 @@ const m = p`
   /* ─── Variant: default ─── */
 
   .help-text--default {
-    --hx-help-text-color: var(--hx-color-neutral-500, #6b7280);
+    --hx-help-text-color: var(--hx-color-neutral-500, #64748b);
   }
 
   /* ─── Variant: error ─── */
 
   .help-text--error {
-    --hx-help-text-color: var(--hx-color-error-600, #dc2626);
+    --hx-help-text-color: var(--hx-color-error-600, #b91c1c);
   }
 
   /* ─── Variant: warning ─── */
 
   .help-text--warning {
-    --hx-help-text-color: var(--hx-color-warning-700, #b45309);
+    --hx-help-text-color: var(--hx-color-warning-700, #92400e);
   }
 
   /* ─── Variant: success ─── */
 
   .help-text--success {
-    --hx-help-text-color: var(--hx-color-success-700, #15803d);
+    --hx-help-text-color: var(--hx-color-success-700, #166534);
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .help-text {
+      color: GrayText;
+    }
+
+    .help-text--error {
+      color: LinkText;
+    }
+
+    .help-text--warning {
+      color: CanvasText;
+    }
+
+    .help-text--success {
+      color: CanvasText;
+    }
   }
 `;
-var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, x = (l, e, o, r) => {
-  for (var t = r > 1 ? void 0 : r ? w(e, o) : e, s = l.length - 1, a; s >= 0; s--)
-    (a = l[s]) && (t = (r ? a(e, o, t) : a(t)) || t);
+var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, x = (n, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? w(e, o) : e, s = n.length - 1, a; s >= 0; s--)
+    (a = n[s]) && (t = (r ? a(e, o, t) : a(t)) || t);
   return r && t && g(e, o, t), t;
 };
-const y = n`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
+const y = l`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
   <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" fill="none" />
   <line
     x1="8"
@@ -71,7 +91,7 @@ const y = n`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em"
     stroke-linecap="round"
   />
   <circle cx="8" cy="11" r="0.75" fill="currentColor" />
-</svg>`, _ = n`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
+</svg>`, k = l`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
   <path
     d="M7.134 2.5a1 1 0 011.732 0l5.196 9a1 1 0 01-.866 1.5H2.804a1 1 0 01-.866-1.5l5.196-9z"
     stroke="currentColor"
@@ -88,7 +108,7 @@ const y = n`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em"
     stroke-linecap="round"
   />
   <circle cx="8" cy="11" r="0.625" fill="currentColor" />
-</svg>`, k = n`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
+</svg>`, _ = l`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
   <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" fill="none" />
   <path
     d="M5.25 8.25l1.75 1.75 3.75-3.75"
@@ -101,35 +121,35 @@ const y = n`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em"
 </svg>`, C = {
   default: c,
   error: y,
-  warning: _,
-  success: k
+  warning: k,
+  success: _
 };
-let i = class extends v {
+let i = class extends d {
   constructor() {
     super(...arguments), this.variant = "default";
   }
   render() {
-    const l = {
+    const n = {
       "help-text": !0,
       [`help-text--${this.variant}`]: !0
     }, e = C[this.variant], o = this.variant === "error" ? "alert" : void 0, r = this.variant === "warning" || this.variant === "success" ? "polite" : void 0;
-    return n`<span
+    return l`<span
       part="base"
-      class=${d(l)}
+      class=${u(n)}
       role=${h(o)}
       aria-live=${h(r)}
-      >${e !== c ? n`<span part="icon" class="help-text__icon">${e}</span>` : c}<span part="text" class="help-text__text"><slot></slot></span>
+      >${e !== c ? l`<span part="icon" class="help-text__icon">${e}</span>` : c}<span part="text" class="help-text__text"><slot></slot></span>
     </span>`;
   }
 };
 i.styles = [m];
 x([
-  f({ type: String, reflect: !0 })
+  v({ type: String, reflect: !0 })
 ], i.prototype, "variant", 2);
 i = x([
-  u("hx-help-text")
+  f("hx-help-text")
 ], i);
 export {
   i as H
 };
-//# sourceMappingURL=hx-help-text-Bmb80bP4.js.map
+//# sourceMappingURL=hx-help-text-D7eytSim.js.map