Add additive v6 utilities: container queries, grid, shadows, keyline (#2984)

.changeset/additive-v6-utilities.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Added container-query (`.contains-*`), grid (`.grid-cols-*`, `.place-items-*`), extended shadow and `.border-keyline` utilities.

core/package.json

@@ -88,7 +88,7 @@
       },
       {
         "path": "./dist/css/tabler.min.css",
-        "maxSize": "80 kB"
+        "maxSize": "82 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.css",
@@ -96,7 +96,7 @@
       },
       {
         "path": "./dist/css/tabler.rtl.min.css",
-        "maxSize": "80 kB"
+        "maxSize": "82 kB"
       },
       {
         "path": "./dist/css/tabler-flags.css",

core/scss/_props.scss

@@ -82,6 +82,9 @@
     --shadow#{if(sass($name): '-#{$name}'; else: '')}: #{$value};
   }
 
+  // Borders
+  --border-width-keyline: 0.5px;
+
   // Border radiuses
   --border-radius-scale: 1;
   @each $name, $value in $border-radiuses {

core/scss/_utilities.scss

@@ -110,8 +110,12 @@ $utilities: map.merge(
       class: shadow,
       values: (
         null: var(--box-shadow),
+        xs: var(--shadow-xs),
         sm: var(--box-shadow-sm),
+        md: var(--shadow-md),
         lg: var(--box-shadow-lg),
+        xl: var(--shadow-xl),
+        '2xl': var(--shadow-2xl),
         none: none,
       ),
     ),
@@ -936,6 +940,62 @@ $utilities: map.merge(
       class: z,
       values: $zindex-levels,
     ),
+    // Container query containment — turns an element into a query container so
+    // container-query components (`.card-group`, `.list-group-horizontal`) resolve.
+    'container': (
+        property: container-type,
+        class: contains,
+        values: (
+          inline: inline-size,
+          size: size,
+        ),
+      ),
+    // Grid column counts, responsive like `justify-content`.
+    'grid-column-counts': (
+        responsive: true,
+        property: grid-template-columns,
+        class: grid-cols,
+        values: (
+          1: repeat(1, minmax(0, 1fr)),
+          2: repeat(2, minmax(0, 1fr)),
+          3: repeat(3, minmax(0, 1fr)),
+          4: repeat(4, minmax(0, 1fr)),
+          6: repeat(6, minmax(0, 1fr)),
+          subgrid: subgrid,
+        ),
+      ),
+    // `.grid-cols-fill` — span every column of the parent grid.
+    'grid-columns': (
+        property: grid-column,
+        class: grid-cols,
+        values: (
+          fill: #{'1 / -1'},
+        ),
+      ),
+    'grid-auto-flow': (
+      property: grid-auto-flow,
+      class: grid-auto-flow,
+      values: row column dense,
+    ),
+    'justify-items': (
+      property: justify-items,
+      values: (
+        start: start,
+        end: end,
+        center: center,
+        stretch: stretch,
+      ),
+    ),
+    'place-items': (
+      responsive: true,
+      property: place-items,
+      values: (
+        start: start,
+        end: end,
+        center: center,
+        stretch: stretch,
+      ),
+    ),
   ),
   $utilities
 );

core/scss/_variables.scss

@@ -711,6 +711,7 @@ $border-widths: (
   3: 3px,
   4: 4px,
   5: 5px,
+  keyline: var(--border-width-keyline),
 ) !default;
 $border-style: solid !default;
 

core/scss/tests/_utilities-additive.test.scss

@@ -0,0 +1,185 @@
+// Guards the additive Bootstrap v6 utilities wired into `$utilities`
+// (scss/_utilities.scss): container-query containment, grid column/flow/place
+// utilities and the extended shadow scale. Each `it` pulls the real submap out
+// of `$utilities` and asserts the classes `generate-utility` produces from it,
+// so a dropped or renamed key fails here instead of silently vanishing from the
+// bundle. `--tblr-` prefixing happens later in the css pipeline, so custom
+// properties are expected bare.
+
+@use 'sass:map';
+@use '../config' as *;
+
+@include describe('additive v6 utilities') {
+  @include it('container-query containment emits .contains-inline / .contains-size') {
+    @include assert() {
+      @include output() {
+        @include generate-utility(map.get($utilities, 'container'));
+      }
+      @include expect() {
+        .contains-inline {
+          container-type: inline-size !important;
+        }
+        .contains-size {
+          container-type: size !important;
+        }
+      }
+    }
+  }
+
+  @include it('grid column counts emit .grid-cols-1…6 and .grid-cols-subgrid') {
+    @include assert() {
+      @include output() {
+        @include generate-utility(map.get($utilities, 'grid-column-counts'));
+      }
+      @include expect() {
+        .grid-cols-1 {
+          grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+        }
+        .grid-cols-2 {
+          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+        }
+        .grid-cols-3 {
+          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+        }
+        .grid-cols-4 {
+          grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+        }
+        .grid-cols-6 {
+          grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
+        }
+        .grid-cols-subgrid {
+          grid-template-columns: subgrid !important;
+        }
+      }
+    }
+  }
+
+  @include it('grid column span emits .grid-cols-fill') {
+    @include assert() {
+      @include output() {
+        @include generate-utility(map.get($utilities, 'grid-columns'));
+      }
+      @include expect() {
+        .grid-cols-fill {
+          grid-column: #{'1 / -1'} !important;
+        }
+      }
+    }
+  }
+
+  @include it('grid auto-flow emits .grid-auto-flow-row/column/dense') {
+    @include assert() {
+      @include output() {
+        @include generate-utility(map.get($utilities, 'grid-auto-flow'));
+      }
+      @include expect() {
+        .grid-auto-flow-row {
+          grid-auto-flow: row !important;
+        }
+        .grid-auto-flow-column {
+          grid-auto-flow: column !important;
+        }
+        .grid-auto-flow-dense {
+          grid-auto-flow: dense !important;
+        }
+      }
+    }
+  }
+
+  @include it('justify-items and place-items emit start/end/center/stretch') {
+    @include assert() {
+      @include output() {
+        @include generate-utility(map.get($utilities, 'justify-items'));
+        @include generate-utility(map.get($utilities, 'place-items'));
+      }
+      @include expect() {
+        .justify-items-start {
+          justify-items: start !important;
+        }
+        .justify-items-end {
+          justify-items: end !important;
+        }
+        .justify-items-center {
+          justify-items: center !important;
+        }
+        .justify-items-stretch {
+          justify-items: stretch !important;
+        }
+        .place-items-start {
+          place-items: start !important;
+        }
+        .place-items-end {
+          place-items: end !important;
+        }
+        .place-items-center {
+          place-items: center !important;
+        }
+        .place-items-stretch {
+          place-items: stretch !important;
+        }
+      }
+    }
+  }
+
+  @include it('shadow scale gains xs / md / xl / 2xl reading the --shadow-* tokens') {
+    @include assert() {
+      @include output() {
+        @include generate-utility(map.get($utilities, 'shadow'));
+      }
+      @include expect() {
+        .shadow {
+          box-shadow: var(--box-shadow) !important;
+        }
+        .shadow-xs {
+          box-shadow: var(--shadow-xs) !important;
+        }
+        .shadow-sm {
+          box-shadow: var(--box-shadow-sm) !important;
+        }
+        .shadow-md {
+          box-shadow: var(--shadow-md) !important;
+        }
+        .shadow-lg {
+          box-shadow: var(--box-shadow-lg) !important;
+        }
+        .shadow-xl {
+          box-shadow: var(--shadow-xl) !important;
+        }
+        .shadow-2xl {
+          box-shadow: var(--shadow-2xl) !important;
+        }
+        .shadow-none {
+          box-shadow: none !important;
+        }
+      }
+    }
+  }
+
+  @include it('border-width utility gains .border-keyline from the token') {
+    @include assert() {
+      @include output() {
+        @include generate-utility(map.get($utilities, 'border-width'));
+      }
+      @include expect() {
+        .border-1 {
+          border-width: 1px !important;
+        }
+        .border-2 {
+          border-width: 2px !important;
+        }
+        .border-3 {
+          border-width: 3px !important;
+        }
+        .border-4 {
+          border-width: 4px !important;
+        }
+        .border-5 {
+          border-width: 5px !important;
+        }
+        .border-keyline {
+          border-width: var(--border-width-keyline) !important;
+        }
+      }
+    }
+  }
+}