@utrecht/web-component-library-stencil 1.0.0-alpha.3 → 1.0.0-alpha.301

package/dist/components/utrecht-page-footer.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const indexCss = ".utrecht-page-footer{--utrecht-document-color:currentColor;--utrecht-heading-color:currentColor;--utrecht-link-color:currentColor;--utrecht-link-focus-color:currentColor;--utrecht-link-hover-color:currentColor;--utrecht-link-active-color:currentColor;--utrecht-link-visited-color:currentColor;background-color:var(--utrecht-page-footer-background-color);background-image:var(--utrecht-page-footer-background-image);color:var(--utrecht-page-footer-color);font-family:var(--utrecht-document-font-family);font-size:var(--utrecht-document-font-size);padding-block-end:var(--utrecht-page-footer-padding-block-end);padding-block-start:var(--utrecht-page-footer-padding-block-start);padding-inline-end:var(--utrecht-page-footer-padding-inline-end);padding-inline-start:var(--utrecht-page-footer-padding-inline-start)}.utrecht-page-footer .utrecht-link--telephone{color:#fff}.utrecht-page-footer .utrecht-paragraph{color:#fff}.utrecht-page-footer__address--reset-address{font-style:inherit;margin-block-end:0;margin-block-start:0}:host{display:block}:host([hidden]){display:none !important}";
+
+const PageFooter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("footer", { class: "utrecht-page-footer" }, h("slot", null)));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-page-footer"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-page-footer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-page-footer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PageFooter);
+      }
+      break;
+  } });
+}
+
+const UtrechtPageFooter = PageFooter;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtPageFooter, defineCustomElement };

package/dist/components/utrecht-page-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtPageHeader extends Components.UtrechtPageHeader, HTMLElement {}
+export const UtrechtPageHeader: {
+  prototype: UtrechtPageHeader;
+  new (): UtrechtPageHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-page-header.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const indexCss = ".utrecht-page-header{background-color:var(--utrecht-page-header-background-color);color:var(--utrecht-page-header-color);grid-area:\"utrecht-header\";padding-block-end:var(--utrecht-page-header-padding-block-end);padding-block-start:var(--utrecht-page-header-padding-block-start);padding-inline-end:var(--utrecht-page-padding-inline-end);padding-inline-start:var(--utrecht-page-padding-inline-start)}.utrecht-page-header__content{max-inline-size:var(--utrecht-page-max-inline-size)}:host{display:block}:host([hidden]){display:none !important}";
+
+const PageHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("header", { class: "utrecht-page-header" }, h("div", { class: "utrecht-page-header__content" }, h("slot", null))));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-page-header"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-page-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-page-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PageHeader);
+      }
+      break;
+  } });
+}
+
+const UtrechtPageHeader = PageHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtPageHeader, defineCustomElement };

package/dist/components/utrecht-page.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtPage extends Components.UtrechtPage, HTMLElement {}
+export const UtrechtPage: {
+  prototype: UtrechtPage;
+  new (): UtrechtPage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-page.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const indexCss = ".utrecht-page{margin-inline-end:auto;margin-inline-start:auto;max-inline-size:calc(var(--utrecht-page-max-inline-size) - var(--utrecht-page-margin-inline-start, 0px) - var(--utrecht-page-margin-inline-end, 0px));padding-inline-end:var(--utrecht-page-margin-inline-end);padding-inline-start:var(--utrecht-page-margin-inline-start)}.utrecht-page__content{background-color:var(--utrecht-page-background-color);color:var(--utrecht-page-color);max-inline-size:var(--utrecht-page-max-inline-size)}:host{display:block}:host([hidden]){display:none !important}";
+
+const Page = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("div", { class: "utrecht-page" }, h("div", { class: "utrecht-page__content" }, h("slot", null))));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-page"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-page"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-page":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Page);
+      }
+      break;
+  } });
+}
+
+const UtrechtPage = Page;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtPage, defineCustomElement };

package/dist/components/utrecht-pagination.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtPagination extends Components.UtrechtPagination, HTMLElement {}
+export const UtrechtPagination: {
+  prototype: UtrechtPagination;
+  new (): UtrechtPagination;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-pagination.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+
+const indexCss = ".utrecht-pagination__page-link:focus,.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:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-pagination__page-link:focus:not(:focus-visible),.utrecht-pagination__relative-link:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-pagination{font-family:var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-pagination-font-size, var(--utrecht-document-font-family))}.utrecht-pagination--distanced{margin-block-end:var(--utrecht-pagination-margin-block-end);margin-block-start:var(--utrecht-pagination-margin-block-start)}.utrecht-pagination__relative-link{background-color:var(--utrecht-pagination-relative-link-background-color);border-color:var(--utrecht-pagination-relative-link-border-color);border-radius:var(--utrecht-pagination-relative-link-border-radius);border-style:solid;border-width:var(--utrecht-pagination-relative-link-border-width, 0);color:var(--utrecht-pagination-relative-link-color);display:inline-block;font-weight:var(--utrecht-pagination-relative-link-font-weight);padding-block-end:var(--utrecht-pagination-relative-link-padding-block-end);padding-block-start:var(--utrecht-pagination-relative-link-padding-block-start);padding-inline-end:var(--utrecht-pagination-relative-link-padding-inline-end);padding-inline-start:var(--utrecht-pagination-relative-link-padding-inline-start);text-decoration:var(--utrecht-pagination-relative-link-text-decoration);text-transform:var(--utrecht-pagination-relative-link-text-transform)}.utrecht-pagination__relative-link--next{margin-inline-start:var(--utrecht-pagination-relative-link-distanced-margin-inline-start)}.utrecht-pagination__relative-link--prev{margin-inline-end:var(--utrecht-pagination-relative-link-distanced-margin-inline-end)}.utrecht-pagination__relative-link--disabled{background-color:var(--utrecht-pagination-relative-link-disabled-background-color, var(--utrecht-pagination-relative-link-background-color));color:var(--utrecht-pagination-relative-link-disabled-color, var(--utrecht-pagination-relative-link-color))}.utrecht-pagination__relative-link--hover,.utrecht-pagination__relative-link:hover{background-color:var(--utrecht-pagination-relative-link-hover-background-color, var(--utrecht-pagination-relative-link-background-color));border-color:var(--utrecht-pagination-relative-link-hover-border-color, var(--utrecht-pagination-relative-link-border-color));color:var(--utrecht-pagination-relative-link-hover-color, var(--utrecht-pagination-relative-link-color))}.utrecht-pagination__page-link{background-color:var(--utrecht-pagination-page-link-background-color);border-color:var(--utrecht-pagination-page-link-border-color, 0);border-radius:var(--utrecht-pagination-page-link-border-radius);border-style:solid;border-width:var(--utrecht-pagination-page-link-border-width);color:var(--utrecht-pagination-page-link-color);display:inline-block;font-weight:var(--utrecht-pagination-page-link-font-weight);padding-block-end:var(--utrecht-pagination-page-link-padding-block-end);padding-block-start:var(--utrecht-pagination-page-link-padding-block-start);padding-inline-end:var(--utrecht-pagination-page-link-padding-inline-end);padding-inline-start:var(--utrecht-pagination-page-link-padding-inline-start);text-decoration:var(--utrecht-pagination-page-link-text-decoration)}.utrecht-pagination__page-link--current{--utrecht-pagination-page-link-background-color:var(--utrecht-pagination-page-link-current-background-color);--utrecht-pagination-page-link-border-color:var(--utrecht-pagination-page-link-current-border-color);--utrecht-pagination-page-link-color:var(--utrecht-pagination-page-link-current-color)}.utrecht-pagination__page-link--distanced,.utrecht-pagination__page-link~.utrecht-pagination__page-link{margin-inline-start:var(--utrecht-pagination-page-link-distanced-margin-inline-start)}.utrecht-pagination__page-link--hover,.utrecht-pagination__page-link:hover{background-color:var(--utrecht-pagination-page-link-hover-background-color, var(--utrecht-pagination-page-link-background-color));border-color:var(--utrecht-pagination-page-link-hover-border-color, var(--utrecht-pagination-page-link-border-color));color:var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color))}.utrecht-pagination__page-link:focus,.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:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-pagination__page-link:focus:not(:focus-visible),.utrecht-pagination__relative-link:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
+
+const Pagination = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const { currentIndex } = this;
+    const links = typeof this.links === 'string' ? JSON.parse(this.links) : null;
+    const next = typeof this.next === 'string' ? JSON.parse(this.next) : null;
+    const prev = typeof this.prev === 'string' ? JSON.parse(this.next) : null;
+    const RelativeLink = ({ disabled = false, href = '', rel = null, textContent = '', title = '' }) => disabled ? (h("span", { class: clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), "aria-label": title || null }, textContent)) : (h("a", { href: href, class: clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), rel: rel, "aria-label": title || null }, textContent));
+    const PageLink = ({ current = false, href = '', rel = null, textContent = '' }) => (h("a", { class: clsx('utrecht-pagination__page-link', current && 'utrecht-pagination__page-link--current'), href: href, "aria-current": current ? 'true' : null, rel: rel }, textContent));
+    return (h("nav", { class: "utrecht-pagination" }, h("span", { class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: 'prev', textContent: 'Vorige' })) : ''), h("span", { role: "group", class: "utrecht-pagination__pages" }, links
+      .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))
+      .map((link, arrayIndex) => {
+      const index = typeof link.index === 'number' ? link.index : arrayIndex;
+      return Object.assign({ index, current: typeof currentIndex === 'number' && index === currentIndex, rel: typeof currentIndex === 'number'
+          ? index === currentIndex + 1
+            ? 'next'
+            : index === currentIndex - 1
+              ? 'prev'
+              : null
+          : null, textContent: link.index || index }, link);
+    })
+      .map((link) => PageLink(link))), h("span", { class: "utrecht-pagination__before" }, next ? RelativeLink(Object.assign(Object.assign({}, next), { rel: 'next', textContent: 'Volgende' })) : '')));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-pagination", {
+    "links": [1],
+    "next": [1],
+    "prev": [1],
+    "currentIndex": [2, "current-index"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-pagination"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-pagination":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Pagination);
+      }
+      break;
+  } });
+}
+
+const UtrechtPagination = Pagination;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtPagination, defineCustomElement };

package/dist/components/utrecht-paragraph.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtParagraph extends Components.UtrechtParagraph, HTMLElement {}
+export const UtrechtParagraph: {
+  prototype: UtrechtParagraph;
+  new (): UtrechtParagraph;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-paragraph.js

@@ -0,0 +1,6 @@
+import { P as Paragraph, d as defineCustomElement$1 } from './index.stencil5.js';
+
+const UtrechtParagraph = Paragraph;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtParagraph, defineCustomElement };

package/dist/components/utrecht-separator.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtSeparator extends Components.UtrechtSeparator, HTMLElement {}
+export const UtrechtSeparator: {
+  prototype: UtrechtSeparator;
+  new (): UtrechtSeparator;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-separator.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const indexCss = ".utrecht-separator{border-color:var(--utrecht-separator-color);border-style:solid;border-width:0 0 var(--utrecht-separator-block-size) 0}.utrecht-separator--distanced{margin-block-end:var(--utrecht-separator-margin-block-end);margin-block-start:var(--utrecht-separator-margin-block-start)}:host{display:block}:host([hidden]){display:none !important}";
+
+const Separator = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return h("hr", { class: "utrecht-separator" });
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-separator"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-separator"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-separator":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Separator);
+      }
+      break;
+  } });
+}
+
+const UtrechtSeparator = Separator;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtSeparator, defineCustomElement };

package/dist/components/utrecht-sidenav.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtSidenav extends Components.UtrechtSidenav, HTMLElement {}
+export const UtrechtSidenav: {
+  prototype: UtrechtSidenav;
+  new (): UtrechtSidenav;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-sidenav.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+
+const indexCss = ".utrecht-sidenav{--utrecht-sidenav-connection-color:var(--utrecht-sidenav-item-marker-color);--utrecht-sidenav-connection-inline-size:2px;--utrecht-sidenav-marker-current-color:var(--utrecht-sidenav-link-hover-color);--utrecht-sidenav-marker-offset:26px;--utrecht-sidenav-connection-block-size:100%;--utrecht-sidenav-marker-height:8px;--utrecht-sidenav-marker-outline-width:2px;border-block-end:1px solid var(--utrecht-color-grey-80);border-block-start:1px solid var(--utrecht-color-grey-80);margin-block-end:0;margin-block-start:0;padding-block-end:0;padding-block-start:0;width:19rem}.utrecht-sidenav__list{margin-block-end:0;margin-block-start:0.2rem;padding-block-end:0;padding-block-start:0;padding-inline-start:0}.utrecht-sidenav__list--child{margin-block-start:0;padding-inline-end:0;padding-inline-start:1.4rem}.utrecht-sidenav__item{list-style:none;margin-inline-start:0;position:relative}.utrecht-sidenav__item--current{color:var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red))}.utrecht-sidenav__item--last{border-block-end:none}.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator){border-block-end:1px solid var(--utrecht-color-grey-80);display:block;margin-inline-start:var(--utrecht-space-inline-lg)}.utrecht-sidenav__link{color:var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));display:block;margin-inline-start:0;padding-block-end:var(--utrecht-space-block-xs);padding-block-start:var(--utrecht-space-block-xs);padding-inline-end:var(--utrecht-space-inline-3xs);padding-inline-start:var(--utrecht-space-inline-lg);text-decoration:none}.utrecht-sidenav__link:hover{color:var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));text-decoration:underline}.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:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-sidenav__link--parent{padding-block-end:0}.utrecht-sidenav__connection,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling):not(.utrecht-sidenav__link--parent):not(.utrecht-sidenav__link--child)::after{background:var(--utrecht-sidenav-connection-color);bottom:0;content:\"\";display:block;height:calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));left:3px;overflow:hidden;position:absolute;top:calc(var(--utrecht-sidenav-marker-offset));width:var(--utrecht-sidenav-connection-inline-size);z-index:5}.utrecht-sidenav__connection--last,.utrecht-sidenav__connection--parent,.utrecht-sidenav__connection--sibling{display:none}.utrecht-sidenav__marker,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before{background-color:var(--utrecht-sidenav-item-marker-color);border-radius:100%;content:\"\";height:var(--utrecht-sidenav-marker-height);left:var(--utrecht-sidenav-marker-offset);overflow:hidden;position:absolute;top:20px;transform:translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));width:8px;z-index:10}.utrecht-sidenav__marker--child,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before{background-color:transparent;border:2px solid var(--utrecht-sidenav-link-color);height:4px;left:1.2rem;top:16px;transform:translateY(-50%) translateX(-19.5px);width:4px}.utrecht-sidenav__marker--current,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before{background-color:var(--utrecht-sidenav-marker-current-color)}.utrecht-sidenav__link--child,.utrecht-sidenav__link--current-child{color:var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));margin-block-end:0;margin-block-start:0;padding-block-end:var(--utrecht-space-block-2xs);padding-block-start:var(--utrecht-space-block-2xs);padding-inline-end:var(--utrecht-space-inline-3xs);padding-inline-start:var(--utrecht-space-inline-lg);text-decoration:none}.utrecht-sidenav__link--current,.utrecht-sidenav__link--current-child{font-weight:var(--utrecht-typography-weight-scale-bold-font-weight)}.utrecht-sidenav__marker--hover,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before,.utrecht-sidenav__link:hover .utrecht-sidenav__marker,.utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link::before{background-color:var(--utrecht-sidenav-link-hover-color)}.utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before,.utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker,.utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker.utrecht-sidenav__link--child::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker.utrecht-sidenav__link--child::before,.utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link::before,.utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link.utrecht-sidenav__link--child::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__link::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link.utrecht-sidenav__link--child::before{background-color:var(--utrecht-sidenav-link-hover-color);border:2px solid var(--utrecht-sidenav-link-hover-color)}.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after{display:none}.utrecht-sidenav__link:focus:not(:focus-visible){box-shadow:none;outline-style:none}";
+
+const Sidenav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const items = JSON.parse(this.json);
+    return (h("nav", { class: "utrecht-sidenav" }, h("ul", { class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }, index, array) => (h("li", { key: href, class: clsx('utrecht-sidenav__item', index + 1 === array.length && 'utrecht-sidenav__item--last', sibling && 'utrecht-sidenav__item--sibling', haschildren && 'utrecht-sidenav__item--parent') }, h("a", { class: clsx('utrecht-sidenav__link', current && 'utrecht-sidenav__link--current', focus && 'utrecht-sidenav__link--focus', sibling && 'utrecht-sidenav__link--sibling', haschildren && 'utrecht-sidenav__link--parent'), href: href }, h("div", { class: clsx('utrecht-sidenav__marker', current && 'utrecht-sidenav__marker--current') }), h("div", { class: clsx('utrecht-sidenav__connection', haschildren && 'utrecht-sidenav__connection--parent', sibling && 'utrecht-sidenav__connection--sibling', index + 1 === array.length && 'utrecht-sidenav__connection--last') }), title), children ? (h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" }, h("a", { class: clsx('utrecht-sidenav__link', 'utrecht-sidenav__link--child', current && 'utrecht-sidenav__link--current', current && 'utrecht-sidenav__link--current-child', focus && 'utrecht-sidenav__link--focus'), href: href }, h("div", { class: clsx('utrecht-sidenav__marker', 'utrecht-sidenav__marker--child', current && 'utrecht-sidenav__marker--current', current && 'utrecht-sidenav__marker--current-child') }), title)))))) : (''), h("div", { class: "utrecht-sidenav__item-separator" })))))));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-sidenav", {
+    "json": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-sidenav"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-sidenav":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Sidenav);
+      }
+      break;
+  } });
+}
+
+const UtrechtSidenav = Sidenav;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtSidenav, defineCustomElement };

package/dist/components/utrecht-table-body.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTableBody extends Components.UtrechtTableBody, HTMLElement {}
+export const UtrechtTableBody: {
+  prototype: UtrechtTableBody;
+  new (): UtrechtTableBody;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-table-body.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableBodyCss = ":host{vertical-align:baseline;display:table-row-group}";
+
+const TableBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+  static get style() { return tableBodyCss; }
+}, [1, "utrecht-table-body"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table-body"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table-body":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableBody);
+      }
+      break;
+  } });
+}
+
+const UtrechtTableBody = TableBody;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTableBody, defineCustomElement };

package/dist/components/utrecht-table-caption.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTableCaption extends Components.UtrechtTableCaption, HTMLElement {}
+export const UtrechtTableCaption: {
+  prototype: UtrechtTableCaption;
+  new (): UtrechtTableCaption;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-table-caption.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const tableCaptionCss = ":host{color:var(--utrecht-table-caption-color);font-family:var(--utrecht-table-caption-font-family);font-size:var(--utrecht-table-caption-font-size);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);text-align:var(--utrecht-table-caption-text-align, center);display:table-caption;page-break-after:avoid;page-break-inside:avoid}";
+
+const TableCaption = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    // TODO: Associate with parent <utrecht-table> aria-labelledby attribute
+    return h("slot", null);
+  }
+  static get style() { return tableCaptionCss; }
+}, [1, "utrecht-table-caption"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table-caption"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table-caption":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableCaption);
+      }
+      break;
+  } });
+}
+
+const UtrechtTableCaption = TableCaption;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTableCaption, defineCustomElement };

package/dist/components/utrecht-table-cell.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTableCell extends Components.UtrechtTableCell, HTMLElement {}
+export const UtrechtTableCell: {
+  prototype: UtrechtTableCell;
+  new (): UtrechtTableCell;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-table-cell.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableCellCss = ":host{border-block-end-color:var(--utrecht-table-row-border-block-end-color, transparent);border-block-end-style:solid;border-block-end-width:var(--utrecht-table-row-border-block-end-width, 0);line-height:var(--utrecht-table-cell-line-height, inherit);padding-block-end:var(--utrecht-table-cell-padding-block-end, 0);padding-block-start:var(--utrecht-table-cell-padding-block-start, 0);padding-inline-end:var(--utrecht-table-cell-padding-inline-end, 0);padding-inline-start:var(--utrecht-table-cell-padding-inline-start, 0);text-align:start;display:table-cell}";
+
+const TableCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { role: "cell" }, h("slot", null)));
+  }
+  static get style() { return tableCellCss; }
+}, [1, "utrecht-table-cell"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table-cell"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table-cell":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableCell);
+      }
+      break;
+  } });
+}
+
+const UtrechtTableCell = TableCell;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTableCell, defineCustomElement };

package/dist/components/utrecht-table-footer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTableFooter extends Components.UtrechtTableFooter, HTMLElement {}
+export const UtrechtTableFooter: {
+  prototype: UtrechtTableFooter;
+  new (): UtrechtTableFooter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-table-footer.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableFooterCss = ":host{display:table-footer-group}";
+
+const TableFooter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+  static get style() { return tableFooterCss; }
+}, [1, "utrecht-table-footer"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table-footer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table-footer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableFooter);
+      }
+      break;
+  } });
+}
+
+const UtrechtTableFooter = TableFooter;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTableFooter, defineCustomElement };

package/dist/components/utrecht-table-header-cell.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTableHeaderCell extends Components.UtrechtTableHeaderCell, HTMLElement {}
+export const UtrechtTableHeaderCell: {
+  prototype: UtrechtTableHeaderCell;
+  new (): UtrechtTableHeaderCell;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-table-header-cell.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableHeaderCellCss = ":host{color:var(--utrecht-table-header-cell-color);font-size:var(--utrecht-table-header-cell-font-size);font-weight:var(--utrecht-table-header-cell-font-weight);text-align:start;text-transform:var(--utrecht-table-header-cell-text-transform);display:table-cell}";
+
+const TableHeaderCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { role: this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell' }, h("slot", null)));
+  }
+  static get style() { return tableHeaderCellCss; }
+}, [1, "utrecht-table-header-cell", {
+    "scope": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table-header-cell"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table-header-cell":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableHeaderCell);
+      }
+      break;
+  } });
+}
+
+const UtrechtTableHeaderCell = TableHeaderCell;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTableHeaderCell, defineCustomElement };

package/dist/components/utrecht-table-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTableHeader extends Components.UtrechtTableHeader, HTMLElement {}
+export const UtrechtTableHeader: {
+  prototype: UtrechtTableHeader;
+  new (): UtrechtTableHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-table-header.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableHeaderCss = ":host{background-color:var(--utrecht-table-header-background-color);color:var(--utrecht-table-header-color);font-weight:var(--utrecht-table-header-font-weight);text-transform:var(--utrecht-table-header-text-transform);vertical-align:bottom;display:table-header-group}";
+
+const TableHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+  static get style() { return tableHeaderCss; }
+}, [1, "utrecht-table-header"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-table-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-table-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableHeader);
+      }
+      break;
+  } });
+}
+
+const UtrechtTableHeader = TableHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtTableHeader, defineCustomElement };

package/dist/components/utrecht-table-row.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtTableRow extends Components.UtrechtTableRow, HTMLElement {}
+export const UtrechtTableRow: {
+  prototype: UtrechtTableRow;
+  new (): UtrechtTableRow;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;