@esportsplus/ui 0.57.0 → 0.58.0

package/src/{css-utilities → modifiers}/scrollbar/scss/variables.scss

@@ -1,40 +1,47 @@
 @use '/tokens';
 
-// Scoped descendants inherit defaults and root overrides, even when they also carry the base utility.
-.--scrollbar:not(:where(.--scrollbar-scope *)),
-.--scrollbar-scope {
-    // Share of the hover growth on the window-edge side: 0 hugs the edge, 0.5 grows both ways.
-    --scrollbar-align: 0;
-    --scrollbar-behavior: smooth;
-    --scrollbar-color-default: var(--color-black-400);
-    --scrollbar-color-hover: var(--color-black-300);
-    --scrollbar-color-pressed: var(--color-black-500);
-    --scrollbar-overscroll: contain;
-    --scrollbar-rail-color: transparent;
-    --scrollbar-size: 6px;
-    // Fallback for browsers that can't size the bar through --scrollbar-size.
-    --scrollbar-width: thin;
-}
-
 .--scrollbar {
     @include tokens.state-utility('scrollbar-color', tokens.$colors);
 
     &-auto {
         // An `auto` size can't feed the proportional radius.
         --scrollbar-border-radius: 3px;
+        --scrollbar-offset: 0px;
+        --scrollbar-growth: 0px;
         --scrollbar-size: auto;
+        --scrollbar-track-size: 0px;
         --scrollbar-width: auto;
     }
 
     &-blur {
-        --scroll-blur: 4px;
+        --scrollbar-blur: var(--blur-400);
         // Move the painted edges over scrollport padding without changing the sticky constraints or layout.
-        --scroll-blur-offset-end: 0px;
-        --scroll-blur-offset-start: 0px;
-        --scroll-blur-size: 3lh;
+        --scrollbar-blur-offset-end: 0px;
+        --scrollbar-blur-offset-start: 0px;
+        --scrollbar-blur-size: 3lh;
     }
 
     &-fade {
-        --scroll-fade-size: 2lh;
+        --scrollbar-fade-size: 2lh;
     }
 }
+
+// Scoped descendants inherit defaults and root overrides, even when they also carry the base utility.
+.--scrollbar:not(:where(.--scrollbar-scope *)),
+.--scrollbar-scope {
+    // Share of the hover growth on the window-edge side: 0 hugs the edge, 0.5 grows both ways.
+    --scrollbar-align: 0.5;
+    --scrollbar-behavior: smooth;
+    --scrollbar-color-default: var(--surface-border-default);
+    --scrollbar-color-hover: var(--surface-border-hover);
+    --scrollbar-color-pressed: var(--surface-border-pressed);
+    // Gap between the thumb and the window edge, kept when the thumb grows.
+    --scrollbar-offset: calc(var(--size-100) / 4);
+    --scrollbar-overscroll: contain;
+    --scrollbar-rail-color: transparent;
+    --scrollbar-size: 4px;
+    // Keeps the thumb clear of the track's ends.
+    --scrollbar-track-inset: calc(var(--size-100) / 2);
+    // Fallback for browsers that can't size the bar through --scrollbar-size.
+    --scrollbar-width: thin;
+}

package/src/normalize/scss/index.scss

@@ -1,3 +1,4 @@
+@use 'css-utilities/font/geist';
 @use 'modern-normalize/modern-normalize.css';
 
 button,
@@ -5,8 +6,8 @@ input,
 select,
 textarea {
     background: transparent;
-    border-radius: 0;
     border: 0;
+    border-radius: 0;
     font-family: inherit;
     font-size: inherit;
     margin: 0;
@@ -28,7 +29,8 @@ code,
 kbd,
 pre,
 samp {
-    font-family: var(--font-family-mono);
+    @extend %font-geist-mono;
+    font-family: var(--font-family);
 }
 
 form {

package/src/shared/scss/color-weights.scss

@@ -0,0 +1,19 @@
+@use 'sass:math';
+
+
+// A color's weights from its one written value: 300 a step lighter, 400 itself and 500 a step darker, keeping its hue
+// and chroma, so hover and press move every color by the same amount. Each mode's step is in lightness points.
+@mixin color-weights($name, $light, $dark) {
+    $dark: math.div($dark, 100);
+    $light: math.div($light, 100);
+
+    --color-#{$name}-300: light-dark(
+        oklch(from var(--color-#{$name}) min(1, l + #{$light}) c h),
+        oklch(from var(--color-#{$name}) min(1, l + #{$dark}) c h)
+    );
+    --color-#{$name}-400: var(--color-#{$name});
+    --color-#{$name}-500: light-dark(
+        oklch(from var(--color-#{$name}) max(0, l - #{$light}) c h),
+        oklch(from var(--color-#{$name}) max(0, l - #{$dark}) c h)
+    );
+}

package/src/shared/scss/index.scss

@@ -1,16 +1,5 @@
-@forward 'absolute';
-@forward 'anchor' as anchor-*;
-@forward 'background';
-@forward 'border';
-@forward 'color';
+@forward 'color-weights';
 @forward 'css-variables';
-@forward 'drag';
-@forward 'hidden';
-@forward 'icon';
-@forward 'layer';
 @forward 'list' as list-*;
 @forward 'map' as map-*;
-@forward 'position';
-@forward 'reset';
 @forward 'string' as string-*;
-@forward 'text';

package/src/tokens/scss/blur.scss

@@ -0,0 +1,5 @@
+$blur: (
+    300: 2px,
+    400: 4px,
+    500: 8px
+);

package/src/tokens/scss/color.scss

@@ -2,57 +2,81 @@
 @use '../../shared/scss/list';
 
 
+// The palette, each color written once as its 400; shared 'color-weights()' derives the rest where the color is used.
 $color: (
-    'black': (
-        300: oklch(18.84% 0.0306 277.2),
-        400: oklch(11.47% 0.0361 268.9),
-        500: oklch(10.04% 0.0287 263.4)
-    ),
-    'blue': (
-        300: oklch(54.49% 0.2514 268.2),
-        400: oklch(51.45% 0.2712 266.6),
-        500: oklch(48.45% 0.2617 266.3)
-    ),
-    'border': (
-        300: oklch(92.9% 0.013 255.508),
-        400: oklch(86.9% 0.022 252.894),
-        500: oklch(70.4% 0.04 256.788)
-    ),
-    'green': (
-        300: oklch(87.03% 0.2708 144.9),
-        400: oklch(83.70% 0.2711 144.0),
-        500: oklch(78.97% 0.2560 144.0)
-    ),
-    'grey': (
-        300: oklch(0.9842 0.0034 247.86),
-        400: oklch(0.9683 0.0069 247.9),
-        500: oklch(0.9288 0.0126 255.51)
-    ),
-    'purple': (
-        300: oklch(53.29% 0.2877 292.5),
-        400: oklch(51.66% 0.2929 289.7),
-        500: oklch(48.63% 0.2754 289.9)
-    ),
-    'red': (
-        300: oklch(64.46% 0.2412 23.8),
-        400: oklch(62.87% 0.2567 27.7),
-        500: oklch(59.10% 0.2413 27.6)
-    ),
-    'text': (
-        300: oklch(55.1% 0.027 264.364),
-        400: oklch(37.3% 0.034 259.733),
-        500: oklch(21% 0.034 264.665)
-    ),
-    'white': (
-        300: oklch(100% 0 0),
-        400: oklch(99.2% 0 0),
-        500: oklch(98.5% 0 0)
+    'black': oklch(16% 0.0102 257),
+    'blue': oklch(51.45% 0.2712 266.6),
+    'green': oklch(83.7% 0.2711 144),
+    'grey': oklch(92% 0.0093 257),
+    'purple': oklch(51.66% 0.2929 289.7),
+    'red': oklch(62.87% 0.2567 27.7),
+    'white': oklch(98% 0.0032 257),
+    'yellow': oklch(85.2% 0.199 91.9)
+);
+
+$colors: list.join(primary text, map.keys($color));
+
+// Everything that changes with the mode.
+//
+// 'color' holds the only colors that do; everything else is the fixed palette above, and each component picks its own
+// pair for light and dark. 'surface' is the page, the base every surface level steps from, kept below white in light so
+// raised surfaces have room to climb to it; 'primary' is its opposite, black on a light page and white on a dark one,
+// the ink that edges and tints mix in, weighted like the palette; and 'text', one color the theme takes as 400 and
+// derives 300 (muted) and 500 (strongest) from where the color is used. Neutrals and text share one hue, 257, each
+// tinted to 24% of the chroma the gamut allows at its lightness, so every tone carries the same faint blue; black takes
+// three quarters of that, 18%, since the dark surfaces step up from it and the tint grows with them. Light text on a
+// dark page reads weaker than its WCAG ratio, so dark 400 sits halfway between light 400's ratio and its perceived
+// (APCA) contrast.
+//
+// 'surface' is the ladder in lightness points, every step moving the level's default the same way in both modes:
+// active, hover and each raised level lighter, pressed and each sunken level darker. 'border' moves each state's
+// background for that state's border, darker in light and lighter in dark; 'color' sets how far every color's 300 and
+// 500 sit from its 400, lighter for hover and darker for press. Its 'shadow' is a shadow falling on a background:
+// 'depth' the shadow color's lightness as a share of that background's, its chroma scaled alike, so a shadow is the
+// background deepened in its own hue; and 'opacity' the percent a Tailwind 10% shadow step takes.
+//
+// 'text' is a contrast ratio, not points: text 300 and 500 each hold it against 400.
+$themes: (
+    dark: (
+        color: (
+            primary: map.get($color, 'white'),
+            surface: map.get($color, 'black'),
+            text: oklch(90% 0.0162 257)
+        ),
+        surface: (
+            active: 2,
+            border: 6,
+            color: 3,
+            hover: 1,
+            pressed: 4,
+            raised: 2,
+            shadow: (
+                depth: 0.24,
+                opacity: 16
+            ),
+            sunken: 2
+        ),
+        text: 1.5
     ),
-    'yellow': (
-        300: oklch(90.5% 0.182 98.1),
-        400: oklch(85.2% 0.199 91.9),
-        500: oklch(79.5% 0.184 86.0)
+    light: (
+        color: (
+            primary: map.get($color, 'black'),
+            surface: map.get($color, 'white'),
+            text: oklch(36% 0.0325 257)
+        ),
+        surface: (
+            active: 1,
+            border: 4,
+            color: 3,
+            hover: 0.5,
+            pressed: 2,
+            raised: 1,
+            shadow: (
+                depth: 0.24,
+                opacity: 8
+            ),
+            sunken: 1
+        ),
+        text: 1.5
     )
 );
-
-$colors: list.join(primary secondary, map.keys($color));

package/src/tokens/scss/index.scss

@@ -1,8 +1,7 @@
+@forward 'blur';
 @forward 'border-radius';
 @forward 'border-width';
-@forward 'box-shadow';
 @forward 'color';
-@forward 'font-family';
 @forward 'font-size';
 @forward 'size';
 @forward 'spacer';

package/src/tokens/scss/size.scss

@@ -13,8 +13,6 @@ $size: (
     700: scale.px(scale.step(1.5)),
     800: scale.px(scale.step(2)),
     900: scale.px(scale.step(2.5)),
-
-    0px: 0px,
 );
 
 // Snap the derived sizes to whole CSS pixels without changing the ratio engine.

package/src/tokens/scss/state.scss

@@ -6,8 +6,8 @@
  *
  *  Desired Result:
  *  - Default Colors Assigned To Element;
- *  - On 'highlight' Or ':hover' Display A Slightly Brighter Version Of
- *    The Default Color;
+ *  - On 'highlight' Or ':hover', And While Active, Display A Slightly
+ *    Brighter Version Of The Default Color;
  *  - On 'pressed' Or ':active' Display Slightly Darker Version Of The
  *    Default Color;
  *
@@ -77,6 +77,7 @@ $state: (
     }
 
     @each $key in $keys {
+        // 400, every color's base, at rest; 300 on hover and while active; 500 pressed.
         &-#{$key} {
             --#{$property}-active: var(--color-#{$key}-300);
             --#{$property}-default: var(--color-#{$key}-400);

package/src/tokens/scss/transition.scss

@@ -1,4 +1,21 @@
 $transition: (
-    duration: 0.16s,
-    timing-function: cubic-bezier(0.4, 0, 0.2, 1)
+    // Springs sampled into linear(), so each duration is the spring's full settle. It arrives visually at about 60% of
+    // that (fast 80ms, moderate 160ms, slow 240ms), and each exit settles a tier quicker than its entrance.
+    duration: (
+        fast: 130ms,
+        fast-exit: 100ms,
+        moderate: 260ms,
+        moderate-exit: 190ms,
+        slow: 350ms,
+        slow-exit: 260ms
+    ),
+    // 'spring' is critically damped, for hovers, toggles, dropdowns and tabs; 'spring-bounce' (bounce 0.12) is for
+    // dialogs and drawers. 'out' (a quint) settles fills, fades and slides that start fast; 'in-out' eases both ends of
+    // a move that starts and stops on screen.
+    easing: (
+        in-out: cubic-bezier(0.42, 0, 0.58, 1),
+        out: cubic-bezier(0.23, 1, 0.32, 1),
+        spring: linear(0, 0.0491, 0.1571, 0.2846, 0.4106, 0.5248, 0.6231, 0.7049, 0.7714, 0.8243, 0.866, 0.8984, 0.9234, 0.9425, 0.957, 0.9679, 0.9762, 0.9824, 0.987, 0.9904, 0.9929, 0.9948, 0.9962, 0.9972, 1),
+        spring-bounce: linear(0, 0.0429, 0.1422, 0.2659, 0.3936, 0.5136, 0.6199, 0.71, 0.7838, 0.8427, 0.8885, 0.9232, 0.9489, 0.9675, 0.9806, 0.9896, 0.9955, 0.9992, 1.0013, 1.0025, 1.0029, 1.0029, 1.0027, 1.0024, 1)
+    )
 );

package/storage/svg/monitor.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1.5" y="2.25" width="13" height="9" rx="1.5"/><path d="M5.5 14h5M8 11.25V14"/></svg>

package/storage/svg/moon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2a4 4 0 0 0 6 6 6 6 0 1 1-6-6Z"/></svg>

package/storage/svg/pin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>

package/storage/svg/sun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="2.75"/><path d="M8 1.25v1.25M8 13.5v1.25M3.23 3.23l.88.88M11.89 11.89l.88.88M1.25 8H2.5M13.5 8h1.25M4.11 11.89l-.88.88M12.77 3.23l-.88.88"/></svg>

package/vite.config.ts

@@ -3,15 +3,34 @@ import { defineConfig, type Plugin } from 'vite';
 import { resolve } from 'path';
 import autoprefixer from 'autoprefixer';
 import shelljs from 'shelljs';
+import type { Targets } from 'lightningcss';
 
 
 const BACKSLASHES = /\\/g;
 
+// The first releases with 'light-dark()', as [major, minor]. Below them Lightning CSS swaps it for variables resolved
+// where the theme declares them, on the root, so a nested 'data-theme' could no longer flip its subtree.
+const BROWSERS: Record<'chrome' | 'edge' | 'firefox' | 'ios_saf' | 'safari', [number, number]> = {
+    chrome: [123, 0],
+    edge: [123, 0],
+    firefox: [120, 0],
+    ios_saf: [17, 5],
+    safari: [17, 5]
+};
+
+// The same floor in esbuild's form, which Vite minifies CSS to.
+const CSS_TARGET = Object.entries(BROWSERS).map(([name, [major, minor]]) => `${name === 'ios_saf' ? 'ios' : name}${major}.${minor}`);
+
+// Lightning CSS packs each version as major << 16 | minor << 8.
+const CSS_TARGETS: Targets = Object.fromEntries(
+    Object.entries(BROWSERS).map(([name, [major, minor]]) => [name, (major << 16) | (minor << 8)])
+);
+
 
 // Every stylesheet compiled from the library's source sits in the cascade layer its top-level folder names, in the
 // order 'layer.scss' declares. Wrapped as it compiles rather than once bundled, so the docs, which build from source,
 // layer exactly as the published files do; their own styles, outside it, stay unlayered and override the library.
-const LAYERS = ['components', 'css-utilities', 'normalize', 'themes'];
+const LAYERS = ['components', 'modifiers', 'normalize'];
 
 // Minification only keeps '/*! ... */' license comments at the top level, so they stay outside the layer.
 const LICENSE = /^(?:\s*\/\*![\s\S]*?\*\/)+/;
@@ -21,6 +40,9 @@ const NOT_CSS = /[?&](?:raw|sharedworker|url|worker)\b/;
 
 const SOURCE = resolve(import.meta.dirname, 'src').replace(BACKSLASHES, '/') + '/';
 
+// Stylesheets reach the placeholders as 'css-utilities/<name>'.
+const CSS_UTILITIES = { find: /^css-utilities\//, replacement: SOURCE + 'css-utilities/' };
+
 
 const layers: Plugin = {
     name: '@esportsplus/ui-layers',
@@ -49,13 +71,12 @@ export default defineConfig(() => {
         base: './',
         build: {
             cssMinify: 'lightningcss',
+            cssTarget: CSS_TARGET,
             outDir: 'build',
             rollupOptions: {
                 input: [
                     ...glob.sync('./src/normalize/scss/index.scss'),
-                    ...glob.sync('./src/{components,css-utilities,themes/dark,themes/light}/*/scss/index.scss'),
-                    ...glob.sync('./src/css-utilities/font/*/scss/index.scss'),
-                    ...glob.sync('./src/css-utilities/index.scss')
+                    ...glob.sync('./src/{components,modifiers}/*/scss/index.scss')
                 ],
                 output: {
                     assetFileNames: ({ originalFileNames: [filename] }) => {
@@ -79,6 +100,9 @@ export default defineConfig(() => {
             }
         },
         css: {
+            lightningcss: {
+                targets: CSS_TARGETS
+            },
             postcss: {
                 plugins: [
                     autoprefixer()
@@ -86,11 +110,12 @@ export default defineConfig(() => {
             },
             transformer: 'lightningcss'
         },
-        plugins: [
-            layers
-        ]
+        plugins: [ layers ],
+        resolve: {
+            alias: [ CSS_UTILITIES ]
+        }
     };
 });
 
 
-export { layers };
+export { CSS_TARGET, CSS_TARGETS, CSS_UTILITIES, layers };

package/build/css-utilities/background/scss/index.scss

@@ -1,2 +0,0 @@
-@layer css-utilities{.--background-state{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.--background-state{--background:var(--background-active)}.--background-state:not(.--active):hover{--background:var(--background-hover)}.--background-state:not(.--active):active{--background:var(--background-pressed)}.--background-primary{--background-active:var(--color-primary-300);--background-default:var(--color-primary-400);--background-hover:var(--color-primary-300);--background-pressed:var(--color-primary-500)}.--background-secondary{--background-active:var(--color-secondary-300);--background-default:var(--color-secondary-400);--background-hover:var(--color-secondary-300);--background-pressed:var(--color-secondary-500)}.--background-black{--background-active:var(--color-black-300);--background-default:var(--color-black-400);--background-hover:var(--color-black-300);--background-pressed:var(--color-black-500)}.--background-blue{--background-active:var(--color-blue-300);--background-default:var(--color-blue-400);--background-hover:var(--color-blue-300);--background-pressed:var(--color-blue-500)}.--background-border{--background-active:var(--color-border-300);--background-default:var(--color-border-400);--background-hover:var(--color-border-300);--background-pressed:var(--color-border-500)}.--background-green{--background-active:var(--color-green-300);--background-default:var(--color-green-400);--background-hover:var(--color-green-300);--background-pressed:var(--color-green-500)}.--background-grey{--background-active:var(--color-grey-300);--background-default:var(--color-grey-400);--background-hover:var(--color-grey-300);--background-pressed:var(--color-grey-500)}.--background-purple{--background-active:var(--color-purple-300);--background-default:var(--color-purple-400);--background-hover:var(--color-purple-300);--background-pressed:var(--color-purple-500)}.--background-red{--background-active:var(--color-red-300);--background-default:var(--color-red-400);--background-hover:var(--color-red-300);--background-pressed:var(--color-red-500)}.--background-text{--background-active:var(--color-text-300);--background-default:var(--color-text-400);--background-hover:var(--color-text-300);--background-pressed:var(--color-text-500)}.--background-white{--background-active:var(--color-white-300);--background-default:var(--color-white-400);--background-hover:var(--color-white-300);--background-pressed:var(--color-white-500)}.--background-yellow{--background-active:var(--color-yellow-300);--background-default:var(--color-yellow-400);--background-hover:var(--color-yellow-300);--background-pressed:var(--color-yellow-500)}.--background-default{--background:var(--background-default);--background-active:var(--background-default);--background-hover:var(--background-default);--background-pressed:var(--background-default)}}
-/*$vite$:1*/

package/build/css-utilities/border/scss/index.scss

@@ -1,2 +0,0 @@
-@layer css-utilities{.--border-state{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--active.--border-state{--border-color:var(--border-color-active)}.--border-state:not(.--active):hover{--border-color:var(--border-color-hover)}.--border-state:not(.--active):active{--border-color:var(--border-color-pressed)}.--border-primary{--border-color-active:var(--color-primary-300);--border-color-default:var(--color-primary-400);--border-color-hover:var(--color-primary-300);--border-color-pressed:var(--color-primary-500)}.--border-secondary{--border-color-active:var(--color-secondary-300);--border-color-default:var(--color-secondary-400);--border-color-hover:var(--color-secondary-300);--border-color-pressed:var(--color-secondary-500)}.--border-black{--border-color-active:var(--color-black-300);--border-color-default:var(--color-black-400);--border-color-hover:var(--color-black-300);--border-color-pressed:var(--color-black-500)}.--border-blue{--border-color-active:var(--color-blue-300);--border-color-default:var(--color-blue-400);--border-color-hover:var(--color-blue-300);--border-color-pressed:var(--color-blue-500)}.--border-border{--border-color-active:var(--color-border-300);--border-color-default:var(--color-border-400);--border-color-hover:var(--color-border-300);--border-color-pressed:var(--color-border-500)}.--border-green{--border-color-active:var(--color-green-300);--border-color-default:var(--color-green-400);--border-color-hover:var(--color-green-300);--border-color-pressed:var(--color-green-500)}.--border-grey{--border-color-active:var(--color-grey-300);--border-color-default:var(--color-grey-400);--border-color-hover:var(--color-grey-300);--border-color-pressed:var(--color-grey-500)}.--border-purple{--border-color-active:var(--color-purple-300);--border-color-default:var(--color-purple-400);--border-color-hover:var(--color-purple-300);--border-color-pressed:var(--color-purple-500)}.--border-red{--border-color-active:var(--color-red-300);--border-color-default:var(--color-red-400);--border-color-hover:var(--color-red-300);--border-color-pressed:var(--color-red-500)}.--border-text{--border-color-active:var(--color-text-300);--border-color-default:var(--color-text-400);--border-color-hover:var(--color-text-300);--border-color-pressed:var(--color-text-500)}.--border-white{--border-color-active:var(--color-white-300);--border-color-default:var(--color-white-400);--border-color-hover:var(--color-white-300);--border-color-pressed:var(--color-white-500)}.--border-yellow{--border-color-active:var(--color-yellow-300);--border-color-default:var(--color-yellow-400);--border-color-hover:var(--color-yellow-300);--border-color-pressed:var(--color-yellow-500)}.--border-default{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--border-radius-responsive{--border-radius:calc(progress((100vi - 100cqi) / 2, 0px, var(--gap-horizontal)) * var(--border-radius))}}
-/*$vite$:1*/

package/build/css-utilities/color/scss/index.scss

@@ -1,2 +0,0 @@
-@layer css-utilities{.--color-state{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default)}.--active.--color-state{--color:var(--color-active)}.--color-state:not(.--active):hover{--color:var(--color-hover)}.--color-state:not(.--active):active{--color:var(--color-pressed)}.--color-primary{--color-active:var(--color-primary-300);--color-default:var(--color-primary-400);--color-hover:var(--color-primary-300);--color-pressed:var(--color-primary-500)}.--color-secondary{--color-active:var(--color-secondary-300);--color-default:var(--color-secondary-400);--color-hover:var(--color-secondary-300);--color-pressed:var(--color-secondary-500)}.--color-black{--color-active:var(--color-black-300);--color-default:var(--color-black-400);--color-hover:var(--color-black-300);--color-pressed:var(--color-black-500)}.--color-blue{--color-active:var(--color-blue-300);--color-default:var(--color-blue-400);--color-hover:var(--color-blue-300);--color-pressed:var(--color-blue-500)}.--color-border{--color-active:var(--color-border-300);--color-default:var(--color-border-400);--color-hover:var(--color-border-300);--color-pressed:var(--color-border-500)}.--color-green{--color-active:var(--color-green-300);--color-default:var(--color-green-400);--color-hover:var(--color-green-300);--color-pressed:var(--color-green-500)}.--color-grey{--color-active:var(--color-grey-300);--color-default:var(--color-grey-400);--color-hover:var(--color-grey-300);--color-pressed:var(--color-grey-500)}.--color-purple{--color-active:var(--color-purple-300);--color-default:var(--color-purple-400);--color-hover:var(--color-purple-300);--color-pressed:var(--color-purple-500)}.--color-red{--color-active:var(--color-red-300);--color-default:var(--color-red-400);--color-hover:var(--color-red-300);--color-pressed:var(--color-red-500)}.--color-text{--color-active:var(--color-text-300);--color-default:var(--color-text-400);--color-hover:var(--color-text-300);--color-pressed:var(--color-text-500)}.--color-white{--color-active:var(--color-white-300);--color-default:var(--color-white-400);--color-hover:var(--color-white-300);--color-pressed:var(--color-white-500)}.--color-yellow{--color-active:var(--color-yellow-300);--color-default:var(--color-yellow-400);--color-hover:var(--color-yellow-300);--color-pressed:var(--color-yellow-500)}.--color-default{--color:var(--color-default);--color-active:var(--color-default);--color-hover:var(--color-default);--color-pressed:var(--color-default)}}
-/*$vite$:1*/

package/build/css-utilities/flex/scss/index.scss

@@ -1,2 +0,0 @@
-@layer css-utilities{.--flex-center,.--flex-column,.--flex-end,.--flex-horizontal,.--flex-horizontal-space-between,.--flex-row,.--flex-start,.--flex-vertical,.--flex-vertical-space-between{--gap-horizontal:0px;--gap-vertical:0px}.--flex-center,.--flex-end,.--flex-horizontal,.--flex-start,.--flex-vertical{gap:var(--gap-vertical) var(--gap-horizontal);flex-flow:wrap;display:flex}.--flex-center,.--flex-horizontal{justify-content:center}.--flex-center,.--flex-vertical{align-items:center}.--flex-column,.--flex-fill,.--flex-fixed,.--flex-row{display:flex}.--flex-column{gap:var(--gap-vertical) 0px;flex-flow:column}.--flex-end{justify-content:flex-end}.--flex-fill{flex:1;min-width:0}.--flex-fixed{flex:0 0 var(--width)}.--flex-row{gap:0px var(--gap-horizontal);flex-flow:row}.--flex-start{justify-content:flex-start}}
-/*$vite$:1*/

package/build/css-utilities/font/geist/index.d.ts

@@ -1 +0,0 @@
-import './scss/index.scss';

package/build/css-utilities/font/geist/index.js

@@ -1 +0,0 @@
-import './scss/index.scss';

package/build/css-utilities/font/geist/scss/index.scss

@@ -1,2 +0,0 @@
-@layer css-utilities{@font-face{font-display:swap;font-family:Geist;font-style:normal;font-weight:100 900;src:url(./Geist-Variable.woff2)format("woff2")}@font-face{font-display:swap;font-family:Geist;font-style:italic;font-weight:100 900;src:url(./Geist-Italic-Variable.woff2)format("woff2")}@font-face{font-display:swap;font-family:Geist Mono;font-style:normal;font-weight:100 900;src:url(./GeistMono-Variable.woff2)format("woff2")}@font-face{font-display:swap;font-family:Geist Mono;font-style:italic;font-weight:100 900;src:url(./GeistMono-Italic-Variable.woff2)format("woff2")}.--font-geist{--font-family:"Geist", sans-serif}.--font-geist,.--font-geist-mono{--font-weight-300:300;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600}.--font-geist-mono{--font-family:"Geist Mono", monospace}}
-/*$vite$:1*/

package/build/css-utilities/font/montserrat/index.d.ts

@@ -1 +0,0 @@
-import './scss/index.scss';

package/build/css-utilities/font/montserrat/index.js

@@ -1 +0,0 @@
-import './scss/index.scss';

package/build/css-utilities/font/montserrat/scss/index.scss

@@ -1,2 +0,0 @@
-@layer css-utilities{@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:400;src:local(Montserrat Regular),local(Montserrat-Regular),url(./Montserrat-Regular.woff2)format("woff2"),url(./Montserrat-Regular.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:400;src:local(Montserrat Italic),local(Montserrat-Italic),url(./Montserrat-Italic.woff2)format("woff2"),url(./Montserrat-Italic.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:500;src:local(Montserrat Medium),local(Montserrat-Medium),url(./Montserrat-Medium.woff2)format("woff2"),url(./Montserrat-Medium.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:500;src:local(Montserrat MediumItalic),local(Montserrat-MediumItalic),url(./Montserrat-MediumItalic.woff2)format("woff2"),url(./Montserrat-MediumItalic.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:600;src:local(Montserrat SemiBold),local(Montserrat-SemiBold),url(./Montserrat-SemiBold.woff2)format("woff2"),url(./Montserrat-SemiBold.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:600;src:local(Montserrat SemiBoldItalic),local(Montserrat-SemiBoldItalic),url(./Montserrat-SemiBoldItalic.woff2)format("woff2"),url(./Montserrat-SemiBoldItalic.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:700;src:local(Montserrat Bold),local(Montserrat Bold),url(./Montserrat-Bold.woff2)format("woff2"),url(./Montserrat-Bold.woff)format("woff")}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:700;src:local(Montserrat BoldItalic),local(Montserrat-BoldItalic),url(./Montserrat-BoldItalic.woff2)format("woff2"),url(./Montserrat-BoldItalic.woff)format("woff")}.--font-montserrat{--font-family:"Montserrat", sans-serif;--font-weight-300:400;--font-weight-400:500;--font-weight-500:600;--font-weight-600:700}}
-/*$vite$:1*/

package/build/css-utilities/glass/index.js

@@ -1,26 +0,0 @@
-import './scss/index.scss';
-function createOverlay(element, mode = 'uniform', className = '') {
-    let overlay = element.ownerDocument.createElement('div');
-    overlay.className = className ? `--glass-blur ${className}` : '--glass-blur';
-    overlay.setAttribute('aria-hidden', 'true');
-    if (mode === 'progressive') {
-        overlay.classList.add('--glass-blur-progressive');
-    }
-    for (let i = 0, count = mode === 'progressive' ? 7 : 1; i < count; i++) {
-        overlay.appendChild(element.ownerDocument.createElement('span'));
-    }
-    return overlay;
-}
-export default (mode = 'uniform') => ({
-    class: mode === 'progressive' ? ['--glass', '--glass-progressive'] : ['--glass'],
-    onconnect: (element) => {
-        let overlay = element.querySelector(':scope > .--glass-blur');
-        if (!overlay) {
-            element.appendChild(createOverlay(element, mode));
-        }
-        else if (overlay.classList.contains('--glass-blur-progressive') !== (mode === 'progressive')) {
-            overlay.replaceWith(createOverlay(element, mode));
-        }
-    }
-});
-export { createOverlay };

package/build/css-utilities/glass/scss/index.scss

@@ -1,2 +0,0 @@
-@layer css-utilities{.--glass{--blur:24px;--glass-opacity:1}.--glass-progressive{--glass-opacity:.9}@property --glass-opacity{syntax:"<number>";inherits:true;initial-value:1}.--glass{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}.--glass-blur{border-radius:inherit;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:-1;position:absolute;inset:0;overflow:hidden}.--glass-blur.--glass-blur-progressive>span:first-child{-webkit-backdrop-filter:blur(calc(var(--blur,24px) * .0730435));backdrop-filter:blur(calc(var(--blur,24px) * .0730435));-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 0%, #000 14.2857%, #000 28.5714%, transparent 42.8571%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 0%, #000 14.2857%, #000 28.5714%, transparent 42.8571%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 0%, #000 14.2857%, #000 28.5714%, transparent 42.8571%);mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 0%, #000 14.2857%, #000 28.5714%, transparent 42.8571%);z-index:1}.--glass-blur.--glass-blur-progressive>span:nth-child(2){-webkit-backdrop-filter:blur(calc(var(--blur,24px) * .108696));backdrop-filter:blur(calc(var(--blur,24px) * .108696));-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 14.2857%, #000 28.5714%, #000 42.8571%, transparent 57.1429%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 14.2857%, #000 28.5714%, #000 42.8571%, transparent 57.1429%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 14.2857%, #000 28.5714%, #000 42.8571%, transparent 57.1429%);mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 14.2857%, #000 28.5714%, #000 42.8571%, transparent 57.1429%);z-index:2}.--glass-blur.--glass-blur-progressive>span:nth-child(3){-webkit-backdrop-filter:blur(calc(var(--blur,24px) * .186087));backdrop-filter:blur(calc(var(--blur,24px) * .186087));-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 28.5714%, #000 42.8571%, #000 57.1429%, transparent 71.4286%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 28.5714%, #000 42.8571%, #000 57.1429%, transparent 71.4286%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 28.5714%, #000 42.8571%, #000 57.1429%, transparent 71.4286%);mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 28.5714%, #000 42.8571%, #000 57.1429%, transparent 71.4286%);z-index:3}.--glass-blur.--glass-blur-progressive>span:nth-child(4){-webkit-backdrop-filter:blur(calc(var(--blur,24px) * .335652));backdrop-filter:blur(calc(var(--blur,24px) * .335652));-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 42.8571%, #000 57.1429%, #000 71.4286%, transparent 85.7143%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 42.8571%, #000 57.1429%, #000 71.4286%, transparent 85.7143%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 42.8571%, #000 57.1429%, #000 71.4286%, transparent 85.7143%);mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 42.8571%, #000 57.1429%, #000 71.4286%, transparent 85.7143%);z-index:4}.--glass-blur.--glass-blur-progressive>span:nth-child(5){-webkit-backdrop-filter:blur(calc(var(--blur,24px) * .577391));backdrop-filter:blur(calc(var(--blur,24px) * .577391));-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 57.1429%, #000 71.4286%, #000 85.7143%, transparent 100%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 57.1429%, #000 71.4286%, #000 85.7143%, transparent 100%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 57.1429%, #000 71.4286%, #000 85.7143%, transparent 100%);mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 57.1429%, #000 71.4286%, #000 85.7143%, transparent 100%);z-index:5}.--glass-blur.--glass-blur-progressive>span:nth-child(6){-webkit-backdrop-filter:blur(calc(var(--blur,24px) * .857391));backdrop-filter:blur(calc(var(--blur,24px) * .857391));-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 71.4286%, #000 85.7143%, #000 100%, transparent 100%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 71.4286%, #000 85.7143%, #000 100%, transparent 100%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 71.4286%, #000 85.7143%, #000 100%, transparent 100%);mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 71.4286%, #000 85.7143%, #000 100%, transparent 100%);z-index:6}.--glass-blur.--glass-blur-progressive>span:nth-child(7){-webkit-backdrop-filter:blur(calc(var(--blur,24px) * 1));backdrop-filter:blur(calc(var(--blur,24px) * 1));-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 85.7143%, #000 100%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 85.7143%, #000 100%);-webkit-mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 85.7143%, #000 100%);mask-image:linear-gradient(var(--glass-direction,to bottom), transparent 85.7143%, #000 100%);z-index:7}.--glass-blur>span{-webkit-backdrop-filter:blur(var(--blur,24px));backdrop-filter:blur(var(--blur,24px));border-radius:inherit;opacity:var(--glass-opacity,1);position:absolute;inset:0}.--glass:has(>.--glass-blur){-webkit-backdrop-filter:none;backdrop-filter:none;isolation:isolate;position:relative}}
-/*$vite$:1*/