@kwtv/components 0.2.0 → 0.4.0

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" />
@@ -44,72 +50,76 @@ const hasFooter = Astro.slots.has("footer");
 </div>
 
 <style>
-  .ui-card {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-    padding: var(--space-5);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    background: var(--surface);
-    color: var(--text);
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  .ui-card__eyebrow {
-    font-family: var(--font-mono);
-    font-size: var(--text-2xs);
-    line-height: var(--leading-2xs);
-    font-weight: var(--weight-medium);
-    letter-spacing: var(--tracking-widest);
-    text-transform: uppercase;
-    color: var(--text-muted);
-  }
+  @layer components {
+    .ui-card {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+      padding: var(--space-5);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      background: var(--surface);
+      color: var(--text);
+    }
 
-  .ui-card__title {
-    margin: 0;
-    font-size: var(--text-lg);
-    line-height: var(--leading-lg);
-    font-weight: var(--weight-semibold);
-    letter-spacing: var(--tracking-tight);
-    color: var(--text);
-  }
+    .ui-card__eyebrow {
+      font-family: var(--font-mono);
+      font-size: var(--text-2xs);
+      line-height: var(--leading-2xs);
+      font-weight: var(--weight-medium);
+      letter-spacing: var(--tracking-widest);
+      text-transform: uppercase;
+      color: var(--text-muted);
+    }
 
-  .ui-card__body {
-    font-size: var(--text-sm);
-    line-height: var(--leading-sm);
-    color: var(--text-muted);
-  }
+    .ui-card__title {
+      margin: 0;
+      font-size: var(--text-lg);
+      line-height: var(--leading-lg);
+      font-weight: var(--weight-semibold);
+      letter-spacing: var(--tracking-tight);
+      color: var(--text);
+    }
 
-  .ui-card__footer {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-2);
-    margin-top: var(--space-2);
-  }
+    .ui-card__body {
+      font-size: var(--text-sm);
+      line-height: var(--leading-sm);
+      color: var(--text-muted);
+    }
 
-  /* Raised: cart summary, order total. */
-  .ui-card--raised {
-    border-color: transparent;
-    box-shadow: var(--shadow-lg);
-  }
+    .ui-card__footer {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-2);
+      margin-top: var(--space-2);
+    }
 
-  /* Accent: sage surface, ink-dark text kept at 4.5:1. Buttons inside keep
-     their own foreground colour. */
-  .ui-card--accent {
-    background: var(--surface-accent);
-    border-color: var(--border-strong);
-    color: var(--surface-accent-fg);
-  }
-  .ui-card--accent .ui-card__eyebrow,
-  .ui-card--accent .ui-card__title,
-  .ui-card--accent .ui-card__body {
-    color: var(--surface-accent-fg);
-  }
+    /* Raised: cart summary, order total. */
+    .ui-card--raised {
+      border-color: transparent;
+      box-shadow: var(--shadow-lg);
+    }
+
+    /* Accent: sage surface, ink-dark text kept at 4.5:1. Buttons inside keep */
+    /* their own foreground colour. */
+    .ui-card--accent {
+      background: var(--surface-accent);
+      border-color: var(--border-strong);
+      color: var(--surface-accent-fg);
+    }
+    .ui-card--accent .ui-card__eyebrow,
+    .ui-card--accent .ui-card__title,
+    .ui-card--accent .ui-card__body {
+      color: var(--surface-accent-fg);
+    }
 
-  /* Flat: no fill, grouping only. */
-  .ui-card--flat {
-    background: transparent;
-    border-color: transparent;
-    padding-inline: 0;
+    /* Flat: no fill, grouping only. */
+    .ui-card--flat {
+      background: transparent;
+      border-color: transparent;
+      padding-inline: 0;
+    }
   }
 </style>

package/src/astro/CartLine.astro

@@ -35,78 +35,92 @@ 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>
 
 <style>
-  .ui-line {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--space-4);
-    padding-block: var(--space-4-5);
-    border-top: 1px solid var(--border);
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  .ui-line__thumb {
-    flex-shrink: 0;
-    width: 72px;
-    height: 72px;
-    object-fit: cover;
-    border-radius: var(--radius-md);
-    border: 1px solid var(--border);
-  }
+  @layer components {
+    .ui-line {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--space-4);
+      padding-block: var(--space-4-5);
+      border-top: 1px solid var(--border);
+    }
 
-  .ui-line__grow {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-    flex: 1 1 auto;
-    min-width: 0;
-  }
+    .ui-line__thumb {
+      flex-shrink: 0;
+      width: 72px;
+      height: 72px;
+      object-fit: cover;
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border);
+    }
 
-  .ui-line__title {
-    font-family: var(--font-sans);
-    font-size: var(--text-base);
-    font-weight: var(--weight-semibold);
-    color: var(--text);
-  }
+    .ui-line__grow {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-1);
+      flex: 1 1 auto;
+      min-width: 0;
+    }
 
-  .ui-line__note {
-    font-size: var(--text-sm);
-    color: var(--text-muted);
-  }
+    .ui-line__title {
+      font-family: var(--font-sans);
+      font-size: var(--text-base);
+      font-weight: var(--weight-semibold);
+      color: var(--text);
+    }
 
-  .ui-line__remove {
-    align-self: flex-start;
-    font-size: var(--text-xs);
-    color: var(--link);
-  }
-  .ui-line__remove:hover {
-    color: var(--link-hover);
-  }
-  .ui-line__remove:focus-visible {
-    outline: 2px solid var(--focus);
-    outline-offset: 2px;
-    box-shadow: 0 0 0 4px var(--focus-outer);
-    border-radius: var(--radius-sm);
-  }
+    .ui-line__note {
+      font-size: var(--text-sm);
+      color: var(--text-muted);
+    }
 
-  .ui-line__qty {
-    flex-shrink: 0;
-  }
+    .ui-line__remove {
+      align-self: flex-start;
+      font-size: var(--text-xs);
+      color: var(--link);
+    }
+    .ui-line__remove:hover {
+      color: var(--link-hover);
+    }
+    .ui-line__remove:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+      box-shadow: 0 0 0 4px var(--focus-outer);
+      border-radius: var(--radius-sm);
+    }
+
+    .ui-line__qty {
+      flex-shrink: 0;
+    }
 
-  .ui-line__price {
-    flex-shrink: 0;
-    font-size: var(--text-base);
-    font-weight: var(--weight-semibold);
-    font-variant-numeric: tabular-nums;
-    color: var(--text);
+    .ui-line__price {
+      flex-shrink: 0;
+      font-size: var(--text-base);
+      font-weight: var(--weight-semibold);
+      font-variant-numeric: tabular-nums;
+      color: var(--text);
+    }
   }
 </style>

package/src/astro/Checkbox.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/Chip.astro

@@ -50,81 +50,85 @@ const classes = [
 </button>
 
 <style>
-  .ui-chip {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 36px;
-    padding: 0 var(--space-4);
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    font-family: var(--font-sans);
-    font-size: var(--text-sm);
-    font-weight: var(--weight-medium);
-    color: var(--text);
-    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-chip:hover,
-  .ui-chip.is-hover {
-    border-color: var(--border-strong);
-  }
+  @layer components {
+    .ui-chip {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 36px;
+      padding: 0 var(--space-4);
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      font-family: var(--font-sans);
+      font-size: var(--text-sm);
+      font-weight: var(--weight-medium);
+      color: var(--text);
+      cursor: pointer;
+      transition:
+        border-color var(--duration-fast) var(--ease-standard),
+        background-color var(--duration-fast) var(--ease-standard);
+    }
 
-  .ui-chip:focus-visible,
-  .ui-chip.is-focus {
-    outline: 2px solid var(--focus);
-    outline-offset: 2px;
-    box-shadow: 0 0 0 4px var(--focus-outer);
-  }
+    .ui-chip:hover,
+    .ui-chip.is-hover {
+      border-color: var(--border-strong);
+    }
 
-  /* Selected: 2 px border plus the accent surface, readable without colour. */
-  .ui-chip.is-selected,
-  .ui-chip[aria-pressed="true"] {
-    border-width: 2px;
-    border-color: var(--border-strong);
-    background: var(--surface-accent);
-    color: var(--surface-accent-fg, var(--text));
-    font-weight: var(--weight-semibold);
-  }
+    .ui-chip:focus-visible,
+    .ui-chip.is-focus {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+      box-shadow: 0 0 0 4px var(--focus-outer);
+    }
 
-  .ui-chip.is-disabled,
-  .ui-chip:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
+    /* Selected: 2 px border plus the accent surface, readable without colour. */
+    .ui-chip.is-selected,
+    .ui-chip[aria-pressed="true"] {
+      border-width: 2px;
+      border-color: var(--border-strong);
+      background: var(--surface-accent);
+      color: var(--surface-accent-fg, var(--text));
+      font-weight: var(--weight-semibold);
+    }
 
-  .ui-chip--struck {
-    text-decoration: line-through;
-  }
+    .ui-chip.is-disabled,
+    .ui-chip:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
 
-  /* Filter chip: 32 px. */
-  .ui-chip--filter {
-    min-height: 32px;
-    border-radius: var(--radius-full);
-    padding: 0 var(--space-3);
-  }
+    .ui-chip--struck {
+      text-decoration: line-through;
+    }
 
-  .ui-chip--filter.is-selected,
-  .ui-chip--filter[aria-pressed="true"] {
-    background: var(--surface-accent);
-  }
+    /* Filter chip: 32 px. */
+    .ui-chip--filter {
+      min-height: 32px;
+      border-radius: var(--radius-full);
+      padding: 0 var(--space-3);
+    }
 
-  @media (prefers-reduced-motion: reduce) {
-    .ui-chip {
-      transition: none;
+    .ui-chip--filter.is-selected,
+    .ui-chip--filter[aria-pressed="true"] {
+      background: var(--surface-accent);
     }
-  }
 
-  @media (max-width: 700px), (pointer: coarse) {
-    .ui-chip {
-      min-height: 36px;
+    @media (prefers-reduced-motion: reduce) {
+      .ui-chip {
+        transition: none;
+      }
     }
-    .ui-chip--filter {
-      min-height: 40px;
+
+    @media (max-width: 700px), (pointer: coarse) {
+      .ui-chip {
+        min-height: 36px;
+      }
+      .ui-chip--filter {
+        min-height: 40px;
+      }
     }
   }
 </style>

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,56 +16,69 @@ 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>
-  .pl-dotgrid {
-    position: relative;
-    min-height: 132px;
-    overflow: hidden;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    background: var(--surface);
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  .pl-dotgrid__dots {
-    position: absolute;
-    inset: 0;
-    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));
-    animation: pl-drift 6s linear infinite;
-  }
+  @layer components {
+    .pl-dotgrid {
+      position: relative;
+      min-height: 132px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      background: var(--surface);
+    }
 
-  .pl-dotgrid__content {
-    position: relative;
-    display: block;
-    padding: var(--space-5);
-    font-size: var(--text-lg);
-    font-weight: var(--weight-semibold);
-  }
+    .pl-dotgrid__dots {
+      position: absolute;
+      inset: 0;
+      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, 0.7));
+      animation: pl-drift 6s linear infinite;
+    }
 
-  .pl-dotgrid--compact {
-    border: 0;
-    border-radius: 0;
-  }
-  .pl-dotgrid--compact .pl-dotgrid__dots {
-    background-size: 24px 24px;
-  }
-  .pl-dotgrid--compact .pl-dotgrid__content {
-    font-size: var(--text-base);
-  }
+    .pl-dotgrid__content {
+      position: relative;
+      display: block;
+      padding: var(--space-5);
+      font-size: var(--text-lg);
+      font-weight: var(--weight-semibold);
+    }
 
-  /* Explicit themes win over OS preference, as in the token cascade. */
-  :global([data-theme="dark"]) .pl-dotgrid { --dotgrid-theme-opacity: .2; }
-  @media (prefers-color-scheme: dark) {
-    :global(:root:not([data-theme])) .pl-dotgrid { --dotgrid-theme-opacity: .2; }
-  }
+    .pl-dotgrid--compact {
+      border: 0;
+      border-radius: 0;
+    }
+    .pl-dotgrid--compact .pl-dotgrid__dots {
+      background-size: 24px 24px;
+    }
+    .pl-dotgrid--compact .pl-dotgrid__content {
+      font-size: var(--text-base);
+    }
 
-  @media (prefers-reduced-motion: reduce) {
-    .pl-dotgrid__dots {
-      animation: none;
+    /* Explicit themes win over OS preference, as in the token cascade. */
+    :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: 0.2;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .pl-dotgrid__dots {
+        animation: none;
+      }
     }
   }
 </style>