rizzo-css 0.0.12 → 0.0.13

package/scaffold/svelte-app/README.md

@@ -1,6 +1,6 @@
 # SvelteKit + Rizzo CSS
 
-This project was scaffolded with `npx rizzo-css init` (Svelte).
+This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Svelte. This full clone (home, component showcase at `/components`) is only generated for new projects; **Add to existing project** only adds the CSS and optional components.
 
 ## First-time setup
 
@@ -19,6 +19,13 @@ pnpm dev
 
 The theme selected during `rizzo-css init` is set in `src/app.html` (`data-theme`) and is used on first load when you have no saved preference in the browser.
 
+## Editing the cloned site
+
+- **Home** — `src/routes/+page.svelte` (hero, link to `/components`). Edit or replace with your own content.
+- **Component showcase** — `src/routes/components/+page.svelte` (overview) and `src/routes/components/[slug]/+page.svelte` (each component doc). Doc content lives in `src/lib/rizzo-docs/` (SvelteDocPage, CodeBlock, pages/*). Rizzo components are in `src/lib/rizzo/`. Change routes or copy from the docs as needed.
+- **Layout** — `src/routes/+layout.svelte` wraps all pages. Add a shared nav or footer here.
+- **CSS** — Loaded via `src/app.html` (`/css/rizzo.min.css` from `static/css/`).
+
 ## Commands
 
 - `pnpm dev` — Start dev server
@@ -27,6 +34,6 @@ The theme selected during `rizzo-css init` is set in `src/app.html` (`data-theme
 
 ## Other scaffolds
 
-From the same **rizzo-css** package: **Vanilla** (`scaffold/vanilla/`) — single HTML file with Settings and toast; **Astro** (`scaffold/astro-app/`) — minimal Astro app. Use `npx rizzo-css init` and pick a different framework to create one of them.
+From the same **rizzo-css** package: **Vanilla** (`scaffold/vanilla/`) — index + component showcase (components/index.html, components/<slug>.html) with Settings and toast; **Astro** (`scaffold/astro-app/`) — Astro app with navbar and component showcase. Use `npx rizzo-css init` and pick a different framework to create one of them.
 
 Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)

package/scaffold/svelte-app/src/app.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <!-- Theme flash prevention + accessibility (same as main site) -->
     <script>
-      (function(){try{var s=localStorage.getItem('theme');var d='github-dark-classic';var l='github-light';var initial=document.documentElement.getAttribute('data-theme');var r=!s?(initial||(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);var f=localStorage.getItem('fontSizeScale');if(f)document.documentElement.style.setProperty('--font-size-scale',f);if(localStorage.getItem('reducedMotion')==='true')document.documentElement.classList.add('reduced-motion');if(localStorage.getItem('highContrast')==='true')document.documentElement.classList.add('high-contrast');var b=localStorage.getItem('scrollbarStyle')||'thin';if(b==='thick')document.documentElement.classList.add('scrollbar-thick');else if(b==='hidden')document.documentElement.classList.add('scrollbar-hidden','hide-scrollbars');}catch(e){}})();
+      (function(){try{var s=localStorage.getItem('theme');var d='{{DEFAULT_DARK}}';var l='{{DEFAULT_LIGHT}}';var initial=document.documentElement.getAttribute('data-theme');var r=!s?((initial&&initial!=='system')?initial:(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);var f=localStorage.getItem('fontSizeScale');if(f)document.documentElement.style.setProperty('--font-size-scale',f);if(localStorage.getItem('reducedMotion')==='true')document.documentElement.classList.add('reduced-motion');if(localStorage.getItem('highContrast')==='true')document.documentElement.classList.add('high-contrast');var b=localStorage.getItem('scrollbarStyle')||'thin';if(b==='thick')document.documentElement.classList.add('scrollbar-thick');else if(b==='hidden')document.documentElement.classList.add('scrollbar-hidden','hide-scrollbars');}catch(e){}})();
     </script>
     <!-- Toast: showToast, removeToast, removeAllToasts -->
     <script>

package/scaffold/svelte-app/src/lib/rizzo/Accordion.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  export interface AccordionItem {
+    id: string;
+    title: string;
+    content?: string;
+  }
+
+  interface Props {
+    items: AccordionItem[];
+    id?: string;
+    allowMultiple?: boolean;
+    defaultExpanded?: string | string[];
+    class?: string;
+  }
+
+  let {
+    items,
+    id,
+    allowMultiple = false,
+    defaultExpanded,
+    class: className = '',
+  }: Props = $props();
+
+  const accordionId = $derived(id ?? `accordion-${Math.random().toString(36).slice(2, 11)}`);
+
+  function getDefaultExpanded(): Set<string> {
+    if (defaultExpanded === undefined) return new Set(items[0] ? [items[0].id] : []);
+    if (typeof defaultExpanded === 'string') return new Set([defaultExpanded]);
+    return new Set(defaultExpanded);
+  }
+
+  let expanded = $state<Set<string>>(getDefaultExpanded());
+
+  const classes = $derived(['accordion', className].filter(Boolean).join(' ').trim());
+
+  function toggle(itemId: string) {
+    expanded = new Set(
+      allowMultiple
+        ? (expanded.has(itemId) ? [...expanded].filter((id) => id !== itemId) : [...expanded, itemId])
+        : expanded.has(itemId)
+          ? []
+          : [itemId]
+    );
+  }
+
+  function handleKeydown(e: KeyboardEvent, itemId: string, index: number) {
+    const triggers = e.currentTarget?.parentElement?.querySelectorAll?.('[data-accordion-trigger]') ?? [];
+    const len = triggers.length;
+    let targetIndex = index;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        targetIndex = Math.min(index + 1, len - 1);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        targetIndex = Math.max(index - 1, 0);
+        break;
+      case 'Home':
+        e.preventDefault();
+        targetIndex = 0;
+        break;
+      case 'End':
+        e.preventDefault();
+        targetIndex = len - 1;
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        toggle(itemId);
+        return;
+      default:
+        return;
+    }
+    if (targetIndex !== index && triggers[targetIndex]) (triggers[targetIndex] as HTMLElement).focus();
+  }
+</script>
+
+<div
+  class={classes}
+  data-accordion={accordionId}
+  data-allow-multiple={allowMultiple ? 'true' : 'false'}
+>
+  {#each items as item, i}
+    {@const triggerId = `${accordionId}-trigger-${item.id}`}
+    {@const panelId = `${accordionId}-panel-${item.id}`}
+    {@const isExpanded = expanded.has(item.id)}
+    <div class="accordion__item" data-accordion-item data-item-id={item.id}>
+      <h3 class="accordion__heading">
+        <button
+          type="button"
+          class="accordion__trigger"
+          class:accordion__trigger--expanded={isExpanded}
+          id={triggerId}
+          aria-expanded={isExpanded}
+          aria-controls={panelId}
+          data-accordion-trigger
+          onclick={() => toggle(item.id)}
+          onkeydown={(e) => handleKeydown(e, item.id, i)}
+        >
+          <span class="accordion__title">{item.title}</span>
+          <span class="accordion__icon" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="m6 9 6 6 6-6" />
+            </svg>
+          </span>
+        </button>
+      </h3>
+      <div
+        class="accordion__panel"
+        class:accordion__panel--expanded={isExpanded}
+        id={panelId}
+        role="region"
+        aria-labelledby={triggerId}
+        hidden={!isExpanded}
+        data-accordion-panel
+      >
+        <div class="accordion__panel-inner">
+          <div class="accordion__panel-content">
+            {#if item.content}
+              {@html item.content}
+            {/if}
+          </div>
+        </div>
+      </div>
+    </div>
+  {/each}
+</div>

package/scaffold/svelte-app/src/lib/rizzo/Alert.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: 'success' | 'error' | 'warning' | 'info';
+    dismissible?: boolean;
+    autoDismiss?: number;
+    class?: string;
+    id?: string;
+    onDismiss?: () => void;
+    children?: Snippet;
+  }
+  let {
+    variant = 'info',
+    dismissible = false,
+    autoDismiss = 0,
+    class: className = '',
+    id,
+    onDismiss,
+    children,
+  }: Props = $props();
+
+  let visible = $state(true);
+  const alertId = $derived(id ?? `alert-${Math.random().toString(36).slice(2, 11)}`);
+  const classes = $derived(['alert', `alert--${variant}`, className].filter(Boolean).join(' ').trim());
+
+  const ariaLabels: Record<string, string> = {
+    success: 'Success message',
+    error: 'Error message',
+    warning: 'Warning message',
+    info: 'Information message',
+  };
+
+  let autoDismissTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  function dismiss() {
+    visible = false;
+    if (autoDismissTimeout) clearTimeout(autoDismissTimeout);
+    onDismiss?.();
+  }
+
+  onMount(() => {
+    if (autoDismiss > 0) {
+      autoDismissTimeout = setTimeout(dismiss, autoDismiss);
+    }
+    return () => {
+      if (autoDismissTimeout) clearTimeout(autoDismissTimeout);
+    };
+  });
+</script>
+
+{#if visible}
+  <div
+    class={classes}
+    id={alertId}
+    role="alert"
+    aria-live="polite"
+    aria-atomic="true"
+    aria-label={ariaLabels[variant]}
+  >
+    <div class="alert__content">
+      {@render children?.()}
+    </div>
+    {#if dismissible}
+      <button
+        type="button"
+        class="alert__close"
+        aria-label="Dismiss alert"
+        aria-controls={alertId}
+        onclick={dismiss}
+        onkeydown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            dismiss();
+          }
+        }}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    {/if}
+  </div>
+{/if}

package/scaffold/svelte-app/src/lib/rizzo/Avatar.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  function getInitials(name: string): string {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0) return '';
+    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+
+  interface Props {
+    src?: string;
+    alt?: string;
+    name?: string;
+    initials?: string;
+    size?: 'sm' | 'md' | 'lg';
+    shape?: 'circle' | 'square';
+    class?: string;
+  }
+  let {
+    src,
+    alt = '',
+    name = '',
+    initials: initialsProp = '',
+    size = 'md',
+    shape = 'circle',
+    class: className = '',
+  }: Props = $props();
+
+  const displayInitials = $derived(name ? getInitials(name) : initialsProp);
+  const classes = $derived(['avatar', `avatar--${size}`, `avatar--${shape}`, className].filter(Boolean).join(' ').trim());
+  const ariaLabel = $derived(alt || name || (displayInitials ? `Avatar: ${displayInitials}` : 'Avatar'));
+</script>
+
+<span class={classes} role="img" aria-label={ariaLabel}>
+  {#if src}
+    <img src={src} alt={alt || name || ''} class="avatar__img" loading="lazy" />
+  {:else}
+    <span class="avatar__initials" aria-hidden="true">{displayInitials || '?'}</span>
+  {/if}
+</span>

package/scaffold/svelte-app/src/lib/rizzo/Badge.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Variant = 'primary' | 'success' | 'warning' | 'error' | 'info';
+  type Size = 'sm' | 'md' | 'lg';
+  interface Props {
+    variant?: Variant;
+    size?: Size;
+    pill?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+  let {
+    variant = 'primary',
+    size = 'md',
+    pill = false,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const classes = $derived(
+    ['badge', `badge--${variant}`, `badge--${size}`, pill ? 'badge--pill' : '', className]
+      .filter(Boolean)
+      .join(' ')
+      .trim()
+  );
+</script>
+
+<span class={classes}>
+  {@render children?.()}
+</span>

package/scaffold/svelte-app/src/lib/rizzo/Breadcrumb.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+  }
+
+  interface Props {
+    items: BreadcrumbItem[];
+    separator?: 'chevron' | 'slash' | 'arrow' | string;
+    class?: string;
+  }
+  let { items, separator = 'chevron', class: className = '' }: Props = $props();
+
+  const separatorVariant = $derived(
+    separator === 'slash' ? 'breadcrumb--slash' : separator === 'arrow' ? 'breadcrumb--arrow' : 'breadcrumb--chevron'
+  );
+  const classes = $derived(['breadcrumb', separatorVariant, className].filter(Boolean).join(' ').trim());
+  const separatorChar = $derived(
+    separator === 'slash' ? '/' : separator === 'arrow' ? '›' : typeof separator === 'string' ? separator : '›'
+  );
+  const useIcon = $derived(separator === 'chevron');
+</script>
+
+<nav class={classes} aria-label="Breadcrumb">
+  <ol class="breadcrumb__list">
+    {#each items as item, index}
+      {@const isLast = index === items.length - 1}
+      {@const isCurrent = isLast || !item.href}
+      <li class="breadcrumb__item {isCurrent ? 'breadcrumb__item--current' : ''}">
+        {#if isCurrent}
+          <span class="breadcrumb__current" aria-current="page">{item.label}</span>
+        {:else}
+          <a class="breadcrumb__link" href={item.href}>{item.label}</a>
+        {/if}
+        {#if !isLast}
+          <span class="breadcrumb__separator" aria-hidden="true">
+            {#if useIcon}
+              <svg class="breadcrumb__separator-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                <path d="M6 9l6 6 6-6" />
+              </svg>
+            {:else}
+              {separatorChar}
+            {/if}
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

package/scaffold/svelte-app/src/lib/rizzo/Button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Variant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'outline';
+  interface Props {
+    variant?: Variant;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    class?: string;
+    children?: Snippet;
+  }
+  let {
+    variant = 'default',
+    disabled = false,
+    type = 'button',
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  const variantClass = $derived(variant === 'default' ? '' : `btn-${variant}`);
+  const classes = $derived(['btn', variantClass, className].filter(Boolean).join(' '));
+</script>
+
+<button {type} {disabled} class={classes} {...rest}>
+  {@render children?.()}
+</button>

package/scaffold/svelte-app/src/lib/rizzo/Card.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Variant = 'default' | 'elevated' | 'outlined' | 'filled';
+  interface Props {
+    variant?: Variant;
+    class?: string;
+    children?: Snippet;
+  }
+  let { variant = 'default', class: className = '', children }: Props = $props();
+  const variantClass = $derived(variant !== 'default' ? `card--${variant}` : '');
+  const classes = $derived(['card', variantClass, className].filter(Boolean).join(' ').trim());
+</script>
+
+<div class={classes}>
+  {@render children?.()}
+</div>

package/scaffold/svelte-app/src/lib/rizzo/Checkbox.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  interface Props {
+    id?: string;
+    name?: string;
+    value?: string;
+    checked?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    class?: string;
+    ariaDescribedby?: string;
+    ariaLabel?: string;
+  }
+  let {
+    id,
+    name,
+    value,
+    checked = $bindable(false),
+    required = false,
+    disabled = false,
+    class: className = '',
+    ariaDescribedby,
+    ariaLabel,
+  }: Props = $props();
+</script>
+
+<input
+  type="checkbox"
+  {id}
+  {name}
+  {value}
+  bind:checked
+  {required}
+  {disabled}
+  class={className}
+  aria-describedby={ariaDescribedby}
+  aria-label={ariaLabel}
+/>

package/scaffold/svelte-app/src/lib/rizzo/CopyToClipboard.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  interface Props {
+    value: string;
+    label?: string;
+    format?: string;
+    class?: string;
+    id?: string;
+  }
+  let { value, label, format, class: className = '', id }: Props = $props();
+
+  let copied = $state(false);
+  let feedbackText = $state('');
+  const fallbackId = `copy-btn-${Math.random().toString(36).slice(2, 11)}`;
+  const buttonId = $derived(id ?? fallbackId);
+  const classes = $derived(['copy-to-clipboard', className].filter(Boolean).join(' ').trim());
+
+  async function copy() {
+    if (!value) return;
+    try {
+      await navigator.clipboard.writeText(value);
+      copied = true;
+      feedbackText = format ? `Copied ${format}!` : 'Copied!';
+      setTimeout(() => {
+        copied = false;
+        feedbackText = '';
+      }, 2000);
+    } catch {
+      const textArea = document.createElement('textarea');
+      textArea.value = value;
+      textArea.style.position = 'fixed';
+      textArea.style.left = '-999999px';
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      try {
+        document.execCommand('copy');
+        copied = true;
+        feedbackText = format ? `Copied ${format}!` : 'Copied!';
+        setTimeout(() => {
+          copied = false;
+          feedbackText = '';
+        }, 2000);
+      } catch {
+        feedbackText = 'Failed to copy';
+      }
+      document.body.removeChild(textArea);
+    }
+  }
+</script>
+
+<span class="tooltip-host" data-tooltip={copied ? (format ? `Copied ${format}!` : 'Copied!') : (label ?? 'Copy to clipboard')}>
+  <button
+    type="button"
+    class={classes}
+    aria-label={copied ? (format ? `Copied ${format}!` : 'Copied!') : (label ?? `Copy ${value} to clipboard`)}
+    id={buttonId}
+    onclick={copy}
+    onkeydown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        copy();
+      }
+    }}
+  >
+    <span class="copy-to-clipboard__text">{value}</span>
+    <span class="copy-to-clipboard__icon copy-to-clipboard__icon--copy" class:copy-to-clipboard__icon--hidden={copied} aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+      </svg>
+    </span>
+    <span class="copy-to-clipboard__icon copy-to-clipboard__icon--check" class:copy-to-clipboard__icon--hidden={!copied} aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+        <polyline points="20 6 9 17 4 12" />
+      </svg>
+    </span>
+    <span class="copy-to-clipboard__feedback" aria-live="polite">{feedbackText}</span>
+  </button>
+</span>

package/scaffold/svelte-app/src/lib/rizzo/Divider.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    label?: string;
+    class?: string;
+  }
+  let { orientation = 'horizontal', label, class: className = '' }: Props = $props();
+  const orientationClass = $derived(`divider--${orientation}`);
+  const hasLabel = $derived(typeof label === 'string' && label.trim().length > 0);
+  const labelClass = $derived(hasLabel ? 'divider--labeled' : '');
+  const classes = $derived(['divider', orientationClass, labelClass, className].filter(Boolean).join(' ').trim());
+  const labelText = $derived(label?.trim() ?? '');
+</script>
+
+<div
+  class={classes}
+  role="separator"
+  aria-orientation={orientation}
+  aria-label={labelText || undefined}
+>
+  {#if hasLabel && orientation === 'horizontal'}
+    <span class="divider__line" aria-hidden="true"></span>
+    <span class="divider__label">{labelText}</span>
+    <span class="divider__line" aria-hidden="true"></span>
+  {:else}
+    <span class="divider__line" aria-hidden="true"></span>
+  {/if}
+</div>