@unofficialbox/box-open-elements-svelte 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 box-open-elements contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @unofficialbox/box-open-elements-svelte
+
+Typed Svelte 5 wrappers for `box-open-elements`, including explicit structured
+property sync, callback props for custom events, bindable element refs, and a
+selection-controller readable store.
+
+```bash
+npm install @unofficialbox/box-open-elements @unofficialbox/box-open-elements-svelte svelte
+```
+
+```svelte
+<script lang="ts">
+  import { Select, TextField } from "@unofficialbox/box-open-elements-svelte";
+  const options = [{ label: "Draft", value: "draft" }];
+</script>
+
+<TextField value="Apollo" onValueChanged={(event) => console.log(event.detail.value)} />
+<Select {options} />
+```
+
+`createExplorerSelectionStore(controller)` exposes the shared selection
+controller as a standard readable store. Version `0.1.0` is a release candidate;
+Supported status follows the first public lockstep adapter release and clean
+registry-install verification.

package/dist/Button.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Button as ButtonElement } from "@unofficialbox/box-open-elements/button";
+
+  ButtonElement.register();
+
+  type Props = {
+    element?: ButtonElement;
+    label?: string;
+    tone?: string;
+    size?: string;
+    disabled?: boolean;
+    onClick?: (event: MouseEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+
+  let {
+    element = $bindable(),
+    label,
+    tone,
+    size,
+    disabled = false,
+    onClick,
+    children,
+    ...rest
+  }: Props = $props();
+
+</script>
+
+<box-button
+  bind:this={element}
+  {...rest}
+  {label}
+  {tone}
+  {size}
+  {disabled}
+  onclick={onClick}
+>
+  {@render children?.()}
+</box-button>

package/dist/Button.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import { Button as ButtonElement } from "@unofficialbox/box-open-elements/button";
+type Props = {
+    element?: ButtonElement;
+    label?: string;
+    tone?: string;
+    size?: string;
+    disabled?: boolean;
+    onClick?: (event: MouseEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Button: import("svelte").Component<Props, {}, "element">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/Dialog.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Dialog as DialogElement } from "@unofficialbox/box-open-elements/dialog";
+
+  DialogElement.register();
+
+  type DialogSize = "small" | "medium" | "large" | "fullscreen";
+  type Props = {
+    element?: DialogElement;
+    open?: boolean;
+    heading?: string;
+    description?: string;
+    confirmLabel?: string;
+    size?: DialogSize;
+    onOpenChanged?: (event: CustomEvent<{ open: boolean }>) => void;
+    onConfirm?: (event: CustomEvent<null>) => void;
+    onCancel?: (event: CustomEvent<null>) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+
+  let {
+    element = $bindable(),
+    open = false,
+    heading,
+    description,
+    confirmLabel,
+    size,
+    onOpenChanged,
+    onConfirm,
+    onCancel,
+    children,
+    ...rest
+  }: Props = $props();
+
+  $effect(() => {
+    if (!element) return;
+    const bindings: Array<[string, EventListener | undefined]> = [
+      ["open-changed", onOpenChanged as EventListener | undefined],
+      ["confirm", onConfirm as EventListener | undefined],
+      ["cancel", onCancel as EventListener | undefined],
+    ];
+    for (const [eventName, listener] of bindings) {
+      if (listener) element.addEventListener(eventName, listener);
+    }
+    return () => {
+      for (const [eventName, listener] of bindings) {
+        if (listener) element?.removeEventListener(eventName, listener);
+      }
+    };
+  });
+</script>
+
+<box-dialog
+  bind:this={element}
+  {...rest}
+  {open}
+  {heading}
+  {description}
+  {confirmLabel}
+  {size}
+>
+  {@render children?.()}
+</box-dialog>

package/dist/Dialog.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import { Dialog as DialogElement } from "@unofficialbox/box-open-elements/dialog";
+type DialogSize = "small" | "medium" | "large" | "fullscreen";
+type Props = {
+    element?: DialogElement;
+    open?: boolean;
+    heading?: string;
+    description?: string;
+    confirmLabel?: string;
+    size?: DialogSize;
+    onOpenChanged?: (event: CustomEvent<{
+        open: boolean;
+    }>) => void;
+    onConfirm?: (event: CustomEvent<null>) => void;
+    onCancel?: (event: CustomEvent<null>) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Dialog: import("svelte").Component<Props, {}, "element">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/Select.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Select as SelectElement } from "@unofficialbox/box-open-elements/select";
+
+  SelectElement.register();
+
+  type SelectOption = { label: string; value: string };
+  type ValueChangedEvent = CustomEvent<{ value: string }>;
+  type Props = {
+    element?: SelectElement;
+    label?: string;
+    value?: string;
+    options?: SelectOption[];
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    onValueChanged?: (event: ValueChangedEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+
+  let {
+    element = $bindable(),
+    label,
+    value,
+    options,
+    disabled = false,
+    name,
+    invalid = false,
+    errorMessage,
+    onValueChanged,
+    children,
+    ...rest
+  }: Props = $props();
+
+  $effect(() => {
+    if (!element || !onValueChanged) return;
+    const listener = onValueChanged as EventListener;
+    element.addEventListener("value-changed", listener);
+    return () => element?.removeEventListener("value-changed", listener);
+  });
+</script>
+
+<box-select
+  bind:this={element}
+  {...rest}
+  {label}
+  {value}
+  {options}
+  {disabled}
+  {name}
+  {invalid}
+  {errorMessage}
+>
+  {@render children?.()}
+</box-select>

package/dist/Select.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+import { Select as SelectElement } from "@unofficialbox/box-open-elements/select";
+type SelectOption = {
+    label: string;
+    value: string;
+};
+type ValueChangedEvent = CustomEvent<{
+    value: string;
+}>;
+type Props = {
+    element?: SelectElement;
+    label?: string;
+    value?: string;
+    options?: SelectOption[];
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    onValueChanged?: (event: ValueChangedEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Select: import("svelte").Component<Props, {}, "element">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/TextField.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { TextField as TextFieldElement } from "@unofficialbox/box-open-elements/text-field";
+
+  TextFieldElement.register();
+
+  type ValueChangedEvent = CustomEvent<{ value: string }>;
+  type Props = {
+    element?: TextFieldElement;
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    onValueChanged?: (event: ValueChangedEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+
+  let {
+    element = $bindable(),
+    label,
+    value,
+    placeholder,
+    disabled = false,
+    name,
+    invalid = false,
+    errorMessage,
+    onValueChanged,
+    children,
+    ...rest
+  }: Props = $props();
+
+  $effect(() => {
+    if (!element || !onValueChanged) return;
+    const listener = onValueChanged as EventListener;
+    element.addEventListener("value-changed", listener);
+    return () => element?.removeEventListener("value-changed", listener);
+  });
+</script>
+
+<box-text-field
+  bind:this={element}
+  {...rest}
+  {label}
+  {value}
+  {placeholder}
+  {disabled}
+  {name}
+  {invalid}
+  {errorMessage}
+>
+  {@render children?.()}
+</box-text-field>

package/dist/TextField.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import { TextField as TextFieldElement } from "@unofficialbox/box-open-elements/text-field";
+type ValueChangedEvent = CustomEvent<{
+    value: string;
+}>;
+type Props = {
+    element?: TextFieldElement;
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    onValueChanged?: (event: ValueChangedEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const TextField: import("svelte").Component<Props, {}, "element">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

package/dist/explorer-selection.d.ts

@@ -0,0 +1,6 @@
+import { type Readable } from "svelte/store";
+import { ExplorerSelectionController, type ExplorerSelectionState } from "@unofficialbox/box-open-elements/patterns/content-explorer/selection";
+export { ExplorerSelectionController };
+export type { ExplorerSelectionState };
+/** Svelte readable store backed by the framework-neutral selection controller. */
+export declare const createExplorerSelectionStore: (controller: ExplorerSelectionController) => Readable<Readonly<ExplorerSelectionState>>;

package/dist/explorer-selection.js

@@ -0,0 +1,10 @@
+import { readable } from "svelte/store";
+import { ExplorerSelectionController, } from "@unofficialbox/box-open-elements/patterns/content-explorer/selection";
+// Re-exported so a host can construct the controller through this package and
+// hand it straight to the adapter API. Classes with private fields are
+// nominally typed, so a host that imports the class from a differently
+// resolved copy of the core package gets an incompatible identity — one
+// import path sidesteps that whole class of version-skew errors.
+export { ExplorerSelectionController };
+/** Svelte readable store backed by the framework-neutral selection controller. */
+export const createExplorerSelectionStore = (controller) => readable(controller.getState(), set => controller.subscribe("selectionChanged", () => set(controller.getState())));

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Button } from "./Button.svelte";
+export { default as Dialog } from "./Dialog.svelte";
+export { createExplorerSelectionStore } from "./explorer-selection.js";
+export { default as Select } from "./Select.svelte";
+export { default as TextField } from "./TextField.svelte";
+export { ExplorerSelectionController, type ExplorerSelectionState } from "./explorer-selection.js";

package/dist/index.js

@@ -0,0 +1,6 @@
+export { default as Button } from "./Button.svelte";
+export { default as Dialog } from "./Dialog.svelte";
+export { createExplorerSelectionStore } from "./explorer-selection.js";
+export { default as Select } from "./Select.svelte";
+export { default as TextField } from "./TextField.svelte";
+export { ExplorerSelectionController } from "./explorer-selection.js";

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@unofficialbox/box-open-elements-svelte",
+  "version": "0.7.0",
+  "description": "Typed Svelte adapters for box-open-elements Web Components.",
+  "license": "MIT",
+  "homepage": "https://unofficialbox.github.io/box-open-elements",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unofficialbox/box-open-elements.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/unofficialbox/box-open-elements/issues"
+  },
+  "keywords": ["svelte", "web-components", "design-system", "box"],
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.9.0"
+  },
+  "peerDependencies": {
+    "@unofficialbox/box-open-elements": "^0.7.0",
+    "svelte": ">=5.0.0 <6.0.0"
+  },
+  "scripts": {
+    "build": "svelte-package --input src --output dist",
+    "prepublishOnly": "bun run build",
+    "typecheck": "svelte-check --tsconfig tsconfig.json"
+  }
+}