@ostack.tech/ui 0.11.3 → 0.12.1

package/dist/ostack-ui.css

@@ -228,7 +228,7 @@
   box-shadow: none;
 }
 .o-ui-icon-button:focus, .o-ui-button:focus {
-  z-index: var(--o-ui-z-index-focused);
+  z-index: 1;
 }
 .o-ui-icon-button:focus-visible, .o-ui-button:focus-visible {
   outline: 2px solid var(--o-ui-accent-8);
@@ -282,6 +282,9 @@
 .o-ui-icon-button--ghost:is(:active, [data-active]):not(:disabled):not([data-disabled]), .o-ui-button--ghost:is(:active, [data-active]):not(:disabled):not([data-disabled]), [aria-haspopup][aria-expanded=true].o-ui-icon-button--ghost, [aria-haspopup][aria-expanded=true].o-ui-button--ghost {
   --o-ui-button-background-color: var(--o-ui-accent-a4);
 }
+.o-ui-icon-button__keybinds, .o-ui-button__keybinds {
+  display: block;
+}
 .o-ui-icon-button__keybinds:not(:first-child), .o-ui-button__keybinds:not(:first-child) {
   margin-top: var(--o-ui-space);
 }
@@ -1011,7 +1014,7 @@
   padding-left: calc(var(--o-ui-space) * 2.5);
   padding-right: calc(var(--o-ui-space) * 2.5);
   font-size: !important;
-  z-index: calc(var(--o-ui-z-index-focused) + 1);
+  z-index: 2;
 }
 .o-ui-radio-group__clear-button:focus:not(:focus-visible) {
   box-shadow: none;
@@ -1319,9 +1322,6 @@ a > .o-ui-code {
   background-color: var(--o-ui-background-color);
   box-shadow: var(--o-ui-box-shadow-sm);
 }
-.o-ui-command-menu__dialog {
-  z-index: var(--o-ui-z-index-dialog);
-}
 .o-ui-command-menu__dialog .o-ui-command-menu {
   box-shadow: var(--o-ui-box-shadow-lg);
 }
@@ -1516,7 +1516,7 @@ a > .o-ui-code {
   text-shadow: var(--o-ui-control-addon-text-shadow);
 }
 .o-ui-control-addon:focus {
-  z-index: var(--o-ui-z-index-focused);
+  z-index: 1;
 }
 .o-ui-control-addon:focus-visible {
   outline: 2px solid var(--o-ui-control-addon-outline-color);
@@ -1696,7 +1696,7 @@ a > .o-ui-code {
 .o-ui-data-table__filter-root {
   max-width: 250px;
 }
-.o-ui-data-table__rows-per-page, .o-ui-data-table__pagination {
+.o-ui-data-table__rows-per-page, .o-ui-data-table__pagination, .o-ui-data-table__pagination-label {
   display: inline-flex;
   align-items: center;
 }
@@ -1708,9 +1708,9 @@ a > .o-ui-code {
   width: auto !important;
 }
 .o-ui-data-table__pagination-label {
-  display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  margin-top: 0;
+  margin-bottom: 0;
   font-size: var(--o-ui-font-size-sm);
   line-height: var(--o-ui-line-height-sm);
   font-weight: 400;
@@ -1897,7 +1897,7 @@ a > .o-ui-code {
   cursor: text;
 }
 .o-ui-input__container:is([data-focused], [data-state=open]), .o-ui-date-range-input__container:is([data-focused], [data-state=open]) {
-  z-index: var(--o-ui-z-index-focused);
+  z-index: 1;
 }
 [data-disabled].o-ui-input__container, [data-disabled].o-ui-date-range-input__container {
   border-color: color-mix(in srgb, var(--o-ui-control-border-color) 50%, transparent);
@@ -1960,12 +1960,12 @@ a > .o-ui-code {
 }
 .o-ui-input__clear-button, .o-ui-date-range-input__clear-button {
   margin: 0 calc(var(--o-ui-control-padding-x) - 0.5em) 0 -0.5em;
-  z-index: calc(var(--o-ui-z-index-focused) + 1);
+  z-index: 2;
 }
 .o-ui-input__spinner, .o-ui-date-range-input__spinner {
   margin-right: var(--o-ui-control-padding-x);
   pointer-events: none;
-  z-index: calc(var(--o-ui-z-index-focused) + 1);
+  z-index: 2;
 }
 [data-disabled].o-ui-input__spinner, [data-disabled].o-ui-date-range-input__spinner {
   opacity: 0.5;
@@ -2038,7 +2038,6 @@ a > .o-ui-code {
 
 .o-ui-dialog {
   box-shadow: var(--o-ui-box-shadow-lg);
-  z-index: var(--o-ui-z-index-dialog);
   --o-ui-animation-transform: translateY(-5px) scale(0.97);
 }
 .o-ui-dialog:focus {
@@ -2097,7 +2096,6 @@ a > .o-ui-code {
   box-shadow: var(--o-ui-box-shadow-md);
   overflow: auto;
   scrollbar-width: thin;
-  z-index: var(--o-ui-z-index-popover);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   [data-state=open].o-ui-popover, [data-state=open].o-ui-dropdown-menu {
@@ -2126,7 +2124,6 @@ a > .o-ui-code {
 .o-ui-dropdown-menu {
   max-width: var(--radix-dropdown-menu-content-available-width);
   max-height: var(--radix-dropdown-menu-content-available-height);
-  z-index: var(--o-ui-z-index-dropdown);
 }
 :is(.o-ui-dropdown-menu__item, .o-ui-dropdown-menu__checkbox-item, .o-ui-dropdown-menu__radio-item) .o-ui-menu-list__item-action:not(a):not(:disabled, [data-disabled]) {
   cursor: pointer;
@@ -2808,7 +2805,6 @@ a > .o-ui-code {
   justify-content: center;
   padding: calc(var(--o-ui-space) * 7) 2.5dvw;
   overflow-y: auto;
-  z-index: var(--o-ui-z-index-overlay);
   background-color: var(--o-ui-neutral-a8);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -3014,7 +3010,6 @@ a > .o-ui-code {
   --o-ui-transition-timing-function: ease-in-out;
   --o-ui-animation-fade-duration: 0.15s;
   --o-ui-animation-fade-timing-function: linear;
-  --o-ui-z-index-focused: 5;
   --o-ui-z-index-docked: 10;
   --o-ui-z-index-dropdown: 1000;
   --o-ui-z-index-sticky: 1100;
@@ -3858,7 +3853,7 @@ a > .o-ui-code {
 }
 .o-ui-table__cell[data-sticky] {
   position: sticky;
-  z-index: var(--o-ui-z-index-docked);
+  z-index: calc(var(--o-ui-z-index-docked) - 1);
 }
 .o-ui-table__cell[data-sticky][data-stuck]::before {
   content: "";
@@ -3869,17 +3864,19 @@ a > .o-ui-code {
   height: calc(100% + 1px);
 }
 .o-ui-table__cell[data-sticky=left] {
-  border-right: 0;
-  left: 0;
-  box-shadow: inset -1px 0 0 0 var(--o-ui-table-cell-border-color);
+  left: var(--o-ui-table-cell-sticky-offset, 0);
+}
+.o-ui-table__cell[data-sticky=left][data-stuck]:not([data-framed]) {
+  box-shadow: 1px 0 0 0 var(--o-ui-table-cell-border-color);
 }
 .o-ui-table__cell[data-sticky=left][data-stuck]::before {
   right: -8px;
   background-image: linear-gradient(90deg, var(--o-ui-neutral-a3), transparent);
 }
 .o-ui-table__cell[data-sticky=right] {
-  border-left-width: 0;
-  right: 0;
+  right: var(--o-ui-table-cell-sticky-offset, 0);
+}
+.o-ui-table__cell[data-sticky=right][data-stuck] {
   box-shadow: -1px 0 0 0 var(--o-ui-table-cell-border-color);
 }
 .o-ui-table__cell[data-sticky=right][data-stuck]::before {
@@ -3891,7 +3888,7 @@ a > .o-ui-code {
 }
 .o-ui-table__head[data-sticky], .o-ui-table__foot[data-sticky] {
   position: sticky;
-  z-index: calc(var(--o-ui-z-index-docked) + 1);
+  z-index: var(--o-ui-z-index-docked);
 }
 .o-ui-table__head[data-stuck]::before, .o-ui-table__foot[data-stuck]::before {
   content: "";
@@ -4028,7 +4025,7 @@ a > .o-ui-code {
   opacity: 0.5;
 }
 .o-ui-tabs__tab:focus {
-  z-index: var(--o-ui-z-index-focused);
+  z-index: 1;
 }
 .o-ui-tabs__tab:not(:last-child) {
   margin-right: var(--o-ui-tabs-tab-list-gap-x);
@@ -4170,7 +4167,7 @@ a > .o-ui-code {
   width: 4px;
   height: calc(100% + 4px);
   top: -2px;
-  z-index: calc(var(--o-ui-z-index-focused) + 1);
+  z-index: var(--o-ui-z-index-docked);
 }
 .o-ui-tabs__scroll-button--left:not(:disabled)::after {
   right: -4px;
@@ -4257,12 +4254,18 @@ a > .o-ui-code {
   outline: 0;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075), 0 0 0 2px #1c2024;
 }
+.o-ui-toast__root[data-swipe-direction=left] {
+  --o-ui-toast-start-x: calc(-100% - var(--o-ui-toast-viewport-padding));
+}
+.o-ui-toast__root[data-swipe-direction=right] {
+  --o-ui-toast-start-x: calc(100% + var(--o-ui-toast-viewport-padding));
+}
 @keyframes o-ui-toast-open {
   from {
-    transform: translateX(calc(100% + var(--o-ui-toast-viewport-padding)));
+    transform: translateX(var(--o-ui-toast-start-x));
   }
   60% {
-    transform: translateX(calc(100% + var(--o-ui-toast-viewport-padding)));
+    transform: translateX(var(--o-ui-toast-start-x));
   }
   to {
     transform: translateX(0);
@@ -4304,10 +4307,10 @@ a > .o-ui-code {
     transform: translateX(var(--radix-toast-swipe-end-x));
   }
   60% {
-    transform: translateX(calc(100% + var(--o-ui-toast-viewport-padding)));
+    transform: translateX(var(--o-ui-toast-start-x));
   }
   to {
-    transform: translateX(calc(100% + var(--o-ui-toast-viewport-padding)));
+    transform: translateX(var(--o-ui-toast-start-x));
   }
 }
 .o-ui-toast__root + .o-ui-toast__root {
@@ -4351,7 +4354,14 @@ a > .o-ui-code {
 .o-ui-toast__viewport {
   position: fixed;
   bottom: 0;
+}
+.o-ui-toast__viewport[data-position=left] {
+  left: 0;
+}
+.o-ui-toast__viewport[data-position=right] {
   right: 0;
+}
+.o-ui-toast__viewport {
   display: flex;
   flex-direction: column;
   width: 420px;
@@ -4361,7 +4371,6 @@ a > .o-ui-code {
   padding: var(--o-ui-toast-viewport-padding);
   outline: none;
   list-style: none;
-  z-index: 1700;
 }
 .o-ui-toast--outlined {
   background-color: var(--o-ui-background-color);
@@ -4378,7 +4387,6 @@ a > .o-ui-code {
   background-color: var(--o-ui-neutral-12);
   color: var(--o-ui-neutral-1);
   box-shadow: var(--o-ui-box-shadow-sm);
-  z-index: var(--o-ui-z-index-tooltip);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .o-ui-tooltip[data-state=delayed-open] {