@amsterdam/design-system-css 0.8.0 → 0.9.0

package/src/components/icon/icon.scss

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

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

@@ -4,6 +4,9 @@
  */
 
 /* 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";
@@ -18,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";

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

@@ -26,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

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

@@ -42,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);

package/src/components/pagination/README.md

@@ -15,6 +15,7 @@ Pagination indicates the current page and allows users to navigate to other page
 - Redirect users to the first page if they enter a URL with a page number that doesn’t exist.
 - Pagination can be combined with a counter at the top of the page indicating “Page # of ##.”
 - Start a page with an overview list at the top after changing the page.
+- Make sure that the visible and accessible labels for the ‘previous’ and ‘next’ buttons convey the same meaning at all times – e.g. don’t update one and forget the other.
 
 ## Relevant WCAG Rules
 

package/src/components/pagination/pagination.scss

@@ -56,8 +56,8 @@
 
   // Override for icon size
   span.ams-icon svg {
-    height: 1rem;
-    width: 1rem;
+    block-size: 1rem;
+    inline-size: 1rem;
   }
 
   @include text-rendering;

package/src/components/paragraph/paragraph.scss

@@ -13,9 +13,9 @@
 .ams-paragraph {
   color: var(--ams-paragraph-color);
   font-family: var(--ams-paragraph-font-family);
-  font-size: var(--ams-paragraph-medium-font-size);
+  font-size: var(--ams-paragraph-font-size);
   font-weight: var(--ams-paragraph-font-weight);
-  line-height: var(--ams-paragraph-medium-line-height);
+  line-height: var(--ams-paragraph-line-height);
 
   @include text-rendering;
   @include reset;

package/src/components/radio/radio.scss

@@ -14,23 +14,23 @@
 
 .ams-radio__circle {
   align-items: center;
+  block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--ams-radio-font-size) * var(--ams-radio-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-radio-circle-border-color);
     border-radius: 100%;
     border-style: solid;
     border-width: var(--ams-radio-circle-border-width);
     box-sizing: border-box;
     content: "";
-    height: 1.5rem;
-    width: 100%;
+    inline-size: 100%;
   }
 }
 

package/src/components/screen/screen.scss

@@ -15,13 +15,13 @@
 }
 
 .ams-screen--full-height {
-  min-height: 100vh;
+  min-block-size: 100vh;
 }
 
 .ams-screen--wide {
-  max-width: var(--ams-screen-wide-max-width);
+  max-inline-size: var(--ams-screen-wide-max-inline-size);
 }
 
 .ams-screen--x-wide {
-  max-width: var(--ams-screen-x-wide-max-width);
+  max-inline-size: var(--ams-screen-x-wide-max-inline-size);
 }

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

@@ -11,9 +11,8 @@
 }
 
 @mixin reset-input {
-  // 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;
@@ -27,12 +26,12 @@
   font-family: var(--ams-search-field-input-font-family);
   font-size: var(--ams-search-field-input-font-size);
   font-weight: var(--ams-search-field-input-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-search-field-input-line-height);
   outline-offset: var(--ams-search-field-input-outline-offset);
   padding-block: var(--ams-search-field-input-padding-block);
   padding-inline: var(--ams-search-field-input-padding-inline);
   touch-action: manipulation;
-  width: 100%;
 
   @include text-rendering;
   @include reset-input;
@@ -46,17 +45,28 @@
   }
 }
 
+.ams-search-field__input:invalid,
+.ams-search-field__input[aria-invalid="true"] {
+  box-shadow: var(--ams-search-field-input-invalid-box-shadow);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--ams-search-field-input-invalid-hover-box-shadow);
+  }
+}
+
 .ams-search-field__input::placeholder {
   color: var(--ams-search-field-input-placeholder-color);
+  opacity: 100%; // This resets the lower opacity set by Firefox
 }
 
 .ams-search-field__input::-webkit-search-cancel-button {
   appearance: none;
   background-image: var(--ams-search-field-input-cancel-button-background-image);
+  block-size: var(--ams-search-field-input-cancel-button-block-size);
   cursor: pointer;
-  height: var(--ams-search-field-input-cancel-button-height);
+  inline-size: var(--ams-search-field-input-cancel-button-inline-size);
   margin-inline-start: 0.5rem;
-  width: var(--ams-search-field-input-cancel-button-width);
 }
 
 @mixin reset-button {

package/src/components/select/select.scss

@@ -4,7 +4,7 @@
  */
 
 @mixin reset {
-  appearance: none;
+  appearance: none; // Reset native appearance to hide default chevron
   border: 0;
   border-radius: 0; // Reset rounded borders for Safari on MacOS
 }
@@ -16,8 +16,8 @@
   font-family: var(--ams-select-font-family);
   font-size: var(--ams-select-font-size);
   font-weight: var(--ams-select-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-select-line-height);
-  max-inline-size: 100%;
   outline-offset: var(--ams-select-outline-offset);
   padding-block: var(--ams-select-padding-block);
   padding-inline: var(--ams-select-padding-inline);
@@ -37,12 +37,9 @@
   @include reset;
 }
 
+.ams-select:invalid,
 .ams-select[aria-invalid="true"] {
   box-shadow: var(--ams-select-invalid-box-shadow);
-
-  &:hover {
-    box-shadow: var(--ams-select-invalid-hover-box-shadow);
-  }
 }
 
 .ams-select:disabled {
@@ -55,6 +52,11 @@
   }
 }
 
+.ams-select:invalid:hover,
+.ams-select[aria-invalid="true"]:hover {
+  box-shadow: var(--ams-select-invalid-hover-box-shadow);
+}
+
 .ams-select__option:disabled {
   color: var(--ams-select-option-disabled-color);
 }

package/src/components/switch/switch.scss

@@ -16,29 +16,31 @@
 }
 
 .ams-switch__label {
+  --ams-switch-track-padding: 0.0625rem;
+
   background-color: var(--ams-switch-background-color);
-  border-radius: calc(var(--ams-switch-thumb-width) * 2);
+  border-radius: calc(var(--ams-switch-thumb-inline-size) * 2);
   cursor: pointer;
   display: inline-block;
+  inline-size: var(--ams-switch-inline-size);
   outline-offset: var(--ams-switch-outline-offset);
-  padding-block: 1px;
-  padding-inline: 1px;
+  padding-block: var(--ams-switch-track-padding);
+  padding-inline: var(--ams-switch-track-padding);
   transition: background-color 0.2s ease-in-out;
-  width: var(--ams-switch-width);
 
   @include reset;
 }
 
 .ams-switch__label::before {
   background-color: var(--ams-switch-thumb-background-color);
+  block-size: var(--ams-switch-thumb-block-size);
   border-radius: 50%;
   content: "";
   display: block;
-  height: var(--ams-switch-thumb-height);
+  inline-size: var(--ams-switch-thumb-inline-size);
   transition-duration: 0.1s;
   transition-property: box-shadow, transform;
   transition-timing-function: ease-in-out;
-  width: var(--ams-switch-thumb-width);
 }
 
 .ams-switch__input:checked + .ams-switch__label {
@@ -51,10 +53,11 @@
 }
 
 .ams-switch__input:checked + .ams-switch__label::before {
-  // The 2px is to account for the 1px padding-inline on the label
-  transform: translate(calc(var(--ams-switch-width) - var(--ams-switch-thumb-width) - 2px));
+  transform: translate(
+    calc(var(--ams-switch-inline-size) - var(--ams-switch-thumb-inline-size) - 2 * var(--ams-switch-track-padding))
+  );
 }
 
 .ams-switch:hover .ams-switch__input:enabled + .ams-switch__label::before {
-  box-shadow: 0 0 0 2px var(--ams-switch-thumb-hover-color);
+  box-shadow: var(--ams-switch-thumb-hover-box-shadow);
 }

package/src/components/table/table.scss

@@ -24,7 +24,7 @@
 
 .ams-table__cell,
 .ams-table__header-cell {
-  border-bottom: var(--ams-table-cell-border-bottom);
+  border-block-end: var(--ams-table-cell-border-block-end);
   padding-block: var(--ams-table-cell-padding-block);
   padding-inline: var(--ams-table-cell-padding-inline);
   text-align: start;

package/src/components/tabs/tabs.scss

@@ -12,7 +12,7 @@
 
 .ams-tabs__list {
   background-color: var(--ams-tabs-list-background-color);
-  border-bottom: var(--ams-tabs-list-border-bottom);
+  border-block-end: var(--ams-tabs-list-border-block-end);
   display: flex;
   overflow-x: auto;
 }

package/src/components/text-area/text-area.scss

@@ -6,26 +6,29 @@
 @import "../../common/text-rendering";
 
 @mixin reset {
+  -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;
   margin-block: 0;
 }
 
 .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);
+  inline-size: 100%;
   line-height: var(--ams-text-area-line-height);
-  max-width: 100%;
-  min-height: var(--ams-text-area-min-height);
+  max-inline-size: 100%; // This prevents overflow when using the `cols` prop
+  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;
-  width: 100%;
 
   @include text-rendering;
   @include reset;
@@ -37,6 +40,7 @@
 
 .ams-text-area::placeholder {
   color: var(--ams-text-area-placeholder-color);
+  opacity: 100%; // This resets the lower opacity set by Firefox
 }
 
 .ams-text-area:disabled {
@@ -69,5 +73,5 @@
 }
 
 .ams-text-area--cols {
-  width: auto;
+  inline-size: auto;
 }

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

@@ -6,24 +6,27 @@
 @import "../../common/text-rendering";
 
 @mixin reset {
+  -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;
   margin-block: 0;
 }
 
 .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);
+  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;
-  width: 100%;
 
   @include text-rendering;
   @include reset;
@@ -35,6 +38,7 @@
 
 .ams-text-input::placeholder {
   color: var(--ams-text-input-placeholder-color);
+  opacity: 100%; // This resets the lower opacity set by Firefox
 }
 
 .ams-text-input:disabled {

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

@@ -6,14 +6,13 @@
 @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;
+  inline-size: auto; // Reset inline size of 10em set by Android devices
   margin-block: 0;
-  width: auto; // Reset width of 10em set by Android devices
 }
 
 .ams-time-input {
@@ -25,13 +24,13 @@
   font-weight: var(--ams-time-input-font-weight);
   line-height: var(--ams-time-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-time-input-font-size) * var(--ams-time-input-line-height)) + 2 * var(--ams-time-input-padding-block)
   );
 
-  // Set min width for iOS, so the width is closer to the filled in width.
-  min-width: calc(4ch + (2 * var(--ams-time-input-padding-inline)));
+  // Set min inline size for iOS, so the size is closer to the filled in size.
+  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);

package/src/components/unordered-list/unordered-list.scss

@@ -42,6 +42,11 @@
   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);
+}
+
 /** A nested list has a different marker and less indentation for correct alignment. */
 :is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list {
   list-style-type: var(--ams-unordered-list-unordered-list-list-style-type);

package/src/components/visually-hidden/visually-hidden.scss

@@ -5,11 +5,11 @@
 
 // Source: https://css-tricks.com/inclusively-hidden/
 .ams-visually-hidden:not(:active, :focus) {
+  block-size: 1px;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  height: 1px;
+  inline-size: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
-  width: 1px;
 }

package/dist/fieldset/fieldset.css

@@ -1 +0,0 @@
-.ams-fieldset{border:0;margin-inline:0;padding-block:0;padding-inline:0}.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;hyphenate-limit-chars:var(--ams-hyphenation-hyphenate-limit-chars);hyphens:var(--ams-hyphenation-hyphens);overflow-wrap:var(--ams-hyphenation-overflow-wrap);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;padding-inline:0}/*# sourceMappingURL=fieldset.css.map */

package/dist/fieldset/fieldset.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/fieldset/fieldset.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAeA,cANE,SACA,gBACA,gBACA,iBAWF,sBACE,uCACA,mDACA,+CACA,mDACA,mDACA,sBCvBA,mEACA,uCACA,mDCEA,kCACA,2BACA,8BACA,sBFOA","file":"fieldset.css"}

package/src/components/fieldset/README.md

@@ -1,18 +0,0 @@
-<!-- @license CC0-1.0 -->
-
-# Fieldset
-
-A component to group related form inputs.
-
-## Guidelines
-
-- Use Fieldset 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 fieldset when asking for an address.
-- When grouping radio inputs, use `role="radiogroup"` on Fieldset to have this grouping explicitly announced as a radio group. Fieldset has a default role of `group`.
-
-## Relevant WCAG Requirements
-
-- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html): Fieldset 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/fieldset/fieldset.scss

@@ -1,35 +0,0 @@
-/**
- * @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-fieldset {
-  @include reset;
-}
-
-@mixin reset-legend {
-  padding-inline: 0;
-}
-
-.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;
-  @include text-rendering;
-  @include reset-legend;
-}