srcdev-nuxt-components 8.0.3 → 9.0.1

package/app/assets/styles/setup/03.theming/default/_light.css

@@ -0,0 +1,156 @@
+:where(html) {
+  /* ===========================================
+     COLOR SCALE VARIABLES
+     Base color tokens for the default theme
+     =========================================== */
+  --colour-theme-1: var(--blue-01);
+  --colour-theme-2: var(--blue-02);
+  --colour-theme-3: var(--blue-03);
+  --colour-theme-4: var(--blue-04);
+  --colour-theme-5: var(--blue-05);
+  --colour-theme-6: var(--blue-06);
+  --colour-theme-7: var(--blue-07);
+  --colour-theme-8: var(--blue-08);
+  --colour-theme-9: var(--blue-09);
+  --colour-theme-10: var(--blue-10);
+
+  /* ===========================================
+     GENERIC BODY VARIABLES
+     =========================================== */
+  --page-bg: var(--slate-00);
+  --colour-text-default: var(--slate-09);
+  --colour-text-accent: var(--blue-09);
+  --colour-text-eyebrow: var(--blue-09);
+
+  /* ===========================================
+     GLASS PANEL VARIABLES
+     =========================================== */
+  --glass-panel-bg: rgba(255, 255, 255, 0.55);
+  --glass-panel-border-color: rgba(255, 255, 255, 0.8);
+  --glass-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  --glass-panel-highlight: rgba(255, 255, 255, 0.9);
+
+  /* ===========================================
+     STEPPER LIST VARIABLES
+     =========================================== */
+  --stepper-list-counter-circle-background: transparent;
+  --stepper-list-counter-circle-text: var(--blue-09);
+  --stepper-list-counter-circle-border: var(--blue-09);
+
+  --stepper-list-counter-disc-background: var(--blue-01);
+  --stepper-list-counter-disc-text: var(--blue-09);
+  --stepper-list-counter-disc-border: var(--blue-01);
+
+  --stepper-list-counter-square-background: transparent;
+  --stepper-list-counter-square-text: var(--blue-09);
+  --stepper-list-counter-square-border: var(--blue-09);
+
+  --stepper-list-connector-color: var(--blue-01);
+
+  --stepper-list-icon: var(--blue-09);
+
+  /* ===========================================
+     COLOUR FINDER VARIABLES
+     =========================================== */
+  --colour-finder-primary-colour: var(--blue-03);
+  --colour-finder-border-colour: var(--blue-02);
+
+  --colour-finder-checked-surface-colour: var(--green-03);
+  --colour-finder-checked-stroke-colour: var(--green-09);
+
+  --colour-finder-conflict-surface-colour: var(--sunset-03);
+  --colour-finder-conflict-stroke-colour: var(--sunset-09);
+
+  /* ===========================================
+     TREATMENT CONSULTANT VARIABLES
+     =========================================== */
+  --treatment-consultant-primary-colour: var(--blue-03);
+  --treatment-consultant-border-colour: var(--blue-02);
+
+  --treatment-consultant-checked-surface-colour: var(--green-03);
+  --treatment-consultant-checked-stroke-colour: var(--green-09);
+
+  --treatment-consultant-conflict-surface-colour: var(--sunset-03);
+  --treatment-consultant-conflict-stroke-colour: var(--sunset-09);
+
+  /* ===========================================
+     ANCHOR LINK VARIABLES
+     Styling for anchor links and interactive text
+     =========================================== */
+  --colour-link-default: var(--blue-10);
+  --colour-link-hover: var(--blue-09);
+
+  /* ===========================================
+     FORM INPUT VARIABLES
+     Styling for form inputs and controls
+     =========================================== */
+
+  /* Input surfaces and backgrounds */
+  --theme-input-surface: var(--slate-00);
+  --theme-input-surface-hover: var(--slate-01);
+
+  /* Input borders */
+  --theme-input-border: var(--blue-06);
+  --theme-input-border-hover: var(--blue-05);
+  --theme-input-border-focus: var(--blue-04);
+
+  /* Input outlines and focus */
+  --theme-input-outline: transparent;
+  --theme-input-outline-focus: var(--blue-04);
+  --theme-input-visible-outline: var(--blue-10);
+  --theme-focus-visible-shadow: 0 0 0 2px var(--blue-02);
+
+  /* ===========================================
+     INPUT TEXT VARIABLES
+     =========================================== */
+  --theme-input-placeholder: var(--slate-05);
+  --theme-input-text-color-normal: var(--slate-09);
+
+  /* ===========================================
+     CHECKBOX AND RADIO BUTTON VARIABLES
+     =========================================== */
+  --theme-checkbox-symbol-color: var(--blue-08);
+  --theme-checkbox-symbol-surface: var(--theme-input-surface);
+  --theme-checkbox-decorator-color: var(--blue-09);
+
+  /* ===========================================
+     TOGGLE SWITCH VARIABLES
+     =========================================== */
+  --theme-toggle-symbol-color-default: var(--blue-00);
+  --theme-toggle-symbol-color-checked: var(--blue-08);
+
+  --input-error-margin-block-start: 0.25rem;
+
+  /* ===========================================
+     FORM BUTTON VARIABLES
+     Styling for form buttons and controls
+     =========================================== */
+
+  /* Variant Primary */
+  --theme-button-primary-surface: var(--blue-09);
+  --theme-button-primary-surface-hover: var(--blue-08);
+  --theme-button-primary-surface-active: var(--blue-07);
+  --theme-button-primary-border: var(--blue-09);
+  --theme-button-primary-border-active: var(--blue-09);
+  --theme-button-primary-outline: var(--blue-01);
+  --theme-button-primary-outline-active: var(--blue-07);
+  --theme-button-primary-text: var(--blue-00);
+  --theme-button-primary-text-hover: var(--blue-00);
+
+  /* Variant Secondary */
+  --theme-button-secondary-surface: transparent;
+  --theme-button-secondary-surface-hover: var(--blue-01);
+  --theme-button-secondary-surface-active: var(--blue-01);
+  --theme-button-secondary-border: var(--blue-09);
+  --theme-button-secondary-border-active: var(--blue-09);
+  --theme-button-secondary-outline: var(--blue-09);
+  --theme-button-secondary-outline-active: var(--blue-09);
+  --theme-button-secondary-text: var(--blue-09);
+  --theme-button-secondary-text-hover: var(--blue-09);
+
+  /* Variant Tertiary */
+  --theme-button-tertiary-surface: var(--slate-01);
+  --theme-button-tertiary-text: var(--blue-09);
+  --theme-button-tertiary-border-active: var(--blue-09);
+  --theme-button-tertiary-outline-active: var(--blue-09);
+}

package/app/assets/styles/setup/03.theming/default/index.css

@@ -0,0 +1,2 @@
+@import "./_light";
+@import "./_dark";

package/app/assets/styles/setup/03.theming/error/_dark.css

@@ -0,0 +1,56 @@
+:where(html.dark [data-invalid]),
+:where(html.dark [data-theme="error"]) {
+  /* ===========================================
+     COLOR SCALE VARIABLES
+     Base color tokens for the error theme
+     =========================================== */
+  --colour-theme-1: var(--red-01);
+  --colour-theme-2: var(--red-02);
+  --colour-theme-3: var(--red-03);
+  --colour-theme-4: var(--red-04);
+  --colour-theme-5: var(--red-05);
+  --colour-theme-6: var(--red-06);
+  --colour-theme-7: var(--red-07);
+  --colour-theme-8: var(--red-08);
+  --colour-theme-9: var(--red-09);
+  --colour-theme-10: var(--red-10);
+  --colour-theme-11: var(--red-10);
+  --colour-theme-12: var(--red-10);
+
+  /* ===========================================
+     FORM ERROR DISPLAY
+     =========================================== */
+  --theme-error-outline: var(--red-05);
+
+  /* ===========================================
+     FORM INPUT VARIABLES
+     Styling for form inputs and controls
+     =========================================== */
+  --theme-input-border: var(--red-05);
+  --theme-input-border-focus: var(--red-04);
+
+  /* Input outlines and focus */
+  --theme-input-outline: var(--red-05);
+
+  /* ===========================================
+     FORM BUTTON VARIABLES
+     Styling for form buttons and controls
+     =========================================== */
+
+  /* Variant Primary */
+  --theme-button-primary-border: var(--red-07);
+  --theme-button-primary-border-active: var(--red-07);
+  --theme-button-primary-text: var(--red-00);
+  --theme-button-primary-text-hover: var(--red-00);
+
+  /* Variant Secondary */
+  --theme-button-secondary-surface: var(--red-01);
+  --theme-button-secondary-border-active: var(--red-01);
+  --theme-button-secondary-text: var(--red-09);
+
+  /* Variant Tertiary */
+  --theme-button-tertiary-surface: transparent;
+  --theme-button-tertiary-text: var(--red-01);
+  --theme-button-tertiary-border-active: var(--red-01);
+  --theme-button-tertiary-outline-active: var(--red-09);
+}

package/app/assets/styles/setup/03.theming/error/_light.css

@@ -0,0 +1,74 @@
+:where([data-invalid]),
+:where([data-theme="error"]) {
+  /* ===========================================
+     COLOR SCALE VARIABLES
+     Base color tokens for the error theme
+     =========================================== */
+  --colour-theme-1: var(--red-01);
+  --colour-theme-2: var(--red-02);
+  --colour-theme-3: var(--red-03);
+  --colour-theme-4: var(--red-04);
+  --colour-theme-5: var(--red-05);
+  --colour-theme-6: var(--red-06);
+  --colour-theme-7: var(--red-07);
+  --colour-theme-8: var(--red-08);
+  --colour-theme-9: var(--red-09);
+  --colour-theme-10: var(--red-10);
+  --colour-theme-11: var(--red-10);
+  --colour-theme-12: var(--red-10);
+
+  /* ===========================================
+     FORM ERROR DISPLAY
+     =========================================== */
+  --input-error-color: white;
+  --theme-error-surface: var(--red-06);
+  --theme-error-border: var(--red-06);
+  --theme-error-outline: var(--red-01);
+
+  /* ===========================================
+     FORM INPUT VARIABLES
+     Styling for form inputs and controls
+     =========================================== */
+  --theme-input-border: var(--red-06);
+  --theme-input-border-focus: var(--red-04);
+  --theme-input-border-hover: var(--red-04);
+
+  /* Input outlines and focus */
+  --theme-input-outline: var(--red-01);
+  --theme-input-outline-focus: var(--red-04);
+  --theme-input-visible-outline: var(--red-04);
+  --theme-focus-visible-shadow: 0 0 0 2px var(--red-02);
+
+  /* ===========================================
+     FORM BUTTON VARIABLES
+     Styling for form buttons and controls
+     =========================================== */
+
+  /* Variant Primary */
+  --theme-button-primary-surface: var(--red-09);
+  --theme-button-primary-surface-hover: var(--red-08);
+  --theme-button-primary-surface-active: var(--red-07);
+  --theme-button-primary-border: var(--red-09);
+  --theme-button-primary-border-active: var(--red-09);
+  --theme-button-primary-outline: var(--red-01);
+  --theme-button-primary-outline-active: var(--red-07);
+  --theme-button-primary-text: var(--red-00);
+  --theme-button-primary-text-hover: var(--red-00);
+
+  /* Variant Secondary */
+  --theme-button-secondary-surface: transparent;
+  --theme-button-secondary-surface-hover: var(--red-01);
+  --theme-button-secondary-surface-active: var(--red-01);
+  --theme-button-secondary-border: var(--red-09);
+  --theme-button-secondary-border-active: var(--red-09);
+  --theme-button-secondary-outline: var(--red-09);
+  --theme-button-secondary-outline-active: var(--red-09);
+  --theme-button-secondary-text: var(--red-09);
+  --theme-button-secondary-text-hover: var(--red-09);
+
+  /* Variant Tertiary */
+  --theme-button-tertiary-surface: var(--slate-01);
+  --theme-button-tertiary-text: var(--red-09);
+  --theme-button-tertiary-border-active: var(--red-09);
+  --theme-button-tertiary-outline-active: var(--red-09);
+}

package/app/assets/styles/setup/03.theming/error/index.css

@@ -0,0 +1,2 @@
+@import "./_light";
+@import "./_dark";

package/app/assets/styles/setup/03.theming/index.css

@@ -0,0 +1,4 @@
+@import "./default/";
+@import "./error/";
+@import "./success/";
+@import "./warning/";

package/app/assets/styles/setup/03.theming/success/_dark.css

@@ -0,0 +1,50 @@
+:where(html.dark [data-theme="success"]) {
+  /* ===========================================
+     COLOR SCALE VARIABLES
+     Base color tokens for the success theme
+     =========================================== */
+  --colour-theme-1: var(--green-01);
+  --colour-theme-2: var(--green-02);
+  --colour-theme-3: var(--green-03);
+  --colour-theme-4: var(--green-04);
+  --colour-theme-5: var(--green-05);
+  --colour-theme-6: var(--green-06);
+  --colour-theme-7: var(--green-07);
+  --colour-theme-8: var(--green-08);
+  --colour-theme-9: var(--green-09);
+  --colour-theme-10: var(--green-10);
+  --colour-theme-11: var(--green-10);
+  --colour-theme-12: var(--green-10);
+
+  /* ===========================================
+     FORM INPUT VARIABLES
+     Styling for form inputs and controls
+     =========================================== */
+  --theme-input-border: var(--green-05);
+  --theme-input-border-focus: var(--green-04);
+
+  /* Input outlines and focus */
+  --theme-input-outline: var(--green-05);
+
+  /* ===========================================
+     FORM BUTTON VARIABLES
+     Styling for form buttons and controls
+     =========================================== */
+
+  /* Variant Primary */
+  --theme-button-primary-border: var(--green-07);
+  --theme-button-primary-border-active: var(--green-07);
+  --theme-button-primary-text: var(--green-00);
+  --theme-button-primary-text-hover: var(--green-00);
+
+  /* Variant Secondary */
+  --theme-button-secondary-surface: var(--green-01);
+  --theme-button-secondary-border-active: var(--green-01);
+  --theme-button-secondary-text: var(--green-09);
+
+  /* Variant Tertiary */
+  --theme-button-tertiary-surface: transparent;
+  --theme-button-tertiary-text: var(--green-01);
+  --theme-button-tertiary-border-active: var(--green-01);
+  --theme-button-tertiary-outline-active: var(--green-09);
+}

package/app/assets/styles/setup/03.theming/success/_light.css

@@ -0,0 +1,65 @@
+:where([data-theme="success"]) {
+  /* ===========================================
+     COLOR SCALE VARIABLES
+     Base color tokens for the success theme
+     =========================================== */
+  --colour-theme-1: var(--green-01);
+  --colour-theme-2: var(--green-02);
+  --colour-theme-3: var(--green-03);
+  --colour-theme-4: var(--green-04);
+  --colour-theme-5: var(--green-05);
+  --colour-theme-6: var(--green-06);
+  --colour-theme-7: var(--green-07);
+  --colour-theme-8: var(--green-08);
+  --colour-theme-9: var(--green-09);
+  --colour-theme-10: var(--green-10);
+  --colour-theme-11: var(--green-10);
+  --colour-theme-12: var(--green-10);
+
+  /* ===========================================
+     FORM INPUT VARIABLES
+     Styling for form inputs and controls
+     =========================================== */
+  --theme-input-border: var(--green-06);
+  --theme-input-border-focus: var(--green-04);
+  --theme-input-border-hover: var(--green-04);
+
+  /* Input outlines and focus */
+  --theme-input-outline: var(--green-01);
+  --theme-input-outline-focus: var(--green-04);
+  --theme-input-visible-outline: var(--green-04);
+  --theme-focus-visible-shadow: 0 0 0 2px var(--green-02);
+
+  /* ===========================================
+     FORM BUTTON VARIABLES
+     Styling for form buttons and controls
+     =========================================== */
+
+  /* Variant Primary */
+  --theme-button-primary-surface: var(--green-09);
+  --theme-button-primary-surface-hover: var(--green-08);
+  --theme-button-primary-surface-active: var(--green-07);
+  --theme-button-primary-border: var(--green-09);
+  --theme-button-primary-border-active: var(--green-09);
+  --theme-button-primary-outline: var(--green-01);
+  --theme-button-primary-outline-active: var(--green-07);
+  --theme-button-primary-text: var(--green-00);
+  --theme-button-primary-text-hover: var(--green-00);
+
+  /* Variant Secondary */
+  --theme-button-secondary-surface: transparent;
+  --theme-button-secondary-surface-hover: var(--green-01);
+  --theme-button-secondary-surface-active: var(--green-01);
+  --theme-button-secondary-border: var(--green-09);
+  --theme-button-secondary-border-active: var(--green-09);
+  --theme-button-secondary-outline: var(--green-09);
+  --theme-button-secondary-outline-active: var(--green-09);
+  --theme-button-secondary-text: var(--green-09);
+  --theme-button-secondary-text-hover: var(--green-09);
+
+  /* Variant Tertiary */
+  --theme-button-tertiary-surface: var(--slate-01);
+  --theme-button-tertiary-text: var(--green-09);
+  --theme-button-tertiary-border-active: var(--green-09);
+  --theme-button-tertiary-outline-active: var(--green-09);
+}

package/app/assets/styles/setup/03.theming/success/index.css

@@ -0,0 +1,2 @@
+@import "./_light";
+@import "./_dark";

package/app/assets/styles/setup/03.theming/warning/_dark.css

@@ -0,0 +1,50 @@
+:where(html.dark [data-theme="warning"]) {
+  /* ===========================================
+     COLOR SCALE VARIABLES
+     Base color tokens for the warning theme
+     =========================================== */
+  --colour-theme-1: var(--orange-01);
+  --colour-theme-2: var(--orange-02);
+  --colour-theme-3: var(--orange-03);
+  --colour-theme-4: var(--orange-04);
+  --colour-theme-5: var(--orange-05);
+  --colour-theme-6: var(--orange-06);
+  --colour-theme-7: var(--orange-07);
+  --colour-theme-8: var(--orange-08);
+  --colour-theme-9: var(--orange-09);
+  --colour-theme-10: var(--orange-10);
+  --colour-theme-11: var(--orange-10);
+  --colour-theme-12: var(--orange-10);
+
+  /* ===========================================
+     FORM INPUT VARIABLES
+     Styling for form inputs and controls
+     =========================================== */
+  --theme-input-border: var(--orange-05);
+  --theme-input-border-focus: var(--orange-04);
+
+  /* Input outlines and focus */
+  --theme-input-outline: var(--orange-05);
+
+  /* ===========================================
+     FORM BUTTON VARIABLES
+     Styling for form buttons and controls
+     =========================================== */
+
+  /* Variant Primary */
+  --theme-button-primary-border: var(--sunset-07);
+  --theme-button-primary-border-active: var(--sunset-07);
+  --theme-button-primary-text: white;
+  --theme-button-primary-text-hover: var(--sunset-00);
+
+  /* Variant Secondary */
+  /* --theme-button-secondary-surface: var(--sunset-01); */
+  /* --theme-button-secondary-border-active: var(--sunset-01); */
+  --theme-button-secondary-text: var(--sunset-05);
+
+  /* Variant Tertiary */
+  --theme-button-tertiary-surface: transparent;
+  --theme-button-tertiary-text: var(--sunset-05);
+  --theme-button-tertiary-border-active: var(--sunset-05);
+  --theme-button-tertiary-outline-active: var(--sunset-05);
+}

package/app/assets/styles/setup/03.theming/warning/_light.css

@@ -0,0 +1,64 @@
+:where([data-theme="warning"]) {
+  /* ===========================================
+     COLOR SCALE VARIABLES
+     Base color tokens for the warning theme
+     =========================================== */
+  --colour-theme-1: var(--orange-01);
+  --colour-theme-2: var(--orange-02);
+  --colour-theme-3: var(--orange-03);
+  --colour-theme-4: var(--orange-04);
+  --colour-theme-5: var(--orange-05);
+  --colour-theme-6: var(--orange-06);
+  --colour-theme-7: var(--orange-07);
+  --colour-theme-8: var(--orange-08);
+  --colour-theme-9: var(--orange-09);
+  --colour-theme-10: var(--orange-10);
+  --colour-theme-11: var(--orange-10);
+  --colour-theme-12: var(--orange-10);
+
+  /* ===========================================
+     FORM INPUT VARIABLES
+     Styling for form inputs and controls
+     =========================================== */
+  --theme-input-border: var(--orange-06);
+  --theme-input-border-focus: var(--orange-04);
+  --theme-input-border-hover: var(--orange-04);
+
+  /* Input outlines and focus */
+  --theme-input-outline: var(--orange-01);
+  --theme-input-outline-focus: var(--orange-04);
+  --theme-input-visible-outline: var(--orange-04);
+  --theme-focus-visible-shadow: 0 0 0 2px var(--orange-02);
+
+  /* ===========================================
+     FORM BUTTON VARIABLES
+     Styling for form buttons and controls
+     =========================================== */
+
+  /* Variant Primary */
+  --theme-button-primary-surface: var(--sunset-05);
+  --theme-button-primary-surface-hover: var(--sunset-08);
+  --theme-button-primary-surface-active: var(--sunset-07);
+  --theme-button-primary-border: var(--sunset-05);
+  --theme-button-primary-border-active: var(--sunset-05);
+  --theme-button-primary-outline: var(--sunset-01);
+  --theme-button-primary-text: white;
+  --theme-button-primary-text-hover: var(--sunset-01);
+  --theme-button-primary-outline-active: var(--sunset-05);
+
+  /* Variant Secondary */
+  --theme-button-secondary-surface: transparent;
+  --theme-button-secondary-surface-hover: var(--sunset-02);
+  --theme-button-secondary-surface-active: var(--sunset-03);
+  --theme-button-secondary-border: var(--sunset-05);
+  --theme-button-secondary-border-active: var(--sunset-05);
+  --theme-button-secondary-outline: var(--sunset-05);
+  --theme-button-secondary-text: var(--sunset-05);
+  --theme-button-secondary-text-hover: var(--sunset-05);
+  --theme-button-secondary-outline-active: var(--sunset-05);
+
+  /* Variant Tertiary */
+  --theme-button-tertiary-text: var(--sunset-05);
+  --theme-button-tertiary-border-active: var(--sunset-07);
+  --theme-button-tertiary-outline-active: var(--sunset-04);
+}

package/app/assets/styles/setup/03.theming/warning/index.css

@@ -0,0 +1,2 @@
+@import "./_light";
+@import "./_dark";

package/app/assets/styles/setup/04.elements/forms/00.element-defaults.css

@@ -0,0 +1,21 @@
+:where(html) {
+  input,
+  textarea,
+  select,
+  button {
+    /* all: unset; */
+  }
+
+  input:autofill,
+  input:-internal-autofill-selected,
+  input:-webkit-autofill-strong-password,
+  input:-webkit-autofill-strong-password-viewable,
+  input:-webkit-autofill-and-obscured {
+    background-color: var(--theme-button-surface) !important;
+    background-image: none !important;
+    color: var(--_input-text-core-color) !important;
+    -webkit-box-shadow: 0 0 0rem 1000px var(--theme-button-surface) inset;
+    -webkit-text-fill-color: var(--_input-text-core-color);
+    transition: background-color 5000s ease-in-out 0s;
+  }
+}

package/app/assets/styles/setup/04.elements/forms/01.field-layout-container-level.css

@@ -0,0 +1,14 @@
+:where(html) {
+  /* Field spacing */
+  --field-gap-block: 0.8rem; /* space between stacked fields */
+  --field-gap-inline: 0;
+
+  /* Label spacing */
+  --field-label-gap: 0.4rem; /* label → input */
+
+  /* Description spacing */
+  --field-description-gap: 0.4rem;
+
+  /* Error spacing */
+  --field-error-gap: 0.5rem;
+}

package/app/assets/styles/setup/04.elements/forms/02.typography.css

@@ -0,0 +1,24 @@
+:where(html) {
+  /* Label */
+  --field-label-font-size: var(--step-5); /* 14px */
+  --field-label-font-weight: 500;
+  --field-label-line-height: 1.3;
+
+  /* Input text */
+  --input-font-size: 1.6rem; /* 16px */
+  --input-line-height: 1.4;
+  --theme-input-placeholder-font-size: 1.4rem;
+
+  /* Button text */
+  --button-font-size: 1.6rem; /* 16px */
+  --button-line-height: 1.4;
+  --button-font-weight: 600;
+
+  /* Description */
+  --field-description-font-size: 1.3rem;
+  --field-description-line-height: 1.4;
+
+  /* Error */
+  --field-error-font-size: 1.3rem;
+  --field-error-font-weight: 500;
+}

package/app/assets/styles/setup/04.elements/forms/03.generic-input-geometry.css

@@ -0,0 +1,63 @@
+:where(html) {
+  /* Typography */
+  --input-font-size: var(--step-0);
+
+  /* Padding */
+  --input-padding-block: 0rem; /* 10px */
+  --input-padding-inline: 1.2rem; /* 12px */
+
+  /* With slots */
+  --input-padding-inline-with-icon: 3.2rem;
+
+  /* Border settings */
+  --form-element-border-width: 0.1rem;
+  --form-element-border-bottom-width-underlined: 0.3rem;
+  --form-input-border-radius: 0.5rem;
+  --form-input-border-radius-underlined: 0.25rem;
+
+  /* Outline settings */
+  --form-element-outline-width: 0.1rem;
+  --form-element-outline-width-focus: 0.2rem;
+  --form-element-outline-offset-focus: 0.2rem;
+
+  /* Focus */
+  --input-focus-ring-width: 0.2rem; /* 2px */
+  --input-focus-ring-offset: 0.2rem;
+
+  /* Underlined variant */
+  --input-underline-width: 0.2rem;
+
+  /* Min height */
+  --input-min-height: 4.4rem; /* ~40px tap target */
+  --input-element-line-height: 3.1;
+
+  /* Element specific */
+
+  /* Textarea */
+  --input-textarea-line-height: 1.75;
+  --form-textarea-padding-block: 1.25rem;
+  --form-textarea-padding-inline: 1rem;
+
+  /* Select */
+  --input-select-option-min-height: 3.6rem;
+  --input-select-option-padding-block: 0rem;
+  --input-select-option-padding-inline: 1.75rem;
+
+  /* Range */
+  --input-range-button-size: 2.8rem;
+
+  /* Checkboxes and Radio buttons */
+  --input-checked-element-size: 3rem;
+  --input-checked-icon-size: 2.6rem;
+  --input-checked-icon-gap: 0.2rem;
+  --input-checkbox-decorator-icon-size: 2rem;
+  --input-checkbox-label-padding-block: 0.8rem;
+  --input-checkbox-label-padding-inline: 1.2rem;
+
+  /* Toggle Switch */
+  --input-toggle-wrapper-padding: 0.1rem;
+  --input-toggle-symbol-size: 3rem;
+  --input-toggle-symbol-margin: 0.1rem;
+  --input-toggle-symbol-border-width: 0.1rem;
+  --input-toggle-symbol-outline-width: 0.1rem;
+}

package/app/assets/styles/setup/04.elements/forms/04.slot-icon-system.css

@@ -0,0 +1,14 @@
+:where(html) {
+  /* Slot container */
+  --input-slot-width: 3rem;
+  --input-slot-gap: 0.8rem;
+
+  /* Icon sizing */
+  --input-icon-size: 1.8rem; /* 18px */
+  --input-icon-slot-gap: 0rem;
+
+  /* Icon colours (semantic layer controls actual color) */
+  --input-icon-color: currentColor;
+  --input-icon-color-focus: currentColor;
+  --input-icon-color-error: currentColor;
+}