@mhmo91/schmancy 0.4.76 → 0.4.78

package/dist/ai/icons.md

@@ -1,147 +1,248 @@
 # Schmancy Icons - AI Reference
 
-```js
-// Basic Icon
-<schmancy-icon
-  icon="icon-name"
-  size="small|medium|large|x-large"
-  color="primary|secondary|success|warning|danger|info|currentColor">
-</schmancy-icon>
-
-// Icon with custom size
-<schmancy-icon
-  icon="home"
-  size="24px">
-</schmancy-icon>
+Modern Material Symbols icon component with variable font properties for dynamic icon styling.
 
-// Icon with custom color
+```js
+// Component Tag
 <schmancy-icon
-  icon="star"
-  color="#f5a623">
+  fill="0-1"
+  weight="100-700"
+  grade="-50-200"
+  variant="outlined|rounded|sharp">
+  icon-name
 </schmancy-icon>
 
-// Icon Properties
-icon: string         // Icon name to display
-size: string         // Size: "small" (16px), "medium" (24px), "large" (32px), "x-large" (48px), or custom size
-color: string        // Color: semantic colors, CSS color values, or "currentColor"
-rotate: number       // Rotation in degrees
-flip: string         // Flip transformation: "horizontal", "vertical", "both"
-spin: boolean        // Apply a spinning animation
-clickable: boolean   // Make icon clickable with hover effects
-
-// Icon Events
-@click   // Fires when icon is clicked
-
-// Available Icons
-// The library includes a comprehensive set of icons. Some common ones:
-// - UI Actions: "add", "remove", "edit", "delete", "search", "close", "check", "menu"
-// - Navigation: "home", "back", "forward", "up", "down", "download", "upload"
-// - Communication: "mail", "chat", "phone", "notification", "share"
-// - Media: "play", "pause", "stop", "volume", "camera", "image"
-// - Objects: "file", "folder", "document", "calendar", "clock", "location"
-// - Social: "user", "group", "like", "star", "settings"
-// - Alerts: "info", "warning", "error", "success"
-// - Arrows: "arrow-up", "arrow-right", "arrow-down", "arrow-left"
-// - Chevrons: "chevron-up", "chevron-right", "chevron-down", "chevron-left"
-
 // Examples
-// Basic icon usage
-<schmancy-icon icon="home"></schmancy-icon>
-
-// Icons with different sizes
-<div>
-  <schmancy-icon icon="star" size="small"></schmancy-icon>
-  <schmancy-icon icon="star" size="medium"></schmancy-icon>
-  <schmancy-icon icon="star" size="large"></schmancy-icon>
-  <schmancy-icon icon="star" size="x-large"></schmancy-icon>
-  <schmancy-icon icon="star" size="64px"></schmancy-icon>
-</div>
+// 1. Basic icon (outlined style by default)
+<schmancy-icon>home</schmancy-icon>
+
+// 2. Filled vs Outlined
+<schmancy-icon fill="0">favorite</schmancy-icon>    // Outlined heart
+<schmancy-icon fill="1">favorite</schmancy-icon>    // Filled heart
+
+// 3. Icon weight variations
+<schmancy-icon weight="100">search</schmancy-icon>  // Thin
+<schmancy-icon weight="400">search</schmancy-icon>  // Regular (default)
+<schmancy-icon weight="700">search</schmancy-icon>  // Bold
+
+// 4. Icon variants
+<schmancy-icon variant="outlined">settings</schmancy-icon>  // Default
+<schmancy-icon variant="rounded">settings</schmancy-icon>   // Rounded style
+<schmancy-icon variant="sharp">settings</schmancy-icon>     // Sharp corners
+
+// 5. Grade variations (visual weight)
+<schmancy-icon grade="-25">notifications</schmancy-icon>  // Lighter
+<schmancy-icon grade="0">notifications</schmancy-icon>    // Normal (default)
+<schmancy-icon grade="200">notifications</schmancy-icon>  // Heavier
+
+// 6. Combined properties
+<schmancy-icon fill="1" weight="300" variant="rounded">
+  star
+</schmancy-icon>
 
-// Icons with different colors
-<div>
-  <schmancy-icon icon="info" color="info"></schmancy-icon>
-  <schmancy-icon icon="check" color="success"></schmancy-icon>
-  <schmancy-icon icon="warning" color="warning"></schmancy-icon>
-  <schmancy-icon icon="error" color="danger"></schmancy-icon>
-  <schmancy-icon icon="help" color="primary"></schmancy-icon>
-  <schmancy-icon icon="settings" color="secondary"></schmancy-icon>
-  <schmancy-icon icon="star" color="#f5a623"></schmancy-icon>
-</div>
+// 7. Icon sizing (via CSS)
+<schmancy-icon style="--schmancy-icon-size: 16px;">home</schmancy-icon>
+<schmancy-icon style="--schmancy-icon-size: 32px;">home</schmancy-icon>
+<schmancy-icon style="--schmancy-icon-size: 48px;">home</schmancy-icon>
 
-// Icon in a button
+// 8. Icons in buttons
 <schmancy-button>
-  <schmancy-icon slot="prefix" icon="download"></schmancy-icon>
+  <schmancy-icon slot="icon">download</schmancy-icon>
   Download
 </schmancy-button>
 
-<schmancy-icon-button icon="edit"></schmancy-icon-button>
+<schmancy-button variant="filled">
+  <schmancy-icon slot="icon" fill="1">add</schmancy-icon>
+  Add Item
+</schmancy-button>
+
+// 9. Icons in list items
+<schmancy-list-item>
+  <schmancy-icon slot="start">folder</schmancy-icon>
+  Documents
+</schmancy-list-item>
+
+<schmancy-list-item>
+  <schmancy-icon slot="start" fill="1">star</schmancy-icon>
+  Favorites
+</schmancy-list-item>
+
+// 10. Icon transitions (smooth property changes)
+<schmancy-icon
+  fill=${isLiked ? "1" : "0"}
+  weight=${isLiked ? "700" : "400"}>
+  favorite
+</schmancy-icon>
+
+// 11. Navigation icons
+<schmancy-navigation-rail>
+  <schmancy-icon slot="icon" fill=${activeTab === 'home' ? "1" : "0"}>
+    home
+  </schmancy-icon>
+  <schmancy-icon slot="icon" fill=${activeTab === 'search' ? "1" : "0"}>
+    search
+  </schmancy-icon>
+  <schmancy-icon slot="icon" fill=${activeTab === 'settings' ? "1" : "0"}>
+    settings
+  </schmancy-icon>
+</schmancy-navigation-rail>
 
-// Icon with rotation and flip
-<div>
-  <schmancy-icon icon="arrow-right" rotate="45"></schmancy-icon>
-  <schmancy-icon icon="arrow-right" rotate="90"></schmancy-icon>
-  <schmancy-icon icon="arrow-right" rotate="180"></schmancy-icon>
-  <schmancy-icon icon="arrow-right" rotate="270"></schmancy-icon>
-  <schmancy-icon icon="arrow-right" flip="horizontal"></schmancy-icon>
-  <schmancy-icon icon="arrow-right" flip="vertical"></schmancy-icon>
+// 12. Status indicators
+<div class="flex items-center gap-2">
+  <schmancy-icon fill="1" class="text-success">check_circle</schmancy-icon>
+  <span>Success</span>
 </div>
 
-// Spinning icon
-<schmancy-icon icon="refresh" spin></schmancy-icon>
+<div class="flex items-center gap-2">
+  <schmancy-icon fill="1" class="text-warning">warning</schmancy-icon>
+  <span>Warning</span>
+</div>
 
-// Loading state with icon
-<div>
-  <schmancy-icon icon="refresh" spin></schmancy-icon>
-  <span>Loading...</span>
+<div class="flex items-center gap-2">
+  <schmancy-icon fill="1" class="text-error">error</schmancy-icon>
+  <span>Error</span>
 </div>
 
-// Icon in form fields
+// 13. Form field icons
 <schmancy-input>
-  <schmancy-icon slot="prefix" icon="search"></schmancy-icon>
+  <schmancy-icon slot="prefix">search</schmancy-icon>
 </schmancy-input>
 
 <schmancy-input type="password">
-  <schmancy-icon 
-    slot="suffix" 
-    icon=${passwordVisible ? "eye-off" : "eye"}
-    clickable
-    @click=${togglePasswordVisibility}>
+  <schmancy-icon slot="suffix" fill=${showPassword ? "1" : "0"}>
+    ${showPassword ? 'visibility_off' : 'visibility'}
   </schmancy-icon>
 </schmancy-input>
 
-// Navigation menu with icons
-<schmancy-list interactive>
-  <schmancy-list-item>
-    <schmancy-icon slot="start" icon="home"></schmancy-icon>
-    Home
-  </schmancy-list-item>
-  <schmancy-list-item>
-    <schmancy-icon slot="start" icon="user"></schmancy-icon>
-    Profile
-  </schmancy-list-item>
-  <schmancy-list-item>
-    <schmancy-icon slot="start" icon="settings"></schmancy-icon>
-    Settings
-  </schmancy-list-item>
-  <schmancy-list-item>
-    <schmancy-icon slot="start" icon="help"></schmancy-icon>
-    Help
-  </schmancy-list-item>
-</schmancy-list>
-
-// Status indicators with icons
-<div>
-  <div style="display: flex; align-items: center; gap: 8px;">
-    <schmancy-icon icon="check-circle" color="success"></schmancy-icon>
-    <span>Completed</span>
-  </div>
-  <div style="display: flex; align-items: center; gap: 8px;">
-    <schmancy-icon icon="clock" color="warning"></schmancy-icon>
-    <span>Pending</span>
-  </div>
-  <div style="display: flex; align-items: center; gap: 8px;">
-    <schmancy-icon icon="x-circle" color="danger"></schmancy-icon>
-    <span>Failed</span>
-  </div>
-</div>
-```
+// 14. Animated icon state
+<schmancy-icon
+  @click=${() => this.toggleBookmark()}
+  fill=${this.isBookmarked ? "1" : "0"}
+  weight=${this.isBookmarked ? "700" : "400"}
+  style="cursor: pointer; transition: all 0.2s;">
+  bookmark
+</schmancy-icon>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `fill` | `number` | `0` | Fill value (0 = outlined, 1 = filled) |
+| `weight` | `number` | `400` | Stroke weight (100-700) |
+| `grade` | `number` | `0` | Visual grade/weight (-50 to 200) |
+| `variant` | `string` | `'outlined'` | Icon style variant: 'outlined', 'rounded', or 'sharp' |
+
+## CSS Custom Properties
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--schmancy-icon-size` | `24px` | Icon size |
+| `--schmancy-icon-fill` | `0` | Fill value |
+| `--schmancy-icon-weight` | `400` | Weight value |
+| `--schmancy-icon-grade` | `0` | Grade value |
+| `--schmancy-icon-opsz` | `24` | Optical size |
+
+## Material Symbols
+
+This component uses Google's Material Symbols variable font, which provides:
+- **3 variants**: Outlined, Rounded, Sharp
+- **Variable properties**: Continuously adjustable fill, weight, and grade
+- **2000+ icons**: Comprehensive icon library
+- **Smooth transitions**: Animated property changes
+- **Automatic font loading**: Fonts are loaded automatically when component is used
+
+## Icon Names
+
+Icons use Material Symbols naming convention. Common icons include:
+
+### Navigation
+- `home`, `arrow_back`, `arrow_forward`, `menu`, `close`, `more_vert`, `more_horiz`
+
+### Actions
+- `search`, `add`, `remove`, `edit`, `delete`, `save`, `share`, `download`, `upload`
+
+### Communication
+- `mail`, `chat`, `call`, `notifications`, `send`, `inbox`, `drafts`
+
+### Media
+- `play_arrow`, `pause`, `stop`, `skip_next`, `skip_previous`, `volume_up`, `mic`
+
+### Status
+- `check`, `close`, `error`, `warning`, `info`, `check_circle`, `cancel`
+
+### Objects
+- `folder`, `description`, `article`, `image`, `movie`, `music_note`, `code`
+
+### User
+- `person`, `group`, `face`, `account_circle`, `settings`, `logout`
+
+Full icon list: https://fonts.google.com/icons
+
+## Common Patterns
+
+### Toggle Icons
+```html
+<!-- Like/Unlike -->
+<schmancy-icon
+  fill=${isLiked ? "1" : "0"}
+  weight=${isLiked ? "700" : "400"}
+  @click=${this.toggleLike}>
+  favorite
+</schmancy-icon>
+
+<!-- Bookmark -->
+<schmancy-icon fill=${isBookmarked ? "1" : "0"}>
+  bookmark
+</schmancy-icon>
+
+<!-- Star Rating -->
+<schmancy-icon fill=${rating >= 1 ? "1" : "0"}>star</schmancy-icon>
+<schmancy-icon fill=${rating >= 2 ? "1" : "0"}>star</schmancy-icon>
+<schmancy-icon fill=${rating >= 3 ? "1" : "0"}>star</schmancy-icon>
+```
+
+### Contextual Icons
+```html
+<!-- Success state -->
+<schmancy-icon fill="1" class="text-success">check_circle</schmancy-icon>
+
+<!-- Error state -->
+<schmancy-icon fill="1" class="text-error">error</schmancy-icon>
+
+<!-- Warning state -->
+<schmancy-icon fill="1" class="text-warning">warning</schmancy-icon>
+
+<!-- Info state -->
+<schmancy-icon fill="0" class="text-info">info</schmancy-icon>
+```
+
+### Size Variations
+```html
+<!-- Small (16px) -->
+<schmancy-icon style="--schmancy-icon-size: 16px;">home</schmancy-icon>
+
+<!-- Default (24px) -->
+<schmancy-icon>home</schmancy-icon>
+
+<!-- Large (32px) -->
+<schmancy-icon style="--schmancy-icon-size: 32px;">home</schmancy-icon>
+
+<!-- Extra Large (48px) -->
+<schmancy-icon style="--schmancy-icon-size: 48px;">home</schmancy-icon>
+```
+
+## Accessibility
+
+- Icons are automatically marked with `aria-hidden="true"` for decorative use
+- For interactive icons, provide `aria-label` or `aria-labelledby`
+- For informational icons, include screen reader text:
+  ```html
+  <schmancy-icon aria-label="Warning">warning</schmancy-icon>
+  ```
+
+## Related Components
+- **[Button](./button.md)**: Icons commonly used in buttons
+- **[List](./list.md)**: Icons in list items
+- **[Input](./input.md)**: Icons in form fields
+- **[Chips](./chips.md)**: Icons in chip components

package/dist/ai/spinner.md

@@ -0,0 +1,165 @@
+# Schmancy Spinner - AI Reference
+
+A modern circular loading spinner with contextual color inheritance and optional glass morphism effect.
+
+```js
+// Component Tag
+<schmancy-spinner
+  color="primary|on-primary|secondary|on-secondary|tertiary|on-tertiary|error|on-error|success|on-success|surface|on-surface|surface-variant|on-surface-variant"
+  size="number"
+  glass?>
+</schmancy-spinner>
+
+// Examples
+// 1. Basic spinner (inherits parent color)
+<schmancy-spinner></schmancy-spinner>
+
+// 2. Different sizes (using Tailwind sizing system)
+<schmancy-spinner size="4"></schmancy-spinner>  // 16px (1rem)
+<schmancy-spinner size="6"></schmancy-spinner>  // 24px (1.5rem) - default
+<schmancy-spinner size="8"></schmancy-spinner>  // 32px (2rem)
+<schmancy-spinner size="12"></schmancy-spinner> // 48px (3rem)
+
+// 3. Color variants
+<schmancy-spinner color="primary"></schmancy-spinner>
+<schmancy-spinner color="on-primary"></schmancy-spinner>
+<schmancy-spinner color="error"></schmancy-spinner>
+<schmancy-spinner color="success"></schmancy-spinner>
+
+// 4. Glass morphism effect
+<schmancy-spinner glass></schmancy-spinner>
+<schmancy-spinner glass size="10" color="primary"></schmancy-spinner>
+
+// 5. Inside buttons (inherits button text color)
+<schmancy-button variant="filled">
+  <schmancy-spinner size="5"></schmancy-spinner>
+  Loading...
+</schmancy-button>
+
+// 6. Inside surfaces with contextual colors
+<schmancy-surface type="filled" color="primary">
+  <schmancy-spinner color="on-primary"></schmancy-spinner>
+</schmancy-surface>
+
+// 7. Loading states
+<div class="flex items-center gap-2">
+  <schmancy-spinner size="5"></schmancy-spinner>
+  <schmancy-typography>Loading data...</schmancy-typography>
+</div>
+
+// 8. Overlay loading indicator with glass effect
+<div class="relative">
+  <div class="absolute inset-0 flex items-center justify-center bg-surface/50 backdrop-blur-sm">
+    <schmancy-spinner glass size="10"></schmancy-spinner>
+  </div>
+  <!-- Content being loaded -->
+</div>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `color` | `string` | `inherit` | Theme color variant or 'inherit' for contextual color |
+| `size` | `number` | `6` | Size in Tailwind units (4 = 16px, 6 = 24px, 8 = 32px, etc.) |
+| `glass` | `boolean` | `false` | Apply glass morphism effect with backdrop blur |
+
+## Color System
+
+The spinner intelligently inherits colors from its context by default:
+- Inside buttons: Inherits button text color
+- Inside colored surfaces: Inherits appropriate contrast color
+- Standalone: Uses current text color
+
+Available explicit colors:
+- **Primary colors**: `primary`, `on-primary`
+- **Secondary colors**: `secondary`, `on-secondary`
+- **Tertiary colors**: `tertiary`, `on-tertiary`
+- **Status colors**: `error`, `on-error`, `success`, `on-success`
+- **Surface colors**: `surface`, `on-surface`, `surface-variant`, `on-surface-variant`
+
+## Glass Effect
+
+The `glass` attribute adds a modern glass morphism effect:
+- Semi-transparent background with backdrop blur
+- Subtle border and inner shadow
+- Perfect for overlay loading indicators
+- Works well on image or complex backgrounds
+
+## Size System
+
+Uses Tailwind's sizing convention where each unit = 0.25rem:
+- `size="4"` = 16px (1rem)
+- `size="5"` = 20px (1.25rem)
+- `size="6"` = 24px (1.5rem) - **default**
+- `size="8"` = 32px (2rem)
+- `size="10"` = 40px (2.5rem)
+- `size="12"` = 48px (3rem)
+
+## Common Use Cases
+
+### 1. Button Loading State
+```html
+<schmancy-button variant="filled" disabled>
+  <schmancy-spinner size="5"></schmancy-spinner>
+  <span class="ml-2">Processing...</span>
+</schmancy-button>
+```
+
+### 2. Page Loading Overlay
+```html
+<div class="fixed inset-0 flex items-center justify-center bg-black/30 backdrop-blur-sm z-50">
+  <schmancy-spinner glass size="12"></schmancy-spinner>
+</div>
+```
+
+### 3. Inline Loading Indicator
+```html
+<schmancy-list-item>
+  <span>Fetching user data</span>
+  <schmancy-spinner slot="end" size="5"></schmancy-spinner>
+</schmancy-list-item>
+```
+
+### 4. Card Loading State
+```html
+<schmancy-card>
+  <div class="flex flex-col items-center justify-center py-8">
+    <schmancy-spinner size="8" color="primary"></schmancy-spinner>
+    <schmancy-typography type="body" token="sm" class="mt-2">
+      Loading content...
+    </schmancy-typography>
+  </div>
+</schmancy-card>
+```
+
+### 5. Status Indicators
+```html
+<div class="flex items-center gap-2">
+  <schmancy-spinner size="4" color="success"></schmancy-spinner>
+  <schmancy-typography>Syncing...</schmancy-typography>
+</div>
+```
+
+## Accessibility
+
+- The spinner is automatically marked with `aria-hidden="true"` since it's decorative
+- Always provide textual context for screen readers:
+  ```html
+  <div role="status">
+    <schmancy-spinner></schmancy-spinner>
+    <span class="sr-only">Loading...</span>
+  </div>
+  ```
+
+## Animation
+
+- Continuous rotation at 1 second per revolution
+- Smooth animation with reverse direction for visual appeal
+- No performance impact with CSS animations
+- Respects `prefers-reduced-motion` for accessibility
+
+## Related Components
+- **[Progress](./progress.md)**: For determinate linear progress
+- **[Busy](./busy.md)**: For full-page loading states
+- **[Button](./button.md)**: Often used with spinners for loading states

package/dist/ai/typography.md

@@ -53,8 +53,8 @@ import '@schmancy/index'  // For all Schmancy components
 </schmancy-typography>
 
 // 6. With additional styling
-<schmancy-typography type="headline" token="sm" class="mb-4 text-primary">
-  Highlighted Section
+<schmancy-typography type="headline" token="sm" class="mb-4">
+  Section Title
 </schmancy-typography>
 
 // 7. Centered uppercase title
@@ -77,7 +77,7 @@ import '@schmancy/index'  // For all Schmancy components
   <schmancy-typography type="headline" token="sm" class="block mb-2">
     Card Title
   </schmancy-typography>
-  <schmancy-typography type="body" token="md" class="block mb-4 text-surface-onVariant">
+  <schmancy-typography type="body" token="md" class="block mb-4">
     This is a description that provides more context about the card content.
   </schmancy-typography>
   <schmancy-typography type="label" token="lg" class="text-primary">
@@ -167,8 +167,66 @@ Material Design 3 typography scale with 6 types, each with 5 sizes:
 ### Theme Integration
 Typography automatically inherits colors from the theme:
 - Uses `color: var(--schmancy-sys-color-surface-on)` by default
-- Respects surface container colors
-- Can be overridden with Tailwind classes
+- Automatically inherits the correct text color from parent surfaces
+- WARNING: Avoid overriding with Tailwind color classes when inside surfaces
+
+### Color Inheritance
+
+**CRITICAL: Typography components automatically inherit the correct color from their parent surface.**
+
+#### ✅ CORRECT - Let Surface Handle Colors
+```html
+<!-- Typography inherits the correct on-color from the surface -->
+<schmancy-surface type="containerLow" class="p-4">
+  <schmancy-typography type="headline" token="md">
+    This text automatically uses the correct contrast color
+  </schmancy-typography>
+</schmancy-surface>
+
+<!-- Different surface types provide different text colors automatically -->
+<schmancy-surface type="primary" class="p-4">
+  <schmancy-typography type="body" token="md">
+    White text on primary background (automatic)
+  </schmancy-typography>
+</schmancy-surface>
+```
+
+#### ❌ WRONG - Explicit Color Classes Inside Surfaces
+```html
+<!-- BAD: Overriding the surface's automatic color selection -->
+<schmancy-surface type="containerLow" class="p-4">
+  <schmancy-typography type="headline" token="md" class="text-surface-onVariant">
+    Don't add color classes - the surface already provides the right color!
+  </schmancy-typography>
+</schmancy-surface>
+```
+
+#### When to Use Color Classes
+
+**ONLY add explicit color classes when:**
+1. Typography is used standalone (not inside a surface)
+2. You need a specific semantic color (e.g., `text-error` for errors)
+3. Creating interactive elements that change color on hover
+
+```html
+<!-- Standalone typography (not in a surface) - color class is appropriate -->
+<div class="p-4">
+  <schmancy-typography type="label" token="md" class="text-error">
+    Error: Invalid input
+  </schmancy-typography>
+</div>
+
+<!-- Interactive element with hover state -->
+<schmancy-typography type="body" token="md" class="cursor-pointer hover:text-primary">
+  Click for more info
+</schmancy-typography>
+```
+
+**Key Rules:**
+- NEVER add `text-surface-onVariant` or similar classes inside surfaces
+- Surfaces automatically provide the correct contrast color
+- Each surface type (primary, secondary, tertiary, containerLow, etc.) knows its appropriate text color
+- Trust the component system - it handles accessibility and contrast automatically
 
 ### Implementation Details
 - Uses Shadow DOM with encapsulated styles
@@ -184,7 +242,7 @@ Typography automatically inherits colors from the theme:
    <schmancy-typography type="display" token="md" class="block mb-4">
      Dashboard
    </schmancy-typography>
-   <schmancy-typography type="body" token="lg" class="block text-surface-onVariant">
+   <schmancy-typography type="body" token="lg" class="block">
      Welcome back! Here's your activity summary.
    </schmancy-typography>
    ```
@@ -202,7 +260,7 @@ Typography automatically inherits colors from the theme:
    <schmancy-typography type="headline" token="md" class="block text-primary">
      $1,234.56
    </schmancy-typography>
-   <schmancy-typography type="label" token="sm" class="text-surface-onVariant">
+   <schmancy-typography type="label" token="sm">
      Total Revenue
    </schmancy-typography>
    ```
@@ -214,7 +272,7 @@ Typography automatically inherits colors from the theme:
        <schmancy-typography type="title" token="md" class="block">
          Feature One
        </schmancy-typography>
-       <schmancy-typography type="body" token="sm" class="block text-surface-onVariant">
+       <schmancy-typography type="body" token="sm" class="block">
          Description of the first feature
        </schmancy-typography>
      </div>

package/dist/{animated-text-DlRt6Q09.cjs → animated-text-DRQbkLfM.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const h=require("./litElement.mixin-BLa7fWsS.cjs");require("./tailwind.mixin-df9KoZ9x.cjs");const r=require("lit/decorators.js"),c=require("lit");var d=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(i,a,p,n)=>{for(var l,o=n>1?void 0:n?u(a,p):a,y=i.length-1;y>=0;y--)(l=i[y])&&(o=(n?l(a,p,o):l(o))||o);return n&&o&&d(a,p,o),o};let t=class extends h.$LitElement(c.css`
+"use strict";const e=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const r=require("lit/decorators.js");require("./tailwind.mixin-C-CFqxyc.cjs");const h=require("./litElement.mixin-D-9tQapF.cjs"),c=require("lit");var d=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(i,a,p,n)=>{for(var l,o=n>1?void 0:n?u(a,p):a,y=i.length-1;y>=0;y--)(l=i[y])&&(o=(n?l(a,p,o):l(o))||o);return n&&o&&d(a,p,o),o};let t=class extends h.$LitElement(c.css`
 	:host {
 		font-family: inherit;
 		display: block;
@@ -34,4 +34,4 @@
 				</span>
 			</span>
 		`}};s([r.property({type:String})],t.prototype,"ease",2),s([r.property({type:Number})],t.prototype,"delay",2),s([r.property({type:Number})],t.prototype,"stagger",2),s([r.property({type:Number})],t.prototype,"duration",2),s([r.property({type:Array})],t.prototype,"scale",2),s([r.property({type:Array})],t.prototype,"opacity",2),s([r.property({type:Array})],t.prototype,"translateX",2),s([r.property({type:Array})],t.prototype,"translateY",2),s([r.property({type:Array})],t.prototype,"translateZ",2),s([r.property({type:Array})],t.prototype,"rotateZ",2),s([r.property({type:Boolean})],t.prototype,"resetOnScroll",2),s([r.queryAssignedNodes()],t.prototype,"defaultSlot",2),s([r.query(".letters")],t.prototype,"letters",2),s([r.query(".ml7")],t.prototype,"ml7",2),t=s([r.customElement("schmancy-animated-text")],t);
-//# sourceMappingURL=animated-text-DlRt6Q09.cjs.map
+//# sourceMappingURL=animated-text-DRQbkLfM.cjs.map