@tabler/core 1.5.1 → 1.6.0

package/scss/tests/_colors-misc.test.scss

@@ -1,80 +0,0 @@
-// Next batch — self-contained helper functions from scss/mixins/_functions.scss
-// that need no project config (arguments passed inline). Covers colour channel
-// extraction, alpha flattening, percentage coercion, the transparent/SVG string
-// builders and the higher-order `map-loop`.
-//
-// Some functions return a `calculation`, an unquoted `color-mix(...)` string, or
-// a `url(...)` token; those are asserted through `meta.inspect(...)` so the
-// comparison is against the exact rendered output.
-
-@use 'sass:meta';
-@use '../mixins/functions' as *;
-
-@include describe('to-rgb') {
-  @include it('returns the comma-separated rgb channels') {
-    @include assert-equal(to-rgb(#ff0000), (255, 0, 0));
-    @include assert-equal(to-rgb(#123456), (18, 52, 86));
-  }
-}
-
-@include describe('opaque') {
-  @include it('flattens a translucent foreground over the background') {
-    @include assert-equal(opaque(#fff, rgba(#000, 0.5)), rgb(127.5, 127.5, 127.5));
-  }
-
-  @include it('returns the foreground unchanged when it is fully opaque') {
-    @include assert-equal(opaque(#fff, #000), black);
-  }
-}
-
-@include describe('to-percentage') {
-  @include it('converts a unitless number to a percentage') {
-    @include assert-equal(to-percentage(0.5), 50%);
-  }
-
-  @include it('passes a value that already has a unit straight through') {
-    @include assert-equal(to-percentage(10px), 10px);
-  }
-}
-
-@include describe('color-transparent') {
-  @include it('returns the colour untouched when alpha is 1') {
-    @include assert-equal(color-transparent(#f00, 1), #f00);
-  }
-
-  @include it('builds a color-mix() with the alpha as a percentage otherwise') {
-    @include assert-equal(meta.inspect(color-transparent(#f00, 0.5)), 'color-mix(in srgb, #f00 50%, transparent)');
-  }
-}
-
-@include describe('url-svg') {
-  @include it("percent-encodes '#' so the data URI stays valid") {
-    @include assert-equal(meta.inspect(url-svg('#')), 'url("data:image/svg+xml;charset=UTF-8,%23")');
-  }
-
-  @include it('injects the SVG xmlns attribute') {
-    @include assert-equal(meta.inspect(url-svg('<svg></svg>')), 'url(\'data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"></svg>\')');
-  }
-}
-
-@include describe('map-loop') {
-  // Applies a module-level function (resolved by name via meta.get-function) to
-  // every value in the map. `to-percentage` lives in the same module, so it
-  // resolves correctly.
-  @include it('maps every value through the named function') {
-    @include assert-equal(
-      map-loop(
-        (
-          a: 0.5,
-          b: 0.25,
-        ),
-        'to-percentage',
-        '$value'
-      ),
-      (
-        a: 50%,
-        b: 25%,
-      )
-    );
-  }
-}

package/scss/tests/_css-var.test.scss

@@ -1,37 +0,0 @@
-// Tests for the CSS custom-property builders in scss/mixins/_functions.scss:
-// `varify()` and `rgba-css-var()`. A plain `@use` of the functions module is
-// enough — no fixtures. Both emit unprefixed names: the `--tblr-` prefix is
-// added later, by the css pipeline (.build/css-var-prefix.ts).
-
-@use 'sass:meta';
-@use '../mixins/functions' as *;
-
-@include describe('varify') {
-  // `varify` seeds its accumulator with `null`, so the raw list inspects as
-  // `null var(...) ...`; Sass drops the null when serialising to CSS, so the
-  // behaviour is asserted through the rendered output rather than the value.
-  @include it('prefixes each entry as a space-separated var() list') {
-    @include assert() {
-      @include output() {
-        .t {
-          padding: varify(('gutter-x' 'gutter-y'));
-        }
-      }
-      @include expect() {
-        .t {
-          padding: var(--gutter-x) var(--gutter-y);
-        }
-      }
-    }
-  }
-}
-
-@include describe('rgba-css-var') {
-  @include it('builds a color-mix() from the identifier and target opacity') {
-    @include assert-equal(meta.inspect(rgba-css-var('primary', 'bg')), 'color-mix(in srgb, var(--primary) calc(var(--bg-opacity) * 100%), transparent)');
-  }
-
-  @include it('special-cases the body background') {
-    @include assert-equal(meta.inspect(rgba-css-var('body', 'bg')), 'color-mix(in srgb, var(--body-bg) calc(var(--bg-opacity) * 100%), transparent)');
-  }
-}

package/scss/tests/_divide.test.scss

@@ -1,45 +0,0 @@
-// Priority 1 — unit tests for `divide($dividend, $divisor, $precision: 10)`
-// from scss/mixins/_functions.scss. This is a hand-rolled long-division
-// algorithm (sign handling, configurable precision, unit propagation), so it
-// carries the most branching logic of any function in the file.
-//
-// Note: the divide-by-zero path uses Sass `@error`, which aborts compilation
-// and cannot be caught by sass-true (there is no assert-throws), so it is not
-// covered here.
-
-@use '../mixins/functions' as *;
-
-@include describe('divide') {
-  @include it('divides two unitless numbers') {
-    @include assert-equal(divide(4, 2), 2);
-  }
-
-  @include it('returns a fractional result') {
-    @include assert-equal(divide(10, 4), 2.5);
-    @include assert-equal(divide(1, 2), 0.5);
-  }
-
-  @include it('returns 0 when the dividend is 0') {
-    @include assert-equal(divide(0, 5), 0);
-  }
-
-  @include it('keeps the correct sign for mixed-sign operands') {
-    @include assert-equal(divide(-6, 2), -3);
-    @include assert-equal(divide(6, -2), -3);
-    @include assert-equal(divide(-6, -2), 3);
-  }
-
-  @include it('propagates the dividend unit when the divisor is unitless') {
-    @include assert-equal(divide(10px, 2), 5px);
-    @include assert-equal(divide(5%, 2), 2.5%);
-  }
-
-  @include it('cancels matching units to a unitless result') {
-    @include assert-equal(divide(10px, 2px), 5);
-  }
-
-  @include it('rounds to the requested precision') {
-    @include assert-equal(divide(2, 3, 0), 1);
-    @include assert-equal(divide(2, 3, 2), 0.67);
-  }
-}

package/scss/tests/_escape-svg.test.scss

@@ -1,18 +0,0 @@
-// Tests for `escape-svg()` from scss/mixins/_functions.scss.
-//
-// It iterates the global `$escaped-characters` map, which lives in
-// scss/_settings.scss (already `@use`d by functions.scss), so a plain `@use` of
-// the functions module is enough — no fixtures. Escaping only happens when the
-// string looks like an SVG data URI; anything else is returned untouched.
-
-@use '../mixins/functions' as *;
-
-@include describe('escape-svg') {
-  @include it('returns a non data-URI string unchanged') {
-    @include assert-equal(escape-svg('no data uri <here>'), 'no data uri <here>');
-  }
-
-  @include it('percent-encodes reserved characters inside an SVG data URI') {
-    @include assert-equal(escape-svg('data:image/svg+xml,<svg><path/></svg>'), 'data:image/svg+xml,%3csvg%3e%3cpath/%3e%3c/svg%3e');
-  }
-}

package/scss/tests/_generate-utility.test.scss

@@ -1,245 +0,0 @@
-// Output tests for the `generate-utility` mixin from
-// scss/mixins/bootstrap/_utilities.scss — the engine behind Tabler's utility
-// classes. `@use "../mixins/bootstrap/utilities"` pulls in the real
-// settings/variables chain, so `$enable-important-utilities` = true (hence the
-// `!important` in the output). Custom properties are expected unprefixed: the
-// `--tblr-` prefix is added later, by the css pipeline (.build/css-var-prefix.ts).
-//
-// Each `it` feeds the mixin a hand-built utility map and asserts the generated
-// classes, covering the branches that shape the output: map vs list values,
-// single vs multiple properties, custom class, css-var mode, pseudo-class
-// states and the responsive infix.
-
-@use 'sass:map';
-@use '../mixins/bootstrap/utilities' as *;
-@use '../mixins/bootstrap/breakpoints' as *;
-
-@include describe('generate-utility') {
-  @include it('generates a class per key from a values map') {
-    @include assert() {
-      @include output() {
-        @include generate-utility(
-          (
-            property: opacity,
-            values: (
-              0: 0,
-              50: 0.5,
-            ),
-          )
-        );
-      }
-      @include expect() {
-        .opacity-0 {
-          opacity: 0 !important;
-        }
-        .opacity-50 {
-          opacity: 0.5 !important;
-        }
-      }
-    }
-  }
-
-  @include it('zips a plain list of values into key/value pairs') {
-    @include assert() {
-      @include output() {
-        @include generate-utility(
-          (
-            property: float,
-            class: float,
-            values: (
-              left,
-              right,
-            ),
-          )
-        );
-      }
-      @include expect() {
-        .float-left {
-          float: left !important;
-        }
-        .float-right {
-          float: right !important;
-        }
-      }
-    }
-  }
-
-  @include it('emits every property when several are given') {
-    @include assert() {
-      @include output() {
-        @include generate-utility(
-          (
-            property: margin-inline-end margin-inline-start,
-            class: mx,
-            values: (
-              0: 0,
-              auto: auto,
-            ),
-          )
-        );
-      }
-      @include expect() {
-        .mx-0 {
-          margin-inline-end: 0 !important;
-          margin-inline-start: 0 !important;
-        }
-        .mx-auto {
-          margin-inline-end: auto !important;
-          margin-inline-start: auto !important;
-        }
-      }
-    }
-  }
-
-  @include it('sets a custom property instead of a declaration in css-var mode') {
-    @include assert() {
-      @include output() {
-        @include generate-utility(
-          (
-            property: opacity,
-            class: opacity,
-            css-var: true,
-            values: (
-              50: 0.5,
-            ),
-          )
-        );
-      }
-      @include expect() {
-        .opacity-50 {
-          --opacity: 0.5;
-        }
-      }
-    }
-  }
-
-  @include it('adds a pseudo-class variant for each declared state') {
-    @include assert() {
-      @include output() {
-        @include generate-utility(
-          (
-            property: text-decoration,
-            class: text-decoration,
-            state: hover,
-            values: (underline),
-          )
-        );
-      }
-      @include expect() {
-        .text-decoration-underline {
-          text-decoration: underline !important;
-        }
-        .text-decoration-underline-hover:hover {
-          text-decoration: underline !important;
-        }
-      }
-    }
-  }
-
-  @include it('injects the responsive infix into the class name') {
-    @include assert() {
-      @include output() {
-        @include generate-utility(
-          (
-            property: display,
-            class: d,
-            values: (none),
-          ),
-          '-md'
-        );
-      }
-      @include expect() {
-        .d-md-none {
-          display: none !important;
-        }
-      }
-    }
-  }
-}
-
-// `generate-utility` itself does not read the `responsive` key — that gate lives
-// in bootstrap/utilities/_api.scss, which loops the breakpoints and only calls
-// the mixin for a given infix when `map.get($utility, responsive)` is truthy (or
-// it's the base, infix-less breakpoint). This reproduces that gate against a local
-// breakpoint map with two utilities: one `responsive: true`, one without.
-@include describe('generate-utility (responsive property)') {
-  $g: (
-    xs: 0,
-    sm: 576px,
-    md: 768px,
-  );
-  $utils: (
-    'display': (
-      property: display,
-      class: d,
-      responsive: true,
-      values: (
-        none,
-        flex,
-      ),
-    ),
-    'float': (
-      property: float,
-      class: float,
-      values: (
-        start: inline-start,
-        end: inline-end,
-        none: none,
-      ),
-    ),
-  );
-
-  @include it('only a `responsive: true` utility gets breakpoint-infixed variants') {
-    @include assert() {
-      @include output() {
-        @each $bp in map.keys($g) {
-          @include media-breakpoint-up($bp, $g) {
-            $infix: breakpoint-infix($bp, $g);
-            @each $key, $utility in $utils {
-              @if map.get($utility, responsive) or $infix == '' {
-                @include generate-utility($utility, $infix);
-              }
-            }
-          }
-        }
-      }
-      @include expect() {
-        // base breakpoint: both utilities emit bare classes
-        .d-none {
-          display: none !important;
-        }
-        .d-flex {
-          display: flex !important;
-        }
-        .float-start {
-          float: inline-start !important;
-        }
-        .float-end {
-          float: inline-end !important;
-        }
-        .float-none {
-          float: none !important;
-        }
-
-        // responsive breakpoints: only `d` (responsive: true) is repeated; `float` is not
-        @media (min-width: 576px) {
-          .d-sm-none {
-            display: none !important;
-          }
-          .d-sm-flex {
-            display: flex !important;
-          }
-        }
-
-        @media (min-width: 768px) {
-          .d-md-none {
-            display: none !important;
-          }
-          .d-md-flex {
-            display: flex !important;
-          }
-        }
-      }
-    }
-  }
-}

package/scss/tests/_grid.test.scss

@@ -1,153 +0,0 @@
-// Output tests for the grid mixins in scss/mixins/bootstrap/_grid.scss.
-// `make-col`/`make-col-offset`/`row-cols` do the real width maths (via `divide`
-// + math.percentage); `$columns` is passed explicitly so the tests don't depend
-// on the global `$grid-columns`.
-
-@use '../mixins/bootstrap/grid' as *;
-
-@include describe('make-col') {
-  @include it('sets a fixed width as a percentage of the column count') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include make-col(6, 12);
-        }
-      }
-      @include expect() {
-        .t {
-          flex: 0 0 auto;
-          width: 50%;
-        }
-      }
-    }
-  }
-
-  @include it('grows to fill the row when no size is given') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include make-col();
-        }
-      }
-      @include expect() {
-        .t {
-          flex: 1 1 0;
-          max-width: 100%;
-        }
-      }
-    }
-  }
-}
-
-@include describe('make-col-auto') {
-  @include it('sizes to the content') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include make-col-auto();
-        }
-      }
-      @include expect() {
-        .t {
-          flex: 0 0 auto;
-          width: auto;
-        }
-      }
-    }
-  }
-}
-
-@include describe('make-col-offset') {
-  @include it('offsets by a percentage of the column count') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include make-col-offset(3, 12);
-        }
-      }
-      @include expect() {
-        .t {
-          margin-inline-start: 25%;
-        }
-      }
-    }
-  }
-
-  @include it('collapses a zero offset to 0 (not 0%)') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include make-col-offset(0, 12);
-        }
-      }
-      @include expect() {
-        .t {
-          margin-inline-start: 0;
-        }
-      }
-    }
-  }
-}
-
-@include describe('row-cols') {
-  @include it('splits children into equal fractions of the row') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include row-cols(3);
-        }
-      }
-      @include expect() {
-        .t > * {
-          flex: 0 0 auto;
-          width: 33.33333333%;
-        }
-      }
-    }
-  }
-}
-
-@include describe('make-row') {
-  @include it('sets the gutter custom properties and negative margins') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include make-row(1rem);
-        }
-      }
-      @include expect() {
-        .t {
-          --gutter-x: 1rem;
-          --gutter-y: 0;
-          display: flex;
-          flex-wrap: wrap;
-          margin-top: calc(-1 * var(--gutter-y));
-          margin-inline-end: calc(-0.5 * var(--gutter-x));
-          margin-inline-start: calc(-0.5 * var(--gutter-x));
-        }
-      }
-    }
-  }
-}
-
-@include describe('make-col-ready') {
-  @include it('primes a column with full width and gutter padding') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include make-col-ready();
-        }
-      }
-      @include expect() {
-        .t {
-          flex-shrink: 0;
-          width: 100%;
-          max-width: 100%;
-          padding-inline-end: calc(var(--gutter-x) * 0.5);
-          padding-inline-start: calc(var(--gutter-x) * 0.5);
-          margin-top: var(--gutter-y);
-        }
-      }
-    }
-  }
-}

package/scss/tests/_maps.test.scss

@@ -1,76 +0,0 @@
-// Priority 3 — unit tests for the map utilities in scss/mixins/_functions.scss.
-// The test maps are built inline, so no project config is required.
-
-@use '../mixins/functions' as *;
-
-@include describe('negativify-map') {
-  @include it('prefixes keys with `n` and negates the values') {
-    @include assert-equal(
-      negativify-map(
-        (
-          1: 10px,
-          2: 20px,
-        )
-      ),
-      (
-        'n1': -10px,
-        'n2': -20px,
-      )
-    );
-  }
-
-  @include it('leaves a 0 key untouched') {
-    @include assert-equal(
-      negativify-map(
-        (
-          0: 0,
-          1: 5px,
-        )
-      ),
-      (
-        'n1': -5px,
-      )
-    );
-  }
-}
-
-@include describe('map-get-multiple') {
-  @include it('keeps only the requested keys, preserving map order') {
-    @include assert-equal(
-      map-get-multiple(
-        (
-          a: 1,
-          b: 2,
-          c: 3,
-        ),
-        (a c)
-      ),
-      (
-        a: 1,
-        c: 3,
-      )
-    );
-  }
-}
-
-@include describe('map-merge-multiple') {
-  @include it('merges maps left-to-right, later keys winning') {
-    @include assert-equal(
-      map-merge-multiple(
-        (
-          a: 1,
-        ),
-        (
-          b: 2,
-        ),
-        (
-          a: 3,
-        )
-      ),
-      (
-        a: 3,
-        b: 2,
-      )
-    );
-  }
-}