@utrecht/web-component-library-stencil 1.0.0-alpha.9 → 1.0.0-alpha.93

package/dist/cjs/{index-04d7da5a.js → index-b96d9af7.js}

@@ -35,8 +35,8 @@ const doc = win.document || { head: {} };
 const plt = {
     $flags$: 0,
     $resourcesUrl$: '',
-    jmp: h => h(),
-    raf: h => requestAnimationFrame(h),
+    jmp: (h) => h(),
+    raf: (h) => requestAnimationFrame(h),
     ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
     rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
     ce: (eventName, opts) => new CustomEvent(eventName, opts),
@@ -45,7 +45,7 @@ const promiseResolve = (v) => Promise.resolve(v);
 const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
         try {
             new CSSStyleSheet();
-            return typeof (new CSSStyleSheet()).replace === 'function';
+            return typeof new CSSStyleSheet().replace === 'function';
         }
         catch (e) { }
         return false;
@@ -139,6 +139,11 @@ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
  * Don't add values to these!!
  */
 const EMPTY_OBJ = {};
+/**
+ * Namespaces
+ */
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const HTML_NS = 'http://www.w3.org/1999/xhtml';
 const isDef = (v) => v != null;
 const isComplexType = (o) => {
     // https://jsperf.com/typeof-fn-object/5
@@ -158,6 +163,7 @@ const isComplexType = (o) => {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let slotName = null;
     let simple = false;
     let lastSimple = false;
@@ -186,6 +192,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         if (vnodeData.name) {
             slotName = vnodeData.name;
         }
@@ -196,7 +206,7 @@ const h = (nodeName, vnodeData, ...children) => {
                     typeof classData !== 'object'
                         ? classData
                         : Object.keys(classData)
-                            .filter(k => classData[k])
+                            .filter((k) => classData[k])
                             .join(' ');
             }
         }
@@ -206,6 +216,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     {
         vnode.$name$ = slotName;
     }
@@ -222,6 +235,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     {
         vnode.$name$ = null;
     }
@@ -240,13 +256,54 @@ const isHost = (node) => node && node.$tag$ === Host;
 const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     if (oldValue !== newValue) {
         let isProp = isMemberInElement(elm, memberName);
-        memberName.toLowerCase();
+        let ln = memberName.toLowerCase();
         if (memberName === 'class') {
             const classList = elm.classList;
             const oldClasses = parseClassList(oldValue);
             const newClasses = parseClassList(newValue);
-            classList.remove(...oldClasses.filter(c => c && !newClasses.includes(c)));
-            classList.add(...newClasses.filter(c => c && !oldClasses.includes(c)));
+            classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
+            classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+        }
+        else if (memberName === 'key')
+            ;
+        else if ((!isProp ) &&
+            memberName[0] === 'o' &&
+            memberName[1] === 'n') {
+            // Event Handlers
+            // so if the member name starts with "on" and the 3rd characters is
+            // a capital letter, and it's not already a member on the element,
+            // then we're assuming it's an event listener
+            if (memberName[2] === '-') {
+                // on- prefixed events
+                // allows to be explicit about the dom event to listen without any magic
+                // under the hood:
+                // <my-cmp on-click> // listens for "click"
+                // <my-cmp on-Click> // listens for "Click"
+                // <my-cmp on-ionChange> // listens for "ionChange"
+                // <my-cmp on-EVENTS> // listens for "EVENTS"
+                memberName = memberName.slice(3);
+            }
+            else if (isMemberInElement(win, ln)) {
+                // standard event
+                // the JSX attribute could have been "onMouseOver" and the
+                // member name "onmouseover" is on the window's prototype
+                // so let's add the listener "mouseover", which is all lowercased
+                memberName = ln.slice(2);
+            }
+            else {
+                // custom event
+                // the JSX attribute could have been "onMyCustomEvent"
+                // so let's trim off the "on" prefix and lowercase the first character
+                // and add the listener "myCustomEvent"
+                // except for the first character, we keep the event name case
+                memberName = ln[2] + memberName.slice(3);
+            }
+            if (oldValue) {
+                plt.rel(elm, memberName, oldValue, false);
+            }
+            if (newValue) {
+                plt.ael(elm, memberName, newValue, false);
+            }
         }
         else {
             // Set property if it exists and it's not a SVG
@@ -292,7 +349,9 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
     // if the element passed in is a shadow root, which is a document fragment
     // then we want to be adding attrs/props to the shadow root's "host" element
     // if it's not a shadow root, then we add attrs/props to the same element
-    const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
+    const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host
+        ? newVnode.$elm$.host
+        : newVnode.$elm$;
     const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
     const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
     {
@@ -336,11 +395,21 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     else if (newVNode.$flags$ & 1 /* isSlotReference */) {
         // create a slot reference node
-        elm = newVNode.$elm$ = doc.createTextNode('');
+        elm = newVNode.$elm$ =
+            doc.createTextNode('');
     }
     else {
+        if (!isSvgMode) {
+            isSvgMode = newVNode.$tag$ === 'svg';
+        }
         // create element
-        elm = newVNode.$elm$ = (doc.createElement(newVNode.$flags$ & 2 /* isSlotFallback */ ? 'slot-fb' : newVNode.$tag$));
+        elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$flags$ & 2 /* isSlotFallback */
+                ? 'slot-fb'
+                : newVNode.$tag$)
+            );
+        if (isSvgMode && newVNode.$tag$ === 'foreignObject') {
+            isSvgMode = false;
+        }
         // add css classes, attrs, props, listeners, etc.
         {
             updateElement(null, newVNode, isSvgMode);
@@ -361,6 +430,16 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
                 }
             }
         }
+        {
+            if (newVNode.$tag$ === 'svg') {
+                // Only reset the SVG context when we're exiting <svg> element
+                isSvgMode = false;
+            }
+            else if (elm.tagName === 'foreignObject') {
+                // Reenter SVG context when we're exiting <foreignObject> element
+                isSvgMode = true;
+            }
+        }
     }
     {
         elm['s-hn'] = hostTagName;
@@ -448,6 +527,8 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -455,6 +536,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
+    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // Vnode might have been moved left
@@ -500,7 +582,29 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // createKeyToOldIdx
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // new element
                 node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
                 newStartVnode = newCh[++newStartIdx];
@@ -526,7 +630,9 @@ const isSameVnode = (vnode1, vnode2) => {
         if (vnode1.$tag$ === 'slot') {
             return vnode1.$name$ === vnode2.$name$;
         }
-        return true;
+        {
+            return vnode1.$key$ === vnode2.$key$;
+        }
     }
     return false;
 };
@@ -546,6 +652,11 @@ const patch = (oldVNode, newVNode) => {
     const text = newVNode.$text$;
     let defaultHolder;
     if (text === null) {
+        {
+            // test if we're rendering an svg element, or still rendering nodes inside of one
+            // only add this to the when the compiler sees we're using an svg somewhere
+            isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
+        }
         // element node
         {
             if (tag === 'slot')
@@ -574,6 +685,9 @@ const patch = (oldVNode, newVNode) => {
             // no new child vnodes, but there are old child vnodes to remove
             removeVnodes(oldChildren, 0, oldChildren.length - 1);
         }
+        if (isSvgMode && tag === 'svg') {
+            isSvgMode = false;
+        }
     }
     else if ((defaultHolder = elm['s-cr'])) {
         // this element has slotted content
@@ -657,7 +771,7 @@ const relocateSlotContent = (elm) => {
                     // that is suppose to always represent the original content location
                     if (isNodeLocatedInSlot(node, slotNameAttr)) {
                         // it's possible we've already decided to relocate this node
-                        relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
+                        relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
                         // made some changes to slots
                         // let's make sure we also double check
                         // fallbacks are correctly hidden or shown
@@ -676,9 +790,9 @@ const relocateSlotContent = (elm) => {
                             });
                         }
                         if (node['s-sr']) {
-                            relocateNodes.map(relocateNode => {
+                            relocateNodes.map((relocateNode) => {
                                 if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
-                                    relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
+                                    relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
                                     if (relocateNodeData && !relocateNode.$slotRefNode$) {
                                         relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
                                     }
@@ -686,7 +800,7 @@ const relocateSlotContent = (elm) => {
                             });
                         }
                     }
-                    else if (!relocateNodes.some(r => r.$nodeToRelocate$ === node)) {
+                    else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
                         // so far this element does not have a slot home, not setting slotRefNode on purpose
                         // if we never find a home for this element then we'll need to hide it
                         relocateNodes.push({
@@ -722,6 +836,10 @@ const renderVdom = (hostRef, renderFnResults) => {
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
+    if (cmpMeta.$attrsToReflect$) {
+        rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+        cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
+    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -756,7 +874,8 @@ const renderVdom = (hostRef, renderFnResults) => {
                 if (!nodeToRelocate['s-ol']) {
                     // add a reference node marking this node's original location
                     // keep a reference to this node for later lookups
-                    orgLocationNode = doc.createTextNode('');
+                    orgLocationNode =
+                        doc.createTextNode('');
                     orgLocationNode['s-nr'] = nodeToRelocate;
                     nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
                 }
@@ -780,7 +899,8 @@ const renderVdom = (hostRef, renderFnResults) => {
                             }
                         }
                     }
-                    if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) || nodeToRelocate.nextSibling !== insertBeforeNode) {
+                    if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
+                        nodeToRelocate.nextSibling !== insertBeforeNode) {
                         // we've checked that it's worth while to relocate
                         // since that the node to relocate
                         // has a different next sibling or parent relocated
@@ -812,6 +932,27 @@ const renderVdom = (hostRef, renderFnResults) => {
         relocateNodes.length = 0;
     }
 };
+const getElement = (ref) => (getHostRef(ref).$hostElement$ );
+const createEvent = (ref, name, flags) => {
+    const elm = getElement(ref);
+    return {
+        emit: (detail) => {
+            return emitEvent(elm, name, {
+                bubbles: !!(flags & 4 /* Bubbles */),
+                composed: !!(flags & 2 /* Composed */),
+                cancelable: !!(flags & 1 /* Cancellable */),
+                detail,
+            });
+        },
+    };
+};
+/**
+ * Helper function to create & dispatch a custom Event on a provided target
+ * @param elm the target of the Event
+ * @param name the name to give the custom Event
+ * @param opts options for configuring a custom Event
+ * @returns the custom Event
+ */
 const emitEvent = (elm, name, opts) => {
     const ev = plt.ce(name, opts);
     elm.dispatchEvent(ev);
@@ -819,7 +960,7 @@ const emitEvent = (elm, name, opts) => {
 };
 const attachToAncestor = (hostRef, ancestorComponent) => {
     if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
-        ancestorComponent['s-p'].push(new Promise(r => (hostRef.$onRenderResolve$ = r)));
+        ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
     }
 };
 const scheduleUpdate = (hostRef, isInitialLoad) => {
@@ -861,7 +1002,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
         // ok, so turns out there are some child host elements
         // waiting on this parent element to load
         // let's fire off all update callbacks waiting
-        rc.map(cb => cb());
+        rc.map((cb) => cb());
         elm['s-rc'] = undefined;
     }
     endRender();
@@ -953,7 +1094,8 @@ const appDidLoad = (who) => {
 const then = (promise, thenFn) => {
     return promise && promise.then ? promise.then(thenFn) : thenFn();
 };
-const addHydratedFlag = (elm) => (elm.classList.add('hydrated') );
+const addHydratedFlag = (elm) => elm.classList.add('hydrated')
+    ;
 const parsePropertyValue = (propValue, propType) => {
     // ensure this value is of the correct prop type
     if (propValue != null && !isComplexType(propValue)) {
@@ -1007,7 +1149,8 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
         const members = Object.entries(cmpMeta.$members$);
         const prototype = Cstr.prototype;
         members.map(([memberName, [memberFlags]]) => {
-            if ((memberFlags & 31 /* Prop */ || ((flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
+            if ((memberFlags & 31 /* Prop */ ||
+                    ((flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
                 // proxyComponent - prop
                 Object.defineProperty(prototype, memberName, {
                     get() {
@@ -1028,6 +1171,43 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
             prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
+                    //  In a webcomponent lifecyle the attributeChangedCallback runs prior to connectedCallback
+                    //  in the case where an attribute was set inline.
+                    //  ```html
+                    //    <my-component some-attribute="some-value"></my-component>
+                    //  ```
+                    //
+                    //  There is an edge case where a developer sets the attribute inline on a custom element and then programatically
+                    //  changes it before it has been upgraded as shown below:
+                    //
+                    //  ```html
+                    //    <!-- this component has _not_ been upgraded yet -->
+                    //    <my-component id="test" some-attribute="some-value"></my-component>
+                    //    <script>
+                    //      // grab non-upgraded component
+                    //      el = document.querySelector("#test");
+                    //      el.someAttribute = "another-value";
+                    //      // upgrade component
+                    //      cutsomElements.define('my-component', MyComponent);
+                    //    </script>
+                    //  ```
+                    //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
+                    //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
+                    //  to the value that was set inline i.e. "some-value" from above example. When
+                    //  the connectedCallback attempts to unshadow it will use "some-value" as the intial value rather than "another-value"
+                    //
+                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
+                    //  by connectedCallback as this attributeChangedCallback will not fire.
+                    //
+                    //  https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
+                    //
+                    //  TODO(STENCIL-16) we should think about whether or not we actually want to be reflecting the attributes to
+                    //  properties here given that this goes against best practices outlined here
+                    //  https://developers.google.com/web/fundamentals/web-components/best-practices#avoid-reentrancy
+                    if (this.hasOwnProperty(propName)) {
+                        newValue = this[propName];
+                        delete this[propName];
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
@@ -1038,6 +1218,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 .map(([propName, m]) => {
                 const attrName = m[1] || propName;
                 attrNameToPropName.set(attrName, propName);
+                if (m[0] & 512 /* ReflectAttr */) {
+                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                }
                 return attrName;
             });
         }
@@ -1192,7 +1375,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     let isBootstrapping = true;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
-    lazyBundles.map(lazyBundle => lazyBundle[1].map(compactMeta => {
+    lazyBundles.map((lazyBundle) => lazyBundle[1].map((compactMeta) => {
         const cmpMeta = {
             $flags$: compactMeta[0],
             $tagName$: compactMeta[1],
@@ -1202,6 +1385,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
         {
             cmpMeta.$members$ = compactMeta[2];
         }
+        {
+            cmpMeta.$attrsToReflect$ = [];
+        }
         const tagName = cmpMeta.$tagName$;
         const HostElement = class extends HTMLElement {
             // StencilLazyHost
@@ -1256,7 +1442,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
     if (deferredConnectedCallbacks.length) {
-        deferredConnectedCallbacks.map(host => host.connectedCallback());
+        deferredConnectedCallbacks.map((host) => host.connectedCallback());
     }
     else {
         {
@@ -1277,7 +1463,7 @@ const registerHost = (elm, cmpMeta) => {
         $instanceValues$: new Map(),
     };
     {
-        hostRef.$onReadyPromise$ = new Promise(r => (hostRef.$onReadyResolve$ = r));
+        hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
         elm['s-p'] = [];
         elm['s-rc'] = [];
     }
@@ -1298,7 +1484,7 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     /* webpackInclude: /\.entry\.js$/ */
     /* webpackExclude: /\.system\.entry\.js$/ */
     /* webpackMode: "lazy" */
-    `./${bundleId}.entry.js${''}`)); }).then(importedModule => {
+    `./${bundleId}.entry.js${''}`)); }).then((importedModule) => {
         {
             cmpModules.set(bundleId, importedModule);
         }
@@ -1350,6 +1536,8 @@ const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 exports.bootstrapLazy = bootstrapLazy;
+exports.createEvent = createEvent;
+exports.getElement = getElement;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-04d7da5a.js');
+const index = require('./index-b96d9af7.js');
 
 /*
- Stencil Client Patch Esm v2.6.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.8.1 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["utrecht-article.cjs",[[1,"utrecht-article"]]],["utrecht-badge-counter.cjs",[[1,"utrecht-badge-counter",{"value":[2],"max":[2],"locale":[1]}]]],["utrecht-badge-data.cjs",[[1,"utrecht-badge-data"]]],["utrecht-badge-status.cjs",[[1,"utrecht-badge-status",{"status":[1]}]]],["utrecht-button.cjs",[[1,"utrecht-button",{"disabled":[4]}]]],["utrecht-document.cjs",[[1,"utrecht-document"]]],["utrecht-heading.cjs",[[1,"utrecht-heading",{"level":[2]}]]],["utrecht-html-content.cjs",[[4,"utrecht-html-content"]]],["utrecht-page-footer.cjs",[[1,"utrecht-page-footer"]]],["utrecht-paragraph.cjs",[[1,"utrecht-paragraph",{"lead":[4]}]]],["utrecht-separator.cjs",[[1,"utrecht-separator"]]]], options);
+  return index.bootstrapLazy([["utrecht-contact-card-template.cjs",[[1,"utrecht-contact-card-template"]]],["utrecht-digid-button.cjs",[[1,"utrecht-digid-button",{"type":[1]}]]],["utrecht-logo-button.cjs",[[1,"utrecht-logo-button",{"type":[1]}]]],["utrecht-article.cjs",[[1,"utrecht-article"]]],["utrecht-badge-counter.cjs",[[1,"utrecht-badge-counter",{"value":[2],"max":[2],"locale":[1]}]]],["utrecht-badge-data.cjs",[[1,"utrecht-badge-data"]]],["utrecht-badge-status.cjs",[[1,"utrecht-badge-status",{"status":[1]}]]],["utrecht-breadcrumb.cjs",[[1,"utrecht-breadcrumb",{"json":[1],"variant":[1]}]]],["utrecht-checkbox.cjs",[[1,"utrecht-checkbox",{"disabled":[516],"readOnly":[516,"readonly"],"checked":[4],"value":[1]}]]],["utrecht-document.cjs",[[1,"utrecht-document"]]],["utrecht-eherkenning-logo.cjs",[[1,"utrecht-eherkenning-logo"]]],["utrecht-eidas-logo.cjs",[[1,"utrecht-eidas-logo"]]],["utrecht-form-field-checkbox.cjs",[[1,"utrecht-form-field-checkbox",{"label":[4],"disabled":[516],"checked":[516],"invalid":[516],"required":[516],"value":[32]}]]],["utrecht-form-field-description.cjs",[[1,"utrecht-form-field-description",{"status":[513]}]]],["utrecht-form-field-textarea.cjs",[[1,"utrecht-form-field-textarea",{"disabled":[516],"invalid":[516],"readOnly":[516,"readonly"],"placeholder":[1],"required":[516],"value":[1]}]]],["utrecht-form-field-textbox.cjs",[[1,"utrecht-form-field-textbox",{"autoComplete":[513,"autocomplete"],"disabled":[516],"invalid":[516],"min":[1],"max":[1],"pattern":[1],"placeholder":[1],"readOnly":[516,"readonly"],"required":[516],"type":[513],"value":[1]}]]],["utrecht-form-toggle.cjs",[[1,"utrecht-form-toggle",{"disabled":[516],"checked":[516]}]]],["utrecht-heading.cjs",[[1,"utrecht-heading",{"level":[2]}]]],["utrecht-heading-1.cjs",[[1,"utrecht-heading-1"]]],["utrecht-heading-4.cjs",[[1,"utrecht-heading-4"]]],["utrecht-heading-5.cjs",[[1,"utrecht-heading-5"]]],["utrecht-heading-6.cjs",[[1,"utrecht-heading-6"]]],["utrecht-html-content.cjs",[[4,"utrecht-html-content"]]],["utrecht-icon-arrow.cjs",[[1,"utrecht-icon-arrow"]]],["utrecht-icon-cross.cjs",[[1,"utrecht-icon-cross"]]],["utrecht-icon-facebook.cjs",[[1,"utrecht-icon-facebook"]]],["utrecht-icon-filter.cjs",[[1,"utrecht-icon-filter"]]],["utrecht-icon-instagram.cjs",[[1,"utrecht-icon-instagram"]]],["utrecht-icon-linkedin.cjs",[[1,"utrecht-icon-linkedin"]]],["utrecht-icon-list.cjs",[[1,"utrecht-icon-list"]]],["utrecht-icon-loupe.cjs",[[1,"utrecht-icon-loupe"]]],["utrecht-icon-twitter.cjs",[[1,"utrecht-icon-twitter"]]],["utrecht-icon-whatsapp.cjs",[[1,"utrecht-icon-whatsapp"]]],["utrecht-icon-zoomin.cjs",[[1,"utrecht-icon-zoomin"]]],["utrecht-icon-zoomout.cjs",[[1,"utrecht-icon-zoomout"]]],["utrecht-logo.cjs",[[1,"utrecht-logo"]]],["utrecht-page-footer.cjs",[[1,"utrecht-page-footer"]]],["utrecht-pagination.cjs",[[1,"utrecht-pagination",{"links":[1],"next":[1],"prev":[1],"currentIndex":[2,"current-index"]}]]],["utrecht-separator.cjs",[[1,"utrecht-separator"]]],["utrecht-sidenav.cjs",[[1,"utrecht-sidenav",{"json":[1]}]]],["utrecht-textbox.cjs",[[1,"utrecht-textbox",{"autoComplete":[513,"autocomplete"],"disabled":[516],"invalid":[516],"min":[1],"max":[1],"pattern":[1],"placeholder":[1],"readOnly":[516,"readonly"],"required":[516],"type":[513],"value":[1]}]]],["utrecht-heading-2_3.cjs",[[1,"utrecht-heading-2"],[1,"utrecht-heading-3"],[1,"utrecht-paragraph",{"lead":[4]}]]],["utrecht-button_2.cjs",[[1,"utrecht-button",{"busy":[4],"disabled":[4],"type":[1]}],[1,"utrecht-digid-logo"]]]], options);
   });
 };
 

package/dist/cjs/utrecht-article.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-04d7da5a.js');
+const index = require('./index-b96d9af7.js');
 
-const bemCss = ".utrecht-article{max-inline-size:var(--utrecht-article-max-inline-size)}";
+const stencilCss = ".utrecht-article{max-inline-size:var(--utrecht-article-max-inline-size)}:host{display:block}:host([hidden]){display:none !important}";
 
 const Article = class {
   constructor(hostRef) {
@@ -14,6 +14,6 @@ const Article = class {
     return (index.h("article", { class: "utrecht-article" }, index.h("slot", null)));
   }
 };
-Article.style = bemCss;
+Article.style = stencilCss;
 
 exports.utrecht_article = Article;

package/dist/cjs/utrecht-badge-counter.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-04d7da5a.js');
+const index = require('./index-b96d9af7.js');
 
-const bemCss = ".utrecht-badge{background-color:var(--utrecht-badge-background-color, black);border-radius:var(--utrecht-badge-border-radius, 0.5ch);color:var(--utrecht-badge-color, white);display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-style:normal;font-weight:var(--utrecht-badge-font-weight, bold);padding-block-end:var(--utrecht-badge-padding-block, 0.5ex);padding-block-start:var(--utrecht-badge-padding-block, 0.5ex);padding-inline-end:var(--utrecht-badge-padding-inline, 0.5ch);padding-inline-start:var(--utrecht-badge-padding-inline, 0.5ch);text-decoration:none;}.utrecht-badge-counter{background-color:var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, black));border-radius:var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));color:var(--utrecht-badge-counter-color, var(--utrecht-badge-color, white));display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-style:normal;font-weight:var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));padding-block-end:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-block-start:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-inline-end:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));padding-inline-start:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));text-decoration:none;}";
+const stencilCss = ".utrecht-badge{background-color:var(--utrecht-badge-background-color, black);border-radius:var(--utrecht-badge-border-radius, 0.5ch);color:var(--utrecht-badge-color, white);display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-size:var(--utrecht-badge-font-size, inherit);font-style:normal;font-weight:var(--utrecht-badge-font-weight, bold);padding-block-end:var(--utrecht-badge-padding-block, 0.5ex);padding-block-start:var(--utrecht-badge-padding-block, 0.5ex);padding-inline-end:var(--utrecht-badge-padding-inline, 0.5ch);padding-inline-start:var(--utrecht-badge-padding-inline, 0.5ch);text-decoration:none;}.utrecht-badge-counter{background-color:var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, black));border-radius:var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));color:var(--utrecht-badge-counter-color, var(--utrecht-badge-color, white));display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-style:normal;font-weight:var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));padding-block-end:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-block-start:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-inline-end:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));padding-inline-start:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));text-decoration:none;}:host{display:inline-block}:host([hidden]){display:none !important}";
 
 const BadgeCounter = class {
   constructor(hostRef) {
@@ -18,6 +18,6 @@ const BadgeCounter = class {
     return index.h("div", { class: "utrecht-badge-counter" }, textContent ? textContent : index.h("slot", null));
   }
 };
-BadgeCounter.style = bemCss;
+BadgeCounter.style = stencilCss;
 
 exports.utrecht_badge_counter = BadgeCounter;

package/dist/cjs/utrecht-badge-data.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-04d7da5a.js');
+const index = require('./index-b96d9af7.js');
 
-const bemCss = ".utrecht-badge,.utrecht-badge-data{background-color:var(--utrecht-badge-background-color, black);border-radius:var(--utrecht-badge-border-radius, 0.5ch);color:var(--utrecht-badge-color, white);display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-style:normal;font-weight:var(--utrecht-badge-font-weight, bold);padding-block-end:var(--utrecht-badge-padding-block, 0.5ex);padding-block-start:var(--utrecht-badge-padding-block, 0.5ex);padding-inline-end:var(--utrecht-badge-padding-inline, 0.5ch);padding-inline-start:var(--utrecht-badge-padding-inline, 0.5ch);text-decoration:none;}.utrecht-badge-data{letter-spacing:var(--utrecht-badge-data-letter-spacing, inherit);text-transform:var(--utrecht-badge-data-text-transform, inherit)}";
+const stencilCss = ".utrecht-badge,.utrecht-badge-data{background-color:var(--utrecht-badge-background-color, black);border-radius:var(--utrecht-badge-border-radius, 0.5ch);color:var(--utrecht-badge-color, white);display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-size:var(--utrecht-badge-font-size, inherit);font-style:normal;font-weight:var(--utrecht-badge-font-weight, bold);padding-block-end:var(--utrecht-badge-padding-block, 0.5ex);padding-block-start:var(--utrecht-badge-padding-block, 0.5ex);padding-inline-end:var(--utrecht-badge-padding-inline, 0.5ch);padding-inline-start:var(--utrecht-badge-padding-inline, 0.5ch);text-decoration:none;}.utrecht-badge-data{letter-spacing:var(--utrecht-badge-data-letter-spacing, inherit);text-transform:var(--utrecht-badge-data-text-transform, inherit)}:host{display:inline-block}:host([hidden]){display:none !important}";
 
 const BadgeData = class {
   constructor(hostRef) {
@@ -14,6 +14,6 @@ const BadgeData = class {
     return (index.h("div", { class: "utrecht-badge-data" }, index.h("slot", null)));
   }
 };
-BadgeData.style = bemCss;
+BadgeData.style = stencilCss;
 
 exports.utrecht_badge_data = BadgeData;

package/dist/cjs/utrecht-badge-status.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-04d7da5a.js');
+const index = require('./index-b96d9af7.js');
 
-const bemCss = ".utrecht-badge,.utrecht-badge-status{background-color:var(--utrecht-badge-background-color, black);border-radius:var(--utrecht-badge-border-radius, 0.5ch);color:var(--utrecht-badge-color, white);display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-style:normal;font-weight:var(--utrecht-badge-font-weight, bold);padding-block-end:var(--utrecht-badge-padding-block, 0.5ex);padding-block-start:var(--utrecht-badge-padding-block, 0.5ex);padding-inline-end:var(--utrecht-badge-padding-inline, 0.5ch);padding-inline-start:var(--utrecht-badge-padding-inline, 0.5ch);text-decoration:none;}.utrecht-badge-status{letter-spacing:var(--utrecht-badge-status-letter-spacing, inherit);text-transform:var(--utrecht-badge-status-text-transform, inherit)}.utrecht-badge-status--danger{background-color:var(--utrecht-feedback-danger-fill-background-color, red);color:var(--utrecht-feedback-danger-fill-color, white)}.utrecht-badge-status--warning{background-color:var(--utrecht-feedback-warning-fill-background-color, #ffa600);color:var(--utrecht-feedback-warning-fill-color, white)}.utrecht-badge-status--safe{background-color:var(--utrecht-feedback-safe-fill-background-color, green);color:var(--utrecht-feedback-safe-fill-color, white)}.utrecht-badge-status--valid{background-color:var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, red));color:var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--invalid{background-color:var(--utrecht-feedback-invalid-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));color:var(--utrecht-feedback-invalid-fill-color, var(--utrecht-feedback-danger-fill-color, white))}.utrecht-badge-status--error{background-color:var(--utrecht-feedback-error-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));color:var(--utrecht-feedback-error-fill-color, var(--utrecht-feedback-danger-fill-color, white))}.utrecht-badge-status--success{background-color:var(--utrecht-feedback-success-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, #ffa600));color:var(--utrecht-feedback-success-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--active{background-color:var(--utrecht-feedback-active-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, #ffa600));color:var(--utrecht-feedback-active-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--inactive{background-color:var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));color:var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white))}";
+const stencilCss = ".utrecht-badge,.utrecht-badge-status{background-color:var(--utrecht-badge-background-color, black);border-radius:var(--utrecht-badge-border-radius, 0.5ch);color:var(--utrecht-badge-color, white);display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-size:var(--utrecht-badge-font-size, inherit);font-style:normal;font-weight:var(--utrecht-badge-font-weight, bold);padding-block-end:var(--utrecht-badge-padding-block, 0.5ex);padding-block-start:var(--utrecht-badge-padding-block, 0.5ex);padding-inline-end:var(--utrecht-badge-padding-inline, 0.5ch);padding-inline-start:var(--utrecht-badge-padding-inline, 0.5ch);text-decoration:none;}.utrecht-badge-status{letter-spacing:var(--utrecht-badge-status-letter-spacing, inherit);text-transform:var(--utrecht-badge-status-text-transform, inherit)}.utrecht-badge-status--danger{background-color:var(--utrecht-feedback-danger-fill-background-color, red);color:var(--utrecht-feedback-danger-fill-color, white)}.utrecht-badge-status--warning{background-color:var(--utrecht-feedback-warning-fill-background-color, #ffa600);color:var(--utrecht-feedback-warning-fill-color, white)}.utrecht-badge-status--safe{background-color:var(--utrecht-feedback-safe-fill-background-color, green);color:var(--utrecht-feedback-safe-fill-color, white)}.utrecht-badge-status--neutral{background-color:var(--utrecht-feedback-neutral-fill-background-color, black);color:var(--utrecht-feedback-neutral-fill-color, white)}.utrecht-badge-status--valid{background-color:var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, red));color:var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--invalid{background-color:var(--utrecht-feedback-invalid-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));color:var(--utrecht-feedback-invalid-fill-color, var(--utrecht-feedback-danger-fill-color, white))}.utrecht-badge-status--error{background-color:var(--utrecht-feedback-error-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));color:var(--utrecht-feedback-error-fill-color, var(--utrecht-feedback-danger-fill-color, white))}.utrecht-badge-status--success{background-color:var(--utrecht-feedback-success-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, #ffa600));color:var(--utrecht-feedback-success-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--active{background-color:var(--utrecht-feedback-active-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, #ffa600));color:var(--utrecht-feedback-active-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--inactive{background-color:var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));color:var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white))}:host{display:inline-block}:host([hidden]){display:none !important}";
 
 const BadgeStatus = class {
   constructor(hostRef) {
@@ -14,6 +14,6 @@ const BadgeStatus = class {
     return (index.h("div", { class: `utrecht-badge-status utrecht-badge-status--${this.status}` }, index.h("slot", null)));
   }
 };
-BadgeStatus.style = bemCss;
+BadgeStatus.style = stencilCss;
 
 exports.utrecht_badge_status = BadgeStatus;