@studiometa/ui 0.2.4 → 0.2.7

package/atoms/index.cjs

@@ -25,15 +25,15 @@ var atoms_exports = {};
 __export(atoms_exports, {
   AnchorScrollTo: () => import_AnchorScrollTo.default,
   Cursor: () => import_Cursor.default,
-  Figure: () => import_Figure.default,
   LargeText: () => import_LargeText.default,
   LazyInclude: () => import_LazyInclude.default
 });
 module.exports = __toCommonJS(atoms_exports);
+__reExport(atoms_exports, require("./Figure/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./Prefetch/index.cjs"), module.exports);
+__reExport(atoms_exports, require("./ScrollAnimation/index.cjs"), module.exports);
 var import_AnchorScrollTo = __toESM(require("./AnchorScrollTo/AnchorScrollTo.cjs"), 1);
 var import_Cursor = __toESM(require("./Cursor/Cursor.cjs"), 1);
-var import_Figure = __toESM(require("./Figure/Figure.cjs"), 1);
 var import_LargeText = __toESM(require("./LargeText/LargeText.cjs"), 1);
 var import_LazyInclude = __toESM(require("./LazyInclude/LazyInclude.cjs"), 1);
 if (module.exports.default) module.exports = module.exports.default;

package/atoms/index.d.ts

@@ -1,6 +1,7 @@
+export * from "./Figure/index.js";
 export * from "./Prefetch/index.js";
+export * from "./ScrollAnimation/index.js";
 export { default as AnchorScrollTo } from "./AnchorScrollTo/AnchorScrollTo.js";
 export { default as Cursor } from "./Cursor/Cursor.js";
-export { default as Figure } from "./Figure/Figure.js";
 export { default as LargeText } from "./LargeText/LargeText.js";
 export { default as LazyInclude } from "./LazyInclude/LazyInclude.js";

package/atoms/index.js

@@ -1 +1 @@
-export*from"./Prefetch/index.js";import{default as a}from"./AnchorScrollTo/AnchorScrollTo.js";import{default as f}from"./Cursor/Cursor.js";import{default as u}from"./Figure/Figure.js";import{default as d}from"./LargeText/LargeText.js";import{default as p}from"./LazyInclude/LazyInclude.js";export{a as AnchorScrollTo,f as Cursor,u as Figure,d as LargeText,p as LazyInclude};
+export*from"./Figure/index.js";export*from"./Prefetch/index.js";export*from"./ScrollAnimation/index.js";import{default as a}from"./AnchorScrollTo/AnchorScrollTo.js";import{default as l}from"./Cursor/Cursor.js";import{default as p}from"./LargeText/LargeText.js";import{default as d}from"./LazyInclude/LazyInclude.js";export{a as AnchorScrollTo,l as Cursor,p as LargeText,d as LazyInclude};

package/index.cjs

@@ -19,4 +19,5 @@ module.exports = __toCommonJS(ui_exports);
 __reExport(ui_exports, require("./primitives/index.cjs"), module.exports);
 __reExport(ui_exports, require("./atoms/index.cjs"), module.exports);
 __reExport(ui_exports, require("./molecules/index.cjs"), module.exports);
+__reExport(ui_exports, require("./organisms/index.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;

package/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./primitives/index.js";
 export * from "./atoms/index.js";
 export * from "./molecules/index.js";
+export * from "./organisms/index.js";

package/index.js

@@ -1 +1 @@
-export*from"./primitives/index.js";export*from"./atoms/index.js";export*from"./molecules/index.js";
+export*from"./primitives/index.js";export*from"./atoms/index.js";export*from"./molecules/index.js";export*from"./organisms/index.js";

package/molecules/Accordion/Accordion.twig

@@ -0,0 +1,54 @@
+{#
+/**
+ * @file
+ * Accordion component.
+ *
+ * @param array<{ title: string, content: unknown, attr: array }> $items
+ *   The items of the accordion.
+ * @param array $attr
+ *   Use it to customize the root element attributes.
+ * @param array $item_attr
+ *   Use it to customize each item element attributes.
+ * @param array $item_container_attr
+ *   Use it to customize each item container element attributes.
+ *
+ * @block $title
+ *   Use it to customize each item's title.
+ * @block $content
+ *   Use it to customize each item's content.
+ */
+#}
+
+{% set attributes = merge_html_attributes(attr ?? null, { data_component: 'Accordion' }) %}
+
+<div {{ html_attributes(attributes) }}>
+  {% for item in items %}
+    {% set item_attributes = merge_html_attributes(item_attr ?? null, { data_component: 'AccordionItem' }, item.attr ?? null) %}
+    {% set is_open = item_attributes.data_option_is_open ?? false %}
+    <div {{ html_attributes(item_attributes) }}>
+      <button data-ref="btn" class="block w-full" aria-expanded="{{ is_open ? 'true' : 'false' }}">
+        {% block title %}
+          {{ item.title }}
+        {% endblock %}
+      </button>
+      {% set item_container_attributes =
+        merge_html_attributes(
+          item_container_attr ?? null,
+          {},
+          {
+            data_ref: 'container',
+            style: { visibility: is_open ? '' : 'hidden', height: is_open ? '' : '0' },
+            class: 'relative overflow-hidden'
+          }
+        )
+      %}
+      <div {{ html_attributes(item_container_attributes) }}>
+        <div data-ref="content" aria-hidden="true">
+          {% block content %}
+            {{ item.content }}
+          {% endblock %}
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+</div>

package/molecules/Modal/Modal.twig

@@ -0,0 +1,108 @@
+{#
+/**
+ * @file
+ * Modal component.
+ *
+ * @param array $attr
+ *   Use it to customize the root element attributes.
+ * @param array $modal_attr
+ *   Use it to customize the modal element attributes.
+ * @param array $overlay_attr
+ *   Use it to customize the overlay element attributes.
+ * @param array $wrapper_attr
+ *   Use it to customize the wrapper element attributes.
+ * @param array $container_atrr
+ *   Use it to customize the container element attributes.
+ * @param array $content_atrr
+ *   Use it to customize the content element attributes.
+ *
+ * @block $open
+ *   Use this block to customize the open trigger button.
+ * @block $close
+ *   Use this block to customize the close trigger button.
+ * @block $content
+ *   Use this block to set the modal's content.
+ */
+#}
+
+{# Root attributes #}
+{% set attributes = merge_html_attributes(attr ?? null, { data_component: 'Modal' }) %}
+
+{# Modal attributes #}
+{% set modal_attributes =
+  merge_html_attributes(
+    modal_attr ?? null,
+    { class: 'z-goku fixed inset-0' },
+    {
+      data_ref: 'modal',
+      role: 'dialog',
+      aria_modal: true,
+      aria_hidden: true,
+      style: { opacity: '0', pointer_events: 'none', visibility: 'hidden' }
+    }
+  )
+%}
+
+{# Overlay attributes #}
+{% set overlay_attributes =
+  merge_html_attributes(
+    overlay_attr ?? null,
+    { class: 'z-under absolute inset-0 bg-black bg-opacity-75' },
+    { data_ref: 'overlay', tabindex: '-1' }
+  )
+%}
+
+{% set wrapper_attributes =
+  merge_html_attributes(
+    wrapper_attr ?? null,
+    { class: 'absolute inset-0 flex items-center justify-center' },
+    { class: 'pointer-events-none' }
+  )
+%}
+
+{# Container attributes #}
+{% set container_attributes =
+  merge_html_attributes(
+    container_attr ?? null,
+    { class: 'bg-white rounded shadow-l' },
+    {
+      data_ref: 'container',
+      class: 'z-above relative max-h-full overflow-x-hidden overflow-y-auto pointer-events-auto'
+    }
+  )
+%}
+
+{# Content attributes #}
+{% set content_attributes =
+  merge_html_attributes(
+    content_attr ?? null,
+    { class: 'max-w-3xl p-16 pt-20' },
+    { data_ref: 'content' }
+  )
+%}
+
+<div {{ html_attributes(attributes) }}>
+  {% block open %}
+    {% include '@ui/atoms/Button/Button.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+  {% endblock %}
+  <div {{ html_attributes(modal_attributes) }}>
+    <div {{ html_attributes(overlay_attributes) }}></div>
+    <div {{ html_attributes(wrapper_attributes) }}>
+      <div {{ html_attributes(container_attributes) }}>
+        {% block close %}
+          <div class="absolute top-0 right-0 m-2">
+            {% include '@ui/atoms/Button/Button.twig' with {
+              label: 'Close',
+              attr: { data_ref: 'close' }
+            } %}
+          </div>
+        {% endblock %}
+        <div {{ html_attributes(content_attributes) }}>
+          {% block content %}
+            No content.
+          {% endblock %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/molecules/Modal/StyledModal.twig

@@ -0,0 +1,39 @@
+{#
+/**
+ * @file
+ * Modal component.
+ *
+ * @param array $attr
+ *   Use it to customize the root element attributes.
+ * @param array $modal_attr
+ *   Use it to customize the modal element attributes.
+ * @param array $overlay_attr
+ *   Use it to customize the overlay element attributes.
+ * @param array $container_atrr
+ *   Use it to customize the container element attributes.
+ * @param array $content_atrr
+ *   Use it to customize the content element attributes.
+ *
+ * @block $open
+ *   Use this block to customize the open trigger button.
+ * @block $close
+ *   Use this block to customize the close trigger button.
+ * @block $content
+ *   Use this block to set the modal's content.
+ */
+#}
+
+{% extends '@ui/molecules/Modal/Modal.twig' %}
+
+{% block open %}
+  {% include '@ui/atoms/Button/StyledButton.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+{% endblock %}
+
+{% block close %}
+  <div class="absolute top-0 right-0 m-2">
+    {% include '@ui/atoms/Button/StyledButton.twig' with {
+      label: 'Close',
+      attr: { data_ref: 'close' }
+    } %}
+  </div>
+{% endblock %}

package/molecules/Panel/Panel.twig

@@ -0,0 +1,73 @@
+{#
+/**
+ * @file
+ *   Panel component.
+ *
+ * @param 'top'|'right'|'bottom'|'left' $position
+ *   Position of the panel.
+ * @param array $wrapper_attr
+ *   Custom attributes for the wrapper element.
+ */
+#}
+
+{% extends '@ui/molecules/Modal/Modal.twig' %}
+
+{% set position = position ?? 'left' %}
+
+{% set attr =
+  merge_html_attributes(attr ?? null, { data_component: 'Panel', data_option_position: position })
+%}
+
+{% set overlay_attr =
+  merge_html_attributes(
+    overlay_attr ?? null,
+    { class: 'z-under absolute inset-0 bg-black bg-opacity-75' },
+    { class: 'transition duration-500 opacity-0' }
+  )
+%}
+
+{% set wrapper_attr =
+  merge_html_attributes(
+    wrapper_attr ?? null,
+    {},
+    {
+      class: [
+        'z-above absolute top-0 w-full h-full flex pointer-events-none',
+        {
+          'top-0 left-0 items-start justify-center': position == 'top',
+          'top-0 right-0 items-center justify-end': position == 'right',
+          'bottom-0 left-0 items-end justify-center': position == 'bottom',
+          'top-0 left-0 items-center justify-start': position == 'left'
+        }
+      ]
+    }
+  )
+%}
+
+{% set container_attr =
+  merge_html_attributes(
+    container_attr ?? null,
+    {
+      class: [
+        'max-w-2xl',
+        {
+          'w-full': position == 'top',
+          'h-full': position == 'right',
+          'w-full': position == 'bottom',
+          'h-full': position == 'left'
+        }
+      ]
+    },
+    {
+      class: [
+        'transform transition duration-500',
+        {
+          '-translate-y-full': position == 'top',
+          'translate-x-full': position == 'right',
+          'translate-y-full': position == 'bottom',
+          '-translate-x-full': position == 'left'
+        }
+      ]
+    }
+  )
+%}

package/molecules/Panel/StyledPanel.twig

@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ *   Panel component.
+ *
+ * @param 'left'|'right' $position
+ *   Position of the panel.
+ * @param array $wrapper_attr
+ *   Custom attributes for the wrapper element.
+ */
+#}
+
+{% extends '@ui/molecules/Panel/Panel.twig' %}
+
+{% set container_attr = merge_html_attributes(container_attr ?? null, required={ class: 'bg-white' }) %}
+
+{% block open %}
+  {% include '@ui/atoms/Button/StyledButton.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+{% endblock %}
+
+{% block close %}
+  <div class="absolute top-0 right-0 m-2">
+    {% include '@ui/atoms/Button/StyledButton.twig' with {
+      label: 'Close',
+      attr: { data_ref: 'close' }
+    } %}
+  </div>
+{% endblock %}

package/molecules/Slider/Slider.cjs

@@ -48,6 +48,11 @@ var Slider = class extends import_js_toolkit.Base {
     this.currentSliderItem.activate();
   }
   states = [];
+  origins = {
+    left: 0,
+    center: 0,
+    right: 0
+  };
   get currentState() {
     return this.states[this.currentIndex];
   }
@@ -72,7 +77,7 @@ var Slider = class extends import_js_toolkit.Base {
   getStates() {
     const { wrapper } = this.$refs;
     const originRect = wrapper.getBoundingClientRect();
-    const origins = {
+    this.origins = {
       left: originRect.left,
       center: originRect.x + originRect.width / 2,
       right: originRect.x + originRect.width
@@ -80,13 +85,16 @@ var Slider = class extends import_js_toolkit.Base {
     return this.$children.SliderItem.map((item) => {
       return {
         x: {
-          left: (item.rect.x - origins.left) * -1,
-          center: (item.rect.x + item.rect.width / 2 - origins.center) * -1,
-          right: (item.rect.x + item.rect.width - origins.right) * -1
+          left: (item.rect.x - this.origins.left) * -1,
+          center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,
+          right: (item.rect.x + item.rect.width - this.origins.right) * -1
         }
       };
     });
   }
+  getOriginByMode(mode) {
+    return this.origins[mode ?? this.$options.mode];
+  }
   getStateValueByMode(state, mode) {
     return state[mode ?? this.$options.mode];
   }

package/molecules/Slider/Slider.d.ts

@@ -75,6 +75,11 @@ export default class Slider extends Base {
      * @type {SliderState[]}
      */
     states: SliderState[];
+    /**
+     * Origins for the different modes.
+     * @type {Record<SliderModes, number>}
+     */
+    origins: Record<SliderModes, number>;
     /**
      * Get the current state.
      * @returns {SliderState}
@@ -127,6 +132,12 @@ export default class Slider extends Base {
             right: number;
         };
     }[];
+    /**
+     * Get an origin by mode.
+     * @param   {SliderOptions['mode']} [mode]
+     * @returns {number}
+     */
+    getOriginByMode(mode?: SliderOptions['mode']): number;
     /**
      * Get a state value according to the given mode.
      *

package/molecules/Slider/Slider.js

@@ -1 +1 @@
-import{Base as o}from"@studiometa/js-toolkit";import{clamp as d,inertiaFinalValue as c,nextFrame as h}from"@studiometa/js-toolkit/utils";import u from"./SliderDrag.js";import x from"./SliderItem.js";class I extends o{static config={name:"Slider",refs:["wrapper"],emits:["goto","index"],components:{SliderItem:x,SliderDrag:u},options:{mode:{type:String,default:"left"},fitBounds:Boolean,contain:Boolean,sensitivity:{type:Number,default:1}}};__distanceX=0;__initialX=0;__currentIndex=0;get currentIndex(){return this.__currentIndex}set currentIndex(e){this.currentSliderItem.disactivate(),this.$emit("index",e),this.__currentIndex=e,this.currentSliderItem.activate()}states=[];get currentState(){return this.states[this.currentIndex]}get firstState(){return this.states[0]}get lastState(){return this.states[this.states.length-1]}get containMinState(){return this.getStateValueByMode(this.firstState.x,"left")}get containMaxState(){return this.getStateValueByMode(this.lastState.x,"right")}get indexMax(){return this.$children.SliderItem.length-1}get currentSliderItem(){return this.$children.SliderItem[this.currentIndex]}getStates(){const{wrapper:e}=this.$refs,t=e.getBoundingClientRect(),s={left:t.left,center:t.x+t.width/2,right:t.x+t.width};return this.$children.SliderItem.map(i=>({x:{left:(i.rect.x-s.left)*-1,center:(i.rect.x+i.rect.width/2-s.center)*-1,right:(i.rect.x+i.rect.width-s.right)*-1}}))}getStateValueByMode(e,t){return e[t??this.$options.mode]}mounted(){this.states=this.getStates(),this.prepareInvisibleItems(),this.goTo(this.currentIndex)}resized(){h(()=>{this.states=this.getStates(),h(()=>{this.prepareInvisibleItems(),this.goTo(this.currentIndex)})})}goNext(){this.currentIndex+1>this.indexMax||this.goTo(this.currentIndex+1)}goPrev(){this.currentIndex-1<0||this.goTo(this.currentIndex-1)}goTo(e){if(e<0||e>this.indexMax)throw new Error("Index out of bound.");let t=this.getStateValueByMode(this.states[e].x);this.$options.contain&&(this.$children.SliderItem[this.indexMax].willBeFullyVisible(t)?t=this.getStateValueByMode(this.lastState.x,"right"):this.$children.SliderItem[0].willBeFullyVisible(t)&&(t=this.getStateValueByMode(this.firstState.x,"left")));const s=this.getVisibleItems(t);e<this.currentIndex&&s.reverse(),s.forEach(i=>{h(()=>i.move(t))}),this.currentIndex=e,this.$emit("goto",e)}onSliderDragStart(){this.__initialX=this.currentSliderItem?this.currentSliderItem.x:0}onSliderDragDrag(e){Math.abs(e.delta.y)>Math.abs(e.delta.x)||(this.__distanceX=this.__initialX+e.distance.x*this.$options.sensitivity,this.getVisibleItems(this.__distanceX).forEach(t=>{t.moveInstantly(this.__distanceX)}))}onSliderDragDrop(e){if(Math.abs(e.delta.y)>Math.abs(e.delta.x))return;let t=d(c(this.__distanceX,e.delta.x*this.$options.sensitivity),0,this.getStateValueByMode(this.lastState.x));const s=this.states.map(n=>Math.abs(t-this.getStateValueByMode(n.x))),i=Math.min(...s),r=s.findIndex(n=>n===i);this.$options.fitBounds?this.goTo(r):(this.$options.contain&&(t=Math.min(this.containMinState,t),t=Math.max(this.containMaxState,t)),this.$children.SliderItem.forEach(n=>{n.move(t)}),this.currentIndex=r)}prepareInvisibleItems(){const e=this.states[this.currentIndex],t=[],s=[];this.getInvisibleItems(this.getStateValueByMode(e.x)).forEach((i,r)=>{if(r>this.currentIndex){t.push(i);return}r<this.currentIndex&&s.push(i)}),t.forEach(i=>{const r=this.getStateWhereItemWillBeInvisible(i);r&&i.moveInstantly(this.getStateValueByMode(r.x))}),s.forEach(i=>{const r=this.getStateWhereItemWillBeInvisible(i,{reversed:!0});r&&i.moveInstantly(this.getStateValueByMode(r.x))})}getStateWhereItemWillBeInvisible(e,{reversed:t=!1}={}){const s=this.states.filter(a=>e.willBeVisible(this.getStateValueByMode(a.x))),i=s[0],r=s[s.length-1],n=this.states.findIndex(a=>this.getStateValueByMode(a.x)===this.getStateValueByMode(i.x)),l=this.states.findIndex(a=>a.x===r.x);return t?this.states[l+1]:this.states[n-1]}getVisibleItems(e){return this.$children.SliderItem.filter(t=>t.isVisible||t.willBeVisible(e))}getInvisibleItems(e){return this.$children.SliderItem.filter(t=>!t.isVisible&&!t.willBeVisible(e))}}export{I as default};
+import{Base as o}from"@studiometa/js-toolkit";import{clamp as d,inertiaFinalValue as c,nextFrame as h}from"@studiometa/js-toolkit/utils";import u from"./SliderDrag.js";import g from"./SliderItem.js";class x extends o{static config={name:"Slider",refs:["wrapper"],emits:["goto","index"],components:{SliderItem:g,SliderDrag:u},options:{mode:{type:String,default:"left"},fitBounds:Boolean,contain:Boolean,sensitivity:{type:Number,default:1}}};__distanceX=0;__initialX=0;__currentIndex=0;get currentIndex(){return this.__currentIndex}set currentIndex(e){this.currentSliderItem.disactivate(),this.$emit("index",e),this.__currentIndex=e,this.currentSliderItem.activate()}states=[];origins={left:0,center:0,right:0};get currentState(){return this.states[this.currentIndex]}get firstState(){return this.states[0]}get lastState(){return this.states[this.states.length-1]}get containMinState(){return this.getStateValueByMode(this.firstState.x,"left")}get containMaxState(){return this.getStateValueByMode(this.lastState.x,"right")}get indexMax(){return this.$children.SliderItem.length-1}get currentSliderItem(){return this.$children.SliderItem[this.currentIndex]}getStates(){const{wrapper:e}=this.$refs,t=e.getBoundingClientRect();return this.origins={left:t.left,center:t.x+t.width/2,right:t.x+t.width},this.$children.SliderItem.map(i=>({x:{left:(i.rect.x-this.origins.left)*-1,center:(i.rect.x+i.rect.width/2-this.origins.center)*-1,right:(i.rect.x+i.rect.width-this.origins.right)*-1}}))}getOriginByMode(e){return this.origins[e??this.$options.mode]}getStateValueByMode(e,t){return e[t??this.$options.mode]}mounted(){this.states=this.getStates(),this.prepareInvisibleItems(),this.goTo(this.currentIndex)}resized(){h(()=>{this.states=this.getStates(),h(()=>{this.prepareInvisibleItems(),this.goTo(this.currentIndex)})})}goNext(){this.currentIndex+1>this.indexMax||this.goTo(this.currentIndex+1)}goPrev(){this.currentIndex-1<0||this.goTo(this.currentIndex-1)}goTo(e){if(e<0||e>this.indexMax)throw new Error("Index out of bound.");let t=this.getStateValueByMode(this.states[e].x);this.$options.contain&&(this.$children.SliderItem[this.indexMax].willBeFullyVisible(t)?t=this.getStateValueByMode(this.lastState.x,"right"):this.$children.SliderItem[0].willBeFullyVisible(t)&&(t=this.getStateValueByMode(this.firstState.x,"left")));const i=this.getVisibleItems(t);e<this.currentIndex&&i.reverse(),i.forEach(s=>{h(()=>s.move(t))}),this.currentIndex=e,this.$emit("goto",e)}onSliderDragStart(){this.__initialX=this.currentSliderItem?this.currentSliderItem.x:0}onSliderDragDrag(e){Math.abs(e.delta.y)>Math.abs(e.delta.x)||(this.__distanceX=this.__initialX+e.distance.x*this.$options.sensitivity,this.getVisibleItems(this.__distanceX).forEach(t=>{t.moveInstantly(this.__distanceX)}))}onSliderDragDrop(e){if(Math.abs(e.delta.y)>Math.abs(e.delta.x))return;let t=d(c(this.__distanceX,e.delta.x*this.$options.sensitivity),0,this.getStateValueByMode(this.lastState.x));const i=this.states.map(n=>Math.abs(t-this.getStateValueByMode(n.x))),s=Math.min(...i),r=i.findIndex(n=>n===s);this.$options.fitBounds?this.goTo(r):(this.$options.contain&&(t=Math.min(this.containMinState,t),t=Math.max(this.containMaxState,t)),this.$children.SliderItem.forEach(n=>{n.move(t)}),this.currentIndex=r)}prepareInvisibleItems(){const e=this.states[this.currentIndex],t=[],i=[];this.getInvisibleItems(this.getStateValueByMode(e.x)).forEach((s,r)=>{if(r>this.currentIndex){t.push(s);return}r<this.currentIndex&&i.push(s)}),t.forEach(s=>{const r=this.getStateWhereItemWillBeInvisible(s);r&&s.moveInstantly(this.getStateValueByMode(r.x))}),i.forEach(s=>{const r=this.getStateWhereItemWillBeInvisible(s,{reversed:!0});r&&s.moveInstantly(this.getStateValueByMode(r.x))})}getStateWhereItemWillBeInvisible(e,{reversed:t=!1}={}){const i=this.states.filter(a=>e.willBeVisible(this.getStateValueByMode(a.x))),s=i[0],r=i[i.length-1],n=this.states.findIndex(a=>this.getStateValueByMode(a.x)===this.getStateValueByMode(s.x)),l=this.states.findIndex(a=>a.x===r.x);return t?this.states[l+1]:this.states[n-1]}getVisibleItems(e){return this.$children.SliderItem.filter(t=>t.isVisible||t.willBeVisible(e))}getInvisibleItems(e){return this.$children.SliderItem.filter(t=>!t.isVisible&&!t.willBeVisible(e))}}export{x as default};

package/molecules/Slider/SliderItem.cjs

@@ -57,9 +57,7 @@ var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(i
   }
   ticked() {
     this.dampedX = (0, import_utils.damp)(this.x, this.dampedX, 0.2, 1e-5);
-    this.$el.style.transform = `${(0, import_utils.matrix)({
-      translateX: this.dampedX
-    })} translateZ(0px)`;
+    this.render();
     if (this.dampedX === this.x) {
       this.$services.disable("ticked");
     }
@@ -79,8 +77,11 @@ var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(i
   moveInstantly(targetPosition) {
     this.x = targetPosition;
     this.dampedX = targetPosition;
+    this.render();
+  }
+  render() {
     this.$el.style.transform = `${(0, import_utils.matrix)({
-      translateX: targetPosition
+      translateX: this.dampedX
     })} translateZ(0px)`;
   }
   willBeVisible(targetPosition) {

package/molecules/Slider/SliderItem.d.ts

@@ -81,6 +81,11 @@ export default class SliderItem extends Base {
      * @returns {void}
      */
     moveInstantly(targetPosition: number): void;
+    /**
+     * Render the transform.
+     * @returns {void}
+     */
+    render(): void;
     /**
      * Check if SliderItem is partially visible for the given target position.
      *

package/molecules/Slider/SliderItem.js

@@ -1 +1 @@
-import{Base as s,withIntersectionObserver as d}from"@studiometa/js-toolkit";import{matrix as i,damp as h}from"@studiometa/js-toolkit/utils";class l extends d(s,{threshold:[0,1]}){static config={name:"SliderItem",emits:["is-fully-visible","is-partially-visible","is-hidden"]};isVisible=!1;x=0;dampedX=0;mounted(){this.updateRectAdjustedWithX()}resized(){this.updateRectAdjustedWithX()}destroyed(){this.moveInstantly(0)}intersected([{intersectionRatio:t,isIntersecting:e}]){t>=1?(this.$emit("is-fully-visible"),this.$el.setAttribute("aria-hidden","false")):t>0?(this.$emit("is-partially-visible"),this.$el.setAttribute("aria-hidden","true")):(this.$emit("is-hidden"),this.$el.setAttribute("aria-hidden","true")),this.isVisible=e}ticked(){this.dampedX=h(this.x,this.dampedX,.2,1e-5),this.$el.style.transform=`${i({translateX:this.dampedX})} translateZ(0px)`,this.dampedX===this.x&&this.$services.disable("ticked")}activate(){this.$el.classList.add("is-active")}disactivate(){this.$el.classList.remove("is-active")}move(t){this.x=t,this.$services.has("ticked")||this.$services.enable("ticked")}moveInstantly(t){this.x=t,this.dampedX=t,this.$el.style.transform=`${i({translateX:t})} translateZ(0px)`}willBeVisible(t){return this.rect.x+t<window.innerWidth*1.5&&this.rect.x+t+this.rect.width>window.innerWidth*-.5}willBeFullyVisible(t){return this.rect.x+t<window.innerWidth&&this.rect.x+t>0&&this.rect.x+t+this.rect.width<window.innerWidth&&this.rect.x+t+this.rect.width>0}updateRectAdjustedWithX(){const t=this.x*-1,e=this.$el.getBoundingClientRect().toJSON();this.rect={...e,left:e.left+t,right:e.left+t+e.width,x:e.left+t}}}export{l as default};
+import{Base as i,withIntersectionObserver as s}from"@studiometa/js-toolkit";import{matrix as d,damp as h}from"@studiometa/js-toolkit/utils";class r extends s(i,{threshold:[0,1]}){static config={name:"SliderItem",emits:["is-fully-visible","is-partially-visible","is-hidden"]};isVisible=!1;x=0;dampedX=0;mounted(){this.updateRectAdjustedWithX()}resized(){this.updateRectAdjustedWithX()}destroyed(){this.moveInstantly(0)}intersected([{intersectionRatio:e,isIntersecting:t}]){e>=1?(this.$emit("is-fully-visible"),this.$el.setAttribute("aria-hidden","false")):e>0?(this.$emit("is-partially-visible"),this.$el.setAttribute("aria-hidden","true")):(this.$emit("is-hidden"),this.$el.setAttribute("aria-hidden","true")),this.isVisible=t}ticked(){this.dampedX=h(this.x,this.dampedX,.2,1e-5),this.render(),this.dampedX===this.x&&this.$services.disable("ticked")}activate(){this.$el.classList.add("is-active")}disactivate(){this.$el.classList.remove("is-active")}move(e){this.x=e,this.$services.has("ticked")||this.$services.enable("ticked")}moveInstantly(e){this.x=e,this.dampedX=e,this.render()}render(){this.$el.style.transform=`${d({translateX:this.dampedX})} translateZ(0px)`}willBeVisible(e){return this.rect.x+e<window.innerWidth*1.5&&this.rect.x+e+this.rect.width>window.innerWidth*-.5}willBeFullyVisible(e){return this.rect.x+e<window.innerWidth&&this.rect.x+e>0&&this.rect.x+e+this.rect.width<window.innerWidth&&this.rect.x+e+this.rect.width>0}updateRectAdjustedWithX(){const e=this.x*-1,t=this.$el.getBoundingClientRect().toJSON();this.rect={...t,left:t.left+e,right:t.left+e+t.width,x:t.left+e}}}export{r as default};

package/molecules/Sticky/Sticky.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ *   Sticky component.
+ *
+ * @param array $attr
+ *   Custom attributes for the root element.
+ * @param array $innner_attr
+ *   Custom attributes for the inner element.
+ *
+ * @block $content
+ *   Use this block to set the content of the sticky element.
+ */
+#}
+
+{% set default_attributes = { data_component: 'Sticky', class: 'z-10 sticky top-0 w-full' } %}
+{% set attributes = attr|default({})|merge_html_attributes(default_attributes) %}
+
+{% set default_inner_attributes = { data_ref: 'inner', class:'transition duration-500 ease-out-expo' } %}
+{% set inner_attributes = inner_attr|default({})|merge_html_attributes(default_inner_attributes) %}
+
+<div {{ html_attributes(attributes) }}>
+  <div data-ref="sentinelRef"
+    data-component="Sentinel"
+    class="absolute bottom-full w-full h-px pointer-events-none"></div>
+  <div {{ html_attributes(inner_attributes) }}>
+    {% block content %}
+      {{ content ?? '' }}
+    {% endblock %}
+  </div>
+</div>

package/molecules/Tabs/Tabs.twig

@@ -0,0 +1,20 @@
+<div data-component="Tabs" data-option-styles='{ "btn": { "open": { "borderBottomColor": "#fff" } } }'>
+  {% block title_wrapper %}
+    {% for item in items %}
+      <button data-ref="btn[]" style="border-bottom: 1px solid transparent;">
+        {% block title %}
+          {{ item.title }}
+        {% endblock %}
+      </button>
+    {% endfor %}
+  {% endblock %}
+  {% block content_wrapper %}
+      {% for item in items %}
+        <div data-ref="content[]" aria-hidden="false">
+          {% block content %}
+            {{ item.content }}
+          {% endblock %}
+        </div>
+      {% endfor %}
+  {% endblock %}
+</div>

package/organisms/Frame/Frame.cjs

@@ -35,6 +35,12 @@ var import_utils = require("@studiometa/js-toolkit/utils");
 var import_FrameAnchor = __toESM(require("./FrameAnchor.cjs"), 1);
 var import_FrameForm = __toESM(require("./FrameForm.cjs"), 1);
 var import_FrameTarget = __toESM(require("./FrameTarget.cjs"), 1);
+function getScrollPosition() {
+  return {
+    left: window.pageXOffset,
+    top: window.pageYOffset
+  };
+}
 var cache = /* @__PURE__ */ new Map();
 var _Frame = class extends import_js_toolkit.Base {
   get id() {
@@ -58,6 +64,35 @@ var _Frame = class extends import_js_toolkit.Base {
   get directChildFrameTarget() {
     return this.getDirectChild("FrameTarget");
   }
+  mounted() {
+    if (this.$options.history) {
+      window.addEventListener("popstate", this);
+    }
+  }
+  destroyed() {
+    window.removeEventListener("popstate", this);
+  }
+  handleEvent(event) {
+    if (event.type === "popstate") {
+      this.onWindowPopstate(event);
+    }
+    if (event.type === "beforeunload") {
+      this.onWindowUnload();
+    }
+  }
+  onWindowUnload() {
+    const { history } = window;
+    if (!history.state) {
+      return;
+    }
+    history.replaceState({
+      ...history.state,
+      scroll: getScrollPosition()
+    }, "");
+  }
+  onWindowPopstate(event) {
+    this.goTo(window.location.href, event.state);
+  }
   onFrameAnchorFrameClick(event, index) {
     if (!this.directChildFrameAnchor.includes(this.$children.FrameAnchor[index])) {
       return;
@@ -82,7 +117,7 @@ var _Frame = class extends import_js_toolkit.Base {
   parseHTML(string = "") {
     return new DOMParser().parseFromString(string, "text/html");
   }
-  async goTo(url) {
+  async goTo(url, scroll = null) {
     this.$log("goTo", url);
     const parsedUrl = new URL(url);
     if (parsedUrl.origin !== window.location.origin) {
@@ -104,6 +139,10 @@ var _Frame = class extends import_js_toolkit.Base {
       document.title = doc.title;
       (0, import_utils.historyPush)({ path: parsedUrl.pathname, search: parsedUrl.searchParams });
     }
+    if (scroll) {
+      document.scrollingElement.scrollTop = scroll.top;
+      document.scrollingElement.scrollLeft = scroll.left;
+    }
     await (0, import_utils.nextFrame)();
     this.$root.$update();
     await (0, import_utils.nextFrame)();

package/organisms/Frame/Frame.d.ts

@@ -63,6 +63,35 @@ export default class Frame extends Base {
      * @returns {FrameTarget[]}
      */
     get directChildFrameTarget(): FrameTarget[];
+    /**
+     * Mounted hook.
+     * @returns {void}
+     */
+    mounted(): void;
+    /**
+     * Destroyed hook.
+     * @returns {void}
+     */
+    destroyed(): void;
+    /**
+     * Dispatch events.
+     * @param   {PopStateEvent} event
+     * @returns {void}
+     */
+    handleEvent(event: PopStateEvent): void;
+    /**
+     * Prevent scroll top on unload.
+     *
+     * @returns {void}
+     */
+    onWindowUnload(): void;
+    /**
+     * Go to the previous URL on `popstate` event.
+     *
+     * @param   {PopStateEvent} event
+     * @returns {void}
+     */
+    onWindowPopstate(event: PopStateEvent): void;
     /**
      * Prevent click on `FrameAnchor`.
      *
@@ -90,9 +119,13 @@ export default class Frame extends Base {
     /**
      * Go to the given url.
      * @param   {string} url
+     * @param   {null|{ top: number, left: number }} [scroll]
      * @returns {Promise<void>}
      */
-    goTo(url: string): Promise<void>;
+    goTo(url: string, scroll?: null | {
+        top: number;
+        left: number;
+    }): Promise<void>;
     /**
      * Fetch the given url.
      * @param   {string} url