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

package/dist/index.css

@@ -1,3 +1,111 @@
+/* src/floating-placeholder.css */
+.sia-placeholder-floating {
+  position: relative;
+}
+.sia-select__trigger.sia-placeholder-floating {
+  overflow: visible;
+}
+.sia-floating-placeholder {
+  position: absolute;
+  z-index: 20;
+  top: var(--sia-placeholder-idle-top, 50%);
+  left: 7px;
+  box-sizing: border-box;
+  max-width: calc(100% - 42px);
+  overflow: hidden;
+  padding-inline: 4px;
+  color: var(--sia-color-text-secondary);
+  background: transparent;
+  pointer-events: none;
+  opacity: .65;
+  font: 400 var(--sia-font-size-small)/1 system-ui, sans-serif;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform: translateY(-50%);
+  transform-origin: left center;
+  transition:
+    top 160ms ease,
+    color 160ms ease,
+    background-color 160ms ease,
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+.sia-placeholder-floating:focus-within > .sia-floating-placeholder,
+.sia-placeholder-floating--filled > .sia-floating-placeholder,
+.sia-placeholder-floating--active > .sia-floating-placeholder {
+  top: 0;
+  background: var(--sia-color-surface);
+  opacity: 1;
+  transform: translateY(-50%) scale(.85);
+}
+.sia-placeholder-floating:focus-within > .sia-floating-placeholder,
+.sia-placeholder-floating--active > .sia-floating-placeholder {
+  color: var(--sia-color-primary);
+}
+.sia-placeholder-floating.sia-time-picker > input::placeholder,
+.sia-placeholder-floating > input::placeholder,
+.sia-placeholder-floating > textarea::placeholder {
+  color: transparent;
+}
+.sia-placeholder-floating > .sia-select__value.is-placeholder,
+.sia-placeholder-floating > .sia-picker__trigger .is-placeholder,
+.sia-placeholder-floating > .sia-tree-select__value .sia-tree-select__placeholder,
+.sia-placeholder-floating > .sia-cascader__value .sia-cascader__placeholder {
+  color: transparent;
+}
+.sia-placeholder-floating.is-disabled > .sia-floating-placeholder,
+.sia-placeholder-floating:disabled > .sia-floating-placeholder,
+fieldset:disabled .sia-placeholder-floating > .sia-floating-placeholder {
+  background: var(--sia-color-control-hover);
+}
+.sia-form-item--error .sia-placeholder-floating > .sia-floating-placeholder,
+.sia-select--error .sia-placeholder-floating > .sia-floating-placeholder,
+.sia-tree-select--error .sia-placeholder-floating > .sia-floating-placeholder,
+.sia-picker--error.sia-placeholder-floating > .sia-floating-placeholder,
+.sia-textarea-control--error.sia-placeholder-floating > .sia-floating-placeholder {
+  color: var(--sia-color-error);
+}
+.sia-form-item--warning .sia-placeholder-floating > .sia-floating-placeholder,
+.sia-select--warning .sia-placeholder-floating > .sia-floating-placeholder,
+.sia-tree-select--warning .sia-placeholder-floating > .sia-floating-placeholder,
+.sia-picker--warning.sia-placeholder-floating > .sia-floating-placeholder,
+.sia-textarea-control--warning.sia-placeholder-floating > .sia-floating-placeholder {
+  color: var(--sia-color-warning);
+}
+.sia-textarea-control.sia-placeholder-floating {
+  --sia-placeholder-idle-top: 18px;
+  overflow: visible;
+}
+.sia-textarea-control > .sia-floating-placeholder {
+  max-width: calc(100% - 16px);
+}
+.sia-rich-text-editor.sia-placeholder-floating {
+  --sia-placeholder-idle-top: 66px;
+  overflow: visible;
+}
+.sia-rich-text-editor.sia-placeholder-floating .tiptap p.is-editor-empty:first-child::before {
+  content: none;
+}
+.sia-markdown-editor.sia-placeholder-floating {
+  --sia-placeholder-idle-top: 80px;
+}
+.sia-markdown-editor.sia-placeholder-floating [data-placeholder]::before {
+  content: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-floating-placeholder {
+    transition: none;
+  }
+}
+.sia-rich-text-editor.sia-placeholder-floating > .sia-rich-text-editor__toolbar {
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+}
+fieldset:disabled .sia-input-control__floating-placeholder,
+fieldset:disabled .sia-input-number__floating-placeholder {
+  background: var(--sia-color-control-hover);
+}
+
 /* src/styles.css */
 :root,
 [data-sia-theme=light] {
@@ -26,7 +134,7 @@
   --sia-font-size: 16px;
   --sia-font-size-small: 14px;
   --sia-font-size-large: 18px;
-  --sia-shadow-popup: 0 10px 32px rgb(0 0 0 / 10%);
+  --sia-shadow-popup: 0 4px 12px rgb(0 0 0 / 22%);
   --sia-scroll-overflow: auto;
   --sia-scrollbar-thumb: rgb(82 82 82 / 68%);
   --sia-scrollbar-thumb-hover: rgb(64 64 64 / 82%);
@@ -48,7 +156,7 @@
   --sia-color-control-hover: #2d2d2d;
   --sia-color-control-active: #383838;
   --sia-color-focus-ring: rgb(60 135 230 / 28%);
-  --sia-shadow-popup: 0 12px 36px rgb(0 0 0 / 35%);
+  --sia-shadow-popup: 0 4px 12px rgb(0 0 0 / 50%);
   --sia-scrollbar-thumb: rgb(174 174 174 / 62%);
   --sia-scrollbar-thumb-hover: rgb(205 205 205 / 78%);
 }
@@ -65,13 +173,31 @@
 }
 .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;
   }
 }
@@ -104,7 +230,7 @@
   background: var(--sia-scrollbar-thumb);
   border: 1px solid rgb(255 255 255 / 24%);
   border-radius: 999px;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 14%);
+  box-shadow: 0 1px 1px rgb(0 0 0 / 24%);
   touch-action: none;
   transition: background-color 120ms ease;
 }
@@ -479,7 +605,7 @@
 .sia-input-control__floating-placeholder,
 .sia-input-number__floating-placeholder {
   position: absolute;
-  z-index: 1;
+  z-index: 20;
   top: 50%;
   left: -4px;
   box-sizing: border-box;
@@ -522,6 +648,7 @@
   left: 7px;
   max-width: calc(100% - 7px);
 }
+.sia-input-select.is-open .sia-input-control--floating .sia-input-control__floating-placeholder,
 .sia-input-control--floating:focus-within .sia-input-control__floating-placeholder,
 .sia-input-control--floating.is-filled .sia-input-control__floating-placeholder,
 .sia-input-number--floating:focus-within .sia-input-number__floating-placeholder,
@@ -1301,11 +1428,37 @@
   color: var(--sia-color-text-secondary);
   opacity: 0.7;
 }
+.sia-overflow-tags {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  gap: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.sia-overflow-tags > span:not(.sia-overflow-tags__measure),
+.sia-overflow-tags__measure > span {
+  flex: 0 0 auto;
+}
+.sia-overflow-tags__rest {
+  color: var(--sia-color-text-secondary);
+}
+.sia-overflow-tags__measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: max-content;
+  visibility: hidden;
+  pointer-events: none;
+}
 .sia-select__tags {
   display: flex;
   align-items: center;
   flex: 1;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 3px;
   min-width: 0;
 }
@@ -1543,7 +1696,7 @@
   height: 20px;
   background-color: #fff;
   border-radius: 999px;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 35%);
   transition: left 160ms ease, width 160ms ease;
 }
 .sia-switch-input:checked + .sia-switch--standard {
@@ -1593,7 +1746,7 @@
   color: var(--sia-color-text-secondary);
   background-color: var(--sia-color-surface);
   border: 1px solid var(--sia-color-border);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
 }
 .sia-switch--segmented .sia-switch__thumb {
   top: 2px;
@@ -1601,7 +1754,7 @@
   width: calc(50% - 3px);
   height: 30px;
   background-color: var(--sia-color-primary);
-  box-shadow: 0 2px 6px rgb(22 119 255 / 28%);
+  box-shadow: 0 1px 3px rgb(22 119 255 / 40%);
 }
 .sia-switch-input:checked + .sia-switch--segmented .sia-switch__thumb {
   left: calc(50% - 1px);
@@ -1648,7 +1801,7 @@
   background: var(--sia-color-surface);
   border: 1px solid var(--sia-color-border);
   border-radius: 999px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
   transition: border-color 160ms ease, box-shadow 160ms ease;
 }
 .sia-theme-switch:hover {
@@ -1665,7 +1818,7 @@
   height: 30px;
   background: var(--sia-color-primary);
   border-radius: 999px;
-  box-shadow: 0 2px 6px rgb(22 119 255 / 28%);
+  box-shadow: 0 1px 3px rgb(22 119 255 / 40%);
   transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 .sia-theme-switch--dark .sia-theme-switch__selection {
@@ -1838,16 +1991,16 @@
   will-change: translate, transform;
 }
 .sia-drawer--right[data-push-depth]:not([data-push-depth="0"]) {
-  box-shadow: -18px 0 42px rgb(15 23 42 / 22%);
+  box-shadow: -6px 0 16px rgb(15 23 42 / 34%);
 }
 .sia-drawer--left[data-push-depth]:not([data-push-depth="0"]) {
-  box-shadow: 18px 0 42px rgb(15 23 42 / 22%);
+  box-shadow: 6px 0 16px rgb(15 23 42 / 34%);
 }
 .sia-drawer--top[data-push-depth]:not([data-push-depth="0"]) {
-  box-shadow: 0 18px 42px rgb(15 23 42 / 22%);
+  box-shadow: 0 6px 16px rgb(15 23 42 / 34%);
 }
 .sia-drawer--bottom[data-push-depth]:not([data-push-depth="0"]) {
-  box-shadow: 0 -18px 42px rgb(15 23 42 / 22%);
+  box-shadow: 0 -6px 16px rgb(15 23 42 / 34%);
 }
 .sia-drawer--left,
 .sia-drawer--right {
@@ -2478,7 +2631,7 @@
 }
 .sia-tabs--pill .sia-tabs__tab[aria-selected=true] {
   background: var(--sia-color-surface);
-  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 18%);
 }
 .sia-tabs--tech {
   --sia-tabs-tech-accent: var(--sia-color-primary);
@@ -2994,6 +3147,7 @@
   overflow: hidden;
 }
 .sia-table__viewport {
+  isolation: isolate;
   min-width: 0;
   min-height: 0;
   flex: 1 1 auto;
@@ -3087,11 +3241,39 @@
   background: color-mix(in srgb, var(--sia-color-primary) 10%, transparent);
   outline: none;
 }
-.sia-table__cell--ellipsis .sia-table__cell-content {
+.sia-table__cell--ellipsis > .sia-table__cell-content {
+  position: relative;
+  display: block;
+  min-width: 0;
+  height: auto;
+  background: inherit;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.sia-table__cell--ellipsis > .sia-table__cell-content > .sia-space {
+  display: inline-flex;
+  width: max-content;
+  flex-wrap: nowrap !important;
+  flex-direction: row;
+  vertical-align: middle;
+}
+.sia-table__cell--ellipsis > .sia-table__cell-content > .sia-space > * {
+  flex-shrink: 0;
+}
+.sia-table__cell--ellipsis > .sia-table__cell-content[data-content-overflow=true]::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  place-items: center end;
+  width: 1.4em;
+  content: "\2026";
+  color: inherit;
+  background: inherit;
+  pointer-events: none;
+}
 .sia-table__cell--auto-width .sia-table__cell-content {
   white-space: nowrap;
 }
@@ -3216,13 +3398,19 @@
   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 {
@@ -3236,30 +3424,47 @@
 .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;
@@ -3402,6 +3607,9 @@
   cursor: ew-resize;
   touch-action: none;
 }
+.sia-table[data-overflow-y=true] .sia-table__header-cell[data-last-leaf-column=true] .sia-table__resize-handle {
+  right: 12px;
+}
 .sia-table__resize-handle::after {
   position: absolute;
   top: 18%;
@@ -3878,6 +4086,33 @@
     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 {
@@ -3931,11 +4166,11 @@
 .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;
 }
@@ -4142,7 +4377,7 @@
 .sia-window-frame {
   --sia-window-titlebar-height: 42px;
   --sia-window-control-width: 46px;
-  --sia-window-titlebar-shadow: 0 1px 0 color-mix(in srgb, var(--sia-color-border) 68%, transparent), 0 3px 10px color-mix(in srgb, var(--sia-color-text) 6%, transparent);
+  --sia-window-titlebar-shadow: 0 1px 0 color-mix(in srgb, var(--sia-color-border) 68%, transparent), 0 1px 4px color-mix(in srgb, var(--sia-color-text) 14%, transparent);
   box-sizing: border-box;
   display: flex;
   width: 100%;
@@ -4522,7 +4757,7 @@
   background: var(--sia-color-surface);
   border: 3px solid var(--sia-color-primary);
   border-radius: 50%;
-  box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 28%);
   transition: box-shadow 140ms ease, transform 140ms ease;
 }
 .sia-slider__input::-webkit-slider-thumb:active {
@@ -4710,7 +4945,7 @@
   background: var(--sia-color-surface);
   border: 1px solid var(--sia-color-border);
   border-radius: 10px;
-  box-shadow: 0 10px 32px rgb(0 0 0 / 18%);
+  box-shadow: var(--sia-shadow-popup);
 }
 .sia-color-picker__mode-row {
   display: flex;
@@ -4738,7 +4973,7 @@
 .sia-color-picker__modes button.is-active {
   color: var(--sia-color-text);
   background: var(--sia-color-surface);
-  box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 22%);
 }
 .sia-color-picker__none {
   position: relative;
@@ -5134,7 +5369,7 @@
   background: var(--sia-color-surface);
   border: 1px solid var(--sia-color-border);
   border-radius: 10px;
-  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
+  box-shadow: var(--sia-shadow-popup);
 }
 .sia-time-panel .sia-date-panel__time {
   grid-template-rows: 42px minmax(0, 1fr);
@@ -5695,6 +5930,10 @@
 }
 .sia-tree-select__tag {
   flex: 0 0 auto;
+  max-width: 112px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   padding: 2px 6px;
   background: var(--sia-color-control-hover);
   border-radius: 4px;
@@ -5927,7 +6166,7 @@
   color: #fff;
   pointer-events: none;
   border-radius: 7px;
-  box-shadow: 0 6px 18px rgb(255 77 79 / 28%);
+  box-shadow: 0 2px 8px rgb(255 77 79 / 40%);
   font-size: 12px;
   line-height: 1.45;
 }
@@ -6398,6 +6637,20 @@
   min-width: 34px;
   padding-inline: 8px;
 }
+.sia-dropdown-button > .sia-button--link + .sia-dropdown::before {
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 0;
+  width: 1px;
+  height: 1em;
+  content: "";
+  background: rgb(217, 217, 217);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+.sia-dropdown-button > .sia-button--link + .sia-dropdown > .sia-button {
+  margin-inline-start: 0;
+}
 @keyframes sia-dropdown-popup-in {
   from {
     opacity: 0;
@@ -6637,7 +6890,7 @@ button.sia-pagination__total:disabled {
 .sia-segmented button.is-selected {
   color: var(--sia-color-text);
   background: var(--sia-color-surface);
-  box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
 }
 .sia-segmented--small button {
   min-height: 24px;
@@ -7017,7 +7270,7 @@ button.sia-pagination__total:disabled {
   padding: 5px 14px;
   color: #fff;
   background: var(--sia-color-primary);
-  box-shadow: 0 2px 4px rgb(0 0 0 / 14%);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 24%);
 }
 .sia-ribbon--end {
   right: -7px;
@@ -7460,7 +7713,7 @@ body > .sia-popup-portal[data-sia-popup-layer] {
   --sia-floating-arrow-border: rgb(255 255 255 / 72%);
   color: #181818;
   border: 1px solid var(--sia-floating-arrow-border);
-  box-shadow: 0 10px 30px rgb(0 0 0 / 48%), 0 0 0 1px rgb(0 0 0 / 12%);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 60%), 0 0 0 1px rgb(0 0 0 / 12%);
 }
 .sia-floating__arrow {
   position: absolute;
@@ -8440,7 +8693,7 @@ button.sia-treemap__tile:focus-visible,
   background: var(--sia-color-bg, white);
   border: 1px solid var(--sia-color-border, #ddd);
   border-radius: 6px;
-  box-shadow: 0 6px 24px #0002;
+  box-shadow: var(--sia-shadow-popup);
 }
 .sia-selection-panel {
   min-width: 0;
@@ -8744,7 +8997,7 @@ button.sia-treemap__tile:focus-visible,
   cursor: pointer;
   background: var(--sia-color-surface);
   border: 1px solid color-mix(in srgb, var(--sia-color-border) 45%, transparent);
-  box-shadow: 0 6px 16px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 6%);
+  box-shadow: var(--sia-shadow-popup);
   transition:
     background 160ms ease,
     box-shadow 160ms ease,
@@ -9663,7 +9916,7 @@ button.sia-treemap__tile:focus-visible,
   background: var(--sia-color-surface);
   border: 2px solid var(--sia-color-primary);
   border-radius: 4px;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 22%);
   pointer-events: auto;
 }
 .sia-chart-data-zoom input::-moz-range-thumb {