@semanticus/semanticus-css 0.9.0 → 1.1.0

package/src/semantics/elements/_type-search.css

@@ -1,18 +1,14 @@
-/**
- * Input type search
- *
- */
 input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+  padding-inline-start: calc(var(--input-spacing-horizontal) + 1.75rem);
   background-image: var(--icon-search);
-  background-position: left calc(var(--form-element-spacing-horizontal) + 0.125rem) center;
+  background-position: left calc(var(--input-spacing-horizontal) + 0.125rem) center;
   background-size: 1rem auto;
   background-repeat: no-repeat;
 
   &[aria-invalid] {
-    padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+    padding-inline-start: calc(var(--input-spacing-horizontal) + 1.75rem);
     /* Using calc with var to workaround LightningCSS minification bug with 3-value syntax */
-    background-position: left calc(var(--form-element-spacing-horizontal) * 0 + 1.125rem) center, right calc(var(--form-element-spacing-horizontal) * 0 + 0.75rem) center;
+    background-position: left calc(var(--input-spacing-horizontal) * 0 + 1.125rem) center, right calc(var(--input-spacing-horizontal) * 0 + 0.75rem) center;
   }
 
   &[aria-invalid=false] {
@@ -25,10 +21,10 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
 }
 
 [dir=rtl] input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-  background-position: right calc(var(--form-element-spacing-horizontal) * 0 + 1.125rem) center;
+  background-position: right calc(var(--input-spacing-horizontal) * 0 + 1.125rem) center;
 
   &[aria-invalid] {
     /* Using calc with var to workaround LightningCSS minification bug with 3-value syntax */
-    background-position: right calc(var(--form-element-spacing-horizontal) * 0 + 1.125rem) center, left calc(var(--form-element-spacing-horizontal) * 0 + 0.75rem) center;
+    background-position: right calc(var(--input-spacing-horizontal) * 0 + 1.125rem) center, left calc(var(--input-spacing-horizontal) * 0 + 0.75rem) center;
   }
 }

package/src/semantics/index.css

@@ -3,8 +3,8 @@
  *
  * Semantic-first HTML styling (no variants or utility classes)
  *
- * Adapted from Pico CSS (https://picocss.com)
- * Original work: Copyright (c) 2019-2024 Pico CSS
+ * Original works: see https://github.com/semanticus/semanticus-css/blob/main/NOTICE for copyright and license details
+ *
  * Modifications: Copyright (c) 2026 Joao Goncalves
  * Licensed under MIT (https://github.com/semanticus/semanticus-css/blob/main/LICENSE)
  */
@@ -12,8 +12,5 @@
 /* Variables */
 @import '../variables/_all.css';
 
-/* Normalize */
-@import '../_normalize.css';
-
 /* Semantic Components */
 @import "./modules.css";

package/src/semantics/modules.css

@@ -1,14 +1,9 @@
-/**
- * Semanticus CSS Semantics Modules
- * Just the semantic component styles (no variables, no normalize)
- * Used by the full version which imports variables/normalize separately
- */
-@import "./_misc.css";
-
 @import "./attributes/_aria-busy.css";
+@import "./attributes/_aria-disabled.css";
 @import "./attributes/_hidden.css";
 @import "./attributes/_popover.css";
 @import "./attributes/_role-group-search.css";
+@import "./attributes/_role-status-alert.css";
 @import "./attributes/_role-toolbar.css";
 @import "./attributes/_role-tooltip.css";
 
@@ -41,6 +36,7 @@
 @import "./elements/_p.css";
 @import "./elements/_progress.css";
 @import "./elements/_section.css";
+@import "./elements/_small.css";
 @import "./elements/_strong.css";
 @import "./elements/_sub.css";
 @import "./elements/_sup.css";

package/src/sizes/pico.css

@@ -16,31 +16,28 @@
   --text-underline-offset: 0.1rem;
 
   /* Borders & Effects – global defaults for border-radius, border-width, outline, and transition */
-  --border-radius: 0.25rem;
-  --border-width: 0.0625rem; /* 1px – base border width used by forms, tables, etc. */
-  --outline-width: 0.125rem; /* 2px – focus-ring width */
+  --radius: 0.25rem;
+  --border-size: 0.0625rem; /* 1px – base border width used by forms, tables, etc. */
+  --outline-size: 0.125rem; /* 2px – focus-ring width */
   --transition: 0.2s ease-in-out; /* Default transition timing for interactive state changes */
 
   /* Spacing – shared base unit used for padding, margins, and gaps throughout the layout */
   --base-spacing: 1rem;
-  --responsive-multiplier: 1;
-  --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+  --spacing: var(--base-spacing);
   --typography-spacing-vertical: 1rem; /* Vertical margin below typographic elements (p, lists, etc.) */
-  --grid-column-gap: var(--spacing); /* Column gap in CSS Grid layouts */
-  --grid-row-gap: var(--spacing); /* Row gap in CSS Grid layouts */
-  --form-element-spacing-vertical: 0.75rem; /* Vertical padding inside form inputs, selects, and textareas */
-  --form-element-spacing-horizontal: 1rem; /* Horizontal padding inside form inputs, selects, and textareas */
+  --input-spacing-vertical: 0.75rem; /* Vertical padding inside form inputs, selects, and textareas */
+  --input-spacing-horizontal: 1rem; /* Horizontal padding inside form inputs, selects, and textareas */
 
   /* Shadows – used by [role="group"] and [role="search"] button/input combos */
   --group-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Default (no shadow) */
-  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-primary-focus); /* Focus ring when a button inside the group is focused */
-  --group-shadow-focus-with-input: 0 0 0 0.0625rem var(--form-border-color); /* Focus ring when an input inside the group is focused */
+  --group-shadow-focus-button: 0 0 0 var(--outline-size) var(--color-primary-focus-ring); /* Focus ring when a button inside the group is focused */
+  --group-shadow-focus-input: 0 0 0 0.0625rem var(--input-border); /* Focus ring when an input inside the group is focused */
 
   /* Navigation – spacing and breadcrumb configuration */
-  --nav-link-spacing: calc(var(--spacing) * 0.5); /* padding inside nav links */
+  --nav-link-gap: calc(var(--spacing) * 0.5); /* padding inside nav links */
   --nav-breadcrumb-divider: ">"; /* Character displayed between breadcrumb items */
 
-  --sidebar-width: 25%; /* Sidebar width */
+  --sidebar-size: 25%; /* Sidebar width */
 }
 
 /* Responsive Font Sizes – progressively increase root font-size at wider viewports */
@@ -48,10 +45,8 @@
   :root,
   :host {
     --font-size: 106.25%;
-    --sidebar-width: max(25%, 150px);
-    --responsive-multiplier: 1.25;
-    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
-    --nav-link-spacing: calc(var(--spacing) * 0.5);
+    --sidebar-size: max(25%, 150px);
+    --spacing: calc(var(--base-spacing) * 1.25);
   }
 }
 
@@ -59,10 +54,8 @@
   :root,
   :host {
     --font-size: 112.5%;
-    --sidebar-width: max(22%, 180px);
-    --responsive-multiplier: 1.5;
-    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
-    --nav-link-spacing: calc(var(--spacing) * 0.5);
+    --sidebar-size: max(22%, 180px);
+    --spacing: calc(var(--base-spacing) * 1.5);
   }
 }
 
@@ -70,10 +63,8 @@
   :root,
   :host {
     --font-size: 118.75%;
-    --sidebar-width: max(20%, 200px);
-    --responsive-multiplier: 1.75;
-    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
-    --nav-link-spacing: calc(var(--spacing) * 0.5);
+    --sidebar-size: max(20%, 200px);
+    --spacing: calc(var(--base-spacing) * 1.75);
   }
 }
 
@@ -81,10 +72,8 @@
   :root,
   :host {
     --font-size: 125%;
-    --sidebar-width: max(18%, 220px);
-    --responsive-multiplier: 2;
-    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
-    --nav-link-spacing: calc(var(--spacing) * 0.5);
+    --sidebar-size: max(18%, 220px);
+    --spacing: calc(var(--base-spacing) * 2);
   }
 }
 
@@ -92,9 +81,7 @@
   :root,
   :host {
     --font-size: 131.25%;
-    --sidebar-width: clamp(240px, 16%, 300px);
-    --responsive-multiplier: 2.25;
-    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
-    --nav-link-spacing: calc(var(--spacing) * 0.5);
+    --sidebar-size: clamp(240px, 16%, 300px);
+    --spacing: calc(var(--base-spacing) * 2.25);
   }
 }

package/src/utilities/_grid.css

@@ -0,0 +1,306 @@
+/* ======================================================================
+   Responsive 12-Column Grid
+   -----------------------------------------------------------------------
+   Implemented with CSS Flexbox and logical properties.
+   Mobile-first: all columns default to full width; size modifiers
+   override at their breakpoint. Gutter controlled via --grid-gutter-x.
+
+   Breakpoints (inherit from src/variables/_breakpoints.css):
+     (default) — all widths (no media query)
+     sm  — min-width: 576px
+     md  — min-width: 768px
+     lg  — min-width: 1024px
+
+   Alignment, ordering, and reversing use existing flexbox utilities:
+     .justify-content-*           horizontal alignment on .row
+     .align-items-*               vertical alignment on .row
+     .order-first / .order-last   column ordering
+     .flex-row-reverse            reverse column order on .row
+   ====================================================================== */
+
+/* --- Row -------------------------------------------------------------- */
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-inline: calc(var(--grid-gutter-x) / -2);
+  row-gap: var(--grid-gutter-y);
+}
+
+/* --- Column base ------------------------------------------------------ */
+/*
+ * All col-* elements default to full width (mobile-first stacking).
+ * Responsive size classes and explicit col-N classes override this.
+ */
+
+[class*="col-"],
+.col {
+  box-sizing: border-box;
+  flex: 0 0 100%;
+  max-width: 100%;
+  min-width: 0;
+  padding-inline: calc(var(--grid-gutter-x) / 2);
+}
+
+/* ======================================================================
+   Default — all screen sizes (no media query)
+   ====================================================================== */
+
+/* Auto-width: equal share of remaining row space */
+.col {
+  flex: 1 1 0;
+}
+
+/* Fixed-width columns 1–12 */
+.col-1  { flex: 0 0 calc( 1 / 12 * 100%); max-width: calc( 1 / 12 * 100%); }
+.col-2  { flex: 0 0 calc( 2 / 12 * 100%); max-width: calc( 2 / 12 * 100%); }
+.col-3  { flex: 0 0 calc( 3 / 12 * 100%); max-width: calc( 3 / 12 * 100%); }
+.col-4  { flex: 0 0 calc( 4 / 12 * 100%); max-width: calc( 4 / 12 * 100%); }
+.col-5  { flex: 0 0 calc( 5 / 12 * 100%); max-width: calc( 5 / 12 * 100%); }
+.col-6  { flex: 0 0 calc( 6 / 12 * 100%); max-width: calc( 6 / 12 * 100%); }
+.col-7  { flex: 0 0 calc( 7 / 12 * 100%); max-width: calc( 7 / 12 * 100%); }
+.col-8  { flex: 0 0 calc( 8 / 12 * 100%); max-width: calc( 8 / 12 * 100%); }
+.col-9  { flex: 0 0 calc( 9 / 12 * 100%); max-width: calc( 9 / 12 * 100%); }
+.col-10 { flex: 0 0 calc(10 / 12 * 100%); max-width: calc(10 / 12 * 100%); }
+.col-11 { flex: 0 0 calc(11 / 12 * 100%); max-width: calc(11 / 12 * 100%); }
+.col-12 { flex: 0 0 100%;                  max-width: 100%;                  }
+
+/* Offsets */
+.col-offset-0  { margin-inline-start: 0;                              }
+.col-offset-1  { margin-inline-start: calc( 1 / 12 * 100%); }
+.col-offset-2  { margin-inline-start: calc( 2 / 12 * 100%); }
+.col-offset-3  { margin-inline-start: calc( 3 / 12 * 100%); }
+.col-offset-4  { margin-inline-start: calc( 4 / 12 * 100%); }
+.col-offset-5  { margin-inline-start: calc( 5 / 12 * 100%); }
+.col-offset-6  { margin-inline-start: calc( 6 / 12 * 100%); }
+.col-offset-7  { margin-inline-start: calc( 7 / 12 * 100%); }
+.col-offset-8  { margin-inline-start: calc( 8 / 12 * 100%); }
+.col-offset-9  { margin-inline-start: calc( 9 / 12 * 100%); }
+.col-offset-10 { margin-inline-start: calc(10 / 12 * 100%); }
+.col-offset-11 { margin-inline-start: calc(11 / 12 * 100%); }
+
+/* ======================================================================
+   sm — min-width: 576px
+   ====================================================================== */
+
+@media (--breakpoint-sm) {
+  .col-sm {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
+
+  .col-sm-1  { flex: 0 0 calc( 1 / 12 * 100%); max-width: calc( 1 / 12 * 100%); }
+  .col-sm-2  { flex: 0 0 calc( 2 / 12 * 100%); max-width: calc( 2 / 12 * 100%); }
+  .col-sm-3  { flex: 0 0 calc( 3 / 12 * 100%); max-width: calc( 3 / 12 * 100%); }
+  .col-sm-4  { flex: 0 0 calc( 4 / 12 * 100%); max-width: calc( 4 / 12 * 100%); }
+  .col-sm-5  { flex: 0 0 calc( 5 / 12 * 100%); max-width: calc( 5 / 12 * 100%); }
+  .col-sm-6  { flex: 0 0 calc( 6 / 12 * 100%); max-width: calc( 6 / 12 * 100%); }
+  .col-sm-7  { flex: 0 0 calc( 7 / 12 * 100%); max-width: calc( 7 / 12 * 100%); }
+  .col-sm-8  { flex: 0 0 calc( 8 / 12 * 100%); max-width: calc( 8 / 12 * 100%); }
+  .col-sm-9  { flex: 0 0 calc( 9 / 12 * 100%); max-width: calc( 9 / 12 * 100%); }
+  .col-sm-10 { flex: 0 0 calc(10 / 12 * 100%); max-width: calc(10 / 12 * 100%); }
+  .col-sm-11 { flex: 0 0 calc(11 / 12 * 100%); max-width: calc(11 / 12 * 100%); }
+  .col-sm-12 { flex: 0 0 100%;                  max-width: 100%;                  }
+
+  .col-offset-sm-0  { margin-inline-start: 0;                              }
+  .col-offset-sm-1  { margin-inline-start: calc( 1 / 12 * 100%); }
+  .col-offset-sm-2  { margin-inline-start: calc( 2 / 12 * 100%); }
+  .col-offset-sm-3  { margin-inline-start: calc( 3 / 12 * 100%); }
+  .col-offset-sm-4  { margin-inline-start: calc( 4 / 12 * 100%); }
+  .col-offset-sm-5  { margin-inline-start: calc( 5 / 12 * 100%); }
+  .col-offset-sm-6  { margin-inline-start: calc( 6 / 12 * 100%); }
+  .col-offset-sm-7  { margin-inline-start: calc( 7 / 12 * 100%); }
+  .col-offset-sm-8  { margin-inline-start: calc( 8 / 12 * 100%); }
+  .col-offset-sm-9  { margin-inline-start: calc( 9 / 12 * 100%); }
+  .col-offset-sm-10 { margin-inline-start: calc(10 / 12 * 100%); }
+  .col-offset-sm-11 { margin-inline-start: calc(11 / 12 * 100%); }
+}
+
+/* ======================================================================
+   md — min-width: 768px
+   ====================================================================== */
+
+@media (--breakpoint-md) {
+  .col-md {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
+
+  .col-md-1  { flex: 0 0 calc( 1 / 12 * 100%); max-width: calc( 1 / 12 * 100%); }
+  .col-md-2  { flex: 0 0 calc( 2 / 12 * 100%); max-width: calc( 2 / 12 * 100%); }
+  .col-md-3  { flex: 0 0 calc( 3 / 12 * 100%); max-width: calc( 3 / 12 * 100%); }
+  .col-md-4  { flex: 0 0 calc( 4 / 12 * 100%); max-width: calc( 4 / 12 * 100%); }
+  .col-md-5  { flex: 0 0 calc( 5 / 12 * 100%); max-width: calc( 5 / 12 * 100%); }
+  .col-md-6  { flex: 0 0 calc( 6 / 12 * 100%); max-width: calc( 6 / 12 * 100%); }
+  .col-md-7  { flex: 0 0 calc( 7 / 12 * 100%); max-width: calc( 7 / 12 * 100%); }
+  .col-md-8  { flex: 0 0 calc( 8 / 12 * 100%); max-width: calc( 8 / 12 * 100%); }
+  .col-md-9  { flex: 0 0 calc( 9 / 12 * 100%); max-width: calc( 9 / 12 * 100%); }
+  .col-md-10 { flex: 0 0 calc(10 / 12 * 100%); max-width: calc(10 / 12 * 100%); }
+  .col-md-11 { flex: 0 0 calc(11 / 12 * 100%); max-width: calc(11 / 12 * 100%); }
+  .col-md-12 { flex: 0 0 100%;                  max-width: 100%;                  }
+
+  .col-offset-md-0  { margin-inline-start: 0;                              }
+  .col-offset-md-1  { margin-inline-start: calc( 1 / 12 * 100%); }
+  .col-offset-md-2  { margin-inline-start: calc( 2 / 12 * 100%); }
+  .col-offset-md-3  { margin-inline-start: calc( 3 / 12 * 100%); }
+  .col-offset-md-4  { margin-inline-start: calc( 4 / 12 * 100%); }
+  .col-offset-md-5  { margin-inline-start: calc( 5 / 12 * 100%); }
+  .col-offset-md-6  { margin-inline-start: calc( 6 / 12 * 100%); }
+  .col-offset-md-7  { margin-inline-start: calc( 7 / 12 * 100%); }
+  .col-offset-md-8  { margin-inline-start: calc( 8 / 12 * 100%); }
+  .col-offset-md-9  { margin-inline-start: calc( 9 / 12 * 100%); }
+  .col-offset-md-10 { margin-inline-start: calc(10 / 12 * 100%); }
+  .col-offset-md-11 { margin-inline-start: calc(11 / 12 * 100%); }
+}
+
+/* ======================================================================
+   lg — min-width: 1024px
+   ====================================================================== */
+
+@media (--breakpoint-lg) {
+  .col-lg {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
+
+  .col-lg-1  { flex: 0 0 calc( 1 / 12 * 100%); max-width: calc( 1 / 12 * 100%); }
+  .col-lg-2  { flex: 0 0 calc( 2 / 12 * 100%); max-width: calc( 2 / 12 * 100%); }
+  .col-lg-3  { flex: 0 0 calc( 3 / 12 * 100%); max-width: calc( 3 / 12 * 100%); }
+  .col-lg-4  { flex: 0 0 calc( 4 / 12 * 100%); max-width: calc( 4 / 12 * 100%); }
+  .col-lg-5  { flex: 0 0 calc( 5 / 12 * 100%); max-width: calc( 5 / 12 * 100%); }
+  .col-lg-6  { flex: 0 0 calc( 6 / 12 * 100%); max-width: calc( 6 / 12 * 100%); }
+  .col-lg-7  { flex: 0 0 calc( 7 / 12 * 100%); max-width: calc( 7 / 12 * 100%); }
+  .col-lg-8  { flex: 0 0 calc( 8 / 12 * 100%); max-width: calc( 8 / 12 * 100%); }
+  .col-lg-9  { flex: 0 0 calc( 9 / 12 * 100%); max-width: calc( 9 / 12 * 100%); }
+  .col-lg-10 { flex: 0 0 calc(10 / 12 * 100%); max-width: calc(10 / 12 * 100%); }
+  .col-lg-11 { flex: 0 0 calc(11 / 12 * 100%); max-width: calc(11 / 12 * 100%); }
+  .col-lg-12 { flex: 0 0 100%;                  max-width: 100%;                  }
+
+  .col-offset-lg-0  { margin-inline-start: 0;                              }
+  .col-offset-lg-1  { margin-inline-start: calc( 1 / 12 * 100%); }
+  .col-offset-lg-2  { margin-inline-start: calc( 2 / 12 * 100%); }
+  .col-offset-lg-3  { margin-inline-start: calc( 3 / 12 * 100%); }
+  .col-offset-lg-4  { margin-inline-start: calc( 4 / 12 * 100%); }
+  .col-offset-lg-5  { margin-inline-start: calc( 5 / 12 * 100%); }
+  .col-offset-lg-6  { margin-inline-start: calc( 6 / 12 * 100%); }
+  .col-offset-lg-7  { margin-inline-start: calc( 7 / 12 * 100%); }
+  .col-offset-lg-8  { margin-inline-start: calc( 8 / 12 * 100%); }
+  .col-offset-lg-9  { margin-inline-start: calc( 9 / 12 * 100%); }
+  .col-offset-lg-10 { margin-inline-start: calc(10 / 12 * 100%); }
+  .col-offset-lg-11 { margin-inline-start: calc(11 / 12 * 100%); }
+}
+
+/* ======================================================================
+   Gutter classes — control --grid-gutter-x (horizontal) and/or
+   --grid-gutter-y (vertical) on a .row.
+
+   .g-*   — both axes
+   .gx-*  — horizontal axis only
+   .gy-*  — vertical axis only
+
+   Scale mirrors the spacing scale (0–5):
+     0 → 0
+     1 → --spacing-1  (× 0.25)
+     2 → --spacing-2  (× 0.5)
+     3 → --spacing-3  (× 1,  default horizontal gutter)
+     4 → --spacing-4  (× 1.5)
+     5 → --spacing-5  (× 3)
+   ====================================================================== */
+
+/* --- Default (all sizes) ---------------------------------------------- */
+
+.g-0  { --grid-gutter-x: 0;                --grid-gutter-y: 0; }
+.g-1  { --grid-gutter-x: var(--spacing-1); --grid-gutter-y: var(--spacing-1); }
+.g-2  { --grid-gutter-x: var(--spacing-2); --grid-gutter-y: var(--spacing-2); }
+.g-3  { --grid-gutter-x: var(--spacing-3); --grid-gutter-y: var(--spacing-3); }
+.g-4  { --grid-gutter-x: var(--spacing-4); --grid-gutter-y: var(--spacing-4); }
+.g-5  { --grid-gutter-x: var(--spacing-5); --grid-gutter-y: var(--spacing-5); }
+
+.gx-0 { --grid-gutter-x: 0; }
+.gx-1 { --grid-gutter-x: var(--spacing-1); }
+.gx-2 { --grid-gutter-x: var(--spacing-2); }
+.gx-3 { --grid-gutter-x: var(--spacing-3); }
+.gx-4 { --grid-gutter-x: var(--spacing-4); }
+.gx-5 { --grid-gutter-x: var(--spacing-5); }
+
+.gy-0 { --grid-gutter-y: 0; }
+.gy-1 { --grid-gutter-y: var(--spacing-1); }
+.gy-2 { --grid-gutter-y: var(--spacing-2); }
+.gy-3 { --grid-gutter-y: var(--spacing-3); }
+.gy-4 { --grid-gutter-y: var(--spacing-4); }
+.gy-5 { --grid-gutter-y: var(--spacing-5); }
+
+/* --- sm — min-width: 576px -------------------------------------------- */
+
+@media (--breakpoint-sm) {
+  .g-sm-0  { --grid-gutter-x: 0;                --grid-gutter-y: 0; }
+  .g-sm-1  { --grid-gutter-x: var(--spacing-1); --grid-gutter-y: var(--spacing-1); }
+  .g-sm-2  { --grid-gutter-x: var(--spacing-2); --grid-gutter-y: var(--spacing-2); }
+  .g-sm-3  { --grid-gutter-x: var(--spacing-3); --grid-gutter-y: var(--spacing-3); }
+  .g-sm-4  { --grid-gutter-x: var(--spacing-4); --grid-gutter-y: var(--spacing-4); }
+  .g-sm-5  { --grid-gutter-x: var(--spacing-5); --grid-gutter-y: var(--spacing-5); }
+
+  .gx-sm-0 { --grid-gutter-x: 0; }
+  .gx-sm-1 { --grid-gutter-x: var(--spacing-1); }
+  .gx-sm-2 { --grid-gutter-x: var(--spacing-2); }
+  .gx-sm-3 { --grid-gutter-x: var(--spacing-3); }
+  .gx-sm-4 { --grid-gutter-x: var(--spacing-4); }
+  .gx-sm-5 { --grid-gutter-x: var(--spacing-5); }
+
+  .gy-sm-0 { --grid-gutter-y: 0; }
+  .gy-sm-1 { --grid-gutter-y: var(--spacing-1); }
+  .gy-sm-2 { --grid-gutter-y: var(--spacing-2); }
+  .gy-sm-3 { --grid-gutter-y: var(--spacing-3); }
+  .gy-sm-4 { --grid-gutter-y: var(--spacing-4); }
+  .gy-sm-5 { --grid-gutter-y: var(--spacing-5); }
+}
+
+/* --- md — min-width: 768px -------------------------------------------- */
+
+@media (--breakpoint-md) {
+  .g-md-0  { --grid-gutter-x: 0;                --grid-gutter-y: 0; }
+  .g-md-1  { --grid-gutter-x: var(--spacing-1); --grid-gutter-y: var(--spacing-1); }
+  .g-md-2  { --grid-gutter-x: var(--spacing-2); --grid-gutter-y: var(--spacing-2); }
+  .g-md-3  { --grid-gutter-x: var(--spacing-3); --grid-gutter-y: var(--spacing-3); }
+  .g-md-4  { --grid-gutter-x: var(--spacing-4); --grid-gutter-y: var(--spacing-4); }
+  .g-md-5  { --grid-gutter-x: var(--spacing-5); --grid-gutter-y: var(--spacing-5); }
+
+  .gx-md-0 { --grid-gutter-x: 0; }
+  .gx-md-1 { --grid-gutter-x: var(--spacing-1); }
+  .gx-md-2 { --grid-gutter-x: var(--spacing-2); }
+  .gx-md-3 { --grid-gutter-x: var(--spacing-3); }
+  .gx-md-4 { --grid-gutter-x: var(--spacing-4); }
+  .gx-md-5 { --grid-gutter-x: var(--spacing-5); }
+
+  .gy-md-0 { --grid-gutter-y: 0; }
+  .gy-md-1 { --grid-gutter-y: var(--spacing-1); }
+  .gy-md-2 { --grid-gutter-y: var(--spacing-2); }
+  .gy-md-3 { --grid-gutter-y: var(--spacing-3); }
+  .gy-md-4 { --grid-gutter-y: var(--spacing-4); }
+  .gy-md-5 { --grid-gutter-y: var(--spacing-5); }
+}
+
+/* --- lg — min-width: 1024px ------------------------------------------- */
+
+@media (--breakpoint-lg) {
+  .g-lg-0  { --grid-gutter-x: 0;                --grid-gutter-y: 0; }
+  .g-lg-1  { --grid-gutter-x: var(--spacing-1); --grid-gutter-y: var(--spacing-1); }
+  .g-lg-2  { --grid-gutter-x: var(--spacing-2); --grid-gutter-y: var(--spacing-2); }
+  .g-lg-3  { --grid-gutter-x: var(--spacing-3); --grid-gutter-y: var(--spacing-3); }
+  .g-lg-4  { --grid-gutter-x: var(--spacing-4); --grid-gutter-y: var(--spacing-4); }
+  .g-lg-5  { --grid-gutter-x: var(--spacing-5); --grid-gutter-y: var(--spacing-5); }
+
+  .gx-lg-0 { --grid-gutter-x: 0; }
+  .gx-lg-1 { --grid-gutter-x: var(--spacing-1); }
+  .gx-lg-2 { --grid-gutter-x: var(--spacing-2); }
+  .gx-lg-3 { --grid-gutter-x: var(--spacing-3); }
+  .gx-lg-4 { --grid-gutter-x: var(--spacing-4); }
+  .gx-lg-5 { --grid-gutter-x: var(--spacing-5); }
+
+  .gy-lg-0 { --grid-gutter-y: 0; }
+  .gy-lg-1 { --grid-gutter-y: var(--spacing-1); }
+  .gy-lg-2 { --grid-gutter-y: var(--spacing-2); }
+  .gy-lg-3 { --grid-gutter-y: var(--spacing-3); }
+  .gy-lg-4 { --grid-gutter-y: var(--spacing-4); }
+  .gy-lg-5 { --grid-gutter-y: var(--spacing-5); }
+}

package/src/utilities/_variables.css

@@ -1,54 +1,39 @@
-/*!
- * Adapted from Bootstrap v5.3.8 utilities (https://getbootstrap.com/)
- * Copyright (c) 2011-2026 The Bootstrap Authors
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
-
-/* ==========================================================================
-   Theme-independent variables
-   ========================================================================== */
-
 :root,
 :host {
+  --max-z-index: 1050;
+
+  /* Grid */
+  --grid-gutter-x: var(--spacing);
+  --grid-gutter-y: 0;
+
   /* Gradient */
   --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
 
   /* Borders & radii */
-  --border-style: solid;
-  --border-radius-default: var(--border-radius);
-  --border-radius-sm: var(--border-radius-default);
-  --border-radius-lg: calc(var(--border-radius-default) * 2);
-  --border-radius-xl: calc(var(--border-radius-default) * 4);
-  --border-radius-xxl: calc(var(--border-radius-default) * 8);
   --border-radius-pill: 50rem;
+  --border-radius-1: var(--radius);
+  --border-radius-2: calc(var(--radius) * 2);
+  --border-radius-3: calc(var(--radius) * 4);
+  --border-radius-4: calc(var(--radius) * 6);
+  --border-radius-5: calc(var(--radius) * 8);
 
   /* Border-width scale */
-  --border-width-default: var(--border-width);
-  --border-width-0: 0;
-  --border-width-1: var(--border-width-default);
-  --border-width-2: calc(var(--border-width-default) * 2);
-  --border-width-3: calc(var(--border-width-default) * 3);
-  --border-width-4: calc(var(--border-width-default) * 4);
-  --border-width-5: calc(var(--border-width-default) * 5);
+  --border-style: solid;
+  --border-width-1: var(--border-size);
+  --border-width-2: calc(var(--border-size) * 2);
+  --border-width-3: calc(var(--border-size) * 3);
+  --border-width-4: calc(var(--border-size) * 4);
+  --border-width-5: calc(var(--border-size) * 5);
 
   /* Spacing scale */
-  --spacer-default: var(--spacing);
-  --spacer-0: 0;
-  --spacer-1: calc(var(--spacer-default) * 0.25);
-  --spacer-2: calc(var(--spacer-default) * 0.5);
-  --spacer-3: var(--spacer-default);
-  --spacer-4: calc(var(--spacer-default) * 1.5);
-  --spacer-5: calc(var(--spacer-default) * 3);
-
-  /* Focus ring */
-  --focus-ring-width: var(--outline-width);
-  --focus-ring-opacity: 0.25;
-
-  /* Auto-switching mappings (resolved at computed-value time via Semanticus CSS) */
-  --emphasis-color: rgb(var(--color-contrast-rgb));
-  --secondary-color: var(--color-text-muted);
-  --border-color: var(--color-border-muted);
-  --focus-ring-color: var(--color-primary-focus);
-
-  --max-z-index: 1050;
+  --spacing-1: calc(var(--spacing) * 0.25);
+  --spacing-2: calc(var(--spacing) * 0.5);
+  --spacing-3: var(--spacing);
+  --spacing-4: calc(var(--spacing) * 1.5);
+  --spacing-5: calc(var(--spacing) * 3);
+
+  /* Shadows */
+  --shadow-sm: light-dark(0 0.0625rem 0.125rem rgba(129, 145, 181, 0.1), 0 0.0625rem 0.125rem rgba(7, 8.5, 12, 0.1));
+  --shadow-md: light-dark(0.0625rem 0.125rem 0.5rem rgba(129, 145, 181, 0.15), 0.0625rem 0.125rem 0.5rem rgba(7, 8.5, 12, 0.15));
+  --shadow-lg: light-dark(0.125rem 0.25rem 1rem rgba(129, 145, 181, 0.2), 0.125rem 0.25rem 1rem rgba(7, 8.5, 12, 0.2));
 }