rizzo-css 0.0.11 → 0.0.13

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

@@ -0,0 +1,49 @@
+---
+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';
+}
+
+const {
+  id,
+  name,
+  value,
+  required = false,
+  disabled = false,
+  size = 'md',
+  error = false,
+  success = false,
+  class: className = '',
+  ariaDescribedby,
+  ariaInvalid,
+} = Astro.props;
+
+const sizeClass = size !== 'md' ? `form-input--${size}` : '';
+const errorClass = error ? 'form-input--error' : '';
+const successClass = success ? 'form-input--success' : '';
+const classes = `form-input ${sizeClass} ${errorClass} ${successClass} ${className}`.trim();
+
+const invalid = error || ariaInvalid === true || ariaInvalid === 'true';
+---
+
+<select
+  id={id}
+  name={name}
+  value={value}
+  required={required}
+  disabled={disabled}
+  class={classes}
+  aria-invalid={invalid ? 'true' : 'false'}
+  aria-describedby={ariaDescribedby}
+>
+  <slot />
+</select>

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

@@ -0,0 +1,382 @@
+---
+import ThemeSwitcher from './ThemeSwitcher.astro';
+import Close from './icons/Close.astro';
+
+interface Props {
+  open?: boolean;
+}
+
+const { open = false } = Astro.props;
+---
+
+<div class="settings" data-settings aria-hidden={open ? 'false' : 'true'}>
+  <div class="settings__overlay" data-settings-overlay aria-hidden="true"></div>
+  
+  <div class="settings__panel" role="dialog" aria-modal="true" aria-labelledby="settings-title" aria-hidden={open ? 'false' : 'true'}>
+    <div class="settings__header">
+      <h2 id="settings-title" class="settings__title">Settings</h2>
+      <button
+        class="settings__close"
+        type="button"
+        aria-label="Close settings"
+        data-settings-close
+      >
+        <Close width={20} height={20} />
+      </button>
+    </div>
+
+    <div class="settings__content">
+      <!-- Theme Section -->
+      <section class="settings__section">
+        <h3 class="settings__section-title">Theme</h3>
+        <div class="settings__control">
+          <ThemeSwitcher />
+        </div>
+      </section>
+
+      <!-- Font Size Section -->
+      <section class="settings__section">
+        <h3 class="settings__section-title">Font Size</h3>
+        <div class="settings__control">
+          <label for="font-size-slider" class="settings__label">
+            <span class="settings__label-text">Adjust text size</span>
+            <span class="settings__label-value" data-font-size-value>100%</span>
+          </label>
+          <input
+            type="range"
+            id="font-size-slider"
+            class="settings__slider"
+            min="0.75"
+            max="1.5"
+            step="0.05"
+            value="1"
+            aria-label="Font size"
+            data-font-size-slider
+            style="--slider-progress: 50%;"
+          />
+          <div class="settings__slider-labels">
+            <span>Small</span>
+            <span>Default</span>
+            <span>Large</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- Accessibility Section -->
+      <section class="settings__section">
+        <h3 class="settings__section-title">Accessibility</h3>
+        
+        <div class="settings__control">
+          <label class="settings__checkbox-label">
+            <input
+              type="checkbox"
+              class="settings__checkbox"
+              data-reduced-motion
+              aria-label="Reduce motion"
+            />
+            <span>Reduce motion</span>
+          </label>
+          <p class="settings__help-text">Minimize animations and transitions</p>
+        </div>
+
+        <div class="settings__control">
+          <label class="settings__checkbox-label">
+            <input
+              type="checkbox"
+              class="settings__checkbox"
+              data-high-contrast
+              aria-label="High contrast"
+            />
+            <span>High contrast</span>
+          </label>
+          <p class="settings__help-text">Increase contrast for better visibility</p>
+        </div>
+
+        <div class="settings__control">
+          <div class="settings__label">
+            <span class="settings__label-text">Scrollbar style</span>
+          </div>
+          <div class="settings__radio-group" role="radiogroup" aria-label="Scrollbar style">
+            <label class="settings__radio-label">
+              <input
+                type="radio"
+                name="scrollbar-style"
+                value="thin"
+                class="settings__radio"
+                data-scrollbar-style
+                aria-label="Thin scrollbar"
+                checked
+              />
+              <span>Thin</span>
+            </label>
+            <label class="settings__radio-label">
+              <input
+                type="radio"
+                name="scrollbar-style"
+                value="thick"
+                class="settings__radio"
+                data-scrollbar-style
+                aria-label="Thick scrollbar"
+              />
+              <span>Thick</span>
+            </label>
+            <label class="settings__radio-label">
+              <input
+                type="radio"
+                name="scrollbar-style"
+                value="hidden"
+                class="settings__radio"
+                data-scrollbar-style
+                aria-label="Hidden scrollbars"
+              />
+              <span>Hidden</span>
+            </label>
+          </div>
+          <p class="settings__help-text">Choose your preferred scrollbar appearance</p>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>
+
+<script>
+  (function initSettings() {
+    const settings = document.querySelector('[data-settings]');
+    if (!settings) return;
+
+    const overlay = settings.querySelector('[data-settings-overlay]');
+    const panel = settings.querySelector('.settings__panel');
+    const closeBtn = settings.querySelector('[data-settings-close]');
+    const fontSizeSlider = settings.querySelector('[data-font-size-slider]');
+    const fontSizeValue = settings.querySelector('[data-font-size-value]');
+    const reducedMotion = settings.querySelector('[data-reduced-motion]');
+    const highContrast = settings.querySelector('[data-high-contrast]');
+    const scrollbarStyleRadios = settings.querySelectorAll('[data-scrollbar-style]');
+    const html = document.documentElement;
+
+    if (!panel || !overlay || !closeBtn) return;
+
+    // Update slider progress fill
+    const updateSliderProgress = (slider) => {
+      const min = parseFloat(slider.min);
+      const max = parseFloat(slider.max);
+      const value = parseFloat(slider.value);
+      const progress = ((value - min) / (max - min)) * 100;
+      slider.style.setProperty('--slider-progress', `${progress}%`);
+    };
+
+    // Load saved settings
+    const loadSettings = () => {
+      const savedFontScale = localStorage.getItem('fontSizeScale');
+      if (savedFontScale && fontSizeSlider) {
+        fontSizeSlider.value = savedFontScale;
+        const scale = parseFloat(savedFontScale);
+        applyFontSize(scale);
+        updateSliderProgress(fontSizeSlider);
+      } else if (fontSizeSlider) {
+        // Initialize with default value
+        updateSliderProgress(fontSizeSlider);
+      }
+
+      const savedReducedMotion = localStorage.getItem('reducedMotion') === 'true';
+      if (reducedMotion) {
+        reducedMotion.checked = savedReducedMotion;
+        html.classList.toggle('reduced-motion', savedReducedMotion);
+      }
+
+      const savedHighContrast = localStorage.getItem('highContrast') === 'true';
+      if (highContrast) {
+        highContrast.checked = savedHighContrast;
+        html.classList.toggle('high-contrast', savedHighContrast);
+      }
+
+      // Load scrollbar style preference
+      const savedScrollbarStyle = localStorage.getItem('scrollbarStyle') || 'thin';
+      scrollbarStyleRadios.forEach((radio) => {
+        const radioInput = radio as HTMLInputElement;
+        if (radioInput && radioInput.value === savedScrollbarStyle) {
+          radioInput.checked = true;
+        }
+      });
+      applyScrollbarStyle(savedScrollbarStyle);
+    };
+
+    // Apply font size
+    const applyFontSize = (scale) => {
+      html.style.setProperty('--font-size-scale', scale.toString());
+      if (fontSizeValue) {
+        fontSizeValue.textContent = `${Math.round(scale * 100)}%`;
+      }
+    };
+
+    // Focus trap helper
+    const getFocusableElements = (container) => {
+      const focusableSelectors = [
+        'button:not([disabled])',
+        'a[href]',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])',
+      ].join(', ');
+      return Array.from(container.querySelectorAll(focusableSelectors));
+    };
+
+    let previousActiveElement = null;
+
+    // Open settings
+    const openSettings = () => {
+      previousActiveElement = document.activeElement;
+      
+      // First, make elements visible but keep panel off-screen
+      settings.setAttribute('aria-hidden', 'false');
+      if (overlay) overlay.setAttribute('aria-hidden', 'false');
+      panel.setAttribute('aria-hidden', 'false');
+      
+      // Ensure panel starts in closed position (remove data-open if it exists)
+      panel.removeAttribute('data-open');
+      
+      // Force a reflow to ensure the closed state is rendered
+      void panel.offsetHeight;
+      
+      // Then animate in - use double requestAnimationFrame for reliable animation
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          panel.setAttribute('data-open', 'true');
+          if (closeBtn) closeBtn.focus();
+        });
+      });
+    };
+
+    // Close settings
+    const closeSettings = () => {
+      // Remove data-open first to trigger close animation
+      panel.removeAttribute('data-open');
+      
+      // Wait for animation to complete before hiding
+      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      const animationDuration = prefersReducedMotion ? 0 : 300;
+      
+      setTimeout(() => {
+        settings.setAttribute('aria-hidden', 'true');
+        overlay?.setAttribute('aria-hidden', 'true');
+        panel.setAttribute('aria-hidden', 'true');
+        
+        // Return focus to previous element
+        if (previousActiveElement) {
+          previousActiveElement.focus();
+          previousActiveElement = null;
+        }
+      }, animationDuration);
+    };
+
+    // Event listeners
+    closeBtn?.addEventListener('click', closeSettings);
+    
+    overlay?.addEventListener('click', closeSettings);
+
+    // Focus trapping and keyboard handlers
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (panel.getAttribute('data-open') !== 'true') return;
+
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        closeSettings();
+        return;
+      }
+
+      // Focus trap: Tab key
+      if (e.key === 'Tab') {
+        const focusableElements = getFocusableElements(panel);
+        if (focusableElements.length === 0) return;
+
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        const activeElement = document.activeElement as HTMLElement;
+
+        if (e.shiftKey) {
+          // Shift + Tab: move backwards
+          if (activeElement === firstElement || !panel.contains(activeElement)) {
+            e.preventDefault();
+            lastElement.focus();
+          }
+        } else {
+          // Tab: move forwards
+          if (activeElement === lastElement || !panel.contains(activeElement)) {
+            e.preventDefault();
+            firstElement.focus();
+          }
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    // Font size slider
+    if (fontSizeSlider) {
+      fontSizeSlider.addEventListener('input', (e) => {
+        const target = e.target as HTMLInputElement;
+        if (target) {
+          const scale = parseFloat(target.value);
+          applyFontSize(scale);
+          updateSliderProgress(target);
+          localStorage.setItem('fontSizeScale', scale.toString());
+        }
+      });
+    }
+
+    // Reduced motion
+    if (reducedMotion) {
+      reducedMotion.addEventListener('change', (e) => {
+        const target = e.target as HTMLInputElement;
+        if (target) {
+          html.classList.toggle('reduced-motion', target.checked);
+          localStorage.setItem('reducedMotion', target.checked.toString());
+        }
+      });
+    }
+
+    // High contrast
+    if (highContrast) {
+      highContrast.addEventListener('change', (e) => {
+        const target = e.target as HTMLInputElement;
+        if (target) {
+          html.classList.toggle('high-contrast', target.checked);
+          localStorage.setItem('highContrast', target.checked.toString());
+        }
+      });
+    }
+
+    // Apply scrollbar style
+    const applyScrollbarStyle = (style: string) => {
+      // Remove all scrollbar classes
+      html.classList.remove('scrollbar-thin', 'scrollbar-thick', 'scrollbar-hidden', 'hide-scrollbars');
+      
+      // Add the appropriate class
+      if (style === 'thick') {
+        html.classList.add('scrollbar-thick');
+      } else if (style === 'hidden') {
+        html.classList.add('scrollbar-hidden', 'hide-scrollbars'); // Keep hide-scrollbars for backward compatibility
+      }
+      // 'thin' is the default, no class needed
+    };
+
+    // Scrollbar style radio buttons
+    scrollbarStyleRadios.forEach((radio) => {
+      radio.addEventListener('change', (e) => {
+        const target = e.target as HTMLInputElement;
+        if (target && target.checked) {
+          const style = target.value;
+          applyScrollbarStyle(style);
+          localStorage.setItem('scrollbarStyle', style);
+        }
+      });
+    });
+
+    // Load settings on init
+    loadSettings();
+
+    // Expose open function globally
+    window.openSettings = openSettings;
+  })();
+</script>

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

@@ -0,0 +1,30 @@
+---
+interface Props {
+  /** Visual size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Color variant */
+  variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+  /** Accessible label (e.g. "Loading") */
+  label?: string;
+  class?: string;
+}
+
+const {
+  size = 'md',
+  variant = 'primary',
+  label = 'Loading',
+  class: className = '',
+} = Astro.props;
+
+const sizeClass = `spinner--${size}`;
+const variantClass = `spinner--${variant}`;
+const classes = `spinner ${sizeClass} ${variantClass} ${className}`.trim();
+---
+
+<span
+  class={classes}
+  role="status"
+  aria-label={label}
+>
+  <span class="spinner__ring" aria-hidden="true" />
+</span>

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

@@ -0,0 +1,181 @@
+---
+import Sort from './icons/Sort.astro';
+import Filter from './icons/Filter.astro';
+
+export interface TableColumn {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  type?: 'string' | 'number';
+}
+
+interface Props {
+  /** Column definitions (key, label, sortable, type) */
+  columns: TableColumn[];
+  /** Row data: array of objects with keys matching column keys */
+  data: Record<string, string | number>[];
+  /** Table caption for accessibility */
+  caption?: string;
+  /** Enable column header sorting (default: true) */
+  sortable?: boolean;
+  /** Enable filter input above table (default: false) */
+  filterable?: boolean;
+  /** Placeholder for filter input */
+  filterPlaceholder?: string;
+  /** Striped rows (default: true) */
+  striped?: boolean;
+  class?: string;
+}
+
+const {
+  columns,
+  data,
+  caption,
+  sortable = true,
+  filterable = false,
+  filterPlaceholder = 'Filter table…',
+  striped = true,
+  class: className = '',
+} = Astro.props;
+
+const tableId = `table-${Math.random().toString(36).slice(2, 11)}`;
+const stripClass = striped ? 'table--striped' : '';
+const sortClass = sortable ? 'table--sortable' : '';
+const filterClass = filterable ? 'table--filterable' : '';
+const classes = `table ${stripClass} ${sortClass} ${filterClass} ${className}`.trim();
+---
+
+<div class={classes} data-table-sortable={sortable ? 'true' : undefined} data-table-filterable={filterable ? 'true' : undefined} data-table-id={tableId}>
+  {filterable && (
+    <div class="table__filter-wrap">
+      <label for={`${tableId}-filter`} class="sr-only">Filter table</label>
+      <span class="table__filter-icon" aria-hidden="true">
+        <Filter width={20} height={20} class="table__filter-icon-svg" />
+      </span>
+      <input
+        type="search"
+        id={`${tableId}-filter`}
+        class="table__filter"
+        placeholder={filterPlaceholder}
+        aria-controls={tableId}
+        data-table-filter
+        autocomplete="off"
+      />
+    </div>
+  )}
+  <div class="table__wrapper">
+    <table class="table__table" id={tableId}>
+      {caption && <caption class="table__caption">{caption}</caption>}
+      <thead class="table__head">
+        <tr class="table__row">
+          {columns.map((col, i) => (
+            <th
+              class="table__cell table__cell--head"
+              scope="col"
+              data-column-index={i}
+              data-sortable={sortable && col.sortable !== false ? 'true' : undefined}
+              data-type={col.type ?? 'string'}
+              aria-sort={sortable && col.sortable !== false ? 'none' : undefined}
+            >
+              {sortable && col.sortable !== false ? (
+                <button
+                  type="button"
+                  class="table__sort-trigger"
+                  data-column-index={i}
+                  aria-label={`Sort by ${col.label}`}
+                >
+                  <span class="table__cell-content">{col.label}</span>
+                  <span class="table__sort-icon" aria-hidden="true">
+                    <Sort width={20} height={20} class="table__sort-icon-svg" />
+                  </span>
+                </button>
+              ) : (
+                <>
+                  <span class="table__cell-content">{col.label}</span>
+                </>
+              )}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody class="table__body">
+        {data.map((row, rowIndex) => (
+          <tr class="table__row" data-row-index={rowIndex}>
+            {columns.map((col) => (
+              <td class="table__cell" data-column-key={col.key}>
+                {row[col.key] ?? ''}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+{(sortable || filterable) && (
+  <script is:inline>
+    (function() {
+      function init() {
+        document.querySelectorAll('[data-table-sortable="true"], [data-table-filterable="true"]').forEach(function(wrapper) {
+          if (wrapper.hasAttribute('data-table-initialized')) return;
+          wrapper.setAttribute('data-table-initialized', 'true');
+
+          var table = wrapper.querySelector('table');
+          var tbody = table && table.querySelector('tbody');
+          var thead = table && table.querySelector('thead');
+          var filterInput = wrapper.querySelector('[data-table-filter]');
+
+          if (wrapper.getAttribute('data-table-sortable') === 'true' && thead && tbody) {
+            thead.querySelectorAll('th[data-sortable="true"] button.table__sort-trigger').forEach(function(btn) {
+              var th = btn.closest('th');
+              var colIndex = parseInt(th.getAttribute('data-column-index'), 10);
+              btn.addEventListener('click', function() { sortTable(tbody, colIndex, th); });
+            });
+          }
+
+          if (wrapper.getAttribute('data-table-filterable') === 'true' && filterInput && tbody) {
+            filterInput.addEventListener('input', function() {
+              var q = (filterInput.value || '').trim().toLowerCase();
+              tbody.querySelectorAll('tr').forEach(function(tr) {
+                var text = Array.from(tr.querySelectorAll('td')).map(function(td) { return td.textContent || ''; }).join(' ').toLowerCase();
+                tr.hidden = q ? text.indexOf(q) === -1 : false;
+              });
+            });
+          }
+        });
+
+        function sortTable(tbody, colIndex, th) {
+          var type = th.getAttribute('data-type') || 'string';
+          var dir = th.getAttribute('aria-sort') === 'ascending' ? 'descending' : 'ascending';
+          var rows = Array.from(tbody.querySelectorAll('tr'));
+
+          rows.sort(function(a, b) {
+            var aCell = a.querySelectorAll('td')[colIndex];
+            var bCell = b.querySelectorAll('td')[colIndex];
+            var aVal = aCell ? aCell.textContent : '';
+            var bVal = bCell ? bCell.textContent : '';
+            if (type === 'number') {
+              var aNum = parseFloat(String(aVal).replace(/[^0-9.-]/g, '')) || 0;
+              var bNum = parseFloat(String(bVal).replace(/[^0-9.-]/g, '')) || 0;
+              return dir === 'ascending' ? aNum - bNum : bNum - aNum;
+            }
+            var cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true });
+            return dir === 'ascending' ? cmp : -cmp;
+          });
+
+          th.setAttribute('aria-sort', dir);
+          var table = tbody.parentNode;
+          if (table && table.querySelector) {
+            table.querySelectorAll('thead th[data-sortable="true"]').forEach(function(h) {
+              if (h !== th) h.setAttribute('aria-sort', 'none');
+            });
+          }
+          rows.forEach(function(tr) { tbody.appendChild(tr); });
+        }
+      }
+      if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+      else init();
+    })();
+  </script>
+)}