@helixui/library 3.1.0 → 3.2.0-next.102

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

@@ -0,0 +1,257 @@
+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-text, #c92a2a));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-text, #c92a2a))}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-text, #c92a2a))}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-text, #c92a2a))}hx-form .messages--status{border-color:var(--hx-color-success-500, #198754);background-color:var(--hx-color-success-50, #f0fdf4);color:var(--hx-color-success-500, #198754)}hx-form .messages--warning{border-color:var(--hx-color-warning-500, #ffc107);background-color:var(--hx-color-warning-50, #fffbeb);color:var(--hx-color-warning-700, #92400e)}@media(forced-colors:active){hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select):focus{outline:2px solid CanvasText;outline-offset:2px}hx-form .hx-form-error-summary{border-color:LinkText}}
+`, b = v;
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (e, r, a, t) => {
+  for (var o = t > 1 ? void 0 : t ? y(r, a) : r, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (o = (t ? l(r, a, o) : l(o)) || o);
+  return t && o && g(r, a, o), o;
+};
+let i = class extends u {
+  constructor() {
+    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()) {
+        const t = this._collectValidationErrors();
+        this._validationErrors = t, this._applyAriaInvalidFromValidity(), this.updateComplete.then(() => {
+          const o = this.querySelector(".hx-form-error-summary");
+          o == null || o.focus();
+        }), this.dispatchEvent(
+          new CustomEvent("hx-invalid", {
+            bubbles: !0,
+            composed: !0,
+            detail: { errors: t }
+          })
+        );
+        return;
+      }
+      this._validationErrors = [], this._clearAriaInvalid();
+      const r = this.getFormData(), a = {};
+      for (const t of new Set(r.keys())) {
+        const o = r.getAll(t);
+        o.length === 1 && o[0] !== void 0 ? a[t] = o[0] : a[t] = o;
+      }
+      this.dispatchEvent(
+        new CustomEvent("hx-submit", {
+          bubbles: !0,
+          composed: !0,
+          detail: { valid: !0, values: a, formData: r }
+        })
+      );
+    }, this._handleReset = () => {
+      this._validationErrors = [], this._clearAriaInvalid(), this.dispatchEvent(
+        new CustomEvent("hx-reset", {
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+  }
+  // ─── Light DOM ───
+  createRenderRoot() {
+    return this;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("submit", this._handleSubmit), this.addEventListener("reset", this._handleReset);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("submit", this._handleSubmit), this.removeEventListener("reset", this._handleReset);
+  }
+  // ─── Public Methods ───
+  /**
+   * Checks the validity of all child form elements without showing
+   * validation UI. Returns `true` if all elements are valid.
+   */
+  checkValidity() {
+    return this._getAllValidatableElements().every((r) => "checkValidity" in r && typeof r.checkValidity == "function" ? r.checkValidity() : !0);
+  }
+  /**
+   * Checks validity and triggers the browser's constraint validation UI
+   * on each invalid element. Returns `true` if all elements are valid.
+   */
+  reportValidity() {
+    const e = this._getAllValidatableElements();
+    let r = !0;
+    for (const a of e)
+      "reportValidity" in a && typeof a.reportValidity == "function" && (a.reportValidity() || (r = !1));
+    return r;
+  }
+  /**
+   * Collects form data from all child form elements (native and hx-*).
+   * Returns a `FormData` object.
+   */
+  getFormData() {
+    const e = this.querySelector("form");
+    if (e)
+      return new FormData(e);
+    const r = new FormData(), a = this.getNativeFormElements();
+    for (const t of a) {
+      const o = t;
+      o.name && (o instanceof HTMLInputElement && (o.type === "checkbox" || o.type === "radio") ? o.checked && r.append(o.name, o.value || "on") : r.append(o.name, o.value));
+    }
+    return r;
+  }
+  /**
+   * Returns all child hx-* form components that implement the form
+   * component contract (hx-text-input, hx-select, hx-checkbox, hx-textarea,
+   * hx-radio-group, hx-switch).
+   *
+   * Note: This uses a hardcoded allowlist. When a new hx-* form component
+   * is added, update this selector to include it.
+   */
+  getFormElements() {
+    return Array.from(
+      this.querySelectorAll(
+        "hx-text-input, hx-select, hx-checkbox, hx-textarea, hx-radio-group, hx-switch"
+      )
+    );
+  }
+  /**
+   * Returns all native form elements (input, select, textarea, button)
+   * found within this component's light DOM.
+   */
+  getNativeFormElements() {
+    return Array.from(
+      this.querySelectorAll("input, select, textarea, button")
+    );
+  }
+  /**
+   * Programmatically sets server-side validation errors on the form.
+   * Renders an error summary and sets `aria-invalid="true"` on named fields.
+   *
+   * Useful for surfacing Drupal server-side validation responses.
+   *
+   * @param errors - Array of `{name, message}` pairs matching field `name` attributes.
+   */
+  setErrors(e) {
+    this._validationErrors = e, this._applyAriaInvalidFromErrors(e);
+  }
+  /**
+   * Programmatically sets a single field error. Merges with any existing errors.
+   *
+   * @param name - The `name` attribute of the field.
+   * @param message - The error message to display.
+   */
+  setFieldError(e, r) {
+    const a = this._validationErrors.filter((t) => t.name !== e);
+    this.setErrors([...a, { name: e, message: r }]);
+  }
+  /**
+   * Clears all validation errors from the error summary and removes
+   * `aria-invalid` from all fields.
+   */
+  clearErrors() {
+    this._clearAriaInvalid(), this._validationErrors = [];
+  }
+  // ─── Private Helpers ───
+  /**
+   * Returns all elements that support constraint validation, including
+   * both native form elements and hx-* components with `checkValidity`.
+   * @internal
+   */
+  _getAllValidatableElements() {
+    const e = Array.from(this.querySelectorAll("input, select, textarea")), r = this.getFormElements().filter(
+      (a) => "checkValidity" in a && typeof a.checkValidity == "function"
+    );
+    return [...e, ...r];
+  }
+  /**
+   * Sets `aria-invalid="true"` on fields with errors, removes it from valid fields.
+   * @internal
+   */
+  _applyAriaInvalidFromErrors(e) {
+    const r = new Set(e.map((t) => t.name)), a = this._getAllValidatableElements();
+    for (const t of a) {
+      const n = t.name ?? t.tagName.toLowerCase();
+      r.has(n) ? t.setAttribute("aria-invalid", "true") : t.removeAttribute("aria-invalid");
+    }
+  }
+  /**
+   * Sets `aria-invalid` based on native constraint validation state.
+   * @internal
+   */
+  _applyAriaInvalidFromValidity() {
+    const e = this._getAllValidatableElements();
+    for (const r of e)
+      "validity" in r && (r.validity.valid ? r.removeAttribute("aria-invalid") : r.setAttribute("aria-invalid", "true"));
+  }
+  /**
+   * Removes `aria-invalid` from all validatable elements.
+   * @internal
+   */
+  _clearAriaInvalid() {
+    const e = this._getAllValidatableElements();
+    for (const r of e)
+      r.removeAttribute("aria-invalid");
+  }
+  /**
+   * Collects constraint validation errors from all validatable elements after a failed submit attempt.
+   * @internal
+   */
+  _collectValidationErrors() {
+    const e = [], r = this._getAllValidatableElements();
+    for (const a of r)
+      if ("validity" in a && "validationMessage" in a) {
+        const t = a;
+        t.validity.valid || e.push({
+          name: t.name || t.tagName.toLowerCase(),
+          message: t.validationMessage
+        });
+      }
+    return e;
+  }
+  // ─── Render ───
+  render() {
+    const e = this._validationErrors.length > 0 ? c`
+            <div class="hx-form-error-summary" role="alert" aria-atomic="true" tabindex="-1">
+              <ul>
+                ${this._validationErrors.map(
+      (r) => c`<li>${r.message || r.name}</li>`
+    )}
+              </ul>
+            </div>
+          ` : m;
+    return this.action ? c`
+        ${e}
+        <form
+          action=${this.action}
+          method=${this.method}
+          enctype=${this.enctype}
+          name=${f(this.name || void 0)}
+          ?novalidate=${this.novalidate}
+        >
+          <slot></slot>
+        </form>
+      ` : c`${e}<slot></slot>`;
+  }
+};
+s([
+  x()
+], i.prototype, "_validationErrors", 2);
+s([
+  h({ type: String })
+], i.prototype, "action", 2);
+s([
+  h({ type: String })
+], i.prototype, "method", 2);
+s([
+  h({ type: Boolean })
+], i.prototype, "novalidate", 2);
+s([
+  h({ type: String })
+], i.prototype, "name", 2);
+s([
+  h({ type: String })
+], i.prototype, "enctype", 2);
+i = s([
+  d("hx-form")
+], i);
+export {
+  i as H
+};
+//# sourceMappingURL=hx-form-CkChEATa.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-form-CkChEATa.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-text, #c92a2a));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-text, #c92a2a))}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-text, #c92a2a))}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-text, #c92a2a))}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-grid-CXZf3jeK.js.map

@@ -1 +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":"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"}
+{"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 * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-space-8] - Spacing token.\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":"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"}

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

@@ -1,9 +1,10 @@
 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 { classMap as d } 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`
+import { a as u } from "./forced-colors-CTEDFRGa.js";
+import { H as m } from "./helix-element-BNEYeiys.js";
+const g = p`
   :host {
     display: block;
   }
@@ -16,7 +17,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, #64748b));
+    color: var(--hx-help-text-color, var(--hx-color-text-muted, #4a5362));
     margin: 0;
   }
 
@@ -33,25 +34,25 @@ const m = p`
   /* ─── Variant: default ─── */
 
   .help-text--default {
-    --hx-help-text-color: var(--hx-color-neutral-500, #64748b);
+    --hx-help-text-color: var(--hx-color-text-muted, #4a5362);
   }
 
   /* ─── Variant: error ─── */
 
   .help-text--error {
-    --hx-help-text-color: var(--hx-color-error-600, #b91c1c);
+    --hx-help-text-color: var(--hx-color-error-600, #c92a2a);
   }
 
   /* ─── Variant: warning ─── */
 
   .help-text--warning {
-    --hx-help-text-color: var(--hx-color-warning-700, #92400e);
+    --hx-help-text-color: var(--hx-color-warning-700, #804605);
   }
 
   /* ─── Variant: success ─── */
 
   .help-text--success {
-    --hx-help-text-color: var(--hx-color-success-700, #166534);
+    --hx-help-text-color: var(--hx-color-success-700, #146831);
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */
@@ -74,12 +75,12 @@ const m = p`
     }
   }
 `;
-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;
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, x = (i, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? y(e, o) : e, a = i.length - 1, s; a >= 0; a--)
+    (s = i[a]) && (t = (r ? s(e, o, t) : s(t)) || t);
+  return r && t && w(e, o, t), t;
 };
-const y = l`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
+const k = 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"
@@ -91,7 +92,7 @@ const y = l`<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>`, k = l`<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">
   <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"
@@ -108,7 +109,7 @@ const y = l`<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>`, _ = l`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
+</svg>`, C = 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"
@@ -118,38 +119,38 @@ const y = l`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em"
     stroke-linejoin="round"
     fill="none"
   />
-</svg>`, C = {
+</svg>`, H = {
   default: c,
-  error: y,
-  warning: k,
-  success: _
+  error: k,
+  warning: _,
+  success: C
 };
-let i = class extends d {
+let n = class extends m {
   constructor() {
     super(...arguments), this.variant = "default";
   }
   render() {
-    const n = {
+    const i = {
       "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;
+    }, e = H[this.variant], o = this.variant === "error" ? "alert" : void 0, r = this.variant === "warning" || this.variant === "success" ? "polite" : void 0;
     return l`<span
       part="base"
-      class=${u(n)}
+      class=${d(i)}
       role=${h(o)}
       aria-live=${h(r)}
       >${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];
+n.styles = [g, u];
 x([
   v({ type: String, reflect: !0 })
-], i.prototype, "variant", 2);
-i = x([
+], n.prototype, "variant", 2);
+n = x([
   f("hx-help-text")
-], i);
+], n);
 export {
-  i as H
+  n as H
 };
-//# sourceMappingURL=hx-help-text-D7eytSim.js.map
+//# sourceMappingURL=hx-help-text-Xb2Yr8x2.js.map

package/dist/shared/hx-help-text-Xb2Yr8x2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-help-text-Xb2Yr8x2.js","sources":["../../src/components/hx-help-text/hx-help-text.styles.ts","../../src/components/hx-help-text/hx-help-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixHelpTextStyles = css`\n  :host {\n    display: block;\n  }\n\n  .help-text {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--hx-help-text-icon-gap, 0.375rem);\n    font-family: var(--hx-help-text-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));\n    font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));\n    line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));\n    color: var(--hx-help-text-color, var(--hx-color-text-muted, #4a5362));\n    margin: 0;\n  }\n\n  .help-text__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .help-text__text {\n    min-width: 0;\n  }\n\n  /* ─── Variant: default ─── */\n\n  .help-text--default {\n    --hx-help-text-color: var(--hx-color-text-muted, #4a5362);\n  }\n\n  /* ─── Variant: error ─── */\n\n  .help-text--error {\n    --hx-help-text-color: var(--hx-color-error-600, #c92a2a);\n  }\n\n  /* ─── Variant: warning ─── */\n\n  .help-text--warning {\n    --hx-help-text-color: var(--hx-color-warning-700, #804605);\n  }\n\n  /* ─── Variant: success ─── */\n\n  .help-text--success {\n    --hx-help-text-color: var(--hx-color-success-700, #146831);\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .help-text {\n      color: GrayText;\n    }\n\n    .help-text--error {\n      color: LinkText;\n    }\n\n    .help-text--warning {\n      color: CanvasText;\n    }\n\n    .help-text--success {\n      color: CanvasText;\n    }\n  }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixHelpTextStyles } from './hx-help-text.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/** Icon SVG for error variant (circle with exclamation mark). */\nconst errorIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <line\n    x1=\"8\"\n    y1=\"4.5\"\n    x2=\"8\"\n    y2=\"8.5\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for warning variant (triangle with exclamation mark). */\nconst warningIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <path\n    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\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    fill=\"none\"\n  />\n  <line\n    x1=\"8\"\n    y1=\"6\"\n    x2=\"8\"\n    y2=\"9\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.625\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for success variant (circle with checkmark). */\nconst successIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <path\n    d=\"M5.25 8.25l1.75 1.75 3.75-3.75\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    fill=\"none\"\n  />\n</svg>`;\n\n/** Map of variant to icon template. Default has no icon. */\nconst variantIcons = {\n  default: nothing,\n  error: errorIcon,\n  warning: warningIcon,\n  success: successIcon,\n} as const;\n\n/**\n * Standardized help/hint text displayed below form fields.\n * Used by hx-field as a consistent sub-component for guidance and validation messages.\n *\n * Non-default variants render an inline icon alongside the text to satisfy\n * WCAG 1.4.1 (color is not the sole visual indicator). The `error` variant\n * uses `role=\"alert\"` for immediate screen-reader announcement; `warning`\n * and `success` use `aria-live=\"polite\"` for non-intrusive announcements.\n *\n * @summary Help text displayed below form controls for guidance or validation feedback.\n *\n * @tag hx-help-text\n *\n * @slot - The help text content.\n *\n * @csspart base - The root element of the help text.\n * @csspart icon - The icon wrapper (only rendered for non-default variants).\n * @csspart text - The text wrapper around the default slot.\n *\n * @cssprop [--hx-help-text-color=var(--hx-color-neutral-500)] - Text color.\n * @cssprop [--hx-help-text-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-help-text-font-size=var(--hx-font-size-sm)] - Font size.\n * @cssprop [--hx-help-text-font-weight=var(--hx-font-weight-normal)] - Font weight.\n * @cssprop [--hx-help-text-line-height=var(--hx-line-height-normal)] - Line height.\n * @cssprop [--hx-help-text-icon-gap=0.375rem] - Gap between icon and text.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-normal] - Font weight.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-color-error-600] - Color.\n * @cssprop [--hx-color-warning-700] - Color.\n * @cssprop [--hx-color-success-700] - Color.\n */\n@customElement('hx-help-text')\nexport class HelixHelpText extends HelixElement {\n  static override styles = [helixHelpTextStyles, forcedColorsSurface];\n\n  /**\n   * Visual variant that determines the text color and icon.\n   * Use `error` for validation errors, `warning` for cautions, `success` for confirmation.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'error' | 'warning' | 'success' = 'default';\n\n  override render() {\n    const classes = {\n      'help-text': true,\n      [`help-text--${this.variant}`]: true,\n    };\n\n    const icon = variantIcons[this.variant];\n    const role = this.variant === 'error' ? 'alert' : undefined;\n    const ariaLive =\n      this.variant === 'warning' || this.variant === 'success' ? 'polite' : undefined;\n\n    return html`<span\n      part=\"base\"\n      class=${classMap(classes)}\n      role=${ifDefined(role)}\n      aria-live=${ifDefined(ariaLive)}\n      >${icon !== nothing\n        ? html`<span part=\"icon\" class=\"help-text__icon\">${icon}</span>`\n        : nothing}<span part=\"text\" class=\"help-text__text\"><slot></slot></span>\n    </span>`;\n  }\n}\n\n/** Canonical type alias for the hx-help-text component. */\nexport type HxHelpText = HelixHelpText;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-help-text': HelixHelpText;\n  }\n}\n"],"names":["helixHelpTextStyles","css","errorIcon","html","warningIcon","successIcon","variantIcons","nothing","HelixHelpText","HelixElement","classes","icon","role","ariaLive","classMap","ifDefined","forcedColorsSurface","__decorateClass","property","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACQnC,MAAMC,IAAYC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAeZC,IAAcD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAoBdE,IAAcF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAadG,IAAe;AAAA,EACnB,SAASC;AAAA,EACT,OAAOL;AAAA,EACP,SAASE;AAAA,EACT,SAASC;AACX;AAqCO,IAAMG,IAAN,cAA4BC,EAAa;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,UAAuD;AAAA,EAAA;AAAA,EAE9C,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,aAAa;AAAA,MACb,CAAC,cAAc,KAAK,OAAO,EAAE,GAAG;AAAA,IAAA,GAG5BC,IAAOL,EAAa,KAAK,OAAO,GAChCM,IAAO,KAAK,YAAY,UAAU,UAAU,QAC5CC,IACJ,KAAK,YAAY,aAAa,KAAK,YAAY,YAAY,WAAW;AAExE,WAAOV;AAAA;AAAA,cAEGW,EAASJ,CAAO,CAAC;AAAA,aAClBK,EAAUH,CAAI,CAAC;AAAA,kBACVG,EAAUF,CAAQ,CAAC;AAAA,SAC5BF,MAASJ,IACRJ,8CAAiDQ,CAAI,YACrDJ,CAAO;AAAA;AAAA,EAEf;AACF;AAhCaC,EACK,SAAS,CAACR,GAAqBgB,CAAmB;AAQlEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BV,EASX,WAAA,WAAA,CAAA;AATWA,IAANS,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBX,CAAA;"}