@kwtv/components 0.3.0 → 0.4.0

package/src/astro/ProductCard.astro

@@ -74,133 +74,137 @@ const classes = ["ui-product", soldOut && "is-disabled", className]
 </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>

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

@@ -42,53 +42,57 @@ const style = [
 ></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,30 +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

@@ -55,62 +55,66 @@ const classes = ["ui-steps", mobile && "ui-steps--mobile", className]
 </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>