@amsterdam/design-system-css 0.8.0 → 0.10.0

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/README.md

@@ -9,8 +9,8 @@ A form field in which a user can enter text.
 - Use a Text Input when users need to enter a single line of text, such as their name or phone number.
 - Do not use a Text Input when users could provide more than 1 sentence of text.
 - The width of the Text Input should be appropriate for the information to be entered.
-- A Text Input must have a label, and in most cases, this label should be visible.
+- A Text Input must have a Label, and in most cases, this label should be visible.
 - Use `spellcheck="false"` for fields that may contain sensitive information, such as passwords and personal data.
   Some browser extensions for spell-checking send this information to external servers.
 - Apply automatic assistance where possible.
-  For example, in logged-in systems, pre-filling input can prevent errors and save time.
+  For example, in logged-in systems, pre-filling known values can prevent errors and save time.

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;
-}