@maggioli-design-system/mds-tab 6.8.5 → 7.0.0

package/dist/cjs/{index-a9a1a9d2.js → index-7cc6e10e.js}

@@ -21,10 +21,10 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'mds-tab';
-const BUILD = /* mds-tab */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: false, profile: false, prop: false, propBoolean: false, propMutable: false, propNumber: false, propString: false, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: false, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: false, vdomXlink: false, watchCallback: false };
+const BUILD = /* mds-tab */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: false, propString: false, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: false, vdomXlink: false, watchCallback: false };
 
 /*
- Stencil Client Platform v4.21.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.22.2 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -309,6 +309,15 @@ var newVNode = (tag, text) => {
 };
 var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
+var parsePropertyValue = (propValue, propType) => {
+  if (propValue != null && !isComplexType(propValue)) {
+    if (propType & 4 /* Boolean */) {
+      return propValue === "false" ? false : propValue === "" || !!propValue;
+    }
+    return propValue;
+  }
+  return propValue;
+};
 var getElement = (ref) => getHostRef(ref).$hostElement$ ;
 
 // src/runtime/event-emitter.ts
@@ -369,10 +378,21 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
             if (styleContainerNode.nodeName === "HEAD") {
               const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
-              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : document.querySelector("style");
+              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
               styleContainerNode.insertBefore(styleElm, referenceNode2);
             } else if ("host" in styleContainerNode) {
-              styleContainerNode.prepend(styleElm);
+              if (supportsConstructableStylesheets) {
+                const stylesheet = new CSSStyleSheet();
+                stylesheet.replaceSync(style);
+                styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
+              } else {
+                const existingStyleContainer = styleContainerNode.querySelector("style");
+                if (existingStyleContainer) {
+                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
+                } else {
+                  styleContainerNode.prepend(styleElm);
+                }
+              }
             } else {
               styleContainerNode.append(styleElm);
             }
@@ -463,6 +483,13 @@ var updateElement = (oldVnode, newVnode, isSvgMode2) => {
   const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
   const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || EMPTY_OBJ;
   const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
+  {
+    for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
+      if (!(memberName in newVnodeAttrs)) {
+        setAccessor(elm, memberName, oldVnodeAttrs[memberName], void 0, isSvgMode2, newVnode.$flags$);
+      }
+    }
+  }
   for (const memberName of sortedAttrNames(Object.keys(newVnodeAttrs))) {
     setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode2, newVnode.$flags$);
   }
@@ -538,6 +565,99 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     }
   }
 };
+var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = false) => {
+  let oldStartIdx = 0;
+  let newStartIdx = 0;
+  let idxInOld = 0;
+  let i2 = 0;
+  let oldEndIdx = oldCh.length - 1;
+  let oldStartVnode = oldCh[0];
+  let oldEndVnode = oldCh[oldEndIdx];
+  let newEndIdx = newCh.length - 1;
+  let newStartVnode = newCh[0];
+  let newEndVnode = newCh[newEndIdx];
+  let node;
+  let elmToMove;
+  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+    if (oldStartVnode == null) {
+      oldStartVnode = oldCh[++oldStartIdx];
+    } else if (oldEndVnode == null) {
+      oldEndVnode = oldCh[--oldEndIdx];
+    } else if (newStartVnode == null) {
+      newStartVnode = newCh[++newStartIdx];
+    } else if (newEndVnode == null) {
+      newEndVnode = newCh[--newEndIdx];
+    } else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
+      patch(oldStartVnode, newStartVnode, isInitialRender);
+      oldStartVnode = oldCh[++oldStartIdx];
+      newStartVnode = newCh[++newStartIdx];
+    } else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
+      patch(oldEndVnode, newEndVnode, isInitialRender);
+      oldEndVnode = oldCh[--oldEndIdx];
+      newEndVnode = newCh[--newEndIdx];
+    } else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
+      patch(oldStartVnode, newEndVnode, isInitialRender);
+      insertBefore(parentElm, oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
+      oldStartVnode = oldCh[++oldStartIdx];
+      newEndVnode = newCh[--newEndIdx];
+    } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
+      patch(oldEndVnode, newStartVnode, isInitialRender);
+      insertBefore(parentElm, oldEndVnode.$elm$, oldStartVnode.$elm$);
+      oldEndVnode = oldCh[--oldEndIdx];
+      newStartVnode = newCh[++newStartIdx];
+    } else {
+      idxInOld = -1;
+      {
+        for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) {
+          if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) {
+            idxInOld = i2;
+            break;
+          }
+        }
+      }
+      if (idxInOld >= 0) {
+        elmToMove = oldCh[idxInOld];
+        if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
+        } else {
+          patch(elmToMove, newStartVnode, isInitialRender);
+          oldCh[idxInOld] = void 0;
+          node = elmToMove.$elm$;
+        }
+        newStartVnode = newCh[++newStartIdx];
+      } else {
+        node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
+        newStartVnode = newCh[++newStartIdx];
+      }
+      if (node) {
+        {
+          insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
+        }
+      }
+    }
+  }
+  if (oldStartIdx > oldEndIdx) {
+    addVnodes(
+      parentElm,
+      newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$,
+      newVNode2,
+      newCh,
+      newStartIdx,
+      newEndIdx
+    );
+  } else if (newStartIdx > newEndIdx) {
+    removeVnodes(oldCh, oldStartIdx, oldEndIdx);
+  }
+};
+var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
+  if (leftVNode.$tag$ === rightVNode.$tag$) {
+    if (!isInitialRender) {
+      return leftVNode.$key$ === rightVNode.$key$;
+    }
+    return true;
+  }
+  return false;
+};
 var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
@@ -549,7 +669,9 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
         updateElement(oldVNode, newVNode2, isSvgMode);
       }
     }
-    if (newChildren !== null) {
+    if (oldChildren !== null && newChildren !== null) {
+      updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
+    } else if (newChildren !== null) {
       addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
     } else if (
       // don't do this on initial render as it can cause non-hydrated content to be removed
@@ -569,6 +691,12 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
   const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
+  if (cmpMeta.$attrsToReflect$) {
+    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+    cmpMeta.$attrsToReflect$.map(
+      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
+    );
+  }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
       if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
@@ -594,6 +722,9 @@ var attachToAncestor = (hostRef, ancestorComponent) => {
   }
 };
 var scheduleUpdate = (hostRef, isInitialLoad) => {
+  {
+    hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
+  }
   if (hostRef.$flags$ & 4 /* isWaitingForChildren */) {
     hostRef.$flags$ |= 512 /* needsRerender */;
     return;
@@ -665,6 +796,9 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
 var callRender = (hostRef, instance, elm, isInitialLoad) => {
   try {
     instance = instance.render() ;
+    {
+      hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
+    }
     {
       hostRef.$flags$ |= 2 /* hasRendered */;
     }
@@ -736,13 +870,95 @@ var addHydratedFlag = (elm) => {
   return elm.setAttribute((_b = BUILD.hydratedSelectorName) != null ? _b : "hydrated", "") ;
 };
 
+// src/runtime/set-value.ts
+var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
+var setValue = (ref, propName, newVal, cmpMeta) => {
+  const hostRef = getHostRef(ref);
+  if (!hostRef) {
+    throw new Error(
+      `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`
+    );
+  }
+  const oldVal = hostRef.$instanceValues$.get(propName);
+  const flags = hostRef.$flags$;
+  const instance = hostRef.$lazyInstance$ ;
+  newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
+  const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
+  const didValueChange = newVal !== oldVal && !areBothNaN;
+  if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
+    hostRef.$instanceValues$.set(propName, newVal);
+    if (instance) {
+      if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+        scheduleUpdate(hostRef, false);
+      }
+    }
+  }
+};
+
 // src/runtime/proxy-component.ts
 var proxyComponent = (Cstr, cmpMeta, flags) => {
-  var _a;
+  var _a, _b;
+  const prototype = Cstr.prototype;
   if (cmpMeta.$members$ || BUILD.watchCallback ) {
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
+      if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
+        Object.defineProperty(prototype, memberName, {
+          get() {
+            return getValue(this, memberName);
+          },
+          set(newValue) {
+            setValue(this, memberName, newValue, cmpMeta);
+          },
+          configurable: true,
+          enumerable: true
+        });
+      }
     });
+    if ((flags & 1 /* isElementConstructor */)) {
+      const attrNameToPropName = /* @__PURE__ */ new Map();
+      prototype.attributeChangedCallback = function(attrName, oldValue, newValue) {
+        plt.jmp(() => {
+          var _a2;
+          const propName = attrNameToPropName.get(attrName);
+          if (this.hasOwnProperty(propName)) {
+            newValue = this[propName];
+            delete this[propName];
+          } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
+          this[propName] == newValue) {
+            return;
+          } else if (propName == null) {
+            const hostRef = getHostRef(this);
+            const flags2 = hostRef == null ? void 0 : hostRef.$flags$;
+            if (flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
+              const instance = hostRef.$lazyInstance$ ;
+              const entry = (_a2 = cmpMeta.$watchers$) == null ? void 0 : _a2[attrName];
+              entry == null ? void 0 : entry.forEach((callbackName) => {
+                if (instance[callbackName] != null) {
+                  instance[callbackName].call(instance, newValue, oldValue, attrName);
+                }
+              });
+            }
+            return;
+          }
+          this[propName] = newValue === null && typeof this[propName] === "boolean" ? false : newValue;
+        });
+      };
+      Cstr.observedAttributes = Array.from(
+        /* @__PURE__ */ new Set([
+          ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
+          ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
+            var _a2;
+            const attrName = m[1] || propName;
+            attrNameToPropName.set(attrName, propName);
+            if (m[0] & 512 /* ReflectAttr */) {
+              (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
+            }
+            return attrName;
+          })
+        ])
+      );
+    }
   }
   return Cstr;
 };
@@ -766,7 +982,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
       if (!Cstr.isProxied) {
-        proxyComponent(Cstr, cmpMeta);
+        proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
       }
       const endNewInstance = createTime("createInstance", cmpMeta.$tagName$);
@@ -828,6 +1044,15 @@ var connectedCallback = (elm) => {
           }
         }
       }
+      if (cmpMeta.$members$) {
+        Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
+          if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
+            const value = elm[memberName];
+            delete elm[memberName];
+            elm[memberName] = value;
+          }
+        });
+      }
       {
         initializeComponent(elm, hostRef, cmpMeta);
       }
@@ -890,6 +1115,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$listeners$ = compactMeta[3];
       }
+      {
+        cmpMeta.$attrsToReflect$ = [];
+      }
       const tagName = cmpMeta.$tagName$;
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
@@ -942,7 +1170,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
         cmpTags.push(tagName);
         customElements2.define(
           tagName,
-          proxyComponent(HostElement, cmpMeta)
+          proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */)
         );
       }
     });

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a9a1a9d2.js');
+const index = require('./index-7cc6e10e.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-tab.cjs",[[1,"mds-tab",null,[[0,"mdsTabItemSelect","changeEventHandler"]]]]]], options);
+  return index.bootstrapLazy([["mds-tab.cjs",[[1,"mds-tab",{"scrollbar":[516]},[[0,"mdsTabItemSelect","changeEventHandler"],[0,"mdsTabItemFocus","focusEventHandler"]]]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -2,9 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a9a1a9d2.js');
+const index = require('./index-7cc6e10e.js');
 
-const mdsTabCss = "@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.svg svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n@tailwind utilities;\n\n/**\n  * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n  * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n*/\n\n:host {\n\n  --mds-tab-duration: .75s;\n  --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  display: grid;\n}\n\n.tabs {\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n    gap: 0.5rem;\n    border-width: 0.125rem;\n    border-style: solid;\n    border-color: transparent;\n    padding: 0.5rem;\n    -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    -webkit-transition-duration: 150ms;\n    transition-duration: 150ms;\n\n  background-color: rgb(var(--theme-default-06-secondary-background));\n  border-radius: 1rem;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  overflow: auto;\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  }\n\n.tabs::-webkit-scrollbar {\n  display: none;\n}\n\n.contents {\n\n  --mds-tab-contents-height: auto;\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n    gap: 1.5rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-tab-contents-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  position: relative;\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n  transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot=\"content\"] ){\n\n  width: 100%;\n\n  min-width: 100%;\n\n  -webkit-animation-duration: var(--mds-tab-duration);\n\n  animation-duration: var(--mds-tab-duration);\n  -webkit-animation-fill-mode: forwards;\n  animation-fill-mode: forwards;\n  -webkit-animation-timing-function: var(--mds-tab-timing-function);\n  animation-timing-function: var(--mds-tab-timing-function);\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-tab-duration: 0s;\n\n    -webkit-transition-duration: 0s;\n\n    transition-duration: 0s;\n  }\n\n  .contents,\n  .tabs {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-tab-duration: 0s;\n\n      -webkit-transition-duration: 0s;\n\n      transition-duration: 0s;\n    }\n  \n    .contents,\n    .tabs {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  .tabs {\n    border-color: rgb(var(--tone-neutral-08));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    .tabs {\n      border-color: rgb(var(--tone-neutral-08));\n    }\n  }\n}\n\n.static{\n\n  position: static;\n}\n\n.fixed{\n\n  position: fixed;\n}\n\n.absolute{\n\n  position: absolute;\n}\n\n.grid{\n\n  display: grid;\n}\n\n.contents{\n\n  display: contents;\n}\n\n.hidden{\n\n  display: none;\n}\n\n.auto-rows-min{\n\n  grid-auto-rows: -webkit-min-content;\n\n  grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n  gap: 0.25rem;\n}\n\n.gap-200{\n\n  gap: 0.5rem;\n}\n\n.gap-600{\n\n  gap: 1.5rem;\n}\n\n.rounded-lg{\n\n  border-radius: 0.5rem;\n}\n\n.border{\n\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n  padding-left: 0.5rem;\n\n  padding-right: 0.5rem;\n}\n\n.py-600{\n\n  padding-top: 1.5rem;\n\n  padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n  .tabs {\n    border-color: rgb(var(--tone-neutral-06));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    .tabs {\n      border-color: rgb(var(--tone-neutral-06));\n    }\n  }\n}\n\n@media (min-width: 768px){\n\n  .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n    grid-template-columns: 1fr 2fr;\n  }\n}\n\n\n";
+const setAttributeIfEmpty = (element, attribute, value) => {
+    var _a;
+    if (element.hasAttribute(attribute)) {
+        return (_a = element.getAttribute(attribute)) !== null && _a !== void 0 ? _a : '';
+    }
+    element.setAttribute(attribute, value);
+    return value;
+};
+
+const mdsTabCss = "@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-scrollbar-margin: Sets the margin of the browser scroll bar (if supported)\n * @prop --mds-tab-scrollbar-radius: Sets the border-radius of the browser scroll bar (if supported)\n * @prop --mds-tab-scrollbar-size: Sets the height and width of the browser scroll bar (if supported)\n * @prop --mds-tab-scrollbar-thumb-background: Sets the background-color of the browser scroll bar thumb (if supported)\n * @prop --mds-tab-scrollbar-track-background: Sets the background-color of the browser scroll bar track (if supported)\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n */\n\n:host {\n\n  --mds-tab-duration: .75s;\n  --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n  --mds-tab-current-item: 2;\n  --mds-tab-scroll-scrollbar-radius: 0;\n  --mds-tab-scroll-scrollbar-margin: 0;\n  --mds-tab-scroll-scrollbar-size: 0.5rem;\n  --mds-tab-scroll-scrollbar-thumb-background: rgb(var(--tone-neutral-02) 0.3);\n  --mds-tab-scroll-scrollbar-track-background: rgb(var(--tone-neutral-06) 0.3);\n\n  display: grid;\n}\n\n.tabs{\n\n  gap: 0.5rem;\n\n  border-width: 0.125rem;\n\n  border-style: solid;\n\n  border-color: transparent;\n\n  padding: 0.5rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: rgb(var(--theme-default-06-secondary-background));\n  border-radius: 1rem;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  overflow: auto;\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n.contents {\n\n  --mds-tab-contents-height: auto;\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n    gap: 1.5rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-tab-contents-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  position: relative;\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n  transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot=\"content\"] ){\n\n  width: 100%;\n\n  min-width: 100%;\n\n  -webkit-animation-duration: var(--mds-tab-duration);\n\n  animation-duration: var(--mds-tab-duration);\n  -webkit-animation-fill-mode: forwards;\n  animation-fill-mode: forwards;\n  -webkit-animation-timing-function: var(--mds-tab-timing-function);\n  animation-timing-function: var(--mds-tab-timing-function);\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  scroll-snap-align: start;\n}\n\n::slotted( [slot=\"content\"][mds-tab-content-hidden] ) {\n    display: none !important;\n}\n\n@import '~@maggioli-design-system/styles/dist/tailwind/components.css';\n@tailwind components;\n@tailwind utilities;\n\n:host(:not([scrollbar])) .tabs {\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n  }\n\n:host(:not([scrollbar])) .tabs::-webkit-scrollbar {\n  display: none;\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar {\n  height: var(--mds-tab-scroll-scrollbar-size);\n  width: var(--mds-tab-scroll-scrollbar-size);\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar-track {\n  background-color: var(--mds-tab-scroll-scrollbar-track-background);\n  border-radius: var(--mds-tab-scroll-scrollbar-radius);\n  margin-block: var(--mds-tab-scroll-scrollbar-margin);\n  margin-inline: var(--mds-tab-scroll-scrollbar-margin);\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar-thumb {\n  background-color: var(--mds-tab-scroll-scrollbar-thumb-background);\n  border-radius: var(--mds-tab-scroll-scrollbar-radius);\n}\n\n@supports (scrollbar-color: transparent transparent) {\n  .tabs {\n    scrollbar-color: var(--mds-tab-scroll-scrollbar-thumb-background) var(--mds-tab-scroll-scrollbar-track-background);\n    scrollbar-width: thin;\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-tab-duration: 0s;\n\n    -webkit-transition-duration: 0s;\n\n    transition-duration: 0s;\n  }\n\n  .contents,\n  .tabs {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-tab-duration: 0s;\n\n      -webkit-transition-duration: 0s;\n\n      transition-duration: 0s;\n    }\n  \n    .contents,\n    .tabs {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  .tabs {\n    border-color: rgb(var(--tone-neutral-08));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    .tabs {\n      border-color: rgb(var(--tone-neutral-08));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  .tabs {\n    border-color: rgb(var(--tone-neutral-06));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    .tabs {\n      border-color: rgb(var(--tone-neutral-06));\n    }\n  }\n}\n\n\n";
 const MdsTabStyle0 = mdsTabCss;
 
 const MdsTab = class {
@@ -13,31 +22,19 @@ const MdsTab = class {
         this.changedEvent = index.createEvent(this, "mdsTabChange", 7);
         this.currentItem = -1;
         this.queryContentItems = () => this.element.querySelectorAll('[slot=content]');
-        this.scrollTabs = () => {
-            const tabItem = this.tabItems[this.currentItem];
+        this.scrollTabs = (key) => {
+            const tabItem = this.tabItems[key];
             this.tabs.scrollLeft = tabItem.offsetLeft - this.tabs.offsetLeft - (this.tabs.offsetWidth / 2) + (tabItem.offsetWidth / 2);
         };
-        this.selectTabItem = (scrollItem) => {
-            this.tabItems.forEach((item, key) => {
-                if (key === scrollItem) {
-                    item.selected = true;
-                    this.changedEvent.emit({ id: key, value: item.value });
-                    this.currentItem = key;
-                    this.scrollTabs();
-                }
-                else {
-                    item.selected = false;
-                }
-            });
-        };
         this.selectContentItem = () => {
             this.contentItems.forEach((item, index) => {
-                item.classList.add('hidden');
+                item.setAttribute('mds-tab-content-hidden', '');
                 if (index === this.currentItem) {
-                    item.classList.remove('hidden');
+                    item.removeAttribute('mds-tab-content-hidden');
                 }
             });
         };
+        this.scrollbar = undefined;
     }
     componentWillLoad() {
         this.tabItems = this.element.querySelectorAll('mds-tab-item');
@@ -54,6 +51,9 @@ const MdsTab = class {
         var _a;
         this.tabs = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tabs');
         this.contentItems = this.queryContentItems();
+        this.contentItems.forEach((item) => {
+            setAttributeIfEmpty(item, 'role', 'tabpanel');
+        });
         this.selectContentItem();
     }
     changeEventHandler(event) {
@@ -61,7 +61,10 @@ const MdsTab = class {
         // we must find the key from event.detail
         this.tabItems.forEach((item, key) => {
             if (item.id === event.detail.target.id) {
-                this.selectTabItem(key);
+                item.selected = true;
+                this.changedEvent.emit({ id: key, value: item.value });
+                this.currentItem = key;
+                this.scrollTabs(key);
             }
             else {
                 item.selected = false;
@@ -69,8 +72,15 @@ const MdsTab = class {
         });
         this.selectContentItem();
     }
+    focusEventHandler(event) {
+        this.tabItems.forEach((item, key) => {
+            if (item.id === event.detail.target.id) {
+                this.scrollTabs(key);
+            }
+        });
+    }
     render() {
-        return (index.h(index.Host, { key: '286da60fb24a1916d3ee941c83c71bdb17e1c6e0' }, index.h("div", { key: 'ed4487b4821ea5619207b9438595486bbcbd0f07', class: "tabs", part: "tabs" }, index.h("slot", { key: '26b2e092d274a389dd61936b156bbf5d617b096d' })), index.h("div", { key: '65766aa0161c480a25df5a8427e1b083ef1925b7', class: "contents", part: "contents" }, index.h("slot", { key: '3dabb8c898391570ceb083da1fd471547ab490cf', name: "content" }))));
+        return (index.h(index.Host, { key: 'c1d8f059b1728fc43b00fa981c71f8c8d921db41' }, index.h("div", { key: '207c442cca5a2044064dbbff0f66169fae810a14', class: "tabs", part: "tabs", role: "tablist" }, index.h("slot", { key: '156989b7e0c0d31a58240d6851e4f6181227e7d5' })), index.h("div", { key: 'ef1ccd815767b98f6ceedacb23b49abbcb181930', class: "contents", part: "contents" }, index.h("slot", { key: '9ebe3581dd533a45a7e2f6f2501a8fa39537e2fc', name: "content" }))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a9a1a9d2.js');
+const index = require('./index-7cc6e10e.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.22.2 | MIT Licensed | https://stenciljs.com
  */
 var 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));
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-tab.cjs",[[1,"mds-tab",null,[[0,"mdsTabItemSelect","changeEventHandler"]]]]]], options);
+  return index.bootstrapLazy([["mds-tab.cjs",[[1,"mds-tab",{"scrollbar":[516]},[[0,"mdsTabItemSelect","changeEventHandler"],[0,"mdsTabItemFocus","focusEventHandler"]]]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -4,8 +4,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.21.0",
-    "typescriptVersion": "5.5.3"
+    "version": "4.22.2",
+    "typescriptVersion": "5.5.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/common/date.js

@@ -0,0 +1,13 @@
+// ISO 8601 date regex allowing optional components (month, day, time)
+const ISO8601RegexString = '^\\d{4}(-\\d{2})?(-\\d{2})?(T\\d{2}(:\\d{2})?(:\\d{2})?(\\.\\d{3})?)?([+-]\\d{2}:\\d{2}|Z)?$';
+const isISO8601Date = (dateString) => {
+    const ISO8601Regex = new RegExp(ISO8601RegexString);
+    return ISO8601Regex.test(dateString);
+};
+const sanitizeISO8601Date = (dateString) => {
+    if (isISO8601Date(dateString)) {
+        return dateString;
+    }
+    return new Date(dateString).toISOString();
+};
+export { sanitizeISO8601Date, isISO8601Date, };

package/dist/collection/common/locale.js

@@ -1,16 +1,33 @@
-import Handlebars from "handlebars";
+import { render } from "mustache";
 export class Locale {
     constructor(configData) {
         this.rollbackLanguage = 'en';
-        this.lang = (element) => {
-            this.closestElement = element.closest('[lang]');
+        this.set = (configData) => {
+            this.config = configData;
+        };
+        this.lang = (el) => {
+            this.element = el;
+            this.closestElement = this.element.closest('[lang]');
             if (this.closestElement) {
                 if (this.closestElement.lang) {
                     this.language = this.closestElement.lang;
-                    return;
+                    return this.language;
                 }
             }
             this.language = this.rollbackLanguage;
+            return this.language;
+        };
+        this.update = (doc) => {
+            const context = doc !== null && doc !== void 0 ? doc : this.element.shadowRoot;
+            context && context.querySelectorAll('*').forEach(el => {
+                if (el.tagName.toLowerCase().startsWith('mds-')) {
+                    // eslint-disable-next-line no-restricted-syntax
+                    if (el && 'updateLang' in el) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        el.updateLang();
+                    }
+                }
+            });
         };
         this.pluralize = (tag, context) => {
             const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
@@ -34,8 +51,7 @@ export class Locale {
                     }
                 }
             }
-            const template = Handlebars.compile(translatePhrase);
-            return template(context);
+            return render(translatePhrase, context);
         };
         this.get = (tag, context) => {
             if (context) {
@@ -43,6 +59,8 @@ export class Locale {
             }
             return this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
         };
-        this.config = configData;
+        if (configData) {
+            this.set(configData);
+        }
     }
 }