@amsterdam/design-system-css 0.15.0 → 0.16.0

package/src/components/link/README.md

@@ -7,16 +7,15 @@ It is the lightweight variant for navigation.
 
 ## Guidelines
 
-Use a link in the following cases:
-
-- To navigate to another page within the website or application
-- 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-layout-action-group--docs).
-
-A link is a navigation component.
-Use a button instead of a link when an action is desired.
+- Use a link in the following cases:
+  - To navigate to another page within the website or application
+  - 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:`)
+- A link is a navigation component.
+  Use a button instead of a link when an action is desired.
+- An icon can be added to links, positioned after the link.
+- Too many links on the same page may confuse the user.
 
 ### External links
 

package/src/components/link/link.scss

@@ -9,41 +9,19 @@
 .ams-link {
   color: var(--ams-link-color);
   font-family: var(--ams-link-font-family);
+  font-size: var(--ams-link-font-size);
   font-weight: var(--ams-link-font-weight);
+  line-height: var(--ams-link-line-height);
   outline-offset: var(--ams-link-outline-offset);
+  text-decoration-thickness: var(--ams-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-link-text-underline-offset);
 
   @include text-rendering;
 
   &:hover {
     color: var(--ams-link-hover-color);
-  }
-}
-
-.ams-link--standalone {
-  display: inline-block;
-  font-size: var(--ams-link-standalone-font-size);
-  line-height: var(--ams-link-standalone-line-height);
-  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);
-  }
-}
-
-.ams-link--inline {
-  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-thickness: var(--ams-link-inline-text-decoration-thickness);
-  text-underline-offset: var(--ams-link-inline-text-underline-offset);
-
-  &:hover {
-    text-decoration-thickness: var(--ams-link-inline-hover-text-decoration-thickness);
-    text-underline-offset: var(--ams-link-inline-hover-text-underline-offset);
+    text-decoration-thickness: var(--ams-link-hover-text-decoration-thickness);
+    text-underline-offset: var(--ams-link-hover-text-underline-offset);
   }
 }
 

package/src/components/logo/README.md

@@ -30,7 +30,7 @@ The sub-brands are:
 ## Requirements for all logos
 
 - The logo is always displayed.
-- The logo is left-aligned in the header.
+- The logo is left-aligned in the Page Header.
 - The logo links to the homepage of the website or application.
 - If the application is a form, application, or tool without a homepage, the logo links to the page where the form, application, or tool is referred to.
 

package/src/components/page/README.md

@@ -0,0 +1,23 @@
+<!-- @license CC0-1.0 -->
+
+# Page
+
+Contains the entire website.
+Sets the background colour and its maximum width, and is horizontally centered.
+
+## Guidelines
+
+- The Page component must be used on all websites for the City of Amsterdam.
+  Applications can use it as well, although a specific layout for them is in development.
+- It is the outermost container. Within it, combine components such as
+  [Grid](https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs),
+  [Page Header](https://designsystem.amsterdam/?path=/docs/components-containers-page-header--docs),
+  [Page Footer](https://designsystem.amsterdam/?path=/docs/components-containers-page-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
+
+The Page container sets the maximum width for a website of the City of Amsterdam, which is 1600 pixels.
+It horizontally centres both itself and its content and sets a white background.

package/src/components/page/page.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+.ams-page {
+  background-color: var(--ams-page-background-color);
+  margin-inline: auto;
+  max-inline-size: var(--ams-page-max-inline-size);
+  min-block-size: 100vh; /* Fallback for browsers that do not support dvh */
+  min-block-size: 100dvh;
+}

package/src/components/{footer → page-footer}/README.md

@@ -1,16 +1,18 @@
 <!-- @license CC0-1.0 -->
 
-# Footer
+# Page Footer
 
 Provides service information at the bottom of every page.
 
 ## Guidelines
 
-- The Footer usually consists of two sections: a full-width blue area and a `Footer.Menu` below it.
-- Both sections are preceded by a visually hidden `Heading` for accessibility.
-- A Footer containing only a `Footer.Menu` can be sufficient for applications.
-- The Footer must be used on all websites for the City of Amsterdam.
+- The Page Footer must be used on all websites and applications for the City of Amsterdam.
+- It usually consists of two sections: a full-width blue `PageFooter.Spotlight` and a `PageFooter.Menu` below it.
+- `Footer.Menu` is preceded by a visually hidden `Heading` for accessibility.
+- A Page Footer containing only a `PageFooter.Menu` can be sufficient for applications.
+- The Page Footer must be used on all websites for the City of Amsterdam.
 - It must be the same on every page.
+- Set [the inverse colour](?path=/docs/brand-design-tokens-colour--docs#pairing-foreground-with-background-colours) on all text and links in this area.
 
 The top section offers space for various practical links:
 

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

@@ -0,0 +1,56 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/breakpoint" as *;
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
+
+@mixin reset-ul {
+  list-style: none;
+  margin-block: 0;
+}
+
+.ams-page-footer__spotlight {
+  background-color: var(--ams-page-footer-spotlight-background-color);
+}
+
+.ams-page-footer__menu {
+  column-gap: var(--ams-page-footer-menu-column-gap);
+  display: flex;
+  flex-wrap: wrap;
+  padding-block: var(--ams-page-footer-menu-padding-block);
+  padding-inline: var(--ams-page-footer-menu-padding-inline);
+  row-gap: var(--ams-page-footer-menu-row-gap);
+
+  @include reset-ul;
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    padding-inline: var(--ams-page-footer-menu-medium-padding-inline);
+  }
+
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    padding-inline: var(--ams-page-footer-menu-wide-padding-inline);
+  }
+}
+
+.ams-page-footer__menu-link {
+  color: var(--ams-page-footer-menu-link-color);
+  font-family: var(--ams-page-footer-menu-link-font-family);
+  font-size: var(--ams-page-footer-menu-link-font-size);
+  font-weight: var(--ams-page-footer-menu-link-font-weight);
+  line-height: var(--ams-page-footer-menu-link-line-height);
+  outline-offset: var(--ams-page-footer-menu-link-outline-offset);
+  text-decoration-line: var(--ams-page-footer-menu-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-page-footer-menu-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-page-footer-menu-link-text-underline-offset);
+
+  @include hyphenation;
+  @include text-rendering;
+
+  &:hover {
+    color: var(--ams-page-footer-menu-link-hover-color);
+    text-decoration-line: var(--ams-page-footer-menu-link-hover-text-decoration-line);
+  }
+}

package/src/components/{header → page-header}/README.md

@@ -1,17 +1,17 @@
 <!-- @license CC0-1.0 -->
 
-# Header
+# Page Header
 
 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
 
-- The Header must be used on all websites and applications for the City of Amsterdam.
+- The Page 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.
+- The Page 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.
-- The Header is the same on every page of the application, although full-screen pages may hide it, e.g. a video or a map.
+- The Page Header is the same on every page of the application, although full-screen pages may hide it, e.g. a video or a map.
 - The inline menu can contain a maximum of 5 items.
   The last two will often be ‘Search’ and ‘Menu’.
 - The 'Menu' button opens a collapsible menu, which has room for more links.
@@ -22,5 +22,5 @@ Includes the name of the application if it is not the general website.
 
 ## References
 
-- A Header is a [landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark_roles) and can be used to group navigation elements.
+- A Page Header is a [landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark_roles) and can be used to group navigation elements.
 - [WCAG 3.2.3](https://wcag.com/designers/3-2-3-consistent-navigation/) Consistent Navigation: Navigation menus that appear on multiple pages are consistent.

package/src/components/{header/header.scss → page-header/page-header.scss}

@@ -6,35 +6,43 @@
 @use "../../common/breakpoint" as *;
 @use "../../common/text-rendering" as *;
 
-.ams-header {
+.ams-page-header {
   /*
   * 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;
-  font-family: var(--ams-header-font-family);
-  padding-block: var(--ams-header-padding-block);
-  padding-inline: var(--ams-header-padding-inline);
+  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 screen and (min-width: $ams-breakpoint-medium) {
+    padding-inline: var(--ams-page-header-medium-padding-inline);
+  }
+
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    padding-inline: var(--ams-page-header-wide-padding-inline);
+  }
 }
 
-.ams-header__logo-link {
+.ams-page-header__logo-link {
   align-items: center;
   align-self: start; // To align the logo link section to the top of the header when it wraps
-  column-gap: var(--ams-header-logo-link-column-gap);
+  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
   inline-size: fit-content;
-  outline-offset: var(--ams-header-logo-link-outline-offset);
+  outline-offset: var(--ams-page-header-logo-link-outline-offset);
   text-decoration: none;
 }
 
-.ams-header__logo-link--hidden {
+.ams-page-header__logo-link--hidden {
   opacity: 0%;
   user-select: none; // The hidden logo link section should not be selectable
 }
 
-.ams-header__logo-container {
+.ams-page-header__logo-container {
   flex-shrink: 0;
   inline-size: 0.75rem;
   overflow: hidden;
@@ -44,22 +52,23 @@
   }
 }
 
-.ams-header__brand-name {
-  color: var(--ams-header-brand-name-color);
-  font-size: var(--ams-header-brand-name-font-size);
-  font-weight: var(--ams-header-brand-name-font-weight);
+.ams-page-header__brand-name {
+  color: var(--ams-page-header-brand-name-color);
+  font-size: var(--ams-page-header-brand-name-font-size);
+  font-weight: var(--ams-page-header-brand-name-font-weight);
   line-height: 1.35;
+  text-wrap: var(--ams-page-header-brand-name-text-wrap);
 }
 
-.ams-header__navigation {
-  column-gap: var(--ams-header-navigation-column-gap);
+.ams-page-header__navigation {
+  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
   // 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;
-  row-gap: var(--ams-header-navigation-row-gap);
+  row-gap: var(--ams-page-header-navigation-row-gap);
 }
 
 @mixin reset-list {
@@ -68,62 +77,62 @@
   padding-inline-start: 0;
 }
 
-.ams-header__menu {
+.ams-page-header__menu {
   align-items: center;
-  column-gap: var(--ams-header-menu-column-gap);
+  column-gap: var(--ams-page-header-menu-column-gap);
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   margin-inline-start: auto;
   pointer-events: auto; // Set pointer events back to auto to allow the menu to be activated
-  row-gap: var(--ams-header-menu-row-gap);
+  row-gap: var(--ams-page-header-menu-row-gap);
 
   @include reset-list;
 }
 
 // Do not show menu items below the wide breakpoint...
-.ams-header__menu-item {
+.ams-page-header__menu-item {
   @media screen and (not (min-width: $ams-breakpoint-wide)) {
     display: none;
   }
 }
 
 // ...unless they're fixed.
-.ams-header__menu-item--fixed {
+.ams-page-header__menu-item--fixed {
   display: revert;
 }
 
-@mixin header-menu-action {
-  color: var(--ams-header-menu-item-color);
-  font-size: var(--ams-header-menu-item-font-size);
-  font-weight: var(--ams-header-menu-item-font-weight);
-  line-height: var(--ams-header-menu-item-line-height);
-  outline-offset: var(--ams-header-menu-item-outline-offset);
-  padding-block: var(--ams-header-menu-item-padding-block);
+@mixin page-header-menu-action {
+  color: var(--ams-page-header-menu-item-color);
+  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);
+  outline-offset: var(--ams-page-header-menu-item-outline-offset);
+  padding-block: var(--ams-page-header-menu-item-padding-block);
   touch-action: manipulation;
   white-space: nowrap;
 
   @include text-rendering;
 
   &:hover {
-    color: var(--ams-header-menu-item-hover-color);
+    color: var(--ams-page-header-menu-item-hover-color);
   }
 }
 
-.ams-header__menu-link {
+.ams-page-header__menu-link {
   display: inline-block;
-  text-decoration-line: var(--ams-header-menu-link-text-decoration-line);
-  text-decoration-thickness: var(--ams-header-menu-link-text-decoration-thickness);
-  text-underline-offset: var(--ams-header-menu-link-text-underline-offset);
+  text-decoration-line: var(--ams-page-header-menu-link-text-decoration-line);
+  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 header-menu-action;
+  @include page-header-menu-action;
 
   &:hover {
-    text-decoration-line: var(--ams-header-menu-link-hover-text-decoration-line);
+    text-decoration-line: var(--ams-page-header-menu-link-hover-text-decoration-line);
   }
 }
 
-.ams-header__mega-menu-button-item--hide-on-wide-window {
+.ams-page-header__mega-menu-button-item--hide-on-wide-window {
   @media screen and (min-width: $ams-breakpoint-wide) {
     display: none;
   }
@@ -139,36 +148,36 @@
   // [1] Remove the margin in older Safari.
 }
 
-.ams-header__mega-menu-button {
-  column-gap: var(--ams-header-menu-item-column-gap);
-  cursor: var(--ams-header-mega-menu-button-cursor);
+.ams-page-header__mega-menu-button {
+  column-gap: var(--ams-page-header-menu-item-column-gap);
+  cursor: var(--ams-page-header-mega-menu-button-cursor);
   display: grid;
   font-family: inherit;
   grid-auto-flow: column;
 
-  @include header-menu-action;
+  @include page-header-menu-action;
   @include reset-button;
 }
 
-.ams-header__mega-menu-button[aria-expanded="true"] {
-  font-weight: var(--ams-header-mega-menu-button-label-open-font-weight);
+.ams-page-header__mega-menu-button[aria-expanded="true"] {
+  font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight);
 }
 
-.ams-header__mega-menu-button-label,
-.ams-header__mega-menu-button-hidden-label {
+.ams-page-header__mega-menu-button-label,
+.ams-page-header__mega-menu-button-hidden-label {
   grid-area: 1 / 1; // To allow the label and the hidden label to overlap
 }
 
 // This hidden label is used to prevent a layout shift when the mega menu is opened
 // and the button text becomes bold.
-.ams-header__mega-menu-button-hidden-label {
-  font-weight: var(--ams-header-mega-menu-button-label-open-font-weight);
+.ams-page-header__mega-menu-button-hidden-label {
+  font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight);
   pointer-events: none;
   user-select: none;
   visibility: hidden;
 }
 
-.ams-header__menu-icon {
+.ams-page-header__menu-icon {
   line {
     stroke: currentColor;
     stroke-width: 3px;
@@ -183,30 +192,30 @@
     }
   }
 
-  .ams-header__menu-icon-top {
+  .ams-page-header__menu-icon-top {
     translate: 0 -7px;
   }
 
-  .ams-header__menu-icon-bottom {
+  .ams-page-header__menu-icon-bottom {
     translate: 0 7px;
   }
 }
 
-.ams-header__menu-icon--open {
-  .ams-header__menu-icon-top {
+.ams-page-header__menu-icon--open {
+  .ams-page-header__menu-icon-top {
     rotate: 45deg;
     translate: 0;
   }
-  .ams-header__menu-icon-middle {
+  .ams-page-header__menu-icon-middle {
     opacity: 0%;
   }
-  .ams-header__menu-icon-bottom {
+  .ams-page-header__menu-icon-bottom {
     rotate: -45deg;
     translate: 0;
   }
 }
 
-.ams-header__mega-menu {
+.ams-page-header__mega-menu {
   inline-size: 100%;
   pointer-events: auto; // Set pointer events back to auto to allow the mega menu to be activated
 
@@ -217,11 +226,11 @@
   }
 }
 
-.ams-header__mega-menu--closed.ams-header__mega-menu--closed {
+.ams-page-header__mega-menu--closed.ams-page-header__mega-menu--closed {
   display: none;
 }
 
-.ams-header__grid-cell-narrow-window-only {
+.ams-page-header__grid-cell-narrow-window-only {
   @media screen and (min-width: $ams-breakpoint-wide) {
     display: none;
   }

package/src/components/page-heading/README.md

@@ -2,7 +2,7 @@
 
 # Page Heading
 
-The page heading component is a prominent text at the beginning of a page, immediately after the header.
+The page heading component is a prominent text at the beginning of a page, immediately after the Page Header.
 Use this component for a name, title, or motto.
 
 ## Guidelines

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

@@ -19,6 +19,7 @@
   font-size: var(--ams-page-heading-font-size);
   font-weight: var(--ams-page-heading-font-weight);
   line-height: var(--ams-page-heading-line-height);
+  text-wrap: var(--ams-page-heading-text-wrap);
 
   @include hyphenation;
   @include text-rendering;

package/src/components/skip-link/README.md

@@ -6,13 +6,13 @@ Allows skipping past recurring navigation blocks at the top of a page.
 
 ## Design
 
-The Skip Link sits above the header and is as wide as the Screen container.
+The Skip Link sits above the Page Header and is as wide as the Page container.
 It remains hidden until activated with the ‘Tab’ key.
-After appearing, it pushes the entire page down.
+After appearing, it pushes the rest of the page down.
 
 ## Guidelines
 
-- Place the Skip Link as the first element in the Screen.
+- Place the Skip Link as the first element in the [Page](/docs/components-containers-page--docs) container.
 - Target the Skip Link to the main content.
   On an article page, for example, it could be the title of the article.
   On a search page, it could be the search field.

package/src/components/spotlight/README.md

@@ -6,13 +6,12 @@ Emphasizes a section on a page through a distinctive background colour.
 
 ## Guidelines
 
-- 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).
+- Display the Spotlight at the entire width of the [Page](/docs/components-containers-page--docs) container; 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.
 - 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.
+- Select [the correct colour](?path=/docs/brand-design-tokens-colour--docs#pairing-foreground-with-background-colours) for text and links against the background you choose.
 
 ## Relevant WCAG requirements
 

package/src/components/standalone-link/README.md

@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+# Standalone Link
+
+A navigation element that is seperated from the text around it.
+
+## Guidelines
+
+- Use a Standalone Link for links that need to stand out.
+- Use a regular [Link](/docs/components-navigation-link--docs) within sentences or paragraphs of text.
+- For additional guidelines, refer to the [Link](/docs/components-navigation-link--docs) component.

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

@@ -0,0 +1,53 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
+
+.ams-standalone-link {
+  color: var(--ams-standalone-link-color);
+  column-gap: var(--ams-standalone-link-column-gap);
+  display: inline-flex;
+  font-family: var(--ams-standalone-link-font-family);
+  font-size: var(--ams-standalone-link-font-size);
+  font-weight: var(--ams-standalone-link-font-weight);
+  line-height: var(--ams-standalone-link-line-height);
+  outline-offset: var(--ams-standalone-link-outline-offset);
+  text-decoration-thickness: var(--ams-standalone-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-standalone-link-text-underline-offset);
+
+  @include hyphenation;
+  @include text-rendering;
+
+  &:hover {
+    color: var(--ams-standalone-link-hover-color);
+    text-decoration-thickness: var(--ams-standalone-link-hover-text-decoration-thickness);
+    text-underline-offset: var(--ams-standalone-link-hover-text-underline-offset);
+  }
+}
+
+.ams-standalone-link--contrast {
+  color: var(--ams-standalone-link-contrast-color);
+
+  &:hover {
+    color: var(--ams-standalone-link-contrast-hover-color);
+  }
+}
+
+.ams-standalone-link--inverse {
+  color: var(--ams-standalone-link-inverse-color);
+
+  &:hover {
+    color: var(--ams-standalone-link-inverse-hover-color);
+  }
+}
+
+.ams-standalone-link--with-icon {
+  text-decoration-line: var(--ams-standalone-link-with-icon-text-decoration-line);
+
+  &:hover {
+    text-decoration-line: var(--ams-standalone-link-with-icon-hover-text-decoration-line);
+  }
+}

package/src/components/tabs/README.md

@@ -10,7 +10,7 @@ Tabs are used to bundle related content in a compact overview within a page. Eac
 - The content within each tab should have a similar structure.
 - Use when there is limited visual space and content needs to be divided into sections.
 - Each tab consists of a button and a panel.
-  A `tab` prop with a corresponding value connects them.
+  The button has an `aria-controls` attribute that matches the `id` of the associated panel.
 
 You can navigate tabs with your keyboard:
 

package/src/components/visually-hidden/visually-hidden.scss

@@ -11,5 +11,6 @@
   inline-size: 1px;
   overflow: hidden;
   position: absolute;
+  user-select: none;
   white-space: nowrap;
 }

package/dist/footer/footer.css

@@ -1 +0,0 @@
-.ams-footer__spotlight{background-color:var(--ams-footer-spotlight-background-color)}.ams-footer__menu{column-gap:var(--ams-footer-menu-column-gap);display:flex;flex-wrap:wrap;padding-block:var(--ams-footer-menu-padding-block);padding-inline:var(--ams-footer-menu-padding-inline);row-gap:var(--ams-footer-menu-row-gap);list-style:none;margin-block:0}.ams-footer__menu-link{color:var(--ams-footer-menu-link-color);font-family:var(--ams-footer-menu-link-font-family);font-size:var(--ams-footer-menu-link-font-size);font-weight:var(--ams-footer-menu-link-font-weight);line-height:var(--ams-footer-menu-link-line-height);outline-offset:var(--ams-footer-menu-link-outline-offset);text-decoration-line:var(--ams-footer-menu-link-text-decoration-line);text-decoration-thickness:var(--ams-footer-menu-link-text-decoration-thickness);text-underline-offset:var(--ams-footer-menu-link-text-underline-offset);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-footer__menu-link:hover{color:var(--ams-footer-menu-link-hover-color);text-decoration-line:var(--ams-footer-menu-link-hover-text-decoration-line)}/*# sourceMappingURL=footer.css.map */

package/dist/footer/footer.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/footer/footer.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAaA,uBACE,8DAGF,kBACE,6CACA,aACA,eACA,mDACA,qDACA,uCAdA,gBACA,eAkBF,uBACE,wCACA,oDACA,gDACA,oDACA,oDACA,0DACA,sEACA,gFACA,wEC/BA,kEACA,aACA,yBCEA,kCACA,2BACA,8BACA,sBF6BA,6BACE,8CACA","file":"footer.css"}