@studiometa/ui 0.2.22 → 0.2.24

package/organisms/Frame/FrameTarget.js

@@ -1,6 +1,9 @@
 import { addClass, transition } from "@studiometa/js-toolkit/utils";
 import { Transition } from "../../primitives/index.js";
 class FrameTarget extends Transition {
+  /**
+   * Config.
+   */
   static config = {
     ...Transition.config,
     name: "FrameTarget",
@@ -10,22 +13,36 @@ class FrameTarget extends Transition {
       mode: {
         type: String,
         default: "replace"
+        // or 'prepend' or 'append'
       },
       id: String
     }
   };
+  /**
+   * Insert modes.
+   */
   static __INSERT_MODES = {
     prepend: "afterbegin",
     append: "beforeend"
   };
+  /**
+   * Override options.
+   */
+  // @ts-ignore
   get $options() {
     const options = super.$options;
     options.leaveKeep = true;
     return options;
   }
+  /**
+   * Get uniq ID.
+   */
   get id() {
     return this.$options.id ?? this.$el.id;
   }
+  /**
+   * Enter transition.
+   */
   async enter() {
     this.$log("enter");
     const { enterFrom: from, enterActive: active, enterTo: to, leaveTo, enterKeep } = this.$options;
@@ -37,16 +54,22 @@ class FrameTarget extends Transition {
           Array.from(this.$el.children).filter(
             (child) => from.split(" ").every((className) => child.classList.contains(className))
           ).map(
-            (child) => transition(child, transitionStyles, enterKeep && "keep")
+            (child) => transition(child, transitionStyles, enterKeep ? "keep" : void 0)
           )
         );
         break;
       case "replace":
       default:
         transitionStyles.from = Array.from(new Set([from, leaveTo].flat())).join(" ");
-        await transition(this.$el, transitionStyles, enterKeep && "keep");
+        await transition(this.$el, transitionStyles, enterKeep ? "keep" : void 0);
     }
   }
+  /**
+   * Update the content from the new target.
+   *
+   * @param   {FrameTarget} newTarget The instance of the new target.
+   * @returns {void}
+   */
   updateContent(newTarget) {
     switch (this.$options.mode) {
       case "prepend":

package/organisms/Frame/FrameTarget.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/organisms/Frame/FrameTarget.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { addClass, transition } from '@studiometa/js-toolkit/utils';\nimport { Transition } from '../../primitives/index.js';\n\nexport interface FrameTargetProps extends BaseProps {\n  $options: {\n    mode: 'replace' | 'prepend' | 'append';\n    id: string;\n    leaveKeep: true;\n  };\n}\n\n/**\n * FrameTarget class.\n */\nexport class FrameTarget<T extends BaseProps = BaseProps> extends Transition<T & FrameTargetProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'FrameTarget',\n    log: true,\n    options: {\n      ...Transition.config.options,\n      mode: {\n        type: String,\n        default: 'replace', // or 'prepend' or 'append'\n      },\n      id: String,\n    },\n  };\n\n  /**\n   * Insert modes.\n   */\n  static __INSERT_MODES = {\n    prepend: 'afterbegin',\n    append: 'beforeend',\n  } as const;\n\n  /**\n   * Override options.\n   */\n  // @ts-ignore\n  get $options() {\n    const options = super.$options;\n\n    options.leaveKeep = true;\n\n    return options;\n  }\n\n  /**\n   * Get uniq ID.\n   */\n  get id(): string {\n    return this.$options.id ?? this.$el.id;\n  }\n\n  /**\n   * Enter transition.\n   */\n  async enter() {\n    this.$log('enter');\n\n    const { enterFrom: from, enterActive: active, enterTo: to, leaveTo, enterKeep } = this.$options;\n    const transitionStyles = { from, active, to };\n\n    switch (this.$options.mode) {\n      case 'append':\n      case 'prepend':\n        await Promise.all(\n          Array.from(this.$el.children)\n            .filter((child) =>\n              from.split(' ').every((className) => child.classList.contains(className)),\n            )\n            .map((child) =>\n              transition(child as HTMLElement, transitionStyles, enterKeep && 'keep'),\n            ),\n        );\n        break;\n      case 'replace':\n      default:\n        transitionStyles.from = Array.from(new Set([from, leaveTo].flat())).join(' ');\n        await transition(this.$el, transitionStyles, enterKeep && 'keep');\n    }\n  }\n\n  /**\n   * Update the content from the new target.\n   *\n   * @param   {FrameTarget} newTarget The instance of the new target.\n   * @returns {void}\n   */\n  updateContent(newTarget:FrameTarget) {\n    // @todo manage 'prepend' and 'append' transition\n    // only the new content should have the transition\n    // - add the leaveTo and enterFrom classes to all `newTarget.children`\n    // - or wrap the new content in a custom div ?\n    switch (this.$options.mode) {\n      case 'prepend':\n      case 'append':\n        addClass(Array.from(newTarget.$el.children), this.$options.enterFrom.split(' '));\n        this.$el.insertAdjacentHTML(\n          FrameTarget.__INSERT_MODES[this.$options.mode],\n          newTarget.$el.innerHTML,\n        );\n        break;\n      case 'replace':\n      default:\n        this.$el.innerHTML = newTarget.$el.innerHTML;\n        break;\n    }\n  }\n}\n"],
-  "mappings": "AACA,SAAS,UAAU,kBAAkB;AACrC,SAAS,kBAAkB;AAapB,MAAM,oBAAqD,WAAiC;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EAKA,OAAO,iBAAiB;AAAA,IACtB,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EAMA,IAAI,WAAW;AACb,UAAM,UAAU,MAAM;AAEtB,YAAQ,YAAY;AAEpB,WAAO;AAAA,EACT;AAAA,EAKA,IAAI,KAAa;AACf,WAAO,KAAK,SAAS,MAAM,KAAK,IAAI;AAAA,EACtC;AAAA,EAKA,MAAM,QAAQ;AACZ,SAAK,KAAK,OAAO;AAEjB,UAAM,EAAE,WAAW,MAAM,aAAa,QAAQ,SAAS,IAAI,SAAS,UAAU,IAAI,KAAK;AACvF,UAAM,mBAAmB,EAAE,MAAM,QAAQ,GAAG;AAE5C,YAAQ,KAAK,SAAS,MAAM;AAAA,MAC1B,KAAK;AAAA,MACL,KAAK;AACH,cAAM,QAAQ;AAAA,UACZ,MAAM,KAAK,KAAK,IAAI,QAAQ,EACzB;AAAA,YAAO,CAAC,UACP,KAAK,MAAM,GAAG,EAAE,MAAM,CAAC,cAAc,MAAM,UAAU,SAAS,SAAS,CAAC;AAAA,UAC1E,EACC;AAAA,YAAI,CAAC,UACJ,WAAW,OAAsB,kBAAkB,aAAa,MAAM;AAAA,UACxE;AAAA,QACJ;AACA;AAAA,MACF,KAAK;AAAA,MACL;AACE,yBAAiB,OAAO,MAAM,KAAK,IAAI,IAAI,CAAC,MAAM,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG;AAC5E,cAAM,WAAW,KAAK,KAAK,kBAAkB,aAAa,MAAM;AAAA,IACpE;AAAA,EACF;AAAA,EAQA,cAAc,WAAuB;AAKnC,YAAQ,KAAK,SAAS,MAAM;AAAA,MAC1B,KAAK;AAAA,MACL,KAAK;AACH,iBAAS,MAAM,KAAK,UAAU,IAAI,QAAQ,GAAG,KAAK,SAAS,UAAU,MAAM,GAAG,CAAC;AAC/E,aAAK,IAAI;AAAA,UACP,YAAY,eAAe,KAAK,SAAS;AAAA,UACzC,UAAU,IAAI;AAAA,QAChB;AACA;AAAA,MACF,KAAK;AAAA,MACL;AACE,aAAK,IAAI,YAAY,UAAU,IAAI;AACnC;AAAA,IACJ;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { addClass, transition } from '@studiometa/js-toolkit/utils';\nimport { Transition } from '../../primitives/index.js';\n\nexport interface FrameTargetProps extends BaseProps {\n  $options: {\n    mode: 'replace' | 'prepend' | 'append';\n    id: string;\n    leaveKeep: true;\n  };\n}\n\n/**\n * FrameTarget class.\n */\nexport class FrameTarget<T extends BaseProps = BaseProps> extends Transition<T & FrameTargetProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'FrameTarget',\n    log: true,\n    options: {\n      ...Transition.config.options,\n      mode: {\n        type: String,\n        default: 'replace', // or 'prepend' or 'append'\n      },\n      id: String,\n    },\n  };\n\n  /**\n   * Insert modes.\n   */\n  static __INSERT_MODES = {\n    prepend: 'afterbegin',\n    append: 'beforeend',\n  } as const;\n\n  /**\n   * Override options.\n   */\n  // @ts-ignore\n  get $options() {\n    const options = super.$options;\n\n    options.leaveKeep = true;\n\n    return options;\n  }\n\n  /**\n   * Get uniq ID.\n   */\n  get id(): string {\n    return this.$options.id ?? this.$el.id;\n  }\n\n  /**\n   * Enter transition.\n   */\n  async enter() {\n    this.$log('enter');\n\n    const { enterFrom: from, enterActive: active, enterTo: to, leaveTo, enterKeep } = this.$options;\n    const transitionStyles = { from, active, to };\n\n    switch (this.$options.mode) {\n      case 'append':\n      case 'prepend':\n        await Promise.all(\n          Array.from(this.$el.children)\n            .filter((child) =>\n              from.split(' ').every((className) => child.classList.contains(className)),\n            )\n            .map((child) =>\n              transition(child as HTMLElement, transitionStyles, enterKeep ? 'keep' : undefined),\n            ),\n        );\n        break;\n      case 'replace':\n      default:\n        transitionStyles.from = Array.from(new Set([from, leaveTo].flat())).join(' ');\n        await transition(this.$el, transitionStyles, enterKeep ? 'keep' : undefined);\n    }\n  }\n\n  /**\n   * Update the content from the new target.\n   *\n   * @param   {FrameTarget} newTarget The instance of the new target.\n   * @returns {void}\n   */\n  updateContent(newTarget: FrameTarget) {\n    // @todo manage 'prepend' and 'append' transition\n    // only the new content should have the transition\n    // - add the leaveTo and enterFrom classes to all `newTarget.children`\n    // - or wrap the new content in a custom div ?\n    switch (this.$options.mode) {\n      case 'prepend':\n      case 'append':\n        addClass(Array.from(newTarget.$el.children), this.$options.enterFrom.split(' '));\n        this.$el.insertAdjacentHTML(\n          FrameTarget.__INSERT_MODES[this.$options.mode],\n          newTarget.$el.innerHTML,\n        );\n        break;\n      case 'replace':\n      default:\n        this.$el.innerHTML = newTarget.$el.innerHTML;\n        break;\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,UAAU,kBAAkB;AACrC,SAAS,kBAAkB;AAapB,MAAM,oBAAqD,WAAiC;AAAA;AAAA;AAAA;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA;AAAA,MACX;AAAA,MACA,IAAI;AAAA,IACN;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,iBAAiB;AAAA,IACtB,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACb,UAAM,UAAU,MAAM;AAEtB,YAAQ,YAAY;AAEpB,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAa;AACf,WAAO,KAAK,SAAS,MAAM,KAAK,IAAI;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,QAAQ;AACZ,SAAK,KAAK,OAAO;AAEjB,UAAM,EAAE,WAAW,MAAM,aAAa,QAAQ,SAAS,IAAI,SAAS,UAAU,IAAI,KAAK;AACvF,UAAM,mBAAmB,EAAE,MAAM,QAAQ,GAAG;AAE5C,YAAQ,KAAK,SAAS,MAAM;AAAA,MAC1B,KAAK;AAAA,MACL,KAAK;AACH,cAAM,QAAQ;AAAA,UACZ,MAAM,KAAK,KAAK,IAAI,QAAQ,EACzB;AAAA,YAAO,CAAC,UACP,KAAK,MAAM,GAAG,EAAE,MAAM,CAAC,cAAc,MAAM,UAAU,SAAS,SAAS,CAAC;AAAA,UAC1E,EACC;AAAA,YAAI,CAAC,UACJ,WAAW,OAAsB,kBAAkB,YAAY,SAAS,MAAS;AAAA,UACnF;AAAA,QACJ;AACA;AAAA,MACF,KAAK;AAAA,MACL;AACE,yBAAiB,OAAO,MAAM,KAAK,IAAI,IAAI,CAAC,MAAM,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG;AAC5E,cAAM,WAAW,KAAK,KAAK,kBAAkB,YAAY,SAAS,MAAS;AAAA,IAC/E;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,cAAc,WAAwB;AAKpC,YAAQ,KAAK,SAAS,MAAM;AAAA,MAC1B,KAAK;AAAA,MACL,KAAK;AACH,iBAAS,MAAM,KAAK,UAAU,IAAI,QAAQ,GAAG,KAAK,SAAS,UAAU,MAAM,GAAG,CAAC;AAC/E,aAAK,IAAI;AAAA,UACP,YAAY,eAAe,KAAK,SAAS,IAAI;AAAA,UAC7C,UAAU,IAAI;AAAA,QAChB;AACA;AAAA,MACF,KAAK;AAAA,MACL;AACE,aAAK,IAAI,YAAY,UAAU,IAAI;AACnC;AAAA,IACJ;AAAA,EACF;AACF;",
   "names": []
 }

package/organisms/Hero/Hero.twig

@@ -0,0 +1,151 @@
+{#
+/**
+ * @file
+ * Hero component.
+ *
+ * @param string $surtitle
+ * @param string $title
+ * @param string $subtitle
+ * @param array{url: string, label: string} $actions
+ *
+ * @param array                                     $attr
+ *   customize the root element attributes.
+ * @param Image                                     $image
+ *   Image to display. See Figure.twig for the composition.
+ * @param array                                     $content_attr
+ *   customize the content classes.
+ * @param 'left'|'center'|'right'                   $content_position
+ *   define the content position.
+ * @param string                                    $surtitle_tag
+ *   customize the tag of the surtitle element
+ * @param array                                     $surtitle_attr
+ *   customize the surtitle element attributes.
+ * @param array                                     $title_tag
+ *   customize the tag of the title element
+ * @param array                                     $title_attr
+ *   customize the title element attributes.
+ * @param array                                     $description_tag
+ *   customize the tag of the description element
+ * @param array                                     $description_attr
+ *   customize the description element attributes.
+ * @param array                                     $actions_attr
+ *   customize the cta element attributes.
+ */
+#}
+
+{% set content_position = content_position|default('center') %}
+
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    { class: 'w-full min-h-screen' },
+    {
+      class: [
+        'hero flex relative',
+        {
+          'justify-start': content_position == 'left',
+          'justify-center text-center': content_position == 'center',
+          'justify-end': content_position == 'right'
+        }
+      ]
+    }
+  )
+%}
+
+{# Default images attributes #}
+
+{% set image =
+  image
+    |default({})
+    |merge({
+      attr: merge_html_attributes(
+        image.attr ?? null,
+        { class: ['absolute inset-0'] },
+        { class: ['hero__image'] }
+      )
+    })
+%}
+
+{# Default content attributes #}
+{% set content_attributes =
+  merge_html_attributes(
+    content_attr ?? null,
+    { class: 'flex-col justify-center h-screen w-1/2 gap-8 relative' },
+    {
+      class: [
+        'hero__content flex',
+        {
+          'items-start text-left': content_position == 'left',
+          'items-center text-center': content_position == 'center',
+          'items-end text-right': content_position == 'right'
+        }
+      ]
+    }
+  )
+%}
+{% set surtitle_tag = title_tag|default('p') %}
+{% set surtitle_attributes =
+  merge_html_attributes(surtitle_attr ?? null, { class: ['hero__surtitle type-base'] })
+%}
+
+{% set title_tag = title_tag|default('p') %}
+{% set title_attributes =
+  merge_html_attributes(title_attr ?? null, { class: ['hero__title type-h1'] })
+%}
+
+{% set description_tag = description_tag|default('p') %}
+{% set description_attributes =
+  merge_html_attributes(description_attr ?? null, { class: ['hero__description type-base'] })
+%}
+
+{% set actions_attributes =
+  merge_html_attributes(actions_attr ?? null, { class: ['hero__actions', 'flex', 'gap-6'] })
+%}
+
+<section {{ html_attributes(attributes) }}>
+  {% block before %}
+
+  {% endblock %}
+  {% block background %}
+    {% if image.src %}
+      {% include '@ui/atoms/Figure/Figure.twig' with image only %}
+    {% endif %}
+  {% endblock %}
+  {% block content %}
+    <div {{ html_attributes(content_attributes) }}>
+      {% block surtitle %}
+        {% if surtitle %}
+          {% html_element surtitle_tag with surtitle_attributes %}
+            {{ surtitle }}
+          {% end_html_element %}
+        {% endif %}
+      {% endblock %}
+      {% block title %}
+        {% if title %}
+          {% html_element title_tag with title_attributes %}
+            {{ title }}
+          {% end_html_element %}
+        {% endif %}
+      {% endblock %}
+      {% block description %}
+        {% if description %}
+          {% html_element description_tag with description_attributes %}
+            {{ description }}
+          {% end_html_element %}
+        {% endif %}
+      {% endblock %}
+      {% block actions %}
+        {% if actions %}
+          <div {{ html_attributes(actions_attributes) }}>
+            {% for action in actions %}
+              {% include '@ui/atoms/Button/StyledButtonRounded.twig' with action only %}
+            {% endfor %}
+          </div>
+        {% endif %}
+      {% endblock %}
+    </div>
+  {% endblock %}
+  {% block after %}
+
+  {% endblock %}
+</section>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "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": "^2.6.3",
+    "@studiometa/js-toolkit": "^2.8.0",
     "deepmerge": "^4.2.2"
   }
 }

package/primitives/Draggable/Draggable.cjs

@@ -30,10 +30,25 @@ module.exports = __toCommonJS(Draggable_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var Draggable = class extends (0, import_js_toolkit.withDrag)(import_js_toolkit.Base) {
+  /**
+   * Horizontal transformation.
+   */
   x = 0;
+  /**
+   * Vertical transformation.
+   */
   y = 0;
+  /**
+   * Horizontal position origin.
+   */
   originX = 0;
+  /**
+   * Vertical position origin.
+   */
   originY = 0;
+  /**
+   * Drag service hook.
+   */
   dragged(props) {
     if (props.mode === "start") {
       this.originX = this.x;
@@ -45,6 +60,9 @@ var Draggable = class extends (0, import_js_toolkit.withDrag)(import_js_toolkit.
     this.$el.style.transform = (0, import_utils.matrix)({ translateX: this.x, translateY: this.y });
   }
 };
+/**
+ * Config.
+ */
 __publicField(Draggable, "config", {
   name: "DraggableElement"
 });

package/primitives/Draggable/Draggable.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/primitives/Draggable/Draggable.ts"],
-  "sourcesContent": ["import { Base, withDrag } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { matrix } from '@studiometa/js-toolkit/utils';\n\n/**\n * Draggable class.\n */\nexport class Draggable<T extends BaseProps = BaseProps> extends withDrag(Base)<T> {\n  /**\n   * Config.\n   */\n  static config:BaseConfig = {\n    name: 'DraggableElement',\n  };\n\n  /**\n   * Horizontal transformation.\n   */\n  x = 0;\n\n  /**\n   * Vertical transformation.\n   */\n  y = 0;\n\n  /**\n   * Horizontal position origin.\n   */\n  originX = 0;\n\n  /**\n   * Vertical position origin.\n   */\n  originY = 0;\n\n  /**\n   * Drag service hook.\n   */\n  dragged(props:DragServiceProps) {\n    if (props.mode === 'start') {\n      this.originX = this.x;\n      this.originY = this.y;\n      return;\n    }\n\n    this.x = this.originX + props.x - props.origin.x;\n    this.y = this.originY + props.y - props.origin.y;\n\n    this.$el.style.transform = matrix({ translateX: this.x, translateY: this.y });\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAA+B;AAE/B,mBAAuB;AAKhB,IAAM,YAAN,kBAAyD,4BAAS,sBAAI,EAAK;AAAA,EAWhF,IAAI;AAAA,EAKJ,IAAI;AAAA,EAKJ,UAAU;AAAA,EAKV,UAAU;AAAA,EAKV,QAAQ,OAAwB;AAC9B,QAAI,MAAM,SAAS,SAAS;AAC1B,WAAK,UAAU,KAAK;AACpB,WAAK,UAAU,KAAK;AACpB;AAAA,IACF;AAEA,SAAK,IAAI,KAAK,UAAU,MAAM,IAAI,MAAM,OAAO;AAC/C,SAAK,IAAI,KAAK,UAAU,MAAM,IAAI,MAAM,OAAO;AAE/C,SAAK,IAAI,MAAM,gBAAY,qBAAO,EAAE,YAAY,KAAK,GAAG,YAAY,KAAK,EAAE,CAAC;AAAA,EAC9E;AACF;AAvCE,cAJW,WAIJ,UAAoB;AAAA,EACzB,MAAM;AACR;",
+  "sourcesContent": ["import { Base, withDrag } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { matrix } from '@studiometa/js-toolkit/utils';\n\n/**\n * Draggable class.\n */\nexport class Draggable<T extends BaseProps = BaseProps> extends withDrag(Base)<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'DraggableElement',\n  };\n\n  /**\n   * Horizontal transformation.\n   */\n  x = 0;\n\n  /**\n   * Vertical transformation.\n   */\n  y = 0;\n\n  /**\n   * Horizontal position origin.\n   */\n  originX = 0;\n\n  /**\n   * Vertical position origin.\n   */\n  originY = 0;\n\n  /**\n   * Drag service hook.\n   */\n  dragged(props: DragServiceProps) {\n    if (props.mode === 'start') {\n      this.originX = this.x;\n      this.originY = this.y;\n      return;\n    }\n\n    this.x = this.originX + props.x - props.origin.x;\n    this.y = this.originY + props.y - props.origin.y;\n\n    this.$el.style.transform = matrix({ translateX: this.x, translateY: this.y });\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAA+B;AAE/B,mBAAuB;AAKhB,IAAM,YAAN,kBAAyD,4BAAS,sBAAI,EAAK;AAAA;AAAA;AAAA;AAAA,EAWhF,IAAI;AAAA;AAAA;AAAA;AAAA,EAKJ,IAAI;AAAA;AAAA;AAAA;AAAA,EAKJ,UAAU;AAAA;AAAA;AAAA;AAAA,EAKV,UAAU;AAAA;AAAA;AAAA;AAAA,EAKV,QAAQ,OAAyB;AAC/B,QAAI,MAAM,SAAS,SAAS;AAC1B,WAAK,UAAU,KAAK;AACpB,WAAK,UAAU,KAAK;AACpB;AAAA,IACF;AAEA,SAAK,IAAI,KAAK,UAAU,MAAM,IAAI,MAAM,OAAO;AAC/C,SAAK,IAAI,KAAK,UAAU,MAAM,IAAI,MAAM,OAAO;AAE/C,SAAK,IAAI,MAAM,gBAAY,qBAAO,EAAE,YAAY,KAAK,GAAG,YAAY,KAAK,EAAE,CAAC;AAAA,EAC9E;AACF;AAAA;AAAA;AAAA;AAvCE,cAJW,WAIJ,UAAqB;AAAA,EAC1B,MAAM;AACR;",
   "names": []
 }

package/primitives/Draggable/Draggable.js

@@ -1,13 +1,31 @@
 import { Base, withDrag } from "@studiometa/js-toolkit";
 import { matrix } from "@studiometa/js-toolkit/utils";
 class Draggable extends withDrag(Base) {
+  /**
+   * Config.
+   */
   static config = {
     name: "DraggableElement"
   };
+  /**
+   * Horizontal transformation.
+   */
   x = 0;
+  /**
+   * Vertical transformation.
+   */
   y = 0;
+  /**
+   * Horizontal position origin.
+   */
   originX = 0;
+  /**
+   * Vertical position origin.
+   */
   originY = 0;
+  /**
+   * Drag service hook.
+   */
   dragged(props) {
     if (props.mode === "start") {
       this.originX = this.x;

package/primitives/Draggable/Draggable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/primitives/Draggable/Draggable.ts"],
-  "sourcesContent": ["import { Base, withDrag } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { matrix } from '@studiometa/js-toolkit/utils';\n\n/**\n * Draggable class.\n */\nexport class Draggable<T extends BaseProps = BaseProps> extends withDrag(Base)<T> {\n  /**\n   * Config.\n   */\n  static config:BaseConfig = {\n    name: 'DraggableElement',\n  };\n\n  /**\n   * Horizontal transformation.\n   */\n  x = 0;\n\n  /**\n   * Vertical transformation.\n   */\n  y = 0;\n\n  /**\n   * Horizontal position origin.\n   */\n  originX = 0;\n\n  /**\n   * Vertical position origin.\n   */\n  originY = 0;\n\n  /**\n   * Drag service hook.\n   */\n  dragged(props:DragServiceProps) {\n    if (props.mode === 'start') {\n      this.originX = this.x;\n      this.originY = this.y;\n      return;\n    }\n\n    this.x = this.originX + props.x - props.origin.x;\n    this.y = this.originY + props.y - props.origin.y;\n\n    this.$el.style.transform = matrix({ translateX: this.x, translateY: this.y });\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,MAAM,gBAAgB;AAE/B,SAAS,cAAc;AAKhB,MAAM,kBAAmD,SAAS,IAAI,EAAK;AAAA,EAIhF,OAAO,SAAoB;AAAA,IACzB,MAAM;AAAA,EACR;AAAA,EAKA,IAAI;AAAA,EAKJ,IAAI;AAAA,EAKJ,UAAU;AAAA,EAKV,UAAU;AAAA,EAKV,QAAQ,OAAwB;AAC9B,QAAI,MAAM,SAAS,SAAS;AAC1B,WAAK,UAAU,KAAK;AACpB,WAAK,UAAU,KAAK;AACpB;AAAA,IACF;AAEA,SAAK,IAAI,KAAK,UAAU,MAAM,IAAI,MAAM,OAAO;AAC/C,SAAK,IAAI,KAAK,UAAU,MAAM,IAAI,MAAM,OAAO;AAE/C,SAAK,IAAI,MAAM,YAAY,OAAO,EAAE,YAAY,KAAK,GAAG,YAAY,KAAK,EAAE,CAAC;AAAA,EAC9E;AACF;",
+  "sourcesContent": ["import { Base, withDrag } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { matrix } from '@studiometa/js-toolkit/utils';\n\n/**\n * Draggable class.\n */\nexport class Draggable<T extends BaseProps = BaseProps> extends withDrag(Base)<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'DraggableElement',\n  };\n\n  /**\n   * Horizontal transformation.\n   */\n  x = 0;\n\n  /**\n   * Vertical transformation.\n   */\n  y = 0;\n\n  /**\n   * Horizontal position origin.\n   */\n  originX = 0;\n\n  /**\n   * Vertical position origin.\n   */\n  originY = 0;\n\n  /**\n   * Drag service hook.\n   */\n  dragged(props: DragServiceProps) {\n    if (props.mode === 'start') {\n      this.originX = this.x;\n      this.originY = this.y;\n      return;\n    }\n\n    this.x = this.originX + props.x - props.origin.x;\n    this.y = this.originY + props.y - props.origin.y;\n\n    this.$el.style.transform = matrix({ translateX: this.x, translateY: this.y });\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,MAAM,gBAAgB;AAE/B,SAAS,cAAc;AAKhB,MAAM,kBAAmD,SAAS,IAAI,EAAK;AAAA;AAAA;AAAA;AAAA,EAIhF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI;AAAA;AAAA;AAAA;AAAA,EAKJ,IAAI;AAAA;AAAA;AAAA;AAAA,EAKJ,UAAU;AAAA;AAAA;AAAA;AAAA,EAKV,UAAU;AAAA;AAAA;AAAA;AAAA,EAKV,QAAQ,OAAyB;AAC/B,QAAI,MAAM,SAAS,SAAS;AAC1B,WAAK,UAAU,KAAK;AACpB,WAAK,UAAU,KAAK;AACpB;AAAA,IACF;AAEA,SAAK,IAAI,KAAK,UAAU,MAAM,IAAI,MAAM,OAAO;AAC/C,SAAK,IAAI,KAAK,UAAU,MAAM,IAAI,MAAM,OAAO;AAE/C,SAAK,IAAI,MAAM,YAAY,OAAO,EAAE,YAAY,KAAK,GAAG,YAAY,KAAK,EAAE,CAAC;AAAA,EAC9E;AACF;",
   "names": []
 }

package/primitives/Sentinel/Sentinel.cjs

@@ -30,6 +30,9 @@ module.exports = __toCommonJS(Sentinel_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var Sentinel = class extends (0, import_js_toolkit.withIntersectionObserver)(import_js_toolkit.Base, { threshold: [0, 1] }) {
 };
+/**
+ * Config.
+ */
 __publicField(Sentinel, "config", {
   name: "Sentinel"
 });

package/primitives/Sentinel/Sentinel.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/primitives/Sentinel/Sentinel.ts"],
-  "sourcesContent": ["import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\n\n/**\n * Sentinel class.\n */\nexport class Sentinel extends withIntersectionObserver(Base, { threshold: [0, 1] }) {\n  /**\n   * Config.\n   */\n  static config:BaseConfig = {\n    name: 'Sentinel',\n  };\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAA+C;AAMxC,IAAM,WAAN,kBAAuB,4CAAyB,wBAAM,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;AAOpF;AAHE,cAJW,UAIJ,UAAoB;AAAA,EACzB,MAAM;AACR;",
+  "sourcesContent": ["import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\n\n/**\n * Sentinel class.\n */\nexport class Sentinel extends withIntersectionObserver(Base, { threshold: [0, 1] }) {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Sentinel',\n  };\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAA+C;AAMxC,IAAM,WAAN,kBAAuB,4CAAyB,wBAAM,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;AAOpF;AAAA;AAAA;AAAA;AAHE,cAJW,UAIJ,UAAqB;AAAA,EAC1B,MAAM;AACR;",
   "names": []
 }

package/primitives/Sentinel/Sentinel.js

@@ -1,5 +1,8 @@
 import { Base, withIntersectionObserver } from "@studiometa/js-toolkit";
 class Sentinel extends withIntersectionObserver(Base, { threshold: [0, 1] }) {
+  /**
+   * Config.
+   */
   static config = {
     name: "Sentinel"
   };

package/primitives/Sentinel/Sentinel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/primitives/Sentinel/Sentinel.ts"],
-  "sourcesContent": ["import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\n\n/**\n * Sentinel class.\n */\nexport class Sentinel extends withIntersectionObserver(Base, { threshold: [0, 1] }) {\n  /**\n   * Config.\n   */\n  static config:BaseConfig = {\n    name: 'Sentinel',\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,MAAM,gCAAgC;AAMxC,MAAM,iBAAiB,yBAAyB,MAAM,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;AAAA,EAIlF,OAAO,SAAoB;AAAA,IACzB,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\n\n/**\n * Sentinel class.\n */\nexport class Sentinel extends withIntersectionObserver(Base, { threshold: [0, 1] }) {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Sentinel',\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,MAAM,gCAAgC;AAMxC,MAAM,iBAAiB,yBAAyB,MAAM,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;AAAA;AAAA;AAAA;AAAA,EAIlF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;",
   "names": []
 }

package/primitives/Transition/Transition.cjs

@@ -31,6 +31,9 @@ var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_decorators = require("../../decorators/index.cjs");
 var Transition = class extends (0, import_decorators.withTransition)(import_js_toolkit.Base) {
 };
+/**
+ * Config.
+ */
 __publicField(Transition, "config", {
   name: "Transition"
 });

package/primitives/Transition/Transition.cjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../packages/ui/primitives/Transition/Transition.ts"],
   "sourcesContent": ["// eslint-disable-next-line max-classes-per-file\nimport { Base, BaseProps } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../../decorators/index.js';\n\n/**\n * Transition class.\n */\nexport class Transition<T extends BaseProps = BaseProps> extends withTransition<Base>(Base)<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Transition',\n  };\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAAgC;AAEhC,wBAA+B;AAKxB,IAAM,aAAN,kBAA0D,kCAAqB,sBAAI,EAAK;AAO/F;AAHE,cAJW,YAIJ,UAAqB;AAAA,EAC1B,MAAM;AACR;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAAgC;AAEhC,wBAA+B;AAKxB,IAAM,aAAN,kBAA0D,kCAAqB,sBAAI,EAAK;AAO/F;AAAA;AAAA;AAAA;AAHE,cAJW,YAIJ,UAAqB;AAAA,EAC1B,MAAM;AACR;",
   "names": []
 }

package/primitives/Transition/Transition.js

@@ -1,6 +1,9 @@
 import { Base } from "@studiometa/js-toolkit";
 import { withTransition } from "../../decorators/index.js";
 class Transition extends withTransition(Base) {
+  /**
+   * Config.
+   */
   static config = {
     name: "Transition"
   };

package/primitives/Transition/Transition.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../packages/ui/primitives/Transition/Transition.ts"],
   "sourcesContent": ["// eslint-disable-next-line max-classes-per-file\nimport { Base, BaseProps } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../../decorators/index.js';\n\n/**\n * Transition class.\n */\nexport class Transition<T extends BaseProps = BaseProps> extends withTransition<Base>(Base)<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Transition',\n  };\n}\n"],
-  "mappings": "AACA,SAAS,YAAuB;AAEhC,SAAS,sBAAsB;AAKxB,MAAM,mBAAoD,eAAqB,IAAI,EAAK;AAAA,EAI7F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;",
+  "mappings": "AACA,SAAS,YAAuB;AAEhC,SAAS,sBAAsB;AAKxB,MAAM,mBAAoD,eAAqB,IAAI,EAAK;AAAA;AAAA;AAAA;AAAA,EAI7F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;",
   "names": []
 }