@studiometa/ui 1.3.0 → 1.4.0

package/AnchorNav/AnchorNavLink.d.ts

@@ -5,7 +5,7 @@ export interface AnchorNavLinkProps extends AnchorScrollToProps {
         id: string;
     };
 }
-declare const AnchorNavLink_base: import("@studiometa/js-toolkit").BaseDecorator<import("../index.js").TransitionInterface, import("@studiometa/js-toolkit").Base<import("@studiometa/js-toolkit").BaseProps>, import("../index.js").TransitionProps>;
+declare const AnchorNavLink_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/index.js").TransitionInterface, import("@studiometa/js-toolkit").Base<import("@studiometa/js-toolkit").BaseProps>, import("#private/index.js").TransitionProps>;
 /**
  * Manage a slider item and its state transition.
  */

package/Button/StyledButton.twig

@@ -39,13 +39,14 @@
 
 {% set theme_primary = [
   'text-white bg-black dark:text-black dark:bg-white',
-  'hover:bg-opacity-75 disabled:bg-opacity-50'
+  'hover:bg-black/75 dark:hover:bg-white/75',
+  'disabled:bg-black/50 dark:disabled:bg-white/50',
 ] %}
 
 {% set theme_secondary = [
-  'ring ring-inset ring-2 ring-black dark:ring-white ring-opacity-25 dark:ring-opacity-25',
+  'ring ring-inset ring-2 ring-black/25 dark:ring-white/25',
   {
-    'hover:ring-opacity-100': (attr is defined and attr.disabled is not defined)
+    'hover:ring-black dark:hover:ring-white': (attr is defined and attr.disabled is not defined)
       or attr is not defined
   }
 ] %}

package/Fetch/Fetch.d.ts

@@ -0,0 +1,133 @@
+import { Base, type BaseConfig, type BaseProps } from '@studiometa/js-toolkit';
+export interface FetchProps extends BaseProps {
+    $el: HTMLAnchorElement | HTMLFormElement;
+    $refs: {
+        headers: HTMLInputElement[];
+    };
+    $options: {
+        history: boolean;
+        requestInit: RequestInit;
+        headers: Record<string, string>;
+        mode: 'replace' | 'prepend' | 'append' | 'morph';
+        selector: string;
+    };
+}
+export type FetchConstructor<T extends Fetch = Fetch> = {
+    new (...args: any[]): T;
+    prototype: Fetch;
+} & Pick<typeof Fetch, keyof typeof Fetch>;
+/**
+ * Fetch class.
+ * @link https://ui.studiometa.dev/-/components/Fetch/
+ */
+export declare class Fetch<T extends BaseProps = BaseProps> extends Base<T & FetchProps> {
+    /**
+     * Declare the `this.constructor` type
+     * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311
+     */
+    ['constructor']: FetchConstructor;
+    /**
+     * Fetch events enum.
+     */
+    static FETCH_EVENTS: {
+        readonly BEFORE_FETCH: "fetch-before";
+        readonly FETCH: "fetch-fetch";
+        readonly AFTER_FETCH: "fetch-after";
+        readonly BEFORE_UPDATE: "fetch-update-before";
+        readonly UPDATE: "fetch-update";
+        readonly AFTER_UPDATE: "fetch-update-after";
+        readonly ERROR: "fetch-error";
+    };
+    /**
+     * Fetch modes enum.
+     */
+    static FETCH_MODES: {
+        readonly REPLACE: "replace";
+        readonly PREPEND: "prepend";
+        readonly APPEND: "append";
+        readonly MORPH: "morph";
+    };
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    /**
+     * Header names used by the requestInit property.
+     * @internal
+     */
+    __headerNames: {
+        readonly ACCEPT: "accept";
+        readonly X_REQUESTED_BY: "x-requested-by";
+        readonly X_TRIGGERED_BY: "x-triggered-by";
+        readonly USER_AGENT: "user-agent";
+    };
+    /**
+     * DOM Parser to parse the new content to be injected.
+     * @internal
+     */
+    __domParser: DOMParser;
+    /**
+     * Abort controller to prevent multiple simultaneous fetches.
+     * @internal
+     */
+    __abortController: AbortController;
+    /**
+     * The client used for the fetch request.
+     */
+    get client(): typeof fetch;
+    /**
+     * The URL to use for the request.
+     */
+    get url(): URL;
+    /**
+     * Option for the fetch request.
+     */
+    get requestInit(): RequestInit;
+    /**
+     * Is the root element a link?
+     */
+    get isLink(): boolean;
+    /**
+     * Is the root element a form?
+     */
+    get isForm(): boolean;
+    /**
+     * Emit bubbling events.
+     * @inheritdoc
+     */
+    $emit(event: string, ...args: unknown[]): void;
+    /**
+     * If root element is a link, prevent its default behavior and fetch its URL.
+     */
+    onClick({ event }: {
+        event: MouseEvent;
+    }): void;
+    /**
+     * If root element is a form, prevent its default behavior on submit and fetch its action
+     * following the `method` attribute and with the form's data.
+     */
+    onSubmit({ event }: {
+        event: SubmitEvent;
+    }): void;
+    /**
+     * Update content on history back/forward navigation.
+     */
+    onWindowPopstate(): void;
+    /**
+     * Fetch given url.
+     */
+    fetch(url: URL, requestInit?: RequestInit): Promise<void>;
+    /**
+     * Update the DOM with new content from the fetched HTML.
+     * @internal
+     */
+    __updateDOM(fragment: Document): void;
+    /**
+     * Dispatch the contents to update to their matching FrameTarget.
+     */
+    update(url: URL, requestInit: RequestInit, content: string): Promise<void>;
+    /**
+     * Handle errors.
+     */
+    error(url: URL, requestInit: RequestInit, error: Error): void;
+}

package/Fetch/Fetch.js

@@ -0,0 +1,275 @@
+import { Base } from "@studiometa/js-toolkit";
+import { domScheduler, historyPush, isFunction } from "@studiometa/js-toolkit/utils";
+import morphdom from "morphdom";
+import { adoptNewScripts, getScripts } from "./utils.js";
+class Fetch extends Base {
+  /**
+   * Fetch events enum.
+   */
+  static FETCH_EVENTS = {
+    BEFORE_FETCH: "fetch-before",
+    FETCH: "fetch-fetch",
+    AFTER_FETCH: "fetch-after",
+    BEFORE_UPDATE: "fetch-update-before",
+    UPDATE: "fetch-update",
+    AFTER_UPDATE: "fetch-update-after",
+    ERROR: "fetch-error"
+  };
+  /**
+   * Fetch modes enum.
+   */
+  static FETCH_MODES = {
+    REPLACE: "replace",
+    PREPEND: "prepend",
+    APPEND: "append",
+    MORPH: "morph"
+  };
+  /**
+   * Config.
+   */
+  static config = {
+    name: "Fetch",
+    emits: Object.values(this.FETCH_EVENTS),
+    refs: ["headers[]"],
+    options: {
+      history: Boolean,
+      mode: {
+        type: String,
+        default: this.FETCH_MODES.REPLACE
+      },
+      requestInit: Object,
+      headers: Object,
+      selector: {
+        type: String,
+        default: "[id]"
+      }
+    }
+  };
+  /**
+   * Header names used by the requestInit property.
+   * @internal
+   */
+  __headerNames = {
+    ACCEPT: "accept",
+    X_REQUESTED_BY: "x-requested-by",
+    X_TRIGGERED_BY: "x-triggered-by",
+    USER_AGENT: "user-agent"
+  };
+  /**
+   * DOM Parser to parse the new content to be injected.
+   * @internal
+   */
+  __domParser = new DOMParser();
+  /**
+   * Abort controller to prevent multiple simultaneous fetches.
+   * @internal
+   */
+  __abortController = new AbortController();
+  /**
+   * The client used for the fetch request.
+   */
+  get client() {
+    return window.fetch.bind(window);
+  }
+  /**
+   * The URL to use for the request.
+   */
+  get url() {
+    const { $el, isForm } = this;
+    if (isForm) {
+      const { action, method } = this.$el;
+      const url = new URL(action);
+      if (method.toLowerCase() === "get") {
+        url.search = new URLSearchParams(new FormData($el)).toString();
+      }
+      return url;
+    }
+    return new URL($el.href);
+  }
+  /**
+   * Option for the fetch request.
+   */
+  get requestInit() {
+    const { __headerNames: headerNames, isForm, $el, $options, $refs } = this;
+    const { requestInit, headers } = $options;
+    const { headers: headerRefs } = $refs;
+    const requestedBy = "@studiometa/ui/Fetch";
+    const normalizedRequestInit = {
+      ...requestInit,
+      headers: {
+        [headerNames.USER_AGENT]: `${navigator.userAgent} ${requestedBy}`,
+        ...requestInit.headers,
+        ...headers
+      }
+    };
+    if (headerRefs) {
+      for (const header of headerRefs) {
+        if (header.dataset.name && header.value) {
+          normalizedRequestInit.headers[header.dataset.name] = header.value;
+        }
+      }
+    }
+    if (isForm) {
+      const form = $el;
+      normalizedRequestInit.method = form.method;
+      normalizedRequestInit.body = new FormData(form);
+    }
+    return normalizedRequestInit;
+  }
+  /**
+   * Is the root element a link?
+   */
+  get isLink() {
+    return this.$el instanceof HTMLAnchorElement;
+  }
+  /**
+   * Is the root element a form?
+   */
+  get isForm() {
+    return this.$el instanceof HTMLFormElement;
+  }
+  /**
+   * Emit bubbling events.
+   * @inheritdoc
+   */
+  $emit(event, ...args) {
+    const e = new CustomEvent(event, { detail: args, bubbles: true });
+    return super.$emit(e, ...args);
+  }
+  /**
+   * If root element is a link, prevent its default behavior and fetch its URL.
+   */
+  onClick({ event }) {
+    if (!this.isLink) return;
+    if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey && event.button === 0 && this.$el.target !== "_blank") {
+      event.preventDefault();
+      this.fetch(this.url, this.requestInit);
+    }
+  }
+  /**
+   * If root element is a form, prevent its default behavior on submit and fetch its action
+   * following the `method` attribute and with the form's data.
+   */
+  onSubmit({ event }) {
+    if (!this.isForm) return;
+    if (this.$el.target !== "_blank") {
+      event.preventDefault();
+      this.fetch(this.url, this.requestInit);
+    }
+  }
+  /**
+   * Update content on history back/forward navigation.
+   */
+  onWindowPopstate() {
+    if (!this.$options.history) return;
+    this.fetch(new URL(window.location.href), {
+      headers: {
+        [this.__headerNames.X_TRIGGERED_BY]: "popstate"
+      }
+    });
+  }
+  /**
+   * Fetch given url.
+   */
+  async fetch(url, requestInit = {}) {
+    const { FETCH_EVENTS } = this.constructor;
+    this.$emit(FETCH_EVENTS.BEFORE_FETCH, this, url, requestInit);
+    this.__abortController.abort();
+    this.__abortController = new AbortController();
+    const init = {
+      ...this.requestInit,
+      ...requestInit,
+      headers: {
+        ...this.requestInit.headers,
+        ...requestInit.headers
+      },
+      signal: this.__abortController.signal
+    };
+    this.$log("fetch", url, init);
+    this.$emit(FETCH_EVENTS.FETCH, this, url, requestInit);
+    try {
+      const content = await this.client(url, init).then((response) => response.text());
+      this.$emit(FETCH_EVENTS.AFTER_FETCH, this, url, requestInit, content);
+      this.update(url, init, content);
+    } catch (error) {
+      this.$emit(FETCH_EVENTS.AFTER_FETCH, this, url, requestInit);
+      this.error(url, init, error);
+    }
+  }
+  /**
+   * Update the DOM with new content from the fetched HTML.
+   * @internal
+   */
+  __updateDOM(fragment) {
+    const { FETCH_MODES } = this.constructor;
+    const { mode, selector } = this.$options;
+    for (const newElement of fragment.querySelectorAll(selector)) {
+      const oldElement = document.querySelector(
+        `[id="${newElement.id}"]`
+      );
+      if (!oldElement) {
+        continue;
+      }
+      const oldScripts = getScripts(oldElement);
+      switch (mode) {
+        case FETCH_MODES.APPEND:
+          oldElement.append(...newElement.childNodes);
+          adoptNewScripts(getScripts(oldElement), oldScripts);
+          break;
+        case FETCH_MODES.PREPEND:
+          oldElement.prepend(...newElement.childNodes);
+          adoptNewScripts(getScripts(oldElement), oldScripts);
+          break;
+        case FETCH_MODES.MORPH:
+          morphdom(oldElement, newElement);
+          adoptNewScripts(getScripts(oldElement), oldScripts);
+          break;
+        case FETCH_MODES.REPLACE:
+        default:
+          oldElement.replaceWith(newElement);
+          adoptNewScripts(getScripts(newElement), oldScripts);
+          break;
+      }
+    }
+  }
+  /**
+   * Dispatch the contents to update to their matching FrameTarget.
+   */
+  async update(url, requestInit, content) {
+    const { FETCH_EVENTS } = this.constructor;
+    const { history } = this.$options;
+    this.$log("content", url, content);
+    this.$emit(FETCH_EVENTS.BEFORE_UPDATE, this, url, requestInit, content);
+    const fragment = this.__domParser.parseFromString(content, "text/html");
+    if (history) {
+      if (requestInit?.headers?.[this.__headerNames.X_TRIGGERED_BY] !== "popstate") {
+        historyPush({ path: url.pathname, search: url.searchParams });
+      }
+      domScheduler.write(() => {
+        if (fragment.title) {
+          document.title = fragment.title;
+        }
+      });
+    }
+    this.$emit(FETCH_EVENTS.UPDATE, this, url, requestInit, fragment);
+    if (isFunction(document.startViewTransition)) {
+      await document.startViewTransition(() => {
+        this.__updateDOM(fragment);
+      }).ready;
+    } else {
+      this.__updateDOM(fragment);
+    }
+    this.$emit(FETCH_EVENTS.AFTER_UPDATE, this, url, requestInit, fragment);
+  }
+  /**
+   * Handle errors.
+   */
+  error(url, requestInit, error) {
+    this.$log("error", url, requestInit, error);
+    this.$emit(this.constructor.FETCH_EVENTS.ERROR, this, url, requestInit, error);
+  }
+}
+export {
+  Fetch
+};
+//# sourceMappingURL=Fetch.js.map

package/Fetch/Fetch.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Fetch/Fetch.ts"],
+  "sourcesContent": ["import { Base, type BaseConfig, type BaseProps } from '@studiometa/js-toolkit';\nimport { domScheduler, historyPush, isFunction } from '@studiometa/js-toolkit/utils';\nimport morphdom from 'morphdom';\nimport { adoptNewScripts, getScripts } from './utils.js';\n\nexport interface FetchProps extends BaseProps {\n  $el: HTMLAnchorElement | HTMLFormElement;\n  $refs: {\n    headers: HTMLInputElement[];\n  };\n  $options: {\n    history: boolean;\n    requestInit: RequestInit;\n    headers: Record<string, string>;\n    mode: 'replace' | 'prepend' | 'append' | 'morph';\n    selector: string;\n  };\n}\n\nexport type FetchConstructor<T extends Fetch = Fetch> = {\n  new (...args: any[]): T;\n  prototype: Fetch;\n} & Pick<typeof Fetch, keyof typeof Fetch>;\n\n/**\n * Fetch class.\n * @link https://ui.studiometa.dev/-/components/Fetch/\n */\nexport class Fetch<T extends BaseProps = BaseProps> extends Base<T & FetchProps> {\n  /**\n   * Declare the `this.constructor` type\n   * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311\n   */\n  declare ['constructor']: FetchConstructor;\n\n  /**\n   * Fetch events enum.\n   */\n  static FETCH_EVENTS = {\n    BEFORE_FETCH: 'fetch-before',\n    FETCH: 'fetch-fetch',\n    AFTER_FETCH: 'fetch-after',\n    BEFORE_UPDATE: 'fetch-update-before',\n    UPDATE: 'fetch-update',\n    AFTER_UPDATE: 'fetch-update-after',\n    ERROR: 'fetch-error',\n  } as const;\n\n  /**\n   * Fetch modes enum.\n   */\n  static FETCH_MODES = {\n    REPLACE: 'replace',\n    PREPEND: 'prepend',\n    APPEND: 'append',\n    MORPH: 'morph',\n  } as const;\n\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Fetch',\n    emits: Object.values(this.FETCH_EVENTS),\n    refs: ['headers[]'],\n    options: {\n      history: Boolean,\n      mode: {\n        type: String,\n        default: this.FETCH_MODES.REPLACE,\n      },\n      requestInit: Object,\n      headers: Object,\n      selector: {\n        type: String,\n        default: '[id]',\n      },\n    },\n  };\n\n  /**\n   * Header names used by the requestInit property.\n   * @internal\n   */\n  __headerNames = {\n    ACCEPT: 'accept',\n    X_REQUESTED_BY: 'x-requested-by',\n    X_TRIGGERED_BY: 'x-triggered-by',\n    USER_AGENT: 'user-agent',\n  } as const;\n\n  /**\n   * DOM Parser to parse the new content to be injected.\n   * @internal\n   */\n  __domParser = new DOMParser();\n\n  /**\n   * Abort controller to prevent multiple simultaneous fetches.\n   * @internal\n   */\n  __abortController = new AbortController();\n\n  /**\n   * The client used for the fetch request.\n   */\n  get client(): typeof fetch {\n    return window.fetch.bind(window);\n  }\n\n  /**\n   * The URL to use for the request.\n   */\n  get url(): URL {\n    const { $el, isForm } = this;\n\n    if (isForm) {\n      const { action, method } = this.$el as HTMLFormElement;\n      const url = new URL(action);\n\n      if (method.toLowerCase() === 'get') {\n        // @ts-expect-error URLSearchParams accepts FormData as parameter in the browser.\n        url.search = new URLSearchParams(new FormData($el)).toString();\n      }\n\n      return url;\n    }\n\n    return new URL($el.href);\n  }\n\n  /**\n   * Option for the fetch request.\n   */\n  get requestInit(): RequestInit {\n    const { __headerNames: headerNames, isForm, $el, $options, $refs } = this;\n    const { requestInit, headers } = $options;\n    const { headers: headerRefs } = $refs;\n    const requestedBy = '@studiometa/ui/Fetch';\n\n    const normalizedRequestInit = {\n      ...requestInit,\n      headers: {\n        [headerNames.USER_AGENT]: `${navigator.userAgent} ${requestedBy}`,\n        ...requestInit.headers,\n        ...headers,\n      },\n    };\n\n    if (headerRefs) {\n      for (const header of headerRefs) {\n        if (header.dataset.name && header.value) {\n          normalizedRequestInit.headers[header.dataset.name] = header.value;\n        }\n      }\n    }\n\n    if (isForm) {\n      const form = $el as HTMLFormElement;\n      normalizedRequestInit.method = form.method;\n      normalizedRequestInit.body = new FormData(form);\n    }\n\n    return normalizedRequestInit;\n  }\n\n  /**\n   * Is the root element a link?\n   */\n  get isLink() {\n    return this.$el instanceof HTMLAnchorElement;\n  }\n\n  /**\n   * Is the root element a form?\n   */\n  get isForm() {\n    return this.$el instanceof HTMLFormElement;\n  }\n\n  /**\n   * Emit bubbling events.\n   * @inheritdoc\n   */\n  $emit(event: string, ...args: unknown[]) {\n    const e = new CustomEvent(event, { detail: args, bubbles: true });\n    return super.$emit(e, ...args);\n  }\n\n  /**\n   * If root element is a link, prevent its default behavior and fetch its URL.\n   */\n  onClick({ event }: { event: MouseEvent }) {\n    if (!this.isLink) return;\n\n    if (\n      !event.ctrlKey &&\n      !event.shiftKey &&\n      !event.altKey &&\n      !event.metaKey &&\n      event.button === 0 &&\n      this.$el.target !== '_blank'\n    ) {\n      event.preventDefault();\n      this.fetch(this.url, this.requestInit);\n    }\n  }\n\n  /**\n   * If root element is a form, prevent its default behavior on submit and fetch its action\n   * following the `method` attribute and with the form's data.\n   */\n  onSubmit({ event }: { event: SubmitEvent }) {\n    if (!this.isForm) return;\n\n    if (this.$el.target !== '_blank') {\n      event.preventDefault();\n      this.fetch(this.url, this.requestInit);\n    }\n  }\n\n  /**\n   * Update content on history back/forward navigation.\n   */\n  onWindowPopstate() {\n    if (!this.$options.history) return;\n\n    this.fetch(new URL(window.location.href), {\n      headers: {\n        [this.__headerNames.X_TRIGGERED_BY]: 'popstate',\n      },\n    });\n  }\n\n  /**\n   * Fetch given url.\n   */\n  async fetch(url: URL, requestInit: RequestInit = {}) {\n    const { FETCH_EVENTS } = this.constructor;\n    this.$emit(FETCH_EVENTS.BEFORE_FETCH, this, url, requestInit);\n\n    this.__abortController.abort();\n    this.__abortController = new AbortController();\n    const init = {\n      ...this.requestInit,\n      ...requestInit,\n      headers: {\n        ...this.requestInit.headers,\n        ...requestInit.headers,\n      },\n      signal: this.__abortController.signal,\n    };\n\n    this.$log('fetch', url, init);\n    this.$emit(FETCH_EVENTS.FETCH, this, url, requestInit);\n\n    try {\n      const content = await this.client(url, init).then((response) => response.text());\n      this.$emit(FETCH_EVENTS.AFTER_FETCH, this, url, requestInit, content);\n      this.update(url, init, content);\n    } catch (error) {\n      this.$emit(FETCH_EVENTS.AFTER_FETCH, this, url, requestInit);\n      this.error(url, init, error);\n    }\n  }\n\n  /**\n   * Update the DOM with new content from the fetched HTML.\n   * @internal\n   */\n  __updateDOM(fragment: Document) {\n    const { FETCH_MODES } = this.constructor;\n    const { mode, selector } = this.$options;\n\n    // @ts-expect-error querySelectorAll is iterable in the browser\n    for (const newElement of fragment.querySelectorAll<HTMLElement>(selector)) {\n      const oldElement: HTMLElement = document.querySelector<HTMLElement>(\n        `[id=\"${newElement.id}\"]`,\n      );\n\n      if (!oldElement) {\n        continue;\n      }\n\n      const oldScripts = getScripts(oldElement);\n\n      switch (mode) {\n        case FETCH_MODES.APPEND:\n          oldElement.append(...newElement.childNodes);\n          adoptNewScripts(getScripts(oldElement), oldScripts);\n          break;\n        case FETCH_MODES.PREPEND:\n          oldElement.prepend(...newElement.childNodes);\n          adoptNewScripts(getScripts(oldElement), oldScripts);\n          break;\n        case FETCH_MODES.MORPH:\n          morphdom(oldElement, newElement);\n          adoptNewScripts(getScripts(oldElement), oldScripts);\n          break;\n        case FETCH_MODES.REPLACE:\n        default:\n          oldElement.replaceWith(newElement);\n          adoptNewScripts(getScripts(newElement), oldScripts);\n          break;\n      }\n    }\n  }\n\n  /**\n   * Dispatch the contents to update to their matching FrameTarget.\n   */\n  async update(url: URL, requestInit: RequestInit, content: string) {\n    const { FETCH_EVENTS } = this.constructor;\n    const { history } = this.$options;\n\n    this.$log('content', url, content);\n    this.$emit(FETCH_EVENTS.BEFORE_UPDATE, this, url, requestInit, content);\n\n    const fragment = this.__domParser.parseFromString(content, 'text/html');\n\n    if (history) {\n      if (requestInit?.headers?.[this.__headerNames.X_TRIGGERED_BY] !== 'popstate') {\n        historyPush({ path: url.pathname, search: url.searchParams });\n      }\n      domScheduler.write(() => {\n        if (fragment.title) {\n          document.title = fragment.title;\n        }\n      });\n    }\n\n    this.$emit(FETCH_EVENTS.UPDATE, this, url, requestInit, fragment);\n\n    if (isFunction(document.startViewTransition)) {\n      await document.startViewTransition(() => {\n        this.__updateDOM(fragment);\n      }).ready;\n    } else {\n      this.__updateDOM(fragment);\n    }\n\n    this.$emit(FETCH_EVENTS.AFTER_UPDATE, this, url, requestInit, fragment);\n  }\n\n  /**\n   * Handle errors.\n   */\n  error(url: URL, requestInit: RequestInit, error: Error) {\n    this.$log('error', url, requestInit, error);\n    this.$emit(this.constructor.FETCH_EVENTS.ERROR, this, url, requestInit, error);\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/Fetch/index.d.ts

@@ -0,0 +1 @@
+export * from './Fetch.js';

package/Fetch/index.js

@@ -0,0 +1,2 @@
+export * from "./Fetch.js";
+//# sourceMappingURL=index.js.map

package/Fetch/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Fetch/index.ts"],
+  "sourcesContent": ["export * from './Fetch.js';\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/Fetch/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function adoptNewScripts(newScripts: Set<HTMLScriptElement>, oldScripts: Set<HTMLScriptElement>): void;
+export declare function adoptNewScript(script: HTMLScriptElement): void;
+export declare function getScripts(el: HTMLElement): Set<HTMLScriptElement>;

package/Fetch/utils.js

@@ -0,0 +1,28 @@
+function adoptNewScripts(newScripts, oldScripts) {
+  for (const script of newScripts) {
+    if (oldScripts.has(script)) continue;
+    adoptNewScript(script);
+  }
+}
+function adoptNewScript(script) {
+  const newScript = document.createElement("script");
+  for (const attribute of script.getAttributeNames()) {
+    newScript.setAttribute(attribute, script.getAttribute(attribute));
+  }
+  if (script.textContent) {
+    newScript.textContent = script.textContent;
+  }
+  script.replaceWith(newScript);
+}
+function getScripts(el) {
+  return el.tagName === "SCRIPT" ? /* @__PURE__ */ new Set([el]) : (
+    // @ts-expect-error querySelectoAll is iterable.
+    new Set(el.querySelectorAll("script"))
+  );
+}
+export {
+  adoptNewScript,
+  adoptNewScripts,
+  getScripts
+};
+//# sourceMappingURL=utils.js.map

package/Fetch/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Fetch/utils.ts"],
+  "sourcesContent": ["export function adoptNewScripts(\n  newScripts: Set<HTMLScriptElement>,\n  oldScripts: Set<HTMLScriptElement>,\n) {\n  for (const script of newScripts) {\n    if (oldScripts.has(script)) continue;\n    adoptNewScript(script);\n  }\n}\n\nexport function adoptNewScript(script: HTMLScriptElement) {\n  const newScript = document.createElement('script');\n\n  for (const attribute of script.getAttributeNames()) {\n    newScript.setAttribute(attribute, script.getAttribute(attribute));\n  }\n\n  if (script.textContent) {\n    newScript.textContent = script.textContent;\n  }\n\n  script.replaceWith(newScript);\n}\n\nexport function getScripts(el: HTMLElement): Set<HTMLScriptElement> {\n  return el.tagName === 'SCRIPT'\n    ? new Set([el as HTMLScriptElement])\n    : // @ts-expect-error querySelectoAll is iterable.\n      new Set(el.querySelectorAll('script'));\n}\n"],
+  "mappings": "AAAO,SAAS,gBACd,YACA,YACA;AACA,aAAW,UAAU,YAAY;AAC/B,QAAI,WAAW,IAAI,MAAM,EAAG;AAC5B,mBAAe,MAAM;AAAA,EACvB;AACF;AAEO,SAAS,eAAe,QAA2B;AACxD,QAAM,YAAY,SAAS,cAAc,QAAQ;AAEjD,aAAW,aAAa,OAAO,kBAAkB,GAAG;AAClD,cAAU,aAAa,WAAW,OAAO,aAAa,SAAS,CAAC;AAAA,EAClE;AAEA,MAAI,OAAO,aAAa;AACtB,cAAU,cAAc,OAAO;AAAA,EACjC;AAEA,SAAO,YAAY,SAAS;AAC9B;AAEO,SAAS,WAAW,IAAyC;AAClE,SAAO,GAAG,YAAY,WAClB,oBAAI,IAAI,CAAC,EAAuB,CAAC;AAAA;AAAA,IAEjC,IAAI,IAAI,GAAG,iBAAiB,QAAQ,CAAC;AAAA;AAC3C;",
+  "names": []
+}

package/Frame/FrameTarget.d.ts

@@ -26,14 +26,8 @@ export declare class FrameTarget<T extends BaseProps = BaseProps> extends Transi
      * Get uniq ID.
      */
     get id(): string;
-    /**
-     * Get child `<script>` elements.
-     */
-    get __scripts(): HTMLScriptElement[];
     /**
      * Update the content from the new target.
      */
     updateContent(content?: Element): Promise<void>;
-    adoptNewScripts(scripts: HTMLScriptElement[], oldScripts: HTMLScriptElement[]): void;
-    adoptNewScript(script: HTMLScriptElement): void;
 }

package/Frame/FrameTarget.js

@@ -1,5 +1,6 @@
 import { Transition } from "../Transition/index.js";
 import morphdom from "morphdom";
+import { adoptNewScripts } from "../Fetch/utils.js";
 class FrameTarget extends Transition {
   /**
    * Config.
@@ -29,12 +30,6 @@ class FrameTarget extends Transition {
   get id() {
     return this.$el.id;
   }
-  /**
-   * Get child `<script>` elements.
-   */
-  get __scripts() {
-    return Array.from(this.$el.querySelectorAll("script"));
-  }
   /**
    * Update the content from the new target.
    */
@@ -43,12 +38,14 @@ class FrameTarget extends Transition {
       return;
     }
     const { mode } = this.$options;
-    const { $el, modes, __scripts: previousScripts } = this;
+    const { $el, modes } = this;
+    const previousScripts = new Set(this.$el.querySelectorAll("script"));
     if (mode === modes.APPEND || mode === modes.PREPEND) {
       const leaveTargets = Array.from($el.children);
       const enterTargets = Array.from(content.children);
       $el[mode](...Array.from(content.childNodes));
-      this.adoptNewScripts(this.__scripts, previousScripts);
+      const newScripts = new Set(this.$el.querySelectorAll("script"));
+      adoptNewScripts(newScripts, previousScripts);
       await Promise.all([this.leave(leaveTargets), this.enter(enterTargets)]);
     } else {
       await this.leave();
@@ -57,28 +54,11 @@ class FrameTarget extends Transition {
       } else {
         $el.replaceChildren(...Array.from(content.childNodes));
       }
-      this.adoptNewScripts(this.__scripts, previousScripts);
+      const newScripts = new Set(this.$el.querySelectorAll("script"));
+      adoptNewScripts(newScripts, previousScripts);
       await this.enter();
     }
   }
-  adoptNewScripts(scripts, oldScripts) {
-    for (const script of scripts) {
-      if (oldScripts.includes(script)) continue;
-      this.adoptNewScript(script);
-    }
-  }
-  adoptNewScript(script) {
-    const newScript = document.createElement("script");
-    for (const attribute of script.getAttributeNames()) {
-      newScript.setAttribute(attribute, script.getAttribute(attribute));
-    }
-    if (script.src) {
-      newScript.src = script.src;
-    } else if (script.textContent) {
-      newScript.textContent = script.textContent;
-    }
-    script.replaceWith(newScript);
-  }
 }
 export {
   FrameTarget

package/Frame/FrameTarget.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Frame/FrameTarget.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../Transition/index.js';\nimport morphdom from 'morphdom';\n\nexport interface FrameTargetProps extends BaseProps {\n  $options: {\n    mode: 'replace' | 'prepend' | 'append' | 'morph';\n  };\n}\n\n/**\n * FrameTarget class.\n */\nexport class FrameTarget<T extends BaseProps = BaseProps> extends Transition<T & FrameTargetProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameTarget',\n    options: {\n      mode: {\n        type: String,\n        default: 'replace', // or 'prepend' or 'append'\n      },\n    },\n  };\n\n  /**\n   * Different mode of content insertion.\n   */\n  modes = {\n    APPEND: 'append',\n    PREPEND: 'prepend',\n    REPLACE: 'replace',\n    MORPH: 'morph',\n  } as const;\n\n  /**\n   * Get uniq ID.\n   */\n  get id(): string {\n    return this.$el.id;\n  }\n\n  /**\n   * Get child `<script>` elements.\n   */\n  get __scripts() {\n    return Array.from(this.$el.querySelectorAll('script'));\n  }\n\n  /**\n   * Update the content from the new target.\n   */\n  async updateContent(content: Element = null) {\n    if (!content) {\n      return;\n    }\n\n    const { mode } = this.$options;\n    const { $el, modes, __scripts: previousScripts } = this;\n\n    // In append or prepend mode, the leave transition can be used to\n    // move the exisiting children of the root element, with the leave\n    // transition being applied in parallel of the enter transition.\n    if (mode === modes.APPEND || mode === modes.PREPEND) {\n      const leaveTargets = Array.from($el.children) as HTMLElement[];\n      const enterTargets = Array.from(content.children) as HTMLElement[];\n\n      $el[mode](...Array.from(content.childNodes));\n      this.adoptNewScripts(this.__scripts, previousScripts);\n      await Promise.all([this.leave(leaveTargets), this.enter(enterTargets)]);\n    } else {\n      await this.leave();\n      if (mode === modes.MORPH) {\n        morphdom($el, content);\n      } else {\n        $el.replaceChildren(...Array.from(content.childNodes));\n      }\n      this.adoptNewScripts(this.__scripts, previousScripts);\n      await this.enter();\n    }\n  }\n\n  adoptNewScripts(scripts: HTMLScriptElement[], oldScripts: HTMLScriptElement[]) {\n    for (const script of scripts) {\n      if (oldScripts.includes(script)) continue;\n      this.adoptNewScript(script);\n    }\n  }\n\n  adoptNewScript(script: HTMLScriptElement) {\n    const newScript = document.createElement('script');\n\n    for (const attribute of script.getAttributeNames()) {\n      newScript.setAttribute(attribute, script.getAttribute(attribute));\n    }\n\n    if (script.src) {\n      newScript.src = script.src;\n    } else if (script.textContent) {\n      newScript.textContent = script.textContent;\n    }\n\n    script.replaceWith(newScript);\n  }\n}\n"],
-  "mappings": "AACA,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AAWd,MAAM,oBAAqD,WAAiC;AAAA;AAAA;AAAA;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAa;AACf,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,YAAY;AACd,WAAO,MAAM,KAAK,KAAK,IAAI,iBAAiB,QAAQ,CAAC;AAAA,EACvD;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,cAAc,UAAmB,MAAM;AAC3C,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,UAAM,EAAE,KAAK,IAAI,KAAK;AACtB,UAAM,EAAE,KAAK,OAAO,WAAW,gBAAgB,IAAI;AAKnD,QAAI,SAAS,MAAM,UAAU,SAAS,MAAM,SAAS;AACnD,YAAM,eAAe,MAAM,KAAK,IAAI,QAAQ;AAC5C,YAAM,eAAe,MAAM,KAAK,QAAQ,QAAQ;AAEhD,UAAI,IAAI,EAAE,GAAG,MAAM,KAAK,QAAQ,UAAU,CAAC;AAC3C,WAAK,gBAAgB,KAAK,WAAW,eAAe;AACpD,YAAM,QAAQ,IAAI,CAAC,KAAK,MAAM,YAAY,GAAG,KAAK,MAAM,YAAY,CAAC,CAAC;AAAA,IACxE,OAAO;AACL,YAAM,KAAK,MAAM;AACjB,UAAI,SAAS,MAAM,OAAO;AACxB,iBAAS,KAAK,OAAO;AAAA,MACvB,OAAO;AACL,YAAI,gBAAgB,GAAG,MAAM,KAAK,QAAQ,UAAU,CAAC;AAAA,MACvD;AACA,WAAK,gBAAgB,KAAK,WAAW,eAAe;AACpD,YAAM,KAAK,MAAM;AAAA,IACnB;AAAA,EACF;AAAA,EAEA,gBAAgB,SAA8B,YAAiC;AAC7E,eAAW,UAAU,SAAS;AAC5B,UAAI,WAAW,SAAS,MAAM,EAAG;AACjC,WAAK,eAAe,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA,EAEA,eAAe,QAA2B;AACxC,UAAM,YAAY,SAAS,cAAc,QAAQ;AAEjD,eAAW,aAAa,OAAO,kBAAkB,GAAG;AAClD,gBAAU,aAAa,WAAW,OAAO,aAAa,SAAS,CAAC;AAAA,IAClE;AAEA,QAAI,OAAO,KAAK;AACd,gBAAU,MAAM,OAAO;AAAA,IACzB,WAAW,OAAO,aAAa;AAC7B,gBAAU,cAAc,OAAO;AAAA,IACjC;AAEA,WAAO,YAAY,SAAS;AAAA,EAC9B;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../Transition/index.js';\nimport morphdom from 'morphdom';\nimport { adoptNewScripts } from '../Fetch/utils.js';\n\nexport interface FrameTargetProps extends BaseProps {\n  $options: {\n    mode: 'replace' | 'prepend' | 'append' | 'morph';\n  };\n}\n\n/**\n * FrameTarget class.\n */\nexport class FrameTarget<T extends BaseProps = BaseProps> extends Transition<T & FrameTargetProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameTarget',\n    options: {\n      mode: {\n        type: String,\n        default: 'replace', // or 'prepend' or 'append'\n      },\n    },\n  };\n\n  /**\n   * Different mode of content insertion.\n   */\n  modes = {\n    APPEND: 'append',\n    PREPEND: 'prepend',\n    REPLACE: 'replace',\n    MORPH: 'morph',\n  } as const;\n\n  /**\n   * Get uniq ID.\n   */\n  get id(): string {\n    return this.$el.id;\n  }\n\n  /**\n   * Update the content from the new target.\n   */\n  async updateContent(content: Element = null) {\n    if (!content) {\n      return;\n    }\n\n    const { mode } = this.$options;\n    const { $el, modes } = this;\n    // @ts-expect-error querySelectoAll is iterable.\n    const previousScripts: Set<HTMLScriptElement> = new Set(this.$el.querySelectorAll('script'));\n\n    // In append or prepend mode, the leave transition can be used to\n    // move the exisiting children of the root element, with the leave\n    // transition being applied in parallel of the enter transition.\n    if (mode === modes.APPEND || mode === modes.PREPEND) {\n      const leaveTargets = Array.from($el.children) as HTMLElement[];\n      const enterTargets = Array.from(content.children) as HTMLElement[];\n\n      $el[mode](...Array.from(content.childNodes));\n      // @ts-expect-error querySelectoAll is iterable.\n      const newScripts: Set<HTMLScriptElement> = new Set(this.$el.querySelectorAll('script'));\n      adoptNewScripts(newScripts, previousScripts);\n      await Promise.all([this.leave(leaveTargets), this.enter(enterTargets)]);\n    } else {\n      await this.leave();\n      if (mode === modes.MORPH) {\n        morphdom($el, content);\n      } else {\n        $el.replaceChildren(...Array.from(content.childNodes));\n      }\n      // @ts-expect-error querySelectoAll is iterable.\n      const newScripts: Set<HTMLScriptElement> = new Set(this.$el.querySelectorAll('script'));\n      adoptNewScripts(newScripts, previousScripts);\n      await this.enter();\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AACrB,SAAS,uBAAuB;AAWzB,MAAM,oBAAqD,WAAiC;AAAA;AAAA;AAAA;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAa;AACf,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,cAAc,UAAmB,MAAM;AAC3C,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,UAAM,EAAE,KAAK,IAAI,KAAK;AACtB,UAAM,EAAE,KAAK,MAAM,IAAI;AAEvB,UAAM,kBAA0C,IAAI,IAAI,KAAK,IAAI,iBAAiB,QAAQ,CAAC;AAK3F,QAAI,SAAS,MAAM,UAAU,SAAS,MAAM,SAAS;AACnD,YAAM,eAAe,MAAM,KAAK,IAAI,QAAQ;AAC5C,YAAM,eAAe,MAAM,KAAK,QAAQ,QAAQ;AAEhD,UAAI,IAAI,EAAE,GAAG,MAAM,KAAK,QAAQ,UAAU,CAAC;AAE3C,YAAM,aAAqC,IAAI,IAAI,KAAK,IAAI,iBAAiB,QAAQ,CAAC;AACtF,sBAAgB,YAAY,eAAe;AAC3C,YAAM,QAAQ,IAAI,CAAC,KAAK,MAAM,YAAY,GAAG,KAAK,MAAM,YAAY,CAAC,CAAC;AAAA,IACxE,OAAO;AACL,YAAM,KAAK,MAAM;AACjB,UAAI,SAAS,MAAM,OAAO;AACxB,iBAAS,KAAK,OAAO;AAAA,MACvB,OAAO;AACL,YAAI,gBAAgB,GAAG,MAAM,KAAK,QAAQ,UAAU,CAAC;AAAA,MACvD;AAEA,YAAM,aAAqC,IAAI,IAAI,KAAK,IAAI,iBAAiB,QAAQ,CAAC;AACtF,sBAAgB,YAAY,eAAe;AAC3C,YAAM,KAAK,MAAM;AAAA,IACnB;AAAA,EACF;AACF;",
   "names": []
 }

package/Menu/MenuList.d.ts

@@ -24,7 +24,7 @@ export declare class MenuList<T extends BaseProps = BaseProps> extends Transitio
     /**
      * Override `Transition` options.
      */
-    get $options(): import("@studiometa/js-toolkit").BaseOptions & (T & MenuListProps & import("../index.js").TransitionProps)["$options"];
+    get $options(): import("@studiometa/js-toolkit").BaseOptions & (T & MenuListProps & import("#private/index.js").TransitionProps)["$options"];
     /**
      * Update tab indexes on mount.
      */

package/Modal/Modal.twig

@@ -32,7 +32,7 @@
 {% set modal_attributes =
   merge_html_attributes(
     modal_attr ?? null,
-    { class: 'z-goku fixed inset-0' },
+    { class: 'z-50 fixed inset-0' },
     {
       data_ref: 'modal',
       role: 'dialog',
@@ -47,7 +47,7 @@
 {% set overlay_attributes =
   merge_html_attributes(
     overlay_attr ?? null,
-    { class: 'z-under absolute inset-0 bg-black bg-opacity-75' },
+    { class: '-z-10 absolute inset-0 bg-black/75' },
     { data_ref: 'overlay', tabindex: '-1' }
   )
 %}
@@ -67,7 +67,7 @@
     { class: 'bg-white rounded shadow-l' },
     {
       data_ref: 'container',
-      class: 'z-above relative max-h-full overflow-x-hidden overflow-y-auto pointer-events-auto'
+      class: 'z-10 relative max-h-full overflow-x-hidden overflow-y-auto pointer-events-auto'
     }
   )
 %}

package/Panel/Panel.js

@@ -63,7 +63,8 @@ class Panel extends Modal {
           transform: this.containerOffset
         },
         to: {
-          transform: "none"
+          transform: "none",
+          translate: "none"
         }
       },
       "keep"
@@ -89,7 +90,8 @@ class Panel extends Modal {
         this.$refs.container,
         {
           from: {
-            transform: "none"
+            transform: "none",
+            translate: "none"
           },
           to: {
             transform: this.containerOffset

package/Panel/Panel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Panel/Panel.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition, matrix } from '@studiometa/js-toolkit/utils';\nimport { Modal } from '../Modal/index.js';\n\nexport interface PanelProps extends BaseProps {\n  $options: {\n    position: 'top' | 'right' | 'bottom' | 'left';\n  };\n}\n\nconst DEFAULT_POSITION = 'left';\n\n/**\n * Panel class.\n * @link https://ui.studiometa.dev/-/components/Panel/\n */\nexport class Panel<T extends BaseProps = BaseProps> extends Modal<T & PanelProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Panel',\n    options: {\n      position: {\n        type: String,\n        default: DEFAULT_POSITION,\n      },\n    },\n  };\n\n  static translateClasses = {\n    top: '-translate-y-full',\n    right: 'translate-x-full',\n    bottom: 'translate-y-full',\n    left: '-translate-x-full',\n  };\n\n  isClosing = false;\n\n  /**\n   * Get the translation class.\n   * @returns {string}\n   */\n  get translateClass() {\n    return (\n      Panel.translateClasses[this.$options.position] ?? Panel.translateClasses[DEFAULT_POSITION]\n    );\n  }\n\n  get containerOffset() {\n    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;\n\n    const store = {\n      top: {\n        translateY: (offsetTop + offsetHeight) * -1,\n      },\n      right: {\n        translateX: window.innerWidth - offsetLeft + offsetWidth * 2,\n      },\n      bottom: {\n        translateY: window.innerHeight - offsetTop + offsetHeight * 2,\n      },\n      left: {\n        translateX: (offsetLeft + offsetWidth) * -1,\n      },\n    };\n\n    return matrix(store[this.$options.position]);\n  }\n\n  /**\n   * Animate before opening.\n   * @this {PanelInterface}\n   * @returns {Promise<void>}\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.classList.remove('pointer-events-none');\n    transition(\n      this.$refs.container,\n      {\n        from: {\n          transform: this.containerOffset,\n        },\n        to: {\n          transform: 'none',\n        },\n      },\n      'keep',\n    );\n    transition(this.$refs.overlay, {\n      from: 'opacity-0',\n    });\n\n    return super.open();\n  }\n\n  /**\n   * Animate before closing.\n   * @this {PanelInterface}\n   * @returns {Promise<void>}\n   */\n  async close() {\n    if (!this.isOpen || this.isClosing) {\n      return Promise.resolve();\n    }\n\n    this.isClosing = true;\n\n    this.$refs.modal.classList.add('pointer-events-none');\n    await Promise.all([\n      transition(\n        this.$refs.container,\n        {\n          from: {\n            transform: 'none',\n          },\n          to: {\n            transform: this.containerOffset,\n          },\n        },\n        'keep',\n      ),\n      transition(\n        this.$refs.overlay,\n        {\n          to: 'opacity-0',\n        },\n        'keep',\n      ),\n    ]);\n\n    this.isClosing = false;\n\n    return super.close();\n  }\n}\n"],
-  "mappings": "AACA,SAAS,YAAY,cAAc;AACnC,SAAS,aAAa;AAQtB,MAAM,mBAAmB;AAMlB,MAAM,cAA+C,MAAsB;AAAA;AAAA;AAAA;AAAA,EAIhF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,UAAU;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO,mBAAmB;AAAA,IACxB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EAEA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAMZ,IAAI,iBAAiB;AACnB,WACE,MAAM,iBAAiB,KAAK,SAAS,QAAQ,KAAK,MAAM,iBAAiB,gBAAgB;AAAA,EAE7F;AAAA,EAEA,IAAI,kBAAkB;AACpB,UAAM,EAAE,WAAW,YAAY,aAAa,aAAa,IAAI,KAAK,MAAM;AAExE,UAAM,QAAQ;AAAA,MACZ,KAAK;AAAA,QACH,aAAa,YAAY,gBAAgB;AAAA,MAC3C;AAAA,MACA,OAAO;AAAA,QACL,YAAY,OAAO,aAAa,aAAa,cAAc;AAAA,MAC7D;AAAA,MACA,QAAQ;AAAA,QACN,YAAY,OAAO,cAAc,YAAY,eAAe;AAAA,MAC9D;AAAA,MACA,MAAM;AAAA,QACJ,aAAa,aAAa,eAAe;AAAA,MAC3C;AAAA,IACF;AAEA,WAAO,OAAO,MAAM,KAAK,SAAS,QAAQ,CAAC;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,OAAO;AACX,QAAI,KAAK,QAAQ;AACf,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,MAAM,MAAM,UAAU,OAAO,qBAAqB;AACvD;AAAA,MACE,KAAK,MAAM;AAAA,MACX;AAAA,QACE,MAAM;AAAA,UACJ,WAAW,KAAK;AAAA,QAClB;AAAA,QACA,IAAI;AAAA,UACF,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACA;AAAA,IACF;AACA,eAAW,KAAK,MAAM,SAAS;AAAA,MAC7B,MAAM;AAAA,IACR,CAAC;AAED,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,QAAQ;AACZ,QAAI,CAAC,KAAK,UAAU,KAAK,WAAW;AAClC,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,YAAY;AAEjB,SAAK,MAAM,MAAM,UAAU,IAAI,qBAAqB;AACpD,UAAM,QAAQ,IAAI;AAAA,MAChB;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,MAAM;AAAA,YACJ,WAAW;AAAA,UACb;AAAA,UACA,IAAI;AAAA,YACF,WAAW,KAAK;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,IAAI;AAAA,QACN;AAAA,QACA;AAAA,MACF;AAAA,IACF,CAAC;AAED,SAAK,YAAY;AAEjB,WAAO,MAAM,MAAM;AAAA,EACrB;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition, matrix } from '@studiometa/js-toolkit/utils';\nimport { Modal } from '../Modal/index.js';\n\nexport interface PanelProps extends BaseProps {\n  $options: {\n    position: 'top' | 'right' | 'bottom' | 'left';\n  };\n}\n\nconst DEFAULT_POSITION = 'left';\n\n/**\n * Panel class.\n * @link https://ui.studiometa.dev/-/components/Panel/\n */\nexport class Panel<T extends BaseProps = BaseProps> extends Modal<T & PanelProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Panel',\n    options: {\n      position: {\n        type: String,\n        default: DEFAULT_POSITION,\n      },\n    },\n  };\n\n  static translateClasses = {\n    top: '-translate-y-full',\n    right: 'translate-x-full',\n    bottom: 'translate-y-full',\n    left: '-translate-x-full',\n  };\n\n  isClosing = false;\n\n  /**\n   * Get the translation class.\n   * @returns {string}\n   */\n  get translateClass() {\n    return (\n      Panel.translateClasses[this.$options.position] ?? Panel.translateClasses[DEFAULT_POSITION]\n    );\n  }\n\n  get containerOffset() {\n    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;\n\n    const store = {\n      top: {\n        translateY: (offsetTop + offsetHeight) * -1,\n      },\n      right: {\n        translateX: window.innerWidth - offsetLeft + offsetWidth * 2,\n      },\n      bottom: {\n        translateY: window.innerHeight - offsetTop + offsetHeight * 2,\n      },\n      left: {\n        translateX: (offsetLeft + offsetWidth) * -1,\n      },\n    };\n\n    return matrix(store[this.$options.position]);\n  }\n\n  /**\n   * Animate before opening.\n   * @this {PanelInterface}\n   * @returns {Promise<void>}\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.classList.remove('pointer-events-none');\n    transition(\n      this.$refs.container,\n      {\n        from: {\n          transform: this.containerOffset,\n        },\n        to: {\n          transform: 'none',\n          translate: 'none',\n        },\n      },\n      'keep',\n    );\n    transition(this.$refs.overlay, {\n      from: 'opacity-0',\n    });\n\n    return super.open();\n  }\n\n  /**\n   * Animate before closing.\n   * @this {PanelInterface}\n   * @returns {Promise<void>}\n   */\n  async close() {\n    if (!this.isOpen || this.isClosing) {\n      return Promise.resolve();\n    }\n\n    this.isClosing = true;\n\n    this.$refs.modal.classList.add('pointer-events-none');\n    await Promise.all([\n      transition(\n        this.$refs.container,\n        {\n          from: {\n            transform: 'none',\n            translate: 'none',\n          },\n          to: {\n            transform: this.containerOffset,\n          },\n        },\n        'keep',\n      ),\n      transition(\n        this.$refs.overlay,\n        {\n          to: 'opacity-0',\n        },\n        'keep',\n      ),\n    ]);\n\n    this.isClosing = false;\n\n    return super.close();\n  }\n}\n"],
+  "mappings": "AACA,SAAS,YAAY,cAAc;AACnC,SAAS,aAAa;AAQtB,MAAM,mBAAmB;AAMlB,MAAM,cAA+C,MAAsB;AAAA;AAAA;AAAA;AAAA,EAIhF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,UAAU;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO,mBAAmB;AAAA,IACxB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EAEA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAMZ,IAAI,iBAAiB;AACnB,WACE,MAAM,iBAAiB,KAAK,SAAS,QAAQ,KAAK,MAAM,iBAAiB,gBAAgB;AAAA,EAE7F;AAAA,EAEA,IAAI,kBAAkB;AACpB,UAAM,EAAE,WAAW,YAAY,aAAa,aAAa,IAAI,KAAK,MAAM;AAExE,UAAM,QAAQ;AAAA,MACZ,KAAK;AAAA,QACH,aAAa,YAAY,gBAAgB;AAAA,MAC3C;AAAA,MACA,OAAO;AAAA,QACL,YAAY,OAAO,aAAa,aAAa,cAAc;AAAA,MAC7D;AAAA,MACA,QAAQ;AAAA,QACN,YAAY,OAAO,cAAc,YAAY,eAAe;AAAA,MAC9D;AAAA,MACA,MAAM;AAAA,QACJ,aAAa,aAAa,eAAe;AAAA,MAC3C;AAAA,IACF;AAEA,WAAO,OAAO,MAAM,KAAK,SAAS,QAAQ,CAAC;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,OAAO;AACX,QAAI,KAAK,QAAQ;AACf,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,MAAM,MAAM,UAAU,OAAO,qBAAqB;AACvD;AAAA,MACE,KAAK,MAAM;AAAA,MACX;AAAA,QACE,MAAM;AAAA,UACJ,WAAW,KAAK;AAAA,QAClB;AAAA,QACA,IAAI;AAAA,UACF,WAAW;AAAA,UACX,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACA;AAAA,IACF;AACA,eAAW,KAAK,MAAM,SAAS;AAAA,MAC7B,MAAM;AAAA,IACR,CAAC;AAED,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,QAAQ;AACZ,QAAI,CAAC,KAAK,UAAU,KAAK,WAAW;AAClC,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,YAAY;AAEjB,SAAK,MAAM,MAAM,UAAU,IAAI,qBAAqB;AACpD,UAAM,QAAQ,IAAI;AAAA,MAChB;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,MAAM;AAAA,YACJ,WAAW;AAAA,YACX,WAAW;AAAA,UACb;AAAA,UACA,IAAI;AAAA,YACF,WAAW,KAAK;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,IAAI;AAAA,QACN;AAAA,QACA;AAAA,MACF;AAAA,IACF,CAAC;AAED,SAAK,YAAY;AAEjB,WAAO,MAAM,MAAM;AAAA,EACrB;AACF;",
   "names": []
 }

package/Panel/Panel.twig

@@ -21,7 +21,7 @@
 {% set overlay_attr =
   merge_html_attributes(
     overlay_attr ?? null,
-    { class: 'z-under absolute inset-0 bg-black bg-opacity-75' },
+    { class: '-z-10 absolute inset-0 bg-black/75' },
     { class: 'transition duration-500 opacity-0' }
   )
 %}
@@ -32,7 +32,7 @@
     {},
     {
       class: [
-        'z-above absolute top-0 w-full h-full flex pointer-events-none',
+        'z-10 absolute top-0 w-full h-full flex pointer-events-none',
         {
           'top-0 left-0 items-start justify-center': position == 'top',
           'top-0 right-0 items-center justify-end': position == 'right',

package/ScrollAnimation/ScrollAnimationChildWithEase.d.ts

@@ -1,5 +1,5 @@
 import type { BaseConfig } from '@studiometa/js-toolkit';
-declare const ScrollAnimationChildWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("./AbstractScrollAnimation.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("./animationScrollWithEase.js").AnimationScrollWithEaseProps>;
+declare const ScrollAnimationChildWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/index.js").AnimationScrollWithEaseInterface, import("#private/index.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("#private/index.js").AnimationScrollWithEaseProps>;
 /**
  * ScrollAnimationChild class.
  */

package/ScrollAnimation/ScrollAnimationWithEase.d.ts

@@ -1,5 +1,5 @@
 import { type BaseConfig } from '@studiometa/js-toolkit';
-declare const ScrollAnimationWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("./AbstractScrollAnimation.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("./animationScrollWithEase.js").AnimationScrollWithEaseProps>;
+declare const ScrollAnimationWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/index.js").AnimationScrollWithEaseInterface, import("#private/index.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("#private/index.js").AnimationScrollWithEaseProps>;
 /**
  * ScrollAnimation class.
  */

package/Slider/SliderDots.d.ts

@@ -5,7 +5,7 @@ export interface SliderDotsProps extends BaseProps {
         dots: HTMLButtonElement[];
     };
 }
-declare const SliderDots_base: import("@studiometa/js-toolkit").BaseDecorator<import("../index.js").TransitionInterface, AbstractSliderChild<BaseProps>, import("../index.js").TransitionProps>;
+declare const SliderDots_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/index.js").TransitionInterface, AbstractSliderChild<BaseProps>, import("#private/index.js").TransitionProps>;
 /**
  * SliderDots class.
  */

package/Transition/Transition.d.ts

@@ -1,6 +1,6 @@
 import { Base, BaseProps } from '@studiometa/js-toolkit';
 import type { BaseConfig } from '@studiometa/js-toolkit';
-declare const Transition_base: import("@studiometa/js-toolkit").BaseDecorator<import("../index.js").TransitionInterface, Base<BaseProps>, import("../index.js").TransitionProps>;
+declare const Transition_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/index.js").TransitionInterface, Base<BaseProps>, import("#private/index.js").TransitionProps>;
 /**
  * Transition class.
  * @link https://ui.studiometa.dev/-/components/Transition/

package/index.d.ts

@@ -7,6 +7,7 @@ export * from './Cursor/index.js';
 export * from './Data/index.js';
 export * from './decorators/index.js';
 export * from './Draggable/index.js';
+export * from './Fetch/index.js';
 export * from './Figure/index.js';
 export * from './FigureVideo/index.js';
 export * from './Frame/index.js';

package/index.js

@@ -7,6 +7,7 @@ export * from "./Cursor/index.js";
 export * from "./Data/index.js";
 export * from "./decorators/index.js";
 export * from "./Draggable/index.js";
+export * from "./Fetch/index.js";
 export * from "./Figure/index.js";
 export * from "./FigureVideo/index.js";
 export * from "./Frame/index.js";

package/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../packages/ui/index.ts"],
-  "sourcesContent": ["export * from './Accordion/index.js';\nexport * from './Action/index.js';\nexport * from './AnchorNav/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Data/index.js';\nexport * from './decorators/index.js';\nexport * from './Draggable/index.js';\nexport * from './Figure/index.js';\nexport * from './FigureVideo/index.js';\nexport * from './Frame/index.js';\nexport * from './Hoverable/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Menu/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\nexport * from './Sentinel/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/index.js';\nexport * from './Tabs/index.js';\nexport * from './Transition/index.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './Accordion/index.js';\nexport * from './Action/index.js';\nexport * from './AnchorNav/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Data/index.js';\nexport * from './decorators/index.js';\nexport * from './Draggable/index.js';\nexport * from './Fetch/index.js';\nexport * from './Figure/index.js';\nexport * from './FigureVideo/index.js';\nexport * from './Frame/index.js';\nexport * from './Hoverable/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Menu/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\nexport * from './Sentinel/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/index.js';\nexport * from './Tabs/index.js';\nexport * from './Transition/index.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"
@@ -33,9 +33,9 @@
     "morphdom": "^2.7.5"
   },
   "devDependencies": {
-    "@studiometa/js-toolkit": "3.3.0"
+    "@studiometa/js-toolkit": "3.4.0"
   },
   "peerDependencies": {
-    "@studiometa/js-toolkit": "^3.3.0"
+    "@studiometa/js-toolkit": "^3.4.0"
   }
 }