@massimo-cassandro/minimo 1.18.2 → 1.18.3

package/README.md

@@ -40,4 +40,5 @@ The [`dev-tools`](./dev-tools/README.md) directory contains a set of standalone
 
 [Docs](docs)
 
-[Demo](demo-build)
+[Demo](https://massimo-cassandro.github.io/minimo/) (in progress)
+

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

@@ -5,7 +5,37 @@
 // Re-generate with: node build-tokens.mjs --config <path/to/config>
 // -----------------------------------------------------------------------
 {
-  "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": [
@@ -14,7 +44,7 @@
           "offsetY": "0",
           "blur": "12px",
           "spread": "2px",
-          "color": "rgba(0 0 0 / .25)"
+          "color": "rgb(0 0 0 / .25)"
         }
       ]
     },
@@ -34,6 +64,22 @@
         "$value": "1.6rem"
       }
     },
+    "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/design-tokens/utilities/build-tokens-src/config.mjs

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 // build-tokens-src/config.mjs
 // Reads the --config flag from argv, imports the project config file,
 // resolves all paths and exports them for build-tokens.mjs.
@@ -8,7 +9,7 @@
 /* globals process */
 
 import * as path from 'node:path';
-import { pathToFileURL } from 'url';
+import { pathToFileURL } from 'node:url';
 
 // ---------------------------------------------------------------------------
 // Read the --config flag
@@ -31,10 +32,11 @@ export const configDir     = path.dirname(configAbsPath);
 // ---------------------------------------------------------------------------
 // Import the project config
 // ---------------------------------------------------------------------------
-const buildConfig = (await import(pathToFileURL(configAbsPath))).default;
+const buildConfig = (await import(pathToFileURL(configAbsPath).href)).default;
 
 // Helper: resolves a path relative to the config directory.
 // Leaves already-absolute paths untouched.
+/** @param {string} p */
 const resolveFromConfig = (p) => path.resolve(configDir, p);
 
 // ---------------------------------------------------------------------------
@@ -91,6 +93,7 @@ export const penpotExpressions = VALID_EXPR_MODES.includes(buildConfig.penpotExp
 // ---------------------------------------------------------------------------
 const GLOB_CHARS = /[*?{[]/;
 
+/** @param {string} s */
 const resolveSource = (s) => {
   if (path.isAbsolute(s)) {
     // Already absolute: only normalise separators (needed on Windows)

package/design-tokens/utilities/build-tokens-src/formats/penpot.mjs

@@ -32,7 +32,7 @@
 //                         original expression is kept with a warning.
 
 import StyleDictionary from 'style-dictionary';
-import path from 'path';
+import path from 'node:path';
 
 // Disclaimer prepended to every generated file when penpotFormat is 'jsonc'
 const DISCLAIMER = [

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.2",
+  "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/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/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);