@axenstudio/axen-form 0.1.8 → 0.1.10

package/dist/axen-form.css

@@ -0,0 +1,1057 @@
+/* ═══════════════════════════════════════════════
+   axen-form CSS Reset
+   Minimal reset for form elements
+   ═══════════════════════════════════════════════ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Reset form element defaults */
+input,
+textarea,
+select,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+}
+
+/* Remove default styling from number inputs */
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+/* Remove default date/time input icons if using custom components */
+input[type='date']::-webkit-calendar-picker-indicator,
+input[type='time']::-webkit-calendar-picker-indicator,
+input[type='datetime-local']::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+}
+
+/* Ensure fieldset/legend reset */
+fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+/* Remove textarea resize handle (can be overridden) */
+textarea {
+  resize: vertical;
+}
+
+/* Focus visible only — keyboard navigation (A11y) */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+:focus-visible {
+  outline: var(--axen-focus-ring-width, 2px) solid
+    var(--axen-focus-ring-color, rgba(25, 118, 210, 0.5));
+  outline-offset: var(--axen-focus-ring-offset, 2px);
+}
+/* ═══════════════════════════════════════════════
+   axen-form Built-in Theme Presets
+   Applied via data-axen-theme attribute on form
+   ═══════════════════════════════════════════════ */
+
+/* ── Default Theme (Blue) ────────────────────── */
+[data-axen-theme='default'] {
+  --axen-color-primary: #1976d2;
+  --axen-color-primary-hover: #1565c0;
+  --axen-color-primary-light: #e3f2fd;
+  --axen-color-input-bg: #f0f7ff;
+  --axen-color-label: #1565c0;
+}
+
+/* ── Subtle Theme (Gray) ─────────────────────── */
+[data-axen-theme='subtle'] {
+  --axen-color-primary: #546e7a;
+  --axen-color-primary-hover: #37474f;
+  --axen-color-primary-light: #eceff1;
+  --axen-color-input-bg: #f5f5f5;
+  --axen-color-label: #37474f;
+}
+
+/* ── Green Theme ─────────────────────────────── */
+[data-axen-theme='green'] {
+  --axen-color-primary: #2e7d32;
+  --axen-color-primary-hover: #1b5e20;
+  --axen-color-primary-light: #e8f5e9;
+  --axen-color-input-bg: #f1f8e9;
+  --axen-color-label: #1b5e20;
+}
+/* ═══════════════════════════════════════════════
+   axen-form Design Tokens
+   CSS Custom Properties — A11y-aware & Responsive
+   ═══════════════════════════════════════════════ */
+
+:root {
+  /* ── Color Palette ─────────────────────────── */
+  --axen-color-primary: #1976d2;
+  --axen-color-primary-hover: #1565c0;
+  --axen-color-primary-light: #e3f2fd;
+  --axen-color-error: #d32f2f;
+  --axen-color-error-light: #fdecea;
+  --axen-color-success: #2e7d32;
+  --axen-color-warning: #ed6c02;
+  --axen-color-text: #1a1a1a;
+  --axen-color-text-secondary: #666666;
+  --axen-color-text-disabled: #9e9e9e;
+  --axen-color-border: #d0d5dd;
+  --axen-color-border-hover: #888888;
+  --axen-color-border-focus: var(--axen-color-primary);
+  --axen-color-bg: #ffffff;
+  --axen-color-bg-disabled: #f5f5f5;
+  --axen-color-bg-hover: #fafafa;
+  --axen-color-input-bg: #f0f7ff;
+  --axen-color-label: var(--axen-color-text);
+
+  /* ── Typography ────────────────────────────── */
+  --axen-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --axen-font-size-xs: 0.75rem;
+  --axen-font-size-sm: 0.875rem;
+  --axen-font-size-md: 1rem;
+  --axen-font-size-lg: 1.125rem;
+  --axen-font-weight-normal: 400;
+  --axen-font-weight-medium: 500;
+  --axen-font-weight-bold: 600;
+  --axen-line-height: 1.5;
+
+  /* ── Spacing ───────────────────────────────── */
+  --axen-space-xs: 0.25rem;
+  --axen-space-sm: 0.5rem;
+  --axen-space-md: 1rem;
+  --axen-space-lg: 1.5rem;
+  --axen-space-xl: 2rem;
+
+  /* ── Border & Radius ───────────────────────── */
+  --axen-border-width: 1px;
+  --axen-border-radius: 8px;
+  --axen-border-radius-sm: 4px;
+  --axen-border-radius-lg: 10px;
+  --axen-border-radius-pill: 9999px;
+
+  /* ── Focus Ring (A11y: WCAG 2.4.7) ─────────── */
+  --axen-focus-ring-width: 2px;
+  --axen-focus-ring-offset: 2px;
+  --axen-focus-ring-color: rgba(25, 118, 210, 0.5);
+
+  /* ── Field Sizing ──────────────────────────── */
+  --axen-field-height: 2.75rem;
+  --axen-field-min-height: 44px; /* A11y: min 44px touch target */
+  --axen-field-padding-x: 0.75rem;
+  --axen-field-padding-y: 0.5rem;
+  --axen-label-margin-bottom: 0.375rem;
+  --axen-helper-margin-top: 0.25rem;
+
+  /* ── Transitions ───────────────────────────── */
+  --axen-transition-fast: 150ms ease;
+  --axen-transition-normal: 200ms ease;
+
+  /* ── Shadows ───────────────────────────────── */
+  --axen-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --axen-shadow-focus: 0 0 0 var(--axen-focus-ring-width) var(--axen-focus-ring-color);
+
+  /* ── Breakpoints (for reference in JS) ─────── */
+  --axen-bp-sm: 600px;
+  --axen-bp-md: 900px;
+  --axen-bp-lg: 1200px;
+  --axen-bp-xl: 1536px;
+
+  /* ── Z-index layers ────────────────────────── */
+  --axen-z-dropdown: 100;
+  --axen-z-tooltip: 200;
+}
+
+/* ── Dark Mode (respects system) ────────────── */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --axen-color-text: #e0e0e0;
+    --axen-color-text-secondary: #a0a0a0;
+    --axen-color-text-disabled: #666666;
+    --axen-color-border: #555555;
+    --axen-color-border-hover: #888888;
+    --axen-color-bg: #1e1e1e;
+    --axen-color-bg-disabled: #2a2a2a;
+    --axen-color-bg-hover: #2e2e2e;
+    --axen-color-primary-light: #1a3a5c;
+    --axen-color-error-light: #3d1c1c;
+    --axen-focus-ring-color: rgba(66, 165, 245, 0.6);
+  }
+}
+
+/* ── High Contrast Mode (A11y) ──────────────── */
+@media (prefers-contrast: more) {
+  :root {
+    --axen-color-border: #000000;
+    --axen-color-text: #000000;
+    --axen-color-text-secondary: #333333;
+    --axen-border-width: 2px;
+    --axen-focus-ring-width: 3px;
+    --axen-focus-ring-color: rgba(0, 0, 0, 0.8);
+  }
+}
+
+/* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --axen-transition-fast: 0ms;
+    --axen-transition-normal: 0ms;
+  }
+}
+/* ═══════════════════════════════════════════════
+   axen-form Field Base Styles
+   Shared styles for all field components
+   A11y-aware + Responsive
+   ═══════════════════════════════════════════════ */
+
+/* ── Field Wrapper ───────────────────────────── */
+._wrapper_1w6h8_8 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* ── Label ───────────────────────────────────── */
+._label_1w6h8_15 {
+  display: block;
+  font-size: var(--axen-font-size-sm, 0.875rem);
+  font-weight: var(--axen-font-weight-medium, 500);
+  color: var(--axen-color-label, var(--axen-color-text, #1a1a1a));
+  margin-bottom: var(--axen-label-margin-bottom, 0.375rem);
+  line-height: var(--axen-line-height, 1.5);
+  letter-spacing: 0.01em;
+}
+
+._labelRequired_1w6h8_25::after {
+  content: ' *';
+  color: var(--axen-color-error, #d32f2f);
+  font-weight: var(--axen-font-weight-bold, 600);
+}
+
+/* ── Input Base ──────────────────────────────── */
+._input_1w6h8_32 {
+  display: block;
+  width: 100%;
+  height: var(--axen-field-height, 2.75rem);
+  min-height: var(--axen-field-min-height, 44px);
+  padding: var(--axen-field-padding-y, 0.5rem) var(--axen-field-padding-x, 0.75rem);
+  font-family: var(
+    --axen-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif
+  );
+  font-size: var(--axen-font-size-md, 1rem);
+  line-height: var(--axen-line-height, 1.5);
+  color: var(--axen-color-text, #1a1a1a);
+  background-color: var(--axen-color-input-bg, var(--axen-color-bg, #ffffff));
+  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);
+  border-radius: var(--axen-border-radius, 8px);
+  transition:
+    border-color var(--axen-transition-fast, 150ms ease),
+    box-shadow var(--axen-transition-fast, 150ms ease);
+  outline: none;
+}
+
+._input_1w6h8_32::placeholder {
+  color: var(--axen-color-text-disabled, #9e9e9e);
+}
+
+._input_1w6h8_32:hover:not(:disabled):not(:read-only) {
+  border-color: var(--axen-color-border-hover, #888888);
+}
+
+/* Focus ring (keyboard + mouse) */
+._input_1w6h8_32:focus {
+  border-color: var(--axen-color-border-focus, var(--axen-color-primary, #1976d2));
+  box-shadow: var(--axen-shadow-focus, 0 0 0 2px rgba(25, 118, 210, 0.5));
+  outline: none;
+}
+
+._input_1w6h8_32:disabled {
+  background-color: var(--axen-color-bg-disabled, #f5f5f5);
+  color: var(--axen-color-text-disabled, #9e9e9e);
+  cursor: not-allowed;
+}
+
+._input_1w6h8_32:read-only {
+  background-color: var(--axen-color-bg-disabled, #f5f5f5);
+}
+
+/* ── Error State ─────────────────────────────── */
+._inputError_1w6h8_86 {
+  border-color: var(--axen-color-error, #d32f2f);
+}
+
+._inputError_1w6h8_86:focus {
+  border-color: var(--axen-color-error, #d32f2f);
+  box-shadow: 0 0 0 var(--axen-focus-ring-width, 2px) rgba(211, 47, 47, 0.3);
+}
+
+/* ── Helper Text ─────────────────────────────── */
+._helperText_1w6h8_96 {
+  display: block;
+  font-size: var(--axen-font-size-xs, 0.75rem);
+  color: var(--axen-color-text-secondary, #666666);
+  margin-top: var(--axen-helper-margin-top, 0.25rem);
+  line-height: var(--axen-line-height, 1.5);
+}
+
+._helperTextError_1w6h8_104 {
+  color: var(--axen-color-error, #d32f2f);
+}
+
+/* ── Textarea ────────────────────────────────── */
+._textarea_1w6h8_109 {
+  height: auto;
+  min-height: calc(var(--axen-field-min-height, 44px) * 2);
+  resize: vertical;
+  padding-top: var(--axen-field-padding-x, 0.75rem);
+}
+
+/* ── Select ──────────────────────────────────── */
+._select_1w6h8_117 {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2rem;
+  cursor: pointer;
+}
+
+/* ── Input with prefix/suffix ────────────────── */
+._inputGroup_1w6h8_127 {
+  display: flex;
+  align-items: stretch;
+}
+
+/* ── Icon inside input ───────────────────────── */
+._inputIconWrapper_1w6h8_133 {
+  position: relative;
+}
+
+._fieldIcon_1w6h8_137 {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.125rem;
+  height: 1.125rem;
+  color: var(--axen-color-text-secondary, #666666);
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+._inputWithIcon_1w6h8_152 {
+  padding-left: 2.5rem;
+}
+
+._inputPrefix_1w6h8_156,
+._inputSuffix_1w6h8_157 {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--axen-space-sm, 0.5rem);
+  font-size: var(--axen-font-size-sm, 0.875rem);
+  color: var(--axen-color-text-secondary, #666666);
+  background-color: var(--axen-color-bg-hover, #fafafa);
+  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #c4c4c4);
+  white-space: nowrap;
+}
+
+._inputPrefix_1w6h8_156 {
+  border-right: none;
+  border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
+}
+
+._inputSuffix_1w6h8_157 {
+  border-left: none;
+  border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
+}
+
+._inputGroupInput_1w6h8_178 {
+  border-radius: 0;
+}
+
+._inputPrefix_1w6h8_156 + ._inputGroupInput_1w6h8_178 {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+._inputGroupInput_1w6h8_178:has(+ ._inputSuffix_1w6h8_157) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* ── Checkbox/Radio/Switch shared ────────────── */
+._inlineWrapper_1w6h8_193 {
+  display: flex;
+  align-items: center;
+  gap: var(--axen-space-sm, 0.5rem);
+  min-height: var(--axen-field-min-height, 44px);
+  cursor: pointer;
+}
+
+._inlineWrapper_1w6h8_193:has(:disabled) {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+._inlineLabel_1w6h8_206 {
+  font-size: var(--axen-font-size-md, 1rem);
+  color: var(--axen-color-text, #1a1a1a);
+  user-select: none;
+}
+
+/* ── Responsive: mobile touch targets ────────── */
+@media (max-width: 599px) {
+  ._input_1w6h8_32 {
+    font-size: 16px; /* Prevent iOS zoom on focus */
+    min-height: 48px;
+  }
+
+  ._inlineWrapper_1w6h8_193 {
+    min-height: 48px;
+  }
+}
+
+/* ── High Contrast Mode ──────────────────────── */
+@media (prefers-contrast: more) {
+  ._input_1w6h8_32 {
+    border-width: 2px;
+  }
+
+  ._inputError_1w6h8_86 {
+    border-width: 3px;
+  }
+
+  ._helperTextError_1w6h8_104 {
+    font-weight: var(--axen-font-weight-bold, 600);
+  }
+}
+
+/* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
+@media (prefers-reduced-motion: reduce) {
+  ._input_1w6h8_32 {
+    transition: none;
+  }
+}
+._inputWrap_1hzxx_1 {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+._spinner_1hzxx_7 {
+  position: absolute;
+  right: 0.75rem;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--axen-color-border);
+  border-top-color: var(--axen-color-primary);
+  border-radius: 50%;
+  animation: _spin_1hzxx_7 0.6s linear infinite;
+}
+
+@keyframes _spin_1hzxx_7 {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._spinner_1hzxx_7 {
+    animation: none;
+    opacity: 0.6;
+  }
+}
+
+/* ── Dropdown ────────────────────────────────── */
+._dropdown_1hzxx_32 {
+  position: absolute;
+  z-index: var(--axen-z-dropdown);
+  width: 100%;
+  max-height: 240px;
+  margin: 0;
+  padding: var(--axen-space-xs) 0;
+  list-style: none;
+  overflow-y: auto;
+  background: var(--axen-color-bg);
+  border: var(--axen-border-width) solid var(--axen-color-border);
+  border-top: none;
+  border-radius: 0 0 var(--axen-border-radius) var(--axen-border-radius);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+._option_1hzxx_48 {
+  display: flex;
+  align-items: center;
+  padding: var(--axen-space-sm) var(--axen-field-padding-x);
+  font-size: var(--axen-font-size-md);
+  color: var(--axen-color-text);
+  cursor: pointer;
+  min-height: var(--axen-field-min-height);
+  transition: background-color var(--axen-transition-fast);
+}
+
+._option_1hzxx_48:hover {
+  background-color: var(--axen-color-bg-hover);
+}
+
+._optionActive_1hzxx_63 {
+  background-color: var(--axen-color-primary-light);
+}
+
+._optionDisabled_1hzxx_67 {
+  color: var(--axen-color-text-disabled);
+  cursor: not-allowed;
+}
+
+._noResults_1hzxx_72 {
+  padding: var(--axen-space-sm) var(--axen-field-padding-x);
+  font-size: var(--axen-font-size-sm);
+  color: var(--axen-color-text-secondary);
+  border: var(--axen-border-width) solid var(--axen-color-border);
+  border-top: none;
+  border-radius: 0 0 var(--axen-border-radius) var(--axen-border-radius);
+  background: var(--axen-color-bg);
+}
+
+/* ── Chip (used by multi) ────────────────────── */
+._chipWrap_1hzxx_83 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--axen-space-xs);
+  padding: var(--axen-space-xs);
+}
+
+._chip_1hzxx_83 {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--axen-space-xs);
+  padding: 2px 8px;
+  font-size: var(--axen-font-size-xs);
+  color: var(--axen-color-text);
+  background-color: var(--axen-color-primary-light);
+  border-radius: var(--axen-border-radius-pill);
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+._chipRemove_1hzxx_105 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--axen-color-text-secondary);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+._chipRemove_1hzxx_105:hover {
+  background: rgba(0, 0, 0, 0.08);
+  color: var(--axen-color-text);
+}
+
+._chipRemove_1hzxx_105:focus-visible {
+  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
+}
+
+/* ── Ghost text (predict) ────────────────────── */
+._predictWrap_1hzxx_131 {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+._ghostText_1hzxx_137 {
+  position: absolute;
+  left: var(--axen-field-padding-x);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--axen-color-text-disabled);
+  font-family: var(--axen-font-family);
+  font-size: var(--axen-font-size-md);
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+._ghostHidden_1hzxx_150 {
+  visibility: hidden;
+  position: absolute;
+  white-space: pre;
+  font-family: var(--axen-font-family);
+  font-size: var(--axen-font-size-md);
+}
+
+/* ── Mobile adjustments ──────────────────────── */
+@media (max-width: 599px) {
+  ._dropdown_1hzxx_32 {
+    max-height: 200px;
+  }
+
+  ._option_1hzxx_48 {
+    min-height: 48px;
+    padding: var(--axen-space-sm) var(--axen-space-md);
+  }
+}
+._checkboxLabel_1labl_1 {
+  cursor: pointer;
+}
+
+._checkbox_1labl_1 {
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--axen-color-primary);
+  border-radius: var(--axen-border-radius-sm);
+}
+
+._checkbox_1labl_1:focus-visible {
+  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
+  outline-offset: var(--axen-focus-ring-offset);
+}
+
+._checkbox_1labl_1:disabled {
+  cursor: not-allowed;
+}
+
+/* Mobile: larger touch target */
+@media (max-width: 599px) {
+  ._checkbox_1labl_1 {
+    width: 24px;
+    height: 24px;
+  }
+}
+._colorWrap_or7ln_1 {
+  display: flex;
+  align-items: center;
+  gap: var(--axen-space-sm);
+  min-height: var(--axen-field-min-height);
+}
+
+._colorInput_or7ln_8 {
+  width: 44px;
+  height: 44px;
+  padding: 2px;
+  border: var(--axen-border-width) solid var(--axen-color-border);
+  border-radius: var(--axen-border-radius);
+  cursor: pointer;
+  background: none;
+}
+
+._colorInput_or7ln_8:focus-visible {
+  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
+  outline-offset: var(--axen-focus-ring-offset);
+}
+
+._colorInput_or7ln_8:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+._colorValue_or7ln_28 {
+  font-size: var(--axen-font-size-sm);
+  font-family: monospace;
+  color: var(--axen-color-text-secondary);
+  text-transform: uppercase;
+}
+._inputWrap_1nxa7_1 {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+._passwordInput_1nxa7_7 {
+  padding-right: 2.5rem;
+}
+
+._toggle_1nxa7_11 {
+  position: absolute;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--axen-color-text-secondary);
+  font-size: var(--axen-font-size-lg);
+  border-radius: var(--axen-border-radius-sm);
+  transition: color var(--axen-transition-fast);
+}
+
+._toggle_1nxa7_11:hover:not(:disabled) {
+  color: var(--axen-color-text);
+}
+
+._toggle_1nxa7_11:focus-visible {
+  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
+  outline-offset: var(--axen-focus-ring-offset);
+}
+
+._toggle_1nxa7_11:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+._radioGroup_1nz5i_1 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--axen-space-xs);
+}
+
+._radioLabel_1nz5i_7 {
+  cursor: pointer;
+}
+
+._radio_1nz5i_1 {
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--axen-color-primary);
+}
+
+._radio_1nz5i_1:focus-visible {
+  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
+  outline-offset: var(--axen-focus-ring-offset);
+}
+
+._radio_1nz5i_1:disabled {
+  cursor: not-allowed;
+}
+
+/* Mobile: larger touch target */
+@media (max-width: 599px) {
+  ._radio_1nz5i_1 {
+    width: 24px;
+    height: 24px;
+  }
+}
+._sliderWrap_84w8t_1 {
+  display: flex;
+  align-items: center;
+  gap: var(--axen-space-md);
+  min-height: var(--axen-field-min-height);
+}
+
+._slider_84w8t_1 {
+  flex: 1;
+  height: 6px;
+  appearance: none;
+  background: var(--axen-color-border);
+  border-radius: var(--axen-border-radius-pill);
+  outline: none;
+  cursor: pointer;
+  transition: background var(--axen-transition-fast);
+}
+
+._slider_84w8t_1::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--axen-color-primary);
+  border: 2px solid var(--axen-color-bg);
+  box-shadow: var(--axen-shadow-sm);
+  cursor: pointer;
+  transition:
+    background var(--axen-transition-fast),
+    transform var(--axen-transition-fast);
+}
+
+._slider_84w8t_1::-webkit-slider-thumb:hover {
+  background: var(--axen-color-primary-hover);
+  transform: scale(1.15);
+}
+
+._slider_84w8t_1:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--axen-shadow-focus);
+}
+
+._slider_84w8t_1::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--axen-color-primary);
+  border: 2px solid var(--axen-color-bg);
+  box-shadow: var(--axen-shadow-sm);
+  cursor: pointer;
+}
+
+._slider_84w8t_1:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+._output_84w8t_57 {
+  min-width: 2.5em;
+  text-align: center;
+  font-size: var(--axen-font-size-sm);
+  font-weight: var(--axen-font-weight-medium);
+  color: var(--axen-color-text);
+}
+
+/* Touch target for mobile */
+@media (max-width: 599px) {
+  ._slider_84w8t_1::-webkit-slider-thumb {
+    width: 28px;
+    height: 28px;
+  }
+
+  ._slider_84w8t_1::-moz-range-thumb {
+    width: 28px;
+    height: 28px;
+  }
+}
+._switchLabel_1itxk_1 {
+  cursor: pointer;
+}
+
+._switchTrack_1itxk_5 {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 44px;
+  height: 24px;
+  background-color: var(--axen-color-border);
+  border-radius: var(--axen-border-radius-pill);
+  transition: background-color var(--axen-transition-fast);
+  flex-shrink: 0;
+}
+
+._switchInput_1itxk_17 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+._switchInput_1itxk_17:checked + ._switchThumb_1itxk_27 {
+  transform: translateX(20px);
+}
+
+._switchInput_1itxk_17:checked ~ ._switchThumb_1itxk_27 {
+  transform: translateX(20px);
+}
+
+._switchTrack_1itxk_5:has(._switchInput_1itxk_17:checked) {
+  background-color: var(--axen-color-primary);
+}
+
+._switchInput_1itxk_17:focus-visible ~ ._switchThumb_1itxk_27 {
+  box-shadow: var(--axen-shadow-focus);
+}
+
+._switchInput_1itxk_17:disabled {
+  cursor: not-allowed;
+}
+
+._switchTrack_1itxk_5:has(._switchInput_1itxk_17:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+._switchThumb_1itxk_27 {
+  position: absolute;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background-color: var(--axen-color-bg);
+  border-radius: 50%;
+  box-shadow: var(--axen-shadow-sm);
+  transition: transform var(--axen-transition-fast);
+  pointer-events: none;
+}
+
+/* Mobile: larger touch target */
+@media (max-width: 599px) {
+  ._switchTrack_1itxk_5 {
+    width: 52px;
+    height: 28px;
+  }
+
+  ._switchThumb_1itxk_27 {
+    width: 24px;
+    height: 24px;
+  }
+
+  ._switchInput_1itxk_17:checked ~ ._switchThumb_1itxk_27 {
+    transform: translateX(24px);
+  }
+}
+/* ═══════════════════════════════════════════════
+   axen-form Field Group / Section Styles
+   ═══════════════════════════════════════════════ */
+
+._fieldGroup_1864u_5 {
+  display: contents; /* Inherit parent grid flow */
+}
+
+._groupLabel_1864u_9 {
+  grid-column: 1 / -1;
+  font-size: var(--axen-font-size-md, 1rem);
+  font-weight: var(--axen-font-weight-bold, 600);
+  color: var(--axen-color-primary, #1976d2);
+  padding-bottom: var(--axen-space-xs, 0.25rem);
+  border-bottom: 2px solid var(--axen-color-primary-light, #e3f2fd);
+  margin-top: var(--axen-space-md, 1rem);
+  margin-bottom: var(--axen-space-xs, 0.25rem);
+}
+
+._fieldGroup_1864u_5:first-child > ._groupLabel_1864u_9 {
+  margin-top: 0;
+}
+/* ═══════════════════════════════════════════════
+   axen-form Grid Cell — Responsive colSpan
+   Uses CSS custom properties + media queries
+   ═══════════════════════════════════════════════ */
+
+._cell_s3hwz_6 {
+  --_col: var(--col-xs, 12);
+  grid-column: span var(--_col);
+  min-width: 0; /* Prevent grid blowout from long content */
+}
+
+/* sm ≥ 600px */
+@media (min-width: 600px) {
+  ._cell_s3hwz_6 {
+    --_col: var(--col-sm, var(--col-xs, 12));
+  }
+}
+
+/* md ≥ 900px */
+@media (min-width: 900px) {
+  ._cell_s3hwz_6 {
+    --_col: var(--col-md, var(--col-sm, var(--col-xs, 12)));
+  }
+}
+
+/* lg ≥ 1200px */
+@media (min-width: 1200px) {
+  ._cell_s3hwz_6 {
+    --_col: var(--col-lg, var(--col-md, var(--col-sm, var(--col-xs, 12))));
+  }
+}
+
+/* xl ≥ 1536px */
+@media (min-width: 1536px) {
+  ._cell_s3hwz_6 {
+    --_col: var(--col-xl, var(--col-lg, var(--col-md, var(--col-sm, var(--col-xs, 12)))));
+  }
+}
+._box_17jtc_1 {
+  min-width: 0;
+}
+._divider_7khjl_1 {
+  border: none;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+._horizontal_7khjl_7 {
+  width: 100%;
+  height: 1px;
+  background-color: var(--axen-color-border);
+}
+
+._vertical_7khjl_13 {
+  width: 1px;
+  height: auto;
+  align-self: stretch;
+  background-color: var(--axen-color-border);
+}
+
+@media (prefers-contrast: more) {
+  ._horizontal_7khjl_7,
+  ._vertical_7khjl_13 {
+    background-color: var(--axen-color-text);
+  }
+}
+/* ═══════════════════════════════════════════════
+   Grid Layout — Responsive CSS Grid
+   12-column mobile-first system
+   ═══════════════════════════════════════════════ */
+
+._container_1asbx_6 {
+  display: grid;
+  width: 100%;
+}
+
+._item_1asbx_11 {
+  min-width: 0; /* Prevent overflow */
+}
+
+/* ── Responsive Breakpoints ──────────────────── */
+
+/* sm ≥ 600px */
+@media (min-width: 600px) {
+  ._sm_1asbx_19 {
+    grid-column: span var(--axen-grid-sm, 12);
+  }
+}
+
+/* md ≥ 900px */
+@media (min-width: 900px) {
+  ._md_1asbx_26 {
+    grid-column: span var(--axen-grid-md, 12);
+  }
+}
+
+/* lg ≥ 1200px */
+@media (min-width: 1200px) {
+  ._lg_1asbx_33 {
+    grid-column: span var(--axen-grid-lg, 12);
+  }
+}
+
+/* xl ≥ 1536px */
+@media (min-width: 1536px) {
+  ._xl_1asbx_40 {
+    grid-column: span var(--axen-grid-xl, 12);
+  }
+}
+._stack_1m70l_1 {
+  min-width: 0;
+}