rizzo-css 0.0.11 → 0.0.13

package/scaffold/astro-app/src/components/Accordion.astro

@@ -0,0 +1,178 @@
+---
+import ChevronDown from './icons/ChevronDown.astro';
+
+interface AccordionItem {
+  id: string;
+  title: string;
+  content?: string;
+}
+
+interface Props {
+  items: AccordionItem[];
+  id?: string;
+  allowMultiple?: boolean;
+  defaultExpanded?: string | string[];
+  class?: string;
+}
+
+const {
+  items,
+  id,
+  allowMultiple = false,
+  defaultExpanded,
+  class: className = '',
+} = Astro.props;
+
+const accordionId = id || `accordion-${Math.random().toString(36).substr(2, 9)}`;
+
+const 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);
+};
+
+const defaultOpenIds = getDefaultExpanded();
+const classes = `accordion ${className}`.trim();
+let slotIndex = 0;
+---
+
+<div class={classes} data-accordion={accordionId} data-allow-multiple={allowMultiple ? 'true' : 'false'}>
+  {items.map((item) => {
+    const triggerId = `${accordionId}-trigger-${item.id}`;
+    const panelId = `${accordionId}-panel-${item.id}`;
+    const isExpanded = defaultOpenIds.has(item.id);
+    const useSlot = !item.content;
+    const currentSlotIndex = useSlot ? slotIndex++ : -1;
+
+    return (
+      <div class="accordion__item" data-accordion-item data-item-id={item.id}>
+        <h3 class="accordion__heading">
+          <button
+            type="button"
+            class={`accordion__trigger ${isExpanded ? 'accordion__trigger--expanded' : ''}`}
+            id={triggerId}
+            aria-expanded={isExpanded}
+            aria-controls={panelId}
+            data-accordion-trigger
+          >
+            <span class="accordion__title">{item.title}</span>
+            <ChevronDown class="accordion__icon" width={16} height={16} aria-hidden="true" />
+          </button>
+        </h3>
+        <div
+          class={`accordion__panel ${isExpanded ? 'accordion__panel--expanded' : ''}`}
+          id={panelId}
+          role="region"
+          aria-labelledby={triggerId}
+          hidden={!isExpanded}
+          data-accordion-panel
+        >
+          <div class="accordion__panel-inner">
+            {item.content ? (
+              <div class="accordion__panel-content" set:html={item.content} />
+            ) : (
+              <div class="accordion__panel-content accordion__panel-slot" data-accordion-slot-index={currentSlotIndex}>
+                <!-- Slot content distributed by script -->
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  })}
+  <!-- Slot content for distribution (same order as items) -->
+  <div class="accordion__slot-content" style="display: none;">
+    <slot />
+  </div>
+</div>
+
+<script is:inline>
+  (function initAccordions() {
+    function initOne(accordion) {
+      if (accordion.dataset.accordionInit === 'true') return;
+      accordion.dataset.accordionInit = 'true';
+
+      const isMultiple = accordion.getAttribute('data-allow-multiple') === 'true';
+      const triggers = accordion.querySelectorAll('[data-accordion-trigger]');
+
+      const setExpanded = (trigger, expanded) => {
+        const panelId = trigger.getAttribute('aria-controls');
+        const panel = panelId ? accordion.querySelector('#' + CSS.escape(panelId)) : null;
+        trigger.setAttribute('aria-expanded', String(expanded));
+        trigger.classList.toggle('accordion__trigger--expanded', expanded);
+        if (panel) {
+          panel.classList.toggle('accordion__panel--expanded', expanded);
+          panel.hidden = !expanded;
+        }
+      };
+
+      const toggle = (trigger) => {
+        const expanded = trigger.getAttribute('aria-expanded') === 'true';
+        if (!isMultiple) {
+          triggers.forEach((t) => setExpanded(t, false));
+        }
+        setExpanded(trigger, !expanded);
+      };
+
+      triggers.forEach((trigger) => {
+        trigger.addEventListener('click', () => toggle(trigger));
+      });
+
+      triggers.forEach((trigger, index) => {
+        trigger.addEventListener('keydown', (e) => {
+          let targetIndex = index;
+          switch (e.key) {
+            case 'ArrowDown':
+              e.preventDefault();
+              targetIndex = Math.min(index + 1, triggers.length - 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 = triggers.length - 1;
+              break;
+            case 'Enter':
+            case ' ':
+              e.preventDefault();
+              toggle(trigger);
+              return;
+            default:
+              return;
+          }
+          if (targetIndex !== index) {
+            triggers[targetIndex].focus();
+          }
+        });
+      });
+
+      const slotContent = accordion.querySelector('.accordion__slot-content');
+      if (slotContent) {
+        const slotChildren = Array.from(slotContent.children);
+        slotChildren.forEach((child, index) => {
+          const slotPlaceholder = accordion.querySelector('[data-accordion-slot-index="' + index + '"]');
+          if (slotPlaceholder) {
+            slotPlaceholder.appendChild(child);
+          }
+        });
+        slotContent.remove();
+      }
+    }
+
+    function init() {
+      document.querySelectorAll('[data-accordion]').forEach(initOne);
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+  })();
+</script>

package/scaffold/astro-app/src/components/Alert.astro

@@ -0,0 +1,131 @@
+---
+import Close from './icons/Close.astro';
+
+interface Props {
+  variant?: 'success' | 'error' | 'warning' | 'info';
+  dismissible?: boolean;
+  autoDismiss?: number; // Duration in milliseconds (0 = disabled)
+  class?: string;
+  id?: string;
+}
+
+const {
+  variant = 'info',
+  dismissible = false,
+  autoDismiss = 0, // 0 means disabled
+  class: className = '',
+  id,
+} = Astro.props;
+
+const alertId = id || `alert-${Math.random().toString(36).substr(2, 9)}`;
+const variantClass = `alert--${variant}`;
+const classes = `alert ${variantClass} ${className}`.trim();
+
+// ARIA labels based on variant
+const ariaLabels = {
+  success: 'Success message',
+  error: 'Error message',
+  warning: 'Warning message',
+  info: 'Information message',
+};
+---
+
+<div
+  class={classes}
+  id={alertId}
+  role="alert"
+  aria-live="polite"
+  aria-atomic="true"
+  aria-label={ariaLabels[variant]}
+>
+  <div class="alert__content">
+    <slot />
+  </div>
+  {dismissible && (
+    <button
+      type="button"
+      class="alert__close"
+      aria-label="Dismiss alert"
+      data-alert-close
+      aria-controls={alertId}
+    >
+      <Close width={16} height={16} />
+    </button>
+  )}
+</div>
+
+<script define:vars={{ alertId, autoDismiss }}>
+  (function initAlert() {
+    const init = () => {
+      const alert = document.querySelector(`#${alertId}`);
+      if (!alert) {
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', init);
+          return;
+        }
+        return;
+      }
+      
+      // Skip if already initialized
+      if (alert.hasAttribute('data-alert-initialized')) return;
+      alert.setAttribute('data-alert-initialized', 'true');
+      
+      const closeBtn = alert.querySelector('[data-alert-close]');
+      
+      let closeAlert = () => {
+        // Announce dismissal to screen readers
+        const announcement = document.createElement('div');
+        announcement.setAttribute('role', 'status');
+        announcement.setAttribute('aria-live', 'polite');
+        announcement.className = 'sr-only';
+        announcement.textContent = 'Alert dismissed';
+        document.body.appendChild(announcement);
+        
+        // Remove alert with animation
+        alert.style.opacity = '0';
+        alert.style.transform = 'translateY(-10px)';
+        
+        setTimeout(() => {
+          alert.remove();
+          if (document.body.contains(announcement)) {
+            document.body.removeChild(announcement);
+          }
+        }, 200);
+      };
+      
+      // Auto-dismiss functionality
+      if (autoDismiss > 0) {
+        const timeoutId = setTimeout(() => {
+          closeAlert();
+        }, autoDismiss);
+        
+        // Clear timeout if user manually dismisses
+        if (closeBtn) {
+          const originalClose = closeAlert;
+          closeAlert = () => {
+            clearTimeout(timeoutId);
+            originalClose();
+          };
+        }
+      }
+      
+      if (closeBtn) {
+        closeBtn.addEventListener('click', closeAlert);
+        
+        // Keyboard support
+        closeBtn.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            closeAlert();
+          }
+        });
+      }
+    };
+    
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+  })();
+</script>

package/scaffold/astro-app/src/components/Avatar.astro

@@ -0,0 +1,59 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+  /** Image URL (when provided, shows image; otherwise shows initials or placeholder). For remote URLs, add the domain to image.domains in astro.config. */
+  src?: string;
+  /** Alt text for the image */
+  alt?: string;
+  /** Full name used to derive initials when no image (e.g. "Jane Doe" → "JD") */
+  name?: string;
+  /** Override initials when no image (e.g. "JD"); ignored if name is provided */
+  initials?: string;
+  /** Size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Shape */
+  shape?: 'circle' | 'square';
+  class?: string;
+}
+
+const {
+  src,
+  alt = '',
+  name = '',
+  initials: initialsProp = '',
+  size = 'md',
+  shape = 'circle',
+  class: className = '',
+} = Astro.props;
+
+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();
+}
+
+const displayInitials = name ? getInitials(name) : initialsProp;
+const sizeClass = `avatar--${size}`;
+const shapeClass = `avatar--${shape}`;
+const classes = `avatar ${sizeClass} ${shapeClass} ${className}`.trim();
+
+const sizePixels = size === 'sm' ? 32 : size === 'lg' ? 48 : 40;
+---
+
+<span class={classes} role="img" aria-label={alt || name || (displayInitials ? `Avatar: ${displayInitials}` : 'Avatar')}>
+  {src ? (
+    <Image
+      src={src}
+      alt={alt || name || ''}
+      width={sizePixels}
+      height={sizePixels}
+      class="avatar__img"
+    />
+  ) : (
+    <span class="avatar__initials" aria-hidden="true">
+      {displayInitials || '?'}
+    </span>
+  )}
+</span>

package/scaffold/astro-app/src/components/Badge.astro

@@ -0,0 +1,24 @@
+---
+interface Props {
+  variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+  size?: 'sm' | 'md' | 'lg';
+  pill?: boolean;
+  class?: string;
+}
+
+const {
+  variant = 'primary',
+  size = 'md',
+  pill = false,
+  class: className = '',
+} = Astro.props;
+
+const variantClass = `badge--${variant}`;
+const sizeClass = `badge--${size}`;
+const pillClass = pill ? 'badge--pill' : '';
+const classes = `badge ${variantClass} ${sizeClass} ${pillClass} ${className}`.trim();
+---
+
+<span class={classes}>
+  <slot />
+</span>

package/scaffold/astro-app/src/components/Breadcrumb.astro

@@ -0,0 +1,61 @@
+---
+import ChevronDown from './icons/ChevronDown.astro';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface Props {
+  items: BreadcrumbItem[];
+  separator?: 'chevron' | 'slash' | 'arrow' | string;
+  class?: string;
+}
+
+const {
+  items,
+  separator = 'chevron',
+  class: className = '',
+} = Astro.props;
+
+const separatorVariant =
+  separator === 'slash' ? 'breadcrumb--slash' :
+  separator === 'arrow' ? 'breadcrumb--arrow' :
+  'breadcrumb--chevron';
+const classes = `breadcrumb ${separatorVariant} ${className}`.trim();
+
+const separatorChar = separator === 'slash' ? '/' : separator === 'arrow' ? '›' : typeof separator === 'string' ? separator : null;
+const useIcon = separator === 'chevron';
+---
+
+<nav class={classes} aria-label="Breadcrumb">
+  <ol class="breadcrumb__list">
+    {items.map((item, index) => {
+      const isLast = index === items.length - 1;
+      const isCurrent = isLast || !item.href;
+
+      return (
+        <li class={`breadcrumb__item ${isCurrent ? 'breadcrumb__item--current' : ''}`}>
+          {isCurrent ? (
+            <span class="breadcrumb__current" aria-current="page">
+              {item.label}
+            </span>
+          ) : (
+            <a class="breadcrumb__link" href={item.href}>
+              {item.label}
+            </a>
+          )}
+          {!isLast && (
+            <span class="breadcrumb__separator" aria-hidden="true">
+              {useIcon ? (
+                <ChevronDown class="breadcrumb__separator-icon" width={14} height={14} />
+              ) : (
+                separatorChar ?? '›'
+              )}
+            </span>
+          )}
+        </li>
+      );
+    })}
+  </ol>
+</nav>

package/scaffold/astro-app/src/components/Button.astro

@@ -0,0 +1,3 @@
+<button>
+	Click me
+</button>

package/scaffold/astro-app/src/components/Card.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+  variant?: 'default' | 'elevated' | 'outlined' | 'filled';
+  class?: string;
+}
+
+const {
+  variant = 'default',
+  class: className = '',
+} = Astro.props;
+
+const variantClass = variant !== 'default' ? `card--${variant}` : '';
+const classes = `card ${variantClass} ${className}`.trim();
+---
+
+<div class={classes}>
+  <slot />
+</div>

package/scaffold/astro-app/src/components/Checkbox.astro

@@ -0,0 +1,38 @@
+---
+interface Props {
+  id?: string;
+  name?: string;
+  value?: string;
+  checked?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  class?: string;
+  ariaDescribedby?: string;
+  ariaLabel?: string;
+}
+
+const {
+  id,
+  name,
+  value,
+  checked = false,
+  required = false,
+  disabled = false,
+  class: className = '',
+  ariaDescribedby,
+  ariaLabel,
+} = Astro.props;
+---
+
+<input
+  type="checkbox"
+  id={id}
+  name={name}
+  value={value}
+  checked={checked}
+  required={required}
+  disabled={disabled}
+  class={className}
+  aria-describedby={ariaDescribedby}
+  aria-label={ariaLabel}
+/>