@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/nav/scss/index.scss

@@ -1,5 +1,7 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/border';
+@use 'css-utilities/color';
+@use 'css-utilities/text';
 @use 'variables';
 
 .nav-tree {
@@ -12,12 +14,6 @@
         color: inherit;
     }
 
-    &-group,
-    &-links {
-        display: flex;
-        flex-direction: column;
-    }
-
     &-group,
     &-link,
     &-links {
@@ -26,34 +22,10 @@
         }
     }
 
-    &-indicator {
-        background: var(--indicator-color);
-        display: none;
-        height: 0;
-        left: 0;
-        opacity: 0;
-        pointer-events: none;
-        position: absolute;
-        top: 0;
-        transition:
-            display 160ms allow-discrete,
-            height 320ms cubic-bezier(0.34, 1.36, 0.64, 1),
-            opacity 160ms ease,
-            transform 320ms cubic-bezier(0.34, 1.36, 0.64, 1);
-        width: var(--indicator-width);
-
-        @include tokens.state(active) {
-            display: block;
-            opacity: 1;
-
-            @starting-style {
-                opacity: 0;
-            }
-        }
-
-        @media (prefers-reduced-motion: reduce) {
-            transition: none;
-        }
+    &-group,
+    &-links {
+        display: flex;
+        flex-direction: column;
     }
 
     &-link {
@@ -79,16 +51,16 @@
             border-color var(--transition-duration) var(--transition-timing-function),
             color var(--transition-duration) var(--transition-timing-function);
 
-        &:focus-visible {
-            outline: var(--focus-width) solid var(--focus-color);
-            outline-offset: calc(var(--focus-width) * -1);
-        }
-
         &--truncate {
             @extend %text-truncate;
             display: block;
         }
 
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--focus-color);
+            outline-offset: calc(var(--focus-width) * -1);
+        }
+
         @include tokens.state(active) {
             --font-weight: var(--link-font-weight-active);
         }

package/src/components/nav/scss/variables.scss

@@ -1,20 +1,23 @@
+@use 'css-utilities/surface';
+
 .nav-tree {
     --focus-color: var(--color-blue-400);
     --focus-width: var(--border-width-400);
-    --highlight-background-active: var(--color-black-400);
-    --highlight-background-hover: var(--color-grey-400);
-    --highlight-background-pressed: var(--color-grey-500);
+    --highlight-background-active: var(--color-primary-400);
+    --highlight-background-hover: var(--surface-background-hover);
+    --highlight-background-pressed: var(--surface-background-pressed);
     // Text colour of the active link while the highlight sits under it.
-    --highlight-color: var(--color-white-400);
+    --highlight-color: var(--surface-background-default);
+    // The bar 'border' and 'both' draw down the active link's left edge, over the links' own rule in 'location'.
     --indicator-color: var(--color-blue-400);
     --indicator-width: var(--border-width-400);
-    --link-border-color: var(--color-border-400);
+    --link-border-color: var(--surface-border-hover);
     --link-border-color-active: var(--link-border-color);
-    --link-border-color-hover: var(--color-text-400);
+    --link-border-color-hover: var(--color-primary-400);
     --link-border-radius: 0px;
     --link-border-width: var(--border-width-400);
     --link-color: var(--color-text-400);
-    --link-color-active: var(--color-black-500);
+    --link-color-active: var(--color-text-500);
     --link-font-size: var(--font-size-300);
     --link-font-weight: var(--font-weight-300);
     --link-font-weight-active: var(--font-weight-500);
@@ -31,8 +34,8 @@
 
 
     &--command {
-        --highlight-background-active: var(--color-grey-400);
-        --highlight-color: var(--color-text-500);
+        --highlight-background-active: var(--surface-background-active);
+        --highlight-color: var(--color-primary-500);
     }
 
     // The border stays, transparent, so links keep the same box with or without the highlight.
@@ -45,16 +48,32 @@
         --link-inset: var(--size-300);
     }
 
+    // With no fill under it, the active link keeps the plain active text colour rather than the one set for the fill.
+    &--highlight#{&}--border {
+        --link-color-active: var(--color-text-500);
+    }
+
+    // A soft fill over the rule down the links' edge, so the active link keeps its own text colour.
+    &--location {
+        --highlight-background-active: var(--surface-background-active);
+        --highlight-background-hover: var(--surface-background-hover);
+        --highlight-background-pressed: var(--surface-background-pressed);
+    }
+
     &--toc {
         --link-border-color-active: var(--link-color-active);
     }
 
+    // A level above the tree, so a fill pointed at '--surface-background-*' here reads as a surface sitting on it.
     &-highlight.highlight {
+        @extend %surface-raised-level;
         --background-active: var(--highlight-background-active);
         --background-hover: var(--highlight-background-hover);
         --background-pressed: var(--highlight-background-pressed);
-        --glide-duration: 0.2s;
-        --glide-duration-active: 0.25s;
+        --glide-duration: var(--duration-moderate);
+        --glide-duration-active: var(--duration-moderate);
+        --line-color: var(--indicator-color);
+        --line-width: var(--indicator-width);
         --scale-hidden: 1;
     }
 }

package/src/components/nav/tree.ts

@@ -1,4 +1,4 @@
-import { effect, onCleanup, read, signal, write, type Signal } from '@esportsplus/reactivity';
+import { effect, signal, write } from '@esportsplus/reactivity';
 import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
 import highlight from '~/components/highlight';
 
@@ -6,14 +6,19 @@ import highlight from '~/components/highlight';
 type A = Attributes & {
     // The key of the active link or section title; each matches through its own `key`, which defaults to its `href`.
     active?: () => string | undefined;
-    // 'page' glides a highlight between links, 'command' does too for 'command' results (which own focus and
-    // selection), and 'location' slides an indicator bar along the active links instead.
+    // 'page' marks the active link in a solid highlight, 'command' does too for 'command' results (which own focus and
+    // selection), and 'location' marks it softly over a rule down the links' edge. All three glide between links.
     current?: Current;
+    // How the active link is marked: 'background' fills it, 'border' draws a bar down its left edge, 'both' does both.
+    // 'background' by default, 'border' for 'location'.
+    indicator?: Indicator;
     sections: TreeSection[];
 };
 
 type Current = 'command' | 'location' | 'page';
 
+type Indicator = 'background' | 'border' | 'both';
+
 type TreeGroup = {
     label?: string;
     links: TreeLink[];
@@ -39,49 +44,6 @@ type TreeSection = {
 };
 
 
-// Called on connect, whose root owns the effect and the pending frame.
-function indicator(element: HTMLElement, links: TreeLink[], selected: Signal<string | undefined>) {
-    let bar = element.querySelector<HTMLElement>(':scope > .nav-tree-indicator'),
-        frame = 0;
-
-    if (!bar) {
-        return;
-    }
-
-    effect(() => {
-        let index = -1,
-            key = read(selected);
-
-        for (let i = 0, n = links.length; i < n; i++) {
-            if (visible(links[i]) && keyOf(links[i]) === key) {
-                index = i;
-                break;
-            }
-        }
-
-        cancelAnimationFrame(frame);
-        frame = requestAnimationFrame(() => {
-            let anchor = element.querySelectorAll<HTMLElement>(':scope > .nav-tree-link')[index];
-
-            if (!bar) {
-                return;
-            }
-
-            if (!anchor) {
-                bar.classList.remove('--active');
-                return;
-            }
-
-            bar.style.height = `${anchor.offsetHeight}px`;
-            bar.style.transform = `translateY(${anchor.offsetTop}px)`;
-
-            bar.classList.add('--active');
-        });
-    });
-
-    onCleanup(() => cancelAnimationFrame(frame));
-}
-
 function keyOf(item: TreeLink | TreeSection) {
     return item.key ?? item.href;
 }
@@ -91,7 +53,7 @@ function visible(link: TreeLink) {
 }
 
 
-export default component<A>(({ active, current = 'page', sections, ...attributes }) => {
+export default component<A>(({ active, current = 'page', indicator = current === 'location' ? 'border' : 'background', sections, ...attributes }) => {
     // A private mirror of the active key that every link selects on, so a change restyles the two links it moves
     // between rather than every link.
     let selected = signal<string | undefined>(undefined);
@@ -114,11 +76,17 @@ export default component<A>(({ active, current = 'page', sections, ...attributes
 
     return html`
         <nav
-            class='nav-tree ${current !== 'location' && 'nav-tree--highlight'} ${current === 'command' && 'nav-tree--command'}'
+            class='nav-tree nav-tree--${current === 'location' ? 'location' : 'highlight'} ${current === 'command' && 'nav-tree--command'} ${indicator === 'border' && 'nav-tree--border'}'
             ${current === 'command' && { role: 'presentation' }}
             ${attributes}
         >
-            ${current !== 'location' && highlight({ class: 'nav-tree-highlight', hover: current !== 'command', target: '.nav-tree-link:not(.--hidden)' })}
+            ${highlight({
+                class: 'nav-tree-highlight',
+                fill: indicator !== 'border',
+                hover: current !== 'command',
+                line: indicator === 'background' ? undefined : 'left',
+                target: '.nav-tree-link:not(.--hidden)'
+            })}
             ${sections.map((section) => html`
                 <div
                     class='nav-tree-group ${section.groups.some((group) => group.links.some((link) => link.visible)) && (() => !section.groups.some((group) => group.links.some(visible)) && '--hidden')}'
@@ -137,16 +105,7 @@ export default component<A>(({ active, current = 'page', sections, ...attributes
 
                     ${section.groups.map((group) => {
                         return html`
-                            <div
-                                class='nav-tree-links ${group.links.some((link) => link.visible) && (() => !group.links.some(visible) && '--hidden')}'
-                                ${{
-                                    onconnect: (element: HTMLElement) => {
-                                        if (active && current === 'location') {
-                                            indicator(element, group.links, selected);
-                                        }
-                                    }
-                                }}
-                            >
+                            <div class='nav-tree-links ${group.links.some((link) => link.visible) && (() => !group.links.some(visible) && '--hidden')}'>
                                 ${group.label && html`
                                     <div class='nav-tree-title'>
                                         ${group.label}
@@ -167,8 +126,6 @@ export default component<A>(({ active, current = 'page', sections, ...attributes
                                         ${link.content ?? link.label}
                                     </a>
                                 `)}
-
-                                ${current === 'location' && html`<span aria-hidden='true' class='nav-tree-indicator'></span>`}
                             </div>
                         `;
                     })}
@@ -178,4 +135,4 @@ export default component<A>(({ active, current = 'page', sections, ...attributes
     `;
 });
 
-export type { Current, TreeGroup, TreeLink, TreeSection };
+export type { Current, Indicator, TreeGroup, TreeLink, TreeSection };

package/src/components/notification/scss/index.scss

@@ -1,5 +1,5 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/icon';
 @use 'variables';
 
 .notification {
@@ -65,7 +65,7 @@
 
     // Qualified to outrank the '.icon' it pairs with.
     &-icon.icon {
-        animation: var(--ring-animation-name) var(--ring-duration) ease-in-out;
+        animation: var(--ring-animation-name) var(--ring-duration) var(--easing-in-out);
         transform-origin: 50% 8%;
 
         svg {
@@ -74,6 +74,11 @@
         }
     }
 
+    &:focus-visible {
+        outline: var(--focus-width) solid var(--focus-color);
+        outline-offset: var(--focus-offset);
+    }
+
     .notification {
         left: calc(100% - var(--badge-inset));
         position: absolute;
@@ -81,11 +86,6 @@
         translate: -50% -50%;
     }
 
-    &:focus-visible {
-        outline: var(--focus-width) solid var(--focus-color);
-        outline-offset: var(--focus-offset);
-    }
-
     @media (prefers-reduced-motion: reduce) {
         & {
             transition: none;

package/src/components/notification/scss/variables.scss

@@ -4,13 +4,13 @@
     --dot-size: calc(var(--size) * 0.57);
     --font-size: calc(var(--size) * 0.62);
     --font-weight: var(--font-weight-500);
-    --outline-color: var(--color-white-400);
-    --outline-width: 2px;
-    --roll-duration: 400ms;
+    --outline-color: var(--surface-background-default);
+    --outline-width: var(--border-width-500);
+    --roll-duration: var(--duration-slow);
     --roll-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
     --size: var(--size-500);
-    --timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
-    --transition-duration: 280ms;
+    --timing-function: var(--easing-spring);
+    --transition-duration: var(--duration-fast);
 }
 
 .notification-bell {
@@ -21,8 +21,8 @@
     --border-radius: 50%;
     --color-default: var(--color-text-400);
     --focus-color: currentColor;
-    --focus-offset: 2px;
-    --focus-width: 2px;
+    --focus-offset: calc(var(--size-100) / 4);
+    --focus-width: var(--border-width-500);
     --icon-size: 50%;
     --icon-stroke-width: 2;
     --padding-horizontal: 0px;
@@ -31,8 +31,6 @@
     --ring-animation-name: none;
     --ring-duration: 800ms;
     --size: var(--size-800);
-    --transition-duration: 160ms;
-    --transition-timing-function: ease;
     --width: var(--size);
 
     // Each ring swaps the keyframe name, restarting the swing.