@utrecht/web-component-library-stencil 2.1.0 → 2.2.0

package/dist/collection/components/link.css

@@ -111,16 +111,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
-.utrecht-link--icon-left {
-  background-image: var(--utrecht-link-icon-left-background-image, none);
-  background-position: 0 0.25em;
-  background-repeat: no-repeat;
-  color: var(--utrecht-link-color, LinkText);
-  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
-  padding-inline-start: var(--utrecht-space-block-md);
-  text-decoration-line: none;
-}
-
 .utrecht-link--visited {
   --_utrecht-link-forced-colors-color: visitedtext;
   --_utrecht-link-state-color: var(--utrecht-link-visited-color);
@@ -139,8 +129,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 .utrecht-link--focus {
   --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
   background-color: var(--utrecht-link-focus-background-color, transparent);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
@@ -162,18 +150,26 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  /*
+   * The following tokens are deprecated, but we keep them for backwards compatibility for now:
+   * 
+   * `--utrecht-link-focus-text-decoration`
+   * `--utrecht-link-focus-text-decoration-thickness`
+   */
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 
-/* `:focus` should only apply to links with `href`, not on disabled links */
-.utrecht-link--html-span:focus,
-.utrecht-link--html-a:any-link:focus {
-  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
-  background-color: var(--utrecht-link-focus-background-color, transparent);
-  text-decoration-skip: none;
-  text-decoration-skip-ink: none;
+/* The `:focus-visible` styling for the focus should apply disabled links too, in case of `tabindex="0"` */
+.utrecht-link--html-span:focus-visible,
+.utrecht-link--html-a:focus-visible {
   /*
    * WCAG SC 2.4.12: Focus Not Obscured
    * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
@@ -189,14 +185,30 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  /*
+   * The following tokens are deprecated, but we keep them for backwards compatibility for now:
+   * 
+   * `--utrecht-link-focus-text-decoration`
+   * `--utrecht-link-focus-text-decoration-thickness`
+   */
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 
-.utrecht-link--html-span:focus:not(:focus-visible),
-.utrecht-link--html-a:any-link:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
+/* `:focus` should only apply to links with `href`, not on disabled links */
+.utrecht-link--html-span:focus,
+.utrecht-link--html-a:any-link:focus {
+  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
+  background-color: var(--utrecht-link-focus-background-color, transparent);
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
 }
 
 .utrecht-link--html-span:active,

package/dist/collection/components/link.js

@@ -11,7 +11,7 @@ export class Link {
         this.target = undefined;
     }
     render() {
-        return (h("a", { key: 'a1837fa8f97ba2dfcbda82005e0ff13dafa46ac3', download: typeof this.download === 'string' ? this.download : undefined, href: typeof this.href === 'string' ? this.href : undefined, target: typeof this.target === 'string' ? this.target : undefined, class: "utrecht-link utrecht-link--html-a" }, h("slot", { key: '23e0856642a0f1a4088c7ebbd61832de26941658' })));
+        return (h("a", { key: 'b45fe4a1e844aa1d4fe8a74044b194140f695258', download: typeof this.download === 'string' ? this.download : undefined, href: typeof this.href === 'string' ? this.href : undefined, target: typeof this.target === 'string' ? this.target : undefined, class: "utrecht-link utrecht-link--html-a" }, h("slot", { key: '0e888a7e0add3be2f286b9b5bbb4e3e346008432' })));
     }
     static get is() { return "utrecht-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/logo-button.js

@@ -6,7 +6,7 @@
 import { h } from "@stencil/core";
 export class DigidButton {
     render() {
-        return (h("div", { key: 'e2a357b9b6a819e67310ceb89b4fa3dee69b9b2f', class: "utrecht-logo-button" }, h("slot", { key: '7d76821bfa58b392694dbea3d917b50edb94401f' })));
+        return (h("div", { key: '332962a4486946a495c25f477685e6f436f24101', class: "utrecht-logo-button" }, h("slot", { key: 'a39c1fb65776df51f63486ebfa76904465ba2560' })));
     }
     static get is() { return "utrecht-logo-button"; }
     static get encapsulation() { return "shadow"; }