@kwtv/components 0.3.0 → 0.5.0

package/src/astro/Card.astro

@@ -50,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

@@ -56,67 +56,71 @@ const classes = ["ui-line", className].filter(Boolean).join(" ");
 </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,48 @@ 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: flex-start;
+      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;
+      margin-top: calc((var(--leading-sm, 1.375rem) - 17px) / 2);
+      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/DotGrid.astro

@@ -22,59 +22,63 @@ const classes = ["pl-dotgrid", compact && "pl-dotgrid--compact", className]
 </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, 0.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: 0.2;
-  }
-  @media (prefers-color-scheme: dark) {
-    :global(:root:not([data-theme])) .pl-dotgrid {
+    .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);
+    }
+
+    /* 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;
+    @media (prefers-reduced-motion: reduce) {
+      .pl-dotgrid__dots {
+        animation: none;
+      }
     }
   }
 </style>

package/src/astro/EmptyState.astro

@@ -26,29 +26,33 @@ const hasAction = Astro.slots.has("action");
 </div>
 
 <style>
-  .ui-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--space-2);
-    padding: var(--space-8) var(--space-6);
-    border: 1px dashed var(--border-strong);
-    border-radius: var(--radius-lg);
-    background: var(--surface);
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  .ui-empty__title {
-    font-size: var(--text-lg);
-    font-weight: var(--weight-semibold);
-    color: var(--text);
-  }
+  @layer components {
+    .ui-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-2);
+      padding: var(--space-8) var(--space-6);
+      border: 1px dashed var(--border-strong);
+      border-radius: var(--radius-lg);
+      background: var(--surface);
+    }
 
-  .ui-empty__body {
-    font-size: var(--text-sm);
-    line-height: var(--leading-sm);
-    color: var(--text-muted);
-  }
+    .ui-empty__title {
+      font-size: var(--text-lg);
+      font-weight: var(--weight-semibold);
+      color: var(--text);
+    }
 
-  /* The flex `gap` above already spaces the action from the body; an added
-     margin here doubled that gap and threw off the rhythm between the two. */
+    .ui-empty__body {
+      font-size: var(--text-sm);
+      line-height: var(--leading-sm);
+      color: var(--text-muted);
+    }
+
+    /* The flex `gap` above already spaces the action from the body; an added */
+    /* margin here doubled that gap and threw off the rhythm between the two. */
+  }
 </style>