@deepfuture/dui-components 0.0.9 → 0.0.11

package/all.js

@@ -4,188 +4,176 @@
  *
  * @example
  * ```ts
- * import { applyTheme } from "@deepfuture/dui-core/apply-theme";
+ * import { applyTheme } from "@deepfuture/dui-core";
  * import { defaultTheme } from "@deepfuture/dui-theme-default";
  * import { allComponents } from "@deepfuture/dui-components/all";
  *
  * applyTheme({ theme: defaultTheme, components: allComponents });
  * ```
  */
-// --- Component families (used to build allComponents) ---
-import { accordionFamily } from "./accordion/index.js";
-import { alertDialogFamily } from "./alert-dialog/index.js";
-import { avatarFamily } from "./avatar/index.js";
-import { badgeFamily } from "./badge/index.js";
-import { breadcrumbFamily } from "./breadcrumb/index.js";
-import { buttonFamily } from "./button/index.js";
-import { calendarFamily } from "./calendar/index.js";
-import { centerFamily } from "./center/index.js";
-import { checkboxFamily } from "./checkbox/index.js";
-import { collapsibleFamily } from "./collapsible/index.js";
-import { comboboxFamily } from "./combobox/index.js";
-import { commandFamily } from "./command/index.js";
-import { dataTableFamily } from "./data-table/index.js";
-import { dialogFamily } from "./dialog/index.js";
-import { dropzoneFamily } from "./dropzone/index.js";
-import { hstackFamily } from "./hstack/index.js";
-import { iconFamily } from "./icon/index.js";
-import { inputFamily } from "./input/index.js";
-import { linkFamily } from "./link/index.js";
-import { menuFamily } from "./menu/index.js";
-import { menubarFamily } from "./menubar/index.js";
-import { numberFieldFamily } from "./number-field/index.js";
-import { pageInsetFamily } from "./page-inset/index.js";
-import { popoverFamily } from "./popover/index.js";
-import { portalFamily } from "./portal/index.js";
-import { previewCardFamily } from "./preview-card/index.js";
-import { progressFamily } from "./progress/index.js";
-import { radioFamily } from "./radio/index.js";
-import { scrollAreaFamily } from "./scroll-area/index.js";
-import { selectFamily } from "./select/index.js";
-import { separatorFamily } from "./separator/index.js";
-import { sidebarFamily } from "./sidebar/index.js";
-import { sliderFamily } from "./slider/index.js";
-import { spinnerFamily } from "./spinner/index.js";
-import { switchFamily } from "./switch/index.js";
-import { tabsFamily } from "./tabs/index.js";
-import { textareaFamily } from "./textarea/index.js";
-import { toggleFamily } from "./toggle/index.js";
-import { toolbarFamily } from "./toolbar/index.js";
-import { tooltipFamily } from "./tooltip/index.js";
-import { truncFamily } from "./trunc/index.js";
-import { vstackFamily } from "./vstack/index.js";
-// --- Re-export all families ---
-export { accordionFamily, alertDialogFamily, avatarFamily, badgeFamily, breadcrumbFamily, buttonFamily, calendarFamily, centerFamily, checkboxFamily, collapsibleFamily, comboboxFamily, commandFamily, dataTableFamily, dialogFamily, dropzoneFamily, hstackFamily, iconFamily, inputFamily, linkFamily, menuFamily, menubarFamily, numberFieldFamily, pageInsetFamily, popoverFamily, portalFamily, previewCardFamily, progressFamily, radioFamily, scrollAreaFamily, selectFamily, separatorFamily, sidebarFamily, sliderFamily, spinnerFamily, switchFamily, tabsFamily, textareaFamily, toggleFamily, toolbarFamily, tooltipFamily, truncFamily, vstackFamily, };
-// --- Re-export component classes and types (explicit to avoid name collisions) ---
-// Accordion
+// --- Accordion ---
 export { DuiAccordion, DuiAccordionItem } from "./accordion/index.js";
-// Alert Dialog
-export { DuiAlertDialog, DuiAlertDialogTrigger, DuiAlertDialogPopup, DuiAlertDialogClose } from "./alert-dialog/index.js";
-// Avatar
+// --- Alert Dialog ---
+export { DuiAlertDialog, DuiAlertDialogTrigger, DuiAlertDialogPopup, DuiAlertDialogClose, } from "./alert-dialog/index.js";
+// --- Avatar ---
 export { DuiAvatar } from "./avatar/index.js";
-// Badge
+// --- Badge ---
 export { DuiBadge } from "./badge/index.js";
-// Breadcrumb
-export { DuiBreadcrumb, DuiBreadcrumbItem, DuiBreadcrumbLink, DuiBreadcrumbPage, DuiBreadcrumbSeparator, DuiBreadcrumbEllipsis } from "./breadcrumb/index.js";
-// Button
+// --- Breadcrumb ---
+export { DuiBreadcrumb, DuiBreadcrumbItem, DuiBreadcrumbLink, DuiBreadcrumbPage, DuiBreadcrumbSeparator, DuiBreadcrumbEllipsis, } from "./breadcrumb/index.js";
+// --- Button ---
 export { DuiButton } from "./button/index.js";
-// Calendar
+// --- Calendar ---
 export { DuiCalendar } from "./calendar/index.js";
-// Center
-export { DuiCenter } from "./center/index.js";
-// Checkbox
+// --- Checkbox ---
 export { DuiCheckbox, DuiCheckboxGroup } from "./checkbox/index.js";
-// Collapsible
+// --- Collapsible ---
 export { DuiCollapsible } from "./collapsible/index.js";
-// Combobox
+// --- Combobox ---
 export { DuiCombobox } from "./combobox/index.js";
-// Command
-export { DuiCommand, DuiCommandInput, DuiCommandList, DuiCommandGroup, DuiCommandItem, DuiCommandEmpty, DuiCommandSeparator, DuiCommandShortcut } from "./command/index.js";
-// Data Table
+// --- Command ---
+export { DuiCommand, DuiCommandInput, DuiCommandList, DuiCommandGroup, DuiCommandItem, DuiCommandEmpty, DuiCommandSeparator, DuiCommandShortcut, } from "./command/index.js";
+// --- Data Table ---
 export { DuiDataTable } from "./data-table/index.js";
-// Dialog
-export { DuiDialog, DuiDialogTrigger, DuiDialogPopup, DuiDialogClose } from "./dialog/index.js";
-// Dropzone
+// --- Dialog ---
+export { DuiDialog, DuiDialogTrigger, DuiDialogPopup, DuiDialogClose, } from "./dialog/index.js";
+// --- Dropzone ---
 export { DuiDropzone } from "./dropzone/index.js";
-// HStack
-export { DuiHstack } from "./hstack/index.js";
-// Icon
+// --- Icon ---
 export { DuiIcon } from "./icon/index.js";
-// Input
+// --- Input ---
 export { DuiInput } from "./input/index.js";
-// Link
+// --- Link ---
 export { DuiLink } from "./link/index.js";
-// Menu
+// --- Menu ---
 export { DuiMenu, DuiMenuItem } from "./menu/index.js";
-// Menubar
+// --- Menubar ---
 export { DuiMenubar } from "./menubar/index.js";
-// Number Field
+// --- Number Field ---
 export { DuiNumberField } from "./number-field/index.js";
-// Page Inset
-export { DuiPageInset } from "./page-inset/index.js";
-// Popover
-export { DuiPopover, DuiPopoverTrigger, DuiPopoverPopup, DuiPopoverClose } from "./popover/index.js";
-// Portal
+// --- Popover ---
+export { DuiPopover, DuiPopoverTrigger, DuiPopoverPopup, DuiPopoverClose, } from "./popover/index.js";
+// --- Portal ---
 export { DuiPortal } from "./portal/index.js";
-// Preview Card
-export { DuiPreviewCard, DuiPreviewCardTrigger, DuiPreviewCardPopup } from "./preview-card/index.js";
-// Progress
+// --- Preview Card ---
+export { DuiPreviewCard, DuiPreviewCardTrigger, DuiPreviewCardPopup, } from "./preview-card/index.js";
+// --- Progress ---
 export { DuiProgress } from "./progress/index.js";
-// Radio
+// --- Radio ---
 export { DuiRadio, DuiRadioGroup } from "./radio/index.js";
-// Scroll Area
+// --- Scroll Area ---
 export { DuiScrollArea } from "./scroll-area/index.js";
-// Select
+// --- Select ---
 export { DuiSelect } from "./select/index.js";
-// Separator
+// --- Separator ---
 export { DuiSeparator } from "./separator/index.js";
-// Sidebar
-export { DuiSidebarProvider, DuiSidebar, DuiSidebarTrigger, DuiSidebarContent, DuiSidebarHeader, DuiSidebarFooter, DuiSidebarGroup, DuiSidebarGroupLabel, DuiSidebarMenu, DuiSidebarMenuItem, DuiSidebarMenuButton, DuiSidebarSeparator, DuiSidebarInset } from "./sidebar/index.js";
-// Slider
+// --- Sidebar ---
+export { DuiSidebarProvider, DuiSidebar, DuiSidebarTrigger, DuiSidebarContent, DuiSidebarHeader, DuiSidebarFooter, DuiSidebarGroup, DuiSidebarGroupLabel, DuiSidebarMenu, DuiSidebarMenuItem, DuiSidebarMenuButton, DuiSidebarSeparator, DuiSidebarInset, } from "./sidebar/index.js";
+// --- Slider ---
 export { DuiSlider } from "./slider/index.js";
-// Spinner
+// --- Spinner ---
 export { DuiSpinner } from "./spinner/index.js";
-// Switch
+// --- Switch ---
 export { DuiSwitch } from "./switch/index.js";
-// Tabs
-export { DuiTabs, DuiTabsList, DuiTab, DuiTabsPanel, DuiTabsIndicator } from "./tabs/index.js";
-// Textarea
+// --- Tabs ---
+export { DuiTabs, DuiTabsList, DuiTab, DuiTabsPanel, DuiTabsIndicator, } from "./tabs/index.js";
+// --- Textarea ---
 export { DuiTextarea } from "./textarea/index.js";
-// Toggle
+// --- Toggle ---
 export { DuiToggle, DuiToggleGroup } from "./toggle/index.js";
-// Toolbar
+// --- Toolbar ---
 export { DuiToolbar } from "./toolbar/index.js";
-// Tooltip
-export { DuiTooltip, DuiTooltipTrigger, DuiTooltipPopup } from "./tooltip/index.js";
-// Trunc
+// --- Tooltip ---
+export { DuiTooltip, DuiTooltipTrigger, DuiTooltipPopup, } from "./tooltip/index.js";
+// --- Trunc ---
 export { DuiTrunc } from "./trunc/index.js";
-// VStack
-export { DuiVstack } from "./vstack/index.js";
 /**
  * All DUI component classes, ready for `applyTheme()`.
  * Includes every component and sub-component.
  */
 export const allComponents = [
-    ...accordionFamily,
-    ...alertDialogFamily,
-    ...avatarFamily,
-    ...badgeFamily,
-    ...breadcrumbFamily,
-    ...buttonFamily,
-    ...calendarFamily,
-    ...centerFamily,
-    ...checkboxFamily,
-    ...collapsibleFamily,
-    ...comboboxFamily,
-    ...commandFamily,
-    ...dataTableFamily,
-    ...dialogFamily,
-    ...dropzoneFamily,
-    ...hstackFamily,
-    ...iconFamily,
-    ...inputFamily,
-    ...linkFamily,
-    ...menuFamily,
-    ...menubarFamily,
-    ...numberFieldFamily,
-    ...pageInsetFamily,
-    ...popoverFamily,
-    ...portalFamily,
-    ...previewCardFamily,
-    ...progressFamily,
-    ...radioFamily,
-    ...scrollAreaFamily,
-    ...selectFamily,
-    ...separatorFamily,
-    ...sidebarFamily,
-    ...sliderFamily,
-    ...spinnerFamily,
-    ...switchFamily,
-    ...tabsFamily,
-    ...textareaFamily,
-    ...toggleFamily,
-    ...toolbarFamily,
-    ...tooltipFamily,
-    ...truncFamily,
-    ...vstackFamily,
+    DuiAccordion,
+    DuiAccordionItem,
+    DuiAlertDialog,
+    DuiAlertDialogTrigger,
+    DuiAlertDialogPopup,
+    DuiAlertDialogClose,
+    DuiAvatar,
+    DuiBadge,
+    DuiBreadcrumb,
+    DuiBreadcrumbItem,
+    DuiBreadcrumbLink,
+    DuiBreadcrumbPage,
+    DuiBreadcrumbSeparator,
+    DuiBreadcrumbEllipsis,
+    DuiButton,
+    DuiCalendar,
+    DuiCheckbox,
+    DuiCheckboxGroup,
+    DuiCollapsible,
+    DuiCombobox,
+    DuiCommand,
+    DuiCommandInput,
+    DuiCommandList,
+    DuiCommandGroup,
+    DuiCommandItem,
+    DuiCommandEmpty,
+    DuiCommandSeparator,
+    DuiCommandShortcut,
+    DuiDataTable,
+    DuiDialog,
+    DuiDialogTrigger,
+    DuiDialogPopup,
+    DuiDialogClose,
+    DuiDropzone,
+    DuiIcon,
+    DuiInput,
+    DuiLink,
+    DuiMenu,
+    DuiMenuItem,
+    DuiMenubar,
+    DuiNumberField,
+    DuiPopover,
+    DuiPopoverTrigger,
+    DuiPopoverPopup,
+    DuiPopoverClose,
+    DuiPortal,
+    DuiPreviewCard,
+    DuiPreviewCardTrigger,
+    DuiPreviewCardPopup,
+    DuiProgress,
+    DuiRadio,
+    DuiRadioGroup,
+    DuiScrollArea,
+    DuiSelect,
+    DuiSeparator,
+    DuiSidebarProvider,
+    DuiSidebar,
+    DuiSidebarTrigger,
+    DuiSidebarContent,
+    DuiSidebarHeader,
+    DuiSidebarFooter,
+    DuiSidebarGroup,
+    DuiSidebarGroupLabel,
+    DuiSidebarMenu,
+    DuiSidebarMenuItem,
+    DuiSidebarMenuButton,
+    DuiSidebarSeparator,
+    DuiSidebarInset,
+    DuiSlider,
+    DuiSpinner,
+    DuiSwitch,
+    DuiTabs,
+    DuiTabsList,
+    DuiTab,
+    DuiTabsPanel,
+    DuiTabsIndicator,
+    DuiTextarea,
+    DuiToggle,
+    DuiToggleGroup,
+    DuiToolbar,
+    DuiTooltip,
+    DuiTooltipTrigger,
+    DuiTooltipPopup,
+    DuiTrunc,
 ];

package/avatar/index.d.ts

@@ -1,4 +1,2 @@
-import { DuiAvatar, loadingStatusChangeEvent } from "./avatar.js";
-export { DuiAvatar, loadingStatusChangeEvent };
+export { DuiAvatar, loadingStatusChangeEvent } from "./avatar.js";
 export type { ImageStatus } from "./avatar.js";
-export declare const avatarFamily: (typeof DuiAvatar)[];

package/avatar/index.js

@@ -1,3 +1 @@
-import { DuiAvatar, loadingStatusChangeEvent } from "./avatar.js";
-export { DuiAvatar, loadingStatusChangeEvent };
-export const avatarFamily = [DuiAvatar];
+export { DuiAvatar, loadingStatusChangeEvent } from "./avatar.js";

package/avatar/register.d.ts

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

package/avatar/register.js

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

package/badge/index.d.ts

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

package/badge/index.js

@@ -1,3 +1 @@
-import { DuiBadge } from "./badge.js";
-export { DuiBadge };
-export const badgeFamily = [DuiBadge];
+export { DuiBadge } from "./badge.js";

package/badge/register.d.ts

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

package/badge/register.js

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

package/breadcrumb/index.d.ts

@@ -1,13 +1,6 @@
-import { DuiBreadcrumb } from "./breadcrumb.js";
-export { DuiBreadcrumb };
-import { DuiBreadcrumbItem } from "./breadcrumb-item.js";
-export { DuiBreadcrumbItem };
-import { DuiBreadcrumbLink } from "./breadcrumb-link.js";
-export { DuiBreadcrumbLink };
-import { DuiBreadcrumbPage } from "./breadcrumb-page.js";
-export { DuiBreadcrumbPage };
-import { DuiBreadcrumbSeparator } from "./breadcrumb-separator.js";
-export { DuiBreadcrumbSeparator };
-import { DuiBreadcrumbEllipsis } from "./breadcrumb-ellipsis.js";
-export { DuiBreadcrumbEllipsis };
-export declare const breadcrumbFamily: (typeof DuiBreadcrumb | typeof DuiBreadcrumbItem | typeof DuiBreadcrumbLink | typeof DuiBreadcrumbPage | typeof DuiBreadcrumbSeparator | typeof DuiBreadcrumbEllipsis)[];
+export { DuiBreadcrumb } from "./breadcrumb.js";
+export { DuiBreadcrumbItem } from "./breadcrumb-item.js";
+export { DuiBreadcrumbLink } from "./breadcrumb-link.js";
+export { DuiBreadcrumbPage } from "./breadcrumb-page.js";
+export { DuiBreadcrumbSeparator } from "./breadcrumb-separator.js";
+export { DuiBreadcrumbEllipsis } from "./breadcrumb-ellipsis.js";

package/breadcrumb/index.js

@@ -1,13 +1,6 @@
-import { DuiBreadcrumb } from "./breadcrumb.js";
-export { DuiBreadcrumb };
-import { DuiBreadcrumbItem } from "./breadcrumb-item.js";
-export { DuiBreadcrumbItem };
-import { DuiBreadcrumbLink } from "./breadcrumb-link.js";
-export { DuiBreadcrumbLink };
-import { DuiBreadcrumbPage } from "./breadcrumb-page.js";
-export { DuiBreadcrumbPage };
-import { DuiBreadcrumbSeparator } from "./breadcrumb-separator.js";
-export { DuiBreadcrumbSeparator };
-import { DuiBreadcrumbEllipsis } from "./breadcrumb-ellipsis.js";
-export { DuiBreadcrumbEllipsis };
-export const breadcrumbFamily = [DuiBreadcrumb, DuiBreadcrumbItem, DuiBreadcrumbLink, DuiBreadcrumbPage, DuiBreadcrumbSeparator, DuiBreadcrumbEllipsis];
+export { DuiBreadcrumb } from "./breadcrumb.js";
+export { DuiBreadcrumbItem } from "./breadcrumb-item.js";
+export { DuiBreadcrumbLink } from "./breadcrumb-link.js";
+export { DuiBreadcrumbPage } from "./breadcrumb-page.js";
+export { DuiBreadcrumbSeparator } from "./breadcrumb-separator.js";
+export { DuiBreadcrumbEllipsis } from "./breadcrumb-ellipsis.js";

package/breadcrumb/register.d.ts

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

package/breadcrumb/register.js

@@ -0,0 +1,14 @@
+import { DuiBreadcrumb, DuiBreadcrumbItem, DuiBreadcrumbLink, DuiBreadcrumbPage, DuiBreadcrumbSeparator, DuiBreadcrumbEllipsis, } from "./index.js";
+const components = [
+    DuiBreadcrumb,
+    DuiBreadcrumbItem,
+    DuiBreadcrumbLink,
+    DuiBreadcrumbPage,
+    DuiBreadcrumbSeparator,
+    DuiBreadcrumbEllipsis,
+];
+for (const comp of components) {
+    if (!customElements.get(comp.tagName)) {
+        customElements.define(comp.tagName, comp);
+    }
+}

package/button/index.d.ts

@@ -1,3 +1 @@
-import { DuiButton, navigateEvent } from "./button.js";
-export { DuiButton, navigateEvent };
-export declare const buttonFamily: (typeof DuiButton)[];
+export { DuiButton, navigateEvent } from "./button.js";

package/button/index.js

@@ -1,3 +1 @@
-import { DuiButton, navigateEvent } from "./button.js";
-export { DuiButton, navigateEvent };
-export const buttonFamily = [DuiButton];
+export { DuiButton, navigateEvent } from "./button.js";

package/button/register.d.ts

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

package/button/register.js

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

package/calendar/index.d.ts

@@ -1,3 +1 @@
-import { DuiCalendar, valueChangeEvent } from "./calendar.js";
-export { DuiCalendar, valueChangeEvent };
-export declare const calendarFamily: (typeof DuiCalendar)[];
+export { DuiCalendar, valueChangeEvent } from "./calendar.js";

package/calendar/index.js

@@ -1,3 +1 @@
-import { DuiCalendar, valueChangeEvent } from "./calendar.js";
-export { DuiCalendar, valueChangeEvent };
-export const calendarFamily = [DuiCalendar];
+export { DuiCalendar, valueChangeEvent } from "./calendar.js";

package/calendar/register.d.ts

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

package/calendar/register.js

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

package/checkbox/checkbox-group.d.ts

@@ -1,5 +1,6 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/checkbox */
 import { LitElement, type TemplateResult } from "lit";
+import { type CheckboxGroupContext } from "./checkbox-group-context.js";
 export declare const valueChangeEvent: (detail: string[]) => CustomEvent<string[]>;
 /**
  * `<dui-checkbox-group>` — Groups multiple checkboxes with shared state.
@@ -28,6 +29,7 @@ export declare class DuiCheckboxGroup extends LitElement {
     accessor allValues: string[];
     /** Whether all checkboxes in the group are disabled. */
     accessor disabled: boolean;
+    accessor _ctx: CheckboxGroupContext;
     connectedCallback(): void;
     willUpdate(): void;
     render(): TemplateResult;

package/checkbox/checkbox-group.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 { checkboxGroupContext, } from "./checkbox-group-context.js";
 export const valueChangeEvent = customEvent("value-change", {
     bubbles: true,
     composed: true,
@@ -80,9 +82,9 @@ export class DuiCheckboxGroup extends LitElement {
         }
         this.dispatchEvent(valueChangeEvent(next));
     };
-    #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 {
             checkedValues: this.#getCheckedValues(),
@@ -97,10 +99,10 @@ export class DuiCheckboxGroup extends LitElement {
         if (this.value === undefined && this.defaultValue.length > 0) {
             this.#internalValues = [...this.defaultValue];
         }
-        this.#ctx = this.#buildContext();
+        this._ctx = this.#buildContext();
     }
     willUpdate() {
-        this.#ctx = this.#buildContext();
+        this._ctx = this.#buildContext();
     }
     render() {
         return html `
@@ -126,3 +128,7 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], DuiCheckboxGroup.prototype, "disabled", null);
+__decorate([
+    provide({ context: checkboxGroupContext }),
+    state()
+], DuiCheckboxGroup.prototype, "_ctx", null);

package/checkbox/checkbox.d.ts

@@ -1,5 +1,6 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/checkbox */
 import { LitElement, type TemplateResult } from "lit";
+import { type FieldContext } from "../field/field-context.js";
 export declare const checkedChangeEvent: (detail: {
     checked: boolean;
     indeterminate: boolean;
@@ -40,6 +41,7 @@ export declare class DuiCheckbox extends LitElement {
     accessor value: string | undefined;
     /** When true, acts as a parent (select-all) checkbox within a group. */
     accessor parent: boolean;
+    accessor _fieldCtx: FieldContext;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): TemplateResult;

package/checkbox/checkbox.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 { customEvent } from "@deepfuture/dui-core/event";
+import { fieldContext } from "../field/field-context.js";
 import { checkboxGroupContext } from "./checkbox-group-context.js";
 export const checkedChangeEvent = customEvent("checked-change", { bubbles: true, composed: true });
 /** Structural styles only — layout and behavioral CSS. */
@@ -149,9 +151,9 @@ export class DuiCheckbox extends LitElement {
         context: checkboxGroupContext,
         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() {
         const ctx = this.#groupCtx.value;
         if (ctx && this.value !== undefined) {
@@ -174,10 +176,10 @@ export class DuiCheckbox extends LitElement {
     get #isDisabled() {
         return (this.disabled ||
             (this.#groupCtx.value?.disabled ?? false) ||
-            (this.#fieldCtx?.disabled ?? false));
+            (this._fieldCtx?.disabled ?? false));
     }
     get #isInvalid() {
-        return this.#fieldCtx?.invalid ?? false;
+        return this._fieldCtx?.invalid ?? false;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -205,8 +207,8 @@ export class DuiCheckbox extends LitElement {
             else {
                 ctx.toggle(this.value);
             }
-            this.#fieldCtx?.markDirty();
-            this.#fieldCtx?.markTouched();
+            this._fieldCtx?.markDirty();
+            this._fieldCtx?.markTouched();
             return;
         }
         // Standalone behavior
@@ -215,8 +217,8 @@ export class DuiCheckbox extends LitElement {
             this.#internalChecked = newChecked;
             this.indeterminate = false;
         }
-        this.#fieldCtx?.markDirty();
-        this.#fieldCtx?.markTouched();
+        this._fieldCtx?.markDirty();
+        this._fieldCtx?.markTouched();
         this.dispatchEvent(checkedChangeEvent({
             checked: newChecked,
             indeterminate: false,
@@ -234,7 +236,7 @@ export class DuiCheckbox extends LitElement {
         const isDisabled = this.#isDisabled;
         const isInvalid = this.#isInvalid;
         const showIndicator = isChecked || isIndeterminate;
-        const controlId = this.#fieldCtx?.controlId ?? "";
+        const controlId = this._fieldCtx?.controlId ?? "";
         return html `
       <span
         part="root"
@@ -311,3 +313,7 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], DuiCheckbox.prototype, "parent", null);
+__decorate([
+    consume({ context: fieldContext, subscribe: true }),
+    state()
+], DuiCheckbox.prototype, "_fieldCtx", null);

package/checkbox/index.d.ts

@@ -1,6 +1,3 @@
-import { DuiCheckbox, checkedChangeEvent } from "./checkbox.js";
-export { DuiCheckbox, checkedChangeEvent };
-import { DuiCheckboxGroup, valueChangeEvent } from "./checkbox-group.js";
-export { DuiCheckboxGroup, valueChangeEvent };
+export { DuiCheckbox, checkedChangeEvent } from "./checkbox.js";
+export { DuiCheckboxGroup, valueChangeEvent } from "./checkbox-group.js";
 export type { CheckboxGroupContext } from "./checkbox-group-context.js";
-export declare const checkboxFamily: (typeof DuiCheckbox | typeof DuiCheckboxGroup)[];

package/checkbox/index.js

@@ -1,5 +1,2 @@
-import { DuiCheckbox, checkedChangeEvent } from "./checkbox.js";
-export { DuiCheckbox, checkedChangeEvent };
-import { DuiCheckboxGroup, valueChangeEvent } from "./checkbox-group.js";
-export { DuiCheckboxGroup, valueChangeEvent };
-export const checkboxFamily = [DuiCheckbox, DuiCheckboxGroup];
+export { DuiCheckbox, checkedChangeEvent } from "./checkbox.js";
+export { DuiCheckboxGroup, valueChangeEvent } from "./checkbox-group.js";

package/checkbox/register.d.ts

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