@kwtv/components 0.2.0 → 0.4.0

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,
+          },
         }),
       );
     });
@@ -147,49 +168,53 @@ const hasNext = current < total;
 </script>
 
 <style>
-  .ui-pager {
-    display: flex;
-    align-items: center;
-    gap: var(--space-1);
-    font-size: var(--text-sm);
-  }
+  @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,
+    .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: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 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 .is-disabled {
+      color: var(--border);
+      cursor: not-allowed;
+    }
 
-  .ui-pager__gap {
-    min-width: 24px;
-    text-align: center;
-    color: var(--text-muted);
+    .ui-pager__gap {
+      min-width: 24px;
+      text-align: center;
+      color: var(--text-muted);
+    }
   }
 </style>

package/src/astro/PickCard.astro

@@ -58,85 +58,89 @@ const classes = [
 </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);
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  .ui-pick input {
-    width: 18px;
-    height: 18px;
-    margin-top: 2px;
-    flex-shrink: 0;
-    accent-color: var(--primary);
-    cursor: pointer;
-  }
+  @layer components {
+    .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:focus-visible {
-    outline: 2px solid var(--focus);
-    outline-offset: 2px;
-    box-shadow: 0 0 0 4px var(--focus-outer);
-  }
+    .ui-pick input {
+      width: 18px;
+      height: 18px;
+      margin-top: 2px;
+      flex-shrink: 0;
+      accent-color: var(--primary);
+      cursor: pointer;
+    }
 
-  .ui-pick__text {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-    font-family: var(--font-sans);
-  }
+    .ui-pick input:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+      box-shadow: 0 0 0 4px var(--focus-outer);
+    }
 
-  .ui-pick__title {
-    font-size: var(--text-sm);
-    font-weight: var(--weight-semibold);
-    color: var(--text);
-  }
+    .ui-pick__text {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-1);
+      font-family: var(--font-sans);
+    }
 
-  .ui-pick__note {
-    font-size: var(--text-xs);
-    line-height: var(--leading-xs);
-    color: var(--text-muted);
-  }
+    .ui-pick__title {
+      font-size: var(--text-sm);
+      font-weight: var(--weight-semibold);
+      color: var(--text);
+    }
 
-  .ui-pick:hover,
-  .ui-pick.is-hover {
-    border-color: var(--border-strong);
-  }
+    .ui-pick__note {
+      font-size: var(--text-xs);
+      line-height: var(--leading-xs);
+      color: var(--text-muted);
+    }
 
-  /* Selected: 2 px border. */
-  .ui-pick.is-selected {
-    border-width: 2px;
-    border-color: var(--border-strong);
-    background: var(--surface-accent);
-  }
+    .ui-pick:hover,
+    .ui-pick.is-hover {
+      border-color: var(--border-strong);
+    }
 
-  .ui-pick.is-selected .ui-pick__title {
-    color: var(--surface-accent-fg, var(--text));
-  }
+    /* Selected: 2 px border. */
+    .ui-pick.is-selected {
+      border-width: 2px;
+      border-color: var(--border-strong);
+      background: var(--surface-accent);
+    }
 
-  /* 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-selected .ui-pick__title {
+      color: var(--surface-accent-fg, var(--text));
+    }
 
-  .ui-pick.is-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
+    /* 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));
+    }
 
-  @media (prefers-reduced-motion: reduce) {
-    .ui-pick {
-      transition: none;
+    .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

@@ -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>}
@@ -63,133 +74,137 @@ const classes = ["ui-product", soldOut && "is-disabled", className].filter(Boole
 </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);
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  .ui-product:hover,
-  .ui-product.is-hover {
-    border-color: var(--border-strong);
-  }
+  @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:focus-visible {
-    outline: 2px solid var(--focus);
-    outline-offset: 2px;
-    box-shadow: 0 0 0 4px var(--focus-outer);
-  }
+    .ui-product:hover,
+    .ui-product.is-hover {
+      border-color: var(--border-strong);
+    }
 
-  .ui-product__img {
-    display: block;
-    width: 100%;
-    aspect-ratio: 4 / 3;
-    object-fit: cover;
-    background: var(--surface-hover);
-  }
+    .ui-product:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+      box-shadow: 0 0 0 4px var(--focus-outer);
+    }
 
-  .ui-product__body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-    padding: var(--space-3) var(--space-4) var(--space-4);
-  }
+    .ui-product__img {
+      display: block;
+      width: 100%;
+      aspect-ratio: 4 / 3;
+      object-fit: cover;
+      background: var(--surface-hover);
+    }
 
-  .ui-product__title {
-    font-size: var(--text-base);
-    font-weight: var(--weight-semibold);
-    color: var(--text);
-  }
+    .ui-product__body {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-1);
+      padding: var(--space-3) var(--space-4) var(--space-4);
+    }
 
-  .ui-product__meta {
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-  }
+    .ui-product__title {
+      font-size: var(--text-base);
+      font-weight: var(--weight-semibold);
+      color: var(--text);
+    }
 
-  .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__meta {
+      font-size: var(--text-xs);
+      color: var(--text-muted);
+    }
 
-  .ui-product__price s {
-    font-size: var(--text-sm);
-    font-weight: var(--weight-regular);
-    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);
+    }
 
-  /* 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);
-  }
+    .ui-product__price s {
+      font-size: var(--text-sm);
+      font-weight: var(--weight-regular);
+      color: var(--text-muted);
+    }
 
-  /* 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);
-  }
+    /* 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);
+    }
 
-  @media (prefers-reduced-motion: reduce) {
-    .ui-product {
-      transition: none;
+    /* 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>