@lux-design-system/web-components-stencil 1.0.0-alpha.0

package/dist/components/lux-icon-chevron-right.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as applyTestId } from './testid.js';
+
+const iconCss = ":host{--_lux-icon-primary-color:var(\n    --lux-icon-color,\n    var(--utrecht-icon-color, var(--lux-color-foreground-on-emphasis, white))\n  );--_lux-icon-secondary-color:var(--lux-icon-color-contrast, var(--lux-color-foreground-default, black));display:inline-grid;position:relative;inset-block-start:var(--lux-alert-icon-inset-block-start, 0);inline-size:var(--lux-icon-size, 1rem);block-size:var(--lux-icon-size, 1rem);color:var(--_lux-icon-primary-color);}";
+const LuxIconChevronRightStyle0 = iconCss;
+
+const IconChevronRight = /*@__PURE__*/ proxyCustomElement(class IconChevronRight extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("svg", Object.assign({ key: '51e53c0c224af75e8e6d9ae6e1286541a09715a2', class: "lux-icon", width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, applyTestId('icon-chevron-right'), { part: "icon" }), h("path", { key: '58dcce790d201e83b73f3b30baf1fae8c29cc332', d: "M4.50918 13.5412C4.00833 13.0407 3.80799 12.39 4.35893 11.8895L8.21551 8.0356L4.30884 4.13162C3.80799 3.6311 3.95824 2.98044 4.4591 2.47993C4.95995 1.97942 5.61107 1.77921 6.11192 2.32978L10.9201 7.13468C11.421 7.63519 11.421 8.43601 10.9201 8.93652L6.16201 13.6914C5.66115 14.1919 5.01004 14.0417 4.50918 13.5412Z", fill: "currentColor" })));
+    }
+    static get style() { return LuxIconChevronRightStyle0; }
+}, [1, "lux-icon-chevron-right"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["lux-icon-chevron-right"];
+    components.forEach(tagName => { switch (tagName) {
+        case "lux-icon-chevron-right":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, IconChevronRight);
+            }
+            break;
+    } });
+}
+
+const LuxIconChevronRight = IconChevronRight;
+const defineCustomElement = defineCustomElement$1;
+
+export { LuxIconChevronRight, defineCustomElement };
+
+//# sourceMappingURL=lux-icon-chevron-right.js.map

package/dist/components/lux-icon-chevron-right.js.map

@@ -0,0 +1 @@
+{"file":"lux-icon-chevron-right.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,+cAA+c,CAAC;AAChe,kCAAe,OAAO;;MCOT,gBAAgB;;;;;;IAC3B,MAAM;QACJ,QACE,0EACE,KAAK,EAAC,UAAU,EAChB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAC9B,WAAW,CAAC,oBAAoB,CAAC,IACrC,IAAI,EAAC,MAAM,KAEX,6DACE,CAAC,EAAC,4TAA4T,EAC9T,IAAI,EAAC,cAAc,GACnB,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/icons/icon.css?tag=lux-icon-chevron-right&encapsulation=shadow","src/icons/chevron-right.tsx"],"sourcesContent":["/* stylelint-disable custom-property-pattern */\n:host {\n  --_lux-icon-primary-color: var(\n    --lux-icon-color,\n    var(--utrecht-icon-color, var(--lux-color-foreground-on-emphasis, white))\n  );\n  --_lux-icon-secondary-color: var(--lux-icon-color-contrast, var(--lux-color-foreground-default, black));\n\n  display: inline-grid;\n  position: relative;\n  inset-block-start: var(--lux-alert-icon-inset-block-start, 0);\n  inline-size: var(--lux-icon-size, 1rem);\n  block-size: var(--lux-icon-size, 1rem);\n  color: var(--_lux-icon-primary-color); /* currentColor */\n}\n","import { Component, h } from '@stencil/core';\nimport { applyTestId } from '../utils/test/testid';\n\n@Component({\n  tag: 'lux-icon-chevron-right',\n  styleUrl: './icon.css',\n  shadow: true,\n})\nexport class IconChevronRight {\n  render() {\n    return (\n      <svg\n        class=\"lux-icon\"\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...applyTestId('icon-chevron-right')}\n        part=\"icon\"\n      >\n        <path\n          d=\"M4.50918 13.5412C4.00833 13.0407 3.80799 12.39 4.35893 11.8895L8.21551 8.0356L4.30884 4.13162C3.80799 3.6311 3.95824 2.98044 4.4591 2.47993C4.95995 1.97942 5.61107 1.77921 6.11192 2.32978L10.9201 7.13468C11.421 7.63519 11.421 8.43601 10.9201 8.93652L6.16201 13.6914C5.66115 14.1919 5.01004 14.0417 4.50918 13.5412Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/components/lux-icon-error.d.ts

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

package/dist/components/lux-icon-error.js

@@ -0,0 +1,8 @@
+import { I as IconError, d as defineCustomElement$1 } from './error.js';
+
+const LuxIconError = IconError;
+const defineCustomElement = defineCustomElement$1;
+
+export { LuxIconError, defineCustomElement };
+
+//# sourceMappingURL=lux-icon-error.js.map

package/dist/components/lux-icon-error.js.map

@@ -0,0 +1 @@
+{"file":"lux-icon-error.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/lux-icon-info.d.ts

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

package/dist/components/lux-icon-info.js

@@ -0,0 +1,8 @@
+import { I as IconInfo, d as defineCustomElement$1 } from './info.js';
+
+const LuxIconInfo = IconInfo;
+const defineCustomElement = defineCustomElement$1;
+
+export { LuxIconInfo, defineCustomElement };
+
+//# sourceMappingURL=lux-icon-info.js.map

package/dist/components/lux-icon-info.js.map

@@ -0,0 +1 @@
+{"file":"lux-icon-info.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/lux-icon-logo-digid.d.ts

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

package/dist/components/lux-icon-logo-digid.js

@@ -0,0 +1,8 @@
+import { I as IconLogoDigid, d as defineCustomElement$1 } from './logo-digid.js';
+
+const LuxIconLogoDigid = IconLogoDigid;
+const defineCustomElement = defineCustomElement$1;
+
+export { LuxIconLogoDigid, defineCustomElement };
+
+//# sourceMappingURL=lux-icon-logo-digid.js.map

package/dist/components/lux-icon-logo-digid.js.map

@@ -0,0 +1 @@
+{"file":"lux-icon-logo-digid.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/lux-icon-logo-eherkenning.d.ts

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

package/dist/components/lux-icon-logo-eherkenning.js

@@ -0,0 +1,8 @@
+import { I as IconLogoEherkenning, d as defineCustomElement$1 } from './logo-eherkenning.js';
+
+const LuxIconLogoEherkenning = IconLogoEherkenning;
+const defineCustomElement = defineCustomElement$1;
+
+export { LuxIconLogoEherkenning, defineCustomElement };
+
+//# sourceMappingURL=lux-icon-logo-eherkenning.js.map

package/dist/components/lux-icon-logo-eherkenning.js.map

@@ -0,0 +1 @@
+{"file":"lux-icon-logo-eherkenning.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/lux-icon-logo-eidas.d.ts

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

package/dist/components/lux-icon-logo-eidas.js

@@ -0,0 +1,8 @@
+import { I as IconLogoEidas, d as defineCustomElement$1 } from './logo-eidas.js';
+
+const LuxIconLogoEidas = IconLogoEidas;
+const defineCustomElement = defineCustomElement$1;
+
+export { LuxIconLogoEidas, defineCustomElement };
+
+//# sourceMappingURL=lux-icon-logo-eidas.js.map

package/dist/components/lux-icon-logo-eidas.js.map

@@ -0,0 +1 @@
+{"file":"lux-icon-logo-eidas.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/lux-icon-mail.d.ts

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

package/dist/components/lux-icon-mail.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as applyTestId } from './testid.js';
+
+const iconCss = ":host{--_lux-icon-primary-color:var(\n    --lux-icon-color,\n    var(--utrecht-icon-color, var(--lux-color-foreground-on-emphasis, white))\n  );--_lux-icon-secondary-color:var(--lux-icon-color-contrast, var(--lux-color-foreground-default, black));display:inline-grid;position:relative;inset-block-start:var(--lux-alert-icon-inset-block-start, 0);inline-size:var(--lux-icon-size, 1rem);block-size:var(--lux-icon-size, 1rem);color:var(--_lux-icon-primary-color);}";
+const LuxIconMailStyle0 = iconCss;
+
+const IconMail = /*@__PURE__*/ proxyCustomElement(class IconMail extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("svg", Object.assign({ key: 'bb5b6405b9c76fa07757a7a9f5dbe9c21d604e34', class: "lux-icon", width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, applyTestId('icon-mail'), { part: "icon" }), h("path", { key: 'a4ac3f36be1138593f7ca62928cd6a8f00b2ca8b', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0.666626 4.06667V2.66667H15.3333V4.06667L8.99996 7.86667C8.39996 8.26667 7.59996 8.26667 6.93329 7.86667L0.666626 4.06667ZM0.666626 5.53334L6.93329 9.33334C7.59996 9.73334 8.39996 9.73334 9.06662 9.33334L15.3333 5.53334V12.6667H0.666626V5.53334Z", fill: "currentColor" })));
+    }
+    static get style() { return LuxIconMailStyle0; }
+}, [1, "lux-icon-mail"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["lux-icon-mail"];
+    components.forEach(tagName => { switch (tagName) {
+        case "lux-icon-mail":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, IconMail);
+            }
+            break;
+    } });
+}
+
+const LuxIconMail = IconMail;
+const defineCustomElement = defineCustomElement$1;
+
+export { LuxIconMail, defineCustomElement };
+
+//# sourceMappingURL=lux-icon-mail.js.map

package/dist/components/lux-icon-mail.js.map

@@ -0,0 +1 @@
+{"file":"lux-icon-mail.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,+cAA+c,CAAC;AAChe,0BAAe,OAAO;;MCOT,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,0EACE,KAAK,EAAC,UAAU,EAChB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAC9B,WAAW,CAAC,WAAW,CAAC,IAC5B,IAAI,EAAC,MAAM,KAEX,0EACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,wPAAwP,EAC1P,IAAI,EAAC,cAAc,GACnB,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/icons/icon.css?tag=lux-icon-mail&encapsulation=shadow","src/icons/mail.tsx"],"sourcesContent":["/* stylelint-disable custom-property-pattern */\n:host {\n  --_lux-icon-primary-color: var(\n    --lux-icon-color,\n    var(--utrecht-icon-color, var(--lux-color-foreground-on-emphasis, white))\n  );\n  --_lux-icon-secondary-color: var(--lux-icon-color-contrast, var(--lux-color-foreground-default, black));\n\n  display: inline-grid;\n  position: relative;\n  inset-block-start: var(--lux-alert-icon-inset-block-start, 0);\n  inline-size: var(--lux-icon-size, 1rem);\n  block-size: var(--lux-icon-size, 1rem);\n  color: var(--_lux-icon-primary-color); /* currentColor */\n}\n","import { Component, h } from '@stencil/core';\nimport { applyTestId } from '../utils/test/testid';\n\n@Component({\n  tag: 'lux-icon-mail',\n  styleUrl: './icon.css',\n  shadow: true,\n})\nexport class IconMail {\n  render() {\n    return (\n      <svg\n        class=\"lux-icon\"\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...applyTestId('icon-mail')}\n        part=\"icon\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M0.666626 4.06667V2.66667H15.3333V4.06667L8.99996 7.86667C8.39996 8.26667 7.59996 8.26667 6.93329 7.86667L0.666626 4.06667ZM0.666626 5.53334L6.93329 9.33334C7.59996 9.73334 8.39996 9.73334 9.06662 9.33334L15.3333 5.53334V12.6667H0.666626V5.53334Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/components/lux-icon-success.d.ts

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

package/dist/components/lux-icon-success.js

@@ -0,0 +1,8 @@
+import { I as IconSuccess, d as defineCustomElement$1 } from './success.js';
+
+const LuxIconSuccess = IconSuccess;
+const defineCustomElement = defineCustomElement$1;
+
+export { LuxIconSuccess, defineCustomElement };
+
+//# sourceMappingURL=lux-icon-success.js.map

package/dist/components/lux-icon-success.js.map

@@ -0,0 +1 @@
+{"file":"lux-icon-success.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/lux-icon-warning.d.ts

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

package/dist/components/lux-icon-warning.js

@@ -0,0 +1,8 @@
+import { I as IconWarning, d as defineCustomElement$1 } from './warning.js';
+
+const LuxIconWarning = IconWarning;
+const defineCustomElement = defineCustomElement$1;
+
+export { LuxIconWarning, defineCustomElement };
+
+//# sourceMappingURL=lux-icon-warning.js.map

package/dist/components/lux-icon-warning.js.map

@@ -0,0 +1 @@
+{"file":"lux-icon-warning.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/lux-login-link.d.ts

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

package/dist/components/lux-login-link.js

@@ -0,0 +1,113 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as applyTestId } from './testid.js';
+import { d as defineCustomElement$4 } from './logo-digid.js';
+import { d as defineCustomElement$3 } from './logo-eherkenning.js';
+import { d as defineCustomElement$2 } from './logo-eidas.js';
+
+const COMPONENT_TAG = 'lux-login-link';
+const loginAgentsLabels = {
+    digid: {
+        label: 'Inloggen',
+        agentLabel: 'met digid',
+    },
+    'digid-machtigen': {
+        label: 'Inloggen als gemachtigde',
+        agentLabel: 'met digid',
+    },
+    eherkenning: {
+        label: 'Inloggen als bedrijf of instelling',
+        agentLabel: 'met e-herkenning',
+    },
+    eidas: {
+        label: 'European login',
+        agentLabel: 'met e-idas',
+    },
+};
+
+const loginLinkCss = ":host{display:contents;appearance:button}:host([hidden]){display:none !important}.lux-login-link{display:flex;column-gap:var(--lux-login-link-column-gap);justify-content:flex-start;align-items:center;appearance:button;margin-inline:0;margin-block:0;border-width:var(--lux-login-link-border-width);border-style:var(--lux-login-link-border-style);border-color:var(--lux-login-link-border-color);border-radius:var(--lux-login-link-border-radius);background-color:var(--lux-login-link-background-color);padding-inline-start:var(--lux-login-link-padding-inline-start);padding-inline-end:var(--lux-login-link-padding-inline-end);padding-block-start:var(--lux-login-link-padding-block-start);padding-block-end:var(--lux-login-link-padding-block-end);min-inline-size:var(--lux-login-link-min-inline-size);min-block-size:var(--lux-login-link-min-block-size);color:var(--lux-login-link-color);font-weight:var(--lux-login-link-font-weight);font-size:var(--lux-login-link-font-size);line-height:var(--lux-login-link-line-height);font-family:var(--lux-login-link-font-family);user-select:none}:host(.force-state--hover) .lux-login-link,.lux-login-link:hover{background-color:var(--lux-login-link-hover-background-color)}:host(.force-state--active) .lux-login-link,.lux-login-link:active{border-color:var(--lux-login-link-active-border-color);background-color:var(--lux-login-link-active-background-color)}:host(.force-state--focus) .lux-login-link,.lux-login-link:focus-visible{outline-color:var(--lux-color-focus-outline);outline-style:var(--lux-focus-outline-style);outline-width:var(--lux-focus-outline-width);outline-offset:var(--lux-focus-outline-offset)}.lux-login-link__label--sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;position:absolute !important;clip-path:inset(50%) !important;margin:-1px !important;padding:0 !important;width:1px !important;height:1px !important;overflow:hidden !important;white-space:nowrap !important}.lux-login-link__logo{inline-size:var(--lux-login-link-icon-size);block-size:var(--lux-login-link-icon-size);line-height:1}";
+const LuxLoginLinkStyle0 = loginLinkCss;
+
+const LoginLink = /*@__PURE__*/ proxyCustomElement(class LoginLink extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.agent = undefined;
+        this.label = undefined;
+    }
+    get printedLabel() {
+        if (this.label) {
+            return this.label;
+        }
+        return loginAgentsLabels[this.agent].label;
+    }
+    get hiddenAgentLabel() {
+        if (this.label) {
+            return '';
+        }
+        return loginAgentsLabels[this.agent].agentLabel;
+    }
+    renderLabel() {
+        const className = `${COMPONENT_TAG}__label`;
+        return (h("span", Object.assign({ class: className }, applyTestId('label')), this.printedLabel, h("span", { class: `${className}--sr-only` }, " ", this.hiddenAgentLabel)));
+    }
+    renderLogoIcon() {
+        const LoginLinkIcons = {
+            digid: h("lux-icon-logo-digid", null),
+            'digid-machtigen': h("lux-icon-logo-digid", null),
+            eherkenning: h("lux-icon-logo-eherkenning", null),
+            eidas: h("lux-icon-logo-eidas", null),
+        };
+        return LoginLinkIcons[this.agent];
+    }
+    renderLogoContainer() {
+        return (h("div", Object.assign({ class: `${COMPONENT_TAG}__logo`, "aria-hidden": "true" }, applyTestId('logo')), this.renderLogoIcon()));
+    }
+    render() {
+        const classNames = {
+            [`${COMPONENT_TAG}`]: true,
+            [`${COMPONENT_TAG}--${this.agent}`]: true,
+        };
+        return (h("button", { key: 'fd5fe83cd6f1c4cda2480397352f28e98bc520b3', class: classNames }, this.renderLogoContainer(), this.renderLabel()));
+    }
+    get el() { return this; }
+    static get style() { return LuxLoginLinkStyle0; }
+}, [1, "lux-login-link", {
+        "agent": [1],
+        "label": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["lux-login-link", "lux-icon-logo-digid", "lux-icon-logo-eherkenning", "lux-icon-logo-eidas"];
+    components.forEach(tagName => { switch (tagName) {
+        case "lux-login-link":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LoginLink);
+            }
+            break;
+        case "lux-icon-logo-digid":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "lux-icon-logo-eherkenning":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "lux-icon-logo-eidas":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const LuxLoginLink = LoginLink;
+const defineCustomElement = defineCustomElement$1;
+
+export { LuxLoginLink, defineCustomElement };
+
+//# sourceMappingURL=lux-login-link.js.map

package/dist/components/lux-login-link.js.map

@@ -0,0 +1 @@
+{"file":"lux-login-link.js","mappings":";;;;;;AAEO,MAAM,aAAa,GAAG,gBAAgB,CAAC;AAEvC,MAAM,iBAAiB,GAAgD;IAC5E,KAAK,EAAE;QACL,KAAK,EAAE,UAAU;QACjB,UAAU,EAAE,WAAW;KACxB;IACD,iBAAiB,EAAE;QACjB,KAAK,EAAE,0BAA0B;QACjC,UAAU,EAAE,WAAW;KACxB;IACD,WAAW,EAAE;QACX,KAAK,EAAE,oCAAoC;QAC3C,UAAU,EAAE,kBAAkB;KAC/B;IACD,KAAK,EAAE;QACL,KAAK,EAAE,gBAAgB;QACvB,UAAU,EAAE,YAAY;KACzB;CACF;;ACrBD,MAAM,YAAY,GAAG,8jEAA8jE,CAAC;AACplE,2BAAe,YAAY;;MCUd,SAAS;;;;;;;;IACpB,IAAY,YAAY;QACtB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAC;SACnB;QAED,OAAO,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;KAC5C;IAED,IAAY,gBAAgB;QAC1B,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,EAAE,CAAC;SACX;QAED,OAAO,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;KACjD;IAOD,WAAW;QACT,MAAM,SAAS,GAAG,GAAG,aAAa,SAAS,CAAC;QAC5C,QACE,0BAAM,KAAK,EAAE,SAAS,IAAM,WAAW,CAAC,OAAO,CAAC,GAC7C,IAAI,CAAC,YAAY,EAClB,YAAM,KAAK,EAAE,GAAG,SAAS,WAAW,SAAI,IAAI,CAAC,gBAAgB,CAAQ,CAChE,EACP;KACH;IAED,cAAc;QACZ,MAAM,cAAc,GAA+C;YACjE,KAAK,EAAE,8BAAuB;YAC9B,iBAAiB,EAAE,8BAAuB;YAC1C,WAAW,EAAE,oCAA6B;YAC1C,KAAK,EAAE,8BAAuB;SAC/B,CAAC;QAEF,OAAO,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC;IAED,mBAAmB;QACjB,QACE,yBAAK,KAAK,EAAE,GAAG,aAAa,QAAQ,iBAAc,MAAM,IAAK,WAAW,CAAC,MAAM,CAAC,GAC7E,IAAI,CAAC,cAAc,EAAE,CAClB,EACN;KACH;IAED,MAAM;QACJ,MAAM,UAAU,GAAG;YACjB,CAAC,GAAG,aAAa,EAAE,GAAG,IAAI;YAC1B,CAAC,GAAG,aAAa,KAAK,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI;SAC1C,CAAC;QAEF,QACE,+DAAQ,KAAK,EAAE,UAAU,IACtB,IAAI,CAAC,mBAAmB,EAAE,EAC1B,IAAI,CAAC,WAAW,EAAE,CACZ,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/login-link/constants.ts","src/components/login-link/login-link.scss?tag=lux-login-link&encapsulation=shadow","src/components/login-link/login-link.tsx"],"sourcesContent":["import type { LoginLinkAgent, LoginLinkLabelTuple } from './types';\n\nexport const COMPONENT_TAG = 'lux-login-link';\n\nexport const loginAgentsLabels: Record<LoginLinkAgent, LoginLinkLabelTuple> = {\n  digid: {\n    label: 'Inloggen',\n    agentLabel: 'met digid',\n  },\n  'digid-machtigen': {\n    label: 'Inloggen als gemachtigde',\n    agentLabel: 'met digid',\n  },\n  eherkenning: {\n    label: 'Inloggen als bedrijf of instelling',\n    agentLabel: 'met e-herkenning',\n  },\n  eidas: {\n    label: 'European login',\n    agentLabel: 'met e-idas',\n  },\n};\n","@import \"../../styles/sr-only\";\n\n:host {\n  display: contents;\n  appearance: button;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\n.lux-login-link {\n  display: flex;\n  column-gap: var(--lux-login-link-column-gap);\n  justify-content: flex-start;\n  align-items: center;\n  appearance: button;\n  margin-inline: 0;\n  margin-block: 0;\n  border-width: var(--lux-login-link-border-width);\n  border-style: var(--lux-login-link-border-style);\n  border-color: var(--lux-login-link-border-color);\n  border-radius: var(--lux-login-link-border-radius);\n  background-color: var(--lux-login-link-background-color);\n  padding-inline-start: var(--lux-login-link-padding-inline-start);\n  padding-inline-end: var(--lux-login-link-padding-inline-end);\n  padding-block-start: var(--lux-login-link-padding-block-start);\n  padding-block-end: var(--lux-login-link-padding-block-end);\n  min-inline-size: var(--lux-login-link-min-inline-size);\n  min-block-size: var(--lux-login-link-min-block-size);\n  color: var(--lux-login-link-color);\n  font-weight: var(--lux-login-link-font-weight);\n  font-size: var(--lux-login-link-font-size);\n  line-height: var(--lux-login-link-line-height);\n  font-family: var(--lux-login-link-font-family);\n  user-select: none;\n}\n\n:host(.force-state--hover) .lux-login-link,\n.lux-login-link:hover {\n  background-color: var(--lux-login-link-hover-background-color);\n}\n\n:host(.force-state--active) .lux-login-link,\n.lux-login-link:active {\n  border-color: var(--lux-login-link-active-border-color);\n  background-color: var(--lux-login-link-active-background-color);\n}\n\n:host(.force-state--focus) .lux-login-link,\n.lux-login-link:focus-visible {\n  outline-color: var(--lux-color-focus-outline);\n  outline-style: var(--lux-focus-outline-style);\n  outline-width: var(--lux-focus-outline-width);\n  outline-offset: var(--lux-focus-outline-offset);\n}\n\n.lux-login-link__label--sr-only {\n  @include sr-only;\n}\n\n.lux-login-link__logo {\n  inline-size: var(--lux-login-link-icon-size);\n  block-size: var(--lux-login-link-icon-size);\n  line-height: 1;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { COMPONENT_TAG, loginAgentsLabels } from './constants';\nimport type { LoginLinkAgent } from './types';\nimport { applyTestId } from '../../utils/test/testid';\n\n@Component({\n  tag: 'lux-login-link',\n  shadow: true,\n  styleUrl: 'login-link.scss',\n})\nexport class LoginLink {\n  private get printedLabel(): string {\n    if (this.label) {\n      return this.label;\n    }\n\n    return loginAgentsLabels[this.agent].label;\n  }\n\n  private get hiddenAgentLabel(): string {\n    if (this.label) {\n      return '';\n    }\n\n    return loginAgentsLabels[this.agent].agentLabel;\n  }\n\n  @Element() el!: HTMLLuxLoginLinkElement;\n\n  @Prop() public readonly agent!: LoginLinkAgent;\n  @Prop() public readonly label?: string;\n\n  renderLabel() {\n    const className = `${COMPONENT_TAG}__label`;\n    return (\n      <span class={className} {...applyTestId('label')}>\n        {this.printedLabel}\n        <span class={`${className}--sr-only`}> {this.hiddenAgentLabel}</span>\n      </span>\n    );\n  }\n\n  renderLogoIcon() {\n    const LoginLinkIcons: Record<LoginLinkAgent, HTMLStencilElement> = {\n      digid: <lux-icon-logo-digid />,\n      'digid-machtigen': <lux-icon-logo-digid />,\n      eherkenning: <lux-icon-logo-eherkenning />,\n      eidas: <lux-icon-logo-eidas />,\n    };\n\n    return LoginLinkIcons[this.agent];\n  }\n\n  renderLogoContainer() {\n    return (\n      <div class={`${COMPONENT_TAG}__logo`} aria-hidden=\"true\" {...applyTestId('logo')}>\n        {this.renderLogoIcon()}\n      </div>\n    );\n  }\n\n  render() {\n    const classNames = {\n      [`${COMPONENT_TAG}`]: true,\n      [`${COMPONENT_TAG}--${this.agent}`]: true,\n    };\n\n    return (\n      <button class={classNames}>\n        {this.renderLogoContainer()}\n        {this.renderLabel()}\n      </button>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/lux-paragraph.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const paragraphCss = ".utrecht-paragraph{color:var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));font-family:var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));font-size:var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));font-weight:var(--utrecht-paragraph-font-weight, inherit);line-height:var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0))}.utrecht-paragraph--lead{color:var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));font-size:var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));font-weight:var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));line-height:var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit))}.utrecht-paragraph--small{color:var(--utrecht-paragraph-small-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));font-size:var(--utrecht-paragraph-small-font-size, var(--utrecht-paragraph-font-size, inherit));font-weight:var(--utrecht-paragraph-small-font-weight, var(--utrecht-paragraph-font-weight, inherit));line-height:var(--utrecht-paragraph-small-line-height, var(--utrecht-paragraph-line-height, inherit))}.utrecht-paragraph__small{font-size:inherit}.utrecht-paragraph__b{font-weight:inherit}.utrecht-paragraph--distanced{--utrecht-space-around:1}:host{display:flow-root}:host([hidden]){display:none !important}";
+const LuxParagraphStyle0 = paragraphCss;
+
+const Paragraph = /*@__PURE__*/ proxyCustomElement(class Paragraph extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("p", { key: 'be9e7dc2f2310fdcfeddd05a3da0f6e439e58391', class: "utrecht-paragraph" }, h("slot", { key: 'a90ddf617d62ab2a3fbd05d6aea3664bcb03fae1' })));
+    }
+    get hostElement() { return this; }
+    static get style() { return LuxParagraphStyle0; }
+}, [1, "lux-paragraph"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["lux-paragraph"];
+    components.forEach(tagName => { switch (tagName) {
+        case "lux-paragraph":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Paragraph);
+            }
+            break;
+    } });
+}
+
+const LuxParagraph = Paragraph;
+const defineCustomElement = defineCustomElement$1;
+
+export { LuxParagraph, defineCustomElement };
+
+//# sourceMappingURL=lux-paragraph.js.map

package/dist/components/lux-paragraph.js.map

@@ -0,0 +1 @@
+{"file":"lux-paragraph.js","mappings":";;AAAA,MAAM,YAAY,GAAG,2rDAA2rD,CAAC;AACjtD,2BAAe,YAAY;;MCMd,SAAS;;;;;;IAGpB,MAAM;QACJ,QACE,0DAAG,KAAK,EAAC,mBAAmB,IAC1B,8DAAQ,CACN,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/paragraph/paragraph.scss?tag=lux-paragraph&encapsulation=shadow","src/components/paragraph/paragraph.tsx"],"sourcesContent":["@import \"~@utrecht/paragraph-css/src/index\";\n\n:host {\n  display: flow-root;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","import { Component, Element, h } from '@stencil/core';\n\n@Component({\n  tag: 'lux-paragraph',\n  styleUrl: 'paragraph.scss',\n  shadow: true,\n})\nexport class Paragraph {\n  @Element() hostElement!: HTMLParagraphElement;\n\n  render() {\n    return (\n      <p class=\"utrecht-paragraph\">\n        <slot />\n      </p>\n    );\n  }\n}\n"],"version":3}

package/dist/components/success.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as applyTestId } from './testid.js';
+
+const iconCss = ":host{--_lux-icon-primary-color:var(\n    --lux-icon-color,\n    var(--utrecht-icon-color, var(--lux-color-foreground-on-emphasis, white))\n  );--_lux-icon-secondary-color:var(--lux-icon-color-contrast, var(--lux-color-foreground-default, black));display:inline-grid;position:relative;inset-block-start:var(--lux-alert-icon-inset-block-start, 0);inline-size:var(--lux-icon-size, 1rem);block-size:var(--lux-icon-size, 1rem);color:var(--_lux-icon-primary-color);}";
+const LuxIconSuccessStyle0 = iconCss;
+
+const IconSuccess = /*@__PURE__*/ proxyCustomElement(class IconSuccess extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("svg", Object.assign({ key: 'ab9333dd46b5323f4e3a417500bf7aa60bf0c4db', class: "lux-icon", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, applyTestId('icon-success'), { part: "icon" }), h("path", { key: '866701960977975b78608657e945bf866b18903a', d: "M22.04 3.78C21.88 2.83 21.16 2.11 20.21 1.95C17.48 1.5 12.91 1.5 12 1.5C11.09 1.5 6.52 1.5 3.78 1.96C2.83 2.11 2.11 2.83 1.96 3.78C1.5 6.52 1.5 11.09 1.5 12C1.5 12.91 1.5 17.48 1.96 20.22C2.12 21.17 2.84 21.89 3.79 22.05C6.53 22.51 11.09 22.51 12.01 22.51C12.92 22.51 17.49 22.51 20.23 22.05C21.18 21.89 21.9 21.17 22.06 20.22C22.52 17.48 22.52 12.92 22.52 12C22.5 9.26 22.5 6.52 22.04 3.78Z", style: { fill: 'var(--_lux-icon-primary-color, #39870C)' } }), h("path", { key: '72564f4d4813e5e981791aa760eea75697f10476', d: "M16.5 7.35C16.19 7.12 15.75 7.16 15.49 7.45L11.09 12.4L8.44002 10.1C8.16002 9.86 7.75002 9.86 7.47002 10.1C7.19002 10.34 7.12002 10.75 7.31002 11.07L10.51 16.45C10.65 16.68 10.89 16.82 11.15 16.82C11.41 16.82 11.66 16.68 11.79 16.46L16.68 8.37C16.89 8.02 16.81 7.59 16.5 7.35Z", style: { fill: 'var(--_lux-icon-secondary-color, white)' } })));
+    }
+    static get style() { return LuxIconSuccessStyle0; }
+}, [1, "lux-icon-success"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["lux-icon-success"];
+    components.forEach(tagName => { switch (tagName) {
+        case "lux-icon-success":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, IconSuccess);
+            }
+            break;
+    } });
+}
+
+export { IconSuccess as I, defineCustomElement as d };
+
+//# sourceMappingURL=success.js.map

package/dist/components/success.js.map

@@ -0,0 +1 @@
+{"file":"success.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,+cAA+c,CAAC;AAChe,6BAAe,OAAO;;MCOT,WAAW;;;;;;IACtB,MAAM;QACJ,QACE,0EACE,KAAK,EAAC,UAAU,EAChB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAC9B,WAAW,CAAC,cAAc,CAAC,IAC/B,IAAI,EAAC,MAAM,KAEX,6DACE,CAAC,EAAC,yYAAyY,EAC3Y,KAAK,EAAE,EAAE,IAAI,EAAE,yCAAyC,EAAE,GAC1D,EACF,6DACE,CAAC,EAAC,sRAAsR,EACxR,KAAK,EAAE,EAAE,IAAI,EAAE,yCAAyC,EAAE,GAC1D,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/icons/icon.css?tag=lux-icon-success&encapsulation=shadow","src/icons/success.tsx"],"sourcesContent":["/* stylelint-disable custom-property-pattern */\n:host {\n  --_lux-icon-primary-color: var(\n    --lux-icon-color,\n    var(--utrecht-icon-color, var(--lux-color-foreground-on-emphasis, white))\n  );\n  --_lux-icon-secondary-color: var(--lux-icon-color-contrast, var(--lux-color-foreground-default, black));\n\n  display: inline-grid;\n  position: relative;\n  inset-block-start: var(--lux-alert-icon-inset-block-start, 0);\n  inline-size: var(--lux-icon-size, 1rem);\n  block-size: var(--lux-icon-size, 1rem);\n  color: var(--_lux-icon-primary-color); /* currentColor */\n}\n","import { Component, h } from '@stencil/core';\nimport { applyTestId } from '../utils/test/testid';\n\n@Component({\n  tag: 'lux-icon-success',\n  styleUrl: './icon.css',\n  shadow: true,\n})\nexport class IconSuccess {\n  render() {\n    return (\n      <svg\n        class=\"lux-icon\"\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...applyTestId('icon-success')}\n        part=\"icon\"\n      >\n        <path\n          d=\"M22.04 3.78C21.88 2.83 21.16 2.11 20.21 1.95C17.48 1.5 12.91 1.5 12 1.5C11.09 1.5 6.52 1.5 3.78 1.96C2.83 2.11 2.11 2.83 1.96 3.78C1.5 6.52 1.5 11.09 1.5 12C1.5 12.91 1.5 17.48 1.96 20.22C2.12 21.17 2.84 21.89 3.79 22.05C6.53 22.51 11.09 22.51 12.01 22.51C12.92 22.51 17.49 22.51 20.23 22.05C21.18 21.89 21.9 21.17 22.06 20.22C22.52 17.48 22.52 12.92 22.52 12C22.5 9.26 22.5 6.52 22.04 3.78Z\"\n          style={{ fill: 'var(--_lux-icon-primary-color, #39870C)' }}\n        />\n        <path\n          d=\"M16.5 7.35C16.19 7.12 15.75 7.16 15.49 7.45L11.09 12.4L8.44002 10.1C8.16002 9.86 7.75002 9.86 7.47002 10.1C7.19002 10.34 7.12002 10.75 7.31002 11.07L10.51 16.45C10.65 16.68 10.89 16.82 11.15 16.82C11.41 16.82 11.66 16.68 11.79 16.46L16.68 8.37C16.89 8.02 16.81 7.59 16.5 7.35Z\"\n          style={{ fill: 'var(--_lux-icon-secondary-color, white)' }}\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/components/testid.js

@@ -0,0 +1,15 @@
+import { Build } from '@stencil/core/internal/client';
+
+const testIdProp = 'data-testid';
+const applyTestId = (id) => {
+    if (Build.isDev || Build.isTesting) {
+        return {
+            [testIdProp]: id,
+        };
+    }
+    return null;
+};
+
+export { applyTestId as a };
+
+//# sourceMappingURL=testid.js.map

package/dist/components/testid.js.map

@@ -0,0 +1 @@
+{"file":"testid.js","mappings":";;AAEA,MAAM,UAAU,GAAG,aAAa,CAAC;MAMpB,WAAW,GAAG,CAAC,EAAU;IACpC,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,EAAE;QAClC,OAAO;YACL,CAAC,UAAU,GAAG,EAAE;SACjB,CAAC;KACH;IAED,OAAO,IAAI,CAAC;AACd;;;;","names":[],"sources":["src/utils/test/testid.ts"],"sourcesContent":["import { Build } from '@stencil/core';\n\nconst testIdProp = 'data-testid';\n\ninterface TestIdObject {\n  [testIdProp]: string;\n}\n\nexport const applyTestId = (id: string): TestIdObject | null => {\n  if (Build.isDev || Build.isTesting) {\n    return {\n      [testIdProp]: id,\n    };\n  }\n\n  return null;\n};\n\nexport const getTestIdSelector = (id: string): string => `[${testIdProp}=\"${id}\"]`;\n"],"version":3}