@maggioli-design-system/mds-list 3.6.0 → 3.6.2

package/dist/cjs/{index-9c256f25.js → index-eed6e3cd.js}

@@ -48,6 +48,13 @@ const uniqueTime = (key, measureText) => {
     }
 };
 const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
+/**
+ * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
+ *
+ * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
+ * support as of Stencil v4.
+ */
+const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
 const isDef = (v) => v != null;
 /**
  * Check whether a value is a 'complex type', defined here as an object or a
@@ -199,6 +206,10 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
                     }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
+                // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
+                if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                    styleElm.innerHTML += SLOT_FB_CSS;
+                }
                 if (appliedStyles) {
                     appliedStyles.add(scopeId);
                 }
@@ -716,12 +727,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     const customElements = win.customElements;
     const head = doc.head;
     const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
-    const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
+    const dataStyles = /*@__PURE__*/ doc.createElement('style');
     const deferredConnectedCallbacks = [];
     let appLoadFallback;
     let isBootstrapping = true;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
+    let hasSlotRelocation = false;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
             const cmpMeta = {
@@ -730,6 +742,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 $members$: compactMeta[2],
                 $listeners$: compactMeta[3],
             };
+            // Check if we are using slots outside the shadow DOM in this component.
+            // We'll use this information later to add styles for `slot-fb` elements
+            if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                hasSlotRelocation = true;
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost
@@ -777,15 +794,23 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             }
         });
     });
+    // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
+    if (hasSlotRelocation) {
+        dataStyles.innerHTML += SLOT_FB_CSS;
+    }
+    // Add hydration styles
     {
-        visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
-        visibilityStyle.setAttribute('data-styles', '');
+        dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
+    }
+    // If we have styles, add them to the DOM
+    if (dataStyles.innerHTML.length) {
+        dataStyles.setAttribute('data-styles', '');
+        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
         // Apply CSP nonce to the style tag if it exists
         const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
         if (nonce != null) {
-            visibilityStyle.setAttribute('nonce', nonce);
+            dataStyles.setAttribute('nonce', nonce);
         }
-        head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
@@ -862,19 +887,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-list.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './mds-list.cjs.entry.js')); }).then(processMod, consoleError);
+        if (!hmrVersionId || !BUILD.hotModuleReplacement) {
+          const processMod = importedModule => {
+              cmpModules.set(bundleId, importedModule);
+              return importedModule[exportName];
+          }
+          switch(bundleId) {
+              
+                case 'mds-list.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './mds-list.cjs.entry.js')); }).then(processMod, consoleError);
+          }
       }
-    }
     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
     /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
@@ -949,7 +974,7 @@ const flush = () => {
         }
     }
 };
-const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
+const nextTick = (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 exports.Host = Host;

package/dist/cjs/loader.cjs.js

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

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

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9c256f25.js');
+const index = require('./index-eed6e3cd.js');
 
-const mdsListCss = ".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{gap:1rem;padding-left:1rem;display:grid}ul{margin:0px;padding:0px}";
+const mdsListCss = ".fixed{position:fixed}.absolute{position:absolute}.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{gap:1rem;padding-left:1rem;display:grid}ul{margin:0rem;padding:0rem}";
 
 const MdsList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, null, index.h("slot", null)));
+    }
 };
 MdsList.style = mdsListCss;
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9c256f25.js');
+const index = require('./index-eed6e3cd.js');
 
 /*
- Stencil Client Patch Browser v4.7.1 | 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-list.cjs.js', document.baseURI).href));

package/dist/collection/collection-manifest.json

@@ -4,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.7.1",
+    "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-list/mds-list.css

@@ -13,6 +13,11 @@
   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);
@@ -33,7 +38,7 @@
 
 ul {
 
-  margin: 0px;
+  margin: 0rem;
 
-  padding: 0px
+  padding: 0rem
 }

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

@@ -3,19 +3,19 @@ import { Host, h } from "@stencil/core";
  * @slot default - Add `mds-list-item` element/s.
  */
 export class MdsList {
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  static get is() { return "mds-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["mds-list.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["mds-list.css"]
-    };
-  }
+    render() {
+        return (h(Host, null, h("slot", null)));
+    }
+    static get is() { return "mds-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mds-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mds-list.css"]
+        };
+    }
 }

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export default {
-  title: 'UI / List',
+    title: 'UI / List',
 };
 const Template = () => h("mds-list", null, h("mds-list-item", null, "Pane"), h("mds-list-item", null, "Acqua"), h("mds-list-item", null, "Pasta"));
 export const Default = Template.bind({});

package/dist/collection/dictionary/autocomplete.js

@@ -1,59 +1,59 @@
 const autoCompleteDictionary = [
-  'additional-name',
-  'address',
-  'address-level1',
-  'address-level2',
-  'address-level3',
-  'address-level4',
-  'address-line1',
-  'address-line2',
-  'address-line3',
-  'bday',
-  'bday-day',
-  'bday-month',
-  'bday-year',
-  'cc-additional-name',
-  'cc-csc',
-  'cc-exp',
-  'cc-exp-month',
-  'cc-exp-year',
-  'cc-family-name',
-  'cc-family-name',
-  'cc-given-name',
-  'cc-name',
-  'cc-number',
-  'cc-type',
-  'country',
-  'country-name',
-  'current-password',
-  'email',
-  'family-name',
-  'given-name',
-  'honorific-prefix',
-  'honorific-suffix',
-  'impp',
-  'language',
-  'name',
-  'new-password',
-  'nickname',
-  'off',
-  'on',
-  'one-time-code',
-  'organization',
-  'organization-title',
-  'photo',
-  'postal-code',
-  'sex',
-  'street-address',
-  'tel',
-  'tel-area-code',
-  'tel-country-code',
-  'tel-extension',
-  'tel-local',
-  'tel-national',
-  'transaction-amount',
-  'transaction-currency',
-  'url',
-  'username',
+    'additional-name',
+    'address',
+    'address-level1',
+    'address-level2',
+    'address-level3',
+    'address-level4',
+    'address-line1',
+    'address-line2',
+    'address-line3',
+    'bday',
+    'bday-day',
+    'bday-month',
+    'bday-year',
+    'cc-additional-name',
+    'cc-csc',
+    'cc-exp',
+    'cc-exp-month',
+    'cc-exp-year',
+    'cc-family-name',
+    'cc-family-name',
+    'cc-given-name',
+    'cc-name',
+    'cc-number',
+    'cc-type',
+    'country',
+    'country-name',
+    'current-password',
+    'email',
+    'family-name',
+    'given-name',
+    'honorific-prefix',
+    'honorific-suffix',
+    'impp',
+    'language',
+    'name',
+    'new-password',
+    'nickname',
+    'off',
+    'on',
+    'one-time-code',
+    'organization',
+    'organization-title',
+    'photo',
+    'postal-code',
+    'sex',
+    'street-address',
+    'tel',
+    'tel-area-code',
+    'tel-country-code',
+    'tel-extension',
+    'tel-local',
+    'tel-national',
+    'transaction-amount',
+    'transaction-currency',
+    'url',
+    'username',
 ];
 export { autoCompleteDictionary, };

package/dist/collection/dictionary/button.js

@@ -1,30 +1,30 @@
 const buttonVariantDictionary = [
-  'dark',
-  'error',
-  'info',
-  'light',
-  'primary',
-  'success',
-  'warning',
+    'dark',
+    'error',
+    'info',
+    'light',
+    'primary',
+    'success',
+    'warning',
 ];
 const buttonToneVariantDictionary = [
-  'strong',
-  'weak',
-  'ghost',
-  'quiet',
+    'strong',
+    'weak',
+    'ghost',
+    'quiet',
 ];
 const buttonTargetDictionary = [
-  'blank',
-  'self',
+    'blank',
+    'self',
 ];
 const buttonSizeDictionary = [
-  'sm',
-  'md',
-  'lg',
-  'xl',
+    'sm',
+    'md',
+    'lg',
+    'xl',
 ];
 const buttonIconPositionDictionary = [
-  'left',
-  'right',
+    'left',
+    'right',
 ];
 export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonVariantDictionary, };

package/dist/collection/dictionary/color.js

@@ -1,19 +1,19 @@
 const colorLabelDictionary = [
-  'amaranth',
-  'aqua',
-  'blue',
-  'green',
-  'lime',
-  'orange',
-  'orchid',
-  'sky',
-  'violet',
-  'yellow',
+    'amaranth',
+    'aqua',
+    'blue',
+    'green',
+    'lime',
+    'orange',
+    'orchid',
+    'sky',
+    'violet',
+    'yellow',
 ];
 const colorStatusDictionary = [
-  'error',
-  'info',
-  'success',
-  'warning',
+    'error',
+    'info',
+    'success',
+    'warning',
 ];
 export { colorLabelDictionary, colorStatusDictionary, };

package/dist/collection/dictionary/floating-ui.js

@@ -1,19 +1,19 @@
 const floatingUIPlacementDictionary = [
-  'bottom',
-  'bottom-end',
-  'bottom-start',
-  'left',
-  'left-end',
-  'left-start',
-  'right',
-  'right-end',
-  'right-start',
-  'top',
-  'top-end',
-  'top-start',
+    'bottom',
+    'bottom-end',
+    'bottom-start',
+    'left',
+    'left-end',
+    'left-start',
+    'right',
+    'right-end',
+    'right-start',
+    'top',
+    'top-end',
+    'top-start',
 ];
 const floatingUIStrategyDictionary = [
-  'absolute',
-  'fixed',
+    'absolute',
+    'fixed',
 ];
 export { floatingUIPlacementDictionary, floatingUIStrategyDictionary, };