@m3e/core 1.2.1 → 1.3.0

package/dist/custom-elements.json

@@ -1299,31 +1299,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./decorators\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./directives\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./mixins\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./primitives\""
+            "package": "\"./converters\""
           }
         },
         {
@@ -1331,7 +1307,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./tokens\""
+            "package": "\"./decorators\""
           }
         },
         {
@@ -1339,99 +1315,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./utils\""
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/a11y/keycodes/getKeyCode.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "getKeyCode",
-          "return": {
-            "type": {
-              "text": "number"
-            }
-          },
-          "parameters": [
-            {
-              "name": "e",
-              "type": {
-                "text": "KeyboardEvent"
-              },
-              "description": "The `KeyboardEvent` for which to resolve the key code."
-            }
-          ],
-          "description": "Resolves the key code for the specified `KeyboardEvent`."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "getKeyCode",
-          "declaration": {
-            "name": "getKeyCode",
-            "module": "src/a11y/keycodes/getKeyCode.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/a11y/keycodes/hasModifierKey.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "hasModifierKey",
-          "return": {
-            "type": {
-              "text": "boolean"
-            }
-          },
-          "parameters": [
-            {
-              "name": "e",
-              "type": {
-                "text": "KeyboardEvent"
-              },
-              "description": "The `KeyboardEvent` to test."
-            },
-            {
-              "name": "modifiers",
-              "type": {
-                "text": "ModifierKey[]"
-              },
-              "description": "The modifier keys to test."
-            }
-          ],
-          "description": "Determines whether a modifier key is pressed."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "hasModifierKey",
-          "declaration": {
-            "name": "hasModifierKey",
-            "module": "src/a11y/keycodes/hasModifierKey.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/a11y/keycodes/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./ModifierKeys\""
+            "package": "\"./directives\""
           }
         },
         {
@@ -1439,7 +1323,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./KeyCode\""
+            "package": "\"./mixins\""
           }
         },
         {
@@ -1447,7 +1331,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./getKeyCode\""
+            "package": "\"./primitives\""
           }
         },
         {
@@ -1455,7 +1339,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./hasModifierKey\""
+            "package": "\"./tokens\""
           }
         },
         {
@@ -1463,80 +1347,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./isModifierAllowed\""
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/a11y/keycodes/isModifierAllowed.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "isModifierAllowed",
-          "return": {
-            "type": {
-              "text": "boolean"
-            }
-          },
-          "parameters": [
-            {
-              "name": "e",
-              "type": {
-                "text": "KeyboardEvent"
-              },
-              "description": "The `KeyboardEvent` to test."
-            },
-            {
-              "name": "modifiers",
-              "type": {
-                "text": "ModifierKey[]"
-              },
-              "description": "The allowed modifier keys."
-            }
-          ],
-          "description": "Determines whether the specified modifier keys are allowed."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "isModifierAllowed",
-          "declaration": {
-            "name": "isModifierAllowed",
-            "module": "src/a11y/keycodes/isModifierAllowed.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/a11y/keycodes/KeyCode.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/a11y/keycodes/ModifierKeys.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ModifierKeys",
-          "type": {
-            "text": "readonly ModifierKey[]"
-          },
-          "default": "[\"alt\", \"shift\", \"ctrl\", \"meta\"]",
-          "description": "The modifier keys."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ModifierKeys",
-          "declaration": {
-            "name": "ModifierKeys",
-            "module": "src/a11y/keycodes/ModifierKeys.ts"
+            "package": "\"./utils\""
           }
         }
       ]
@@ -5509,25 +5320,222 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/controllers/AnimationLoopController.ts",
+      "path": "src/a11y/keycodes/getKeyCode.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "A `ReactiveController` used to execute a function in an animation loop.",
-          "name": "AnimationLoopController",
-          "members": [
+          "kind": "function",
+          "name": "getKeyCode",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "#frameId",
-              "privacy": "private",
+              "name": "e",
               "type": {
-                "text": "number | null"
+                "text": "KeyboardEvent"
               },
-              "default": "null"
-            },
+              "description": "The `KeyboardEvent` for which to resolve the key code."
+            }
+          ],
+          "description": "Resolves the key code for the specified `KeyboardEvent`."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "getKeyCode",
+          "declaration": {
+            "name": "getKeyCode",
+            "module": "src/a11y/keycodes/getKeyCode.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/a11y/keycodes/hasModifierKey.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "hasModifierKey",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "#lastTime",
+              "name": "e",
+              "type": {
+                "text": "KeyboardEvent"
+              },
+              "description": "The `KeyboardEvent` to test."
+            },
+            {
+              "name": "modifiers",
+              "type": {
+                "text": "ModifierKey[]"
+              },
+              "description": "The modifier keys to test."
+            }
+          ],
+          "description": "Determines whether a modifier key is pressed."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "hasModifierKey",
+          "declaration": {
+            "name": "hasModifierKey",
+            "module": "src/a11y/keycodes/hasModifierKey.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/a11y/keycodes/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./ModifierKeys\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./KeyCode\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./getKeyCode\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./hasModifierKey\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./isModifierAllowed\""
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/a11y/keycodes/isModifierAllowed.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "isModifierAllowed",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "e",
+              "type": {
+                "text": "KeyboardEvent"
+              },
+              "description": "The `KeyboardEvent` to test."
+            },
+            {
+              "name": "modifiers",
+              "type": {
+                "text": "ModifierKey[]"
+              },
+              "description": "The allowed modifier keys."
+            }
+          ],
+          "description": "Determines whether the specified modifier keys are allowed."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isModifierAllowed",
+          "declaration": {
+            "name": "isModifierAllowed",
+            "module": "src/a11y/keycodes/isModifierAllowed.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/a11y/keycodes/KeyCode.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/a11y/keycodes/ModifierKeys.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ModifierKeys",
+          "type": {
+            "text": "readonly ModifierKey[]"
+          },
+          "default": "[\"alt\", \"shift\", \"ctrl\", \"meta\"]",
+          "description": "The modifier keys."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ModifierKeys",
+          "declaration": {
+            "name": "ModifierKeys",
+            "module": "src/a11y/keycodes/ModifierKeys.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/controllers/AnimationLoopController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A `ReactiveController` used to execute a function in an animation loop.",
+          "name": "AnimationLoopController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#frameId",
+              "privacy": "private",
+              "type": {
+                "text": "number | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "#lastTime",
               "privacy": "private",
               "type": {
                 "text": "number"
@@ -6431,6 +6439,14 @@
             "name": "*",
             "package": "\"./ScrollController\""
           }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./ScrollLockController\""
+          }
         }
       ]
     },
@@ -8577,42 +8593,95 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/decorators/debounce.ts",
+      "path": "src/shared/controllers/ScrollLockController.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "debounce",
-          "return": {
-            "type": {
-              "text": "MethodDecorator"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "A `ReactiveController` that provides safe, predictable scroll locking for modal UI\r\nsurfaces (dialogs, bottom sheets, overlays).",
+          "name": "ScrollLockController",
+          "members": [
             {
-              "name": "timeout",
+              "kind": "field",
+              "name": "#locked",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#scrollTop",
+              "privacy": "private",
               "type": {
                 "text": "number"
               },
-              "description": "The timeout, in milliseconds, after which the function is invoked."
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "#scrollLeft",
+              "privacy": "private",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "#previousOverflow",
+              "privacy": "private",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "#previousScrollbarGutter",
+              "privacy": "private",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "kind": "method",
+              "name": "#isVerticallyScrollable",
+              "privacy": "private",
+              "description": "Returns true if the document is vertically scrollable."
+            },
+            {
+              "kind": "method",
+              "name": "lock",
+              "description": "Locks document scrolling only if scroll actually exists."
+            },
+            {
+              "kind": "method",
+              "name": "unlock",
+              "description": "Unlocks document scrolling and restores the previous state."
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
             }
-          ],
-          "description": "A decorator that runs a function once after a given \"cooldown\" period."
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "debounce",
+          "name": "ScrollLockController",
           "declaration": {
-            "name": "debounce",
-            "module": "src/shared/decorators/debounce.ts"
+            "name": "ScrollLockController",
+            "module": "src/shared/controllers/ScrollLockController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/decorators/index.ts",
+      "path": "src/shared/converters/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -8620,22 +8689,97 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./debounce\""
+            "package": "\"./spaceSeparatedStringConverter\""
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/directives/index.ts",
-      "declarations": [],
+      "path": "src/shared/converters/spaceSeparatedStringConverter.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "spaceSeparatedStringConverter",
+          "type": {
+            "text": "ComplexAttributeConverter<string[], string | null>"
+          },
+          "default": "{ fromAttribute(value: string | null): string[] { if (!value) return []; return value .split(/\\s+/) .map((d) => d.trim()) .filter(Boolean); }, toAttribute(value: string[]): string { return value.join(\" \"); }, }",
+          "description": "Converts a space-separated attribute in to an array of strings."
+        }
+      ],
       "exports": [
         {
           "kind": "js",
-          "name": "*",
+          "name": "spaceSeparatedStringConverter",
           "declaration": {
-            "name": "*",
-            "package": "\"./safeStyleMap\""
+            "name": "spaceSeparatedStringConverter",
+            "module": "src/shared/converters/spaceSeparatedStringConverter.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/decorators/debounce.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "debounce",
+          "return": {
+            "type": {
+              "text": "MethodDecorator"
+            }
+          },
+          "parameters": [
+            {
+              "name": "timeout",
+              "type": {
+                "text": "number"
+              },
+              "description": "The timeout, in milliseconds, after which the function is invoked."
+            }
+          ],
+          "description": "A decorator that runs a function once after a given \"cooldown\" period."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "debounce",
+          "declaration": {
+            "name": "debounce",
+            "module": "src/shared/decorators/debounce.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/decorators/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./debounce\""
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/directives/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./safeStyleMap\""
           }
         }
       ]
@@ -13718,522 +13862,331 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/utils/computeLineCount.ts",
+      "path": "src/shared/tokens/ColorToken.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "computeLineCount",
-          "return": {
-            "type": {
-              "text": "number"
-            }
+          "kind": "variable",
+          "name": "ColorToken",
+          "type": {
+            "text": "{\r\n  /** High-emphasis fills, texts, and icons against surface. */\r\n  primary: unsafeCSS(\"var(--md-sys-color-primary, #6750A4)\"),\r\n\r\n  /** Text and icons against primary. */\r\n  onPrimary: unsafeCSS(\"var(--md-sys-color-on-primary, #FFFFFF)\"),\r\n\r\n  /** Standout fill color against surface, for key components. */\r\n  primaryContainer: unsafeCSS(\"var(--md-sys-color-primary-container, #EADDFF)\"),\r\n\r\n  /** Text and icons against primary container. */\r\n  onPrimaryContainer: unsafeCSS(\"var(--md-sys-color-on-primary-container, #4F378B)\"),\r\n\r\n  /** High-emphasis fills, texts, and icons that maintain the same tone in light and dark themes. */\r\n  primaryFixed: unsafeCSS(\"var(--md-sys-color-primary-fixed, #EADDFF)\"),\r\n\r\n  /** High-emphasis fills, texts, and icons that maintain the same stronger tone in light and dark themes. */\r\n  primaryFixedDim: unsafeCSS(\"var(--md-sys-color-primary-fixed-dim, #D0BCFF)\"),\r\n\r\n  /** Text and icons against fixed primary. */\r\n  onPrimaryFixed: unsafeCSS(\"var(--md-sys-color-on-primary-fixed, #21005D)\"),\r\n\r\n  /** Lower-emphasis text and icons against fixed primary. */\r\n  onPrimaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-primary-fixed-variant, #4F378B)\"),\r\n\r\n  /** Less prominent fills, text, and icons against surface. */\r\n  secondary: unsafeCSS(\"var(--md-sys-color-secondary, #625B71)\"),\r\n\r\n  /** Text and icons against secondary. */\r\n  onSecondary: unsafeCSS(\"var(--md-sys-color-on-secondary, #FFFFFF)\"),\r\n\r\n  /** Less prominent fill color against surface, for recessive components. */\r\n  secondaryContainer: unsafeCSS(\"var(--md-sys-color-secondary-container, #E8DEF8)\"),\r\n\r\n  /** Text and icons against secondary container. */\r\n  onSecondaryContainer: unsafeCSS(\"var(--md-sys-color-on-secondary-container, #4A4458)\"),\r\n\r\n  /** Less prominent fills, texts, and icons that maintain the same tone in light and dark themes. */\r\n  secondaryFixed: unsafeCSS(\"var(--md-sys-color-secondary-fixed, #E8DEF8)\"),\r\n\r\n  /** Less prominent fills, texts, and icons that maintain the same stronger tone in light and dark themes. */\r\n  secondaryFixedDim: unsafeCSS(\"var(--md-sys-color-secondary-fixed-dim, #CCC2DC)\"),\r\n\r\n  /** Text and icons against fixed secondary. */\r\n  onSecondaryFixed: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed, #1D192B)\"),\r\n\r\n  /** Lower-emphasis text and icons against fixed secondary. */\r\n  onSecondaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed-variant, #4A4458)\"),\r\n\r\n  /** Complementary fills, text, and icons against surface. */\r\n  tertiary: unsafeCSS(\"var(--md-sys-color-tertiary, #7D5260)\"),\r\n\r\n  /** Text and icons against tertiary. */\r\n  onTertiary: unsafeCSS(\"var(--md-sys-color-on-tertiary, #FFFFFF)\"),\r\n\r\n  /** Complementary container color against surface. */\r\n  tertiaryContainer: unsafeCSS(\"var(--md-sys-color-tertiary-container, #FFD8E4)\"),\r\n\r\n  /** Text and icons against tertiary container. */\r\n  onTertiaryContainer: unsafeCSS(\"var(--md-sys-color-on-tertiary-container, #633B48)\"),\r\n\r\n  /** Complementary fills, texts, and icons that maintain the same tone in light and dark themes. */\r\n  tertiaryFixed: unsafeCSS(\"var(--md-sys-color-tertiary-fixed, #FFD8E4)\"),\r\n\r\n  /** Complementary fills, texts, and icons that maintain the same stronger tone in light and dark themes. */\r\n  tertiaryFixedDim: unsafeCSS(\"var(--md-sys-color-tertiary-fixed-dim, #EFB8C8)\"),\r\n\r\n  /** Text and icons against fixed tertiary. */\r\n  onTertiaryFixed: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed, #31111D)\"),\r\n\r\n  /** Lower-emphasis text and icons against fixed tertiary. */\r\n  onTertiaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed-variant, #633B48)\"),\r\n\r\n  /** Attention-grabbing color against surface for fills, icons, and text, indicating urgency. */\r\n  error: unsafeCSS(\"var(--md-sys-color-error, #B3261E)\"),\r\n\r\n  /** Text and icons against error. */\r\n  onError: unsafeCSS(\"var(--md-sys-color-on-error, #FFFFFF)\"),\r\n\r\n  /** Attention-grabbing fill color against surface. */\r\n  errorContainer: unsafeCSS(\"var(--md-sys-color-error-container, #F9DEDC)\"),\r\n\r\n  /** Text and icons against error container. */\r\n  onErrorContainer: unsafeCSS(\"var(--md-sys-color-on-error-container, #8C1D18)\"),\r\n\r\n  /** Default color for backgrounds. */\r\n  surface: unsafeCSS(\"var(--md-sys-color-surface, #FEF7FF)\"),\r\n\r\n  /** Text and icons against any surface color. */\r\n  onSurface: unsafeCSS(\"var(--md-sys-color-on-surface, #1D1B20)\"),\r\n\r\n  /** Lower-emphasis color for text and icons against any surface color. */\r\n  onSurfaceVariant: unsafeCSS(\"var(--md-sys-color-on-surface-variant, #49454F)\"),\r\n\r\n  /** Lowest-emphasis container color. */\r\n  surfaceContainerLowest: unsafeCSS(\"var(--md-sys-color-surface-container-lowest, #FFFFFF)\"),\r\n\r\n  /** Low-emphasis container color. */\r\n  surfaceContainerLow: unsafeCSS(\"var(--md-sys-color-surface-container-low, #F7F2FA)\"),\r\n\r\n  /** Default container color. */\r\n  surfaceContainer: unsafeCSS(\"var(--md-sys-color-surface-container, #F3EDF7)\"),\r\n\r\n  /** High-emphasis container color. */\r\n  surfaceContainerHigh: unsafeCSS(\"var(--md-sys-color-surface-container-high, #ECE6F0)\"),\r\n\r\n  /** Highest-emphasis container color. */\r\n  surfaceContainerHighest: unsafeCSS(\"var(--md-sys-color-surface-container-highest, #E6E0E9)\"),\r\n\r\n  /** Dimmest surface color in light and dark themes. */\r\n  surfaceDim: unsafeCSS(\"var(--md-sys-color-surface-dim, #DED8E1)\"),\r\n\r\n  /** Brightest surface color in light and dark themes. */\r\n  surfaceBright: unsafeCSS(\"var(--md-sys-color-surface-bright, #FEF7FF)\"),\r\n\r\n  /** Alternate surface color, can be used for active states. */\r\n  surfaceVariant: unsafeCSS(\"var(--md-sys-color-surface-variant, #E7E0EC)\"),\r\n\r\n  /** Background fills for elements which contrast against surface. */\r\n  inverseSurface: unsafeCSS(\"var(--md-sys-color-inverse-surface, #322F35)\"),\r\n\r\n  /** Text and icons against inverse surface. */\r\n  inverseOnSurface: unsafeCSS(\"var(--md-sys-color-inverse-on-surface, #F5EFF7)\"),\r\n\r\n  /** Primary text and icons against inverse surface. */\r\n  inversePrimary: unsafeCSS(\"var(--md-sys-color-inverse-primary, #D0BCFF)\"),\r\n\r\n  /** Important boundaries, such as a text field outline. */\r\n  outline: unsafeCSS(\"var(--md-sys-color-outline, #79747E)\"),\r\n\r\n  /** Decorative elements, such as dividers. */\r\n  outlineVariant: unsafeCSS(\"var(--md-sys-color-outline-variant, #CAC4D0)\"),\r\n\r\n  /** Elevation shadow color. */\r\n  shadow: unsafeCSS(\"var(--md-sys-color-shadow, #000000)\"),\r\n\r\n  /** Backdrop which obscures underlying content. */\r\n  scrim: unsafeCSS(\"var(--md-sys-color-scrim, #000000)\"),\r\n}"
           },
-          "parameters": [
-            {
-              "name": "element",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "description": "The element for which to compute the number of lines."
-            }
-          ],
-          "description": "Determines the number of textual lines presented by an element."
+          "default": "{ /** High-emphasis fills, texts, and icons against surface. */ primary: unsafeCSS(\"var(--md-sys-color-primary, #6750A4)\"), /** Text and icons against primary. */ onPrimary: unsafeCSS(\"var(--md-sys-color-on-primary, #FFFFFF)\"), /** Standout fill color against surface, for key components. */ primaryContainer: unsafeCSS(\"var(--md-sys-color-primary-container, #EADDFF)\"), /** Text and icons against primary container. */ onPrimaryContainer: unsafeCSS(\"var(--md-sys-color-on-primary-container, #4F378B)\"), /** High-emphasis fills, texts, and icons that maintain the same tone in light and dark themes. */ primaryFixed: unsafeCSS(\"var(--md-sys-color-primary-fixed, #EADDFF)\"), /** High-emphasis fills, texts, and icons that maintain the same stronger tone in light and dark themes. */ primaryFixedDim: unsafeCSS(\"var(--md-sys-color-primary-fixed-dim, #D0BCFF)\"), /** Text and icons against fixed primary. */ onPrimaryFixed: unsafeCSS(\"var(--md-sys-color-on-primary-fixed, #21005D)\"), /** Lower-emphasis text and icons against fixed primary. */ onPrimaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-primary-fixed-variant, #4F378B)\"), /** Less prominent fills, text, and icons against surface. */ secondary: unsafeCSS(\"var(--md-sys-color-secondary, #625B71)\"), /** Text and icons against secondary. */ onSecondary: unsafeCSS(\"var(--md-sys-color-on-secondary, #FFFFFF)\"), /** Less prominent fill color against surface, for recessive components. */ secondaryContainer: unsafeCSS(\"var(--md-sys-color-secondary-container, #E8DEF8)\"), /** Text and icons against secondary container. */ onSecondaryContainer: unsafeCSS(\"var(--md-sys-color-on-secondary-container, #4A4458)\"), /** Less prominent fills, texts, and icons that maintain the same tone in light and dark themes. */ secondaryFixed: unsafeCSS(\"var(--md-sys-color-secondary-fixed, #E8DEF8)\"), /** Less prominent fills, texts, and icons that maintain the same stronger tone in light and dark themes. */ secondaryFixedDim: unsafeCSS(\"var(--md-sys-color-secondary-fixed-dim, #CCC2DC)\"), /** Text and icons against fixed secondary. */ onSecondaryFixed: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed, #1D192B)\"), /** Lower-emphasis text and icons against fixed secondary. */ onSecondaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed-variant, #4A4458)\"), /** Complementary fills, text, and icons against surface. */ tertiary: unsafeCSS(\"var(--md-sys-color-tertiary, #7D5260)\"), /** Text and icons against tertiary. */ onTertiary: unsafeCSS(\"var(--md-sys-color-on-tertiary, #FFFFFF)\"), /** Complementary container color against surface. */ tertiaryContainer: unsafeCSS(\"var(--md-sys-color-tertiary-container, #FFD8E4)\"), /** Text and icons against tertiary container. */ onTertiaryContainer: unsafeCSS(\"var(--md-sys-color-on-tertiary-container, #633B48)\"), /** Complementary fills, texts, and icons that maintain the same tone in light and dark themes. */ tertiaryFixed: unsafeCSS(\"var(--md-sys-color-tertiary-fixed, #FFD8E4)\"), /** Complementary fills, texts, and icons that maintain the same stronger tone in light and dark themes. */ tertiaryFixedDim: unsafeCSS(\"var(--md-sys-color-tertiary-fixed-dim, #EFB8C8)\"), /** Text and icons against fixed tertiary. */ onTertiaryFixed: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed, #31111D)\"), /** Lower-emphasis text and icons against fixed tertiary. */ onTertiaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed-variant, #633B48)\"), /** Attention-grabbing color against surface for fills, icons, and text, indicating urgency. */ error: unsafeCSS(\"var(--md-sys-color-error, #B3261E)\"), /** Text and icons against error. */ onError: unsafeCSS(\"var(--md-sys-color-on-error, #FFFFFF)\"), /** Attention-grabbing fill color against surface. */ errorContainer: unsafeCSS(\"var(--md-sys-color-error-container, #F9DEDC)\"), /** Text and icons against error container. */ onErrorContainer: unsafeCSS(\"var(--md-sys-color-on-error-container, #8C1D18)\"), /** Default color for backgrounds. */ surface: unsafeCSS(\"var(--md-sys-color-surface, #FEF7FF)\"), /** Text and icons against any surface color. */ onSurface: unsafeCSS(\"var(--md-sys-color-on-surface, #1D1B20)\"), /** Lower-emphasis color for text and icons against any surface color. */ onSurfaceVariant: unsafeCSS(\"var(--md-sys-color-on-surface-variant, #49454F)\"), /** Lowest-emphasis container color. */ surfaceContainerLowest: unsafeCSS(\"var(--md-sys-color-surface-container-lowest, #FFFFFF)\"), /** Low-emphasis container color. */ surfaceContainerLow: unsafeCSS(\"var(--md-sys-color-surface-container-low, #F7F2FA)\"), /** Default container color. */ surfaceContainer: unsafeCSS(\"var(--md-sys-color-surface-container, #F3EDF7)\"), /** High-emphasis container color. */ surfaceContainerHigh: unsafeCSS(\"var(--md-sys-color-surface-container-high, #ECE6F0)\"), /** Highest-emphasis container color. */ surfaceContainerHighest: unsafeCSS(\"var(--md-sys-color-surface-container-highest, #E6E0E9)\"), /** Dimmest surface color in light and dark themes. */ surfaceDim: unsafeCSS(\"var(--md-sys-color-surface-dim, #DED8E1)\"), /** Brightest surface color in light and dark themes. */ surfaceBright: unsafeCSS(\"var(--md-sys-color-surface-bright, #FEF7FF)\"), /** Alternate surface color, can be used for active states. */ surfaceVariant: unsafeCSS(\"var(--md-sys-color-surface-variant, #E7E0EC)\"), /** Background fills for elements which contrast against surface. */ inverseSurface: unsafeCSS(\"var(--md-sys-color-inverse-surface, #322F35)\"), /** Text and icons against inverse surface. */ inverseOnSurface: unsafeCSS(\"var(--md-sys-color-inverse-on-surface, #F5EFF7)\"), /** Primary text and icons against inverse surface. */ inversePrimary: unsafeCSS(\"var(--md-sys-color-inverse-primary, #D0BCFF)\"), /** Important boundaries, such as a text field outline. */ outline: unsafeCSS(\"var(--md-sys-color-outline, #79747E)\"), /** Decorative elements, such as dividers. */ outlineVariant: unsafeCSS(\"var(--md-sys-color-outline-variant, #CAC4D0)\"), /** Elevation shadow color. */ shadow: unsafeCSS(\"var(--md-sys-color-shadow, #000000)\"), /** Backdrop which obscures underlying content. */ scrim: unsafeCSS(\"var(--md-sys-color-scrim, #000000)\"), }",
+          "description": "Design tokens that control color."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "computeLineCount",
+          "name": "ColorToken",
           "declaration": {
-            "name": "computeLineCount",
-            "module": "src/shared/utils/computeLineCount.ts"
+            "name": "ColorToken",
+            "module": "src/shared/tokens/ColorToken.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/utils/focusWhenReady.ts",
+      "path": "src/shared/tokens/DensityToken.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "focusWhenReady",
-          "return": {
-            "type": {
-              "text": "Promise<boolean>"
-            }
+          "kind": "variable",
+          "name": "DensityToken",
+          "type": {
+            "text": "{\r\n  ..._DensityToken,\r\n\r\n  /**\r\n   * Creates a CSS `calc` that calculates a dimension based on density.\r\n   * @param {number} minScale The minimum supported scale.\r\n   * @returns {CSSResult} A CSS `calc` used to calculate a dimension based on density.\r\n   */\r\n  calc(minScale: number): CSSResult {\r\n    return unsafeCSS(`calc(max(${minScale}, ${_DensityToken.scale}) * ${_DensityToken.size})`);\r\n  },\r\n}"
           },
-          "parameters": [
-            {
-              "name": "element",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "description": "The element to to focus."
-            },
-            {
-              "name": "timeout",
-              "default": "200",
-              "type": {
-                "text": "number"
-              },
-              "description": "The maximum amount of time to attempt to focus `el`.",
-              "optional": true
-            }
-          ],
-          "description": "Asynchronously attempts to focus an element once it becomes focusable."
+          "default": "{ ..._DensityToken, /** * Creates a CSS `calc` that calculates a dimension based on density. * @param {number} minScale The minimum supported scale. * @returns {CSSResult} A CSS `calc` used to calculate a dimension based on density. */ calc(minScale: number): CSSResult { return unsafeCSS(`calc(max(${minScale}, ${_DensityToken.scale}) * ${_DensityToken.size})`); }, }",
+          "description": "Design tokens that control density."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "focusWhenReady",
+          "name": "DensityToken",
           "declaration": {
-            "name": "focusWhenReady",
-            "module": "src/shared/utils/focusWhenReady.ts"
+            "name": "DensityToken",
+            "module": "src/shared/tokens/DensityToken.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/utils/forcedColorsActive.ts",
+      "path": "src/shared/tokens/DesignToken.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "forcedColorsActive",
-          "return": {
-            "type": {
-              "text": "boolean"
-            }
+          "kind": "variable",
+          "name": "DesignToken",
+          "type": {
+            "text": "{\r\n  /** Design tokens that control color. */\r\n  color: ColorToken,\r\n\r\n  /** Design tokens that control elevation. */\r\n  elevation: ElevationToken,\r\n\r\n  /** Design tokens that control motion. */\r\n  motion: MotionToken,\r\n\r\n  /** Design tokens that control shape. */\r\n  shape: ShapeToken,\r\n\r\n  /** Design tokens that control state layer. */\r\n  state: StateToken,\r\n\r\n  /** Design tokens that control typescale. */\r\n  typescale: TypescaleToken,\r\n\r\n  /** Design tokens that control scrollbars. */\r\n  scrollbar: ScrollbarToken,\r\n\r\n  /** Design tokens that control density. */\r\n  density: DensityToken,\r\n}"
           },
-          "description": "Determines whether forced colors are active."
+          "default": "{ /** Design tokens that control color. */ color: ColorToken, /** Design tokens that control elevation. */ elevation: ElevationToken, /** Design tokens that control motion. */ motion: MotionToken, /** Design tokens that control shape. */ shape: ShapeToken, /** Design tokens that control state layer. */ state: StateToken, /** Design tokens that control typescale. */ typescale: TypescaleToken, /** Design tokens that control scrollbars. */ scrollbar: ScrollbarToken, /** Design tokens that control density. */ density: DensityToken, }",
+          "description": "Design tokens used to style components."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "forcedColorsActive",
+          "name": "DesignToken",
           "declaration": {
-            "name": "forcedColorsActive",
-            "module": "src/shared/utils/forcedColorsActive.ts"
+            "name": "DesignToken",
+            "module": "src/shared/tokens/DesignToken.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/utils/generateClipPaths.ts",
+      "path": "src/shared/tokens/ElevationToken.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "generateClipPaths",
-          "return": {
-            "type": {
-              "text": "string[]"
-            }
+          "kind": "variable",
+          "name": "ElevationToken",
+          "type": {
+            "text": "{\r\n  /** Level 0 elevation. */\r\n  level0: unsafeCSS(`var(--md-sys-elevation-level0, ${elevation(0)})`),\r\n\r\n  /** Level 1 elevation. */\r\n  level1: unsafeCSS(`var(--md-sys-elevation-level1, ${elevation(1)})`),\r\n\r\n  /** Level 2 elevation. */\r\n  level2: unsafeCSS(`var(--md-sys-elevation-level2, ${elevation(3)})`),\r\n\r\n  /** Level 3 elevation. */\r\n  level3: unsafeCSS(`var(--md-sys-elevation-level3, ${elevation(6)})`),\r\n\r\n  /** Level 4 elevation. */\r\n  level4: unsafeCSS(`var(--md-sys-elevation-level4, ${elevation(8)})`),\r\n\r\n  /** Level 5 elevation. */\r\n  level5: unsafeCSS(`var(--md-sys-elevation-level5, ${elevation(12)})`),\r\n}"
           },
-          "parameters": [
-            {
-              "name": "paths",
-              "type": {
-                "text": "string[]"
-              },
-              "description": "The SVG path data to convert to normalized clip paths."
-            },
-            {
-              "name": "maxPoints",
-              "type": {
-                "text": "number"
-              },
-              "description": "The maximum number of points to which to normalize paths."
-            }
-          ],
-          "description": "Generates normalized clip paths from SVG path data."
+          "default": "{ /** Level 0 elevation. */ level0: unsafeCSS(`var(--md-sys-elevation-level0, ${elevation(0)})`), /** Level 1 elevation. */ level1: unsafeCSS(`var(--md-sys-elevation-level1, ${elevation(1)})`), /** Level 2 elevation. */ level2: unsafeCSS(`var(--md-sys-elevation-level2, ${elevation(3)})`), /** Level 3 elevation. */ level3: unsafeCSS(`var(--md-sys-elevation-level3, ${elevation(6)})`), /** Level 4 elevation. */ level4: unsafeCSS(`var(--md-sys-elevation-level4, ${elevation(8)})`), /** Level 5 elevation. */ level5: unsafeCSS(`var(--md-sys-elevation-level5, ${elevation(12)})`), }",
+          "description": "Design tokens that control elevation."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "generateClipPaths",
+          "name": "ElevationToken",
           "declaration": {
-            "name": "generateClipPaths",
-            "module": "src/shared/utils/generateClipPaths.ts"
+            "name": "ElevationToken",
+            "module": "src/shared/tokens/ElevationToken.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/utils/getTextContent.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "getTextContent",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "node",
-              "type": {
-                "text": "Node"
-              },
-              "description": "The node for which to get text content."
-            },
-            {
-              "name": "trim",
-              "default": "false",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "A value indicating whether to trim content.",
-              "optional": true
-            }
-          ],
-          "description": "Gets the text content of a given node, including slotted content."
-        }
-      ],
+      "path": "src/shared/tokens/index.ts",
+      "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "getTextContent",
+          "name": "*",
           "declaration": {
-            "name": "getTextContent",
-            "module": "src/shared/utils/getTextContent.ts"
+            "name": "*",
+            "package": "\"./DesignToken\""
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/utils/guid.ts",
+      "path": "src/shared/tokens/MotionToken.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "guid",
-          "return": {
-            "type": {
-              "text": "string"
-            }
+          "kind": "variable",
+          "name": "MotionToken",
+          "type": {
+            "text": "{\r\n  /** Design tokens that control transition effects. */\r\n  easing: EasingToken,\r\n\r\n  /** Design tokens that control transition duration. */\r\n  duration: DurationToken,\r\n\r\n  /** Design tokens that control spring effects. */\r\n  spring: SpringToken,\r\n}"
           },
-          "description": "Generates a new globally unique identifier (GUID)."
+          "default": "{ /** Design tokens that control transition effects. */ easing: EasingToken, /** Design tokens that control transition duration. */ duration: DurationToken, /** Design tokens that control spring effects. */ spring: SpringToken, }",
+          "description": "Design tokens that control motion."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "guid",
+          "name": "MotionToken",
           "declaration": {
-            "name": "guid",
-            "module": "src/shared/utils/guid.ts"
+            "name": "MotionToken",
+            "module": "src/shared/tokens/MotionToken.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/utils/hasAssignedNodes.ts",
+      "path": "src/shared/tokens/ScrollbarToken.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "hasAssignedNodes",
-          "return": {
-            "type": {
-              "text": "boolean"
-            }
+          "kind": "variable",
+          "name": "ScrollbarToken",
+          "type": {
+            "text": "{\r\n  /** Width of a standard scrollbar. */\r\n  width: unsafeCSS(`var(--m3e-scrollbar-width, auto)`),\r\n\r\n  /** Width of a thin scrollbar. */\r\n  thinWidth: unsafeCSS(`var(--m3e-scrollbar-thin-width, thin)`),\r\n\r\n  /** Color of a scrollbar. */\r\n  color: unsafeCSS(`var(--m3e-scrollbar-thumb-color, #938f94) var(--m3e-scrollbar-track-color, transparent)`),\r\n}"
           },
-          "parameters": [
-            {
-              "name": "slot",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "description": "The slot to test."
-            }
-          ],
-          "description": "Determines whether a slot has any assigned nodes."
+          "default": "{ /** Width of a standard scrollbar. */ width: unsafeCSS(`var(--m3e-scrollbar-width, auto)`), /** Width of a thin scrollbar. */ thinWidth: unsafeCSS(`var(--m3e-scrollbar-thin-width, thin)`), /** Color of a scrollbar. */ color: unsafeCSS(`var(--m3e-scrollbar-thumb-color, #938f94) var(--m3e-scrollbar-track-color, transparent)`), }",
+          "description": "Design tokens that control scrollbars."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "hasAssignedNodes",
+          "name": "ScrollbarToken",
           "declaration": {
-            "name": "hasAssignedNodes",
-            "module": "src/shared/utils/hasAssignedNodes.ts"
+            "name": "ScrollbarToken",
+            "module": "src/shared/tokens/ScrollbarToken.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/utils/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./computeLineCount\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./focusWhenReady\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./forcedColorsActive\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./generateClipPaths\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./getTextContent\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./guid\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./hasAssignedNodes\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./interceptProperty\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./prefersReducedMotion\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./resolveElementById\""
-          }
-        },
+      "path": "src/shared/tokens/ShapeToken.ts",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./resolveFragmentUrl\""
-          }
-        },
+          "kind": "variable",
+          "name": "ShapeToken",
+          "type": {
+            "text": "{\r\n  corner: {\r\n    /** Fully rounded symmetric shape. */\r\n    full: unsafeCSS(\"var(--md-sys-shape-corner-full, 624.9375rem)\"),\r\n\r\n    /** Extra large rounded asymmetric shape directed towards the top. */\r\n    extraLargeTop: unsafeCSS(\r\n      `var(--md-sys-shape-corner-extra-large-top, ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Extra large rounded symmetric shape. */\r\n    extraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-large, ${CornerValue.extraLarge})`),\r\n\r\n    /** Extra large rounded asymmetric shape directed towards the end. */\r\n    extraLargeEnd: unsafeCSS(\r\n      `${CornerValue.none} ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none}`\r\n    ),\r\n\r\n    /** Extra large rounded asymmetric shape directed towards the start. */\r\n    extraLargeStart: unsafeCSS(\r\n      `${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraLarge}`\r\n    ),\r\n\r\n    /** Large rounded asymmetric shape directed towards the top. */\r\n    largeTop: unsafeCSS(\r\n      `var(--md-sys-shape-corner-large-top, ${CornerValue.large} ${CornerValue.large} ${CornerValue.none} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Large rounded asymmetric shape directed towards the end. */\r\n    largeEnd: unsafeCSS(\r\n      `var(--md-sys-shape-corner-large-end, ${CornerValue.none} ${CornerValue.large} ${CornerValue.large} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Large rounded asymmetric shape directed towards the start. */\r\n    largeStart: unsafeCSS(\r\n      `var(--md-sys-shape-corner-large-end, ${CornerValue.large} ${CornerValue.none} ${CornerValue.none} ${CornerValue.large})`\r\n    ),\r\n\r\n    /** Large rounded symmetric shape. */\r\n    large: unsafeCSS(`var(--md-sys-shape-corner-large, ${CornerValue.large})`),\r\n\r\n    /** Medium rounded symmetric shape. */\r\n    medium: unsafeCSS(`var(--md-sys-shape-corner-medium, ${CornerValue.medium})`),\r\n\r\n    /** Medium rounded asymmetric shape directed towards the top. */\r\n    mediumTop: unsafeCSS(`${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none} ${CornerValue.none}`),\r\n\r\n    /** Medium rounded asymmetric shape directed towards the end. */\r\n    mediumEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none}`),\r\n\r\n    /** Medium rounded asymmetric shape directed towards the start. */\r\n    mediumStart: unsafeCSS(`${CornerValue.medium} ${CornerValue.none} ${CornerValue.none} ${CornerValue.medium}`),\r\n\r\n    /** Small rounded symmetric shape. */\r\n    small: unsafeCSS(`var(--md-sys-shape-corner-small, ${CornerValue.small})`),\r\n\r\n    /** Small rounded asymmetric shape directed towards the top. */\r\n    smallTop: unsafeCSS(`${CornerValue.small} ${CornerValue.small} ${CornerValue.none} ${CornerValue.none}`),\r\n\r\n    /** Small rounded asymmetric shape directed towards the end. */\r\n    smallEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.small} ${CornerValue.small} ${CornerValue.none}`),\r\n\r\n    /** Small rounded asymmetric shape directed towards the start. */\r\n    smallStart: unsafeCSS(`${CornerValue.small} ${CornerValue.none} ${CornerValue.none} ${CornerValue.small}`),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the top. */\r\n    extraSmallTop: unsafeCSS(\r\n      `var(--md-sys-shape-corner-extra-small-top, ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Extra small rounded symmetric shape. */\r\n    extraSmall: unsafeCSS(`var(--md-sys-shape-corner-extra-small, ${CornerValue.extraSmall})`),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the end. */\r\n    extraSmallEnd: unsafeCSS(\r\n      `${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none}`\r\n    ),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the start. */\r\n    extraSmallStart: unsafeCSS(\r\n      `${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall}`\r\n    ),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the bottom. */\r\n    extraSmallBottom: unsafeCSS(\r\n      `${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall}`\r\n    ),\r\n\r\n    /** No rounding. */\r\n    none: unsafeCSS(`var(--md-sys-shape-corner-none, ${CornerValue.none})`),\r\n\r\n    /** Increased large rounded symmetric shape. */\r\n    largeIncreased: unsafeCSS(`var(--md-sys-shape-corner-large-increased, ${CornerValue.largeIncreased})`),\r\n\r\n    /** Increased extra large rounded symmetric shape. */\r\n    extraLargeIncreased: unsafeCSS(\r\n      `var(--md-sys-shape-corner-extra-large-increased, ${CornerValue.extraLargeIncreased})`\r\n    ),\r\n\r\n    /** Extra extra large rounded symmetric shape. */\r\n    extraExtraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-extra-large, ${CornerValue.extraExtraLarge})`),\r\n\r\n    /** Design tokens that control specific corners. */\r\n    value: CornerValue,\r\n  },\r\n}"
+          },
+          "default": "{ corner: { /** Fully rounded symmetric shape. */ full: unsafeCSS(\"var(--md-sys-shape-corner-full, 624.9375rem)\"), /** Extra large rounded asymmetric shape directed towards the top. */ extraLargeTop: unsafeCSS( `var(--md-sys-shape-corner-extra-large-top, ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none})` ), /** Extra large rounded symmetric shape. */ extraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-large, ${CornerValue.extraLarge})`), /** Extra large rounded asymmetric shape directed towards the end. */ extraLargeEnd: unsafeCSS( `${CornerValue.none} ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none}` ), /** Extra large rounded asymmetric shape directed towards the start. */ extraLargeStart: unsafeCSS( `${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraLarge}` ), /** Large rounded asymmetric shape directed towards the top. */ largeTop: unsafeCSS( `var(--md-sys-shape-corner-large-top, ${CornerValue.large} ${CornerValue.large} ${CornerValue.none} ${CornerValue.none})` ), /** Large rounded asymmetric shape directed towards the end. */ largeEnd: unsafeCSS( `var(--md-sys-shape-corner-large-end, ${CornerValue.none} ${CornerValue.large} ${CornerValue.large} ${CornerValue.none})` ), /** Large rounded asymmetric shape directed towards the start. */ largeStart: unsafeCSS( `var(--md-sys-shape-corner-large-end, ${CornerValue.large} ${CornerValue.none} ${CornerValue.none} ${CornerValue.large})` ), /** Large rounded symmetric shape. */ large: unsafeCSS(`var(--md-sys-shape-corner-large, ${CornerValue.large})`), /** Medium rounded symmetric shape. */ medium: unsafeCSS(`var(--md-sys-shape-corner-medium, ${CornerValue.medium})`), /** Medium rounded asymmetric shape directed towards the top. */ mediumTop: unsafeCSS(`${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none} ${CornerValue.none}`), /** Medium rounded asymmetric shape directed towards the end. */ mediumEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none}`), /** Medium rounded asymmetric shape directed towards the start. */ mediumStart: unsafeCSS(`${CornerValue.medium} ${CornerValue.none} ${CornerValue.none} ${CornerValue.medium}`), /** Small rounded symmetric shape. */ small: unsafeCSS(`var(--md-sys-shape-corner-small, ${CornerValue.small})`), /** Small rounded asymmetric shape directed towards the top. */ smallTop: unsafeCSS(`${CornerValue.small} ${CornerValue.small} ${CornerValue.none} ${CornerValue.none}`), /** Small rounded asymmetric shape directed towards the end. */ smallEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.small} ${CornerValue.small} ${CornerValue.none}`), /** Small rounded asymmetric shape directed towards the start. */ smallStart: unsafeCSS(`${CornerValue.small} ${CornerValue.none} ${CornerValue.none} ${CornerValue.small}`), /** Extra small rounded asymmetric shape directed towards the top. */ extraSmallTop: unsafeCSS( `var(--md-sys-shape-corner-extra-small-top, ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none})` ), /** Extra small rounded symmetric shape. */ extraSmall: unsafeCSS(`var(--md-sys-shape-corner-extra-small, ${CornerValue.extraSmall})`), /** Extra small rounded asymmetric shape directed towards the end. */ extraSmallEnd: unsafeCSS( `${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none}` ), /** Extra small rounded asymmetric shape directed towards the start. */ extraSmallStart: unsafeCSS( `${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall}` ), /** Extra small rounded asymmetric shape directed towards the bottom. */ extraSmallBottom: unsafeCSS( `${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall}` ), /** No rounding. */ none: unsafeCSS(`var(--md-sys-shape-corner-none, ${CornerValue.none})`), /** Increased large rounded symmetric shape. */ largeIncreased: unsafeCSS(`var(--md-sys-shape-corner-large-increased, ${CornerValue.largeIncreased})`), /** Increased extra large rounded symmetric shape. */ extraLargeIncreased: unsafeCSS( `var(--md-sys-shape-corner-extra-large-increased, ${CornerValue.extraLargeIncreased})` ), /** Extra extra large rounded symmetric shape. */ extraExtraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-extra-large, ${CornerValue.extraExtraLarge})`), /** Design tokens that control specific corners. */ value: CornerValue, }, }",
+          "description": "Design tokens that control shape."
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "*",
+          "name": "ShapeToken",
           "declaration": {
-            "name": "*",
-            "package": "\"./scrollIntoViewIfNeeded\""
+            "name": "ShapeToken",
+            "module": "src/shared/tokens/ShapeToken.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/utils/interceptProperty.ts",
+      "path": "src/shared/tokens/StateToken.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "interceptProperty",
-          "return": {
-            "type": {
-              "text": ""
-            }
+          "kind": "variable",
+          "name": "StateToken",
+          "type": {
+            "text": "{\r\n  /** Opacity of the state layer on focus. */\r\n  focusStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-focus-state-layer-opacity, 10%)\"),\r\n\r\n  /** Opacity of the state layer on hover. */\r\n  hoverStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-hover-state-layer-opacity, 8%)\"),\r\n\r\n  /** Opacity of the state layer on pressed. */\r\n  pressedStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-pressed-state-layer-opacity, 10%)\"),\r\n}"
           },
-          "parameters": [
-            {
-              "name": "target",
-              "type": {
-                "text": "T"
-              },
-              "description": "The object whose property should be intercepted."
-            },
-            {
-              "name": "prop",
-              "type": {
-                "text": "K"
-              },
-              "description": "The property key to intercept."
-            },
-            {
-              "name": "options",
-              "type": {
-                "text": "{\r\n    get?: (getter: () => T[K]) => T[K];\r\n    set?: (value: T[K], setter: (v: T[K]) => void) => void;\r\n  }"
-              },
-              "description": "Configuration object for interceptor callbacks."
-            }
-          ],
-          "description": "Intercepts property access and mutations on a target object, allowing custom logic\r\nto run when the property is read or written to."
+          "default": "{ /** Opacity of the state layer on focus. */ focusStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-focus-state-layer-opacity, 10%)\"), /** Opacity of the state layer on hover. */ hoverStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-hover-state-layer-opacity, 8%)\"), /** Opacity of the state layer on pressed. */ pressedStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-pressed-state-layer-opacity, 10%)\"), }",
+          "description": "Design tokens that control state layer."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "interceptProperty",
+          "name": "StateToken",
           "declaration": {
-            "name": "interceptProperty",
-            "module": "src/shared/utils/interceptProperty.ts"
+            "name": "StateToken",
+            "module": "src/shared/tokens/StateToken.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/utils/prefersReducedMotion.ts",
+      "path": "src/shared/tokens/TypescaleToken.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "prefersReducedMotion",
-          "return": {
-            "type": {
-              "text": "boolean"
-            }
+          "kind": "variable",
+          "name": "TypescaleToken",
+          "type": {
+            "text": "{\r\n  /** Standard typescale variant. */\r\n  standard: {\r\n    /** Short, important text or numerals. */\r\n    display: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-display-large-font-size, 3.5625rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-large-line-height, 4rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-display-large-tracking, 0.015625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-size, 2.8125rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-line-height, 3.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-display-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-display-small-font-size, 2.25rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-small-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-small-line-height, 2.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-display-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Short, high-emphasis text on smaller screens. */\r\n    headline: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-size, 2rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-line-height, 2.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-headline-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-size, 1.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-line-height, 2.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-headline-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-size, 1.5rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-line-height, 2rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-headline-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Medium-emphasis text that remains relatively short. */\r\n    title: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-title-large-font-size, 1.375rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-large-line-height, 1.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-title-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-line-height, 1.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-title-medium-tracking, 0.009375rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-title-small-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-small-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-title-small-tracking, 0.00625rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Longer passages of text. */\r\n    body: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-body-large-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-large-line-height, 1.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-body-large-tracking, 0.03125rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-body-medium-tracking, 0.015625rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-body-small-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-small-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-body-small-tracking, 0.025rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Smaller, utilitarian text. */\r\n    label: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-label-large-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-large-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-label-large-tracking, 0.00625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-label-medium-tracking, 0.03125rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-label-small-font-size, 0.6875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-label-small-tracking, 0.03125rem)\"),\r\n      },\r\n    },\r\n  },\r\n\r\n  /** Emphasized typescale variant. */\r\n  emphasized: {\r\n    /** Short, important text or numerals. */\r\n    display: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-size, 3.5625rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-line-height, 4rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-tracking, 0.015625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-size, 2.8125rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-line-height, 3.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-size, 2.25rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-line-height, 2.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Short, high-emphasis text on smaller screens. */\r\n    headline: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-size, 2rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-line-height, 2.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-size, 1.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-line-height, 2.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-size, 1.5rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-line-height, 2rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Medium-emphasis text that remains relatively short. */\r\n    title: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-size, 1.375rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-line-height, 1.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-line-height, 3.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-tracking, 0.009375rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-tracking, 0.00625rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Longer passages of text. */\r\n    body: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-line-height, 1.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-tracking, 0.03125rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-tracking, 0.015625rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-tracking, 0.025rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Smaller, utilitarian text. */\r\n    label: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-tracking, 0.00625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-tracking, 0.03125rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-size, 0.6875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-tracking, 0.03125rem)\"),\r\n      },\r\n    },\r\n  },\r\n}"
           },
-          "description": "Determines whether reduced motion is preferred."
+          "default": "{ /** Standard typescale variant. */ standard: { /** Short, important text or numerals. */ display: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-display-large-font-size, 3.5625rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-large-line-height, 4rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-display-large-tracking, 0.015625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-size, 2.8125rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-line-height, 3.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-display-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-display-small-font-size, 2.25rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-small-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-small-line-height, 2.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-display-small-tracking, 0)\"), }, }, /** Short, high-emphasis text on smaller screens. */ headline: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-size, 2rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-line-height, 2.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-headline-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-size, 1.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-line-height, 2.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-headline-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-size, 1.5rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-line-height, 2rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-headline-small-tracking, 0)\"), }, }, /** Medium-emphasis text that remains relatively short. */ title: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-title-large-font-size, 1.375rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-large-line-height, 1.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-title-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-line-height, 1.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-title-medium-tracking, 0.009375rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-title-small-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-small-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-title-small-tracking, 0.00625rem)\"), }, }, /** Longer passages of text. */ body: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-body-large-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-large-line-height, 1.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-body-large-tracking, 0.03125rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-body-medium-tracking, 0.015625rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-body-small-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-small-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-body-small-tracking, 0.025rem)\"), }, }, /** Smaller, utilitarian text. */ label: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-label-large-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-large-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-label-large-tracking, 0.00625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-label-medium-tracking, 0.03125rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-label-small-font-size, 0.6875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-label-small-tracking, 0.03125rem)\"), }, }, }, /** Emphasized typescale variant. */ emphasized: { /** Short, important text or numerals. */ display: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-size, 3.5625rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-line-height, 4rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-tracking, 0.015625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-size, 2.8125rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-line-height, 3.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-size, 2.25rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-line-height, 2.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-tracking, 0)\"), }, }, /** Short, high-emphasis text on smaller screens. */ headline: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-size, 2rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-line-height, 2.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-size, 1.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-line-height, 2.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-size, 1.5rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-line-height, 2rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-tracking, 0)\"), }, }, /** Medium-emphasis text that remains relatively short. */ title: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-size, 1.375rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-line-height, 1.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-line-height, 3.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-tracking, 0.009375rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-tracking, 0.00625rem)\"), }, }, /** Longer passages of text. */ body: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-line-height, 1.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-tracking, 0.03125rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-tracking, 0.015625rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-tracking, 0.025rem)\"), }, }, /** Smaller, utilitarian text. */ label: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-tracking, 0.00625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-tracking, 0.03125rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-size, 0.6875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-tracking, 0.03125rem)\"), }, }, }, }",
+          "description": "Design tokens that control typescale."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "prefersReducedMotion",
+          "name": "TypescaleToken",
           "declaration": {
-            "name": "prefersReducedMotion",
-            "module": "src/shared/utils/prefersReducedMotion.ts"
+            "name": "TypescaleToken",
+            "module": "src/shared/tokens/TypescaleToken.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/utils/resolveElementById.ts",
+      "path": "src/shared/utils/computeCssSize.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "resolveElementById",
+          "name": "computeCssSize",
           "return": {
             "type": {
-              "text": "Promise<T | null>"
+              "text": "number"
             }
           },
           "parameters": [
             {
-              "name": "id",
+              "name": "host",
               "type": {
-                "text": "string"
+                "text": "HTMLElement"
               },
-              "description": "The element ID to resolve."
+              "description": "The element whose coordinate system and CSS variables should be used to resolve the expression."
             },
             {
-              "name": "root",
-              "default": "document",
+              "name": "expression",
               "type": {
-                "text": "ParentNode"
+                "text": "string"
               },
-              "description": "Optional root node to query from (defaults to document)."
+              "description": "The CSS expression to evaluate."
             }
           ],
-          "description": "Resolves an element by ID, waiting for document readiness if needed."
+          "description": "Computes a CSS size expression (var(), %, rem, calc(), etc.) relative to the given host element."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "resolveElementById",
+          "name": "computeCssSize",
           "declaration": {
-            "name": "resolveElementById",
-            "module": "src/shared/utils/resolveElementById.ts"
+            "name": "computeCssSize",
+            "module": "src/shared/utils/computeCssSize.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/utils/resolveFragmentUrl.ts",
+      "path": "src/shared/utils/computeLineCount.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "resolveFragmentUrl",
+          "name": "computeLineCount",
           "return": {
             "type": {
-              "text": ""
+              "text": "number"
             }
           },
           "parameters": [
             {
-              "name": "id",
+              "name": "element",
               "type": {
-                "text": "string"
+                "text": "HTMLElement"
               },
-              "description": "The fragment identifier to append (e.g., an SVG element's ID)."
+              "description": "The element for which to compute the number of lines."
             }
           ],
-          "description": "Resolves a URL fragment reference (`url(path#id)`) based on the current document location.\r\n\r\nThis helper is typically used when constructing fragment-based URLs for SVG\r\nreferences (e.g., masks, clipPaths, filters) where the browser requires a fully\r\nqualified `url(...)` value that includes the current path.\r\n\r\nHow it works:\r\n- Safely reads `document.location` (guarded for SSR environments).\r\n- Extracts the current page's path + query string.\r\n- Removes any existing hash fragment from the URL.\r\n- Appends `#${id}` to produce a stable fragment reference.\r\n\r\nExample:\r\n  // If the current page is /viewer/page?mode=edit#section2\r\n  resolveFragmentUrl(\"clip\") → \"url(/viewer/page?mode=edit#clip)\""
+          "description": "Determines the number of textual lines presented by an element."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "resolveFragmentUrl",
+          "name": "computeLineCount",
           "declaration": {
-            "name": "resolveFragmentUrl",
-            "module": "src/shared/utils/resolveFragmentUrl.ts"
+            "name": "computeLineCount",
+            "module": "src/shared/utils/computeLineCount.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/utils/scrollIntoViewIfNeeded.ts",
+      "path": "src/shared/utils/focusWhenReady.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "scrollIntoViewIfNeeded",
+          "name": "focusWhenReady",
           "return": {
             "type": {
-              "text": "void"
+              "text": "Promise<boolean>"
             }
           },
           "parameters": [
@@ -14242,274 +14195,614 @@
               "type": {
                 "text": "HTMLElement"
               },
-              "description": "The element to scroll into view."
+              "description": "The element to to focus."
             },
             {
-              "name": "scrollContainer",
+              "name": "timeout",
+              "default": "200",
               "type": {
-                "text": "HTMLElement"
+                "text": "number"
               },
-              "description": "The scrollable container."
-            },
-            {
-              "name": "options",
-              "optional": true,
-              "type": {
-                "text": "ScrollIntoViewOptions"
-              },
-              "description": "Options used to scroll into view."
+              "description": "The maximum amount of time to attempt to focus `el`.",
+              "optional": true
             }
           ],
-          "description": "If needed, scrolls an element into view within a given scroll container."
+          "description": "Asynchronously attempts to focus an element once it becomes focusable."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "scrollIntoViewIfNeeded",
+          "name": "focusWhenReady",
           "declaration": {
-            "name": "scrollIntoViewIfNeeded",
-            "module": "src/shared/utils/scrollIntoViewIfNeeded.ts"
+            "name": "focusWhenReady",
+            "module": "src/shared/utils/focusWhenReady.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/tokens/ColorToken.ts",
+      "path": "src/shared/utils/forcedColorsActive.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "ColorToken",
-          "type": {
-            "text": "{\r\n  /** High-emphasis fills, texts, and icons against surface. */\r\n  primary: unsafeCSS(\"var(--md-sys-color-primary, #6750A4)\"),\r\n\r\n  /** Text and icons against primary. */\r\n  onPrimary: unsafeCSS(\"var(--md-sys-color-on-primary, #FFFFFF)\"),\r\n\r\n  /** Standout fill color against surface, for key components. */\r\n  primaryContainer: unsafeCSS(\"var(--md-sys-color-primary-container, #EADDFF)\"),\r\n\r\n  /** Text and icons against primary container. */\r\n  onPrimaryContainer: unsafeCSS(\"var(--md-sys-color-on-primary-container, #4F378B)\"),\r\n\r\n  /** High-emphasis fills, texts, and icons that maintain the same tone in light and dark themes. */\r\n  primaryFixed: unsafeCSS(\"var(--md-sys-color-primary-fixed, #EADDFF)\"),\r\n\r\n  /** High-emphasis fills, texts, and icons that maintain the same stronger tone in light and dark themes. */\r\n  primaryFixedDim: unsafeCSS(\"var(--md-sys-color-primary-fixed-dim, #D0BCFF)\"),\r\n\r\n  /** Text and icons against fixed primary. */\r\n  onPrimaryFixed: unsafeCSS(\"var(--md-sys-color-on-primary-fixed, #21005D)\"),\r\n\r\n  /** Lower-emphasis text and icons against fixed primary. */\r\n  onPrimaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-primary-fixed-variant, #4F378B)\"),\r\n\r\n  /** Less prominent fills, text, and icons against surface. */\r\n  secondary: unsafeCSS(\"var(--md-sys-color-secondary, #625B71)\"),\r\n\r\n  /** Text and icons against secondary. */\r\n  onSecondary: unsafeCSS(\"var(--md-sys-color-on-secondary, #FFFFFF)\"),\r\n\r\n  /** Less prominent fill color against surface, for recessive components. */\r\n  secondaryContainer: unsafeCSS(\"var(--md-sys-color-secondary-container, #E8DEF8)\"),\r\n\r\n  /** Text and icons against secondary container. */\r\n  onSecondaryContainer: unsafeCSS(\"var(--md-sys-color-on-secondary-container, #4A4458)\"),\r\n\r\n  /** Less prominent fills, texts, and icons that maintain the same tone in light and dark themes. */\r\n  secondaryFixed: unsafeCSS(\"var(--md-sys-color-secondary-fixed, #E8DEF8)\"),\r\n\r\n  /** Less prominent fills, texts, and icons that maintain the same stronger tone in light and dark themes. */\r\n  secondaryFixedDim: unsafeCSS(\"var(--md-sys-color-secondary-fixed-dim, #CCC2DC)\"),\r\n\r\n  /** Text and icons against fixed secondary. */\r\n  onSecondaryFixed: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed, #1D192B)\"),\r\n\r\n  /** Lower-emphasis text and icons against fixed secondary. */\r\n  onSecondaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed-variant, #4A4458)\"),\r\n\r\n  /** Complementary fills, text, and icons against surface. */\r\n  tertiary: unsafeCSS(\"var(--md-sys-color-tertiary, #7D5260)\"),\r\n\r\n  /** Text and icons against tertiary. */\r\n  onTertiary: unsafeCSS(\"var(--md-sys-color-on-tertiary, #FFFFFF)\"),\r\n\r\n  /** Complementary container color against surface. */\r\n  tertiaryContainer: unsafeCSS(\"var(--md-sys-color-tertiary-container, #FFD8E4)\"),\r\n\r\n  /** Text and icons against tertiary container. */\r\n  onTertiaryContainer: unsafeCSS(\"var(--md-sys-color-on-tertiary-container, #633B48)\"),\r\n\r\n  /** Complementary fills, texts, and icons that maintain the same tone in light and dark themes. */\r\n  tertiaryFixed: unsafeCSS(\"var(--md-sys-color-tertiary-fixed, #FFD8E4)\"),\r\n\r\n  /** Complementary fills, texts, and icons that maintain the same stronger tone in light and dark themes. */\r\n  tertiaryFixedDim: unsafeCSS(\"var(--md-sys-color-tertiary-fixed-dim, #EFB8C8)\"),\r\n\r\n  /** Text and icons against fixed tertiary. */\r\n  onTertiaryFixed: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed, #31111D)\"),\r\n\r\n  /** Lower-emphasis text and icons against fixed tertiary. */\r\n  onTertiaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed-variant, #633B48)\"),\r\n\r\n  /** Attention-grabbing color against surface for fills, icons, and text, indicating urgency. */\r\n  error: unsafeCSS(\"var(--md-sys-color-error, #B3261E)\"),\r\n\r\n  /** Text and icons against error. */\r\n  onError: unsafeCSS(\"var(--md-sys-color-on-error, #FFFFFF)\"),\r\n\r\n  /** Attention-grabbing fill color against surface. */\r\n  errorContainer: unsafeCSS(\"var(--md-sys-color-error-container, #F9DEDC)\"),\r\n\r\n  /** Text and icons against error container. */\r\n  onErrorContainer: unsafeCSS(\"var(--md-sys-color-on-error-container, #8C1D18)\"),\r\n\r\n  /** Default color for backgrounds. */\r\n  surface: unsafeCSS(\"var(--md-sys-color-surface, #FEF7FF)\"),\r\n\r\n  /** Text and icons against any surface color. */\r\n  onSurface: unsafeCSS(\"var(--md-sys-color-on-surface, #1D1B20)\"),\r\n\r\n  /** Lower-emphasis color for text and icons against any surface color. */\r\n  onSurfaceVariant: unsafeCSS(\"var(--md-sys-color-on-surface-variant, #49454F)\"),\r\n\r\n  /** Lowest-emphasis container color. */\r\n  surfaceContainerLowest: unsafeCSS(\"var(--md-sys-color-surface-container-lowest, #FFFFFF)\"),\r\n\r\n  /** Low-emphasis container color. */\r\n  surfaceContainerLow: unsafeCSS(\"var(--md-sys-color-surface-container-low, #F7F2FA)\"),\r\n\r\n  /** Default container color. */\r\n  surfaceContainer: unsafeCSS(\"var(--md-sys-color-surface-container, #F3EDF7)\"),\r\n\r\n  /** High-emphasis container color. */\r\n  surfaceContainerHigh: unsafeCSS(\"var(--md-sys-color-surface-container-high, #ECE6F0)\"),\r\n\r\n  /** Highest-emphasis container color. */\r\n  surfaceContainerHighest: unsafeCSS(\"var(--md-sys-color-surface-container-highest, #E6E0E9)\"),\r\n\r\n  /** Dimmest surface color in light and dark themes. */\r\n  surfaceDim: unsafeCSS(\"var(--md-sys-color-surface-dim, #DED8E1)\"),\r\n\r\n  /** Brightest surface color in light and dark themes. */\r\n  surfaceBright: unsafeCSS(\"var(--md-sys-color-surface-bright, #FEF7FF)\"),\r\n\r\n  /** Alternate surface color, can be used for active states. */\r\n  surfaceVariant: unsafeCSS(\"var(--md-sys-color-surface-variant, #E7E0EC)\"),\r\n\r\n  /** Background fills for elements which contrast against surface. */\r\n  inverseSurface: unsafeCSS(\"var(--md-sys-color-inverse-surface, #322F35)\"),\r\n\r\n  /** Text and icons against inverse surface. */\r\n  inverseOnSurface: unsafeCSS(\"var(--md-sys-color-inverse-on-surface, #F5EFF7)\"),\r\n\r\n  /** Primary text and icons against inverse surface. */\r\n  inversePrimary: unsafeCSS(\"var(--md-sys-color-inverse-primary, #D0BCFF)\"),\r\n\r\n  /** Important boundaries, such as a text field outline. */\r\n  outline: unsafeCSS(\"var(--md-sys-color-outline, #79747E)\"),\r\n\r\n  /** Decorative elements, such as dividers. */\r\n  outlineVariant: unsafeCSS(\"var(--md-sys-color-outline-variant, #CAC4D0)\"),\r\n\r\n  /** Elevation shadow color. */\r\n  shadow: unsafeCSS(\"var(--md-sys-color-shadow, #000000)\"),\r\n\r\n  /** Backdrop which obscures underlying content. */\r\n  scrim: unsafeCSS(\"var(--md-sys-color-scrim, #000000)\"),\r\n}"
+          "kind": "function",
+          "name": "forcedColorsActive",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
           },
-          "default": "{ /** High-emphasis fills, texts, and icons against surface. */ primary: unsafeCSS(\"var(--md-sys-color-primary, #6750A4)\"), /** Text and icons against primary. */ onPrimary: unsafeCSS(\"var(--md-sys-color-on-primary, #FFFFFF)\"), /** Standout fill color against surface, for key components. */ primaryContainer: unsafeCSS(\"var(--md-sys-color-primary-container, #EADDFF)\"), /** Text and icons against primary container. */ onPrimaryContainer: unsafeCSS(\"var(--md-sys-color-on-primary-container, #4F378B)\"), /** High-emphasis fills, texts, and icons that maintain the same tone in light and dark themes. */ primaryFixed: unsafeCSS(\"var(--md-sys-color-primary-fixed, #EADDFF)\"), /** High-emphasis fills, texts, and icons that maintain the same stronger tone in light and dark themes. */ primaryFixedDim: unsafeCSS(\"var(--md-sys-color-primary-fixed-dim, #D0BCFF)\"), /** Text and icons against fixed primary. */ onPrimaryFixed: unsafeCSS(\"var(--md-sys-color-on-primary-fixed, #21005D)\"), /** Lower-emphasis text and icons against fixed primary. */ onPrimaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-primary-fixed-variant, #4F378B)\"), /** Less prominent fills, text, and icons against surface. */ secondary: unsafeCSS(\"var(--md-sys-color-secondary, #625B71)\"), /** Text and icons against secondary. */ onSecondary: unsafeCSS(\"var(--md-sys-color-on-secondary, #FFFFFF)\"), /** Less prominent fill color against surface, for recessive components. */ secondaryContainer: unsafeCSS(\"var(--md-sys-color-secondary-container, #E8DEF8)\"), /** Text and icons against secondary container. */ onSecondaryContainer: unsafeCSS(\"var(--md-sys-color-on-secondary-container, #4A4458)\"), /** Less prominent fills, texts, and icons that maintain the same tone in light and dark themes. */ secondaryFixed: unsafeCSS(\"var(--md-sys-color-secondary-fixed, #E8DEF8)\"), /** Less prominent fills, texts, and icons that maintain the same stronger tone in light and dark themes. */ secondaryFixedDim: unsafeCSS(\"var(--md-sys-color-secondary-fixed-dim, #CCC2DC)\"), /** Text and icons against fixed secondary. */ onSecondaryFixed: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed, #1D192B)\"), /** Lower-emphasis text and icons against fixed secondary. */ onSecondaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed-variant, #4A4458)\"), /** Complementary fills, text, and icons against surface. */ tertiary: unsafeCSS(\"var(--md-sys-color-tertiary, #7D5260)\"), /** Text and icons against tertiary. */ onTertiary: unsafeCSS(\"var(--md-sys-color-on-tertiary, #FFFFFF)\"), /** Complementary container color against surface. */ tertiaryContainer: unsafeCSS(\"var(--md-sys-color-tertiary-container, #FFD8E4)\"), /** Text and icons against tertiary container. */ onTertiaryContainer: unsafeCSS(\"var(--md-sys-color-on-tertiary-container, #633B48)\"), /** Complementary fills, texts, and icons that maintain the same tone in light and dark themes. */ tertiaryFixed: unsafeCSS(\"var(--md-sys-color-tertiary-fixed, #FFD8E4)\"), /** Complementary fills, texts, and icons that maintain the same stronger tone in light and dark themes. */ tertiaryFixedDim: unsafeCSS(\"var(--md-sys-color-tertiary-fixed-dim, #EFB8C8)\"), /** Text and icons against fixed tertiary. */ onTertiaryFixed: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed, #31111D)\"), /** Lower-emphasis text and icons against fixed tertiary. */ onTertiaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed-variant, #633B48)\"), /** Attention-grabbing color against surface for fills, icons, and text, indicating urgency. */ error: unsafeCSS(\"var(--md-sys-color-error, #B3261E)\"), /** Text and icons against error. */ onError: unsafeCSS(\"var(--md-sys-color-on-error, #FFFFFF)\"), /** Attention-grabbing fill color against surface. */ errorContainer: unsafeCSS(\"var(--md-sys-color-error-container, #F9DEDC)\"), /** Text and icons against error container. */ onErrorContainer: unsafeCSS(\"var(--md-sys-color-on-error-container, #8C1D18)\"), /** Default color for backgrounds. */ surface: unsafeCSS(\"var(--md-sys-color-surface, #FEF7FF)\"), /** Text and icons against any surface color. */ onSurface: unsafeCSS(\"var(--md-sys-color-on-surface, #1D1B20)\"), /** Lower-emphasis color for text and icons against any surface color. */ onSurfaceVariant: unsafeCSS(\"var(--md-sys-color-on-surface-variant, #49454F)\"), /** Lowest-emphasis container color. */ surfaceContainerLowest: unsafeCSS(\"var(--md-sys-color-surface-container-lowest, #FFFFFF)\"), /** Low-emphasis container color. */ surfaceContainerLow: unsafeCSS(\"var(--md-sys-color-surface-container-low, #F7F2FA)\"), /** Default container color. */ surfaceContainer: unsafeCSS(\"var(--md-sys-color-surface-container, #F3EDF7)\"), /** High-emphasis container color. */ surfaceContainerHigh: unsafeCSS(\"var(--md-sys-color-surface-container-high, #ECE6F0)\"), /** Highest-emphasis container color. */ surfaceContainerHighest: unsafeCSS(\"var(--md-sys-color-surface-container-highest, #E6E0E9)\"), /** Dimmest surface color in light and dark themes. */ surfaceDim: unsafeCSS(\"var(--md-sys-color-surface-dim, #DED8E1)\"), /** Brightest surface color in light and dark themes. */ surfaceBright: unsafeCSS(\"var(--md-sys-color-surface-bright, #FEF7FF)\"), /** Alternate surface color, can be used for active states. */ surfaceVariant: unsafeCSS(\"var(--md-sys-color-surface-variant, #E7E0EC)\"), /** Background fills for elements which contrast against surface. */ inverseSurface: unsafeCSS(\"var(--md-sys-color-inverse-surface, #322F35)\"), /** Text and icons against inverse surface. */ inverseOnSurface: unsafeCSS(\"var(--md-sys-color-inverse-on-surface, #F5EFF7)\"), /** Primary text and icons against inverse surface. */ inversePrimary: unsafeCSS(\"var(--md-sys-color-inverse-primary, #D0BCFF)\"), /** Important boundaries, such as a text field outline. */ outline: unsafeCSS(\"var(--md-sys-color-outline, #79747E)\"), /** Decorative elements, such as dividers. */ outlineVariant: unsafeCSS(\"var(--md-sys-color-outline-variant, #CAC4D0)\"), /** Elevation shadow color. */ shadow: unsafeCSS(\"var(--md-sys-color-shadow, #000000)\"), /** Backdrop which obscures underlying content. */ scrim: unsafeCSS(\"var(--md-sys-color-scrim, #000000)\"), }",
-          "description": "Design tokens that control color."
+          "description": "Determines whether forced colors are active."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorToken",
+          "name": "forcedColorsActive",
           "declaration": {
-            "name": "ColorToken",
-            "module": "src/shared/tokens/ColorToken.ts"
+            "name": "forcedColorsActive",
+            "module": "src/shared/utils/forcedColorsActive.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/tokens/DensityToken.ts",
+      "path": "src/shared/utils/generateClipPaths.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "DensityToken",
-          "type": {
-            "text": "{\r\n  ..._DensityToken,\r\n\r\n  /**\r\n   * Creates a CSS `calc` that calculates a dimension based on density.\r\n   * @param {number} minScale The minimum supported scale.\r\n   * @returns {CSSResult} A CSS `calc` used to calculate a dimension based on density.\r\n   */\r\n  calc(minScale: number): CSSResult {\r\n    return unsafeCSS(`calc(max(${minScale}, ${_DensityToken.scale}) * ${_DensityToken.size})`);\r\n  },\r\n}"
+          "kind": "function",
+          "name": "generateClipPaths",
+          "return": {
+            "type": {
+              "text": "string[]"
+            }
           },
-          "default": "{ ..._DensityToken, /** * Creates a CSS `calc` that calculates a dimension based on density. * @param {number} minScale The minimum supported scale. * @returns {CSSResult} A CSS `calc` used to calculate a dimension based on density. */ calc(minScale: number): CSSResult { return unsafeCSS(`calc(max(${minScale}, ${_DensityToken.scale}) * ${_DensityToken.size})`); }, }",
-          "description": "Design tokens that control density."
+          "parameters": [
+            {
+              "name": "paths",
+              "type": {
+                "text": "string[]"
+              },
+              "description": "The SVG path data to convert to normalized clip paths."
+            },
+            {
+              "name": "maxPoints",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number of points to which to normalize paths."
+            }
+          ],
+          "description": "Generates normalized clip paths from SVG path data."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DensityToken",
+          "name": "generateClipPaths",
           "declaration": {
-            "name": "DensityToken",
-            "module": "src/shared/tokens/DensityToken.ts"
+            "name": "generateClipPaths",
+            "module": "src/shared/utils/generateClipPaths.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/tokens/DesignToken.ts",
+      "path": "src/shared/utils/getTextContent.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "DesignToken",
-          "type": {
-            "text": "{\r\n  /** Design tokens that control color. */\r\n  color: ColorToken,\r\n\r\n  /** Design tokens that control elevation. */\r\n  elevation: ElevationToken,\r\n\r\n  /** Design tokens that control motion. */\r\n  motion: MotionToken,\r\n\r\n  /** Design tokens that control shape. */\r\n  shape: ShapeToken,\r\n\r\n  /** Design tokens that control state layer. */\r\n  state: StateToken,\r\n\r\n  /** Design tokens that control typescale. */\r\n  typescale: TypescaleToken,\r\n\r\n  /** Design tokens that control scrollbars. */\r\n  scrollbar: ScrollbarToken,\r\n\r\n  /** Design tokens that control density. */\r\n  density: DensityToken,\r\n}"
+          "kind": "function",
+          "name": "getTextContent",
+          "return": {
+            "type": {
+              "text": "string"
+            }
           },
-          "default": "{ /** Design tokens that control color. */ color: ColorToken, /** Design tokens that control elevation. */ elevation: ElevationToken, /** Design tokens that control motion. */ motion: MotionToken, /** Design tokens that control shape. */ shape: ShapeToken, /** Design tokens that control state layer. */ state: StateToken, /** Design tokens that control typescale. */ typescale: TypescaleToken, /** Design tokens that control scrollbars. */ scrollbar: ScrollbarToken, /** Design tokens that control density. */ density: DensityToken, }",
-          "description": "Design tokens used to style components."
+          "parameters": [
+            {
+              "name": "node",
+              "type": {
+                "text": "Node"
+              },
+              "description": "The node for which to get text content."
+            },
+            {
+              "name": "trim",
+              "default": "false",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "A value indicating whether to trim content.",
+              "optional": true
+            }
+          ],
+          "description": "Gets the text content of a given node, including slotted content."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DesignToken",
+          "name": "getTextContent",
           "declaration": {
-            "name": "DesignToken",
-            "module": "src/shared/tokens/DesignToken.ts"
+            "name": "getTextContent",
+            "module": "src/shared/utils/getTextContent.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/tokens/ElevationToken.ts",
+      "path": "src/shared/utils/guid.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "ElevationToken",
-          "type": {
-            "text": "{\r\n  /** Level 0 elevation. */\r\n  level0: unsafeCSS(`var(--md-sys-elevation-level0, ${elevation(0)})`),\r\n\r\n  /** Level 1 elevation. */\r\n  level1: unsafeCSS(`var(--md-sys-elevation-level1, ${elevation(1)})`),\r\n\r\n  /** Level 2 elevation. */\r\n  level2: unsafeCSS(`var(--md-sys-elevation-level2, ${elevation(3)})`),\r\n\r\n  /** Level 3 elevation. */\r\n  level3: unsafeCSS(`var(--md-sys-elevation-level3, ${elevation(6)})`),\r\n\r\n  /** Level 4 elevation. */\r\n  level4: unsafeCSS(`var(--md-sys-elevation-level4, ${elevation(8)})`),\r\n\r\n  /** Level 5 elevation. */\r\n  level5: unsafeCSS(`var(--md-sys-elevation-level5, ${elevation(12)})`),\r\n}"
+          "kind": "function",
+          "name": "guid",
+          "return": {
+            "type": {
+              "text": "string"
+            }
           },
-          "default": "{ /** Level 0 elevation. */ level0: unsafeCSS(`var(--md-sys-elevation-level0, ${elevation(0)})`), /** Level 1 elevation. */ level1: unsafeCSS(`var(--md-sys-elevation-level1, ${elevation(1)})`), /** Level 2 elevation. */ level2: unsafeCSS(`var(--md-sys-elevation-level2, ${elevation(3)})`), /** Level 3 elevation. */ level3: unsafeCSS(`var(--md-sys-elevation-level3, ${elevation(6)})`), /** Level 4 elevation. */ level4: unsafeCSS(`var(--md-sys-elevation-level4, ${elevation(8)})`), /** Level 5 elevation. */ level5: unsafeCSS(`var(--md-sys-elevation-level5, ${elevation(12)})`), }",
-          "description": "Design tokens that control elevation."
+          "description": "Generates a new globally unique identifier (GUID)."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ElevationToken",
-          "declaration": {
-            "name": "ElevationToken",
-            "module": "src/shared/tokens/ElevationToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
+          "name": "guid",
           "declaration": {
-            "name": "*",
-            "package": "\"./DesignToken\""
+            "name": "guid",
+            "module": "src/shared/utils/guid.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/tokens/MotionToken.ts",
+      "path": "src/shared/utils/hasAssignedNodes.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "MotionToken",
-          "type": {
-            "text": "{\r\n  /** Design tokens that control transition effects. */\r\n  easing: EasingToken,\r\n\r\n  /** Design tokens that control transition duration. */\r\n  duration: DurationToken,\r\n\r\n  /** Design tokens that control spring effects. */\r\n  spring: SpringToken,\r\n}"
+          "kind": "function",
+          "name": "hasAssignedNodes",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
           },
-          "default": "{ /** Design tokens that control transition effects. */ easing: EasingToken, /** Design tokens that control transition duration. */ duration: DurationToken, /** Design tokens that control spring effects. */ spring: SpringToken, }",
-          "description": "Design tokens that control motion."
+          "parameters": [
+            {
+              "name": "slot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "description": "The slot to test."
+            }
+          ],
+          "description": "Determines whether a slot has any assigned nodes."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "MotionToken",
+          "name": "hasAssignedNodes",
           "declaration": {
-            "name": "MotionToken",
-            "module": "src/shared/tokens/MotionToken.ts"
+            "name": "hasAssignedNodes",
+            "module": "src/shared/utils/hasAssignedNodes.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/tokens/ScrollbarToken.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ScrollbarToken",
-          "type": {
-            "text": "{\r\n  /** Width of a standard scrollbar. */\r\n  width: unsafeCSS(`var(--m3e-scrollbar-width, auto)`),\r\n\r\n  /** Width of a thin scrollbar. */\r\n  thinWidth: unsafeCSS(`var(--m3e-scrollbar-thin-width, thin)`),\r\n\r\n  /** Color of a scrollbar. */\r\n  color: unsafeCSS(`var(--m3e-scrollbar-thumb-color, #938f94) var(--m3e-scrollbar-track-color, transparent)`),\r\n}"
-          },
-          "default": "{ /** Width of a standard scrollbar. */ width: unsafeCSS(`var(--m3e-scrollbar-width, auto)`), /** Width of a thin scrollbar. */ thinWidth: unsafeCSS(`var(--m3e-scrollbar-thin-width, thin)`), /** Color of a scrollbar. */ color: unsafeCSS(`var(--m3e-scrollbar-thumb-color, #938f94) var(--m3e-scrollbar-track-color, transparent)`), }",
-          "description": "Design tokens that control scrollbars."
-        }
-      ],
+      "path": "src/shared/utils/index.ts",
+      "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "ScrollbarToken",
+          "name": "*",
           "declaration": {
-            "name": "ScrollbarToken",
-            "module": "src/shared/tokens/ScrollbarToken.ts"
+            "name": "*",
+            "package": "\"./computeCssSize\""
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/ShapeToken.ts",
-      "declarations": [
+        },
         {
-          "kind": "variable",
-          "name": "ShapeToken",
-          "type": {
-            "text": "{\r\n  corner: {\r\n    /** Fully rounded symmetric shape. */\r\n    full: unsafeCSS(\"var(--md-sys-shape-corner-full, 624.9375rem)\"),\r\n\r\n    /** Extra large rounded asymmetric shape directed towards the top. */\r\n    extraLargeTop: unsafeCSS(\r\n      `var(--md-sys-shape-corner-extra-large-top, ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Extra large rounded symmetric shape. */\r\n    extraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-large, ${CornerValue.extraLarge})`),\r\n\r\n    /** Extra large rounded asymmetric shape directed towards the end. */\r\n    extraLargeEnd: unsafeCSS(\r\n      `${CornerValue.none} ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none}`\r\n    ),\r\n\r\n    /** Extra large rounded asymmetric shape directed towards the start. */\r\n    extraLargeStart: unsafeCSS(\r\n      `${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraLarge}`\r\n    ),\r\n\r\n    /** Large rounded asymmetric shape directed towards the top. */\r\n    largeTop: unsafeCSS(\r\n      `var(--md-sys-shape-corner-large-top, ${CornerValue.large} ${CornerValue.large} ${CornerValue.none} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Large rounded asymmetric shape directed towards the end. */\r\n    largeEnd: unsafeCSS(\r\n      `var(--md-sys-shape-corner-large-end, ${CornerValue.none} ${CornerValue.large} ${CornerValue.large} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Large rounded asymmetric shape directed towards the start. */\r\n    largeStart: unsafeCSS(\r\n      `var(--md-sys-shape-corner-large-end, ${CornerValue.large} ${CornerValue.none} ${CornerValue.none} ${CornerValue.large})`\r\n    ),\r\n\r\n    /** Large rounded symmetric shape. */\r\n    large: unsafeCSS(`var(--md-sys-shape-corner-large, ${CornerValue.large})`),\r\n\r\n    /** Medium rounded symmetric shape. */\r\n    medium: unsafeCSS(`var(--md-sys-shape-corner-medium, ${CornerValue.medium})`),\r\n\r\n    /** Medium rounded asymmetric shape directed towards the top. */\r\n    mediumTop: unsafeCSS(`${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none} ${CornerValue.none}`),\r\n\r\n    /** Medium rounded asymmetric shape directed towards the end. */\r\n    mediumEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none}`),\r\n\r\n    /** Medium rounded asymmetric shape directed towards the start. */\r\n    mediumStart: unsafeCSS(`${CornerValue.medium} ${CornerValue.none} ${CornerValue.none} ${CornerValue.medium}`),\r\n\r\n    /** Small rounded symmetric shape. */\r\n    small: unsafeCSS(`var(--md-sys-shape-corner-small, ${CornerValue.small})`),\r\n\r\n    /** Small rounded asymmetric shape directed towards the top. */\r\n    smallTop: unsafeCSS(`${CornerValue.small} ${CornerValue.small} ${CornerValue.none} ${CornerValue.none}`),\r\n\r\n    /** Small rounded asymmetric shape directed towards the end. */\r\n    smallEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.small} ${CornerValue.small} ${CornerValue.none}`),\r\n\r\n    /** Small rounded asymmetric shape directed towards the start. */\r\n    smallStart: unsafeCSS(`${CornerValue.small} ${CornerValue.none} ${CornerValue.none} ${CornerValue.small}`),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the top. */\r\n    extraSmallTop: unsafeCSS(\r\n      `var(--md-sys-shape-corner-extra-small-top, ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Extra small rounded symmetric shape. */\r\n    extraSmall: unsafeCSS(`var(--md-sys-shape-corner-extra-small, ${CornerValue.extraSmall})`),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the end. */\r\n    extraSmallEnd: unsafeCSS(\r\n      `${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none}`\r\n    ),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the start. */\r\n    extraSmallStart: unsafeCSS(\r\n      `${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall}`\r\n    ),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the bottom. */\r\n    extraSmallBottom: unsafeCSS(\r\n      `${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall}`\r\n    ),\r\n\r\n    /** No rounding. */\r\n    none: unsafeCSS(`var(--md-sys-shape-corner-none, ${CornerValue.none})`),\r\n\r\n    /** Increased large rounded symmetric shape. */\r\n    largeIncreased: unsafeCSS(`var(--md-sys-shape-corner-large-increased, ${CornerValue.largeIncreased})`),\r\n\r\n    /** Increased extra large rounded symmetric shape. */\r\n    extraLargeIncreased: unsafeCSS(\r\n      `var(--md-sys-shape-corner-extra-large-increased, ${CornerValue.extraLargeIncreased})`\r\n    ),\r\n\r\n    /** Extra extra large rounded symmetric shape. */\r\n    extraExtraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-extra-large, ${CornerValue.extraExtraLarge})`),\r\n\r\n    /** Design tokens that control specific corners. */\r\n    value: CornerValue,\r\n  },\r\n}"
-          },
-          "default": "{ corner: { /** Fully rounded symmetric shape. */ full: unsafeCSS(\"var(--md-sys-shape-corner-full, 624.9375rem)\"), /** Extra large rounded asymmetric shape directed towards the top. */ extraLargeTop: unsafeCSS( `var(--md-sys-shape-corner-extra-large-top, ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none})` ), /** Extra large rounded symmetric shape. */ extraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-large, ${CornerValue.extraLarge})`), /** Extra large rounded asymmetric shape directed towards the end. */ extraLargeEnd: unsafeCSS( `${CornerValue.none} ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none}` ), /** Extra large rounded asymmetric shape directed towards the start. */ extraLargeStart: unsafeCSS( `${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraLarge}` ), /** Large rounded asymmetric shape directed towards the top. */ largeTop: unsafeCSS( `var(--md-sys-shape-corner-large-top, ${CornerValue.large} ${CornerValue.large} ${CornerValue.none} ${CornerValue.none})` ), /** Large rounded asymmetric shape directed towards the end. */ largeEnd: unsafeCSS( `var(--md-sys-shape-corner-large-end, ${CornerValue.none} ${CornerValue.large} ${CornerValue.large} ${CornerValue.none})` ), /** Large rounded asymmetric shape directed towards the start. */ largeStart: unsafeCSS( `var(--md-sys-shape-corner-large-end, ${CornerValue.large} ${CornerValue.none} ${CornerValue.none} ${CornerValue.large})` ), /** Large rounded symmetric shape. */ large: unsafeCSS(`var(--md-sys-shape-corner-large, ${CornerValue.large})`), /** Medium rounded symmetric shape. */ medium: unsafeCSS(`var(--md-sys-shape-corner-medium, ${CornerValue.medium})`), /** Medium rounded asymmetric shape directed towards the top. */ mediumTop: unsafeCSS(`${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none} ${CornerValue.none}`), /** Medium rounded asymmetric shape directed towards the end. */ mediumEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none}`), /** Medium rounded asymmetric shape directed towards the start. */ mediumStart: unsafeCSS(`${CornerValue.medium} ${CornerValue.none} ${CornerValue.none} ${CornerValue.medium}`), /** Small rounded symmetric shape. */ small: unsafeCSS(`var(--md-sys-shape-corner-small, ${CornerValue.small})`), /** Small rounded asymmetric shape directed towards the top. */ smallTop: unsafeCSS(`${CornerValue.small} ${CornerValue.small} ${CornerValue.none} ${CornerValue.none}`), /** Small rounded asymmetric shape directed towards the end. */ smallEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.small} ${CornerValue.small} ${CornerValue.none}`), /** Small rounded asymmetric shape directed towards the start. */ smallStart: unsafeCSS(`${CornerValue.small} ${CornerValue.none} ${CornerValue.none} ${CornerValue.small}`), /** Extra small rounded asymmetric shape directed towards the top. */ extraSmallTop: unsafeCSS( `var(--md-sys-shape-corner-extra-small-top, ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none})` ), /** Extra small rounded symmetric shape. */ extraSmall: unsafeCSS(`var(--md-sys-shape-corner-extra-small, ${CornerValue.extraSmall})`), /** Extra small rounded asymmetric shape directed towards the end. */ extraSmallEnd: unsafeCSS( `${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none}` ), /** Extra small rounded asymmetric shape directed towards the start. */ extraSmallStart: unsafeCSS( `${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall}` ), /** Extra small rounded asymmetric shape directed towards the bottom. */ extraSmallBottom: unsafeCSS( `${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall}` ), /** No rounding. */ none: unsafeCSS(`var(--md-sys-shape-corner-none, ${CornerValue.none})`), /** Increased large rounded symmetric shape. */ largeIncreased: unsafeCSS(`var(--md-sys-shape-corner-large-increased, ${CornerValue.largeIncreased})`), /** Increased extra large rounded symmetric shape. */ extraLargeIncreased: unsafeCSS( `var(--md-sys-shape-corner-extra-large-increased, ${CornerValue.extraLargeIncreased})` ), /** Extra extra large rounded symmetric shape. */ extraExtraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-extra-large, ${CornerValue.extraExtraLarge})`), /** Design tokens that control specific corners. */ value: CornerValue, }, }",
-          "description": "Design tokens that control shape."
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./computeLineCount\""
+          }
+        },
         {
           "kind": "js",
-          "name": "ShapeToken",
+          "name": "*",
           "declaration": {
-            "name": "ShapeToken",
-            "module": "src/shared/tokens/ShapeToken.ts"
+            "name": "*",
+            "package": "\"./focusWhenReady\""
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/StateToken.ts",
-      "declarations": [
+        },
         {
-          "kind": "variable",
-          "name": "StateToken",
-          "type": {
-            "text": "{\r\n  /** Opacity of the state layer on focus. */\r\n  focusStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-focus-state-layer-opacity, 10%)\"),\r\n\r\n  /** Opacity of the state layer on hover. */\r\n  hoverStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-hover-state-layer-opacity, 8%)\"),\r\n\r\n  /** Opacity of the state layer on pressed. */\r\n  pressedStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-pressed-state-layer-opacity, 10%)\"),\r\n}"
-          },
-          "default": "{ /** Opacity of the state layer on focus. */ focusStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-focus-state-layer-opacity, 10%)\"), /** Opacity of the state layer on hover. */ hoverStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-hover-state-layer-opacity, 8%)\"), /** Opacity of the state layer on pressed. */ pressedStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-pressed-state-layer-opacity, 10%)\"), }",
-          "description": "Design tokens that control state layer."
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./forcedColorsActive\""
+          }
+        },
         {
           "kind": "js",
-          "name": "StateToken",
+          "name": "*",
           "declaration": {
-            "name": "StateToken",
-            "module": "src/shared/tokens/StateToken.ts"
+            "name": "*",
+            "package": "\"./generateClipPaths\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./getTextContent\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./guid\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./hasAssignedNodes\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./interceptProperty\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./prefersReducedMotion\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./resolveElementById\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./resolveFragmentUrl\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./scrollIntoViewIfNeeded\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./VelocityTracker\""
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/tokens/TypescaleToken.ts",
+      "path": "src/shared/utils/interceptProperty.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "TypescaleToken",
-          "type": {
-            "text": "{\r\n  /** Standard typescale variant. */\r\n  standard: {\r\n    /** Short, important text or numerals. */\r\n    display: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-display-large-font-size, 3.5625rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-large-line-height, 4rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-display-large-tracking, 0.015625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-size, 2.8125rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-line-height, 3.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-display-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-display-small-font-size, 2.25rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-small-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-small-line-height, 2.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-display-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Short, high-emphasis text on smaller screens. */\r\n    headline: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-size, 2rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-line-height, 2.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-headline-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-size, 1.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-line-height, 2.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-headline-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-size, 1.5rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-line-height, 2rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-headline-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Medium-emphasis text that remains relatively short. */\r\n    title: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-title-large-font-size, 1.375rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-large-line-height, 1.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-title-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-line-height, 1.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-title-medium-tracking, 0.009375rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-title-small-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-small-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-title-small-tracking, 0.00625rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Longer passages of text. */\r\n    body: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-body-large-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-large-line-height, 1.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-body-large-tracking, 0.03125rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-body-medium-tracking, 0.015625rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-body-small-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-small-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-body-small-tracking, 0.025rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Smaller, utilitarian text. */\r\n    label: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-label-large-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-large-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-label-large-tracking, 0.00625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-label-medium-tracking, 0.03125rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-label-small-font-size, 0.6875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-label-small-tracking, 0.03125rem)\"),\r\n      },\r\n    },\r\n  },\r\n\r\n  /** Emphasized typescale variant. */\r\n  emphasized: {\r\n    /** Short, important text or numerals. */\r\n    display: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-size, 3.5625rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-line-height, 4rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-tracking, 0.015625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-size, 2.8125rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-line-height, 3.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-size, 2.25rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-line-height, 2.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Short, high-emphasis text on smaller screens. */\r\n    headline: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-size, 2rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-line-height, 2.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-size, 1.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-line-height, 2.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-size, 1.5rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-line-height, 2rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Medium-emphasis text that remains relatively short. */\r\n    title: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-size, 1.375rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-line-height, 1.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-line-height, 3.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-tracking, 0.009375rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-tracking, 0.00625rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Longer passages of text. */\r\n    body: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-line-height, 1.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-tracking, 0.03125rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-tracking, 0.015625rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-tracking, 0.025rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Smaller, utilitarian text. */\r\n    label: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-tracking, 0.00625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-tracking, 0.03125rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-size, 0.6875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-tracking, 0.03125rem)\"),\r\n      },\r\n    },\r\n  },\r\n}"
+          "kind": "function",
+          "name": "interceptProperty",
+          "return": {
+            "type": {
+              "text": ""
+            }
           },
-          "default": "{ /** Standard typescale variant. */ standard: { /** Short, important text or numerals. */ display: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-display-large-font-size, 3.5625rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-large-line-height, 4rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-display-large-tracking, 0.015625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-size, 2.8125rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-line-height, 3.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-display-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-display-small-font-size, 2.25rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-small-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-small-line-height, 2.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-display-small-tracking, 0)\"), }, }, /** Short, high-emphasis text on smaller screens. */ headline: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-size, 2rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-line-height, 2.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-headline-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-size, 1.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-line-height, 2.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-headline-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-size, 1.5rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-line-height, 2rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-headline-small-tracking, 0)\"), }, }, /** Medium-emphasis text that remains relatively short. */ title: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-title-large-font-size, 1.375rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-large-line-height, 1.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-title-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-line-height, 1.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-title-medium-tracking, 0.009375rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-title-small-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-small-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-title-small-tracking, 0.00625rem)\"), }, }, /** Longer passages of text. */ body: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-body-large-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-large-line-height, 1.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-body-large-tracking, 0.03125rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-body-medium-tracking, 0.015625rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-body-small-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-small-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-body-small-tracking, 0.025rem)\"), }, }, /** Smaller, utilitarian text. */ label: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-label-large-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-large-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-label-large-tracking, 0.00625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-label-medium-tracking, 0.03125rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-label-small-font-size, 0.6875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-label-small-tracking, 0.03125rem)\"), }, }, }, /** Emphasized typescale variant. */ emphasized: { /** Short, important text or numerals. */ display: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-size, 3.5625rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-line-height, 4rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-tracking, 0.015625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-size, 2.8125rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-line-height, 3.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-size, 2.25rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-line-height, 2.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-tracking, 0)\"), }, }, /** Short, high-emphasis text on smaller screens. */ headline: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-size, 2rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-line-height, 2.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-size, 1.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-line-height, 2.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-size, 1.5rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-line-height, 2rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-tracking, 0)\"), }, }, /** Medium-emphasis text that remains relatively short. */ title: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-size, 1.375rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-line-height, 1.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-line-height, 3.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-tracking, 0.009375rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-tracking, 0.00625rem)\"), }, }, /** Longer passages of text. */ body: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-line-height, 1.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-tracking, 0.03125rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-tracking, 0.015625rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-tracking, 0.025rem)\"), }, }, /** Smaller, utilitarian text. */ label: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-tracking, 0.00625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-tracking, 0.03125rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-size, 0.6875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-tracking, 0.03125rem)\"), }, }, }, }",
-          "description": "Design tokens that control typescale."
+          "parameters": [
+            {
+              "name": "target",
+              "type": {
+                "text": "T"
+              },
+              "description": "The object whose property should be intercepted."
+            },
+            {
+              "name": "prop",
+              "type": {
+                "text": "K"
+              },
+              "description": "The property key to intercept."
+            },
+            {
+              "name": "options",
+              "type": {
+                "text": "{\r\n    get?: (getter: () => T[K]) => T[K];\r\n    set?: (value: T[K], setter: (v: T[K]) => void) => void;\r\n  }"
+              },
+              "description": "Configuration object for interceptor callbacks."
+            }
+          ],
+          "description": "Intercepts property access and mutations on a target object, allowing custom logic\r\nto run when the property is read or written to."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TypescaleToken",
+          "name": "interceptProperty",
           "declaration": {
-            "name": "TypescaleToken",
-            "module": "src/shared/tokens/TypescaleToken.ts"
+            "name": "interceptProperty",
+            "module": "src/shared/utils/interceptProperty.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/utils/prefersReducedMotion.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "prefersReducedMotion",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "description": "Determines whether reduced motion is preferred."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "prefersReducedMotion",
+          "declaration": {
+            "name": "prefersReducedMotion",
+            "module": "src/shared/utils/prefersReducedMotion.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/utils/resolveElementById.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "resolveElementById",
+          "return": {
+            "type": {
+              "text": "Promise<T | null>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "description": "The element ID to resolve."
+            },
+            {
+              "name": "root",
+              "default": "document",
+              "type": {
+                "text": "ParentNode"
+              },
+              "description": "Optional root node to query from (defaults to document)."
+            }
+          ],
+          "description": "Resolves an element by ID, waiting for document readiness if needed."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "resolveElementById",
+          "declaration": {
+            "name": "resolveElementById",
+            "module": "src/shared/utils/resolveElementById.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/utils/resolveFragmentUrl.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "resolveFragmentUrl",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "description": "The fragment identifier to append (e.g., an SVG element's ID)."
+            }
+          ],
+          "description": "Resolves a URL fragment reference (`url(path#id)`) based on the current document location.\r\n\r\nThis helper is typically used when constructing fragment-based URLs for SVG\r\nreferences (e.g., masks, clipPaths, filters) where the browser requires a fully\r\nqualified `url(...)` value that includes the current path.\r\n\r\nHow it works:\r\n- Safely reads `document.location` (guarded for SSR environments).\r\n- Extracts the current page's path + query string.\r\n- Removes any existing hash fragment from the URL.\r\n- Appends `#${id}` to produce a stable fragment reference.\r\n\r\nExample:\r\n  // If the current page is /viewer/page?mode=edit#section2\r\n  resolveFragmentUrl(\"clip\") → \"url(/viewer/page?mode=edit#clip)\""
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "resolveFragmentUrl",
+          "declaration": {
+            "name": "resolveFragmentUrl",
+            "module": "src/shared/utils/resolveFragmentUrl.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/utils/scrollIntoViewIfNeeded.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "scrollIntoViewIfNeeded",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "description": "The element to scroll into view."
+            },
+            {
+              "name": "scrollContainer",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "description": "The scrollable container."
+            },
+            {
+              "name": "options",
+              "optional": true,
+              "type": {
+                "text": "ScrollIntoViewOptions"
+              },
+              "description": "Options used to scroll into view."
+            }
+          ],
+          "description": "If needed, scrolls an element into view within a given scroll container."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "scrollIntoViewIfNeeded",
+          "declaration": {
+            "name": "scrollIntoViewIfNeeded",
+            "module": "src/shared/utils/scrollIntoViewIfNeeded.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/utils/VelocityTracker.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Utility for computing gesture velocity over a rolling time window.",
+          "name": "VelocityTracker",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#samples",
+              "privacy": "private",
+              "type": {
+                "text": "Array<{ y: number; t: number }>"
+              },
+              "readonly": true,
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "#windowMs",
+              "privacy": "private",
+              "type": {
+                "text": "number"
+              },
+              "readonly": true,
+              "default": "windowMs"
+            },
+            {
+              "kind": "method",
+              "name": "add",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The value in pixels."
+                },
+                {
+                  "name": "timestamp",
+                  "default": "performance.now()",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The timestamp when `value` changed.",
+                  "optional": true
+                }
+              ],
+              "description": "Adds a new sample to the tracker."
+            },
+            {
+              "kind": "method",
+              "name": "getVelocity",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Computes the current velocity in px/s."
+            },
+            {
+              "kind": "method",
+              "name": "reset",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Clears all stored samples."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "VelocityTracker",
+          "declaration": {
+            "name": "VelocityTracker",
+            "module": "src/shared/utils/VelocityTracker.ts"
           }
         }
       ]