@massimo-cassandro/minimo 1.20.1 → 1.20.3

package/design-tokens/tokens/src/components/modal-alert/modal-alert.minimo.tokens.jsonc

@@ -128,6 +128,86 @@
       "fg": {
         "$type": "color",
         "$value": "#fff"
+      },
+      "btn": {
+        "bg": {
+          "$type": "color",
+          "$value": "{malert.confirm.bg}"
+        },
+        "fg": {
+          "$type": "color",
+          "$value": "{malert.confirm.fg}"
+        },
+        "border": {
+          "color": {
+            "$type": "color",
+            "$value": "{malert.confirm.bg}"
+          }
+        },
+        "focus": {
+          "outline": {
+            "color": {
+              "$type": "color",
+              "$value": "color-mix(in srgb, {malert.confirm.bg} 60%, transparent)"
+            },
+            "width": {
+              "$type": "dimension",
+              "$value": "{btn.focus.outline.width}"
+            }
+          }
+        },
+        "hover": {
+          "bg": {
+            "$type": "color",
+            "$value": "{malert.confirm.fg}"
+          },
+          "fg": {
+            "$type": "color",
+            "$value": "{malert.confirm.bg}"
+          },
+          "border": {
+            "color": {
+              "$type": "color",
+              "$value": "{malert.confirm.btn.hover.fg}"
+            }
+          }
+        },
+        "active": {
+          "bg": {
+            "$type": "color",
+            "$value": "color-mix(in srgb, {malert.confirm.bg} 60%, #000)"
+          },
+          "fg": {
+            "$type": "color",
+            "$value": "{malert.confirm.fg}"
+          },
+          "border": {
+            "color": {
+              "$type": "color",
+              "$value": "{malert.confirm.btn.active.bg}"
+            }
+          }
+        },
+        "hollow": {
+          "bg": {
+            "$type": "color",
+            "$value": "{malert.confirm.fg}"
+          },
+          "fg": {
+            "$type": "color",
+            "$value": "{malert.confirm.bg}"
+          },
+          "hover": {
+            "bg": {
+              "$type": "color",
+              "$value": "{malert.confirm.bg}"
+            },
+            "fg": {
+              "$type": "color",
+              "$value": "{malert.confirm.fg}"
+            }
+          }
+        }
       }
     },
     "heading": {

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

@@ -63,14 +63,19 @@ async function run() {
     /** @type {RegExp[]} */
     const exclude = config.excludePattern ?? [];
 
-    // Collect all .css files in the scan directory, excluding the token file itself
-    // and any file under a directory whose name starts with "TODO" (work-in-progress folders)
+    // Collect all .css files in the scan directory, excluding any file under a
+    // directory whose name starts with "TODO" (work-in-progress folders).
+    // The token file itself (custom_prop_filename) is intentionally included:
+    // custom properties are often composed from other custom properties
+    // (e.g. `--malert-box-shadow: ... var(--malert-box-shadow-color) ...`)
+    // and those internal var() references must count as usage, otherwise the
+    // referenced property is wrongly reported as unused.
     const files = [];
     for await (const entry of glob(path.join(checkdir, '/**/*.css'))) {
       const relDirSegments = path.relative(checkdir, path.dirname(entry)).split(path.sep);
       const isInTodoDir    = relDirSegments.some(segment => /^todo/i.test(segment));
 
-      if (!entry.endsWith(custom_prop_filename) && !isInTodoDir) {
+      if (!isInTodoDir) {
         files.push(entry);
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.20.1",
+  "version": "1.20.3",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

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

@@ -87,8 +87,8 @@ const defaults = {
     okBtnText: 'OK',
     cancelBtnText: 'Annulla',
     cancelBtnFocus: true, // false to give focus to the ok button
-    okBtnClass: 'btn btn-primary',
-    cancelBtnClass: 'btn btn-primary btn-hollow',
+    okBtnClass: classnames('btn', styles.btnConfirm),
+    cancelBtnClass: classnames('btn', styles.btnConfirm, styles.btnHollow),
     icon: confirmIcon,
     altIcon: warningIcon,
     useAltIcon: false // when true, uses altIcon (warning) instead of the default confirm icon
@@ -130,7 +130,32 @@ const defaults = {
  * `ok_btn_class`, `cancel_btn_text`, `cancel_btn_class`, `cancel_focus`, `use_warning_icon`)
  * are still accepted and internally mapped to their camelCase equivalent, see `legacyParamNames`.
  *
- * @param {ModalAlertParams} params - Dialog parameters (merged with defaults by type).
+ * The base param type below is intentionally `object` (not `ModalAlertParams`): TypeScript only
+ * expands dotted `@param` properties (needed for editor IntelliSense to list each property) when
+ * the base type is the literal `object`; a named typedef there would error (TS8032).
+ * @param {object} [params] - Dialog parameters (merged with defaults by type).
+ * @param {string} [params.type] - Dialog type: `success`, `error`, `warning`, `info`, or `confirm`.
+ * @param {string | null} [params.extraClass] - optional dialog extra class
+ * @param {(() => void) | null} [params.onOpen] - optional callback on dialog open
+ * @param {(() => void) | null} [params.onClose] - optional callback on dialog close
+ * @param {boolean} [params.animation] - if true, dialog will be animated
+ * @param {boolean} [params.showMarks] - if true, mark icons will be showed
+ * @param {((arg?: *) => void) | null} [params.callback] - optional callback dialog after user choice
+ * @param {number | null} [params.timer] - timer for autoclose (ms). `null` for disable
+ * @param {string | null} [params.title] - title text
+ * @param {string | null} [params.mes] - text message (plain or html)
+ * @param {string | null} [params.headingClass] - optional extra class for heading
+ * @param {string | null} [params.textClass] - optional extra class for text
+ * @param {string | null} [params.icon] - Icon markup used for the dialog; defaults to the type's icon.
+ * @param {string | null} [params.altIcon] - Alternate icon markup, used instead of `icon` when `useAltIcon` is `true`.
+ * @param {boolean} [params.useAltIcon] - When `true`, uses `altIcon` instead of `icon` (e.g. the `danger` icon on a `warning` dialog, or the `warning` icon on a `confirm` dialog).
+ * @param {DomBuilderItem | null} [params.extraBtn] - optional extra button (as domBuilder object)
+ * @param {boolean} [params.extraBtnFocus] - true if the extra button should be focused when the dialog box opens (overrides any focus assigned to the 'cancel' button)
+ * @param {string} [params.okBtnText] - text for 'ok' button
+ * @param {string} [params.okBtnClass] - alternative class for 'ok' button. It replaces the default one
+ * @param {string} [params.cancelBtnText] - text for 'cancel' button
+ * @param {string} [params.cancelBtnClass] - alternative class for 'cancel' button. It replaces the default one
+ * @param {boolean} [params.cancelBtnFocus] - true if the cancel button should be focused when the dialog box opens. It has no effect if an extraBtn is set
  * @returns {Promise<string | boolean | undefined>} Resolves when the dialog closes. If the
  *   dismissing button has a `data-malert-result` attribute, that string is used; otherwise, for
  *   `confirm` dialogs, resolves `true`/`false` for the OK/Cancel button; otherwise `undefined`.

package/src/components/modal-alert/modal-alert.minimo.tokens.mjs

@@ -116,6 +116,7 @@ export default {
         $value: '{status.danger.fg}'
       }
     },
+
     confirm: {
       bg: {
         $type: 'color',
@@ -124,7 +125,99 @@ export default {
       fg: {
         $type: 'color',
         $value: '#fff'
-      }
+      },
+
+      // =>> settings for confirm button
+      btn: {
+        bg: {
+          $value: '{malert.confirm.bg}',
+          $type: 'color'
+        },
+        fg: {
+          $value: '{malert.confirm.fg}',
+          $type: 'color'
+        },
+
+        border: {
+          color: {
+            $value: '{malert.confirm.bg}',
+            $type: 'color'
+          }
+        },
+
+        focus: {
+          outline: {
+            color: {
+              $value: 'color-mix(in srgb, {malert.confirm.bg} 60%, transparent)',
+              $type: 'color'
+            },
+            width: {
+              $type: 'dimension',
+              $value: '{btn.focus.outline.width}'
+            }
+          }
+        },
+
+        hover: {
+          bg: {
+            $value: '{malert.confirm.fg}',
+            $type: 'color'
+          },
+          fg: {
+            $value: '{malert.confirm.bg}',
+            $type: 'color'
+          },
+
+          border: {
+            color: {
+              $value: '{malert.confirm.btn.hover.fg}',
+              $type: 'color'
+            }
+          }
+        },
+
+        active: {
+          bg: {
+            $value: 'color-mix(in srgb, {malert.confirm.bg} 60%, #000)',
+            $type: 'color'
+          },
+          fg: {
+            $value: '{malert.confirm.fg}',
+            $type: 'color'
+          },
+
+          border: {
+            color: {
+              $value: '{malert.confirm.btn.active.bg}',
+              $type: 'color'
+            }
+          },
+        },
+
+        hollow: {
+          bg: {
+            $value: '{malert.confirm.fg}',
+            $type: 'color'
+          },
+          fg: {
+            $value: '{malert.confirm.bg}',
+            $type: 'color'
+          },
+
+          hover: {
+            bg: {
+              $value: '{malert.confirm.bg}',
+              $type: 'color'
+            },
+            fg: {
+              $value: '{malert.confirm.fg}',
+              $type: 'color'
+            }
+
+          },
+        } // end hollow
+      } // end confirm button
+
     },
 
     heading: {
@@ -158,7 +251,7 @@ export default {
           $value: '{font.size.base}'
         },
       }
-    }
+    },
   }
 };
 

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

@@ -146,3 +146,54 @@
     transform: translateY(0);
   }
 }
+
+
+/* confirm button */
+
+
+.btnConfirm {
+  --_button-bg-color: var(--malert-confirm-btn-bg);
+  --_button-fg-color: var(--malert-confirm-btn-fg);
+  --_button-border-color: var(--malert-confirm-btn-border-color);
+
+  @media (hover: hover) {
+    &:hover {
+      --_button-bg-color: var(--malert-confirm-btn-hover-bg);
+      --_button-fg-color: var(--malert-confirm-btn-hover-fg);
+      --_button-border-color: var(--malert-confirm-btn-hover-border-color);
+    }
+  }
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible, &:active {
+    outline: var(--malert-confirm-btn-focus-outline-width) solid var(--malert-confirm-btn-focus-outline-color);
+    /* outline-offset: 4px; */
+  }
+
+  &:active {
+    --_button-bg-color: var(--malert-confirm-btn-active-bg);
+    --_button-fg-color: var(--malert-confirm-btn-active-fg);
+    --_button-border-color: var(--malert-confirm-btn-active-border-color);
+  }
+
+
+  &.btnHollow {
+
+    --_button-bg-color: var(--malert-confirm-btn-hollow-bg);
+    --_button-fg-color: var(--malert-confirm-btn-hollow-fg);
+    /* --_button-border-color: var(--__btn-o-primary-border-color); */
+
+
+    @media (hover: hover) {
+      &:hover {
+        --_button-bg-color: var(--malert-confirm-btn-hollow-hover-bg);
+        --_button-fg-color: var(--malert-confirm-btn-hollow-hover-fg);
+        /* --_button-border-color: var(--__btn-o-primary-hover-border-color); */
+      }
+    }
+
+  }
+
+} /* end btnConfirm */

package/src/components/slide-up-down-toggle/slide-up-down-toggle.js

@@ -55,6 +55,11 @@ import * as styles from './slide-up-down-toggle.module.css';
  *                                               if omitted the CSS value is used
  *   callback {() => void|null}  default null  — invoked after the transition ends
  *
+ * Kept here for reference: the three exported functions below re-declare these same properties
+ * as dotted `@param` entries with base type `object` instead of `SlideOptions`, since TypeScript
+ * only expands dotted `@param` properties (needed for editor IntelliSense to list each property)
+ * when the base type is the literal `object`; a named typedef there would error (TS8032).
+ *
  * ─── Return value ─────────────────────────────────────────────────────────────
  *
  * All three functions return a Promise<void> that resolves when the transition ends.
@@ -194,7 +199,10 @@ export function disposeSliding(target) {
  * CSS animates height to 0, then snaps display to none.
  *
  * @param {HTMLElement} target
- * @param {SlideOptions} [options]
+ * @param {object} [options]
+ * @param {boolean} [options.wrap=true] - auto-generates a wrapper `<div class="slide">` around `target` (see module docs above); when `false`, the `.slide` class is added directly to `target`.
+ * @param {number} [options.duration] - overrides the `--slide-duration` CSS var (ms); if omitted, the CSS value is used.
+ * @param {(() => void) | null} [options.callback] - invoked after the transition ends.
  * @returns {Promise<void>}
  */
 export async function slideUp(target, options = {}) {
@@ -210,7 +218,10 @@ export async function slideUp(target, options = {}) {
  * display snaps to block, then CSS animates height from 0 (via @starting-style) to auto.
  *
  * @param {HTMLElement} target
- * @param {SlideOptions} [options]
+ * @param {object} [options]
+ * @param {boolean} [options.wrap=true] - auto-generates a wrapper `<div class="slide">` around `target` (see module docs above); when `false`, the `.slide` class is added directly to `target`.
+ * @param {number} [options.duration] - overrides the `--slide-duration` CSS var (ms); if omitted, the CSS value is used.
+ * @param {(() => void) | null} [options.callback] - invoked after the transition ends.
  * @returns {Promise<void>}
  */
 export async function slideDown(target, options = {}) {
@@ -226,7 +237,10 @@ export async function slideDown(target, options = {}) {
  * Reads the current data-slide value on the slide element to decide direction.
  *
  * @param {HTMLElement} target
- * @param {SlideOptions} [options]
+ * @param {object} [options]
+ * @param {boolean} [options.wrap=true] - auto-generates a wrapper `<div class="slide">` around `target` (see module docs above); when `false`, the `.slide` class is added directly to `target`.
+ * @param {number} [options.duration] - overrides the `--slide-duration` CSS var (ms); if omitted, the CSS value is used.
+ * @param {(() => void) | null} [options.callback] - invoked after the transition ends.
  * @returns {Promise<void>}
  */
 export async function slideToggle(target, options = {}) {

package/src/custom-properties.css

@@ -231,6 +231,21 @@
   --malert-box-shadow: 0 .025rem .25rem 0 color-mix(in srgb, var(--malert-box-shadow-color) 15%, transparent), -.01875rem .1875rem .20625rem -.03125rem color-mix(in srgb, var(--malert-box-shadow-color) 15%, transparent), -.03125rem .38125rem .4125rem -.05625rem color-mix(in srgb, var(--malert-box-shadow-color) 14%, transparent), -.05625rem .7rem .75625rem -.0875rem color-mix(in srgb, var(--malert-box-shadow-color) 14%, transparent), -.1rem 1.21875rem 1.31875rem -.11875rem color-mix(in srgb, var(--malert-box-shadow-color) 13%, transparent), -.16875rem 2.04375rem 2.2125rem -.14375rem color-mix(in srgb, var(--malert-box-shadow-color) 13%, transparent), -.26875rem 3.25rem 3.525rem -.175rem color-mix(in srgb, var(--malert-box-shadow-color) 12%, transparent);
   --malert-box-shadow-color: #000;
   --malert-confirm-bg: hsl(277deg 72% 45%);
+  --malert-confirm-btn-active-bg: color-mix(in srgb, var(--malert-confirm-bg) 60%, #000);
+  --malert-confirm-btn-active-border-color: var(--malert-confirm-btn-active-bg);
+  --malert-confirm-btn-active-fg: var(--malert-confirm-fg);
+  --malert-confirm-btn-bg: var(--malert-confirm-bg);
+  --malert-confirm-btn-border-color: var(--malert-confirm-bg);
+  --malert-confirm-btn-fg: var(--malert-confirm-fg);
+  --malert-confirm-btn-focus-outline-color: color-mix(in srgb, var(--malert-confirm-bg) 60%, transparent);
+  --malert-confirm-btn-focus-outline-width: var(--btn-focus-outline-width);
+  --malert-confirm-btn-hollow-bg: var(--malert-confirm-fg);
+  --malert-confirm-btn-hollow-fg: var(--malert-confirm-bg);
+  --malert-confirm-btn-hollow-hover-bg: var(--malert-confirm-bg);
+  --malert-confirm-btn-hollow-hover-fg: var(--malert-confirm-fg);
+  --malert-confirm-btn-hover-bg: var(--malert-confirm-fg);
+  --malert-confirm-btn-hover-border-color: var(--malert-confirm-btn-hover-fg);
+  --malert-confirm-btn-hover-fg: var(--malert-confirm-bg);
   --malert-confirm-fg: #fff;
   --malert-error-bg: var(--status-danger-background-color);
   --malert-error-fg: var(--status-danger-fg);

package/src/utilities/relative-date.js

@@ -23,8 +23,22 @@
  * Returns an HTML `<time>` element string displaying the date in relative or absolute form.
  * Relative dates are auto-refreshed every minute via a shared `setInterval`.
  *
+ * The base param type below is intentionally `object` (not `RelativeDateOptions`): TypeScript only
+ * expands dotted `@param` properties (needed for editor IntelliSense to list each property) when
+ * the base type is the literal `object`; a named typedef there would error (TS8032).
  * @param {Date | string} date - Date to display (Date object or ISO string)
- * @param {RelativeDateOptions} [options={}]
+ * @param {object} [options={}]
+ * @param {boolean} [options.useRelativeTime=true] - Show times near the date as "in xx minutes" (before) or "now" (within `relativeTimeMinutesAfter`)
+ * @param {string} [options.nowString] - String to display when the date is right now
+ * @param {number} [options.relativeTimeMinutesBefore] - Minutes before the date within which to show "in xx minutes"
+ * @param {number} [options.relativeTimeMinutesAfter] - Minutes after the date within which to show the now string
+ * @param {boolean} [options.relativeTimeShowTime] - Show the actual time alongside relative date labels
+ * @param {string} [options.relativeTimeShowTimeMarkup] - HTML markup for the time portion; `@@time@@` is replaced with the localized time string
+ * @param {boolean} [options.firstLetterUpperCase] - Capitalize the first letter of the returned string
+ * @param {Intl.DateTimeFormatOptions} [options.dateFormat] - Format for non-relative dates (beyond day after tomorrow)
+ * @param {Intl.DateTimeFormatOptions} [options.timeFormat] - Format for time displayed in relative date labels
+ * @param {string[]} [options.relativeStrings] - Labels for yesterday / today / tomorrow / day after tomorrow (in chronological order)
+ * @param {string} [options.locale] - Locale string for date/time formatting
  * @returns {string} HTML `<time>` element as a string
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat