@geosdi/ngx-ui 0.0.0-stage → 1.1.0

package/styles/ui.scss

@@ -0,0 +1,2220 @@
+// ---- pulsante ------------------------------------------------------------
+
+.ml-button {
+    --ml-bg: var(--ml-primary);
+    --ml-bg-hover: var(--ml-primary-hover);
+    --ml-fg: var(--ml-on-primary);
+    --ml-soft: var(--ml-selection-background);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: var(--ml-control-height);
+    padding: var(--ml-button-padding);
+    border: 1px solid var(--ml-bg);
+    border-radius: var(--ml-radius);
+    background: var(--ml-bg);
+    color: var(--ml-fg);
+    font: inherit;
+    font-family: var(--ml-font-family);
+    font-weight: 600;
+    line-height: 1.2;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+        background-color 0.15s,
+        border-color 0.15s,
+        color 0.15s;
+
+    &:focus-visible {
+        outline: 2px solid var(--ml-focus-color);
+        outline-offset: 2px;
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+        opacity: 0.6;
+        cursor: default;
+        pointer-events: none;
+    }
+
+    &[data-severity="secondary"] {
+        --ml-bg: var(--ml-text-secondary);
+        --ml-bg-hover: var(--ml-secondary-hover);
+        --ml-soft: var(--ml-secondary-subtle);
+    }
+
+    &[data-severity="success"] {
+        --ml-bg: var(--ml-success);
+        --ml-bg-hover: var(--ml-success-hover);
+        --ml-soft: var(--ml-success-subtle);
+    }
+
+    &[data-severity="info"] {
+        --ml-bg: var(--ml-info);
+        --ml-bg-hover: var(--ml-info-hover);
+    }
+
+    &[data-severity="warn"] {
+        --ml-bg: var(--ml-warning);
+        --ml-bg-hover: var(--ml-warning-hover);
+        --ml-soft: var(--ml-warning-subtle);
+    }
+
+    &[data-severity="danger"] {
+        --ml-bg: var(--ml-danger);
+        --ml-bg-hover: var(--ml-danger-hover);
+        --ml-soft: var(--ml-danger-subtle);
+    }
+
+    // Solo il bordo, o niente : il colore passa al testo.
+    &.ml-button--outlined,
+    &.ml-button--text {
+        background: transparent;
+        color: var(--ml-bg);
+    }
+
+    &.ml-button--text {
+        border-color: transparent;
+    }
+
+    &.ml-button--small {
+        min-height: var(--ml-control-height-small);
+        padding: var(--ml-button-padding-small);
+        font-size: var(--ml-control-font-size-small);
+    }
+
+    &.ml-button--icon-only {
+        width: var(--ml-control-height);
+        min-width: var(--ml-control-height);
+        padding: 0;
+
+        &.ml-button--small {
+            width: var(--ml-control-height-small);
+            min-width: var(--ml-control-height-small);
+        }
+    }
+
+    &.ml-button--rounded {
+        border-radius: 999px;
+    }
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .ml-button:hover {
+        border-color: var(--ml-bg-hover);
+        background: var(--ml-bg-hover);
+    }
+
+    .ml-button.ml-button--outlined:hover,
+    .ml-button.ml-button--text:hover {
+        background: var(--ml-soft);
+        color: var(--ml-bg-hover);
+    }
+
+    .ml-button.ml-button--text:hover {
+        border-color: transparent;
+    }
+}
+
+// ---- campo di testo -------------------------------------------------------
+
+.ml-input {
+    width: auto;
+    min-height: var(--ml-control-height);
+    padding: var(--ml-input-padding);
+    border: 1px solid var(--ml-control-border);
+    border-radius: var(--ml-radius);
+    background: var(--ml-surface);
+    color: var(--ml-text);
+    font: inherit;
+    font-family: var(--ml-font-family);
+    transition:
+        border-color 0.15s,
+        box-shadow 0.15s;
+
+    &::placeholder {
+        color: var(--ml-text-muted);
+    }
+
+    &:focus {
+        border-color: var(--ml-primary);
+        outline: none;
+        box-shadow: 0 0 0 2px var(--ml-focus-shadow-color);
+    }
+
+    &:disabled {
+        background: var(--ml-surface-muted);
+        color: var(--ml-text-muted);
+        cursor: default;
+    }
+
+    &.ng-invalid.ng-touched,
+    &.ng-invalid.ng-dirty {
+        border-color: var(--ml-danger);
+    }
+}
+
+// ---- casella --------------------------------------------------------------
+
+.ml-checkbox {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    vertical-align: middle;
+}
+
+// La casella vera, sopra il disegno e trasparente : prende il clic, la
+// tastiera e il lettore di schermo.
+.ml-checkbox__input {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+
+    &:disabled {
+        cursor: default;
+    }
+}
+
+.ml-checkbox__box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--ml-control-border);
+    border-radius: var(--ml-radius);
+    background: var(--ml-surface);
+    transition:
+        background-color 0.15s,
+        border-color 0.15s;
+
+    svg {
+        width: 0.875rem;
+        height: 0.875rem;
+        fill: none;
+        stroke: var(--ml-on-primary);
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        visibility: hidden;
+    }
+}
+
+.ml-checkbox--checked .ml-checkbox__box {
+    border-color: var(--ml-primary);
+    background: var(--ml-primary);
+
+    svg {
+        visibility: visible;
+    }
+}
+
+.ml-checkbox__input:focus-visible + .ml-checkbox__box {
+    outline: 2px solid var(--ml-focus-color);
+    outline-offset: 2px;
+}
+
+.ml-checkbox--disabled .ml-checkbox__box {
+    opacity: 0.6;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .ml-checkbox:not(.ml-checkbox--disabled, .ml-checkbox--checked):hover
+        .ml-checkbox__box {
+        border-color: var(--ml-primary);
+    }
+}
+
+// ---- suggerimento ---------------------------------------------------------
+
+.cdk-overlay-container {
+    z-index: var(--ml-overlay-z-index);
+}
+
+.ml-tooltip {
+    display: block;
+    max-width: 20rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--ml-radius);
+    background: var(--ml-tooltip-background);
+    color: var(--ml-on-primary);
+    font-family: var(--ml-font-family);
+    font-size: 0.875rem;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+    box-shadow: var(--ml-shadow);
+    pointer-events: none;
+}
+
+// ---- finestra -------------------------------------------------------------
+
+// La maschera della finestra scritta nel template (`ml-dialog`) : sta sul
+// posto, fissa sulla pagina. Quella delle finestre aperte da codice è lo
+// sfondo dell'overlay del CDK, qui sotto.
+.ml-dialog-mask {
+    position: fixed;
+    inset: 0;
+    z-index: 1100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    pointer-events: none;
+
+    > .ml-dialog {
+        pointer-events: auto;
+    }
+}
+
+.ml-dialog-mask--modal,
+.ml-dialog-backdrop {
+    background: rgb(0 0 0 / 50%);
+    pointer-events: auto;
+}
+
+.ml-dialog {
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+    max-width: 100%;
+    max-height: 90%;
+    border: 1px solid var(--ml-divider);
+    border-radius: 12px;
+    background: var(--ml-surface);
+    color: var(--ml-text);
+    box-shadow:
+        0 20px 25px -5px rgb(0 0 0 / 10%),
+        0 8px 10px -6px rgb(0 0 0 / 10%);
+    outline: none;
+}
+
+// Nell'overlay il riquadro è il pannello del CDK, e la finestra lo riempie.
+.ml-dialog--overlay {
+    width: 100%;
+    height: 100%;
+    max-height: inherit;
+}
+
+.ml-dialog-pane {
+    max-height: 90vh;
+}
+
+.ml-dialog__header {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 1.25rem;
+}
+
+.ml-dialog__title {
+    margin: 0;
+    color: var(--ml-text-heading);
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.ml-dialog__close {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-left: auto;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--ml-text-secondary);
+    cursor: pointer;
+
+    &:focus-visible {
+        outline: 2px solid var(--ml-focus-color);
+        outline-offset: 2px;
+    }
+}
+
+.ml-dialog__content {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 0 1.25rem 1.25rem;
+    overflow-y: auto;
+}
+
+.ml-dialog__footer {
+    display: flex;
+    flex: none;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 0 1.25rem 1.25rem;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .ml-dialog__close:hover {
+        background: var(--ml-surface-muted);
+        color: var(--ml-text-heading);
+    }
+}
+
+// ---- conferma -------------------------------------------------------------
+
+.ml-confirm__message {
+    margin: 0 0 1.25rem;
+    line-height: 1.5;
+    white-space: pre-line;
+}
+
+.ml-confirm__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}
+
+// ---- avvisi ---------------------------------------------------------------
+
+// In alto a destra, con il livello configurabile dal tema.
+.ml-toast-stack {
+    position: fixed;
+    top: calc(1rem + env(safe-area-inset-top, 0px));
+    right: max(1rem, env(safe-area-inset-right, 0px));
+    z-index: var(--ml-toast-z-index);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: min(25rem, calc(100vw - 2rem));
+    pointer-events: none;
+}
+
+@keyframes ml-toast-enter {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.ml-toast {
+    --ml-toast: var(--ml-primary);
+
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 1rem;
+    border: 1px solid color-mix(in srgb, var(--ml-toast) 35%, transparent);
+    border-radius: 8px;
+    background: color-mix(
+        in srgb,
+        color-mix(in srgb, var(--ml-toast) 10%, var(--ml-surface)) 90%,
+        transparent
+    );
+    color: color-mix(in srgb, var(--ml-toast) 75%, var(--ml-text));
+    box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
+    backdrop-filter: blur(8px);
+    pointer-events: auto;
+    animation: ml-toast-enter var(--ml-toast-enter-duration) ease-out;
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+    }
+
+    > .ml-icon {
+        margin-top: 0.15rem;
+        color: var(--ml-toast);
+        font-size: 1.4rem;
+    }
+
+    &[data-severity="success"] {
+        --ml-toast: var(--ml-success);
+    }
+
+    &[data-severity="warn"] {
+        --ml-toast: var(--ml-warning);
+    }
+
+    &[data-severity="error"] {
+        --ml-toast: var(--ml-danger);
+    }
+}
+
+.ml-toast__text {
+    flex: 1 1 auto;
+    min-width: 0;
+    line-height: 1.4;
+    font-weight: 500;
+    overflow-wrap: anywhere;
+}
+
+.ml-toast__close {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+
+    &:hover {
+        background: color-mix(in srgb, var(--ml-toast) 12%, transparent);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--ml-focus-color);
+    }
+}
+
+// ---- tendina --------------------------------------------------------------
+
+.ml-select {
+    position: relative;
+    display: inline-flex;
+    min-width: 0;
+    vertical-align: middle;
+}
+
+.ml-select--fluid {
+    width: 100%;
+}
+
+.ml-select__trigger {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 2.5rem;
+    border: 1px solid var(--ml-control-border);
+    border-radius: var(--ml-radius);
+    background: var(--ml-surface);
+    color: var(--ml-text);
+    cursor: pointer;
+    transition:
+        border-color 0.15s,
+        box-shadow 0.15s;
+}
+
+.ml-select__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0.5rem 0.75rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    outline: none;
+}
+
+// Con il testo libero il campo è un `input` vero, senza bordo suo : il bordo
+// è quello del riquadro.
+.ml-select__input {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: text;
+
+    &::placeholder {
+        color: var(--ml-text-muted);
+    }
+}
+
+.ml-select__placeholder {
+    color: var(--ml-text-muted);
+}
+
+.ml-select__clear,
+.ml-select__arrow {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    color: var(--ml-text-muted);
+}
+
+.ml-select__clear {
+    height: 2rem;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    cursor: pointer;
+}
+
+.ml-select__arrow {
+    width: 2.5rem;
+    font-size: 0.875rem;
+}
+
+.ml-select--focus .ml-select__trigger {
+    border-color: var(--ml-primary);
+    box-shadow: 0 0 0 2px var(--ml-focus-shadow-color);
+}
+
+.ml-select--disabled .ml-select__trigger {
+    background: var(--ml-surface-muted);
+    color: var(--ml-text-muted);
+    cursor: default;
+}
+
+.ml-select--small .ml-select__trigger {
+    min-height: 2rem;
+    font-size: 0.875rem;
+}
+
+.ml-select--small .ml-select__label {
+    padding: 0.375rem 0.625rem;
+}
+
+.ml-select.ng-invalid.ng-touched .ml-select__trigger {
+    border-color: var(--ml-danger);
+}
+
+// Il pannello riempie il riquadro dell'overlay, che il CDK fa largo almeno
+// quanto il campo : il riquadro è un flex in riga, e da solo il pannello
+// resterebbe largo quanto le sue voci.
+.ml-select__panel {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    max-width: calc(100vw - 1rem);
+    border: 1px solid var(--ml-divider);
+    border-radius: var(--ml-radius);
+    background: var(--ml-surface);
+    color: var(--ml-text);
+    box-shadow:
+        0 4px 6px -1px rgb(0 0 0 / 10%),
+        0 2px 4px -2px rgb(0 0 0 / 10%);
+    font-family: var(--ml-font-family);
+    font-size: 1rem;
+}
+
+.ml-select__search {
+    position: relative;
+    padding: 0.5rem 0.5rem 0.25rem;
+
+    .ml-input {
+        width: 100%;
+        padding-right: 2rem;
+    }
+
+    > .ml-icon {
+        position: absolute;
+        top: 50%;
+        right: 1.25rem;
+        margin-top: 0.125rem;
+        color: var(--ml-text-muted);
+        transform: translateY(-50%);
+    }
+}
+
+.ml-select__list {
+    max-height: 15rem;
+    margin: 0;
+    padding: 0.25rem;
+    overflow-y: auto;
+    list-style: none;
+}
+
+.ml-select__option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: calc(var(--ml-radius) - 1px);
+    cursor: pointer;
+}
+
+// La voce attiva (sotto il mouse o scelta con le frecce) e quella scelta
+// hanno la barra blu a sinistra e il fondo azzurro, come nel menu a cascata
+// e nella ricerca indirizzi (richiesta di Vito).
+.ml-select__option--active,
+.ml-select__option--selected {
+    background: var(--ml-selection-background);
+    color: var(--ml-primary-hover);
+    box-shadow: inset 3px 0 0 var(--ml-primary);
+}
+
+.ml-select__option--selected {
+    font-weight: 600;
+}
+
+.ml-select__check {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    border: 1px solid var(--ml-control-border);
+    border-radius: 4px;
+    background: var(--ml-surface);
+    color: var(--ml-on-primary);
+    font-size: 0.7rem;
+
+    .ml-icon {
+        visibility: hidden;
+    }
+}
+
+.ml-select__option--selected .ml-select__check {
+    border-color: var(--ml-primary);
+    background: var(--ml-primary);
+
+    .ml-icon {
+        visibility: visible;
+    }
+}
+
+.ml-select__group {
+    padding: 0.6rem 0.75rem 0.3rem;
+    color: var(--ml-text-secondary);
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.ml-select__empty {
+    padding: 0.5rem 0.75rem;
+    color: var(--ml-text-muted);
+}
+
+// ---- campo con le proposte -----------------------------------------------
+
+// Ha il disegno della tendina : qui solo quello che cambia. Si scrive, quindi
+// il cursore è quello del testo, e la freccia è un pulsante.
+.ml-autocomplete .ml-select__trigger {
+    cursor: text;
+}
+
+.ml-autocomplete__dropdown {
+    align-self: stretch;
+    padding: 0;
+    border: 0;
+    border-left: 1px solid var(--ml-divider);
+    background: transparent;
+    cursor: pointer;
+
+    &:disabled {
+        cursor: default;
+    }
+}
+
+// ---- etichetta sul campo --------------------------------------------------
+
+// I campi che la fanno salire : quelli con un valore (`ml-input--filled`,
+// `ml-select--filled`), col fuoco, o con un segnaposto da non coprire.
+
+.ml-floatlabel {
+    position: relative;
+    display: block;
+
+    > label {
+        position: absolute;
+        top: 50%;
+        left: 0.75rem;
+        margin: 0;
+        color: var(--ml-text-muted);
+        font-size: 1rem;
+        font-weight: 500;
+        line-height: 1;
+        pointer-events: none;
+        transform: translateY(-50%);
+        transition: all 0.2s ease;
+    }
+
+    &:has(textarea) > label {
+        top: 0.5rem;
+        transform: none;
+    }
+
+    &:has(
+            input:focus,
+            textarea:focus,
+            input:-webkit-autofill,
+            .ml-input--filled,
+            .ml-select--filled,
+            .ml-select--focus,
+            input[placeholder]:not([placeholder=""]),
+            textarea[placeholder]:not([placeholder=""])
+        )
+        > label {
+        top: -1.25rem;
+        transform: none;
+        color: var(--ml-text-secondary);
+        font-size: 0.75rem;
+        font-weight: 400;
+    }
+
+    &:has(input:focus, textarea:focus, .ml-select--focus) > label {
+        color: var(--ml-primary);
+    }
+}
+
+// Sul bordo del campo : il fondo del campo sotto l'etichetta copre la riga.
+.ml-floatlabel--on:has(
+        input:focus,
+        textarea:focus,
+        input:-webkit-autofill,
+        .ml-input--filled,
+        .ml-select--filled,
+        .ml-select--focus,
+        input[placeholder]:not([placeholder=""]),
+        textarea[placeholder]:not([placeholder=""])
+    )
+    > label {
+    top: 0;
+    padding: 0 0.125rem;
+    border-radius: 2px;
+    background: var(--ml-surface);
+    transform: translateY(-50%);
+}
+
+.ml-floatlabel:has(.ml-select--fluid, .w-full) {
+    width: 100%;
+}
+
+// ---- campo numerico -------------------------------------------------------
+
+.ml-inputnumber {
+    position: relative;
+    display: inline-flex;
+    min-width: 0;
+    vertical-align: middle;
+
+    > .ml-input {
+        flex: 1 1 auto;
+        width: 100%;
+        min-width: 0;
+    }
+}
+
+.ml-inputnumber--buttons > .ml-input {
+    padding-right: 2rem;
+}
+
+.ml-inputnumber__buttons {
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    bottom: 1px;
+    display: flex;
+    flex-direction: column;
+    width: 1.75rem;
+
+    button {
+        display: flex;
+        flex: 1 1 0;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--ml-text-muted);
+        font-size: 0.75rem;
+        cursor: pointer;
+
+        &:disabled {
+            cursor: default;
+            opacity: 0.6;
+        }
+    }
+}
+
+// ---- interruttore ---------------------------------------------------------
+
+.ml-switch {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    width: 2.5rem;
+    height: 1.5rem;
+    vertical-align: middle;
+}
+
+.ml-switch__input {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+
+    &:disabled {
+        cursor: default;
+    }
+}
+
+.ml-switch__track {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 999px;
+    background: var(--ml-control-border);
+    transition: background-color 0.15s;
+}
+
+.ml-switch__handle {
+    position: absolute;
+    top: 0.25rem;
+    left: 0.25rem;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    background: var(--ml-surface);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
+    transition: transform 0.15s;
+}
+
+.ml-switch--on .ml-switch__track {
+    background: var(--ml-primary);
+}
+
+.ml-switch--on .ml-switch__handle {
+    transform: translateX(1rem);
+}
+
+.ml-switch--disabled {
+    opacity: 0.6;
+}
+
+.ml-switch__input:focus-visible + .ml-switch__track {
+    outline: 2px solid var(--ml-focus-color);
+    outline-offset: 2px;
+}
+
+// ---- cursore --------------------------------------------------------------
+
+.ml-slider {
+    display: block;
+    min-width: 6rem;
+}
+
+// La pista è piena fino al pollice : la parte piena la scrive il componente
+// in `--ml-slider-fill`.
+.ml-slider__input {
+    width: 100%;
+    height: 1.25rem;
+    margin: 0;
+    background: transparent;
+    cursor: pointer;
+    appearance: none;
+
+    &::-webkit-slider-runnable-track {
+        height: 0.25rem;
+        border-radius: 999px;
+        background: linear-gradient(
+            to right,
+            var(--ml-primary) var(--ml-slider-fill, 0%),
+            var(--ml-control-border) var(--ml-slider-fill, 0%)
+        );
+    }
+
+    &::-moz-range-track {
+        height: 0.25rem;
+        border-radius: 999px;
+        background: var(--ml-control-border);
+    }
+
+    &::-moz-range-progress {
+        height: 0.25rem;
+        border-radius: 999px;
+        background: var(--ml-primary);
+    }
+
+    &::-webkit-slider-thumb {
+        width: 1.1rem;
+        height: 1.1rem;
+        margin-top: -0.425rem;
+        border: 2px solid var(--ml-primary);
+        border-radius: 50%;
+        background: var(--ml-surface);
+        appearance: none;
+    }
+
+    &::-moz-range-thumb {
+        width: 1rem;
+        height: 1rem;
+        border: 2px solid var(--ml-primary);
+        border-radius: 50%;
+        background: var(--ml-surface);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--ml-focus-color);
+        outline-offset: 2px;
+    }
+
+    &:disabled {
+        cursor: default;
+        opacity: 0.6;
+    }
+}
+
+// ---- scelta a bottoni -----------------------------------------------------
+
+.ml-selectbutton {
+    display: inline-flex;
+    flex-wrap: wrap;
+}
+
+.ml-selectbutton__option {
+    min-height: 2.25rem;
+    padding: 0.4rem 0.85rem;
+    border: 1px solid var(--ml-control-border);
+    background: var(--ml-surface);
+    color: var(--ml-text);
+    font: inherit;
+    cursor: pointer;
+
+    & + & {
+        margin-left: -1px;
+    }
+
+    &:first-child {
+        border-radius: var(--ml-radius) 0 0 var(--ml-radius);
+    }
+
+    &:last-child {
+        border-radius: 0 var(--ml-radius) var(--ml-radius) 0;
+    }
+
+    &:focus-visible {
+        position: relative;
+        z-index: 1;
+        outline: 2px solid var(--ml-focus-color);
+        outline-offset: 1px;
+    }
+}
+
+.ml-selectbutton__option--on {
+    position: relative;
+    border-color: var(--ml-primary);
+    background: var(--ml-primary);
+    color: var(--ml-on-primary);
+}
+
+// ---- radio ----------------------------------------------------------------
+
+.ml-radio {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    vertical-align: middle;
+}
+
+.ml-radio__input {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.ml-radio__dot {
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--ml-control-border);
+    border-radius: 50%;
+    background: var(--ml-surface);
+}
+
+.ml-radio--checked .ml-radio__dot {
+    border: 6px solid var(--ml-primary);
+}
+
+.ml-radio__input:focus-visible + .ml-radio__dot {
+    outline: 2px solid var(--ml-focus-color);
+    outline-offset: 2px;
+}
+
+.ml-radio--disabled {
+    opacity: 0.6;
+}
+
+// ---- popover --------------------------------------------------------------
+
+.ml-popover {
+    padding: 0.75rem;
+    border: 1px solid var(--ml-divider);
+    border-radius: var(--ml-radius);
+    background: var(--ml-surface);
+    color: var(--ml-text);
+    box-shadow:
+        0 4px 6px -1px rgb(0 0 0 / 10%),
+        0 2px 4px -2px rgb(0 0 0 / 10%);
+    font-family: var(--ml-font-family);
+}
+
+// ---- cassetto -------------------------------------------------------------
+
+.ml-drawer-mask {
+    position: fixed;
+    inset: 0;
+    z-index: 1100;
+    background: rgb(0 0 0 / 50%);
+}
+
+.ml-drawer {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: 1101;
+    display: flex;
+    flex-direction: column;
+    width: min(20rem, 100vw);
+    background: var(--ml-surface);
+    color: var(--ml-text);
+    box-shadow: var(--ml-shadow);
+    outline: none;
+
+    &[data-position="left"] {
+        left: 0;
+    }
+
+    &[data-position="right"] {
+        right: 0;
+    }
+}
+
+.ml-drawer__close {
+    align-self: flex-end;
+    margin: 0.5rem;
+}
+
+.ml-drawer__content {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 0 1.25rem 1.25rem;
+    overflow-y: auto;
+}
+
+// ---- rotella --------------------------------------------------------------
+
+.ml-spinner {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+
+    svg {
+        width: 100%;
+        height: 100%;
+        animation: ml-spin 1.4s linear infinite;
+    }
+
+    circle {
+        stroke: var(--ml-primary);
+        stroke-dasharray: 90 150;
+        stroke-linecap: round;
+    }
+}
+
+@keyframes ml-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ml-spinner svg {
+        animation-duration: 4s;
+    }
+}
+
+// ---- solo css : separatore, segnaposto, etichette, campo con icona --------
+
+.ml-divider {
+    height: 0;
+    margin: 1rem 0;
+    border: 0;
+    border-top: 1px solid var(--ml-divider);
+}
+
+// Il segnaposto di qualcosa che sta arrivando : quadrato, della misura che
+// gli si dà.
+.ml-skeleton {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    border-radius: var(--ml-radius);
+    background: linear-gradient(
+        90deg,
+        var(--ml-surface-muted) 25%,
+        var(--ml-divider) 50%,
+        var(--ml-surface-muted) 75%
+    );
+    background-size: 200% 100%;
+    animation: ml-skeleton 1.2s ease-in-out infinite;
+}
+
+@keyframes ml-skeleton {
+    to {
+        background-position: -200% 0;
+    }
+}
+
+// Un chip che si clicca porta `role="button"` : il cursore lo dice.
+.ml-chip[role="button"] {
+    cursor: pointer;
+}
+
+.ml-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.3rem 0.75rem;
+    border-radius: 999px;
+    background: var(--ml-surface-muted);
+    color: var(--ml-text);
+    font-size: 0.875rem;
+}
+
+.ml-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    padding: 0 0.4rem;
+    border-radius: 999px;
+    background: var(--ml-primary);
+    color: var(--ml-on-primary);
+    font-size: 0.75rem;
+    font-weight: 700;
+
+    &[data-severity="secondary"] {
+        background: var(--ml-surface-muted);
+        color: var(--ml-text);
+    }
+}
+
+// Un campo con l'icona dentro, a sinistra.
+.ml-iconfield {
+    position: relative;
+    display: inline-flex;
+
+    > .ml-input {
+        width: 100%;
+        padding-left: 2.5rem;
+    }
+}
+
+.ml-inputicon {
+    position: absolute;
+    top: 50%;
+    left: 0.85rem;
+    color: var(--ml-text-muted);
+    pointer-events: none;
+    transform: translateY(-50%);
+}
+
+// ---- schede ---------------------------------------------------------------
+
+.ml-tabs {
+    display: block;
+}
+
+.ml-tablist {
+    display: flex;
+    min-width: 0;
+    border-bottom: 1px solid var(--ml-divider);
+}
+
+.ml-tablist__viewport {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+}
+
+.ml-tablist--scrollable .ml-tablist__viewport {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.ml-tablist__scroll-button {
+    display: inline-flex;
+    flex: 0 0 2.5rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    background: var(--ml-surface);
+    color: var(--ml-primary);
+    cursor: pointer;
+
+    svg {
+        width: 1rem;
+        height: 1rem;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+    }
+
+    &:disabled {
+        opacity: 0.35;
+        cursor: default;
+    }
+    &:focus-visible {
+        outline: 2px solid var(--ml-focus-color);
+        outline-offset: -2px;
+    }
+}
+
+.ml-tab {
+    flex: none;
+    margin-bottom: -1px;
+    padding: 0.75rem 1rem;
+    border-bottom: 2px solid transparent;
+    color: var(--ml-text-secondary);
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition:
+        color 0.15s,
+        border-color 0.15s;
+
+    &:focus-visible {
+        outline: 2px solid var(--ml-focus-color);
+        outline-offset: -2px;
+    }
+}
+
+.ml-tab--active {
+    border-bottom-color: var(--ml-primary);
+    color: var(--ml-primary);
+}
+
+.ml-tabpanels {
+    display: block;
+    padding-top: 0.75rem;
+}
+
+.ml-tabpanel {
+    display: block;
+
+    &[hidden] {
+        display: none;
+    }
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .ml-tab:not(.ml-tab--active):hover {
+        color: var(--ml-text-heading);
+    }
+}
+
+// ---- fisarmonica ----------------------------------------------------------
+
+.ml-accordion {
+    display: block;
+}
+
+.ml-accordion-panel {
+    display: block;
+    border-bottom: 1px solid var(--ml-divider);
+}
+
+.ml-accordion-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 1rem 1.125rem;
+    color: var(--ml-text-secondary);
+    font-weight: 600;
+    cursor: pointer;
+    user-select: none;
+
+    &:focus-visible {
+        outline: 2px solid var(--ml-focus-color);
+        outline-offset: -2px;
+    }
+}
+
+.ml-accordion-header__title {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.ml-accordion-header__icon {
+    flex: none;
+    font-size: 0.75rem;
+    transition: transform 0.15s;
+}
+
+.ml-accordion-panel--active > .ml-accordion-header {
+    color: var(--ml-text-heading);
+}
+
+.ml-accordion-panel--active > .ml-accordion-header .ml-accordion-header__icon {
+    transform: rotate(180deg);
+}
+
+// L'apertura si anima : la riga della griglia passa da `0fr` a `1fr`, cioè
+// dall'altezza zero a quella del contenuto, che con `height: auto` non si
+// potrebbe animare. `visibility` cambia subito all'apertura e alla fine della
+// chiusura, così il contenuto si vede mentre scende e sparisce dopo.
+.ml-accordion-content {
+    display: grid;
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    transition:
+        grid-template-rows 0.2s ease,
+        visibility 0s linear 0.2s;
+}
+
+.ml-accordion-content--open {
+    grid-template-rows: 1fr;
+    visibility: visible;
+    transition:
+        grid-template-rows 0.2s ease,
+        visibility 0s linear 0s;
+}
+
+.ml-accordion-content__clip {
+    min-height: 0;
+    overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ml-accordion-content,
+    .ml-accordion-content--open {
+        transition: none;
+    }
+}
+
+.ml-accordion-content__inner {
+    padding: 0 1.125rem 1.125rem;
+}
+
+// ---- paginatore -----------------------------------------------------------
+
+.ml-paginator {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0.5rem 0;
+}
+
+.ml-paginator__pages {
+    display: inline-flex;
+    gap: 0.25rem;
+}
+
+.ml-paginator__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    padding: 0 0.5rem;
+    border: 0;
+    border-radius: var(--ml-radius);
+    background: transparent;
+    color: var(--ml-text-secondary);
+    font: inherit;
+    cursor: pointer;
+
+    &:disabled {
+        color: var(--ml-text-muted);
+        cursor: default;
+        opacity: 0.5;
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--ml-primary);
+        outline-offset: 1px;
+    }
+}
+
+.ml-paginator__button--current {
+    background: var(--ml-selection-background);
+    color: var(--ml-primary-hover);
+    font-weight: 600;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .ml-paginator__button:not(:disabled, .ml-paginator__button--current):hover {
+        background: var(--ml-surface-muted);
+        color: var(--ml-text-heading);
+    }
+}
+
+// Il conto «3 / 12» al posto dei numeri, dove i numeri non ci stanno.
+.ml-paginator__count {
+    display: none;
+    padding: 0 0.5rem;
+    color: var(--ml-text-secondary);
+    font-variant-numeric: tabular-nums;
+}
+
+@media (max-width: 480px) {
+    .ml-paginator__pages {
+        display: none;
+    }
+
+    .ml-paginator__count {
+        display: inline;
+    }
+}
+
+// ---- tendina a più livelli -------------------------------------------------
+
+// Le colonne stanno una di fianco all'altra, ognuna una card allineata alla
+// voce del gruppo da cui parte : il riquadro dell'overlay non ha fondo suo.
+.ml-cascadeselect__columns {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.375rem;
+}
+
+// Verso sinistra la prima colonna sta a destra, sotto il campo.
+.ml-cascadeselect__columns--to-left {
+    flex-direction: row-reverse;
+}
+
+.ml-cascadeselect__column {
+    flex: none;
+    min-width: 12rem;
+    max-width: min(20rem, calc(100vw - 1rem));
+    overflow: hidden;
+    border: 0;
+    border-radius: 10px;
+    box-shadow:
+        0 10px 28px rgb(15 23 42 / 16%),
+        0 0 0 1px rgb(15 23 42 / 6%);
+    animation: ml-cascade-in 0.14s ease-out;
+
+    .ml-select__list {
+        max-height: min(22rem, 70dvh);
+        padding: 0.375rem;
+    }
+
+    .ml-select__option {
+        min-height: 2.5rem;
+        padding: 0.5rem 0.625rem 0.5rem 0.75rem;
+        border-radius: 6px;
+    }
+}
+
+// Una colonna nuova entra spostandosi di poco dal lato da cui si apre.
+@keyframes ml-cascade-in {
+    from {
+        opacity: 0;
+        transform: translateX(-0.25rem);
+    }
+}
+
+.ml-cascadeselect__columns--to-left .ml-cascadeselect__column {
+    animation-name: ml-cascade-in-left;
+}
+
+@keyframes ml-cascade-in-left {
+    from {
+        opacity: 0;
+        transform: translateX(0.25rem);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ml-cascadeselect__column {
+        animation: none;
+    }
+}
+
+// In cima a una colonna, il nome del gruppo da cui viene.
+.ml-cascadeselect__title {
+    padding: 0.375rem 0.75rem 0.5rem;
+    margin-bottom: 0.25rem;
+    border-bottom: 1px solid var(--ml-divider);
+    color: var(--ml-text-muted);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.ml-cascadeselect__text {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ml-cascadeselect__column .ml-icon-chevron-right {
+    flex: none;
+    color: var(--ml-text-muted);
+    font-size: 0.75rem;
+    transition:
+        color 0.15s,
+        transform 0.15s;
+}
+
+// La voce sotto il mouse, o scelta da tastiera, ha la barra blu e il fondo
+// azzurro del gruppo aperto, in qualunque colonna (richiesta di Vito).
+.ml-cascadeselect__column
+    .ml-select__option--active:not(.ml-cascadeselect__option--disabled) {
+    background: var(--ml-selection-background);
+    color: var(--ml-primary-hover);
+    box-shadow: inset 3px 0 0 var(--ml-primary);
+}
+
+.ml-cascadeselect__columns--to-left
+    .ml-select__option--active:not(.ml-cascadeselect__option--disabled) {
+    box-shadow: inset -3px 0 0 var(--ml-primary);
+}
+
+// Il gruppo aperto : la barra blu a sinistra, come le schede del builder, e
+// la freccia nel colore del tema spostata verso la sua colonna.
+.ml-cascadeselect__option--open {
+    background: var(--ml-selection-background);
+    color: var(--ml-primary-hover);
+    font-weight: 600;
+    box-shadow: inset 3px 0 0 var(--ml-primary);
+
+    .ml-icon-chevron-right {
+        color: var(--ml-primary);
+        transform: translateX(2px);
+    }
+}
+
+.ml-cascadeselect__columns--to-left .ml-cascadeselect__option--open {
+    box-shadow: inset -3px 0 0 var(--ml-primary);
+}
+
+// Una voce spenta non prende la barra né il fondo, nemmeno sotto il mouse.
+.ml-cascadeselect__option--disabled.ml-select__option--active {
+    background: transparent;
+    color: var(--ml-text-muted);
+    box-shadow: none;
+}
+
+.ml-cascadeselect__option--disabled {
+    color: var(--ml-text-muted);
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+
+.ml-cascadeselect__back {
+    margin-bottom: 0.25rem;
+    border-bottom: 1px solid var(--ml-divider);
+    border-radius: 0;
+    color: var(--ml-text-secondary);
+    font-weight: 600;
+
+    .ml-icon {
+        color: var(--ml-primary);
+        font-size: 0.75rem;
+    }
+}
+
+// ---- calendario -----------------------------------------------------------
+
+.ml-datepicker {
+    position: relative;
+    display: inline-flex;
+    min-width: 0;
+    vertical-align: middle;
+}
+
+.ml-datepicker__field {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+// Il campo non si scrive : il cursore è quello di un pulsante, e lo spazio a
+// destra è per la X e l'icona.
+.ml-datepicker__input {
+    width: 100%;
+    min-width: 10rem;
+    padding-right: 4.25rem;
+    cursor: pointer;
+
+    &:disabled {
+        cursor: default;
+    }
+}
+
+.ml-datepicker__clear,
+.ml-datepicker__icon {
+    position: absolute;
+    top: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--ml-text-muted);
+    cursor: pointer;
+    transform: translateY(-50%);
+
+    &:disabled {
+        cursor: default;
+    }
+}
+
+.ml-datepicker__icon {
+    right: 0.25rem;
+    color: var(--ml-primary);
+}
+
+.ml-datepicker__clear {
+    right: 2.25rem;
+}
+
+.ml-datepicker:not(:has(.ml-datepicker__icon)) .ml-datepicker__clear {
+    right: 0.25rem;
+}
+
+.ml-datepicker__panel {
+    width: 20rem;
+    max-width: calc(100vw - 1rem);
+    padding: 0.75rem;
+    border-radius: 10px;
+    background: var(--ml-surface);
+    color: var(--ml-text);
+    box-shadow:
+        0 10px 28px rgb(15 23 42 / 16%),
+        0 0 0 1px rgb(15 23 42 / 6%);
+    font-family: var(--ml-font-family);
+}
+
+// Al centro dello schermo, sul telefono : un po' più largo, e i giorni più
+// grandi da toccare (le misure stanno in fondo, con le altre per il tocco).
+.ml-datepicker__panel--sheet {
+    width: min(24rem, calc(100vw - 2rem));
+}
+
+.ml-datepicker__head {
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+    margin-bottom: 0.5rem;
+}
+
+.ml-datepicker__title {
+    flex: 1 1 auto;
+    color: var(--ml-text-heading);
+    font-weight: 600;
+    text-align: center;
+    text-transform: capitalize;
+}
+
+.ml-datepicker__nav {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--ml-text-secondary);
+    cursor: pointer;
+}
+
+.ml-datepicker__grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0.125rem;
+}
+
+.ml-datepicker__weekday {
+    padding: 0.25rem 0;
+    color: var(--ml-text-muted);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-align: center;
+    text-transform: capitalize;
+}
+
+.ml-datepicker__day {
+    aspect-ratio: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--ml-text);
+    font: inherit;
+    font-size: 0.9rem;
+    cursor: pointer;
+}
+
+.ml-datepicker__day--other {
+    color: var(--ml-text-muted);
+    opacity: 0.6;
+}
+
+.ml-datepicker__day--today {
+    box-shadow: inset 0 0 0 1px var(--ml-primary);
+    color: var(--ml-primary-hover);
+    font-weight: 600;
+}
+
+.ml-datepicker__day--in-range {
+    border-radius: 0;
+    background: var(--ml-selection-background);
+    color: var(--ml-primary-hover);
+}
+
+.ml-datepicker__day--selected {
+    background: var(--ml-primary);
+    color: var(--ml-on-primary);
+    font-weight: 600;
+    opacity: 1;
+}
+
+.ml-datepicker__day:focus-visible,
+.ml-datepicker__nav:focus-visible,
+.ml-datepicker__link:focus-visible {
+    outline: 2px solid var(--ml-primary);
+    outline-offset: 1px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .ml-datepicker__day:not(.ml-datepicker__day--selected):hover,
+    .ml-datepicker__nav:hover {
+        background: var(--ml-surface-muted);
+    }
+
+    .ml-datepicker__link:hover {
+        background: var(--ml-selection-background);
+    }
+}
+
+.ml-datepicker__time {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin: 0.75rem 0 0;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--ml-divider);
+    color: var(--ml-text-secondary);
+    font-weight: 600;
+}
+
+.ml-datepicker__foot {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--ml-divider);
+}
+
+.ml-datepicker__link {
+    min-height: 2rem;
+    padding: 0.25rem 0.625rem;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--ml-primary);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.ml-datepicker__link--done {
+    margin-left: auto;
+}
+
+// ---- tree ----------------------------------------------------------------
+
+.ml-tree {
+    display: block;
+}
+
+.ml-tree__list,
+.ml-tree__children {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+// Ogni livello rientra della larghezza della freccia, così le righe figlie
+// stanno sotto l'etichetta del padre.
+.ml-tree__children {
+    padding-left: 1.5rem;
+}
+
+.ml-tree__row {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-height: 2.25rem;
+    padding: 0.125rem 0.25rem;
+    border-radius: 6px;
+}
+
+.ml-tree__toggle,
+.ml-tree__spacer {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+}
+
+.ml-tree__toggle {
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--ml-text-muted);
+    cursor: pointer;
+
+    .ml-icon {
+        font-size: 0.75rem;
+        transition: transform 0.15s;
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--ml-primary);
+        outline-offset: 1px;
+    }
+}
+
+.ml-tree__toggle--open .ml-icon {
+    transform: rotate(90deg);
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .ml-tree__toggle:hover {
+        background: var(--ml-surface-muted);
+        color: var(--ml-text-heading);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ml-tree__toggle .ml-icon {
+        transition: none;
+    }
+}
+
+.ml-tree__content {
+    flex: 0 1 auto;
+    min-width: 0;
+}
+
+// ---- tabella --------------------------------------------------------------
+
+// L'aspetto deciso per la tabella delle feature e per quella WMS (10 novembre
+// 2026, richieste di Vito) : intestazioni piccole, maiuscole e in grassetto su
+// fondo grigio, righe alterne bianco e azzurro, il passaggio del mouse più
+// azzurro, la riga scelta ancora di più con la barra blu a sinistra, come le
+// voci scelte delle tendine. Le righe le scrivono i modelli di chi usa la
+// tabella : la riga scelta si riconosce dalla casella spuntata.
+.ml-table {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    color: var(--ml-text);
+}
+
+// `flex` : la tabella riempie l'altezza del suo contenitore e scorre dentro.
+.ml-table--flex {
+    flex: 1 1 0;
+    min-height: 0;
+}
+
+.ml-table__caption {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--ml-focus-shadow-color);
+}
+
+.ml-table__container {
+    position: relative;
+    overflow: auto;
+    min-height: 0;
+}
+
+.ml-table--flex .ml-table__container {
+    flex: 1 1 0;
+}
+
+.ml-table__table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 0.875rem;
+}
+
+.ml-table__table th,
+.ml-table__table td {
+    padding: 0.6rem 0.75rem;
+    border-bottom: 1px solid var(--ml-focus-shadow-color);
+    text-align: start;
+}
+
+.ml-table--small .ml-table__table th,
+.ml-table--small .ml-table__table td {
+    padding: 0.375rem 0.5rem;
+}
+
+// Le intestazioni restano ferme mentre la tabella scorre. Ferma è tutta
+// l'intestazione e non le singole celle : con due righe (i titoli e i filtri
+// per colonna) le celle si fermavano tutte in cima, e i filtri coprivano i
+// titoli.
+.ml-table__thead {
+    position: sticky;
+    z-index: 1;
+    top: 0;
+}
+
+.ml-table__thead th {
+    background: var(--ml-surface-muted);
+    color: var(--ml-text-heading);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.ml-table__thead tr:last-child th {
+    border-bottom-width: 2px;
+}
+
+.ml-table__tbody > tr > td {
+    background: var(--ml-surface);
+}
+
+.ml-table--striped .ml-table__tbody > tr:nth-child(even) > td {
+    background: color-mix(in srgb, var(--ml-primary) 7%, var(--ml-surface));
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .ml-table--hover .ml-table__tbody > tr:not(.table-empty):hover > td {
+        background: color-mix(
+            in srgb,
+            var(--ml-primary) 12%,
+            var(--ml-surface)
+        );
+    }
+}
+
+.ml-table__tbody > tr:has(.ml-checkbox--checked) > td {
+    background: color-mix(in srgb, var(--ml-primary) 18%, var(--ml-surface));
+    color: var(--ml-text-heading);
+}
+
+.ml-table__tbody > tr:has(.ml-checkbox--checked) > td:first-child {
+    box-shadow: inset 3px 0 0 var(--ml-primary);
+}
+
+// Il messaggio della tabella vuota : una riga `table-empty` scritta da chi la
+// usa, su tutta la larghezza, centrata e senza il fondo delle righe di dati.
+.ml-table__tbody > tr.table-empty > td {
+    padding: 2.5rem 1rem;
+    border-bottom: 0;
+    background: var(--ml-surface);
+    color: var(--ml-text-muted);
+    font-size: 0.9rem;
+    text-align: center;
+}
+
+.ml-table__tbody > tr.table-empty .ml-icon {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--ml-text-secondary);
+    font-size: 1.75rem;
+    opacity: 0.5;
+}
+
+.ml-table__tfoot td {
+    border-bottom: 0;
+}
+
+.ml-table__loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgb(255 255 255 / 60%);
+}
+
+.ml-table .ml-paginator {
+    border-top: 1px solid var(--ml-focus-shadow-color);
+}
+
+// La maniglia per allargare una colonna, sul bordo destro dell'intestazione.
+.ml-table__resizable {
+    position: relative;
+}
+
+.ml-table__resizer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 0.5rem;
+    cursor: col-resize;
+    touch-action: none;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .ml-table__resizer:hover {
+        box-shadow: inset -2px 0 0 var(--ml-primary);
+    }
+}
+
+// Il filtro di una colonna, nella riga sotto le intestazioni : largo quanto
+// la colonna, e la riga resta bianca e non maiuscola.
+.ml-table__thead tr.filter-row th {
+    background: var(--ml-surface);
+    font-weight: 400;
+    text-transform: none;
+    letter-spacing: normal;
+}
+
+.ml-column-filter {
+    display: block;
+}
+
+.ml-column-filter__control.ml-input {
+    width: 100%;
+    font-weight: 400;
+    min-width: 4rem;
+    height: 1.875rem;
+    padding-block: 0;
+    font-size: 0.8rem;
+}
+
+// ---- telefono e tablet ----------------------------------------------------
+
+// Con un puntatore grosso (il dito) tutti i componenti hanno un'area da
+// toccare di almeno 44 px e i campi scrivono a 16 px : sotto, Safari su
+// iPhone ingrandisce la pagina appena il campo prende il fuoco. Col mouse
+// restano le misure di sopra.
+
+// Le misure dei pulsanti restano configurabili tramite i token del tema.
+@media (pointer: coarse) {
+    // La maniglia delle colonne e il filtro per colonna, da toccare col dito.
+    .ml-table__resizer {
+        width: 1.25rem;
+    }
+
+    .ml-column-filter__control.ml-input {
+        height: 2.75rem;
+    }
+
+    .ml-input,
+    .ml-select__input,
+    .ml-select--small .ml-select__input {
+        font-size: 16px;
+    }
+
+    // Casella e radio : l'input trasparente sopra il disegno si allarga oltre
+    // il disegno, che resta della sua misura.
+    .ml-checkbox__input,
+    .ml-radio__input {
+        inset: -0.75rem;
+    }
+
+    .ml-switch__input {
+        inset: -0.625rem -0.25rem;
+    }
+
+    .ml-slider__input {
+        height: 2.75rem;
+    }
+
+    .ml-select__trigger {
+        min-height: 2.75rem;
+    }
+
+    .ml-select__clear,
+    .ml-select__arrow,
+    .ml-inputnumber__buttons {
+        width: 2.75rem;
+    }
+
+    .ml-select__clear {
+        height: 2.75rem;
+    }
+
+    .ml-inputnumber--buttons > .ml-input {
+        padding-right: 3rem;
+    }
+
+    .ml-select__option {
+        min-height: 2.75rem;
+    }
+
+    .ml-selectbutton__option,
+    .ml-tab {
+        min-height: 2.75rem;
+    }
+
+    .ml-paginator__button {
+        min-width: 2.75rem;
+        height: 2.75rem;
+    }
+
+    .ml-datepicker__nav,
+    .ml-datepicker__clear,
+    .ml-datepicker__icon,
+    .ml-datepicker__link {
+        min-width: 2.75rem;
+        min-height: 2.75rem;
+    }
+
+    .ml-datepicker__input {
+        padding-right: 5.75rem;
+    }
+
+    .ml-datepicker__clear {
+        right: 3rem;
+    }
+
+    .ml-tree__toggle,
+    .ml-tree__spacer {
+        width: 2.75rem;
+        height: 2.75rem;
+    }
+
+    .ml-dialog__close,
+    .ml-toast__close {
+        width: 2.75rem;
+        height: 2.75rem;
+    }
+}