@amsterdam/design-system-css 0.15.0 → 1.0.0

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/checkbox/checkbox.scss

@@ -13,27 +13,7 @@
   @include input-label-focus;
 }
 
-.ams-checkbox__checkmark {
-  align-items: center;
-  block-size: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
-  display: flex;
-  flex-shrink: 0;
-  inline-size: 1.5rem;
-
-  &::after {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 1rem;
-    block-size: 1.5rem;
-    border-color: var(--ams-checkbox-checkmark-border-color);
-    border-style: solid;
-    border-width: var(--ams-checkbox-checkmark-border-width);
-    box-sizing: border-box;
-    content: "";
-    inline-size: 100%;
-  }
-}
-
+// Default
 .ams-checkbox__label {
   color: var(--ams-checkbox-color);
   cursor: var(--ams-checkbox-cursor);
@@ -47,166 +27,290 @@
 
   @include hyphenation;
   @include text-rendering;
+}
 
-  &:hover {
-    color: var(--ams-checkbox-hover-color);
-    text-decoration-line: underline;
-    text-decoration-thickness: var(--ams-checkbox-hover-text-decoration-thickness);
-    text-underline-offset: 0.375rem;
+.ams-checkbox__icon-container {
+  block-size: var(--ams-checkbox-icon-container-block-size);
+  display: flex;
+  flex: none;
+  inline-size: var(--ams-checkbox-icon-container-inline-size);
+}
 
-    .ams-checkbox__checkmark::after {
-      border-color: var(--ams-checkbox-checkmark-hover-border-color);
-      border-width: var(--ams-checkbox-checkmark-hover-border-width);
-    }
+.ams-checkbox__rectangle {
+  fill: var(--ams-checkbox-rectangle-fill);
+  stroke: var(--ams-checkbox-rectangle-stroke);
+}
+
+.ams-checkbox__hover-indicator {
+  stroke: none;
+}
+
+.ams-checkbox__checked-indicator {
+  display: none;
+  stroke: var(--ams-checkbox-checked-indicator-stroke);
+}
+
+.ams-checkbox__indeterminate-indicator {
+  display: none;
+  stroke: var(--ams-checkbox-indeterminate-indicator-stroke);
+}
+
+// Default hover
+.ams-checkbox__label:hover {
+  color: var(--ams-checkbox-hover-color);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--ams-checkbox-hover-text-decoration-thickness);
+  text-underline-offset: 0.375rem;
+
+  .ams-checkbox__rectangle {
+    stroke: var(--ams-checkbox-rectangle-hover-stroke);
+  }
+
+  .ams-checkbox__hover-indicator {
+    stroke: var(--ams-checkbox-hover-indicator-hover-stroke);
   }
 }
 
-// Default checked
-.ams-checkbox__input:checked {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    background-color: var(--ams-checkbox-checkmark-checked-background-color);
-    background-image: var(--ams-checkbox-checkmark-checked-background-image);
-    border: none;
+// Invalid
+.ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    stroke: var(--ams-checkbox-rectangle-invalid-stroke);
   }
 }
 
-// Default indeterminate
-.ams-checkbox__input:indeterminate {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    background-color: var(--ams-checkbox-checkmark-indeterminate-background-color);
-    background-image: var(--ams-checkbox-checkmark-indeterminate-background-image);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 1rem;
-    border: none;
+// Indeterminate
+.ams-checkbox__input:indeterminate + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-fill);
+  }
+
+  .ams-checkbox__indeterminate-indicator {
+    display: block;
   }
 }
 
-// Invalid unchecked
-.ams-checkbox__input:invalid,
-.ams-checkbox__input[aria-invalid="true"] {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    border-color: var(--ams-checkbox-checkmark-invalid-border-color);
+// Disabled
+.ams-checkbox__input:disabled + .ams-checkbox__label {
+  color: var(--ams-checkbox-disabled-color);
+  cursor: var(--ams-checkbox-disabled-cursor);
+
+  .ams-checkbox__rectangle {
+    stroke: var(--ams-checkbox-rectangle-disabled-stroke);
+  }
+
+  .ams-checkbox__hover-indicator {
+    stroke: none;
   }
 }
 
-// Disabled unchecked
-.ams-checkbox__input:disabled {
-  + .ams-checkbox__label {
-    color: var(--ams-checkbox-disabled-color);
-    cursor: var(--ams-checkbox-disabled-cursor);
+// Checked
+.ams-checkbox__input:checked:not(:indeterminate) + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-fill);
+  }
 
-    .ams-checkbox__checkmark::after {
-      border-color: var(--ams-checkbox-checkmark-disabled-border-color);
-      border-width: var(--ams-checkbox-checkmark-disabled-border-width);
-    }
+  .ams-checkbox__checked-indicator {
+    display: block;
   }
 }
 
 // Invalid checked
-.ams-checkbox__input:invalid:checked,
-.ams-checkbox__input[aria-invalid="true"]:checked {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    background-color: var(--ams-checkbox-checkmark-invalid-checked-background-color);
+.ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-invalid-fill);
   }
 }
 
 // Invalid indeterminate
-.ams-checkbox__input:invalid:indeterminate,
-.ams-checkbox__input[aria-invalid="true"]:indeterminate {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    background-color: var(--ams-checkbox-checkmark-invalid-indeterminate-background-color);
+.ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-invalid-fill);
   }
 }
 
-// Disabled label
-.ams-checkbox__input:disabled + .ams-checkbox__label:hover {
-  text-decoration: none;
-}
-
 // Disabled checked
-.ams-checkbox__input:disabled:checked {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    background-color: var(--ams-checkbox-checkmark-disabled-checked-background-color);
+.ams-checkbox__input:disabled:checked + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-disabled-fill);
   }
 }
 
 // Disabled indeterminate
-.ams-checkbox__input:disabled:indeterminate {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    background-color: var(--ams-checkbox-checkmark-disabled-indeterminate-background-color);
+.ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-disabled-fill);
   }
 }
 
-// Disabled invalid unchecked
-.ams-checkbox__input:invalid:disabled,
-.ams-checkbox__input[aria-invalid="true"]:disabled {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    border-color: var(--ams-checkbox-checkmark-disabled-border-color);
+// HOVER
+
+// Checked hover
+.ams-checkbox__input:checked + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-hover-fill);
   }
 }
 
-// HOVER STATES
+// Indeterminate hover
+.ams-checkbox__input:indeterminate + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-hover-fill);
+  }
+}
 
-// Invalid unchecked hover
-:is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid="true"])
-  + .ams-checkbox__label:hover
-  .ams-checkbox__checkmark::after {
-  border-color: var(--ams-checkbox-checkmark-invalid-hover-border-color);
+// Invalid hover
+.ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    stroke: var(--ams-checkbox-rectangle-invalid-hover-stroke);
+  }
+
+  .ams-checkbox__hover-indicator {
+    stroke: var(--ams-checkbox-hover-indicator-invalid-hover-stroke);
+  }
 }
 
-// Default checked hover
-.ams-checkbox__input:checked + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
-  background-color: var(--ams-checkbox-checkmark-checked-hover-background-color);
+// Disabled invalid hover
+.ams-checkbox__input[aria-invalid="true"]:disabled + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    stroke: var(--ams-checkbox-rectangle-hover-disabled-invalid-stroke);
+  }
 }
 
-// Default indeterminate hover
-.ams-checkbox__input:indeterminate + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
-  background-color: var(--ams-checkbox-checkmark-indeterminate-hover-background-color);
+// Disabled checked hover
+.ams-checkbox__input:disabled:checked + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-disabled-hover-fill);
+  }
+}
+
+// Disabled indeterminate hover
+.ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-disabled-hover-fill);
+  }
+}
+
+// Disabled hover
+.ams-checkbox__input:disabled + .ams-checkbox__label:hover {
+  text-decoration: none;
+
+  .ams-checkbox__hover-indicator {
+    stroke: none;
+  }
 }
 
 // Invalid checked hover
-:is(.ams-checkbox__input:invalid:checked, .ams-checkbox__input[aria-invalid="true"]:checked)
-  + .ams-checkbox__label:hover
-  .ams-checkbox__checkmark::after {
-  background-color: var(--ams-checkbox-checkmark-invalid-checked-hover-background-color);
+.ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-invalid-hover-fill);
+  }
 }
 
 // Invalid indeterminate hover
-:is(.ams-checkbox__input:invalid:indeterminate, .ams-checkbox__input[aria-invalid="true"]:indeterminate)
-  + .ams-checkbox__label:hover
-  .ams-checkbox__checkmark::after {
-  background-color: var(--ams-checkbox-checkmark-invalid-indeterminate-hover-background-color);
+.ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-invalid-hover-fill);
+  }
 }
 
-// Disabled checked hover
-.ams-checkbox__input:disabled:checked + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
-  background-color: var(--ams-checkbox-checkmark-disabled-checked-hover-background-color);
+// Disabled invalid checked hover
+.ams-checkbox__input[aria-invalid="true"]:disabled:checked + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-hover-disabled-invalid-fill);
+  }
 }
 
-// Disabled indeterminate hover
-.ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
-  background-color: var(--ams-checkbox-checkmark-disabled-indeterminate-hover-background-color);
+// Disabled invalid indeterminate hover
+.ams-checkbox__input[aria-invalid="true"]:disabled:indeterminate + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-hover-disabled-invalid-fill);
+  }
 }
 
-// Disabled invalid unchecked hover
-:is(.ams-checkbox__input:invalid:disabled, .ams-checkbox__input[aria-invalid="true"]:disabled)
-  + .ams-checkbox__label:hover
-  .ams-checkbox__checkmark::after {
-  // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-  border-color: var(--ams-checkbox-checkmark-disabled-border-color);
+// FORCED COLORS
+
+// Default
+@media (forced-colors: active) {
+  .ams-checkbox__label,
+  .ams-checkbox__label:hover,
+  .ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label,
+  .ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label:hover {
+    .ams-checkbox__rectangle {
+      fill: Canvas;
+      stroke: FieldText;
+    }
+
+    .ams-checkbox__hover-indicator {
+      stroke: none;
+    }
+  }
 }
 
-// DISABLED INVALID STATES
+// Checked
+@media (forced-colors: active) {
+  .ams-checkbox__input:checked:not(:indeterminate) + .ams-checkbox__label,
+  .ams-checkbox__input:checked + .ams-checkbox__label:hover,
+  .ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label,
+  .ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label:hover {
+    .ams-checkbox__rectangle {
+      fill: ActiveText;
+      stroke: ActiveText;
+    }
 
-// Disabled invalid checked & indeterminate
-.ams-checkbox__input:invalid:disabled:checked,
-.ams-checkbox__input:invalid:disabled:indeterminate,
-.ams-checkbox__input[aria-invalid="true"]:disabled:checked,
-.ams-checkbox__input[aria-invalid="true"]:disabled:indeterminate {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    background-color: var(--ams-checkbox-checkmark-disabled-checked-background-color);
+    .ams-checkbox__checked-indicator {
+      stroke: Canvas;
+    }
+  }
+}
+
+// Indeterminate
+@media (forced-colors: active) {
+  .ams-checkbox__input:indeterminate + .ams-checkbox__label,
+  .ams-checkbox__input:indeterminate + .ams-checkbox__label:hover,
+  .ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label,
+  .ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label:hover {
+    .ams-checkbox__rectangle {
+      fill: ActiveText;
+      stroke: ActiveText;
+    }
+
+    .ams-checkbox__indeterminate-indicator {
+      stroke: Canvas;
+    }
+  }
+}
+
+// Disabled
+@media (forced-colors: active) {
+  .ams-checkbox__input:disabled + .ams-checkbox__label,
+  .ams-checkbox__input:disabled + .ams-checkbox__label:hover,
+  .ams-checkbox__input[aria-invalid="true"]:disabled + .ams-checkbox__label,
+  .ams-checkbox__input[aria-invalid="true"]:disabled + .ams-checkbox__label:hover {
+    .ams-checkbox__rectangle {
+      stroke: GrayText;
+    }
+  }
+}
+
+// Disabled checked
+@media (forced-colors: active) {
+  .ams-checkbox__input:disabled:checked + .ams-checkbox__label,
+  .ams-checkbox__input:disabled:checked + .ams-checkbox__label:hover,
+  .ams-checkbox__input[aria-invalid="true"]:disabled:checked + .ams-checkbox__label:hover {
+    .ams-checkbox__rectangle {
+      fill: GrayText;
+      stroke: GrayText;
+    }
+  }
+}
+
+// Disabled indeterminate
+@media (forced-colors: active) {
+  .ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label,
+  .ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label:hover,
+  .ams-checkbox__input[aria-invalid="true"]:disabled:indeterminate + .ams-checkbox__label:hover {
+    .ams-checkbox__rectangle {
+      fill: GrayText;
+    }
   }
 }

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

@@ -8,14 +8,15 @@
 @mixin reset-input {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
   appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
-  border: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
 
 .ams-date-input {
   background-color: var(--ams-date-input-background-color);
-  box-shadow: var(--ams-date-input-box-shadow);
+  border-color: var(--ams-date-input-border-color);
+  border-style: var(--ams-date-input-border-style);
+  border-width: var(--ams-date-input-border-width);
   box-sizing: border-box;
   color: var(--ams-date-input-color);
   font-family: var(--ams-date-input-font-family);
@@ -37,10 +38,6 @@
 
   @include text-rendering;
   @include reset-input;
-
-  &:hover {
-    box-shadow: var(--ams-date-input-hover-box-shadow);
-  }
 }
 
 // This changes the default calendar icon on Chromium browsers only
@@ -55,8 +52,6 @@
 }
 
 .ams-date-input:disabled {
-  background-color: var(--ams-date-input-disabled-background-color);
-  box-shadow: var(--ams-date-input-disabled-box-shadow);
   color: var(--ams-date-input-disabled-color);
   cursor: var(--ams-date-input-disabled-cursor);
 }
@@ -68,9 +63,14 @@
 
 .ams-date-input:invalid,
 .ams-date-input[aria-invalid="true"] {
-  box-shadow: var(--ams-date-input-invalid-box-shadow);
+  border-color: var(--ams-date-input-invalid-border-color);
 
   &:hover {
+    border-color: var(--ams-date-input-invalid-hover-border-color);
     box-shadow: var(--ams-date-input-invalid-hover-box-shadow);
   }
 }
+
+.ams-date-input:not(:disabled):hover {
+  box-shadow: var(--ams-date-input-hover-box-shadow);
+}

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;
@@ -13,7 +15,9 @@
 so do not apply these styles without an `open` attribute. */
 .ams-dialog:not(dialog:not([open])) {
   background-color: var(--ams-dialog-background-color);
-  border: var(--ams-dialog-border);
+  border-color: var(--ams-dialog-border-color);
+  border-style: var(--ams-dialog-border-style);
+  border-width: var(--ams-dialog-border-width);
   box-sizing: border-box;
   display: flex; // We’d like to use CSS Grid here, but that doesn’t work as expected in Safari.
   flex-direction: column;
@@ -24,6 +28,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 +49,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 +61,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.