@kwtv/components 0.2.0 → 0.3.0

package/README.md

@@ -7,13 +7,13 @@ there is no separate library build or consumer alias configuration.
 
 ## What ships
 
-| Path | What it is |
-| --- | --- |
-| `src/astro/*.astro` | Static components. Scoped styles, no client JS. |
-| `src/react/*.tsx` | Interactive islands. Select, Modal, Toast, Drawer, QuantityStepper, NewsCarousel. |
-| `src/styles/base.css` | The shared primitives the React islands import: focus ring, touch targets, screen-reader helper. Astro components carry their own scoped styles. |
-| `src/styles/controls.css` | Button and icon-button styles for React islands that render the `ui-btn` / `ui-iconbtn` classes. |
-| `src/styles/motion.css` | The `pl-` motion layer: lift, underline, arrow and row nudges, rise, marquee, chip rail and swipe carousel. |
+| Path                      | What it is                                                                                                                                       |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `src/astro/*.astro`       | Static components. Scoped styles, no client JS.                                                                                                  |
+| `src/react/*.tsx`         | Interactive islands. Select, Modal, Toast, Drawer, QuantityStepper, NewsCarousel.                                                                |
+| `src/styles/base.css`     | The shared primitives the React islands import: focus ring, touch targets, screen-reader helper. Astro components carry their own scoped styles. |
+| `src/styles/controls.css` | Button and icon-button styles for React islands that render the `ui-btn` / `ui-iconbtn` classes.                                                 |
+| `src/styles/motion.css`   | The `pl-` motion layer: lift, underline, arrow and row nudges, rise, marquee, chip rail and swipe carousel.                                      |
 
 ## Install
 
@@ -31,7 +31,10 @@ in your app root, then use the components.
 import "@kwtv/tokens/tokens.css";
 import Button from "@kwtv/components/astro/Button.astro";
 ---
-<Button variant="primary" size="md">In de winkelwagen</Button>
+
+<Button variant="primary" size="md">
+  In de winkelwagen
+</Button>
 ```
 
 To use React islands, add Astro's React integration if the app does not
@@ -51,7 +54,12 @@ Then import an island:
 ---
 import Select from "@kwtv/components/react/Select.tsx";
 ---
-<Select client:load label="Groep" options={[{ value: "r1", label: "Recreatief 8–10 jaar" }]} />
+
+<Select
+  client:load
+  label="Groep"
+  options={[{ value: "r1", label: "Recreatief 8–10 jaar" }]}
+/>
 ```
 
 The React islands need their shared stylesheets once in the app. Import

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwtv/components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "UNLICENSED",
   "type": "module",
   "description": "KWTV UI components for Astro, with React islands. Built on the KWTV design tokens.",
@@ -34,6 +34,6 @@
     }
   },
   "dependencies": {
-    "@kwtv/tokens": "^0.2.0"
+    "@kwtv/tokens": "^0.3.0"
   }
 }

package/src/astro/AccordionItem.astro

@@ -14,14 +14,20 @@ interface Props {
 const { summary, open = false, class: className, ...rest } = Astro.props;
 ---
 
-<details class={["ui-accordion__item", className].filter(Boolean).join(" ")} open={open} {...rest}>
+<details
+  class={["ui-accordion__item", className].filter(Boolean).join(" ")}
+  open={open}
+  {...rest}
+>
   <summary class="ui-accordion__sum">
     {summary}
     <span class="ui-accordion__chev" aria-hidden="true">
       <Icon name="chevron-down" size={14} stroke={2.2} />
     </span>
   </summary>
-  <div class="ui-accordion__body"><slot /></div>
+  <div class="ui-accordion__body">
+    <slot />
+  </div>
 </details>
 
 <style>

package/src/astro/ActiveFilterTags.astro

@@ -20,17 +20,26 @@ interface Props {
   class?: string;
 }
 
-const { tags, clearAllLabel = "Alles wissen", class: className, ...rest } = Astro.props;
+const {
+  tags,
+  clearAllLabel = "Alles wissen",
+  class: className,
+  ...rest
+} = Astro.props;
 
 const classes = ["ui-filtertags", className].filter(Boolean).join(" ");
 ---
 
 <div class={classes} {...rest}>
   {tags.map((tag) => (
-    <Badge tone="outline" removable removeLabel={tag.removeLabel}>{tag.label}</Badge>
+    <Badge tone="outline" removable removeLabel={tag.removeLabel}>
+      {tag.label}
+    </Badge>
   ))}
   {clearAllLabel && tags.length > 0 && (
-    <button class="ui-filtertags__clear" type="button">{clearAllLabel}</button>
+    <button class="ui-filtertags__clear" type="button">
+      {clearAllLabel}
+    </button>
   )}
 </div>
 

package/src/astro/Breadcrumb.astro

@@ -20,7 +20,11 @@ const { items, label = "Kruimelpad", class: className, ...rest } = Astro.props;
 const lastIndex = items.length - 1;
 ---
 
-<nav class={["ui-crumbs", className].filter(Boolean).join(" ")} aria-label={label} {...rest}>
+<nav
+  class={["ui-crumbs", className].filter(Boolean).join(" ")}
+  aria-label={label}
+  {...rest}
+>
   {items.map((item, i) => (
     <>
       {item.href && i !== lastIndex ? (

package/src/astro/Button.astro

@@ -59,7 +59,9 @@ const tagProps = href
   {...tagProps}
   {...rest}
 >
-  <span class="ui-btn__label"><slot /></span>
+  <span class="ui-btn__label">
+    <slot />
+  </span>
   {icon && (
     <span class="ui-btn__icon" aria-hidden="true">
       <Icon name={icon as any} size="1em" stroke={1.8} />

package/src/astro/Card.astro

@@ -25,7 +25,11 @@ const {
 
 const Title = titleTag;
 
-const classes = ["ui-card", variant !== "default" && `ui-card--${variant}`, className]
+const classes = [
+  "ui-card",
+  variant !== "default" && `ui-card--${variant}`,
+  className,
+]
   .filter(Boolean)
   .join(" ");
 
@@ -35,7 +39,9 @@ const hasFooter = Astro.slots.has("footer");
 <div class={classes} {...rest}>
   {eyebrow && <span class="ui-card__eyebrow">{eyebrow}</span>}
   {title && <Title class="ui-card__title">{title}</Title>}
-  <span class="ui-card__body"><slot /></span>
+  <span class="ui-card__body">
+    <slot />
+  </span>
   {hasFooter && (
     <div class="ui-card__footer">
       <slot name="footer" />

package/src/astro/CartLine.astro

@@ -35,13 +35,23 @@ const classes = ["ui-line", className].filter(Boolean).join(" ");
 ---
 
 <div class={classes} {...rest}>
-  <img class="ui-line__thumb" loading="lazy" decoding="async" src={img} alt={alt} />
+  <img
+    class="ui-line__thumb"
+    loading="lazy"
+    decoding="async"
+    src={img}
+    alt={alt}
+  />
   <span class="ui-line__grow">
     <b class="ui-line__title">{title}</b>
     {note && <span class="ui-line__note">{note}</span>}
-    <a class="ui-line__remove" href={removeHref}>{removeLabel}</a>
+    <a class="ui-line__remove" href={removeHref}>
+      {removeLabel}
+    </a>
+  </span>
+  <span class="ui-line__qty">
+    <slot name="qty" />
   </span>
-  <span class="ui-line__qty"><slot name="qty" /></span>
   <b class="ui-line__price">{price}</b>
 </div>
 

package/src/astro/ChipRail.astro

@@ -17,7 +17,12 @@ const classes = ["pl-chips", className].filter(Boolean).join(" ");
 
 <nav class={classes} aria-label={label} {...rest}>
   {items.map((item) => (
-    <a class="pl-chip" href={item.href} data-on={item.current ? "1" : undefined} aria-current={item.current ? "page" : undefined}>
+    <a
+      class="pl-chip"
+      href={item.href}
+      data-on={item.current ? "1" : undefined}
+      aria-current={item.current ? "page" : undefined}
+    >
       {item.label}
     </a>
   ))}

package/src/astro/DotGrid.astro

@@ -16,7 +16,9 @@ const classes = ["pl-dotgrid", compact && "pl-dotgrid--compact", className]
 
 <div class={classes} {...rest}>
   <span class="pl-dotgrid__dots" aria-hidden="true"></span>
-  <span class="pl-dotgrid__content"><slot /></span>
+  <span class="pl-dotgrid__content">
+    <slot />
+  </span>
 </div>
 
 <style>
@@ -32,9 +34,12 @@ const classes = ["pl-dotgrid", compact && "pl-dotgrid--compact", className]
   .pl-dotgrid__dots {
     position: absolute;
     inset: 0;
-    background-image: radial-gradient(var(--dotgrid-color, var(--sage-light)) 1.4px, transparent 1.6px);
+    background-image: radial-gradient(
+      var(--dotgrid-color, var(--sage-light)) 1.4px,
+      transparent 1.6px
+    );
     background-size: 28px 28px;
-    opacity: var(--dotgrid-opacity, var(--dotgrid-theme-opacity, .7));
+    opacity: var(--dotgrid-opacity, var(--dotgrid-theme-opacity, 0.7));
     animation: pl-drift 6s linear infinite;
   }
 
@@ -58,9 +63,13 @@ const classes = ["pl-dotgrid", compact && "pl-dotgrid--compact", className]
   }
 
   /* Explicit themes win over OS preference, as in the token cascade. */
-  :global([data-theme="dark"]) .pl-dotgrid { --dotgrid-theme-opacity: .2; }
+  :global([data-theme="dark"]) .pl-dotgrid {
+    --dotgrid-theme-opacity: 0.2;
+  }
   @media (prefers-color-scheme: dark) {
-    :global(:root:not([data-theme])) .pl-dotgrid { --dotgrid-theme-opacity: .2; }
+    :global(:root:not([data-theme])) .pl-dotgrid {
+      --dotgrid-theme-opacity: 0.2;
+    }
   }
 
   @media (prefers-reduced-motion: reduce) {

package/src/astro/EmptyState.astro

@@ -15,7 +15,9 @@ const hasAction = Astro.slots.has("action");
 
 <div class={["ui-empty", className].filter(Boolean).join(" ")} {...rest}>
   <b class="ui-empty__title">{title}</b>
-  <span class="ui-empty__body"><slot /></span>
+  <span class="ui-empty__body">
+    <slot />
+  </span>
   {hasAction && (
     <div class="ui-empty__action">
       <slot name="action" />

package/src/astro/FilterGroup.astro

@@ -29,8 +29,7 @@ const classes = ["ui-filtergroup", className].filter(Boolean).join(" ");
     margin: 0;
     padding: var(--space-3) 0 0;
     border: 0;
-    /* More space above the rule than below it, so the rule belongs to this
-       group's top edge. */
+    /* More space above the rule than below it, so the rule belongs to this group's top edge. */
     margin-top: var(--space-4);
     border-top: 1px solid var(--border);
   }

package/src/astro/Filters.astro

@@ -23,7 +23,13 @@ const classes = ["ui-filters", className].filter(Boolean).join(" ");
 <aside class={classes} {...rest}>
   <div class="ui-filterbar">
     <span class="ui-eyebrow">Filters</span>
-    {clearLabel && <slot name="clear"><button class="ui-filters__clear" type="button">{clearLabel}</button></slot>}
+    {clearLabel && (
+      <slot name="clear">
+        <button class="ui-filters__clear" type="button">
+          {clearLabel}
+        </button>
+      </slot>
+    )}
   </div>
   <slot />
 </aside>

package/src/astro/Footer.astro

@@ -33,16 +33,27 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
 
 <footer class={classes} {...rest}>
   <div class="ui-footer__brandblock">
-    <div class="ui-footer__brand">{brandName}<slot name="brand-suffix" /></div>
-    <div class="ui-footer__addr"><slot name="address" /></div>
-    <div class="ui-footer__social"><slot name="social" /></div>
+    <div class="ui-footer__brand">
+      {brandName}
+      <slot name="brand-suffix" />
+    </div>
+    <div class="ui-footer__addr">
+      <slot name="address" />
+    </div>
+    <div class="ui-footer__social">
+      <slot name="social" />
+    </div>
   </div>
 
   <slot />
 
   <div class="ui-footer__bar">
-    <span class="ui-footer__legal"><slot name="legal" /></span>
-    <span class="ui-footer__policies"><slot name="policies" /></span>
+    <span class="ui-footer__legal">
+      <slot name="legal" />
+    </span>
+    <span class="ui-footer__policies">
+      <slot name="policies" />
+    </span>
   </div>
 </footer>
 
@@ -166,7 +177,8 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
     gap: var(--space-2);
     margin-top: calc(var(--space-6) * -1 + var(--space-2));
   }
-  .ui-footer--mobile.ui-footer--site :global(.ui-footer__contact .ui-footer__title),
+  .ui-footer--mobile.ui-footer--site
+    :global(.ui-footer__contact .ui-footer__title),
   .ui-footer--mobile.ui-footer--site :global(.ui-footer__desktop-only) {
     display: none;
   }
@@ -214,7 +226,8 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
   .ui-footer--mobile.ui-footer--shop :global(.ui-footer__shop-links) {
     gap: var(--space-4);
   }
-  .ui-footer--mobile.ui-footer--shop :global(.ui-footer__shop-links .ui-footer__title) {
+  .ui-footer--mobile.ui-footer--shop
+    :global(.ui-footer__shop-links .ui-footer__title) {
     display: none;
   }
   .ui-footer--mobile.ui-footer--shop .ui-footer__social:empty {

package/src/astro/Header.astro

@@ -13,16 +13,25 @@ interface Props {
   class?: string;
 }
 
-const { brandName = "KWTV", brandHref = "/", class: className, ...rest } =
-  Astro.props;
+const {
+  brandName = "KWTV",
+  brandHref = "/",
+  class: className,
+  ...rest
+} = Astro.props;
 
 const classes = ["ui-header", className].filter(Boolean).join(" ");
 ---
 
 <header class={classes} {...rest}>
   <a class="ui-brand" href={brandHref}>
-    <span class="ui-brand__mark"><slot name="logo" /></span>
-    <span class="ui-brand__name">{brandName}<slot name="brand-suffix" /></span>
+    <span class="ui-brand__mark">
+      <slot name="logo" />
+    </span>
+    <span class="ui-brand__name">
+      {brandName}
+      <slot name="brand-suffix" />
+    </span>
   </a>
 
   <nav class="ui-nav">

package/src/astro/Icon.astro

@@ -42,14 +42,16 @@ const paths: Record<Props["name"], string> = {
   "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-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"/>',
+  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"/>',
 };

package/src/astro/IconButton.astro

@@ -41,7 +41,9 @@ const classes = ["ui-iconbtn", className].filter(Boolean).join(" ");
 >
   {icon ? <Icon name={icon as any} size={20} stroke={1.7} /> : <slot />}
   {count !== undefined && (
-    <span class="ui-iconbtn__count" aria-hidden="true">{count}</span>
+    <span class="ui-iconbtn__count" aria-hidden="true">
+      {count}
+    </span>
   )}
 </button>
 

package/src/astro/Marquee.astro

@@ -21,18 +21,16 @@ 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>
-      ))
-    }
+    {[0, 1].map(() => (
+      <div class="ui-marquee__group">
+        {items.map((item) => (
+          <>
+            <span>{item}</span>
+            <span class="ui-marquee__div">{divider}</span>
+          </>
+        ))}
+      </div>
+    ))}
   </div>
 </div>
 

package/src/astro/NavDropdown.astro

@@ -27,9 +27,15 @@ const classes = ["ui-navgroup", open && "is-open", className]
 ---
 
 <div class={classes} data-navdropdown {...rest}>
-  <button class="ui-navlink" type="button" aria-expanded={open ? "true" : "false"}>
+  <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>
+    <span aria-hidden="true">
+      <Icon name="chevron-down" size={11} stroke={2.4} />
+    </span>
   </button>
   <div class="ui-navpanel">
     <slot />
@@ -40,42 +46,52 @@ const classes = ["ui-navgroup", open && "is-open", className]
   // Click-to-toggle, on top of the CSS hover/focus-within path: the only way
   // a touchscreen tap, or a Safari click (which does not focus a <button>),
   // can open the panel at all.
-  document.querySelectorAll<HTMLElement>("[data-navdropdown]").forEach((group) => {
-    const trigger = group.querySelector<HTMLButtonElement>(".ui-navlink");
-    if (!trigger) return;
-
-    const close = () => {
-      group.classList.remove("is-open");
-      trigger.setAttribute("aria-expanded", "false");
-    };
-
-    trigger.addEventListener("click", (event) => {
-      const willOpen = !group.classList.contains("is-open");
-      document.querySelectorAll<HTMLElement>("[data-navdropdown].is-open").forEach((other) => {
-        if (other === group) return;
-        other.classList.remove("is-open");
-        other.querySelector<HTMLButtonElement>(".ui-navlink")?.setAttribute("aria-expanded", "false");
+  document
+    .querySelectorAll<HTMLElement>("[data-navdropdown]")
+    .forEach((group) => {
+      const trigger = group.querySelector<HTMLButtonElement>(".ui-navlink");
+      if (!trigger) return;
+
+      const close = () => {
+        group.classList.remove("is-open");
+        trigger.setAttribute("aria-expanded", "false");
+      };
+
+      trigger.addEventListener("click", (event) => {
+        const willOpen = !group.classList.contains("is-open");
+        document
+          .querySelectorAll<HTMLElement>("[data-navdropdown].is-open")
+          .forEach((other) => {
+            if (other === group) return;
+            other.classList.remove("is-open");
+            other
+              .querySelector<HTMLButtonElement>(".ui-navlink")
+              ?.setAttribute("aria-expanded", "false");
+          });
+        group.classList.toggle("is-open", willOpen);
+        trigger.setAttribute("aria-expanded", String(willOpen));
+        event.stopPropagation();
       });
-      group.classList.toggle("is-open", willOpen);
-      trigger.setAttribute("aria-expanded", String(willOpen));
-      event.stopPropagation();
-    });
 
-    group.addEventListener("keydown", (event) => {
-      if (event.key === "Escape") {
-        close();
-        trigger.focus();
-      }
+      group.addEventListener("keydown", (event) => {
+        if (event.key === "Escape") {
+          close();
+          trigger.focus();
+        }
+      });
     });
-  });
 
   document.addEventListener("click", (event) => {
-    document.querySelectorAll<HTMLElement>("[data-navdropdown].is-open").forEach((group) => {
-      if (!group.contains(event.target as Node)) {
-        group.classList.remove("is-open");
-        group.querySelector<HTMLButtonElement>(".ui-navlink")?.setAttribute("aria-expanded", "false");
-      }
-    });
+    document
+      .querySelectorAll<HTMLElement>("[data-navdropdown].is-open")
+      .forEach((group) => {
+        if (!group.contains(event.target as Node)) {
+          group.classList.remove("is-open");
+          group
+            .querySelector<HTMLButtonElement>(".ui-navlink")
+            ?.setAttribute("aria-expanded", "false");
+        }
+      });
   });
 </script>
 

package/src/astro/NavLink.astro

@@ -33,8 +33,7 @@ const classes = ["ui-navlink", current && "is-current", className]
     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. */
+    /* 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);

package/src/astro/Newsletter.astro

@@ -40,7 +40,9 @@ const classes = ["ui-news", stacked && "ui-news--stacked", className]
 ---
 
 <form class={classes} action={action} method={method} {...rest}>
-  <label class="ui-sr-only" for={id}>{label}</label>
+  <label class="ui-sr-only" for={id}>
+    {label}
+  </label>
   <input
     class="ui-news__input"
     id={id}
@@ -50,7 +52,9 @@ const classes = ["ui-news", stacked && "ui-news--stacked", className]
     placeholder={placeholder}
     autocomplete="email"
   />
-  <button class="ui-news__btn" type="submit">{buttonText}</button>
+  <button class="ui-news__btn" type="submit">
+    {buttonText}
+  </button>
 </form>
 
 <style>

package/src/astro/Pager.astro

@@ -68,17 +68,21 @@ const hasNext = current < total;
       <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>
+    <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 class="is-current" href={href(p)} aria-current="page">
+        {p}
+      </a>
     ) : (
       <a href={href(p)}>{p}</a>
-    )
+    ),
   )}
 
   {hasNext ? (
@@ -86,7 +90,9 @@ const hasNext = current < total;
       <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>
+    <span class="is-disabled" aria-hidden="true">
+      <Icon name="chevron-right" size={17} stroke={2.3} />
+    </span>
   )}
 </nav>
 
@@ -119,13 +125,24 @@ const hasNext = current < total;
         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;
+        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 } }));
+        window.dispatchEvent(
+          new CustomEvent("ui:pagerchange", {
+            detail: { page, url: url.href },
+          }),
+        );
       },
       true,
     );
@@ -136,7 +153,11 @@ const hasNext = current < total;
       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 },
+          detail: {
+            page: Number.isFinite(p) ? p : 1,
+            url: u.href,
+            popped: true,
+          },
         }),
       );
     });

package/src/astro/ProductCard.astro

@@ -41,16 +41,27 @@ const ribbonLabel: Record<NonNullable<Props["ribbon"]>, string> = {
   fav: "Favoriet",
 };
 
-const classes = ["ui-product", soldOut && "is-disabled", className].filter(Boolean).join(" ");
+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">
+    <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} />
+  <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>}

package/src/astro/Skeleton.astro

@@ -12,9 +12,18 @@ interface Props {
   class?: string;
 }
 
-const { variant = "block", width, height, radius, class: className, ...rest } = Astro.props;
+const {
+  variant = "block",
+  width,
+  height,
+  radius,
+  class: className,
+  ...rest
+} = Astro.props;
 
-const classes = ["ui-skel", `ui-skel--${variant}`, className].filter(Boolean).join(" ");
+const classes = ["ui-skel", `ui-skel--${variant}`, className]
+  .filter(Boolean)
+  .join(" ");
 
 const style = [
   width && `width:${width}`,
@@ -25,7 +34,12 @@ const style = [
   .join(";");
 ---
 
-<span class={classes} style={style || undefined} aria-hidden="true" {...rest}></span>
+<span
+  class={classes}
+  style={style || undefined}
+  aria-hidden="true"
+  {...rest}
+></span>
 
 <style>
   .ui-skel {

package/src/astro/Social.astro

@@ -35,7 +35,8 @@ const classes = ["ui-social", className].filter(Boolean).join(" ");
     height: 40px;
     border-radius: var(--radius-md);
     color: var(--ivory-light);
-    transition: color var(--duration-fast) var(--ease-standard),
+    transition:
+      color var(--duration-fast) var(--ease-standard),
       background-color var(--duration-fast) var(--ease-standard);
   }
   .ui-social:hover {

package/src/astro/StepIndicator.astro

@@ -20,9 +20,18 @@ interface Props {
   class?: string;
 }
 
-const { steps, current, label, mobile = false, class: className, ...rest } = Astro.props;
+const {
+  steps,
+  current,
+  label,
+  mobile = false,
+  class: className,
+  ...rest
+} = Astro.props;
 
-const classes = ["ui-steps", mobile && "ui-steps--mobile", className].filter(Boolean).join(" ");
+const classes = ["ui-steps", mobile && "ui-steps--mobile", className]
+  .filter(Boolean)
+  .join(" ");
 ---
 
 <nav class={classes} aria-label={label} {...rest}>
@@ -31,7 +40,10 @@ const classes = ["ui-steps", mobile && "ui-steps--mobile", className].filter(Boo
     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", 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>

package/src/astro/Sticker.astro

@@ -15,12 +15,33 @@ const classes = ["pl-sticker", `pl-sticker--${size}`, className]
 <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(--surface-inverse)"></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>
+    <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>
+    <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">
+      <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>
     )}

package/src/astro/SwipeCarousel.astro

@@ -5,7 +5,11 @@ interface Props {
   class?: string;
 }
 
-const { label = "Uitgelichte artikelen", class: className, ...rest } = Astro.props;
+const {
+  label = "Uitgelichte artikelen",
+  class: className,
+  ...rest
+} = Astro.props;
 const classes = ["pl-carousel", className].filter(Boolean).join(" ");
 ---
 

package/src/astro/Table.astro

@@ -27,8 +27,14 @@ interface Props {
   class?: string;
 }
 
-const { columns, numeric = false, busy = false, caption, class: className, ...rest } =
-  Astro.props;
+const {
+  columns,
+  numeric = false,
+  busy = false,
+  caption,
+  class: className,
+  ...rest
+} = Astro.props;
 
 const classes = ["ui-table", numeric && "ui-table--numeric", className]
   .filter(Boolean)

package/src/astro/TableCard.astro

@@ -15,8 +15,12 @@ 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>
+  <span class="ui-tablecard__main">
+    <slot name="main" />
+  </span>
+  <span class="ui-tablecard__end">
+    <slot name="end" />
+  </span>
 </div>
 
 <style>

package/src/astro/TextField.astro

@@ -64,14 +64,19 @@ const inputClasses = [
   .filter(Boolean)
   .join(" ");
 
-const charCount = count && maxlength ? `${String(value).length} / ${maxlength}` : null;
+const charCount =
+  count && maxlength ? `${String(value).length} / ${maxlength}` : null;
 ---
 
 <label class={["ui-field", className].filter(Boolean).join(" ")}>
   {label && (
     <span class="ui-field__label">
       {label}
-      {required && <span class="ui-field__req" aria-hidden="true">*</span>}
+      {required && (
+        <span class="ui-field__req" aria-hidden="true">
+          *
+        </span>
+      )}
     </span>
   )}
 
@@ -115,7 +120,11 @@ const charCount = count && maxlength ? `${String(value).length} / ${maxlength}`
       {error}
     </span>
   ) : (
-    hint && <span class="ui-field__hint" id={hintId}>{hint}</span>
+    hint && (
+      <span class="ui-field__hint" id={hintId}>
+        {hint}
+      </span>
+    )
   )}
 
   {charCount && <span class="ui-field__count">{charCount}</span>}

package/src/react/Drawer.tsx

@@ -1,8 +1,4 @@
-import {
-  useEffect,
-  useRef,
-  type ReactNode,
-} from "react";
+import { useEffect, useRef, type ReactNode } from "react";
 import "./Drawer.css";
 
 /**

package/src/react/Modal.tsx

@@ -89,7 +89,9 @@ export default function Modal({
       if (!panel) return;
       const items = Array.from(
         panel.querySelectorAll<HTMLElement>(FOCUSABLE),
-      ).filter((el) => el.offsetParent !== null || el === document.activeElement);
+      ).filter(
+        (el) => el.offsetParent !== null || el === document.activeElement,
+      );
       if (items.length === 0) {
         e.preventDefault();
         panel.focus();
@@ -124,11 +126,7 @@ export default function Modal({
     >
       <div
         ref={panelRef}
-        className={[
-          "ui-modal",
-          isSheet && "ui-sheet",
-          className,
-        ]
+        className={["ui-modal", isSheet && "ui-sheet", className]
           .filter(Boolean)
           .join(" ")}
         role="dialog"

package/src/react/NewsCarousel.tsx

@@ -29,7 +29,13 @@ export interface NewsCarouselProps {
 }
 
 const ChevronIcon = ({ direction }: { direction: "left" | "right" }) => (
-  <svg width={18} height={18} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <svg
+    width={18}
+    height={18}
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+  >
     <path
       d={direction === "left" ? "M15 6l-6 6 6 6" : "M9 6l6 6-6 6"}
       stroke="currentColor"

package/src/react/Select.tsx

@@ -129,7 +129,9 @@ export default function Select({
   const openList = useCallback(() => {
     if (disabled) return;
     setOpen(true);
-    const current = selectable.findIndex((o) => o.value === value && !o.disabled);
+    const current = selectable.findIndex(
+      (o) => o.value === value && !o.disabled,
+    );
     const firstEnabled = selectable.findIndex((o) => !o.disabled);
     setActiveIndex(current >= 0 ? current : firstEnabled);
   }, [disabled, selectable, value]);
@@ -236,7 +238,11 @@ export default function Select({
 
   const describedBy = [errorId, hintId].filter(Boolean).join(" ") || undefined;
 
-  const fieldClasses = ["ui-select", invalid && "ui-select--invalid", open && "is-open"]
+  const fieldClasses = [
+    "ui-select",
+    invalid && "ui-select--invalid",
+    open && "is-open",
+  ]
     .filter(Boolean)
     .join(" ");
 

package/src/react/Toast.tsx

@@ -71,20 +71,54 @@ export function Toast({
     >
       <span className="ui-toast__icon" aria-hidden="true">
         {tone === "success" ? (
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
             <path d="M5 13l4 4L19 7" />
           </svg>
         ) : tone === "warning" ? (
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
             <path d="M12 4l8.5 15h-17L12 4zM12 10v4M12 16.5v.5" />
           </svg>
         ) : tone === "info" ? (
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+          >
             <circle cx="12" cy="12" r="9" />
             <path d="M12 11v5M12 8v.5" />
           </svg>
         ) : (
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+          >
             <circle cx="12" cy="12" r="9" />
             <path d="M12 8v4.5M12 16v.5" />
           </svg>