@kwtv/components 0.1.0

package/src/astro/Social.astro

@@ -0,0 +1,55 @@
+---
+import Icon from "./Icon.astro";
+
+/**
+ * A social link. 40 px target with the platform named in aria-label, since the
+ * mark alone carries no text.
+ */
+interface Props {
+  platform: "instagram" | "facebook" | "youtube";
+  href: string;
+  label?: string;
+  class?: string;
+}
+
+const labels: Record<Props["platform"], string> = {
+  instagram: "Instagram",
+  facebook: "Facebook",
+  youtube: "YouTube",
+};
+
+const { platform, href, label, class: className, ...rest } = Astro.props;
+const classes = ["ui-social", className].filter(Boolean).join(" ");
+---
+
+<a class={classes} href={href} aria-label={label ?? labels[platform]} {...rest}>
+  <Icon name={platform} size={18} stroke={1.7} />
+</a>
+
+<style>
+  .ui-social {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-md);
+    color: var(--ivory-light);
+    transition: color var(--duration-fast) var(--ease-standard),
+      background-color var(--duration-fast) var(--ease-standard);
+  }
+  .ui-social:hover {
+    color: var(--ivory-xlight);
+    background: rgba(255, 255, 255, 0.08);
+  }
+  .ui-social:focus-visible {
+    outline: 2px solid var(--ivory-xlight);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-social {
+      transition: none;
+    }
+  }
+</style>

package/src/astro/StepIndicator.astro

@@ -0,0 +1,104 @@
+---
+import Icon from "./Icon.astro";
+
+/**
+ * Step indicator. Checkout only. The nav label states the position in words
+ * because on mobile only the current step keeps its name. The current step
+ * carries aria-current="step"; dots are decorative.
+ */
+interface Step {
+  label: string;
+}
+
+interface Props {
+  steps: Step[];
+  /** Zero-based index of the current step. Past steps render as done. */
+  current: number;
+  /** Spoken position, e.g. "Afrekenen, stap 2 van 3". */
+  label: string;
+  mobile?: boolean;
+  class?: string;
+}
+
+const { steps, current, label, mobile = false, class: className, ...rest } = Astro.props;
+
+const classes = ["ui-steps", mobile && "ui-steps--mobile", className].filter(Boolean).join(" ");
+---
+
+<nav class={classes} aria-label={label} {...rest}>
+  {steps.map((step, i) => {
+    const state = i < current ? "is-done" : i === current ? "is-current" : "";
+    return (
+      <>
+        {i > 0 && <span class="ui-steps__sep"></span>}
+        <span class={["ui-step", state].filter(Boolean).join(" ")} aria-current={i === current ? "step" : undefined}>
+          <span class="ui-step__dot" aria-hidden="true">
+            {i < current ? <Icon name="check" size={11} stroke={3} /> : i + 1}
+          </span>
+          <span class="ui-step__label">{step.label}</span>
+        </span>
+      </>
+    );
+  })}
+</nav>
+
+<style>
+  .ui-steps {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .ui-step {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+  }
+
+  .ui-step__dot {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: var(--radius-full);
+    border: 1px solid var(--border);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-semibold);
+    background: var(--surface);
+    color: var(--text-muted);
+  }
+
+  .ui-step.is-current {
+    color: var(--text);
+    font-weight: var(--weight-semibold);
+  }
+  .ui-step.is-current .ui-step__dot {
+    border-color: var(--primary);
+    background: var(--primary);
+    color: var(--primary-fg);
+  }
+
+  .ui-step.is-done {
+    color: var(--text);
+  }
+  .ui-step.is-done .ui-step__dot {
+    border-color: var(--primary);
+    background: var(--primary);
+    color: var(--primary-fg);
+  }
+
+  .ui-steps__sep {
+    flex: 1;
+    min-width: var(--space-4);
+    height: 1px;
+    background: var(--border);
+  }
+
+  /* Mobile: only the current step keeps its label. */
+  .ui-steps--mobile .ui-step:not(.is-current) .ui-step__label {
+    display: none;
+  }
+</style>

package/src/astro/Sticker.astro

@@ -0,0 +1,80 @@
+---
+/** Decorative campaign sticker with a rotating ring and optional arrow. */
+interface Props {
+  size?: "md" | "sm";
+  arrow?: boolean;
+  class?: string;
+}
+
+const { size = "md", arrow = true, class: className, ...rest } = Astro.props;
+const classes = ["pl-sticker", `pl-sticker--${size}`, className]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<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 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">
+    <span><slot /></span>
+    {arrow && (
+      <svg class="pl-sticker__arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 5v14M6 13l6 6 6-6"></path>
+      </svg>
+    )}
+  </span>
+</span>
+
+<style>
+  .pl-sticker {
+    position: relative;
+    display: inline-block;
+    width: 112px;
+    height: 112px;
+    flex: none;
+  }
+  .pl-sticker--sm {
+    width: 92px;
+    height: 92px;
+  }
+  .pl-sticker__disc {
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .pl-sticker__ring {
+    transform-origin: 56px 56px;
+    animation: pl-spin 18s linear infinite;
+  }
+  .pl-sticker__content {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-1);
+    color: var(--ivory-light);
+    text-align: center;
+    font-size: var(--text-xs);
+    font-weight: var(--weight-semibold);
+    line-height: 1.2;
+    letter-spacing: 0.02em;
+  }
+  .pl-sticker--sm .pl-sticker__content {
+    font-size: var(--text-2xs);
+  }
+  .pl-sticker__arrow {
+    animation: pl-bob 1.8s ease-in-out infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pl-sticker__ring,
+    .pl-sticker__arrow {
+      animation: none;
+    }
+  }
+</style>

package/src/astro/Swatch.astro

@@ -0,0 +1,100 @@
+---
+/**
+ * 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.
+ */
+interface Props {
+  /** CSS colour value for the fill. */
+  color: string;
+  /** Colour name. Required: goes to aria-label. */
+  label: string;
+  selected?: boolean;
+  disabled?: boolean;
+  type?: "button" | "submit";
+  class?: string;
+}
+
+const {
+  color,
+  label,
+  selected = false,
+  disabled = false,
+  type = "button",
+  class: className,
+  ...rest
+} = Astro.props;
+
+const classes = [
+  "ui-swatch",
+  selected && "is-selected",
+  disabled && "is-disabled",
+  className,
+]
+  .filter(Boolean)
+  .join(" ");
+
+const ariaLabel = selected ? `${label}, geselecteerd` : label;
+---
+
+<button
+  class={classes}
+  type={type}
+  style={`--swatch: ${color}`}
+  aria-label={ariaLabel}
+  aria-pressed={String(selected)}
+  disabled={disabled}
+  {...rest}
+></button>
+
+<style>
+  .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/astro/SwipeCarousel.astro

@@ -0,0 +1,14 @@
+---
+/** Native horizontal scroll-snap rail for compact product cards. */
+interface Props {
+  label?: string;
+  class?: string;
+}
+
+const { label = "Uitgelichte artikelen", class: className, ...rest } = Astro.props;
+const classes = ["pl-carousel", className].filter(Boolean).join(" ");
+---
+
+<div class={classes} role="region" aria-label={label} tabindex="0" {...rest}>
+  <slot />
+</div>

package/src/astro/Table.astro

@@ -0,0 +1,117 @@
+---
+/**
+ * Order history and admin lists. Header cells use scope="col". Money columns
+ * get tabular numerals and align right when the column is marked numeric, via
+ * the --numeric modifier. Rows highlight on hover.
+ *
+ * Pass `columns` for the head. Put the <tr> body rows in the default slot. On
+ * mobile the same data is better shown as stacked TableCard rows, since a wide
+ * table would need horizontal scrolling: render a TableCard list alongside and
+ * toggle the two with the `.ui-table-responsive` / `.ui-tablecards` wrappers,
+ * or let the consumer switch on a breakpoint.
+ *
+ * Status is a word plus a tone (use a Badge), never a coloured dot.
+ */
+interface Column {
+  key: string;
+  label: string;
+  numeric?: boolean;
+}
+
+interface Props {
+  columns: Column[];
+  /** Adds tabular numerals across the table. */
+  numeric?: boolean;
+  busy?: boolean;
+  caption?: string;
+  class?: string;
+}
+
+const { columns, numeric = false, busy = false, caption, class: className, ...rest } =
+  Astro.props;
+
+const classes = ["ui-table", numeric && "ui-table--numeric", className]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<table class={classes} aria-busy={busy ? "true" : undefined} {...rest}>
+  {caption && <caption class="ui-sr-only">{caption}</caption>}
+  <thead>
+    <tr>
+      {columns.map((col) => (
+        <th scope="col" class={col.numeric ? "is-numeric" : undefined}>
+          {col.label}
+        </th>
+      ))}
+    </tr>
+  </thead>
+  <tbody>
+    <slot />
+  </tbody>
+</table>
+
+<style>
+  .ui-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    color: var(--text);
+  }
+
+  .ui-table :global(th),
+  .ui-table :global(td) {
+    padding: var(--space-3) var(--space-4);
+    text-align: left;
+    border-bottom: 1px solid var(--border);
+    vertical-align: middle;
+  }
+
+  .ui-table :global(th) {
+    font-size: var(--text-xs);
+    font-weight: var(--weight-semibold);
+    color: var(--text-muted);
+    white-space: nowrap;
+  }
+
+  .ui-table :global(tbody tr) {
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+  .ui-table :global(tbody tr:hover) {
+    background: var(--surface-hover);
+  }
+  .ui-table :global(tbody tr:last-child td) {
+    border-bottom: 0;
+  }
+
+  .ui-table :global(a) {
+    color: var(--link);
+    text-decoration: none;
+    font-weight: var(--weight-medium);
+  }
+  .ui-table :global(a:hover) {
+    text-decoration: underline;
+  }
+  .ui-table :global(a:focus-visible) {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
+  /* Numeric: the last column and any marked cell use tabular numerals and
+     align right. */
+  .ui-table--numeric :global(th:last-child),
+  .ui-table--numeric :global(td:last-child),
+  .ui-table :global(th.is-numeric),
+  .ui-table :global(td.is-numeric) {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-table :global(tbody tr) {
+      transition: none;
+    }
+  }
+</style>

package/src/astro/TableCard.astro

@@ -0,0 +1,63 @@
+---
+/**
+ * The mobile stacked row for a table. Order and date on the left (`main` slot),
+ * total and status on the right (`end` slot). Repeats the label in each row
+ * rather than relying on column position. Render a list of these below 700 px
+ * in place of the wide table.
+ */
+interface Props {
+  busy?: boolean;
+  class?: string;
+}
+
+const { busy = false, class: className, ...rest } = Astro.props;
+const classes = ["ui-tablecard", className].filter(Boolean).join(" ");
+---
+
+<div class={classes} aria-hidden={busy ? "true" : undefined} {...rest}>
+  <span class="ui-tablecard__main"><slot name="main" /></span>
+  <span class="ui-tablecard__end"><slot name="end" /></span>
+</div>
+
+<style>
+  .ui-tablecard {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-4);
+    padding: var(--space-4) 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .ui-tablecard__main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+
+  .ui-tablecard__end {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--space-1);
+    text-align: right;
+  }
+
+  .ui-tablecard__end :global(b) {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ui-tablecard :global(a) {
+    color: var(--link);
+    text-decoration: none;
+  }
+  .ui-tablecard :global(a:hover) {
+    text-decoration: underline;
+  }
+  .ui-tablecard :global(a:focus-visible) {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+</style>