@uncinq/css-components 1.22.0 → 1.23.0

package/css/components/form.css

@@ -3,7 +3,7 @@
   .form {
     display: grid;
     gap: var(--gap);
-    grid-template-columns: repeat(auto-fill, minmax(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(min(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 100%), 1fr));
 
     .help {
       color: var(--help-color-text);

package/css/components/push.css

@@ -127,14 +127,6 @@
       .btn-toggle-video {
         pointer-events: auto;
       }
-
-      /* Safari draws a play button over a video it refuses to autoplay, in
-         Low Power Mode for one. The button sits in the browser's shadow DOM,
-         which only gives way to !important. */
-      video::-webkit-media-controls-start-playback-button {
-        -webkit-appearance: none;
-        display: none !important;
-      }
     }
 
     .surtitle {

package/docs/content/push.md

@@ -43,9 +43,7 @@ The push takes the taller of the two boxes: a text that needs more room than the
 
 ## The media is a background
 
-`.media` takes `pointer-events: none`: a click on the image or the video goes through to the push and its link, and a tap never starts or pauses a video. The pause control that a [`.video`](../../embeds/video/) lays over an autoplaying video is the exception, set back to `pointer-events: auto`, since WCAG requires a way to stop it. A video that needs its native `controls` does not belong in a push.
-
-Safari draws a play button over a video it refuses to autoplay, in Low Power Mode for instance. The push hides it through `::-webkit-media-controls-start-playback-button`, with the one `!important` of the component: the button lives in the browser's shadow DOM, and nothing weaker overrides it there. The video then shows its first frame, or its poster.
+`.media` takes `pointer-events: none`: a click on the image or the video goes through to the push and its link, and a tap never starts or pauses a video. The pause control that a [`.video`](../../embeds/video/) lays over an autoplaying video is the exception, set back to `pointer-events: auto`, since WCAG requires a way to stop it. A video that needs its native `controls` does not belong in a push. For the play button Safari draws over a background video in Low Power Mode, see [Video](../../embeds/video/#autoplay-checklist): no CSS hides it.
 
 ## What the push hands down
 

package/docs/embeds/video.md

@@ -51,3 +51,11 @@ A [`.media`](../../content/media/) stretches the wrapper to fill it, so a video
 ## Autoplay checklist
 
 `muted` is required for autoplay to be allowed at all, and `playsinline` keeps iOS from taking the video fullscreen. `loop` is what makes a background video a background video. All three are attributes on the element, not something this component can supply.
+
+`autoplay` itself is better left out. In Low Power Mode, or when the device runs hot, Safari refuses to autoplay and forces its own play button over every video that carries the attribute. WebKit does this on purpose, and the button lives in a closed shadow root: `::-webkit-media-controls-start-playback-button` no longer reaches it, `!important` or not. Start the video from script instead, and ignore the refusal:
+
+```js
+video.play().catch(() => {});
+```
+
+Without the attribute Safari draws nothing. The video stays on its poster or its first frame, and `.btn-toggle-video` is there to start it.

package/docs/forms/form.md

@@ -36,12 +36,14 @@ Each field is a plain `div`. There is no `.form-group` or `.field` class: the gr
 ```css
 grid-template-columns: repeat(
   auto-fill,
-  minmax(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 1fr)
+  minmax(min(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 100%), 1fr)
 );
 ```
 
 The `max()` is doing two jobs at once. It sets a **floor** of `25ch`, below which a field is too narrow to use, and it sets each track to at least half the width minus half the gap, which **caps** the result at two columns however wide the container gets.
 
+The outer `min(…, 100%)` keeps that floor from ever exceeding the form itself. `ch` is the width of the font's `0`, so with a wide typeface `25ch` can be wider than a phone screen (Termina's `0` is 0.94em, making `25ch` 376px at 16px), and without the clamp the single column would overflow its container and widen the page.
+
 A three-column form is almost never what you want, because it breaks the vertical reading order of a sequence of fields: the eye has to move right twice before dropping a line, and nothing in the layout says which order the fields belong in.
 
 Change the floor with `--form-col-min-width`. Raising it past 50% forces a single column, which is a reasonable way to write a narrow form without a variant class.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinq/css-components",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "description": "Framework-agnostic CSS component implementations.",
   "license": "MIT",
   "repository": {