astro-component-kit 0.4.0 → 0.4.1

package/src/components/lib/sections/TestimonialCarousel.astro

@@ -37,6 +37,7 @@ const initials = (n: string) => n.split(' ').map((p) => p[0]).slice(0, 2).join('
 const hues = ['var(--chart-1, #3987e5)', 'var(--chart-2, #d95926)', 'var(--chart-3, #199e70)', 'var(--chart-5, #d55181)', 'var(--chart-7, #9085e9)'];
 ---
 
+<div class="cq-testimonial-carousel-cq">
 <section class={`tc tc--${variant} tc--${size} ${className}`} aria-labelledby={id} aria-roledescription="carousel" data-tc>
   <div class="tc__inner">
     <header class="tc__head">
@@ -73,7 +74,7 @@ const hues = ['var(--chart-1, #3987e5)', 'var(--chart-2, #d95926)', 'var(--chart
     </ul>
   </div>
 </section>
-
+</div>
 <script>
   document.querySelectorAll<HTMLElement>('[data-tc]').forEach((root) => {
     const track = root.querySelector<HTMLElement>('.tc__track');
@@ -96,6 +97,7 @@ const hues = ['var(--chart-1, #3987e5)', 'var(--chart-2, #d95926)', 'var(--chart
 </script>
 
 <style>
+  .cq-testimonial-carousel-cq { container-type: inline-size; }
   .tc {
     --tc-py: 5.5rem;
     padding: var(--tc-py) var(--sp-6, 1.5rem);
@@ -114,13 +116,13 @@ const hues = ['var(--chart-1, #3987e5)', 'var(--chart-2, #d95926)', 'var(--chart
     width: 48px;
     height: 48px;
     border-radius: 50%;
-    border: 1px solid rgba(255, 255, 255, 0.14);
-    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.14);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.03);
     color: var(--c-text-1, #fff);
     cursor: pointer;
     transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
   }
-  .tc__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); }
+  .tc__btn:hover:not(:disabled) { background: rgb(var(--ink-rgb, 255 255 255) / 0.08); border-color: rgb(var(--ink-rgb, 255 255 255) / 0.3); }
   .tc__btn:disabled { opacity: 0.35; cursor: not-allowed; }
   .tc__btn:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
   .tc__track {
@@ -148,10 +150,10 @@ const hues = ['var(--chart-1, #3987e5)', 'var(--chart-2, #d95926)', 'var(--chart
     border-radius: var(--r-lg, 20px);
     box-sizing: border-box;
   }
-  .tc--glass .tc__card { background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07)); }
-  .tc--solid .tc__card { background: var(--c-bg-2, #111); border: 1px solid rgba(255, 255, 255, 0.05); }
+  .tc--glass .tc__card { background: linear-gradient(160deg, rgb(var(--ink-rgb, 255 255 255) / 0.05), rgb(var(--ink-rgb, 255 255 255) / 0.015)); border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07)); }
+  .tc--solid .tc__card { background: var(--c-bg-2, #111); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.05); }
   .tc--quote .tc__card { border-left: 2px solid var(--c-primary-light, #d4a017); border-radius: 0; padding-left: 1.5rem; }
-  .tc__stars { display: flex; gap: 2px; color: rgba(255, 255, 255, 0.15); }
+  .tc__stars { display: flex; gap: 2px; color: rgb(var(--ink-rgb, 255 255 255) / 0.15); }
   .tc__stars .is-on { color: var(--c-primary-light, #d4a017); }
   .tc__quote { margin: 0; flex: 1; }
   .tc__quote p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--c-text-1, #fff); }
@@ -159,7 +161,7 @@ const hues = ['var(--chart-1, #3987e5)', 'var(--chart-2, #d95926)', 'var(--chart
   .tc__author strong { display: block; color: var(--c-text-1, #fff); font-weight: 650; }
   .tc__role { display: block; color: var(--c-text-2, #a3a3a3); font-size: 0.8125rem; }
   .tc__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 0.8125rem; flex-shrink: 0; }
-  @media (max-width: 560px) {
+  @container (max-width: 560px) {
     .tc__head { flex-direction: column; align-items: flex-start; }
   }
 </style>

package/src/components/lib/sections/TestimonialFeatured.astro

@@ -44,6 +44,7 @@ const {
 const initials = name.split(' ').map((p) => p[0]).slice(0, 2).join('');
 ---
 
+<div class="cq-testimonial-featured-cq">
 <section class={`tf tf--${variant} tf--${size} ${className}`} aria-label={`Customer story: ${company}`}>
   <div class="tf__inner">
     <figure class="tf__figure">
@@ -77,8 +78,9 @@ const initials = name.split(' ').map((p) => p[0]).slice(0, 2).join('');
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-testimonial-featured-cq { container-type: inline-size; }
   .tf {
     --tf-py: 5.5rem;
     padding: var(--tf-py) var(--sp-6, 1.5rem);
@@ -90,8 +92,8 @@ const initials = name.split(' ').map((p) => p[0]).slice(0, 2).join('');
   .tf--card .tf__inner {
     padding: clamp(2rem, 5vw, 3.5rem);
     border-radius: var(--r-xl, 28px);
-    background: radial-gradient(circle at 0% 0%, var(--c-primary-glow, rgba(184, 134, 11, 0.14)), transparent 55%), rgba(255, 255, 255, 0.025);
-    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
+    background: radial-gradient(circle at 0% 0%, var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 14%, transparent)), transparent 55%), rgb(var(--ink-rgb, 255 255 255) / 0.025);
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.08));
   }
   .tf--centered .tf__inner { grid-template-columns: 1fr; text-align: center; max-width: 860px; }
   .tf--centered .tf__author, .tf--centered .tf__company { justify-content: center; }
@@ -106,7 +108,7 @@ const initials = name.split(' ').map((p) => p[0]).slice(0, 2).join('');
   .tf__role { display: block; font-size: 0.875rem; color: var(--c-text-2, #a3a3a3); }
   .tf__avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--chart-7, #9085e9), var(--chart-1, #3987e5)); color: #fff; font-weight: 700; }
   .tf__side { display: grid; gap: 1.5rem; }
-  .tf__metrics { margin: 0; display: grid; gap: 1px; border-radius: var(--r-lg, 20px); overflow: hidden; background: rgba(255, 255, 255, 0.07); }
+  .tf__metrics { margin: 0; display: grid; gap: 1px; border-radius: var(--r-lg, 20px); overflow: hidden; background: rgb(var(--ink-rgb, 255 255 255) / 0.07); }
   .tf--centered .tf__metrics { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
   .tf__metric { display: flex; flex-direction: column-reverse; gap: 0.25rem; padding: 1.25rem 1.5rem; background: var(--c-bg-1, #0a0a0a); }
   .tf__metric dt { font-size: 0.875rem; color: var(--c-text-2, #a3a3a3); }
@@ -116,5 +118,5 @@ const initials = name.split(' ').map((p) => p[0]).slice(0, 2).join('');
   .tf__link svg { transition: transform 0.2s ease; }
   .tf__link:hover svg { transform: translateX(3px); }
   .tf__link:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; border-radius: 4px; }
-  @media (max-width: 820px) { .tf__inner { grid-template-columns: 1fr; } }
+  @container (max-width: 820px) { .tf__inner { grid-template-columns: 1fr; } }
 </style>

package/src/components/lib/sections/TestimonialGridSection.astro

@@ -95,7 +95,7 @@ const testimonials = [
     letter-spacing: 0.12em;
     color: var(--c-primary-light, #d4a017);
     padding: 0.35rem 0.8rem;
-    border: 1px solid rgba(184, 134, 11, 0.3);
+    border: 1px solid color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
     border-radius: var(--r-sm, 8px);
     margin-bottom: 1rem;
     text-transform: uppercase;
@@ -126,21 +126,21 @@ const testimonials = [
     display: flex;
     flex-direction: column;
     padding: var(--sp-8, 2rem);
-    background: rgba(255, 255, 255, 0.02);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
     backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl, 24px);
     transition: transform 0.3s ease, border-color 0.3s ease;
   }
 
   .testi-card:hover {
     transform: translateY(-4px);
-    border-color: rgba(184, 134, 11, 0.3);
+    border-color: color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
   }
 
   .testi-card--highlight {
-    background: radial-gradient(circle at top left, rgba(184, 134, 11, 0.1), rgba(255, 255, 255, 0.02) 70%);
-    border-color: rgba(184, 134, 11, 0.4);
+    background: radial-gradient(circle at top left, color-mix(in srgb, var(--c-primary, #b8860b) 10%, transparent), rgb(var(--ink-rgb, 255 255 255) / 0.02) 70%);
+    border-color: color-mix(in srgb, var(--c-primary, #b8860b) 40%, transparent);
   }
 
   .testi-card__stars {
@@ -171,7 +171,7 @@ const testimonials = [
     height: 44px;
     border-radius: 50%;
     object-fit: cover;
-    border: 2px solid rgba(184, 134, 11, 0.4);
+    border: 2px solid color-mix(in srgb, var(--c-primary, #b8860b) 40%, transparent);
   }
 
   .testi-card__name {

package/src/components/lib/sections/TestimonialWallGlass.astro

@@ -21,6 +21,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-testimonial-wall-glass-cq">
 <section class={`testimonials-section ${className}`} aria-labelledby="testimonials-title">
   <div class="testimonials-bg" aria-hidden="true">
     <div class="test-glow test-glow--1"></div>
@@ -151,8 +152,9 @@ const {
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-testimonial-wall-glass-cq { container-type: inline-size; }
   .testimonials-section {
     position: relative;
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
@@ -211,7 +213,7 @@ const {
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    background: rgba(184, 134, 11, 0.12);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
     color: #eab308;
     border: 1px solid rgba(234, 179, 8, 0.25);
     margin-bottom: var(--sp-4, 1rem);
@@ -241,7 +243,7 @@ const {
     gap: 2rem;
     padding: 1.25rem 2rem;
     background: rgba(15, 23, 42, 0.7);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: 16px;
     backdrop-filter: blur(12px);
     max-width: 750px;
@@ -284,7 +286,7 @@ const {
   .trust-sep {
     width: 1px;
     height: 40px;
-    background: rgba(255, 255, 255, 0.1);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
   }
 
   /* Wall Grid */
@@ -299,7 +301,7 @@ const {
     background: rgba(15, 23, 42, 0.55);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl, 18px);
     padding: 1.75rem;
     display: flex;
@@ -310,7 +312,7 @@ const {
 
   .test-card:hover {
     transform: translateY(-4px);
-    border-color: rgba(255, 255, 255, 0.2);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.2);
   }
 
   .test-card--featured {
@@ -352,7 +354,7 @@ const {
     align-items: center;
     gap: 0.85rem;
     padding-top: 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
   }
 
   .author-avatar {
@@ -364,7 +366,7 @@ const {
     font-weight: 800;
     font-size: 0.85rem;
     color: #fff;
-    border: 2px solid rgba(255, 255, 255, 0.15);
+    border: 2px solid rgb(var(--ink-rgb, 255 255 255) / 0.15);
   }
 
   .author-avatar--1 { background: linear-gradient(135deg, #6366f1, #a855f7); }
@@ -390,7 +392,7 @@ const {
     color: #64748b;
   }
 
-  @media (max-width: 960px) {
+  @container (max-width: 960px) {
     .trust-bar {
       flex-direction: column;
       gap: 1rem;

package/src/components/lib/sections/TypographyShowcase.astro

@@ -8,6 +8,7 @@ interface Props {
 const { title = "Typography", subtitle = "Headings and text patterns." } = Astro.props;
 ---
 
+<div class="cq-typography-showcase-cq">
 <section class="typography-showcase">
   <div class="container">
     <div class="showcase-header">
@@ -54,8 +55,9 @@ const { title = "Typography", subtitle = "Headings and text patterns." } = Astro
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-typography-showcase-cq { container-type: inline-size; }
   .typography-showcase {
     padding: var(--sp-16) 0;
     position: relative;
@@ -72,8 +74,8 @@ const { title = "Typography", subtitle = "Headings and text patterns." } = Astro
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--c-primary-light);
-    background: rgba(184,134,11,0.1);
-    border: 1px solid rgba(184,134,11,0.25);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
     border-radius: var(--r-full);
     margin-bottom: var(--sp-4);
   }
@@ -95,7 +97,7 @@ const { title = "Typography", subtitle = "Headings and text patterns." } = Astro
     padding: var(--sp-12);
     background: rgba(10, 10, 10, 0.6);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl);
     margin-bottom: var(--sp-6);
     box-shadow: 0 20px 60px rgba(0,0,0,0.4);
@@ -117,9 +119,9 @@ const { title = "Typography", subtitle = "Headings and text patterns." } = Astro
   /* Typography Mockups */
   .typo-mockup {
     padding: var(--sp-6);
-    background: rgba(255,255,255,0.02);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
     border-radius: var(--r-md);
-    border: 1px solid rgba(255,255,255,0.05);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.05);
   }
 
   /* Gradient Heading */
@@ -221,7 +223,7 @@ const { title = "Typography", subtitle = "Headings and text patterns." } = Astro
   .usage-code {
     text-align: center;
     padding: var(--sp-4);
-    background: rgba(255,255,255,0.02);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
     border-radius: var(--r-md);
   }
   .usage-code code {
@@ -230,7 +232,7 @@ const { title = "Typography", subtitle = "Headings and text patterns." } = Astro
     color: var(--c-primary-light);
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .typo-stack { gap: var(--sp-5); }
     .typo-mockup { padding: var(--sp-4); }
     .preview-stage { padding: var(--sp-8) var(--sp-4); }

package/src/components/lib/sections/index.ts

@@ -55,3 +55,13 @@ export { default as LogoWallGrid } from './LogoWallGrid.astro';
 export { default as BlogGridSection } from './BlogGridSection.astro';
 export { default as ChangelogSection } from './ChangelogSection.astro';
 export { default as FooterMegaSection } from './FooterMegaSection.astro';
+export { default as ShopHeaderEditorial } from './ShopHeaderEditorial.astro';
+export { default as ShopHeroEditorial } from './ShopHeroEditorial.astro';
+export { default as ShopCollectionMosaic } from './ShopCollectionMosaic.astro';
+export { default as ShopProductRail } from './ShopProductRail.astro';
+export { default as ShopLookbook } from './ShopLookbook.astro';
+export { default as ShopValuesMarquee } from './ShopValuesMarquee.astro';
+export { default as ShopReviewsEditorial } from './ShopReviewsEditorial.astro';
+export { default as ShopNewsletterEditorial } from './ShopNewsletterEditorial.astro';
+export { default as ShopFooterWordmark } from './ShopFooterWordmark.astro';
+export { default as ShopCategoryHero } from './ShopCategoryHero.astro';

package/src/components/lib/templates/ecommerce/StoreCategoryPage.astro

@@ -0,0 +1,160 @@
+---
+/**
+ * StoreCategoryPage — E-commerce template catalogue: breadcrumb, category chips, toolbar
+ * with live count + sort, FilterSidebar and ProductGrid (instant client-side filtering).
+ *
+ * Usage (src/pages/shop.astro):
+ *   import { StoreCategoryPage } from 'astro-component-kit/templates/ecommerce';
+ *   <StoreCategoryPage />
+ * Category links use `?category=<id>`; pass `category` to build one static page per category.
+ *
+ * @param {StoreConfig} store - Catalogue and settings. Default: demo store.
+ * @param {StoreRoutes} routes - Page URLs.
+ * @param {string} category - Pre-selected category id (optional).
+ * @param {boolean} seedCart - Pre-fill the cart with demo items. Default false.
+ * @param {string} theme - Initial theme (dark|light|auto). Default 'dark'.
+ * @param {boolean} noindex - Add robots noindex. Default false.
+ */
+import StoreLayout from './StoreLayout.astro';
+import ProductToolbar from '../../ecommerce/ProductToolbar.astro';
+import FilterSidebar from '../../ecommerce/FilterSidebar.astro';
+import ProductGrid from '../../ecommerce/ProductGrid.astro';
+import TrustBadges from '../../ecommerce/TrustBadges.astro';
+import { demoStore, defaultRoutes, categoryHref, categoryNames, type StoreConfig, type StoreRoutes } from './data';
+
+interface Props {
+  store?: StoreConfig;
+  routes?: StoreRoutes;
+  category?: string;
+  seedCart?: boolean;
+  noindex?: boolean;
+  theme?: 'dark' | 'light' | 'auto';
+}
+
+const { store = demoStore, routes = defaultRoutes, category, seedCart = false, noindex = false, theme = 'dark' } = Astro.props;
+
+const active = store.categories.find((c) => c.id === category);
+const names = categoryNames(store);
+const maxPrice = Math.ceil(Math.max(...store.products.map((p) => p.price)) / 50) * 50;
+const colors = Array.from(new Map(store.products.flatMap((p) => p.colors ?? []).map((c) => [c.name, c])).values());
+const filterCats = store.categories.map((c) => ({ id: c.id, name: c.name, count: store.products.filter((p) => p.category === c.id).length }));
+const title = active ? active.name : 'All products';
+const description = active?.description ?? 'Everything we make, in one place. Filter by category, price, colour and rating.';
+---
+
+<StoreLayout theme={theme} title={title} description={description} store={store} routes={routes} currentHref={routes.shop} seedCart={seedCart} noindex={noindex}>
+  <div class="store-container shop">
+    <nav class="crumbs" aria-label="Breadcrumb">
+      <ol>
+        <li><a href={routes.home}>Home</a></li>
+        <li><a href={routes.shop} aria-current={active ? undefined : 'page'}>Shop</a></li>
+        {active && <li><span aria-current="page">{active.name}</span></li>}
+      </ol>
+    </nav>
+
+    <ProductToolbar title={title} description={description} total={store.products.length} target="shop-grid" filtersId="shop-filters" />
+
+    <ul class="chips" aria-label="Categories">
+      <li><a class="chip" href={routes.shop} aria-current={!active ? 'page' : undefined}>All</a></li>
+      {store.categories.map((c) => (
+        <li><a class="chip" href={categoryHref(routes, c.id)} aria-current={active?.id === c.id ? 'page' : undefined} data-chip={c.id}>{c.name}</a></li>
+      ))}
+    </ul>
+
+    <div class="shop__layout">
+      <div class="shop__filters">
+        <FilterSidebar
+          target="shop-grid"
+          id="shop-filters"
+          categories={filterCats}
+          selected={active ? [active.id] : []}
+          maxPrice={maxPrice}
+          colors={colors}
+          currency={store.currency}
+          locale={store.locale}
+        />
+      </div>
+      <ProductGrid
+        id="shop-grid"
+        products={store.products}
+        productBase={routes.product}
+        categoryNames={names}
+        columns={3}
+        currency={store.currency}
+        locale={store.locale}
+        cartKey={store.cartKey}
+        openCart={false}
+      />
+    </div>
+
+    <div class="shop__trust">
+      <TrustBadges variant="divided" size="sm" />
+    </div>
+  </div>
+</StoreLayout>
+
+<script>
+  // Category chips filter in place (no reload) and keep FilterSidebar in sync.
+  document.querySelectorAll<HTMLAnchorElement>('.chips a').forEach((chip) => {
+    chip.addEventListener('click', (e) => {
+      const form = document.getElementById('shop-filters') as HTMLFormElement | null;
+      if (!form) return;
+      e.preventDefault();
+      const id = chip.dataset.chip;
+      form.querySelectorAll<HTMLInputElement>('input[name="category"]').forEach((i) => { i.checked = id ? i.value === id : false; });
+      form.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+  });
+  const syncChips = () => {
+    const form = document.getElementById('shop-filters') as HTMLFormElement | null;
+    if (!form) return;
+    const checked = Array.from(form.querySelectorAll<HTMLInputElement>('input[name="category"]:checked')).map((i) => i.value);
+    document.querySelectorAll<HTMLAnchorElement>('.chips a').forEach((chip) => {
+      const id = chip.dataset.chip;
+      const on = id ? checked.length === 1 && checked[0] === id : checked.length === 0;
+      if (on) chip.setAttribute('aria-current', 'page');
+      else chip.removeAttribute('aria-current');
+    });
+  };
+  document.getElementById('shop-filters')?.addEventListener('change', syncChips);
+  document.getElementById('shop-filters')?.addEventListener('reset', () => window.setTimeout(syncChips, 0));
+  syncChips();
+</script>
+
+<style>
+  .shop { padding-block: var(--sp-6) clamp(3rem, 7vw, 5rem); }
+
+  .crumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-6); padding: 0; list-style: none; font-size: 0.85rem; }
+  .crumbs li { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-2); }
+  .crumbs li + li::before { content: '/'; opacity: 0.5; }
+  .crumbs a { color: var(--c-text-2); }
+  .crumbs a:hover { color: var(--c-text-1); }
+  .crumbs [aria-current='page'] { color: var(--c-text-1); font-weight: 600; }
+
+  .chips { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-6); padding: 0 0 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    min-height: 40px;
+    padding: 0 var(--sp-4);
+    border-radius: var(--r-full);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    color: var(--c-text-2);
+    font-size: 0.88rem;
+    font-weight: 600;
+    white-space: nowrap;
+    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  }
+  .chip:hover { color: var(--c-text-1); border-color: rgb(var(--ink-rgb, 255 255 255) / 0.25); }
+  .chip[aria-current='page'] { background: var(--c-text-1); color: var(--c-bg); border-color: var(--c-text-1); }
+  .chip:focus-visible { outline: 2px solid var(--c-primary-light); outline-offset: 2px; }
+
+  .shop__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
+  .shop__filters { position: sticky; top: 88px; }
+  .shop__trust { margin-top: clamp(3rem, 6vw, 4.5rem); }
+
+  @media (max-width: 900px) {
+    .shop__layout { grid-template-columns: 1fr; gap: var(--sp-4); }
+    .shop__filters { position: static; }
+  }
+</style>

package/src/components/lib/templates/ecommerce/StoreCheckoutPage.astro

@@ -0,0 +1,98 @@
+---
+/**
+ * StoreCheckoutPage — E-commerce template checkout in focus mode: StepBreadcrumbBar,
+ * CheckoutForm (contact, delivery, shipping, payment) and a live OrderSummary.
+ *
+ * Usage (src/pages/checkout.astro):
+ *   import { StoreCheckoutPage } from 'astro-component-kit/templates/ecommerce';
+ *   <StoreCheckoutPage />
+ *
+ * @param {StoreConfig} store - Catalogue and settings. Default: demo store.
+ * @param {StoreRoutes} routes - Page URLs.
+ * @param {boolean} seedCart - Pre-fill the cart with demo items. Default false.
+ * @param {string} theme - Initial theme (dark|light|auto). Default 'dark'.
+ * @param {boolean} noindex - Add robots noindex. Default true (checkout pages should not be indexed).
+ */
+import StoreLayout from './StoreLayout.astro';
+import StepBreadcrumbBar from '../../navigation/StepBreadcrumbBar.astro';
+import CheckoutForm from '../../ecommerce/CheckoutForm.astro';
+import OrderSummary from '../../ecommerce/OrderSummary.astro';
+import { demoStore, defaultRoutes, type StoreConfig, type StoreRoutes } from './data';
+
+interface Props {
+  store?: StoreConfig;
+  routes?: StoreRoutes;
+  seedCart?: boolean;
+  noindex?: boolean;
+  theme?: 'dark' | 'light' | 'auto';
+}
+
+const { store = demoStore, routes = defaultRoutes, seedCart = false, noindex = true, theme = 'dark' } = Astro.props;
+---
+
+<StoreLayout theme={theme} title="Checkout" description={`Secure checkout — ${store.name}`} store={store} routes={routes} seedCart={seedCart} noindex={noindex} minimal>
+  <div class="store-container co">
+    <div class="co__steps" data-co-steps>
+      <StepBreadcrumbBar
+        steps={[
+          { step: 1, label: 'Cart', status: 'complete', href: routes.shop },
+          { step: 2, label: 'Details & payment', status: 'active', href: '#checkout' },
+          { step: 3, label: 'Confirmation', status: 'upcoming', href: '#checkout' },
+        ]}
+      />
+    </div>
+
+    <div class="co__head">
+      <h1>Checkout</h1>
+      <a href={routes.shop}><span aria-hidden="true">←</span> Continue shopping</a>
+    </div>
+
+    <div class="co__layout">
+      <CheckoutForm
+        id="checkout"
+        shippingRates={store.shippingRates}
+        freeShippingThreshold={store.freeShippingThreshold}
+        cartKey={store.cartKey}
+        currency={store.currency}
+        locale={store.locale}
+        continueHref={routes.home}
+      />
+      <OrderSummary
+        cartKey={store.cartKey}
+        shippingRates={store.shippingRates}
+        freeShippingThreshold={store.freeShippingThreshold}
+        taxRate={store.taxRate}
+        promoCodes={store.promoCodes}
+        currency={store.currency}
+        locale={store.locale}
+      />
+    </div>
+  </div>
+</StoreLayout>
+
+<script>
+  // Move the step bar to "Confirmation" once the order is placed.
+  document.addEventListener('ack:order-placed', () => {
+    const items = Array.from(document.querySelectorAll<HTMLElement>('[data-co-steps] .step-nav__item'));
+    items.forEach((item, i) => {
+      item.classList.remove('step-nav__item--active', 'step-nav__item--upcoming');
+      item.classList.add(i === items.length - 1 ? 'step-nav__item--active' : 'step-nav__item--complete');
+      const link = item.querySelector('a');
+      if (i === items.length - 1) link?.setAttribute('aria-current', 'step');
+      else link?.removeAttribute('aria-current');
+    });
+  });
+</script>
+
+<style>
+  .co { padding-block: var(--sp-8) clamp(3rem, 7vw, 5rem); }
+  .co__steps { max-width: 720px; margin: 0 auto var(--sp-8); }
+  .co__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
+  .co__head h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: -0.035em; color: var(--c-text-1); }
+  .co__head a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; font-weight: 600; font-size: 0.9rem; }
+  .co__layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
+  @media (max-width: 960px) {
+    .co__layout { grid-template-columns: 1fr; }
+    .co__layout > :global(.o-summary) { order: -1; }
+  }
+</style>