@maggioli-design-system/mds-table-row 4.5.3 → 4.6.0

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7b6fb148.js');
+const index = require('./index-97006570.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
-const defineCustomElements = (win, options) => {
+const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
   return index.bootstrapLazy([["mds-table-row.cjs",[[1,"mds-table-row",{"interactive":[1540]},[[4,"mdsTableInteractiveChange","tableInteractiveHandler"]]]]]], options);
 };
 

package/dist/cjs/mds-table-row.cjs.entry.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7b6fb148.js');
+const index = require('./index-97006570.js');
 
-const mdsTableRowCss = ".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{display:table-row}:host([interactive]:hover){--mds-table-cell-background:var(--mds-table-cell-background-hover, rgb(var(--tone-neutral)))}";
+const mdsTableRowCss = "@tailwind utilities;\n\n:host {\n\n  --mds-table-row-color-hover: var(--mds-table-color-hover, rgb(var(--tone-neutral-02)));\n  --mds-table-row-color: var(--mds-table-color, rgb(var(--tone-neutral-03)));\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  color: var(--mds-table-row-color);\n  display: table-row;\n  -webkit-transition-property: color;\n  transition-property: color;\n\n}\n\n:host( [interactive]:hover ) {\n\n  --mds-table-cell-background: var(--mds-table-cell-background-hover, rgb(var(--tone-neutral)));\n  --mds-table-row-color: var(--mds-table-row-color-hover);\n}\n\n.static{\n\n  position: static;\n\n}\n\n.fixed{\n\n  position: fixed;\n\n}\n\n.absolute{\n\n  position: absolute;\n\n}\n\n.border{\n\n  border-width: 1px;\n\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\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\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\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\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\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\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\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\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\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\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n\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\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\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\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\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\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\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\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\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\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\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\n@container style(--magma-pref-animation: reduce) {\n  :host {\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      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
+const MdsTableRowStyle0 = mdsTableRowCss;
 
 const MdsTableRow = class {
     constructor(hostRef) {
@@ -15,9 +16,9 @@ const MdsTableRow = class {
         this.interactive = event.detail;
     }
     render() {
-        return (index.h(index.Host, { role: "row" }, index.h("slot", null)));
+        return (index.h(index.Host, { key: 'f787fed43a18242c2d9ddfa0fbd383e88b436dc5', role: "row" }, index.h("slot", { key: 'b78bf7f2a6b59a044c041a441ce8b7709b09cd39' })));
     }
 };
-MdsTableRow.style = mdsTableRowCss;
+MdsTableRow.style = MdsTableRowStyle0;
 
 exports.mds_table_row = MdsTableRow;

package/dist/cjs/mds-table-row.cjs.js

@@ -2,21 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7b6fb148.js');
+const index = require('./index-97006570.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v4.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.21.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-table-row.cjs.js', document.baseURI).href));
-    const opts = {};
-    if (importMeta !== '') {
-        opts.resourcesUrl = new URL('.', importMeta).href;
-    }
-    return index.promiseResolve(opts);
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-table-row.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
 };
 
-patchBrowser().then(options => {
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
   return index.bootstrapLazy([["mds-table-row.cjs",[[1,"mds-table-row",{"interactive":[1540]},[[4,"mdsTableInteractiveChange","tableInteractiveHandler"]]]]]], options);
 });
 

package/dist/collection/collection-manifest.json

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

package/dist/collection/common/locale.js

@@ -0,0 +1,50 @@
+import Handlebars from "handlebars";
+export class Locale {
+    constructor(configData) {
+        this.defaultLanguage = 'en';
+        this.lang = (element) => {
+            const closestElement = element.closest('[lang]');
+            if (closestElement) {
+                if (closestElement.lang) {
+                    this.language = closestElement.lang;
+                    return;
+                }
+            }
+            this.language = this.defaultLanguage;
+        };
+        this.pluralize = (tag, context) => {
+            var _a;
+            const languagePhrase = (_a = this.config[this.language][tag]) !== null && _a !== void 0 ? _a : this.config[this.defaultLanguage][tag];
+            const phrases = [];
+            if (Array.isArray(languagePhrase)) {
+                phrases.push(languagePhrase[0]);
+                phrases.push(languagePhrase[1]);
+            }
+            else {
+                phrases.push(languagePhrase);
+                phrases.push(languagePhrase);
+            }
+            const [defaultPhrase] = phrases;
+            let translatePhrase = defaultPhrase;
+            const keys = Object.keys(context);
+            if (keys.length > 0) {
+                const [firstKey] = keys;
+                if (typeof context[firstKey] === 'number') {
+                    if (context[firstKey] !== 1) {
+                        translatePhrase = phrases[1];
+                    }
+                }
+            }
+            const template = Handlebars.compile(translatePhrase);
+            return template(context);
+        };
+        this.get = (tag, context) => {
+            var _a;
+            if (context) {
+                return this.pluralize(tag, context);
+            }
+            return (_a = this.config[this.language][tag]) !== null && _a !== void 0 ? _a : this.config[this.defaultLanguage][tag];
+        };
+        this.config = configData;
+    }
+}

package/dist/collection/components/mds-table-row/mds-table-row.css

@@ -1,170 +1,290 @@
-.static {
+@tailwind utilities;
+
+:host {
+
+  --mds-table-row-color-hover: var(--mds-table-color-hover, rgb(var(--tone-neutral-02)));
+  --mds-table-row-color: var(--mds-table-color, rgb(var(--tone-neutral-03)));
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+
+  color: var(--mds-table-row-color);
+  display: table-row;
+  transition-property: color;
+
+}
+
+:host( [interactive]:hover ) {
+
+  --mds-table-cell-background: var(--mds-table-cell-background-hover, rgb(var(--tone-neutral)));
+  --mds-table-row-color: var(--mds-table-row-color-hover);
+}
+
+.static{
+
   position: static;
+
 }
 
-.fixed {
+.fixed{
+
   position: fixed;
+
 }
 
-.absolute {
+.absolute{
+
   position: absolute;
+
 }
 
-.border {
+.border{
+
   border-width: 1px;
+
 }
 
-.bg-label-amaranth-10 {
+.bg-label-amaranth-10{
+
   --tw-bg-opacity: 1;
+
   background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));
+
 }
 
-.bg-label-aqua-10 {
+.bg-label-aqua-10{
+
   --tw-bg-opacity: 1;
+
   background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));
+
 }
 
-.bg-label-blue-10 {
+.bg-label-blue-10{
+
   --tw-bg-opacity: 1;
+
   background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));
+
 }
 
-.bg-label-green-10 {
+.bg-label-green-10{
+
   --tw-bg-opacity: 1;
+
   background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));
+
 }
 
-.bg-label-lime-10 {
+.bg-label-lime-10{
+
   --tw-bg-opacity: 1;
+
   background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));
+
 }
 
-.bg-label-orange-10 {
+.bg-label-orange-10{
+
   --tw-bg-opacity: 1;
+
   background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));
+
 }
 
-.bg-label-orchid-10 {
+.bg-label-orchid-10{
+
   --tw-bg-opacity: 1;
+
   background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));
+
 }
 
-.bg-label-violet-10 {
+.bg-label-violet-10{
+
   --tw-bg-opacity: 1;
+
   background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));
+
 }
 
-.bg-label-yellow-10 {
+.bg-label-yellow-10{
+
   --tw-bg-opacity: 1;
+
   background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));
+
 }
 
-.bg-tone-neutral-10 {
+.bg-tone-neutral-10{
+
   --tw-bg-opacity: 1;
+
   background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));
+
 }
 
-.fill-label-amaranth-04 {
+.fill-label-amaranth-04{
+
   fill: rgb(var(--label-amaranth-04));
+
 }
 
-.fill-label-aqua-04 {
+.fill-label-aqua-04{
+
   fill: rgb(var(--label-aqua-04));
+
 }
 
-.fill-label-blue-04 {
+.fill-label-blue-04{
+
   fill: rgb(var(--label-blue-04));
+
 }
 
-.fill-label-green-04 {
+.fill-label-green-04{
+
   fill: rgb(var(--label-green-04));
+
 }
 
-.fill-label-lime-04 {
+.fill-label-lime-04{
+
   fill: rgb(var(--label-lime-04));
+
 }
 
-.fill-label-orange-04 {
+.fill-label-orange-04{
+
   fill: rgb(var(--label-orange-04));
+
 }
 
-.fill-label-orchid-04 {
+.fill-label-orchid-04{
+
   fill: rgb(var(--label-orchid-04));
+
 }
 
-.fill-label-violet-04 {
+.fill-label-violet-04{
+
   fill: rgb(var(--label-violet-04));
+
 }
 
-.fill-label-yellow-04 {
+.fill-label-yellow-04{
+
   fill: rgb(var(--label-yellow-04));
+
 }
 
-.fill-tone-neutral-04 {
+.fill-tone-neutral-04{
+
   fill: rgb(var(--tone-neutral-04));
+
 }
 
-.text-label-amaranth-04 {
+.text-label-amaranth-04{
+
   --tw-text-opacity: 1;
+
   color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));
+
 }
 
-.text-label-aqua-04 {
+.text-label-aqua-04{
+
   --tw-text-opacity: 1;
+
   color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));
+
 }
 
-.text-label-blue-04 {
+.text-label-blue-04{
+
   --tw-text-opacity: 1;
+
   color: rgb(var(--label-blue-04) / var(--tw-text-opacity));
+
 }
 
-.text-label-green-04 {
+.text-label-green-04{
+
   --tw-text-opacity: 1;
+
   color: rgb(var(--label-green-04) / var(--tw-text-opacity));
+
 }
 
-.text-label-lime-04 {
+.text-label-lime-04{
+
   --tw-text-opacity: 1;
+
   color: rgb(var(--label-lime-04) / var(--tw-text-opacity));
+
 }
 
-.text-label-orange-04 {
+.text-label-orange-04{
+
   --tw-text-opacity: 1;
+
   color: rgb(var(--label-orange-04) / var(--tw-text-opacity));
+
 }
 
-.text-label-orchid-04 {
+.text-label-orchid-04{
+
   --tw-text-opacity: 1;
+
   color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));
+
 }
 
-.text-label-violet-04 {
+.text-label-violet-04{
+
   --tw-text-opacity: 1;
+
   color: rgb(var(--label-violet-04) / var(--tw-text-opacity));
+
 }
 
-.text-label-yellow-04 {
+.text-label-yellow-04{
+
   --tw-text-opacity: 1;
+
   color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));
+
 }
 
-.text-tone-neutral-04 {
+.text-tone-neutral-04{
+
   --tw-text-opacity: 1;
+
   color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));
+
 }
 
-.shadow {
+.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);
+
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
 }
 
-:host {
-  display: table-row;
+@container style(--magma-pref-animation: reduce) {
+  :host {
+    transition-duration: 0s;
+  }
 }
 
-:host( [interactive]:hover ) {
+@container style(--magma-pref-animation: system) {
 
-  --mds-table-cell-background: var(--mds-table-cell-background-hover, rgb(var(--tone-neutral)));
+  @media (prefers-reduced-motion) {
+    :host {
+      transition-duration: 0s;
+    }
+  }
 }
+

package/dist/collection/components/mds-table-row/mds-table-row.js

@@ -10,7 +10,7 @@ export class MdsTableRow {
         this.interactive = event.detail;
     }
     render() {
-        return (h(Host, { role: "row" }, h("slot", null)));
+        return (h(Host, { key: 'f787fed43a18242c2d9ddfa0fbd383e88b436dc5', role: "row" }, h("slot", { key: 'b78bf7f2a6b59a044c041a441ce8b7709b09cd39' })));
     }
     static get is() { return "mds-table-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/type/preference.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/type/variant-file-format.js

@@ -4,6 +4,15 @@ import baselineAudiotrack from "@icon/mi/baseline/audiotrack.svg";
 import baselineTerminal from "@icon/mi/baseline/terminal.svg";
 import baselineInsertDriveFile from "@icon/mi/baseline/insert-drive-file.svg";
 import mdiHardDisk from "@icon/mdi/harddisk.svg";
+import baselineEmail from "@icon/mi/baseline/email.svg";
+import baselineWysiwyg from "@icon/mi/baseline/wysiwyg.svg";
+import baselinePanorama from "@icon/mi/baseline/panorama.svg";
+import baselineWeb from "@icon/mi/baseline/web.svg";
+import baselineTV from "@icon/mi/baseline/tv.svg";
+import baselineBorderAll from "@icon/mi/baseline/border-all.svg";
+import baselineDescription from "@icon/mi/baseline/description.svg";
+import mdiVectorCurve from "@icon/mdi/vector-curve.svg";
+import baselineVideocam from "@icon/mi/baseline/videocam.svg";
 const fileFormatsVariant = {
     archive: {
         color: 'fill-label-amaranth-04 text-label-amaranth-04',
@@ -43,67 +52,67 @@ const fileFormatsVariant = {
     },
     email: {
         color: 'fill-label-blue-04 text-label-blue-04',
-        icon: 'mi/baseline/email',
+        icon: baselineEmail,
         iconBackground: 'bg-label-blue-10',
         variant: 'blue',
     },
     executable: {
         color: 'fill-label-amaranth-04 text-label-amaranth-04',
-        icon: 'mi/baseline/wysiwyg',
+        icon: baselineWysiwyg,
         iconBackground: 'bg-label-amaranth-10',
         variant: 'amaranth',
     },
     image: {
         color: 'fill-label-green-04 text-label-green-04',
-        icon: 'mi/baseline/panorama',
+        icon: baselinePanorama,
         iconBackground: 'bg-label-green-10',
         variant: 'green',
     },
     imageRaster: {
         color: 'fill-label-green-04 text-label-green-04',
-        icon: 'mi/baseline/panorama',
+        icon: baselinePanorama,
         iconBackground: 'bg-label-green-10',
         variant: 'green',
     },
     markup: {
         color: 'fill-label-yellow-04 text-label-yellow-04',
-        icon: 'mi/baseline/web',
+        icon: baselineWeb,
         iconBackground: 'bg-label-yellow-10',
         variant: 'yellow',
     },
     slide: {
         color: 'fill-label-orchid-04 text-label-orchid-04',
-        icon: 'mi/baseline/tv',
+        icon: baselineTV,
         iconBackground: 'bg-label-orchid-10',
         variant: 'orchid',
     },
     spreadsheet: {
         color: 'fill-label-lime-04 text-label-lime-04',
-        icon: 'mi/baseline/border-all',
+        icon: baselineBorderAll,
         iconBackground: 'bg-label-lime-10',
         variant: 'lime',
     },
     text: {
         color: 'fill-label-blue-04 text-label-blue-04',
-        icon: 'mi/baseline/description',
+        icon: baselineDescription,
         iconBackground: 'bg-label-blue-10',
         variant: 'blue',
     },
     vectorImage: {
         color: 'fill-label-aqua-04 text-label-aqua-04',
-        icon: 'mdi/vector-curve',
+        icon: mdiVectorCurve,
         iconBackground: 'bg-label-aqua-10',
         variant: 'aqua',
     },
     vector: {
         color: 'fill-label-aqua-04 text-label-aqua-04',
-        icon: 'mdi/vector-curve',
+        icon: mdiVectorCurve,
         iconBackground: 'bg-label-aqua-10',
         variant: 'aqua',
     },
     video: {
         color: 'fill-label-violet-04 text-label-violet-04',
-        icon: 'mi/baseline/videocam',
+        icon: baselineVideocam,
         iconBackground: 'bg-label-violet-10',
         variant: 'violet',
     },

package/dist/components/mds-table-row.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const mdsTableRowCss = ".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{display:table-row}:host([interactive]:hover){--mds-table-cell-background:var(--mds-table-cell-background-hover, rgb(var(--tone-neutral)))}";
+const mdsTableRowCss = "@tailwind utilities;\n\n:host {\n\n  --mds-table-row-color-hover: var(--mds-table-color-hover, rgb(var(--tone-neutral-02)));\n  --mds-table-row-color: var(--mds-table-color, rgb(var(--tone-neutral-03)));\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  color: var(--mds-table-row-color);\n  display: table-row;\n  -webkit-transition-property: color;\n  transition-property: color;\n\n}\n\n:host( [interactive]:hover ) {\n\n  --mds-table-cell-background: var(--mds-table-cell-background-hover, rgb(var(--tone-neutral)));\n  --mds-table-row-color: var(--mds-table-row-color-hover);\n}\n\n.static{\n\n  position: static;\n\n}\n\n.fixed{\n\n  position: fixed;\n\n}\n\n.absolute{\n\n  position: absolute;\n\n}\n\n.border{\n\n  border-width: 1px;\n\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\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\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\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\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\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\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\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\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\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\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n\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\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\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\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\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\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\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\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\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\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\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\n@container style(--magma-pref-animation: reduce) {\n  :host {\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      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
+const MdsTableRowStyle0 = mdsTableRowCss;
 
 const MdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(class MdsTableRow extends HTMLElement {
     constructor() {
@@ -13,9 +14,9 @@ const MdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(class MdsTableRow extends
         this.interactive = event.detail;
     }
     render() {
-        return (h(Host, { role: "row" }, h("slot", null)));
+        return (h(Host, { key: 'f787fed43a18242c2d9ddfa0fbd383e88b436dc5', role: "row" }, h("slot", { key: 'b78bf7f2a6b59a044c041a441ce8b7709b09cd39' })));
     }
-    static get style() { return mdsTableRowCss; }
+    static get style() { return MdsTableRowStyle0; }
 }, [1, "mds-table-row", {
         "interactive": [1540]
     }, [[4, "mdsTableInteractiveChange", "tableInteractiveHandler"]]]);