rizzo-css 0.0.66 → 0.0.68

package/scaffold/astro/base/README-RIZZO.md

@@ -15,7 +15,7 @@
   Design system · Vanilla · Astro · Svelte
 </pre>
 
-Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Astro, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = base + component picker (all 50 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
+Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Astro, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = base + component picker (all 52 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 
 ## Setup
 

package/scaffold/astro/variants/full/README-RIZZO.md

@@ -15,7 +15,7 @@
   Design system · Vanilla · Astro · Svelte
 </pre>
 
-Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Astro, then **Full** template. **Full** = clone of the Rizzo docs site (no component picker). **Landing** / **Docs** / **Dashboard** = base + component picker (all 50 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
+Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Astro, then **Full** template. **Full** = clone of the Rizzo docs site (no component picker). **Landing** / **Docs** / **Dashboard** = base + component picker (all 52 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 
 ## Setup
 

package/scaffold/svelte/Button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
-  type Variant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'outline';
+  type Variant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'outline' | 'ghost';
   interface Props {
     variant?: Variant;
     disabled?: boolean;

package/scaffold/svelte/Calendar.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  interface Props {
+    id?: string;
+    initialMonth?: string;
+    selected?: string;
+    label?: string;
+    class?: string;
+  }
+
+  let {
+    id: calendarId,
+    initialMonth,
+    selected,
+    label = 'Calendar',
+    class: className = '',
+    onSelect,
+  }: Props & { onSelect?: (date: string) => void } = $props();
+
+  const id = $derived(calendarId ?? `calendar-${Math.random().toString(36).slice(2, 9)}`);
+  const now = new Date();
+
+  function parseInitial(): { year: number; month: number } {
+    if (!initialMonth) return { year: now.getFullYear(), month: now.getMonth() };
+    const [y, m] = initialMonth.split('-').map(Number);
+    if (!y || !m || m < 1 || m > 12) return { year: now.getFullYear(), month: now.getMonth() };
+    return { year: y, month: m - 1 };
+  }
+
+  let view = $state(parseInitial());
+
+  function toYYYYMMDD(year: number, month: number, day: number): string {
+    return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+  }
+
+  function getMonthGrid(year: number, month: number): { day: number; year: number; month: number; currentMonth: boolean }[][] {
+    const first = new Date(year, month, 1);
+    const last = new Date(year, month + 1, 0);
+    const startDay = first.getDay();
+    const daysInMonth = last.getDate();
+    const weeks: { day: number; year: number; month: number; currentMonth: boolean }[][] = [];
+    let week: { day: number; year: number; month: number; currentMonth: boolean }[] = [];
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear = month === 0 ? year - 1 : year;
+    const prevLast = new Date(prevYear, prevMonth + 1, 0).getDate();
+    for (let i = 0; i < startDay; i++) {
+      week.push({ day: prevLast - startDay + i + 1, year: prevYear, month: prevMonth, currentMonth: false });
+    }
+    for (let d = 1; d <= daysInMonth; d++) {
+      week.push({ day: d, year, month, currentMonth: true });
+      if (week.length === 7) {
+        weeks.push(week);
+        week = [];
+      }
+    }
+    const nextMonth = month === 11 ? 0 : month + 1;
+    const nextYear = month === 11 ? year + 1 : year;
+    for (let i = 1; week.length < 7; i++) {
+      week.push({ day: i, year: nextYear, month: nextMonth, currentMonth: false });
+    }
+    weeks.push(week);
+    return weeks;
+  }
+
+  const todayStr = $derived(toYYYYMMDD(now.getFullYear(), now.getMonth(), now.getDate()));
+  const weeks = $derived(getMonthGrid(view.year, view.month));
+  const monthLabel = $derived(`${MONTHS[view.month]} ${view.year}`);
+
+  function prevMonth() {
+    view = view.month === 0 ? { year: view.year - 1, month: 11 } : { year: view.year, month: view.month - 1 };
+  }
+
+  function nextMonth() {
+    view = view.month === 11 ? { year: view.year + 1, month: 0 } : { year: view.year, month: view.month + 1 };
+  }
+
+  function select(dateStr: string) {
+    onSelect?.(dateStr);
+  }
+</script>
+
+<div class="calendar {className}" {id} role="group" aria-label={label} data-calendar>
+  <div class="calendar__header">
+    <button type="button" class="calendar__prev" aria-label="Previous month" onclick={prevMonth}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
+    </button>
+    <div class="calendar__month" aria-live="polite">{monthLabel}</div>
+    <button type="button" class="calendar__next" aria-label="Next month" onclick={nextMonth}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
+    </button>
+  </div>
+  <div class="calendar__grid" role="grid" aria-label={monthLabel}>
+    <div class="calendar__row" role="row">
+      {#each WEEKDAYS as day}
+        <div class="calendar__weekday" role="columnheader" aria-label={day}>{day}</div>
+      {/each}
+    </div>
+    {#each weeks as week}
+      <div class="calendar__row" role="row">
+        {#each week as cell}
+          {@const dateStr = toYYYYMMDD(cell.year, cell.month, cell.day)}
+          <div role="gridcell">
+            <button
+              type="button"
+              class="calendar__day
+                {!cell.currentMonth ? ' calendar__day--other-month' : ''}
+                {dateStr === todayStr ? ' calendar__day--today' : ''}
+                {(selected ?? '') === dateStr ? ' calendar__day--selected' : ''}"
+              aria-label="Choose {MONTHS[cell.month]} {cell.day}, {cell.year}"
+              onclick={() => select(dateStr)}
+            >
+              {cell.day}
+            </button>
+          </div>
+        {/each}
+      </div>
+    {/each}
+  </div>
+</div>

package/scaffold/svelte/Carousel.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    id?: string;
+    label?: string;
+    showIndicators?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    id: carouselId,
+    label = 'Carousel',
+    showIndicators = true,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const id = $derived(carouselId ?? `carousel-${Math.random().toString(36).slice(2, 9)}`);
+  let viewportEl: HTMLDivElement;
+  let trackEl: HTMLDivElement;
+  let index = $state(0);
+  let total = $state(0);
+
+  $effect(() => {
+    if (!trackEl) return;
+    const slides = trackEl.querySelectorAll('.carousel__slide');
+    total = slides.length;
+  });
+
+  $effect(() => {
+    if (!viewportEl || !trackEl || total === 0) return;
+    const w = viewportEl.offsetWidth;
+    trackEl.style.transform = `translateX(${-index * w}px)`;
+  });
+
+  function goTo(i: number) {
+    index = Math.max(0, Math.min(i, total - 1));
+  }
+</script>
+
+<div class="carousel {className}" {id} role="region" aria-roledescription="carousel" aria-label={label} data-carousel>
+  <div class="carousel__viewport" bind:this={viewportEl} data-carousel-viewport>
+    <div class="carousel__track" bind:this={trackEl} data-carousel-track>
+      {@render children?.()}
+    </div>
+  </div>
+
+  <div class="carousel__controls">
+    <button
+      type="button"
+      class="carousel__prev"
+      aria-label="Previous slide"
+      onclick={() => goTo(index - 1)}
+      disabled={index === 0}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
+    </button>
+
+    {#if showIndicators && total > 0}
+      <div class="carousel__indicators" role="tablist" aria-label="Slide indicators">
+        {#each Array(total) as _, i}
+          <button
+            type="button"
+            role="tab"
+            aria-label="Slide {i + 1}"
+            aria-selected={i === index}
+            class="carousel__indicator"
+            onclick={() => goTo(i)}
+          />
+        {/each}
+      </div>
+    {/if}
+
+    <button
+      type="button"
+      class="carousel__next"
+      aria-label="Next slide"
+      onclick={() => goTo(index + 1)}
+      disabled={index >= total - 1}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
+    </button>
+  </div>
+</div>

package/scaffold/svelte/base/README-RIZZO.md

@@ -15,7 +15,7 @@
   Design system · Vanilla · Astro · Svelte
 </pre>
 
-SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Svelte, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = base + component picker (all 50 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
+SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Svelte, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = base + component picker (all 52 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 
 ## Setup
 

package/scaffold/svelte/index.ts

@@ -5,6 +5,8 @@
 export { default as Button } from './Button.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Card } from './Card.svelte';
+export { default as Calendar } from './Calendar.svelte';
+export { default as Carousel } from './Carousel.svelte';
 export { default as Dashboard } from './Dashboard.svelte';
 export { default as Divider } from './Divider.svelte';
 export { default as Footer } from './Footer.svelte';

package/scaffold/svelte/variants/full/README-RIZZO.md

@@ -15,7 +15,7 @@
   Design system · Vanilla · Astro · Svelte
 </pre>
 
-SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Svelte, then **Full** template. **Full** = clone of the Rizzo docs site (no component picker). **Landing** / **Docs** / **Dashboard** = base + component picker (all 50 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
+SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Svelte, then **Full** template. **Full** = clone of the Rizzo docs site (no component picker). **Landing** / **Docs** / **Dashboard** = base + component picker (all 52 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 
 ## Setup
 

package/scaffold/vanilla/README-RIZZO.md

@@ -15,7 +15,7 @@
   Design system · Vanilla · Astro · Svelte
 </pre>
 
-This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Vanilla JS, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = CSS, fonts, icons, sfx + component picker (all 50 or pick); Landing adds hero/features; Docs adds sidebar + sample doc; Dashboard adds sidebar + stats/table. **Add to existing project** (or `npx rizzo-css add`) uses the **same template choice**; you must add the stylesheet `<link>` yourself (CLI prints the exact tag).
+This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Vanilla JS, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = CSS, fonts, icons, sfx + component picker (all 52 or pick); Landing adds hero/features; Docs adds sidebar + sample doc; Dashboard adds sidebar + stats/table. **Add to existing project** (or `npx rizzo-css add`) uses the **same template choice**; you must add the stylesheet `<link>` yourself (CLI prints the exact tag).
 
 ## First-time setup
 
@@ -28,7 +28,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
 - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`  
 - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`  
 
-(Replace `@latest` with a specific version, e.g. `@0.0.66`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.68`, in production.)
 
 The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.
 

package/scaffold/vanilla/components/accordion.html

@@ -446,6 +446,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -733,6 +739,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert-dialog.html

@@ -446,6 +446,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -733,6 +739,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -446,6 +446,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -733,6 +739,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/aspect-ratio.html

@@ -446,6 +446,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -733,6 +739,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -446,6 +446,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -733,6 +739,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/back-to-top.html

@@ -446,6 +446,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -733,6 +739,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -446,6 +446,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -733,6 +739,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -446,6 +446,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -733,6 +739,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/button-group.html

@@ -446,6 +446,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -733,6 +739,12 @@
 
 
 
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -446,6 +446,12 @@
   
   
   
+  
+  
+  
+  
+  
+  
   
   
   
@@ -733,6 +739,12 @@
 
 
 
+
+
+
+
+
+