@amsterdam/design-system-css 3.3.0 → 4.1.0

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;
 }
 
@@ -33,4 +34,18 @@
 
 .ams-table__header-cell {
   font-weight: var(--ams-table-header-cell-font-weight);
+
+  .ams-table__header & {
+    vertical-align: bottom;
+  }
+}
+
+.ams-table__cell--align-center,
+.ams-table__header-cell--align-center {
+  text-align: center;
+}
+
+.ams-table__cell--align-end,
+.ams-table__header-cell--align-end {
+  text-align: end;
 }

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,gDAGA,4CEhBA,kEAEA,aACA,yBCDA,kCACA,2BACA,8BAIA,sBHcF,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,33 +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 -- Unbalanced line lengths in non-supporting browsers are acceptable */
-  text-wrap: var(--ams-page-heading-text-wrap);
-
-  @include hyphenation;
-  @include text-rendering;
-}
-
-.ams-page-heading--inverse {
-  color: var(--ams-page-heading-inverse-color);
-}