@amsterdam/design-system-css 0.1.4 → 0.1.6

package/src/link/link.scss

@@ -6,45 +6,50 @@
 @import "../../utils/breakpoint";
 
 .amsterdam-link {
-  color: var(--amsterdam-link-color, blue);
-  font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-link-font-size-narrow);
-  line-height: var(--amsterdam-link-line-height);
+  color: var(--amsterdam-link-color);
+  font-family: var(--amsterdam-link-font-family);
+  font-weight: var(--amsterdam-link-font-weight);
   outline-offset: var(--amsterdam-link-outline-offset);
-  text-decoration: var(--amsterdam-link-text-decoration, underline);
-  text-decoration-color: var(--amsterdam-link-text-decoration-color, currentColor);
-  text-decoration-thickness: var(--amsterdam-link-text-decoration-thickness, 1px);
-  text-underline-offset: var(--amsterdam-link-text-underline-offset);
 
   &:hover,
-  &:active {
-    color: var(--amsterdam-link-hover-color);
-    text-decoration: var(--amsterdam-link-hover-text-decoration);
-    text-decoration-thickness: var(--amsterdam-link-hover-text-decoration-thickness, 1px);
-  }
-
+  &:active,
   &:focus {
     color: var(--amsterdam-link-focus-color);
-    text-decoration: var(--amsterdam-link-focus-text-decoration);
   }
+}
 
-  &:visited {
-    color: var(--amsterdam-link-visited-color);
+.amsterdam-link--standalone {
+  display: inline-block;
+  font-size: var(--amsterdam-link-standalone-narrow-font-size);
+  line-height: var(--amsterdam-link-standalone-line-height);
+  text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset);
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration-thickness: var(--amsterdam-link-standalone-focus-text-decoration-thickness);
+    text-underline-offset: var(--amsterdam-link-standalone-focus-text-underline-offset);
   }
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-link-font-size-wide);
+    font-size: var(--amsterdam-link-standalone-wide-font-size);
   }
 }
 
-.amsterdam-link--standalone-bold {
-  font-weight: var(--amsterdam-link-standalone-bold-font-weight);
-}
-
 .amsterdam-link--inline {
   font-family: var(--amsterdam-link-inline-font-family);
   font-size: var(--amsterdam-link-inline-font-size);
-  text-underline-offset: var(--amsterdam-link-inline-text-underline-offset);
+  line-height: var(--amsterdam-link-inline-line-height);
+  text-decoration: var(--amsterdam-link-inline-text-decoration);
+  text-decoration-thickness: var(--amsterdam-link-text-decoration-thickness);
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: var(--amsterdam-link-inline-focus-text-decoration);
+    text-underline-offset: var(--amsterdam-link-inline-focus-text-underline-offset);
+  }
 
   &:visited {
     color: var(--amsterdam-link-inline-visited-color);
@@ -54,30 +59,39 @@
 .amsterdam-link--in-list {
   align-items: flex-start;
   display: inline-flex;
-  font-size: var(--amsterdam-link-in-list-font-size-narrow);
+  font-size: var(--amsterdam-link-in-list-narrow-font-size);
   gap: var(--amsterdam-link-in-list-gap);
   line-height: var(--amsterdam-link-in-list-line-height);
-  text-underline-offset: var(--amsterdam-link-in-list-text-underline-offset);
+  text-decoration: var(--amsterdam-link-in-list-text-decoration);
 
-  // Override for icon size
-  span.amsterdam-icon svg {
-    height: 16px;
-    width: 16px;
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: var(--amsterdam-link-in-list-focus-text-decoration);
+    text-decoration-thickness: var(--amsterdam-link-in-list-focus-text-decoration-thickness);
+    text-underline-offset: var(--amsterdam-link-in-list-focus-text-underline-offset);
   }
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-link-in-list-font-size-wide);
+    font-size: var(--amsterdam-link-in-list-wide-font-size);
+  }
+}
+
+// Override for icon size
+.amsterdam-link--in-list__chevron {
+  span.amsterdam-icon svg {
+    height: 16px;
+    width: 16px;
   }
 }
 
 .amsterdam-link--on-background-dark {
   color: var(--amsterdam-link-on-background-dark-color);
-  text-decoration: var(--amsterdam-link-on-background-dark-text-decoration);
 
   &:hover,
-  &:active {
+  &:active,
+  &:focus {
     color: var(--amsterdam-link-on-background-dark-hover-color);
-    text-decoration: var(--amsterdam-link-on-background-dark-hover-text-decoration);
   }
 
   &:visited {
@@ -87,15 +101,26 @@
 
 .amsterdam-link--on-background-light {
   color: var(--amsterdam-link-on-background-light-color);
-  text-decoration: var(--amsterdam-link-on-background-light-text-decoration);
 
   &:hover,
-  &:active {
+  &:active,
+  &:focus {
     color: var(--amsterdam-link-on-background-light-hover-color);
-    text-decoration: var(--amsterdam-link-on-background-light-hover-text-decoration);
   }
 
   &:visited {
     color: var(--amsterdam-link-on-background-light-visited-color);
   }
 }
+
+.amsterdam-link--inline.amsterdam-link--on-background-dark,
+.amsterdam-link--inline.amsterdam-link--on-background-light {
+  text-decoration: var(--amsterdam-link-inline-focus-text-decoration);
+  text-underline-offset: var(--amsterdam-link-inline-focus-text-underline-offset);
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: var(--amsterdam-link-inline-text-decoration);
+  }
+}

package/src/ordered-list/README.md

@@ -0,0 +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.

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

@@ -0,0 +1,53 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+/** Apply border box sizing, reset whitespace and list styles. */
+@mixin reset {
+  box-sizing: border-box;
+  list-style-type: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+/** A list is a grid column with a gap between items. */
+.amsterdam-ordered-list {
+  @include reset;
+
+  display: grid;
+  gap: var(--amsterdam-ordered-list-gap);
+}
+
+/** A list with markers sets typography for its text content. */
+.amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) {
+  color: var(--amsterdam-ordered-list-color);
+  font-family: var(--amsterdam-ordered-list-font-family);
+  font-size: var(--amsterdam-ordered-list-narrow-font-size);
+  font-weight: var(--amsterdam-ordered-list-font-weight);
+  line-height: var(--amsterdam-ordered-list-line-height);
+  list-style-type: var(--amsterdam-ordered-list-list-style-type);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-ordered-list-wide-font-size);
+  }
+
+  /** List items are responsible for indentation and marker positioning. */
+  .amsterdam-ordered-list__item {
+    margin-inline-start: var(--amsterdam-ordered-list-item-margin-inline-start);
+    padding-inline-start: var(--amsterdam-ordered-list-item-padding-inline-start);
+  }
+}
+
+/** A nested list has a different marker and less indentation for correct alignment. */
+:is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-ordered-list {
+  list-style-type: var(--amsterdam-ordered-list-ordered-list-list-style-type);
+
+  .amsterdam-ordered-list__item {
+    margin-inline-start: var(--amsterdam-ordered-list-ordered-list-item-margin-inline-start);
+    padding-inline-start: var(--amsterdam-ordered-list-ordered-list-item-padding-inline-start);
+  }
+}

package/src/page-heading/README.md

@@ -0,0 +1,16 @@
+# 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.
+
+## Richtlijnen
+
+- 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.
+
+## Relevante WCAG eisen
+
+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.
+
+Voor dit component gelden dezelfde WCAG eisen als voor [het heading component](https://amsterdam.github.io/design-system/?path=/docs/react_text-heading--docs).

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

@@ -0,0 +1,31 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+}
+
+.amsterdam-page-heading {
+  break-after: avoid;
+  break-inside: avoid;
+  color: var(--amsterdam-page-heading-color);
+  font-family: var(--amsterdam-page-heading-font-family);
+  font-size: var(--amsterdam-page-heading-narrow-font-size);
+  font-weight: var(--amsterdam-page-heading-font-weight);
+  line-height: var(--amsterdam-page-heading-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-page-heading-wide-font-size);
+  }
+
+  @include reset;
+}
+
+.amsterdam-page-heading--inverse-color {
+  color: var(--amsterdam-page-heading-inverse-color);
+}

package/src/page-menu/README.md

@@ -0,0 +1,15 @@
+# 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.
+
+## Richtlijnen
+
+- 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.
+
+## Relevante WCAG eisen
+
+- [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html)

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

@@ -0,0 +1,79 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+@mixin reset-list {
+  box-sizing: border-box;
+  margin-block: 0;
+  padding-inline: 0;
+}
+
+@mixin reset-item {
+  box-sizing: border-box;
+  -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);
+
+  @include reset-list;
+}
+
+@mixin page-menu-item {
+  color: var(--amsterdam-page-menu-item-color);
+  display: inline-flex;
+  flex-direction: row;
+  font-family: var(--amsterdam-page-menu-item-font-family);
+  font-size: var(--amsterdam-page-menu-item-narrow-font-size);
+  font-weight: var(--amsterdam-page-menu-item-narrow-font-weight);
+  gap: var(--amsterdam-page-menu-item-gap);
+  line-height: var(--amsterdam-page-menu-item-line-height);
+  outline-offset: var(--amsterdam-focus-outline-offset);
+  text-align: center;
+  text-decoration: var(--amsterdam-page-menu-item-text-decoration);
+  touch-action: manipulation;
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-page-menu-item-wide-font-size);
+  }
+}
+
+.amsterdam-page-menu__link {
+  @include page-menu-item;
+  @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: var(--amsterdam-page-menu-item-hover-text-decoration);
+}
+
+.amsterdam-page-menu__link svg,
+.amsterdam-page-menu__button svg {
+  color: currentColor;
+}

package/src/paragraph/paragraph.scss

@@ -14,31 +14,35 @@
 .amsterdam-paragraph {
   color: var(--amsterdam-paragraph-color);
   font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-paragraph-font-size-narrow);
+  font-size: var(--amsterdam-paragraph-narrow-font-size);
   font-weight: var(--amsterdam-paragraph-font-weight);
   line-height: var(--amsterdam-paragraph-line-height);
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-paragraph-font-size-wide);
+    font-size: var(--amsterdam-paragraph-wide-font-size);
   }
 
   @include reset;
 }
 
-.amsterdam-paragraph-small {
-  font-size: var(--amsterdam-paragraph-small-font-size-narrow);
+.amsterdam-paragraph--small {
+  font-size: var(--amsterdam-paragraph-small-narrow-font-size);
   line-height: var(--amsterdam-paragraph-small-line-height);
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-paragraph-small-font-size-wide);
+    font-size: var(--amsterdam-paragraph-small-wide-font-size);
   }
 }
 
-.amsterdam-paragraph-large {
-  font-size: var(--amsterdam-paragraph-large-font-size-narrow);
+.amsterdam-paragraph--large {
+  font-size: var(--amsterdam-paragraph-large-narrow-font-size);
   line-height: var(--amsterdam-paragraph-large-line-height);
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-paragraph-large-font-size-wide);
+    font-size: var(--amsterdam-paragraph-large-wide-font-size);
   }
 }
+
+.amsterdam-paragraph--inverse-color {
+  color: var(--amsterdam-paragraph-inverse-color);
+}

package/src/top-task-link/README.md

@@ -0,0 +1,15 @@
+# Top task link
+
+De toptask link is een navigatie-element dat opvallender is dan een link, om de aandacht te trekken voor de meest belangrijke informatie.
+Zet de toptask link in zodat de gebruiker snel de juiste informatie vindt én een bijbehorende taak makkelijk kan uitvoeren.
+
+## Richtlijnen
+
+- Een toptask link moet een titel hebben. Hou deze titel zo kort mogelijk, hij mag maximaal over 2 regels lopen.
+- Een toptask link kan een omschrijving hebben, maar dat is niet verplicht. De omschrijving staat onder de titel en is ook maximaal 2 regels.
+- Plaats op brede schermen 3 of 4 toptask links naast elkaar. Als je meer toptask links hebt, zet ze dan op de volgende rij.
+- Probeer het aantal links op brede schermen te verdelen over rijen van 3 of 4. Als dit niet lukt, laat de laatste 'vakken' dan leeg. Hou een grid indeling aan.
+
+## Relevante WCAG eisen
+
+Voor de toptask link gelden dezelfde eisen als voor [reguliere links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).

package/src/top-task-link/top-task-link.scss

@@ -0,0 +1,55 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-top-task-link {
+  break-inside: avoid;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  outline-offset: var(--amsterdam-top-task-link-outline-offset);
+  text-decoration: none;
+}
+
+@mixin reset {
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+}
+
+.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-weight: var(--amsterdam-top-task-link-label-font-weight);
+  line-height: var(--amsterdam-top-task-link-label-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-top-task-link-label-wide-font-size);
+  }
+
+  @include reset;
+}
+
+.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;
+}
+
+.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-weight: var(--amsterdam-top-task-link-description-font-weight);
+  line-height: var(--amsterdam-top-task-link-description-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-top-task-link-description-wide-font-size);
+  }
+
+  @include reset;
+}

package/src/unordered-list/README.md

@@ -1,15 +1,7 @@
-# Unordered List
-
-## Introductie
+# Unordered list
 
 Een lijst is een verticale groep gerelateerde inhoud.
-
-## Specificaties
-
-Deze lijst kan 2 niveaus hebben. Het eerste niveau bestaat uit vierkantjes. Het tweede niveau bestaat uit halve kastlijntjes. Tekst in de lijstitems springt een vaste afstand in.
-
-## Terminologie
-
-- **unordered list**: uitgeschreven versie van de HTML afkorting `<ul>`
-- **list item**: uitgeschreven van van [HTML `<li>`](https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element). Ook [in ARIA is het `role="listitem"`](https://www.w3.org/TR/wai-aria-1.2/#listitem)
-- **marker**: zoals in de [CSS pseudo-selector `::marker`](https://drafts.csswg.org/css-pseudo-4/#marker-pseudo)
+Deze lijst kan 2 niveaus hebben.
+Het eerste niveau bestaat uit vierkantjes.
+Het tweede niveau bestaat uit halve kastlijntjes.
+Tekst in de lijstitems springt een vaste afstand in.

package/src/unordered-list/unordered-list.scss

@@ -5,40 +5,49 @@
 
 @import "../../utils/breakpoint";
 
+/** Apply border box sizing, reset whitespace and list styles. */
 @mixin reset {
   box-sizing: border-box;
+  list-style: none;
   margin-block: 0;
+  padding-inline-start: 0;
   -webkit-text-size-adjust: 100%;
 }
 
+/** A list is a grid column with a gap between items. */
 .amsterdam-unordered-list {
+  @include reset;
+
+  display: grid;
+  gap: var(--amsterdam-unordered-list-gap);
+}
+
+/** A list with markers sets typography for its text content. */
+.amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
   color: var(--amsterdam-unordered-list-color);
-  display: flex;
-  flex-direction: column;
   font-family: var(--amsterdam-unordered-list-font-family);
-  font-size: var(--amsterdam-unordered-list-font-size-narrow);
+  font-size: var(--amsterdam-unordered-list-narrow-font-size);
   font-weight: var(--amsterdam-unordered-list-font-weight);
-  gap: var(--amsterdam-unordered-list-gap);
   line-height: var(--amsterdam-unordered-list-line-height);
-  list-style: var(--amsterdam-unordered-list-list-style);
+  list-style-type: var(--amsterdam-unordered-list-list-style-type);
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-unordered-list-font-size-wide);
+    font-size: var(--amsterdam-unordered-list-wide-font-size);
   }
 
-  @include reset;
-}
-
-.amsterdam-unordered-list__item {
-  padding-inline: var(--amsterdam-unordered-list-item-padding-inline);
+  /** List items are responsible for indentation and marker positioning. */
+  .amsterdam-unordered-list__item {
+    margin-inline-start: var(--amsterdam-unordered-list-item-margin-inline-start);
+    padding-inline-start: var(--amsterdam-unordered-list-item-padding-inline-start);
+  }
 }
 
-.amsterdam-unordered-list .amsterdam-unordered-list {
+/** A nested list has a different marker and less indentation for correct alignment. */
+:is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-unordered-list {
   list-style-type: var(--amsterdam-unordered-list-unordered-list-list-style-type);
-  padding-block: var(--amsterdam-unordered-list-unordered-list-padding-block);
-  padding-inline: var(--amsterdam-unordered-list-unordered-list-padding-inline);
-}
 
-.amsterdam-unordered-list .amsterdam-unordered-list .amsterdam-unordered-list__item {
-  padding-inline: var(--amsterdam-unordered-list-unordered-list-item-padding-inline);
+  .amsterdam-unordered-list__item {
+    margin-inline-start: var(--amsterdam-unordered-list-unordered-list-item-margin-inline-start);
+    padding-inline-start: var(--amsterdam-unordered-list-unordered-list-item-padding-inline-start);
+  }
 }

package/src/visually-hidden/README.md

@@ -0,0 +1,5 @@
+# Visually hidden
+
+Het visually hidden component kan gebruikt worden om inhoud te verbergen voor ziende gebruikers, maar beschikbaar te houden voor niet-visuele _user agents_, zoals schermlezers.
+
+Let op: In de overgrote meerderheid van de gevallen moet inhoud die visueel beschikbaar is, ook beschikbaar zijn voor niet-visuele _user agents_, en omgekeerd. Uitgebreide aanwijzingen of instructies die alleen door niet-visuele _user agents_ worden gelezen, doen al snel meer kwaad dan goed.

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

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-visually-hidden {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin-block: -1px;
+  margin-inline: -1px;
+  overflow: hidden;
+  padding-block: 0;
+  padding-inline: 0;
+  position: absolute;
+  width: 1px;
+}

package/dist/list/list.css

@@ -1,12 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-.amsterdam-list {
-  list-style: none;
-  margin-block: 0;
-  padding-inline: 0;
-  box-sizing: border-box;
-}
-
-/*# sourceMappingURL=list.css.map */

package/dist/list/list.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/list/list.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AASA;EACE;EACA;EACA;EANA","file":"list.css"}

package/src/list/list.scss

@@ -1,16 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-@mixin reset {
-  box-sizing: border-box;
-}
-
-.amsterdam-list {
-  list-style: none;
-  margin-block: 0;
-  padding-inline: 0;
-
-  @include reset;
-}