rizzo-css 0.0.17 → 0.0.18

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

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

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

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

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