rizzo-css 0.0.49 → 0.0.50

package/README.md

@@ -63,7 +63,7 @@ import 'rizzo-css';
 **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
 
 ```html
-<!-- unpkg (pin version: replace @latest with @0.0.49 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.50 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->

package/dist/rizzo.min.css

@@ -114,7 +114,7 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
 .font-switcher__option--active:hover{background-color:var(--background);border-left:var(--border-width-accent) solid var(--accent);border-radius:var(--radius);color:var(--text);font-weight:var(--font-weight-medium);padding-left:calc(var(--spacing-4) - var(--border-width-accent))}.font-switcher__option--active:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}@media (width <= 768px){.font-switcher,.font-switcher__menu{max-width:100%;width:100%}.font-switcher__menu{box-sizing:border-box;left:0;min-width:0;right:auto}}.settings__control .font-switcher{max-width:100%;width:100%}.settings__control .font-switcher__menu{box-sizing:border-box;max-width:100%;min-width:0;width:100%}.settings{inset:0;pointer-events:none;position:fixed;z-index:var(--z-settings)}.settings[aria-hidden="true"]{display:none}.settings__overlay{backdrop-filter:blur(var(--blur-sm));background-color:var(--overlay);inset:0;opacity:0;pointer-events:all;position:absolute;transition:opacity var(--transition-ease-out)}.settings[aria-hidden="false"] .settings__overlay[aria-hidden="false"],.settings__overlay[aria-hidden="false"]{opacity:1}.settings__panel{background-color:var(--background-alt);border-left:var(--border-width) solid var(--border);box-shadow:calc(var(--spacing-1)*-1) 0 var(--spacing-3) calc(var(--spacing-0-125)*-1) oklch(from var(--shadow-color) l c h/15%);display:flex;flex-direction:column;height:100%;max-width:var(--spacing-105);overflow-y:auto;pointer-events:all;position:absolute;right:0;top:0;transform:translateX(100%);transition:transform var(--transition-ease-out);width:100%}.settings__panel[data-open="true"]{transform:translateX(0)}.settings[aria-hidden="false"] .settings__panel:not([data-open]){transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.settings__overlay,.settings__panel{transition:none}}.settings__header{align-items:center;background-color:var(--background-alt);border-bottom:var(--border-width) solid var(--border);display:flex;justify-content:space-between;padding:var(--spacing-6);position:sticky;top:0;z-index:var(--z-dropdown)}.settings__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0}.settings__close{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;height:var(--spacing-8);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0;transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base);width:var(--spacing-8)}.settings__close:hover{background-color:var(--background-alt);border-color:var(--accent);color:var(--accent)}.settings__close:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__content{background-color:var(--background);display:flex;flex:1;flex-direction:column;gap:var(--spacing-8);padding:var(--spacing-6)}.settings__section{display:flex;flex-direction:column;gap:var(--spacing-4)}.settings__section-title{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4)}.settings__control{display:flex;flex-direction:column;gap:var(--spacing-3)}.settings__control .theme-switcher{max-width:100%;width:100%}.settings__control .theme-switcher__menu{box-sizing:border-box;max-width:100%;min-width:0;width:100%}.settings__label{align-items:center;color:var(--text);display:flex;font-weight:var(--font-weight-medium);justify-content:space-between;margin-bottom:var(--spacing-3)}.settings__label-text{font-size:var(--font-size-base)}.settings__label-value{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.settings__slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);cursor:pointer;height:var(--spacing-2);outline:none;width:100%}.settings__slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-moz-range-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);margin-top:calc(var(--spacing-2)*-1);-webkit-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-webkit-slider-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider::-moz-range-thumb{background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);-moz-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-moz-range-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__slider-labels{color:var(--text-dim);display:flex;font-size:var(--font-size-xs);justify-content:space-between;margin-top:var(--spacing-1)}.settings__checkbox-label{align-items:center;color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-3);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__checkbox-label:hover{color:var(--accent)}.settings__checkbox{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__radio-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.settings__radio-label{align-items:center;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);gap:var(--spacing-2);padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__radio-label:hover{background-color:var(--background-alt);color:var(--accent)}.settings__radio{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__help-text{color:var(--text-dim);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0}@media (width <= 640px){.settings__panel{max-width:100%;width:100%}}.modal__overlay{backdrop-filter:blur(var(--blur-sm));background-color:oklch(from var(--shadow-color) l c h/60%);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity var(--transition-slow) ease;z-index:var(--z-modal-backdrop)}.modal__overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;left:50%;max-height:var(--vh-90);max-width:var(--max-height-modal);opacity:0;pointer-events:none;position:fixed;top:50%;transform:translate(-50%,-50%);transition:opacity var(--transition-slow) ease,transform var(--transition-slow) ease;width:100%;z-index:var(--z-modal)}.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal__header{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-6)}.modal__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}.modal__close{align-items:center;background:none;border:none;border-radius:var(--radius);color:var(--text-dim);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base)}.modal__close:hover{background-color:var(--background-alt);color:var(--text)}.modal__close:focus{box-shadow:0 0 0 3px oklch(from var(--accent) l c h/10%);outline:none}.modal__body{flex:1;min-height:0;overflow-y:auto;padding:var(--spacing-6)}.modal__footer{border-top:var(--border-width) solid var(--border);display:flex;flex-shrink:0;gap:var(--spacing-3);justify-content:flex-end;padding:var(--spacing-6)}.modal__footer:empty{display:none}.modal--sm{max-width:var(--spacing-96)}.modal--md{max-width:var(--max-height-modal)}.modal--lg{max-width:var(--max-width-modal-lg)}
 .reduced-motion .modal,.reduced-motion .modal__overlay{transition:none}@media (width <= 640px){.modal{bottom:auto;left:auto;margin:var(--spacing-4);max-height:95vh;max-width:95vw;right:auto;top:auto}.modal,.modal[aria-hidden="false"]{transform:none}
   .modal__body,
-  .modal__footer,.modal__header{padding:var(--spacing-4)}}.copy-to-clipboard{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font-family:var(--font-family-mono);font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);position:relative;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.copy-to-clipboard:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent)}.copy-to-clipboard:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.copy-to-clipboard__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-to-clipboard__icon{align-items:center;color:var(--icon);display:flex;flex-shrink:0;height:var(--spacing-4);justify-content:center;transition:opacity var(--transition-base),transform var(--transition-base);width:var(--spacing-4)}.copy-to-clipboard__icon--check{opacity:0;position:absolute;right:var(--spacing-3);transform:scale(var(--scale-80))}.copy-to-clipboard__icon--check:not(.copy-to-clipboard__icon--hidden){opacity:1;transform:scale(var(--scale-100))}.copy-to-clipboard__icon--copy.copy-to-clipboard__icon--hidden{opacity:0;transform:scale(var(--scale-80))}.copy-to-clipboard__feedback{border-width:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.alert{align-items:flex-start;background-color:var(--alert-bg);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-3);padding:var(--spacing-4) var(--spacing-5);position:relative;transition:opacity var(--transition-base),transform var(--transition-base)}.alert:last-child{margin-bottom:0}.alert__content{flex:1;min-width:0}.alert__close{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius);color:inherit;cursor:pointer;display:flex;fill:none;flex-shrink:0;height:var(--spacing-6);justify-content:center;margin:calc(var(--spacing-1)*-1) calc(var(--spacing-2)*-1) calc(var(--spacing-1)*-1) 0;opacity:var(--opacity-80);padding:0;stroke:currentcolor;transition:opacity var(--transition-base),background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base);width:var(--spacing-6)}.alert__close:hover{background-color:oklch(from var(--background) l c h/25%);border-color:var(--border);color:var(--text);opacity:1}.alert__close:focus-visible{opacity:1;outline:var(--outline-width) solid currentcolor;outline-offset:var(--outline-offset)}.alert--success{background-color:var(--alert-success-bg);border-color:var(--success);color:var(--success-text)}.alert--error{background-color:var(--alert-error-bg);border-color:var(--error);color:var(--error-text)}.alert--warning{background-color:var(--alert-warning-bg);border-color:var(--warning)}.alert--warning,.alert--warning .alert__content,
+  .modal__footer,.modal__header{padding:var(--spacing-4)}}.copy-to-clipboard{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font-family:var(--font-family-mono);font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);position:relative;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.copy-to-clipboard:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent)}.copy-to-clipboard:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.copy-to-clipboard__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-to-clipboard__icon{align-items:center;color:var(--icon);display:flex;flex-shrink:0;height:var(--spacing-4);justify-content:center;transition:opacity var(--transition-base),transform var(--transition-base);width:var(--spacing-4)}.copy-to-clipboard__icon--check{opacity:0;position:absolute;right:var(--spacing-3);transform:scale(var(--scale-80))}.copy-to-clipboard__icon--check:not(.copy-to-clipboard__icon--hidden){opacity:1;transform:scale(var(--scale-100))}.copy-to-clipboard__icon--copy.copy-to-clipboard__icon--hidden{opacity:0;transform:scale(var(--scale-80))}.copy-to-clipboard__feedback{border-width:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.copy-to-clipboard--icon-only{padding:var(--spacing-2)}.copy-to-clipboard--icon-only .copy-to-clipboard__text{border-width:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.copy-to-clipboard--icon-only .copy-to-clipboard__icon--check{right:var(--spacing-2)}.alert{align-items:flex-start;background-color:var(--alert-bg);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-3);padding:var(--spacing-4) var(--spacing-5);position:relative;transition:opacity var(--transition-base),transform var(--transition-base)}.alert:last-child{margin-bottom:0}.alert__content{flex:1;min-width:0}.alert__close{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius);color:inherit;cursor:pointer;display:flex;fill:none;flex-shrink:0;height:var(--spacing-6);justify-content:center;margin:calc(var(--spacing-1)*-1) calc(var(--spacing-2)*-1) calc(var(--spacing-1)*-1) 0;opacity:var(--opacity-80);padding:0;stroke:currentcolor;transition:opacity var(--transition-base),background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base);width:var(--spacing-6)}.alert__close:hover{background-color:oklch(from var(--background) l c h/25%);border-color:var(--border);color:var(--text);opacity:1}.alert__close:focus-visible{opacity:1;outline:var(--outline-width) solid currentcolor;outline-offset:var(--outline-offset)}.alert--success{background-color:var(--alert-success-bg);border-color:var(--success);color:var(--success-text)}.alert--error{background-color:var(--alert-error-bg);border-color:var(--error);color:var(--error-text)}.alert--warning{background-color:var(--alert-warning-bg);border-color:var(--warning)}.alert--warning,.alert--warning .alert__content,
 .alert--warning .alert__content strong{color:var(--warning-text)}.alert--warning .alert__close{color:var(--warning-text);opacity:.9}.alert--warning .alert__close:hover{color:var(--text)}.alert--info{background-color:var(--alert-info-bg);border-color:var(--info);color:var(--info-text)}.alert-examples-container{align-items:stretch;display:flex;flex-direction:column;justify-content:center;min-height:8rem}.toast{max-width:var(--spacing-96);pointer-events:none;position:fixed;width:100%;z-index:var(--z-toast)}.toast .alert{box-shadow:var(--shadow-lg);margin-bottom:var(--spacing-2);pointer-events:auto}
 .toast--bottom-right .alert,.toast--top-right .alert{animation:toast-slide-in-right var(--transition-slow) ease-out}
 .toast--bottom-left .alert,.toast--top-left .alert{animation:toast-slide-in-left var(--transition-slow) ease-out}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
   },

package/scaffold/astro/CopyToClipboard.astro

@@ -6,6 +6,10 @@ interface Props {
   value: string;
   label?: string;
   format?: string;
+  /** When true, only the copy/check icons are shown (e.g. in code blocks). */
+  iconOnly?: boolean;
+  /** For icon-only: accessible label for the hidden text (e.g. "Copy code"). */
+  buttonLabel?: string;
   class?: string;
   id?: string;
 }
@@ -14,24 +18,31 @@ const {
   value,
   label,
   format,
+  iconOnly = false,
+  buttonLabel,
   class: className = '',
   id,
 } = Astro.props;
 
 const buttonId = id || `copy-btn-${Math.random().toString(36).substr(2, 9)}`;
-const defaultTooltip = label || 'Copy to clipboard';
+const defaultTooltip = label || (iconOnly ? (buttonLabel || 'Copy') : 'Copy to clipboard');
+const ariaLabel = label || (iconOnly ? (buttonLabel || 'Copy to clipboard') : `Copy ${value} to clipboard`);
+const displayText = iconOnly ? (buttonLabel || 'Copy') : value;
+const buttonClass = ['copy-to-clipboard', iconOnly ? 'copy-to-clipboard--icon-only' : '', className].filter(Boolean).join(' ').trim();
 ---
 
 <span class="tooltip-host" data-tooltip={defaultTooltip}>
   <button
     type="button"
-    class={`copy-to-clipboard ${className}`.trim()}
+    class={buttonClass}
     data-copy-value={value}
     data-copy-format={format}
-    aria-label={label || `Copy ${value} to clipboard`}
+    aria-label={ariaLabel}
     id={buttonId}
+    data-copy-icon-only={iconOnly ? 'true' : undefined}
+    data-copy-button-label={iconOnly ? (buttonLabel || 'Copy') : undefined}
   >
-    <span class="copy-to-clipboard__text">{value}</span>
+    <span class="copy-to-clipboard__text">{displayText}</span>
     <span class="copy-to-clipboard__icon copy-to-clipboard__icon--copy" aria-hidden="true">
       <Copy width={16} height={16} />
     </span>
@@ -67,8 +78,12 @@ const defaultTooltip = label || 'Copy to clipboard';
         const checkIcon = button.querySelector('.copy-to-clipboard__icon--check');
         const textSpan = button.querySelector('.copy-to-clipboard__text');
         
-        // Update text span with current value
+        // Update text span with current value (or fixed label when icon-only)
         const updateDisplay = () => {
+          if (button.hasAttribute('data-copy-icon-only')) {
+            if (textSpan) textSpan.textContent = button.getAttribute('data-copy-button-label') || 'Copy';
+            return;
+          }
           const value = getValue();
           if (textSpan) {
             textSpan.textContent = value || '';

package/scaffold/svelte/CopyToClipboard.svelte

@@ -3,16 +3,23 @@
     value: string;
     label?: string;
     format?: string;
+    /** When true, only the copy/check icons are shown (e.g. in code blocks). */
+    iconOnly?: boolean;
+    /** For icon-only: accessible label for the hidden text (e.g. "Copy code"). */
+    buttonLabel?: string;
     class?: string;
     id?: string;
   }
-  let { value, label, format, class: className = '', id }: Props = $props();
+  let { value, label, format, iconOnly = false, buttonLabel, class: className = '', id }: Props = $props();
 
   let copied = $state(false);
   let feedbackText = $state('');
   const fallbackId = `copy-btn-${Math.random().toString(36).slice(2, 11)}`;
   const buttonId = $derived(id ?? fallbackId);
-  const classes = $derived(['copy-to-clipboard', className].filter(Boolean).join(' ').trim());
+  const displayText = $derived(iconOnly ? (buttonLabel ?? 'Copy') : value);
+  const classes = $derived(['copy-to-clipboard', iconOnly ? 'copy-to-clipboard--icon-only' : '', className].filter(Boolean).join(' ').trim());
+  const ariaLabel = $derived(copied ? (format ? `Copied ${format}!` : 'Copied!') : (label ?? (iconOnly ? (buttonLabel ?? 'Copy to clipboard') : `Copy ${value} to clipboard`)));
+  const tooltipText = $derived(copied ? (format ? `Copied ${format}!` : 'Copied!') : (label ?? (iconOnly ? (buttonLabel ?? 'Copy') : 'Copy to clipboard')));
 
   async function copy() {
     if (!value) return;
@@ -48,11 +55,11 @@
   }
 </script>
 
-<span class="tooltip-host" data-tooltip={copied ? (format ? `Copied ${format}!` : 'Copied!') : (label ?? 'Copy to clipboard')}>
+<span class="tooltip-host" data-tooltip={tooltipText}>
   <button
     type="button"
     class={classes}
-    aria-label={copied ? (format ? `Copied ${format}!` : 'Copied!') : (label ?? `Copy ${value} to clipboard`)}
+    aria-label={ariaLabel}
     id={buttonId}
     onclick={copy}
     onkeydown={(e) => {
@@ -62,7 +69,7 @@
       }
     }}
   >
-    <span class="copy-to-clipboard__text">{value}</span>
+    <span class="copy-to-clipboard__text">{displayText}</span>
     <span class="copy-to-clipboard__icon copy-to-clipboard__icon--copy" class:copy-to-clipboard__icon--hidden={copied} aria-hidden="true">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
         <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />

package/scaffold/vanilla/README-RIZZO.md

@@ -27,7 +27,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
 - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`  
 - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`  
 
-(Replace `@latest` with a specific version, e.g. `@0.0.49`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.50`, in production.)
 
 The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.
 

package/scaffold/vanilla/components/accordion.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/copy-to-clipboard.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/divider.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/docs-sidebar.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/dropdown.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/font-switcher.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/footer.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/forms.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/icons.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/index.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -605,6 +609,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/modal.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/navbar.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/pagination.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/progress-bar.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/search.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/settings.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/sound-effects.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/spinner.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/table.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tabs.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/theme-switcher.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/toast.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tooltip.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -576,6 +580,10 @@
 
 
 
+
+
+
+
 
 
 

package/scaffold/vanilla/index.html

@@ -400,6 +400,10 @@
   
   
   
+  
+  
+  
+  
   
   
   
@@ -662,6 +666,10 @@
 
 
 
+
+
+
+