@maggioli-design-system/mds-table-row 4.8.0 → 4.8.1

package/dist/cjs/{index-6ff13374.js → index-19c36c53.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'mds-table-row';
-const BUILD = /* mds-table-row */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: false, propString: false, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
+const BUILD = /* mds-table-row */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: false, propString: false, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: false };
 
 /*
  Stencil Client Platform v4.22.2 | MIT Licensed | https://stenciljs.com
@@ -424,6 +424,27 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       const newClasses = parseClassList(newValue);
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+    } else if (memberName === "style") {
+      {
+        for (const prop in oldValue) {
+          if (!newValue || newValue[prop] == null) {
+            if (prop.includes("-")) {
+              elm.style.removeProperty(prop);
+            } else {
+              elm.style[prop] = "";
+            }
+          }
+        }
+      }
+      for (const prop in newValue) {
+        if (!oldValue || newValue[prop] !== oldValue[prop]) {
+          if (prop.includes("-")) {
+            elm.style.setProperty(prop, newValue[prop]);
+          } else {
+            elm.style[prop] = newValue[prop];
+          }
+        }
+      }
     } else if (memberName === "key") ; else {
       const isComplex = isComplexType(newValue);
       if ((isProp || isComplex && newValue !== null) && !isSvg) {
@@ -811,12 +832,16 @@ var postUpdateComponent = (hostRef) => {
   const tagName = hostRef.$cmpMeta$.$tagName$;
   const elm = hostRef.$hostElement$;
   const endPostUpdate = createTime("postUpdate", tagName);
+  const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
       addHydratedFlag(elm);
     }
+    {
+      safeCall(instance, "componentDidLoad");
+    }
     endPostUpdate();
     {
       hostRef.$onReadyResolve$(elm);

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ff13374.js');
+const index = require('./index-19c36c53.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {

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

@@ -2,17 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ff13374.js');
+const index = require('./index-19c36c53.js');
 
-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);
-};
-
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-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 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: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.actions-view {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  inset: 0;\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  display: -ms-inline-flexbox;\n  display: inline-flex;\n  gap: var(--mds-table-row-actions-gap);\n  inset: 0;\n  margin-right: 100%;\n  padding-right: 0;\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, padding-right, -webkit-transform;\n  transition-property: background-color, padding-right, -webkit-transform;\n  transition-property: transform, background-color, padding-right;\n  transition-property: transform, background-color, padding-right, -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:host(:hover) .actions {\n  -webkit-transform: translateX(100%);\n  transform: translateX(100%);\n}\n\n:host([overlay-actions]:not([overlay-actions=\"false\"])) .actions {\n  padding-right: var(--mds-table-cell-padding);\n  -webkit-transform: translateX(100%);\n  transform: translateX(100%);\n}\n\n:host([overlay-actions]:not([overlay-actions=\"false\"]):hover) .actions {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .actions {\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    .actions {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
 const MdsTableRowStyle0 = mdsTableRowCss;
 
 const MdsTableRow = class {
@@ -25,11 +17,24 @@ const MdsTableRow = class {
         this.interactive = event.detail;
     }
     componentWillLoad() {
-        this.actions = this.host.querySelector('[slot="action"]') !== null;
+        this.hasActions = this.host.querySelector('[slot="action"]') !== null;
+    }
+    componentDidLoad() {
+        var _a;
+        if (this.hasActions) {
+            this.actions = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.actions');
+            this.sizerWidth = `${this.actions.offsetWidth.toString()}px`;
+        }
     }
     render() {
-        return (index.h(index.Host, { key: '7402ca1cfdaf3e7846dbf29fad4771617c4f0aee', role: "row" }, index.h("slot", { key: '6671fe1e06369e2486157747c41921266553636c' }), this.actions
-            && index.h("div", { key: 'e58f247b2f1f6c4263c85615209356f212fa727a', class: clsx('actions-wrapper', isMobileDevice() && 'actions-wrapper--mobile'), role: "cell" }, index.h("div", { key: '1f952cd70074ee64cbef3b96c562cf4d76efd8e7', class: "actions" }, index.h("slot", { key: '7d9eaf9364cd8626a300bddba7c6c9bd449ae773', name: "action" })))));
+        return (index.h(index.Host, { key: '44d102599e90a2abb4cf32ea398d6c3f194e6177', role: "row" }, index.h("slot", { key: '3bc595925a4dafac49d206692fae394754b10d70' }), this.hasActions &&
+            index.h("mds-table-cell", { key: '8b1a1b0e32db91cc03988de856fea521d25b8424', class: "actions-cell" }, index.h("div", { key: '5867330d68358f30429123a85027b72def045933', class: "actions-sizer", style: {
+                    minHeight: '1px',
+                    maxWidth: this.sizerWidth,
+                    minWidth: this.sizerWidth,
+                } }), index.h("div", { key: '15d6e37bb432b0671e8a5fa447a17fde060e2d60', class: "actions-view" }, index.h("div", { key: '63cf3b620e6c428ce7cb318e07fb35cec631b0c3', class: "actions", style: {
+                    marginRight: `calc(${this.sizerWidth} + var(--mds-table-cell-padding))`,
+                } }, index.h("slot", { key: '0a479f584fd1ed0c927b39006de79747c7e3ed87', name: "action" }))))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ff13374.js');
+const index = require('./index-19c36c53.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*

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

@@ -15,63 +15,6 @@
 
 }
 
-.actions-wrapper {
-  inset: 0;
-  display: flex;
-  justify-content: end;
-  pointer-events: none;
-  position: absolute;
-}
-
-.actions {
-  align-items: center;
-  background-color: var(--mds-table-cell-background);
-  border-bottom-color: transparent;
-  border-bottom-style: solid;
-  border-bottom-width: var(--mds-table-border-width);
-  border-top-color: var(--mds-table-border-color);
-  border-top-style: solid;
-  border-top-width: var(--mds-table-border-width);
-  box-sizing: border-box;
-  display: inline-flex;
-  gap: var(--mds-table-row-actions-gap);
-  height: 100%;
-  margin-top: calc(var(--mds-table-border-width) * -1);
-  padding: var(--mds-table-cell-padding);
-  pointer-events: auto;
-  position: sticky;
-  right: 0;
-  transform: translateX(100%);
-  transition-duration: 500ms;
-  transition-property: transform, background-color;
-  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-}
-
-.actions-wrapper--mobile {
-  position: relative;
-}
-
-.actions-wrapper--mobile .actions {
-  position: static;
-  transform: translateX(0);
-}
-
-:host(:hover) .actions {
-  transform: translateX(0);
-}
-
-:host([overlay-actions]:not([overlay-actions="false"])) .actions-wrapper:not(.actions-wrapper--mobile) .actions {
-  transform: translateX(100%);
-}
-
-:host([interactive]:not([interactive="false"])) .actions {
-  --mds-table-cell-background: var(--mds-table-body-background);
-}
-
-:host([interactive]:not([interactive="false"]):hover) .actions {
-  --mds-table-cell-background: var(--mds-table-cell-background-hover);
-}
-
 :host([sorted][interactive]:not([interactive="false"])) ::slotted(mds-table-cell[sorted]) {
 
   --mds-table-cell-background: var(--mds-table-cell-background-hover);
@@ -99,8 +42,48 @@
   --mds-table-cell-background: var(--mds-table-body-background-hover);
 }
 
+.actions-view {
+  align-items: center;
+  display: flex;
+  inset: 0;
+  justify-content: end;
+  pointer-events: none;
+  position: absolute;
+}
+
+.actions {
+  align-items: center;
+  background-color: var(--mds-table-cell-background);
+  display: inline-flex;
+  gap: var(--mds-table-row-actions-gap);
+  inset: 0;
+  margin-right: 100%;
+  padding-right: 0;
+  pointer-events: auto;
+  position: sticky;
+  right: 0;
+  transform: translateX(100%);
+  transition-duration: 500ms;
+  transition-property: transform, background-color, padding-right;
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+:host(:hover) .actions {
+  transform: translateX(100%);
+}
+
+:host([overlay-actions]:not([overlay-actions="false"])) .actions {
+  padding-right: var(--mds-table-cell-padding);
+  transform: translateX(100%);
+}
+
+:host([overlay-actions]:not([overlay-actions="false"]):hover) .actions {
+  transform: translateX(0);
+}
+
 @container style(--magma-pref-animation: reduce) {
-  :host {
+  :host,
+  .actions {
     transition-duration: 0s;
   }
 }
@@ -108,7 +91,8 @@
 @container style(--magma-pref-animation: system) {
 
   @media (prefers-reduced-motion) {
-    :host {
+    :host,
+    .actions {
       transition-duration: 0s;
     }
   }

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { isMobileDevice } from "../../common/device";
-import clsx from "clsx";
+// import { isMobileDevice } from '@common/device'
+// import clsx from 'clsx'
 /**
  * @slot default - Put `mds-table-cell` element/s.
  */
@@ -13,11 +13,24 @@ export class MdsTableRow {
         this.interactive = event.detail;
     }
     componentWillLoad() {
-        this.actions = this.host.querySelector('[slot="action"]') !== null;
+        this.hasActions = this.host.querySelector('[slot="action"]') !== null;
+    }
+    componentDidLoad() {
+        var _a;
+        if (this.hasActions) {
+            this.actions = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.actions');
+            this.sizerWidth = `${this.actions.offsetWidth.toString()}px`;
+        }
     }
     render() {
-        return (h(Host, { key: '7402ca1cfdaf3e7846dbf29fad4771617c4f0aee', role: "row" }, h("slot", { key: '6671fe1e06369e2486157747c41921266553636c' }), this.actions
-            && h("div", { key: 'e58f247b2f1f6c4263c85615209356f212fa727a', class: clsx('actions-wrapper', isMobileDevice() && 'actions-wrapper--mobile'), role: "cell" }, h("div", { key: '1f952cd70074ee64cbef3b96c562cf4d76efd8e7', class: "actions" }, h("slot", { key: '7d9eaf9364cd8626a300bddba7c6c9bd449ae773', name: "action" })))));
+        return (h(Host, { key: '44d102599e90a2abb4cf32ea398d6c3f194e6177', role: "row" }, h("slot", { key: '3bc595925a4dafac49d206692fae394754b10d70' }), this.hasActions &&
+            h("mds-table-cell", { key: '8b1a1b0e32db91cc03988de856fea521d25b8424', class: "actions-cell" }, h("div", { key: '5867330d68358f30429123a85027b72def045933', class: "actions-sizer", style: {
+                    minHeight: '1px',
+                    maxWidth: this.sizerWidth,
+                    minWidth: this.sizerWidth,
+                } }), h("div", { key: '15d6e37bb432b0671e8a5fa447a17fde060e2d60', class: "actions-view" }, h("div", { key: '63cf3b620e6c428ce7cb318e07fb35cec631b0c3', class: "actions", style: {
+                    marginRight: `calc(${this.sizerWidth} + var(--mds-table-cell-padding))`,
+                } }, h("slot", { key: '0a479f584fd1ed0c927b39006de79747c7e3ed87', name: "action" }))))));
     }
     static get is() { return "mds-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,14 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-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);
-};
-
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-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 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: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.actions-view {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  inset: 0;\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  display: -ms-inline-flexbox;\n  display: inline-flex;\n  gap: var(--mds-table-row-actions-gap);\n  inset: 0;\n  margin-right: 100%;\n  padding-right: 0;\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, padding-right, -webkit-transform;\n  transition-property: background-color, padding-right, -webkit-transform;\n  transition-property: transform, background-color, padding-right;\n  transition-property: transform, background-color, padding-right, -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:host(:hover) .actions {\n  -webkit-transform: translateX(100%);\n  transform: translateX(100%);\n}\n\n:host([overlay-actions]:not([overlay-actions=\"false\"])) .actions {\n  padding-right: var(--mds-table-cell-padding);\n  -webkit-transform: translateX(100%);\n  transform: translateX(100%);\n}\n\n:host([overlay-actions]:not([overlay-actions=\"false\"]):hover) .actions {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .actions {\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    .actions {\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 {
@@ -23,11 +15,24 @@ const MdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(class MdsTableRow extends
         this.interactive = event.detail;
     }
     componentWillLoad() {
-        this.actions = this.host.querySelector('[slot="action"]') !== null;
+        this.hasActions = this.host.querySelector('[slot="action"]') !== null;
+    }
+    componentDidLoad() {
+        var _a;
+        if (this.hasActions) {
+            this.actions = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.actions');
+            this.sizerWidth = `${this.actions.offsetWidth.toString()}px`;
+        }
     }
     render() {
-        return (h(Host, { key: '7402ca1cfdaf3e7846dbf29fad4771617c4f0aee', role: "row" }, h("slot", { key: '6671fe1e06369e2486157747c41921266553636c' }), this.actions
-            && h("div", { key: 'e58f247b2f1f6c4263c85615209356f212fa727a', class: clsx('actions-wrapper', isMobileDevice() && 'actions-wrapper--mobile'), role: "cell" }, h("div", { key: '1f952cd70074ee64cbef3b96c562cf4d76efd8e7', class: "actions" }, h("slot", { key: '7d9eaf9364cd8626a300bddba7c6c9bd449ae773', name: "action" })))));
+        return (h(Host, { key: '44d102599e90a2abb4cf32ea398d6c3f194e6177', role: "row" }, h("slot", { key: '3bc595925a4dafac49d206692fae394754b10d70' }), this.hasActions &&
+            h("mds-table-cell", { key: '8b1a1b0e32db91cc03988de856fea521d25b8424', class: "actions-cell" }, h("div", { key: '5867330d68358f30429123a85027b72def045933', class: "actions-sizer", style: {
+                    minHeight: '1px',
+                    maxWidth: this.sizerWidth,
+                    minWidth: this.sizerWidth,
+                } }), h("div", { key: '15d6e37bb432b0671e8a5fa447a17fde060e2d60', class: "actions-view" }, h("div", { key: '63cf3b620e6c428ce7cb318e07fb35cec631b0c3', class: "actions", style: {
+                    marginRight: `calc(${this.sizerWidth} + var(--mds-table-cell-padding))`,
+                } }, h("slot", { key: '0a479f584fd1ed0c927b39006de79747c7e3ed87', name: "action" }))))));
     }
     get host() { return this; }
     static get style() { return MdsTableRowStyle0; }

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-12-04T16:25:25",
+  "timestamp": "2024-12-05T16:19:08",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.22.2",

package/dist/esm/{index-0a14d3b4.js → index-a948f479.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'mds-table-row';
-const BUILD = /* mds-table-row */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: false, propString: false, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
+const BUILD = /* mds-table-row */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: false, propString: false, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: false };
 
 /*
  Stencil Client Platform v4.22.2 | MIT Licensed | https://stenciljs.com
@@ -402,6 +402,27 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       const newClasses = parseClassList(newValue);
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+    } else if (memberName === "style") {
+      {
+        for (const prop in oldValue) {
+          if (!newValue || newValue[prop] == null) {
+            if (prop.includes("-")) {
+              elm.style.removeProperty(prop);
+            } else {
+              elm.style[prop] = "";
+            }
+          }
+        }
+      }
+      for (const prop in newValue) {
+        if (!oldValue || newValue[prop] !== oldValue[prop]) {
+          if (prop.includes("-")) {
+            elm.style.setProperty(prop, newValue[prop]);
+          } else {
+            elm.style[prop] = newValue[prop];
+          }
+        }
+      }
     } else if (memberName === "key") ; else {
       const isComplex = isComplexType(newValue);
       if ((isProp || isComplex && newValue !== null) && !isSvg) {
@@ -789,12 +810,16 @@ var postUpdateComponent = (hostRef) => {
   const tagName = hostRef.$cmpMeta$.$tagName$;
   const elm = hostRef.$hostElement$;
   const endPostUpdate = createTime("postUpdate", tagName);
+  const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
       addHydratedFlag(elm);
     }
+    {
+      safeCall(instance, "componentDidLoad");
+    }
     endPostUpdate();
     {
       hostRef.$onReadyResolve$(elm);

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { b as bootstrapLazy } from './index-0a14d3b4.js';
-export { s as setNonce } from './index-0a14d3b4.js';
+import { b as bootstrapLazy } from './index-a948f479.js';
+export { s as setNonce } from './index-a948f479.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {

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

@@ -1,14 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-0a14d3b4.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a948f479.js';
 
-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);
-};
-
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-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 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: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.actions-view {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  inset: 0;\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  display: -ms-inline-flexbox;\n  display: inline-flex;\n  gap: var(--mds-table-row-actions-gap);\n  inset: 0;\n  margin-right: 100%;\n  padding-right: 0;\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, padding-right, -webkit-transform;\n  transition-property: background-color, padding-right, -webkit-transform;\n  transition-property: transform, background-color, padding-right;\n  transition-property: transform, background-color, padding-right, -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:host(:hover) .actions {\n  -webkit-transform: translateX(100%);\n  transform: translateX(100%);\n}\n\n:host([overlay-actions]:not([overlay-actions=\"false\"])) .actions {\n  padding-right: var(--mds-table-cell-padding);\n  -webkit-transform: translateX(100%);\n  transform: translateX(100%);\n}\n\n:host([overlay-actions]:not([overlay-actions=\"false\"]):hover) .actions {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .actions {\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    .actions {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
 const MdsTableRowStyle0 = mdsTableRowCss;
 
 const MdsTableRow = class {
@@ -21,11 +13,24 @@ const MdsTableRow = class {
         this.interactive = event.detail;
     }
     componentWillLoad() {
-        this.actions = this.host.querySelector('[slot="action"]') !== null;
+        this.hasActions = this.host.querySelector('[slot="action"]') !== null;
+    }
+    componentDidLoad() {
+        var _a;
+        if (this.hasActions) {
+            this.actions = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.actions');
+            this.sizerWidth = `${this.actions.offsetWidth.toString()}px`;
+        }
     }
     render() {
-        return (h(Host, { key: '7402ca1cfdaf3e7846dbf29fad4771617c4f0aee', role: "row" }, h("slot", { key: '6671fe1e06369e2486157747c41921266553636c' }), this.actions
-            && h("div", { key: 'e58f247b2f1f6c4263c85615209356f212fa727a', class: clsx('actions-wrapper', isMobileDevice() && 'actions-wrapper--mobile'), role: "cell" }, h("div", { key: '1f952cd70074ee64cbef3b96c562cf4d76efd8e7', class: "actions" }, h("slot", { key: '7d9eaf9364cd8626a300bddba7c6c9bd449ae773', name: "action" })))));
+        return (h(Host, { key: '44d102599e90a2abb4cf32ea398d6c3f194e6177', role: "row" }, h("slot", { key: '3bc595925a4dafac49d206692fae394754b10d70' }), this.hasActions &&
+            h("mds-table-cell", { key: '8b1a1b0e32db91cc03988de856fea521d25b8424', class: "actions-cell" }, h("div", { key: '5867330d68358f30429123a85027b72def045933', class: "actions-sizer", style: {
+                    minHeight: '1px',
+                    maxWidth: this.sizerWidth,
+                    minWidth: this.sizerWidth,
+                } }), h("div", { key: '15d6e37bb432b0671e8a5fa447a17fde060e2d60', class: "actions-view" }, h("div", { key: '63cf3b620e6c428ce7cb318e07fb35cec631b0c3', class: "actions", style: {
+                    marginRight: `calc(${this.sizerWidth} + var(--mds-table-cell-padding))`,
+                } }, h("slot", { key: '0a479f584fd1ed0c927b39006de79747c7e3ed87', name: "action" }))))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-0a14d3b4.js';
-export { s as setNonce } from './index-0a14d3b4.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-a948f479.js';
+export { s as setNonce } from './index-a948f479.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*

package/dist/esm-es5/index-a948f479.js

@@ -0,0 +1 @@
+var __extends=this&&this.__extends||function(){var e=function(r,t){e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,r){e.__proto__=r}||function(e,r){for(var t in r)if(Object.prototype.hasOwnProperty.call(r,t))e[t]=r[t]};return e(r,t)};return function(r,t){if(typeof t!=="function"&&t!==null)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");e(r,t);function n(){this.constructor=r}r.prototype=t===null?Object.create(t):(n.prototype=t.prototype,new n)}}();var __awaiter=this&&this.__awaiter||function(e,r,t,n){function a(e){return e instanceof t?e:new t((function(r){r(e)}))}return new(t||(t=Promise))((function(t,i){function o(e){try{u(n.next(e))}catch(e){i(e)}}function s(e){try{u(n["throw"](e))}catch(e){i(e)}}function u(e){e.done?t(e.value):a(e.value).then(o,s)}u((n=n.apply(e,r||[])).next())}))};var __generator=this&&this.__generator||function(e,r){var t={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},n,a,i,o;return o={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function s(e){return function(r){return u([e,r])}}function u(s){if(n)throw new TypeError("Generator is already executing.");while(o&&(o=0,s[0]&&(t=0)),t)try{if(n=1,a&&(i=s[0]&2?a["return"]:s[0]?a["throw"]||((i=a["return"])&&i.call(a),0):a.next)&&!(i=i.call(a,s[1])).done)return i;if(a=0,i)s=[s[0]&2,i.value];switch(s[0]){case 0:case 1:i=s;break;case 4:t.label++;return{value:s[1],done:false};case 5:t.label++;a=s[1];s=[0];continue;case 7:s=t.ops.pop();t.trys.pop();continue;default:if(!(i=t.trys,i=i.length>0&&i[i.length-1])&&(s[0]===6||s[0]===2)){t=0;continue}if(s[0]===3&&(!i||s[1]>i[0]&&s[1]<i[3])){t.label=s[1];break}if(s[0]===6&&t.label<i[1]){t.label=i[1];i=s;break}if(i&&t.label<i[2]){t.label=i[2];t.ops.push(s);break}if(i[2])t.ops.pop();t.trys.pop();continue}s=r.call(e,t)}catch(e){s=[6,e];a=0}finally{n=i=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,r,t){if(t||arguments.length===2)for(var n=0,a=r.length,i;n<a;n++){if(i||!(n in r)){if(!i)i=Array.prototype.slice.call(r,0,n);i[n]=r[n]}}return e.concat(i||Array.prototype.slice.call(r))};var NAMESPACE="mds-table-row";var BUILD={allRenderFn:true,appendChildSlotFix:false,asyncLoading:true,asyncQueue:false,attachStyles:true,cloneNodeFix:false,cmpDidLoad:true,cmpDidRender:false,cmpDidUnload:false,cmpDidUpdate:false,cmpShouldUpdate:false,cmpWillLoad:true,cmpWillRender:false,cmpWillUpdate:false,connectedCallback:false,constructableCSS:true,cssAnnotations:true,devTools:false,disconnectedCallback:false,element:false,event:false,experimentalScopedSlotChanges:false,experimentalSlotFixes:false,formAssociated:false,hasRenderFn:true,hostListener:true,hostListenerTarget:true,hostListenerTargetBody:false,hostListenerTargetDocument:true,hostListenerTargetParent:false,hostListenerTargetWindow:false,hotModuleReplacement:false,hydrateClientSide:false,hydrateServerSide:false,hydratedAttribute:true,hydratedClass:false,hydratedSelectorName:"hydrated",initializeNextTick:false,invisiblePrehydration:true,isDebug:false,isDev:false,isTesting:false,lazyLoad:true,lifecycle:true,lifecycleDOMEvents:false,member:true,method:false,mode:false,observeAttribute:true,profile:false,prop:true,propBoolean:true,propMutable:true,propNumber:false,propString:false,reflect:true,scoped:false,scopedSlotTextContentFix:false,scriptDataOpts:false,shadowDelegatesFocus:false,shadowDom:true,slot:true,slotChildNodesFix:false,slotRelocation:false,state:false,style:true,svg:false,taskQueue:true,transformTagName:false,updatable:true,vdomAttribute:true,vdomClass:true,vdomFunctional:false,vdomKey:true,vdomListener:false,vdomPropOrAttr:true,vdomRef:false,vdomRender:true,vdomStyle:true,vdomText:true,vdomXlink:false,watchCallback:false};var __defProp=Object.defineProperty;var __export=function(e,r){for(var t in r)__defProp(e,t,{get:r[t],enumerable:true})};var hostRefs=new WeakMap;var getHostRef=function(e){return hostRefs.get(e)};var registerInstance=function(e,r){return hostRefs.set(r.t=e,r)};var registerHost=function(e,r){var t={i:0,$hostElement$:e,o:r,u:new Map};{t.l=new Promise((function(e){return t.v=e}));e["s-p"]=[];e["s-rc"]=[]}return hostRefs.set(e,t)};var isMemberInElement=function(e,r){return r in e};var consoleError=function(e,r){return(0,console.error)(e,r)};var cmpModules=new Map;var loadModule=function(e,r,t){var n=e.p.replace(/-/g,"_");var a=e.m;if(!a){return void 0}var i=cmpModules.get(a);if(i){return i[n]}if(!t||!BUILD.hotModuleReplacement){var o=function(e){cmpModules.set(a,e);return e[n]};switch(a){case"mds-table-row":return import("./mds-table-row.entry.js").then(o,consoleError)}}return import("./".concat(a,".entry.js").concat("")).then((function(e){{cmpModules.set(a,e)}return e[n]}),consoleError)};var styles=new Map;var HYDRATED_CSS="{visibility:hidden}[hydrated]{visibility:inherit}";var SLOT_FB_CSS="slot-fb{display:contents}slot-fb[hidden]{display:none}";var win=typeof window!=="undefined"?window:{};var doc=win.document||{head:{}};var plt={i:0,h:"",jmp:function(e){return e()},raf:function(e){return requestAnimationFrame(e)},ael:function(e,r,t,n){return e.addEventListener(r,t,n)},rel:function(e,r,t,n){return e.removeEventListener(r,t,n)},ce:function(e,r){return new CustomEvent(e,r)}};var supportsListenerOptions=function(){var e=false;try{doc.addEventListener("e",null,Object.defineProperty({},"passive",{get:function(){e=true}}))}catch(e){}return e}();var promiseResolve=function(e){return Promise.resolve(e)};var supportsConstructableStylesheets=function(){try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(e){}return false}();var queuePending=false;var queueDomReads=[];var queueDomWrites=[];var queueTask=function(e,r){return function(t){e.push(t);if(!queuePending){queuePending=true;if(r&&plt.i&4){nextTick(flush)}else{plt.raf(flush)}}}};var consume=function(e){for(var r=0;r<e.length;r++){try{e[r](performance.now())}catch(e){consoleError(e)}}e.length=0};var flush=function(){consume(queueDomReads);{consume(queueDomWrites);if(queuePending=queueDomReads.length>0){plt.raf(flush)}}};var nextTick=function(e){return promiseResolve().then(e)};var writeTask=queueTask(queueDomWrites,true);var EMPTY_OBJ={};var isDef=function(e){return e!=null};var isComplexType=function(e){e=typeof e;return e==="object"||e==="function"};function queryNonceMetaTagContent(e){var r,t,n;return(n=(t=(r=e.head)==null?void 0:r.querySelector('meta[name="csp-nonce"]'))==null?void 0:t.getAttribute("content"))!=null?n:void 0}var result_exports={};__export(result_exports,{err:function(){return err},map:function(){return map},ok:function(){return ok},unwrap:function(){return unwrap},unwrapErr:function(){return unwrapErr}});var ok=function(e){return{isOk:true,isErr:false,value:e}};var err=function(e){return{isOk:false,isErr:true,value:e}};function map(e,r){if(e.isOk){var t=r(e.value);if(t instanceof Promise){return t.then((function(e){return ok(e)}))}else{return ok(t)}}if(e.isErr){var n=e.value;return err(n)}throw"should never get here"}var unwrap=function(e){if(e.isOk){return e.value}else{throw e.value}};var unwrapErr=function(e){if(e.isErr){return e.value}else{throw e.value}};var createTime=function(e,r){if(r===void 0){r=""}{return function(){return}}};var uniqueTime=function(e,r){{return function(){return}}};var h=function(e,r){var t=[];for(var n=2;n<arguments.length;n++){t[n-2]=arguments[n]}var a=null;var i=null;var o=false;var s=false;var u=[];var l=function(r){for(var t=0;t<r.length;t++){a=r[t];if(Array.isArray(a)){l(a)}else if(a!=null&&typeof a!=="boolean"){if(o=typeof e!=="function"&&!isComplexType(a)){a=String(a)}if(o&&s){u[u.length-1].S+=a}else{u.push(o?newVNode(null,a):a)}s=o}}};l(t);if(r){if(r.key){i=r.key}{var f=r.className||r.class;if(f){r.class=typeof f!=="object"?f:Object.keys(f).filter((function(e){return f[e]})).join(" ")}}}var c=newVNode(e,null);c.C=r;if(u.length>0){c._=u}{c.T=i}return c};var newVNode=function(e,r){var t={i:0,L:e,S:r,k:null,_:null};{t.C=null}{t.T=null}return t};var Host={};var isHost=function(e){return e&&e.L===Host};var parsePropertyValue=function(e,r){if(e!=null&&!isComplexType(e)){if(r&4){return e==="false"?false:e===""||!!e}return e}return e};var getElement=function(e){return getHostRef(e).$hostElement$};var emitEvent=function(e,r,t){var n=plt.ce(r,t);e.dispatchEvent(n);return n};var rootAppliedStyles=new WeakMap;var registerStyle=function(e,r,t){var n=styles.get(e);if(supportsConstructableStylesheets&&t){n=n||new CSSStyleSheet;if(typeof n==="string"){n=r}else{n.replaceSync(r)}}else{n=r}styles.set(e,n)};var addStyle=function(e,r,t){var n;var a=getScopeId(r);var i=styles.get(a);e=e.nodeType===11?e:doc;if(i){if(typeof i==="string"){e=e.head||e;var o=rootAppliedStyles.get(e);var s=void 0;if(!o){rootAppliedStyles.set(e,o=new Set)}if(!o.has(a)){{s=doc.createElement("style");s.innerHTML=i;var u=(n=plt.D)!=null?n:queryNonceMetaTagContent(doc);if(u!=null){s.setAttribute("nonce",u)}if(!(r.i&1)){if(e.nodeName==="HEAD"){var l=e.querySelectorAll("link[rel=preconnect]");var f=l.length>0?l[l.length-1].nextSibling:e.querySelector("style");e.insertBefore(s,f)}else if("host"in e){if(supportsConstructableStylesheets){var c=new CSSStyleSheet;c.replaceSync(i);e.adoptedStyleSheets=__spreadArray([c],e.adoptedStyleSheets,true)}else{var v=e.querySelector("style");if(v){v.innerHTML=i+v.innerHTML}else{e.prepend(s)}}}else{e.append(s)}}if(r.i&1&&e.nodeName!=="HEAD"){e.insertBefore(s,null)}}if(r.i&4){s.innerHTML+=SLOT_FB_CSS}if(o){o.add(a)}}}else if(!e.adoptedStyleSheets.includes(i)){e.adoptedStyleSheets=__spreadArray(__spreadArray([],e.adoptedStyleSheets,true),[i],false)}}return a};var attachStyles=function(e){var r=e.o;var t=e.$hostElement$;var n=r.i;var a=createTime("attachStyles",r.p);var i=addStyle(t.shadowRoot?t.shadowRoot:t.getRootNode(),r);if(n&10&&n&2){t["s-sc"]=i;t.classList.add(i+"-h")}a()};var getScopeId=function(e,r){return"sc-"+e.p};var setAccessor=function(e,r,t,n,a,i){if(t!==n){var o=isMemberInElement(e,r);r.toLowerCase();if(r==="class"){var s=e.classList;var u=parseClassList(t);var l=parseClassList(n);s.remove.apply(s,u.filter((function(e){return e&&!l.includes(e)})));s.add.apply(s,l.filter((function(e){return e&&!u.includes(e)})))}else if(r==="style"){{for(var f in t){if(!n||n[f]==null){if(f.includes("-")){e.style.removeProperty(f)}else{e.style[f]=""}}}}for(var f in n){if(!t||n[f]!==t[f]){if(f.includes("-")){e.style.setProperty(f,n[f])}else{e.style[f]=n[f]}}}}else if(r==="key");else{var c=isComplexType(n);if((o||c&&n!==null)&&!a){try{if(!e.tagName.includes("-")){var v=n==null?"":n;if(r==="list"){o=false}else if(t==null||e[r]!=v){if(typeof e.__lookupSetter__(r)==="function"){e[r]=v}else{e.setAttribute(r,v)}}}else{e[r]=n}}catch(e){}}if(n==null||n===false){if(n!==false||e.getAttribute(r)===""){{e.removeAttribute(r)}}}else if((!o||i&4||a)&&!c){n=n===true?"":n;{e.setAttribute(r,n)}}}}};var parseClassListRegex=/\s/;var parseClassList=function(e){return!e?[]:e.split(parseClassListRegex)};var updateElement=function(e,r,t){var n=r.k.nodeType===11&&r.k.host?r.k.host:r.k;var a=e&&e.C||EMPTY_OBJ;var i=r.C||EMPTY_OBJ;{for(var o=0,s=sortedAttrNames(Object.keys(a));o<s.length;o++){var u=s[o];if(!(u in i)){setAccessor(n,u,a[u],void 0,t,r.i)}}}for(var l=0,f=sortedAttrNames(Object.keys(i));l<f.length;l++){var u=f[l];setAccessor(n,u,a[u],i[u],t,r.i)}};function sortedAttrNames(e){return e.includes("ref")?__spreadArray(__spreadArray([],e.filter((function(e){return e!=="ref"})),true),["ref"],false):e}var scopeId;var hostTagName;var useNativeShadowDom=false;var isSvgMode=false;var createElm=function(e,r,t,n){var a=r._[t];var i=0;var o;var s;if(a.S!==null){o=a.k=doc.createTextNode(a.S)}else{o=a.k=doc.createElement(!useNativeShadowDom&&BUILD.slotRelocation&&a.i&2?"slot-fb":a.L);{updateElement(null,a,isSvgMode)}var u=o.getRootNode();var l=!u.querySelector("body");if(!l&&BUILD.scoped&&isDef(scopeId)&&o["s-si"]!==scopeId){o.classList.add(o["s-si"]=scopeId)}if(a._){for(i=0;i<a._.length;++i){s=createElm(e,a,i);if(s){o.appendChild(s)}}}}o["s-hn"]=hostTagName;return o};var addVnodes=function(e,r,t,n,a,i){var o=e;var s;if(o.shadowRoot&&o.tagName===hostTagName){o=o.shadowRoot}for(;a<=i;++a){if(n[a]){s=createElm(null,t,a);if(s){n[a].k=s;insertBefore(o,s,r)}}}};var removeVnodes=function(e,r,t){for(var n=r;n<=t;++n){var a=e[n];if(a){var i=a.k;if(i){i.remove()}}}};var updateChildren=function(e,r,t,n,a){if(a===void 0){a=false}var i=0;var o=0;var s=0;var u=0;var l=r.length-1;var f=r[0];var c=r[l];var v=n.length-1;var d=n[0];var p=n[v];var m;var h;while(i<=l&&o<=v){if(f==null){f=r[++i]}else if(c==null){c=r[--l]}else if(d==null){d=n[++o]}else if(p==null){p=n[--v]}else if(isSameVnode(f,d,a)){patch(f,d,a);f=r[++i];d=n[++o]}else if(isSameVnode(c,p,a)){patch(c,p,a);c=r[--l];p=n[--v]}else if(isSameVnode(f,p,a)){patch(f,p,a);insertBefore(e,f.k,c.k.nextSibling);f=r[++i];p=n[--v]}else if(isSameVnode(c,d,a)){patch(c,d,a);insertBefore(e,c.k,f.k);c=r[--l];d=n[++o]}else{s=-1;{for(u=i;u<=l;++u){if(r[u]&&r[u].T!==null&&r[u].T===d.T){s=u;break}}}if(s>=0){h=r[s];if(h.L!==d.L){m=createElm(r&&r[o],t,s)}else{patch(h,d,a);r[s]=void 0;m=h.k}d=n[++o]}else{m=createElm(r&&r[o],t,o);d=n[++o]}if(m){{insertBefore(f.k.parentNode,m,f.k)}}}}if(i>l){addVnodes(e,n[v+1]==null?null:n[v+1].k,t,n,o,v)}else if(o>v){removeVnodes(r,i,l)}};var isSameVnode=function(e,r,t){if(t===void 0){t=false}if(e.L===r.L){if(!t){return e.T===r.T}return true}return false};var patch=function(e,r,t){if(t===void 0){t=false}var n=r.k=e.k;var a=e._;var i=r._;var o=r.L;var s=r.S;if(s===null){{if(o==="slot"&&!useNativeShadowDom);else{updateElement(e,r,isSvgMode)}}if(a!==null&&i!==null){updateChildren(n,a,r,i,t)}else if(i!==null){if(e.S!==null){n.textContent=""}addVnodes(n,null,r,i,0,i.length-1)}else if(!t&&BUILD.updatable&&a!==null){removeVnodes(a,0,a.length-1)}}else if(e.S!==s){n.data=s}};var insertBefore=function(e,r,t){var n=e==null?void 0:e.insertBefore(r,t);return n};var renderVdom=function(e,r,t){if(t===void 0){t=false}var n=e.$hostElement$;var a=e.o;var i=e.A||newVNode(null,null);var o=isHost(r)?r:h(null,null,r);hostTagName=n.tagName;if(a.R){o.C=o.C||{};a.R.map((function(e){var r=e[0],t=e[1];return o.C[t]=n[r]}))}if(t&&o.C){for(var s=0,u=Object.keys(o.C);s<u.length;s++){var l=u[s];if(n.hasAttribute(l)&&!["key","ref","style","class"].includes(l)){o.C[l]=n[l]}}}o.L=null;o.i|=4;e.A=o;o.k=i.k=n.shadowRoot||n;{scopeId=n["s-sc"]}useNativeShadowDom=(a.i&1)!==0;patch(i,o,t)};var attachToAncestor=function(e,r){if(r&&!e.H&&r["s-p"]){r["s-p"].push(new Promise((function(r){return e.H=r})))}};var scheduleUpdate=function(e,r){{e.i|=16}if(e.i&4){e.i|=512;return}attachToAncestor(e,e.M);var t=function(){return dispatchHooks(e,r)};return writeTask(t)};var dispatchHooks=function(e,r){var t=e.$hostElement$;var n=createTime("scheduleUpdate",e.o.p);var a=e.t;if(!a){throw new Error("Can't render component <".concat(t.tagName.toLowerCase()," /> with invalid Stencil runtime! Make sure this imported component is compiled with a `externalRuntime: true` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime"))}var i;if(r){{e.i|=256;if(e.N){e.N.map((function(e){var r=e[0],t=e[1];return safeCall(a,r,t)}));e.N=void 0}}{i=safeCall(a,"componentWillLoad")}}n();return enqueue(i,(function(){return updateComponent(e,a,r)}))};var enqueue=function(e,r){return isPromisey(e)?e.then(r).catch((function(e){console.error(e);r()})):r()};var isPromisey=function(e){return e instanceof Promise||e&&e.then&&typeof e.then==="function"};var updateComponent=function(e,r,t){return __awaiter(void 0,void 0,void 0,(function(){var n,a,i,o,s,u,l;return __generator(this,(function(f){a=e.$hostElement$;i=createTime("update",e.o.p);o=a["s-rc"];if(t){attachStyles(e)}s=createTime("render",e.o.p);{callRender(e,r,a,t)}if(o){o.map((function(e){return e()}));a["s-rc"]=void 0}s();i();{u=(n=a["s-p"])!=null?n:[];l=function(){return postUpdateComponent(e)};if(u.length===0){l()}else{Promise.all(u).then(l);e.i|=4;u.length=0}}return[2]}))}))};var callRender=function(e,r,t,n){try{r=r.render();{e.i&=~16}{e.i|=2}{{{renderVdom(e,r,n)}}}}catch(r){consoleError(r,e.$hostElement$)}return null};var postUpdateComponent=function(e){var r=e.o.p;var t=e.$hostElement$;var n=createTime("postUpdate",r);var a=e.t;var i=e.M;if(!(e.i&64)){e.i|=64;{addHydratedFlag(t)}{safeCall(a,"componentDidLoad")}n();{e.v(t);if(!i){appDidLoad()}}}else{n()}{if(e.H){e.H();e.H=void 0}if(e.i&512){nextTick((function(){return scheduleUpdate(e,false)}))}e.i&=~(4|512)}};var appDidLoad=function(e){{addHydratedFlag(doc.documentElement)}nextTick((function(){return emitEvent(win,"appload",{detail:{namespace:NAMESPACE}})}))};var safeCall=function(e,r,t){if(e&&e[r]){try{return e[r](t)}catch(e){consoleError(e)}}return void 0};var addHydratedFlag=function(e){var r;return e.setAttribute((r=BUILD.hydratedSelectorName)!=null?r:"hydrated","")};var getValue=function(e,r){return getHostRef(e).u.get(r)};var setValue=function(e,r,t,n){var a=getHostRef(e);if(!a){throw new Error("Couldn't find host element for \"".concat(n.p,'" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).'))}var i=a.u.get(r);var o=a.i;var s=a.t;t=parsePropertyValue(t,n.$[r][0]);var u=Number.isNaN(i)&&Number.isNaN(t);var l=t!==i&&!u;if((!(o&8)||i===void 0)&&l){a.u.set(r,t);if(s){if((o&(2|16))===2){scheduleUpdate(a,false)}}}};var proxyComponent=function(e,r,t){var n,a;var i=e.prototype;if(r.$||BUILD.watchCallback){var o=Object.entries((n=r.$)!=null?n:{});o.map((function(e){var n=e[0],a=e[1][0];if(a&31||t&2&&a&32){Object.defineProperty(i,n,{get:function(){return getValue(this,n)},set:function(e){setValue(this,n,e,r)},configurable:true,enumerable:true})}}));if(t&1){var s=new Map;i.attributeChangedCallback=function(e,t,n){var a=this;plt.jmp((function(){var o;var u=s.get(e);if(a.hasOwnProperty(u)){n=a[u];delete a[u]}else if(i.hasOwnProperty(u)&&typeof a[u]==="number"&&a[u]==n){return}else if(u==null){var l=getHostRef(a);var f=l==null?void 0:l.i;if(f&&!(f&8)&&f&128&&n!==t){var c=l.t;var v=(o=r.O)==null?void 0:o[e];v==null?void 0:v.forEach((function(r){if(c[r]!=null){c[r].call(c,n,t,e)}}))}return}a[u]=n===null&&typeof a[u]==="boolean"?false:n}))};e.observedAttributes=Array.from(new Set(__spreadArray(__spreadArray([],Object.keys((a=r.O)!=null?a:{}),true),o.filter((function(e){var r=e[0],t=e[1];return t[0]&15})).map((function(e){var t=e[0],n=e[1];var a;var i=n[1]||t;s.set(i,t);if(n[0]&512){(a=r.R)==null?void 0:a.push([t,i])}return i})),true)))}}return e};var initializeComponent=function(e,r,t,n){return __awaiter(void 0,void 0,void 0,(function(){var n,a,i,o,s,u,l,f,c,v,d;return __generator(this,(function(p){switch(p.label){case 0:if(!((r.i&32)===0))return[3,6];r.i|=32;a=t.m;if(!a)return[3,4];i=loadModule(t);if(!(i&&"then"in i))return[3,2];o=uniqueTime();return[4,i];case 1:n=p.sent();o();return[3,3];case 2:n=i;p.label=3;case 3:if(!n){throw new Error('Constructor for "'.concat(t.p,"#").concat(r.P,'" was not found'))}if(!n.isProxied){proxyComponent(n,t,2);n.isProxied=true}s=createTime("createInstance",t.p);{r.i|=8}try{new n(r)}catch(e){consoleError(e)}{r.i&=~8}s();return[3,5];case 4:n=e.constructor;u=e.localName;customElements.whenDefined(u).then((function(){return r.i|=128}));p.label=5;case 5:if(n&&n.style){l=void 0;if(typeof n.style==="string"){l=n.style}f=getScopeId(t);if(!styles.has(f)){c=createTime("registerStyles",t.p);registerStyle(f,l,!!(t.i&1));c()}}p.label=6;case 6:v=r.M;d=function(){return scheduleUpdate(r,true)};if(v&&v["s-rc"]){v["s-rc"].push(d)}else{d()}return[2]}}))}))};var fireConnectedCallback=function(e){};var connectedCallback=function(e){if((plt.i&1)===0){var r=getHostRef(e);var t=r.o;var n=createTime("connectedCallback",t.p);if(!(r.i&1)){r.i|=1;{var a=e;while(a=a.parentNode||a.host){if(a["s-p"]){attachToAncestor(r,r.M=a);break}}}if(t.$){Object.entries(t.$).map((function(r){var t=r[0],n=r[1][0];if(n&31&&e.hasOwnProperty(t)){var a=e[t];delete e[t];e[t]=a}}))}{initializeComponent(e,r,t)}}else{addHostEventListeners(e,r,t.V);if(r==null?void 0:r.t);else if(r==null?void 0:r.l){r.l.then((function(){return fireConnectedCallback()}))}}n()}};var disconnectInstance=function(e){};var disconnectedCallback=function(e){return __awaiter(void 0,void 0,void 0,(function(){var r;return __generator(this,(function(t){if((plt.i&1)===0){r=getHostRef(e);{if(r.I){r.I.map((function(e){return e()}));r.I=void 0}}if(r==null?void 0:r.t);else if(r==null?void 0:r.l){r.l.then((function(){return disconnectInstance()}))}}return[2]}))}))};var bootstrapLazy=function(e,r){if(r===void 0){r={}}var t;var n=createTime();var a=[];var i=r.exclude||[];var o=win.customElements;var s=doc.head;var u=s.querySelector("meta[charset]");var l=doc.createElement("style");var f=[];var c;var v=true;Object.assign(plt,r);plt.h=new URL(r.resourcesUrl||"./",doc.baseURI).href;var d=false;e.map((function(e){e[1].map((function(r){var t={i:r[0],p:r[1],$:r[2],V:r[3]};if(t.i&4){d=true}{t.$=r[2]}{t.V=r[3]}{t.R=[]}var n=t.p;var s=function(e){__extends(r,e);function r(r){var n=e.call(this,r)||this;n.hasRegisteredEventListeners=false;r=n;registerHost(r,t);if(t.i&1){{if(!r.shadowRoot){{r.attachShadow({mode:"open"})}}else{if(r.shadowRoot.mode!=="open"){throw new Error("Unable to re-use existing shadow root for ".concat(t.p,"! Mode is set to ").concat(r.shadowRoot.mode," but Stencil only supports open shadow roots."))}}}}return n}r.prototype.connectedCallback=function(){var e=this;var r=getHostRef(this);if(!this.hasRegisteredEventListeners){this.hasRegisteredEventListeners=true;addHostEventListeners(this,r,t.V)}if(c){clearTimeout(c);c=null}if(v){f.push(this)}else{plt.jmp((function(){return connectedCallback(e)}))}};r.prototype.disconnectedCallback=function(){var e=this;plt.jmp((function(){return disconnectedCallback(e)}))};r.prototype.componentOnReady=function(){return getHostRef(this).l};return r}(HTMLElement);t.m=e[0];if(!i.includes(n)&&!o.get(n)){a.push(n);o.define(n,proxyComponent(s,t,1))}}))}));if(a.length>0){if(d){l.textContent+=SLOT_FB_CSS}{l.textContent+=a.sort()+HYDRATED_CSS}if(l.innerHTML.length){l.setAttribute("data-styles","");var p=(t=plt.D)!=null?t:queryNonceMetaTagContent(doc);if(p!=null){l.setAttribute("nonce",p)}s.insertBefore(l,u?u.nextSibling:s.firstChild)}}v=false;if(f.length){f.map((function(e){return e.connectedCallback()}))}else{{plt.jmp((function(){return c=setTimeout(appDidLoad,30)}))}}n()};var addHostEventListeners=function(e,r,t,n){if(t){t.map((function(t){var n=t[0],a=t[1],i=t[2];var o=getHostListenerTarget(e,n);var s=hostListenerProxy(r,i);var u=hostListenerOpts(n);plt.ael(o,a,s,u);(r.I=r.I||[]).push((function(){return plt.rel(o,a,s,u)}))}))}};var hostListenerProxy=function(e,r){return function(t){var n;try{{if(e.i&256){(n=e.t)==null?void 0:n[r](t)}else{(e.N=e.N||[]).push([r,t])}}}catch(e){consoleError(e)}}};var getHostListenerTarget=function(e,r){if(r&4)return doc;return e};var hostListenerOpts=function(e){return supportsListenerOptions?{passive:(e&1)!==0,capture:(e&2)!==0}:(e&2)!==0};var setNonce=function(e){return plt.D=e};export{Host as H,bootstrapLazy as b,getElement as g,h,promiseResolve as p,registerInstance as r,setNonce as s};

package/dist/esm-es5/loader.js

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function a(t){try{u(r.next(t))}catch(t){o(t)}}function c(t){try{u(r["throw"](t))}catch(t){o(t)}}function u(t){t.done?n(t.value):i(t.value).then(a,c)}u((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(t){return function(e){return u([t,e])}}function u(c){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(n=0)),n)try{if(r=1,i&&(o=c[0]&2?i["return"]:c[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,c[1])).done)return o;if(i=0,o)c=[c[0]&2,o.value];switch(c[0]){case 0:case 1:o=c;break;case 4:n.label++;return{value:c[1],done:false};case 5:n.label++;i=c[1];c=[0];continue;case 7:c=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(c[0]===6||c[0]===2)){n=0;continue}if(c[0]===3&&(!o||c[1]>o[0]&&c[1]<o[3])){n.label=c[1];break}if(c[0]===6&&n.label<o[1]){n.label=o[1];o=c;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(c);break}if(o[2])n.ops.pop();n.trys.pop();continue}c=e.call(t,n)}catch(t){c=[6,t];i=0}finally{r=o=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{b as bootstrapLazy}from"./index-0a14d3b4.js";export{s as setNonce}from"./index-0a14d3b4.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var defineCustomElements=function(t,e){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(typeof window==="undefined")return[2,undefined];return[4,globalScripts()];case 1:t.sent();return[2,bootstrapLazy([["mds-table-row",[[1,"mds-table-row",{interactive:[1540],overlayActions:[1540,"overlay-actions"]},[[4,"mdsTableInteractiveChange","tableInteractiveHandler"]]]]]],e)]}}))}))};export{defineCustomElements};
+var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function a(t){try{u(r.next(t))}catch(t){o(t)}}function c(t){try{u(r["throw"](t))}catch(t){o(t)}}function u(t){t.done?n(t.value):i(t.value).then(a,c)}u((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(t){return function(e){return u([t,e])}}function u(c){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(n=0)),n)try{if(r=1,i&&(o=c[0]&2?i["return"]:c[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,c[1])).done)return o;if(i=0,o)c=[c[0]&2,o.value];switch(c[0]){case 0:case 1:o=c;break;case 4:n.label++;return{value:c[1],done:false};case 5:n.label++;i=c[1];c=[0];continue;case 7:c=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(c[0]===6||c[0]===2)){n=0;continue}if(c[0]===3&&(!o||c[1]>o[0]&&c[1]<o[3])){n.label=c[1];break}if(c[0]===6&&n.label<o[1]){n.label=o[1];o=c;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(c);break}if(o[2])n.ops.pop();n.trys.pop();continue}c=e.call(t,n)}catch(t){c=[6,t];i=0}finally{r=o=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{b as bootstrapLazy}from"./index-a948f479.js";export{s as setNonce}from"./index-a948f479.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var defineCustomElements=function(t,e){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(typeof window==="undefined")return[2,undefined];return[4,globalScripts()];case 1:t.sent();return[2,bootstrapLazy([["mds-table-row",[[1,"mds-table-row",{interactive:[1540],overlayActions:[1540,"overlay-actions"]},[[4,"mdsTableInteractiveChange","tableInteractiveHandler"]]]]]],e)]}}))}))};export{defineCustomElements};

package/dist/esm-es5/mds-table-row.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-0a14d3b4.js";var isMobileDevice=function(){var n=navigator.userAgent||navigator.vendor||window.opera;return/android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(n)};function r(n){var t,e,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(t=0;t<a;t++)n[t]&&(e=r(n[t]))&&(o&&(o+=" "),o+=e)}else for(e in n)n[e]&&(o&&(o+=" "),o+=e);return o}function clsx(){for(var n,t,e=0,o="",a=arguments.length;e<a;e++)(n=arguments[e])&&(t=r(n))&&(o&&(o+=" "),o+=t);return o}var 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';var MdsTableRowStyle0=mdsTableRowCss;var MdsTableRow=function(){function n(n){registerInstance(this,n);this.interactive=undefined;this.overlayActions=undefined}n.prototype.tableInteractiveHandler=function(n){this.interactive=n.detail};n.prototype.componentWillLoad=function(){this.actions=this.host.querySelector('[slot="action"]')!==null};n.prototype.render=function(){return h(Host,{key:"7402ca1cfdaf3e7846dbf29fad4771617c4f0aee",role:"row"},h("slot",{key:"6671fe1e06369e2486157747c41921266553636c"}),this.actions&&h("div",{key:"e58f247b2f1f6c4263c85615209356f212fa727a",class:clsx("actions-wrapper",isMobileDevice()&&"actions-wrapper--mobile"),role:"cell"},h("div",{key:"1f952cd70074ee64cbef3b96c562cf4d76efd8e7",class:"actions"},h("slot",{key:"7d9eaf9364cd8626a300bddba7c6c9bd449ae773",name:"action"}))))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsTableRow.style=MdsTableRowStyle0;export{MdsTableRow as mds_table_row};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-a948f479.js";var 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: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.actions-view {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  inset: 0;\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  display: -ms-inline-flexbox;\n  display: inline-flex;\n  gap: var(--mds-table-row-actions-gap);\n  inset: 0;\n  margin-right: 100%;\n  padding-right: 0;\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, padding-right, -webkit-transform;\n  transition-property: background-color, padding-right, -webkit-transform;\n  transition-property: transform, background-color, padding-right;\n  transition-property: transform, background-color, padding-right, -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:host(:hover) .actions {\n  -webkit-transform: translateX(100%);\n  transform: translateX(100%);\n}\n\n:host([overlay-actions]:not([overlay-actions="false"])) .actions {\n  padding-right: var(--mds-table-cell-padding);\n  -webkit-transform: translateX(100%);\n  transform: translateX(100%);\n}\n\n:host([overlay-actions]:not([overlay-actions="false"]):hover) .actions {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .actions {\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    .actions {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n';var MdsTableRowStyle0=mdsTableRowCss;var MdsTableRow=function(){function n(n){registerInstance(this,n);this.interactive=undefined;this.overlayActions=undefined}n.prototype.tableInteractiveHandler=function(n){this.interactive=n.detail};n.prototype.componentWillLoad=function(){this.hasActions=this.host.querySelector('[slot="action"]')!==null};n.prototype.componentDidLoad=function(){var n;if(this.hasActions){this.actions=(n=this.host.shadowRoot)===null||n===void 0?void 0:n.querySelector(".actions");this.sizerWidth="".concat(this.actions.offsetWidth.toString(),"px")}};n.prototype.render=function(){return h(Host,{key:"44d102599e90a2abb4cf32ea398d6c3f194e6177",role:"row"},h("slot",{key:"3bc595925a4dafac49d206692fae394754b10d70"}),this.hasActions&&h("mds-table-cell",{key:"8b1a1b0e32db91cc03988de856fea521d25b8424",class:"actions-cell"},h("div",{key:"5867330d68358f30429123a85027b72def045933",class:"actions-sizer",style:{minHeight:"1px",maxWidth:this.sizerWidth,minWidth:this.sizerWidth}}),h("div",{key:"15d6e37bb432b0671e8a5fa447a17fde060e2d60",class:"actions-view"},h("div",{key:"63cf3b620e6c428ce7cb318e07fb35cec631b0c3",class:"actions",style:{marginRight:"calc(".concat(this.sizerWidth," + var(--mds-table-cell-padding))")}},h("slot",{key:"0a479f584fd1ed0c927b39006de79747c7e3ed87",name:"action"})))))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsTableRow.style=MdsTableRowStyle0;export{MdsTableRow as mds_table_row};