@spectral_labs/ui 1.6.1 → 1.8.0-next.0

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

@@ -15,7 +15,8 @@
     shouldFilter = true,
     loop = true,
     portalTo,
-    trapFocus = true,
+    mode = 'modal',
+    trapFocus,
     closeOnEscape = true,
     closeOnOutsideClick = true,
     onEscapeKeydown,
@@ -26,10 +27,27 @@
     children,
   }: CommandProps = $props()
 
+  /** A field living in an app bar must stay in the page's natural tab order,
+   *  so `inline` flips the default — an explicit value still wins. */
+  const trapsFocus = $derived(trapFocus ?? mode !== 'inline')
+  /** Inline renders IN PLACE unless a target is given: the consumer's scoped
+   *  CSS then applies, and the results can be anchored to the field. */
+  const portalDisabled = $derived(mode === 'inline' && portalTo === undefined)
+
   const commandState = createCommandState({
     get search() {
       return value
     },
+    get mode() {
+      return mode
+    },
+    get open() {
+      return open
+    },
+    onRequestOpen() {
+      open = true
+      onOpenChange?.(true)
+    },
     get filter() {
       return filter
     },
@@ -83,11 +101,15 @@
     },
   })
 
+  // The two layers follow `open` in BOTH modes — which is exactly what makes a
+  // closed inline palette inert: no `document` listener, and no slot held in
+  // the global Escape / dismiss stacks that a surface below would have to
+  // yield to.
   $effect(() => {
     if (open && isBrowser) {
       escapeLayer.mount()
       dismissLayer.mount()
-      if (trapFocus && contentEl) {
+      if (trapsFocus && contentEl) {
         focusScope.setElement(contentEl)
         focusScope.mount()
       }
@@ -109,12 +131,14 @@
   })
 </script>
 
-{#if presence.isPresent}
-  <Portal to={portalTo}>
+<!-- Inline keeps the Root mounted whatever `open` is: the field is the point. -->
+{#if mode === 'inline' || presence.isPresent}
+  <Portal to={portalTo} disabled={portalDisabled}>
     <div
       bind:this={contentEl}
       class="sp-command {className ?? ''}"
       data-command-root
+      data-mode={mode}
       data-state={open ? 'open' : 'closed'}
     >
       {#if children}{@render children()}{/if}
@@ -132,4 +156,19 @@
     background-color: var(--sp-sys-color-surface-container);
     box-shadow: var(--sp-sys-elevation-3);
   }
+
+  /**
+   * Inline is not a panel: it is a field with results hanging off it. The
+   * panel chrome is dropped so the consumer can dress the field, and
+   * `overflow` is released so results positioned below are not clipped by the
+   * very element that owns them. `position: relative` makes the Root the
+   * containing block, which is what an anchored list needs.
+   */
+  .sp-command[data-mode='inline'] {
+    position: relative;
+    overflow: visible;
+    border-radius: 0;
+    background-color: transparent;
+    box-shadow: none;
+  }
 </style>

package/dist/components/command/components/command-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/command/components/command-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAoI/C,QAAA,MAAM,WAAW,gEAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"command-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/command/components/command-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AA2J/C,QAAA,MAAM,WAAW,gEAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -1,4 +1,5 @@
 export { defaultFilter } from './command.svelte.js';
+export type { CommandMode } from './command.svelte.js';
 export { default as Empty } from './components/command-empty.svelte';
 export { default as Group } from './components/command-group.svelte';
 export { default as Input } from './components/command-input.svelte';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/command/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mCAAmC,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mCAAmC,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mCAAmC,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uCAAuC,CAAA;AAC5E,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,qBAAqB,GACtB,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/command/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mCAAmC,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mCAAmC,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mCAAmC,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uCAAuC,CAAA;AAC5E,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,qBAAqB,GACtB,MAAM,YAAY,CAAA"}

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

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { CommandMode } from './command.svelte.js';
 export interface CommandProps {
     /** Current search query (bindable). */
     value?: string;
@@ -9,13 +10,39 @@ export interface CommandProps {
     shouldFilter?: boolean;
     /** Whether keyboard navigation loops at edges. @default true */
     loop?: boolean;
+    /**
+     * Composition mode.
+     *
+     * - `'modal'` (default, unchanged behaviour): `open` controls whether the
+     *   palette is MOUNTED — closing unmounts the content, the field included,
+     *   together with the Escape and outside-pointer layers.
+     * - `'inline'`: the Root and its `Command.Input` stay mounted whatever `open`
+     *   is, so a search field can live permanently in a bar; `open` then governs
+     *   only whether `Command.List` is RENDERED, and the two layers follow the
+     *   results. A closed inline palette listens to nothing: no document
+     *   listener, no slot held in the global layer stacks.
+     *
+     * @default 'modal'
+     */
+    mode?: CommandMode;
     /**
      * Controls whether the palette is mounted. When true, render content. Default: true.
+     * In `'inline'` mode this controls the RESULTS only — see `mode`.
      */
     open?: boolean;
-    /** Portal target. Default undefined (document.body). */
+    /**
+     * Portal target. Default `document.body` in `'modal'` mode; in `'inline'`
+     * mode the content is rendered IN PLACE by default, so the consumer's scoped
+     * CSS applies and the results can be anchored to the field. Passing a target
+     * portals in either mode.
+     */
     portalTo?: HTMLElement | string;
-    /** Trap focus within the palette. Default: true. */
+    /**
+     * Trap focus within the palette.
+     * @default `true` in `'modal'` mode, `false` in `'inline'` mode — a field
+     * sitting in a bar must stay part of the page's natural tab order. An
+     * explicit value is honoured in both modes.
+     */
     trapFocus?: boolean;
     /** Close on Escape keydown. Default: true. */
     closeOnEscape?: boolean;
@@ -35,10 +62,38 @@ export interface CommandProps {
     class?: string;
     children?: Snippet;
 }
-export interface CommandInputProps {
+/**
+ * Extends the native `input` attributes. A consumer's `title`, `name`,
+ * `aria-label` / `aria-labelledby` / `aria-describedby`, `data-testid`,
+ * `style` and native event handlers reach the real `role="combobox"` node.
+ *
+ * The field's IDENTITY stays with the component: `role`, `id`, `type` and the
+ * three computed relations (`aria-expanded`, `aria-controls`,
+ * `aria-activedescendant`) are rejected by the type — they are derived from
+ * the palette's own state and a consumer value could only contradict it.
+ *
+ * Consumer handlers COMPOSE with the built-in ones: yours runs first, and
+ * calling `preventDefault()` cancels Spectral's local keyboard handling for
+ * that key. It does NOT retract a close already performed by the Escape layer,
+ * which runs earlier, on `document`, in the capture phase — `onEscapeKeydown`
+ * on `Command.Root` is the public hook for that.
+ */
+export interface CommandInputProps extends Omit<HTMLInputAttributes, 'class' | 'children' | 'value' | 'type' | 'role' | 'id' | 'autocomplete' | 'oninput' | 'aria-expanded' | 'aria-controls' | 'aria-activedescendant' | 'aria-autocomplete'> {
     /** Placeholder text for the search input. */
     placeholder?: string;
+    /** Class placed on the `<input>` itself. */
     class?: string;
+    /**
+     * Class placed on the wrapper that holds the icon and the input — the box
+     * that carries the padding and the bottom border. This is the hook for
+     * restyling the field as, say, a pill inside an app bar.
+     */
+    wrapperClass?: string;
+    /**
+     * The real input element, bindable. Lets the consumer focus the field
+     * (a `Cmd/Ctrl+K` shortcut, say) without reaching for an internal selector.
+     */
+    element?: HTMLInputElement | null;
 }
 export interface CommandListProps {
     /** Accessible label for the listbox. */

package/dist/components/command/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/command/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gGAAgG;IAChG,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,CAAA;IACvE,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wDAAwD;IACxD,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,mDAAmD;IACnD,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,mDAAmD;IACnD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAChD,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;IACjD,uFAAuF;IACvF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,UAAU,GAAG,eAAe,GAAG,eAAe,CACtF;IACC,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/command/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spectral_labs/ui",
   "type": "module",
-  "version": "1.6.1",
+  "version": "1.8.0-next.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -13,6 +13,9 @@
     "url": "https://github.com/negativemachine/spectral-ui.git",
     "directory": "packages/spectral-ui"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -30,6 +33,7 @@
   },
   "types": "./dist/index.d.ts",
   "files": [
+    "THIRD_PARTY_NOTICES.md",
     "dist",
     "src/base.css",
     "src/css",
@@ -37,7 +41,9 @@
     "src/fonts.css",
     "src/themes",
     "src/tokens.css",
-    "src/utilities.css"
+    "src/utilities.css",
+    "!dist/**/__tests__",
+    "!src/**/__tests__"
   ],
   "svelte": "./dist/index.js",
   "scripts": {

package/dist/components/__tests__/overlay-scrim-source.test.js

@@ -1,134 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { describe, expect, it } from 'vitest';
-/**
- * spectral-ui#206 — the six covering surfaces paint the OPAQUE scrim token and
- * own the veil's alpha through `opacity` (0.32, via the component's
- * `--sp-comp-*-overlay-opacity` token where one exists). Exactly one owner:
- * the colour is never translucent, the opacity is never missing or wrong.
- *
- * The two values are matched against an ALLOW-LIST, not a deny-list: any other
- * spelling fails, so `#0000004d`, `oklch(0 0 0 / .3)`, `rgb(0 0 0 / 30%)` or a
- * `color-mix()` cannot slip through a list of forbidden prefixes. Declarations
- * are parsed (property, value) instead of substring-matched, because
- * `--sp-comp-dialog-overlay-opacity: 0.32;` literally ends with
- * `opacity: 0.32;` and would otherwise satisfy a naive regex while the real
- * `opacity` declaration says something else.
- *
- * EVERY rule in the file that targets the class is inspected, not just the
- * first one: in a Svelte component a later rule (a duplicate, a `@media`
- * block) lives in the same scoped `<style>` and wins the cascade.
- *
- * Three of these surfaces (SideSheet, NavDrawer, BottomSheet) have no cell in
- * `tests/e2e/scrim-alpha.spec.ts`, so this file is their only control — it has
- * to be exact. The list is literal on purpose: a seventh surface that forgets
- * the idiom has to be added here.
- */
-const here = dirname(fileURLToPath(import.meta.url));
-const SURFACES = [
-    { file: 'dialog/components/dialog-overlay.svelte', selector: '.sp-dialog-overlay' },
-    {
-        file: 'alert-dialog/components/alert-dialog-overlay.svelte',
-        selector: '.sp-alert-dialog-overlay',
-    },
-    { file: 'sheet/components/sheet-overlay.svelte', selector: '.sp-sheet-overlay' },
-    { file: 'side-sheet/side-sheet.svelte', selector: '.sp-side-sheet-overlay' },
-    { file: 'nav-drawer/components/nav-drawer-root.svelte', selector: '.sp-nav-drawer-overlay' },
-    {
-        file: 'bottom-sheet/components/bottom-sheet-root.svelte',
-        selector: '.sp-bottom-sheet-overlay',
-    },
-];
-/** `background-color` values that keep the colour opaque and token-driven. */
-const ALLOWED_BACKGROUND = [
-    /^var\(--sp-sys-color-scrim\)$/,
-    /^var\(--sp-comp-[a-z-]+-overlay-color,\s*var\(--sp-sys-color-scrim\)\)$/,
-];
-/** `opacity` values that make the component the single owner of the alpha. */
-const ALLOWED_OPACITY = [/^0\.32$/, /^var\(--sp-comp-[a-z-]+-overlay-opacity,\s*0\.32\)$/];
-/** The component's scoped stylesheet, so template braces are never parsed. */
-function styleBlock(componentSource, file) {
-    const match = componentSource.match(/<style>(.*)<\/style>/s);
-    if (!match)
-        throw new Error(`${file}: no <style> block`);
-    return match[1];
-}
-/** Every rule in `source` whose selector list mentions `selector`, in order. */
-function rulesTargeting(source, selector) {
-    const rules = [];
-    for (let open = 0; open < source.length; open++) {
-        if (source[open] !== '{')
-            continue;
-        let start = open - 1;
-        while (start >= 0 && !'{};'.includes(source[start]))
-            start--;
-        const selectorList = source.slice(start + 1, open).trim();
-        if (!selectorList.includes(selector))
-            continue;
-        let depth = 1;
-        let close = open + 1;
-        for (; close < source.length && depth > 0; close++) {
-            if (source[close] === '{')
-                depth++;
-            else if (source[close] === '}')
-                depth--;
-        }
-        const declarations = source
-            .slice(open + 1, close - 1)
-            .split(';')
-            .map((chunk) => chunk.trim())
-            .filter((chunk) => chunk.includes(':') && !chunk.includes('{'))
-            .map((chunk) => ({
-            property: chunk.slice(0, chunk.indexOf(':')).trim(),
-            value: chunk.slice(chunk.indexOf(':') + 1).trim(),
-        }));
-        rules.push({ selectorList, declarations });
-    }
-    return rules;
-}
-const valueOf = (rule, property) => rule.declarations.findLast((d) => d.property === property)?.value;
-describe('overlay surfaces own the scrim alpha through opacity (#206)', () => {
-    for (const { file, selector } of SURFACES) {
-        const source = readFileSync(resolve(here, '..', file), 'utf8');
-        const rules = rulesTargeting(styleBlock(source, file), selector);
-        // The veil rule is the one whose selector is the bare class; anything else
-        // (`[data-state='closed']`, a media-query variant) is a variant rule.
-        const veilRules = rules.filter((r) => r.selectorList === selector);
-        const variantRules = rules.filter((r) => r.selectorList !== selector);
-        it(`${selector} is painted by exactly one veil rule`, () => {
-            expect(veilRules).toHaveLength(1);
-        });
-        it(`${selector} paints the opaque scrim token`, () => {
-            const background = valueOf(veilRules[0], 'background-color');
-            expect(background, `${file}: background-color`).toBeDefined();
-            expect(ALLOWED_BACKGROUND.some((allowed) => allowed.test(background)), `${file}: background-color "${background}" is not an opaque token reference`).toBe(true);
-        });
-        it(`${selector} carries the veil's alpha as opacity 0.32`, () => {
-            const opacity = valueOf(veilRules[0], 'opacity');
-            expect(opacity, `${file}: opacity`).toBeDefined();
-            expect(ALLOWED_OPACITY.some((allowed) => allowed.test(opacity)), `${file}: opacity "${opacity}" is not the 0.32 the component owns`).toBe(true);
-        });
-        it(`${selector} declares no local overlay token that would change the veil`, () => {
-            for (const rule of rules) {
-                for (const { property, value } of rule.declarations) {
-                    if (/^--sp-comp-[a-z-]+-overlay-opacity$/.test(property)) {
-                        expect(value, `${file}: ${property}`).toBe('0.32');
-                    }
-                    if (/^--sp-comp-[a-z-]+-overlay-color$/.test(property)) {
-                        expect(value, `${file}: ${property}`).toBe('var(--sp-sys-color-scrim)');
-                    }
-                }
-            }
-        });
-        it(`${selector} variants only fade the veil out, never repaint it`, () => {
-            for (const rule of variantRules) {
-                expect(valueOf(rule, 'background-color'), `${file}: "${rule.selectorList}" repaints the veil`).toBeUndefined();
-                const opacity = valueOf(rule, 'opacity');
-                if (opacity !== undefined) {
-                    expect(opacity, `${file}: "${rule.selectorList}" opacity`).toBe('0');
-                }
-            }
-        });
-    }
-});

package/dist/components/accordion/__tests__/AccordionTest.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import AccordionContent from '../components/accordion-content.svelte'
-  import AccordionItem from '../components/accordion-item.svelte'
-  import AccordionRoot from '../components/accordion-root.svelte'
-  import AccordionTrigger from '../components/accordion-trigger.svelte'
-
-  let {
-    type = 'single',
-    value = $bindable(''),
-    disabled = false,
-  }: {
-    type?: 'single' | 'multiple'
-    value?: string | string[]
-    disabled?: boolean
-  } = $props()
-</script>
-
-<AccordionRoot bind:value {type} {disabled}>
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Trigger 1</AccordionTrigger>
-    <AccordionContent>Content 1</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-2">
-    <AccordionTrigger>Trigger 2</AccordionTrigger>
-    <AccordionContent>Content 2</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-3" disabled={true}>
-    <AccordionTrigger>Trigger 3</AccordionTrigger>
-    <AccordionContent>Content 3</AccordionContent>
-  </AccordionItem>
-</AccordionRoot>

package/dist/components/accordion/__tests__/accordion.test.svelte.js

@@ -1,139 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import AccordionRoot from '../components/accordion-root.svelte';
-import AccordionTest from './AccordionTest.svelte';
-describe('accordion', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(AccordionTest, { target, props });
-        return target;
-    }
-    function setupRoot(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(AccordionRoot, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // --- Basic rendering ---
-    it('renders with data-orientation', () => {
-        setupRoot();
-        expect(target.querySelector('[data-orientation]')).toBeTruthy();
-    });
-    it('renders all accordion items', () => {
-        setup();
-        const items = target.querySelectorAll('.sp-accordion-item');
-        expect(items.length).toBe(3);
-    });
-    it('renders trigger buttons', () => {
-        setup();
-        const triggers = target.querySelectorAll('.sp-accordion-trigger');
-        expect(triggers.length).toBe(3);
-    });
-    // --- ARIA attributes ---
-    it('triggers have aria-expanded="false" when collapsed', () => {
-        setup();
-        const triggers = target.querySelectorAll('.sp-accordion-trigger');
-        triggers.forEach((trigger) => {
-            expect(trigger.getAttribute('aria-expanded')).toBe('false');
-        });
-    });
-    it('trigger has aria-expanded="true" when item is open', () => {
-        setup({ value: 'item-1' });
-        const triggers = target.querySelectorAll('.sp-accordion-trigger');
-        expect(triggers[0]?.getAttribute('aria-expanded')).toBe('true');
-        expect(triggers[1]?.getAttribute('aria-expanded')).toBe('false');
-    });
-    it('item has data-state="open" when expanded', () => {
-        setup({ value: 'item-1' });
-        const items = target.querySelectorAll('.sp-accordion-item');
-        expect(items[0]?.getAttribute('data-state')).toBe('open');
-        expect(items[1]?.getAttribute('data-state')).toBe('closed');
-    });
-    it('content has role="region"', () => {
-        setup({ value: 'item-1' });
-        const content = target.querySelector('.sp-accordion-content');
-        expect(content?.getAttribute('role')).toBe('region');
-    });
-    // --- Single mode behavior ---
-    it('single mode: clicking one item closes the other', () => {
-        setup({ type: 'single', value: 'item-1' });
-        const triggers = target.querySelectorAll('.sp-accordion-trigger');
-        // item-1 is open
-        expect(target.querySelectorAll('.sp-accordion-content').length).toBe(1);
-        // Click item-2
-        triggers[1].click();
-        flushSync();
-        // item-2 should be open, item-1 closed
-        const items = target.querySelectorAll('.sp-accordion-item');
-        expect(items[0]?.getAttribute('data-state')).toBe('closed');
-        expect(items[1]?.getAttribute('data-state')).toBe('open');
-        expect(target.querySelectorAll('.sp-accordion-content').length).toBe(1);
-    });
-    it('single mode: clicking same item toggles it closed', () => {
-        setup({ type: 'single', value: 'item-1' });
-        const trigger = target.querySelector('.sp-accordion-trigger');
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('.sp-accordion-content')).toBeNull();
-    });
-    // --- Multiple mode behavior ---
-    it('multiple mode: clicking items opens multiple', () => {
-        setup({ type: 'multiple', value: ['item-1'] });
-        const triggers = target.querySelectorAll('.sp-accordion-trigger');
-        // item-1 is already open, click item-2
-        triggers[1].click();
-        flushSync();
-        // Both should be open
-        const items = target.querySelectorAll('.sp-accordion-item');
-        expect(items[0]?.getAttribute('data-state')).toBe('open');
-        expect(items[1]?.getAttribute('data-state')).toBe('open');
-        expect(target.querySelectorAll('.sp-accordion-content').length).toBe(2);
-    });
-    // --- Disabled state ---
-    it('disabled item has data-disabled attribute', () => {
-        setup();
-        const items = target.querySelectorAll('.sp-accordion-item');
-        // item-3 is disabled
-        expect(items[2]?.hasAttribute('data-disabled')).toBe(true);
-    });
-    it('disabled item trigger is disabled', () => {
-        setup();
-        const triggers = target.querySelectorAll('.sp-accordion-trigger');
-        expect(triggers[2]?.disabled).toBe(true);
-    });
-    it('clicking disabled trigger does not toggle', () => {
-        setup({ type: 'single' });
-        const triggers = target.querySelectorAll('.sp-accordion-trigger');
-        triggers[2].click();
-        flushSync();
-        // item-3 should still be closed
-        const items = target.querySelectorAll('.sp-accordion-item');
-        expect(items[2]?.getAttribute('data-state')).toBe('closed');
-    });
-    it('root disabled prevents all toggles', () => {
-        setup({ disabled: true });
-        const triggers = target.querySelectorAll('.sp-accordion-trigger');
-        triggers[0].click();
-        flushSync();
-        // Nothing should be open
-        expect(target.querySelector('.sp-accordion-content')).toBeNull();
-    });
-    // --- Content rendering ---
-    it('content is not rendered for collapsed items', () => {
-        setup();
-        expect(target.querySelector('.sp-accordion-content')).toBeNull();
-    });
-    it('content is rendered for expanded item', () => {
-        setup({ value: 'item-1' });
-        const content = target.querySelector('.sp-accordion-content-inner');
-        expect(content?.textContent).toContain('Content 1');
-    });
-});

package/dist/components/alert-dialog/__tests__/AlertDialogTest.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-  import AlertDialogAction from '../components/alert-dialog-action.svelte'
-  import AlertDialogCancel from '../components/alert-dialog-cancel.svelte'
-  import AlertDialogContent from '../components/alert-dialog-content.svelte'
-  import AlertDialogDescription from '../components/alert-dialog-description.svelte'
-  import AlertDialogOverlay from '../components/alert-dialog-overlay.svelte'
-  import AlertDialogRoot from '../components/alert-dialog-root.svelte'
-  import AlertDialogTitle from '../components/alert-dialog-title.svelte'
-  import AlertDialogTrigger from '../components/alert-dialog-trigger.svelte'
-
-  let {
-    open = $bindable(false),
-    portalTo = undefined,
-  }: { open?: boolean; portalTo?: HTMLElement | string } = $props()
-</script>
-
-<AlertDialogRoot bind:open>
-  <AlertDialogTrigger>Delete</AlertDialogTrigger>
-  <AlertDialogOverlay />
-  <AlertDialogContent {portalTo}>
-    <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-    <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
-    <div class="sp-alert-dialog-actions">
-      <AlertDialogCancel>Cancel</AlertDialogCancel>
-      <AlertDialogAction>Confirm</AlertDialogAction>
-    </div>
-  </AlertDialogContent>
-</AlertDialogRoot>

package/dist/components/alert-dialog/__tests__/alert-dialog.a11y.test.js

@@ -1,42 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import { configureAxe } from 'vitest-axe';
-import * as matchers from 'vitest-axe/matchers';
-import AlertDialogTest from './AlertDialogTest.svelte';
-expect.extend(matchers);
-const axe = configureAxe({
-    rules: {
-        region: { enabled: false },
-        'page-has-heading-one': { enabled: false },
-        'landmark-one-main': { enabled: false },
-    },
-});
-describe('alert-dialog a11y', () => {
-    let cleanup;
-    afterEach(() => cleanup?.());
-    it('has no axe violations when closed', async () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        const instance = mount(AlertDialogTest, { target: container });
-        const results = await axe(container);
-        cleanup = () => {
-            unmount(instance);
-            container.remove();
-        };
-        expect(results).toHaveNoViolations();
-    });
-    it('has no axe violations when open', async () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        const instance = mount(AlertDialogTest, {
-            target: container,
-            props: { open: true },
-        });
-        const results = await axe(container);
-        cleanup = () => {
-            unmount(instance);
-            container.remove();
-        };
-        expect(results).toHaveNoViolations();
-    });
-});