@kwtv/components 0.2.0 → 0.4.0

package/src/astro/Radio.astro

@@ -47,43 +47,47 @@ const classes = ["ui-check", disabled && "is-disabled", className]
 </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;
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  .ui-check input {
-    width: 17px;
-    height: 17px;
-    flex-shrink: 0;
-    accent-color: var(--primary);
-    cursor: pointer;
-  }
+  @layer components {
+    .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:focus-visible {
-    outline: 2px solid var(--focus);
-    outline-offset: 2px;
-    box-shadow: 0 0 0 4px var(--focus-outer);
-  }
+    .ui-check input {
+      width: 17px;
+      height: 17px;
+      flex-shrink: 0;
+      accent-color: var(--primary);
+      cursor: pointer;
+    }
 
-  .ui-check.is-disabled {
-    cursor: not-allowed;
-    color: var(--text-muted);
-  }
+    .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 input {
-    cursor: not-allowed;
-  }
+    .ui-check.is-disabled {
+      cursor: not-allowed;
+      color: var(--text-muted);
+    }
 
-  @media (max-width: 700px), (pointer: coarse) {
-    .ui-check {
-      min-height: 40px;
+    .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

@@ -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,56 +34,65 @@ 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 {
-    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;
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  .ui-skel--img {
-    width: 100%;
-    aspect-ratio: 4 / 3;
-    border-radius: 0;
-  }
+  @layer components {
+    .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--title {
-    height: 0.875rem;
-    border-radius: var(--radius-sm);
-  }
+    .ui-skel--img {
+      width: 100%;
+      aspect-ratio: 4 / 3;
+      border-radius: 0;
+    }
 
-  .ui-skel--line {
-    height: 0.625rem;
-    border-radius: var(--radius-sm);
-  }
+    .ui-skel--title {
+      height: 0.875rem;
+      border-radius: var(--radius-sm);
+    }
 
-  .ui-skel--block {
-    height: 1rem;
-  }
+    .ui-skel--line {
+      height: 0.625rem;
+      border-radius: var(--radius-sm);
+    }
 
-  @keyframes ui-skel-shimmer {
-    0% {
-      background-position: 200% 0;
+    .ui-skel--block {
+      height: 1rem;
     }
-    100% {
-      background-position: -200% 0;
+
+    @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;
+    @media (prefers-reduced-motion: reduce) {
+      .ui-skel {
+        animation: none;
+        background-image: none;
+      }
     }
   }
 </style>

package/src/astro/Social.astro

@@ -27,29 +27,34 @@ const classes = ["ui-social", className].filter(Boolean).join(" ");
 </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;
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  @media (prefers-reduced-motion: reduce) {
+  @layer components {
     .ui-social {
-      transition: none;
+      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

@@ -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>
@@ -43,62 +55,66 @@ const classes = ["ui-steps", mobile && "ui-steps--mobile", className].filter(Boo
 </nav>
 
 <style>
-  .ui-steps {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  .ui-step {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2);
-    font-size: var(--text-sm);
-    color: var(--text-muted);
-  }
+  @layer components {
+    .ui-steps {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+    }
 
-  .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 {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-2);
+      font-size: var(--text-sm);
+      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__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-done {
-    color: var(--text);
-  }
-  .ui-step.is-done .ui-step__dot {
-    border-color: var(--primary);
-    background: var(--primary);
-    color: var(--primary-fg);
-  }
+    .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-steps__sep {
-    flex: 1;
-    min-width: var(--space-4);
-    height: 1px;
-    background: var(--border);
-  }
+    .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;
+    /* 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

@@ -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>
     )}
@@ -28,53 +49,57 @@ const classes = ["pl-sticker", `pl-sticker--${size}`, className]
 </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(--surface-inverse-fg);
-    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,
+  @layer reset, tokens, base, components, motion, utilities;
+
+  @layer components {
+    .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(--surface-inverse-fg);
+      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: none;
+      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

@@ -48,53 +48,57 @@ const ariaLabel = selected ? `${label}, geselecteerd` : label;
 ></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);
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  .ui-swatch:hover,
-  .ui-swatch.is-hover {
-    box-shadow: 0 0 0 2px var(--border-strong);
-  }
+  @layer components {
+    .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:focus-visible,
-  .ui-swatch.is-focus {
-    outline: 2px solid var(--focus);
-    outline-offset: 2px;
-    box-shadow: 0 0 0 4px var(--focus-outer);
-  }
+    .ui-swatch:hover,
+    .ui-swatch.is-hover {
+      box-shadow: 0 0 0 2px var(--border-strong);
+    }
 
-  /* 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:focus-visible,
+    .ui-swatch.is-focus {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+      box-shadow: 0 0 0 4px var(--focus-outer);
+    }
 
-  .ui-swatch.is-disabled,
-  .ui-swatch:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
+    /* 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);
+    }
 
-  @media (prefers-reduced-motion: reduce) {
-    .ui-swatch {
-      transition: none;
+    .ui-swatch.is-disabled,
+    .ui-swatch:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
     }
-  }
 
-  @media (max-width: 700px), (pointer: coarse) {
-    .ui-swatch {
-      width: 32px;
-      height: 32px;
+    @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

@@ -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(" ");
 ---