@breadstone/mosaik-themes 0.0.30 → 0.0.32

package/Themes/joy.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: "joy";
 $font-family: Nunito, sans-serif;
 $layout-radius: 12px;
@@ -576,11 +564,6 @@ $appearance: $appearance-default $appearance-outline $appearance-plain $appearan
 $variant: $variant-primary $variant-secondary $variant-tertiary $variant-danger $variant-warning $variant-success $variant-info $variant-highlight $variant-neutral;
 $size: $size-tiny $size-small $size-medium $size-large $size-giant;
 $duration: $duration-short $duration-medium $duration-long;
-
-
-
-
-
 $_color-light: (
     primary: (
         0: $color-light-primary-0,
@@ -700,7 +683,6 @@ $_color-light: (
         900: $color-light-neutral-900
     )
 );
-
 $_color-dark: (
     primary: (
         0: $color-dark-primary-0,
@@ -820,7 +802,6 @@ $_color-dark: (
         900: $color-dark-neutral-900
     )
 );
-
 @mixin color-style($prefix) {
     :root,
     :host {
@@ -833,7 +814,6 @@ $_color-dark: (
                 #{'--#{$prefix}-color-light-#{$key}'}: #{$value};
             }
         }
-
         // remap the light colors to the default colors
         @each $key, $value in $_color-light {
             @if meta.type-of($value) == 'map' {
@@ -844,7 +824,6 @@ $_color-dark: (
                 #{'--#{$prefix}-color-light-#{$key}'}: var(--#{$prefix}-color-#{$key});
             }
         }
-
         &.dark,
         &[theme-mode='dark'] {
             @each $key, $value in $_color-dark {
@@ -856,7 +835,6 @@ $_color-dark: (
                     #{'--#{$prefix}-color-dark-#{$key}'}: #{$value};
                 }
             }
-
             // remap the dark colors to the default colors
             @each $key, $value in $_color-dark {
                 @if meta.type-of($value) == 'map' {
@@ -870,7 +848,6 @@ $_color-dark: (
         }
     }
 }
-
 @function get-color($variant, $level, $mode: '') {
     @if (list.index($variant, $variant) == false) {
         @error "Invalid variant: #{$variant}";
@@ -878,34 +855,28 @@ $_color-dark: (
         @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 */
@@ -916,23 +887,13 @@ $_color-dark: (
         }
     }
 }
-
 @mixin common-style($prefix) {
     @include _scrollbar-style($prefix);
     @include _selection-style($prefix);
 }
-
-
-
 @function get-duration($duration) {
     @return var(--#{$name}-duration-#{$duration});
 }
-
-
-
-
-
-
 $_shadows-light: (
     none: $elevation-none,
     light: (
@@ -1031,8 +992,7 @@ $_shadows-light: (
             color: $elevation-light-extrabold-color-1
         )
     )
-);
-
+);
 $_shadows-dark: (
     none: $elevation-none,
     light: (
@@ -1131,16 +1091,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';
@@ -1149,8 +1107,7 @@ $_shadows-dark: (
             @include _remap-elevation-vars($_shadows-dark, $prefix, $mode);
         }
     }
-}
-
+}
 @function get-elevation($type, $mode: '') {
     $elevations: (
         '': (
@@ -1164,20 +1121,12 @@ $_shadows-dark: (
         ),
         'light': $_shadows-light,
         'dark': $_shadows-dark
-    );
-
+    );
     @if (list.index($elevation-key, $type) == null) {
         @error "Invalid type: #{$type}";
-    }
-
+    }
     @return var(map.get(map.get($elevations, $mode), $type));
-}
-
-
-
-
-
-
+}
 @mixin layout-style($prefix, $radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space, $transition: $duration-short) {
     $layouts: ();
     $layouts: map.merge(
@@ -1204,7 +1153,6 @@ $_shadows-dark: (
             '#{$prefix}-layout-transition': $transition
         )
     );
-
     @if list.length($layouts) {
         :root,
         :host {
@@ -1214,23 +1162,18 @@ $_shadows-dark: (
         }
     }
 }
-
 @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: (
     background: $scheme-light-background,
     foreground: $scheme-light-foreground,
@@ -1243,7 +1186,6 @@ $_scheme-light: (
     contrast: $scheme-light-contrast,
     selection: $scheme-light-selection
 );
-
 $_scheme-dark: (
     background: $scheme-dark-background,
     foreground: $scheme-dark-foreground,
@@ -1256,36 +1198,30 @@ $_scheme-dark: (
     contrast: $scheme-dark-contrast,
     selection: $scheme-dark-selection
 );
-
 @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: '') {
     @if ($mode == '') {
         $mode: '';
     }
-
     $schemes: (
         '': (
             'background': --#{$name}-scheme-background,
@@ -1324,7 +1260,6 @@ $_scheme-dark: (
             'selection': --#{$name}-scheme-dark-selection
         )
     );
-
     @if map.has-key($schemes, $mode) {
         @if (map.has-key(map.get($schemes, $mode), $key)) {
             @return var(map.get(map.get($schemes, $mode), $key));
@@ -1335,20 +1270,11 @@ $_scheme-dark: (
         @error "Invalid scheme mode: #{$mode}";
     }
 }
-
-
-
 @function get-size($size) {
     @return var(--#{$name}-size-#{$size});
 }
-
-
-
-
-
 @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-headline1': (
@@ -1468,33 +1394,26 @@ $_scheme-dark: (
             text-decoration: $typography-overline-text-decoration,
             text-transform: $typography-overline-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}-#{$style}-font-family: #{map.get($style-props, 'font-family')};
                 --#{$prefix}-#{$style}-font-size: #{map.get($style-props, 'font-size')};
                 --#{$prefix}-#{$style}-line-height: #{map.get($style-props, 'line-height')};
@@ -1505,23 +1424,19 @@ $_scheme-dark: (
                 --#{$prefix}-#{$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,
@@ -1531,39 +1446,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 joy-style($radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space) {
     $theme: 'joy';
-
     @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",
@@ -1581,8 +1482,7 @@ $absolute-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $absolute-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1600,8 +1500,7 @@ $absolute-item-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $accordion-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1619,8 +1518,7 @@ $accordion-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $alert-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1638,8 +1536,7 @@ $alert-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $anchor-props: (
   'font-family': var(--joy-typography-button-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -1660,8 +1557,7 @@ $anchor-props: (
   'background-color': var(--joy-scheme-background),
   'border-color': var(--joy-scheme-highlight),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $app-props: (
   'font-family': var(--joy-typography-body1-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -1681,8 +1577,7 @@ $app-props: (
   'translate': "unset",
   'background-color': var(--joy-scheme-background),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $app-header-props: (
   'font-family': var(--joy-typography-headline6-font-family),
   'font-size': var(--joy-typography-headline6-font-size),
@@ -1706,8 +1601,7 @@ $app-header-props: (
   'border-style': solid,
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $auto-complete-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1737,8 +1631,7 @@ $auto-complete-box-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $avatar-props: (
   'font-family': var(--joy-font-family),
   'font-size': 32px,
@@ -1773,8 +1666,7 @@ $avatar-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $avatar-group-props: (
   'font-family': var(--joy-font-family),
   'font-size': 12px,
@@ -1803,8 +1695,7 @@ $avatar-group-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $back-top-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1822,8 +1713,7 @@ $back-top-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $backdrop-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1842,8 +1732,7 @@ $backdrop-props: (
   'transition-property': opacity,
   'translate': "unset",
   'background-color': var(--joy-scheme-semi-transparent)
-);
-
+);
 $badge-props: (
   'font-family': var(--joy-font-family),
   'font-size': 32px,
@@ -1868,8 +1757,7 @@ $badge-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
   'size': unset
-);
-
+);
 $banner-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -1894,8 +1782,7 @@ $banner-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $banner-header-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -1916,8 +1803,7 @@ $banner-header-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $banner-sub-header-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body2-font-size),
@@ -1938,8 +1824,7 @@ $banner-sub-header-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $bottom-sheet-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -1961,8 +1846,7 @@ $bottom-sheet-props: (
   'border-color': var(--joy-scheme-highlight),
   'border-width': 2px,
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1985,9 +1869,10 @@ $box-props: (
   'border-radius': 0,
   'border-style': solid,
   'border-width': 0,
-  'foreground-color': unset
-);
-
+  'foreground-color': unset,
+  'height': auto,
+  'width': auto
+);
 $breadcrumb-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2005,8 +1890,7 @@ $breadcrumb-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $breadcrumb-item-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2024,8 +1908,7 @@ $breadcrumb-item-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $button-props: (
   'font-family': var(--joy-typography-button-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -2048,12 +1931,12 @@ $button-props: (
   'border-radius': var(--joy-layout-radius),
   'border-style': solid,
   'border-width': var(--joy-layout-thickness),
+  'focus-ring-color': var(--joy-scheme-highlight),
   'foreground-color': var(--joy-scheme-foreground),
   'height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
   'progress-thickness': var(--joy-layout-thickness),
   'width': auto
-);
-
+);
 $button-group-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -2077,8 +1960,7 @@ $button-group-props: (
   'border-style': solid,
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $calendar-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -2103,8 +1985,7 @@ $calendar-props: (
   'border-width': var(--joy-layout-thickness),
   'divider-height': 1px,
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $calendar-days-view-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2122,8 +2003,7 @@ $calendar-days-view-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $calendar-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2147,8 +2027,7 @@ $calendar-header-props: (
   'border-style': solid,
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-lowlight)
-);
-
+);
 $calendar-item-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -2172,8 +2051,7 @@ $calendar-item-props: (
   'border-style': solid,
   'border-width': 0,
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $calendar-months-view-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2191,8 +2069,7 @@ $calendar-months-view-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $calendar-sub-header-props: (
   'font-family': "unset",
   'font-size': 18px,
@@ -2218,8 +2095,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(--joy-scheme-foreground),
   'line-height': 22px
-);
-
+);
 $calendar-years-view-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2237,8 +2113,7 @@ $calendar-years-view-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $camera-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2259,8 +2134,7 @@ $camera-props: (
   'background-color': var(--joy-scheme-background),
   'border-radius': var(--joy-layout-radius),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $card-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -2290,8 +2164,7 @@ $card-props: (
   'shadow-offset-x': var(--joy-elevation-light-offset-x-0),
   'shadow-offset-y': var(--joy-elevation-light-offset-y-0),
   'shadow-spread': var(--joy-elevation-light-spread-0)
-);
-
+);
 $card-actions-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2309,8 +2182,7 @@ $card-actions-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $card-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2328,8 +2200,7 @@ $card-content-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $card-footer-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2347,8 +2218,7 @@ $card-footer-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $card-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2366,8 +2236,7 @@ $card-header-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $card-sub-title-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-subtitle1-font-size),
@@ -2388,8 +2257,7 @@ $card-sub-title-props: (
   'background-color': var(--joy-scheme-transparent),
   'border-color': var(--joy-scheme-highlight),
   'foreground-color': var(--joy-scheme-middlelight)
-);
-
+);
 $card-title-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-headline6-font-size),
@@ -2410,8 +2278,7 @@ $card-title-props: (
   'background-color': var(--joy-scheme-transparent),
   'border-color': var(--joy-scheme-highlight),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $carousel-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2429,8 +2296,7 @@ $carousel-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $carousel2-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2448,8 +2314,7 @@ $carousel2-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $carousel-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2467,8 +2332,7 @@ $carousel-item-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $carousel-item2-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2486,8 +2350,7 @@ $carousel-item2-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $cell-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -2512,8 +2375,7 @@ $cell-props: (
   'sub-font-text-decoration': var(--joy-typography-body2-text-decoration),
   'sub-font-text-transform': var(--joy-typography-body2-text-transform),
   'sub-font-weight': var(--joy-typography-body2-font-weight)
-);
-
+);
 $cell-group-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-overline-font-size),
@@ -2537,8 +2399,7 @@ $cell-group-props: (
   'border-width': var(--joy-layout-thickness),
   'inline-end': 0,
   'inline-start': calc(var(--joy-layout-space)*2)
-);
-
+);
 $chart-props: (
   'font-family': var(--joy-typography-headline6-font-family),
   'font-size': var(--joy-typography-headline6-font-size),
@@ -2558,8 +2419,7 @@ $chart-props: (
   'translate': "unset",
   'background-color': var(--joy-scheme-background),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $chat-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -2584,8 +2444,7 @@ $chat-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': 0
-);
-
+);
 $chat-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2604,8 +2463,7 @@ $chat-header-props: (
   'transition-property': unset,
   'translate': "unset",
   'height': 64px
-);
-
+);
 $chat-input-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2624,8 +2482,7 @@ $chat-input-props: (
   'transition-property': unset,
   'translate': "unset",
   'emoji-background-color': unset
-);
-
+);
 $chat-marker-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-caption-font-size),
@@ -2650,8 +2507,7 @@ $chat-marker-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': 0
-);
-
+);
 $chat-message-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -2676,8 +2532,7 @@ $chat-message-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': 0
-);
-
+);
 $chat-message-avatar-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2695,8 +2550,7 @@ $chat-message-avatar-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $chat-message-divider-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2714,8 +2568,7 @@ $chat-message-divider-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $check-box-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -2740,8 +2593,7 @@ $check-box-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $check-box-group-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2766,8 +2618,7 @@ $check-box-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $checkmark-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2796,8 +2647,7 @@ $checkmark-props: (
   'shadow': var(--joy-elevation-none),
   'thickness': 2px,
   'width': 24px
-);
-
+);
 $chip-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body2-font-size),
@@ -2823,8 +2673,7 @@ $chip-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'height': 28px,
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $chip-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2850,8 +2699,7 @@ $chip-box-props: (
   'foreground-color': unset,
   'height': 56px,
   'shadow': unset
-);
-
+);
 $choice-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -2876,8 +2724,7 @@ $choice-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $choice-group-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2902,8 +2749,7 @@ $choice-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $choice-group-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2928,8 +2774,7 @@ $choice-group-header-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $code-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2948,8 +2793,7 @@ $code-props: (
   'transition-property': unset,
   'translate': "unset",
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $color-area-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2967,8 +2811,7 @@ $color-area-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $color-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2994,8 +2837,7 @@ $color-box-props: (
   'foreground-color': unset,
   'height': 56px,
   'shadow': unset
-);
-
+);
 $color-picker-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -3020,8 +2862,7 @@ $color-picker-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'size': 24px
-);
-
+);
 $color-slider-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3046,8 +2887,7 @@ $color-slider-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $color-swatch-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -3072,8 +2912,7 @@ $color-swatch-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'size': 24px
-);
-
+);
 $color-swatch-group-props: (
   'font-family': var(--joy-font-family),
   'font-size': 12px,
@@ -3098,8 +2937,7 @@ $color-swatch-group-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-color-neutral-50),
   'shadow': unset
-);
-
+);
 $color-thumb-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -3124,8 +2962,7 @@ $color-thumb-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'size': 24px
-);
-
+);
 $combo-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3143,8 +2980,7 @@ $combo-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $combo-item-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -3169,8 +3005,7 @@ $combo-item-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $comment-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3190,8 +3025,7 @@ $comment-props: (
   'translate': "unset",
   'inner-gap': 8px,
   'nested-indent': 24px
-);
-
+);
 $compound-button-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -3218,8 +3052,7 @@ $compound-button-props: (
   'height': auto,
   'shadow': var(--joy-elevation-none),
   'width': auto
-);
-
+);
 $content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3237,8 +3070,7 @@ $content-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $cookies-consent-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3256,8 +3088,7 @@ $cookies-consent-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $data-list-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3275,8 +3106,7 @@ $data-list-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $data-table-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3294,8 +3124,7 @@ $data-table-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $date-box-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -3321,8 +3150,7 @@ $date-box-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'height': 56px,
   'shadow': unset
-);
-
+);
 $date-time-box-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -3348,8 +3176,7 @@ $date-time-box-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'height': 56px,
   'shadow': unset
-);
-
+);
 $dialog-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -3379,8 +3206,7 @@ $dialog-props: (
   'shadow-offset-x': var(--joy-elevation-light-offset-x-0),
   'shadow-offset-y': var(--joy-elevation-light-offset-y-0),
   'shadow-spread': var(--joy-elevation-light-spread-0)
-);
-
+);
 $dialog-actions-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3398,8 +3224,7 @@ $dialog-actions-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dialog-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3417,8 +3242,7 @@ $dialog-content-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dialog-footer-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3436,8 +3260,7 @@ $dialog-footer-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dialog-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3455,8 +3278,7 @@ $dialog-header-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dialog-header-sub-text-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-subtitle2-font-size),
@@ -3477,8 +3299,7 @@ $dialog-header-sub-text-props: (
   'background-color': var(--joy-scheme-background),
   'border-color': var(--joy-scheme-highlight),
   'foreground-color': var(--joy-scheme-middlelight)
-);
-
+);
 $dialog-header-text-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-headline6-font-size),
@@ -3499,8 +3320,7 @@ $dialog-header-text-props: (
   'background-color': var(--joy-scheme-background),
   'border-color': var(--joy-scheme-highlight),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $dialog-host-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3518,8 +3338,7 @@ $dialog-host-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $disclosure-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3537,8 +3356,7 @@ $disclosure-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $divider-props: (
   'font-family': var(--joy-font-family),
   'font-size': 12px,
@@ -3560,8 +3378,7 @@ $divider-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none),
   'thickness': var(--joy-layout-thickness)
-);
-
+);
 $dot-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -3587,8 +3404,7 @@ $dot-props: (
   'foreground-color': var(--joy-color-neutral-50),
   'shadow': unset,
   'size': 16px
-);
-
+);
 $drawer-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -3615,8 +3431,7 @@ $drawer-props: (
   'height': 100%,
   'shadow': var(--joy-elevation-none),
   'width': 320px
-);
-
+);
 $drawer-container-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3634,8 +3449,7 @@ $drawer-container-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $drawer-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3653,8 +3467,7 @@ $drawer-content-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $drop-down-button-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -3682,8 +3495,7 @@ $drop-down-button-props: (
   'line-height': calc(var(--dropdown-button-font-line-height)  - 4px),
   'shadow': var(--joy-elevation-none),
   'transform': none
-);
-
+);
 $drop-zone-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3701,8 +3513,7 @@ $drop-zone-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dropdown-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3720,8 +3531,7 @@ $dropdown-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $elevation-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3739,8 +3549,7 @@ $elevation-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $emoji-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3759,8 +3568,7 @@ $emoji-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': var(--joy-scheme-highlight)
-);
-
+);
 $empty-state-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3769,11 +3577,11 @@ $empty-state-props: (
   'font-letter-spacing': "unset",
   'font-text-decoration': "unset",
   'font-text-transform': "unset",
-  'padding-top': "unset",
-  'padding-right': "unset",
-  'padding-bottom': "unset",
-  'padding-left': "unset",
-  'gap': "unset",
+  'padding-top': calc(var(--joy-layout-space) * 2),
+  'padding-right': calc(var(--joy-layout-space) * 2),
+  'padding-bottom': calc(var(--joy-layout-space) * 2),
+  'padding-left': calc(var(--joy-layout-space) * 2),
+  'gap': var(--joy-layout-space),
   'transition-duration': "unset",
   'transition-mode': "unset",
   'transition-property': unset,
@@ -3786,8 +3594,7 @@ $empty-state-props: (
   'header-font-text-decoration': var(--joy-typography-body1-text-decoration),
   'header-font-text-transform': var(--joy-typography-body1-text-transform),
   'header-font-weight': var(--joy-typography-body1-font-weight)
-);
-
+);
 $epg-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3811,8 +3618,7 @@ $epg-props: (
   'border-style': none,
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $epg-channel-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3836,8 +3642,7 @@ $epg-channel-props: (
   'border-style': none,
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $epg-minimap-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3861,8 +3666,7 @@ $epg-minimap-props: (
   'border-style': none,
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $epg-now-line-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3884,8 +3688,7 @@ $epg-now-line-props: (
   'border-radius': var(--joy-layout-radius),
   'border-style': solid,
   'border-width': var(--joy-layout-thickness)
-);
-
+);
 $epg-program-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3909,8 +3712,7 @@ $epg-program-props: (
   'border-style': solid,
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $epg-timeline-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3934,8 +3736,7 @@ $epg-timeline-props: (
   'border-style': solid,
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $error-props: (
   'font-family': var(--joy-font-family),
   'font-size': 12px,
@@ -3960,8 +3761,7 @@ $error-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-color-danger-500),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $error-state-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3970,15 +3770,16 @@ $error-state-props: (
   'font-letter-spacing': "unset",
   'font-text-decoration': "unset",
   'font-text-transform': "unset",
-  'padding-top': "unset",
-  'padding-right': "unset",
-  'padding-bottom': "unset",
-  'padding-left': "unset",
-  'gap': "unset",
+  'padding-top': calc(var(--joy-layout-space) * 2),
+  'padding-right': calc(var(--joy-layout-space) * 2),
+  'padding-bottom': calc(var(--joy-layout-space) * 2),
+  'padding-left': calc(var(--joy-layout-space) * 2),
+  'gap': var(--joy-layout-space),
   'transition-duration': "unset",
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset",
+  'foreground-color': unset,
   'header-font-family': var(--joy-font-family),
   'header-font-letter-spacing': var(--joy-typography-body1-letter-spacing),
   'header-font-line-height': var(--joy-typography-body1-line-height),
@@ -3986,8 +3787,7 @@ $error-state-props: (
   'header-font-text-decoration': var(--joy-typography-body1-text-decoration),
   'header-font-text-transform': var(--joy-typography-body1-text-transform),
   'header-font-weight': var(--joy-typography-body1-font-weight)
-);
-
+);
 $expandable-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4005,8 +3805,7 @@ $expandable-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $expander-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -4032,8 +3831,7 @@ $expander-props: (
   'divider-height': 1px,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-light)
-);
-
+);
 $expander-group-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -4058,8 +3856,7 @@ $expander-group-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $expander-header-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-subtitle1-font-size),
@@ -4080,8 +3877,7 @@ $expander-header-props: (
   'background-color': var(--joy-scheme-transparent),
   'border-color': var(--joy-scheme-highlight),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $expander-sub-header-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-subtitle2-font-size),
@@ -4102,8 +3898,7 @@ $expander-sub-header-props: (
   'background-color': var(--joy-scheme-transparent),
   'border-color': var(--joy-scheme-highlight),
   'foreground-color': var(--joy-scheme-middlelight)
-);
-
+);
 $file-picker-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4128,8 +3923,7 @@ $file-picker-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $file-upload-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4154,8 +3948,7 @@ $file-upload-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $file-upload-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4180,8 +3973,7 @@ $file-upload-item-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $flip-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4199,8 +3991,7 @@ $flip-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $floating-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -4228,8 +4019,7 @@ $floating-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-light)
-);
-
+);
 $floating-action-button-props: (
   'font-family': var(--joy-typography-button-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -4254,8 +4044,7 @@ $floating-action-button-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $floating-action-button-group-props: (
   'font-family': var(--joy-typography-button-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -4273,8 +4062,7 @@ $floating-action-button-group-props: (
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
   'translate': "unset"
-);
-
+);
 $floating-trigger-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4292,8 +4080,7 @@ $floating-trigger-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $focus-ring-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4325,8 +4112,7 @@ $focus-ring-props: (
   'width': 4px,
   'x': 0px,
   'y': 0px
-);
-
+);
 $footer-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4351,8 +4137,7 @@ $footer-props: (
   'border-width': var(--retro-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'inset': calc(var(--joy-layout-space) * 2)
-);
-
+);
 $footer-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4370,8 +4155,7 @@ $footer-item-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $footer-item-group-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4389,8 +4173,7 @@ $footer-item-group-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $form-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4409,8 +4192,7 @@ $form-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': var(--joy-scheme-background)
-);
-
+);
 $form-field-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4429,8 +4211,7 @@ $form-field-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': var(--joy-scheme-background)
-);
-
+);
 $grid-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4448,8 +4229,7 @@ $grid-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $grid-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4467,8 +4247,7 @@ $grid-item-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $helmet-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4486,8 +4265,7 @@ $helmet-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $hint-props: (
   'font-family': var(--joy-font-family),
   'font-size': 12px,
@@ -4512,8 +4290,7 @@ $hint-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-middlelight),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $icon-props: (
   'font-family': var(--joy-font-family),
   'font-size': 12px,
@@ -4539,8 +4316,7 @@ $icon-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': unset,
   'size': unset
-);
-
+);
 $image-props: (
   'font-family': var(--joy-font-family),
   'font-size': 12px,
@@ -4573,8 +4349,7 @@ $image-props: (
   'legend-font-text-transform': var(--joy-typography-caption-text-transform),
   'legend-font-weight': var(--joy-typography-caption-font-weight),
   'shadow': unset
-);
-
+);
 $ink-bar-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4597,8 +4372,7 @@ $ink-bar-props: (
   'border-radius': calc(var(--ink-bar-thickness) / 2),
   'foreground-color': unset,
   'thickness': calc(var(--joy-layout-thickness) * 2)
-);
-
+);
 $jumbtron-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -4623,8 +4397,7 @@ $jumbtron-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': unset
-);
-
+);
 $jumbtron-header-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-headline2-font-size),
@@ -4645,8 +4418,7 @@ $jumbtron-header-props: (
   'background-color': var(--joy-scheme-background),
   'border-color': var(--joy-scheme-highlight),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $jumbtron-sub-header-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-headline3-font-size),
@@ -4667,8 +4439,7 @@ $jumbtron-sub-header-props: (
   'background-color': var(--joy-scheme-background),
   'border-color': var(--joy-scheme-highlight),
   'foreground-color': var(--joy-scheme-middlelight)
-);
-
+);
 $kbd-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-overline-font-size),
@@ -4693,8 +4464,7 @@ $kbd-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-light)
-);
-
+);
 $kbd-shortcut-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4712,8 +4482,7 @@ $kbd-shortcut-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $light-chain-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4731,8 +4500,7 @@ $light-chain-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $list-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -4757,8 +4525,7 @@ $list-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $list-item-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -4783,8 +4550,7 @@ $list-item-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $list-item-group-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -4809,8 +4575,7 @@ $list-item-group-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-color-neutral-900),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $marquee-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4830,8 +4595,7 @@ $marquee-props: (
   'translate': "unset",
   'direction': normal,
   'speed': unset
-);
-
+);
 $masonry-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4850,8 +4614,7 @@ $masonry-props: (
   'transition-property': unset,
   'translate': "unset",
   'columns': 1
-);
-
+);
 $menu-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -4876,8 +4639,7 @@ $menu-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $menu-item-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -4901,9 +4663,12 @@ $menu-item-props: (
   'border-style': solid,
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
-  'shadow': var(--joy-elevation-none)
-);
-
+  'shadow': var(--joy-elevation-none),
+  'height': 48px,
+  'indent-color': var(--joy-scheme-highlight),
+  'indent-size': var(--joy-layout-thickness),
+  'indent-offset': calc(var(--joy-layout-space) * 2)
+);
 $menu-item-group-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -4935,8 +4700,7 @@ $menu-item-group-props: (
   'header-font-text-transform': var(--joy-typography-overline-text-transform),
   'header-font-weight': var(--joy-typography-overline-font-weight),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $message-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4954,8 +4718,7 @@ $message-box-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $meter-bar-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4973,8 +4736,7 @@ $meter-bar-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $meter-ring-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4992,8 +4754,7 @@ $meter-ring-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $number-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -5011,8 +4772,7 @@ $number-props: (
   'transition-mode': ease,
   'transition-property': (color, opacity, box-shadow),
   'translate': "unset"
-);
-
+);
 $number-box-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -5038,8 +4798,7 @@ $number-box-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'height': 56px,
   'shadow': unset
-);
-
+);
 $number-counter-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -5057,8 +4816,7 @@ $number-counter-props: (
   'transition-mode': ease,
   'transition-property': (color, opacity, box-shadow),
   'translate': "unset"
-);
-
+);
 $page-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5076,8 +4834,7 @@ $page-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $page-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5099,8 +4856,7 @@ $page-content-props: (
   'left': unset,
   'max-width': unset,
   'width': unset
-);
-
+);
 $page-header-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-headline4-font-size),
@@ -5122,8 +4878,7 @@ $page-header-props: (
   'border-color': unset,
   'foreground-color': var(--joy-scheme-foreground),
   'inset': calc(var(--joy-layout-space) * 2)
-);
-
+);
 $page-menu-props: (
   'font-family': var(--joy-font-family),
   'font-size': 24px,
@@ -5150,8 +4905,7 @@ $page-menu-props: (
   'height': 64px,
   'line-height': 28px,
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $page-pre-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5170,8 +4924,7 @@ $page-pre-content-props: (
   'transition-property': unset,
   'translate': "unset",
   'inset': calc(var(--joy-layout-space) * 2)
-);
-
+);
 $page-pre-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5190,8 +4943,7 @@ $page-pre-header-props: (
   'transition-property': unset,
   'translate': "unset",
   'inset': calc(var(--joy-layout-space) * 2)
-);
-
+);
 $paginator-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5210,8 +4962,7 @@ $paginator-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': var(--joy-scheme-background)
-);
-
+);
 $password-box-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -5237,8 +4988,7 @@ $password-box-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'height': 56px,
   'shadow': unset
-);
-
+);
 $pattern-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5257,8 +5007,7 @@ $pattern-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': var(--joy-color-neutral-400)
-);
-
+);
 $persona-props: (
   'font-family': var(--joy-font-family),
   'font-size': 32px,
@@ -5284,8 +5033,7 @@ $persona-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'presence-color': unset,
   'shadow': unset
-);
-
+);
 $perspective-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5303,8 +5051,7 @@ $perspective-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $pin-box-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -5330,8 +5077,7 @@ $pin-box-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'height': 56px,
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $popup-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -5360,8 +5106,7 @@ $popup-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $portal-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5379,8 +5124,7 @@ $portal-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $portal-projection-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5398,8 +5142,7 @@ $portal-projection-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $progress-bar-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5417,8 +5160,7 @@ $progress-bar-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $progress-ring-props: (
   'font-family': var(--joy-font-family),
   'font-size': 12px,
@@ -5444,8 +5186,7 @@ $progress-ring-props: (
   'fill-color': var(--joy-scheme-foreground),
   'foreground-color': var(--joy-color-neutral-900),
   'shadow': unset
-);
-
+);
 $qr-code-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5465,8 +5206,7 @@ $qr-code-props: (
   'translate': "unset",
   'background-color': var(--joy-scheme-background),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $radio-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -5491,8 +5231,7 @@ $radio-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-color-neutral-900),
   'shadow': unset
-);
-
+);
 $radio-group-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5517,8 +5256,7 @@ $radio-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $rating-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5543,8 +5281,7 @@ $rating-props: (
   'border-width': unset,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': unset
-);
-
+);
 $repeat-button-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -5570,8 +5307,7 @@ $repeat-button-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'line-height': calc(var(--repeat-button-font-line-height)  - 4px),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $resize-adorner-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5595,8 +5331,7 @@ $resize-adorner-props: (
   'border-width': var(--joy-layout-thickness),
   'thumb-background-color': var(--joy-scheme-highlight),
   'thumb-border-radius': var(--joy-layout-thickness)
-);
-
+);
 $ribbon-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -5622,8 +5357,7 @@ $ribbon-props: (
   'font': var(--joy-font-family),
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': unset
-);
-
+);
 $rich-text-box-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -5649,8 +5383,7 @@ $rich-text-box-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'height': 56px,
   'shadow': unset
-);
-
+);
 $rich-text-box-toolbox-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5675,8 +5408,7 @@ $rich-text-box-toolbox-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $ripple-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5695,8 +5427,7 @@ $ripple-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': var(--joy-color-neutral-400)
-);
-
+);
 $router-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5714,8 +5445,7 @@ $router-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $router-anchor-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5736,8 +5466,7 @@ $router-anchor-props: (
   'background-color': var(--joy-scheme-transparent),
   'border-color': var(--joy-scheme-highlight),
   'foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $router-link-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5755,8 +5484,7 @@ $router-link-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $router-outlet-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5774,8 +5502,7 @@ $router-outlet-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $scale-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5793,8 +5520,7 @@ $scale-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $scroll-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5812,8 +5538,7 @@ $scroll-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $search-box-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -5839,8 +5564,7 @@ $search-box-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'height': 56px,
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $segment-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5865,8 +5589,7 @@ $segment-props: (
   'border-width': 0,
   'foreground-color': var(--joy-scheme-foreground),
   'indicator-height': calc(100% - calc(var(--segment-padding-top) + var(--segment-padding-bottom)))
-);
-
+);
 $segment-item-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -5885,8 +5608,7 @@ $segment-item-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': var(--joy-color-primary-500)
-);
-
+);
 $select-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -5911,8 +5633,7 @@ $select-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': unset
-);
-
+);
 $select-item-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -5937,8 +5658,7 @@ $select-item-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $select-item-group-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -5963,8 +5683,7 @@ $select-item-group-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-color-neutral-900),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $signature-pad-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -5989,8 +5708,7 @@ $signature-pad-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': unset
-);
-
+);
 $skeleton-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6014,8 +5732,7 @@ $skeleton-props: (
   'border-style': solid,
   'border-width': 0,
   'foreground-color': unset
-);
-
+);
 $slider-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -6071,8 +5788,7 @@ $slider-props: (
   'tooltip-transition-mode': ease,
   'tooltip-transition-property': (background-color, color, border-color, opacity, transform),
   'track-size': 4px
-);
-
+);
 $slider2-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6090,8 +5806,7 @@ $slider2-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $slider2thumb-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6110,8 +5825,7 @@ $slider2thumb-props: (
   'transition-property': unset,
   'translate': "unset",
   'size': 24px
-);
-
+);
 $spacer-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6129,8 +5843,7 @@ $spacer-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $split-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6158,8 +5871,7 @@ $split-props: (
   'thumb-border-color': var(--joy-scheme-highlight),
   'thumb-border-radius': var(--joy-layout-radius),
   'thumb-foreground-color': var(--joy-scheme-foreground)
-);
-
+);
 $split-button-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -6185,8 +5897,7 @@ $split-button-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'line-height': calc(var(--split-button-font-line-height)  - 4px),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $stack-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6204,8 +5915,7 @@ $stack-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $sticky-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6225,8 +5935,7 @@ $sticky-props: (
   'translate': "unset",
   'left': 0px,
   'top': 0px
-);
-
+);
 $success-state-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6235,15 +5944,16 @@ $success-state-props: (
   'font-letter-spacing': "unset",
   'font-text-decoration': "unset",
   'font-text-transform': "unset",
-  'padding-top': "unset",
-  'padding-right': "unset",
-  'padding-bottom': "unset",
-  'padding-left': "unset",
-  'gap': "unset",
+  'padding-top': calc(var(--joy-layout-space) * 2),
+  'padding-right': calc(var(--joy-layout-space) * 2),
+  'padding-bottom': calc(var(--joy-layout-space) * 2),
+  'padding-left': calc(var(--joy-layout-space) * 2),
+  'gap': var(--joy-layout-space),
   'transition-duration': "unset",
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset",
+  'foreground-color': unset,
   'header-font-family': var(--joy-font-family),
   'header-font-letter-spacing': var(--joy-typography-body1-letter-spacing),
   'header-font-line-height': var(--joy-typography-body1-line-height),
@@ -6251,8 +5961,7 @@ $success-state-props: (
   'header-font-text-decoration': var(--joy-typography-body1-text-decoration),
   'header-font-text-transform': var(--joy-typography-body1-text-transform),
   'header-font-weight': var(--joy-typography-body1-font-weight)
-);
-
+);
 $summary-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6270,8 +5979,7 @@ $summary-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $swipe-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6289,8 +5997,7 @@ $swipe-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $tab-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -6322,8 +6029,7 @@ $tab-props: (
   'strip-padding-left': 0,
   'strip-padding-right': 0,
   'strip-padding-top': 0
-);
-
+);
 $tab-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6344,8 +6050,7 @@ $tab-item-props: (
   'border-radius': var(--joy-layout-radius),
   'border-style': solid,
   'border-width': var(--joy-layout-space)
-);
-
+);
 $tab-panel-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6364,8 +6069,7 @@ $tab-panel-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': var(--joy-scheme-background)
-);
-
+);
 $tab-strip-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -6389,8 +6093,7 @@ $tab-strip-props: (
   'border-style': solid,
   'border-width': 0,
   'foreground-color': unset
-);
-
+);
 $tab-strip-item-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -6400,9 +6103,9 @@ $tab-strip-item-props: (
   'font-text-decoration': var(--joy-typography-button-text-decoration),
   'font-text-transform': var(--joy-typography-button-text-transform),
   'padding-top': calc(var(--joy-layout-space) * 2),
-  'padding-right': var(--joy-layout-space),
+  'padding-right': calc(var(--joy-layout-space) * 3),
   'padding-bottom': calc(var(--joy-layout-space) * 2),
-  'padding-left': var(--joy-layout-space),
+  'padding-left': calc(var(--joy-layout-space) * 3),
   'gap': var(--joy-layout-space),
   'transition-duration': .2s,
   'transition-mode': ease,
@@ -6417,8 +6120,7 @@ $tab-strip-item-props: (
   'shadow': var(--joy-elevation-none),
   'size': 56px,
   'thickness': 4px
-);
-
+);
 $table-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -6443,8 +6145,7 @@ $table-props: (
   'border-width': var(--joy-layout-thickness),
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $table-body-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -6469,8 +6170,7 @@ $table-body-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $table-cell-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -6494,8 +6194,32 @@ $table-cell-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-color-neutral-50),
   'shadow': var(--joy-elevation-none)
-);
-
+);
+$table-footer-props: (
+  'font-family': var(--joy-font-family),
+  'font-size': var(--joy-typography-body2-font-size),
+  'font-line-height': "unset",
+  'font-weight': bold,
+  'font-letter-spacing': "unset",
+  'font-text-decoration': "unset",
+  'font-text-transform': "unset",
+  'padding-top': calc(var(--joy-layout-space) / 2),
+  'padding-right': var(--joy-layout-space),
+  'padding-bottom': calc(var(--joy-layout-space) / 2),
+  'padding-left': var(--joy-layout-space),
+  'gap': var(--joy-layout-space),
+  'transition-duration': .2s,
+  'transition-mode': ease,
+  'transition-property': all,
+  'translate': "unset",
+  'background-color': var(--joy-scheme-background),
+  'border-color': var(--joy-scheme-highlight),
+  'border-radius': var(--joy-layout-radius),
+  'border-style': solid,
+  'border-width': 0px,
+  'foreground-color': var(--joy-scheme-foreground),
+  'shadow': var(--joy-elevation-none)
+);
 $table-header-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body2-font-size),
@@ -6520,8 +6244,7 @@ $table-header-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $table-row-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -6546,8 +6269,7 @@ $table-row-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-color-neutral-50),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $text-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -6574,8 +6296,7 @@ $text-props: (
   'font-transform': var(--joy-typography-body1-text-transform),
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $text-box-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -6602,8 +6323,7 @@ $text-box-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'height': 56px,
   'shadow': var(--joy-elevation-none)
-);
-
+);
 $text-format-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6621,8 +6341,7 @@ $text-format-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $tick-bar-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-caption-font-size),
@@ -6651,8 +6370,7 @@ $tick-bar-props: (
   'tick-size': 2px,
   'tick-text-gap': 4px,
   'tick-width': var(--joy-layout-thickness)
-);
-
+);
 $tile-list-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6671,8 +6389,7 @@ $tile-list-props: (
   'transition-property': unset,
   'translate': "unset",
   'gutter-size': 16px
-);
-
+);
 $tile-list-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6697,8 +6414,7 @@ $tile-list-item-props: (
   'dragover-border-color': #2196f3,
   'header-bg-color': #ddd,
   'header-padding': 10px
-);
-
+);
 $time-box-props: (
   'font-family': var(--joy-font-family),
   'font-size': 16px,
@@ -6724,8 +6440,7 @@ $time-box-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'height': 56px,
   'shadow': unset
-);
-
+);
 $title-bar-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-headline4-font-size),
@@ -6743,8 +6458,7 @@ $title-bar-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $title-layout-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6763,8 +6477,7 @@ $title-layout-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': var(--joy-scheme-background)
-);
-
+);
 $toast-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -6790,8 +6503,7 @@ $toast-props: (
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
   'shadow': var(--joy-elevation-bold)
-);
-
+);
 $toggle-button-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-button-font-size),
@@ -6819,8 +6531,7 @@ $toggle-button-props: (
   'line-height': calc(var(--toggle-button-font-line-height)  - 4px),
   'shadow': var(--joy-elevation-none),
   'width': auto
-);
-
+);
 $toggle-switch-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6842,8 +6553,7 @@ $toggle-switch-props: (
   'border-radius': var(--joy-layout-radius),
   'border-style': solid,
   'border-width': var(--joy-layout-thickness)
-);
-
+);
 $toggletip-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6861,8 +6571,7 @@ $toggletip-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $toolbar-props: (
   'font-family': var(--joy-font-family),
   'font-size': 24px,
@@ -6893,8 +6602,7 @@ $toolbar-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $tooltip-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body2-font-size),
@@ -6920,8 +6628,7 @@ $tooltip-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'max-width': 240px,
   'shadow': var(--joy-elevation-light)
-);
-
+);
 $tree-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -6939,8 +6646,7 @@ $tree-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $tree-item-props: (
   'font-family': var(--joy-font-family),
   'font-size': var(--joy-typography-body1-font-size),
@@ -6964,9 +6670,11 @@ $tree-item-props: (
   'border-style': solid,
   'border-width': 0px,
   'foreground-color': var(--joy-scheme-foreground),
-  'shadow': var(--joy-elevation-none)
-);
-
+  'shadow': var(--joy-elevation-none),
+  'indent-color': var(--joy-scheme-highlight),
+  'indent-size': var(--joy-layout-thickness),
+  'indent-offset': calc(var(--joy-layout-space) * 2)
+);
 $up-down-spinner-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6984,8 +6692,7 @@ $up-down-spinner-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $video-props: (
   'font-family': var(--joy-font-family),
   'font-size': 12px,
@@ -7018,8 +6725,7 @@ $video-props: (
   'legend-font-text-transform': var(--joy-typography-caption-text-transform),
   'legend-font-weight': var(--joy-typography-caption-font-weight),
   'shadow': unset
-);
-
+);
 $virtualize-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -7037,8 +6743,7 @@ $virtualize-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $wizard-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -7057,8 +6762,7 @@ $wizard-props: (
   'transition-property': unset,
   'translate': "unset",
   'border-color': unset
-);
-
+);
 $wizard-step-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -7076,8 +6780,7 @@ $wizard-step-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $wrap-props: (
   'font-family': "unset",
   'font-size': "unset",