@axenstudio/axen-form 0.1.17 → 0.1.18

package/dist/fields/fieldBase.module.css.cjs

@@ -10,14 +10,36 @@
    ═══════════════════════════════════════════════ */
 
 /* ── Field Wrapper ───────────────────────────── */
-._wrapper_1sk2v_8 {
+:where(._wrapper_18hu4_8),
+:where(._wrapper_18hu4_8) *,
+:where(._wrapper_18hu4_8) *::before,
+:where(._wrapper_18hu4_8) *::after {
+  box-sizing: border-box;
+}
+
+:where(._wrapper_18hu4_8) {
+  color-scheme: light;
+}
+
+:where(._wrapper_18hu4_8) input,
+:where(._wrapper_18hu4_8) textarea,
+:where(._wrapper_18hu4_8) select,
+:where(._wrapper_18hu4_8) button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+}
+
+._wrapper_18hu4_8 {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
 /* ── Label ───────────────────────────────────── */
-._label_1sk2v_15 {
+._label_18hu4_37 {
   display: block;
   font-size: var(--axen-font-size-sm, 0.875rem);
   font-weight: var(--axen-font-weight-medium, 500);
@@ -27,14 +49,14 @@
   letter-spacing: 0.01em;
 }
 
-._labelRequired_1sk2v_25::after {
+._labelRequired_18hu4_47::after {
   content: ' *';
   color: var(--axen-color-error, #d32f2f);
   font-weight: var(--axen-font-weight-bold, 600);
 }
 
 /* ── Input Base ──────────────────────────────── */
-._input_1sk2v_32 {
+._input_18hu4_54 {
   display: block;
   width: 100%;
   height: var(--axen-field-height, 2.75rem);
@@ -62,22 +84,22 @@
   outline: none;
 }
 
-._input_1sk2v_32::placeholder {
+._input_18hu4_54::placeholder {
   color: var(--axen-color-text-disabled, #9e9e9e);
 }
 
-._input_1sk2v_32:hover:not(:disabled):not(:read-only) {
+._input_18hu4_54:hover:not(:disabled):not(:read-only) {
   border-color: var(--axen-color-border-hover, #888888);
 }
 
 /* Focus ring (keyboard + mouse) */
-._input_1sk2v_32:focus {
+._input_18hu4_54: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_1sk2v_32:disabled {
+._input_18hu4_54:disabled {
   background-color: var(--axen-color-bg-disabled, #f5f5f5);
   color: var(--axen-color-text-disabled, #9e9e9e);
   cursor: not-allowed;
@@ -86,35 +108,35 @@
 /* Scope :read-only to actual text inputs only.
    <select> and <div> match :read-only by default in modern browsers,
    which would incorrectly apply the disabled-looking background. */
-input._input_1sk2v_32:read-only,
-textarea._input_1sk2v_32:read-only {
+input._input_18hu4_54:read-only,
+textarea._input_18hu4_54:read-only {
   background-color: var(--axen-color-bg-disabled, #f5f5f5);
 }
 
 /* Hide native browser picker icons for date/time/datetime inputs.
    We provide our own custom pickers via DatePicker / TimePicker components,
    so the native chromium dark-themed popups must not appear. */
-._input_1sk2v_32::-webkit-calendar-picker-indicator {
+._input_18hu4_54::-webkit-calendar-picker-indicator {
   display: none;
   -webkit-appearance: none;
 }
 
-._input_1sk2v_32::-webkit-date-and-time-value {
+._input_18hu4_54::-webkit-date-and-time-value {
   text-align: left;
 }
 
 /* ── Error State ─────────────────────────────── */
-._inputError_1sk2v_102 {
+._inputError_18hu4_124 {
   border-color: var(--axen-color-error, #d32f2f);
 }
 
-._inputError_1sk2v_102:focus {
+._inputError_18hu4_124: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_1sk2v_112 {
+._helperText_18hu4_134 {
   display: block;
   font-size: var(--axen-font-size-xs, 0.75rem);
   color: var(--axen-color-text-secondary, #666666);
@@ -122,12 +144,12 @@ textarea._input_1sk2v_32:read-only {
   line-height: var(--axen-line-height, 1.5);
 }
 
-._helperTextError_1sk2v_120 {
+._helperTextError_18hu4_142 {
   color: var(--axen-color-error, #d32f2f);
 }
 
 /* ── Textarea ────────────────────────────────── */
-._textarea_1sk2v_125 {
+._textarea_18hu4_147 {
   height: auto;
   min-height: calc(var(--axen-field-min-height, 44px) * 2);
   resize: vertical;
@@ -135,7 +157,7 @@ textarea._input_1sk2v_32:read-only {
 }
 
 /* ── Select ──────────────────────────────────── */
-._select_1sk2v_133 {
+._select_18hu4_155 {
   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;
@@ -144,11 +166,11 @@ textarea._input_1sk2v_32:read-only {
   cursor: pointer;
 }
 
-._selectPlaceholder_1sk2v_142 {
+._selectPlaceholder_18hu4_164 {
   color: var(--axen-color-text-disabled, #9e9e9e);
 }
 
-._inputPlaceholder_1sk2v_146 {
+._inputPlaceholder_18hu4_168 {
   color: var(--axen-color-text-disabled, #9e9e9e);
 }
 
@@ -156,17 +178,17 @@ textarea._input_1sk2v_32:read-only {
    See tokens.css for color-scheme: light declaration. */
 
 /* ── Input with prefix/suffix ────────────────── */
-._inputGroup_1sk2v_154 {
+._inputGroup_18hu4_176 {
   display: flex;
   align-items: stretch;
 }
 
 /* ── Icon inside input ───────────────────────── */
-._inputIconWrapper_1sk2v_160 {
+._inputIconWrapper_18hu4_182 {
   position: relative;
 }
 
-._fieldIcon_1sk2v_164 {
+._fieldIcon_18hu4_186 {
   position: absolute;
   left: 0.75rem;
   top: 50%;
@@ -182,7 +204,7 @@ textarea._input_1sk2v_32:read-only {
 }
 
 /* Clickable variant for icons that open pickers */
-._fieldIconClickable_1sk2v_180 {
+._fieldIconClickable_18hu4_202 {
   position: absolute;
   left: 0.75rem;
   top: 50%;
@@ -201,18 +223,18 @@ textarea._input_1sk2v_32:read-only {
   margin: 0;
 }
 
-._fieldIconClickable_1sk2v_180:hover {
+._fieldIconClickable_18hu4_202:hover {
   color: var(--axen-color-primary, #1976d2);
 }
 
-._fieldIconClickable_1sk2v_180:focus-visible {
+._fieldIconClickable_18hu4_202:focus-visible {
   outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
   outline-offset: 2px;
   border-radius: var(--axen-border-radius-sm, 4px);
 }
 
 /* Right-side picker trigger button inside inputIconWrapper */
-._pickerTrigger_1sk2v_210 {
+._pickerTrigger_18hu4_232 {
   position: absolute;
   right: 0.5rem;
   top: 50%;
@@ -231,27 +253,27 @@ textarea._input_1sk2v_32:read-only {
   z-index: 1;
 }
 
-._pickerTrigger_1sk2v_210:hover {
+._pickerTrigger_18hu4_232:hover {
   color: var(--axen-color-primary, #1976d2);
   background-color: var(--axen-color-bg-hover, #fafafa);
 }
 
-._pickerTrigger_1sk2v_210:focus-visible {
+._pickerTrigger_18hu4_232:focus-visible {
   outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
   outline-offset: 2px;
 }
 
 /* Input with right-side picker trigger needs extra right padding */
-._inputWithPicker_1sk2v_240 {
+._inputWithPicker_18hu4_262 {
   padding-right: 2.25rem;
 }
 
-._inputWithIcon_1sk2v_244 {
+._inputWithIcon_18hu4_266 {
   padding-left: 2.5rem;
 }
 
-._inputPrefix_1sk2v_248,
-._inputSuffix_1sk2v_249 {
+._inputPrefix_18hu4_270,
+._inputSuffix_18hu4_271 {
   display: flex;
   align-items: center;
   padding: 0 var(--axen-space-sm, 0.5rem);
@@ -262,32 +284,32 @@ textarea._input_1sk2v_32:read-only {
   white-space: nowrap;
 }
 
-._inputPrefix_1sk2v_248 {
+._inputPrefix_18hu4_270 {
   border-right: none;
   border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
 }
 
-._inputSuffix_1sk2v_249 {
+._inputSuffix_18hu4_271 {
   border-left: none;
   border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
 }
 
-._inputGroupInput_1sk2v_270 {
+._inputGroupInput_18hu4_292 {
   border-radius: 0;
 }
 
-._inputPrefix_1sk2v_248 + ._inputGroupInput_1sk2v_270 {
+._inputPrefix_18hu4_270 + ._inputGroupInput_18hu4_292 {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-._inputGroupInput_1sk2v_270:has(+ ._inputSuffix_1sk2v_249) {
+._inputGroupInput_18hu4_292:has(+ ._inputSuffix_18hu4_271) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 /* ── Checkbox/Radio/Switch shared ────────────── */
-._inlineWrapper_1sk2v_285 {
+._inlineWrapper_18hu4_307 {
   display: flex;
   align-items: center;
   gap: var(--axen-space-sm, 0.5rem);
@@ -295,12 +317,12 @@ textarea._input_1sk2v_32:read-only {
   cursor: pointer;
 }
 
-._inlineWrapper_1sk2v_285:has(:disabled) {
+._inlineWrapper_18hu4_307:has(:disabled) {
   cursor: not-allowed;
   opacity: 0.6;
 }
 
-._inlineLabel_1sk2v_298 {
+._inlineLabel_18hu4_320 {
   font-size: var(--axen-font-size-md, 1rem);
   color: var(--axen-color-text, #1a1a1a);
   user-select: none;
@@ -308,34 +330,34 @@ textarea._input_1sk2v_32:read-only {
 
 /* ── Responsive: mobile touch targets ────────── */
 @media (max-width: 599px) {
-  ._input_1sk2v_32 {
+  ._input_18hu4_54 {
     font-size: 16px; /* Prevent iOS zoom on focus */
     min-height: 48px;
   }
 
-  ._inlineWrapper_1sk2v_285 {
+  ._inlineWrapper_18hu4_307 {
     min-height: 48px;
   }
 }
 
 /* ── High Contrast Mode ──────────────────────── */
 @media (prefers-contrast: more) {
-  ._input_1sk2v_32 {
+  ._input_18hu4_54 {
     border-width: 2px;
   }
 
-  ._inputError_1sk2v_102 {
+  ._inputError_18hu4_124 {
     border-width: 3px;
   }
 
-  ._helperTextError_1sk2v_120 {
+  ._helperTextError_18hu4_142 {
     font-weight: var(--axen-font-weight-bold, 600);
   }
 }
 
 /* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
 @media (prefers-reduced-motion: reduce) {
-  ._input_1sk2v_32 {
+  ._input_18hu4_54 {
     transition: none;
   }
 }`));
@@ -347,29 +369,29 @@ textarea._input_1sk2v_32:read-only {
 })();
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_1sk2v_8";
-const label = "_label_1sk2v_15";
-const labelRequired = "_labelRequired_1sk2v_25";
-const input = "_input_1sk2v_32";
-const inputError = "_inputError_1sk2v_102";
-const helperText = "_helperText_1sk2v_112";
-const helperTextError = "_helperTextError_1sk2v_120";
-const textarea = "_textarea_1sk2v_125";
-const select = "_select_1sk2v_133";
-const selectPlaceholder = "_selectPlaceholder_1sk2v_142";
-const inputPlaceholder = "_inputPlaceholder_1sk2v_146";
-const inputGroup = "_inputGroup_1sk2v_154";
-const inputIconWrapper = "_inputIconWrapper_1sk2v_160";
-const fieldIcon = "_fieldIcon_1sk2v_164";
-const fieldIconClickable = "_fieldIconClickable_1sk2v_180";
-const pickerTrigger = "_pickerTrigger_1sk2v_210";
-const inputWithPicker = "_inputWithPicker_1sk2v_240";
-const inputWithIcon = "_inputWithIcon_1sk2v_244";
-const inputPrefix = "_inputPrefix_1sk2v_248";
-const inputSuffix = "_inputSuffix_1sk2v_249";
-const inputGroupInput = "_inputGroupInput_1sk2v_270";
-const inlineWrapper = "_inlineWrapper_1sk2v_285";
-const inlineLabel = "_inlineLabel_1sk2v_298";
+const wrapper = "_wrapper_18hu4_8";
+const label = "_label_18hu4_37";
+const labelRequired = "_labelRequired_18hu4_47";
+const input = "_input_18hu4_54";
+const inputError = "_inputError_18hu4_124";
+const helperText = "_helperText_18hu4_134";
+const helperTextError = "_helperTextError_18hu4_142";
+const textarea = "_textarea_18hu4_147";
+const select = "_select_18hu4_155";
+const selectPlaceholder = "_selectPlaceholder_18hu4_164";
+const inputPlaceholder = "_inputPlaceholder_18hu4_168";
+const inputGroup = "_inputGroup_18hu4_176";
+const inputIconWrapper = "_inputIconWrapper_18hu4_182";
+const fieldIcon = "_fieldIcon_18hu4_186";
+const fieldIconClickable = "_fieldIconClickable_18hu4_202";
+const pickerTrigger = "_pickerTrigger_18hu4_232";
+const inputWithPicker = "_inputWithPicker_18hu4_262";
+const inputWithIcon = "_inputWithIcon_18hu4_266";
+const inputPrefix = "_inputPrefix_18hu4_270";
+const inputSuffix = "_inputSuffix_18hu4_271";
+const inputGroupInput = "_inputGroupInput_18hu4_292";
+const inlineWrapper = "_inlineWrapper_18hu4_307";
+const inlineLabel = "_inlineLabel_18hu4_320";
 const styles = {
   wrapper,
   label,