@utrecht/web-component-library-stencil 1.0.0-alpha.194 → 1.0.0-alpha.197

package/dist/collection/checkbox/stencil.css

@@ -28,7 +28,7 @@
 .utrecht-checkbox--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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
@@ -36,7 +36,7 @@
 .utrecht-checkbox--html-input:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }

package/dist/collection/custom-checkbox/stencil.css

@@ -32,7 +32,7 @@
 .utrecht-checkbox--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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
@@ -40,7 +40,7 @@
 .utrecht-checkbox--html-input:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
@@ -143,7 +143,7 @@
 .utrecht-custom-checkbox__box--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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
@@ -151,7 +151,7 @@
 .utrecht-custom-checkbox__input:focus ~ .utrecht-custom-checkbox__box {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }

package/dist/collection/form-field-checkbox/stencil.css

@@ -79,7 +79,7 @@
 .utrecht-checkbox--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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
@@ -87,7 +87,7 @@
 .utrecht-checkbox--html-input:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }

package/dist/collection/form-field-textarea/stencil.css

@@ -98,7 +98,7 @@
 .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }

package/dist/collection/form-field-textbox/stencil.css

@@ -90,7 +90,7 @@
 .utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }

package/dist/collection/html-content/stencil.css

@@ -8,16 +8,6 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 /* Collection of all semantic HTML styles in the component library */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -153,7 +143,7 @@
   /* the pseudo-class for `:focus-visible` is implemented via the mixin */
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
@@ -221,7 +211,7 @@
 .utrecht-checkbox--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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
@@ -229,7 +219,7 @@
 .utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
@@ -573,7 +563,7 @@ 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 {
+.utrecht-link--icon-left {
   background-image: var(--utrecht-link-icon-left-background-image, none);
   background-position: 0 0.25em;
   background-repeat: no-repeat;
@@ -616,7 +606,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
@@ -633,6 +623,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   white-space: nowrap;
 }
 
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-html a:focus:not(:focus-visible) {
   /* undo focus ring */
   box-shadow: none;
@@ -731,7 +723,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
@@ -923,7 +915,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
@@ -1071,7 +1063,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html input[type=week i]:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }

package/dist/collection/link/css/template.js

@@ -0,0 +1,57 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  active: false,
+  current: false,
+  external: false,
+  hreflang: '',
+  hover: false,
+  lang: '',
+  focus: false,
+  focusVisible: false,
+  href: null,
+  telephone: false,
+  textContent: '...',
+  title: '',
+  visited: false,
+  iconleft: false,
+};
+
+export const Link = ({
+  active = defaultArgs.active,
+  current = defaultArgs.current,
+  external = defaultArgs.external,
+  hreflang = defaultArgs.hreflang,
+  hover = defaultArgs.hover,
+  lang = defaultArgs.lang,
+  focus = defaultArgs.focus,
+  focusVisible = defaultArgs.focusVisible,
+  href = defaultArgs.href,
+  telephone = defaultArgs.telephone,
+  textContent = defaultArgs.textContent,
+  title = defaultArgs.title,
+  visited = defaultArgs.visited,
+  iconleft = defaultArgs.iconleft,
+}) =>
+  `<a href="${href === null ? `https://example.com/${lang}` : href}" class="${clsx('utrecht-link', {
+    'utrecht-link--active': active,
+    'utrecht-link--alternate-lang': lang && !current,
+    'utrecht-link--current-lang': lang && current,
+    'utrecht-link--external': external,
+    'utrecht-link--focus': focus,
+    'utrecht-link--focus-visible': focusVisible,
+    'utrecht-link--hover': hover,
+    'utrecht-link--telephone': telephone,
+    'utrecht-link--visited': visited,
+    'utrecht-link--icon-left': iconleft,
+  })}"${external ? ' rel="external noopener noreferrer"' : ''}${current ? ' aria-current="page"' : ''}${
+    title ? ` title="${title}"` : ''
+  }${hreflang ? ` hreflang="${hreflang}"` : ''}${lang ? ` lang="${lang}"` : ''}${
+    !current ? ' rel="alternate"' : ''
+  }>${textContent}</a>`;

package/dist/collection/link/html/template.js

@@ -0,0 +1,11 @@
+export const Link = ({ external = false, href = null, textContent = '' }) =>
+  `<section class="utrecht-html">
+  <a href="${href === null ? '#' : href}"${external ? ' rel="external noopener noreferrer"' : ''}>${textContent}</a>
+</section>`;
+
+export const AlternateLangLink = ({ textContent, title, current, lang, hreflang }) =>
+  `<section class="utrecht-html">
+  <a href="https://example.com/${lang}/" ${
+    current ? 'aria-current="page"' : ''
+  } title="${title}" hreflang="${hreflang}" lang="${lang}"${!current ? 'rel="alternate"' : ''}>${textContent}</a>
+</section>`;

package/dist/collection/link-list/bem.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 
-import { Link } from '../link/bem';
+import { Link } from '../link/css/template';
 
 export const LinkList = ({ links = [] }) => `<ul class="utrecht-link-list utrecht-link-list--html-ul">
   ${links.map((link) => `<li class="utrecht-link-list__item">${Link(link)}</li>`).join('\n  ')}

package/dist/collection/navigatie sidenav/bem.css

@@ -81,7 +81,7 @@
 .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }

package/dist/collection/pagination/stencil.css

@@ -97,7 +97,7 @@
 .utrecht-pagination__relative-link:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }

package/dist/collection/templates/contact-card-template/stencil.css

@@ -77,7 +77,7 @@ 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 {
+.utrecht-link--icon-left {
   background-image: var(--utrecht-link-icon-left-background-image, none);
   background-position: 0 0.25em;
   background-repeat: no-repeat;
@@ -117,7 +117,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-link--focus-visible, .utrecht-link:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
@@ -134,6 +134,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   white-space: nowrap;
 }
 
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma

package/dist/collection/textbox/stencil.css

@@ -53,7 +53,7 @@
 .utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus {
   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: 0;
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }