@spectral_labs/ui 1.1.2 → 1.2.1

package/dist/components/toolbar/__tests__/ToolbarTabstopTest.svelte

@@ -1,10 +1,10 @@
-<script lang='ts'>
+<script lang="ts">
   import Toolbar from '../toolbar.svelte'
 </script>
 
-<Toolbar aria-label='Tabstop test'>
-  <button type='button' data-testid='first'>First</button>
+<Toolbar aria-label="Tabstop test">
+  <button type="button" data-testid="first">First</button>
   <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-  <div tabindex='0' data-testid='container'>Container</div>
-  <button type='button' data-testid='second'>Second</button>
+  <div tabindex="0" data-testid="container">Container</div>
+  <button type="button" data-testid="second">Second</button>
 </Toolbar>

package/dist/components/toolbar/toolbar-group.svelte

@@ -1,22 +1,17 @@
-<script lang='ts'>
+<script lang="ts">
   import type { ToolbarGroupProps } from './types.js'
   import { getToolbarContext } from './toolbar.svelte.js'
 
   const ctx = getToolbarContext()
 
-  const {
-    orientation,
-    class: className,
-    children,
-    ...restProps
-  }: ToolbarGroupProps = $props()
+  const { orientation, class: className, children, ...restProps }: ToolbarGroupProps = $props()
 
   const resolvedOrientation = $derived(orientation ?? ctx?.orientation ?? 'horizontal')
 </script>
 
 <div
   class="sp-toolbar-group {className ?? ''}"
-  role='group'
+  role="group"
   data-orientation={resolvedOrientation}
   {...restProps}
 >

package/dist/components/toolbar/toolbar-group.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-group.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toolbar/toolbar-group.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AA2BnD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"toolbar-group.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toolbar/toolbar-group.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAsBnD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/toolbar/toolbar-separator.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { ToolbarSeparatorProps } from './types.js'
   import { getToolbarContext } from './toolbar.svelte.js'
 
@@ -12,8 +12,7 @@
   }: ToolbarSeparatorProps = $props()
 
   const resolvedOrientation = $derived.by(() => {
-    if (orientation)
-      return orientation
+    if (orientation) return orientation
     return ctx?.orientation === 'vertical' ? 'horizontal' : 'vertical'
   })
 </script>

package/dist/components/toolbar/toolbar-separator.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-separator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toolbar/toolbar-separator.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA;AA6BvD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"toolbar-separator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toolbar/toolbar-separator.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA;AA4BvD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/toolbar/toolbar.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { ToolbarProps } from './types.js'
   import { getDirectionalKeys, kbd } from '../../internal/helpers/index.js'
   import { setToolbarContext } from './toolbar.svelte.js'
@@ -25,52 +25,46 @@
   ].join(', ')
 
   setToolbarContext({
-    get orientation() { return orientation },
+    get orientation() {
+      return orientation
+    },
   })
 
   function onkeydown(event: KeyboardEvent) {
     const { nextKey, prevKey } = getDirectionalKeys('ltr', orientation)
     if (
-      event.key !== nextKey
-      && event.key !== prevKey
-      && event.key !== kbd.HOME
-      && event.key !== kbd.END
+      event.key !== nextKey &&
+      event.key !== prevKey &&
+      event.key !== kbd.HOME &&
+      event.key !== kbd.END
     ) {
       return
     }
 
     const toolbar = event.currentTarget as HTMLElement
     const items = Array.from(toolbar.querySelectorAll<HTMLElement>(itemSelector))
-    if (items.length === 0)
-      return
+    if (items.length === 0) return
 
     const target = event.target as HTMLElement | null
     const current = target?.closest<HTMLElement>(itemSelector)
-    if (!current)
-      return
+    if (!current) return
 
     const idx = items.indexOf(current)
-    if (idx === -1)
-      return
+    if (idx === -1) return
 
     event.preventDefault()
 
     let next: number
     if (event.key === kbd.HOME) {
       next = 0
-    }
-    else if (event.key === kbd.END) {
+    } else if (event.key === kbd.END) {
       next = items.length - 1
-    }
-    else if (event.key === nextKey) {
+    } else if (event.key === nextKey) {
       next = idx + 1
-      if (next >= items.length)
-        next = loop ? 0 : items.length - 1
-    }
-    else {
+      if (next >= items.length) next = loop ? 0 : items.length - 1
+    } else {
       next = idx - 1
-      if (next < 0)
-        next = loop ? items.length - 1 : 0
+      if (next < 0) next = loop ? items.length - 1 : 0
     }
 
     items[next]?.focus()
@@ -79,7 +73,7 @@
 
 <div
   class="sp-toolbar {className ?? ''}"
-  role='toolbar'
+  role="toolbar"
   aria-orientation={orientation}
   tabindex={0}
   data-orientation={orientation}

package/dist/components/toolbar/toolbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toolbar/toolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AA2F9C,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"toolbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toolbar/toolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAqF9C,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/tooltip/__tests__/TooltipTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import TooltipContent from '../components/tooltip-content.svelte'
   import TooltipRoot from '../components/tooltip-root.svelte'
   import TooltipTrigger from '../components/tooltip-trigger.svelte'

package/dist/components/tooltip/components/tooltip-content.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TooltipContentProps } from '../types.js'
   import { DismissibleLayerState } from '../../../internal/dismissible-layer/index.js'
   import { EscapeLayerState } from '../../../internal/escape-layer/index.js'
@@ -22,14 +22,15 @@
   let contentEl: HTMLElement | undefined = $state()
 
   const presence = new PresenceLayerState({
-    get present() { return ctx.open },
+    get present() {
+      return ctx.open
+    },
   })
 
   const escapeLayer = new EscapeLayerState({
     enabled: true,
     onEscapeKeydown(event) {
-      if (!event.defaultPrevented)
-        ctx.hide()
+      if (!event.defaultPrevented) ctx.hide()
     },
   })
 
@@ -37,19 +38,23 @@
     enabled: true,
     element: null,
     onInteractOutside(event) {
-      if (!closeOnOutsideClick)
-        return
-      if (!event.defaultPrevented)
-        ctx.hide()
+      if (!closeOnOutsideClick) return
+      if (!event.defaultPrevented) ctx.hide()
     },
   })
 
   const floating = new FloatingLayerState({
     reference: null,
     floating: null,
-    get side() { return side },
-    get sideOffset() { return sideOffset },
-    get align() { return align },
+    get side() {
+      return side
+    },
+    get sideOffset() {
+      return sideOffset
+    },
+    get align() {
+      return align
+    },
     avoidCollisions: true,
   })
 
@@ -58,8 +63,7 @@
       floating.setElements(ctx.triggerEl, contentEl)
       floating.startAutoUpdate()
       escapeLayer.mount()
-      if (closeOnOutsideClick)
-        dismissLayer.mount()
+      if (closeOnOutsideClick) dismissLayer.mount()
     }
 
     return () => {
@@ -85,7 +89,7 @@
       bind:this={contentEl}
       class="sp-tooltip-content {className ?? ''}"
       id={ctx.contentId}
-      role='tooltip'
+      role="tooltip"
       data-state={ctx.open ? 'open' : 'closed'}
       data-side={side}
       onmouseenter={() => ctx.show()}
@@ -110,7 +114,8 @@
     white-space: nowrap;
     pointer-events: auto;
     box-shadow: var(--sp-sys-elevation-2);
-    transition: opacity var(--sp-sys-motion-duration-short3, 150ms) var(--sp-sys-motion-easing-effects, ease);
+    transition: opacity var(--sp-sys-motion-duration-short3, 150ms)
+      var(--sp-sys-motion-easing-effects, ease);
   }
 
   .sp-tooltip-content[data-state='closed'] {

package/dist/components/tooltip/components/tooltip-content.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tooltip/components/tooltip-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAsGtD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"tooltip-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tooltip/components/tooltip-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AA0GtD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/tooltip/components/tooltip-provider.svelte

@@ -1,11 +1,16 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TooltipProviderProps } from '../types.js'
-  import { createTooltipProviderState, setTooltipProviderContext } from '../tooltip-provider.svelte.js'
+  import {
+    createTooltipProviderState,
+    setTooltipProviderContext,
+  } from '../tooltip-provider.svelte.js'
 
   const props: TooltipProviderProps = $props()
 
   const providerState = createTooltipProviderState({
-    get skipDelayDuration() { return props.skipDelayDuration ?? 300 },
+    get skipDelayDuration() {
+      return props.skipDelayDuration ?? 300
+    },
   })
   setTooltipProviderContext(providerState)
 </script>

package/dist/components/tooltip/components/tooltip-provider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-provider.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tooltip/components/tooltip-provider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAmBvD,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"tooltip-provider.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tooltip/components/tooltip-provider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAwBvD,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/tooltip/components/tooltip-root.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TooltipProps } from '../types.js'
   import { getTooltipProviderContext } from '../tooltip-provider.svelte.js'
   import { createTooltipIds, setTooltipContext } from '../tooltip.svelte.js'

package/dist/components/tooltip/components/tooltip-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TooltipTriggerProps } from '../types.js'
   import { GraceAreaState } from '../../../internal/grace-area/index.js'
   import { isBrowser } from '../../../internal/helpers/index.js'
@@ -10,9 +10,15 @@
   let el: HTMLElement | undefined = $state()
 
   const graceArea = new GraceAreaState({
-    get triggerElement() { return el ?? null },
-    get contentElement() { return ctx.contentEl },
-    get enabled() { return ctx.open },
+    get triggerElement() {
+      return el ?? null
+    },
+    get contentElement() {
+      return ctx.contentEl
+    },
+    get enabled() {
+      return ctx.open
+    },
   })
 
   let graceAreaListener: (() => void) | null = null
@@ -26,8 +32,7 @@
       cleanupGraceListener()
       const handler = (e: MouseEvent) => {
         const point = { x: e.clientX, y: e.clientY }
-        if (graceArea.isPointInGraceArea(point))
-          return
+        if (graceArea.isPointInGraceArea(point)) return
         // Pointer left the grace area without reaching content — close
         cleanupGraceListener()
         ctx.hide()
@@ -42,8 +47,7 @@
           ctx.hide()
         }
       }, 500)
-    }
-    else {
+    } else {
       ctx.hide()
     }
   }
@@ -57,21 +61,19 @@
   }
 
   $effect(() => {
-    if (el)
-      ctx.setTriggerEl(el)
+    if (el) ctx.setTriggerEl(el)
   })
 
   // Clean up grace listener when tooltip closes
   $effect(() => {
-    if (!ctx.open)
-      cleanupGraceListener()
+    if (!ctx.open) cleanupGraceListener()
   })
 </script>
 
 <span
   bind:this={el}
   class="sp-tooltip-trigger {className ?? ''}"
-  role='presentation'
+  role="presentation"
   aria-describedby={ctx.open ? ctx.contentId : undefined}
   onmouseenter={() => {
     cleanupGraceListener()

package/dist/components/tooltip/components/tooltip-trigger.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tooltip/components/tooltip-trigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAoFtD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"tooltip-trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tooltip/components/tooltip-trigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAsFtD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/tooltip/index.d.ts

@@ -2,5 +2,5 @@ export { default as Content } from './components/tooltip-content.svelte';
 export { default as Provider } from './components/tooltip-provider.svelte';
 export { default as Root } from './components/tooltip-root.svelte';
 export { default as Trigger } from './components/tooltip-trigger.svelte';
-export type { TooltipContentProps, TooltipProps, TooltipProviderProps, TooltipTriggerProps } from './types.js';
+export type { TooltipContentProps, TooltipProps, TooltipProviderProps, TooltipTriggerProps, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAA;AACxE,YAAY,EAAE,mBAAmB,EAAE,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAA;AACxE,YAAY,EACV,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,YAAY,CAAA"}

package/dist/components/tooltip/tooltip-provider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-provider.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tooltip/tooltip-provider.svelte.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,MAAM,WAAW,oBAAoB;IACnC,oEAAoE;IACpE,aAAa,EAAE,OAAO,CAAA;IACtB,sDAAsD;IACtD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,sDAAsD;IACtD,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,wBAAgB,0BAA0B,CAAC,MAAM,GAAE,qBAA0B,GAAG,oBAAoB,CA6BnG;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAE3E;AAED,wBAAgB,yBAAyB,IAAI,oBAAoB,GAAG,SAAS,CAO5E"}
+{"version":3,"file":"tooltip-provider.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tooltip/tooltip-provider.svelte.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,MAAM,WAAW,oBAAoB;IACnC,oEAAoE;IACpE,aAAa,EAAE,OAAO,CAAA;IACtB,sDAAsD;IACtD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,sDAAsD;IACtD,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,wBAAgB,0BAA0B,CACxC,MAAM,GAAE,qBAA0B,GACjC,oBAAoB,CA4BtB;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAE3E;AAED,wBAAgB,yBAAyB,IAAI,oBAAoB,GAAG,SAAS,CAM5E"}

package/dist/components/tree/__tests__/TreeLabelContentTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import * as Tree from '../index.js'
 </script>
 
@@ -8,14 +8,14 @@
   built-in plain-text label, so the test can assert that the snippet
   output reaches the DOM exactly where the `label` string used to.
 -->
-<Tree.Root selectionMode='single' aria-label='Label-content tree'>
-  <Tree.Item id='lib' hasChildren textValue='My Library'>
+<Tree.Root selectionMode="single" aria-label="Label-content tree">
+  <Tree.Item id="lib" hasChildren textValue="My Library">
     {#snippet labelContent()}
-      <svg data-testid='lib-icon' aria-hidden='true' width='16' height='16' viewBox='0 0 24 24'>
-        <path d='M3 21h18M5 21V7l7-4 7 4v14' />
+      <svg data-testid="lib-icon" aria-hidden="true" width="16" height="16" viewBox="0 0 24 24">
+        <path d="M3 21h18M5 21V7l7-4 7 4v14" />
       </svg>
-      <span data-testid='lib-label'>My Library</span>
+      <span data-testid="lib-label">My Library</span>
     {/snippet}
-    <Tree.Item id='col-1' label='Design' />
+    <Tree.Item id="col-1" label="Design" />
   </Tree.Item>
 </Tree.Root>

package/dist/components/tree/__tests__/TreeTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import * as Tree from '../index.js'
 
   let {
@@ -14,11 +14,11 @@
   } = $props()
 </script>
 
-<Tree.Root bind:selectedKeys bind:expandedKeys {selectionMode} {disabled} aria-label='Test tree'>
-  <Tree.Item id='root-a' label='Folder A' hasChildren={true}>
-    <Tree.Item id='root-a-1' label='Item A1' />
-    <Tree.Item id='root-a-2' label='Item A2' />
+<Tree.Root bind:selectedKeys bind:expandedKeys {selectionMode} {disabled} aria-label="Test tree">
+  <Tree.Item id="root-a" label="Folder A" hasChildren={true}>
+    <Tree.Item id="root-a-1" label="Item A1" />
+    <Tree.Item id="root-a-2" label="Item A2" />
   </Tree.Item>
-  <Tree.Item id='root-b' label='Item B' />
-  <Tree.Item id='root-c' label='Item C (disabled)' disabled={true} />
+  <Tree.Item id="root-b" label="Item B" />
+  <Tree.Item id="root-c" label="Item C (disabled)" disabled={true} />
 </Tree.Root>

package/dist/components/tree/components/tree-item.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TreeItemProps } from '../types.js'
   import { getTreeContext } from '../tree.svelte.js'
 
@@ -20,8 +20,7 @@
 
   // Find parent tree item id from DOM
   $effect(() => {
-    if (!itemEl)
-      return
+    if (!itemEl) return
     const parentItem = itemEl.parentElement?.closest<HTMLElement>('[data-tree-item]')
     const parentId = parentItem?.dataset.treeItem
     ctx.registerItem(id, itemEl, parentId, hasChildren)
@@ -34,22 +33,19 @@
   const isDisabled = $derived(disabled || ctx.disabled)
 
   function onClick(e: MouseEvent) {
-    if (isDisabled)
-      return
+    if (isDisabled) return
     e.stopPropagation()
     ctx.toggleSelection(id, e.shiftKey, e.ctrlKey || e.metaKey)
   }
 
   function onKeyDown(e: KeyboardEvent) {
-    if (isDisabled)
-      return
+    if (isDisabled) return
     ctx.handleItemKeydown(id, e)
   }
 
   function onChevronClick(e: MouseEvent) {
     e.stopPropagation()
-    if (isDisabled)
-      return
+    if (isDisabled) return
     ctx.toggleExpanded(id)
   }
 </script>
@@ -57,7 +53,7 @@
 <div
   bind:this={itemEl}
   class="sp-tree-item {className ?? ''}"
-  role='treeitem'
+  role="treeitem"
   aria-expanded={hasChildren ? isExpanded : undefined}
   aria-selected={isSelected || undefined}
   aria-disabled={isDisabled || undefined}
@@ -67,37 +63,37 @@
   data-expanded={isExpanded || undefined}
   data-disabled={isDisabled || undefined}
   data-has-children={hasChildren || undefined}
-  style='--tree-item-level: {level};'
+  style="--tree-item-level: {level};"
   tabindex={isDisabled ? -1 : 0}
   onclick={onClick}
   onkeydown={onKeyDown}
 >
-  <div class='sp-tree-item-row'>
+  <div class="sp-tree-item-row">
     {#if hasChildren}
       <button
-        type='button'
-        class='sp-tree-item-chevron'
+        type="button"
+        class="sp-tree-item-chevron"
         class:expanded={isExpanded}
         tabindex={-1}
-        aria-hidden='true'
+        aria-hidden="true"
         onclick={onChevronClick}
       >
         <svg
-          viewBox='0 0 24 24'
-          fill='none'
-          stroke='currentColor'
-          stroke-width='2'
-          stroke-linecap='round'
-          stroke-linejoin='round'
-          aria-hidden='true'
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
         >
-          <polyline points='9 18 15 12 9 6'></polyline>
+          <polyline points="9 18 15 12 9 6"></polyline>
         </svg>
       </button>
     {:else}
-      <span class='sp-tree-item-spacer'></span>
+      <span class="sp-tree-item-spacer"></span>
     {/if}
-    <span class='sp-tree-item-content'>
+    <span class="sp-tree-item-content">
       {#if labelContent}
         {@render labelContent()}
       {:else}
@@ -106,7 +102,7 @@
     </span>
   </div>
   {#if hasChildren && isExpanded}
-    <div class='sp-tree-item-children' role='group'>
+    <div class="sp-tree-item-children" role="group">
       {#if children}{@render children()}{/if}
     </div>
   {/if}
@@ -140,16 +136,24 @@
     );
   }
 
+  /*
+   * Selected row colours. Themes may override
+   * `--sp-comp-tree-item-selected-{bg,fg}` to ship a WCAG AA-compliant
+   * combination — `carbon` dark does, because the default
+   * `--sp-sys-color-primary` / `--sp-sys-color-on-primary` pair fails
+   * 4.5:1 in that theme (#fff on #5c7cfa ≈ 3.67:1). Other themes keep
+   * the previous default via the var() fallback chain.
+   */
   .sp-tree-item[data-selected] > .sp-tree-item-row {
-    background: var(--sp-sys-color-primary);
-    color: var(--sp-sys-color-on-primary);
+    background: var(--sp-comp-tree-item-selected-bg, var(--sp-sys-color-primary));
+    color: var(--sp-comp-tree-item-selected-fg, var(--sp-sys-color-on-primary));
   }
 
   .sp-tree-item[data-selected] > .sp-tree-item-row:hover {
     background: color-mix(
       in oklch,
-      var(--sp-sys-color-primary) 90%,
-      var(--sp-sys-color-on-primary)
+      var(--sp-comp-tree-item-selected-bg, var(--sp-sys-color-primary)) 90%,
+      var(--sp-comp-tree-item-selected-fg, var(--sp-sys-color-on-primary))
     );
   }
 

package/dist/components/tree/components/tree-item.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tree/components/tree-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAyFhD,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"tree-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tree/components/tree-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAqFhD,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/tree/components/tree-root.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TreeProps } from '../types.js'
   import { createTree, setTreeContext } from '../tree.svelte.js'
 
@@ -46,7 +46,7 @@
 
 <div
   class="sp-tree {className ?? ''}"
-  role='tree'
+  role="tree"
   aria-label={ariaLabel}
   aria-multiselectable={selectionMode === 'multiple' || undefined}
   data-disabled={disabled || undefined}

package/dist/components/tree/tree.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tree/tree.svelte.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,MAAM,WAAW,WAAW;IAC1B,sBAAsB;IACtB,aAAa,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC7C,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAA;IACjB,sBAAsB;IACtB,SAAS,EAAE,KAAK,GAAG,KAAK,CAAA;IACxB,mCAAmC;IACnC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC,yCAAyC;IACzC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,mCAAmC;IACnC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC,mCAAmC;IACnC,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5E,gDAAgD;IAChD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAClG,0BAA0B;IAC1B,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,8CAA8C;IAC9C,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC7D,wCAAwC;IACxC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAA;CACjC;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,CAErD;AAED,wBAAgB,cAAc,IAAI,WAAW,CAE5C;AAID,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC7C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IAC/C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IAC9C,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,KAAK,GAAG,KAAK,CAAA;CACzB;AAQD,wBAAgB,UAAU,CAAC,IAAI,EAAE,iBAAiB;;EAqNjD"}
+{"version":3,"file":"tree.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tree/tree.svelte.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,MAAM,WAAW,WAAW;IAC1B,sBAAsB;IACtB,aAAa,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC7C,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAA;IACjB,sBAAsB;IACtB,SAAS,EAAE,KAAK,GAAG,KAAK,CAAA;IACxB,mCAAmC;IACnC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC,yCAAyC;IACzC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,mCAAmC;IACnC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC,mCAAmC;IACnC,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5E,gDAAgD;IAChD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAClG,0BAA0B;IAC1B,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,8CAA8C;IAC9C,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC7D,wCAAwC;IACxC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAA;CACjC;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,CAErD;AAED,wBAAgB,cAAc,IAAI,WAAW,CAE5C;AAID,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC7C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IAC/C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IAC9C,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,KAAK,GAAG,KAAK,CAAA;CACzB;AAQD,wBAAgB,UAAU,CAAC,IAAI,EAAE,iBAAiB;;EAsMjD"}

package/dist/components/tree/types.d.ts

@@ -6,24 +6,24 @@ export interface TreeNode {
 }
 export interface TreeProps<_T extends TreeNode = TreeNode> {
     /** Selection mode. */
-    'selectionMode'?: 'none' | 'single' | 'multiple';
+    selectionMode?: 'none' | 'single' | 'multiple';
     /** Currently selected keys. Bindable. */
-    'selectedKeys'?: Set<string>;
+    selectedKeys?: Set<string>;
     /** Currently expanded keys. Bindable. */
-    'expandedKeys'?: Set<string>;
+    expandedKeys?: Set<string>;
     /** Called when selection changes. */
-    'onSelectionChange'?: (keys: Set<string>) => void;
+    onSelectionChange?: (keys: Set<string>) => void;
     /** Called when expanded keys change. */
-    'onExpandedChange'?: (keys: Set<string>) => void;
+    onExpandedChange?: (keys: Set<string>) => void;
     /** Disabled state. */
-    'disabled'?: boolean;
+    disabled?: boolean;
     /** Text direction. */
-    'direction'?: 'ltr' | 'rtl';
+    direction?: 'ltr' | 'rtl';
     /** Accessible label. */
     'aria-label'?: string;
     /** Additional CSS class. */
-    'class'?: string;
-    'children'?: Snippet;
+    class?: string;
+    children?: Snippet;
 }
 export interface TreeItemProps {
     /** Unique item id. */