jaci-ui 0.8.0 → 0.9.0

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);
 }
@@ -2666,19 +2819,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%;
 }
 
@@ -3379,25 +3660,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 +3708,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 +3789,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 {
@@ -5325,16 +5637,17 @@
 
     .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 +5661,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 +5670,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);
@@ -5469,16 +5784,17 @@
 
     .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 +5808,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 +5817,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 +5831,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 +5839,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);
@@ -6253,16 +6573,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 +6606,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 +6636,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 +6647,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 +6665,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]) {
@@ -9297,9 +9620,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 +9693,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 +9822,138 @@
     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 {
+    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-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, );
+    box-shadow: var(--jaci-shadows-sm);
+    width: fit-content;
+}
+
+  .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 {
+    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-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, );
+    flex-direction: column;
+    position: absolute;
+    box-shadow: var(--jaci-shadows-sm);
+    transform: translateY(-50%);
+    z-index: 1;
+    right: var(--jaci-spacing-2);
+    top: 50%;
+}
+
+  .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,26 +9979,50 @@
 }
 
   .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 {
     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, );
-    background-color: var(--jaci-colors-surface-overlay);
+    background-color: var(--jaci-colors-surface-raised);
     box-shadow: var(--jaci-shadows-lg);
     position: absolute;
     z-index: 50;
     left: var(--jaci-spacing-0);
     max-width: calc(100vw - 2rem);
     top: calc(100% + 0.5rem);
-    width: min(100%, calc(100vw - 2rem));
+    width: 100%;
 }
 
   .jaci-toggleSwitch__root--checked_true {
@@ -10254,6 +10730,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 +10753,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);
+}
 }