Merge branch 'develop' of github.com:Amsterdam/design-system into fix…

…/DES-1094-tabs-list-with-one-child

package.json

@@ -47,7 +47,7 @@
     "npm-run-all": "4.1.5",
     "plop": "4.0.1",
     "postcss": "8.4.49",
-    "prettier": "3.4.1",
+    "prettier": "3.4.2",
     "rimraf": "6.0.1",
     "stylelint": "16.11.0",
     "stylelint-config-standard-scss": "13.1.0",

packages/css/package.json

@@ -24,7 +24,7 @@
     "clean": "rimraf dist/"
   },
   "devDependencies": {
-    "sass": "1.81.0"
+    "sass": "1.82.0"
   },
   "peerDependencies": {
     "@amsterdam/design-system-tokens": "workspace:*",

packages/css/src/components/overlap/overlap.scss

@@ -7,6 +7,7 @@
   display: grid;
 
   > * {
-    grid-area: 1 / -1;
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
   }
 }

packages/css/src/components/tabs/tabs.scss

@@ -20,15 +20,15 @@
 }
 
 .ams-tabs__list {
-  background-color: var(--ams-tabs-list-background-color);
-  border-block-end: var(--ams-tabs-list-border-block-end);
+  box-shadow: var(--ams-tabs-list-box-shadow);
   display: flex;
   overflow-x: auto;
 }
 
 .ams-tabs__button {
   color: var(--ams-tabs-button-color);
   cursor: var(--ams-tabs-button-cursor);
+  display: grid;
   font-family: var(--ams-tabs-button-font-family);
   font-size: var(--ams-tabs-button-font-size);
   font-weight: var(--ams-tabs-button-font-weight);
@@ -41,7 +41,7 @@
 
   &:disabled {
     color: var(--ams-tabs-button-disabled-color);
-    cursor: var(--ams-tab-button-disabled-cursor);
+    cursor: var(--ams-tabs-button-disabled-cursor);
 
     @media (forced-colors: active) {
       color: GrayText;
@@ -54,11 +54,26 @@
   }
 
   &[aria-selected="true"] {
-    background-color: var(--ams-tabs-button-selected-background-color);
+    box-shadow: var(--ams-tabs-button-selected-box-shadow);
     color: var(--ams-tabs-button-selected-color);
+    font-weight: var(--ams-tabs-button-selected-font-weight);
 
     @media (forced-colors: active) {
       background-color: SelectedItem;
     }
   }
 }
+
+.ams-tabs__button-label,
+.ams-tabs__button-label-hidden {
+  grid-area: 1 / 1;
+}
+
+// This hidden label is used to prevent a layout shift when the tab is selected
+// and the button text becomes bold.
+.ams-tabs__button-label-hidden {
+  font-weight: var(--ams-tabs-button-selected-font-weight);
+  pointer-events: none;
+  user-select: none;
+  visibility: hidden;
+}

packages/react/package.json

@@ -45,34 +45,34 @@
     "@babel/core": "7.26.0",
     "@babel/plugin-transform-runtime": "7.25.9",
     "@babel/preset-env": "7.26.0",
-    "@babel/preset-react": "7.25.9",
+    "@babel/preset-react": "7.26.3",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "28.0.1",
     "@rollup/plugin-node-resolve": "15.3.0",
     "@rollup/pluginutils": "5.1.3",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.0.1",
+    "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.14",
     "@types/lodash": "4.17.13",
     "@types/react": "18.3.12",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "next": "15.0.3",
+    "next": "15.0.4",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.49",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rollup": "4.28.0",
+    "rollup": "4.28.1",
     "rollup-plugin-delete": "2.1.0",
     "rollup-plugin-dts": "6.1.1",
     "rollup-plugin-filesize": "10.0.0",
     "rollup-plugin-node-externals": "7.1.3",
     "rollup-plugin-node-polyfills": "0.2.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.81.0",
+    "sass": "1.82.0",
     "tslib": "2.8.1"
   },
   "peerDependencies": {

packages/react/src/Tabs/TabsButton.tsx

@@ -33,7 +33,10 @@ export const TabsButton = forwardRef(
         role="tab"
         tabIndex={activeTab === tab ? 0 : -1}
       >
-        {children}
+        <span aria-hidden="true" className="ams-tabs__button-label-hidden">
+          {children}
+        </span>
+        <span className="ams-tabs__button-label">{children}</span>
       </button>
     )
   },