[PATCH yew-widget-toolkit-assets 3/3] material: let an application turn the touch-sized controls off

[Thomas Lamprecht <t.lamprecht@proxmox.com>]

The touch sizes follow the primary pointer the browser reports, which
need not match how a device is used: a hybrid device can report a
coarse pointer while a mouse or touchpad is in use. Choosing a denser
spacing does not help, as the sizes apply at every density.

The class `pwt-touch-targets-off` on the root element now turns them
off, so an application can offer that choice next to the density,
whose classes sit there as well. The rules keep their specificity, so
how they combine with other styles does not change.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---

In an ideal world we wouldn't need this, but as browsers, devices and
OS (reportings) are odd, it's rather likely that one wants to turn
this off manually, so lets support doing so from the start.

Could be also squashed into previous changes, but doesn't hurt to have
it as dedicated commit IMO.

 scss/introduction.md                    |   8 ++
 scss/material/_theme_post_material.scss | 102 +++++++++++++-----------
 2 files changed, 62 insertions(+), 48 deletions(-)

diff --git a/scss/introduction.md b/scss/introduction.md
index 9baa240..6ad4ea9 100644
--- a/scss/introduction.md
+++ b/scss/introduction.md
@@ -157,3 +157,11 @@ overwrite it manually using the following CSS classes:
 - `pwt-density-high`: very small spacer (`3px`), high density
 - `pwt-density-medium`: normal (`5px`), usefule for desktop apps
 - `pwt-density-touch`: larger spacer (`10px`), useful for touch devices
+
+The Material and mobile themes enlarge selected controls where the
+primary pointer is coarse, at every density. This follows the
+browser-reported primary pointing device, not the last input device
+used: a hybrid device can report either a fine or a coarse primary
+pointer, even with a mouse attached. Choosing Compact or Medium does not
+disable those control-size floors, but the class `pwt-touch-targets-off`
+on the root element does.
diff --git a/scss/material/_theme_post_material.scss b/scss/material/_theme_post_material.scss
index 0d99cf9..2d0f6c4 100644
--- a/scss/material/_theme_post_material.scss
+++ b/scss/material/_theme_post_material.scss
@@ -103,54 +103,60 @@ ul.pwt-menubar {
 /// These floors apply at every density in the Material and mobile themes. Inputs, action icons,
 /// and checkboxes outside a dialog keep their size. This is not universal 44px target sizing.
 ///
+/// The class `pwt-touch-targets-off` on the root element turns all of them off, as the density
+/// classes there set the spacing.
+///
 @media (pointer: coarse) {
-    .pwt-button,
-    dialog :is(.pwt-input, .pwt-action-icon),
-    .pwt-date-panel .pwt-date-panel-item {
-        min-height: 44px;
-    }
-
-    .pwt-button,
-    dialog .pwt-action-icon,
-    .pwt-date-panel .pwt-date-panel-item {
-        min-width: 44px;
-    }
-
-    // Keep labels centered when a minimum height exceeds the content height.
-    .pwt-button {
-        align-items: center;
-    }
-
-    // A FAB sets its own height and minimum width, which the button floor above would replace.
-    .pwt-fab {
-        height: max(44px, #{$normal-fab-size});
-        min-width: max(44px, #{$normal-fab-size});
-
-        &.pwt-fab-small {
-            height: max(44px, #{$small-fab-size});
-            min-width: max(44px, #{$small-fab-size});
-        }
-    }
-
-    .pwt-date-panel .pwt-date-panel-item {
-        box-sizing: border-box;
-    }
-
-    .pwt-nav-link,
-    ul.pwt-menu .pwt-menu-item,
-    ul.pwt-menubar .pwt-menubar-item {
-        min-width: 44px;
-        min-height: 44px;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-    }
-
-    dialog .pwt-checkbox {
-        font-size: 1.5rem;
-    }
-
-    .pwt-calendar {
-        --pwt-calendar-span-height: 32px;
+    // :where() adds no specificity, so the rules combine with others as if they stood alone.
+    :where(:root:not(.pwt-touch-targets-off)) {
+        .pwt-button,
+        dialog :is(.pwt-input, .pwt-action-icon),
+        .pwt-date-panel .pwt-date-panel-item {
+            min-height: 44px;
+        }
+
+        .pwt-button,
+        dialog .pwt-action-icon,
+        .pwt-date-panel .pwt-date-panel-item {
+            min-width: 44px;
+        }
+
+        // Keep labels centered when a minimum height exceeds the content height.
+        .pwt-button {
+            align-items: center;
+        }
+
+        // A FAB sets its own height and minimum width, which the button floor above would replace.
+        .pwt-fab {
+            height: max(44px, #{$normal-fab-size});
+            min-width: max(44px, #{$normal-fab-size});
+
+            &.pwt-fab-small {
+                height: max(44px, #{$small-fab-size});
+                min-width: max(44px, #{$small-fab-size});
+            }
+        }
+
+        .pwt-date-panel .pwt-date-panel-item {
+            box-sizing: border-box;
+        }
+
+        .pwt-nav-link,
+        ul.pwt-menu .pwt-menu-item,
+        ul.pwt-menubar .pwt-menubar-item {
+            min-width: 44px;
+            min-height: 44px;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+        }
+
+        dialog .pwt-checkbox {
+            font-size: 1.5rem;
+        }
+
+        .pwt-calendar {
+            --pwt-calendar-span-height: 32px;
+        }
     }
 }
-- 
2.47.3