@kwtv/components 0.1.0

package/src/astro/DotGrid.astro

@@ -0,0 +1,62 @@
+---
+/** Decorative drifting dot field used behind short hero copy. */
+interface Props {
+  compact?: boolean;
+  class?: string;
+}
+
+const { compact = false, class: className, ...rest } = Astro.props;
+const classes = ["pl-dotgrid", compact && "pl-dotgrid--compact", className]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<div class={classes} {...rest}>
+  <span class="pl-dotgrid__dots" aria-hidden="true"></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);
+  }
+
+  .pl-dotgrid__dots {
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(var(--sage-light) 1.4px, transparent 1.6px);
+    background-size: 28px 28px;
+    opacity: 0.7;
+    animation: pl-drift 6s linear infinite;
+  }
+
+  .pl-dotgrid__content {
+    position: relative;
+    display: block;
+    padding: var(--space-5);
+    font-size: var(--text-lg);
+    font-weight: var(--weight-semibold);
+  }
+
+  .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;
+    }
+  }
+</style>

package/src/astro/EmptyState.astro

@@ -0,0 +1,53 @@
+---
+/**
+ * Empty state. Says what is missing and offers the one action that fixes it.
+ * Never a shrug: an empty cart links back to the category page, an empty filter
+ * result offers to clear filters.
+ */
+interface Props {
+  title: string;
+  class?: string;
+}
+
+const { title, class: className, ...rest } = Astro.props;
+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>
+  {hasAction && (
+    <div class="ui-empty__action">
+      <slot name="action" />
+    </div>
+  )}
+</div>
+
+<style>
+  .ui-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2);
+    padding: var(--space-10) var(--space-6);
+    border: 1px dashed var(--border-strong);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+  }
+
+  .ui-empty__title {
+    font-size: var(--text-lg);
+    font-weight: var(--weight-semibold);
+    color: var(--text);
+  }
+
+  .ui-empty__body {
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    color: var(--text-muted);
+  }
+
+  .ui-empty__action {
+    margin-top: var(--space-2);
+  }
+</style>

package/src/astro/FilterGroup.astro

@@ -0,0 +1,58 @@
+---
+/**
+ * One filter group. A fieldset so the group name is announced before the
+ * options, with the name in the legend. Drop Checkbox components into the slot.
+ *
+ * The rule sits above the heading with more space above it than below, so the
+ * rule reads as the top edge of the group rather than a divider hung under the
+ * previous one.
+ */
+interface Props {
+  title: string;
+  class?: string;
+}
+
+const { title, class: className, ...rest } = Astro.props;
+
+const classes = ["ui-filtergroup", className].filter(Boolean).join(" ");
+---
+
+<fieldset class={classes} {...rest}>
+  <legend class="ui-filtergroup__title">{title}</legend>
+  <div class="ui-filtergroup__options">
+    <slot />
+  </div>
+</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);
+  }
+
+  .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);
+  }
+</style>

package/src/astro/Filters.astro

@@ -0,0 +1,84 @@
+---
+/**
+ * Filter sidebar. A 232 px aside on desktop. A bar across the top carries the
+ * "Filters" eyebrow and a clear action, then the filter groups follow in the
+ * default slot (use FilterGroup with Checkbox inside).
+ *
+ * On mobile the same groups move into a bottom sheet: render the React Modal
+ * with variant="sheet" and place the FilterGroups inside it. The result count
+ * should be announced in a polite live region by the consumer when filters
+ * change.
+ */
+interface Props {
+  /** Text for the clear-all action. Omit to hide it. */
+  clearLabel?: string;
+  class?: string;
+}
+
+const { clearLabel = "Wissen", class: className, ...rest } = Astro.props;
+
+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>}
+  </div>
+  <slot />
+</aside>
+
+<style>
+  .ui-filters {
+    width: 232px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .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);
+  }
+
+  .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);
+  }
+
+  /* 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

@@ -0,0 +1,237 @@
+---
+/**
+ * One dark footer panel for both sites. A <footer> landmark. Brand, address
+ * and socials on the left, link columns, then the newsletter. The bottom bar
+ * carries the legal line and the policy links.
+ *
+ * Slots:
+ *  - `brand-suffix` sits after the brand name (the shop wordmark).
+ *  - `address` is the address block.
+ *  - `social` holds the Social links.
+ *  - default slot holds the FooterColumn columns and the Newsletter.
+ *  - `legal` is the legal line, `policies` the policy links, both in the bar.
+ *
+ * Three columns on desktop (1.5 / 1 / 1.3), stacked on mobile.
+ */
+interface Props {
+  brandName?: string;
+  variant?: "site" | "shop";
+  class?: string;
+}
+
+const {
+  brandName = "Clubnaam",
+  variant = "site",
+  class: className,
+  ...rest
+} = Astro.props;
+
+const classes = ["ui-footer", `ui-footer--${variant}`, className]
+  .filter(Boolean)
+  .join(" ");
+---
+
+<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>
+
+  <slot />
+
+  <div class="ui-footer__bar">
+    <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(--sage-xdark);
+    color: var(--ivory-light);
+  }
+
+  .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(--sage-light);
+  }
+
+  .ui-footer__addr {
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    color: var(--ivory-light);
+  }
+  .ui-footer__addr :global(a) {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .ui-footer__social {
+    display: flex;
+    gap: var(--space-1);
+    margin-top: var(--space-1);
+  }
+
+  /* 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(--sage-text);
+    font-size: var(--text-xs);
+    color: var(--sage-light);
+  }
+
+  .ui-footer__policies {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-4);
+  }
+  .ui-footer__bar :global(a) {
+    color: var(--ivory-light);
+    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);
+  }
+
+  /* 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);
+  }
+
+  /* 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(--sage-light);
+  }
+  .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(--sage-text);
+    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>

package/src/astro/FooterColumn.astro

@@ -0,0 +1,64 @@
+---
+/**
+ * A footer link column. The title is a mono heading so a reader can skip
+ * straight to it. Put the <a> links in the default slot.
+ */
+interface Props {
+  title: string;
+  class?: string;
+}
+
+const { title, class: className, ...rest } = Astro.props;
+
+const classes = ["ui-footer__col", className].filter(Boolean).join(" ");
+---
+
+<div class={classes} {...rest}>
+  <span class="ui-footer__title">{title}</span>
+  <slot />
+</div>
+
+<style>
+  .ui-footer__col {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2-5, var(--space-2));
+  }
+
+  .ui-footer__title {
+    font-family: var(--font-mono);
+    font-size: var(--text-2xs);
+    font-weight: var(--weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-widest);
+    color: var(--sage-light);
+    margin-bottom: var(--space-1);
+  }
+
+  .ui-footer__col :global(a),
+  .ui-footer__col :global(.ui-footer__note) {
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    color: var(--ivory-light);
+  }
+
+  .ui-footer__col :global(a) {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color var(--duration-fast) var(--ease-standard);
+  }
+  .ui-footer__col :global(a:hover) {
+    color: var(--ivory-xlight);
+  }
+  .ui-footer__col :global(a:focus-visible) {
+    outline: 2px solid var(--ivory-xlight);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-footer__col :global(a) {
+      transition: none;
+    }
+  }
+</style>

package/src/astro/Header.astro

@@ -0,0 +1,116 @@
+---
+/**
+ * One header for both sites: brand left, navigation right. Put NavLink,
+ * NavDropdown and any action button in the default slot; they sit in the nav.
+ *
+ * The `logo` slot carries the brand mark (a logo img or placeholder). Below
+ * 900 px the nav collapses: put the mobile controls (the menu and cart
+ * IconButtons) in the `mobile` slot, and open the Drawer (React) from there.
+ */
+interface Props {
+  brandName?: string;
+  brandHref?: string;
+  class?: string;
+}
+
+const { brandName = "KWTV", brandHref = "/", class: className, ...rest } =
+  Astro.props;
+
+const classes = ["ui-header", className].filter(Boolean).join(" ");
+---
+
+<header class={classes} {...rest}>
+  <a class="ui-brand" href={brandHref}>
+    <span class="ui-brand__mark"><slot name="logo" /></span>
+    <span class="ui-brand__name">{brandName}<slot name="brand-suffix" /></span>
+  </a>
+
+  <nav class="ui-nav">
+    <slot />
+  </nav>
+
+  <div class="ui-header__mobile">
+    <slot name="mobile" />
+  </div>
+</header>
+
+<style>
+  .ui-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-6);
+    min-height: 73px;
+    padding: var(--space-5) var(--space-10);
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .ui-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2-5, var(--space-2));
+    text-decoration: none;
+    color: var(--text);
+  }
+  .ui-brand:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
+  .ui-brand__mark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ui-brand__name {
+    font-family: var(--font-sans);
+    font-size: var(--text-lg);
+    font-weight: var(--weight-bold);
+    letter-spacing: var(--tracking-tight);
+  }
+  /* The shop wordmark: a lighter "shop" after the name. */
+  .ui-brand__name :global(span) {
+    font-weight: var(--weight-regular);
+    color: var(--text-muted);
+  }
+
+  .ui-nav {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
+  }
+
+  .ui-header__mobile {
+    display: none;
+    gap: var(--space-2);
+  }
+
+  /* Pin the compact state in component explorers and other constrained shells. */
+  .ui-header--mobile {
+    padding-inline: var(--space-4);
+  }
+  .ui-header--mobile .ui-nav {
+    display: none;
+  }
+  .ui-header--mobile .ui-header__mobile {
+    display: flex;
+  }
+
+  /* Below 900 px the links collapse. The consumer fills the mobile slot with
+     the menu and cart buttons and opens the Drawer from there. */
+  @media (max-width: 900px) {
+    .ui-header,
+    .ui-header--mobile {
+      padding-inline: var(--space-4);
+    }
+    .ui-header:not(.ui-header--mobile) .ui-nav {
+      display: none;
+    }
+    .ui-header:not(.ui-header--mobile) .ui-header__mobile {
+      display: flex;
+    }
+  }
+</style>