@descope/web-components-ui 3.13.0 → 3.13.2

package/dist/cjs/index.cjs.js

@@ -10550,6 +10550,11 @@ class RawTooltip extends createBaseClass$1({
   componentName: componentName$_,
   baseSelector: 'vaadin-tooltip',
 }) {
+  // Observes the inner descope-anchored's `class` attribute so runtime updates
+  // (e.g. real-time conditional components toggling `.hidden`) keep this
+  // tooltip's class in sync. Set up in connectedCallback so reconnects work.
+  #anchoredClassObserver = null;
+
   constructor() {
     super();
 
@@ -10665,9 +10670,31 @@ class RawTooltip extends createBaseClass$1({
     );
     this.#setTooltipTarget();
 
+    setTimeout(() => this.#onOverlayReady());
+  }
+
+  #observeAnchored() {
+    this.#anchoredClassObserver?.disconnect();
+    if (this.anchored) {
+      this.#anchoredClassObserver = observeAttributes(
+        this.anchored,
+        () => this.#syncComponentState(),
+        { includeAttrs: ['class'] },
+      );
+    }
+  }
+
+  // createBaseClass gates init() to first-connect, so observing here is
+  // required for the detach/reattach cycle to keep working.
+  connectedCallback() {
+    super.connectedCallback?.();
     this.#syncComponentState();
+    this.#observeAnchored();
+  }
 
-    setTimeout(() => this.#onOverlayReady());
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    this.#anchoredClassObserver?.disconnect();
   }
 
   #setTooltipTarget() {
@@ -11959,6 +11986,12 @@ class RawAttachment extends createBaseClass$1({
   componentName: componentName$X,
   baseSelector: 'descope-anchored',
 }) {
+  // Observes the inner descope-anchored's `class` attribute so runtime
+  // updates (e.g. real-time conditional components toggling `.hidden`) keep
+  // this attachment host's class in sync. Set up in connectedCallback so
+  // reconnects work (createBaseClass gates init() to first connect only).
+  #anchoredClassObserver = null;
+
   constructor() {
     super();
 
@@ -11997,8 +12030,6 @@ class RawAttachment extends createBaseClass$1({
   init() {
     super.init?.();
 
-    this.#syncComponentState();
-
     injectStyle(
       `
       :host {
@@ -12049,6 +12080,30 @@ class RawAttachment extends createBaseClass$1({
     this.classList.toggle('hidden', hasHidden);
   }
 
+  #observeAnchored() {
+    this.#anchoredClassObserver?.disconnect();
+    if (this.anchored) {
+      this.#anchoredClassObserver = observeAttributes(
+        this.anchored,
+        () => this.#syncComponentState(),
+        { includeAttrs: ['class'] },
+      );
+    }
+  }
+
+  // createBaseClass gates init() to first-connect, so observing here is
+  // required for the detach/reattach cycle to keep working.
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.#syncComponentState();
+    this.#observeAnchored();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    this.#anchoredClassObserver?.disconnect();
+  }
+
   #syncAvailableSizeAttr() {
     const anchor = this.defaultSlot?.assignedElements()?.[0];
 
@@ -29396,6 +29451,11 @@ class RawAnchored extends createBaseClass$1({
 
   #hostStretchSheet = null;
 
+  // Observes the anchor's `class` attribute so runtime updates by the SDK
+  // (e.g. real-time conditional components toggling `.hidden`) propagate to
+  // this element. Without this, only the initial slotchange would sync.
+  #anchorClassObserver = null;
+
   get #anchor() {
     return this.defaultSlot.assignedElements({ flatten: true })[0];
   }
@@ -29498,6 +29558,28 @@ class RawAnchored extends createBaseClass$1({
       this.#anchored,
       'st-host-direction',
     );
+
+    this.#observeAnchorClass();
+  }
+
+  #observeAnchorClass() {
+    this.#anchorClassObserver?.disconnect();
+    if (this.#anchor) {
+      this.#anchorClassObserver = observeAttributes(
+        this.#anchor,
+        () => this.#syncComponentState(),
+        { includeAttrs: ['class'] },
+      );
+    }
+  }
+
+  // createBaseClass gates init() to first-connect (#isInit). Without
+  // re-observing here, runtime `.hidden` toggles stop syncing after a
+  // detach/reattach cycle.
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.#observeAnchorClass();
+    this.#syncComponentState();
   }
 
   // Injects [stretch] layout rules into the containing component's shadow root (e.g. descope-attachment)
@@ -29539,6 +29621,7 @@ class RawAnchored extends createBaseClass$1({
     super.disconnectedCallback?.();
     this.#stretchObserver?.disconnect();
     this.#directionObserver?.disconnect();
+    this.#anchorClassObserver?.disconnect();
   }
 
   // Track whether anything is slotted, so the host display rule can hide an