@kwtv/components 0.8.0 → 0.10.0

package/src/astro/Swatch.astro

@@ -1,8 +1,14 @@
 ---
+import "../styles/filters.css";
+
 /**
  * Colour swatch. 30 px circle, 32 px on touch. A <button> carrying the colour
  * name in `label` (→ aria-label), because the circle alone tells a colour-blind
  * reader nothing. Selection adds a 2 px ring so it reads without colour.
+ * When selected, `selectedLabel` is added to the name after a comma.
+ *
+ * React and Preact islands write the same markup and import
+ * `@kwtv/components/styles/filters.css`.
  */
 interface Props {
   /** CSS colour value for the fill. */
@@ -11,6 +17,8 @@ interface Props {
   label: string;
   selected?: boolean;
   disabled?: boolean;
+  /** Added to the accessible name when selected. Defaults to "geselecteerd". */
+  selectedLabel?: string;
   type?: "button" | "submit";
   class?: string;
 }
@@ -20,6 +28,7 @@ const {
   label,
   selected = false,
   disabled = false,
+  selectedLabel = "geselecteerd",
   type = "button",
   class: className,
   ...rest
@@ -34,7 +43,7 @@ const classes = [
   .filter(Boolean)
   .join(" ");
 
-const ariaLabel = selected ? `${label}, geselecteerd` : label;
+const ariaLabel = selected ? `${label}, ${selectedLabel}` : label;
 ---
 
 <button
@@ -46,59 +55,3 @@ const ariaLabel = selected ? `${label}, geselecteerd` : label;
   disabled={disabled}
   {...rest}
 ></button>
-
-<style>
-  @layer reset, tokens, base, components, motion, utilities;
-
-  @layer components {
-    .ui-swatch {
-      width: 30px;
-      height: 30px;
-      padding: 0;
-      background: var(--swatch);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-full);
-      cursor: pointer;
-      transition: box-shadow var(--duration-fast) var(--ease-standard);
-    }
-
-    .ui-swatch:hover,
-    .ui-swatch.is-hover {
-      box-shadow: 0 0 0 2px var(--border-strong);
-    }
-
-    .ui-swatch:focus-visible,
-    .ui-swatch.is-focus {
-      outline: 2px solid var(--focus);
-      outline-offset: 2px;
-      box-shadow: 0 0 0 4px var(--focus-outer);
-    }
-
-    /* Selected: 2 px ring, readable without colour. */
-    .ui-swatch.is-selected,
-    .ui-swatch[aria-pressed="true"] {
-      box-shadow:
-        0 0 0 2px var(--surface),
-        0 0 0 4px var(--border-strong);
-    }
-
-    .ui-swatch.is-disabled,
-    .ui-swatch:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .ui-swatch {
-        transition: none;
-      }
-    }
-
-    @media (max-width: 700px), (pointer: coarse) {
-      .ui-swatch {
-        width: 32px;
-        height: 32px;
-      }
-    }
-  }
-</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,108 @@
   .ui-drawer__cta {
     margin-top: var(--space-2);
   }
+
+  .ui-drawer__close {
+    align-self: flex-end;
+    flex-shrink: 0;
+  }
+
+  /* Title row. The title sits left of the close button, on the row inset. */
+  .ui-drawer__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+  }
+
+  .ui-drawer__head .ui-drawer__close {
+    align-self: center;
+  }
+
+  .ui-drawer__title {
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+    margin: 0;
+    padding: 0 var(--space-3);
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--leading-base);
+    font-weight: var(--weight-semibold);
+    color: var(--text);
+  }
+
+  /* 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;
+  }
+
+  /* Full width on small screens. Bottom and the panel under the header are */
+  /* already full width. */
+  @media (max-width: 700px) {
+    .ui-drawer--full.ui-drawer--start,
+    .ui-drawer--full.ui-drawer--end {
+      width: 100%;
+    }
+  }
+
+  @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,33 @@
-import { useEffect, useRef, type ReactNode } from "react";
+import { useEffect, useId, 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.
+ *
+ * Pass `title` to show a heading in the top row, left of the close button.
+ * The title then names the drawer through aria-labelledby, in place of
+ * `label`. Pass `size="full"` to let a start or end drawer fill the viewport
+ * width on screens up to 700 px wide. Wider screens keep the 360 px panel.
+ * Without these two props the drawer renders as before.
+ *
+ * Uses only hooks and DOM calls that preact/compat supports.
  */
 
 export interface DrawerLink {
@@ -37,6 +55,42 @@ 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;
+  /**
+   * A visible h2 in the top row, beside the close button. It becomes the
+   * accessible name of the drawer, in place of `label`.
+   */
+  title?: string;
+  /**
+   * "full" fills the viewport width on screens up to 700 px wide. Leave unset
+   * for the default width.
+   */
+  size?: "default" | "full";
+}
+
+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 +101,37 @@ export default function Drawer({
   children,
   cta,
   label = "Menu",
+  placement,
+  closeLabel,
+  title,
+  size = "default",
 }: DrawerProps) {
-  const navRef = useRef<HTMLElement>(null);
+  const titleId = useId();
+  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 +143,90 @@ 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 closeButton = 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>
+  );
+
+  const panel = (
+    <nav
+      className={`ui-drawer${placement ? ` ui-drawer--${placement}` : ""}${size === "full" ? " ui-drawer--full" : ""}`}
+      aria-label={title ? undefined : label}
+      aria-labelledby={title ? titleId : undefined}
+      ref={rootRef}
+      tabIndex={-1}
+    >
+      {title ? (
+        <div className="ui-drawer__head">
+          <h2 className="ui-drawer__title" id={titleId}>
+            {title}
+          </h2>
+          {closeButton}
+        </div>
+      ) : (
+        closeButton
+      )}
       {groups
         ? groups.map((group, gi) => (
             <div className="ui-drawer__group" key={gi}>
@@ -108,4 +250,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/badge.css

@@ -0,0 +1,95 @@
+/*
+ * Badge styles as plain, importable CSS. This is the single copy of the
+ * .ui-badge rules. Badge.astro imports it itself, so a pure-Astro app needs
+ * nothing extra.
+ *
+ * React and Preact islands cannot render Astro components. An island that
+ * shows a badge or a removable filter tag writes the same markup as the
+ * Astro component and imports this sheet once:
+ *
+ *   import "@kwtv/components/styles/badge.css";
+ *
+ * Import `@kwtv/tokens/tokens.css` before this file.
+ */
+
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ui-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1-5);
+    min-height: 24px;
+    padding: 0 var(--space-2);
+    border: 1px solid transparent;
+    border-radius: var(--radius-full);
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .ui-badge__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .ui-badge--neutral {
+    background: var(--surface-accent);
+    color: var(--surface-accent-fg, var(--text));
+  }
+
+  .ui-badge--success {
+    background: var(--success-bg);
+    color: var(--success);
+  }
+
+  .ui-badge--warning {
+    background: var(--warning-bg);
+    color: var(--warning);
+  }
+
+  .ui-badge--danger {
+    background: var(--danger-bg);
+    color: var(--danger);
+  }
+
+  /* Outline keeps the strong border and full-strength text, so it reads */
+  /* without relying on a fill. */
+  .ui-badge--outline {
+    background: transparent;
+    border: 1px solid var(--border-strong);
+    color: var(--text);
+  }
+
+  .ui-badge--removable {
+    padding-right: var(--space-1);
+  }
+
+  /* Small × target grows with padding plus an equal negative margin, so the */
+  /* hit area grows without moving the layout. */
+  .ui-badge__x {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-2);
+    margin: calc(-1 * var(--space-2));
+    margin-left: 0;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-sm);
+    color: inherit;
+    cursor: pointer;
+  }
+
+  .ui-badge__x:hover {
+    color: var(--danger);
+  }
+
+  .ui-badge__x:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--focus-outer);
+  }
+}

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),