@helixui/library 0.1.0

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

@@ -0,0 +1,1264 @@
+import { LitElement as l, html as m, nothing as f } from "lit";
+import { state as x, property as h, customElement as p } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { A as d } from "./adopted-stylesheets-BZZnCSAs.js";
+const v = `/* ==========================================================================
+ * form.scoped.css — Scoped barrel file
+ *
+ * Contains all form styles with every selector prefixed by \`hx-form\` to
+ * prevent leaking outside the <hx-form> Light DOM wrapper.
+ *
+ * IMPORTANT: This file does NOT use @import because CSS imports cannot
+ * add scope prefixes. All styles are written inline.
+ * ==========================================================================
+ */
+
+/* ==========================================================================
+ * HOST / FORM ROOT TOKENS
+ * ========================================================================== */
+
+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);
+}
+
+/* ==========================================================================
+ * ERROR SUMMARY
+ * ========================================================================== */
+
+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, 0.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, 0.75rem) var(--hx-space-4, 1rem);
+  font-size: var(--hx-font-size-sm, 0.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, 0.25rem);
+}
+
+hx-form .hx-form-error-summary li:last-child {
+  margin-bottom: 0;
+}
+
+/* ==========================================================================
+ * FIELD (_field.css scoped)
+ * ========================================================================== */
+
+/* ─── Field Container ─── */
+
+hx-form .form-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hx-space-1, 0.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);
+}
+
+/* ─── Label ─── */
+
+hx-form label {
+  display: flex;
+  align-items: baseline;
+  gap: var(--hx-space-1, 0.25rem);
+  font-size: var(--hx-font-size-sm, 0.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);
+}
+
+/* ─── Required Marker ─── */
+
+hx-form .form-required {
+  color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+  font-weight: var(--hx-font-weight-bold, 700);
+}
+
+/* ─── Description / Help Text ─── */
+
+hx-form .description {
+  font-size: var(--hx-font-size-xs, 0.75rem);
+  color: var(--hx-color-neutral-500, #6c757d);
+  line-height: var(--hx-line-height-normal, 1.5);
+}
+
+/* ─── Box Sizing Reset ─── */
+
+hx-form .form-item *,
+hx-form .form-item *::before,
+hx-form .form-item *::after {
+  box-sizing: border-box;
+}
+
+/* ==========================================================================
+ * TEXT INPUT (_text-input.css scoped)
+ * ========================================================================== */
+
+hx-form input[type='text'],
+hx-form input[type='email'],
+hx-form input[type='password'],
+hx-form input[type='tel'],
+hx-form input[type='url'],
+hx-form input[type='search'],
+hx-form input[type='number'] {
+  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, 0.375rem));
+  background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
+  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.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);
+  min-height: var(--hx-size-10, 2.5rem);
+  transition:
+    border-color var(--hx-transition-fast, 150ms ease),
+    box-shadow var(--hx-transition-fast, 150ms ease);
+}
+
+/* ─── Placeholder ─── */
+
+hx-form input[type='text']::placeholder,
+hx-form input[type='email']::placeholder,
+hx-form input[type='password']::placeholder,
+hx-form input[type='tel']::placeholder,
+hx-form input[type='url']::placeholder,
+hx-form input[type='search']::placeholder,
+hx-form input[type='number']::placeholder {
+  color: var(--hx-color-neutral-400, #adb5bd);
+}
+
+/* ─── Focus State ─── */
+
+hx-form input[type='text']:focus,
+hx-form input[type='email']:focus,
+hx-form input[type='password']:focus,
+hx-form input[type='tel']:focus,
+hx-form input[type='url']:focus,
+hx-form input[type='search']:focus,
+hx-form input[type='number']: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, 0.25) * 100%),
+      transparent
+    );
+}
+
+@media (forced-colors: active) {
+  hx-form input[type='text']:focus,
+  hx-form input[type='email']:focus,
+  hx-form input[type='password']:focus,
+  hx-form input[type='tel']:focus,
+  hx-form input[type='url']:focus,
+  hx-form input[type='search']:focus,
+  hx-form input[type='number']:focus {
+    outline: var(--hx-focus-ring-width, 2px) solid ButtonText;
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+}
+
+/* ─── Disabled State ─── */
+
+hx-form input[type='text']:disabled,
+hx-form input[type='email']:disabled,
+hx-form input[type='password']:disabled,
+hx-form input[type='tel']:disabled,
+hx-form input[type='url']:disabled,
+hx-form input[type='search']:disabled,
+hx-form input[type='number']:disabled {
+  opacity: var(--hx-opacity-disabled, 0.5);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ─── Read-Only State ─── */
+
+hx-form input[type='text']:read-only,
+hx-form input[type='email']:read-only,
+hx-form input[type='password']:read-only,
+hx-form input[type='tel']:read-only,
+hx-form input[type='url']:read-only,
+hx-form input[type='search']:read-only,
+hx-form input[type='number']:read-only {
+  background-color: var(--hx-color-neutral-100, #e9ecef);
+}
+
+/* ─── Remove browser search decorations ─── */
+
+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;
+}
+
+/* ─── Remove number input spinners ─── */
+
+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;
+}
+
+/* ==========================================================================
+ * TEXTAREA (_textarea.css scoped)
+ * ========================================================================== */
+
+hx-form 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, 0.375rem));
+  background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
+  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.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);
+  min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
+  resize: vertical;
+  transition:
+    border-color var(--hx-transition-fast, 150ms ease),
+    box-shadow var(--hx-transition-fast, 150ms ease);
+}
+
+hx-form textarea::placeholder {
+  color: var(--hx-color-neutral-400, #adb5bd);
+}
+
+hx-form 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, 0.25) * 100%),
+      transparent
+    );
+}
+
+@media (forced-colors: active) {
+  hx-form textarea:focus {
+    outline: var(--hx-focus-ring-width, 2px) solid ButtonText;
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+}
+
+hx-form textarea:disabled {
+  opacity: var(--hx-opacity-disabled, 0.5);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+hx-form textarea:read-only {
+  background-color: var(--hx-color-neutral-100, #e9ecef);
+}
+
+/* ==========================================================================
+ * SELECT (_select.css scoped)
+ * ========================================================================== */
+
+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, 0.375rem));
+  background-color: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
+  padding: var(--hx-space-2, 0.5rem) var(--hx-space-8, 2rem) var(--hx-space-2, 0.5rem)
+    var(--hx-space-3, 0.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, 150ms ease),
+    box-shadow var(--hx-transition-fast, 150ms 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, 0.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, 0.25) * 100%),
+      transparent
+    );
+}
+
+@media (forced-colors: active) {
+  hx-form select:focus {
+    outline: var(--hx-focus-ring-width, 2px) solid ButtonText;
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+}
+
+hx-form select:disabled {
+  opacity: var(--hx-opacity-disabled, 0.5);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+hx-form select[multiple] {
+  min-height: var(--hx-size-20, 5rem);
+  padding-right: var(--hx-space-3, 0.75rem);
+  background-image: none;
+}
+
+hx-form select[multiple] option {
+  padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+}
+
+hx-form select::-ms-expand {
+  display: none;
+}
+
+/* ==========================================================================
+ * CHECKBOX (_checkbox.css scoped)
+ * ========================================================================== */
+
+hx-form input[type='checkbox'] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
+  height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
+  margin: 0;
+  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, 0.25rem));
+  background-color: var(--hx-color-neutral-0, #ffffff);
+  transition:
+    background-color var(--hx-transition-fast, 150ms ease),
+    border-color var(--hx-transition-fast, 150ms ease),
+    box-shadow var(--hx-transition-fast, 150ms ease);
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+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, 0.9));
+}
+
+hx-form input[type='checkbox']:disabled {
+  opacity: var(--hx-opacity-disabled, 0.5);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+hx-form .form-type-checkbox,
+hx-form .form-type-checkbox-toggle {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--hx-space-2, 0.5rem);
+}
+
+hx-form .form-type-checkbox label,
+hx-form .form-type-checkbox-toggle label {
+  font-size: var(--hx-font-size-sm, 0.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;
+}
+
+/* ==========================================================================
+ * RADIO (_radio.css scoped)
+ * ========================================================================== */
+
+hx-form input[type='radio'] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--hx-radio-size, var(--hx-size-5, 1.25rem));
+  height: var(--hx-radio-size, var(--hx-size-5, 1.25rem));
+  margin: 0;
+  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);
+  background-color: var(--hx-color-neutral-0, #ffffff);
+  transition:
+    border-color var(--hx-transition-fast, 150ms ease),
+    background-color var(--hx-transition-fast, 150ms ease),
+    box-shadow var(--hx-transition-fast, 150ms ease);
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+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)) * 0.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 input[type='radio']:disabled {
+  opacity: var(--hx-opacity-disabled, 0.5);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+hx-form .form-type-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hx-space-2, 0.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, 0.75rem));
+}
+
+hx-form .form-radios--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+/* ==========================================================================
+ * SWITCH (_switch.css scoped)
+ * ========================================================================== */
+
+hx-form .form-type-switch {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hx-space-1, 0.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, 0.5rem);
+}
+
+hx-form .form-type-switch input[type='checkbox'] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  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));
+  margin: 0;
+  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, 150ms ease);
+  cursor: pointer;
+  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, 0.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 / 0.05)));
+  transition: transform var(--hx-transition-fast, 150ms 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%)
+    translateX(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, 0.5);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+hx-form .form-type-switch label {
+  font-size: var(--hx-font-size-sm, 0.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;
+}
+
+/* Small */
+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, 0.875rem));
+  height: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));
+}
+
+hx-form .form-type-switch--sm input[type='checkbox']:checked::before {
+  transform: translateY(-50%)
+    translateX(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem)));
+}
+
+/* Large */
+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%)
+    translateX(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)));
+}
+
+/* ==========================================================================
+ * FORM LAYOUT (_form-layout.css scoped)
+ * ========================================================================== */
+
+/* ─── Form Root ─── */
+
+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));
+}
+
+/* ─── Fieldset ─── */
+
+hx-form fieldset {
+  border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);
+  border-radius: var(--hx-border-radius-md, 0.375rem);
+  padding: var(--hx-space-4, 1rem) var(--hx-space-4, 1rem) var(--hx-space-4, 1rem);
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--hx-space-4, 1rem);
+}
+
+/* ─── Legend ─── */
+
+hx-form legend {
+  display: flex;
+  align-items: baseline;
+  gap: var(--hx-space-1, 0.25rem);
+  font-size: var(--hx-font-size-sm, 0.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);
+  padding: 0 var(--hx-space-1, 0.25rem);
+}
+
+/* ─── Details / Collapsible Fieldset (Drupal) ─── */
+
+hx-form details {
+  border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #dee2e6);
+  border-radius: var(--hx-border-radius-md, 0.375rem);
+  padding: var(--hx-space-4, 1rem);
+  margin: 0;
+}
+
+hx-form summary {
+  font-size: var(--hx-font-size-sm, 0.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);
+  cursor: pointer;
+  padding: var(--hx-space-1, 0.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, 0.25rem);
+}
+
+/* ─── Form Actions (button group) ─── */
+
+hx-form .form-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--hx-space-3, 0.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;
+}
+
+/* ─── Multi-Column Layout ─── */
+
+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;
+  }
+}
+
+/* ─── Full-Width Form Item (spans all columns) ─── */
+
+hx-form .form-item--full {
+  grid-column: 1 / -1;
+}
+
+/* ─── Inline Form Layout ─── */
+
+hx-form .form-inline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--hx-space-3, 0.75rem);
+}
+
+hx-form .form-inline .form-item {
+  flex: 1;
+  min-width: 0;
+}
+
+hx-form .form-inline .form-item + .form-item {
+  margin-top: 0;
+}
+
+/* ─── Form Divider ─── */
+
+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, 0.5rem) 0;
+}
+
+/* ==========================================================================
+ * VALIDATION (_validation.css scoped)
+ * ========================================================================== */
+
+/* ─── Error State on Field Wrapper ─── */
+
+hx-form .form-item.error label,
+hx-form .form-item.has-error label,
+hx-form .form-item--error label {
+  color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+}
+
+hx-form .form-item.error input[type='text'],
+hx-form .form-item.error input[type='email'],
+hx-form .form-item.error input[type='password'],
+hx-form .form-item.error input[type='tel'],
+hx-form .form-item.error input[type='url'],
+hx-form .form-item.error input[type='search'],
+hx-form .form-item.error input[type='number'],
+hx-form .form-item.error textarea,
+hx-form .form-item.error select,
+hx-form .form-item.has-error input[type='text'],
+hx-form .form-item.has-error input[type='email'],
+hx-form .form-item.has-error input[type='password'],
+hx-form .form-item.has-error input[type='tel'],
+hx-form .form-item.has-error input[type='url'],
+hx-form .form-item.has-error input[type='search'],
+hx-form .form-item.has-error input[type='number'],
+hx-form .form-item.has-error textarea,
+hx-form .form-item.has-error select,
+hx-form .form-item--error input[type='text'],
+hx-form .form-item--error input[type='email'],
+hx-form .form-item--error input[type='password'],
+hx-form .form-item--error input[type='tel'],
+hx-form .form-item--error input[type='url'],
+hx-form .form-item--error input[type='search'],
+hx-form .form-item--error input[type='number'],
+hx-form .form-item--error textarea,
+hx-form .form-item--error select {
+  border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+}
+
+hx-form .form-item.error input[type='text']:focus,
+hx-form .form-item.error input[type='email']:focus,
+hx-form .form-item.error input[type='password']:focus,
+hx-form .form-item.error input[type='tel']:focus,
+hx-form .form-item.error input[type='url']:focus,
+hx-form .form-item.error input[type='search']:focus,
+hx-form .form-item.error input[type='number']:focus,
+hx-form .form-item.error textarea:focus,
+hx-form .form-item.error select:focus,
+hx-form .form-item.has-error input[type='text']:focus,
+hx-form .form-item.has-error input[type='email']:focus,
+hx-form .form-item.has-error input[type='password']:focus,
+hx-form .form-item.has-error input[type='tel']:focus,
+hx-form .form-item.has-error input[type='url']:focus,
+hx-form .form-item.has-error input[type='search']:focus,
+hx-form .form-item.has-error input[type='number']:focus,
+hx-form .form-item.has-error textarea:focus,
+hx-form .form-item.has-error select:focus,
+hx-form .form-item--error input[type='text']:focus,
+hx-form .form-item--error input[type='email']:focus,
+hx-form .form-item--error input[type='password']:focus,
+hx-form .form-item--error input[type='tel']:focus,
+hx-form .form-item--error input[type='url']:focus,
+hx-form .form-item--error input[type='search']:focus,
+hx-form .form-item--error input[type='number']:focus,
+hx-form .form-item--error textarea:focus,
+hx-form .form-item--error 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, 0.25) * 100%),
+      transparent
+    );
+}
+
+/* ─── Error State on Checkbox/Radio ─── */
+
+hx-form .form-item.error input[type='checkbox'],
+hx-form .form-item.has-error input[type='checkbox'],
+hx-form .form-item--error input[type='checkbox'] {
+  border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #dc3545));
+}
+
+hx-form .form-item.error input[type='checkbox']:checked,
+hx-form .form-item.has-error input[type='checkbox']:checked,
+hx-form .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 .form-item.error input[type='radio'],
+hx-form .form-item.has-error input[type='radio'],
+hx-form .form-item--error input[type='radio'] {
+  border-color: var(--hx-color-error-500, #dc3545);
+}
+
+/* ─── Inline Error Message ─── */
+
+hx-form .form-item__error-message,
+hx-form .form-item .error-message,
+hx-form .error-message {
+  font-size: var(--hx-font-size-xs, 0.75rem);
+  color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));
+  line-height: var(--hx-line-height-normal, 1.5);
+}
+
+/* ─── Success State on Field Wrapper ─── */
+
+hx-form .form-item.success label,
+hx-form .form-item.has-success label,
+hx-form .form-item--success label {
+  color: var(--hx-color-success-500, #198754);
+}
+
+hx-form .form-item.success input[type='text'],
+hx-form .form-item.success input[type='email'],
+hx-form .form-item.success input[type='password'],
+hx-form .form-item.success input[type='tel'],
+hx-form .form-item.success input[type='url'],
+hx-form .form-item.success input[type='search'],
+hx-form .form-item.success input[type='number'],
+hx-form .form-item.success textarea,
+hx-form .form-item.success select,
+hx-form .form-item.has-success input[type='text'],
+hx-form .form-item.has-success input[type='email'],
+hx-form .form-item.has-success input[type='password'],
+hx-form .form-item.has-success input[type='tel'],
+hx-form .form-item.has-success input[type='url'],
+hx-form .form-item.has-success input[type='search'],
+hx-form .form-item.has-success input[type='number'],
+hx-form .form-item.has-success textarea,
+hx-form .form-item.has-success select,
+hx-form .form-item--success input[type='text'],
+hx-form .form-item--success input[type='email'],
+hx-form .form-item--success input[type='password'],
+hx-form .form-item--success input[type='tel'],
+hx-form .form-item--success input[type='url'],
+hx-form .form-item--success input[type='search'],
+hx-form .form-item--success input[type='number'],
+hx-form .form-item--success textarea,
+hx-form .form-item--success select {
+  border-color: var(--hx-color-success-500, #198754);
+}
+
+hx-form .form-item.success input[type='text']:focus,
+hx-form .form-item.success input[type='email']:focus,
+hx-form .form-item.success input[type='password']:focus,
+hx-form .form-item.success input[type='tel']:focus,
+hx-form .form-item.success input[type='url']:focus,
+hx-form .form-item.success input[type='search']:focus,
+hx-form .form-item.success input[type='number']:focus,
+hx-form .form-item.success textarea:focus,
+hx-form .form-item.success select:focus,
+hx-form .form-item.has-success input[type='text']:focus,
+hx-form .form-item.has-success input[type='email']:focus,
+hx-form .form-item.has-success input[type='password']:focus,
+hx-form .form-item.has-success input[type='tel']:focus,
+hx-form .form-item.has-success input[type='url']:focus,
+hx-form .form-item.has-success input[type='search']:focus,
+hx-form .form-item.has-success input[type='number']:focus,
+hx-form .form-item.has-success textarea:focus,
+hx-form .form-item.has-success select:focus,
+hx-form .form-item--success input[type='text']:focus,
+hx-form .form-item--success input[type='email']:focus,
+hx-form .form-item--success input[type='password']:focus,
+hx-form .form-item--success input[type='tel']:focus,
+hx-form .form-item--success input[type='url']:focus,
+hx-form .form-item--success input[type='search']:focus,
+hx-form .form-item--success input[type='number']:focus,
+hx-form .form-item--success textarea:focus,
+hx-form .form-item--success 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, 0.25) * 100%),
+      transparent
+    );
+}
+
+/* ─── Inline Success Message ─── */
+
+hx-form .form-item__success-message,
+hx-form .form-item .success-message,
+hx-form .success-message {
+  font-size: var(--hx-font-size-xs, 0.75rem);
+  color: var(--hx-color-success-500, #198754);
+  line-height: var(--hx-line-height-normal, 1.5);
+}
+
+/* ─── Drupal System Messages ─── */
+
+hx-form .messages--error {
+  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, 0.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, 0.75rem) var(--hx-space-4, 1rem);
+  font-size: var(--hx-font-size-sm, 0.875rem);
+  line-height: var(--hx-line-height-normal, 1.5);
+}
+
+hx-form .messages--status {
+  border: var(--hx-border-width-thin, 1px) solid var(--hx-color-success-500, #198754);
+  border-radius: var(--hx-border-radius-md, 0.375rem);
+  background-color: var(--hx-color-success-50, #f0fdf4);
+  color: var(--hx-color-success-500, #198754);
+  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+  font-size: var(--hx-font-size-sm, 0.875rem);
+  line-height: var(--hx-line-height-normal, 1.5);
+}
+
+hx-form .messages--warning {
+  border: var(--hx-border-width-thin, 1px) solid var(--hx-color-warning-500, #ffc107);
+  border-radius: var(--hx-border-radius-md, 0.375rem);
+  background-color: var(--hx-color-warning-50, #fffbeb);
+  color: var(--hx-color-warning-700, #92400e);
+  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+  font-size: var(--hx-font-size-sm, 0.875rem);
+  line-height: var(--hx-line-height-normal, 1.5);
+}
+
+/* ==========================================================================
+ * FORCED-COLORS / HIGH CONTRAST MODE (P1-01)
+ *
+ * When box-shadow is used for focus rings, it is invisible in Windows
+ * High Contrast Mode. Restore a visible outline.
+ * ========================================================================== */
+
+@media (forced-colors: active) {
+  hx-form input[type='text']:focus,
+  hx-form input[type='email']:focus,
+  hx-form input[type='password']:focus,
+  hx-form input[type='tel']:focus,
+  hx-form input[type='url']:focus,
+  hx-form input[type='search']:focus,
+  hx-form input[type='number']:focus,
+  hx-form textarea:focus,
+  hx-form select:focus {
+    outline: 2px solid CanvasText;
+    outline-offset: 2px;
+  }
+
+  hx-form .hx-form-error-summary {
+    border-color: LinkText;
+  }
+}
+`, b = v;
+var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (e, r, o, n) => {
+  for (var t = n > 1 ? void 0 : n ? g(r, o) : r, s = e.length - 1, c; s >= 0; s--)
+    (c = e[s]) && (t = (n ? c(r, o, t) : c(t)) || t);
+  return n && t && y(r, o, t), t;
+};
+let i = class extends l {
+  constructor() {
+    super(...arguments), this._styles = new d(this, b, document), this._validationErrors = [], this.action = "", this.method = "post", this.novalidate = !1, this.name = "", this.enctype = "application/x-www-form-urlencoded", this._handleSubmit = (e) => {
+      if (this.action)
+        return;
+      if (e.preventDefault(), !this.novalidate && !this.checkValidity()) {
+        const n = this._collectValidationErrors();
+        this._validationErrors = n, this._applyAriaInvalidFromValidity(), this.dispatchEvent(
+          new CustomEvent("hx-invalid", {
+            bubbles: !0,
+            composed: !0,
+            detail: { errors: n }
+          })
+        );
+        return;
+      }
+      this._validationErrors = [], this._clearAriaInvalid();
+      const r = this.getFormData(), o = {};
+      for (const n of new Set(r.keys())) {
+        const t = r.getAll(n);
+        t.length === 1 && t[0] !== void 0 ? o[n] = t[0] : o[n] = t;
+      }
+      this.dispatchEvent(
+        new CustomEvent("hx-submit", {
+          bubbles: !0,
+          composed: !0,
+          detail: { valid: !0, values: o, formData: r }
+        })
+      );
+    }, this._handleReset = () => {
+      this._validationErrors = [], this._clearAriaInvalid(), this.dispatchEvent(
+        new CustomEvent("hx-reset", {
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+  }
+  // ─── Light DOM ───
+  createRenderRoot() {
+    return this;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("submit", this._handleSubmit), this.addEventListener("reset", this._handleReset);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("submit", this._handleSubmit), this.removeEventListener("reset", this._handleReset);
+  }
+  // ─── Public Methods ───
+  /**
+   * Checks the validity of all child form elements without showing
+   * validation UI. Returns `true` if all elements are valid.
+   */
+  checkValidity() {
+    return this._getAllValidatableElements().every((r) => "checkValidity" in r && typeof r.checkValidity == "function" ? r.checkValidity() : !0);
+  }
+  /**
+   * Checks validity and triggers the browser's constraint validation UI
+   * on each invalid element. Returns `true` if all elements are valid.
+   */
+  reportValidity() {
+    const e = this._getAllValidatableElements();
+    let r = !0;
+    for (const o of e)
+      "reportValidity" in o && typeof o.reportValidity == "function" && (o.reportValidity() || (r = !1));
+    return r;
+  }
+  /**
+   * Collects form data from all child form elements (native and hx-*).
+   * Returns a `FormData` object.
+   */
+  getFormData() {
+    const e = this.querySelector("form");
+    if (e)
+      return new FormData(e);
+    const r = new FormData(), o = this.getNativeFormElements();
+    for (const n of o) {
+      const t = n;
+      t.name && (t instanceof HTMLInputElement && (t.type === "checkbox" || t.type === "radio") ? t.checked && r.append(t.name, t.value || "on") : r.append(t.name, t.value));
+    }
+    return r;
+  }
+  /**
+   * Returns all child hx-* form components that implement the form
+   * component contract (hx-text-input, hx-select, hx-checkbox, hx-textarea,
+   * hx-radio-group, hx-switch).
+   *
+   * Note: This uses a hardcoded allowlist. When a new hx-* form component
+   * is added, update this selector to include it.
+   */
+  getFormElements() {
+    return Array.from(
+      this.querySelectorAll(
+        "hx-text-input, hx-select, hx-checkbox, hx-textarea, hx-radio-group, hx-switch"
+      )
+    );
+  }
+  /**
+   * Returns all native form elements (input, select, textarea, button)
+   * found within this component's light DOM.
+   */
+  getNativeFormElements() {
+    return Array.from(
+      this.querySelectorAll("input, select, textarea, button")
+    );
+  }
+  /**
+   * Programmatically sets server-side validation errors on the form.
+   * Renders an error summary and sets `aria-invalid="true"` on named fields.
+   *
+   * Useful for surfacing Drupal server-side validation responses.
+   *
+   * @param errors - Array of `{name, message}` pairs matching field `name` attributes.
+   */
+  setErrors(e) {
+    this._validationErrors = e, this._applyAriaInvalidFromErrors(e);
+  }
+  /**
+   * Programmatically sets a single field error. Merges with any existing errors.
+   *
+   * @param name - The `name` attribute of the field.
+   * @param message - The error message to display.
+   */
+  setFieldError(e, r) {
+    const o = this._validationErrors.filter((n) => n.name !== e);
+    this.setErrors([...o, { name: e, message: r }]);
+  }
+  /**
+   * Clears all validation errors from the error summary and removes
+   * `aria-invalid` from all fields.
+   */
+  clearErrors() {
+    this._clearAriaInvalid(), this._validationErrors = [];
+  }
+  // ─── Private Helpers ───
+  /**
+   * Returns all elements that support constraint validation, including
+   * both native form elements and hx-* components with `checkValidity`.
+   */
+  _getAllValidatableElements() {
+    const e = Array.from(this.querySelectorAll("input, select, textarea")), r = this.getFormElements().filter(
+      (o) => "checkValidity" in o && typeof o.checkValidity == "function"
+    );
+    return [...e, ...r];
+  }
+  /**
+   * Sets `aria-invalid="true"` on fields with errors, removes it from valid fields.
+   */
+  _applyAriaInvalidFromErrors(e) {
+    const r = new Set(e.map((n) => n.name)), o = this._getAllValidatableElements();
+    for (const n of o) {
+      const s = n.name ?? n.tagName.toLowerCase();
+      r.has(s) ? n.setAttribute("aria-invalid", "true") : n.removeAttribute("aria-invalid");
+    }
+  }
+  /**
+   * Sets `aria-invalid` based on native constraint validation state.
+   */
+  _applyAriaInvalidFromValidity() {
+    const e = this._getAllValidatableElements();
+    for (const r of e)
+      "validity" in r && (r.validity.valid ? r.removeAttribute("aria-invalid") : r.setAttribute("aria-invalid", "true"));
+  }
+  /**
+   * Removes `aria-invalid` from all validatable elements.
+   */
+  _clearAriaInvalid() {
+    const e = this._getAllValidatableElements();
+    for (const r of e)
+      r.removeAttribute("aria-invalid");
+  }
+  _collectValidationErrors() {
+    const e = [], r = this._getAllValidatableElements();
+    for (const o of r)
+      if ("validity" in o && "validationMessage" in o) {
+        const n = o;
+        n.validity.valid || e.push({
+          name: n.name || n.tagName.toLowerCase(),
+          message: n.validationMessage
+        });
+      }
+    return e;
+  }
+  // ─── Render ───
+  render() {
+    const e = this._validationErrors.length > 0 ? m`
+            <div
+              class="hx-form-error-summary"
+              role="alert"
+              aria-live="assertive"
+              aria-atomic="true"
+            >
+              <ul>
+                ${this._validationErrors.map(
+      (r) => m`<li>${r.message || r.name}</li>`
+    )}
+              </ul>
+            </div>
+          ` : f;
+    return this.action ? m`
+        ${e}
+        <form
+          action=${this.action}
+          method=${this.method}
+          enctype=${this.enctype}
+          name=${u(this.name || void 0)}
+          ?novalidate=${this.novalidate}
+        >
+          <slot></slot>
+        </form>
+      ` : m`${e}<slot></slot>`;
+  }
+};
+a([
+  x()
+], i.prototype, "_validationErrors", 2);
+a([
+  h({ type: String })
+], i.prototype, "action", 2);
+a([
+  h({ type: String })
+], i.prototype, "method", 2);
+a([
+  h({ type: Boolean })
+], i.prototype, "novalidate", 2);
+a([
+  h({ type: String })
+], i.prototype, "name", 2);
+a([
+  h({ type: String })
+], i.prototype, "enctype", 2);
+i = a([
+  p("hx-form")
+], i);
+export {
+  i as H
+};
+//# sourceMappingURL=hx-form-BJeLK34m.js.map