@kwtv/components 0.9.0 → 0.10.0

package/src/astro/Pager.astro

@@ -1,11 +1,18 @@
 ---
 import Icon from "./Icon.astro";
+import "../styles/pager.css";
 
 /**
  * Pager. Appears once a list passes its page threshold. The current page is a
  * non-link with aria-current="page"; disabled arrows are spans, not links, so
  * keyboard focus never lands on a dead end. On mobile it collapses to
  * previous / current / next.
+ *
+ * `previousLabel` and `nextLabel` name the arrow links. They default to the
+ * Dutch "Vorige pagina" and "Volgende pagina".
+ *
+ * React and Preact islands write the same markup and import
+ * `@kwtv/components/styles/pager.css`.
  */
 interface Props {
   current: number;
@@ -23,6 +30,10 @@ interface Props {
   /** The query key the preserveScroll behaviour reads and writes. */
   param?: string;
   label?: string;
+  /** Accessible name of the previous arrow. Defaults to "Vorige pagina". */
+  previousLabel?: string;
+  /** Accessible name of the next arrow. Defaults to "Volgende pagina". */
+  nextLabel?: string;
   class?: string;
 }
 
@@ -33,6 +44,8 @@ const {
   preserveScroll = false,
   param = "page",
   label = "Paginering",
+  previousLabel = "Vorige pagina",
+  nextLabel = "Volgende pagina",
   class: className,
   ...rest
 } = Astro.props;
@@ -64,7 +77,7 @@ const hasNext = current < total;
   {...rest}
 >
   {hasPrev ? (
-    <a href={href(current - 1)} aria-label="Vorige pagina">
+    <a href={href(current - 1)} aria-label={previousLabel}>
       <Icon name="chevron-left" size={17} stroke={2.3} />
     </a>
   ) : (
@@ -86,7 +99,7 @@ const hasNext = current < total;
   )}
 
   {hasNext ? (
-    <a href={href(current + 1)} aria-label="Volgende pagina">
+    <a href={href(current + 1)} aria-label={nextLabel}>
       <Icon name="chevron-right" size={17} stroke={2.3} />
     </a>
   ) : (
@@ -166,55 +179,3 @@ const hasNext = current < total;
   bindUiPager();
   document.addEventListener("astro:page-load", bindUiPager);
 </script>
-
-<style>
-  @layer reset, tokens, base, components, motion, utilities;
-
-  @layer components {
-    .ui-pager {
-      display: flex;
-      align-items: center;
-      gap: var(--space-1);
-      font-size: var(--text-sm);
-    }
-
-    .ui-pager a,
-    .ui-pager span:not(.ui-pager__gap) {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 36px;
-      height: 36px;
-      padding: 0 var(--space-1);
-      border-radius: var(--radius-md);
-      color: var(--link);
-      text-decoration: none;
-    }
-
-    .ui-pager a:hover {
-      background: var(--surface-hover);
-      color: var(--link-hover);
-    }
-    .ui-pager a:focus-visible {
-      outline: 2px solid var(--focus);
-      outline-offset: 2px;
-    }
-
-    .ui-pager a.is-current {
-      background: var(--primary);
-      color: var(--primary-fg);
-      font-weight: var(--weight-semibold);
-    }
-
-    .ui-pager .is-disabled {
-      color: var(--border);
-      cursor: not-allowed;
-    }
-
-    .ui-pager__gap {
-      min-width: 24px;
-      text-align: center;
-      color: var(--text-muted);
-    }
-  }
-</style>

package/src/astro/ProductCard.astro

@@ -1,10 +1,19 @@
 ---
+import "../styles/product-card.css";
+
 /**
  * Product card. The whole card is one link, so the reader hears name, stock and
  * price as a single stop. A corner ribbon marks new, promo, last items or
  * member favourite or sold-out stock, one ribbon at a time. Ribbons are
  * decorative; sold-out text is repeated for assistive technology and the card
  * stays reachable.
+ *
+ * The ribbon words and the sold-out text default to Dutch. Pass `newLabel`,
+ * `promoLabel`, `lastLabel`, `favLabel` and `soldOutLabel` for another
+ * language. The screen-reader text is `soldOutLabel` followed by a full stop.
+ *
+ * React and Preact islands write the same markup and import
+ * `@kwtv/components/styles/product-card.css`.
  */
 interface Props {
   href: string;
@@ -24,6 +33,16 @@ interface Props {
   sizes?: string;
   /** AVIF srcset — when provided, a `<picture>` with an AVIF `<source>` is rendered. */
   avifSrcset?: string;
+  /** Ribbon text for `ribbon="new"`. Defaults to "Nieuw". */
+  newLabel?: string;
+  /** Ribbon text for `ribbon="promo"`. Defaults to "Promo". */
+  promoLabel?: string;
+  /** Ribbon text for `ribbon="last"`. Defaults to "Laatste". */
+  lastLabel?: string;
+  /** Ribbon text for `ribbon="fav"`. Defaults to "Favoriet". */
+  favLabel?: string;
+  /** Sold-out ribbon and screen-reader text. Defaults to "Uitverkocht". */
+  soldOutLabel?: string;
 }
 
 const {
@@ -40,14 +59,19 @@ const {
   srcset,
   sizes,
   avifSrcset,
+  newLabel = "Nieuw",
+  promoLabel = "Promo",
+  lastLabel = "Laatste",
+  favLabel = "Favoriet",
+  soldOutLabel = "Uitverkocht",
   ...rest
 } = Astro.props;
 
 const ribbonLabel: Record<NonNullable<Props["ribbon"]>, string> = {
-  new: "Nieuw",
-  promo: "Promo",
-  last: "Laatste",
-  fav: "Favoriet",
+  new: newLabel,
+  promo: promoLabel,
+  last: lastLabel,
+  fav: favLabel,
 };
 
 const classes = ["ui-product", soldOut && "is-disabled", className]
@@ -61,7 +85,7 @@ const classes = ["ui-product", soldOut && "is-disabled", className]
       class={`ui-ribbon ui-ribbon--${soldOut ? "sold-out" : ribbon}`}
       aria-hidden="true"
     >
-      <i>{soldOut ? "Uitverkocht" : ribbonLabel[ribbon!]}</i>
+      <i>{soldOut ? soldOutLabel : ribbonLabel[ribbon!]}</i>
     </span>
   )}
   {avifSrcset ? (
@@ -91,146 +115,10 @@ const classes = ["ui-product", soldOut && "is-disabled", className]
   <span class="ui-product__body">
     <span class="ui-product__title">{title}</span>
     {meta && <span class="ui-product__meta">{meta}</span>}
-    {soldOut && <span class="ui-sr-only">Uitverkocht.</span>}
+    {soldOut && <span class="ui-sr-only">{soldOutLabel}.</span>}
     <span class="ui-product__price">
       {oldPrice && <s>{oldPrice}</s>}
       {price}
     </span>
   </span>
 </a>
-
-<style>
-  @layer reset, tokens, base, components, motion, utilities;
-
-  @layer components {
-    .ui-product {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-lg);
-      overflow: hidden;
-      background: var(--surface);
-      color: var(--text);
-      text-decoration: none;
-      transition: border-color var(--duration-fast) var(--ease-standard);
-    }
-
-    .ui-product:hover,
-    .ui-product.is-hover {
-      border-color: var(--border-strong);
-    }
-
-    .ui-product:focus-visible {
-      outline: 2px solid var(--focus);
-      outline-offset: 2px;
-      box-shadow: 0 0 0 4px var(--focus-outer);
-    }
-
-    .ui-product__img {
-      display: block;
-      width: 100%;
-      aspect-ratio: 4 / 3;
-      object-fit: cover;
-      background: var(--surface-hover);
-    }
-
-    .ui-product__body {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-1);
-      padding: var(--space-3) var(--space-4) var(--space-4);
-    }
-
-    .ui-product__title {
-      font-size: var(--text-base);
-      font-weight: var(--weight-semibold);
-      color: var(--text);
-    }
-
-    .ui-product__meta {
-      font-size: var(--text-xs);
-      color: var(--text-muted);
-    }
-
-    .ui-product__price {
-      display: flex;
-      align-items: baseline;
-      gap: var(--space-2);
-      margin-top: var(--space-1);
-      font-size: var(--text-lg);
-      font-weight: var(--weight-semibold);
-      font-variant-numeric: tabular-nums;
-      color: var(--text);
-    }
-
-    .ui-product__price s {
-      font-size: var(--text-sm);
-      font-weight: var(--weight-regular);
-      color: var(--text-muted);
-    }
-
-    /* Sold out: card stays readable and clickable. */
-    .ui-product.is-disabled .ui-product__img {
-      opacity: 0.7;
-    }
-    .ui-product.is-disabled .ui-product__price {
-      color: var(--text-muted);
-      font-weight: var(--weight-regular);
-    }
-
-    /* Ribbon. One per card, decorative. 112 px box. */
-    .ui-ribbon {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 112px;
-      height: 112px;
-      overflow: hidden;
-      pointer-events: none;
-      z-index: 1;
-    }
-    .ui-ribbon i {
-      position: absolute;
-      top: 22px;
-      left: -34px;
-      width: 140px;
-      transform: rotate(-45deg);
-      text-align: center;
-      font-size: var(--text-2xs);
-      font-weight: var(--weight-bold);
-      letter-spacing: var(--tracking-wider);
-      text-transform: uppercase;
-      font-style: normal;
-      padding: var(--space-1) 0;
-      color: var(--primary-fg);
-      background: var(--primary);
-    }
-    .ui-ribbon--new i {
-      background: var(--primary);
-      color: var(--primary-fg);
-    }
-    .ui-ribbon--promo i {
-      background: var(--accent);
-      color: var(--accent-fg);
-    }
-    .ui-ribbon--last i {
-      background: var(--warning);
-      color: var(--primary-fg);
-    }
-    .ui-ribbon--fav i {
-      background: var(--surface-accent);
-      color: var(--surface-accent-fg);
-    }
-    .ui-ribbon--sold-out i {
-      background: var(--danger-bg);
-      color: var(--danger);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .ui-product {
-        transition: none;
-      }
-    }
-  }
-</style>

package/src/astro/Radio.astro

@@ -1,4 +1,6 @@
 ---
+import "../styles/filters.css";
+
 /**
  * Radio. Native control tinted with accent-color, wrapped in a label so the
  * whole row is the hit area. One answer per group: give every radio in the
@@ -6,6 +8,9 @@
  *
  * Put the group in a <fieldset> with a <legend> in the consuming page so the
  * question is announced before the options.
+ *
+ * React and Preact islands write the same markup and import
+ * `@kwtv/components/styles/filters.css`.
  */
 interface Props {
   label?: string;
@@ -45,49 +50,3 @@ const classes = ["ui-check", disabled && "is-disabled", className]
   />
   <slot>{label}</slot>
 </label>
-
-<style>
-  @layer reset, tokens, base, components, motion, utilities;
-
-  @layer components {
-    .ui-check {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      min-height: 32px;
-      font-family: var(--font-sans);
-      font-size: var(--text-sm);
-      color: var(--text);
-      cursor: pointer;
-    }
-
-    .ui-check input {
-      width: 17px;
-      height: 17px;
-      flex-shrink: 0;
-      accent-color: var(--primary);
-      cursor: pointer;
-    }
-
-    .ui-check input:focus-visible {
-      outline: 2px solid var(--focus);
-      outline-offset: 2px;
-      box-shadow: 0 0 0 4px var(--focus-outer);
-    }
-
-    .ui-check.is-disabled {
-      cursor: not-allowed;
-      color: var(--text-muted);
-    }
-
-    .ui-check.is-disabled input {
-      cursor: not-allowed;
-    }
-
-    @media (max-width: 700px), (pointer: coarse) {
-      .ui-check {
-        min-height: 40px;
-      }
-    }
-  }
-</style>

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

@@ -74,6 +74,31 @@
     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 {
@@ -120,6 +145,15 @@
     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;

package/src/react/Drawer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type ReactNode } from "react";
+import { useEffect, useId, useRef, type ReactNode } from "react";
 import "../styles/controls.css";
 import "./Drawer.css";
 
@@ -21,6 +21,12 @@ import "./Drawer.css";
  * 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.
  */
 
@@ -56,6 +62,16 @@ export interface DrawerProps {
   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 =
@@ -87,7 +103,10 @@ export default function Drawer({
   label = "Menu",
   placement,
   closeLabel,
+  title,
+  size = "default",
 }: DrawerProps) {
+  const titleId = useId();
   const rootRef = useRef<HTMLElement>(null);
   const scrimRef = useRef<HTMLDivElement>(null);
   const onCloseRef = useRef(onClose);
@@ -168,33 +187,45 @@ export default function Drawer({
 
   if (!open) return null;
 
+  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}` : ""}`}
-      aria-label={label}
+      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}
     >
-      {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>
+      {title ? (
+        <div className="ui-drawer__head">
+          <h2 className="ui-drawer__title" id={titleId}>
+            {title}
+          </h2>
+          {closeButton}
+        </div>
+      ) : (
+        closeButton
       )}
       {groups
         ? groups.map((group, gi) => (