@m3e/core 1.1.6 → 1.1.8

package/dist/custom-elements.json

@@ -8604,6 +8604,74 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/directives/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./safeStyleMap\""
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/directives/safeStyleMap.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SafeStyleMapDirective",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_previousStyleProperties",
+              "type": {
+                "text": "Set<string> | undefined"
+              },
+              "privacy": "private"
+            }
+          ],
+          "superclass": {
+            "name": "Directive",
+            "package": "lit/directive.js"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "safeStyleMap",
+          "description": "A directive that applies CSS properties to an element.\r\n\r\n`safeStyleMap` can only be used in the `style` attribute and must be the only\r\nexpression in the attribute. It takes the property names in the\r\nStyleInfostyleInfo object and adds the properties to the inline\r\nstyle of the element.\r\n\r\nProperty names with dashes (`-`) are assumed to be valid CSS\r\nproperty names and set on the element's style object using `setProperty()`.\r\nNames without dashes are assumed to be camelCased JavaScript property names\r\nand set on the element's style object using property assignment, allowing the\r\nstyle object to translate JavaScript-style names to CSS property names.\r\n\r\nFor example `safeStyleMap({backgroundColor: 'red', 'border-top': '5px', '--size':\r\n'0'})` sets the `background-color`, `border-top` and `--size` properties.",
+          "parameters": [
+            {
+              "name": "styleInfo"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "safeStyleMap",
+          "declaration": {
+            "name": "safeStyleMap",
+            "module": "src/shared/directives/safeStyleMap.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SafeStyleMapDirective",
+          "declaration": {
+            "name": "SafeStyleMapDirective",
+            "module": "src/shared/directives/safeStyleMap.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/shared/primitives/ActionElementBase.ts",
@@ -11048,7 +11116,107 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/directives/index.ts",
+      "path": "src/shared/tokens/ColorToken.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}"
+          },
+          "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": "ColorToken",
+          "declaration": {
+            "name": "ColorToken",
+            "module": "src/shared/tokens/ColorToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/DensityToken.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}"
+          },
+          "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": "DensityToken",
+          "declaration": {
+            "name": "DensityToken",
+            "module": "src/shared/tokens/DensityToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/DesignToken.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}"
+          },
+          "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": "DesignToken",
+          "declaration": {
+            "name": "DesignToken",
+            "module": "src/shared/tokens/DesignToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/ElevationToken.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}"
+          },
+          "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": "ElevationToken",
+          "declaration": {
+            "name": "ElevationToken",
+            "module": "src/shared/tokens/ElevationToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -11056,60 +11224,132 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./safeStyleMap\""
+            "package": "\"./DesignToken\""
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/directives/safeStyleMap.ts",
+      "path": "src/shared/tokens/MotionToken.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "SafeStyleMapDirective",
-          "members": [
-            {
-              "kind": "field",
-              "name": "_previousStyleProperties",
-              "type": {
-                "text": "Set<string> | undefined"
-              },
-              "privacy": "private"
-            }
-          ],
-          "superclass": {
-            "name": "Directive",
-            "package": "lit/directive.js"
+          "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}"
+          },
+          "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": "MotionToken",
+          "declaration": {
+            "name": "MotionToken",
+            "module": "src/shared/tokens/MotionToken.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/ScrollbarToken.ts",
+      "declarations": [
         {
           "kind": "variable",
-          "name": "safeStyleMap",
-          "description": "A directive that applies CSS properties to an element.\r\n\r\n`safeStyleMap` can only be used in the `style` attribute and must be the only\r\nexpression in the attribute. It takes the property names in the\r\nStyleInfostyleInfo object and adds the properties to the inline\r\nstyle of the element.\r\n\r\nProperty names with dashes (`-`) are assumed to be valid CSS\r\nproperty names and set on the element's style object using `setProperty()`.\r\nNames without dashes are assumed to be camelCased JavaScript property names\r\nand set on the element's style object using property assignment, allowing the\r\nstyle object to translate JavaScript-style names to CSS property names.\r\n\r\nFor example `safeStyleMap({backgroundColor: 'red', 'border-top': '5px', '--size':\r\n'0'})` sets the `background-color`, `border-top` and `--size` properties.",
-          "parameters": [
-            {
-              "name": "styleInfo"
-            }
-          ]
+          "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."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "safeStyleMap",
+          "name": "ScrollbarToken",
           "declaration": {
-            "name": "safeStyleMap",
-            "module": "src/shared/directives/safeStyleMap.ts"
+            "name": "ScrollbarToken",
+            "module": "src/shared/tokens/ScrollbarToken.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "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": "ShapeToken",
+          "declaration": {
+            "name": "ShapeToken",
+            "module": "src/shared/tokens/ShapeToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "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": "StateToken",
+          "declaration": {
+            "name": "StateToken",
+            "module": "src/shared/tokens/StateToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/TypescaleToken.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}"
+          },
+          "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": "SafeStyleMapDirective",
+          "name": "TypescaleToken",
           "declaration": {
-            "name": "SafeStyleMapDirective",
-            "module": "src/shared/directives/safeStyleMap.ts"
+            "name": "TypescaleToken",
+            "module": "src/shared/tokens/TypescaleToken.ts"
           }
         }
       ]
@@ -13697,240 +13937,35 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/tokens/ColorToken.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}"
-          },
-          "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": "ColorToken",
-          "declaration": {
-            "name": "ColorToken",
-            "module": "src/shared/tokens/ColorToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/DensityToken.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}"
-          },
-          "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": "DensityToken",
-          "declaration": {
-            "name": "DensityToken",
-            "module": "src/shared/tokens/DensityToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/DesignToken.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}"
-          },
-          "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": "DesignToken",
-          "declaration": {
-            "name": "DesignToken",
-            "module": "src/shared/tokens/DesignToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/ElevationToken.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}"
-          },
-          "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": "ElevationToken",
-          "declaration": {
-            "name": "ElevationToken",
-            "module": "src/shared/tokens/ElevationToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./DesignToken\""
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/MotionToken.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}"
-          },
-          "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": "MotionToken",
-          "declaration": {
-            "name": "MotionToken",
-            "module": "src/shared/tokens/MotionToken.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."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ScrollbarToken",
-          "declaration": {
-            "name": "ScrollbarToken",
-            "module": "src/shared/tokens/ScrollbarToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "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": "ShapeToken",
-          "declaration": {
-            "name": "ShapeToken",
-            "module": "src/shared/tokens/ShapeToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "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": "StateToken",
-          "declaration": {
-            "name": "StateToken",
-            "module": "src/shared/tokens/StateToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/TypescaleToken.ts",
+      "path": "src/shared/utils/computeLineCount.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": "computeLineCount",
+          "return": {
+            "type": {
+              "text": "number"
+            }
           },
-          "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": "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."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TypescaleToken",
+          "name": "computeLineCount",
           "declaration": {
-            "name": "TypescaleToken",
-            "module": "src/shared/tokens/TypescaleToken.ts"
+            "name": "computeLineCount",
+            "module": "src/shared/utils/computeLineCount.ts"
           }
         }
       ]
@@ -14157,6 +14192,14 @@
       "path": "src/shared/utils/index.ts",
       "declarations": [],
       "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./computeLineCount\""
+          }
+        },
         {
           "kind": "js",
           "name": "*",