@amsterdam/design-system-css 3.2.0 → 3.3.0

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

@@ -4,6 +4,7 @@
  */
 
 @use "../../common/breakpoint" as *;
+@use "../../common/print-exact" as *;
 @use "../../common/resets" as *;
 
 @mixin indicator {
@@ -36,7 +37,7 @@
   display: flex;
   gap: var(--ams-progress-list-step-gap);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     gap: var(--ams-progress-list-step-medium-gap);
   }
 }
@@ -80,6 +81,7 @@
     var(--ams-progress-list-step-marker-shape-outline-style) var(--ams-progress-list-step-marker-shape-outline-color);
 
   @include marker-shape;
+  @include print-exact;
 
   .ams-progress-list__step--completed & {
     background-color: var(--ams-progress-list-step-completed-marker-shape-background-color);
@@ -127,16 +129,25 @@
   .ams-progress-list > :last-child:not(.ams-progress-list__step--has-substeps) & {
     display: none;
   }
+
+  /* Hide connector for last step when collapsed. */
+  .ams-progress-list > :last-child.ams-progress-list__step--collapsed & {
+    display: none;
+  }
 }
 
 /* Content */
 
 .ams-progress-list__content {
   flex: auto;
-  min-inline-size: 0; /* Ensure content can shrink to fit container */
-
-  /* Add white space below all but the last step and steps with substeps. */
-  .ams-progress-list__step:not(:last-child, .ams-progress-list__step--has-substeps) & {
+  min-inline-size: 0;
+
+  /* Add space below content, unless it is the last child, or if it has substeps and it is not collapsed. */
+  .ams-progress-list__step:not(
+      :last-child,
+      .ams-progress-list__step--has-substeps:not(.ams-progress-list__step--collapsed)
+    )
+    & {
     margin-block-end: var(--ams-progress-list-step-content-margin-block-end);
   }
 }
@@ -145,9 +156,66 @@
 
 .ams-progress-list__heading {
   margin-block-end: var(--ams-progress-list-step-heading-margin-block-end);
+
+  .ams-progress-list__step--collapsed & {
+    margin-block-end: 0;
+  }
+}
+
+/* Button */
+
+.ams-progress-list__button {
+  @include reset-button;
+
+  background-color: transparent;
+  color: var(--ams-progress-list-button-color);
+  cursor: var(--ams-progress-list-button-cursor);
+  display: flex;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  gap: var(--ams-progress-list-button-gap);
+  inline-size: 100%;
+  line-height: inherit;
+  outline-offset: var(--ams-progress-list-button-outline-offset);
+  padding-block: var(--ams-progress-list-button-padding-block);
+  padding-inline: var(--ams-progress-list-button-padding-inline);
+  text-align: start;
+
+  &:hover {
+    color: var(--ams-progress-list-button-hover-color);
+  }
+}
+
+/* Icon */
+
+.ams-progress-list__icon svg {
+  rotate: 0deg;
+  transition: none;
+
+  [aria-expanded="true"] & {
+    rotate: -180deg;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: rotate var(--ams-progress-list-icon-transition-duration)
+      var(--ams-progress-list-icon-transition-timing-function);
+  }
+}
+
+/* Panel */
+
+.ams-progress-list__panel {
+  .ams-progress-list__step--collapsed & {
+    display: none;
+
+    @media print {
+      display: block;
+    }
+  }
 }
 
-/* Substeps is its own block in BEM and has the same elements as above */
+/* Substeps – is its own block in BEM and has the same elements as above */
 
 .ams-progress-list-substeps {
   @include reset-ol;
@@ -170,7 +238,7 @@
 
   @include indicator;
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     margin-inline-end: var(--ams-progress-list-substeps-step-indicator-medium-margin-inline-end);
     margin-inline-start: calc(
       -1 * var(--ams-progress-list-step-medium-gap) - var(--ams-progress-list-step-marker-shape-block-size)
@@ -199,6 +267,7 @@
     var(--ams-progress-list-substeps-step-marker-shape-outline-color);
 
   @include marker-shape;
+  @include print-exact;
 
   .ams-progress-list-substeps__step--completed & {
     background-color: var(--ams-progress-list-substeps-step-completed-marker-shape-background-color);

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

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/print-exact" as *;
 @use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
@@ -30,6 +31,7 @@
   padding-inline: var(--ams-search-field-input-padding-inline);
   touch-action: manipulation;
 
+  @include print-exact;
   @include text-rendering;
 
   &:focus {

package/src/components/spotlight/spotlight.scss

@@ -3,8 +3,12 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/print-exact" as *;
+
 .ams-spotlight {
   background-color: var(--ams-spotlight-background-color);
+
+  @include print-exact;
 }
 
 .ams-spotlight--azure {