rizzo-css 0.0.12 → 0.0.14

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>

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  interface Props {
+    id?: string;
+    name?: string;
+    value?: string;
+    /** Bind the selected value for the radio group. Use the same bound variable for all radios in the group. */
+    group?: string;
+    required?: boolean;
+    disabled?: boolean;
+    class?: string;
+    ariaDescribedby?: string;
+    ariaLabel?: string;
+  }
+  let {
+    id,
+    name,
+    value = '',
+    group = $bindable(undefined as string | undefined),
+    required = false,
+    disabled = false,
+    class: className = '',
+    ariaDescribedby,
+    ariaLabel,
+  }: Props = $props();
+</script>
+
+<input
+  type="radio"
+  {id}
+  {name}
+  {value}
+  bind:group={group}
+  {required}
+  {disabled}
+  class={className}
+  aria-describedby={ariaDescribedby}
+  aria-label={ariaLabel}
+/>

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    id?: string;
+    name?: string;
+    value?: string;
+    required?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    error?: boolean;
+    success?: boolean;
+    class?: string;
+    ariaDescribedby?: string;
+    ariaInvalid?: boolean | 'true' | 'false';
+    children?: Snippet;
+  }
+  let {
+    id,
+    name,
+    value = $bindable(''),
+    required = false,
+    disabled = false,
+    size = 'md',
+    error = false,
+    success = false,
+    class: className = '',
+    ariaDescribedby,
+    ariaInvalid,
+    children,
+  }: 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>
+
+<select
+  {id}
+  {name}
+  bind:value
+  {required}
+  {disabled}
+  class={classes}
+  aria-invalid={invalid ? 'true' : 'false'}
+  aria-describedby={ariaDescribedby}
+>
+  {@render children?.()}
+</select>

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+  interface Props {
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+    label?: string;
+    class?: string;
+  }
+  let { size = 'md', variant = 'primary', label = 'Loading', class: className = '' }: Props = $props();
+  const classes = $derived(['spinner', `spinner--${size}`, `spinner--${variant}`, className].filter(Boolean).join(' ').trim());
+</script>
+
+<span class={classes} role="status" aria-label={label}>
+  <span class="spinner__ring" aria-hidden="true"></span>
+</span>

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

@@ -0,0 +1,158 @@
+<script lang="ts">
+  export interface TableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    type?: 'string' | 'number';
+  }
+
+  interface Props {
+    columns: TableColumn[];
+    data: Record<string, string | number>[];
+    caption?: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    filterPlaceholder?: string;
+    striped?: boolean;
+    class?: string;
+  }
+
+  let {
+    columns,
+    data,
+    caption,
+    sortable = true,
+    filterable = false,
+    filterPlaceholder = 'Filter table…',
+    striped = true,
+    class: className = '',
+  }: Props = $props();
+
+  const tableId = `table-${Math.random().toString(36).slice(2, 11)}`;
+  const classes = $derived(
+    ['table', striped ? 'table--striped' : '', sortable ? 'table--sortable' : '', filterable ? 'table--filterable' : '', className]
+      .filter(Boolean)
+      .join(' ')
+      .trim()
+  );
+
+  let sortColumnIndex = $state<number | null>(null);
+  let sortDirection = $state<'ascending' | 'descending'>('ascending');
+  let filterQuery = $state('');
+
+  const filteredData = $derived.by(() => {
+    if (!filterable || !filterQuery.trim()) return data;
+    const q = filterQuery.trim().toLowerCase();
+    return data.filter((row) =>
+      columns.some((col) => String(row[col.key] ?? '').toLowerCase().includes(q))
+    );
+  });
+
+  const sortedData = $derived.by(() => {
+    if (!sortable || sortColumnIndex === null) return filteredData;
+    const col = columns[sortColumnIndex];
+    const type = col?.type ?? 'string';
+    const dir = sortDirection === 'ascending' ? 1 : -1;
+    return [...filteredData].sort((a, b) => {
+      const aVal = a[col.key];
+      const bVal = b[col.key];
+      if (type === 'number') {
+        const aNum = parseFloat(String(aVal).replace(/[^0-9.-]/g, '')) || 0;
+        const bNum = parseFloat(String(bVal).replace(/[^0-9.-]/g, '')) || 0;
+        return dir * (aNum - bNum);
+      }
+      const cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true });
+      return dir * cmp;
+    });
+  });
+
+  function getSortState(colIndex: number): 'none' | 'ascending' | 'descending' {
+    if (sortColumnIndex !== colIndex) return 'none';
+    return sortDirection;
+  }
+
+  function handleSort(colIndex: number) {
+    if (sortColumnIndex === colIndex) {
+      sortDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
+    } else {
+      sortColumnIndex = colIndex;
+      sortDirection = 'ascending';
+    }
+  }
+</script>
+
+<div class={classes} data-table-id={tableId} data-table-sortable={sortable ? 'true' : undefined} data-table-filterable={filterable ? 'true' : undefined}>
+  {#if filterable}
+    <div class="table__filter-wrap">
+      <label for="{tableId}-filter" class="sr-only">Filter table</label>
+      <span class="table__filter-icon" aria-hidden="true">
+        <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" class="table__filter-icon-svg icon" aria-hidden="true">
+          <path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" />
+        </svg>
+      </span>
+      <input
+        type="search"
+        id="{tableId}-filter"
+        class="table__filter"
+        placeholder={filterPlaceholder}
+        aria-controls={tableId}
+        data-table-filter
+        autocomplete="off"
+        bind:value={filterQuery}
+      />
+    </div>
+  {/if}
+  <div class="table__wrapper">
+    <table class="table__table" id={tableId}>
+      {#if caption}
+        <caption class="table__caption">{caption}</caption>
+      {/if}
+      <thead class="table__head">
+        <tr class="table__row">
+          {#each columns as col, i}
+            {@const canSort = sortable && col.sortable !== false}
+            <th
+              class="table__cell table__cell--head"
+              scope="col"
+              data-column-index={i}
+              data-sortable={canSort ? 'true' : undefined}
+              data-type={col.type ?? 'string'}
+              aria-sort={canSort ? getSortState(i) : undefined}
+            >
+              {#if canSort}
+                <button
+                  type="button"
+                  class="table__sort-trigger"
+                  data-column-index={i}
+                  aria-label="Sort by {col.label}"
+                  onclick={() => handleSort(i)}
+                >
+                  <span class="table__cell-content">{col.label}</span>
+                  <span class="table__sort-icon" aria-hidden="true">
+                    <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" class="table__sort-icon-svg icon" aria-hidden="true">
+                      <path d="m7 15 5 5 5-5" />
+                      <path d="m7 9 5-5 5 5" />
+                    </svg>
+                  </span>
+                </button>
+              {:else}
+                <span class="table__cell-content">{col.label}</span>
+              {/if}
+            </th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody class="table__body">
+        {#each sortedData as row, rowIndex}
+          <tr class="table__row" data-row-index={rowIndex}>
+            {#each columns as col}
+              <td class="table__cell" data-column-key={col.key}>
+                {row[col.key] ?? ''}
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>