@esportsplus/ui 0.57.0 → 0.58.0

package/build/themes/dark/textarea.js

@@ -1,11 +0,0 @@
-import textarea from '../../components/textarea/index.js';
-export default textarea.bind({
-    attributes: {
-        class: 'textarea--primary --border --border-black --color-white',
-        style: `
-            --border-color-active: var(--color-purple-300);
-            --border-color-default: var(--color-black-300);
-            color-scheme: dark;
-        `
-    }
-});

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

@@ -1 +0,0 @@
-@use './variables';

package/src/css-utilities/background/scss/variables.scss

@@ -1,18 +0,0 @@
-@use '/shared';
-@use '/tokens';
-
-.--background {
-    @include tokens.state-utility('background', tokens.$colors);
-
-    &-default {
-        --background: var(--background-default);
-        --background-active: var(--background-default);
-        --background-hover: var(--background-default);
-        --background-pressed: var(--background-default);
-    }
-
-    &-state {
-        @extend %background-state;
-    }
-}
-

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

@@ -1 +0,0 @@
-@use './variables';

package/src/css-utilities/border/scss/variables.scss

@@ -1,23 +0,0 @@
-@use '/shared';
-@use '/tokens';
-
-.--border {
-    @include tokens.state-utility('border-color', tokens.$colors);
-
-    &-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);
-    }
-
-    &-radius {
-        &-responsive {
-            --border-radius: #{"calc( progress((100vi - 100cqi) / 2, 0px, var(--gap-horizontal)) * var(--border-radius) )"};
-        }
-    }
-
-    &-state {
-        @extend %border-state;
-    }
-}

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

@@ -1 +0,0 @@
-@use './variables';

package/src/css-utilities/color/scss/variables.scss

@@ -1,17 +0,0 @@
-@use '/shared';
-@use '/tokens';
-
-.--color {
-    @include tokens.state-utility('color', tokens.$colors);
-
-    &-default {
-        --color: var(--color-default);
-        --color-active: var(--color-default);
-        --color-hover: var(--color-default);
-        --color-pressed: var(--color-default);
-    }
-
-    &-state {
-        @extend %color-state;
-    }
-}

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

@@ -1,57 +0,0 @@
-@use 'variables';
-
-.--flex {
-    &-center,
-    &-end,
-    &-horizontal,
-    &-start,
-    &-vertical {
-        display: flex;
-        flex-flow: row wrap;
-        gap: var(--gap-vertical) var(--gap-horizontal);
-    }
-
-    &-center,
-    &-horizontal {
-        justify-content: center;
-    }
-
-    &-center,
-    &-vertical {
-        align-items: center;
-    }
-
-    &-column,
-    &-fill,
-    &-fixed,
-    &-row {
-        display: flex;
-    }
-
-    &-column {
-        flex-flow: column;
-        gap: var(--gap-vertical) 0px;
-    }
-
-    &-end {
-        justify-content: flex-end;
-    }
-
-    &-fill {
-        flex: 1;
-        min-width: 0;
-    }
-
-    &-fixed {
-        flex: 0 0 var(--width);
-    }
-
-    &-row {
-        flex-flow: row;
-        gap: 0px var(--gap-horizontal);
-    }
-
-    &-start {
-        justify-content: flex-start;
-    }
-}

package/src/css-utilities/flex/scss/variables.scss

@@ -1,16 +0,0 @@
-@use '/tokens';
-
-.--flex {
-    &-center,
-    &-column,
-    &-end,
-    &-horizontal,
-    &-horizontal-space-between,
-    &-row,
-    &-start,
-    &-vertical,
-    &-vertical-space-between {
-        --gap-horizontal: 0px;
-        --gap-vertical: 0px;
-    }
-}

package/src/css-utilities/font/geist/index.ts

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

package/src/css-utilities/font/montserrat/index.ts

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

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

@@ -1,94 +0,0 @@
-@use '/shared';
-
-
-@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;
-
-    @include shared.css-variables(font-weight, (
-        300: 400,
-        400: 500,
-        500: 600,
-        600: 700
-    ));
-}

package/src/css-utilities/glass/index.ts

@@ -1,42 +0,0 @@
-import './scss/index.scss';
-
-
-type GlassMode = 'uniform' | 'progressive';
-
-
-// Uniform glass uses one full-strength layer; progressive glass uses seven masked layers.
-function createOverlay(element: HTMLElement, mode: GlassMode = '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: GlassMode = 'uniform') => ({
-    class: mode === 'progressive' ? ['--glass', '--glass-progressive'] : ['--glass'],
-    onconnect: (element: HTMLElement) => {
-        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 };
-export type { GlassMode };

package/src/css-utilities/index.scss

@@ -1,13 +0,0 @@
-@forward './background/scss/index.scss';
-@forward './border/scss/index.scss';
-@forward './color/scss/index.scss';
-@forward './flex/scss/index.scss';
-
-@forward './font/geist/scss/index.scss';
-@forward './font/montserrat/scss/index.scss';
-
-@forward './glass/scss/index.scss';
-@forward './inline/scss/index.scss';
-@forward './scrollbar/scss/index.scss';
-@forward './skeleton/scss/index.scss';
-@forward './text/scss/index.scss';

package/src/css-utilities/skeleton/scss/variables.scss

@@ -1,3 +0,0 @@
-.--skeleton {
-    --animation-duration: 4.8s;
-}

package/src/css-utilities/text/scss/index.scss

@@ -1,152 +0,0 @@
-@use '/shared';
-@use './variables';
-
-.--text {
-    &-crop {
-        @supports (text-box: trim-both cap alphabetic) {
-            & {
-                text-box: trim-both cap alphabetic;
-            }
-
-            &-top {
-                text-box: trim-start cap alphabetic;
-            }
-
-            &-bottom {
-                text-box: trim-end cap alphabetic;
-            }
-        }
-
-        @supports not (text-box: trim-both cap alphabetic) {
-            &::after,
-            &::before,
-            &-bottom::after,
-            &-top::before {
-                content: '';
-                display: block;
-                height: 0;
-                width: 100%;
-            }
-
-            &::after,
-            &-bottom::after {
-                margin-bottom: calc((1em - 1lh) * 0.618);
-            }
-
-            &::before,
-            &-top::before {
-                margin-top: calc((1em - 1lh) * 0.618);
-            }
-        }
-
-        &-first-child {
-            &:first-child {
-                @extend .--text-crop-top;
-            }
-        }
-
-        &-last-child {
-            &:last-child {
-                @extend .--text-crop-bottom;
-            }
-        }
-    }
-
-    // The gradient repeats its first stop at the end, so sliding it one full background-size loops seamlessly.
-    &-gradient {
-        --background-size: calc(var(--speed) * 300%);
-        animation: text-gradient var(--duration) linear infinite;
-        background-clip: text;
-        background-image: linear-gradient(to right, var(--color-from), var(--color-to), var(--color-from));
-        background-size: var(--background-size) 100%;
-        color: transparent;
-
-        @media (prefers-reduced-motion: reduce) {
-            animation: none;
-        }
-    }
-
-    // A copy of the text from 'data-text', nudged down-right and filled with fine diagonal hatching that drifts, like
-    // a printed drop shadow.
-    &-line-shadow {
-        display: inline-flex;
-        position: relative;
-        z-index: 0;
-
-        &::after {
-            animation: text-line-shadow var(--duration) linear infinite;
-            background-clip: text;
-            background-image: linear-gradient(
-                45deg,
-                transparent 45%,
-                var(--shadow-color) 45%,
-                var(--shadow-color) 55%,
-                transparent 0
-            );
-            background-size: var(--line-size) var(--line-size);
-            color: transparent;
-            content: attr(data-text);
-            left: var(--offset);
-            pointer-events: none;
-            position: absolute;
-            top: var(--offset);
-            z-index: -1;
-        }
-
-        @media (prefers-reduced-motion: reduce) {
-            &::after {
-                animation: none;
-            }
-        }
-    }
-
-    // The text keeps a translucent fill, so the clipped band behind it reads as a glint passing through the letters.
-    &-shiny {
-        animation: text-shiny var(--shine-duration) infinite;
-        background-clip: text;
-        background-image: linear-gradient(to right, transparent, var(--shine-color) 50%, transparent);
-        background-position: 0 0;
-        background-repeat: no-repeat;
-        background-size: var(--shine-width) 100%;
-        color: var(--shine-text-color);
-
-        @media (prefers-reduced-motion: reduce) {
-            animation: none;
-            background-image: none;
-        }
-    }
-
-    &-truncate {
-        @extend %text-truncate;
-    }
-}
-
-@keyframes text-gradient {
-    to {
-        background-position: var(--background-size) 0;
-    }
-}
-
-@keyframes text-line-shadow {
-    0% {
-        background-position: 0 0;
-    }
-
-    100% {
-        background-position: 100% -100%;
-    }
-}
-
-// Sweeps across and back, then rests for the final stretch of each cycle.
-@keyframes text-shiny {
-    0%,
-    90%,
-    100% {
-        background-position: calc(-100% - var(--shine-width)) 0;
-    }
-
-    30%,
-    60% {
-        background-position: calc(100% + var(--shine-width)) 0;
-    }
-}

package/src/css-utilities/text/scss/variables.scss

@@ -1,22 +0,0 @@
-.--text-gradient {
-    --color-from: #ffaa40;
-    --color-to: #9c40ff;
-    --duration: 8s;
-    // Multiplies how far the gradient travels per loop; 2 sweeps twice the distance in the same time.
-    --speed: 1;
-}
-
-.--text-line-shadow {
-    --duration: 15s;
-    --line-size: 0.06em;
-    --offset: 0.04em;
-    --shadow-color: var(--color-text-500);
-}
-
-// Prefixed: utilities sit in the last layer, so a plain --color would override the host component's own.
-.--text-shiny {
-    --shine-color: oklch(from var(--color-black-300) l c h / 0.8);
-    --shine-duration: 8s;
-    --shine-text-color: oklch(from var(--color-text-300) l c h / 0.7);
-    --shine-width: 100px;
-}

package/src/shared/scss/absolute.scss

@@ -1,28 +0,0 @@
-@use 'position';
-
-@each $direction in 'bottom' 'center' 'full' 'horizontal' 'left' 'right' 'top' 'vertical' {
-    %absolute-#{$direction} {
-        @include position.position(absolute, $direction);
-    }
-}
-
-// Centered along one axis and pinned to an edge of the other.
-%absolute-horizontal-bottom {
-    @extend %absolute-horizontal;
-    bottom: 0;
-}
-
-%absolute-horizontal-top {
-    @extend %absolute-horizontal;
-    top: 0;
-}
-
-%absolute-vertical-left {
-    @extend %absolute-vertical;
-    left: 0;
-}
-
-%absolute-vertical-right {
-    @extend %absolute-vertical;
-    right: 0;
-}

package/src/shared/scss/background.scss

@@ -1,21 +0,0 @@
-@use '/tokens';
-
-%background-state {
-    --background: var(--background-default);
-    --background-active: var(--background-default);
-    --background-default: transparent;
-    --background-hover: var(--background-default);
-    --background-pressed: var(--background-default);
-
-    @include tokens.state(active) {
-        --background: var(--background-active);
-    }
-
-    @include tokens.state(hover) {
-        --background: var(--background-hover);
-    }
-
-    @include tokens.state(pressed) {
-        --background: var(--background-pressed);
-    }
-}

package/src/shared/scss/border.scss

@@ -1,21 +0,0 @@
-@use '/tokens';
-
-%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);
-
-    @include tokens.state(active) {
-        --border-color: var(--border-color-active);
-    }
-
-    @include tokens.state(hover) {
-        --border-color: var(--border-color-hover);
-    }
-
-    @include tokens.state(pressed) {
-        --border-color: var(--border-color-pressed);
-    }
-}

package/src/shared/scss/color.scss

@@ -1,21 +0,0 @@
-@use '/tokens';
-
-%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);
-
-    @include tokens.state(active) {
-        --color: var(--color-active);
-    }
-
-    @include tokens.state(hover) {
-        --color: var(--color-hover);
-    }
-
-    @include tokens.state(pressed) {
-        --color: var(--color-pressed);
-    }
-}