@kwtv/components 0.2.0 → 0.4.0

package/src/astro/Band.astro

@@ -10,20 +10,35 @@
  * Cards placed on the band move to a lighter tint of the band's own surface,
  * so they read as part of the band rather than a return to plain paper.
  *
+ * Product cards keep their own paper surface and text roles. Their new and
+ * favourite ribbons are sage by default, so on the band they move to
+ * charcoal and ivory. Promo stays burgundy, so all three stay distinct.
+ *
  * Corner radius matches every other surface in the system (Card, PickCard,
  * NavDropdown's panel): --radius-lg. A band that sits inset in a page, next
  * to a rounded card, needs the same rounding or the two read as unrelated.
+ * A band that runs edge to edge sets `bleed`. It drops the radius and the
+ * side borders, which would only show as clipped corners at the viewport.
  */
 interface Props {
   /** Renders as <section> by default. Use "div" when the band is not a
    *  standalone region of the page. */
   as?: "section" | "div" | "aside";
+  /** Runs edge to edge: no corner radius and no side borders. */
+  bleed?: boolean;
   class?: string;
 }
 
-const { as: Tag = "section", class: className, ...rest } = Astro.props;
+const {
+  as: Tag = "section",
+  bleed = false,
+  class: className,
+  ...rest
+} = Astro.props;
 
-const classes = ["ui-band", className].filter(Boolean).join(" ");
+const classes = ["ui-band", bleed && "ui-band--bleed", className]
+  .filter(Boolean)
+  .join(" ");
 ---
 
 <Tag class={classes} {...rest}>
@@ -31,67 +46,98 @@ const classes = ["ui-band", className].filter(Boolean).join(" ");
 </Tag>
 
 <style>
-  .ui-band {
-    background: var(--surface-accent);
-    border: 1px solid var(--border-strong);
-    border-radius: var(--radius-lg);
-    color: var(--surface-accent-fg);
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  /* Every text role inside the band moves to the accent foreground. Sage is a
-     mid tone: --text clears it, but --text-muted and --link do not. */
-  .ui-band :global(p),
-  .ui-band :global(span),
-  .ui-band :global(a),
-  .ui-band :global(td),
-  .ui-band :global(th),
-  .ui-band :global(strong),
-  .ui-band :global(b),
-  .ui-band :global(label),
-  .ui-band :global(.ui-eyebrow),
-  .ui-band :global(.ui-card__eyebrow),
-  .ui-band :global(.ui-card__body) {
-    color: var(--surface-accent-fg);
-  }
+  @layer components {
+    .ui-band {
+      background: var(--surface-accent);
+      border: 1px solid var(--border-strong);
+      border-radius: var(--radius-lg);
+      color: var(--surface-accent-fg);
+    }
 
-  /* Secondary copy gets the band's own muted role, which clears 4.5 on sage.
-     --text-muted only reaches 3.6 here. */
-  .ui-band :global(small),
-  .ui-band :global(.ui-band__note) {
-    color: var(--surface-accent-muted);
-  }
+    .ui-band--bleed {
+      border-inline: 0;
+      border-radius: 0;
+    }
 
-  /* A card on the band moves to a lighter tint of the band's own surface,
-     rather than to plain paper, so it still reads as part of the band. It
-     carries its own foreground role: --surface-accent-fg is tuned for the
-     band's own, darker/mid tint and is not guaranteed to clear AA on this
-     lighter one. */
-  .ui-band :global(.ui-card),
-  .ui-band :global(.ui-card--raised) {
-    background: var(--surface-accent-subtle);
-    border-color: var(--border-strong);
-  }
-  .ui-band :global(.ui-card__eyebrow),
-  .ui-band :global(.ui-card__title),
-  .ui-band :global(.ui-card__body) {
-    color: var(--surface-accent-subtle-fg);
-  }
+    /* Every text role inside the band moves to the accent foreground. Sage is a */
+    /* mid tone: --text clears it, but --text-muted and --link do not. */
+    .ui-band :global(p),
+    .ui-band :global(span),
+    .ui-band :global(a),
+    .ui-band :global(td),
+    .ui-band :global(th),
+    .ui-band :global(strong),
+    .ui-band :global(b),
+    .ui-band :global(label),
+    .ui-band :global(.ui-eyebrow),
+    .ui-band :global(.ui-card__eyebrow),
+    .ui-band :global(.ui-card__body) {
+      color: var(--surface-accent-fg);
+    }
 
-  /* Buttons keep their own label colours: they carry their own fill, so the
-     band's foreground flip must not reach inside them. */
-  .ui-band :global(.ui-btn--primary),
-  .ui-band :global(.ui-btn--primary span) {
-    color: var(--primary-fg);
-  }
+    /* Secondary copy gets the band's own muted role, which clears 4.5 on sage. */
+    /* --text-muted only reaches 3.6 here. */
+    .ui-band :global(small),
+    .ui-band :global(.ui-band__note) {
+      color: var(--surface-accent-muted);
+    }
 
-  .ui-band :global(.ui-btn--accent),
-  .ui-band :global(.ui-btn--accent span) {
-    color: var(--accent-fg);
-  }
+    /* A card on the band moves to a lighter tint of the band's own surface, */
+    /* rather than to plain paper, so it still reads as part of the band. It */
+    /* carries its own foreground role: --surface-accent-fg is tuned for the */
+    /* band's own, darker/mid tint and is not guaranteed to clear AA on this */
+    /* lighter one. */
+    .ui-band :global(.ui-card),
+    .ui-band :global(.ui-card--raised) {
+      background: var(--surface-accent-subtle);
+      border-color: var(--border-strong);
+    }
+    .ui-band :global(.ui-card__eyebrow),
+    .ui-band :global(.ui-card__title),
+    .ui-band :global(.ui-card__body) {
+      color: var(--surface-accent-subtle-fg);
+    }
+
+    /* A product card keeps its own paper surface, so its text keeps the plain */
+    /* roles. The span flip above would otherwise reach its title, meta and */
+    /* price. Sold-out and old-price styles in ProductCard still outrank these. */
+    .ui-band :global(.ui-product__title),
+    .ui-band :global(.ui-product__price) {
+      color: var(--text);
+    }
+    .ui-band :global(.ui-product__meta) {
+      color: var(--text-muted);
+    }
+
+    /* The new and favourite ribbons are sage by default and vanish on the */
+    /* band. The extra .ui-product outranks ProductCard's own ribbon rules. */
+    .ui-band :global(.ui-product .ui-ribbon--new i) {
+      background: var(--text);
+      color: var(--text-inverse);
+    }
+    .ui-band :global(.ui-product .ui-ribbon--fav i) {
+      background: var(--surface);
+      color: var(--text);
+    }
+
+    /* Buttons keep their own label colours: they carry their own fill, so the */
+    /* band's foreground flip must not reach inside them. */
+    .ui-band :global(.ui-btn--primary),
+    .ui-band :global(.ui-btn--primary span) {
+      color: var(--primary-fg);
+    }
+
+    .ui-band :global(.ui-btn--accent),
+    .ui-band :global(.ui-btn--accent span) {
+      color: var(--accent-fg);
+    }
 
-  .ui-band :global(.ui-btn--secondary),
-  .ui-band :global(.ui-btn--secondary span) {
-    color: var(--surface-accent-fg);
-    border-color: var(--border-strong);
+    .ui-band :global(.ui-btn--secondary),
+    .ui-band :global(.ui-btn--secondary span) {
+      color: var(--surface-accent-fg);
+      border-color: var(--border-strong);
+    }
   }
 </style>

package/src/astro/Breadcrumb.astro

@@ -20,7 +20,11 @@ const { items, label = "Kruimelpad", class: className, ...rest } = Astro.props;
 const lastIndex = items.length - 1;
 ---
 
-<nav class={["ui-crumbs", className].filter(Boolean).join(" ")} aria-label={label} {...rest}>
+<nav
+  class={["ui-crumbs", className].filter(Boolean).join(" ")}
+  aria-label={label}
+  {...rest}
+>
   {items.map((item, i) => (
     <>
       {item.href && i !== lastIndex ? (
@@ -38,37 +42,41 @@ const lastIndex = items.length - 1;
 </nav>
 
 <style>
-  .ui-crumbs {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--space-1);
-    font-size: var(--text-xs);
-    line-height: var(--leading-xs);
-    color: var(--text-muted);
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  .ui-crumbs a {
-    color: var(--link);
-    text-decoration: none;
-  }
-  .ui-crumbs a:hover {
-    color: var(--link-hover);
-    text-decoration: underline;
-  }
-  .ui-crumbs a:focus-visible {
-    outline: 2px solid var(--focus);
-    outline-offset: 2px;
-    border-radius: var(--radius-sm);
-  }
+  @layer components {
+    .ui-crumbs {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--space-1);
+      font-size: var(--text-xs);
+      line-height: var(--leading-xs);
+      color: var(--text-muted);
+    }
 
-  .ui-crumbs [aria-current="page"] {
-    color: var(--text);
-    font-weight: var(--weight-medium);
-  }
+    .ui-crumbs a {
+      color: var(--link);
+      text-decoration: none;
+    }
+    .ui-crumbs a:hover {
+      color: var(--link-hover);
+      text-decoration: underline;
+    }
+    .ui-crumbs a:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+      border-radius: var(--radius-sm);
+    }
+
+    .ui-crumbs [aria-current="page"] {
+      color: var(--text);
+      font-weight: var(--weight-medium);
+    }
 
-  .ui-crumbs__sep {
-    display: inline-flex;
-    color: var(--border-strong);
+    .ui-crumbs__sep {
+      display: inline-flex;
+      color: var(--border-strong);
+    }
   }
 </style>

package/src/astro/Button.astro

@@ -59,7 +59,9 @@ const tagProps = href
   {...tagProps}
   {...rest}
 >
-  <span class="ui-btn__label"><slot /></span>
+  <span class="ui-btn__label">
+    <slot />
+  </span>
   {icon && (
     <span class="ui-btn__icon" aria-hidden="true">
       <Icon name={icon as any} size="1em" stroke={1.8} />
@@ -69,149 +71,153 @@ const tagProps = href
 </Tag>
 
 <style>
-  .ui-btn {
-    --_pad-x: var(--space-5);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-2);
-    position: relative;
-    min-height: 40px;
-    padding: var(--space-2) var(--_pad-x);
-    border: 1px solid transparent;
-    border-radius: var(--radius-md);
-    font-family: var(--font-sans);
-    font-size: var(--text-sm);
-    font-weight: var(--weight-semibold);
-    line-height: 1;
-    text-decoration: none;
-    cursor: pointer;
-    transition:
-      background-color var(--duration-fast) var(--ease-standard),
-      border-color var(--duration-fast) var(--ease-standard),
-      transform var(--duration-fast) var(--ease-standard);
-  }
+  @layer reset, tokens, base, components, motion, utilities;
 
-  /* Sizes: 32 / 40 / 48 px. */
-  .ui-btn--sm {
-    min-height: 32px;
-    --_pad-x: var(--space-4);
-    font-size: var(--text-xs);
-  }
-  .ui-btn--md {
-    min-height: 40px;
-  }
-  .ui-btn--lg {
-    min-height: 48px;
-    --_pad-x: var(--space-6);
-    font-size: var(--text-base);
-  }
+  @layer components {
+    .ui-btn {
+      --_pad-x: var(--space-5);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--space-2);
+      position: relative;
+      min-height: 40px;
+      padding: var(--space-2) var(--_pad-x);
+      border: 1px solid transparent;
+      border-radius: var(--radius-md);
+      font-family: var(--font-sans);
+      font-size: var(--text-sm);
+      font-weight: var(--weight-semibold);
+      line-height: 1;
+      text-decoration: none;
+      cursor: pointer;
+      transition:
+        background-color var(--duration-fast) var(--ease-standard),
+        border-color var(--duration-fast) var(--ease-standard),
+        transform var(--duration-fast) var(--ease-standard);
+    }
 
-  .ui-btn--block {
-    display: flex;
-    width: 100%;
-  }
+    /* Sizes: 32 / 40 / 48 px. */
+    .ui-btn--sm {
+      min-height: 32px;
+      --_pad-x: var(--space-4);
+      font-size: var(--text-xs);
+    }
+    .ui-btn--md {
+      min-height: 40px;
+    }
+    .ui-btn--lg {
+      min-height: 48px;
+      --_pad-x: var(--space-6);
+      font-size: var(--text-base);
+    }
 
-  /* Primary. */
-  .ui-btn--primary {
-    background: var(--primary);
-    color: var(--primary-fg);
-  }
-  .ui-btn--primary:hover,
-  .ui-btn--primary.is-hover {
-    background: var(--primary-hover);
-  }
+    .ui-btn--block {
+      display: flex;
+      width: 100%;
+    }
 
-  /* Secondary. */
-  .ui-btn--secondary {
-    background: transparent;
-    border-color: var(--border-strong);
-    color: var(--text);
-  }
-  .ui-btn--secondary:hover,
-  .ui-btn--secondary.is-hover {
-    background: var(--surface-hover);
-  }
+    /* Primary. */
+    .ui-btn--primary {
+      background: var(--primary);
+      color: var(--primary-fg);
+    }
+    .ui-btn--primary:hover,
+    .ui-btn--primary.is-hover {
+      background: var(--primary-hover);
+    }
 
-  /* Accent. One call to action per page. */
-  .ui-btn--accent {
-    background: var(--accent);
-    color: var(--accent-fg);
-  }
-  .ui-btn--accent:hover,
-  .ui-btn--accent.is-hover {
-    background: var(--accent-hover);
-  }
+    /* Secondary. */
+    .ui-btn--secondary {
+      background: transparent;
+      border-color: var(--border-strong);
+      color: var(--text);
+    }
+    .ui-btn--secondary:hover,
+    .ui-btn--secondary.is-hover {
+      background: var(--surface-hover);
+    }
 
-  /* Ghost. Low-weight actions. */
-  .ui-btn--ghost {
-    background: transparent;
-    color: var(--link);
-    padding-inline: var(--space-3);
-  }
-  .ui-btn--ghost:hover,
-  .ui-btn--ghost.is-hover {
-    background: var(--surface-hover);
-    color: var(--link-hover);
-  }
+    /* Accent. One call to action per page. */
+    .ui-btn--accent {
+      background: var(--accent);
+      color: var(--accent-fg);
+    }
+    .ui-btn--accent:hover,
+    .ui-btn--accent.is-hover {
+      background: var(--accent-hover);
+    }
 
-  /* Focus: 2 px ring plus 4 px halo. */
-  .ui-btn:focus-visible,
-  .ui-btn.is-focus {
-    outline: 2px solid var(--focus);
-    outline-offset: 2px;
-    box-shadow: 0 0 0 4px var(--focus-outer);
-  }
+    /* Ghost. Low-weight actions. */
+    .ui-btn--ghost {
+      background: transparent;
+      color: var(--link);
+      padding-inline: var(--space-3);
+    }
+    .ui-btn--ghost:hover,
+    .ui-btn--ghost.is-hover {
+      background: var(--surface-hover);
+      color: var(--link-hover);
+    }
 
-  /* Pressed: 1 px downward shift. */
-  .ui-btn:active,
-  .ui-btn.is-active {
-    transform: translateY(1px);
-  }
+    /* Focus: 2 px ring plus 4 px halo. */
+    .ui-btn:focus-visible,
+    .ui-btn.is-focus {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+      box-shadow: 0 0 0 4px var(--focus-outer);
+    }
 
-  /* Disabled. */
-  .ui-btn:disabled,
-  .ui-btn[aria-disabled="true"] {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
+    /* Pressed: 1 px downward shift. */
+    .ui-btn:active,
+    .ui-btn.is-active {
+      transform: translateY(1px);
+    }
 
-  /* Loading: label hidden, spinner shown. */
-  .ui-btn.is-loading {
-    cursor: progress;
-  }
-  .ui-btn.is-loading .ui-btn__label,
-  .ui-btn.is-loading .ui-btn__icon {
-    visibility: hidden;
-  }
-  .ui-btn__spinner {
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    border: 2px solid currentColor;
-    border-top-color: transparent;
-    border-radius: var(--radius-full);
-    animation: ui-btn-spin var(--duration-slower) linear infinite;
-  }
+    /* Disabled. */
+    .ui-btn:disabled,
+    .ui-btn[aria-disabled="true"] {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
 
-  .ui-btn__icon {
-    display: inline-flex;
-    font-size: 1em;
-  }
+    /* Loading: label hidden, spinner shown. */
+    .ui-btn.is-loading {
+      cursor: progress;
+    }
+    .ui-btn.is-loading .ui-btn__label,
+    .ui-btn.is-loading .ui-btn__icon {
+      visibility: hidden;
+    }
+    .ui-btn__spinner {
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: var(--radius-full);
+      animation: ui-btn-spin var(--duration-slower) linear infinite;
+    }
 
-  @keyframes ui-btn-spin {
-    to {
-      transform: rotate(360deg);
+    .ui-btn__icon {
+      display: inline-flex;
+      font-size: 1em;
     }
-  }
 
-  @media (prefers-reduced-motion: reduce) {
-    .ui-btn {
-      transition: none;
+    @keyframes ui-btn-spin {
+      to {
+        transform: rotate(360deg);
+      }
     }
-    .ui-btn__spinner {
-      animation-duration: 1200ms;
+
+    @media (prefers-reduced-motion: reduce) {
+      .ui-btn {
+        transition: none;
+      }
+      .ui-btn__spinner {
+        animation-duration: 1200ms;
+      }
     }
   }
 </style>