@kwtv/components 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwtv/components",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "license": "UNLICENSED",
   "type": "module",
   "description": "KWTV UI components for Astro, with React islands. Built on the KWTV design tokens.",
@@ -9,9 +9,12 @@
     "url": "git+https://github.com/KWTV-willebroek/design-system.git",
     "directory": "packages/components"
   },
-  "homepage": "https://kwtv-explorer.vercel.app",
-  "publishConfig": { "access": "public" },
-  "files": ["src"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src"
+  ],
   "exports": {
     "./astro/*.astro": "./src/astro/*.astro",
     "./react/*.tsx": "./src/react/*.tsx",
@@ -23,10 +26,14 @@
     "react-dom": ">=18"
   },
   "peerDependenciesMeta": {
-    "react": { "optional": true },
-    "react-dom": { "optional": true }
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "@kwtv/tokens": "^0.1.0"
+    "@kwtv/tokens": "^0.1.2"
   }
 }

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/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/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/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 {

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>