@massimo-cassandro/minimo 1.21.9 → 1.22.0

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

@@ -1,5 +1,29 @@
 export default {
   switch: {
+    width: {
+      $value: '2.25em',
+      $type: 'dimension'
+    },
+
+    height: {
+      $value: '1.25em',
+      $type: 'dimension'
+    },
+
+    thumb: {
+      inset: {
+        $value: '.125em',
+        $type: 'dimension'
+      },
+    },
+
+    transition: {
+      duration: {
+        $value: '.2s',
+        $type: 'duration'
+      },
+    },
+
     background: {
       color: {
         $value: '{neutral.100}',

package/dev-tools/starter-kit/starter-install.sh

@@ -141,21 +141,22 @@ safe_cat "${TEMPLATES_DIR}/_prettierrc"                .prettierrc new
 safe_cat "${TEMPLATES_DIR}/_root_htaccess"             _root_htaccess
 safe_cat "${TEMPLATES_DIR}/_root_robots.txt"           _root_robots.txt
 
-# jsconfig.json: va installato ACCANTO a webpack.config.mjs (che legge gli alias
-# con `path.resolve(__dirname, './jsconfig.json')`), non necessariamente in root.
-# Il placeholder __NODE_MODULES__ viene risolto in base alla posizione scelta.
+# jsconfig.json: sta SEMPRE nella root del progetto (è anche il file di
+# riferimento di vscode). I suoi path sono quindi relativi alla root: il
+# placeholder __FRONTEND__ viene risolto in base alla posizione scelta.
+# NB: webpack.config.mjs lo cerca in root anche quando è in una sottodirectory
 if [ "$FRONTEND_INSTALL_PATH" = "." ]; then
-  NODE_MODULES_REL="./node_modules"
+  FRONTEND_REL="./"
 else
-  NODE_MODULES_REL="../node_modules"
+  FRONTEND_REL="./frontend/"
 fi
 JSCONFIG_TPL="${TEMPLATES_DIR}/jsconfig.json"
 if [ ! -f "$JSCONFIG_TPL" ]; then
   echo -e "${RED}Sorgente mancante: ${JSCONFIG_TPL}${NC}"
 else
   JSCONFIG_TMP="$(mktemp)"
-  sed "s|__NODE_MODULES__|${NODE_MODULES_REL}|g" "$JSCONFIG_TPL" >| "$JSCONFIG_TMP"
-  safe_cat "$JSCONFIG_TMP" "${FRONTEND_INSTALL_PATH}/jsconfig.json" new
+  sed "s|__FRONTEND__|${FRONTEND_REL}|g" "$JSCONFIG_TPL" >| "$JSCONFIG_TMP"
+  safe_cat "$JSCONFIG_TMP" jsconfig.json new
   rm -f "$JSCONFIG_TMP"
 fi
 
@@ -247,17 +248,34 @@ mkdir -p \
 # template html di webpack (HtmlWebpackPlugin: `./src/tpl/index.ejs`)
 safe_cat "${WEBPACK_SOURCE_DIR}/webpack-template.ejs" "${FRONTEND_INSTALL_PATH}/src/tpl/index.ejs"
 
-# css di partenza del progetto: solo i file destinati a essere personalizzati.
-# minimo.css NON viene copiato: i moduli css del framework vanno importati dal
-# pacchetto (`@import '@minimo/css/...'`, vedi entry-tpl.css)
-MINIMO_ROOT_CSS_DIR="${BASE_URL}/../../src"
-for FILE in custom-properties.css custom-media.css fonts.css; do
-  safe_cat "${MINIMO_ROOT_CSS_DIR}/${FILE}" "${FRONTEND_INSTALL_PATH}/src/css/${FILE}"
+# Sorgenti di minimo da copiare nel progetto: si usa il pacchetto appena
+# installato in node_modules (stessa versione che userà il progetto) e, in
+# fallback, la dir da cui è lanciato questo script (repo o pacchetto estratto)
+MINIMO_PKG_DIR=""
+for CANDIDATE in "./node_modules/@massimo-cassandro/minimo" "${BASE_URL}/../.."; do
+  if [ -f "${CANDIDATE}/src/custom-properties.css" ]; then
+    MINIMO_PKG_DIR="$CANDIDATE"
+    break
+  fi
 done
 
-# config di build-tokens: collocato accanto al css generato (custom-properties.css).
-# NB: i percorsi relativi nel file vanno adattati alla sua posizione effettiva
-safe_cat "${BASE_URL}/../../design-tokens/tokens-config-sample.mjs" "${FRONTEND_INSTALL_PATH}/src/css/tokens-config.mjs"
+if [ -z "$MINIMO_PKG_DIR" ]; then
+  echo -e "${RED}Sorgenti di minimo non trovati (né in ./node_modules/@massimo-cassandro/minimo né in ${BASE_URL}/../..): css di base e tokens-config non copiati${NC}"
+  BLOCKED_FILES+=("css di base + tokens-config.mjs → sorgenti minimo non trovati")
+else
+  echo "sorgenti minimo: ${MINIMO_PKG_DIR}"
+
+  # css di partenza del progetto: solo i file destinati a essere personalizzati.
+  # minimo.css NON viene copiato: i moduli css del framework vanno importati dal
+  # pacchetto (`@import '@minimo/css/...'`, vedi entry-tpl.css)
+  for FILE in custom-properties.css custom-media.css fonts.css; do
+    safe_cat "${MINIMO_PKG_DIR}/src/${FILE}" "${FRONTEND_INSTALL_PATH}/src/css/${FILE}"
+  done
+
+  # config di build-tokens: collocato accanto al css generato (custom-properties.css).
+  # NB: i percorsi relativi nel file vanno adattati alla sua posizione effettiva
+  safe_cat "${MINIMO_PKG_DIR}/design-tokens/tokens-config-sample.mjs" "${FRONTEND_INSTALL_PATH}/src/css/tokens-config.mjs"
+fi
 
 # template delle entry css (globale/di pagina e critical): ogni entry deve
 # importare direttamente custom-properties.css (vedi commenti nei file stessi)

package/dev-tools/starter-kit/templates/package-tpl.json

@@ -28,7 +28,7 @@
     "launchChrome": "open -n -a 'Google Chrome' --args --profile-directory='Profile 3'",
     "python server": "python3 -m http.server 8000 # --directory __dirname__ # 8000 = default port",
     "php server": "php -S localhost:8000 # -t root_dir/",
-    "symfony server": "symfony serve --port=8100 --listen-ip=0.0.0.0 # symfony server:stop # http://192.168.1.135:8100 # -d (deamon): rimane aperto anche dopo la chiusra del terminale",
+    "symfony server": "symfony serve --port=810X --listen-ip=0.0.0.0 # http://192.168.1.135:810X # -d (deamon): rimane aperto anche dopo la chiusura del terminale, terminare con `symfony server:stop`",
     "node server": "node serve # richiede ‘npm i serve’",
     "build tokens": "npx buildTokens --config ./src/css/tokens-config.mjs # o ./frontend/src/css/tokens-config.mjs",
     "check unresolved props": "npx checkUnresolvedProps --config ./src/css/tokens-config.mjs # o ./frontend/src/css/tokens-config.mjs",

package/package.json

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

package/src/css/forms/switch.css

@@ -1,106 +1,110 @@
+/* TODO aggiungere esempi di uso */
+/* TODO valutare versione con label a sinistra (form-check-reverse) */
 
-/* TODO completare, aggiungere focus, vedere soluzione bootstrap
+/*
+Markup (come bootstrap 5, con l'aggiunta dell'attributo nativo `switch`):
 
+<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>
+</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.
+*/
 
 .form-switch {
-padding-left: $form-switch-padding-start;
 
-.form-check-input {
-  --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+  --_switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
 
-  width: $form-switch-width;
-  margin-left: $form-switch-padding-start * -1;
-  background-image: var(--#{$prefix}form-switch-bg);
-  background-position: left center;
-  @include border-radius($form-switch-border-radius, 0);
-  @include transition($form-switch-transition);
+  /* annulla il layout con float di `.form-check` */
+  display: flex;
+  column-gap: var(--size-sm);
+  align-items: center;
+  padding-left: 0;
 
-  &:focus {
-    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
-  }
+  .form-check-input {
+    float: none;
+    flex: none;
+    width: var(--switch-width);
+    height: var(--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-repeat: no-repeat;
+    background-position: var(--switch-thumb-inset) center;
+    background-size: var(--_switch-thumb-size) var(--_switch-thumb-size);
+    border: none;
+    border-radius: var(--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;
+    }
 
-  &:checked {
-    background-position: $form-switch-checked-bg-position;
+    &:focus {
+      outline: none;
+    }
 
-    @if $enable-gradients {
-      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
-    } @else {
-      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
+    &:focus-visible {
+      outline: var(--form-control-focus-outline-width) solid var(--form-control-focus-color);
+      outline-offset: var(--form-control-focus-outline-offset);
     }
   }
-}
 
-&.form-check-reverse {
-  padding-right: $form-switch-padding-start;
-  padding-left: 0;
-
-  .form-check-input {
-    margin-right: $form-switch-padding-start * -1;
-    margin-left: 0;
+  .form-check-label {
+    cursor: pointer;
+    user-select: none;
   }
-}
-}
-
-
-*/
 
-/*
-<div class="switch">
-<input type="checkbox">
-<span class="switch-track"></span>
-<label>Abilita notifiche</label>
-</div>
-*/
+  &:has(.form-check-input:disabled) {
+    opacity: var(--form-control-disabled-opacity);
 
-.switch {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.switch input {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
+    .form-check-input, .form-check-label {
+      cursor: not-allowed;
+    }
+  }
 }
 
-.switch-track {
-  position: relative;
-  width: 2.5em;
-  height: 1.5em;
-  background-color: var(--switch-background-color);
-  border-radius: 1.5em;
-  transition: background-color .2s;
+@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;
+  }
 }
 
-.switch label {
-  margin-left: .5em;
-  user-select: none;
-}
+/* switch nativo: si lascia il rendering al browser e si interviene sui suoi pseudo-elementi */
+/* stylelint-disable selector-pseudo-element-no-unknown */
+@supports selector(input[switch]::thumb) {
 
-.switch-track::after {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 2em;
-  height: 2em;
-  content: '';
-  background: var(--switch-cursor-background-color);
-  border-radius: 50%;
-  transition: translate .2s;
-}
+  .form-switch .form-check-input[switch] {
+    appearance: auto;
+    background: none;
+    border-radius: 0; /* gestito da ::track */
 
-.switch input:checked + .switch-track {
-  background-color: var(--switch-checked-background-color);
-}
+    &::track {
+      background-color: var(--switch-background-color);
+    }
 
-.switch input:checked + .switch-track::after {
-  translate: 20px 0;
-}
+    &::thumb {
+      background-color: var(--switch-cursor-background-color);
+    }
 
-/* accessibilità */
-.switch input:focus-visible + .switch-track {
-  outline: 2px solid var(--switch-checked-background-color);
-  outline-offset: 2px;
+    &:checked::track {
+      background-color: var(--switch-checked-background-color);
+    }
+  }
 }
+/* stylelint-enable selector-pseudo-element-no-unknown */

package/src/custom-properties.css

@@ -284,10 +284,10 @@
   --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-height: fit-content;
   --mpopup-max-height: 90dvh;
   --mpopup-max-width: 70dvw;
-  --mpopup-min-height: 300px;
+  --mpopup-min-height: 40dvw;
   --mpopup-min-width: 400px;
   --mpopup-width: max-content;
 
@@ -383,6 +383,10 @@
   --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;

package/src/minimo.css

@@ -17,6 +17,7 @@
 @import '@minimo/css/forms/form-disabled-readonly.css';
 @import '@minimo/css/forms/validation.css';
 @import '@minimo/css/forms/form-utilities.css';
+@import '@minimo/css/forms/switch.css';
 
 @import '@minimo/css/buttons/buttons.css';
 @import '@minimo/css/buttons/buttons-primary.css';

package/types/classes.d.ts

@@ -59,6 +59,7 @@ export type MinimoClass =
   | 'font-semibold'
   | 'form-check'
   | 'form-check-input'
+  | 'form-check-label'
   | 'form-check-top-label'
   | 'form-collection'
   | 'form-collection-fset'
@@ -70,6 +71,7 @@ export type MinimoClass =
   | 'form-group'
   | 'form-help-text'
   | 'form-label'
+  | 'form-switch'
   | 'form-user-info'
   | 'fset'
   | 'gap-0'
@@ -1378,8 +1380,6 @@ export type MinimoClass =
   | 'span-3'
   | 'span-4'
   | 'spinner'
-  | 'switch'
-  | 'switch-track'
   | 'table'
   | 'table-bordered'
   | 'table-responsive'