@massimo-cassandro/minimo 1.18.1 → 1.18.3

package/design-tokens/utilities/build-tokens-src/platforms.mjs

@@ -6,6 +6,8 @@
 
 import { buildPenpotFiles } from './formats/penpot.mjs';
 
+/** @typedef {import('style-dictionary/types').PlatformConfig} PlatformConfig */
+
 // Transforms applied to the CSS platform
 const CSS_TRANSFORMS = [
   'attribute/cti',
@@ -40,7 +42,7 @@ const PENPOT_TRANSFORMS = [
  *                                                   Collected from sd.allTokens after SD initialisation.
  *                                                   Ignored when penpotDestFile is set.
  * @param {'keep'|'calc'|'resolve'} opts.penpotExpressions  How to handle math expressions in dimension tokens.
- * @returns {object} platforms object ready for Style Dictionary config
+ * @returns {Record<string, PlatformConfig>} platforms object ready for Style Dictionary config
  */
 export const buildPlatforms = ({
   buildPath,
@@ -51,6 +53,7 @@ export const buildPlatforms = ({
   penpotExpressions = 'keep',
   concreteFilePaths = [],
 }) => {
+  /** @type {Record<string, PlatformConfig>} */
   const platforms = {
     css: {
       buildPath: buildPath + '/',

package/design-tokens/utilities/build-tokens.mjs

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+/// <reference types="node" />
 /* eslint-disable no-console */
 
 // build-tokens.mjs
@@ -15,9 +16,9 @@
 import StyleDictionary from 'style-dictionary';
 import * as path from 'node:path';
 import { styleText } from 'node:util';
-import { homedir } from 'os';
+import { homedir } from 'node:os';
 import stylelint from 'stylelint';
-import { pathToFileURL } from 'url';
+import { pathToFileURL } from 'node:url';
 
 // ── 1. Configuration (args + resolved paths) ────────────────────────────────
 import {
@@ -88,7 +89,7 @@ const sd = new StyleDictionary({
 await sd.buildAllPlatforms();
 
 // ── 9. CSS lint ───────────────────────────────────────────────────────────────
-const stylelintConfig = await import(pathToFileURL(stylelintConfigPath)).then(m => m.default);
+const stylelintConfig = await import(pathToFileURL(stylelintConfigPath).href).then(m => m.default);
 
 
 await stylelint.lint({
@@ -98,6 +99,7 @@ await stylelint.lint({
 });
 
 // ── 10. Log ────────────────────────────────────────────────────────────────────
+/** @param {string} p */
 const short = (p) => p.replace(homedir(), '~');
 
 console.log(styleText(['yellow'], `[build-tokens] config file : ${short(configAbsPath)}`));

package/design-tokens/utilities/check-unresolved-custom-props.mjs

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+/// <reference types="node" />
 
 /* eslint-disable no-console */
 
@@ -13,7 +14,7 @@
 
 import * as path from 'node:path';
 import * as fs from 'node:fs';
-import { /* fileURLToPath,  */pathToFileURL } from 'url';
+import { /* fileURLToPath,  */pathToFileURL } from 'node:url';
 // import { dirname } from 'path';
 import { glob } from 'node:fs/promises';
 import { styleText } from 'node:util';
@@ -52,6 +53,7 @@ async function run() {
     const checkdir = path.resolve(configDir, config.dir_to_check);
 
     // Patterns for custom properties to exclude from the unresolved check
+    /** @type {RegExp[]} */
     const exclude = config.exclude_pattern ?? [];
 
     // Collect all .css files in the scan directory, excluding the token file itself
@@ -88,6 +90,7 @@ async function run() {
     // 4. Scan files for unresolved var() references
     // ---------------------------------------------------------------------------
     const usageRegex = /var\(\s*(--[a-z0-9-]+)\s*(,.*?)?\)/g;
+    /** @type {{file: string, line: number, prop: string}[]} */
     const unresolved_props = [];
 
     files.forEach(file => {
@@ -137,7 +140,7 @@ async function run() {
     console.log(styleText(['green'], '**** DONE ****'));
 
   } catch (err) {
-    console.log(styleText(['redBright'], err.stack));
+    console.log(styleText(['redBright'], err instanceof Error ? err.stack ?? err.message : String(err)));
     process.exit(1);
   }
 }

package/dev-tools/starter-kit/webpack.config.mjs

@@ -455,14 +455,14 @@ const config = {
     new webpack.BannerPlugin({
       banner: () => {
 
-        const start_year = 2026,
-          current_year = new Date().toLocaleString('en-UK', { year: 'numeric' }),
-          year = [
+        const start_year = 2026
+          ,current_year = new Date().toLocaleString('en-UK', { year: 'numeric' })
+          ,year = [
             start_year,
             ...(current_year > start_year? [current_year] : [])
-          ].join('-'),
-
-          vers = packageJson.version.split('.').slice(0,-1).join('.');
+          ].join('-')
+          ,vers = packageJson.version.split('.').slice(0,-1).join('.')
+        ;
 
         return (
           '/*!\n' +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.18.1",
+  "version": "1.18.3",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",
@@ -19,13 +19,13 @@
     "access": "public"
   },
   "bin": {
-    "buildTokens": "./design-tokens/utilities/build-tokens.mjs",
-    "checkUnresolvedProps": "./design-tokens/utilities/check-unresolved-custom-props.mjs",
-    "update-version": "./dev-tools/update-version/index.mjs",
-    "upd@m": "./dev-tools/upd@m/index.mjs",
-    "svgIconsTools": "./dev-tools/svg-icons-tools/index.mjs",
-    "create-favicons": "./dev-tools/create-favicons/index.mjs",
-    "starter-kit": "./dev-tools/starter-kit/starter-install.sh"
+    "buildTokens": "design-tokens/utilities/build-tokens.mjs",
+    "checkUnresolvedProps": "design-tokens/utilities/check-unresolved-custom-props.mjs",
+    "update-version": "dev-tools/update-version/index.mjs",
+    "upd@m": "dev-tools/upd@m/index.mjs",
+    "svgIconsTools": "dev-tools/svg-icons-tools/index.mjs",
+    "create-favicons": "dev-tools/create-favicons/index.mjs",
+    "starter-kit": "dev-tools/starter-kit/starter-install.sh"
   },
   "repository": {
     "type": "git",
@@ -41,7 +41,8 @@
     "test": "node --test \"test/**/*.test.mjs\"",
     "test sideEffects tree-shaking": "node ./test/sideEffects-tree-shaking/run-test.mjs",
     "checkJS": "npx tsc --noEmit -p jsconfig.json",
-    "checkJS ./src": "npx tsc --noEmit --allowJs --checkJs --target ES2023 --module ESNext --allowSyntheticDefaultImports --moduleResolution bundler declarations.d.ts src/**/*.js"
+    "checkJS ./src": "npx tsc --noEmit --allowJs --checkJs --target ES2023 --module ESNext --allowSyntheticDefaultImports --moduleResolution bundler declarations.d.ts src/**/*.js",
+    "check outdated": "echo '*** ROOT ***' && npm outdated --omit=peer && echo '*** DEMO ***' && npm --prefix ./demo outdated && echo '*** END ***'"
   },
   "license": "MIT",
   "author": "Massimo Cassandro",
@@ -80,6 +81,7 @@
   "devDependencies": {
     "@massimo-cassandro/eslint-config": "^3.0.11",
     "@massimo-cassandro/stylelint-config": "^2.3.11",
+    "@types/node": "^26.1.1",
     "jsdom": "^29.1.1",
     "style-dictionary": "^5.5.0"
   },
@@ -90,5 +92,10 @@
     "sharp": "^0.35.3",
     "sharp-ico": "^0.1.5",
     "svgo": "^4.0.2"
-  }
+  },
+  "directories": {
+    "doc": "docs",
+    "test": "test"
+  },
+  "keywords": []
 }

package/snippets/flash-messages.html.twig

@@ -0,0 +1,34 @@
+{# TEST: #}
+
+{# {%- for state in ['danger', 'success', 'warning', 'info'] -%}
+  <div class="bg-{{ state }}">
+    <div class="container">
+      <div class="alert alert-{{ state }}">
+        <button type="button" class="btn-close" data-dismiss="alert" aria-label="Chiudi"></button>
+        <h2>{{ state }}</h2>
+        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores vitae in rerum consequatur iure atque dolores beatae doloremque, debitis dolore optio odit, tempore explicabo? Necessitatibus magnam magni repudiandae velit voluptates? Fuga ab vel delectus voluptatem sequi, consectetur amet, quos placeat cupiditate incidunt nobis in labore. Est, aspernatur? Quo, qui voluptatem!</p>
+      </div>
+    </div>
+  </div>
+{%- endfor -%} #}
+
+
+{#
+
+  message labels:
+  - success
+  - notice
+  - error
+  - warning
+
+#}
+
+
+{% for label, messages in app.flashes %}
+  {% for message in messages %}
+    <div class="alert alert-{{ label }}">
+      <button type="button" class="btn-close" data-dismiss="alert" aria-label="Chiudi"></button>
+      {{ message|raw }}
+    </div>
+  {% endfor %}
+{% endfor %}

package/src/components/modal-alert/modal-alert.js

@@ -120,7 +120,9 @@ const defaults = {
  * @property {string} [cancelBtnText] - text for 'cancel' button
  * @property {string} [cancelBtnClass] - alternative class for 'cancel' button. It replaces the default one
  * @property {boolean} [cancelBtnFocus] - true if the cancel button should be focused when the dialog box opens. It has no effect if an extraBtn is set
- *
+ */
+
+/**
  * Renders and opens a modal alert dialog.
  *
  * Backward compatibility: legacy snake_case parameter names (`extra_class`, `heading_class`,

package/src/components/modal-popup/modal-popup.js

@@ -43,6 +43,12 @@ function closeDialog(el) {
  * @param {string | null} [params.contentExtraClassName=null] - Extra class added to the content wrapper.
  * @param {string | null} [params.headerExtraClassName=null] - Extra class added to the header wrapper.
  * @param {string | null} [params.footerExtraClassName=null] - Extra class added to the footer wrapper.
+ * @param {string | number | null} [params.dialogWidth=null] - optional dialog width value - if set, overrides main css custom prop
+ * @param {string | number | null} [params.dialogMinWidth=null] - optional dialog min-width value - if set, overrides main css custom prop
+ * @param {string | number | null} [params.dialogMaxWidth=null] - optional dialog max-width value - if set, overrides main css custom prop
+ * @param {string | number | null} [params.dialogHeight=null] - optional dialog height value - if set, overrides main css custom prop
+ * @param {string | number | null} [params.dialogMinHeight=null] - optional dialog min-height value - if set, overrides main css custom prop
+ * @param {string | number | null} [params.dialogMaxHeight=null] - optional dialog max-height value - if set, overrides main css custom prop
  * @param {string | null} [params.iframeUrl=null] - URL to load in an iframe.
  * @param {string | any[] | null} [params.content=null] - Plain text, HTML, or a domBuilder array.
  * @param {string | null} [params.ajaxUrl=null] - URL for Ajax content loading.
@@ -51,11 +57,10 @@ function closeDialog(el) {
  * @param {boolean} [params.addScrollbarPadding=false] - Adds right padding to compensate for the scrollbar.
  * @param {string | any[] | null} [params.headerContent=null] - Header content: plain text, HTML, or a domBuilder array.
  * @param {string | any[] | null} [params.footerContent=null] - Footer content: plain text, HTML, or a domBuilder array.
+ * @param {HTMLElement | null} [params.triggerElement=null] - Optional element that triggered the popup; when set, `aria-haspopup`, `aria-controls` and `aria-expanded` are managed on it.
  * @returns {HTMLDialogElement} The dialog element.
  */
 
-// TODO attributi arua anche sul triggerm vedi ada-frontend/src/modal-dialog/modal-dialog.js
-
 export function modalPopup({
 
   /** dialog extra class */
@@ -64,6 +69,14 @@ export function modalPopup({
   /** extra classname added to dialogInner */
   contentExtraClassName = null,
 
+  /** optional values for maon custom props overriding */
+  dialogWidth     = null,
+  dialogMinWidth  = null,
+  dialogMaxWidth  = null,
+  dialogHeight    = null,
+  dialogMinHeight = null,
+  dialogMaxHeight = null,
+
   /** iframe url */
   iframeUrl = null,
 
@@ -96,8 +109,10 @@ export function modalPopup({
   /** extra classname added to footer */
   footerExtraClassName = null,
 
-}) {
+  /** element that triggered the popup: if set, `aria-haspopup`, `aria-controls` and `aria-expanded` are managed on it */
+  triggerElement = null,
 
+}) {
 
 
   if(content == null && (ajaxUrl == null || ajaxCallback == null) && iframeUrl == null) {
@@ -118,15 +133,53 @@ export function modalPopup({
     mode = 'iframe';
   }
 
+
+
   // capture for use in the ajax callback closure (ajaxUrl is non-null when mode === 'ajax')
   const safeAjaxUrl = /** @type {string} */ (ajaxUrl);
 
+  // fine tuning custom props
+  /** @type {Record<string, string | number | null>} */
+  const cpropsValues = {
+    dialogWidth,
+    dialogMinWidth,
+    dialogMaxWidth,
+    dialogHeight,
+    dialogMinHeight,
+    dialogMaxHeight,
+  };
+  /** @type {Record<string, string>} */
+  const cpropsMap = {
+    dialogWidth     : '--mpopup-width',
+    dialogMinWidth  : '--mpopup-min-width',
+    dialogMaxWidth  : '--mpopup-max-width',
+    dialogHeight    : '--mpopup-height',
+    dialogMinHeight : '--mpopup-min-height',
+    dialogMaxHeight : '--mpopup-max-height'
+  };
+  /** @type {string[]} */
+  let dialogStyle = [];
+  Object.keys(cpropsMap).forEach(item => {
+    if(cpropsValues[item] != null) {
+      const value = typeof cpropsValues[item] === 'number' ? `${cpropsValues[item]}px` : cpropsValues[item];
+      dialogStyle.push(`${cpropsMap[item]}: ${value}`);
+    }
+  });
+
+  // ids for aria-controls (trigger → dialog) and aria-labelledby (dialog → header), generated only when needed
+  const dialogId = triggerElement != null ? `mpopup-${crypto.randomUUID()}` : null;
+  const headerId = headerContent != null ? `mpopup-header-${crypto.randomUUID()}` : null;
+
   domBuilder([
     {
       tag: 'dialog',
+      id: dialogId,
       className: classnames(styles.dialog, dialogExtraClassName, addScrollbarPadding && styles.scrollBarPadding),
       attrs: {
-        'closedby': 'any'
+        closedby: 'any',
+        'aria-modal': 'true',
+        'aria-labelledby': headerId,
+        style: dialogStyle.length? dialogStyle.join(';') : null
       },
       callback: el => { dialogEl = /** @type {HTMLDialogElement} */ (el); },
       children: [
@@ -142,6 +195,7 @@ export function modalPopup({
           className: styles.contentWrapper,
           children: [
             {
+              id: headerId,
               className: classnames(styles.header, headerExtraClassName),
               condition: headerContent != null,
               content: Array.isArray(headerContent) ? null : headerContent,
@@ -221,6 +275,10 @@ export function modalPopup({
 
     document.body.classList.remove('overflow-hidden');
 
+    if(triggerElement != null) {
+      triggerElement.setAttribute('aria-expanded', 'false');
+    }
+
     if(closeCallback) {
       closeCallback(thisDialog);
     }
@@ -229,6 +287,12 @@ export function modalPopup({
   }, false);
 
 
+  if(triggerElement != null) {
+    triggerElement.setAttribute('aria-haspopup', 'dialog');
+    triggerElement.setAttribute('aria-controls', /** @type {string} */ (dialogId));
+    triggerElement.setAttribute('aria-expanded', 'true');
+  }
+
   document.body.classList.add('overflow-hidden');
   thisDialog.showModal();
   thisDialog.focus();

package/{design-tokens/_src → src/components/modal-popup}/modal-popup.minimo.tokens.mjs

@@ -1,5 +1,38 @@
 export default {
-  'modal-popup': {
+  'mpopup': {
+
+    width: {
+      $type: 'dimension',
+      $value: 'max-content',
+    },
+    'min-width': {
+      $type: 'dimension',
+      $value: '400px',
+    },
+    'max-width': {
+      $type: 'dimension',
+      $value: '98dvw',
+    },
+    height: {
+      $type: 'dimension',
+      $value: 'max-content',
+    },
+    'min-height': {
+      $type: 'dimension',
+      $value: '300px',
+    },
+    'max-height': {
+      $type: 'dimension',
+      $value: '90dvh',
+    },
+
+    background: {
+      color: {
+        $type: 'color',
+        $value: '{body.background.color}',
+      }
+    },
+
     'drop-shadow': {
       $type: 'shadow',
       $value: [
@@ -8,7 +41,7 @@ export default {
           offsetY: '0',
           blur: '12px',
           spread: '2px',
-          color: 'rgba(0 0 0 / .25)'
+          color: 'rgb(0 0 0 / .25)'
         }
       ]
     },
@@ -30,6 +63,22 @@ export default {
       }
 
     },
+    content: {
+      padding: {
+        $type: 'dimension',
+        $value: '{size.base} {size.sm} {size.sm}',
+      },
+      scrollbar: {
+        padding: {
+          i: {
+            end: {
+              $type: 'dimension',
+              $value: '{size.md}',
+            }
+          }
+        }
+      }
+    },
     header: {
       padding: {
         $type: 'dimension',

package/src/components/modal-popup/modal-popup.module.css

@@ -1,12 +1,4 @@
 /*! minimo - Modal Popup */
-/*
-NB:
-`--modal-popup-width` and `--modal-popup-height` are used with a fallback value,
-but can be set to the desired value on a case-by-case basis.
-
-Same for min/max-width and min/max-height
-
-*/
 
 .dialog {
 
@@ -15,25 +7,25 @@ Same for min/max-width and min/max-height
   display: flex;
   flex-direction: column;
 
-  width: var(--_modal-popup-width, max-content);
-  min-width: var(--_modal-popup-min-width, 400px);
-  max-width: var(--_modal-popup-max-width, 98dvw);
-  height: var(--_modal-popup-height, max-content);
-  min-height: var(--_modal-popup-min-height, 300px);
-  max-height: var(--_modal-popup-max-height, 90dvh);
+  width: var(--mpopup-width);
+  min-width: var(--mpopup-min-width);
+  max-width: var(--mpopup-max-width);
+  height: var(--mpopup-height);
+  min-height: var(--mpopup-min-height);
+  max-height: var(--mpopup-max-height);
   padding: 0;
   margin: auto;
   overflow: visible;
-  background-color: var(--body-background-color);
+  background-color: var(--mpopup-background-color);
   border: none;
-  border-radius: var(--modal-popup-border-radius);
-  box-shadow: var(--modal-popup-drop-shadow);
+  border-radius: var(--mpopup-border-radius);
+  box-shadow: var(--mpopup-drop-shadow);
   scale: 0;
   transition: scale .2s ease-out;
 
   &::backdrop {
     overscroll-behavior: contain;
-    background-color: var(--modal-popup-backdrop-color);
+    background-color: var(--mpopup-backdrop-color);
   }
 
   &.on {
@@ -45,8 +37,8 @@ Same for min/max-width and min/max-height
 .closeButton  {
 
   position: absolute;
-  top: calc(-1 * var(--modal-popup-btn-close-size) / 3);
-  right: calc(-1 * var(--modal-popup-btn-close-size) / 3);
+  top: calc(-1 * var(--mpopup-btn-close-size) / 3);
+  right: calc(-1 * var(--mpopup-btn-close-size) / 3);
 }
 
 .contentWrapper {
@@ -65,13 +57,13 @@ Same for min/max-width and min/max-height
   /* width: 100%;
   height: 100%; */
   min-height: 0;
-  padding: var(--size-base) var(--size-sm) var(--size-sm);
+  padding: var(--mpopup-content-padding);
   overflow-x: hidden;
   overflow-y: auto;
   scrollbar-gutter: stable;
 
   .scrollBarPadding & {
-    padding-inline-end: var(--size-md);
+    padding-inline-end: var(--mpopup-content-scrollbar-padding-i-end);
   }
 
 }
@@ -86,18 +78,18 @@ Same for min/max-width and min/max-height
 }
 
 .header {
-  padding: var(--modal-popup-header-padding);
-  font-size: var(--modal-popup-header-font-size);
-  color: var(--modal-popup-header-color);
-  background-color: var(--modal-popup-header-background-color);
-  border-radius: var(--modal-popup-border-radius) var(--modal-popup-border-radius) 0 0;
+  padding: var(--mpopup-header-padding);
+  font-size: var(--mpopup-header-font-size);
+  color: var(--mpopup-header-color);
+  background-color: var(--mpopup-header-background-color);
+  border-radius: var(--mpopup-border-radius) var(--mpopup-border-radius) 0 0;
 }
 .footer {
-  padding: var(--modal-popup-footer-padding);
-  font-size: var(--modal-popup-footer-font-size);
-  color: var(--modal-popup-footer-color);
-  background-color: var(--modal-popup-footer-background-color);
-  border-radius: 0 0 var(--modal-popup-border-radius) var(--modal-popup-border-radius);
+  padding: var(--mpopup-footer-padding);
+  font-size: var(--mpopup-footer-font-size);
+  color: var(--mpopup-footer-color);
+  background-color: var(--mpopup-footer-background-color);
+  border-radius: 0 0 var(--mpopup-border-radius) var(--mpopup-border-radius);
 }
 
 .header, .footer {

package/src/components/unsplash-page/unsplash-page.js

@@ -23,6 +23,7 @@ import * as styles from './unsplash-page.module.css';
  * @returns {Promise<void>}
  */
 
+// TODO add icon file customization and more custom props for message box
 
 export async function unsplashPage(settings) {
 
@@ -235,9 +236,7 @@ export async function unsplashPage(settings) {
                             {
                               className: styles.arrowWrapper,
                               attrs: { role: 'button' },
-                              children: [
-                                { tag: 'img', attrs: { src: arrowIcon, alt: 'Icona freccia' } }
-                              ],
+                              content: arrowIcon,
                               callback: arrowEl => {
                                 arrowEl.addEventListener('click', e => {
                                   const target = /** @type {HTMLElement} */ (e.target);
@@ -269,9 +268,7 @@ export async function unsplashPage(settings) {
                             target: '_blank',
                             rel: 'noopener noreferrer'
                           },
-                          children: [
-                            { tag: 'img', attrs: { src: imageIcon, alt: 'Icona immagine' } }
-                          ]
+                          content: imageIcon
                         }
                       ]
                     }

package/src/components/unsplash-page/unsplash-page.module.css

@@ -181,10 +181,12 @@ html, body {
       }
     }
 
-    img {
+    svg {
       display: block;
       width: 100%;
-      height: 100%;
+      aspect-ratio: 1;
+      background-color: transparent;
+      fill: #000;
     }
   }
 
@@ -248,22 +250,25 @@ html, body {
       color: var(--uspg-icon-fill-color, #333);
       background-color: var(--uspg-icon-box-bg, var(--uspg-link-color, #fc0));
 
-      img {
+      svg {
         opacity: 1;
         filter: none;
       }
     }
   }
-  img {
+  svg {
     display: block;
+    width: 100%;
+    aspect-ratio: 1;
+    background-color: transparent;
     opacity: .6;
-    filter: brightness(0) invert(1);
+    fill: #fff;
   }
 
   @media (hover: hover) {
 
     .show &:hover {
-      img {
+      svg {
         opacity: 1;
       }
     }

package/src/custom-properties.css

@@ -215,18 +215,27 @@
   --malert-text-font-size: var(--font-size-base);
   --malert-warning-bg: var(--status-warning-background-color);
   --malert-warning-fg: var(--status-warning-fg);
-  --modal-popup-backdrop-color: rgb(0 0 0 / .6);
-  --modal-popup-border-radius: var(--size-base);
-  --modal-popup-btn-close-size: 1.6rem;
-  --modal-popup-drop-shadow: 0 0 .75rem .125rem rgb(0 0 0 / .25);
-  --modal-popup-footer-background-color: #ddd;
-  --modal-popup-footer-color: var(--text-color);
-  --modal-popup-footer-font-size: var(--font-size-base);
-  --modal-popup-footer-padding: var(--size-xs);
-  --modal-popup-header-background-color: #ddd;
-  --modal-popup-header-color: var(--text-color);
-  --modal-popup-header-font-size: var(--font-size-xl);
-  --modal-popup-header-padding: var(--size-xs);
+  --mpopup-backdrop-color: rgb(0 0 0 / .6);
+  --mpopup-background-color: var(--body-background-color);
+  --mpopup-border-radius: var(--size-base);
+  --mpopup-btn-close-size: 1.6rem;
+  --mpopup-content-padding: var(--size-base) var(--size-sm) var(--size-sm);
+  --mpopup-content-scrollbar-padding-i-end: var(--size-md);
+  --mpopup-drop-shadow: 0 0 .75rem .125rem rgb(0 0 0 / .25);
+  --mpopup-footer-background-color: #ddd;
+  --mpopup-footer-color: var(--text-color);
+  --mpopup-footer-font-size: var(--font-size-base);
+  --mpopup-footer-padding: var(--size-xs);
+  --mpopup-header-background-color: #ddd;
+  --mpopup-header-color: var(--text-color);
+  --mpopup-header-font-size: var(--font-size-xl);
+  --mpopup-header-padding: var(--size-xs);
+  --mpopup-height: max-content;
+  --mpopup-max-height: 5.625rem;
+  --mpopup-max-width: 6.125rem;
+  --mpopup-min-height: 18.75rem;
+  --mpopup-min-width: 25rem;
+  --mpopup-width: max-content;
   --neutral-100: #666;
   --neutral-100-fg: #fff;
   --overlay-color: rgb(0 0 0 / .6);