jaci-ui 0.5.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;
@@ -4489,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);
@@ -4504,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] {
@@ -4598,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);
@@ -4606,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);
@@ -4861,6 +4881,7 @@
 }
 
     .jaci-menubar__root,.jaci-menubar__trigger {
+      overflow: hidden;
       align-items: center;
       color: var(--jaci-colors-fg-default);
       box-sizing: border-box;
@@ -4872,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;
@@ -5352,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 {
@@ -5417,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 {
@@ -5878,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);
@@ -5889,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] {
@@ -5955,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;
@@ -6461,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;
@@ -6477,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 {
@@ -6492,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;
@@ -6735,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;
@@ -7248,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);
@@ -8221,6 +8519,15 @@
       .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;
+}
 }
 }
 
@@ -8761,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);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jaci-ui",
   "description": "Accessible, themeable React components by Jaci UI",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "MIT",
   "author": {
     "name": "Richard Borges",