@amsterdam/design-system-css 0.8.0 → 0.10.0

package/dist/tabs/tabs.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/tabs/tabs.scss"],"names":[],"mappings":"AAYA,gBACE,uDACA,iDACA,aACA,gBAGF,kBACE,mCACA,qCACA,+CACA,2CACA,+CACA,+CACA,qDACA,mDACA,qDApBA,+BACA,SAuBA,2BACE,4CACA,6CAGF,6DACE,mDACA,yCAGF,sCACE,kEACA","file":"tabs.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/tabs/tabs.scss"],"names":[],"mappings":"AAYA,gBACE,uDACA,uDACA,aACA,gBAGF,kBACE,mCACA,qCACA,+CACA,2CACA,+CACA,+CACA,qDACA,mDACA,qDApBA,+BACA,SAuBA,2BACE,4CACA,6CAGF,6DACE,mDACA,yCAGF,sCACE,kEACA","file":"tabs.css"}

package/dist/text-area/text-area.css

@@ -1 +1 @@
-.ams-text-area{background-color:var(--ams-text-area-background-color);border:0;box-shadow:var(--ams-text-area-box-shadow);color:var(--ams-text-area-color);font-family:var(--ams-text-area-font-family);font-size:var(--ams-text-area-font-size);font-weight:var(--ams-text-area-font-weight);line-height:var(--ams-text-area-line-height);max-width:100%;min-height:var(--ams-text-area-min-height);outline-offset:var(--ams-text-area-outline-offset);padding-block:var(--ams-text-area-padding-block);padding-inline:var(--ams-text-area-padding-inline);touch-action:manipulation;width:100%;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;box-sizing:border-box;margin-block:0}.ams-text-area:hover{box-shadow:var(--ams-text-area-hover-box-shadow)}.ams-text-area::placeholder{color:var(--ams-text-area-placeholder-color)}.ams-text-area:disabled{background-color:var(--ams-text-area-disabled-background-color);box-shadow:var(--ams-text-area-disabled-box-shadow);color:var(--ams-text-area-disabled-color);cursor:var(--ams-text-area-disabled-cursor)}.ams-text-area:invalid,.ams-text-area[aria-invalid=true]{box-shadow:var(--ams-text-area-invalid-box-shadow)}.ams-text-area:invalid:hover,.ams-text-area[aria-invalid=true]:hover{box-shadow:var(--ams-text-area-invalid-hover-box-shadow)}.ams-text-area--resize-none{resize:none}.ams-text-area--resize-horizontal{resize:inline}.ams-text-area--resize-vertical{resize:block}.ams-text-area--cols{width:auto}/*# sourceMappingURL=text-area.css.map */
+.ams-text-area{background-color:var(--ams-text-area-background-color);box-shadow:var(--ams-text-area-box-shadow);color:var(--ams-text-area-color);font-family:var(--ams-text-area-font-family);font-size:var(--ams-text-area-font-size);font-weight:var(--ams-text-area-font-weight);inline-size:100%;line-height:var(--ams-text-area-line-height);max-inline-size:100%;min-block-size:var(--ams-text-area-min-block-size);outline-offset:var(--ams-text-area-outline-offset);padding-block:var(--ams-text-area-padding-block);padding-inline:var(--ams-text-area-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border:0;border-radius:0;box-sizing:border-box;margin-block:0}.ams-text-area:hover{box-shadow:var(--ams-text-area-hover-box-shadow)}.ams-text-area::placeholder{color:var(--ams-text-area-placeholder-color);opacity:100%}.ams-text-area:disabled{background-color:var(--ams-text-area-disabled-background-color);box-shadow:var(--ams-text-area-disabled-box-shadow);color:var(--ams-text-area-disabled-color);cursor:var(--ams-text-area-disabled-cursor)}.ams-text-area:invalid,.ams-text-area[aria-invalid=true]{box-shadow:var(--ams-text-area-invalid-box-shadow)}.ams-text-area:invalid:hover,.ams-text-area[aria-invalid=true]:hover{box-shadow:var(--ams-text-area-invalid-hover-box-shadow)}.ams-text-area--resize-none{resize:none}.ams-text-area--resize-horizontal{resize:inline}.ams-text-area--resize-vertical{resize:block}.ams-text-area--cols{inline-size:auto}/*# sourceMappingURL=text-area.css.map */

package/dist/text-area/text-area.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/text-area/text-area.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAYA,eACE,uDACA,SACA,2CACA,iCACA,6CACA,yCACA,6CACA,6CACA,eACA,2CACA,mDACA,iDACA,mDACA,0BACA,WCjBA,kCACA,2BACA,8BACA,sBDLA,sBACA,eAuBA,qBACE,iDAIJ,4BACE,6CAGF,wBACE,gEACA,oDACA,0CACA,4CAGF,yDAEE,mDAEA,qEAEE,yDAIJ,4BACE,YAGF,kCACE,cAGF,gCACE,aAGF,qBACE","file":"text-area.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/text-area/text-area.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAgBA,eACE,uDACA,2CACA,iCACA,6CACA,yCACA,6CACA,iBACA,6CACA,qBACA,mDACA,mDACA,iDACA,mDACA,0BCpBA,kCACA,2BACA,8BACA,sBDLA,wBACA,gBACA,SACA,gBACA,sBACA,eAsBA,qBACE,iDAIJ,4BACE,6CACA,aAGF,wBACE,gEACA,oDACA,0CACA,4CAGF,yDAEE,mDAEA,qEAEE,yDAIJ,4BACE,YAGF,kCACE,cAGF,gCACE,aAGF,qBACE","file":"text-area.css"}

package/dist/text-input/text-input.css

@@ -1 +1 @@
-.ams-text-input{background-color:var(--ams-text-input-background-color);border:0;box-shadow:var(--ams-text-input-box-shadow);color:var(--ams-text-input-color);font-family:var(--ams-text-input-font-family);font-size:var(--ams-text-input-font-size);font-weight:var(--ams-text-input-font-weight);line-height:var(--ams-text-input-line-height);outline-offset:var(--ams-text-input-outline-offset);padding-block:var(--ams-text-input-padding-block);padding-inline:var(--ams-text-input-padding-inline);touch-action:manipulation;width:100%;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;box-sizing:border-box;margin-block:0}.ams-text-input:hover{box-shadow:var(--ams-text-input-hover-box-shadow)}.ams-text-input::placeholder{color:var(--ams-text-input-placeholder-color)}.ams-text-input:disabled{background-color:var(--ams-text-input-disabled-background-color);box-shadow:var(--ams-text-input-disabled-box-shadow);color:var(--ams-text-input-disabled-color);cursor:not-allowed}.ams-text-input:invalid,.ams-text-input[aria-invalid=true]{box-shadow:var(--ams-text-input-invalid-box-shadow)}.ams-text-input:invalid:hover,.ams-text-input[aria-invalid=true]:hover{box-shadow:var(--ams-text-input-invalid-hover-box-shadow)}/*# sourceMappingURL=text-input.css.map */
+.ams-text-input{background-color:var(--ams-text-input-background-color);box-shadow:var(--ams-text-input-box-shadow);color:var(--ams-text-input-color);font-family:var(--ams-text-input-font-family);font-size:var(--ams-text-input-font-size);font-weight:var(--ams-text-input-font-weight);inline-size:100%;line-height:var(--ams-text-input-line-height);outline-offset:var(--ams-text-input-outline-offset);padding-block:var(--ams-text-input-padding-block);padding-inline:var(--ams-text-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border:0;border-radius:0;box-sizing:border-box;margin-block:0}.ams-text-input:hover{box-shadow:var(--ams-text-input-hover-box-shadow)}.ams-text-input::placeholder{color:var(--ams-text-input-placeholder-color);opacity:100%}.ams-text-input:disabled{background-color:var(--ams-text-input-disabled-background-color);box-shadow:var(--ams-text-input-disabled-box-shadow);color:var(--ams-text-input-disabled-color);cursor:not-allowed}.ams-text-input:invalid,.ams-text-input[aria-invalid=true]{box-shadow:var(--ams-text-input-invalid-box-shadow)}.ams-text-input:invalid:hover,.ams-text-input[aria-invalid=true]:hover{box-shadow:var(--ams-text-input-invalid-hover-box-shadow)}/*# sourceMappingURL=text-input.css.map */

package/dist/text-input/text-input.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/text-input/text-input.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAYA,gBACE,wDACA,SACA,4CACA,kCACA,8CACA,0CACA,8CACA,8CACA,oDACA,kDACA,oDACA,0BACA,WCfA,kCACA,2BACA,8BACA,sBDLA,sBACA,eAqBA,sBACE,kDAIJ,6BACE,8CAGF,yBACE,iEACA,qDACA,2CACA,mBAGF,2DAEE,oDAEA,uEAEE","file":"text-input.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/text-input/text-input.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAgBA,gBACE,wDACA,4CACA,kCACA,8CACA,0CACA,8CACA,iBACA,8CACA,oDACA,kDACA,oDACA,0BClBA,kCACA,2BACA,8BACA,sBDLA,wBACA,gBACA,SACA,gBACA,sBACA,eAoBA,sBACE,kDAIJ,6BACE,8CACA,aAGF,yBACE,iEACA,qDACA,2CACA,mBAGF,2DAEE,oDAEA,uEAEE","file":"text-input.css"}

package/dist/time-input/time-input.css

@@ -1 +1 @@
-.ams-time-input{background-color:var(--ams-time-input-background-color);box-shadow:var(--ams-time-input-box-shadow);color:var(--ams-time-input-color);font-family:var(--ams-time-input-font-family);font-size:var(--ams-time-input-font-size);font-weight:var(--ams-time-input-font-weight);line-height:var(--ams-time-input-line-height);min-height:calc(var(--ams-time-input-font-size)*var(--ams-time-input-line-height) + 2*var(--ams-time-input-padding-block));min-width:calc(4ch + 2*var(--ams-time-input-padding-inline));outline-offset:var(--ams-time-input-outline-offset);padding-block:var(--ams-time-input-padding-block);padding-inline:var(--ams-time-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border:0;border-radius:0;box-sizing:border-box;margin-block:0;width:auto}.ams-time-input:hover{box-shadow:var(--ams-time-input-hover-box-shadow)}.ams-time-input::-webkit-calendar-picker-indicator{appearance:none;background-image:var(--ams-time-input-calender-picker-indicator-background-image);cursor:pointer}.ams-time-input:hover::-webkit-calendar-picker-indicator{background-image:var(--ams-time-input-hover-calender-picker-indicator-background-image)}.ams-time-input:disabled{background-color:var(--ams-time-input-disabled-background-color);box-shadow:var(--ams-time-input-disabled-box-shadow);color:var(--ams-time-input-disabled-color);cursor:not-allowed}.ams-time-input:disabled::-webkit-calendar-picker-indicator{background-image:var(--ams-time-input-disabled-calender-picker-indicator-background-image);visibility:visible}.ams-time-input:invalid,.ams-time-input[aria-invalid=true]{box-shadow:var(--ams-time-input-invalid-box-shadow)}.ams-time-input:invalid:hover,.ams-time-input[aria-invalid=true]:hover{box-shadow:var(--ams-time-input-invalid-hover-box-shadow)}/*# sourceMappingURL=time-input.css.map */
+.ams-time-input{background-color:var(--ams-time-input-background-color);box-shadow:var(--ams-time-input-box-shadow);color:var(--ams-time-input-color);font-family:var(--ams-time-input-font-family);font-size:var(--ams-time-input-font-size);font-weight:var(--ams-time-input-font-weight);line-height:var(--ams-time-input-line-height);min-block-size:calc(var(--ams-time-input-font-size)*var(--ams-time-input-line-height) + 2*var(--ams-time-input-padding-block));min-inline-size:calc(4ch + 2*var(--ams-time-input-padding-inline));outline-offset:var(--ams-time-input-outline-offset);padding-block:var(--ams-time-input-padding-block);padding-inline:var(--ams-time-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border:0;border-radius:0;box-sizing:border-box;inline-size:auto;margin-block:0}.ams-time-input:hover{box-shadow:var(--ams-time-input-hover-box-shadow)}.ams-time-input::-webkit-calendar-picker-indicator{appearance:none;background-image:var(--ams-time-input-calender-picker-indicator-background-image);cursor:pointer}.ams-time-input:hover::-webkit-calendar-picker-indicator{background-image:var(--ams-time-input-hover-calender-picker-indicator-background-image)}.ams-time-input:disabled{background-color:var(--ams-time-input-disabled-background-color);box-shadow:var(--ams-time-input-disabled-box-shadow);color:var(--ams-time-input-disabled-color);cursor:not-allowed}.ams-time-input:disabled::-webkit-calendar-picker-indicator{background-image:var(--ams-time-input-disabled-calender-picker-indicator-background-image);visibility:visible}.ams-time-input:invalid,.ams-time-input[aria-invalid=true]{box-shadow:var(--ams-time-input-invalid-box-shadow)}.ams-time-input:invalid:hover,.ams-time-input[aria-invalid=true]:hover{box-shadow:var(--ams-time-input-invalid-hover-box-shadow)}/*# sourceMappingURL=time-input.css.map */

package/dist/time-input/time-input.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/time-input/time-input.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAkBA,gBACE,wDACA,4CACA,kCACA,8CACA,0CACA,8CACA,8CAGA,2HAKA,6DACA,oDACA,kDACA,oDACA,0BC3BA,kCACA,2BACA,8BACA,sBDJA,wBACA,gBACA,SACA,gBACA,sBACA,eACA,WA2BA,sBACE,kDAKJ,mDACE,gBACA,kFACA,eAGF,yDACE,wFAGF,yBACE,iEACA,qDACA,2CACA,mBAGF,4DACE,2FACA,mBAGF,2DAEE,oDAEA,uEAEE","file":"time-input.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/time-input/time-input.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAiBA,gBACE,wDACA,4CACA,kCACA,8CACA,0CACA,8CACA,8CAGA,+HAKA,mEACA,oDACA,kDACA,oDACA,0BC1BA,kCACA,2BACA,8BACA,sBDLA,wBACA,gBACA,SACA,gBACA,sBACA,iBACA,eA2BA,sBACE,kDAKJ,mDACE,gBACA,kFACA,eAGF,yDACE,wFAGF,yBACE,iEACA,qDACA,2CACA,mBAGF,4DACE,2FACA,mBAGF,2DAEE,oDAEA,uEAEE","file":"time-input.css"}

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

@@ -1 +1 @@
-.ams-unordered-list{display:grid;gap:var(--ams-unordered-list-gap);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;box-sizing:border-box;list-style:none;margin-block:0;padding-inline-start:0}.ams-unordered-list:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-color);font-family:var(--ams-unordered-list-font-family);font-size:var(--ams-unordered-list-font-size);font-weight:var(--ams-unordered-list-font-weight);line-height:var(--ams-unordered-list-line-height);list-style-type:var(--ams-unordered-list-list-style-type)}.ams-unordered-list:not(.ams-unordered-list--no-markers) .ams-unordered-list__item{margin-inline-start:var(--ams-unordered-list-item-margin-inline-start);padding-inline-start:var(--ams-unordered-list-item-padding-inline-start)}.ams-unordered-list--inverse-color:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-inverse-color)}:is(.ams-ordered-list,.ams-unordered-list) .ams-unordered-list{list-style-type:var(--ams-unordered-list-unordered-list-list-style-type)}:is(.ams-ordered-list,.ams-unordered-list) .ams-unordered-list .ams-unordered-list__item{margin-inline-start:var(--ams-unordered-list-unordered-list-item-margin-inline-start);padding-inline-start:var(--ams-unordered-list-unordered-list-item-padding-inline-start)}/*# sourceMappingURL=unordered-list.css.map */
+.ams-unordered-list{display:grid;gap:var(--ams-unordered-list-gap);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;box-sizing:border-box;list-style:none;margin-block:0;padding-inline-start:0}.ams-unordered-list:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-color);font-family:var(--ams-unordered-list-font-family);font-size:var(--ams-unordered-list-font-size);font-weight:var(--ams-unordered-list-font-weight);line-height:var(--ams-unordered-list-line-height);list-style-type:var(--ams-unordered-list-list-style-type)}.ams-unordered-list:not(.ams-unordered-list--no-markers) .ams-unordered-list__item{margin-inline-start:var(--ams-unordered-list-item-margin-inline-start);padding-inline-start:var(--ams-unordered-list-item-padding-inline-start)}.ams-unordered-list--inverse-color:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-inverse-color)}.ams-unordered-list--small:not(.ams-unordered-list--no-markers){font-size:var(--ams-unordered-list-small-font-size);line-height:var(--ams-unordered-list-small-line-height)}:is(.ams-ordered-list,.ams-unordered-list) .ams-unordered-list{list-style-type:var(--ams-unordered-list-unordered-list-list-style-type)}:is(.ams-ordered-list,.ams-unordered-list) .ams-unordered-list .ams-unordered-list__item{margin-inline-start:var(--ams-unordered-list-unordered-list-item-margin-inline-start);padding-inline-start:var(--ams-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/components/unordered-list/unordered-list.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAgBA,oBACE,aACA,kCCRA,kCACA,2BACA,8BACA,sBDJA,sBACA,gBACA,eACA,uBAaF,yDACE,sCACA,kDACA,8CACA,kDACA,kDACA,0DAGA,mFACE,uEACA,yEAIJ,wEACE,8CAIF,+DACE,yEAEA,yFACE,sFACA","file":"unordered-list.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/unordered-list/unordered-list.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAgBA,oBACE,aACA,kCCRA,kCACA,2BACA,8BACA,sBDJA,sBACA,gBACA,eACA,uBAaF,yDACE,sCACA,kDACA,8CACA,kDACA,kDACA,0DAGA,mFACE,uEACA,yEAIJ,wEACE,8CAGF,gEACE,oDACA,wDAIF,+DACE,yEAEA,yFACE,sFACA","file":"unordered-list.css"}

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

@@ -1 +1 @@
-.ams-visually-hidden:not(:active,:focus){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}/*# sourceMappingURL=visually-hidden.css.map */
+.ams-visually-hidden:not(:active,:focus){block-size:1px;clip:rect(0 0 0 0);clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;white-space:nowrap}/*# sourceMappingURL=visually-hidden.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAMA,yCACE,mBACA,qBACA,WACA,gBACA,kBACA,mBACA","file":"visually-hidden.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAMA,yCACE,eACA,mBACA,qBACA,gBACA,gBACA,kBACA","file":"visually-hidden.css"}

package/documentation/coding-conventions.md

@@ -13,8 +13,8 @@ Still, we define its thickness and offset for the initial state.
 ```css
 .ams-link {
   text-decoration: none;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 3px;
+  text-decoration-thickness: 0.125rem;
+  text-underline-offset: 0.1667em;
 
   &:hover {
     text-decoration: underline;
@@ -30,8 +30,8 @@ Still, we define its thickness and offset for the initial state.
 
   &:hover {
     text-decoration: underline;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 3px;
+    text-decoration-thickness: 0.125rem;
+    text-underline-offset: 0.1667em;
   }
 }
 ```
@@ -41,3 +41,9 @@ Still, we define its thickness and offset for the initial state.
 We use Sass mixins to extract common patterns, especially if they need more than 1 declaration.
 We collect reset styles in mixins as well.
 Both the name of the mixins and their documentation help explain the approach.
+
+## Form validation styling
+
+We style both the native invalid state (`:invalid`) as the invalid state you can set manually, using `aria-invalid`.
+We’re currently not sure how our users will implement forms, which is why both options are supported.
+[Native form validation isn’t without its issues](https://adrianroselli.com/2019/02/avoid-default-field-validation.html) though, so we might only support manual validation in the future.

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.0",
+  "version": "0.10.0",
   "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,8 +14,11 @@
     "directory": "packages/css"
   },
   "devDependencies": {
-    "sass": "1.75.0",
-    "@amsterdam/design-system-tokens": "0.8.0"
+    "sass": "1.77.6"
+  },
+  "peerDependencies": {
+    "@amsterdam/design-system-tokens": "0.10.0",
+    "@amsterdam/design-system-assets": "0.2.1"
   },
   "scripts": {
     "build": "sass src/components:dist/ --style=compressed",

package/src/common/hide-input.scss

@@ -5,7 +5,7 @@
 
 @mixin hide-input {
   appearance: none;
+  inline-size: 0; // Make sure the input doesn’t take up space on iOS
   margin-block: 0;
   margin-inline: 0;
-  opacity: 0%; /* to hide native input field in older iOS */
 }

package/src/components/accordion/accordion.scss

@@ -29,10 +29,11 @@
   font-size: var(--ams-accordion-button-font-size);
   font-weight: var(--ams-accordion-button-font-weight);
   gap: var(--ams-accordion-button-gap);
+  inline-size: 100%;
   line-height: var(--ams-accordion-button-line-height);
   padding-block: var(--ams-accordion-button-padding-block);
   padding-inline: var(--ams-accordion-button-padding-inline);
-  width: 100%;
+  text-align: start;
 
   &:focus {
     outline-offset: var(--ams-accordion-button-focus-outline-offset);

package/src/components/alert/README.md

@@ -21,4 +21,4 @@ There are four types of notifications:
   The grid’s white space is a good reference – place the Alert in its own cell.
 - By default, the Alert cannot be closed.
   This functionality can be added optionally.
-- Optionally, the title can be omitted.
+- Optionally, the heading can be omitted.

package/src/components/aspect-ratio/README.md

@@ -8,11 +8,11 @@ These are the proportions we use:
 
 | keyword   | ratio |
 | :-------- | ----: |
-| `2x-wide` |  32:9 |
+| `2x-wide` |  16:5 |
 | `x-wide`  |  16:9 |
-| `wide`    |   5:4 |
+| `wide`    |   4:3 |
 | `square`  |   1:1 |
-| `tall`    |   4:5 |
+| `tall`    |   3:4 |
 | `x-tall`  |  9:16 |
 
 ## Guidelines

package/src/components/avatar/avatar.scss

@@ -9,11 +9,11 @@
   display: inline-flex;
   font-family: var(--ams-avatar-font-family);
   font-size: var(--ams-avatar-font-size);
+  inline-size: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size));
   line-height: var(--ams-avatar-line-height);
   padding-block: var(--ams-avatar-padding-block);
   padding-inline: var(--ams-avatar-padding-inline);
   place-content: center;
-  width: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size));
 
   svg {
     fill: currentColor;
@@ -21,11 +21,16 @@
 }
 
 .ams-avatar--has-image {
+  inline-size: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size) + 2 * var(--ams-avatar-padding-inline));
   overflow: hidden;
   padding-block: 0;
   padding-inline: 0;
   vertical-align: middle; /* Remove ‘phantom’ white space when image doesn’t load */
-  width: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size) + 2 * var(--ams-avatar-padding-inline));
+}
+
+.ams-avatar--black {
+  background-color: var(--ams-avatar-black-background-color);
+  color: var(--ams-avatar-black-color);
 }
 
 .ams-avatar--blue {
@@ -33,11 +38,6 @@
   color: var(--ams-avatar-blue-color);
 }
 
-.ams-avatar--dark-blue {
-  background-color: var(--ams-avatar-dark-blue-background-color);
-  color: var(--ams-avatar-dark-blue-color);
-}
-
 .ams-avatar--dark-green {
   background-color: var(--ams-avatar-dark-green-background-color);
   color: var(--ams-avatar-dark-green-color);
@@ -48,6 +48,26 @@
   color: var(--ams-avatar-green-color);
 }
 
+.ams-avatar--grey-1 {
+  background-color: var(--ams-avatar-grey-1-background-color);
+  color: var(--ams-avatar-grey-1-color);
+}
+
+.ams-avatar--grey-2 {
+  background-color: var(--ams-avatar-grey-2-background-color);
+  color: var(--ams-avatar-grey-2-color);
+}
+
+.ams-avatar--grey-3 {
+  background-color: var(--ams-avatar-grey-3-background-color);
+  color: var(--ams-avatar-grey-3-color);
+}
+
+.ams-avatar--light-blue {
+  background-color: var(--ams-avatar-light-blue-background-color);
+  color: var(--ams-avatar-light-blue-color);
+}
+
 .ams-avatar--magenta {
   background-color: var(--ams-avatar-magenta-background-color);
   color: var(--ams-avatar-magenta-color);
@@ -68,6 +88,11 @@
   color: var(--ams-avatar-red-color);
 }
 
+.ams-avatar--white {
+  background-color: var(--ams-avatar-white-background-color);
+  color: var(--ams-avatar-white-color);
+}
+
 .ams-avatar--yellow {
   background-color: var(--ams-avatar-yellow-background-color);
   color: var(--ams-avatar-yellow-color);

package/src/components/badge/badge.scss

@@ -12,16 +12,16 @@
   padding-inline: var(--ams-badge-padding-inline);
 }
 
+.ams-badge--black {
+  background-color: var(--ams-badge-black-background-color);
+  color: var(--ams-badge-black-color);
+}
+
 .ams-badge--blue {
   background-color: var(--ams-badge-blue-background-color);
   color: var(--ams-badge-blue-color);
 }
 
-.ams-badge--dark-blue {
-  background-color: var(--ams-badge-dark-blue-background-color);
-  color: var(--ams-badge-dark-blue-color);
-}
-
 .ams-badge--dark-green {
   background-color: var(--ams-badge-dark-green-background-color);
   color: var(--ams-badge-dark-green-color);
@@ -32,6 +32,26 @@
   color: var(--ams-badge-green-color);
 }
 
+.ams-badge--grey-1 {
+  background-color: var(--ams-badge-grey-1-background-color);
+  color: var(--ams-badge-grey-1-color);
+}
+
+.ams-badge--grey-2 {
+  background-color: var(--ams-badge-grey-2-background-color);
+  color: var(--ams-badge-grey-2-color);
+}
+
+.ams-badge--grey-3 {
+  background-color: var(--ams-badge-grey-3-background-color);
+  color: var(--ams-badge-grey-3-color);
+}
+
+.ams-badge--light-blue {
+  background-color: var(--ams-badge-light-blue-background-color);
+  color: var(--ams-badge-light-blue-color);
+}
+
 .ams-badge--magenta {
   background-color: var(--ams-badge-magenta-background-color);
   color: var(--ams-badge-magenta-color);
@@ -47,6 +67,16 @@
   color: var(--ams-badge-purple-color);
 }
 
+.ams-badge--red {
+  background-color: var(--ams-badge-red-background-color);
+  color: var(--ams-badge-red-color);
+}
+
+.ams-badge--white {
+  background-color: var(--ams-badge-white-background-color);
+  color: var(--ams-badge-white-color);
+}
+
 .ams-badge--yellow {
   background-color: var(--ams-badge-yellow-background-color);
   color: var(--ams-badge-yellow-color);

package/src/components/breadcrumb/breadcrumb.scss

@@ -33,22 +33,22 @@
 .ams-breadcrumb__item:not(:last-child)::after {
   background-image: var(--ams-breadcrumb-separator-background-image);
   background-repeat: no-repeat;
+  block-size: 1ex;
   content: "";
   display: inline-block;
-  height: 1ex;
+  inline-size: 1ex;
   margin-inline: 0.5rem;
-  width: 1ex;
 }
 
 .ams-breadcrumb__link {
-  color: var(--ams-breadcrumb-item-link-color);
-  outline-offset: var(--ams-breadcrumb-item-link-outline-offset);
-  text-decoration-line: var(--ams-breadcrumb-item-link-text-decoration-line);
-  text-decoration-thickness: var(--ams-breadcrumb-item-link-text-decoration-thickness);
-  text-underline-offset: var(--ams-breadcrumb-item-link-text-underline-offset);
+  color: var(--ams-breadcrumb-link-color);
+  outline-offset: var(--ams-breadcrumb-link-outline-offset);
+  text-decoration-line: var(--ams-breadcrumb-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-breadcrumb-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-breadcrumb-link-text-underline-offset);
 
   &:hover {
-    color: var(--ams-breadcrumb-item-link-hover-color);
-    text-decoration-line: var(--ams-breadcrumb-item-link-hover-text-decoration-line);
+    color: var(--ams-breadcrumb-link-hover-color);
+    text-decoration-line: var(--ams-breadcrumb-link-hover-text-decoration-line);
   }
 }

package/src/components/button/button.scss

@@ -15,6 +15,7 @@
   font-family: var(--ams-button-font-family);
   font-size: var(--ams-button-font-size);
   gap: var(--ams-button-gap);
+  justify-content: center;
   line-height: var(--ams-button-line-height);
   outline-offset: var(--ams-button-outline-offset);
   padding-block: var(--ams-button-padding-block);

package/src/components/card/card.scss

@@ -14,7 +14,7 @@
   &:has(:focus-visible) {
     outline-color: -webkit-focus-ring-color;
     outline-style: auto;
-    outline-width: 1px;
+    outline-width: 0.0625rem;
   }
 
   /*

package/src/components/checkbox/checkbox.scss

@@ -14,22 +14,22 @@
 
 .ams-checkbox__checkmark {
   align-items: center;
+  block-size: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
-  width: 1.5rem;
+  inline-size: 1.5rem;
 
   &::after {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
+    block-size: 1.5rem;
     border-color: var(--ams-checkbox-checkmark-border-color);
     border-style: solid;
     border-width: var(--ams-checkbox-checkmark-border-width);
     box-sizing: border-box;
     content: "";
-    height: 1.5rem;
-    width: 100%;
+    inline-size: 100%;
   }
 }
 

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

@@ -6,9 +6,8 @@
 @import "../../common/text-rendering";
 
 @mixin reset {
-  // Reset native appearance, this causes issues on iOS and Android devices
-  -webkit-appearance: none;
-  appearance: none;
+  -webkit-appearance: none; // Reset appearance for Safari < 15.4
+  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
   border: 0;
   border-radius: 0; // Reset rounded borders on iOS devices
   box-sizing: border-box;
@@ -24,13 +23,13 @@
   font-weight: var(--ams-date-input-font-weight);
   line-height: var(--ams-date-input-line-height);
 
-  // Set min height for iOS, otherwise an empty box is a lot smaller than a filled one.
-  min-height: calc(
+  // Set min block size for iOS, otherwise an empty box is a lot smaller than a filled one.
+  min-block-size: calc(
     (var(--ams-date-input-font-size) * var(--ams-date-input-line-height)) + 2 * var(--ams-date-input-padding-block)
   );
 
-  // Set min width for iOS, so the width is closer to the filled in width.
-  min-width: calc(8ch + (2 * var(--ams-date-input-padding-inline)));
+  // Set min inline size for iOS, so the size is closer to the filled in size.
+  min-inline-size: calc(8ch + (2 * var(--ams-date-input-padding-inline)));
   outline-offset: var(--ams-date-input-outline-offset);
   padding-block: var(--ams-date-input-padding-block);
   padding-inline: var(--ams-date-input-padding-inline);

package/src/components/dialog/README.md

@@ -10,6 +10,13 @@ A Dialog allows the user to focus on one task or a piece of information by poppi
 - Use a dialog for short and non-frequent tasks.
   Consider using the main flow for regular tasks.
 
+## The order of buttons
+
+If your Dialog needs more than one button, put the one for the primary action first and the other buttons behind it.
+Sighted users will read the primary action first, in line with the natural reading order.
+The same goes for users of screen readers, who will hear the primary action first, and users of a keyboard, who will focus the primary action first.
+Also, this approach keeps the order of buttons consistent on both narrow and wide screens: if the buttons do not fit next to each other, they get stacked vertically with the primary action on top.
+
 ## Keyboard Support
 
 | key         | function                                                         |

package/src/components/dialog/dialog.scss

@@ -3,8 +3,6 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
-
 .ams-dialog {
   background-color: var(--ams-dialog-background-color);
   border: var(--ams-dialog-border);
@@ -48,11 +46,13 @@
 
 .ams-dialog__footer {
   display: flex;
-  flex-direction: column;
-  grid-gap: var(--ams-dialog-footer-gap);
+  flex-wrap: wrap; // [1]
+  gap: var(--ams-dialog-footer-gap);
+  margin-inline-end: auto; // [1]
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
-    flex-direction: row;
-    justify-content: end;
+  > * {
+    flex: auto; // [1]
   }
 }
+
+// [1] This combination stacks the buttons vertically and stretches them, until they fit next to each other.

package/src/components/error-message/README.md

@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+# Error Message
+
+Show an error message when there is a form field validation error.
+In the error message explain what went wrong and how to fix it.
+
+For guidance and examples on using error messages in a form,
+refer to the [Field](/docs/components-forms-field--docs) and [Field Set](/docs/components-forms-field-set--docs) documentation.
+
+Read the documentation by [NL Design System](https://www.nldesignsystem.nl/richtlijnen/formulieren/foutmeldingen) and [Gov.uk](https://design-system.service.gov.uk/components/error-message/) for more information on the contents of error messages and when to show them.

package/src/components/error-message/error-message.scss

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/text-rendering";
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+}
+
+.ams-error-message {
+  color: var(--ams-error-message-color);
+  font-family: var(--ams-error-message-font-family);
+  font-size: var(--ams-error-message-font-size);
+  font-weight: var(--ams-error-message-font-weight);
+  line-height: var(--ams-error-message-line-height);
+
+  @include text-rendering;
+  @include reset;
+}

package/src/components/field/README.md

@@ -0,0 +1,9 @@
+<!-- @license CC0-1.0 -->
+
+# Field
+
+Wraps a single input and its related elements. May indicate that the input has a validation error.
+
+## Guidelines
+
+Only use Field to wrap a single input. Use [Field Set](/docs/components-forms-field-set--docs) to wrap multiple inputs.

package/src/components/field/field.scss

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+.ams-field {
+  break-inside: avoid;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ams-field-gap);
+}
+
+.ams-field--invalid {
+  border-inline-start: var(--ams-field-invalid-border-inline-start);
+  padding-inline-start: var(--ams-field-invalid-padding-inline-start);
+}

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

@@ -0,0 +1,17 @@
+<!-- @license CC0-1.0 -->
+
+# Field Set
+
+A component to group related form inputs.
+
+## Guidelines
+
+- Use Field Set when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single Field Set when asking for an address.
+
+## Relevant WCAG Requirements
+
+- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html): Field Set labels the purpose of a group of inputs.
+
+## References
+
+- [Providing a description for groups of form controls using fieldset and legend elements](https://www.w3.org/WAI/WCAG22/Techniques/html/H71)

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

@@ -0,0 +1,52 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/hyphenation";
+@import "../../common/text-rendering";
+
+@mixin reset {
+  border: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.ams-field-set {
+  break-inside: avoid;
+
+  @include reset;
+}
+
+.ams-field-set--invalid {
+  border-inline-start: var(--ams-field-set-invalid-border-inline-start);
+  padding-inline-start: var(--ams-field-set-invalid-padding-inline-start);
+}
+
+@mixin reset-legend {
+  float: inline-start; // [1]
+  inline-size: 100%; // [1]
+  padding-inline: 0;
+
+  + * {
+    clear: both; // Reset the applied float for the legend’s first sibling
+  }
+}
+
+// [1] This combination allows the fieldset border to go around the legend, instead of through it.
+
+.ams-field-set__legend {
+  color: var(--ams-field-set-legend-color);
+  font-family: var(--ams-field-set-legend-font-family);
+  font-size: var(--ams-field-set-legend-font-size);
+  font-weight: var(--ams-field-set-legend-font-weight);
+  line-height: var(--ams-field-set-legend-line-height);
+  margin-block-end: var(
+    --ams-field-set-legend-margin-block-end
+  ); /* Because of a bug in Chrome we can’t use display grid or flex for this gap */
+
+  @include hyphenation;
+  @include text-rendering;
+  @include reset-legend;
+}

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

@@ -0,0 +1,9 @@
+<!-- @license CC0-1.0 -->
+
+# File Input
+
+Allows the user to upload one or more files from their device.
+
+## Visual considerations
+
+The filename label and button are displayed in the language of the browser and can vary between browsers and operating systems.