@maggioli-design-system/mds-tab 6.3.1 → 6.3.3

package/dist/cjs/{index-a91d315b.js → index-2b0d567f.js}

@@ -334,7 +334,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                         elm[memberName] = newValue;
                     }
                 }
-                catch (e) { }
+                catch (e) {
+                    /**
+                     * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
+                     */
+                }
             }
             if (newValue == null || newValue === false) {
                 if (newValue !== false || elm.getAttribute(memberName) === '') {
@@ -353,6 +357,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     }
 };
 const parseClassListRegex = /\s/;
+/**
+ * Parsed a string of classnames into an array
+ * @param value className string, e.g. "foo bar baz"
+ * @returns list of classes, e.g. ["foo", "bar", "baz"]
+ */
 const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
 const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
     // if the element passed in is a shadow root, which is a document fragment
@@ -1137,19 +1146,19 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
         return module[exportName];
     }
     
-    if (!hmrVersionId || !BUILD.hotModuleReplacement) {
-      const processMod = importedModule => {
-        cmpModules.set(bundleId, importedModule);
-        return importedModule[exportName];
-      }
-      switch(bundleId) {
-        
-        case 'mds-tab.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './mds-tab.cjs.entry.js')); }).then(processMod, consoleError);
+        if (!hmrVersionId || !BUILD.hotModuleReplacement) {
+          const processMod = importedModule => {
+              cmpModules.set(bundleId, importedModule);
+              return importedModule[exportName];
+          }
+          switch(bundleId) {
+              
+                case 'mds-tab.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './mds-tab.cjs.entry.js')); }).then(processMod, consoleError);
+          }
       }
-    }
     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
     /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a91d315b.js');
+const index = require('./index-2b0d567f.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

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

@@ -2,76 +2,76 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a91d315b.js');
+const index = require('./index-2b0d567f.js');
 
-const mdsTabCss = "@tailwind components; .fixed{position:fixed}.absolute{position:absolute}.grid{display:grid}.contents{display:contents}.hidden{display:none}.auto-rows-min{grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content}.gap-1{gap:0.25rem}.gap-2{gap:0.5rem}.gap-6{gap:1.5rem}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.px-2{padding-left:0.5rem;padding-right:0.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.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-duration:.75s;--mds-tab-timing-function:cubic-bezier(1, 0, 0, 1);display:grid}.tabs{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;gap:0.5rem;padding:0.5rem;background-color:rgb(var(--theme-default-06-secondary-background));border-radius:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;overflow:auto;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.tabs::-webkit-scrollbar{display:none}.contents{--mds-tab-contents-height:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;gap:1.5rem;-ms-flex-align:start;align-items:flex-start;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;height:var(--mds-tab-contents-height);overflow-x:auto;overflow-y:hidden;position:relative;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;-webkit-transition:height var(--mds-tab-duration) var(--mds-tab-timing-function);transition:height var(--mds-tab-duration) var(--mds-tab-timing-function)}::slotted([slot=\"content\"]){width:100%;min-width:100%;-webkit-animation-duration:var(--mds-tab-duration);animation-duration:var(--mds-tab-duration);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:var(--mds-tab-timing-function);animation-timing-function:var(--mds-tab-timing-function);-ms-flex-preferred-size:0;flex-basis:0;scroll-snap-align:start}:host([strategy=\"default\"]) ::slotted([slot=\"content\"]){left:0px;right:0px;top:0px;opacity:0;background-color:rgb(var(--label-blue-06));pointer-events:none;position:absolute}@media (min-width: 768px){.tablet\\:grid-cols-\\[1fr_2fr\\]{grid-template-columns:1fr 2fr}}";
+const mdsTabCss = "@tailwind components; .fixed{position:fixed}.absolute{position:absolute}.grid{display:grid}.contents{display:contents}.hidden{display:none}.auto-rows-min{grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.text{font-size:1rem}.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-duration:.75s;--mds-tab-timing-function:cubic-bezier(1, 0, 0, 1);display:grid}.tabs{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;gap:0.5rem;padding:0.5rem;background-color:rgb(var(--theme-default-06-secondary-background));border-radius:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;overflow:auto;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.tabs::-webkit-scrollbar{display:none}.contents{--mds-tab-contents-height:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;gap:1.5rem;-ms-flex-align:start;align-items:flex-start;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;height:var(--mds-tab-contents-height);overflow-x:auto;overflow-y:hidden;position:relative;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;-webkit-transition:height var(--mds-tab-duration) var(--mds-tab-timing-function);transition:height var(--mds-tab-duration) var(--mds-tab-timing-function)}::slotted([slot=\"content\"]){width:100%;min-width:100%;-webkit-animation-duration:var(--mds-tab-duration);animation-duration:var(--mds-tab-duration);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:var(--mds-tab-timing-function);animation-timing-function:var(--mds-tab-timing-function);-ms-flex-preferred-size:0;flex-basis:0;scroll-snap-align:start}:host([strategy=\"default\"]) ::slotted([slot=\"content\"]){background-color:rgb(var(--label-blue-06));left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0}@media (min-width: 768px){.tablet\\:grid-cols-\\[1fr_2fr\\]{grid-template-columns:1fr 2fr}}";
 
 const MdsTab = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    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.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 });
-          this.currentItem = key;
-          this.scrollTabs();
-        }
-        else {
-          item.selected = false;
-        }
-      });
-    };
-    this.selectContentItem = () => {
-      this.contentItems.forEach((item, index) => {
-        item.classList.add('hidden');
-        if (index === this.currentItem) {
-          item.classList.remove('hidden');
-        }
-      });
-    };
-  }
-  componentWillLoad() {
-    this.tabItems = this.element.querySelectorAll('mds-tab-item');
-    this.tabItems.forEach((item, key) => {
-      if (!item.id) {
-        item.id = `mds-tab-item-${key}`;
-      }
-      if (item.selected) {
-        this.currentItem = key;
-      }
-    });
-  }
-  componentDidLoad() {
-    var _a;
-    this.tabs = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tabs');
-    this.contentItems = this.queryContentItems();
-    this.selectContentItem();
-  }
-  changeEventHandler(event) {
-    // since the external developer can define a custom id
-    // we must find the key from event.detail
-    this.tabItems.forEach((item, key) => {
-      if (item.id === event.detail) {
-        this.selectTabItem(key);
-      }
-      else {
-        item.selected = false;
-      }
-    });
-    this.selectContentItem();
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "tabs", part: "tabs" }, index.h("slot", null)), index.h("div", { class: "contents", part: "contents" }, index.h("slot", { name: "content" }))));
-  }
-  get element() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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.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 });
+                    this.currentItem = key;
+                    this.scrollTabs();
+                }
+                else {
+                    item.selected = false;
+                }
+            });
+        };
+        this.selectContentItem = () => {
+            this.contentItems.forEach((item, index) => {
+                item.classList.add('hidden');
+                if (index === this.currentItem) {
+                    item.classList.remove('hidden');
+                }
+            });
+        };
+    }
+    componentWillLoad() {
+        this.tabItems = this.element.querySelectorAll('mds-tab-item');
+        this.tabItems.forEach((item, key) => {
+            if (!item.id) {
+                item.id = `mds-tab-item-${key}`;
+            }
+            if (item.selected) {
+                this.currentItem = key;
+            }
+        });
+    }
+    componentDidLoad() {
+        var _a;
+        this.tabs = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tabs');
+        this.contentItems = this.queryContentItems();
+        this.selectContentItem();
+    }
+    changeEventHandler(event) {
+        // since the external developer can define a custom id
+        // we must find the key from event.detail
+        this.tabItems.forEach((item, key) => {
+            if (item.id === event.detail) {
+                this.selectTabItem(key);
+            }
+            else {
+                item.selected = false;
+            }
+        });
+        this.selectContentItem();
+    }
+    render() {
+        return (index.h(index.Host, null, index.h("div", { class: "tabs", part: "tabs" }, index.h("slot", null)), index.h("div", { class: "contents", part: "contents" }, index.h("slot", { name: "content" }))));
+    }
+    get element() { return index.getElement(this); }
 };
 MdsTab.style = mdsTabCss;
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a91d315b.js');
+const index = require('./index-2b0d567f.js');
 
 /*
- Stencil Client Patch Browser v4.7.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.8.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,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.7.2",
+    "version": "4.8.0",
     "typescriptVersion": "5.2.2"
   },
   "collections": [],

package/dist/collection/common/aria.js

@@ -1,29 +1,29 @@
 const hash = (s) => {
-  let i, h;
-  for (i = 0, h = 0; i < s.length; i++) {
-    h = Math.imul(31, h) + s.charCodeAt(i) | 0;
-  }
-  return h.toString();
+    let i, h;
+    for (i = 0, h = 0; i < s.length; i++) {
+        h = Math.imul(31, h) + s.charCodeAt(i) | 0;
+    }
+    return h.toString();
 };
 const randomInt = (max) => Math.floor(Math.random() * max);
 const unslugName = (name) => {
-  var _a, _b, _c;
-  return (_c = (_b = (_a = name.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.replace(/-/g, ' ')) !== null && _c !== void 0 ? _c : name;
+    var _a, _b, _c;
+    return (_c = (_b = (_a = name.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.replace(/-/g, ' ')) !== null && _c !== void 0 ? _c : name;
 };
 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;
+    var _a;
+    if (element.hasAttribute(attribute)) {
+        return (_a = element.getAttribute(attribute)) !== null && _a !== void 0 ? _a : '';
+    }
+    element.setAttribute(attribute, value);
+    return value;
 };
 const hashValue = (value) => `${value}-${hash(value)}`;
 const hashRandomValue = (value) => {
-  const randomValue = randomInt(1000000);
-  if (value) {
-    return `${value}-${hash(randomValue.toString())}`;
-  }
-  return hash(randomValue.toString());
+    const randomValue = randomInt(1000000);
+    if (value) {
+        return `${value}-${hash(randomValue.toString())}`;
+    }
+    return hash(randomValue.toString());
 };
 export { unslugName, setAttributeIfEmpty, hashRandomValue, hashValue, };

package/dist/collection/common/keyboard-manager.js

@@ -1,40 +1,40 @@
 export class KeyboardManager {
-  constructor() {
-    this.elements = [];
-    this.handleClickBehaviorDispatchEvent = (event) => {
-      if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
-        event.target.click();
-      }
-    };
-    this.handleEscapeBehaviorDispatchEvent = (event) => {
-      if (event.code === 'Escape' && this.escapeCallback) {
-        this.escapeCallback();
-      }
-    };
-    this.addElement = (el, name = 'element') => {
-      this.elements[name] = el;
-    };
-    this.attachClickBehavior = (name = 'element') => {
-      if (this.elements[name]) {
-        this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-      }
-    };
-    this.detachClickBehavior = (name = 'element') => {
-      if (this.elements[name]) {
-        this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-      }
-    };
-    this.attachEscapeBehavior = (callBack) => {
-      this.escapeCallback = callBack;
-      if (window !== undefined) {
-        window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
-      }
-    };
-    this.detachEscapeBehavior = () => {
-      this.escapeCallback = () => { return; };
-      if (window !== undefined) {
-        window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
-      }
-    };
-  }
+    constructor() {
+        this.elements = [];
+        this.handleClickBehaviorDispatchEvent = (event) => {
+            if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
+                event.target.click();
+            }
+        };
+        this.handleEscapeBehaviorDispatchEvent = (event) => {
+            if (event.code === 'Escape' && this.escapeCallback) {
+                this.escapeCallback();
+            }
+        };
+        this.addElement = (el, name = 'element') => {
+            this.elements[name] = el;
+        };
+        this.attachClickBehavior = (name = 'element') => {
+            if (this.elements[name]) {
+                this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+            }
+        };
+        this.detachClickBehavior = (name = 'element') => {
+            if (this.elements[name]) {
+                this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+            }
+        };
+        this.attachEscapeBehavior = (callBack) => {
+            this.escapeCallback = callBack;
+            if (window !== undefined) {
+                window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+            }
+        };
+        this.detachEscapeBehavior = () => {
+            this.escapeCallback = () => { return; };
+            if (window !== undefined) {
+                window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+            }
+        };
+    }
 }

package/dist/collection/common/unit.js

@@ -1,10 +1,10 @@
 const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
-  if (duration.includes('s')) {
-    return Number(duration.replace('s', '')) * 1000;
-  }
-  if (duration.includes('ms')) {
-    return Number(duration.replace('s', ''));
-  }
-  return defaultValue;
+    if (duration.includes('s')) {
+        return Number(duration.replace('s', '')) * 1000;
+    }
+    if (duration.includes('ms')) {
+        return Number(duration.replace('s', ''));
+    }
+    return defaultValue;
 };
 export { cssDurationToMilliseconds, };

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

@@ -23,18 +23,6 @@
 
   grid-auto-rows: min-content;
 }
-.gap-1{
-
-  gap: 0.25rem;
-}
-.gap-2{
-
-  gap: 0.5rem;
-}
-.gap-6{
-
-  gap: 1.5rem;
-}
 .rounded-lg{
 
   border-radius: 0.5rem;
@@ -43,17 +31,9 @@
 
   border-width: 1px;
 }
-.px-2{
-
-  padding-left: 0.5rem;
+.text{
 
-  padding-right: 0.5rem;
-}
-.py-6{
-
-  padding-top: 1.5rem;
-
-  padding-bottom: 1.5rem;
+  font-size: 1rem;
 }
 .shadow{
 
@@ -130,19 +110,14 @@
   scroll-snap-align: start;
 }
 
-:host( [strategy="default"] ) ::slotted( [slot="content"] ){
-
-  left: 0px;
-
-  right: 0px;
-
-  top: 0px;
-
-  opacity: 0;
-
+:host( [strategy="default"] ) ::slotted( [slot="content"] ) {
   background-color: rgb(var(--label-blue-06));
+  left: 0;
+  opacity: 0;
   pointer-events: none;
   position: absolute;
+  right: 0;
+  top: 0;
 }
 
 @media (min-width: 768px){