rizzo-css 0.0.12 → 0.0.13

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

@@ -0,0 +1,59 @@
+---
+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 && (
+    labelFor
+      ? (
+        <label
+          for={labelFor}
+          class={`form-group__label ${required ? 'required' : ''}`}
+        >
+          {label}
+        </label>
+        )
+      : (
+        <span class={`form-group__label ${required ? 'required' : ''}`}>
+          {label}
+        </span>
+        )
+  )}
+  <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-app/src/components/FrameworkSwitcher.astro

@@ -0,0 +1,72 @@
+---
+import { FRAMEWORKS, FRAMEWORK_STORAGE_KEY, getFrameworkFromPath, shouldShowFrameworkSwitcher } from '../config/frameworks.js';
+import AstroIcon from './icons/devicons/Astro.astro';
+import Svelte from './icons/devicons/Svelte.astro';
+import Javascript from './icons/devicons/Javascript.astro';
+import React from './icons/devicons/React.astro';
+import Vue from './icons/devicons/Vue.astro';
+
+interface Props {
+  currentPath: string;
+}
+
+const { currentPath } = Astro.props;
+
+if (!shouldShowFrameworkSwitcher(currentPath)) {
+  return null;
+}
+
+const { framework: currentFramework, canonicalPath } = getFrameworkFromPath(currentPath);
+
+const FRAMEWORK_ICONS: Record<string, typeof AstroIcon> = {
+  astro: AstroIcon,
+  svelte: Svelte,
+  vanilla: Javascript,
+  react: React,
+  vue: Vue,
+};
+---
+
+<nav class="framework-switcher" aria-label="Switch documentation framework">
+  <span class="framework-switcher__label">View as</span>
+  <div class="framework-switcher__segmented" role="group">
+    {FRAMEWORKS.map((fw, i) => {
+      const href = fw.pathPrefix + (canonicalPath || '') || '/';
+      const isCurrent = fw.id === currentFramework.id;
+      const isFirst = i === 0;
+      const isLast = i === FRAMEWORKS.length - 1;
+      const IconComponent = FRAMEWORK_ICONS[fw.id];
+      return (
+        <a
+          class={`framework-switcher__segment ${isCurrent ? 'framework-switcher__segment--current' : ''} ${isFirst ? 'framework-switcher__segment--first' : ''} ${isLast ? 'framework-switcher__segment--last' : ''}`}
+          href={href}
+          data-framework={fw.id}
+          aria-current={isCurrent ? 'page' : undefined}
+        >
+          {IconComponent && <IconComponent width={18} height={18} class="framework-switcher__icon" aria-hidden="true" />}
+          <span class="framework-switcher__segment-label">{fw.label}</span>
+        </a>
+      );
+    })}
+  </div>
+</nav>
+<script define:vars={{ FRAMEWORK_STORAGE_KEY }}>
+  function initFrameworkSwitcher() {
+    document.querySelectorAll('.framework-switcher__segment').forEach((link) => {
+      link.addEventListener('click', (e) => {
+        const id = link.getAttribute('data-framework');
+        const href = link.getAttribute('href');
+        if (id && href) {
+          e.preventDefault();
+          try { localStorage.setItem(FRAMEWORK_STORAGE_KEY, id); } catch (_) {}
+          window.location.href = href;
+        }
+      });
+    });
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initFrameworkSwitcher);
+  } else {
+    initFrameworkSwitcher();
+  }
+</script>

package/scaffold/astro-app/src/components/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-app/src/components/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>