rizzo-css 0.0.1 → 0.0.3

package/scaffold/astro/FormGroup.astro

@@ -0,0 +1,51 @@
+---
+interface Props {
+  label?: string;
+  labelFor?: string;
+  required?: boolean;
+  help?: string;
+  error?: string;
+  success?: string;
+  class?: string;
+}
+
+const {
+  label,
+  labelFor,
+  required = false,
+  help,
+  error,
+  success,
+  class: className = '',
+} = Astro.props;
+
+const errorId = labelFor && error ? `${labelFor}-error` : undefined;
+const helpId = labelFor && help ? `${labelFor}-help` : undefined;
+---
+
+<div class={`form-group ${className}`}>
+  {label && (
+    <label
+      for={labelFor}
+      class={`form-group__label ${required ? 'required' : ''}`}
+    >
+      {label}
+    </label>
+  )}
+  <slot />
+  {help && (
+    <span id={helpId} class="form-group__help">
+      {help}
+    </span>
+  )}
+  {error && (
+    <span id={errorId} class="form-error" role="alert">
+      {error}
+    </span>
+  )}
+  {success && (
+    <span class="form-success" role="status">
+      {success}
+    </span>
+  )}
+</div>

package/scaffold/astro/Input.astro

@@ -0,0 +1,59 @@
+---
+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';
+}
+
+const {
+  type = 'text',
+  id,
+  name,
+  value,
+  placeholder,
+  required = false,
+  disabled = false,
+  readonly = false,
+  autocomplete,
+  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';
+---
+
+<input
+  type={type}
+  id={id}
+  name={name}
+  value={value}
+  placeholder={placeholder}
+  required={required}
+  disabled={disabled}
+  readonly={readonly}
+  autocomplete={autocomplete}
+  class={classes}
+  aria-invalid={invalid ? 'true' : 'false'}
+  aria-describedby={ariaDescribedby}
+/>

package/scaffold/astro/Modal.astro

@@ -0,0 +1,212 @@
+---
+import Close from './icons/Close.astro';
+
+interface Props {
+  id?: string;
+  title?: string;
+  size?: 'sm' | 'md' | 'lg';
+  open?: boolean;
+  closeOnOverlayClick?: boolean;
+  closeOnEscape?: boolean;
+  class?: string;
+}
+
+const {
+  id,
+  title = 'Modal',
+  size = 'md',
+  open = false,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  class: className = '',
+} = Astro.props;
+
+const modalId = id || `modal-${Math.random().toString(36).substr(2, 9)}`;
+const sizeClass = size !== 'md' ? `modal--${size}` : '';
+const classes = `modal ${sizeClass} ${className}`.trim();
+---
+
+<div
+  class="modal__overlay"
+  data-modal-overlay
+  aria-hidden={open ? 'false' : 'true'}
+  id={`${modalId}-overlay`}
+></div>
+
+<div
+  class={classes}
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby={`${modalId}-title`}
+  aria-hidden={open ? 'false' : 'true'}
+  id={modalId}
+  data-modal
+>
+  <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
+    >
+      <Close width={20} height={20} />
+    </button>
+  </div>
+
+  <div class="modal__body">
+    <slot />
+  </div>
+
+  <div class="modal__footer">
+    <slot name="footer" />
+  </div>
+</div>
+
+<script define:vars={{ modalId, closeOnEscape, closeOnOverlayClick, open }}>
+  (function initModal() {
+    // Wait for DOM to be ready
+    const init = () => {
+      const modal = document.querySelector(`#${modalId}`);
+      if (!modal) {
+        // Retry if modal not found yet
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', init);
+          return;
+        }
+        return;
+      }
+
+      const overlay = document.querySelector(`#${modalId}-overlay`);
+      const closeBtn = modal.querySelector('[data-modal-close]');
+      const title = modal.querySelector(`#${modalId}-title`);
+
+      if (!overlay || !closeBtn) return;
+      
+      // Ensure modal starts closed unless explicitly opened
+      if (!open) {
+        modal.setAttribute('aria-hidden', 'true');
+        overlay.setAttribute('aria-hidden', 'true');
+        modal.removeAttribute('data-open');
+      }
+
+      // Get focusable elements within modal
+      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;
+      let focusTrapHandler = null;
+
+      // Open modal
+      const openModal = () => {
+        previousActiveElement = document.activeElement;
+        modal.setAttribute('aria-hidden', 'false');
+        overlay.setAttribute('aria-hidden', 'false');
+        modal.setAttribute('data-open', 'true');
+        
+        // Focus first focusable element or close button
+        const focusableElements = getFocusableElements(modal);
+        const firstFocusable = focusableElements.length > 0 ? focusableElements[0] : closeBtn;
+        if (firstFocusable) {
+          setTimeout(() => firstFocusable.focus(), 0);
+        }
+
+        // Add focus trap
+        focusTrapHandler = (e) => {
+          if (modal.getAttribute('data-open') !== 'true') return;
+
+          if (e.key === 'Escape' && closeOnEscape) {
+            e.preventDefault();
+            closeModal();
+            return;
+          }
+
+          // Focus trap: Tab key
+          if (e.key === 'Tab') {
+            const focusableElements = getFocusableElements(modal);
+            if (focusableElements.length === 0) return;
+
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+            const activeElement = document.activeElement;
+
+            if (e.shiftKey) {
+              // Shift + Tab: move backwards
+              if (activeElement === firstElement || !modal.contains(activeElement)) {
+                e.preventDefault();
+                lastElement.focus();
+              }
+            } else {
+              // Tab: move forwards
+              if (activeElement === lastElement || !modal.contains(activeElement)) {
+                e.preventDefault();
+                firstElement.focus();
+              }
+            }
+          }
+        };
+
+        document.addEventListener('keydown', focusTrapHandler);
+      };
+
+      // Close modal
+      const closeModal = () => {
+        modal.setAttribute('aria-hidden', 'true');
+        overlay.setAttribute('aria-hidden', 'true');
+        modal.removeAttribute('data-open');
+
+        // Remove focus trap
+        if (focusTrapHandler) {
+          document.removeEventListener('keydown', focusTrapHandler);
+          focusTrapHandler = null;
+        }
+
+        // Return focus to previous element
+        if (previousActiveElement) {
+          previousActiveElement.focus();
+          previousActiveElement = null;
+        }
+      };
+
+      // Event listeners
+      closeBtn.addEventListener('click', closeModal);
+
+      if (closeOnOverlayClick) {
+        overlay.addEventListener('click', (e) => {
+          if (e.target === overlay) {
+            closeModal();
+          }
+        });
+      }
+
+      // Initialize if open prop is true
+      if (open) {
+        setTimeout(() => openModal(), 0);
+      }
+
+      // Expose methods globally
+      // Convert hyphens to underscores for valid JavaScript identifiers
+      const modalIdAttr = modal.id.replace(/-/g, '_');
+      window[`openModal_${modalIdAttr}`] = openModal;
+      window[`closeModal_${modalIdAttr}`] = closeModal;
+    };
+    
+    // Start initialization
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+  })();
+</script>

package/scaffold/astro/Pagination.astro

@@ -0,0 +1,240 @@
+---
+interface Props {
+  currentPage: number;
+  totalPages: number;
+  hrefTemplate?: string;
+  showFirstLast?: boolean;
+  maxVisible?: number;
+  /** When true, add data attributes and script so clicking updates hash and current page (for demos) */
+  syncHash?: boolean;
+  class?: string;
+}
+
+const {
+  currentPage,
+  totalPages,
+  hrefTemplate = '?page={page}',
+  showFirstLast = true,
+  maxVisible = 5,
+  syncHash = false,
+  class: className = '',
+} = Astro.props;
+
+const classes = `pagination ${className}`.trim();
+const hashMatch = typeof hrefTemplate === 'string' && hrefTemplate.startsWith('#');
+const dataSync = syncHash && hashMatch ? { 'data-pagination-sync': 'true', 'data-total-pages': String(totalPages), 'data-href-template': hrefTemplate } : {};
+
+function buildHref(page: number): string {
+  return hrefTemplate.replace(/\{page\}/g, String(page));
+}
+
+/** Build array of page numbers and 'ellipsis' for display */
+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;
+}
+
+const pageItems = getPageItems(totalPages, currentPage, maxVisible);
+const hasPrev = currentPage > 1;
+const hasNext = currentPage < totalPages;
+---
+
+<nav class={classes} aria-label="Pagination" {...dataSync}>
+  <ul class="pagination__list">
+    {showFirstLast && totalPages > 1 && (
+      <li class="pagination__item">
+        {hasPrev ? (
+          <a class="pagination__link pagination__link--prev" href={buildHref(1)} aria-label="First page" data-pagination-role="first">
+            First
+          </a>
+        ) : (
+          <span class="pagination__link pagination__link--prev pagination__link--disabled" aria-disabled="true" data-pagination-role="first">
+            First
+          </span>
+        )}
+      </li>
+    )}
+    <li class="pagination__item">
+      {hasPrev ? (
+        <a class="pagination__link pagination__link--prev" href={buildHref(currentPage - 1)} aria-label="Previous page" data-pagination-role="prev">
+          Previous
+        </a>
+      ) : (
+        <span class="pagination__link pagination__link--prev pagination__link--disabled" aria-disabled="true" data-pagination-role="prev">
+          Previous
+        </span>
+      )}
+    </li>
+    {pageItems.map((item) => (
+      <li class="pagination__item">
+        {item === 'ellipsis' ? (
+          <span class="pagination__ellipsis" aria-hidden="true">
+            …
+          </span>
+        ) : item === currentPage ? (
+          <span class="pagination__link pagination__link--current" aria-current="page" data-page={String(item)}>
+            {item}
+          </span>
+        ) : (
+          <a class="pagination__link" href={buildHref(item)} aria-label={`Page ${item}`} data-page={String(item)}>
+            {item}
+          </a>
+        )}
+      </li>
+    ))}
+    <li class="pagination__item">
+      {hasNext ? (
+        <a class="pagination__link pagination__link--next" href={buildHref(currentPage + 1)} aria-label="Next page" data-pagination-role="next">
+          Next
+        </a>
+      ) : (
+        <span class="pagination__link pagination__link--next pagination__link--disabled" aria-disabled="true" data-pagination-role="next">
+          Next
+        </span>
+      )}
+    </li>
+    {showFirstLast && totalPages > 1 && (
+      <li class="pagination__item">
+        {hasNext ? (
+          <a class="pagination__link pagination__link--next" href={buildHref(totalPages)} aria-label="Last page" data-pagination-role="last">
+            Last
+          </a>
+        ) : (
+          <span class="pagination__link pagination__link--next pagination__link--disabled" aria-disabled="true" data-pagination-role="last">
+            Last
+          </span>
+        )}
+      </li>
+    )}
+  </ul>
+</nav>
+
+{syncHash && hashMatch && (
+  <script is:inline>
+    (function() {
+      function getHref(nav, page) {
+        var t = nav.getAttribute('data-href-template') || '#page-{page}';
+        return t.replace(/\{page\}/g, String(page));
+      }
+      function getRoleElement(nav, role) {
+        var candidates = nav.querySelectorAll('[data-pagination-role="' + role + '"]');
+        for (var i = 0; i < candidates.length; i++) {
+          if (candidates[i].closest && candidates[i].closest('[data-pagination-sync="true"]') === nav) return candidates[i];
+        }
+        return candidates[0] || null;
+      }
+      function setCurrentPage(nav, pageNum) {
+        var total = parseInt(nav.getAttribute('data-total-pages'), 10) || 1;
+        pageNum = Math.max(1, Math.min(pageNum, total));
+
+        Array.from(nav.querySelectorAll('[data-page]')).forEach(function(el) {
+          var page = el.getAttribute('data-page');
+          if (page === 'ellipsis') return;
+          var num = parseInt(page, 10);
+          if (isNaN(num)) return;
+          var isCurrent = num === pageNum;
+          var parent = el.parentNode;
+          if (isCurrent && el.tagName !== 'SPAN') {
+            var span = document.createElement('span');
+            span.className = 'pagination__link pagination__link--current';
+            span.setAttribute('aria-current', 'page');
+            span.setAttribute('data-page', page);
+            span.textContent = el.textContent;
+            parent.replaceChild(span, el);
+          } else if (!isCurrent && el.tagName !== 'A') {
+            var a = document.createElement('a');
+            a.className = 'pagination__link';
+            a.href = getHref(nav, num);
+            a.setAttribute('aria-label', 'Page ' + page);
+            a.setAttribute('data-page', page);
+            a.textContent = el.textContent;
+            parent.replaceChild(a, el);
+          }
+        });
+
+        ['first', 'prev', 'next', 'last'].forEach(function(role) {
+          var el = getRoleElement(nav, role);
+          if (!el) return;
+          var disabled = (role === 'first' || role === 'prev') ? pageNum <= 1 : pageNum >= total;
+          var hrefPage = role === 'first' ? 1 : role === 'last' ? total : role === 'prev' ? pageNum - 1 : pageNum + 1;
+          var parent = el.parentNode;
+          if (disabled) {
+            if (el.tagName !== 'SPAN') {
+              var span = document.createElement('span');
+              span.className = 'pagination__link pagination__link--' + (role === 'first' || role === 'prev' ? 'prev' : 'next') + ' pagination__link--disabled';
+              span.setAttribute('aria-disabled', 'true');
+              span.setAttribute('data-pagination-role', role);
+              span.textContent = el.textContent;
+              parent.replaceChild(span, el);
+            }
+          } else {
+            if (el.tagName !== 'A') {
+              var a = document.createElement('a');
+              a.className = 'pagination__link pagination__link--' + (role === 'first' || role === 'prev' ? 'prev' : 'next');
+              a.href = getHref(nav, hrefPage);
+              a.setAttribute('aria-label', role === 'first' ? 'First page' : role === 'last' ? 'Last page' : role === 'prev' ? 'Previous page' : 'Next page');
+              a.setAttribute('data-pagination-role', role);
+              a.textContent = el.textContent;
+              parent.replaceChild(a, el);
+            } else {
+              el.href = getHref(nav, hrefPage);
+            }
+          }
+        });
+      }
+      function init() {
+        document.querySelectorAll('[data-pagination-sync="true"]').forEach(function(nav) {
+          var total = parseInt(nav.getAttribute('data-total-pages'), 10) || 1;
+          var hash = window.location.hash;
+          var m = hash && hash.match(/^#page-(\d+)$/);
+          var page = m ? parseInt(m[1], 10) : null;
+          if (page >= 1 && page <= total) setCurrentPage(nav, page);
+
+          if (nav.hasAttribute('data-pagination-initialized')) return;
+          nav.setAttribute('data-pagination-initialized', 'true');
+          nav.addEventListener('click', function(e) {
+            var a = e.target.closest('a.pagination__link');
+            if (!a || !a.href) return;
+            var href = a.getAttribute('href') || a.href || '';
+            var match = href.match(/#page-(\d+)/);
+            if (!match) return;
+            e.preventDefault();
+            var pageNum = parseInt(match[1], 10);
+            if (pageNum >= 1 && pageNum <= total) {
+              window.location.hash = '#page-' + pageNum;
+              setCurrentPage(nav, pageNum);
+            }
+          });
+        });
+
+        if (window.__paginationSyncHashListener) return;
+        window.__paginationSyncHashListener = true;
+        window.addEventListener('hashchange', function() {
+          var hash = window.location.hash;
+          var m = hash && hash.match(/^#page-(\d+)$/);
+          if (!m) return;
+          var pageNum = parseInt(m[1], 10);
+          document.querySelectorAll('[data-pagination-sync="true"]').forEach(function(nav) {
+            var total = parseInt(nav.getAttribute('data-total-pages'), 10) || 1;
+            if (pageNum >= 1 && pageNum <= total) setCurrentPage(nav, pageNum);
+          });
+        });
+      }
+      if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+      else init();
+    })();
+  </script>
+)}

package/scaffold/astro/ProgressBar.astro

@@ -0,0 +1,65 @@
+---
+interface Props {
+  /** Current value (0 to max) */
+  value?: number;
+  /** Maximum value (default: 100) */
+  max?: number;
+  /** Visual variant */
+  variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+  /** Bar height size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Show percentage or value label */
+  showLabel?: boolean;
+  /** Indeterminate (animated) state - ignores value */
+  indeterminate?: boolean;
+  /** Accessible label for the progress bar */
+  label?: string;
+  class?: string;
+}
+
+const {
+  value = 0,
+  max = 100,
+  variant = 'primary',
+  size = 'md',
+  showLabel = false,
+  indeterminate = false,
+  label,
+  class: className = '',
+} = Astro.props;
+
+const safeMax = max <= 0 ? 100 : max;
+const clampedValue = indeterminate ? 0 : Math.max(0, Math.min(value, safeMax));
+const percentage = indeterminate ? 0 : Math.round((clampedValue / safeMax) * 100);
+
+const variantClass = `progress--${variant}`;
+const sizeClass = `progress--${size}`;
+const indeterminateClass = indeterminate ? 'progress--indeterminate' : '';
+const classes = `progress ${variantClass} ${sizeClass} ${indeterminateClass} ${className}`.trim();
+
+const ariaAttrs = indeterminate
+  ? { 'aria-valuemin': 0, 'aria-valuemax': safeMax, 'aria-label': label ?? 'Loading', 'aria-valuetext': 'Loading' }
+  : {
+      'aria-valuenow': clampedValue,
+      'aria-valuemin': 0,
+      'aria-valuemax': safeMax,
+      'aria-label': label ?? undefined,
+    };
+
+const barStyle = indeterminate ? {} : { width: `${percentage}%` };
+---
+
+<div
+  class={classes}
+  role="progressbar"
+  {...ariaAttrs}
+>
+  <div class="progress__track">
+    <div class="progress__bar" style={barStyle} />
+  </div>
+  {showLabel && !indeterminate && (
+    <span class="progress__label" aria-hidden="true">
+      {percentage}%
+    </span>
+  )}
+</div>

package/scaffold/astro/Radio.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="radio"
+  id={id}
+  name={name}
+  value={value}
+  checked={checked}
+  required={required}
+  disabled={disabled}
+  class={className}
+  aria-describedby={ariaDescribedby}
+  aria-label={ariaLabel}
+/>