npm - rizzo-css - Versions diffs - 0.0.10 → 0.0.12 - Mend

rizzo-css 0.0.10 → 0.0.12

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 (145) hide show

package/README.md +20 -6
package/bin/rizzo-css.js +13 -0
package/dist/rizzo.min.css +34 -19
package/package.json +1 -1
package/scaffold/astro/CopyToClipboard.astro +37 -17
package/scaffold/astro/FormGroup.astro +14 -6
package/scaffold/astro/icons/Brush.astro +0 -1
package/scaffold/astro/icons/Cake.astro +0 -1
package/scaffold/astro/icons/Check.astro +1 -2
package/scaffold/astro/icons/Cherry.astro +0 -1
package/scaffold/astro/icons/ChevronDown.astro +1 -2
package/scaffold/astro/icons/Circle.astro +1 -2
package/scaffold/astro/icons/Close.astro +1 -2
package/scaffold/astro/icons/Cmd.astro +26 -0
package/scaffold/astro/icons/Copy.astro +1 -2
package/scaffold/astro/icons/Eye.astro +1 -2
package/scaffold/astro/icons/Filter.astro +1 -2
package/scaffold/astro/icons/Flame.astro +0 -1
package/scaffold/astro/icons/Flower.astro +0 -1
package/scaffold/astro/icons/Gear.astro +1 -2
package/scaffold/astro/icons/Heart.astro +0 -1
package/scaffold/astro/icons/IceCream.astro +1 -2
package/scaffold/astro/icons/Leaf.astro +0 -1
package/scaffold/astro/icons/Lemon.astro +0 -1
package/scaffold/astro/icons/Moon.astro +1 -2
package/scaffold/astro/icons/Owl.astro +1 -2
package/scaffold/astro/icons/Palette.astro +1 -2
package/scaffold/astro/icons/Rainbow.astro +1 -2
package/scaffold/astro/icons/Search.astro +1 -2
package/scaffold/astro/icons/Shield.astro +0 -1
package/scaffold/astro/icons/Snowflake.astro +1 -2
package/scaffold/astro/icons/Sort.astro +1 -2
package/scaffold/astro/icons/Sun.astro +0 -1
package/scaffold/astro/icons/Sunset.astro +0 -1
package/scaffold/astro/icons/Zap.astro +0 -1
package/scaffold/astro/icons/devicons/Astro.astro +0 -1
package/scaffold/astro/icons/devicons/Bash.astro +0 -1
package/scaffold/astro/icons/devicons/Css3.astro +0 -1
package/scaffold/astro/icons/devicons/Git.astro +0 -1
package/scaffold/astro/icons/devicons/Html5.astro +0 -1
package/scaffold/astro/icons/devicons/Javascript.astro +0 -1
package/scaffold/astro/icons/devicons/Nodejs.astro +0 -1
package/scaffold/astro/icons/devicons/Plaintext.astro +0 -1
package/scaffold/astro/icons/devicons/React.astro +0 -1
package/scaffold/astro/icons/devicons/Svelte.astro +0 -1
package/scaffold/astro/icons/devicons/Vue.astro +0 -1
package/scaffold/astro-app/README.md +32 -0
package/scaffold/astro-app/astro.config.mjs +2 -1
package/scaffold/astro-app/package.json +1 -1
package/scaffold/astro-app/src/layouts/Layout.astro +4 -1
package/scaffold/astro-app/src/pages/index.astro +4 -2
package/scaffold/svelte/Accordion.svelte +1 -2
package/scaffold/svelte/Alert.svelte +8 -3
package/scaffold/svelte/Avatar.svelte +1 -1
package/scaffold/svelte/Badge.svelte +11 -11
package/scaffold/svelte/Breadcrumb.svelte +8 -6
package/scaffold/svelte/Button.svelte +7 -3
package/scaffold/svelte/Card.svelte +7 -4
package/scaffold/svelte/CopyToClipboard.svelte +29 -29
package/scaffold/svelte/Divider.svelte +8 -8
package/scaffold/svelte/Dropdown.svelte +15 -18
package/scaffold/svelte/FormGroup.svelte +14 -4
package/scaffold/svelte/Input.svelte +7 -5
package/scaffold/svelte/Modal.svelte +10 -6
package/scaffold/svelte/Pagination.svelte +1 -1
package/scaffold/svelte/ProgressBar.svelte +13 -11
package/scaffold/svelte/Select.svelte +10 -6
package/scaffold/svelte/Spinner.svelte +2 -2
package/scaffold/svelte/Table.svelte +6 -7
package/scaffold/svelte/Tabs.svelte +15 -7
package/scaffold/svelte/Textarea.svelte +7 -5
package/scaffold/svelte/Toast.svelte +6 -3
package/scaffold/svelte/Tooltip.svelte +4 -4
package/scaffold/svelte/icons/Check.svelte +17 -10
package/scaffold/svelte/icons/ChevronDown.svelte +16 -9
package/scaffold/svelte/icons/Circle.svelte +16 -9
package/scaffold/svelte/icons/Close.svelte +18 -11
package/scaffold/svelte/icons/Cmd.svelte +27 -0
package/scaffold/svelte/icons/Copy.svelte +16 -9
package/scaffold/svelte/icons/Eye.svelte +16 -9
package/scaffold/svelte/icons/Filter.svelte +16 -9
package/scaffold/svelte/icons/Gear.svelte +16 -9
package/scaffold/svelte/icons/IceCream.svelte +16 -9
package/scaffold/svelte/icons/Moon.svelte +16 -9
package/scaffold/svelte/icons/Owl.svelte +16 -9
package/scaffold/svelte/icons/Palette.svelte +16 -9
package/scaffold/svelte/icons/Rainbow.svelte +16 -9
package/scaffold/svelte/icons/Search.svelte +16 -9
package/scaffold/svelte/icons/Snowflake.svelte +16 -9
package/scaffold/svelte/icons/Sort.svelte +16 -9
package/scaffold/svelte/icons/devicons/Astro.svelte +28 -14
package/scaffold/svelte/icons/devicons/Bash.svelte +17 -16
package/scaffold/svelte/icons/devicons/Css3.svelte +9 -8
package/scaffold/svelte/icons/devicons/Git.svelte +9 -8
package/scaffold/svelte/icons/devicons/Html5.svelte +9 -8
package/scaffold/svelte/icons/devicons/Javascript.svelte +9 -8
package/scaffold/svelte/icons/devicons/Nodejs.svelte +18 -14
package/scaffold/svelte/icons/devicons/Plaintext.svelte +14 -16
package/scaffold/svelte/icons/devicons/React.svelte +10 -9
package/scaffold/svelte/icons/devicons/SvelteIcon.svelte +19 -0
package/scaffold/svelte/icons/devicons/Vue.svelte +10 -9
package/scaffold/svelte-app/README.md +4 -0
package/scaffold/vanilla/README.md +47 -0
package/scaffold/vanilla/icons/Brush.svg +0 -1
package/scaffold/vanilla/icons/Cake.svg +0 -1
package/scaffold/vanilla/icons/Check.svg +0 -1
package/scaffold/vanilla/icons/Cherry.svg +0 -1
package/scaffold/vanilla/icons/ChevronDown.svg +0 -1
package/scaffold/vanilla/icons/Circle.svg +0 -1
package/scaffold/vanilla/icons/Close.svg +0 -1
package/scaffold/vanilla/icons/Cmd.svg +10 -0
package/scaffold/vanilla/icons/Copy.svg +0 -1
package/scaffold/vanilla/icons/Eye.svg +0 -1
package/scaffold/vanilla/icons/Filter.svg +0 -1
package/scaffold/vanilla/icons/Flame.svg +0 -1
package/scaffold/vanilla/icons/Flower.svg +0 -1
package/scaffold/vanilla/icons/Gear.svg +0 -1
package/scaffold/vanilla/icons/Heart.svg +0 -1
package/scaffold/vanilla/icons/IceCream.svg +0 -1
package/scaffold/vanilla/icons/Leaf.svg +0 -1
package/scaffold/vanilla/icons/Lemon.svg +0 -1
package/scaffold/vanilla/icons/Moon.svg +0 -1
package/scaffold/vanilla/icons/Owl.svg +0 -1
package/scaffold/vanilla/icons/Palette.svg +0 -1
package/scaffold/vanilla/icons/Rainbow.svg +0 -1
package/scaffold/vanilla/icons/Search.svg +0 -1
package/scaffold/vanilla/icons/Shield.svg +0 -1
package/scaffold/vanilla/icons/Snowflake.svg +0 -1
package/scaffold/vanilla/icons/Sort.svg +0 -1
package/scaffold/vanilla/icons/Sun.svg +0 -1
package/scaffold/vanilla/icons/Sunset.svg +0 -1
package/scaffold/vanilla/icons/Zap.svg +0 -1
package/scaffold/vanilla/icons/devicons/Astro.svg +0 -1
package/scaffold/vanilla/icons/devicons/Bash.svg +0 -1
package/scaffold/vanilla/icons/devicons/Css3.svg +0 -1
package/scaffold/vanilla/icons/devicons/Git.svg +0 -1
package/scaffold/vanilla/icons/devicons/Html5.svg +0 -1
package/scaffold/vanilla/icons/devicons/Javascript.svg +0 -1
package/scaffold/vanilla/icons/devicons/Nodejs.svg +0 -1
package/scaffold/vanilla/icons/devicons/Plaintext.svg +0 -1
package/scaffold/vanilla/icons/devicons/React.svg +0 -1
package/scaffold/vanilla/icons/devicons/Svelte.svg +0 -1
package/scaffold/vanilla/icons/devicons/Vue.svg +0 -1
package/scaffold/vanilla/index.html +1 -277
package/scaffold/vanilla/js/main.js +747 -0

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

@@ -0,0 +1,32 @@
+# Astro + Rizzo CSS
+This project was scaffolded with `npx rizzo-css init` (Astro).
+## 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
+## Other scaffolds
+From the same **rizzo-css** package: **Vanilla** (`scaffold/vanilla/`) — single HTML file with Settings and toast; **Svelte** (`scaffold/svelte-app/`) — SvelteKit app. 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/astro.config.mjs CHANGED Viewed

@@ -1,4 +1,5 @@
-// https://astro.build/config
+// @ts-check
 import { defineConfig } from 'astro/config';
+// https://astro.build/config
 export default defineConfig({});

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

	@@ -1 +1 @@
1	- {"name":"{{PROJECT_NAME}}","type":"module","version":"0.0.1","scripts":{"dev":"astro dev","build":"astro build","preview":"astro preview"},"devDependencies":{"astro":"^5.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/layouts/Layout.astro CHANGED Viewed

@@ -3,10 +3,13 @@ interface Props {
   title?: string;
 }
+/* Placeholders replaced by rizzo-css CLI when scaffolding */
+const DATA_THEME = '{{DATA_THEME}}';
+const THEME_LIST_COMMENT = '{{THEME_LIST_COMMENT}}';
 const { title = '{{TITLE}}' } = Astro.props;
 ---
 <!doctype html>
-<html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
+<html lang="en" data-theme={DATA_THEME}>{THEME_LIST_COMMENT}
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

package/scaffold/astro-app/src/pages/index.astro CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
 import Layout from '../layouts/Layout.astro';
+/* Placeholder replaced by rizzo-css CLI when scaffolding */
+const TITLE = '{{TITLE}}';
 ---
-<Layout title="{{TITLE}}">
+<Layout title={TITLE}>
   <a href="#main-content" class="skip-link">Skip to main content</a>
   <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
-    <a href="/" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
+    <a href="/" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{TITLE}</a>
     <a href="https://rizzo-css.vercel.app/docs/getting-started" class="btn btn-outline" target="_blank" rel="noopener noreferrer">Docs</a>
   </header>
   <main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">

package/scaffold/svelte/Accordion.svelte CHANGED Viewed

@@ -31,7 +31,7 @@
   let expanded = $state<Set<string>>(getDefaultExpanded());
-  const classes = ['accordion', className].filter(Boolean).join(' ').trim();
+  const classes = $derived(['accordion', className].filter(Boolean).join(' ').trim());
   function toggle(itemId: string) {
     expanded = new Set(
@@ -101,7 +101,6 @@
           <span class="accordion__title">{item.title}</span>
           <span class="accordion__icon" 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" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <title>Expand or collapse section</title>
               <path d="m6 9 6 6 6-6" />
             </svg>
           </span>

package/scaffold/svelte/Alert.svelte CHANGED Viewed

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import type { Snippet } from 'svelte';
   interface Props {
     variant?: 'success' | 'error' | 'warning' | 'info';
@@ -7,6 +8,8 @@
     autoDismiss?: number;
     class?: string;
     id?: string;
+    onDismiss?: () => void;
+    children?: Snippet;
   }
   let {
     variant = 'info',
@@ -14,11 +17,13 @@
     autoDismiss = 0,
     class: className = '',
     id,
+    onDismiss,
+    children,
   }: Props = $props();
   let visible = $state(true);
   const alertId = $derived(id ?? `alert-${Math.random().toString(36).slice(2, 11)}`);
-  const classes = ['alert', `alert--${variant}`, className].filter(Boolean).join(' ').trim();
+  const classes = $derived(['alert', `alert--${variant}`, className].filter(Boolean).join(' ').trim());
   const ariaLabels: Record<string, string> = {
     success: 'Success message',
@@ -32,6 +37,7 @@
   function dismiss() {
     visible = false;
     if (autoDismissTimeout) clearTimeout(autoDismissTimeout);
+    onDismiss?.();
   }
   onMount(() => {
@@ -54,7 +60,7 @@
     aria-label={ariaLabels[variant]}
   >
     <div class="alert__content">
-      <slot />
+      {@render children?.()}
     </div>
     {#if dismissible}
       <button
@@ -71,7 +77,6 @@
         }}
       >
         <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">
-          <title>Dismiss</title>
           <path d="M18 6L6 18M6 6l12 12" />
         </svg>
       </button>

package/scaffold/svelte/Avatar.svelte CHANGED Viewed

@@ -26,7 +26,7 @@
   }: Props = $props();
   const displayInitials = $derived(name ? getInitials(name) : initialsProp);
-  const classes = ['avatar', `avatar--${size}`, `avatar--${shape}`, className].filter(Boolean).join(' ').trim();
+  const classes = $derived(['avatar', `avatar--${size}`, `avatar--${shape}`, className].filter(Boolean).join(' ').trim());
   const ariaLabel = $derived(alt || name || (displayInitials ? `Avatar: ${displayInitials}` : 'Avatar'));
 </script>

package/scaffold/svelte/Badge.svelte CHANGED Viewed

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   type Variant = 'primary' | 'success' | 'warning' | 'error' | 'info';
   type Size = 'sm' | 'md' | 'lg';
   interface Props {
@@ -6,26 +8,24 @@
     size?: Size;
     pill?: boolean;
     class?: string;
+    children?: Snippet;
   }
   let {
     variant = 'primary',
     size = 'md',
     pill = false,
     class: className = '',
+    children,
   }: Props = $props();
-  const classes = [
-    'badge',
-    `badge--${variant}`,
-    `badge--${size}`,
-    pill ? 'badge--pill' : '',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .trim();
+  const classes = $derived(
+    ['badge', `badge--${variant}`, `badge--${size}`, pill ? 'badge--pill' : '', className]
+      .filter(Boolean)
+      .join(' ')
+      .trim()
+  );
 </script>
 <span class={classes}>
-  <slot />
+  {@render children?.()}
 </span>

package/scaffold/svelte/Breadcrumb.svelte CHANGED Viewed

@@ -11,11 +11,14 @@
   }
   let { items, separator = 'chevron', class: className = '' }: Props = $props();
-  const separatorVariant =
-    separator === 'slash' ? 'breadcrumb--slash' : separator === 'arrow' ? 'breadcrumb--arrow' : 'breadcrumb--chevron';
-  const classes = ['breadcrumb', separatorVariant, className].filter(Boolean).join(' ').trim();
-  const separatorChar = separator === 'slash' ? '/' : separator === 'arrow' ? '›' : typeof separator === 'string' ? separator : '›';
-  const useIcon = separator === 'chevron';
+  const separatorVariant = $derived(
+    separator === 'slash' ? 'breadcrumb--slash' : separator === 'arrow' ? 'breadcrumb--arrow' : 'breadcrumb--chevron'
+  );
+  const classes = $derived(['breadcrumb', separatorVariant, className].filter(Boolean).join(' ').trim());
+  const separatorChar = $derived(
+    separator === 'slash' ? '/' : separator === 'arrow' ? '›' : typeof separator === 'string' ? separator : '›'
+  );
+  const useIcon = $derived(separator === 'chevron');
 </script>
 <nav class={classes} aria-label="Breadcrumb">
@@ -33,7 +36,6 @@
           <span class="breadcrumb__separator" aria-hidden="true">
             {#if useIcon}
               <svg class="breadcrumb__separator-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-                <title>Separator</title>
                 <path d="M6 9l6 6 6-6" />
               </svg>
             {:else}

package/scaffold/svelte/Button.svelte CHANGED Viewed

@@ -1,23 +1,27 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   type Variant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'outline';
   interface Props {
     variant?: Variant;
     disabled?: boolean;
     type?: 'button' | 'submit' | 'reset';
     class?: string;
+    children?: Snippet;
   }
   let {
     variant = 'default',
     disabled = false,
     type = 'button',
     class: className = '',
+    children,
     ...rest
   }: Props = $props();
-  const variantClass = variant === 'default' ? '' : `btn-${variant}`;
-  const classes = ['btn', variantClass, className].filter(Boolean).join(' ');
+  const variantClass = $derived(variant === 'default' ? '' : `btn-${variant}`);
+  const classes = $derived(['btn', variantClass, className].filter(Boolean).join(' '));
 </script>
 <button {type} {disabled} class={classes} {...rest}>
-  <slot />
+  {@render children?.()}
 </button>

package/scaffold/svelte/Card.svelte CHANGED Viewed

@@ -1,14 +1,17 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   type Variant = 'default' | 'elevated' | 'outlined' | 'filled';
   interface Props {
     variant?: Variant;
     class?: string;
+    children?: Snippet;
   }
-  let { variant = 'default', class: className = '' }: Props = $props();
-  const variantClass = variant !== 'default' ? `card--${variant}` : '';
-  const classes = ['card', variantClass, className].filter(Boolean).join(' ').trim();
+  let { variant = 'default', class: className = '', children }: Props = $props();
+  const variantClass = $derived(variant !== 'default' ? `card--${variant}` : '');
+  const classes = $derived(['card', variantClass, className].filter(Boolean).join(' ').trim());
 </script>
 <div class={classes}>
-  <slot />
+  {@render children?.()}
 </div>

package/scaffold/svelte/CopyToClipboard.svelte CHANGED Viewed

@@ -48,32 +48,32 @@
   }
 </script>
-<button
-  type="button"
-  class={classes}
-  aria-label={label ?? `Copy ${value} to clipboard`}
-  id={buttonId}
-  onclick={copy}
-  onkeydown={(e) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      copy();
-    }
-  }}
->
-  <span class="copy-to-clipboard__text">{value}</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">
-      <title>Copy</title>
-      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-    </svg>
-  </span>
-  <span class="copy-to-clipboard__icon copy-to-clipboard__icon--check" 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">
-      <title>Copied</title>
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
-  </span>
-  <span class="copy-to-clipboard__feedback" aria-live="polite">{feedbackText}</span>
-</button>
+<span class="tooltip-host" data-tooltip={copied ? (format ? `Copied ${format}!` : 'Copied!') : (label ?? 'Copy to clipboard')}>
+  <button
+    type="button"
+    class={classes}
+    aria-label={copied ? (format ? `Copied ${format}!` : 'Copied!') : (label ?? `Copy ${value} to clipboard`)}
+    id={buttonId}
+    onclick={copy}
+    onkeydown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        copy();
+      }
+    }}
+  >
+    <span class="copy-to-clipboard__text">{value}</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" />
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+      </svg>
+    </span>
+    <span class="copy-to-clipboard__icon copy-to-clipboard__icon--check" 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">
+        <polyline points="20 6 9 17 4 12" />
+      </svg>
+    </span>
+    <span class="copy-to-clipboard__feedback" aria-live="polite">{feedbackText}</span>
+  </button>
+</span>

package/scaffold/svelte/Divider.svelte CHANGED Viewed

@@ -5,11 +5,11 @@
     class?: string;
   }
   let { orientation = 'horizontal', label, class: className = '' }: Props = $props();
-  const orientationClass = `divider--${orientation}`;
-  const hasLabel = typeof label === 'string' && label.trim().length > 0;
-  const labelClass = hasLabel ? 'divider--labeled' : '';
-  const classes = ['divider', orientationClass, labelClass, className].filter(Boolean).join(' ').trim();
-  const labelText = label?.trim() ?? '';
+  const orientationClass = $derived(`divider--${orientation}`);
+  const hasLabel = $derived(typeof label === 'string' && label.trim().length > 0);
+  const labelClass = $derived(hasLabel ? 'divider--labeled' : '');
+  const classes = $derived(['divider', orientationClass, labelClass, className].filter(Boolean).join(' ').trim());
+  const labelText = $derived(label?.trim() ?? '');
 </script>
 <div
@@ -19,10 +19,10 @@
   aria-label={labelText || undefined}
 >
   {#if hasLabel && orientation === 'horizontal'}
-    <span class="divider__line" aria-hidden="true" />
+    <span class="divider__line" aria-hidden="true"></span>
     <span class="divider__label">{labelText}</span>
-    <span class="divider__line" aria-hidden="true" />
+    <span class="divider__line" aria-hidden="true"></span>
   {:else}
-    <span class="divider__line" aria-hidden="true" />
+    <span class="divider__line" aria-hidden="true"></span>
   {/if}
 </div>

package/scaffold/svelte/Dropdown.svelte CHANGED Viewed

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import ChevronDown from './icons/ChevronDown.svelte';
   export interface MenuItem {
     label: string;
@@ -119,12 +120,7 @@
     }}
   >
     <span class="dropdown__trigger-text">{trigger}</span>
-    <span class="dropdown__icon" 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" role="img" aria-labelledby="{dropdownId}-trigger-icon-title">
-        <title id="{dropdownId}-trigger-icon-title">Expand menu</title>
-        <path d="m6 9 6 6 6-6" />
-      </svg>
-    </span>
+    <ChevronDown class="dropdown__icon" width={16} height={16} />
   </button>
   <div
@@ -144,10 +140,11 @@
       {:else}
         {@const hasSubmenu = item.submenu && item.submenu.length > 0}
         {@const isSubmenuOpen = openSubmenuIndex === index}
-        <div class="dropdown__item-wrapper dropdown__item-wrapper--has-submenu={hasSubmenu}">
+        <div class="dropdown__item-wrapper" class:dropdown__item-wrapper--has-submenu={hasSubmenu}>
           {#if item.href && !hasSubmenu}
             <a
-              class="dropdown__item dropdown__item--disabled={item.disabled}"
+              class="dropdown__item"
+              class:dropdown__item--disabled={item.disabled}
               role="menuitem"
               href={item.href}
               aria-label={item.label}
@@ -162,7 +159,9 @@
             </a>
           {:else}
             <div
-              class="dropdown__item dropdown__item--disabled={item.disabled} dropdown__item--has-submenu={hasSubmenu}"
+              class="dropdown__item"
+              class:dropdown__item--disabled={item.disabled}
+              class:dropdown__item--has-submenu={hasSubmenu}
               role="menuitem"
               aria-disabled={item.disabled ? 'true' : undefined}
               aria-expanded={hasSubmenu ? isSubmenuOpen : undefined}
@@ -190,18 +189,14 @@
             >
               <span>{item.label}</span>
               {#if hasSubmenu}
-                <span class="dropdown__item-arrow" aria-hidden="true">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="{dropdownId}-submenu-arrow-{index}-title">
-                    <title id="{dropdownId}-submenu-arrow-{index}-title">Expand submenu</title>
-                    <path d="m6 9 6 6 6-6" />
-                  </svg>
-                </span>
+                <ChevronDown class="dropdown__item-arrow" width={12} height={12} />
               {/if}
             </div>
           {/if}
           {#if hasSubmenu && item.submenu}
             <div
-              class="dropdown__submenu dropdown__submenu--open={isSubmenuOpen}"
+              class="dropdown__submenu"
+              class:dropdown__submenu--open={isSubmenuOpen}
               role="menu"
               aria-label="{item.label} submenu"
               aria-hidden={!isSubmenuOpen}
@@ -211,7 +206,8 @@
                   <div class="dropdown__separator" role="separator"></div>
                 {:else if subItem.href}
                   <a
-                    class="dropdown__item dropdown__submenu-item dropdown__item--disabled={subItem.disabled}"
+                    class="dropdown__item dropdown__submenu-item"
+                    class:dropdown__item--disabled={subItem.disabled}
                     role="menuitem"
                     href={subItem.href}
                     aria-label={subItem.label}
@@ -225,7 +221,8 @@
                   </a>
                 {:else}
                   <div
-                    class="dropdown__item dropdown__submenu-item dropdown__item--disabled={subItem.disabled}"
+                    class="dropdown__item dropdown__submenu-item"
+                    class:dropdown__item--disabled={subItem.disabled}
                     role="menuitem"
                     aria-disabled={subItem.disabled ? 'true' : undefined}
                     tabindex={open ? 0 : -1}

package/scaffold/svelte/FormGroup.svelte CHANGED Viewed

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   interface Props {
     label?: string;
     labelFor?: string;
@@ -7,6 +9,7 @@
     error?: string;
     success?: string;
     class?: string;
+    children?: Snippet;
   }
   let {
     label,
@@ -16,6 +19,7 @@
     error,
     success,
     class: className = '',
+    children,
   }: Props = $props();
   const errorId = $derived(labelFor && error ? `${labelFor}-error` : undefined);
@@ -24,11 +28,17 @@
 <div class="form-group {className}">
   {#if label}
-    <label for={labelFor} class="form-group__label {required ? 'required' : ''}">
-      {label}
-    </label>
+    {#if labelFor}
+      <label for={labelFor} class="form-group__label {required ? 'required' : ''}">
+        {label}
+      </label>
+    {:else}
+      <span class="form-group__label {required ? 'required' : ''}">
+        {label}
+      </span>
+    {/if}
   {/if}
-  <slot />
+  {@render children?.()}
   {#if help}
     <span id={helpId} class="form-group__help">{help}</span>
   {/if}

package/scaffold/svelte/Input.svelte CHANGED Viewed

@@ -34,11 +34,13 @@
     ariaInvalid,
   }: Props = $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].filter(Boolean).join(' ').trim();
-  const invalid = error || ariaInvalid === true || ariaInvalid === 'true';
+  const sizeClass = $derived(size !== 'md' ? `form-input--${size}` : '');
+  const errorClass = $derived(error ? 'form-input--error' : '');
+  const successClass = $derived(success ? 'form-input--success' : '');
+  const classes = $derived(
+    ['form-input', sizeClass, errorClass, successClass, className].filter(Boolean).join(' ').trim()
+  );
+  const invalid = $derived(error || ariaInvalid === true || ariaInvalid === 'true');
 </script>
 <input

package/scaffold/svelte/Modal.svelte CHANGED Viewed

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { onMount, tick } from 'svelte';
+  import { tick } from 'svelte';
+  import type { Snippet } from 'svelte';
   interface Props {
     id?: string;
@@ -9,6 +10,8 @@
     closeOnOverlayClick?: boolean;
     closeOnEscape?: boolean;
     class?: string;
+    children?: Snippet;
+    footer?: Snippet;
   }
   let {
@@ -19,11 +22,13 @@
     closeOnOverlayClick = true,
     closeOnEscape = true,
     class: className = '',
+    children,
+    footer,
   }: Props = $props();
   const modalId = $derived(id ?? `modal-${Math.random().toString(36).slice(2, 11)}`);
-  const sizeClass = size !== 'md' ? `modal--${size}` : '';
-  const classes = ['modal', sizeClass, className].filter(Boolean).join(' ').trim();
+  const sizeClass = $derived(size !== 'md' ? `modal--${size}` : '');
+  const classes = $derived(['modal', sizeClass, className].filter(Boolean).join(' ').trim());
   let overlayEl: HTMLDivElement;
   let modalEl: HTMLDivElement;
@@ -138,16 +143,15 @@
     <h2 id="{modalId}-title" class="modal__title">{title}</h2>
     <button type="button" class="modal__close" aria-label="Close modal" data-modal-close onclick={close}>
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <title>Close</title>
         <path d="M18 6L6 18" />
         <path d="M6 6l12 12" />
       </svg>
     </button>
   </div>
   <div class="modal__body">
-    <slot />
+    {@render children?.()}
   </div>
   <div class="modal__footer">
-    <slot name="footer" />
+    {@render footer?.()}
   </div>
 </div>

package/scaffold/svelte/Pagination.svelte CHANGED Viewed

@@ -38,7 +38,7 @@
     class: className = '',
   }: Props = $props();
-  const classes = ['pagination', className].filter(Boolean).join(' ').trim();
+  const classes = $derived(['pagination', className].filter(Boolean).join(' ').trim());
   const pageItems = $derived(getPageItems(totalPages, currentPage, maxVisible));
   const hasPrev = $derived(currentPage > 1);
   const hasNext = $derived(currentPage < totalPages);

package/scaffold/svelte/ProgressBar.svelte CHANGED Viewed

@@ -24,16 +24,18 @@
   const clampedValue = $derived(indeterminate ? 0 : Math.max(0, Math.min(value, safeMax)));
   const percentage = $derived(indeterminate ? 0 : Math.round((clampedValue / safeMax) * 100));
-  const classes = [
-    'progress',
-    `progress--${variant}`,
-    `progress--${size}`,
-    indeterminate ? 'progress--indeterminate' : '',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .trim();
+  const classes = $derived(
+    [
+      'progress',
+      `progress--${variant}`,
+      `progress--${size}`,
+      indeterminate ? 'progress--indeterminate' : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+      .trim()
+  );
   const barStyle = $derived(indeterminate ? {} : { width: `${percentage}%` });
 </script>
@@ -48,7 +50,7 @@
   aria-valuenow={indeterminate ? undefined : clampedValue}
 >
   <div class="progress__track">
-    <div class="progress__bar" style={barStyle} />
+    <div class="progress__bar" style={barStyle}></div>
   </div>
   {#if showLabel && !indeterminate}
     <span class="progress__label" aria-hidden="true">{percentage}%</span>