@deepfuture/dui-components 0.0.10 → 0.0.11

package/radio/radio.js

@@ -6,10 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, LitElement, nothing } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { ContextConsumer } from "@lit/context";
+import { consume } from "@lit/context";
 import { base } from "@deepfuture/dui-core/base";
 import { radioGroupContext } from "./radio-group-context.js";
+import { fieldContext } from "@deepfuture/dui-components/field";
 /** Structural styles only — layout CSS. */
 const styles = css `
   :host {
@@ -93,16 +95,16 @@ export class DuiRadio extends LitElement {
         context: radioGroupContext,
         subscribe: true,
     });
-    #fieldCtx_accessor_storage;
-    get #fieldCtx() { return this.#fieldCtx_accessor_storage; }
-    set #fieldCtx(value) { this.#fieldCtx_accessor_storage = value; }
+    #_fieldCtx_accessor_storage;
+    get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
+    set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
     get #isChecked() {
         return this.#groupCtx.value?.value === this.value;
     }
     get #isDisabled() {
         return (this.disabled ||
             (this.#groupCtx.value?.disabled ?? false) ||
-            (this.#fieldCtx?.disabled ?? false));
+            (this._fieldCtx?.disabled ?? false));
     }
     get #isReadOnly() {
         return this.readOnly || (this.#groupCtx.value?.readOnly ?? false);
@@ -111,7 +113,7 @@ export class DuiRadio extends LitElement {
         return this.#groupCtx.value?.required ?? false;
     }
     get #isInvalid() {
-        return this.#fieldCtx?.invalid ?? false;
+        return this._fieldCtx?.invalid ?? false;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -132,8 +134,8 @@ export class DuiRadio extends LitElement {
         const ctx = this.#groupCtx.value;
         if (ctx) {
             ctx.select(this.value);
-            this.#fieldCtx?.markDirty();
-            this.#fieldCtx?.markTouched();
+            this._fieldCtx?.markDirty();
+            this._fieldCtx?.markTouched();
         }
     };
     #handleKeyDown = (e) => {
@@ -148,7 +150,7 @@ export class DuiRadio extends LitElement {
         const isReadOnly = this.#isReadOnly;
         const isRequired = this.#isRequired;
         const isInvalid = this.#isInvalid;
-        const controlId = this.#fieldCtx?.controlId ?? "";
+        const controlId = this._fieldCtx?.controlId ?? "";
         return html `
       <span
         part="root"
@@ -201,3 +203,7 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: "read-only" })
 ], DuiRadio.prototype, "readOnly", null);
+__decorate([
+    consume({ context: fieldContext, subscribe: true }),
+    state()
+], DuiRadio.prototype, "_fieldCtx", null);

package/radio/register.d.ts

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

package/radio/register.js

@@ -0,0 +1,8 @@
+import { DuiRadio } from "./radio.js";
+import { DuiRadioGroup } from "./radio-group.js";
+if (!customElements.get(DuiRadio.tagName)) {
+    customElements.define(DuiRadio.tagName, DuiRadio);
+}
+if (!customElements.get(DuiRadioGroup.tagName)) {
+    customElements.define(DuiRadioGroup.tagName, DuiRadioGroup);
+}

package/scroll-area/index.d.ts

@@ -1,3 +1 @@
-import { DuiScrollArea } from "./scroll-area.js";
-export { DuiScrollArea };
-export declare const scrollAreaFamily: (typeof DuiScrollArea)[];
+export { DuiScrollArea } from "./scroll-area.js";

package/scroll-area/index.js

@@ -1,3 +1 @@
-import { DuiScrollArea } from "./scroll-area.js";
-export { DuiScrollArea };
-export const scrollAreaFamily = [DuiScrollArea];
+export { DuiScrollArea } from "./scroll-area.js";

package/scroll-area/register.d.ts

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

package/scroll-area/register.js

@@ -0,0 +1,4 @@
+import { DuiScrollArea } from "./scroll-area.js";
+if (!customElements.get(DuiScrollArea.tagName)) {
+    customElements.define(DuiScrollArea.tagName, DuiScrollArea);
+}

package/scroll-area/scroll-area.js

@@ -198,16 +198,9 @@ export class DuiScrollArea extends LitElement {
         this.#resizeObserver.observe(viewport);
         const slot = viewport.querySelector("slot");
         if (slot) {
-            const observe = () => {
-                for (const node of slot.assignedElements()) {
-                    this.#resizeObserver.observe(node);
-                }
-            };
             slot.addEventListener("slotchange", () => {
-                observe();
                 requestAnimationFrame(() => this.#measure());
             });
-            observe();
         }
         this.#measure();
     }

package/select/index.d.ts

@@ -1,4 +1,2 @@
-import { DuiSelect } from "./select.js";
-export { DuiSelect };
+export { DuiSelect } from "./select.js";
 export type { SelectOption } from "./select.js";
-export declare const selectFamily: (typeof DuiSelect)[];

package/select/index.js

@@ -1,3 +1 @@
-import { DuiSelect } from "./select.js";
-export { DuiSelect };
-export const selectFamily = [DuiSelect];
+export { DuiSelect } from "./select.js";

package/select/register.d.ts

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

package/select/register.js

@@ -0,0 +1,4 @@
+import { DuiSelect } from "./select.js";
+if (!customElements.get(DuiSelect.tagName)) {
+    customElements.define(DuiSelect.tagName, DuiSelect);
+}

package/select/select.d.ts

@@ -1,5 +1,6 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/select */
 import { LitElement, type TemplateResult } from "lit";
+import { type FieldContext } from "../field/field-context.js";
 export type SelectOption = {
     label: string;
     value: string;
@@ -32,5 +33,6 @@ export declare class DuiSelect extends LitElement {
     accessor disabled: boolean;
     /** Name for form submission. */
     accessor name: string;
+    accessor _fieldCtx: FieldContext;
     render(): TemplateResult;
 }

package/select/select.js

@@ -6,11 +6,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, LitElement, nothing } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
+import { consume } from "@lit/context";
 import { base } from "@deepfuture/dui-core/base";
 import { customEvent } from "@deepfuture/dui-core/event";
 import { FloatingPortalController } from "@deepfuture/dui-core/floating-portal-controller";
+import { fieldContext } from "../field/field-context.js";
 export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
 /** Structural styles only — layout CSS. */
 const hostStyles = css `
@@ -115,9 +117,9 @@ export class DuiSelect extends LitElement {
     /** Name for form submission. */
     get name() { return this.#name_accessor_storage; }
     set name(value) { this.#name_accessor_storage = value; }
-    #ctx_accessor_storage;
-    get #ctx() { return this.#ctx_accessor_storage; }
-    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    #_fieldCtx_accessor_storage;
+    get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
+    set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
     #highlightedIndex_accessor_storage = -1;
     get #highlightedIndex() { return this.#highlightedIndex_accessor_storage; }
     set #highlightedIndex(value) { this.#highlightedIndex_accessor_storage = value; }
@@ -131,7 +133,7 @@ export class DuiSelect extends LitElement {
         },
         onClose: () => {
             this.#highlightedIndex = -1;
-            this.#ctx?.markTouched();
+            this._fieldCtx?.markTouched();
         },
         renderPopup: (portal) => {
             return html `
@@ -144,7 +146,7 @@ export class DuiSelect extends LitElement {
             class="Listbox"
             id="${this.#listboxId}"
             role="listbox"
-            aria-labelledby="${this.#ctx?.labelId ?? ""}"
+            aria-labelledby="${this._fieldCtx?.labelId ?? ""}"
             @mousedown="${this.#onListMouseDown}"
           >
             ${repeat(this.options, (option) => option.value, this.#renderItem)}
@@ -155,10 +157,10 @@ export class DuiSelect extends LitElement {
     });
     // ---- Computed ----
     get #isDisabled() {
-        return this.disabled || (this.#ctx?.disabled ?? false);
+        return this.disabled || (this._fieldCtx?.disabled ?? false);
     }
     get #isInvalid() {
-        return this.#ctx?.invalid ?? false;
+        return this._fieldCtx?.invalid ?? false;
     }
     get #selectedOption() {
         return this.options.find((o) => o.value === this.value);
@@ -265,8 +267,8 @@ export class DuiSelect extends LitElement {
     // ---- Selection ----
     #selectOption(option) {
         this.value = option.value;
-        this.#ctx?.markDirty();
-        this.#ctx?.setFilled(this.value.length > 0);
+        this._fieldCtx?.markDirty();
+        this._fieldCtx?.setFilled(this.value.length > 0);
         this.dispatchEvent(valueChangeEvent({ value: option.value, option }));
         this.#popup.close();
         this.#focusTrigger();
@@ -325,15 +327,15 @@ export class DuiSelect extends LitElement {
         aria-activedescendant="${this.#highlightedIndex >= 0
             ? `${this.#listboxId}-option-${this.#highlightedIndex}`
             : nothing}"
-        aria-labelledby="${this.#ctx?.labelId ?? ""}"
+        aria-labelledby="${this._fieldCtx?.labelId ?? ""}"
         aria-invalid="${this.#isInvalid}"
         ?data-disabled="${this.#isDisabled}"
         ?data-invalid="${this.#isInvalid}"
         ?data-open="${this.#popup.isOpen}"
         @click="${this.#onTriggerClick}"
         @keydown="${this.#onTriggerKeyDown}"
-        @focus="${() => this.#ctx?.setFocused(true)}"
-        @blur="${() => this.#ctx?.setFocused(false)}"
+        @focus="${() => this._fieldCtx?.setFocused(true)}"
+        @blur="${() => this._fieldCtx?.setFocused(false)}"
       >
         <span
           class="Value"
@@ -368,3 +370,7 @@ __decorate([
 __decorate([
     property({ type: String })
 ], DuiSelect.prototype, "name", null);
+__decorate([
+    consume({ context: fieldContext, subscribe: true }),
+    state()
+], DuiSelect.prototype, "_fieldCtx", null);

package/separator/index.d.ts

@@ -1,3 +1 @@
-import { DuiSeparator } from "./separator.js";
-export { DuiSeparator };
-export declare const separatorFamily: (typeof DuiSeparator)[];
+export { DuiSeparator } from "./separator.js";

package/separator/index.js

@@ -1,3 +1 @@
-import { DuiSeparator } from "./separator.js";
-export { DuiSeparator };
-export const separatorFamily = [DuiSeparator];
+export { DuiSeparator } from "./separator.js";

package/separator/register.d.ts

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

package/separator/register.js

@@ -0,0 +1,4 @@
+import { DuiSeparator } from "./index.js";
+if (!customElements.get(DuiSeparator.tagName)) {
+    customElements.define(DuiSeparator.tagName, DuiSeparator);
+}

package/sidebar/index.d.ts

@@ -1,29 +1,15 @@
-import { DuiSidebarProvider, openChangeEvent } from "./sidebar-provider.js";
-export { DuiSidebarProvider, openChangeEvent };
+export { DuiSidebarProvider, openChangeEvent } from "./sidebar-provider.js";
 export type { SidebarOpenChangeDetail } from "./sidebar-provider.js";
-import { DuiSidebar } from "./sidebar.js";
-export { DuiSidebar };
-import { DuiSidebarTrigger } from "./sidebar-trigger.js";
-export { DuiSidebarTrigger };
-import { DuiSidebarContent } from "./sidebar-content.js";
-export { DuiSidebarContent };
-import { DuiSidebarHeader } from "./sidebar-header.js";
-export { DuiSidebarHeader };
-import { DuiSidebarFooter } from "./sidebar-footer.js";
-export { DuiSidebarFooter };
-import { DuiSidebarGroup } from "./sidebar-group.js";
-export { DuiSidebarGroup };
-import { DuiSidebarGroupLabel } from "./sidebar-group-label.js";
-export { DuiSidebarGroupLabel };
-import { DuiSidebarMenu } from "./sidebar-menu.js";
-export { DuiSidebarMenu };
-import { DuiSidebarMenuItem } from "./sidebar-menu-item.js";
-export { DuiSidebarMenuItem };
-import { DuiSidebarMenuButton } from "./sidebar-menu-button.js";
-export { DuiSidebarMenuButton };
-import { DuiSidebarSeparator } from "./sidebar-separator.js";
-export { DuiSidebarSeparator };
-import { DuiSidebarInset } from "./sidebar-inset.js";
-export { DuiSidebarInset };
+export { DuiSidebar } from "./sidebar.js";
+export { DuiSidebarTrigger } from "./sidebar-trigger.js";
+export { DuiSidebarContent } from "./sidebar-content.js";
+export { DuiSidebarHeader } from "./sidebar-header.js";
+export { DuiSidebarFooter } from "./sidebar-footer.js";
+export { DuiSidebarGroup } from "./sidebar-group.js";
+export { DuiSidebarGroupLabel } from "./sidebar-group-label.js";
+export { DuiSidebarMenu } from "./sidebar-menu.js";
+export { DuiSidebarMenuItem } from "./sidebar-menu-item.js";
+export { DuiSidebarMenuButton } from "./sidebar-menu-button.js";
+export { DuiSidebarSeparator } from "./sidebar-separator.js";
+export { DuiSidebarInset } from "./sidebar-inset.js";
 export type { SidebarContext } from "./sidebar-context.js";
-export declare const sidebarFamily: (typeof DuiSidebarProvider | typeof DuiSidebar | typeof DuiSidebarTrigger | typeof DuiSidebarContent | typeof DuiSidebarHeader | typeof DuiSidebarFooter | typeof DuiSidebarGroup | typeof DuiSidebarGroupLabel | typeof DuiSidebarMenu | typeof DuiSidebarMenuItem | typeof DuiSidebarMenuButton | typeof DuiSidebarSeparator | typeof DuiSidebarInset)[];

package/sidebar/index.js

@@ -1,32 +1,13 @@
-import { DuiSidebarProvider, openChangeEvent } from "./sidebar-provider.js";
-export { DuiSidebarProvider, openChangeEvent };
-import { DuiSidebar } from "./sidebar.js";
-export { DuiSidebar };
-import { DuiSidebarTrigger } from "./sidebar-trigger.js";
-export { DuiSidebarTrigger };
-import { DuiSidebarContent } from "./sidebar-content.js";
-export { DuiSidebarContent };
-import { DuiSidebarHeader } from "./sidebar-header.js";
-export { DuiSidebarHeader };
-import { DuiSidebarFooter } from "./sidebar-footer.js";
-export { DuiSidebarFooter };
-import { DuiSidebarGroup } from "./sidebar-group.js";
-export { DuiSidebarGroup };
-import { DuiSidebarGroupLabel } from "./sidebar-group-label.js";
-export { DuiSidebarGroupLabel };
-import { DuiSidebarMenu } from "./sidebar-menu.js";
-export { DuiSidebarMenu };
-import { DuiSidebarMenuItem } from "./sidebar-menu-item.js";
-export { DuiSidebarMenuItem };
-import { DuiSidebarMenuButton } from "./sidebar-menu-button.js";
-export { DuiSidebarMenuButton };
-import { DuiSidebarSeparator } from "./sidebar-separator.js";
-export { DuiSidebarSeparator };
-import { DuiSidebarInset } from "./sidebar-inset.js";
-export { DuiSidebarInset };
-export const sidebarFamily = [
-    DuiSidebarProvider, DuiSidebar, DuiSidebarTrigger, DuiSidebarContent,
-    DuiSidebarHeader, DuiSidebarFooter, DuiSidebarGroup, DuiSidebarGroupLabel,
-    DuiSidebarMenu, DuiSidebarMenuItem, DuiSidebarMenuButton,
-    DuiSidebarSeparator, DuiSidebarInset,
-];
+export { DuiSidebarProvider, openChangeEvent } from "./sidebar-provider.js";
+export { DuiSidebar } from "./sidebar.js";
+export { DuiSidebarTrigger } from "./sidebar-trigger.js";
+export { DuiSidebarContent } from "./sidebar-content.js";
+export { DuiSidebarHeader } from "./sidebar-header.js";
+export { DuiSidebarFooter } from "./sidebar-footer.js";
+export { DuiSidebarGroup } from "./sidebar-group.js";
+export { DuiSidebarGroupLabel } from "./sidebar-group-label.js";
+export { DuiSidebarMenu } from "./sidebar-menu.js";
+export { DuiSidebarMenuItem } from "./sidebar-menu-item.js";
+export { DuiSidebarMenuButton } from "./sidebar-menu-button.js";
+export { DuiSidebarSeparator } from "./sidebar-separator.js";
+export { DuiSidebarInset } from "./sidebar-inset.js";

package/sidebar/register.d.ts

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

package/sidebar/register.js

@@ -0,0 +1,52 @@
+import { DuiSidebarProvider } from "./sidebar-provider.js";
+import { DuiSidebar } from "./sidebar.js";
+import { DuiSidebarTrigger } from "./sidebar-trigger.js";
+import { DuiSidebarContent } from "./sidebar-content.js";
+import { DuiSidebarHeader } from "./sidebar-header.js";
+import { DuiSidebarFooter } from "./sidebar-footer.js";
+import { DuiSidebarGroup } from "./sidebar-group.js";
+import { DuiSidebarGroupLabel } from "./sidebar-group-label.js";
+import { DuiSidebarMenu } from "./sidebar-menu.js";
+import { DuiSidebarMenuItem } from "./sidebar-menu-item.js";
+import { DuiSidebarMenuButton } from "./sidebar-menu-button.js";
+import { DuiSidebarSeparator } from "./sidebar-separator.js";
+import { DuiSidebarInset } from "./sidebar-inset.js";
+if (!customElements.get(DuiSidebarProvider.tagName)) {
+    customElements.define(DuiSidebarProvider.tagName, DuiSidebarProvider);
+}
+if (!customElements.get(DuiSidebar.tagName)) {
+    customElements.define(DuiSidebar.tagName, DuiSidebar);
+}
+if (!customElements.get(DuiSidebarTrigger.tagName)) {
+    customElements.define(DuiSidebarTrigger.tagName, DuiSidebarTrigger);
+}
+if (!customElements.get(DuiSidebarContent.tagName)) {
+    customElements.define(DuiSidebarContent.tagName, DuiSidebarContent);
+}
+if (!customElements.get(DuiSidebarHeader.tagName)) {
+    customElements.define(DuiSidebarHeader.tagName, DuiSidebarHeader);
+}
+if (!customElements.get(DuiSidebarFooter.tagName)) {
+    customElements.define(DuiSidebarFooter.tagName, DuiSidebarFooter);
+}
+if (!customElements.get(DuiSidebarGroup.tagName)) {
+    customElements.define(DuiSidebarGroup.tagName, DuiSidebarGroup);
+}
+if (!customElements.get(DuiSidebarGroupLabel.tagName)) {
+    customElements.define(DuiSidebarGroupLabel.tagName, DuiSidebarGroupLabel);
+}
+if (!customElements.get(DuiSidebarMenu.tagName)) {
+    customElements.define(DuiSidebarMenu.tagName, DuiSidebarMenu);
+}
+if (!customElements.get(DuiSidebarMenuItem.tagName)) {
+    customElements.define(DuiSidebarMenuItem.tagName, DuiSidebarMenuItem);
+}
+if (!customElements.get(DuiSidebarMenuButton.tagName)) {
+    customElements.define(DuiSidebarMenuButton.tagName, DuiSidebarMenuButton);
+}
+if (!customElements.get(DuiSidebarSeparator.tagName)) {
+    customElements.define(DuiSidebarSeparator.tagName, DuiSidebarSeparator);
+}
+if (!customElements.get(DuiSidebarInset.tagName)) {
+    customElements.define(DuiSidebarInset.tagName, DuiSidebarInset);
+}

package/sidebar/sidebar-provider.d.ts

@@ -1,5 +1,6 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
 import { LitElement, type TemplateResult } from "lit";
+import { type SidebarContext } from "./sidebar-context.js";
 export type SidebarOpenChangeDetail = {
     open: boolean;
 };
@@ -27,6 +28,7 @@ export declare class DuiSidebarProvider extends LitElement {
     accessor variant: string;
     /** How the sidebar collapses. */
     accessor collapsible: "offcanvas" | "icon" | "none";
+    accessor _ctx: SidebarContext;
     connectedCallback(): void;
     disconnectedCallback(): void;
     willUpdate(): void;

package/sidebar/sidebar-provider.js

@@ -6,9 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, LitElement } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
+import { provide } from "@lit/context";
 import { base } from "@deepfuture/dui-core/base";
 import { customEvent } from "@deepfuture/dui-core/event";
+import { sidebarContext } from "./sidebar-context.js";
 export const openChangeEvent = customEvent("open-change", { bubbles: true, composed: true });
 const styles = css `
   :host {
@@ -95,9 +97,9 @@ export class DuiSidebarProvider extends LitElement {
             this.#toggleSidebar();
         }
     };
-    #ctx_accessor_storage = this.#buildContext();
-    get #ctx() { return this.#ctx_accessor_storage; }
-    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    #_ctx_accessor_storage = this.#buildContext();
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
     #buildContext() {
         return {
             state: this.#isOpen ? "expanded" : "collapsed",
@@ -122,7 +124,7 @@ export class DuiSidebarProvider extends LitElement {
         this.#mediaQuery.addEventListener("change", this.#boundOnMediaChange);
         this.#boundOnKeyDown = this.#onKeyDown.bind(this);
         document.addEventListener("keydown", this.#boundOnKeyDown);
-        this.#ctx = this.#buildContext();
+        this._ctx = this.#buildContext();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -134,7 +136,7 @@ export class DuiSidebarProvider extends LitElement {
         }
     }
     willUpdate() {
-        this.#ctx = this.#buildContext();
+        this._ctx = this.#buildContext();
     }
     render() {
         return html `<slot></slot>`;
@@ -155,3 +157,7 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], DuiSidebarProvider.prototype, "collapsible", null);
+__decorate([
+    provide({ context: sidebarContext }),
+    state()
+], DuiSidebarProvider.prototype, "_ctx", null);

package/slider/index.d.ts

@@ -1,3 +1 @@
-import { DuiSlider, valueChangeEvent, valueCommittedEvent } from "./slider.js";
-export { DuiSlider, valueChangeEvent, valueCommittedEvent };
-export declare const sliderFamily: (typeof DuiSlider)[];
+export { DuiSlider, valueChangeEvent, valueCommittedEvent } from "./slider.js";

package/slider/index.js

@@ -1,3 +1 @@
-import { DuiSlider, valueChangeEvent, valueCommittedEvent } from "./slider.js";
-export { DuiSlider, valueChangeEvent, valueCommittedEvent };
-export const sliderFamily = [DuiSlider];
+export { DuiSlider, valueChangeEvent, valueCommittedEvent } from "./slider.js";

package/slider/register.d.ts

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

package/slider/register.js

@@ -0,0 +1,4 @@
+import { DuiSlider } from "./slider.js";
+if (!customElements.get(DuiSlider.tagName)) {
+    customElements.define(DuiSlider.tagName, DuiSlider);
+}

package/spinner/index.d.ts

@@ -1,3 +1 @@
-import { DuiSpinner } from "./spinner.js";
-export { DuiSpinner };
-export declare const spinnerFamily: (typeof DuiSpinner)[];
+export { DuiSpinner } from "./spinner.js";

package/spinner/index.js

@@ -1,3 +1 @@
-import { DuiSpinner } from "./spinner.js";
-export { DuiSpinner };
-export const spinnerFamily = [DuiSpinner];
+export { DuiSpinner } from "./spinner.js";

package/spinner/register.d.ts

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

package/spinner/register.js

@@ -0,0 +1,4 @@
+import { DuiSpinner } from "./spinner.js";
+if (!customElements.get(DuiSpinner.tagName)) {
+    customElements.define(DuiSpinner.tagName, DuiSpinner);
+}

package/switch/index.d.ts

@@ -1,3 +1 @@
-import { DuiSwitch, checkedChangeEvent } from "./switch.js";
-export { DuiSwitch, checkedChangeEvent };
-export declare const switchFamily: (typeof DuiSwitch)[];
+export { DuiSwitch, checkedChangeEvent } from "./switch.js";

package/switch/index.js

@@ -1,3 +1 @@
-import { DuiSwitch, checkedChangeEvent } from "./switch.js";
-export { DuiSwitch, checkedChangeEvent };
-export const switchFamily = [DuiSwitch];
+export { DuiSwitch, checkedChangeEvent } from "./switch.js";

package/switch/register.d.ts

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

package/switch/register.js

@@ -0,0 +1,4 @@
+import { DuiSwitch } from "./index.js";
+if (!customElements.get(DuiSwitch.tagName)) {
+    customElements.define(DuiSwitch.tagName, DuiSwitch);
+}

package/switch/switch.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, type TemplateResult } from "lit";
+import { type FieldContext } from "../field/field-context.js";
 export declare const checkedChangeEvent: (detail: {
     checked: boolean;
 }) => CustomEvent<{
@@ -23,6 +24,7 @@ export declare class DuiSwitch extends LitElement {
     accessor name: string | undefined;
     accessor value: string;
     accessor uncheckedValue: string;
+    accessor _fieldCtx: FieldContext;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): TemplateResult;

package/switch/switch.js

@@ -5,9 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, LitElement, nothing } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
+import { consume } from "@lit/context";
 import { base } from "@deepfuture/dui-core/base";
 import { customEvent } from "@deepfuture/dui-core/event";
+import { fieldContext } from "../field/field-context.js";
 export const checkedChangeEvent = customEvent("checked-change", { bubbles: true, composed: true });
 /** Structural styles only — layout and behavioral CSS. */
 const styles = css `
@@ -89,17 +91,17 @@ export class DuiSwitch extends LitElement {
     #internalChecked_accessor_storage = false;
     get #internalChecked() { return this.#internalChecked_accessor_storage; }
     set #internalChecked(value) { this.#internalChecked_accessor_storage = value; }
-    #fieldCtx_accessor_storage;
-    get #fieldCtx() { return this.#fieldCtx_accessor_storage; }
-    set #fieldCtx(value) { this.#fieldCtx_accessor_storage = value; }
+    #_fieldCtx_accessor_storage;
+    get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
+    set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
     get #isChecked() {
         return this.checked ?? this.#internalChecked;
     }
     get #isDisabled() {
-        return this.disabled || (this.#fieldCtx?.disabled ?? false);
+        return this.disabled || (this._fieldCtx?.disabled ?? false);
     }
     get #isInvalid() {
-        return this.#fieldCtx?.invalid ?? false;
+        return this._fieldCtx?.invalid ?? false;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -122,8 +124,8 @@ export class DuiSwitch extends LitElement {
         if (this.checked === undefined) {
             this.#internalChecked = newChecked;
         }
-        this.#fieldCtx?.markDirty();
-        this.#fieldCtx?.markTouched();
+        this._fieldCtx?.markDirty();
+        this._fieldCtx?.markTouched();
         this.dispatchEvent(checkedChangeEvent({ checked: newChecked }));
     };
     #handleKeyDown = (e) => {
@@ -136,7 +138,7 @@ export class DuiSwitch extends LitElement {
         const isChecked = this.#isChecked;
         const isDisabled = this.#isDisabled;
         const isInvalid = this.#isInvalid;
-        const controlId = this.#fieldCtx?.controlId ?? "";
+        const controlId = this._fieldCtx?.controlId ?? "";
         return html `
       <span
         part="root"
@@ -197,3 +199,7 @@ __decorate([
 __decorate([
     property({ attribute: "unchecked-value" })
 ], DuiSwitch.prototype, "uncheckedValue", null);
+__decorate([
+    consume({ context: fieldContext, subscribe: true }),
+    state()
+], DuiSwitch.prototype, "_fieldCtx", null);