@utrecht/web-component-library-stencil 4.0.0 → 4.1.1

package/dist/collection/components/action-group.css

@@ -1,11 +1,16 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2022 Frameless B.V.
- */
+* @license EUPL-1.2
+* Copyright (c) 2022 Frameless B.V.
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2022 Frameless B.V.
+*/
 .utrecht-action-group {
   align-items: baseline;
   background-color: var(--utrecht-action-group-background-color);
@@ -43,11 +48,6 @@
   inline-size: fit-content;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/alert.css

@@ -3,12 +3,17 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
-/* stylelint-disable-next-line block-no-empty */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-alert {
   background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
   border-color: var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));
@@ -75,11 +80,6 @@
   --_utrecht-alert-color: var(--utrecht-alert-error-color);
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/alert.js

@@ -7,6 +7,7 @@ import { h } from "@stencil/core";
 import clsx from "clsx";
 const enumGuard = (values) => (x) => values.includes(x);
 const ROLES = ['status', 'alert'];
+const isAlertRole = enumGuard(ROLES);
 const TYPES = ['error', 'warning', 'info', 'ok'];
 const isAlertType = enumGuard(TYPES);
 const typeToRole = {
@@ -21,8 +22,8 @@ export class Alert {
     }
     render() {
         const computedType = isAlertType(this.type) ? this.type : 'info';
-        const computedRole = typeToRole[computedType];
-        return (h("div", { key: '78202aaff6a6c49ed221c868b67edf0af5da1ca0', class: clsx('utrecht-alert', `utrecht-alert--${computedType}`) }, h("div", { key: 'dd94159886c38e21f73e3829f4240bbe56a96e76', class: "utrecht-alert__icon" }, h("slot", { key: 'd773a32bb9ac9203c338aca9996d34d42f537bfb', name: "icon" })), h("div", { key: '73b2513ed1e39e3aa93a341f042cf46de9e89091', class: "utrecht-alert__content" }, h("div", { key: 'a02e529be9f29dff8cf49ceb43a72f8212c9cd19', class: "utrecht-alert__message", role: computedRole }, h("slot", { key: '6585ae335be299fcdc097c5ce4c92129955fbf41' })))));
+        const computedRole = isAlertRole(typeToRole[computedType]) ? typeToRole[computedType] : 'status';
+        return (h("div", { key: 'b55c15b4ba985f5cf49b3edf8564ad698ab08332', class: clsx('utrecht-alert', `utrecht-alert--${computedType}`) }, h("div", { key: '979fba4b78603a6a46c4c61e28a0c7b0411567f7', class: "utrecht-alert__icon" }, h("slot", { key: 'fce4262e8df49413c6fc2af1448766d647988b7e', name: "icon" })), h("div", { key: '4494157b106bca1c9213b78c44c36c34b04a01a0', class: "utrecht-alert__content" }, h("div", { key: '654e071124ad372ec08fb474532da28de9ab8a2b', class: "utrecht-alert__message", role: computedRole }, h("slot", { key: '171e19b07378e008490b5db0ff2f6a9ffba5dbef' })))));
     }
     static get is() { return "utrecht-alert"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../src/components/alert.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,SAAS,GACb,CAAK,MAAoB,EAAE,EAAE,CAC7B,CAAK,CAAU,EAAU,EAAE,CACzB,MAAM,CAAC,QAAQ,CAAC,CAAU,CAAC,CAAC;AAEhC,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAC;AAG3C,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,CAAU,CAAC;AAE1D,MAAM,WAAW,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;AAErC,MAAM,UAAU,GAAiC;IAC/C,IAAI,EAAE,QAAQ;IACd,EAAE,EAAE,QAAQ;IACZ,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,OAAO;CACf,CAAC;AAOF,MAAM,OAAO,KAAK;;;;IAGhB,MAAM;QACJ,MAAM,YAAY,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAE,IAAI,CAAC,IAAkB,CAAC,CAAC,CAAC,MAAM,CAAC;QAChF,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;QAC9C,OAAO,CACL,4DAAK,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,kBAAkB,YAAY,EAAE,CAAC;YACjE,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;YACN,4DAAK,KAAK,EAAC,wBAAwB;gBACjC,4DAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,YAAY;oBACpD,8DAAa,CACT,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nconst enumGuard =\n  <T,>(values: readonly T[]) =>\n  <T,>(x: unknown): x is T =>\n    values.includes(x as never);\n\nconst ROLES = ['status', 'alert'] as const;\ntype AlertRole = (typeof ROLES)[number];\n\nconst TYPES = ['error', 'warning', 'info', 'ok'] as const;\ntype AlertType = (typeof TYPES)[number];\nconst isAlertType = enumGuard(TYPES);\n\nconst typeToRole: Record<AlertType, AlertRole> = {\n  info: 'status',\n  ok: 'status',\n  warning: 'alert',\n  error: 'alert',\n};\n\n@Component({\n  tag: 'utrecht-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Prop() type: string;\n\n  render() {\n    const computedType = isAlertType(this.type) ? (this.type as AlertType) : 'info';\n    const computedRole = typeToRole[computedType];\n    return (\n      <div class={clsx('utrecht-alert', `utrecht-alert--${computedType}`)}>\n        <div class=\"utrecht-alert__icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n        <div class=\"utrecht-alert__content\">\n          <div class=\"utrecht-alert__message\" role={computedRole}>\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../src/components/alert.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,SAAS,GACb,CAAoB,MAAoB,EAAE,EAAE,CAC5C,CAAC,CAAU,EAAU,EAAE,CACrB,MAAM,CAAC,QAAQ,CAAC,CAAM,CAAC,CAAC;AAE5B,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAC;AAE3C,MAAM,WAAW,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;AAErC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,CAAU,CAAC;AAE1D,MAAM,WAAW,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;AAErC,MAAM,UAAU,GAAiC;IAC/C,IAAI,EAAE,QAAQ;IACd,EAAE,EAAE,QAAQ;IACZ,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,OAAO;CACf,CAAC;AAOF,MAAM,OAAO,KAAK;;;;IAGhB,MAAM;QACJ,MAAM,YAAY,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;QACjE,MAAM,YAAY,GAAG,WAAW,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QACjG,OAAO,CACL,4DAAK,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,kBAAkB,YAAY,EAAE,CAAC;YACjE,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;YACN,4DAAK,KAAK,EAAC,wBAAwB;gBACjC,4DAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,YAAY;oBACpD,8DAAa,CACT,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nconst enumGuard =\n  <T extends unknown>(values: readonly T[]) =>\n  (x: unknown): x is T =>\n    values.includes(x as T);\n\nconst ROLES = ['status', 'alert'] as const;\ntype AlertRole = (typeof ROLES)[number];\nconst isAlertRole = enumGuard(ROLES);\n\nconst TYPES = ['error', 'warning', 'info', 'ok'] as const;\ntype AlertType = (typeof TYPES)[number];\nconst isAlertType = enumGuard(TYPES);\n\nconst typeToRole: Record<AlertType, AlertRole> = {\n  info: 'status',\n  ok: 'status',\n  warning: 'alert',\n  error: 'alert',\n};\n\n@Component({\n  tag: 'utrecht-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Prop() type: string;\n\n  render() {\n    const computedType = isAlertType(this.type) ? this.type : 'info';\n    const computedRole = isAlertRole(typeToRole[computedType]) ? typeToRole[computedType] : 'status';\n    return (\n      <div class={clsx('utrecht-alert', `utrecht-alert--${computedType}`)}>\n        <div class=\"utrecht-alert__icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n        <div class=\"utrecht-alert__content\">\n          <div class=\"utrecht-alert__message\" role={computedRole}>\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/article.css

@@ -4,19 +4,19 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 .utrecht-article {
   max-inline-size: var(--utrecht-article-max-inline-size);
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/backdrop.css

@@ -4,10 +4,15 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 .utrecht-backdrop {
   --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
   --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
@@ -19,13 +24,6 @@
   opacity: var(--_utrecht-backdrop-opacity);
   -webkit-user-select: none;
   user-select: none;
-  display: block;
-  inset-block-end: 0;
-  inset-block-start: 0;
-  inset-inline-end: 0;
-  inset-inline-start: 0;
-  position: absolute;
-  z-index: var(--utrecht-backdrop-z-index);
 }
 @keyframes utrecht-backdrop-fade-in {
   from {
@@ -45,6 +43,15 @@
     --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
   }
 }
+.utrecht-backdrop {
+  display: block;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  position: absolute;
+  z-index: var(--utrecht-backdrop-z-index);
+}
 
 .utrecht-backdrop--reduced-motion {
   --_utrecht-backdrop-fade-in-animation-duration: 0;
@@ -58,11 +65,6 @@
   position: fixed;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/badge-counter.css

@@ -4,15 +4,20 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 .utrecht-badge-counter {
   /* Limit size to `max-content`, so the badge will not be stretched out of proportion inside a flexbox */
   background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
@@ -45,11 +50,6 @@
   }
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: inline-block;
 }

package/dist/collection/components/badge-list.css

@@ -4,10 +4,15 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 .utrecht-badge-list {
   column-gap: var(--utrecht-badge-list-column-gap);
   display: flex;
@@ -15,11 +20,6 @@
   row-gap: var(--utrecht-badge-list-row-gap);
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/body.css

@@ -4,10 +4,10 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 :host {
   /*
    * Goals:
@@ -16,10 +16,6 @@
    * - take up 100% of the space, both horizontally and vertically.
    */
   block-size: 100%;
-  font-family: var(--utrecht-body-font-family, inherit);
-  font-size: var(--utrecht-body-font-size, inherit);
-  font-weight: var(--utrecht-body-font-weight, inherit);
-  line-height: var(--utrecht-body-line-height, inherit);
   margin-block-end: 0;
   margin-block-start: 0;
   margin-inline-end: 0;

package/dist/collection/components/body.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 import { h } from "@stencil/core";
-export class Root {
+export class Body {
     render() {
         return h("slot", { key: '3ce9d330f587ae850baee2d58c1d48185814525a' });
     }

package/dist/collection/components/body.js.map

@@ -1 +1 @@
-{"version":3,"file":"body.js","sourceRoot":"","sources":["../../src/components/body.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,IAAI;IACf,MAAM;QACJ,OAAO,8DAAa,CAAC;IACvB,CAAC;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-body',\n  styleUrl: 'body.scss',\n  shadow: true,\n})\nexport class Root {\n  render() {\n    return <slot></slot>;\n  }\n}\n"]}
+{"version":3,"file":"body.js","sourceRoot":"","sources":["../../src/components/body.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,IAAI;IACf,MAAM;QACJ,OAAO,8DAAa,CAAC;IACvB,CAAC;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-body',\n  styleUrl: 'body.scss',\n  shadow: true,\n})\nexport class Body {\n  render() {\n    return <slot></slot>;\n  }\n}\n"]}

package/dist/collection/components/breadcrumb-nav.css

@@ -3,12 +3,17 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
-/* stylelint-disable-next-line block-no-empty */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-breadcrumb-nav {
   --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
   --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
@@ -192,16 +197,34 @@
 }
 
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
-/* stylelint-disable-next-line block-no-empty */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable scss/no-global-function-names */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable scss/no-global-function-names */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* stylelint-disable scss/no-global-function-names */
 /*
 
@@ -270,12 +293,6 @@ 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.
  */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
-/* stylelint-disable scss/no-global-function-names */
 .utrecht-link {
   --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
   color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
@@ -446,11 +463,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-link-placeholder-color: GrayText;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/button-group.css

@@ -1,11 +1,16 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2022 Frameless B.V.
- */
+* @license EUPL-1.2
+* Copyright (c) 2022 Frameless B.V.
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2022 Frameless B.V.
+*/
 .utrecht-button-group {
   align-items: baseline;
   background-color: var(--utrecht-button-group-background-color);
@@ -36,11 +41,6 @@
   gap: var(--utrecht-button-group-block-gap, 1em);
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/button-link.css

@@ -3,23 +3,39 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
-/* stylelint-disable-next-line block-no-empty */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
  */
 /* stylelint-disable-next-line block-no-empty */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 .utrecht-button-link {
   /*
   `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
@@ -241,7 +257,7 @@
   font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
   font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
   inline-size: var(--utrecht-button-inline-size, auto);
-  justify-content: center;
+  justify-content: var(--utrecht-button-justify-content, center);
   line-height: var(--_utrecht-button-line-height);
   max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
   min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -254,8 +270,6 @@
   text-transform: var(--utrecht-button-text-transform);
   -webkit-user-select: none;
   user-select: none;
-  cursor: var(--utrecht-action-navigate-cursor, pointer);
-  text-decoration: none;
 }
 @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
   .utrecht-button-link {
@@ -273,6 +287,10 @@
     /* TODO: Find a way to express the `pressed` state */
   }
 }
+.utrecht-button-link {
+  cursor: var(--utrecht-action-navigate-cursor, pointer);
+  text-decoration: none;
+}
 
 .utrecht-button-link--active {
   background-color: var(--_utrecht-button-active-background-color);
@@ -425,11 +443,6 @@
   --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: inline-flex;
 }

package/dist/collection/components/button.css

@@ -3,18 +3,34 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
-/* stylelint-disable-next-line block-no-empty */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
-/* stylelint-disable-next-line block-no-empty */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
  */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-button {
   /*
   `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
@@ -236,7 +252,7 @@
   font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
   font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
   inline-size: var(--utrecht-button-inline-size, auto);
-  justify-content: center;
+  justify-content: var(--utrecht-button-justify-content, center);
   line-height: var(--_utrecht-button-line-height);
   max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
   min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -658,11 +674,6 @@
   --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-warning-pressed-color);
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: inline-block;
 }

package/dist/collection/components/checkbox.css

@@ -3,18 +3,34 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
-/* stylelint-disable-next-line block-no-empty */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
-/* stylelint-disable-next-line block-no-empty */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
  */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-checkbox {
   margin-block-end: 0; /* reset native margin for input[type="checkbox"] */
   margin-block-start: 0;
@@ -63,11 +79,6 @@
   z-index: 1;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }