rizzo-css 0.0.11 → 0.0.13

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

@@ -0,0 +1,254 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import ChevronDown from './icons/ChevronDown.svelte';
+
+  export interface MenuItem {
+    label: string;
+    value?: string;
+    href?: string;
+    onClick?: (value: string) => void;
+    disabled?: boolean;
+    separator?: boolean;
+    submenu?: MenuItem[];
+  }
+
+  interface Props {
+    trigger: string;
+    items: MenuItem[];
+    id?: string;
+    class?: string;
+    position?: 'left' | 'right';
+    align?: 'start' | 'end';
+  }
+
+  let {
+    trigger,
+    items,
+    id,
+    class: className = '',
+    position = 'left',
+    align = 'start',
+  }: Props = $props();
+
+  const fallbackId = `dropdown-${Math.random().toString(36).slice(2, 11)}`;
+  const dropdownId = $derived(id ?? fallbackId);
+  const menuId = $derived(`${dropdownId}-menu`);
+  const triggerId = $derived(`${dropdownId}-trigger`);
+
+  let open = $state(false);
+  let openSubmenuIndex = $state<number | null>(null);
+  let menuEl: HTMLDivElement;
+  let triggerEl: HTMLButtonElement;
+
+  const classes = $derived(['dropdown', className].filter(Boolean).join(' ').trim());
+  const menuClasses = $derived(`dropdown__menu dropdown__menu--${position} dropdown__menu--${align}`);
+
+  function closeMenu() {
+    open = false;
+    openSubmenuIndex = null;
+  }
+
+  function toggleMenu() {
+    open = !open;
+    if (!open) openSubmenuIndex = null;
+  }
+
+  function toggleSubmenu(index: number) {
+    openSubmenuIndex = openSubmenuIndex === index ? null : index;
+  }
+
+  function handleItemClick(item: MenuItem, e: MouseEvent) {
+    if (item.separator || item.disabled) return;
+    if (item.submenu?.length) {
+      e.preventDefault();
+      return;
+    }
+    if (item.href) {
+      window.location.href = item.href;
+    }
+    if (item.onClick) {
+      item.onClick(item.value ?? item.label);
+    }
+    closeMenu();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!open) return;
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      closeMenu();
+      triggerEl?.focus();
+    }
+  }
+
+  function handleClickOutside(e: MouseEvent) {
+    if (menuEl && triggerEl && !menuEl.contains(e.target as Node) && !triggerEl.contains(e.target as Node)) {
+      closeMenu();
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener('keydown', handleKeydown);
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('keydown', handleKeydown);
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+</script>
+
+<div class={classes} data-dropdown={dropdownId}>
+  <button
+    bind:this={triggerEl}
+    type="button"
+    class="dropdown__trigger"
+    id={triggerId}
+    aria-expanded={open}
+    aria-haspopup="true"
+    aria-controls={menuId}
+    aria-label={trigger}
+    onclick={toggleMenu}
+    onkeydown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        toggleMenu();
+      }
+      if (e.key === 'ArrowDown' && !open) {
+        e.preventDefault();
+        open = true;
+      }
+    }}
+  >
+    <span class="dropdown__trigger-text">{trigger}</span>
+    <ChevronDown class="dropdown__icon" width={16} height={16} />
+  </button>
+
+  <div
+    bind:this={menuEl}
+    class="{menuClasses} {open ? 'dropdown__menu--open' : ''}"
+    id={menuId}
+    role="menu"
+    aria-labelledby={triggerId}
+    aria-label="{trigger} menu"
+    aria-orientation="vertical"
+    aria-hidden={!open}
+    tabindex="-1"
+  >
+    {#each items as item, index}
+      {#if item.separator}
+        <div class="dropdown__separator" role="separator"></div>
+      {:else}
+        {@const hasSubmenu = item.submenu && item.submenu.length > 0}
+        {@const isSubmenuOpen = openSubmenuIndex === index}
+        <div class="dropdown__item-wrapper" class:dropdown__item-wrapper--has-submenu={hasSubmenu}>
+          {#if item.href && !hasSubmenu}
+            <a
+              class="dropdown__item"
+              class:dropdown__item--disabled={item.disabled}
+              role="menuitem"
+              href={item.href}
+              aria-label={item.label}
+              aria-disabled={item.disabled ? 'true' : undefined}
+              tabindex={open ? 0 : -1}
+              onclick={(e) => {
+                if (item.disabled) e.preventDefault();
+                else closeMenu();
+              }}
+            >
+              <span>{item.label}</span>
+            </a>
+          {:else}
+            <div
+              class="dropdown__item"
+              class:dropdown__item--disabled={item.disabled}
+              class:dropdown__item--has-submenu={hasSubmenu}
+              role="menuitem"
+              aria-disabled={item.disabled ? 'true' : undefined}
+              aria-expanded={hasSubmenu ? isSubmenuOpen : undefined}
+              aria-haspopup={hasSubmenu ? 'true' : undefined}
+              tabindex={open ? 0 : -1}
+              onclick={(e) => {
+                if (item.disabled) return;
+                if (hasSubmenu) {
+                  e.preventDefault();
+                  toggleSubmenu(index);
+                } else {
+                  handleItemClick(item, e);
+                }
+              }}
+              onkeydown={(e) => {
+                if (item.disabled) return;
+                if (hasSubmenu && (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowRight')) {
+                  e.preventDefault();
+                  toggleSubmenu(index);
+                } else if (!hasSubmenu && (e.key === 'Enter' || e.key === ' ')) {
+                  e.preventDefault();
+                  handleItemClick(item, e as unknown as MouseEvent);
+                }
+              }}
+            >
+              <span>{item.label}</span>
+              {#if hasSubmenu}
+                <ChevronDown class="dropdown__item-arrow" width={12} height={12} />
+              {/if}
+            </div>
+          {/if}
+          {#if hasSubmenu && item.submenu}
+            <div
+              class="dropdown__submenu"
+              class:dropdown__submenu--open={isSubmenuOpen}
+              role="menu"
+              aria-label="{item.label} submenu"
+              aria-hidden={!isSubmenuOpen}
+            >
+              {#each item.submenu as subItem}
+                {#if subItem.separator}
+                  <div class="dropdown__separator" role="separator"></div>
+                {:else if subItem.href}
+                  <a
+                    class="dropdown__item dropdown__submenu-item"
+                    class:dropdown__item--disabled={subItem.disabled}
+                    role="menuitem"
+                    href={subItem.href}
+                    aria-label={subItem.label}
+                    aria-disabled={subItem.disabled ? 'true' : undefined}
+                    onclick={(e) => {
+                      if (subItem.disabled) e.preventDefault();
+                      else closeMenu();
+                    }}
+                  >
+                    <span>{subItem.label}</span>
+                  </a>
+                {:else}
+                  <div
+                    class="dropdown__item dropdown__submenu-item"
+                    class:dropdown__item--disabled={subItem.disabled}
+                    role="menuitem"
+                    aria-disabled={subItem.disabled ? 'true' : undefined}
+                    tabindex={open ? 0 : -1}
+                    onclick={(e) => {
+                      if (!subItem.disabled) {
+                        subItem.onClick?.(subItem.value ?? subItem.label);
+                        closeMenu();
+                      }
+                    }}
+                    onkeydown={(e) => {
+                      if (subItem.disabled) return;
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        subItem.onClick?.(subItem.value ?? subItem.label);
+                        closeMenu();
+                      }
+                    }}
+                  >
+                    <span>{subItem.label}</span>
+                  </div>
+                {/if}
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {/if}
+    {/each}
+  </div>
+</div>

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    label?: string;
+    labelFor?: string;
+    required?: boolean;
+    help?: string;
+    error?: string;
+    success?: string;
+    class?: string;
+    children?: Snippet;
+  }
+  let {
+    label,
+    labelFor,
+    required = false,
+    help,
+    error,
+    success,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const errorId = $derived(labelFor && error ? `${labelFor}-error` : undefined);
+  const helpId = $derived(labelFor && help ? `${labelFor}-help` : undefined);
+</script>
+
+<div class="form-group {className}">
+  {#if label}
+    {#if labelFor}
+      <label for={labelFor} class="form-group__label {required ? 'required' : ''}">
+        {label}
+      </label>
+    {:else}
+      <span class="form-group__label {required ? 'required' : ''}">
+        {label}
+      </span>
+    {/if}
+  {/if}
+  {@render children?.()}
+  {#if help}
+    <span id={helpId} class="form-group__help">{help}</span>
+  {/if}
+  {#if error}
+    <span id={errorId} class="form-error" role="alert">{error}</span>
+  {/if}
+  {#if success}
+    <span class="form-success" role="status">{success}</span>
+  {/if}
+</div>

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

@@ -0,0 +1,59 @@
+<script lang="ts">
+  interface Props {
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week';
+    id?: string;
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    autocomplete?: string;
+    size?: 'sm' | 'md' | 'lg';
+    error?: boolean;
+    success?: boolean;
+    class?: string;
+    ariaDescribedby?: string;
+    ariaInvalid?: boolean | 'true' | 'false';
+  }
+  let {
+    type = 'text',
+    id,
+    name,
+    value = $bindable(''),
+    placeholder,
+    required = false,
+    disabled = false,
+    readonly = false,
+    autocomplete,
+    size = 'md',
+    error = false,
+    success = false,
+    class: className = '',
+    ariaDescribedby,
+    ariaInvalid,
+  }: Props = $props();
+
+  const sizeClass = $derived(size !== 'md' ? `form-input--${size}` : '');
+  const errorClass = $derived(error ? 'form-input--error' : '');
+  const successClass = $derived(success ? 'form-input--success' : '');
+  const classes = $derived(
+    ['form-input', sizeClass, errorClass, successClass, className].filter(Boolean).join(' ').trim()
+  );
+  const invalid = $derived(error || ariaInvalid === true || ariaInvalid === 'true');
+</script>
+
+<input
+  {type}
+  {id}
+  {name}
+  bind:value
+  {placeholder}
+  {required}
+  {disabled}
+  {readonly}
+  autocomplete={autocomplete}
+  class={classes}
+  aria-invalid={invalid ? 'true' : 'false'}
+  aria-describedby={ariaDescribedby}
+/>

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

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    id?: string;
+    title?: string;
+    size?: 'sm' | 'md' | 'lg';
+    open?: boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    class?: string;
+    children?: Snippet;
+    footer?: Snippet;
+  }
+
+  let {
+    id,
+    title = 'Modal',
+    size = 'md',
+    open = $bindable(false),
+    closeOnOverlayClick = true,
+    closeOnEscape = true,
+    class: className = '',
+    children,
+    footer,
+  }: Props = $props();
+
+  const modalId = $derived(id ?? `modal-${Math.random().toString(36).slice(2, 11)}`);
+  const sizeClass = $derived(size !== 'md' ? `modal--${size}` : '');
+  const classes = $derived(['modal', sizeClass, className].filter(Boolean).join(' ').trim());
+
+  let overlayEl: HTMLDivElement;
+  let modalEl: HTMLDivElement;
+  let previousActiveElement: HTMLElement | null = null;
+  let keyHandler: ((e: KeyboardEvent) => void) | null = null;
+
+  const focusableSelectors = [
+    'button:not([disabled])',
+    'a[href]',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+  ].join(', ');
+
+  function getFocusableElements(container: HTMLElement): HTMLElement[] {
+    return Array.from(container.querySelectorAll<HTMLElement>(focusableSelectors));
+  }
+
+  function close() {
+    open = false;
+    if (keyHandler) {
+      document.removeEventListener('keydown', keyHandler);
+      keyHandler = null;
+    }
+    if (previousActiveElement) {
+      previousActiveElement.focus();
+      previousActiveElement = null;
+    }
+  }
+
+  function setupFocusTrap() {
+    if (!modalEl) return;
+    keyHandler = (e: KeyboardEvent) => {
+      if (!open) return;
+      if (e.key === 'Escape' && closeOnEscape) {
+        e.preventDefault();
+        close();
+        return;
+      }
+      if (e.key === 'Tab') {
+        const focusable = getFocusableElements(modalEl);
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement as HTMLElement | null;
+        if (e.shiftKey) {
+          if (active === first || !modalEl.contains(active)) {
+            e.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (active === last || !modalEl.contains(active)) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      }
+    };
+    document.addEventListener('keydown', keyHandler);
+  }
+
+  function openModal() {
+    previousActiveElement = document.activeElement as HTMLElement | null;
+    const focusable = modalEl ? getFocusableElements(modalEl) : [];
+    const closeBtn = modalEl?.querySelector<HTMLElement>('[data-modal-close]');
+    const first = focusable[0] ?? closeBtn;
+    tick().then(() => {
+      first?.focus();
+      setupFocusTrap();
+    });
+  }
+
+  $effect(() => {
+    if (open && modalEl) {
+      openModal();
+    } else {
+      if (keyHandler) {
+        document.removeEventListener('keydown', keyHandler);
+        keyHandler = null;
+      }
+    }
+  });
+
+  function handleOverlayClick(e: MouseEvent) {
+    if (closeOnOverlayClick && e.target === overlayEl) close();
+  }
+</script>
+
+<div
+  bind:this={overlayEl}
+  class="modal__overlay"
+  data-modal-overlay
+  aria-hidden={!open}
+  id="{modalId}-overlay"
+  onclick={handleOverlayClick}
+  role="presentation"
+></div>
+
+<div
+  bind:this={modalEl}
+  class={classes}
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="{modalId}-title"
+  aria-hidden={!open}
+  id={modalId}
+  data-modal
+  data-open={open || undefined}
+>
+  <div class="modal__header">
+    <h2 id="{modalId}-title" class="modal__title">{title}</h2>
+    <button type="button" class="modal__close" aria-label="Close modal" data-modal-close onclick={close}>
+      <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="M18 6L6 18" />
+        <path d="M6 6l12 12" />
+      </svg>
+    </button>
+  </div>
+  <div class="modal__body">
+    {@render children?.()}
+  </div>
+  <div class="modal__footer">
+    {@render footer?.()}
+  </div>
+</div>

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

@@ -0,0 +1,93 @@
+<script lang="ts">
+  function buildHref(template: string, page: number): string {
+    return template.replace(/\{page\}/g, String(page));
+  }
+
+  function getPageItems(total: number, current: number, maxVisible: number): (number | 'ellipsis')[] {
+    if (total <= 1) return [];
+    if (total <= maxVisible) {
+      return Array.from({ length: total }, (_, i) => i + 1);
+    }
+    const items: (number | 'ellipsis')[] = [1];
+    const delta = Math.max(0, Math.floor((maxVisible - 2) / 2));
+    const start = Math.max(2, current - delta);
+    const end = Math.min(total - 1, current + delta);
+    if (start > 2) items.push('ellipsis');
+    for (let p = start; p <= end; p++) {
+      if (p !== 1 && p !== total) items.push(p);
+    }
+    if (end < total - 1) items.push('ellipsis');
+    if (total > 1) items.push(total);
+    return items;
+  }
+
+  interface Props {
+    currentPage: number;
+    totalPages: number;
+    hrefTemplate?: string;
+    showFirstLast?: boolean;
+    maxVisible?: number;
+    class?: string;
+  }
+  let {
+    currentPage,
+    totalPages,
+    hrefTemplate = '?page={page}',
+    showFirstLast = true,
+    maxVisible = 5,
+    class: className = '',
+  }: Props = $props();
+
+  const classes = $derived(['pagination', className].filter(Boolean).join(' ').trim());
+  const pageItems = $derived(getPageItems(totalPages, currentPage, maxVisible));
+  const hasPrev = $derived(currentPage > 1);
+  const hasNext = $derived(currentPage < totalPages);
+</script>
+
+<nav class={classes} aria-label="Pagination">
+  <ul class="pagination__list">
+    {#if showFirstLast && totalPages > 1}
+      <li class="pagination__item">
+        {#if hasPrev}
+          <a class="pagination__link pagination__link--prev" href={buildHref(hrefTemplate, 1)} aria-label="First page">First</a>
+        {:else}
+          <span class="pagination__link pagination__link--prev pagination__link--disabled" aria-disabled="true">First</span>
+        {/if}
+      </li>
+    {/if}
+    <li class="pagination__item">
+      {#if hasPrev}
+        <a class="pagination__link pagination__link--prev" href={buildHref(hrefTemplate, currentPage - 1)} aria-label="Previous page">Previous</a>
+      {:else}
+        <span class="pagination__link pagination__link--prev pagination__link--disabled" aria-disabled="true">Previous</span>
+      {/if}
+    </li>
+    {#each pageItems as item}
+      <li class="pagination__item">
+        {#if item === 'ellipsis'}
+          <span class="pagination__ellipsis" aria-hidden="true">…</span>
+        {:else if item === currentPage}
+          <span class="pagination__link pagination__link--current" aria-current="page">{item}</span>
+        {:else}
+          <a class="pagination__link" href={buildHref(hrefTemplate, item)} aria-label="Page {item}">{item}</a>
+        {/if}
+      </li>
+    {/each}
+    <li class="pagination__item">
+      {#if hasNext}
+        <a class="pagination__link pagination__link--next" href={buildHref(hrefTemplate, currentPage + 1)} aria-label="Next page">Next</a>
+      {:else}
+        <span class="pagination__link pagination__link--next pagination__link--disabled" aria-disabled="true">Next</span>
+      {/if}
+    </li>
+    {#if showFirstLast && totalPages > 1}
+      <li class="pagination__item">
+        {#if hasNext}
+          <a class="pagination__link pagination__link--next" href={buildHref(hrefTemplate, totalPages)} aria-label="Last page">Last</a>
+        {:else}
+          <span class="pagination__link pagination__link--next pagination__link--disabled" aria-disabled="true">Last</span>
+        {/if}
+      </li>
+    {/if}
+  </ul>
+</nav>

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

@@ -0,0 +1,58 @@
+<script lang="ts">
+  interface Props {
+    value?: number;
+    max?: number;
+    variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'md' | 'lg';
+    showLabel?: boolean;
+    indeterminate?: boolean;
+    label?: string;
+    class?: string;
+  }
+  let {
+    value = 0,
+    max = 100,
+    variant = 'primary',
+    size = 'md',
+    showLabel = false,
+    indeterminate = false,
+    label,
+    class: className = '',
+  }: Props = $props();
+
+  const safeMax = $derived(max <= 0 ? 100 : max);
+  const clampedValue = $derived(indeterminate ? 0 : Math.max(0, Math.min(value, safeMax)));
+  const percentage = $derived(indeterminate ? 0 : Math.round((clampedValue / safeMax) * 100));
+
+  const classes = $derived(
+    [
+      'progress',
+      `progress--${variant}`,
+      `progress--${size}`,
+      indeterminate ? 'progress--indeterminate' : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+      .trim()
+  );
+
+  const barStyle = $derived(indeterminate ? {} : { width: `${percentage}%` });
+</script>
+
+<div
+  class={classes}
+  role="progressbar"
+  aria-valuemin={0}
+  aria-valuemax={safeMax}
+  aria-label={label ?? (indeterminate ? 'Loading' : undefined)}
+  aria-valuetext={indeterminate ? 'Loading' : undefined}
+  aria-valuenow={indeterminate ? undefined : clampedValue}
+>
+  <div class="progress__track">
+    <div class="progress__bar" style={barStyle}></div>
+  </div>
+  {#if showLabel && !indeterminate}
+    <span class="progress__label" aria-hidden="true">{percentage}%</span>
+  {/if}
+</div>