@kwtv/components 0.2.0 → 0.4.0

package/src/astro/EmptyState.astro

@@ -15,7 +15,9 @@ const hasAction = Astro.slots.has("action");
 
 <div class={["ui-empty", className].filter(Boolean).join(" ")} {...rest}>
   <b class="ui-empty__title">{title}</b>
-  <span class="ui-empty__body"><slot /></span>
+  <span class="ui-empty__body">
+    <slot />
+  </span>
   {hasAction && (
     <div class="ui-empty__action">
       <slot name="action" />
@@ -24,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>

package/src/astro/FilterGroup.astro

@@ -25,34 +25,37 @@ const classes = ["ui-filtergroup", className].filter(Boolean).join(" ");
 </fieldset>
 
 <style>
-  .ui-filtergroup {
-    margin: 0;
-    padding: var(--space-3) 0 0;
-    border: 0;
-    /* More space above the rule than below it, so the rule belongs to this
-       group's top edge. */
-    margin-top: var(--space-4);
-    border-top: 1px solid var(--border);
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  .ui-filtergroup:first-of-type {
-    margin-top: 0;
-    border-top: 0;
-    padding-top: 0;
-  }
+  @layer components {
+    .ui-filtergroup {
+      margin: 0;
+      padding: var(--space-3) 0 0;
+      border: 0;
+      /* More space above the rule than below it, so the rule belongs to this group's top edge. */
+      margin-top: var(--space-4);
+      border-top: 1px solid var(--border);
+    }
 
-  .ui-filtergroup__title {
-    padding: 0;
-    margin-bottom: var(--space-2);
-    font-family: var(--font-sans);
-    font-size: var(--text-sm);
-    font-weight: var(--weight-semibold);
-    color: var(--text);
-  }
+    .ui-filtergroup:first-of-type {
+      margin-top: 0;
+      border-top: 0;
+      padding-top: 0;
+    }
+
+    .ui-filtergroup__title {
+      padding: 0;
+      margin-bottom: var(--space-2);
+      font-family: var(--font-sans);
+      font-size: var(--text-sm);
+      font-weight: var(--weight-semibold);
+      color: var(--text);
+    }
 
-  .ui-filtergroup__options {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
+    .ui-filtergroup__options {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+    }
   }
 </style>

package/src/astro/Filters.astro

@@ -23,62 +23,72 @@ const classes = ["ui-filters", className].filter(Boolean).join(" ");
 <aside class={classes} {...rest}>
   <div class="ui-filterbar">
     <span class="ui-eyebrow">Filters</span>
-    {clearLabel && <slot name="clear"><button class="ui-filters__clear" type="button">{clearLabel}</button></slot>}
+    {clearLabel && (
+      <slot name="clear">
+        <button class="ui-filters__clear" type="button">
+          {clearLabel}
+        </button>
+      </slot>
+    )}
   </div>
   <slot />
 </aside>
 
 <style>
-  .ui-filters {
-    width: 232px;
-    display: flex;
-    flex-direction: column;
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  .ui-filterbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-3);
-    padding-bottom: var(--space-3);
-    margin-bottom: var(--space-1);
-  }
+  @layer components {
+    .ui-filters {
+      width: 232px;
+      display: flex;
+      flex-direction: column;
+    }
 
-  .ui-eyebrow {
-    font-family: var(--font-mono);
-    font-size: var(--text-2xs);
-    font-weight: var(--weight-semibold);
-    letter-spacing: var(--tracking-widest);
-    text-transform: uppercase;
-    color: var(--text-muted);
-  }
+    .ui-filterbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--space-3);
+      padding-bottom: var(--space-3);
+      margin-bottom: var(--space-1);
+    }
 
-  /* A ghost-weight clear action. Kept local so the sidebar needs no button
-     import; the consumer may slot in a Button ghost instead. */
-  .ui-filters__clear {
-    padding: var(--space-1-5) var(--space-2);
-    background: transparent;
-    border: 0;
-    border-radius: var(--radius-sm);
-    font-family: var(--font-sans);
-    font-size: var(--text-xs);
-    font-weight: var(--weight-semibold);
-    color: var(--link);
-    cursor: pointer;
-  }
-  .ui-filters__clear:hover {
-    background: var(--surface-hover);
-    color: var(--link-hover);
-  }
-  .ui-filters__clear:focus-visible {
-    outline: 2px solid var(--focus);
-    outline-offset: 2px;
-    box-shadow: 0 0 0 4px var(--focus-outer);
-  }
+    .ui-eyebrow {
+      font-family: var(--font-mono);
+      font-size: var(--text-2xs);
+      font-weight: var(--weight-semibold);
+      letter-spacing: var(--tracking-widest);
+      text-transform: uppercase;
+      color: var(--text-muted);
+    }
 
-  @media (max-width: 700px) {
-    .ui-filters {
-      width: 100%;
+    /* A ghost-weight clear action. Kept local so the sidebar needs no button */
+    /* import; the consumer may slot in a Button ghost instead. */
+    .ui-filters__clear {
+      padding: var(--space-1-5) var(--space-2);
+      background: transparent;
+      border: 0;
+      border-radius: var(--radius-sm);
+      font-family: var(--font-sans);
+      font-size: var(--text-xs);
+      font-weight: var(--weight-semibold);
+      color: var(--link);
+      cursor: pointer;
+    }
+    .ui-filters__clear:hover {
+      background: var(--surface-hover);
+      color: var(--link-hover);
+    }
+    .ui-filters__clear:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+      box-shadow: 0 0 0 4px var(--focus-outer);
+    }
+
+    @media (max-width: 700px) {
+      .ui-filters {
+        width: 100%;
+      }
     }
   }
 </style>

package/src/astro/Footer.astro

@@ -33,205 +33,222 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
 
 <footer class={classes} {...rest}>
   <div class="ui-footer__brandblock">
-    <div class="ui-footer__brand">{brandName}<slot name="brand-suffix" /></div>
-    <div class="ui-footer__addr"><slot name="address" /></div>
-    <div class="ui-footer__social"><slot name="social" /></div>
+    <div class="ui-footer__brand">
+      {brandName}
+      <slot name="brand-suffix" />
+    </div>
+    <div class="ui-footer__addr">
+      <slot name="address" />
+    </div>
+    <div class="ui-footer__social">
+      <slot name="social" />
+    </div>
   </div>
 
   <slot />
 
   <div class="ui-footer__bar">
-    <span class="ui-footer__legal"><slot name="legal" /></span>
-    <span class="ui-footer__policies"><slot name="policies" /></span>
+    <span class="ui-footer__legal">
+      <slot name="legal" />
+    </span>
+    <span class="ui-footer__policies">
+      <slot name="policies" />
+    </span>
   </div>
 </footer>
 
 <style>
-  .ui-footer {
-    display: grid;
-    grid-template-columns: 1.5fr 1fr 1.3fr;
-    gap: var(--space-10);
-    padding: var(--space-10);
-    background: var(--surface-inverse);
-    color: var(--surface-inverse-fg);
-  }
-
-  .ui-footer__brandblock {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
-  .ui-footer__brand {
-    font-family: var(--font-sans);
-    font-size: var(--text-xl);
-    font-weight: var(--weight-bold);
-    letter-spacing: var(--tracking-tight);
-    color: var(--ivory-xlight);
-  }
-  .ui-footer__brand :global(span) {
-    font-weight: var(--weight-regular);
-    color: var(--surface-inverse-muted);
-  }
-
-  .ui-footer__addr {
-    font-size: var(--text-sm);
-    line-height: var(--leading-sm);
-    color: var(--surface-inverse-fg);
-  }
-  .ui-footer__addr :global(a) {
-    color: inherit;
-    text-decoration: underline;
-    text-underline-offset: 2px;
-  }
+  @layer reset, tokens, base, components, motion, utilities;
+
+  @layer components {
+    .ui-footer {
+      display: grid;
+      grid-template-columns: 1.5fr 1fr 1.3fr;
+      gap: var(--space-10);
+      padding: var(--space-10);
+      background: var(--surface-inverse);
+      color: var(--surface-inverse-fg);
+    }
 
-  .ui-footer__social {
-    display: flex;
-    gap: var(--space-1);
-    margin-top: var(--space-1);
-  }
+    .ui-footer__brandblock {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
+    }
 
-  /* The bottom bar spans all columns. */
-  .ui-footer__bar {
-    grid-column: 1 / -1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-4);
-    flex-wrap: wrap;
-    margin-top: var(--space-4);
-    padding-top: var(--space-5);
-    border-top: 1px solid var(--surface-inverse-border);
-    font-size: var(--text-xs);
-    color: var(--surface-inverse-muted);
-  }
+    .ui-footer__brand {
+      font-family: var(--font-sans);
+      font-size: var(--text-xl);
+      font-weight: var(--weight-bold);
+      letter-spacing: var(--tracking-tight);
+      color: var(--ivory-xlight);
+    }
+    .ui-footer__brand :global(span) {
+      font-weight: var(--weight-regular);
+      color: var(--surface-inverse-muted);
+    }
 
-  .ui-footer__policies {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-4);
-  }
-  .ui-footer__bar :global(a) {
-    color: var(--surface-inverse-fg);
-    text-decoration: underline;
-    text-underline-offset: 2px;
-  }
-  .ui-footer__bar :global(a:hover) {
-    color: var(--ivory-xlight);
-  }
-  .ui-footer__bar :global(a:focus-visible) {
-    outline: 2px solid var(--ivory-xlight);
-    outline-offset: 2px;
-    border-radius: var(--radius-sm);
-  }
+    .ui-footer__addr {
+      font-size: var(--text-sm);
+      line-height: var(--leading-sm);
+      color: var(--surface-inverse-fg);
+    }
+    .ui-footer__addr :global(a) {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
 
-  /* Pin the stacked state in component explorers and constrained shells. */
-  .ui-footer--mobile {
-    grid-template-columns: 1fr;
-    gap: var(--space-6);
-    padding: var(--space-6);
-    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
-  }
-  .ui-footer--mobile .ui-footer__bar {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--space-3);
-    margin-top: var(--space-2);
-    padding-top: var(--space-5);
-  }
-  .ui-footer--mobile .ui-footer__policies {
-    row-gap: var(--space-3);
-  }
+    .ui-footer__social {
+      display: flex;
+      gap: var(--space-1);
+      margin-top: var(--space-1);
+    }
 
-  /* The club-site footer interleaves contact details and social links on
-     compact screens, so its brand block participates in the outer layout. */
-  .ui-footer--mobile.ui-footer--site {
-    display: flex;
-    flex-direction: column;
-  }
-  .ui-footer--mobile.ui-footer--site .ui-footer__brandblock {
-    display: contents;
-  }
-  .ui-footer--mobile.ui-footer--site .ui-footer__brand {
-    order: 1;
-    font-size: var(--text-lg);
-    font-weight: var(--weight-regular);
-    color: var(--surface-inverse-muted);
-  }
-  .ui-footer--mobile.ui-footer--site .ui-footer__addr {
-    order: 2;
-  }
-  .ui-footer--mobile.ui-footer--site :global(.ui-footer__contact) {
-    order: 3;
-    gap: var(--space-2);
-    margin-top: calc(var(--space-6) * -1 + var(--space-2));
-  }
-  .ui-footer--mobile.ui-footer--site :global(.ui-footer__contact .ui-footer__title),
-  .ui-footer--mobile.ui-footer--site :global(.ui-footer__desktop-only) {
-    display: none;
-  }
-  .ui-footer--mobile.ui-footer--site .ui-footer__social {
-    order: 4;
-    gap: var(--space-3);
-    margin-top: var(--space-1);
-  }
-  .ui-footer--mobile.ui-footer--site .ui-footer__social :global(.ui-social) {
-    width: 48px;
-    height: 48px;
-    border: 1px solid var(--surface-inverse-border);
-    border-radius: var(--radius-full);
-  }
-  .ui-footer--mobile.ui-footer--site :global(.ui-footer__newsletter) {
-    order: 5;
-    gap: var(--space-4);
-    margin-top: var(--space-4);
-  }
-  .ui-footer--mobile.ui-footer--site .ui-footer__bar {
-    order: 6;
-  }
-  .ui-footer--mobile.ui-footer--site :global(.ui-news) {
-    flex-direction: column;
-    max-width: none;
-    gap: var(--space-3);
-  }
-  .ui-footer--mobile.ui-footer--site :global(.ui-news__btn) {
-    background: var(--ivory-xlight);
-  }
+    /* The bottom bar spans all columns. */
+    .ui-footer__bar {
+      grid-column: 1 / -1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--space-4);
+      flex-wrap: wrap;
+      margin-top: var(--space-4);
+      padding-top: var(--space-5);
+      border-top: 1px solid var(--surface-inverse-border);
+      font-size: var(--text-xs);
+      color: var(--surface-inverse-muted);
+    }
 
-  .ui-footer--mobile.ui-footer--shop {
-    gap: var(--space-6);
-  }
-  .ui-footer--mobile.ui-footer--shop .ui-footer__brandblock {
-    gap: var(--space-5);
-  }
-  .ui-footer--mobile.ui-footer--shop .ui-footer__brand {
-    font-size: var(--text-md);
-  }
-  .ui-footer--mobile.ui-footer--shop .ui-footer__brand :global(span) {
-    font-weight: inherit;
-    color: inherit;
-  }
-  .ui-footer--mobile.ui-footer--shop :global(.ui-footer__shop-links) {
-    gap: var(--space-4);
-  }
-  .ui-footer--mobile.ui-footer--shop :global(.ui-footer__shop-links .ui-footer__title) {
-    display: none;
-  }
-  .ui-footer--mobile.ui-footer--shop .ui-footer__social:empty {
-    display: none;
-  }
+    .ui-footer__policies {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-4);
+    }
+    .ui-footer__bar :global(a) {
+      color: var(--surface-inverse-fg);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+    .ui-footer__bar :global(a:hover) {
+      color: var(--ivory-xlight);
+    }
+    .ui-footer__bar :global(a:focus-visible) {
+      outline: 2px solid var(--ivory-xlight);
+      outline-offset: 2px;
+      border-radius: var(--radius-sm);
+    }
 
-  /* Stacks on mobile. */
-  @media (max-width: 700px) {
-    .ui-footer:not(.ui-footer--mobile) {
+    /* Pin the stacked state in component explorers and constrained shells. */
+    .ui-footer--mobile {
       grid-template-columns: 1fr;
-      gap: var(--space-8);
-      padding: var(--space-6) var(--space-4);
+      gap: var(--space-6);
+      padding: var(--space-6);
+      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
     }
-    .ui-footer:not(.ui-footer--mobile) .ui-footer__bar {
+    .ui-footer--mobile .ui-footer__bar {
       flex-direction: column;
       align-items: flex-start;
       gap: var(--space-3);
+      margin-top: var(--space-2);
+      padding-top: var(--space-5);
+    }
+    .ui-footer--mobile .ui-footer__policies {
+      row-gap: var(--space-3);
+    }
+
+    /* The club-site footer interleaves contact details and social links on */
+    /* compact screens, so its brand block participates in the outer layout. */
+    .ui-footer--mobile.ui-footer--site {
+      display: flex;
+      flex-direction: column;
+    }
+    .ui-footer--mobile.ui-footer--site .ui-footer__brandblock {
+      display: contents;
+    }
+    .ui-footer--mobile.ui-footer--site .ui-footer__brand {
+      order: 1;
+      font-size: var(--text-lg);
+      font-weight: var(--weight-regular);
+      color: var(--surface-inverse-muted);
+    }
+    .ui-footer--mobile.ui-footer--site .ui-footer__addr {
+      order: 2;
+    }
+    .ui-footer--mobile.ui-footer--site :global(.ui-footer__contact) {
+      order: 3;
+      gap: var(--space-2);
+      margin-top: calc(var(--space-6) * -1 + var(--space-2));
+    }
+    .ui-footer--mobile.ui-footer--site
+      :global(.ui-footer__contact .ui-footer__title),
+    .ui-footer--mobile.ui-footer--site :global(.ui-footer__desktop-only) {
+      display: none;
+    }
+    .ui-footer--mobile.ui-footer--site .ui-footer__social {
+      order: 4;
+      gap: var(--space-3);
+      margin-top: var(--space-1);
+    }
+    .ui-footer--mobile.ui-footer--site .ui-footer__social :global(.ui-social) {
+      width: 48px;
+      height: 48px;
+      border: 1px solid var(--surface-inverse-border);
+      border-radius: var(--radius-full);
+    }
+    .ui-footer--mobile.ui-footer--site :global(.ui-footer__newsletter) {
+      order: 5;
+      gap: var(--space-4);
+      margin-top: var(--space-4);
+    }
+    .ui-footer--mobile.ui-footer--site .ui-footer__bar {
+      order: 6;
+    }
+    .ui-footer--mobile.ui-footer--site :global(.ui-news) {
+      flex-direction: column;
+      max-width: none;
+      gap: var(--space-3);
+    }
+    .ui-footer--mobile.ui-footer--site :global(.ui-news__btn) {
+      background: var(--ivory-xlight);
+    }
+
+    .ui-footer--mobile.ui-footer--shop {
+      gap: var(--space-6);
+    }
+    .ui-footer--mobile.ui-footer--shop .ui-footer__brandblock {
+      gap: var(--space-5);
+    }
+    .ui-footer--mobile.ui-footer--shop .ui-footer__brand {
+      font-size: var(--text-md);
+    }
+    .ui-footer--mobile.ui-footer--shop .ui-footer__brand :global(span) {
+      font-weight: inherit;
+      color: inherit;
+    }
+    .ui-footer--mobile.ui-footer--shop :global(.ui-footer__shop-links) {
+      gap: var(--space-4);
+    }
+    .ui-footer--mobile.ui-footer--shop
+      :global(.ui-footer__shop-links .ui-footer__title) {
+      display: none;
+    }
+    .ui-footer--mobile.ui-footer--shop .ui-footer__social:empty {
+      display: none;
+    }
+
+    /* Stacks on mobile. */
+    @media (max-width: 700px) {
+      .ui-footer:not(.ui-footer--mobile) {
+        grid-template-columns: 1fr;
+        gap: var(--space-8);
+        padding: var(--space-6) var(--space-4);
+      }
+      .ui-footer:not(.ui-footer--mobile) .ui-footer__bar {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-3);
+      }
     }
   }
 </style>