@studiometa/ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/molecules/Slider/Slider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Slider/Slider.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type {\n  BaseProps,\n  BaseConfig,\n  DragServiceProps,\n  KeyServiceProps,\n} from '@studiometa/js-toolkit';\nimport { clamp, inertiaFinalValue, nextFrame, isDev } from '@studiometa/js-toolkit/utils';\nimport { SliderDrag } from './SliderDrag.js';\nimport { SliderItem } from './SliderItem.js';\n\nexport type SliderModes = 'left' | 'center' | 'right';\n\ntype SliderState = { x: Record<SliderModes, number> };\n\nexport interface SliderProps extends BaseProps {\n  $refs: {\n    wrapper: HTMLElement;\n  };\n  $children: {\n    SliderItem: SliderItem[];\n    SliderDrag: SliderDrag[];\n  };\n  $options: {\n    mode: SliderModes;\n    fitBounds: boolean;\n    contain: boolean;\n    sensitivity: number;\n    dropSensitivity: number;\n  };\n}\n\n/**\n * Orchestrate the slider items state transition.\n * @todo a11y\n */\nexport class Slider<T extends BaseProps = BaseProps> extends Base<T & SliderProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Slider',\n    refs: ['wrapper', 'debug'],\n    emits: ['goto', 'index'],\n    components: {\n      SliderItem,\n      SliderDrag,\n    },\n    options: {\n      mode: { type: String, default: 'left' },\n      fitBounds: Boolean,\n      contain: Boolean,\n      sensitivity: { type: Number, default: 1 },\n      dropSensitivity: { type: Number, default: 2 },\n    },\n  };\n\n  __distanceX = 0;\n\n  __initialX = 0;\n\n  /**\n   * Index of the current active slide.\n   */\n  __currentIndex = 0;\n\n  __isDragging = false;\n\n  /**\n   * Get the current index.\n   */\n  get currentIndex() {\n    return this.__currentIndex;\n  }\n\n  /**\n   * Set the current index and emit the `index` event.\n   */\n  set currentIndex(value: number) {\n    this.currentSliderItem.disactivate();\n    this.$emit('index', value);\n    this.__currentIndex = value;\n    this.currentSliderItem.activate();\n  }\n\n  /**\n   * Store all the states.\n   */\n  states: SliderState[] = [];\n\n  /**\n   * Origins for the different modes.\n   */\n  origins: Record<SliderModes, number> = {\n    left: 0,\n    center: 0,\n    right: 0,\n  };\n\n  /**\n   * Wether or not the wrapper is focused.\n   * @type {boolean}\n   */\n  hasFocus = false;\n\n  /**\n   * Get the current state.\n   */\n  get currentState() {\n    return this.states[this.currentIndex];\n  }\n\n  /**\n   * Get the first state.\n   */\n  get firstState() {\n    return this.states[0];\n  }\n\n  /**\n   * Get the last state.\n   */\n  get lastState() {\n    return this.states.at(-1);\n  }\n\n  /**\n   * Get the minimal contain state value.\n   */\n  get containMinState(): number {\n    return this.getStateValueByMode(this.firstState.x, 'left');\n  }\n\n  /**\n   * Get the maximal contain state value.\n   */\n  get containMaxState(): number {\n    return this.getStateValueByMode(this.lastState.x, 'right');\n  }\n\n  /**\n   * Get the last index.\n   */\n  get indexMax(): number {\n    return this.$children.SliderItem.length - 1;\n  }\n\n  /**\n   * Get the current SliderItem\n   */\n  get currentSliderItem() {\n    return this.$children.SliderItem[this.currentIndex];\n  }\n\n  /**\n   * Get the states for each SliderItem.\n   */\n  getStates(): SliderState[] {\n    const { wrapper } = this.$refs;\n    const originRect = wrapper.getBoundingClientRect();\n\n    this.origins = {\n      left: originRect.left,\n      center: originRect.x + originRect.width / 2,\n      right: originRect.x + originRect.width,\n    };\n\n    const states: SliderState[] = this.$children.SliderItem.map((item) => ({\n      x: {\n        left: (item.rect.x - this.origins.left) * -1,\n        center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,\n        right: (item.rect.x + item.rect.width - this.origins.right) * -1,\n      },\n    }));\n\n    if (this.$options.contain) {\n      const { mode } = this.$options;\n      // Find state where last child has passed the wrapper bound completely\n      if (mode === 'left') {\n        const lastChild = this.$children.SliderItem.at(-1);\n\n        const maxState = states.find((state) => {\n          const lastChildPosition =\n            lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;\n          const diffWithWrapperBound = originRect.width - lastChildPosition;\n          if (diffWithWrapperBound > 0) {\n            state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);\n            return true;\n          }\n\n          return false;\n        });\n\n        if (maxState) {\n          return states.map((state) => {\n            state.x.left = Math.max(state.x.left, maxState.x.left);\n            return state;\n          });\n        }\n      }\n\n      if (mode === 'right') {\n        const maxStateIndex = states.findIndex((state) => state.x.right <= 0);\n        const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];\n\n        return states.map((state) => {\n          state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);\n          return state;\n        });\n      }\n\n      if (mode === 'center' && isDev) {\n        console.warn(\n          `[${this.$id}]`,\n          'The `center` mode is not yet compatible with the `contain` mode.',\n        );\n      }\n    }\n\n    return states;\n  }\n\n  /**\n   * Get an origin by mode.\n   */\n  getOriginByMode(mode?: SliderModes) {\n    return this.origins[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Get a state value according to the given mode.\n   */\n  getStateValueByMode(state: SliderState['x'], mode?: SliderModes) {\n    return state[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    this.states = this.getStates();\n    this.setAccessibilityAttributes();\n    this.prepareInvisibleItems();\n    this.goTo(this.currentIndex);\n  }\n\n  /**\n   * Resized hook.\n   */\n  resized() {\n    nextFrame(() => {\n      this.states = this.getStates();\n      nextFrame(() => {\n        this.prepareInvisibleItems();\n        this.goTo(this.currentIndex);\n      });\n    });\n  }\n\n  /**\n   * Set accessibility attributes for the component\n   */\n  setAccessibilityAttributes() {\n    this.$el.setAttribute('role', 'group');\n    this.$el.setAttribute('aria-roledescription', 'carousel');\n  }\n\n  /**\n   * Go to the next slide.\n   */\n  goNext() {\n    if (this.currentIndex + 1 > this.indexMax) {\n      return;\n    }\n\n    this.goTo(this.currentIndex + 1);\n  }\n\n  /**\n   * Go to the previous slide.\n   */\n  goPrev() {\n    if (this.currentIndex - 1 < 0) {\n      return;\n    }\n\n    this.goTo(this.currentIndex - 1);\n  }\n\n  /**\n   * Go to the given index.\n   */\n  goTo(index: number, { withInstantMove = true } = {}) {\n    if (index < 0 || index > this.indexMax) {\n      throw new Error('Index out of bound.');\n    }\n\n    const currentState = this.getStateValueByMode(this.currentState.x);\n    const state = this.getStateValueByMode(this.states[index].x);\n    const itemsToMove = this.getVisibleItems(state);\n    const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);\n\n    itemsToMove.forEach((item) => {\n      // Better perfs when going fast through the slides\n      if (currentState !== state && withInstantMove) {\n        item.moveInstantly(currentState);\n      }\n      nextFrame(() => item.move(state));\n    });\n    invisibleItemsToMoveInstantly.forEach((item) => {\n      item.moveInstantly(state);\n    });\n\n    this.currentIndex = index;\n    this.$emit('goto', index);\n  }\n\n  /**\n   * Listen to the Draggable `start` event.\n   */\n  onSliderDragStart() {\n    this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;\n    this.__distanceX = this.__initialX;\n\n    this.__isDragging = true;\n  }\n\n  /**\n   * Listen to the Draggable `drag` event.\n   */\n  onSliderDragDrag(props: DragServiceProps) {\n    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n      return;\n    }\n\n    this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;\n\n    this.getVisibleItems(this.__distanceX).forEach((item) => {\n      item.moveInstantly(this.__distanceX);\n    });\n  }\n\n  /**\n   * Listen to the Draggable `drop` event and find the new active slide.\n   */\n  onSliderDragDrop(props: DragServiceProps) {\n    if (!this.__isDragging) {\n      return;\n    }\n    this.__isDragging = false;\n\n    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n      return;\n    }\n\n    let finalX = clamp(\n      inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.dropSensitivity),\n      this.getStateValueByMode(this.firstState.x),\n      this.getStateValueByMode(this.lastState.x),\n    );\n\n    const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) =>\n      Math.abs(finalX - this.getStateValueByMode(state.x)),\n    );\n    const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);\n    const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);\n\n    if (this.$options.fitBounds) {\n      this.goTo(closestIndex, { withInstantMove: false });\n    } else {\n      if (this.$options.contain) {\n        finalX = Math.min(this.containMinState, finalX);\n        finalX = Math.max(this.containMaxState, finalX);\n      }\n      this.$children.SliderItem.forEach((item) => {\n        item.move(finalX);\n      });\n      this.currentIndex = closestIndex;\n    }\n  }\n\n  /**\n   * Enable focus.\n   */\n  onWrapperFocus() {\n    this.hasFocus = true;\n  }\n\n  /**\n   * Disable focus.\n   */\n  onWrapperBlur() {\n    this.hasFocus = false;\n  }\n\n  /**\n   * Go prev or next when focus is on the wrapper and pressing arrow keys.\n   */\n  keyed({ LEFT, RIGHT, isDown }: KeyServiceProps) {\n    if (this.hasFocus && isDown) {\n      if (LEFT) {\n        this.goPrev();\n      } else if (RIGHT) {\n        this.goNext();\n      }\n    }\n  }\n\n  /**\n   * Prepare invisible items.\n   */\n  prepareInvisibleItems() {\n    const state = this.states[this.currentIndex];\n    const nextItemsToPrepare = [];\n    const previousItemsToPrepare = [];\n\n    this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {\n      if (i > this.currentIndex) {\n        nextItemsToPrepare.push(item);\n        return;\n      }\n\n      if (i < this.currentIndex) {\n        previousItemsToPrepare.push(item);\n      }\n    });\n\n    nextItemsToPrepare.forEach((item) => {\n      const invisibleState = this.getStateWhereItemWillBeInvisible(item);\n      if (invisibleState) {\n        item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n      }\n    });\n\n    previousItemsToPrepare.forEach((item) => {\n      const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });\n      if (invisibleState) {\n        item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n      }\n    });\n  }\n\n  /**\n   * Get the state where the given item will be visible.\n   */\n  getStateWhereItemWillBeInvisible(item: SliderItem, { reversed = false } = {}): SliderState {\n    const visibleStates = this.states.filter((state) =>\n      item.willBeVisible(this.getStateValueByMode(state.x)),\n    );\n    const firstVisibleState = visibleStates[0];\n    const lastVisibleState = visibleStates.at(-1);\n    const firstVisibleStateIndex = this.states.findIndex(\n      (state) =>\n        this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x),\n    );\n    const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);\n\n    return reversed\n      ? this.states[lastVisibleStateIndex + 1]\n      : this.states[firstVisibleStateIndex - 1];\n  }\n\n  /**\n   * Get the visible slides for the given position.\n   */\n  getVisibleItems(target: number) {\n    return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));\n  }\n\n  /**\n   * Get the invisible slides for the given position.\n   */\n  getInvisibleItems(target: number) {\n    return this.$children.SliderItem.filter(\n      (item) => !item.isVisible && !item.willBeVisible(target),\n    );\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type {\n  BaseProps,\n  BaseConfig,\n  DragServiceProps,\n  KeyServiceProps,\n} from '@studiometa/js-toolkit';\nimport { clamp, inertiaFinalValue, nextFrame, isDev } from '@studiometa/js-toolkit/utils';\nimport { SliderDrag } from './SliderDrag.js';\nimport { SliderItem } from './SliderItem.js';\n\nexport type SliderModes = 'left' | 'center' | 'right';\n\ntype SliderState = { x: Record<SliderModes, number> };\n\nexport interface SliderProps extends BaseProps {\n  $refs: {\n    wrapper: HTMLElement;\n  };\n  $children: {\n    SliderItem: SliderItem[];\n    SliderDrag: SliderDrag[];\n  };\n  $options: {\n    mode: SliderModes;\n    fitBounds: boolean;\n    contain: boolean;\n    sensitivity: number;\n    dropSensitivity: number;\n  };\n}\n\n/**\n * Orchestrate the slider items state transition.\n * @todo a11y\n */\nexport class Slider<T extends BaseProps = BaseProps> extends Base<T & SliderProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Slider',\n    refs: ['wrapper', 'debug'],\n    emits: ['goto', 'index'],\n    components: {\n      SliderItem,\n      SliderDrag,\n    },\n    options: {\n      mode: { type: String, default: 'left' },\n      fitBounds: Boolean,\n      contain: Boolean,\n      sensitivity: { type: Number, default: 1 },\n      dropSensitivity: { type: Number, default: 2 },\n    },\n  };\n\n  __distanceX = 0;\n\n  __initialX = 0;\n\n  /**\n   * Index of the current active slide.\n   */\n  __currentIndex = 0;\n\n  __isDragging = false;\n\n  /**\n   * Get the current index.\n   */\n  get currentIndex() {\n    return this.__currentIndex;\n  }\n\n  /**\n   * Set the current index and emit the `index` event.\n   */\n  set currentIndex(value: number) {\n    this.currentSliderItem.disactivate();\n    this.$emit('index', value);\n    this.__currentIndex = value;\n    this.currentSliderItem.activate();\n  }\n\n  /**\n   * Store all the states.\n   */\n  states: SliderState[] = [];\n\n  /**\n   * Origins for the different modes.\n   */\n  origins: Record<SliderModes, number> = {\n    left: 0,\n    center: 0,\n    right: 0,\n  };\n\n  /**\n   * Wether or not the wrapper is focused.\n   * @type {boolean}\n   */\n  hasFocus = false;\n\n  /**\n   * Get the current state.\n   */\n  get currentState() {\n    return this.states[this.currentIndex];\n  }\n\n  /**\n   * Get the first state.\n   */\n  get firstState() {\n    return this.states[0];\n  }\n\n  /**\n   * Get the last state.\n   */\n  get lastState() {\n    return this.states.at(-1);\n  }\n\n  /**\n   * Get the minimal contain state value.\n   */\n  get containMinState(): number {\n    return this.getStateValueByMode(this.firstState.x, 'left');\n  }\n\n  /**\n   * Get the maximal contain state value.\n   */\n  get containMaxState(): number {\n    return this.getStateValueByMode(this.lastState.x, 'right');\n  }\n\n  /**\n   * Get the last index.\n   */\n  get indexMax(): number {\n    return this.$children.SliderItem.length - 1;\n  }\n\n  /**\n   * Get the current SliderItem\n   */\n  get currentSliderItem() {\n    return this.$children.SliderItem[this.currentIndex];\n  }\n\n  /**\n   * Get the states for each SliderItem.\n   */\n  getStates(): SliderState[] {\n    const { wrapper } = this.$refs;\n    const originRect = wrapper.getBoundingClientRect();\n\n    this.origins = {\n      left: originRect.left,\n      center: originRect.x + originRect.width / 2,\n      right: originRect.x + originRect.width,\n    };\n\n    const states: SliderState[] = this.$children.SliderItem.map((item) => ({\n      x: {\n        left: (item.rect.x - this.origins.left) * -1,\n        center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,\n        right: (item.rect.x + item.rect.width - this.origins.right) * -1,\n      },\n    }));\n\n    if (this.$options.contain) {\n      const { mode } = this.$options;\n      // Find state where last child has passed the wrapper bound completely\n      if (mode === 'left') {\n        const lastChild = this.$children.SliderItem.at(-1);\n\n        const maxState = states.find((state) => {\n          const lastChildPosition =\n            lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;\n          const diffWithWrapperBound = originRect.width - lastChildPosition;\n          if (diffWithWrapperBound > 0) {\n            state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);\n            return true;\n          }\n\n          return false;\n        });\n\n        if (maxState) {\n          return states.map((state) => {\n            state.x.left = Math.max(state.x.left, maxState.x.left);\n            return state;\n          });\n        }\n      }\n\n      if (mode === 'right') {\n        const maxStateIndex = states.findIndex((state) => state.x.right <= 0);\n        const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];\n\n        return states.map((state) => {\n          state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);\n          return state;\n        });\n      }\n\n      if (mode === 'center' && isDev) {\n        console.warn(\n          `[${this.$id}]`,\n          'The `center` mode is not yet compatible with the `contain` mode.',\n        );\n      }\n    }\n\n    return states;\n  }\n\n  /**\n   * Get an origin by mode.\n   */\n  getOriginByMode(mode?: SliderModes) {\n    return this.origins[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Get a state value according to the given mode.\n   */\n  getStateValueByMode(state: SliderState['x'], mode?: SliderModes) {\n    return state[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    this.states = this.getStates();\n    this.setAccessibilityAttributes();\n    this.prepareInvisibleItems();\n    this.goTo(this.currentIndex);\n  }\n\n  /**\n   * Resized hook.\n   */\n  resized() {\n    nextFrame(() => {\n      this.states = this.getStates();\n      nextFrame(() => {\n        this.prepareInvisibleItems();\n        this.goTo(this.currentIndex);\n      });\n    });\n  }\n\n  /**\n   * Set accessibility attributes for the component\n   */\n  setAccessibilityAttributes() {\n    this.$el.setAttribute('role', 'group');\n    this.$el.setAttribute('aria-roledescription', 'carousel');\n  }\n\n  /**\n   * Go to the next slide.\n   */\n  goNext() {\n    if (this.currentIndex + 1 > this.indexMax) {\n      return;\n    }\n\n    this.goTo(this.currentIndex + 1);\n  }\n\n  /**\n   * Go to the previous slide.\n   */\n  goPrev() {\n    if (this.currentIndex - 1 < 0) {\n      return;\n    }\n\n    this.goTo(this.currentIndex - 1);\n  }\n\n  /**\n   * Go to the given index.\n   */\n  goTo(index: number, { withInstantMove = true } = {}) {\n    if (index < 0 || index > this.indexMax) {\n      throw new Error('Index out of bound.');\n    }\n\n    const currentState = this.getStateValueByMode(this.currentState.x);\n    const state = this.getStateValueByMode(this.states[index].x);\n    const itemsToMove = this.getVisibleItems(state);\n    const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);\n\n    itemsToMove.forEach((item) => {\n      // Better perfs when going fast through the slides\n      if (currentState !== state && withInstantMove) {\n        item.moveInstantly(currentState);\n      }\n      nextFrame(() => item.move(state));\n    });\n    invisibleItemsToMoveInstantly.forEach((item) => {\n      item.moveInstantly(state);\n    });\n\n    this.currentIndex = index;\n    this.$emit('goto', index);\n  }\n\n  /**\n   * Listen to the Draggable `start` event.\n   */\n  onSliderDragStart() {\n    this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;\n    this.__distanceX = this.__initialX;\n\n    this.__isDragging = true;\n  }\n\n  /**\n   * Listen to the Draggable `drag` event.\n   */\n  onSliderDragDrag({ args: [props] }: { args: [DragServiceProps] }) {\n    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n      return;\n    }\n\n    this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;\n\n    this.getVisibleItems(this.__distanceX).forEach((item) => {\n      item.moveInstantly(this.__distanceX);\n    });\n  }\n\n  /**\n   * Listen to the Draggable `drop` event and find the new active slide.\n   */\n  onSliderDragDrop({ args: [props] }: { args: [DragServiceProps] }) {\n    if (!this.__isDragging) {\n      return;\n    }\n    this.__isDragging = false;\n\n    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n      return;\n    }\n\n    let finalX = clamp(\n      inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.dropSensitivity),\n      this.getStateValueByMode(this.firstState.x),\n      this.getStateValueByMode(this.lastState.x),\n    );\n\n    const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) =>\n      Math.abs(finalX - this.getStateValueByMode(state.x)),\n    );\n    const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);\n    const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);\n\n    if (this.$options.fitBounds) {\n      this.goTo(closestIndex, { withInstantMove: false });\n    } else {\n      if (this.$options.contain) {\n        finalX = Math.min(this.containMinState, finalX);\n        finalX = Math.max(this.containMaxState, finalX);\n      }\n      this.$children.SliderItem.forEach((item) => {\n        item.move(finalX);\n      });\n      this.currentIndex = closestIndex;\n    }\n  }\n\n  /**\n   * Enable focus.\n   */\n  onWrapperFocus() {\n    this.hasFocus = true;\n  }\n\n  /**\n   * Disable focus.\n   */\n  onWrapperBlur() {\n    this.hasFocus = false;\n  }\n\n  /**\n   * Go prev or next when focus is on the wrapper and pressing arrow keys.\n   */\n  keyed({ LEFT, RIGHT, isDown }: KeyServiceProps) {\n    if (this.hasFocus && isDown) {\n      if (LEFT) {\n        this.goPrev();\n      } else if (RIGHT) {\n        this.goNext();\n      }\n    }\n  }\n\n  /**\n   * Prepare invisible items.\n   */\n  prepareInvisibleItems() {\n    const state = this.states[this.currentIndex];\n    const nextItemsToPrepare = [];\n    const previousItemsToPrepare = [];\n\n    this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {\n      if (i > this.currentIndex) {\n        nextItemsToPrepare.push(item);\n        return;\n      }\n\n      if (i < this.currentIndex) {\n        previousItemsToPrepare.push(item);\n      }\n    });\n\n    nextItemsToPrepare.forEach((item) => {\n      const invisibleState = this.getStateWhereItemWillBeInvisible(item);\n      if (invisibleState) {\n        item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n      }\n    });\n\n    previousItemsToPrepare.forEach((item) => {\n      const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });\n      if (invisibleState) {\n        item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n      }\n    });\n  }\n\n  /**\n   * Get the state where the given item will be visible.\n   */\n  getStateWhereItemWillBeInvisible(item: SliderItem, { reversed = false } = {}): SliderState {\n    const visibleStates = this.states.filter((state) =>\n      item.willBeVisible(this.getStateValueByMode(state.x)),\n    );\n    const firstVisibleState = visibleStates[0];\n    const lastVisibleState = visibleStates.at(-1);\n    const firstVisibleStateIndex = this.states.findIndex(\n      (state) =>\n        this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x),\n    );\n    const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);\n\n    return reversed\n      ? this.states[lastVisibleStateIndex + 1]\n      : this.states[firstVisibleStateIndex - 1];\n  }\n\n  /**\n   * Get the visible slides for the given position.\n   */\n  getVisibleItems(target: number) {\n    return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));\n  }\n\n  /**\n   * Get the invisible slides for the given position.\n   */\n  getInvisibleItems(target: number) {\n    return this.$children.SliderItem.filter(\n      (item) => !item.isVisible && !item.willBeVisible(target),\n    );\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/molecules/Slider/SliderDots.d.ts

@@ -32,6 +32,9 @@ export declare class SliderDots<T extends BaseProps = BaseProps> extends SliderD
     /**
      * Go to the given index on dot click.
      */
-    onDotsClick(event: MouseEvent, index: number): void;
+    onDotsClick({ event, index }: {
+        event: MouseEvent;
+        index: number;
+    }): void;
 }
 export {};

package/molecules/Slider/SliderDots.js

@@ -32,7 +32,7 @@ class SliderDots extends withTransition(AbstractSliderChild) {
   /**
    * Go to the given index on dot click.
    */
-  onDotsClick(event, index) {
+  onDotsClick({ event, index }) {
     this.$parent.goTo(index);
   }
 }

package/molecules/Slider/SliderDots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Slider/SliderDots.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../../decorators/index.js';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderDotsProps extends BaseProps {\n  $refs: {\n    dots: HTMLButtonElement[];\n  };\n}\n\n/**\n * SliderDots class.\n */\nexport class SliderDots<\n  T extends BaseProps = BaseProps,\n> extends withTransition<AbstractSliderChild>(AbstractSliderChild)<T & SliderDotsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDots',\n    refs: ['dots[]'],\n  };\n\n  /**\n   * Get target.\n   * @returns {HTMLButtonElement[]}\n   */\n  get target() {\n    return this.$refs.dots;\n  }\n\n  /**\n   * The current active index.\n   */\n  currentIndex = 0;\n\n  /**\n   * Update dots classes according to the new index.\n   * @param   {number} index\n   * @returns {void}\n   */\n  update(index: number) {\n    this.leave(this.$refs.dots[this.currentIndex]);\n    this.enter(this.$refs.dots[index]);\n    this.currentIndex = index;\n  }\n\n  /**\n   * Go to the given index on dot click.\n   */\n  onDotsClick(event: MouseEvent, index: number) {\n    this.$parent.goTo(index);\n  }\n}\n"],
-  "mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AAW7B,MAAM,mBAEH,eAAoC,mBAAmB,EAAuB;AAAA;AAAA;AAAA;AAAA,EAItF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOf,OAAO,OAAe;AACpB,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,YAAY,CAAC;AAC7C,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,CAAC;AACjC,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,OAAmB,OAAe;AAC5C,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../../decorators/index.js';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderDotsProps extends BaseProps {\n  $refs: {\n    dots: HTMLButtonElement[];\n  };\n}\n\n/**\n * SliderDots class.\n */\nexport class SliderDots<\n  T extends BaseProps = BaseProps,\n> extends withTransition<AbstractSliderChild>(AbstractSliderChild)<T & SliderDotsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDots',\n    refs: ['dots[]'],\n  };\n\n  /**\n   * Get target.\n   * @returns {HTMLButtonElement[]}\n   */\n  get target() {\n    return this.$refs.dots;\n  }\n\n  /**\n   * The current active index.\n   */\n  currentIndex = 0;\n\n  /**\n   * Update dots classes according to the new index.\n   * @param   {number} index\n   * @returns {void}\n   */\n  update(index: number) {\n    this.leave(this.$refs.dots[this.currentIndex]);\n    this.enter(this.$refs.dots[index]);\n    this.currentIndex = index;\n  }\n\n  /**\n   * Go to the given index on dot click.\n   */\n  onDotsClick({ event, index }: { event: MouseEvent, index: number }) {\n    this.$parent.goTo(index);\n  }\n}\n"],
+  "mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AAW7B,MAAM,mBAEH,eAAoC,mBAAmB,EAAuB;AAAA;AAAA;AAAA;AAAA,EAItF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOf,OAAO,OAAe;AACpB,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,YAAY,CAAC;AAC7C,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,CAAC;AACjC,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,EAAE,OAAO,MAAM,GAAyC;AAClE,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;",
   "names": []
 }

package/molecules/Slider/SliderDrag.d.ts

@@ -24,7 +24,9 @@ export declare class SliderDrag<T extends BaseProps = BaseProps> extends SliderD
      * @param   {TouchEvent} event
      * @returns {void}
      */
-    onTouchmove(event: TouchEvent): void;
+    onTouchmove({ event }: {
+        event: TouchEvent;
+    }): void;
     /**
      * Emit drag events.
      */

package/molecules/Slider/SliderDrag.js

@@ -26,7 +26,7 @@ class SliderDrag extends withDrag(Base) {
    * @param   {TouchEvent} event
    * @returns {void}
    */
-  onTouchmove(event) {
+  onTouchmove({ event }) {
     if (this.shouldPreventScroll) {
       event.preventDefault();
     }

package/molecules/Slider/SliderDrag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Slider/SliderDrag.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { Base, withDrag } from '@studiometa/js-toolkit';\n\nexport interface SliderDragProps extends BaseProps {\n  $options: {\n    scrollLockThreshold: number;\n  };\n}\n\n/**\n * SliderDrag class.\n */\nexport class SliderDrag<T extends BaseProps = BaseProps> extends withDrag(Base)<\n  T & SliderDragProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDrag',\n    emits: ['start', 'drag', 'drop', 'inertia', 'stop'],\n    options: {\n      scrollLockThreshold: {\n        type: Number,\n        default: 10,\n      },\n    },\n  };\n\n  /**\n   * Test if the scroll should be blocked. Used with the touchmove event to prevent\n   * scrolling vertically when trying to drag the slider.\n   */\n  get shouldPreventScroll() {\n    const { distance } = this.$services.get('dragged') as DragServiceProps;\n    return (\n      Math.abs(distance.x) > this.$options.scrollLockThreshold &&\n      Math.abs(distance.x) > Math.abs(distance.y)\n    );\n  }\n\n  /**\n   * Touchmove handler.\n   * @param   {TouchEvent} event\n   * @returns {void}\n   */\n  onTouchmove(event: TouchEvent) {\n    if (this.shouldPreventScroll) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Emit drag events.\n   */\n  dragged(props: DragServiceProps) {\n    this.$emit(props.mode, props);\n  }\n}\n"],
-  "mappings": "AACA,SAAS,MAAM,gBAAgB;AAWxB,MAAM,mBAAoD,SAAS,IAAI,EAE5E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,SAAS,QAAQ,QAAQ,WAAW,MAAM;AAAA,IAClD,SAAS;AAAA,MACP,qBAAqB;AAAA,QACnB,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,sBAAsB;AACxB,UAAM,EAAE,SAAS,IAAI,KAAK,UAAU,IAAI,SAAS;AACjD,WACE,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,uBACrC,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAE9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,OAAmB;AAC7B,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAyB;AAC/B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { Base, withDrag } from '@studiometa/js-toolkit';\n\nexport interface SliderDragProps extends BaseProps {\n  $options: {\n    scrollLockThreshold: number;\n  };\n}\n\n/**\n * SliderDrag class.\n */\nexport class SliderDrag<T extends BaseProps = BaseProps> extends withDrag(Base)<\n  T & SliderDragProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDrag',\n    emits: ['start', 'drag', 'drop', 'inertia', 'stop'],\n    options: {\n      scrollLockThreshold: {\n        type: Number,\n        default: 10,\n      },\n    },\n  };\n\n  /**\n   * Test if the scroll should be blocked. Used with the touchmove event to prevent\n   * scrolling vertically when trying to drag the slider.\n   */\n  get shouldPreventScroll() {\n    const { distance } = this.$services.get('dragged') as DragServiceProps;\n    return (\n      Math.abs(distance.x) > this.$options.scrollLockThreshold &&\n      Math.abs(distance.x) > Math.abs(distance.y)\n    );\n  }\n\n  /**\n   * Touchmove handler.\n   * @param   {TouchEvent} event\n   * @returns {void}\n   */\n  onTouchmove({ event }: { event: TouchEvent }) {\n    if (this.shouldPreventScroll) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Emit drag events.\n   */\n  dragged(props: DragServiceProps) {\n    this.$emit(props.mode, props);\n  }\n}\n"],
+  "mappings": "AACA,SAAS,MAAM,gBAAgB;AAWxB,MAAM,mBAAoD,SAAS,IAAI,EAE5E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,SAAS,QAAQ,QAAQ,WAAW,MAAM;AAAA,IAClD,SAAS;AAAA,MACP,qBAAqB;AAAA,QACnB,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,sBAAsB;AACxB,UAAM,EAAE,SAAS,IAAI,KAAK,UAAU,IAAI,SAAS;AACjD,WACE,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,uBACrC,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAE9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,EAAE,MAAM,GAA0B;AAC5C,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAyB;AAC/B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;",
   "names": []
 }

package/molecules/Sticky/Sticky.d.ts

@@ -75,7 +75,9 @@ export declare class Sticky<T extends BaseProps = BaseProps> extends Base<T & St
      * @param   {IntersectionObserverEntry[]} entries
      * @returns {void}
      */
-    onSentinelIntersected([entry]: IntersectionObserverEntry[]): void;
+    onSentinelIntersected({ args: [[entry]] }: {
+        args: [IntersectionObserverEntry[]];
+    }): void;
     /**
      * Hide the sticky component when another one is sticky.
      */

package/molecules/Sticky/Sticky.js

@@ -81,7 +81,7 @@ class Sticky extends Base {
    * @param   {IntersectionObserverEntry[]} entries
    * @returns {void}
    */
-  onSentinelIntersected([entry]) {
+  onSentinelIntersected({ args: [[entry]] }) {
     this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;
     this.setPosition();
   }

package/molecules/Sticky/Sticky.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Sticky/Sticky.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Sentinel } from '../../primitives/index.js';\n\n/**\n * @typedef {object} StickyRefs\n * @property {HTMLElement} inner\n * @property {HTMLElement} sentinelRef\n */\n\n/**\n * @typedef {object} StickyPrivateInterface\n * @property {StickyRefs} $refs\n * @property {{ zIndex: number, hideWhenUp: boolean, hideWhenDown: boolean }} $options\n * @property {{ Sentinel: Sentinel[] }} $children\n */\n\nexport interface StickyProps extends BaseProps {\n  $refs: {\n    inner: HTMLElement;\n    sentinelRef: HTMLElement;\n  };\n  $options: {\n    zIndex: number;\n    hideWhenUp: boolean;\n    hideWhenDown: boolean;\n  };\n  $children: {\n    Sentinel: Sentinel[];\n  };\n}\n\n/**\n * Sticky class.\n */\nexport class Sticky<T extends BaseProps = BaseProps> extends Base<T & StickyProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Sticky',\n    refs: ['inner', 'sentinelRef'],\n    components: {\n      Sentinel,\n    },\n    options: {\n      zIndex: {\n        type: Number,\n        default: 100,\n      },\n      hideWhenUp: Boolean,\n      hideWhenDown: Boolean,\n    },\n  };\n\n  /**\n   * Holder for all instances.\n   */\n  // eslint-disable-next-line no-use-before-define\n  static instances: Set<Sticky> = new Set();\n\n  /**\n   * Is the component sticky?\n   */\n  isSticky = false;\n\n  /**\n   * Is the component visible?\n   */\n  isVisible = true;\n\n  /**\n   * Set the Y value.\n   */\n  set y(value: number) {\n    this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;\n  }\n\n  /**\n   * Get instances as array.\n   */\n  get instances(): Sticky[] {\n    return Array.from(Sticky.instances);\n  }\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    Sticky.instances.add(this);\n    this.setSentinelSize();\n  }\n\n  /**\n   * Resized hook.\n   */\n  resized() {\n    this.setSentinelSize();\n  }\n\n  /**\n   * Destroyed hook.\n   */\n  destroyed() {\n    Sticky.instances.delete(this);\n  }\n\n  /**\n   * Scrolled hook.\n   */\n  scrolled(props) {\n    if (!this.isSticky || props.y === props.last.y) {\n      return;\n    }\n\n    if (\n      (props.direction.y === 'DOWN' && this.$options.hideWhenDown) ||\n      (props.direction.y === 'UP' && this.$options.hideWhenUp)\n    ) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Listen to the sentinel's `intersected` event to set the `isSticky` value.\n   * @param   {IntersectionObserverEntry[]} entries\n   * @returns {void}\n   */\n  onSentinelIntersected([entry]: IntersectionObserverEntry[]) {\n    this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;\n    this.setPosition();\n  }\n\n  /**\n   * Hide the sticky component when another one is sticky.\n   */\n  hide() {\n    if (!this.isVisible) {\n      return;\n    }\n\n    this.isVisible = false;\n    this.$el.classList.add('pointer-events-none');\n\n    this.instances.forEach((instance, index) => instance.setPosition(index));\n  }\n\n  /**\n   * Show the sticky component when the other one is not sticky anymore.\n   */\n  show() {\n    if (this.isVisible) {\n      return;\n    }\n\n    this.isVisible = true;\n    this.$el.classList.remove('pointer-events-none');\n    this.instances.forEach((instance, index) => instance.setPosition(index));\n  }\n\n  /**\n   * Set the sentinel height based on the previous instances.\n   */\n  setSentinelSize() {\n    const { instances } = this;\n    const index = instances.indexOf(this);\n    const height = instances\n      .slice(0, index)\n      .filter(\n        // Test each instance sticky context against the current element\n        (instance) => this.closestRelativeElement(instance.$el).contains(this.$el),\n      )\n      .reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);\n\n    this.$refs.sentinelRef.style.height = `${height + 1}px`;\n    this.$el.style.top = `${height}px`;\n    this.$el.style.zIndex = String(this.$options.zIndex - index);\n  }\n\n  /**\n   * Set the component's position.\n   * @param   {number} [index] The instance index in all the pages' instances.\n   * @returns {void}\n   */\n  setPosition(index?: number) {\n    if (!this.isSticky) {\n      this.y = 0;\n      return;\n    }\n\n    const { instances } = this;\n\n    // eslint-disable-next-line no-param-reassign\n    index = index ?? instances.indexOf(this);\n\n    this.y = instances\n      .slice(0, index)\n      .filter((instance) => instance.isSticky && !instance.isVisible)\n      .reduce<number>(\n        (y: number, instance) => y - instance.$refs.inner.offsetHeight,\n        this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1,\n      ) as number;\n  }\n\n  /**\n   * Find the first parent which has a relative position.\n   */\n  closestRelativeElement(element: HTMLElement) {\n    let parent = element.parentElement;\n\n    while (getComputedStyle(parent).position !== 'relative' && parent.parentElement) {\n      parent = parent.parentElement;\n    }\n\n    return parent;\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Sentinel } from '../../primitives/index.js';\n\n/**\n * @typedef {object} StickyRefs\n * @property {HTMLElement} inner\n * @property {HTMLElement} sentinelRef\n */\n\n/**\n * @typedef {object} StickyPrivateInterface\n * @property {StickyRefs} $refs\n * @property {{ zIndex: number, hideWhenUp: boolean, hideWhenDown: boolean }} $options\n * @property {{ Sentinel: Sentinel[] }} $children\n */\n\nexport interface StickyProps extends BaseProps {\n  $refs: {\n    inner: HTMLElement;\n    sentinelRef: HTMLElement;\n  };\n  $options: {\n    zIndex: number;\n    hideWhenUp: boolean;\n    hideWhenDown: boolean;\n  };\n  $children: {\n    Sentinel: Sentinel[];\n  };\n}\n\n/**\n * Sticky class.\n */\nexport class Sticky<T extends BaseProps = BaseProps> extends Base<T & StickyProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Sticky',\n    refs: ['inner', 'sentinelRef'],\n    components: {\n      Sentinel,\n    },\n    options: {\n      zIndex: {\n        type: Number,\n        default: 100,\n      },\n      hideWhenUp: Boolean,\n      hideWhenDown: Boolean,\n    },\n  };\n\n  /**\n   * Holder for all instances.\n   */\n  // eslint-disable-next-line no-use-before-define\n  static instances: Set<Sticky> = new Set();\n\n  /**\n   * Is the component sticky?\n   */\n  isSticky = false;\n\n  /**\n   * Is the component visible?\n   */\n  isVisible = true;\n\n  /**\n   * Set the Y value.\n   */\n  set y(value: number) {\n    this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;\n  }\n\n  /**\n   * Get instances as array.\n   */\n  get instances(): Sticky[] {\n    return Array.from(Sticky.instances);\n  }\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    Sticky.instances.add(this);\n    this.setSentinelSize();\n  }\n\n  /**\n   * Resized hook.\n   */\n  resized() {\n    this.setSentinelSize();\n  }\n\n  /**\n   * Destroyed hook.\n   */\n  destroyed() {\n    Sticky.instances.delete(this);\n  }\n\n  /**\n   * Scrolled hook.\n   */\n  scrolled(props) {\n    if (!this.isSticky || props.y === props.last.y) {\n      return;\n    }\n\n    if (\n      (props.direction.y === 'DOWN' && this.$options.hideWhenDown) ||\n      (props.direction.y === 'UP' && this.$options.hideWhenUp)\n    ) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Listen to the sentinel's `intersected` event to set the `isSticky` value.\n   * @param   {IntersectionObserverEntry[]} entries\n   * @returns {void}\n   */\n  onSentinelIntersected({ args: [[entry]] }: { args: [IntersectionObserverEntry[]] }) {\n    this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;\n    this.setPosition();\n  }\n\n  /**\n   * Hide the sticky component when another one is sticky.\n   */\n  hide() {\n    if (!this.isVisible) {\n      return;\n    }\n\n    this.isVisible = false;\n    this.$el.classList.add('pointer-events-none');\n\n    this.instances.forEach((instance, index) => instance.setPosition(index));\n  }\n\n  /**\n   * Show the sticky component when the other one is not sticky anymore.\n   */\n  show() {\n    if (this.isVisible) {\n      return;\n    }\n\n    this.isVisible = true;\n    this.$el.classList.remove('pointer-events-none');\n    this.instances.forEach((instance, index) => instance.setPosition(index));\n  }\n\n  /**\n   * Set the sentinel height based on the previous instances.\n   */\n  setSentinelSize() {\n    const { instances } = this;\n    const index = instances.indexOf(this);\n    const height = instances\n      .slice(0, index)\n      .filter(\n        // Test each instance sticky context against the current element\n        (instance) => this.closestRelativeElement(instance.$el).contains(this.$el),\n      )\n      .reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);\n\n    this.$refs.sentinelRef.style.height = `${height + 1}px`;\n    this.$el.style.top = `${height}px`;\n    this.$el.style.zIndex = String(this.$options.zIndex - index);\n  }\n\n  /**\n   * Set the component's position.\n   * @param   {number} [index] The instance index in all the pages' instances.\n   * @returns {void}\n   */\n  setPosition(index?: number) {\n    if (!this.isSticky) {\n      this.y = 0;\n      return;\n    }\n\n    const { instances } = this;\n\n    // eslint-disable-next-line no-param-reassign\n    index = index ?? instances.indexOf(this);\n\n    this.y = instances\n      .slice(0, index)\n      .filter((instance) => instance.isSticky && !instance.isVisible)\n      .reduce<number>(\n        (y: number, instance) => y - instance.$refs.inner.offsetHeight,\n        this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1,\n      ) as number;\n  }\n\n  /**\n   * Find the first parent which has a relative position.\n   */\n  closestRelativeElement(element: HTMLElement) {\n    let parent = element.parentElement;\n\n    while (getComputedStyle(parent).position !== 'relative' && parent.parentElement) {\n      parent = parent.parentElement;\n    }\n\n    return parent;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,gBAAgB;AAiClB,MAAM,eAAgD,KAAsB;AAAA;AAAA;AAAA;AAAA,EAIjF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,SAAS,aAAa;AAAA,IAC7B,YAAY;AAAA,MACV;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,YAAY;AAAA,MACZ,cAAc;AAAA,IAChB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,YAAyB,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAKxC,WAAW;AAAA;AAAA;AAAA;AAAA,EAKX,YAAY;AAAA;AAAA;AAAA;AAAA,EAKZ,IAAI,EAAE,OAAe;AACnB,SAAK,MAAM,MAAM,MAAM,YAAY,cAAc,KAAK;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,YAAsB;AACxB,WAAO,MAAM,KAAK,OAAO,SAAS;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,WAAO,UAAU,IAAI,IAAI;AACzB,SAAK,gBAAgB;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,gBAAgB;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,WAAO,UAAU,OAAO,IAAI;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS,OAAO;AACd,QAAI,CAAC,KAAK,YAAY,MAAM,MAAM,MAAM,KAAK,GAAG;AAC9C;AAAA,IACF;AAEA,QACG,MAAM,UAAU,MAAM,UAAU,KAAK,SAAS,gBAC9C,MAAM,UAAU,MAAM,QAAQ,KAAK,SAAS,YAC7C;AACA,WAAK,KAAK;AAAA,IACZ,OAAO;AACL,WAAK,KAAK;AAAA,IACZ;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,sBAAsB,EAAE,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE,GAA4C;AAClF,SAAK,WAAW,MAAM,kBAAkB,MAAM,mBAAmB,IAAI;AACrE,SAAK,YAAY;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,QAAI,CAAC,KAAK,WAAW;AACnB;AAAA,IACF;AAEA,SAAK,YAAY;AACjB,SAAK,IAAI,UAAU,IAAI,qBAAqB;AAE5C,SAAK,UAAU,QAAQ,CAAC,UAAU,UAAU,SAAS,YAAY,KAAK,CAAC;AAAA,EACzE;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,QAAI,KAAK,WAAW;AAClB;AAAA,IACF;AAEA,SAAK,YAAY;AACjB,SAAK,IAAI,UAAU,OAAO,qBAAqB;AAC/C,SAAK,UAAU,QAAQ,CAAC,UAAU,UAAU,SAAS,YAAY,KAAK,CAAC;AAAA,EACzE;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AAChB,UAAM,EAAE,UAAU,IAAI;AACtB,UAAM,QAAQ,UAAU,QAAQ,IAAI;AACpC,UAAM,SAAS,UACZ,MAAM,GAAG,KAAK,EACd;AAAA;AAAA,MAEC,CAAC,aAAa,KAAK,uBAAuB,SAAS,GAAG,EAAE,SAAS,KAAK,GAAG;AAAA,IAC3E,EACC,OAAO,CAAC,KAAK,aAAa,MAAM,SAAS,IAAI,cAAc,CAAC;AAE/D,SAAK,MAAM,YAAY,MAAM,SAAS,GAAG,SAAS,CAAC;AACnD,SAAK,IAAI,MAAM,MAAM,GAAG,MAAM;AAC9B,SAAK,IAAI,MAAM,SAAS,OAAO,KAAK,SAAS,SAAS,KAAK;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,OAAgB;AAC1B,QAAI,CAAC,KAAK,UAAU;AAClB,WAAK,IAAI;AACT;AAAA,IACF;AAEA,UAAM,EAAE,UAAU,IAAI;AAGtB,YAAQ,SAAS,UAAU,QAAQ,IAAI;AAEvC,SAAK,IAAI,UACN,MAAM,GAAG,KAAK,EACd,OAAO,CAAC,aAAa,SAAS,YAAY,CAAC,SAAS,SAAS,EAC7D;AAAA,MACC,CAAC,GAAW,aAAa,IAAI,SAAS,MAAM,MAAM;AAAA,MAClD,KAAK,YAAY,IAAI,KAAK,MAAM,MAAM,eAAe;AAAA,IACvD;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,uBAAuB,SAAsB;AAC3C,QAAI,SAAS,QAAQ;AAErB,WAAO,iBAAiB,MAAM,EAAE,aAAa,cAAc,OAAO,eAAe;AAC/E,eAAS,OAAO;AAAA,IAClB;AAEA,WAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/molecules/Tabs/Tabs.d.ts

@@ -33,7 +33,10 @@ export declare class Tabs<T extends BaseProps = BaseProps> extends Base<T & Tabs
     /**
      * Switch tab on button click.
      */
-    onBtnClick(event: MouseEvent, index: number): void;
+    onBtnClick({ event, index }: {
+        event: MouseEvent;
+        index: number;
+    }): void;
     /**
      * Enable the given tab and its associated content.
      */

package/molecules/Tabs/Tabs.js

@@ -48,7 +48,7 @@ class Tabs extends Base {
   /**
    * Switch tab on button click.
    */
-  onBtnClick(event, index) {
+  onBtnClick({ event, index }) {
     this.items.forEach((item, i) => {
       if (i !== index) {
         this.disableItem(item);

package/molecules/Tabs/Tabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Tabs/Tabs.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition } from '@studiometa/js-toolkit/utils';\n\ntype TabItem = {\n  btn: HTMLElement;\n  content: HTMLElement;\n  isEnabled: boolean;\n};\n\ntype TabsStates = Partial<\n  Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype TabsStylesOption = Partial<Record<keyof TabsProps['$refs'], TabsStates>>;\n\nexport interface TabsProps extends BaseProps {\n  $options: {\n    styles: TabsStylesOption;\n  };\n  $refs: {\n    btn: HTMLElement[];\n    content: HTMLElement[];\n  };\n}\n\n/**\n * Tabs class.\n */\nexport class Tabs<T extends BaseProps = BaseProps> extends Base<T & TabsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Tabs',\n    refs: ['btn[]', 'content[]'],\n    emits: ['enable', 'disable'],\n    options: {\n      styles: {\n        type: Object,\n        default: (): TabsStylesOption => ({\n          content: {\n            closed: {\n              position: 'absolute',\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n        merge: true,\n      },\n    },\n  };\n\n  items: TabItem[];\n\n  /**\n   * Initialize the component's behaviours.\n   * @returns {void}\n   */\n  mounted() {\n    this.items = this.$refs.btn.map((btn, index) => {\n      const id = `${this.$id}-${index}`;\n      const content = this.$refs.content[index];\n      btn.setAttribute('id', id);\n      content.setAttribute('aria-labelledby', id);\n\n      const item = { btn, content, isEnabled: index > 0 };\n      if (index > 0) {\n        this.disableItem(item);\n      } else {\n        this.enableItem(item);\n      }\n      return item;\n    });\n  }\n\n  /**\n   * Switch tab on button click.\n   */\n  onBtnClick(event: MouseEvent, index: number) {\n    this.items.forEach((item, i) => {\n      if (i !== index) {\n        this.disableItem(item);\n      }\n    });\n\n    this.enableItem(this.items[index]);\n  }\n\n  /**\n   * Enable the given tab and its associated content.\n   */\n  async enableItem(item: TabItem): Promise<this> {\n    if (!item || item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = true;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'false');\n    this.$emit('enable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.closed,\n          active: btnStyles.active,\n          to: btnStyles.open,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.closed,\n          active: contentStyles.active,\n          to: contentStyles.open,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n\n  /**\n   * Disable the given tab and its associated content.\n   */\n  async disableItem(item: TabItem): Promise<this> {\n    if (!item || !item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = false;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'true');\n    this.$emit('disable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.open,\n          active: btnStyles.active,\n          to: btnStyles.closed,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.open,\n          active: contentStyles.active,\n          to: contentStyles.closed,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition } from '@studiometa/js-toolkit/utils';\n\ntype TabItem = {\n  btn: HTMLElement;\n  content: HTMLElement;\n  isEnabled: boolean;\n};\n\ntype TabsStates = Partial<\n  Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype TabsStylesOption = Partial<Record<keyof TabsProps['$refs'], TabsStates>>;\n\nexport interface TabsProps extends BaseProps {\n  $options: {\n    styles: TabsStylesOption;\n  };\n  $refs: {\n    btn: HTMLElement[];\n    content: HTMLElement[];\n  };\n}\n\n/**\n * Tabs class.\n */\nexport class Tabs<T extends BaseProps = BaseProps> extends Base<T & TabsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Tabs',\n    refs: ['btn[]', 'content[]'],\n    emits: ['enable', 'disable'],\n    options: {\n      styles: {\n        type: Object,\n        default: (): TabsStylesOption => ({\n          content: {\n            closed: {\n              position: 'absolute',\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n        merge: true,\n      },\n    },\n  };\n\n  items: TabItem[];\n\n  /**\n   * Initialize the component's behaviours.\n   * @returns {void}\n   */\n  mounted() {\n    this.items = this.$refs.btn.map((btn, index) => {\n      const id = `${this.$id}-${index}`;\n      const content = this.$refs.content[index];\n      btn.setAttribute('id', id);\n      content.setAttribute('aria-labelledby', id);\n\n      const item = { btn, content, isEnabled: index > 0 };\n      if (index > 0) {\n        this.disableItem(item);\n      } else {\n        this.enableItem(item);\n      }\n      return item;\n    });\n  }\n\n  /**\n   * Switch tab on button click.\n   */\n  onBtnClick({ event, index }: { event: MouseEvent, index: number }) {\n    this.items.forEach((item, i) => {\n      if (i !== index) {\n        this.disableItem(item);\n      }\n    });\n\n    this.enableItem(this.items[index]);\n  }\n\n  /**\n   * Enable the given tab and its associated content.\n   */\n  async enableItem(item: TabItem): Promise<this> {\n    if (!item || item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = true;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'false');\n    this.$emit('enable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.closed,\n          active: btnStyles.active,\n          to: btnStyles.open,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.closed,\n          active: contentStyles.active,\n          to: contentStyles.open,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n\n  /**\n   * Disable the given tab and its associated content.\n   */\n  async disableItem(item: TabItem): Promise<this> {\n    if (!item || !item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = false;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'true');\n    this.$emit('disable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.open,\n          active: btnStyles.active,\n          to: btnStyles.closed,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.open,\n          active: contentStyles.active,\n          to: contentStyles.closed,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/molecules/index.d.ts

@@ -1,8 +1,7 @@
-export * from './Accordion/Accordion.js';
-export * from './Accordion/AccordionItem.js';
+export * from './Accordion/index.js';
 export * from './Menu/index.js';
 export * from './Slider/index.js';
-export * from './Sticky/Sticky.js';
+export * from './Sticky/index.js';
 export * from './AnchorNav/index.js';
 export * from './TableOfContent/index.js';
 export * from './Tabs/index.js';

package/molecules/index.js

@@ -1,8 +1,7 @@
-export * from "./Accordion/Accordion.js";
-export * from "./Accordion/AccordionItem.js";
+export * from "./Accordion/index.js";
 export * from "./Menu/index.js";
 export * from "./Slider/index.js";
-export * from "./Sticky/Sticky.js";
+export * from "./Sticky/index.js";
 export * from "./AnchorNav/index.js";
 export * from "./TableOfContent/index.js";
 export * from "./Tabs/index.js";

package/molecules/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/molecules/index.ts"],
-  "sourcesContent": ["export * from './Accordion/Accordion.js';\nexport * from './Accordion/AccordionItem.js';\nexport * from './Menu/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/Sticky.js';\nexport * from './AnchorNav/index.js';\nexport * from './TableOfContent/index.js';\nexport * from './Tabs/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './Accordion/index.js';\nexport * from './Menu/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/index.js';\nexport * from './AnchorNav/index.js';\nexport * from './TableOfContent/index.js';\nexport * from './Tabs/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/organisms/Frame/Frame.d.ts

@@ -37,15 +37,23 @@ export declare class Frame<T extends BaseProps = BaseProps> extends Base<T & Fra
     /**
      * Go to the previous URL on `popstate` event.
      */
-    onWindowPopstate(event: PopStateEvent): void;
+    onWindowPopstate({ event }: {
+        event: PopStateEvent;
+    }): void;
     /**
      * Prevent click on `FrameAnchor`.
      */
-    onFrameAnchorClick(index: number, event: MouseEvent): void;
+    onFrameAnchorClick({ target, event }: {
+        event: MouseEvent;
+        target: FrameAnchor;
+    }): void;
     /**
      * Prevent submit on forms.
      */
-    onFrameFormSubmit(index: number, event: SubmitEvent): void;
+    onFrameFormSubmit({ event, target }: {
+        event: SubmitEvent;
+        target: FrameForm;
+    }): void;
     /**
      * Parge an HTML string into a DOM object.
      */

package/organisms/Frame/Frame.js

@@ -67,41 +67,39 @@ class Frame extends Base {
   /**
    * Go to the previous URL on `popstate` event.
    */
-  onWindowPopstate(event) {
+  onWindowPopstate({ event }) {
     this.goTo(window.location.href, null, event.state);
   }
   /**
    * Prevent click on `FrameAnchor`.
    */
-  onFrameAnchorClick(index, event) {
-    if (!isDirectChild(this, "Frame", "FrameAnchor", this.$children.FrameAnchor[index])) {
+  onFrameAnchorClick({ target, event }) {
+    if (!isDirectChild(this, "Frame", "FrameAnchor", target)) {
       return;
     }
-    this.$log("onAFrameClick", index, event);
+    this.$log("onAFrameClick", target, event);
     event.preventDefault();
-    const anchor = this.$children.FrameAnchor[index];
-    if (anchor.href === window.location.href) {
+    if (target.href === window.location.href) {
       return;
     }
-    this.goTo(anchor.href);
+    this.goTo(target.href);
   }
   /**
    * Prevent submit on forms.
    */
-  onFrameFormSubmit(index, event) {
-    if (!isDirectChild(this, "Frame", "FrameForm", this.$children.FrameForm[index])) {
+  onFrameFormSubmit({ event, target }) {
+    if (!isDirectChild(this, "Frame", "FrameForm", target)) {
       return;
     }
-    this.$log("onFrameFormFrameSubmit", index, event);
+    this.$log("onFrameFormFrameSubmit", target, event);
     event.preventDefault();
-    const form = this.$children.FrameForm[index];
-    const url = new URL(form.action);
-    if (form.$el.method === "get") {
-      url.search = new URLSearchParams(new FormData(form.$el)).toString();
+    const url = new URL(target.action);
+    if (target.$el.method === "get") {
+      url.search = new URLSearchParams(new FormData(target.$el)).toString();
       this.goTo(url.toString());
     }
-    if (form.$el.method === "post") {
-      this.goTo(url.toString(), new FormData(form.$el));
+    if (target.$el.method === "post") {
+      this.goTo(url.toString(), new FormData(target.$el));
     }
   }
   /**

package/organisms/Frame/Frame.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/organisms/Frame/Frame.ts"],
-  "sourcesContent": ["import { Base, isDirectChild, getDirectChildren } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { nextFrame, historyPush } from '@studiometa/js-toolkit/utils';\nimport { FrameAnchor } from './FrameAnchor.js';\nimport { FrameForm } from './FrameForm.js';\nimport { FrameTarget } from './FrameTarget.js';\n\n/**\n * Get the scroll position.\n */\nfunction getScrollPosition() {\n  return {\n    left: window.pageXOffset,\n    top: window.pageYOffset,\n  };\n}\n\n/**\n * The fetch cache.\n */\nconst cache: Map<\n  string,\n  { promise: Promise<string>; status: 'pending' | 'resolved' | 'error'; content: string }\n> = new Map();\n\nexport interface FrameProps extends BaseProps {\n  $children: {\n    FrameAnchor: FrameAnchor[];\n    FrameForm: FrameForm[];\n    FrameTarget: FrameTarget[];\n    // eslint-disable-next-line no-use-before-define\n    Frame: Frame[];\n  };\n  $options: {\n    history: boolean;\n  };\n}\n\n/**\n * Class.\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: [\n      'before-fetch',\n      'after-fetch',\n      'before-leave',\n      'after-leave',\n      'before-content',\n      'after-content',\n      'before-enter',\n      'after-enter',\n    ],\n    components: {\n      FrameAnchor,\n      FrameForm,\n      FrameTarget,\n      Frame,\n    },\n    options: {\n      history: Boolean,\n    },\n  };\n\n  /**\n   * Get uniq id.\n   */\n  get id() {\n    return this.$el.id;\n  }\n\n  /**\n   * Get direct `FrameTarget` children.\n   */\n  get directChildrenFrameTarget(): FrameTarget[] {\n    return getDirectChildren(this, 'Frame', 'FrameTarget');\n  }\n\n  /**\n   * Prevent scroll top on unload.\n   */\n  onWindowUnload() {\n    const { history } = window;\n\n    if (!history.state) {\n      return;\n    }\n\n    history.replaceState(\n      {\n        ...history.state,\n        scroll: getScrollPosition(),\n      },\n      '',\n    );\n  }\n\n  /**\n   * Go to the previous URL on `popstate` event.\n   */\n  onWindowPopstate(event: PopStateEvent) {\n    this.goTo(window.location.href, null, event.state);\n  }\n\n  /**\n   * Prevent click on `FrameAnchor`.\n   */\n  onFrameAnchorClick(index: number, event: MouseEvent) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameAnchor', this.$children.FrameAnchor[index])) {\n      return;\n    }\n\n    this.$log('onAFrameClick', index, event);\n    event.preventDefault();\n    const anchor = this.$children.FrameAnchor[index];\n\n    // Do nothing when clicking links on the same page\n    // @todo handle hash change\n    if (anchor.href === window.location.href) {\n      return;\n    }\n\n    this.goTo(anchor.href);\n  }\n\n  /**\n   * Prevent submit on forms.\n   */\n  onFrameFormSubmit(index: number, event: SubmitEvent) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameForm', this.$children.FrameForm[index])) {\n      return;\n    }\n\n    this.$log('onFrameFormFrameSubmit', index, event);\n    event.preventDefault();\n    const form = this.$children.FrameForm[index];\n    const url = new URL(form.action);\n\n    if (form.$el.method === 'get') {\n      // @ts-ignore\n      url.search = new URLSearchParams(new FormData(form.$el)).toString();\n      this.goTo(url.toString());\n    }\n\n    if (form.$el.method === 'post') {\n      this.goTo(url.toString(), new FormData(form.$el));\n    }\n  }\n\n  /**\n   * Parge an HTML string into a DOM object.\n   */\n  parseHTML(string = '') {\n    return new DOMParser().parseFromString(string, 'text/html');\n  }\n\n  /**\n   * Go to the given url.\n   */\n  async goTo(url: string, formData: FormData = null, scroll: { top: number; left: number } = null) {\n    this.$log('goTo', url);\n    const parsedUrl = new URL(url);\n\n    if (parsedUrl.origin !== window.location.origin) {\n      throw new Error('Cross origin request are not allowed.');\n    }\n\n    this.$emit('before-fetch', url);\n\n    // @todo add option to use content as is or to parse it and extract the new frame\n    const content = await this.fetch(url, formData);\n    const doc = this.parseHTML(content);\n    const el = doc.querySelector(`#${this.id}`);\n    // @todo manage el === null\n    const newFrame = new Frame(el as HTMLElement);\n    newFrame.$children.registerAll();\n\n    this.$emit('after-fetch', url, content);\n\n    this.$emit('before-leave');\n    // Leave all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));\n\n    this.$emit('after-leave');\n    this.$emit('before-content');\n\n    // Update content\n    // @todo insert non existing FrameTarget as well\n    this.directChildrenFrameTarget.map((target, index) =>\n      target.updateContent(newFrame.directChildrenFrameTarget[index]),\n    );\n\n    // Push history\n    if (this.$options.history && formData === null) {\n      document.title = doc.title;\n      historyPush({ path: parsedUrl.pathname, search: parsedUrl.searchParams });\n    }\n\n    if (scroll) {\n      document.scrollingElement.scrollTop = scroll.top;\n      document.scrollingElement.scrollLeft = scroll.left;\n    }\n\n    // Update components\n    await nextFrame();\n    this.$root.$update();\n    await nextFrame();\n\n    this.$emit('after-content');\n    this.$emit('before-enter');\n\n    // Enter all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.enter()));\n\n    this.$emit('after-enter');\n  }\n\n  /**\n   * Fetch the given url.\n   */\n  async fetch(url: string, formData: FormData = null): Promise<string> {\n    // @note skip cache for POST requests.\n    if (formData) {\n      const promise = fetch(url, {\n        method: 'post',\n        body: formData,\n      }).then((response) => response.text());\n\n      const content = await promise;\n      return content;\n    }\n\n    const cached = cache.get(url);\n\n    if (cached) {\n      if (cached.status === 'pending') {\n        return cached.promise;\n      }\n\n      return cached.content;\n    }\n\n    const promise = fetch(url).then((response) => response.text());\n\n    try {\n      cache.set(url, {\n        promise,\n        status: 'pending',\n        content: undefined,\n      });\n\n      const content = await promise;\n\n      cache.set(url, {\n        promise,\n        status: 'resolved',\n        content,\n      });\n\n      return content;\n    } catch (err) {\n      cache.set(url, {\n        promise,\n        status: 'error',\n        content: err,\n      });\n\n      return err;\n    }\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Base, isDirectChild, getDirectChildren } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { nextFrame, historyPush } from '@studiometa/js-toolkit/utils';\nimport { FrameAnchor } from './FrameAnchor.js';\nimport { FrameForm } from './FrameForm.js';\nimport { FrameTarget } from './FrameTarget.js';\n\n/**\n * Get the scroll position.\n */\nfunction getScrollPosition() {\n  return {\n    left: window.pageXOffset,\n    top: window.pageYOffset,\n  };\n}\n\n/**\n * The fetch cache.\n */\nconst cache: Map<\n  string,\n  { promise: Promise<string>; status: 'pending' | 'resolved' | 'error'; content: string }\n> = new Map();\n\nexport interface FrameProps extends BaseProps {\n  $children: {\n    FrameAnchor: FrameAnchor[];\n    FrameForm: FrameForm[];\n    FrameTarget: FrameTarget[];\n    // eslint-disable-next-line no-use-before-define\n    Frame: Frame[];\n  };\n  $options: {\n    history: boolean;\n  };\n}\n\n/**\n * Class.\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: [\n      'before-fetch',\n      'after-fetch',\n      'before-leave',\n      'after-leave',\n      'before-content',\n      'after-content',\n      'before-enter',\n      'after-enter',\n    ],\n    components: {\n      FrameAnchor,\n      FrameForm,\n      FrameTarget,\n      Frame,\n    },\n    options: {\n      history: Boolean,\n    },\n  };\n\n  /**\n   * Get uniq id.\n   */\n  get id() {\n    return this.$el.id;\n  }\n\n  /**\n   * Get direct `FrameTarget` children.\n   */\n  get directChildrenFrameTarget(): FrameTarget[] {\n    return getDirectChildren(this, 'Frame', 'FrameTarget');\n  }\n\n  /**\n   * Prevent scroll top on unload.\n   */\n  onWindowUnload() {\n    const { history } = window;\n\n    if (!history.state) {\n      return;\n    }\n\n    history.replaceState(\n      {\n        ...history.state,\n        scroll: getScrollPosition(),\n      },\n      '',\n    );\n  }\n\n  /**\n   * Go to the previous URL on `popstate` event.\n   */\n  onWindowPopstate({ event }: { event: PopStateEvent }) {\n    this.goTo(window.location.href, null, event.state);\n  }\n\n  /**\n   * Prevent click on `FrameAnchor`.\n   */\n  onFrameAnchorClick({ target, event }: { event: MouseEvent, target: FrameAnchor }) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameAnchor', target)) {\n      return;\n    }\n\n    this.$log('onAFrameClick', target, event);\n    event.preventDefault();\n\n    // Do nothing when clicking links on the same page\n    // @todo handle hash change\n    if (target.href === window.location.href) {\n      return;\n    }\n\n    this.goTo(target.href);\n  }\n\n  /**\n   * Prevent submit on forms.\n   */\n  onFrameFormSubmit({ event, target }: { event: SubmitEvent, target: FrameForm }) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameForm', target)) {\n      return;\n    }\n\n    this.$log('onFrameFormFrameSubmit', target, event);\n    event.preventDefault();\n    const url = new URL(target.action);\n\n    if (target.$el.method === 'get') {\n      // @ts-ignore\n      url.search = new URLSearchParams(new FormData(target.$el)).toString();\n      this.goTo(url.toString());\n    }\n\n    if (target.$el.method === 'post') {\n      this.goTo(url.toString(), new FormData(target.$el));\n    }\n  }\n\n  /**\n   * Parge an HTML string into a DOM object.\n   */\n  parseHTML(string = '') {\n    return new DOMParser().parseFromString(string, 'text/html');\n  }\n\n  /**\n   * Go to the given url.\n   */\n  async goTo(url: string, formData: FormData = null, scroll: { top: number; left: number } = null) {\n    this.$log('goTo', url);\n    const parsedUrl = new URL(url);\n\n    if (parsedUrl.origin !== window.location.origin) {\n      throw new Error('Cross origin request are not allowed.');\n    }\n\n    this.$emit('before-fetch', url);\n\n    // @todo add option to use content as is or to parse it and extract the new frame\n    const content = await this.fetch(url, formData);\n    const doc = this.parseHTML(content);\n    const el = doc.querySelector(`#${this.id}`);\n    // @todo manage el === null\n    const newFrame = new Frame(el as HTMLElement);\n    newFrame.$children.registerAll();\n\n    this.$emit('after-fetch', url, content);\n\n    this.$emit('before-leave');\n    // Leave all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));\n\n    this.$emit('after-leave');\n    this.$emit('before-content');\n\n    // Update content\n    // @todo insert non existing FrameTarget as well\n    this.directChildrenFrameTarget.map((target, index) =>\n      target.updateContent(newFrame.directChildrenFrameTarget[index]),\n    );\n\n    // Push history\n    if (this.$options.history && formData === null) {\n      document.title = doc.title;\n      historyPush({ path: parsedUrl.pathname, search: parsedUrl.searchParams });\n    }\n\n    if (scroll) {\n      document.scrollingElement.scrollTop = scroll.top;\n      document.scrollingElement.scrollLeft = scroll.left;\n    }\n\n    // Update components\n    await nextFrame();\n    this.$root.$update();\n    await nextFrame();\n\n    this.$emit('after-content');\n    this.$emit('before-enter');\n\n    // Enter all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.enter()));\n\n    this.$emit('after-enter');\n  }\n\n  /**\n   * Fetch the given url.\n   */\n  async fetch(url: string, formData: FormData = null): Promise<string> {\n    // @note skip cache for POST requests.\n    if (formData) {\n      const promise = fetch(url, {\n        method: 'post',\n        body: formData,\n      }).then((response) => response.text());\n\n      const content = await promise;\n      return content;\n    }\n\n    const cached = cache.get(url);\n\n    if (cached) {\n      if (cached.status === 'pending') {\n        return cached.promise;\n      }\n\n      return cached.content;\n    }\n\n    const promise = fetch(url).then((response) => response.text());\n\n    try {\n      cache.set(url, {\n        promise,\n        status: 'pending',\n        content: undefined,\n      });\n\n      const content = await promise;\n\n      cache.set(url, {\n        promise,\n        status: 'resolved',\n        content,\n      });\n\n      return content;\n    } catch (err) {\n      cache.set(url, {\n        promise,\n        status: 'error',\n        content: err,\n      });\n\n      return err;\n    }\n  }\n}\n"],
+  "mappings": "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",
   "names": ["promise"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/studiometa/ui#readme",
   "dependencies": {
-    "@studiometa/js-toolkit": "^3.0.0-alpha.5",
+    "@studiometa/js-toolkit": "^3.0.0-alpha.6",
     "deepmerge": "^4.3.1"
   }
 }