rizzo-css 0.0.12 → 0.0.14

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>

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>