@amsterdam/design-system-css 3.3.0 → 4.1.0

package/src/components/grid/grid.scss

@@ -7,9 +7,12 @@
 @use "mixins" as *;
 
 $ams-grid-column-count: 12;
+$ams-grid-row-span-max: 4;
 
 .ams-grid {
   @include ams-grid;
+
+  align-items: start;
 }
 
 // Grid gap
@@ -64,7 +67,26 @@ $ams-grid-column-count: 12;
   @include ams-grid--padding-vertical--2x-large;
 }
 
-// Column span
+// Cell
+
+.ams-grid__cell {
+  background-color: var(--ams-grid-cell-background-color);
+  padding-block: var(--ams-grid-cell-padding-block);
+  padding-inline: var(--ams-grid-cell-padding-inline);
+}
+
+.ams-grid__cell--flush {
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.ams-grid__cell--transparent {
+  background-color: transparent;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+// Cell span and start
 // The order of these declaration blocks ensures the intended specificity.
 
 .ams-grid__cell--span-all {
@@ -104,3 +126,27 @@ $ams-grid-column-count: 12;
     }
   }
 }
+
+// Cell row span
+
+@for $i from 1 through $ams-grid-row-span-max {
+  .ams-grid__cell--row-span-#{$i} {
+    @include ams-grid__cell--row-span($i);
+  }
+}
+
+@media (min-width: $ams-breakpoint-medium) {
+  @for $i from 1 through $ams-grid-row-span-max {
+    .ams-grid__cell--row-span-#{$i}-medium {
+      @include ams-grid__cell--row-span-medium($i);
+    }
+  }
+}
+
+@media (min-width: $ams-breakpoint-wide) {
+  @for $i from 1 through $ams-grid-row-span-max {
+    .ams-grid__cell--row-span-#{$i}-wide {
+      @include ams-grid__cell--row-span-wide($i);
+    }
+  }
+}

package/src/components/heading/heading.scss

@@ -55,11 +55,6 @@
   line-height: var(--ams-heading-5-line-height);
 }
 
-.ams-heading--6 {
-  font-size: var(--ams-heading-6-font-size);
-  line-height: var(--ams-heading-6-line-height);
-}
-
 .ams-heading--inverse {
   color: var(--ams-heading-inverse-color);
 }

package/src/components/icon/icon.scss

@@ -77,10 +77,3 @@
   font-size: var(--ams-icon-heading-5-font-size);
   line-height: var(--ams-icon-heading-5-line-height);
 }
-
-.ams-icon--heading-6 {
-  --ams-line-height: var(--ams-icon-heading-6-line-height);
-
-  font-size: var(--ams-icon-heading-6-font-size);
-  line-height: var(--ams-icon-heading-6-line-height);
-}

package/src/components/index.scss

@@ -11,6 +11,7 @@
 @use "avatar/avatar";
 @use "badge/badge";
 @use "blockquote/blockquote";
+@use "body/body";
 @use "breadcrumb/breadcrumb";
 @use "breakout/breakout";
 @use "button/button";
@@ -22,7 +23,6 @@
 @use "date-input/date-input";
 @use "description-list/description-list";
 @use "dialog/dialog";
-@use "document/document";
 @use "error-message/error-message";
 @use "field-set/field-set";
 @use "field/field";
@@ -35,7 +35,6 @@
 @use "hint/hint";
 @use "icon-button/icon-button";
 @use "icon/icon";
-@use "icon/icon.deprecated" as *;
 @use "image-slider/image-slider";
 @use "image/image";
 @use "invalid-form-alert/invalid-form-alert";
@@ -51,11 +50,11 @@
 @use "page/page";
 @use "page-footer/page-footer";
 @use "page-header/page-header";
-@use "page-heading/page-heading.deprecated" as *;
 @use "pagination/pagination";
 @use "paragraph/paragraph";
 @use "password-input/password-input";
 @use "progress-list/progress-list";
+@use "prose/prose";
 @use "radio/radio";
 @use "row/row";
 @use "search-field/search-field";
@@ -66,6 +65,7 @@
 @use "switch/switch";
 @use "table-of-contents/table-of-contents";
 @use "table/table";
+@use "tab-navigation/tab-navigation";
 @use "tabs/tabs";
 @use "text-area/text-area";
 @use "text-input/text-input";

package/src/components/margin/README.md

@@ -30,3 +30,4 @@ They are also smaller in [Compact Mode](https://designsystem.amsterdam/docs/docs
   Consult [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) for details.
 - To add equal margins between elements, either use the [Gap](/docs/utilities-css-gap--docs) utility class on their common parent or wrap them in a [Column](/docs/components-layout-column--docs) component.
   This helps in loops: it prevents having to treat the last element differently.
+- Wrap editorial content in the [Prose](/docs/utilities-css-prose--docs) utility class to have all spacing set automatically.

package/src/components/menu/menu.scss

@@ -24,16 +24,34 @@
   padding-inline: calc(var(--ams-grid-padding-inline) - var(--ams-menu-link-padding-inline));
 
   @media (min-width: $ams-breakpoint-medium) {
-    margin-inline: calc(var(--ams-grid-medium-padding-inline) * -1);
-    padding-inline: var(--ams-grid-medium-padding-inline);
+    margin-inline: calc(
+      var(
+          --ams-grid-medium-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+          var(--ams-grid-vi-medium-padding-inline)
+        ) *
+        -1
+    );
+    padding-inline: var(
+      --ams-grid-medium-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-grid-vi-medium-padding-inline)
+    );
   }
 
   @media (min-width: $ams-breakpoint-wide) {
     display: none;
     margin-inline: 0; // Override negative margin above.
-    max-inline-size: var(--ams-menu-wide-max-inline-size);
-    padding-block: var(--ams-menu-wide-padding-block);
-    padding-inline: var(--ams-menu-wide-padding-inline);
+    max-inline-size: var(
+      --ams-menu-wide-max-inline-size /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-menu-vi-wide-max-inline-size)
+    );
+    padding-block: var(
+      --ams-menu-wide-padding-block /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-menu-vi-wide-padding-block)
+    );
+    padding-inline: var(
+      --ams-menu-wide-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-menu-vi-wide-padding-inline)
+    );
   }
 }
 
@@ -83,7 +101,10 @@
     align-items: center;
     display: flex; // The links do stretch in the vertical layout of Menu.
     flex-direction: column;
-    gap: var(--ams-menu-link-wide-gap);
+    gap: var(
+      --ams-menu-link-wide-gap /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-menu-link-vi-wide-gap)
+    );
     text-align: center;
 
     .ams-menu__icon {
@@ -92,21 +113,3 @@
     }
   }
 }
-
-/** @deprecated The menu has a dark background now, so this is no longer needed. */
-.ams-menu__link--contrast {
-  color: var(--ams-menu-link-contrast-color);
-
-  &:hover {
-    color: var(--ams-menu-link-contrast-hover-color);
-  }
-}
-
-/** @deprecated The menu has a dark background now, so this is no longer needed. */
-.ams-menu__link--inverse {
-  color: var(--ams-menu-link-inverse-color);
-
-  &:hover {
-    color: var(--ams-menu-link-inverse-hover-color);
-  }
-}

package/src/components/page-footer/page-footer.scss

@@ -18,6 +18,7 @@
 .ams-page-footer__menu {
   @include reset-ul;
 
+  background-color: var(--ams-page-footer-menu-background-color);
   column-gap: var(--ams-page-footer-menu-column-gap);
   display: flex;
   flex-wrap: wrap;
@@ -26,11 +27,19 @@
   row-gap: var(--ams-page-footer-menu-row-gap);
 
   @media (min-width: $ams-breakpoint-medium) {
-    padding-inline: var(--ams-page-footer-menu-medium-padding-inline);
+    padding-inline: var(
+      --ams-page-footer-menu-medium-padding-inline
+        /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-page-footer-menu-vi-medium-padding-inline)
+    );
   }
 
   @media (min-width: $ams-breakpoint-wide) {
-    padding-inline: var(--ams-page-footer-menu-wide-padding-inline);
+    padding-inline: var(
+      --ams-page-footer-menu-wide-padding-inline
+        /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-page-footer-menu-vi-wide-padding-inline)
+    );
   }
 }
 

package/src/components/page-header/page-header.scss

@@ -12,19 +12,25 @@
   /*
   * The logo link section is created twice: once outside the navigation and once hidden inside it.
   * This keeps all navigation in one nav element and lets the menu wrap around the logo link section.
-  * Display grid is used to let both logo link sections overlap.
   */
-  display: grid;
+  background-color: var(--ams-page-header-background-color);
+  display: grid; /* Allows both instances of Logo Link to overlap */
   font-family: var(--ams-page-header-font-family);
   padding-block: var(--ams-page-header-padding-block);
   padding-inline: var(--ams-page-header-padding-inline);
 
   @media (min-width: $ams-breakpoint-medium) {
-    padding-inline: var(--ams-page-header-medium-padding-inline);
+    padding-inline: var(
+      --ams-page-header-medium-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-page-header-vi-medium-padding-inline)
+    );
   }
 
   @media (min-width: $ams-breakpoint-wide) {
-    padding-inline: var(--ams-page-header-wide-padding-inline);
+    padding-inline: var(
+      --ams-page-header-wide-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-page-header-vi-wide-padding-inline)
+    );
   }
 }
 
@@ -33,7 +39,7 @@
   align-self: start; // To align the logo link section to the top of the header when it wraps
   column-gap: var(--ams-page-header-logo-link-column-gap);
   display: flex;
-  grid-area: 1 / 1; // To allow this section to overlap with the second logo link section
+  grid-area: 1 / 1; /* Lets this visible instance of Logo Link overlap the hidden one in Navigation. */
   inline-size: fit-content;
   outline-offset: var(--ams-page-header-logo-link-outline-offset);
   text-decoration: none;
@@ -95,7 +101,7 @@
   column-gap: var(--ams-page-header-navigation-column-gap);
   display: flex;
   flex-wrap: wrap;
-  grid-area: 1 / 1; // To allow this section to overlap with the logo link section
+  grid-area: 1 / 1; /* Makes the hidden Logo Link child overlap the visible one. */
   // This section blocks pointer events initially, so the hidden logo link section can't be activated.
   // The menu and collapsible menu set it back to auto, to make sure they can be activated.
   pointer-events: none;
@@ -128,6 +134,10 @@
 }
 
 @mixin page-header-menu-action {
+  color: var(
+    --ams-page-header-menu-item-color
+  ); /* This token is @deprecated. Will be removed on or after 2026-09-13. */
+
   font-size: var(--ams-page-header-menu-item-font-size);
   font-weight: var(--ams-page-header-menu-item-font-weight);
   line-height: var(--ams-page-header-menu-item-line-height);
@@ -144,6 +154,8 @@
 }
 
 .ams-page-header__menu-link {
+  @include page-header-menu-action;
+
   color: var(--ams-page-header-menu-link-color);
   display: inline-flex;
   gap: var(--ams-page-header-menu-link-gap);
@@ -151,8 +163,6 @@
   text-decoration-thickness: var(--ams-page-header-menu-link-text-decoration-thickness);
   text-underline-offset: var(--ams-page-header-menu-link-text-underline-offset);
 
-  @include page-header-menu-action;
-
   &:hover {
     text-decoration-line: var(--ams-page-header-menu-link-hover-text-decoration-line);
   }
@@ -170,6 +180,7 @@
 
 .ams-page-header__mega-menu-button {
   @include reset-button;
+  @include page-header-menu-action;
 
   background-color: var(--ams-page-header-mega-menu-button-background-color);
   color: var(--ams-page-header-mega-menu-button-color);
@@ -180,18 +191,23 @@
   grid-auto-flow: column;
   padding-inline: var(--ams-page-header-mega-menu-button-padding-inline);
 
-  @include page-header-menu-action;
   @include print-exact;
 
   &:hover {
     background-color: var(--ams-page-header-mega-menu-button-hover-background-color);
     color: var(--ams-page-header-mega-menu-button-hover-color);
   }
+
+  &[aria-expanded="true"] {
+    font-weight: var(
+      --ams-page-header-mega-menu-button-label-open-font-weight
+    ); /* This token is @deprecated. Will be removed on or after 2026-09-13. */
+  }
 }
 
 .ams-page-header__mega-menu-button-label,
 .ams-page-header__mega-menu-button-hidden-label {
-  /* @deprecated These class names will be removed in 6.0.0. */
+  /* @deprecated These class names will be removed on or after 2026-09-13. */
 }
 
 .ams-page-header__menu-icon-top,

package/src/components/progress-list/README.md

@@ -6,9 +6,10 @@ Displays the progress of a sequence of steps, with optional additional details p
 
 ## Guidelines
 
-- Choose the correct level for the steps’ headings.
+- Choose the correct level for the headings of the steps.
 - Assign a status to each step: _completed_ or _current_.
   Steps without a status are considered _upcoming_.
 - Maintain a correct chronological order.
   Only one step may be _current_; preceding steps must be _completed_.
+- Decide whether the user should be able to collapse and expand steps.
 - Progress List must only be used on a white background.

package/src/components/progress-list/progress-list.scss

@@ -38,7 +38,10 @@
   gap: var(--ams-progress-list-step-gap);
 
   @media (min-width: $ams-breakpoint-medium) {
-    gap: var(--ams-progress-list-step-medium-gap);
+    gap: var(
+      --ams-progress-list-step-medium-gap /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-progress-list-step-vi-medium-gap)
+    );
   }
 }
 
@@ -239,9 +242,17 @@
   @include indicator;
 
   @media (min-width: $ams-breakpoint-medium) {
-    margin-inline-end: var(--ams-progress-list-substeps-step-indicator-medium-margin-inline-end);
+    margin-inline-end: var(
+      --ams-progress-list-substeps-step-indicator-medium-margin-inline-end
+        /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-progress-list-substeps-step-indicator-vi-medium-margin-inline-end)
+    );
     margin-inline-start: calc(
-      -1 * var(--ams-progress-list-step-medium-gap) - var(--ams-progress-list-step-marker-shape-block-size)
+      -1 *
+        var(
+          --ams-progress-list-step-medium-gap /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+          var(--ams-progress-list-step-vi-medium-gap)
+        ) - var(--ams-progress-list-step-marker-shape-block-size)
     );
   }
 }

package/src/components/prose/README.md

@@ -0,0 +1,15 @@
+<!-- @license CC0-1.0 -->
+
+# Prose
+
+Applies the recommended vertical spacing between the direct children of a container, so editorial content flows without hand-picked margins.
+
+## Class name
+
+`ams-prose`
+
+## Guidelines
+
+- Wrap this utility class around editorial content to space its content according to the [Vertical space](/docs/docs-designer-guide-vertical-space--docs) recommendations.
+- To add a single ad-hoc gap between two elements, prefer the [Margin Bottom](/docs/utilities-css-margin--docs) utility class on the first one.
+- To add even spacing between a set of siblings, prefer the [Gap](/docs/utilities-css-gap--docs) utility class on their parent.

package/src/components/prose/prose.scss

@@ -0,0 +1,104 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+$_ams-body-block: ".ams-blockquote, .ams-image, .ams-paragraph--large, .ams-table";
+$_ams-button-or-cta: ".ams-button, .ams-call-to-action-link";
+$_ams-list-or-paragraph: ".ams-description-list, .ams-link-list, .ams-ordered-list, .ams-paragraph:not(.ams-paragraph--large), .ams-unordered-list";
+$_ams-paragraph: ".ams-paragraph:not(.ams-paragraph--large)";
+
+.ams-prose {
+  /* Fallback for older browsers: uniform spacing */
+  > .ams-heading {
+    margin-block-end: var(--ams-space-s);
+  }
+
+  > :not(.ams-heading) {
+    margin-block-end: var(--ams-space-m);
+  }
+
+  > :last-child {
+    margin-block-end: 0;
+  }
+
+  /* Context-aware spacing for browsers with :has() support */
+  /* stylelint-disable-next-line scss/operator-no-unspaced -- Prettier removes the space after ‘*’, which is valid CSS. */
+  @supports selector(:has(+ *)) {
+    /* Reset fallback margins */
+    > * {
+      margin-block-end: 0;
+    }
+
+    /* Body-to-body default */
+    > :not(.ams-heading):has(+ :not(.ams-heading)) {
+      margin-block-end: var(--ams-space-m);
+    }
+
+    /* Heavy body element (Blockquote, Image, Paragraph (large), Table) on either side */
+    > :is(#{$_ams-body-block}):has(+ :not(.ams-heading)),
+    > :not(.ams-heading):has(+ :is(#{$_ams-body-block})) {
+      margin-block-end: var(--ams-space-l);
+    }
+
+    /* Button or CTA Link followed by Button or CTA Link */
+    > :is(#{$_ams-button-or-cta}):has(+ :is(#{$_ams-button-or-cta})) {
+      margin-block-end: var(--ams-space-l);
+    }
+
+    /* Paragraph (large) before Blockquote or Image needs extra air */
+    > .ams-paragraph--large:has(+ :is(.ams-blockquote, .ams-image)) {
+      margin-block-end: var(--ams-space-xl);
+    }
+
+    /* Body content before an accordion needs a slightly larger gap */
+    > :not(.ams-heading):has(+ .ams-accordion) {
+      margin-block-end: var(--ams-space-l);
+    }
+
+    /* Body before a level 4 heading: default */
+    > :not(.ams-heading):has(+ :is(.ams-heading--4)) {
+      margin-block-end: var(--ams-space-l);
+    }
+
+    /* List or regular Paragraph before a level 4 heading: tighter */
+    > :is(#{$_ams-list-or-paragraph}):has(+ :is(.ams-heading--4)) {
+      margin-block-end: var(--ams-space-m);
+    }
+
+    /* Any element before a level 3 heading (subsection boundary) */
+    > *:has(+ .ams-heading--3) {
+      margin-block-end: var(--ams-space-l);
+    }
+
+    /* Any element before a level 2 heading (section boundary) */
+    > *:has(+ .ams-heading--2) {
+      margin-block-end: var(--ams-space-xl);
+    }
+
+    /* Heading level 3 followed by its content */
+    > .ams-heading--3:has(+ :not(.ams-heading)) {
+      margin-block-end: var(--ams-space-xs);
+    }
+
+    /* Heading level 2 followed by its content */
+    > .ams-heading--2:has(+ :not(.ams-heading)) {
+      margin-block-end: var(--ams-space-s);
+    }
+
+    /* Heading level 1 followed by a regular Paragraph */
+    > .ams-heading--1:has(+ #{$_ams-paragraph}) {
+      margin-block-end: var(--ams-space-xs);
+    }
+
+    /* Heading level 1 followed by a Paragraph (large), typically lead or metadata */
+    > .ams-heading--1:has(+ .ams-paragraph--large) {
+      margin-block-end: var(--ams-space-m);
+    }
+
+    /* Heading level 2 or 3 followed by another heading */
+    > :is(.ams-heading--2, .ams-heading--3):has(+ .ams-heading) {
+      margin-block-end: var(--ams-space-m);
+    }
+  }
+}

package/src/components/standalone-link/standalone-link.scss

@@ -43,8 +43,3 @@
     color: var(--ams-standalone-link-inverse-hover-color);
   }
 }
-
-/* stylelint-disable-next-line block-no-empty */
-.ams-standalone-link--with-icon {
-  /* This class name is deprecated. */
-}

package/src/components/tab-navigation/README.md

@@ -0,0 +1,13 @@
+<!-- @license CC0-1.0 -->
+
+# Tab Navigation
+
+A horizontal or vertical list of links, styled as tabs, to navigate between a set of related pages.
+
+## Guidelines
+
+- Use Tab Navigation for navigating between pages that each have their own main content.
+  Thanks to using links, every tab’s content has its own url that the user can open in a new window, share, or bookmark.
+- Use [Tabs](https://designsystem.amsterdam/?path=/docs/components-containers-tabs--docs) instead to switch between small pieces of secondary content without navigating away.
+- Use the vertical orientation to stack links below each other, e.g. in a sidebar.
+- Add `aria-current="page"` to the link pointing to the current page.

package/src/components/tab-navigation/tab-navigation.scss

@@ -0,0 +1,101 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/breakpoint" as *;
+@use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
+
+.ams-tab-navigation__list {
+  @include reset-ul;
+
+  box-shadow: var(--ams-tab-navigation-list-box-shadow);
+  display: flex;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+}
+
+@media (min-width: $ams-breakpoint-medium) {
+  .ams-tab-navigation--vertical {
+    @include hyphenation;
+
+    .ams-tab-navigation__list {
+      box-shadow: var(--ams-tab-navigation-list-vertical-box-shadow);
+      flex-direction: column;
+      overflow-x: visible;
+    }
+  }
+}
+
+.ams-tab-navigation__item {
+  flex-shrink: 0;
+  scroll-snap-align: start;
+}
+
+.ams-tab-navigation__link {
+  align-items: center;
+  color: var(--ams-tab-navigation-link-color);
+  cursor: var(--ams-tab-navigation-link-cursor);
+  display: flex;
+  font-family: var(--ams-tab-navigation-link-font-family);
+  font-size: var(--ams-tab-navigation-link-font-size);
+  font-weight: var(--ams-tab-navigation-link-font-weight);
+  gap: var(--ams-tab-navigation-link-gap);
+  line-height: var(--ams-tab-navigation-link-line-height);
+  outline-offset: var(--ams-tab-navigation-link-outline-offset);
+  padding-block: var(--ams-tab-navigation-link-padding-block);
+  padding-inline: var(--ams-tab-navigation-link-padding-inline);
+  text-decoration-line: none;
+
+  &:hover {
+    color: var(--ams-tab-navigation-link-hover-color);
+  }
+
+  &:hover:not([aria-current="page"]) {
+    box-shadow: var(--ams-tab-navigation-link-hover-box-shadow);
+  }
+
+  &[aria-current="page"] {
+    box-shadow: var(--ams-tab-navigation-link-current-box-shadow);
+    font-weight: var(--ams-tab-navigation-link-current-font-weight);
+
+    @media (forced-colors: active) {
+      background-color: SelectedItem;
+    }
+  }
+
+  @media (min-width: $ams-breakpoint-medium) {
+    .ams-tab-navigation--vertical &:hover:not([aria-current="page"]) {
+      box-shadow: var(--ams-tab-navigation-link-vertical-hover-box-shadow);
+    }
+
+    .ams-tab-navigation--vertical &[aria-current="page"] {
+      box-shadow: var(--ams-tab-navigation-link-vertical-current-box-shadow);
+    }
+  }
+}
+
+.ams-tab-navigation__link-label-wrapper {
+  display: grid;
+}
+
+.ams-tab-navigation__link-label,
+.ams-tab-navigation__link-label-hidden {
+  display: initial;
+  grid-area: 1 / 1;
+}
+
+// This hidden label is used to prevent a layout shift when the link is current
+// and the link text becomes bold.
+.ams-tab-navigation__link-label-hidden {
+  font-weight: var(--ams-tab-navigation-link-current-font-weight);
+  pointer-events: none;
+  -webkit-user-select: none;
+
+  /* Safari support is added with the prefixed property. */
+  /* stylelint-disable-next-line plugin/use-baseline */
+  user-select: none;
+  visibility: hidden;
+}

package/src/components/table/README.md

@@ -2,11 +2,10 @@
 
 # Table
 
-Use the table component to let users compare information in rows and columns.
-Table is used to display simple information that does not need to be filtered or edited.
+Structures data in rows and columns to help users work with large amounts of information.
 
 ## Guidelines
 
-- Add a caption to help users find, navigate and understand the table.
-- Include a [Heading](https://designsystem.amsterdam/?path=/docs/components-text-heading--docs) in the Table Caption,
-  unless the table is in a [Figure](http://designsystem.amsterdam/?path=/docs/components-media-figure--docs) which has a Figure Caption.
+- Add a caption so users can find and understand the table without reading its data.
+- Use a [Heading](https://designsystem.amsterdam/?path=/docs/components-text-heading--docs) in the caption, at the level that fits the document outline.
+  It becomes the table’s accessible name, announced by screen readers on every encounter.