rizzo-css 0.0.53 → 0.0.55

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.53",
+  "version": "0.0.55",
+  "engines": { "node": ">=18" },
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
   },
-  "description": "A modern CSS design system with semantic theming, 14 themes, and accessible components (BEM). Optimized for Vanilla JS, Astro, and Svelte; same CSS and component styles for all.",
+  "description": "A modern CSS design system with semantic theming, 14 themes, accessible components (BEM), and pre-built blocks. Same CSS and components for Vanilla JS, Astro, and Svelte; CLI scaffolds with flat nav (Docs, Components, Blocks, Themes, Colors).",
   "style": "dist/rizzo.min.css",
   "main": "dist/rizzo.min.css",
   "unpkg": "dist/rizzo.min.css",
@@ -26,12 +27,12 @@
     "bin",
     "dist",
     "scaffold/astro",
-    "scaffold/astro-core",
+    "scaffold/landing","scaffold/minimal",
     "scaffold/config",
     "scaffold/shared",
     "scaffold/svelte",
-    "scaffold/svelte-core",
     "scaffold/utils",
+    "scaffold/starter",
     "scaffold/vanilla"
   ],
   "keywords": [

package/scaffold/astro/AlertDialog.astro

@@ -0,0 +1,86 @@
+---
+/**
+ * Alert Dialog: modal for confirm/cancel actions (destructive or important).
+ * Uses role="alertdialog". Matches shadcn-svelte Alert Dialog.
+ */
+import Close from './icons/Close.astro';
+
+interface Props {
+	id?: string;
+	title?: string;
+	description?: string;
+	open?: boolean;
+	class?: string;
+}
+
+const { id, title = 'Are you sure?', description, open = false, class: className = '' } = Astro.props;
+const dialogId = id || `alert-dialog-${Math.random().toString(36).slice(2, 9)}`;
+---
+
+<div
+	class={`alert-dialog__overlay ${open ? 'alert-dialog__overlay--open' : ''}`.trim()}
+	data-alert-dialog-overlay
+	aria-hidden={!open}
+	id={`${dialogId}-overlay`}
+></div>
+<div
+	class={`alert-dialog ${className}`.trim()}
+	role="alertdialog"
+	aria-modal="true"
+	aria-labelledby={`${dialogId}-title`}
+	aria-describedby={description ? `${dialogId}-desc` : undefined}
+	aria-hidden={!open}
+	id={dialogId}
+	data-alert-dialog
+	hidden={!open}
+>
+	<div class="alert-dialog__content">
+		<h2 id={`${dialogId}-title`} class="alert-dialog__title">{title}</h2>
+		{description && (
+			<p id={`${dialogId}-desc`} class="alert-dialog__description">{description}</p>
+		)}
+		<div class="alert-dialog__actions">
+			<slot name="actions" />
+		</div>
+	</div>
+</div>
+
+<script is:inline define:vars={{ dialogId, open }}>
+(function () {
+	function init() {
+		const dialog = document.getElementById(dialogId);
+		if (!dialog) return;
+		const overlay = document.getElementById(dialogId + '-overlay');
+		if (!overlay) return;
+		let escapeHandler = null;
+		const close = () => {
+			dialog.setAttribute('aria-hidden', 'true');
+			dialog.hidden = true;
+			overlay.classList.remove('alert-dialog__overlay--open');
+			overlay.setAttribute('aria-hidden', 'true');
+			if (escapeHandler) {
+				document.removeEventListener('keydown', escapeHandler);
+				escapeHandler = null;
+			}
+		};
+		const openDialog = () => {
+			dialog.removeAttribute('hidden');
+			dialog.setAttribute('aria-hidden', 'false');
+			overlay.classList.add('alert-dialog__overlay--open');
+			overlay.setAttribute('aria-hidden', 'false');
+			if (!escapeHandler) {
+				escapeHandler = (e) => { if (e.key === 'Escape') close(); };
+				document.addEventListener('keydown', escapeHandler);
+			}
+		};
+		dialog.querySelectorAll('[data-alert-dialog-close]').forEach((btn) => btn.addEventListener('click', close));
+		overlay.addEventListener('click', close);
+		dialog.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
+		window['openAlertDialog_' + dialogId.replace(/-/g, '_')] = openDialog;
+		window['closeAlertDialog_' + dialogId.replace(/-/g, '_')] = close;
+		if (open) openDialog();
+	}
+	if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+	else init();
+})();
+</script>

package/scaffold/astro/AspectRatio.astro

@@ -0,0 +1,22 @@
+---
+/**
+ * Enforces an aspect ratio on the child (e.g. 16/9, 1/1). Matches shadcn-svelte Aspect Ratio.
+ */
+interface Props {
+	/** Ratio as width/height, e.g. 16/9, 1/1, 4/3 */
+	ratio?: number;
+	class?: string;
+}
+
+const { ratio = 16 / 9, class: className = '' } = Astro.props;
+const paddingPercent = (1 / ratio) * 100;
+---
+
+<div
+	class={`aspect-ratio ${className}`.trim()}
+	style={`--aspect-ratio: ${ratio}; --aspect-ratio-padding: ${paddingPercent}%;`}
+>
+	<div class="aspect-ratio__inner">
+		<slot />
+	</div>
+</div>

package/scaffold/astro/ButtonGroup.astro

@@ -0,0 +1,16 @@
+---
+/**
+ * Group of buttons attached together (no gap). Matches shadcn-svelte Button Group.
+ */
+interface Props {
+	orientation?: 'horizontal' | 'vertical';
+	class?: string;
+}
+
+const { orientation = 'horizontal', class: className = '' } = Astro.props;
+const orientationClass = orientation === 'vertical' ? 'button-group--vertical' : '';
+---
+
+<div class={`button-group ${orientationClass} ${className}`.trim()} role="group">
+	<slot />
+</div>

package/scaffold/astro/Collapsible.astro

@@ -0,0 +1,69 @@
+---
+/**
+ * Single expand/collapse section (one trigger, one panel). Use Accordion for multiple sections.
+ * Matches shadcn-svelte Collapsible pattern.
+ */
+import ChevronDown from './icons/ChevronDown.astro';
+
+interface Props {
+	id?: string;
+	defaultOpen?: boolean;
+	triggerLabel?: string;
+	class?: string;
+}
+
+const { id, defaultOpen = false, triggerLabel = 'Toggle', class: className = '' } = Astro.props;
+const collapsibleId = id || `collapsible-${Math.random().toString(36).slice(2, 9)}`;
+const triggerId = `${collapsibleId}-trigger`;
+const panelId = `${collapsibleId}-panel`;
+---
+
+<div class={`collapsible ${className}`.trim()} data-collapsible id={collapsibleId}>
+	<button
+		type="button"
+		class={`collapsible__trigger ${defaultOpen ? 'collapsible__trigger--open' : ''}`}
+		id={triggerId}
+		aria-expanded={defaultOpen}
+		aria-controls={panelId}
+		data-collapsible-trigger
+	>
+		<span class="collapsible__trigger-label">{triggerLabel}</span>
+		<ChevronDown class="collapsible__icon" width={16} height={16} aria-hidden="true" />
+	</button>
+	<div
+		class={`collapsible__panel ${defaultOpen ? 'collapsible__panel--open' : ''}`}
+		id={panelId}
+		role="region"
+		aria-labelledby={triggerId}
+		hidden={!defaultOpen}
+		data-collapsible-panel
+	>
+		<div class="collapsible__panel-inner">
+			<slot />
+		</div>
+	</div>
+</div>
+
+<script is:inline>
+function initCollapsible() {
+	document.querySelectorAll('[data-collapsible]').forEach(function (root) {
+		if (root.dataset.collapsibleInit === 'true') return;
+		root.dataset.collapsibleInit = 'true';
+		var trigger = root.querySelector('[data-collapsible-trigger]');
+		var panel = root.querySelector('[data-collapsible-panel]');
+		if (!trigger || !panel) return;
+		trigger.addEventListener('click', function () {
+			var open = trigger.getAttribute('aria-expanded') === 'true';
+			trigger.setAttribute('aria-expanded', String(!open));
+			trigger.classList.toggle('collapsible__trigger--open', !open);
+			panel.classList.toggle('collapsible__panel--open', !open);
+			panel.hidden = open;
+		});
+	});
+}
+if (document.readyState === 'loading') {
+	document.addEventListener('DOMContentLoaded', initCollapsible);
+} else {
+	initCollapsible();
+}
+</script>

package/scaffold/astro/ContextMenu.astro

@@ -0,0 +1,58 @@
+---
+/**
+ * Right-click menu. Matches shadcn-svelte Context Menu.
+ */
+interface Props {
+	id?: string;
+	class?: string;
+}
+
+const { id, class: className = '' } = Astro.props;
+const ctxId = id || `context-menu-${Math.random().toString(36).slice(2, 9)}`;
+---
+
+<div class={`context-menu ${className}`.trim()} data-context-menu id={ctxId}>
+	<slot name="trigger" />
+	<div
+		class="context-menu__content"
+		role="menu"
+		aria-hidden="true"
+		hidden
+		data-context-menu-content
+		id={`${ctxId}-content`}
+	>
+		<slot />
+	</div>
+</div>
+
+<script is:inline define:vars={{ ctxId }}>
+(function () {
+	function init() {
+		const root = document.getElementById(ctxId);
+		if (!root) return;
+		const trigger = root.querySelector('[data-context-menu-trigger]');
+		const content = root.querySelector('[data-context-menu-content]');
+		if (!trigger || !content) return;
+		const close = () => {
+			content.classList.remove('context-menu__content--open');
+			content.hidden = true;
+			content.setAttribute('aria-hidden', 'true');
+			document.removeEventListener('click', close);
+		};
+		trigger.addEventListener('contextmenu', function (e) {
+			e.preventDefault();
+			content.hidden = false;
+			content.classList.add('context-menu__content--open');
+			content.setAttribute('aria-hidden', 'false');
+			content.style.left = e.clientX + 'px';
+			content.style.top = e.clientY + 'px';
+			requestAnimationFrame(() => document.addEventListener('click', close));
+		});
+		content.addEventListener('keydown', function (e) {
+			if (e.key === 'Escape') close();
+		});
+	}
+	if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+	else init();
+})();
+</script>

package/scaffold/astro/CopyToClipboard.astro

@@ -12,6 +12,8 @@ interface Props {
   buttonLabel?: string;
   class?: string;
   id?: string;
+  /** When true, add data-color-copy so the colors page script can find and update this button. */
+  dataColorCopy?: boolean;
 }
 
 const {
@@ -22,6 +24,7 @@ const {
   buttonLabel,
   class: className = '',
   id,
+  dataColorCopy = false,
 } = Astro.props;
 
 const buttonId = id || `copy-btn-${Math.random().toString(36).substr(2, 9)}`;
@@ -41,6 +44,7 @@ const buttonClass = ['copy-to-clipboard', iconOnly ? 'copy-to-clipboard--icon-on
     id={buttonId}
     data-copy-icon-only={iconOnly ? 'true' : undefined}
     data-copy-button-label={iconOnly ? (buttonLabel || 'Copy') : undefined}
+    data-color-copy={dataColorCopy ? 'true' : undefined}
   >
     <span class="copy-to-clipboard__text">{displayText}</span>
     <span class="copy-to-clipboard__icon copy-to-clipboard__icon--copy" aria-hidden="true">

package/scaffold/astro/Dashboard.astro

@@ -0,0 +1,74 @@
+---
+interface Props {
+  /** Aria-label for the sidebar (e.g. "Dashboard navigation") */
+  sidebarLabel?: string;
+  /** Optional class for the root wrapper */
+  class?: string;
+}
+
+const { sidebarLabel = 'Dashboard navigation', class: className = '' } = Astro.props;
+const classes = `dashboard ${className}`.trim();
+---
+
+<div class={classes}>
+  <aside class="dashboard__sidebar" aria-label={sidebarLabel}>
+    <slot name="sidebar">
+      <nav class="dashboard__nav">
+        <a href="/" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
+        <a href="/" class="dashboard__nav-link">Items</a>
+        <a href="/" class="dashboard__nav-link">Settings</a>
+      </nav>
+    </slot>
+  </aside>
+  <main id="main-content" class="dashboard__main">
+    <slot />
+  </main>
+</div>
+
+<style is:global>
+  .dashboard {
+    display: flex;
+    min-height: 100vh;
+  }
+  .dashboard__sidebar {
+    width: 16rem;
+    flex-shrink: 0;
+    border-right: 1px solid var(--border);
+    padding: var(--spacing-4);
+    background: var(--background-alt);
+  }
+  .dashboard__nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+  }
+  .dashboard__nav-link {
+    display: block;
+    padding: var(--spacing-2) var(--spacing-3);
+    border-radius: var(--radius-md);
+    color: var(--text);
+    text-decoration: none;
+  }
+  .dashboard__nav-link:hover {
+    background: var(--background);
+  }
+  .dashboard__nav-link--active {
+    background: var(--accent);
+    color: var(--accent-text);
+  }
+  .dashboard__main {
+    flex: 1;
+    padding: var(--spacing-6);
+    overflow: auto;
+  }
+  @media (max-width: 768px) {
+    .dashboard {
+      flex-direction: column;
+    }
+    .dashboard__sidebar {
+      width: 100%;
+      border-right: none;
+      border-bottom: 1px solid var(--border);
+    }
+  }
+</style>

package/scaffold/astro/Empty.astro

@@ -0,0 +1,23 @@
+---
+/**
+ * Empty state: icon + title + optional description and action. Matches shadcn-svelte Empty.
+ */
+interface Props {
+	title?: string;
+	description?: string;
+	class?: string;
+}
+
+const { title = 'No results', description, class: className = '' } = Astro.props;
+---
+
+<div class={`empty ${className}`.trim()}>
+	<div class="empty__icon">
+		<slot name="icon" />
+	</div>
+	<h3 class="empty__title">{title}</h3>
+	{description && <p class="empty__description">{description}</p>}
+	<div class="empty__action">
+		<slot name="action" />
+	</div>
+</div>

package/scaffold/astro/HoverCard.astro

@@ -0,0 +1,64 @@
+---
+/**
+ * Floating panel that opens on hover (with delay). Matches shadcn-svelte Hover Card.
+ */
+interface Props {
+	id?: string;
+	openDelay?: number;
+	closeDelay?: number;
+	class?: string;
+}
+
+const { id, openDelay = 200, closeDelay = 100, class: className = '' } = Astro.props;
+const hoverId = id || `hover-card-${Math.random().toString(36).slice(2, 9)}`;
+---
+
+<div class={`hover-card ${className}`.trim()} data-hover-card id={hoverId}>
+	<slot name="trigger" />
+	<div
+		class="hover-card__content"
+		role="dialog"
+		aria-hidden="true"
+		hidden
+		data-hover-card-content
+		id={`${hoverId}-content`}
+	>
+		<slot />
+	</div>
+</div>
+
+<script is:inline define:vars={{ hoverId, openDelay, closeDelay }}>
+(function () {
+	function init() {
+		const root = document.getElementById(hoverId);
+		if (!root) return;
+		const trigger = root.querySelector('[data-hover-card-trigger]');
+		const content = root.querySelector('[data-hover-card-content]');
+		if (!trigger || !content) return;
+		let openT = null;
+		let closeT = null;
+		const open = () => {
+			clearTimeout(closeT);
+			openT = setTimeout(() => {
+				content.hidden = false;
+				content.classList.add('hover-card__content--open');
+				content.setAttribute('aria-hidden', 'false');
+			}, openDelay);
+		};
+		const close = () => {
+			clearTimeout(openT);
+			closeT = setTimeout(() => {
+				content.classList.remove('hover-card__content--open');
+				content.hidden = true;
+				content.setAttribute('aria-hidden', 'true');
+			}, closeDelay);
+		};
+		trigger.addEventListener('mouseenter', open);
+		trigger.addEventListener('mouseleave', close);
+		content.addEventListener('mouseenter', open);
+		content.addEventListener('mouseleave', close);
+	}
+	if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+	else init();
+})();
+</script>

package/scaffold/astro/Kbd.astro

@@ -0,0 +1,14 @@
+---
+/**
+ * Keyboard key styling for shortcuts (e.g. Ctrl+K). Matches shadcn-svelte Kbd pattern.
+ */
+interface Props {
+	class?: string;
+}
+
+const { class: className = '' } = Astro.props;
+---
+
+<kbd class={`kbd ${className}`.trim()}>
+	<slot />
+</kbd>

package/scaffold/astro/Label.astro

@@ -0,0 +1,24 @@
+---
+/**
+ * Standalone label for form controls. Use with `for` to associate with an input id.
+ * Matches shadcn-svelte Label / Field label pattern.
+ */
+interface Props {
+	for?: string;
+	required?: boolean;
+	class?: string;
+}
+
+const { for: forId, required = false, class: className = '' } = Astro.props;
+const classes = ['label', required ? 'label--required' : '', className].filter(Boolean).join(' ');
+---
+
+{forId ? (
+	<label for={forId} class={classes}>
+		<slot />
+	</label>
+) : (
+	<span class={classes}>
+		<slot />
+	</span>
+)}

package/scaffold/astro/Modal.astro

@@ -136,6 +136,15 @@ const classes = `modal ${sizeClass} ${className}`.trim();
       // Open modal
       const openModal = () => {
         previousActiveElement = document.activeElement;
+
+        if (overlay.parentNode !== document.body) {
+          document.body.appendChild(overlay);
+          document.body.appendChild(modal);
+        }
+        const layoutContent = document.querySelector('[data-layout-content]');
+        if (layoutContent) layoutContent.setAttribute('inert', '');
+        document.body.style.overflow = 'hidden';
+
         overlay.removeAttribute('inert');
         overlay.removeAttribute('hidden');
         overlay.setAttribute('aria-hidden', 'false');
@@ -145,11 +154,13 @@ const classes = `modal ${sizeClass} ${className}`.trim();
         modal.setAttribute('data-open', 'true');
         restoreFocusables(modal);
 
-        // Focus first focusable element or close button
+        // Focus first focusable element or close button (after rAF so restored tabindex is applied)
         const focusableElements = getFocusableElements(modal);
         const firstFocusable = focusableElements.length > 0 ? focusableElements[0] : closeBtn;
         if (firstFocusable) {
-          setTimeout(() => firstFocusable.focus(), 0);
+          requestAnimationFrame(() => {
+            firstFocusable.focus();
+          });
         }
 
         // Add focus trap
@@ -201,6 +212,10 @@ const classes = `modal ${sizeClass} ${className}`.trim();
         modal.setAttribute('aria-hidden', 'true');
         modal.removeAttribute('data-open');
 
+        const layoutContent = document.querySelector('[data-layout-content]');
+        if (layoutContent) layoutContent.removeAttribute('inert');
+        document.body.style.overflow = '';
+
         // Remove focus trap
         if (focusTrapHandler) {
           document.removeEventListener('keydown', focusTrapHandler);

package/scaffold/astro/Popover.astro

@@ -0,0 +1,62 @@
+---
+/**
+ * Floating panel triggered by a button. Matches shadcn-svelte Popover.
+ */
+interface Props {
+	id?: string;
+	open?: boolean;
+	class?: string;
+}
+
+const { id, open = false, class: className = '' } = Astro.props;
+const popoverId = id || `popover-${Math.random().toString(36).slice(2, 9)}`;
+---
+
+<div class={`popover ${className}`.trim()} data-popover id={popoverId}>
+	<slot name="trigger" />
+	<div
+		class={`popover__content ${open ? 'popover__content--open' : ''}`.trim()}
+		role="dialog"
+		aria-modal="false"
+		aria-hidden={!open}
+		hidden={!open}
+		data-popover-content
+		id={`${popoverId}-content`}
+	>
+		<slot />
+	</div>
+</div>
+
+<script is:inline define:vars={{ popoverId, open }}>
+(function () {
+	function init() {
+		const root = document.getElementById(popoverId);
+		if (!root) return;
+		const trigger = root.querySelector('[data-popover-trigger]');
+		const content = root.querySelector('[data-popover-content]');
+		if (!trigger || !content) return;
+		const close = () => {
+			content.classList.remove('popover__content--open');
+			content.hidden = true;
+			content.setAttribute('aria-hidden', 'true');
+		};
+		const toggle = () => {
+			const isOpen = !content.hidden;
+			if (isOpen) close();
+			else {
+				content.hidden = false;
+				content.classList.add('popover__content--open');
+				content.setAttribute('aria-hidden', 'false');
+			}
+		};
+		trigger.addEventListener('click', (e) => { e.preventDefault(); toggle(); });
+		document.addEventListener('click', (e) => {
+			if (!root.contains(e.target)) close();
+		});
+		content.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
+		if (open) toggle();
+	}
+	if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+	else init();
+})();
+</script>

package/scaffold/astro/ResizableHandle.astro

@@ -0,0 +1,16 @@
+---
+/**
+ * Drag handle between two ResizablePanes. Use withHandle for a visible handle grip.
+ */
+interface Props {
+	withHandle?: boolean;
+	class?: string;
+}
+
+const { withHandle = false, class: className = '' } = Astro.props;
+---
+
+<div
+	class={`resizable__handle ${withHandle ? 'resizable__handle--with-handle' : ''} ${className}`.trim()}
+	data-resizable-handle
+></div>

package/scaffold/astro/ResizablePane.astro

@@ -0,0 +1,20 @@
+---
+/**
+ * A single pane in a ResizablePaneGroup. Use defaultSize (0–100) for initial size %.
+ */
+interface Props {
+	defaultSize?: number;
+	class?: string;
+}
+
+const { defaultSize = 50, class: className = '' } = Astro.props;
+const size = Math.min(100, Math.max(0, defaultSize));
+---
+
+<div
+	class={`resizable__pane ${className}`.trim()}
+	data-resizable-pane
+	style={`flex: 1 1 ${size}%`}
+>
+	<slot />
+</div>