bullframe.css 6.0.0 → 6.2.0

package/dist/css/bullframe-system-default.css

@@ -1,4 +1,4 @@
-/* ! Bullframe CSS v6.0.0 | MIT License | https://github.com/marcop135/bullframe.css  */
+/* ! Bullframe CSS v6.2.0 | MIT License | https://github.com/marcop135/bullframe.css  */
 
 /* Class-based + system dark: bullframe.css, then dark rules under prefers-color-scheme. */
 
@@ -34,6 +34,11 @@
   /* Invalid / error */
   --bf-red: rgb(255 0 0);
 
+  /* Focus ring (prefers-contrast: more raises colour for WCAG 1.4.11) */
+  --bf-focus-ring-color: var(--bf-orange);
+  --bf-focus-ring-width: 0.2rem;
+  --bf-focus-ring-offset: 0.3rem;
+
   /* Dark-mode surfaces (used by utility-global-dark*.css) */
   --bf-dark-bg: rgb(28 28 28);
   --bf-dark-link: rgb(77 165 255);
@@ -111,11 +116,6 @@ template {
  * Light UA improvements; complements Bullframe base styles. */
 
 @layer {
-  /* Spacing between content and focus outline (enhances focus.css). */
-  :focus-visible {
-    outline-offset: 3px;
-  }
-
   /* Disable mobile landscape text inflation on optimized layouts. */
   html {
     -webkit-text-size-adjust: none;
@@ -123,14 +123,11 @@ template {
          text-size-adjust: none;
   }
 
-  /* Comfortable default root line-height (body still uses --bf-body-line-height). */
-  html {
-    line-height: 1.5;
-  }
-
   /* Stable scrollbar gutter avoids layout jump on short pages. */
-  html {
-    scrollbar-gutter: stable;
+  @supports (scrollbar-gutter: stable) {
+    html {
+      scrollbar-gutter: stable;
+    }
   }
 
   /* Nested h1 size/margin: match modern UA (Safari still nests sectioning styles). */
@@ -139,13 +136,6 @@ template {
     margin-block: 0.67em;
   }
 
-  /* abbr[title]: dotted underline + help cursor across engines. */
-  abbr[title] {
-    cursor: help;
-    text-decoration-line: underline;
-    text-decoration-style: dotted;
-  }
-
   /* mark: system Highlight colors under forced-colors. */
   @media (forced-colors: active) {
     mark {
@@ -215,17 +205,12 @@ template {
     direction: ltr;
   }
 
-  /* Tables: collapsed borders + cell padding for scanability. */
+  /* Tables: outer border. Cell borders and padding come from
+   * miscellaneous/tables.css, which is unlayered and therefore wins. */
   table {
     border: 1px solid currentColor;
   }
 
-  th,
-  td {
-    border: 1px solid currentColor;
-    padding: 0.25em 0.5em;
-  }
-
   /* Soft dialog / popover enter transitions (skip when reduced-motion is on). */
   @media (prefers-reduced-motion: no-preference) {
     dialog::backdrop {
@@ -259,26 +244,11 @@ template {
     }
   }
 
-  /* Keep [hidden] hard-hidden except until-found. */
-  [hidden]:not([hidden='until-found']) {
-    display: none !important;
-  }
-
   /* Images as blocks (max-width still from embedded-content.css). */
   img {
     display: block;
   }
 
-  /* summary: pointer on the whole control, not only ::marker. */
-  summary {
-    cursor: default;
-  }
-
-  /* iframes: no default border. */
-  iframe {
-    border: none;
-  }
-
   /* Popovers: anchor near trigger when position-area is supported. */
   @supports (position-area: block-end span-inline-end) {
     [popover] {
@@ -356,7 +326,18 @@ h6 {
   color: inherit;
   line-height: 1.25;
   margin-bottom: var(--bf-spacing-lg);
-  text-wrap: balance;
+}
+
+/* Balanced headings where supported; no-op elsewhere. */
+@supports (text-wrap: balance) {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-wrap: balance;
+  }
 }
 
 h1 {
@@ -441,6 +422,7 @@ strong {
   font-weight: inherit;
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors -- normalize.css Safari fix */
 b,
 strong {
   font-weight: bolder;
@@ -1116,7 +1098,7 @@ a:not([href], [class]):hover {
 a:not([href], [tabindex]):focus {
   outline: 0;
 }
-/* Keyboard-first focus: orange :focus-visible ring; mute mouse outline.
+/* Keyboard-first focus: :focus-visible ring from --bf-focus-ring-*; mute mouse outline.
  * Text-like controls clear UA outline here; field chrome is in forms/styling.css. */
 
 :where(:focus:not(:focus-visible)) {
@@ -1129,8 +1111,8 @@ a:not([href], [tabindex]):focus {
 }
 
 :focus-visible {
-  outline: 0.2rem solid var(--bf-orange);
-  outline-offset: 0.3rem;
+  outline: var(--bf-focus-ring-width) solid var(--bf-focus-ring-color);
+  outline-offset: var(--bf-focus-ring-offset);
 }
 
 /* Clear UA outline on text-like controls (styled fields keep their own chrome).
@@ -1155,8 +1137,7 @@ button:focus,
 [type='checkbox']:focus,
 input[list]:focus,
 select:focus,
-textarea:focus,
-.bf-btn:focus {
+textarea:focus {
   outline: 0;
 }
 /* List spacing and nav list reset. */
@@ -1187,7 +1168,6 @@ ol {
 nav ol,
 nav ul {
   list-style: none;
-  list-style-image: none;
   margin-left: 0;
 }
 
@@ -1430,6 +1410,12 @@ caption {
     text-decoration: underline;
   }
 
+  /* Darker amber clears WCAG 1.4.11 (3:1) on white, --bf-light and --bf-dark-bg;
+   * the default --bf-orange ring is only ~2:1 on white. */
+  :root {
+    --bf-focus-ring-color: rgb(184 115 0);
+  }
+
   :focus-visible {
     outline-width: 0.3rem;
     outline-offset: 0.4rem;
@@ -1468,11 +1454,58 @@ caption {
   button,
   [type='button'],
   [type='reset'],
-  [type='submit'],
-  .bf-btn {
+  [type='submit'] {
     border: 1px solid ButtonText;
   }
 }
+/* Screen-reader and keyboard helpers (.bf-sr-only, .bf-skip-link, .bf-focusable).
+ * Class-based and utilities builds only; classless ships no .bf-* classes. */
+
+/* Visually hidden; available to screen readers (h5bp / Snook). */
+.bf-sr-only {
+  border: 0 !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}
+
+/* .bf-sr-only, revealed on focus. .focusable is the legacy name; both work. */
+.bf-sr-only.focusable:active,
+.bf-sr-only.focusable:focus,
+.bf-sr-only.bf-focusable:active,
+.bf-sr-only.bf-focusable:focus {
+  clip: auto !important;
+  height: auto !important;
+  margin: 0 !important;
+  overflow: visible !important;
+  position: static !important;
+  white-space: inherit !important;
+  width: auto !important;
+}
+
+/* Skip link: hidden until focused, then pinned to the top-left without
+ * reflowing the page (unlike .bf-sr-only.focusable, which returns to flow). */
+.bf-skip-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  padding: var(--bf-spacing-md) var(--bf-spacing-lg);
+  color: var(--bf-blue);
+  background-color: var(--bf-white);
+  border: 1px solid var(--bf-gray-light);
+  transform: translateY(-100%);
+}
+
+.bf-skip-link:focus,
+.bf-skip-link:focus-visible {
+  transform: translateY(0);
+}
 
 /* Utilities */
 /* Display, visibility, float, position, and width helpers. */
@@ -1506,30 +1539,8 @@ caption {
   padding: 0 !important;
 }
 
-/* Visually hidden; available to screen readers (h5bp / Snook). */
-.bf-sr-only {
-  border: 0 !important;
-  clip: rect(0, 0, 0, 0) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  white-space: nowrap !important;
-  width: 1px !important;
-}
-
-/* .bf-sr-only, revealed on focus (skip links). */
-.bf-sr-only.focusable:active,
-.bf-sr-only.focusable:focus {
-  clip: auto !important;
-  height: auto !important;
-  margin: 0 !important;
-  overflow: visible !important;
-  position: static !important;
-  white-space: inherit !important;
-  width: auto !important;
-}
+/* .bf-sr-only, .bf-focusable and .bf-skip-link live in
+ * miscellaneous/a11y-helpers.css (class-based and utilities builds). */
 
 .bf-invisible {
   visibility: hidden !important;
@@ -2115,19 +2126,24 @@ table th[class^='bf-col'] {
   margin-right: 0 !important;
 }
 
-.bf-m-1 {
+/* .bf-m-N is the historical short form of .bf-m-b-N; both set margin-bottom. */
+.bf-m-1,
+.bf-m-b-1 {
   margin-bottom: var(--bf-spacing-md) !important;
 }
 
-.bf-m-2 {
+.bf-m-2,
+.bf-m-b-2 {
   margin-bottom: var(--bf-spacing-lg) !important;
 }
 
-.bf-m-3 {
+.bf-m-3,
+.bf-m-b-3 {
   margin-bottom: var(--bf-spacing-xl) !important;
 }
 
-.bf-m-4 {
+.bf-m-4,
+.bf-m-b-4 {
   margin-bottom: var(--bf-spacing-xxl) !important;
 }
 
@@ -2147,22 +2163,6 @@ table th[class^='bf-col'] {
   margin-top: var(--bf-spacing-xxl) !important;
 }
 
-.bf-m-b-1 {
-  margin-bottom: var(--bf-spacing-md) !important;
-}
-
-.bf-m-b-2 {
-  margin-bottom: var(--bf-spacing-lg) !important;
-}
-
-.bf-m-b-3 {
-  margin-bottom: var(--bf-spacing-xl) !important;
-}
-
-.bf-m-b-4 {
-  margin-bottom: var(--bf-spacing-xxl) !important;
-}
-
 .bf-p-0 {
   padding: 0 !important;
 }
@@ -2183,19 +2183,24 @@ table th[class^='bf-col'] {
   padding-right: 0 !important;
 }
 
-.bf-p-1 {
+/* .bf-p-N is the historical short form of .bf-p-b-N; both set padding-bottom. */
+.bf-p-1,
+.bf-p-b-1 {
   padding-bottom: var(--bf-spacing-md) !important;
 }
 
-.bf-p-2 {
+.bf-p-2,
+.bf-p-b-2 {
   padding-bottom: var(--bf-spacing-lg) !important;
 }
 
-.bf-p-3 {
+.bf-p-3,
+.bf-p-b-3 {
   padding-bottom: var(--bf-spacing-xl) !important;
 }
 
-.bf-p-4 {
+.bf-p-4,
+.bf-p-b-4 {
   padding-bottom: var(--bf-spacing-xxl) !important;
 }
 
@@ -2214,22 +2219,6 @@ table th[class^='bf-col'] {
 .bf-p-t-4 {
   padding-top: var(--bf-spacing-xxl) !important;
 }
-
-.bf-p-b-1 {
-  padding-bottom: var(--bf-spacing-md) !important;
-}
-
-.bf-p-b-2 {
-  padding-bottom: var(--bf-spacing-lg) !important;
-}
-
-.bf-p-b-3 {
-  padding-bottom: var(--bf-spacing-xl) !important;
-}
-
-.bf-p-b-4 {
-  padding-bottom: var(--bf-spacing-xxl) !important;
-}
 /* .bf-btn and variants. */
 
 .bf-btn {
@@ -2255,6 +2244,10 @@ table th[class^='bf-col'] {
   transition: all 0.2s;
 }
 
+.bf-btn:focus {
+  outline: 0;
+}
+
 .bf-btn:hover,
 .bf-btn:active,
 .bf-btn:focus {
@@ -2303,6 +2296,12 @@ table th[class^='bf-col'] {
   background-color: var(--bf-gray-light);
   outline: none !important;
 }
+
+@media (forced-colors: active) {
+  .bf-btn {
+    border: 1px solid ButtonText;
+  }
+}
 /* Focused / invalid / disabled form state classes. */
 
 .bf-focused {
@@ -2619,6 +2618,52 @@ dt {
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
+/* Opt-in color-scheme. Put one on <html> so the UA themes native widgets
+ * (date pickers, select popups, autofill, scrollbars) to match the build. */
+
+.bf-scheme-light {
+  color-scheme: light;
+}
+
+.bf-scheme-dark {
+  color-scheme: dark;
+}
+
+.bf-scheme-auto {
+  color-scheme: light dark;
+}
+/* Opt-in minimum target size (WCAG 2.5.8, 24x24 CSS px).
+ * Grows the hit box only; the painted control keeps its size. */
+
+.bf-target-size,
+.bf-target-size a,
+.bf-target-size button,
+.bf-target-size [type='button'],
+.bf-target-size [type='reset'],
+.bf-target-size [type='submit'],
+.bf-target-size [type='checkbox'],
+.bf-target-size [type='radio'],
+.bf-target-size select,
+.bf-target-size summary,
+.bf-target-size .bf-btn {
+  min-block-size: 24px;
+  min-inline-size: 24px;
+}
+
+/* Inline links in running text are exempt (WCAG 2.5.8 inline exception). */
+.bf-target-size p a,
+.bf-target-size li a,
+.bf-target-size td a,
+.bf-target-size dd a {
+  min-block-size: 0;
+  min-inline-size: 0;
+}
+/* Opt-in accent-color: native checkbox, radio, range and progress follow
+ * --bf-blue instead of the UA default. Put it on <html> or any container. */
+
+.bf-accent-native {
+  accent-color: var(--bf-blue);
+}
 /* Print styles (adapted from h5bp main.css). */
 
 @media print {
@@ -2700,8 +2745,17 @@ dt {
 @media (prefers-color-scheme: dark) {
 
 /* Shared dark-mode rules for always-dark and prefers-color-scheme builds.
+ * Element rules come from _utility-global-dark-elements.css, which the
+ * classless dark sheet imports too; only the .bf-* extras live here.
  * Variant-only extras: utility-global-dark.css. Scrollbars: global-dark-scrollbars.css.
  * Underscore prefix excludes this file from the buildAllCss glob. */
+}
+@media (prefers-color-scheme: dark) {
+
+/* Element-level dark-mode rules, shared by the class-based and classless dark
+ * sheets. Contains no .bf-* selector, so the classless builds can import it as
+ * they are. Class-based extras live in _utility-global-dark-shared.css.
+ * Underscore prefix excludes this file from the buildAllCss glob. */
 
 html {
   color: var(--bf-light);
@@ -2787,17 +2841,6 @@ textarea:focus {
   box-shadow: 0 0 0 3px var(--bf-dark-shadow-focus);
 }
 
-.bf-focused {
-  border-color: var(--bf-dark-border-focus) !important;
-  box-shadow: 0 0 0 3px var(--bf-dark-shadow-focus) !important;
-}
-
-.bf-invalid,
-.bf-invalid:focus {
-  color: var(--bf-dark-invalid) !important;
-  border-color: var(--bf-dark-invalid) !important;
-}
-
 select:not([size], select[multiple]) {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23f0f0f0' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
 }
@@ -2830,8 +2873,7 @@ textarea::placeholder {
 button,
 [type='button'],
 [type='reset'],
-[type='submit'],
-.bf-btn {
+[type='submit'] {
   background: var(--bf-gray-light);
 }
 
@@ -2846,10 +2888,7 @@ button:focus,
 [type='reset']:focus,
 [type='submit']:hover,
 [type='submit']:active,
-[type='submit']:focus,
-.bf-btn:hover,
-.bf-btn:active,
-.bf-btn:focus {
+[type='submit']:focus {
   background: var(--bf-dark-button-hover);
 }
 
@@ -2860,7 +2899,56 @@ button:focus,
 [type='reset']:active,
 [type='reset']:focus,
 [type='submit']:active,
-[type='submit']:focus,
+[type='submit']:focus {
+  box-shadow: 0 0 0 3px var(--bf-dark-button-shadow);
+}
+
+dialog {
+  color: var(--bf-light);
+  background-color: var(--bf-dark-bg);
+}
+
+caption {
+  color: var(--bf-gray-light);
+}
+
+progress[value] {
+  background: var(--bf-gray-dark-extra);
+  color: var(--bf-blue);
+}
+
+progress[value]::-webkit-progress-bar {
+  background: var(--bf-gray-dark-extra);
+}
+
+progress[value]::-webkit-progress-value {
+  background: var(--bf-blue);
+}
+}
+
+@media (prefers-color-scheme: dark) {
+
+.bf-focused {
+  border-color: var(--bf-dark-border-focus) !important;
+  box-shadow: 0 0 0 3px var(--bf-dark-shadow-focus) !important;
+}
+
+.bf-invalid,
+.bf-invalid:focus {
+  color: var(--bf-dark-invalid) !important;
+  border-color: var(--bf-dark-invalid) !important;
+}
+
+.bf-btn {
+  background: var(--bf-gray-light);
+}
+
+.bf-btn:hover,
+.bf-btn:active,
+.bf-btn:focus {
+  background: var(--bf-dark-button-hover);
+}
+
 .bf-btn:active,
 .bf-btn:focus {
   box-shadow: 0 0 0 3px var(--bf-dark-button-shadow);
@@ -2890,29 +2978,8 @@ button:focus,
 .bf-table-responsive--zebra tbody tr:nth-child(odd) {
   background-color: var(--bf-gray-dark-extra);
 }
-
-dialog {
-  color: var(--bf-light);
-  background-color: var(--bf-dark-bg);
 }
 
-caption {
-  color: var(--bf-gray-light);
-}
-
-progress[value] {
-  background: var(--bf-gray-dark-extra);
-  color: var(--bf-blue);
-}
-
-progress[value]::-webkit-progress-bar {
-  background: var(--bf-gray-dark-extra);
-}
-
-progress[value]::-webkit-progress-value {
-  background: var(--bf-blue);
-}
-}
 @media (prefers-color-scheme: dark) {
 
 /* Dark scrollbar colors (Firefox + WebKit). */