@maggioli-design-system/mds-paginator-item 2.7.3 → 2.8.1

package/dist/cjs/{index-96b46685.js → index-29fd42e7.js}

@@ -995,6 +995,7 @@ const postUpdateComponent = (hostRef) => {
     const tagName = hostRef.$cmpMeta$.$tagName$;
     const elm = hostRef.$hostElement$;
     const endPostUpdate = createTime('postUpdate', tagName);
+    const instance = hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
     if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
@@ -1002,6 +1003,9 @@ const postUpdateComponent = (hostRef) => {
             // DOM WRITE!
             addHydratedFlag(elm);
         }
+        {
+            safeCall(instance, 'componentDidLoad');
+        }
         endPostUpdate();
         {
             hostRef.$onReadyResolve$(elm);
@@ -1011,6 +1015,9 @@ const postUpdateComponent = (hostRef) => {
         }
     }
     else {
+        {
+            safeCall(instance, 'componentDidUpdate');
+        }
         endPostUpdate();
     }
     // load events fire from bottom to top
@@ -1037,6 +1044,27 @@ const appDidLoad = (who) => {
     }
     nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
 };
+/**
+ * Allows to safely call a method, e.g. `componentDidLoad`, on an instance,
+ * e.g. custom element node. If a build figures out that e.g. no component
+ * has a `componentDidLoad` method, the instance method gets removed from the
+ * output bundle and this function returns `undefined`.
+ * @param instance any object that may or may not contain methods
+ * @param method method name
+ * @param arg single arbitrary argument
+ * @returns result of method call if it exists, otherwise `undefined`
+ */
+const safeCall = (instance, method, arg) => {
+    if (instance && instance[method]) {
+        try {
+            return instance[method](arg);
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+    return undefined;
+};
 const addHydratedFlag = (elm) => elm.setAttribute('hydrated', '')
         ;
 const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);

package/dist/cjs/loader.cjs.js

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

package/dist/cjs/mds-paginator-item.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b46685.js');
+const index = require('./index-29fd42e7.js');
 
 class KeyboardManager {
     constructor() {
-        this.elements = [];
+        this.elements = new Map();
         this.handleClickBehaviorDispatchEvent = (event) => {
-            if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
+            if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                 event.target.click();
             }
         };
@@ -18,20 +18,25 @@ class KeyboardManager {
             }
         };
         this.addElement = (el, name = 'element') => {
-            this.elements[name] = el;
+            if (!el) {
+                throw Error(`Passed an ${el} element parameter to KeyboardManager.addElement`);
+            }
+            this.elements.set(name, el);
+        };
+        this.removeElement = (name = 'element') => {
+            this.detachClickBehavior(name);
+            this.elements.delete(name);
         };
         this.attachClickBehavior = (name = 'element') => {
-            if (this.elements[name]) {
-                this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-            }
+            var _a;
+            (_a = this.elements.get(name)) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
         };
         this.detachClickBehavior = (name = 'element') => {
-            if (this.elements[name]) {
-                this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-            }
+            var _a;
+            (_a = this.elements.get(name)) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
         };
-        this.attachEscapeBehavior = (callBack) => {
-            this.escapeCallback = callBack;
+        this.attachEscapeBehavior = (callback) => {
+            this.escapeCallback = callback;
             if (window !== undefined) {
                 window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
             }
@@ -45,23 +50,12 @@ class KeyboardManager {
     }
 }
 
-const mdsPaginatorItemCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@tailwind components; .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-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--brand-maggioli-03));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02));--mds-paginator-item-color-selected:rgb(var(--tone-neutral));--mds-paginator-item-color:rgb(var(--tone-neutral-02));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);--mds-paginator-item-shadow:none;--mds-paginator-item-size:2.25rem;-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host{padding-left:0.75rem;padding-right:0.75rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-ms-flex-align:center;align-items:center;background-color:var(--mds-paginator-item-background);border-radius:var(--mds-paginator-item-radius);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--mds-paginator-item-color);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:var(--mds-paginator-item-size);-ms-flex-pack:center;justify-content:center;min-width:var(--mds-paginator-item-size);-webkit-transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, box-shadow, color, outline, outline-offset;transition-property:background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host(:hover){background-color:var(--mds-paginator-item-background-hover);-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover);fill:var(--mds-paginator-item-color-hover)}:host([icon]){padding:0rem}:host([selected]){background-color:var(--mds-paginator-item-background-selected);-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected);fill:var(--mds-paginator-item-color-selected);pointer-events:none}:host([disabled]){background-color:var(--mds-paginator-item-background-disabled);-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled);fill:var(--mds-paginator-item-color-disabled);pointer-events:none}.icon{padding-left:0rem;padding-right:0rem}";
+const mdsPaginatorItemCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; .svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1/1;height:100%;width:100%}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.bg-label-amaranth-10{--tw-bg-opacity:1;background-color:rgb(var(--label-amaranth-10) / var(--tw-bg-opacity))}.bg-label-aqua-10{--tw-bg-opacity:1;background-color:rgb(var(--label-aqua-10) / var(--tw-bg-opacity))}.bg-label-blue-10{--tw-bg-opacity:1;background-color:rgb(var(--label-blue-10) / var(--tw-bg-opacity))}.bg-label-green-10{--tw-bg-opacity:1;background-color:rgb(var(--label-green-10) / var(--tw-bg-opacity))}.bg-label-lime-10{--tw-bg-opacity:1;background-color:rgb(var(--label-lime-10) / var(--tw-bg-opacity))}.bg-label-orange-10{--tw-bg-opacity:1;background-color:rgb(var(--label-orange-10) / var(--tw-bg-opacity))}.bg-label-orchid-10{--tw-bg-opacity:1;background-color:rgb(var(--label-orchid-10) / var(--tw-bg-opacity))}.bg-label-violet-10{--tw-bg-opacity:1;background-color:rgb(var(--label-violet-10) / var(--tw-bg-opacity))}.bg-label-yellow-10{--tw-bg-opacity:1;background-color:rgb(var(--label-yellow-10) / var(--tw-bg-opacity))}.bg-tone-neutral-10{--tw-bg-opacity:1;background-color:rgb(var(--tone-neutral-10) / var(--tw-bg-opacity))}.fill-label-amaranth-04{fill:rgb(var(--label-amaranth-04))}.fill-label-aqua-04{fill:rgb(var(--label-aqua-04))}.fill-label-blue-04{fill:rgb(var(--label-blue-04))}.fill-label-green-04{fill:rgb(var(--label-green-04))}.fill-label-lime-04{fill:rgb(var(--label-lime-04))}.fill-label-orange-04{fill:rgb(var(--label-orange-04))}.fill-label-orchid-04{fill:rgb(var(--label-orchid-04))}.fill-label-violet-04{fill:rgb(var(--label-violet-04))}.fill-label-yellow-04{fill:rgb(var(--label-yellow-04))}.fill-tone-neutral-04{fill:rgb(var(--tone-neutral-04))}.text-label-amaranth-04{--tw-text-opacity:1;color:rgb(var(--label-amaranth-04) / var(--tw-text-opacity))}.text-label-aqua-04{--tw-text-opacity:1;color:rgb(var(--label-aqua-04) / var(--tw-text-opacity))}.text-label-blue-04{--tw-text-opacity:1;color:rgb(var(--label-blue-04) / var(--tw-text-opacity))}.text-label-green-04{--tw-text-opacity:1;color:rgb(var(--label-green-04) / var(--tw-text-opacity))}.text-label-lime-04{--tw-text-opacity:1;color:rgb(var(--label-lime-04) / var(--tw-text-opacity))}.text-label-orange-04{--tw-text-opacity:1;color:rgb(var(--label-orange-04) / var(--tw-text-opacity))}.text-label-orchid-04{--tw-text-opacity:1;color:rgb(var(--label-orchid-04) / var(--tw-text-opacity))}.text-label-violet-04{--tw-text-opacity:1;color:rgb(var(--label-violet-04) / var(--tw-text-opacity))}.text-label-yellow-04{--tw-text-opacity:1;color:rgb(var(--label-yellow-04) / var(--tw-text-opacity))}.text-tone-neutral-04{--tw-text-opacity:1;color:rgb(var(--tone-neutral-04) / var(--tw-text-opacity))}.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-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--brand-maggioli-03));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02));--mds-paginator-item-color-selected:rgb(var(--tone-neutral));--mds-paginator-item-color:rgb(var(--tone-neutral-02));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);--mds-paginator-item-shadow:none;--mds-paginator-item-size:2.25rem;-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host{padding-left:0.75rem;padding-right:0.75rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-ms-flex-align:center;align-items:center;background-color:var(--mds-paginator-item-background);border-radius:var(--mds-paginator-item-radius);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--mds-paginator-item-color);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:var(--mds-paginator-item-size);-ms-flex-pack:center;justify-content:center;min-width:var(--mds-paginator-item-size);-webkit-transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, box-shadow, color, outline, outline-offset;transition-property:background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host(:hover){background-color:var(--mds-paginator-item-background-hover);-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover);fill:var(--mds-paginator-item-color-hover)}:host([icon]){padding:0rem}:host([selected]){background-color:var(--mds-paginator-item-background-selected);-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected);fill:var(--mds-paginator-item-color-selected);pointer-events:none}:host([disabled]){background-color:var(--mds-paginator-item-background-disabled);-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled);fill:var(--mds-paginator-item-color-disabled);pointer-events:none}.icon{padding-left:0rem;padding-right:0rem}";
 
 const MdsPaginatorItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.km = new KeyboardManager();
-        this.componentDidLoad = () => {
-            this.km.addElement(this.host);
-            this.km.attachClickBehavior();
-        };
-        this.componentDidUpdate = () => {
-            if (!this.disabled && !this.selected) {
-                this.km.attachClickBehavior();
-                return;
-            }
-            this.km.detachClickBehavior();
-        };
         this.disconnectedCallback = () => {
             this.km.detachClickBehavior();
         };
@@ -69,6 +63,17 @@ const MdsPaginatorItem = class {
         this.selected = undefined;
         this.disabled = undefined;
     }
+    componentDidLoad() {
+        this.km.addElement(this.host);
+        this.km.attachClickBehavior();
+    }
+    componentDidUpdate() {
+        if (!this.disabled && !this.selected) {
+            this.km.attachClickBehavior();
+            return;
+        }
+        this.km.detachClickBehavior();
+    }
     render() {
         return (index.h(index.Host, { tabindex: "0" }, this.icon !== undefined
             ? index.h("mds-icon", { name: this.icon })

package/dist/cjs/mds-paginator-item.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b46685.js');
+const index = require('./index-29fd42e7.js');
 
 /*
- Stencil Client Patch Browser v4.9.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.10.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-paginator-item.cjs.js', document.baseURI).href));

package/dist/collection/collection-manifest.json

@@ -4,8 +4,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.9.1",
-    "typescriptVersion": "5.2.2"
+    "version": "4.10.0",
+    "typescriptVersion": "5.3.3"
   },
   "collections": [],
   "bundles": []

package/dist/collection/common/file.js

@@ -0,0 +1,48 @@
+import { fileExtensionsDictionary } from "../dictionary/file-extensions";
+import { fileFormatsVariant } from "../type/variant-file-format";
+const sanitizeFilename = (filename, error = 'Attribute "filename" is undefined.') => {
+    var _a;
+    if (filename === undefined) {
+        throw console.error(error);
+    }
+    if (filename.includes('/')) {
+        return (_a = filename.split('/').pop()) !== null && _a !== void 0 ? _a : '';
+    }
+    return filename;
+};
+const sanitizeSuffix = (rawFilename) => {
+    var _a;
+    const filename = sanitizeFilename(rawFilename);
+    if (filename.includes('.')) {
+        return (_a = filename.split('.').pop()) !== null && _a !== void 0 ? _a : '';
+    }
+    return filename;
+};
+const getName = (rawFilename) => {
+    var _a;
+    const filename = sanitizeFilename(rawFilename);
+    if (filename.includes('.')) {
+        return (_a = filename.split('.')[0]) !== null && _a !== void 0 ? _a : '';
+    }
+    return filename;
+};
+const getSuffix = (rawFilename, suffixOverride) => {
+    const suffix = sanitizeSuffix(rawFilename);
+    const filename = sanitizeFilename(rawFilename);
+    if (suffixOverride !== null && suffixOverride !== undefined) {
+        return suffixOverride.toLowerCase();
+    }
+    if (suffix !== filename) {
+        return suffix;
+    }
+    return 'default';
+};
+const getExtensionInfos = (rawFilename, suffixOverride) => {
+    var _a;
+    const suffix = getSuffix(rawFilename, suffixOverride).toLocaleLowerCase();
+    return (_a = fileExtensionsDictionary[suffix]) !== null && _a !== void 0 ? _a : fileExtensionsDictionary.default;
+};
+const getFormatsVariant = (rawFilename, suffixOverride) => {
+    return fileFormatsVariant[getExtensionInfos(rawFilename, suffixOverride).format];
+};
+export { getExtensionInfos, getFormatsVariant, getSuffix, getName, };

package/dist/collection/common/icon.js

@@ -0,0 +1,15 @@
+const BASE64_SVG_ICON = 'data:image/svg+xml;base64,';
+const MARKUP_SVG_ICON = '<svg ';
+const isIconFormatIsBase64 = (icon) => {
+    if (!icon) {
+        return false;
+    }
+    return icon.startsWith(BASE64_SVG_ICON);
+};
+const isIconFormatIsSVG = (icon) => {
+    if (!icon) {
+        return false;
+    }
+    return icon.startsWith(MARKUP_SVG_ICON);
+};
+export { isIconFormatIsBase64, isIconFormatIsSVG, BASE64_SVG_ICON, MARKUP_SVG_ICON, };

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

@@ -1,8 +1,8 @@
 export class KeyboardManager {
     constructor() {
-        this.elements = [];
+        this.elements = new Map();
         this.handleClickBehaviorDispatchEvent = (event) => {
-            if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
+            if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                 event.target.click();
             }
         };
@@ -12,20 +12,25 @@ export class KeyboardManager {
             }
         };
         this.addElement = (el, name = 'element') => {
-            this.elements[name] = el;
+            if (!el) {
+                throw Error(`Passed an ${el} element parameter to KeyboardManager.addElement`);
+            }
+            this.elements.set(name, el);
+        };
+        this.removeElement = (name = 'element') => {
+            this.detachClickBehavior(name);
+            this.elements.delete(name);
         };
         this.attachClickBehavior = (name = 'element') => {
-            if (this.elements[name]) {
-                this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-            }
+            var _a;
+            (_a = this.elements.get(name)) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
         };
         this.detachClickBehavior = (name = 'element') => {
-            if (this.elements[name]) {
-                this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
-            }
+            var _a;
+            (_a = this.elements.get(name)) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
         };
-        this.attachEscapeBehavior = (callBack) => {
-            this.escapeCallback = callBack;
+        this.attachEscapeBehavior = (callback) => {
+            this.escapeCallback = callback;
             if (window !== undefined) {
                 window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
             }

package/dist/collection/common/unit.js

@@ -1,10 +1,22 @@
 const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
+    if (duration.includes('ms')) {
+        return Number(duration.replace('ms', ''));
+    }
     if (duration.includes('s')) {
         return Number(duration.replace('s', '')) * 1000;
     }
-    if (duration.includes('ms')) {
-        return Number(duration.replace('s', ''));
+    return defaultValue;
+};
+const cssSizeToNumber = (size, defaultValue = 0) => {
+    if (size.includes('px')) {
+        return Number(size.replace('px', ''));
+    }
+    if (size.includes('rem')) {
+        return Number(size.replace('rem', '')) * 16;
+    }
+    if (size.includes('em')) {
+        return Number(size.replace('em', '')) * 16;
     }
     return defaultValue;
 };
-export { cssDurationToMilliseconds, };
+export { cssDurationToMilliseconds, cssSizeToNumber, };

package/dist/collection/common/yugop/core.js

@@ -0,0 +1,16 @@
+import { generator } from "./utils/prng";
+import { strToCharCodeArray } from "./utils/string";
+import { randomSign, minMaxLooped } from "./utils/math";
+const rand = generator();
+const random = (base, offset) => () => (base + rand.range(0, offset)) * randomSign();
+export const generateRandomCharCodeArray = (base, offset) => str => strToCharCodeArray(str).map(random(base, offset));
+export const charCodeArrayToString = ({ str, minCharCode, maxCharCode, placeholderChar, charStep, }) => charCodes => charCodes.reduce((acc, item, index) => {
+    if (item !== 0) {
+        if (Math.abs(item) > charStep) {
+            return acc + placeholderChar;
+        }
+        return (acc +
+            String.fromCharCode(minMaxLooped(minCharCode, maxCharCode)(str.charCodeAt(index) + item)));
+    }
+    return acc + str.charAt(index);
+}, '');

package/dist/collection/common/yugop/index.js

@@ -0,0 +1,3 @@
+// taken from https://github.com/zenoplex/random-text
+// @flow
+export { default } from './random-text';

package/dist/collection/common/yugop/random-text.js

@@ -0,0 +1,59 @@
+import { generateRandomCharCodeArray, charCodeArrayToString } from "./core";
+import { noop } from "./utils/noop";
+class RandomText {
+    constructor(options) {
+        this.start = () => {
+            const { frameOffset, charOffset, str, speed } = this;
+            const randoms = generateRandomCharCodeArray(frameOffset, charOffset)(str);
+            this.stop();
+            this.rafId = requestAnimationFrame(() => {
+                this.step(randoms, speed, speed);
+            });
+        };
+        Object.assign(this, Object.assign(Object.assign({}, RandomText.defaults), options));
+    }
+    stop() {
+        cancelAnimationFrame(this.rafId);
+    }
+    step(randoms, stepCount, speed) {
+        const { str, charStep, minCharCode, maxCharCode, placeholderChar, onProgress, onComplete, } = this;
+        const stepArray = randoms.slice(0, stepCount);
+        const steppedArray = stepArray.map(item => {
+            if (item > 0)
+                return item - 1;
+            if (item < 0)
+                return item + 1;
+            return 0;
+        });
+        const output = charCodeArrayToString({
+            str,
+            minCharCode,
+            maxCharCode,
+            placeholderChar,
+            charStep,
+        })(steppedArray);
+        const updatedRandoms = [...steppedArray, ...randoms.slice(stepCount)];
+        onProgress(output);
+        if (output !== str) {
+            this.rafId = requestAnimationFrame(() => {
+                this.step(updatedRandoms, stepCount + speed, speed);
+            });
+        }
+        else {
+            onComplete(output);
+        }
+    }
+}
+RandomText.defaults = {
+    str: '',
+    speed: 2,
+    placeholderChar: '_',
+    frameOffset: 30,
+    charOffset: 20,
+    charStep: 10,
+    minCharCode: 32,
+    maxCharCode: 122,
+    onProgress: noop,
+    onComplete: noop,
+};
+export default RandomText;

package/dist/collection/common/yugop/utils/math.js

@@ -0,0 +1,11 @@
+import { generator } from "./prng";
+const rand = generator();
+export const randomSign = () => (Math.round(Math.random()) - 0.5) * 2;
+export const generateRandomNumbers = base => charOffset => length => [...Array(length)].map(() => (base + rand.range(0, charOffset)) * randomSign());
+export const minMaxLooped = (min, max) => value => {
+    if (value > max)
+        return min + (value - max);
+    if (value < min)
+        return max + (value - min);
+    return value;
+};

package/dist/collection/common/yugop/utils/noop.js

@@ -0,0 +1 @@
+export const noop = () => { };

package/dist/collection/common/yugop/utils/prng.js

@@ -0,0 +1,21 @@
+const int32 = 2147483647;
+const gen = v => (v * 16807) % int32;
+const randomFloat = v => gen(v) / int32;
+const randomInt = v => gen(v);
+export const generator = (seed = 1) => {
+    let value = seed < 1 ? 1 : seed;
+    const next = () => {
+        value = randomInt(value);
+        return value;
+    };
+    return {
+        random: () => next(),
+        randomFloat: () => randomFloat(next()),
+        range: (min, max) => {
+            const minimum = min - 0.4999;
+            const maximum = max + 0.4999;
+            return Math.round(minimum + (maximum - minimum) * randomFloat(next()));
+        },
+        rangeFloat: (min, max) => min + (max - min) * randomFloat(next()),
+    };
+};

package/dist/collection/common/yugop/utils/string.js

@@ -0,0 +1,2 @@
+// export const strToCharCodeArray: string => number[] = str => str.split('').map(item => item.charCodeAt(0));
+export const strToCharCodeArray = str => str.split('').map(item => item.charCodeAt(0));

package/dist/collection/components/mds-paginator-item/mds-paginator-item.css

@@ -1,14 +1,27 @@
 @keyframes focus-bounce {
   0%, 75%, 100% {
-    outline-offset: var(--magma-outline-focus-offset);
+    outline-offset: var(--magma-outline-focus-offset, 6px);
   }
 
   50% {
-    outline-offset: var(--magma-outline-blur-offset);
+    outline-offset: var(--magma-outline-blur-offset, 2px);
   }
 }
  /* included for focus effect */
 @tailwind components;
+
+.svg {
+  display: flex;
+}
+
+.svg svg {
+  aspect-ratio: 1/1;
+  height: 100%;
+  width: 100%;
+}
+.static {
+  position: static;
+}
 .fixed {
   position: fixed;
 }
@@ -18,6 +31,116 @@
 .border {
   border-width: 1px;
 }
+.bg-label-amaranth-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));
+}
+.bg-label-aqua-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));
+}
+.bg-label-blue-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));
+}
+.bg-label-green-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));
+}
+.bg-label-lime-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));
+}
+.bg-label-orange-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));
+}
+.bg-label-orchid-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));
+}
+.bg-label-violet-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));
+}
+.bg-label-yellow-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));
+}
+.bg-tone-neutral-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));
+}
+.fill-label-amaranth-04 {
+  fill: rgb(var(--label-amaranth-04));
+}
+.fill-label-aqua-04 {
+  fill: rgb(var(--label-aqua-04));
+}
+.fill-label-blue-04 {
+  fill: rgb(var(--label-blue-04));
+}
+.fill-label-green-04 {
+  fill: rgb(var(--label-green-04));
+}
+.fill-label-lime-04 {
+  fill: rgb(var(--label-lime-04));
+}
+.fill-label-orange-04 {
+  fill: rgb(var(--label-orange-04));
+}
+.fill-label-orchid-04 {
+  fill: rgb(var(--label-orchid-04));
+}
+.fill-label-violet-04 {
+  fill: rgb(var(--label-violet-04));
+}
+.fill-label-yellow-04 {
+  fill: rgb(var(--label-yellow-04));
+}
+.fill-tone-neutral-04 {
+  fill: rgb(var(--tone-neutral-04));
+}
+.text-label-amaranth-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));
+}
+.text-label-aqua-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));
+}
+.text-label-blue-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));
+}
+.text-label-green-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-green-04) / var(--tw-text-opacity));
+}
+.text-label-lime-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));
+}
+.text-label-orange-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));
+}
+.text-label-orchid-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));
+}
+.text-label-violet-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));
+}
+.text-label-yellow-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));
+}
+.text-tone-neutral-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));
+}
 .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);

package/dist/collection/components/mds-paginator-item/mds-paginator-item.js

@@ -6,17 +6,6 @@ import { KeyboardManager } from "../../common/keyboard-manager";
 export class MdsPaginatorItem {
     constructor() {
         this.km = new KeyboardManager();
-        this.componentDidLoad = () => {
-            this.km.addElement(this.host);
-            this.km.attachClickBehavior();
-        };
-        this.componentDidUpdate = () => {
-            if (!this.disabled && !this.selected) {
-                this.km.attachClickBehavior();
-                return;
-            }
-            this.km.detachClickBehavior();
-        };
         this.disconnectedCallback = () => {
             this.km.detachClickBehavior();
         };
@@ -24,6 +13,17 @@ export class MdsPaginatorItem {
         this.selected = undefined;
         this.disabled = undefined;
     }
+    componentDidLoad() {
+        this.km.addElement(this.host);
+        this.km.attachClickBehavior();
+    }
+    componentDidUpdate() {
+        if (!this.disabled && !this.selected) {
+            this.km.attachClickBehavior();
+            return;
+        }
+        this.km.detachClickBehavior();
+    }
     render() {
         return (h(Host, { tabindex: "0" }, this.icon !== undefined
             ? h("mds-icon", { name: this.icon })