@amsterdam/design-system-css 0.6.1 → 0.7.1

package/src/components/breadcrumb/breadcrumb.scss

@@ -10,26 +10,26 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-breadcrumb {
-  font-family: var(--amsterdam-breadcrumb-font-family, inherit);
-  font-size: var(--amsterdam-breadcrumb-font-size);
-  font-weight: var(--amsterdam-breadcrumb-font-weight);
-  line-height: var(--amsterdam-breadcrumb-line-height);
+.ams-breadcrumb {
+  font-family: var(--ams-breadcrumb-font-family, inherit);
+  font-size: var(--ams-breadcrumb-font-size);
+  font-weight: var(--ams-breadcrumb-font-weight);
+  line-height: var(--ams-breadcrumb-line-height);
 }
 
-.amsterdam-breadcrumb__list {
+.ams-breadcrumb__list {
   break-after: avoid;
   break-inside: avoid;
 
   @include reset;
 }
 
-.amsterdam-breadcrumb__item {
+.ams-breadcrumb__item {
   display: inline;
 }
 
-.amsterdam-breadcrumb__item:not(:last-child)::after {
-  background-image: var(--amsterdam-breadcrumb-separator-background-image);
+.ams-breadcrumb__item:not(:last-child)::after {
+  background-image: var(--ams-breadcrumb-separator-background-image);
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -38,15 +38,15 @@
   width: 1ex;
 }
 
-.amsterdam-breadcrumb__link {
-  color: var(--amsterdam-breadcrumb-item-link-color);
-  outline-offset: var(--amsterdam-breadcrumb-item-link-outline-offset);
-  text-decoration-line: var(--amsterdam-breadcrumb-item-link-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-breadcrumb-item-link-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-breadcrumb-item-link-text-underline-offset);
+.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);
 
   &:hover {
-    color: var(--amsterdam-breadcrumb-item-link-hover-color);
-    text-decoration-line: var(--amsterdam-breadcrumb-item-link-hover-text-decoration-line);
+    color: var(--ams-breadcrumb-item-link-hover-color);
+    text-decoration-line: var(--ams-breadcrumb-item-link-hover-text-decoration-line);
   }
 }

package/src/components/button/button.scss

@@ -7,84 +7,84 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-button {
+.ams-button {
   border: none;
-  cursor: var(--amsterdam-button-cursor);
+  cursor: var(--ams-button-cursor);
   display: inline-flex;
-  font-family: var(--amsterdam-button-font-family);
-  font-size: var(--amsterdam-button-font-size);
-  gap: var(--amsterdam-button-gap);
-  line-height: var(--amsterdam-button-line-height);
-  outline-offset: var(--amsterdam-button-outline-offset);
-  padding-block: var(--amsterdam-button-padding-block);
-  padding-inline: var(--amsterdam-button-padding-inline);
+  font-family: var(--ams-button-font-family);
+  font-size: var(--ams-button-font-size);
+  gap: var(--ams-button-gap);
+  line-height: var(--ams-button-line-height);
+  outline-offset: var(--ams-button-outline-offset);
+  padding-block: var(--ams-button-padding-block);
+  padding-inline: var(--ams-button-padding-inline);
   touch-action: manipulation;
 
   &:disabled,
   &[aria-disabled="true"] {
-    cursor: var(--amsterdam-button-disabled-cursor);
+    cursor: var(--ams-button-disabled-cursor);
   }
 
   @include reset;
 }
 
-@mixin amsterdam-button-forced-color-mode {
+@mixin ams-button-forced-color-mode {
   @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
     border: 2px solid ButtonBorder; // add border because forced colors changes box-shadow to none
   }
 }
 
-.amsterdam-button--primary {
-  background-color: var(--amsterdam-button-primary-background-color);
-  box-shadow: var(--amsterdam-button-primary-box-shadow);
-  color: var(--amsterdam-button-primary-color);
+.ams-button--primary {
+  background-color: var(--ams-button-primary-background-color);
+  box-shadow: var(--ams-button-primary-box-shadow);
+  color: var(--ams-button-primary-color);
 
   &:disabled,
   [aria-disabled="true"] {
-    background-color: var(--amsterdam-button-primary-disabled-background-color);
-    box-shadow: var(--amsterdam-button-primary-disabled-box-shadow);
+    background-color: var(--ams-button-primary-disabled-background-color);
+    box-shadow: var(--ams-button-primary-disabled-box-shadow);
   }
 
   &:hover:not(:disabled, [aria-disabled="true"]) {
-    background-color: var(--amsterdam-button-primary-hover-background-color);
-    box-shadow: var(--amsterdam-button-primary-hover-box-shadow);
+    background-color: var(--ams-button-primary-hover-background-color);
+    box-shadow: var(--ams-button-primary-hover-box-shadow);
   }
 
-  @include amsterdam-button-forced-color-mode;
+  @include ams-button-forced-color-mode;
 }
 
-.amsterdam-button--secondary {
-  background-color: var(--amsterdam-button-secondary-background-color);
-  box-shadow: var(--amsterdam-button-secondary-box-shadow);
-  color: var(--amsterdam-button-secondary-color);
+.ams-button--secondary {
+  background-color: var(--ams-button-secondary-background-color);
+  box-shadow: var(--ams-button-secondary-box-shadow);
+  color: var(--ams-button-secondary-color);
 
   &:disabled,
   [aria-disabled="true"] {
-    background-color: var(--amsterdam-button-secondary-disabled-background-color);
-    box-shadow: var(--amsterdam-button-secondary-disabled-box-shadow);
-    color: var(--amsterdam-button-secondary-disabled-color);
+    background-color: var(--ams-button-secondary-disabled-background-color);
+    box-shadow: var(--ams-button-secondary-disabled-box-shadow);
+    color: var(--ams-button-secondary-disabled-color);
   }
 
   &:hover:not(:disabled, [aria-disabled="true"]) {
-    box-shadow: var(--amsterdam-button-secondary-hover-box-shadow);
-    color: var(--amsterdam-button-secondary-hover-color);
+    box-shadow: var(--ams-button-secondary-hover-box-shadow);
+    color: var(--ams-button-secondary-hover-color);
   }
 
-  @include amsterdam-button-forced-color-mode;
+  @include ams-button-forced-color-mode;
 }
 
-.amsterdam-button--tertiary {
-  background-color: var(--amsterdam-button-tertiary-background-color);
-  color: var(--amsterdam-button-tertiary-color);
+.ams-button--tertiary {
+  background-color: var(--ams-button-tertiary-background-color);
+  color: var(--ams-button-tertiary-color);
 
   &:disabled,
   [aria-disabled="true"] {
-    background-color: var(--amsterdam-button-tertiary-disabled-background-color);
-    color: var(--amsterdam-button-tertiary-disabled-color);
+    background-color: var(--ams-button-tertiary-disabled-background-color);
+    color: var(--ams-button-tertiary-disabled-color);
   }
 
   &:hover:not(:disabled, [aria-disabled="true"]) {
-    box-shadow: var(--amsterdam-button-tertiary-hover-box-shadow);
-    color: var(--amsterdam-button-tertiary-hover-color);
+    box-shadow: var(--ams-button-tertiary-hover-box-shadow);
+    color: var(--ams-button-tertiary-hover-color);
   }
 }

package/src/components/card/card.scss

@@ -3,10 +3,10 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-card {
+.ams-card {
   display: grid;
   gap: 0.5rem;
-  outline-offset: var(--amsterdam-card-outline-offset);
+  outline-offset: var(--ams-card-outline-offset);
   position: relative;
   touch-action: manipulation;
 
@@ -37,20 +37,20 @@
   }
 }
 
-.amsterdam-card__heading-group {
+.ams-card__heading-group {
   display: flex;
   flex-direction: column-reverse;
   gap: 0.5rem;
 }
 
-.amsterdam-card__link {
-  color: var(--amsterdam-card-link-color);
-  text-decoration-line: var(--amsterdam-card-link-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-card-link-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-card-link-text-underline-offset);
+.ams-card__link {
+  color: var(--ams-card-link-color);
+  text-decoration-line: var(--ams-card-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-card-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-card-link-text-underline-offset);
 
   &:hover {
-    color: var(--amsterdam-card-link-hover-color);
-    text-decoration-line: var(--amsterdam-card-link-hover-text-decoration-line);
+    color: var(--ams-card-link-hover-color);
+    text-decoration-line: var(--ams-card-link-hover-text-decoration-line);
   }
 }

package/src/components/checkbox/checkbox.scss

@@ -6,23 +6,23 @@
 @import "../../common/input-label-focus";
 @import "../../common/hide-input";
 
-.amsterdam-checkbox__input {
+.ams-checkbox__input {
   @include hide-input;
   @include input-label-focus;
 }
 
-.amsterdam-checkbox__checkmark {
+.ams-checkbox__checkmark {
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--amsterdam-checkbox-font-size) * var(--amsterdam-checkbox-line-height));
+  height: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
   width: 1.5rem;
 
   &::after {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
-    border-color: var(--amsterdam-checkbox-checkmark-border-color);
+    border-color: var(--ams-checkbox-checkmark-border-color);
     border-style: solid;
     border-width: 0.125rem;
     box-sizing: border-box;
@@ -36,25 +36,25 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-checkbox__label {
-  color: var(--amsterdam-checkbox-color);
+.ams-checkbox__label {
+  color: var(--ams-checkbox-color);
   cursor: pointer;
   display: inline-flex;
-  font-family: var(--amsterdam-checkbox-font-family);
-  font-size: var(--amsterdam-checkbox-font-size);
-  font-weight: var(--amsterdam-checkbox-font-weight);
+  font-family: var(--ams-checkbox-font-family);
+  font-size: var(--ams-checkbox-font-size);
+  font-weight: var(--ams-checkbox-font-weight);
   gap: 0.5rem;
-  line-height: var(--amsterdam-checkbox-line-height);
-  outline-offset: var(--amsterdam-checkbox-outline-offset);
+  line-height: var(--ams-checkbox-line-height);
+  outline-offset: var(--ams-checkbox-outline-offset);
 
   &:hover {
-    color: var(--amsterdam-checkbox-hover-color);
+    color: var(--ams-checkbox-hover-color);
     text-decoration-line: underline;
     text-decoration-thickness: 0.125rem;
     text-underline-offset: 0.375rem;
 
-    .amsterdam-checkbox__checkmark::after {
-      border-color: var(--amsterdam-checkbox-checkmark-hover-border-color);
+    .ams-checkbox__checkmark::after {
+      border-color: var(--ams-checkbox-checkmark-hover-border-color);
       border-width: 0.1875rem;
     }
   }
@@ -63,19 +63,19 @@
 }
 
 // Default checked
-.amsterdam-checkbox__input:checked {
-  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
-    background-color: var(--amsterdam-checkbox-checkmark-checked-background-color);
-    background-image: var(--amsterdam-checkbox-checkmark-checked-background-image);
+.ams-checkbox__input:checked {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    background-color: var(--ams-checkbox-checkmark-checked-background-color);
+    background-image: var(--ams-checkbox-checkmark-checked-background-image);
     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: var(--amsterdam-checkbox-checkmark-indeterminate-background-image);
+.ams-checkbox__input:indeterminate {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    background-color: var(--ams-checkbox-checkmark-indeterminate-background-color);
+    background-image: var(--ams-checkbox-checkmark-indeterminate-background-image);
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
@@ -84,135 +84,133 @@
 }
 
 // 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);
+.ams-checkbox__input:invalid,
+.ams-checkbox__input[aria-invalid="true"] {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    border-color: var(--ams-checkbox-checkmark-invalid-border-color);
   }
 }
 
 // Disabled unchecked
-.amsterdam-checkbox__input:disabled {
-  + .amsterdam-checkbox__label {
-    color: var(--amsterdam-checkbox-disabled-color);
+.ams-checkbox__input:disabled {
+  + .ams-checkbox__label {
+    color: var(--ams-checkbox-disabled-color);
     cursor: not-allowed;
 
-    .amsterdam-checkbox__checkmark::after {
-      border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
+    .ams-checkbox__checkmark::after {
+      border-color: var(--ams-checkbox-checkmark-disabled-border-color);
       border-width: 0.125rem;
     }
   }
 }
 
 // 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);
+.ams-checkbox__input:invalid:checked,
+.ams-checkbox__input[aria-invalid="true"]:checked {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    background-color: var(--ams-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);
+.ams-checkbox__input:invalid:indeterminate,
+.ams-checkbox__input[aria-invalid="true"]:indeterminate {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    background-color: var(--ams-checkbox-checkmark-invalid-indeterminate-background-color);
   }
 }
 
 // Disabled label
-.amsterdam-checkbox__input:disabled + .amsterdam-checkbox__label:hover {
+.ams-checkbox__input:disabled + .ams-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);
+.ams-checkbox__input:disabled:checked {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    background-color: var(--ams-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);
+.ams-checkbox__input:disabled:indeterminate {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    background-color: var(--ams-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 {
+.ams-checkbox__input:invalid:disabled,
+.ams-checkbox__input[aria-invalid="true"]:disabled {
+  + .ams-checkbox__label .ams-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);
+    border-color: var(--ams-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 {
+:is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid="true"])
+  + .ams-checkbox__label:hover
+  .ams-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);
+  border-color: var(--ams-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);
+.ams-checkbox__input:checked + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
+  background-color: var(--ams-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);
+.ams-checkbox__input:indeterminate + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
+  background-color: var(--ams-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 {
+:is(.ams-checkbox__input:invalid:checked, .ams-checkbox__input[aria-invalid="true"]:checked)
+  + .ams-checkbox__label:hover
+  .ams-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);
+  background-color: var(--ams-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 {
+:is(.ams-checkbox__input:invalid:indeterminate, .ams-checkbox__input[aria-invalid="true"]:indeterminate)
+  + .ams-checkbox__label:hover
+  .ams-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);
+  background-color: var(--ams-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);
+.ams-checkbox__input:disabled:checked + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
+  background-color: var(--ams-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);
+.ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
+  background-color: var(--ams-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 {
+:is(.ams-checkbox__input:invalid:disabled, .ams-checkbox__input[aria-invalid="true"]:disabled)
+  + .ams-checkbox__label:hover
+  .ams-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);
+  border-color: var(--ams-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 {
+.ams-checkbox__input:invalid:disabled:checked,
+.ams-checkbox__input:invalid:disabled:indeterminate,
+.ams-checkbox__input[aria-invalid="true"]:disabled:checked,
+.ams-checkbox__input[aria-invalid="true"]:disabled:indeterminate {
+  + .ams-checkbox__label .ams-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);
+    background-color: var(--ams-checkbox-checkmark-disabled-checked-background-color);
   }
 }

package/src/components/column/column.scss

@@ -5,12 +5,12 @@
 
 @import "../../common/size";
 
-.amsterdam-column {
+.ams-column {
   display: grid;
 }
 
-@each $size, $label in $amsterdam-sizes {
-  .amsterdam-column--#{$label} {
-    gap: var(--amsterdam-column-gap-#{$size});
+@each $size, $label in $ams-sizes {
+  .ams-column--#{$label} {
+    gap: var(--ams-column-gap-#{$size});
   }
 }

package/src/components/dialog/dialog.scss

@@ -4,13 +4,12 @@
  */
 
 @import "../../common/breakpoint";
-@import "../../common/hyphenation";
 
-.amsterdam-dialog {
-  background-color: var(--amsterdam-dialog-background-color);
-  border: var(--amsterdam-dialog-border);
+.ams-dialog {
+  background-color: var(--ams-dialog-background-color);
+  border: var(--ams-dialog-border);
   inset: 0;
-  max-inline-size: var(--amsterdam-dialog-max-inline-size);
+  max-inline-size: var(--ams-dialog-max-inline-size);
   padding-block: 0;
   padding-inline: 0;
   position: fixed;
@@ -21,18 +20,18 @@
   }
 }
 
-.amsterdam-dialog__form {
+.ams-dialog__form {
   display: grid;
-  gap: var(--amsterdam-dialog-form-gap);
+  gap: var(--ams-dialog-form-gap);
   grid-template-rows: auto 1fr auto;
-  max-block-size: var(--amsterdam-dialog-form-max-block-size);
+  max-block-size: var(--ams-dialog-form-max-block-size);
 
   // TODO Decide on these widths
-  padding-block: var(--amsterdam-dialog-form-padding-block);
-  padding-inline: var(--amsterdam-dialog-form-padding-inline);
+  padding-block: var(--ams-dialog-form-padding-block);
+  padding-inline: var(--ams-dialog-form-padding-inline);
 }
 
-.amsterdam-dialog__article {
+.ams-dialog__article {
   display: grid;
   gap: 1.5rem; /* Until we have a consistent way of spacing text elements */
   max-block-size: 100%; /* safari */
@@ -40,34 +39,19 @@
   overscroll-behavior-y: contain;
 }
 
-.amsterdam-dialog__header {
+.ams-dialog__header {
   align-items: flex-start;
   display: flex;
-  gap: var(--amsterdam-dialog-header-gap);
+  gap: var(--ams-dialog-header-gap);
+  justify-content: space-between;
 }
 
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
-}
-
-.amsterdam-dialog__title {
-  color: var(--amsterdam-dialog-title-color);
-  flex: auto;
-  font-family: var(--amsterdam-dialog-title-font-family);
-  font-size: var(--amsterdam-dialog-title-font-size);
-  font-weight: var(--amsterdam-dialog-title-font-weight);
-  line-height: var(--amsterdam-dialog-title-line-height);
-
-  @include hyphenation;
-  @include reset;
-}
-
-.amsterdam-dialog__footer {
+.ams-dialog__footer {
   display: flex;
   flex-direction: column;
-  grid-gap: var(--amsterdam-dialog-footer-gap);
+  grid-gap: var(--ams-dialog-footer-gap);
 
-  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+  @media screen and (min-width: $ams-breakpoint-medium) {
     flex-direction: row;
     justify-content: end;
   }

package/src/components/fieldset/fieldset.scss

@@ -12,7 +12,7 @@
   padding-inline: 0;
 }
 
-.amsterdam-fieldset {
+.ams-fieldset {
   @include reset;
 }
 
@@ -21,12 +21,12 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-fieldset__legend {
-  color: var(--amsterdam-fieldset-legend-color);
-  font-family: var(--amsterdam-fieldset-legend-font-family);
-  font-size: var(--amsterdam-fieldset-legend-font-size);
-  font-weight: var(--amsterdam-fieldset-legend-font-weight);
-  line-height: var(--amsterdam-fieldset-legend-line-height);
+.ams-fieldset__legend {
+  color: var(--ams-fieldset-legend-color);
+  font-family: var(--ams-fieldset-legend-font-family);
+  font-size: var(--ams-fieldset-legend-font-size);
+  font-weight: var(--ams-fieldset-legend-font-weight);
+  line-height: var(--ams-fieldset-legend-line-height);
   margin-block-end: 1rem; /* Because of a bug in Chrome we can’t use display grid or flex for this gap */
 
   @include hyphenation;

package/src/components/form-field-character-counter/README.md

@@ -0,0 +1,19 @@
+<!-- @license CC0-1.0 -->
+
+# Form Field Character Counter
+
+Help users know how much text they can enter when there is a limit on the number of characters.
+
+Users will get updates at a pace that works best for the way they interact with the textarea. This means:
+
+- sighted users will see a count message that updates as they type
+- screen reader users will hear the count announcement when they stop typing.
+
+This component does not restrict the user from entering information. The user can enter more than the character limit, but are told they’ve entered too many characters. This lets them type or copy and paste their full answer, then edit it down.
+
+## Guidelines
+
+- Only use a character counter when there is a good reason for limiting the number of characters users can enter.
+  For example, if there is an indication that users are likely to enter more information than they need to.
+  Or when there is a legal or technical reason that means an entry must be no more than a certain number of characters.
+- If your users keep hitting the character limit imposed by the backend of your service then try to increase the limit rather than use a character counter.