@kwtv/components 0.5.0 → 0.7.0

package/README.md

@@ -7,13 +7,14 @@ 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.                                                                |
-| `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` | Button and icon-button styles for React islands that render the `ui-btn` / `ui-iconbtn` classes.                                                 |
-| `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.                                                                        |
+| `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.                                              |
 
 ## Install
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwtv/components",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "license": "UNLICENSED",
   "type": "module",
   "description": "KWTV UI components for Astro, with React islands. Built on the KWTV design tokens.",
@@ -15,6 +15,11 @@
   "files": [
     "src"
   ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.astro",
+    "./src/react/*.tsx"
+  ],
   "exports": {
     "./astro/*.astro": "./src/astro/*.astro",
     "./react/*.tsx": "./src/react/*.tsx",
@@ -34,6 +39,6 @@
     }
   },
   "dependencies": {
-    "@kwtv/tokens": "^0.5.0"
+    "@kwtv/tokens": "^0.7.0"
   }
 }

package/src/astro/Alert.astro

@@ -60,7 +60,7 @@ const classes = ["ui-alert", `ui-alert--${tone}`, className]
       display: inline-flex;
       flex-shrink: 0;
       align-self: flex-start;
-      margin-top: calc((var(--leading-sm, 1.375rem) - 1em) / 2);
+      margin-top: calc((var(--leading-sm, 1.375rem) - 16px) / 2);
     }
 
     /* Body keeps full strength; the left rule carries the tone. */

package/src/astro/Badge.astro

@@ -12,6 +12,9 @@ import Icon from "./Icon.astro";
  */
 interface Props {
   tone?: "neutral" | "success" | "warning" | "danger" | "outline";
+  /** Show the tone's default status icon. Defaults to true for status tones
+   *  (success/warning/danger); pass false to suppress it for label-only use. */
+  icon?: boolean;
   removable?: boolean;
   /** aria-label for the × button when removable. Name the filter it clears. */
   removeLabel?: string;
@@ -20,6 +23,7 @@ interface Props {
 
 const {
   tone = "neutral",
+  icon: showIcon = true,
   removable = false,
   removeLabel = "Verwijderen",
   class: className,
@@ -31,7 +35,7 @@ const icons: Record<string, string> = {
   warning: "alert-triangle",
   danger: "close",
 };
-const icon = icons[tone];
+const icon = showIcon ? icons[tone] : undefined;
 
 const classes = [
   "ui-badge",

package/src/astro/Button.astro

@@ -1,5 +1,6 @@
 ---
 import Icon from "./Icon.astro";
+import "../styles/controls.css";
 
 /**
  * Button. Four hierarchies, three sizes. One primary action per view.
@@ -69,155 +70,3 @@ const tagProps = href
   )}
   {loading && <span class="ui-btn__spinner" aria-hidden="true"></span>}
 </Tag>
-
-<style>
-  @layer reset, tokens, base, components, motion, utilities;
-
-  @layer components {
-    .ui-btn {
-      --_pad-x: var(--space-5);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--space-2);
-      position: relative;
-      min-height: 40px;
-      padding: var(--space-2) var(--_pad-x);
-      border: 1px solid transparent;
-      border-radius: var(--radius-md);
-      font-family: var(--font-sans);
-      font-size: var(--text-sm);
-      font-weight: var(--weight-semibold);
-      line-height: 1;
-      text-decoration: none;
-      cursor: pointer;
-      transition:
-        background-color var(--duration-fast) var(--ease-standard),
-        border-color var(--duration-fast) var(--ease-standard),
-        transform var(--duration-fast) var(--ease-standard);
-    }
-
-    /* Sizes: 32 / 40 / 48 px. */
-    .ui-btn--sm {
-      min-height: 32px;
-      --_pad-x: var(--space-4);
-      font-size: var(--text-xs);
-    }
-    .ui-btn--md {
-      min-height: 40px;
-    }
-    .ui-btn--lg {
-      min-height: 48px;
-      --_pad-x: var(--space-6);
-      font-size: var(--text-base);
-    }
-
-    .ui-btn--block {
-      display: flex;
-      width: 100%;
-    }
-
-    /* Primary. */
-    .ui-btn--primary {
-      background: var(--primary);
-      color: var(--primary-fg);
-    }
-    .ui-btn--primary:hover,
-    .ui-btn--primary.is-hover {
-      background: var(--primary-hover);
-    }
-
-    /* Secondary. */
-    .ui-btn--secondary {
-      background: transparent;
-      border-color: var(--border-strong);
-      color: var(--text);
-    }
-    .ui-btn--secondary:hover,
-    .ui-btn--secondary.is-hover {
-      background: var(--surface-hover);
-    }
-
-    /* Accent. One call to action per page. */
-    .ui-btn--accent {
-      background: var(--accent);
-      color: var(--accent-fg);
-    }
-    .ui-btn--accent:hover,
-    .ui-btn--accent.is-hover {
-      background: var(--accent-hover);
-    }
-
-    /* Ghost. Low-weight actions. */
-    .ui-btn--ghost {
-      background: transparent;
-      color: var(--link);
-      padding-inline: var(--space-3);
-    }
-    .ui-btn--ghost:hover,
-    .ui-btn--ghost.is-hover {
-      background: var(--surface-hover);
-      color: var(--link-hover);
-    }
-
-    /* Focus: 2 px ring plus 4 px halo. */
-    .ui-btn:focus-visible,
-    .ui-btn.is-focus {
-      outline: 2px solid var(--focus);
-      outline-offset: 2px;
-      box-shadow: 0 0 0 4px var(--focus-outer);
-    }
-
-    /* Pressed: 1 px downward shift. */
-    .ui-btn:active,
-    .ui-btn.is-active {
-      transform: translateY(1px);
-    }
-
-    /* Disabled. */
-    .ui-btn:disabled,
-    .ui-btn[aria-disabled="true"] {
-      opacity: 0.5;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    /* Loading: label hidden, spinner shown. */
-    .ui-btn.is-loading {
-      cursor: progress;
-    }
-    .ui-btn.is-loading .ui-btn__label,
-    .ui-btn.is-loading .ui-btn__icon {
-      visibility: hidden;
-    }
-    .ui-btn__spinner {
-      position: absolute;
-      width: 16px;
-      height: 16px;
-      border: 2px solid currentColor;
-      border-top-color: transparent;
-      border-radius: var(--radius-full);
-      animation: ui-btn-spin var(--duration-slower) linear infinite;
-    }
-
-    .ui-btn__icon {
-      display: inline-flex;
-      font-size: 1em;
-    }
-
-    @keyframes ui-btn-spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .ui-btn {
-        transition: none;
-      }
-      .ui-btn__spinner {
-        animation-duration: 1200ms;
-      }
-    }
-  }
-</style>

package/src/astro/Checkbox.astro

@@ -1,8 +1,9 @@
 ---
 /**
- * Checkbox. Native control tinted with accent-color, wrapped in a label so the
- * whole row is the hit area. 17 px box, 32 px row. Disabled rows keep their
- * text legible.
+ * Checkbox. Custom-styled native control: appearance:none box with a CSS
+ * checkmark SVG, so the checked state is consistent across surfaces and themes.
+ * Wrapped in a label so the whole row is the hit area. 17 px box, 32 px row.
+ * Disabled rows keep their text legible.
  *
  * When several checkboxes form a question, put them in a <fieldset> with a
  * <legend> in the consuming page so the question is announced first.
@@ -62,12 +63,28 @@ const classes = ["ui-check", disabled && "is-disabled", className]
     }
 
     .ui-check input {
+      appearance: none;
+      -webkit-appearance: none;
       width: 17px;
       height: 17px;
       flex-shrink: 0;
       margin-top: calc((var(--leading-sm, 1.375rem) - 17px) / 2);
-      accent-color: var(--primary);
+      border: 1.5px solid var(--border-strong);
+      border-radius: var(--radius-xs, 3px);
+      background: var(--surface);
       cursor: pointer;
+      transition:
+        background-color var(--duration-fast, 100ms) var(--ease-standard, ease),
+        border-color var(--duration-fast, 100ms) var(--ease-standard, ease);
+    }
+
+    .ui-check input:checked {
+      background: var(--primary);
+      border-color: var(--primary);
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 5 4.5 8.5 11 1'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 10px 8px;
     }
 
     .ui-check input:focus-visible {
@@ -83,6 +100,7 @@ const classes = ["ui-check", disabled && "is-disabled", className]
 
     .ui-check.is-disabled input {
       cursor: not-allowed;
+      opacity: 0.45;
     }
 
     @media (max-width: 700px), (pointer: coarse) {

package/src/astro/CopyChip.astro

@@ -0,0 +1,128 @@
+---
+/**
+ * CopyChip. Displays a short text value (typically an email or code string)
+ * in a monospace pill with a copy-to-clipboard button. Renders the text as
+ * static HTML; the button is injected client-side by the bundled script, so
+ * the component degrades cleanly without JavaScript.
+ *
+ * @prop {string} text   The value to display and copy.
+ * @prop {string} [label] Accessible label for the copy button (default: "Copy").
+ * @prop {string} [class]
+ */
+interface Props {
+  text: string;
+  label?: string;
+  class?: string;
+}
+
+const { text, label = "Copy", class: className, ...rest } = Astro.props;
+const classes = ["ui-copy-chip", className].filter(Boolean).join(" ");
+---
+
+<span class={classes} data-copy={text} {...rest}>
+  <span class="ui-copy-chip__text">{text}</span>
+</span>
+
+<script>
+  function initCopyChip(el: HTMLElement) {
+    if (el.querySelector(".ui-copy-chip__btn")) return;
+
+    const text = el.getAttribute("data-copy") ?? "";
+    const label = el.getAttribute("data-label") ?? "Copy";
+
+    const COPY_ICON = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M3 11V3a1 1 0 0 1 1-1h8"/></svg>`;
+    const CHECK_ICON = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="2 8 6 12 14 4"/></svg>`;
+
+    const btn = document.createElement("button");
+    btn.className = "ui-copy-chip__btn";
+    btn.type = "button";
+    btn.setAttribute("aria-label", label);
+    btn.innerHTML = COPY_ICON;
+
+    btn.addEventListener("click", async () => {
+      try {
+        await navigator.clipboard.writeText(text);
+        btn.innerHTML = CHECK_ICON;
+        btn.setAttribute("aria-label", "Copied");
+        setTimeout(() => {
+          btn.innerHTML = COPY_ICON;
+          btn.setAttribute("aria-label", label);
+        }, 2000);
+      } catch (_e) {
+        // Clipboard API unavailable.
+      }
+    });
+
+    el.appendChild(btn);
+  }
+
+  function initAll(root: Document | HTMLElement) {
+    root
+      .querySelectorAll<HTMLElement>(".ui-copy-chip:not([data-copy-ready])")
+      .forEach((el) => {
+        el.setAttribute("data-copy-ready", "");
+        initCopyChip(el);
+      });
+  }
+
+  initAll(document);
+  document.addEventListener("astro:page-load", () => initAll(document));
+</script>
+
+<style>
+  @layer reset, tokens, base, components, motion, utilities;
+
+  @layer components {
+    .ui-copy-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-1);
+      padding: 1px var(--space-2);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      background: var(--surface-hover);
+      font-family: var(--font-mono, monospace);
+      font-size: 0.875em;
+      color: var(--text);
+      white-space: nowrap;
+      vertical-align: middle;
+    }
+
+    .ui-copy-chip__text {
+      user-select: all;
+    }
+
+    .ui-copy-chip__btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      border: none;
+      border-radius: var(--radius-xs);
+      background: transparent;
+      color: var(--text-muted);
+      cursor: pointer;
+      flex-shrink: 0;
+      transition:
+        color var(--duration-fast, 100ms) var(--ease-standard, ease),
+        background-color var(--duration-fast, 100ms) var(--ease-standard, ease);
+    }
+
+    .ui-copy-chip__btn:hover {
+      color: var(--text);
+      background: var(--border);
+    }
+
+    .ui-copy-chip__btn:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+    }
+
+    .ui-copy-chip__btn svg {
+      width: 13px;
+      height: 13px;
+    }
+  }
+</style>

package/src/astro/IconButton.astro

@@ -1,5 +1,6 @@
 ---
 import Icon from "./Icon.astro";
+import "../styles/controls.css";
 
 /**
  * Icon button. Square 44 px control for the header: cart and menu. Always
@@ -46,78 +47,3 @@ const classes = ["ui-iconbtn", className].filter(Boolean).join(" ");
     </span>
   )}
 </button>
-
-<style>
-  @layer reset, tokens, base, components, motion, utilities;
-
-  @layer components {
-    .ui-iconbtn {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 44px;
-      height: 44px;
-      padding: 0;
-      background: transparent;
-      border: 1px solid transparent;
-      border-radius: var(--radius-md);
-      color: var(--text);
-      cursor: pointer;
-      transition:
-        background-color var(--duration-fast) var(--ease-standard),
-        border-color var(--duration-fast) var(--ease-standard);
-    }
-
-    .ui-iconbtn:hover,
-    .ui-iconbtn.is-hover {
-      background: var(--surface-hover);
-      border-color: var(--border-strong);
-    }
-
-    .ui-iconbtn:focus-visible,
-    .ui-iconbtn.is-focus {
-      outline: 2px solid var(--focus);
-      outline-offset: 2px;
-      box-shadow: 0 0 0 4px var(--focus-outer);
-    }
-
-    .ui-iconbtn:active,
-    .ui-iconbtn.is-active {
-      background: var(--surface-hover);
-    }
-
-    .ui-iconbtn:disabled,
-    .ui-iconbtn.is-disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    /* Count pill: 19 px, accent fill, top-right. */
-    .ui-iconbtn__count {
-      position: absolute;
-      top: 3px;
-      right: 3px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 19px;
-      height: 19px;
-      padding: 0 var(--space-1);
-      background: var(--accent);
-      color: var(--accent-fg);
-      border-radius: var(--radius-full);
-      font-family: var(--font-sans);
-      font-size: var(--text-2xs);
-      font-weight: var(--weight-semibold);
-      line-height: 1;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .ui-iconbtn {
-        transition: none;
-      }
-    }
-  }
-</style>

package/src/astro/NavDropdown.astro

@@ -1,5 +1,6 @@
 ---
 import Icon from "./Icon.astro";
+import "../styles/navlink.css";
 
 /**
  * A header navigation group: a button trigger plus a panel of links. The panel
@@ -104,51 +105,8 @@ const classes = ["ui-navgroup", open && "is-open", className]
       display: inline-block;
     }
 
-    /* The trigger carries .ui-navlink, but that class is styled in NavLink.astro */
-    /* and Astro scopes styles per component: NavLink's rules only match NavLink's */
-    /* own markup. Without this block the button falls back to the browser default */
-    /* chrome, a grey fill and a border. Restated here so the trigger matches the */
-    /* sibling links it sits next to. */
-    .ui-navlink {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-1-5);
-      padding: 7px 10px;
-      margin: -7px -10px;
-      border-radius: var(--radius-sm);
-      font-family: var(--font-sans);
-      font-size: var(--text-sm);
-      font-weight: var(--weight-medium);
-      line-height: 1;
-      color: var(--text);
-      text-decoration: none;
-      background: none;
-      border: 0;
-      cursor: pointer;
-      transition: color var(--duration-fast) var(--ease-standard);
-    }
-
-    .ui-navlink::after {
-      content: "";
-      position: absolute;
-      left: 10px;
-      right: 10px;
-      bottom: 2px;
-      height: 2px;
-      background: currentColor;
-      opacity: 0;
-      transition: opacity var(--duration-fast) var(--ease-standard);
-    }
-
-    .ui-navlink:hover,
-    .ui-navlink.is-hover {
-      color: var(--link-hover);
-    }
-    .ui-navlink:hover::after,
-    .ui-navlink.is-hover::after {
-      opacity: 1;
-    }
+    /* The trigger is a .ui-navlink, styled in styles/navlink.css. Only the */
+    /* group's own states are here. */
 
     /* While the panel is open the trigger reads as active, the same way the */
     /* current page does. */
@@ -158,13 +116,6 @@ const classes = ["ui-navgroup", open && "is-open", className]
       opacity: 1;
     }
 
-    .ui-navlink:focus-visible,
-    .ui-navlink.is-focus {
-      outline: 2px solid var(--focus);
-      outline-offset: 2px;
-      box-shadow: 0 0 0 4px var(--focus-outer);
-    }
-
     /* The chevron turns over when the panel is open. */
     .ui-navlink > span {
       display: inline-flex;
@@ -221,8 +172,6 @@ const classes = ["ui-navgroup", open && "is-open", className]
 
     @media (prefers-reduced-motion: reduce) {
       .ui-navpanel :global(a),
-      .ui-navlink,
-      .ui-navlink::after,
       .ui-navlink > span {
         transition: none;
       }

package/src/astro/NavLink.astro

@@ -1,4 +1,6 @@
 ---
+import "../styles/navlink.css";
+
 /**
  * A navigation link for the header. Pads out to a 34 px row so the focus ring
  * never crowds the text, with an equal negative margin so the header rhythm is
@@ -26,72 +28,3 @@ const classes = ["ui-navlink", current && "is-current", className]
 >
   <slot />
 </a>
-
-<style>
-  @layer reset, tokens, base, components, motion, utilities;
-
-  @layer components {
-    .ui-navlink {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-1-5);
-      /* 7 px block / 10 px inline padding with an equal negative margin, so the focus ring has room but the header rhythm does not shift. */
-      padding: 7px 10px;
-      margin: -7px -10px;
-      border-radius: var(--radius-sm);
-      font-family: var(--font-sans);
-      font-size: var(--text-sm);
-      font-weight: var(--weight-medium);
-      line-height: 1;
-      color: var(--text);
-      text-decoration: none;
-      background: none;
-      border: 0;
-      cursor: pointer;
-      transition: color var(--duration-fast) var(--ease-standard);
-    }
-
-    .ui-navlink::after {
-      content: "";
-      position: absolute;
-      left: 10px;
-      right: 10px;
-      bottom: 2px;
-      height: 2px;
-      background: currentColor;
-      opacity: 0;
-      transition: opacity var(--duration-fast) var(--ease-standard);
-    }
-
-    .ui-navlink:hover,
-    .ui-navlink.is-hover {
-      color: var(--link-hover);
-    }
-    .ui-navlink:hover::after,
-    .ui-navlink.is-hover::after {
-      opacity: 1;
-    }
-
-    .ui-navlink.is-current {
-      font-weight: var(--weight-semibold);
-    }
-    .ui-navlink.is-current::after {
-      opacity: 1;
-    }
-
-    .ui-navlink:focus-visible,
-    .ui-navlink.is-focus {
-      outline: 2px solid var(--focus);
-      outline-offset: 2px;
-      box-shadow: 0 0 0 4px var(--focus-outer);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .ui-navlink,
-      .ui-navlink::after {
-        transition: none;
-      }
-    }
-  }
-</style>

package/src/astro/ProductCard.astro

@@ -18,6 +18,12 @@ interface Props {
   ribbon?: "new" | "promo" | "last" | "fav";
   soldOut?: boolean;
   class?: string;
+  /** Responsive srcset for the product image (original format). */
+  srcset?: string;
+  /** Sizes descriptor matching the card's layout width. */
+  sizes?: string;
+  /** AVIF srcset — when provided, a `<picture>` with an AVIF `<source>` is rendered. */
+  avifSrcset?: string;
 }
 
 const {
@@ -31,6 +37,9 @@ const {
   ribbon,
   soldOut = false,
   class: className,
+  srcset,
+  sizes,
+  avifSrcset,
   ...rest
 } = Astro.props;
 
@@ -55,13 +64,30 @@ const classes = ["ui-product", soldOut && "is-disabled", className]
       <i>{soldOut ? "Uitverkocht" : ribbonLabel[ribbon!]}</i>
     </span>
   )}
-  <img
-    class="ui-product__img"
-    loading="lazy"
-    decoding="async"
-    src={img}
-    alt={alt}
-  />
+  {avifSrcset ? (
+    <picture class="ui-product__img">
+      <source type="image/avif" srcset={avifSrcset} sizes={sizes} />
+      <img
+        src={img}
+        srcset={srcset}
+        sizes={sizes}
+        alt={alt}
+        loading="lazy"
+        decoding="async"
+        style="width:100%;height:100%;object-fit:inherit;"
+      />
+    </picture>
+  ) : (
+    <img
+      class="ui-product__img"
+      loading="lazy"
+      decoding="async"
+      src={img}
+      srcset={srcset}
+      sizes={sizes}
+      alt={alt}
+    />
+  )}
   <span class="ui-product__body">
     <span class="ui-product__title">{title}</span>
     {meta && <span class="ui-product__meta">{meta}</span>}

package/src/styles/base.css

@@ -10,6 +10,12 @@
 @layer reset, tokens, base, components, motion, utilities;
 
 @layer base {
+  /* Text selection: sage fill instead of the browser default blue. */
+  ::selection {
+    background-color: var(--surface-accent);
+    color: var(--surface-accent-fg);
+  }
+
   /* Screen-reader-only, still announced. */
   .ui-sr-only {
     position: absolute;

package/src/styles/controls.css

@@ -1,14 +1,16 @@
 /*
- * Control styles as plain, importable CSS. The Astro components (Button.astro,
- * IconButton.astro) carry these same rules scoped to themselves, so a pure-Astro
- * app needs nothing here. React and Preact islands cannot see Astro's scoped
- * styles, so any React code that renders the .ui-btn / .ui-iconbtn classes
- * imports this sheet once:
+ * Control styles as plain, importable CSS. This is the single copy of the
+ * .ui-btn and .ui-iconbtn rules. Button.astro and IconButton.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 see Astro components, so any React code that
+ * renders the .ui-btn / .ui-iconbtn classes without an Astro Button on the
+ * page imports this sheet once:
  *
  *   import "@kwtv/components/styles/controls.css";
  *
- * Values match the scoped versions exactly. Import `@kwtv/tokens/tokens.css`
- * before this file.
+ * Import `@kwtv/tokens/tokens.css` before this file.
  */
 
 @layer reset, tokens, base, components, motion, utilities;

package/src/styles/navlink.css

@@ -0,0 +1,73 @@
+/*
+ * Header navigation link. This is the single copy of the .ui-navlink rules.
+ * NavLink.astro and NavDropdown.astro import it, so a bundler emits it once.
+ * A plain sheet, not scoped, because NavDropdown's trigger is a <button> that
+ * carries the same class. Import `@kwtv/tokens/tokens.css` before this file.
+ */
+
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ui-navlink {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1-5);
+    /* 7 px block / 10 px inline padding with an equal negative margin, so the focus ring has room but the header rhythm does not shift. */
+    padding: 7px 10px;
+    margin: -7px -10px;
+    border-radius: var(--radius-sm);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    line-height: 1;
+    color: var(--text);
+    text-decoration: none;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    transition: color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ui-navlink::after {
+    content: "";
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    bottom: 2px;
+    height: 2px;
+    background: currentColor;
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+  }
+
+  .ui-navlink:hover,
+  .ui-navlink.is-hover {
+    color: var(--link-hover);
+  }
+  .ui-navlink:hover::after,
+  .ui-navlink.is-hover::after {
+    opacity: 1;
+  }
+
+  .ui-navlink.is-current {
+    font-weight: var(--weight-semibold);
+  }
+  .ui-navlink.is-current::after {
+    opacity: 1;
+  }
+
+  .ui-navlink:focus-visible,
+  .ui-navlink.is-focus {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--focus-outer);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-navlink,
+    .ui-navlink::after {
+      transition: none;
+    }
+  }
+}