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

package/dist/cjs/mds-stepper-bar-item.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const clsx = require('./clsx-fc789adc.js');
 
-const mdsStepperBarItemCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-stepper-bar-item-color: Sets the color of the text\n * @prop --mds-stepper-bar-item-duaration: Sets the duration of the animation\n * @prop --mds-stepper-bar-item-icon-background-done: Sets the background-color of the icon when the component is done\n * @prop --mds-stepper-bar-item-icon-background-current: Sets the background-color of the icon when the component is current\n * @prop --mds-stepper-bar-item-icon-background: Sets the background-color of the icon\n * @prop --mds-stepper-bar-item-icon-color-done: Sets the color of the icon when the component is done\n * @prop --mds-stepper-bar-item-icon-color-current: Sets the color of the icon when the component is current\n * @prop --mds-stepper-bar-item-icon-color: Sets the color of the icon\n * @prop --mds-stepper-bar-item-icon-ring-size: Sets the size of the icon circle when the component is current\n * @prop --mds-stepper-bar-item-min-width: Sets the minimum width of the component\n * @prop --mds-stepper-bar-item-progress-background: Sets the background color of the progress bar\n * @prop --mds-stepper-bar-item-progress-color: Sets the color of the progress bar\n * @prop --mds-stepper-bar-item-progress-thickness: Sets the thickness of the progress bar\n */\n\n:host {\n\n  --mds-stepper-bar-item-color: rgb(var(--tone-neutral-03));\n  --mds-stepper-bar-item-duaration: 250ms;\n  --mds-stepper-bar-item-icon-background-done: rgb(var(--status-success-05));\n  --mds-stepper-bar-item-icon-background-current: rgb(var(--brand-maggioli-04));\n  --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));\n  --mds-stepper-bar-item-icon-color-done: rgb(var(--status-success-10));\n  --mds-stepper-bar-item-icon-color-current: rgb(var(--tone-neutral));\n  --mds-stepper-bar-item-icon-color: rgb(var(--tone-neutral-04));\n  --mds-stepper-bar-item-icon-ring-color: var(--mds-stepper-bar-item-icon-background-current);\n  --mds-stepper-bar-item-icon-ring-separator-color: rgb(var(--tone-neutral));\n  --mds-stepper-bar-item-icon-ring-separator-size: 0.375rem;\n  --mds-stepper-bar-item-icon-ring-size: 0.25rem;\n  --mds-stepper-bar-item-min-width: 180px;\n  --mds-stepper-bar-item-progress-background: rgb(var(--tone-neutral-08));\n  --mds-stepper-bar-item-progress-color: rgb(var(--status-success-04));\n  --mds-stepper-bar-item-progress-thickness: 0.5rem;\n  gap: 1rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  min-width: var(--mds-stepper-bar-item-min-width);\n  padding-left: calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));\n  padding-top: calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));\n  position: relative;\n  scroll-snap-align: center;\n  -webkit-transition-property: outline, outline-offset;\n  transition-property: outline, outline-offset;\n}\n\n:host( :last-of-type ){\n\n  -ms-flex-preferred-size: 0.25rem;\n\n  flex-basis: 0.25rem;\n}\n\n:host( :last-of-type ) .progress {\n  display: hidden;\n}\n\n:host([done]) .icon {\n\n  --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-icon-background-done);\n  --mds-stepper-bar-item-icon-color: var(--mds-stepper-bar-item-icon-color-done);\n\n  -webkit-transition-delay: 0ms;\n\n  transition-delay: 0ms;\n}\n\n:host([current]) .icon {\n\n  --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-icon-background-current);\n  --mds-stepper-bar-item-icon-color: var(--mds-stepper-bar-item-icon-color-current);\n\n  -webkit-transition-delay: calc(var(--mds-stepper-bar-item-duaration) / 2);\n\n  transition-delay: calc(var(--mds-stepper-bar-item-duaration) / 2);\n}\n\n:host(:not([done])) .icon,\n:host(:not([current])) .icon {\n\n  --mds-stepper-bar-item-icon-ring-color: var(--mds-stepper-bar-item-icon-background);\n}\n\n.header{\n\n  width: 100%;\n\n  border-radius: 0.375rem;\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  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-transition-property: outline, outline-offset;\n  transition-property: outline, outline-offset;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  padding: 0.5rem;\n\n  -webkit-transition-duration: 150ms;\n\n  transition-duration: 150ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-stepper-bar-item-icon-background);\n  -webkit-box-shadow: 0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);\n  box-shadow: 0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-stepper-bar-item-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  position: relative;\n  -webkit-transition-duration: var(--mds-stepper-bar-item-duaration);\n  transition-duration: var(--mds-stepper-bar-item-duaration);\n  -webkit-transition-property: background-color, fill, -webkit-box-shadow;\n  transition-property: background-color, fill, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, fill;\n  transition-property: background-color, box-shadow, fill, -webkit-box-shadow;\n}\n\n.progress {\n\n  --mds-stepper-bar-item-background: var(--mds-stepper-bar-item-progress-background);\n  --mds-stepper-bar-item-color: var(--mds-stepper-bar-item-progress-color);\n  --mds-stepper-bar-item-thickness: var(--mds-stepper-bar-item-progress-thickness);\n  margin-left: -0.25rem;\n\n  -ms-flex-positive: 1;\n\n  flex-grow: 1;\n  margin-right: calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem);\n  position: relative;\n  z-index: -1;\n}\n\n.infos{\n\n  gap: 0.25rem;\n\n  padding-left: 0.25rem;\n\n  display: grid;\n}\n\n.text{\n\n  -webkit-transition-duration: 150ms;\n\n  transition-duration: 150ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  color: var(--mds-stepper-bar-item-color);\n  pointer-events: none;\n  -webkit-transition-duration: var(--mds-stepper-bar-item-duaration);\n  transition-duration: var(--mds-stepper-bar-item-duaration);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.badge{\n\n  border-radius: 9999px;\n\n  pointer-events: none;\n}\n\n.step{\n\n  border-radius: 9999px;\n\n  color: rgb(var(--tone-neutral-04));\n  pointer-events: none;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .header,\n  .icon,\n  .text {\n    -webkit-transition-delay: 0s !important;\n    transition-delay: 0s !important;\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    .header,\n    .icon,\n    .text {\n      -webkit-transition-delay: 0s !important;\n      transition-delay: 0s !important;\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
+const mdsStepperBarItemCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-stepper-bar-item-color: Sets the color of the text\n * @prop --mds-stepper-bar-item-duaration: Sets the duration of the animation\n * @prop --mds-stepper-bar-item-icon-background-done: Sets the background-color of the icon when the component is done\n * @prop --mds-stepper-bar-item-icon-background-current: Sets the background-color of the icon when the component is current\n * @prop --mds-stepper-bar-item-icon-background: Sets the background-color of the icon\n * @prop --mds-stepper-bar-item-icon-color-done: Sets the color of the icon when the component is done\n * @prop --mds-stepper-bar-item-icon-color-current: Sets the color of the icon when the component is current\n * @prop --mds-stepper-bar-item-icon-color: Sets the color of the icon\n * @prop --mds-stepper-bar-item-icon-ring-size: Sets the size of the icon circle when the component is current\n * @prop --mds-stepper-bar-item-min-width: Sets the minimum width of the component\n * @prop --mds-stepper-bar-item-progress-background: Sets the background color of the progress bar\n * @prop --mds-stepper-bar-item-progress-color: Sets the color of the progress bar\n * @prop --mds-stepper-bar-item-progress-thickness: Sets the thickness of the progress bar\n */\n\n:host {\n\n  --mds-stepper-bar-item-color: rgb(var(--tone-neutral-03));\n  --mds-stepper-bar-item-duaration: 250ms;\n  --mds-stepper-bar-item-icon-background-done: rgb(var(--status-success-05));\n  --mds-stepper-bar-item-icon-background-current: rgb(var(--variant-primary-04));\n  --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));\n  --mds-stepper-bar-item-icon-color-done: rgb(var(--status-success-10));\n  --mds-stepper-bar-item-icon-color-current: rgb(var(--tone-neutral));\n  --mds-stepper-bar-item-icon-color: rgb(var(--tone-neutral-04));\n  --mds-stepper-bar-item-icon-ring-color: var(--mds-stepper-bar-item-icon-background-current);\n  --mds-stepper-bar-item-icon-ring-separator-color: rgb(var(--tone-neutral));\n  --mds-stepper-bar-item-icon-ring-separator-size: 0.375rem;\n  --mds-stepper-bar-item-icon-ring-size: 0.25rem;\n  --mds-stepper-bar-item-min-width: 180px;\n  --mds-stepper-bar-item-progress-background: rgb(var(--tone-neutral-08));\n  --mds-stepper-bar-item-progress-color: rgb(var(--status-success-04));\n  --mds-stepper-bar-item-progress-thickness: 0.5rem;\n  gap: 1rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  min-width: var(--mds-stepper-bar-item-min-width);\n  padding-left: calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));\n  padding-top: calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size));\n  position: relative;\n  scroll-snap-align: center;\n  -webkit-transition-property: outline, outline-offset;\n  transition-property: outline, outline-offset;\n}\n\n:host( :last-of-type ){\n\n  -ms-flex-preferred-size: 0.25rem;\n\n  flex-basis: 0.25rem;\n}\n\n:host( :last-of-type ) .progress {\n  display: hidden;\n}\n\n:host([done]) .icon {\n\n  --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-icon-background-done);\n  --mds-stepper-bar-item-icon-color: var(--mds-stepper-bar-item-icon-color-done);\n\n  -webkit-transition-delay: 0ms;\n\n  transition-delay: 0ms;\n}\n\n:host([current]) .icon {\n\n  --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-icon-background-current);\n  --mds-stepper-bar-item-icon-color: var(--mds-stepper-bar-item-icon-color-current);\n\n  -webkit-transition-delay: calc(var(--mds-stepper-bar-item-duaration) / 2);\n\n  transition-delay: calc(var(--mds-stepper-bar-item-duaration) / 2);\n}\n\n:host(:not([done])) .icon,\n:host(:not([current])) .icon {\n\n  --mds-stepper-bar-item-icon-ring-color: var(--mds-stepper-bar-item-icon-background);\n}\n\n.header{\n\n  width: 100%;\n\n  border-radius: 0.375rem;\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  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-transition-property: outline, outline-offset;\n  transition-property: outline, outline-offset;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  padding: 0.5rem;\n\n  -webkit-transition-duration: 150ms;\n\n  transition-duration: 150ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-stepper-bar-item-icon-background);\n  -webkit-box-shadow: 0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);\n  box-shadow: 0 0 0 var(--mds-stepper-bar-item-icon-ring-size) var(--mds-stepper-bar-item-icon-ring-color), 0 0 0 var(--mds-stepper-bar-item-icon-ring-separator-size) var(--mds-stepper-bar-item-icon-ring-separator-color);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-stepper-bar-item-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  position: relative;\n  -webkit-transition-duration: var(--mds-stepper-bar-item-duaration);\n  transition-duration: var(--mds-stepper-bar-item-duaration);\n  -webkit-transition-property: background-color, fill, -webkit-box-shadow;\n  transition-property: background-color, fill, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, fill;\n  transition-property: background-color, box-shadow, fill, -webkit-box-shadow;\n}\n\n.progress {\n\n  --mds-stepper-bar-item-background: var(--mds-stepper-bar-item-progress-background);\n  --mds-stepper-bar-item-color: var(--mds-stepper-bar-item-progress-color);\n  --mds-stepper-bar-item-thickness: var(--mds-stepper-bar-item-progress-thickness);\n  margin-left: -0.25rem;\n\n  -ms-flex-positive: 1;\n\n  flex-grow: 1;\n  margin-right: calc(calc(calc(var(--mds-stepper-bar-item-icon-ring-size) + var(--mds-stepper-bar-item-icon-ring-separator-size)) * -1) - 0.25rem);\n  position: relative;\n  z-index: -1;\n}\n\n.infos{\n\n  gap: 0.25rem;\n\n  padding-left: 0.25rem;\n\n  display: grid;\n}\n\n.text{\n\n  -webkit-transition-duration: 150ms;\n\n  transition-duration: 150ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  color: var(--mds-stepper-bar-item-color);\n  pointer-events: none;\n  -webkit-transition-duration: var(--mds-stepper-bar-item-duaration);\n  transition-duration: var(--mds-stepper-bar-item-duaration);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.badge{\n\n  border-radius: 9999px;\n\n  pointer-events: none;\n}\n\n.step{\n\n  border-radius: 9999px;\n\n  color: rgb(var(--tone-neutral-04));\n  pointer-events: none;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .header,\n  .icon,\n  .text {\n    -webkit-transition-delay: 0s !important;\n    transition-delay: 0s !important;\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    .header,\n    .icon,\n    .text {\n      -webkit-transition-delay: 0s !important;\n      transition-delay: 0s !important;\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
 const MdsStepperBarItemStyle0 = mdsStepperBarItemCss;
 
 const MdsStepperBarItem = class {
@@ -48,7 +48,7 @@ const MdsStepperBarItem = class {
         this.isCurrent = newValue;
     }
     render() {
-        return (index.h(index.Host, { key: '715f4ed46dd375ba551e95e0aa7cb4efc4a31f63' }, index.h("header", { key: '264b3b0097255542637b030b21f5e1671ddc1878', class: "header", tabindex: "0" }, index.h("mds-icon", { key: 'a3450a3cee7e601c4c96ddec0f1b0f3f71bca4d8', class: "icon", name: clsx.clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), index.h("mds-progress", { key: '95634a5ef10acab544d5f11288f6dc4e4d079b46', class: "progress", progress: this.isDone ? 1 : 0 })), index.h("div", { key: 'abbabd9a031c0d21d83b0c6f63a81512b9cb06a8', class: "infos" }, this.step && index.h("mds-text", { key: 'ceb824218fa61d539b535878caf768f367243d8c', class: "step", typography: "option" }, "step ", this.index + 1), this.label && index.h("mds-text", { key: '9db318bad863eb57fd65b88dfae3ec957217bb13', class: "text", typography: this.typography }, this.label), this.badge && index.h("div", { key: '896a0943deed1e16bfd475b133a7ae10ea29e5fc' }, this.showBadge()))));
+        return (index.h(index.Host, { key: '715f4ed46dd375ba551e95e0aa7cb4efc4a31f63' }, index.h("div", { key: 'a95536046218a876f6b58972111e3579f7db0b5b', class: "header", tabindex: "0" }, index.h("mds-icon", { key: '572bfcd53c28c751ec923c19a83ad2da516a087d', class: "icon", name: clsx.clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), index.h("mds-progress", { key: '7afca827a100f9676cc61c700754105a946ad988', "aria-hidden": "true", class: "progress", progress: this.isDone ? 1 : 0 })), index.h("div", { key: 'a0b34eaba6a2b818c63e9a21de8c5bb160b6ccc2', class: "infos" }, this.step && index.h("mds-text", { key: '2ae5ce5ab77172373301b8c36e16c1131fa0c046', class: "step", typography: "option" }, "step ", this.index + 1), this.label && index.h("mds-text", { key: '63b5bf25b4ae174725af0340701577699e333951', class: "text", typography: this.typography }, this.label), this.badge && index.h("div", { key: '569ed53badb0ee775fdfb487680378090f782b15' }, this.showBadge()))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-stepper-bar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsStepperBarCss = "@tailwind utilities;\n\n:host{\n\n  gap: 1.5rem;\n\n  display: grid;\n  position: relative;\n}\n\n.items{\n\n  z-index: 10;\n\n  width: 100%;\n\n  gap: 0rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  overflow: auto;\n  position: relative;\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n}\n\n:host( [linear=\"true\"] ) ::slotted( mds-stepper-bar-item ),\n:host( [linear] ) ::slotted( mds-stepper-bar-item ) {\n  pointer-events: none;\n}\n\n:host( [linear=\"false\"] ) ::slotted( mds-stepper-bar-item ) {\n  pointer-events: auto;\n}\n\n\n.contents{\n\n  width: 100%;\n\n  opacity: 0;\n\n  -webkit-transition-property: opacity;\n\n  transition-property: opacity;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 150ms;\n\n  transition-duration: 150ms;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n:host( [hydrated] ) .contents {\n  opacity: 1;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  .contents,\n  .items {\n    scroll-behavior: unset;\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    .contents,\n    .items {\n      scroll-behavior: unset;\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
 const MdsStepperBarStyle0 = mdsStepperBarCss;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
-const mdsTabBarItemCss = "@tailwind utilities;\n\n/**\n * @prop --mds-tab-bar-item-background-selected: Sets the background-color of the component when it's selected\n * @prop --mds-tab-bar-item-background: Sets the background-color of the component\n * @prop --mds-tab-bar-item-color-selected: Sets the text color of the component when it's selected\n * @prop --mds-tab-bar-item-color: Sets the text color of the component\n */\n\n:host {\n\n  --mds-tab-bar-item-background: transparent;\n  --mds-tab-bar-item-background-selected: var(--mds-tab-bar-item-background);\n  --mds-tab-bar-item-color: rgb(var(--tone-neutral-06));\n  --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-04));\n  gap: 0.25rem;\n  padding: 0.5rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-tab-bar-item-background);\n  color: var(--mds-tab-bar-item-color);\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-tab-bar-item-color);\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  text-align: center;\n  -webkit-transition-property: color, background-color, fill;\n  transition-property: color, background-color, fill;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) {\n  background-color: var(--mds-tab-bar-item-background-selected);\n  color: var(--mds-tab-bar-item-color-selected);\n  fill: var(--mds-tab-bar-item-color-selected);\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-tab-bar-item-color: rgb(var(--tone-neutral-04));\n    --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-02));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n      --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-02));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n    --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-02));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n      --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-02));\n    }\n  }\n}\n\n";
+const mdsTabBarItemCss = "@tailwind utilities;\n\n/**\n * @prop --mds-tab-bar-item-background-selected: Sets the background-color of the component when it's selected\n * @prop --mds-tab-bar-item-background: Sets the background-color of the component\n * @prop --mds-tab-bar-item-color-selected: Sets the text color of the component when it's selected\n * @prop --mds-tab-bar-item-color: Sets the text color of the component\n */\n\n:host {\n\n  --mds-tab-bar-item-background: rgb(var(--tone-neutral-10));\n  --mds-tab-bar-item-background-selected: transparent;\n  --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n  --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-03));\n  gap: 0.25rem;\n  padding: 0.5rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-tab-bar-item-background);\n  color: var(--mds-tab-bar-item-color);\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-tab-bar-item-color);\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  text-align: center;\n  -webkit-transition-property: color, background-color, fill;\n  transition-property: color, background-color, fill;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) {\n  background-color: var(--mds-tab-bar-item-background-selected);\n  color: var(--mds-tab-bar-item-color-selected);\n  fill: var(--mds-tab-bar-item-color-selected);\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-tab-bar-item-color: rgb(var(--tone-neutral-04));\n    --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n      --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n    --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));\n      --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02));\n    }\n  }\n}\n\n";
 const MdsTabBarItemStyle0 = mdsTabBarItemCss;
 
 const MdsTabBarItem = class {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsTabBarCss = "@tailwind utilities;\n\n:host{\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: rgb(var(--tone-neutral));\n  bottom: 0;\n  -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.15);\n  box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.15);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: distribute;\n  justify-content: space-around;\n  left: 0;\n  position: fixed;\n  right: 0;\n  -webkit-transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, color, box-shadow;\n  transition-property: background-color, color, box-shadow, -webkit-box-shadow;\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    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 2px 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      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\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      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n";
 const MdsTabBarStyle0 = mdsTabBarCss;

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
-const aria = require('./aria-8237fdab.js');
+const index = require('./index-eccfa195.js');
+const aria = require('./aria-0b8ae8a3.js');
 
 const mdsTabCss = "@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-scrollbar-margin: Sets the margin of the browser scroll bar (if supported)\n * @prop --mds-tab-scrollbar-radius: Sets the border-radius of the browser scroll bar (if supported)\n * @prop --mds-tab-scrollbar-size: Sets the height and width of the browser scroll bar (if supported)\n * @prop --mds-tab-scrollbar-thumb-background: Sets the background-color of the browser scroll bar thumb (if supported)\n * @prop --mds-tab-scrollbar-track-background: Sets the background-color of the browser scroll bar track (if supported)\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n */\n\n:host {\n\n  --mds-tab-duration: .75s;\n  --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n  --mds-tab-current-item: 2;\n  --mds-tab-scroll-scrollbar-radius: 0;\n  --mds-tab-scroll-scrollbar-margin: 0;\n  --mds-tab-scroll-scrollbar-size: 0.5rem;\n  --mds-tab-scroll-scrollbar-thumb-background: rgb(var(--tone-neutral-02) 0.3);\n  --mds-tab-scroll-scrollbar-track-background: rgb(var(--tone-neutral-06) 0.3);\n\n  display: grid;\n}\n\n.tabs{\n\n  gap: 0.5rem;\n\n  border-width: 0.125rem;\n\n  border-style: solid;\n\n  border-color: transparent;\n\n  padding: 0.5rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: rgb(var(--theme-default-06-secondary-background));\n  border-radius: 1rem;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  overflow: auto;\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n.contents {\n\n  --mds-tab-contents-height: auto;\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n    gap: 1.5rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-tab-contents-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  position: relative;\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n  transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot=\"content\"] ){\n\n  width: 100%;\n\n  min-width: 100%;\n\n  -webkit-animation-duration: var(--mds-tab-duration);\n\n  animation-duration: var(--mds-tab-duration);\n  -webkit-animation-fill-mode: forwards;\n  animation-fill-mode: forwards;\n  -webkit-animation-timing-function: var(--mds-tab-timing-function);\n  animation-timing-function: var(--mds-tab-timing-function);\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  scroll-snap-align: start;\n}\n\n::slotted( [slot=\"content\"][mds-tab-content-hidden] ) {\n    display: none !important;\n}\n\n@import '~@maggioli-design-system/styles/dist/tailwind/components.css';\n@tailwind components;\n@tailwind utilities;\n\n:host(:not([scrollbar])) .tabs {\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n  }\n\n:host(:not([scrollbar])) .tabs::-webkit-scrollbar {\n  display: none;\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar {\n  height: var(--mds-tab-scroll-scrollbar-size);\n  width: var(--mds-tab-scroll-scrollbar-size);\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar-track {\n  background-color: var(--mds-tab-scroll-scrollbar-track-background);\n  border-radius: var(--mds-tab-scroll-scrollbar-radius);\n  margin-block: var(--mds-tab-scroll-scrollbar-margin);\n  margin-inline: var(--mds-tab-scroll-scrollbar-margin);\n}\n\n:host([scrollbar]:not([scrollbar=\"false\"])) .tabs::-webkit-scrollbar-thumb {\n  background-color: var(--mds-tab-scroll-scrollbar-thumb-background);\n  border-radius: var(--mds-tab-scroll-scrollbar-radius);\n}\n\n@supports (scrollbar-color: transparent transparent) {\n  .tabs {\n    scrollbar-color: var(--mds-tab-scroll-scrollbar-thumb-background) var(--mds-tab-scroll-scrollbar-track-background);\n    scrollbar-width: thin;\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-tab-duration: 0s;\n\n    -webkit-transition-duration: 0s;\n\n    transition-duration: 0s;\n  }\n\n  .contents,\n  .tabs {\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\n      --mds-tab-duration: 0s;\n\n      -webkit-transition-duration: 0s;\n\n      transition-duration: 0s;\n    }\n  \n    .contents,\n    .tabs {\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  .tabs {\n    border-color: rgb(var(--tone-neutral-08));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    .tabs {\n      border-color: rgb(var(--tone-neutral-08));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  .tabs {\n    border-color: rgb(var(--tone-neutral-06));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    .tabs {\n      border-color: rgb(var(--tone-neutral-06));\n    }\n  }\n}\n\n\n";
 const MdsTabStyle0 = mdsTabCss;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsTableBodyCss = "@tailwind utilities;\n\n/**\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 */\n\n:host{\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-body-background);\n  display: table-row-group;\n  overflow: hidden;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n:host( [interactive]:hover ) {\n\n  --mds-table-body-background: var(--mds-table-body-background-hover);\n}\n\n:host(:last-child) ::slotted(*:last-child) {\n\n  --mds-table-cell-border-color: transparent;\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 MdsTableBodyStyle0 = mdsTableBodyCss;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsTableCellCss = "@tailwind utilities;\n\n/**\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  -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-cell-padding);\n  -webkit-transition-property: background-color, border-color, color;\n  transition-property: background-color, border-color, color;\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 MdsTableCellStyle0 = mdsTableCellCss;
@@ -13,7 +13,7 @@ const MdsTableCell = class {
         this.value = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '3bdade084b4338cd4c2cf2a0c94adaab9f6f1f34' }, index.h("slot", { key: '8bdb8b0d5e0e5cf6880f406e564e4a96520ccfc9' })));
+        return (index.h(index.Host, { key: 'ba2b1023ba3152b3bad3815cf9cc881f9c2dbd8f', role: "cell" }, index.h("slot", { key: 'e4301e2a7637473334a33ff03c1a115a0748a718' })));
     }
 };
 MdsTableCell.style = MdsTableCellStyle0;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsTableFooterCss = "\n:host {\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  border-top: var(--mds-table-cell-border-width) solid var(--mds-table-cell-border-color);\n  display: table-row;\n  overflow: hidden;\n  -webkit-transition-property: border-color;\n  transition-property: border-color;\n}\n\n::slotted(mds-table-cell) {\n\n  --mds-table-cell-border-color: transparent;\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 MdsTableFooterStyle0 = mdsTableFooterCss;

package/dist/cjs/mds-table-header-cell.cjs.entry.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const keyboardArrowUp = require('./keyboard-arrow-up-d4f16fb3.js');
 const keyboardArrowDown = require('./keyboard-arrow-down-a17b4ab5.js');
 const clsx = require('./clsx-fc789adc.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 = class {
@@ -67,9 +67,9 @@ const MdsTableHeaderCell = class {
                 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));
         };
@@ -109,8 +109,8 @@ const MdsTableHeaderCell = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'd74e353b01b4a9bda45eef16a4edec0c49a0c62f' }, this.sortable
-            ? index.h("mds-button", { class: "action", icon: clsx.clsx(this.direction === 'none' && miBaselineUnfoldMore, this.direction === 'asc' && keyboardArrowUp.miBaselineArrowUp, this.direction === 'desc' && keyboardArrowDown.miBaselineArrowDown), "icon-position": "right", onClick: this.sort, tone: "quiet", variant: "dark", size: "sm", part: "action" }, this.label)
+        return (index.h(index.Host, { key: '3d17c76c086828a39ad0090acabbebb3ea449198', role: "columnheader", "aria-sort": this.direction }, this.sortable
+            ? index.h("mds-button", { class: "action", icon: clsx.clsx(this.direction === 'none' && miBaselineUnfoldMore, this.direction === 'ascending' && keyboardArrowUp.miBaselineArrowUp, this.direction === 'descending' && keyboardArrowDown.miBaselineArrowDown), "icon-position": "right", onClick: this.sort, tone: "quiet", variant: "dark", size: "sm", part: "action" }, this.label)
             : index.h("mds-text", { class: "label", typography: "label", part: "label" }, this.label)));
     }
     get element() { return index.getElement(this); }

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const mdsTableHeaderCss = "@tailwind utilities;\n\n:host{\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  border-bottom: var(--mds-table-cell-border-width) solid var(--mds-table-cell-border-color);\n  display: table-row;\n  overflow: hidden;\n  -webkit-transition-property: border-color;\n  transition-property: border-color;\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 MdsTableHeaderStyle0 = mdsTableHeaderCss;

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

@@ -2,22 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
+const clsx = require('./clsx-fc789adc.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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.interactive = undefined;
+        this.overlayActions = undefined;
     }
     tableInteractiveHandler(event) {
         this.interactive = event.detail;
     }
+    componentWillLoad() {
+        this.actions = this.host.querySelector('[slot="action"]') !== null;
+    }
     render() {
-        return (index.h(index.Host, { key: '283e13bdc34ec2c034de9e422a3ad57ff023585e', role: "row" }, index.h("slot", { key: 'e0682272fcada8ee3afcf71e350d6a40c3ee6c82' })));
+        return (index.h(index.Host, { key: 'a336d00d38f7ced41c3febcb4b0c2c106ed61ca9', role: "row" }, index.h("slot", { key: 'a0a251d24deb3b7655613f6d15c118386db1bcba' }), this.actions
+            && index.h("div", { key: 'bebaef82204a44ac50487875a9f7bfe18f473517', class: clsx.clsx('actions-wrapper', isMobileDevice() && 'actions-wrapper--mobile'), role: "cell" }, index.h("div", { key: '57f2f06b534858b3ca3fb7e9d50a7098d0c24856', class: "actions" }, index.h("slot", { key: '9d5aceec024928169a6fd221f93d3e87b2c47386', name: "action" })))));
     }
+    get host() { return index.getElement(this); }
 };
 MdsTableRow.style = MdsTableRowStyle0;
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const clsx = require('./clsx-fc789adc.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 = class {
@@ -19,10 +19,25 @@ const MdsTable = class {
     }
     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 (index.h(index.Host, { key: '77e8beec5fa074a69651c0a2b5f87d4e890f51de' }, index.h("table", { key: '14243bf0f16c10aa5cb1295618100604ea32dfea', class: clsx.clsx('table', this.interactive && 'table--interactive'), role: "grid" }, index.h("slot", { key: 'fd2d0f1642b7878a3e1579536a17fa16e680f03e' }))));
+        return (index.h(index.Host, { key: 'f8dc8ae93a7803a18b0e7d03f34ca1b46286bac9' }, index.h("table", { key: '511db82bcadc15ed656129e4929e9c88a9694cc7', class: clsx.clsx('table', this.interactive && 'table--interactive'), role: "table" }, index.h("slot", { key: 'eb90aa29cd0f11fc60b4749f5808c5862f24e877' }))));
     }
+    get host() { return index.getElement(this); }
     static get watchers() { return {
         "interactive": ["onTableInteractive"]
     }; }

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 
 const typographyDefaultsVariant = {
     action: {
@@ -248,6 +248,8 @@ const MdsText = class {
             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');
@@ -284,7 +286,7 @@ const MdsText = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '52c81dcb61a06c57c6e0438bf043639657b444f4' }, index.h(this.tag, { key: '57a01393cfcff5783f4adede212ad497c8dbcc84', class: "text" }, !this.text
+        return (index.h(index.Host, { key: '1f42572d1faca24c60e7f351addd83674d070695' }, index.h(this.tag, { key: '1f1e7663e9181704fce34dd04b89d30924295d98', class: "text" }, !this.text
             ? index.h("slot", null)
             : this.text)));
     }

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const unit = require('./unit-e289e834.js');
 const clsx = require('./clsx-fc789adc.js');
 
@@ -15,6 +15,8 @@ const MdsToast = class {
         this.closedEvent = index.createEvent(this, "mdsToastClose", 7);
         this.cssDismissAnimationDuration = 300; // hardcoded from CSS :-(
         this.reloadTimeListeners = (visible) => {
+            if (typeof window === 'undefined')
+                return;
             if (!this.duration) {
                 return;
             }
@@ -46,6 +48,8 @@ const MdsToast = class {
         this.position = 'bottom-center';
     }
     updateCSSCustomProps() {
+        if (typeof window === 'undefined')
+            return;
         const elementStyles = window.getComputedStyle(this.hostElement);
         this.cssDismissAnimationDuration = unit.cssDurationToMilliseconds(elementStyles.getPropertyValue('--mds-tab-duration'));
     }
@@ -69,9 +73,9 @@ const MdsToast = class {
         this.reloadTimeListeners(!!this.visible);
     }
     render() {
-        return (index.h(index.Host, { key: '88b5051aa23eb7ad806ed93a1b8f9fa5dae03bf1' }, index.h("div", { key: '4d4b94763233581fbd8528ce2ad7d0a1dfe081f1', class: clsx.clsx('dialog', this.position && `to-${this.position}`, this.visible && 'dialog--visible') }, index.h("slot", { key: '6b9fb4fe5f72a62494725d99d6132f1f26a98c80', name: "icon" }), this.hasText &&
-            index.h("mds-text", { key: 'f45d6a5af8063bb70e68ad73484a02a4669ed9e4', typography: "caption" }, index.h("slot", { key: '2f9931a45d5fc92964406d6672696a58352dd37b' })), this.actions &&
-            index.h("div", { key: '627ec1a987768197b7566a3bf5a25f227c12926c', class: "actions" }, index.h("slot", { key: 'fe515bf2cb916a603d622da9a7e655829b3a971e', name: "action" })))));
+        return (index.h(index.Host, { key: '4a2d03552d46561d2cc73e490f397543449ff846' }, index.h("div", { key: 'a72cb948ca9d2522c649657fa97e2d7703523fc5', class: clsx.clsx('dialog', this.position && `to-${this.position}`, this.visible && 'dialog--visible') }, index.h("slot", { key: '09314e6dae791cd57f4e0420598de412d7154dbf', name: "icon" }), this.hasText &&
+            index.h("mds-text", { key: '4d0f1c1617746e0e6ef8c2469d325bce7c511ce6', typography: "caption" }, index.h("slot", { key: '5673720eb828a336bf2be4364d4cece2d0ca61fa' })), this.actions &&
+            index.h("div", { key: 'aacbf04d08c9ad2f44ac6b6bc413266422539013', class: "actions" }, index.h("slot", { key: 'daab8a469b83a7d433a9416079060b559878667b', name: "action" })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-58e05c82.js');
+const index = require('./index-eccfa195.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-4d912aff.js');
 
 const arrowSvg = `<svg width="15" height="9" viewBox="0 0 15 9" xmlns="http://www.w3.org/2000/svg">
   <path d="M5.9 1.13333C6.7 0.0666664 8.3 0.0666666 9.1 1.13333L15 9H0L5.9 1.13333Z"/>
@@ -170,17 +170,16 @@ const MdsTooltip = class {
         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) {
@@ -191,7 +190,7 @@ const MdsTooltip = class {
         this.cleanupAutoUpdate = () => { return; };
     }
     render() {
-        return (index.h(index.Host, { key: 'f7d50f49f796c7158c60651bedbaeeebe0c57556' }, index.h("div", { key: '9469120eab49025399b790f089d6497bbf45dc67', class: "arrow", innerHTML: arrowSvg }), index.h("mds-text", { key: '77ad69e1b220720f14bfd63b8611395df7187028', class: "text", typography: this.typography, part: "text" }, index.h("slot", { key: '2de795c43d3a397d44bef32dff9412ac13ad249f' }))));
+        return (index.h(index.Host, { key: 'ff71ad7fb2417de2f3390bc9abd42f9a0ba8e01c' }, index.h("div", { key: 'b3bc38cd415b4a2e14310a62934d0f1560aa5f73', class: "arrow", innerHTML: arrowSvg }), index.h("mds-text", { key: '0425954f825fdd0a21123e5361255a8163a7a111', class: "text", typography: this.typography, part: "text" }, index.h("slot", { key: '53057efb067c1ce8b50f489679d214309f7d46d4' }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-url-view.cjs.entry.js

@@ -2,12 +2,50 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
-const close = require('./close-8bff2816.js');
-const keyboardManager = require('./keyboard-manager-fa9d665b.js');
+const index = require('./index-eccfa195.js');
+const close$4 = require('./close-8bff2816.js');
+const keyboardManager = require('./keyboard-manager-952eef32.js');
+const locale = require('./locale-9add6645.js');
+require('./_commonjsHelpers-e6ff1d6e.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;
 
@@ -16,6 +54,12 @@ const MdsUrlView = class {
         index.registerInstance(this, hostRef);
         this.closeEvent = index.createEvent(this, "mdsUrlViewClose", 7);
         this.km = new keyboardManager.KeyboardManager();
+        this.t = new locale.Locale({
+            el: localeEl,
+            en: localeEn,
+            es: localeEs,
+            it: localeIt,
+        });
         this.urlDomain = (url) => {
             const domain = new URL(url);
             return domain.hostname.replace('www.', '');
@@ -26,10 +70,17 @@ const MdsUrlView = class {
         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');
@@ -37,7 +88,7 @@ const MdsUrlView = class {
         this.km.attachClickBehavior();
     }
     render() {
-        return (index.h(index.Host, { key: '110fdcdf82eaa7e3406a52b4207f6ae5142d5a45' }, index.h("div", { key: '15abd313014d613ff438930ad2f894ffa60da776', class: "window" }, index.h("header", { key: '698b2eee40e5c3b78200a93c0993d715540a73f3', class: "header" }, index.h("i", { key: 'b0743039226043435612e8b8a15aed8cae4bd94a', class: "browser-icon", innerHTML: miBaselineExplore }), this.domain && index.h("mds-text", { key: '30c70749874a927514df15b6e50a80851767a0c7', class: "title", typography: "caption" }, this.urlDomain(this.src)), index.h("mds-button", { key: '2aa2c9e05b7526e76bef3623fd1d1118e49ade36', class: "button-close", icon: close.miBaselineClose, onClick: this.closeUrlView })), index.h("iframe", { key: 'ca16f17cf998f6ac191fb56e148fec21e986a5e0', class: "iframe", src: this.src }))));
+        return (index.h(index.Host, { key: '05bbf8e0a83e6a04165e50cf97578a377f192f4e', "aria-label": this.t.get('previewURL', { url: this.urlDomain(this.src) }) }, index.h("div", { key: '389741c692dc63ed86d92318b47f5ff72ac97e3e', class: "window" }, index.h("div", { key: 'ce040d54af12a330c6e35607cc9fc8f2727dec0f', class: "header" }, index.h("i", { key: '1bea576ed76a5f52f2a4f2582acb33e914a7885c', class: "browser-icon", innerHTML: miBaselineExplore }), this.domain && index.h("mds-text", { key: 'a8b926114324fd13e4a9a4950c3cc9dcb957d665', class: "title", typography: "caption" }, this.urlDomain(this.src)), index.h("mds-button", { key: '0b05fb02b711380045cb15b5d0c851a9acfe069a', title: this.t.get('close'), class: "button-close", icon: close$4.miBaselineClose, onClick: this.closeUrlView })), index.h("iframe", { key: 'b90c46c762cb822085052ab041a01f8ca8366b74', class: "iframe", "aria-label": this.t.get('iframeURL', { url: this.urlDomain(this.src) }), src: this.src }))));
     }
     get host() { return index.getElement(this); }
 };