npm - @amsterdam/design-system-css - Versions diffs - 0.7.1 → 0.9.0 - Mend

@amsterdam/design-system-css 0.7.1 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (156) hide show

package/CHANGELOG.md +64 -0
package/README.md +21 -0
package/dist/accordion/accordion.css +1 -1
package/dist/accordion/accordion.css.map +1 -1
package/dist/avatar/avatar.css +1 -1
package/dist/avatar/avatar.css.map +1 -1
package/dist/badge/badge.css +1 -1
package/dist/badge/badge.css.map +1 -1
package/dist/blockquote/blockquote.css +1 -1
package/dist/blockquote/blockquote.css.map +1 -1
package/dist/breadcrumb/breadcrumb.css +1 -1
package/dist/breadcrumb/breadcrumb.css.map +1 -1
package/dist/button/button.css +1 -1
package/dist/button/button.css.map +1 -1
package/dist/card/card.css +1 -1
package/dist/card/card.css.map +1 -1
package/dist/checkbox/checkbox.css +1 -1
package/dist/checkbox/checkbox.css.map +1 -1
package/dist/date-input/date-input.css +1 -0
package/dist/date-input/date-input.css.map +1 -0
package/dist/description-list/description-list.css +1 -0
package/dist/description-list/description-list.css.map +1 -0
package/dist/dialog/dialog.css +1 -1
package/dist/dialog/dialog.css.map +1 -1
package/dist/document/document.css +1 -0
package/dist/document/document.css.map +1 -0
package/dist/error-message/error-message.css +1 -0
package/dist/error-message/error-message.css.map +1 -0
package/dist/field/field.css +1 -0
package/dist/field/field.css.map +1 -0
package/dist/field-set/field-set.css +1 -0
package/dist/field-set/field-set.css.map +1 -0
package/dist/file-input/file-input.css +1 -0
package/dist/file-input/file-input.css.map +1 -0
package/dist/form-field-character-counter/form-field-character-counter.css +1 -1
package/dist/form-field-character-counter/form-field-character-counter.css.map +1 -1
package/dist/header/header.css +1 -1
package/dist/header/header.css.map +1 -1
package/dist/heading/heading.css +1 -1
package/dist/heading/heading.css.map +1 -1
package/dist/icon/icon.css +1 -1
package/dist/icon/icon.css.map +1 -1
package/dist/image/image.css +1 -1
package/dist/image/image.css.map +1 -1
package/dist/index.css +1 -1
package/dist/index.css.map +1 -1
package/dist/label/label.css +1 -0
package/dist/label/label.css.map +1 -0
package/dist/link/link.css +1 -1
package/dist/link/link.css.map +1 -1
package/dist/link-list/link-list.css +1 -1
package/dist/link-list/link-list.css.map +1 -1
package/dist/logo/logo.css +1 -1
package/dist/logo/logo.css.map +1 -1
package/dist/ordered-list/ordered-list.css +1 -1
package/dist/ordered-list/ordered-list.css.map +1 -1
package/dist/page-heading/page-heading.css +1 -1
package/dist/page-heading/page-heading.css.map +1 -1
package/dist/page-menu/page-menu.css +1 -1
package/dist/page-menu/page-menu.css.map +1 -1
package/dist/pagination/pagination.css +1 -1
package/dist/pagination/pagination.css.map +1 -1
package/dist/paragraph/paragraph.css +1 -1
package/dist/paragraph/paragraph.css.map +1 -1
package/dist/radio/radio.css +1 -1
package/dist/radio/radio.css.map +1 -1
package/dist/screen/screen.css +1 -1
package/dist/screen/screen.css.map +1 -1
package/dist/search-field/search-field.css +1 -1
package/dist/search-field/search-field.css.map +1 -1
package/dist/select/select.css +1 -0
package/dist/select/select.css.map +1 -0
package/dist/switch/switch.css +1 -1
package/dist/switch/switch.css.map +1 -1
package/dist/table/table.css +1 -1
package/dist/table/table.css.map +1 -1
package/dist/tabs/tabs.css +1 -1
package/dist/tabs/tabs.css.map +1 -1
package/dist/text-area/text-area.css +1 -1
package/dist/text-area/text-area.css.map +1 -1
package/dist/text-input/text-input.css +1 -1
package/dist/text-input/text-input.css.map +1 -1
package/dist/time-input/time-input.css +1 -0
package/dist/time-input/time-input.css.map +1 -0
package/dist/top-task-link/top-task-link.css +1 -1
package/dist/top-task-link/top-task-link.css.map +1 -1
package/dist/unordered-list/unordered-list.css +1 -1
package/dist/unordered-list/unordered-list.css.map +1 -1
package/dist/visually-hidden/visually-hidden.css +1 -1
package/dist/visually-hidden/visually-hidden.css.map +1 -1
package/documentation/coding-conventions.md +16 -4
package/package.json +5 -5
package/src/common/hide-input.scss +1 -1
package/src/common/text-rendering.scss +15 -0
package/src/components/accordion/accordion.scss +23 -15
package/src/components/avatar/avatar.scss +2 -2
package/src/components/badge/badge.scss +35 -5
package/src/components/blockquote/blockquote.scss +2 -1
package/src/components/breadcrumb/breadcrumb.scss +12 -10
package/src/components/button/button.scss +8 -5
package/src/components/card/card.scss +1 -1
package/src/components/checkbox/checkbox.scss +12 -15
package/src/components/date-input/README.md +11 -0
package/src/components/date-input/date-input.scss +77 -0
package/src/components/description-list/README.md +18 -0
package/src/components/description-list/description-list.scss +55 -0
package/src/components/dialog/README.md +7 -0
package/src/components/dialog/dialog.scss +7 -7
package/src/components/document/document.scss +14 -0
package/src/components/error-message/README.md +11 -0
package/src/components/error-message/error-message.scss +22 -0
package/src/components/field/README.md +9 -0
package/src/components/field/field.scss +16 -0
package/src/components/field-set/README.md +17 -0
package/src/components/field-set/field-set.scss +48 -0
package/src/components/file-input/README.md +9 -0
package/src/components/file-input/file-input.scss +69 -0
package/src/components/form-field-character-counter/form-field-character-counter.scss +2 -4
package/src/components/header/header.scss +5 -5
package/src/components/heading/heading.scss +2 -1
package/src/components/icon/icon.scss +12 -12
package/src/components/image/image.scss +3 -3
package/src/components/index.scss +10 -2
package/src/components/{form-label → label}/README.md +1 -1
package/src/components/label/label.scss +18 -0
package/src/components/link/link.scss +2 -4
package/src/components/link-list/link-list.scss +6 -5
package/src/components/logo/logo.scss +1 -1
package/src/components/ordered-list/ordered-list.scss +10 -3
package/src/components/page-heading/page-heading.scss +2 -1
package/src/components/page-menu/page-menu.scss +8 -1
package/src/components/pagination/README.md +1 -0
package/src/components/pagination/pagination.scss +10 -7
package/src/components/paragraph/paragraph.scss +5 -3
package/src/components/radio/radio.scss +9 -12
package/src/components/screen/screen.scss +8 -3
package/src/components/search-field/search-field.scss +34 -8
package/src/components/select/README.md +9 -0
package/src/components/select/select.scss +62 -0
package/src/components/switch/switch.scss +12 -9
package/src/components/table/table.scss +1 -1
package/src/components/tabs/tabs.scss +9 -3
package/src/components/text-area/text-area.scss +13 -6
package/src/components/text-input/text-input.scss +10 -3
package/src/components/time-input/README.md +11 -0
package/src/components/time-input/time-input.scss +78 -0
package/src/components/top-task-link/top-task-link.scss +2 -1
package/src/components/unordered-list/unordered-list.scss +10 -3
package/src/components/visually-hidden/visually-hidden.scss +2 -2
package/dist/fieldset/fieldset.css +0 -1
package/dist/fieldset/fieldset.css.map +0 -1
package/dist/form-label/form-label.css +0 -1
package/dist/form-label/form-label.css.map +0 -1
package/src/components/fieldset/README.md +0 -18
package/src/components/fieldset/fieldset.scss +0 -34
package/src/components/form-label/form-label.scss +0 -21

package/src/components/description-list/README.md ADDED Viewed

@@ -0,0 +1,18 @@
+<!-- @license CC0-1.0 -->
+# Description List
+A collection of terms and their details.
+## Design
+On a narrow screen, details appear indented below their term.
+From the medium breakpoint, terms and details appear next to each other.
+The column for the details is twice as wide as the one for the term.
+Details are set in bold text.
+## References
+- [MDN: `<dl>`: The Description List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)
+- [WCAG: Using description lists](https://www.w3.org/WAI/WCAG22/Techniques/html/H40)

package/src/components/description-list/description-list.scss ADDED Viewed

@@ -0,0 +1,55 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+@import "../../common/breakpoint";
+@import "../../common/text-rendering";
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+}
+.ams-description-list {
+  color: var(--ams-description-list-color);
+  display: grid;
+  font-family: var(--ams-description-list-font-family);
+  font-size: var(--ams-description-list-font-size);
+  font-weight: var(--ams-description-list-font-weight);
+  gap: var(--ams-description-list-gap);
+  line-height: var(--ams-description-list-line-height);
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    grid-template-columns: 1fr 2fr;
+  }
+  @include reset;
+  @include text-rendering;
+}
+.ams-description-list--inverse-color {
+  color: var(--ams-description-list-inverse-color);
+}
+.ams-description-list__term {
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    grid-column-start: 1;
+  }
+}
+@mixin reset-details {
+  margin-inline: 0;
+}
+.ams-description-list__details {
+  font-weight: var(--ams-description-list-details-font-weight);
+  padding-inline-start: var(--ams-description-list-details-padding-inline-start);
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    grid-column-start: 2;
+    padding-inline-start: 0;
+  }
+  @include reset-details;
+}

package/src/components/dialog/README.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/document/document.scss ADDED Viewed

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+@mixin reset-body {
+  margin-block: 0;
+  margin-inline: 0;
+}
+// Add this class if you haven’t removed the default margin on the `<body>` element.
+.ams-body {
+  @include reset-body;
+}

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,48 @@
+/**
+ * @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;
+}
+// [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 ADDED Viewed

@@ -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.

package/src/components/file-input/file-input.scss ADDED Viewed

@@ -0,0 +1,69 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+@import "../../common/text-rendering";
+@mixin reset-button {
+  border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
+  box-sizing: border-box;
+}
+.ams-file-input {
+  background-color: var(--ams-file-input-background-color);
+  border: var(--ams-file-input-border);
+  color: var(--ams-file-input-color);
+  cursor: var(--ams-file-input-cursor);
+  font-family: var(--ams-file-input-font-family);
+  font-size: var(--ams-file-input-font-size);
+  font-weight: var(--ams-file-input-font-weight);
+  line-height: var(--ams-file-input-line-height);
+  max-inline-size: calc(100% - var(--ams-file-input-padding-inline) * 2);
+  outline-offset: 0.25rem; // Double the default focus outline offset to compensate for the dashed border
+  padding-block: var(--ams-file-input-padding-block);
+  padding-inline: var(--ams-file-input-padding-inline);
+  touch-action: manipulation;
+  @include text-rendering;
+}
+.ams-file-input:disabled {
+  color: var(--ams-file-input-disabled-color);
+  cursor: var(--ams-file-input-disabled-cursor);
+}
+.ams-file-input::file-selector-button {
+  -webkit-appearance: none; // Reset appearance for Safari < 15.4
+  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
+  background-color: var(--ams-file-input-file-selector-button-background-color);
+  box-shadow: var(--ams-file-input-file-selector-button-box-shadow);
+  color: var(--ams-file-input-file-selector-button-color);
+  cursor: var(--ams-file-input-file-selector-button-cursor);
+  font-family: inherit;
+  font-size: inherit; // iOS specific fix
+  font-weight: inherit;
+  margin-inline-end: var(--ams-file-input-file-selector-button-margin-inline-end);
+  padding-block: var(--ams-file-input-file-selector-button-padding-block);
+  padding-inline: var(--ams-file-input-file-selector-button-padding-inline);
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    border: var(
+      --ams-file-input-file-selector-button-forced-color-mode-border
+    ); // add border because forced colors changes box-shadow to none
+  }
+  @include reset-button;
+}
+.ams-file-input:disabled::file-selector-button {
+  box-shadow: var(--ams-file-input-file-selector-button-disabled-box-shadow);
+  color: var(--ams-file-input-disabled-color);
+  cursor: var(--ams-file-input-file-selector-button-disabled-cursor);
+}
+.ams-file-input:not(:disabled):hover::file-selector-button {
+  box-shadow: var(--ams-file-input-file-selector-button-hover-box-shadow);
+  color: var(--ams-file-input-file-selector-button-hover-color);
+}

package/src/components/form-field-character-counter/form-field-character-counter.scss CHANGED Viewed

@@ -3,9 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
-}
+@import "../../common/text-rendering";
 .ams-form-field-character-counter {
   color: var(--ams-form-field-character-counter-color);
@@ -14,7 +12,7 @@
   font-weight: var(--ams-form-field-character-counter-font-weight);
   line-height: var(--ams-form-field-character-counter-line-height);
-  @include reset;
+  @include text-rendering;
 }
 .ams-form-field-character-counter--error {

package/src/components/header/header.scss CHANGED Viewed

@@ -51,27 +51,27 @@
   flex: 1 1 100%;
   @media screen and (min-width: $ams-breakpoint-wide) {
-    min-width: 0;
+    min-inline-size: 0;
     order: 2;
     .ams-header__title-heading {
       display: block;
+      inline-size: 100%;
       line-height: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      width: 100%;
     }
   }
 }
-// Temporary, will move to megamenu (and/or iconButton)
+// Temporary – will move to Mega Menu and/or Icon Button
 .ams-header__menu-button {
   background-color: transparent;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M0 3.238h32V7.81H0V3.238zm0 10.476h32v4.572H0v-4.572zM0 24.19h32v4.572H0V24.19z'/></svg>");
   background-position: center right;
   background-repeat: no-repeat;
-  background-size: 19px 19px;
+  background-size: 1.1875rem 1.1875rem;
   border: 0;
   color: var(--ams-page-menu-item-color);
   font-family: var(--ams-page-menu-item-font-family);
@@ -79,7 +79,7 @@
   font-weight: var(--ams-page-menu-item-font-weight);
   line-height: var(--ams-page-menu-item-line-height);
   margin-block: 0;
-  padding-inline: 0 30px;
+  padding-inline: 0 1.875rem;
   text-align: center;
   touch-action: manipulation;
 }

package/src/components/heading/heading.scss CHANGED Viewed

@@ -4,11 +4,11 @@
  */
 @import "../../common/hyphenation";
+@import "../../common/text-rendering";
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
-  -webkit-text-size-adjust: 100%;
 }
 .ams-heading {
@@ -19,6 +19,7 @@
   font-weight: var(--ams-heading-font-weight);
   @include hyphenation;
+  @include text-rendering;
   @include reset;
 }

package/src/components/icon/icon.scss CHANGED Viewed

@@ -18,37 +18,37 @@
 }
 .ams-icon--size-3 {
-  height: calc(var(--ams-icon-size-3-font-size) * var(--ams-icon-size-3-line-height));
+  block-size: calc(var(--ams-icon-size-3-font-size) * var(--ams-icon-size-3-line-height));
 }
 .ams-icon--size-3 svg {
-  height: var(--ams-icon-size-3-font-size);
-  width: var(--ams-icon-size-3-font-size);
+  block-size: var(--ams-icon-size-3-font-size);
+  inline-size: var(--ams-icon-size-3-font-size);
 }
 .ams-icon--size-4 {
-  height: calc(var(--ams-icon-size-4-font-size) * var(--ams-icon-size-4-line-height));
+  block-size: calc(var(--ams-icon-size-4-font-size) * var(--ams-icon-size-4-line-height));
 }
 .ams-icon--size-4 svg {
-  height: var(--ams-icon-size-4-font-size);
-  width: var(--ams-icon-size-4-font-size);
+  block-size: var(--ams-icon-size-4-font-size);
+  inline-size: var(--ams-icon-size-4-font-size);
 }
 .ams-icon--size-5 {
-  height: calc(var(--ams-icon-size-5-font-size) * var(--ams-icon-size-5-line-height));
+  block-size: calc(var(--ams-icon-size-5-font-size) * var(--ams-icon-size-5-line-height));
 }
 .ams-icon--size-5 svg {
-  height: var(--ams-icon-size-5-font-size);
-  width: var(--ams-icon-size-5-font-size);
+  block-size: var(--ams-icon-size-5-font-size);
+  inline-size: var(--ams-icon-size-5-font-size);
 }
 .ams-icon--size-6 {
-  height: calc(var(--ams-icon-size-6-font-size) * var(--ams-icon-size-6-line-height));
+  block-size: calc(var(--ams-icon-size-6-font-size) * var(--ams-icon-size-6-line-height));
 }
 .ams-icon--size-6 svg {
-  height: var(--ams-icon-size-6-font-size);
-  width: var(--ams-icon-size-6-font-size);
+  block-size: var(--ams-icon-size-6-font-size);
+  inline-size: var(--ams-icon-size-6-font-size);
 }

package/src/components/image/image.scss CHANGED Viewed

@@ -4,9 +4,9 @@
  */
 .ams-image {
+  block-size: auto; /* [1] */
   font-style: italic; /* [3] */
-  height: auto; /* [1] */
-  max-width: 100%; /* [1] */
+  max-inline-size: 100%; /* [1] */
   vertical-align: middle; /* [2] */
   &--cover {
@@ -14,7 +14,7 @@
   }
 }
-// [1] Allow for fluid image sizing while maintaining aspect ratio governed by width/height attributes
+// [1] Allow for fluid image sizing while maintaining aspect ratio governed by inline/block size attributes
 // [2] Remove ‘phantom’ white space
 // [3] Italicise alt text to visually offset it from surrounding copy
 // Source: https://x.com/csswizardry/status/1717841334462005661

package/src/components/index.scss CHANGED Viewed

@@ -4,8 +4,16 @@
  */
 /* Append here */
+@import "./error-message/error-message";
+@import "./file-input/file-input";
+@import "./field/field";
+@import "./select/select";
+@import "./time-input/time-input";
+@import "./date-input/date-input";
+@import "./document/document";
 @import "./avatar/avatar";
 @import "./form-field-character-counter/form-field-character-counter";
+@import "./description-list/description-list";
 @import "./row/row";
 @import "./radio/radio";
 @import "./tabs/tabs";
@@ -13,7 +21,7 @@
 @import "./column/column";
 @import "./margin/margin";
 @import "./gap/gap";
-@import "./fieldset/fieldset";
+@import "./field-set/field-set";
 @import "./link-list/link-list";
 @import "./badge/badge";
 @import "./table/table";
@@ -37,7 +45,7 @@
 @import "./button/button";
 @import "./card/card";
 @import "./checkbox/checkbox";
-@import "./form-label/form-label";
+@import "./label/label";
 @import "./grid/grid";
 @import "./heading/heading";
 @import "./spotlight/spotlight";

package/src/components/{form-label → label}/README.md RENAMED Viewed

@@ -1,6 +1,6 @@
 <!-- @license CC0-1.0 -->
-# Form Label
+# Label
 Describes a form control.

package/src/components/label/label.scss ADDED Viewed

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+@import "../../common/hyphenation";
+@import "../../common/text-rendering";
+.ams-label {
+  color: var(--ams-label-color);
+  font-family: var(--ams-label-font-family);
+  font-size: var(--ams-label-font-size);
+  font-weight: var(--ams-label-font-weight);
+  line-height: var(--ams-label-line-height);
+  @include hyphenation;
+  @include text-rendering;
+}

package/src/components/link/link.scss CHANGED Viewed

@@ -3,9 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
-}
+@import "../../common/text-rendering";
 .ams-link {
   color: var(--ams-link-color);
@@ -17,7 +15,7 @@
     color: var(--ams-link-hover-color);
   }
-  @include reset;
+  @include text-rendering;
 }
 .ams-link--standalone {

package/src/components/link-list/link-list.scss CHANGED Viewed

@@ -4,20 +4,21 @@
  */
 @import "../../common/hyphenation";
+@import "../../common/text-rendering";
 @mixin reset-list {
   box-sizing: border-box;
   list-style: none;
   margin-block: 0;
   padding-inline-start: 0;
-  -webkit-text-size-adjust: 100%;
 }
 .ams-link-list {
-  @include reset-list;
   display: grid;
   gap: var(--ams-link-list-gap);
+  @include text-rendering;
+  @include reset-list;
 }
 .ams-link-list__link {
@@ -25,10 +26,10 @@
   color: var(--ams-link-list-link-color);
   display: inline-flex;
   font-family: var(--ams-link-list-link-font-family);
-  font-size: var(--ams-link-list-link-medium-font-size);
+  font-size: var(--ams-link-list-link-font-size);
   font-weight: var(--ams-link-list-link-font-weight);
   gap: var(--ams-link-list-link-gap);
-  line-height: var(--ams-link-list-link-medium-line-height);
+  line-height: var(--ams-link-list-link-line-height);
   outline-offset: var(--ams-link-list-link-outline-offset);
   text-decoration-line: var(--ams-link-list-link-text-decoration-line);
   text-decoration-thickness: var(--ams-link-list-link-text-decoration-thickness);

package/src/components/logo/logo.scss CHANGED Viewed

@@ -4,8 +4,8 @@
  */
 .ams-logo {
+  block-size: var(--ams-logo-block-size);
   display: block;
-  height: var(--ams-logo-height);
 }
 .ams-logo__emblem {

package/src/components/ordered-list/ordered-list.scss CHANGED Viewed

@@ -3,21 +3,23 @@
  * Copyright Gemeente Amsterdam
  */
+@import "../../common/text-rendering";
 /** Apply border box sizing, reset white space and list styles. */
 @mixin reset {
   box-sizing: border-box;
   list-style-type: none;
   margin-block: 0;
   padding-inline-start: 0;
-  -webkit-text-size-adjust: 100%;
 }
 /** A list is a grid column with a gap between items. */
 .ams-ordered-list {
-  @include reset;
   display: grid;
   gap: var(--ams-ordered-list-gap);
+  @include text-rendering;
+  @include reset;
 }
 /** A list with markers sets typography for its text content. */
@@ -40,6 +42,11 @@
   color: var(--ams-ordered-list-inverse-color);
 }
+.ams-ordered-list--small:not(.ams-ordered-list--no-markers) {
+  font-size: var(--ams-ordered-list-small-font-size);
+  line-height: var(--ams-ordered-list-small-line-height);
+}
 /** A nested list has a different marker and less indentation for correct alignment. */
 :is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list {
   list-style-type: var(--ams-ordered-list-ordered-list-list-style-type);