rizzo-css 0.0.68 → 0.0.69

package/scaffold/astro/Tabs.astro

@@ -13,6 +13,8 @@ interface Props {
   tabs: Tab[];
   id?: string;
   defaultTab?: string;
+  /** When set, selected tab id is stored and restored so framework tabs stay in sync across pages */
+  syncStorageKey?: string;
   variant?: 'default' | 'pills' | 'underline';
   class?: string;
 }
@@ -21,17 +23,19 @@ const {
   tabs,
   id,
   defaultTab,
+  syncStorageKey,
   variant = 'default',
   class: className = '',
 } = Astro.props;
 
 const tabsId = id || `tabs-${Math.random().toString(36).substr(2, 9)}`;
-const activeTabId = defaultTab || tabs[0]?.id || '';
+const serverDefaultTab = defaultTab || tabs[0]?.id || '';
+const activeTabId = serverDefaultTab;
 const variantClass = variant !== 'default' ? `tabs--${variant}` : '';
 const classes = `tabs ${variantClass} ${className}`.trim();
 ---
 
-<div class={classes} data-tabs={tabsId}>
+<div class={classes} data-tabs={tabsId} data-sync-storage-key={syncStorageKey || undefined}>
   <div
     class="tabs__list"
     role="tablist"
@@ -91,7 +95,7 @@ const classes = `tabs ${variantClass} ${className}`.trim();
   </div>
 </div>
 
-<script define:vars={{ tabsId, activeTabId }}>
+<script define:vars={{ tabsId, activeTabId, syncStorageKey }}>
   (function initTabs() {
     const init = () => {
       const tabsContainer = document.querySelector(`[data-tabs="${tabsId}"]`);
@@ -110,20 +114,33 @@ const classes = `tabs ${variantClass} ${className}`.trim();
         return;
       }
 
-      // Set initial active state
-      let activeIndex = Array.from(tabButtons).findIndex(
-        (btn) => btn.getAttribute('data-tab-id') === activeTabId
-      );
+      const tabIds = Array.from(tabButtons).map((btn) => btn.getAttribute('data-tab-id')).filter(Boolean);
+      let initialTabId = activeTabId;
+      if (syncStorageKey && typeof sessionStorage !== 'undefined') {
+        try {
+          const stored = sessionStorage.getItem(syncStorageKey);
+          if (stored && tabIds.indexOf(stored) !== -1) {
+            initialTabId = stored;
+          }
+        } catch (_) {}
+      }
+
+      let activeIndex = tabIds.indexOf(initialTabId);
       if (activeIndex === -1) activeIndex = 0;
 
       const activateTab = (index) => {
-        // Validate index
         if (index < 0 || index >= tabButtons.length) return;
 
         const targetButton = tabButtons[index];
         const targetTabId = targetButton.getAttribute('data-tab-id');
         if (!targetTabId) return;
 
+        if (syncStorageKey && typeof sessionStorage !== 'undefined') {
+          try {
+            sessionStorage.setItem(syncStorageKey, targetTabId);
+          } catch (_) {}
+        }
+
         // Update all buttons
         tabButtons.forEach((btn, idx) => {
           const isActive = idx === index;

package/scaffold/astro/ThemeIcon.astro

@@ -1,21 +1,21 @@
 ---
-import type { ThemeIconKey } from './themes';
-import { ALL_THEMES } from './themes';
-import Gear from './icons/Gear.astro';
-import Owl from './icons/Owl.astro';
-import Palette from './icons/Palette.astro';
-import Flame from './icons/Flame.astro';
-import Sunset from './icons/Sunset.astro';
-import Zap from './icons/Zap.astro';
-import Shield from './icons/Shield.astro';
-import Heart from './icons/Heart.astro';
-import Sun from './icons/Sun.astro';
-import Cake from './icons/Cake.astro';
-import Lemon from './icons/Lemon.astro';
-import Rainbow from './icons/Rainbow.astro';
-import Leaf from './icons/Leaf.astro';
-import Cherry from './icons/Cherry.astro';
-import Brush from './icons/Brush.astro';
+import type { ThemeIconKey } from '../../config/themes';
+import { ALL_THEMES } from '../../config/themes';
+import Gear from '../icons/Gear.astro';
+import Owl from '../icons/Owl.astro';
+import Palette from '../icons/Palette.astro';
+import Flame from '../icons/Flame.astro';
+import Sunset from '../icons/Sunset.astro';
+import Zap from '../icons/Zap.astro';
+import Shield from '../icons/Shield.astro';
+import Heart from '../icons/Heart.astro';
+import Sun from '../icons/Sun.astro';
+import Cake from '../icons/Cake.astro';
+import Lemon from '../icons/Lemon.astro';
+import Rainbow from '../icons/Rainbow.astro';
+import Leaf from '../icons/Leaf.astro';
+import Cherry from '../icons/Cherry.astro';
+import Brush from '../icons/Brush.astro';
 
 const iconMap: Record<ThemeIconKey, typeof Owl> = {
   gear: Gear,

package/scaffold/astro/ThemeSwitcher.astro

@@ -1,22 +1,22 @@
 ---
-import ChevronDown from './icons/ChevronDown.astro';
-import Gear from './icons/Gear.astro';
-import Palette from './icons/Palette.astro';
-import Owl from './icons/Owl.astro';
-import Sun from './icons/Sun.astro';
-import Flame from './icons/Flame.astro';
-import Heart from './icons/Heart.astro';
-import Leaf from './icons/Leaf.astro';
-import Shield from './icons/Shield.astro';
-import Zap from './icons/Zap.astro';
-import Cake from './icons/Cake.astro';
-import Sunset from './icons/Sunset.astro';
-import Cherry from './icons/Cherry.astro';
-import Brush from './icons/Brush.astro';
-import Lemon from './icons/Lemon.astro';
-import Rainbow from './icons/Rainbow.astro';
-import type { ThemeIconKey } from './themes';
-import { THEMES_DARK, THEMES_LIGHT } from './themes';
+import ChevronDown from '../icons/ChevronDown.astro';
+import Gear from '../icons/Gear.astro';
+import Palette from '../icons/Palette.astro';
+import Owl from '../icons/Owl.astro';
+import Sun from '../icons/Sun.astro';
+import Flame from '../icons/Flame.astro';
+import Heart from '../icons/Heart.astro';
+import Leaf from '../icons/Leaf.astro';
+import Shield from '../icons/Shield.astro';
+import Zap from '../icons/Zap.astro';
+import Cake from '../icons/Cake.astro';
+import Sunset from '../icons/Sunset.astro';
+import Cherry from '../icons/Cherry.astro';
+import Brush from '../icons/Brush.astro';
+import Lemon from '../icons/Lemon.astro';
+import Rainbow from '../icons/Rainbow.astro';
+import type { ThemeIconKey } from '../../config/themes';
+import { THEMES_DARK, THEMES_LIGHT } from '../../config/themes';
 
 const iconMap: Record<ThemeIconKey, typeof Owl> = {
   gear: Gear,
@@ -192,7 +192,7 @@ const InitialIcon = initialTheme ? initialTheme.icon : null;
     resolveSystemTheme,
     getThemeLabel,
     THEME_SYSTEM,
-  } from '../utils/theme';
+  } from '../../utils/theme';
 
   function initThemeSwitcher() {
     const getIconSVG = (themeValue: string) => {

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 52 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 53 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 52 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 53 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 
 ## Setup
 

package/scaffold/svelte/Navbar.svelte

@@ -10,6 +10,13 @@
   let { siteName = 'Site', logo }: Props = $props();
   let menuOpen = $state(false);
 
+  const menuLinks = [
+    { href: '/docs', label: 'Docs' },
+    { href: '/docs/components', label: 'Components' },
+    { href: '/blocks', label: 'Blocks' },
+    { href: '/themes', label: 'Themes' },
+  ];
+
   // Click outside and Escape to close mobile menu
   $effect(() => {
     if (!menuOpen) return;
@@ -44,7 +51,7 @@
     </div>
     <div class="navbar__actions-desktop">
       <Search id="search-navbar" />
-      <button type="button" class="navbar__settings-btn" aria-label="Open settings" onclick="window.openSettings && window.openSettings()">
+      <button type="button" class="navbar__settings-btn" aria-label="Open settings" onclick={() => window.openSettings?.()}>
         <Gear width={20} height={20} class="navbar__settings-icon" />
         <span class="navbar__settings-label">Settings</span>
       </button>
@@ -58,8 +65,12 @@
     >
       <span class="navbar__toggle-icon" aria-hidden="true"><span></span><span></span><span></span></span>
     </button>
-    <div class="navbar__menu" class:navbar__menu--open={menuOpen} aria-hidden={!menuOpen}>
-      <a href="/" class="navbar__link">Home</a>
+    <div class="navbar__menu" class:navbar__menu--open={menuOpen} aria-hidden={!menuOpen} role="navigation" aria-label="Mobile menu">
+      {#each menuLinks as link}
+        <div class="navbar__item">
+          <a href={link.href} class="navbar__link" tabindex={menuOpen ? 0 : -1}>{link.label}</a>
+        </div>
+      {/each}
     </div>
   </div>
 </nav>

package/scaffold/svelte/RangeCalendar.svelte

@@ -0,0 +1,167 @@
+<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;
+    rangeStart?: string | null;
+    rangeEnd?: string | null;
+    label?: string;
+    class?: string;
+  }
+
+  let {
+    id: calendarId,
+    initialMonth,
+    rangeStart: controlledStart,
+    rangeEnd: controlledEnd,
+    label = 'Choose date range',
+    class: className = '',
+    onRangeSelect,
+  }: Props & { onRangeSelect?: (start: string, end: string) => void } = $props();
+
+  const id = $derived(calendarId ?? `range-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());
+  let internalStart = $state<string | null>(null);
+  let internalEnd = $state<string | null>(null);
+
+  const start = $derived(controlledStart !== undefined ? controlledStart : internalStart);
+  const end = $derived(controlledEnd !== undefined ? controlledEnd : internalEnd);
+
+  function toYYYYMMDD(year: number, month: number, day: number): string {
+    return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+  }
+
+  function dateStrToMs(s: string): number | null {
+    const d = new Date(s);
+    return Number.isNaN(d.getTime()) ? null : d.getTime();
+  }
+
+  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}`);
+
+  const startMs = $derived(start ? dateStrToMs(start) : null);
+  const endMs = $derived(end ? dateStrToMs(end) : null);
+  const minMax = $derived(
+    startMs != null && endMs != null
+      ? (startMs <= endMs ? [startMs, endMs] as const : [endMs, startMs] as const)
+      : [null, null] as const
+  );
+
+  function isInRange(dateStr: string): boolean {
+    const [minMs, maxMs] = minMax;
+    if (minMs == null || maxMs == null) return false;
+    const ms = dateStrToMs(dateStr);
+    if (ms == null) return false;
+    if (start === dateStr || end === dateStr) return false;
+    return ms >= minMs && ms <= maxMs;
+  }
+
+  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 onDayClick(dateStr: string) {
+    if (controlledStart !== undefined && controlledEnd !== undefined) return;
+    if (start === null || (start !== null && end !== null)) {
+      internalStart = dateStr;
+      internalEnd = null;
+    } else {
+      const s = dateStrToMs(start!);
+      const e = dateStrToMs(dateStr);
+      if (s != null && e != null && e < s) {
+        internalEnd = start;
+        internalStart = dateStr;
+        onRangeSelect?.(dateStr, start!);
+      } else {
+        internalEnd = dateStr;
+        onRangeSelect?.(start!, dateStr);
+      }
+    }
+  }
+</script>
+
+<div class="calendar calendar--range {className}" {id} role="group" aria-label={label} data-range-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' : ''}
+                {start === dateStr ? ' calendar__day--range-start' : ''}
+                {end === dateStr ? ' calendar__day--range-end' : ''}
+                {isInRange(dateStr) ? ' calendar__day--in-range' : ''}"
+              aria-label="Choose {MONTHS[cell.month]} {cell.day}, {cell.year}"
+              onclick={() => onDayClick(dateStr)}
+            >
+              {cell.day}
+            </button>
+          </div>
+        {/each}
+      </div>
+    {/each}
+  </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 52 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 53 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 
 ## Setup
 

package/scaffold/svelte/index.ts

@@ -6,6 +6,7 @@ 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 RangeCalendar } from './RangeCalendar.svelte';
 export { default as Carousel } from './Carousel.svelte';
 export { default as Dashboard } from './Dashboard.svelte';
 export { default as Divider } from './Divider.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 52 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 53 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 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).
+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 53 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.68`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.69`, 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

@@ -438,6 +438,30 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -731,6 +755,30 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

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

@@ -438,6 +438,30 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -731,6 +755,30 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -438,6 +438,30 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -731,6 +755,30 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+