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

package/dist/collection/components/mds-push-notification/mds-push-notification.js

@@ -1,5 +1,7 @@
 import dayjs from "dayjs";
+import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
+import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
 import miBaselineCancel from "@icon/mi/baseline/cancel.svg";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -18,13 +20,16 @@ dayjs.extend(relativeTime);
 export class MdsPushNotification {
     constructor() {
         this.t = new Locale({
+            el: localeEl,
             en: localeEn,
+            es: localeEs,
             it: localeIt,
         });
         this.onClickClose = (e) => {
             e.stopPropagation();
             this.closedEvent.emit();
         };
+        this.language = undefined;
         this.datetime = undefined;
         this.dateFormat = 'timeago';
         this.deletable = true;
@@ -37,6 +42,9 @@ export class MdsPushNotification {
         this.tone = 'weak';
         this.variant = undefined;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
     componentWillLoad() {
         var _a;
         this.hasActions = this.host.querySelector('[slot="actions"]') !== null;
@@ -64,9 +72,9 @@ export class MdsPushNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: '5ab26f417bb0669a421a915b199db46056bea293' }, ((_a = this.icon) !== null && _a !== void 0 ? _a : this.preview === 'avatar') && h("mds-avatar", { key: 'b802f27374b54e11a60e7b8a7e5471fb13ba205b', class: "avatar", icon: this.icon, initials: this.initials, part: "avatar", src: this.src, tone: this.tone, variant: this.variant }), this.src && this.preview !== 'avatar' && h("mds-img", { key: 'ebe75cbe762085bce6db5f15dfc31aecadf7beba', class: "picture", part: "picture", src: this.src }), h("div", { key: '08b455ccc7746e010e3fce299adbaa81cc1e4c30', class: "content", part: "content" }, h("header", { key: '1cfc7f5a8370d9e08e289defab3e3f4f01c6635d' }, h("div", { key: 'a01d21b75dfb29c9390caa7391a66b9646002665', class: "infos" }, this.hasBadge && h("div", { key: '8c5a498282dbbbe2f7dd0931b35c729b49438457' }, h("slot", { key: '9c19420ce6e08e72b72a5518704b6a7adb426d9c', name: "badge" })), this.subject && h("mds-text", { key: '08c3ddbef8a93d2b5b3c184038bedcef7945a9d0', class: "subject", typography: "h6", variant: "title", truncate: "all" }, this.subject)), this.datetime && h("mds-text", { key: '577487c90632a2eba5f878b127fd5966257d7eb3', class: "time", typography: "option" }, this.dateFormat === 'timeago'
+        return (h(Host, { key: 'fb0bb49a54e0059779a7507b6204a4fb95e6d416' }, ((_a = this.icon) !== null && _a !== void 0 ? _a : this.preview === 'avatar') && h("mds-avatar", { key: '36df14237eae97491ca677ed507419d587abe139', class: "avatar", icon: this.icon, initials: this.initials, part: "avatar", src: this.src, tone: this.tone, variant: this.variant }), this.src && this.preview !== 'avatar' && h("mds-img", { key: 'd1c26548d723f1b624294a561efbbae8e5e0a133', class: "picture", part: "picture", src: this.src }), h("div", { key: '19c9c55ab9f35433aaa17857ef637878e2c3674d', class: "content", part: "content" }, h("div", { key: 'bc1d02a555df4f14a4075f012b0b5a1d5a383a6c', class: "header" }, h("div", { key: 'dd1cfea1b3e978de93c06fb96e3d301b42155f10', class: "infos" }, this.hasBadge && h("div", { key: '17128b559b34384f4f20afab1a07654fd8f81f39' }, h("slot", { key: '5087eb822c4f1ac96b96e8bae51597583cf6f8b0', name: "badge" })), this.subject && h("mds-text", { key: '7b57beff77694fa4a7a0e95199060d9e8481c97a', class: "subject", typography: "h6", variant: "title", truncate: "all" }, this.subject)), this.datetime && h("mds-text", { key: 'f6138c1053bbeba3f7b0098f2b4d107f9a504792', class: "time", typography: "option" }, this.dateFormat === 'timeago'
             ? dayjs(this.datetime).fromNow()
-            : dayjs(this.datetime).format(this.dateFormat))), h("mds-text", { key: '6fa8d4db7012728cfe24c672eb78a604fc9bf299', class: "message", truncate: "all", typography: "caption", variant: "info" }, this.message), this.hasActions && h("div", { key: 'da82de1403c19e6a74171271c61ca37faef06e29', class: "actions", part: "actions" }, h("slot", { key: '07d7c096d7c9557e5375ccea9337cdd471732f4d', name: "actions" }))), this.deletable && h("mds-button", { key: 'ba10f9912ec1df744235e67be8d71d31d6ce05e5', class: "close-button", title: this.t.get('dismiss'), icon: miBaselineCancel, onClick: this.onClickClose.bind(this) })));
+            : dayjs(this.datetime).format(this.dateFormat))), h("mds-text", { key: 'c870d5168b8bf0ac69cbd0c0b7f9544df1261e48', class: "message", truncate: "all", typography: "caption", variant: "info" }, this.message), this.hasActions && h("div", { key: 'a49ec7b8adbfc94d9f09ee6ebab2bb9831954877', class: "actions", part: "actions" }, h("slot", { key: 'bc30e20478153457a333a21eb5caee616dbdba7d', name: "actions" }))), this.deletable && h("mds-button", { key: '0fc28572cbfb9c53412ab5bb3eb5d3989f0cc1a1', class: "close-button", title: this.t.get('dismiss'), icon: miBaselineCancel, onClick: this.onClickClose.bind(this) })));
     }
     static get is() { return "mds-push-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -304,6 +312,11 @@ export class MdsPushNotification {
             }
         };
     }
+    static get states() {
+        return {
+            "language": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "closedEvent",
@@ -328,5 +341,26 @@ export class MdsPushNotification {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "updateLang": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
 }

package/dist/collection/components/mds-quote/mds-quote.js

@@ -6,9 +6,10 @@ import { Host, h } from "@stencil/core";
 export class MdsQuote {
     constructor() {
         this.typography = 'h3';
+        this.tag = 'h3';
     }
     render() {
-        return (h(Host, { key: '0869548e062d318a691a3615ea09c44d2901703b' }, h("mds-text", { key: 'bd181e851abb083d82daa9c1145e889877f6392a', class: "open-quote", typography: this.typography }, h("span", { key: '91777bc7d1352ba12717040cd14f228337613476' }, h("i", { key: '9e6d08f5cfe34900652ec09d8c2a174daed28467' }, "\u275D\u00A0"))), h("div", { key: '5b0214c657ccf28324861ecec72c74f891131612', class: "quote" }, h("mds-text", { key: '7f06ab8398913fd68f40c91b8c3452c55a1338d1', typography: this.typography }, h("i", { key: '60f12113f4e70643f47a33d5507fbde395099e6d' }, h("slot", { key: '04c6c8f312bee45598c80b4bf8d98f745ac3a0b4' }), h("span", { key: 'f83de716b38bbc2428970a7dff06567cbb52abd4' }, "\u00A0\u275E"))), h("slot", { key: 'c60ecd181c343573ebe78cf955a305cc85696816', name: "author" }))));
+        return (h(Host, { key: '0c7690c8a35c1cdeaf32476a37acffec7b8f323d' }, h("mds-text", { key: 'b3e21e3678fe93551b87f642f78fdda8a9525d60', class: "open-quote", tag: "div", typography: this.typography }, h("span", { key: '695196efbc951ec814efb9cb7421c21493ee60ab' }, h("i", { key: '8453cac06ebaf5e23127c5ecb4c8124e7916ce81' }, "\u275D\u00A0"))), h("div", { key: '0092ce2020ee2ccdc930fede05559c13a54f7134', class: "quote" }, h("mds-text", { key: 'a25408cfbee178885d94b7d9a6a6c135798a866f', tag: this.tag, typography: this.typography }, h("i", { key: 'f710bf1614b4532447fcec84e8209059b192bec9' }, h("slot", { key: '88c75e40ac0a6edbbc5ef0385b41059737522e9c' }), h("span", { key: '612a391d4da1efb238cc6da17a87bdf5146a6c85' }, "\u00A0\u275E"))), h("slot", { key: '8ee3f36a5fa48c2ef77813c00c91f94316805240', name: "author" }))));
     }
     static get is() { return "mds-quote"; }
     static get encapsulation() { return "shadow"; }
@@ -47,6 +48,30 @@ export class MdsQuote {
                 "attribute": "typography",
                 "reflect": false,
                 "defaultValue": "'h3'"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TypographyHeadingTagType",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {
+                        "TypographyHeadingTagType": {
+                            "location": "import",
+                            "path": "@type/text",
+                            "id": "src/type/text.ts::TypographyHeadingTagType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the tag the element"
+                },
+                "attribute": "tag",
+                "reflect": false,
+                "defaultValue": "'h3'"
             }
         };
     }

package/dist/collection/components/mds-quote/test/mds-quote.stories.js

@@ -1,8 +1,14 @@
 import { typographyReadDictionary } from "../../../dictionary/typography";
+import { typographyHeadingTagDictionary } from "../../../dictionary/text";
 import { h } from "@stencil/core";
 export default {
     title: 'UI / Quote',
     argTypes: {
+        tag: {
+            description: 'Specifies the font typography of the element',
+            options: typographyHeadingTagDictionary,
+            control: { type: 'select' },
+        },
         typography: {
             description: 'Specifies the font typography of the element',
             options: typographyReadDictionary,
@@ -12,7 +18,12 @@ export default {
 };
 const Template = args => h("mds-quote", Object.assign({}, args), "What one programmer can do in one month, two programmers can do in two months", h("mds-author", { class: "text-tone-neutral-04", slot: "author" }, h("mds-avatar", { initials: "fb", slot: "avatar", class: "w-1200 bg-brand-maggioli-12", src: "./fred-brooks-zoom.webp" }), h("mds-text", { typography: "h6", class: "text-tone-neutral-02" }, "Fred Brooks"), h("mds-text", { typography: "caption" }, "Software engineer")));
 export const Default = Template.bind({});
+Default.args = {
+    tag: 'h5',
+    typography: 'h5',
+};
 export const Typography = Template.bind({});
 Typography.args = {
+    tag: 'h5',
     typography: 'h5',
 };

package/dist/collection/components/mds-spinner/mds-spinner.css

@@ -17,7 +17,7 @@
   transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 
   align-items: center;
-  color: rgb(var(--brand-maggioli-03));
+  color: rgb(var(--variant-primary-03));
   display: inline-flex;
   justify-content: center;
   transform: scale(0);
@@ -89,7 +89,7 @@
 
 @container style(--magma-pref-contrast: more) {
   :host {
-    color: rgb(var(--brand-maggioli-01));
+    color: rgb(var(--variant-primary-01));
   }
 }
 
@@ -97,7 +97,7 @@
 
   @media (prefers-contrast: more) {
     :host {
-      color: rgb(var(--brand-maggioli-01));
+      color: rgb(var(--variant-primary-01));
     }
   }
 }

package/dist/collection/components/mds-stepper-bar-item/mds-stepper-bar-item.css

@@ -22,7 +22,7 @@
   --mds-stepper-bar-item-color: rgb(var(--tone-neutral-03));
   --mds-stepper-bar-item-duaration: 250ms;
   --mds-stepper-bar-item-icon-background-done: rgb(var(--status-success-05));
-  --mds-stepper-bar-item-icon-background-current: rgb(var(--brand-maggioli-04));
+  --mds-stepper-bar-item-icon-background-current: rgb(var(--variant-primary-04));
   --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08)));
   --mds-stepper-bar-item-icon-color-done: rgb(var(--status-success-10));
   --mds-stepper-bar-item-icon-color-current: rgb(var(--tone-neutral));

package/dist/collection/components/mds-stepper-bar-item/mds-stepper-bar-item.js

@@ -38,7 +38,7 @@ export class MdsStepperBarItem {
         this.isCurrent = newValue;
     }
     render() {
-        return (h(Host, { key: '715f4ed46dd375ba551e95e0aa7cb4efc4a31f63' }, h("header", { key: '264b3b0097255542637b030b21f5e1671ddc1878', class: "header", tabindex: "0" }, h("mds-icon", { key: 'a3450a3cee7e601c4c96ddec0f1b0f3f71bca4d8', class: "icon", name: clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { key: '95634a5ef10acab544d5f11288f6dc4e4d079b46', class: "progress", progress: this.isDone ? 1 : 0 })), h("div", { key: 'abbabd9a031c0d21d83b0c6f63a81512b9cb06a8', class: "infos" }, this.step && h("mds-text", { key: 'ceb824218fa61d539b535878caf768f367243d8c', class: "step", typography: "option" }, "step ", this.index + 1), this.label && h("mds-text", { key: '9db318bad863eb57fd65b88dfae3ec957217bb13', class: "text", typography: this.typography }, this.label), this.badge && h("div", { key: '896a0943deed1e16bfd475b133a7ae10ea29e5fc' }, this.showBadge()))));
+        return (h(Host, { key: '715f4ed46dd375ba551e95e0aa7cb4efc4a31f63' }, h("div", { key: 'a95536046218a876f6b58972111e3579f7db0b5b', class: "header", tabindex: "0" }, h("mds-icon", { key: '572bfcd53c28c751ec923c19a83ad2da516a087d', class: "icon", name: clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { key: '7afca827a100f9676cc61c700754105a946ad988', "aria-hidden": "true", class: "progress", progress: this.isDone ? 1 : 0 })), h("div", { key: 'a0b34eaba6a2b818c63e9a21de8c5bb160b6ccc2', class: "infos" }, this.step && h("mds-text", { key: '2ae5ce5ab77172373301b8c36e16c1131fa0c046', class: "step", typography: "option" }, "step ", this.index + 1), this.label && h("mds-text", { key: '63b5bf25b4ae174725af0340701577699e333951', class: "text", typography: this.typography }, this.label), this.badge && h("div", { key: '569ed53badb0ee775fdfb487680378090f782b15' }, this.showBadge()))));
     }
     static get is() { return "mds-stepper-bar-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-tab/mds-tab.css

@@ -1,4 +1,3 @@
-@import '~@maggioli-design-system/styles/dist/tailwind/components.css';
 @tailwind components;
 @tailwind utilities;
 
@@ -93,6 +92,7 @@
     display: none !important;
 }
 
+@import '~@maggioli-design-system/styles/dist/tailwind/components.css';
 @tailwind components;
 @tailwind utilities;
 

package/dist/collection/components/mds-tab-bar-item/mds-tab-bar-item.css

@@ -9,10 +9,10 @@
 
 :host {
 
-  --mds-tab-bar-item-background: transparent;
-  --mds-tab-bar-item-background-selected: var(--mds-tab-bar-item-background);
-  --mds-tab-bar-item-color: rgb(var(--tone-neutral-06));
-  --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-04));
+  --mds-tab-bar-item-background: rgb(var(--tone-neutral-10));
+  --mds-tab-bar-item-background-selected: transparent;
+  --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));
+  --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-03));
   gap: 0.25rem;
   padding: 0.5rem;
   transition-duration: 200ms;
@@ -61,7 +61,7 @@
   :host {
 
     --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));
-    --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-02));
+    --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02));
   }
 }
 
@@ -71,7 +71,7 @@
     :host {
 
       --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));
-      --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-02));
+      --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02));
     }
   }
 }
@@ -80,7 +80,7 @@
   :host {
 
     --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));
-    --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-02));
+    --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02));
   }
 }
 
@@ -90,7 +90,7 @@
     :host {
 
       --mds-tab-bar-item-color: rgb(var(--tone-neutral-04));
-      --mds-tab-bar-item-color-selected: rgb(var(--brand-maggioli-02));
+      --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02));
     }
   }
 }

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

@@ -27,8 +27,7 @@
   --mds-table-cell-padding: 1rem;
   --mds-table-color-hover: rgb(var(--tone-neutral-02));
   --mds-table-color: rgb(var(--tone-neutral-03));
-  --mds-table-row-color-hover: var(--mds-table-body-background-hover);
-  --mds-table-row-color: var(--mds-table-color);
+  --mds-table-actions-gap: 0.5rem;
   border-radius: 1rem;
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
@@ -42,7 +41,8 @@
 }
 
 .table {
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   width: 100%;
 }
 

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

@@ -12,9 +12,23 @@ export class MdsTable {
     }
     componentDidLoad() {
         this.interactiveEvent.emit(this.interactive);
+        const rowElements = this.host.querySelectorAll('mds-table-row');
+        this.host.addEventListener('scroll', (e) => {
+            const target = e.target;
+            // console.log('here', target.scrollLeft, target.offsetWidth)
+            // console.log(target.offsetWidth - target.scrollLeft)
+            // console.log(rowElement.offsetWidth - target.offsetWidth)
+            rowElements.forEach((rowElement) => {
+                if (target.scrollLeft > rowElement.offsetWidth - target.offsetWidth) {
+                    rowElement.overlayActions = true;
+                    return;
+                }
+                rowElement.overlayActions = false;
+            });
+        });
     }
     render() {
-        return (h(Host, { key: '77e8beec5fa074a69651c0a2b5f87d4e890f51de' }, h("table", { key: '14243bf0f16c10aa5cb1295618100604ea32dfea', class: clsx('table', this.interactive && 'table--interactive'), role: "grid" }, h("slot", { key: 'fd2d0f1642b7878a3e1579536a17fa16e680f03e' }))));
+        return (h(Host, { key: 'f8dc8ae93a7803a18b0e7d03f34ca1b46286bac9' }, h("table", { key: '511db82bcadc15ed656129e4929e9c88a9694cc7', class: clsx('table', this.interactive && 'table--interactive'), role: "table" }, h("slot", { key: 'eb90aa29cd0f11fc60b4749f5808c5862f24e877' }))));
     }
     static get is() { return "mds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -67,6 +81,7 @@ export class MdsTable {
                 }
             }];
     }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "interactive",

package/dist/collection/components/mds-table/test/mds-table.stories.js

@@ -10,6 +10,7 @@ export default {
 };
 const Template = args => h("mds-table", Object.assign({}, args), h("mds-table-header", null, h("mds-table-header-cell", { label: "Username" }), h("mds-table-header-cell", { label: "Email" }), h("mds-table-header-cell", { label: "Date" })), h("mds-table-body", null, h("mds-table-row", null, h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "mario.rossi")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "mario.rossi@nintendo.com")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "12 ottobre 1985"))), h("mds-table-row", null, h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "luigi.verdi")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "luigi.verdi@nintendo.com")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "12 ottobre 1985"))), h("mds-table-row", null, h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "wario.gialli")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "wario.gialli@nintendo.com")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "3 marzo 1993"))), h("mds-table-row", null, h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "waluigi.violetti")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "waluigi.violetti@nintendo.com")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "8 giugno 1999")))), h("mds-table-footer", null, h("mds-table-cell", null, h("mds-text", { typography: "action" }, "Username")), h("mds-table-cell", null, h("mds-text", { typography: "action" }, "Email")), h("mds-table-cell", null, h("mds-text", { typography: "action" }, "Date"))));
 const TemplateSortable = args => h("mds-table", Object.assign({}, args), h("mds-table-header", null, h("mds-table-header-cell", { sortable: true, label: "Numbers" }), h("mds-table-header-cell", { sortable: true, label: "Strings" }), h("mds-table-header-cell", { sortable: true, label: "Strings from cell" }), h("mds-table-header-cell", { label: "No sortable column" })), h("mds-table-body", null, h("mds-table-row", null, h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "3")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "01")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "Tower Plaza")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "+22 777 892301"))), h("mds-table-row", null, h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "1")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "05")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "22nd Evenue")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "+22 433 471047"))), h("mds-table-row", null, h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "2")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "11")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "ARK Plaza")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "+22 334 187366"))), h("mds-table-row", null, h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "4")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "22")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "_Underscore Building")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "+22 333 997741")))));
+const TemplateSortableActions = args => h("mds-table", Object.assign({}, args), h("mds-table-header", null, h("mds-table-header-cell", { sortable: true, label: "Numbers" }), h("mds-table-header-cell", { sortable: true, label: "Strings" }), h("mds-table-header-cell", { sortable: true, label: "Strings from cell" }), h("mds-table-header-cell", { label: "No sortable column" })), h("mds-table-body", null, h("mds-table-row", null, h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "3")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "01")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "Tower Plaza")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "+22 777 892301")), h("mds-button", { slot: "action", icon: "mi/baseline/send", title: "Write message", variant: "dark", tone: "weak" }), h("mds-button", { slot: "action", icon: "mi/baseline/call", title: "Call number", variant: "dark", tone: "weak" }), h("mds-button", { slot: "action", icon: "mi/baseline/delete", title: "Remove record", variant: "error" })), h("mds-table-row", null, h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "1")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "05")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "22nd Evenue")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "+22 433 471047")), h("mds-button", { slot: "action", icon: "mi/baseline/send", title: "Write message", variant: "dark", tone: "weak" }), h("mds-button", { slot: "action", icon: "mi/baseline/call", title: "Call number", variant: "dark", tone: "weak" }), h("mds-button", { slot: "action", icon: "mi/baseline/delete", title: "Remove record", variant: "error" })), h("mds-table-row", null, h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "2")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "11")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "ARK Plaza")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "+22 334 187366")), h("mds-button", { slot: "action", icon: "mi/baseline/send", title: "Write message", variant: "dark", tone: "weak" }), h("mds-button", { slot: "action", icon: "mi/baseline/call", title: "Call number", variant: "dark", tone: "weak" }), h("mds-button", { slot: "action", icon: "mi/baseline/delete", title: "Remove record", variant: "error" })), h("mds-table-row", null, h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "4")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "22")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "_Underscore Building")), h("mds-table-cell", { class: "min-w-5200" }, h("mds-text", { typography: "detail" }, "+22 333 997741")), h("mds-button", { slot: "action", icon: "mi/baseline/send", title: "Write message", variant: "dark", tone: "weak" }), h("mds-button", { slot: "action", icon: "mi/baseline/call", title: "Call number", variant: "dark", tone: "weak" }), h("mds-button", { slot: "action", icon: "mi/baseline/delete", title: "Remove record", variant: "error" }))));
 export const Default = Template.bind({});
 export const Interactive = Template.bind({});
 Interactive.args = {
@@ -19,3 +20,7 @@ export const Sortable = TemplateSortable.bind({});
 Sortable.args = {
     interactive: true,
 };
+export const Actions = TemplateSortableActions.bind({});
+Actions.args = {
+    interactive: true,
+};

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

@@ -7,7 +7,7 @@ export class MdsTableCell {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '3bdade084b4338cd4c2cf2a0c94adaab9f6f1f34' }, h("slot", { key: '8bdb8b0d5e0e5cf6880f406e564e4a96520ccfc9' })));
+        return (h(Host, { key: 'ba2b1023ba3152b3bad3815cf9cc881f9c2dbd8f', role: "cell" }, h("slot", { key: 'e4301e2a7637473334a33ff03c1a115a0748a718' })));
     }
     static get is() { return "mds-table-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-table-header-cell/mds-table-header-cell.css

@@ -16,18 +16,14 @@
  */
 
 :host {
-
-  --mds-table-header-cell-padding: 0.5rem;
-
   transition-duration: 200ms;
-
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 
-  background-color: var(--mds-table-cell-background);
+  background-color: var(--mds-table-background);
   border-bottom: var(--mds-table-cell-border-width) solid var(--mds-table-cell-border-color) !important;
   border-top: var(--mds-table-cell-border-width) solid transparent !important;
   display: table-cell;
-  padding: var(--mds-table-header-cell-padding);
+  padding: var(--mds-table-cell-padding);
   transition-property: background-color, border-color, color;
   vertical-align: top;
 }

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

@@ -5,8 +5,8 @@ import miBaselineUnfoldMore from "@icon/mi/baseline/unfold-more.svg";
 import clsx from "clsx";
 var Sort;
 (function (Sort) {
-    Sort["ASC"] = "asc";
-    Sort["DESC"] = "desc";
+    Sort["ASC"] = "ascending";
+    Sort["DESC"] = "descending";
     Sort["NONE"] = "none";
 })(Sort || (Sort = {}));
 export class MdsTableHeaderCell {
@@ -57,9 +57,9 @@ export class MdsTableHeaderCell {
                 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));
         };
@@ -99,8 +99,8 @@ export class MdsTableHeaderCell {
         }
     }
     render() {
-        return (h(Host, { key: 'd74e353b01b4a9bda45eef16a4edec0c49a0c62f' }, this.sortable
-            ? h("mds-button", { class: "action", icon: clsx(this.direction === 'none' && miBaselineUnfoldMore, this.direction === 'asc' && miBaselineKeyboardArrowUp, this.direction === 'desc' && miBaselineKeyboardArrowDown), "icon-position": "right", onClick: this.sort, tone: "quiet", variant: "dark", size: "sm", part: "action" }, this.label)
+        return (h(Host, { key: '3d17c76c086828a39ad0090acabbebb3ea449198', role: "columnheader", "aria-sort": this.direction }, this.sortable
+            ? h("mds-button", { class: "action", icon: clsx(this.direction === 'none' && miBaselineUnfoldMore, this.direction === 'ascending' && miBaselineKeyboardArrowUp, this.direction === 'descending' && miBaselineKeyboardArrowDown), "icon-position": "right", onClick: this.sort, tone: "quiet", variant: "dark", size: "sm", part: "action" }, this.label)
             : h("mds-text", { class: "label", typography: "label", part: "label" }, this.label)));
     }
     static get is() { return "mds-table-header-cell"; }
@@ -156,7 +156,7 @@ export class MdsTableHeaderCell {
                 "mutable": true,
                 "complexType": {
                     "original": "SortDirectionType",
-                    "resolved": "\"asc\" | \"desc\" | \"none\"",
+                    "resolved": "\"ascending\" | \"descending\" | \"none\"",
                     "references": {
                         "SortDirectionType": {
                             "location": "import",

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

@@ -4,15 +4,74 @@
 
   --mds-table-row-color-hover: var(--mds-table-color-hover, rgb(var(--tone-neutral-02)));
   --mds-table-row-color: var(--mds-table-color, rgb(var(--tone-neutral-03)));
+  --mds-table-row-actions-gap: var(--mds-table-actions-gap, 1rem);
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 
   color: var(--mds-table-row-color);
   display: table-row;
+  position: relative;
   transition-property: color;
 
 }
 
+.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);

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

@@ -1,16 +1,23 @@
 import { Host, h } from "@stencil/core";
+import { isMobileDevice } from "../../common/device";
+import clsx from "clsx";
 /**
  * @slot default - Put `mds-table-cell` element/s.
  */
 export class MdsTableRow {
     constructor() {
         this.interactive = undefined;
+        this.overlayActions = undefined;
     }
     tableInteractiveHandler(event) {
         this.interactive = event.detail;
     }
+    componentWillLoad() {
+        this.actions = this.host.querySelector('[slot="action"]') !== null;
+    }
     render() {
-        return (h(Host, { key: '283e13bdc34ec2c034de9e422a3ad57ff023585e', role: "row" }, h("slot", { key: 'e0682272fcada8ee3afcf71e350d6a40c3ee6c82' })));
+        return (h(Host, { key: 'a336d00d38f7ced41c3febcb4b0c2c106ed61ca9', role: "row" }, h("slot", { key: 'a0a251d24deb3b7655613f6d15c118386db1bcba' }), this.actions
+            && h("div", { key: 'bebaef82204a44ac50487875a9f7bfe18f473517', class: clsx('actions-wrapper', isMobileDevice() && 'actions-wrapper--mobile'), role: "cell" }, h("div", { key: '57f2f06b534858b3ca3fb7e9d50a7098d0c24856', class: "actions" }, h("slot", { key: '9d5aceec024928169a6fd221f93d3e87b2c47386', name: "action" })))));
     }
     static get is() { return "mds-table-row"; }
     static get encapsulation() { return "shadow"; }
@@ -42,9 +49,27 @@ export class MdsTableRow {
                 },
                 "attribute": "interactive",
                 "reflect": true
+            },
+            "overlayActions": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "overlay-actions",
+                "reflect": true
             }
         };
     }
+    static get elementRef() { return "host"; }
     static get listeners() {
         return [{
                 "name": "mdsTableInteractiveChange",

package/dist/collection/components/mds-text/mds-text.js

@@ -25,6 +25,8 @@ export class MdsText {
             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');
@@ -61,7 +63,7 @@ export class MdsText {
         }
     }
     render() {
-        return (h(Host, { key: '52c81dcb61a06c57c6e0438bf043639657b444f4' }, h(this.tag, { key: '57a01393cfcff5783f4adede212ad497c8dbcc84', class: "text" }, !this.text
+        return (h(Host, { key: '1f42572d1faca24c60e7f351addd83674d070695' }, h(this.tag, { key: '1f1e7663e9181704fce34dd04b89d30924295d98', class: "text" }, !this.text
             ? h("slot", null)
             : this.text)));
     }
@@ -108,12 +110,12 @@ export class MdsText {
                 "mutable": true,
                 "complexType": {
                     "original": "TypographyTagType",
-                    "resolved": "\"address\" | \"abbr\" | \"article\" | \"b\" | \"bdo\" | \"blockquote\" | \"cite\" | \"code\" | \"dd\" | \"del\" | \"details\" | \"dfn\" | \"div\" | \"dl\" | \"dt\" | \"em\" | \"figcaption\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"i\" | \"ins\" | \"kbd\" | \"label\" | \"legend\" | \"li\" | \"mark\" | \"ol\" | \"p\" | \"pre\" | \"q\" | \"rt\" | \"ruby\" | \"s\" | \"samp\" | \"small\" | \"span\" | \"strong\" | \"sub\" | \"summary\" | \"sup\" | \"time\" | \"u\" | \"ul\" | \"var\" | \"rb\"",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"label\" | \"code\" | \"strong\" | \"abbr\" | \"address\" | \"article\" | \"b\" | \"bdo\" | \"blockquote\" | \"cite\" | \"dd\" | \"del\" | \"details\" | \"dfn\" | \"div\" | \"dl\" | \"dt\" | \"em\" | \"figcaption\" | \"i\" | \"ins\" | \"kbd\" | \"legend\" | \"li\" | \"mark\" | \"ol\" | \"p\" | \"pre\" | \"q\" | \"rb\" | \"rt\" | \"ruby\" | \"s\" | \"samp\" | \"small\" | \"span\" | \"sub\" | \"summary\" | \"sup\" | \"time\" | \"u\" | \"ul\" | \"var\"",
                     "references": {
                         "TypographyTagType": {
                             "location": "import",
-                            "path": "./meta/types",
-                            "id": "src/components/mds-text/meta/types.ts::TypographyTagType"
+                            "path": "@type/text",
+                            "id": "src/type/text.ts::TypographyTagType"
                         }
                     }
                 },

package/dist/collection/components/mds-text/test/mds-text.stories.js

@@ -44,7 +44,7 @@ const AnimateTemplate = () => {
         const selectEl = event.target;
         setText(selectEl.value);
     };
-    return h("div", { class: "grid gap-400" }, h("div", { class: "bg-tone-neutral-09 p-600 rounded-lg" }, h("mds-text", { animation: "yugop", text: text })), h("div", null, h("select", { onChange: (e) => setValue(e) }, h("option", { value: "U2" }, "Choose a song..."), h("option", { value: "One" }, "One"), h("option", { value: "Zoo Station" }, "Zoo Station"), h("option", { value: "With or Without You" }, "With or Without You"), h("option", { value: "Where The Streets Have No Name" }, "Where The Streets Have No Name"))));
+    return h("div", { class: "grid gap-400" }, h("div", { class: "bg-tone-neutral-09 p-600 rounded-lg" }, h("mds-text", { animation: "yugop", text: text })), h("div", { class: "grid gap-200" }, h("label", { htmlFor: 'song' }, "Selected song:"), h("div", null, h("select", { id: "song", onChange: (e) => setValue(e) }, h("option", null, "Choose a song..."), h("option", { value: "One" }, "One"), h("option", { value: "Zoo Station" }, "Zoo Station"), h("option", { value: "With or Without You" }, "With or Without You"), h("option", { value: "Where The Streets Have No Name" }, "Where The Streets Have No Name")))));
 };
 export const Default = Template.bind({});
 export const Animation = AnimateTemplate.bind({});