@studiometa/ui 1.2.0 → 1.3.0

package/FigureVideo/FigureVideoTwicpics.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/FigureVideo/FigureVideoTwicpics.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n  withLeadingSlash,\n  withoutLeadingSlash,\n  withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { loadImage } from '../Figure/utils.js';\nimport { FigureVideo } from './FigureVideo.js';\n\nexport interface FigureVideoTwicpicsProps extends BaseProps {\n  $refs: {\n    video: HTMLVideoElement;\n  };\n  $options: {\n    lazy: boolean;\n    transform: string;\n    domain: string;\n    path: string;\n    step: number;\n    mode: string;\n  };\n}\n\n/**\n * Normalize the given size to the step option.\n */\n// eslint-disable-next-line no-use-before-define\nfunction normalizeSize(that: FigureVideoTwicpics, prop: string): number {\n  const { step } = that.$options;\n  return Math.ceil(that.$refs.video[prop] / step) * step;\n}\n\n/**\n * FigureVideo class.\n *\n * Manager lazyloading image sources.\n */\nexport class FigureVideoTwicpics<T extends BaseProps = BaseProps> extends FigureVideo<\n  T & FigureVideoTwicpicsProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...FigureVideo.config,\n    name: 'FigureVideoTwicpics',\n    options: {\n      ...FigureVideo.config.options,\n      transform: String,\n      domain: String,\n      path: String,\n      step: {\n        type: Number,\n        default: 50,\n      },\n      mode: {\n        type: String,\n        default: 'cover',\n      },\n    },\n  };\n\n  /**\n   * Get the Twicpics path.\n   */\n  get path(): string {\n    return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));\n  }\n\n  /**\n   * Get the Twicpics domain.\n   */\n  get domain(): string {\n    if (this.$options.domain) {\n      return this.$options.domain;\n    }\n    const url = new URL(this.sources[0].dataset.src);\n    return url.host;\n  }\n\n  /**\n   * Format the source for Twicpics.\n   * @param {string} src\n   * @param {Array} options\n   * @returns {string}\n   */\n  formatSrc(src: string, options: Array<string> = []): string {\n    const url = new URL(src, 'https://localhost');\n    url.host = this.domain;\n    url.port = '';\n\n    if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {\n      url.pathname = `/${this.path}${url.pathname}`;\n    }\n\n    const width = normalizeSize(this, 'offsetWidth');\n    const height = normalizeSize(this, 'offsetHeight');\n\n    this.$log(this.$options.mode, width, height);\n\n    url.searchParams.set(\n      'twic',\n      ['v1', this.$options.transform, `${this.$options.mode}=${width}x${height}`, ...options]\n        .filter(Boolean)\n        .join('/'),\n    );\n\n    url.search = decodeURIComponent(url.search);\n\n    return url.toString();\n  }\n\n  /**\n   * Load poster\n   */\n  loadPoster(): Promise<void|HTMLImageElement> {\n    const { video } = this.$refs;\n\n    if (!video.dataset.poster) {\n      return Promise.resolve();\n    }\n\n    const twicPoster = this.formatSrc(video.dataset.poster);\n\n    return loadImage(twicPoster).then(() => {\n      video.poster = twicPoster;\n      this.$log('fresh poster loaded');\n    });\n  }\n\n  /**\n   * Load sources\n   */\n  loadSources(): Promise<void> {\n    const { video } = this.$refs;\n\n    this.sources.forEach((source) => {\n      if (!source.dataset.src) {\n        return;\n      }\n      source.src = this.formatSrc(\n        source.dataset.src,\n        source.dataset.output ? [`output=${source.dataset.output}`] : [],\n      );\n    });\n\n    return new Promise((resolve) => {\n      const loadHandler = () => {\n        resolve();\n        video.removeEventListener('canplaythrough', loadHandler);\n        this.$log('fresh sources loaded');\n      };\n\n      video.addEventListener('canplaythrough', loadHandler);\n\n      this.$refs.video.width = normalizeSize(this, 'offsetWidth');\n      this.$refs.video.height = normalizeSize(this, 'offsetHeight');\n\n      video.load();\n    });\n  }\n\n  /**\n   * Reassign the source from the original on resize.\n   */\n  async resized() {\n    const width = normalizeSize(this, 'offsetWidth');\n    const height = normalizeSize(this, 'offsetHeight');\n\n    if (width === this.$refs.video.width && height === this.$refs.video.height) {\n      return;\n    }\n\n    this.$refs.video.width = width;\n    this.$refs.video.height = height;\n\n    await this.load();\n  }\n\n  /**\n   * Do not terminate on image load as we need to set the src on resize.\n   */\n  onLoad() {\n    // Do not terminate on image load as we need.\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n  withLeadingSlash,\n  withoutLeadingSlash,\n  withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { loadImage } from '../Figure/utils.js';\nimport { FigureVideo } from './FigureVideo.js';\n\nexport interface FigureVideoTwicpicsProps extends BaseProps {\n  $refs: {\n    video: HTMLVideoElement;\n  };\n  $options: {\n    lazy: boolean;\n    transform: string;\n    domain: string;\n    path: string;\n    step: number;\n    mode: string;\n  };\n}\n\n/**\n * Normalize the given size to the step option.\n */\n// eslint-disable-next-line no-use-before-define\nfunction normalizeSize(that: FigureVideoTwicpics, prop: string): number {\n  const { step } = that.$options;\n  return Math.ceil(that.$refs.video[prop] / step) * step;\n}\n\n/**\n * FigureVideoTwicpics class.\n *\n * Manager lazyloading image sources.\n * @link https://ui.studiometa.dev/-/components/FigureVideoTwicpics/\n */\nexport class FigureVideoTwicpics<T extends BaseProps = BaseProps> extends FigureVideo<\n  T & FigureVideoTwicpicsProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...FigureVideo.config,\n    name: 'FigureVideoTwicpics',\n    options: {\n      ...FigureVideo.config.options,\n      transform: String,\n      domain: String,\n      path: String,\n      step: {\n        type: Number,\n        default: 50,\n      },\n      mode: {\n        type: String,\n        default: 'cover',\n      },\n    },\n  };\n\n  /**\n   * Get the Twicpics path.\n   */\n  get path(): string {\n    return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));\n  }\n\n  /**\n   * Get the Twicpics domain.\n   */\n  get domain(): string {\n    if (this.$options.domain) {\n      return this.$options.domain;\n    }\n    const url = new URL(this.sources[0].dataset.src);\n    return url.host;\n  }\n\n  /**\n   * Format the source for Twicpics.\n   * @param {string} src\n   * @param {Array} options\n   * @returns {string}\n   */\n  formatSrc(src: string, options: Array<string> = []): string {\n    const url = new URL(src, 'https://localhost');\n    url.host = this.domain;\n    url.port = '';\n\n    if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {\n      url.pathname = `/${this.path}${url.pathname}`;\n    }\n\n    const width = normalizeSize(this, 'offsetWidth');\n    const height = normalizeSize(this, 'offsetHeight');\n\n    this.$log(this.$options.mode, width, height);\n\n    url.searchParams.set(\n      'twic',\n      ['v1', this.$options.transform, `${this.$options.mode}=${width}x${height}`, ...options]\n        .filter(Boolean)\n        .join('/'),\n    );\n\n    url.search = decodeURIComponent(url.search);\n\n    return url.toString();\n  }\n\n  /**\n   * Load poster\n   */\n  loadPoster(): Promise<void|HTMLImageElement> {\n    const { video } = this.$refs;\n\n    if (!video.dataset.poster) {\n      return Promise.resolve();\n    }\n\n    const twicPoster = this.formatSrc(video.dataset.poster);\n\n    return loadImage(twicPoster).then(() => {\n      video.poster = twicPoster;\n      this.$log('fresh poster loaded');\n    });\n  }\n\n  /**\n   * Load sources\n   */\n  loadSources(): Promise<void> {\n    const { video } = this.$refs;\n\n    this.sources.forEach((source) => {\n      if (!source.dataset.src) {\n        return;\n      }\n      source.src = this.formatSrc(\n        source.dataset.src,\n        source.dataset.output ? [`output=${source.dataset.output}`] : [],\n      );\n    });\n\n    return new Promise((resolve) => {\n      const loadHandler = () => {\n        resolve();\n        video.removeEventListener('canplaythrough', loadHandler);\n        this.$log('fresh sources loaded');\n      };\n\n      video.addEventListener('canplaythrough', loadHandler);\n\n      this.$refs.video.width = normalizeSize(this, 'offsetWidth');\n      this.$refs.video.height = normalizeSize(this, 'offsetHeight');\n\n      video.load();\n    });\n  }\n\n  /**\n   * Reassign the source from the original on resize.\n   */\n  async resized() {\n    const width = normalizeSize(this, 'offsetWidth');\n    const height = normalizeSize(this, 'offsetHeight');\n\n    if (width === this.$refs.video.width && height === this.$refs.video.height) {\n      return;\n    }\n\n    this.$refs.video.width = width;\n    this.$refs.video.height = height;\n\n    await this.load();\n  }\n\n  /**\n   * Do not terminate on image load as we need to set the src on resize.\n   */\n  onLoad() {\n    // Do not terminate on image load as we need.\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/Frame/Frame.d.ts

@@ -20,7 +20,7 @@ export interface FrameProps extends BaseProps {
 }
 /**
  * Frame class.
- * @see https://ui.studiometa.dev/-/components/Frame/
+ * @link https://ui.studiometa.dev/-/components/Frame/
  */
 export declare class Frame<T extends BaseProps = BaseProps> extends Base<T & FrameProps> {
     /**

package/Frame/Frame.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Frame/Frame.ts"],
-  "sourcesContent": ["import { Base, getClosestParent } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { domScheduler, historyPush } from '@studiometa/js-toolkit/utils';\nimport { FrameAnchor } from './FrameAnchor.js';\nimport { FrameForm } from './FrameForm.js';\nimport { FrameTarget } from './FrameTarget.js';\nimport { FrameLoader } from './FrameLoader.js';\nimport type { FrameRequestInit, FrameTriggerEvent } from './types.js';\nimport { EVENTS } from './utils.js';\n\nexport interface FrameProps extends BaseProps {\n  $children: {\n    FrameAnchor: FrameAnchor[];\n    FrameForm: FrameForm[];\n    FrameTarget: FrameTarget[];\n    FrameLoader: FrameLoader[];\n  };\n  $options: {\n    history: boolean;\n    requestInit: RequestInit;\n    headers: Record<string, string>;\n  };\n}\n\n/**\n * Frame class.\n * @see https://ui.studiometa.dev/-/components/Frame/\n */\nexport class Frame<T extends BaseProps = BaseProps> extends Base<T & FrameProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Frame',\n    emits: Object.values(EVENTS),\n    components: {\n      FrameAnchor,\n      FrameForm,\n      FrameTarget,\n      FrameLoader,\n    },\n    options: {\n      history: Boolean,\n      requestInit: Object,\n      headers: Object,\n    },\n  };\n\n  /**\n   * DOM Parser to parse the new content to be injected.\n   */\n  domParser = new DOMParser();\n\n  /**\n   * Abort controller to prevent multiple simultaneous fetches.\n   */\n  abortController = new AbortController();\n\n  /**\n   * Header names.\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   * Get uniq id.\n   */\n  get id() {\n    return this.$el.id;\n  }\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   * Default request init.\n   */\n  get requestInit(): RequestInit {\n    const { headerNames } = this;\n    const { requestInit, headers } = this.$options;\n    const requestedBy = '@studiometa/ui/Frame';\n\n    return {\n      ...requestInit,\n      headers: {\n        [headerNames.ACCEPT]: 'text/*',\n        [headerNames.X_REQUESTED_BY]: requestedBy,\n        [headerNames.USER_AGENT]: `${navigator.userAgent} ${requestedBy}`,\n        ...requestInit.headers,\n        ...headers,\n      },\n    };\n  }\n\n  /**\n   * Get chidlren limited to the current instance.\n   */\n  getDirectChildren(name: keyof FrameProps['$children']) {\n    const children = [];\n    for (const child of this.$children[name]) {\n      if (getClosestParent(child, this.constructor) === this) {\n        children.push(child);\n      }\n    }\n    return children;\n  }\n\n  /**\n   * Fetch new content on frame-trigger.\n   */\n  onFrameAnchorFrameTrigger({ args: [url, requestInit] }: { args: FrameTriggerEvent['detail'] }) {\n    this.fetch(url, requestInit);\n  }\n\n  /**\n   * Fetch new content on frame-trigger.\n   */\n  onFrameFormFrameTrigger({ args: [url, requestInit] }: { args: [URL, FrameRequestInit] }) {\n    this.fetch(url, requestInit);\n  }\n\n  /**\n   * Update content on history back/forward navigation.\n   */\n  onWindowPopstate() {\n    this.fetch(new URL(window.location.href), {\n      headers: {\n        [this.headerNames.X_TRIGGERED_BY]: 'popstate',\n      },\n    });\n  }\n\n  /**\n   * Trigger FrameLoaders enter.\n   */\n  onFrameFetchBefore() {\n    for (const loader of this.getDirectChildren('FrameLoader')) {\n      loader.enter();\n    }\n  }\n\n  /**\n   * Trigger FrameLoaders leave.\n   */\n  onFrameFetchAfter() {\n    for (const loader of this.getDirectChildren('FrameLoader')) {\n      loader.leave();\n    }\n  }\n\n  emitSync(event: string, trigger: FrameForm | FrameAnchor = null, ...args: any[]) {\n    this.$emit(event, ...args);\n    trigger?.$emit(event, ...args);\n  }\n\n  /**\n   * Fetch given url.\n   */\n  async fetch(url: URL, requestInit: FrameRequestInit = {}) {\n    this.emitSync(EVENTS.FETCH_BEFORE, requestInit.trigger, 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.emitSync(EVENTS.FETCH, init.trigger, url, init);\n\n    try {\n      const content = await this.client(url, init).then((response) => response.text());\n      this.emitSync(EVENTS.FETCH_AFTER, init.trigger, url, requestInit, content);\n      this.content(url, init, content);\n    } catch (error) {\n      this.emitSync(EVENTS.FETCH_AFTER, init.trigger, url, requestInit, error);\n      this.error(url, init, error);\n    }\n  }\n\n  /**\n   * Dispatch the contents to update to their matching FrameTarget.\n   */\n  async content(url: URL, requestInit: FrameRequestInit, content: string) {\n    this.$log('content', url, content);\n    this.emitSync(EVENTS.CONTENT, requestInit.trigger, url, requestInit, content);\n\n    const doc = this.domParser.parseFromString(content, 'text/html');\n    const el = doc.querySelector(`#${this.id}`) ?? doc;\n    const promises = [];\n\n    // @todo inject styles and scripts from new <head>\n    if (this.$options.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 (doc.title) document.title = doc.title;\n      });\n    }\n\n    for (const frameTarget of this.getDirectChildren('FrameTarget')) {\n      promises.push(frameTarget.updateContent(el.querySelector(`#${frameTarget.id}`)));\n    }\n\n    await Promise.all(promises);\n\n    this.emitSync(EVENTS.CONTENT_AFTER, requestInit.trigger, url, requestInit, content);\n\n    // We need to update the root instance to make sure newly inserted\n    // components are correctly detected and mounted. This avoid having\n    // to declare all potentials component as children of the Frame component.\n    await this.$root.$update();\n  }\n\n  /**\n   * Handle errors.\n   */\n  async error(url: URL, requestInit: FrameRequestInit, error: Error) {\n    this.$log('error', url, requestInit, error);\n    this.emitSync(EVENTS.ERROR, requestInit.trigger, url, requestInit, error);\n  }\n}\n"],
+  "sourcesContent": ["import { Base, getClosestParent } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { domScheduler, historyPush } from '@studiometa/js-toolkit/utils';\nimport { FrameAnchor } from './FrameAnchor.js';\nimport { FrameForm } from './FrameForm.js';\nimport { FrameTarget } from './FrameTarget.js';\nimport { FrameLoader } from './FrameLoader.js';\nimport type { FrameRequestInit, FrameTriggerEvent } from './types.js';\nimport { EVENTS } from './utils.js';\n\nexport interface FrameProps extends BaseProps {\n  $children: {\n    FrameAnchor: FrameAnchor[];\n    FrameForm: FrameForm[];\n    FrameTarget: FrameTarget[];\n    FrameLoader: FrameLoader[];\n  };\n  $options: {\n    history: boolean;\n    requestInit: RequestInit;\n    headers: Record<string, string>;\n  };\n}\n\n/**\n * Frame class.\n * @link https://ui.studiometa.dev/-/components/Frame/\n */\nexport class Frame<T extends BaseProps = BaseProps> extends Base<T & FrameProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Frame',\n    emits: Object.values(EVENTS),\n    components: {\n      FrameAnchor,\n      FrameForm,\n      FrameTarget,\n      FrameLoader,\n    },\n    options: {\n      history: Boolean,\n      requestInit: Object,\n      headers: Object,\n    },\n  };\n\n  /**\n   * DOM Parser to parse the new content to be injected.\n   */\n  domParser = new DOMParser();\n\n  /**\n   * Abort controller to prevent multiple simultaneous fetches.\n   */\n  abortController = new AbortController();\n\n  /**\n   * Header names.\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   * Get uniq id.\n   */\n  get id() {\n    return this.$el.id;\n  }\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   * Default request init.\n   */\n  get requestInit(): RequestInit {\n    const { headerNames } = this;\n    const { requestInit, headers } = this.$options;\n    const requestedBy = '@studiometa/ui/Frame';\n\n    return {\n      ...requestInit,\n      headers: {\n        [headerNames.ACCEPT]: 'text/*',\n        [headerNames.X_REQUESTED_BY]: requestedBy,\n        [headerNames.USER_AGENT]: `${navigator.userAgent} ${requestedBy}`,\n        ...requestInit.headers,\n        ...headers,\n      },\n    };\n  }\n\n  /**\n   * Get chidlren limited to the current instance.\n   */\n  getDirectChildren(name: keyof FrameProps['$children']) {\n    const children = [];\n    for (const child of this.$children[name]) {\n      if (getClosestParent(child, this.constructor) === this) {\n        children.push(child);\n      }\n    }\n    return children;\n  }\n\n  /**\n   * Fetch new content on frame-trigger.\n   */\n  onFrameAnchorFrameTrigger({ args: [url, requestInit] }: { args: FrameTriggerEvent['detail'] }) {\n    this.fetch(url, requestInit);\n  }\n\n  /**\n   * Fetch new content on frame-trigger.\n   */\n  onFrameFormFrameTrigger({ args: [url, requestInit] }: { args: [URL, FrameRequestInit] }) {\n    this.fetch(url, requestInit);\n  }\n\n  /**\n   * Update content on history back/forward navigation.\n   */\n  onWindowPopstate() {\n    this.fetch(new URL(window.location.href), {\n      headers: {\n        [this.headerNames.X_TRIGGERED_BY]: 'popstate',\n      },\n    });\n  }\n\n  /**\n   * Trigger FrameLoaders enter.\n   */\n  onFrameFetchBefore() {\n    for (const loader of this.getDirectChildren('FrameLoader')) {\n      loader.enter();\n    }\n  }\n\n  /**\n   * Trigger FrameLoaders leave.\n   */\n  onFrameFetchAfter() {\n    for (const loader of this.getDirectChildren('FrameLoader')) {\n      loader.leave();\n    }\n  }\n\n  emitSync(event: string, trigger: FrameForm | FrameAnchor = null, ...args: any[]) {\n    this.$emit(event, ...args);\n    trigger?.$emit(event, ...args);\n  }\n\n  /**\n   * Fetch given url.\n   */\n  async fetch(url: URL, requestInit: FrameRequestInit = {}) {\n    this.emitSync(EVENTS.FETCH_BEFORE, requestInit.trigger, 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.emitSync(EVENTS.FETCH, init.trigger, url, init);\n\n    try {\n      const content = await this.client(url, init).then((response) => response.text());\n      this.emitSync(EVENTS.FETCH_AFTER, init.trigger, url, requestInit, content);\n      this.content(url, init, content);\n    } catch (error) {\n      this.emitSync(EVENTS.FETCH_AFTER, init.trigger, url, requestInit, error);\n      this.error(url, init, error);\n    }\n  }\n\n  /**\n   * Dispatch the contents to update to their matching FrameTarget.\n   */\n  async content(url: URL, requestInit: FrameRequestInit, content: string) {\n    this.$log('content', url, content);\n    this.emitSync(EVENTS.CONTENT, requestInit.trigger, url, requestInit, content);\n\n    const doc = this.domParser.parseFromString(content, 'text/html');\n    const el = doc.querySelector(`#${this.id}`) ?? doc;\n    const promises = [];\n\n    // @todo inject styles and scripts from new <head>\n    if (this.$options.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 (doc.title) document.title = doc.title;\n      });\n    }\n\n    for (const frameTarget of this.getDirectChildren('FrameTarget')) {\n      promises.push(frameTarget.updateContent(el.querySelector(`#${frameTarget.id}`)));\n    }\n\n    await Promise.all(promises);\n\n    this.emitSync(EVENTS.CONTENT_AFTER, requestInit.trigger, url, requestInit, content);\n\n    // We need to update the root instance to make sure newly inserted\n    // components are correctly detected and mounted. This avoid having\n    // to declare all potentials component as children of the Frame component.\n    await this.$root.$update();\n  }\n\n  /**\n   * Handle errors.\n   */\n  async error(url: URL, requestInit: FrameRequestInit, error: Error) {\n    this.$log('error', url, requestInit, error);\n    this.emitSync(EVENTS.ERROR, requestInit.trigger, url, requestInit, error);\n  }\n}\n"],
   "mappings": "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",
   "names": []
 }

package/Frame/FrameForm.d.ts

@@ -17,7 +17,7 @@ export declare class FrameForm<T extends BaseProps = BaseProps> extends Abstract
     /**
      * Form submission method.
      */
-    get method(): "post" | "get";
+    get method(): "get" | "post";
     /**
      * Add params to the requested URL for GET submissions.
      */

package/Frame/FrameTarget.d.ts

@@ -26,8 +26,14 @@ 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

@@ -29,6 +29,12 @@ 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.
    */
@@ -37,15 +43,13 @@ class FrameTarget extends Transition {
       return;
     }
     const { mode } = this.$options;
-    const { $el, modes } = this;
+    const { $el, modes, __scripts: previousScripts } = this;
     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));
-      await Promise.all([
-        this.leave(leaveTargets),
-        this.enter(enterTargets)
-      ]);
+      this.adoptNewScripts(this.__scripts, previousScripts);
+      await Promise.all([this.leave(leaveTargets), this.enter(enterTargets)]);
     } else {
       await this.leave();
       if (mode === modes.MORPH) {
@@ -53,9 +57,28 @@ class FrameTarget extends Transition {
       } else {
         $el.replaceChildren(...Array.from(content.childNodes));
       }
+      this.adoptNewScripts(this.__scripts, 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   * 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\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\n      await Promise.all([\n        this.leave(leaveTargets),\n        this.enter(enterTargets),\n      ]);\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      await this.enter();\n    }\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,MAAM,cAAc,UAAmB,MAAM;AAC3C,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,UAAM,EAAE,KAAK,IAAI,KAAK;AACtB,UAAM,EAAE,KAAK,MAAM,IAAI;AAKvB,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,QAAQ,IAAI;AAAA,QAChB,KAAK,MAAM,YAAY;AAAA,QACvB,KAAK,MAAM,YAAY;AAAA,MACzB,CAAC;AAAA,IACH,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,YAAM,KAAK,MAAM;AAAA,IACnB;AAAA,EACF;AACF;",
+  "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;",
   "names": []
 }

package/Hoverable/Hoverable.d.ts

@@ -25,7 +25,7 @@ export interface HoverableProps extends BaseProps {
 declare const Hoverable_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").RelativePointerInterface, Base<BaseProps>>;
 /**
  * Hoverable class.
- * @see https://ui.studiometa.dev/-/components/Hoverable/
+ * @link https://ui.studiometa.dev/-/components/Hoverable/
  */
 export declare class Hoverable<T extends BaseProps = BaseProps> extends Hoverable_base<T & HoverableProps> {
     /**

package/Hoverable/Hoverable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Hoverable/Hoverable.ts"],
-  "sourcesContent": ["import { Base, withRelativePointer } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps, PointerServiceProps } from '@studiometa/js-toolkit';\nimport { map, transform, damp, getOffsetSizes, clamp01 } from '@studiometa/js-toolkit/utils';\n\nexport interface HoverableProps extends BaseProps {\n  $refs: {\n    /**\n     * Target element that will be moved on hover.\n     */\n    target: HTMLElement;\n  };\n  $options: {\n    /**\n     * A number between in the range `0\u20131` used to smoothen the transition between each position.\n     */\n    sensitivity: number;\n    /**\n     * Wether to reverse the movement of the target or not.\n     */\n    reversed: boolean;\n    /**\n     * Wether to stop moving the target when the mouse is not over the root element or not.\n     */\n    contained: boolean;\n  };\n}\n\n/**\n * Hoverable class.\n * @see https://ui.studiometa.dev/-/components/Hoverable/\n */\nexport class Hoverable<T extends BaseProps = BaseProps> extends withRelativePointer(Base)<\n  T & HoverableProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Hoverable',\n    refs: ['target'],\n    options: {\n      sensitivity: {\n        type: Number,\n        default: 0.1,\n      },\n      reversed: Boolean,\n      contained: Boolean,\n    },\n  };\n\n  props = {\n    x: 0,\n    y: 0,\n    dampedX: 0,\n    dampedY: 0,\n  };\n\n  /**\n   * The hoverable element, defaults to `this.$refs.target`.\n   */\n  get target(): HTMLElement {\n    return this.$refs.target;\n  }\n\n  /**\n   * The bouding element, defaults to `this.$el`.\n   */\n  get parent(): HTMLElement {\n    return this.$el;\n  }\n\n  /**\n   * The bounds values in which the target can move.\n   */\n  get bounds() {\n    const targetSizes = getOffsetSizes(this.target);\n    const parentSizes = getOffsetSizes(this.parent);\n    const xMin = targetSizes.x - parentSizes.x;\n    const yMin = targetSizes.y - parentSizes.y;\n    const xMax = xMin + targetSizes.width - parentSizes.width;\n    const yMax = yMin + targetSizes.height - parentSizes.height;\n\n    return {\n      yMin: yMin * -1,\n      yMax: yMax * -1,\n      xMin: xMin * -1,\n      xMax: xMax * -1,\n    };\n  }\n\n  /**\n   * Update props when the mouse moves.\n   */\n  movedrelative({ progress }: PointerServiceProps) {\n    const { bounds, props } = this;\n    const { reversed, contained } = this.$options;\n    const { x, y } = progress;\n\n    // Stop updating when pointer is outside of the parent bounds\n    if (contained && (y < 0 || x < 0 || y > 1 || x > 1)) {\n      return;\n    }\n\n    const from = reversed ? 1 : 0;\n    const to = reversed ? 0 : 1;\n\n    props.y = map(clamp01(y), from, to, bounds.yMin, bounds.yMax);\n    props.x = map(clamp01(x), from, to, bounds.xMin, bounds.xMax);\n  }\n\n  /**\n   * Update target position on each frame.\n   */\n  ticked() {\n    const { props, target } = this;\n    const { sensitivity } = this.$options;\n    props.dampedY = damp(props.y, props.dampedY, sensitivity);\n    props.dampedX = damp(props.x, props.dampedX, sensitivity);\n\n    return () => {\n      transform(target, {\n        y: props.dampedY,\n        x: props.dampedX,\n      });\n    };\n  }\n}\n"],
+  "sourcesContent": ["import { Base, withRelativePointer } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps, PointerServiceProps } from '@studiometa/js-toolkit';\nimport { map, transform, damp, getOffsetSizes, clamp01 } from '@studiometa/js-toolkit/utils';\n\nexport interface HoverableProps extends BaseProps {\n  $refs: {\n    /**\n     * Target element that will be moved on hover.\n     */\n    target: HTMLElement;\n  };\n  $options: {\n    /**\n     * A number between in the range `0\u20131` used to smoothen the transition between each position.\n     */\n    sensitivity: number;\n    /**\n     * Wether to reverse the movement of the target or not.\n     */\n    reversed: boolean;\n    /**\n     * Wether to stop moving the target when the mouse is not over the root element or not.\n     */\n    contained: boolean;\n  };\n}\n\n/**\n * Hoverable class.\n * @link https://ui.studiometa.dev/-/components/Hoverable/\n */\nexport class Hoverable<T extends BaseProps = BaseProps> extends withRelativePointer(Base)<\n  T & HoverableProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Hoverable',\n    refs: ['target'],\n    options: {\n      sensitivity: {\n        type: Number,\n        default: 0.1,\n      },\n      reversed: Boolean,\n      contained: Boolean,\n    },\n  };\n\n  props = {\n    x: 0,\n    y: 0,\n    dampedX: 0,\n    dampedY: 0,\n  };\n\n  /**\n   * The hoverable element, defaults to `this.$refs.target`.\n   */\n  get target(): HTMLElement {\n    return this.$refs.target;\n  }\n\n  /**\n   * The bouding element, defaults to `this.$el`.\n   */\n  get parent(): HTMLElement {\n    return this.$el;\n  }\n\n  /**\n   * The bounds values in which the target can move.\n   */\n  get bounds() {\n    const targetSizes = getOffsetSizes(this.target);\n    const parentSizes = getOffsetSizes(this.parent);\n    const xMin = targetSizes.x - parentSizes.x;\n    const yMin = targetSizes.y - parentSizes.y;\n    const xMax = xMin + targetSizes.width - parentSizes.width;\n    const yMax = yMin + targetSizes.height - parentSizes.height;\n\n    return {\n      yMin: yMin * -1,\n      yMax: yMax * -1,\n      xMin: xMin * -1,\n      xMax: xMax * -1,\n    };\n  }\n\n  /**\n   * Update props when the mouse moves.\n   */\n  movedrelative({ progress }: PointerServiceProps) {\n    const { bounds, props } = this;\n    const { reversed, contained } = this.$options;\n    const { x, y } = progress;\n\n    // Stop updating when pointer is outside of the parent bounds\n    if (contained && (y < 0 || x < 0 || y > 1 || x > 1)) {\n      return;\n    }\n\n    const from = reversed ? 1 : 0;\n    const to = reversed ? 0 : 1;\n\n    props.y = map(clamp01(y), from, to, bounds.yMin, bounds.yMax);\n    props.x = map(clamp01(x), from, to, bounds.xMin, bounds.xMax);\n  }\n\n  /**\n   * Update target position on each frame.\n   */\n  ticked() {\n    const { props, target } = this;\n    const { sensitivity } = this.$options;\n    props.dampedY = damp(props.y, props.dampedY, sensitivity);\n    props.dampedX = damp(props.x, props.dampedX, sensitivity);\n\n    return () => {\n      transform(target, {\n        y: props.dampedY,\n        x: props.dampedX,\n      });\n    };\n  }\n}\n"],
   "mappings": "AAAA,SAAS,MAAM,2BAA2B;AAE1C,SAAS,KAAK,WAAW,MAAM,gBAAgB,eAAe;AA6BvD,MAAM,kBAAmD,oBAAoB,IAAI,EAEtF;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA,MACP,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,GAAG;AAAA,IACH,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAsB;AACxB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAsB;AACxB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,UAAM,cAAc,eAAe,KAAK,MAAM;AAC9C,UAAM,cAAc,eAAe,KAAK,MAAM;AAC9C,UAAM,OAAO,YAAY,IAAI,YAAY;AACzC,UAAM,OAAO,YAAY,IAAI,YAAY;AACzC,UAAM,OAAO,OAAO,YAAY,QAAQ,YAAY;AACpD,UAAM,OAAO,OAAO,YAAY,SAAS,YAAY;AAErD,WAAO;AAAA,MACL,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,IACf;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc,EAAE,SAAS,GAAwB;AAC/C,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,UAAM,EAAE,UAAU,UAAU,IAAI,KAAK;AACrC,UAAM,EAAE,GAAG,EAAE,IAAI;AAGjB,QAAI,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI;AACnD;AAAA,IACF;AAEA,UAAM,OAAO,WAAW,IAAI;AAC5B,UAAM,KAAK,WAAW,IAAI;AAE1B,UAAM,IAAI,IAAI,QAAQ,CAAC,GAAG,MAAM,IAAI,OAAO,MAAM,OAAO,IAAI;AAC5D,UAAM,IAAI,IAAI,QAAQ,CAAC,GAAG,MAAM,IAAI,OAAO,MAAM,OAAO,IAAI;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,UAAM,EAAE,OAAO,OAAO,IAAI;AAC1B,UAAM,EAAE,YAAY,IAAI,KAAK;AAC7B,UAAM,UAAU,KAAK,MAAM,GAAG,MAAM,SAAS,WAAW;AACxD,UAAM,UAAU,KAAK,MAAM,GAAG,MAAM,SAAS,WAAW;AAExD,WAAO,MAAM;AACX,gBAAU,QAAQ;AAAA,QAChB,GAAG,MAAM;AAAA,QACT,GAAG,MAAM;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;",
   "names": []
 }

package/LargeText/LargeText.d.ts

@@ -12,7 +12,8 @@ export interface LargeTextProps extends BaseProps {
 }
 declare const LargeText_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithMountWhenInViewInterface, Base<BaseProps>, import("@studiometa/js-toolkit").WithMountWhenInViewProps>;
 /**
- * Large text class.
+ * LargeText class.
+ * @link https://ui.studiometa.dev/-/components/LargeText/
  */
 export declare class LargeText<T extends BaseProps = BaseProps> extends LargeText_base<T & LargeTextProps> implements BaseInterface {
     /**

package/LargeText/LargeText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/LargeText/LargeText.ts"],
-  "sourcesContent": ["import { Base, withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseInterface, ScrollServiceProps } from '@studiometa/js-toolkit';\nimport { damp, clamp, transform } from '@studiometa/js-toolkit/utils';\n\nexport interface LargeTextProps extends BaseProps {\n  $refs: {\n    target: HTMLElement;\n  };\n  $options: {\n    skew: boolean;\n    sensitivity: number;\n    skewSensitivity: number;\n  };\n}\n\n/**\n * Large text class.\n */\nexport class LargeText<T extends BaseProps = BaseProps>\n  extends withMountWhenInView(Base, { rootMargin: '50%' })<T & LargeTextProps>\n  implements BaseInterface\n{\n  /**\n   * Config.\n   */\n  static config = {\n    name: 'LargeText',\n    refs: ['target'],\n    options: {\n      skew: Boolean,\n      sensitivity: {\n        type: Number,\n        default: 1,\n      },\n      skewSensitivity: {\n        type: Number,\n        default: 1,\n      },\n    },\n  };\n\n  /**\n   * Translate X.\n   */\n  x = 0;\n\n  /**\n   * Scroll delta Y.\n   */\n  deltaY = 0;\n\n  /**\n   * Transform values.\n   */\n  transform = {\n    skewX: 0,\n    x: 0,\n  };\n\n  /**\n   * Target width.\n   */\n  width = 0;\n\n  /**\n   * Set width on mount.\n   */\n  mounted() {\n    this.width = this.$refs.target.clientWidth;\n  }\n\n  /**\n   * Set width on resize.\n   */\n  resized() {\n    this.width = this.$refs.target.clientWidth;\n  }\n\n  /**\n   * Update delta scroll on scroll.\n   */\n  scrolled(props: ScrollServiceProps) {\n    this.deltaY = props.delta.y;\n  }\n\n  /**\n   * Update values on raf.\n   */\n  ticked() {\n    this.x -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;\n\n    this.transform.x = damp(this.x, this.transform.x, 0.25);\n\n    if (this.$options.skew) {\n      this.transform.skewX = damp(\n        clamp(this.deltaY * -1, -50, 50) * this.$options.skewSensitivity,\n        this.transform.skewX,\n        0.25,\n      );\n    }\n\n    if (this.x <= this.width * -1) {\n      this.x = 0;\n      this.transform.x += this.width;\n    } else if (this.$options.sensitivity < 0 && this.x >= this.width) {\n      this.x = 0;\n      this.transform.x -= this.width;\n    }\n\n    return () => {\n      transform(this.$refs.target, this.transform);\n    };\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,MAAM,2BAA2B;AAE1C,SAAS,MAAM,OAAO,iBAAiB;AAgBhC,MAAM,kBACH,oBAAoB,MAAM,EAAE,YAAY,MAAM,CAAC,EAEzD;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAS;AAAA,IACd,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI;AAAA;AAAA;AAAA;AAAA,EAKJ,SAAS;AAAA;AAAA;AAAA;AAAA,EAKT,YAAY;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AAAA;AAAA;AAAA;AAAA,EAKR,UAAU;AACR,SAAK,QAAQ,KAAK,MAAM,OAAO;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,QAAQ,KAAK,MAAM,OAAO;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS,OAA2B;AAClC,SAAK,SAAS,MAAM,MAAM;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,SAAK,MAAM,KAAK,IAAI,KAAK,MAAM,IAAI,KAAK,KAAK,SAAS;AAEtD,SAAK,UAAU,IAAI,KAAK,KAAK,GAAG,KAAK,UAAU,GAAG,IAAI;AAEtD,QAAI,KAAK,SAAS,MAAM;AACtB,WAAK,UAAU,QAAQ;AAAA,QACrB,MAAM,KAAK,SAAS,IAAI,KAAK,EAAE,IAAI,KAAK,SAAS;AAAA,QACjD,KAAK,UAAU;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAEA,QAAI,KAAK,KAAK,KAAK,QAAQ,IAAI;AAC7B,WAAK,IAAI;AACT,WAAK,UAAU,KAAK,KAAK;AAAA,IAC3B,WAAW,KAAK,SAAS,cAAc,KAAK,KAAK,KAAK,KAAK,OAAO;AAChE,WAAK,IAAI;AACT,WAAK,UAAU,KAAK,KAAK;AAAA,IAC3B;AAEA,WAAO,MAAM;AACX,gBAAU,KAAK,MAAM,QAAQ,KAAK,SAAS;AAAA,IAC7C;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { Base, withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseInterface, ScrollServiceProps } from '@studiometa/js-toolkit';\nimport { damp, clamp, transform } from '@studiometa/js-toolkit/utils';\n\nexport interface LargeTextProps extends BaseProps {\n  $refs: {\n    target: HTMLElement;\n  };\n  $options: {\n    skew: boolean;\n    sensitivity: number;\n    skewSensitivity: number;\n  };\n}\n\n/**\n * LargeText class.\n * @link https://ui.studiometa.dev/-/components/LargeText/\n */\nexport class LargeText<T extends BaseProps = BaseProps>\n  extends withMountWhenInView(Base, { rootMargin: '50%' })<T & LargeTextProps>\n  implements BaseInterface\n{\n  /**\n   * Config.\n   */\n  static config = {\n    name: 'LargeText',\n    refs: ['target'],\n    options: {\n      skew: Boolean,\n      sensitivity: {\n        type: Number,\n        default: 1,\n      },\n      skewSensitivity: {\n        type: Number,\n        default: 1,\n      },\n    },\n  };\n\n  /**\n   * Translate X.\n   */\n  x = 0;\n\n  /**\n   * Scroll delta Y.\n   */\n  deltaY = 0;\n\n  /**\n   * Transform values.\n   */\n  transform = {\n    skewX: 0,\n    x: 0,\n  };\n\n  /**\n   * Target width.\n   */\n  width = 0;\n\n  /**\n   * Set width on mount.\n   */\n  mounted() {\n    this.width = this.$refs.target.clientWidth;\n  }\n\n  /**\n   * Set width on resize.\n   */\n  resized() {\n    this.width = this.$refs.target.clientWidth;\n  }\n\n  /**\n   * Update delta scroll on scroll.\n   */\n  scrolled(props: ScrollServiceProps) {\n    this.deltaY = props.delta.y;\n  }\n\n  /**\n   * Update values on raf.\n   */\n  ticked() {\n    this.x -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;\n\n    this.transform.x = damp(this.x, this.transform.x, 0.25);\n\n    if (this.$options.skew) {\n      this.transform.skewX = damp(\n        clamp(this.deltaY * -1, -50, 50) * this.$options.skewSensitivity,\n        this.transform.skewX,\n        0.25,\n      );\n    }\n\n    if (this.x <= this.width * -1) {\n      this.x = 0;\n      this.transform.x += this.width;\n    } else if (this.$options.sensitivity < 0 && this.x >= this.width) {\n      this.x = 0;\n      this.transform.x -= this.width;\n    }\n\n    return () => {\n      transform(this.$refs.target, this.transform);\n    };\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,MAAM,2BAA2B;AAE1C,SAAS,MAAM,OAAO,iBAAiB;AAiBhC,MAAM,kBACH,oBAAoB,MAAM,EAAE,YAAY,MAAM,CAAC,EAEzD;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAS;AAAA,IACd,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI;AAAA;AAAA;AAAA;AAAA,EAKJ,SAAS;AAAA;AAAA;AAAA;AAAA,EAKT,YAAY;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AAAA;AAAA;AAAA;AAAA,EAKR,UAAU;AACR,SAAK,QAAQ,KAAK,MAAM,OAAO;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,QAAQ,KAAK,MAAM,OAAO;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS,OAA2B;AAClC,SAAK,SAAS,MAAM,MAAM;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,SAAK,MAAM,KAAK,IAAI,KAAK,MAAM,IAAI,KAAK,KAAK,SAAS;AAEtD,SAAK,UAAU,IAAI,KAAK,KAAK,GAAG,KAAK,UAAU,GAAG,IAAI;AAEtD,QAAI,KAAK,SAAS,MAAM;AACtB,WAAK,UAAU,QAAQ;AAAA,QACrB,MAAM,KAAK,SAAS,IAAI,KAAK,EAAE,IAAI,KAAK,SAAS;AAAA,QACjD,KAAK,UAAU;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAEA,QAAI,KAAK,KAAK,KAAK,QAAQ,IAAI;AAC7B,WAAK,IAAI;AACT,WAAK,UAAU,KAAK,KAAK;AAAA,IAC3B,WAAW,KAAK,SAAS,cAAc,KAAK,KAAK,KAAK,KAAK,OAAO;AAChE,WAAK,IAAI;AACT,WAAK,UAAU,KAAK,KAAK;AAAA,IAC3B;AAEA,WAAO,MAAM;AACX,gBAAU,KAAK,MAAM,QAAQ,KAAK,SAAS;AAAA,IAC7C;AAAA,EACF;AACF;",
   "names": []
 }

package/LazyInclude/LazyInclude.d.ts

@@ -12,6 +12,7 @@ export interface LazyIncludeProps extends BaseProps {
 }
 /**
  * LazyInclude class.
+ * @link https://ui.studiometa.dev/-/components/LazyInclude/
  */
 export declare class LazyInclude<T extends BaseProps = BaseProps> extends Base<T & LazyIncludeProps> implements BaseInterface {
     /**

package/LazyInclude/LazyInclude.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/LazyInclude/LazyInclude.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseInterface } from '@studiometa/js-toolkit';\n\nexport interface LazyIncludeProps extends BaseProps {\n  $refs: {\n    loading: HTMLElement;\n    error: HTMLElement;\n  };\n  $options: {\n    src: string;\n    terminateOnLoad: boolean;\n  };\n}\n\n/**\n * LazyInclude class.\n */\nexport class LazyInclude<T extends BaseProps = BaseProps>\n  extends Base<T & LazyIncludeProps>\n  implements BaseInterface\n{\n  /**\n   * Config.\n   */\n  static config = {\n    name: 'LazyInclude',\n    refs: ['loading', 'error'],\n    emits: ['content', 'error', 'always'],\n    options: {\n      src: String,\n      terminateOnLoad: Boolean,\n    },\n  };\n\n  /**\n   * Load the lazy content on mount.\n   */\n  mounted() {\n    if (!this.$options.src) {\n      this.$warn('The `src` option is missing. Define it with the `data-option-src` attribute');\n      return;\n    }\n\n    fetch(this.$options.src)\n      .then((response) => response.text())\n      .then((content) => {\n        this.$emit('content', content);\n      })\n      .catch((error) => {\n        this.$emit('error', error);\n      })\n      .finally(() => {\n        this.$emit('always');\n      });\n  }\n\n  /**\n   * Set content.\n   */\n  onContent({ args: [content] }: { args: [string] }) {\n    this.$refs.loading.style.display = 'none';\n    this.$el.innerHTML = content;\n  }\n\n  /**\n   * Set error.\n   */\n  onError() {\n    this.$refs.error.style.display = 'block';\n  }\n\n  /**\n   * Always.\n   */\n  onAlways() {\n    if (this.$options.terminateOnLoad) {\n      this.$terminate();\n    }\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAiBd,MAAM,oBACH,KAEV;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAS;AAAA,IACd,MAAM;AAAA,IACN,MAAM,CAAC,WAAW,OAAO;AAAA,IACzB,OAAO,CAAC,WAAW,SAAS,QAAQ;AAAA,IACpC,SAAS;AAAA,MACP,KAAK;AAAA,MACL,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,SAAS,KAAK;AACtB,WAAK,MAAM,6EAA6E;AACxF;AAAA,IACF;AAEA,UAAM,KAAK,SAAS,GAAG,EACpB,KAAK,CAAC,aAAa,SAAS,KAAK,CAAC,EAClC,KAAK,CAAC,YAAY;AACjB,WAAK,MAAM,WAAW,OAAO;AAAA,IAC/B,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,WAAK,MAAM,SAAS,KAAK;AAAA,IAC3B,CAAC,EACA,QAAQ,MAAM;AACb,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,EAAE,MAAM,CAAC,OAAO,EAAE,GAAuB;AACjD,SAAK,MAAM,QAAQ,MAAM,UAAU;AACnC,SAAK,IAAI,YAAY;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,MAAM,MAAM,MAAM,UAAU;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACT,QAAI,KAAK,SAAS,iBAAiB;AACjC,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseInterface } from '@studiometa/js-toolkit';\n\nexport interface LazyIncludeProps extends BaseProps {\n  $refs: {\n    loading: HTMLElement;\n    error: HTMLElement;\n  };\n  $options: {\n    src: string;\n    terminateOnLoad: boolean;\n  };\n}\n\n/**\n * LazyInclude class.\n * @link https://ui.studiometa.dev/-/components/LazyInclude/\n */\nexport class LazyInclude<T extends BaseProps = BaseProps>\n  extends Base<T & LazyIncludeProps>\n  implements BaseInterface\n{\n  /**\n   * Config.\n   */\n  static config = {\n    name: 'LazyInclude',\n    refs: ['loading', 'error'],\n    emits: ['content', 'error', 'always'],\n    options: {\n      src: String,\n      terminateOnLoad: Boolean,\n    },\n  };\n\n  /**\n   * Load the lazy content on mount.\n   */\n  mounted() {\n    if (!this.$options.src) {\n      this.$warn('The `src` option is missing. Define it with the `data-option-src` attribute');\n      return;\n    }\n\n    fetch(this.$options.src)\n      .then((response) => response.text())\n      .then((content) => {\n        this.$emit('content', content);\n      })\n      .catch((error) => {\n        this.$emit('error', error);\n      })\n      .finally(() => {\n        this.$emit('always');\n      });\n  }\n\n  /**\n   * Set content.\n   */\n  onContent({ args: [content] }: { args: [string] }) {\n    this.$refs.loading.style.display = 'none';\n    this.$el.innerHTML = content;\n  }\n\n  /**\n   * Set error.\n   */\n  onError() {\n    this.$refs.error.style.display = 'block';\n  }\n\n  /**\n   * Always.\n   */\n  onAlways() {\n    if (this.$options.terminateOnLoad) {\n      this.$terminate();\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAkBd,MAAM,oBACH,KAEV;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAS;AAAA,IACd,MAAM;AAAA,IACN,MAAM,CAAC,WAAW,OAAO;AAAA,IACzB,OAAO,CAAC,WAAW,SAAS,QAAQ;AAAA,IACpC,SAAS;AAAA,MACP,KAAK;AAAA,MACL,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,SAAS,KAAK;AACtB,WAAK,MAAM,6EAA6E;AACxF;AAAA,IACF;AAEA,UAAM,KAAK,SAAS,GAAG,EACpB,KAAK,CAAC,aAAa,SAAS,KAAK,CAAC,EAClC,KAAK,CAAC,YAAY;AACjB,WAAK,MAAM,WAAW,OAAO;AAAA,IAC/B,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,WAAK,MAAM,SAAS,KAAK;AAAA,IAC3B,CAAC,EACA,QAAQ,MAAM;AACb,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,EAAE,MAAM,CAAC,OAAO,EAAE,GAAuB;AACjD,SAAK,MAAM,QAAQ,MAAM,UAAU;AACnC,SAAK,IAAI,YAAY;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,MAAM,MAAM,MAAM,UAAU;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACT,QAAI,KAAK,SAAS,iBAAiB;AACjC,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AACF;",
   "names": []
 }

package/Menu/Menu.d.ts

@@ -14,6 +14,7 @@ export interface MenuProps extends BaseProps {
 }
 /**
  * Menu class.
+ * @link https://ui.studiometa.dev/-/components/Menu/
  */
 export declare class Menu<T extends BaseProps = BaseProps> extends Base<T & MenuProps> {
     /**

package/Menu/Menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Menu/Menu.ts"],
-  "sourcesContent": ["import { Base, getClosestParent } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps, KeyServiceProps } from '@studiometa/js-toolkit';\nimport { nextTick } from '@studiometa/js-toolkit/utils';\nimport { MenuBtn } from './MenuBtn.js';\nimport { MenuList } from './MenuList.js';\n\nexport interface MenuProps extends BaseProps {\n  $children: {\n    // eslint-disable-next-line no-use-before-define\n    Menu: Menu[];\n    MenuBtn: MenuBtn[];\n    MenuList: MenuList[];\n  };\n  $options: {\n    mode: 'click' | 'hover';\n  };\n}\n\n/**\n * Menu class.\n */\nexport class Menu<T extends BaseProps = BaseProps> extends Base<T & MenuProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Menu',\n    components: {\n      MenuBtn,\n      MenuList,\n    },\n    options: {\n      mode: {\n        type: String,\n        default: 'click', // or 'hover'\n      },\n    },\n  };\n\n  /**\n   * Get the first `MenuList` instance.\n   */\n  get menuList(): MenuList {\n    for (const menuList of this.$children.MenuList) {\n      if (getClosestParent(menuList, this.constructor) === this) {\n        return menuList;\n      }\n    }\n  }\n\n  /**\n   * Get the first `MenuBtn` instance.\n   */\n  get menuBtn(): MenuBtn {\n    for (const menuBtn of this.$children.MenuBtn) {\n      if (getClosestParent(menuBtn, this.constructor) === this) {\n        return menuBtn;\n      }\n    }\n  }\n\n  /**\n   * Test which mode to use.\n   */\n  get shouldReactOnClick(): boolean {\n    return this.$options.mode === 'click';\n  }\n\n  /**\n   * Wether the button or the items are hovered.\n   */\n  get isHover(): boolean {\n    return this.menuBtn.isHover || this.menuList.isHover;\n  }\n\n  /**\n   * Set attributes on mounted, destroy the component if it is missing required\n   * child components.\n   */\n  mounted() {\n    if (!this.menuBtn || !this.menuList) {\n      return this.$destroy();\n    }\n\n    this.menuBtn.$el.setAttribute('aria-controls', this.$id);\n    this.menuList.$el.setAttribute('id', this.$id);\n    this.menuList.close();\n  }\n\n  /**\n   * Keyboard management.\n   */\n  keyed({ ENTER, ESC, isUp }: KeyServiceProps) {\n    if (!isUp) {\n      return;\n    }\n\n    if (ESC) {\n      this.close();\n      return;\n    }\n\n    if (!this.shouldReactOnClick) {\n      const hasFocusElementWithin = document.activeElement === this.menuBtn.$el;\n\n      if (ENTER && hasFocusElementWithin) {\n        this.toggle();\n      }\n    }\n  }\n\n  /**\n   * Close menu list on click outside.\n   */\n  onDocumentClick({ event }: { event: MouseEvent }) {\n    if (this.shouldReactOnClick && !this.$el.contains(event.target as Node)) {\n      this.close();\n    }\n  }\n\n  /**\n   * Toggle menu items on button click.\n   */\n  onMenuBtnClick({ event, target }: { event: MouseEvent; target: MenuBtn }) {\n    if (!this.shouldReactOnClick) return;\n\n    if (getClosestParent(target, this.constructor) === this) {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  /**\n   * Open menu items on button mouse enter.\n   */\n  onMenuBtnMouseenter({ target }: { target: MenuBtn }) {\n    if (target === this.menuBtn && !this.shouldReactOnClick) {\n      this.open();\n    }\n  }\n\n  /**\n   * Close menu items on button mouse leave.\n   */\n  onMenuBtnMouseleave() {\n    if (this.shouldReactOnClick) {\n      return;\n    }\n\n    nextTick(() => {\n      if (!this.isHover) {\n        this.close();\n      }\n    });\n  }\n\n  /**\n   * Close menu items on button mouse leave.\n   */\n  onMenuListMouseleave() {\n    if (this.shouldReactOnClick) {\n      return;\n    }\n\n    nextTick(() => {\n      if (!this.isHover) {\n        this.close();\n      }\n    });\n  }\n\n  /**\n   * Close other non-parent menu items on menu items open.\n   */\n  onMenuListItemsOpen({ target }: { target: MenuList }) {\n    for (const menuList of this.$children.MenuList) {\n      if (!menuList.$el.contains(target.$el)) {\n        menuList.close();\n      }\n    }\n  }\n\n  /**\n   * Close the menu.\n   */\n  close() {\n    this.menuList.close();\n  }\n\n  /**\n   * Open the menu.\n   */\n  open() {\n    this.menuList.open();\n  }\n\n  /**\n   * Toggle the menu.\n   */\n  toggle() {\n    this.menuList.toggle();\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Base, getClosestParent } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps, KeyServiceProps } from '@studiometa/js-toolkit';\nimport { nextTick } from '@studiometa/js-toolkit/utils';\nimport { MenuBtn } from './MenuBtn.js';\nimport { MenuList } from './MenuList.js';\n\nexport interface MenuProps extends BaseProps {\n  $children: {\n    // eslint-disable-next-line no-use-before-define\n    Menu: Menu[];\n    MenuBtn: MenuBtn[];\n    MenuList: MenuList[];\n  };\n  $options: {\n    mode: 'click' | 'hover';\n  };\n}\n\n/**\n * Menu class.\n * @link https://ui.studiometa.dev/-/components/Menu/\n */\nexport class Menu<T extends BaseProps = BaseProps> extends Base<T & MenuProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Menu',\n    components: {\n      MenuBtn,\n      MenuList,\n    },\n    options: {\n      mode: {\n        type: String,\n        default: 'click', // or 'hover'\n      },\n    },\n  };\n\n  /**\n   * Get the first `MenuList` instance.\n   */\n  get menuList(): MenuList {\n    for (const menuList of this.$children.MenuList) {\n      if (getClosestParent(menuList, this.constructor) === this) {\n        return menuList;\n      }\n    }\n  }\n\n  /**\n   * Get the first `MenuBtn` instance.\n   */\n  get menuBtn(): MenuBtn {\n    for (const menuBtn of this.$children.MenuBtn) {\n      if (getClosestParent(menuBtn, this.constructor) === this) {\n        return menuBtn;\n      }\n    }\n  }\n\n  /**\n   * Test which mode to use.\n   */\n  get shouldReactOnClick(): boolean {\n    return this.$options.mode === 'click';\n  }\n\n  /**\n   * Wether the button or the items are hovered.\n   */\n  get isHover(): boolean {\n    return this.menuBtn.isHover || this.menuList.isHover;\n  }\n\n  /**\n   * Set attributes on mounted, destroy the component if it is missing required\n   * child components.\n   */\n  mounted() {\n    if (!this.menuBtn || !this.menuList) {\n      return this.$destroy();\n    }\n\n    this.menuBtn.$el.setAttribute('aria-controls', this.$id);\n    this.menuList.$el.setAttribute('id', this.$id);\n    this.menuList.close();\n  }\n\n  /**\n   * Keyboard management.\n   */\n  keyed({ ENTER, ESC, isUp }: KeyServiceProps) {\n    if (!isUp) {\n      return;\n    }\n\n    if (ESC) {\n      this.close();\n      return;\n    }\n\n    if (!this.shouldReactOnClick) {\n      const hasFocusElementWithin = document.activeElement === this.menuBtn.$el;\n\n      if (ENTER && hasFocusElementWithin) {\n        this.toggle();\n      }\n    }\n  }\n\n  /**\n   * Close menu list on click outside.\n   */\n  onDocumentClick({ event }: { event: MouseEvent }) {\n    if (this.shouldReactOnClick && !this.$el.contains(event.target as Node)) {\n      this.close();\n    }\n  }\n\n  /**\n   * Toggle menu items on button click.\n   */\n  onMenuBtnClick({ event, target }: { event: MouseEvent; target: MenuBtn }) {\n    if (!this.shouldReactOnClick) return;\n\n    if (getClosestParent(target, this.constructor) === this) {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  /**\n   * Open menu items on button mouse enter.\n   */\n  onMenuBtnMouseenter({ target }: { target: MenuBtn }) {\n    if (target === this.menuBtn && !this.shouldReactOnClick) {\n      this.open();\n    }\n  }\n\n  /**\n   * Close menu items on button mouse leave.\n   */\n  onMenuBtnMouseleave() {\n    if (this.shouldReactOnClick) {\n      return;\n    }\n\n    nextTick(() => {\n      if (!this.isHover) {\n        this.close();\n      }\n    });\n  }\n\n  /**\n   * Close menu items on button mouse leave.\n   */\n  onMenuListMouseleave() {\n    if (this.shouldReactOnClick) {\n      return;\n    }\n\n    nextTick(() => {\n      if (!this.isHover) {\n        this.close();\n      }\n    });\n  }\n\n  /**\n   * Close other non-parent menu items on menu items open.\n   */\n  onMenuListItemsOpen({ target }: { target: MenuList }) {\n    for (const menuList of this.$children.MenuList) {\n      if (!menuList.$el.contains(target.$el)) {\n        menuList.close();\n      }\n    }\n  }\n\n  /**\n   * Close the menu.\n   */\n  close() {\n    this.menuList.close();\n  }\n\n  /**\n   * Open the menu.\n   */\n  open() {\n    this.menuList.open();\n  }\n\n  /**\n   * Toggle the menu.\n   */\n  toggle() {\n    this.menuList.toggle();\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/Modal/Modal.d.ts

@@ -32,6 +32,7 @@ export interface ModalProps extends BaseProps {
 }
 /**
  * Modal class.
+ * @link https://ui.studiometa.dev/-/components/Modal/
  */
 export declare class Modal<T extends BaseProps = BaseProps> extends Base<T & ModalProps> {
     /**

package/Modal/Modal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Modal/Modal.ts"],
-  "sourcesContent": ["import { Base, KeyServiceProps } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport {\n  transition,\n  trapFocus as trap,\n  untrapFocus as untrap,\n  saveActiveElement,\n} from '@studiometa/js-toolkit/utils';\n\ntype ModalStates = Partial<\n  Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype ModalStylesOption = Partial<Record<keyof ModalProps['$refs'], ModalStates>>;\n\nexport interface ModalProps extends BaseProps {\n  $refs: {\n    close: HTMLElement[];\n    container: HTMLElement;\n    content: HTMLElement;\n    modal: HTMLElement;\n    open: HTMLElement[];\n    overlay: HTMLElement;\n  };\n  $options: {\n    /**\n     * A selector where to move the modal to.\n     */\n    move: string;\n    /**\n     * A selector for the element to set the focus to when the modal opens.\n     */\n    autofocus: string;\n    /**\n     * Lock or allow scroll in the documentElement.\n     */\n    scrollLock: boolean;\n    /**\n     * The styles for the different state of the modal.\n     */\n    styles: ModalStylesOption;\n  };\n}\n\n/**\n * Modal class.\n */\nexport class Modal<T extends BaseProps = BaseProps> extends Base<T & ModalProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Modal',\n    refs: ['close[]', 'container', 'content', 'modal', 'open[]', 'overlay'],\n    emits: ['open', 'close'],\n    options: {\n      move: String,\n      autofocus: { type: String, default: '[autofocus]' },\n      styles: {\n        type: Object,\n        default: (): ModalStylesOption => ({\n          modal: {\n            closed: {\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n      },\n      scrollLock: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Wether the modal is open or not.\n   */\n  isOpen = false;\n\n  /**\n   * @private\n   */\n  __refsBackup: (T & ModalProps)['$refs'];\n\n  /**\n   * @private\n   */\n  __refModalPlaceholder: Comment;\n\n  /**\n   * @private\n   */\n  __refModalParentBackup: HTMLElement;\n\n  /**\n   * @private\n   */\n  __refModalUnbindGetRefFilter: () => void;\n\n  /**\n   * Open the modal on click on the `open` ref.\n   */\n  get onOpenClick() {\n    return this.open;\n  }\n\n  /**\n   * Close the modal on click on the `close` ref.\n   */\n  get onCloseClick() {\n    return this.close;\n  }\n\n  /**\n   * Close the modal on click on the `overlay` ref.\n   * @returns {Function} The component's `close` method.\n   */\n  get onOverlayClick() {\n    return this.close;\n  }\n\n  /**\n   * Initialize the component's behaviours.\n   */\n  mounted() {\n    this.isOpen = false;\n    this.close();\n\n    if (this.$options.move) {\n      const target = document.querySelector(this.$options.move) || document.body;\n\n      this.__refsBackup = this.$refs;\n      this.__refModalPlaceholder = document.createComment('');\n      this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;\n      this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);\n\n      target.append(this.$refs.modal);\n    }\n  }\n\n  /**\n   * Add the moved refs to `this.$refs` when using the `move` options.\n   */\n  get $refs() {\n    const $refs = super.$refs;\n\n    if (this.$options.move && this.__refsBackup) {\n      Object.entries(this.__refsBackup).forEach(([key, ref]) => {\n        if (!$refs[key]) {\n          // @ts-ignore\n          $refs[key] = ref;\n        }\n      });\n    }\n\n    return $refs;\n  }\n\n  /**\n   * Unbind all events on destroy.\n   */\n  destroyed() {\n    this.close();\n\n    if (this.$options.move && this.__refModalParentBackup) {\n      this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);\n      this.__refModalPlaceholder.remove();\n      delete this.__refModalPlaceholder;\n      delete this.__refModalParentBackup;\n    }\n\n    return this;\n  }\n\n  /**\n   * Close the modal on `ESC` and trap the tabulation.\n   */\n  keyed({ event, isUp, isDown, ESC }: KeyServiceProps) {\n    if (!this.isOpen) {\n      return;\n    }\n\n    if (isDown) {\n      trap(this.$refs.modal, event);\n    }\n\n    if (ESC && isUp) {\n      this.close();\n    }\n  }\n\n  /**\n   * Open the modal.\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'false');\n\n    if (this.$options.scrollLock) {\n      document.documentElement.style.overflow = 'hidden';\n    }\n\n    this.isOpen = true;\n    this.$emit('open');\n\n    /** @type {ModalRefs} */\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: closed,\n              active,\n              to: open,\n            },\n            'keep',\n          ),\n      ),\n    ).then(() => {\n      if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {\n        saveActiveElement();\n        const autofocusElement = this.$refs.modal.querySelector(\n          this.$options.autofocus,\n        ) as HTMLElement;\n        autofocusElement.focus();\n      }\n      return Promise.resolve();\n    });\n  }\n\n  /**\n   * Close the modal.\n   */\n  async close() {\n    if (!this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'true');\n\n    if (this.$options.scrollLock) {\n      document.documentElement.style.overflow = '';\n    }\n\n    this.isOpen = false;\n    untrap();\n    this.$emit('close');\n\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: open,\n              active,\n              to: closed,\n            },\n            'keep',\n          ),\n      ),\n    ).then(() => Promise.resolve());\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAA6B;AAEtC;AAAA,EACE;AAAA,EACA,aAAa;AAAA,EACb,eAAe;AAAA,EACf;AAAA,OACK;AAwCA,MAAM,cAA+C,KAAqB;AAAA;AAAA;AAAA;AAAA,EAI/E,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,WAAW,aAAa,WAAW,SAAS,UAAU,SAAS;AAAA,IACtE,OAAO,CAAC,QAAQ,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,MAAM;AAAA,MACN,WAAW,EAAE,MAAM,QAAQ,SAAS,cAAc;AAAA,MAClD,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS,OAA0B;AAAA,UACjC,OAAO;AAAA,YACL,QAAQ;AAAA,cACN,SAAS;AAAA,cACT,eAAe;AAAA,cACf,YAAY;AAAA,YACd;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AAAA;AAAA;AAAA;AAAA,EAKT;AAAA;AAAA;AAAA;AAAA,EAKA;AAAA;AAAA;AAAA;AAAA,EAKA;AAAA;AAAA;AAAA;AAAA,EAKA;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,cAAc;AAChB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,eAAe;AACjB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,iBAAiB;AACnB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,SAAS;AACd,SAAK,MAAM;AAEX,QAAI,KAAK,SAAS,MAAM;AACtB,YAAM,SAAS,SAAS,cAAc,KAAK,SAAS,IAAI,KAAK,SAAS;AAEtE,WAAK,eAAe,KAAK;AACzB,WAAK,wBAAwB,SAAS,cAAc,EAAE;AACtD,WAAK,yBAAyB,KAAK,MAAM,MAAM,iBAAiB,KAAK;AACrE,WAAK,uBAAuB,aAAa,KAAK,uBAAuB,KAAK,MAAM,KAAK;AAErF,aAAO,OAAO,KAAK,MAAM,KAAK;AAAA,IAChC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,QAAQ;AACV,UAAM,QAAQ,MAAM;AAEpB,QAAI,KAAK,SAAS,QAAQ,KAAK,cAAc;AAC3C,aAAO,QAAQ,KAAK,YAAY,EAAE,QAAQ,CAAC,CAAC,KAAK,GAAG,MAAM;AACxD,YAAI,CAAC,MAAM,GAAG,GAAG;AAEf,gBAAM,GAAG,IAAI;AAAA,QACf;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,MAAM;AAEX,QAAI,KAAK,SAAS,QAAQ,KAAK,wBAAwB;AACrD,WAAK,uBAAuB,aAAa,KAAK,MAAM,OAAO,KAAK,qBAAqB;AACrF,WAAK,sBAAsB,OAAO;AAClC,aAAO,KAAK;AACZ,aAAO,KAAK;AAAA,IACd;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,EAAE,OAAO,MAAM,QAAQ,IAAI,GAAoB;AACnD,QAAI,CAAC,KAAK,QAAQ;AAChB;AAAA,IACF;AAEA,QAAI,QAAQ;AACV,WAAK,KAAK,MAAM,OAAO,KAAK;AAAA,IAC9B;AAEA,QAAI,OAAO,MAAM;AACf,WAAK,MAAM;AAAA,IACb;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,OAAO;AACX,QAAI,KAAK,QAAQ;AACf,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,MAAM,MAAM,aAAa,eAAe,OAAO;AAEpD,QAAI,KAAK,SAAS,YAAY;AAC5B,eAAS,gBAAgB,MAAM,WAAW;AAAA,IAC5C;AAEA,SAAK,SAAS;AACd,SAAK,MAAM,MAAM;AAGjB,UAAM,OAAO,KAAK;AAElB,WAAO,QAAQ;AAAA,MACb,OAAO,QAAQ,KAAK,SAAS,MAAM,EAAE;AAAA,QACnC,CAAC,CAAC,SAAS,EAAE,MAAM,QAAQ,OAAO,IAAI,EAAE,MAAM,IAAI,QAAQ,IAAI,QAAQ,GAAG,CAAC,MACxE;AAAA,UACE,KAAK,OAAO;AAAA,UACZ;AAAA,YACE,MAAM;AAAA,YACN;AAAA,YACA,IAAI;AAAA,UACN;AAAA,UACA;AAAA,QACF;AAAA,MACJ;AAAA,IACF,EAAE,KAAK,MAAM;AACX,UAAI,KAAK,SAAS,aAAa,KAAK,MAAM,MAAM,cAAc,KAAK,SAAS,SAAS,GAAG;AACtF,0BAAkB;AAClB,cAAM,mBAAmB,KAAK,MAAM,MAAM;AAAA,UACxC,KAAK,SAAS;AAAA,QAChB;AACA,yBAAiB,MAAM;AAAA,MACzB;AACA,aAAO,QAAQ,QAAQ;AAAA,IACzB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,QAAQ;AACZ,QAAI,CAAC,KAAK,QAAQ;AAChB,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,MAAM,MAAM,aAAa,eAAe,MAAM;AAEnD,QAAI,KAAK,SAAS,YAAY;AAC5B,eAAS,gBAAgB,MAAM,WAAW;AAAA,IAC5C;AAEA,SAAK,SAAS;AACd,WAAO;AACP,SAAK,MAAM,OAAO;AAElB,UAAM,OAAO,KAAK;AAElB,WAAO,QAAQ;AAAA,MACb,OAAO,QAAQ,KAAK,SAAS,MAAM,EAAE;AAAA,QACnC,CAAC,CAAC,SAAS,EAAE,MAAM,QAAQ,OAAO,IAAI,EAAE,MAAM,IAAI,QAAQ,IAAI,QAAQ,GAAG,CAAC,MACxE;AAAA,UACE,KAAK,OAAO;AAAA,UACZ;AAAA,YACE,MAAM;AAAA,YACN;AAAA,YACA,IAAI;AAAA,UACN;AAAA,UACA;AAAA,QACF;AAAA,MACJ;AAAA,IACF,EAAE,KAAK,MAAM,QAAQ,QAAQ,CAAC;AAAA,EAChC;AACF;",
+  "sourcesContent": ["import { Base, KeyServiceProps } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport {\n  transition,\n  trapFocus as trap,\n  untrapFocus as untrap,\n  saveActiveElement,\n} from '@studiometa/js-toolkit/utils';\n\ntype ModalStates = Partial<\n  Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype ModalStylesOption = Partial<Record<keyof ModalProps['$refs'], ModalStates>>;\n\nexport interface ModalProps extends BaseProps {\n  $refs: {\n    close: HTMLElement[];\n    container: HTMLElement;\n    content: HTMLElement;\n    modal: HTMLElement;\n    open: HTMLElement[];\n    overlay: HTMLElement;\n  };\n  $options: {\n    /**\n     * A selector where to move the modal to.\n     */\n    move: string;\n    /**\n     * A selector for the element to set the focus to when the modal opens.\n     */\n    autofocus: string;\n    /**\n     * Lock or allow scroll in the documentElement.\n     */\n    scrollLock: boolean;\n    /**\n     * The styles for the different state of the modal.\n     */\n    styles: ModalStylesOption;\n  };\n}\n\n/**\n * Modal class.\n * @link https://ui.studiometa.dev/-/components/Modal/\n */\nexport class Modal<T extends BaseProps = BaseProps> extends Base<T & ModalProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Modal',\n    refs: ['close[]', 'container', 'content', 'modal', 'open[]', 'overlay'],\n    emits: ['open', 'close'],\n    options: {\n      move: String,\n      autofocus: { type: String, default: '[autofocus]' },\n      styles: {\n        type: Object,\n        default: (): ModalStylesOption => ({\n          modal: {\n            closed: {\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n      },\n      scrollLock: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Wether the modal is open or not.\n   */\n  isOpen = false;\n\n  /**\n   * @private\n   */\n  __refsBackup: (T & ModalProps)['$refs'];\n\n  /**\n   * @private\n   */\n  __refModalPlaceholder: Comment;\n\n  /**\n   * @private\n   */\n  __refModalParentBackup: HTMLElement;\n\n  /**\n   * @private\n   */\n  __refModalUnbindGetRefFilter: () => void;\n\n  /**\n   * Open the modal on click on the `open` ref.\n   */\n  get onOpenClick() {\n    return this.open;\n  }\n\n  /**\n   * Close the modal on click on the `close` ref.\n   */\n  get onCloseClick() {\n    return this.close;\n  }\n\n  /**\n   * Close the modal on click on the `overlay` ref.\n   * @returns {Function} The component's `close` method.\n   */\n  get onOverlayClick() {\n    return this.close;\n  }\n\n  /**\n   * Initialize the component's behaviours.\n   */\n  mounted() {\n    this.isOpen = false;\n    this.close();\n\n    if (this.$options.move) {\n      const target = document.querySelector(this.$options.move) || document.body;\n\n      this.__refsBackup = this.$refs;\n      this.__refModalPlaceholder = document.createComment('');\n      this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;\n      this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);\n\n      target.append(this.$refs.modal);\n    }\n  }\n\n  /**\n   * Add the moved refs to `this.$refs` when using the `move` options.\n   */\n  get $refs() {\n    const $refs = super.$refs;\n\n    if (this.$options.move && this.__refsBackup) {\n      Object.entries(this.__refsBackup).forEach(([key, ref]) => {\n        if (!$refs[key]) {\n          // @ts-ignore\n          $refs[key] = ref;\n        }\n      });\n    }\n\n    return $refs;\n  }\n\n  /**\n   * Unbind all events on destroy.\n   */\n  destroyed() {\n    this.close();\n\n    if (this.$options.move && this.__refModalParentBackup) {\n      this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);\n      this.__refModalPlaceholder.remove();\n      delete this.__refModalPlaceholder;\n      delete this.__refModalParentBackup;\n    }\n\n    return this;\n  }\n\n  /**\n   * Close the modal on `ESC` and trap the tabulation.\n   */\n  keyed({ event, isUp, isDown, ESC }: KeyServiceProps) {\n    if (!this.isOpen) {\n      return;\n    }\n\n    if (isDown) {\n      trap(this.$refs.modal, event);\n    }\n\n    if (ESC && isUp) {\n      this.close();\n    }\n  }\n\n  /**\n   * Open the modal.\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'false');\n\n    if (this.$options.scrollLock) {\n      document.documentElement.style.overflow = 'hidden';\n    }\n\n    this.isOpen = true;\n    this.$emit('open');\n\n    /** @type {ModalRefs} */\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: closed,\n              active,\n              to: open,\n            },\n            'keep',\n          ),\n      ),\n    ).then(() => {\n      if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {\n        saveActiveElement();\n        const autofocusElement = this.$refs.modal.querySelector(\n          this.$options.autofocus,\n        ) as HTMLElement;\n        autofocusElement.focus();\n      }\n      return Promise.resolve();\n    });\n  }\n\n  /**\n   * Close the modal.\n   */\n  async close() {\n    if (!this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'true');\n\n    if (this.$options.scrollLock) {\n      document.documentElement.style.overflow = '';\n    }\n\n    this.isOpen = false;\n    untrap();\n    this.$emit('close');\n\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: open,\n              active,\n              to: closed,\n            },\n            'keep',\n          ),\n      ),\n    ).then(() => Promise.resolve());\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/Panel/Panel.d.ts

@@ -7,6 +7,7 @@ export interface PanelProps extends BaseProps {
 }
 /**
  * Panel class.
+ * @link https://ui.studiometa.dev/-/components/Panel/
  */
 export declare class Panel<T extends BaseProps = BaseProps> extends Modal<T & PanelProps> {
     /**

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 */\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;AAKlB,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        },\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;",
   "names": []
 }

package/Prefetch/AbstractPrefetch.d.ts

@@ -8,7 +8,7 @@ export interface AbstractPrefetchProps extends BaseProps {
 }
 /**
  * AbstractPrefetch class.
- * @see https://ui.studiometa.dev/-/components/Prefetch/
+ * @link https://ui.studiometa.dev/-/components/Prefetch/
  */
 export declare class AbstractPrefetch<T extends BaseProps = BaseProps> extends Base<T & AbstractPrefetchProps> {
     /**

package/Prefetch/AbstractPrefetch.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Prefetch/AbstractPrefetch.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface AbstractPrefetchProps extends BaseProps {\n  $el: HTMLAnchorElement;\n  $options: {\n    prefetch: boolean;\n  };\n}\n\n/**\n * AbstractPrefetch class.\n * @see https://ui.studiometa.dev/-/components/Prefetch/\n */\nexport class AbstractPrefetch<T extends BaseProps = BaseProps> extends Base<\n  T & AbstractPrefetchProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AbstractPrefetch',\n    emits: ['prefetched'],\n    options: {\n      prefetch: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Store prefetched URL.\n   */\n  static prefetchedUrls: Set<string> = new Set();\n\n  /**\n   * Get the URL to prefetch.\n   */\n  get url(): URL | null {\n    const { href } = this.$el;\n    return href ? new URL(href) : null;\n  }\n\n  /**\n   * Is the URL prefetchable?\n   */\n  get isPrefetchable(): boolean {\n    const { url } = this;\n\n    if (!url || !url.href) {\n      return false;\n    }\n\n    if (!this.$options.prefetch) {\n      return false;\n    }\n\n    if (url.origin !== window.location.origin) {\n      return false;\n    }\n\n    if (url.href === window.location.href) {\n      return false;\n    }\n\n    if (\n      url.hash &&\n      url.pathname + url.search === window.location.pathname + window.location.search\n    ) {\n      return false;\n    }\n\n    return true;\n  }\n\n  /**\n   * Prefetch the URL.\n   */\n  prefetch() {\n    const { url } = this;\n\n    if (AbstractPrefetch.prefetchedUrls.has(url.href)) {\n      return;\n    }\n\n    if (!this.isPrefetchable) {\n      return;\n    }\n\n    const prefetcher = document.createElement('link');\n    prefetcher.rel = 'prefetch';\n    prefetcher.href = url.href;\n    prefetcher.addEventListener('load', () => this.$emit('prefetched', url));\n    document.head.append(prefetcher);\n\n    AbstractPrefetch.prefetchedUrls.add(url.href);\n  }\n}\n"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface AbstractPrefetchProps extends BaseProps {\n  $el: HTMLAnchorElement;\n  $options: {\n    prefetch: boolean;\n  };\n}\n\n/**\n * AbstractPrefetch class.\n * @link https://ui.studiometa.dev/-/components/Prefetch/\n */\nexport class AbstractPrefetch<T extends BaseProps = BaseProps> extends Base<\n  T & AbstractPrefetchProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AbstractPrefetch',\n    emits: ['prefetched'],\n    options: {\n      prefetch: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Store prefetched URL.\n   */\n  static prefetchedUrls: Set<string> = new Set();\n\n  /**\n   * Get the URL to prefetch.\n   */\n  get url(): URL | null {\n    const { href } = this.$el;\n    return href ? new URL(href) : null;\n  }\n\n  /**\n   * Is the URL prefetchable?\n   */\n  get isPrefetchable(): boolean {\n    const { url } = this;\n\n    if (!url || !url.href) {\n      return false;\n    }\n\n    if (!this.$options.prefetch) {\n      return false;\n    }\n\n    if (url.origin !== window.location.origin) {\n      return false;\n    }\n\n    if (url.href === window.location.href) {\n      return false;\n    }\n\n    if (\n      url.hash &&\n      url.pathname + url.search === window.location.pathname + window.location.search\n    ) {\n      return false;\n    }\n\n    return true;\n  }\n\n  /**\n   * Prefetch the URL.\n   */\n  prefetch() {\n    const { url } = this;\n\n    if (AbstractPrefetch.prefetchedUrls.has(url.href)) {\n      return;\n    }\n\n    if (!this.isPrefetchable) {\n      return;\n    }\n\n    const prefetcher = document.createElement('link');\n    prefetcher.rel = 'prefetch';\n    prefetcher.href = url.href;\n    prefetcher.addEventListener('load', () => this.$emit('prefetched', url));\n    document.head.append(prefetcher);\n\n    AbstractPrefetch.prefetchedUrls.add(url.href);\n  }\n}\n"],
   "mappings": "AAAA,SAAS,YAAY;AAcd,MAAM,yBAA0D,KAErE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,YAAY;AAAA,IACpB,SAAS;AAAA,MACP,UAAU;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,iBAA8B,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAK7C,IAAI,MAAkB;AACpB,UAAM,EAAE,KAAK,IAAI,KAAK;AACtB,WAAO,OAAO,IAAI,IAAI,IAAI,IAAI;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,iBAA0B;AAC5B,UAAM,EAAE,IAAI,IAAI;AAEhB,QAAI,CAAC,OAAO,CAAC,IAAI,MAAM;AACrB,aAAO;AAAA,IACT;AAEA,QAAI,CAAC,KAAK,SAAS,UAAU;AAC3B,aAAO;AAAA,IACT;AAEA,QAAI,IAAI,WAAW,OAAO,SAAS,QAAQ;AACzC,aAAO;AAAA,IACT;AAEA,QAAI,IAAI,SAAS,OAAO,SAAS,MAAM;AACrC,aAAO;AAAA,IACT;AAEA,QACE,IAAI,QACJ,IAAI,WAAW,IAAI,WAAW,OAAO,SAAS,WAAW,OAAO,SAAS,QACzE;AACA,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACT,UAAM,EAAE,IAAI,IAAI;AAEhB,QAAI,iBAAiB,eAAe,IAAI,IAAI,IAAI,GAAG;AACjD;AAAA,IACF;AAEA,QAAI,CAAC,KAAK,gBAAgB;AACxB;AAAA,IACF;AAEA,UAAM,aAAa,SAAS,cAAc,MAAM;AAChD,eAAW,MAAM;AACjB,eAAW,OAAO,IAAI;AACtB,eAAW,iBAAiB,QAAQ,MAAM,KAAK,MAAM,cAAc,GAAG,CAAC;AACvE,aAAS,KAAK,OAAO,UAAU;AAE/B,qBAAiB,eAAe,IAAI,IAAI,IAAI;AAAA,EAC9C;AACF;",
   "names": []
 }

package/Prefetch/PrefetchWhenOver.d.ts

@@ -2,7 +2,7 @@ import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
 import { AbstractPrefetch } from './AbstractPrefetch.js';
 /**
  * PrefetchWhenOver class.
- * @see https://ui.studiometa.dev/-/components/Prefetch/
+ * @link https://ui.studiometa.dev/-/components/Prefetch/
  */
 export declare class PrefetchWhenOver<T extends BaseProps = BaseProps> extends AbstractPrefetch<T> {
     /**

package/Prefetch/PrefetchWhenOver.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Prefetch/PrefetchWhenOver.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractPrefetch } from './AbstractPrefetch.js';\n\n/**\n * PrefetchWhenOver class.\n * @see https://ui.studiometa.dev/-/components/Prefetch/\n */\nexport class PrefetchWhenOver<T extends BaseProps = BaseProps> extends AbstractPrefetch<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractPrefetch.config,\n    name: 'PrefetchWhenOver',\n  };\n\n  /**\n   * Prefetch on mouseenter.\n   */\n  onMouseenter() {\n    this.prefetch();\n  }\n}\n"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractPrefetch } from './AbstractPrefetch.js';\n\n/**\n * PrefetchWhenOver class.\n * @link https://ui.studiometa.dev/-/components/Prefetch/\n */\nexport class PrefetchWhenOver<T extends BaseProps = BaseProps> extends AbstractPrefetch<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractPrefetch.config,\n    name: 'PrefetchWhenOver',\n  };\n\n  /**\n   * Prefetch on mouseenter.\n   */\n  onMouseenter() {\n    this.prefetch();\n  }\n}\n"],
   "mappings": "AACA,SAAS,wBAAwB;AAM1B,MAAM,yBAA0D,iBAAoB;AAAA;AAAA;AAAA;AAAA,EAIzF,OAAO,SAAqB;AAAA,IAC1B,GAAG,iBAAiB;AAAA,IACpB,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AACb,SAAK,SAAS;AAAA,EAChB;AACF;",
   "names": []
 }

package/Prefetch/PrefetchWhenVisible.d.ts

@@ -3,7 +3,7 @@ import { AbstractPrefetch } from './AbstractPrefetch.js';
 declare const PrefetchWhenVisible_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithMountWhenInViewInterface, AbstractPrefetch<import("@studiometa/js-toolkit").BaseProps>, import("@studiometa/js-toolkit").WithMountWhenInViewProps>;
 /**
  * PrefetchWhenVisible class.
- * @see https://ui.studiometa.dev/-/components/Prefetch/
+ * @link https://ui.studiometa.dev/-/components/Prefetch/
  */
 export declare class PrefetchWhenVisible extends PrefetchWhenVisible_base {
     /**

package/Prefetch/PrefetchWhenVisible.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Prefetch/PrefetchWhenVisible.ts"],
-  "sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractPrefetch } from './AbstractPrefetch.js';\n\n/**\n * PrefetchWhenVisible class.\n * @see https://ui.studiometa.dev/-/components/Prefetch/\n */\nexport class PrefetchWhenVisible extends withMountWhenInView<AbstractPrefetch>(AbstractPrefetch) {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractPrefetch.config,\n    name: 'PrefetchWhenVisible',\n  };\n\n  /**\n   * Prefetch on mount.\n   */\n  mounted() {\n    this.prefetch();\n  }\n}\n"],
+  "sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractPrefetch } from './AbstractPrefetch.js';\n\n/**\n * PrefetchWhenVisible class.\n * @link https://ui.studiometa.dev/-/components/Prefetch/\n */\nexport class PrefetchWhenVisible extends withMountWhenInView<AbstractPrefetch>(AbstractPrefetch) {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractPrefetch.config,\n    name: 'PrefetchWhenVisible',\n  };\n\n  /**\n   * Prefetch on mount.\n   */\n  mounted() {\n    this.prefetch();\n  }\n}\n"],
   "mappings": "AAAA,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB;AAM1B,MAAM,4BAA4B,oBAAsC,gBAAgB,EAAE;AAAA;AAAA;AAAA;AAAA,EAI/F,OAAO,SAAqB;AAAA,IAC1B,GAAG,iBAAiB;AAAA,IACpB,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,SAAS;AAAA,EAChB;AACF;",
   "names": []
 }

package/README.md

@@ -1,7 +1,6 @@
 # @studiometa/ui
 
 [![NPM Version](https://img.shields.io/npm/v/@studiometa/ui.svg?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/ui/)
-[![NPM Next Version](https://img.shields.io/npm/v/@studiometa/ui/next?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/ui/v/next)
 [![Downloads](https://img.shields.io/npm/dm/@studiometa/ui?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/ui/)
 [![Size](https://img.shields.io/bundlephobia/minzip/@studiometa/ui?style=flat&colorB=3e63dd&colorA=414853&label=size)](https://bundlephobia.com/package/@studiometa/ui)
 ![Codecov](https://img.shields.io/codecov/c/github/studiometa/ui?style=flat&colorB=3e63dd&colorA=414853)

package/ScrollAnimation/ScrollAnimation.d.ts

@@ -8,6 +8,7 @@ export interface ScrollAnimationProps extends BaseProps {
 declare const ScrollAnimation_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithScrolledInViewInterface, AbstractScrollAnimation<BaseProps>, import("@studiometa/js-toolkit").WithScrolledInViewProps>;
 /**
  * ScrollAnimation class.
+ * @link https://ui.studiometa.dev/-/components/ScrollAnimation/
  */
 export declare class ScrollAnimation<T extends BaseProps = BaseProps> extends ScrollAnimation_base<T & ScrollAnimationProps> {
     /**

package/ScrollAnimation/ScrollAnimation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimation.ts"],
-  "sourcesContent": ["import { withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationProps extends BaseProps {\n  $refs: {\n    target: HTMLElement;\n  };\n}\n\n/**\n * ScrollAnimation class.\n */\nexport class ScrollAnimation<\n  T extends BaseProps = BaseProps,\n> extends withScrolledInView<AbstractScrollAnimation>(AbstractScrollAnimation, {})<\n  T & ScrollAnimationProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractScrollAnimation.config,\n    name: 'ScrollAnimation',\n    refs: ['target'],\n  };\n\n  /**\n   * Use the `target` ref as animation target.\n   */\n  get target(): HTMLElement {\n    return this.$refs.target;\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,0BAA0B;AAEnC,SAAS,+BAA+B;AAWjC,MAAM,wBAEH,mBAA4C,yBAAyB,CAAC,CAAC,EAE/E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,wBAAwB;AAAA,IAC3B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAsB;AACxB,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;",
+  "sourcesContent": ["import { withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationProps extends BaseProps {\n  $refs: {\n    target: HTMLElement;\n  };\n}\n\n/**\n * ScrollAnimation class.\n * @link https://ui.studiometa.dev/-/components/ScrollAnimation/\n */\nexport class ScrollAnimation<\n  T extends BaseProps = BaseProps,\n> extends withScrolledInView<AbstractScrollAnimation>(AbstractScrollAnimation, {})<\n  T & ScrollAnimationProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractScrollAnimation.config,\n    name: 'ScrollAnimation',\n    refs: ['target'],\n  };\n\n  /**\n   * Use the `target` ref as animation target.\n   */\n  get target(): HTMLElement {\n    return this.$refs.target;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AAEnC,SAAS,+BAA+B;AAYjC,MAAM,wBAEH,mBAA4C,yBAAyB,CAAC,CAAC,EAE/E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,wBAAwB;AAAA,IAC3B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAsB;AACxB,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;",
   "names": []
 }