@deepfuture/dui-components 0.0.9 → 0.0.11

package/menubar/menubar.js

@@ -5,8 +5,10 @@ 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 { menubarContext, } from "./menubar-context.js";
 /** Structural styles only — layout CSS. */
 const styles = css `
   :host {
@@ -82,9 +84,9 @@ export class DuiMenubar extends LitElement {
         const trigger = nextMenu.querySelector('[slot="trigger"]');
         trigger?.focus();
     };
-    #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 {
             activeMenuId: this.#activeMenuId,
@@ -94,7 +96,7 @@ export class DuiMenubar extends LitElement {
         };
     }
     willUpdate() {
-        this.#ctx = this.#buildContext();
+        this._ctx = this.#buildContext();
     }
     #onKeyDown = (e) => {
         const isHorizontal = this.orientation === "horizontal";
@@ -128,3 +130,7 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], DuiMenubar.prototype, "orientation", null);
+__decorate([
+    provide({ context: menubarContext }),
+    state()
+], DuiMenubar.prototype, "_ctx", null);

package/menubar/register.d.ts

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

package/menubar/register.js

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

package/number-field/index.d.ts

@@ -1,3 +1 @@
-import { DuiNumberField, valueChangeEvent } from "./number-field.js";
-export { DuiNumberField, valueChangeEvent };
-export declare const numberFieldFamily: (typeof DuiNumberField)[];
+export { DuiNumberField, valueChangeEvent } from "./number-field.js";

package/number-field/index.js

@@ -1,3 +1 @@
-import { DuiNumberField, valueChangeEvent } from "./number-field.js";
-export { DuiNumberField, valueChangeEvent };
-export const numberFieldFamily = [DuiNumberField];
+export { DuiNumberField, valueChangeEvent } from "./number-field.js";

package/number-field/number-field.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, type TemplateResult } from "lit";
+import { type FieldContext } from "@deepfuture/dui-components/field";
 export declare const valueChangeEvent: (detail: {
     value: number;
 }) => CustomEvent<{
@@ -28,6 +29,7 @@ export declare class DuiNumberField extends LitElement {
     accessor readOnly: boolean;
     accessor required: boolean;
     accessor name: string | undefined;
+    accessor _fieldCtx: FieldContext;
     connectedCallback(): void;
     willUpdate(): void;
     render(): TemplateResult;

package/number-field/number-field.js

@@ -5,10 +5,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 { consume } from "@lit/context";
 import { live } from "lit/directives/live.js";
 import { base } from "@deepfuture/dui-core/base";
 import { customEvent } from "@deepfuture/dui-core/event";
+import { fieldContext } from "@deepfuture/dui-components/field";
 export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
 /** Structural styles only — layout CSS. */
 const styles = css `
@@ -117,17 +119,17 @@ export class DuiNumberField extends LitElement {
     #inputText_accessor_storage = "";
     get #inputText() { return this.#inputText_accessor_storage; }
     set #inputText(value) { this.#inputText_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 #currentValue() {
         return this.value ?? this.#internalValue;
     }
     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;
     }
     get #canDecrement() {
         const v = this.#currentValue;
@@ -167,8 +169,8 @@ export class DuiNumberField extends LitElement {
         if (this.value === undefined) {
             this.#internalValue = clamped;
         }
-        this.#fieldCtx?.markDirty();
-        this.#fieldCtx?.setFilled(true);
+        this._fieldCtx?.markDirty();
+        this._fieldCtx?.setFilled(true);
         this.dispatchEvent(valueChangeEvent({ value: clamped }));
     }
     #increment = (amount) => {
@@ -197,11 +199,11 @@ export class DuiNumberField extends LitElement {
     };
     #onBlur = () => {
         this.#commitInput();
-        this.#fieldCtx?.setFocused(false);
-        this.#fieldCtx?.markTouched();
+        this._fieldCtx?.setFocused(false);
+        this._fieldCtx?.markTouched();
     };
     #onFocus = () => {
-        this.#fieldCtx?.setFocused(true);
+        this._fieldCtx?.setFocused(true);
     };
     #onKeyDown = (e) => {
         switch (e.key) {
@@ -239,7 +241,7 @@ export class DuiNumberField extends LitElement {
     render() {
         const isDisabled = this.#isDisabled;
         const isInvalid = this.#isInvalid;
-        const controlId = this.#fieldCtx?.controlId ?? "";
+        const controlId = this._fieldCtx?.controlId ?? "";
         const currentValue = this.#currentValue;
         return html `
       <div
@@ -324,3 +326,7 @@ __decorate([
 __decorate([
     property()
 ], DuiNumberField.prototype, "name", null);
+__decorate([
+    consume({ context: fieldContext, subscribe: true }),
+    state()
+], DuiNumberField.prototype, "_fieldCtx", null);

package/number-field/register.d.ts

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

package/number-field/register.js

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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@deepfuture/dui-components",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "DUI unstyled web components — structural CSS only, themed via applyTheme()",
   "type": "module",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/deepfuturenow/dui.git",
+    "url": "https://github.com/nicholasgasior/dui.git",
     "directory": "packages/components"
   },
   "exports": {
@@ -94,22 +94,6 @@
       "import": "./trunc/index.js",
       "types": "./trunc/index.d.ts"
     },
-    "./center": {
-      "import": "./center/index.js",
-      "types": "./center/index.d.ts"
-    },
-    "./hstack": {
-      "import": "./hstack/index.js",
-      "types": "./hstack/index.d.ts"
-    },
-    "./vstack": {
-      "import": "./vstack/index.js",
-      "types": "./vstack/index.d.ts"
-    },
-    "./page-inset": {
-      "import": "./page-inset/index.js",
-      "types": "./page-inset/index.d.ts"
-    },
     "./link": {
       "import": "./link/index.js",
       "types": "./link/index.d.ts"
@@ -190,11 +174,10 @@
   "files": [
     "**/*.js",
     "**/*.d.ts",
-    "**/*.css",
-    "README.md"
+    "**/*.css"
   ],
   "dependencies": {
-    "@deepfuture/dui-core": "0.0.9",
+    "@deepfuture/dui-core": "0.0.11",
     "lit": "^3.3.2",
     "@lit/context": "^1.1.3"
   },

package/popover/index.d.ts

@@ -1,11 +1,6 @@
-import { DuiPopover, openChangeEvent } from "./popover.js";
-export { DuiPopover, openChangeEvent };
+export { DuiPopover, openChangeEvent } from "./popover.js";
 export type { PopoverOpenChangeDetail } from "./popover.js";
-import { DuiPopoverTrigger } from "./popover-trigger.js";
-export { DuiPopoverTrigger };
-import { DuiPopoverPopup } from "./popover-popup.js";
-export { DuiPopoverPopup };
-import { DuiPopoverClose } from "./popover-close.js";
-export { DuiPopoverClose };
+export { DuiPopoverTrigger } from "./popover-trigger.js";
+export { DuiPopoverPopup } from "./popover-popup.js";
+export { DuiPopoverClose } from "./popover-close.js";
 export type { PopoverContext, PopoverSide } from "./popover-context.js";
-export declare const popoverFamily: (typeof DuiPopover | typeof DuiPopoverTrigger | typeof DuiPopoverPopup | typeof DuiPopoverClose)[];

package/popover/index.js

@@ -1,9 +1,4 @@
-import { DuiPopover, openChangeEvent } from "./popover.js";
-export { DuiPopover, openChangeEvent };
-import { DuiPopoverTrigger } from "./popover-trigger.js";
-export { DuiPopoverTrigger };
-import { DuiPopoverPopup } from "./popover-popup.js";
-export { DuiPopoverPopup };
-import { DuiPopoverClose } from "./popover-close.js";
-export { DuiPopoverClose };
-export const popoverFamily = [DuiPopover, DuiPopoverTrigger, DuiPopoverPopup, DuiPopoverClose];
+export { DuiPopover, openChangeEvent } from "./popover.js";
+export { DuiPopoverTrigger } from "./popover-trigger.js";
+export { DuiPopoverPopup } from "./popover-popup.js";
+export { DuiPopoverClose } from "./popover-close.js";

package/popover/popover.d.ts

@@ -1,6 +1,6 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/popover */
 import { LitElement, type PropertyValues, type TemplateResult } from "lit";
-import { type PopoverSide } from "./popover-context.js";
+import { type PopoverContext, type PopoverSide } from "./popover-context.js";
 export type PopoverOpenChangeDetail = {
     open: boolean;
 };
@@ -23,6 +23,7 @@ export declare class DuiPopover extends LitElement {
     accessor side: PopoverSide;
     /** Offset from the trigger in pixels. */
     accessor sideOffset: number;
+    accessor _ctx: PopoverContext;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;

package/popover/popover.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 { popoverContext, } from "./popover-context.js";
 export const openChangeEvent = customEvent("open-change", { bubbles: true, composed: true });
 const hostStyles = css `
   :host {
@@ -51,7 +53,7 @@ export class DuiPopover extends LitElement {
     }
     #triggerId = `popover-trigger-${crypto.randomUUID().slice(0, 8)}`;
     #popupId = `popover-popup-${crypto.randomUUID().slice(0, 8)}`;
-    #ctx_accessor_storage = {
+    #_ctx_accessor_storage = {
         open: false,
         triggerId: this.#triggerId,
         popupId: this.#popupId,
@@ -63,8 +65,8 @@ export class DuiPopover extends LitElement {
         togglePopover: () => this.#doToggle(),
         setTriggerEl: (el) => this.#setTriggerEl(el),
     };
-    get #ctx() { return this.#ctx_accessor_storage; }
-    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
     connectedCallback() {
         super.connectedCallback();
         if (this.defaultOpen) {
@@ -80,10 +82,10 @@ export class DuiPopover extends LitElement {
         if (changed.has("open") ||
             changed.has("side") ||
             changed.has("sideOffset") ||
-            this.#ctx.open !== this.#isOpen ||
-            this.#ctx.triggerEl !== this.#triggerEl) {
-            this.#ctx = {
-                ...this.#ctx,
+            this._ctx.open !== this.#isOpen ||
+            this._ctx.triggerEl !== this.#triggerEl) {
+            this._ctx = {
+                ...this._ctx,
                 open: this.#isOpen,
                 side: this.side,
                 sideOffset: this.sideOffset,
@@ -138,3 +140,7 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: "side-offset" })
 ], DuiPopover.prototype, "sideOffset", null);
+__decorate([
+    provide({ context: popoverContext }),
+    state()
+], DuiPopover.prototype, "_ctx", null);

package/popover/register.d.ts

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

package/popover/register.js

@@ -0,0 +1,16 @@
+import { DuiPopover } from "./popover.js";
+import { DuiPopoverTrigger } from "./popover-trigger.js";
+import { DuiPopoverPopup } from "./popover-popup.js";
+import { DuiPopoverClose } from "./popover-close.js";
+if (!customElements.get(DuiPopover.tagName)) {
+    customElements.define(DuiPopover.tagName, DuiPopover);
+}
+if (!customElements.get(DuiPopoverTrigger.tagName)) {
+    customElements.define(DuiPopoverTrigger.tagName, DuiPopoverTrigger);
+}
+if (!customElements.get(DuiPopoverPopup.tagName)) {
+    customElements.define(DuiPopoverPopup.tagName, DuiPopoverPopup);
+}
+if (!customElements.get(DuiPopoverClose.tagName)) {
+    customElements.define(DuiPopoverClose.tagName, DuiPopoverClose);
+}

package/portal/index.d.ts

@@ -1,4 +1,2 @@
-import { DuiPortal } from "./portal.js";
-export { DuiPortal };
+export { DuiPortal } from "./portal.js";
 export type { QueryRoot } from "./portal.js";
-export declare const portalFamily: (typeof DuiPortal)[];

package/portal/index.js

@@ -1,3 +1 @@
-import { DuiPortal } from "./portal.js";
-export { DuiPortal };
-export const portalFamily = [DuiPortal];
+export { DuiPortal } from "./portal.js";

package/portal/register.d.ts

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

package/portal/register.js

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

package/preview-card/index.d.ts

@@ -1,9 +1,5 @@
-import { DuiPreviewCard, openChangeEvent } from "./preview-card.js";
-export { DuiPreviewCard, openChangeEvent };
+export { DuiPreviewCard, openChangeEvent } from "./preview-card.js";
 export type { PreviewCardOpenChangeDetail } from "./preview-card.js";
-import { DuiPreviewCardTrigger } from "./preview-card-trigger.js";
-export { DuiPreviewCardTrigger };
-import { DuiPreviewCardPopup } from "./preview-card-popup.js";
-export { DuiPreviewCardPopup };
+export { DuiPreviewCardTrigger } from "./preview-card-trigger.js";
+export { DuiPreviewCardPopup } from "./preview-card-popup.js";
 export type { PreviewCardContext, PreviewCardSide } from "./preview-card-context.js";
-export declare const previewCardFamily: (typeof DuiPreviewCard | typeof DuiPreviewCardTrigger | typeof DuiPreviewCardPopup)[];

package/preview-card/index.js

@@ -1,7 +1,3 @@
-import { DuiPreviewCard, openChangeEvent } from "./preview-card.js";
-export { DuiPreviewCard, openChangeEvent };
-import { DuiPreviewCardTrigger } from "./preview-card-trigger.js";
-export { DuiPreviewCardTrigger };
-import { DuiPreviewCardPopup } from "./preview-card-popup.js";
-export { DuiPreviewCardPopup };
-export const previewCardFamily = [DuiPreviewCard, DuiPreviewCardTrigger, DuiPreviewCardPopup];
+export { DuiPreviewCard, openChangeEvent } from "./preview-card.js";
+export { DuiPreviewCardTrigger } from "./preview-card-trigger.js";
+export { DuiPreviewCardPopup } from "./preview-card-popup.js";

package/preview-card/preview-card.d.ts

@@ -1,6 +1,6 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/preview-card */
 import { LitElement, type PropertyValues, type TemplateResult } from "lit";
-import { type PreviewCardSide } from "./preview-card-context.js";
+import { type PreviewCardContext, type PreviewCardSide } from "./preview-card-context.js";
 export type PreviewCardOpenChangeDetail = {
     open: boolean;
 };
@@ -27,6 +27,7 @@ export declare class DuiPreviewCard extends LitElement {
     accessor delay: number;
     /** Delay before closing in milliseconds. */
     accessor closeDelay: number;
+    accessor _ctx: PreviewCardContext;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;

package/preview-card/preview-card.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 { previewCardContext, } from "./preview-card-context.js";
 export const openChangeEvent = customEvent("open-change", { bubbles: true, composed: true });
 const hostStyles = css `
   :host {
@@ -58,7 +60,7 @@ export class DuiPreviewCard extends LitElement {
     #closeTimeout;
     #triggerId = `preview-card-trigger-${crypto.randomUUID().slice(0, 8)}`;
     #popupId = `preview-card-popup-${crypto.randomUUID().slice(0, 8)}`;
-    #ctx_accessor_storage = {
+    #_ctx_accessor_storage = {
         open: false,
         triggerId: this.#triggerId,
         popupId: this.#popupId,
@@ -69,8 +71,8 @@ export class DuiPreviewCard extends LitElement {
         closePreviewCard: () => this.#scheduleClose(),
         setTriggerEl: (el) => this.#setTriggerEl(el),
     };
-    get #ctx() { return this.#ctx_accessor_storage; }
-    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
     connectedCallback() {
         super.connectedCallback();
         if (this.defaultOpen) {
@@ -86,10 +88,10 @@ export class DuiPreviewCard extends LitElement {
         if (changed.has("open") ||
             changed.has("side") ||
             changed.has("sideOffset") ||
-            this.#ctx.open !== isOpen ||
-            this.#ctx.triggerEl !== this.#triggerEl) {
-            this.#ctx = {
-                ...this.#ctx,
+            this._ctx.open !== isOpen ||
+            this._ctx.triggerEl !== this.#triggerEl) {
+            this._ctx = {
+                ...this._ctx,
                 open: isOpen,
                 side: this.side,
                 sideOffset: this.sideOffset,
@@ -162,3 +164,7 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: "close-delay" })
 ], DuiPreviewCard.prototype, "closeDelay", null);
+__decorate([
+    provide({ context: previewCardContext }),
+    state()
+], DuiPreviewCard.prototype, "_ctx", null);

package/preview-card/register.d.ts

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

package/preview-card/register.js

@@ -0,0 +1,12 @@
+import { DuiPreviewCard } from "./preview-card.js";
+import { DuiPreviewCardTrigger } from "./preview-card-trigger.js";
+import { DuiPreviewCardPopup } from "./preview-card-popup.js";
+if (!customElements.get(DuiPreviewCard.tagName)) {
+    customElements.define(DuiPreviewCard.tagName, DuiPreviewCard);
+}
+if (!customElements.get(DuiPreviewCardTrigger.tagName)) {
+    customElements.define(DuiPreviewCardTrigger.tagName, DuiPreviewCardTrigger);
+}
+if (!customElements.get(DuiPreviewCardPopup.tagName)) {
+    customElements.define(DuiPreviewCardPopup.tagName, DuiPreviewCardPopup);
+}

package/progress/index.d.ts

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

package/progress/index.js

@@ -1,3 +1 @@
-import { DuiProgress } from "./progress.js";
-export { DuiProgress };
-export const progressFamily = [DuiProgress];
+export { DuiProgress } from "./progress.js";

package/progress/register.d.ts

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

package/progress/register.js

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

package/radio/index.d.ts

@@ -1,6 +1,3 @@
-import { DuiRadio } from "./radio.js";
-export { DuiRadio };
-import { DuiRadioGroup, valueChangeEvent } from "./radio-group.js";
-export { DuiRadioGroup, valueChangeEvent };
+export { DuiRadio } from "./radio.js";
+export { DuiRadioGroup, valueChangeEvent } from "./radio-group.js";
 export type { RadioGroupContext } from "./radio-group-context.js";
-export declare const radioFamily: (typeof DuiRadio | typeof DuiRadioGroup)[];

package/radio/index.js

@@ -1,5 +1,2 @@
-import { DuiRadio } from "./radio.js";
-export { DuiRadio };
-import { DuiRadioGroup, valueChangeEvent } from "./radio-group.js";
-export { DuiRadioGroup, valueChangeEvent };
-export const radioFamily = [DuiRadio, DuiRadioGroup];
+export { DuiRadio } from "./radio.js";
+export { DuiRadioGroup, valueChangeEvent } from "./radio-group.js";

package/radio/radio-group.d.ts

@@ -1,5 +1,6 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/radio */
 import { LitElement, type TemplateResult } from "lit";
+import { type RadioGroupContext } from "./radio-group-context.js";
 export declare const valueChangeEvent: (detail: {
     value: string;
 }) => CustomEvent<{
@@ -31,6 +32,7 @@ export declare class DuiRadioGroup extends LitElement {
     accessor readOnly: boolean;
     /** Whether a selection is required. */
     accessor required: boolean;
+    accessor _ctx: RadioGroupContext;
     connectedCallback(): void;
     willUpdate(): void;
     render(): TemplateResult;

package/radio/radio-group.js

@@ -6,8 +6,10 @@ 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 { radioGroupContext, } from "./radio-group-context.js";
 import { customEvent } from "@deepfuture/dui-core/event";
 export const valueChangeEvent = customEvent("value-change", {
     bubbles: true,
@@ -78,9 +80,9 @@ export class DuiRadioGroup extends LitElement {
         }
         this.dispatchEvent(valueChangeEvent({ value: val }));
     };
-    #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 {
             name: this.name,
@@ -96,10 +98,10 @@ export class DuiRadioGroup extends LitElement {
         if (this.value === undefined && this.defaultValue !== undefined) {
             this.#internalValue = this.defaultValue;
         }
-        this.#ctx = this.#buildContext();
+        this._ctx = this.#buildContext();
     }
     willUpdate() {
-        this.#ctx = this.#buildContext();
+        this._ctx = this.#buildContext();
     }
     render() {
         return html `
@@ -133,3 +135,7 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], DuiRadioGroup.prototype, "required", null);
+__decorate([
+    provide({ context: radioGroupContext }),
+    state()
+], DuiRadioGroup.prototype, "_ctx", null);

package/radio/radio.d.ts

@@ -1,5 +1,6 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/radio */
 import { LitElement, type TemplateResult } from "lit";
+import { type FieldContext } from "@deepfuture/dui-components/field";
 /**
  * `<dui-radio>` — A radio button input.
  *
@@ -21,6 +22,7 @@ export declare class DuiRadio extends LitElement {
     accessor disabled: boolean;
     /** Whether the radio is read-only. */
     accessor readOnly: boolean;
+    accessor _fieldCtx: FieldContext;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): TemplateResult;