@amsterdam/design-system-css 0.1.4 → 0.1.5

package/dist/paragraph/paragraph.css

@@ -1,49 +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-paragraph {
-  color: var(--amsterdam-paragraph-color);
-  font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-paragraph-font-size-narrow);
-  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-font-size-wide);
-  }
-}
-
-.amsterdam-paragraph-small {
-  font-size: var(--amsterdam-paragraph-small-font-size-narrow);
-  line-height: var(--amsterdam-paragraph-small-line-height);
-}
-@media screen and (width > 53.375rem) {
-  .amsterdam-paragraph-small {
-    font-size: var(--amsterdam-paragraph-small-font-size-wide);
-  }
-}
-
-.amsterdam-paragraph-large {
-  font-size: var(--amsterdam-paragraph-large-font-size-narrow);
-  line-height: var(--amsterdam-paragraph-large-line-height);
-}
-@media screen and (width > 53.375rem) {
-  .amsterdam-paragraph-large {
-    font-size: var(--amsterdam-paragraph-large-font-size-wide);
-  }
-}
-
-/*# sourceMappingURL=paragraph.css.map */
+.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/paragraph/paragraph.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/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","file":"paragraph.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/paragraph/paragraph.scss"],"names":[],"mappings":"AAaA,qBACE,uCACA,mDACA,sDACA,mDACA,mDAVA,sBACA,eACA,8BAUA,sCAPF,qBAQI,qDAMJ,4BACE,4DACA,yDAEA,sCAJF,4BAKI,2DAIJ,4BACE,4DACA,yDAEA,sCAJF,4BAKI,2DAIJ,oCACE","file":"paragraph.css"}

package/dist/testula/testula.css

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+.amsterdam-testula {
+  /* Add styles here */
+}
+
+/*# sourceMappingURL=testula.css.map */

package/dist/testula/testula.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/testula/testula.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;AACE","file":"testula.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.5",
   "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.4",
+    "sass": "1.64.0"
   },
   "dependencies": {
-    "@utrecht/components": "1.0.0-alpha.492"
+    "@utrecht/components": "1.0.0-alpha.493"
   },
-  "gitHead": "43a949072edf58e9f8d198a2eca9b5457f01ccc8"
+  "gitHead": "50bfbf67c103288ed6ba6713a6537252f0c25246"
 }

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) is 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 @@
+# Checkbox

package/src/checkbox/checkbox.scss

@@ -0,0 +1,225 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-checkbox__input {
+  appearance: none;
+  margin-block: 0;
+  margin-inline: 0;
+  opacity: 0%; /* to hide native input field in older iOS */
+
+  &:focus-visible + label {
+    outline: auto;
+    outline-offset: var(--amsterdam-checkbox-outline-offset);
+  }
+}
+
+.amsterdam-checkbox__checkmark {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  height: calc(var(--amsterdam-checkbox-checkmark-narrow-size) * var(--amsterdam-checkbox-checkmark-multiplier));
+  width: 1.5rem;
+
+  &::after {
+    border-color: var(--amsterdam-checkbox-checkmark-border-color);
+    border-style: solid;
+    border-width: 2px;
+    box-sizing: border-box;
+    content: "";
+    height: 1.5rem;
+    width: 100%;
+  }
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: calc(var(--amsterdam-checkbox-checkmark-wide-size) * var(--amsterdam-checkbox-checkmark-multiplier));
+  }
+}
+
+.amsterdam-checkbox__label {
+  color: var(--amsterdam-checkbox-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--amsterdam-checkbox-font-family);
+  font-size: var(--amsterdam-checkbox-narrow-font-size);
+  font-weight: 400;
+  gap: 0.5rem;
+  line-height: var(--amsterdam-checkbox-line-height);
+
+  &:hover {
+    color: var(--amsterdam-checkbox-hover-color);
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 3px;
+
+    .amsterdam-checkbox__checkmark::after {
+      border-color: var(--amsterdam-checkbox-checkmark-hover-border-color);
+      border-width: 3px;
+    }
+  }
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-checkbox-wide-font-size);
+  }
+}
+
+// Default checked
+.amsterdam-checkbox__input:checked {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    background-color: var(--amsterdam-checkbox-checkmark-checked-background-color);
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12.216%2027.016%200%2014.168l2.91-2.77%209.346%209.837L29.129%204%2032%206.8z%22%2F%3E%3C%2Fsvg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
+    border: none;
+  }
+}
+
+// Default indeterminate
+.amsterdam-checkbox__input:indeterminate {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    background-color: var(--amsterdam-checkbox-checkmark-indeterminate-background-color);
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0id2hpdGUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMTMuNzE0aDMydjRIMHoiLz48L3N2Zz4=");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
+    border: none;
+  }
+}
+
+// Invalid unchecked
+.amsterdam-checkbox__input:invalid,
+.amsterdam-checkbox__input[aria-invalid="true"] {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    border-color: var(--amsterdam-checkbox-checkmark-invalid-border-color);
+  }
+}
+
+// Disabled unchecked
+.amsterdam-checkbox__input:disabled {
+  + .amsterdam-checkbox__label {
+    color: var(--amsterdam-checkbox-disabled-color);
+    cursor: not-allowed;
+
+    .amsterdam-checkbox__checkmark::after {
+      border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
+      border-width: 2px;
+    }
+  }
+}
+
+// Invalid checked
+.amsterdam-checkbox__input:invalid:checked,
+.amsterdam-checkbox__input[aria-invalid="true"]:checked {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    background-color: var(--amsterdam-checkbox-checkmark-invalid-checked-background-color);
+  }
+}
+
+// Invalid indeterminate
+.amsterdam-checkbox__input:invalid:indeterminate,
+.amsterdam-checkbox__input[aria-invalid="true"]:indeterminate {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    background-color: var(--amsterdam-checkbox-checkmark-invalid-indeterminate-background-color);
+  }
+}
+
+// Disabled label
+.amsterdam-checkbox__input:disabled + .amsterdam-checkbox__label:hover {
+  text-decoration: none;
+}
+
+// Disabled checked
+.amsterdam-checkbox__input:disabled:checked {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    background-color: var(--amsterdam-checkbox-checkmark-disabled-checked-background-color);
+  }
+}
+
+// Disabled indeterminate
+.amsterdam-checkbox__input:disabled:indeterminate {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    background-color: var(--amsterdam-checkbox-checkmark-disabled-indeterminate-background-color);
+  }
+}
+
+// Disabled invalid unchecked
+.amsterdam-checkbox__input:invalid:disabled,
+.amsterdam-checkbox__input[aria-invalid="true"]:disabled {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
+  }
+}
+
+// HOVER STATES
+
+// Invalid unchecked hover
+:is(.amsterdam-checkbox__input:invalid, .amsterdam-checkbox__input[aria-invalid="true"])
+  + .amsterdam-checkbox__label:hover
+  .amsterdam-checkbox__checkmark::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
+  border-color: var(--amsterdam-checkbox-checkmark-invalid-hover-border-color);
+}
+
+// Default checked hover
+.amsterdam-checkbox__input:checked + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
+  background-color: var(--amsterdam-checkbox-checkmark-checked-hover-background-color);
+}
+
+// Default indeterminate hover
+.amsterdam-checkbox__input:indeterminate + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
+  background-color: var(--amsterdam-checkbox-checkmark-indeterminate-hover-background-color);
+}
+
+// Invalid checked hover
+:is(.amsterdam-checkbox__input:invalid:checked, .amsterdam-checkbox__input[aria-invalid="true"]:checked)
+  + .amsterdam-checkbox__label:hover
+  .amsterdam-checkbox__checkmark::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
+  background-color: var(--amsterdam-checkbox-checkmark-invalid-checked-hover-background-color);
+}
+
+// Invalid indeterminate hover
+:is(.amsterdam-checkbox__input:invalid:indeterminate, .amsterdam-checkbox__input[aria-invalid="true"]:indeterminate)
+  + .amsterdam-checkbox__label:hover
+  .amsterdam-checkbox__checkmark::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
+  background-color: var(--amsterdam-checkbox-checkmark-invalid-indeterminate-hover-background-color);
+}
+
+// Disabled checked hover
+.amsterdam-checkbox__input:disabled:checked + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
+  background-color: var(--amsterdam-checkbox-checkmark-disabled-checked-hover-background-color);
+}
+
+// Disabled indeterminate hover
+.amsterdam-checkbox__input:disabled:indeterminate
+  + .amsterdam-checkbox__label:hover
+  .amsterdam-checkbox__checkmark::after {
+  background-color: var(--amsterdam-checkbox-checkmark-disabled-indeterminate-hover-background-color);
+}
+
+// Disabled invalid unchecked hover
+:is(.amsterdam-checkbox__input:invalid:disabled, .amsterdam-checkbox__input[aria-invalid="true"]:disabled)
+  + .amsterdam-checkbox__label:hover
+  .amsterdam-checkbox__checkmark::after {
+  // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+  border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
+}
+
+// DISABLED INVALID STATES
+
+// Disabled invalid checked & indeterminate
+.amsterdam-checkbox__input:invalid:disabled:checked,
+.amsterdam-checkbox__input:invalid:disabled:indeterminate,
+.amsterdam-checkbox__input[aria-invalid="true"]:disabled:checked,
+.amsterdam-checkbox__input[aria-invalid="true"]:disabled:indeterminate {
+  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    background-color: var(--amsterdam-checkbox-checkmark-disabled-checked-background-color);
+  }
+}

package/src/footer/README.md

@@ -0,0 +1,11 @@
+# Footer
+
+De footer (in het Nederlands: voettekst) sluit iedere webpagina af. De inhoud is service-informatie. Een gedeelte is voorgeschreven en een deel wordt ingevuld vanuit de doelstelling van de website.
+
+## Richtlijnen
+
+- De voettekst is verplicht, er staat er 1 op elke pagina.
+- De eerste kolom richt zich op contactinformatie. De informatie is zo specifiek mogelijk gebonden aan de betreffende website of pagina (bijvoorbeeld een chatmogelijkheid indien aanwezig).
+- De tweede kolom bevat links naar relevante (online) sites of bronnen.
+- De derde kolom verwijst naar nieuwsbrieven, socials enz.
+- Het laatste deel van de voettekst is bedoeld voor koppelingen naar privacy, cookieverklaring, uitleg over de website e.d. Het is niet bedoeld voor koppelingen naar bijvoorbeeld contactinformatie.