@limetech/lime-elements 38.7.1 → 38.7.2

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [38.7.2](https://github.com/Lundalogik/lime-elements/compare/v38.7.1...v38.7.2) (2025-04-16)
+
+
+### Bug Fixes
+
+
+* **text-editor:** improve accessibility, using more aria roles ([6eb35c2](https://github.com/Lundalogik/lime-elements/commit/6eb35c2666961707963a85efbd7d916e9cb7c477))
+
 ## [38.7.1](https://github.com/Lundalogik/lime-elements/compare/v38.7.0...v38.7.1) (2025-04-01)
 
 

package/dist/cjs/{checkbox.template-f86d05d4.js → checkbox.template-60f3ffb2.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-d1052409.js');
+const index = require('./index-174a078a.js');
 
 const CheckboxTemplate = (props) => {
   const inputProps = {};
@@ -54,4 +54,4 @@ const HelperText = (props) => {
 
 exports.CheckboxTemplate = CheckboxTemplate;
 
-//# sourceMappingURL=checkbox.template-f86d05d4.js.map
+//# sourceMappingURL=checkbox.template-60f3ffb2.js.map

package/dist/cjs/{checkbox.template-f86d05d4.js.map → checkbox.template-60f3ffb2.js.map}

@@ -1 +1 @@
-{"file":"checkbox.template-f86d05d4.js","mappings":";;;;MAmBa,gBAAgB,GAA+C,CACxE,KAAK;EAEL,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,QAAQ,EAAE;IAChB,IAAI,IAAI,GAAkB,OAAO,CAAC;IAClC,IAAI,KAAK,CAAC,OAAO,EAAE;MACf,IAAI,GAAG;QACH,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,0BAA0B;OACpC,CAAC;KACL;IAED,OAAO;MACHA,iCACI,KAAK,EAAE,KAAK,CAAC,OAAO,mBACL,KAAK,CAAC,YAAY,EACjC,YAAY,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAC/C,MAAM,EAAE,KAAK,CAAC,cAAc,GAC9B;MACFA,QAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;KACL,CAAC;GACL;EAED,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;GAC7C;EAED,OAAO;IACHA,iBAAK,KAAK,EAAC,iBAAiB;MACxBA,iBACI,KAAK,EAAE;UACH,cAAc,EAAE,IAAI;UACpB,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C;QAEDA,iCACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,mBACT,KAAK,CAAC,YAAY,sBACf,KAAK,CAAC,YAAY,IAChC,UAAU,EAChB;QACFA,iBAAK,KAAK,EAAC,0BAA0B;UACjCA,iBAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,WAAW;YACpDA,kBACI,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,kCAAkC,GACtC,CACA;UACNA,iBAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;MACNA,mBACI,KAAK,EAAE;UACH,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN;IACNA,QAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;GACL,CAAC;AACN,EAAE;AAEF,MAAM,UAAU,GAIX,CAAC,KAAK;EACP,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,QACIA,+BACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,EACJ;AACN,CAAC;;;;","names":["h"],"sources":["./src/components/checkbox/checkbox.template.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\ninterface CheckboxTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    readonly?: boolean;\n    indeterminate?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n    helperText?: string;\n    helperTextId?: string;\n    readonlyLabels?: Array<Label<boolean>>;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n    props,\n) => {\n    const inputProps = {};\n    if (props.readonly) {\n        let icon: string | Icon = 'minus';\n        if (props.checked) {\n            icon = {\n                name: 'ok',\n                color: 'var(--mdc-theme-primary)',\n            };\n        }\n\n        return [\n            <limel-dynamic-label\n                value={props.checked}\n                aria-controls={props.helperTextId}\n                defaultLabel={{ text: props.label, icon: icon }}\n                labels={props.readonlyLabels}\n            />,\n            <HelperText\n                text={props.helperText}\n                helperTextId={props.helperTextId}\n                invalid={props.invalid}\n            />,\n        ];\n    }\n\n    if (props.indeterminate) {\n        inputProps['data-indeterminate'] = 'true';\n    }\n\n    return [\n        <div class=\"mdc-form-field \">\n            <div\n                class={{\n                    'mdc-checkbox': true,\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n            >\n                <input\n                    type=\"checkbox\"\n                    class=\"mdc-checkbox__native-control\"\n                    id={props.id}\n                    checked={props.checked}\n                    disabled={props.disabled || props.readonly}\n                    required={props.required}\n                    onChange={props.onChange}\n                    aria-controls={props.helperTextId}\n                    aria-describedby={props.helperTextId}\n                    {...inputProps}\n                />\n                <div class=\"mdc-checkbox__background\">\n                    <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                        <path\n                            class=\"mdc-checkbox__checkmark-path\"\n                            fill=\"none\"\n                            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n                        />\n                    </svg>\n                    <div class=\"mdc-checkbox__mixedmark\" />\n                </div>\n            </div>\n            <label\n                class={{\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n                htmlFor={props.id}\n            >\n                {props.label}\n            </label>\n        </div>,\n        <HelperText\n            text={props.helperText}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{\n    helperTextId: string;\n    text: string;\n    invalid?: boolean;\n}> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return (\n        <limel-helper-line\n            helperText={props.text.trim()}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />\n    );\n};\n"],"version":3}
+{"file":"checkbox.template-60f3ffb2.js","mappings":";;;;MAmBa,gBAAgB,GAA+C,CACxE,KAAK;EAEL,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,QAAQ,EAAE;IAChB,IAAI,IAAI,GAAkB,OAAO,CAAC;IAClC,IAAI,KAAK,CAAC,OAAO,EAAE;MACf,IAAI,GAAG;QACH,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,0BAA0B;OACpC,CAAC;KACL;IAED,OAAO;MACHA,iCACI,KAAK,EAAE,KAAK,CAAC,OAAO,mBACL,KAAK,CAAC,YAAY,EACjC,YAAY,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAC/C,MAAM,EAAE,KAAK,CAAC,cAAc,GAC9B;MACFA,QAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;KACL,CAAC;GACL;EAED,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;GAC7C;EAED,OAAO;IACHA,iBAAK,KAAK,EAAC,iBAAiB;MACxBA,iBACI,KAAK,EAAE;UACH,cAAc,EAAE,IAAI;UACpB,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C;QAEDA,iCACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,mBACT,KAAK,CAAC,YAAY,sBACf,KAAK,CAAC,YAAY,IAChC,UAAU,EAChB;QACFA,iBAAK,KAAK,EAAC,0BAA0B;UACjCA,iBAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,WAAW;YACpDA,kBACI,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,kCAAkC,GACtC,CACA;UACNA,iBAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;MACNA,mBACI,KAAK,EAAE;UACH,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN;IACNA,QAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;GACL,CAAC;AACN,EAAE;AAEF,MAAM,UAAU,GAIX,CAAC,KAAK;EACP,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,QACIA,+BACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,EACJ;AACN,CAAC;;;;","names":["h"],"sources":["./src/components/checkbox/checkbox.template.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\ninterface CheckboxTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    readonly?: boolean;\n    indeterminate?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n    helperText?: string;\n    helperTextId?: string;\n    readonlyLabels?: Array<Label<boolean>>;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n    props,\n) => {\n    const inputProps = {};\n    if (props.readonly) {\n        let icon: string | Icon = 'minus';\n        if (props.checked) {\n            icon = {\n                name: 'ok',\n                color: 'var(--mdc-theme-primary)',\n            };\n        }\n\n        return [\n            <limel-dynamic-label\n                value={props.checked}\n                aria-controls={props.helperTextId}\n                defaultLabel={{ text: props.label, icon: icon }}\n                labels={props.readonlyLabels}\n            />,\n            <HelperText\n                text={props.helperText}\n                helperTextId={props.helperTextId}\n                invalid={props.invalid}\n            />,\n        ];\n    }\n\n    if (props.indeterminate) {\n        inputProps['data-indeterminate'] = 'true';\n    }\n\n    return [\n        <div class=\"mdc-form-field \">\n            <div\n                class={{\n                    'mdc-checkbox': true,\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n            >\n                <input\n                    type=\"checkbox\"\n                    class=\"mdc-checkbox__native-control\"\n                    id={props.id}\n                    checked={props.checked}\n                    disabled={props.disabled || props.readonly}\n                    required={props.required}\n                    onChange={props.onChange}\n                    aria-controls={props.helperTextId}\n                    aria-describedby={props.helperTextId}\n                    {...inputProps}\n                />\n                <div class=\"mdc-checkbox__background\">\n                    <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                        <path\n                            class=\"mdc-checkbox__checkmark-path\"\n                            fill=\"none\"\n                            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n                        />\n                    </svg>\n                    <div class=\"mdc-checkbox__mixedmark\" />\n                </div>\n            </div>\n            <label\n                class={{\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n                htmlFor={props.id}\n            >\n                {props.label}\n            </label>\n        </div>,\n        <HelperText\n            text={props.helperText}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{\n    helperTextId: string;\n    text: string;\n    invalid?: boolean;\n}> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return (\n        <limel-helper-line\n            helperText={props.text.trim()}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />\n    );\n};\n"],"version":3}

package/dist/cjs/{index-d1052409.js → index-174a078a.js}

@@ -31,7 +31,11 @@ const NAMESPACE = 'lime-elements';
  * Modified for Stencil's renderer and slot projection
  */
 let scopeId;
+let contentRef;
 let hostTagName;
+let useNativeShadowDom = false;
+let checkSlotFallbackVisibility = false;
+let checkSlotRelocate = false;
 let isSvgMode = false;
 let queuePending = false;
 const createTime = (fnName, tagName = '') => {
@@ -101,6 +105,7 @@ function queryNonceMetaTagContent(doc) {
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
     let key = null;
+    let slotName = null;
     let simple = false;
     let lastSimple = false;
     const vNodeChildren = [];
@@ -132,6 +137,9 @@ const h = (nodeName, vnodeData, ...children) => {
         if (vnodeData.key) {
             key = vnodeData.key;
         }
+        if (vnodeData.name) {
+            slotName = vnodeData.name;
+        }
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -156,6 +164,9 @@ const h = (nodeName, vnodeData, ...children) => {
     {
         vnode.$key$ = key;
     }
+    {
+        vnode.$name$ = slotName;
+    }
     return vnode;
 };
 /**
@@ -180,6 +191,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$key$ = null;
     }
+    {
+        vnode.$name$ = null;
+    }
     return vnode;
 };
 const Host = {};
@@ -582,16 +596,39 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     let i = 0;
     let elm;
     let childNode;
+    let oldVNode;
+    if (!useNativeShadowDom) {
+        // remember for later we need to check to relocate nodes
+        checkSlotRelocate = true;
+        if (newVNode.$tag$ === 'slot') {
+            if (scopeId) {
+                // scoped css needs to add its scoped id to the parent element
+                parentElm.classList.add(scopeId + '-s');
+            }
+            newVNode.$flags$ |= newVNode.$children$
+                ? // slot element has fallback content
+                    2 /* VNODE_FLAGS.isSlotFallback */
+                : // slot element does not have fallback content
+                    1 /* VNODE_FLAGS.isSlotReference */;
+        }
+    }
     if (newVNode.$text$ !== null) {
         // create text node
         elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
     }
+    else if (newVNode.$flags$ & 1 /* VNODE_FLAGS.isSlotReference */) {
+        // create a slot reference node
+        elm = newVNode.$elm$ =
+            doc.createTextNode('');
+    }
     else {
         if (!isSvgMode) {
             isSvgMode = newVNode.$tag$ === 'svg';
         }
         // create element
-        elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$tag$)
+        elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */
+                ? 'slot-fb'
+                : newVNode.$tag$)
             );
         if (isSvgMode && newVNode.$tag$ === 'foreignObject') {
             isSvgMode = false;
@@ -608,7 +645,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
         if (newVNode.$children$) {
             for (i = 0; i < newVNode.$children$.length; ++i) {
                 // create the node
-                childNode = createElm(oldParentVNode, newVNode, i);
+                childNode = createElm(oldParentVNode, newVNode, i, elm);
                 // return node could have been null
                 if (childNode) {
                     // append our new node
@@ -627,8 +664,50 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             }
         }
     }
+    {
+        elm['s-hn'] = hostTagName;
+        if (newVNode.$flags$ & (2 /* VNODE_FLAGS.isSlotFallback */ | 1 /* VNODE_FLAGS.isSlotReference */)) {
+            // remember the content reference comment
+            elm['s-sr'] = true;
+            // remember the content reference comment
+            elm['s-cr'] = contentRef;
+            // remember the slot name, or empty string for default slot
+            elm['s-sn'] = newVNode.$name$ || '';
+            // check if we've got an old vnode for this slot
+            oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
+            if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
+                // we've got an old slot vnode and the wrapper is being replaced
+                // so let's move the old slot content back to it's original location
+                putBackInOriginalLocation(oldParentVNode.$elm$, false);
+            }
+        }
+    }
     return elm;
 };
+const putBackInOriginalLocation = (parentElm, recursive) => {
+    plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
+    const oldSlotChildNodes = parentElm.childNodes;
+    for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
+        const childNode = oldSlotChildNodes[i];
+        if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
+            // // this child node in the old element is from another component
+            // // remove this node from the old slot's parent
+            // childNode.remove();
+            // and relocate it back to it's original location
+            parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
+            // remove the old original location comment entirely
+            // later on the patch function will know what to do
+            // and move this to the correct spot in need be
+            childNode['s-ol'].remove();
+            childNode['s-ol'] = undefined;
+            checkSlotRelocate = true;
+        }
+        if (recursive) {
+            putBackInOriginalLocation(childNode, recursive);
+        }
+    }
+    plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
+};
 /**
  * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
  * add them to the DOM in the appropriate place.
@@ -645,17 +724,17 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
  * creating DOM nodes (inclusive)
  */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
-    let containerElm = (parentElm);
+    let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
     let childNode;
     if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
         containerElm = containerElm.shadowRoot;
     }
     for (; startIdx <= endIdx; ++startIdx) {
         if (vnodes[startIdx]) {
-            childNode = createElm(null, parentVNode, startIdx);
+            childNode = createElm(null, parentVNode, startIdx, parentElm);
             if (childNode) {
                 vnodes[startIdx].$elm$ = childNode;
-                containerElm.insertBefore(childNode, before);
+                containerElm.insertBefore(childNode, referenceNode(before) );
             }
         }
     }
@@ -678,6 +757,20 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
             const elm = vnode.$elm$;
             nullifyVNodeRefs(vnode);
             if (elm) {
+                {
+                    // we're removing this element
+                    // so it's possible we need to show slot fallback content now
+                    checkSlotFallbackVisibility = true;
+                    if (elm['s-ol']) {
+                        // remove the original location comment
+                        elm['s-ol'].remove();
+                    }
+                    else {
+                        // it's possible that child nodes of the node
+                        // that's being removed are slot nodes
+                        putBackInOriginalLocation(elm, true);
+                    }
+                }
                 // remove the vnode's element from the dom
                 elm.remove();
             }
@@ -797,6 +890,23 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newEndVnode = newCh[--newEndIdx];
         }
         else if (isSameVnode(oldStartVnode, newEndVnode)) {
+            // case: "Vnode moved right"
+            //
+            // We've found that the last node in our window on the new children is
+            // the same VNode as the _first_ node in our window on the old children
+            // we're dealing with now. Visually, this is the layout of these two
+            // nodes:
+            //
+            // newCh: [..., newStartVnode , ... , newEndVnode , ...]
+            //                                    ^^^^^^^^^^^
+            // oldCh: [..., oldStartVnode , ... , oldEndVnode , ...]
+            //              ^^^^^^^^^^^^^
+            //
+            // In this situation we need to patch `newEndVnode` onto `oldStartVnode`
+            // and move the DOM element for `oldStartVnode`.
+            if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
+                putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
+            }
             patch(oldStartVnode, newEndVnode);
             // We need to move the element for `oldStartVnode` into a position which
             // will be appropriate for `newEndVnode`. For this we can use
@@ -820,6 +930,24 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newEndVnode = newCh[--newEndIdx];
         }
         else if (isSameVnode(oldEndVnode, newStartVnode)) {
+            // case: "Vnode moved left"
+            //
+            // We've found that the first node in our window on the new children is
+            // the same VNode as the _last_ node in our window on the old children.
+            // Visually, this is the layout of these two nodes:
+            //
+            // newCh: [..., newStartVnode , ... , newEndVnode , ...]
+            //              ^^^^^^^^^^^^^
+            // oldCh: [..., oldStartVnode , ... , oldEndVnode , ...]
+            //                                    ^^^^^^^^^^^
+            //
+            // In this situation we need to patch `newStartVnode` onto `oldEndVnode`
+            // (which will handle updating any changed attributes, reconciling their
+            // children etc) but we also need to move the DOM node to which
+            // `oldEndVnode` corresponds.
+            if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
+                putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
+            }
             patch(oldEndVnode, newStartVnode);
             // We've already checked above if `oldStartVnode` and `newStartVnode` are
             // the same node, so since we're here we know that they are not. Thus we
@@ -854,7 +982,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
                 elmToMove = oldCh[idxInOld];
                 if (elmToMove.$tag$ !== newStartVnode.$tag$) {
                     // the tag doesn't match so we'll need a new DOM element
-                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
                 }
                 else {
                     patch(elmToMove, newStartVnode);
@@ -870,13 +998,13 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
                 // the key of the first new child OR the build is not using `key`
                 // attributes at all. In either case we need to create a new element
                 // for the new node.
-                node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
+                node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
                 newStartVnode = newCh[++newStartIdx];
             }
             if (node) {
                 // if we created a new node then handle inserting it to the DOM
                 {
-                    oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
+                    parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
                 }
             }
         }
@@ -914,6 +1042,9 @@ const isSameVnode = (leftVNode, rightVNode) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (leftVNode.$tag$ === rightVNode.$tag$) {
+        if (leftVNode.$tag$ === 'slot') {
+            return leftVNode.$name$ === rightVNode.$name$;
+        }
         // this will be set if components in the build have `key` attrs set on them
         {
             return leftVNode.$key$ === rightVNode.$key$;
@@ -921,6 +1052,14 @@ const isSameVnode = (leftVNode, rightVNode) => {
     }
     return false;
 };
+const referenceNode = (node) => {
+    // this node was relocated to a new location in the dom
+    // because of some other component's slot
+    // but we still have an html comment in place of where
+    // it's original location was according to it's original vdom
+    return (node && node['s-ol']) || node;
+};
+const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
 /**
  * Handle reconciling an outdated VNode with a new one which corresponds to
  * it. This function handles flushing updates to the DOM and reconciling the
@@ -935,6 +1074,7 @@ const patch = (oldVNode, newVNode) => {
     const newChildren = newVNode.$children$;
     const tag = newVNode.$tag$;
     const text = newVNode.$text$;
+    let defaultHolder;
     if (text === null) {
         {
             // test if we're rendering an svg element, or still rendering nodes inside of one
@@ -973,12 +1113,147 @@ const patch = (oldVNode, newVNode) => {
             isSvgMode = false;
         }
     }
+    else if ((defaultHolder = elm['s-cr'])) {
+        // this element has slotted content
+        defaultHolder.parentNode.textContent = text;
+    }
     else if (oldVNode.$text$ !== text) {
         // update the text content for the text only vnode
         // and also only if the text is different than before
         elm.data = text;
     }
 };
+const updateFallbackSlotVisibility = (elm) => {
+    // tslint:disable-next-line: prefer-const
+    const childNodes = elm.childNodes;
+    let childNode;
+    let i;
+    let ilen;
+    let j;
+    let slotNameAttr;
+    let nodeType;
+    for (i = 0, ilen = childNodes.length; i < ilen; i++) {
+        childNode = childNodes[i];
+        if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+            if (childNode['s-sr']) {
+                // this is a slot fallback node
+                // get the slot name for this slot reference node
+                slotNameAttr = childNode['s-sn'];
+                // by default always show a fallback slot node
+                // then hide it if there are other slots in the light dom
+                childNode.hidden = false;
+                for (j = 0; j < ilen; j++) {
+                    nodeType = childNodes[j].nodeType;
+                    if (childNodes[j]['s-hn'] !== childNode['s-hn'] || slotNameAttr !== '') {
+                        // this sibling node is from a different component OR is a named fallback slot node
+                        if (nodeType === 1 /* NODE_TYPE.ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
+                            childNode.hidden = true;
+                            break;
+                        }
+                    }
+                    else {
+                        // this is a default fallback slot node
+                        // any element or text node (with content)
+                        // should hide the default fallback slot node
+                        if (nodeType === 1 /* NODE_TYPE.ElementNode */ ||
+                            (nodeType === 3 /* NODE_TYPE.TextNode */ && childNodes[j].textContent.trim() !== '')) {
+                            childNode.hidden = true;
+                            break;
+                        }
+                    }
+                }
+            }
+            // keep drilling down
+            updateFallbackSlotVisibility(childNode);
+        }
+    }
+};
+const relocateNodes = [];
+const relocateSlotContent = (elm) => {
+    // tslint:disable-next-line: prefer-const
+    let childNode;
+    let node;
+    let hostContentNodes;
+    let slotNameAttr;
+    let relocateNodeData;
+    let j;
+    let i = 0;
+    const childNodes = elm.childNodes;
+    const ilen = childNodes.length;
+    for (; i < ilen; i++) {
+        childNode = childNodes[i];
+        if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
+            // first got the content reference comment node
+            // then we got it's parent, which is where all the host content is in now
+            hostContentNodes = node.parentNode.childNodes;
+            slotNameAttr = childNode['s-sn'];
+            for (j = hostContentNodes.length - 1; j >= 0; j--) {
+                node = hostContentNodes[j];
+                if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
+                    // let's do some relocating to its new home
+                    // but never relocate a content reference node
+                    // 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);
+                        // made some changes to slots
+                        // let's make sure we also double check
+                        // fallbacks are correctly hidden or shown
+                        checkSlotFallbackVisibility = true;
+                        node['s-sn'] = node['s-sn'] || slotNameAttr;
+                        if (relocateNodeData) {
+                            // previously we never found a slot home for this node
+                            // but turns out we did, so let's remember it now
+                            relocateNodeData.$slotRefNode$ = childNode;
+                        }
+                        else {
+                            // add to our list of nodes to relocate
+                            relocateNodes.push({
+                                $slotRefNode$: childNode,
+                                $nodeToRelocate$: node,
+                            });
+                        }
+                        if (node['s-sr']) {
+                            relocateNodes.map((relocateNode) => {
+                                if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
+                                    relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
+                                    if (relocateNodeData && !relocateNode.$slotRefNode$) {
+                                        relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
+                                    }
+                                }
+                            });
+                        }
+                    }
+                    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({
+                            $nodeToRelocate$: node,
+                        });
+                    }
+                }
+            }
+        }
+        if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+            relocateSlotContent(childNode);
+        }
+    }
+};
+const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
+    if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+        if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
+            return true;
+        }
+        if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
+            return true;
+        }
+        return false;
+    }
+    if (nodeToRelocate['s-sn'] === slotNameAttr) {
+        return true;
+    }
+    return slotNameAttr === '';
+};
 /**
  * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by
  * calling them with `null`. This signals that the DOM element corresponding to
@@ -1021,8 +1296,90 @@ const renderVdom = (hostRef, renderFnResults) => {
     {
         scopeId = hostElm['s-sc'];
     }
+    {
+        contentRef = hostElm['s-cr'];
+        useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
+        // always reset
+        checkSlotFallbackVisibility = false;
+    }
     // synchronous patch
     patch(oldVNode, rootVnode);
+    {
+        // while we're moving nodes around existing nodes, temporarily disable
+        // the disconnectCallback from working
+        plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
+        if (checkSlotRelocate) {
+            relocateSlotContent(rootVnode.$elm$);
+            let relocateData;
+            let nodeToRelocate;
+            let orgLocationNode;
+            let parentNodeRef;
+            let insertBeforeNode;
+            let refNode;
+            let i = 0;
+            for (; i < relocateNodes.length; i++) {
+                relocateData = relocateNodes[i];
+                nodeToRelocate = relocateData.$nodeToRelocate$;
+                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['s-nr'] = nodeToRelocate;
+                    nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
+                }
+            }
+            for (i = 0; i < relocateNodes.length; i++) {
+                relocateData = relocateNodes[i];
+                nodeToRelocate = relocateData.$nodeToRelocate$;
+                if (relocateData.$slotRefNode$) {
+                    // by default we're just going to insert it directly
+                    // after the slot reference node
+                    parentNodeRef = relocateData.$slotRefNode$.parentNode;
+                    insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
+                    orgLocationNode = nodeToRelocate['s-ol'];
+                    while ((orgLocationNode = orgLocationNode.previousSibling)) {
+                        refNode = orgLocationNode['s-nr'];
+                        if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
+                            refNode = refNode.nextSibling;
+                            if (!refNode || !refNode['s-nr']) {
+                                insertBeforeNode = refNode;
+                                break;
+                            }
+                        }
+                    }
+                    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
+                        if (nodeToRelocate !== insertBeforeNode) {
+                            if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
+                                // probably a component in the index.html that doesn't have it's hostname set
+                                nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
+                            }
+                            // add it back to the dom but in its new home
+                            parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
+                        }
+                    }
+                }
+                else {
+                    // this node doesn't have a slot home to go to, so let's hide it
+                    if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+                        nodeToRelocate.hidden = true;
+                    }
+                }
+            }
+        }
+        if (checkSlotFallbackVisibility) {
+            updateFallbackSlotVisibility(rootVnode.$elm$);
+        }
+        // done moving nodes around
+        // allow the disconnect callback to work again
+        plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
+        // always reset
+        relocateNodes.length = 0;
+    }
 };
 const attachToAncestor = (hostRef, ancestorComponent) => {
     if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
@@ -1523,6 +1880,16 @@ const connectedCallback = (elm) => {
         if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
             // first time this component has connected
             hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
+            {
+                // initUpdate
+                // if the slot polyfill is required we'll need to put some nodes
+                // in here to act as original content anchors as we move nodes around
+                // host element has been connected to the DOM
+                if ((// TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
+                        cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) {
+                    setContentReference(elm);
+                }
+            }
             {
                 // find the first ancestor component (if there is one) and register
                 // this component as one of the actively loading child components for its ancestor
@@ -1564,6 +1931,17 @@ const connectedCallback = (elm) => {
         endConnected();
     }
 };
+const setContentReference = (elm) => {
+    // only required when we're NOT using native shadow dom (slot)
+    // or this browser doesn't support native shadow dom
+    // and this host element was NOT created with SSR
+    // let's pick out the inner content for slot projection
+    // create a node to represent where the original
+    // content was first placed, which is useful later on
+    const contentRefElm = (elm['s-cr'] = doc.createComment(''));
+    contentRefElm['s-cn'] = true;
+    elm.insertBefore(contentRefElm, elm.firstChild);
+};
 const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -1847,4 +2225,4 @@ exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
 
-//# sourceMappingURL=index-d1052409.js.map
+//# sourceMappingURL=index-174a078a.js.map