@amsterdam/design-system-css 0.8.0 → 0.10.0

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

@@ -0,0 +1,69 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/text-rendering";
+
+@mixin reset-button {
+  border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
+  box-sizing: border-box;
+}
+
+.ams-file-input {
+  background-color: var(--ams-file-input-background-color);
+  border: var(--ams-file-input-border);
+  color: var(--ams-file-input-color);
+  cursor: var(--ams-file-input-cursor);
+  font-family: var(--ams-file-input-font-family);
+  font-size: var(--ams-file-input-font-size);
+  font-weight: var(--ams-file-input-font-weight);
+  line-height: var(--ams-file-input-line-height);
+  max-inline-size: calc(100% - var(--ams-file-input-padding-inline) * 2);
+  outline-offset: 0.25rem; // Double the default focus outline offset to compensate for the dashed border
+  padding-block: var(--ams-file-input-padding-block);
+  padding-inline: var(--ams-file-input-padding-inline);
+  touch-action: manipulation;
+
+  @include text-rendering;
+}
+
+.ams-file-input:disabled {
+  color: var(--ams-file-input-disabled-color);
+  cursor: var(--ams-file-input-disabled-cursor);
+}
+
+.ams-file-input::file-selector-button {
+  -webkit-appearance: none; // Reset appearance for Safari < 15.4
+  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
+  background-color: var(--ams-file-input-file-selector-button-background-color);
+  box-shadow: var(--ams-file-input-file-selector-button-box-shadow);
+  color: var(--ams-file-input-file-selector-button-color);
+  cursor: var(--ams-file-input-file-selector-button-cursor);
+  font-family: inherit;
+  font-size: inherit; // iOS specific fix
+  font-weight: inherit;
+  margin-inline-end: var(--ams-file-input-file-selector-button-margin-inline-end);
+  padding-block: var(--ams-file-input-file-selector-button-padding-block);
+  padding-inline: var(--ams-file-input-file-selector-button-padding-inline);
+
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    border: var(
+      --ams-file-input-file-selector-button-forced-color-mode-border
+    ); // add border because forced colors changes box-shadow to none
+  }
+
+  @include reset-button;
+}
+
+.ams-file-input:disabled::file-selector-button {
+  box-shadow: var(--ams-file-input-file-selector-button-disabled-box-shadow);
+  color: var(--ams-file-input-disabled-color);
+  cursor: var(--ams-file-input-file-selector-button-disabled-cursor);
+}
+
+.ams-file-input:not(:disabled):hover::file-selector-button {
+  box-shadow: var(--ams-file-input-file-selector-button-hover-box-shadow);
+  color: var(--ams-file-input-file-selector-button-hover-color);
+}

package/src/components/footer/README.md

@@ -2,16 +2,21 @@
 
 # Footer
 
-The footer is the closing section on every web page.
-Its content provides service information.
-A part is prescribed, and a part is filled based on the website’s objectives.
+Provides service information at the bottom of every page.
 
 ## Guidelines
 
-- The footer is mandatory, and there is one on every page.
+The Footer consists of a dark blue [Spotlight](/docs/components-containers-spotlight--docs) and a [Page Menu](?path=/docs/components-navigation-page-menu--docs).
+It must be used on all websites for the City of Amsterdam.
+For applications, only the Page Menu can be sufficient.
+The Footer is the same on every page of the application.
+
+The Spotlight offers space for various practical links:
+
 - The first column focuses on contact information.
   The information is as specific as possible and tailored to the respective website or page (e.g., including a chat option if available).
 - The second column contains links to relevant (online) sites or sources.
 - The third column refers to newsletters, social media, etc.
-- The last part of the footer is intended for links to privacy policies, cookie statements, explanations about the website, etc.
-  It is not intended for links to contact information, for example.
+
+The menu at the very bottom is intended for links to privacy policies, cookie statements, information about the website itself, etc.
+Contact details should not go here.

package/src/components/form-error-list/README.md

@@ -0,0 +1,35 @@
+<!-- @license CC0-1.0 -->
+
+# Form Error List
+
+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.
+
+## 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).
+
+## Linking from the Form Error List 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.
+
+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
+
+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).
+
+## Relevant WCAG requirements
+
+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.
+
+## References
+
+- [Show an error summary above the form - NL Design System](https://www.nldesignsystem.nl/richtlijnen/formulieren/foutmeldingen#zet-een-samenvatting-van-de-foutmeldingen-boven-het-formulier)
+- [Error Summary component - Gov.uk](https://design-system.service.gov.uk/components/error-summary/)

package/src/components/header/README.md

@@ -2,13 +2,22 @@
 
 # Header
 
-Arranges the City’s logo, the title of the website, and a page menu.
+Displays the City’s logo at the top of every page, and optionally a navigation menu.
+Includes the name of the application if it is not the general website.
 
 ## Guidelines
 
-- Use the Header when the site is hosted on amsterdam.nl or one of its subdomains.
-- The page menu can contain a maximum of 5 items, including menu and search.
-- When you have a long subsite title, use no or as few page menu items as possible.
+The Header must be used on all websites and applications for the City of Amsterdam.
+It includes the logo of the City or the organization, the site title (except for the general website), and a menu with links to commonly used pages.
+
+The Header is important because it conveys our corporate identity and is the first thing people see.
+Using it consistently helps users recognize and trust the website.
+It is the same on every page of the application.
+
+The page menu can contain a maximum of 5 items.
+The last two will often be ‘Search’ and ‘Menu’.
+Labels should be short to ensure the menu fits on one line, even on medium-wide screens.
+An icon can be added to the end of a link to make its function easier to find.
 
 ## References
 

package/src/components/header/header.scss

@@ -47,31 +47,31 @@
   }
 }
 
-.ams-header__title {
+.ams-header__app-name {
   flex: 1 1 100%;
 
   @media screen and (min-width: $ams-breakpoint-wide) {
-    min-width: 0;
+    min-inline-size: 0;
     order: 2;
 
-    .ams-header__title-heading {
+    .ams-header__app-name-heading {
       display: block;
+      inline-size: 100%;
       line-height: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      width: 100%;
     }
   }
 }
 
-// Temporary, will move to megamenu (and/or iconButton)
+// Temporary – will move to Mega Menu and/or Icon Button
 .ams-header__menu-button {
   background-color: transparent;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M0 3.238h32V7.81H0V3.238zm0 10.476h32v4.572H0v-4.572zM0 24.19h32v4.572H0V24.19z'/></svg>");
   background-position: center right;
   background-repeat: no-repeat;
-  background-size: 19px 19px;
+  background-size: 1.1875rem 1.1875rem;
   border: 0;
   color: var(--ams-page-menu-item-color);
   font-family: var(--ams-page-menu-item-font-family);
@@ -79,7 +79,7 @@
   font-weight: var(--ams-page-menu-item-font-weight);
   line-height: var(--ams-page-menu-item-line-height);
   margin-block: 0;
-  padding-inline: 0 30px;
+  padding-inline: 0 1.875rem;
   text-align: center;
   touch-action: manipulation;
 }

package/src/components/icon/README.md

@@ -29,3 +29,7 @@ Icons are aligned to the left of the text by default and vertically centred to t
 Icons use the same text levels as all typographic components to determine their size.
 This ensures easy alignment between icons and text.
 [Refer to the typography documentation for more information](/docs/docs-design-guidelines-typography--docs).
+
+## Overview
+
+[You can find an overview of the available icons here](/docs/docs-assets-icons--docs).

package/src/components/icon/icon.scss

@@ -18,37 +18,37 @@
 }
 
 .ams-icon--size-3 {
-  height: calc(var(--ams-icon-size-3-font-size) * var(--ams-icon-size-3-line-height));
+  block-size: calc(var(--ams-icon-size-3-font-size) * var(--ams-icon-size-3-line-height));
 }
 
 .ams-icon--size-3 svg {
-  height: var(--ams-icon-size-3-font-size);
-  width: var(--ams-icon-size-3-font-size);
+  block-size: var(--ams-icon-size-3-font-size);
+  inline-size: var(--ams-icon-size-3-font-size);
 }
 
 .ams-icon--size-4 {
-  height: calc(var(--ams-icon-size-4-font-size) * var(--ams-icon-size-4-line-height));
+  block-size: calc(var(--ams-icon-size-4-font-size) * var(--ams-icon-size-4-line-height));
 }
 
 .ams-icon--size-4 svg {
-  height: var(--ams-icon-size-4-font-size);
-  width: var(--ams-icon-size-4-font-size);
+  block-size: var(--ams-icon-size-4-font-size);
+  inline-size: var(--ams-icon-size-4-font-size);
 }
 
 .ams-icon--size-5 {
-  height: calc(var(--ams-icon-size-5-font-size) * var(--ams-icon-size-5-line-height));
+  block-size: calc(var(--ams-icon-size-5-font-size) * var(--ams-icon-size-5-line-height));
 }
 
 .ams-icon--size-5 svg {
-  height: var(--ams-icon-size-5-font-size);
-  width: var(--ams-icon-size-5-font-size);
+  block-size: var(--ams-icon-size-5-font-size);
+  inline-size: var(--ams-icon-size-5-font-size);
 }
 
 .ams-icon--size-6 {
-  height: calc(var(--ams-icon-size-6-font-size) * var(--ams-icon-size-6-line-height));
+  block-size: calc(var(--ams-icon-size-6-font-size) * var(--ams-icon-size-6-line-height));
 }
 
 .ams-icon--size-6 svg {
-  height: var(--ams-icon-size-6-font-size);
-  width: var(--ams-icon-size-6-font-size);
+  block-size: var(--ams-icon-size-6-font-size);
+  inline-size: var(--ams-icon-size-6-font-size);
 }

package/src/components/image/image.scss

@@ -4,9 +4,9 @@
  */
 
 .ams-image {
+  block-size: auto; /* [1] */
   font-style: italic; /* [3] */
-  height: auto; /* [1] */
-  max-width: 100%; /* [1] */
+  max-inline-size: 100%; /* [1] */
   vertical-align: middle; /* [2] */
 
   &--cover {
@@ -14,7 +14,7 @@
   }
 }
 
-// [1] Allow for fluid image sizing while maintaining aspect ratio governed by width/height attributes
+// [1] Allow for fluid image sizing while maintaining aspect ratio governed by inline/block size attributes
 // [2] Remove ‘phantom’ white space
 // [3] Italicise alt text to visually offset it from surrounding copy
 // Source: https://x.com/csswizardry/status/1717841334462005661

package/src/components/index.scss

@@ -4,6 +4,10 @@
  */
 
 /* Append here */
+@import "./table-of-contents/table-of-contents";
+@import "./error-message/error-message";
+@import "./file-input/file-input";
+@import "./field/field";
 @import "./select/select";
 @import "./time-input/time-input";
 @import "./date-input/date-input";
@@ -18,7 +22,7 @@
 @import "./column/column";
 @import "./margin/margin";
 @import "./gap/gap";
-@import "./fieldset/fieldset";
+@import "./field-set/field-set";
 @import "./link-list/link-list";
 @import "./badge/badge";
 @import "./table/table";

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

@@ -26,10 +26,10 @@
   color: var(--ams-link-list-link-color);
   display: inline-flex;
   font-family: var(--ams-link-list-link-font-family);
-  font-size: var(--ams-link-list-link-medium-font-size);
+  font-size: var(--ams-link-list-link-font-size);
   font-weight: var(--ams-link-list-link-font-weight);
   gap: var(--ams-link-list-link-gap);
-  line-height: var(--ams-link-list-link-medium-line-height);
+  line-height: var(--ams-link-list-link-line-height);
   outline-offset: var(--ams-link-list-link-outline-offset);
   text-decoration-line: var(--ams-link-list-link-text-decoration-line);
   text-decoration-thickness: var(--ams-link-list-link-text-decoration-thickness);

package/src/components/logo/logo.scss

@@ -4,8 +4,8 @@
  */
 
 .ams-logo {
+  block-size: var(--ams-logo-block-size);
   display: block;
-  height: var(--ams-logo-height);
 }
 
 .ams-logo__emblem {

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

@@ -42,6 +42,11 @@
   color: var(--ams-ordered-list-inverse-color);
 }
 
+.ams-ordered-list--small:not(.ams-ordered-list--no-markers) {
+  font-size: var(--ams-ordered-list-small-font-size);
+  line-height: var(--ams-ordered-list-small-line-height);
+}
+
 /** A nested list has a different marker and less indentation for correct alignment. */
 :is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list {
   list-style-type: var(--ams-ordered-list-ordered-list-list-style-type);

package/src/components/pagination/README.md

@@ -15,6 +15,7 @@ Pagination indicates the current page and allows users to navigate to other page
 - Redirect users to the first page if they enter a URL with a page number that doesn’t exist.
 - Pagination can be combined with a counter at the top of the page indicating “Page # of ##.”
 - Start a page with an overview list at the top after changing the page.
+- Make sure that the visible and accessible labels for the ‘previous’ and ‘next’ buttons convey the same meaning at all times – e.g. don’t update one and forget the other.
 
 ## Relevant WCAG Rules
 

package/src/components/pagination/pagination.scss

@@ -56,8 +56,8 @@
 
   // Override for icon size
   span.ams-icon svg {
-    height: 1rem;
-    width: 1rem;
+    block-size: 1rem;
+    inline-size: 1rem;
   }
 
   @include text-rendering;

package/src/components/paragraph/paragraph.scss

@@ -13,9 +13,9 @@
 .ams-paragraph {
   color: var(--ams-paragraph-color);
   font-family: var(--ams-paragraph-font-family);
-  font-size: var(--ams-paragraph-medium-font-size);
+  font-size: var(--ams-paragraph-font-size);
   font-weight: var(--ams-paragraph-font-weight);
-  line-height: var(--ams-paragraph-medium-line-height);
+  line-height: var(--ams-paragraph-line-height);
 
   @include text-rendering;
   @include reset;

package/src/components/radio/radio.scss

@@ -14,23 +14,23 @@
 
 .ams-radio__circle {
   align-items: center;
+  block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
-  width: 1.5rem;
+  inline-size: 1.5rem;
 
   &::after {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
+    block-size: 1.5rem;
     border-color: var(--ams-radio-circle-border-color);
     border-radius: 100%;
     border-style: solid;
     border-width: var(--ams-radio-circle-border-width);
     box-sizing: border-box;
     content: "";
-    height: 1.5rem;
-    width: 100%;
+    inline-size: 100%;
   }
 }
 

package/src/components/screen/screen.scss

@@ -15,13 +15,13 @@
 }
 
 .ams-screen--full-height {
-  min-height: 100vh;
+  min-block-size: 100vh;
 }
 
 .ams-screen--wide {
-  max-width: var(--ams-screen-wide-max-width);
+  max-inline-size: var(--ams-screen-wide-max-inline-size);
 }
 
 .ams-screen--x-wide {
-  max-width: var(--ams-screen-x-wide-max-width);
+  max-inline-size: var(--ams-screen-x-wide-max-inline-size);
 }

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

@@ -11,9 +11,8 @@
 }
 
 @mixin reset-input {
-  // Reset native appearance, this causes issues on iOS and Android devices
-  -webkit-appearance: none;
-  appearance: none;
+  -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-radius: 0; // Reset rounded borders on iOS devices
   box-sizing: border-box;
@@ -27,12 +26,12 @@
   font-family: var(--ams-search-field-input-font-family);
   font-size: var(--ams-search-field-input-font-size);
   font-weight: var(--ams-search-field-input-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-search-field-input-line-height);
   outline-offset: var(--ams-search-field-input-outline-offset);
   padding-block: var(--ams-search-field-input-padding-block);
   padding-inline: var(--ams-search-field-input-padding-inline);
   touch-action: manipulation;
-  width: 100%;
 
   @include text-rendering;
   @include reset-input;
@@ -46,17 +45,28 @@
   }
 }
 
+.ams-search-field__input:invalid,
+.ams-search-field__input[aria-invalid="true"] {
+  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);
+  }
+}
+
 .ams-search-field__input::placeholder {
   color: var(--ams-search-field-input-placeholder-color);
+  opacity: 100%; // This resets the lower opacity set by Firefox
 }
 
 .ams-search-field__input::-webkit-search-cancel-button {
   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;
-  height: var(--ams-search-field-input-cancel-button-height);
+  inline-size: var(--ams-search-field-input-cancel-button-inline-size);
   margin-inline-start: 0.5rem;
-  width: var(--ams-search-field-input-cancel-button-width);
 }
 
 @mixin reset-button {

package/src/components/select/select.scss

@@ -4,7 +4,7 @@
  */
 
 @mixin reset {
-  appearance: none;
+  appearance: none; // Reset native appearance to hide default chevron
   border: 0;
   border-radius: 0; // Reset rounded borders for Safari on MacOS
 }
@@ -16,8 +16,8 @@
   font-family: var(--ams-select-font-family);
   font-size: var(--ams-select-font-size);
   font-weight: var(--ams-select-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-select-line-height);
-  max-inline-size: 100%;
   outline-offset: var(--ams-select-outline-offset);
   padding-block: var(--ams-select-padding-block);
   padding-inline: var(--ams-select-padding-inline);
@@ -37,12 +37,9 @@
   @include reset;
 }
 
+.ams-select:invalid,
 .ams-select[aria-invalid="true"] {
   box-shadow: var(--ams-select-invalid-box-shadow);
-
-  &:hover {
-    box-shadow: var(--ams-select-invalid-hover-box-shadow);
-  }
 }
 
 .ams-select:disabled {
@@ -55,6 +52,11 @@
   }
 }
 
+.ams-select:invalid:hover,
+.ams-select[aria-invalid="true"]:hover {
+  box-shadow: var(--ams-select-invalid-hover-box-shadow);
+}
+
 .ams-select__option:disabled {
   color: var(--ams-select-option-disabled-color);
 }

package/src/components/switch/switch.scss

@@ -16,29 +16,31 @@
 }
 
 .ams-switch__label {
+  --ams-switch-track-padding: 0.0625rem;
+
   background-color: var(--ams-switch-background-color);
-  border-radius: calc(var(--ams-switch-thumb-width) * 2);
+  border-radius: calc(var(--ams-switch-thumb-inline-size) * 2);
   cursor: pointer;
   display: inline-block;
+  inline-size: var(--ams-switch-inline-size);
   outline-offset: var(--ams-switch-outline-offset);
-  padding-block: 1px;
-  padding-inline: 1px;
+  padding-block: var(--ams-switch-track-padding);
+  padding-inline: var(--ams-switch-track-padding);
   transition: background-color 0.2s ease-in-out;
-  width: var(--ams-switch-width);
 
   @include reset;
 }
 
 .ams-switch__label::before {
   background-color: var(--ams-switch-thumb-background-color);
+  block-size: var(--ams-switch-thumb-block-size);
   border-radius: 50%;
   content: "";
   display: block;
-  height: var(--ams-switch-thumb-height);
+  inline-size: var(--ams-switch-thumb-inline-size);
   transition-duration: 0.1s;
   transition-property: box-shadow, transform;
   transition-timing-function: ease-in-out;
-  width: var(--ams-switch-thumb-width);
 }
 
 .ams-switch__input:checked + .ams-switch__label {
@@ -51,10 +53,11 @@
 }
 
 .ams-switch__input:checked + .ams-switch__label::before {
-  // The 2px is to account for the 1px padding-inline on the label
-  transform: translate(calc(var(--ams-switch-width) - var(--ams-switch-thumb-width) - 2px));
+  transform: translate(
+    calc(var(--ams-switch-inline-size) - var(--ams-switch-thumb-inline-size) - 2 * var(--ams-switch-track-padding))
+  );
 }
 
 .ams-switch:hover .ams-switch__input:enabled + .ams-switch__label::before {
-  box-shadow: 0 0 0 2px var(--ams-switch-thumb-hover-color);
+  box-shadow: var(--ams-switch-thumb-hover-box-shadow);
 }

package/src/components/table/table.scss

@@ -24,7 +24,7 @@
 
 .ams-table__cell,
 .ams-table__header-cell {
-  border-bottom: var(--ams-table-cell-border-bottom);
+  border-block-end: var(--ams-table-cell-border-block-end);
   padding-block: var(--ams-table-cell-padding-block);
   padding-inline: var(--ams-table-cell-padding-inline);
   text-align: start;

package/src/components/table-of-contents/README.md

@@ -0,0 +1,6 @@
+<!-- @license CC0-1.0 -->
+
+# Table of Contents
+
+A list of links corresponding to the content sections on the page.
+It helps users to easily navigate to different sections on the same page.

package/src/components/table-of-contents/table-of-contents.scss

@@ -0,0 +1,50 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/text-rendering";
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  padding-inline: 0;
+}
+
+.ams-table-of-contents {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--ams-table-of-contents-font-family);
+  font-size: var(--ams-table-of-contents-font-size);
+  font-weight: var(--ams-table-of-contents-font-weight);
+  gap: var(--ams-table-of-contents-gap);
+  line-height: var(--ams-table-of-contents-line-height);
+}
+
+.ams-table-of-contents__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ams-table-of-contents-list-gap);
+  list-style: none;
+
+  @include text-rendering;
+  @include reset;
+
+  .ams-table-of-contents__list {
+    padding-block-start: var(--ams-table-of-contents-list-list-padding-block-start);
+    padding-inline-start: var(--ams-table-of-contents-list-list-padding-inline-start);
+  }
+}
+
+.ams-table-of-contents__link {
+  color: var(--ams-table-of-contents-link-color);
+  outline-offset: var(--ams-table-of-contents-link-outline-offset);
+  text-decoration-line: var(--ams-table-of-contents-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-table-of-contents-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-table-of-contents-link-text-underline-offset);
+
+  &:hover {
+    color: var(--ams-table-of-contents-link-hover-color);
+    text-decoration-line: var(--ams-table-of-contents-link-hover-text-decoration-line);
+  }
+}

package/src/components/tabs/tabs.scss

@@ -12,7 +12,7 @@
 
 .ams-tabs__list {
   background-color: var(--ams-tabs-list-background-color);
-  border-bottom: var(--ams-tabs-list-border-bottom);
+  border-block-end: var(--ams-tabs-list-border-block-end);
   display: flex;
   overflow-x: auto;
 }