@amsterdam/design-system-css 0.15.0 → 0.16.0

package/dist/page-footer/page-footer.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/components/page-footer/page-footer.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAcA,4BACE,mEAGF,uBACE,kDACA,aACA,eACA,wDACA,0DACA,4CAdA,gBACA,eAiBA,qCAVF,uBAWI,kEAGF,qCAdF,uBAeI,gEAIJ,4BACE,6CACA,yDACA,qDACA,yDACA,yDACA,+DACA,2EACA,qFACA,6ECxCA,kEACA,aACA,yBCEA,kCACA,2BACA,8BACA,sBFsCA,kCACE,mDACA","file":"page-footer.css"}

package/dist/page-header/page-header.css

@@ -0,0 +1 @@
+.ams-page-header{display:grid;font-family:var(--ams-page-header-font-family);padding-block:var(--ams-page-header-padding-block);padding-inline:var(--ams-page-header-padding-inline)}@media screen and (min-width: 36rem){.ams-page-header{padding-inline:var(--ams-page-header-medium-padding-inline)}}@media screen and (min-width: 68rem){.ams-page-header{padding-inline:var(--ams-page-header-wide-padding-inline)}}.ams-page-header__logo-link{align-items:center;align-self:start;column-gap:var(--ams-page-header-logo-link-column-gap);display:flex;grid-area:1/1;inline-size:fit-content;outline-offset:var(--ams-page-header-logo-link-outline-offset);text-decoration:none}.ams-page-header__logo-link--hidden{opacity:0%;user-select:none}.ams-page-header__logo-container{flex-shrink:0;inline-size:.75rem;overflow:hidden}@media screen and (min-width: 36rem){.ams-page-header__logo-container{inline-size:auto}}.ams-page-header__brand-name{color:var(--ams-page-header-brand-name-color);font-size:var(--ams-page-header-brand-name-font-size);font-weight:var(--ams-page-header-brand-name-font-weight);line-height:1.35;text-wrap:var(--ams-page-header-brand-name-text-wrap)}.ams-page-header__navigation{column-gap:var(--ams-page-header-navigation-column-gap);display:flex;flex-wrap:wrap;grid-area:1/1;pointer-events:none;row-gap:var(--ams-page-header-navigation-row-gap)}.ams-page-header__menu{align-items:center;column-gap:var(--ams-page-header-menu-column-gap);display:flex;flex-wrap:wrap;justify-content:flex-end;margin-inline-start:auto;pointer-events:auto;row-gap:var(--ams-page-header-menu-row-gap);list-style:none;margin-block:0;padding-inline-start:0}@media screen and not (min-width: 68rem){.ams-page-header__menu-item{display:none}}.ams-page-header__menu-item--fixed{display:revert}.ams-page-header__menu-link{display:inline-block;text-decoration-line:var(--ams-page-header-menu-link-text-decoration-line);text-decoration-thickness:var(--ams-page-header-menu-link-text-decoration-thickness);text-underline-offset:var(--ams-page-header-menu-link-text-underline-offset);color:var(--ams-page-header-menu-item-color);font-size:var(--ams-page-header-menu-item-font-size);font-weight:var(--ams-page-header-menu-item-font-weight);line-height:var(--ams-page-header-menu-item-line-height);outline-offset:var(--ams-page-header-menu-item-outline-offset);padding-block:var(--ams-page-header-menu-item-padding-block);touch-action:manipulation;white-space:nowrap;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-page-header__menu-link:hover{color:var(--ams-page-header-menu-item-hover-color)}.ams-page-header__menu-link:hover{text-decoration-line:var(--ams-page-header-menu-link-hover-text-decoration-line)}@media screen and (min-width: 68rem){.ams-page-header__mega-menu-button-item--hide-on-wide-window{display:none}}.ams-page-header__mega-menu-button{column-gap:var(--ams-page-header-menu-item-column-gap);cursor:var(--ams-page-header-mega-menu-button-cursor);display:grid;font-family:inherit;grid-auto-flow:column;color:var(--ams-page-header-menu-item-color);font-size:var(--ams-page-header-menu-item-font-size);font-weight:var(--ams-page-header-menu-item-font-weight);line-height:var(--ams-page-header-menu-item-line-height);outline-offset:var(--ams-page-header-menu-item-outline-offset);padding-block:var(--ams-page-header-menu-item-padding-block);touch-action:manipulation;white-space:nowrap;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;background:none;border:none;margin-block:0;margin-inline:0;padding-inline:0}.ams-page-header__mega-menu-button:hover{color:var(--ams-page-header-menu-item-hover-color)}.ams-page-header__mega-menu-button[aria-expanded=true]{font-weight:var(--ams-page-header-mega-menu-button-label-open-font-weight)}.ams-page-header__mega-menu-button-label,.ams-page-header__mega-menu-button-hidden-label{grid-area:1/1}.ams-page-header__mega-menu-button-hidden-label{font-weight:var(--ams-page-header-mega-menu-button-label-open-font-weight);pointer-events:none;user-select:none;visibility:hidden}.ams-page-header__menu-icon line{stroke:currentColor;stroke-width:3px;transform-origin:center;transition:translate .1s ease-in-out,rotate .2s ease-in-out,opacity .1s ease-in-out}@media(prefers-reduced-motion){.ams-page-header__menu-icon line{transition:none}}.ams-page-header__menu-icon .ams-page-header__menu-icon-top{translate:0 -7px}.ams-page-header__menu-icon .ams-page-header__menu-icon-bottom{translate:0 7px}.ams-page-header__menu-icon--open .ams-page-header__menu-icon-top{rotate:45deg;translate:0}.ams-page-header__menu-icon--open .ams-page-header__menu-icon-middle{opacity:0%}.ams-page-header__menu-icon--open .ams-page-header__menu-icon-bottom{rotate:-45deg;translate:0}.ams-page-header__mega-menu{inline-size:100%;pointer-events:auto}.ams-page-header__mega-menu .ams-grid{padding-inline:0}.ams-page-header__mega-menu--closed.ams-page-header__mega-menu--closed{display:none}@media screen and (min-width: 68rem){.ams-page-header__grid-cell-narrow-window-only{display:none}}/*# sourceMappingURL=page-header.css.map */

package/dist/page-header/page-header.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/components/page-header/page-header.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAQA,iBAME,aACA,+CACA,mDACA,qDAEA,qCAXF,iBAYI,6DAGF,qCAfF,iBAgBI,2DAIJ,4BACE,mBACA,iBACA,uDACA,aACA,cACA,wBACA,+DACA,qBAGF,oCACE,WACA,iBAGF,iCACE,cACA,mBACA,gBAEA,qCALF,iCAMI,kBAIJ,6BACE,8CACA,sDACA,0DACA,iBACA,sDAGF,6BACE,wDACA,aACA,eACA,cAGA,oBACA,kDASF,uBACE,mBACA,kDACA,aACA,eACA,yBACA,yBACA,oBACA,4CAbA,gBACA,eACA,uBAkBA,yCADF,4BAEI,cAKJ,mCACE,eAoBF,4BACE,qBACA,2EACA,qFACA,6EApBA,6CACA,qDACA,yDACA,yDACA,+DACA,6DACA,0BACA,mBCtGA,kCACA,2BACA,8BACA,sBDuGA,kCACE,mDAYF,kCACE,iFAKF,qCADF,6DAEI,cAcJ,mCACE,uDACA,sDACA,aACA,oBACA,sBAlDA,6CACA,qDACA,yDACA,yDACA,+DACA,6DACA,0BACA,mBCtGA,kCACA,2BACA,8BACA,sBDgIA,gBACA,YACA,eACA,gBACA,iBA7BA,yCACE,mDA4CJ,uDACE,2EAGF,yFAEE,cAKF,gDACE,2EACA,oBACA,iBACA,kBAIA,iCACE,oBACA,iBACA,wBACA,WACE,yEAIF,+BATF,iCAUI,iBAIJ,4DACE,iBAGF,+DACE,gBAKF,kEACE,aACA,YAEF,qEACE,WAEF,qEACE,cACA,YAIJ,4BACE,iBACA,oBAIA,sCACE,iBAIJ,uEACE,aAIA,qCADF,+CAEI","file":"page-header.css"}

package/dist/page-heading/page-heading.css

@@ -1 +1 @@
-.ams-page-heading{box-sizing:border-box;break-after:avoid;break-inside:avoid;color:var(--ams-page-heading-color);font-family:var(--ams-page-heading-font-family);font-size:var(--ams-page-heading-font-size);font-weight:var(--ams-page-heading-font-weight);line-height:var(--ams-page-heading-line-height);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;margin-block:0}.ams-page-heading--inverse{color:var(--ams-page-heading-inverse-color)}/*# sourceMappingURL=page-heading.css.map */
+.ams-page-heading{box-sizing:border-box;break-after:avoid;break-inside:avoid;color:var(--ams-page-heading-color);font-family:var(--ams-page-heading-font-family);font-size:var(--ams-page-heading-font-size);font-weight:var(--ams-page-heading-font-weight);line-height:var(--ams-page-heading-line-height);text-wrap:var(--ams-page-heading-text-wrap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;margin-block:0}.ams-page-heading--inverse{color:var(--ams-page-heading-inverse-color)}/*# sourceMappingURL=page-heading.css.map */

package/dist/page-heading/page-heading.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/page-heading/page-heading.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAYA,kBACE,sBACA,kBACA,mBACA,oCACA,gDACA,4CACA,gDACA,gDCdA,kEACA,aACA,yBCEA,kCACA,2BACA,8BACA,sBFJA,eAkBF,2BACE","file":"page-heading.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/page-heading/page-heading.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAYA,kBACE,sBACA,kBACA,mBACA,oCACA,gDACA,4CACA,gDACA,gDACA,4CCfA,kEACA,aACA,yBCEA,kCACA,2BACA,8BACA,sBFJA,eAmBF,2BACE","file":"page-heading.css"}

package/dist/standalone-link/standalone-link.css

@@ -0,0 +1 @@
+.ams-standalone-link{color:var(--ams-standalone-link-color);column-gap:var(--ams-standalone-link-column-gap);display:inline-flex;font-family:var(--ams-standalone-link-font-family);font-size:var(--ams-standalone-link-font-size);font-weight:var(--ams-standalone-link-font-weight);line-height:var(--ams-standalone-link-line-height);outline-offset:var(--ams-standalone-link-outline-offset);text-decoration-thickness:var(--ams-standalone-link-text-decoration-thickness);text-underline-offset:var(--ams-standalone-link-text-underline-offset);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-standalone-link:hover{color:var(--ams-standalone-link-hover-color);text-decoration-thickness:var(--ams-standalone-link-hover-text-decoration-thickness);text-underline-offset:var(--ams-standalone-link-hover-text-underline-offset)}.ams-standalone-link--contrast{color:var(--ams-standalone-link-contrast-color)}.ams-standalone-link--contrast:hover{color:var(--ams-standalone-link-contrast-hover-color)}.ams-standalone-link--inverse{color:var(--ams-standalone-link-inverse-color)}.ams-standalone-link--inverse:hover{color:var(--ams-standalone-link-inverse-hover-color)}.ams-standalone-link--with-icon{text-decoration-line:var(--ams-standalone-link-with-icon-text-decoration-line)}.ams-standalone-link--with-icon:hover{text-decoration-line:var(--ams-standalone-link-with-icon-hover-text-decoration-line)}/*# sourceMappingURL=standalone-link.css.map */

package/dist/standalone-link/standalone-link.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/components/standalone-link/standalone-link.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAQA,qBACE,uCACA,iDACA,oBACA,mDACA,+CACA,mDACA,mDACA,yDACA,+EACA,uECZA,kEACA,aACA,yBCEA,kCACA,2BACA,8BACA,sBFUA,2BACE,6CACA,qFACA,6EAIJ,+BACE,gDAEA,qCACE,sDAIJ,8BACE,+CAEA,oCACE,qDAIJ,gCACE,+EAEA,sCACE","file":"standalone-link.css"}

package/dist/visually-hidden/visually-hidden.css

@@ -1 +1 @@
-.ams-visually-hidden:not(:active,:focus){block-size:1px;clip:rect(0 0 0 0);clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;white-space:nowrap}/*# sourceMappingURL=visually-hidden.css.map */
+.ams-visually-hidden:not(:active,:focus){block-size:1px;clip:rect(0 0 0 0);clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;user-select:none;white-space:nowrap}/*# sourceMappingURL=visually-hidden.css.map */

package/dist/visually-hidden/visually-hidden.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAMA,yCACE,eACA,mBACA,qBACA,gBACA,gBACA,kBACA","file":"visually-hidden.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAMA,yCACE,eACA,mBACA,qBACA,gBACA,gBACA,kBACA,iBACA","file":"visually-hidden.css"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.15.0",
+  "version": "0.16.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.",
   "homepage": "https://designsystem.amsterdam",
@@ -19,10 +19,10 @@
     "directory": "packages/css"
   },
   "devDependencies": {
-    "sass": "1.86.0"
+    "sass": "1.86.3"
   },
   "peerDependencies": {
-    "@amsterdam/design-system-tokens": "0.15.0",
+    "@amsterdam/design-system-tokens": "0.16.0",
     "@amsterdam/design-system-assets": "0.3.0"
   },
   "scripts": {

package/src/components/accordion/accordion.scss

@@ -44,6 +44,7 @@
   padding-block: var(--ams-accordion-button-padding-block);
   padding-inline: var(--ams-accordion-button-padding-inline);
   text-align: start;
+  text-wrap: var(--ams-accordion-button-text-wrap);
 
   @include reset-button;
 

package/src/components/alert/README.md

@@ -16,7 +16,7 @@ An Alert informs the user of a significant or time-sensitive message without int
   - **Error** indicates an error has occurred.
     This variation is red.
 - Place the Alert in a Grid Cell to create enough white space around it.
-- Important and urgent information is to be placed directly below the Header.
+- Important and urgent information is to be placed directly below the Page Header.
   Examples: system outage or changes in the opening hours of a City Office.
   This can be applied to the entire application or to a part of it.
 - Add a close button if the user should be able to dismiss the Alert.

package/src/components/breakout/breakout.scss

@@ -19,52 +19,52 @@ $ams-breakout-row-span-max: 4;
   @include ams-grid--gap-vertical--none;
 }
 
-.ams-breakout--gap-vertical--small {
-  @include ams-grid--gap-vertical--small;
-}
-
 .ams-breakout--gap-vertical--large {
   @include ams-grid--gap-vertical--large;
 }
 
-// Grid padding
-
-.ams-breakout--padding-bottom--small {
-  @include ams-grid--padding-bottom--small;
+.ams-breakout--gap-vertical--2x-large {
+  @include ams-grid--gap-vertical--2x-large;
 }
 
-.ams-breakout--padding-bottom--medium {
-  @include ams-grid--padding-bottom--medium;
-}
+// Grid padding
 
 .ams-breakout--padding-bottom--large {
   @include ams-grid--padding-bottom--large;
 }
 
-.ams-breakout--padding-top--small {
-  @include ams-grid--padding-top--small;
+.ams-breakout--padding-bottom--x-large {
+  @include ams-grid--padding-bottom--x-large;
 }
 
-.ams-breakout--padding-top--medium {
-  @include ams-grid--padding-top--medium;
+.ams-breakout--padding-bottom--2x-large {
+  @include ams-grid--padding-bottom--2x-large;
 }
 
 .ams-breakout--padding-top--large {
   @include ams-grid--padding-top--large;
 }
 
-.ams-breakout--padding-vertical--small {
-  @include ams-grid--padding-vertical--small;
+.ams-breakout--padding-top--x-large {
+  @include ams-grid--padding-top--x-large;
 }
 
-.ams-breakout--padding-vertical--medium {
-  @include ams-grid--padding-vertical--medium;
+.ams-breakout--padding-top--2x-large {
+  @include ams-grid--padding-top--2x-large;
 }
 
 .ams-breakout--padding-vertical--large {
   @include ams-grid--padding-vertical--large;
 }
 
+.ams-breakout--padding-vertical--x-large {
+  @include ams-grid--padding-vertical--x-large;
+}
+
+.ams-breakout--padding-vertical--2x-large {
+  @include ams-grid--padding-vertical--2x-large;
+}
+
 // Column span
 // The order of these declaration blocks ensures the intended specificity.
 

package/src/components/card/README.md

@@ -2,27 +2,28 @@
 
 # Card
 
-Use a card on an overview page to link to an article page, such as a news article, a job vacancy, or a search result.
-The card typically includes the title, introduction, and an image of the content.
-The link is mandatory.
+A brief section of a heading, some text, and optionally an image, that leads to a related page.
 
 ## Guidelines
 
-- The title of a card is a link within a heading.
-  The same guidelines as for regular [links](/docs/components-navigation-link--docs) and [headings](/docs/components-text-heading--docs) apply here.
-  The link is active across the entire area of the card.
+- The mandatory title of a card is a link within a Heading.
+  The guidelines for regular [links](/docs/components-navigation-link--docs) and [headings](/docs/components-text-heading--docs) apply.
+  The link is made active across the entire area of the card.
 - A card needs more content than just a title.
-  Supplement this with textual and/or visual content.
-- Place the text in a regular paragraph.
-  Only use the smallest text size for a tagline or date.
-- This component may not be the best option if the content does not represent a detailed page.
-  For referencing a thematic page, use a [top task link](/docs/components-navigation-top-task-link--docs).
-  You can also use a [regular link](/docs/components-navigation-link--docs).
+  Add a short text and optionally an image and metadata.
+- Use the Card Heading, Card Heading Group and Card Image subcomponents.
+  They apply the correct spacing.
+- Card Heading requires a `level`, because there is no sensible default.
+  Its visual size of `heading-4` can be overridden.
+- Place the text in a regular [Paragraph](/docs/components-text-paragraph--docs).
+  Use a small Paragraph for a publication date.
+- This component is not the best option if the target content does not represent an article-like page.
+  In that case, use a Heading, a Paragraph and a [Standalone Link](/docs/components-navigation-standalone-link--docs) instead.
 
 ### Screen readers
 
-With a screen reader, you can navigate using headings and links in a document.
-The title of a card is a link within a heading, allowing you to utilize both navigation methods.
+Screen reader users may navigate a page using headings and links.
+A Card works well in both approaches as its title carries a link.
 A screen reader reads the title first, followed by the rest of the content.
 
 ### Using links with routing libraries

package/src/components/card/card.scss

@@ -5,7 +5,6 @@
 
 .ams-card {
   display: grid;
-  gap: var(--ams-card-gap);
   outline-offset: var(--ams-card-outline-offset);
   position: relative; // Allows stretching the card link below.
   touch-action: manipulation;
@@ -16,12 +15,21 @@
     outline-style: auto;
     outline-width: 0.0625rem;
   }
+
+  > .ams-card__heading:has(+ *) {
+    margin-block-end: var(--ams-card-heading-margin-block-end);
+  }
+
+  > .ams-card__image:has(+ *) {
+    margin-block-end: var(--ams-card-image-margin-block-end);
+  }
 }
 
 .ams-card__heading-group {
   display: flex;
   flex-direction: column-reverse;
   gap: var(--ams-card-heading-group-gap);
+  margin-block-end: var(--ams-card-heading-group-margin-block-end);
 }
 
 .ams-card__link {

package/src/components/dialog/README.md

@@ -2,7 +2,7 @@
 
 # Dialog
 
-A Dialog allows the user to focus on one task or a piece of information by popping up and blocking the page content until the modal task is completed or until the user dismisses the action.
+A popup window in which the user must perform an action to proceed.
 
 ## Guidelines
 
@@ -10,6 +10,8 @@ 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.
 - Wrap multiple buttons in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs).
+- To open the Dialog, use `Dialog.open(dialogId)` from the React package.
+- To close it, either call the `Dialog.close` function or add a `<form>` as in the ‘confirmation’ example.
 
 ## Keyboard support
 
@@ -19,10 +21,6 @@ A Dialog allows the user to focus on one task or a piece of information by poppi
 | Shift + Tab | Moves focus to the previous focusable element inside the dialog. |
 | Escape      | Closes the dialog.                                               |
 
-## Closing Dialog without submit
-
-You can close a Dialog without submitting by using `<button type="button" onClick={Dialog.close}>`.
-
 ## References
 
 - [HTMLDialogElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement)

package/src/components/dialog/dialog.scss

@@ -3,6 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/breakpoint" as *;
+
 @mixin reset-dialog {
   inset-block: 0;
   padding-block: 0;
@@ -24,6 +26,11 @@ so do not apply these styles without an `open` attribute. */
 
   @include reset-dialog;
 
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    inline-size: var(--ams-dialog-medium-inline-size);
+    max-block-size: var(--ams-dialog-medium-max-block-size);
+  }
+
   /*
    * The fallback value is for browsers where ::backdrop does not inherit from its originating element.
    * @see https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element
@@ -40,6 +47,11 @@ so do not apply these styles without an `open` attribute. */
   justify-content: space-between;
   padding-block: var(--ams-dialog-header-padding-block);
   padding-inline: var(--ams-dialog-header-padding-inline);
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    padding-block: var(--ams-dialog-header-medium-padding-block);
+    padding-inline: var(--ams-dialog-header-medium-padding-inline);
+  }
 }
 
 .ams-dialog__body {
@@ -47,9 +59,18 @@ so do not apply these styles without an `open` attribute. */
   overscroll-behavior-y: contain;
   padding-block: var(--ams-dialog-body-padding-block);
   padding-inline: var(--ams-dialog-body-padding-inline);
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    padding-inline: var(--ams-dialog-body-medium-padding-inline);
+  }
 }
 
 .ams-dialog__footer {
   padding-block: var(--ams-dialog-footer-padding-block);
   padding-inline: var(--ams-dialog-footer-padding-inline);
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    padding-block: var(--ams-dialog-footer-medium-padding-block);
+    padding-inline: var(--ams-dialog-footer-medium-padding-inline);
+  }
 }

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

@@ -30,23 +30,24 @@
   padding-inline: 0;
 
   + * {
-    clear: both; // Reset the applied float for the legend’s first sibling
+    clear: both; // [2]
   }
 }
 
-// [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 */
+  margin-block-end: var(--ams-field-set-legend-margin-block-end); // [3]
+  text-wrap: var(--ams-field-set-legend-text-wrap);
 
   @include hyphenation;
   @include text-rendering;
   @include reset-legend;
 }
+
+// [1] This combination allows the fieldset border to go around the legend, instead of through it.
+// [2] Reset the applied float for the legend’s first sibling.
+// [3] We can’t use grid or flex display and a gap because of a bug in Chrome.

package/src/components/grid/README.md

@@ -6,14 +6,15 @@ Divides the screen into columns to align the elements of a page.
 
 ## Guidelines
 
-- Every page should use the grid as the foundation for its layout.
-  It is placed directly within the [Screen](/docs/components-layout-screen--docs).
-- A [Footer](/docs/components-containers-footer--docs) and a [Spotlight](/docs/components-containers-spotlight--docs) are slightly wider than the grid.
-  You close one instance of the grid before these components.
-  Inside and optionally after them, you start a new one.
-  Multiple instances of the grid component are possible on a page, but the columns of all grids must align precisely.
-- Within the grid, you create cells containing the desired content.
-  A cell often spans multiple columns of the grid.
+- Every page uses the Grid component as the foundation for its layout.
+  It is a direct child of the [Page](/docs/components-containers-page--docs) container.
+- The Grid provides 4, 8, or 12 columns, depending on the width of the window.
+- Its children are `Grid.Cell` components that define how many columns they span, and optionally where they start.
+  Both its `span` and `start` properties accept a single value, or separate values for the narrow, medium and wide variations of the Grid.
+- A single page can have several Grids.
+  This allows mixing a Grid with a [Spotlight](/docs/components-containers-spotlight--docs), [Breakout](/docs/components-layout-breakout--docs) or full width [Image](/docs/components-media-image--docs) which ‘bleed out’ of the main layout.
+- Grids must not be nested.
+  The component is currently intended for the full width of the page only.
 - The Gap utility classes must not be used on the Grid component.
 
 ## Design

package/src/components/grid/_mixins.scss

@@ -1,16 +1,16 @@
-@use "../../common/breakpoint" as *;
-
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/breakpoint" as *;
+
 @mixin ams-grid {
   column-gap: var(--ams-grid-column-gap);
   display: grid;
   grid-template-columns: repeat(var(--ams-grid-column-count), 1fr);
   padding-inline: var(--ams-grid-padding-inline);
-  row-gap: var(--ams-grid-row-gap-m);
+  row-gap: var(--ams-grid-row-gap-xl);
 
   @media screen and (min-width: $ams-breakpoint-medium) {
     grid-template-columns: repeat(var(--ams-grid-medium-column-count), 1fr);
@@ -29,52 +29,52 @@
   row-gap: initial;
 }
 
-@mixin ams-grid--gap-vertical--small {
-  row-gap: var(--ams-grid-row-gap-s);
-}
-
 @mixin ams-grid--gap-vertical--large {
   row-gap: var(--ams-grid-row-gap-l);
 }
 
-// Grid padding
-
-@mixin ams-grid--padding-bottom--small {
-  padding-block-end: var(--ams-grid-padding-block-s);
+@mixin ams-grid--gap-vertical--2x-large {
+  row-gap: var(--ams-grid-row-gap-2xl);
 }
 
-@mixin ams-grid--padding-bottom--medium {
-  padding-block-end: var(--ams-grid-padding-block-m);
-}
+// Grid padding
 
 @mixin ams-grid--padding-bottom--large {
   padding-block-end: var(--ams-grid-padding-block-l);
 }
 
-@mixin ams-grid--padding-top--small {
-  padding-block-start: var(--ams-grid-padding-block-s);
+@mixin ams-grid--padding-bottom--x-large {
+  padding-block-end: var(--ams-grid-padding-block-xl);
 }
 
-@mixin ams-grid--padding-top--medium {
-  padding-block-start: var(--ams-grid-padding-block-m);
+@mixin ams-grid--padding-bottom--2x-large {
+  padding-block-end: var(--ams-grid-padding-block-2xl);
 }
 
 @mixin ams-grid--padding-top--large {
   padding-block-start: var(--ams-grid-padding-block-l);
 }
 
-@mixin ams-grid--padding-vertical--small {
-  padding-block: var(--ams-grid-padding-block-s);
+@mixin ams-grid--padding-top--x-large {
+  padding-block-start: var(--ams-grid-padding-block-xl);
 }
 
-@mixin ams-grid--padding-vertical--medium {
-  padding-block: var(--ams-grid-padding-block-m);
+@mixin ams-grid--padding-top--2x-large {
+  padding-block-start: var(--ams-grid-padding-block-2xl);
 }
 
 @mixin ams-grid--padding-vertical--large {
   padding-block: var(--ams-grid-padding-block-l);
 }
 
+@mixin ams-grid--padding-vertical--x-large {
+  padding-block: var(--ams-grid-padding-block-xl);
+}
+
+@mixin ams-grid--padding-vertical--2x-large {
+  padding-block: var(--ams-grid-padding-block-2xl);
+}
+
 @mixin ams-grid__cell--span-all {
   grid-column: 1 / -1;
 }

package/src/components/grid/grid.scss

@@ -18,52 +18,52 @@ $ams-grid-column-count: 12;
   @include ams-grid--gap-vertical--none;
 }
 
-.ams-grid--gap-vertical--small {
-  @include ams-grid--gap-vertical--small;
-}
-
 .ams-grid--gap-vertical--large {
   @include ams-grid--gap-vertical--large;
 }
 
-// Grid padding
-
-.ams-grid--padding-bottom--small {
-  @include ams-grid--padding-bottom--small;
+.ams-grid--gap-vertical--2x-large {
+  @include ams-grid--gap-vertical--2x-large;
 }
 
-.ams-grid--padding-bottom--medium {
-  @include ams-grid--padding-bottom--medium;
-}
+// Grid padding
 
 .ams-grid--padding-bottom--large {
   @include ams-grid--padding-bottom--large;
 }
 
-.ams-grid--padding-top--small {
-  @include ams-grid--padding-top--small;
+.ams-grid--padding-bottom--x-large {
+  @include ams-grid--padding-bottom--x-large;
 }
 
-.ams-grid--padding-top--medium {
-  @include ams-grid--padding-top--medium;
+.ams-grid--padding-bottom--2x-large {
+  @include ams-grid--padding-bottom--2x-large;
 }
 
 .ams-grid--padding-top--large {
   @include ams-grid--padding-top--large;
 }
 
-.ams-grid--padding-vertical--small {
-  @include ams-grid--padding-vertical--small;
+.ams-grid--padding-top--x-large {
+  @include ams-grid--padding-top--x-large;
 }
 
-.ams-grid--padding-vertical--medium {
-  @include ams-grid--padding-vertical--medium;
+.ams-grid--padding-top--2x-large {
+  @include ams-grid--padding-top--2x-large;
 }
 
 .ams-grid--padding-vertical--large {
   @include ams-grid--padding-vertical--large;
 }
 
+.ams-grid--padding-vertical--x-large {
+  @include ams-grid--padding-vertical--x-large;
+}
+
+.ams-grid--padding-vertical--2x-large {
+  @include ams-grid--padding-vertical--2x-large;
+}
+
 // Column span
 // The order of these declaration blocks ensures the intended specificity.
 

package/src/components/heading/heading.scss

@@ -17,6 +17,7 @@
   color: var(--ams-heading-color);
   font-family: var(--ams-heading-font-family);
   font-weight: var(--ams-heading-font-weight);
+  text-wrap: var(--ams-heading-text-wrap);
 
   @include hyphenation;
   @include text-rendering;

package/src/components/icon/icon.scss

@@ -6,8 +6,9 @@
 .ams-icon {
   --ams-line-height: var(--ams-icon-line-height);
 
+  align-items: center;
   align-self: baseline; // Aligns the icon with text in flex or grid context
-  display: inline-flex; // Stretches the svg in order to align the icon vertically
+  display: inline-flex;
   font-size: var(--ams-icon-font-size);
   line-height: var(--ams-line-height);
 

package/src/components/image-slider/README.md

@@ -19,7 +19,7 @@ The images do not slide automatically.
 - Feature the most essential image first.
 - Assume that some or many users will not navigate between the slides and only see the first image.
   Display all images separately if you want each of them to receive attention.
-- A full-width Image Slider should run from one edge of the Screen to the other;
+- A full-width Image Slider should run from one edge of the [Page](/docs/components-containers-page--docs) container to the other;
   position it next to a Grid, not in a Cell spanning all columns.
   Smaller sliders are fine in a Grid Cell.
 - Consult the [Image](/docs/components-media-image--docs) docs for guidelines on the individual images.

package/src/components/index.scss

@@ -28,10 +28,8 @@
 @use "figure/figure";
 @use "file-input/file-input";
 @use "file-list/file-list";
-@use "footer/footer";
 @use "gap/gap";
 @use "grid/grid";
-@use "header/header";
 @use "heading/heading";
 @use "hint/hint";
 @use "icon-button/icon-button";
@@ -45,21 +43,22 @@
 @use "logo/logo";
 @use "margin/margin";
 @use "mark/mark";
-@use "mega-menu/mega-menu";
 @use "ordered-list/ordered-list";
 @use "overlap/overlap";
+@use "page/page";
+@use "page-footer/page-footer";
+@use "page-header/page-header";
 @use "page-heading/page-heading";
-@use "page-menu/page-menu";
 @use "pagination/pagination";
 @use "paragraph/paragraph";
 @use "password-input/password-input";
 @use "radio/radio";
 @use "row/row";
-@use "screen/screen";
 @use "search-field/search-field";
 @use "select/select";
 @use "skip-link/skip-link";
 @use "spotlight/spotlight";
+@use "standalone-link/standalone-link";
 @use "switch/switch";
 @use "table-of-contents/table-of-contents";
 @use "table/table";
@@ -67,6 +66,5 @@
 @use "text-area/text-area";
 @use "text-input/text-input";
 @use "time-input/time-input";
-@use "top-task-link/top-task-link";
 @use "unordered-list/unordered-list";
 @use "visually-hidden/visually-hidden";

package/src/components/label/label.scss

@@ -12,6 +12,7 @@
   font-size: var(--ams-label-font-size);
   font-weight: var(--ams-label-font-weight);
   line-height: var(--ams-label-line-height);
+  text-wrap: var(--ams-label-text-wrap);
 
   @include hyphenation;
   @include text-rendering;