feat: implement Material 3 typography tokens and classes

all.js

@@ -27,12 +27,13 @@ import './buttons/filled-icon-button.js'
 import './buttons/filled-tonal-icon-button.js'
 import './buttons/icon-button.js'
 import './buttons/outlined-icon-button.js'
+import './indicators/loading.js'
+import './indicators/progress.js'
 import './list/list.js'
 import './list/list-item.js'
 import './menu/menu.js'
 import './menu/menu-item.js'
 import './menu/sub-menu.js'
-import './progress/progress.js'
 import './radio/radio.js'
 import './internal/ripple/ripple.js'
 import './select/select.js'
@@ -59,12 +60,13 @@ export * from './internal/field/field.js'
 export * from './internal/focus/focus-ring.js'
 export * from './icon/icon.js'
 export * from './buttons/icon-button.js'
+export * from './indicators/loading.js'
+export * from './indicators/progress.js'
 export * from './list/list.js'
 export * from './list/list-item.js'
 export * from './menu/menu.js'
 export * from './menu/menu-item.js'
 export * from './menu/sub-menu.js'
-export * from './progress/progress.js'
 export * from './radio/radio.js'
 export * from './internal/ripple/ripple.js'
 export * from './select/select.js'

common.js

@@ -13,12 +13,12 @@ import './chips/chip-set.js'
 import './dialog/dialog.js'
 import './icon/icon.js'
 import './buttons/icon-button.js'
+import './indicators/progress.js'
 import './list/list.js'
 import './list/list-item.js'
 import './menu/menu.js'
 import './menu/menu-item.js'
 import './menu/sub-menu.js'
-import './progress/progress.js'
 import './radio/radio.js'
 import './select/select.js'
 import './select/select-option.js'
@@ -33,12 +33,12 @@ export * from './chips/chip-set.js'
 export * from './dialog/dialog.js'
 export * from './icon/icon.js'
 export * from './buttons/icon-button.js'
+export * from './indicators/progress.js'
 export * from './list/list.js'
 export * from './list/list-item.js'
 export * from './menu/menu.js'
 export * from './menu/menu-item.js'
 export * from './menu/sub-menu.js'
-export * from './progress/progress.js'
 export * from './radio/radio.js'
 export * from './select/select.js'
 export * from './select/select-option.js'

demo/index.html

@@ -63,7 +63,8 @@
       import 'material/menu/menu-item.js'
       import 'material/snackbar/snackbar.js'
       import 'material/app/bar.js'
-      import 'material/progress/progress.js'
+      import 'material/indicators/progress.js'
+      import 'material/indicators/loading.js'
       import './components/expressive-component.js'
     </script>
 
@@ -183,8 +184,28 @@ <h2>Inputs</h2>
             </div>
 
             <h3>Progress</h3>
-            <md-progress type="circular" indeterminate></md-progress>
-            <md-progress type="linear" value="0.5" indeterminate></md-progress>
+            <div class="flex g12 aic" style="margin-bottom: 12px; flex-wrap: wrap;">
+              <md-progress type="circular" indeterminate shape="flat"></md-progress>
+              <md-progress type="circular" value="0.7"></md-progress>
+              <md-progress type="linear" value="0.5" style="width: 200px;"></md-progress>
+            </div>
+
+            <h4>Wavy Progress Indicators</h4>
+            <div class="flex g12 aic" style="margin-bottom: 24px; flex-wrap: wrap;">
+              <md-progress type="circular" indeterminate shape="wavy"></md-progress>
+              <md-progress type="circular" value="0.7" shape="wavy"></md-progress>
+              <md-progress type="linear" value="0.5" shape="wavy" style="width: 200px;"></md-progress>
+              <md-progress type="linear" indeterminate shape="wavy" style="width: 200px;"></md-progress>
+            </div>
+
+            <h3>Loading Indicator (M3 Expressive)</h3>
+            <div class="flex g12 aic" style="margin-bottom: 24px;">
+              <md-loading></md-loading>
+              <md-loading contained></md-loading>
+              <md-loading color="var(--md-sys-color-tertiary, #7d5260)"></md-loading>
+              <md-loading contained color="white" container-color="var(--md-sys-color-primary, #6750a4)"></md-loading>
+              <md-loading size="64" contained></md-loading>
+            </div>
 
             <md-snackbar message="Hello World!" open></md-snackbar>
           </div>

indicators/README.md

@@ -0,0 +1,108 @@
+# Indicators
+
+This directory contains progress and loading indicator components implementing the Material Design 3 specifications, including the M3 Expressive shape and physics extensions.
+
+- [Progress Indicators (`md-progress`)](#progress-indicators-md-progress)
+- [Loading Component (`md-loading`)](#loading-component-md-loading)
+
+---
+
+## Progress Indicators (`md-progress`)
+
+The `md-progress` component displays activity or loading status. It supports linear and circular shapes, determinate and indeterminate behaviors, and the M3 Expressive wavy track extension.
+
+### Import
+
+```javascript
+import 'material/indicators/progress.js'
+```
+
+### Usage
+
+#### Circular Progress
+
+```html
+<!-- Indeterminate spinner -->
+<md-progress type="circular" indeterminate></md-progress>
+
+<!-- Determinate circle (0.0 to 1.0) -->
+<md-progress type="circular" value="0.7"></md-progress>
+```
+
+#### Linear Progress
+
+```html
+<!-- Indeterminate linear progress -->
+<md-progress type="linear" indeterminate></md-progress>
+
+<!-- Determinate linear progress (0.0 to 1.0) -->
+<md-progress type="linear" value="0.5"></md-progress>
+```
+
+#### Wavy M3 Expressive Extension
+
+Add the `shape="wavy"` attribute to enable the M3 Expressive waveform style (defaults to `flat`):
+
+*   **Wavy Circular**: Animates the active track as a circular wave with smooth phase propagation.
+*   **Wavy Linear**: Replaces the active bar with a smooth sine wave. Features a `12px` expanded track height, a centered `4px` straight inactive track, and a stop indicator dot at the end (for determinate mode).
+
+```html
+<!-- Circular determinate wavy -->
+<md-progress type="circular" value="0.7" shape="wavy"></md-progress>
+
+<!-- Circular indeterminate wavy -->
+<md-progress type="circular" indeterminate shape="wavy"></md-progress>
+
+<!-- Linear determinate wavy -->
+<md-progress type="linear" value="0.5" shape="wavy"></md-progress>
+
+<!-- Linear indeterminate wavy -->
+<md-progress type="linear" indeterminate shape="wavy"></md-progress>
+```
+
+---
+
+## Loading Component (`md-loading`)
+
+The `md-loading` is an expressive M3 component that uses a spring physics engine to morph between 7 different geometric shapes (soft burst, cookie, pentagon, rounded diamond/pill, sunny, oval, etc.) with a rotating canvas animation.
+
+### Import
+
+```javascript
+import 'material/indicators/loading.js'
+```
+
+### Usage
+
+```html
+<!-- Default Loading Component (48px) -->
+<md-loading></md-loading>
+
+<!-- Contained Component (adds a circular themed background container) -->
+<md-loading contained></md-loading>
+
+<!-- Custom sized & themed contained component -->
+<md-loading size="64" contained></md-loading>
+```
+
+### Properties and Attributes
+
+| Property | Attribute | Type | Default | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `size` | `size` | `number` | `48` | The bounding box size of the indicator in pixels. |
+| `color` | `color` | `string` | `'var(--md-sys-color-primary, #6750a4)'` | The color of the morphing indicator shape. |
+| `contained` | `contained` | `boolean` | `false` | If true, renders a circular background container behind the indicator. |
+| `containerColor` | `container-color`| `string` | `'var(--md-sys-color-surface-container-high, rgba(0, 0, 0, 0.08))'` | The color of the background container (when `contained` is true). |
+| `speed` | `speed` | `number` | `1` | Animation speed multiplier. |
+| `paused` | `paused` | `boolean` | `false` | If true, pauses the physics engine and animation loop. |
+| `sizeRatio` | `size-ratio` | `number` | `0.79` | The ratio of the indicator shape size relative to the host container `size`. |
+
+### Styling
+
+You can customize the size of the loading indicator using the CSS custom property:
+
+```css
+md-loading {
+  --md-loading-size: 64px;
+}
+```