npm - @helixui/library - Versions diffs - 1.1.1 → 1.1.2-next.10 - Mend

@helixui/library 1.1.1 → 1.1.2-next.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (639) hide show

package/dist/shared/{hx-form-BpS6v3Iu.js.map → hx-form-fJE-FJQV.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-form-BpS6v3Iu.js","sources":["../../src/styles/form/form.scoped.css?raw","../../src/components/hx-form/hx-form.styles.ts","../../src/components/hx-form/hx-form.ts"],"sourcesContent":["export default \"hx-form{display:flex;flex-direction:column;gap:var(--hx-form-gap, var(--hx-space-4, 1rem));max-width:var(--hx-form-max-width, none);padding:var(--hx-form-padding, 0)}hx-form .hx-form-error-summary{border:var(--hx-border-width-thin, 1px) solid var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));border-radius:var(--hx-border-radius-md, .375rem);background-color:var(--hx-color-error-50, #fef2f2);color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem);font-size:var(--hx-font-size-sm, .875rem);line-height:var(--hx-line-height-normal, 1.5);font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))}hx-form .hx-form-error-summary ul{margin:0;padding:0 0 0 var(--hx-space-4, 1rem)}hx-form .hx-form-error-summary li{margin-bottom:var(--hx-space-1, .25rem)}hx-form .hx-form-error-summary li:last-child{margin-bottom:0}hx-form .form-item{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))}hx-form .form-item+.form-item{margin-top:var(--hx-space-4, 1rem)}hx-form label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-input-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}hx-form .form-required{color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));font-weight:var(--hx-font-weight-bold, 700)}hx-form .description{font-size:var(--hx-font-size-xs, .75rem);color:var(--hx-color-neutral-500, #6c757d);line-height:var(--hx-line-height-normal, 1.5)}hx-form .form-item :is(,:before,:after){box-sizing:border-box}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea){display:block;width:100%;border:var(--hx-border-width-thin, 1px) solid var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-input-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));font-size:var(--hx-font-size-md, 1rem);color:var(--hx-input-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}hx-form input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]){min-height:var(--hx-size-10, 2.5rem)}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea)::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea):focus{outline:0;border-color:var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) calc(var(--hx-focus-ring-opacity, .25) 100%),transparent)}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea):disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea):read-only{background-color:var(--hx-color-neutral-100, #e9ecef)}hx-form input[type=search]::-webkit-search-decoration,hx-form input[type=search]::-webkit-search-cancel-button,hx-form input[type=search]::-webkit-search-results-button,hx-form input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}hx-form input[type=number]::-webkit-inner-spin-button,hx-form input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}hx-form input[type=number]{appearance:textfield}hx-form textarea{min-height:var(--hx-textarea-min-height, var(--hx-size-20, 5rem));resize:vertical}hx-form select{display:block;width:100%;border:var(--hx-border-width-thin, 1px) solid var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-select-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));padding:var(--hx-space-2, .5rem) var(--hx-space-8, 2rem) var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));font-size:var(--hx-font-size-md, 1rem);color:var(--hx-select-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-input-height-md, var(--hx-size-10, 2.5rem));cursor:pointer;transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E\\\");background-repeat:no-repeat;background-position:right var(--hx-space-3, .75rem) center;background-size:12px 8px}hx-form select:focus{outline:0;border-color:var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form select:disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form select[multiple]{min-height:var(--hx-size-20, 5rem);padding-right:var(--hx-space-3, .75rem);background-image:none}hx-form select[multiple] option{padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem)}hx-form select::-ms-expand{display:none}hx-form :is(input[type=checkbox],input[type=radio]){appearance:none;-webkit-appearance:none;-moz-appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin:0;background-color:var(--hx-color-neutral-0, #ffffff);cursor:pointer;vertical-align:middle;transition:background-color var(--hx-transition-fast, .15s ease),border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}hx-form input[type=checkbox]{width:var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));height:var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));border:var(--hx-border-width-medium, 2px) solid var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, .25rem))}hx-form input[type=checkbox]:checked{background-color:var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));border-color:var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));background-image:url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\\\");background-repeat:no-repeat;background-position:center;background-size:100%}hx-form input[type=checkbox]:indeterminate{background-color:var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));border-color:var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));background-image:url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8H12' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E\\\");background-repeat:no-repeat;background-position:center;background-size:100%}hx-form input[type=checkbox]:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));outline-offset:var(--hx-focus-ring-offset, 2px)}hx-form input[type=checkbox]:hover:not(:disabled){border-color:var(--hx-color-primary-500, #2563eb)}hx-form input[type=checkbox]:checked:hover:not(:disabled){filter:brightness(var(--hx-filter-brightness-hover, .9))}hx-form :is(input[type=checkbox],input[type=radio]):disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form :is(.form-type-checkbox,.form-type-checkbox-toggle){display:flex;align-items:flex-start;gap:var(--hx-space-2, .5rem)}hx-form :is(.form-type-checkbox,.form-type-checkbox-toggle) label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5);cursor:pointer;user-select:none;-webkit-user-select:none}hx-form input[type=radio]{width:var(--hx-radio-size, var(--hx-size-5, 1.25rem));height:var(--hx-radio-size, var(--hx-size-5, 1.25rem));border:var(--hx-border-width-medium, 2px) solid var(--hx-radio-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-border-radius-full, 9999px)}hx-form input[type=radio]:checked{border-color:var(--hx-radio-checked-border-color, var(--hx-color-primary-500, #2563eb));background-color:var(--hx-radio-checked-bg, var(--hx-color-primary-500, #2563eb));box-shadow:inset 0 0 0 calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * .3) var(--hx-radio-dot-color, var(--hx-color-neutral-0, #ffffff))}hx-form input[type=radio]:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-radio-focus-ring-color, var(--hx-focus-ring-color, #2563eb));outline-offset:var(--hx-focus-ring-offset, 2px)}hx-form input[type=radio]:hover:not(:disabled):not(:checked){border-color:var(--hx-color-neutral-400, #adb5bd)}hx-form .form-type-radio{display:inline-flex;align-items:center;gap:var(--hx-space-2, .5rem)}hx-form .form-type-radio label{font-size:var(--hx-font-size-md, 1rem);color:var(--hx-radio-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5);cursor:pointer;user-select:none;-webkit-user-select:none}hx-form .form-radios{display:flex;flex-direction:column;gap:var(--hx-radio-group-gap, var(--hx-space-3, .75rem))}hx-form .form-radios--horizontal{flex-direction:row;flex-wrap:wrap}hx-form .form-type-switch{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-font-family-sans, sans-serif)}hx-form .form-type-switch .switch__control-row{display:flex;align-items:center;gap:var(--hx-space-2, .5rem)}hx-form .form-type-switch input[type=checkbox]{position:relative;width:var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));height:var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));border:none;border-radius:var(--hx-border-radius-full, 9999px);background-color:var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));transition:background-color var(--hx-transition-fast, .15s ease);background-image:none}hx-form .form-type-switch input[type=checkbox]:before{content:\\\"\\\";position:absolute;top:50%;left:var(--hx-switch-thumb-offset, var(--hx-space-0-5, .125rem));transform:translateY(-50%);width:var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));height:var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));border-radius:var(--hx-border-radius-full, 9999px);background-color:var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));box-shadow:var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05)));transition:transform var(--hx-transition-fast, .15s ease)}hx-form .form-type-switch input[type=checkbox]:checked{background-color:var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));background-image:none}hx-form .form-type-switch input[type=checkbox]:checked:before{transform:translateY(-50%) translate(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)))}hx-form .form-type-switch input[type=checkbox]:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #2563eb));outline-offset:var(--hx-focus-ring-offset, 2px)}hx-form .form-type-switch input[type=checkbox]:disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form .form-type-switch label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5);cursor:pointer;user-select:none;-webkit-user-select:none}hx-form .form-type-switch--sm input[type=checkbox]{width:var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));height:var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem))}hx-form .form-type-switch--sm input[type=checkbox]:before{width:var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, .875rem));height:var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, .875rem))}hx-form .form-type-switch--sm input[type=checkbox]:checked:before{transform:translateY(-50%) translate(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, .875rem)))}hx-form .form-type-switch--lg input[type=checkbox]{width:var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));height:var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem))}hx-form .form-type-switch--lg input[type=checkbox]:before{width:var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));height:var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem))}hx-form .form-type-switch--lg input[type=checkbox]:checked:before{transform:translateY(-50%) translate(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)))}hx-form form{display:flex;flex-direction:column;gap:var(--hx-form-gap, var(--hx-space-4, 1rem));font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))}hx-form fieldset{border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);border-radius:var(--hx-border-radius-md, .375rem);padding:var(--hx-space-4, 1rem);margin:0;display:flex;flex-direction:column;gap:var(--hx-space-4, 1rem)}hx-form :is(legend,summary){font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-700, #343a40);line-height:var(--hx-line-height-normal, 1.5)}hx-form legend{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);padding:0 var(--hx-space-1, .25rem)}hx-form details{border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);border-radius:var(--hx-border-radius-md, .375rem);padding:var(--hx-space-4, 1rem);margin:0}hx-form summary{cursor:pointer;padding:var(--hx-space-1, .25rem) 0;user-select:none;-webkit-user-select:none}hx-form summary:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);outline-offset:var(--hx-focus-ring-offset, 2px);border-radius:var(--hx-border-radius-sm, .25rem)}hx-form .form-actions{display:flex;align-items:center;gap:var(--hx-space-3, .75rem);padding-top:var(--hx-space-4, 1rem)}hx-form .form-actions--end{justify-content:flex-end}hx-form .form-actions--between{justify-content:space-between}hx-form .form-columns{display:grid;gap:var(--hx-space-4, 1rem)}hx-form .form-columns--2{grid-template-columns:repeat(2,1fr)}hx-form .form-columns--3{grid-template-columns:repeat(3,1fr)}hx-form .form-columns--4{grid-template-columns:repeat(4,1fr)}@media(max-width:640px){hx-form .form-columns--2,hx-form .form-columns--3,hx-form .form-columns--4{grid-template-columns:1fr}}hx-form .form-item--full{grid-column:1 / -1}hx-form .form-inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hx-space-3, .75rem)}hx-form .form-inline .form-item{flex:1;min-width:0}hx-form .form-inline .form-item+.form-item{margin-top:0}hx-form .form-divider{border:none;border-top:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);margin:var(--hx-space-2, .5rem) 0}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) label{color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select){border-color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select):focus{border-color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-input-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) input[type=checkbox]{border-color:var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) input[type=checkbox]:checked{background-color:var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));border-color:var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) input[type=radio]{border-color:var(--hx-color-error-500, #dc3545)}hx-form :is(.form-item__error-message,.form-item .error-message,.error-message,.form-item__success-message,.form-item .success-message,.success-message){font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}hx-form :is(.form-item__error-message,.form-item .error-message,.error-message){color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item__success-message,.form-item .success-message,.success-message){color:var(--hx-color-success-500, #198754)}hx-form :is(.form-item.success,.form-item.has-success,.form-item--success) label{color:var(--hx-color-success-500, #198754)}hx-form :is(.form-item.success,.form-item.has-success,.form-item--success) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select){border-color:var(--hx-color-success-500, #198754)}hx-form :is(.form-item.success,.form-item.has-success,.form-item--success) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select):focus{border-color:var(--hx-color-success-500, #198754);box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-color-success-500, #198754) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form :is(.messages--error,.messages--status,.messages--warning){border:var(--hx-border-width-thin, 1px) solid;border-radius:var(--hx-border-radius-md, .375rem);padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem);font-size:var(--hx-font-size-sm, .875rem);line-height:var(--hx-line-height-normal, 1.5)}hx-form .messages--error{border-color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));background-color:var(--hx-color-error-50, #fef2f2);color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form .messages--status{border-color:var(--hx-color-success-500, #198754);background-color:var(--hx-color-success-50, #f0fdf4);color:var(--hx-color-success-500, #198754)}hx-form .messages--warning{border-color:var(--hx-color-warning-500, #ffc107);background-color:var(--hx-color-warning-50, #fffbeb);color:var(--hx-color-warning-700, #92400e)}@media(forced-colors:active){hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select):focus{outline:2px solid CanvasText;outline-offset:2px}hx-form .hx-form-error-summary{border-color:LinkText}}\\n\"","import formScopedCss from '../../styles/form/form.scoped.css?raw';\n\nexport const helixFormScopedCss = formScopedCss;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { AdoptedStylesheetsController } from '../../controllers/adopted-stylesheets.js';\nimport { helixFormScopedCss } from './hx-form.styles.js';\n\n/*\n A Light DOM form wrapper that styles native HTML form elements and\n * hx-* components with the design system's form styles.\n \n When `action` is set, renders a `<form>` wrapper around slotted content.\n * When no `action` is set (the Drupal pattern), renders only a `<slot>`\n * so Drupal can provide its own `<form>` tag.\n \n Uses adopted stylesheets to inject scoped CSS into the document without\n * Shadow DOM, keeping native form participation and Drupal compatibility.\n \n @summary Light DOM form wrapper with scoped styles for native and hx-* form elements.\n \n @tag hx-form\n \n @slot - Default slot for form fields and controls.\n \n @fires {CustomEvent<{valid: boolean, values: Record<string, FormDataEntryValue \| FormDataEntryValue[]>, formData: FormData}>} hx-submit - Dispatched on valid client-side submit when no action is set.\n * @fires {CustomEvent<{errors: Array<{name: string, message: string}>}>} hx-invalid - Dispatched when validation fails on submit.\n * @fires {CustomEvent} hx-reset - Dispatched when the form is reset.\n \n @cssprop [--hx-form-gap=var(--hx-space-4)] - Gap between form fields.\n * @cssprop [--hx-form-max-width=none] - Maximum width of the form.\n * @cssprop [--hx-form-padding=0] - Internal padding of the form.\n /\n@customElement('hx-form')\nexport class HelixForm extends LitElement {\n // ─── Light DOM ───\n\n override createRenderRoot(): HTMLElement {\n return this;\n }\n\n // ─── Adopted Stylesheets ───\n\n /\n Controller that injects scoped CSS into the document via adopted stylesheets for Light DOM styling.\n * @internal\n /\n private _styles = new AdoptedStylesheetsController(this, helixFormScopedCss, document);\n\n // ─── Internal State ───\n\n /\n Current list of validation errors rendered in the error summary and used to set aria-invalid on fields.\n * @internal\n /\n @state()\n private _validationErrors: Array<{ name: string; message: string }> = [];\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('submit', this._handleSubmit);\n this.addEventListener('reset', this._handleReset);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('submit', this._handleSubmit);\n this.removeEventListener('reset', this._handleReset);\n }\n\n // ─── Properties ───\n\n /\n The URL to submit the form to. When empty, the form handles\n * submission client-side only and dispatches `hx-submit`.\n * @attr action\n /\n @property({ type: String })\n action = '';\n\n /\n The HTTP method used when submitting the form.\n * @attr method\n /\n @property({ type: String })\n method: 'get' \| 'post' = 'post';\n\n /\n When true, disables the browser's built-in constraint validation\n * on form submission.\n * @attr novalidate\n /\n @property({ type: Boolean })\n novalidate = false;\n\n /\n Identifies the form for scripting and form discovery.\n * @attr name\n /\n @property({ type: String })\n name = '';\n\n /\n The encoding type for form submission. Only used when `action` is set.\n * Use `multipart/form-data` for forms with file uploads.\n * @attr enctype\n /\n @property({ type: String })\n enctype: 'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain' =\n 'application/x-www-form-urlencoded';\n\n // ─── Public Methods ───\n\n /\n Checks the validity of all child form elements without showing\n * validation UI. Returns `true` if all elements are valid.\n /\n checkValidity(): boolean {\n const formElements = this._getAllValidatableElements();\n return formElements.every((el) => {\n if ('checkValidity' in el && typeof el.checkValidity === 'function') {\n return (el as HTMLInputElement).checkValidity();\n }\n return true;\n });\n }\n\n /\n Checks validity and triggers the browser's constraint validation UI\n * on each invalid element. Returns `true` if all elements are valid.\n /\n reportValidity(): boolean {\n const formElements = this._getAllValidatableElements();\n let allValid = true;\n for (const el of formElements) {\n if ('reportValidity' in el && typeof el.reportValidity === 'function') {\n if (!(el as HTMLInputElement).reportValidity()) {\n allValid = false;\n }\n }\n }\n return allValid;\n }\n\n /\n Collects form data from all child form elements (native and hx-).\n Returns a `FormData` object.\n /\n getFormData(): FormData {\n // If there is a native <form> child, use it directly\n const formEl = this.querySelector('form');\n if (formEl) {\n return new FormData(formEl);\n }\n\n // Otherwise, manually collect from all named inputs\n const formData = new FormData();\n const elements = this.getNativeFormElements();\n for (const el of elements) {\n const input = el as HTMLInputElement \| HTMLSelectElement \| HTMLTextAreaElement;\n if (!input.name) continue;\n\n if (input instanceof HTMLInputElement) {\n if (input.type === 'checkbox' \|\| input.type === 'radio') {\n if (input.checked) {\n formData.append(input.name, input.value \|\| 'on');\n }\n } else {\n formData.append(input.name, input.value);\n }\n } else {\n formData.append(input.name, input.value);\n }\n }\n\n return formData;\n }\n\n /\n Returns all child hx-* form components that implement the form\n * component contract (hx-text-input, hx-select, hx-checkbox, hx-textarea,\n * hx-radio-group, hx-switch).\n \n Note: This uses a hardcoded allowlist. When a new hx-* form component\n * is added, update this selector to include it.\n /\n getFormElements(): HTMLElement[] {\n return Array.from(\n this.querySelectorAll<HTMLElement>(\n 'hx-text-input, hx-select, hx-checkbox, hx-textarea, hx-radio-group, hx-switch',\n ),\n );\n }\n\n /\n Returns all native form elements (input, select, textarea, button)\n * found within this component's light DOM.\n /\n getNativeFormElements(): Array<\n HTMLInputElement \| HTMLSelectElement \| HTMLTextAreaElement \| HTMLButtonElement\n > {\n return Array.from(\n this.querySelectorAll<\n HTMLInputElement \| HTMLSelectElement \| HTMLTextAreaElement \| HTMLButtonElement\n >('input, select, textarea, button'),\n );\n }\n\n /\n Programmatically sets server-side validation errors on the form.\n * Renders an error summary and sets `aria-invalid=\"true\"` on named fields.\n \n Useful for surfacing Drupal server-side validation responses.\n \n @param errors - Array of `{name, message}` pairs matching field `name` attributes.\n /\n setErrors(errors: Array<{ name: string; message: string }>): void {\n this._validationErrors = errors;\n this._applyAriaInvalidFromErrors(errors);\n }\n\n /\n Programmatically sets a single field error. Merges with any existing errors.\n \n @param name - The `name` attribute of the field.\n * @param message - The error message to display.\n /\n setFieldError(name: string, message: string): void {\n const existing = this._validationErrors.filter((e) => e.name !== name);\n this.setErrors([...existing, { name, message }]);\n }\n\n /\n Clears all validation errors from the error summary and removes\n * `aria-invalid` from all fields.\n /\n clearErrors(): void {\n this._clearAriaInvalid();\n this._validationErrors = [];\n }\n\n // ─── Private Helpers ───\n\n /\n Returns all elements that support constraint validation, including\n * both native form elements and hx-* components with `checkValidity`.\n * @internal\n /\n private _getAllValidatableElements(): HTMLElement[] {\n const native = Array.from(this.querySelectorAll<HTMLElement>('input, select, textarea'));\n const wcElements = this.getFormElements().filter(\n (el) =>\n 'checkValidity' in el &&\n typeof (el as Record<string, unknown>).checkValidity === 'function',\n );\n return [...native, ...wcElements];\n }\n\n /\n Sets `aria-invalid=\"true\"` on fields with errors, removes it from valid fields.\n * @internal\n /\n private _applyAriaInvalidFromErrors(errors: Array<{ name: string; message: string }>): void {\n const errorNames = new Set(errors.map((e) => e.name));\n const allElements = this._getAllValidatableElements();\n for (const el of allElements) {\n const named = el as HTMLElement & { name?: string };\n const fieldName = named.name ?? el.tagName.toLowerCase();\n if (errorNames.has(fieldName)) {\n el.setAttribute('aria-invalid', 'true');\n } else {\n el.removeAttribute('aria-invalid');\n }\n }\n }\n\n /\n Sets `aria-invalid` based on native constraint validation state.\n * @internal\n /\n private _applyAriaInvalidFromValidity(): void {\n const allElements = this._getAllValidatableElements();\n for (const el of allElements) {\n if ('validity' in el) {\n const validatable = el as HTMLInputElement;\n if (!validatable.validity.valid) {\n el.setAttribute('aria-invalid', 'true');\n } else {\n el.removeAttribute('aria-invalid');\n }\n }\n }\n }\n\n /\n Removes `aria-invalid` from all validatable elements.\n * @internal\n /\n private _clearAriaInvalid(): void {\n const allElements = this._getAllValidatableElements();\n for (const el of allElements) {\n el.removeAttribute('aria-invalid');\n }\n }\n\n // ─── Event Handling ───\n\n /\n Handles native form submit events, intercepting for client-side validation and hx-submit dispatch.\n * @internal\n /\n private _handleSubmit = (e: Event): void => {\n // If there is an action, let native form submission happen\n if (this.action) {\n return;\n }\n\n // Client-side only: prevent default and dispatch hx-submit or hx-invalid\n e.preventDefault();\n\n if (!this.novalidate && !this.checkValidity()) {\n const errors = this._collectValidationErrors();\n this._validationErrors = errors;\n this._applyAriaInvalidFromValidity();\n\n /\n Dispatched when validation fails on submit.\n * @event hx-invalid\n /\n this.dispatchEvent(\n new CustomEvent<{ errors: Array<{ name: string; message: string }> }>('hx-invalid', {\n bubbles: true,\n composed: true,\n detail: { errors },\n }),\n );\n return;\n }\n\n // Clear any previous errors on successful submit\n this._validationErrors = [];\n this._clearAriaInvalid();\n\n const formData = this.getFormData();\n const values: Record<string, FormDataEntryValue \| FormDataEntryValue[]> = {};\n for (const key of new Set(formData.keys())) {\n const all = formData.getAll(key);\n if (all.length === 1 && all[0] !== undefined) {\n values[key] = all[0];\n } else {\n values[key] = all;\n }\n }\n\n /\n Dispatched on valid client-side submit.\n * @event hx-submit\n /\n this.dispatchEvent(\n new CustomEvent<{\n valid: boolean;\n values: Record<string, FormDataEntryValue \| FormDataEntryValue[]>;\n formData: FormData;\n }>('hx-submit', {\n bubbles: true,\n composed: true,\n detail: { valid: true, values, formData },\n }),\n );\n };\n\n /\n Handles native form reset events, clearing validation errors and dispatching hx-reset.\n * @internal\n /\n private _handleReset = (): void => {\n this._validationErrors = [];\n this._clearAriaInvalid();\n\n /\n Dispatched when the form is reset.\n * @event hx-reset\n /\n this.dispatchEvent(\n new CustomEvent<void>('hx-reset', {\n bubbles: true,\n composed: true,\n }),\n );\n };\n\n /\n Collects constraint validation errors from all validatable elements after a failed submit attempt.\n * @internal\n */\n private _collectValidationErrors(): Array<{ name: string; message: string }> {\n const errors: Array<{ name: string; message: string }> = [];\n const elements = this._getAllValidatableElements();\n\n for (const el of elements) {\n if ('validity' in el && 'validationMessage' in el) {\n const validatable = el as HTMLInputElement;\n if (!validatable.validity.valid) {\n errors.push({\n name: validatable.name \|\| validatable.tagName.toLowerCase(),\n message: validatable.validationMessage,\n });\n }\n }\n }\n\n return errors;\n }\n\n // ─── Render ───\n\n override render() {\n const errorSummary =\n this._validationErrors.length > 0\n ? html`\n <div\n class=\"hx-form-error-summary\"\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n >\n <ul>\n ${this._validationErrors.map(\n (error) => html`<li>${error.message \|\| error.name}</li>`,\n )}\n </ul>\n </div>\n `\n : nothing;\n\n if (this.action) {\n return html`\n ${errorSummary}\n <form\n action=${this.action}\n method=${this.method}\n enctype=${this.enctype}\n name=${ifDefined(this.name \|\| undefined)}\n ?novalidate=${this.novalidate}\n >\n <slot></slot>\n </form>\n `;\n }\n\n return html`${errorSummary}<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-form': HelixForm;\n }\n}\n"],"names":["formScopedCss","helixFormScopedCss","HelixForm","LitElement","AdoptedStylesheetsController","errors","formData","values","key","all","el","formElements","allValid","formEl","elements","input","name","message","existing","e","native","wcElements","errorNames","allElements","fieldName","validatable","errorSummary","html","error","nothing","ifDefined","__decorateClass","state","property","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"hx-form-fJE-FJQV.js","sources":["../../src/styles/form/form.scoped.css?raw","../../src/components/hx-form/hx-form.styles.ts","../../src/components/hx-form/hx-form.ts"],"sourcesContent":["export default \"hx-form{display:flex;flex-direction:column;gap:var(--hx-form-gap, var(--hx-space-4, 1rem));max-width:var(--hx-form-max-width, none);padding:var(--hx-form-padding, 0)}hx-form .hx-form-error-summary{border:var(--hx-border-width-thin, 1px) solid var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));border-radius:var(--hx-border-radius-md, .375rem);background-color:var(--hx-color-error-50, #fef2f2);color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem);font-size:var(--hx-font-size-sm, .875rem);line-height:var(--hx-line-height-normal, 1.5);font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))}hx-form .hx-form-error-summary ul{margin:0;padding:0 0 0 var(--hx-space-4, 1rem)}hx-form .hx-form-error-summary li{margin-bottom:var(--hx-space-1, .25rem)}hx-form .hx-form-error-summary li:last-child{margin-bottom:0}hx-form .form-item{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))}hx-form .form-item+.form-item{margin-top:var(--hx-space-4, 1rem)}hx-form label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-input-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}hx-form .form-required{color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));font-weight:var(--hx-font-weight-bold, 700)}hx-form .description{font-size:var(--hx-font-size-xs, .75rem);color:var(--hx-color-neutral-500, #6c757d);line-height:var(--hx-line-height-normal, 1.5)}hx-form .form-item :is(,:before,:after){box-sizing:border-box}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea){display:block;width:100%;border:var(--hx-border-width-thin, 1px) solid var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-input-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));font-size:var(--hx-font-size-md, 1rem);color:var(--hx-input-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}hx-form input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]){min-height:var(--hx-size-10, 2.5rem)}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea)::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea):focus{outline:0;border-color:var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) calc(var(--hx-focus-ring-opacity, .25) 100%),transparent)}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea):disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea):read-only{background-color:var(--hx-color-neutral-100, #e9ecef)}hx-form input[type=search]::-webkit-search-decoration,hx-form input[type=search]::-webkit-search-cancel-button,hx-form input[type=search]::-webkit-search-results-button,hx-form input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}hx-form input[type=number]::-webkit-inner-spin-button,hx-form input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}hx-form input[type=number]{appearance:textfield}hx-form textarea{min-height:var(--hx-textarea-min-height, var(--hx-size-20, 5rem));resize:vertical}hx-form select{display:block;width:100%;border:var(--hx-border-width-thin, 1px) solid var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-select-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));padding:var(--hx-space-2, .5rem) var(--hx-space-8, 2rem) var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));font-size:var(--hx-font-size-md, 1rem);color:var(--hx-select-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-input-height-md, var(--hx-size-10, 2.5rem));cursor:pointer;transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E\\\");background-repeat:no-repeat;background-position:right var(--hx-space-3, .75rem) center;background-size:12px 8px}hx-form select:focus{outline:0;border-color:var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form select:disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form select[multiple]{min-height:var(--hx-size-20, 5rem);padding-right:var(--hx-space-3, .75rem);background-image:none}hx-form select[multiple] option{padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem)}hx-form select::-ms-expand{display:none}hx-form :is(input[type=checkbox],input[type=radio]){appearance:none;-webkit-appearance:none;-moz-appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin:0;background-color:var(--hx-color-neutral-0, #ffffff);cursor:pointer;vertical-align:middle;transition:background-color var(--hx-transition-fast, .15s ease),border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}hx-form input[type=checkbox]{width:var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));height:var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));border:var(--hx-border-width-medium, 2px) solid var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, .25rem))}hx-form input[type=checkbox]:checked{background-color:var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));border-color:var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));background-image:url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\\\");background-repeat:no-repeat;background-position:center;background-size:100%}hx-form input[type=checkbox]:indeterminate{background-color:var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #2563eb));border-color:var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #2563eb));background-image:url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8H12' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E\\\");background-repeat:no-repeat;background-position:center;background-size:100%}hx-form input[type=checkbox]:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));outline-offset:var(--hx-focus-ring-offset, 2px)}hx-form input[type=checkbox]:hover:not(:disabled){border-color:var(--hx-color-primary-500, #2563eb)}hx-form input[type=checkbox]:checked:hover:not(:disabled){filter:brightness(var(--hx-filter-brightness-hover, .9))}hx-form :is(input[type=checkbox],input[type=radio]):disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form :is(.form-type-checkbox,.form-type-checkbox-toggle){display:flex;align-items:flex-start;gap:var(--hx-space-2, .5rem)}hx-form :is(.form-type-checkbox,.form-type-checkbox-toggle) label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5);cursor:pointer;user-select:none;-webkit-user-select:none}hx-form input[type=radio]{width:var(--hx-radio-size, var(--hx-size-5, 1.25rem));height:var(--hx-radio-size, var(--hx-size-5, 1.25rem));border:var(--hx-border-width-medium, 2px) solid var(--hx-radio-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-border-radius-full, 9999px)}hx-form input[type=radio]:checked{border-color:var(--hx-radio-checked-border-color, var(--hx-color-primary-500, #2563eb));background-color:var(--hx-radio-checked-bg, var(--hx-color-primary-500, #2563eb));box-shadow:inset 0 0 0 calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * .3) var(--hx-radio-dot-color, var(--hx-color-neutral-0, #ffffff))}hx-form input[type=radio]:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-radio-focus-ring-color, var(--hx-focus-ring-color, #2563eb));outline-offset:var(--hx-focus-ring-offset, 2px)}hx-form input[type=radio]:hover:not(:disabled):not(:checked){border-color:var(--hx-color-neutral-400, #adb5bd)}hx-form .form-type-radio{display:inline-flex;align-items:center;gap:var(--hx-space-2, .5rem)}hx-form .form-type-radio label{font-size:var(--hx-font-size-md, 1rem);color:var(--hx-radio-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5);cursor:pointer;user-select:none;-webkit-user-select:none}hx-form .form-radios{display:flex;flex-direction:column;gap:var(--hx-radio-group-gap, var(--hx-space-3, .75rem))}hx-form .form-radios--horizontal{flex-direction:row;flex-wrap:wrap}hx-form .form-type-switch{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-font-family-sans, sans-serif)}hx-form .form-type-switch .switch__control-row{display:flex;align-items:center;gap:var(--hx-space-2, .5rem)}hx-form .form-type-switch input[type=checkbox]{position:relative;width:var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));height:var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));border:none;border-radius:var(--hx-border-radius-full, 9999px);background-color:var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));transition:background-color var(--hx-transition-fast, .15s ease);background-image:none}hx-form .form-type-switch input[type=checkbox]:before{content:\\\"\\\";position:absolute;top:50%;left:var(--hx-switch-thumb-offset, var(--hx-space-0-5, .125rem));transform:translateY(-50%);width:var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));height:var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));border-radius:var(--hx-border-radius-full, 9999px);background-color:var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));box-shadow:var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05)));transition:transform var(--hx-transition-fast, .15s ease)}hx-form .form-type-switch input[type=checkbox]:checked{background-color:var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));background-image:none}hx-form .form-type-switch input[type=checkbox]:checked:before{transform:translateY(-50%) translate(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)))}hx-form .form-type-switch input[type=checkbox]:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #2563eb));outline-offset:var(--hx-focus-ring-offset, 2px)}hx-form .form-type-switch input[type=checkbox]:disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}hx-form .form-type-switch label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5);cursor:pointer;user-select:none;-webkit-user-select:none}hx-form .form-type-switch--sm input[type=checkbox]{width:var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));height:var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem))}hx-form .form-type-switch--sm input[type=checkbox]:before{width:var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, .875rem));height:var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, .875rem))}hx-form .form-type-switch--sm input[type=checkbox]:checked:before{transform:translateY(-50%) translate(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, .875rem)))}hx-form .form-type-switch--lg input[type=checkbox]{width:var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));height:var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem))}hx-form .form-type-switch--lg input[type=checkbox]:before{width:var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));height:var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem))}hx-form .form-type-switch--lg input[type=checkbox]:checked:before{transform:translateY(-50%) translate(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)))}hx-form form{display:flex;flex-direction:column;gap:var(--hx-form-gap, var(--hx-space-4, 1rem));font-family:var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))}hx-form fieldset{border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);border-radius:var(--hx-border-radius-md, .375rem);padding:var(--hx-space-4, 1rem);margin:0;display:flex;flex-direction:column;gap:var(--hx-space-4, 1rem)}hx-form :is(legend,summary){font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-700, #343a40);line-height:var(--hx-line-height-normal, 1.5)}hx-form legend{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);padding:0 var(--hx-space-1, .25rem)}hx-form details{border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);border-radius:var(--hx-border-radius-md, .375rem);padding:var(--hx-space-4, 1rem);margin:0}hx-form summary{cursor:pointer;padding:var(--hx-space-1, .25rem) 0;user-select:none;-webkit-user-select:none}hx-form summary:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);outline-offset:var(--hx-focus-ring-offset, 2px);border-radius:var(--hx-border-radius-sm, .25rem)}hx-form .form-actions{display:flex;align-items:center;gap:var(--hx-space-3, .75rem);padding-top:var(--hx-space-4, 1rem)}hx-form .form-actions--end{justify-content:flex-end}hx-form .form-actions--between{justify-content:space-between}hx-form .form-columns{display:grid;gap:var(--hx-space-4, 1rem)}hx-form .form-columns--2{grid-template-columns:repeat(2,1fr)}hx-form .form-columns--3{grid-template-columns:repeat(3,1fr)}hx-form .form-columns--4{grid-template-columns:repeat(4,1fr)}@media(max-width:640px){hx-form .form-columns--2,hx-form .form-columns--3,hx-form .form-columns--4{grid-template-columns:1fr}}hx-form .form-item--full{grid-column:1 / -1}hx-form .form-inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hx-space-3, .75rem)}hx-form .form-inline .form-item{flex:1;min-width:0}hx-form .form-inline .form-item+.form-item{margin-top:0}hx-form .form-divider{border:none;border-top:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);margin:var(--hx-space-2, .5rem) 0}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) label{color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select){border-color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select):focus{border-color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-input-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) input[type=checkbox]{border-color:var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) input[type=checkbox]:checked{background-color:var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));border-color:var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item.error,.form-item.has-error,.form-item--error) input[type=radio]{border-color:var(--hx-color-error-500, #dc3545)}hx-form :is(.form-item__error-message,.form-item .error-message,.error-message,.form-item__success-message,.form-item .success-message,.success-message){font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}hx-form :is(.form-item__error-message,.form-item .error-message,.error-message){color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form :is(.form-item__success-message,.form-item .success-message,.success-message){color:var(--hx-color-success-500, #198754)}hx-form :is(.form-item.success,.form-item.has-success,.form-item--success) label{color:var(--hx-color-success-500, #198754)}hx-form :is(.form-item.success,.form-item.has-success,.form-item--success) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select){border-color:var(--hx-color-success-500, #198754)}hx-form :is(.form-item.success,.form-item.has-success,.form-item--success) :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select):focus{border-color:var(--hx-color-success-500, #198754);box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-color-success-500, #198754) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}hx-form :is(.messages--error,.messages--status,.messages--warning){border:var(--hx-border-width-thin, 1px) solid;border-radius:var(--hx-border-radius-md, .375rem);padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem);font-size:var(--hx-font-size-sm, .875rem);line-height:var(--hx-line-height-normal, 1.5)}hx-form .messages--error{border-color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));background-color:var(--hx-color-error-50, #fef2f2);color:var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))}hx-form .messages--status{border-color:var(--hx-color-success-500, #198754);background-color:var(--hx-color-success-50, #f0fdf4);color:var(--hx-color-success-500, #198754)}hx-form .messages--warning{border-color:var(--hx-color-warning-500, #ffc107);background-color:var(--hx-color-warning-50, #fffbeb);color:var(--hx-color-warning-700, #92400e)}@media(forced-colors:active){hx-form :is(input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=search],[type=number]),textarea,select):focus{outline:2px solid CanvasText;outline-offset:2px}hx-form .hx-form-error-summary{border-color:LinkText}}\\n\"","import formScopedCss from '../../styles/form/form.scoped.css?raw';\n\nexport const helixFormScopedCss = formScopedCss;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { AdoptedStylesheetsController } from '../../controllers/adopted-stylesheets.js';\nimport { helixFormScopedCss } from './hx-form.styles.js';\n\n/*\n A Light DOM form wrapper that styles native HTML form elements and\n * hx-* components with the design system's form styles.\n \n When `action` is set, renders a `<form>` wrapper around slotted content.\n * When no `action` is set (the Drupal pattern), renders only a `<slot>`\n * so Drupal can provide its own `<form>` tag.\n \n Uses adopted stylesheets to inject scoped CSS into the document without\n * Shadow DOM, keeping native form participation and Drupal compatibility.\n \n @summary Light DOM form wrapper with scoped styles for native and hx-* form elements.\n \n @tag hx-form\n \n @slot - Default slot for form fields and controls.\n \n @fires {CustomEvent<{valid: boolean, values: Record<string, FormDataEntryValue \| FormDataEntryValue[]>, formData: FormData}>} hx-submit - Dispatched on valid client-side submit when no action is set.\n * @fires {CustomEvent<{errors: Array<{name: string, message: string}>}>} hx-invalid - Dispatched when validation fails on submit.\n * @fires {CustomEvent} hx-reset - Dispatched when the form is reset.\n \n @cssprop [--hx-form-gap=var(--hx-space-4)] - Gap between form fields.\n * @cssprop [--hx-form-max-width=none] - Maximum width of the form.\n * @cssprop [--hx-form-padding=0] - Internal padding of the form.\n /\n@customElement('hx-form')\nexport class HelixForm extends LitElement {\n // ─── Light DOM ───\n\n override createRenderRoot(): HTMLElement {\n return this;\n }\n\n // ─── Adopted Stylesheets ───\n\n /\n Controller that injects scoped CSS into the document via adopted stylesheets for Light DOM styling.\n * @internal\n /\n private _styles = new AdoptedStylesheetsController(this, helixFormScopedCss, document);\n\n // ─── Internal State ───\n\n /\n Current list of validation errors rendered in the error summary and used to set aria-invalid on fields.\n * @internal\n /\n @state()\n private _validationErrors: Array<{ name: string; message: string }> = [];\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('submit', this._handleSubmit);\n this.addEventListener('reset', this._handleReset);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('submit', this._handleSubmit);\n this.removeEventListener('reset', this._handleReset);\n }\n\n // ─── Properties ───\n\n /\n The URL to submit the form to. When empty, the form handles\n * submission client-side only and dispatches `hx-submit`.\n * @attr action\n /\n @property({ type: String })\n action = '';\n\n /\n The HTTP method used when submitting the form.\n * @attr method\n /\n @property({ type: String })\n method: 'get' \| 'post' = 'post';\n\n /\n When true, disables the browser's built-in constraint validation\n * on form submission.\n * @attr novalidate\n /\n @property({ type: Boolean })\n novalidate = false;\n\n /\n Identifies the form for scripting and form discovery.\n * @attr name\n /\n @property({ type: String })\n name = '';\n\n /\n The encoding type for form submission. Only used when `action` is set.\n * Use `multipart/form-data` for forms with file uploads.\n * @attr enctype\n /\n @property({ type: String })\n enctype: 'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain' =\n 'application/x-www-form-urlencoded';\n\n // ─── Public Methods ───\n\n /\n Checks the validity of all child form elements without showing\n * validation UI. Returns `true` if all elements are valid.\n /\n checkValidity(): boolean {\n const formElements = this._getAllValidatableElements();\n return formElements.every((el) => {\n if ('checkValidity' in el && typeof el.checkValidity === 'function') {\n return (el as HTMLInputElement).checkValidity();\n }\n return true;\n });\n }\n\n /\n Checks validity and triggers the browser's constraint validation UI\n * on each invalid element. Returns `true` if all elements are valid.\n /\n reportValidity(): boolean {\n const formElements = this._getAllValidatableElements();\n let allValid = true;\n for (const el of formElements) {\n if ('reportValidity' in el && typeof el.reportValidity === 'function') {\n if (!(el as HTMLInputElement).reportValidity()) {\n allValid = false;\n }\n }\n }\n return allValid;\n }\n\n /\n Collects form data from all child form elements (native and hx-).\n Returns a `FormData` object.\n /\n getFormData(): FormData {\n // If there is a native <form> child, use it directly\n const formEl = this.querySelector('form');\n if (formEl) {\n return new FormData(formEl);\n }\n\n // Otherwise, manually collect from all named inputs\n const formData = new FormData();\n const elements = this.getNativeFormElements();\n for (const el of elements) {\n const input = el as HTMLInputElement \| HTMLSelectElement \| HTMLTextAreaElement;\n if (!input.name) continue;\n\n if (input instanceof HTMLInputElement) {\n if (input.type === 'checkbox' \|\| input.type === 'radio') {\n if (input.checked) {\n formData.append(input.name, input.value \|\| 'on');\n }\n } else {\n formData.append(input.name, input.value);\n }\n } else {\n formData.append(input.name, input.value);\n }\n }\n\n return formData;\n }\n\n /\n Returns all child hx-* form components that implement the form\n * component contract (hx-text-input, hx-select, hx-checkbox, hx-textarea,\n * hx-radio-group, hx-switch).\n \n Note: This uses a hardcoded allowlist. When a new hx-* form component\n * is added, update this selector to include it.\n /\n getFormElements(): HTMLElement[] {\n return Array.from(\n this.querySelectorAll<HTMLElement>(\n 'hx-text-input, hx-select, hx-checkbox, hx-textarea, hx-radio-group, hx-switch',\n ),\n );\n }\n\n /\n Returns all native form elements (input, select, textarea, button)\n * found within this component's light DOM.\n /\n getNativeFormElements(): Array<\n HTMLInputElement \| HTMLSelectElement \| HTMLTextAreaElement \| HTMLButtonElement\n > {\n return Array.from(\n this.querySelectorAll<\n HTMLInputElement \| HTMLSelectElement \| HTMLTextAreaElement \| HTMLButtonElement\n >('input, select, textarea, button'),\n );\n }\n\n /\n Programmatically sets server-side validation errors on the form.\n * Renders an error summary and sets `aria-invalid=\"true\"` on named fields.\n \n Useful for surfacing Drupal server-side validation responses.\n \n @param errors - Array of `{name, message}` pairs matching field `name` attributes.\n /\n setErrors(errors: Array<{ name: string; message: string }>): void {\n this._validationErrors = errors;\n this._applyAriaInvalidFromErrors(errors);\n }\n\n /\n Programmatically sets a single field error. Merges with any existing errors.\n \n @param name - The `name` attribute of the field.\n * @param message - The error message to display.\n /\n setFieldError(name: string, message: string): void {\n const existing = this._validationErrors.filter((e) => e.name !== name);\n this.setErrors([...existing, { name, message }]);\n }\n\n /\n Clears all validation errors from the error summary and removes\n * `aria-invalid` from all fields.\n /\n clearErrors(): void {\n this._clearAriaInvalid();\n this._validationErrors = [];\n }\n\n // ─── Private Helpers ───\n\n /\n Returns all elements that support constraint validation, including\n * both native form elements and hx-* components with `checkValidity`.\n * @internal\n /\n private _getAllValidatableElements(): HTMLElement[] {\n const native = Array.from(this.querySelectorAll<HTMLElement>('input, select, textarea'));\n const wcElements = this.getFormElements().filter(\n (el): el is HTMLElement & { checkValidity: () => boolean } =>\n 'checkValidity' in el &&\n typeof (el as { checkValidity: unknown }).checkValidity === 'function',\n );\n return [...native, ...wcElements];\n }\n\n /\n Sets `aria-invalid=\"true\"` on fields with errors, removes it from valid fields.\n * @internal\n /\n private _applyAriaInvalidFromErrors(errors: Array<{ name: string; message: string }>): void {\n const errorNames = new Set(errors.map((e) => e.name));\n const allElements = this._getAllValidatableElements();\n for (const el of allElements) {\n const named = el as HTMLElement & { name?: string };\n const fieldName = named.name ?? el.tagName.toLowerCase();\n if (errorNames.has(fieldName)) {\n el.setAttribute('aria-invalid', 'true');\n } else {\n el.removeAttribute('aria-invalid');\n }\n }\n }\n\n /\n Sets `aria-invalid` based on native constraint validation state.\n * @internal\n /\n private _applyAriaInvalidFromValidity(): void {\n const allElements = this._getAllValidatableElements();\n for (const el of allElements) {\n if ('validity' in el) {\n const validatable = el as HTMLInputElement;\n if (!validatable.validity.valid) {\n el.setAttribute('aria-invalid', 'true');\n } else {\n el.removeAttribute('aria-invalid');\n }\n }\n }\n }\n\n /\n Removes `aria-invalid` from all validatable elements.\n * @internal\n /\n private _clearAriaInvalid(): void {\n const allElements = this._getAllValidatableElements();\n for (const el of allElements) {\n el.removeAttribute('aria-invalid');\n }\n }\n\n // ─── Event Handling ───\n\n /\n Handles native form submit events, intercepting for client-side validation and hx-submit dispatch.\n * @internal\n /\n private _handleSubmit = (e: Event): void => {\n // If there is an action, let native form submission happen\n if (this.action) {\n return;\n }\n\n // Client-side only: prevent default and dispatch hx-submit or hx-invalid\n e.preventDefault();\n\n if (!this.novalidate && !this.checkValidity()) {\n const errors = this._collectValidationErrors();\n this._validationErrors = errors;\n this._applyAriaInvalidFromValidity();\n\n // Move focus to the error summary after it renders so screen readers announce it\n // immediately. tabindex=\"-1\" on the summary allows programmatic focus (WCAG 2.4.3).\n void this.updateComplete.then(() => {\n const summary = this.querySelector<HTMLElement>('.hx-form-error-summary');\n summary?.focus();\n });\n\n /\n Dispatched when validation fails on submit.\n * @event hx-invalid\n /\n this.dispatchEvent(\n new CustomEvent<{ errors: Array<{ name: string; message: string }> }>('hx-invalid', {\n bubbles: true,\n composed: true,\n detail: { errors },\n }),\n );\n return;\n }\n\n // Clear any previous errors on successful submit\n this._validationErrors = [];\n this._clearAriaInvalid();\n\n const formData = this.getFormData();\n const values: Record<string, FormDataEntryValue \| FormDataEntryValue[]> = {};\n for (const key of new Set(formData.keys())) {\n const all = formData.getAll(key);\n if (all.length === 1 && all[0] !== undefined) {\n values[key] = all[0];\n } else {\n values[key] = all;\n }\n }\n\n /\n Dispatched on valid client-side submit.\n * @event hx-submit\n /\n this.dispatchEvent(\n new CustomEvent<{\n valid: boolean;\n values: Record<string, FormDataEntryValue \| FormDataEntryValue[]>;\n formData: FormData;\n }>('hx-submit', {\n bubbles: true,\n composed: true,\n detail: { valid: true, values, formData },\n }),\n );\n };\n\n /\n Handles native form reset events, clearing validation errors and dispatching hx-reset.\n * @internal\n /\n private _handleReset = (): void => {\n this._validationErrors = [];\n this._clearAriaInvalid();\n\n /\n Dispatched when the form is reset.\n * @event hx-reset\n /\n this.dispatchEvent(\n new CustomEvent<void>('hx-reset', {\n bubbles: true,\n composed: true,\n }),\n );\n };\n\n /\n Collects constraint validation errors from all validatable elements after a failed submit attempt.\n * @internal\n */\n private _collectValidationErrors(): Array<{ name: string; message: string }> {\n const errors: Array<{ name: string; message: string }> = [];\n const elements = this._getAllValidatableElements();\n\n for (const el of elements) {\n if ('validity' in el && 'validationMessage' in el) {\n const validatable = el as HTMLInputElement;\n if (!validatable.validity.valid) {\n errors.push({\n name: validatable.name \|\| validatable.tagName.toLowerCase(),\n message: validatable.validationMessage,\n });\n }\n }\n }\n\n return errors;\n }\n\n // ─── Render ───\n\n override render() {\n const errorSummary =\n this._validationErrors.length > 0\n ? html`\n <div\n class=\"hx-form-error-summary\"\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n tabindex=\"-1\"\n >\n <ul>\n ${this._validationErrors.map(\n (error) => html`<li>${error.message \|\| error.name}</li>`,\n )}\n </ul>\n </div>\n `\n : nothing;\n\n if (this.action) {\n return html`\n ${errorSummary}\n <form\n action=${this.action}\n method=${this.method}\n enctype=${this.enctype}\n name=${ifDefined(this.name \|\| undefined)}\n ?novalidate=${this.novalidate}\n >\n <slot></slot>\n </form>\n `;\n }\n\n return html`${errorSummary}<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-form': HelixForm;\n }\n}\n"],"names":["formScopedCss","helixFormScopedCss","HelixForm","LitElement","AdoptedStylesheetsController","errors","summary","formData","values","key","all","el","formElements","allValid","formEl","elements","input","name","message","existing","e","native","wcElements","errorNames","allElements","fieldName","validatable","errorSummary","html","error","nothing","ifDefined","__decorateClass","state","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-format-date-BdnWV2kX.js → hx-format-date-C030ThSm.js} RENAMED Viewed

@@ -13,8 +13,8 @@ const T = _`
   }
 `;
 var $ = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, n = (o, t, i, e) => {
-  for (var a = e > 1 ? void 0 : e ? Z(t, i) : t, s = o.length - 1, c; s >= 0; s--)
-    (c = o[s]) && (a = (e ? c(t, i, a) : c(a)) || a);
+  for (var a = e > 1 ? void 0 : e ? Z(t, i) : t, s = o.length - 1, u; s >= 0; s--)
+    (u = o[s]) && (a = (e ? u(t, i, a) : u(a)) || a);
   return e && a && $(t, i, a), a;
 };
 let r = class extends D {
@@ -42,7 +42,9 @@ let r = class extends D {
   }
   /** @internal */
   _getLocale() {
-    return this.lang ? this.lang : document.documentElement.lang || navigator.language || "en";
+    if (this.lang) return this.lang;
+    const o = typeof document < "u" ? document.documentElement.lang : "", t = typeof navigator < "u" ? navigator.language : "";
+    return o || t || "en";
   }
   /** @internal */
   _getHour12() {
@@ -67,7 +69,7 @@ let r = class extends D {
         minute: "2-digit",
         second: "2-digit",
         hour12: !1
-      }, i = (m) => m.reduce((g, d) => (d.type !== "literal" && (g[d.type] = d.value), g), {}), e = i(new Intl.DateTimeFormat("en-CA", t).formatToParts(o)), a = i(
+      }, i = (m) => m.reduce((g, f) => (f.type !== "literal" && (g[f.type] = f.value), g), {}), e = i(new Intl.DateTimeFormat("en-CA", t).formatToParts(o)), a = i(
         new Intl.DateTimeFormat("en-CA", { ...t, timeZone: "UTC" }).formatToParts(o)
       ), s = (m) => Date.UTC(
         parseInt(m.year ?? "0"),
@@ -76,24 +78,24 @@ let r = class extends D {
         parseInt(m.hour === "24" ? "0" : m.hour ?? "0"),
         parseInt(m.minute ?? "0"),
         parseInt(m.second ?? "0")
-      ), c = Math.round((s(e) - s(a)) / 6e4), y = c >= 0 ? "+" : "-", l = Math.abs(c), f = String(Math.floor(l / 60)).padStart(2, "0"), v = String(l % 60).padStart(2, "0"), p = e.hour === "24" ? "00" : e.hour ?? "00";
-      return `${e.year}-${e.month}-${e.day}T${p}:${e.minute}:${e.second}${y}${f}:${v}`;
+      ), u = Math.round((s(e) - s(a)) / 6e4), y = u >= 0 ? "+" : "-", l = Math.abs(u), d = String(Math.floor(l / 60)).padStart(2, "0"), v = String(l % 60).padStart(2, "0"), p = e.hour === "24" ? "00" : e.hour ?? "00";
+      return `${e.year}-${e.month}-${e.day}T${p}:${e.minute}:${e.second}${y}${d}:${v}`;
     } catch {
       return o.toISOString();
     }
   }
   /** @internal */
   _formatRelative(o) {
-    const t = /* @__PURE__ */ new Date(), i = o.getTime() - t.getTime(), e = Math.round(i / 1e3), a = Math.abs(e), s = Math.round(e / 60), c = Math.abs(s), y = Math.round(e / 3600), l = Math.abs(y), f = Math.round(e / 86400), v = Math.abs(f), p = Math.round(f / 30), m = Math.abs(p), g = Math.round(f / 365), d = this._getLocale(), b = `${d}|${this.numeric}`;
-    let u = r._rtfCache.get(b);
-    if (!u)
+    const t = /* @__PURE__ */ new Date(), i = o.getTime() - t.getTime(), e = Math.round(i / 1e3), a = Math.abs(e), s = Math.round(e / 60), u = Math.abs(s), y = Math.round(e / 3600), l = Math.abs(y), d = Math.round(e / 86400), v = Math.abs(d), p = Math.round(d / 30), m = Math.abs(p), g = Math.round(d / 365), f = this._getLocale(), b = `${f}|${this.numeric}`;
+    let c = r._rtfCache.get(b);
+    if (!c)
       try {
-        u = new Intl.RelativeTimeFormat(d, { numeric: this.numeric }), r._rtfCache.set(b, u);
+        c = new Intl.RelativeTimeFormat(f, { numeric: this.numeric }), r._rtfCache.set(b, c);
       } catch {
         return "";
       }
     try {
-      return a < 60 ? u.format(e, "second") : c < 60 ? u.format(s, "minute") : l < 24 ? u.format(y, "hour") : v < 30 ? u.format(f, "day") : m < 12 ? u.format(p, "month") : u.format(g, "year");
+      return a < 60 ? c.format(e, "second") : u < 60 ? c.format(s, "minute") : l < 24 ? c.format(y, "hour") : v < 30 ? c.format(d, "day") : m < 12 ? c.format(p, "month") : c.format(g, "year");
     } catch {
       return "";
     }
@@ -175,4 +177,4 @@ r = n([
 export {
   r as H
 };
-//# sourceMappingURL=hx-format-date-BdnWV2kX.js.map
+//# sourceMappingURL=hx-format-date-C030ThSm.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-format-date-C030ThSm.js","sources":["../../src/components/hx-format-date/hx-format-date.styles.ts","../../src/components/hx-format-date/hx-format-date.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFormatDateStyles = css`\n :host {\n display: inline;\n }\n\n [part='base'] {\n display: inline;\n font: inherit;\n color: inherit;\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixFormatDateStyles } from './hx-format-date.styles.js';\n\n/**\n * Formats and displays a date/time value using the browser's `Intl.DateTimeFormat`\n * (or `Intl.RelativeTimeFormat` when `relative` is set). Renders as an inline\n * `<time>` element — machine-readable via `datetime`, human-readable via formatted text.\n *\n * No external dependencies. Uses native Intl APIs only.\n *\n * @summary Inline date/time formatter using Intl APIs with semantic `<time>` output.\n *\n * @tag hx-format-date\n *\n * @csspart base - The inner `<time>` element.\n */\n@customElement('hx-format-date')\nexport class HelixFormatDate extends LitElement {\n static override styles = [tokenStyles, helixFormatDateStyles];\n\n // ─── Intl formatter caches (keyed by locale+options fingerprint) ───\n /** @internal */\n private static _dtfCache = new Map<string, Intl.DateTimeFormat>();\n /** @internal */\n private static _rtfCache = new Map<string, Intl.RelativeTimeFormat>();\n\n /**\n * The date/time value to format. Accepts an ISO string, a Unix timestamp (ms), or\n * a `Date` object. Defaults to the current date/time when empty.\n * @attr date\n */\n @property()\n date: string | number | Date = '';\n\n /**\n * BCP 47 locale tag used for formatting (e.g. `\"en-US\"`, `\"de\"`, `\"ja\"`).\n * Defaults to `document.documentElement.lang`, then `navigator.language`.\n * @attr lang\n */\n @property()\n override lang = '';\n\n /**\n * Month display format.\n * @attr month\n */\n @property()\n month: 'narrow' | 'short' | 'long' | 'numeric' | '2-digit' | undefined = undefined;\n\n /**\n * Year display format.\n * @attr year\n */\n @property()\n year: 'numeric' | '2-digit' | undefined = undefined;\n\n /**\n * Day display format.\n * @attr day\n */\n @property()\n day: 'numeric' | '2-digit' | undefined = undefined;\n\n /**\n * Weekday display format.\n * @attr weekday\n */\n @property()\n weekday: 'narrow' | 'short' | 'long' | undefined = undefined;\n\n /**\n * Hour display format.\n * @attr hour\n */\n @property()\n hour: 'numeric' | '2-digit' | undefined = undefined;\n\n /**\n * Minute display format.\n * @attr minute\n */\n @property()\n minute: 'numeric' | '2-digit' | undefined = undefined;\n\n /**\n * Second display format.\n * @attr second\n */\n @property()\n second: 'numeric' | '2-digit' | undefined = undefined;\n\n /**\n * Time zone name display format. Accepts all values supported by\n * `Intl.DateTimeFormatOptions.timeZoneName` including `'short'`, `'long'`,\n * `'shortOffset'`, `'longOffset'`, `'shortGeneric'`, and `'longGeneric'`.\n * @attr time-zone-name\n */\n @property({ attribute: 'time-zone-name' })\n timeZoneName: Intl.DateTimeFormatOptions['timeZoneName'] = undefined;\n\n /**\n * IANA time zone identifier (e.g. `\"America/New_York\"`, `\"UTC\"`).\n * @attr time-zone\n */\n @property({ attribute: 'time-zone' })\n timeZone: string | undefined = undefined;\n\n /**\n * Whether to use 12-hour or 24-hour clock. `\"auto\"` defers to locale default.\n * @attr hour-format\n */\n @property({ attribute: 'hour-format' })\n hourFormat: 'auto' | '12' | '24' = 'auto';\n\n /**\n * Controls whether `Intl.RelativeTimeFormat` always shows numeric output\n * (`\"always\"`) or uses natural language when possible (`\"auto\"`, e.g. \"yesterday\").\n * Only used when `relative` is true.\n * @attr numeric\n */\n @property()\n numeric: 'always' | 'auto' = 'auto';\n\n /**\n * When true, displays a relative time string such as \"2 hours ago\" or \"in 3 days\"\n * using `Intl.RelativeTimeFormat`.\n *\n * **Important:** The relative time string is computed once at render time and does\n * not auto-update. If the displayed text must stay current (e.g. a live \"X minutes\n * ago\" counter), the consuming component must re-set the `date` property on its own\n * interval to trigger a re-render.\n * @attr relative\n */\n @property({ type: Boolean })\n relative = false;\n\n // ─── Private helpers ───\n\n /** @internal */\n private _getDate(): Date {\n const val = this.date;\n if (val === '') return new Date();\n if (val instanceof Date) {\n return isNaN(val.getTime()) ? new Date() : val;\n }\n if (typeof val === 'number') {\n const d = new Date(val);\n return isNaN(d.getTime()) ? new Date() : d;\n }\n // Numeric strings (e.g. Unix timestamps set via HTML attribute) must be\n // converted to a number before passing to Date — new Date(\"1718462400000\")\n // returns Invalid Date in most JS engines.\n const asNumber = Number(val);\n if (!isNaN(asNumber)) {\n const d = new Date(asNumber);\n return isNaN(d.getTime()) ? new Date() : d;\n }\n const parsed = new Date(val);\n return isNaN(parsed.getTime()) ? new Date() : parsed;\n }\n\n /** @internal */\n private _getLocale(): string {\n if (this.lang) return this.lang;\n const docLang = typeof document !== 'undefined' ? document.documentElement.lang : '';\n const navLang = typeof navigator !== 'undefined' ? navigator.language : '';\n return docLang || navLang || 'en';\n }\n\n /** @internal */\n private _getHour12(): boolean | undefined {\n if (this.hourFormat === '12') return true;\n if (this.hourFormat === '24') return false;\n return undefined;\n }\n\n /**\n * Returns the `datetime` attribute value. When `timeZone` is set, returns a\n * timezone-offset ISO string (e.g. `2024-09-20T05:00:00-04:00`) so that\n * assistive technology reads the same local time as the visual display.\n */\n /** @internal */\n private _getDatetimeAttr(date: Date): string {\n if (!this.timeZone) return date.toISOString();\n try {\n const fmtOpts: Intl.DateTimeFormatOptions = {\n timeZone: this.timeZone,\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n hour12: false,\n };\n const reduceParts = (parts: Intl.DateTimeFormatPart[]) =>\n parts.reduce<Record<string, string>>((acc, p) => {\n if (p.type !== 'literal') acc[p.type] = p.value;\n return acc;\n }, {});\n\n const tzParts = reduceParts(new Intl.DateTimeFormat('en-CA', fmtOpts).formatToParts(date));\n const utcParts = reduceParts(\n new Intl.DateTimeFormat('en-CA', { ...fmtOpts, timeZone: 'UTC' }).formatToParts(date),\n );\n\n const toMs = (p: Record<string, string>) =>\n Date.UTC(\n parseInt(p['year'] ?? '0'),\n parseInt(p['month'] ?? '1') - 1,\n parseInt(p['day'] ?? '1'),\n parseInt(p['hour'] === '24' ? '0' : (p['hour'] ?? '0')),\n parseInt(p['minute'] ?? '0'),\n parseInt(p['second'] ?? '0'),\n );\n\n const offsetMin = Math.round((toMs(tzParts) - toMs(utcParts)) / 60000);\n const sign = offsetMin >= 0 ? '+' : '-';\n const absMin = Math.abs(offsetMin);\n const hh = String(Math.floor(absMin / 60)).padStart(2, '0');\n const mm = String(absMin % 60).padStart(2, '0');\n const h = tzParts['hour'] === '24' ? '00' : (tzParts['hour'] ?? '00');\n return `${tzParts['year']}-${tzParts['month']}-${tzParts['day']}T${h}:${tzParts['minute']}:${tzParts['second']}${sign}${hh}:${mm}`;\n } catch {\n return date.toISOString();\n }\n }\n\n /** @internal */\n private _formatRelative(date: Date): string {\n const now = new Date();\n const diffMs = date.getTime() - now.getTime();\n const diffSec = Math.round(diffMs / 1000);\n const absSec = Math.abs(diffSec);\n const diffMin = Math.round(diffSec / 60);\n const absMin = Math.abs(diffMin);\n const diffHour = Math.round(diffSec / 3600);\n const absHour = Math.abs(diffHour);\n const diffDay = Math.round(diffSec / 86400);\n const absDay = Math.abs(diffDay);\n const diffMonth = Math.round(diffDay / 30);\n const absMonth = Math.abs(diffMonth);\n const diffYear = Math.round(diffDay / 365);\n\n const locale = this._getLocale();\n const cacheKey = `${locale}|${this.numeric}`;\n let rtf = HelixFormatDate._rtfCache.get(cacheKey);\n if (!rtf) {\n try {\n rtf = new Intl.RelativeTimeFormat(locale, { numeric: this.numeric });\n HelixFormatDate._rtfCache.set(cacheKey, rtf);\n } catch {\n return '';\n }\n }\n\n try {\n if (absSec < 60) return rtf.format(diffSec, 'second');\n if (absMin < 60) return rtf.format(diffMin, 'minute');\n if (absHour < 24) return rtf.format(diffHour, 'hour');\n if (absDay < 30) return rtf.format(diffDay, 'day');\n if (absMonth < 12) return rtf.format(diffMonth, 'month');\n return rtf.format(diffYear, 'year');\n } catch {\n return '';\n }\n }\n\n /** @internal */\n private _formatAbsolute(date: Date): string {\n const options: Intl.DateTimeFormatOptions = {};\n\n if (this.month !== undefined) options.month = this.month;\n if (this.year !== undefined) options.year = this.year;\n if (this.day !== undefined) options.day = this.day;\n if (this.weekday !== undefined) options.weekday = this.weekday;\n if (this.hour !== undefined) options.hour = this.hour;\n if (this.minute !== undefined) options.minute = this.minute;\n if (this.second !== undefined) options.second = this.second;\n if (this.timeZoneName !== undefined) options.timeZoneName = this.timeZoneName;\n if (this.timeZone !== undefined) options.timeZone = this.timeZone;\n\n const hour12 = this._getHour12();\n if (hour12 !== undefined) options.hour12 = hour12;\n\n // Fall back to a sensible default when no format options are specified\n if (Object.keys(options).length === 0) {\n options.year = 'numeric';\n options.month = 'long';\n options.day = 'numeric';\n }\n\n const locale = this._getLocale();\n const cacheKey = `${locale}|${JSON.stringify(options)}`;\n let dtf = HelixFormatDate._dtfCache.get(cacheKey);\n if (!dtf) {\n try {\n dtf = new Intl.DateTimeFormat(locale, options);\n HelixFormatDate._dtfCache.set(cacheKey, dtf);\n } catch {\n // Invalid options (e.g. unknown timeZone) — return empty string\n return '';\n }\n }\n\n try {\n return dtf.format(date);\n } catch {\n return '';\n }\n }\n\n // ─── Render ───\n\n override render() {\n const date = this._getDate();\n const datetimeAttr = this._getDatetimeAttr(date);\n const formattedText = this.relative ? this._formatRelative(date) : this._formatAbsolute(date);\n\n return html`<time part=\"base\" datetime=${datetimeAttr}>${formattedText}</time>`;\n }\n}\n\nexport type HxFormatDate = HelixFormatDate;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-format-date': HelixFormatDate;\n }\n}\n"],"names":["helixFormatDateStyles","css","HelixFormatDate","LitElement","val","d","asNumber","parsed","docLang","navLang","date","fmtOpts","reduceParts","parts","acc","p","tzParts","utcParts","toMs","offsetMin","sign","absMin","hh","mm","h","now","diffMs","diffSec","absSec","diffMin","diffHour","absHour","diffDay","absDay","diffMonth","absMonth","diffYear","locale","cacheKey","rtf","options","hour12","dtf","datetimeAttr","formattedText","html","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-grid-gEjuF0cR.js → hx-grid-DE8KM5Gf.js} RENAMED Viewed

@@ -1,14 +1,14 @@
-import { css as m, LitElement as c, html as d } from "lit";
+import { css as h, LitElement as c, html as d } from "lit";
 import { property as s, customElement as g } from "lit/decorators.js";
 import { styleMap as f } from "lit/directives/style-map.js";
 import { tokenStyles as y } from "@helixui/tokens/lit";
-const v = m`
+const v = h`
   :host {
     display: block;
     box-sizing: border-box;
     width: 100%;
   }
-`, x = m`
+`, x = h`
   :host {
     display: block;
     min-width: 0;
@@ -20,7 +20,7 @@ var G = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (t, l, a
     (u = t[n]) && (o = (p ? u(l, a, o) : u(o)) || o);
   return p && o && G(l, a, o), o;
 };
-const h = {
+const m = {
   none: "0",
   xs: "var(--hx-space-1, 0.25rem)",
   sm: "var(--hx-space-2, 0.5rem)",
@@ -39,7 +39,7 @@ let r = class extends c {
   }
   /** @internal */
   _resolveGap(t) {
-    return h[t] ?? h.md;
+    return m[t] ?? m.md;
   }
   /** @internal */
   _computedRowGap() {
@@ -92,7 +92,7 @@ r = e([
 ], r);
 let i = class extends c {
   updated(t) {
-    (t.has("column") || t.has("row") || t.has("span")) && this._applyHostGridStyles();
+    super.updated(t), (t.has("column") || t.has("row") || t.has("span")) && this._applyHostGridStyles();
   }
   connectedCallback() {
     super.connectedCallback(), this._applyHostGridStyles();
@@ -122,4 +122,4 @@ export {
   r as H,
   i as a
 };
-//# sourceMappingURL=hx-grid-gEjuF0cR.js.map
+//# sourceMappingURL=hx-grid-DE8KM5Gf.js.map

package/dist/shared/hx-grid-DE8KM5Gf.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-grid-DE8KM5Gf.js","sources":["../../src/components/hx-grid/hx-grid.styles.ts","../../src/components/hx-grid/hx-grid.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixGridStyles = css`\n :host {\n display: block;\n box-sizing: border-box;\n width: 100%;\n }\n`;\n\nexport const helixGridItemStyles = css`\n :host {\n display: block;\n min-width: 0;\n min-height: 0;\n }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixGridStyles, helixGridItemStyles } from './hx-grid.styles.js';\n\ntype GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst GAP_TOKENS: Record<GapSize, string> = {\n none: '0',\n xs: 'var(--hx-space-1, 0.25rem)',\n sm: 'var(--hx-space-2, 0.5rem)',\n md: 'var(--hx-space-4, 1rem)',\n lg: 'var(--hx-space-6, 1.5rem)',\n xl: 'var(--hx-space-8, 2rem)',\n};\n\n/**\n * A CSS Grid layout wrapper with design-token-based column and gap system.\n *\n * @summary CSS Grid layout primitive for building responsive grid layouts.\n *\n * @tag hx-grid\n *\n * @slot - Default slot for grid content (use `hx-grid-item` for precise placement).\n *\n * @csspart base - The grid container element.\n *\n * @cssprop [--hx-grid-columns] - Override the computed grid-template-columns.\n * @cssprop [--hx-grid-gap] - Override the computed gap.\n * @cssprop [--hx-grid-row-gap] - Override the computed row-gap.\n * @cssprop [--hx-grid-column-gap] - Override the computed column-gap.\n */\n@customElement('hx-grid')\nexport class HelixGrid extends LitElement {\n static override styles = [tokenStyles, helixGridStyles];\n\n /**\n * Number of equal columns (`repeat(N, 1fr)`) or a CSS grid-template-columns string.\n * @attr columns\n */\n @property({ reflect: true })\n columns: number | string = 1;\n\n /**\n * Gap size applied to both row and column gaps.\n * @attr gap\n */\n @property({ reflect: true })\n gap: '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 LitElement {\n static override styles = [tokenStyles, helixGridItemStyles];\n\n /**\n * CSS grid-column value (e.g., \"1 / 3\", \"span 2\").\n * @attr column\n */\n @property({ reflect: true })\n column: string | undefined;\n\n /**\n * CSS grid-row value (e.g., \"1 / 2\").\n * @attr row\n */\n @property({ reflect: true })\n row: string | undefined;\n\n /**\n * Column span shorthand — equivalent to setting `column: \"span N\"`.\n * @attr span\n */\n @property({ type: Number, reflect: true })\n span: number | undefined;\n\n override updated(changed: PropertyValues<this>): void {\n 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","LitElement","cols","size","html","styleMap","tokenStyles","__decorateClass","property","customElement","HelixGridItem","changed"],"mappings":"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"}

package/dist/shared/{hx-icon-button-DzH_bRtC.js → hx-icon-button-Et9wq79n.js} RENAMED Viewed

@@ -169,13 +169,13 @@ let r = class extends p {
   get form() {
     return this._internals.form;
   }
-  /** Called by the browser when the form is reset. No value to reset. */
+  /** @internal */
   formResetCallback() {
   }
-  /** Called by the browser to restore form state. No value to restore. */
+  /** @internal */
   formStateRestoreCallback(t, n) {
   }
-  /** Called when a parent fieldset is disabled/enabled. */
+  /** @internal */
   formDisabledCallback(t) {
     this.disabled = t;
   }
@@ -276,4 +276,4 @@ r = o([
 export {
   r as H
 };
-//# sourceMappingURL=hx-icon-button-DzH_bRtC.js.map
+//# sourceMappingURL=hx-icon-button-Et9wq79n.js.map

package/dist/shared/{hx-icon-button-DzH_bRtC.js.map → hx-icon-button-Et9wq79n.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-icon-button-DzH_bRtC.js","sources":["../../src/components/hx-icon-button/hx-icon-button.styles.ts","../../src/components/hx-icon-button/hx-icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconButtonStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled);\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);\n border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));\n background-color: var(--hx-icon-button-bg);\n color: var(--hx-icon-button-color, var(--hx-color-primary-500));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast),\n color var(--hx-transition-fast),\n border-color var(--hx-transition-fast),\n box-shadow var(--hx-transition-fast);\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n flex-shrink: 0;\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width) solid\n var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: var(--hx-focus-ring-offset);\n }\n\n .button:active {\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n /* ─── Size Variants ─── /\n\n / WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target for all sizes.\n min-width/min-height override the explicit size tokens when they fall below\n the 2.75rem (44px) threshold, preserving the visual icon size via font-size. /\n\n .button--sm {\n padding: var(--hx-space-1);\n width: var(--hx-icon-button-size, var(--hx-size-8));\n height: var(--hx-icon-button-size, var(--hx-size-8));\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n font-size: var(--hx-font-size-sm);\n }\n\n .button--md {\n padding: var(--hx-space-2);\n width: var(--hx-icon-button-size, var(--hx-size-10));\n height: var(--hx-icon-button-size, var(--hx-size-10));\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n font-size: var(--hx-font-size-md);\n }\n\n .button--lg {\n padding: var(--hx-space-3);\n width: var(--hx-icon-button-size, var(--hx-size-12));\n height: var(--hx-icon-button-size, var(--hx-size-12));\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n font-size: var(--hx-font-size-lg);\n }\n\n / ─── Style Variants ─── /\n\n .button--primary {\n --hx-icon-button-bg: var(--hx-color-primary-500);\n --hx-icon-button-color: var(--hx-color-neutral-0);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--primary:hover {\n --hx-icon-button-bg: var(--hx-color-primary-600);\n }\n\n .button--secondary {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-primary-500);\n --hx-icon-button-border-color: var(--hx-color-primary-500);\n }\n\n .button--secondary:hover {\n --hx-icon-button-bg: var(--hx-color-primary-50);\n }\n\n .button--tertiary {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-neutral-700);\n --hx-icon-button-border-color: var(--hx-color-neutral-300);\n }\n\n .button--tertiary:hover {\n --hx-icon-button-bg: var(--hx-color-neutral-100);\n }\n\n .button--danger {\n --hx-icon-button-bg: var(--hx-color-error-500);\n --hx-icon-button-color: var(--hx-color-neutral-0);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--danger:hover {\n --hx-icon-button-bg: var(--hx-color-error-600);\n }\n\n .button--ghost {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-primary-500);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-icon-button-bg: var(--hx-color-neutral-100);\n }\n\n / ─── Icon Container ─── /\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1em;\n height: 1em;\n line-height: 1;\n pointer-events: none;\n }\n\n / ─── Disabled ─── /\n\n .button[disabled] {\n cursor: not-allowed;\n / P1-02 fix: opacity is set only on :host([disabled]) above to prevent\n multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. /\n }\n\n / ─── Reduced Motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixIconButtonStyles } from './hx-icon-button.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/\n An icon-only button component for compact, accessible actions.\n * Renders a square button or anchor element containing a single icon.\n * The `label` property is required and provides the accessible name\n * via `aria-label` and a native tooltip via the `title` attribute.\n \n @summary Icon-only action button with full accessibility support.\n \n @tag hx-icon-button\n \n @slot - Icon element to display (hx-icon, svg, or img).\n \n @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when the button is clicked (not disabled).\n \n @csspart button - The native button or anchor element.\n * @csspart icon - The icon container span wrapping the default slot.\n \n @cssprop [--hx-icon-button-bg=transparent] - Button background color.\n * @cssprop [--hx-icon-button-color=var(--hx-color-primary-500)] - Icon color.\n * @cssprop [--hx-icon-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-icon-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-icon-button-size] - Explicit width and height override for the button.\n * @cssprop [--hx-icon-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n /\n@customElement('hx-icon-button')\nexport class HelixIconButton extends LitElement {\n static override styles = [tokenStyles, helixIconButtonStyles];\n\n /\n Accessible name for the button. Required. Rendered as `aria-label` and\n * `title` on the underlying element. The component renders nothing when absent,\n * and a console warning is emitted to alert developers during authoring.\n * @attr label\n /\n @property({ type: String })\n label = '';\n\n /\n Visual style variant of the button.\n * @attr variant\n /\n @property({ type: String, reflect: true })\n variant: 'primary' \| 'secondary' \| 'tertiary' \| 'danger' \| 'ghost' = 'ghost';\n\n /\n Size of the button.\n * @attr hx-size\n /\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' \| 'md' \| 'lg' = 'md';\n\n /\n The type attribute for the underlying button element.\n * Has no effect when `href` is set.\n * @attr type\n /\n @property({ type: String })\n type: 'button' \| 'submit' \| 'reset' = 'button';\n\n /\n Whether the button is disabled.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n When set, renders an `<a>` element instead of a `<button>`.\n * @attr href\n /\n @property({ type: String })\n href: string \| undefined = undefined;\n\n /\n Name submitted with form data. Only applicable when rendering as a button.\n * @attr name\n /\n @property({ type: String })\n name: string \| undefined = undefined;\n\n /\n Value submitted with form data. Only applicable when rendering as a button.\n * @attr value\n /\n @property({ type: String })\n value: string \| undefined = undefined;\n\n // ─── Form Association via ElementInternals ───\n\n static formAssociated = true;\n\n /* @internal /\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /* @internal /\n this._internals = this.attachInternals();\n }\n\n /* Returns the associated form element, if any. /\n get form(): HTMLFormElement \| null {\n return this._internals.form;\n }\n\n /* Called by the browser when the form is reset. No value to reset. /\n formResetCallback(): void {\n // hx-icon-button does not submit a value; no state to reset.\n }\n\n /* Called by the browser to restore form state. No value to restore. /\n formStateRestoreCallback(\n _state: string \| File \| FormData \| null,\n _mode: 'restore' \| 'autocomplete',\n ): void {\n // hx-icon-button does not submit a value; no state to restore.\n }\n\n /* Called when a parent fieldset is disabled/enabled. /\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Event Handling ───\n\n /* @internal /\n private _handleClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n /\n Dispatched when the button is clicked.\n * @event hx-click\n /\n this.dispatchEvent(\n new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n }),\n );\n\n // Handle form submission/reset if form-associated and not in href/link mode\n if (!this.href) {\n if (this.type === 'submit' && this._internals.form) {\n this._internals.form.requestSubmit();\n } else if (this.type === 'reset' && this._internals.form) {\n this._internals.form.reset();\n }\n }\n }\n\n // ─── Render Helpers ───\n\n /* @internal /\n private _normalizedLabel(): string {\n return this.label.trim();\n }\n\n /* @internal /\n private _classes() {\n return {\n button: true,\n [`button--${this.variant}`]: true,\n [`button--${this.size}`]: true,\n };\n }\n\n /* @internal */\n private _iconSlot() {\n return html`<span part=\"icon\" class=\"icon\"><slot></slot></span>`;\n }\n\n // ─── Render ───\n\n override render() {\n const normalizedLabel = this._normalizedLabel();\n if (!normalizedLabel) {\n devWarn(\n 'hx-icon-button',\n 'The `label` property is required for accessibility. Render suppressed.',\n );\n return nothing;\n }\n\n if (this.href !== undefined) {\n // P1-03 fix: disabled anchor must set tabindex=\"-1\" explicitly — an <a>\n // without href is non-focusable by default in most browsers, but this is\n // browser-dependent. Explicit tabindex=\"-1\" guarantees keyboard exclusion\n // across all conforming browsers.\n // P1-07 note: aria-disabled IS required on the anchor branch because\n // <a> elements have no native disabled attribute; aria-disabled is the\n // only AT signal available.\n return html`\n <a\n part=\"button\"\n class=${classMap(this._classes())}\n href=${ifDefined(this.disabled ? undefined : this.href)}\n aria-label=${normalizedLabel}\n title=${normalizedLabel}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : nothing}\n @click=${this._handleClick}\n >\n ${this._iconSlot()}\n </a>\n `;\n }\n\n // P1-07 fix: aria-disabled is redundant on a natively disabled <button>.\n // The native disabled attribute already exposes aria-disabled=\"true\"\n // implicitly in the accessibility tree. Duplicate explicit aria-disabled\n // creates ambiguity about design intent. Keep only native ?disabled.\n return html`\n <button\n part=\"button\"\n class=${classMap(this._classes())}\n ?disabled=${this.disabled}\n type=${this.type}\n aria-label=${normalizedLabel}\n title=${normalizedLabel}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n @click=${this._handleClick}\n >\n ${this._iconSlot()}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-icon-button': HelixIconButton;\n }\n}\n"],"names":["helixIconButtonStyles","css","HelixIconButton","LitElement","_state","_mode","disabled","e","html","normalizedLabel","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"hx-icon-button-Et9wq79n.js","sources":["../../src/components/hx-icon-button/hx-icon-button.styles.ts","../../src/components/hx-icon-button/hx-icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconButtonStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled);\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);\n border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));\n background-color: var(--hx-icon-button-bg);\n color: var(--hx-icon-button-color, var(--hx-color-primary-500));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast),\n color var(--hx-transition-fast),\n border-color var(--hx-transition-fast),\n box-shadow var(--hx-transition-fast);\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n flex-shrink: 0;\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width) solid\n var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: var(--hx-focus-ring-offset);\n }\n\n .button:active {\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n /* ─── Size Variants ─── /\n\n / WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target for all sizes.\n min-width/min-height override the explicit size tokens when they fall below\n the 2.75rem (44px) threshold, preserving the visual icon size via font-size. /\n\n .button--sm {\n padding: var(--hx-space-1);\n width: var(--hx-icon-button-size, var(--hx-size-8));\n height: var(--hx-icon-button-size, var(--hx-size-8));\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n font-size: var(--hx-font-size-sm);\n }\n\n .button--md {\n padding: var(--hx-space-2);\n width: var(--hx-icon-button-size, var(--hx-size-10));\n height: var(--hx-icon-button-size, var(--hx-size-10));\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n font-size: var(--hx-font-size-md);\n }\n\n .button--lg {\n padding: var(--hx-space-3);\n width: var(--hx-icon-button-size, var(--hx-size-12));\n height: var(--hx-icon-button-size, var(--hx-size-12));\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n font-size: var(--hx-font-size-lg);\n }\n\n / ─── Style Variants ─── /\n\n .button--primary {\n --hx-icon-button-bg: var(--hx-color-primary-500);\n --hx-icon-button-color: var(--hx-color-neutral-0);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--primary:hover {\n --hx-icon-button-bg: var(--hx-color-primary-600);\n }\n\n .button--secondary {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-primary-500);\n --hx-icon-button-border-color: var(--hx-color-primary-500);\n }\n\n .button--secondary:hover {\n --hx-icon-button-bg: var(--hx-color-primary-50);\n }\n\n .button--tertiary {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-neutral-700);\n --hx-icon-button-border-color: var(--hx-color-neutral-300);\n }\n\n .button--tertiary:hover {\n --hx-icon-button-bg: var(--hx-color-neutral-100);\n }\n\n .button--danger {\n --hx-icon-button-bg: var(--hx-color-error-500);\n --hx-icon-button-color: var(--hx-color-neutral-0);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--danger:hover {\n --hx-icon-button-bg: var(--hx-color-error-600);\n }\n\n .button--ghost {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-primary-500);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-icon-button-bg: var(--hx-color-neutral-100);\n }\n\n / ─── Icon Container ─── /\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1em;\n height: 1em;\n line-height: 1;\n pointer-events: none;\n }\n\n / ─── Disabled ─── /\n\n .button[disabled] {\n cursor: not-allowed;\n / P1-02 fix: opacity is set only on :host([disabled]) above to prevent\n multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. /\n }\n\n / ─── Reduced Motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixIconButtonStyles } from './hx-icon-button.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/\n An icon-only button component for compact, accessible actions.\n * Renders a square button or anchor element containing a single icon.\n * The `label` property is required and provides the accessible name\n * via `aria-label` and a native tooltip via the `title` attribute.\n \n @summary Icon-only action button with full accessibility support.\n \n @tag hx-icon-button\n \n @slot - Icon element to display (hx-icon, svg, or img).\n \n @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when the button is clicked (not disabled).\n \n @csspart button - The native button or anchor element.\n * @csspart icon - The icon container span wrapping the default slot.\n \n @cssprop [--hx-icon-button-bg=transparent] - Button background color.\n * @cssprop [--hx-icon-button-color=var(--hx-color-primary-500)] - Icon color.\n * @cssprop [--hx-icon-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-icon-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-icon-button-size] - Explicit width and height override for the button.\n * @cssprop [--hx-icon-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n /\n@customElement('hx-icon-button')\nexport class HelixIconButton extends LitElement {\n static override styles = [tokenStyles, helixIconButtonStyles];\n\n /\n Accessible name for the button. Required. Rendered as `aria-label` and\n * `title` on the underlying element. The component renders nothing when absent,\n * and a console warning is emitted to alert developers during authoring.\n * @attr label\n /\n @property({ type: String })\n label = '';\n\n /\n Visual style variant of the button.\n * @attr variant\n /\n @property({ type: String, reflect: true })\n variant: 'primary' \| 'secondary' \| 'tertiary' \| 'danger' \| 'ghost' = 'ghost';\n\n /\n Size of the button.\n * @attr hx-size\n /\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' \| 'md' \| 'lg' = 'md';\n\n /\n The type attribute for the underlying button element.\n * Has no effect when `href` is set.\n * @attr type\n /\n @property({ type: String })\n type: 'button' \| 'submit' \| 'reset' = 'button';\n\n /\n Whether the button is disabled.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n When set, renders an `<a>` element instead of a `<button>`.\n * @attr href\n /\n @property({ type: String })\n href: string \| undefined = undefined;\n\n /\n Name submitted with form data. Only applicable when rendering as a button.\n * @attr name\n /\n @property({ type: String })\n name: string \| undefined = undefined;\n\n /\n Value submitted with form data. Only applicable when rendering as a button.\n * @attr value\n /\n @property({ type: String })\n value: string \| undefined = undefined;\n\n // ─── Form Association via ElementInternals ───\n\n /* @internal /\n static formAssociated = true;\n\n /* @internal /\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /* @internal /\n this._internals = this.attachInternals();\n }\n\n /* Returns the associated form element, if any. /\n get form(): HTMLFormElement \| null {\n return this._internals.form;\n }\n\n /* @internal /\n formResetCallback(): void {\n // hx-icon-button does not submit a value; no state to reset.\n }\n\n /* @internal /\n formStateRestoreCallback(\n _state: string \| File \| FormData \| null,\n _mode: 'restore' \| 'autocomplete',\n ): void {\n // hx-icon-button does not submit a value; no state to restore.\n }\n\n /* @internal /\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Event Handling ───\n\n /* @internal /\n private _handleClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n /\n Dispatched when the button is clicked.\n * @event hx-click\n /\n this.dispatchEvent(\n new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n }),\n );\n\n // Handle form submission/reset if form-associated and not in href/link mode\n if (!this.href) {\n if (this.type === 'submit' && this._internals.form) {\n this._internals.form.requestSubmit();\n } else if (this.type === 'reset' && this._internals.form) {\n this._internals.form.reset();\n }\n }\n }\n\n // ─── Render Helpers ───\n\n /* @internal /\n private _normalizedLabel(): string {\n return this.label.trim();\n }\n\n /* @internal /\n private _classes() {\n return {\n button: true,\n [`button--${this.variant}`]: true,\n [`button--${this.size}`]: true,\n };\n }\n\n /* @internal */\n private _iconSlot() {\n return html`<span part=\"icon\" class=\"icon\"><slot></slot></span>`;\n }\n\n // ─── Render ───\n\n override render() {\n const normalizedLabel = this._normalizedLabel();\n if (!normalizedLabel) {\n devWarn(\n 'hx-icon-button',\n 'The `label` property is required for accessibility. Render suppressed.',\n );\n return nothing;\n }\n\n if (this.href !== undefined) {\n // P1-03 fix: disabled anchor must set tabindex=\"-1\" explicitly — an <a>\n // without href is non-focusable by default in most browsers, but this is\n // browser-dependent. Explicit tabindex=\"-1\" guarantees keyboard exclusion\n // across all conforming browsers.\n // P1-07 note: aria-disabled IS required on the anchor branch because\n // <a> elements have no native disabled attribute; aria-disabled is the\n // only AT signal available.\n return html`\n <a\n part=\"button\"\n class=${classMap(this._classes())}\n href=${ifDefined(this.disabled ? undefined : this.href)}\n aria-label=${normalizedLabel}\n title=${normalizedLabel}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : nothing}\n @click=${this._handleClick}\n >\n ${this._iconSlot()}\n </a>\n `;\n }\n\n // P1-07 fix: aria-disabled is redundant on a natively disabled <button>.\n // The native disabled attribute already exposes aria-disabled=\"true\"\n // implicitly in the accessibility tree. Duplicate explicit aria-disabled\n // creates ambiguity about design intent. Keep only native ?disabled.\n return html`\n <button\n part=\"button\"\n class=${classMap(this._classes())}\n ?disabled=${this.disabled}\n type=${this.type}\n aria-label=${normalizedLabel}\n title=${normalizedLabel}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n @click=${this._handleClick}\n >\n ${this._iconSlot()}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-icon-button': HelixIconButton;\n }\n}\n"],"names":["helixIconButtonStyles","css","HelixIconButton","LitElement","_state","_mode","disabled","e","html","normalizedLabel","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-icon-CP6OnLoM.js → hx-icon-dYvrzvsO.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { css as _, LitElement as S, nothing as n, html as m } from "lit";
-import { property as f, state as u, customElement as x } from "lit/decorators.js";
+import { property as f, state as g, customElement as x } from "lit/decorators.js";
 import { unsafeHTML as y } from "lit/directives/unsafe-html.js";
 import { tokenStyles as b } from "@helixui/tokens/lit";
 const w = _`
@@ -87,7 +87,7 @@ let s = class extends S {
   }
   // ─── Lifecycle ───
   updated(e) {
-    e.has("src") && this.src !== this._fetchedSrc && this._fetchInlineSvg(this.src);
+    super.updated(e), e.has("src") && this.src !== this._fetchedSrc && this._fetchInlineSvg(this.src);
   }
   // ─── Inline SVG Fetch ───
   /** @internal */
@@ -148,8 +148,8 @@ let s = class extends S {
           return;
         }
         if (a.has(d)) {
-          const g = p.value.replace(/\s/g, "").toLowerCase();
-          (g.startsWith("javascript:") || g.startsWith("data:")) && l.removeAttribute(p.name);
+          const u = p.value.replace(/\s/g, "").toLowerCase();
+          (u.startsWith("javascript:") || u.startsWith("data:")) && l.removeAttribute(p.name);
         }
       });
     }), c.forEach((l) => t.removeAttribute(l)), t.setAttribute("focusable", "false"), t.outerHTML;
@@ -225,10 +225,10 @@ h([
   f({ type: String })
 ], s.prototype, "label", 2);
 h([
-  u()
+  g()
 ], s.prototype, "_inlineSvg", 2);
 h([
-  u()
+  g()
 ], s.prototype, "_fetchedSrc", 2);
 s = h([
   x("hx-icon")
@@ -237,4 +237,4 @@ const v = /* @__PURE__ */ new Map();
 export {
   s as H
 };
-//# sourceMappingURL=hx-icon-CP6OnLoM.js.map
+//# sourceMappingURL=hx-icon-dYvrzvsO.js.map

package/dist/shared/hx-icon-dYvrzvsO.js.map ADDED Viewed

@@ -0,0 +1 @@

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