npm - rizzo-css - Versions diffs - 0.0.17 → 0.0.18 - Mend

rizzo-css 0.0.17 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (260) hide show

package/scaffold/vanilla/components/tooltip.html CHANGED Viewed

	@@ -183,6 +183,10 @@
183 183
184 184
185 185
186	+
187	+
188	+
189	+
186 190
187 191
188 192
	@@ -213,6 +217,10 @@
213 217
214 218
215 219
220	+
221	+
222	+
223	+
216 224
217 225
218 226

package/scaffold/vanilla/index.html CHANGED Viewed

	@@ -183,6 +183,10 @@
183 183
184 184
185 185
186	+
187	+
188	+
189	+
186 190
187 191
188 192
	@@ -225,6 +229,10 @@
225 229
226 230
227 231
232	+
233	+
234	+
235	+
228 236
229 237
230 238

package/scaffold/astro-app/README.md DELETED Viewed

@@ -1,43 +0,0 @@
-# Astro + Rizzo CSS
-This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Astro. This full clone (navbar, docs pages, component showcase) is only generated for new projects; **Add to existing project** only adds the CSS and optional components (you must add the stylesheet `<link>` to your layout yourself; the CLI prints the exact tag).
-## First-time setup
-**Install dependencies before running any Astro command:**
-```bash
-pnpm install
-# or: npm install
-```
-Then start the dev server:
-```bash
-pnpm dev
-```
-The theme selected during `rizzo-css init` is set in `src/layouts/Layout.astro` (`data-theme` on `<html>`) and is used on first load when you have no saved preference in the browser.
-## Commands
-- `pnpm dev` — Start dev server
-- `pnpm build` — Build for production
-- `pnpm preview` — Preview production build
-## Editing the cloned site
-- **Layout and shell** — `src/layouts/Layout.astro` (navbar, settings, theme script, CSS link). Change the default theme or title placeholders here.
-- **Docs and theme pages** — `src/pages/docs/` (getting-started, design-system, theming, themes, etc.). Each page uses `DocsLayout` and can be edited or replaced; stubs link to the main site for full content.
-- **Component showcase** — `src/pages/components.astro` (index) and `src/pages/components/*.astro`. Edit or add component demos; imports use `../../components/` and `../../layouts/`.
-- **Home page** — `src/pages/index.astro`. Replace the hero and links with your own content.
-- **Components and config** — `src/components/` (Navbar, Settings, Card, etc.) and `src/config/themes.ts`. Customize or remove components; update the nav in `Navbar.astro` if you add/remove routes.
-- **CSS** — The app loads `/css/rizzo.min.css` (from `public/css/`). Replace or add styles as needed.
-After editing, run `pnpm dev` to preview and `pnpm build` for production.
-## Other scaffolds
-From the same **rizzo-css** package: **Vanilla** (`scaffold/vanilla/`) — index + component showcase (components/index.html, components/<slug>.html) with Settings and toast; **Svelte** (`scaffold/svelte-app/`) — SvelteKit app with /components and /components/[slug]. Use `npx rizzo-css init` and pick a different framework to create one of them.
-Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)

package/scaffold/astro-app/package.json DELETED Viewed

	@@ -1 +0,0 @@
1	- {"name":"{{PROJECT_NAME}}","type":"module","version":"0.0.1","scripts":{"dev":"astro dev","build":"astro build","preview":"astro preview"},"devDependencies":{"astro":"^5.17.1"}}

package/scaffold/astro-app/src/components/Accordion.astro DELETED Viewed

@@ -1,178 +0,0 @@
----
-import ChevronDown from './icons/ChevronDown.astro';
-interface AccordionItem {
-  id: string;
-  title: string;
-  content?: string;
-}
-interface Props {
-  items: AccordionItem[];
-  id?: string;
-  allowMultiple?: boolean;
-  defaultExpanded?: string | string[];
-  class?: string;
-}
-const {
-  items,
-  id,
-  allowMultiple = false,
-  defaultExpanded,
-  class: className = '',
-} = Astro.props;
-const accordionId = id || `accordion-${Math.random().toString(36).substr(2, 9)}`;
-const getDefaultExpanded = (): Set<string> => {
-  if (defaultExpanded === undefined) return new Set(items[0] ? [items[0].id] : []);
-  if (typeof defaultExpanded === 'string') return new Set([defaultExpanded]);
-  return new Set(defaultExpanded);
-};
-const defaultOpenIds = getDefaultExpanded();
-const classes = `accordion ${className}`.trim();
-let slotIndex = 0;
----
-<div class={classes} data-accordion={accordionId} data-allow-multiple={allowMultiple ? 'true' : 'false'}>
-  {items.map((item) => {
-    const triggerId = `${accordionId}-trigger-${item.id}`;
-    const panelId = `${accordionId}-panel-${item.id}`;
-    const isExpanded = defaultOpenIds.has(item.id);
-    const useSlot = !item.content;
-    const currentSlotIndex = useSlot ? slotIndex++ : -1;
-    return (
-      <div class="accordion__item" data-accordion-item data-item-id={item.id}>
-        <h3 class="accordion__heading">
-          <button
-            type="button"
-            class={`accordion__trigger ${isExpanded ? 'accordion__trigger--expanded' : ''}`}
-            id={triggerId}
-            aria-expanded={isExpanded}
-            aria-controls={panelId}
-            data-accordion-trigger
-          >
-            <span class="accordion__title">{item.title}</span>
-            <ChevronDown class="accordion__icon" width={16} height={16} aria-hidden="true" />
-          </button>
-        </h3>
-        <div
-          class={`accordion__panel ${isExpanded ? 'accordion__panel--expanded' : ''}`}
-          id={panelId}
-          role="region"
-          aria-labelledby={triggerId}
-          hidden={!isExpanded}
-          data-accordion-panel
-        >
-          <div class="accordion__panel-inner">
-            {item.content ? (
-              <div class="accordion__panel-content" set:html={item.content} />
-            ) : (
-              <div class="accordion__panel-content accordion__panel-slot" data-accordion-slot-index={currentSlotIndex}>
-                <!-- Slot content distributed by script -->
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  })}
-  <!-- Slot content for distribution (same order as items) -->
-  <div class="accordion__slot-content" style="display: none;">
-    <slot />
-  </div>
-</div>
-<script is:inline>
-  (function initAccordions() {
-    function initOne(accordion) {
-      if (accordion.dataset.accordionInit === 'true') return;
-      accordion.dataset.accordionInit = 'true';
-      const isMultiple = accordion.getAttribute('data-allow-multiple') === 'true';
-      const triggers = accordion.querySelectorAll('[data-accordion-trigger]');
-      const setExpanded = (trigger, expanded) => {
-        const panelId = trigger.getAttribute('aria-controls');
-        const panel = panelId ? accordion.querySelector('#' + CSS.escape(panelId)) : null;
-        trigger.setAttribute('aria-expanded', String(expanded));
-        trigger.classList.toggle('accordion__trigger--expanded', expanded);
-        if (panel) {
-          panel.classList.toggle('accordion__panel--expanded', expanded);
-          panel.hidden = !expanded;
-        }
-      };
-      const toggle = (trigger) => {
-        const expanded = trigger.getAttribute('aria-expanded') === 'true';
-        if (!isMultiple) {
-          triggers.forEach((t) => setExpanded(t, false));
-        }
-        setExpanded(trigger, !expanded);
-      };
-      triggers.forEach((trigger) => {
-        trigger.addEventListener('click', () => toggle(trigger));
-      });
-      triggers.forEach((trigger, index) => {
-        trigger.addEventListener('keydown', (e) => {
-          let targetIndex = index;
-          switch (e.key) {
-            case 'ArrowDown':
-              e.preventDefault();
-              targetIndex = Math.min(index + 1, triggers.length - 1);
-              break;
-            case 'ArrowUp':
-              e.preventDefault();
-              targetIndex = Math.max(index - 1, 0);
-              break;
-            case 'Home':
-              e.preventDefault();
-              targetIndex = 0;
-              break;
-            case 'End':
-              e.preventDefault();
-              targetIndex = triggers.length - 1;
-              break;
-            case 'Enter':
-            case ' ':
-              e.preventDefault();
-              toggle(trigger);
-              return;
-            default:
-              return;
-          }
-          if (targetIndex !== index) {
-            triggers[targetIndex].focus();
-          }
-        });
-      });
-      const slotContent = accordion.querySelector('.accordion__slot-content');
-      if (slotContent) {
-        const slotChildren = Array.from(slotContent.children);
-        slotChildren.forEach((child, index) => {
-          const slotPlaceholder = accordion.querySelector('[data-accordion-slot-index="' + index + '"]');
-          if (slotPlaceholder) {
-            slotPlaceholder.appendChild(child);
-          }
-        });
-        slotContent.remove();
-      }
-    }
-    function init() {
-      document.querySelectorAll('[data-accordion]').forEach(initOne);
-    }
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', init);
-    } else {
-      init();
-    }
-  })();
-</script>

package/scaffold/astro-app/src/components/Alert.astro DELETED Viewed

@@ -1,131 +0,0 @@
----
-import Close from './icons/Close.astro';
-interface Props {
-  variant?: 'success' | 'error' | 'warning' | 'info';
-  dismissible?: boolean;
-  autoDismiss?: number; // Duration in milliseconds (0 = disabled)
-  class?: string;
-  id?: string;
-}
-const {
-  variant = 'info',
-  dismissible = false,
-  autoDismiss = 0, // 0 means disabled
-  class: className = '',
-  id,
-} = Astro.props;
-const alertId = id || `alert-${Math.random().toString(36).substr(2, 9)}`;
-const variantClass = `alert--${variant}`;
-const classes = `alert ${variantClass} ${className}`.trim();
-// ARIA labels based on variant
-const ariaLabels = {
-  success: 'Success message',
-  error: 'Error message',
-  warning: 'Warning message',
-  info: 'Information message',
-};
----
-<div
-  class={classes}
-  id={alertId}
-  role="alert"
-  aria-live="polite"
-  aria-atomic="true"
-  aria-label={ariaLabels[variant]}
->
-  <div class="alert__content">
-    <slot />
-  </div>
-  {dismissible && (
-    <button
-      type="button"
-      class="alert__close"
-      aria-label="Dismiss alert"
-      data-alert-close
-      aria-controls={alertId}
-    >
-      <Close width={16} height={16} />
-    </button>
-  )}
-</div>
-<script define:vars={{ alertId, autoDismiss }}>
-  (function initAlert() {
-    const init = () => {
-      const alert = document.querySelector(`#${alertId}`);
-      if (!alert) {
-        if (document.readyState === 'loading') {
-          document.addEventListener('DOMContentLoaded', init);
-          return;
-        }
-        return;
-      }
-      // Skip if already initialized
-      if (alert.hasAttribute('data-alert-initialized')) return;
-      alert.setAttribute('data-alert-initialized', 'true');
-      const closeBtn = alert.querySelector('[data-alert-close]');
-      let closeAlert = () => {
-        // Announce dismissal to screen readers
-        const announcement = document.createElement('div');
-        announcement.setAttribute('role', 'status');
-        announcement.setAttribute('aria-live', 'polite');
-        announcement.className = 'sr-only';
-        announcement.textContent = 'Alert dismissed';
-        document.body.appendChild(announcement);
-        // Remove alert with animation
-        alert.style.opacity = '0';
-        alert.style.transform = 'translateY(-10px)';
-        setTimeout(() => {
-          alert.remove();
-          if (document.body.contains(announcement)) {
-            document.body.removeChild(announcement);
-          }
-        }, 200);
-      };
-      // Auto-dismiss functionality
-      if (autoDismiss > 0) {
-        const timeoutId = setTimeout(() => {
-          closeAlert();
-        }, autoDismiss);
-        // Clear timeout if user manually dismisses
-        if (closeBtn) {
-          const originalClose = closeAlert;
-          closeAlert = () => {
-            clearTimeout(timeoutId);
-            originalClose();
-          };
-        }
-      }
-      if (closeBtn) {
-        closeBtn.addEventListener('click', closeAlert);
-        // Keyboard support
-        closeBtn.addEventListener('keydown', (e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            closeAlert();
-          }
-        });
-      }
-    };
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', init);
-    } else {
-      init();
-    }
-  })();
-</script>

package/scaffold/astro-app/src/components/Avatar.astro DELETED Viewed

@@ -1,59 +0,0 @@
----
-import { Image } from 'astro:assets';
-interface Props {
-  /** Image URL (when provided, shows image; otherwise shows initials or placeholder). For remote URLs, add the domain to image.domains in astro.config. */
-  src?: string;
-  /** Alt text for the image */
-  alt?: string;
-  /** Full name used to derive initials when no image (e.g. "Jane Doe" → "JD") */
-  name?: string;
-  /** Override initials when no image (e.g. "JD"); ignored if name is provided */
-  initials?: string;
-  /** Size */
-  size?: 'sm' | 'md' | 'lg';
-  /** Shape */
-  shape?: 'circle' | 'square';
-  class?: string;
-}
-const {
-  src,
-  alt = '',
-  name = '',
-  initials: initialsProp = '',
-  size = 'md',
-  shape = 'circle',
-  class: className = '',
-} = Astro.props;
-function getInitials(name: string): string {
-  const parts = name.trim().split(/\s+/).filter(Boolean);
-  if (parts.length === 0) return '';
-  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
-  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-}
-const displayInitials = name ? getInitials(name) : initialsProp;
-const sizeClass = `avatar--${size}`;
-const shapeClass = `avatar--${shape}`;
-const classes = `avatar ${sizeClass} ${shapeClass} ${className}`.trim();
-const sizePixels = size === 'sm' ? 32 : size === 'lg' ? 48 : 40;
----
-<span class={classes} role="img" aria-label={alt || name || (displayInitials ? `Avatar: ${displayInitials}` : 'Avatar')}>
-  {src ? (
-    <Image
-      src={src}
-      alt={alt || name || ''}
-      width={sizePixels}
-      height={sizePixels}
-      class="avatar__img"
-    />
-  ) : (
-    <span class="avatar__initials" aria-hidden="true">
-      {displayInitials || '?'}
-    </span>
-  )}
-</span>

package/scaffold/astro-app/src/components/Badge.astro DELETED Viewed

@@ -1,24 +0,0 @@
----
-interface Props {
-  variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
-  size?: 'sm' | 'md' | 'lg';
-  pill?: boolean;
-  class?: string;
-}
-const {
-  variant = 'primary',
-  size = 'md',
-  pill = false,
-  class: className = '',
-} = Astro.props;
-const variantClass = `badge--${variant}`;
-const sizeClass = `badge--${size}`;
-const pillClass = pill ? 'badge--pill' : '';
-const classes = `badge ${variantClass} ${sizeClass} ${pillClass} ${className}`.trim();
----
-<span class={classes}>
-  <slot />
-</span>

package/scaffold/astro-app/src/components/Breadcrumb.astro DELETED Viewed

@@ -1,61 +0,0 @@
----
-import ChevronDown from './icons/ChevronDown.astro';
-interface BreadcrumbItem {
-  label: string;
-  href?: string;
-}
-interface Props {
-  items: BreadcrumbItem[];
-  separator?: 'chevron' | 'slash' | 'arrow' | string;
-  class?: string;
-}
-const {
-  items,
-  separator = 'chevron',
-  class: className = '',
-} = Astro.props;
-const separatorVariant =
-  separator === 'slash' ? 'breadcrumb--slash' :
-  separator === 'arrow' ? 'breadcrumb--arrow' :
-  'breadcrumb--chevron';
-const classes = `breadcrumb ${separatorVariant} ${className}`.trim();
-const separatorChar = separator === 'slash' ? '/' : separator === 'arrow' ? '›' : typeof separator === 'string' ? separator : null;
-const useIcon = separator === 'chevron';
----
-<nav class={classes} aria-label="Breadcrumb">
-  <ol class="breadcrumb__list">
-    {items.map((item, index) => {
-      const isLast = index === items.length - 1;
-      const isCurrent = isLast || !item.href;
-      return (
-        <li class={`breadcrumb__item ${isCurrent ? 'breadcrumb__item--current' : ''}`}>
-          {isCurrent ? (
-            <span class="breadcrumb__current" aria-current="page">
-              {item.label}
-            </span>
-          ) : (
-            <a class="breadcrumb__link" href={item.href}>
-              {item.label}
-            </a>
-          )}
-          {!isLast && (
-            <span class="breadcrumb__separator" aria-hidden="true">
-              {useIcon ? (
-                <ChevronDown class="breadcrumb__separator-icon" width={14} height={14} />
-              ) : (
-                separatorChar ?? '›'
-              )}
-            </span>
-          )}
-        </li>
-      );
-    })}
-  </ol>
-</nav>

package/scaffold/astro-app/src/components/Button.astro DELETED Viewed

@@ -1,3 +0,0 @@
-<button>
-	Click me
-</button>

package/scaffold/astro-app/src/components/Card.astro DELETED Viewed

@@ -1,18 +0,0 @@
----
-interface Props {
-  variant?: 'default' | 'elevated' | 'outlined' | 'filled';
-  class?: string;
-}
-const {
-  variant = 'default',
-  class: className = '',
-} = Astro.props;
-const variantClass = variant !== 'default' ? `card--${variant}` : '';
-const classes = `card ${variantClass} ${className}`.trim();
----
-<div class={classes}>
-  <slot />
-</div>

package/scaffold/astro-app/src/components/Checkbox.astro DELETED Viewed

@@ -1,38 +0,0 @@
----
-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="checkbox"
-  id={id}
-  name={name}
-  value={value}
-  checked={checked}
-  required={required}
-  disabled={disabled}
-  class={className}
-  aria-describedby={ariaDescribedby}
-  aria-label={ariaLabel}
-/>