@getmicdrop/svelte-components 5.17.3 → 5.18.0

package/dist/tokens/__tests__/sizing.test.js

@@ -184,8 +184,8 @@ describe('sizing tokens', () => {
         it('half variant includes w-1/2', () => {
             expect(buttonSizes.half).toContain('w-1/2');
         });
-        it('has exactly 10 size variants', () => {
-            expect(Object.keys(buttonSizes)).toHaveLength(10);
+        it('has exactly 13 size variants', () => {
+            expect(Object.keys(buttonSizes)).toHaveLength(13);
         });
         it('landing variant has responsive height and text', () => {
             expect(buttonSizes.landing).toContain('h-12');

package/dist/tokens/sizing.d.ts

@@ -76,10 +76,15 @@ export declare const buttonSizes: {
     readonly full: "w-full h-11 px-5 text-sm";
     readonly 'full-md-auto': "w-full h-11 px-5 text-sm md:w-auto";
     readonly half: "w-1/2 h-10 px-4 text-sm";
+    readonly 'icon-sm': "w-9 h-9 p-0";
+    readonly 'icon-md': "w-10 h-10 p-0";
+    readonly 'icon-lg': "w-11 h-11 p-0";
     readonly landing: "h-12 sm:h-14 px-6 sm:px-8 text-base sm:text-lg";
 };
 /**
  * Icon-only button sizes - padding only, no text.
+ * For variant="icon" (transparent). For other variants with icon-only,
+ * use the square sizes in buttonSizes (icon-sm, icon-md, icon-lg).
  */
 export declare const buttonIconSizes: {
     readonly xs: "p-1.5";

package/dist/tokens/sizing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/sizing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAM9C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,CAItE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAM3D;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AAMtD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAYd,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAClE,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC"}
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/sizing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAM9C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,CAItE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAM3D;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AAMtD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;CAgBd,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAClE,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC"}

package/dist/tokens/sizing.js

@@ -89,11 +89,17 @@ export const buttonSizes = {
     full: 'w-full h-11 px-5 text-sm',
     'full-md-auto': 'w-full h-11 px-5 text-sm md:w-auto',
     half: 'w-1/2 h-10 px-4 text-sm',
+    // Square icon-only sizes — for any variant used as an icon button (e.g. +/- controls)
+    'icon-sm': 'w-9 h-9 p-0',
+    'icon-md': 'w-10 h-10 p-0',
+    'icon-lg': 'w-11 h-11 p-0',
     // Landing page hero buttons - taller with larger text
     landing: 'h-12 sm:h-14 px-6 sm:px-8 text-base sm:text-lg',
 };
 /**
  * Icon-only button sizes - padding only, no text.
+ * For variant="icon" (transparent). For other variants with icon-only,
+ * use the square sizes in buttonSizes (icon-sm, icon-md, icon-lg).
  */
 export const buttonIconSizes = {
     xs: 'p-1.5',

package/dist/tokens/tokens.css

@@ -1,87 +1,87 @@
-:root {
-  --bg-primary: 0 0% 100%;
-  --bg-secondary: 220 7% 97%;
-  --bg-tertiary: 220 7% 94%;
-  --bg-quaternary: 220 6% 91%;
-
-  --text-primary: 221 50% 10%;
-  --text-secondary: 220 20% 18%;
-  --text-tertiary: 221 9% 44%;
-  --text-head: 221 9% 44%;
-
-  --brand-primary: 209 99% 50%;
-
-  --accent-warning: 28 100% 59%;
-  --accent-danger: 0 100% 70%;
-  --accent-success: 131 77% 35%;
-
-  --stroke-primary: 216 6% 84%;
-  --stroke-secondary: 216 6% 84%;
-  --border: 220 13% 91%;
-
-  --card: 0 0% 100%;
-  --card-foreground: 224 71.4% 4.1%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 224 71.4% 4.1%;
-  --muted: 220 14.3% 95.9%;
-  --muted-foreground: 220 8.9% 46.1%;
-  --hover-primary: 210 20% 96%;
-
-  --sidebar-background: 0 0% 100%;
-  --sidebar-foreground: 220 20% 18%;
-  --sidebar-border: 220 13% 91%;
-  --sidebar-primary: 221 65% 54%;
-  --sidebar-primary-foreground: 221 50% 10%;
-
-  --BG-Primary: var(--bg-primary);
-  --BG-Secondary: var(--bg-secondary);
-  --BG-Tertiary: var(--bg-tertiary);
-  --BG-Quaternary: var(--bg-quaternary);
-  --Text-Primary: var(--text-primary);
-  --Text-Secondary: var(--text-secondary);
-  --Text-Tartiary: var(--text-tertiary);
-  --Text-Head: var(--text-head);
-  --Brand-Primary: var(--brand-primary);
-  --Accent-Warning: var(--accent-warning);
-  --Accent-Danger: var(--accent-danger);
-  --Accent-Success: var(--accent-success);
-  --Stroke-Primary: var(--stroke-primary);
-  --Stroke-Secondary: var(--stroke-secondary);
-}
-
-[data-theme="dark"],
-.dark {
-  --bg-primary: 220 20% 18%;
-  --bg-secondary: 221 50% 10%;
-  --bg-tertiary: 221 50% 6%;
-  --bg-quaternary: 0 0% 0%;
-
-  --text-primary: 220 7% 97%;
-  --text-secondary: 220 7% 94%;
-  --text-tertiary: 220 6% 91%;
-  --text-head: 220 9% 70%;
-
-  --brand-primary: 220 89% 63%;
-
-  --accent-warning: 30 100% 70%;
-  --accent-danger: 0 100% 70%;
-  --accent-success: 142 71% 45%;
-
-  --stroke-primary: 220 20% 28%;
-  --stroke-secondary: 220 20% 28%;
-  --border: 215 27.9% 16.9%;
-
-  --card: 224 20% 10%;
-  --card-foreground: 210 20% 98%;
-  --popover: 224 71.4% 4.1%;
-  --popover-foreground: 210 20% 98%;
-  --muted: 215 27.9% 16.9%;
-  --muted-foreground: 217.9 10.6% 64.9%;
-  --hover-primary: 222 10% 39%;
-
-  --sidebar-background: 220 20% 18%;
-  --sidebar-foreground: 220 7% 94%;
-  --sidebar-border: 215 20% 20%;
-  --sidebar-primary: 221 65% 54%;
-  --sidebar-primary-foreground: 220 7% 97%;
-}
+:root {
+  --bg-primary: 0 0% 100%;
+  --bg-secondary: 220 7% 97%;
+  --bg-tertiary: 220 7% 94%;
+  --bg-quaternary: 220 6% 91%;
+
+  --text-primary: 221 50% 10%;
+  --text-secondary: 220 20% 18%;
+  --text-tertiary: 221 9% 44%;
+  --text-head: 221 9% 44%;
+
+  --brand-primary: 209 99% 50%;
+
+  --accent-warning: 28 100% 59%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 131 77% 35%;
+
+  --stroke-primary: 216 6% 84%;
+  --stroke-secondary: 216 6% 84%;
+  --border: 220 13% 91%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+  --hover-primary: 210 20% 96%;
+
+  --sidebar-background: 0 0% 100%;
+  --sidebar-foreground: 220 20% 18%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 221 50% 10%;
+
+  --BG-Primary: var(--bg-primary);
+  --BG-Secondary: var(--bg-secondary);
+  --BG-Tertiary: var(--bg-tertiary);
+  --BG-Quaternary: var(--bg-quaternary);
+  --Text-Primary: var(--text-primary);
+  --Text-Secondary: var(--text-secondary);
+  --Text-Tartiary: var(--text-tertiary);
+  --Text-Head: var(--text-head);
+  --Brand-Primary: var(--brand-primary);
+  --Accent-Warning: var(--accent-warning);
+  --Accent-Danger: var(--accent-danger);
+  --Accent-Success: var(--accent-success);
+  --Stroke-Primary: var(--stroke-primary);
+  --Stroke-Secondary: var(--stroke-secondary);
+}
+
+[data-theme="dark"],
+.dark {
+  --bg-primary: 220 20% 18%;
+  --bg-secondary: 221 50% 10%;
+  --bg-tertiary: 221 50% 6%;
+  --bg-quaternary: 0 0% 0%;
+
+  --text-primary: 220 7% 97%;
+  --text-secondary: 220 7% 94%;
+  --text-tertiary: 220 6% 91%;
+  --text-head: 220 9% 70%;
+
+  --brand-primary: 220 89% 63%;
+
+  --accent-warning: 30 100% 70%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 142 71% 45%;
+
+  --stroke-primary: 220 20% 28%;
+  --stroke-secondary: 220 20% 28%;
+  --border: 215 27.9% 16.9%;
+
+  --card: 224 20% 10%;
+  --card-foreground: 210 20% 98%;
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+  --hover-primary: 222 10% 39%;
+
+  --sidebar-background: 220 20% 18%;
+  --sidebar-foreground: 220 7% 94%;
+  --sidebar-border: 215 20% 20%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 220 7% 97%;
+}

package/dist/tokens/typography-base.css

@@ -1,163 +1,163 @@
-/**
- * Typography Base Styles
- *
- * These base styles apply default typography to semantic HTML elements.
- * Import this file in your app's CSS to get consistent typography without
- * needing to add classes to every heading and paragraph.
- *
- * Usage in app.css:
- *   @import '@getmicdrop/svelte-components/tokens/typography-base.css';
- *
- * After importing, these elements will have consistent styling:
- *   <h1>Page Title</h1>        - No classes needed
- *   <h2>Section Title</h2>     - No classes needed
- *   <p>Body text</p>           - No classes needed
- *
- * Override when needed:
- *   <h1 class="text-3xl">Larger Title</h1>
- *   <p class="text-sm text-muted">Smaller muted text</p>
- */
-
-@layer base {
-  /* ==========================================================================
-   * HEADINGS
-   * Semantic heading hierarchy with consistent sizing, weight, and colors.
-   * Uses semibold weight for all headings to maintain visual hierarchy.
-   * ========================================================================== */
-
-  h1 {
-    @apply text-2xl font-semibold text-gray-900 dark:text-white leading-tight;
-  }
-
-  h2 {
-    @apply text-xl font-semibold text-gray-900 dark:text-white leading-tight;
-  }
-
-  h3 {
-    @apply text-lg font-semibold text-gray-900 dark:text-white leading-tight;
-  }
-
-  h4 {
-    @apply text-base font-semibold text-gray-900 dark:text-white leading-tight;
-  }
-
-  h5 {
-    @apply text-sm font-semibold text-gray-900 dark:text-white leading-tight;
-  }
-
-  h6 {
-    @apply text-xs font-semibold text-gray-900 dark:text-white leading-tight uppercase tracking-wide;
-  }
-
-  /* ==========================================================================
-   * BODY TEXT
-   * Default paragraph styling with comfortable reading line height.
-   * Uses secondary color (gray-600/gray-300) for body text to create
-   * visual hierarchy with headings.
-   * ========================================================================== */
-
-  p {
-    @apply text-base text-gray-600 dark:text-gray-300 leading-relaxed;
-  }
-
-  /* ==========================================================================
-   * FORM LABELS
-   * Form labels are slightly smaller than body text with medium weight
-   * to distinguish them from regular text.
-   * ========================================================================== */
-
-  label {
-    @apply text-sm font-medium text-gray-900 dark:text-white;
-  }
-
-  /* ==========================================================================
-   * LINKS
-   * Blue links with hover underline for clear affordance.
-   * ========================================================================== */
-
-  a {
-    @apply text-blue-600 dark:text-blue-400 hover:underline;
-  }
-
-  /* ==========================================================================
-   * EMPHASIS
-   * Strong and emphasis elements inherit color but add weight/style.
-   * ========================================================================== */
-
-  strong, b {
-    @apply font-semibold;
-  }
-
-  em, i {
-    @apply italic;
-  }
-
-  /* ==========================================================================
-   * SMALL TEXT
-   * For fine print, captions, and secondary information.
-   * ========================================================================== */
-
-  small {
-    @apply text-sm text-gray-500 dark:text-gray-400;
-  }
-
-  /* ==========================================================================
-   * LISTS
-   * Consistent list styling that matches body text.
-   * ========================================================================== */
-
-  ul, ol {
-    @apply text-base text-gray-600 dark:text-gray-300 leading-relaxed;
-  }
-
-  li {
-    @apply mb-1;
-  }
-
-  /* ==========================================================================
-   * BLOCKQUOTE
-   * Indented with left border for quoted content.
-   * ========================================================================== */
-
-  blockquote {
-    @apply pl-4 border-l-4 border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 italic;
-  }
-
-  /* ==========================================================================
-   * CODE
-   * Monospace font with subtle background for inline code.
-   * ========================================================================== */
-
-  code {
-    @apply font-mono text-sm bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-gray-900 dark:text-gray-100;
-  }
-
-  pre {
-    @apply font-mono text-sm bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto text-gray-900 dark:text-gray-100;
-  }
-
-  pre code {
-    @apply bg-transparent p-0;
-  }
-
-  /* ==========================================================================
-   * MARK/HIGHLIGHT
-   * Yellow highlight for marked/highlighted text.
-   * ========================================================================== */
-
-  mark {
-    @apply bg-yellow-200 dark:bg-yellow-800 px-1 rounded;
-  }
-}
-
-/* ==========================================================================
- * NOTE ON UTILITY CLASSES
- *
- * This file intentionally does NOT define utility classes like .text-muted,
- * .text-primary, etc. These are defined in individual app's app.css files
- * because they reference app-specific CSS custom properties (e.g., --Text-Tartiary).
- *
- * For typography utilities, import and use tokens from typography.ts:
- *   import { typography } from '@getmicdrop/svelte-components';
- *   <span class={typography.smMuted}>Helper text</span>
- * ========================================================================== */
+/**
+ * Typography Base Styles
+ *
+ * These base styles apply default typography to semantic HTML elements.
+ * Import this file in your app's CSS to get consistent typography without
+ * needing to add classes to every heading and paragraph.
+ *
+ * Usage in app.css:
+ *   @import '@getmicdrop/svelte-components/tokens/typography-base.css';
+ *
+ * After importing, these elements will have consistent styling:
+ *   <h1>Page Title</h1>        - No classes needed
+ *   <h2>Section Title</h2>     - No classes needed
+ *   <p>Body text</p>           - No classes needed
+ *
+ * Override when needed:
+ *   <h1 class="text-3xl">Larger Title</h1>
+ *   <p class="text-sm text-muted">Smaller muted text</p>
+ */
+
+@layer base {
+  /* ==========================================================================
+   * HEADINGS
+   * Semantic heading hierarchy with consistent sizing, weight, and colors.
+   * Uses semibold weight for all headings to maintain visual hierarchy.
+   * ========================================================================== */
+
+  h1 {
+    @apply text-2xl font-semibold text-gray-900 dark:text-white leading-tight;
+  }
+
+  h2 {
+    @apply text-xl font-semibold text-gray-900 dark:text-white leading-tight;
+  }
+
+  h3 {
+    @apply text-lg font-semibold text-gray-900 dark:text-white leading-tight;
+  }
+
+  h4 {
+    @apply text-base font-semibold text-gray-900 dark:text-white leading-tight;
+  }
+
+  h5 {
+    @apply text-sm font-semibold text-gray-900 dark:text-white leading-tight;
+  }
+
+  h6 {
+    @apply text-xs font-semibold text-gray-900 dark:text-white leading-tight uppercase tracking-wide;
+  }
+
+  /* ==========================================================================
+   * BODY TEXT
+   * Default paragraph styling with comfortable reading line height.
+   * Uses secondary color (gray-600/gray-300) for body text to create
+   * visual hierarchy with headings.
+   * ========================================================================== */
+
+  p {
+    @apply text-base text-gray-600 dark:text-gray-300 leading-relaxed;
+  }
+
+  /* ==========================================================================
+   * FORM LABELS
+   * Form labels are slightly smaller than body text with medium weight
+   * to distinguish them from regular text.
+   * ========================================================================== */
+
+  label {
+    @apply text-sm font-medium text-gray-900 dark:text-white;
+  }
+
+  /* ==========================================================================
+   * LINKS
+   * Blue links with hover underline for clear affordance.
+   * ========================================================================== */
+
+  a {
+    @apply text-blue-600 dark:text-blue-400 hover:underline;
+  }
+
+  /* ==========================================================================
+   * EMPHASIS
+   * Strong and emphasis elements inherit color but add weight/style.
+   * ========================================================================== */
+
+  strong, b {
+    @apply font-semibold;
+  }
+
+  em, i {
+    @apply italic;
+  }
+
+  /* ==========================================================================
+   * SMALL TEXT
+   * For fine print, captions, and secondary information.
+   * ========================================================================== */
+
+  small {
+    @apply text-sm text-gray-500 dark:text-gray-400;
+  }
+
+  /* ==========================================================================
+   * LISTS
+   * Consistent list styling that matches body text.
+   * ========================================================================== */
+
+  ul, ol {
+    @apply text-base text-gray-600 dark:text-gray-300 leading-relaxed;
+  }
+
+  li {
+    @apply mb-1;
+  }
+
+  /* ==========================================================================
+   * BLOCKQUOTE
+   * Indented with left border for quoted content.
+   * ========================================================================== */
+
+  blockquote {
+    @apply pl-4 border-l-4 border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 italic;
+  }
+
+  /* ==========================================================================
+   * CODE
+   * Monospace font with subtle background for inline code.
+   * ========================================================================== */
+
+  code {
+    @apply font-mono text-sm bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-gray-900 dark:text-gray-100;
+  }
+
+  pre {
+    @apply font-mono text-sm bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto text-gray-900 dark:text-gray-100;
+  }
+
+  pre code {
+    @apply bg-transparent p-0;
+  }
+
+  /* ==========================================================================
+   * MARK/HIGHLIGHT
+   * Yellow highlight for marked/highlighted text.
+   * ========================================================================== */
+
+  mark {
+    @apply bg-yellow-200 dark:bg-yellow-800 px-1 rounded;
+  }
+}
+
+/* ==========================================================================
+ * NOTE ON UTILITY CLASSES
+ *
+ * This file intentionally does NOT define utility classes like .text-muted,
+ * .text-primary, etc. These are defined in individual app's app.css files
+ * because they reference app-specific CSS custom properties (e.g., --Text-Tartiary).
+ *
+ * For typography utilities, import and use tokens from typography.ts:
+ *   import { typography } from '@getmicdrop/svelte-components';
+ *   <span class={typography.smMuted}>Helper text</span>
+ * ========================================================================== */