jaci-ui 0.4.0 → 0.6.0

package/dist/styles.css

@@ -46,6 +46,16 @@
     --skew-y: 0;
     --scale-x: 1;
     --scale-y: 1;
+}
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-jaci-component],[data-jaci-component] * {
+      animation-duration: 0ms;
+      animation-iteration-count: 1;
+      scroll-behavior: auto;
+      --transition-duration: 0ms;
+      transition-duration: 0ms;
+}
 }
 }
 
@@ -1726,7 +1736,9 @@
     .jaci-dialog__footer {
       padding: var(--jaci-spacing-4);
       gap: var(--jaci-spacing-2);
+      align-items: center;
       display: flex;
+      flex-shrink: 0;
       flex-wrap: wrap;
       justify-content: flex-end;
       border-top-color: var(--jaci-colors-border-default);
@@ -1734,18 +1746,20 @@
       border-top-width: 1px;
 }
 
-    .jaci-dialog__footer,.jaci-dialog__close {
-      align-items: center;
-      flex-shrink: 0;
+    .jaci-dialog__footer > * {
+      max-width: 100%;
+      min-width: var(--jaci-sizes-0);
 }
 
     .jaci-dialog__close {
       border: 0;
       border-radius: var(--jaci-radii-full);
+      align-items: center;
       background-color: var(--jaci-colors-transparent);
       color: var(--jaci-colors-fg-default);
       cursor: pointer;
       display: inline-flex;
+      flex-shrink: 0;
       font-family: system-ui, sans-serif;
       font-size: var(--jaci-font-sizes-xl);
       justify-content: center;
@@ -3448,6 +3462,142 @@
       width: 1px;
 }
 
+    .jaci-data-toolbar__root {
+      gap: var(--jaci-spacing-2);
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      min-width: var(--jaci-sizes-0);
+      width: 100%;
+}
+
+    .jaci-data-toolbar__search {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-lg);
+      border-style: solid;
+      border-width: 1px;
+      flex: 1 1 14rem;
+      outline: var(--jaci-borders-none);
+      padding-inline: var(--jaci-spacing-3);
+      padding-block: var(--jaci-spacing-2);
+      background-color: var(--jaci-colors-surface-raised);
+      box-sizing: border-box;
+      color: var(--jaci-colors-fg-default);
+      min-height: var(--jaci-sizes-10);
+      min-width: 10rem;
+}
+
+    .jaci-data-toolbar__search:is(:focus-visible, [data-focus-visible]) {
+      border-color: var(--jaci-colors-accent-default);
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 1px;
+}
+
+    .jaci-data-toolbar__filters {
+      gap: var(--jaci-spacing-2);
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-data-toolbar__sort {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-lg);
+      border-style: solid;
+      border-width: 1px;
+      outline: var(--jaci-borders-none);
+      padding-inline: var(--jaci-spacing-3);
+      padding-block: var(--jaci-spacing-2);
+      background-color: var(--jaci-colors-surface-raised);
+      color: var(--jaci-colors-fg-default);
+      max-width: 100%;
+      min-height: var(--jaci-sizes-10);
+      min-width: 9rem;
+}
+
+    .jaci-data-toolbar__sort:is(:focus-visible, [data-focus-visible]) {
+      border-color: var(--jaci-colors-accent-default);
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 1px;
+}
+
+    .jaci-data-toolbar__selection {
+      gap: var(--jaci-spacing-2);
+      align-items: center;
+      display: inline-flex;
+      flex-wrap: wrap;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-data-toolbar__clearSelection {
+      border: 0;
+      border-radius: var(--jaci-radii-md);
+      padding-inline: var(--jaci-spacing-2);
+      align-items: center;
+      background-color: var(--jaci-colors-transparent);
+      color: var(--jaci-colors-accent-default);
+      cursor: pointer;
+      display: inline-flex;
+      font-size: var(--jaci-font-sizes-sm);
+      min-height: var(--jaci-sizes-8);
+}
+
+    .jaci-data-toolbar__clearSelection:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .jaci-data-toolbar__clearSelection:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 1px;
+}
+
+    .jaci-data-toolbar__clearSelection:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+}
+
+    .jaci-data-toolbar__actions {
+      gap: var(--jaci-spacing-2);
+      align-items: center;
+      display: inline-flex;
+      flex-wrap: wrap;
+      margin-inline-start: auto;
+}
+
+    .jaci-data-toolbar__clear {
+      border: 0;
+      border-radius: var(--jaci-radii-md);
+      padding-inline: var(--jaci-spacing-2);
+      align-items: center;
+      background-color: var(--jaci-colors-transparent);
+      color: var(--jaci-colors-fg-muted);
+      cursor: pointer;
+      display: inline-flex;
+      min-height: var(--jaci-sizes-8);
+}
+
+    .jaci-data-toolbar__clear:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 1px;
+}
+
+    .jaci-data-toolbar__clear:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+      color: var(--jaci-colors-fg-default);
+}
+
+    .jaci-data-toolbar__separator {
+      background-color: var(--jaci-colors-border-default);
+      flex-shrink: 0;
+      height: var(--jaci-sizes-6);
+      width: 1px;
+}
+
     .jaci-data-view__root {
       gap: var(--jaci-spacing-4);
       color: var(--jaci-colors-fg-default);
@@ -3477,10 +3627,18 @@
 
     .jaci-data-view__toolbar {
       gap: var(--jaci-spacing-3);
+      justify-content: space-between;
+}
+
+    .jaci-data-view__toolbar,.jaci-data-view__filters {
       align-items: center;
       display: flex;
       flex-wrap: wrap;
-      justify-content: space-between;
+}
+
+    .jaci-data-view__filters {
+      gap: var(--jaci-spacing-2);
+      min-width: var(--jaci-sizes-0);
 }
 
     .jaci-data-view__content {
@@ -3488,6 +3646,19 @@
       width: 100%;
 }
 
+    .jaci-data-view__footer {
+      gap: var(--jaci-spacing-3);
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+}
+
+    .jaci-data-view__pagination {
+      min-width: var(--jaci-sizes-0);
+      width: 100%;
+}
+
     .jaci-data-view__loading,.jaci-data-view__empty {
       padding: var(--jaci-spacing-8);
       align-items: center;
@@ -4332,6 +4503,7 @@
       border-color: var(--jaci-colors-border-default);
       border-style: solid;
       border-width: 1px;
+      overflow: hidden;
       background-color: var(--jaci-colors-surface-canvas);
       box-shadow: var(--jaci-shadows-xl);
       color: var(--jaci-colors-fg-default);
@@ -4347,6 +4519,7 @@
       transition-timing-function: var(--jaci-easings-standard);
       min-height: var(--jaci-sizes-0);
       width: 100%;
+      max-width: 100vw;
 }
 
     .jaci-drawer__popup[data-side=bottom] {
@@ -4441,7 +4614,9 @@
     .jaci-drawer__footer {
       padding: var(--jaci-spacing-4);
       gap: var(--jaci-spacing-2);
+      align-items: center;
       display: flex;
+      flex-shrink: 0;
       flex-wrap: wrap;
       justify-content: flex-end;
       border-top-color: var(--jaci-colors-border-default);
@@ -4449,18 +4624,20 @@
       border-top-width: 1px;
 }
 
-    .jaci-drawer__footer,.jaci-drawer__close {
-      align-items: center;
-      flex-shrink: 0;
+    .jaci-drawer__footer > * {
+      max-width: 100%;
+      min-width: var(--jaci-sizes-0);
 }
 
     .jaci-drawer__close {
       border: 0;
       border-radius: var(--jaci-radii-full);
+      align-items: center;
       background-color: var(--jaci-colors-transparent);
       color: var(--jaci-colors-fg-default);
       cursor: pointer;
       display: inline-flex;
+      flex-shrink: 0;
       font-size: var(--jaci-font-sizes-xl);
       justify-content: center;
       height: var(--jaci-sizes-8);
@@ -4704,6 +4881,7 @@
 }
 
     .jaci-menubar__root,.jaci-menubar__trigger {
+      overflow: hidden;
       align-items: center;
       color: var(--jaci-colors-fg-default);
       box-sizing: border-box;
@@ -4715,7 +4893,6 @@
       border: 0;
       border-radius: var(--jaci-radii-lg);
       padding-inline: var(--jaci-spacing-3);
-      overflow: hidden;
       background-color: var(--jaci-colors-transparent);
       cursor: pointer;
       display: inline-flex;
@@ -5195,7 +5372,10 @@
 
     .jaci-navigation-menu__content {
       padding: var(--jaci-spacing-3);
-      min-width: 12rem;
+      overflow-wrap: anywhere;
+      max-width: calc(100vw - 2rem);
+      min-width: var(--jaci-sizes-0);
+      width: min(32rem, calc(100vw - 2rem));
 }
 
     .jaci-navigation-menu__link {
@@ -5260,8 +5440,12 @@
 }
 
     .jaci-navigation-menu__popup {
+      overflow: auto;
       background-color: var(--jaci-colors-surface-raised);
       color: var(--jaci-colors-fg-default);
+      overflow-wrap: anywhere;
+      max-width: calc(100vw - 2rem);
+      min-width: var(--jaci-sizes-0);
 }
 
     .jaci-navigation-menu__backdrop {
@@ -5721,9 +5905,15 @@
       border-radius: var(--jaci-radii-xl);
       border-style: solid;
       border-width: 1px;
-      background-color: var(--jaci-colors-surface-raised);
+      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, );
+      background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-xl);
       color: var(--jaci-colors-fg-default);
+      box-sizing: border-box;
+      overflow-wrap: anywhere;
       position: relative;
       --transition-duration: var(--jaci-durations-normal);
       transition-duration: var(--jaci-durations-normal);
@@ -5732,7 +5922,7 @@
       --transition-easing: var(--jaci-easings-standard);
       transition-timing-function: var(--jaci-easings-standard);
       max-width: calc(100vw - 2rem);
-      min-width: var(--jaci-sizes-56);
+      min-width: min(14rem, calc(100vw - 2rem));
 }
 
     .jaci-popover__popup[data-ending-style],.jaci-popover__popup[data-starting-style] {
@@ -5798,7 +5988,10 @@
 
     .jaci-popover__arrow {
       border-color: var(--jaci-colors-border-default);
-      background-color: var(--jaci-colors-surface-raised);
+      --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, );
+      background-color: var(--jaci-colors-surface-overlay);
       transform: rotate(45deg);
       border-right-style: solid;
       border-right-width: 1px;
@@ -6304,8 +6497,8 @@
 }
 
     .jaci-sidebar__root {
-      overflow: visible;
-      box-sizing: border-box;
+      background-color: var(--jaci-colors-surface-canvas);
+      color: var(--jaci-colors-fg-default);
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
@@ -6320,12 +6513,44 @@
       border-right-style: solid;
       border-right-width: 1px;
       height: 100%;
+}
+
+    .jaci-sidebar__root,.jaci-sidebar__popup {
+      overflow: visible;
+      box-sizing: border-box;
       min-width: var(--jaci-sizes-0);
 }
 
-    .jaci-sidebar__root,.jaci-sidebar__toggle {
-      background-color: var(--jaci-colors-surface-canvas);
-      color: var(--jaci-colors-fg-default);
+    .jaci-sidebar__popup {
+      border: 0;
+      padding: var(--jaci-spacing-0);
+      outline: var(--jaci-borders-none);
+      background-color: var(--jaci-colors-transparent);
+      height: 100dvh;
+      max-width: min(22rem, calc(100vw - 1rem));
+}
+
+    .jaci-sidebar__backdrop {
+      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, );
+      background-color: var(--jaci-colors-surface-overlay);
+      position: fixed;
+      z-index: 50;
+}
+
+    .jaci-sidebar__backdrop[data-ending-style],.jaci-sidebar__backdrop[data-starting-style] {
+      opacity: 0;
+}
+
+    .jaci-sidebar__viewport {
+      inset: var(--jaci-spacing-0);
+      overflow: hidden;
+      align-items: flex-start;
+      display: flex;
+      position: fixed;
+      z-index: 50;
 }
 
     .jaci-sidebar__toggle {
@@ -6335,7 +6560,9 @@
       border-style: solid;
       border-width: 1px;
       align-items: center;
+      background-color: var(--jaci-colors-surface-canvas);
       box-shadow: var(--jaci-shadows-md);
+      color: var(--jaci-colors-fg-default);
       cursor: pointer;
       display: inline-flex;
       font-family: system-ui, sans-serif;
@@ -6578,6 +6805,231 @@
       box-shadow: var(--jaci-shadows-lg);
 }
 
+    .jaci-stepper__root {
+      gap: var(--jaci-spacing-4);
+      color: var(--jaci-colors-fg-default);
+      flex-direction: column;
+}
+
+    .jaci-stepper__root,.jaci-stepper__list {
+      display: flex;
+      min-width: var(--jaci-sizes-0);
+      width: 100%;
+}
+
+    .jaci-stepper__list {
+      margin: var(--jaci-spacing-0);
+      padding: var(--jaci-spacing-0);
+      gap: var(--jaci-spacing-0);
+      list-style: none;
+}
+
+    .jaci-stepper__item {
+      display: flex;
+      position: relative;
+}
+
+    .jaci-stepper__item,.jaci-stepper__trigger {
+      flex: 1 1 0%;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-stepper__trigger {
+      border: 0;
+      padding: var(--jaci-spacing-0);
+      align-items: start;
+      background-color: var(--jaci-colors-transparent);
+      color: var(--jaci-colors-fg-muted);
+      cursor: pointer;
+      display: grid;
+      column-gap: var(--jaci-spacing-2);
+      row-gap: var(--jaci-spacing-1);
+      grid-template-columns: 2rem minmax(0, 1fr);
+      grid-template-rows: auto auto;
+      text-align: left;
+      --transition-duration: var(--jaci-durations-normal);
+      transition-duration: var(--jaci-durations-normal);
+      --transition-prop: color, opacity;
+      transition-property: color, opacity;
+      --transition-easing: var(--jaci-easings-standard);
+      transition-timing-function: var(--jaci-easings-standard);
+      width: 100%;
+}
+
+    .jaci-stepper__trigger > [data-slot=stepper-indicator] {
+      grid-column: 1;
+      grid-row: 1 / span 2;
+      position: relative;
+      z-index: 1;
+}
+
+    .jaci-stepper__trigger > [data-slot=stepper-title],.jaci-stepper__trigger > [data-slot=stepper-description] {
+      grid-column: 2;
+}
+
+    .jaci-stepper__trigger > span:not([data-slot]) {
+      grid-column: 2;
+      display: flex;
+      flex-direction: column;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-stepper__trigger:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.55;
+}
+
+    .jaci-stepper__trigger[data-status=current] {
+      color: var(--jaci-colors-fg-default);
+}
+
+    .jaci-stepper__trigger[data-status=complete] {
+      color: var(--jaci-colors-accent-default);
+}
+
+    .jaci-stepper__trigger[data-status=disabled] {
+      color: var(--jaci-colors-fg-muted);
+      cursor: not-allowed;
+      opacity: 0.55;
+}
+
+    .jaci-stepper__trigger:is(:focus-visible, [data-focus-visible]) {
+      border-radius: var(--jaci-radii-md);
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-accent-default);
+      outline-offset: 2px;
+}
+
+    .jaci-stepper__indicator {
+      border-color: var(--jaci-colors-border-strong);
+      border-radius: var(--jaci-radii-full);
+      border-style: solid;
+      border-width: 1px;
+      align-items: center;
+      background-color: var(--jaci-colors-surface-default);
+      color: var(--jaci-colors-fg-muted);
+      display: inline-flex;
+      flex-shrink: 0;
+      font-size: var(--jaci-font-sizes-xs);
+      font-weight: 700;
+      justify-content: center;
+      line-height: 1;
+      height: var(--jaci-sizes-8);
+      width: var(--jaci-sizes-8);
+}
+
+    .jaci-stepper__indicator[data-status=current],.jaci-stepper__indicator[data-status=complete] {
+      border-color: var(--jaci-colors-accent-default);
+      background-color: var(--jaci-colors-accent-default);
+      color: var(--jaci-colors-fg-on-accent);
+}
+
+    .jaci-stepper__indicator[data-status=disabled] {
+      opacity: 0.55;
+}
+
+    .jaci-stepper__title {
+      overflow: hidden;
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 700;
+      text-overflow: ellipsis;
+}
+
+    .jaci-stepper__title,.jaci-stepper__description {
+      display: block;
+      line-height: 1.35;
+      overflow-wrap: anywhere;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-stepper__description {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-xs);
+}
+
+    .jaci-stepper__content {
+      color: var(--jaci-colors-fg-default);
+      min-width: var(--jaci-sizes-0);
+      padding-top: var(--jaci-spacing-4);
+      width: 100%;
+}
+
+    .jaci-stepper__content[hidden] {
+      display: none;
+}
+
+    .jaci-stepper__separator {
+      flex: 1 1 0%;
+      margin-inline: var(--jaci-spacing-3);
+      background-color: var(--jaci-colors-border-default);
+      position: relative;
+      height: 1px;
+      min-width: 1rem;
+      top: 1rem;
+}
+
+    .jaci-stepper__previous {
+      border-color: var(--jaci-colors-border-interactive);
+      border-radius: var(--jaci-radii-lg);
+      border-style: solid;
+      border-width: 1px;
+      padding-inline: var(--jaci-spacing-3);
+      padding-block: var(--jaci-spacing-2);
+      align-items: center;
+      background-color: var(--jaci-colors-transparent);
+      color: var(--jaci-colors-fg-default);
+      cursor: pointer;
+      display: inline-flex;
+      justify-content: center;
+      max-width: 100%;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-stepper__previous:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .jaci-stepper__previous:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-accent-default);
+      outline-offset: 2px;
+}
+
+    .jaci-stepper__previous:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+}
+
+    .jaci-stepper__next {
+      border: 0;
+      border-radius: var(--jaci-radii-lg);
+      padding-inline: var(--jaci-spacing-3);
+      padding-block: var(--jaci-spacing-2);
+      align-items: center;
+      background-color: var(--jaci-colors-accent-default);
+      color: var(--jaci-colors-fg-on-accent);
+      cursor: pointer;
+      display: inline-flex;
+      justify-content: center;
+      max-width: 100%;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-stepper__next:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .jaci-stepper__next:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-accent-default);
+      outline-offset: 2px;
+}
+
+    .jaci-stepper__next:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-accent-hover);
+}
+
     .jaci-table__container {
       max-width: 100%;
       overflow-x: auto;
@@ -6604,6 +7056,12 @@
       font-weight: 600;
 }
 
+    .jaci-table__description {
+      margin-block: var(--jaci-spacing-2);
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+}
+
     .jaci-table__header {
       background-color: var(--jaci-colors-surface-default);
 }
@@ -6645,6 +7103,22 @@
       white-space: nowrap;
 }
 
+    .jaci-table__head[data-align=start] {
+      text-align: left;
+}
+
+    .jaci-table__head[data-align=center] {
+      text-align: center;
+}
+
+    .jaci-table__head[data-align=end] {
+      text-align: right;
+}
+
+    .jaci-table__head[data-hide-below=sm],.jaci-table__head[data-hide-below=md],.jaci-table__head[data-hide-below=lg] {
+      display: none;
+}
+
     .jaci-table__sortButton {
       background: var(--jaci-colors-transparent);
       border: 0;
@@ -6676,6 +7150,22 @@
       vertical-align: middle;
 }
 
+    .jaci-table__cell[data-align=start] {
+      text-align: left;
+}
+
+    .jaci-table__cell[data-align=center] {
+      text-align: center;
+}
+
+    .jaci-table__cell[data-align=end] {
+      text-align: right;
+}
+
+    .jaci-table__cell[data-hide-below=sm],.jaci-table__cell[data-hide-below=md],.jaci-table__cell[data-hide-below=lg] {
+      display: none;
+}
+
     .jaci-table__selection {
       padding-inline: var(--jaci-spacing-3);
       text-align: center;
@@ -7053,7 +7543,10 @@
       border-style: solid;
       border-width: 1px;
       overflow: hidden;
-      background-color: var(--jaci-colors-surface-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, );
+      background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-lg);
       box-sizing: border-box;
       color: var(--jaci-colors-fg-default);
@@ -7599,6 +8092,19 @@
       min-width: var(--jaci-sizes-0);
 }
 
+    .jaci-tree-view__loading,.jaci-tree-view__empty {
+      color: var(--jaci-colors-fg-muted);
+}
+
+    .jaci-tree-view__loading,.jaci-tree-view__empty,.jaci-tree-view__error {
+      padding: var(--jaci-spacing-2);
+      font-size: var(--jaci-font-sizes-sm);
+}
+
+    .jaci-tree-view__error {
+      color: var(--jaci-colors-danger);
+}
+
     .jaci-upload__root {
       gap: var(--jaci-spacing-3);
       width: 100%;
@@ -7901,6 +8407,9 @@
 }
       .jaci-navbar__drawer {
         width: 66.666667%;
+}
+      .jaci-table__head[data-hide-below=sm],.jaci-table__cell[data-hide-below=sm] {
+        display: table-cell;
 }
 }
 
@@ -7967,6 +8476,9 @@
         font-size: var(--jaci-font-sizes-md);
         min-height: var(--jaci-sizes-10);
         min-width: var(--jaci-sizes-10);
+}
+      .jaci-table__head[data-hide-below=md],.jaci-table__cell[data-hide-below=md] {
+        display: table-cell;
 }
       .jaci-toast__viewport {
         bottom: var(--jaci-spacing-6);
@@ -8003,6 +8515,18 @@
 }
       .jaci-bottomNavigation__root {
         border-radius: var(--jaci-radii-2xl);
+}
+      .jaci-table__head[data-hide-below=lg],.jaci-table__cell[data-hide-below=lg] {
+        display: table-cell;
+}
+}
+
+    @media (prefers-reduced-motion: reduce) {
+      .jaci-dialog__popup,.jaci-menu__popup,.jaci-drawer__popup,.jaci-menubar__trigger,.jaci-popover__popup,.jaci-select__popup {
+        --transition-duration: 0ms;
+        transition-duration: 0ms;
+        --transition-prop: none;
+        transition-property: none;
 }
 }
 }
@@ -8229,6 +8753,11 @@
     border-bottom: 0;
 }
 
+  .jaci-list__item--density_compact {
+    padding-block: var(--jaci-spacing-2);
+    padding-inline: var(--jaci-spacing-3);
+}
+
   .jaci-list__item--variant_divided {
     border-radius: 0;
     border-bottom-color: var(--jaci-colors-border-default);
@@ -8369,6 +8898,16 @@
     grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
+  .jaci-pagination__link--density_compact {
+    padding-inline: var(--jaci-spacing-2);
+    font-size: var(--jaci-font-sizes-sm);
+}
+
+  .jaci-pagination__link--density_compact,.jaci-pagination__ellipsis--density_compact {
+    min-height: var(--jaci-sizes-8);
+    min-width: var(--jaci-sizes-8);
+}
+
   .jaci-pagination__link--active_true {
     border-color: var(--jaci-colors-accent-default);
     background-color: var(--jaci-colors-accent-default);
@@ -8529,6 +9068,47 @@
     width: var(--jaci-sizes-6);
 }
 
+  .jaci-stepper__list--orientation_horizontal {
+    align-items: flex-start;
+    flex-direction: row;
+}
+
+  .jaci-stepper__item--orientation_horizontal {
+    align-items: flex-start;
+    flex-direction: column;
+    padding-inline-end: var(--jaci-spacing-4);
+}
+
+  .jaci-stepper__separator--orientation_horizontal {
+    margin: var(--jaci-spacing-0);
+    position: absolute;
+    left: 2rem;
+    right: var(--jaci-spacing-0);
+    top: 1rem;
+    width: auto;
+}
+
+  .jaci-stepper__list--orientation_vertical {
+    flex-direction: column;
+}
+
+  .jaci-stepper__item--orientation_vertical {
+    align-items: stretch;
+    flex-direction: column;
+}
+
+  .jaci-stepper__trigger--orientation_vertical {
+    align-items: start;
+}
+
+  .jaci-stepper__separator--orientation_vertical {
+    margin-block: var(--jaci-spacing-1);
+    margin-inline-start: 1rem;
+    margin-inline-end: var(--jaci-spacing-0);
+    height: 1.5rem;
+    width: 1px;
+}
+
   .jaci-table__head--density_compact,.jaci-table__cell--density_compact {
     padding-block: var(--jaci-spacing-2);
     padding-inline: var(--jaci-spacing-3);
@@ -8744,4 +9324,8 @@
   .jaci-flex-d_horizontal {
     flex-direction: horizontal;
 }
+
+  .jaci-page_1 {
+    page: 1px;
+}
 }