@utrecht/component-library-css 1.0.0-alpha.315 → 1.0.0-alpha.318

package/dist/index.css

@@ -2785,7 +2785,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
 /**
  * @license EUPL-1.2
@@ -3402,6 +3403,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.315",
+  "version": "1.0.0-alpha.318",
   "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,6 @@
     "url": "git@github.com:nl-design-system/utrecht.git"
   },
   "devDependencies": {
-    "@utrecht/design-tokens": "1.0.0-alpha.308",
     "node-sass-package-importer": "5.3.2",
     "rimraf": "3.0.2",
     "sass": "1.54.0"
@@ -27,5 +26,5 @@
     "clean": "rimraf dist/"
   },
   "main": "dist/index.css",
-  "gitHead": "7cbbed6c52dac050b45d95ba4c63e91cf93ce630"
+  "gitHead": "40f94d1ad0325a155b00186d2844b30cf98e7169"
 }

package/project.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "root": "{workspaceRoot}/packages/component-library-css",
+  "sourceRoot": "{projectRoot}",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/workspace:run-commands",
+      "outputs": ["{projectRoot}/dist"],
+      "options": {
+        "command": "npm run build",
+        "cwd": "packages/component-library-css"
+      },
+      "dependsOn": ["^build"]
+    }
+  }
+}

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";