@amsterdam/design-system-css 0.10.0 → 0.11.1

package/src/components/heading/heading.scss

@@ -23,32 +23,32 @@
   @include reset;
 }
 
-.ams-heading--1 {
+.ams-heading--level-1 {
   font-size: var(--ams-heading-level-1-font-size);
   line-height: var(--ams-heading-level-1-line-height);
 }
 
-.ams-heading--2 {
+.ams-heading--level-2 {
   font-size: var(--ams-heading-level-2-font-size);
   line-height: var(--ams-heading-level-2-line-height);
 }
 
-.ams-heading--3 {
+.ams-heading--level-3 {
   font-size: var(--ams-heading-level-3-font-size);
   line-height: var(--ams-heading-level-3-line-height);
 }
 
-.ams-heading--4 {
+.ams-heading--level-4 {
   font-size: var(--ams-heading-level-4-font-size);
   line-height: var(--ams-heading-level-4-line-height);
 }
 
-.ams-heading--5 {
+.ams-heading--level-5 {
   font-size: var(--ams-heading-level-5-font-size);
   line-height: var(--ams-heading-level-5-line-height);
 }
 
-.ams-heading--6 {
+.ams-heading--level-6 {
   font-size: var(--ams-heading-level-6-font-size);
   line-height: var(--ams-heading-level-6-line-height);
 }

package/src/components/icon/README.md

@@ -6,7 +6,7 @@ Icons are visual symbols used to represent ideas, themes, or actions.
 They communicate the message at a glance and draw attention to important (interactive) information.
 Always use an `Icon` component to encapsulate an SVG icon for proper styling and sizing.
 
-## Interactive Elements
+## Interactive elements
 
 Use an icon to support textual interactive elements like buttons and links.
 Always try to provide accompanying text for an icon.
@@ -28,8 +28,8 @@ Icons are aligned to the left of the text by default and vertically centred to t
 
 Icons use the same text levels as all typographic components to determine their size.
 This ensures easy alignment between icons and text.
-[Refer to the typography documentation for more information](/docs/docs-design-guidelines-typography--docs).
+[Refer to the typography documentation for more information](/docs/brand-design-tokens-text--docs).
 
 ## Overview
 
-[You can find an overview of the available icons here](/docs/docs-assets-icons--docs).
+[You can find an overview of the available icons here](/docs/brand-assets-icons--docs).

package/src/components/icon-button/README.md

@@ -11,6 +11,6 @@ A button containing only an icon.
   Only use universally recognized icons, such as a close icon or a play icon.
 - Provide a label text that describes what the button does for screen reader users.
 
-## Relevant WCAG Requirements
+## Relevant WCAG requirements
 
 The Icon Button follows [the same requirements and guidelines as a regular button](/docs/components-buttons-button--docs).

package/src/components/image/README.md

@@ -17,7 +17,7 @@ Displays an image.
   Do this especially for the main image of a page, where the difference between sizes on a narrow and wide screen is most significant.
 - Ensure that the aspect ratio of the image is supported by the [Aspect Ratio](/docs/components-layout-aspect-ratio--docs) component.
 
-## Relevant WCAG Requirements
+## Relevant WCAG requirements
 
 - [WCAG 1.1.1](https://www.w3.org/TR/WCAG22/#non-text-content): Non-text content must have a text alternative.
 - [WCAG 1.4.5](https://www.w3.org/TR/WCAG22/#images-of-text): Use text instead of images of text.

package/src/components/index.scss

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./form-error-list/form-error-list";
 @import "./table-of-contents/table-of-contents";
 @import "./error-message/error-message";
 @import "./file-input/file-input";
@@ -13,7 +14,7 @@
 @import "./date-input/date-input";
 @import "./document/document";
 @import "./avatar/avatar";
-@import "./form-field-character-counter/form-field-character-counter";
+@import "./character-count/character-count";
 @import "./description-list/description-list";
 @import "./row/row";
 @import "./radio/radio";

package/src/components/link/README.md

@@ -30,7 +30,7 @@ We discourage using styles for visited links because they often make the page le
 The inline link does have a visited style.
 It is not part of navigation elements that are frequently scanned.
 
-## Relevant WCAG Requirements
+## Relevant WCAG requirements
 
 - [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum)
 - [WCAG 2.4.4](https://www.w3.org/TR/WCAG21/#link-purpose-in-context)

package/src/components/margin/README.md

@@ -2,4 +2,24 @@
 
 # Margin
 
-Use these utility classes to add white space below a single element.
+Adds white space below a single element.
+
+## Class names
+
+The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the height of the bottom margin.
+
+| Class name   | Preview                                                                                      |
+| ------------ | -------------------------------------------------------------------------------------------- |
+| `ams-mb--xs` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-xs);" /> |
+| `ams-mb--sm` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-sm);" /> |
+| `ams-mb--md` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-md);" /> |
+| `ams-mb--lg` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-lg);" /> |
+| `ams-mb--xl` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-xl);" /> |
+
+## Guidelines
+
+- Use this utility class to vertically separate one element from the next.
+- It can be used on any element and sets the `margin-block-end` CSS property. This declaration is marked with the `!important` flag to ensure it overrides any other margins.
+- Elements’ top and bottom margins are sometimes collapsed into a single margin. Consult [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) for details.
+- To add equal margins between elements, either use the [Gap](/docs/utilities-css-gap--docs) utility class on their common parent or wrap them in a [Column](/docs/components-layout-column--docs) component.
+  This helps in loops: it prevents having to treat the last element differently.

package/src/components/margin/margin.scss

@@ -6,7 +6,9 @@
 @import "../../common/size";
 
 @each $size in map-keys($ams-sizes) {
-  .ams-mb--#{$size} {
-    margin-block-end: var(--ams-margin-#{$size}) !important;
+  @if $size != "no" {
+    .ams-mb--#{$size} {
+      margin-block-end: var(--ams-margin-#{$size}) !important;
+    }
   }
 }

package/src/components/page-heading/README.md

@@ -11,7 +11,7 @@ Use this component for a name, title, or motto.
 - Only use this component once per page, typically only on the homepage.
 - Avoid using it if you need to display long pieces of text; the text should be short and precise.
 
-## Relevant WCAG Requirements
+## Relevant WCAG requirements
 
 The page heading component is a variant of a heading level 1 with a distinct style.
 When using this component, ensure that the heading hierarchy of the page remains logical.

package/src/components/page-menu/README.md

@@ -13,8 +13,8 @@ A small set of links for use in the Header and Footer.
 - The ‘Menu’ button opens the Mega Menu.
 - On narrow screens, menu items other than ‘Search’ and ‘Menu’ move from the Page Menu to the Mega Menu.
 
-## Relevant WCAG Requirements
+## Relevant WCAG requirements
 
 - [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html)
 
-PageMenu is an interactive element, and the [general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.
+PageMenu is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply.

package/src/components/pagination/README.md

@@ -13,10 +13,10 @@ Pagination indicates the current page and allows users to navigate to other page
 - Place pagination below the overview list.
 - Pagination should not be displayed if there is only one 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 ##.”
+- Pagination can be combined with a count 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
+## Relevant WCAG rules
 
-Pagination is an interactive element, and the [general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.
+Pagination is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply.

package/src/components/pagination/pagination.scss

@@ -37,7 +37,7 @@
 
   cursor: pointer;
   display: flex;
-  gap: 0.5rem;
+  gap: var(--ams-pagination-button-gap);
   outline-offset: var(--ams-pagination-button-outline-offset);
   padding-inline: var(--ams-pagination-button-padding-inline);
   text-decoration-line: var(--ams-pagination-button-text-decoration-line);

package/src/components/paragraph/README.md

@@ -11,7 +11,7 @@ Represents a paragraph of running text, form instructions, and other standalone
 - Consider whether a paragraph with more than 7 sentences or 140 words would be clearer if you divide the text into two paragraphs.
   Texts with not overly long paragraphs are easier to understand, and grouping makes information quicker to locate.
 
-## Relevant WCAG Rules
+## Relevant WCAG rules
 
 - [WCAG 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): Blocks that look like a paragraph are also recognized by a computer as a paragraph.
 - [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): The contrast of black text on a white background is high enough.

package/src/components/radio/radio.scss

@@ -41,7 +41,7 @@
   font-family: var(--ams-radio-font-family);
   font-size: var(--ams-radio-font-size);
   font-weight: var(--ams-radio-font-weight);
-  gap: 0.5rem;
+  gap: var(--ams-radio-gap);
   line-height: var(--ams-radio-line-height);
   outline-offset: var(--ams-radio-outline-offset);
 

package/src/components/row/README.md

@@ -1,3 +1,5 @@
 <!-- @license CC0-1.0 -->
 
 # Row
+
+Stacks its children horizontally with gaps between them and offers alignment options.

package/src/components/row/row.scss

@@ -8,10 +8,53 @@
 .ams-row {
   display: flex;
   flex-direction: row;
+  gap: var(--ams-row-gap-md);
 }
 
 @each $size, $label in $ams-sizes {
-  .ams-row--#{$label} {
-    gap: var(--ams-row-gap-#{$size});
+  @if $size != "md" {
+    .ams-row--gap-#{$label} {
+      gap: var(--ams-row-gap-#{$size});
+    }
   }
 }
+
+.ams-row--wrap {
+  flex-wrap: wrap;
+}
+
+.ams-row--align-around {
+  justify-content: space-around;
+}
+
+.ams-row--align-between {
+  justify-content: space-between;
+}
+
+.ams-row--align-center {
+  justify-content: center;
+}
+
+.ams-row--align-end {
+  justify-content: flex-end;
+}
+
+.ams-row--align-evenly {
+  justify-content: space-evenly;
+}
+
+.ams-row--align-vertical-baseline {
+  align-items: baseline;
+}
+
+.ams-row--align-vertical-center {
+  align-items: center;
+}
+
+.ams-row--align-vertical-end {
+  align-items: flex-end;
+}
+
+.ams-row--align-vertical-start {
+  align-items: flex-start;
+}

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

@@ -32,4 +32,4 @@ These features can be disruptive for a user searching for part of a word, and `a
 - [WCAG 1.3.5](https://www.w3.org/TR/WCAG22/#identify-input-purpose): It is clear both to the user and programmatically what the purpose of a form field is.
 - [WCAG 2.4.6](https://www.w3.org/TR/WCAG22/#headings-and-labels): There is a label describing the purpose of the input.
 
-Search Field is an interactive element; therefore, [the general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.
+Search Field is an interactive element; therefore, [the general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply.

package/src/components/spotlight/README.md

@@ -8,7 +8,7 @@ Emphasizes a section on a page through a distinctive background colour.
 
 Refer to [this overview on Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) to determine whether you can use black or white text on the background colour of your choice.
 
-## Relevant WCAG Requirements
+## Relevant WCAG requirements
 
 - [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
 

package/src/components/switch/README.md

@@ -12,11 +12,11 @@ A switch applies to a page or the entire system, such as an on/off switch.
 - Use labels with a switch to make the action clear.
 - The action takes place immediately when the user operates the switch.
 
-## Relevant WCAG Requirements
+## Relevant WCAG requirements
 
 - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): it is both clear for a user and programmatically what the purpose of a form field is.
 
-The Switch is an interactive element; general requirements and guidelines for interactive elements apply [here](/docs/docs-design-guidelines-interactive-elements--docs).
+Switch is an interactive element; general requirements and guidelines for interactivity apply [here](/docs/docs-developer-guide-interactivity--docs).
 
 ## References
 

package/src/components/tabs/README.md

@@ -4,7 +4,7 @@
 
 Tabs are used to bundle related content in a compact overview within a page. Each tab has a short name, and these names indicate the relationship between the information displayed in each tab.
 
-## How to Use
+## How to use
 
 - The content of each tab is viewable independently, not in the context of one another.
 - The content within each tab should have a similar structure.

package/src/components/tabs/tabs.scss

@@ -10,6 +10,11 @@
   border: 0;
 }
 
+.ams-tabs {
+  display: grid;
+  gap: var(--ams-tabs-gap);
+}
+
 .ams-tabs__list {
   background-color: var(--ams-tabs-list-background-color);
   border-block-end: var(--ams-tabs-list-border-block-end);

package/src/components/top-task-link/top-task-link.scss

@@ -10,7 +10,7 @@
   break-inside: avoid;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--ams-top-task-link-gap);
   outline-offset: var(--ams-top-task-link-outline-offset);
   text-decoration: none;
 }

package/src/components/visually-hidden/README.md

@@ -4,5 +4,11 @@
 
 Hides content from sighted users but keeps it accessible to non-visual user agents, such as screen readers.
 
-Note: in most cases, visually available content should be accessible to non-visual user agents and vice versa.
-Elaborate instructions or guidance read only by non-visual user agents can do more harm than good.
+## Class name
+
+`ams-visually-hidden`
+
+## Guidelines
+
+- In most cases, visually available content should be accessible to non-visual user agents and vice versa.
+  Elaborate instructions or guidance read only by non-visual user agents can do more harm than good.

package/dist/form-field-character-counter/form-field-character-counter.css

@@ -1 +0,0 @@
-.ams-form-field-character-counter{color:var(--ams-form-field-character-counter-color);font-family:var(--ams-form-field-character-counter-font-family);font-size:var(--ams-form-field-character-counter-font-size);font-weight:var(--ams-form-field-character-counter-font-weight);line-height:var(--ams-form-field-character-counter-line-height);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-form-field-character-counter--error{color:var(--ams-form-field-character-counter-error-color)}/*# sourceMappingURL=form-field-character-counter.css.map */

package/dist/form-field-character-counter/form-field-character-counter.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/form-field-character-counter/form-field-character-counter.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAOA,kCACE,oDACA,gEACA,4DACA,gEACA,gECFA,kCACA,2BACA,8BACA,sBDIF,yCACE","file":"form-field-character-counter.css"}

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

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