use --wa-font-weight-code in native styles

packages/webawesome/docs/_data/themer.js

@@ -12,22 +12,22 @@ export const themes = [
     isPro: false,
     fonts: {
       body: {
-        name: 'OS Default',
+        name: 'OS Default (sans-serif)',
         css: 'ui-sans-serif, system-ui, sans-serif',
         href: null,
       },
       heading: {
-        name: 'OS Default',
+        name: 'OS Default (sans-serif)',
         css: 'ui-sans-serif, system-ui, sans-serif',
         href: null,
       },
       code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
         css: 'ui-monospace, monospace',
         href: null,
       },
       longform: {
-        name: 'OS Default',
+        name: 'OS Default (serif)',
         css: 'ui-serif, serif',
         href: null,
       },
@@ -82,7 +82,7 @@ export const themes = [
         href: 'https://fonts.bunny.net/css2?family=Quicksand:wght@300..700&display=swap',
       },
       code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
         css: 'ui-monospace, monospace',
         href: null,
       },
@@ -132,22 +132,22 @@ export const themes = [
     isPro: false,
     fonts: {
       body: {
-        name: 'OS Default',
+        name: 'OS Default (sans-serif)',
         css: 'ui-sans-serif, system-ui, sans-serif',
         href: null,
       },
       heading: {
-        name: 'OS Default',
+        name: 'OS Default (sans-serif)',
         css: 'ui-sans-serif, system-ui, sans-serif',
         href: null,
       },
       code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
         css: 'ui-monospace, monospace',
         href: null,
       },
       longform: {
-        name: 'OS Default',
+        name: 'OS Default (serif)',
         css: 'ui-serif, serif',
         href: null,
       },
@@ -442,7 +442,7 @@ export const themes = [
         href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap',
       },
       code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
         css: 'ui-monospace, monospace',
         href: null,
       },
@@ -562,7 +562,7 @@ export const themes = [
         href: 'https://fonts.bunny.net/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap',
       },
       code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
         css: 'ui-monospace, monospace',
         href: null,
       },
@@ -622,12 +622,12 @@ export const themes = [
         href: 'https://fonts.bunny.net/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap',
       },
       code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
         css: 'ui-monospace, monospace',
         href: null,
       },
       longform: {
-        name: 'OS Default',
+        name: 'OS Default (serif)',
         css: 'ui-serif, serif',
         href: null,
       },

packages/webawesome/docs/docs/resources/changelog.md

@@ -24,6 +24,8 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Added the Kazakh translation [pr:1496]
 - Added docs for code completion for VS Code and JetBrains [pr:1550]
 - Added back the missing `form-control-label` part to `<wa-textarea>` for consistency with other form controls [pr:1533]
+- Added focus delegation to `<wa-button>` to ensure tabbing works properly when using `tabindex` [issue:1622]
+- Added [text utilities](/docs/utilities/text/) for longform text, form control text, font sizes, font weights, text color, and truncation [pr:1602]
 - Fixed a bug in `<wa-button>` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377]
 - Fixed focus outline styles in `<wa-details>` and native `<details>` [issue:1456]
 - Fixed focus outline styles in `<wa-scroller>`, `<wa-dialog>`, and `<wa-drawer>` [issue:1484]
@@ -37,9 +39,9 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug that caused the required `*` in form labels to have incorrect spacing in `<wa-checkbox>` and `<wa-switch>` [issue:1472]
 - Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that caused the component to prematurely hide when certain child elements are used [pr:1636]
 - Improved autofill styles in `<wa-input>` so they span the entire width of the visual input [issue:1439]
-- Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
 - Improved [text utilities](/docs/utilities/text/) so that each size modifier always exactly matches the applied font size [pr:1602]
-- Added [text utilities](/docs/utilities/text/) for longform text, form control text, font sizes, font weights, text color, and truncation [pr:1602]
+- Improved Native Styles to use the `--wa-font-weight-code` design token
+- Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
 - Upgraded `<wa-page>` from _experimental_ to _stable_
 
 ## 3.0.0-beta.6

packages/webawesome/src/components/button/button.ts

@@ -41,6 +41,7 @@ import styles from './button.css';
  */
 @customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
+  static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
   static css = [styles, variantStyles, sizeStyles];
 
   static get validators() {

packages/webawesome/src/styles/native.css

@@ -228,6 +228,7 @@
 
     font-family: var(--wa-font-family-code);
     font-size: var(--wa-font-size-smaller);
+    font-weight: var(--wa-font-weight-code);
 
     border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
     border-radius: var(--wa-border-radius-s);
@@ -281,6 +282,7 @@
 
     font-family: var(--wa-font-family-code);
     font-size: var(--wa-font-size-smaller);
+    font-weight: var(--wa-font-weight-code);
 
     background-color: var(--wa-color-overlay-inline);
     border-radius: var(--wa-border-radius-s);
@@ -291,6 +293,7 @@
 
     font-family: var(--wa-font-family-code);
     font-size: var(--wa-font-size-smaller);
+    font-weight: var(--wa-font-weight-code);
     white-space: pre;
 
     background-color: var(--wa-color-overlay-inline);