sixseconds-modules 2.0.2 → 2.0.4

package/dist/styles.css

@@ -9,21 +9,18 @@
         only things that cross a shadow boundary, so we neutralise them once
         here and re-establish our own baseline. Host author rules cannot
         reach past the boundary at all.
-     2. `.sixseconds-header-root` — a defensive reset for the light DOM. It
-        applies when this stylesheet is used outside the shadow root (e.g. a
-        consumer imports `sixseconds-modules/styles`, or during the brief
-        pre-mount window), so leaked host rules for bare tags (button, a, ul,
-        li, *, resets) get reverted before our styles apply.
-
-   IMPORTANT — specificity/order contract:
-     `.sixseconds-header-root, .sixseconds-header-root *` is specificity
-     (0,1,0), identical to an Emotion-generated class. This reset is declared
-     ABOVE all component rules, so at equal specificity our own MUI/Emotion
-     styles (injected/declared later) always win. Never raise this reset to
-     an element-qualified selector or add `!important` — that would beat the
-     header's own styling. `all: revert` also intentionally leaves custom
-     properties, `direction` and `unicode-bidi` untouched, so RTL keeps
-     working.
+     2. `:where(.sixseconds-header-root …)` — a small, zero-specificity baseline
+        (box-sizing, replaced-element sizing) that replaces the host normalize the
+        boundary blocks, without ever overriding the component's own styles.
+
+   Inside the shadow tree the boundary already blocks the host's author CSS, so
+   NO aggressive `all: revert` is used here — that would strip the very baseline
+   the header needs (the host's global normalize no longer reaches inside the
+   boundary), which is what made replaced elements render at their intrinsic
+   size. Instead we provide our own small baseline below, written with `:where()`
+   so it has ZERO specificity and can never override the component's own Emotion
+   styles (a plain `.sixseconds-header-root svg {}` would be (0,1,1) and would
+   clobber MUI icon sizing).
    ========================================================================== */
 :host {
   /* `!important` is load-bearing: for NORMAL declarations the outer (document)
@@ -44,14 +41,29 @@
   -webkit-font-smoothing: antialiased !important;
 }
 
-.sixseconds-header-root,
-.sixseconds-header-root *,
-.sixseconds-header-root *::before,
-.sixseconds-header-root *::after {
-  all: revert;
+/* Baseline for the isolated tree — replaces what the host's normalize used to
+   provide. `:where()` keeps specificity at 0 so Emotion/MUI always win; these
+   rules only fill in defaults nothing else sets. */
+:where(.sixseconds-header-root),
+:where(.sixseconds-header-root *),
+:where(.sixseconds-header-root *::before),
+:where(.sixseconds-header-root *::after) {
   box-sizing: border-box;
 }
 
+:where(.sixseconds-header-root img),
+:where(.sixseconds-header-root svg),
+:where(.sixseconds-header-root video),
+:where(.sixseconds-header-root canvas) {
+  max-width: 100%;
+}
+
+:where(.sixseconds-header-root img),
+:where(.sixseconds-header-root svg),
+:where(.sixseconds-header-root video) {
+  height: auto;
+}
+
 .sixseconds-header-root blockquote,
 .sixseconds-header-root dl,
 .sixseconds-header-root dd,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sixseconds-modules",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",