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

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

@@ -1941,25 +1941,111 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-variant-ligatures: none;
 }
 .utrecht-html ul {
+  --_utrecht-unordered-list-list-style-type: var(--utrecht-unordered-list-list-style-type, "●");
+  --_utrecht-unordered-list-marker-font-size: var(--utrecht-unordered-list-marker-font-size, "1rem");
   /* Configure `box-sizing` and `text-align` for `--center` */
   box-sizing: border-box;
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
   line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
+  /* Using list style type instead of ::marker allows for more cross browser compatibility */
+  list-style-type: var(--_utrecht-unordered-list-list-style-type, "●");
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
-  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
+  margin-inline-start: var(--utrecht-unordered-list-margin-inline-start, 1ch);
+  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 0);
   text-align: start;
   --utrecht-space-around: 1;
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-1-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, ●)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-1-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
 }
 .utrecht-html ul > li {
   margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
   margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
   padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
 }
+.utrecht-html {
+  /* Child combinator (>) to prevent styling nested ordered lists */
+}
 .utrecht-html ul > li::marker {
   color: var(--utrecht-unordered-list-marker-color);
-  content: "●";
+  font-size: var(--_utrecht-unordered-list-marker-font-size, 1em);
+}
+.utrecht-html ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-2-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, ○)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-2-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
+}
+.utrecht-html ul > li > ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-3-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, ◆)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-3-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
+}
+.utrecht-html ul > li > ul > li > ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-4-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, ◇)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-4-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
+}
+.utrecht-html ul > li > ul > li > ul > li > ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-5-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, ■)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-5-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
+}
+.utrecht-html ul > li > ul > li > ul > li > ul > li > ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-6-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, □)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-6-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
+}
+.utrecht-html ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-7-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, ▲)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-7-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
+}
+.utrecht-html ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-8-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, △)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-8-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
 }
 :where(.utrecht-html) :where(:focus-visible) {
   /* - The browser default focus ring should apply when these CSS custom properties are not set.

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/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/root.css

@@ -20,6 +20,15 @@
 /* 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.
  */
@@ -56,37 +65,103 @@
    *   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;
-  /* For some new properties, use the `utrecht.body.*` design tokens as fallback for backwards compatibility. */
+  /* 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);
-  block-size: 100%;
+  /* 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;
+  /* 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));
 }

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/components/utrecht-alert.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
 import { c as clsx } from './p-e91d8a25.js';
 
-const alertCss = ".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));border-radius:var(--utrecht-alert-border-radius, 0);border-style:solid;border-width:var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));color:var(--_utrecht-alert-color, var(--utrecht-alert-color));column-gap:var(--utrecht-alert-column-gap);display:flex;flex-direction:row;margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));padding-block-end:var(--utrecht-alert-padding-block-end);padding-block-start:var(--utrecht-alert-padding-block-start);padding-inline-end:var(--utrecht-alert-padding-inline-end);padding-inline-start:var(--utrecht-alert-padding-inline-start)}.utrecht-alert__icon{--utrecht-icon-color:var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));--utrecht-icon-size:var(--utrecht-alert-icon-size);--utrecht-icon-inset-block-start:var(--utrecht-alert-icon-inset-block-start)}.utrecht-alert__content{row-gap:var(--utrecht-alert-content-row-gap)}.utrecht-alert__message{--utrecht-heading-color:var(--utrecht-alert-color);--utrecht-paragraph-color:var(--utrecht-alert-color);row-gap:var(--utrecht-alert-message-row-gap)}.utrecht-alert--info{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-info-color);--_utrecht-alert-background-color:var(--utrecht-alert-info-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-info-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-info-border-width);--_utrecht-alert-color:var(--utrecht-alert-info-color)}.utrecht-alert--ok{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-ok-color);--_utrecht-alert-background-color:var(--utrecht-alert-ok-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-ok-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-ok-border-width);--_utrecht-alert-color:var(--utrecht-alert-ok-color)}.utrecht-alert--warning{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-warning-color);--_utrecht-alert-background-color:var(--utrecht-alert-warning-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-warning-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-warning-border-width);--_utrecht-alert-color:var(--utrecht-alert-warning-color)}.utrecht-alert--error{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-error-color);--_utrecht-alert-background-color:var(--utrecht-alert-error-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-error-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-error-border-width);--_utrecht-alert-color:var(--utrecht-alert-error-color)}:host{display:block}:host([hidden]){display:none !important}";
+const alertCss = ".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));border-radius:var(--utrecht-alert-border-radius, 0);border-style:solid;border-width:var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));color:var(--_utrecht-alert-color, var(--utrecht-alert-color));column-gap:var(--utrecht-alert-column-gap);display:flex;flex-direction:row;margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));padding-block-end:var(--utrecht-alert-padding-block-end);padding-block-start:var(--utrecht-alert-padding-block-start);padding-inline-end:var(--utrecht-alert-padding-inline-end);padding-inline-start:var(--utrecht-alert-padding-inline-start)}.utrecht-alert__icon{--utrecht-icon-color:var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));--utrecht-icon-size:var(--utrecht-alert-icon-size);--utrecht-icon-inset-block-start:var(--utrecht-alert-icon-inset-block-start)}.utrecht-alert__content{display:flex;flex-direction:column;row-gap:var(--utrecht-alert-content-row-gap)}.utrecht-alert__message{--utrecht-heading-color:var(--utrecht-alert-color);--utrecht-paragraph-color:var(--utrecht-alert-color);display:flex;flex-direction:column;row-gap:var(--utrecht-alert-message-row-gap)}.utrecht-alert--info{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-info-color);--_utrecht-alert-background-color:var(--utrecht-alert-info-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-info-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-info-border-width);--_utrecht-alert-color:var(--utrecht-alert-info-color)}.utrecht-alert--ok{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-ok-color);--_utrecht-alert-background-color:var(--utrecht-alert-ok-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-ok-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-ok-border-width);--_utrecht-alert-color:var(--utrecht-alert-ok-color)}.utrecht-alert--warning{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-warning-color);--_utrecht-alert-background-color:var(--utrecht-alert-warning-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-warning-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-warning-border-width);--_utrecht-alert-color:var(--utrecht-alert-warning-color)}.utrecht-alert--error{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-error-color);--_utrecht-alert-background-color:var(--utrecht-alert-error-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-error-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-error-border-width);--_utrecht-alert-color:var(--utrecht-alert-error-color)}:host{display:block}:host([hidden]){display:none !important}";
 const UtrechtAlertStyle0 = alertCss;
 
 const enumGuard = (values) => (x) => values.includes(x);

package/dist/components/utrecht-alert.js.map

@@ -1 +1 @@
-{"file":"utrecht-alert.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,q1FAAq1F,CAAC;AACv2F,2BAAe,QAAQ;;ACQvB,MAAM,SAAS,GACb,CAAoB,MAAoB,KACxC,CAAC,CAAU,KACT,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;MAOW,KAAK;;;;;;;IAGhB,MAAM;QACJ,MAAM,YAAY,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;QACjE,MAAM,YAAY,GAAG,WAAW,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,GAAG,UAAU,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC;QACjG,QACE,4DAAK,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,kBAAkB,YAAY,EAAE,CAAC,IACjE,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,YAAY,IACpD,8DAAa,CACT,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/alert.scss?tag=utrecht-alert&encapsulation=shadow","src/components/alert.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@use \"~@utrecht/alert-css/src\" as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\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"],"version":3}
+{"file":"utrecht-alert.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,25FAA25F,CAAC;AAC76F,2BAAe,QAAQ;;ACQvB,MAAM,SAAS,GACb,CAAoB,MAAoB,KACxC,CAAC,CAAU,KACT,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;MAOW,KAAK;;;;;;;IAGhB,MAAM;QACJ,MAAM,YAAY,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;QACjE,MAAM,YAAY,GAAG,WAAW,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,GAAG,UAAU,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC;QACjG,QACE,4DAAK,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,kBAAkB,YAAY,EAAE,CAAC,IACjE,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,YAAY,IACpD,8DAAa,CACT,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/alert.scss?tag=utrecht-alert&encapsulation=shadow","src/components/alert.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@use \"~@utrecht/alert-css/src\" as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\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"],"version":3}