@maggioli-design-system/mds-tab 2.0.2 → 3.0.0

package/dist/cjs/{index-928add6f.js → index-1e286edd.js}

@@ -32,7 +32,6 @@ const NAMESPACE = 'mds-tab';
  */
 let scopeId;
 let hostTagName;
-let isSvgMode = false;
 let queuePending = false;
 const createTime = (fnName, tagName = '') => {
     {
@@ -49,14 +48,6 @@ const uniqueTime = (key, measureText) => {
     }
 };
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
-/**
- * Default style mode id
- */
-/**
- * Reusable empty obj/array
- * Don't add values to these!!
- */
-const EMPTY_OBJ = {};
 const isDef = (v) => v != null;
 const isComplexType = (o) => {
     // https://jsperf.com/typeof-fn-object/5
@@ -117,9 +108,6 @@ const newVNode = (tag, text) => {
         $elm$: null,
         $children$: null,
     };
-    {
-        vnode.$attrs$ = null;
-    }
     return vnode;
 };
 const Host = {};
@@ -207,69 +195,6 @@ const attachStyles = (hostRef) => {
     endAttachStyles();
 };
 const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
-/**
- * Production setAccessor() function based on Preact by
- * Jason Miller (@developit)
- * Licensed under the MIT License
- * https://github.com/developit/preact/blob/master/LICENSE
- *
- * Modified for Stencil's compiler and vdom
- */
-const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
-    if (oldValue !== newValue) {
-        let isProp = isMemberInElement(elm, memberName);
-        memberName.toLowerCase();
-        {
-            // Set property if it exists and it's not a SVG
-            const isComplex = isComplexType(newValue);
-            if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
-                try {
-                    if (!elm.tagName.includes('-')) {
-                        const n = newValue == null ? '' : newValue;
-                        // Workaround for Safari, moving the <input> caret when re-assigning the same valued
-                        if (memberName === 'list') {
-                            isProp = false;
-                        }
-                        else if (oldValue == null || elm[memberName] != n) {
-                            elm[memberName] = n;
-                        }
-                    }
-                    else {
-                        elm[memberName] = newValue;
-                    }
-                }
-                catch (e) { }
-            }
-            if (newValue == null || newValue === false) {
-                if (newValue !== false || elm.getAttribute(memberName) === '') {
-                    {
-                        elm.removeAttribute(memberName);
-                    }
-                }
-            }
-            else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
-                newValue = newValue === true ? '' : newValue;
-                {
-                    elm.setAttribute(memberName, newValue);
-                }
-            }
-        }
-    }
-};
-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 /* NODE_TYPE.DocumentFragment */ && newVnode.$elm$.host
-        ? newVnode.$elm$.host
-        : newVnode.$elm$;
-    const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
-    const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
-    // add new & update changed attributes
-    for (memberName in newVnodeAttrs) {
-        setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
-    }
-};
 /**
  * Create a DOM Node corresponding to one of the children of a given VNode.
  *
@@ -289,10 +214,6 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     {
         // create element
         elm = newVNode.$elm$ = (doc.createElement(newVNode.$tag$));
-        // add css classes, attrs, props, listeners, etc.
-        {
-            updateElement(null, newVNode, isSvgMode);
-        }
         if (isDef(scopeId) && elm['s-si'] !== scopeId) {
             // if there is a scopeId and this is the initial render
             // then let's add the scopeId as a css class
@@ -339,18 +260,7 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
 const patch = (oldVNode, newVNode) => {
     const elm = (newVNode.$elm$ = oldVNode.$elm$);
     const newChildren = newVNode.$children$;
-    const tag = newVNode.$tag$;
     {
-        {
-            if (tag === 'slot')
-                ;
-            else {
-                // either this is the first render of an element OR it's an update
-                // AND we already know it's possible it could have changed
-                // this updates the element's css classes, attrs, props, listeners, etc.
-                updateElement(oldVNode, newVNode, isSvgMode);
-            }
-        }
         if (newChildren !== null) {
             // add the new vnode children
             addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
@@ -802,7 +712,6 @@ const registerHost = (elm, cmpMeta) => {
     addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
     return hostRefs.set(elm, hostRef);
 };
-const isMemberInElement = (elm, memberName) => memberName in elm;
 const consoleError = (e, el) => (0, console.error)(e, el);
 const cmpModules = /*@__PURE__*/ new Map();
 const loadModule = (cmpMeta, hostRef, hmrVersionId) => {

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-928add6f.js');
+const index = require('./index-1e286edd.js');
 
 /*
- Stencil Client Patch Esm v2.19.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();

package/dist/cjs/mds-tab.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-928add6f.js');
+const index = require('./index-1e286edd.js');
 
-const mdsTabCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--background:rgb(var(--tone-neutral-09));--button-background-hover:transparent;--button-background-selected:rgb(var(--tone-neutral));--button-background:transparent;--button-color-hover:rgb(var(--tone-neutral-02));--button-color-selected:rgb(var(--tone-neutral-02));--button-color:rgb(var(--tone-neutral-04));--button-radius:0.5rem;--button-shadow-selected:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--radius:1rem;display:-ms-flexbox;display:flex;gap:0.5rem;overflow:auto;padding:0.5rem;background-color:var(--background);border-radius:var(--radius);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none}:host::-webkit-scrollbar{display:none}@media (max-width: 767px){.mobile\\:flex-1{-ms-flex:1 1 0%;flex:1 1 0%}}";
+const mdsTabCss = ".visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-tab-background:rgb(var(--tone-neutral-09));--mds-tab-radius:1rem;display:-ms-flexbox;display:flex;gap:0.5rem;overflow:auto;padding:0.5rem;background-color:var(--mds-tab-background);border-radius:var(--mds-tab-radius);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none}:host::-webkit-scrollbar{display:none}@media (max-width: 767px){.mobile\\:flex-1{-ms-flex:1 1 0%;flex:1 1 0%}}";
 
 const MdsTab = class {
   constructor(hostRef) {
@@ -18,12 +18,16 @@ const MdsTab = class {
   }
   componentWillLoad() {
     const items = this.queryItems();
-    items.forEach((item, key) => item.id = `item-${key}`);
+    items.forEach((item, key) => {
+      if (!item.id) {
+        item.id = `mds-tab-item-${key}`;
+      }
+    });
   }
   changeEventHandler(event) {
     const items = this.element.querySelectorAll('mds-tab-item');
     items.forEach((item, key) => {
-      if (`item-${key}` === event.detail) {
+      if (item.id === event.detail) {
         item.selected = true;
         this.currentItem = key;
         this.scrollTabs();
@@ -34,7 +38,7 @@ const MdsTab = class {
     });
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "tab-item" })));
+    return (index.h(index.Host, null, index.h("slot", null)));
   }
   get element() { return index.getElement(this); }
 };

package/dist/cjs/mds-tab.cjs.js

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-928add6f.js');
+const index = require('./index-1e286edd.js');
 
 /*
- Stencil Client Patch Browser v2.19.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-tab.cjs.js', document.baseURI).href));

package/dist/collection/collection-manifest.json

@@ -4,8 +4,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.19.3",
-    "typescriptVersion": "4.7.4"
+    "version": "2.20.0",
+    "typescriptVersion": "4.8.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/mds-tab/mds-tab.css

@@ -1,3 +1,8 @@
+.visible {
+
+  visibility: visible;
+}
+
 .fixed {
 
   position: fixed;
@@ -23,37 +28,21 @@
 }
 
 /*
-  * @prop --background: Sets the background-color of the component
-  * @prop --button-background-hover: Sets the background-color of the button when the mouse is over it
-  * @prop --button-background-selected: Sets the background-color of the button when it's selected
-  * @prop --button-background: Sets the background-color of the button
-  * @prop --button-color-hover: Sets the text color of the button when the mouse is over it
-  * @prop --button-color-selected: Sets the text color of the button when it's selected
-  * @prop --button-color: Sets the text color of the button
-  * @prop --button-radius: Sets the border-radius of the button
-  * @prop --button-shadow-selected: Sets the box-shadow of the button when it's selected
-  * @prop --radius: Sets the border-radius of the button when the mouse is over it
+  * @prop --mds-tab-background: Sets the background-color of the component
+  * @prop --mds-tab-radius: Sets the border-radius of the button when the mouse is over it
   */
 
 :host {
 
-  --background: rgb(var(--tone-neutral-09));
-  --button-background-hover: transparent;
-  --button-background-selected: rgb(var(--tone-neutral));
-  --button-background: transparent;
-  --button-color-hover: rgb(var(--tone-neutral-02));
-  --button-color-selected: rgb(var(--tone-neutral-02));
-  --button-color: rgb(var(--tone-neutral-04));
-  --button-radius: 0.5rem;
-  --button-shadow-selected: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --radius: 1rem;
+  --mds-tab-background: rgb(var(--tone-neutral-09));
+  --mds-tab-radius: 1rem;
   display: flex;
   gap: 0.5rem;
   overflow: auto;
   padding: 0.5rem;
 
-  background-color: var(--background);
-  border-radius: var(--radius);
+  background-color: var(--mds-tab-background);
+  border-radius: var(--mds-tab-radius);
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none;
   scroll-behavior: smooth;

package/dist/collection/components/mds-tab/mds-tab.js

@@ -10,12 +10,16 @@ export class MdsTab {
   }
   componentWillLoad() {
     const items = this.queryItems();
-    items.forEach((item, key) => item.id = `item-${key}`);
+    items.forEach((item, key) => {
+      if (!item.id) {
+        item.id = `mds-tab-item-${key}`;
+      }
+    });
   }
   changeEventHandler(event) {
     const items = this.element.querySelectorAll('mds-tab-item');
     items.forEach((item, key) => {
-      if (`item-${key}` === event.detail) {
+      if (item.id === event.detail) {
         item.selected = true;
         this.currentItem = key;
         this.scrollTabs();
@@ -26,7 +30,7 @@ export class MdsTab {
     });
   }
   render() {
-    return (h(Host, null, h("slot", { name: "tab-item" })));
+    return (h(Host, null, h("slot", null)));
   }
   static get is() { return "mds-tab"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-tab/test/mds-tab.stories.js

@@ -2,5 +2,5 @@ import { h } from '@stencil/core';
 export default {
   title: 'UI / Tab',
 };
-const Template = args => h("mds-tab", Object.assign({}, args), h("mds-tab-item", { selected: true, class: "mobile:flex-1" }, "First Blood"), h("mds-tab-item", { class: "mobile:flex-1" }, "Second Impact"), h("mds-tab-item", { class: "mobile:flex-1" }, "The Third Reich"));
+const Template = args => h("mds-tab", Object.assign({}, args), h("mds-notification", { strategy: "absolute", target: "button", value: 14, visible: true }), h("mds-tab-item", { selected: true, class: "mobile:flex-1" }, "First Blood"), h("mds-tab-item", { icon: "mdi/alien", id: "button", class: "mobile:flex-1" }, "Second Impact"), h("mds-tab-item", { class: "mobile:flex-1" }, "The Third Reich"));
 export const Default = Template.bind({});

package/dist/components/mds-tab.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const mdsTabCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--background:rgb(var(--tone-neutral-09));--button-background-hover:transparent;--button-background-selected:rgb(var(--tone-neutral));--button-background:transparent;--button-color-hover:rgb(var(--tone-neutral-02));--button-color-selected:rgb(var(--tone-neutral-02));--button-color:rgb(var(--tone-neutral-04));--button-radius:0.5rem;--button-shadow-selected:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--radius:1rem;display:-ms-flexbox;display:flex;gap:0.5rem;overflow:auto;padding:0.5rem;background-color:var(--background);border-radius:var(--radius);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none}:host::-webkit-scrollbar{display:none}@media (max-width: 767px){.mobile\\:flex-1{-ms-flex:1 1 0%;flex:1 1 0%}}";
+const mdsTabCss = ".visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-tab-background:rgb(var(--tone-neutral-09));--mds-tab-radius:1rem;display:-ms-flexbox;display:flex;gap:0.5rem;overflow:auto;padding:0.5rem;background-color:var(--mds-tab-background);border-radius:var(--mds-tab-radius);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none}:host::-webkit-scrollbar{display:none}@media (max-width: 767px){.mobile\\:flex-1{-ms-flex:1 1 0%;flex:1 1 0%}}";
 
 const MdsTab$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -16,12 +16,16 @@ const MdsTab$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentWillLoad() {
     const items = this.queryItems();
-    items.forEach((item, key) => item.id = `item-${key}`);
+    items.forEach((item, key) => {
+      if (!item.id) {
+        item.id = `mds-tab-item-${key}`;
+      }
+    });
   }
   changeEventHandler(event) {
     const items = this.element.querySelectorAll('mds-tab-item');
     items.forEach((item, key) => {
-      if (`item-${key}` === event.detail) {
+      if (item.id === event.detail) {
         item.selected = true;
         this.currentItem = key;
         this.scrollTabs();
@@ -32,7 +36,7 @@ const MdsTab$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
   }
   render() {
-    return (h(Host, null, h("slot", { name: "tab-item" })));
+    return (h(Host, null, h("slot", null)));
   }
   get element() { return this; }
   static get style() { return mdsTabCss; }

package/dist/esm/{index-18b5f438.js → index-5928fc07.js}

@@ -10,7 +10,6 @@ const NAMESPACE = 'mds-tab';
  */
 let scopeId;
 let hostTagName;
-let isSvgMode = false;
 let queuePending = false;
 const createTime = (fnName, tagName = '') => {
     {
@@ -27,14 +26,6 @@ const uniqueTime = (key, measureText) => {
     }
 };
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
-/**
- * Default style mode id
- */
-/**
- * Reusable empty obj/array
- * Don't add values to these!!
- */
-const EMPTY_OBJ = {};
 const isDef = (v) => v != null;
 const isComplexType = (o) => {
     // https://jsperf.com/typeof-fn-object/5
@@ -95,9 +86,6 @@ const newVNode = (tag, text) => {
         $elm$: null,
         $children$: null,
     };
-    {
-        vnode.$attrs$ = null;
-    }
     return vnode;
 };
 const Host = {};
@@ -185,69 +173,6 @@ const attachStyles = (hostRef) => {
     endAttachStyles();
 };
 const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
-/**
- * Production setAccessor() function based on Preact by
- * Jason Miller (@developit)
- * Licensed under the MIT License
- * https://github.com/developit/preact/blob/master/LICENSE
- *
- * Modified for Stencil's compiler and vdom
- */
-const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
-    if (oldValue !== newValue) {
-        let isProp = isMemberInElement(elm, memberName);
-        memberName.toLowerCase();
-        {
-            // Set property if it exists and it's not a SVG
-            const isComplex = isComplexType(newValue);
-            if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
-                try {
-                    if (!elm.tagName.includes('-')) {
-                        const n = newValue == null ? '' : newValue;
-                        // Workaround for Safari, moving the <input> caret when re-assigning the same valued
-                        if (memberName === 'list') {
-                            isProp = false;
-                        }
-                        else if (oldValue == null || elm[memberName] != n) {
-                            elm[memberName] = n;
-                        }
-                    }
-                    else {
-                        elm[memberName] = newValue;
-                    }
-                }
-                catch (e) { }
-            }
-            if (newValue == null || newValue === false) {
-                if (newValue !== false || elm.getAttribute(memberName) === '') {
-                    {
-                        elm.removeAttribute(memberName);
-                    }
-                }
-            }
-            else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
-                newValue = newValue === true ? '' : newValue;
-                {
-                    elm.setAttribute(memberName, newValue);
-                }
-            }
-        }
-    }
-};
-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 /* NODE_TYPE.DocumentFragment */ && newVnode.$elm$.host
-        ? newVnode.$elm$.host
-        : newVnode.$elm$;
-    const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
-    const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
-    // add new & update changed attributes
-    for (memberName in newVnodeAttrs) {
-        setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
-    }
-};
 /**
  * Create a DOM Node corresponding to one of the children of a given VNode.
  *
@@ -267,10 +192,6 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     {
         // create element
         elm = newVNode.$elm$ = (doc.createElement(newVNode.$tag$));
-        // add css classes, attrs, props, listeners, etc.
-        {
-            updateElement(null, newVNode, isSvgMode);
-        }
         if (isDef(scopeId) && elm['s-si'] !== scopeId) {
             // if there is a scopeId and this is the initial render
             // then let's add the scopeId as a css class
@@ -317,18 +238,7 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
 const patch = (oldVNode, newVNode) => {
     const elm = (newVNode.$elm$ = oldVNode.$elm$);
     const newChildren = newVNode.$children$;
-    const tag = newVNode.$tag$;
     {
-        {
-            if (tag === 'slot')
-                ;
-            else {
-                // either this is the first render of an element OR it's an update
-                // AND we already know it's possible it could have changed
-                // this updates the element's css classes, attrs, props, listeners, etc.
-                updateElement(oldVNode, newVNode, isSvgMode);
-            }
-        }
         if (newChildren !== null) {
             // add the new vnode children
             addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
@@ -780,7 +690,6 @@ const registerHost = (elm, cmpMeta) => {
     addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
     return hostRefs.set(elm, hostRef);
 };
-const isMemberInElement = (elm, memberName) => memberName in elm;
 const consoleError = (e, el) => (0, console.error)(e, el);
 const cmpModules = /*@__PURE__*/ new Map();
 const loadModule = (cmpMeta, hostRef, hmrVersionId) => {

package/dist/esm/loader.js

@@ -1,7 +1,7 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-18b5f438.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-5928fc07.js';
 
 /*
- Stencil Client Patch Esm v2.19.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return promiseResolve();

package/dist/esm/mds-tab.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-18b5f438.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5928fc07.js';
 
-const mdsTabCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--background:rgb(var(--tone-neutral-09));--button-background-hover:transparent;--button-background-selected:rgb(var(--tone-neutral));--button-background:transparent;--button-color-hover:rgb(var(--tone-neutral-02));--button-color-selected:rgb(var(--tone-neutral-02));--button-color:rgb(var(--tone-neutral-04));--button-radius:0.5rem;--button-shadow-selected:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--radius:1rem;display:-ms-flexbox;display:flex;gap:0.5rem;overflow:auto;padding:0.5rem;background-color:var(--background);border-radius:var(--radius);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none}:host::-webkit-scrollbar{display:none}@media (max-width: 767px){.mobile\\:flex-1{-ms-flex:1 1 0%;flex:1 1 0%}}";
+const mdsTabCss = ".visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-tab-background:rgb(var(--tone-neutral-09));--mds-tab-radius:1rem;display:-ms-flexbox;display:flex;gap:0.5rem;overflow:auto;padding:0.5rem;background-color:var(--mds-tab-background);border-radius:var(--mds-tab-radius);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none}:host::-webkit-scrollbar{display:none}@media (max-width: 767px){.mobile\\:flex-1{-ms-flex:1 1 0%;flex:1 1 0%}}";
 
 const MdsTab = class {
   constructor(hostRef) {
@@ -14,12 +14,16 @@ const MdsTab = class {
   }
   componentWillLoad() {
     const items = this.queryItems();
-    items.forEach((item, key) => item.id = `item-${key}`);
+    items.forEach((item, key) => {
+      if (!item.id) {
+        item.id = `mds-tab-item-${key}`;
+      }
+    });
   }
   changeEventHandler(event) {
     const items = this.element.querySelectorAll('mds-tab-item');
     items.forEach((item, key) => {
-      if (`item-${key}` === event.detail) {
+      if (item.id === event.detail) {
         item.selected = true;
         this.currentItem = key;
         this.scrollTabs();
@@ -30,7 +34,7 @@ const MdsTab = class {
     });
   }
   render() {
-    return (h(Host, null, h("slot", { name: "tab-item" })));
+    return (h(Host, null, h("slot", null)));
   }
   get element() { return getElement(this); }
 };

package/dist/esm/mds-tab.js

@@ -1,7 +1,7 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-18b5f438.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-5928fc07.js';
 
 /*
- Stencil Client Patch Browser v2.19.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;

package/dist/esm-es5/index-5928fc07.js

@@ -0,0 +1,2 @@
+var __extends=this&&this.__extends||function(){var e=function(t,n){e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)if(Object.prototype.hasOwnProperty.call(t,n))e[n]=t[n]};return e(t,n)};return function(t,n){if(typeof n!=="function"&&n!==null)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");e(t,n);function r(){this.constructor=t}t.prototype=n===null?Object.create(n):(r.prototype=n.prototype,new r)}}();var __awaiter=this&&this.__awaiter||function(e,t,n,r){function a(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function s(e){try{l(r.next(e))}catch(e){o(e)}}function i(e){try{l(r["throw"](e))}catch(e){o(e)}}function l(e){e.done?n(e.value):a(e.value).then(s,i)}l((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,a,o,s;return s={next:i(0),throw:i(1),return:i(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function i(e){return function(t){return l([e,t])}}function l(s){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,a&&(o=s[0]&2?a["return"]:s[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,s[1])).done)return o;if(a=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;a=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(e){s=[6,e];a=0}finally{r=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,t,n){if(n||arguments.length===2)for(var r=0,a=t.length,o;r<a;r++){if(o||!(r in t)){if(!o)o=Array.prototype.slice.call(t,0,r);o[r]=t[r]}}return e.concat(o||Array.prototype.slice.call(t))};var NAMESPACE="mds-tab";var scopeId;var hostTagName;var queuePending=false;var createTime=function(e,t){if(t===void 0){t=""}{return function(){return}}};var uniqueTime=function(e,t){{return function(){return}}};var HYDRATED_CSS="{visibility:hidden}.hydrated{visibility:inherit}";var isDef=function(e){return e!=null};var isComplexType=function(e){e=typeof e;return e==="object"||e==="function"};var h=function(e,t){var n=[];for(var r=2;r<arguments.length;r++){n[r-2]=arguments[r]}var a=null;var o=false;var s=false;var i=[];var l=function(t){for(var n=0;n<t.length;n++){a=t[n];if(Array.isArray(a)){l(a)}else if(a!=null&&typeof a!=="boolean"){if(o=typeof e!=="function"&&!isComplexType(a)){a=String(a)}if(o&&s){i[i.length-1].$text$+=a}else{i.push(o?newVNode(null,a):a)}s=o}}};l(n);var u=newVNode(e,null);u.$attrs$=t;if(i.length>0){u.$children$=i}return u};var newVNode=function(e,t){var n={$flags$:0,$tag$:e,$text$:t,$elm$:null,$children$:null};return n};var Host={};var isHost=function(e){return e&&e.$tag$===Host};var getElement=function(e){return getHostRef(e).$hostElement$};var emitEvent=function(e,t,n){var r=plt.ce(t,n);e.dispatchEvent(r);return r};var rootAppliedStyles=new WeakMap;var registerStyle=function(e,t,n){var r=styles.get(e);if(supportsConstructableStylesheets&&n){r=r||new CSSStyleSheet;if(typeof r==="string"){r=t}else{r.replaceSync(t)}}else{r=t}styles.set(e,r)};var addStyle=function(e,t,n,r){var a=getScopeId(t);var o=styles.get(a);e=e.nodeType===11?e:doc;if(o){if(typeof o==="string"){e=e.head||e;var s=rootAppliedStyles.get(e);var i=void 0;if(!s){rootAppliedStyles.set(e,s=new Set)}if(!s.has(a)){{{i=doc.createElement("style");i.innerHTML=o}e.insertBefore(i,e.querySelector("link"))}if(s){s.add(a)}}}else if(!e.adoptedStyleSheets.includes(o)){e.adoptedStyleSheets=__spreadArray(__spreadArray([],e.adoptedStyleSheets,true),[o],false)}}return a};var attachStyles=function(e){var t=e.$cmpMeta$;var n=e.$hostElement$;var r=t.$flags$;var a=createTime("attachStyles",t.$tagName$);var o=addStyle(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);if(r&10){n["s-sc"]=o;n.classList.add(o+"-h")}a()};var getScopeId=function(e,t){return"sc-"+e.$tagName$};var createElm=function(e,t,n,r){var a=t.$children$[n];var o=0;var s;var i;{s=a.$elm$=doc.createElement(a.$tag$);if(isDef(scopeId)&&s["s-si"]!==scopeId){s.classList.add(s["s-si"]=scopeId)}if(a.$children$){for(o=0;o<a.$children$.length;++o){i=createElm(e,a,o);if(i){s.appendChild(i)}}}}return s};var addVnodes=function(e,t,n,r,a,o){var s=e;var i;if(s.shadowRoot&&s.tagName===hostTagName){s=s.shadowRoot}for(;a<=o;++a){if(r[a]){i=createElm(null,n,a);if(i){r[a].$elm$=i;s.insertBefore(i,t)}}}};var patch=function(e,t){var n=t.$elm$=e.$elm$;var r=t.$children$;{if(r!==null){addVnodes(n,null,t,r,0,r.length-1)}else;}};var renderVdom=function(e,t){var n=e.$hostElement$;var r=e.$vnode$||newVNode(null,null);var a=isHost(t)?t:h(null,null,t);hostTagName=n.tagName;a.$tag$=null;a.$flags$|=4;e.$vnode$=a;a.$elm$=r.$elm$=n.shadowRoot||n;{scopeId=n["s-sc"]}patch(r,a)};var attachToAncestor=function(e,t){if(t&&!e.$onRenderResolve$&&t["s-p"]){t["s-p"].push(new Promise((function(t){return e.$onRenderResolve$=t})))}};var scheduleUpdate=function(e,t){if(e.$flags$&4){e.$flags$|=512;return}attachToAncestor(e,e.$ancestorComponent$);var n=function(){return dispatchHooks(e,t)};return writeTask(n)};var dispatchHooks=function(e,t){var n=createTime("scheduleUpdate",e.$cmpMeta$.$tagName$);var r=e.$lazyInstance$;var a;if(t){{e.$flags$|=256;if(e.$queuedListeners$){e.$queuedListeners$.map((function(e){var t=e[0],n=e[1];return safeCall(r,t,n)}));e.$queuedListeners$=null}}{a=safeCall(r,"componentWillLoad")}}n();return then(a,(function(){return updateComponent(e,r,t)}))};var updateComponent=function(e,t,n){return __awaiter(void 0,void 0,void 0,(function(){var r,a,o,s,i,l;return __generator(this,(function(u){r=e.$hostElement$;a=createTime("update",e.$cmpMeta$.$tagName$);o=r["s-rc"];if(n){attachStyles(e)}s=createTime("render",e.$cmpMeta$.$tagName$);{callRender(e,t)}if(o){o.map((function(e){return e()}));r["s-rc"]=undefined}s();a();{i=r["s-p"];l=function(){return postUpdateComponent(e)};if(i.length===0){l()}else{Promise.all(i).then(l);e.$flags$|=4;i.length=0}}return[2]}))}))};var callRender=function(e,t,n){try{t=t.render();{e.$flags$|=2}{{{renderVdom(e,t)}}}}catch(t){consoleError(t,e.$hostElement$)}return null};var postUpdateComponent=function(e){var t=e.$cmpMeta$.$tagName$;var n=e.$hostElement$;var r=createTime("postUpdate",t);var a=e.$ancestorComponent$;if(!(e.$flags$&64)){e.$flags$|=64;{addHydratedFlag(n)}r();{e.$onReadyResolve$(n);if(!a){appDidLoad()}}}else{r()}{if(e.$onRenderResolve$){e.$onRenderResolve$();e.$onRenderResolve$=undefined}if(e.$flags$&512){nextTick((function(){return scheduleUpdate(e,false)}))}e.$flags$&=~(4|512)}};var appDidLoad=function(e){{addHydratedFlag(doc.documentElement)}nextTick((function(){return emitEvent(win,"appload",{detail:{namespace:NAMESPACE}})}))};var safeCall=function(e,t,n){if(e&&e[t]){try{return e[t](n)}catch(e){consoleError(e)}}return undefined};var then=function(e,t){return e&&e.then?e.then(t):t()};var addHydratedFlag=function(e){return e.classList.add("hydrated")};var proxyComponent=function(e,t,n){if(t.$members$){var r=Object.entries(t.$members$);r.map((function(e){var t=e[0],n=e[1][0]}))}return e};var initializeComponent=function(e,t,n,r,a){return __awaiter(void 0,void 0,void 0,(function(){var e,r,o,s,i,l,u;return __generator(this,(function(c){switch(c.label){case 0:if(!((t.$flags$&32)===0))return[3,3];t.$flags$|=32;a=loadModule(n);if(!a.then)return[3,2];e=uniqueTime();return[4,a];case 1:a=c.sent();e();c.label=2;case 2:if(!a.isProxied){proxyComponent(a,n);a.isProxied=true}r=createTime("createInstance",n.$tagName$);{t.$flags$|=8}try{new a(t)}catch(e){consoleError(e)}{t.$flags$&=~8}r();if(a.style){o=a.style;s=getScopeId(n);if(!styles.has(s)){i=createTime("registerStyles",n.$tagName$);registerStyle(s,o,!!(n.$flags$&1));i()}}c.label=3;case 3:l=t.$ancestorComponent$;u=function(){return scheduleUpdate(t,true)};if(l&&l["s-rc"]){l["s-rc"].push(u)}else{u()}return[2]}}))}))};var connectedCallback=function(e){if((plt.$flags$&1)===0){var t=getHostRef(e);var n=t.$cmpMeta$;var r=createTime("connectedCallback",n.$tagName$);if(!(t.$flags$&1)){t.$flags$|=1;{var a=e;while(a=a.parentNode||a.host){if(a["s-p"]){attachToAncestor(t,t.$ancestorComponent$=a);break}}}{initializeComponent(e,t,n)}}else{addHostEventListeners(e,t,n.$listeners$)}r()}};var disconnectedCallback=function(e){if((plt.$flags$&1)===0){var t=getHostRef(e);{if(t.$rmListeners$){t.$rmListeners$.map((function(e){return e()}));t.$rmListeners$=undefined}}}};var bootstrapLazy=function(e,t){if(t===void 0){t={}}var n=createTime();var r=[];var a=t.exclude||[];var o=win.customElements;var s=doc.head;var i=s.querySelector("meta[charset]");var l=doc.createElement("style");var u=[];var c;var f=true;Object.assign(plt,t);plt.$resourcesUrl$=new URL(t.resourcesUrl||"./",doc.baseURI).href;e.map((function(e){e[1].map((function(t){var n={$flags$:t[0],$tagName$:t[1],$members$:t[2],$listeners$:t[3]};{n.$members$=t[2]}{n.$listeners$=t[3]}var s=n.$tagName$;var i=function(e){__extends(t,e);function t(t){var r=e.call(this,t)||this;t=r;registerHost(t,n);if(n.$flags$&1){{{t.attachShadow({mode:"open"})}}}return r}t.prototype.connectedCallback=function(){var e=this;if(c){clearTimeout(c);c=null}if(f){u.push(this)}else{plt.jmp((function(){return connectedCallback(e)}))}};t.prototype.disconnectedCallback=function(){var e=this;plt.jmp((function(){return disconnectedCallback(e)}))};t.prototype.componentOnReady=function(){return getHostRef(this).$onReadyPromise$};return t}(HTMLElement);n.$lazyBundleId$=e[0];if(!a.includes(s)&&!o.get(s)){r.push(s);o.define(s,proxyComponent(i,n))}}))}));{l.innerHTML=r+HYDRATED_CSS;l.setAttribute("data-styles","");s.insertBefore(l,i?i.nextSibling:s.firstChild)}f=false;if(u.length){u.map((function(e){return e.connectedCallback()}))}else{{plt.jmp((function(){return c=setTimeout(appDidLoad,30)}))}}n()};var addHostEventListeners=function(e,t,n,r){if(n){n.map((function(n){var r=n[0],a=n[1],o=n[2];var s=e;var i=hostListenerProxy(t,o);var l=hostListenerOpts(r);plt.ael(s,a,i,l);(t.$rmListeners$=t.$rmListeners$||[]).push((function(){return plt.rel(s,a,i,l)}))}))}};var hostListenerProxy=function(e,t){return function(n){try{{if(e.$flags$&256){e.$lazyInstance$[t](n)}else{(e.$queuedListeners$=e.$queuedListeners$||[]).push([t,n])}}}catch(e){consoleError(e)}}};var hostListenerOpts=function(e){return(e&2)!==0};var hostRefs=new WeakMap;var getHostRef=function(e){return hostRefs.get(e)};var registerInstance=function(e,t){return hostRefs.set(t.$lazyInstance$=e,t)};var registerHost=function(e,t){var n={$flags$:0,$hostElement$:e,$cmpMeta$:t,$instanceValues$:new Map};{n.$onReadyPromise$=new Promise((function(e){return n.$onReadyResolve$=e}));e["s-p"]=[];e["s-rc"]=[]}addHostEventListeners(e,n,t.$listeners$);return hostRefs.set(e,n)};var consoleError=function(e,t){return(0,console.error)(e,t)};var cmpModules=new Map;var loadModule=function(e,t,n){var r=e.$tagName$.replace(/-/g,"_");var a=e.$lazyBundleId$;var o=cmpModules.get(a);if(o){return o[r]}
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/return import("./".concat(a,".entry.js").concat("")).then((function(e){{cmpModules.set(a,e)}return e[r]}),consoleError)};var styles=new Map;var win=typeof window!=="undefined"?window:{};var doc=win.document||{head:{}};var plt={$flags$:0,$resourcesUrl$:"",jmp:function(e){return e()},raf:function(e){return requestAnimationFrame(e)},ael:function(e,t,n,r){return e.addEventListener(t,n,r)},rel:function(e,t,n,r){return e.removeEventListener(t,n,r)},ce:function(e,t){return new CustomEvent(e,t)}};var promiseResolve=function(e){return Promise.resolve(e)};var supportsConstructableStylesheets=function(){try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(e){}return false}();var queueDomReads=[];var queueDomWrites=[];var queueTask=function(e,t){return function(n){e.push(n);if(!queuePending){queuePending=true;if(t&&plt.$flags$&4){nextTick(flush)}else{plt.raf(flush)}}}};var consume=function(e){for(var t=0;t<e.length;t++){try{e[t](performance.now())}catch(e){consoleError(e)}}e.length=0};var flush=function(){consume(queueDomReads);{consume(queueDomWrites);if(queuePending=queueDomReads.length>0){plt.raf(flush)}}};var nextTick=function(e){return promiseResolve().then(e)};var writeTask=queueTask(queueDomWrites,true);export{Host as H,bootstrapLazy as b,getElement as g,h,promiseResolve as p,registerInstance as r};

package/dist/esm-es5/loader.js

@@ -1 +1 @@
-import{p as promiseResolve,b as bootstrapLazy}from"./index-18b5f438.js";var patchEsm=function(){return promiseResolve()};var defineCustomElements=function(e,t){if(typeof window==="undefined")return Promise.resolve();return patchEsm().then((function(){return bootstrapLazy([["mds-tab",[[1,"mds-tab",null,[[0,"selectedEvent","changeEventHandler"]]]]]],t)}))};export{defineCustomElements};
+import{p as promiseResolve,b as bootstrapLazy}from"./index-5928fc07.js";var patchEsm=function(){return promiseResolve()};var defineCustomElements=function(e,t){if(typeof window==="undefined")return Promise.resolve();return patchEsm().then((function(){return bootstrapLazy([["mds-tab",[[1,"mds-tab",null,[[0,"selectedEvent","changeEventHandler"]]]]]],t)}))};export{defineCustomElements};

package/dist/esm-es5/mds-tab.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-18b5f438.js";var mdsTabCss=".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--background:rgb(var(--tone-neutral-09));--button-background-hover:transparent;--button-background-selected:rgb(var(--tone-neutral));--button-background:transparent;--button-color-hover:rgb(var(--tone-neutral-02));--button-color-selected:rgb(var(--tone-neutral-02));--button-color:rgb(var(--tone-neutral-04));--button-radius:0.5rem;--button-shadow-selected:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--radius:1rem;display:-ms-flexbox;display:flex;gap:0.5rem;overflow:auto;padding:0.5rem;background-color:var(--background);border-radius:var(--radius);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none}:host::-webkit-scrollbar{display:none}@media (max-width: 767px){.mobile\\:flex-1{-ms-flex:1 1 0%;flex:1 1 0%}}";var MdsTab=function(){function e(e){var t=this;registerInstance(this,e);this.queryItems=function(){return t.element.querySelectorAll("mds-tab-item")};this.scrollTabs=function(){var e=t.queryItems();var r=e[t.currentItem];t.element.scrollLeft=r.offsetLeft-t.element.offsetLeft-t.element.offsetWidth/2+r.offsetWidth/2}}e.prototype.componentWillLoad=function(){var e=this.queryItems();e.forEach((function(e,t){return e.id="item-".concat(t)}))};e.prototype.changeEventHandler=function(e){var t=this;var r=this.element.querySelectorAll("mds-tab-item");r.forEach((function(r,o){if("item-".concat(o)===e.detail){r.selected=true;t.currentItem=o;t.scrollTabs()}else{r.selected=false}}))};e.prototype.render=function(){return h(Host,null,h("slot",{name:"tab-item"}))};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();MdsTab.style=mdsTabCss;export{MdsTab as mds_tab};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-5928fc07.js";var mdsTabCss=".visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-tab-background:rgb(var(--tone-neutral-09));--mds-tab-radius:1rem;display:-ms-flexbox;display:flex;gap:0.5rem;overflow:auto;padding:0.5rem;background-color:var(--mds-tab-background);border-radius:var(--mds-tab-radius);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none}:host::-webkit-scrollbar{display:none}@media (max-width: 767px){.mobile\\:flex-1{-ms-flex:1 1 0%;flex:1 1 0%}}";var MdsTab=function(){function e(e){var t=this;registerInstance(this,e);this.queryItems=function(){return t.element.querySelectorAll("mds-tab-item")};this.scrollTabs=function(){var e=t.queryItems();var o=e[t.currentItem];t.element.scrollLeft=o.offsetLeft-t.element.offsetLeft-t.element.offsetWidth/2+o.offsetWidth/2}}e.prototype.componentWillLoad=function(){var e=this.queryItems();e.forEach((function(e,t){if(!e.id){e.id="mds-tab-item-".concat(t)}}))};e.prototype.changeEventHandler=function(e){var t=this;var o=this.element.querySelectorAll("mds-tab-item");o.forEach((function(o,r){if(o.id===e.detail){o.selected=true;t.currentItem=r;t.scrollTabs()}else{o.selected=false}}))};e.prototype.render=function(){return h(Host,null,h("slot",null))};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();MdsTab.style=mdsTabCss;export{MdsTab as mds_tab};

package/dist/esm-es5/mds-tab.js

@@ -1 +1 @@
-import{p as promiseResolve,b as bootstrapLazy}from"./index-18b5f438.js";var patchBrowser=function(){var e=import.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return promiseResolve(r)};patchBrowser().then((function(e){return bootstrapLazy([["mds-tab",[[1,"mds-tab",null,[[0,"selectedEvent","changeEventHandler"]]]]]],e)}));
+import{p as promiseResolve,b as bootstrapLazy}from"./index-5928fc07.js";var patchBrowser=function(){var e=import.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return promiseResolve(r)};patchBrowser().then((function(e){return bootstrapLazy([["mds-tab",[[1,"mds-tab",null,[[0,"selectedEvent","changeEventHandler"]]]]]],e)}));

package/dist/mds-tab/mds-tab.esm.js

@@ -1 +1 @@
-import{p as e,b as n}from"./p-11ef3340.js";(()=>{const n=import.meta.url,t={};return""!==n&&(t.resourcesUrl=new URL(".",n).href),e(t)})().then((e=>n([["p-35f2d92f",[[1,"mds-tab",null,[[0,"selectedEvent","changeEventHandler"]]]]]],e)));
+import{p as e,b as n}from"./p-034fd2fd.js";(()=>{const n=import.meta.url,t={};return""!==n&&(t.resourcesUrl=new URL(".",n).href),e(t)})().then((e=>n([["p-d2967340",[[1,"mds-tab",null,[[0,"selectedEvent","changeEventHandler"]]]]]],e)));

package/dist/mds-tab/mds-tab.js

@@ -115,7 +115,7 @@ DOMTokenList
   var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
   var start = function() {
     // if src is not present then origin is "null", and new URL() throws TypeError: Failed to construct 'URL': Invalid base URL
-    var url = new URL('./p-7a6f973a.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
+    var url = new URL('./p-c1b0e916.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
     System.import(url.href);
   };
 

package/dist/mds-tab/p-034fd2fd.js

@@ -0,0 +1,2 @@
+let e,t,n=!1;const l=e=>"object"==(e=typeof e)||"function"===e,s=(e,t,...n)=>{let s=null,r=!1,c=!1;const a=[],i=t=>{for(let n=0;n<t.length;n++)s=t[n],Array.isArray(s)?i(s):null!=s&&"boolean"!=typeof s&&((r="function"!=typeof e&&!l(s))&&(s+=""),r&&c?a[a.length-1].t+=s:a.push(r?o(null,s):s),c=r)};i(n);const u=o(e,null);return u.l=t,a.length>0&&(u.o=a),u},o=(e,t)=>({i:0,u:e,t,$:null,o:null}),r={},c=e=>x(e).m,a=new WeakMap,i=e=>"sc-"+e.p,u=(t,n,l)=>{const s=n.o[l];let o,r,c=0;if(o=s.$=R.createElement(s.u),null!=e&&o["s-si"]!==e&&o.classList.add(o["s-si"]=e),s.o)for(c=0;c<s.o.length;++c)r=u(t,s,c),r&&o.appendChild(r);return o},f=(n,l)=>{const c=n.m,a=n.h||o(null,null),i=(e=>e&&e.u===r)(l)?l:s(null,null,l);t=c.tagName,i.u=null,i.i|=4,n.h=i,i.$=a.$=c.shadowRoot||c,e=c["s-sc"],((e,n)=>{const l=n.$=e.$,s=n.o;null!==s&&((e,n,l,s,o,r)=>{let c,a=e;for(a.shadowRoot&&a.tagName===t&&(a=a.shadowRoot);o<=r;++o)s[o]&&(c=u(null,l,o),c&&(s[o].$=c,a.insertBefore(c,null)))})(l,0,n,s,0,s.length-1)})(a,i)},$=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},y=(e,t)=>{if(!(4&e.i))return $(e,e.g),G((()=>d(e,t)));e.i|=512},d=(e,t)=>{const n=e.M;let l;return t&&(e.i|=256,e.k&&(e.k.map((([e,t])=>S(n,e,t))),e.k=null),l=S(n,"componentWillLoad")),b(l,(()=>m(e,n,t)))},m=async(e,t,n)=>{const l=e.m,s=l["s-rc"];n&&(e=>{const t=e.v,n=e.m,l=t.i,s=((e,t)=>{let n=i(t);const l=A.get(n);if(e=11===e.nodeType?e:R,l)if("string"==typeof l){let t,s=a.get(e=e.head||e);s||a.set(e,s=new Set),s.has(n)||(t=R.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),s&&s.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=s,n.classList.add(s+"-h"))})(e);p(e,t),s&&(s.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>h(e);0===t.length?n():(Promise.all(t).then(n),e.i|=4,t.length=0)}},p=(e,t)=>{try{t=t.render(),e.i|=2,f(e,t)}catch(t){O(t,e.m)}return null},h=e=>{const t=e.m,n=e.g;64&e.i||(e.i|=64,g(t),e.C(t),n||w()),e.S&&(e.S(),e.S=void 0),512&e.i&&D((()=>y(e,!1))),e.i&=-517},w=()=>{g(R.documentElement),D((()=>(e=>{const t=U.ce("appload",{detail:{namespace:"mds-tab"}});return e.dispatchEvent(t),t})(H)))},S=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){O(e)}},b=(e,t)=>e&&e.then?e.then(t):t(),g=e=>e.classList.add("hydrated"),M=(e,t)=>(t.j&&Object.entries(t.j).map((([e,[t]])=>{})),e),k=(e,t={})=>{const n=[],l=t.exclude||[],s=H.customElements,o=R.head,r=o.querySelector("meta[charset]"),c=R.createElement("style"),a=[];let u,f=!0;Object.assign(U,t),U.P=new URL(t.resourcesUrl||"./",R.baseURI).href,e.map((e=>{e[1].map((t=>{const o={i:t[0],p:t[1],j:t[2],L:t[3]};o.j=t[2],o.L=t[3];const r=o.p,c=class extends HTMLElement{constructor(e){super(e),L(e=this,o),1&o.i&&e.attachShadow({mode:"open"})}connectedCallback(){u&&(clearTimeout(u),u=null),f?a.push(this):U.jmp((()=>(e=>{if(0==(1&U.i)){const t=x(e),n=t.v,l=()=>{};if(1&t.i)v(e,t,n.L);else{t.i|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){$(t,t.g=n);break}}(async(e,t,n,l,s)=>{if(0==(32&t.i)){{if(t.i|=32,(s=W(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(M(s,n),s.isProxied=!0);const e=()=>{};t.i|=8;try{new s(t)}catch(e){O(e)}t.i&=-9,e()}if(s.style){let e=s.style;const t=i(n);if(!A.has(t)){const l=()=>{};((e,t,n)=>{let l=A.get(e);F&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,A.set(e,l)})(t,e,!!(1&n.i)),l()}}}const o=t.g,r=()=>y(t,!0);o&&o["s-rc"]?o["s-rc"].push(r):r()})(0,t,n)}l()}})(this)))}disconnectedCallback(){U.jmp((()=>(()=>{if(0==(1&U.i)){const e=x(this);e.O&&(e.O.map((e=>e())),e.O=void 0)}})()))}componentOnReady(){return x(this).T}};o.W=e[0],l.includes(r)||s.get(r)||(n.push(r),s.define(r,M(c,o)))}))})),c.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",c.setAttribute("data-styles",""),o.insertBefore(c,r?r.nextSibling:o.firstChild),f=!1,a.length?a.map((e=>e.connectedCallback())):U.jmp((()=>u=setTimeout(w,30)))},v=(e,t,n)=>{n&&n.map((([n,l,s])=>{const o=e,r=C(t,s),c=j(n);U.ael(o,l,r,c),(t.O=t.O||[]).push((()=>U.rel(o,l,r,c)))}))},C=(e,t)=>n=>{try{256&e.i?e.M[t](n):(e.k=e.k||[]).push([t,n])}catch(e){O(e)}},j=e=>0!=(2&e),P=new WeakMap,x=e=>P.get(e),E=(e,t)=>P.set(t.M=e,t),L=(e,t)=>{const n={i:0,m:e,v:t,A:new Map};return n.T=new Promise((e=>n.C=e)),e["s-p"]=[],e["s-rc"]=[],v(e,n,t.L),P.set(e,n)},O=(e,t)=>(0,console.error)(e,t),T=new Map,W=e=>{const t=e.p.replace(/-/g,"_"),n=e.W,l=T.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(T.set(n,e),e[t])),O)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/},A=new Map,H="undefined"!=typeof window?window:{},R=H.document||{head:{}},U={i:0,P:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},q=e=>Promise.resolve(e),F=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),N=[],V=[],_=(e,t)=>l=>{e.push(l),n||(n=!0,t&&4&U.i?D(B):U.raf(B))},z=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){O(e)}e.length=0},B=()=>{z(N),z(V),(n=N.length>0)&&U.raf(B)},D=e=>q().then(e),G=_(V,!0);export{r as H,k as b,c as g,s as h,q as p,E as r}