chore: continued refactoring of inline elements

2025-11-13 00:05:11 -05:00 · 2025-10-24 00:10:27 +02:00 · 2025-10-24 00:10:27 +02:00 · 1269919922
commit 1269919922
parent 7a95e4222d
13 changed files with 404 additions and 99 deletions
--- a/scss/block/_preformatted-text.scss
+++ b/scss/block/_preformatted-text.scss
@ -21,3 +21,33 @@
    font-weight: var(#{$css-var-prefix}font-weight);
  }
 }
+
+@if map.get($modules, "content/code") {
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Correct the inheritance and scaling of font size in all browsers
+  // 2. Correct the odd `em` font sizing in all browsers
+  #{$parent-selector} pre {
+    font-size: 0.875em; // 2
+    font-family: var(#{$css-var-prefix}font-family); // 1
+    // Prevent overflow of the container in all browsers (opinionated)
+    -ms-overflow-style: scrollbar;
+    overflow: auto;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+  #{$parent-selector} pre {
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background: var(#{$css-var-prefix}code-background-color);
+    color: var(#{$css-var-prefix}code-color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    line-height: initial;
+    display: block;
+    margin-bottom: var(#{$css-var-prefix}spacing);
+    overflow-x: auto;
+  }
+}
--- a/scss/content/_typography.scss
+++ b/scss/content/_typography.scss
@ -11,12 +11,6 @@
  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
  // ––––––––––––––––––––

-  // Add the correct font weight in Chrome, Edge, and Safari
-  #{$parent-selector} b,
-  #{$parent-selector} strong {
-    font-weight: bolder;
-  }
-
  // Prevent `sub` and `sup` elements from affecting the line height in all browsers
  #{$parent-selector} sub,
  #{$parent-selector} sup {
--- a/scss/inline/_bidirectional-isolation.scss
+++ b/scss/inline/_bidirectional-isolation.scss
@ -1,6 +1,4 @@
 /** SASS for the <bdi> HTML element
- *
-
 *
 * Add your styles here
 */
--- a/scss/inline/_bidirectional-override.scss
+++ b/scss/inline/_bidirectional-override.scss
@ -1,6 +1,4 @@
 /** SASS for the <bdo> HTML element
- *
-
 *
 * Add your styles here
 */
--- a/scss/inline/_bold.scss
+++ b/scss/inline/_bold.scss
@ -1,6 +1,13 @@
 /** SASS for the <b> HTML element
- *
-
 *
 * Add your styles here
 */
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/typography") {
+  // Add the correct font weight in Chrome, Edge, and Safari
+  #{$parent-selector} b{
+    font-weight: bolder;
+  }
+}
--- a/scss/inline/_button.scss
+++ b/scss/inline/_button.scss
@ -1,28 +1,10 @@
 /** SASS for the <button> HTML element
 *
- * Found in scss/components/_accordion.scss#74: `// Type button`
 * Found in scss/components/_accordion.scss#75: `&[role="button"] {`
 * Found in scss/components/_dropdown.scss#18: `> button,`
 * Found in scss/components/_group.scss#43: `button,`
 * Found in scss/components/_group.scss#46: `[type="button"],`
 * Found in scss/components/_group.scss#47: `[role="button"],`
- * Found in scss/components/_group.scss#55: `button,`
- * Found in scss/components/_group.scss#58: `[type="button"],`
- * Found in scss/components/_group.scss#59: `[role="button"] {`
- * Found in scss/components/_group.scss#64: `// Group box shadow when a button is focused`
- * Found in scss/components/_group.scss#65: `&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {`
- * Found in scss/components/_group.scss#67: `#{\$css-var-prefix}group-box-shadow-focus-with-button`
- * Found in scss/components/_group.scss#77: `&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {`
- * Found in scss/components/_group.scss#82: `// Adapt box shadow for buttons`
- * Found in scss/components/_group.scss#83: `button,`
- * Found in scss/components/_group.scss#85: `[type="button"],`
- * Found in scss/components/_group.scss#86: `[role="button"] {`
- * Found in scss/components/_group.scss#87: `#{\$css-var-prefix}button-box-shadow: 0 0 0 var(#{\$css-var-prefix}border-width)`
- * Found in scss/components/_group.scss#89: `#{\$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{\$css-var-prefix}border-width)`
- * Found in scss/components/_group.scss#94: `// Remove button box shadow if we have a group box shadow`
- * Found in scss/components/_group.scss#95: `button,`
- * Found in scss/components/_group.scss#98: `[type="button"],`
- * Found in scss/components/_group.scss#99: `[role="button"] {`
 * Found in scss/components/_loading.scss#36: `#{\$parent-selector} button,`
 * Found in scss/components/_loading.scss#38: `#{\$parent-selector} [type="button"],`
 * Found in scss/components/_loading.scss#40: `#{\$parent-selector} [role="button"],`
@ -30,43 +12,13 @@
 * Found in scss/components/_modal.scss#39: `":is(a, button)[rel=prev]"`
 * Found in scss/components/_modal.scss#74: `button,`
 * Found in scss/components/_modal.scss#75: `[role="button"] {`
- * Found in scss/components/_nav.scss#64: `// Minimal support for buttons and forms elements`
 * Found in scss/components/_nav.scss#65: `button,`
 * Found in scss/components/_nav.scss#66: `[role="button"],`
 * Found in scss/components/_nav.scss#67: `[type="button"],`
- * Found in scss/components/_nav.scss#139: `// Minimal support for links as buttons`
 * Found in scss/components/_nav.scss#140: `[role="button"] {`
 * Found in scss/components/_tooltip.scss#12: `&:not(a, button, input, [role="button"]) {`
- * Found in scss/content/_button.scss#4: `@if map.get($modules, "content/button") {`
- * Found in scss/content/_button.scss#17: `#{\$parent-selector} button {`
- * Found in scss/content/_button.scss#24: `// Correct the inability to style buttons in iOS and Safari`
- * Found in scss/content/_button.scss#25: `#{\$parent-selector} button,`
- * Found in scss/content/_button.scss#28: `#{\$parent-selector} [type="button"] {`
- * Found in scss/content/_button.scss#29: `-webkit-appearance: button;`
- * Found in scss/content/_button.scss#35: `#{\$parent-selector} button,`
- * Found in scss/content/_button.scss#38: `#{\$parent-selector} [type="button"],`
- * Found in scss/content/_button.scss#39: `#{\$parent-selector} [type="file"]::file-selector-button,`
- * Found in scss/content/_button.scss#40: `#{\$parent-selector} [role="button"] {`
- * Found in scss/content/_button.scss#44: `#{\$css-var-prefix}box-shadow: var(#{\$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));`
- * Found in scss/content/_button.scss#74: `#{\$css-var-prefix}button-hover-box-shadow,`
- * Found in scss/content/_button.scss#83: `var(#{\$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),`
- * Found in scss/content/_button.scss#90: `#{\$parent-selector} [type="button"] {`
- * Found in scss/content/_button.scss#97: `#{\$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,`
- * Found in scss/content/_button.scss#99: `#{\$parent-selector} [type="file"]::file-selector-button {`
- * Found in scss/content/_button.scss#114: `var(#{\$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),`
- * Found in scss/content/_button.scss#120: `#{\$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {`
- * Found in scss/content/_button.scss#134: `var(#{\$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),`
- * Found in scss/content/_button.scss#140: `#{\$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,`
- * Found in scss/content/_button.scss#155: `:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,`
- * Found in scss/content/_button.scss#168: `:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {`
- * Found in scss/content/_button.scss#178: `// Secondary button without .class`
- * Found in scss/content/_button.scss#180: `#{\$parent-selector} [type="file"]::file-selector-button {`
- * Found in scss/content/_button.scss#194: `var(#{\$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),`
- * Found in scss/content/_button.scss#202: `:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],`
- * Found in scss/content/_button.scss#205: `:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {`
 * Found in scss/content/_link.scss#9: `#{\$parent-selector} :where(a:not([role="button"])),`
 * Found in scss/content/_link.scss#65: `&[role="button"] {`
- * Found in scss/forms/_basics.scss#61: `// Correct the cursor style of increment and decrement buttons in Safari`
 * Found in scss/forms/_basics.scss#62: `#{\$parent-selector} ::-webkit-inner-spin-button,`
 * Found in scss/forms/_basics.scss#63: `#{\$parent-selector} ::-webkit-outer-spin-button {`
 * Found in scss/forms/_basics.scss#81: `#{\$parent-selector} ::-webkit-file-upload-button {`
@ -97,3 +49,201 @@
    -ms-touch-action: manipulation;
  }
 }
+
+@if map.get($modules, "content/button") {
+  // 1. Change the font styles in all browsers
+  // 2. Remove the margin on controls in Safari
+  // 3. Show the overflow in Edge
+  #{$parent-selector} button {
+    margin: 0; // 2
+    overflow: visible; // 3
+    font-family: inherit; // 1
+    text-transform: none; // 1
+  }
+
+  // Correct the inability to style buttons in iOS and Safari
+  #{$parent-selector} button,
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [type="button"] {
+    -webkit-appearance: button;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  #{$parent-selector} button,
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [type="button"],
+  #{$parent-selector} [type="file"]::file-selector-button,
+  #{$parent-selector} [role="button"] {
+    #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
+    #{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    padding: var(#{$css-var-prefix}form-element-spacing-vertical)
+      var(#{$css-var-prefix}form-element-spacing-horizontal);
+    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    outline: none;
+    background-color: var(#{$css-var-prefix}background-color);
+    box-shadow: var(#{$css-var-prefix}box-shadow);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    font-size: 1rem;
+    line-height: var(#{$css-var-prefix}line-height);
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+
+    @if $enable-transitions {
+      transition:
+        background-color var(#{$css-var-prefix}transition),
+        border-color var(#{$css-var-prefix}transition),
+        color var(#{$css-var-prefix}transition),
+        box-shadow var(#{$css-var-prefix}transition);
+    }
+
+    &:is([aria-current]:not([aria-current="false"])),
+    &:is(:hover, :active, :focus) {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
+      #{$css-var-prefix}box-shadow: var(
+        #{$css-var-prefix}button-hover-box-shadow,
+        0 0 0 rgba(0, 0, 0, 0)
+      );
+      #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      #{$css-var-prefix}box-shadow:
+        var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+        0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
+    }
+  }
+
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [type="button"] {
+    margin-bottom: var(#{$css-var-prefix}spacing);
+  }
+
+  // .secondary, .contrast & .outline
+  @if $enable-classes {
+    // Secondary
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
+    #{$parent-selector} [type="reset"],
+    #{$parent-selector} [type="file"]::file-selector-button {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
+      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      cursor: pointer;
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      }
+
+      &:focus,
+      &:is([aria-current]:not([aria-current="false"])):focus {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
+      }
+    }
+
+    // Contrast
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
+      #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
+        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
+      }
+
+      &:focus,
+      &:is([aria-current]:not([aria-current="false"])):focus {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
+      }
+    }
+
+    // Outline (primary)
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
+    [type="reset"].outline {
+      #{$css-var-prefix}background-color: transparent;
+      #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: transparent;
+        #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover);
+      }
+    }
+
+    // Outline (secondary)
+    #{$parent-selector}
+      :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
+    [type="reset"].outline {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
+      }
+    }
+
+    // Outline (contrast)
+    #{$parent-selector}
+      :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
+      }
+    }
+  } @else {
+    // Secondary button without .class
+    #{$parent-selector} [type="reset"],
+    #{$parent-selector} [type="file"]::file-selector-button {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
+      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      cursor: pointer;
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      }
+
+      &:focus {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
+      }
+    }
+  }
+
+  // Button [disabled]
+  #{$parent-selector}
+    :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
+  #{$parent-selector}
+    :where(fieldset[disabled])
+    :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
--- a/scss/inline/_citation.scss
+++ b/scss/inline/_citation.scss
@ -1,6 +1,4 @@
 /** SASS for the <cite> HTML element
- *
-
 *
 * Add your styles here
 */
--- a/scss/inline/_code.scss
+++ b/scss/inline/_code.scss
@ -13,3 +13,48 @@
 *
 * Add your styles here
 */
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/code") {
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Correct the inheritance and scaling of font size in all browsers
+  // 2. Correct the odd `em` font sizing in all browsers
+  #{$parent-selector} code {
+    font-size: 0.875em; // 2
+    font-family: var(#{$css-var-prefix}font-family); // 1
+  }
+
+  #{$parent-selector} pre code{
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+  #{$parent-selector} code {
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background: var(#{$css-var-prefix}code-background-color);
+    color: var(#{$css-var-prefix}code-color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    line-height: initial;
+  }
+
+  #{$parent-selector} code {
+    display: inline-block;
+    padding: 0.375rem;
+  }
+
+  #{$parent-selector} pre {
+    > code {
+      display: block;
+      padding: var(#{$css-var-prefix}spacing);
+      background: none;
+      line-height: var(#{$css-var-prefix}line-height);
+    }
+  }
+}
--- a/scss/inline/_keyboard-input.scss
+++ b/scss/inline/_keyboard-input.scss
@ -10,3 +10,41 @@
 *
 * Add your styles here
 */
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/code") {
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Correct the inheritance and scaling of font size in all browsers
+  // 2. Correct the odd `em` font sizing in all browsers
+  #{$parent-selector} kbd {
+    font-size: 0.875em; // 2
+    font-family: var(#{$css-var-prefix}font-family); // 1
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+  #{$parent-selector} kbd {
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background: var(#{$css-var-prefix}code-background-color);
+    color: var(#{$css-var-prefix}code-color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    line-height: initial;
+  }
+
+  #{$parent-selector} kbd {
+    display: inline-block;
+    padding: 0.375rem;
+  }
+
+  // kbd
+  #{$parent-selector} kbd {
+    background-color: var(#{$css-var-prefix}code-kbd-background-color);
+    color: var(#{$css-var-prefix}code-kbd-color);
+    vertical-align: baseline;
+  }
+}
--- a/scss/inline/_sample-output.scss
+++ b/scss/inline/_sample-output.scss
@ -8,3 +8,48 @@
 *
 * Add your styles here
 */
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/code") {
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Correct the inheritance and scaling of font size in all browsers
+  // 2. Correct the odd `em` font sizing in all browsers
+  #{$parent-selector} samp {
+    font-size: 0.875em; // 2
+    font-family: var(#{$css-var-prefix}font-family); // 1
+  }
+
+  #{$parent-selector} pre samp {
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+  #{$parent-selector} samp {
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background: var(#{$css-var-prefix}code-background-color);
+    color: var(#{$css-var-prefix}code-color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    line-height: initial;
+  }
+
+  #{$parent-selector} samp {
+    display: inline-block;
+    padding: 0.375rem;
+  }
+
+  #{$parent-selector} pre {
+    > samp {
+      display: block;
+      padding: var(#{$css-var-prefix}spacing);
+      background: none;
+      line-height: var(#{$css-var-prefix}line-height);
+    }
+  }
+}
--- a/scss/inline/_strong.scss
+++ b/scss/inline/_strong.scss
@ -4,3 +4,12 @@
 *
 * Add your styles here
 */
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/typography") {
+  // Add the correct font weight in Chrome, Edge, and Safari
+  #{$parent-selector} strong {
+    font-weight: bolder;
+  }
+}
--- a/scss/inline/_subscript.scss
+++ b/scss/inline/_subscript.scss
@ -1,31 +1,19 @@
 /** SASS for the <sub> HTML element
- *
- * Found in scss/components/_group.scss#44: `[type="submit"],`
- * Found in scss/components/_group.scss#56: `[type="submit"],`
- * Found in scss/components/_group.scss#65: `&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {`
- * Found in scss/components/_group.scss#77: `&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {`
- * Found in scss/components/_group.scss#84: `[type="submit"],`
- * Found in scss/components/_group.scss#96: `[type="submit"],`
- * Found in scss/components/_loading.scss#37: `#{\$parent-selector} [type="submit"],`
- * Found in scss/content/_button.scss#26: `#{\$parent-selector} [type="submit"],`
- * Found in scss/content/_button.scss#36: `#{\$parent-selector} [type="submit"],`
- * Found in scss/content/_button.scss#88: `#{\$parent-selector} [type="submit"],`
- * Found in scss/content/_button.scss#97: `#{\$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,`
- * Found in scss/content/_button.scss#120: `#{\$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {`
- * Found in scss/content/_button.scss#140: `#{\$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,`
- * Found in scss/content/_button.scss#155: `:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,`
- * Found in scss/content/_button.scss#168: `:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {`
- * Found in scss/content/_button.scss#202: `:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],`
- * Found in scss/content/_button.scss#205: `:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {`
- * Found in scss/content/_typography.scss#20: `// Prevent `sub` and `sup` elements from affecting the line height in all browsers`
- * Found in scss/content/_typography.scss#21: `#{\$parent-selector} sub,`
- * Found in scss/content/_typography.scss#28: `#{\$parent-selector} sub {`
- * Found in scss/forms/_basics.scss#150: `#{\$parent-selector} button[type="submit"],`
- * Found in scss/forms/_basics.scss#193: `[type="submit"],`
- * Found in scss/forms/_basics.scss#210: `input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),`
- * Found in scss/forms/_basics.scss#220: `[type="submit"],`
- * Found in scss/forms/_basics.scss#238: `#{\$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],`
- * Found in scss/forms/_basics.scss#244: `:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {`
 *
 * Add your styles here
 */
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/typography") {
+  // Prevent `sub` and `sup` elements from affecting the line height in all browsers
+  #{$parent-selector} sub {
+    position: relative;
+    font-size: 0.75em;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+  #{$parent-selector} sub {
+    bottom: -0.25em;
+  }
+}
--- a/scss/inline/_superscript.scss
+++ b/scss/inline/_superscript.scss
@ -1,14 +1,19 @@
 /** SASS for the <sup> HTML element
- *
- * Found in scss/components/_dropdown.scss#229: `// Not working in Firefox, which doesn't support the `:has()` pseudo-class`
- * Found in scss/components/_group.scss#63: `@supports selector(:has(*)) {`
- * Found in scss/components/_nav.scss#64: `// Minimal support for buttons and forms elements`
- * Found in scss/components/_nav.scss#112: `// Minimal support for aria-current`
- * Found in scss/components/_nav.scss#139: `// Minimal support for links as buttons`
- * Found in scss/content/_typography.scss#20: `// Prevent `sub` and `sup` elements from affecting the line height in all browsers`
- * Found in scss/content/_typography.scss#22: `#{\$parent-selector} sup {`
- * Found in scss/content/_typography.scss#31: `#{\$parent-selector} sup {`
- * Found in scss/forms/_checkbox-radio-switch.scss#10: `// Not working in Firefox, which doesn't support the `:has()` pseudo-class`
 *
 * Add your styles here
 */
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/typography") {
+  // Prevent `sub` and `sup` elements from affecting the line height in all browsers
+  #{$parent-selector} sup {
+    position: relative;
+    font-size: 0.75em;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+  #{$parent-selector} sup {
+    top: -0.5em;
+  }
+}