@fluid-theme/core 0.4.3 → 2.0.0

package/src/components/loading.css

@@ -6,9 +6,9 @@
  * Respects prefers-reduced-motion.
  *
  * Spinner Usage:
- *   <div class="spinner" aria-label="Loading"></div>
- *   <div class="spinner" data-size="sm"></div>
- *   <div class="spinner" data-size="lg"></div>
+ *   <div class="spinner" role="status" aria-label="Loading"></div>
+ *   <div class="spinner" role="status" data-size="sm" aria-label="Loading"></div>
+ *   <div class="spinner" role="status" data-size="lg" aria-label="Loading"></div>
  *
  * Skeleton Usage:
  *   <div class="skeleton" style="--skeleton-h: 1rem; --skeleton-w: 60%;"></div>
@@ -32,7 +32,7 @@
   .spinner {
     --_spinner-size: 2rem;
     --_spinner-width: 3px;
-    --_spinner-color: var(--accent);
+    --_spinner-color: var(--accent-ink);
 
     display: inline-block;
     inline-size: var(--_spinner-size);
@@ -221,7 +221,7 @@
   .skeleton[data-variant="button"] {
     --skeleton-h: 2.75rem;
     --skeleton-w: 8rem;
-    --_skeleton-radius: var(--radius-button, var(--radius-md));
+    --_skeleton-radius: var(--radius-control);
   }
 
 
@@ -237,38 +237,16 @@
     padding: var(--space-5);
     background: var(--color-surface-raised);
     border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-xl);
+    border-radius: var(--radius-card);
   }
 
   .skeleton-card .skeleton[data-variant="media"] {
     margin: calc(var(--space-5) * -1);
     margin-block-end: var(--space-3);
     inline-size: calc(100% + var(--space-5) * 2);
-    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+    border-radius: var(--radius-card) var(--radius-card) 0 0;
   }
 
 
-  /* ========================================
-     THEME-SPECIFIC STYLES
-     ======================================== */
 
-  /* Still: no animation */
-  [data-motion="still"] .spinner {
-    animation-duration: 800ms;
-  }
-
-  [data-motion="still"] .skeleton {
-    animation: none;
-    background: var(--color-surface);
-  }
-
-  /* Tsunami: asymmetric skeleton cards */
-  [data-motion="tsunami"] .skeleton-card {
-    border-radius: var(--radius-asymmetric, 0 24px 0 0);
-  }
-
-  /* Rapids: faster spinner */
-  [data-motion="rapids"] .spinner {
-    animation-duration: 500ms;
-  }
 }

package/src/components/modal.css

@@ -78,7 +78,6 @@
   /* Native backdrop */
   .modal::backdrop {
     background: oklch(0% 0 0 / 0.5);
-    backdrop-filter: blur(4px);
   }
 
 
@@ -95,20 +94,11 @@
     inline-size: var(--_modal-width);
     max-block-size: min(90vh, 40rem);
 
-    background: var(--color-surface-raised);
-    border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-2xl);
-    box-shadow: var(--shadow-xl);
+    background: var(--color-background);
+    color: var(--color-text);
+    border: var(--border-width) solid var(--color-border-strong);
+    border-radius: var(--radius-card);
     overflow: hidden;
-
-    /* Entry animation */
-    transform: translateY(var(--space-5)) scale(0.97);
-    transition:
-      transform var(--duration-normal) var(--ease-settle);
-  }
-
-  .modal[open] .modal__content {
-    transform: translateY(0) scale(1);
   }
 
 
@@ -127,6 +117,7 @@
   }
 
   .modal__title {
+    font-family: var(--font-heading);
     font-size: var(--font-size-lg);
     font-weight: var(--weight-semibold);
     line-height: var(--leading-tight);
@@ -135,7 +126,7 @@
 
   .modal__close {
     --_btn-bg: transparent;
-    --_btn-shadow: none;
+    --_btn-bg-hover: var(--color-surface);
 
     position: relative;
     flex-shrink: 0;
@@ -145,7 +136,7 @@
     inline-size: 2.75rem;
     block-size: 2.75rem;
     padding: 0;
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-control);
     font-size: var(--font-size-xl);
     line-height: 1;
     color: var(--color-text-muted);
@@ -214,7 +205,7 @@
     --_modal-width: min(90vw, 28rem);
     max-block-size: 100vh;
     block-size: 100vh;
-    border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
+    border-radius: var(--radius-card) 0 0 var(--radius-card);
     transform: translateX(100%);
   }
 
@@ -232,7 +223,7 @@
     --_modal-width: min(90vw, 28rem);
     max-block-size: 100vh;
     block-size: 100vh;
-    border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
+    border-radius: 0 var(--radius-card) var(--radius-card) 0;
     transform: translateX(-100%);
   }
 
@@ -261,43 +252,6 @@
   }
 
 
-  /* ========================================
-     THEME-SPECIFIC MODAL STYLES
-     ======================================== */
-
-  /* Still: sharp, no animation */
-  [data-motion="still"] .modal__content {
-    border-radius: var(--radius-md);
-    transform: none;
-    transition: none;
-  }
-
-  [data-motion="still"] .modal {
-    transition: none;
-  }
-
-  /* Serene: gentle, pillowy */
-  [data-motion="serene"] .modal__content {
-    border-radius: var(--radius-2xl);
-    box-shadow: var(--shadow-lg);
-  }
-
-  /* Cascade: bouncy entry */
-  [data-motion="cascade"] .modal__content {
-    border-radius: var(--radius-2xl);
-  }
-
-  /* Rapids: hard offset shadow */
-  [data-motion="rapids"] .modal__content {
-    box-shadow: var(--shadow-offset-hover);
-  }
-
-  /* Tsunami: dramatic, asymmetric corners */
-  [data-motion="tsunami"] .modal__content {
-    border-radius: var(--radius-asymmetric-lg, 0 48px 0 0);
-    box-shadow: var(--shadow-xl);
-  }
-
 
   /* ========================================
      RESPONSIVE
@@ -312,7 +266,7 @@
     .modal__content {
       --_modal-width: 100%;
       max-block-size: 85vh;
-      border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+      border-radius: var(--radius-card) var(--radius-card) 0 0;
       transform: translateY(100%);
     }
 
@@ -332,7 +286,7 @@
     .modal[data-variant="drawer-left"] .modal__content {
       block-size: auto;
       max-block-size: 85vh;
-      border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+      border-radius: var(--radius-card) var(--radius-card) 0 0;
       transform: translateY(100%);
     }
 
@@ -348,14 +302,7 @@
      ======================================== */
 
   @media (prefers-reduced-motion: reduce) {
-    .modal {
-      transition: none;
-    }
-
-    .modal__content {
-      transform: none;
-      transition: none;
-    }
+    .modal__content { transform: none; }
 
     .modal[open] .modal__content {
       transform: none;

package/src/components/nav-modes.css

@@ -0,0 +1,261 @@
+/**
+ * Fluid Framework - Navigation modes (opt-in module)
+ * @layer components
+ *
+ * dist/fluid-nav.min.css (package export "./nav"). Link it after core, as
+ * fluid-toc.min.css is. Its own file because core has no room for it under
+ * the 24,400 B gzip budget (spec _docs/plans/base-v2.md §11). The markup,
+ * the tokens and the default small-screen behaviour (squeeze, then balanced
+ * wrap) are in nav.css, in core; this file adds the modes a site opts into:
+ *
+ *   data-nav="icon"           the brand shrinks to its mark, the links share its row
+ *   data-nav="compact"        a "+" opens the links in a panel that slides over
+ *                             from the end edge, with a 25% backdrop; no JS
+ *   data-nav="compact drop"   the panel drops under the bar instead
+ *   data-sticky="links"       two rows: the brand row scrolls away, the links stick
+ *
+ * Without this file each falls back to the plain nav: the links wrap under
+ * the brand, and data-sticky="links" keeps the whole bar.
+ */
+
+@layer components {
+  /* ========================================
+     ICON: data-nav="icon"
+     ======================================== */
+
+  .nav__brand-mark {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    inline-size: 2.25rem;
+    block-size: 2.25rem;
+    font: 600 0.9375rem/1 var(--font-heading);
+    letter-spacing: 0.02em;
+    color: var(--on-accent-fill);
+    background: var(--accent-fill);
+    border-radius: var(--radius-control);
+  }
+
+  @container nav (max-width: 40rem) {
+    /* data-nav="icon": the name is read but not shown; the links share the
+       mark's row and hang at the end edge. */
+    .nav[data-nav~="icon"] .nav__brand-name {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+
+    .nav[data-nav~="icon"]:not(:has(.nav__toggle)) .nav__menu {
+      --nav-wrap-align: end;
+      flex: 1 1 0;
+      order: 0;
+      min-inline-size: 0;
+      margin-inline-end: calc(-1 * var(--_nav-pad));
+    }
+  }
+
+
+  /* ========================================
+     COMPACT: data-nav="compact" (markup in nav.css). The links move into a
+     popover on a narrow bar. The panel wrapper stays invisible to layout
+     (nav.css) on wide bars and without popover support, so the links
+     behave as usual there.
+     ======================================== */
+
+  /* Outside the container query: a nav cannot style itself from its own query. */
+  .nav[data-nav~="drop"] { anchor-name: --fluid-nav; }
+
+  @supports selector(:popover-open) {
+    @container nav (max-width: 40rem) {
+      .nav[data-nav~="compact"] .nav__more {
+        display: inline-grid;
+        place-items: center;
+        min-inline-size: 2.75rem;
+        min-block-size: 2.75rem;
+        padding: 0;
+        color: var(--nav-ink, var(--color-text));
+        background: none;
+        border: 0;
+        border-radius: var(--radius-control);
+        cursor: pointer;
+      }
+
+      .nav[data-nav~="compact"] > .nav__more {
+        order: 2;
+        margin-inline: auto calc(-1 * var(--space-2));
+      }
+
+      .nav[data-nav~="compact"]:has(.nav__actions) > .nav__more { margin-inline-start: 0; }
+
+      /* One row: the brand gives way (and wraps) before the + would. */
+      .nav[data-nav~="compact"] > .nav__brand {
+        flex: 1 1 0;
+        min-inline-size: 0;
+      }
+
+      /* The glyph is a character of the text face, so it matches the links. */
+      .nav[data-nav~="compact"] .nav__more::before {
+        content: var(--nav-glyph, "+");        /* browsers without alt text for content */
+        content: var(--nav-glyph, "+") / "";
+        font: 300 2rem/1 var(--font-body);
+        transition: rotate var(--duration-normal) var(--ease-fluid);
+      }
+
+      .nav[data-nav~="compact"]:has(.nav__panel:popover-open) .nav__more::before,
+      .nav[data-nav~="compact"] .nav__panel .nav__more::before {
+        rotate: var(--nav-glyph-turn, 45deg);
+      }
+
+      .nav[data-nav~="compact"] .nav__panel[popover] {
+        display: none;
+        position: fixed;
+        inset: 0 0 0 auto;
+        inline-size: var(--nav-panel-size, min(20rem, 85vw));
+        block-size: 100dvh;
+        max-block-size: none;
+        margin: 0;
+        padding: var(--space-s) var(--page-edge) var(--space-l);
+        flex-direction: column;
+        color: var(--nav-ink, var(--color-text));
+        background: var(--nav-bg, var(--color-background));
+        border: 0;
+        border-inline-start: var(--border-width) solid var(--color-border);
+        overflow: auto;
+        translate: 100% 0;
+        transition:
+          translate var(--duration-normal) var(--ease-fluid),
+          display var(--duration-normal) allow-discrete,
+          overlay var(--duration-normal) allow-discrete;
+      }
+
+      .nav[data-nav~="compact"] .nav__panel:popover-open {
+        display: flex;
+        translate: 0 0;
+      }
+
+      .nav[data-nav~="compact"] .nav__panel::backdrop {
+        background: oklch(0% 0 0 / 0);
+        transition:
+          background var(--duration-normal) var(--ease-fluid),
+          display var(--duration-normal) allow-discrete,
+          overlay var(--duration-normal) allow-discrete;
+      }
+
+      .nav[data-nav~="compact"] .nav__panel:popover-open::backdrop {
+        background: oklch(0% 0 0 / 0.25);
+      }
+
+      @starting-style {
+        .nav[data-nav~="compact"] .nav__panel:popover-open { translate: 100% 0; }
+        .nav[data-nav~="compact"] .nav__panel:popover-open .nav__more::before { rotate: 0deg; }
+        .nav[data-nav~="compact"] .nav__panel:popover-open::backdrop { background: oklch(0% 0 0 / 0); }
+      }
+
+      /* In the panel: the close × sits where the + was, the links stack at
+         full size, without the bar's squeeze. */
+      .nav[data-nav~="compact"] .nav__panel > .nav__more {
+        align-self: flex-end;
+        margin-inline-end: calc(-1 * var(--space-2));
+        margin-block-end: var(--space-m);
+      }
+
+      .nav[data-nav~="compact"] .nav__panel .nav__menu {
+        --_nav-track: initial;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        flex-basis: auto;
+        margin: 0;
+      }
+
+      .nav[data-nav~="compact"] .nav__panel .nav__menu > li {
+        display: block;
+        border-block-start: var(--border-width) solid var(--color-border);
+      }
+
+      .nav[data-nav~="compact"] .nav__panel .nav__link {
+        min-block-size: 3.25rem;
+        padding-inline: 0;
+        font-size: var(--step-1);
+      }
+
+      /* Drop: the panel hangs under the bar and fades in; the bar's + turns
+         to × and stays the toggle. Needs anchor positioning; without it the
+         panel covers the bar from the top and shows its own ×. */
+      .nav[data-nav~="drop"] .nav__panel[popover] {
+        inset: 0 0 auto 0;
+        inline-size: auto;
+        block-size: auto;
+        max-block-size: 100dvh;
+        padding-block: 0 var(--space-m);
+        border: 0;
+        border-block-end: var(--border-width) solid var(--color-border);
+        translate: 0 0;
+        opacity: 0;
+        transition:
+          opacity var(--duration-normal) var(--ease-fluid),
+          translate var(--duration-normal) var(--ease-fluid),
+          display var(--duration-normal) allow-discrete,
+          overlay var(--duration-normal) allow-discrete;
+      }
+
+      .nav[data-nav~="drop"] .nav__panel:popover-open { opacity: 1; }
+
+      @starting-style {
+        .nav[data-nav~="drop"] .nav__panel:popover-open { opacity: 0; translate: 0 -0.5rem; }
+      }
+
+      @supports (anchor-name: --a) {
+        .nav[data-nav~="drop"] .nav__panel[popover] {
+          position-anchor: --fluid-nav;
+          inset: anchor(bottom) 0 auto 0;
+          max-block-size: calc(100dvh - anchor-size(height));
+        }
+        .nav[data-nav~="drop"] .nav__panel > .nav__more { display: none; }
+      }
+
+      .nav[data-nav~="drop"] .nav__panel:is(*, :popover-open)::backdrop { background: transparent; }
+    }
+  }
+
+  /* Reduced motion: no slide or turn (the reset already cuts transition
+     durations to near zero). */
+  @media (prefers-reduced-motion: reduce) {
+    .nav[data-nav~="compact"] .nav__panel[popover] { translate: none; }
+    @starting-style {
+      .nav[data-nav~="compact"] .nav__panel:popover-open { translate: none; }
+    }
+  }
+
+
+  /* ========================================
+     STICKY LINKS: data-sticky="links". data-sticky keeps the whole bar;
+     this pulls the bar up by its brand row once the links have a row of
+     their own, so only the links stay. A nav cannot query its own width,
+     so this uses the viewport: below 46rem the links always take their own
+     row in this mode, so the offset never hides a one-row bar.
+     ======================================== */
+
+  .nav[data-sticky="links"] {
+    --nav-stick-offset: 0px;
+    inset-block-start: calc(-1 * var(--nav-stick-offset));
+  }
+
+  /* A fixed brand row height, so the offset is exact. */
+  .nav[data-sticky="links"] .nav__brand { min-block-size: 2.75rem; }
+
+  @media (width < 46rem) {
+    .nav[data-sticky="links"]:not([data-nav~="icon"], [data-nav~="compact"]) {
+      /* top padding + brand row (a 2.75rem control) + the row gap */
+      --nav-stick-offset: calc(var(--space-s) + 2.75rem + var(--space-2));
+    }
+
+    .nav[data-sticky="links"]:not([data-nav~="icon"], [data-nav~="compact"]) .nav__menu {
+      flex-basis: 100%;
+      order: 3;
+    }
+  }
+}