@kwtv/components 0.1.1 → 0.1.3

package/package.json

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

package/src/astro/Alert.astro

@@ -47,7 +47,7 @@ const classes = ["ui-alert", `ui-alert--${tone}`, className]
     gap: var(--space-2-5, 0.625rem);
     padding: var(--space-3) var(--space-4);
     border-left: 3px solid currentColor;
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-md);
     font-family: var(--font-sans);
     font-size: var(--text-sm);
     line-height: var(--leading-sm);

package/src/astro/Band.astro

@@ -7,8 +7,12 @@
  * That is the whole reason this is a component and not a background utility:
  * putting body text on sage without the flip fails AA.
  *
- * Cards placed on the band fall back to the paper surface, so they still read
- * as cards rather than dissolving into the band behind them.
+ * Cards placed on the band move to a lighter tint of the band's own surface,
+ * so they read as part of the band rather than a return to plain paper.
+ *
+ * Corner radius matches every other surface in the system (Card, PickCard,
+ * NavDropdown's panel): --radius-lg. A band that sits inset in a page, next
+ * to a rounded card, needs the same rounding or the two read as unrelated.
  */
 interface Props {
   /** Renders as <section> by default. Use "div" when the band is not a
@@ -29,7 +33,8 @@ const classes = ["ui-band", className].filter(Boolean).join(" ");
 <style>
   .ui-band {
     background: var(--surface-accent);
-    border-top: 1px solid var(--border-strong);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-lg);
     color: var(--surface-accent-fg);
   }
 
@@ -56,11 +61,20 @@ const classes = ["ui-band", className].filter(Boolean).join(" ");
     color: var(--surface-accent-muted);
   }
 
-  /* A card on the band returns to paper, so it still reads as a raised thing. */
+  /* A card on the band moves to a lighter tint of the band's own surface,
+     rather than to plain paper, so it still reads as part of the band. It
+     carries its own foreground role: --surface-accent-fg is tuned for the
+     band's own, darker/mid tint and is not guaranteed to clear AA on this
+     lighter one. */
   .ui-band :global(.ui-card),
   .ui-band :global(.ui-card--raised) {
-    background: var(--surface);
-    border-color: var(--border);
+    background: var(--surface-accent-subtle);
+    border-color: var(--border-strong);
+  }
+  .ui-band :global(.ui-card__eyebrow),
+  .ui-band :global(.ui-card__title),
+  .ui-band :global(.ui-card__body) {
+    color: var(--surface-accent-subtle-fg);
   }
 
   /* Buttons keep their own label colours: they carry their own fill, so the

package/src/astro/DotGrid.astro

@@ -1,5 +1,8 @@
 ---
-/** Decorative drifting dot field used behind short hero copy. */
+/** Decorative drifting dot field used behind short hero copy.
+ * Override --dotgrid-color and --dotgrid-opacity for a different backing surface;
+ * verify the brightest moving dot against the copy, not only the flat surface.
+ */
 interface Props {
   compact?: boolean;
   class?: string;
@@ -29,9 +32,9 @@ const classes = ["pl-dotgrid", compact && "pl-dotgrid--compact", className]
   .pl-dotgrid__dots {
     position: absolute;
     inset: 0;
-    background-image: radial-gradient(var(--sage-light) 1.4px, transparent 1.6px);
+    background-image: radial-gradient(var(--dotgrid-color, var(--sage-light)) 1.4px, transparent 1.6px);
     background-size: 28px 28px;
-    opacity: 0.7;
+    opacity: var(--dotgrid-opacity, var(--dotgrid-theme-opacity, .7));
     animation: pl-drift 6s linear infinite;
   }
 
@@ -54,6 +57,12 @@ const classes = ["pl-dotgrid", compact && "pl-dotgrid--compact", className]
     font-size: var(--text-base);
   }
 
+  /* Explicit themes win over OS preference, as in the token cascade. */
+  :global([data-theme="dark"]) .pl-dotgrid { --dotgrid-theme-opacity: .2; }
+  @media (prefers-color-scheme: dark) {
+    :global(:root:not([data-theme])) .pl-dotgrid { --dotgrid-theme-opacity: .2; }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .pl-dotgrid__dots {
       animation: none;

package/src/astro/EmptyState.astro

@@ -29,7 +29,7 @@ const hasAction = Astro.slots.has("action");
     flex-direction: column;
     align-items: flex-start;
     gap: var(--space-2);
-    padding: var(--space-10) var(--space-6);
+    padding: var(--space-8) var(--space-6);
     border: 1px dashed var(--border-strong);
     border-radius: var(--radius-lg);
     background: var(--surface);
@@ -47,7 +47,6 @@ const hasAction = Astro.slots.has("action");
     color: var(--text-muted);
   }
 
-  .ui-empty__action {
-    margin-top: var(--space-2);
-  }
+  /* 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/Footer.astro

@@ -52,8 +52,8 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
     grid-template-columns: 1.5fr 1fr 1.3fr;
     gap: var(--space-10);
     padding: var(--space-10);
-    background: var(--sage-xdark);
-    color: var(--ivory-light);
+    background: var(--surface-inverse);
+    color: var(--surface-inverse-fg);
   }
 
   .ui-footer__brandblock {
@@ -71,13 +71,13 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
   }
   .ui-footer__brand :global(span) {
     font-weight: var(--weight-regular);
-    color: var(--sage-light);
+    color: var(--surface-inverse-muted);
   }
 
   .ui-footer__addr {
     font-size: var(--text-sm);
     line-height: var(--leading-sm);
-    color: var(--ivory-light);
+    color: var(--surface-inverse-fg);
   }
   .ui-footer__addr :global(a) {
     color: inherit;
@@ -101,9 +101,9 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
     flex-wrap: wrap;
     margin-top: var(--space-4);
     padding-top: var(--space-5);
-    border-top: 1px solid var(--sage-text);
+    border-top: 1px solid var(--surface-inverse-border);
     font-size: var(--text-xs);
-    color: var(--sage-light);
+    color: var(--surface-inverse-muted);
   }
 
   .ui-footer__policies {
@@ -112,7 +112,7 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
     gap: var(--space-4);
   }
   .ui-footer__bar :global(a) {
-    color: var(--ivory-light);
+    color: var(--surface-inverse-fg);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
@@ -156,7 +156,7 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
     order: 1;
     font-size: var(--text-lg);
     font-weight: var(--weight-regular);
-    color: var(--sage-light);
+    color: var(--surface-inverse-muted);
   }
   .ui-footer--mobile.ui-footer--site .ui-footer__addr {
     order: 2;
@@ -178,7 +178,7 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
   .ui-footer--mobile.ui-footer--site .ui-footer__social :global(.ui-social) {
     width: 48px;
     height: 48px;
-    border: 1px solid var(--sage-text);
+    border: 1px solid var(--surface-inverse-border);
     border-radius: var(--radius-full);
   }
   .ui-footer--mobile.ui-footer--site :global(.ui-footer__newsletter) {

package/src/astro/Marquee.astro

@@ -38,11 +38,11 @@ const { items, divider = "✦", class: className } = Astro.props;
 
 <style>
   .ui-marquee {
-    background: var(--sage-xdark);
-    color: var(--ivory-light);
+    background: var(--surface-banner);
+    color: var(--surface-inverse-fg);
     overflow: hidden;
     padding-block: var(--space-3);
-    border-block: 1px solid var(--sage-text);
+    border-block: 1px solid var(--surface-inverse-border);
     transform: rotate(-1.2deg) scale(1.02);
   }
   .ui-marquee__track {

package/src/astro/NavDropdown.astro

@@ -3,9 +3,13 @@ import Icon from "./Icon.astro";
 
 /**
  * A header navigation group: a button trigger plus a panel of links. The panel
- * opens on hover and on :focus-within, so it is reachable without a mouse. The
- * trigger is a real <button> with aria-expanded; for static rendering the open
- * state is CSS-driven. Pass `open` to pin it open for specimens.
+ * opens on hover and on :focus-within for mouse and keyboard users, but a tap
+ * on a touchscreen fires neither, and Safari does not focus a <button> on
+ * click either: without more, those users could never open it. So the trigger
+ * also carries a click handler that toggles `.is-open` directly, with an
+ * outside-click and Escape to close. That script is what makes the dropdown
+ * reachable by tap; the CSS-only hover/focus-within path keeps working
+ * underneath it for everyone else. Pass `open` to pin it open for specimens.
  *
  * Put <a> links in the default slot; they fill the panel.
  */
@@ -22,7 +26,7 @@ const classes = ["ui-navgroup", open && "is-open", className]
   .join(" ");
 ---
 
-<div class={classes} {...rest}>
+<div class={classes} data-navdropdown {...rest}>
   <button class="ui-navlink" type="button" aria-expanded={open ? "true" : "false"}>
     {label}
     <span aria-hidden="true"><Icon name="chevron-down" size={11} stroke={2.4} /></span>
@@ -32,6 +36,49 @@ const classes = ["ui-navgroup", open && "is-open", className]
   </div>
 </div>
 
+<script>
+  // Click-to-toggle, on top of the CSS hover/focus-within path: the only way
+  // a touchscreen tap, or a Safari click (which does not focus a <button>),
+  // can open the panel at all.
+  document.querySelectorAll<HTMLElement>("[data-navdropdown]").forEach((group) => {
+    const trigger = group.querySelector<HTMLButtonElement>(".ui-navlink");
+    if (!trigger) return;
+
+    const close = () => {
+      group.classList.remove("is-open");
+      trigger.setAttribute("aria-expanded", "false");
+    };
+
+    trigger.addEventListener("click", (event) => {
+      const willOpen = !group.classList.contains("is-open");
+      document.querySelectorAll<HTMLElement>("[data-navdropdown].is-open").forEach((other) => {
+        if (other === group) return;
+        other.classList.remove("is-open");
+        other.querySelector<HTMLButtonElement>(".ui-navlink")?.setAttribute("aria-expanded", "false");
+      });
+      group.classList.toggle("is-open", willOpen);
+      trigger.setAttribute("aria-expanded", String(willOpen));
+      event.stopPropagation();
+    });
+
+    group.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        close();
+        trigger.focus();
+      }
+    });
+  });
+
+  document.addEventListener("click", (event) => {
+    document.querySelectorAll<HTMLElement>("[data-navdropdown].is-open").forEach((group) => {
+      if (!group.contains(event.target as Node)) {
+        group.classList.remove("is-open");
+        group.querySelector<HTMLButtonElement>(".ui-navlink")?.setAttribute("aria-expanded", "false");
+      }
+    });
+  });
+</script>
+
 <style>
   .ui-navgroup {
     position: relative;

package/src/astro/Newsletter.astro

@@ -69,21 +69,21 @@ const classes = ["ui-news", stacked && "ui-news--stacked", className]
     min-width: 0;
     min-height: 48px;
     padding: 0 var(--space-4);
-    background: var(--ivory-xlight);
-    border: 1px solid transparent;
+    background: var(--surface-light);
+    border: 1px solid var(--border-strong-light);
     border-radius: var(--radius-md);
     font-family: var(--font-sans);
     font-size: var(--text-sm);
-    color: var(--text);
+    color: var(--text-light);
   }
   .ui-news__input::placeholder {
-    color: var(--text-muted);
+    color: var(--text-muted-light);
   }
   .ui-news__input:focus-visible,
   .ui-news__input.is-focus {
-    outline: 2px solid var(--ivory-xlight);
+    outline: 2px solid var(--focus);
     outline-offset: 2px;
-    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 0 4px var(--focus-outer);
   }
 
   .ui-news__btn {
@@ -105,9 +105,9 @@ const classes = ["ui-news", stacked && "ui-news--stacked", className]
     background: var(--sage-xlight);
   }
   .ui-news__btn:focus-visible {
-    outline: 2px solid var(--ivory-xlight);
+    outline: 2px solid var(--focus);
     outline-offset: 2px;
-    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 0 4px var(--focus-outer);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/src/astro/Sticker.astro

@@ -14,7 +14,7 @@ const classes = ["pl-sticker", `pl-sticker--${size}`, className]
 
 <span class={classes} aria-hidden="true" {...rest}>
   <svg class="pl-sticker__disc" viewBox="0 0 112 112">
-    <circle cx="56" cy="56" r="52" fill="var(--sage-xdark)"></circle>
+    <circle cx="56" cy="56" r="52" fill="var(--surface-inverse)"></circle>
     <circle class="pl-sticker__ring" cx="56" cy="56" r="47" fill="none" stroke="var(--sage-light)" stroke-width="1.5" stroke-dasharray="5 7"></circle>
   </svg>
   <span class="pl-sticker__content">
@@ -58,7 +58,7 @@ const classes = ["pl-sticker", `pl-sticker--${size}`, className]
     align-items: center;
     justify-content: center;
     gap: var(--space-1);
-    color: var(--ivory-light);
+    color: var(--surface-inverse-fg);
     text-align: center;
     font-size: var(--text-xs);
     font-weight: var(--weight-semibold);

package/src/astro/TextField.astro

@@ -144,7 +144,7 @@ const charCount = count && maxlength ? `${String(value).length} / ${maxlength}`
     min-height: 40px;
     padding: var(--space-2) var(--space-3);
     background: var(--surface);
-    border: 1px solid var(--border);
+    border: 1px solid var(--border-strong);
     border-radius: var(--radius-md);
     font-family: var(--font-sans);
     font-size: var(--text-sm);

package/src/react/NewsCarousel.css

@@ -32,6 +32,43 @@
   outline-offset: 2px;
 }
 
+/* Prev/next arrows. Sit in the controls row beside the dots, never over the
+   item itself, so they never compete with the item's own link target. */
+.pl-news-controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--space-3);
+  margin-top: var(--space-2);
+}
+
+.pl-news-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  background: var(--surface);
+  color: var(--text);
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard);
+}
+
+.pl-news-nav:hover {
+  background: var(--surface-hover);
+  border-color: var(--border-strong);
+}
+
+.pl-news-nav:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
 .ui-eyebrow {
   font-family: var(--font-mono);
   font-size: var(--text-2xs);
@@ -52,7 +89,6 @@
   display: flex;
   align-items: center;
   gap: var(--space-1-5);
-  margin-top: var(--space-2);
 }
 
 .pl-news-dot {
@@ -61,7 +97,7 @@
   padding: 0;
   border: 0;
   border-radius: var(--radius-full);
-  background: var(--border);
+  background: var(--border-strong);
   cursor: pointer;
   transition:
     width var(--duration-base) var(--ease-enter),
@@ -71,7 +107,7 @@
 
 .pl-news-dot[data-on] {
   width: 22px;
-  background: var(--sage-xdark);
+  background: var(--primary);
 }
 
 .pl-news-dot:focus-visible {

package/src/react/NewsCarousel.tsx

@@ -3,9 +3,11 @@ import "./NewsCarousel.css";
 
 /**
  * News carousel. Cross-fades between items on a timer. Dots are real buttons
- * with a label per item. The off-screen item is pointer-events:none and cannot
- * be tabbed into. The loop pauses on hover, on focus, and when the tab is
- * hidden, and stops entirely under prefers-reduced-motion.
+ * with a label per item; prev/next arrows sit either side of the dots and
+ * step one item at a time, rather than sitting over the item and competing
+ * with its own link target. The off-screen item is pointer-events:none and
+ * cannot be tabbed into. The loop pauses on hover, on focus, and when the tab
+ * is hidden, and stops entirely under prefers-reduced-motion.
  */
 
 export interface NewsItem {
@@ -20,8 +22,24 @@ export interface NewsCarouselProps {
   interval?: number;
   /** Accessible label builder for each dot. */
   dotLabel?: (index: number, item: NewsItem) => string;
+  /** Accessible label for the previous-item control. */
+  prevLabel?: string;
+  /** Accessible label for the next-item control. */
+  nextLabel?: string;
 }
 
+const ChevronIcon = ({ direction }: { direction: "left" | "right" }) => (
+  <svg width={18} height={18} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path
+      d={direction === "left" ? "M15 6l-6 6 6 6" : "M9 6l6 6-6 6"}
+      stroke="currentColor"
+      strokeWidth={2.2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
 const prefersReducedMotion = () =>
   typeof window !== "undefined" &&
   window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
@@ -30,6 +48,8 @@ export default function NewsCarousel({
   items,
   interval = 5000,
   dotLabel = (i) => `Nieuwsbericht ${i + 1}`,
+  prevLabel = "Vorig nieuwsbericht",
+  nextLabel = "Volgend nieuwsbericht",
 }: NewsCarouselProps) {
   const [active, setActive] = useState(0);
   const paused = useRef(false);
@@ -54,6 +74,10 @@ export default function NewsCarousel({
     paused.current = false;
   };
 
+  const step = (delta: number) => {
+    setActive((a) => (a + delta + items.length) % items.length);
+  };
+
   return (
     <div>
       <div
@@ -78,18 +102,36 @@ export default function NewsCarousel({
         ))}
       </div>
       {items.length > 1 && (
-        <div className="pl-news-dots">
-          {items.map((item, i) => (
-            <button
-              key={i}
-              type="button"
-              className="pl-news-dot"
-              data-on={i === active ? "1" : undefined}
-              aria-label={dotLabel(i, item)}
-              aria-current={i === active ? "true" : undefined}
-              onClick={() => setActive(i)}
-            />
-          ))}
+        <div className="pl-news-controls">
+          <button
+            type="button"
+            className="pl-news-nav pl-news-nav--prev"
+            aria-label={prevLabel}
+            onClick={() => step(-1)}
+          >
+            <ChevronIcon direction="left" />
+          </button>
+          <div className="pl-news-dots">
+            {items.map((item, i) => (
+              <button
+                key={i}
+                type="button"
+                className="pl-news-dot"
+                data-on={i === active ? "1" : undefined}
+                aria-label={dotLabel(i, item)}
+                aria-current={i === active ? "true" : undefined}
+                onClick={() => setActive(i)}
+              />
+            ))}
+          </div>
+          <button
+            type="button"
+            className="pl-news-nav pl-news-nav--next"
+            aria-label={nextLabel}
+            onClick={() => step(1)}
+          >
+            <ChevronIcon direction="right" />
+          </button>
         </div>
       )}
     </div>

package/src/react/Select.css

@@ -46,7 +46,7 @@
   min-height: 40px;
   padding: 0 var(--space-3);
   background: var(--surface);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-strong);
   border-radius: var(--radius-md);
   color: var(--text);
   font-family: var(--font-sans);