@sia.soul/sia-react-ui 0.1.4 → 0.1.5

package/dist/core.css

@@ -173,13 +173,31 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 }
 .sia-scrollbar-track {
   --sia-scrollbar-size: 3px;
+  --sia-scrollbar-hit-size: 10px;
+  --sia-scrollbar-proximity: 16;
 }
+.sia-scrollbar-track > ::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--sia-scrollbar-hit-size);
+  height: 100%;
+}
+.sia-scrollbar-track:is(.sia-floating-scrollbar--horizontal, .sia-table__scrollbar--horizontal) > ::before {
+  top: auto;
+  bottom: 0;
+  width: 100%;
+  height: var(--sia-scrollbar-hit-size);
+}
+.sia-scrollbar-track[data-scrollbar-near=true],
 .sia-scrollbar-track:hover,
 .sia-scrollbar-track:has(> :active) {
-  --sia-scrollbar-size: 6px;
+  --sia-scrollbar-size: 10px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .sia-scrollbar-track > * {
+  .sia-scrollbar-track > *,
+  .sia-scrollbar-track > *::after {
     transition: none !important;
   }
 }
@@ -3129,6 +3147,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   overflow: hidden;
 }
 .sia-table__viewport {
+  isolation: isolate;
   min-width: 0;
   min-height: 0;
   flex: 1 1 auto;
@@ -3379,13 +3398,19 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   right: 0;
   bottom: 0;
   left: 0;
-  height: 8px;
+  height: 10px;
+}
+.sia-table[data-overflow-y=true] .sia-table__scrollbar--horizontal {
+  right: 10px;
+}
+.sia-table[data-overflow-x=true] .sia-table__scrollbar--vertical {
+  bottom: 10px;
 }
 .sia-table__scrollbar--vertical {
   top: 0;
   right: 0;
   bottom: 0;
-  width: 8px;
+  width: 10px;
 }
 .sia-table[data-overflow-x=false] .sia-table__scrollbar--horizontal,
 .sia-table[data-overflow-y=false] .sia-table__scrollbar--vertical {
@@ -3399,30 +3424,47 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 .sia-table__scrollbar-thumb {
   position: absolute;
   cursor: default;
+  touch-action: none;
+}
+.sia-table__scrollbar-thumb::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  content: "";
+  pointer-events: none;
   background: rgb(82 82 82 / 68%);
   border-radius: 999px;
-  box-shadow: 0 0 0 1px rgb(255 255 255 / 22%);
-  touch-action: none;
-  transition: background-color 120ms ease;
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%);
+  transition:
+    background-color 120ms ease,
+    width 150ms ease,
+    height 150ms ease;
 }
-.sia-table__scrollbar-thumb:hover {
+.sia-table__scrollbar[data-pointer-hover] .sia-table__scrollbar-thumb::after,
+.sia-table__scrollbar-thumb:hover::after {
   background: rgb(64 64 64 / 82%);
 }
 .sia-table__scrollbar--horizontal .sia-table__scrollbar-thumb {
   bottom: 0;
   left: 0;
   width: var(--sia-table-scrollbar-x-size, 0);
-  height: var(--sia-scrollbar-size);
+  height: 100%;
   transform: translateX(var(--sia-table-scrollbar-x-position, 0));
-  transition: background-color 120ms ease, height 150ms ease;
+}
+.sia-table__scrollbar--horizontal .sia-table__scrollbar-thumb::after {
+  width: 100%;
+  height: var(--sia-scrollbar-size);
 }
 .sia-table__scrollbar--vertical .sia-table__scrollbar-thumb {
   top: 0;
   right: 0;
-  width: var(--sia-scrollbar-size);
+  width: 100%;
   height: var(--sia-table-scrollbar-y-size, 0);
   transform: translateY(var(--sia-table-scrollbar-y-position, 0));
-  transition: background-color 120ms ease, width 150ms ease;
+}
+.sia-table__scrollbar--vertical .sia-table__scrollbar-thumb::after {
+  width: var(--sia-scrollbar-size);
+  height: 100%;
 }
 .sia-table__empty {
   position: absolute;
@@ -3566,7 +3608,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   touch-action: none;
 }
 .sia-table[data-overflow-y=true] .sia-table__header-cell[data-last-leaf-column=true] .sia-table__resize-handle {
-  right: 10px;
+  right: 12px;
 }
 .sia-table__resize-handle::after {
   position: absolute;
@@ -4044,6 +4086,33 @@ fieldset:disabled .sia-input-number__floating-placeholder {
     visibility: hidden;
   }
 }
+.sia-table__settings-dropdown .sia-menu__item {
+  min-height: 44px;
+  padding: 10px 16px;
+  gap: 12px;
+}
+.sia-table__settings-dropdown .sia-menu__divider {
+  margin: 8px 12px;
+}
+.sia-table--borderless-toolbar {
+  border: 0;
+}
+.sia-table--borderless-toolbar > .sia-table__toolbar {
+  border: 0;
+}
+.sia-table--borderless-toolbar.sia-table--bordered > .sia-table__viewport-wrap {
+  border: 1px solid var(--sia-color-border);
+  border-radius: var(--sia-radius);
+}
+.sia-table--borderless-toolbar.sia-table--bordered:has(> .sia-table__footer) > .sia-table__viewport-wrap {
+  border-bottom: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.sia-table--borderless-toolbar.sia-table--bordered > .sia-table__footer {
+  border: 1px solid var(--sia-color-border);
+  border-radius: 0 0 var(--sia-radius) var(--sia-radius);
+}
 
 /* src/components-extra.css */
 .sia-flex {
@@ -4097,11 +4166,11 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 .sia-space-compact--vertical > *:not(:first-child) {
   margin-top: -1px;
 }
-.sia-space-compact--horizontal > *:not(:first-child) :is(.sia-input, .sia-input-control, .sia-select, .sia-tree-select__trigger, .sia-picker, .sia-input-number) {
+.sia-space-compact--horizontal > *:not(:first-child) :is(.sia-input, .sia-input-control, .sia-select, .sia-select__trigger, .sia-cascader__trigger, .sia-tree-select__trigger, .sia-picker, .sia-input-number) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-.sia-space-compact--horizontal > *:not(:last-child) :is(.sia-input, .sia-input-control, .sia-select, .sia-tree-select__trigger, .sia-picker, .sia-input-number) {
+.sia-space-compact--horizontal > *:not(:last-child) :is(.sia-input, .sia-input-control, .sia-select, .sia-select__trigger, .sia-cascader__trigger, .sia-tree-select__trigger, .sia-picker, .sia-input-number) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }