@amsterdam/design-system-css 3.2.1 → 4.0.0

package/src/components/breadcrumb/README.md

@@ -2,16 +2,15 @@
 
 # Breadcrumb
 
-The breadcrumb is a secondary navigation pattern that helps a user understand the structure between levels in the website up to the current page.
-Users can use it to navigate.
+Shows the location of the page within the hierarchy of a website and allows navigating between levels.
 
 ## Guidelines
 
-- Only use the breadcrumb trail if it adds something functional for the user and the structure is ‘static’.
-- Do not display the breadcrumb trail on a form page.
-  It distracts the user from their task, or one can accidentally interpret it as a Progress Indicator.
-- This is a secondary navigation pattern.
-  It can’t replace the main navigation.
+- Do not use a breadcrumb on pages that have forms.
+  A breadcrumb on a page with a form can distract users from completing the form, or be confused with a progress indicator.
+- A breadcrumb should not have more than 5 items.
+- The first item links to the home page, with ‘Home’ as its text.
+  This applies to Dutch websites as well.
 
 ### Using links with routing libraries
 

package/src/components/breakout/breakout.scss

@@ -82,7 +82,7 @@ $ams-breakout-row-span-max: 4;
   }
 }
 
-@media screen and (min-width: $ams-breakpoint-medium) {
+@media (min-width: $ams-breakpoint-medium) {
   @for $i from 1 through $ams-grid-column-count {
     .ams-breakout__cell--col-span-#{$i}-medium {
       @include ams-grid__cell--span-medium($i);
@@ -94,7 +94,7 @@ $ams-breakout-row-span-max: 4;
   }
 }
 
-@media screen and (min-width: $ams-breakpoint-wide) {
+@media (min-width: $ams-breakpoint-wide) {
   @for $i from 1 through $ams-grid-column-count {
     .ams-breakout__cell--col-span-#{$i}-wide {
       @include ams-grid__cell--span-wide($i);
@@ -117,12 +117,24 @@ $ams-breakout-row-span-max: 4;
   margin-block: calc(var(--ams-space-xl) * -1);
   margin-inline: calc(var(--ams-grid-padding-inline) * -1);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
-    margin-inline: calc(var(--ams-grid-medium-padding-inline) * -1);
+  @media (min-width: $ams-breakpoint-medium) {
+    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
+    );
   }
 
-  @media screen and (min-width: $ams-breakpoint-wide) {
-    margin-inline: calc(var(--ams-grid-wide-padding-inline) * -1);
+  @media (min-width: $ams-breakpoint-wide) {
+    margin-inline: calc(
+      var(
+          --ams-grid-wide-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+          var(--ams-grid-vi-wide-padding-inline)
+        ) *
+        -1
+    );
   }
 
   .ams-breakout--gap-vertical--small > & {
@@ -146,7 +158,7 @@ $ams-breakout-row-span-max: 4;
   }
 }
 
-@media screen and (min-width: $ams-breakpoint-medium) {
+@media (min-width: $ams-breakpoint-medium) {
   @for $i from 1 through $ams-breakout-row-span-max {
     .ams-breakout__cell--row-span-#{$i}-medium {
       grid-row-end: span $i;
@@ -158,7 +170,7 @@ $ams-breakout-row-span-max: 4;
   }
 }
 
-@media screen and (min-width: $ams-breakpoint-wide) {
+@media (min-width: $ams-breakpoint-wide) {
   @for $i from 1 through $ams-breakout-row-span-max {
     .ams-breakout__cell--row-span-#{$i}-wide {
       grid-row-end: span $i;

package/src/components/button/button.scss

@@ -4,6 +4,7 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/print-exact" as *;
 @use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
@@ -29,6 +30,7 @@
   touch-action: manipulation;
 
   @include hyphenation;
+  @include print-exact;
   @include text-rendering;
 
   &:disabled,

package/src/components/call-to-action-link/call-to-action-link.scss

@@ -4,6 +4,7 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/print-exact" as *;
 @use "../../common/text-rendering" as *;
 
 .ams-call-to-action-link {
@@ -22,6 +23,7 @@
   touch-action: manipulation;
 
   @include hyphenation;
+  @include print-exact;
   @include text-rendering;
 
   &:hover {

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

@@ -15,33 +15,49 @@
   font-family: var(--ams-description-list-font-family);
   font-size: var(--ams-description-list-font-size);
   line-height: var(--ams-description-list-line-height);
+  row-gap: var(--ams-description-list-row-gap); /* This token is @deprecated. Will be removed on or after 2026-10-20. */
 
   @include hyphenation;
   @include text-rendering;
 }
 
-@media screen and (min-width: $ams-breakpoint-medium) {
+@media (min-width: $ams-breakpoint-medium) {
   .ams-description-list,
   .ams-description-list__section {
     align-items: start;
-    column-gap: var(--ams-description-list-column-gap);
+    column-gap: var(
+      --ams-description-list-column-gap /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-description-list-vi-medium-column-gap)
+    );
     display: grid;
     grid-template-columns: auto 1fr;
   }
 
   .ams-description-list--narrow,
   .ams-description-list--narrow .ams-description-list__section {
-    grid-template-columns: var(--ams-description-list-narrow-grid-template-columns);
+    grid-template-columns: var(
+      --ams-description-list-narrow-grid-template-columns
+        /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-description-list-vi-medium-narrow-grid-template-columns)
+    );
   }
 
   .ams-description-list--medium,
   .ams-description-list--medium .ams-description-list__section {
-    grid-template-columns: var(--ams-description-list-medium-grid-template-columns);
+    grid-template-columns: var(
+      --ams-description-list-medium-grid-template-columns
+        /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-description-list-vi-medium-medium-grid-template-columns)
+    );
   }
 
   .ams-description-list--wide,
   .ams-description-list--wide .ams-description-list__section {
-    grid-template-columns: var(--ams-description-list-wide-grid-template-columns);
+    grid-template-columns: var(
+      --ams-description-list-wide-grid-template-columns
+        /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-description-list-vi-medium-wide-grid-template-columns)
+    );
   }
 }
 
@@ -50,14 +66,33 @@
 }
 
 .ams-description-list__term {
+  font-size: var(--ams-description-list-term-font-size);
   font-weight: var(--ams-description-list-term-font-weight);
+  line-height: var(--ams-description-list-term-line-height);
   margin-block-end: var(--ams-description-list-term-margin-block-end);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
+  text-wrap: var(--ams-description-list-term-text-wrap);
+
+  @media (min-width: $ams-breakpoint-medium) {
     grid-column-start: 1;
 
     // Add margin for Terms that are longer than their Description(s)
     margin-block-end: var(--ams-description-list-term-vi-medium-margin-block-end);
+
+    // Add half of the difference in computed line heights to align Terms with Descriptions.
+    // - Terms use heading line heights; Descriptions use body text
+    // - Not for Terms that follow a Term, or which are the last child
+    &:not(& + &, :last-child) {
+      padding-block-start: calc(
+        (
+            var(--ams-description-list-font-size) *
+              var(--ams-description-list-line-height) - var(--ams-description-list-term-font-size) *
+              var(--ams-description-list-term-line-height)
+          ) /
+          2
+      );
+    }
   }
 
   // Remove whitespace between consecutive Terms
@@ -74,7 +109,7 @@
   margin-block-end: var(--ams-description-list-description-margin-block-end);
   padding-inline-start: var(--ams-description-list-description-padding-inline-start);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     grid-column-start: 2;
     padding-inline-start: 0;
 
@@ -88,7 +123,7 @@
 .ams-description-list__section {
   margin-block-end: var(--ams-description-list-section-margin-block-end);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     grid-column: span 2;
 
     > :only-of-type {
@@ -110,7 +145,7 @@
   }
 }
 
-@media screen and (min-width: $ams-breakpoint-medium) {
+@media (min-width: $ams-breakpoint-medium) {
   .ams-description-list,
   .ams-description-list > .ams-description-list__section:last-child {
     > .ams-description-list__term:last-of-type {

package/src/components/dialog/dialog.scss

@@ -25,9 +25,15 @@ so do not apply these styles without an `open` attribute. */
   max-block-size: var(--ams-dialog-max-block-size);
   max-inline-size: var(--ams-dialog-max-inline-size);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
-    inline-size: var(--ams-dialog-medium-inline-size);
-    max-block-size: var(--ams-dialog-medium-max-block-size);
+  @media (min-width: $ams-breakpoint-medium) {
+    inline-size: var(
+      --ams-dialog-medium-inline-size /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-dialog-vi-medium-inline-size)
+    );
+    max-block-size: var(
+      --ams-dialog-medium-max-block-size /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-dialog-vi-medium-max-block-size)
+    );
   }
 
   /*
@@ -47,9 +53,15 @@ so do not apply these styles without an `open` attribute. */
   padding-block: var(--ams-dialog-header-padding-block);
   padding-inline: var(--ams-dialog-header-padding-inline);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
-    padding-block: var(--ams-dialog-header-medium-padding-block);
-    padding-inline: var(--ams-dialog-header-medium-padding-inline);
+  @media (min-width: $ams-breakpoint-medium) {
+    padding-block: var(
+      --ams-dialog-header-medium-padding-block /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-dialog-header-vi-medium-padding-block)
+    );
+    padding-inline: var(
+      --ams-dialog-header-medium-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-dialog-header-vi-medium-padding-inline)
+    );
   }
 }
 
@@ -59,8 +71,11 @@ so do not apply these styles without an `open` attribute. */
   padding-block: var(--ams-dialog-body-padding-block);
   padding-inline: var(--ams-dialog-body-padding-inline);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
-    padding-inline: var(--ams-dialog-body-medium-padding-inline);
+  @media (min-width: $ams-breakpoint-medium) {
+    padding-inline: var(
+      --ams-dialog-body-medium-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-dialog-body-vi-medium-padding-inline)
+    );
   }
 }
 
@@ -68,8 +83,14 @@ so do not apply these styles without an `open` attribute. */
   padding-block: var(--ams-dialog-footer-padding-block);
   padding-inline: var(--ams-dialog-footer-padding-inline);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
-    padding-block: var(--ams-dialog-footer-medium-padding-block);
-    padding-inline: var(--ams-dialog-footer-medium-padding-inline);
+  @media (min-width: $ams-breakpoint-medium) {
+    padding-block: var(
+      --ams-dialog-footer-medium-padding-block /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-dialog-footer-vi-medium-padding-block)
+    );
+    padding-inline: var(
+      --ams-dialog-footer-medium-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-dialog-footer-vi-medium-padding-inline)
+    );
   }
 }

package/src/components/field-set/field-set.scss

@@ -53,11 +53,7 @@
   font-weight: var(--ams-field-set-legend-font-weight);
   line-height: var(--ams-field-set-legend-line-height);
 
-  /*
-   * If text-wrap is not supported, it is ignored.
-   * This means the wrapped text will look less balanced, which is fine.
-   */
-  /* stylelint-disable-next-line plugin/use-baseline */
+  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
   text-wrap: var(--ams-field-set-legend-text-wrap);
 
   @include hyphenation;

package/src/components/gap/README.md

@@ -14,17 +14,18 @@ Five options are available for the width or height of the gap:
 - `ams-gap-l`
 - `ams-gap-xl`
 
+These classes apply the [design tokens for space](/docs/brand-design-tokens-space--docs).
+
 Because spacing is responsive, the gaps are as well.
 They are also smaller in [Compact Mode](https://designsystem.amsterdam/docs/docs-developer-guide-modes--docs).
-Consult the [Space](/docs/brand-design-tokens-space--docs) docs for an indication of their sizes.
-
-The `2xl` space is intended for whitespace around a [Grid](/docs/components-layout-grid--docs) only, which can be produced through a `padding*` of `large`.
 
 ## Guidelines
 
 - Use this utility class to vertically separate the children of a parent element from each other.
 - Do not use it on the Grid component.
   Grid is responsible for its own gaps.
+- Do not use it for text – various types of elements require different amounts of space between them.
+  Wrap editorial content in the [Prose](/docs/utilities-css-prose--docs) utility class to have all spacing set automatically.
 - It can be used on any other element and sets the `gap` CSS property.
   It also makes the element a grid container; the gap would be ignored otherwise.
   These declarations are marked with the `!important` flag to ensure they override any other gaps and display modes.

package/src/components/grid/README.md

@@ -12,6 +12,10 @@ Divides the screen into columns to align the elements of a page.
 - Its children are `Grid.Cell` components that define how many columns they span, and optionally where they start.
   Both its `span` and `start` properties accept a single value, or separate values for the narrow, medium and wide variations of the Grid.
   Follow these [optimal sizes of Grid Cells](/docs/pages-public-introduction--docs#how-to-size-the-grid-cells) for various typical page sections.
+- Grid Cells align to the top of their row.
+  This makes them as tall as their content.
+  This is especially useful for [Compact Mode](https://designsystem.amsterdam/docs/docs-developer-guide-modes--docs), where their background colour is different than that of the Page.
+  The [internal Home Page](/story/pages-internal-home-page--default) example shows this behaviour.
 - A single page can have several Grids.
   This allows mixing a Grid with a [Spotlight](/docs/components-containers-spotlight--docs), [Breakout](/docs/components-layout-breakout--docs) or full width [Image](/docs/components-media-image--docs) which ‘bleed out’ of the main layout.
 - Grids must not be nested.

package/src/components/grid/_mixins.scss

@@ -14,14 +14,32 @@
   padding-inline: var(--ams-grid-padding-inline);
   row-gap: var(--ams-grid-row-gap-xl);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
-    grid-template-columns: repeat(var(--ams-grid-medium-column-count), 1fr);
-    padding-inline: var(--ams-grid-medium-padding-inline);
+  @media (min-width: $ams-breakpoint-medium) {
+    grid-template-columns: repeat(
+      var(
+        --ams-grid-medium-column-count /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+        var(--ams-grid-vi-medium-column-count)
+      ),
+      1fr
+    );
+    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 screen and (min-width: $ams-breakpoint-wide) {
-    grid-template-columns: repeat(var(--ams-grid-wide-column-count), 1fr);
-    padding-inline: var(--ams-grid-wide-padding-inline);
+  @media (min-width: $ams-breakpoint-wide) {
+    grid-template-columns: repeat(
+      var(
+        --ams-grid-wide-column-count /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+        var(--ams-grid-vi-wide-column-count)
+      ),
+      1fr
+    );
+    padding-inline: var(
+      --ams-grid-wide-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+      var(--ams-grid-vi-wide-padding-inline)
+    );
   }
 }
 
@@ -77,11 +95,13 @@
   padding-block: var(--ams-grid-padding-block-2xl);
 }
 
+// Cell
+
 @mixin ams-grid__cell--span-all {
   grid-column: 1 / -1;
 }
 
-// Column span
+// Cell span and start
 
 @mixin ams-grid__cell--span($i) {
   grid-column-end: span $i;
@@ -92,25 +112,43 @@
 }
 
 @mixin ams-grid__cell--span-medium($i) {
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     grid-column-end: span $i;
   }
 }
 
 @mixin ams-grid__cell--start-medium($i) {
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     grid-column-start: $i;
   }
 }
 
 @mixin ams-grid__cell--span-wide($i) {
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     grid-column-end: span $i;
   }
 }
 
 @mixin ams-grid__cell--start-wide($i) {
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     grid-column-start: $i;
   }
 }
+
+// Cell row span
+
+@mixin ams-grid__cell--row-span($i) {
+  grid-row: span $i;
+}
+
+@mixin ams-grid__cell--row-span-medium($i) {
+  @media (min-width: $ams-breakpoint-medium) {
+    grid-row: span $i;
+  }
+}
+
+@mixin ams-grid__cell--row-span-wide($i) {
+  @media (min-width: $ams-breakpoint-wide) {
+    grid-row: span $i;
+  }
+}

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 {
@@ -81,7 +103,7 @@ $ams-grid-column-count: 12;
   }
 }
 
-@media screen and (min-width: $ams-breakpoint-medium) {
+@media (min-width: $ams-breakpoint-medium) {
   @for $i from 1 through $ams-grid-column-count {
     .ams-grid__cell--span-#{$i}-medium {
       @include ams-grid__cell--span-medium($i);
@@ -93,7 +115,7 @@ $ams-grid-column-count: 12;
   }
 }
 
-@media screen and (min-width: $ams-breakpoint-wide) {
+@media (min-width: $ams-breakpoint-wide) {
   @for $i from 1 through $ams-grid-column-count {
     .ams-grid__cell--span-#{$i}-wide {
       @include ams-grid__cell--span-wide($i);
@@ -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

@@ -23,11 +23,7 @@
   font-family: var(--ams-heading-font-family);
   font-weight: var(--ams-heading-font-weight);
 
-  /*
-   * If text-wrap is not supported, it is ignored.
-   * This means the wrapped text will look less balanced, which is fine.
-   */
-  /* stylelint-disable-next-line plugin/use-baseline */
+  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
   text-wrap: var(--ams-heading-text-wrap);
 
   @include hyphenation;
@@ -59,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/image-slider/image-slider.scss

@@ -46,7 +46,7 @@
     display: none;
   }
 
-  @media not (prefers-reduced-motion) {
+  @media (prefers-reduced-motion: no-preference) {
     scroll-behavior: smooth;
   }
 }

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/label/label.scss

@@ -14,11 +14,7 @@
   font-weight: var(--ams-label-font-weight);
   line-height: var(--ams-label-line-height);
 
-  /*
-   * If text-wrap is not supported, it is ignored.
-   * This means the wrapped text will look less balanced, which is fine.
-   */
-  /* stylelint-disable-next-line plugin/use-baseline */
+  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
   text-wrap: var(--ams-label-text-wrap);
 
   @include hyphenation;

package/src/components/logo/README.md

@@ -14,12 +14,13 @@ The English logo is used for websites in the English language.
 
 ## Exception
 
-Use a sub-brand logo if the website is owned by one of the 5 sub-brands.
+Websites operated by one of the sub-brands use their specific logo.
 They have a separate status because of their unique service provision not directly associated with the City.
 
 The sub-brands are:
 
 - GGD Amsterdam
+- GGD Amsterdam Inspectie
 - Museum Weesp
 - Stadsarchief
 - Stadsbank van Lening