@amsterdam/design-system-css 0.5.0 → 0.6.1

package/src/components/radio/radio.scss

@@ -0,0 +1,157 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/input-label-focus";
+@import "../../common/hide-input";
+
+.amsterdam-radio__input {
+  @include hide-input;
+  @include input-label-focus;
+}
+
+.amsterdam-radio__circle {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  height: calc(var(--amsterdam-radio-font-size) * var(--amsterdam-radio-line-height));
+  width: 1.5rem;
+
+  &::after {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
+    border-color: var(--amsterdam-radio-circle-border-color);
+    border-radius: 100%;
+    border-style: solid;
+    border-width: 0.125rem;
+    box-sizing: border-box;
+    content: "";
+    height: 1.5rem;
+    width: 100%;
+  }
+}
+
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-radio__label {
+  color: var(--amsterdam-radio-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--amsterdam-radio-font-family);
+  font-size: var(--amsterdam-radio-font-size);
+  font-weight: var(--amsterdam-radio-font-weight);
+  gap: 0.5rem;
+  line-height: var(--amsterdam-radio-line-height);
+  outline-offset: var(--amsterdam-radio-outline-offset);
+
+  &:hover {
+    color: var(--amsterdam-radio-hover-color);
+    text-decoration-line: underline;
+    text-decoration-thickness: 0.125rem;
+    text-underline-offset: 0.375rem;
+
+    .amsterdam-radio__circle::after {
+      border-color: var(--amsterdam-radio-circle-hover-border-color);
+    }
+  }
+
+  @include reset;
+}
+
+// Default checked
+.amsterdam-radio__input:checked {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    background-image: var(--amsterdam-radio-circle-checked-background-image);
+  }
+}
+
+// Invalid unchecked
+.amsterdam-radio__input[aria-invalid="true"] {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    border-color: var(--amsterdam-radio-circle-invalid-border-color);
+  }
+}
+
+// Disabled unchecked
+.amsterdam-radio__input:disabled {
+  + .amsterdam-radio__label {
+    color: var(--amsterdam-radio-disabled-color);
+    cursor: not-allowed;
+
+    .amsterdam-radio__circle::after {
+      border-color: var(--amsterdam-radio-circle-disabled-border-color);
+      border-width: 0.125rem;
+    }
+  }
+}
+
+// Invalid checked
+.amsterdam-radio__input[aria-invalid="true"]:checked {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    background-image: var(--amsterdam-radio-circle-invalid-checked-background-image);
+  }
+}
+
+// Disabled label
+.amsterdam-radio__input:disabled + .amsterdam-radio__label:hover {
+  text-decoration: none;
+}
+
+// Disabled checked
+.amsterdam-radio__input:disabled:checked {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    background-image: var(--amsterdam-radio-circle-disabled-checked-background-image);
+  }
+}
+
+// Disabled invalid unchecked
+.amsterdam-radio__input[aria-invalid="true"]:disabled {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    border-color: var(--amsterdam-radio-circle-disabled-border-color);
+  }
+}
+
+// HOVER STATES
+
+// Invalid unchecked hover
+.amsterdam-radio__input[aria-invalid="true"] + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
+  border-color: var(--amsterdam-radio-circle-invalid-hover-border-color);
+}
+
+// Default checked hover
+.amsterdam-radio__input:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  background-image: var(--amsterdam-radio-circle-checked-hover-background-image);
+}
+
+// Invalid checked hover
+.amsterdam-radio__input[aria-invalid="true"]:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
+  background-image: var(--amsterdam-radio-circle-invalid-checked-hover-background-image);
+}
+
+// Disabled checked hover
+.amsterdam-radio__input:disabled:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  background-image: var(--amsterdam-radio-circle-disabled-checked-hover-background-image);
+}
+
+// Disabled invalid unchecked hover
+.amsterdam-radio__input[aria-invalid="true"]:disabled + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+  border-color: var(--amsterdam-radio-circle-disabled-border-color);
+}
+
+// DISABLED INVALID STATES
+
+// Disabled invalid checked
+.amsterdam-radio__input[aria-invalid="true"]:disabled:checked {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    background-image: var(--amsterdam-radio-circle-disabled-checked-background-image);
+  }
+}

package/src/components/row/README.md

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

package/src/components/row/row.scss

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/size";
+
+.amsterdam-row {
+  display: flex;
+  flex-direction: row;
+}
+
+@each $size, $label in $amsterdam-sizes {
+  .amsterdam-row--#{$label} {
+    gap: var(--amsterdam-row-gap-#{$size});
+  }
+}

package/src/components/screen/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Screen
 
 Manages the maximum width and alignment of the entire website or application.
@@ -6,10 +8,10 @@ Manages the maximum width and alignment of the entire website or application.
 
 This should be the outermost component of your website or application.
 Within it, combine components such as
-[Grid](?path=/docs/react_layout-grid--docs),
-[Header](?path=/docs/react_containers-header--docs),
-[Footer](?path=/docs/react_containers-footer--docs),
-[Spotlight](?path=/docs/react_containers-spotlight--docs),
+[Grid](/docs/components-layout-grid--docs),
+[Header](/docs/components-containers-header--docs),
+[Footer](/docs/components-containers-footer--docs),
+[Spotlight](/docs/components-containers-spotlight--docs),
 and Figure.
 
 ## Design

package/src/components/screen/screen.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin reset {

package/src/components/search-field/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Search Field
 
 Allows users to quickly find relevant content by entering a (part of a) word or phrase to search through the content.
@@ -30,4 +32,4 @@ These features can be disruptive for a user searching for part of a word, and `a
 - [WCAG 1.3.5](https://www.w3.org/TR/WCAG22/#identify-input-purpose): It is clear both to the user and programmatically what the purpose of a form field is.
 - [WCAG 2.4.6](https://www.w3.org/TR/WCAG22/#headings-and-labels): There is a label describing the purpose of the input.
 
-Search Field is an interactive element; therefore, [the general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.
+Search Field is an interactive element; therefore, [the general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.

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

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-search-field {
@@ -23,8 +23,8 @@
   font-weight: var(--amsterdam-search-field-input-font-weight);
   line-height: var(--amsterdam-search-field-input-line-height);
   outline-offset: var(--amsterdam-search-field-input-outline-offset);
-  padding-block: 0.5rem;
-  padding-inline: 1rem;
+  padding-block: var(--amsterdam-search-field-input-padding-block);
+  padding-inline: var(--amsterdam-search-field-input-padding-inline);
   touch-action: manipulation;
   width: 100%;
 
@@ -58,8 +58,10 @@
   color: var(--amsterdam-search-field-button-color);
   cursor: pointer;
   outline-offset: var(--amsterdam-search-field-button-outline-offset);
-  padding-block: 0.5rem;
-  padding-inline: 0.5rem;
+
+  // TODO Check if these paddings are necessary
+  padding-block: var(--amsterdam-search-field-button-padding-block);
+  padding-inline: var(--amsterdam-search-field-button-padding-inline);
   touch-action: manipulation;
 
   &:hover {

package/src/components/skip-link/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Skip Link
 
 Use a Skip Link to navigate to the main content quickly with the keyboard.

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

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-skip-link {
@@ -12,8 +12,8 @@
   font-weight: var(--amsterdam-skip-link-font-weight);
   line-height: var(--amsterdam-skip-link-line-height);
   outline-offset: var(--amsterdam-skip-link-outline-offset);
-  padding-block: 0.5rem;
-  padding-inline: 1rem;
+  padding-block: var(--amsterdam-skip-link-padding-block);
+  padding-inline: var(--amsterdam-skip-link-padding-inline);
   text-align: center;
   text-decoration: none;
 

package/src/components/spotlight/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Spotlight
 
 Emphasizes a section on a page through a distinctive background colour.

package/src/components/spotlight/spotlight.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-spotlight--blue {

package/src/components/switch/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Switch
 
 A switch is a control element to toggle between two different states quickly.
@@ -14,7 +16,7 @@ A switch applies to a page or the entire system, such as an on/off switch.
 
 - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): it is both clear for a user and programmatically what the purpose of a form field is.
 
-The Switch is an interactive element; general requirements and guidelines for interactive elements apply [here](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs).
+The Switch is an interactive element; general requirements and guidelines for interactive elements apply [here](/docs/docs-design-guidelines-interactive-elements--docs).
 
 ## References
 

package/src/components/switch/switch.scss

@@ -1,12 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/input-label-focus";
+@import "../../common/hide-input";
+
 @mixin reset {
   box-sizing: border-box;
 }
 
 .amsterdam-switch__input {
-  appearance: none;
-  margin-block: 0;
-  margin-inline: 0;
-  opacity: 0%; /* to hide native input field in older iOS */
+  @include hide-input;
+  @include input-label-focus;
 }
 
 .amsterdam-switch__label {
@@ -14,6 +20,7 @@
   border-radius: calc(var(--amsterdam-switch-thumb-width) * 2);
   cursor: pointer;
   display: inline-block;
+  outline-offset: var(--amsterdam-switch-outline-offset);
   padding-block: 1px;
   padding-inline: 1px;
   transition: background-color 0.2s ease-in-out;
@@ -43,12 +50,6 @@
   cursor: not-allowed;
 }
 
-.amsterdam-switch__input:focus-visible + .amsterdam-switch__label {
-  outline-color: -webkit-focus-ring-color;
-  outline-offset: var(--amsterdam-switch-outline-offset);
-  outline-style: auto;
-}
-
 .amsterdam-switch__input:checked + .amsterdam-switch__label::before {
   // The 2px is to account for the 1px padding-inline on the label
   transform: translate(calc(var(--amsterdam-switch-width) - var(--amsterdam-switch-thumb-width) - 2px));

package/src/components/table/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Table
 
 Use the table component to let users compare information in rows and columns.
@@ -8,4 +10,4 @@ Table is used to display simple information that does not need to be filtered or
 - Use `<Table.Caption>` to describe a table in the same way you would use a heading.
   A caption helps users find, navigate and understand tables.
 - Never use the table component to layout content on a page.
-  Instead, use [Grid](https://amsterdam.github.io/design-system/?path=/docs/react_layout-grid--docs).
+  Instead, use [Grid](/docs/components-layout-grid--docs).

package/src/components/table/table.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-table {
@@ -25,8 +25,8 @@
 .amsterdam-table__cell,
 .amsterdam-table__header-cell {
   border-bottom: var(--amsterdam-table-cell-border-bottom);
-  padding-block: 1rem;
-  padding-inline: 1rem;
+  padding-block: var(--amsterdam-table-cell-padding-block);
+  padding-inline: var(--amsterdam-table-cell-padding-inline);
   text-align: start;
   vertical-align: top;
 }

package/src/components/tabs/README.md

@@ -0,0 +1,32 @@
+<!-- @license CC0-1.0 -->
+
+# 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.
+
+## How to Use
+
+- 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.
+
+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)

package/src/components/tabs/tabs.scss

@@ -0,0 +1,41 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/breakpoint";
+
+.amsterdam-tabs__list {
+  border-bottom: var(--amsterdam-tabs-list-border-bottom);
+  display: flex;
+  overflow-x: auto;
+}
+
+.amsterdam-tabs__button {
+  background-color: var(--amsterdam-tabs-button-background-color);
+  border: var(--amsterdam-tabs-button-border);
+  color: var(--amsterdam-tabs-button-color);
+  cursor: var(--amsterdam-tabs-button-cursor);
+  font-family: var(--amsterdam-tabs-button-font-family);
+  font-size: var(--amsterdam-tabs-button-font-size);
+  font-weight: var(--amsterdam-tabs-button-font-weight);
+  line-height: var(--amsterdam-tabs-button-line-height);
+  outline-offset: var(--amsterdam-tabs-button-outline-offset);
+  padding-block: var(--amsterdam-tabs-button-padding-block);
+  padding-inline: var(--amsterdam-tabs-button-padding-inline);
+
+  &:disabled {
+    color: var(--amsterdam-tabs-button-disabled-color);
+    cursor: var(--amsterdam-tab-button-disabled-cursor);
+  }
+
+  &:hover:not([aria-selected="true"], [disabled]) {
+    box-shadow: var(--amsterdam-tabs-button-hover-box-shadow);
+    color: var(--amsterdam-tabs-button-hover-color);
+  }
+
+  &[aria-selected="true"] {
+    background-color: var(--amsterdam-tabs-button-selected-background-color);
+    color: var(--amsterdam-tabs-button-selected-color);
+  }
+}

package/src/components/text-area/README.md

@@ -0,0 +1,17 @@
+<!-- @license CC0-1.0 -->
+
+# TextArea
+
+A form field that allows the user to input text over multiple lines.
+
+## Guidelines
+
+- Use a TextArea when users need to enter more than 1 sentence of text, such as a comment or description.
+- The height of the TextArea should be appropriate for the information to be entered.
+- A TextArea must have a label, and in most cases, this label should be visible.
+- Use `spellcheck="false"` for fields that may contain sensitive information, such as passwords and personal data.
+  Some browser extensions for spell-checking send this information to external servers.
+
+## Accessibility
+
+- [WCAG 2.1](https://www.w3.org/WAI/WCAG21/Techniques/html/H91.html) requires that the TextArea has a label or title attribute.

package/src/components/text-area/text-area.scss

@@ -0,0 +1,70 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-text-area {
+  border: none;
+  box-shadow: var(--amsterdam-text-area-box-shadow);
+  color: var(--amsterdam-text-area-color);
+  font-family: var(--amsterdam-text-area-font-family);
+  font-size: var(--amsterdam-text-area-font-size);
+  font-weight: var(--amsterdam-text-area-font-weight);
+  line-height: var(--amsterdam-text-area-line-height);
+  max-width: 100%;
+  min-height: var(--amsterdam-text-area-min-height);
+  outline-offset: var(--amsterdam-text-area-outline-offset);
+  padding-block: var(--amsterdam-text-area-padding-block);
+  padding-inline: var(--amsterdam-text-area-padding-inline);
+  touch-action: manipulation;
+  width: 100%;
+
+  @include reset;
+
+  &:hover {
+    box-shadow: var(--amsterdam-text-area-hover-box-shadow);
+  }
+}
+
+.amsterdam-text-area::placeholder {
+  color: var(--amsterdam-text-area-placeholder-color);
+}
+
+.amsterdam-text-area:disabled {
+  background-color: var(--amsterdam-text-area-disabled-background-color);
+  box-shadow: var(--amsterdam-text-area-disabled-box-shadow);
+  color: var(--amsterdam-text-area-disabled-color);
+  cursor: var(--amsterdam-text-area-disabled-cursor);
+}
+
+.amsterdam-text-area:invalid,
+.amsterdam-text-area[aria-invalid="true"] {
+  box-shadow: var(--amsterdam-text-area-invalid-box-shadow);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--amsterdam-text-area-invalid-hover-box-shadow);
+  }
+}
+
+.amsterdam-text-area--resize-none {
+  resize: none;
+}
+
+.amsterdam-text-area--resize-horizontal {
+  resize: inline;
+}
+
+.amsterdam-text-area--resize-vertical {
+  resize: block;
+}
+
+.amsterdam-text-area--cols {
+  width: auto;
+}

package/src/components/text-input/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Text Input
 
 A form field in which a user can enter text.

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

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin reset {
@@ -18,8 +18,8 @@
   font-weight: var(--amsterdam-text-input-font-weight);
   line-height: var(--amsterdam-text-input-line-height);
   outline-offset: var(--amsterdam-text-input-outline-offset);
-  padding-block: 0.5rem;
-  padding-inline: 1rem;
+  padding-block: var(--amsterdam-text-input-padding-block);
+  padding-inline: var(--amsterdam-text-input-padding-inline);
   touch-action: manipulation;
   width: 100%;
 

package/src/components/top-task-link/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Top Task Link
 
 A prominent navigation element to quickly start a task.
@@ -10,12 +12,12 @@ A prominent navigation element to quickly start a task.
 - Keep both texts concise.
   A title consists of a few words, and the description consists of 1 or 2 short sentences.
   The description should end with a period or another appropriate punctuation mark.
-- For wide windows, place 3 or 4 Top Task Links side by side on the [Grid](?path=/docs/react_layout-grid--docs).
+- For wide windows, place 3 or 4 Top Task Links side by side on the [Grid](/docs/components-layout-grid--docs).
   If you have more Top Task Links, place them in the next row.
   Try to distribute the amount of links on wide windows over rows of 3 or 4 links.
   If this is not possible, leave the last cells of the grid empty.
-- If you have a group of links for which a description is unnecessary or illogical, use a [Link List](?path=/docs/react_navigation-link--docs).
+- If you have a group of links for which a description is unnecessary or illogical, use a [Link List](/docs/components-navigation-link--docs).
 
 ## Relevant WCAG requirements
 
-The Top Task Link is subject to the same requirements as [regular links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).
+The Top Task Link is subject to the same requirements as [regular links](/docs/components-navigation-link--docs).

package/src/components/top-task-link/top-task-link.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @import "../../common/hyphenation";

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

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Unordered List
 
 A list is a vertical group of related content.

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

@@ -1,9 +1,9 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
-/** Apply border box sizing, reset whitespace and list styles. */
+/** Apply border box sizing, reset white space and list styles. */
 @mixin reset {
   box-sizing: border-box;
   list-style: none;
@@ -36,6 +36,10 @@
   }
 }
 
+.amsterdam-unordered-list--inverse-color:not(.amsterdam-unordered-list--no-markers) {
+  color: var(--amsterdam-unordered-list-inverse-color);
+}
+
 /** A nested list has a different marker and less indentation for correct alignment. */
 :is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-unordered-list {
   list-style-type: var(--amsterdam-unordered-list-unordered-list-list-style-type);

package/src/components/visually-hidden/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Visually Hidden
 
 Hides content from sighted users but keeps it accessible to non-visual user agents, such as screen readers.

package/src/components/visually-hidden/visually-hidden.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 // Source: https://css-tricks.com/inclusively-hidden/