@fluid-theme/core 0.4.3 → 2.0.0

package/src/core/reset.css

@@ -55,10 +55,11 @@
     resize: vertical;
   }
 
-  /* Text overflow prevention */
+  /* Text overflow prevention: a long word breaks rather than overflow.
+     No automatic hyphens anywhere: at a 58ch measure they showed as
+     "di-mensions" and "lap-top" (data-text-overflow="hyphenate" opts in). */
   :where(p, h1, h2, h3, h4, h5, h6, li, figcaption) {
     overflow-wrap: break-word;
-    hyphens: auto;
   }
 
   /* Headings - tighter line height for larger text */
@@ -85,11 +86,19 @@
     text-underline-offset: 0.2em;
   }
 
-  /* Anchor links within same page */
-  :where(a[href^="#"]) {
+  /* Scroll targets keep breathing room below sticky headers.
+     (scroll-margin only has effect on the TARGET element, never
+     the clicked link.) Pages with taller sticky navs override. */
+  :where([id]) {
     scroll-margin-block-start: 2rem;
   }
 
+  /* The hidden attribute always wins — components that set their
+     own display (flex/grid) must never resurrect hidden content */
+  [hidden] {
+    display: none !important;
+  }
+
   /* Focus styles - visible only for keyboard navigation */
   :focus-visible {
     outline: 2px solid var(--color-focus, currentColor);
@@ -107,11 +116,14 @@
     border-spacing: 0;
   }
 
-  /* Fieldset - remove default styling */
+  /* Fieldset - remove default styling. Browsers give a fieldset
+     min-inline-size: min-content, so a wide child (a table, a row of inputs)
+     made the whole page wider than a phone; 0 lets it shrink like a div. */
   :where(fieldset) {
     border: none;
     padding: 0;
     margin: 0;
+    min-inline-size: 0;
   }
 
   /* Legend - reset positioning */