rizzo-css 0.0.16 → 0.0.18

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

@@ -1,49 +0,0 @@
----
-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

@@ -1,382 +0,0 @@
----
-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

@@ -1,30 +0,0 @@
----
-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

@@ -1,181 +0,0 @@
----
-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>
-)}