@kwtv/components 0.8.0 → 0.9.0

package/README.md

@@ -7,14 +7,15 @@ there is no separate library build or consumer alias configuration.
 
 ## What ships
 
-| Path                      | What it is                                                                                                                                               |
-| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `src/astro/*.astro`       | Static components. Scoped styles, no client JS.                                                                                                          |
-| `src/react/*.tsx`         | Interactive islands. Select, Modal, Toast, Drawer, QuantityStepper, NewsCarousel, OrderStatus, OrderTimeline.                                            |
-| `src/styles/base.css`     | The shared primitives the React islands import: focus ring, touch targets, screen-reader helper. Astro components carry their own scoped styles.         |
-| `src/styles/controls.css` | The one copy of the button and icon-button styles. `Button` and `IconButton` import it. React islands import it for the `ui-btn` / `ui-iconbtn` classes. |
-| `src/styles/navlink.css`  | The one copy of the header nav link styles. `NavLink` and `NavDropdown` import it.                                                                       |
-| `src/styles/motion.css`   | The `pl-` motion layer: lift, underline, arrow and row nudges, rise, marquee, chip rail and swipe carousel.                                              |
+| Path                      | What it is                                                                                                                                                                                |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src/astro/*.astro`       | Static components. Scoped styles, no client JS.                                                                                                                                           |
+| `src/react/*.tsx`         | Interactive islands. Select, Modal, Toast, Drawer, QuantityStepper, NewsCarousel, OrderStatus, OrderTimeline.                                                                             |
+| `src/styles/base.css`     | The shared primitives the React islands import: focus ring, touch targets, screen-reader helper. Astro components carry their own scoped styles.                                          |
+| `src/styles/controls.css` | The one copy of the button and icon-button styles. `Button` and `IconButton` import it. React islands import it for the `ui-btn` / `ui-iconbtn` classes.                                  |
+| `src/styles/navlink.css`  | The one copy of the header nav link styles. `NavLink` and `NavDropdown` import it.                                                                                                        |
+| `src/styles/feedback.css` | The one copy of the alert, empty state and skeleton styles. `Alert`, `EmptyState` and `Skeleton` import it. React islands import it for the `ui-alert`, `ui-empty` and `ui-skel` classes. |
+| `src/styles/motion.css`   | The `pl-` motion layer: lift, underline, arrow and row nudges, rise, marquee, chip rail and swipe carousel.                                                                               |
 
 ## Install
 
@@ -70,6 +71,7 @@ classes (Astro cannot pass its scoped styles into a React island):
 ```ts
 import "@kwtv/components/styles/base.css";
 import "@kwtv/components/styles/controls.css";
+import "@kwtv/components/styles/feedback.css";
 ```
 
 ## Cascade layers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwtv/components",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "license": "UNLICENSED",
   "type": "module",
   "description": "KWTV UI components for Astro, with React islands. Built on the KWTV design tokens.",
@@ -39,6 +39,6 @@
     }
   },
   "dependencies": {
-    "@kwtv/tokens": "^0.8.0"
+    "@kwtv/tokens": "^0.9.0"
   }
 }

package/src/astro/Alert.astro

@@ -1,5 +1,6 @@
 ---
 import Icon from "./Icon.astro";
+import "../styles/feedback.css";
 
 /**
  * Alert. Inline message tied to what the reader is looking at. Never used for
@@ -8,6 +9,9 @@ import Icon from "./Icon.astro";
  * are read in document order.
  *
  * Every alert carries both an icon and a worded tone. Body keeps full strength.
+ *
+ * React and Preact islands write the same markup and import
+ * `@kwtv/components/styles/feedback.css`.
  */
 interface Props {
   tone?: "info" | "success" | "warning" | "danger";
@@ -39,60 +43,3 @@ const classes = ["ui-alert", `ui-alert--${tone}`, className]
     <slot />
   </span>
 </div>
-
-<style>
-  @layer reset, tokens, base, components, motion, utilities;
-
-  @layer components {
-    .ui-alert {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2-5, 0.625rem);
-      padding: var(--space-3) var(--space-4);
-      border-left: 3px solid currentColor;
-      border-radius: var(--radius-md);
-      font-family: var(--font-sans);
-      font-size: var(--text-sm);
-      line-height: var(--leading-sm);
-    }
-
-    .ui-alert__icon {
-      display: inline-flex;
-      flex-shrink: 0;
-      align-self: flex-start;
-      margin-top: calc((var(--leading-sm, 1.375rem) - 16px) / 2);
-    }
-
-    /* Body keeps full strength; the left rule carries the tone. */
-    .ui-alert__body {
-      color: var(--text);
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-1);
-    }
-
-    .ui-alert__title {
-      font-weight: var(--weight-semibold);
-    }
-
-    .ui-alert--info {
-      background: var(--surface-accent);
-      color: var(--surface-accent-fg, var(--primary));
-    }
-
-    .ui-alert--success {
-      background: var(--success-bg);
-      color: var(--success);
-    }
-
-    .ui-alert--warning {
-      background: var(--warning-bg);
-      color: var(--warning);
-    }
-
-    .ui-alert--danger {
-      background: var(--danger-bg);
-      color: var(--danger);
-    }
-  }
-</style>

package/src/astro/EmptyState.astro

@@ -1,8 +1,13 @@
 ---
+import "../styles/feedback.css";
+
 /**
  * Empty state. Says what is missing and offers the one action that fixes it.
  * Never a shrug: an empty cart links back to the category page, an empty filter
  * result offers to clear filters.
+ *
+ * React and Preact islands write the same markup and import
+ * `@kwtv/components/styles/feedback.css`.
  */
 interface Props {
   title: string;
@@ -24,35 +29,3 @@ const hasAction = Astro.slots.has("action");
     </div>
   )}
 </div>
-
-<style>
-  @layer reset, tokens, base, components, motion, utilities;
-
-  @layer components {
-    .ui-empty {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--space-2);
-      padding: var(--space-8) var(--space-6);
-      border: 1px dashed var(--border-strong);
-      border-radius: var(--radius-lg);
-      background: var(--surface);
-    }
-
-    .ui-empty__title {
-      font-size: var(--text-lg);
-      font-weight: var(--weight-semibold);
-      color: var(--text);
-    }
-
-    .ui-empty__body {
-      font-size: var(--text-sm);
-      line-height: var(--leading-sm);
-      color: var(--text-muted);
-    }
-
-    /* The flex `gap` above already spaces the action from the body; an added */
-    /* margin here doubled that gap and threw off the rhythm between the two. */
-  }
-</style>

package/src/astro/IconButton.astro

@@ -8,6 +8,9 @@ import "../styles/controls.css";
  * The count pill is decorative (aria-hidden); the number must be repeated in
  * the label by the consumer, so it is announced once, not twice.
  *
+ * Pass `href` to render a link with the same look, for a control that goes to
+ * a page, like the cart. The link gets no `type` and no `aria-expanded`.
+ *
  * Pass `icon` to use the shared icon set, or a custom SVG via the default slot.
  */
 interface Props {
@@ -15,7 +18,11 @@ interface Props {
   icon?: string;
   /** Decorative count pill. Repeat the number in `label`. */
   count?: number;
+  /** Renders an `<a>` to this URL instead of a `<button>`. */
+  href?: string;
+  /** Button only. Ignored when `href` is set. */
   type?: "button" | "submit" | "reset";
+  /** Button only. Ignored when `href` is set. */
   expanded?: boolean;
   class?: string;
 }
@@ -24,6 +31,7 @@ const {
   label,
   icon,
   count,
+  href,
   type = "button",
   expanded,
   class: className,
@@ -33,17 +41,28 @@ const {
 const classes = ["ui-iconbtn", className].filter(Boolean).join(" ");
 ---
 
-<button
-  class={classes}
-  type={type}
-  aria-label={label}
-  aria-expanded={expanded === undefined ? undefined : String(expanded)}
-  {...rest}
->
-  {icon ? <Icon name={icon as any} size={20} stroke={1.7} /> : <slot />}
-  {count !== undefined && (
-    <span class="ui-iconbtn__count" aria-hidden="true">
-      {count}
-    </span>
-  )}
-</button>
+{href ? (
+  <a class={classes} href={href} aria-label={label} {...rest}>
+    {icon ? <Icon name={icon as any} size={20} stroke={1.7} /> : <slot />}
+    {count !== undefined && (
+      <span class="ui-iconbtn__count" aria-hidden="true">
+        {count}
+      </span>
+    )}
+  </a>
+) : (
+  <button
+    class={classes}
+    type={type}
+    aria-label={label}
+    aria-expanded={expanded === undefined ? undefined : String(expanded)}
+    {...rest}
+  >
+    {icon ? <Icon name={icon as any} size={20} stroke={1.7} /> : <slot />}
+    {count !== undefined && (
+      <span class="ui-iconbtn__count" aria-hidden="true">
+        {count}
+      </span>
+    )}
+  </button>
+)}

package/src/astro/Skeleton.astro

@@ -1,8 +1,13 @@
 ---
+import "../styles/feedback.css";
+
 /**
  * Loading skeleton. Blocks match the real layout so nothing jumps when content
  * arrives. The shimmer stops for readers who ask for reduced motion, leaving a
  * flat block. Decorative: aria-hidden by default.
+ *
+ * React and Preact islands write the same markup and import
+ * `@kwtv/components/styles/feedback.css`.
  */
 interface Props {
   variant?: "img" | "title" | "line" | "block";
@@ -40,59 +45,3 @@ const style = [
   aria-hidden="true"
   {...rest}
 ></span>
-
-<style>
-  @layer reset, tokens, base, components, motion, utilities;
-
-  @layer components {
-    .ui-skel {
-      display: block;
-      background: var(--surface-hover);
-      background-image: linear-gradient(
-        90deg,
-        var(--surface-hover) 0%,
-        var(--border) 50%,
-        var(--surface-hover) 100%
-      );
-      background-size: 200% 100%;
-      border-radius: var(--radius-md);
-      animation: ui-skel-shimmer 1400ms ease-in-out infinite;
-    }
-
-    .ui-skel--img {
-      width: 100%;
-      aspect-ratio: 4 / 3;
-      border-radius: 0;
-    }
-
-    .ui-skel--title {
-      height: 0.875rem;
-      border-radius: var(--radius-sm);
-    }
-
-    .ui-skel--line {
-      height: 0.625rem;
-      border-radius: var(--radius-sm);
-    }
-
-    .ui-skel--block {
-      height: 1rem;
-    }
-
-    @keyframes ui-skel-shimmer {
-      0% {
-        background-position: 200% 0;
-      }
-      100% {
-        background-position: -200% 0;
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .ui-skel {
-        animation: none;
-        background-image: none;
-      }
-    }
-  }
-</style>

package/src/react/Drawer.css

@@ -1,4 +1,4 @@
-/* Mobile menu drawer. All values from the design-system tokens. */
+/* Menu drawer. All values from the design-system tokens. */
 
 @layer reset, tokens, base, components, motion, utilities;
 
@@ -68,4 +68,74 @@
   .ui-drawer__cta {
     margin-top: var(--space-2);
   }
+
+  .ui-drawer__close {
+    align-self: flex-end;
+    flex-shrink: 0;
+  }
+
+  /* Placement. The panel is fixed to one edge, over a scrim that stays dark
+     in both themes, like the modal scrim. */
+  .ui-drawer-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-modal);
+    display: flex;
+    background: color-mix(in srgb, var(--charcoal-xdark) 52%, transparent);
+    animation: ui-drawer-fade var(--duration-base) var(--ease-standard);
+  }
+
+  .ui-drawer-scrim--end {
+    justify-content: flex-end;
+  }
+
+  .ui-drawer-scrim--bottom {
+    align-items: flex-end;
+  }
+
+  .ui-drawer--start,
+  .ui-drawer--end,
+  .ui-drawer--bottom {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    box-shadow: var(--shadow-xl);
+    animation: ui-drawer-in var(--duration-slow) var(--ease-enter);
+  }
+
+  .ui-drawer--start,
+  .ui-drawer--end {
+    --_from: translateX(-100%);
+    width: min(360px, 100% - var(--space-8));
+    height: 100%;
+  }
+
+  .ui-drawer--end {
+    --_from: translateX(100%);
+  }
+
+  .ui-drawer--bottom {
+    --_from: translateY(100%);
+    width: 100%;
+    max-height: 85dvh;
+    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  }
+
+  @keyframes ui-drawer-fade {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes ui-drawer-in {
+    from {
+      transform: var(--_from);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-drawer-scrim,
+    .ui-drawer {
+      animation: none;
+    }
+  }
 }

package/src/react/Drawer.tsx

@@ -1,15 +1,27 @@
 import { useEffect, useRef, type ReactNode } from "react";
+import "../styles/controls.css";
 import "./Drawer.css";
 
 /**
- * Mobile menu drawer. A full-width panel under the header, opened from the menu
- * button. Rows sit on whitespace with no separators.
+ * Menu drawer. Without `placement` it is the mobile menu: a full-width panel
+ * under the header, opened from the menu button. With `placement` it is a
+ * panel fixed to the start, end or bottom edge, over a scrim. Rows sit on
+ * whitespace with no separators.
  *
- * Focus moves to the first row on open and returns to the trigger on close; the
- * page behind does not scroll while the drawer is open. The trigger is the
- * consumer's IconButton: flip its aria-expanded and swap its label between
- * "Menu openen" and "Menu sluiten". Pass that trigger element through
- * `triggerRef` so focus returns to it on close.
+ * While open, Tab and Shift+Tab stay inside the drawer, Escape closes it, and
+ * the rest of the page is inert and does not scroll. Focus moves to the first
+ * row on open. On close it returns to `triggerRef`, or else to whatever had
+ * focus before the drawer opened.
+ *
+ * Without `placement` the trigger sits outside the drawer and stays usable, so
+ * the menu button can close it again. It is part of the Tab cycle. The trigger
+ * is the consumer's IconButton: flip its aria-expanded and swap its label
+ * between "Menu openen" and "Menu sluiten".
+ *
+ * Pass `closeLabel` to show a close button at the top of the drawer. A drawer
+ * with a `placement` covers its trigger, so give it one.
+ *
+ * Uses only hooks and DOM calls that preact/compat supports.
  */
 
 export interface DrawerLink {
@@ -37,6 +49,32 @@ export interface DrawerProps {
   /** Sticky call to action at the bottom, usually the cart button. */
   cta?: ReactNode;
   label?: string;
+  /**
+   * Leave unset for the panel under the header. "start", "end" or "bottom"
+   * fix the drawer to that edge of the viewport, over a scrim.
+   */
+  placement?: "start" | "end" | "bottom";
+  /** Shows a close button with this accessible name, like "Menu sluiten". */
+  closeLabel?: string;
+}
+
+const FOCUSABLE =
+  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+/** Sets `inert` on everything outside `root`, except branches holding `keep`. */
+function inertOutside(root: HTMLElement, keep: HTMLElement | null) {
+  const changed: Element[] = [];
+  let node: HTMLElement = root;
+  while (node !== document.body && node.parentElement) {
+    for (const sibling of Array.from(node.parentElement.children)) {
+      if (sibling === node || sibling.hasAttribute("inert")) continue;
+      if (keep && sibling.contains(keep)) continue;
+      sibling.setAttribute("inert", "");
+      changed.push(sibling);
+    }
+    node = node.parentElement;
+  }
+  return () => changed.forEach((el) => el.removeAttribute("inert"));
 }
 
 export default function Drawer({
@@ -47,19 +85,34 @@ export default function Drawer({
   children,
   cta,
   label = "Menu",
+  placement,
+  closeLabel,
 }: DrawerProps) {
-  const navRef = useRef<HTMLElement>(null);
+  const rootRef = useRef<HTMLElement>(null);
+  const scrimRef = useRef<HTMLDivElement>(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
 
-  // Focus the first row on open, return to the trigger on close.
+  // Make the page inert, move focus in on open, and send it back on close.
   useEffect(() => {
     if (!open) return;
-    const first = navRef.current?.querySelector<HTMLElement>(".ui-drawerlink");
-    const raf = requestAnimationFrame(() => first?.focus());
+    const root = rootRef.current;
+    if (!root) return;
+    const previous = document.activeElement as HTMLElement | null;
+    const trigger = triggerRef?.current ?? null;
+    const outer = placement ? (scrimRef.current ?? root) : root;
+    const restore = inertOutside(outer, placement ? null : trigger);
+    const first =
+      root.querySelector<HTMLElement>(".ui-drawerlink") ??
+      root.querySelector<HTMLElement>(FOCUSABLE) ??
+      root;
+    const raf = requestAnimationFrame(() => first.focus());
     return () => {
       cancelAnimationFrame(raf);
-      triggerRef?.current?.focus?.();
+      restore();
+      (trigger ?? previous)?.focus?.();
     };
-  }, [open, triggerRef]);
+  }, [open, placement, triggerRef]);
 
   // Lock the page behind the drawer.
   useEffect(() => {
@@ -71,20 +124,78 @@ export default function Drawer({
     };
   }, [open]);
 
-  // Escape closes.
+  // Escape closes. Tab and Shift+Tab cycle through the drawer, plus the
+  // trigger when the drawer sits under the header.
   useEffect(() => {
     if (!open) return;
     const onKey = (e: globalThis.KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCloseRef.current();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const root = rootRef.current;
+      if (!root) return;
+      const items = Array.from(
+        root.querySelectorAll<HTMLElement>(FOCUSABLE),
+      ).filter((el) => el.getClientRects().length > 0);
+      const trigger = placement ? null : triggerRef?.current;
+      if (trigger && trigger.isConnected) {
+        const triggerFirst =
+          trigger.compareDocumentPosition(root) &
+          Node.DOCUMENT_POSITION_FOLLOWING;
+        if (triggerFirst) items.unshift(trigger);
+        else items.push(trigger);
+      }
+      e.preventDefault();
+      if (items.length === 0) {
+        root.focus();
+        return;
+      }
+      const index = items.indexOf(document.activeElement as HTMLElement);
+      const next =
+        index === -1
+          ? e.shiftKey
+            ? items.length - 1
+            : 0
+          : (index + (e.shiftKey ? -1 : 1) + items.length) % items.length;
+      items[next].focus();
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [open, onClose]);
+  }, [open, placement, triggerRef]);
 
   if (!open) return null;
 
-  return (
-    <nav className="ui-drawer" aria-label={label} ref={navRef}>
+  const panel = (
+    <nav
+      className={`ui-drawer${placement ? ` ui-drawer--${placement}` : ""}`}
+      aria-label={label}
+      ref={rootRef}
+      tabIndex={-1}
+    >
+      {closeLabel && (
+        <button
+          className="ui-iconbtn ui-drawer__close"
+          type="button"
+          aria-label={closeLabel}
+          onClick={onClose}
+        >
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            aria-hidden="true"
+          >
+            <path d="M7 7l10 10M17 7L7 17" />
+          </svg>
+        </button>
+      )}
       {groups
         ? groups.map((group, gi) => (
             <div className="ui-drawer__group" key={gi}>
@@ -108,4 +219,21 @@ export default function Drawer({
       {cta && <div className="ui-drawer__cta">{cta}</div>}
     </nav>
   );
+
+  if (!placement) return panel;
+
+  return (
+    <div
+      ref={scrimRef}
+      className={`ui-drawer-scrim ui-drawer-scrim--${placement}`}
+      onMouseDown={(e) => {
+        if (e.target !== e.currentTarget) return;
+        // Keep the press from moving focus, so focus can go back on close.
+        e.preventDefault();
+        onClose();
+      }}
+    >
+      {panel}
+    </div>
+  );
 }

package/src/styles/controls.css

@@ -158,6 +158,9 @@
     border: 1px solid transparent;
     border-radius: var(--radius-md);
     color: var(--text);
+    /* IconButton renders a link when it has an href. Keep the count pill
+       free of the link underline. */
+    text-decoration: none;
     cursor: pointer;
     transition:
       background-color var(--duration-fast) var(--ease-standard),

package/src/styles/feedback.css

@@ -0,0 +1,148 @@
+/*
+ * Feedback styles as plain, importable CSS. This is the single copy of the
+ * .ui-alert, .ui-empty and .ui-skel rules. Alert.astro, EmptyState.astro and
+ * Skeleton.astro import it themselves, so a pure-Astro app needs nothing extra.
+ * Bundlers emit it once, however many components and pages pull it in.
+ *
+ * React and Preact islands cannot render Astro components. An island that
+ * shows an alert, an empty state or a loading skeleton writes the same markup
+ * as the Astro component and imports this sheet once:
+ *
+ *   import "@kwtv/components/styles/feedback.css";
+ *
+ * Import `@kwtv/tokens/tokens.css` before this file.
+ */
+
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  /* ---- Alert ---------------------------------------------------------------- */
+  .ui-alert {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2-5, 0.625rem);
+    padding: var(--space-3) var(--space-4);
+    border-left: 3px solid currentColor;
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+  }
+
+  .ui-alert__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-self: flex-start;
+    margin-top: calc((var(--leading-sm, 1.375rem) - 16px) / 2);
+  }
+
+  /* Body keeps full strength; the left rule carries the tone. */
+  .ui-alert__body {
+    color: var(--text);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .ui-alert__title {
+    font-weight: var(--weight-semibold);
+  }
+
+  .ui-alert--info {
+    background: var(--surface-accent);
+    color: var(--surface-accent-fg, var(--primary));
+  }
+
+  .ui-alert--success {
+    background: var(--success-bg);
+    color: var(--success);
+  }
+
+  .ui-alert--warning {
+    background: var(--warning-bg);
+    color: var(--warning);
+  }
+
+  .ui-alert--danger {
+    background: var(--danger-bg);
+    color: var(--danger);
+  }
+
+  /* ---- Empty state ---------------------------------------------------------- */
+  .ui-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2);
+    padding: var(--space-8) var(--space-6);
+    border: 1px dashed var(--border-strong);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+  }
+
+  .ui-empty__title {
+    font-size: var(--text-lg);
+    font-weight: var(--weight-semibold);
+    color: var(--text);
+  }
+
+  .ui-empty__body {
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    color: var(--text-muted);
+  }
+
+  /* The flex gap above spaces the action from the body. No extra margin. */
+
+  /* ---- Skeleton ------------------------------------------------------------- */
+  .ui-skel {
+    display: block;
+    background: var(--surface-hover);
+    background-image: linear-gradient(
+      90deg,
+      var(--surface-hover) 0%,
+      var(--border) 50%,
+      var(--surface-hover) 100%
+    );
+    background-size: 200% 100%;
+    border-radius: var(--radius-md);
+    animation: ui-skel-shimmer 1400ms ease-in-out infinite;
+  }
+
+  .ui-skel--img {
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    border-radius: 0;
+  }
+
+  .ui-skel--title {
+    height: 0.875rem;
+    border-radius: var(--radius-sm);
+  }
+
+  .ui-skel--line {
+    height: 0.625rem;
+    border-radius: var(--radius-sm);
+  }
+
+  .ui-skel--block {
+    height: 1rem;
+  }
+
+  @keyframes ui-skel-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  /* The shimmer stops for readers who ask for reduced motion. */
+  @media (prefers-reduced-motion: reduce) {
+    .ui-skel {
+      animation: none;
+      background-image: none;
+    }
+  }
+}