@kwtv/components 0.1.0

package/src/astro/Pager.astro

@@ -0,0 +1,195 @@
+---
+import Icon from "./Icon.astro";
+
+/**
+ * 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.
+ */
+interface Props {
+  current: number;
+  total: number;
+  /** Builds the href for a page number. Defaults to `?page=N`. */
+  href?: (page: number) => string;
+  /**
+   * Swap pages without a navigation. When set, clicking a page updates the URL
+   * with history.pushState (no reload, no scroll reset) and dispatches a
+   * bubbling `ui:pagerchange` CustomEvent<{ page, url }> the app listens for to
+   * re-render its list in place. Back and forward still work. Links stay real
+   * <a>, so the pager works without JS and inside Astro View Transitions.
+   */
+  preserveScroll?: boolean;
+  /** The query key the preserveScroll behaviour reads and writes. */
+  param?: string;
+  label?: string;
+  class?: string;
+}
+
+const {
+  current,
+  total,
+  href = (page: number) => `?page=${page}`,
+  preserveScroll = false,
+  param = "page",
+  label = "Paginering",
+  class: className,
+  ...rest
+} = Astro.props;
+
+/** Page numbers with ellipsis: first, a window around current, last. */
+function pages(current: number, total: number): (number | "…")[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const out: (number | "…")[] = [1];
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+  if (start > 2) out.push("…");
+  for (let p = start; p <= end; p++) out.push(p);
+  if (end < total - 1) out.push("…");
+  out.push(total);
+  return out;
+}
+
+const list = pages(current, total);
+const hasPrev = current > 1;
+const hasNext = current < total;
+---
+
+<nav
+  class={["ui-pager", className].filter(Boolean).join(" ")}
+  aria-label={label}
+  data-ui-pager
+  data-ui-pager-preserve={preserveScroll ? "" : undefined}
+  data-ui-pager-param={param}
+  {...rest}
+>
+  {hasPrev ? (
+    <a href={href(current - 1)} aria-label="Vorige pagina">
+      <Icon name="chevron-left" size={17} stroke={2.3} />
+    </a>
+  ) : (
+    <span class="is-disabled" aria-hidden="true"><Icon name="chevron-left" size={17} stroke={2.3} /></span>
+  )}
+
+  {list.map((p) =>
+    p === "…" ? (
+      <span class="ui-pager__gap">…</span>
+    ) : p === current ? (
+      <a class="is-current" href={href(p)} aria-current="page">{p}</a>
+    ) : (
+      <a href={href(p)}>{p}</a>
+    )
+  )}
+
+  {hasNext ? (
+    <a href={href(current + 1)} aria-label="Volgende pagina">
+      <Icon name="chevron-right" size={17} stroke={2.3} />
+    </a>
+  ) : (
+    <span class="is-disabled" aria-hidden="true"><Icon name="chevron-right" size={17} stroke={2.3} /></span>
+  )}
+</nav>
+
+<script>
+  // preserveScroll behaviour. Bundled and hoisted by Astro, so it runs on first
+  // load and again on every astro:page-load (View Transitions). Self-guards:
+  // does nothing unless a [data-ui-pager-preserve] pager is on the page, so it
+  // is safe to ship on every Pager whether or not the prop is set.
+  function bindUiPager() {
+    if ((window as any).__uiPagerBound) return;
+    (window as any).__uiPagerBound = true;
+
+    function pageFrom(nav: Element, a: Element) {
+      const key = nav.getAttribute("data-ui-pager-param") || "page";
+      const url = new URL(a.getAttribute("href")!, location.href);
+      const raw = url.searchParams.get(key);
+      const n = raw == null ? NaN : parseInt(raw, 10);
+      return { key, url, page: Number.isFinite(n) ? n : null };
+    }
+
+    // Capture phase + stopImmediatePropagation so the Astro View Transitions
+    // router (which also listens on document and would scroll to top on a
+    // ?page= change) never sees the click.
+    document.addEventListener(
+      "click",
+      (e) => {
+        const t = e.target as Element | null;
+        const a = t && t.closest ? t.closest("a[href]") : null;
+        if (!a) return;
+        const nav = a.closest("[data-ui-pager][data-ui-pager-preserve]");
+        if (!nav) return;
+        const me = e as MouseEvent;
+        if (me.button !== 0 || me.metaKey || me.ctrlKey || me.shiftKey || me.altKey) return;
+        const { page, url } = pageFrom(nav, a);
+        if (page == null) return;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        history.pushState({ uiPager: true, page }, "", url.href);
+        window.dispatchEvent(new CustomEvent("ui:pagerchange", { detail: { page, url: url.href } }));
+      },
+      true,
+    );
+
+    // Back and forward re-announce the query so the app re-renders in place.
+    window.addEventListener("popstate", () => {
+      const u = new URL(location.href);
+      const p = parseInt(u.searchParams.get("page") || "1", 10);
+      window.dispatchEvent(
+        new CustomEvent("ui:pagerchange", {
+          detail: { page: Number.isFinite(p) ? p : 1, url: u.href, popped: true },
+        }),
+      );
+    });
+  }
+
+  bindUiPager();
+  document.addEventListener("astro:page-load", bindUiPager);
+</script>
+
+<style>
+  .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/PickCard.astro

@@ -0,0 +1,142 @@
+---
+/**
+ * Pick card. A radio with room to explain the consequence: pickup versus
+ * delivery, payment method. The card is a <label> wrapping a real radio, so
+ * keyboard arrows move between options. The note is part of the label, so it is
+ * announced with the choice. 2 px border when selected. Disabled keeps the
+ * reason visible.
+ *
+ * Give every card in a group the same `name`.
+ */
+interface Props {
+  name: string;
+  value?: string;
+  title: string;
+  note?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  id?: string;
+  class?: string;
+}
+
+const {
+  name,
+  value,
+  title,
+  note,
+  checked = false,
+  disabled = false,
+  id,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const classes = [
+  "ui-pick",
+  checked && "is-selected",
+  disabled && "is-disabled",
+  className,
+]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<label class={classes}>
+  <input
+    type="radio"
+    name={name}
+    value={value}
+    id={id}
+    checked={checked}
+    disabled={disabled}
+    {...rest}
+  />
+  <span class="ui-pick__text">
+    <b class="ui-pick__title">{title}</b>
+    {note ? <span class="ui-pick__note">{note}</span> : <slot />}
+  </span>
+</label>
+
+<style>
+  .ui-pick {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    transition:
+      border-color var(--duration-fast) var(--ease-standard),
+      background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ui-pick input {
+    width: 18px;
+    height: 18px;
+    margin-top: 2px;
+    flex-shrink: 0;
+    accent-color: var(--primary);
+    cursor: pointer;
+  }
+
+  .ui-pick input:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--focus-outer);
+  }
+
+  .ui-pick__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    font-family: var(--font-sans);
+  }
+
+  .ui-pick__title {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    color: var(--text);
+  }
+
+  .ui-pick__note {
+    font-size: var(--text-xs);
+    line-height: var(--leading-xs);
+    color: var(--text-muted);
+  }
+
+  .ui-pick:hover,
+  .ui-pick.is-hover {
+    border-color: var(--border-strong);
+  }
+
+  /* Selected: 2 px border. */
+  .ui-pick.is-selected {
+    border-width: 2px;
+    border-color: var(--border-strong);
+    background: var(--surface-accent);
+  }
+
+  .ui-pick.is-selected .ui-pick__title {
+    color: var(--surface-accent-fg, var(--text));
+  }
+
+  /* The selected card sits on the sage accent surface, where --text-muted only
+     reaches 3.6:1. The accent surface carries its own muted role for exactly
+     this case. */
+  .ui-pick.is-selected .ui-pick__note {
+    color: var(--surface-accent-muted, var(--text));
+  }
+
+  .ui-pick.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-pick {
+      transition: none;
+    }
+  }
+</style>

package/src/astro/ProductCard.astro

@@ -0,0 +1,195 @@
+---
+/**
+ * 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.
+ */
+interface Props {
+  href: string;
+  img: string;
+  alt: string;
+  title: string;
+  meta?: string;
+  price: string;
+  /** When set, `price` is rendered as the sale price and this as struck-through. */
+  oldPrice?: string;
+  ribbon?: "new" | "promo" | "last" | "fav";
+  soldOut?: boolean;
+  class?: string;
+}
+
+const {
+  href,
+  img,
+  alt,
+  title,
+  meta,
+  price,
+  oldPrice,
+  ribbon,
+  soldOut = false,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const ribbonLabel: Record<NonNullable<Props["ribbon"]>, string> = {
+  new: "Nieuw",
+  promo: "Promo",
+  last: "Laatste",
+  fav: "Favoriet",
+};
+
+const classes = ["ui-product", soldOut && "is-disabled", className].filter(Boolean).join(" ");
+---
+
+<a class={classes} href={href} {...rest}>
+  {(ribbon || soldOut) && (
+    <span class={`ui-ribbon ui-ribbon--${soldOut ? "sold-out" : ribbon}`} aria-hidden="true">
+      <i>{soldOut ? "Uitverkocht" : ribbonLabel[ribbon!]}</i>
+    </span>
+  )}
+  <img class="ui-product__img" loading="lazy" decoding="async" src={img} alt={alt} />
+  <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>}
+    <span class="ui-product__price">
+      {oldPrice && <s>{oldPrice}</s>}
+      {price}
+    </span>
+  </span>
+</a>
+
+<style>
+  .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

@@ -0,0 +1,89 @@
+---
+/**
+ * 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
+ * group the same `name`. 17 px box, 32 px row.
+ *
+ * Put the group in a <fieldset> with a <legend> in the consuming page so the
+ * question is announced before the options.
+ */
+interface Props {
+  label?: string;
+  name: string;
+  value?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  id?: string;
+  class?: string;
+}
+
+const {
+  label,
+  name,
+  value,
+  checked = false,
+  disabled = false,
+  id,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const classes = ["ui-check", disabled && "is-disabled", className]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<label class={classes}>
+  <input
+    type="radio"
+    name={name}
+    value={value}
+    id={id}
+    checked={checked}
+    disabled={disabled}
+    {...rest}
+  />
+  <slot>{label}</slot>
+</label>
+
+<style>
+  .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

@@ -0,0 +1,80 @@
+---
+/**
+ * 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.
+ */
+interface Props {
+  variant?: "img" | "title" | "line" | "block";
+  width?: string;
+  height?: string;
+  radius?: string;
+  class?: string;
+}
+
+const { variant = "block", width, height, radius, class: className, ...rest } = Astro.props;
+
+const classes = ["ui-skel", `ui-skel--${variant}`, className].filter(Boolean).join(" ");
+
+const style = [
+  width && `width:${width}`,
+  height && `height:${height}`,
+  radius && `border-radius:${radius}`,
+]
+  .filter(Boolean)
+  .join(";");
+---
+
+<span class={classes} style={style || undefined} aria-hidden="true" {...rest}></span>
+
+<style>
+  .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>