jaci-ui 0.6.2 → 0.7.0

package/dist/styles.css

@@ -593,6 +593,21 @@
 @layer recipes{
   @layer _base{
 
+    .jaci-aspectRatioBox {
+      overflow: hidden;
+      box-sizing: border-box;
+      display: block;
+      position: relative;
+      width: 100%;
+}
+
+    .jaci-aspectRatioBox > * {
+      inset: var(--jaci-spacing-0);
+      position: absolute;
+      height: 100%;
+      width: 100%;
+}
+
     .jaci-spinner {
       animation: var(--jaci-animations-spin);
       border-color: var(--jaci-colors-transparent);
@@ -644,6 +659,21 @@
       transform: translateY(0);
 }
 
+    .jaci-code {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-md);
+      border-style: solid;
+      border-width: 1px;
+      background-color: var(--jaci-colors-surface-subtle);
+      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-input {
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-lg);
@@ -652,7 +682,6 @@
       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);
@@ -788,6 +817,17 @@
       outline-offset: 2px;
 }
 
+    .jaci-kbd {
+      border-radius: var(--jaci-radii-md);
+      align-items: center;
+      display: inline-flex;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-weight: 600;
+      justify-content: center;
+      line-height: 1;
+      white-space: nowrap;
+}
+
     .jaci-stack {
       display: flex;
 }
@@ -803,12 +843,53 @@
       flex-shrink: 0;
 }
 
+    .jaci-quote {
+      border-inline-start: 4px solid;
+      gap: var(--jaci-spacing-3);
+      margin-inline: var(--jaci-spacing-0);
+      padding-block: var(--jaci-spacing-3);
+      box-sizing: border-box;
+      color: var(--jaci-colors-fg-default);
+      display: grid;
+      overflow-wrap: anywhere;
+      padding-inline-end: var(--jaci-spacing-4);
+      padding-inline-start: var(--jaci-spacing-5);
+      font-style: italic;
+      line-height: 1.6;
+      max-width: 100%;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-quote > [data-slot='quote-footer'] {
+      gap: var(--jaci-spacing-2);
+      align-items: baseline;
+      color: var(--jaci-colors-fg-muted);
+      display: flex;
+      flex-wrap: wrap;
+      font-size: var(--jaci-font-sizes-sm);
+      font-style: normal;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-quote > [data-slot='quote-author'] {
+      font-weight: 600;
+}
+
+    .jaci-quote > [data-slot='quote-source'] {
+      overflow-wrap: anywhere;
+}
+
     .jaci-skeleton {
       overflow: hidden;
       background-color: var(--jaci-colors-surface-subtle);
       display: block;
 }
 
+    .jaci-statGroup {
+      display: grid;
+      min-width: var(--jaci-sizes-0);
+}
+
     .jaci-toggle {
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-md);
@@ -1033,6 +1114,30 @@
     width: 100%;
 }
 
+  .jaci-code--variant_inline {
+    padding-inline: var(--jaci-spacing-1);
+    padding-block: var(--jaci-spacing-0\.5);
+    display: inline;
+}
+
+  .jaci-code--variant_block {
+    padding: var(--jaci-spacing-4);
+    display: block;
+    white-space: pre;
+    overflow-x: auto;
+}
+
+  .jaci-code--wrap_true {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+  .jaci-code--truncate_true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
   .jaci-input--size_md {
     min-height: var(--jaci-sizes-10);
 }
@@ -1066,31 +1171,96 @@
     font-size: var(--jaci-font-sizes-lg);
 }
 
-  .jaci-badge--tone_neutral {
+  .jaci-badge--tone_neutral-solid {
     background: var(--jaci-colors-neutral-600);
     color: var(--jaci-colors-fg-on-accent);
 }
 
-  .jaci-badge--tone_accent {
+  .jaci-badge--tone_accent-solid {
     background: var(--jaci-colors-accent-default);
     color: var(--jaci-colors-fg-on-accent);
 }
 
-  .jaci-badge--tone_success {
+  .jaci-badge--tone_success-solid {
     background: var(--jaci-colors-success);
     color: var(--jaci-colors-fg-on-accent);
 }
 
-  .jaci-badge--tone_warning {
+  .jaci-badge--tone_warning-solid {
     background: var(--jaci-colors-warning);
     color: var(--jaci-colors-fg-on-accent);
 }
 
-  .jaci-badge--tone_danger {
+  .jaci-badge--tone_danger-solid {
     background: var(--jaci-colors-danger);
     color: var(--jaci-colors-fg-on-accent);
 }
 
+  .jaci-badge--tone_neutral-soft {
+    background-color: var(--jaci-colors-surface-subtle);
+    color: var(--jaci-colors-fg-default);
+}
+
+  .jaci-badge--tone_accent-soft {
+    background-color: var(--jaci-colors-selected);
+    color: var(--jaci-colors-accent-default);
+}
+
+  .jaci-badge--tone_success-soft {
+    background-color: var(--jaci-colors-surface-subtle);
+    color: var(--jaci-colors-success);
+}
+
+  .jaci-badge--tone_warning-soft {
+    background-color: var(--jaci-colors-surface-subtle);
+    color: var(--jaci-colors-warning);
+}
+
+  .jaci-badge--tone_danger-soft {
+    background-color: var(--jaci-colors-surface-subtle);
+    color: var(--jaci-colors-danger);
+}
+
+  .jaci-badge--tone_neutral-outline {
+    border-color: var(--jaci-colors-border-strong);
+    border-style: solid;
+    border-width: 1px;
+    background-color: var(--jaci-colors-transparent);
+    color: var(--jaci-colors-fg-default);
+}
+
+  .jaci-badge--tone_accent-outline {
+    border-color: var(--jaci-colors-accent-default);
+    border-style: solid;
+    border-width: 1px;
+    background-color: var(--jaci-colors-transparent);
+    color: var(--jaci-colors-accent-default);
+}
+
+  .jaci-badge--tone_success-outline {
+    border-color: var(--jaci-colors-success);
+    border-style: solid;
+    border-width: 1px;
+    background-color: var(--jaci-colors-transparent);
+    color: var(--jaci-colors-success);
+}
+
+  .jaci-badge--tone_warning-outline {
+    border-color: var(--jaci-colors-warning);
+    border-style: solid;
+    border-width: 1px;
+    background-color: var(--jaci-colors-transparent);
+    color: var(--jaci-colors-warning);
+}
+
+  .jaci-badge--tone_danger-outline {
+    border-color: var(--jaci-colors-danger);
+    border-style: solid;
+    border-width: 1px;
+    background-color: var(--jaci-colors-transparent);
+    color: var(--jaci-colors-danger);
+}
+
   .jaci-iconButton--variant_outline {
     background-color: var(--jaci-colors-transparent);
     color: var(--jaci-colors-fg-default);
@@ -1150,6 +1320,41 @@
     width: var(--jaci-sizes-12);
 }
 
+  .jaci-kbd--size_md {
+    padding-inline: var(--jaci-spacing-2);
+    font-size: var(--jaci-font-sizes-sm);
+    min-height: var(--jaci-sizes-6);
+}
+
+  .jaci-kbd--variant_subtle {
+    background-color: var(--jaci-colors-surface-subtle);
+    color: var(--jaci-colors-fg-default);
+}
+
+  .jaci-kbd--size_sm {
+    padding-inline: var(--jaci-spacing-1\.5);
+    font-size: var(--jaci-font-sizes-xs);
+    min-height: var(--jaci-sizes-5);
+}
+
+  .jaci-kbd--size_lg {
+    padding-inline: var(--jaci-spacing-2\.5);
+    font-size: var(--jaci-font-sizes-md);
+    min-height: var(--jaci-sizes-8);
+}
+
+  .jaci-kbd--variant_solid {
+    background-color: var(--jaci-colors-fg-default);
+    color: var(--jaci-colors-surface-canvas);
+}
+
+  .jaci-kbd--variant_outline {
+    border-color: var(--jaci-colors-border-strong);
+    border-style: solid;
+    border-width: 1px;
+    color: var(--jaci-colors-fg-default);
+}
+
   .jaci-stack--direction_vertical {
     flex-direction: column;
 }
@@ -1257,6 +1462,33 @@
     height: 100%;
 }
 
+  .jaci-quote--size_md {
+    font-size: var(--jaci-font-sizes-md);
+}
+
+  .jaci-quote--variant_default {
+    border-color: var(--jaci-colors-border-default);
+    background-color: var(--jaci-colors-surface-raised);
+}
+
+  .jaci-quote--variant_accent {
+    border-color: var(--jaci-colors-accent-default);
+    background-color: var(--jaci-colors-selected);
+}
+
+  .jaci-quote--variant_subtle {
+    border-color: var(--jaci-colors-border-strong);
+    background-color: var(--jaci-colors-surface-subtle);
+}
+
+  .jaci-quote--size_sm {
+    font-size: var(--jaci-font-sizes-sm);
+}
+
+  .jaci-quote--size_lg {
+    font-size: var(--jaci-font-sizes-lg);
+}
+
   .jaci-skeleton--animated_true {
     animation: jaciSkeletonPulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
@@ -1279,6 +1511,26 @@
     width: var(--jaci-sizes-10);
 }
 
+  .jaci-statGroup--columns_3 {
+    grid-template-columns: minmax(0, 1fr);
+}
+
+  .jaci-statGroup--gap_md {
+    gap: var(--jaci-spacing-4);
+}
+
+  .jaci-statGroup--columns_1,.jaci-statGroup--columns_2,.jaci-statGroup--columns_4 {
+    grid-template-columns: minmax(0, 1fr);
+}
+
+  .jaci-statGroup--gap_sm {
+    gap: var(--jaci-spacing-2);
+}
+
+  .jaci-statGroup--gap_lg {
+    gap: var(--jaci-spacing-6);
+}
+
   .jaci-toggle--size_md {
     padding-inline: var(--jaci-spacing-3);
     font-size: var(--jaci-font-sizes-sm);
@@ -1310,14 +1562,77 @@
     min-height: var(--jaci-sizes-11);
 }
 
+  .jaci-heading--weight_bold {
+    font-weight: 700;
+}
+
   .jaci-heading--size_xl {
     font-size: var(--jaci-font-sizes-2xl);
 }
 
+  .jaci-heading--width_auto {
+    width: auto;
+}
+
   .jaci-heading--size_md {
     font-size: var(--jaci-font-sizes-lg);
 }
 
+  .jaci-heading--weight_normal {
+    font-weight: 400;
+}
+
+  .jaci-heading--weight_medium {
+    font-weight: 500;
+}
+
+  .jaci-heading--weight_semibold {
+    font-weight: 600;
+}
+
+  .jaci-heading--truncate_true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+  .jaci-heading--lineClamp_1 {
+    -webkit-line-clamp: 1;
+}
+
+  .jaci-heading--lineClamp_1,.jaci-heading--lineClamp_2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+  .jaci-heading--lineClamp_2 {
+    -webkit-line-clamp: 2;
+}
+
+  .jaci-heading--lineClamp_3 {
+    -webkit-line-clamp: 3;
+}
+
+  .jaci-heading--lineClamp_3,.jaci-heading--lineClamp_4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+  .jaci-heading--lineClamp_4 {
+    -webkit-line-clamp: 4;
+}
+
+  .jaci-heading--width_fit {
+    width: fit-content;
+}
+
+  .jaci-heading--width_full {
+    min-width: var(--jaci-sizes-0);
+    width: 100%;
+}
+
   .jaci-heading--size_xs,.jaci-heading--size_sm {
     font-size: var(--jaci-font-sizes-md);
 }
@@ -1340,6 +1655,73 @@
     color: var(--jaci-colors-accent-hover);
 }
 
+  .jaci-paragraph--weight_normal {
+    font-weight: 400;
+}
+
+  .jaci-paragraph--width_auto {
+    width: auto;
+}
+
+  .jaci-paragraph--weight_medium {
+    font-weight: 500;
+}
+
+  .jaci-paragraph--weight_semibold {
+    font-weight: 600;
+}
+
+  .jaci-paragraph--weight_bold {
+    font-weight: 700;
+}
+
+  .jaci-paragraph--truncate_true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+  .jaci-paragraph--lineClamp_1 {
+    -webkit-line-clamp: 1;
+}
+
+  .jaci-paragraph--lineClamp_1,.jaci-paragraph--lineClamp_2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+  .jaci-paragraph--lineClamp_2 {
+    -webkit-line-clamp: 2;
+}
+
+  .jaci-paragraph--lineClamp_3 {
+    -webkit-line-clamp: 3;
+}
+
+  .jaci-paragraph--lineClamp_3,.jaci-paragraph--lineClamp_4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+  .jaci-paragraph--lineClamp_4 {
+    -webkit-line-clamp: 4;
+}
+
+  .jaci-paragraph--width_fit {
+    width: fit-content;
+}
+
+  .jaci-paragraph--width_full {
+    min-width: var(--jaci-sizes-0);
+    width: 100%;
+}
+
+  .jaci-text--weight_normal {
+    font-weight: 400;
+}
+
   .jaci-text--size_md {
     font-size: var(--jaci-font-sizes-md);
 }
@@ -1348,6 +1730,22 @@
     color: var(--jaci-colors-fg-default);
 }
 
+  .jaci-text--width_auto {
+    width: auto;
+}
+
+  .jaci-text--weight_medium {
+    font-weight: 500;
+}
+
+  .jaci-text--weight_semibold {
+    font-weight: 600;
+}
+
+  .jaci-text--weight_bold {
+    font-weight: 700;
+}
+
   .jaci-text--size_sm {
     font-size: var(--jaci-font-sizes-sm);
 }
@@ -1360,6 +1758,49 @@
     color: var(--jaci-colors-fg-muted);
 }
 
+  .jaci-text--truncate_true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+  .jaci-text--lineClamp_1 {
+    -webkit-line-clamp: 1;
+}
+
+  .jaci-text--lineClamp_1,.jaci-text--lineClamp_2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+  .jaci-text--lineClamp_2 {
+    -webkit-line-clamp: 2;
+}
+
+  .jaci-text--lineClamp_3 {
+    -webkit-line-clamp: 3;
+}
+
+  .jaci-text--lineClamp_3,.jaci-text--lineClamp_4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+  .jaci-text--lineClamp_4 {
+    -webkit-line-clamp: 4;
+}
+
+  .jaci-text--width_fit {
+    width: fit-content;
+}
+
+  .jaci-text--width_full {
+    min-width: var(--jaci-sizes-0);
+    width: 100%;
+}
+
   .jaci-control--kind_checkbox {
     border-radius: var(--jaci-radii-sm);
 }
@@ -1369,7 +1810,7 @@
 }
 
   @media screen and (min-width: 40rem) {
-    .jaci-grid--columns_4 {
+    .jaci-grid--columns_4,.jaci-statGroup--columns_4 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 }
@@ -1380,6 +1821,9 @@
 }
     .jaci-grid--columns_4 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+    .jaci-statGroup--columns_3,.jaci-statGroup--columns_2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
 }
     .jaci-heading--size_xl {
       font-size: var(--jaci-font-sizes-3xl);
@@ -1408,10 +1852,16 @@
       font-size: var(--jaci-font-sizes-md);
       min-height: var(--jaci-sizes-12);
 }
-    .jaci-grid--columns_3 {
+    .jaci-grid--columns_3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+    .jaci-grid--columns_4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+    .jaci-statGroup--columns_3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-    .jaci-grid--columns_4 {
+    .jaci-statGroup--columns_4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
 }
     .jaci-heading--size_xl {
@@ -1585,6 +2035,15 @@
       margin-top: var(--jaci-spacing-1);
 }
 
+    .jaci-alert__actions {
+      gap: var(--jaci-spacing-2);
+      grid-column: 2;
+      display: flex;
+      flex-wrap: wrap;
+      min-width: var(--jaci-sizes-0);
+      margin-top: var(--jaci-spacing-2);
+}
+
     .jaci-dialog__trigger {
       border-color: var(--jaci-colors-border-interactive);
       border-radius: var(--jaci-radii-lg);
@@ -2162,6 +2621,7 @@
       transition-property: background-color, border-color, box-shadow, transform;
       --transition-easing: var(--jaci-easings-standard);
       transition-timing-function: var(--jaci-easings-standard);
+      min-width: var(--jaci-sizes-0);
 }
 
     .jaci-card__root:is(:hover, [data-hover]) {
@@ -2172,6 +2632,8 @@
     .jaci-card__header {
       padding-inline: var(--jaci-spacing-6);
       flex-direction: column;
+      overflow-wrap: anywhere;
+      min-width: var(--jaci-sizes-0);
       padding-top: var(--jaci-spacing-6);
 }
 
@@ -2189,13 +2651,18 @@
 
     .jaci-card__content {
       flex: 1 1 0%;
-      padding-inline: var(--jaci-spacing-6);
       padding-block: var(--jaci-spacing-6);
+      overflow-wrap: anywhere;
+}
+
+    .jaci-card__content,.jaci-card__footer {
+      padding-inline: var(--jaci-spacing-6);
+      min-width: var(--jaci-sizes-0);
 }
 
     .jaci-card__footer {
       gap: var(--jaci-spacing-2);
-      padding-inline: var(--jaci-spacing-6);
+      flex-wrap: wrap;
       margin-top: auto;
       padding-bottom: var(--jaci-spacing-6);
       padding-top: var(--jaci-spacing-2);
@@ -4687,102 +5154,411 @@
       white-space: normal;
       overflow-wrap: anywhere;
       max-width: 100%;
-      min-height: var(--jaci-sizes-9);
+      min-height: var(--jaci-sizes-9);
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-drawer__action:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .jaci-drawer__action:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-accent-default);
+      outline-offset: 2px;
+}
+
+    .jaci-drawer__action:is(:hover, [data-hover]) {
+      border-color: var(--jaci-colors-fg-muted);
+      background-color: var(--jaci-colors-surface-subtle);
+      box-shadow: var(--jaci-shadows-xl);
+      transform: translateY(-1px);
+}
+
+    .jaci-drawer__action:is(:active, [data-active]) {
+      transform: translateY(0);
+}
+
+    .jaci-emptyState__root {
+      padding: var(--jaci-spacing-8);
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-2xl);
+      border-style: dashed;
+      border-width: 1px;
+      gap: var(--jaci-spacing-3);
+      align-items: center;
+      background-color: var(--jaci-colors-surface-default);
+      box-sizing: border-box;
+      color: var(--jaci-colors-fg-default);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      text-align: center;
+      max-width: 100%;
+      min-height: var(--jaci-sizes-32);
+}
+
+    .jaci-emptyState__icon {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-2xl);
+      line-height: 1;
+}
+
+    .jaci-emptyState__title {
+      font-size: var(--jaci-font-sizes-lg);
+      font-weight: 700;
+}
+
+    .jaci-emptyState__description {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+      max-width: var(--jaci-sizes-prose);
+}
+
+    .jaci-emptyState__action {
+      gap: var(--jaci-spacing-2);
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      max-width: 100%;
+}
+
+    .jaci-fieldset__root {
+      border: 0;
+      margin: var(--jaci-spacing-0);
+      padding: var(--jaci-spacing-0);
+      gap: var(--jaci-spacing-3);
+      display: flex;
+      flex-direction: column;
+      min-inline-size: var(--jaci-sizes-0);
+      width: 100%;
+}
+
+    .jaci-fieldset__legend {
+      padding: var(--jaci-spacing-0);
+      color: var(--jaci-colors-fg-default);
+      font-family: system-ui, sans-serif;
+      font-size: var(--jaci-font-sizes-md);
+      font-weight: 700;
+      margin-block-end: var(--jaci-spacing-1);
+}
+
+    .jaci-fieldset__description {
+      margin: var(--jaci-spacing-0);
+      color: var(--jaci-colors-fg-muted);
+      font-family: system-ui, sans-serif;
+      font-size: var(--jaci-font-sizes-sm);
+      line-height: 1.5;
+}
+
+    .jaci-image__root {
+      border-radius: var(--jaci-radii-xl);
+      overflow: hidden;
+      display: inline-flex;
+      position: relative;
+      vertical-align: middle;
+      max-width: 100%;
+}
+
+    .jaci-image__image {
+      display: block;
+      --transition-duration: var(--jaci-durations-normal);
+      transition-duration: var(--jaci-durations-normal);
+      --transition-prop: opacity;
+      transition-property: opacity;
+      --transition-easing: var(--jaci-easings-standard);
+      transition-timing-function: var(--jaci-easings-standard);
+      max-width: 100%;
+}
+
+    .jaci-image__fallback {
+      inset: var(--jaci-spacing-0);
+      align-items: center;
+      background-color: var(--jaci-colors-surface-subtle);
+      color: var(--jaci-colors-fg-muted);
+      display: flex;
+      justify-content: center;
+      overflow-wrap: anywhere;
+      position: absolute;
+      text-align: center;
+      min-height: var(--jaci-sizes-12);
+}
+
+    .jaci-image__trigger {
+      border: 0;
+      padding: var(--jaci-spacing-0);
+      border-radius: var(--jaci-radii-xl);
+      overflow: hidden;
+      appearance: none;
+      -webkit-appearance: none;
+      background-color: var(--jaci-colors-transparent);
+      cursor: zoom-in;
+      display: inline-flex;
+      max-width: 100%;
+}
+
+    .jaci-image__trigger:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: focus.ring;
+      outline-offset: 3px;
+}
+
+    .jaci-image__backdrop {
+      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, );
+      background-color: var(--jaci-colors-surface-overlay);
+      position: fixed;
+      z-index: 60;
+      min-height: 100dvh;
+}
+
+    .jaci-image__backdrop[data-ending-style],.jaci-image__backdrop[data-starting-style] {
+      opacity: 0;
+}
+
+    .jaci-image__viewport {
+      inset: var(--jaci-spacing-0);
+      padding: var(--jaci-spacing-4);
+      overflow: auto;
+      justify-content: center;
+      position: fixed;
+      z-index: 60;
+}
+
+    .jaci-image__viewport,.jaci-image__popup {
+      align-items: center;
+      display: flex;
+}
+
+    .jaci-image__popup {
+      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;
+      background-color: var(--jaci-colors-surface-canvas);
+      box-shadow: var(--jaci-shadows-xl);
+      position: relative;
+      --transition-duration: var(--jaci-durations-normal);
+      transition-duration: var(--jaci-durations-normal);
+      --transition-prop: opacity, transform;
+      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);
+}
+
+    .jaci-image__popup[data-ending-style],.jaci-image__popup[data-starting-style] {
+      opacity: 0;
+      transform: scale(0.98);
+}
+
+    .jaci-image__lightboxImage {
+      border-radius: var(--jaci-radii-xl);
+      display: block;
+      object-fit: contain;
+      max-height: calc(100dvh - 4rem);
+      max-width: calc(100vw - 4rem);
+}
+
+    .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;
+      justify-content: center;
+      position: absolute;
+      z-index: 1;
+      height: var(--jaci-sizes-8);
+      right: var(--jaci-spacing-3);
+      top: var(--jaci-spacing-3);
+      width: var(--jaci-sizes-8);
+}
+
+    .jaci-image__close:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: focus.ring;
+      outline-offset: 2px;
+}
+
+    .jaci-image__close:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+}
+
+    .jaci-image__title {
+      overflow: hidden;
+      position: absolute;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+      width: 1px;
+      height: 1px;
+}
+
+    .jaci-figure__root {
+      margin: var(--jaci-spacing-0);
+      gap: var(--jaci-spacing-2);
+      display: grid;
+      max-width: 100%;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-figure__image {
+      border-radius: var(--jaci-radii-xl);
+      display: block;
+      max-width: 100%;
+}
+
+    .jaci-figure__caption {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+      line-height: 1.5;
+      overflow-wrap: anywhere;
       min-width: var(--jaci-sizes-0);
 }
 
-    .jaci-drawer__action:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
-      cursor: not-allowed;
-      opacity: 0.5;
+    .jaci-figure__trigger {
+      border: 0;
+      padding: var(--jaci-spacing-0);
+      border-radius: var(--jaci-radii-xl);
+      overflow: hidden;
+      appearance: none;
+      -webkit-appearance: none;
+      background-color: var(--jaci-colors-transparent);
+      cursor: zoom-in;
+      display: inline-flex;
+      max-width: 100%;
 }
 
-    .jaci-drawer__action:is(:focus-visible, [data-focus-visible]) {
+    .jaci-figure__trigger:is(:focus-visible, [data-focus-visible]) {
       outline: 2px solid;
-      outline-color: var(--jaci-colors-accent-default);
-      outline-offset: 2px;
+      outline-color: focus.ring;
+      outline-offset: 3px;
 }
 
-    .jaci-drawer__action:is(:hover, [data-hover]) {
-      border-color: var(--jaci-colors-fg-muted);
-      background-color: var(--jaci-colors-surface-subtle);
-      box-shadow: var(--jaci-shadows-xl);
-      transform: translateY(-1px);
+    .jaci-figure__backdrop {
+      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, );
+      background-color: var(--jaci-colors-surface-overlay);
+      position: fixed;
+      z-index: 60;
+      min-height: 100dvh;
 }
 
-    .jaci-drawer__action:is(:active, [data-active]) {
-      transform: translateY(0);
+    .jaci-figure__backdrop[data-ending-style],.jaci-figure__backdrop[data-starting-style] {
+      opacity: 0;
 }
 
-    .jaci-emptyState__root {
-      padding: var(--jaci-spacing-8);
+    .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;
+      align-items: center;
+      display: flex;
+}
+
+    .jaci-figure__popup {
+      padding: var(--jaci-spacing-2);
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-2xl);
-      border-style: dashed;
+      border-style: solid;
       border-width: 1px;
       gap: var(--jaci-spacing-3);
-      align-items: center;
-      background-color: var(--jaci-colors-surface-default);
-      box-sizing: border-box;
-      color: var(--jaci-colors-fg-default);
-      display: flex;
+      background-color: var(--jaci-colors-surface-canvas);
+      box-shadow: var(--jaci-shadows-xl);
       flex-direction: column;
-      justify-content: center;
-      text-align: center;
-      max-width: 100%;
-      min-height: var(--jaci-sizes-32);
+      position: relative;
+      --transition-duration: var(--jaci-durations-normal);
+      transition-duration: var(--jaci-durations-normal);
+      --transition-prop: opacity, transform;
+      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);
 }
 
-    .jaci-emptyState__icon {
-      color: var(--jaci-colors-fg-muted);
-      font-size: var(--jaci-font-sizes-2xl);
-      line-height: 1;
+    .jaci-figure__popup[data-ending-style],.jaci-figure__popup[data-starting-style] {
+      opacity: 0;
+      transform: scale(0.98);
 }
 
-    .jaci-emptyState__title {
-      font-size: var(--jaci-font-sizes-lg);
-      font-weight: 700;
+    .jaci-figure__lightboxImage {
+      border-radius: var(--jaci-radii-xl);
+      display: block;
+      object-fit: contain;
+      max-height: calc(100dvh - 8rem);
+      max-width: calc(100vw - 4rem);
 }
 
-    .jaci-emptyState__description {
-      color: var(--jaci-colors-fg-muted);
+    .jaci-figure__lightboxCaption {
+      color: var(--jaci-colors-fg-default);
       font-size: var(--jaci-font-sizes-sm);
-      max-width: var(--jaci-sizes-prose);
+      line-height: 1.5;
+      overflow-wrap: anywhere;
+      text-align: center;
+      max-width: min(48rem, calc(100vw - 4rem));
 }
 
-    .jaci-emptyState__action {
-      gap: var(--jaci-spacing-2);
-      display: flex;
-      flex-wrap: wrap;
+    .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;
       justify-content: center;
-      max-width: 100%;
+      position: absolute;
+      z-index: 1;
+      height: var(--jaci-sizes-8);
+      right: var(--jaci-spacing-3);
+      top: var(--jaci-spacing-3);
+      width: var(--jaci-sizes-8);
 }
 
-    .jaci-fieldset__root {
-      border: 0;
-      margin: var(--jaci-spacing-0);
-      padding: var(--jaci-spacing-0);
-      gap: var(--jaci-spacing-3);
-      display: flex;
-      flex-direction: column;
-      min-inline-size: var(--jaci-sizes-0);
-      width: 100%;
+    .jaci-figure__close:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: focus.ring;
+      outline-offset: 2px;
 }
 
-    .jaci-fieldset__legend {
-      padding: var(--jaci-spacing-0);
-      color: var(--jaci-colors-fg-default);
-      font-family: system-ui, sans-serif;
-      font-size: var(--jaci-font-sizes-md);
-      font-weight: 700;
-      margin-block-end: var(--jaci-spacing-1);
+    .jaci-figure__close:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
 }
 
-    .jaci-fieldset__description {
-      margin: var(--jaci-spacing-0);
-      color: var(--jaci-colors-fg-muted);
-      font-family: system-ui, sans-serif;
-      font-size: var(--jaci-font-sizes-sm);
-      line-height: 1.5;
+    .jaci-figure__title {
+      overflow: hidden;
+      position: absolute;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+      width: 1px;
+      height: 1px;
 }
 
     .jaci-list__root {
@@ -4986,8 +5762,7 @@
       border-width: 1px;
       gap: var(--jaci-spacing-2);
       align-items: center;
-      backdrop-filter: blur(4px);
-      -webkit-backdrop-filter: blur(4px);
+      backdrop-filter: var(--jaci-navbar-backdrop-filter, blur(4px));
       background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-xl);
       box-sizing: border-box;
@@ -5074,8 +5849,7 @@
 
     .jaci-navbar__drawerBackdrop {
       inset: var(--jaci-spacing-0);
-      backdrop-filter: blur(4px);
-      -webkit-backdrop-filter: blur(4px);
+      backdrop-filter: var(--jaci-navbar-backdrop-filter, blur(4px));
       background-color: var(--jaci-colors-surface-overlay);
       position: fixed;
       --transition-duration: var(--jaci-durations-normal);
@@ -5106,8 +5880,7 @@
       border-color: var(--jaci-colors-border-default);
       gap: var(--jaci-spacing-2);
       background-color: var(--jaci-colors-surface-default);
-      backdrop-filter: blur(8px);
-      -webkit-backdrop-filter: blur(8px);
+      backdrop-filter: var(--jaci-navbar-drawer-backdrop-filter, blur(8px));
       box-sizing: border-box;
       box-shadow: var(--jaci-shadows-xl);
       color: var(--jaci-colors-fg-default);
@@ -6013,6 +6786,13 @@
       line-height: 1.5;
 }
 
+    .jaci-progress__value {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+      font-variant-numeric: tabular-nums;
+      margin-inline-start: auto;
+}
+
     .jaci-progress__track {
       border-radius: var(--jaci-radii-full);
       overflow: hidden;
@@ -6802,6 +7582,61 @@
       box-shadow: var(--jaci-shadows-lg);
 }
 
+    .jaci-stat__root {
+      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-1);
+      overflow: hidden;
+      background-color: var(--jaci-colors-surface-raised);
+      display: grid;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-stat__icon {
+      border-radius: var(--jaci-radii-lg);
+      align-items: center;
+      background-color: var(--jaci-colors-surface-subtle);
+      color: var(--jaci-colors-accent-default);
+      display: inline-flex;
+      justify-content: center;
+      height: var(--jaci-sizes-8);
+      width: var(--jaci-sizes-8);
+}
+
+    .jaci-stat__label {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 600;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-stat__value {
+      color: var(--jaci-colors-fg-default);
+      font-size: var(--jaci-font-sizes-2xl);
+      font-variant-numeric: tabular-nums;
+      font-weight: 700;
+      line-height: 1.2;
+}
+
+    .jaci-stat__value,.jaci-stat__description {
+      overflow-wrap: anywhere;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-stat__description {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+}
+
+    .jaci-stat__trend {
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 700;
+      min-width: var(--jaci-sizes-0);
+}
+
     .jaci-stepper__root {
       gap: var(--jaci-spacing-4);
       color: var(--jaci-colors-fg-default);
@@ -8399,6 +9234,9 @@
 }
 
     @media screen and (min-width: 40rem) {
+      .jaci-card__footer {
+        flex-direction: row;
+}
       .jaci-data-view__root[data-layout='grid'][data-columns='4'] [data-slot='data-view-content'] {
         grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -8449,6 +9287,18 @@
 }
       .jaci-drawer__footer {
         padding: var(--jaci-spacing-6);
+}
+      .jaci-image__viewport {
+        padding: var(--jaci-spacing-8);
+}
+      .jaci-image__popup {
+        padding: var(--jaci-spacing-3);
+}
+      .jaci-figure__viewport {
+        padding: var(--jaci-spacing-8);
+}
+      .jaci-figure__popup {
+        padding: var(--jaci-spacing-3);
 }
       .jaci-navbar__bar {
         padding: var(--jaci-spacing-4);
@@ -8473,6 +9323,9 @@
         font-size: var(--jaci-font-sizes-md);
         min-height: var(--jaci-sizes-10);
         min-width: var(--jaci-sizes-10);
+}
+      .jaci-stat__value {
+        font-size: var(--jaci-font-sizes-3xl);
 }
       .jaci-table__head[data-hide-below=md],.jaci-table__cell[data-hide-below=md] {
         display: table-cell;
@@ -8519,7 +9372,7 @@
 }
 
     @media (prefers-reduced-motion: reduce) {
-      .jaci-dialog__popup,.jaci-menu__popup,.jaci-drawer__popup,.jaci-menubar__trigger,.jaci-popover__popup,.jaci-select__popup {
+      .jaci-dialog__popup,.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;
@@ -8742,6 +9595,30 @@
     opacity: 0.65;
 }
 
+  .jaci-image__image--fit_cover {
+    object-fit: cover;
+}
+
+  .jaci-image__image--status_loading {
+    opacity: 0;
+}
+
+  .jaci-image__image--fit_contain {
+    object-fit: contain;
+}
+
+  .jaci-image__image--fit_fill {
+    object-fit: fill;
+}
+
+  .jaci-image__image--fit_none {
+    object-fit: none;
+}
+
+  .jaci-image__image--status_loaded {
+    opacity: 1;
+}
+
   .jaci-list__root--gap_md {
     gap: var(--jaci-spacing-2);
 }
@@ -9065,6 +9942,50 @@
     width: var(--jaci-sizes-6);
 }
 
+  .jaci-stat__trend--tone_neutral,.jaci-stat__trend--direction_neutral {
+    color: var(--jaci-colors-fg-muted);
+}
+
+  .jaci-stat__trend--tone_accent {
+    color: var(--jaci-colors-accent-default);
+}
+
+  .jaci-stat__trend--tone_success {
+    color: var(--jaci-colors-success);
+}
+
+  .jaci-stat__trend--tone_warning {
+    color: var(--jaci-colors-warning);
+}
+
+  .jaci-stat__trend--tone_danger {
+    color: var(--jaci-colors-danger);
+}
+
+  .jaci-stat__root--size_sm {
+    padding: var(--jaci-spacing-3);
+}
+
+  .jaci-stat__value--size_sm {
+    font-size: var(--jaci-font-sizes-xl);
+}
+
+  .jaci-stat__root--size_lg {
+    padding: var(--jaci-spacing-6);
+}
+
+  .jaci-stat__value--size_lg {
+    font-size: var(--jaci-font-sizes-3xl);
+}
+
+  .jaci-stat__trend--direction_up {
+    color: var(--jaci-colors-success);
+}
+
+  .jaci-stat__trend--direction_down {
+    color: var(--jaci-colors-danger);
+}
+
   .jaci-stepper__list--orientation_horizontal {
     align-items: flex-start;
     flex-direction: row;
@@ -9273,6 +10194,9 @@
 }
     .jaci-sidebar__root--open_false {
       width: var(--jaci-sizes-20);
+}
+    .jaci-stat__value--size_lg {
+      font-size: var(--jaci-font-sizes-4xl);
 }
 }