@utrecht/web-component-library-stencil 4.1.0 → 4.2.0

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

@@ -25,6 +25,12 @@
 * 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`.
+ */
 /*
 
 # CSS implementation

package/dist/collection/components/link.css

@@ -15,6 +15,12 @@
 * 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.

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

@@ -35,4 +35,11 @@ div {
 
 :host([hidden]) {
   display: none !important;
+}
+
+:host([sticky]) {
+  background-color: var(--utrecht-nav-bar-background-color, Canvas);
+  color: var(--utrecht-nav-bar-color, CanvasText);
+  inset-block-start: 0;
+  position: sticky;
 }

package/dist/collection/components/nav-bar.js

@@ -5,8 +5,11 @@ import { h } from "@stencil/core";
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 export class NavBar {
+    constructor() {
+        this.sticky = false;
+    }
     render() {
-        return (h("div", { key: '1ff3dfeefd34721e32d9d67174d7ab62b64f1885' }, h("slot", { key: '7d0c33cfe6dc0efd182b4c442a592460e378cbe8' })));
+        return (h("div", { key: '77525d5333f5b21f82d6fe12c05e8aa3d7630d4c' }, h("slot", { key: '0eee79b3ce4c2a7b786b55aa7dbbb6fb0687e915' })));
     }
     static get is() { return "utrecht-nav-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -20,5 +23,27 @@ export class NavBar {
             "$": ["nav-bar.css"]
         };
     }
+    static get properties() {
+        return {
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sticky",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
 }
 //# sourceMappingURL=nav-bar.js.map

package/dist/collection/components/nav-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-bar.js","sourceRoot":"","sources":["../../src/components/nav-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;GAIG;AAOH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL;YACE,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@Component({\n  tag: 'utrecht-nav-bar',\n  styleUrl: 'nav-bar.scss',\n  shadow: true,\n})\nexport class NavBar {\n  render() {\n    return (\n      <div>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nav-bar.js","sourceRoot":"","sources":["../../src/components/nav-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;GAIG;AAOH,MAAM,OAAO,MAAM;;sBACS,KAAK;;IAE/B,MAAM;QACJ,OAAO,CACL;YACE,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@Component({\n  tag: 'utrecht-nav-bar',\n  styleUrl: 'nav-bar.scss',\n  shadow: true,\n})\nexport class NavBar {\n  @Prop() sticky: boolean = false;\n\n  render() {\n    return (\n      <div>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/number-data.css

@@ -8,6 +8,10 @@
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
+/**
+ * Source:
+ * https://github.com/nl-design-system/candidate/blob/a0246970175883a874aacc9431a1596c429e6319/packages/components-css/number-badge-css/src/_mixin.scss#L5-L16
+ */
 :host {
   display: inline;
   font-variant-numeric: lining-nums tabular-nums;

package/dist/collection/components/page-layout.css

@@ -10,7 +10,7 @@
 */
 :host {
   align-items: flex-start;
-  block-size: 100%;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   inline-size: 100%;

package/dist/collection/components/pagination.css

@@ -14,6 +14,12 @@
 * 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.

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

@@ -31,6 +31,9 @@
   align-items: var(--denhaag-process-steps-step-header-align-items);
   gap: 16px;
 }
+.denhaag-process-steps__step-header--nested {
+  gap: 24px;
+}
 
 .denhaag-process-steps__step-header-toggle {
   --utrecht-button-subtle-font-size: inherit;
@@ -119,12 +122,14 @@
   color: var(--denhaag-process-steps-step-meta-date-color, var(--denhaag-process-steps-step-meta-color));
 }
 
+.denhaag-process-steps__step-meta--nested {
+  font-size: var(--denhaag-process-steps-step-meta-nested-font-size, var(--denhaag-process-steps-step-meta-font-size));
+  margin-block-start: var(--denhaag-process-steps-step-meta-nested-margin-block-start);
+  margin-inline-start: 48px;
+}
+
 .denhaag-process-steps__sub-step {
   position: relative;
-  align-items: baseline;
-  display: flex;
-  flex-direction: row;
-  gap: 23px;
   margin-block-start: var(--denhaag-process-steps-sub-step-distance);
 }
 

package/dist/collection/components/root.css

@@ -8,10 +8,54 @@
 * 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`.
+ */
+/**
+ * Only use this on Root components with an explicit height, that is not calculated based on its children.
+ */
+/**
+ * Use this mixin for `<html class="utrecht-root">`.
+ */
+/**
+ * Use this mixin for `<body class="utrecht-root">`.
+ */
+/**
+ * The focus indicator should be applied to all elements that have the `:focus-visible` state.
+ */
+/**
+ * Avoid setting `font-size` on `:root` if you want to keep `1rem` at `16px` for most users.
+ * Set `line-height` on the same element as `font-size`, to support font-relative line heights,
+ * even though they are discouraged.
+ */
+/**
+ * Ensure enough contrast with `var(--utrecht-root-color)`, by overriding the
+ * browser black default background color of full screen elements.
+ *
+ * You can test this by opening any element inside the Root component with the
+ * following JavaScript, for example the Heading 1:
+ *
+ *     document.querySelector('h1').requestFullscreen()
+ *
+ * In dark mode there might be enough contrast, but dark text on a black background
+ * would become unreadable in full screen.
+ *
+ * Use `:where()` so this background color can be overriden by a CSS selector
+ * with a higher specificity than (0,0,1).
+ */
 :host {
   /*
    * Goals:
-   * 
+   *
    * - take up 100% of the space, both horizontally and vertically.
    * - create a scrollable viewport experience both on `<html>` in the root,
    *   as well as on a `<div>` somewhere in a document.
@@ -20,27 +64,106 @@
    *   outside the normal document flow (`absolute`, `fixed` and `sticky`)
    *   are positioned relative to the root component.
    * - ensure text content fits at 400% zoom by enabling hypenation.
+   * - do not influence the `rem` unit by avoiding `font-size` on the root element.
+   * - reset `body` element styles for `margin`
+   * - reset `dialog` element styles for `border`, `margin` and `padding`
    */
-  /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
+  /* Prevent a less accessible page with lower text contrast, because other CSS is downgrading from `subpixel-antialiased` to `antialiased`.
+   * Reset `font-smoothing: antialiasing` to `auto`, and prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens. */
   -webkit-font-smoothing: auto !important;
   -moz-osx-font-smoothing: auto !important;
-  background-color: var(--utrecht-root-background-color);
-  block-size: 100%;
-  color: var(--utrecht-root-color);
+  /* For some new properties, temporarily provide the `utrecht.body.*` design tokens as fallback for backwards compatibility. */
+  /**
+   * When the Root component is positioned above another content,
+   * the text must remain legible. Avoid a transparent background,
+   * causing underlying content to interfere with contents of Root.
+   *
+   * When no `background-color` design token is specified, fallback
+   * to the system `Canvas` color.
+   */
+  background-color: var(--utrecht-root-background-color, Canvas);
+  /* Avoid `border` on a `dialog` element. */
+  border: 0;
+  /*
+   * Avoid overflowing scroll container because of a `border` or `padding`,
+   * by configuring `box-sizing: border-box`.
+   */
+  box-sizing: border-box;
+  /**
+   * Prevent there is insufficient color contrast for text, when no design tokens
+   * for `color` and `background-color` are specified. In that case use
+   * the system default colors `Canvas` and `CanvasText`.
+   */
+  color: var(--utrecht-root-color, CanvasText);
   font-family: var(--utrecht-root-font-family);
+  font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
+  font-weight: var(--utrecht-root-font-weight, var(--utrecht-body-font-weight));
+  /* Avoid changing the meaning of text by adding word-breaks without hyphenation,
+   * in languages where this is appropriate. Browsers will hyphenate based on the language of the text
+   * as specified in the `lang` HTML-attribute.
+   */
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   inline-size: 100%;
-  overflow-block: auto;
-  overflow-inline: auto;
+  /* Avoid `margin` on the `body` and `dialog` element. */
+  /* stylelint-disable-next-line property-disallowed-list */
+  margin: 0;
+  min-block-size: 100%;
+  overflow-wrap: break-word;
+  /* Avoid `padding` on the `dialog` element. */
+  /* stylelint-disable-next-line property-disallowed-list */
+  padding: 0;
+  /* Position fixed and sticky elements relative to the Root component,
+   * such as the Skip Link or a Sticky Navigation Bar.
+   *
+   * While the `html` element supports this out-of-the-box,
+   * adding `position: relative` adds support for elements such as `div` and `dialog`.
+   */
   position: relative;
+  /* Prefer legibility over rendering speed, for all font-sizes.
+   *
+   * When user tests and metrics indicate slow performance, we should reconsider this choice.
+   *
+   * For specific parts of the page that require high performance, this setting should
+   * be disabled locally using `text-rendering: auto`.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-rendering
+   */
   text-rendering: optimizeLegibility;
+  /* Ensure the font-size is rendered predictably on mobile screens,
+   * by disabling the `text-size-adjust` text inflation algorithm.
+   *
+   * The responsibility now shifts to configuring the design tokens with
+   * sufficiently large font-sizes.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-size-adjust
+   */
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
-  word-break: break-word;
+  /* Provide a built-in name for page transitions. */
+  view-transition-name: root;
+}
+@media (prefers-reduced-motion: no-preference) {
+  :host {
+    /* Provide a better user experience for keyboard users, by enabling smooth scrolling.
+     * With smooth scrolling it is easier to track where the next focusable item is in relation
+     * to the previous position.
+     *
+     * Avoid this extra motion for users with specific motion preferences, by only enabling this feature
+     * when no preference is specified.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-behavior
+     */
+    scroll-behavior: smooth;
+  }
+}
+:host {
+  /* For some new properties, temporarily provide the `utrecht.body.*` design tokens as fallback for backwards compatibility. */
+  font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
+  line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
 }
 
 :host([hidden]) {

package/dist/collection/components/sidenav.css

@@ -14,6 +14,12 @@
 * 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`.
+ */
 .utrecht-sidenav {
   --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
   --utrecht-sidenav-connection-inline-size: 2px;

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

@@ -19,6 +19,12 @@
 * 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 */
 .utrecht-skip-link {
   /* Use `ButtonFace` as default `background-color`

package/dist/collection/components/spotlight-section.css

@@ -20,12 +20,15 @@
   border-style: solid;
   border-width: var(--_utrecht-spotlight-section-border-width, var(--utrecht-spotlight-section-border-width, 0));
   color: var(--_utrecht-spotlight-section-color, var(--utrecht-spotlight-section-color));
+  display: flex;
+  flex-direction: column;
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-spotlight-section-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-spotlight-section-margin-block-start, 0));
   padding-block-end: var(--utrecht-spotlight-section-padding-block-end);
   padding-block-start: var(--utrecht-spotlight-section-padding-block-start);
   padding-inline-end: var(--utrecht-spotlight-section-padding-inline-end);
   padding-inline-start: var(--utrecht-spotlight-section-padding-inline-start);
+  row-gap: var(--utrecht-spotlight-section-row-gap);
 }
 
 .utrecht-spotlight-section--info {

package/dist/collection/components/table-caption.css

@@ -11,6 +11,7 @@
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
 :host {
+  break-after: avoid;
   break-inside: avoid;
   color: var(--utrecht-table-caption-color);
   font-family: var(--utrecht-table-caption-font-family);
@@ -18,9 +19,8 @@
   font-weight: var(--utrecht-table-caption-font-weight);
   line-height: var(--utrecht-table-caption-line-height);
   margin-block-end: var(--utrecht-table-caption-margin-block-end);
-  page-break-after: avoid;
   text-align: var(--utrecht-table-caption-text-align, center);
+  break-after: avoid;
+  break-inside: avoid;
   display: table-caption;
-  page-break-after: avoid;
-  page-break-inside: avoid;
 }

package/dist/collection/components/table-container.css

@@ -21,6 +21,7 @@ utrecht-table-container {
 }
 
 utrecht-table-container table > caption {
+  break-after: avoid;
   break-inside: avoid;
   color: var(--utrecht-table-caption-color);
   font-family: var(--utrecht-table-caption-font-family);
@@ -28,7 +29,6 @@ utrecht-table-container table > caption {
   font-weight: var(--utrecht-table-caption-font-weight);
   line-height: var(--utrecht-table-caption-line-height);
   margin-block-end: var(--utrecht-table-caption-margin-block-end);
-  page-break-after: avoid;
   text-align: var(--utrecht-table-caption-text-align, center);
 }
 utrecht-table-container table > thead {
@@ -38,7 +38,6 @@ utrecht-table-container table > thead {
   break-inside: avoid;
   color: var(--utrecht-table-header-color);
   font-weight: var(--utrecht-table-header-font-weight);
-  page-break-inside: avoid;
   text-transform: var(--utrecht-table-header-text-transform);
 }
 utrecht-table-container table > tbody {
@@ -46,7 +45,6 @@ utrecht-table-container table > tbody {
 }
 utrecht-table-container table > tr, utrecht-table-container table > thead > tr, utrecht-table-container table > tbody > tr, utrecht-table-container table > tfoot > tr {
   break-inside: avoid;
-  page-break-inside: avoid;
 }
 utrecht-table-container table > thead > tr:last-of-type {
   border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);

package/dist/collection/components/table-header.css

@@ -17,7 +17,6 @@
   break-inside: avoid;
   color: var(--utrecht-table-header-color);
   font-weight: var(--utrecht-table-header-font-weight);
-  page-break-inside: avoid;
   text-transform: var(--utrecht-table-header-text-transform);
   display: table-header-group;
 }

package/dist/collection/components/table-row.css

@@ -12,6 +12,5 @@
 /* stylelint-disable-next-line block-no-empty */
 :host {
   break-inside: avoid;
-  page-break-inside: avoid;
   display: table-row;
 }

package/dist/collection/components/textarea.css

@@ -14,6 +14,12 @@
 * 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.

package/dist/collection/components/textbox.css

@@ -14,6 +14,12 @@
 * 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.

package/dist/collection/components/top-task-link.css

@@ -14,6 +14,12 @@
 * 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`.
+ */
 .utrecht-toptask-link {
   --utrecht-icon-color: currentColor;
   --utrecht-icon-size: var(--utrecht-toptask-link-icon-size);

package/dist/collection/components/url-data.css

@@ -42,7 +42,6 @@
   font-variant-ligatures: none;
   hyphens: none;
   overflow-wrap: anywhere;
-  page-break-inside: avoid;
 }
 
 :host {