@m3e/core 1.0.0-rc.1

package/src/shared/tokens/MotionToken.ts

@@ -0,0 +1,107 @@
+import { unsafeCSS } from "lit";
+
+const EasingToken = {
+  /** Emphasized transition. */
+  emphasized: unsafeCSS("var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0.0, 0, 1.0))"),
+
+  /** Decelerated emphasized transition. */
+  emphasizedDecelerate: unsafeCSS(
+    "var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1.0))"
+  ),
+
+  /** Accelerated emphasized transition. */
+  emphasizedAccelerate: unsafeCSS(
+    "var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0.0, 0.8, 0.15))"
+  ),
+
+  /** Simple, small, or utility-focused transition. */
+  standard: unsafeCSS("var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0))"),
+
+  /** Decelerated standard transition. */
+  standardDecelerate: unsafeCSS("var(--md-sys-motion-easing-standard-decelerate, cubic-bezier(0, 0, 0, 1))"),
+
+  /** Accelerated standard transition. */
+  standardAccelerate: unsafeCSS("var(--md-sys-motion-easing-standard-accelerate, cubic-bezier(0.3, 0, 1, 1))"),
+} as const;
+
+const SpringToken = {
+  /** Fast spatial spring. */
+  fastSpatial: unsafeCSS("var(--md-sys-motion-spring-fast-spatial, 350ms cubic-bezier(0.27, 1.06, 0.18, 1.00))"),
+
+  /** Default spatial spring. */
+  defaultSpatial: unsafeCSS("var(--md-sys-motion-spring-default-spatial, 500ms cubic-bezier(0.27, 1.06, 0.18, 1.00))"),
+
+  /** Slow spatial spring. */
+  slowSpatial: unsafeCSS("var(--md-sys-motion-spring-slow-spatial, 750ms cubic-bezier(0.27, 1.06, 0.18, 1.00))"),
+
+  /** Fast effects spring. */
+  fastEffects: unsafeCSS("var(--md-sys-motion-spring-fast-effects, 150ms cubic-bezier(0.31, 0.94, 0.34, 1.00))"),
+
+  /** Default effects spring. */
+  defaultEffects: unsafeCSS("var(--md-sys-motion-spring-default-effects, 200ms cubic-bezier(0.34, 0.80, 0.34, 1.00))"),
+
+  /** Slow effects spring. */
+  slowEffects: unsafeCSS("var(--md-sys-motion-spring-slow-effects, 200ms cubic-bezier(0.34, 0.88, 0.34, 1.00))"),
+} as const;
+
+const DurationToken = {
+  /** Small utility-focused transition duration. */
+  short1: unsafeCSS("var(--md-sys-motion-duration-short-1, 50ms)"),
+
+  /** Small utility-focused transition duration. */
+  short2: unsafeCSS("var(--md-sys-motion-duration-short-2, 100ms)"),
+
+  /** Small utility-focused transition duration. */
+  short3: unsafeCSS("var(--md-sys-motion-duration-short-3, 150ms)"),
+
+  /** Small utility-focused transition duration. */
+  short4: unsafeCSS("var(--md-sys-motion-duration-short-4, 200ms)"),
+
+  /**  Duration for transitions that traverse a medium area of the screen. */
+  medium1: unsafeCSS("var(--md-sys-motion-duration-medium-1, 250ms)"),
+
+  /**  Duration for transitions that traverse a medium area of the screen. */
+  medium2: unsafeCSS("var(--md-sys-motion-duration-medium-2, 300ms)"),
+
+  /**  Duration for transitions that traverse a medium area of the screen. */
+  medium3: unsafeCSS("var(--md-sys-motion-duration-medium-3, 350ms)"),
+
+  /**  Duration for transitions that traverse a medium area of the screen. */
+  medium4: unsafeCSS("var(--md-sys-motion-duration-medium-4, 400ms)"),
+
+  /**  Duration for large expressive transitions. */
+  long1: unsafeCSS("var(--md-sys-motion-duration-long-1, 450ms)"),
+
+  /**  Duration for large expressive transitions. */
+  long2: unsafeCSS("var(--md-sys-motion-duration-long-2, 500ms)"),
+
+  /**  Duration for large expressive transitions. */
+  long3: unsafeCSS("var(--md-sys-motion-duration-long-3, 550ms)"),
+
+  /**  Duration for large expressive transitions. */
+  long4: unsafeCSS("var(--md-sys-motion-duration-long-4, 600ms)"),
+
+  /**  Extra long duration for ambient transitions. */
+  extraLong1: unsafeCSS("var(--md-sys-motion-duration-extra-long-1, 700ms)"),
+
+  /**  Extra long duration for ambient transitions. */
+  extraLong2: unsafeCSS("var(--md-sys-motion-duration-extra-long-2, 800ms)"),
+
+  /**  Extra long duration for ambient transitions. */
+  extraLong3: unsafeCSS("var(--md-sys-motion-duration-extra-long-3, 900ms)"),
+
+  /**  Extra long duration for ambient transitions. */
+  extraLong4: unsafeCSS("var(--md-sys-motion-duration-extra-long-4, 1000ms)"),
+} as const;
+
+/** Design tokens that control motion. */
+export const MotionToken = {
+  /** Design tokens that control transition effects. */
+  easing: EasingToken,
+
+  /** Design tokens that control transition duration. */
+  duration: DurationToken,
+
+  /** Design tokens that control spring effects. */
+  spring: SpringToken,
+} as const;

package/src/shared/tokens/ScrollbarToken.ts

@@ -0,0 +1,13 @@
+import { unsafeCSS } from "lit";
+
+/** Design tokens that control scrollbars. */
+export const ScrollbarToken = {
+  /** 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)`),
+} as const;

package/src/shared/tokens/ShapeToken.ts

@@ -0,0 +1,138 @@
+import { unsafeCSS } from "lit";
+
+const CornerValue = {
+  /** No rounding. */
+  none: unsafeCSS("var(--md-sys-shape-corner-value-none, 0)"),
+
+  /** Extra small rounded corner. */
+  extraSmall: unsafeCSS("var(--md-sys-shape-corner-value-extra-small, 0.25rem)"),
+
+  /** Small rounded corner. */
+  small: unsafeCSS("var(--md-sys-shape-corner-value-small, 0.5rem)"),
+
+  /** Medium rounded corner. */
+  medium: unsafeCSS("var(--md-sys-shape-corner-value-medium, 0.75rem)"),
+
+  /** Large rounded corner. */
+  large: unsafeCSS("var(--md-sys-shape-corner-value-large, 1rem)"),
+
+  /** Increased large rounded corner. */
+  largeIncreased: unsafeCSS("var(--md-sys-shape-corner-value-large-increased, 1.25rem)"),
+
+  /** Extra large rounded corner. */
+  extraLarge: unsafeCSS("var(--md-sys-shape-corner-value-extra-large, 1.75rem)"),
+
+  /** Increased extra large rounded corner. */
+  extraLargeIncreased: unsafeCSS("var(--md-sys-shape-corner-value-extra-large-increased, 2rem)"),
+
+  /** Extra extra large rounded corner. */
+  extraExtraLarge: unsafeCSS("var(--md-sys-shape-corner-value-extra-extra-large, 3rem)"),
+} as const;
+
+/** Design tokens that control shape. */
+export const ShapeToken = {
+  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,
+  },
+} as const;

package/src/shared/tokens/StateToken.ts

@@ -0,0 +1,13 @@
+import { unsafeCSS } from "lit";
+
+/** Design tokens that control state layer. */
+export const StateToken = {
+  /** 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%)"),
+} as const;

package/src/shared/tokens/TypescaleToken.ts

@@ -0,0 +1,230 @@
+import { unsafeCSS } from "lit";
+
+/** Design tokens that control typescale. */
+export const TypescaleToken = {
+  /** 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)"),
+      },
+    },
+  },
+} as const;

package/src/shared/tokens/index.ts

@@ -0,0 +1 @@
+export * from "./DesignToken";

package/src/shared/utils/getTextContent.ts

@@ -0,0 +1,31 @@
+/**
+ * Gets the text content of a given node, including slotted content.
+ * @param {Node} node The node for which to get text content.
+ * @param {boolean} [trim = false] A value indicating whether to trim content.
+ * @returns {string} The text content of `node`.
+ */
+export function getTextContent(node: Node, trim: boolean = false): string {
+  let textContent = "";
+
+  switch (node.nodeType) {
+    case Node.TEXT_NODE:
+      textContent = node.nodeValue ?? "";
+      break;
+    case Node.ELEMENT_NODE:
+      if (node instanceof HTMLSlotElement) {
+        for (const assignedNode of node.assignedNodes({ flatten: true })) {
+          textContent += getTextContent(assignedNode, trim);
+        }
+      } else {
+        for (const child of node.childNodes) {
+          textContent += getTextContent(child, trim);
+        }
+      }
+      break;
+  }
+
+  if (trim) {
+    textContent = textContent.trim();
+  }
+  return textContent;
+}

package/src/shared/utils/guid.ts

@@ -0,0 +1,11 @@
+/**
+ * Generates a new globally unique identifier (GUID).
+ * @returns {string} A new globally unique identifier.
+ */
+export function guid(): string {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}

package/src/shared/utils/hasAssignedNodes.ts

@@ -0,0 +1,8 @@
+/**
+ * Determines whether a slot has any assigned nodes.
+ * @param {HTMLSlotElement} slot The slot to test.
+ * @returns {boolean} Whether `slot` has any assigned nodes.
+ */
+export function hasAssignedNodes(slot: HTMLSlotElement): boolean {
+  return slot.assignedNodes({ flatten: true }).length > 0;
+}

package/src/shared/utils/index.ts

@@ -0,0 +1,5 @@
+export * from "./getTextContent";
+export * from "./guid";
+export * from "./hasAssignedNodes";
+export * from "./prefersReducedMotion";
+export * from "./scrollIntoViewIfNeeded";

package/src/shared/utils/prefersReducedMotion.ts

@@ -0,0 +1,9 @@
+import { isServer } from "lit";
+
+/**
+ * Determines whether reduced motion is preferred.
+ * @returns {boolean} Whether reduced motion is preferred.
+ */
+export function prefersReducedMotion(): boolean {
+  return isServer || matchMedia("(prefers-reduced-motion)").matches;
+}

package/src/shared/utils/scrollIntoViewIfNeeded.ts

@@ -0,0 +1,18 @@
+/**
+ * If needed, scrolls an element into view within a given scroll container.
+ * @param {HTMLElement} element The element to scroll into view.
+ * @param {HTMLElement} scrollContainer The scrollable container.
+ * @param {ScrollBehavior} [behavior="auto"] The scroll behavior.
+ */
+export function scrollIntoViewIfNeeded(
+  element: HTMLElement,
+  scrollContainer: HTMLElement,
+  behavior: ScrollBehavior = "auto"
+): void {
+  const containerRect = scrollContainer.getBoundingClientRect();
+  const elementRect = element.getBoundingClientRect();
+
+  if (elementRect.top < containerRect.top || elementRect.bottom > containerRect.bottom) {
+    element.scrollIntoView({ block: "nearest", behavior: behavior });
+  }
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist/src"
+  },
+  "include": ["src/**/*.ts", "**/*.mjs", "**/*.js"],
+  "exclude": []
+}