@skygraph/styles 0.2.3 → 0.6.4

package/README.md

@@ -1,7 +1,7 @@
 # @skygraph/styles
 
 Framework-agnostic CSS for SkyGraph — design tokens, themes, transitions, print
-layer and 60+ component stylesheets. Zero JS, no runtime, just CSS Variables.
+layer and per-component stylesheets. Zero JS, no runtime, just CSS Variables.
 
 This package is the styling foundation shared by **all** SkyGraph adapters
 (`@skygraph/react`, future `@skygraph/vue`, `@skygraph/angular`, …). The CSS

package/components/autocomplete.css

@@ -13,7 +13,7 @@
   top: 100%;
   left: 0;
   right: 0;
-  z-index: 100;
+  z-index: var(--sg-z-dropdown);
   margin-top: 4px;
   padding: var(--sg-padding-xs) 0;
   background: var(--sg-color-bg-elevated);
@@ -30,4 +30,6 @@
   transition: background var(--sg-transition-duration);
 }
 
-.sg-autocomplete-option:hover { background: var(--sg-color-bg-hover); }
+.sg-autocomplete-option:hover {
+  background: var(--sg-color-bg-hover);
+}

package/components/cascader.css

@@ -20,8 +20,8 @@
   justify-content: space-between;
   /* Shares the `--sg-input-*` family with `Input` so scoped overrides
    * (height / radius / bg / border) re-skin the trigger. */
-  min-height: var(--sg-input-height, var(--sg-height-md));
-  padding: var(--sg-padding-xs) var(--sg-padding-md);
+  height: var(--sg-input-height, var(--sg-height-md));
+  padding: 0 var(--sg-padding-md);
   color: var(--sg-input-color, var(--sg-color-text));
   background: var(--sg-input-bg, var(--sg-color-bg-container));
   border: 1px solid var(--sg-input-border, var(--sg-color-border));
@@ -32,15 +32,29 @@
 }
 
 .sg-cascader-small .sg-cascader-selector {
-  min-height: var(--sg-height-sm);
+  height: var(--sg-height-sm);
   font-size: var(--sg-font-size-sm);
 }
 
 .sg-cascader-large .sg-cascader-selector {
-  min-height: var(--sg-height-lg);
+  height: var(--sg-height-lg);
   font-size: var(--sg-font-size-lg);
 }
 
+.sg-cascader-multiple .sg-cascader-selector {
+  height: auto;
+  min-height: var(--sg-input-height, var(--sg-height-md));
+  padding: 2px var(--sg-padding-sm) 2px 4px;
+}
+
+.sg-cascader-multiple.sg-cascader-small .sg-cascader-selector {
+  min-height: var(--sg-height-sm);
+}
+
+.sg-cascader-multiple.sg-cascader-large .sg-cascader-selector {
+  min-height: var(--sg-height-lg);
+}
+
 .sg-cascader-open .sg-cascader-selector {
   border-color: var(--sg-color-primary);
   box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
@@ -177,7 +191,7 @@
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 100;
+  z-index: var(--sg-z-dropdown);
   margin-top: 4px;
   background: var(--sg-color-bg-elevated);
   border-radius: var(--sg-border-radius);

package/components/datepicker.css

@@ -195,12 +195,31 @@
   min-width: 0;
 }
 
+/* Range + presets: absolute dropdown with `width: auto` shrink-fits to the
+ * trigger (~320px) and clips the second calendar. Size from content instead. */
+.sg-dp-dropdown-range {
+  width: max-content;
+}
+
+.sg-dp-dropdown-range .sg-dp-dropdown-inner,
+.sg-dp-dropdown-range .sg-dp-content,
+.sg-dp-dropdown-range .sg-dp-range-panels,
+.sg-dp-dropdown-range .sg-dp-panel {
+  flex-shrink: 0;
+  min-width: min-content;
+}
+
 /* ── Presets sidebar ── */
 
 .sg-dp-presets {
   border-right: 1px solid var(--sg-color-border-secondary);
   padding: var(--sg-padding-sm);
   min-width: 120px;
+  /* Size to the widest label instead of being squeezed by the flex row —
+   * a squeezed column turns `overflow-y: auto` into a stray horizontal
+   * scrollbar. Capped so a long custom label can't blow out the popup. */
+  flex: 0 0 auto;
+  max-width: 200px;
   max-height: 320px;
   overflow-y: auto;
 }
@@ -211,7 +230,10 @@
   cursor: pointer;
   font-size: var(--sg-font-size-sm);
   color: var(--sg-color-text);
-  white-space: nowrap;
+  /* Wrap long labels onto a second line rather than overflowing the column
+   * (which would force a horizontal scrollbar). */
+  white-space: normal;
+  overflow-wrap: anywhere;
   transition: background var(--sg-transition-duration);
 }
 
@@ -322,6 +344,7 @@ button.sg-dp-panel-title.sg-dp-panel-title-btn:hover {
   height: 28px;
   border-radius: 50%;
   font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text);
   transition:
     color var(--sg-transition-duration),
     background var(--sg-transition-duration),
@@ -577,6 +600,15 @@ button.sg-dp-panel-title.sg-dp-panel-title-btn:hover {
 
 .sg-dp-range-panels {
   display: flex;
+  flex-wrap: nowrap;
+}
+
+.sg-dp-range-panels .sg-dp-panel {
+  flex: 0 0 auto;
+}
+
+.sg-dp-range-panels .sg-dp-table {
+  width: max-content;
 }
 
 .sg-dp-range-panels .sg-dp-panel + .sg-dp-panel {

package/components/drawer.css

@@ -12,8 +12,12 @@
 }
 
 @keyframes sg-drawer-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .sg-drawer {
@@ -53,23 +57,39 @@
 }
 
 @keyframes sg-drawer-slide-right {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 @keyframes sg-drawer-slide-left {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(0); }
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 @keyframes sg-drawer-slide-top {
-  from { transform: translateY(-100%); }
-  to { transform: translateY(0); }
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 
 @keyframes sg-drawer-slide-bottom {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 
 .sg-drawer-header {
@@ -94,6 +114,7 @@
 .sg-drawer-body {
   flex: 1;
   padding: var(--sg-padding-xl);
+  color: var(--sg-color-text);
   overflow: auto;
 }
 

package/components/event-timeline.css

@@ -15,6 +15,11 @@
   align-items: flex-start;
   overflow-x: auto;
   padding-bottom: var(--sg-padding-md);
+  /* Drop the flex gap horizontally: it broke the marker rail into disjoint
+   * segments (one per card) which read as a dashed, glitchy line. Items carry
+   * their own horizontal padding for spacing instead, and the rail below is
+   * extended to bridge that padding so it renders as one continuous track. */
+  gap: 0;
 }
 
 .sg-event-timeline-group {
@@ -49,14 +54,43 @@
   /* Slightly larger dot + brighter halo when the parent item is hovered.
    * Both are driven by the new `--sg-event-timeline-dot-shadow-hover`
    * token so the affordance remains theme-correct. */
-  transform: scale(1.20);
+  transform: scale(1.2);
   box-shadow: var(--sg-event-timeline-dot-shadow-hover);
 }
 
 .sg-event-timeline-horizontal .sg-event-timeline-item {
   flex-direction: column;
+  align-items: flex-start;
   min-width: 160px;
   padding: 0 var(--sg-padding-md);
+  position: relative;
+}
+
+/* Horizontal mode: lay the marker out as a full-width rail so the dots line up
+ * on a single track instead of floating above each card. */
+.sg-event-timeline-horizontal .sg-event-timeline-marker {
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: var(--sg-margin-sm);
+  position: relative;
+}
+
+.sg-event-timeline-horizontal .sg-event-timeline-marker::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  /* Extend across the item's own horizontal padding so adjacent items'
+   * rails meet edge-to-edge into one continuous line. */
+  left: calc(-1 * var(--sg-padding-md));
+  right: calc(-1 * var(--sg-padding-md));
+  height: 2px;
+  background: var(--sg-color-border-secondary);
+  transform: translateY(-50%);
+}
+
+.sg-event-timeline-horizontal .sg-event-timeline-dot {
+  position: relative;
+  z-index: var(--sg-z-base);
 }
 
 .sg-event-timeline-marker {

package/components/list.css

@@ -8,6 +8,11 @@
 .sg-list-bordered {
   border: 1px solid var(--sg-color-border);
   border-radius: var(--sg-border-radius);
+  /* Clip header / footer / first-last item backgrounds (which have square
+   * corners) to the rounded border. Without this the tinted header and the
+   * hover/selected row backgrounds bleed past the radius, so the corners
+   * appear to be a different colour than the rest of the outline. */
+  overflow: hidden;
 }
 
 .sg-list-loading {
@@ -55,7 +60,11 @@
 /* ---- Single item ---- */
 .sg-list-item {
   display: flex;
-  align-items: flex-start;
+  /* Center main / actions / extra blocks on a single baseline so rows with a
+   * multi-line Meta block (avatar + title + description) stay visually even.
+   * The Meta block keeps its own `align-items: flex-start` internally so the
+   * avatar still tops out with the title. */
+  align-items: center;
   padding: var(--sg-padding-md) var(--sg-padding-lg);
   transition: background var(--sg-transition-duration);
 }

package/components/menu.css

@@ -150,6 +150,23 @@
   flex-shrink: 0;
 }
 
+/* First-letter fallback shown on the collapsed rail for items without an icon. */
+.sg-menu-item-icon-fallback {
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--sg-border-radius-sm);
+  background: var(--sg-color-fill-secondary, var(--sg-color-bg-secondary));
+  color: var(--sg-color-text-secondary);
+  font-size: var(--sg-font-size-sm);
+  font-weight: 600;
+}
+
+.sg-menu-item-selected .sg-menu-item-icon-fallback {
+  background: var(--sg-color-primary-bg);
+  color: var(--sg-color-primary);
+}
+
 .sg-menu-item-label {
   flex: 1;
   overflow: hidden;

package/components/rate.css

@@ -11,6 +11,14 @@
   font-size: var(--sg-font-size-xl);
 }
 
+/* Dark theme: the tertiary text colour already carries a low alpha, and the
+ * extra 0.72 symbol opacity stacked on top made empty stars nearly invisible
+ * on a dark surface. Use an explicit visible grey at full opacity instead. */
+[data-sg-theme='dark'] .sg-rate {
+  --sg-rate-symbol-empty-color: rgba(255, 255, 255, 0.55);
+  --sg-rate-symbol-empty-opacity: 1;
+}
+
 .sg-rate-disabled {
   pointer-events: none;
   opacity: 0.5;

package/components/select.css

@@ -64,7 +64,7 @@
   top: 100%;
   left: 0;
   right: 0;
-  z-index: 100;
+  z-index: var(--sg-z-dropdown);
   margin-top: 4px;
   padding: var(--sg-padding-xs) 0;
   background: var(--sg-color-bg-elevated);

package/components/spin.css

@@ -3,6 +3,8 @@
   --sg-spin-color: var(--sg-color-primary);
   --sg-spin-overlay-bg: rgba(255, 255, 255, 0.65);
   display: inline-block;
+  box-sizing: border-box;
+  flex: 0 0 auto;
   border: 3px solid var(--sg-spin-color);
   border-top-color: transparent;
   border-radius: 50%;
@@ -11,9 +13,21 @@
 }
 
 /* Size variants */
-.sg-spin-small   { width: 12px; height: 12px; border-width: 1.5px; }
-.sg-spin-default { width: 24px; height: 24px; border-width: 3px; }
-.sg-spin-large   { width: 36px; height: 36px; border-width: 4px; }
+.sg-spin-small {
+  width: 12px;
+  height: 12px;
+  border-width: 1.5px;
+}
+.sg-spin-default {
+  width: 24px;
+  height: 24px;
+  border-width: 3px;
+}
+.sg-spin-large {
+  width: 36px;
+  height: 36px;
+  border-width: 4px;
+}
 
 /* === Standalone (no children) === */
 .sg-spin-standalone {
@@ -45,8 +59,8 @@
   border-radius: var(--sg-border-radius);
 }
 
-[data-sg-theme="dark"] .sg-spin-overlay,
-[data-sg-theme="dark"] .sg-spin-fullscreen {
+[data-sg-theme='dark'] .sg-spin-overlay,
+[data-sg-theme='dark'] .sg-spin-fullscreen {
   --sg-spin-overlay-bg: rgba(20, 20, 20, 0.65);
 }
 
@@ -82,5 +96,7 @@
 }
 
 @keyframes sg-spin-rotate {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }

package/components/steps.css

@@ -93,6 +93,15 @@
   min-width: 0;
 }
 
+/* Horizontal: let the content row span the full width of its (flex:1) item
+ * so the connector tail inside the title — which is `flex:1` — can stretch
+ * across the gap to the next step. Without this the content shrinks to its
+ * text width, the tail collapses to its `min-width`, and the steps read as
+ * disconnected blobs separated by huge empty gaps. */
+.sg-steps-horizontal .sg-steps-item-content {
+  flex: 1;
+}
+
 .sg-steps-item-title {
   display: flex;
   align-items: center;

package/components/table.css

@@ -1,14 +1,11 @@
 .sg-table-wrapper {
-  --sg-table-row-height: auto;
-  --sg-table-row-bg: transparent;
-  --sg-table-row-hover-bg: var(--sg-color-bg-hover);
-  --sg-table-header-bg: var(--sg-color-bg-secondary);
-  --sg-table-border-color: var(--sg-color-border);
-  --sg-table-border-color-secondary: var(--sg-color-border-secondary);
-  --sg-table-cell-padding: var(--sg-padding-sm) var(--sg-padding-md);
-  /* Opaque fallback used by fixed (sticky) cells so scrolling columns
-     don't bleed through. Override per instance for non-default backgrounds. */
-  --sg-table-cell-solid-bg: var(--sg-color-bg);
+  /* NB: the `--sg-table-*` theming tokens are intentionally NOT declared here.
+   * Declaring them on the wrapper would make a custom value set on an *ancestor*
+   * (per-instance theming, e.g. `<div style={{'--sg-table-header-bg': ...}}>`)
+   * lose to the wrapper's own declaration, so the override would silently do
+   * nothing. Instead each consumer below reads the token with the global token
+   * as the `var(...)` fallback — that keeps both ancestor overrides AND scope
+   * colour theming working. */
   width: 100%;
   /* Allow shrinking below intrinsic min-content inside flex/grid parents
    * so the inner scroll container can actually overflow (or the table can
@@ -101,7 +98,7 @@
   /* Fluid mode: stretch to fill the scroll container. Overridden below
    * when the author opts into horizontal scroll via `scroll.x`. */
   min-width: 100%;
-  background: var(--sg-table-cell-solid-bg);
+  background: var(--sg-table-cell-solid-bg, var(--sg-color-bg));
 }
 
 /* Horizontal-scroll mode: the grid keeps its declared `scroll.x` width
@@ -118,11 +115,11 @@
 /* ---- Header ---- */
 .sg-table-th {
   position: relative;
-  padding: var(--sg-table-cell-padding);
+  padding: var(--sg-table-cell-padding, var(--sg-padding-sm) var(--sg-padding-md));
   font-weight: 600;
-  color: var(--sg-color-text);
-  background: var(--sg-table-header-bg);
-  border-bottom: 1px solid var(--sg-table-border-color);
+  color: var(--sg-table-header-color, var(--sg-color-text));
+  background: var(--sg-table-header-bg, var(--sg-color-bg-secondary));
+  border-bottom: 1px solid var(--sg-table-border-color, var(--sg-color-border));
   user-select: none;
   display: flex;
   align-items: center;
@@ -214,7 +211,7 @@
    Opaque body/header overrides live at the end of the file where they can
    win the cascade against .sg-table-td / .sg-table-th. */
 .sg-table-cell-fixed {
-  background: var(--sg-table-cell-solid-bg);
+  background: var(--sg-table-cell-solid-bg, var(--sg-color-bg));
 }
 
 /* Sticky header */
@@ -230,10 +227,10 @@
 
 /* ---- Body cells ---- */
 .sg-table-td {
-  padding: var(--sg-table-cell-padding);
-  min-height: var(--sg-table-row-height);
-  background: var(--sg-table-row-bg);
-  border-bottom: 1px solid var(--sg-table-border-color-secondary);
+  padding: var(--sg-table-cell-padding, var(--sg-padding-sm) var(--sg-padding-md));
+  min-height: var(--sg-table-row-height, auto);
+  background: var(--sg-table-row-bg, transparent);
+  border-bottom: 1px solid var(--sg-table-border-color-secondary, var(--sg-color-border-secondary));
   display: flex;
   align-items: center;
   min-width: 0;
@@ -241,7 +238,7 @@
 }
 
 .sg-table-hoverable .sg-table-row:hover .sg-table-td {
-  background: var(--sg-table-row-hover-bg);
+  background: var(--sg-table-row-hover-bg, var(--sg-color-bg-hover));
 }
 
 .sg-table-row-selected .sg-table-td {
@@ -971,15 +968,15 @@
  * the row, so the "floating" effect disappears entirely.
  */
 .sg-table-td.sg-table-cell-fixed {
-  background: var(--sg-table-cell-solid-bg);
+  background: var(--sg-table-cell-solid-bg, var(--sg-color-bg));
 }
 
 .sg-table-th.sg-table-cell-fixed {
-  background: var(--sg-table-header-bg);
+  background: var(--sg-table-header-bg, var(--sg-color-bg-secondary));
 }
 
 .sg-table-hoverable .sg-table-row:hover .sg-table-td.sg-table-cell-fixed {
-  background: var(--sg-table-row-hover-bg);
+  background: var(--sg-table-row-hover-bg, var(--sg-color-bg-hover));
 }
 
 .sg-table-row-selected .sg-table-td.sg-table-cell-fixed,
@@ -988,11 +985,15 @@
 }
 
 .sg-table-row-striped .sg-table-td.sg-table-cell-fixed {
-  background: color-mix(in srgb, var(--sg-color-text) 2%, var(--sg-table-cell-solid-bg));
+  background: color-mix(
+    in srgb,
+    var(--sg-color-text) 2%,
+    var(--sg-table-cell-solid-bg, var(--sg-color-bg))
+  );
 }
 
 .sg-table-hoverable .sg-table-row-striped:hover .sg-table-td.sg-table-cell-fixed {
-  background: var(--sg-table-row-hover-bg);
+  background: var(--sg-table-row-hover-bg, var(--sg-color-bg-hover));
 }
 
 /* Subtle shadow on the inner edge so the fixed column visually detaches

package/components/tabs.css

@@ -4,6 +4,26 @@
   font-size: var(--sg-font-size);
 }
 
+/* ── Size variants ──────────────────────────────────────────────────── */
+
+.sg-tabs-small {
+  font-size: var(--sg-font-size-sm);
+}
+
+/* Extra `.sg-tabs` qualifier keeps these ahead of `.sg-tabs-line/card .sg-tabs-tab`
+ * (same base specificity, defined later in the file). */
+.sg-tabs.sg-tabs-small .sg-tabs-tab {
+  padding: var(--sg-padding-xs) var(--sg-padding-md);
+}
+
+.sg-tabs-large {
+  font-size: var(--sg-font-size-lg);
+}
+
+.sg-tabs.sg-tabs-large .sg-tabs-tab {
+  padding: var(--sg-padding-md) var(--sg-padding-xl);
+}
+
 .sg-tabs-tab-disabled {
   color: var(--sg-color-text-disabled);
   cursor: not-allowed;

package/components/timepicker.css

@@ -27,7 +27,9 @@
   min-width: 140px;
   font-size: var(--sg-font-size);
   color: var(--sg-color-text);
-  transition: border-color var(--sg-transition-duration), box-shadow var(--sg-transition-duration);
+  transition:
+    border-color var(--sg-transition-duration),
+    box-shadow var(--sg-transition-duration);
 }
 
 .sg-timepicker-input:hover {
@@ -45,6 +47,14 @@
   box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
 }
 
+.sg-timepicker-value,
+.sg-timepicker-placeholder {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .sg-timepicker-placeholder {
   color: var(--sg-color-text-quaternary);
 }
@@ -201,7 +211,8 @@
   color: var(--sg-color-primary);
   font-size: var(--sg-font-size-sm);
   cursor: pointer;
-  transition: color var(--sg-transition-duration),
+  transition:
+    color var(--sg-transition-duration),
     background var(--sg-transition-duration),
     border-color var(--sg-transition-duration),
     box-shadow var(--sg-transition-duration);

package/components/tree.css

@@ -39,8 +39,9 @@
   color: var(--sg-color-text);
   font-size: var(--sg-font-size);
   outline: none;
-  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing),
-              box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
+  transition:
+    border-color var(--sg-transition-duration) var(--sg-transition-timing),
+    box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
   box-sizing: border-box;
 }
 
@@ -71,8 +72,9 @@
   border-radius: 50%;
   padding: 0;
   line-height: 1;
-  transition: color var(--sg-transition-duration) var(--sg-transition-timing),
-              background var(--sg-transition-duration) var(--sg-transition-timing);
+  transition:
+    color var(--sg-transition-duration) var(--sg-transition-timing),
+    background var(--sg-transition-duration) var(--sg-transition-timing);
 }
 
 .sg-tree-search-clear:hover {
@@ -112,8 +114,9 @@
   border-radius: var(--sg-border-radius-sm);
   font-size: 14px;
   padding: 0;
-  transition: color var(--sg-transition-duration) var(--sg-transition-timing),
-              background var(--sg-transition-duration) var(--sg-transition-timing);
+  transition:
+    color var(--sg-transition-duration) var(--sg-transition-timing),
+    background var(--sg-transition-duration) var(--sg-transition-timing);
 }
 
 .sg-tree-toolbar-btn:hover {
@@ -259,7 +262,9 @@
   cursor: default;
 }
 
-.sg-tree-switcher:hover:not(.sg-tree-switcher-noop):not(.sg-tree-switcher-leaf):not(.sg-tree-switcher-loading) {
+.sg-tree-switcher:hover:not(.sg-tree-switcher-noop):not(.sg-tree-switcher-leaf):not(
+    .sg-tree-switcher-loading
+  ) {
   color: var(--sg-color-primary);
 }
 
@@ -381,8 +386,9 @@
   border-radius: var(--sg-border-radius-sm);
   font-size: 12px;
   padding: 0;
-  transition: color var(--sg-transition-duration) var(--sg-transition-timing),
-              background var(--sg-transition-duration) var(--sg-transition-timing);
+  transition:
+    color var(--sg-transition-duration) var(--sg-transition-timing),
+    background var(--sg-transition-duration) var(--sg-transition-timing);
 }
 
 .sg-tree-action-btn:hover {
@@ -418,15 +424,31 @@
   flex-shrink: 0;
 }
 
-.sg-tree-status-success { background: var(--sg-color-success); }
-.sg-tree-status-warning { background: var(--sg-color-warning); }
-.sg-tree-status-error { background: var(--sg-color-error); }
-.sg-tree-status-info { background: var(--sg-color-primary); }
+.sg-tree-status-success {
+  background: var(--sg-color-success);
+}
+.sg-tree-status-warning {
+  background: var(--sg-color-warning);
+}
+.sg-tree-status-error {
+  background: var(--sg-color-error);
+}
+.sg-tree-status-info {
+  background: var(--sg-color-primary);
+}
 
-.sg-tree-node-status-success { border-left: 2px solid var(--sg-color-success); }
-.sg-tree-node-status-warning { border-left: 2px solid var(--sg-color-warning); }
-.sg-tree-node-status-error { border-left: 2px solid var(--sg-color-error); }
-.sg-tree-node-status-info { border-left: 2px solid var(--sg-color-primary); }
+.sg-tree-node-status-success {
+  border-left: 2px solid var(--sg-color-success);
+}
+.sg-tree-node-status-warning {
+  border-left: 2px solid var(--sg-color-warning);
+}
+.sg-tree-node-status-error {
+  border-left: 2px solid var(--sg-color-error);
+}
+.sg-tree-node-status-info {
+  border-left: 2px solid var(--sg-color-primary);
+}
 
 /* ═══════════════════════════════════════════
    CONNECTING LINES (tree guide lines)
@@ -514,12 +536,17 @@
   outline-offset: -1px;
 }
 
+/* Drop indicators use an inset box-shadow rather than a real border so the
+ * node box size never changes mid-drag. A 2px border re-flowed the row on
+ * every `dragover`, which shifted the hit-box and made the indicator (and
+ * the whole tree) flicker/jitter. box-shadow paints without affecting
+ * layout — same 2px line, no reflow. */
 .sg-tree-node-drop-before {
-  border-top: 2px solid var(--sg-color-primary);
+  box-shadow: inset 0 2px 0 var(--sg-color-primary);
 }
 
 .sg-tree-node-drop-after {
-  border-bottom: 2px solid var(--sg-color-primary);
+  box-shadow: inset 0 -2px 0 var(--sg-color-primary);
 }
 
 /* ═══════════════════════════════════════════

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skygraph/styles",
-  "version": "0.2.3",
+  "version": "0.6.4",
   "description": "SkyGraph framework-agnostic CSS — tokens, themes, transitions, print and 60+ component stylesheets",
   "license": "MIT",
   "type": "module",