@amsterdam/design-system-css 0.14.0 → 0.15.0

package/src/components/image-slider/image-slider.scss

@@ -2,6 +2,7 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
+
 @use "../../common/breakpoint" as *;
 
 .ams-image-slider {
@@ -66,19 +67,26 @@
   max-inline-size: 100%;
 }
 
+@mixin reset-button {
+  border: none;
+  border-radius: 0; // Reset rounded borders on iOS devices
+  padding-block: 0;
+  padding-inline: 0;
+}
+
 .ams-image-slider__thumbnail {
+  aspect-ratio: var(--ams-image-aspect-ratio); // Use the same default aspect ratio as the Image component
   background-color: var(--ams-image-slider-thumbnails-thumbnail-background-color);
   background-position: center;
   background-size: cover;
-  border: none;
   cursor: var(--ams-image-slider-thumbnails-thumbnail-cursor);
   opacity: var(--ams-image-slider-thumbnails-thumbnail-opacity);
   outline-offset: var(--ams-button-outline-offset);
-  padding-block: 0;
-  padding-inline: 0;
   position: relative;
   scroll-snap-align: start;
 
+  @include reset-button;
+
   &:hover {
     opacity: var(--ams-image-slider-thumbnails-thumbnail-hover-opacity);
   }

package/src/components/index.scss

@@ -29,7 +29,6 @@
 @use "file-input/file-input";
 @use "file-list/file-list";
 @use "footer/footer";
-@use "form-error-list/form-error-list";
 @use "gap/gap";
 @use "grid/grid";
 @use "header/header";
@@ -39,6 +38,7 @@
 @use "icon/icon";
 @use "image-slider/image-slider";
 @use "image/image";
+@use "invalid-form-alert/invalid-form-alert";
 @use "label/label";
 @use "link-list/link-list";
 @use "link/link";

package/src/components/{form-error-list → invalid-form-alert}/README.md

@@ -1,27 +1,27 @@
 <!-- @license CC0-1.0 -->
 
-# Form Error List
+# Invalid Form Alert
 
 Use this component at the top of a page to summarise any errors a user has made.
-When a user makes an error, you must show both a Form Error List and an Error Message above each answer that contains an error.
+When a user makes an error, you must show both a Invalid Form Alert and an Error Message above each answer that contains an error.
 
 ## Guidelines
 
-- Always show a Form Error List when there is a validation error, even if there’s only one.
-- You must link the errors in the Form Error List to the answer they relate to (see below).
+- Always show an Invalid Form Alert when there is a validation error, even if there’s only one.
+- You must link the errors in the Invalid Form Alert to the answer they relate to (see below).
 
-## Linking from the Form Error List to each answer
+## Linking from the Invalid Form Alert to each answer
 
-For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the `id` of that field.
+For questions that require a user to answer using a single field, like a file upload, select, textarea or text input, link to the `id` of that field.
 
 When a user has to enter their answer into multiple fields, such as day, month and year fields, link to the `id` of the first field that contains an error.
 If you do not know which field contains an error, link to the `id` of the first field.
 
 For questions that require a user to select one or more options from a list using Radios or Checkboxes, link to the `id` of the first Radio or Checkbox.
 
-## Where to put the Form Error List
+## Where to put the Invalid Form Alert
 
-Put the Form Error List directly above the first question on the page. Place it outside of the `<form>`-tag, [to make sure screen readers do not skip it](https://nldesignsystem.nl/richtlijnen/formulieren/meerdere-stappen/#plaats-de-informatie-over-waar-de-gebruiker-is-in-de-stappen-boven-het-formulier).
+Put the Invalid Form Alert directly above the first question on the page. Place it outside of the `<form>`-tag, [to make sure screen readers do not skip it](https://nldesignsystem.nl/richtlijnen/formulieren/meerdere-stappen/#plaats-de-informatie-over-waar-de-gebruiker-is-in-de-stappen-boven-het-formulier).
 
 ## Error count in document title
 
@@ -39,7 +39,7 @@ Note: this functionality has been disabled on this page, to prevent unexpected f
 
 Pay extra attention to these parts:
 
-- [WCAG requirement 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): the heading level of the Form Error List depends on where in the page it is placed, this may differ per page.
+- [WCAG requirement 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): the heading level of the Invalid Form Alert depends on where in the page it is placed, this may differ per page.
 
 ## References
 

package/src/components/{form-error-list/form-error-list.scss → invalid-form-alert/invalid-form-alert.scss}

@@ -1,14 +1,14 @@
-.ams-form-error-list {
-  outline-offset: var(--ams-form-error-list-outline-offset);
+.ams-invalid-form-alert {
+  outline-offset: var(--ams-invalid-form-alert-outline-offset);
 
   // In Chromium browsers, the outline overlaps with the border in this component.
   // We're not sure why, but to fix this we double the offset for Chromium browsers here.
   @supports (contain: paint) and (not (-moz-appearance: none)) {
-    outline-offset: calc(var(--ams-form-error-list-outline-offset) * 2);
+    outline-offset: calc(var(--ams-invalid-form-alert-outline-offset) * 2);
 
     // Reset for Safari
     @supports (font: -apple-system-body) {
-      outline-offset: var(--ams-form-error-list-outline-offset);
+      outline-offset: var(--ams-invalid-form-alert-outline-offset);
     }
   }
 }

package/src/components/link/README.md

@@ -13,7 +13,7 @@ Use a link in the following cases:
 - To navigate to another website (see [External links](#external-links))
 - To navigate to an element on the same page
 - To link to emails or phone numbers (start the link with `mailto:` or `tel:`)
-- Wrap 2 or more consecutive buttons and/or links in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-buttons-action-group--docs).
+- Wrap 2 or more consecutive buttons and/or links in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs).
 
 A link is a navigation component.
 Use a button instead of a link when an action is desired.
@@ -28,7 +28,6 @@ For more information: [Links to cross-origin destinations are unsafe](https://de
 
 Visited links indicate that a user has already opened the link.
 We discourage using styles for visited links because they often make the page less clear and navigation more challenging.
-The inline link does have a visited style.
 It is not part of navigation elements that are frequently scanned.
 
 ### Using links with routing libraries

package/src/components/link/link.scss

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 .ams-link {
@@ -22,10 +23,11 @@
   display: inline-block;
   font-size: var(--ams-link-standalone-font-size);
   line-height: var(--ams-link-standalone-line-height);
-  text-decoration-line: var(--ams-link-standalone-text-decoration-line);
   text-decoration-thickness: var(--ams-link-standalone-text-decoration-thickness);
   text-underline-offset: var(--ams-link-standalone-text-underline-offset);
 
+  @include hyphenation;
+
   &:hover {
     text-decoration-thickness: var(--ams-link-standalone-hover-text-decoration-thickness);
     text-underline-offset: var(--ams-link-standalone-hover-text-underline-offset);
@@ -36,7 +38,6 @@
   font-family: var(--ams-link-inline-font-family);
   font-size: var(--ams-link-inline-font-size);
   line-height: var(--ams-link-inline-line-height);
-  text-decoration-line: var(--ams-link-inline-text-decoration-line);
   text-decoration-thickness: var(--ams-link-inline-text-decoration-thickness);
   text-underline-offset: var(--ams-link-inline-text-underline-offset);
 
@@ -44,32 +45,20 @@
     text-decoration-thickness: var(--ams-link-inline-hover-text-decoration-thickness);
     text-underline-offset: var(--ams-link-inline-hover-text-underline-offset);
   }
-
-  &:visited {
-    color: var(--ams-link-inline-visited-color);
-  }
 }
 
-.ams-link--contrast-color {
-  color: var(--ams-link-contrast-color-color);
+.ams-link--contrast {
+  color: var(--ams-link-contrast-color);
 
   &:hover {
-    color: var(--ams-link-contrast-color-hover-color);
-  }
-
-  &:visited {
-    color: var(--ams-link-contrast-color-visited-color);
+    color: var(--ams-link-contrast-hover-color);
   }
 }
 
-.ams-link--inverse-color {
-  color: var(--ams-link-inverse-color-color);
+.ams-link--inverse {
+  color: var(--ams-link-inverse-color);
 
   &:hover {
-    color: var(--ams-link-inverse-color-hover-color);
-  }
-
-  &:visited {
-    color: var(--ams-link-inverse-color-visited-color);
+    color: var(--ams-link-inverse-hover-color);
   }
 }

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

@@ -17,6 +17,7 @@
   display: grid;
   gap: var(--ams-link-list-gap);
 
+  @include hyphenation;
   @include text-rendering;
   @include reset-ul;
 }
@@ -49,22 +50,20 @@
 .ams-link-list__link--large {
   font-size: var(--ams-link-list-link-large-font-size);
   line-height: var(--ams-link-list-link-large-line-height);
-
-  @include hyphenation;
 }
 
-.ams-link-list__link--contrast-color {
-  color: var(--ams-link-list-link-contrast-color-color);
+.ams-link-list__link--contrast {
+  color: var(--ams-link-list-link-contrast-color);
 
   &:hover {
-    color: var(--ams-link-list-link-contrast-color-hover-color);
+    color: var(--ams-link-list-link-contrast-hover-color);
   }
 }
 
-.ams-link-list__link--inverse-color {
-  color: var(--ams-link-list-link-inverse-color-color);
+.ams-link-list__link--inverse {
+  color: var(--ams-link-list-link-inverse-color);
 
   &:hover {
-    color: var(--ams-link-list-link-inverse-color-hover-color);
+    color: var(--ams-link-list-link-inverse-hover-color);
   }
 }

package/src/components/margin/README.md

@@ -6,20 +6,26 @@ Adds white space below a single element.
 
 ## Class names
 
-The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the height of the bottom margin.
+Six options are available for the width or height of the bottom margin:
 
-| Class name   | Example                                                                                      |
-| ------------ | -------------------------------------------------------------------------------------------- |
-| `ams-mb--xs` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-xs);" /> |
-| `ams-mb--sm` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-sm);" /> |
-| `ams-mb--md` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-md);" /> |
-| `ams-mb--lg` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-lg);" /> |
-| `ams-mb--xl` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-xl);" /> |
+- `ams-mb-xs`
+- `ams-mb-s`
+- `ams-mb-m`
+- `ams-mb-l`
+- `ams-mb-xl`
+- `ams-mb-2xl`
+
+Because spacing is responsive, the margins are as well.
+They are also smaller in Compact Mode.
+Consult the [Space](/docs/brand-design-tokens-space--docs) docs for an indication of their sizes.
 
 ## Guidelines
 
 - Use this utility class to vertically separate one element from the next.
-- It can be used on any element and sets the `margin-block-end` CSS property. This declaration is marked with the `!important` flag to ensure it overrides any other margins.
-- Elements’ top and bottom margins are sometimes collapsed into a single margin. Consult [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) for details.
+- It can be used on any element and sets the `margin-block-end` CSS property.
+  This declaration is marked with the `!important` flag to ensure it overrides any other margins.
+- Elements’ top and bottom margins are sometimes collapsed into a single margin.
+  We only offer a utility for the bottom margin to prevent issues arising from this.
+  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.

package/src/components/margin/margin.scss

@@ -3,13 +3,11 @@
  * Copyright Gemeente Amsterdam
  */
 
-@use "sass:map";
-@use "../../common/size" as *;
-
-@each $size in map.keys($ams-sizes) {
-  @if $size != "no" {
-    .ams-mb--#{$size} {
-      margin-block-end: var(--ams-margin-#{$size}) !important;
-    }
+// If you modify this list, you must also update the object in
+// packages/react/src/common/shortSize.ts
+@each $size in ("xs", "s", "m", "l", "xl", "2xl") {
+  .ams-mb-#{$size} {
+    /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+    margin-block-end: var(--ams-space-#{$size}) !important;
   }
 }

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

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 @mixin reset-ol {
@@ -17,6 +18,7 @@
   gap: var(--ams-ordered-list-gap);
 
   @include text-rendering;
+  @include hyphenation;
   @include reset-ol;
 }
 
@@ -34,7 +36,7 @@
   }
 }
 
-.ams-ordered-list--inverse-color:not(.ams-ordered-list--no-markers) {
+.ams-ordered-list--inverse:not(.ams-ordered-list--no-markers) {
   color: var(--ams-ordered-list-inverse-color);
 }
 

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

@@ -25,6 +25,6 @@
   @include reset-h1;
 }
 
-.ams-page-heading--inverse-color {
+.ams-page-heading--inverse {
   color: var(--ams-page-heading-inverse-color);
 }

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

@@ -15,7 +15,6 @@
   box-sizing: border-box;
   column-gap: var(--ams-page-menu-column-gap);
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
   list-style: none;
   row-gap: var(--ams-page-menu-row-gap);
@@ -34,7 +33,6 @@
 @mixin page-menu-item {
   color: var(--ams-page-menu-item-color);
   display: inline-flex;
-  flex-direction: row;
   font-family: var(--ams-page-menu-item-font-family);
   font-size: var(--ams-page-menu-item-font-size);
   font-weight: var(--ams-page-menu-item-font-weight);

package/src/components/pagination/pagination.scss

@@ -5,6 +5,16 @@
 
 @use "../../common/text-rendering" as *;
 
+.ams-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--ams-pagination-font-family);
+  font-size: var(--ams-pagination-font-size);
+  font-weight: var(--ams-pagination-font-weight);
+  justify-content: center;
+  line-height: var(--ams-pagination-line-height);
+}
+
 @mixin reset-ol {
   list-style-type: none;
   margin-block: 0;
@@ -12,48 +22,28 @@
 }
 
 .ams-pagination__list {
-  color: var(--ams-pagination-color);
   display: flex;
   flex-wrap: wrap;
-  font-family: var(--ams-pagination-font-family);
-  font-size: var(--ams-pagination-font-size);
-  font-weight: var(--ams-pagination-font-weight);
-  justify-content: center;
-  line-height: var(--ams-pagination-line-height);
 
   @include reset-ol;
 }
 
-@mixin reset-button {
-  all: unset;
-  outline: revert;
-}
-
-.ams-pagination__button {
-  /* The reset is included at the top of the block here, if you set it
-  at the bottom `all: unset` overrides the `gap` property. */
-  @include reset-button;
-
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  gap: var(--ams-pagination-button-gap);
-  outline-offset: var(--ams-pagination-button-outline-offset);
-  padding-inline: var(--ams-pagination-button-padding-inline);
-  text-decoration-line: var(--ams-pagination-button-text-decoration-line);
-  text-decoration-thickness: var(--ams-pagination-button-text-decoration-thickness);
-  text-underline-offset: var(--ams-pagination-button-text-underline-offset);
+.ams-pagination__link {
+  color: var(--ams-pagination-link-color);
+  display: inline-flex;
+  gap: var(--ams-pagination-link-gap);
+  outline-offset: var(--ams-pagination-link-outline-offset);
+  padding-inline: var(--ams-pagination-link-padding-inline);
+  text-decoration-line: var(--ams-pagination-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-pagination-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-pagination-link-text-underline-offset);
   touch-action: manipulation;
 
   @include text-rendering;
 
-  &:disabled {
-    display: none;
-  }
-
   &:hover {
-    color: var(--ams-pagination-button-hover-color);
-    text-decoration-line: var(--ams-pagination-button-hover-text-decoration-line);
+    color: var(--ams-pagination-link-hover-color);
+    text-decoration-line: var(--ams-pagination-link-hover-text-decoration-line);
   }
 
   // Override for icon size
@@ -63,9 +53,8 @@
   }
 }
 
-.ams-pagination__button--current {
-  cursor: default;
-  font-weight: var(--ams-pagination-button-current-font-weight);
+.ams-pagination__link[aria-current="page"] {
+  font-weight: var(--ams-pagination-link-current-font-weight);
 
   &:hover {
     text-decoration: none;

package/src/components/paragraph/paragraph.scss

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 @mixin reset-p {
@@ -18,6 +19,7 @@
   line-height: var(--ams-paragraph-line-height);
 
   @include text-rendering;
+  @include hyphenation;
   @include reset-p;
 }
 
@@ -31,6 +33,6 @@
   line-height: var(--ams-paragraph-large-line-height);
 }
 
-.ams-paragraph--inverse-color {
+.ams-paragraph--inverse {
   color: var(--ams-paragraph-inverse-color);
 }

package/src/components/password-input/password-input.scss

@@ -8,7 +8,7 @@
 @mixin reset-input {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
   appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
-  border: 0;
+  border: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
@@ -45,7 +45,7 @@
   background-color: var(--ams-password-input-disabled-background-color);
   box-shadow: var(--ams-password-input-disabled-box-shadow);
   color: var(--ams-password-input-disabled-color);
-  cursor: not-allowed;
+  cursor: var(--ams-password-input-disabled-cursor);
 }
 
 .ams-password-input:invalid,
@@ -53,7 +53,6 @@
   box-shadow: var(--ams-password-input-invalid-box-shadow);
 
   &:hover {
-    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-password-input-invalid-hover-box-shadow);
   }
 }

package/src/components/radio/radio.scss

@@ -5,6 +5,7 @@
 
 @use "../../common/input-label-focus" as *;
 @use "../../common/hide-input" as *;
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 .ams-radio__input {
@@ -15,7 +16,7 @@
 // Default
 .ams-radio__label {
   color: var(--ams-radio-color);
-  cursor: pointer;
+  cursor: var(--ams-radio-cursor);
   display: inline-flex;
   font-family: var(--ams-radio-font-family);
   font-size: var(--ams-radio-font-size);
@@ -26,6 +27,7 @@
   text-decoration-thickness: var(--ams-radio-text-decoration-thickness);
   text-underline-offset: var(--ams-radio-text-underline-offset);
 
+  @include hyphenation;
   @include text-rendering;
 }
 
@@ -92,7 +94,7 @@
 // Disabled
 .ams-radio__input:disabled + .ams-radio__label {
   color: var(--ams-radio-disabled-color);
-  cursor: not-allowed;
+  cursor: var(--ams-radio-disabled-cursor);
 
   .ams-radio__circle {
     stroke: var(--ams-radio-circle-disabled-stroke);
@@ -130,17 +132,14 @@
 // Invalid hover
 .ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover {
   .ams-radio__circle {
-    // TODO: this should be the (currently non-existent) dark red hover color
     stroke: var(--ams-radio-circle-invalid-hover-stroke);
   }
 
   .ams-radio__hover-indicator {
-    // TODO: this should be the (currently non-existent) dark red hover color
     stroke: var(--ams-radio-hover-indicator-invalid-hover-stroke);
   }
 
   .ams-radio__checked-indicator {
-    // TODO: this should be the (currently non-existent) dark red hover color
     fill: var(--ams-radio-checked-indicator-invalid-hover-fill);
   }
 }

package/src/components/row/row.scss

@@ -3,22 +3,22 @@
  * Copyright Gemeente Amsterdam
  */
 
-@use "../../common/size" as *;
-
 .ams-row {
   display: flex;
-  flex-direction: row;
-  gap: var(--ams-row-gap-md);
+  gap: var(--ams-row-gap-medium);
 }
 
-@each $size, $label in $ams-sizes {
-  @if $size != "md" {
-    .ams-row--gap-#{$label} {
-      gap: var(--ams-row-gap-#{$size});
-    }
+@each $size in ("x-small", "small", "large", "x-large") {
+  .ams-row--gap-#{$size} {
+    /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+    gap: var(--ams-row-gap-#{$size});
   }
 }
 
+.ams-row--gap-none {
+  gap: 0;
+}
+
 .ams-row--wrap {
   flex-wrap: wrap;
 }

package/src/components/screen/README.md

@@ -8,12 +8,12 @@ Manages the maximum width and alignment of the entire website or application.
 
 - This should be the outermost component of your website or application.
 - Within it, combine components such as
-  [Grid](/docs/components-layout-grid--docs),
-  [Header](/docs/components-containers-header--docs),
-  [Footer](/docs/components-containers-footer--docs),
-  [Spotlight](/docs/components-containers-spotlight--docs),
-  [Image Slider](/docs/components-media-image-slider--docs),
-  and Figure.
+  [Grid](https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs),
+  [Header](https://designsystem.amsterdam/?path=/docs/components-containers-header--docs),
+  [Footer](https://designsystem.amsterdam/?path=/docs/components-containers-footer--docs),
+  [Spotlight](https://designsystem.amsterdam/?path=/docs/components-containers-spotlight--docs),
+  [Image Slider](https://designsystem.amsterdam/?path=/docs/components-media-image-slider--docs),
+  and [Figure](https://designsystem.amsterdam/?path=/docs/components-media-figure--docs).
 
 ## Design
 

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

@@ -13,7 +13,7 @@
 @mixin reset-input {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
   appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
-  border: 0;
+  border: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
@@ -50,7 +50,6 @@
   box-shadow: var(--ams-search-field-input-invalid-box-shadow);
 
   &:hover {
-    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-search-field-input-invalid-hover-box-shadow);
   }
 }
@@ -64,7 +63,7 @@
   appearance: none;
   background-image: var(--ams-search-field-input-cancel-button-background-image);
   block-size: var(--ams-search-field-input-cancel-button-block-size);
-  cursor: pointer;
+  cursor: var(--ams-search-field-input-cancel-button-cursor);
   inline-size: var(--ams-search-field-input-cancel-button-inline-size);
   margin-inline-start: 0.5rem;
 }

package/src/components/select/select.scss

@@ -5,7 +5,7 @@
 
 @mixin reset-select {
   appearance: none; // Reset native appearance to hide default chevron
-  border: 0;
+  border: none;
   border-radius: 0; // Reset rounded borders for Safari on MacOS
 }
 
@@ -45,7 +45,7 @@
 .ams-select:disabled {
   box-shadow: var(--ams-select-disabled-box-shadow);
   color: var(--ams-select-disabled-color);
-  cursor: not-allowed;
+  cursor: var(--ams-select-disabled-cursor);
 
   &:not([multiple]) {
     background-image: var(--ams-select-disabled-background-image);

package/src/components/spotlight/README.md

@@ -8,8 +8,11 @@ Emphasizes a section on a page through a distinctive background colour.
 
 - Display the Spotlight at the entire width of the [Screen](/docs/components-layout-screen--docs); do not position it on the [Grid](/docs/components-layout-grid--docs).
 - Add a Grid with medium vertical padding inside the Spotlight to add whitespace around the content, even for a single element.
-- The default background is purple, but the colours can be chosen freely – they do not convey a meaning or theme in itself.
-- Refer to [this overview on Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) to determine whether you can use black or white text on the background colour of your choice.
+- Use any of the [highlight colours](/docs/brand-design-tokens-colour--docs) for the background.
+  The design system does not prescribe a meaning to any of these colours.
+  The default is purple.
+- Use the default text colour (black) on an azure, lime, orange or yellow background.
+  Use the inverse text colour (white) on a green, magenta or purple background.
 
 ## Relevant WCAG requirements