@kwtv/components 0.8.0 → 0.10.0

package/src/astro/EmptyState.astro

@@ -1,8 +1,13 @@
 ---
+import "../styles/feedback.css";
+
 /**
  * Empty state. Says what is missing and offers the one action that fixes it.
  * Never a shrug: an empty cart links back to the category page, an empty filter
  * result offers to clear filters.
+ *
+ * React and Preact islands write the same markup and import
+ * `@kwtv/components/styles/feedback.css`.
  */
 interface Props {
   title: string;
@@ -24,35 +29,3 @@ const hasAction = Astro.slots.has("action");
     </div>
   )}
 </div>
-
-<style>
-  @layer reset, tokens, base, components, motion, utilities;
-
-  @layer components {
-    .ui-empty {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--space-2);
-      padding: var(--space-8) var(--space-6);
-      border: 1px dashed var(--border-strong);
-      border-radius: var(--radius-lg);
-      background: var(--surface);
-    }
-
-    .ui-empty__title {
-      font-size: var(--text-lg);
-      font-weight: var(--weight-semibold);
-      color: var(--text);
-    }
-
-    .ui-empty__body {
-      font-size: var(--text-sm);
-      line-height: var(--leading-sm);
-      color: var(--text-muted);
-    }
-
-    /* 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/Filters.astro

@@ -8,21 +8,30 @@
  * with variant="sheet" and place the FilterGroups inside it. The result count
  * should be announced in a polite live region by the consumer when filters
  * change.
+ *
+ * `titleLabel` is the bar's eyebrow. It defaults to "Filters".
  */
 interface Props {
   /** Text for the clear-all action. Omit to hide it. */
   clearLabel?: string;
+  /** The eyebrow in the bar. Defaults to "Filters". */
+  titleLabel?: string;
   class?: string;
 }
 
-const { clearLabel = "Wissen", class: className, ...rest } = Astro.props;
+const {
+  clearLabel = "Wissen",
+  titleLabel = "Filters",
+  class: className,
+  ...rest
+} = Astro.props;
 
 const classes = ["ui-filters", className].filter(Boolean).join(" ");
 ---
 
 <aside class={classes} {...rest}>
   <div class="ui-filterbar">
-    <span class="ui-eyebrow">Filters</span>
+    <span class="ui-eyebrow">{titleLabel}</span>
     {clearLabel && (
       <slot name="clear">
         <button class="ui-filters__clear" type="button">

package/src/astro/IconButton.astro

@@ -8,6 +8,9 @@ import "../styles/controls.css";
  * The count pill is decorative (aria-hidden); the number must be repeated in
  * the label by the consumer, so it is announced once, not twice.
  *
+ * Pass `href` to render a link with the same look, for a control that goes to
+ * a page, like the cart. The link gets no `type` and no `aria-expanded`.
+ *
  * Pass `icon` to use the shared icon set, or a custom SVG via the default slot.
  */
 interface Props {
@@ -15,7 +18,11 @@ interface Props {
   icon?: string;
   /** Decorative count pill. Repeat the number in `label`. */
   count?: number;
+  /** Renders an `<a>` to this URL instead of a `<button>`. */
+  href?: string;
+  /** Button only. Ignored when `href` is set. */
   type?: "button" | "submit" | "reset";
+  /** Button only. Ignored when `href` is set. */
   expanded?: boolean;
   class?: string;
 }
@@ -24,6 +31,7 @@ const {
   label,
   icon,
   count,
+  href,
   type = "button",
   expanded,
   class: className,
@@ -33,17 +41,28 @@ const {
 const classes = ["ui-iconbtn", className].filter(Boolean).join(" ");
 ---
 
-<button
-  class={classes}
-  type={type}
-  aria-label={label}
-  aria-expanded={expanded === undefined ? undefined : String(expanded)}
-  {...rest}
->
-  {icon ? <Icon name={icon as any} size={20} stroke={1.7} /> : <slot />}
-  {count !== undefined && (
-    <span class="ui-iconbtn__count" aria-hidden="true">
-      {count}
-    </span>
-  )}
-</button>
+{href ? (
+  <a class={classes} href={href} aria-label={label} {...rest}>
+    {icon ? <Icon name={icon as any} size={20} stroke={1.7} /> : <slot />}
+    {count !== undefined && (
+      <span class="ui-iconbtn__count" aria-hidden="true">
+        {count}
+      </span>
+    )}
+  </a>
+) : (
+  <button
+    class={classes}
+    type={type}
+    aria-label={label}
+    aria-expanded={expanded === undefined ? undefined : String(expanded)}
+    {...rest}
+  >
+    {icon ? <Icon name={icon as any} size={20} stroke={1.7} /> : <slot />}
+    {count !== undefined && (
+      <span class="ui-iconbtn__count" aria-hidden="true">
+        {count}
+      </span>
+    )}
+  </button>
+)}

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/Skeleton.astro

@@ -1,8 +1,13 @@
 ---
+import "../styles/feedback.css";
+
 /**
  * Loading skeleton. Blocks match the real layout so nothing jumps when content
  * arrives. The shimmer stops for readers who ask for reduced motion, leaving a
  * flat block. Decorative: aria-hidden by default.
+ *
+ * React and Preact islands write the same markup and import
+ * `@kwtv/components/styles/feedback.css`.
  */
 interface Props {
   variant?: "img" | "title" | "line" | "block";
@@ -40,59 +45,3 @@ const style = [
   aria-hidden="true"
   {...rest}
 ></span>
-
-<style>
-  @layer reset, tokens, base, components, motion, utilities;
-
-  @layer components {
-    .ui-skel {
-      display: block;
-      background: var(--surface-hover);
-      background-image: linear-gradient(
-        90deg,
-        var(--surface-hover) 0%,
-        var(--border) 50%,
-        var(--surface-hover) 100%
-      );
-      background-size: 200% 100%;
-      border-radius: var(--radius-md);
-      animation: ui-skel-shimmer 1400ms ease-in-out infinite;
-    }
-
-    .ui-skel--img {
-      width: 100%;
-      aspect-ratio: 4 / 3;
-      border-radius: 0;
-    }
-
-    .ui-skel--title {
-      height: 0.875rem;
-      border-radius: var(--radius-sm);
-    }
-
-    .ui-skel--line {
-      height: 0.625rem;
-      border-radius: var(--radius-sm);
-    }
-
-    .ui-skel--block {
-      height: 1rem;
-    }
-
-    @keyframes ui-skel-shimmer {
-      0% {
-        background-position: 200% 0;
-      }
-      100% {
-        background-position: -200% 0;
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .ui-skel {
-        animation: none;
-        background-image: none;
-      }
-    }
-  }
-</style>