@amsterdam/design-system-css 3.2.1 → 4.0.0

package/src/components/prose/prose.scss

@@ -0,0 +1,104 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+$_ams-body-block: ".ams-blockquote, .ams-image, .ams-paragraph--large, .ams-table";
+$_ams-button-or-cta: ".ams-button, .ams-call-to-action-link";
+$_ams-list-or-paragraph: ".ams-description-list, .ams-link-list, .ams-ordered-list, .ams-paragraph:not(.ams-paragraph--large), .ams-unordered-list";
+$_ams-paragraph: ".ams-paragraph:not(.ams-paragraph--large)";
+
+.ams-prose {
+  /* Fallback for older browsers: uniform spacing */
+  > .ams-heading {
+    margin-block-end: var(--ams-space-s);
+  }
+
+  > :not(.ams-heading) {
+    margin-block-end: var(--ams-space-m);
+  }
+
+  > :last-child {
+    margin-block-end: 0;
+  }
+
+  /* Context-aware spacing for browsers with :has() support */
+  /* stylelint-disable-next-line scss/operator-no-unspaced -- Prettier removes the space after ‘*’, which is valid CSS. */
+  @supports selector(:has(+ *)) {
+    /* Reset fallback margins */
+    > * {
+      margin-block-end: 0;
+    }
+
+    /* Body-to-body default */
+    > :not(.ams-heading):has(+ :not(.ams-heading)) {
+      margin-block-end: var(--ams-space-m);
+    }
+
+    /* Heavy body element (Blockquote, Image, Paragraph (large), Table) on either side */
+    > :is(#{$_ams-body-block}):has(+ :not(.ams-heading)),
+    > :not(.ams-heading):has(+ :is(#{$_ams-body-block})) {
+      margin-block-end: var(--ams-space-l);
+    }
+
+    /* Button or CTA Link followed by Button or CTA Link */
+    > :is(#{$_ams-button-or-cta}):has(+ :is(#{$_ams-button-or-cta})) {
+      margin-block-end: var(--ams-space-l);
+    }
+
+    /* Paragraph (large) before Blockquote or Image needs extra air */
+    > .ams-paragraph--large:has(+ :is(.ams-blockquote, .ams-image)) {
+      margin-block-end: var(--ams-space-xl);
+    }
+
+    /* Body content before an accordion needs a slightly larger gap */
+    > :not(.ams-heading):has(+ .ams-accordion) {
+      margin-block-end: var(--ams-space-l);
+    }
+
+    /* Body before a level 4 heading: default */
+    > :not(.ams-heading):has(+ :is(.ams-heading--4)) {
+      margin-block-end: var(--ams-space-l);
+    }
+
+    /* List or regular Paragraph before a level 4 heading: tighter */
+    > :is(#{$_ams-list-or-paragraph}):has(+ :is(.ams-heading--4)) {
+      margin-block-end: var(--ams-space-m);
+    }
+
+    /* Any element before a level 3 heading (subsection boundary) */
+    > *:has(+ .ams-heading--3) {
+      margin-block-end: var(--ams-space-l);
+    }
+
+    /* Any element before a level 2 heading (section boundary) */
+    > *:has(+ .ams-heading--2) {
+      margin-block-end: var(--ams-space-xl);
+    }
+
+    /* Heading level 3 followed by its content */
+    > .ams-heading--3:has(+ :not(.ams-heading)) {
+      margin-block-end: var(--ams-space-xs);
+    }
+
+    /* Heading level 2 followed by its content */
+    > .ams-heading--2:has(+ :not(.ams-heading)) {
+      margin-block-end: var(--ams-space-s);
+    }
+
+    /* Heading level 1 followed by a regular Paragraph */
+    > .ams-heading--1:has(+ #{$_ams-paragraph}) {
+      margin-block-end: var(--ams-space-xs);
+    }
+
+    /* Heading level 1 followed by a Paragraph (large), typically lead or metadata */
+    > .ams-heading--1:has(+ .ams-paragraph--large) {
+      margin-block-end: var(--ams-space-m);
+    }
+
+    /* Heading level 2 or 3 followed by another heading */
+    > :is(.ams-heading--2, .ams-heading--3):has(+ .ams-heading) {
+      margin-block-end: var(--ams-space-m);
+    }
+  }
+}

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 {

package/src/components/standalone-link/standalone-link.scss

@@ -43,8 +43,3 @@
     color: var(--ams-standalone-link-inverse-hover-color);
   }
 }
-
-/* stylelint-disable-next-line block-no-empty */
-.ams-standalone-link--with-icon {
-  /* This class name is deprecated. */
-}

package/src/components/tab-navigation/README.md

@@ -0,0 +1,13 @@
+<!-- @license CC0-1.0 -->
+
+# Tab Navigation
+
+A horizontal or vertical list of links, styled as tabs, to navigate between a set of related pages.
+
+## Guidelines
+
+- Use Tab Navigation for navigating between pages that each have their own main content.
+  Thanks to using links, every tab’s content has its own url that the user can open in a new window, share, or bookmark.
+- Use [Tabs](https://designsystem.amsterdam/?path=/docs/components-containers-tabs--docs) instead to switch between small pieces of secondary content without navigating away.
+- Use the vertical orientation to stack links below each other, e.g. in a sidebar.
+- Add `aria-current="page"` to the link pointing to the current page.

package/src/components/tab-navigation/tab-navigation.scss

@@ -0,0 +1,101 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/breakpoint" as *;
+@use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
+
+.ams-tab-navigation__list {
+  @include reset-ul;
+
+  box-shadow: var(--ams-tab-navigation-list-box-shadow);
+  display: flex;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+}
+
+@media (min-width: $ams-breakpoint-medium) {
+  .ams-tab-navigation--vertical {
+    @include hyphenation;
+
+    .ams-tab-navigation__list {
+      box-shadow: var(--ams-tab-navigation-list-vertical-box-shadow);
+      flex-direction: column;
+      overflow-x: visible;
+    }
+  }
+}
+
+.ams-tab-navigation__item {
+  flex-shrink: 0;
+  scroll-snap-align: start;
+}
+
+.ams-tab-navigation__link {
+  align-items: center;
+  color: var(--ams-tab-navigation-link-color);
+  cursor: var(--ams-tab-navigation-link-cursor);
+  display: flex;
+  font-family: var(--ams-tab-navigation-link-font-family);
+  font-size: var(--ams-tab-navigation-link-font-size);
+  font-weight: var(--ams-tab-navigation-link-font-weight);
+  gap: var(--ams-tab-navigation-link-gap);
+  line-height: var(--ams-tab-navigation-link-line-height);
+  outline-offset: var(--ams-tab-navigation-link-outline-offset);
+  padding-block: var(--ams-tab-navigation-link-padding-block);
+  padding-inline: var(--ams-tab-navigation-link-padding-inline);
+  text-decoration-line: none;
+
+  &:hover {
+    color: var(--ams-tab-navigation-link-hover-color);
+  }
+
+  &:hover:not([aria-current="page"]) {
+    box-shadow: var(--ams-tab-navigation-link-hover-box-shadow);
+  }
+
+  &[aria-current="page"] {
+    box-shadow: var(--ams-tab-navigation-link-current-box-shadow);
+    font-weight: var(--ams-tab-navigation-link-current-font-weight);
+
+    @media (forced-colors: active) {
+      background-color: SelectedItem;
+    }
+  }
+
+  @media (min-width: $ams-breakpoint-medium) {
+    .ams-tab-navigation--vertical &:hover:not([aria-current="page"]) {
+      box-shadow: var(--ams-tab-navigation-link-vertical-hover-box-shadow);
+    }
+
+    .ams-tab-navigation--vertical &[aria-current="page"] {
+      box-shadow: var(--ams-tab-navigation-link-vertical-current-box-shadow);
+    }
+  }
+}
+
+.ams-tab-navigation__link-label-wrapper {
+  display: grid;
+}
+
+.ams-tab-navigation__link-label,
+.ams-tab-navigation__link-label-hidden {
+  display: initial;
+  grid-area: 1 / 1;
+}
+
+// This hidden label is used to prevent a layout shift when the link is current
+// and the link text becomes bold.
+.ams-tab-navigation__link-label-hidden {
+  font-weight: var(--ams-tab-navigation-link-current-font-weight);
+  pointer-events: none;
+  -webkit-user-select: none;
+
+  /* Safari support is added with the prefixed property. */
+  /* stylelint-disable-next-line plugin/use-baseline */
+  user-select: none;
+  visibility: hidden;
+}

package/src/components/table/README.md

@@ -2,11 +2,10 @@
 
 # Table
 
-Use the table component to let users compare information in rows and columns.
-Table is used to display simple information that does not need to be filtered or edited.
+Structures data in rows and columns to help users work with large amounts of information.
 
 ## Guidelines
 
-- Add a caption to help users find, navigate and understand the table.
-- Include a [Heading](https://designsystem.amsterdam/?path=/docs/components-text-heading--docs) in the Table Caption,
-  unless the table is in a [Figure](http://designsystem.amsterdam/?path=/docs/components-media-figure--docs) which has a Figure Caption.
+- Add a caption so users can find and understand the table without reading its data.
+- Use a [Heading](https://designsystem.amsterdam/?path=/docs/components-text-heading--docs) in the caption, at the level that fits the document outline.
+  It becomes the table’s accessible name, announced by screen readers on every encounter.

package/src/components/table/table.scss

@@ -19,6 +19,7 @@
 
 .ams-table__caption {
   font-weight: var(--ams-table-caption-font-weight);
+  margin-block-end: var(--ams-table-caption-margin-block-end);
   text-align: start;
 }
 

package/src/components/tabs/README.md

@@ -2,33 +2,15 @@
 
 # Tabs
 
-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.
+Discloses related pieces of content in a secondary area on the page.
 
 ## Guidelines
 
-- 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.
-- Use when there is limited visual space and content needs to be divided into sections.
-- Each tab consists of a button and a panel.
-  The button has an `aria-controls` attribute that matches the `id` of the associated panel.
-
-You can navigate tabs with your keyboard:
-
-| key            | element                                        |
-| :------------- | :--------------------------------------------- |
-| Enter or Space | Open or close the tab that has the focus       |
-| Tab            | Go to the next element that can have focus     |
-| Shift + Tab    | Go to the next element that can have focus     |
-| Left arrow     | If the tabs have focus: go to the previous tab |
-| Right arrow    | If the tabs have focus: go to the next tab     |
-| Home           | If the tabs have focus: go to the first tab    |
-| End            | If the tabs have focus, go to the last tab     |
-
-### Caution
-
-Do not use tabs if the content in each tab functions just as well on separate pages.
-
-## References
-
-- [W3C - Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
-- [MDN - Tab Aria Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role)
+- Use Tabs to let related content fragments share a space on the current page.
+  Each tab has a button that shows its content in a panel.
+- Do not make it toggle between large amounts of primary content.
+  That would come down to navigating between pages.
+  In this context, use [Tab Navigation](/docs/components-navigation-tab-navigation--docs) to offer the user the benefits of links.
+- The content of each tab must be usable independent of the others.
+- Create a panel for each button.
+  Add an `aria-controls` attribute to each button and match its value to the `id` of the associated panel.

package/dist/document/document.css

@@ -1 +0,0 @@
-.ams-body{margin-block:0;margin-inline:0}/*# sourceMappingURL=document.css.map */

package/dist/document/document.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/document/document.scss","../../src/common/resets.scss"],"names":[],"mappings":"AAQA,UCFE,eACA","file":"document.css"}

package/dist/icon/icon.deprecated.css

@@ -1 +0,0 @@
-.ams-icon--heading-0{--ams-line-height: var(--ams-icon-heading-0-line-height);font-size:var(--ams-icon-heading-0-font-size);line-height:var(--ams-icon-heading-0-line-height)}/*# sourceMappingURL=icon.deprecated.css.map */

package/dist/icon/icon.deprecated.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/icon/icon.deprecated.scss"],"names":[],"mappings":"AAMA,qBACE,yDAEA,8CACA","file":"icon.deprecated.css"}

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

@@ -1 +0,0 @@
-.ams-page-heading{margin-block:0;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}.ams-page-heading--inverse{color:var(--ams-page-heading-inverse-color)}/*# sourceMappingURL=page-heading.deprecated.css.map */

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

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/page-heading/page-heading.deprecated.scss","../../src/common/resets.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAUA,kBC0CE,eDvCA,sBAEA,kBACA,mBACA,oCACA,gDACA,4CACA,gDACA,gDAEA,4CEfA,kEAEA,aACA,yBCDA,kCACA,2BACA,8BAIA,sBHaF,2BACE","file":"page-heading.deprecated.css"}

package/src/components/icon/icon.deprecated.scss

@@ -1,12 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-// Deprecated. Use ‘heading 1’ instead.
-.ams-icon--heading-0 {
-  --ams-line-height: var(--ams-icon-heading-0-line-height);
-
-  font-size: var(--ams-icon-heading-0-font-size);
-  line-height: var(--ams-icon-heading-0-line-height);
-}

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

@@ -1,3 +0,0 @@
-<!-- @license CC0-1.0 -->
-
-# Page Heading

package/src/components/page-heading/page-heading.deprecated.scss

@@ -1,32 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-@use "../../common/hyphenation" as *;
-@use "../../common/resets" as *;
-@use "../../common/text-rendering" as *;
-
-/* @deprecated We no longer use this size of headings. Use `.ams-heading.ams-heading--1` instead. */
-.ams-page-heading {
-  @include reset-hx;
-
-  box-sizing: border-box;
-  /* stylelint-disable-next-line plugin/use-baseline */
-  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);
-  /* stylelint-disable-next-line plugin/use-baseline */
-  text-wrap: var(--ams-page-heading-text-wrap);
-
-  @include hyphenation;
-  @include text-rendering;
-}
-
-.ams-page-heading--inverse {
-  color: var(--ams-page-heading-inverse-color);
-}