rizzo-css 0.0.54 → 0.0.55

package/scaffold/svelte/ContextMenu.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    children?: Snippet;
+    trigger?: Snippet;
+  }
+
+  let { id: ctxId, class: className = '', children, trigger }: Props = $props();
+
+  const id = $derived(ctxId ?? `context-menu-${Math.random().toString(36).slice(2, 9)}`);
+  let open = $state(false);
+  let x = $state(0);
+  let y = $state(0);
+  let contentEl: HTMLDivElement;
+
+  function handleContextMenu(e: MouseEvent) {
+    e.preventDefault();
+    x = e.clientX;
+    y = e.clientY;
+    open = true;
+    requestAnimationFrame(() => document.addEventListener('click', closeMenu));
+  }
+
+  function closeMenu() {
+    open = false;
+    document.removeEventListener('click', closeMenu);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') closeMenu();
+  }
+
+  $effect(() => {
+    if (open && contentEl) {
+      contentEl.style.left = `${x}px`;
+      contentEl.style.top = `${y}px`;
+    }
+  });
+</script>
+
+<div class="context-menu {className}" data-context-menu {id}>
+  <div data-context-menu-trigger oncontextmenu={handleContextMenu}>
+    {@render trigger?.()}
+  </div>
+  <div
+    bind:this={contentEl}
+    class="context-menu__content {open ? 'context-menu__content--open' : ''}"
+    role="menu"
+    aria-hidden={!open}
+    hidden={!open}
+    data-context-menu-content
+    id="{id}-content"
+    onkeydown={handleKeydown}
+  >
+    {@render children?.()}
+  </div>
+</div>

package/scaffold/svelte/Dashboard.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Aria-label for the sidebar (e.g. "Dashboard navigation") */
+    sidebarLabel?: string;
+    /** Optional class for the root wrapper */
+    class?: string;
+    /** Main content */
+    children: Snippet;
+    /** Optional sidebar content; if not provided, default nav links are shown */
+    sidebar?: Snippet;
+  }
+  let {
+    sidebarLabel = 'Dashboard navigation',
+    class: className = '',
+    children,
+    sidebar,
+  }: Props = $props();
+
+  const classes = $derived(['dashboard', className].filter(Boolean).join(' ').trim());
+</script>
+
+<div class={classes}>
+  <aside class="dashboard__sidebar" aria-label={sidebarLabel}>
+    {#if sidebar}
+      {@render sidebar()}
+    {:else}
+      <nav class="dashboard__nav">
+        <a href="/" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
+        <a href="/" class="dashboard__nav-link">Items</a>
+        <a href="/" class="dashboard__nav-link">Settings</a>
+      </nav>
+    {/if}
+  </aside>
+  <main id="main-content" class="dashboard__main">
+    {@render children()}
+  </main>
+</div>
+
+<style>
+  .dashboard {
+    display: flex;
+    min-height: 100vh;
+  }
+  .dashboard__sidebar {
+    width: 16rem;
+    flex-shrink: 0;
+    border-right: 1px solid var(--border);
+    padding: var(--spacing-4);
+    background: var(--background-alt);
+  }
+  .dashboard__nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+  }
+  .dashboard__nav-link {
+    display: block;
+    padding: var(--spacing-2) var(--spacing-3);
+    border-radius: var(--radius-md);
+    color: var(--text);
+    text-decoration: none;
+  }
+  .dashboard__nav-link:hover {
+    background: var(--background);
+  }
+  .dashboard__nav-link--active {
+    background: var(--accent);
+    color: var(--accent-text);
+  }
+  .dashboard__main {
+    flex: 1;
+    padding: var(--spacing-6);
+    overflow: auto;
+  }
+  @media (max-width: 768px) {
+    .dashboard {
+      flex-direction: column;
+    }
+    .dashboard__sidebar {
+      width: 100%;
+      border-right: none;
+      border-bottom: 1px solid var(--border);
+    }
+  }
+</style>

package/scaffold/svelte/Empty.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title?: string;
+    description?: string;
+    class?: string;
+    icon?: Snippet;
+    action?: Snippet;
+  }
+
+  let {
+    title = 'No results',
+    description,
+    class: className = '',
+    icon,
+    action,
+  }: Props = $props();
+</script>
+
+<div class="empty {className}">
+  {#if icon}
+    <div class="empty__icon">
+      {@render icon()}
+    </div>
+  {/if}
+  <h3 class="empty__title">{title}</h3>
+  {#if description}
+    <p class="empty__description">{description}</p>
+  {/if}
+  {#if action}
+    <div class="empty__action">
+      {@render action()}
+    </div>
+  {/if}
+</div>

package/scaffold/svelte/HoverCard.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    id?: string;
+    openDelay?: number;
+    closeDelay?: number;
+    open?: boolean;
+    class?: string;
+    children?: Snippet;
+    trigger?: Snippet;
+  }
+
+  let {
+    id: hoverId,
+    openDelay = 200,
+    closeDelay = 100,
+    open = $bindable(false),
+    class: className = '',
+    children,
+    trigger,
+  }: Props = $props();
+
+  const id = $derived(hoverId ?? `hover-card-${Math.random().toString(36).slice(2, 9)}`);
+  let openT: ReturnType<typeof setTimeout> | null = null;
+  let closeT: ReturnType<typeof setTimeout> | null = null;
+
+  function openContent() {
+    if (closeT) clearTimeout(closeT);
+    openT = setTimeout(() => (open = true), openDelay);
+  }
+
+  function closeContent() {
+    if (openT) clearTimeout(openT);
+    closeT = setTimeout(() => (open = false), closeDelay);
+  }
+</script>
+
+<div class="hover-card {className}" data-hover-card {id}>
+  <div data-hover-card-trigger onmouseenter={openContent} onmouseleave={closeContent}>
+    {@render trigger?.()}
+  </div>
+  <div
+    class="hover-card__content {open ? 'hover-card__content--open' : ''}"
+    role="dialog"
+    aria-hidden={!open}
+    hidden={!open}
+    data-hover-card-content
+    id="{id}-content"
+    onmouseenter={openContent}
+    onmouseleave={closeContent}
+  >
+    {@render children?.()}
+  </div>
+</div>

package/scaffold/svelte/Kbd.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+  const classes = $derived(['kbd', className].filter(Boolean).join(' '));
+</script>
+
+<kbd class={classes}>{@render children?.()}</kbd>

package/scaffold/svelte/Label.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    for?: string;
+    required?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { for: forId, required = false, class: className = '', children }: Props = $props();
+  const classes = $derived(['label', required ? 'label--required' : '', className].filter(Boolean).join(' '));
+</script>
+
+{#if forId}
+  <label for={forId} class={classes}>{@render children?.()}</label>
+{:else}
+  <span class={classes}>{@render children?.()}</span>
+{/if}

package/scaffold/svelte/Popover.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    id?: string;
+    open?: boolean;
+    class?: string;
+    children?: Snippet;
+    trigger?: Snippet;
+  }
+
+  let {
+    id: popoverId,
+    open = $bindable(false),
+    class: className = '',
+    children,
+    trigger,
+  }: Props = $props();
+
+  const id = $derived(popoverId ?? `popover-${Math.random().toString(36).slice(2, 9)}`);
+
+  function toggle(e: MouseEvent) {
+    e.preventDefault();
+    open = !open;
+  }
+
+  function handleClickOutside(e: MouseEvent) {
+    const target = e.target as Node;
+    if (target && !document.getElementById(id)?.contains(target)) open = false;
+  }
+
+  $effect(() => {
+    if (open) {
+      const t = setTimeout(() => document.addEventListener('click', handleClickOutside), 0);
+      return () => {
+        clearTimeout(t);
+        document.removeEventListener('click', handleClickOutside);
+      };
+    }
+  });
+</script>
+
+<div class="popover {className}" data-popover id={id}>
+  <button type="button" data-popover-trigger onclick={toggle}>
+    {@render trigger?.()}
+  </button>
+  <div
+    class="popover__content {open ? 'popover__content--open' : ''}"
+    role="dialog"
+    aria-modal="false"
+    aria-hidden={!open}
+    hidden={!open}
+    data-popover-content
+    id={`${id}-content`}
+    onkeydown={(e) => e.key === 'Escape' && (open = false)}
+  >
+    {@render children?.()}
+  </div>
+</div>

package/scaffold/svelte/ResizableHandle.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  interface Props {
+    withHandle?: boolean;
+    class?: string;
+  }
+
+  let { withHandle = false, class: className = '' }: Props = $props();
+</script>
+
+<div
+  class="resizable__handle {withHandle ? 'resizable__handle--with-handle' : ''} {className}"
+  data-resizable-handle
+></div>

package/scaffold/svelte/ResizablePane.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    defaultSize?: number;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { defaultSize = 50, class: className = '', children }: Props = $props();
+  const size = Math.min(100, Math.max(0, defaultSize));
+</script>
+
+<div class="resizable__pane {className}" data-resizable-pane style="flex: 1 1 {size}%">
+  {@render children?.()}
+</div>

package/scaffold/svelte/ResizablePaneGroup.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    id?: string;
+    direction?: 'horizontal' | 'vertical';
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { id: groupId, direction = 'horizontal', class: className = '', children }: Props = $props();
+
+  const id = $derived(groupId ?? `resizable-${Math.random().toString(36).slice(2, 9)}`);
+  let rootEl: HTMLDivElement;
+
+  function getSize(el: Element): number {
+    const style = getComputedStyle(el);
+    const basis = style.flexBasis;
+    if (basis?.endsWith('%')) return parseFloat(basis);
+    const rect = el.getBoundingClientRect();
+    const parent = el.parentElement;
+    if (!parent) return 50;
+    const parentRect = parent.getBoundingClientRect();
+    return direction === 'horizontal'
+      ? (rect.width / parentRect.width) * 100
+      : (rect.height / parentRect.height) * 100;
+  }
+
+  function initResize() {
+    const root = rootEl;
+    if (!root) return;
+    const panes = Array.from(root.querySelectorAll('[data-resizable-pane]'));
+    const handles = Array.from(root.querySelectorAll('[data-resizable-handle]'));
+    if (panes.length < 2 || handles.length !== panes.length - 1) return;
+
+    function setSizes(pct1: number, pct2: number, idx: number) {
+      (panes[idx] as HTMLElement).style.flex = `1 1 ${pct1}%`;
+      (panes[idx + 1] as HTMLElement).style.flex = `1 1 ${pct2}%`;
+    }
+
+    handles.forEach((handle, i) => {
+      let startX: number, startY: number, startPct1: number, startPct2: number;
+      function onMove(e: MouseEvent) {
+        const parent = root.getBoundingClientRect();
+        const delta =
+          direction === 'horizontal'
+            ? ((e.clientX - startX) / parent.width) * 100
+            : ((e.clientY - startY) / parent.height) * 100;
+        let p1 = startPct1 + delta;
+        let p2 = startPct2 - delta;
+        const min = 10;
+        if (p1 < min) {
+          p1 = min;
+          p2 = 100 - min;
+        }
+        if (p2 < min) {
+          p2 = min;
+          p1 = 100 - min;
+        }
+        setSizes(p1, p2, i);
+      }
+      function onUp() {
+        document.removeEventListener('mousemove', onMove as EventListener);
+        document.removeEventListener('mouseup', onUp);
+      }
+      handle.addEventListener('mousedown', (e: Event) => {
+        const ev = e as MouseEvent;
+        ev.preventDefault();
+        startX = ev.clientX;
+        startY = ev.clientY;
+        startPct1 = getSize(panes[i]);
+        startPct2 = getSize(panes[i + 1]);
+        document.addEventListener('mousemove', onMove as EventListener);
+        document.addEventListener('mouseup', onUp);
+      });
+    });
+  }
+
+  $effect(() => {
+    if (rootEl) initResize();
+  });
+</script>
+
+<div
+  bind:this={rootEl}
+  class="resizable__pane-group resizable__pane-group--{direction} {className}"
+  {id}
+  data-resizable-group
+  data-direction={direction}
+>
+  {@render children?.()}
+</div>

package/scaffold/svelte/ScrollArea.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    orientation?: 'vertical' | 'horizontal';
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { orientation = 'vertical', class: className = '', children }: Props = $props();
+  const horizontal = $derived(orientation === 'horizontal');
+</script>
+
+<div class="scroll-area {horizontal ? 'scroll-area--horizontal' : ''} {className}">
+  <div class="scroll-area__viewport" tabindex="0">
+    {@render children?.()}
+  </div>
+</div>

package/scaffold/svelte/Separator.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+  }
+
+  let { orientation = 'horizontal', class: className = '' }: Props = $props();
+</script>
+
+<div
+  class="separator separator--{orientation} {className}"
+  role="separator"
+  aria-orientation={orientation}
+></div>

package/scaffold/svelte/Sheet.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Close from './icons/Close.svelte';
+
+  interface Props {
+    id?: string;
+    title?: string;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    open?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    id: sheetId,
+    title,
+    side = 'right',
+    open = $bindable(false),
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const id = $derived(sheetId ?? `sheet-${Math.random().toString(36).slice(2, 9)}`);
+
+  function close() {
+    open = false;
+  }
+</script>
+
+<div
+  class="sheet__overlay {open ? 'sheet__overlay--open' : ''}"
+  data-sheet-overlay
+  aria-hidden={!open}
+  id={`${id}-overlay`}
+  onclick={close}
+  role="presentation"
+></div>
+<div
+  class="sheet sheet--{side} {open ? 'sheet--open' : ''} {className}"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby={title ? `${id}-title` : undefined}
+  aria-hidden={!open}
+  {id}
+  data-sheet
+  hidden={!open}
+  onkeydown={(e) => e.key === 'Escape' && close()}
+>
+  <div class="sheet__content">
+    {#if title}
+      <div class="sheet__header">
+        <h2 id={`${id}-title`} class="sheet__title">{title}</h2>
+        <button type="button" class="sheet__close" aria-label="Close" onclick={close}>
+          <Close width={20} height={20} />
+        </button>
+      </div>
+    {/if}
+    <div class="sheet__body">
+      {@render children?.()}
+    </div>
+  </div>
+</div>

package/scaffold/svelte/Skeleton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'text' | 'circle' | 'rect' | 'default';
+    label?: string;
+    class?: string;
+  }
+  let { variant = 'default', label = 'Loading', class: className = '' }: Props = $props();
+  const variantClass = $derived(variant !== 'default' ? `skeleton--${variant}` : '');
+  const classes = $derived(['skeleton', variantClass, className].filter(Boolean).join(' ').trim());
+  const isDecorative = $derived(label === '');
+</script>
+
+<span
+  class={classes}
+  role={isDecorative ? undefined : 'status'}
+  aria-label={isDecorative ? undefined : label}
+  aria-busy={isDecorative ? undefined : 'true'}
+  aria-hidden={isDecorative ? 'true' : undefined}
+></span>

package/scaffold/svelte/Slider.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  interface Props {
+    id?: string;
+    name?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    disabled?: boolean;
+    /** Accessible name for the range input (required for axe / WCAG). */
+    ariaLabel?: string;
+    class?: string;
+  }
+
+  let {
+    id: sliderId,
+    name,
+    min = 0,
+    max = 100,
+    step = 1,
+    value = $bindable(min),
+    disabled = false,
+    ariaLabel,
+    class: className = '',
+  }: Props = $props();
+
+  const id = $derived(sliderId ?? `slider-${Math.random().toString(36).slice(2, 9)}`);
+  const pct = $derived(Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)));
+
+  function handleInput(e: Event) {
+    const t = e.currentTarget as HTMLInputElement;
+    if (t) value = parseFloat(t.value);
+  }
+</script>
+
+<div class="slider {className}" data-slider>
+  <input
+    type="range"
+    {id}
+    {name}
+    class="slider__input"
+    {min}
+    {max}
+    {step}
+    bind:value
+    {disabled}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuenow={value}
+    aria-label={ariaLabel}
+    data-slider-input
+    oninput={handleInput}
+  />
+  <div class="slider__track" aria-hidden="true">
+    <div class="slider__fill" data-slider-fill style="width: {pct}%"></div>
+  </div>
+</div>

package/scaffold/svelte/SoundEffects.svelte

@@ -23,6 +23,9 @@
     if (!target) return;
     soundEffects = target.checked;
     localStorage?.setItem('soundEffects', target.checked ? 'true' : 'false');
+    if (target.checked && typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent('rizzo-sound-effects-change'));
+    }
   }
 </script>
 

package/scaffold/svelte/Switch.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  interface Props {
+    id?: string;
+    name?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    class?: string;
+  }
+  let {
+    id,
+    name,
+    checked = $bindable(false),
+    disabled = false,
+    label,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<label class="switch {className}" for={id}>
+  <input
+    type="checkbox"
+    {id}
+    {name}
+    bind:checked
+    {disabled}
+    class="switch__input"
+    role="switch"
+    aria-checked={checked}
+  />
+  <span class="switch__track" aria-hidden="true">
+    <span class="switch__thumb"></span>
+  </span>
+  {#if label}<span class="switch__label">{label}</span>{/if}
+</label>

package/scaffold/svelte/Tabs.svelte

@@ -92,7 +92,7 @@
         onkeydown={(e) => handleKeydown(e, index)}
       >
         {#if tab.icon}
-          <img src={tab.icon} alt="" class="tabs__tab-icon" width="20" height="20" />
+          <img src={tab.icon} alt="" class="tabs__tab-icon" width="20" height="20" loading="lazy" aria-hidden="true" />
         {/if}
         {tab.label}
       </span>