@massimo-cassandro/minimo 1.22.0 → 1.22.2

package/design-tokens/_src/switch.minimo.tokens.mjs

@@ -1,53 +1,56 @@
 export default {
-  switch: {
-    width: {
-      $value: '2.25em',
-      $type: 'dimension'
-    },
-
-    height: {
-      $value: '1.25em',
-      $type: 'dimension'
-    },
-
-    thumb: {
-      inset: {
-        $value: '.125em',
+  form: {
+
+    switch: {
+      width: {
+        $value: '2.25em',
         $type: 'dimension'
       },
-    },
 
-    transition: {
-      duration: {
-        $value: '.2s',
-        $type: 'duration'
+      height: {
+        $value: '1.25em',
+        $type: 'dimension'
       },
-    },
 
-    background: {
-      color: {
-        $value: '{neutral.100}',
-        $type: 'color'
-      }
-    },
+      thumb: {
+        inset: {
+          $value: '.125em',
+          $type: 'dimension'
+        },
+      },
 
-    cursor: {
-      background: {
-        color: {
-          $value: '{body.background.color}',
-          $type: 'color'
-        }
+      transition: {
+        duration: {
+          $value: '.2s',
+          $type: 'duration'
+        },
       },
-    },
 
-    checked: {
       background: {
         color: {
-          $value: '{primary.100}',
+          $value: '{neutral.100}',
           $type: 'color'
         }
       },
-    }
 
+      cursor: {
+        background: {
+          color: {
+            $value: '{body.background.color}',
+            $type: 'color'
+          }
+        },
+      },
+
+      checked: {
+        background: {
+          color: {
+            $value: '{primary.100}',
+            $type: 'color'
+          }
+        },
+      }
+
+    }
   }
 };

package/package.json

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

package/src/css/forms/switch.css

@@ -2,22 +2,23 @@
 /* TODO valutare versione con label a sinistra (form-check-reverse) */
 
 /*
-Markup (come bootstrap 5, con l'aggiunta dell'attributo nativo `switch`):
+Markup (same as bootstrap 5, plus the native `switch` attribute):
 
 <div class="form-check form-switch">
   <input class="form-check-input" type="checkbox" role="switch" switch id="my-switch">
-  <label class="form-check-label" for="my-switch">Abilita notifiche</label>
+  <label class="form-label" for="my-switch">Enable notifications</label>
 </div>
 
-L'attributo `switch` (per ora solo WebKit) fa sì che il browser generi un vero
-controllo switch nativo, modellabile con gli pseudo-elementi `::track` e `::thumb`.
-Dove non è supportato (o dove l'attributo è assente) si applica il fallback
-`appearance: none` con la pallina disegnata come background-image.
+The `switch` attribute (WebKit only for now) makes the browser render a real
+native switch control, which can be styled through the `::track` and `::thumb`
+pseudo-elements. Where it is not supported (or where the attribute is missing),
+the `appearance: none` fallback is applied, with the thumb drawn as a
+background-image.
 */
 
 .form-switch {
 
-  --_switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
+  --_switch-thumb-size: calc(var(--form-switch-height) - var(--form-switch-thumb-inset) * 2);
 
   /* annulla il layout con float di `.form-check` */
   display: flex;
@@ -28,29 +29,30 @@ Dove non è supportato (o dove l'attributo è assente) si applica il fallback
   .form-check-input {
     float: none;
     flex: none;
-    width: var(--switch-width);
-    height: var(--switch-height);
+    width: var(--form-switch-width);
+    height: var(--form-switch-height);
     margin: 0;
     appearance: none;
     cursor: pointer;
-    background-color: var(--switch-background-color);
-    background-image: radial-gradient(
-      circle closest-side,
-      var(--switch-cursor-background-color) 98%,
-      transparent
-    );
+    background-color: var(--form-switch-background-color);
+    background-image:
+      radial-gradient(
+        circle closest-side,
+        var(--form-switch-cursor-background-color) 98%,
+        transparent
+      );
     background-repeat: no-repeat;
-    background-position: var(--switch-thumb-inset) center;
+    background-position: var(--form-switch-thumb-inset) center;
     background-size: var(--_switch-thumb-size) var(--_switch-thumb-size);
     border: none;
-    border-radius: var(--switch-height);
+    border-radius: var(--form-switch-height);
 
     /* annulla lo `scale` applicato a tutti i checkbox */
     scale: none;
 
     &:checked {
-      background-color: var(--switch-checked-background-color);
-      background-position: calc(100% - var(--switch-thumb-inset)) center;
+      background-color: var(--form-switch-checked-background-color);
+      background-position: calc(100% - var(--form-switch-thumb-inset)) center;
     }
 
     &:focus {
@@ -63,7 +65,7 @@ Dove non è supportato (o dove l'attributo è assente) si applica il fallback
     }
   }
 
-  .form-check-label {
+  .form-label {
     cursor: pointer;
     user-select: none;
   }
@@ -71,7 +73,7 @@ Dove non è supportato (o dove l'attributo è assente) si applica il fallback
   &:has(.form-check-input:disabled) {
     opacity: var(--form-control-disabled-opacity);
 
-    .form-check-input, .form-check-label {
+    .form-check-input, .form-label {
       cursor: not-allowed;
     }
   }
@@ -80,8 +82,8 @@ Dove non è supportato (o dove l'attributo è assente) si applica il fallback
 @media (prefers-reduced-motion: no-preference) {
   .form-switch .form-check-input {
     transition:
-      background-color var(--switch-transition-duration) linear,
-      background-position var(--switch-transition-duration) ease-in-out;
+      background-color var(--form-switch-transition-duration) linear,
+      background-position var(--form-switch-transition-duration) ease-in-out;
   }
 }
 
@@ -95,15 +97,15 @@ Dove non è supportato (o dove l'attributo è assente) si applica il fallback
     border-radius: 0; /* gestito da ::track */
 
     &::track {
-      background-color: var(--switch-background-color);
+      background-color: var(--form-switch-background-color);
     }
 
     &::thumb {
-      background-color: var(--switch-cursor-background-color);
+      background-color: var(--form-switch-cursor-background-color);
     }
 
     &:checked::track {
-      background-color: var(--switch-checked-background-color);
+      background-color: var(--form-switch-checked-background-color);
     }
   }
 }

package/src/custom-properties.css

@@ -193,6 +193,13 @@
   --form-label-font-weight: var(--font-weight-semibold);
   --form-legend-background-color: transparent;
   --form-legend-color: var(--text-color);
+  --form-switch-background-color: var(--neutral-100);
+  --form-switch-checked-background-color: var(--primary-100);
+  --form-switch-cursor-background-color: var(--body-background-color);
+  --form-switch-height: 1.25em;
+  --form-switch-thumb-inset: .125em;
+  --form-switch-transition-duration: .2s;
+  --form-switch-width: 2.25em;
   --form-user-info-color: var(--text-muted);
   --form-user-info-font-size: var(--font-size-xs);
   --form-validation-outline-offset: -3px;
@@ -380,14 +387,6 @@
   --status-warning-color: #fc0;
   --status-warning-fg: #4f2900;
 
-  --switch-background-color: var(--neutral-100);
-  --switch-checked-background-color: var(--primary-100);
-  --switch-cursor-background-color: var(--body-background-color);
-  --switch-height: 1.25em;
-  --switch-thumb-inset: .125em;
-  --switch-transition-duration: .2s;
-  --switch-width: 2.25em;
-
   --table-body-border-width: 1px;
   --table-body-tr-alt-bg-color: #efefef;
   --table-body-tr-hover-bg-color: #cbcbcb;

package/src/utilities/dom-builder-helpers/form-tags.js

@@ -132,12 +132,21 @@ export function buildSelect({
 
   id = id || randomId();
 
-  // normalizing option as an array
-  if(options && !Array.isArray(options)) {
-    options = Object.entries(options);
+  // normalizing options as an array of [value, text] pairs
+  /** @type {Array<[string|number, string]>} */
+  let optionsList = [];
 
-  } else if(options && !Array.isArray(options[0])) {
-    options =  options.map(o => Object.values(o));
+  if(options) {
+    if(!Array.isArray(options)) {
+      optionsList = /** @type {Array<[string|number, string]>} */ (Object.entries(options));
+
+    } else if(!Array.isArray(options[0])) {
+      optionsList = /** @type {Array<Record<string, string>>} */ (options)
+        .map(o => /** @type {[string|number, string]} */ (Object.values(o)));
+
+    } else {
+      optionsList = /** @type {Array<[string|number, string]>} */ (options);
+    }
   }
 
 
@@ -157,18 +166,15 @@ export function buildSelect({
         },
         children: [
           ...(addEmptyOption? ['option[value:]'] : []),
-          ...(options
-            ? options.map(([value, text]) => ({
-              tag: 'option',
-              attrs: {
-                value: value,
-                // eslint-disable-next-line eqeqeq
-                selected: value == selectedValue
-              },
-              content: text
-            }))
-            : []
-          )
+          ...optionsList.map(([value, text]) => ({
+            tag: 'option',
+            attrs: {
+              value: value,
+              // eslint-disable-next-line eqeqeq
+              selected: value == selectedValue
+            },
+            content: text
+          }))
         ],
         callback: callback
       }
@@ -186,6 +192,8 @@ export function buildSelect({
  * @param {string | null} args.id - `id` attribute.
  * @param {string | number | null} [args.value=1] - checkbox `value` attribute.
  * @param {boolean} [args.checked=false] - checkbox `checked` attribute.
+ * @param {boolean} [args.switch=false] - When true, the checkbox is rendered as a switch
+ *    (`.form-switch` wrapper, `role="switch"` and the native `switch` attribute).
  * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper (used only when `addFormGroup` is true).
  * @param {boolean} [args.addFormGroup=true] - When true, wraps the checkbox in a `.form-group` element.
  * @param {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
@@ -200,6 +208,7 @@ export function buildCheckbox({
   id = null,
   value = 1,
   checked = false,
+  switch: isSwitch = false,
   wrapperClass = null,
   addFormGroup = true,
   condition = true,
@@ -213,17 +222,24 @@ export function buildCheckbox({
   }
 
   /*
-  <div class="form-group">
+  <div class="form-group"> <- optional
     <div class="form-check">
       <input type="checkbox" id="..." name="..." class="form-check-input" value="1">
       <label for="..." class="form-label">...</label>
     </div>
   </div>
+
+  <div class="form-group"> <- optional
+    <div class="form-check form-switch">
+      <input class="form-check-input" type="checkbox" role="switch" switch id="my-switch">
+      <label class="form-label" for="my-switch">My label</label>
+    </div>
+  </div>
   */
   id = id || randomId();
 
   const tag = {
-    className: classnames('form-check', !addFormGroup && !help && wrapperClass),
+    className: classnames('form-check', isSwitch && 'form-switch', !addFormGroup && !help && wrapperClass),
     children: [
       {
         tag: 'input',
@@ -234,7 +250,9 @@ export function buildCheckbox({
           type: 'checkbox',
           value: value,
           name: name,
-          checked: checked
+          checked: checked,
+          // native switch control (WebKit only for now), with the css fallback elsewhere
+          ...(isSwitch? {role: 'switch', switch: ''} : {})
         },
         callback: callback
       },

package/types/classes.d.ts

@@ -59,7 +59,6 @@ export type MinimoClass =
   | 'font-semibold'
   | 'form-check'
   | 'form-check-input'
-  | 'form-check-label'
   | 'form-check-top-label'
   | 'form-collection'
   | 'form-collection-fset'