@axenstudio/axen-form 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -1,8 +1,231 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(`/* ═══════════════════════════════════════════════
+   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 {
+  /* Force light rendering for all native form controls (select, date, etc.) */
+  color-scheme: light;
+
+  /* ── 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: #ffffff;
+  --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 ───────────────────────────────
+   Removed: axen-form ships as light-only by default.
+   Form elements are locked to color-scheme: light above.
+   Consumers needing dark mode can override tokens via
+   a custom [data-axen-theme="dark"] selector.
+   ─────────────────────────────────────────────── */
+
+/* ── 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;
+  }
+}`));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                   */
-;/* empty css                    */
-;/* empty css                    */
+;
+;
+;
 const types = require("./types.cjs");
 const dateUtils = require("./core/dateUtils.cjs");
 const formStore = require("./core/formStore.cjs");
@@ -24,6 +247,7 @@ const CheckboxField = require("./fields/CheckboxField/CheckboxField.cjs");
 const ColorField = require("./fields/ColorField/ColorField.cjs");
 const CurrencyField = require("./fields/CurrencyField/CurrencyField.cjs");
 const DateField = require("./fields/DateField/DateField.cjs");
+const DatePicker = require("./fields/DateField/DatePicker.cjs");
 const DateTimeField = require("./fields/DateTimeField/DateTimeField.cjs");
 const defaultComponentMap = require("./fields/defaultComponentMap.cjs");
 const EmailField = require("./fields/EmailField/EmailField.cjs");
@@ -37,6 +261,7 @@ const SwitchField = require("./fields/SwitchField/SwitchField.cjs");
 const TextareaField = require("./fields/TextareaField/TextareaField.cjs");
 const TextField = require("./fields/TextField/TextField.cjs");
 const TimeField = require("./fields/TimeField/TimeField.cjs");
+const TimePicker = require("./fields/TimeField/TimePicker.cjs");
 const Box = require("./layout/Box/Box.cjs");
 const Divider = require("./layout/Divider/Divider.cjs");
 const Grid = require("./layout/Grid/Grid.cjs");
@@ -83,6 +308,7 @@ exports.CheckboxField = CheckboxField.CheckboxField;
 exports.ColorField = ColorField.ColorField;
 exports.CurrencyField = CurrencyField.CurrencyField;
 exports.DateField = DateField.DateField;
+exports.DatePicker = DatePicker.DatePicker;
 exports.DateTimeField = DateTimeField.DateTimeField;
 exports.defaultComponentMap = defaultComponentMap.defaultComponentMap;
 exports.EmailField = EmailField.EmailField;
@@ -96,6 +322,7 @@ exports.SwitchField = SwitchField.SwitchField;
 exports.TextareaField = TextareaField.TextareaField;
 exports.TextField = TextField.TextField;
 exports.TimeField = TimeField.TimeField;
+exports.TimePicker = TimePicker.TimePicker;
 exports.Box = Box.Box;
 exports.Divider = Divider.Divider;
 exports.Grid = Grid.Grid;

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { CheckboxField } from './fields/CheckboxField/CheckboxField';
 export { ColorField } from './fields/ColorField/ColorField';
 export { CurrencyField } from './fields/CurrencyField/CurrencyField';
 export { DateField } from './fields/DateField/DateField';
+export { DatePicker } from './fields/DateField/DatePicker';
 export { DateTimeField } from './fields/DateTimeField/DateTimeField';
 export { defaultComponentMap } from './fields/defaultComponentMap';
 export { EmailField } from './fields/EmailField/EmailField';
@@ -34,6 +35,7 @@ export { SwitchField } from './fields/SwitchField/SwitchField';
 export { TextareaField } from './fields/TextareaField/TextareaField';
 export { TextField } from './fields/TextField/TextField';
 export { TimeField } from './fields/TimeField/TimeField';
+export { TimePicker } from './fields/TimeField/TimePicker';
 export { Box } from './layout/Box/Box';
 export { Divider } from './layout/Divider/Divider';
 export { Grid } from './layout/Grid/Grid';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,6 +1,229 @@
-/* empty css                 */
-/* empty css                  */
-/* empty css                  */
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(`/* ═══════════════════════════════════════════════
+   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 {
+  /* Force light rendering for all native form controls (select, date, etc.) */
+  color-scheme: light;
+
+  /* ── 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: #ffffff;
+  --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 ───────────────────────────────
+   Removed: axen-form ships as light-only by default.
+   Form elements are locked to color-scheme: light above.
+   Consumers needing dark mode can override tokens via
+   a custom [data-axen-theme="dark"] selector.
+   ─────────────────────────────────────────────── */
+
+/* ── 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;
+  }
+}`));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+
+
+
 import { isFieldGroup } from "./types.js";
 import { formatDateLocale, formatDateTimeLocale, formatTimeLocale, getDefaultLocale, toISODateString, toISODateTimeLocalString, toISOTimeString } from "./core/dateUtils.js";
 import { createFormStore } from "./core/formStore.js";
@@ -22,6 +245,7 @@ import { CheckboxField } from "./fields/CheckboxField/CheckboxField.js";
 import { ColorField } from "./fields/ColorField/ColorField.js";
 import { CurrencyField } from "./fields/CurrencyField/CurrencyField.js";
 import { DateField } from "./fields/DateField/DateField.js";
+import { DatePicker } from "./fields/DateField/DatePicker.js";
 import { DateTimeField } from "./fields/DateTimeField/DateTimeField.js";
 import { defaultComponentMap } from "./fields/defaultComponentMap.js";
 import { EmailField } from "./fields/EmailField/EmailField.js";
@@ -35,6 +259,7 @@ import { SwitchField } from "./fields/SwitchField/SwitchField.js";
 import { TextareaField } from "./fields/TextareaField/TextareaField.js";
 import { TextField } from "./fields/TextField/TextField.js";
 import { TimeField } from "./fields/TimeField/TimeField.js";
+import { TimePicker } from "./fields/TimeField/TimePicker.js";
 import { Box } from "./layout/Box/Box.js";
 import { Divider } from "./layout/Divider/Divider.js";
 import { Grid } from "./layout/Grid/Grid.js";
@@ -56,6 +281,7 @@ export {
   ColorField,
   CurrencyField,
   DateField,
+  DatePicker,
   DateTimeField,
   Divider,
   EmailField,
@@ -73,6 +299,7 @@ export {
   TextField,
   TextareaField,
   TimeField,
+  TimePicker,
   ariaProps,
   calculateCursorPosition,
   createFormStore,

package/dist/layout/Box/Box.module.css.cjs

@@ -1,3 +1,15 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._box_17jtc_1 {\n  min-width: 0;\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const box = "_box_17jtc_1";

package/dist/layout/Box/Box.module.css.js

@@ -1,3 +1,15 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._box_17jtc_1 {\n  min-width: 0;\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 const box = "_box_17jtc_1";
 const styles = {
   box

package/dist/layout/Divider/Divider.module.css.cjs

@@ -1,3 +1,15 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._divider_7khjl_1 {\n  border: none;\n  margin: 0;\n  flex-shrink: 0;\n}\n\n._horizontal_7khjl_7 {\n  width: 100%;\n  height: 1px;\n  background-color: var(--axen-color-border);\n}\n\n._vertical_7khjl_13 {\n  width: 1px;\n  height: auto;\n  align-self: stretch;\n  background-color: var(--axen-color-border);\n}\n\n@media (prefers-contrast: more) {\n  ._horizontal_7khjl_7,\n  ._vertical_7khjl_13 {\n    background-color: var(--axen-color-text);\n  }\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const divider = "_divider_7khjl_1";

package/dist/layout/Divider/Divider.module.css.js

@@ -1,3 +1,15 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._divider_7khjl_1 {\n  border: none;\n  margin: 0;\n  flex-shrink: 0;\n}\n\n._horizontal_7khjl_7 {\n  width: 100%;\n  height: 1px;\n  background-color: var(--axen-color-border);\n}\n\n._vertical_7khjl_13 {\n  width: 1px;\n  height: auto;\n  align-self: stretch;\n  background-color: var(--axen-color-border);\n}\n\n@media (prefers-contrast: more) {\n  ._horizontal_7khjl_7,\n  ._vertical_7khjl_13 {\n    background-color: var(--axen-color-text);\n  }\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 const divider = "_divider_7khjl_1";
 const horizontal = "_horizontal_7khjl_7";
 const vertical = "_vertical_7khjl_13";

package/dist/layout/Grid/Grid.module.css.cjs

@@ -1,3 +1,15 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("/* ═══════════════════════════════════════════════\n   Grid Layout — Responsive CSS Grid\n   12-column mobile-first system\n   ═══════════════════════════════════════════════ */\n\n._container_1asbx_6 {\n  display: grid;\n  width: 100%;\n}\n\n._item_1asbx_11 {\n  min-width: 0; /* Prevent overflow */\n}\n\n/* ── Responsive Breakpoints ──────────────────── */\n\n/* sm ≥ 600px */\n@media (min-width: 600px) {\n  ._sm_1asbx_19 {\n    grid-column: span var(--axen-grid-sm, 12);\n  }\n}\n\n/* md ≥ 900px */\n@media (min-width: 900px) {\n  ._md_1asbx_26 {\n    grid-column: span var(--axen-grid-md, 12);\n  }\n}\n\n/* lg ≥ 1200px */\n@media (min-width: 1200px) {\n  ._lg_1asbx_33 {\n    grid-column: span var(--axen-grid-lg, 12);\n  }\n}\n\n/* xl ≥ 1536px */\n@media (min-width: 1536px) {\n  ._xl_1asbx_40 {\n    grid-column: span var(--axen-grid-xl, 12);\n  }\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const container = "_container_1asbx_6";

package/dist/layout/Grid/Grid.module.css.js

@@ -1,3 +1,15 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("/* ═══════════════════════════════════════════════\n   Grid Layout — Responsive CSS Grid\n   12-column mobile-first system\n   ═══════════════════════════════════════════════ */\n\n._container_1asbx_6 {\n  display: grid;\n  width: 100%;\n}\n\n._item_1asbx_11 {\n  min-width: 0; /* Prevent overflow */\n}\n\n/* ── Responsive Breakpoints ──────────────────── */\n\n/* sm ≥ 600px */\n@media (min-width: 600px) {\n  ._sm_1asbx_19 {\n    grid-column: span var(--axen-grid-sm, 12);\n  }\n}\n\n/* md ≥ 900px */\n@media (min-width: 900px) {\n  ._md_1asbx_26 {\n    grid-column: span var(--axen-grid-md, 12);\n  }\n}\n\n/* lg ≥ 1200px */\n@media (min-width: 1200px) {\n  ._lg_1asbx_33 {\n    grid-column: span var(--axen-grid-lg, 12);\n  }\n}\n\n/* xl ≥ 1536px */\n@media (min-width: 1536px) {\n  ._xl_1asbx_40 {\n    grid-column: span var(--axen-grid-xl, 12);\n  }\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 const container = "_container_1asbx_6";
 const item = "_item_1asbx_11";
 const sm = "_sm_1asbx_19";

package/dist/layout/Stack/Stack.module.css.cjs

@@ -1,3 +1,15 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._stack_1m70l_1 {\n  min-width: 0;\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const stack = "_stack_1m70l_1";