@studiometa/ui 0.2.3 → 0.2.6

package/atoms/AnchorScrollTo/AnchorScrollTo.cjs

@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -31,6 +26,7 @@ var AnchorScrollTo_exports = {};
 __export(AnchorScrollTo_exports, {
   default: () => AnchorScrollTo
 });
+module.exports = __toCommonJS(AnchorScrollTo_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var AnchorScrollTo = class extends import_js_toolkit.Base {
@@ -48,5 +44,4 @@ var AnchorScrollTo = class extends import_js_toolkit.Base {
 __publicField(AnchorScrollTo, "config", {
   name: "AnchorScrollTo"
 });
-module.exports = __toCommonJS(AnchorScrollTo_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/atoms/AnchorScrollTo/AnchorScrollTo.js

@@ -1,26 +1 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { Base } from "@studiometa/js-toolkit";
-import { scrollTo } from "@studiometa/js-toolkit/utils";
-class AnchorScrollTo extends Base {
-  get targetSelector() {
-    return this.$el.hash;
-  }
-  onClick(event) {
-    try {
-      scrollTo(this.targetSelector);
-      event.preventDefault();
-    } catch (err) {
-    }
-  }
-}
-__publicField(AnchorScrollTo, "config", {
-  name: "AnchorScrollTo"
-});
-export {
-  AnchorScrollTo as default
-};
+import{Base as r}from"@studiometa/js-toolkit";import{scrollTo as e}from"@studiometa/js-toolkit/utils";class o extends r{static config={name:"AnchorScrollTo"};get targetSelector(){return this.$el.hash}onClick(t){try{e(this.targetSelector),t.preventDefault()}catch{}}}export{o as default};

package/atoms/Button/Button.twig

@@ -0,0 +1,68 @@
+{#
+/**
+ * @file
+ * Button component.
+ *
+ * @param string $label
+ * @param string $tag
+ * @param string $href
+ * @param array $attr
+ * @param string $icon
+ * @param array|string $icon_classes
+ * @param 'start'|'end' $icon_position
+ * @param boolean $icon_only
+ */
+#}
+
+{# Customizable tag with a default value. #}
+{% set tag =
+  tag|default(href is defined or (attr is defined and attr.href is defined) ? 'a' : 'button')
+%}
+
+{# Default icon values #}
+{% set icon_position = icon_position|default('start') %}
+{% set icon_only = icon_only|default(false) %}
+
+{# Final attributes are a merge of the defaults, the given and then the required #}
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    {
+      title: label,
+      type: tag == 'button' ? 'button' : false,
+      href: tag == 'a' and href is defined ? href : false,
+      aria_label: icon_only ? label : false
+    },
+    { class: ['btn'] }
+  )
+%}
+
+{% set rendered_icon %}
+  {% block icon %}
+    {% include '@ui/atoms/Icon/Icon.twig' with {
+      name: icon ?? '',
+      classes: icon_classes ?? {
+        'mr-3': not icon_only and icon_position == 'start',
+        'ml-3': not icon_only and icon_position == 'end',
+       }
+    } %}
+  {% endblock %}
+{% endset %}
+
+{% html_element tag with attributes %}
+  {% block content %}
+    {% if icon is defined and icon_position == 'start' %}
+      {{ rendered_icon }}
+    {% endif %}
+    {% block label %}
+      {% if icon_only %}
+        <span class="sr-only">{{ label }}</span>
+      {% else %}
+        {{ label }}
+      {% endif %}
+    {% endblock %}
+    {% if icon is defined and icon_position == 'end' %}
+      {{ rendered_icon }}
+    {% endif %}
+  {% endblock %}
+{% end_html_element %}

package/atoms/Button/StyledButton.twig

@@ -0,0 +1,47 @@
+{#
+/**
+ * @file
+ *   Styled button.
+ *
+ * @param 'primary'|'secondary'|'tertiary' $theme
+ */
+#}
+
+{% extends '@ui/atoms/Button/Button.twig' %}
+
+{% set icon_only = icon_only|default(false) %}
+
+{% set theme = theme|default('primary') %}
+
+{% set theme_shared = [
+  'rounded cursor-pointer transition',
+  'disabled:cursor-not-allowed',
+  {
+    'inline-block': icon is not defined,
+    'inline-flex items-center': icon is defined,
+    'px-6 py-4': not icon_only,
+    'p-4': icon_only
+  }
+] %}
+
+{% set theme_primary = ['text-white bg-black', 'hover:bg-opacity-75 disabled:bg-opacity-50'] %}
+
+{% set theme_secondary = [
+  'ring ring-inset ring-2 ring-black ring-opacity-25',
+  {
+    'hover:ring-opacity-100': (attr is defined and attr.disabled is not defined)
+      or attr is not defined
+  }
+] %}
+
+{% set attr =
+  attr
+    |default({})
+    |merge({
+      class: [
+        theme_shared,
+        theme == 'primary' ? theme_primary : '',
+        theme == 'secondary' ? theme_secondary : ''
+      ]
+    })
+%}

package/atoms/Cursor/Cursor.cjs

@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -31,18 +26,16 @@ var Cursor_exports = {};
 __export(Cursor_exports, {
   default: () => Cursor
 });
+module.exports = __toCommonJS(Cursor_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var Cursor = class extends import_js_toolkit.Base {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "x", 0);
-    __publicField(this, "y", 0);
-    __publicField(this, "scale", 0);
-    __publicField(this, "pointerX", 0);
-    __publicField(this, "pointerY", 0);
-    __publicField(this, "pointerScale", 0);
-  }
+  x = 0;
+  y = 0;
+  scale = 0;
+  pointerX = 0;
+  pointerY = 0;
+  pointerScale = 0;
   mounted() {
     this.x = 0;
     this.y = 0;
@@ -125,5 +118,4 @@ __publicField(Cursor, "config", {
     }
   }
 });
-module.exports = __toCommonJS(Cursor_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/atoms/Cursor/Cursor.d.ts

@@ -96,7 +96,7 @@ export default class Cursor extends Base {
      * @param {PointerServiceProps} options
      * @return {void}
      */
-    moved({ event, x, y, isDown }: PointerServiceProps): void;
+    moved(this: CursorInterface, { event, x, y, isDown }: PointerServiceProps): void;
     /**
      * RequestAnimationFrame hook.
      *
@@ -104,7 +104,7 @@ export default class Cursor extends Base {
      *
      * @return {void}
      */
-    ticked(): void;
+    ticked(this: CursorInterface): void;
     /**
      * Render the cursor.
      *

package/atoms/Cursor/Cursor.js

@@ -1,103 +1 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { Base } from "@studiometa/js-toolkit";
-import { damp, matrix } from "@studiometa/js-toolkit/utils";
-class Cursor extends Base {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "x", 0);
-    __publicField(this, "y", 0);
-    __publicField(this, "scale", 0);
-    __publicField(this, "pointerX", 0);
-    __publicField(this, "pointerY", 0);
-    __publicField(this, "pointerScale", 0);
-  }
-  mounted() {
-    this.x = 0;
-    this.y = 0;
-    this.scale = 0;
-    this.pointerX = 0;
-    this.pointerY = 0;
-    this.pointerScale = 0;
-    this.render({ x: this.x, y: this.y, scale: this.scale });
-  }
-  moved({ event, x, y, isDown }) {
-    if (!this.$services.has("ticked")) {
-      this.$services.enable("ticked");
-    }
-    this.pointerX = x;
-    this.pointerY = y;
-    let scale = 1;
-    if (!event) {
-      this.pointerScale = scale;
-      return;
-    }
-    const shouldGrow = event.target instanceof Element && event.target.matches(this.$options.growSelectors) || false;
-    const shouldReduce = isDown || event.target instanceof Element && event.target.matches(this.$options.shrinkSelectors) || false;
-    if (shouldGrow) {
-      scale = this.$options.growTo;
-    }
-    if (shouldReduce) {
-      scale = this.$options.shrinkTo;
-    }
-    this.pointerScale = scale;
-  }
-  ticked() {
-    this.x = damp(this.pointerX, this.x, this.$options.translateDampFactor);
-    this.y = damp(this.pointerY, this.y, this.$options.translateDampFactor);
-    this.scale = damp(this.pointerScale, this.scale, this.pointerScale < this.scale ? this.$options.shrinkDampFactor : this.$options.growDampFactor);
-    this.render({ x: this.x, y: this.y, scale: this.scale });
-    if (this.x === this.pointerX && this.y === this.pointerY && this.scale === this.pointerScale) {
-      this.$services.disable("ticked");
-    }
-  }
-  render({ x, y, scale }) {
-    const transform = matrix({
-      translateX: x,
-      translateY: y,
-      scaleX: scale,
-      scaleY: scale
-    });
-    this.$el.style.transform = `translateZ(0) ${transform}`;
-  }
-}
-__publicField(Cursor, "config", {
-  name: "Cursor",
-  options: {
-    growSelectors: {
-      type: String,
-      default: "a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"
-    },
-    shrinkSelectors: {
-      type: String,
-      default: "[data-cursor-shrink], [data-cursor-shrink] *"
-    },
-    growTo: {
-      type: Number,
-      default: 2
-    },
-    shrinkTo: {
-      type: Number,
-      default: 0.5
-    },
-    translateDampFactor: {
-      type: Number,
-      default: 0.25
-    },
-    growDampFactor: {
-      type: Number,
-      default: 0.25
-    },
-    shrinkDampFactor: {
-      type: Number,
-      default: 0.25
-    }
-  }
-});
-export {
-  Cursor as default
-};
+import{Base as n}from"@studiometa/js-toolkit";import{damp as a,matrix as c}from"@studiometa/js-toolkit/utils";class l extends n{static config={name:"Cursor",options:{growSelectors:{type:String,default:"a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"},shrinkSelectors:{type:String,default:"[data-cursor-shrink], [data-cursor-shrink] *"},growTo:{type:Number,default:2},shrinkTo:{type:Number,default:.5},translateDampFactor:{type:Number,default:.25},growDampFactor:{type:Number,default:.25},shrinkDampFactor:{type:Number,default:.25}}};x=0;y=0;scale=0;pointerX=0;pointerY=0;pointerScale=0;mounted(){this.x=0,this.y=0,this.scale=0,this.pointerX=0,this.pointerY=0,this.pointerScale=0,this.render({x:this.x,y:this.y,scale:this.scale})}moved({event:t,x:i,y:s,isDown:r}){this.$services.has("ticked")||this.$services.enable("ticked"),this.pointerX=i,this.pointerY=s;let e=1;if(!t){this.pointerScale=e;return}const o=t.target instanceof Element&&t.target.matches(this.$options.growSelectors)||!1,h=r||t.target instanceof Element&&t.target.matches(this.$options.shrinkSelectors)||!1;o&&(e=this.$options.growTo),h&&(e=this.$options.shrinkTo),this.pointerScale=e}ticked(){this.x=a(this.pointerX,this.x,this.$options.translateDampFactor),this.y=a(this.pointerY,this.y,this.$options.translateDampFactor),this.scale=a(this.pointerScale,this.scale,this.pointerScale<this.scale?this.$options.shrinkDampFactor:this.$options.growDampFactor),this.render({x:this.x,y:this.y,scale:this.scale}),this.x===this.pointerX&&this.y===this.pointerY&&this.scale===this.pointerScale&&this.$services.disable("ticked")}render({x:t,y:i,scale:s}){const r=c({translateX:t,translateY:i,scaleX:s,scaleY:s});this.$el.style.transform=`translateZ(0) ${r}`}}export{l as default};

package/atoms/Cursor/Cursor.twig

@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ *   Cursor component.
+ *
+ * @param array $attr
+ *   Custom attributes for the root element.
+ *
+ * @block $content
+ *   Custom content for the root element, defaults to `''`.
+ */
+#}
+
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    {
+      data_component: 'Cursor',
+      class: 'fixed top-0 left-0 w-12 h-12 -mt-6 -ml-6 rounded-full bg-black'
+    },
+    { class: 'pointer-events-none' }
+  )
+%}
+
+<div {{ html_attributes(attributes) }}>
+  {% block content %}
+  {% endblock %}
+</div>

package/atoms/Figure/Figure.cjs

@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -31,8 +26,15 @@ var Figure_exports = {};
 __export(Figure_exports, {
   default: () => Figure
 });
+module.exports = __toCommonJS(Figure_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { threshold: [0, 1] }) {
+  get src() {
+    return this.$refs.img.src;
+  }
+  set src(value) {
+    this.$refs.img.src = value;
+  }
   mounted() {
     if (!this.$refs.img) {
       throw new Error("[Figure] The `img` ref is required.");
@@ -40,14 +42,16 @@ var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_
     if (!(this.$refs.img instanceof HTMLImageElement)) {
       throw new Error("[Figure] The `img` ref must be an `<img>` element.");
     }
-    if (this.$refs.img.hasAttribute("data-src")) {
-      this.$refs.img.src = this.$refs.img.getAttribute("data-src");
+    if (this.$options.lazy && this.$refs.img.hasAttribute("data-src") && this.$refs.img.getAttribute("data-src") !== this.src) {
+      this.src = this.$refs.img.getAttribute("data-src");
     }
   }
 };
 __publicField(Figure, "config", {
   name: "Figure",
-  refs: ["img"]
+  refs: ["img"],
+  options: {
+    lazy: Boolean
+  }
 });
-module.exports = __toCommonJS(Figure_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/atoms/Figure/Figure.d.ts

@@ -15,12 +15,30 @@ export default class Figure extends Base {
     static config: {
         name: string;
         refs: string[];
+        options: {
+            lazy: BooleanConstructor;
+        };
     };
+    /**
+     * Set the image source.
+     *
+     * @this {Figure & FigureInterface}
+     * @param   {string} value
+     * @returns {void}
+     */
+    set src(arg: string);
+    /**
+     * Get the image source.
+     *
+     * @this {Figure & FigureInterface}
+     * @returns {string}
+     */
+    get src(): string;
     /**
      * Load on mount.
      * @this {Figure & FigureInterface}
      */
-    mounted(): void;
+    mounted(this: Figure & FigureInterface): void;
 }
 export type FigureRefs = {
     img: HTMLImageElement;

package/atoms/Figure/Figure.js

@@ -1,27 +1 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { Base, withMountWhenInView } from "@studiometa/js-toolkit";
-class Figure extends withMountWhenInView(Base, { threshold: [0, 1] }) {
-  mounted() {
-    if (!this.$refs.img) {
-      throw new Error("[Figure] The `img` ref is required.");
-    }
-    if (!(this.$refs.img instanceof HTMLImageElement)) {
-      throw new Error("[Figure] The `img` ref must be an `<img>` element.");
-    }
-    if (this.$refs.img.hasAttribute("data-src")) {
-      this.$refs.img.src = this.$refs.img.getAttribute("data-src");
-    }
-  }
-}
-__publicField(Figure, "config", {
-  name: "Figure",
-  refs: ["img"]
-});
-export {
-  Figure as default
-};
+import{Base as t,withMountWhenInView as r}from"@studiometa/js-toolkit";class i extends r(t,{threshold:[0,1]}){static config={name:"Figure",refs:["img"],options:{lazy:Boolean}};get src(){return this.$refs.img.src}set src(e){this.$refs.img.src=e}mounted(){if(!this.$refs.img)throw new Error("[Figure] The `img` ref is required.");if(!(this.$refs.img instanceof HTMLImageElement))throw new Error("[Figure] The `img` ref must be an `<img>` element.");this.$options.lazy&&this.$refs.img.hasAttribute("data-src")&&this.$refs.img.getAttribute("data-src")!==this.src&&(this.src=this.$refs.img.getAttribute("data-src"))}}export{i as default};

package/atoms/Figure/Figure.twig

@@ -0,0 +1,120 @@
+{#
+/**
+ * @file
+ * Figure component.
+ *
+ * @param string $src
+ * @param string $srcset
+ * @param string $sizes
+ * @param number $width
+ * @param number $height
+ * @param string $alt
+ * @param string $caption
+ * @param boolean $lazy
+ * @param 'cover'|'contain'|'fill'|'none' $fit
+ *   Define how the image will fit.
+ * @param boolean $absolute
+ *   Use absolute position on the image holder instead of relative.
+ * @param boolean $inline
+ *   Wether to enable the display of the figure inline or not. When `inline`, the root element
+ *   will have a max-width set corresponding to the `width` given. Use with caution.
+ * @param array $attr
+ *   Custom attributes for the root element.
+ * @param array $inner_attr
+ *   Custom attributes for the inner element.
+ * @param array $img_attr
+ *   Custom attributes for the image element.
+ * @param array $caption_attr
+ *   Custom attributes for the caption element.
+ *
+ * @block $caption
+ *   Use this block to customize the image's caption.
+ *
+ * @todo
+ *  - twicpics: use TwicPics to serve image at the right size
+ *  - loading: display a loader while loading, the fallback image if there was an error
+ *  - mode: img | background → is it really necessary with `object-fit-...`?
+ */
+#}
+
+{% set absolute = absolute|default(false) %}
+{% set inline = inline|default(false) %}
+{% set fit = fit ?? null %}
+{% set height = height|default(100) %}
+{% set width = width|default(100) %}
+{% set lazy = lazy ?? true %}
+
+{%- set placeholder_markup -%}
+  <svg xmlns="http://www.w3.org/2000/svg"
+    viewbox="0 0 {{ width }} {{ height }}"
+    width="{{ width }}"
+    height="{{ height }}">
+    <rect x="0" y="0" width="{{ width }}" height="{{ height }}" fill="#eee" />
+  </svg>
+{%- endset -%}
+{% set generic_placeholder = 'data:image/svg+xml,%s'|format(placeholder_markup|url_encode) %}
+
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    { data_component: 'Figure', class: ['figure', 'w-full'] },
+    {
+      style: { height: absolute ? '100%' : '', maxWidth: inline ? width ~ 'px' : '' },
+      data_option_lazy: lazy
+    }
+  )
+%}
+
+{% set img_attributes =
+  merge_html_attributes(
+    img_attr ?? null,
+    { class: 'figure__img' },
+    {
+      class: [
+        'absolute inset-0 w-full max-w-none h-full',
+        {
+          'object-cover': fit == 'cover',
+          'object-contain': fit == 'contain',
+          'object-fill': fit == 'fill',
+          'object-none': fit == 'none'
+        }
+      ],
+      src: lazy ? placeholder|default(generic_placeholder) : src,
+      data_src: lazy ? src|default(generic_placeholder) : src,
+      alt: alt|default(''),
+      width: width|default(false),
+      height: height|default(false),
+      srcset: srcset|default(false),
+      sizes: sizes|default(false),
+      data_ref: 'img'
+    }
+  )
+%}
+
+{% set inner_attributes =
+  merge_html_attributes(
+    inner_attr ?? null,
+    { class: ['figure__inner'] },
+    {
+      class: absolute ? ['absolute', 'inset-0'] : ['relative', 'w-full', 'h-0'],
+      style: { paddingTop: absolute ? '' : height * 100 / width ~ '%' }
+    }
+  )
+%}
+
+{% set caption_attributes =
+  merge_html_attributes(caption_attr ?? null, { class: 'figure__caption' })
+%}
+
+<figure {{ html_attributes(attributes) }}>
+  <div {{ html_attributes(inner_attributes) }}>
+    <img {{ html_attributes(img_attributes) }} />
+  </div>
+  {% if caption is defined %}
+    {% block caption %}
+      <figcaption {{ html_attributes(caption_attributes) }}>
+        {{ caption }}
+      </figcaption>
+    {% endblock %}
+  {% endif %}
+</figure>