npm - @helixui/library - Versions diffs - 2.1.2-next.52 → 2.1.2-next.54 - Mend

@helixui/library 2.1.2-next.52 → 2.1.2-next.54

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 (817) hide show

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

@@ -0,0 +1 @@

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

package/dist/shared/{hx-format-date-B7L9odbA.js → hx-format-date-CKnlQOmV.js} RENAMED Viewed

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

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

@@ -0,0 +1 @@

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

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-grid-CXZf3jeK.js","sources":["../../src/components/hx-grid/hx-grid.styles.ts","../../src/components/hx-grid/hx-grid.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixGridStyles = css`\n :host {\n display: block;\n box-sizing: border-box;\n width: 100%;\n }\n`;\n\nexport const helixGridItemStyles = css`\n :host {\n display: block;\n min-width: 0;\n min-height: 0;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n /* hx-grid and hx-grid-item are layout wrappers with no state communicated\n via color. forced-color-adjust: auto (default) is sufficient. */\n @media (forced-colors: active) {\n :host {\n forced-color-adjust: auto;\n }\n }\n`;\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixGridStyles, helixGridItemStyles } from './hx-grid.styles.js';\n\ntype GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst GAP_TOKENS: Record<GapSize, string> = {\n none: '0',\n xs: 'var(--hx-space-1, 0.25rem)',\n sm: 'var(--hx-space-2, 0.5rem)',\n md: 'var(--hx-space-4, 1rem)',\n lg: 'var(--hx-space-6, 1.5rem)',\n xl: 'var(--hx-space-8, 2rem)',\n};\n\n/**\n * A CSS Grid layout wrapper with design-token-based column and gap system.\n *\n * @summary CSS Grid layout primitive for building responsive grid layouts.\n *\n * @tag hx-grid\n *\n * @slot - Default slot for grid content (use `hx-grid-item` for precise placement).\n *\n * @csspart base - The grid container element.\n *\n * @cssprop [--hx-grid-columns] - Override the computed grid-template-columns.\n * @cssprop [--hx-grid-gap] - Override the computed gap.\n * @cssprop [--hx-grid-row-gap] - Override the computed row-gap.\n * @cssprop [--hx-grid-column-gap] - Override the computed column-gap.\n */\n@customElement('hx-grid')\nexport class HelixGrid extends HelixElement {\n static override styles = [helixGridStyles];\n\n /**\n * Number of equal columns (`repeat(N, 1fr)`) or a CSS grid-template-columns string.\n * @attr columns\n */\n @property({ reflect: true })\n columns: number | string = 1;\n\n /**\n * Gap size applied to both row and column gaps.\n * @attr gap\n */\n @property({ reflect: true })\n gap: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n /**\n * Row gap override. When set, takes precedence over `gap` for row spacing.\n * @attr row-gap\n */\n @property({ attribute: 'row-gap', reflect: true })\n rowGap: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;\n\n /**\n * Column gap override. When set, takes precedence over `gap` for column spacing.\n * @attr column-gap\n */\n @property({ attribute: 'column-gap', reflect: true })\n columnGap: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;\n\n /**\n * Aligns grid items along the block axis (align-items).\n * @attr align\n */\n @property({ reflect: true })\n align: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n /**\n * Justifies grid items along the inline axis (justify-items).\n * @attr justify\n */\n @property({ reflect: true })\n justify: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n /** @internal */\n private _gridTemplateColumns(): string {\n const cols = this.columns;\n if (typeof cols === 'number' || /^\\d+$/.test(String(cols))) {\n return `var(--hx-grid-columns, repeat(${cols}, 1fr))`;\n }\n return `var(--hx-grid-columns, ${cols})`;\n }\n\n /** @internal */\n private _resolveGap(size: GapSize): string {\n return GAP_TOKENS[size] ?? GAP_TOKENS.md;\n }\n\n /** @internal */\n private _computedRowGap(): string {\n if (this.rowGap) {\n return `var(--hx-grid-row-gap, ${this._resolveGap(this.rowGap)})`;\n }\n return `var(--hx-grid-row-gap, var(--hx-grid-gap, ${this._resolveGap(this.gap)}))`;\n }\n\n /** @internal */\n private _computedColumnGap(): string {\n if (this.columnGap) {\n return `var(--hx-grid-column-gap, ${this._resolveGap(this.columnGap)})`;\n }\n return `var(--hx-grid-column-gap, var(--hx-grid-gap, ${this._resolveGap(this.gap)}))`;\n }\n\n /** @internal */\n private _baseStyleMap(): Record<string, string> {\n return {\n display: 'grid',\n 'grid-template-columns': this._gridTemplateColumns(),\n 'row-gap': this._computedRowGap(),\n 'column-gap': this._computedColumnGap(),\n 'align-items': this.align,\n 'justify-items': this.justify,\n };\n }\n\n override render() {\n return html`\n <div part=\"base\" role=\"presentation\" style=${styleMap(this._baseStyleMap())}>\n <slot></slot>\n </div>\n `;\n }\n}\n\n/**\n * Optional companion element for precise grid item placement.\n * Applies grid-column and grid-row directly to the host element\n * so it participates correctly in the parent CSS grid layout.\n *\n * @summary Grid item with explicit column/row placement.\n *\n * @tag hx-grid-item\n *\n * @slot - Default slot for item content.\n */\n@customElement('hx-grid-item')\nexport class HelixGridItem extends HelixElement {\n static override styles = [helixGridItemStyles];\n\n /**\n * CSS grid-column value (e.g., \"1 / 3\", \"span 2\").\n * @attr column\n */\n @property({ reflect: true })\n column: string | undefined;\n\n /**\n * CSS grid-row value (e.g., \"1 / 2\").\n * @attr row\n */\n @property({ reflect: true })\n row: string | undefined;\n\n /**\n * Column span shorthand — equivalent to setting `column: \"span N\"`.\n * @attr span\n */\n @property({ type: Number, reflect: true })\n span: number | undefined;\n\n override updated(changed: PropertyValues<this>): void {\n super.updated(changed);\n if (changed.has('column') || changed.has('row') || changed.has('span')) {\n this._applyHostGridStyles();\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._applyHostGridStyles();\n }\n\n /** @internal */\n private _applyHostGridStyles(): void {\n if (this.column) {\n this.style.gridColumn = this.column;\n } else if (this.span !== undefined) {\n this.style.gridColumn = `span ${this.span}`;\n } else {\n this.style.gridColumn = '';\n }\n if (this.row) {\n this.style.gridRow = this.row;\n } else {\n this.style.gridRow = '';\n }\n }\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-grid': HelixGrid;\n 'hx-grid-item': HelixGridItem;\n }\n}\n"],"names":["helixGridStyles","css","helixGridItemStyles","GAP_TOKENS","HelixGrid","HelixElement","cols","size","html","styleMap","__decorateClass","property","customElement","HelixGridItem","changed"],"mappings":"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"}

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

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

package/dist/shared/hx-help-text-D7eytSim.js.map ADDED Viewed

@@ -0,0 +1 @@

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