@happyvertical/smrt-ui 0.38.26 → 0.39.0

package/dist/components/ui/Disclosure.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Disclosure.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Disclosure.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoCD,QAAA,MAAM,UAAU,+CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/ui/Dropdown.svelte

@@ -1,7 +1,3 @@
-<script module lang="ts">
-let menuIdCounter = 0;
-</script>
-
 <script lang="ts">
 /**
  * Dropdown / Menu — a trigger button and a positioned menu list.
@@ -12,8 +8,9 @@ let menuIdCounter = 0;
  * Space to activate, Escape to close + refocus the trigger, and click-outside to
  * dismiss. CSS-anchored via `placement` — no JS positioning dependency.
  */
-import { tick } from 'svelte';
+
 import type { Snippet } from 'svelte';
+import { tick } from 'svelte';
 import type { DropdownPlacement, MenuItem } from '../../types-generic';
 
 export interface Props {
@@ -40,7 +37,8 @@ const {
   disabled = false,
 }: Props = $props();
 
-const menuId = `smrt-menu-${(menuIdCounter += 1)}`;
+const instanceId = $props.id();
+const menuId = `smrt-menu-${instanceId}`;
 let open = $state(false);
 let wrapEl = $state<HTMLElement | null>(null);
 let triggerEl = $state<HTMLButtonElement | null>(null);
@@ -84,7 +82,7 @@ function onTriggerKeydown(event: KeyboardEvent) {
 function focusByOffset(offset: number) {
   const order = enabledIndexes;
   if (order.length === 0) return;
-  const current = itemEls.findIndex((el) => el === document.activeElement);
+  const current = itemEls.indexOf(document.activeElement as HTMLButtonElement);
   const pos = order.indexOf(current);
   const next = order[(pos + offset + order.length) % order.length];
   itemEls[next]?.focus();

package/dist/components/ui/Dropdown.svelte.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Dropdown / Menu — a trigger button and a positioned menu list.
+ *
+ * Implements the WAI-ARIA menu-button pattern: trigger has
+ * `aria-haspopup="menu"` + `aria-expanded`; the list is `role="menu"` with
+ * `role="menuitem"` buttons under roving focus (ArrowUp/Down/Home/End), Enter/
+ * Space to activate, Escape to close + refocus the trigger, and click-outside to
+ * dismiss. CSS-anchored via `placement` — no JS positioning dependency.
+ */
 import type { Snippet } from 'svelte';
 import type { DropdownPlacement, MenuItem } from '../../types-generic';
 export interface Props {

package/dist/components/ui/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Dropdown.svelte.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGvE,MAAM,WAAW,KAAK;IACpB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgID,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Dropdown.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGvE,MAAM,WAAW,KAAK;IACpB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgID,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/ui/Popover.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+import { type Snippet, tick } from 'svelte';
+
+export interface Props {
+  label: string;
+  trigger?: Snippet;
+  children?: Snippet;
+  open?: boolean;
+  disabled?: boolean;
+  placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+  closeOnOutsideClick?: boolean;
+  onopenchange?: (open: boolean) => void;
+  class?: string;
+}
+
+let {
+  label,
+  trigger,
+  children,
+  open = $bindable(false),
+  disabled = false,
+  placement = 'bottom-start',
+  closeOnOutsideClick = true,
+  onopenchange,
+  class: className = '',
+}: Props = $props();
+
+const instanceId = $props.id();
+const panelId = `popover-${instanceId}`;
+let rootEl = $state<HTMLSpanElement | null>(null);
+let triggerEl = $state<HTMLButtonElement | null>(null);
+let panelEl = $state<HTMLDivElement | null>(null);
+
+async function setOpen(next: boolean, focusPanel = false) {
+  if (disabled) return;
+  open = next;
+  onopenchange?.(next);
+  if (next && focusPanel) {
+    await tick();
+    panelEl?.focus();
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && open) {
+    event.preventDefault();
+    setOpen(false);
+    triggerEl?.focus();
+  }
+}
+
+$effect(() => {
+  if (!open || !closeOnOutsideClick) return;
+  const handlePointerDown = (event: PointerEvent) => {
+    if (rootEl && !rootEl.contains(event.target as Node)) setOpen(false);
+  };
+  document.addEventListener('pointerdown', handlePointerDown, true);
+  return () =>
+    document.removeEventListener('pointerdown', handlePointerDown, true);
+});
+</script>
+
+<span bind:this={rootEl} class="popover {className}">
+  <button
+    bind:this={triggerEl}
+    type="button"
+    class="popover__trigger"
+    aria-haspopup="dialog"
+    aria-expanded={open}
+    aria-controls={open ? panelId : undefined}
+    {disabled}
+    onclick={() => setOpen(!open, !open)}
+    onkeydown={handleKeydown}
+  >
+    {#if trigger}{@render trigger()}{:else}{label}{/if}
+  </button>
+  {#if open}
+    <div
+      bind:this={panelEl}
+      id={panelId}
+      class="popover__panel popover__panel--{placement}"
+      role="dialog"
+      aria-label={label}
+      tabindex="-1"
+      onkeydown={handleKeydown}
+    >
+      {#if children}{@render children()}{/if}
+    </div>
+  {/if}
+</span>
+
+<style>
+  .popover { position: relative; display: inline-flex; }
+  .popover__trigger { appearance: none; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); font: inherit; cursor: pointer; }
+  .popover__trigger:focus-visible, .popover__panel:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .popover__trigger:disabled { opacity: .5; cursor: not-allowed; }
+  .popover__panel { position: absolute; z-index: var(--smrt-z-index-popover, 1000); min-width: 16rem; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-large); background: var(--smrt-color-surface-container); color: var(--smrt-color-on-surface); box-shadow: var(--smrt-elevation-3); }
+  .popover__panel--bottom-start { top: calc(100% + var(--smrt-spacing-1)); left: 0; }
+  .popover__panel--bottom-end { top: calc(100% + var(--smrt-spacing-1)); right: 0; }
+  .popover__panel--top-start { bottom: calc(100% + var(--smrt-spacing-1)); left: 0; }
+  .popover__panel--top-end { right: 0; bottom: calc(100% + var(--smrt-spacing-1)); }
+</style>

package/dist/components/ui/Popover.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type Snippet } from 'svelte';
+export interface Props {
+    label: string;
+    trigger?: Snippet;
+    children?: Snippet;
+    open?: boolean;
+    disabled?: boolean;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    closeOnOutsideClick?: boolean;
+    onopenchange?: (open: boolean) => void;
+    class?: string;
+}
+declare const Popover: import("svelte").Component<Props, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;
+//# sourceMappingURL=Popover.svelte.d.ts.map

package/dist/components/ui/Popover.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Popover.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,OAAO,EAAQ,MAAM,QAAQ,CAAC;AAG5C,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmED,QAAA,MAAM,OAAO,+CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/ui/__tests__/interaction-primitives.fixture.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+import Accordion from '../Accordion.svelte';
+import AccordionItem from '../AccordionItem.svelte';
+import Disclosure from '../Disclosure.svelte';
+import Popover from '../Popover.svelte';
+</script>
+
+<Popover label="Filters"><p>Filter controls</p></Popover>
+<Disclosure title="Details"><p>Disclosure details</p></Disclosure>
+<Accordion>
+  <AccordionItem value="one" title="First section"><p>First content</p></AccordionItem>
+  <AccordionItem value="two" title="Second section"><p>Second content</p></AccordionItem>
+</Accordion>

package/dist/components/ui/__tests__/interaction-primitives.fixture.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const InteractionPrimitives: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InteractionPrimitives = InstanceType<typeof InteractionPrimitives>;
+export default InteractionPrimitives;
+//# sourceMappingURL=interaction-primitives.fixture.svelte.d.ts.map

package/dist/components/ui/__tests__/interaction-primitives.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interaction-primitives.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/__tests__/interaction-primitives.fixture.svelte.ts"],"names":[],"mappings":"AAwBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,qBAAqB;;kBAA+E,CAAC;AACzF,KAAK,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC1E,eAAe,qBAAqB,CAAC"}

package/dist/components/ui/__tests__/interaction-primitives.test.js

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Fixture from './interaction-primitives.fixture.svelte';
+describe('interaction primitives', () => {
+    it('opens and dismisses a popover', async () => {
+        render(Fixture);
+        const trigger = screen.getByRole('button', { name: 'Filters' });
+        await userEvent.click(trigger);
+        expect(screen.getByRole('dialog', { name: 'Filters' })).toBeInTheDocument();
+        await userEvent.keyboard('{Escape}');
+        expect(screen.queryByRole('dialog', { name: 'Filters' })).not.toBeInTheDocument();
+        expect(trigger).toHaveFocus();
+    });
+    it('supports disclosure and single-value accordion semantics', async () => {
+        render(Fixture);
+        await userEvent.click(screen.getByText('Details'));
+        expect(screen.getByText('Disclosure details')).toBeVisible();
+        await userEvent.click(screen.getByRole('button', { name: 'First section' }));
+        expect(screen.getByRole('region', { name: 'First section' })).toHaveTextContent('First content');
+        await userEvent.click(screen.getByRole('button', { name: 'Second section' }));
+        expect(screen.queryByText('First content')).not.toBeInTheDocument();
+    });
+    it('is axe-clean with interactive content open', async () => {
+        const { container } = render(Fixture);
+        await userEvent.click(screen.getByRole('button', { name: 'Filters' }));
+        await userEvent.click(screen.getByRole('button', { name: 'First section' }));
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/ui/accordion-context.d.ts

@@ -0,0 +1,7 @@
+export interface AccordionContext {
+    isOpen(value: string): boolean;
+    toggle(value: string): void;
+}
+export declare function setAccordionContext(context: AccordionContext): void;
+export declare function getAccordionContext(): AccordionContext;
+//# sourceMappingURL=accordion-context.d.ts.map

package/dist/components/ui/accordion-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-context.d.ts","sourceRoot":"","sources":["../../../src/components/ui/accordion-context.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAEnE;AAED,wBAAgB,mBAAmB,IAAI,gBAAgB,CAKtD"}

package/dist/components/ui/accordion-context.js

@@ -0,0 +1,11 @@
+import { getContext, setContext } from 'svelte';
+const ACCORDION_CONTEXT = Symbol('smrt-accordion');
+export function setAccordionContext(context) {
+    setContext(ACCORDION_CONTEXT, context);
+}
+export function getAccordionContext() {
+    const context = getContext(ACCORDION_CONTEXT);
+    if (!context)
+        throw new Error('AccordionItem must be nested inside Accordion');
+    return context;
+}

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

@@ -1,13 +1,17 @@
 /**
  * UI components - Buttons, cards, badges, and other UI elements
  */
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
 export { default as Avatar } from './Avatar.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
 export { default as Card } from './Card.svelte';
 export { default as Chip } from './Chip.svelte';
-export { default as Dropdown } from './Dropdown.svelte';
+export { default as Disclosure } from './Disclosure.svelte';
+export { default as Dropdown, default as Menu } from './Dropdown.svelte';
 export { default as Pagination } from './Pagination.svelte';
+export { default as Popover } from './Popover.svelte';
 export { default as Skeleton } from './Skeleton.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as Tree } from './Tree.svelte';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/ui/index.js

@@ -1,14 +1,18 @@
 /**
  * UI components - Buttons, cards, badges, and other UI elements
  */
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
 // Export components
 export { default as Avatar } from './Avatar.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
 export { default as Card } from './Card.svelte';
 export { default as Chip } from './Chip.svelte';
-export { default as Dropdown } from './Dropdown.svelte';
+export { default as Disclosure } from './Disclosure.svelte';
+export { default as Dropdown, default as Menu } from './Dropdown.svelte';
 export { default as Pagination } from './Pagination.svelte';
+export { default as Popover } from './Popover.svelte';
 export { default as Skeleton } from './Skeleton.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as Tree } from './Tree.svelte';

package/dist/index.d.ts

@@ -20,9 +20,9 @@ export * from './components/nav/index.js';
 export { default as PermissionCheck } from './components/permissions/PermissionCheck.svelte';
 export { default as RoleBadge } from './components/roles/RoleBadge.svelte';
 export { default as RoleSelector } from './components/roles/RoleSelector.svelte';
-export type { ThemeMode } from './components/theme/index.js';
 export * from './components/ui/index.js';
 export * from './registry/index.js';
 export * from './theme/index.js';
+export type { ColorScheme as ThemeMode } from './themes/types.js';
 export type * from './types-generic.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,UAAU,GACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,+BAA+B,CAAC;AAE9C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,8BAA8B,CAAC;AAE7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAE3F,cAAc,2BAA2B,CAAC;AAE1C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,iDAAiD,CAAC;AAE7F,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAEjF,YAAY,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAE7D,cAAc,0BAA0B,CAAC;AAEzC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,kBAAkB,CAAC;AAEjC,mBAAmB,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,UAAU,GACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,+BAA+B,CAAC;AAE9C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,8BAA8B,CAAC;AAE7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAE3F,cAAc,2BAA2B,CAAC;AAE1C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,iDAAiD,CAAC;AAE7F,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAEjF,cAAc,0BAA0B,CAAC;AAEzC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,kBAAkB,CAAC;AAEjC,YAAY,EAAE,WAAW,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAElE,mBAAmB,oBAAoB,CAAC"}

package/dist/playground.d.ts

@@ -0,0 +1,2 @@
+export { default } from './svelte/playground.js';
+//# sourceMappingURL=playground.d.ts.map

package/dist/playground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../src/playground.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/playground.js

@@ -0,0 +1 @@
+export { default } from './svelte/playground.js';

package/dist/svelte/__tests__/playground.test.js

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import playground from '../playground.js';
+describe('smrt-ui playground', () => {
+    it('publishes themed base-control and data-table previews', () => {
+        expect(playground.packageName).toBe('@happyvertical/smrt-ui');
+        expect(playground.entries.map((entry) => entry.id)).toEqual([
+            'base-controls',
+            'interactive-controls',
+            'feedback-overlays',
+            'collections',
+            'data-table',
+        ]);
+        for (const entry of playground.entries) {
+            expect(entry.loadComponent).toEqual(expect.any(Function));
+            expect(entry.modes).toHaveProperty('mock');
+        }
+    });
+});

package/dist/svelte/playground/BaseControlsPreview.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+import Form from '../../components/forms/Form.svelte';
+import FormGroup from '../../components/forms/FormGroup.svelte';
+import Input from '../../components/forms/Input.svelte';
+import Select from '../../components/forms/Select.svelte';
+import Textarea from '../../components/forms/Textarea.svelte';
+import Toggle from '../../components/forms/Toggle.svelte';
+import Badge from '../../components/ui/Badge.svelte';
+import Button from '../../components/ui/Button.svelte';
+
+let name = $state('Ada Lovelace');
+let email = $state('ada@example.com');
+let seats = $state(12);
+let startDate = $state('2026-07-09');
+let role = $state('admin');
+let notes = $state(
+  'These controls stay lightweight because they do not require a Provider.',
+);
+let enabled = $state(true);
+let saveCount = $state(0);
+
+function handleSubmit() {
+  saveCount += 1;
+}
+</script>
+
+<div class="workbench">
+  <div class="workbench__header">
+    <div>
+      <p class="eyebrow">Provider-free</p>
+      <h4>Form controls</h4>
+      <p class="supporting">
+        Native semantics, shared focus states, and the active playground theme.
+      </p>
+    </div>
+    <Badge variant="success">Ready</Badge>
+  </div>
+
+  <Form class="controls-form" onsubmit={handleSubmit}>
+    <div class="control-grid">
+      <FormGroup label="Name" hint="Standard text input" required>
+        <Input name="name" bind:value={name} required />
+      </FormGroup>
+
+      <FormGroup label="Email" hint="Native email validation">
+        <Input name="email" type="email" bind:value={email} />
+      </FormGroup>
+
+      <FormGroup label="Seats" hint="Numeric input">
+        <Input name="seats" type="number" min="1" bind:value={seats} />
+      </FormGroup>
+
+      <FormGroup label="Start date" hint="Native date picker">
+        <Input name="startDate" type="date" bind:value={startDate} />
+      </FormGroup>
+
+      <FormGroup label="Role" hint="Native select with themed chrome">
+        <Select name="role" bind:value={role}>
+          <option value="admin">Admin</option>
+          <option value="editor">Editor</option>
+          <option value="viewer">Viewer</option>
+        </Select>
+      </FormGroup>
+
+      <FormGroup
+        label="Workspace key"
+        error="That key is already in use"
+      >
+        <Input name="workspaceKey" value="western-lab" />
+      </FormGroup>
+
+      <div class="control-grid__wide">
+        <FormGroup label="Notes" hint="Resizable multiline input">
+          <Textarea name="notes" rows={3} bind:value={notes} />
+        </FormGroup>
+      </div>
+
+      <div class="control-grid__wide toggles">
+        <Toggle label="Workspace enabled" bind:checked={enabled} />
+        <Toggle label="Unavailable setting" disabled />
+      </div>
+    </div>
+
+    <div class="actions">
+      <div class="actions__buttons">
+        <Button type="submit">Save changes</Button>
+        <Button variant="secondary">Duplicate</Button>
+        <Button variant="ghost">Cancel</Button>
+        <Button variant="danger">Delete</Button>
+        <Button disabled>Disabled</Button>
+      </div>
+      <p class="save-status" aria-live="polite">
+        {saveCount === 0
+          ? 'Submit the form to test its event handling.'
+          : `Saved ${saveCount} ${saveCount === 1 ? 'time' : 'times'}.`}
+      </p>
+    </div>
+  </Form>
+
+  <div class="status-row" aria-label="Badge variants">
+    <span>Status</span>
+    <Badge>Default</Badge>
+    <Badge variant="primary">Primary</Badge>
+    <Badge variant="success">Success</Badge>
+    <Badge variant="warning">Warning</Badge>
+    <Badge variant="error">Error</Badge>
+  </div>
+</div>
+
+<style>
+  .workbench {
+    display: grid;
+    gap: var(--smrt-spacing-6);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .workbench__header,
+  .actions,
+  .actions__buttons,
+  .status-row,
+  .toggles {
+    display: flex;
+    align-items: center;
+  }
+
+  .workbench__header,
+  .actions {
+    justify-content: space-between;
+    gap: var(--smrt-spacing-4);
+  }
+
+  .workbench__header {
+    padding-bottom: var(--smrt-spacing-4);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  h4,
+  p {
+    margin: 0;
+  }
+
+  h4 {
+    font: var(--smrt-typography-headline-small-font);
+  }
+
+  .eyebrow {
+    margin-bottom: var(--smrt-spacing-1);
+    color: var(--smrt-color-primary);
+    font: var(--smrt-typography-label-small-font);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+
+  .supporting,
+  .save-status,
+  .status-row > span:first-child {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .supporting {
+    margin-top: var(--smrt-spacing-1);
+    font: var(--smrt-typography-body-medium-font);
+  }
+
+  :global(.controls-form) {
+    display: grid;
+    gap: var(--smrt-spacing-4);
+  }
+
+  .control-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: var(--smrt-spacing-6);
+  }
+
+  .control-grid__wide {
+    grid-column: 1 / -1;
+  }
+
+  .toggles,
+  .actions__buttons,
+  .status-row {
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-3);
+  }
+
+  .toggles {
+    min-height: 3rem;
+  }
+
+  .actions {
+    align-items: flex-start;
+    padding-top: var(--smrt-spacing-5);
+    border-top: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .save-status {
+    max-width: 18rem;
+    font: var(--smrt-typography-body-small-font);
+    text-align: right;
+  }
+
+  .status-row {
+    padding: var(--smrt-spacing-4);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-surface-container-low);
+  }
+
+  .status-row > span:first-child {
+    margin-right: var(--smrt-spacing-1);
+    font: var(--smrt-typography-label-medium-font);
+  }
+
+  @media (max-width: 760px) {
+    .control-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .control-grid__wide {
+      grid-column: auto;
+    }
+
+    .workbench__header,
+    .actions {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+
+    .save-status {
+      text-align: left;
+    }
+  }
+</style>

package/dist/svelte/playground/BaseControlsPreview.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const BaseControlsPreview: import("svelte").Component<Record<string, never>, {}, "">;
+type BaseControlsPreview = ReturnType<typeof BaseControlsPreview>;
+export default BaseControlsPreview;
+//# sourceMappingURL=BaseControlsPreview.svelte.d.ts.map

package/dist/svelte/playground/BaseControlsPreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseControlsPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/BaseControlsPreview.svelte.ts"],"names":[],"mappings":"AA0HA,QAAA,MAAM,mBAAmB,2DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}