@amsterdam/design-system-css 0.1.4 → 0.1.6

package/dist/text/ordered-list/ordered-list.css

@@ -0,0 +1,54 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/*
+  The breakpoint is 854px / 16 = 53.375rems
+  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+*/
+/** Apply border box sizing, reset whitespace and list styles. */
+/** A list is a grid column with a gap between items. */
+.amsterdam-ordered-list {
+  box-sizing: border-box;
+  list-style-type: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+  -webkit-text-size-adjust: 100%;
+  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);
+  /** List items are responsible for indentation and marker positioning. */
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) {
+    font-size: var(--amsterdam-ordered-list-wide-font-size);
+  }
+}
+.amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) .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);
+}
+:is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-ordered-list .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);
+}
+
+/*# sourceMappingURL=ordered-list.css.map */

package/dist/text/ordered-list/ordered-list.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/text/ordered-list/ordered-list.scss","../../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;AASA;AACA;EARE;EACA;EACA;EACA;EACA;EAOA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;AAMA;;AAJA;EARF;IASI;;;AAIF;EACE;EACA;;;AAIJ;AACA;EACE;;AAEA;EACE;EACA","file":"ordered-list.css"}

package/dist/text/page-heading/page-heading.css

@@ -0,0 +1,34 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/*
+  The breakpoint is 854px / 16 = 53.375rems
+  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+*/
+.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);
+  box-sizing: border-box;
+  margin-block: 0;
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-page-heading {
+    font-size: var(--amsterdam-page-heading-wide-font-size);
+  }
+}
+
+.amsterdam-page-heading--inverse-color {
+  color: var(--amsterdam-page-heading-inverse-color);
+}
+
+/*# sourceMappingURL=page-heading.css.map */

package/dist/text/page-heading/page-heading.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/text/page-heading/page-heading.scss","../../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADOA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAXA;EACA;;AAYA;EATF;IAUI;;;;AAMJ;EACE","file":"page-heading.css"}

package/dist/text/paragraph/paragraph.css

@@ -0,0 +1,53 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/*
+  The breakpoint is 854px / 16 = 53.375rems
+  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+*/
+.amsterdam-paragraph {
+  color: var(--amsterdam-paragraph-color);
+  font-family: var(--amsterdam-paragraph-font-family);
+  font-size: var(--amsterdam-paragraph-narrow-font-size);
+  font-weight: var(--amsterdam-paragraph-font-weight);
+  line-height: var(--amsterdam-paragraph-line-height);
+  box-sizing: border-box;
+  margin-block: 0;
+  -webkit-text-size-adjust: 100%;
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-paragraph {
+    font-size: var(--amsterdam-paragraph-wide-font-size);
+  }
+}
+
+.amsterdam-paragraph--small {
+  font-size: var(--amsterdam-paragraph-small-narrow-font-size);
+  line-height: var(--amsterdam-paragraph-small-line-height);
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-paragraph--small {
+    font-size: var(--amsterdam-paragraph-small-wide-font-size);
+  }
+}
+
+.amsterdam-paragraph--large {
+  font-size: var(--amsterdam-paragraph-large-narrow-font-size);
+  line-height: var(--amsterdam-paragraph-large-line-height);
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-paragraph--large {
+    font-size: var(--amsterdam-paragraph-large-wide-font-size);
+  }
+}
+
+.amsterdam-paragraph--inverse-color {
+  color: var(--amsterdam-paragraph-inverse-color);
+}
+
+/*# sourceMappingURL=paragraph.css.map */

package/dist/text/paragraph/paragraph.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/text/paragraph/paragraph.scss","../../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADQA;EACE;EACA;EACA;EACA;EACA;EAVA;EACA;EACA;;AAUA;EAPF;IAQI;;;;AAMJ;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAIJ;EACE","file":"paragraph.css"}

package/dist/text/unordered-list/unordered-list.css

@@ -0,0 +1,54 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/*
+  The breakpoint is 854px / 16 = 53.375rems
+  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+*/
+/** Apply border box sizing, reset whitespace and list styles. */
+/** A list is a grid column with a gap between items. */
+.amsterdam-unordered-list {
+  box-sizing: border-box;
+  list-style: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+  -webkit-text-size-adjust: 100%;
+  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);
+  font-family: var(--amsterdam-unordered-list-font-family);
+  font-size: var(--amsterdam-unordered-list-narrow-font-size);
+  font-weight: var(--amsterdam-unordered-list-font-weight);
+  line-height: var(--amsterdam-unordered-list-line-height);
+  list-style-type: var(--amsterdam-unordered-list-list-style-type);
+  /** List items are responsible for indentation and marker positioning. */
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
+    font-size: var(--amsterdam-unordered-list-wide-font-size);
+  }
+}
+.amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) .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);
+}
+
+/** 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);
+}
+:is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-unordered-list .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);
+}
+
+/*# sourceMappingURL=unordered-list.css.map */

package/dist/text/unordered-list/unordered-list.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/text/unordered-list/unordered-list.scss","../../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;AASA;AACA;EARE;EACA;EACA;EACA;EACA;EAOA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;AAMA;;AAJA;EARF;IASI;;;AAIF;EACE;EACA;;;AAIJ;AACA;EACE;;AAEA;EACE;EACA","file":"unordered-list.css"}

package/dist/top-task-link/top-task-link.css

@@ -0,0 +1 @@
+.amsterdam-top-task-link{break-inside:avoid;display:flex;flex-direction:column;gap:.5rem;outline-offset:var(--amsterdam-top-task-link-outline-offset);text-decoration:none}.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);box-sizing:border-box;-webkit-text-size-adjust:100%}@media screen and (width > 53.375rem){.amsterdam-top-task-link__label{font-size:var(--amsterdam-top-task-link-label-wide-font-size)}}.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:.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);box-sizing:border-box;-webkit-text-size-adjust:100%}@media screen and (width > 53.375rem){.amsterdam-top-task-link__description{font-size:var(--amsterdam-top-task-link-description-wide-font-size)}}/*# sourceMappingURL=top-task-link.css.map */

package/dist/top-task-link/top-task-link.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/top-task-link/top-task-link.scss"],"names":[],"mappings":"AAOA,yBACE,mBACA,aACA,sBACA,UACA,6DACA,qBAQF,gCACE,iDACA,6DACA,gEACA,6DACA,6DATA,sBACA,8BAUA,sCAPF,gCAQI,+DAMJ,+DACE,uDACA,0BACA,8BACA,4BAGF,sCACE,uDACA,mEACA,sEACA,mEACA,mEA9BA,sBACA,8BA+BA,sCAPF,sCAQI","file":"top-task-link.css"}

package/dist/unordered-list/unordered-list.css

@@ -1,47 +1 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-/*
-  The breakpoint is 854px / 16 = 53.375rems
-  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
-*/
-.amsterdam-unordered-list {
-  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-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);
-  box-sizing: border-box;
-  margin-block: 0;
-  -webkit-text-size-adjust: 100%;
-}
-@media screen and (width > 53.375rem) {
-  .amsterdam-unordered-list {
-    font-size: var(--amsterdam-unordered-list-font-size-wide);
-  }
-}
-
-.amsterdam-unordered-list__item {
-  padding-inline: var(--amsterdam-unordered-list-item-padding-inline);
-}
-
-.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);
-}
-
-/*# sourceMappingURL=unordered-list.css.map */
+.amsterdam-unordered-list{box-sizing:border-box;list-style:none;margin-block:0;padding-inline-start:0;-webkit-text-size-adjust:100%;display:grid;gap:var(--amsterdam-unordered-list-gap)}.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-weight:var(--amsterdam-unordered-list-font-weight);line-height:var(--amsterdam-unordered-list-line-height);list-style-type:var(--amsterdam-unordered-list-list-style-type)}@media screen and (width > 53.375rem){.amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers){font-size:var(--amsterdam-unordered-list-wide-font-size)}}.amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) .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)}:is(.amsterdam-ordered-list,.amsterdam-unordered-list) .amsterdam-unordered-list{list-style-type:var(--amsterdam-unordered-list-unordered-list-list-style-type)}:is(.amsterdam-ordered-list,.amsterdam-unordered-list) .amsterdam-unordered-list .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)}/*# sourceMappingURL=unordered-list.css.map */

package/dist/unordered-list/unordered-list.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/unordered-list/unordered-list.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADQA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAdA;EACA;EACA;;AAcA;EAXF;IAYI;;;;AAMJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE","file":"unordered-list.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/unordered-list/unordered-list.scss"],"names":[],"mappings":"AAiBA,0BARE,sBACA,gBACA,eACA,uBACA,8BAOA,aACA,wCAIF,qEACE,4CACA,wDACA,2DACA,wDACA,wDACA,gEAEA,sCARF,qEASI,0DAIF,qGACE,6EACA,+EAKJ,iFACE,+EAEA,iHACE,4FACA","file":"unordered-list.css"}

package/dist/visually-hidden/visually-hidden.css

@@ -0,0 +1 @@
+.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}/*# sourceMappingURL=visually-hidden.css.map */

package/dist/visually-hidden/visually-hidden.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAKA,2BACE,8BACA,qBACA,WACA,kBACA,mBACA,gBACA,gBACA,iBACA,kBACA","file":"visually-hidden.css"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.4",
+  "version": "0.1.6",
   "author": "Community for NL Design System",
   "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -14,15 +14,16 @@
     "directory": "packages/css"
   },
   "scripts": {
-    "build": "sass src/:dist/",
+    "build": "sass src/:dist/ --style=compressed",
+    "build:watch": "sass src/:dist/ --watch",
     "clean": "rimraf dist/"
   },
   "devDependencies": {
-    "@amsterdam/design-system-tokens": "0.1.3",
-    "sass": "1.63.6"
+    "@amsterdam/design-system-tokens": "0.1.5",
+    "sass": "1.68.0"
   },
   "dependencies": {
-    "@utrecht/components": "1.0.0-alpha.492"
+    "@utrecht/components": "1.0.0-alpha.536"
   },
-  "gitHead": "43a949072edf58e9f8d198a2eca9b5457f01ccc8"
+  "gitHead": "58764d2cd6d59d20fd0e3215f32461c6c580df1b"
 }

package/src/accordion/README.md

@@ -1,8 +1,17 @@
 # Accordion
 
-Het accordion component is een klikbare (verticaal gestapelde) lijst van koppen om bijbehorende inhoud te verbergen of te vertonen. Met een accordion toon je inhoud op een progressieve manier aan gebruikers.
+Het accordion component is een klikbare (verticaal gestapelde) lijst van koppen om bijbehorende inhoud te verbergen of te tonen. Met een accordion toon je inhoud op een progressieve manier aan gebruikers.
 
-Een accordion bestaat uit meerdere accordionsecties. Gebruik minimaal 3 en maximaal 10 secties onder elkaar. Je kunt door een accordion navigeren met je toetsenbord:
+## Richtlijnen
+
+- Gebruik een accordion op een volle pagina met zowel essentiële als niet-essentiële inhoud. Door niet-essentiële inhoud te verbergen, komen gebruikers sneller bij de essentiële inhoud.
+- Gebruik een accordion niet om te veel essentiële inhoud op 1 pagina te voorkomen. Herschrijf de pagina compacter, verdeel de inhoud over meerdere pagina's of gebruik het (nog te maken) inhoudsopgave-component in plaats van een accordion voor dat doel. Verberg essentiële informatie niet in een accordion.
+- Een accordion bestaat uit meerdere accordionsecties. Gebruik minimaal 3 en maximaal 10 secties onder elkaar.
+- Het is belangrijk dat accordionsecties duidelijke koppen hebben, omdat de gebruiker de verborgen inhoud niet kan "scannen" om relevante informatie te vinden.
+- De inhoud verbergen heeft als nadeel dat "zoeken in pagina" geen resultaten oplevert voor de inhoud die verborgen is. Als je weet op welke zoekterm de gebruiker heeft gezocht om op de pagina met accordion te komen, dan kun je de secties die de zoekterm bevatten automatisch uitklappen.
+- De inhoud van de accordeon kan opmaak bevatten (bijvoorbeeld headings, lijsten, links en knoppen).
+
+Je kunt door een accordion navigeren met je toetsenbord:
 
 | key                  | element                                                                                                                      |
 | -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
@@ -14,6 +23,20 @@ Een accordion bestaat uit meerdere accordionsecties. Gebruik minimaal 3 en maxim
 | Home                 | Als een accordionsectie focus heeft: ga naar de eerste sectie                                                                |
 | End                  | Als een accordionsectie focus heeft: ga naar de laatste sectie                                                               |
 
+## Relevante WCAG eisen
+
+De WCAG eisen voor het Button component en het Heading component gelden ook voor de accordion header.
+
+Let extra op voor deze onderdelen:
+
+- [WCAG eis 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): de _heading level_ van de accordionsecties is afhankelijk van waar in de pagina de accordion is geplaatst, dit kan per pagina verschillen.
+- [WCAG eis 1.3.6](https://www.w3.org/TR/WCAG21/#identify-purpose): gebruik `aria-controls` voor de button, en gebruik een `region` landmark voor de _expandable region_ (gebruik daarvoor het HTML-element `<section>`)
+- [WCAG eis 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): contrast tussen tekst en achtergrond en tussen icoon en achtergrond is voldoende in alle varianten, alle interactieve statussen en alle mogelijke combinaties.
+- [WCAG eis 3.2.1](https://www.w3.org/TR/WCAG21/#on-focus): maak de accordion niet automatisch _expanded_ als de button focus krijgt.
+- [WCAG eis 2.1.3](https://www.w3.org/TR/WCAG21/#keyboard-no-exception): ondersteun ook de optionele toetsen: `Down Arrow`, `Up Arrow`, `Home` en `End`. `Space` moet de button activeren, niet de pagina scrollen (gebruik `keypressEvt.preventDefault()`).
+- [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de tekst die zowel wordt gebruikt als heading en als label voor de button moet duidelijk zijn, omdat de inhoud niet altijd zichtbaar is.
+- [WCAG eis 2.4.10](https://www.w3.org/TR/WCAG21/#section-headings): accordions die onderdeel vormen van de lopende tekst moeten section headings gebruiken.
+
 ## Referenties
 
 - [W3C - Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)

package/src/accordion/accordion.scss

@@ -18,7 +18,7 @@
   cursor: pointer;
   display: flex;
   font-family: var(--amsterdam-accordion-button-font-family);
-  font-size: var(--amsterdam-accordion-button-font-size-narrow);
+  font-size: var(--amsterdam-accordion-button-narrow-font-size);
   font-weight: var(--amsterdam-accordion-button-font-weight);
   justify-content: space-between;
   line-height: var(--amsterdam-accordion-button-line-height);
@@ -27,7 +27,7 @@
   width: 100%;
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-accordion-button-font-size-wide);
+    font-size: var(--amsterdam-accordion-button-wide-font-size);
   }
 
   &:focus {

package/src/blockquote/README.md

@@ -0,0 +1,14 @@
+# Blockquote
+
+De blockquote (in het Nederlands: citaat) wordt gebruikt om uitspraken te accentueren. Een citaat is anders vormgegeven dan de broodtekst, zodat deze opvalt.
+
+Let op: dit component voegt automatisch aanhalingstekens aan de tekst toe, dat hoef je niet zelf te doen.
+
+## Richtlijnen
+
+- Bij een citaat haal je letterlijk een schriftelijke of mondelinge tekst van iemand aan.
+- Een citaat heeft een breedte van een halve of hele tekstkolom.
+
+## Relevante WCAG eisen
+
+- [WCAG 3.1.2](https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html): wanneer het citaat in een andere taal is geschreven dan de pagina, dan moet het `lang` attribuut gebruikt worden om de taal duidelijk te maken.

package/src/blockquote/blockquote.scss

@@ -0,0 +1,41 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+@mixin reset {
+  box-sizing: border-box;
+  break-after: avoid;
+  break-inside: avoid;
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.amsterdam-blockquote {
+  color: var(--amsterdam-blockquote-color);
+  font-family: var(--amsterdam-blockquote-font-family);
+  font-size: var(--amsterdam-blockquote-narrow-font-size);
+  font-weight: var(--amsterdam-blockquote-font-weight);
+  line-height: var(--amsterdam-blockquote-line-height);
+  quotes: "“" "”";
+
+  &::before {
+    content: open-quote;
+  }
+
+  &::after {
+    content: close-quote;
+  }
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-blockquote-wide-font-size);
+  }
+
+  @include reset;
+}
+
+.amsterdam-blockquote--inverse-color {
+  color: var(--amsterdam-blockquote-inverse-color);
+}

package/src/breadcrumb/README.md

@@ -0,0 +1,15 @@
+# Breadcrumb
+
+De breadcrumb (in het Nederlands: kruimelpad) is een secundair navigatiepatroon dat een gebruiker helpt de structuur tussen niveaus in de website tot de huidige pagina te begrijpen. Gebruikers kunnen het gebruiken om door de structuur te navigeren.
+
+## Richtlijnen
+
+### Zo gebruiken
+
+Gebruik het kruimelpad alleen als het functioneel iets toevoegt voor de gebruiker en als de structuur ‘statisch’ is.
+
+### Dit vermijden
+
+Het kruimelpad wordt niet ingezet op een formulierpagina. Het leidt af van de taak van de gebruiker of kan per ongeluk als Progress Indicator gezien worden.
+
+Het is een secundair navigatiepatroon. Het mag nooit de hoofdnavigatie vervangen.

package/src/breadcrumb/breadcrumb.scss

@@ -0,0 +1,68 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  padding-inline: 0;
+}
+
+.amsterdam-breadcrumb {
+  font-family: var(--amsterdam-breadcrumb-font-family, inherit);
+  font-size: var(--amsterdam-breadcrumb-narrow-font-size);
+  line-height: var(--amsterdam-breadcrumb-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    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;
+  }
+
+  &:focus,
+  &:hover,
+  &:active {
+    color: var(--amsterdam-breadcrumb-item-link-hover-color);
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 3px;
+  }
+}

package/src/button/button.scss

@@ -7,13 +7,45 @@
 @import "../../utils/breakpoint";
 
 .amsterdam-button {
-  font-size: var(--amsterdam-button-font-size-narrow);
+  font-size: var(--amsterdam-button-narrow-font-size);
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-button-font-size-wide);
+    font-size: var(--amsterdam-button-wide-font-size);
   }
 }
 
-.amsterdam-button--secondary:hover {
-  box-shadow: var(--amsterdam-button-secondary-hover-box-shadow);
+.amsterdam-button--secondary {
+  box-shadow: var(--amsterdam-button-secondary-box-shadow);
+
+  &:disabled,
+  [aria-disabled="true"] {
+    box-shadow: var(--amsterdam-button-secondary-disabled-box-shadow);
+  }
+
+  &:hover:not(:disabled, [aria-disabled="true"]) {
+    box-shadow: var(--amsterdam-button-secondary-hover-box-shadow);
+  }
+}
+
+// Specificity hack to be able to style secondary button focus state
+// This isn't currently possible with the Utrecht component
+// We should really pull this component in our own repo...
+.amsterdam-button--secondary.amsterdam-button--secondary {
+  &:focus {
+    color: var(--amsterdam-button-secondary-focus-color);
+  }
+}
+
+.amsterdam-button--secondary:focus:not(:disabled, [aria-disabled="true"]) {
+  box-shadow: var(--amsterdam-button-secondary-focus-box-shadow);
+}
+
+.amsterdam-button--tertiary {
+  &:hover:not(:disabled, [aria-disabled="true"]) {
+    box-shadow: var(--amsterdam-button-tertiary-hover-box-shadow);
+  }
+}
+
+.amsterdam-button--tertiary:focus:not(:disabled, [aria-disabled="true"]) {
+  box-shadow: var(--amsterdam-button-tertiary-focus-box-shadow);
 }

package/src/checkbox/README.md

@@ -0,0 +1,27 @@
+# Checkbox
+
+De checkbox (in het Nederlands: selectievakje) wordt gebruikt om gebruikers een selectie te laten maken. Hij wordt ook gebruikt om gebruikers te laten weten dat ze akkoord gaan met specifieke voorwaarden.
+
+## Richtlijnen
+
+- Selectievakjes worden gebruikt voor 1 of meerdere keuzes die elkaar niet uitsluiten.
+- Elk selectievakje werkt onafhankelijk van andere selectievakjes in een lijst op hetzelfde hiërarchische niveau. Het aanvinken van een extra vakje heeft geen invloed op andere selecties in die lijst.
+- Je kunt een selectievakje wel gebruiken voor een bulkselectie of –deselectie van een hele lijst met selectievakjes, maar dan moet duidelijk zijn dat het bulkselectievakje op een ander hiërarchisch niveau zit dan de lijst die volledig wordt geselecteerd of gedeselecteerd.
+- Een groep selectievakjes kan worden gebruikt om gegevens op een pagina, in een menu of binnen een component te filteren.
+- Een selectievakje kan een antwoord op een gesloten vraag zijn, als er meerdere antwoorden mogelijk zijn.
+- Een lijst van selectievakjes is verticaal gestapeld om leesbaarheid en bruikbaarheid te bevorderen.
+- Een lijst van selectievakjes moet in een `fieldset` zitten, met een `legend` die beschrijft waar de lijst over gaat. Als de selectievakjes bijvoorbeeld worden gebruikt om antwoord op een vraag te krijgen, dan is de `legend` de vraag.
+
+## Checkbox labels
+
+Een label:
+
+- ... begint met een hoofdletter
+- ... heeft geen interpunctie aan het einde als het een enkele zin, woord of fragment is.
+- ... is in de eerste persoon geschreven als het gaat om de vraag of de gebruiker akkoord gaat met de algemene voorwaarden
+
+## Relevante WCAG eisen
+
+- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): het is zowel voor een gebruiker als programmatisch duidelijk wat het doel van een formulierveld is.
+
+<!-- TODO: Checkbox is an interactive element, reference the general interactive elements docs when they're merged -->

package/src/checkbox/checkbox-css.md

@@ -0,0 +1,3 @@
+# CSS Checkbox
+
+Het selectievakje bestaat uit een vakje en een tekstlabel. Het tekstlabel staat rechts van het selectievakje. Om toegankelijkheid te vergroten is het volledige component (vakje en label) klikbaar.