@keenmate/svelte-treeview 5.0.0-rc09 → 5.0.0-rc10

package/dist/styles/{_base.css → base.css}

@@ -32,6 +32,8 @@
 .ltree-container {
 	position: relative;
 	outline: none;
+	background: var(--ltree-bg);
+	color: var(--ltree-body-color);
 }
 
 .ltree-virtual-scroll {

package/dist/styles/controls.css

@@ -0,0 +1,4 @@
+/* controls.css — no interactive form controls in this component.
+   (The checkbox lives in checkbox.css since it has substantial styling surface
+    and is a Tier-3 feature; this file is the canonical stub for buttons,
+    inputs, and other form chrome the tree doesn't render.) */

package/dist/styles/dark-mode.css

@@ -0,0 +1,139 @@
+/* =============================================================================
+   DARK MODE / LIGHT MODE SUPPORT
+   =============================================================================
+   Belt-and-suspenders coverage: catches OS preference, page-level color-scheme,
+   framework theme classes, and per-instance data-theme overrides.
+
+   See guidelines/web-components/color-scheme.md for the full signals matrix.
+   Note: this component ships as Svelte (light DOM), so we use ancestor /
+   attribute selectors instead of the shadow-DOM :host-context() and :host()
+   forms in the canonical guideline.
+
+   Resolution precedence (highest specificity wins):
+     per-instance .ltree-container[data-theme]
+       → framework ancestor class
+         → page color-scheme via light-dark() in variables.css
+           → OS preference via @media (this file)
+             → hardcoded light defaults
+
+   Override surface: every block re-declares the same set of --ltree-* tokens.
+   Keep these blocks in sync — if a new themeable var is added in variables.css,
+   add it everywhere here too.
+   ============================================================================= */
+
+/* ----------------------------------------------------------------------------
+   SHARED DARK VALUES
+   ----------------------------------------------------------------------------
+   Defined as a custom-property bundle on a private selector so the other dark
+   blocks can pull from one source of truth. Edits land in one place.
+   --------------------------------------------------------------------------- */
+
+/* =============================================================================
+   SIGNAL #1 — OS preference (forced even when no color-scheme is declared)
+   ============================================================================= */
+@media (prefers-color-scheme: dark) {
+	.ltree-container {
+		/* Every override chains through --base-* so themes that set a dark
+		   variant of the canonical tokens (e.g. brand-forest's dark --base-main-bg)
+		   win over the hardcoded dark fallbacks below. */
+		--ltree-bg: var(--base-main-bg, #1a1a1a);
+		--ltree-light: var(--base-main-bg, #1a1a1a);
+		--ltree-elevated-bg: var(--base-elevated-bg, #2b2b2b);
+		--ltree-border: var(--base-border-color, #3d3d3d);
+		--ltree-body-color: var(--base-text-color-1, #f5f5f5);
+		--ltree-node-path-color: var(--base-text-color-3, #a3a3a3);
+		--ltree-toggle-icon-color: var(--base-text-color-3, #a3a3a3);
+		--ltree-checkbox-border-color: var(--base-border-color, #5a5a5a);
+		--ltree-checkbox-bg: var(--base-input-bg, #1f1f1f);
+		--ltree-context-menu-bg: var(--base-dropdown-bg, var(--base-elevated-bg, var(--base-main-bg, #2b2b2b)));
+		--ltree-context-menu-shortcut-color: var(--base-text-color-4, #6b7280);
+		--ltree-context-menu-arrow-color: var(--base-text-color-4, #6b7280);
+		--ltree-context-menu-divider-label-color: var(--base-text-color-4, #6b7280);
+		--ltree-loading-bg: color-mix(in srgb, var(--base-main-bg, #1a1a1a) 80%, transparent);
+		--ltree-loading-color: var(--base-text-color-3, #a3a3a3);
+		--ltree-spinner-track: var(--base-border-color, #3d3d3d);
+	}
+}
+
+/* =============================================================================
+   SIGNAL #4 — Framework theme classes (Bootstrap 5.3+, Tailwind, generic)
+   =============================================================================
+   Safety net for frameworks that flip a theme class but don't set color-scheme
+   (Tailwind's `.dark`, hand-rolled toggles, older framework versions).
+   ============================================================================= */
+[data-theme="dark"] .ltree-container,
+[data-bs-theme="dark"] .ltree-container,
+.dark .ltree-container {
+	--ltree-bg: var(--base-main-bg, #1a1a1a);
+	--ltree-light: var(--base-main-bg, #1a1a1a);
+	--ltree-elevated-bg: var(--base-elevated-bg, #2b2b2b);
+	--ltree-border: var(--base-border-color, #3d3d3d);
+	--ltree-body-color: var(--base-text-color-1, #f5f5f5);
+	--ltree-node-path-color: var(--base-text-color-3, #a3a3a3);
+	--ltree-toggle-icon-color: var(--base-text-color-3, #a3a3a3);
+	--ltree-checkbox-border-color: var(--base-border-color, #5a5a5a);
+	--ltree-checkbox-bg: var(--base-input-bg, #1f1f1f);
+	--ltree-context-menu-bg: var(--base-dropdown-bg, var(--base-elevated-bg, var(--base-main-bg, #2b2b2b)));
+	--ltree-context-menu-shortcut-color: var(--base-text-color-4, #6b7280);
+	--ltree-context-menu-arrow-color: var(--base-text-color-4, #6b7280);
+	--ltree-context-menu-divider-label-color: var(--base-text-color-4, #6b7280);
+	--ltree-loading-bg: color-mix(in srgb, var(--base-main-bg, #1a1a1a) 80%, transparent);
+	--ltree-loading-color: var(--base-text-color-3, #a3a3a3);
+	--ltree-spinner-track: var(--base-border-color, #3d3d3d);
+}
+
+/* =============================================================================
+   SIGNAL #5 — Per-instance override on a single tree
+   =============================================================================
+   Highest specificity: lets one tree theme differently from the surrounding
+   page. Wires through the `theme` prop forwarded by Tree.svelte.
+   ============================================================================= */
+.ltree-container[data-theme="dark"] {
+	--ltree-bg: var(--base-main-bg, #1a1a1a);
+	--ltree-light: var(--base-main-bg, #1a1a1a);
+	--ltree-elevated-bg: var(--base-elevated-bg, #2b2b2b);
+	--ltree-border: var(--base-border-color, #3d3d3d);
+	--ltree-body-color: var(--base-text-color-1, #f5f5f5);
+	--ltree-node-path-color: var(--base-text-color-3, #a3a3a3);
+	--ltree-toggle-icon-color: var(--base-text-color-3, #a3a3a3);
+	--ltree-checkbox-border-color: var(--base-border-color, #5a5a5a);
+	--ltree-checkbox-bg: var(--base-input-bg, #1f1f1f);
+	--ltree-context-menu-bg: var(--base-dropdown-bg, var(--base-elevated-bg, var(--base-main-bg, #2b2b2b)));
+	--ltree-context-menu-shortcut-color: var(--base-text-color-4, #6b7280);
+	--ltree-context-menu-arrow-color: var(--base-text-color-4, #6b7280);
+	--ltree-context-menu-divider-label-color: var(--base-text-color-4, #6b7280);
+	--ltree-loading-bg: color-mix(in srgb, var(--base-main-bg, #1a1a1a) 80%, transparent);
+	--ltree-loading-color: var(--base-text-color-3, #a3a3a3);
+	--ltree-spinner-track: var(--base-border-color, #3d3d3d);
+}
+
+/* =============================================================================
+   SYMMETRIC LIGHT OVERRIDES — force light on a dark page
+   =============================================================================
+   When a consumer wants one tree to render light on an otherwise-dark page,
+   `data-theme="light"` (or the framework equivalent) restores the variables to
+   the original light defaults from variables.css.
+   ============================================================================= */
+[data-theme="light"] .ltree-container,
+[data-bs-theme="light"] .ltree-container,
+.light .ltree-container,
+.ltree-container[data-theme="light"] {
+	--ltree-bg: var(--base-main-bg, #ffffff);
+	--ltree-light: var(--base-main-bg, #f8f9fa);
+	--ltree-elevated-bg: var(--base-elevated-bg, #ffffff);
+	--ltree-border: var(--base-border-color, #dee2e6);
+	--ltree-body-color: var(--base-text-color-1, #212529);
+	--ltree-node-path-color: var(--base-text-color-3, #6c757d);
+	--ltree-toggle-icon-color: var(--base-text-color-3, #6c757d);
+	--ltree-checkbox-border-color: var(--base-border-color, #adb5bd);
+	--ltree-checkbox-bg: var(--base-input-bg, #ffffff);
+	--ltree-context-menu-bg: var(--base-dropdown-bg,
+		var(--base-elevated-bg,
+			var(--base-main-bg, #ffffff)));
+	--ltree-context-menu-shortcut-color: var(--base-text-color-4, #9ca3af);
+	--ltree-context-menu-arrow-color: var(--base-text-color-4, #9ca3af);
+	--ltree-context-menu-divider-label-color: var(--base-text-color-4, #9ca3af);
+	--ltree-loading-bg: color-mix(in srgb, var(--base-main-bg, #ffffff) 80%, transparent);
+	--ltree-loading-color: var(--base-text-color-3, #718096);
+	--ltree-spinner-track: var(--base-border-color, #e2e8f0);
+}

package/dist/styles/{_drag-drop.css → drag-drop.css}

@@ -35,7 +35,7 @@
 	font-family: var(--ltree-font-family);
 	pointer-events: none;
 	z-index: 10000;
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+	box-shadow: var(--tree-ghost-shadow);
 	white-space: nowrap;
 	max-width: 200px;
 	overflow: hidden;
@@ -74,11 +74,7 @@
 	box-shadow: var(--ltree-dragover-shadow) !important;
 }
 
-@keyframes bounce {
-	0%, 20%, 50%, 80%, 100% { transform: translateY(-50%); }
-	40% { transform: translateY(-60%); }
-	60% { transform: translateY(-40%); }
-}
+/* (@keyframes bounce — moved to animations.css per canonical Tier-2 layout.) */
 
 /* Drag-over and drop validity states applied to .ltree-node-content */
 .ltree-node-content.ltree-drag-over {

package/dist/styles/floating.css

@@ -0,0 +1,5 @@
+/* floating.css — no Floating-UI-anchored chrome lives here.
+   (The context menu has its own substantial styling surface in context-menu.css
+    as a Tier-3 feature; the debug popup is statically positioned. This file is
+    the canonical stub for tooltips, dropdowns, popovers, and menus when more
+    floating surfaces are added.) */

package/dist/styles/{_loading.css → loading.css}

@@ -24,11 +24,7 @@
 	animation: ltree-spin 0.8s linear infinite;
 }
 
-@keyframes ltree-spin {
-	to {
-		transform: rotate(360deg);
-	}
-}
+/* (@keyframes ltree-spin — moved to animations.css per canonical Tier-2 layout.) */
 
 /* Progressive rendering loading indicator */
 .ltree-loading-more {

package/dist/styles/main.css

@@ -1,37 +1,44 @@
-/* =============================================================================
-   @keenmate/svelte-treeview — Component Styles (entry point)
-   =============================================================================
-
-   File layout:
-     _variables.css     CSS custom properties at :root (theming surface)
-     _base.css          Tree container, virtual-scroll, layout foundation
-     _node.css          Node row, content, label, path
-     _toggle-icons.css  Toggle column + all 9 Lucide SVG icon classes
-     _checkbox.css      Custom-styled checkbox with indeterminate support
-     _states.css        Selection, highlight, scroll-highlight states
-     _drag-drop.css     Draggable cursor, ghost, drag-over, glow mode + arrows
-     _drop-zones.css    Drop zone overlays (around / above / below / wave / wave2)
-     _context-menu.css  Context menu, submenu, dividers
-     _debug.css         Debug info panel
-     _loading.css       Loading overlay + spinner
-
-   Import order matters — variables MUST be first; states / drag-drop / drop-zones
-   reference variables; context-menu uses some of the same colors but does not
-   depend on earlier rules.
-
-   Build: lightningcss bundles this file (resolving the @import chain) into
-   dist/styles.css during `npm run prepack`. Consumers import the bundled file:
-     import '@keenmate/svelte-treeview/styles.css';
-*/
-
-@import './_variables.css';
-@import './_base.css';
-@import './_node.css';
-@import './_toggle-icons.css';
-@import './_checkbox.css';
-@import './_states.css';
-@import './_drag-drop.css';
-@import './_drop-zones.css';
-@import './_context-menu.css';
-@import './_debug.css';
-@import './_loading.css';
+/* ==============================================================================
+   @keenmate/svelte-treeview — MAIN ENTRY POINT
+   ==============================================================================
+   Cascade layer order (later = higher priority):
+     variables  — :root { --ltree-* } declarations
+     component  — base + feature rules
+     overrides  — dark mode, framework themes, per-instance overrides
+
+   Consumer override contract:
+   - Any unlayered consumer rule beats every rule below.
+   - Any :root --base-* or --ltree-* declaration beats the variables layer.
+
+   BEM-ish convention:
+     .ltree-<element>             — element
+     .ltree-<element>-<modifier>  — state modifier
+   (Legacy class names predate strict BEM and are kept stable for back-compat.)
+
+   Build: lightningcss-cli bundles this file into dist/styles.css during
+   `npm run prepack`. Consumers import the bundled file:
+     import '@keenmate/svelte-treeview/styles.css';
+*/
+
+@layer variables, component, overrides;
+
+/* === SKELETON + CANONICAL CONCERNS (Tier 1 + Tier 2 — identical across the suite) === */
+@import url('./variables.css')   layer(variables);
+@import url('./base.css')        layer(component);
+@import url('./controls.css')    layer(component);
+@import url('./floating.css')    layer(component);
+@import url('./states.css')      layer(component);
+@import url('./animations.css')  layer(component);
+
+/* === COMPONENT-SPECIFIC FEATURES (Tier 3 — alphabetized) === */
+@import url('./checkbox.css')    layer(component);
+@import url('./context-menu.css') layer(component);
+@import url('./debug.css')       layer(component);
+@import url('./drag-drop.css')   layer(component);
+@import url('./drop-zones.css')  layer(component);
+@import url('./loading.css')     layer(component);
+@import url('./node.css')        layer(component);
+@import url('./toggle-icons.css') layer(component);
+
+/* === OVERRIDES === */
+@import url('./dark-mode.css')   layer(overrides);

package/dist/styles/{_variables.css → variables.css}

@@ -1,18 +1,27 @@
 /* =============================================================================
-   CSS CUSTOM PROPERTIES — :root level
+   CSS CUSTOM PROPERTIES — scoped to .ltree-container
    =============================================================================
    Every styling value is exposed as a --ltree-* custom property so end users
-   can theme the component at runtime. Each variable follows this resolution
-   chain:
-
-     1. End-user override:   element { --ltree-x: red; }
-     2. KeenMate base token: --base-x (shared across @keenmate/* components)
-     3. Hardcoded default
-
-   To override at runtime:
-     .ltree-tree { --ltree-primary: #10b981; --ltree-node-font-size: 1.6rem; }
-   Or globally for all KM components:
-     :root { --base-accent-color: #10b981; }
+   can theme the component at runtime.
+
+   IMPORTANT: declarations are on .ltree-container (the tree's root element),
+   NOT on :root. This mirrors web-multiselect's :host-scoped pattern: var()
+   substitution happens AT the tree's own element, so an ancestor that sets
+   --base-accent-color (or any --base-*) actually re-tints the tree. Declaring
+   at :root would freeze the substituted value at the document root and ignore
+   any wrapper overrides.
+
+   Resolution chain (priority high → low):
+     1. Consumer rule targeting .ltree-container directly:
+          .my-wrap .ltree-container { --ltree-primary: red; }
+     2. Consumer's --base-* set on any ancestor (including :root or a wrapper):
+          .my-wrap { --base-accent-color: red; }
+     3. Hardcoded fallback inside the var() chain below.
+
+   Setting --ltree-* on a wrapper (not on .ltree-container itself) no longer
+   cascades into the tree, because .ltree-container has its own direct rule
+   for every --ltree-* token. To theme a subtree, prefer --base-* on the
+   wrapper, or write `.wrapper .ltree-container { --ltree-* }`.
 
    BASE SIZING UNIT
    ----------------
@@ -21,7 +30,7 @@
    make every dimension scale with document font-size (Pure-Admin pattern).
    ============================================================================= */
 
-:root {
+.ltree-container {
 	/* -------------------------------------------------------------------------
 	   BASE SIZING UNIT
 	   ------------------------------------------------------------------------- */
@@ -30,13 +39,23 @@
 	/* -------------------------------------------------------------------------
 	   COLORS — theme integration via --base-* tokens
 	   Tinted variants are derived via color-mix(); no -rgb companion needed.
+
+	   Color fallbacks use light-dark(<light>, <dark>) so consumers that declare
+	   `html { color-scheme: light dark }` get OS-aware behavior automatically.
+	   The brand accent (--base-accent-color) is treated as theme-independent —
+	   both themes share the same primary.
 	   ------------------------------------------------------------------------- */
 	--ltree-primary: var(--base-accent-color, #0d6efd);
-	--ltree-success: var(--base-success-color, #198754);
-	--ltree-danger: var(--base-danger-color, #dc3545);
-	--ltree-light: var(--base-main-bg, #f8f9fa);
-	--ltree-border: var(--base-border-color, #dee2e6);
-	--ltree-body-color: var(--base-text-color-1, #212529);
+	--ltree-success: var(--base-success-color, light-dark(#198754, #2ea561));
+	--ltree-danger: var(--base-danger-color, light-dark(#dc3545, #f87c86));
+	--ltree-light: var(--base-main-bg, light-dark(#f8f9fa, #1a1a1a));
+	--ltree-elevated-bg: var(--base-elevated-bg, light-dark(#ffffff, #2b2b2b));
+	--ltree-border: var(--base-border-color, light-dark(#dee2e6, #3d3d3d));
+	--ltree-body-color: var(--base-text-color-1, light-dark(#212529, #f5f5f5));
+	/* Tree surface — painted on .ltree-container in base.css so the tree shows
+	   a visible background without consumer wrapping. Override to `transparent`
+	   to retain the pre-rc10 "no surface" behavior. */
+	--ltree-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a));
 
 	/* -------------------------------------------------------------------------
 	   TYPOGRAPHY — unitless --base-* multipliers × --ltree-rem
@@ -48,7 +67,7 @@
 	--ltree-node-label-font-weight: var(--base-font-weight-medium, 500);
 	--ltree-node-label-margin-right: calc(0.8 * var(--ltree-rem));
 	--ltree-node-path-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ltree-rem));
-	--ltree-node-path-color: var(--base-text-color-3, #6c757d);
+	--ltree-node-path-color: var(--base-text-color-3, light-dark(#6c757d, #a3a3a3));
 
 	/* -------------------------------------------------------------------------
 	   NODE LAYOUT
@@ -64,7 +83,7 @@
 	   ------------------------------------------------------------------------- */
 	--ltree-toggle-icon-width: calc(2.0 * var(--ltree-rem));
 	--ltree-toggle-icon-size: calc(1.6 * var(--ltree-rem));
-	--ltree-toggle-icon-color: var(--base-text-color-3, #6c757d);
+	--ltree-toggle-icon-color: var(--base-text-color-3, light-dark(#6c757d, #a3a3a3));
 	--ltree-toggle-icon-margin-right: calc(0.8 * var(--ltree-rem));
 	--ltree-toggle-icon-transition: transform 0.2s;
 
@@ -73,9 +92,9 @@
 	   ------------------------------------------------------------------------- */
 	--ltree-checkbox-size: calc(1.5 * var(--ltree-rem));
 	--ltree-checkbox-border-width: 1.5px; /* hairline — does not scale */
-	--ltree-checkbox-border-color: var(--base-border-color, #adb5bd);
+	--ltree-checkbox-border-color: var(--base-border-color, light-dark(#adb5bd, #5a5a5a));
 	--ltree-checkbox-border-radius: calc(var(--base-border-radius-sm, 0.3) * var(--ltree-rem));
-	--ltree-checkbox-bg: var(--base-input-bg, #fff);
+	--ltree-checkbox-bg: var(--base-input-bg, light-dark(#ffffff, #1f1f1f));
 	--ltree-checkbox-checked-bg: var(--ltree-primary);
 	--ltree-checkbox-checked-border-color: var(--ltree-primary);
 	--ltree-checkbox-checkmark-color: var(--base-text-color-on-accent, #fff);
@@ -104,6 +123,7 @@
 	/* Touch drag ghost */
 	--tree-ghost-bg: color-mix(in srgb, var(--ltree-primary) 90%, transparent);
 	--tree-ghost-color: #fff;
+	--tree-ghost-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 
 	/* -------------------------------------------------------------------------
 	   DROP ZONES (before / after / child) — pastel mode
@@ -148,10 +168,14 @@
 	/* -------------------------------------------------------------------------
 	   CONTEXT MENU
 	   ------------------------------------------------------------------------- */
-	--ltree-context-menu-bg: var(--base-dropdown-bg, #fff);
+	/* Dropdown chain: dropdown-bg → elevated-bg → main-bg → light-dark fallback.
+	   Matches base-variables.md "Fallback chains — the four chained variables". */
+	--ltree-context-menu-bg: var(--base-dropdown-bg,
+		var(--base-elevated-bg,
+			var(--base-main-bg, light-dark(#ffffff, #2b2b2b))));
 	--ltree-context-menu-border-color: var(--ltree-border);
 	--ltree-context-menu-border-radius: calc(var(--base-border-radius-sm, 0.4) * var(--ltree-rem));
-	--ltree-context-menu-shadow: var(--base-dropdown-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.1));
+	--ltree-context-menu-shadow: var(--base-dropdown-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.15));
 	--ltree-context-menu-min-width: calc(15 * var(--ltree-rem));
 	--ltree-context-menu-padding: calc(0.4 * var(--ltree-rem)) 0;
 	--ltree-context-menu-item-padding: calc(0.8 * var(--ltree-rem)) calc(1.6 * var(--ltree-rem));
@@ -160,19 +184,21 @@
 	--ltree-context-menu-item-hover-bg: var(--ltree-light);
 	--ltree-context-menu-icon-size: calc(1.6 * var(--ltree-rem));
 	--ltree-context-menu-icon-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ltree-rem));
-	--ltree-context-menu-shortcut-color: var(--base-text-color-4, #9ca3af);
+	--ltree-context-menu-shortcut-color: var(--base-text-color-4, light-dark(#9ca3af, #6b7280));
 	--ltree-context-menu-shortcut-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ltree-rem));
-	--ltree-context-menu-arrow-color: var(--base-text-color-4, #9ca3af);
+	--ltree-context-menu-arrow-color: var(--base-text-color-4, light-dark(#9ca3af, #6b7280));
 	--ltree-context-menu-divider-color: var(--ltree-border);
-	--ltree-context-menu-divider-label-color: var(--base-text-color-4, #9ca3af);
+	--ltree-context-menu-divider-label-color: var(--base-text-color-4, light-dark(#9ca3af, #6b7280));
 
 	/* -------------------------------------------------------------------------
 	   LOADING OVERLAY + SPINNER
 	   ------------------------------------------------------------------------- */
-	--ltree-loading-bg: rgba(255, 255, 255, 0.8);
-	--ltree-loading-color: var(--base-text-color-3, #718096);
+	/* Loading overlay: semi-transparent surface — use main-bg so it composites
+	   correctly against both light and dark page backgrounds. */
+	--ltree-loading-bg: color-mix(in srgb, var(--base-main-bg, light-dark(#ffffff, #1a1a1a)) 80%, transparent);
+	--ltree-loading-color: var(--base-text-color-3, light-dark(#718096, #a3a3a3));
 	--ltree-spinner-size: calc(3.2 * var(--ltree-rem));
-	--ltree-spinner-track: var(--base-border-color, #e2e8f0);
+	--ltree-spinner-track: var(--base-border-color, light-dark(#e2e8f0, #3d3d3d));
 	--ltree-spinner-color: var(--ltree-primary);
 
 	/* -------------------------------------------------------------------------