@rmdes/indiekit-frontend 1.0.0-beta.25

package/components/tag-input/styles.css

@@ -0,0 +1,161 @@
+tag-input-field {
+  display: block;
+}
+
+.tag-input {
+  background-color: var(--color-background);
+  border: var(--input-border-width) solid var(--color-outline-variant);
+  border-radius: var(--border-radius-small);
+  cursor: default;
+  display: flex;
+  flex-wrap: wrap;
+  font: var(--font-body);
+  gap: var(--space-2xs);
+  margin-block-end: var(--input-border-width-focus-offset);
+  overflow-x: auto;
+  padding-block: calc(var(--space-s) / 3);
+  padding-inline: var(--space-2xs);
+  position: relative;
+
+  & > * {
+    --fieldset-flow-space: 0;
+  }
+
+  &:focus-within {
+    border-color: var(--color-on-background);
+    border-width: var(--input-border-width-focus);
+    box-shadow: 0 0 0 var(--focus-width) var(--color-focus);
+    inset-block-start: calc(var(--input-border-width-focus-offset) * -1);
+    margin-block-end: calc(var(--input-border-width-focus-offset) * -2);
+    padding-inline-start: calc(
+      var(--space-2xs) - var(--input-border-width-focus-offset)
+    );
+  }
+}
+
+/* Input to add new tag  */
+.tag-input__input {
+  background-color: var(--color-background);
+  border: 0;
+  flex: 1;
+  font: var(--font-body);
+  inline-size: 100%;
+  padding-block: var(--space-2xs);
+  padding-inline: var(--space-xs);
+
+  &::placeholder {
+    color: var(--color-on-background);
+    opacity: 0.5;
+  }
+
+  &:disabled {
+    opacity: 0;
+  }
+
+  &:focus-visible {
+    box-shadow: none;
+  }
+}
+
+/* Input to edit existing tag */
+.tag-input__edit {
+  background-color: transparent;
+  border: none;
+  font: var(--font-body);
+  opacity: 0;
+  padding: 0;
+  position: absolute;
+  z-index: -1;
+
+  &:focus {
+    box-shadow: none;
+    outline: none;
+  }
+}
+
+/* Remove button */
+.tag-input__remove-button {
+  align-items: center;
+  background-color: transparent;
+  block-size: 1em;
+  border: none;
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  display: inline-flex;
+  inline-size: 1em;
+  justify-content: center;
+  margin-inline-end: calc(var(--space-2xs) * -1);
+  margin-inline-start: var(--space-2xs);
+  outline: none;
+  padding: var(--space-2xs);
+}
+
+/* Remove button icon */
+.tag-input__remove-icon {
+  block-size: 1em;
+  display: block;
+  inline-size: 1em;
+  stroke: currentcolor;
+}
+
+/* Tag - Editable */
+.tag-input__tag--editable {
+  & .tag-input__edit {
+    opacity: 1;
+    position: static;
+    z-index: initial;
+  }
+
+  & .tag-input__text {
+    opacity: 0;
+    position: absolute;
+    white-space: nowrap;
+    z-index: -1;
+  }
+
+  & .tag-input__remove-button {
+    visibility: hidden;
+  }
+}
+
+/* Tag */
+.tag-input__tag {
+  align-items: center;
+  background-color: var(--color-offset);
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-offset);
+  display: inline-flex;
+  padding-block: calc(var(--space-2xs) / 2);
+  padding-inline: var(--space-xs);
+
+  &:hover {
+    background-color: var(--color-offset-variant);
+  }
+
+  &:hover .tag-input__remove-button:hover {
+    background-color: var(--color-shadow);
+  }
+}
+
+/* Disabled */
+.tag-input--disabled {
+  background: var(--color-offset);
+  border-color: var(--color-offset);
+  color: var(--color-on-offset);
+  gap: 0;
+
+  & .tag-input__tag {
+    background-color: transparent;
+    color: var(--color-on-offset);
+  }
+}
+
+/* Tag - Selected */
+.tag-input__tag--selected {
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
+
+  &:hover {
+    background-color: var(--color-primary-variant);
+  }
+}

package/components/tag-input/template.njk

@@ -0,0 +1,29 @@
+{% from "../input/macro.njk" import input with context %}
+{% set tag = opts.localisation.tag | default(__("tagInput.defaultTag")) %}
+{% set tags = opts.localisation.tags | default(__("tagInput.defaultTags")) %}
+{{ input({
+  field: {
+    element: "tag-input-field",
+    attributes: {
+      placeholder: __("tagInput.placeholder", { tags: tags }),
+      "i18n-tag": "{{TAG}} " + tag + ".",
+      "i18n-edit": __("tagInput.edit", { tag: tag }),
+      "i18n-delete": __("tagInput.delete", { name: "{{TAG}}", tag: tag }),
+      "i18n-added": __("tagInput.added", { name: "{{TAG}}", tag: tag }),
+      "i18n-deleted": __("tagInput.deleted", { name: "{{TAG}}", tag: tag }),
+      "i18n-updated": __("tagInput.updated", { name: "{{TAG}}", tag: tag }),
+      "i18n-selected": __("tagInput.selected", { name: "{{TAG}}", tag: tag }),
+      "i18n-none-selected": __("tagInput.noneSelected", { tags: tags }),
+      "i18n-instruction": __("tagInput.instruction", { list: "{{TAGS}}", tags: tags })
+    }
+  },
+  classes: opts.classes,
+  id: opts.id or opts.name,
+  name: opts.name,
+  value: opts.value,
+  label: opts.label,
+  hint: opts.hint,
+  optional: opts.optional,
+  attributes: opts.attributes,
+  errorMessage: opts.errorMessage
+}) }}

package/components/textarea/index.js

@@ -0,0 +1,298 @@
+import EasyMDE from "easymde";
+
+const paths = {
+  bold: "M17 30c6.1 0 10-3 10-8 0-3.5-2.7-6.3-6.5-6.5V15c3-.4 5-3 5-6 0-4.5-3.5-7-9-7H5v28h12ZM12 7h2c2.5 0 4 1 4 3 0 1.5-1.5 3-4 3h-2V7Zm0 18v-7h2.3c3.1 0 4.7 1.1 4.7 3.4 0 2.5-1.4 3.6-4.8 3.6H12Z",
+  code: "m13.5 8.5-3-3L2 14C.5 15.5.5 16.5 2 18l8.5 8.5 3-3L6 16l7.5-7.5Zm5 0 3-3L30 14c1.5 1.5 1.5 2.5 0 4l-8.5 8.5-3-3L26 16l-7.5-7.5Z",
+  fullscreen:
+    "M4 20H0v10c0 1.1.9 2 2 2h10v-4H4v-8Zm-4-8h4V4h8V0H2a2 2 0 0 0-2 2v10Zm28 16h-8v4h10a2 2 0 0 0 2-2V20h-4v8ZM20 0v4h8v8h4V2a2 2 0 0 0-2-2H20Z",
+  heading: "M27 30h-6V18H11v12H5V2h6v11h10V2h6z",
+  italic: "m21.5 30 .8-4h-6l4-20h6l.7-4H10l-.7 4h6l-4 20h-6l-.8 4z",
+  link: "M14 8v4H8a4 4 0 1 0 0 8h6v4H8A8 8 0 1 1 8 8h6Zm10 0a8 8 0 1 1 0 16h-6v-4h6a4 4 0 1 0 0-8h-6V8h6Zm-2 6v4H10v-4h12Z",
+  "ordered-list":
+    "M10 2h22v4H10Zm0 12h22v4H10Zm0 12h22v4H10ZM0 0h4v8H2V2H0V0Zm5 12h1v2l-3 4h3v2H0v-2l3.3-4H0v-2h5ZM0 26v-2h6v8H0v-2h4v-1H2v-2h2v-1H0Z",
+  quote:
+    "M4 6h7a3 3 0 0 1 3 3v6.6a4 4 0 0 1-1 2.5L6.6 26h-3l3-8H4a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3Zm17 0h7a3 3 0 0 1 3 3v6.6a4 4 0 0 1-1 2.5L23.6 26h-3l3-8H21a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3Z",
+  "side-by-side":
+    "M16 6c7 0 13.5 4 16 10-2.5 6-9 10-16 10S2.5 22 0 16C2.5 10 9 6 16 6Zm0 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm0 3a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z",
+  table:
+    "M32 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2C0 .9.9 0 2 0h28a2 2 0 0 1 2 2Zm-4 2H4v6h24V4ZM14 14H4v5h10v-5Zm0 9H4v5h10v-5Zm14-9H18v5h10v-5Zm0 9H18v5h10v-5Z",
+  undo: "M2 24h-.1A2 2 0 0 1 0 22V9h4v7.5A15 15 0 0 1 32 24h-4a11 11 0 0 0-21.2-4H15v4H2Z",
+  "unordered-list":
+    "M9 2h22v4H9Zm0 12h22v4H9Zm0 12h22v4H9ZM3 7a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z",
+  "upload-image":
+    "M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2C0 .9.9 0 2 0Zm26 24-9-14-7 11-3-4.8L4 24h24Z",
+};
+
+/**
+ * Get SVG icon
+ * @param {string} name - Icon name
+ * @returns {string} SVG
+ */
+const getButtonSvg = (name) => {
+  return `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 32 32" focusable="false" aria-hidden="true">
+  <path fill="currentColor" d="${paths[name]}"/>
+</svg>`;
+};
+
+/**
+ * Floating toolbar button definitions
+ * Maps button name to EasyMDE static action method name
+ */
+const floatingToolbarButtons = [
+  { name: "bold", action: "toggleBold", title: "Bold" },
+  { name: "italic", action: "toggleItalic", title: "Italic" },
+  { name: "heading", action: "toggleHeadingSmaller", title: "Heading" },
+  { name: "code", action: "toggleCodeBlock", title: "Code" },
+  { name: "link", action: "drawLink", title: "Link" },
+];
+
+/**
+ * Create an SVG element from a known icon path (safe — no user input)
+ * @param {string} name - Icon name from paths object
+ * @returns {SVGElement} SVG element
+ */
+const createButtonSvgElement = (name) => {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("height", "1em");
+  svg.setAttribute("width", "1em");
+  svg.setAttribute("viewBox", "0 0 32 32");
+  svg.setAttribute("focusable", "false");
+  svg.setAttribute("aria-hidden", "true");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("fill", "currentColor");
+  path.setAttribute("d", paths[name] || "");
+  svg.append(path);
+  return svg;
+};
+
+export const TextareaFieldComponent = class extends HTMLElement {
+  connectedCallback() {
+    this.editor = this.getAttribute("editor");
+
+    if (this.editor !== "") {
+      return;
+    }
+
+    this.editorEndpoint = this.getAttribute("editor-endpoint");
+    this.editorId = this.getAttribute("editor-id");
+    this.editorImageUpload = this.getAttribute("editor-image-upload");
+    this.editorLocale = this.getAttribute("editor-locale");
+    this.editorStatus = this.getAttribute("editor-status");
+    this.editorToolbar = this.getAttribute("editor-toolbar");
+    this.$label = this.querySelector("label");
+    this.$textarea = this.querySelector("textarea");
+
+    const status =
+      this?.editorStatus === "false"
+        ? false
+        : [
+            ...(this.editorImageUpload === "false" ? [] : ["upload-image"]),
+            "words",
+            "characters",
+            "autosave",
+          ];
+
+    const toolbar =
+      this?.editorToolbar === "false"
+        ? false
+        : [
+            "bold",
+            "italic",
+            "heading",
+            "quote",
+            "ordered-list",
+            "unordered-list",
+            "table",
+            "code",
+            "link",
+            ...(this.editorImageUpload === "false" ? [] : ["upload-image"]),
+            "|",
+            "undo",
+            "side-by-side",
+            "fullscreen",
+          ];
+
+    const editor = new EasyMDE({
+      autoDownloadFontAwesome: false,
+      autosave: {
+        enabled: true,
+        uniqueId: this.editorId || this.$textarea.id,
+        timeFormat: { locale: this.editorLocale || "en" },
+      },
+      blockStyles: {
+        bold: "**",
+        italic: "_",
+      },
+      element: this.$textarea,
+      imageUploadEndpoint: this.editorEndpoint,
+      imageUploadFunction: this.uploadFile,
+      minHeight: "6rem",
+      previewClass: ["editor-preview", "s-flow"],
+      status,
+      // @ts-ignore
+      toolbar,
+      unorderedListStyle: "-",
+    });
+
+    // Restore label behaviour
+    /** @type {HTMLTextAreaElement} */
+    const $codeMirrorTextarea = this.querySelector(".CodeMirror textarea");
+    this.$label.addEventListener("click", () => {
+      $codeMirrorTextarea.focus();
+    });
+
+    // Update character count
+    /** @type {HTMLElement} */
+    const $characters = this.querySelector(".editor-statusbar .characters");
+    editor.codemirror.on("update", () => {
+      if ($characters) {
+        $characters.innerHTML = String(editor.value().length);
+      }
+    });
+
+    const $editorToolbar = this.querySelector(".editor-toolbar");
+    if ($editorToolbar) {
+      // Use custom SVG icons
+      const buttons = $editorToolbar.querySelectorAll("button");
+      for (const button of buttons) {
+        button.innerHTML = getButtonSvg(button.classList[0]);
+      }
+
+      // Get toolbar height to offset editor and preview in fullscreen mode
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          this.style.setProperty(
+            "--toolbar-height",
+            `${entry.contentRect.height}px`,
+          );
+        }
+      });
+
+      resizeObserver.observe($editorToolbar);
+    }
+
+    // Floating selection toolbar
+    this._setupFloatingToolbar(editor);
+  }
+
+  /**
+   * Create and manage floating toolbar that appears on text selection
+   * @param {EasyMDE} editor - EasyMDE instance
+   */
+  _setupFloatingToolbar(editor) {
+    const cm = editor.codemirror;
+
+    // Create floating toolbar element
+    const $floating = document.createElement("div");
+    $floating.className = "editor-floating-toolbar";
+    $floating.setAttribute("role", "toolbar");
+    $floating.setAttribute("aria-label", "Formatting");
+
+    for (const btn of floatingToolbarButtons) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = `floating-btn floating-btn--${btn.name}`;
+      button.title = btn.title;
+      button.append(createButtonSvgElement(btn.name));
+      button.addEventListener("mousedown", (event) => {
+        // Prevent mousedown from stealing focus/clearing selection
+        event.preventDefault();
+        EasyMDE[btn.action](editor);
+      });
+      $floating.append(button);
+    }
+
+    this.append($floating);
+    this._$floatingToolbar = $floating;
+
+    // Track selection changes
+    cm.on("cursorActivity", () => {
+      const selection = cm.getSelection();
+      if (selection && selection.length > 0) {
+        this._showFloatingToolbar(cm);
+      } else {
+        this._hideFloatingToolbar();
+      }
+    });
+
+    // Hide on blur
+    cm.on("blur", () => {
+      setTimeout(() => this._hideFloatingToolbar(), 150);
+    });
+
+    // Reposition on scroll
+    const $cmScroll = this.querySelector(".CodeMirror-scroll");
+    if ($cmScroll) {
+      $cmScroll.addEventListener("scroll", () => {
+        if (this._$floatingToolbar.classList.contains("is-visible")) {
+          const selection = cm.getSelection();
+          if (selection && selection.length > 0) {
+            this._showFloatingToolbar(cm);
+          } else {
+            this._hideFloatingToolbar();
+          }
+        }
+      });
+    }
+  }
+
+  /**
+   * Position and show the floating toolbar above the current selection
+   * @param {object} cm - CodeMirror instance
+   */
+  _showFloatingToolbar(cm) {
+    const $floating = this._$floatingToolbar;
+    const $cmElement = this.querySelector(".CodeMirror");
+    if (!$cmElement) return;
+
+    // Get coordinates of selection start relative to editor
+    const cursor = cm.getCursor("from");
+    const coords = cm.cursorCoords(cursor, "local");
+    const cmRect = $cmElement.getBoundingClientRect();
+    const containerRect = this.getBoundingClientRect();
+
+    // Position above the selection line
+    const top = coords.top + cmRect.top - containerRect.top - 44;
+    const left = coords.left + cmRect.left - containerRect.left;
+
+    // Clamp within container bounds
+    const maxLeft = containerRect.width - ($floating.offsetWidth || 200) - 8;
+    $floating.style.top = `${Math.max(0, top)}px`;
+    $floating.style.left = `${Math.max(8, Math.min(left, maxLeft))}px`;
+    $floating.classList.add("is-visible");
+  }
+
+  /**
+   * Hide the floating toolbar
+   */
+  _hideFloatingToolbar() {
+    if (this._$floatingToolbar) {
+      this._$floatingToolbar.classList.remove("is-visible");
+    }
+  }
+
+  /**
+   * Upload file
+   * @param {object} file - File
+   * @param {Function} onSuccess - Success callback
+   * @param {Function} onError - Error callback
+   * @returns {Promise<string>} - File URL or error message
+   */
+  async uploadFile(file, onSuccess, onError) {
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const endpointResponse = await fetch(this.options.imageUploadEndpoint, {
+        method: "POST",
+        body: formData,
+      });
+
+      return endpointResponse.ok
+        ? onSuccess(endpointResponse.headers.get("location"))
+        : onError(endpointResponse.statusText);
+    } catch (error) {
+      onError(error.message);
+    }
+  }
+};

package/components/textarea/macro.njk

@@ -0,0 +1,3 @@
+{% macro textarea(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/components/textarea/styles.css

@@ -0,0 +1,42 @@
+textarea-field {
+  display: block;
+}
+
+.textarea {
+  appearance: none;
+  background-color: var(--color-background);
+  border: var(--input-border-width) solid var(--color-outline-variant);
+  border-radius: var(--border-radius-small);
+  font: var(--font-body);
+  inline-size: 100%;
+  margin-block-end: var(--input-border-width-focus-offset);
+  padding-block: calc(var(--space-s) / 2);
+  padding-inline: var(--space-s);
+
+  &:focus-visible {
+    border-color: var(--color-on-background);
+    border-width: var(--input-border-width-focus);
+    inset-block-start: calc(var(--input-border-width-focus-offset) * -1);
+    margin-block-end: calc(var(--input-border-width-focus-offset) * -1);
+    padding-inline-start: calc(
+      var(--space-s) - var(--input-border-width-focus-offset)
+    );
+  }
+
+  &:disabled,
+  &[readonly] {
+    background: var(--color-offset);
+    border-color: var(--color-offset);
+    color: var(--color-on-offset);
+    resize: none;
+  }
+}
+
+.textarea--error {
+  border-color: var(--color-error);
+}
+
+.textarea--monospace {
+  font: var(--font-code);
+  font-variant-numeric: tabular-nums;
+}

package/components/textarea/template.njk

@@ -0,0 +1,40 @@
+{% from "../error-message/macro.njk" import errorMessage with context %}
+{% from "../field/macro.njk" import field with context %}
+{% from "../hint/macro.njk" import hint with context %}
+{% from "../label/macro.njk" import label with context %}
+{% set id = opts.id or opts.name | slugify({ decamelize: true }) %}
+{% set describedBy = opts.describedBy if opts.describedBy else "" %}
+{% call field({
+  element: "textarea-field",
+  classes: opts.field.classes,
+  attributes: opts.field.attributes
+}) %}
+  {{- label({
+    for: id,
+    optional: opts.optional === true,
+    text: opts.label
+  }) if opts.label }}
+{% if opts.hint %}
+  {%- set hintId = id + "-hint" %}
+  {%- set describedBy = describedBy + " " + hintId if describedBy else hintId %}
+  {{- hint({
+    id: hintId,
+    text: opts.hint
+  }) }}
+{% endif %}
+{% if opts.errorMessage %}
+  {%- set errorId = id + "-error" %}
+  {%- set describedBy = describedBy + " " + errorId if describedBy else errorId %}
+  {{- errorMessage({
+    id: errorId,
+    classes: opts.errorMessage.classes,
+    attributes: opts.errorMessage.attributes,
+    text: opts.errorMessage.text,
+    visuallyHiddenText: opts.errorMessage.visuallyHiddenText
+  }) }}
+{% endif %}
+<textarea class="{{ classes("textarea", opts) }}" id="{{ id }}" name="{{ opts.name }}" rows="{{ opts.rows or 3 }}"
+  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- if opts.autocomplete %} autocomplete="{{ opts.autocomplete}}"{% endif %}
+  {{- attributes(opts.attributes) }}>{{ opts.value }}</textarea>
+{%- endcall %}

package/components/user/macro.njk

@@ -0,0 +1,3 @@
+{% macro user(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/components/user/styles.css

@@ -0,0 +1,20 @@
+.user {
+  align-items: center;
+  display: flex;
+  gap: var(--space-xs);
+}
+
+.user__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2xs);
+}
+
+.user__name {
+  font: var(--user-name-font, var(--font-label));
+}
+
+.user__meta {
+  color: var(--color-on-offset);
+  font: var(--font-caption);
+}

package/components/user/template.njk

@@ -0,0 +1,15 @@
+{% from "../avatar/macro.njk" import avatar with context %}
+<div class="{{ classes("user", opts) }}">
+  {{ avatar(opts.avatar) if opts.avatar }}
+
+  <div class="user__body">
+  {% if opts.url %}
+    <a class="user__name" href="{{ opts.url }}">{{- opts.name | safe -}}</a>
+  {% else %}
+    <span class="user__name">{{- opts.name | safe -}}</span>
+  {% endif %}
+  {% if opts.meta %}
+    <span class="user__meta">{{ opts.meta | safe }}</span>
+  {% endif %}
+  </div>
+</div>

package/components/warning-text/macro.njk

@@ -0,0 +1,3 @@
+{% macro warningText(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/components/warning-text/styles.css

@@ -0,0 +1,15 @@
+.warning-text {
+  --icon-margin: var(--space-s);
+  --icon-size: 1.5em;
+  align-items: start;
+  background-color: var(--color-offset);
+  border-radius: var(--border-radius-small);
+  display: flex;
+  flex-direction: row;
+  font: var(--font-label);
+  padding: var(--space-m);
+
+  & .warning-text__text {
+    margin-block-start: var(--space-2xs);
+  }
+}

package/components/warning-text/template.njk

@@ -0,0 +1,8 @@
+<div class="{{ classes("warning-text", opts) }}"
+  {{- attributes(opts.attributes) }}>
+  {{ icon(opts.icon | default("warning")) }}
+  <strong class="warning-text__text">
+    {% if not opts.iconFallbackText %}<span class="-!-visually-hidden">{{ opts.iconFallbackText | default(__("warning")) }}</span>{% endif %}
+    {{ opts.text | safe }}
+  </strong>
+</div>

package/components/widget/macro.njk

@@ -0,0 +1,3 @@
+{% macro widget(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/components/widget/styles.css

@@ -0,0 +1,28 @@
+.widget-grid {
+  columns: 20rem auto;
+  gap: var(--space-l);
+}
+
+.widget {
+  --button-font: var(--font-caption);
+  background-color: var(--color-offset);
+  border-radius: var(--border-radius-small);
+  display: inline-block;
+  margin-block-end: var(--space-l);
+  min-inline-size: 100%;
+  padding: var(--space-s);
+}
+
+.widget__header {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-s);
+  justify-content: space-between;
+  padding-block-end: var(--space-s);
+}
+
+.widget__title {
+  --icon-size: 1.25em;
+  font: var(--font-label);
+}