@semanticus/semanticus-css 0.8.0 → 1.0.0

package/src/semantics/{_type-range.css → elements/_type-range.css}

@@ -1,6 +1,3 @@
-/**
- * Input type range
- */
 [type=range] {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -12,24 +9,24 @@
   &::-webkit-slider-runnable-track {
     width: 100%;
     height: 0.375rem;
-    border-radius: var(--border-radius);
-    background-color: var(--range-border-color);
+    border-radius: var(--radius);
+    background-color: var(--range-track-border);
     transition: background-color var(--transition), box-shadow var(--transition);
   }
 
   &::-moz-range-track {
     width: 100%;
     height: 0.375rem;
-    border-radius: var(--border-radius);
-    background-color: var(--range-border-color);
+    border-radius: var(--radius);
+    background-color: var(--range-track-border);
     transition: background-color var(--transition), box-shadow var(--transition);
   }
 
   &::-ms-track {
     width: 100%;
     height: 0.375rem;
-    border-radius: var(--border-radius);
-    background-color: var(--range-border-color);
+    border-radius: var(--radius);
+    background-color: var(--range-track-border);
     transition: background-color var(--transition), box-shadow var(--transition);
   }
 
@@ -40,7 +37,7 @@
     margin-top: -0.4375rem;
     border: 2px solid var(--range-thumb-border);
     border-radius: 50%;
-    background-color: var(--range-thumb-color);
+    background-color: var(--range-thumb-fill);
     cursor: pointer;
     transition: background-color var(--transition), transform var(--transition);
   }
@@ -52,7 +49,7 @@
     margin-top: -0.4375rem;
     border: 2px solid var(--range-thumb-border);
     border-radius: 50%;
-    background-color: var(--range-thumb-color);
+    background-color: var(--range-thumb-fill);
     cursor: pointer;
     transition: background-color var(--transition), transform var(--transition);
   }
@@ -64,14 +61,14 @@
     margin-top: -0.4375rem;
     border: 2px solid var(--range-thumb-border);
     border-radius: 50%;
-    background-color: var(--range-thumb-color);
+    background-color: var(--range-thumb-fill);
     cursor: pointer;
     transition: background-color var(--transition), transform var(--transition);
   }
 
   &:active, &:focus-within {
-    --range-border-color: var(--range-active-border);
-    --range-thumb-color: var(--range-thumb-active);
+    --range-track-border: var(--range-track-border-active);
+    --range-thumb-fill: var(--range-thumb-fill-active);
   }
 
   &:active {

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

@@ -0,0 +1,30 @@
+input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
+  padding-inline-start: calc(var(--input-spacing-horizontal) + 1.75rem);
+  background-image: var(--icon-search);
+  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(--input-spacing-horizontal) + 1.75rem);
+    /* Using calc with var to workaround LightningCSS minification bug with 3-value syntax */
+    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] {
+    background-image: var(--icon-search), var(--icon-valid);
+  }
+
+  &[aria-invalid=true] {
+    background-image: var(--icon-search), var(--icon-invalid);
+  }
+}
+
+[dir=rtl] input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
+  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(--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,38 +1,47 @@
-/**
- * Semanticus CSS Semantics Modules
- * Just the semantic component styles (no variables, no normalize)
- * Used by the full version which imports variables/normalize separately
- */
+@import "./attributes/_aria-busy.css";
+@import "./attributes/_hidden.css";
+@import "./attributes/_popover.css";
+@import "./attributes/_role-group-search.css";
+@import "./attributes/_role-toolbar.css";
+@import "./attributes/_role-tooltip.css";
 
-@import "./_aria-busy.css";
-@import "./_article.css";
-@import "./_aside.css";
-@import "./_body.css";
-@import "./_button.css";
-@import "./_code.css";
-@import "./_details.css";
-@import "./_dialog.css";
-@import "./_document.css";
-@import "./_embedded.css";
-@import "./_figure.css";
-@import "./_footer.css";
-@import "./_header.css";
-@import "./_hidden.css";
-@import "./_hr.css";
-@import "./_input.css";
-@import "./_links.css";
-@import "./_main.css";
-@import "./_nav.css";
-@import "./_progress.css";
-@import "./_role-group-search.css";
-@import "./_role-toolbar.css";
-@import "./_role-tooltip.css";
-@import "./_section.css";
-@import "./_table.css";
-@import "./_type-checkbox-radio.css";
-@import "./_type-color.css";
-@import "./_type-date.css";
-@import "./_type-file.css";
-@import "./_type-range.css";
-@import "./_type-search.css";
-@import "./_typography.css";
+@import "./elements/_abbr.css";
+@import "./elements/_address.css";
+@import "./elements/_article.css";
+@import "./elements/_aside.css";
+@import "./elements/_blockquote.css";
+@import "./elements/_body.css";
+@import "./elements/_button.css";
+@import "./elements/_code.css";
+@import "./elements/_del.css";
+@import "./elements/_details.css";
+@import "./elements/_dialog.css";
+@import "./elements/_document.css";
+@import "./elements/_embedded.css";
+@import "./elements/_figure.css";
+@import "./elements/_footer.css";
+@import "./elements/_header.css";
+@import "./elements/_headings.css";
+@import "./elements/_hgroup.css";
+@import "./elements/_hr.css";
+@import "./elements/_input.css";
+@import "./elements/_ins.css";
+@import "./elements/_links.css";
+@import "./elements/_lists.css";
+@import "./elements/_main.css";
+@import "./elements/_mark.css";
+@import "./elements/_nav.css";
+@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";
+@import "./elements/_table.css";
+@import "./elements/_type-checkbox-radio.css";
+@import "./elements/_type-color.css";
+@import "./elements/_type-date.css";
+@import "./elements/_type-file.css";
+@import "./elements/_type-range.css";
+@import "./elements/_type-search.css";

package/src/sizes/pico.css

@@ -16,36 +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 */
-  --spacing: 1rem;
-  --responsive-multiplier: 1; /* Multiplier applied to spacing for responsive adjustments at wider breakpoints */
+  --base-spacing: 1rem;
+  --spacing: var(--base-spacing);
   --typography-spacing-vertical: 1rem; /* Vertical margin below typographic elements (p, lists, etc.) */
-  --block-spacing-vertical: var(--spacing); /* Vertical padding inside block-level components (cards, modals, etc.) */
-  --block-spacing-horizontal: var(--spacing); /* Horizontal padding inside block-level components */
-  --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 */
-
-  /* Modal – backdrop overlay settings */
-  --modal-overlay-backdrop-filter: blur(0.375rem); /* Applies a blur behind the modal overlay */
+  --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-vertical: 0.5rem; /* Vertical padding inside nav links */
-  --nav-link-spacing-horizontal: 0.5rem; /* Horizontal 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 */
@@ -53,8 +45,8 @@
   :root,
   :host {
     --font-size: 106.25%;
-    --sidebar-width: max(25%, 150px);
-    --responsive-multiplier: 1.25;
+    --sidebar-size: max(25%, 150px);
+    --spacing: calc(var(--base-spacing) * 1.25);
   }
 }
 
@@ -62,8 +54,8 @@
   :root,
   :host {
     --font-size: 112.5%;
-    --sidebar-width: max(22%, 180px);
-    --responsive-multiplier: 1.5;
+    --sidebar-size: max(22%, 180px);
+    --spacing: calc(var(--base-spacing) * 1.5);
   }
 }
 
@@ -71,8 +63,8 @@
   :root,
   :host {
     --font-size: 118.75%;
-    --sidebar-width: max(20%, 200px);
-    --responsive-multiplier: 1.75;
+    --sidebar-size: max(20%, 200px);
+    --spacing: calc(var(--base-spacing) * 1.75);
   }
 }
 
@@ -80,8 +72,8 @@
   :root,
   :host {
     --font-size: 125%;
-    --sidebar-width: max(18%, 220px);
-    --responsive-multiplier: 2;
+    --sidebar-size: max(18%, 220px);
+    --spacing: calc(var(--base-spacing) * 2);
   }
 }
 
@@ -89,7 +81,7 @@
   :root,
   :host {
     --font-size: 131.25%;
-    --sidebar-width: clamp(240px, 16%, 300px);
-    --responsive-multiplier: 2.25;
+    --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); }
+}