jaci-ui 0.8.0 → 0.9.1

package/dist/styles.css

@@ -669,13 +669,17 @@
       border-style: solid;
       border-width: 1px;
       background-color: var(--jaci-colors-surface-subtle);
+      color: var(--jaci-colors-fg-default);
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
       font-size: var(--jaci-font-sizes-sm);
       max-width: 100%;
 }
 
-    .jaci-code,.jaci-input {
-      color: var(--jaci-colors-fg-default);
+    .jaci-colorSwatch {
+      overflow: hidden;
+      display: inline-block;
+      flex-shrink: 0;
+      vertical-align: middle;
 }
 
     .jaci-input {
@@ -686,6 +690,7 @@
       outline: var(--jaci-borders-none);
       background-color: var(--jaci-colors-transparent);
       box-sizing: border-box;
+      color: var(--jaci-colors-fg-default);
       font-family: system-ui, sans-serif;
       --transition-duration: var(--jaci-durations-slow);
       transition-duration: var(--jaci-durations-slow);
@@ -769,6 +774,38 @@
       box-shadow: var(--jaci-shadows-sm);
 }
 
+    .jaci-downloadTrigger {
+      border-radius: var(--jaci-radii-md);
+      gap: var(--jaci-spacing-2);
+      text-decoration: none;
+      align-items: center;
+      cursor: pointer;
+      display: inline-flex;
+      font-weight: var(--jaci-font-weights-medium);
+      justify-content: center;
+      overflow-wrap: anywhere;
+      --transition-duration: var(--jaci-durations-fast);
+      transition-duration: var(--jaci-durations-fast);
+      --transition-prop: standard;
+      transition-property: standard;
+      --transition-easing: var(--jaci-easings-standard);
+      transition-timing-function: var(--jaci-easings-standard);
+      max-width: 100%;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-downloadTrigger:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.6;
+      pointer-events: none;
+}
+
+    .jaci-downloadTrigger:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: focus.ring;
+      outline-offset: 2px;
+}
+
     .jaci-badge {
       gap: var(--jaci-spacing-1);
       border-radius: var(--jaci-radii-full);
@@ -847,6 +884,15 @@
       flex-shrink: 0;
 }
 
+    .jaci-qrCode {
+      padding: var(--jaci-spacing-2);
+      border-radius: var(--jaci-radii-lg);
+      overflow: hidden;
+      background-color: var(--jaci-colors-surface-raised);
+      display: block;
+      max-width: 100%;
+}
+
     .jaci-quote {
       border-inline-start: 4px solid;
       gap: var(--jaci-spacing-3);
@@ -889,6 +935,10 @@
       display: block;
 }
 
+    .jaci-spacer {
+      flex-shrink: 0;
+}
+
     .jaci-statGroup {
       display: grid;
       min-width: var(--jaci-sizes-0);
@@ -1142,6 +1192,55 @@
     white-space: nowrap;
 }
 
+  .jaci-code--lineNumbers_true[data-line-numbers='true'] {
+    column-gap: var(--jaci-spacing-3);
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+}
+
+  .jaci-code--lineNumbers_true[data-line-numbers='true'] [data-slot='code-gutter'] {
+    color: var(--jaci-colors-fg-muted);
+    display: flex;
+    flex-direction: column;
+    text-align: end;
+    -webkit-user-select: none;
+    user-select: none;
+    min-width: 3ch;
+}
+
+  .jaci-code--lineNumbers_true[data-line-numbers='true'] [data-slot='code-content'] {
+    min-width: var(--jaci-sizes-0);
+}
+
+  .jaci-colorSwatch--size_md {
+    height: var(--jaci-sizes-6);
+    width: var(--jaci-sizes-6);
+}
+
+  .jaci-colorSwatch--shape_circle {
+    border-radius: var(--jaci-radii-full);
+}
+
+  .jaci-colorSwatch--border_true {
+    border-color: var(--jaci-colors-border-default);
+    border-style: solid;
+    border-width: 1px;
+}
+
+  .jaci-colorSwatch--size_sm {
+    height: var(--jaci-sizes-4);
+    width: var(--jaci-sizes-4);
+}
+
+  .jaci-colorSwatch--size_lg {
+    height: var(--jaci-sizes-8);
+    width: var(--jaci-sizes-8);
+}
+
+  .jaci-colorSwatch--shape_square {
+    border-radius: var(--jaci-radii-md);
+}
+
   .jaci-input--size_md {
     min-height: var(--jaci-sizes-10);
 }
@@ -1175,6 +1274,52 @@
     font-size: var(--jaci-font-sizes-lg);
 }
 
+  .jaci-downloadTrigger--variant_outline {
+    border-color: var(--jaci-colors-border-default);
+    border-style: solid;
+    border-width: 1px;
+    color: var(--jaci-colors-fg-default);
+}
+
+  .jaci-downloadTrigger--variant_outline:is(:hover, [data-hover]) {
+    background-color: var(--jaci-colors-surface-subtle);
+}
+
+  .jaci-downloadTrigger--size_md {
+    padding-inline: var(--jaci-spacing-4);
+    font-size: var(--jaci-font-sizes-sm);
+    min-height: var(--jaci-sizes-10);
+}
+
+  .jaci-downloadTrigger--variant_solid {
+    background-color: var(--jaci-colors-accent-default);
+    color: var(--jaci-colors-fg-on-accent);
+}
+
+  .jaci-downloadTrigger--variant_solid:is(:hover, [data-hover]) {
+    background-color: var(--jaci-colors-accent-hover);
+}
+
+  .jaci-downloadTrigger--variant_ghost {
+    color: var(--jaci-colors-fg-default);
+}
+
+  .jaci-downloadTrigger--variant_ghost:is(:hover, [data-hover]) {
+    background-color: var(--jaci-colors-surface-subtle);
+}
+
+  .jaci-downloadTrigger--size_sm {
+    padding-inline: var(--jaci-spacing-3);
+    font-size: var(--jaci-font-sizes-sm);
+    min-height: var(--jaci-sizes-8);
+}
+
+  .jaci-downloadTrigger--size_lg {
+    padding-inline: var(--jaci-spacing-5);
+    font-size: var(--jaci-font-sizes-md);
+    min-height: var(--jaci-sizes-12);
+}
+
   .jaci-badge--tone_neutral-solid {
     background: var(--jaci-colors-neutral-600);
     color: var(--jaci-colors-fg-on-accent);
@@ -1515,6 +1660,14 @@
     width: var(--jaci-sizes-10);
 }
 
+  .jaci-spacer--axis_vertical {
+    width: 100%;
+}
+
+  .jaci-spacer--axis_horizontal {
+    height: 1px;
+}
+
   .jaci-statGroup--columns_3 {
     grid-template-columns: minmax(0, 1fr);
 }
@@ -2097,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);
@@ -2117,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);
@@ -2608,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;
@@ -2633,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;
@@ -2666,19 +2832,147 @@
 
     .jaci-card__footer {
       gap: var(--jaci-spacing-2);
+      display: flex;
+      flex-direction: column;
       flex-wrap: wrap;
       margin-top: auto;
       padding-bottom: var(--jaci-spacing-6);
       padding-top: var(--jaci-spacing-2);
 }
 
-    .jaci-card__footer,.jaci-checkbox-group__root {
+    .jaci-carousel__root {
+      position: relative;
+      min-width: var(--jaci-sizes-0);
+      width: 100%;
+}
+
+    .jaci-carousel__viewport {
+      overflow: hidden;
+      position: relative;
+      touch-action: pan-y;
+      width: 100%;
+}
+
+    .jaci-carousel__track {
       display: flex;
-      flex-direction: column;
+      --transition-duration: var(--jaci-durations-normal);
+      transition-duration: var(--jaci-durations-normal);
+      --transition-prop: transform;
+      transition-property: transform;
+      --transition-easing: var(--jaci-easings-standard);
+      transition-timing-function: var(--jaci-easings-standard);
+      will-change: transform;
+}
+
+    .jaci-carousel__item {
+      flex: 0 0 100%;
+      box-sizing: border-box;
+      overflow-wrap: anywhere;
+      position: relative;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-carousel__media {
+      overflow: hidden;
+      min-width: var(--jaci-sizes-0);
+      width: 100%;
+}
+
+    .jaci-carousel__media > * {
+      max-width: 100%;
+}
+
+    .jaci-carousel__caption {
+      padding-block: var(--jaci-spacing-3);
+      padding-inline: var(--jaci-spacing-1);
+      overflow-wrap: anywhere;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-carousel__title {
+      margin: var(--jaci-spacing-0);
+      color: var(--jaci-colors-fg-default);
+      font-size: var(--jaci-font-sizes-lg);
+      font-weight: var(--jaci-font-weights-semibold);
+}
+
+    .jaci-carousel__description {
+      margin: 1 0 0;
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+}
+
+    .jaci-carousel__control {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-full);
+      border-style: solid;
+      border-width: 1px;
+      align-items: center;
+      appearance: none;
+      -webkit-appearance: none;
+      background-color: var(--jaci-colors-surface-raised);
+      color: var(--jaci-colors-fg-default);
+      cursor: pointer;
+      display: inline-flex;
+      justify-content: center;
+      position: absolute;
+      transform: translateY(-50%);
+      z-index: 1;
+      height: var(--jaci-sizes-9);
+      top: 40%;
+      width: var(--jaci-sizes-9);
+}
+
+    .jaci-carousel__control:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .jaci-carousel__control:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 2px;
+}
+
+    .jaci-carousel__control:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+}
+
+    .jaci-carousel__indicators {
+      padding: var(--jaci-spacing-3);
+      gap: var(--jaci-spacing-2);
+      align-items: center;
+      display: flex;
+      justify-content: center;
+}
+
+    .jaci-carousel__indicator {
+      border: 0;
+      padding: var(--jaci-spacing-0);
+      border-radius: var(--jaci-radii-full);
+      appearance: none;
+      -webkit-appearance: none;
+      background-color: var(--jaci-colors-border-default);
+      cursor: pointer;
+      height: var(--jaci-sizes-2);
+      width: var(--jaci-sizes-2);
+}
+
+    .jaci-carousel__indicator:is([aria-selected=true], [data-selected]) {
+      background-color: var(--jaci-colors-accent-default);
+      width: var(--jaci-sizes-5);
+}
+
+    .jaci-carousel__indicator:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 2px;
 }
 
     .jaci-checkbox-group__root {
       gap: var(--jaci-spacing-3);
+      display: flex;
+      flex-direction: column;
       width: 100%;
 }
 
@@ -2940,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;
@@ -2959,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;
@@ -3204,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;
@@ -3235,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;
@@ -3379,25 +3685,41 @@
       border-width: 1px;
       overflow: hidden;
       background-color: var(--jaci-colors-surface-raised);
+      box-sizing: border-box;
       color: var(--jaci-colors-fg-default);
       display: flex;
       flex-direction: column;
-      max-width: 100%;
-      width: 24rem;
+      min-width: var(--jaci-sizes-0);
+      width: 100%;
+      max-width: 24rem;
+}
+
+    .jaci-command__root:focus-within {
+      border-color: var(--jaci-colors-accent-default);
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 2px;
+      outline-style: solid;
+      outline-width: 2px;
 }
 
     .jaci-command__input {
       border: 0;
       outline: 0;
+      overflow: hidden;
       padding-inline: var(--jaci-spacing-3);
       background-color: var(--jaci-colors-transparent);
+      box-sizing: border-box;
       color: var(--jaci-colors-fg-default);
+      display: block;
+      flex-shrink: 0;
       font-family: inherit;
       font-size: var(--jaci-font-sizes-sm);
+      text-overflow: ellipsis;
       border-bottom-color: var(--jaci-colors-border-default);
       border-bottom-style: solid;
       border-bottom-width: 1px;
       min-height: var(--jaci-sizes-11);
+      min-width: var(--jaci-sizes-0);
       width: 100%;
 }
 
@@ -3411,35 +3733,46 @@
 }
 
     .jaci-command__input:is(:focus, [data-focus]) {
-      box-shadow: inset 0 -2px 0 accent.default;
+      box-shadow: none;
 }
 
     .jaci-command__list {
-      padding: var(--jaci-spacing-1);
+      box-sizing: border-box;
+      overflow-wrap: anywhere;
       max-height: 20rem;
+      overflow-x: hidden;
       overflow-y: auto;
+      width: 100%;
 }
 
-    .jaci-command__group {
+    .jaci-command__list,.jaci-command__group {
       padding: var(--jaci-spacing-1);
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-command__group {
       gap: var(--jaci-spacing-1);
       display: flex;
       flex-direction: column;
 }
 
     .jaci-command__groupHeading {
-      padding-inline: var(--jaci-spacing-2);
       padding-block: var(--jaci-spacing-1);
       color: var(--jaci-colors-fg-muted);
       font-size: var(--jaci-font-sizes-xs);
       font-weight: 700;
 }
 
+    .jaci-command__groupHeading,.jaci-command__item {
+      padding-inline: var(--jaci-spacing-2);
+      overflow-wrap: anywhere;
+      min-width: var(--jaci-sizes-0);
+}
+
     .jaci-command__item {
       border-radius: var(--jaci-radii-md);
       gap: var(--jaci-spacing-2);
       outline: 0;
-      padding-inline: var(--jaci-spacing-2);
       padding-block: var(--jaci-spacing-2);
       align-items: center;
       cursor: pointer;
@@ -3481,9 +3814,13 @@
 }
 
     .jaci-command__separator {
+      border: 0;
       margin-block: var(--jaci-spacing-1);
+      margin-inline: var(--jaci-spacing-0);
       background-color: var(--jaci-colors-border-default);
+      display: block;
       height: 1px;
+      width: 100%;
 }
 
     .jaci-menu__trigger {
@@ -3536,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);
@@ -3543,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);
@@ -3569,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);
@@ -4295,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);
@@ -4320,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;
@@ -4695,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);
@@ -4711,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;
@@ -4943,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);
@@ -4962,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;
@@ -5309,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;
@@ -5323,18 +5685,25 @@
       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);
-      padding: var(--jaci-spacing-4);
       justify-content: center;
       position: fixed;
       z-index: 60;
 }
 
     .jaci-image__viewport,.jaci-image__popup {
-      overflow: auto;
+      overflow: hidden;
       align-items: center;
       display: flex;
+      height: 100dvh;
+      width: 100vw;
 }
 
     .jaci-image__popup {
@@ -5348,8 +5717,6 @@
       transition-property: opacity, transform;
       --transition-easing: var(--jaci-easings-standard);
       transition-timing-function: var(--jaci-easings-standard);
-      max-height: calc(100dvh - 2rem);
-      max-width: calc(100vw - 2rem);
       min-width: var(--jaci-sizes-0);
 }
 
@@ -5359,34 +5726,38 @@
 }
 
     .jaci-image__lightboxImage {
-      border-radius: var(--jaci-radii-xl);
+      flex: 1 1 0%;
       display: block;
       object-fit: contain;
-      max-height: calc(100dvh - 8rem);
-      max-width: calc(100vw - 4rem);
+      min-height: var(--jaci-sizes-0);
+      max-height: calc(100% - 6rem);
+      max-width: 100%;
 }
 
     .jaci-image__closeRow {
-      align-items: center;
+      padding-inline: 1rem;
       display: flex;
       justify-content: flex-end;
       min-height: 2rem;
       width: 100%;
 }
 
+    .jaci-image__closeRow,.jaci-image__close {
+      align-items: center;
+      flex-shrink: 0;
+}
+
     .jaci-image__close {
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-full);
       border-style: solid;
       border-width: 1px;
-      align-items: center;
       appearance: none;
       -webkit-appearance: none;
       background-color: var(--jaci-colors-surface-raised);
       color: var(--jaci-colors-fg-default);
       cursor: pointer;
       display: inline-flex;
-      flex-shrink: 0;
       justify-content: center;
       height: var(--jaci-sizes-8);
       width: var(--jaci-sizes-8);
@@ -5453,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;
@@ -5467,18 +5838,25 @@
       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);
-      padding: var(--jaci-spacing-4);
       justify-content: center;
       position: fixed;
       z-index: 60;
 }
 
     .jaci-figure__viewport,.jaci-figure__popup {
-      overflow: auto;
+      overflow: hidden;
       align-items: center;
       display: flex;
+      height: 100dvh;
+      width: 100vw;
 }
 
     .jaci-figure__popup {
@@ -5492,8 +5870,6 @@
       transition-property: opacity, transform;
       --transition-easing: var(--jaci-easings-standard);
       transition-timing-function: var(--jaci-easings-standard);
-      max-height: calc(100dvh - 2rem);
-      max-width: calc(100vw - 2rem);
       min-width: var(--jaci-sizes-0);
 }
 
@@ -5503,11 +5879,12 @@
 }
 
     .jaci-figure__lightboxImage {
-      border-radius: var(--jaci-radii-xl);
+      flex: 1 1 0%;
       display: block;
       object-fit: contain;
-      max-height: calc(100dvh - 8rem);
-      max-width: calc(100vw - 4rem);
+      min-height: var(--jaci-sizes-0);
+      max-height: calc(100% - 6rem);
+      max-width: 100%;
 }
 
     .jaci-figure__lightboxCaption {
@@ -5516,6 +5893,7 @@
       border-radius: var(--jaci-radii-lg);
       border-style: solid;
       border-width: 1px;
+      overflow: hidden;
       background-color: var(--jaci-colors-surface-canvas);
       box-sizing: border-box;
       color: var(--jaci-colors-fg-default);
@@ -5523,31 +5901,35 @@
       line-height: 1.5;
       overflow-wrap: anywhere;
       text-align: center;
-      max-width: min(48rem, calc(100vw - 4rem));
+      max-height: 20vh;
+      max-width: min(48rem, calc(100% - 2rem));
       width: 100%;
 }
 
     .jaci-figure__closeRow {
-      align-items: center;
+      padding-inline: 1rem;
       display: flex;
       justify-content: flex-end;
       min-height: 2rem;
       width: 100%;
 }
 
+    .jaci-figure__closeRow,.jaci-figure__close {
+      align-items: center;
+      flex-shrink: 0;
+}
+
     .jaci-figure__close {
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-full);
       border-style: solid;
       border-width: 1px;
-      align-items: center;
       appearance: none;
       -webkit-appearance: none;
       background-color: var(--jaci-colors-surface-raised);
       color: var(--jaci-colors-fg-default);
       cursor: pointer;
       display: inline-flex;
-      flex-shrink: 0;
       justify-content: center;
       height: var(--jaci-sizes-8);
       width: var(--jaci-sizes-8);
@@ -5766,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);
@@ -5773,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;
@@ -5791,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;
 }
@@ -5859,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);
@@ -5876,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;
@@ -5887,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);
@@ -5932,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);
@@ -6022,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;
@@ -6045,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 {
@@ -6056,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;
@@ -6253,16 +6664,28 @@
 }
 
     .jaci-numberField__group {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-lg);
+      border-style: solid;
+      border-width: 1px;
+      overflow: hidden;
       align-items: stretch;
       display: flex;
       width: 100%;
 }
 
+    .jaci-numberField__group:is(:invalid, [data-invalid], [aria-invalid=true]) {
+      border-color: var(--jaci-colors-danger);
+}
+
+    .jaci-numberField__group:focus-within {
+      border-color: var(--jaci-colors-accent-default);
+      box-shadow: 0 0 0 2px colors\.focus\.ring;
+}
+
     .jaci-numberField__input {
-      border-color: var(--jaci-colors-border-default);
-      border-style: solid;
-      border-width: 2px;
-      border-radius: var(--jaci-radii-lg);
+      border: 0;
+      border-radius: 0;
       flex: 1 1 0%;
       outline: var(--jaci-borders-none);
       padding-inline: var(--jaci-spacing-3);
@@ -6274,35 +6697,28 @@
       min-width: var(--jaci-sizes-0);
 }
 
-    .jaci-numberField__input:is(:invalid, [data-invalid], [aria-invalid=true]) {
-      border-color: var(--jaci-colors-danger);
-}
-
     .jaci-numberField__input:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
       cursor: not-allowed;
       opacity: 0.55;
 }
 
     .jaci-numberField__input:is(:focus-visible, [data-focus-visible]) {
-      border-color: var(--jaci-colors-accent-default);
-      outline: 2px solid;
-      outline-color: var(--jaci-colors-accent-default);
-      outline-offset: 2px;
+      outline: var(--jaci-borders-none);
 }
 
     .jaci-numberField__increment {
       border-color: var(--jaci-colors-border-default);
       border-style: solid;
-      border-width: 2px;
-      border-radius: var(--jaci-radii-md);
+      border-width: 0;
+      border-radius: 0;
       align-items: center;
       background-color: var(--jaci-colors-surface-subtle);
       color: var(--jaci-colors-fg-default);
       cursor: pointer;
       display: inline-flex;
       justify-content: center;
+      border-left-width: 1px;
       min-width: var(--jaci-sizes-8);
-      margin-left: var(--jaci-spacing-1);
 }
 
     .jaci-numberField__increment:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
@@ -6311,9 +6727,8 @@
 }
 
     .jaci-numberField__increment:is(:focus-visible, [data-focus-visible]) {
-      outline: 2px solid;
-      outline-color: var(--jaci-colors-accent-default);
-      outline-offset: 2px;
+      outline: var(--jaci-borders-none);
+      box-shadow: inset 0 0 0 2px colors\.focus\.ring;
 }
 
     .jaci-numberField__increment:is(:hover, [data-hover]) {
@@ -6323,16 +6738,16 @@
     .jaci-numberField__decrement {
       border-color: var(--jaci-colors-border-default);
       border-style: solid;
-      border-width: 2px;
-      border-radius: var(--jaci-radii-md);
+      border-width: 0;
+      border-radius: 0;
       align-items: center;
       background-color: var(--jaci-colors-surface-subtle);
       color: var(--jaci-colors-fg-default);
       cursor: pointer;
       display: inline-flex;
       justify-content: center;
+      border-right-width: 1px;
       min-width: var(--jaci-sizes-8);
-      margin-right: var(--jaci-spacing-1);
 }
 
     .jaci-numberField__decrement:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
@@ -6341,9 +6756,8 @@
 }
 
     .jaci-numberField__decrement:is(:focus-visible, [data-focus-visible]) {
-      outline: 2px solid;
-      outline-color: var(--jaci-colors-accent-default);
-      outline-offset: 2px;
+      outline: var(--jaci-borders-none);
+      box-shadow: inset 0 0 0 2px colors\.focus\.ring;
 }
 
     .jaci-numberField__decrement:is(:hover, [data-hover]) {
@@ -6681,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);
@@ -6711,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);
@@ -6768,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;
@@ -6782,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;
@@ -7088,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;
@@ -7119,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;
@@ -7318,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;
@@ -7331,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;
@@ -8379,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;
@@ -8453,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);
@@ -9297,9 +9741,6 @@
 }
       .jaci-drawer__footer {
         padding: var(--jaci-spacing-6);
-}
-      .jaci-image__viewport,.jaci-figure__viewport {
-        padding: var(--jaci-spacing-8);
 }
       .jaci-navbar__bar {
         padding: var(--jaci-spacing-4);
@@ -9373,7 +9814,7 @@
 }
 
     @media (prefers-reduced-motion: reduce) {
-      .jaci-dialog__popup,.jaci-menu__popup,.jaci-drawer__popup,.jaci-image__popup,.jaci-figure__popup,.jaci-menubar__trigger,.jaci-popover__popup,.jaci-select__popup {
+      .jaci-dialog__popup,.jaci-carousel__track,.jaci-menu__popup,.jaci-drawer__popup,.jaci-image__popup,.jaci-figure__popup,.jaci-menubar__trigger,.jaci-popover__popup,.jaci-select__popup {
         --transition-duration: 0ms;
         transition-duration: 0ms;
         --transition-prop: none;
@@ -9502,6 +9943,150 @@
     background-color: var(--jaci-colors-surface-raised);
 }
 
+  .jaci-carousel__root--orientation_horizontal [data-slot='carousel-previous'] {
+    left: var(--jaci-spacing-2);
+}
+
+  .jaci-carousel__root--orientation_horizontal [data-slot='carousel-next'] {
+    right: var(--jaci-spacing-2);
+}
+
+  .jaci-carousel__track--orientation_horizontal {
+    flex-direction: row;
+}
+
+  .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);
+    border-style: solid;
+    border-width: 1px;
+    gap: var(--jaci-spacing-2);
+    margin-inline: auto;
+    background-color: var(--jaci-colors-surface-raised);
+    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;
+}
+
+  .jaci-carousel__root--orientation_vertical {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    padding-inline-end: var(--jaci-spacing-12);
+    height: 100%;
+    min-height: var(--jaci-sizes-0);
+}
+
+  .jaci-carousel__root--orientation_vertical [data-slot='carousel-previous'] {
+    top: var(--jaci-spacing-2);
+}
+
+  .jaci-carousel__root--orientation_vertical [data-slot='carousel-next'] {
+    bottom: var(--jaci-spacing-2);
+}
+
+  .jaci-carousel__viewport--orientation_vertical {
+    flex: 1 1 0%;
+    touch-action: pan-x;
+    min-height: var(--jaci-sizes-0);
+}
+
+  .jaci-carousel__track--orientation_vertical,.jaci-carousel__item--orientation_vertical {
+    flex-direction: column;
+    height: 100%;
+}
+
+  .jaci-carousel__item--orientation_vertical {
+    display: flex;
+    flex-basis: 100%;
+    min-height: var(--jaci-sizes-0);
+}
+
+  .jaci-carousel__media--orientation_vertical {
+    flex: 1 1 auto;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: var(--jaci-sizes-0);
+    width: 100%;
+}
+
+  .jaci-carousel__media--orientation_vertical img {
+    object-fit: contain;
+    height: auto;
+    max-height: 100%;
+    max-width: 100%;
+}
+
+  .jaci-carousel__media--orientation_vertical > * {
+    max-height: 100%;
+}
+
+  .jaci-carousel__caption--orientation_vertical {
+    flex: 0 0 auto;
+    padding-bottom: var(--jaci-spacing-12);
+    width: 100%;
+}
+
+  .jaci-carousel__control--orientation_vertical {
+    transform: translateX(-50%);
+    left: 50%;
+    top: auto;
+}
+
+  .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);
+    border-style: solid;
+    border-width: 1px;
+    gap: var(--jaci-spacing-2);
+    background-color: var(--jaci-colors-surface-raised);
+    backdrop-filter: var(--jaci-backdrop-filter);
+    flex-direction: column;
+    position: absolute;
+    box-shadow: var(--jaci-shadows-sm);
+    transform: translateY(-50%);
+    z-index: 1;
+    right: var(--jaci-spacing-2);
+    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);
+}
+
+  .jaci-carousel__indicator--orientation_vertical:is([aria-selected=true], [data-selected]) {
+    height: var(--jaci-sizes-5);
+    width: var(--jaci-sizes-2);
+}
+
+  .jaci-carousel__item--active_false {
+    opacity: 0.9;
+}
+
   .jaci-field__label--invalid_true {
     color: var(--jaci-colors-danger);
 }
@@ -9527,18 +10112,45 @@
 }
 
   .jaci-command__root--mode_dropdown {
+    border: 0;
+    border-radius: 0;
     overflow: visible;
+    background-color: var(--jaci-colors-transparent);
+    box-shadow: none;
     position: relative;
 }
 
+  .jaci-command__root--mode_dropdown:focus-within {
+    border-color: var(--jaci-colors-transparent);
+    outline: 0;
+    box-shadow: none;
+}
+
+  .jaci-command__input--mode_dropdown {
+    border-color: var(--jaci-colors-border-default);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: var(--jaci-radii-lg);
+    background-color: var(--jaci-colors-surface-raised);
+    box-shadow: var(--jaci-shadows-sm);
+}
+
+  .jaci-command__input--mode_dropdown:is(:focus, [data-focus]) {
+    box-shadow: none;
+    outline-color: var(--jaci-colors-focus);
+    outline-offset: var(--jaci-spacing-0);
+    outline-style: solid;
+    outline-width: 2px;
+}
+
   .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;
-    --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);
     position: absolute;
@@ -9546,7 +10158,13 @@
     left: var(--jaci-spacing-0);
     max-width: calc(100vw - 2rem);
     top: calc(100% + 0.5rem);
-    width: min(100%, calc(100vw - 2rem));
+    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 {
@@ -10254,6 +10872,14 @@
 
 @layer utilities{
 
+  .jaci-bg_white {
+    background: var(--jaci-colors-white);
+}
+
+  .jaci-bg_transparent {
+    background: var(--jaci-colors-transparent);
+}
+
   .jaci-gap_8px {
     gap: 8px;
 }
@@ -10269,4 +10895,56 @@
   .jaci-page_1 {
     page: 1px;
 }
+
+  .jaci-c_currentColor {
+    color: currentColor;
+}
+
+  .jaci-translate-x_2 {
+    --translate-x: var(--jaci-spacing-2);
+}
+
+  .jaci-translate-y_2 {
+    --translate-y: var(--jaci-spacing-2);
+}
+
+  .jaci-w_0 {
+    width: var(--jaci-sizes-0);
+}
+
+  .jaci-w_2 {
+    width: var(--jaci-sizes-2);
+}
+
+  .jaci-w_4 {
+    width: var(--jaci-sizes-4);
+}
+
+  .jaci-w_6 {
+    width: var(--jaci-sizes-6);
+}
+
+  .jaci-w_8 {
+    width: var(--jaci-sizes-8);
+}
+
+  .jaci-h_0 {
+    height: var(--jaci-sizes-0);
+}
+
+  .jaci-h_2 {
+    height: var(--jaci-sizes-2);
+}
+
+  .jaci-h_4 {
+    height: var(--jaci-sizes-4);
+}
+
+  .jaci-h_6 {
+    height: var(--jaci-sizes-6);
+}
+
+  .jaci-h_8 {
+    height: var(--jaci-sizes-8);
+}
 }