@amsterdam/design-system-css 0.1.9 → 0.3.0

package/src/components/paragraph/paragraph.scss

@@ -0,0 +1,49 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-paragraph {
+  color: var(--amsterdam-paragraph-color);
+  font-family: var(--amsterdam-paragraph-font-family);
+  font-size: var(--amsterdam-paragraph-spacious-medium-font-size);
+  font-weight: var(--amsterdam-paragraph-font-weight);
+  line-height: var(--amsterdam-paragraph-spacious-medium-line-height);
+
+  @include reset;
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-paragraph-compact-medium-font-size);
+    line-height: var(--amsterdam-paragraph-compact-medium-line-height);
+  }
+}
+
+.amsterdam-paragraph--small {
+  font-size: var(--amsterdam-paragraph-spacious-small-font-size);
+  line-height: var(--amsterdam-paragraph-spacious-small-line-height);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-paragraph-compact-small-font-size);
+    line-height: var(--amsterdam-paragraph-compact-small-line-height);
+  }
+}
+
+.amsterdam-paragraph--large {
+  font-size: var(--amsterdam-paragraph-spacious-large-font-size);
+  line-height: var(--amsterdam-paragraph-spacious-large-line-height);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-paragraph-compact-large-font-size);
+    line-height: var(--amsterdam-paragraph-compact-large-line-height);
+  }
+}
+
+.amsterdam-paragraph--inverse-color {
+  color: var(--amsterdam-paragraph-inverse-color);
+}

package/src/{screen → components/screen}/README.md

@@ -9,7 +9,7 @@ Daarbinnen combineer je componenten als
 [Grid](?path=/docs/react_layout-grid--docs),
 Header,
 [Footer](?path=/docs/react_containers-footer--docs),
-[Highlight](?path=/docs/react_containers-highlight--docs)
+[Spotlight](?path=/docs/react_containers-spotlight--docs)
 en Figure.
 
 ## Ontwerp

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

@@ -0,0 +1,33 @@
+# Search Field
+
+Met een Search Field (in het Nederlands: zoekveld) kunnen gebruikers snel relevante inhoud vinden. Een gebruiker voert een (deel van een) woord of zin in om daarmee inhoud te doorzoeken.
+
+## Richtlijnen
+
+- Je kunt een zoekactie starten door de zoekknop of de Enter-toets te gebruiken.
+- Als er geen zoekterm is ingevuld kan geen zoekactie gestart worden.
+
+## Autofocus
+
+Je kunt `autofocus` gebruiken om de focus gelijk in een zoekveld te plaatsen als de gebruiker op een pagina komt.
+Wees hier wel voorzichtig mee, dit kan negatieve gevolgen hebben:
+
+- Voor gebruikers van een schermlezer kan dit betekenen dat ze belangrijk inhoud boven het zoekveld overslaan.
+- Op kleinere apparaten kan het gebruik van `autofocus` er voor zorgen dat de pagina automatisch naar het zoekveld scrollt, waardoor je eerdere inhoud kan missen.
+- Op apparaten met touchscreen kan dit ervoor zorgen dat het toetsenbord gelijk wordt getoond, waardoor belangrijke inhoud verborgen wordt.
+
+Gebruik `autofocus` alleen als het zoekveld aan het begin van een pagina staat, en er geen andere elementen op een pagina staan waar een gebruiker misschien eerst gebruik van wil maken.
+
+Voor meer informatie: [Accessibility Tips: Be Cautious When Using Autofocus](https://www.boia.org/blog/accessibility-tips-be-cautious-when-using-autofocus)
+
+## Autocomplete en spellcheck
+
+`autocomplete` en `spellcheck` staan standaard uit. Deze functies kunnen vervelend zijn voor een gebruiker die zoekt op een deel van een woord, en `autocomplete` kan in de weg zitten van een Autosuggest component.
+
+## Relevante WCAG eisen
+
+- [WCAG 1.3.1](https://www.w3.org/TR/WCAG22/#info-and-relationships): `role="search"` wordt gebruikt voor de search landmark role.
+- [WCAG 1.3.5](https://www.w3.org/TR/WCAG22/#identify-input-purpose): het is zowel voor een gebruiker als programmatisch duidelijk wat het doel van een formulierveld is.
+- [WCAG 2.4.6](https://www.w3.org/TR/WCAG22/#headings-and-labels): er is een label dat het doel van de input beschrijft.
+
+Search Field 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.

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

@@ -0,0 +1,81 @@
+/**
+ * @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;
+
+  span {
+    display: flex;
+    justify-content: center;
+
+    // use icon tokens to set width equal to height
+    width: calc(var(--amsterdam-icon-spacious-size-6-font-size) * var(--amsterdam-icon-spacious-size-6-line-height));
+  }
+
+  &:hover {
+    background-color: var(--amsterdam-search-field-button-hover-background-color);
+  }
+}

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

@@ -0,0 +1,33 @@
+# Skip Link
+
+Gebruik een Skip Link om makkelijk met het toetsenbord naar de belangrijkste inhoud te navigeren.
+Met een Skip Link kun je terugkerende navigatieblokken (zoals het hoofdmenu of het kruimelpad) overslaan.
+
+De Skip Link staat boven de header.
+De link is verborgen totdat deze met de tab-toets geactiveerd wordt.
+Als de link getoond wordt, duwt deze de hele pagina omlaag.
+
+## Richtlijnen
+
+### Zo gebruiken
+
+- Plaats de Skip Link als eerste element in `<body>`, tenzij je een cookie-banner hebt.
+  Plaats de Skip Link dan direct na de cookie-banner.
+- Gebruik de Skip Link om naar de belangrijkste inhoud te navigeren.
+  Op een artikelpagina is dat bijvoorbeeld de titel van het artikel, op een zoekpagina is dat het zoekveld.
+- Voor complexe pagina's met meerdere secties kun je meer dan 1 Skip Link gebruiken.
+  In de meeste gevallen is dit niet nodig.
+
+### Dit vermijden
+
+- Skip Links zijn niet nodig op een simpele pagina waar alleen tekst staat en weinig navigatie.
+  Het doel van een Skip Link is om terugkerende navigatieblokken over te slaan.
+  Als die blokken er niet zijn, is een Skip Link niet nodig.
+- Plaats de Skip Link niet in een `nav` regio, of in de Header.
+
+## Relevante WCAG eisen
+
+- Voor dit component gelden dezelfde WCAG eisen als voor [het link component](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).
+- [WCAG 2.4.1](https://www.w3.org/TR/WCAG22/#bypass-blocks): gebruik een Skip Link op elke pagina die begint met een terugkerend navigatieblok.
+- [WCAG 3.2.3](https://www.w3.org/TR/WCAG22/#consistent-navigation): een Skip Link staat op elke pagina op dezelfde plek.
+- [WCAG 3.2.4](https://www.w3.org/TR/WCAG22/#consistent-identification): een Skip Link heeft dezelfde labels op alle pagina's. Bijvoorbeeld niet: "Navigatie overslaan" op een gedeelte van de site, en "Naar de inhoud" op andere pagina's.

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);
+  }
+}

package/src/{highlight → components/spotlight}/README.md

@@ -1,4 +1,4 @@
-# Highlight
+# Spotlight
 
 Benadrukt een sectie op een pagina middels een opvallende achtergrondkleur.
 

package/src/components/spotlight/spotlight.scss

@@ -0,0 +1,36 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-spotlight--blue {
+  background-color: var(--amsterdam-spotlight-blue-background-color);
+}
+
+.amsterdam-spotlight--dark-green {
+  background-color: var(--amsterdam-spotlight-dark-green-background-color);
+}
+
+.amsterdam-spotlight--green {
+  background-color: var(--amsterdam-spotlight-green-background-color);
+}
+
+.amsterdam-spotlight--light-blue {
+  background-color: var(--amsterdam-spotlight-light-blue-background-color);
+}
+
+.amsterdam-spotlight--magenta {
+  background-color: var(--amsterdam-spotlight-magenta-background-color);
+}
+
+.amsterdam-spotlight--orange {
+  background-color: var(--amsterdam-spotlight-orange-background-color);
+}
+
+.amsterdam-spotlight--purple {
+  background-color: var(--amsterdam-spotlight-purple-background-color);
+}
+
+.amsterdam-spotlight--yellow {
+  background-color: var(--amsterdam-spotlight-yellow-background-color);
+}

package/src/components/text-input/README.md

@@ -0,0 +1,12 @@
+# Text Input
+
+Text input is een veld van een formulier waar een gebruiker tekst kan invoeren.
+
+## Richtlijnen
+
+- Gebruik een Text input als gebruikers tekst in moeten voeren die niet langer is dan 1 regel, zoals hun naam of telefoonnummer.
+- Gebruik een Text input niet als gebruikers meer dan 1 zin moeten invullen.
+- De breedte van de Text input moet passend zijn bij de informatie die ingevuld moet worden.
+- Een Text input moet een label hebben, en in de meeste gevallen moet dit label zichtbaar zijn.
+- Gebruik `spellcheck="false"` voor velden die gevoelige informatie kunnen bevatten, zoals wachtwoorden en persoonsgegevens. Sommige browser extensies voor spellingcontrole sturen deze informatie naar externe servers.
+- Pas waar mogelijk automatische hulp toe. Bij ingelogde systemen is bijvoorbeeld invoer vooraf in te vullen om fouten te voorkomen en tijd te besparen.

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

@@ -0,0 +1,57 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-text-input {
+  border: none;
+  box-shadow: var(--amsterdam-text-input-box-shadow);
+  color: var(--amsterdam-text-input-color);
+  font-family: var(--amsterdam-text-input-font-family);
+  font-size: var(--amsterdam-text-input-spacious-font-size);
+  font-weight: var(--amsterdam-text-input-font-weight);
+  line-height: var(--amsterdam-text-input-spacious-line-height);
+  outline-offset: var(--amsterdam-text-input-outline-offset);
+  padding-block: 0.5rem;
+  padding-inline: 1rem;
+  touch-action: manipulation;
+  width: 100%;
+
+  @include reset;
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-text-input-compact-font-size);
+    line-height: var(--amsterdam-text-input-compact-line-height);
+  }
+
+  &:hover {
+    box-shadow: var(--amsterdam-text-input-hover-box-shadow);
+  }
+}
+
+.amsterdam-text-input::placeholder {
+  color: var(--amsterdam-text-input-placeholder-color);
+}
+
+.amsterdam-text-input:disabled {
+  background-color: var(--amsterdam-text-input-disabled-background-color);
+  box-shadow: var(--amsterdam-text-input-disabled-box-shadow);
+  color: var(--amsterdam-text-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.amsterdam-text-input:invalid,
+.amsterdam-text-input[aria-invalid="true"] {
+  box-shadow: var(--amsterdam-text-input-invalid-box-shadow);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--amsterdam-text-input-invalid-hover-box-shadow);
+  }
+}

package/src/{top-task-link → components/top-task-link}/top-task-link.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-top-task-link {
   break-inside: avoid;
   display: flex;
@@ -22,12 +20,16 @@
 .amsterdam-top-task-link__label {
   color: var(--amsterdam-top-task-link-label-color);
   font-family: var(--amsterdam-top-task-link-label-font-family);
-  font-size: var(--amsterdam-top-task-link-label-narrow-font-size);
+  font-size: var(--amsterdam-top-task-link-label-spacious-font-size);
   font-weight: var(--amsterdam-top-task-link-label-font-weight);
   line-height: var(--amsterdam-top-task-link-label-line-height);
+  text-decoration-line: var(--amsterdam-top-task-link-label-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-top-task-link-label-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-top-task-link-label-text-underline-offset);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-top-task-link-label-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-top-task-link-label-compact-font-size);
+    line-height: var(--amsterdam-top-task-link-label-compact-line-height);
   }
 
   @include reset;
@@ -35,20 +37,19 @@
 
 .amsterdam-top-task-link:hover .amsterdam-top-task-link__label {
   color: var(--amsterdam-top-task-link-label-hover-color);
-  text-decoration: underline;
-  text-decoration-thickness: 3px;
-  text-underline-offset: 0.5rem;
+  text-decoration-line: var(--amsterdam-top-task-link-label-hover-text-decoration-line);
 }
 
 .amsterdam-top-task-link__description {
   color: var(--amsterdam-top-task-link-description-color);
   font-family: var(--amsterdam-top-task-link-description-font-family);
-  font-size: var(--amsterdam-top-task-link-description-narrow-font-size);
+  font-size: var(--amsterdam-top-task-link-description-spacious-font-size);
   font-weight: var(--amsterdam-top-task-link-description-font-weight);
-  line-height: var(--amsterdam-top-task-link-description-line-height);
+  line-height: var(--amsterdam-top-task-link-description-spacious-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-top-task-link-description-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-top-task-link-description-compact-font-size);
+    line-height: var(--amsterdam-top-task-link-description-compact-line-height);
   }
 
   @include reset;

package/src/{unordered-list → components/unordered-list}/unordered-list.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 /** Apply border box sizing, reset whitespace and list styles. */
 @mixin reset {
   box-sizing: border-box;
@@ -26,15 +24,11 @@
 .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
   color: var(--amsterdam-unordered-list-color);
   font-family: var(--amsterdam-unordered-list-font-family);
-  font-size: var(--amsterdam-unordered-list-narrow-font-size);
+  font-size: var(--amsterdam-unordered-list-spacious-font-size);
   font-weight: var(--amsterdam-unordered-list-font-weight);
-  line-height: var(--amsterdam-unordered-list-line-height);
+  line-height: var(--amsterdam-unordered-list-spacious-line-height);
   list-style-type: var(--amsterdam-unordered-list-list-style-type);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-unordered-list-wide-font-size);
-  }
-
   /** List items are responsible for indentation and marker positioning. */
   .amsterdam-unordered-list__item {
     margin-inline-start: var(--amsterdam-unordered-list-item-margin-inline-start);
@@ -51,3 +45,8 @@
     padding-inline-start: var(--amsterdam-unordered-list-unordered-list-item-padding-inline-start);
   }
 }
+
+.amsterdam-theme--compact .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
+  font-size: var(--amsterdam-unordered-list-compact-font-size);
+  line-height: var(--amsterdam-unordered-list-compact-line-height);
+}

package/src/{visually-hidden → components/visually-hidden}/visually-hidden.scss

@@ -3,15 +3,13 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-.amsterdam-visually-hidden {
-  clip: rect(1px, 1px, 1px, 1px);
+// Source: https://css-tricks.com/inclusively-hidden/
+.amsterdam-visually-hidden:not(:active, :focus) {
+  clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
-  margin-block: -1px;
-  margin-inline: -1px;
   overflow: hidden;
-  padding-block: 0;
-  padding-inline: 0;
   position: absolute;
+  white-space: nowrap;
   width: 1px;
 }

package/dist/grid/grid-cell.css

@@ -1 +0,0 @@
-.amsterdam-grid-cell--full-width{grid-column:1/-1}.amsterdam-grid-cell--span-1{grid-column-end:span 1}.amsterdam-grid-cell--start-1{grid-column-start:1}.amsterdam-grid-cell--span-2{grid-column-end:span 2}.amsterdam-grid-cell--start-2{grid-column-start:2}.amsterdam-grid-cell--span-3{grid-column-end:span 3}.amsterdam-grid-cell--start-3{grid-column-start:3}.amsterdam-grid-cell--span-4{grid-column-end:span 4}.amsterdam-grid-cell--start-4{grid-column-start:4}.amsterdam-grid-cell--span-5{grid-column-end:span 5}.amsterdam-grid-cell--start-5{grid-column-start:5}.amsterdam-grid-cell--span-6{grid-column-end:span 6}.amsterdam-grid-cell--start-6{grid-column-start:6}.amsterdam-grid-cell--span-7{grid-column-end:span 7}.amsterdam-grid-cell--start-7{grid-column-start:7}.amsterdam-grid-cell--span-8{grid-column-end:span 8}.amsterdam-grid-cell--start-8{grid-column-start:8}.amsterdam-grid-cell--span-9{grid-column-end:span 9}.amsterdam-grid-cell--start-9{grid-column-start:9}.amsterdam-grid-cell--span-10{grid-column-end:span 10}.amsterdam-grid-cell--start-10{grid-column-start:10}.amsterdam-grid-cell--span-11{grid-column-end:span 11}.amsterdam-grid-cell--start-11{grid-column-start:11}.amsterdam-grid-cell--span-12{grid-column-end:span 12}.amsterdam-grid-cell--start-12{grid-column-start:12}@media screen and (min-width: 36rem){.amsterdam-grid-cell--span-1-medium{grid-column-end:span 1}.amsterdam-grid-cell--start-1-medium{grid-column-start:1}.amsterdam-grid-cell--span-2-medium{grid-column-end:span 2}.amsterdam-grid-cell--start-2-medium{grid-column-start:2}.amsterdam-grid-cell--span-3-medium{grid-column-end:span 3}.amsterdam-grid-cell--start-3-medium{grid-column-start:3}.amsterdam-grid-cell--span-4-medium{grid-column-end:span 4}.amsterdam-grid-cell--start-4-medium{grid-column-start:4}.amsterdam-grid-cell--span-5-medium{grid-column-end:span 5}.amsterdam-grid-cell--start-5-medium{grid-column-start:5}.amsterdam-grid-cell--span-6-medium{grid-column-end:span 6}.amsterdam-grid-cell--start-6-medium{grid-column-start:6}.amsterdam-grid-cell--span-7-medium{grid-column-end:span 7}.amsterdam-grid-cell--start-7-medium{grid-column-start:7}.amsterdam-grid-cell--span-8-medium{grid-column-end:span 8}.amsterdam-grid-cell--start-8-medium{grid-column-start:8}.amsterdam-grid-cell--span-9-medium{grid-column-end:span 9}.amsterdam-grid-cell--start-9-medium{grid-column-start:9}.amsterdam-grid-cell--span-10-medium{grid-column-end:span 10}.amsterdam-grid-cell--start-10-medium{grid-column-start:10}.amsterdam-grid-cell--span-11-medium{grid-column-end:span 11}.amsterdam-grid-cell--start-11-medium{grid-column-start:11}.amsterdam-grid-cell--span-12-medium{grid-column-end:span 12}.amsterdam-grid-cell--start-12-medium{grid-column-start:12}}@media screen and (min-width: 68rem){.amsterdam-grid-cell--span-1-wide{grid-column-end:span 1}.amsterdam-grid-cell--start-1-wide{grid-column-start:1}.amsterdam-grid-cell--span-2-wide{grid-column-end:span 2}.amsterdam-grid-cell--start-2-wide{grid-column-start:2}.amsterdam-grid-cell--span-3-wide{grid-column-end:span 3}.amsterdam-grid-cell--start-3-wide{grid-column-start:3}.amsterdam-grid-cell--span-4-wide{grid-column-end:span 4}.amsterdam-grid-cell--start-4-wide{grid-column-start:4}.amsterdam-grid-cell--span-5-wide{grid-column-end:span 5}.amsterdam-grid-cell--start-5-wide{grid-column-start:5}.amsterdam-grid-cell--span-6-wide{grid-column-end:span 6}.amsterdam-grid-cell--start-6-wide{grid-column-start:6}.amsterdam-grid-cell--span-7-wide{grid-column-end:span 7}.amsterdam-grid-cell--start-7-wide{grid-column-start:7}.amsterdam-grid-cell--span-8-wide{grid-column-end:span 8}.amsterdam-grid-cell--start-8-wide{grid-column-start:8}.amsterdam-grid-cell--span-9-wide{grid-column-end:span 9}.amsterdam-grid-cell--start-9-wide{grid-column-start:9}.amsterdam-grid-cell--span-10-wide{grid-column-end:span 10}.amsterdam-grid-cell--start-10-wide{grid-column-start:10}.amsterdam-grid-cell--span-11-wide{grid-column-end:span 11}.amsterdam-grid-cell--start-11-wide{grid-column-start:11}.amsterdam-grid-cell--span-12-wide{grid-column-end:span 12}.amsterdam-grid-cell--start-12-wide{grid-column-start:12}}/*# sourceMappingURL=grid-cell.css.map */

package/dist/grid/grid-cell.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/grid/grid-cell.scss"],"names":[],"mappings":"AAOA,iCACE,iBAMA,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,8BACE,wBAGF,+BACE,kBANS,GACX,8BACE,wBAGF,+BACE,kBANS,GACX,8BACE,wBAGF,+BACE,kBANS,GAUb,qCAEI,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,qCACE,wBAGF,sCACE,kBANS,GACX,qCACE,wBAGF,sCACE,kBANS,GACX,qCACE,wBAGF,sCACE,kBANS,IAWf,qCAEI,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,mCACE,wBAGF,oCACE,kBANS,GACX,mCACE,wBAGF,oCACE,kBANS,GACX,mCACE,wBAGF,oCACE,kBANS","file":"grid-cell.css"}

package/dist/highlight/highlight.css

@@ -1 +0,0 @@
-.amsterdam-highlight--blue{background-color:var(--amsterdam-highlight-blue-background-color)}.amsterdam-highlight--dark-green{background-color:var(--amsterdam-highlight-dark-green-background-color)}.amsterdam-highlight--green{background-color:var(--amsterdam-highlight-green-background-color)}.amsterdam-highlight--light-blue{background-color:var(--amsterdam-highlight-light-blue-background-color)}.amsterdam-highlight--magenta{background-color:var(--amsterdam-highlight-magenta-background-color)}.amsterdam-highlight--orange{background-color:var(--amsterdam-highlight-orange-background-color)}.amsterdam-highlight--purple{background-color:var(--amsterdam-highlight-purple-background-color)}.amsterdam-highlight--yellow{background-color:var(--amsterdam-highlight-yellow-background-color)}/*# sourceMappingURL=highlight.css.map */

package/dist/highlight/highlight.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/highlight/highlight.scss"],"names":[],"mappings":"AAKA,2BACE,kEAGF,iCACE,wEAGF,4BACE,mEAGF,iCACE,wEAGF,8BACE,qEAGF,6BACE,oEAGF,6BACE,oEAGF,6BACE","file":"highlight.css"}

package/src/breadcrumb/breadcrumb.scss

@@ -1,68 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-@import "../../utils/breakpoint";
-
-@mixin reset {
-  box-sizing: border-box;
-  margin-block: 0;
-  padding-inline: 0;
-  -webkit-text-size-adjust: 100%;
-}
-
-.amsterdam-breadcrumb {
-  font-family: var(--amsterdam-breadcrumb-font-family, inherit);
-  font-size: var(--amsterdam-breadcrumb-narrow-font-size);
-  font-weight: var(--amsterdam-breadcrumb-font-weight);
-  line-height: var(--amsterdam-breadcrumb-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-breadcrumb-wide-font-size);
-  }
-}
-
-.amsterdam-breadcrumb__list {
-  break-after: avoid;
-  break-inside: avoid;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  list-style: none;
-
-  @include reset;
-}
-
-.amsterdam-breadcrumb-item {
-  align-items: center;
-  display: flex;
-}
-
-.amsterdam-breadcrumb-item:not(:last-child)::after {
-  background-color: var(--amsterdam-breadcrumb-color);
-  clip-path: path("M 4.725,16 3.275,14.545 9.815,8 3.275,1.455 4.725,0 l 8,8 z");
-  content: "";
-  display: inline-block;
-  height: 16px;
-  margin-inline-start: 1rem;
-  width: 16px;
-}
-
-.amsterdam-breadcrumb-item__link {
-  color: var(--amsterdam-breadcrumb-color);
-  cursor: pointer;
-  outline-offset: var(--amsterdam-breadcrumb-item-link-outline-offset);
-  text-decoration: none;
-
-  &::first-letter {
-    text-transform: capitalize;
-  }
-
-  &:hover {
-    color: var(--amsterdam-breadcrumb-item-link-hover-color);
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 3px;
-  }
-}

package/src/card/README.md

@@ -1,12 +0,0 @@
-# Card
-
-Gebruik een card op een overzichtspagina om te verwijzen naar een detailpagina, zoals een nieuwsbericht, een vacature of een zoekresultaat. De card bevat meestal de titel, introductie en afbeelding van de content. De link is verplicht.
-
-## Schermlezers
-
-Met een schermlezer kun je onder andere navigeren via headings en links in een document. De titel van een card is een link in een heading, zodat je van beide navigatiemanieren gebruik kunt maken. Een schermlezer leest eerst de titel op, daarna de rest van de inhoud.
-
-## Richtlijnen
-
-- De titel van een card is een link in een heading. Hier gelden dezelfde richtlijnen voor als voor reguliere [links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs) en [headings](https://amsterdam.github.io/design-system/?path=/docs/react_text-heading--docs).
-- Een card heeft meer inhoud nodig dan alleen een titel. Vul dit aan met tekstuele en/of visuele inhoud. Als dit lastig is, kijk dan of een [top task link](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-top-task-link--docs) of [reguliere link](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs) beter past.

package/src/grid/README.grid-cell.md

@@ -1,14 +0,0 @@
-# Grid cell
-
-Beslaat een aantal kolommen in een [Grid](?path=/docs/react_layout-grid--docs).
-
-## Gebruik
-
-Verdeel hiermee een grid in cellen.
-Geef aan hoeveel kolommen van het grid de cel beslaat.
-Dat aantal kan variëren voor smalle, middelbrede of brede schermen.
-In elke cel plaats je vervolgens de gewenste inhoud.
-
-## Ontwerp
-
-De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

package/src/grid/README.grid.md

@@ -1,17 +0,0 @@
-# Grid
-
-Levert een tweedimensionaal raster waarop alle elementen van een pagina uitgelijnd worden.
-
-## Gebruik
-
-Elke pagina moet het grid gebruiken als basis voor de layout, dus direct binnen [Screen](?path=/docs/layout-screen--docs).
-
-Een [Footer](?path=/docs/react_containers-footer--docs) en een [Highlight](?path=/docs/react_containers-highlight--docs) zijn iets breder dan het grid.
-Daarom wordt in HTML vóór deze componenten een instantie van Grid afgesloten en erbinnen een nieuwe geopend.
-
-Meerdere instanties van dit component zijn dus mogelijk op een pagina.
-Visueel moeten ze wel allemaal op elkaar aansluiten.
-
-## Ontwerp
-
-De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

package/src/grid/grid-cell.scss

@@ -1,46 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-@import "../../utils/breakpoint";
-
-.amsterdam-grid-cell--full-width {
-  grid-column: 1 / -1;
-}
-
-// The order of the following declaration blocks ensures the intended specificity.
-
-@for $i from 1 through 12 {
-  .amsterdam-grid-cell--span-#{$i} {
-    grid-column-end: span $i;
-  }
-
-  .amsterdam-grid-cell--start-#{$i} {
-    grid-column-start: $i;
-  }
-}
-
-@media screen and (min-width: $amsterdam-breakpoint-medium) {
-  @for $i from 1 through 12 {
-    .amsterdam-grid-cell--span-#{$i}-medium {
-      grid-column-end: span $i;
-    }
-
-    .amsterdam-grid-cell--start-#{$i}-medium {
-      grid-column-start: $i;
-    }
-  }
-}
-
-@media screen and (min-width: $amsterdam-breakpoint-wide) {
-  @for $i from 1 through 12 {
-    .amsterdam-grid-cell--span-#{$i}-wide {
-      grid-column-end: span $i;
-    }
-
-    .amsterdam-grid-cell--start-#{$i}-wide {
-      grid-column-start: $i;
-    }
-  }
-}