@tabler/core 1.5.0 → 1.6.0

package/scss/tests/_media-breakpoint.test.scss

@@ -1,202 +0,0 @@
-// Output tests for the responsive media-query mixins. Like the breakpoint
-// functions, every mixin accepts an explicit `$breakpoints` map, so the tests
-// pass a local fixture map and stay independent of the global `$grid-breakpoints`.
-//
-// `media-breakpoint-{up,down,between,only}` come from
-// mixins/bootstrap/_breakpoints.scss; `media-breakpoint-down-than` lives in
-// mixins/_functions.scss. Their names don't collide, so both are used as `*`.
-//
-// Max-widths are the breakpoint value minus 0.02px (the min-/max- overlap fix);
-// the smallest/edge cases emit the content with no media query at all.
-
-@use '../mixins/bootstrap/breakpoints' as *;
-@use '../mixins/functions' as *;
-
-$g: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-);
-
-@include describe('media-breakpoint-up') {
-  @include it('wraps content in a min-width query') {
-    @include assert() {
-      @include output() {
-        @include media-breakpoint-up(md, $g) {
-          .t {
-            color: red;
-          }
-        }
-      }
-      @include expect() {
-        @media (min-width: 768px) {
-          .t {
-            color: red;
-          }
-        }
-      }
-    }
-  }
-
-  @include it('emits content directly for the zero breakpoint') {
-    @include assert() {
-      @include output() {
-        @include media-breakpoint-up(xs, $g) {
-          .t {
-            color: red;
-          }
-        }
-      }
-      @include expect() {
-        .t {
-          color: red;
-        }
-      }
-    }
-  }
-}
-
-@include describe('media-breakpoint-down') {
-  @include it('wraps content in a max-width query (value - 0.02px)') {
-    @include assert() {
-      @include output() {
-        @include media-breakpoint-down(md, $g) {
-          .t {
-            color: red;
-          }
-        }
-      }
-      @include expect() {
-        @media (max-width: 767.98px) {
-          .t {
-            color: red;
-          }
-        }
-      }
-    }
-  }
-
-  @include it('emits content directly for the zero breakpoint') {
-    @include assert() {
-      @include output() {
-        @include media-breakpoint-down(xs, $g) {
-          .t {
-            color: red;
-          }
-        }
-      }
-      @include expect() {
-        .t {
-          color: red;
-        }
-      }
-    }
-  }
-}
-
-@include describe('media-breakpoint-between') {
-  @include it('combines a min-width and a max-width query') {
-    @include assert() {
-      @include output() {
-        @include media-breakpoint-between(sm, md, $g) {
-          .t {
-            color: red;
-          }
-        }
-      }
-      @include expect() {
-        @media (min-width: 576px) and (max-width: 767.98px) {
-          .t {
-            color: red;
-          }
-        }
-      }
-    }
-  }
-}
-
-@include describe('media-breakpoint-only') {
-  @include it('spans from the breakpoint min to the next breakpoint max') {
-    @include assert() {
-      @include output() {
-        @include media-breakpoint-only(md, $g) {
-          .t {
-            color: red;
-          }
-        }
-      }
-      @include expect() {
-        @media (min-width: 768px) and (max-width: 991.98px) {
-          .t {
-            color: red;
-          }
-        }
-      }
-    }
-  }
-}
-
-@include describe('media-breakpoint-down-than') {
-  @include it('targets everything below the previous breakpoint') {
-    @include assert() {
-      @include output() {
-        @include media-breakpoint-down-than(md, $g) {
-          .t {
-            color: red;
-          }
-        }
-      }
-      @include expect() {
-        @media (max-width: 575.98px) {
-          .t {
-            color: red;
-          }
-        }
-      }
-    }
-  }
-
-  @include it('emits content directly when there is no previous breakpoint') {
-    @include assert() {
-      @include output() {
-        @include media-breakpoint-down-than(xs, $g) {
-          .t {
-            color: red;
-          }
-        }
-      }
-      @include expect() {
-        .t {
-          color: red;
-        }
-      }
-    }
-  }
-
-  // Names that don't exist in the global $grid-breakpoints at all: this only
-  // resolves if $breakpoints actually reaches the breakpoint-prev() lookup,
-  // not just the breakpoint-max() one.
-  $custom: (
-    tablet: 0,
-    desktop: 900px,
-  );
-
-  @include it('resolves the previous breakpoint from a custom $breakpoints map') {
-    @include assert() {
-      @include output() {
-        @include media-breakpoint-down-than(desktop, $custom) {
-          .t {
-            color: red;
-          }
-        }
-      }
-      @include expect() {
-        .t {
-          color: red;
-        }
-      }
-    }
-  }
-}

package/scss/tests/_mixins-bootstrap.test.scss

@@ -1,55 +0,0 @@
-// Output tests for the self-contained Bootstrap-layer mixins. These have no
-// dependency on project variables, so they are pulled in directly by path.
-// `output()` / `expect()` come from the `true` module (injected by the runner).
-
-@use '../mixins/bootstrap/clearfix' as *;
-@use '../mixins/bootstrap/visually-hidden' as *;
-
-@include describe('clearfix mixin') {
-  @include it('emits a clearing ::after pseudo-element') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include clearfix();
-        }
-      }
-      @include expect() {
-        .t::after {
-          display: block;
-          clear: both;
-          content: '';
-        }
-      }
-    }
-  }
-}
-
-@include describe('visually-hidden mixin') {
-  @include it('hides the element while keeping it accessible') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include visually-hidden();
-        }
-      }
-      @include expect() {
-        .t {
-          width: 1px !important;
-          height: 1px !important;
-          padding: 0 !important;
-          margin: -1px !important;
-          overflow: hidden !important;
-          clip: rect(0, 0, 0, 0) !important;
-          white-space: nowrap !important;
-          border: 0 !important;
-        }
-        .t:not(caption) {
-          position: absolute !important;
-        }
-        .t * {
-          overflow: hidden !important;
-        }
-      }
-    }
-  }
-}

package/scss/tests/_mixins.test.scss

@@ -1,208 +0,0 @@
-// Output tests for the Tabler mixins in scss/mixins/_mixins.scss.
-//
-// `@use "../mixins/mixins"` transitively pulls in the real settings/variables
-// chain (all relative to that file, so no extra load paths are needed), which
-// means the assertions run against real values — the real `$h5-font-size`,
-// etc. — instead of fixtures. Custom properties are expected unprefixed: the
-// `--tblr-` prefix is added later, by the css pipeline (.build/css-var-prefix.ts).
-
-@use '../mixins/mixins' as *;
-
-@include describe('subheader mixin') {
-  @include it('outputs the full subheader with colour and line-height') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include subheader();
-        }
-      }
-      @include expect() {
-        .t {
-          font-size: 0.75rem;
-          font-weight: var(--font-weight-medium);
-          text-transform: uppercase;
-          letter-spacing: 0.04em;
-          line-height: 1rem;
-          color: var(--secondary);
-        }
-      }
-    }
-  }
-
-  @include it('drops colour and line-height when the flags are false') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include subheader($include-color: false, $include-line-height: false);
-        }
-      }
-      @include expect() {
-        .t {
-          font-size: 0.75rem;
-          font-weight: var(--font-weight-medium);
-          text-transform: uppercase;
-          letter-spacing: 0.04em;
-        }
-      }
-    }
-  }
-}
-
-@include describe('autodark-image mixin') {
-  @include it('inverts the image via filter') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include autodark-image;
-        }
-      }
-      @include expect() {
-        .t {
-          filter: brightness(0) invert(1);
-        }
-      }
-    }
-  }
-}
-
-@include describe('elements-list mixin') {
-  @include it('sets up a wrapping flex list with the default gap') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include elements-list();
-        }
-      }
-      @include expect() {
-        .t {
-          --list-gap: 0.5rem;
-          display: flex;
-          flex-wrap: wrap;
-          gap: var(--list-gap);
-        }
-      }
-    }
-  }
-
-  @include it('honours a custom gap argument') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include elements-list(1rem);
-        }
-      }
-      @include expect() {
-        .t {
-          --list-gap: 1rem;
-          display: flex;
-          flex-wrap: wrap;
-          gap: var(--list-gap);
-        }
-      }
-    }
-  }
-}
-
-@include describe('focus-ring mixin') {
-  @include it('outputs the ring without a border by default') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include focus-ring();
-        }
-      }
-      @include expect() {
-        .t {
-          outline: 0;
-          box-shadow:
-            0 0 0 2px var(--primary),
-            0 0 0 0.25rem color-mix(in srgb, var(--primary) 25%, transparent);
-        }
-      }
-    }
-  }
-
-  @include it('adds a border colour when requested') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include focus-ring($show-border: true);
-        }
-      }
-      @include expect() {
-        .t {
-          outline: 0;
-          box-shadow:
-            0 0 0 2px var(--primary),
-            0 0 0 0.25rem color-mix(in srgb, var(--primary) 25%, transparent);
-          border-color: color-mix(in srgb, var(--primary) 25%, transparent);
-        }
-      }
-    }
-  }
-}
-
-@include describe('media-print mixin') {
-  @include it('wraps content in a print media query') {
-    @include assert() {
-      @include output() {
-        @include media-print {
-          .x {
-            display: none;
-          }
-        }
-      }
-      @include expect() {
-        @media print {
-          .x {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
-
-@include describe('scrollbar mixin') {
-  // The mixin resolves `&` to the current selector (or `*` at root); nested here,
-  // every rule is prefixed with `.scroll`. Also covers the reduced-motion query
-  // injected by the transition mixin.
-  @include it('emits the webkit scrollbar rule set') {
-    @include assert() {
-      @include output() {
-        .scroll {
-          @include scrollbar;
-        }
-      }
-      @include expect() {
-        .scroll {
-          scrollbar-color: color-mix(in srgb, var(--scrollbar-color, var(--body-color)) 20%, transparent) transparent;
-        }
-        .scroll::-webkit-scrollbar {
-          width: 1rem;
-          height: 1rem;
-          transition: background 0.3s;
-        }
-        @media (prefers-reduced-motion: reduce) {
-          .scroll::-webkit-scrollbar {
-            transition: none;
-          }
-        }
-        .scroll::-webkit-scrollbar-thumb {
-          border-radius: 1rem;
-          border: 5px solid transparent;
-          box-shadow: inset 0 0 0 1rem color-mix(in srgb, var(--scrollbar-color, var(--body-color)) 20%, transparent);
-        }
-        .scroll::-webkit-scrollbar-track {
-          background: transparent;
-        }
-        .scroll:hover::-webkit-scrollbar-thumb {
-          box-shadow: inset 0 0 0 1rem color-mix(in srgb, var(--scrollbar-color, var(--body-color)) 40%, transparent);
-        }
-        .scroll::-webkit-scrollbar-corner {
-          background: transparent;
-        }
-      }
-    }
-  }
-}

package/scss/tests/_rfs.test.scss

@@ -1,30 +0,0 @@
-// Tests for the RFS (responsive font sizing) helper functions in
-// scss/mixins/bootstrap/_rfs.scss. Both build their result via string
-// concatenation, so they return unquoted strings (compared as strings here).
-//
-// `rfs-value` gives the static value (px normalised to rem); `rfs-fluid-value`
-// gives the fluid value — unchanged below the base size, a responsive `calc()`
-// above it.
-
-@use '../mixins/bootstrap/rfs' as *;
-
-@include describe('rfs-value') {
-  @include it('passes rem values through and keeps 0') {
-    @include assert-equal(rfs-value(2rem), '2rem');
-    @include assert-equal(rfs-value(0), '0');
-  }
-
-  @include it('normalises px to rem') {
-    @include assert-equal(rfs-value(20px), '1.25rem');
-  }
-}
-
-@include describe('rfs-fluid-value') {
-  @include it('leaves values at or below the base size unchanged') {
-    @include assert-equal(rfs-fluid-value(1rem), '1rem');
-  }
-
-  @include it('produces a responsive calc() above the base size') {
-    @include assert-equal(rfs-fluid-value(3rem), 'calc(1.425rem + 2.1vw)');
-  }
-}

package/scss/tests/_str-replace.test.scss

@@ -1,34 +0,0 @@
-// Unit tests for the `str-replace($string, $search, $replace: '')` function
-// defined in scss/mixins/_functions.scss.
-//
-// The file is picked up automatically by scss.test.mjs — no manual list.
-// `describe`, `it` and `assert-equal` come from the `true` module, which the
-// runner injects for us.
-
-@use '../mixins/functions' as *;
-
-@include describe('str-replace') {
-  @include it('replaces a single occurrence') {
-    @include assert-equal(str-replace('a-b-c', '-', '_'), 'a_b_c');
-  }
-
-  @include it('replaces every occurrence, not just the first') {
-    @include assert-equal(str-replace('a.b.c.d', '.', '/'), 'a/b/c/d');
-  }
-
-  @include it('returns the string unchanged when the search is not found') {
-    @include assert-equal(str-replace('hello world', 'x', 'y'), 'hello world');
-  }
-
-  @include it('removes the search string when no replacement is given') {
-    @include assert-equal(str-replace('1,000,000', ','), '1000000');
-  }
-
-  @include it('handles a replacement longer than the search string') {
-    @include assert-equal(str-replace('aaa', 'a', 'bb'), 'bbbbbb');
-  }
-
-  @include it('returns an empty string unchanged') {
-    @include assert-equal(str-replace('', '-', '_'), '');
-  }
-}

package/scss/tests/_transition.test.scss

@@ -1,43 +0,0 @@
-// Output tests for the `transition` mixin in scss/mixins/bootstrap/_transition.scss.
-// With `$enable-transitions` and `$enable-reduced-motion` both true (the
-// defaults), a real transition also emits a `prefers-reduced-motion` reset —
-// except when the value itself is `none`.
-
-@use '../mixins/bootstrap/transition' as *;
-
-@include describe('transition') {
-  @include it('emits the transition plus a reduced-motion reset') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include transition(color 0.3s);
-        }
-      }
-      @include expect() {
-        .t {
-          transition: color 0.3s;
-        }
-        @media (prefers-reduced-motion: reduce) {
-          .t {
-            transition: none;
-          }
-        }
-      }
-    }
-  }
-
-  @include it('skips the reduced-motion reset when the value is none') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include transition(none);
-        }
-      }
-      @include expect() {
-        .t {
-          transition: none;
-        }
-      }
-    }
-  }
-}