@deepfuture/dui-components 0.0.10 → 0.0.12

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/dialog/dialog.d.ts

@@ -1,5 +1,6 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/dialog */
 import { LitElement, type TemplateResult } from "lit";
+import { type DialogContext } from "./dialog-context.js";
 export type DialogOpenChangeDetail = {
     open: boolean;
 };
@@ -24,6 +25,7 @@ export declare class DuiDialog extends LitElement {
     accessor open: boolean | undefined;
     /** Initial open state for uncontrolled mode. */
     accessor defaultOpen: boolean;
+    accessor _ctx: DialogContext;
     connectedCallback(): void;
     willUpdate(): void;
     render(): TemplateResult;

package/dialog/dialog.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 { dialogContext } from "./dialog-context.js";
 export const openChangeEvent = customEvent("open-change", { bubbles: true, composed: true });
 const hostStyles = css `
   :host {
@@ -61,9 +63,9 @@ export class DuiDialog extends LitElement {
         }
         this.dispatchEvent(openChangeEvent({ open: false }));
     };
-    #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 {
             open: this.#isOpen,
@@ -80,10 +82,10 @@ export class DuiDialog extends LitElement {
         if (this.open === undefined && this.defaultOpen) {
             this.#internalOpen = true;
         }
-        this.#ctx = this.#buildContext();
+        this._ctx = this.#buildContext();
     }
     willUpdate() {
-        this.#ctx = this.#buildContext();
+        this._ctx = this.#buildContext();
     }
     render() {
         return html `<slot></slot>`;
@@ -95,3 +97,7 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: "default-open" })
 ], DuiDialog.prototype, "defaultOpen", null);
+__decorate([
+    provide({ context: dialogContext }),
+    state()
+], DuiDialog.prototype, "_ctx", null);

package/global.d.ts

@@ -22,7 +22,6 @@ import type { DuiBreadcrumbSeparator } from "./breadcrumb/breadcrumb-separator.j
 import type { DuiBreadcrumbEllipsis } from "./breadcrumb/breadcrumb-ellipsis.js";
 import type { DuiButton } from "./button/button.js";
 import type { DuiCalendar } from "./calendar/calendar.js";
-import type { DuiCenter } from "./center/center.js";
 import type { DuiCheckbox } from "./checkbox/checkbox.js";
 import type { DuiCheckboxGroup } from "./checkbox/checkbox-group.js";
 import type { DuiCollapsible } from "./collapsible/collapsible.js";
@@ -41,7 +40,6 @@ import type { DuiDialogTrigger } from "./dialog/dialog-trigger.js";
 import type { DuiDialogPopup } from "./dialog/dialog-popup.js";
 import type { DuiDialogClose } from "./dialog/dialog-close.js";
 import type { DuiDropzone } from "./dropzone/dropzone.js";
-import type { DuiHstack } from "./hstack/hstack.js";
 import type { DuiIcon } from "./icon/icon.js";
 import type { DuiInput } from "./input/input.js";
 import type { DuiLink } from "./link/link.js";
@@ -49,7 +47,6 @@ import type { DuiMenu } from "./menu/menu.js";
 import type { DuiMenuItem } from "./menu/menu-item.js";
 import type { DuiMenubar } from "./menubar/menubar.js";
 import type { DuiNumberField } from "./number-field/number-field.js";
-import type { DuiPageInset } from "./page-inset/page-inset.js";
 import type { DuiPopover } from "./popover/popover.js";
 import type { DuiPopoverTrigger } from "./popover/popover-trigger.js";
 import type { DuiPopoverPopup } from "./popover/popover-popup.js";
@@ -93,7 +90,6 @@ import type { DuiTooltip } from "./tooltip/tooltip.js";
 import type { DuiTooltipTrigger } from "./tooltip/tooltip-trigger.js";
 import type { DuiTooltipPopup } from "./tooltip/tooltip-popup.js";
 import type { DuiTrunc } from "./trunc/trunc.js";
-import type { DuiVstack } from "./vstack/vstack.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -113,7 +109,6 @@ declare global {
     "dui-breadcrumb-ellipsis": DuiBreadcrumbEllipsis;
     "dui-button": DuiButton;
     "dui-calendar": DuiCalendar;
-    "dui-center": DuiCenter;
     "dui-checkbox": DuiCheckbox;
     "dui-checkbox-group": DuiCheckboxGroup;
     "dui-collapsible": DuiCollapsible;
@@ -132,7 +127,6 @@ declare global {
     "dui-dialog-popup": DuiDialogPopup;
     "dui-dialog-close": DuiDialogClose;
     "dui-dropzone": DuiDropzone;
-    "dui-hstack": DuiHstack;
     "dui-icon": DuiIcon;
     "dui-input": DuiInput;
     "dui-link": DuiLink;
@@ -140,7 +134,6 @@ declare global {
     "dui-menu-item": DuiMenuItem;
     "dui-menubar": DuiMenubar;
     "dui-number-field": DuiNumberField;
-    "dui-page-inset": DuiPageInset;
     "dui-popover": DuiPopover;
     "dui-popover-trigger": DuiPopoverTrigger;
     "dui-popover-popup": DuiPopoverPopup;
@@ -184,6 +177,5 @@ declare global {
     "dui-tooltip-trigger": DuiTooltipTrigger;
     "dui-tooltip-popup": DuiTooltipPopup;
     "dui-trunc": DuiTrunc;
-    "dui-vstack": DuiVstack;
   }
 }

package/input/input.d.ts

@@ -1,5 +1,6 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/input */
 import { LitElement, type TemplateResult } from "lit";
+import { type FieldContext } from "@deepfuture/dui-components/field";
 export declare const inputChangeEvent: (detail: {
     value: string;
 }) => CustomEvent<{
@@ -42,6 +43,7 @@ export declare class DuiInput extends LitElement {
     accessor autocomplete: string | undefined;
     /** Whether the input should receive focus on mount. */
     accessor autofocus: boolean;
+    accessor _fieldCtx: FieldContext;
     firstUpdated(): void;
     render(): TemplateResult;
 }

package/input/input.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 } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
+import { consume } from "@lit/context";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 import { base } from "@deepfuture/dui-core/base";
+import { fieldContext } from "@deepfuture/dui-components/field";
 import { customEvent } from "@deepfuture/dui-core/event";
 export const inputChangeEvent = customEvent("input-change", {
     bubbles: true,
@@ -94,23 +96,23 @@ export class DuiInput extends LitElement {
     /** Whether the input should receive focus on mount. */
     get autofocus() { return this.#autofocus_accessor_storage; }
     set autofocus(value) { this.#autofocus_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; }
     get #controlId() {
-        return this.#ctx?.controlId ?? "";
+        return this._fieldCtx?.controlId ?? "";
     }
     get #descriptionId() {
-        return this.#ctx?.descriptionId;
+        return this._fieldCtx?.descriptionId;
     }
     get #errorId() {
-        return this.#ctx?.errorId;
+        return this._fieldCtx?.errorId;
     }
     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;
     }
     firstUpdated() {
         if (this.autofocus) {
@@ -120,16 +122,16 @@ export class DuiInput extends LitElement {
     #onInput = (event) => {
         const target = event.target;
         this.value = target.value;
-        this.#ctx?.markDirty();
-        this.#ctx?.setFilled(this.value.length > 0);
+        this._fieldCtx?.markDirty();
+        this._fieldCtx?.setFilled(this.value.length > 0);
         this.dispatchEvent(inputChangeEvent({ value: this.value }));
     };
     #onFocus = () => {
-        this.#ctx?.setFocused(true);
+        this._fieldCtx?.setFocused(true);
     };
     #onBlur = () => {
-        this.#ctx?.setFocused(false);
-        this.#ctx?.markTouched();
+        this._fieldCtx?.setFocused(false);
+        this._fieldCtx?.markTouched();
     };
     render() {
         const describedBy = [this.#descriptionId, this.#isInvalid ? this.#errorId : undefined]
@@ -155,10 +157,10 @@ export class DuiInput extends LitElement {
         ?data-disabled="${this.#isDisabled}"
         ?data-invalid="${this.#isInvalid}"
         ?data-valid="${!this.#isInvalid}"
-        ?data-dirty="${this.#ctx?.dirty}"
-        ?data-touched="${this.#ctx?.touched}"
-        ?data-filled="${this.#ctx?.filled}"
-        ?data-focused="${this.#ctx?.focused}"
+        ?data-dirty="${this._fieldCtx?.dirty}"
+        ?data-touched="${this._fieldCtx?.touched}"
+        ?data-filled="${this._fieldCtx?.filled}"
+        ?data-focused="${this._fieldCtx?.focused}"
         @input="${this.#onInput}"
         @focus="${this.#onFocus}"
         @blur="${this.#onBlur}"
@@ -202,3 +204,7 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], DuiInput.prototype, "autofocus", null);
+__decorate([
+    consume({ context: fieldContext, subscribe: true }),
+    state()
+], DuiInput.prototype, "_fieldCtx", null);

package/menubar/menubar.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, type TemplateResult } from "lit";
+import { type MenubarContext } from "./menubar-context.js";
 /**
  * `<dui-menubar>` — A horizontal bar of menus with coordinated open/close.
  *
@@ -14,6 +15,7 @@ export declare class DuiMenubar extends LitElement {
     static styles: import("lit").CSSResult[];
     accessor loop: boolean;
     accessor orientation: "horizontal" | "vertical";
+    accessor _ctx: MenubarContext;
     willUpdate(): void;
     render(): TemplateResult;
 }

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepfuture/dui-components",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "DUI unstyled web components — structural CSS only, themed via applyTheme()",
   "type": "module",
   "license": "MIT",
@@ -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"
@@ -194,7 +178,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@deepfuture/dui-core": "0.0.10",
+    "@deepfuture/dui-core": "0.0.12",
     "lit": "^3.3.2",
     "@lit/context": "^1.1.3"
   },

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/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/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;