@supersoniks/concorde 4.9.98-visual-stack.1 → 4.9.98-visual-stack.2

package/src/core/components/ui/tooltip/tooltip.ts

@@ -1,221 +1,243 @@
 import { html, LitElement, css, PropertyValues } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, query } from "lit/decorators.js";
+import {
+  computeFloatingPosition,
+  FloatingPlacement,
+  getFloatingBounds,
+  parsePlacement,
+  startFrameLoop,
+  supportsPopover,
+} from "@supersoniks/concorde/core/utils/positioning";
+
 const tagName = "sonic-tooltip";
+
+type TooltipPlacement = FloatingPlacement;
+
+const GAP = 4;
+
 @customElement(tagName)
 export class Tooltip extends LitElement {
+  static readonly supportsPopover = supportsPopover;
+
   static styles = [
     css`
       :host {
-        position: relative;
         display: inline-flex;
         align-items: center;
         text-align: center;
         --sc-tooltip-fw: var(--sc-font-weight-base, 400);
-        --sc-tooltip-position: calc(100% + 0.25rem);
       }
 
-      .tooltip:before {
-        position: absolute;
-        content: attr(data-tooltip-text);
-        font-size: 0.85rem;
-        display: block;
-        opacity: 0;
+      .tooltip-bubble {
+        position: fixed;
+        inset: auto;
+        margin: 0;
+        border: none;
         pointer-events: none;
+        font-size: 0.85rem;
         background: var(--sc-base-content, #000);
         padding: 0.32rem 0.55rem;
         border-radius: var(--sc-rounded);
         color: var(--sc-base, #fff);
-        z-index: 999;
         line-height: 1.1;
         width: max-content;
         max-width: 18rem;
         white-space: pre-line;
         font-weight: var(--sc-tooltip-fw);
-        transition: 0.2s;
-        scale: 0.9;
-        will-change: opacity, transform;
+        opacity: 0;
+        transition:
+          opacity 0.2s,
+          display 0.2s allow-discrete,
+          overlay 0.2s allow-discrete;
       }
 
-      :host(:focus-visible) .tooltip:before,
-      :host(.keyboard-focus) .tooltip:before,
-      .tooltip:hover:before {
+      .tooltip-bubble:popover-open {
         opacity: 1;
-        scale: 1;
       }
 
-      .disabled:before {
-        opacity: 0 !important;
-        scale: 0.9 !important;
-      }
-
-      :host(:not([placement])) .tooltip:before,
-      :host([placement="top"]) .tooltip:before {
-        bottom: var(--sc-tooltip-position);
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      :host([placement="top-end"]) .tooltip:before {
-        bottom: var(--sc-tooltip-position);
-        right: 0;
-      }
-      :host([placement="top-start"]) .tooltip:before {
-        bottom: var(--sc-tooltip-position);
-        left: 0;
-      }
-
-      :host([placement="bottom"]) .tooltip:before {
-        top: var(--sc-tooltip-position);
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      :host([placement="bottom-start"]) .tooltip:before {
-        top: var(--sc-tooltip-position);
-        left: 0;
-      }
-      :host([placement="bottom-end"]) .tooltip:before {
-        top: var(--sc-tooltip-position);
-        right: 0;
-      }
-
-      :host([placement="left"]) .tooltip:before {
-        top: 50%;
-        right: var(--sc-tooltip-position);
-        transform: translateY(-50%);
-      }
-
-      :host([placement="left-start"]) .tooltip:before {
-        top: 0;
-        right: var(--sc-tooltip-position);
-      }
-
-      :host([placement="left-end"]) .tooltip:before {
-        bottom: 0;
-        right: var(--sc-tooltip-position);
-      }
-
-      :host([placement="right"]) .tooltip:before {
-        top: 50%;
-        transform: translateY(-50%);
-        left: var(--sc-tooltip-position);
+      @starting-style {
+        .tooltip-bubble:popover-open {
+          opacity: 0;
+        }
       }
 
-      :host([placement="right-start"]) .tooltip:before {
-        top: 0;
-        left: var(--sc-tooltip-position);
+      .tooltip-bubble.disabled {
+        display: none !important;
       }
 
-      :host([placement="right-end"]) .tooltip:before {
-        bottom: 0;
-        left: var(--sc-tooltip-position);
+      @media (prefers-reduced-motion: reduce) {
+        .tooltip-bubble {
+          transition: none;
+        }
       }
     `,
   ];
 
-  @property({ type: String }) label = "";
-  @property({ type: String, reflect: true }) placement?:
-    | "top"
-    | "top-start"
-    | "top-end"
-    | "right"
-    | "right-start"
-    | "right-end"
-    | "bottom"
-    | "bottom-start"
-    | "bottom-end"
-    | "left"
-    | "left-start"
-    | "left-end";
+  @property({ type: String }) label?: string;
+  @property({ type: String, reflect: true }) placement?: TooltipPlacement;
 
   @property({ type: Boolean }) disabled = false;
   @property({ type: Boolean }) focusable = false;
 
-  private lastKeyWasTab = false;
-  private boundHandleKeyDown: (e: KeyboardEvent) => void;
-  private boundHandleMouseDown: () => void;
+  @query(".tooltip-bubble") private bubbleEl?: HTMLElement;
 
-  constructor() {
-    super();
-    this.boundHandleKeyDown = this.handleKeyDown.bind(this);
-    this.boundHandleMouseDown = this.handleMouseDown.bind(this);
+  private stopPositioning?: () => void;
+
+  private get isEffectivelyDisabled() {
+    return this.disabled || !this.formatLabel();
+  }
+
+  private formatLabel() {
+    return (this.label ?? "")
+      .replaceAll(" ", " ")
+      .trim()
+      .split("\n")
+      .map((line) => line.trim())
+      .join("\n");
   }
 
-  private handleKeyDown = (e: KeyboardEvent) => {
-    // Détecter si Tab ou Shift+Tab a été pressé
-    if (e.key === "Tab") {
-      this.lastKeyWasTab = true;
+  private computePosition() {
+    const bubble = this.bubbleEl;
+    if (!bubble) {
+      return;
     }
-  };
 
-  private handleMouseDown = () => {
-    // Réinitialiser le flag si la souris est utilisée
-    this.lastKeyWasTab = false;
-    // Retirer la classe si elle existe (au cas où)
-    this.classList.remove("keyboard-focus");
+    const { side, align } = parsePlacement(this.placement, "top", "center");
+
+    const { x, y } = computeFloatingPosition({
+      anchor: this.getBoundingClientRect(),
+      floating: bubble.getBoundingClientRect(),
+      side,
+      align,
+      gap: GAP,
+      bounds: getFloatingBounds(this, GAP),
+    });
+
+    Object.assign(bubble.style, {
+      left: `${Math.round(x)}px`,
+      top: `${Math.round(y)}px`,
+    });
+  }
+
+  private showTooltip = () => {
+    if (this.isEffectivelyDisabled || !this.bubbleEl) {
+      return;
+    }
+
+    if (!this.bubbleEl.matches(":popover-open")) {
+      this.bubbleEl.showPopover();
+    }
   };
 
-  private handleFocusIn = () => {
-    // Ajouter la classe seulement si le focus est venu du clavier (Tab)
-    if (this.lastKeyWasTab) {
-      this.classList.add("keyboard-focus");
+  private hideTooltip = () => {
+    if (this.bubbleEl?.matches(":popover-open")) {
+      this.bubbleEl.hidePopover();
     }
-    this.lastKeyWasTab = false;
   };
 
-  private handleFocusOut = () => {
-    this.classList.remove("keyboard-focus");
-    this.lastKeyWasTab = false;
+  private handleBeforeToggle = (e: ToggleEvent) => {
+    if (e.newState === "open") {
+      this.stopPositioning ??= startFrameLoop(() => this.computePosition());
+      return;
+    }
+
+    this.endPositioning();
   };
 
+  private endPositioning() {
+    this.stopPositioning?.();
+    this.stopPositioning = undefined;
+  }
+
+  private syncTabIndex() {
+    if (this.disabled) {
+      this.setAttribute("tabindex", "-1");
+    } else if (this.focusable) {
+      this.setAttribute("tabindex", "0");
+    } else {
+      this.removeAttribute("tabindex");
+    }
+  }
+
+  /** Fallback natif quand Popover API indisponible */
+  private syncNativeTitle() {
+    if (Tooltip.supportsPopover || this.isEffectivelyDisabled) {
+      this.removeAttribute("title");
+      return;
+    }
+
+    this.setAttribute("title", this.formatLabel().replaceAll("\n", " "));
+  }
+
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("focusin", this.handleFocusIn);
-    this.addEventListener("focusout", this.handleFocusOut);
-    // Écouter les événements au niveau du document avec capture pour détecter Tab
-    document.addEventListener("keydown", this.boundHandleKeyDown, true);
-    document.addEventListener("mousedown", this.boundHandleMouseDown, true);
+
+    if (!Tooltip.supportsPopover) {
+      return;
+    }
+
+    this.addEventListener("focusin", this.showTooltip);
+    this.addEventListener("focusout", this.hideTooltip);
   }
 
   disconnectedCallback() {
+    this.endPositioning();
+
+    if (Tooltip.supportsPopover) {
+      this.removeEventListener("focusin", this.showTooltip);
+      this.removeEventListener("focusout", this.hideTooltip);
+    }
+
     super.disconnectedCallback();
-    this.removeEventListener("focusin", this.handleFocusIn);
-    this.removeEventListener("focusout", this.handleFocusOut);
-    document.removeEventListener("keydown", this.boundHandleKeyDown, true);
-    document.removeEventListener("mousedown", this.boundHandleMouseDown, true);
   }
 
-  protected willUpdate(_changedProperties: PropertyValues): void {
-    if (_changedProperties.has("disabled")) {
-      const wasDisabledBefore = _changedProperties.get("disabled") === true;
-      if (this.disabled) {
-        this.setAttribute("tabindex", "-1");
-        this.classList.remove("keyboard-focus");
-      } else if (!this.disabled && wasDisabledBefore) {
-        if (this.focusable) {
-          this.setAttribute("tabindex", "0");
-        } else {
-          this.removeAttribute("tabindex");
-        }
-      }
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (
+      !this.hasUpdated ||
+      changedProperties.has("disabled") ||
+      changedProperties.has("focusable")
+    ) {
+      this.syncTabIndex();
     }
-    if (_changedProperties.has("focusable")) {
-      if (this.focusable && !this.disabled) {
-        this.setAttribute("tabindex", "0");
-      } else if (!this.focusable && !this.disabled) {
-        this.removeAttribute("tabindex");
-      }
+
+    if (
+      !this.hasUpdated ||
+      changedProperties.has("label") ||
+      changedProperties.has("disabled")
+    ) {
+      this.syncNativeTitle();
+    }
+
+    if (changedProperties.has("disabled") && this.disabled) {
+      this.hideTooltip();
+    }
+
+    if (changedProperties.has("label") && this.isEffectivelyDisabled) {
+      this.hideTooltip();
     }
-    super.willUpdate(_changedProperties);
+
+    super.willUpdate(changedProperties);
   }
 
   render() {
-    const disabledClass = this.disabled || this.label == "" ? "disabled" : "";
-    return html`<div
-      data-tooltip-text="${this.label.trim().replace("&nbsp;", " ")}"
-      class="tooltip ${disabledClass}"
-    >
-      <slot></slot>
-    </div>`;
+    if (!Tooltip.supportsPopover) {
+      return html`<slot></slot>`;
+    }
+
+    const disabledClass = this.isEffectivelyDisabled ? "disabled" : "";
+    const label = this.formatLabel();
+
+    return html`
+      <slot
+        @mouseenter=${this.showTooltip}
+        @mouseleave=${this.hideTooltip}
+      ></slot>
+      <span
+        popover="hint"
+        class="tooltip-bubble ${disabledClass}"
+        @beforetoggle=${this.handleBeforeToggle}
+        >${label}</span
+      >
+    `;
   }
 }

package/src/core/decorators/subscriber/ancestorAttribute.spec.ts

@@ -236,4 +236,30 @@ describe("ancestorAttribute", () => {
 
     expect(el.dataProvider).toBe("scope-a");
   });
+
+  it("suit un wrapper plus proche après reparent (sans opt-in)", async () => {
+    const tag = "test-ancestor-attr-dynamic-reparent";
+    class C extends HTMLElement {
+      @ancestorAttribute("dataProvider", { dynamic: true })
+      dataProvider: string | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const outer = document.createElement("div");
+    outer.setAttribute("dataProvider", "from-outer");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    outer.appendChild(el);
+    document.body.appendChild(outer);
+    expect(el.dataProvider).toBe("from-outer");
+
+    const closer = document.createElement("div");
+    closer.setAttribute("dataProvider", "from-closer");
+    closer.appendChild(el);
+    outer.appendChild(closer);
+    await flushFrames();
+
+    expect(el.dataProvider).toBe("from-closer");
+  });
 });

package/src/core/decorators/subscriber/ancestorAttribute.ts

@@ -5,10 +5,9 @@ import { ConnectedComponent, setSubscribable } from "./common";
 
 export type AncestorAttributeOptions = {
   /**
-   * Si true, le composant reste synchronisé avec les attributs ancêtres via
-   * `AncestorAttributeObserver` (mutations + reparenting). Requis pour que
-   * `@bind` / `@subscribe` avec `${dataProvider}` se re-lient quand le scope change.
-   * Défaut : false (lecture unique au connect, rétrocompat).
+   * Si true, reste synchronisé quand un attribut ancêtre change **et** au
+   * reparenting (sans flag séparé). MO attributs partagés ; childList seulement
+   * sur le parent direct (ignoré pour les siblings). Défaut : false.
    */
   dynamic?: boolean;
 };

package/src/core/decorators/subscriber/derive.ts

@@ -6,6 +6,7 @@ import {
   derive as deriveFn,
   type DeriveHandle,
 } from "../../utils/derive";
+import { compileJsonata } from "../../utils/jsonataRuntime";
 
 export type DeriveDecoratorOptions<
   I extends Record<string, unknown>,
@@ -60,9 +61,8 @@ export function deriveDecorator<
           if (!options.expr) {
             throw new Error("@derive : fournir `expr` ou `fn`.");
           }
-          const { compileJsonata } = await import(
-            "../../utils/jsonataRuntime"
-          );
+          // Static import: dynamic import() breaks consumer Vite builds
+          // (rewrites to \0vite/preload-helper → load-fallback null-byte error).
           const expr = compileJsonata(options.expr);
           return expr.evaluate({}, {
             ...(vars as Record<string, unknown>),

package/src/core/mixins/Fetcher.ts

@@ -160,7 +160,7 @@ const Fetcher = <
      * Elles sont ensuite injectées dans le publisher en accord avec la cible définie dans la propriété key
      * Un Toast est affiché si le chargement échoue
      */
-    protected async _fetchData() {
+    async _fetchData() {
       this.requestUpdate();
       if (!this.isFetchEnabled) return;
       this.api = new API(this.getApiConfiguration());

package/src/core/mixins/FormCheckable.ts

@@ -118,11 +118,6 @@ const Form = <T extends Constructor<FormElementInterface>>(superClass: T) => {
       this.requestUpdate();
       setTimeout(() => this.updateAllChecked(), 1);
 
-      // Désactivation du checked sur le publisher
-      // Pas sur de l'utilité mais provoque un bug
-      // if (this.publisher && !this.radio && !this.unique) {
-      //   this.publisher.checked = this._checked;
-      // }
     }
 
     handleChange() {
@@ -300,9 +295,7 @@ const Form = <T extends Constructor<FormElementInterface>>(superClass: T) => {
       if (!this.hasAttribute("checked")) {
         return;
       }
-      if (!this.publisher || this.publisher.get().checked !== false) {
-        setTimeout(() => (this.checked = true), 1);
-      }
+      setTimeout(() => (this.checked = true), 1);
     }
   }
   return FormCheckable;