@amsterdam/design-system-css 0.2.0 → 0.4.0

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

@@ -0,0 +1,80 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2024 Gemeente Amsterdam
+ */
+
+@mixin reset-list {
+  box-sizing: border-box;
+  list-style: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-link-list {
+  @include reset-list;
+
+  display: grid;
+  gap: var(--amsterdam-link-list-gap);
+}
+
+.amsterdam-link-list__link {
+  align-items: flex-start;
+  color: var(--amsterdam-link-list-link-color);
+  display: inline-flex;
+  font-family: var(--amsterdam-link-list-link-font-family);
+  font-size: var(--amsterdam-link-list-link-spacious-medium-font-size);
+  font-weight: var(--amsterdam-link-list-link-font-weight);
+  gap: var(--amsterdam-link-list-link-gap);
+  line-height: var(--amsterdam-link-list-link-spacious-medium-line-height);
+  outline-offset: var(--amsterdam-link-list-link-outline-offset);
+  text-decoration-line: var(--amsterdam-link-list-link-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-link-list-link-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-link-list-link-text-underline-offset);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-link-list-link-compact-medium-font-size);
+    line-height: var(--amsterdam-link-list-link-compact-medium-line-height);
+  }
+
+  &:hover {
+    color: var(--amsterdam-link-list-link-hover-color);
+    text-decoration-line: var(--amsterdam-link-list-link-hover-text-decoration-line);
+  }
+}
+
+.amsterdam-link-list__link--small {
+  font-size: var(--amsterdam-link-list-link-spacious-small-font-size);
+  line-height: var(--amsterdam-link-list-link-spacious-small-line-height);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-link-list-link-compact-small-font-size);
+    line-height: var(--amsterdam-link-list-link-compact-small-line-height);
+  }
+}
+
+.amsterdam-link-list__link--large {
+  font-size: var(--amsterdam-link-list-link-spacious-large-font-size);
+  line-height: var(--amsterdam-link-list-link-spacious-large-line-height);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-link-list-link-compact-large-font-size);
+    line-height: var(--amsterdam-link-list-link-compact-large-line-height);
+  }
+}
+
+.amsterdam-link-list__link--on-background-dark {
+  color: var(--amsterdam-link-list-link-on-background-dark-color);
+
+  &:hover {
+    color: var(--amsterdam-link-list-link-on-background-dark-hover-color);
+  }
+}
+
+.amsterdam-link-list__link--on-background-light {
+  color: var(--amsterdam-link-list-link-on-background-light-color);
+
+  &:hover {
+    color: var(--amsterdam-link-list-link-on-background-light-hover-color);
+  }
+}

package/src/components/logo/README.md

@@ -1,38 +1,39 @@
 # Logo
 
-Het logo van de gemeente bestaat uit een beeldmerk (3 Andreaskruisen) en een woordmerk (Gemeente Amsterdam).
-Het logo heeft een vaste kleur, grootte en positie en staat op al onze websites.
+The City’s logo includes an icon (3 Saint Andrew’s crosses) and a wordmark (Gemeente Amsterdam).
+The logo has a fixed colour, size, and position and is present on all our websites.
 
-## Specificaties
+## Specifications
 
-Het design system biedt het correcte logo voor online gebruik aan.
-Er bestaan andere varianten van het logo, maar die mogen op websites en in applicaties niet gebruikt worden.
-Het Nederlandse logo voor Nederlandstalige websites en anderstalige websites behalve Engels.
-Het Engelstalige logo gebruiken we voor Engelstalige websites.
-Dit logo wordt later toegevoegd aan het design system.
-In de tussentijd kun je een afbeelding van dit logo downloaden vanaf [Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/logo-gemeente-amsterdam/#hba498e5c-2388-464f-b769-7622a5d32bd1).
+The design system provides the correct logo for online use.
+Other logo variations exist, but they cannot be used on websites and in applications.
+The Dutch logo is for websites in the Dutch language and any language other than English.
+The English logo is used for websites in the English language.
+(We will add this logo to the design system later.)
+In the meantime, you can download an image of this logo from [Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/logo-gemeente-amsterdam/#hba498e5c-2388-464f-b769-7622a5d32bd1).
 
-## Uitzondering
+## Exception
 
-Gebruik het submerklogo als de website eigendom is van 1 van de 4 submerken.
-Zij hebben een aparte status omdat er sprake is van een bijzondere vorm van dienstverlening die niet direct met de gemeente in verband wordt gebracht.
+Use a sub-brand logo if the website is owned by one of the 4 sub-brands.
+They have a separate status because of their unique service provision not directly associated with the City.
 
-De submerken zijn:
+The sub-brands are:
 
 - GGD Amsterdam
 - Stadsarchief
 - Stadsbank van Lening
 - VGA Verzekeringen
 
-## Eisen voor alle logo´s
+## Requirements for all logos
 
-- Het logo wordt altijd getoond.
-- Het logo is linksboven uitgelijnd in de header.
-- Het logo verwijst naar de homepage van je website of applicatie.
-- Als de applicatie een formulier, applicatie of tool is zonder homepage, dan linkt het logo naar de pagina van waar naar het formulier, applicatie of tool wordt verwezen.
+- The logo is always displayed.
+- The logo is left-aligned in the 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.
 
-De hoogte van het logo is altijd 40 pixels. Dit geldt ook voor de submerklogo´s.
+The height of the logo is always 40 pixels.
+This also applies to sub-brand logos.
 
 ## Download
 
-- [Logoset voor website en apps (ZIP, 10 kB)](https://assets.amsterdam.nl/publish/pages/1007650/logoset_voor_websites_en_apps.zip)
+- [Logo set for websites and apps (ZIP, 10 kB)](https://assets.amsterdam.nl/publish/pages/1007650/logoset_voor_websites_en_apps.zip)

package/src/components/logo/logo.scss

@@ -4,6 +4,7 @@
  */
 
 .amsterdam-logo {
+  display: block;
   height: var(--amsterdam-logo-height);
 }
 

package/src/components/mark/README.md

@@ -0,0 +1,17 @@
+# Mark
+
+Highlights a text fragment using a yellow background.
+Provides strong emphasis on the text and draws attention to it.
+
+## Guidelines
+
+### How to Use
+
+- Use a maximum of 1 mark per page.
+- Limit the marked text to 1 sentence.
+
+### Avoid This
+
+- Do not use it in titles and subtitles.
+  Use a significant and engaging title if the entire paragraph is important.
+- Do not mark an entire paragraph.

package/src/components/mark/mark.scss

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-mark {
+  background-color: var(--amsterdam-mark-background-color);
+}

package/src/components/mega-menu/README.md

@@ -0,0 +1 @@
+# Mega Menu

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

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-mega-menu__list-category {
+  column-gap: var(--amsterdam-mega-menu-list-category-column-gap);
+  column-width: var(--amsterdam-mega-menu-list-category-column-width);
+  padding-block-start: var(--amsterdam-mega-menu-list-category-padding-block-start);
+
+  &:not(:last-child) {
+    padding-block-end: var(--amsterdam-mega-menu-list-category-padding-block-end);
+  }
+}

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

@@ -1,7 +1,7 @@
 # Ordered List
 
-Een geordende lijst is een verticale groep gerelateerde inhoud met een volgorde.
-Deze lijst kan 2 niveaus hebben.
-Het eerste niveau is genummerd.
-Het tweede niveau gebruikt letters in alfabetische volgorde.
-Tekst in de lijstitems springt een vaste afstand in.
+An ordered list is a vertical group of related content with an order.
+This list can have 2 levels.
+The first level has numbers as list markers.
+The second level uses letters in alphabetical order.
+List items indent their text by a fixed distance.

package/src/components/overlap/README.md

@@ -0,0 +1,3 @@
+# Overlap
+
+Displays two or more components on top of each other.

package/src/components/overlap/overlap.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-overlap {
+  display: grid;
+
+  > * {
+    grid-area: 1 / -1;
+  }
+}

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

@@ -1,16 +1,17 @@
 # Page Heading
 
-Het page heading component is een opvallende tekst aan het begin van een pagina, direct na de header.
-Gebruik dit component voor een naam, titel of motto.
+The page heading component is a prominent text at the beginning of a page, immediately after the header.
+Use this component for a name, title, or motto.
 
-## Richtlijnen
+## Guidelines
 
-- Gebruik dit component om de aandacht van de gebruiker te trekken.
-- Gebruik dit component maar 1 keer per pagina, vaak alleen op de voorpagina.
-- Niet gebruiken als je lange stukken tekst wilt weergeven, de tekst moet kort en duidelijk zijn.
+- Use this component to capture the user’s attention.
+- Only use this component once per page, typically only on the homepage.
+- Avoid using it if you need to display long pieces of text; the text should be short and precise.
 
-## Relevante WCAG eisen
+## Relevant WCAG Requirements
 
-Het page heading component is een variant van een heading level 1, met een afwijkende stijl. Let bij gebruik van dit component goed op dat de heading hiërarchie van de pagina logisch blijft.
+The page heading component is a variant of a heading level 1 with a distinct style.
+When using this component, ensure that the heading hierarchy of the page remains logical.
 
-Voor dit component gelden dezelfde WCAG eisen als voor [het heading component](https://amsterdam.github.io/design-system/?path=/docs/react_text-heading--docs).
+For this component, the same WCAG requirements apply as for [the heading component](https://amsterdam.github.io/design-system/?path=/docs/react_text-heading--docs).

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

@@ -1,17 +1,18 @@
 # Page Menu
 
-Het Page Menu wordt alleen gebruikt in het Header en Footer component en is uitsluitend bedoeld voor horizontale navigatie. Het uiterlijk van de links en buttons zijn gelijk getrokken en kunnen beide gebruikt worden. Een link voor navigatie acties en een button voor het afvuren van een javascript event voor bijvoorbeeld het openen van het hoofdmenu of het tonen van een modal.
+A small set of links for use in the Header and Footer.
 
-## Richtlijnen
+## Guidelines
 
-- Als hoofdnavigatie in de header heeft het Page Menu maximaal 5 items inclusief Zoeken en Menu, staan op 1 regel en is rechts uitgelijnd. Houd minimaal 1 kolom afstand tussen de sitetitel en het eerste menu-item.
-- Als footer menu in het Page Menu links uitgelijnd.
-- Submenu's zijn niet toegestaan.
-  - Gebruik het standaard Menu-item als er meer informatie in het hoofdmenu nodig is. Dit item toont een schermbreed uitklapmenu (overlay) met koppelingen. De indeling van de koppelingen is vrij.
-  - Bij gebruik van het Menu-item zijn de overige items (bijvoorbeeld Zoeken, Contact) in de koptekst functioneel. Deze items kunnen herhaald worden binnen het uitgeklapte Menu-item.
+- Limit the amount of menu items in the Header to 5 items or less, including ‘Search’ and ‘Menu’.
+- The menu should fit on a single line and is right-aligned.
+- The menu in the footer is left-aligned.
+- Submenus are not allowed.
+- The ‘Menu’ button opens the Mega Menu.
+- On narrow screens, menu items other than ‘Search’ and ‘Menu’ move from the Page Menu to the Mega Menu.
 
-## Relevante WCAG eisen
+## Relevant WCAG Requirements
 
 - [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html)
 
-PageMenu is een interactief element, hier gelden [de algemene eisen en richtlijnen voor interactieve elementen](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) voor.
+PageMenu is an interactive element, and the [general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.

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

@@ -14,19 +14,11 @@
   -webkit-text-size-adjust: 100%;
 }
 
-@mixin reset-button {
-  background-color: transparent;
-  border: 0;
-  margin-block: 0;
-  padding-inline: 0;
-}
-
 .amsterdam-page-menu {
   align-items: center;
   column-gap: var(--amsterdam-page-menu-column-gap);
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
   list-style: none;
   row-gap: var(--amsterdam-page-menu-row-gap);
 
@@ -52,6 +44,7 @@
   text-decoration-thickness: var(--amsterdam-page-menu-item-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-page-menu-item-text-underline-offset);
   touch-action: manipulation;
+  white-space: nowrap;
 
   .amsterdam-theme--compact & {
     font-size: var(--amsterdam-page-menu-item-compact-font-size);
@@ -64,21 +57,12 @@
   @include reset-item;
 }
 
-.amsterdam-page-menu__button {
-  cursor: pointer;
-
-  @include reset-item;
-  @include reset-button;
-  @include page-menu-item;
-}
-
 .amsterdam-page-menu__link:hover,
 .amsterdam-page-menu__button:hover {
   color: var(--amsterdam-page-menu-item-hover-color);
   text-decoration-line: var(--amsterdam-page-menu-item-hover-text-decoration-line);
 }
 
-.amsterdam-page-menu__link svg,
-.amsterdam-page-menu__button svg {
+.amsterdam-page-menu__link svg {
   color: currentColor;
 }

package/src/components/pagination/README.md

@@ -1,16 +1,19 @@
 # Pagination
 
-Pagination (in het Nederlands: paginering) is een navigatie-element om tussen meerdere pagina’s met overzichtslijsten te navigeren. Denk hierbij aan zoekresultaten of een lijst met nieuwsartikelen. Bij lange overzichtslijsten kan het duidelijker of functioneler zijn om de inhoud over meerdere pagina’s te verdelen. Paginering laat zien op welke pagina de gebruiker zich bevindt en de gebruiker kan hiermee naar een andere pagina navigeren.
+Pagination is a navigation element used to navigate between multiple pages of overview lists.
+This is commonly used for search results or a list of news articles.
+In cases where overview lists are too long to display on a single page, pagination can provide a clearer and more functional way to divide the content across multiple pages.
+Pagination indicates the current page and allows users to navigate to other pages.
 
-## Richtlijnen
+## Guidelines
 
-- Gebruik paginering alleen als een overzichtslijst te lang is om op 1 pagina te tonen.
-- Voeg de paginering toe onder de overzichtslijst.
-- De paginering wordt niet getoond als er maar 1 pagina is.
-- Verwijs de gebruikers door naar de eerste pagina als ze een URL opgeven van een paginanummer dat niet (meer) bestaat.
-- De paginering kan gecombineerd worden met een teller bovenaan de pagina die “Pagina # van ##” aanduidt.
-- Start een pagina met een overzichtslijst bovenaan na het veranderen van pagina.
+- Use pagination only when an overview list is too long to display on a single page.
+- Place pagination below the overview list.
+- Pagination should not be displayed if there is only one 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.
 
-## Relevante WCAG regels
+## Relevant WCAG Rules
 
-Pagination is een interactief element, hier gelden [de algemene eisen en richtlijnen voor interactieve elementen](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) voor.
+Pagination is an interactive element, and the [general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.

package/src/components/paragraph/README.md

@@ -1,24 +1,26 @@
 # Paragraph
 
-De `Paragraph` component gebruik je voor een alinea met lopende tekst, instructies van formulieren en voor overige losstaande tekstfragmenten.
+Represents a paragraph of running text, form instructions, and other standalone text fragments.
 
-## Richtlijnen
+## Guidelines
 
-- Groepeer zinnen die bij elkaar horen in een alinea. Begin een nieuwe alinea wanneer de tekst over een andere onderwerp gaat of een eigen doel heeft.
-- Overweeg of een alinea met meer dan 7 zinnen of 140 woorden duidelijker is als je tekst indeelt in twee alinea's. Teksten met niet al te lange alinea's zijn makkelijker te begrijpen als je pauze neemt, en door het groeperen is informatie sneller terug te vinden.
+- Group sentences that belong together into a paragraph.
+  Start a new paragraph when the text shifts to a different topic or has its own purpose.
+- Consider whether a paragraph with more than 7 sentences or 140 words would be clearer if you divide the text into two paragraphs.
+  Texts with not overly long paragraphs are easier to understand, and grouping makes information quicker to locate.
 
-## Relevante WCAG eisen
+## Relevant WCAG Rules
 
-- [WCAG 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): Blokken die er uit zien als een alinea worden ook door een computer herkend als alinea
-- [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): Het contrast van zwarte tekst op een witte achtergrond is hoog genoeg
-- [WCAG 1.4.4](https://www.w3.org/TR/WCAG21/#resize-text): Tekst kan met zoomen en het aanpassen van de standaard tekstgrootte twee keer zo groot gemaakt worden
-- [WCAG 1.4.10](https://www.w3.org/TR/WCAG21/#reflow): Als de tekst breder is dan de viewport is scrollen niet nodig om alle tekst te kunnen zien
-- [WCAG 1.4.12](https://www.w3.org/TR/WCAG21/#text-spacing): De genoemde style properties kunnen worden aangepast zonder dat de tekst onleesbaar wordt
-- [WCAG 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts): Het is aan te geven in welke taal de tekst is
-- [WCAG 1.4.6](https://www.w3.org/TR/WCAG21/#contrast-enhanced): Het contrast van zwarte tekst op een witte achtergrond is hoger dan 7:1
-- [WCAG 1.4.8](https://www.w3.org/TR/WCAG21/#visual-presentation): We voldoen niet aan al deze eisen
+- [WCAG 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): Blocks that look like a paragraph are also recognized by a computer as a paragraph.
+- [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): The contrast of black text on a white background is high enough.
+- [WCAG 1.4.4](https://www.w3.org/TR/WCAG21/#resize-text): Text can be resized up to twice its default size.
+- [WCAG 1.4.10](https://www.w3.org/TR/WCAG21/#reflow): If the text is wider than the viewport, scrolling is not necessary to see all the text.
+- [WCAG 1.4.12](https://www.w3.org/TR/WCAG21/#text-spacing): The mentioned style properties can be adjusted without making the text unreadable.
+- [WCAG 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts): It is possible to indicate the language of the text.
+- [WCAG 1.4.6](https://www.w3.org/TR/WCAG21/#contrast-enhanced): The contrast of black text on a white background is higher than 7:1.
+- [WCAG 1.4.8](https://www.w3.org/TR/WCAG21/#visual-presentation): We do not meet all these requirements.
 
-## Referenties
+## References
 
 - [MDN: `<p>`: The Paragraph element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)
 - [Hoe lang mag een alinea zijn? En waar hangt dat van af? - Taaladvies.net](https://taaladvies.net/lengte-van-alineas/)

package/src/components/screen/README.md

@@ -1,20 +1,20 @@
 # Screen
 
-Verzorgt de maximale breedte en de uitlijning van de hele website of applicatie.
+Manages the maximum width and alignment of the entire website or application.
 
-## Gebruik
+## Usage
 
-Dit moet het buitenste component van je website of applicatie zijn.
-Daarbinnen combineer je componenten als
+This should be the outermost component of your website or application.
+Within it, combine components such as
 [Grid](?path=/docs/react_layout-grid--docs),
-Header,
+[Header](?path=/docs/react_containers-header--docs),
 [Footer](?path=/docs/react_containers-footer--docs),
-[Highlight](?path=/docs/react_containers-highlight--docs)
-en Figure.
+[Spotlight](?path=/docs/react_containers-spotlight--docs),
+and Figure.
 
-## Ontwerp
+## Design
 
-Standaard groeit dit component tot een breedte van 1600 pixels.
-Dit is de maximale breedte voor een website van de gemeente Amsterdam.
-Voor applicaties kun je kiezen voor een grotere maximale breedte van 2112 pixels.
-Het component centreert zowel zichzelf als zijn inhoud horizontaal.
+By default, this component expands to a width of 1600 pixels.
+This is the maximum width for a website of the City of Amsterdam.
+For applications, you can choose a larger maximum width of 2112 pixels.
+The component horizontally centres both itself and its content.

package/src/components/search-field/README.md

@@ -0,0 +1,33 @@
+# Search Field
+
+Allows users to quickly find relevant content by entering a (part of a) word or phrase to search through the content.
+
+## Guidelines
+
+- Users can initiate a search by using the search button or the Enter key.
+
+## Autofocus
+
+You can use `autofocus` to place focus directly on a search field when the user arrives on a page.
+However, use this feature with caution, as it can have negative consequences:
+
+- For screen reader users, this may result in skipping important content above the search field.
+- On smaller devices, the use of `autofocus` may automatically scroll the page to the search field, potentially causing users to miss previous content.
+- On touchscreen devices, this can trigger the keyboard to appear immediately, hiding important content.
+
+Use `autofocus` only if the search field is at the beginning of a page and there are no other elements on a page that a user might want to interact with first.
+
+For more information: [Accessibility Tips: Be Cautious When Using Autofocus](https://www.boia.org/blog/accessibility-tips-be-cautious-when-using-autofocus)
+
+## `autocomplete` and `spellcheck`
+
+Both `autocomplete` and `spellcheck` are turned off by default.
+These features can be disruptive for a user searching for part of a word, and `autocomplete` may interfere with an Autosuggest component.
+
+## Relevant WCAG Requirements
+
+- [WCAG 1.3.1](https://www.w3.org/TR/WCAG22/#info-and-relationships): `role="search"` is used for the search landmark role.
+- [WCAG 1.3.5](https://www.w3.org/TR/WCAG22/#identify-input-purpose): It is clear both to the user and programmatically what the purpose of a form field is.
+- [WCAG 2.4.6](https://www.w3.org/TR/WCAG22/#headings-and-labels): There is a label describing the purpose of the input.
+
+Search Field is an interactive element; therefore, [the general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.

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

@@ -0,0 +1,73 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-search-field {
+  display: flex;
+  isolation: isolate; // create new stacking context, so the input’s z-index doesn’t escape the component
+}
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-search-field__input {
+  border: none;
+  box-shadow: var(--amsterdam-search-field-input-box-shadow);
+  color: var(--amsterdam-search-field-input-color);
+  font-family: var(--amsterdam-search-field-input-font-family);
+  font-size: var(--amsterdam-search-field-input-spacious-font-size);
+  font-weight: var(--amsterdam-search-field-input-font-weight);
+  line-height: var(--amsterdam-search-field-input-spacious-line-height);
+  outline-offset: var(--amsterdam-search-field-input-outline-offset);
+  padding-block: 0.5rem;
+  padding-inline: 1rem;
+  touch-action: manipulation;
+  width: 100%;
+
+  @include reset;
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-search-field-input-compact-font-size);
+    line-height: var(--amsterdam-search-field-input-compact-line-height);
+  }
+
+  &:hover {
+    box-shadow: var(--amsterdam-search-field-input-hover-box-shadow);
+  }
+
+  &:focus {
+    z-index: 1; // Make sure the focus outline isn’t cut off by the adjacent button
+  }
+}
+
+.amsterdam-search-field__input::placeholder {
+  color: var(--amsterdam-search-field-input-placeholder-color);
+}
+
+.amsterdam-search-field__input::-webkit-search-cancel-button {
+  appearance: none;
+  background-image: var(--amsterdam-search-field-input-cancel-button-background-image);
+  cursor: pointer;
+  height: var(--amsterdam-search-field-input-cancel-button-height);
+  margin-inline-start: 0.5rem;
+  width: var(--amsterdam-search-field-input-cancel-button-width);
+}
+
+.amsterdam-search-field__button {
+  background-color: var(--amsterdam-search-field-button-background-color);
+  border: 0;
+  color: var(--amsterdam-search-field-button-color);
+  cursor: pointer;
+  outline-offset: var(--amsterdam-search-field-button-outline-offset);
+  padding-block: 0.5rem;
+  padding-inline: 0.5rem;
+  touch-action: manipulation;
+
+  &:hover {
+    background-color: var(--amsterdam-search-field-button-hover-background-color);
+  }
+}

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

@@ -0,0 +1,26 @@
+# Skip Link
+
+Use a Skip Link to navigate to the main content quickly with the keyboard.
+A Skip Link allows skipping recurring navigation blocks, such as the main menu or breadcrumb trail.
+
+The Skip Link is placed above the header.
+The link is hidden until activated with the tab key.
+When the link is shown, it pushes the entire page down.
+
+## Guidelines
+
+### How to Use
+
+- Place the Skip Link as the first element in `<body>` unless you have a cookie banner.
+  In that case, place the Skip Link immediately after the cookie banner.
+- Use the Skip Link to navigate 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.
+- Set `id="example-id"` on the container of that element and then use `href="#example-id"` on the Skip Link.
+- You can use more than one Skip Link for complex pages with multiple sections.
+  In most cases, this is not necessary.
+
+### Avoid
+
+- Skip Links are unnecessary on a simple page with only text and minimal navigation.
+  The purpose of a Skip Link is to bypass recurring navigation blocks.
+  If those blocks are not present, a Skip Link is not needed.

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

@@ -0,0 +1,28 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-skip-link {
+  background-color: var(--amsterdam-skip-link-background-color);
+  color: var(--amsterdam-skip-link-color);
+  display: block;
+  font-family: var(--amsterdam-skip-link-font-family);
+  font-size: var(--amsterdam-skip-link-font-size);
+  font-weight: var(--amsterdam-skip-link-font-weight);
+  line-height: var(--amsterdam-skip-link-line-height);
+  outline-offset: var(--amsterdam-skip-link-outline-offset);
+  padding-block: 0.5rem;
+  padding-inline: 1rem;
+  text-align: center;
+  text-decoration: none;
+
+  &:hover {
+    background-color: var(--amsterdam-skip-link-hover-background-color);
+  }
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-skip-link-compact-font-size);
+    line-height: var(--amsterdam-skip-link-compact-line-height);
+  }
+}