@uncinq/css-components 1.21.0 → 1.22.1

package/css/components/dropdown.css

@@ -38,9 +38,9 @@
     border: 0;
     cursor: pointer;
     display: inline-flex;
-    margin-inline-start: calc(var(--spacing-xs) * -1);
-    padding-block: var(--spacing-2xs);
-    padding-inline: var(--spacing-xs);
+    margin-inline-start: calc(var(--dropdown-toggle-padding-inline) * -1);
+    padding-block: var(--dropdown-toggle-padding-block);
+    padding-inline: var(--dropdown-toggle-padding-inline);
 
     &::before {
       content: '';
@@ -111,6 +111,7 @@
     /* ── Items ───────────────────────────────────────────────────────── */
 
     li a {
+      background-color: var(--dropdown-item-color-background);
       border-radius: var(--dropdown-item-border-radius);
       color: var(--dropdown-color-text);
       font-size: var(--dropdown-item-font-size);

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/package.json

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