@m3e/core 1.0.0-rc.2 → 1.0.0-rc.3

package/dist/custom-elements.json

@@ -9193,25 +9193,6 @@
           "kind": "mixin",
           "description": "Mixin that adds support for custom event attributes.",
           "name": "EventAttribute",
-          "members": [
-            {
-              "kind": "method",
-              "name": "dispatchEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
           "parameters": [
             {
               "name": "base",
@@ -9509,6 +9490,17 @@
           "description": "Mixin to augment an element with behavior used to submit a form.",
           "name": "FormSubmitter",
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "true",
+              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration."
+            },
             {
               "kind": "field",
               "name": "name",
@@ -10888,225 +10880,444 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/primitives/CollapsibleElement.ts",
+      "path": "src/shared/tokens/ColorToken.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "A container used to expand and collapse content.",
-          "name": "M3eCollapsibleElement",
-          "cssProperties": [
-            {
-              "description": "The duration of the expand / collapse animation.",
-              "name": "--m3e-collapsible-animation-duration"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Renders the collapsible content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "#slotChanged",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "#hasOpened",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether content is visible.",
-              "attribute": "open",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "#handleSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "#autoSize",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "#clearSize",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "#actualSize",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "dispatchEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "EventAttribute",
-                "module": "src/shared/mixins/EventAttribute.ts"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "opening",
-              "type": {
-                "text": "Event"
-              },
-              "description": "Emitted when the collapsible begins to open."
-            },
-            {
-              "name": "opened",
-              "type": {
-                "text": "Event"
-              },
-              "description": "Emitted when the collapsible has opened."
-            },
-            {
-              "name": "closing",
-              "type": {
-                "text": "Event"
-              },
-              "description": "Emitted when the collapsible begins to close."
-            },
-            {
-              "name": "closed",
-              "type": {
-                "text": "Event"
-              },
-              "description": "Emitted when the collapsible has closed."
-            }
-          ],
-          "attributes": [
-            {
-              "description": "Whether content is visible.",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "open"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "EventAttribute",
-              "module": "/src/shared/mixins"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+          "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}"
           },
-          "tagName": "m3e-collapsible",
-          "customElement": true
+          "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": "M3eCollapsibleElement",
+          "name": "ColorToken",
           "declaration": {
-            "name": "M3eCollapsibleElement",
-            "module": "src/shared/primitives/CollapsibleElement.ts"
+            "name": "ColorToken",
+            "module": "src/shared/tokens/ColorToken.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/DensityToken.ts",
+      "declarations": [
         {
-          "kind": "custom-element-definition",
-          "name": "m3e-collapsible",
+          "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": "M3eCollapsibleElement",
-            "module": "src/shared/primitives/CollapsibleElement.ts"
+            "name": "DensityToken",
+            "module": "src/shared/tokens/DensityToken.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/primitives/ElevationElement.ts",
+      "path": "src/shared/tokens/DesignToken.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "Visually depicts elevation using a shadow.",
-          "name": "M3eElevationElement",
-          "cssProperties": [
-            {
-              "description": "Color used to depict elevation.",
-              "name": "--m3e-elevation-color"
-            },
-            {
-              "description": "Duration when lifting.",
-              "name": "--m3e-elevation-lift-duration"
-            },
-            {
-              "description": "Easing curve when lifting.",
-              "name": "--m3e-elevation-lift-easing"
-            },
-            {
-              "description": "Duration when settling.",
-              "name": "--m3e-elevation-settle-duration"
-            },
-            {
-              "description": "Easing curve when settling.",
-              "name": "--m3e-elevation-settle-easing"
-            },
-            {
-              "description": "Elevation when resting (box-shadow).",
-              "name": "--m3e-elevation-level"
-            },
-            {
-              "description": "Elevation on hover (box-shadow).",
-              "name": "--m3e-elevation-hover-level"
-            },
-            {
-              "description": "Elevation on focus (box-shadow).",
-              "name": "--m3e-elevation-focus-level"
+          "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",
+      "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": "TypescaleToken",
+          "declaration": {
+            "name": "TypescaleToken",
+            "module": "src/shared/tokens/TypescaleToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/primitives/CollapsibleElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A container used to expand and collapse content.",
+          "name": "M3eCollapsibleElement",
+          "cssProperties": [
+            {
+              "description": "The duration of the expand / collapse animation.",
+              "name": "--m3e-collapsible-animation-duration"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Renders the collapsible content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "#slotChanged",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#hasOpened",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether content is visible.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "#handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#autoSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#clearSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#actualSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "opening",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emitted when the collapsible begins to open."
+            },
+            {
+              "name": "opened",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emitted when the collapsible has opened."
+            },
+            {
+              "name": "closing",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emitted when the collapsible begins to close."
+            },
+            {
+              "name": "closed",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emitted when the collapsible has closed."
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Whether content is visible.",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "open"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "EventAttribute",
+              "module": "/src/shared/mixins"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "m3e-collapsible",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eCollapsibleElement",
+          "declaration": {
+            "name": "M3eCollapsibleElement",
+            "module": "src/shared/primitives/CollapsibleElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-collapsible",
+          "declaration": {
+            "name": "M3eCollapsibleElement",
+            "module": "src/shared/primitives/CollapsibleElement.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/primitives/ElevationElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Visually depicts elevation using a shadow.",
+          "name": "M3eElevationElement",
+          "cssProperties": [
+            {
+              "description": "Color used to depict elevation.",
+              "name": "--m3e-elevation-color"
+            },
+            {
+              "description": "Duration when lifting.",
+              "name": "--m3e-elevation-lift-duration"
+            },
+            {
+              "description": "Easing curve when lifting.",
+              "name": "--m3e-elevation-lift-easing"
+            },
+            {
+              "description": "Duration when settling.",
+              "name": "--m3e-elevation-settle-duration"
+            },
+            {
+              "description": "Easing curve when settling.",
+              "name": "--m3e-elevation-settle-easing"
+            },
+            {
+              "description": "Elevation when resting (box-shadow).",
+              "name": "--m3e-elevation-level"
+            },
+            {
+              "description": "Elevation on hover (box-shadow).",
+              "name": "--m3e-elevation-hover-level"
+            },
+            {
+              "description": "Elevation on focus (box-shadow).",
+              "name": "--m3e-elevation-focus-level"
             },
             {
               "description": "Elevation on pressed (box-shadow).",
@@ -11759,6 +11970,14 @@
             "name": "*",
             "package": "\"./TextOverflowElement\""
           }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./TextHighlightElement\""
+          }
         }
       ]
     },
@@ -12981,35 +13200,266 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "m3e-state-layer",
+          "tagName": "m3e-state-layer",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eStateLayerElement",
+          "declaration": {
+            "name": "M3eStateLayerElement",
+            "module": "src/shared/primitives/StateLayerElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-state-layer",
+          "declaration": {
+            "name": "M3eStateLayerElement",
+            "module": "src/shared/primitives/StateLayerElement.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/primitives/StateLayerToken.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/primitives/TextHighlightElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Highlights text which matches a given search term.",
+          "name": "M3eTextHighlightElement",
+          "cssProperties": [
+            {
+              "description": "Background color applied to highlighted text ranges.",
+              "name": "--m3e-text-highlight-container-color"
+            },
+            {
+              "description": "Foreground color of highlighted text content.",
+              "name": "--m3e-text-highlight-color"
+            },
+            {
+              "description": "Optional text decoration (e.g., underline, line-through) for highlighted text.",
+              "name": "--m3e-text-highlight-decoration"
+            },
+            {
+              "description": "Optional text shadow for emphasis or contrast.",
+              "name": "--m3e-text-highlight-shadow"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Renders the content to highlight.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "__nextId",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "#id",
+              "privacy": "private",
+              "default": "`m3e-text-highlight-${M3eTextHighlightElement.__nextId++}`"
+            },
+            {
+              "kind": "field",
+              "name": "#ranges",
+              "privacy": "private",
+              "default": "new Array<Range>()"
+            },
+            {
+              "kind": "field",
+              "name": "#styles",
+              "privacy": "private",
+              "type": {
+                "text": "CSSStyleSheet | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "A value indicating whether text highlighting is disabled.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "term",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The term to highlight.",
+              "attribute": "term"
+            },
+            {
+              "kind": "field",
+              "name": "caseSensitive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "A value indicating whether matching is case sensitive.",
+              "attribute": "case-sensitive"
+            },
+            {
+              "kind": "field",
+              "name": "isSupported",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "A value indicating whether text highlighting is supported by the browser.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "ranges",
+              "type": {
+                "text": "readonly Range[]"
+              },
+              "description": "The ranges that match the current term.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#isTextNode",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "node",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#findTextNodes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "parent",
+                  "type": {
+                    "text": "Node"
+                  }
+                },
+                {
+                  "name": "nodes",
+                  "type": {
+                    "text": "Node[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#highlight",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "highlight",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Emitted when content is highlighted."
+            }
+          ],
+          "attributes": [
+            {
+              "description": "A value indicating whether matching is case sensitive.",
+              "name": "case-sensitive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "caseSensitive"
+            },
+            {
+              "description": "A value indicating whether text highlighting is disabled.",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "description": "The term to highlight.",
+              "name": "term",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "term"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "m3e-text-highlight",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "M3eStateLayerElement",
+          "name": "M3eTextHighlightElement",
           "declaration": {
-            "name": "M3eStateLayerElement",
-            "module": "src/shared/primitives/StateLayerElement.ts"
+            "name": "M3eTextHighlightElement",
+            "module": "src/shared/primitives/TextHighlightElement.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "m3e-state-layer",
+          "name": "m3e-text-highlight",
           "declaration": {
-            "name": "M3eStateLayerElement",
-            "module": "src/shared/primitives/StateLayerElement.ts"
+            "name": "M3eTextHighlightElement",
+            "module": "src/shared/primitives/TextHighlightElement.ts"
           }
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/primitives/StateLayerToken.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/shared/primitives/TextOverflowElement.ts",
@@ -13052,246 +13502,6 @@
         }
       ]
     },
-    {
-      "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",
-      "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": "TypescaleToken",
-          "declaration": {
-            "name": "TypescaleToken",
-            "module": "src/shared/tokens/TypescaleToken.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/shared/utils/getTextContent.ts",