@utrecht/component-library-css 1.0.0-alpha.313 → 1.0.0-alpha.316

package/dist/html.css

@@ -668,6 +668,7 @@
   --utrecht-space-around: 1;
 }
 .utrecht-html a:link {
+  --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
   color: var(--utrecht-link-color, blue);
   text-decoration: var(--utrecht-link-text-decoration, underline);
   text-decoration-skip-ink: all;

package/dist/index.css

@@ -1364,14 +1364,6 @@ ol.utrecht-breadcrumb__list {
   gap: var(--utrecht-space-inline-sm);
 }
 
-.utrecht-digid-button__logo {
-  order: 1;
-}
-
-.utrecht-digid-button__button {
-  order: 2;
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -2160,6 +2152,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
  */
 /* stylelint-disable-next-line block-no-empty */
 .utrecht-link-button {
+  --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
   color: var(--utrecht-link-color, blue);
   text-decoration: var(--utrecht-link-text-decoration, underline);
   text-decoration-skip-ink: all;
@@ -2344,6 +2337,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
  * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
  */
 .utrecht-link {
+  --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
   color: var(--utrecht-link-color, blue);
   text-decoration: var(--utrecht-link-text-decoration, underline);
   text-decoration-skip-ink: all;
@@ -3408,6 +3402,83 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-space-around: 1;
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-skip-link {
+  align-items: center;
+  background-color: var(--utrecht-skip-link-background-color);
+  box-sizing: border-box;
+  color: var(--utrecht-skip-link-color);
+  display: inline-flex;
+  justify-content: center;
+  min-block-size: var(--utrecht-skip-link-min-block-size, 44px);
+  min-inline-size: var(--utrecht-skip-link-min-inline-size, 44px);
+  padding-block-end: var(--utrecht-skip-link-padding-block-end);
+  padding-block-start: var(--utrecht-skip-link-padding-block-start);
+  padding-inline-end: var(--utrecht-skip-link-padding-inline-end);
+  padding-inline-start: var(--utrecht-skip-link-padding-inline-start);
+  text-decoration: var(--utrecht-skip-link-text-decoration);
+}
+
+.utrecht-skip-link--hidden {
+  inset-block-start: -200%;
+  position: fixed;
+}
+
+.utrecht-skip-link--visible-on-focus {
+  inset-block-start: -200%;
+  position: fixed;
+}
+
+.utrecht-skip-link--visible-on-focus:focus {
+  /**
+   * WCAG 2.2 / 2.4.12: "No part of the focus indicator is hidden by author-created content".
+   * To go the extra mile, ensure the focus indicator is inside the viewport.
+   * */
+  --_utrecht-skip-link-inset: calc(var(--utrecht-focus-outline-width, 0px) + var(--utrecht-focus-outline-offset, 0px));
+  inset-block-start: var(--_utrecht-skip-link-inset, 0);
+  inset-inline-start: var(--_utrecht-skip-link-inset, 0);
+  position: fixed;
+  z-index: var(--utrecht-skip-link-z-index, var(--utrecht-layer-focus-z-index));
+}
+
+.utrecht-skip-link--visible {
+  /**
+   * WCAG 2.2 / 2.4.12: "No part of the focus indicator is hidden by author-created content".
+   * To go the extra mile, ensure the focus indicator is inside the viewport.
+   * */
+  --_utrecht-skip-link-inset: calc(var(--utrecht-focus-outline-width, 0px) + var(--utrecht-focus-outline-offset, 0px));
+  inset-block-start: var(--_utrecht-skip-link-inset, 0);
+  inset-inline-start: var(--_utrecht-skip-link-inset, 0);
+  position: fixed;
+  z-index: var(--utrecht-skip-link-z-index, var(--utrecht-layer-focus-z-index));
+}
+
+.utrecht-skip-link--focus,
+.utrecht-skip-link:focus,
+.utrecht-skip-link:focus-visible {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+  text-decoration: var(--utrecht-skip-link-focus-text-decoration);
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.313",
+  "version": "1.0.0-alpha.316",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -16,7 +16,7 @@
     "url": "git@github.com:nl-design-system/utrecht.git"
   },
   "devDependencies": {
-    "@utrecht/design-tokens": "1.0.0-alpha.306",
+    "@utrecht/design-tokens": "1.0.0-alpha.309",
     "node-sass-package-importer": "5.3.2",
     "rimraf": "3.0.2",
     "sass": "1.54.0"
@@ -27,5 +27,5 @@
     "clean": "rimraf dist/"
   },
   "main": "dist/index.css",
-  "gitHead": "f49b8678328b2c3ad2b3878e5df0ea4a2ea8658a"
+  "gitHead": "552fc2fe6aa787d06d6e5d291432abca4d3c205c"
 }

package/src/index.scss

@@ -73,6 +73,7 @@
 @import "../../../components/search-bar/css";
 @import "../../../components/select/css";
 @import "../../../components/separator/css";
+@import "../../../components/skip-link/css";
 @import "../../../components/surface/css";
 @import "../../../components/table/css";
 @import "../../../components/textarea/css";