@amsterdam/design-system-css 0.13.1 → 0.14.1

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

@@ -3,15 +3,19 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
-@import "../../common/text-rendering";
+@use "../../common/breakpoint" as *;
+@use "../../common/text-rendering" as *;
 
-@mixin reset {
-  box-sizing: border-box;
+@mixin reset-dl {
   margin-block: 0;
 }
 
+@mixin reset-dd {
+  margin-inline: 0;
+}
+
 .ams-description-list {
+  box-sizing: border-box;
   color: var(--ams-description-list-color);
   column-gap: var(--ams-description-list-column-gap);
   display: grid;
@@ -20,24 +24,28 @@
   line-height: var(--ams-description-list-line-height);
   row-gap: var(--ams-description-list-row-gap);
 
-  @include reset;
+  @include reset-dl;
   @include text-rendering;
 }
 
 @media screen and (min-width: $ams-breakpoint-medium) {
-  .ams-description-list {
+  .ams-description-list,
+  .ams-description-list__section {
     grid-template-columns: auto 1fr;
   }
 
-  .ams-description-list--terms-width-sm {
+  .ams-description-list--terms-width-sm,
+  .ams-description-list--terms-width-sm .ams-description-list__section {
     grid-template-columns: 1fr 4fr;
   }
 
-  .ams-description-list--terms-width-md {
+  .ams-description-list--terms-width-md,
+  .ams-description-list--terms-width-md .ams-description-list__section {
     grid-template-columns: 1fr 2fr;
   }
 
-  .ams-description-list--terms-width-lg {
+  .ams-description-list--terms-width-lg,
+  .ams-description-list--terms-width-lg .ams-description-list__section {
     grid-template-columns: 1fr 1fr;
   }
 }
@@ -54,15 +62,29 @@
   }
 }
 
-@mixin reset-description {
-  margin-inline: 0;
+.ams-description-list__section {
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    column-gap: var(--ams-description-list-column-gap);
+    display: grid;
+    grid-column: span 2;
+
+    > :only-of-type {
+      grid-row: 1 / 9;
+    }
+  }
+}
+
+// Aligns terms and descriptions in a section to the grid of the list.
+// The extra class selector increases specificity to match earlier declarations.
+.ams-description-list .ams-description-list__section {
+  grid-template-columns: subgrid;
 }
 
 .ams-description-list__description {
   font-weight: var(--ams-description-list-description-font-weight);
   padding-inline-start: var(--ams-description-list-description-padding-inline-start);
 
-  @include reset-description;
+  @include reset-dd;
 
   @media screen and (min-width: $ams-breakpoint-medium) {
     grid-column-start: 2;

package/src/components/dialog/dialog.scss

@@ -4,7 +4,6 @@
  */
 
 @mixin reset-dialog {
-  box-sizing: border-box;
   inset-block: 0;
 }
 
@@ -13,6 +12,7 @@ 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);
+  box-sizing: border-box;
   display: flex; // Using flex here, because grid works strangely in Safari
   flex-direction: column;
   gap: var(--ams-dialog-gap);

package/src/components/error-message/error-message.scss

@@ -3,20 +3,22 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
-@mixin reset {
-  box-sizing: border-box;
+@mixin reset-p {
   margin-block: 0;
 }
 
 .ams-error-message {
+  box-sizing: border-box;
   color: var(--ams-error-message-color);
+  display: inline-flex;
   font-family: var(--ams-error-message-font-family);
   font-size: var(--ams-error-message-font-size);
   font-weight: var(--ams-error-message-font-weight);
+  gap: var(--ams-error-message-gap);
   line-height: var(--ams-error-message-line-height);
 
   @include text-rendering;
-  @include reset;
+  @include reset-p;
 }

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

@@ -3,10 +3,10 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
-@mixin reset {
+@mixin reset-fieldset {
   border: 0;
   margin-inline: 0;
   padding-block: 0;
@@ -16,7 +16,7 @@
 .ams-field-set {
   break-inside: avoid;
 
-  @include reset;
+  @include reset-fieldset;
 }
 
 .ams-field-set--invalid {

package/src/components/figure/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# Figure
+
+Groups media content with a caption that describes it.

package/src/components/figure/figure.scss

@@ -0,0 +1,33 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/text-rendering" as *;
+
+@mixin reset-figure {
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.ams-figure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ams-figure-gap);
+
+  @include reset-figure;
+}
+
+.ams-figure__caption {
+  color: var(--ams-figure-caption-color);
+  font-family: var(--ams-figure-caption-font-family);
+  font-size: var(--ams-figure-caption-font-size);
+  font-weight: var(--ams-figure-caption-font-weight);
+  line-height: var(--ams-figure-caption-line-height);
+
+  @include text-rendering;
+}
+
+.ams-figure__caption--inverse-color {
+  color: var(--ams-figure-caption-inverse-color);
+}

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

@@ -3,24 +3,24 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-button {
   border: 0;
   border-radius: 0; // Reset rounded borders on iOS devices
-  box-sizing: border-box;
 }
 
 .ams-file-input {
   background-color: var(--ams-file-input-background-color);
   border: var(--ams-file-input-border);
+  box-sizing: border-box;
   color: var(--ams-file-input-color);
   cursor: var(--ams-file-input-cursor);
   font-family: var(--ams-file-input-font-family);
   font-size: var(--ams-file-input-font-size);
   font-weight: var(--ams-file-input-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-file-input-line-height);
-  max-inline-size: calc(100% - var(--ams-file-input-padding-inline) * 2);
   outline-offset: calc(var(--ams-focus-outline-offset) * 2); // Compensate for the dashed border
   padding-block: var(--ams-file-input-padding-block);
   padding-inline: var(--ams-file-input-padding-inline);
@@ -39,6 +39,7 @@
   appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
   background-color: var(--ams-file-input-file-selector-button-background-color);
   box-shadow: var(--ams-file-input-file-selector-button-box-shadow);
+  box-sizing: border-box;
   color: var(--ams-file-input-file-selector-button-color);
   cursor: var(--ams-file-input-file-selector-button-cursor);
   font-family: inherit;

package/src/components/file-list/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# File List
+
+An overview of files, showing their name, type, size, and a preview.

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

@@ -0,0 +1,55 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/text-rendering" as *;
+
+@mixin reset-ul {
+  list-style: none;
+  margin-block: 0;
+  padding-inline: 0;
+}
+
+.ams-file-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ams-file-list-gap);
+  padding-block: var(--ams-file-list-padding-block);
+
+  @include text-rendering;
+  @include reset-ul;
+}
+
+.ams-file-list__item {
+  display: flex;
+  flex-direction: row;
+  font-family: var(--ams-file-list-file-font-family);
+  font-size: var(--ams-file-list-file-font-size);
+  font-weight: var(--ams-file-list-file-font-weight);
+  gap: var(--ams-file-list-file-gap);
+  line-height: var(--ams-file-list-file-line-height);
+}
+
+.ams-file-list__item-preview {
+  display: grid;
+  flex: 0 0 var(--ams-file-list-file-preview-width);
+  place-items: center;
+
+  img {
+    inline-size: 100%;
+    min-block-size: auto;
+  }
+}
+
+.ams-file-list__item-info {
+  flex: 1;
+  gap: var(--ams-file-list-file-gap);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ams-file-input__item-details {
+  color: var(--ams-file-list-file-details-color);
+}

package/src/components/footer/README.md

@@ -6,17 +6,17 @@ Provides service information at the bottom of every page.
 
 ## Guidelines
 
-- The Footer consists of a dark blue [Spotlight](/docs/components-containers-spotlight--docs) and a [Page Menu](/docs/components-navigation-page-menu--docs).
-  It must be used on all websites for the City of Amsterdam.
-- For applications, only the Page Menu can be sufficient.
-- The Footer is the same on every page of the application.
+- The Footer usually consists of two sections: a full-width blue area and a [Page Menu](/docs/components-navigation-page-menu--docs) below it.
+- A Footer containing only a Page Menu can be sufficient for applications.
+- The Footer must be used on all websites for the City of Amsterdam.
+- It must be the same on every page.
 
-The Spotlight offers space for various practical links:
+The top section offers space for various practical links:
 
 - The first column focuses on contact information.
   The information is as specific as possible and tailored to the respective website or page (e.g., including a chat option if available).
 - The second column contains links to relevant (online) sites or sources.
 - The third column refers to newsletters, social media, etc.
 
-The menu at the very bottom is intended for links to privacy policies, cookie statements, information about the website itself, etc.
+The menu in the bottom section is for links to privacy policies, cookie statements, information about the website itself, etc.
 Contact details should not go here.

package/src/components/footer/footer.scss

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+.ams-footer__top {
+  background-color: var(--ams-footer-top-background-color);
+}

package/src/components/gap/gap.scss

@@ -3,13 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/size";
+@use "sass:map";
+@use "../../common/size" as *;
 
 [class|="ams-gap-"] {
   display: grid !important;
 }
 
-@each $size in map-keys($ams-sizes) {
+@each $size in map.keys($ams-sizes) {
   @if $size != "no" {
     .ams-gap--#{$size} {
       grid-gap: var(--ams-gap-#{$size}) !important;

package/src/components/grid/_mixins.scss

@@ -1,3 +1,5 @@
+@use "../../common/breakpoint" as *;
+
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam

package/src/components/grid/grid.scss

@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
-@import "mixins";
+@use "../../common/breakpoint" as *;
+@use "mixins" as *;
 
 $ams-grid-column-count: 12;
 

package/src/components/header/README.md

@@ -11,13 +11,15 @@ Includes the name of the application if it is not the general website.
 - It includes the logo of the City or the organization, the site title (except for the general website), and a menu with links to commonly used pages.
 - The Header is important because it conveys our corporate identity and is the first thing people see.
   Using it consistently helps users recognize and trust the website.
-- It is the same on every page of the application.
-- The page menu can contain a maximum of 5 items.
+- The Header is the same on every page of the application, although full-screen pages may hide it, e.g. a video or a map.
+- The inline menu can contain a maximum of 5 items.
   The last two will often be ‘Search’ and ‘Menu’.
-- Labels should be short to ensure the menu fits on one line, even on medium-wide screens.
-- An icon can be added to the end of a link to make its function easier to find.
+- The 'Menu' button opens a collapsible menu, which has room for more links.
+- On narrow windows, links can move from the inline menu to the collapsible one.
+- Labels should be short to help the inline menu fit on a single line whenever possible.
+- An icon can be added to the end of a link to make its destination easier to guess.
 
 ## References
 
-- A Header is a [landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark_roles) and can be use to group navigation elements.
+- A Header is a [landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark_roles) and can be used to group navigation elements.
 - [WCAG 3.2.3](https://wcag.com/designers/3-2-3-consistent-navigation/) Consistent Navigation: Navigation menus that appear on multiple pages are consistent.

package/src/components/header/header.scss

@@ -3,84 +3,214 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
+@use "../../common/text-rendering" as *;
 
 .ams-header {
+  /*
+  * The branding section is created twice: once outside the navigation and once hidden inside it.
+  * This keeps all navigation in one nav element and lets the menu wrap around the branding section.
+  * Display grid is used to let both branding sections overlap.
+  */
+  display: grid;
+  padding-block: var(--ams-header-padding-block);
+  padding-inline: var(--ams-header-padding-inline);
+}
+
+.ams-header__branding {
   align-items: center;
+  align-self: start; // To align the branding section to the top of the header when it wraps
+  column-gap: var(--ams-header-branding-column-gap);
   display: flex;
-  flex-wrap: wrap;
-  padding-block: var(--ams-header-padding-block);
-  row-gap: 1.5rem;
+  grid-area: 1 / 1; // To allow this section to overlap with the second branding section
+}
 
-  @media screen and (min-width: $ams-breakpoint-wide) {
-    column-gap: var(--ams-header-column-gap);
-    flex-wrap: nowrap;
-  }
+.ams-header__branding--hidden {
+  opacity: 0%;
+  user-select: none; // The hidden branding section should not be selectable
 }
 
 .ams-header__logo-link {
-  flex: none;
   outline-offset: var(--ams-header-logo-link-outline-offset);
 }
 
-.ams-header__links {
-  display: none;
+/* TODO Remove after updating Heading line heights in DES-973. */
+.ams-heading.ams-header__brand-name {
+  line-height: 1.35;
+}
+
+.ams-header__navigation {
+  column-gap: var(--ams-header-navigation-column-gap);
+  display: flex;
+  flex-wrap: wrap;
+  grid-area: 1 / 1; // To allow this section to overlap with the branding section
+  // This section blocks pointer events initially, so the hidden branding section can't be activated.
+  // The menu and collapsible menu set it back to auto, to make sure they can be activated.
+  pointer-events: none;
+  row-gap: var(--ams-header-navigation-row-gap);
+}
+
+@mixin reset-list {
+  list-style: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+}
+
+.ams-header__menu {
+  align-items: center;
+  column-gap: var(--ams-header-menu-column-gap);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-inline-start: auto;
+  pointer-events: auto; // Set pointer events back to auto to allow the menu to be activated
+  row-gap: var(--ams-header-menu-row-gap);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
-    display: block;
-    flex: 10 0 auto;
+  @include reset-list;
+}
+
+// Do not show menu items below the wide breakpoint...
+.ams-header__menu-item {
+  @media screen and (not (min-width: $ams-breakpoint-wide)) {
+    display: none;
   }
+}
 
-  @media screen and (min-width: $ams-breakpoint-wide) {
-    order: 3;
+// ...unless they're fixed.
+.ams-header__menu-item--fixed {
+  display: revert;
+}
+
+@mixin header-menu-action {
+  color: var(--ams-header-menu-item-color);
+  font-family: var(--ams-header-menu-item-font-family);
+  font-size: var(--ams-header-menu-item-font-size);
+  font-weight: var(--ams-header-menu-item-font-weight);
+  line-height: var(--ams-header-menu-item-line-height);
+  outline-offset: var(--ams-header-menu-item-outline-offset);
+  padding-block: var(--ams-header-menu-item-padding-block);
+  touch-action: manipulation;
+  white-space: nowrap;
+
+  @include text-rendering;
+
+  &:hover {
+    color: var(--ams-header-menu-item-hover-color);
   }
 }
 
-.ams-header__menu {
-  flex: 1;
-  padding-inline-start: var(--ams-page-menu-column-gap); // TODO Don’t use tokens of another component
-  text-align: end;
+.ams-header__menu-link {
+  display: inline-block;
+  text-decoration-line: var(--ams-header-menu-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-header-menu-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-header-menu-link-text-underline-offset);
+
+  @include header-menu-action;
+
+  &:hover {
+    text-decoration-line: var(--ams-header-menu-link-hover-text-decoration-line);
+  }
+}
 
+.ams-header__mega-menu-button-item--hide-on-wide-window {
   @media screen and (min-width: $ams-breakpoint-wide) {
-    order: 4;
-    padding-inline-start: 0;
+    display: none;
   }
 }
 
-.ams-header__app-name {
-  flex: 1 1 100%;
+@mixin reset-button {
+  background: none;
+  border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
+  padding-inline: 0;
 
-  @media screen and (min-width: $ams-breakpoint-wide) {
-    min-inline-size: 0;
-    order: 2;
-
-    .ams-header__app-name-heading {
-      display: block;
-      inline-size: 100%;
-      line-height: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+  // [1] Remove the margin in older Safari.
+}
+
+.ams-header__mega-menu-button {
+  column-gap: var(--ams-header-menu-item-column-gap);
+  cursor: pointer;
+  display: grid;
+  grid-auto-flow: column;
+
+  @include header-menu-action;
+  @include reset-button;
+}
+
+.ams-header__mega-menu-button[aria-expanded="true"] {
+  font-weight: var(--ams-header-mega-menu-button-label-open-font-weight);
+}
+
+.ams-header__mega-menu-button-label,
+.ams-header__mega-menu-button-hidden-label {
+  grid-area: 1 / 1; // To allow the label and the hidden label to overlap
+}
+
+// This hidden label is used to prevent a layout shift when the mega menu is opened
+// and the button text becomes bold.
+.ams-header__mega-menu-button-hidden-label {
+  font-weight: var(--ams-header-mega-menu-button-label-open-font-weight);
+  pointer-events: none;
+  user-select: none;
+  visibility: hidden;
+}
+
+.ams-header__menu-icon {
+  line {
+    stroke: currentColor;
+    stroke-width: 3px;
+    transform-origin: center;
+    transition:
+      translate 0.1s ease-in-out,
+      rotate 0.2s ease-in-out,
+      opacity 0.1s ease-in-out;
+
+    @media (prefers-reduced-motion) {
+      transition: none;
     }
   }
+
+  .ams-header__menu-icon-top {
+    translate: 0 -7px;
+  }
+
+  .ams-header__menu-icon-bottom {
+    translate: 0 7px;
+  }
 }
 
-// Temporary – will move to Mega Menu and/or Icon Button
-.ams-header__menu-button {
-  background-color: transparent;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M0 3.238h32V7.81H0V3.238zm0 10.476h32v4.572H0v-4.572zM0 24.19h32v4.572H0V24.19z'/></svg>");
-  background-position: center right;
-  background-repeat: no-repeat;
-  background-size: 1.1875rem 1.1875rem;
-  border: 0;
-  color: var(--ams-page-menu-item-color);
-  font-family: var(--ams-page-menu-item-font-family);
-  font-size: var(--ams-page-menu-item-font-size);
-  font-weight: var(--ams-page-menu-item-font-weight);
-  line-height: var(--ams-page-menu-item-line-height);
-  margin-block: 0;
-  margin-inline: 0;
-  padding-inline: 0 1.875rem;
-  text-align: center;
-  touch-action: manipulation;
+.ams-header__menu-icon--open {
+  .ams-header__menu-icon-top {
+    rotate: 45deg;
+    translate: 0;
+  }
+  .ams-header__menu-icon-middle {
+    opacity: 0%;
+  }
+  .ams-header__menu-icon-bottom {
+    rotate: -45deg;
+    translate: 0;
+  }
+}
+
+.ams-header__mega-menu {
+  inline-size: 100%;
+  pointer-events: auto; // Set pointer events back to auto to allow the mega menu to be activated
+
+  // Remove inline padding from Grids that are used in the mega menu.
+  // The grid inline padding is set on the header element.
+  & .ams-grid {
+    padding-inline: 0;
+  }
+}
+
+.ams-header__mega-menu--closed.ams-header__mega-menu--closed {
+  display: none;
+}
+
+.ams-header__grid-cell-narrow-window-only {
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    display: none;
+  }
 }