jaci-ui 0.9.0 → 0.9.2

package/dist/styles.css

@@ -2250,10 +2250,10 @@
 }
 
     .jaci-dialog__backdrop {
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-xs));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       inset: var(--jaci-spacing-0);
-      --backdrop-blur: blur(var(--jaci-blurs-xs));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       position: fixed;
       --transition-duration: var(--jaci-durations-fast);
@@ -2270,6 +2270,12 @@
       opacity: 0;
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-dialog__backdrop {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-dialog__viewport {
       inset: var(--jaci-spacing-0);
       padding: var(--jaci-spacing-4);
@@ -2761,14 +2767,15 @@
 }
 
     .jaci-card__root {
+      --jaci-backdrop-filter: blur(12px);
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-2xl);
       border-style: solid;
       border-width: 2px;
       overflow: hidden;
       background-color: var(--jaci-colors-surface-default);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
+      backdrop-filter: var(--jaci-backdrop-filter);
       color: var(--jaci-colors-fg-default);
       display: flex;
       flex-direction: column;
@@ -2786,6 +2793,12 @@
       transform: translateY(-2px);
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-card__root {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-card__header {
       padding-inline: var(--jaci-spacing-6);
       flex-direction: column;
@@ -3221,15 +3234,15 @@
 }
 
     .jaci-color-picker__popup {
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-md));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       padding: var(--jaci-spacing-4);
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-xl);
       border-style: solid;
       border-width: 1px;
       gap: var(--jaci-spacing-3);
-      --backdrop-blur: blur(var(--jaci-blurs-md));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-lg);
       box-sizing: border-box;
@@ -3240,6 +3253,12 @@
       width: min(20rem, calc(100vw - 2rem));
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-color-picker__popup {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-color-picker__palette {
       border-radius: var(--jaci-radii-lg);
       overflow: hidden;
@@ -3485,15 +3504,15 @@
 }
 
     .jaci-combobox__popup {
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-md));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       padding: var(--jaci-spacing-2);
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-2xl);
       border-style: solid;
       border-width: 1px;
       overflow: hidden;
-      --backdrop-blur: blur(var(--jaci-blurs-md));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-xl);
       box-sizing: border-box;
@@ -3516,6 +3535,12 @@
       transform: scale(0.96);
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-combobox__popup {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-combobox__list {
       gap: var(--jaci-spacing-1);
       overscroll-behavior: contain;
@@ -3848,6 +3873,8 @@
 }
 
     .jaci-menu__popup {
+      --jaci-backdrop-filter: blur(12px);
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       padding: var(--jaci-spacing-6);
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-2xl);
@@ -3855,8 +3882,7 @@
       border-width: 1px;
       gap: var(--jaci-spacing-1);
       background-color: var(--jaci-colors-surface-overlay);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
+      backdrop-filter: var(--jaci-backdrop-filter);
       box-shadow: var(--jaci-shadows-xl);
       box-sizing: border-box;
       color: var(--jaci-colors-fg-default);
@@ -3881,6 +3907,12 @@
       transform: scale(0.96);
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-menu__popup {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-menu__item {
       border: 0;
       padding: var(--jaci-spacing-2);
@@ -4607,14 +4639,14 @@
 }
 
     .jaci-date-picker__popup {
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-md));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       padding: var(--jaci-spacing-4);
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-xl);
       border-style: solid;
       border-width: 1px;
-      --backdrop-blur: blur(var(--jaci-blurs-md));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-xl);
       color: var(--jaci-colors-fg-default);
@@ -4632,6 +4664,12 @@
       transform: scale(0.96);
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-date-picker__popup {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-date-picker__header {
       gap: var(--jaci-spacing-2);
       align-items: center;
@@ -5007,15 +5045,15 @@
 }
 
     .jaci-date-range-picker__popup {
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-md));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       padding: var(--jaci-spacing-4);
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-xl);
       border-style: solid;
       border-width: 1px;
       overflow: hidden;
-      --backdrop-blur: blur(var(--jaci-blurs-md));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-xl);
       color: var(--jaci-colors-fg-default);
@@ -5023,6 +5061,12 @@
       max-width: calc(100vw - 1rem);
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-date-range-picker__popup {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-date-range-picker__header {
       gap: var(--jaci-spacing-2);
       align-items: center;
@@ -5255,10 +5299,10 @@
 }
 
     .jaci-drawer__backdrop {
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-xs));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       inset: var(--jaci-spacing-0);
-      --backdrop-blur: blur(var(--jaci-blurs-xs));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       position: fixed;
       --transition-duration: var(--jaci-durations-fast);
@@ -5274,6 +5318,12 @@
       opacity: 0;
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-drawer__backdrop {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-drawer__viewport {
       inset: var(--jaci-spacing-0);
       overflow: hidden;
@@ -5621,10 +5671,10 @@
 }
 
     .jaci-image__backdrop {
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-md));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       inset: var(--jaci-spacing-0);
-      --backdrop-blur: blur(var(--jaci-blurs-md));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       position: fixed;
       z-index: 60;
@@ -5635,6 +5685,12 @@
       opacity: 0;
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-image__backdrop {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-image__viewport {
       inset: var(--jaci-spacing-0);
       justify-content: center;
@@ -5768,10 +5824,10 @@
 }
 
     .jaci-figure__backdrop {
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-md));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       inset: var(--jaci-spacing-0);
-      --backdrop-blur: blur(var(--jaci-blurs-md));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       position: fixed;
       z-index: 60;
@@ -5782,6 +5838,12 @@
       opacity: 0;
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-figure__backdrop {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-figure__viewport {
       inset: var(--jaci-spacing-0);
       justify-content: center;
@@ -6086,6 +6148,8 @@
 }
 
     .jaci-navbar__bar {
+      --jaci-backdrop-filter: var(--jaci-navbar-backdrop-filter, blur(4px));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       padding: var(--jaci-spacing-3);
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-2xl);
@@ -6093,7 +6157,7 @@
       border-width: 1px;
       gap: var(--jaci-spacing-2);
       align-items: center;
-      backdrop-filter: var(--jaci-navbar-backdrop-filter, blur(4px));
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-xl);
       box-sizing: border-box;
@@ -6111,6 +6175,12 @@
       top: var(--jaci-spacing-2);
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-navbar__bar {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-navbar__start {
       justify-content: flex-start;
 }
@@ -6179,8 +6249,10 @@
 }
 
     .jaci-navbar__drawerBackdrop {
+      --jaci-backdrop-filter: var(--jaci-navbar-backdrop-filter, blur(4px));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       inset: var(--jaci-spacing-0);
-      backdrop-filter: var(--jaci-navbar-backdrop-filter, blur(4px));
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       position: fixed;
       --transition-duration: var(--jaci-durations-normal);
@@ -6196,6 +6268,12 @@
       opacity: 0;
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-navbar__drawerBackdrop {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-navbar__drawerViewport {
       inset: var(--jaci-spacing-0);
       overflow: hidden;
@@ -6207,11 +6285,13 @@
 }
 
     .jaci-navbar__drawer {
+      --jaci-backdrop-filter: var(--jaci-navbar-drawer-backdrop-filter, blur(8px));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       padding: var(--jaci-spacing-4);
       border-color: var(--jaci-colors-border-default);
       gap: var(--jaci-spacing-2);
       background-color: var(--jaci-colors-surface-default);
-      backdrop-filter: var(--jaci-navbar-drawer-backdrop-filter, blur(8px));
+      backdrop-filter: var(--jaci-backdrop-filter);
       box-sizing: border-box;
       box-shadow: var(--jaci-shadows-xl);
       color: var(--jaci-colors-fg-default);
@@ -6252,6 +6332,12 @@
       transform: translateX(-1rem);
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-navbar__drawer {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-navbar__close {
       border: 0;
       border-radius: var(--jaci-radii-full);
@@ -6342,18 +6428,20 @@
 }
 
     .jaci-bottomNavigation__root {
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-sm));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       padding: var(--jaci-spacing-3);
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-full);
       border-style: solid;
       border-width: 1px;
       gap: var(--jaci-spacing-2);
-      --backdrop-blur: blur(var(--jaci-blurs-sm));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      align-items: center;
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-xl);
       box-sizing: border-box;
+      color: var(--jaci-colors-fg-default);
       position: fixed;
       transform: translateX(-50%);
       -webkit-user-select: none;
@@ -6365,9 +6453,10 @@
       bottom: var(--jaci-spacing-2);
 }
 
-    .jaci-bottomNavigation__root,.jaci-bottomNavigation__item {
-      align-items: center;
-      color: var(--jaci-colors-fg-default);
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-bottomNavigation__root {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
 }
 
     .jaci-bottomNavigation__item {
@@ -6376,7 +6465,9 @@
       padding-inline: var(--jaci-spacing-2);
       padding-block: var(--jaci-spacing-1);
       text-decoration: none;
+      align-items: center;
       background-color: var(--jaci-colors-transparent);
+      color: var(--jaci-colors-fg-default);
       display: inline-flex;
       flex-direction: column;
       font-family: system-ui, sans-serif;
@@ -7004,15 +7095,15 @@
 }
 
     .jaci-popover__popup {
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-md));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       padding: var(--jaci-spacing-4);
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-xl);
       border-style: solid;
       border-width: 1px;
       overflow: auto;
-      --backdrop-blur: blur(var(--jaci-blurs-md));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-xl);
       color: var(--jaci-colors-fg-default);
@@ -7034,6 +7125,12 @@
       transform: scale(0.96);
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-popover__popup {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-popover__title {
       color: var(--jaci-colors-fg-default);
       font-size: var(--jaci-font-sizes-lg);
@@ -7091,10 +7188,10 @@
 }
 
     .jaci-popover__arrow {
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-md));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       border-color: var(--jaci-colors-border-default);
-      --backdrop-blur: blur(var(--jaci-blurs-md));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       transform: rotate(45deg);
       border-right-style: solid;
@@ -7105,6 +7202,12 @@
       width: var(--jaci-sizes-2);
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-popover__arrow {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-progress__root {
       gap: var(--jaci-spacing-2);
       display: flex;
@@ -7411,15 +7514,15 @@
 }
 
     .jaci-select__popup {
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-md));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       padding: var(--jaci-spacing-2);
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-2xl);
       border-style: solid;
       border-width: 1px;
       overflow: hidden;
-      --backdrop-blur: blur(var(--jaci-blurs-md));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-xl);
       box-sizing: border-box;
@@ -7442,6 +7545,12 @@
       transform: scale(0.96);
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-select__popup {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-select__list {
       gap: var(--jaci-spacing-1);
       overscroll-behavior: contain;
@@ -7641,10 +7750,10 @@
 }
 
     .jaci-sidebar__backdrop {
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-xs));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       inset: var(--jaci-spacing-0);
-      --backdrop-blur: blur(var(--jaci-blurs-xs));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       position: fixed;
       z-index: 50;
@@ -7654,6 +7763,12 @@
       opacity: 0;
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-sidebar__backdrop {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-sidebar__viewport {
       inset: var(--jaci-spacing-0);
       overflow: hidden;
@@ -8702,15 +8817,15 @@
       --jaci-toast-peek: 0.75rem;
       --jaci-toast-scale: calc(max(0, 1 - (var(--toast-index) * 0.08)));
       --jaci-toast-shrink: calc(1 - var(--jaci-toast-scale));
+      --jaci-backdrop-filter: blur(var(--jaci-blurs-md));
+      --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
       margin: var(--jaci-spacing-0);
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-xl);
       border-style: solid;
       border-width: 1px;
       overflow: hidden;
-      --backdrop-blur: blur(var(--jaci-blurs-md));
-      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--jaci-backdrop-filter);
       background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-lg);
       box-sizing: border-box;
@@ -8776,6 +8891,12 @@
       transform: translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--jaci-toast-offset-y));
 }
 
+    @supports (-webkit-backdrop-filter: blur(0)) {
+      .jaci-toast__root {
+        -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
     .jaci-toast__content {
       padding: var(--jaci-spacing-4);
       gap: var(--jaci-spacing-4);
@@ -9835,6 +9956,8 @@
 }
 
   .jaci-carousel__indicators--orientation_horizontal {
+    --jaci-backdrop-filter: blur(var(--jaci-blurs-sm));
+    --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
     padding: var(--jaci-spacing-2);
     border-color: var(--jaci-colors-border-default);
     border-radius: var(--jaci-radii-lg);
@@ -9843,13 +9966,17 @@
     gap: var(--jaci-spacing-2);
     margin-inline: auto;
     background-color: var(--jaci-colors-surface-raised);
-    --backdrop-blur: blur(var(--jaci-blurs-sm));
-    backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-    -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+    backdrop-filter: var(--jaci-backdrop-filter);
     box-shadow: var(--jaci-shadows-sm);
     width: fit-content;
 }
 
+  @supports (-webkit-backdrop-filter: blur(0)) {
+    .jaci-carousel__indicators--orientation_horizontal {
+      -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
   .jaci-carousel__item--active_true {
     opacity: 1;
 }
@@ -9921,6 +10048,8 @@
 }
 
   .jaci-carousel__indicators--orientation_vertical {
+    --jaci-backdrop-filter: blur(var(--jaci-blurs-sm));
+    --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
     padding: var(--jaci-spacing-2);
     border-color: var(--jaci-colors-border-default);
     border-radius: var(--jaci-radii-lg);
@@ -9928,9 +10057,7 @@
     border-width: 1px;
     gap: var(--jaci-spacing-2);
     background-color: var(--jaci-colors-surface-raised);
-    --backdrop-blur: blur(var(--jaci-blurs-sm));
-    backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-    -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+    backdrop-filter: var(--jaci-backdrop-filter);
     flex-direction: column;
     position: absolute;
     box-shadow: var(--jaci-shadows-sm);
@@ -9940,6 +10067,12 @@
     top: 50%;
 }
 
+  @supports (-webkit-backdrop-filter: blur(0)) {
+    .jaci-carousel__indicators--orientation_vertical {
+      -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
   .jaci-carousel__indicator--orientation_vertical {
     height: var(--jaci-sizes-2);
     width: var(--jaci-sizes-2);
@@ -10011,11 +10144,14 @@
 }
 
   .jaci-command__list--mode_dropdown {
+    --jaci-backdrop-filter: blur(var(--jaci-blurs-md));
+    --jaci-backdrop-filter-webkit: var(--jaci-backdrop-filter);
     border-color: var(--jaci-colors-border-default);
     border-radius: var(--jaci-radii-lg);
     border-style: solid;
     border-width: 1px;
-    background-color: var(--jaci-colors-surface-raised);
+    backdrop-filter: var(--jaci-backdrop-filter);
+    background-color: var(--jaci-colors-surface-overlay);
     box-shadow: var(--jaci-shadows-lg);
     position: absolute;
     z-index: 50;
@@ -10025,6 +10161,12 @@
     width: 100%;
 }
 
+  @supports (-webkit-backdrop-filter: blur(0)) {
+    .jaci-command__list--mode_dropdown {
+      -webkit-backdrop-filter: var(--jaci-backdrop-filter-webkit);
+}
+}
+
   .jaci-toggleSwitch__root--checked_true {
     background-color: var(--jaci-colors-accent-default);
 }
@@ -10730,12 +10872,12 @@
 
 @layer utilities{
 
-  .jaci-bg_white {
-    background: var(--jaci-colors-white);
+  .jaci-bg_var\(--jaci-colors-surface-raised\) {
+    background: var(--jaci-colors-surface-raised);
 }
 
-  .jaci-bg_transparent {
-    background: var(--jaci-colors-transparent);
+  .jaci-bg_\#ffffff {
+    background: #ffffff;
 }
 
   .jaci-gap_8px {
@@ -10754,8 +10896,8 @@
     page: 1px;
 }
 
-  .jaci-c_currentColor {
-    color: currentColor;
+  .jaci-c_\#18181b {
+    color: #18181b;
 }
 
   .jaci-translate-x_2 {