@unofficialbox/box-open-elements-solid 0.0.0-stage → 0.42.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kyle @ Unofficial Box
+
+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

@@ -1,3 +1,68 @@
-# Temporary Holding Version
+# SolidJS adapter
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+`@unofficialbox/box-open-elements-solid` is published on npm and independently
+reviewed. Its `0.42.2` human bootstrap was verified by integrity/content comparison
+against merged commit `03fa63b33105dbcef9a6c1e6eed770db2e554cb4`, a normal isolated
+registry install, public JSX types, SSR/hydration, and real browser acceptance.
+That bootstrap has no OIDC provenance; publisher setup and first OIDC validation
+are distinct release steps. See [RELEASING.md](../../RELEASING.md).
+
+```sh
+npm install @unofficialbox/box-open-elements-solid solid-js
+```
+
+Exports: `Button`, `TextField`, `Select`, `Dialog`, `Combobox`, `Drawer`, `createWebComponent`,
+`ExplorerSelectionController`, and `useExplorerSelectionController`, with public
+prop/event/ref declarations and per-component subpath exports.
+
+Peers for this package version: core `^0.42.3` and solid-js `^1.9.17`.
+
+```tsx
+import { TextField, Select, Dialog } from "@unofficialbox/box-open-elements-solid";
+
+// Render inside your framework component. Pass normal JSX props, including
+// reactive signal reads in Solid. Structured values go through BOE setters.
+<TextField name="title" label="Title" value="Example"
+  ref={element => element?.focus()}
+  onValueChanged={event => console.log(event.detail.value)} />;
+<Select options={[{ label: "One", value: "1" }]} value="1" />;
+<Dialog open={false} heading="Details"><span slot="footer">Footer</span></Dialog>;
+```
+
+Solid props remain getter-backed through `splitProps`; the host does not remount
+when signals update. Call `useExplorerSelectionController` within a Solid owner;
+it returns an accessor and owner disposal releases the subscription. Refs follow
+Solid's element callback/JSX assignment contract; callbacks are not called with
+null at disposal. Use `onCleanup` for external ref-owned resources.
+
+Mapped BOE event callbacks receive the actual DOM event; `preventDefault` and
+`stopPropagation` act on it. Cancellation works when the underlying event is
+cancelable; BOE Dialog's `cancel` notification itself is not cancelable. Factory
+`events` maps preserve exact spelling/case, and listeners are removed when the
+framework owner unmounts. Temporary DOM disconnect/reconnect retains the owner.
+The wrappers retain BOE's optional-property semantics: omitted scalar props leave
+the element value alone; disabled/invalid default to false. Use explicit false,
+empty string, or empty array to clear controlled values. BOE Select intentionally
+reflects its assigned options array as JSON. Host attributes, children, and slots
+remain framework-native; use Solid's `attr:*`/`bool:*` for explicit attribute mode.
+
+SSR imports require no DOM globals. Server rendering emits inert custom-element
+hosts and light-DOM children; controlled properties and arrays are assigned on
+client hydration, so do not expect populated shadow DOM before JavaScript runs.
+Mapped listeners attach before initial property sync, including synchronous
+`open-changed` notifications from initially-open Dialog and Drawer. Browser
+fixtures cover closed-first and initially-open client/hydrated rendering.
+Include `generateHydrationScript()` in the server HTML and compile both halves
+with Solid's hydratable JSX compiler. SolidStart is not verified.
+
+Validation: `bun run frameworks:solid`, `bun run frameworks:solid:ssr`,
+`bun run test -- packages/solid`, `bun run frameworks:jsx:browser`, and
+`bun run adapters:pack-check`. See [support status](../../docs/integration/framework-adapters.md)
+and [release requirements](../../RELEASING.md).
+
+Design references: [Solid dynamic hosts](https://docs.solidjs.com/reference/components/dynamic),
+[exact native events](https://docs.solidjs.com/reference/jsx-attributes/on), and
+[owner cleanup](https://docs.solidjs.com/reference/lifecycle/on-cleanup).
+The installed 1.9.17 `solid-js/web` source confirms dynamic host hydration-key
+reuse and separate server rendering. The factory uses those runtime APIs so the
+published adapter itself needs no JSX compiler transform.

package/dist/button.d.ts

@@ -0,0 +1,21 @@
+import { Button as ButtonElement } from "@unofficialbox/box-open-elements/button";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { NativeEventHandler } from "./events.js";
+export type ButtonProps = Omit<WebComponentProps, "onClick"> & {
+    label?: string;
+    accessibleLabel?: string;
+    tone?: string;
+    size?: string;
+    disabled?: boolean;
+    onClick?: NativeEventHandler<ButtonElement, MouseEvent>;
+};
+export declare const Button: import("solid-js").Component<Omit<WebComponentProps, "onClick"> & {
+    label?: string;
+    accessibleLabel?: string;
+    tone?: string;
+    size?: string;
+    disabled?: boolean;
+    onClick?: NativeEventHandler<ButtonElement, MouseEvent>;
+} & {
+    ref?: ButtonElement | ((element: ButtonElement) => void) | undefined;
+}>;

package/dist/button.js

@@ -0,0 +1,22 @@
+import { Button as ButtonElement } from "@unofficialbox/box-open-elements/button";
+import { createWebComponent } from "./create-web-component.js";
+ButtonElement.register();
+export const Button = createWebComponent({
+    tagName: "box-button",
+    propertyNames: ["label", "accessibleLabel", "tone", "size", "disabled"],
+    events: [{ propName: "onClick", eventName: "click" }],
+    sync: (element, props) => {
+        if (props.label !== undefined) {
+            element.label = props.label;
+        }
+        if (props.accessibleLabel !== undefined)
+            element.accessibleLabel = props.accessibleLabel;
+        if (props.tone !== undefined) {
+            element.tone = props.tone;
+        }
+        if (props.size !== undefined) {
+            element.size = props.size;
+        }
+        element.disabled = Boolean(props.disabled);
+    },
+});

package/dist/combobox.d.ts

@@ -0,0 +1,42 @@
+import { Combobox as ComboboxElement } from "@unofficialbox/box-open-elements/combobox";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler, ValueChangedDetail } from "./events.js";
+export type ComboboxOption = {
+    label: string;
+    value: string;
+    description?: string;
+    group?: string;
+    disabled?: boolean;
+};
+export type ComboboxProps = WebComponentProps & {
+    label?: string;
+    value?: string;
+    options?: ComboboxOption[];
+    placeholder?: string;
+    placement?: string;
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<ComboboxElement, ValueChangedDetail>;
+};
+export declare const Combobox: import("solid-js").Component<WebComponentProps & {
+    label?: string;
+    value?: string;
+    options?: ComboboxOption[];
+    placeholder?: string;
+    placement?: string;
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<ComboboxElement, ValueChangedDetail>;
+} & {
+    ref?: ComboboxElement | ((element: ComboboxElement) => void) | undefined;
+}>;

package/dist/combobox.js

@@ -0,0 +1,35 @@
+import { Combobox as ComboboxElement } from "@unofficialbox/box-open-elements/combobox";
+import { createWebComponent } from "./create-web-component.js";
+ComboboxElement.register();
+export const Combobox = createWebComponent({
+    tagName: "box-combobox",
+    propertyNames: [
+        "label", "value", "options", "placeholder", "placement", "disabled",
+        "name", "invalid", "errorMessage", "description", "required", "hideLabel",
+    ],
+    events: [{ propName: "onValueChanged", eventName: "value-changed" }],
+    sync: (element, props) => {
+        if (props.label !== undefined)
+            element.label = props.label;
+        if (props.value !== undefined)
+            element.value = props.value;
+        if (props.options !== undefined)
+            element.options = props.options;
+        if (props.placeholder !== undefined)
+            element.placeholder = props.placeholder;
+        if (props.placement !== undefined)
+            element.placement = props.placement;
+        if (props.name !== undefined)
+            element.name = props.name;
+        if (props.errorMessage !== undefined)
+            element.errorMessage = props.errorMessage;
+        if (props.description !== undefined)
+            element.description = props.description;
+        if (props.required !== undefined)
+            element.required = props.required;
+        if (props.hideLabel !== undefined)
+            element.hideLabel = props.hideLabel;
+        element.disabled = Boolean(props.disabled);
+        element.invalid = Boolean(props.invalid);
+    },
+});

package/dist/create-web-component.d.ts

@@ -0,0 +1,15 @@
+import { type Component, type JSX } from "solid-js";
+export type WebComponentProps = Omit<JSX.HTMLAttributes<HTMLElement>, "ref" | "onCancel">;
+export type CreateWebComponentOptions<E extends HTMLElement, P> = {
+    tagName: string;
+    sync: (element: E, props: P) => void;
+    propertyNames?: ReadonlyArray<keyof P & string>;
+    events?: ReadonlyArray<{
+        propName: keyof P & string;
+        eventName: string;
+    }>;
+};
+/** A stable host with reactive property synchronization and owner-scoped listeners. */
+export declare function createWebComponent<E extends HTMLElement, P extends object>(options: CreateWebComponentOptions<E, P>): Component<P & {
+    ref?: E | ((element: E) => void);
+}>;

package/dist/create-web-component.js

@@ -0,0 +1,35 @@
+import { createRenderEffect, mergeProps, onCleanup, splitProps, untrack } from "solid-js";
+import { createDynamic } from "solid-js/web";
+/** A stable host with reactive property synchronization and owner-scoped listeners. */
+export function createWebComponent(options) {
+    return props => {
+        // splitProps preserves Solid's getter-backed props; spreading here would
+        // freeze signal values at component creation.
+        const [, host] = splitProps(props, [
+            ...(options.propertyNames ?? []),
+            ...(options.events ?? []).map(binding => binding.propName),
+            "ref",
+        ]);
+        return createDynamic(() => options.tagName, mergeProps(host, {
+            ref(element) {
+                const subscriptions = (options.events ?? []).map(binding => {
+                    const listener = (event) => {
+                        const handler = props[binding.propName];
+                        if (typeof handler === "function")
+                            untrack(() => handler(event));
+                    };
+                    element.addEventListener(binding.eventName, listener);
+                    return { ...binding, listener };
+                });
+                onCleanup(() => {
+                    for (const binding of subscriptions)
+                        element.removeEventListener(binding.eventName, binding.listener);
+                });
+                createRenderEffect(() => options.sync(element, props));
+                const ref = props.ref;
+                if (typeof ref === "function")
+                    ref(element);
+            },
+        }));
+    };
+}

package/dist/dialog.d.ts

@@ -0,0 +1,42 @@
+import type { JSX } from "solid-js";
+import { Dialog as DialogElement } from "@unofficialbox/box-open-elements/dialog";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler } from "./events.js";
+export type DialogConfirmTone = "primary" | "danger";
+export type DialogSize = "small" | "medium" | "large" | "fullscreen";
+export type DialogProps = WebComponentProps & {
+    children?: JSX.Element;
+    open?: boolean;
+    heading?: string;
+    description?: string;
+    confirmLabel?: string;
+    confirmTone?: DialogConfirmTone;
+    confirmDisabled?: boolean;
+    confirmBusy?: boolean;
+    confirmBusyLabel?: string;
+    size?: DialogSize;
+    onOpenChanged?: CustomEventHandler<DialogElement, {
+        open: boolean;
+    }>;
+    onConfirm?: CustomEventHandler<DialogElement, null>;
+    onCancel?: CustomEventHandler<DialogElement, null>;
+};
+export declare const Dialog: import("solid-js").Component<WebComponentProps & {
+    children?: JSX.Element;
+    open?: boolean;
+    heading?: string;
+    description?: string;
+    confirmLabel?: string;
+    confirmTone?: DialogConfirmTone;
+    confirmDisabled?: boolean;
+    confirmBusy?: boolean;
+    confirmBusyLabel?: string;
+    size?: DialogSize;
+    onOpenChanged?: CustomEventHandler<DialogElement, {
+        open: boolean;
+    }>;
+    onConfirm?: CustomEventHandler<DialogElement, null>;
+    onCancel?: CustomEventHandler<DialogElement, null>;
+} & {
+    ref?: DialogElement | ((element: DialogElement) => void) | undefined;
+}>;

package/dist/dialog.js

@@ -0,0 +1,37 @@
+import { Dialog as DialogElement } from "@unofficialbox/box-open-elements/dialog";
+import { createWebComponent } from "./create-web-component.js";
+DialogElement.register();
+export const Dialog = createWebComponent({
+    tagName: "box-dialog",
+    propertyNames: ["open", "heading", "description", "confirmLabel", "confirmTone", "confirmDisabled", "confirmBusy", "confirmBusyLabel", "size"],
+    events: [
+        { propName: "onOpenChanged", eventName: "open-changed" },
+        { propName: "onConfirm", eventName: "confirm" },
+        { propName: "onCancel", eventName: "cancel" },
+    ],
+    sync: (element, props) => {
+        if (props.heading !== undefined) {
+            element.heading = props.heading;
+        }
+        if (props.description !== undefined) {
+            element.description = props.description;
+        }
+        if (props.confirmLabel !== undefined) {
+            element.confirmLabel = props.confirmLabel;
+        }
+        if (props.confirmTone !== undefined)
+            element.confirmTone = props.confirmTone;
+        if (props.confirmDisabled !== undefined)
+            element.confirmDisabled = props.confirmDisabled;
+        if (props.confirmBusy !== undefined)
+            element.confirmBusy = props.confirmBusy;
+        if (props.confirmBusyLabel !== undefined)
+            element.confirmBusyLabel = props.confirmBusyLabel;
+        if (props.size !== undefined) {
+            element.size = props.size;
+        }
+        if (props.open !== undefined) {
+            element.open = props.open;
+        }
+    },
+});

package/dist/drawer.d.ts

@@ -0,0 +1,39 @@
+import type { JSX } from "solid-js";
+import { Drawer as DrawerRef } from "@unofficialbox/box-open-elements/drawer";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler } from "./events.js";
+export type { DrawerRef };
+export type DrawerProps = WebComponentProps & {
+    children?: JSX.Element;
+    heading?: string;
+    description?: string;
+    open?: boolean;
+    position?: string;
+    size?: string;
+    busy?: boolean;
+    hideCloseButton?: boolean;
+    onOpenChanged?: CustomEventHandler<DrawerRef, {
+        open: boolean;
+    }>;
+    onDismiss?: CustomEventHandler<DrawerRef, {
+        source: "close-button" | "backdrop" | "escape";
+    }>;
+};
+export declare const Drawer: import("solid-js").Component<WebComponentProps & {
+    children?: JSX.Element;
+    heading?: string;
+    description?: string;
+    open?: boolean;
+    position?: string;
+    size?: string;
+    busy?: boolean;
+    hideCloseButton?: boolean;
+    onOpenChanged?: CustomEventHandler<DrawerRef, {
+        open: boolean;
+    }>;
+    onDismiss?: CustomEventHandler<DrawerRef, {
+        source: "close-button" | "backdrop" | "escape";
+    }>;
+} & {
+    ref?: DrawerRef | ((element: DrawerRef) => void) | undefined;
+}>;

package/dist/drawer.js

@@ -0,0 +1,23 @@
+import { Drawer as DrawerRef } from "@unofficialbox/box-open-elements/drawer";
+import { createWebComponent } from "./create-web-component.js";
+export const Drawer = createWebComponent({
+    tagName: DrawerRef.tagName,
+    propertyNames: ["heading", "description", "open", "position", "size", "busy", "hideCloseButton"],
+    events: [{ propName: "onOpenChanged", eventName: "open-changed" }, { propName: "onDismiss", eventName: "dismiss" }],
+    sync: (element, props) => {
+        if (props.heading !== undefined)
+            element.heading = props.heading;
+        if (props.description !== undefined)
+            element.description = props.description;
+        if (props.open !== undefined)
+            element.open = props.open;
+        if (props.position !== undefined)
+            element.position = props.position;
+        if (props.size !== undefined)
+            element.size = props.size;
+        if (props.busy !== undefined)
+            element.busy = props.busy;
+        if (props.hideCloseButton !== undefined)
+            element.hideCloseButton = props.hideCloseButton;
+    },
+});

package/dist/events.d.ts

@@ -0,0 +1,9 @@
+export type CustomEventHandler<E extends HTMLElement, Detail> = (event: CustomEvent<Detail> & {
+    currentTarget: E;
+}) => void;
+export type NativeEventHandler<E extends HTMLElement, Ev extends Event = Event> = (event: Ev & {
+    currentTarget: E;
+}) => void;
+export type ValueChangedDetail = {
+    value: string;
+};

package/dist/events.js

@@ -0,0 +1 @@
+export {};

package/dist/explorer-selection.d.ts

@@ -0,0 +1,6 @@
+import { type Accessor } from "solid-js";
+import { ExplorerSelectionController, type ExplorerSelectionState } from "@unofficialbox/box-open-elements/patterns/content-explorer/selection";
+export { ExplorerSelectionController };
+export type { ExplorerSelectionState };
+/** Call inside a Solid owner; disposal releases the controller subscription. */
+export declare function useExplorerSelectionController(controller: ExplorerSelectionController): Accessor<Readonly<ExplorerSelectionState>>;

package/dist/explorer-selection.js

@@ -0,0 +1,12 @@
+import { createSignal, getOwner, onCleanup } from "solid-js";
+import { ExplorerSelectionController } from "@unofficialbox/box-open-elements/patterns/content-explorer/selection";
+export { ExplorerSelectionController };
+/** Call inside a Solid owner; disposal releases the controller subscription. */
+export function useExplorerSelectionController(controller) {
+    if (!getOwner())
+        throw new Error("useExplorerSelectionController requires a Solid reactive owner.");
+    const [state, setState] = createSignal(controller.getState());
+    const unsubscribe = controller.subscribe("selectionChanged", () => setState(controller.getState()));
+    onCleanup(unsubscribe);
+    return state;
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { createWebComponent, type WebComponentProps, type CreateWebComponentOptions } from "./create-web-component.js";
+export type { CustomEventHandler, NativeEventHandler, ValueChangedDetail } from "./events.js";
+export { Button, type ButtonProps } from "./button.js";
+export { TextField, type TextFieldProps } from "./text-field.js";
+export { Select, type SelectProps, type SelectOption } from "./select.js";
+export { Dialog, type DialogProps, type DialogConfirmTone, type DialogSize } from "./dialog.js";
+export { ExplorerSelectionController, useExplorerSelectionController, type ExplorerSelectionState } from "./explorer-selection.js";
+export { Combobox, type ComboboxProps, type ComboboxOption } from "./combobox.js";
+export { Drawer, type DrawerProps, type DrawerRef } from "./drawer.js";

package/dist/index.js

@@ -0,0 +1,8 @@
+export { createWebComponent } from "./create-web-component.js";
+export { Button } from "./button.js";
+export { TextField } from "./text-field.js";
+export { Select } from "./select.js";
+export { Dialog } from "./dialog.js";
+export { ExplorerSelectionController, useExplorerSelectionController } from "./explorer-selection.js";
+export { Combobox } from "./combobox.js";
+export { Drawer } from "./drawer.js";

package/dist/select.d.ts

@@ -0,0 +1,35 @@
+import { Select as SelectElement } from "@unofficialbox/box-open-elements/select";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler, ValueChangedDetail } from "./events.js";
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+export type SelectProps = WebComponentProps & {
+    label?: string;
+    value?: string;
+    options?: SelectOption[];
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<SelectElement, ValueChangedDetail>;
+};
+export declare const Select: import("solid-js").Component<WebComponentProps & {
+    label?: string;
+    value?: string;
+    options?: SelectOption[];
+    disabled?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<SelectElement, ValueChangedDetail>;
+} & {
+    ref?: SelectElement | ((element: SelectElement) => void) | undefined;
+}>;

package/dist/select.js

@@ -0,0 +1,42 @@
+import { Select as SelectElement } from "@unofficialbox/box-open-elements/select";
+import { createWebComponent } from "./create-web-component.js";
+SelectElement.register();
+export const Select = createWebComponent({
+    tagName: "box-select",
+    propertyNames: [
+        "label",
+        "value",
+        "options",
+        "disabled",
+        "name",
+        "invalid",
+        "errorMessage",
+        "description", "required", "hideLabel",
+    ],
+    events: [{ propName: "onValueChanged", eventName: "value-changed" }],
+    sync: (element, props) => {
+        if (props.description !== undefined)
+            element.description = props.description;
+        if (props.required !== undefined)
+            element.required = props.required;
+        if (props.hideLabel !== undefined)
+            element.hideLabel = props.hideLabel;
+        if (props.label !== undefined) {
+            element.label = props.label;
+        }
+        if (props.value !== undefined) {
+            element.value = props.value;
+        }
+        if (props.options !== undefined) {
+            element.options = props.options;
+        }
+        if (props.name !== undefined) {
+            element.name = props.name;
+        }
+        if (props.errorMessage !== undefined) {
+            element.errorMessage = props.errorMessage;
+        }
+        element.disabled = Boolean(props.disabled);
+        element.invalid = Boolean(props.invalid);
+    },
+});

package/dist/text-field.d.ts

@@ -0,0 +1,41 @@
+import { TextField as TextFieldElement } from "@unofficialbox/box-open-elements/text-field";
+import { type WebComponentProps } from "./create-web-component.js";
+import type { CustomEventHandler, ValueChangedDetail } from "./events.js";
+export type TextFieldProps = WebComponentProps & {
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    type?: "text" | "password" | "email" | "tel" | "url" | "search" | "number";
+    reveal?: boolean;
+    revealLabel?: string;
+    autocomplete?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<TextFieldElement, ValueChangedDetail>;
+};
+export declare const TextField: import("solid-js").Component<WebComponentProps & {
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    type?: "text" | "password" | "email" | "tel" | "url" | "search" | "number";
+    reveal?: boolean;
+    revealLabel?: string;
+    autocomplete?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    name?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    hideLabel?: boolean;
+    onValueChanged?: CustomEventHandler<TextFieldElement, ValueChangedDetail>;
+} & {
+    ref?: TextFieldElement | ((element: TextFieldElement) => void) | undefined;
+}>;

package/dist/text-field.js

@@ -0,0 +1,54 @@
+import { TextField as TextFieldElement } from "@unofficialbox/box-open-elements/text-field";
+import { createWebComponent } from "./create-web-component.js";
+TextFieldElement.register();
+export const TextField = createWebComponent({
+    tagName: "box-text-field",
+    propertyNames: [
+        "label",
+        "value",
+        "placeholder",
+        "type", "reveal", "revealLabel", "autocomplete",
+        "disabled",
+        "readonly",
+        "name",
+        "invalid",
+        "errorMessage",
+        "description", "required", "hideLabel",
+    ],
+    events: [{ propName: "onValueChanged", eventName: "value-changed" }],
+    sync: (element, props) => {
+        if (props.readonly !== undefined)
+            element.readonly = props.readonly;
+        if (props.description !== undefined)
+            element.description = props.description;
+        if (props.required !== undefined)
+            element.required = props.required;
+        if (props.hideLabel !== undefined)
+            element.hideLabel = props.hideLabel;
+        if (props.label !== undefined) {
+            element.label = props.label;
+        }
+        if (props.value !== undefined) {
+            element.value = props.value;
+        }
+        if (props.placeholder !== undefined) {
+            element.placeholder = props.placeholder;
+        }
+        if (props.type !== undefined)
+            element.type = props.type;
+        if (props.reveal !== undefined)
+            element.reveal = props.reveal;
+        if (props.revealLabel !== undefined)
+            element.revealLabel = props.revealLabel;
+        if (props.autocomplete !== undefined)
+            element.autocomplete = props.autocomplete;
+        if (props.name !== undefined) {
+            element.name = props.name;
+        }
+        if (props.errorMessage !== undefined) {
+            element.errorMessage = props.errorMessage;
+        }
+        element.disabled = Boolean(props.disabled);
+        element.invalid = Boolean(props.invalid);
+    },
+});

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@unofficialbox/box-open-elements-solid",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.42.3",
+  "description": "Optional native solid 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/solid"
+  },
+  "bugs": {
+    "url": "https://github.com/unofficialbox/box-open-elements/issues"
+  },
+  "keywords": [
+    "solid",
+    "web-components",
+    "design-system",
+    "box"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js"
+    },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.9.0"
+  },
+  "peerDependencies": {
+    "@unofficialbox/box-open-elements": "^0.42.3",
+    "solid-js": "^1.9.17"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "prepublishOnly": "bun run build",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}