@deepfuture/dui-components 0.0.10 → 0.0.12

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;

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

package/toggle/toggle-group.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, type TemplateResult } from "lit";
+import { type ToggleGroupContext } from "./toggle-group-context.js";
 export declare const valueChangeEvent: (detail: {
     value: string[];
 }) => CustomEvent<{
@@ -21,6 +22,7 @@ export declare class DuiToggleGroup extends LitElement {
     accessor orientation: "horizontal" | "vertical";
     accessor disabled: boolean;
     accessor loop: boolean;
+    accessor _ctx: ToggleGroupContext;
     connectedCallback(): void;
     willUpdate(): void;
     render(): TemplateResult;

package/toggle/toggle-group.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 } 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 { toggleGroupContext, } from "./toggle-group-context.js";
 export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
 /** Structural styles only — layout CSS. */
 const styles = css `
@@ -75,9 +77,9 @@ export class DuiToggleGroup extends LitElement {
         }
         this.dispatchEvent(valueChangeEvent({ value: 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 {
             value: this.#currentValue,
@@ -91,10 +93,10 @@ export class DuiToggleGroup extends LitElement {
         if (this.value === undefined && this.defaultValue.length > 0) {
             this.#internalValue = [...this.defaultValue];
         }
-        this.#ctx = this.#buildContext();
+        this._ctx = this.#buildContext();
     }
     willUpdate() {
-        this.#ctx = this.#buildContext();
+        this._ctx = this.#buildContext();
     }
     #onKeyDown = (e) => {
         const isHorizontal = this.orientation === "horizontal";
@@ -161,3 +163,7 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], DuiToggleGroup.prototype, "loop", null);
+__decorate([
+    provide({ context: toggleGroupContext }),
+    state()
+], DuiToggleGroup.prototype, "_ctx", null);

package/toggle/toggle.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, type TemplateResult } from "lit";
+import { type ToggleGroupContext } from "./toggle-group-context.js";
 export declare const pressedChangeEvent: (detail: {
     pressed: boolean;
 }) => CustomEvent<{
@@ -21,6 +22,7 @@ export declare class DuiToggle extends LitElement {
     accessor defaultPressed: boolean;
     accessor disabled: boolean;
     accessor value: string | undefined;
+    accessor _groupCtx: ToggleGroupContext;
     connectedCallback(): void;
     render(): TemplateResult;
 }

package/toggle/toggle.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 } 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 { toggleGroupContext, } from "./toggle-group-context.js";
 export const pressedChangeEvent = customEvent("pressed-change", { bubbles: true, composed: true });
 /** Structural styles only — layout CSS. */
 const styles = css `
@@ -63,17 +65,17 @@ export class DuiToggle extends LitElement {
     #internalPressed_accessor_storage = false;
     get #internalPressed() { return this.#internalPressed_accessor_storage; }
     set #internalPressed(value) { this.#internalPressed_accessor_storage = value; }
-    #groupCtx_accessor_storage;
-    get #groupCtx() { return this.#groupCtx_accessor_storage; }
-    set #groupCtx(value) { this.#groupCtx_accessor_storage = value; }
+    #_groupCtx_accessor_storage;
+    get _groupCtx() { return this.#_groupCtx_accessor_storage; }
+    set _groupCtx(value) { this.#_groupCtx_accessor_storage = value; }
     get #isPressed() {
-        if (this.#groupCtx && this.value !== undefined) {
-            return this.#groupCtx.value.includes(this.value);
+        if (this._groupCtx && this.value !== undefined) {
+            return this._groupCtx.value.includes(this.value);
         }
         return this.pressed ?? this.#internalPressed;
     }
     get #isDisabled() {
-        return this.disabled || (this.#groupCtx?.disabled ?? false);
+        return this.disabled || (this._groupCtx?.disabled ?? false);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -84,8 +86,8 @@ export class DuiToggle extends LitElement {
     #handleClick = () => {
         if (this.#isDisabled)
             return;
-        if (this.#groupCtx && this.value !== undefined) {
-            this.#groupCtx.toggle(this.value);
+        if (this._groupCtx && this.value !== undefined) {
+            this._groupCtx.toggle(this.value);
             return;
         }
         const newPressed = !this.#isPressed;
@@ -125,3 +127,7 @@ __decorate([
 __decorate([
     property()
 ], DuiToggle.prototype, "value", null);
+__decorate([
+    consume({ context: toggleGroupContext, subscribe: true }),
+    state()
+], DuiToggle.prototype, "_groupCtx", null);

package/tooltip/tooltip.d.ts

@@ -1,6 +1,6 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/tooltip */
 import { LitElement, type PropertyValues, type TemplateResult } from "lit";
-import { type TooltipSide } from "./tooltip-context.js";
+import { type TooltipContext, type TooltipSide } from "./tooltip-context.js";
 export type TooltipOpenChangeDetail = {
     open: boolean;
 };
@@ -29,6 +29,7 @@ export declare class DuiTooltip extends LitElement {
     accessor closeDelay: number;
     /** Disable the tooltip. */
     accessor disabled: boolean;
+    accessor _ctx: TooltipContext;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;

package/tooltip/tooltip.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 { tooltipContext, } from "./tooltip-context.js";
 export const openChangeEvent = customEvent("open-change", { bubbles: true, composed: true });
 const hostStyles = css `
   :host {
@@ -62,7 +64,7 @@ export class DuiTooltip extends LitElement {
     #closeTimeout;
     #triggerId = `tooltip-trigger-${crypto.randomUUID().slice(0, 8)}`;
     #popupId = `tooltip-popup-${crypto.randomUUID().slice(0, 8)}`;
-    #ctx_accessor_storage = {
+    #_ctx_accessor_storage = {
         open: false,
         triggerId: this.#triggerId,
         popupId: this.#popupId,
@@ -74,8 +76,8 @@ export class DuiTooltip extends LitElement {
         closeTooltip: () => 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 && !this.disabled) {
@@ -92,10 +94,10 @@ export class DuiTooltip extends LitElement {
             changed.has("side") ||
             changed.has("sideOffset") ||
             changed.has("disabled") ||
-            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,
@@ -174,3 +176,7 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], DuiTooltip.prototype, "disabled", null);
+__decorate([
+    provide({ context: tooltipContext }),
+    state()
+], DuiTooltip.prototype, "_ctx", null);