@maggioli-design-system/magma 1.0.0-beta → 1.0.1

package/dist/components/mds-table-header-cell.js

@@ -9,13 +9,13 @@ import { d as defineCustomElement$2 } from './mds-text2.js';
 
 const miBaselineUnfoldMore = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9L12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15L12 18.17z"/></svg>`;
 
-const mdsTableHeaderCellCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-table-header-cell-padding: The padding of the table cell\n */\n\n:host {\n\n  --mds-table-header-cell-padding: 0.5rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  background-color: var(--mds-table-cell-background);\n  border-bottom: var(--mds-table-cell-border-width) solid var(--mds-table-cell-border-color) !important;\n  border-top: var(--mds-table-cell-border-width) solid transparent !important;\n  display: table-cell;\n  padding: var(--mds-table-header-cell-padding);\n  -webkit-transition-property: background-color, border-color, color;\n  transition-property: background-color, border-color, color;\n  vertical-align: top;\n}\n\n.action {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.action::part(label) {\n  min-height: 1rem;\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-weight: 700;\n  text-transform: uppercase;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.label {\n  height: 1.75rem;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\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 mdsTableHeaderCellCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-table-header-cell-padding: The padding of the table cell\n */\n\n:host {\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  background-color: var(--mds-table-background);\n  border-bottom: var(--mds-table-cell-border-width) solid var(--mds-table-cell-border-color) !important;\n  border-top: var(--mds-table-cell-border-width) solid transparent !important;\n  display: table-cell;\n  padding: var(--mds-table-cell-padding);\n  -webkit-transition-property: background-color, border-color, color;\n  transition-property: background-color, border-color, color;\n  vertical-align: top;\n}\n\n.action {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.action::part(label) {\n  min-height: 1rem;\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-weight: 700;\n  text-transform: uppercase;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.label {\n  height: 1.75rem;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\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 MdsTableHeaderCellStyle0 = mdsTableHeaderCellCss;
 
 var Sort;
 (function (Sort) {
-    Sort["ASC"] = "asc";
-    Sort["DESC"] = "desc";
+    Sort["ASC"] = "ascending";
+    Sort["DESC"] = "descending";
     Sort["NONE"] = "none";
 })(Sort || (Sort = {}));
 const MdsTableHeaderCell$1 = /*@__PURE__*/ proxyCustomElement(class MdsTableHeaderCell extends HTMLElement {
@@ -69,9 +69,9 @@ const MdsTableHeaderCell$1 = /*@__PURE__*/ proxyCustomElement(class MdsTableHead
                 const cellB = this.getValue(b.querySelectorAll('mds-table-cell')[this.index]);
                 const isNumeric = !isNaN(Number(cellA)) && !isNaN(Number(cellB));
                 if (isNumeric) {
-                    return this.direction === 'asc' ? Number(cellA) - Number(cellB) : Number(cellB) - Number(cellA);
+                    return this.direction === 'ascending' ? Number(cellA) - Number(cellB) : Number(cellB) - Number(cellA);
                 }
-                return this.direction === 'asc' ? String(cellA).localeCompare(String(cellB)) : String(cellB).localeCompare(String(cellA));
+                return this.direction === 'ascending' ? String(cellA).localeCompare(String(cellB)) : String(cellB).localeCompare(String(cellA));
             });
             sortedRows.forEach(row => this.tableBody.appendChild(row));
         };
@@ -111,8 +111,8 @@ const MdsTableHeaderCell$1 = /*@__PURE__*/ proxyCustomElement(class MdsTableHead
         }
     }
     render() {
-        return (h(Host, { key: 'd74e353b01b4a9bda45eef16a4edec0c49a0c62f' }, this.sortable
-            ? h("mds-button", { class: "action", icon: clsx(this.direction === 'none' && miBaselineUnfoldMore, this.direction === 'asc' && miBaselineKeyboardArrowUp, this.direction === 'desc' && miBaselineKeyboardArrowDown), "icon-position": "right", onClick: this.sort, tone: "quiet", variant: "dark", size: "sm", part: "action" }, this.label)
+        return (h(Host, { key: '3d17c76c086828a39ad0090acabbebb3ea449198', role: "columnheader", "aria-sort": this.direction }, this.sortable
+            ? h("mds-button", { class: "action", icon: clsx(this.direction === 'none' && miBaselineUnfoldMore, this.direction === 'ascending' && miBaselineKeyboardArrowUp, this.direction === 'descending' && miBaselineKeyboardArrowDown), "icon-position": "right", onClick: this.sort, tone: "quiet", variant: "dark", size: "sm", part: "action" }, this.label)
             : h("mds-text", { class: "label", typography: "label", part: "label" }, this.label)));
     }
     get element() { return this; }

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

@@ -1,6 +1,13 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.js';
 
-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([sorted][interactive]:not([interactive=\"false\"])) ::slotted(mds-table-cell[sorted]) {\n\n  --mds-table-cell-background: var(--mds-table-cell-background-hover);\n}\n\n:host([sorted][interactive]:not([interactive=\"false\"])) ::slotted(mds-table-cell:not([sorted])) {\n\n  --mds-table-cell-background: var(--mds-table-body-background-hover);\n}\n\n:host([interactive]:not([interactive=\"false\"]):hover) {\n\n  --mds-table-cell-background: var(--mds-table-cell-background-hover);\n  --mds-table-row-color: var(--mds-table-row-color-hover);\n}\n\n\n:host([sorted][interactive]:not([interactive=\"false\"]):hover) ::slotted(mds-table-cell:not([sorted])) {\n\n  --mds-table-cell-background: var(--mds-table-cell-background-hover);\n}\n\n:host([sorted]:not([interactive])) ::slotted(mds-table-cell:not([sorted])) {\n\n  --mds-table-cell-background: var(--mds-table-body-background-hover);\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 isMobileDevice = () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    return /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
+};
+
+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  --mds-table-row-actions-gap: var(--mds-table-actions-gap, 1rem);\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  position: relative;\n  -webkit-transition-property: color;\n  transition-property: color;\n\n}\n\n.actions-wrapper {\n  inset: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: end;\n  justify-content: end;\n  pointer-events: none;\n  position: absolute;\n}\n\n.actions {\n  -ms-flex-align: center;\n  align-items: center;\n  background-color: var(--mds-table-cell-background);\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: var(--mds-table-border-width);\n  border-top-color: var(--mds-table-border-color);\n  border-top-style: solid;\n  border-top-width: var(--mds-table-border-width);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  gap: var(--mds-table-row-actions-gap);\n  height: 100%;\n  margin-top: calc(var(--mds-table-border-width) * -1);\n  padding: var(--mds-table-cell-padding);\n  pointer-events: auto;\n  position: -webkit-sticky;\n  position: sticky;\n  right: 0;\n  -webkit-transform: translateX(100%);\n  transform: translateX(100%);\n  -webkit-transition-duration: 500ms;\n  transition-duration: 500ms;\n  -webkit-transition-property: background-color, -webkit-transform;\n  transition-property: background-color, -webkit-transform;\n  transition-property: transform, background-color;\n  transition-property: transform, background-color, -webkit-transform;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.actions-wrapper--mobile {\n  position: relative;\n}\n\n.actions-wrapper--mobile .actions {\n  position: static;\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host(:hover) .actions {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([overlay-actions]:not([overlay-actions=\"false\"])) .actions-wrapper:not(.actions-wrapper--mobile) .actions {\n  -webkit-transform: translateX(100%);\n  transform: translateX(100%);\n}\n\n:host([interactive]:not([interactive=\"false\"])) .actions {\n  --mds-table-cell-background: var(--mds-table-body-background);\n}\n\n:host([interactive]:not([interactive=\"false\"]):hover) .actions {\n  --mds-table-cell-background: var(--mds-table-cell-background-hover);\n}\n\n:host([sorted][interactive]:not([interactive=\"false\"])) ::slotted(mds-table-cell[sorted]) {\n\n  --mds-table-cell-background: var(--mds-table-cell-background-hover);\n}\n\n:host([sorted][interactive]:not([interactive=\"false\"])) ::slotted(mds-table-cell:not([sorted])) {\n\n  --mds-table-cell-background: var(--mds-table-body-background-hover);\n}\n\n:host([interactive]:not([interactive=\"false\"]):hover) {\n\n  --mds-table-cell-background: var(--mds-table-cell-background-hover);\n  --mds-table-row-color: var(--mds-table-row-color-hover);\n}\n\n\n:host([sorted][interactive]:not([interactive=\"false\"]):hover) ::slotted(mds-table-cell:not([sorted])) {\n\n  --mds-table-cell-background: var(--mds-table-cell-background-hover);\n}\n\n:host([sorted]:not([interactive])) ::slotted(mds-table-cell:not([sorted])) {\n\n  --mds-table-cell-background: var(--mds-table-body-background-hover);\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 {
@@ -9,16 +16,23 @@ const MdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(class MdsTableRow extends
         this.__registerHost();
         this.__attachShadow();
         this.interactive = undefined;
+        this.overlayActions = undefined;
     }
     tableInteractiveHandler(event) {
         this.interactive = event.detail;
     }
+    componentWillLoad() {
+        this.actions = this.host.querySelector('[slot="action"]') !== null;
+    }
     render() {
-        return (h(Host, { key: '283e13bdc34ec2c034de9e422a3ad57ff023585e', role: "row" }, h("slot", { key: 'e0682272fcada8ee3afcf71e350d6a40c3ee6c82' })));
+        return (h(Host, { key: 'a336d00d38f7ced41c3febcb4b0c2c106ed61ca9', role: "row" }, h("slot", { key: 'a0a251d24deb3b7655613f6d15c118386db1bcba' }), this.actions
+            && h("div", { key: 'bebaef82204a44ac50487875a9f7bfe18f473517', class: clsx('actions-wrapper', isMobileDevice() && 'actions-wrapper--mobile'), role: "cell" }, h("div", { key: '57f2f06b534858b3ca3fb7e9d50a7098d0c24856', class: "actions" }, h("slot", { key: '9d5aceec024928169a6fd221f93d3e87b2c47386', name: "action" })))));
     }
+    get host() { return this; }
     static get style() { return MdsTableRowStyle0; }
 }, [1, "mds-table-row", {
-        "interactive": [1540]
+        "interactive": [1540],
+        "overlayActions": [1540, "overlay-actions"]
     }, [[4, "mdsTableInteractiveChange", "tableInteractiveHandler"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/mds-table.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
 
-const mdsTableCss = "@tailwind utilities;\n\n/**\n * @prop --mds-table-background: The background-color of the table\n * @prop --mds-table-body-background-hover: The background-color of the table body when the mouse is over it\n * @prop --mds-table-body-background: The background-color of the table body\n * @prop --mds-table-border-color: The border-color of the table\n * @prop --mds-table-border-width: The border-width of the table\n * @prop --mds-table-cell-background-hover: The background-color of the table cell when the mouse is over it\n * @prop --mds-table-cell-background: The background-color of the table cell\n * @prop --mds-table-cell-border-color: The border-color of the table cell\n * @prop --mds-table-cell-border-width: The border-width of the table cell\n * @prop --mds-table-cell-padding: The padding of the table cell\n */\n\n:host {\n\n  --mds-table-background: rgb(var(--tone-neutral));\n  --mds-table-body-background-hover: rgb(var(--tone-neutral-10));\n  --mds-table-body-background: var(--mds-table-background);\n  --mds-table-border-color: rgb(var(--tone-neutral-08));\n  --mds-table-border-width: 2px;\n  --mds-table-cell-background-hover: var(--mds-table-background);\n  --mds-table-cell-background: transparent;\n  --mds-table-cell-border-color: var(--mds-table-border-color);\n  --mds-table-cell-border-width: var(--mds-table-border-width);\n  --mds-table-cell-padding: 1rem;\n  --mds-table-color-hover: rgb(var(--tone-neutral-02));\n  --mds-table-color: rgb(var(--tone-neutral-03));\n  --mds-table-row-color-hover: var(--mds-table-body-background-hover);\n  --mds-table-row-color: var(--mds-table-color);\n  border-radius: 1rem;\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  background-color: var(--mds-table-background);\n  border: var(--mds-table-border-width) solid var(--mds-table-border-color) !important;\n  border-color: var(--mds-table-border-color);\n  display: -ms-flexbox;\n  display: flex;\n  overflow: auto;\n  -webkit-transition-property: background-color, border-color, color;\n  transition-property: background-color, border-color, color;\n}\n\n.table {\n  border-collapse: collapse;\n  width: 100%;\n}\n\n@tailwind utilities;\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@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-table-background: rgb(var(--tone-neutral-08));\n    --mds-table-body-background-hover: rgb(var(--tone-neutral-10));\n    --mds-table-border-color: rgb(var(--tone-neutral-07));\n    --mds-table-color-hover: rgb(var(--tone-neutral-02));\n    --mds-table-color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-table-background: rgb(var(--tone-neutral-08));\n      --mds-table-body-background-hover: rgb(var(--tone-neutral-10));\n      --mds-table-border-color: rgb(var(--tone-neutral-07));\n      --mds-table-color-hover: rgb(var(--tone-neutral-02));\n      --mds-table-color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-table-background: rgb(var(--tone-neutral));\n    --mds-table-body-background-hover: rgb(var(--tone-neutral-09));\n    --mds-table-border-color: rgb(var(--tone-neutral-06));\n    --mds-table-color-hover: rgb(var(--tone-neutral-01));\n    --mds-table-color: rgb(var(--tone-neutral-02));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-table-background: rgb(var(--tone-neutral));\n      --mds-table-body-background-hover: rgb(var(--tone-neutral-09));\n      --mds-table-border-color: rgb(var(--tone-neutral-06));\n      --mds-table-color-hover: rgb(var(--tone-neutral-01));\n      --mds-table-color: rgb(var(--tone-neutral-02));\n    }\n  }\n}\n\n/* dark mode */\n\n@container style(--magma-pref-contrast: more) and style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-table-background: rgb(var(--tone-neutral-08));\n    --mds-table-body-background-hover: rgb(var(--tone-neutral));\n    --mds-table-border-color: rgb(var(--tone-neutral-05));\n    --mds-table-color-hover: rgb(var(--tone-neutral-02));\n    --mds-table-color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: more) and style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-table-background: rgb(var(--tone-neutral-08));\n      --mds-table-body-background-hover: rgb(var(--tone-neutral));\n      --mds-table-border-color: rgb(var(--tone-neutral-05));\n      --mds-table-color-hover: rgb(var(--tone-neutral-02));\n      --mds-table-color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: system) and style(--magma-pref-theme: dark) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-table-background: rgb(var(--tone-neutral-08));\n      --mds-table-body-background-hover: rgb(var(--tone-neutral));\n      --mds-table-border-color: rgb(var(--tone-neutral-05));\n      --mds-table-color-hover: rgb(var(--tone-neutral-02));\n      --mds-table-color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: system) and style(--magma-pref-theme: system) {\n\n  @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-table-background: rgb(var(--tone-neutral-08));\n      --mds-table-body-background-hover: rgb(var(--tone-neutral));\n      --mds-table-border-color: rgb(var(--tone-neutral-05));\n      --mds-table-color-hover: rgb(var(--tone-neutral-02));\n      --mds-table-color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n";
+const mdsTableCss = "@tailwind utilities;\n\n/**\n * @prop --mds-table-background: The background-color of the table\n * @prop --mds-table-body-background-hover: The background-color of the table body when the mouse is over it\n * @prop --mds-table-body-background: The background-color of the table body\n * @prop --mds-table-border-color: The border-color of the table\n * @prop --mds-table-border-width: The border-width of the table\n * @prop --mds-table-cell-background-hover: The background-color of the table cell when the mouse is over it\n * @prop --mds-table-cell-background: The background-color of the table cell\n * @prop --mds-table-cell-border-color: The border-color of the table cell\n * @prop --mds-table-cell-border-width: The border-width of the table cell\n * @prop --mds-table-cell-padding: The padding of the table cell\n */\n\n:host {\n\n  --mds-table-background: rgb(var(--tone-neutral));\n  --mds-table-body-background-hover: rgb(var(--tone-neutral-10));\n  --mds-table-body-background: var(--mds-table-background);\n  --mds-table-border-color: rgb(var(--tone-neutral-08));\n  --mds-table-border-width: 2px;\n  --mds-table-cell-background-hover: var(--mds-table-background);\n  --mds-table-cell-background: transparent;\n  --mds-table-cell-border-color: var(--mds-table-border-color);\n  --mds-table-cell-border-width: var(--mds-table-border-width);\n  --mds-table-cell-padding: 1rem;\n  --mds-table-color-hover: rgb(var(--tone-neutral-02));\n  --mds-table-color: rgb(var(--tone-neutral-03));\n  --mds-table-actions-gap: 0.5rem;\n  border-radius: 1rem;\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  background-color: var(--mds-table-background);\n  border: var(--mds-table-border-width) solid var(--mds-table-border-color) !important;\n  border-color: var(--mds-table-border-color);\n  display: -ms-flexbox;\n  display: flex;\n  overflow: auto;\n  -webkit-transition-property: background-color, border-color, color;\n  transition-property: background-color, border-color, color;\n}\n\n.table {\n  border-collapse: separate;\n  border-spacing: 0;\n  width: 100%;\n}\n\n@tailwind utilities;\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@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-table-background: rgb(var(--tone-neutral-08));\n    --mds-table-body-background-hover: rgb(var(--tone-neutral-10));\n    --mds-table-border-color: rgb(var(--tone-neutral-07));\n    --mds-table-color-hover: rgb(var(--tone-neutral-02));\n    --mds-table-color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-table-background: rgb(var(--tone-neutral-08));\n      --mds-table-body-background-hover: rgb(var(--tone-neutral-10));\n      --mds-table-border-color: rgb(var(--tone-neutral-07));\n      --mds-table-color-hover: rgb(var(--tone-neutral-02));\n      --mds-table-color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-table-background: rgb(var(--tone-neutral));\n    --mds-table-body-background-hover: rgb(var(--tone-neutral-09));\n    --mds-table-border-color: rgb(var(--tone-neutral-06));\n    --mds-table-color-hover: rgb(var(--tone-neutral-01));\n    --mds-table-color: rgb(var(--tone-neutral-02));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-table-background: rgb(var(--tone-neutral));\n      --mds-table-body-background-hover: rgb(var(--tone-neutral-09));\n      --mds-table-border-color: rgb(var(--tone-neutral-06));\n      --mds-table-color-hover: rgb(var(--tone-neutral-01));\n      --mds-table-color: rgb(var(--tone-neutral-02));\n    }\n  }\n}\n\n/* dark mode */\n\n@container style(--magma-pref-contrast: more) and style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-table-background: rgb(var(--tone-neutral-08));\n    --mds-table-body-background-hover: rgb(var(--tone-neutral));\n    --mds-table-border-color: rgb(var(--tone-neutral-05));\n    --mds-table-color-hover: rgb(var(--tone-neutral-02));\n    --mds-table-color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: more) and style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-table-background: rgb(var(--tone-neutral-08));\n      --mds-table-body-background-hover: rgb(var(--tone-neutral));\n      --mds-table-border-color: rgb(var(--tone-neutral-05));\n      --mds-table-color-hover: rgb(var(--tone-neutral-02));\n      --mds-table-color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: system) and style(--magma-pref-theme: dark) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-table-background: rgb(var(--tone-neutral-08));\n      --mds-table-body-background-hover: rgb(var(--tone-neutral));\n      --mds-table-border-color: rgb(var(--tone-neutral-05));\n      --mds-table-color-hover: rgb(var(--tone-neutral-02));\n      --mds-table-color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: system) and style(--magma-pref-theme: system) {\n\n  @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-table-background: rgb(var(--tone-neutral-08));\n      --mds-table-body-background-hover: rgb(var(--tone-neutral));\n      --mds-table-border-color: rgb(var(--tone-neutral-05));\n      --mds-table-color-hover: rgb(var(--tone-neutral-02));\n      --mds-table-color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n";
 const MdsTableStyle0 = mdsTableCss;
 
 const MdsTable$1 = /*@__PURE__*/ proxyCustomElement(class MdsTable extends HTMLElement {
@@ -17,10 +17,25 @@ const MdsTable$1 = /*@__PURE__*/ proxyCustomElement(class MdsTable extends HTMLE
     }
     componentDidLoad() {
         this.interactiveEvent.emit(this.interactive);
+        const rowElements = this.host.querySelectorAll('mds-table-row');
+        this.host.addEventListener('scroll', (e) => {
+            const target = e.target;
+            // console.log('here', target.scrollLeft, target.offsetWidth)
+            // console.log(target.offsetWidth - target.scrollLeft)
+            // console.log(rowElement.offsetWidth - target.offsetWidth)
+            rowElements.forEach((rowElement) => {
+                if (target.scrollLeft > rowElement.offsetWidth - target.offsetWidth) {
+                    rowElement.overlayActions = true;
+                    return;
+                }
+                rowElement.overlayActions = false;
+            });
+        });
     }
     render() {
-        return (h(Host, { key: '77e8beec5fa074a69651c0a2b5f87d4e890f51de' }, h("table", { key: '14243bf0f16c10aa5cb1295618100604ea32dfea', class: clsx('table', this.interactive && 'table--interactive'), role: "grid" }, h("slot", { key: 'fd2d0f1642b7878a3e1579536a17fa16e680f03e' }))));
+        return (h(Host, { key: 'f8dc8ae93a7803a18b0e7d03f34ca1b46286bac9' }, h("table", { key: '511db82bcadc15ed656129e4929e9c88a9694cc7', class: clsx('table', this.interactive && 'table--interactive'), role: "table" }, h("slot", { key: 'eb90aa29cd0f11fc60b4749f5808c5862f24e877' }))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "interactive": ["onTableInteractive"]
     }; }

package/dist/components/mds-text2.js

@@ -246,6 +246,8 @@ const MdsText = /*@__PURE__*/ proxyCustomElement(class MdsText extends HTMLEleme
             this.randomText.start();
         };
         this.updateCSSCustomProps = () => {
+            if (typeof window === 'undefined')
+                return;
             const elementStyles = window.getComputedStyle(this.host);
             this.cssTextAnimationSpeed = Number(elementStyles.getPropertyValue('--mds-text-animation-speed'));
             const placeholderChar = elementStyles.getPropertyValue('--mds-text-animation-placeholder-char');
@@ -282,7 +284,7 @@ const MdsText = /*@__PURE__*/ proxyCustomElement(class MdsText extends HTMLEleme
         }
     }
     render() {
-        return (h(Host, { key: '52c81dcb61a06c57c6e0438bf043639657b444f4' }, h(this.tag, { key: '57a01393cfcff5783f4adede212ad497c8dbcc84', class: "text" }, !this.text
+        return (h(Host, { key: '1f42572d1faca24c60e7f351addd83674d070695' }, h(this.tag, { key: '1f1e7663e9181704fce34dd04b89d30924295d98', class: "text" }, !this.text
             ? h("slot", null)
             : this.text)));
     }

package/dist/components/mds-toast.js

@@ -14,6 +14,8 @@ const MdsToast$1 = /*@__PURE__*/ proxyCustomElement(class MdsToast extends HTMLE
         this.closedEvent = createEvent(this, "mdsToastClose", 7);
         this.cssDismissAnimationDuration = 300; // hardcoded from CSS :-(
         this.reloadTimeListeners = (visible) => {
+            if (typeof window === 'undefined')
+                return;
             if (!this.duration) {
                 return;
             }
@@ -45,6 +47,8 @@ const MdsToast$1 = /*@__PURE__*/ proxyCustomElement(class MdsToast extends HTMLE
         this.position = 'bottom-center';
     }
     updateCSSCustomProps() {
+        if (typeof window === 'undefined')
+            return;
         const elementStyles = window.getComputedStyle(this.hostElement);
         this.cssDismissAnimationDuration = cssDurationToMilliseconds(elementStyles.getPropertyValue('--mds-tab-duration'));
     }
@@ -68,9 +72,9 @@ const MdsToast$1 = /*@__PURE__*/ proxyCustomElement(class MdsToast extends HTMLE
         this.reloadTimeListeners(!!this.visible);
     }
     render() {
-        return (h(Host, { key: '88b5051aa23eb7ad806ed93a1b8f9fa5dae03bf1' }, h("div", { key: '4d4b94763233581fbd8528ce2ad7d0a1dfe081f1', class: clsx('dialog', this.position && `to-${this.position}`, this.visible && 'dialog--visible') }, h("slot", { key: '6b9fb4fe5f72a62494725d99d6132f1f26a98c80', name: "icon" }), this.hasText &&
-            h("mds-text", { key: 'f45d6a5af8063bb70e68ad73484a02a4669ed9e4', typography: "caption" }, h("slot", { key: '2f9931a45d5fc92964406d6672696a58352dd37b' })), this.actions &&
-            h("div", { key: '627ec1a987768197b7566a3bf5a25f227c12926c', class: "actions" }, h("slot", { key: 'fe515bf2cb916a603d622da9a7e655829b3a971e', name: "action" })))));
+        return (h(Host, { key: '4a2d03552d46561d2cc73e490f397543449ff846' }, h("div", { key: 'a72cb948ca9d2522c649657fa97e2d7703523fc5', class: clsx('dialog', this.position && `to-${this.position}`, this.visible && 'dialog--visible') }, h("slot", { key: '09314e6dae791cd57f4e0420598de412d7154dbf', name: "icon" }), this.hasText &&
+            h("mds-text", { key: '4d0f1c1617746e0e6ef8c2469d325bce7c511ce6', typography: "caption" }, h("slot", { key: '5673720eb828a336bf2be4364d4cece2d0ca61fa' })), this.actions &&
+            h("div", { key: 'aacbf04d08c9ad2f44ac6b6bc413266422539013', class: "actions" }, h("slot", { key: 'daab8a469b83a7d433a9416079060b559878667b', name: "action" })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/mds-tooltip2.js

@@ -169,17 +169,16 @@ const MdsTooltip = /*@__PURE__*/ proxyCustomElement(class MdsTooltip extends HTM
         this.updatePosition();
     }
     componentDidRender() {
-        var _a;
+        var _a, _b, _c, _d;
         this.arrowEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.arrow');
         // https://stackoverflow.com/a/68964329/185921
-        const caller = document.querySelector(this.target);
-        if (caller) {
-            this.caller = caller;
-            this.caller.addEventListener('mouseleave', this.handleVisibility.bind(this, false));
-            this.caller.addEventListener('mouseenter', this.handleVisibility.bind(this, true));
-            return;
+        const caller = (_d = (_c = (_b = this.host.parentElement) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(this.target)) !== null && _d !== void 0 ? _d : this.host.getRootNode().querySelector(this.target);
+        if (!caller) {
+            throw Error(`Target not found: ${this.target}`);
         }
-        throw Error('Warning: attribute `target` is undefined.');
+        this.caller = caller;
+        this.caller.addEventListener('mouseleave', this.handleVisibility.bind(this, false));
+        this.caller.addEventListener('mouseenter', this.handleVisibility.bind(this, true));
     }
     componentDidLoad() {
         if (!this.cleanupAutoUpdate) {
@@ -190,7 +189,7 @@ const MdsTooltip = /*@__PURE__*/ proxyCustomElement(class MdsTooltip extends HTM
         this.cleanupAutoUpdate = () => { return; };
     }
     render() {
-        return (h(Host, { key: 'f7d50f49f796c7158c60651bedbaeeebe0c57556' }, h("div", { key: '9469120eab49025399b790f089d6497bbf45dc67', class: "arrow", innerHTML: arrowSvg }), h("mds-text", { key: '77ad69e1b220720f14bfd63b8611395df7187028', class: "text", typography: this.typography, part: "text" }, h("slot", { key: '2de795c43d3a397d44bef32dff9412ac13ad249f' }))));
+        return (h(Host, { key: 'ff71ad7fb2417de2f3390bc9abd42f9a0ba8e01c' }, h("div", { key: 'b3bc38cd415b4a2e14310a62934d0f1560aa5f73', class: "arrow", innerHTML: arrowSvg }), h("mds-text", { key: '0425954f825fdd0a21123e5361255a8163a7a111', class: "text", typography: this.typography, part: "text" }, h("slot", { key: '53057efb067c1ce8b50f489679d214309f7d46d4' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/mds-url-view.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { m as miBaselineClose } from './close.js';
 import { K as KeyboardManager } from './keyboard-manager.js';
+import { L as Locale } from './locale.js';
 import { d as defineCustomElement$5 } from './mds-button2.js';
 import { d as defineCustomElement$4 } from './mds-icon2.js';
 import { d as defineCustomElement$3 } from './mds-spinner2.js';
@@ -8,6 +9,42 @@ import { d as defineCustomElement$2 } from './mds-text2.js';
 
 const miBaselineExplore = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 10.9c-.61 0-1.1.49-1.1 1.1s.49 1.1 1.1 1.1c.61 0 1.1-.49 1.1-1.1s-.49-1.1-1.1-1.1zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm2.19 12.19L6 18l3.81-8.19L18 6l-3.81 8.19z"/></svg>`;
 
+const close$3 = "Κλείσιμο";
+const iframeURL$3 = "Στοιχείο iframe που περιέχει {{ url }}";
+const previewURL$3 = "Παράθυρο με προεπισκόπηση του {{ url }}";
+const localeEl = {
+	close: close$3,
+	iframeURL: iframeURL$3,
+	previewURL: previewURL$3
+};
+
+const close$2 = "Close";
+const iframeURL$2 = "Iframe element containing {{ url }}";
+const previewURL$2 = "Window with a preview of {{ url }}";
+const localeEn = {
+	close: close$2,
+	iframeURL: iframeURL$2,
+	previewURL: previewURL$2
+};
+
+const close$1 = "Cerrar";
+const iframeURL$1 = "Elemento iframe que contiene {{ url }}";
+const previewURL$1 = "Ventana con vista previa de {{ url }}";
+const localeEs = {
+	close: close$1,
+	iframeURL: iframeURL$1,
+	previewURL: previewURL$1
+};
+
+const close = "Chiudi";
+const iframeURL = "Elemento iframe contentente {{ url }}";
+const previewURL = "Finestra con anteprima di {{ url }}";
+const localeIt = {
+	close: close,
+	iframeURL: iframeURL,
+	previewURL: previewURL
+};
+
 const mdsUrlViewCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-url-view-background: Sets the background-color of the component\n * @prop --mds-url-view-color: Sets the text color of the component\n * @prop --mds-url-view-radius: Sets the border-radius of the component\n * @prop --mds-url-view-shadow: Sets the box-shadow of the component\n */\n\n:host {\n\n  --mds-url-view-background: rgb(var(--tone-neutral-10));\n  --mds-url-view-color: rgb(var(--tone-neutral-02));\n  --mds-url-view-radius: 0.375rem;\n  --mds-url-view-header-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --mds-url-view-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  height: 100vh;\n  padding: 1rem;\n\n  -webkit-box-sizing: border-box;\n\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.window {\n  width: 100%;\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  background-color: var(--mds-url-view-background);\n  border-radius: var(--mds-url-view-radius);\n  -webkit-box-shadow: var(--mds-url-view-shadow);\n  box-shadow: var(--mds-url-view-shadow);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  overflow: hidden;\n  -webkit-transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow;\n  transition-property: background-color, box-shadow, -webkit-box-shadow;\n}\n\n.header {\n  gap: 0.5rem;\n  padding: 0.5rem;\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  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-url-view-background);\n  -webkit-box-shadow: var(--mds-url-view-header-shadow);\n  box-shadow: var(--mds-url-view-header-shadow);\n  color: var(--mds-url-view-color);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  position: relative;\n  -webkit-transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow;\n  transition-property: background-color, box-shadow, -webkit-box-shadow;\n}\n\n.title {\n  min-width: 0rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  -ms-flex-positive: 1;\n\n  flex-grow: 1;\n  text-align: center;\n}\n\n.browser-icon {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.browser-icon svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n.browser-icon {\n\n  fill: var(--mds-url-view-color);\n}\n\n.button-close {\n\n  --mds-button-background: transparent;\n\n  cursor: pointer;\n  fill: var(--mds-url-view-color);\n  border-radius: 0.375rem;\n}\n\n.iframe {\n  border: 0;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .window,\n  .header {\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    .window,\n    .header {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-url-view-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-url-view-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-url-view-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-url-view-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n";
 const MdsUrlViewStyle0 = mdsUrlViewCss;
 
@@ -18,6 +55,12 @@ const MdsUrlView$1 = /*@__PURE__*/ proxyCustomElement(class MdsUrlView extends H
         this.__attachShadow();
         this.closeEvent = createEvent(this, "mdsUrlViewClose", 7);
         this.km = new KeyboardManager();
+        this.t = new Locale({
+            el: localeEl,
+            en: localeEn,
+            es: localeEs,
+            it: localeIt,
+        });
         this.urlDomain = (url) => {
             const domain = new URL(url);
             return domain.hostname.replace('www.', '');
@@ -28,10 +71,17 @@ const MdsUrlView$1 = /*@__PURE__*/ proxyCustomElement(class MdsUrlView extends H
         this.disconnectedCallback = () => {
             this.km.detachClickBehavior();
         };
+        this.language = undefined;
         this.domain = undefined;
         this.src = undefined;
         this.loading = 'lazy';
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
+    componentWillLoad() {
+        this.t.lang(this.host);
+    }
     componentDidLoad() {
         var _a;
         const close = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.close');
@@ -39,14 +89,16 @@ const MdsUrlView$1 = /*@__PURE__*/ proxyCustomElement(class MdsUrlView extends H
         this.km.attachClickBehavior();
     }
     render() {
-        return (h(Host, { key: '110fdcdf82eaa7e3406a52b4207f6ae5142d5a45' }, h("div", { key: '15abd313014d613ff438930ad2f894ffa60da776', class: "window" }, h("header", { key: '698b2eee40e5c3b78200a93c0993d715540a73f3', class: "header" }, h("i", { key: 'b0743039226043435612e8b8a15aed8cae4bd94a', class: "browser-icon", innerHTML: miBaselineExplore }), this.domain && h("mds-text", { key: '30c70749874a927514df15b6e50a80851767a0c7', class: "title", typography: "caption" }, this.urlDomain(this.src)), h("mds-button", { key: '2aa2c9e05b7526e76bef3623fd1d1118e49ade36', class: "button-close", icon: miBaselineClose, onClick: this.closeUrlView })), h("iframe", { key: 'ca16f17cf998f6ac191fb56e148fec21e986a5e0', class: "iframe", src: this.src }))));
+        return (h(Host, { key: '05bbf8e0a83e6a04165e50cf97578a377f192f4e', "aria-label": this.t.get('previewURL', { url: this.urlDomain(this.src) }) }, h("div", { key: '389741c692dc63ed86d92318b47f5ff72ac97e3e', class: "window" }, h("div", { key: 'ce040d54af12a330c6e35607cc9fc8f2727dec0f', class: "header" }, h("i", { key: '1bea576ed76a5f52f2a4f2582acb33e914a7885c', class: "browser-icon", innerHTML: miBaselineExplore }), this.domain && h("mds-text", { key: 'a8b926114324fd13e4a9a4950c3cc9dcb957d665', class: "title", typography: "caption" }, this.urlDomain(this.src)), h("mds-button", { key: '0b05fb02b711380045cb15b5d0c851a9acfe069a', title: this.t.get('close'), class: "button-close", icon: miBaselineClose, onClick: this.closeUrlView })), h("iframe", { key: 'b90c46c762cb822085052ab041a01f8ca8366b74', class: "iframe", "aria-label": this.t.get('iframeURL', { url: this.urlDomain(this.src) }), src: this.src }))));
     }
     get host() { return this; }
     static get style() { return MdsUrlViewStyle0; }
 }, [1, "mds-url-view", {
         "domain": [4],
         "src": [1],
-        "loading": [1]
+        "loading": [1],
+        "language": [32],
+        "updateLang": [64]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/mds-usage.js

@@ -1,6 +1,4 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as clsx } from './clsx.js';
-import { s as setAttributeIfEmpty } from './aria.js';
 import { d as defineCustomElement$3 } from './mds-icon2.js';
 import { d as defineCustomElement$2 } from './mds-text2.js';
 
@@ -23,7 +21,7 @@ const usageVariant = {
     },
 };
 
-const mdsUsageCss = "@tailwind utilities;\n\n/**\n * @prop --mds-usage-background: Sets the background-color of the component\n * @prop --mds-usage-border-width: Sets the colored border-size of the component\n */\n\n:host {\n\n  --mds-usage-background: rgb(var(--status-info-10));\n  --mds-usage-badge-background: rgb(var(--status-info-06));\n  --mds-usage-badge-color: rgb(var(--status-info-10));\n  --mds-usage-color: rgb(var(--tone-neutral-03));\n  gap: 1rem;\n  border-radius: 0.75rem;\n  padding: 1.5rem;\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  background-color: var(--mds-usage-background);\n  color: var(--mds-usage-color);\n  display: grid;\n  grid-auto-rows: -webkit-min-content;\n  grid-auto-rows: min-content;\n  grid-template-columns: minmax(0, 100%);\n  position: relative;\n  -webkit-transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, color;\n  transition-property: background-color, box-shadow, color, -webkit-box-shadow;\n}\n\n.header{\n\n  padding-left: 1.5rem;\n\n  padding-right: 1.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: var(--mds-usage-badge-color);\n  display: -ms-flexbox;\n  display: flex;\n  height: 0;\n  inset: 0 0 auto;\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: absolute;\n}\n\n.icon {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.badge{\n\n  gap: 0.5rem;\n\n  border-radius: 9999px;\n\n  padding-left: 1rem;\n\n  padding-right: 1rem;\n\n  padding-top: 0.25rem;\n\n  padding-bottom: 0.25rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  background-color: var(--mds-usage-badge-background);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-usage-badge-color);\n  -webkit-transition-property: background-color, color, fill;\n  transition-property: background-color, color, fill;\n}\n\n:host([variant=\"do\"]) {\n\n  --mds-usage-background: rgb(var(--status-success-10));\n  --mds-usage-badge-background: rgb(var(--status-success-06));\n  --mds-usage-badge-color: rgb(var(--status-success-10));\n  --mds-usage-color: rgb(var(--status-success-02));\n}\n\n:host([variant=\"dont\"]) {\n\n  --mds-usage-background: rgb(var(--status-error-10));\n  --mds-usage-badge-background: rgb(var(--status-error-06));\n  --mds-usage-badge-color: rgb(var(--status-error-10));\n  --mds-usage-color: rgb(var(--status-error-02));\n}\n\n:host([variant=\"warn\"]) {\n\n  --mds-usage-background: rgb(var(--status-warning-10));\n  --mds-usage-badge-background: rgb(var(--status-warning-08));\n  --mds-usage-badge-color: rgb(var(--status-warning-01));\n  --mds-usage-color: rgb(var(--status-warning-02));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .badge {\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    .badge {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-usage-badge-background: rgb(var(--status-info-05));\n\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n\n  :host([variant=\"do\"]) {\n\n    --mds-usage-badge-background: rgb(var(--status-success-05));\n  }\n  \n  :host([variant=\"dont\"]) {\n  \n    --mds-usage-badge-background: rgb(var(--status-error-05));\n  }\n  \n  :host([variant=\"warn\"]) {\n  \n    --mds-usage-badge-background: rgb(var(--status-warning-05));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-usage-badge-background: rgb(var(--status-info-05));\n  \n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  \n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  \n    :host([variant=\"do\"]) {\n  \n      --mds-usage-badge-background: rgb(var(--status-success-05));\n    }\n    \n    :host([variant=\"dont\"]) {\n    \n      --mds-usage-badge-background: rgb(var(--status-error-05));\n    }\n    \n    :host([variant=\"warn\"]) {\n    \n      --mds-usage-badge-background: rgb(var(--status-warning-05));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host,\n  :host([variant=\"do\"]),\n  :host([variant=\"dont\"]),\n  :host([variant=\"warn\"]) {\n\n    --mds-usage-badge-color: rgb(var(--tone-neutral-01));\n    --mds-usage-color: rgb(var(--tone-neutral-01));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host,\n    :host([variant=\"do\"]),\n    :host([variant=\"dont\"]),\n    :host([variant=\"warn\"]) {\n\n      --mds-usage-badge-color: rgb(var(--tone-neutral-01));\n      --mds-usage-color: rgb(var(--tone-neutral-01));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n";
+const mdsUsageCss = "@tailwind utilities;\n\n/**\n * @prop --mds-usage-background: Sets the background-color of the component\n * @prop --mds-usage-border-width: Sets the colored border-size of the component\n */\n\n:host {\n\n  --mds-usage-background: rgb(var(--status-info-10));\n  --mds-usage-badge-background: rgb(var(--status-info-05));\n  --mds-usage-badge-color: rgb(var(--status-info-10));\n  --mds-usage-color: rgb(var(--tone-neutral-03));\n  gap: 1rem;\n  border-radius: 0.75rem;\n  padding: 1.5rem;\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  background-color: var(--mds-usage-background);\n  color: var(--mds-usage-color);\n  display: grid;\n  grid-auto-rows: -webkit-min-content;\n  grid-auto-rows: min-content;\n  grid-template-columns: minmax(0, 100%);\n  position: relative;\n  -webkit-transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, color;\n  transition-property: background-color, box-shadow, color, -webkit-box-shadow;\n}\n\n.header{\n\n  padding-left: 1.5rem;\n\n  padding-right: 1.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: var(--mds-usage-badge-color);\n  display: -ms-flexbox;\n  display: flex;\n  height: 0;\n  inset: 0 0 auto;\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: absolute;\n}\n\n.icon {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.badge{\n\n  gap: 0.5rem;\n\n  border-radius: 9999px;\n\n  padding-left: 1rem;\n\n  padding-right: 1rem;\n\n  padding-top: 0.25rem;\n\n  padding-bottom: 0.25rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  background-color: var(--mds-usage-badge-background);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-usage-badge-color);\n  -webkit-transition-property: background-color, color, fill;\n  transition-property: background-color, color, fill;\n}\n\n:host([variant=\"do\"]) {\n\n  --mds-usage-background: rgb(var(--status-success-10));\n  --mds-usage-badge-background: rgb(var(--status-success-05));\n  --mds-usage-badge-color: rgb(var(--status-success-10));\n  --mds-usage-color: rgb(var(--status-success-02));\n}\n\n:host([variant=\"dont\"]) {\n\n  --mds-usage-background: rgb(var(--status-error-10));\n  --mds-usage-badge-background: rgb(var(--status-error-05));\n  --mds-usage-badge-color: rgb(var(--status-error-10));\n  --mds-usage-color: rgb(var(--status-error-02));\n}\n\n:host([variant=\"warn\"]) {\n\n  --mds-usage-background: rgb(var(--status-warning-10));\n  --mds-usage-badge-background: rgb(var(--status-warning-08));\n  --mds-usage-badge-color: rgb(var(--status-warning-01));\n  --mds-usage-color: rgb(var(--status-warning-02));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .badge {\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    .badge {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-usage-badge-background: rgb(var(--status-info-05));\n\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n\n  :host([variant=\"do\"]) {\n\n    --mds-usage-badge-background: rgb(var(--status-success-05));\n  }\n\n  :host([variant=\"dont\"]) {\n\n    --mds-usage-badge-background: rgb(var(--status-error-05));\n  }\n\n  :host([variant=\"warn\"]) {\n\n    --mds-usage-badge-background: rgb(var(--status-warning-05));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-usage-badge-background: rgb(var(--status-info-05));\n\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n\n    :host([variant=\"do\"]) {\n\n      --mds-usage-badge-background: rgb(var(--status-success-05));\n    }\n\n    :host([variant=\"dont\"]) {\n\n      --mds-usage-badge-background: rgb(var(--status-error-05));\n    }\n\n    :host([variant=\"warn\"]) {\n\n      --mds-usage-badge-background: rgb(var(--status-warning-05));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host,\n  :host([variant=\"do\"]),\n  :host([variant=\"dont\"]),\n  :host([variant=\"warn\"]) {\n\n    --mds-usage-badge-color: rgb(var(--tone-neutral-01));\n    --mds-usage-color: rgb(var(--tone-neutral-01));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host,\n    :host([variant=\"do\"]),\n    :host([variant=\"dont\"]),\n    :host([variant=\"warn\"]) {\n\n      --mds-usage-badge-color: rgb(var(--tone-neutral-01));\n      --mds-usage-color: rgb(var(--tone-neutral-01));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n";
 const MdsUsageStyle0 = mdsUsageCss;
 
 const MdsUsage$1 = /*@__PURE__*/ proxyCustomElement(class MdsUsage extends HTMLElement {
@@ -34,18 +32,10 @@ const MdsUsage$1 = /*@__PURE__*/ proxyCustomElement(class MdsUsage extends HTMLE
         this.variant = 'info';
         this.alias = undefined;
     }
-    componentDidLoad() {
-        this.addAriaAttributes();
-    }
-    addAriaAttributes() {
-        var _a;
-        const { alias } = usageVariant[this.variant];
-        setAttributeIfEmpty(this.host, 'aria-label', (_a = this.alias) !== null && _a !== void 0 ? _a : alias);
-    }
     render() {
         var _a;
         const { alias, icon } = usageVariant[this.variant];
-        return (h(Host, { key: '77385a59fb26b48dfd92f3ecaa89625bec240383' }, h("header", { key: '15a5ba657fb4636b8720319ff3a1f80b99906239', class: clsx('header'), "aria-hidden": "true" }, h("div", { key: 'f2ee0942510ddd3843c3f0d13f34b5929e8d5f2c', class: "badge" }, h("mds-icon", { key: '528e72a5fe8fd734994b62e0cc6aa4fb41bb73fe', class: "icon", name: icon }), h("mds-text", { key: '6f846b3ae897ba93829a61e121c4636ea3345e75', typography: "h6" }, (_a = this.alias) !== null && _a !== void 0 ? _a : alias))), h("slot", { key: '893da28f41bc3bd444be31f7f5372a7433a37144' })));
+        return (h(Host, { key: '957337ab8a126dd504953dab0ad0b9e0034912ba', role: "suggestion" }, h("div", { key: 'a71e2d6929fbb1c4f0a33102ad1362afdf9c9656', class: "header", "aria-hidden": "true" }, h("div", { key: '2d64e61fff8d5501e4777e06ee862a9874f53d29', class: "badge" }, h("mds-icon", { key: '34aaa99d51100fe3c074eeb1af1b215af09351ad', class: "icon", name: icon }), h("mds-text", { key: '9ba2f1d238d9de7653d389bb2d6397cef95dcc0f', typography: "h6" }, (_a = this.alias) !== null && _a !== void 0 ? _a : alias))), h("div", { key: 'fbbfcc69dff1e94120291bde5ffee1940b15c155', class: "content", role: this.variant === 'do' || this.variant === 'info' ? 'insertion' : 'deletion' }, h("slot", { key: '18e006d24d1042d20c0bbb326c72d4cea9d39aec' }))));
     }
     get host() { return this; }
     static get style() { return MdsUsageStyle0; }

package/dist/components/mds-video-wall.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
 
-const mdsVideoWallCss = ":host{--mds-video-wall-noise-background-color:rgb(var(--brand-maggioli-03) / 0.8);--mds-video-wall-noise-background-size:auto;--mds-video-wall-video-fit:cover;aspect-ratio:16/9;background-color:rgb(var(--tone-neutral-02));display:-ms-flexbox;display:flex;position:relative}.content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;height:100%;-ms-flex-pack:center;justify-content:center;position:relative;width:100%;z-index:3}video,.noise{height:100%;width:100%;inset:0;position:absolute}video{-o-object-fit:var(--mds-video-wall-video-fit);object-fit:var(--mds-video-wall-video-fit);z-index:1}.noise{background-color:var(--mds-video-wall-noise-background-color);background-size:var(--mds-video-wall-noise-background-size);z-index:2}.noise--classic{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAALElEQVQYV2NkwAEYoeIzGRgYtjAwMGxmYGAAs2ESvlBBkDowGyaBYSDpRgEAkLwKoa+v7O8AAAAASUVORK5CYII=')}.noise--sharp{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAOklEQVQoU2NkYGAwZoCAs2hssCAjNkFkMZACGMBqEswErMaDTEJWgNUkmBU4HYpNAYpJyI4ESWCYBAAe2A7Vb66lfAAAAABJRU5ErkJggg==')}.noise--soft{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAOElEQVQYV2NkYGAwZoCA51BaEpnPiKTgLFQCpgHMR1aA0wQpbEYzMDCArQKZAAMoRsOsBinAawIAOXkJ1Ff0CjwAAAAASUVORK5CYII=')}.noise--tv{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMElEQVQYV2NkYGDwZcABGP8zKBuD5Bj/P4coEf0Kod8wSjH+Z5CVgki+RZc0HghJADPEICMR8Ep/AAAAAElFTkSuQmCC')}";
+const mdsVideoWallCss = "@tailwind utilities;\n\n/**\n * @prop --mds-video-wall-noise-background-color: Sets the background-color of the noise when active\n * @prop --mds-video-wall-noise-background-size: Sets the background-color of the noise when active\n * @prop --mds-video-wall-video-fit: Sets the object-fit of the video stream\n */\n\n:host {\n\n  --mds-video-wall-noise-background-color: rgb(var(--variant-primary-03) / 0.8);\n  --mds-video-wall-noise-background-size: auto;\n  --mds-video-wall-video-fit: cover;\n\n  aspect-ratio: 16/9;\n  background-color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n}\n\n.content {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  height: 100%;\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  z-index: 3;\n}\n\nvideo,\n.noise{\n\n  height: 100%;\n\n  width: 100%;\n\n  inset: 0;\n  position: absolute;\n}\n\nvideo {\n  -o-object-fit: var(--mds-video-wall-video-fit);\n     object-fit: var(--mds-video-wall-video-fit);\n  z-index: 1;\n}\n\n.noise {\n  background-color: var(--mds-video-wall-noise-background-color);\n  background-size: var(--mds-video-wall-noise-background-size);\n  z-index: 2;\n}\n\n.noise--classic {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAALElEQVQYV2NkwAEYoeIzGRgYtjAwMGxmYGAAs2ESvlBBkDowGyaBYSDpRgEAkLwKoa+v7O8AAAAASUVORK5CYII=');\n}\n\n.noise--sharp {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAOklEQVQoU2NkYGAwZoCAs2hssCAjNkFkMZACGMBqEswErMaDTEJWgNUkmBU4HYpNAYpJyI4ESWCYBAAe2A7Vb66lfAAAAABJRU5ErkJggg==');\n}\n\n.noise--soft {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAOElEQVQYV2NkYGAwZoCA51BaEpnPiKTgLFQCpgHMR1aA0wQpbEYzMDCArQKZAAMoRsOsBinAawIAOXkJ1Ff0CjwAAAAASUVORK5CYII=');\n}\n\n.noise--tv {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMElEQVQYV2NkYGDwZcABGP8zKBuD5Bj/P4coEf0Kod8wSjH+Z5CVgki+RZc0HghJADPEICMR8Ep/AAAAAElFTkSuQmCC');\n}\n\n@container style(--magma-pref-animation: reduce) {\n  video {\n    display: none;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    video {\n      display: none;\n    }\n  }\n}\n\n";
 const MdsVideoWallStyle0 = mdsVideoWallCss;
 
 const MdsVideoWall$1 = /*@__PURE__*/ proxyCustomElement(class MdsVideoWall extends HTMLElement {
@@ -21,9 +21,9 @@ const MdsVideoWall$1 = /*@__PURE__*/ proxyCustomElement(class MdsVideoWall exten
         this.hasContent = this.hostElement.querySelector('[slot="content"]') !== null;
     }
     render() {
-        return (h(Host, { key: 'e2a4bb7d9bc0cef71a49247b9df3cf901c80d6ad' }, this.noise !== 'none' &&
-            h("div", { key: 'cf8f3bb9ba8c6189d28c2ffb974f3957927ecaf3', class: clsx('noise', `noise--${this.noise}`) }), h("video", { key: '71ab694abd76569463eeedca93b2b33bc3c55654', autoplay: this.autoplay, loop: this.loop, muted: this.muted, poster: this.poster, preload: this.preload, src: this.src }, h("slot", { key: '61e148dbac6f3234a286a80b1ea2e6965b1b522e' })), this.hasContent &&
-            h("div", { key: '920afc4159f4bac557138911948239782e50274b', class: "content" }, h("slot", { key: '0f809b1b013f1528e89d8ae8e063ec3d75cf657d', name: "content" }))));
+        return (h(Host, { key: 'b02dbaf8ed4d658d11b926ced5bb69904f86382d' }, this.noise !== 'none' &&
+            h("div", { key: 'db11caf9e04511d4963bd871901445077395f90f', "aria-hidden": "true", class: clsx('noise', `noise--${this.noise}`) }), h("video", { key: '9525d923e158c433dde100f48e2445e159223f24', "aria-hidden": "true", autoplay: this.autoplay, loop: this.loop, muted: this.muted, poster: this.poster, preload: this.preload, src: this.src }, h("slot", { key: 'd59a946ffa84571940e5091c958957ad2a79917e' })), this.hasContent &&
+            h("div", { key: 'bde9d0476687145459926c42f2496e8489d61b00', class: "content" }, h("slot", { key: '87b6450fd36e658a4034a400624d49cdeaa946b0', name: "content" }))));
     }
     get hostElement() { return this; }
     static get style() { return MdsVideoWallStyle0; }

package/dist/components/mds-zero.js

@@ -10,7 +10,7 @@ const MdsZero$1 = /*@__PURE__*/ proxyCustomElement(class MdsZero extends HTMLEle
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'ac7dfdb13d45c42bd1e3b65e460e785f758f2928' }, h("slot", { key: '497de5aee2af6a62ae7bac0d91f058e0e3dafc8d' }), h("div", { key: 'e4cc7a36a64cffd7c511c58b2c765605e5f84a6c', class: "contents", part: "contents" }, h("slot", { key: '48085d5a1624758fc659fa0fe86d95fff5e23610', name: "content" })), h("footer", { key: '40af4b696b8084b7206e74a9e4b83783f69794e0', class: "actions", part: "actions" }, h("slot", { key: '0dd0c9f28ac707d0426701a0b11004d6e22e73ac', name: "action" }))));
+        return (h(Host, { key: '9c19b48ff4f43f7124c1ab435a0c459fa99ae119' }, h("slot", { key: '6b8695731411251458089f2adf7a262070df66b0' }), h("div", { key: '395deabebcac70a1db76588b32d7ebb31f56b03f', class: "contents", part: "contents" }, h("slot", { key: '67427905a2049879301416aa7f16c0512f59d4f3', name: "content" })), h("footer", { key: 'f713f2108319918adf277a51b4e60d85210c391a', class: "actions", part: "actions" }, h("slot", { key: '86cb45fff8a7c28aa4855342237982434c40792c', name: "action" }))));
     }
     static get style() { return MdsZeroStyle0; }
 }, [1, "mds-zero"]);