@kwtv/components 0.1.0

package/src/astro/Icon.astro

@@ -0,0 +1,72 @@
+---
+/**
+ * The stroke icon set used across the components. One place to change a glyph.
+ * Icons are decorative by default (aria-hidden). Pass a `title` only when the
+ * icon is the sole carrier of meaning, which in this system it never should be.
+ */
+interface Props {
+  name:
+    | "cart"
+    | "menu"
+    | "close"
+    | "check"
+    | "check-bold"
+    | "chevron-down"
+    | "chevron-right"
+    | "chevron-left"
+    | "info"
+    | "alert-circle"
+    | "alert-triangle"
+    | "arrow-right"
+    | "arrow-up-right"
+    | "arrow-down"
+    | "instagram"
+    | "facebook"
+    | "youtube";
+  size?: number | string;
+  stroke?: number;
+  class?: string;
+  title?: string;
+}
+
+const { name, size = 20, stroke = 1.8, class: className, title } = Astro.props;
+const labelled = Boolean(title);
+
+const paths: Record<Props["name"], string> = {
+  cart: '<path d="M6 7h12l-1 12H7L6 7zM9 7V5a3 3 0 0 1 6 0v2"/>',
+  menu: '<path d="M4 7h16M4 12h16M4 17h16"/>',
+  close: '<path d="M7 7l10 10M17 7L7 17"/>',
+  check: '<path d="M5 13l4 4L19 7"/>',
+  "check-bold": '<path d="M5 13l4 4L19 7"/>',
+  "chevron-down": '<path d="M6 9l6 6 6-6"/>',
+  "chevron-right": '<path d="M9 6l6 6-6 6"/>',
+  "chevron-left": '<path d="M15 6l-6 6 6 6"/>',
+  info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8v.5"/>',
+  "alert-circle": '<circle cx="12" cy="12" r="9"/><path d="M12 8v4.5M12 16v.5"/>',
+  "alert-triangle": '<path d="M12 4l8.5 15h-17L12 4zM12 10v4M12 16.5v.5"/>',
+  "arrow-right": '<path d="M5 12h14M13 6l6 6-6 6"/>',
+  "arrow-up-right": '<path d="M7 17 17 7M8 7h9v9"/>',
+  "arrow-down": '<path d="M12 5v14M6 13l6 6 6-6"/>',
+  instagram:
+    '<rect x="4" y="4" width="16" height="16" rx="5"/><circle cx="12" cy="12" r="3.6"/><path d="M17 7.2v.01"/>',
+  facebook: '<path d="M14.5 8.5h2M14.5 8.5c0-2 .8-3 2.5-3M14.5 8.5V19M11 12h6"/>',
+  youtube:
+    '<rect x="3.5" y="6.5" width="17" height="11" rx="3.2"/><path d="M11 10.2l3.4 1.8-3.4 1.8z"/>',
+};
+---
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width={stroke}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  role={labelled ? "img" : undefined}
+  aria-hidden={labelled ? undefined : "true"}
+  aria-label={title}
+  set:html={paths[name]}
+/>

package/src/astro/IconButton.astro

@@ -0,0 +1,117 @@
+---
+import Icon from "./Icon.astro";
+
+/**
+ * Icon button. Square 44 px control for the header: cart and menu. Always
+ * carries an aria-label, because an icon-only control has no label to enlarge.
+ * 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 `icon` to use the shared icon set, or a custom SVG via the default slot.
+ */
+interface Props {
+  label: string;
+  icon?: string;
+  /** Decorative count pill. Repeat the number in `label`. */
+  count?: number;
+  type?: "button" | "submit" | "reset";
+  expanded?: boolean;
+  class?: string;
+}
+
+const {
+  label,
+  icon,
+  count,
+  type = "button",
+  expanded,
+  class: className,
+  ...rest
+} = Astro.props;
+
+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>
+
+<style>
+  .ui-iconbtn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    color: var(--text);
+    cursor: pointer;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      border-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ui-iconbtn:hover,
+  .ui-iconbtn.is-hover {
+    background: var(--surface-hover);
+    border-color: var(--border-strong);
+  }
+
+  .ui-iconbtn:focus-visible,
+  .ui-iconbtn.is-focus {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--focus-outer);
+  }
+
+  .ui-iconbtn:active,
+  .ui-iconbtn.is-active {
+    background: var(--surface-hover);
+  }
+
+  .ui-iconbtn:disabled,
+  .ui-iconbtn.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Count pill: 19 px, accent fill, top-right. */
+  .ui-iconbtn__count {
+    position: absolute;
+    top: 3px;
+    right: 3px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 19px;
+    height: 19px;
+    padding: 0 var(--space-1);
+    background: var(--accent);
+    color: var(--accent-fg);
+    border-radius: var(--radius-full);
+    font-family: var(--font-sans);
+    font-size: var(--text-2xs);
+    font-weight: var(--weight-semibold);
+    line-height: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-iconbtn {
+      transition: none;
+    }
+  }
+</style>

package/src/astro/Marquee.astro

@@ -0,0 +1,72 @@
+---
+/**
+ * Decorative scrolling band. 22 s loop, content doubled so the loop is seamless,
+ * rotated a touch. Decorative, so the whole thing is aria-hidden.
+ *
+ * Pass the items as the default slot. They are rendered twice automatically is
+ * not possible across a slot, so pass a simple `items` array of strings, or use
+ * the default slot and duplicate your content yourself. Here we take `items`.
+ *
+ * Needs the motion layer (`@kwtv/components/styles/motion.css`) for the
+ * pl-marquee keyframes, inside a .pl-root.
+ */
+interface Props {
+  items: string[];
+  /** Divider glyph between items. */
+  divider?: string;
+  class?: string;
+}
+const { items, divider = "✦", class: className } = Astro.props;
+---
+
+<div class:list={["ui-marquee", className]} aria-hidden="true">
+  <div class="ui-marquee__track">
+    {
+      [0, 1].map(() => (
+        <div class="ui-marquee__group">
+          {items.map((item) => (
+            <>
+              <span>{item}</span>
+              <span class="ui-marquee__div">{divider}</span>
+            </>
+          ))}
+        </div>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .ui-marquee {
+    background: var(--sage-xdark);
+    color: var(--ivory-light);
+    overflow: hidden;
+    padding-block: var(--space-3);
+    border-block: 1px solid var(--sage-text);
+    transform: rotate(-1.2deg) scale(1.02);
+  }
+  .ui-marquee__track {
+    display: flex;
+    width: max-content;
+    animation: pl-marquee 22s linear infinite;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+  }
+  .ui-marquee__group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
+    padding-right: var(--space-6);
+    white-space: nowrap;
+  }
+  .ui-marquee__div {
+    color: var(--sage-light);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ui-marquee__track {
+      animation: none;
+    }
+  }
+</style>

package/src/astro/NavDropdown.astro

@@ -0,0 +1,164 @@
+---
+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.
+ *
+ * Put <a> links in the default slot; they fill the panel.
+ */
+interface Props {
+  label: string;
+  open?: boolean;
+  class?: string;
+}
+
+const { label, open = false, class: className, ...rest } = Astro.props;
+
+const classes = ["ui-navgroup", open && "is-open", className]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<div class={classes} {...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>
+  </button>
+  <div class="ui-navpanel">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .ui-navgroup {
+    position: relative;
+    display: inline-block;
+  }
+
+  /* The trigger carries .ui-navlink, but that class is styled in NavLink.astro
+     and Astro scopes styles per component: NavLink's rules only match NavLink's
+     own markup. Without this block the button falls back to the browser default
+     chrome, a grey fill and a border. Restated here so the trigger matches the
+     sibling links it sits next to. */
+  .ui-navlink {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1-5);
+    padding: 7px 10px;
+    margin: -7px -10px;
+    border-radius: var(--radius-sm);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    line-height: 1;
+    color: var(--text);
+    text-decoration: none;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    transition: color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ui-navlink::after {
+    content: "";
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    bottom: 2px;
+    height: 2px;
+    background: currentColor;
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+  }
+
+  .ui-navlink:hover,
+  .ui-navlink.is-hover {
+    color: var(--link-hover);
+  }
+  .ui-navlink:hover::after,
+  .ui-navlink.is-hover::after {
+    opacity: 1;
+  }
+
+  /* While the panel is open the trigger reads as active, the same way the
+     current page does. */
+  .ui-navgroup:hover > .ui-navlink::after,
+  .ui-navgroup:focus-within > .ui-navlink::after,
+  .ui-navgroup.is-open > .ui-navlink::after {
+    opacity: 1;
+  }
+
+  .ui-navlink:focus-visible,
+  .ui-navlink.is-focus {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--focus-outer);
+  }
+
+  /* The chevron turns over when the panel is open. */
+  .ui-navlink > span {
+    display: inline-flex;
+    line-height: 0;
+    transition: transform var(--duration-fast) var(--ease-standard);
+  }
+  .ui-navgroup:hover > .ui-navlink > span,
+  .ui-navgroup:focus-within > .ui-navlink > span,
+  .ui-navgroup.is-open > .ui-navlink > span {
+    transform: rotate(180deg);
+  }
+
+  .ui-navpanel {
+    position: absolute;
+    top: 100%;
+    left: -10px;
+    z-index: var(--z-dropdown);
+    min-width: 216px;
+    margin-top: var(--space-2);
+    padding: var(--space-2);
+    display: none;
+    flex-direction: column;
+    gap: var(--space-px);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+  }
+
+  /* Opens on hover and when any child holds focus. */
+  .ui-navgroup:hover .ui-navpanel,
+  .ui-navgroup:focus-within .ui-navpanel,
+  .ui-navgroup.is-open .ui-navpanel {
+    display: flex;
+  }
+
+  .ui-navpanel :global(a) {
+    display: block;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-sm);
+    color: var(--text);
+    text-decoration: none;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+  .ui-navpanel :global(a:hover) {
+    background: var(--surface-hover);
+    color: var(--link-hover);
+  }
+  .ui-navpanel :global(a:focus-visible) {
+    outline: 2px solid var(--focus);
+    outline-offset: -2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-navpanel :global(a),
+    .ui-navlink,
+    .ui-navlink::after,
+    .ui-navlink > span {
+      transition: none;
+    }
+  }
+</style>

package/src/astro/NavLink.astro

@@ -0,0 +1,94 @@
+---
+/**
+ * A navigation link for the header. Pads out to a 34 px row so the focus ring
+ * never crowds the text, with an equal negative margin so the header rhythm is
+ * untouched. Hover draws a 2 px line; the current page adds the line plus
+ * semibold and carries aria-current="page".
+ */
+interface Props {
+  href: string;
+  current?: boolean;
+  class?: string;
+}
+
+const { href, current = false, class: className, ...rest } = Astro.props;
+
+const classes = ["ui-navlink", current && "is-current", className]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<a
+  class={classes}
+  href={href}
+  aria-current={current ? "page" : undefined}
+  {...rest}
+>
+  <slot />
+</a>
+
+<style>
+  .ui-navlink {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1-5);
+    /* 7 px block / 10 px inline padding with an equal negative margin, so the
+       focus ring has room but the header rhythm does not shift. */
+    padding: 7px 10px;
+    margin: -7px -10px;
+    border-radius: var(--radius-sm);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    line-height: 1;
+    color: var(--text);
+    text-decoration: none;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    transition: color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ui-navlink::after {
+    content: "";
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    bottom: 2px;
+    height: 2px;
+    background: currentColor;
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+  }
+
+  .ui-navlink:hover,
+  .ui-navlink.is-hover {
+    color: var(--link-hover);
+  }
+  .ui-navlink:hover::after,
+  .ui-navlink.is-hover::after {
+    opacity: 1;
+  }
+
+  .ui-navlink.is-current {
+    font-weight: var(--weight-semibold);
+  }
+  .ui-navlink.is-current::after {
+    opacity: 1;
+  }
+
+  .ui-navlink:focus-visible,
+  .ui-navlink.is-focus {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--focus-outer);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-navlink,
+    .ui-navlink::after {
+      transition: none;
+    }
+  }
+</style>

package/src/astro/Newsletter.astro

@@ -0,0 +1,118 @@
+---
+/**
+ * The newsletter sign-up. A real <label> tied to the field by `for`, hidden
+ * with .ui-sr-only (not display:none) so it still names the field; the
+ * placeholder is an example, never the label. Type and inputmode are email.
+ * The field and button are 48 px and stack on mobile with the --stacked
+ * modifier. Ivory on dark sage clears 4.5:1.
+ *
+ * The confirmation message after submit is the consumer's concern; this is
+ * only the form.
+ */
+interface Props {
+  action?: string;
+  method?: string;
+  id?: string;
+  label?: string;
+  name?: string;
+  placeholder?: string;
+  buttonText?: string;
+  stacked?: boolean;
+  class?: string;
+}
+
+const {
+  action,
+  method = "post",
+  id = "newsletter-email",
+  label = "E-mailadres voor de nieuwsbrief",
+  name = "email",
+  placeholder = "jij@voorbeeld.be",
+  buttonText = "Inschrijven",
+  stacked = false,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const classes = ["ui-news", stacked && "ui-news--stacked", className]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<form class={classes} action={action} method={method} {...rest}>
+  <label class="ui-sr-only" for={id}>{label}</label>
+  <input
+    class="ui-news__input"
+    id={id}
+    name={name}
+    type="email"
+    inputmode="email"
+    placeholder={placeholder}
+    autocomplete="email"
+  />
+  <button class="ui-news__btn" type="submit">{buttonText}</button>
+</form>
+
+<style>
+  .ui-news {
+    display: flex;
+    gap: var(--space-2);
+    max-width: 420px;
+  }
+
+  .ui-news--stacked {
+    flex-direction: column;
+  }
+
+  .ui-news__input {
+    flex: 1;
+    min-width: 0;
+    min-height: 48px;
+    padding: 0 var(--space-4);
+    background: var(--ivory-xlight);
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    color: var(--text);
+  }
+  .ui-news__input::placeholder {
+    color: var(--text-muted);
+  }
+  .ui-news__input:focus-visible,
+  .ui-news__input.is-focus {
+    outline: 2px solid var(--ivory-xlight);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25);
+  }
+
+  .ui-news__btn {
+    flex: none;
+    min-height: 48px;
+    padding: 0 var(--space-5);
+    background: var(--sage-light);
+    color: var(--sage-xdark);
+    border: 0;
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+  .ui-news__btn:hover,
+  .ui-news__btn.is-hover {
+    background: var(--sage-xlight);
+  }
+  .ui-news__btn:focus-visible {
+    outline: 2px solid var(--ivory-xlight);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-news__btn {
+      transition: none;
+    }
+  }
+</style>