@breadstone/mosaik-themes 0.0.31 → 0.0.32

package/Themes/cosmopolitan.scss

@@ -2,7 +2,6 @@
 @use 'sass:list';
 @use 'sass:meta';
 @use 'sass:string';
-
 @mixin _generate-elevation-vars($map, $prefix, $mode) {
     @each $key, $value in $map {
         @if meta.type-of($value) == 'map' {
@@ -16,7 +15,6 @@
         }
     }
 }
-
 @mixin _generate-elevation-composite($map, $prefix, $mode) {
     @each $key, $value in $map {
         @if meta.type-of($value) == 'map' {
@@ -32,7 +30,6 @@
         }
     }
 }
-
 @mixin _remap-elevation-vars($map, $prefix, $mode) {
     @each $key, $value in $map {
         @if meta.type-of($value) == 'map' {
@@ -47,24 +44,18 @@
         }
     }
 }
-
 @function box-shadow($x: 0px, $y: 0px, $blur: 0px, $spread: 0px, $color: rgba(0, 0, 0, 0.5), $inset: false) {
     $shadow: #{$x} #{$y} #{$blur} #{$spread} #{$color};
-
     @if $inset {
         $shadow: inset $shadow;
     }
-
     @return $shadow;
 }
-
 @function box-shadow-with-color($shadows, $new-color) {
     $output: ();
-
     @each $shadow in $shadows {
         $parts: ();
         $color: null;
-
         // break apart the shadow into components
         @each $part in $shadow {
             @if type-of($part) == 'color' {
@@ -73,15 +64,12 @@
                 $parts: append($parts, $part);
             }
         }
-
         // append the new color in place of the original
         $parts: append($parts, $new-color);
         $output: append($output, $parts, comma);
     }
-
     @return $output;
 }
-
 $name: "cosmopolitan";
 $font-family: 'Noto Sans', sans-serif;
 $layout-radius: 3px;
@@ -288,11 +276,6 @@ $typography-button-font-family: $font-family;
 $elevation-key: $elevation-key-light $elevation-key-semilight $elevation-key-regular $elevation-key-semibold $elevation-key-bold $elevation-key-extrabold;
 $variant: $variant-primary;
 $size: $size-tiny $size-small $size-medium $size-large $size-giant;
-
-
-
-
-
 $_color-light: (
     primary: (
         0: $color-light-primary-0,
@@ -300,7 +283,6 @@ $_color-light: (
         500: $color-light-primary-500
     )
 );
-
 $_color-dark: (
     primary: (
         0: $color-dark-primary-0,
@@ -308,7 +290,6 @@ $_color-dark: (
         500: $color-dark-primary-500
     )
 );
-
 @mixin color-style($prefix) {
     :root,
     :host {
@@ -321,7 +302,6 @@ $_color-dark: (
                 #{'--#{$prefix}-color-light-#{$palette-key}'}: #{$palette-steps};
             }
         }
-
         // remap the light colors to the default colors
         @each $palette-key, $palette-steps in $_color-light {
             @if meta.type-of($palette-steps) == 'map' {
@@ -332,7 +312,6 @@ $_color-dark: (
                 #{'--#{$prefix}-color-light-#{$palette-key}'}: var(--#{$prefix}-color-#{$palette-key});
             }
         }
-
         &.dark,
         &[theme-mode='dark'] {
             @each $palette-key, $palette-steps in $_color-dark {
@@ -344,7 +323,6 @@ $_color-dark: (
                     #{'--#{$prefix}-color-dark-#{$palette-key}'}: #{$palette-steps};
                 }
             }
-
             // remap the dark colors to the default colors
             @each $palette-key, $palette-steps in $_color-dark {
                 @if meta.type-of($palette-steps) == 'map' {
@@ -358,38 +336,31 @@ $_color-dark: (
         }
     }
 }
-
 @function get-color($variant, $level, $mode: '') {
     @if $mode == '' {
         @return var(--#{$name}-color-#{$variant}-#{$level});
     }
-
     @return var(--#{$name}-color-#{$mode}-#{$variant}-#{$level});
 }
-
 @mixin _scrollbar-style($prefix) {
     * {
         /* Firefox */
         scrollbar-color: var(--#{$prefix}-scheme-highlight) var(--#{$prefix}-scheme-transparent);
         scrollbar-width: thin;
-
         /* Styling the scrollbar in Chrome and Safari */
         &::-webkit-scrollbar {
             width: 10px;
         }
-
         /* Set thumb color for Chrome and Safari */
         &::-webkit-scrollbar-thumb {
             background-color: var(--#{$prefix}-scheme-highlight);
         }
-
         /* Set track color for Chrome and Safari */
         &::-webkit-scrollbar-track {
             background-color: var(--#{$prefix}-scheme-transparent);
         }
     }
 }
-
 @mixin _selection-style($prefix) {
     * {
         /* Set selection color */
@@ -400,17 +371,10 @@ $_color-dark: (
         }
     }
 }
-
 @mixin common-style($prefix) {
     @include _scrollbar-style($prefix);
     @include _selection-style($prefix);
 }
-
-
-
-
-
-
 $_shadows-light: (
     none: $elevation-none,
     light: (
@@ -509,8 +473,7 @@ $_shadows-light: (
             color: $elevation-light-extrabold-color-1
         )
     )
-);
-
+);
 $_shadows-dark: (
     none: $elevation-none,
     light: (
@@ -609,16 +572,14 @@ $_shadows-dark: (
             color: $elevation-dark-extrabold-color-1
         )
     )
-);
-
+);
 @mixin elevation-style($prefix) {
     :root,
     :host {
         $mode: 'light';
         @include _generate-elevation-vars($_shadows-light, $prefix, $mode);
         @include _generate-elevation-composite($_shadows-light, $prefix, $mode);
-        @include _remap-elevation-vars($_shadows-light, $prefix, $mode);
-
+        @include _remap-elevation-vars($_shadows-light, $prefix, $mode);
         &.dark,
         &[theme-mode='dark'] {
             $mode: 'dark';
@@ -627,8 +588,7 @@ $_shadows-dark: (
             @include _remap-elevation-vars($_shadows-dark, $prefix, $mode);
         }
     }
-}
-
+}
 @function get-elevation($weight, $mode: '') {
     $elevations: (
         '': (
@@ -642,25 +602,16 @@ $_shadows-dark: (
         ),
         'light': $shadows-light,
         'dark': $shadows-dark
-    );
-
+    );
     @if (list.index($elevation-key, $weight) == false) {
         @error "Invalid weight: #{$weight}";
-    }
-
+    }
     @return var(map.get(map.get($elevations, $mode), $weight));
-}
-
-
-
-
-
-
+}
 $thickness-factor: $layout-thickness;
 $radius-factor: $layout-radius;
 $space-factor: $layout-space;
 $transition: $duration-short;
-
 @function _layout-palette($prefix, $radius, $thickness, $space, $transition: $transition) {
     $layouts: ();
     $layouts: map.merge(
@@ -687,13 +638,10 @@ $transition: $duration-short;
             '#{$prefix}-layout-transition': $transition
         )
     );
-
     @return $layouts;
 }
-
 @mixin _layout-style($prefix, $radius, $thickness, $space) {
     $palette: _layout-palette($prefix, $radius, $thickness, $space);
-
     @if list.length($palette) {
         :root,
         :host {
@@ -703,27 +651,21 @@ $transition: $duration-short;
         }
     }
 }
-
 @mixin layout-style($prefix, $radius: $radius-factor, $thickness: $thickness-factor, $space: $space-factor) {
     @include _layout-style($prefix, $radius, $thickness, $space);
 }
-
 @function get-layout($key) {
     $layouts: (
         'radius': --#{$name}-layout-radius,
         'space': --#{$name}-layout-space,
         'thickness': --#{$name}-layout-thickness
     );
-
     @if map-has-key($layouts, $key) {
         @return var(map-get($layouts, $key));
     } @else {
         @error "Invalid layout value: #{$key}";
     }
 }
-
-
-
 $scheme-light: (
     contrast: $scheme-light-contrast,
     background: $scheme-light-background,
@@ -735,7 +677,6 @@ $scheme-light: (
     semi-transparent: $scheme-light-semi-transparent,
     disabled: $scheme-light-disabled
 );
-
 $scheme-dark: (
     contrast: $scheme-dark-contrast,
     background: $scheme-dark-background,
@@ -747,31 +688,26 @@ $scheme-dark: (
     semi-transparent: $scheme-dark-semi-transparent,
     disabled: $scheme-dark-disabled
 );
-
 @mixin scheme-style($prefix) {
     :root,
     :host {
         @each $key, $value in $scheme-light {
             #{'--#{$prefix}-scheme-light-#{$key}'}: #{$value};
         }
-
         @each $key, $value in $scheme-light {
             #{'--#{$prefix}-scheme-#{$key}'}: var(--#{$prefix}-scheme-light-#{$key});
         }
-
         &.dark,
         &[theme-mode='dark'] {
             @each $key, $value in $scheme-dark {
                 #{'--#{$prefix}-scheme-dark-#{$key}'}: #{$value};
             }
-
             @each $key, $value in $scheme-dark {
                 #{'--#{$prefix}-scheme-#{$key}'}: var(--#{$prefix}-scheme-dark-#{$key});
             }
         }
     }
 }
-
 @function get-scheme($key, $mode: '') {
     $schemes: (
         '': (
@@ -805,21 +741,14 @@ $scheme-dark: (
             'disabled': --#{$name}-scheme-dark-disabled
         )
     );
-
     @if map-has-key($schemes, $mode) and map-has-key(map-get($schemes, $mode), $key) {
         @return var(map-get(map-get($schemes, $mode), $key));
     } @else {
         @error "Invalid scheme key: #{$key} or mode: #{$mode}";
     }
 }
-
-
-
-
-
 @function _typography-palette() {
-    $base-styles: (-moz-osx-font-smoothing: grayscale, -webkit-font-smoothing: antialiased, font-family: $font-family);
-
+    $base-styles: (-moz-osx-font-smoothing: grayscale, -webkit-font-smoothing: antialiased, font-family: $font-family);
     $scale-styles: (
         'typography': $base-styles,
         'typography-heading': (
@@ -849,33 +778,26 @@ $scheme-dark: (
             text-decoration: $typography-button-text-decoration,
             text-transform: $typography-button-text-transform
         )
-    );
-
+    );
     @each $style, $style-props in $scale-styles {
         // Merge base properties for all styles.
         $style-props: map.merge($base-styles, $style-props);
         // Override original styles with new styles.
         $scale-styles: map.merge($scale-styles, (#{$style}: $style-props));
-    }
-
+    }
     @return $scale-styles;
-}
-
+}
 @mixin typography-style($prefix) {
-    $typographies-map: _typography-palette();
-
+    $typographies-map: _typography-palette();
     :root,
     :host {
-        --#{$prefix}-font-family: #{$font-family};
-
+        --#{$prefix}-font-family: #{$font-family};
         @each $style in map.keys($typographies-map) {
             @if $style != 'typography' {
                 @if not map.has-key($typographies-map, $style) {
                     @error 'Invalid style specified! #{$style} does not exist. Choose one of #{map.keys($typographies-map)}';
-                }
-
-                $style-props: map.get($typographies-map, $style);
-
+                }
+                $style-props: map.get($typographies-map, $style);
                 --#{$prefix}-typography-#{$style}-font-family: #{map.get($style-props, 'font-family')};
                 --#{$prefix}-typography-#{$style}-font-size: #{map.get($style-props, 'font-size')};
                 --#{$prefix}-typography-#{$style}-line-height: #{map.get($style-props, 'line-height')};
@@ -886,23 +808,19 @@ $scheme-dark: (
                 --#{$prefix}-typography-#{$style}: #{map.get($style-props, 'font-weight')} #{map.get($style-props, 'font-size')}/#{map.get($style-props, 'line-height')} #{map.get($style-props, 'font-family')};
             }
         }
-    }
-
+    }
     @each $style in map.keys($typographies-map) {
         .#{$style} {
-            $style-props: map.get($typographies-map, $style);
-
+            $style-props: map.get($typographies-map, $style);
             @if not map.has-key($typographies-map, $style) {
                 @error 'Invalid style specified! #{$style} does not exist. Choose one of #{map.keys($typographies-map)}';
-            }
-
+            }
             @each $key, $value in $style-props {
                 #{$key}: $value;
             }
         }
     }
-}
-
+}
 @function get-typography($type, $property) {
     $properties: (
         'font-family': --#{$name}-typography-#{$type}-font-family,
@@ -912,39 +830,25 @@ $scheme-dark: (
         'letter-spacing': --#{$name}-typography-#{$type}-letter-spacing,
         'text-decoration': --#{$name}-typography-#{$type}-text-decoration,
         'text-transform': --#{$name}-typography-#{$type}-text-transform
-    );
-
+    );
     @if map-has-key($properties, $property) {
         @return var(map-get($properties, $property));
     } @else {
         @error "Invalid typography property: #{$property}";
     }
-}
-
-
-
-
-
-
-
-
-
+}
 @mixin cosmopolitan-style($radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space) {
     $theme: 'cosmopolitan';
-
     @include layout-style($theme, $radius, $thickness, $space);
     @include scheme-style($theme);
     @include color-style($theme);
     @include elevation-style($theme);
     @include typography-style($theme);
     @include common-style($theme);
-
     :host {
         @content;
     }
 }
-
-
 $absolute-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -962,8 +866,7 @@ $absolute-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $absolute-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -981,8 +884,7 @@ $absolute-item-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $accordion-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1000,8 +902,7 @@ $accordion-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $alert-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1019,8 +920,7 @@ $alert-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $anchor-props: (
   'font-family': var(--cosmopolitan-typography-content-font-family),
   'font-size': var(--cosmopolitan-typography-content-font-size),
@@ -1041,8 +941,7 @@ $anchor-props: (
   'background-color': var(--cosmopolitan-scheme-background),
   'border-color': var(--cosmopolitan-scheme-highlight),
   'foreground-color': var(--cosmopolitan-scheme-foreground)
-);
-
+);
 $app-props: (
   'font-family': var(--cosmopolitan-typography-body1-font-family),
   'font-size': var(--cosmopolitan-typography-body1-font-size),
@@ -1062,8 +961,7 @@ $app-props: (
   'translate': "unset",
   'background-color': var(--cosmopolitan-scheme-background),
   'foreground-color': var(--cosmopolitan-scheme-foreground)
-);
-
+);
 $app-header-props: (
   'font-family': var(--cosmopolitan-typography-headline6-font-family),
   'font-size': var(--cosmopolitan-typography-headline6-font-size),
@@ -1087,8 +985,7 @@ $app-header-props: (
   'border-style': solid,
   'border-width': var(--cosmopolitan-layout-thickness),
   'foreground-color': var(--cosmopolitan-scheme-foreground)
-);
-
+);
 $auto-complete-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1117,8 +1014,7 @@ $auto-complete-box-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $avatar-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1153,8 +1049,7 @@ $avatar-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $avatar-group-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1183,8 +1078,7 @@ $avatar-group-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $back-top-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1202,8 +1096,7 @@ $back-top-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $backdrop-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1222,8 +1115,7 @@ $backdrop-props: (
   'transition-property': opacity,
   'translate': "unset",
   'background-color': var(--cosmopolitan-scheme-semi-transparent)
-);
-
+);
 $badge-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1248,8 +1140,7 @@ $badge-props: (
   'border-width': unset,
   'foreground-color': unset,
   'size': unset
-);
-
+);
 $banner-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1274,8 +1165,7 @@ $banner-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $banner-header-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1296,8 +1186,7 @@ $banner-header-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': unset
-);
-
+);
 $banner-sub-header-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1318,8 +1207,7 @@ $banner-sub-header-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': unset
-);
-
+);
 $bottom-sheet-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1342,8 +1230,7 @@ $bottom-sheet-props: (
   'border-width': unset,
   'foreground-color': unset,
   'translate-y': unset
-);
-
+);
 $box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1369,8 +1256,7 @@ $box-props: (
   'foreground-color': unset,
   'height': auto,
   'width': auto
-);
-
+);
 $breadcrumb-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1388,8 +1274,7 @@ $breadcrumb-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $breadcrumb-item-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1407,8 +1292,7 @@ $breadcrumb-item-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $button-props: (
   'font-family': var(--cosmopolitan-typography-button-font-family),
   'font-size': var(--cosmopolitan-typography-button-font-size),
@@ -1436,8 +1320,7 @@ $button-props: (
   'height': auto,
   'progress-thickness': var(--cosmopolitan-layout-thickness),
   'width': auto
-);
-
+);
 $button-group-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1461,8 +1344,7 @@ $button-group-props: (
   'border-style': unset,
   'border-width': unset,
   'foreground-color': unset
-);
-
+);
 $calendar-props: (
   'font-family': var(--cosmopolitan-typography-content-font-family),
   'font-size': var(--cosmopolitan-typography-content-font-size),
@@ -1487,8 +1369,7 @@ $calendar-props: (
   'border-width': var(--cosmopolitan-layout-thickness),
   'divider-height': 1px,
   'foreground-color': var(--cosmopolitan-scheme-foreground)
-);
-
+);
 $calendar-days-view-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1506,8 +1387,7 @@ $calendar-days-view-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $calendar-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1531,8 +1411,7 @@ $calendar-header-props: (
   'border-style': solid,
   'border-width': var(--cosmopolitan-layout-thickness),
   'foreground-color': var(--cosmopolitan-scheme-lowlight)
-);
-
+);
 $calendar-item-props: (
   'font-family': var(--cosmopolitan-font-family),
   'font-size': var(--cosmopolitan-typography-content-font-size),
@@ -1556,8 +1435,7 @@ $calendar-item-props: (
   'border-style': solid,
   'border-width': 0,
   'foreground-color': var(--cosmopolitan-scheme-foreground)
-);
-
+);
 $calendar-months-view-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1575,8 +1453,7 @@ $calendar-months-view-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $calendar-sub-header-props: (
   'font-family': "unset",
   'font-size': 18px,
@@ -1602,8 +1479,7 @@ $calendar-sub-header-props: (
   'font': var(--calendar-sub-header-font-weight) var(--calendar-sub-header-font-size) / var(--calendar-sub-header-line-height) var(--calendar-sub-header-font-family),
   'foreground-color': var(--cosmopolitan-scheme-foreground),
   'line-height': 22px
-);
-
+);
 $calendar-years-view-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1621,8 +1497,7 @@ $calendar-years-view-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $camera-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1643,8 +1518,7 @@ $camera-props: (
   'background-color': unset,
   'border-radius': unset,
   'foreground-color': unset
-);
-
+);
 $card-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1674,8 +1548,7 @@ $card-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $card-actions-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1693,8 +1566,7 @@ $card-actions-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $card-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1712,8 +1584,7 @@ $card-content-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $card-footer-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1731,8 +1602,7 @@ $card-footer-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $card-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1750,8 +1620,7 @@ $card-header-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $card-sub-title-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1772,8 +1641,7 @@ $card-sub-title-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': unset
-);
-
+);
 $card-title-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1794,8 +1662,7 @@ $card-title-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': unset
-);
-
+);
 $carousel-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1813,8 +1680,7 @@ $carousel-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $carousel2-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1832,8 +1698,7 @@ $carousel2-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $carousel-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1851,8 +1716,7 @@ $carousel-item-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $carousel-item2-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1870,8 +1734,7 @@ $carousel-item2-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $cell-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1896,8 +1759,7 @@ $cell-props: (
   'sub-font-text-decoration': var(--cosmopolitan-typography-content-text-decoration),
   'sub-font-text-transform': var(--cosmopolitan-typography-content-text-transform),
   'sub-font-weight': var(--cosmopolitan-typography-content-font-weight)
-);
-
+);
 $cell-group-props: (
   'font-family': var(--cosmopolitan-font-family),
   'font-size': var(--cosmopolitan-typography-content-font-size),
@@ -1921,8 +1783,7 @@ $cell-group-props: (
   'border-width': var(--cosmopolitan-layout-thickness),
   'inline-end': 0,
   'inline-start': calc(var(--joy-layout-space)*2)
-);
-
+);
 $chart-props: (
   'font-family': var(--cosmopolitan-typography-header-font-family),
   'font-size': var(--cosmopolitan-typography-header-font-size),
@@ -1942,8 +1803,7 @@ $chart-props: (
   'translate': "unset",
   'background-color': var(--cosmopolitan-scheme-background),
   'foreground-color': var(--cosmopolitan-scheme-foreground)
-);
-
+);
 $chat-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1969,8 +1829,7 @@ $chat-props: (
   'focus-ring-outward-offset': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $chat-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1989,8 +1848,7 @@ $chat-header-props: (
   'transition-property': unset,
   'translate': "unset",
   'height': unset
-);
-
+);
 $chat-input-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2009,8 +1867,7 @@ $chat-input-props: (
   'transition-property': unset,
   'translate': "unset",
   'emoji-background-color': unset
-);
-
+);
 $chat-marker-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2035,8 +1892,7 @@ $chat-marker-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $chat-message-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2061,8 +1917,7 @@ $chat-message-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $chat-message-avatar-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2080,8 +1935,7 @@ $chat-message-avatar-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $chat-message-divider-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2099,8 +1953,7 @@ $chat-message-divider-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $check-box-group-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2125,8 +1978,7 @@ $check-box-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $check-box-props: (
   'font-family': var(--cosmopolitan-font-family),
   'font-size': var(--cosmopolitan-typography-content-font-size),
@@ -2151,8 +2003,7 @@ $check-box-props: (
   'border-width': var(--cosmopolitan-layout-thickness),
   'foreground-color': var(--cosmopolitan-scheme-foreground),
   'shadow': var(--cosmopolitan-elevation-none)
-);
-
+);
 $checkmark-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2181,8 +2032,7 @@ $checkmark-props: (
   'shadow': unset,
   'thickness': unset,
   'width': unset
-);
-
+);
 $chip-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2209,8 +2059,7 @@ $chip-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $chip-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2236,8 +2085,7 @@ $chip-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $choice-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2265,8 +2113,7 @@ $choice-props: (
   'focus-ring-outward-offset': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $choice-group-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2291,8 +2138,7 @@ $choice-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $choice-group-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2317,8 +2163,7 @@ $choice-group-header-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $code-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2337,8 +2182,7 @@ $code-props: (
   'transition-property': unset,
   'translate': "unset",
   'foreground-color': unset
-);
-
+);
 $color-area-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2356,8 +2200,7 @@ $color-area-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $color-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2383,8 +2226,7 @@ $color-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $color-picker-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2409,8 +2251,7 @@ $color-picker-props: (
   'border-width': unset,
   'foreground-color': unset,
   'size': unset
-);
-
+);
 $color-slider-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2435,8 +2276,7 @@ $color-slider-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $color-swatch-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2461,8 +2301,7 @@ $color-swatch-props: (
   'border-width': unset,
   'foreground-color': unset,
   'size': unset
-);
-
+);
 $color-swatch-group-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2487,8 +2326,7 @@ $color-swatch-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $color-thumb-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2513,8 +2351,7 @@ $color-thumb-props: (
   'border-width': unset,
   'foreground-color': unset,
   'size': unset
-);
-
+);
 $combo-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2532,8 +2369,7 @@ $combo-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $combo-item-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2558,8 +2394,7 @@ $combo-item-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $comment-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2579,8 +2414,7 @@ $comment-props: (
   'translate': "unset",
   'inner-gap': unset,
   'nested-indent': unset
-);
-
+);
 $compound-button-props: (
   'font-family': var(--cosmopolitan-typography-button-font-family),
   'font-size': var(--cosmopolitan-typography-button-font-size),
@@ -2607,8 +2441,7 @@ $compound-button-props: (
   'height': auto,
   'shadow': var(--cosmopolitan-elevation-none),
   'width': auto
-);
-
+);
 $content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2626,8 +2459,7 @@ $content-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $cookies-consent-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2645,8 +2477,7 @@ $cookies-consent-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $data-list-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2664,8 +2495,7 @@ $data-list-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $data-table-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2683,8 +2513,7 @@ $data-table-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $date-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2710,8 +2539,7 @@ $date-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $date-time-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2737,8 +2565,7 @@ $date-time-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $dialog-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2768,8 +2595,7 @@ $dialog-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $dialog-actions-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2787,8 +2613,7 @@ $dialog-actions-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dialog-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2806,8 +2631,7 @@ $dialog-content-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dialog-footer-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2825,8 +2649,7 @@ $dialog-footer-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dialog-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2844,8 +2667,7 @@ $dialog-header-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dialog-header-sub-text-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2866,8 +2688,7 @@ $dialog-header-sub-text-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': unset
-);
-
+);
 $dialog-header-text-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2888,8 +2709,7 @@ $dialog-header-text-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': unset
-);
-
+);
 $dialog-host-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2907,8 +2727,7 @@ $dialog-host-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $disclosure-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2926,8 +2745,7 @@ $disclosure-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $divider-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2953,8 +2771,7 @@ $divider-props: (
   'foreground-color': unset,
   'shadow': unset,
   'thickness': var(--cosmopolitan-layout-thickness)
-);
-
+);
 $dot-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2980,8 +2797,7 @@ $dot-props: (
   'foreground-color': unset,
   'shadow': unset,
   'size': unset
-);
-
+);
 $drawer-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3008,8 +2824,7 @@ $drawer-props: (
   'height': unset,
   'shadow': unset,
   'width': unset
-);
-
+);
 $drawer-container-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3027,8 +2842,7 @@ $drawer-container-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $drawer-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3046,8 +2860,7 @@ $drawer-content-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $drop-down-button-props: (
   'font-family': var(--cosmopolitan-font-family),
   'font-size': var(--cosmopolitan-typography-button-font-size),
@@ -3075,8 +2888,7 @@ $drop-down-button-props: (
   'line-height': calc(var(--dropdown-button-font-line-height)  - 4px),
   'shadow': var(--cosmopolitan-elevation-none),
   'transform': none
-);
-
+);
 $drop-zone-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3094,8 +2906,7 @@ $drop-zone-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dropdown-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3113,8 +2924,7 @@ $dropdown-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $elevation-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3132,8 +2942,7 @@ $elevation-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $emoji-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3152,8 +2961,7 @@ $emoji-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': unset
-);
-
+);
 $empty-state-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3179,8 +2987,7 @@ $empty-state-props: (
   'header-font-text-decoration': unset,
   'header-font-text-transform': unset,
   'header-font-weight': unset
-);
-
+);
 $error-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3205,8 +3012,7 @@ $error-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $error-state-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3232,8 +3038,7 @@ $error-state-props: (
   'header-font-text-decoration': unset,
   'header-font-text-transform': unset,
   'header-font-weight': unset
-);
-
+);
 $expandable-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3251,8 +3056,7 @@ $expandable-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $expander-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3278,8 +3082,7 @@ $expander-props: (
   'divider-height': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $expander-group-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3304,8 +3107,7 @@ $expander-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $expander-header-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3326,8 +3128,7 @@ $expander-header-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': unset
-);
-
+);
 $expander-sub-header-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3348,8 +3149,7 @@ $expander-sub-header-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': unset
-);
-
+);
 $file-picker-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3374,8 +3174,7 @@ $file-picker-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $file-upload-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3400,8 +3199,7 @@ $file-upload-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $file-upload-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3426,8 +3224,7 @@ $file-upload-item-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $flip-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3445,8 +3242,7 @@ $flip-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $floating-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3474,8 +3270,7 @@ $floating-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $floating-action-button-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3495,8 +3290,7 @@ $floating-action-button-props: (
   'translate': "unset",
   'background-color': unset,
   'border-radius': unset
-);
-
+);
 $floating-action-button-group-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3514,8 +3308,7 @@ $floating-action-button-group-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $floating-trigger-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3533,8 +3326,7 @@ $floating-trigger-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $focus-ring-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3566,8 +3358,7 @@ $focus-ring-props: (
   'width': unset,
   'x': unset,
   'y': unset
-);
-
+);
 $footer-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3592,8 +3383,7 @@ $footer-props: (
   'border-width': unset,
   'foreground-color': unset,
   'inset': unset
-);
-
+);
 $footer-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3611,8 +3401,7 @@ $footer-item-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $footer-item-group-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3630,8 +3419,7 @@ $footer-item-group-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $form-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3650,8 +3438,7 @@ $form-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': unset
-);
-
+);
 $form-field-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3670,8 +3457,7 @@ $form-field-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': unset
-);
-
+);
 $grid-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3689,8 +3475,7 @@ $grid-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $grid-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3708,8 +3493,7 @@ $grid-item-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $helmet-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3727,8 +3511,7 @@ $helmet-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $hint-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3753,8 +3536,7 @@ $hint-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $icon-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3780,8 +3562,7 @@ $icon-props: (
   'foreground-color': unset,
   'shadow': unset,
   'size': unset
-);
-
+);
 $image-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3814,8 +3595,7 @@ $image-props: (
   'legend-font-text-transform': unset,
   'legend-font-weight': unset,
   'shadow': unset
-);
-
+);
 $ink-bar-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3838,8 +3618,7 @@ $ink-bar-props: (
   'border-radius': unset,
   'foreground-color': unset,
   'thickness': unset
-);
-
+);
 $jumbtron-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3864,8 +3643,7 @@ $jumbtron-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $jumbtron-header-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3886,8 +3664,7 @@ $jumbtron-header-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': unset
-);
-
+);
 $jumbtron-sub-header-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3908,8 +3685,7 @@ $jumbtron-sub-header-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': unset
-);
-
+);
 $kbd-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3934,8 +3710,7 @@ $kbd-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $kbd-shortcut-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3953,8 +3728,7 @@ $kbd-shortcut-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $light-chain-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3972,8 +3746,7 @@ $light-chain-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $list-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3998,8 +3771,7 @@ $list-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $list-item-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4024,8 +3796,7 @@ $list-item-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $list-item-group-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4050,8 +3821,7 @@ $list-item-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $marquee-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4071,8 +3841,7 @@ $marquee-props: (
   'translate': "unset",
   'direction': unset,
   'speed': unset
-);
-
+);
 $masonry-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4091,8 +3860,7 @@ $masonry-props: (
   'transition-property': unset,
   'translate': "unset",
   'columns': 1
-);
-
+);
 $menu-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4117,8 +3885,7 @@ $menu-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $menu-item-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4142,9 +3909,12 @@ $menu-item-props: (
   'border-style': unset,
   'border-width': unset,
   'foreground-color': unset,
-  'shadow': unset
-);
-
+  'shadow': unset,
+  'height': unset,
+  'indent-color': var(--cosmopolitan-scheme-highlight),
+  'indent-size': var(--cosmopolitan-layout-thickness),
+  'indent-offset': calc(var(--cosmopolitan-layout-space) * 2)
+);
 $menu-item-group-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4176,8 +3946,7 @@ $menu-item-group-props: (
   'header-font-text-transform': unset,
   'header-font-weight': unset,
   'shadow': unset
-);
-
+);
 $message-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4195,8 +3964,7 @@ $message-box-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $meter-bar-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4214,8 +3982,7 @@ $meter-bar-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $meter-ring-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4233,8 +4000,7 @@ $meter-ring-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $number-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4253,8 +4019,7 @@ $number-props: (
   'transition-property': unset,
   'translate': "unset",
   'alignment': unset
-);
-
+);
 $number-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4280,8 +4045,7 @@ $number-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $number-counter-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4305,8 +4069,7 @@ $number-counter-props: (
   'n': unset,
   'timing': unset,
   'to': unset
-);
-
+);
 $page-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4324,8 +4087,7 @@ $page-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $page-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4347,8 +4109,7 @@ $page-content-props: (
   'left': unset,
   'max-width': unset,
   'width': unset
-);
-
+);
 $page-header-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4370,8 +4131,7 @@ $page-header-props: (
   'border-color': unset,
   'foreground-color': unset,
   'inset': unset
-);
-
+);
 $page-menu-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4398,8 +4158,7 @@ $page-menu-props: (
   'height': unset,
   'line-height': unset,
   'shadow': unset
-);
-
+);
 $page-pre-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4418,8 +4177,7 @@ $page-pre-content-props: (
   'transition-property': unset,
   'translate': "unset",
   'inset': unset
-);
-
+);
 $page-pre-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4438,8 +4196,7 @@ $page-pre-header-props: (
   'transition-property': unset,
   'translate': "unset",
   'inset': unset
-);
-
+);
 $paginator-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4458,8 +4215,7 @@ $paginator-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': unset
-);
-
+);
 $password-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4485,8 +4241,7 @@ $password-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $pattern-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4505,8 +4260,7 @@ $pattern-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': unset
-);
-
+);
 $persona-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4531,8 +4285,7 @@ $persona-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $perspective-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4550,8 +4303,7 @@ $perspective-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $pin-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4577,8 +4329,7 @@ $pin-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $popup-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4607,8 +4358,7 @@ $popup-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $portal-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4626,8 +4376,7 @@ $portal-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $portal-projection-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4645,8 +4394,7 @@ $portal-projection-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $progress-bar-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4664,8 +4412,7 @@ $progress-bar-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $progress-ring-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4691,8 +4438,7 @@ $progress-ring-props: (
   'fill-color': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $qr-code-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4712,8 +4458,7 @@ $qr-code-props: (
   'translate': "unset",
   'background-color': var(--cosmopolitan-scheme-background),
   'foreground-color': var(--cosmopolitan-scheme-foreground)
-);
-
+);
 $radio-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4738,8 +4483,7 @@ $radio-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $radio-group-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4764,8 +4508,7 @@ $radio-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $rating-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4790,8 +4533,7 @@ $rating-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $repeat-button-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4818,8 +4560,7 @@ $repeat-button-props: (
   'foreground-color': unset,
   'line-height': unset,
   'shadow': unset
-);
-
+);
 $resize-adorner-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4843,8 +4584,7 @@ $resize-adorner-props: (
   'border-width': var(--cosmopolitan-layout-thickness),
   'thumb-background-color': var(--cosmopolitan-scheme-highlight),
   'thumb-border-radius': var(--cosmopolitan-layout-thickness)
-);
-
+);
 $ribbon-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4870,8 +4610,7 @@ $ribbon-props: (
   'font': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $rich-text-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4897,8 +4636,7 @@ $rich-text-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $rich-text-box-toolbox-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4923,8 +4661,7 @@ $rich-text-box-toolbox-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $ripple-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4943,8 +4680,7 @@ $ripple-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': unset
-);
-
+);
 $router-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4962,8 +4698,7 @@ $router-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $router-anchor-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4981,8 +4716,7 @@ $router-anchor-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $router-link-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5000,8 +4734,7 @@ $router-link-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $router-outlet-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5019,8 +4752,7 @@ $router-outlet-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $scale-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5038,8 +4770,7 @@ $scale-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $scroll-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5057,8 +4788,7 @@ $scroll-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $search-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5084,8 +4814,7 @@ $search-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $segment-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5110,8 +4839,7 @@ $segment-props: (
   'border-width': unset,
   'foreground-color': unset,
   'indicator-height': unset
-);
-
+);
 $segment-item-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5146,8 +4874,7 @@ $segment-item-props: (
   'color-hover': unset,
   'padding-end': unset,
   'padding-start': unset
-);
-
+);
 $select-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5172,8 +4899,7 @@ $select-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $select-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5198,8 +4924,7 @@ $select-item-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $select-item-group-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5224,8 +4949,7 @@ $select-item-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $signature-pad-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5250,8 +4974,7 @@ $signature-pad-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $skeleton-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5275,8 +4998,7 @@ $skeleton-props: (
   'border-style': unset,
   'border-width': unset,
   'foreground-color': unset
-);
-
+);
 $slider-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5337,8 +5059,7 @@ $slider-props: (
   'tooltip-transition-mode': unset,
   'tooltip-transition-property': unset,
   'track-size': unset
-);
-
+);
 $slider2-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5356,8 +5077,7 @@ $slider2-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $slider2thumb-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5376,8 +5096,7 @@ $slider2thumb-props: (
   'transition-property': unset,
   'translate': "unset",
   'size': unset
-);
-
+);
 $spacer-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5395,8 +5114,7 @@ $spacer-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $split-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5424,8 +5142,7 @@ $split-props: (
   'thumb-border-color': var(--cosmopolitan-scheme-highlight),
   'thumb-border-radius': var(--cosmopolitan-layout-radius),
   'thumb-foreground-color': var(--cosmopolitan-scheme-foreground)
-);
-
+);
 $split-button-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5452,8 +5169,7 @@ $split-button-props: (
   'foreground-color': unset,
   'line-height': unset,
   'shadow': unset
-);
-
+);
 $stack-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5471,8 +5187,7 @@ $stack-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $sticky-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5492,8 +5207,7 @@ $sticky-props: (
   'translate': "unset",
   'left': unset,
   'top': unset
-);
-
+);
 $success-state-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5519,8 +5233,7 @@ $success-state-props: (
   'header-font-text-decoration': unset,
   'header-font-text-transform': unset,
   'header-font-weight': unset
-);
-
+);
 $summary-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5538,8 +5251,7 @@ $summary-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $swipe-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5557,8 +5269,7 @@ $swipe-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $tab-props: (
   'font-family': var(--cosmopolitan-font-family),
   'font-size': var(--cosmopolitan-typography-content-font-size),
@@ -5590,8 +5301,7 @@ $tab-props: (
   'strip-padding-left': 0,
   'strip-padding-right': 0,
   'strip-padding-top': 0
-);
-
+);
 $tab-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5612,8 +5322,7 @@ $tab-item-props: (
   'border-radius': unset,
   'border-style': unset,
   'border-width': unset
-);
-
+);
 $tab-panel-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5632,8 +5341,7 @@ $tab-panel-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': unset
-);
-
+);
 $tab-strip-props: (
   'font-family': var(--cosmopolitan-font-family),
   'font-size': var(--cosmopolitan-typography-button-font-size),
@@ -5657,8 +5365,7 @@ $tab-strip-props: (
   'border-style': solid,
   'border-width': 0,
   'foreground-color': unset
-);
-
+);
 $tab-strip-item-props: (
   'font-family': var(--cosmopolitan-font-family),
   'font-size': var(--cosmopolitan-typography-button-font-size),
@@ -5685,8 +5392,7 @@ $tab-strip-item-props: (
   'shadow': var(--cosmopolitan-elevation-none),
   'size': 56px,
   'thickness': 4px
-);
-
+);
 $table-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5711,8 +5417,7 @@ $table-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $table-body-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5737,8 +5442,7 @@ $table-body-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $table-cell-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5763,8 +5467,7 @@ $table-cell-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $table-footer-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5789,8 +5492,7 @@ $table-footer-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $table-header-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5815,8 +5517,7 @@ $table-header-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $table-row-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5841,8 +5542,7 @@ $table-row-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $text-props: (
   'font-family': var(--cosmopolitan-font-family),
   'font-size': var(--cosmopolitan-typography-content-font-size),
@@ -5869,8 +5569,7 @@ $text-props: (
   'font-transform': var(--cosmopolitan-typography-content-text-transform),
   'foreground-color': var(--cosmopolitan-scheme-foreground),
   'shadow': var(--cosmopolitan-elevation-none)
-);
-
+);
 $text-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5896,8 +5595,7 @@ $text-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $text-format-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5915,8 +5613,7 @@ $text-format-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $tick-bar-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5945,8 +5642,7 @@ $tick-bar-props: (
   'tick-size': unset,
   'tick-text-gap': unset,
   'tick-width': unset
-);
-
+);
 $tile-list-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5965,8 +5661,7 @@ $tile-list-props: (
   'transition-property': unset,
   'translate': "unset",
   'gutter-size': unset
-);
-
+);
 $tile-list-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5991,8 +5686,7 @@ $tile-list-item-props: (
   'dragover-border-color': unset,
   'header-bg-color': unset,
   'header-padding': unset
-);
-
+);
 $time-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6018,8 +5712,7 @@ $time-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $title-bar-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6037,8 +5730,7 @@ $title-bar-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $title-layout-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6057,8 +5749,7 @@ $title-layout-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': unset
-);
-
+);
 $toast-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6085,8 +5776,7 @@ $toast-props: (
   'foreground-color': unset,
   'progress-ring-fill-color': unset,
   'shadow': unset
-);
-
+);
 $toggle-button-props: (
   'font-family': var(--cosmopolitan-typography-button-font-family),
   'font-size': var(--cosmopolitan-typography-button-font-size),
@@ -6114,8 +5804,7 @@ $toggle-button-props: (
   'line-height': calc(var(--toggle-button-font-line-height)  - 4px),
   'shadow': var(--cosmopolitan-elevation-none),
   'width': auto
-);
-
+);
 $toggle-switch-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6140,8 +5829,7 @@ $toggle-switch-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $toggletip-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6159,8 +5847,7 @@ $toggletip-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $toolbar-props: (
   'font-family': unset,
   'font-size': 24px,
@@ -6191,8 +5878,7 @@ $toolbar-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $tooltip-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6218,8 +5904,7 @@ $tooltip-props: (
   'foreground-color': unset,
   'max-width': unset,
   'shadow': unset
-);
-
+);
 $tree-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6237,8 +5922,7 @@ $tree-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $tree-item-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6262,9 +5946,11 @@ $tree-item-props: (
   'border-style': unset,
   'border-width': unset,
   'foreground-color': unset,
-  'shadow': unset
-);
-
+  'shadow': unset,
+  'indent-color': unset,
+  'indent-size': unset,
+  'indent-offset': unset
+);
 $up-down-spinner-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6282,8 +5968,7 @@ $up-down-spinner-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $video-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6316,8 +6001,7 @@ $video-props: (
   'legend-font-text-transform': unset,
   'legend-font-weight': unset,
   'shadow': unset
-);
-
+);
 $virtualize-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6335,8 +6019,7 @@ $virtualize-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $wizard-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6355,8 +6038,7 @@ $wizard-props: (
   'transition-property': unset,
   'translate': "unset",
   'border-color': unset
-);
-
+);
 $wizard-step-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6374,8 +6056,7 @@ $wizard-step-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $wrap-props: (
   'font-family': "unset",
   'font-size': "unset",