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

package/dist/types/type/variant.d.ts

@@ -5,8 +5,9 @@ export type ThemeFullVariantAvatarType = 'amaranth' | 'aqua' | 'blue' | 'error'
 export type ThemeLuminanceVariantType = 'dark' | 'light';
 export type LabelVariantType = 'amaranth' | 'aqua' | 'blue' | 'green' | 'lime' | 'orange' | 'orchid' | 'sky' | 'violet' | 'yellow';
 export type ActionVariantType = 'primary' | 'dark' | 'light';
+export type ChipVariantType = 'primary' | 'secondary' | 'dark' | 'error' | 'info' | 'success' | 'warning';
 export type StateVariantType = 'disabled' | 'focused' | 'readonly';
-export type ToneActionVariantType = 'primary' | 'secondary' | 'tertiary' | 'strong' | 'weak' | 'ghost' | 'quiet';
+export type ToneActionVariantType = 'primary' | 'secondary' | 'strong' | 'weak' | 'ghost' | 'quiet';
 export type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet';
 export type ToneSimpleVariantType = 'quiet' | 'strong' | 'weak';
 export type ToneMinimalVariantType = 'strong' | 'weak';

package/documentation.json

@@ -1,17 +1,17 @@
 {
-  "timestamp": "2024-10-10T09:56:21",
+  "timestamp": "2024-12-04T15:30:05",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.21.0",
-    "typescriptVersion": "5.5.3"
+    "version": "4.22.2",
+    "typescriptVersion": "5.5.4"
   },
   "components": [
     {
       "filePath": "src/components/mds-table-row/mds-table-row.tsx",
       "encapsulation": "shadow",
       "tag": "mds-table-row",
-      "readme": "# mds-table-row\n\n\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.\n",
-      "docs": "This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
+      "readme": "# mds-table-row\n\n\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.\n",
+      "docs": "This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
       "docsTags": [
         {
           "name": "slot",
@@ -40,6 +40,27 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "overlayActions",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "overlay-actions",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [],
@@ -81,6 +102,11 @@
       "docstring": "",
       "path": "src/components/mds-accordion-item/meta/event-detail.ts"
     },
+    "src/components/mds-accordion-timer/meta/event-detail.ts::MdsAccordionTimerEventDetail": {
+      "declaration": "export interface MdsAccordionTimerEventDetail {\n  index: number;\n}",
+      "docstring": "",
+      "path": "src/components/mds-accordion-timer/meta/event-detail.ts"
+    },
     "src/components/mds-accordion-timer-item/meta/event-detail.ts::MdsAccordionTimerItemEventDetail": {
       "declaration": "export interface MdsAccordionTimerItemEventDetail {\n  selected: boolean;\n  uuid: number;\n}",
       "docstring": "",
@@ -167,7 +193,7 @@
       "path": "src/type/button.ts"
     },
     "src/type/button.ts::ButtonVariantType": {
-      "declaration": "export type ButtonVariantType =\n  | 'primary'\n  | 'dark'\n  | 'light'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
+      "declaration": "export type ButtonVariantType =\n  | 'primary'\n  | 'secondary'\n  | 'dark'\n  | 'light'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
       "docstring": "",
       "path": "src/type/button.ts"
     },
@@ -181,6 +207,11 @@
       "docstring": "",
       "path": "src/type/button.ts"
     },
+    "src/type/variant.ts::ChipVariantType": {
+      "declaration": "export type ChipVariantType =\n  | 'primary'\n  | 'secondary'\n  | 'dark'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
+      "docstring": "",
+      "path": "src/type/variant.ts"
+    },
     "src/components/mds-chip/meta/interface.ts::MdsChipEvent": {
       "declaration": "interface MdsChipEvent {\n  event: Event\n  element: HTMLMdsChipElement\n}",
       "docstring": "",
@@ -222,7 +253,7 @@
       "path": "src/type/text.ts"
     },
     "src/components/mds-file-preview/meta/event-detail.ts::MdsFilePreviewEventDetail": {
-      "declaration": "export interface MdsFilePreviewEventDetail {\n  extension: string\n  filename: string\n  target: HTMLMdsFileElement\n}",
+      "declaration": "export interface MdsFilePreviewEventDetail {\n  extension: string\n  filename: string\n  target: HTMLMdsFilePreviewElement\n}",
       "docstring": "",
       "path": "src/components/mds-file-preview/meta/event-detail.ts"
     },
@@ -236,10 +267,15 @@
       "docstring": "",
       "path": "src/components/mds-filter-item/meta/event-detail.ts"
     },
-    "src/components/mds-header-bar/meta/types.ts::MenuType": {
-      "declaration": "export type MenuType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
+    "src/type/header-bar.ts::HeaderBarMenuType": {
+      "declaration": "export type HeaderBarMenuType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
+      "docstring": "",
+      "path": "src/type/header-bar.ts"
+    },
+    "src/type/header-bar.ts::HeaderBarNavType": {
+      "declaration": "export type HeaderBarNavType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
       "docstring": "",
-      "path": "src/components/mds-header-bar/meta/types.ts"
+      "path": "src/type/header-bar.ts"
     },
     "src/components/mds-header/meta/event-detail.ts::MdsHeaderEventDetail": {
       "declaration": "export interface MdsHeaderEventDetail {\n  bar: HTMLMdsHeaderBarElement\n}",
@@ -277,7 +313,7 @@
       "path": "src/components/mds-img/meta/event-detail.ts"
     },
     "src/type/autocomplete.ts::AutocompleteType": {
-      "declaration": "export type AutocompleteType =\n  | 'additional-name'\n  | 'address'\n  | 'address-level1'\n  | 'address-level2'\n  | 'address-level3'\n  | 'address-level4'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'cc-additional-name'\n  | 'cc-csc'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-family-name'\n  | 'cc-family-name'\n  | 'cc-given-name'\n  | 'cc-name'\n  | 'cc-number'\n  | 'cc-type'\n  | 'country'\n  | 'country-name'\n  | 'current-password'\n  | 'email'\n  | 'family-name'\n  | 'given-name'\n  | 'honorific-prefix'\n  | 'honorific-suffix'\n  | 'impp'\n  | 'language'\n  | 'name'\n  | 'new-password'\n  | 'nickname'\n  | 'off'\n  | 'on'\n  | 'one-time-code'\n  | 'organization'\n  | 'organization-title'\n  | 'photo'\n  | 'postal-code'\n  | 'sex'\n  | 'street-address'\n  | 'tel'\n  | 'tel-area-code'\n  | 'tel-country-code'\n  | 'tel-extension'\n  | 'tel-local'\n  | 'tel-national'\n  | 'transaction-amount'\n  | 'transaction-currency'\n  | 'url'\n  | 'username'",
+      "declaration": "export type AutocompleteType =\n  | 'additional-name'\n  | 'address'\n  | 'address-level1'\n  | 'address-level2'\n  | 'address-level3'\n  | 'address-level4'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'cc-additional-name'\n  | 'cc-csc'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-family-name'\n  | 'cc-given-name'\n  | 'cc-name'\n  | 'cc-number'\n  | 'cc-type'\n  | 'country'\n  | 'country-name'\n  | 'current-password'\n  | 'email'\n  | 'family-name'\n  | 'given-name'\n  | 'honorific-prefix'\n  | 'honorific-suffix'\n  | 'impp'\n  | 'language'\n  | 'name'\n  | 'new-password'\n  | 'nickname'\n  | 'off'\n  | 'on'\n  | 'one-time-code'\n  | 'organization'\n  | 'organization-title'\n  | 'photo'\n  | 'postal-code'\n  | 'sex'\n  | 'street-address'\n  | 'tel'\n  | 'tel-area-code'\n  | 'tel-country-code'\n  | 'tel-extension'\n  | 'tel-local'\n  | 'tel-national'\n  | 'transaction-amount'\n  | 'transaction-currency'\n  | 'url'\n  | 'username'",
       "docstring": "",
       "path": "src/type/autocomplete.ts"
     },
@@ -306,10 +342,10 @@
       "docstring": "",
       "path": "src/type/typography.ts"
     },
-    "src/components/mds-input/meta/event-detail.ts::MdsInputEventDetail": {
-      "declaration": "export interface MdsInputEventDetail {\n  value?: string\n}",
+    "src/type/input.ts::MdsInputEventDetail": {
+      "declaration": "export interface MdsInputEventDetail {\n  value?: File | string | FormData | null\n}",
       "docstring": "",
-      "path": "src/components/mds-input/meta/event-detail.ts"
+      "path": "src/type/input.ts"
     },
     "src/components/mds-input-field/meta/types.ts::InputFieldType": {
       "declaration": "export type InputFieldType =\n  | 'date'\n  | 'email'\n  | 'number'\n  | 'password'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'textarea'\n  | 'time'\n  | 'url'\n  | 'cc'\n  | 'cf'\n  | 'isbn'\n  | 'piva'",
@@ -326,11 +362,6 @@
       "docstring": "",
       "path": "src/components/mds-input-field/meta/validators.ts"
     },
-    "src/interface/input-value.ts::InputValue": {
-      "declaration": "export interface InputValue {\n  value: InputValueType\n}",
-      "docstring": "",
-      "path": "src/interface/input-value.ts"
-    },
     "src/components/mds-input-switch/meta/types.ts::InputSwitchSizeType": {
       "declaration": "export type InputSwitchSizeType =\n  | 'sm'\n  | 'md'\n  | 'lg'",
       "docstring": "",
@@ -377,7 +408,12 @@
       "path": "src/type/typography.ts"
     },
     "src/components/mds-modal/meta/types.ts::ModalPositionType": {
-      "declaration": "export type ModalPositionType =\n  | 'bottom'\n  | 'center'\n  | 'left'\n  | 'right'\n  | 'top'",
+      "declaration": "export type ModalPositionType =\n  | 'bottom'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'center'\n  | 'left'\n  | 'right'\n  | 'top'\n  | 'top-left'\n  | 'top-right'",
+      "docstring": "",
+      "path": "src/components/mds-modal/meta/types.ts"
+    },
+    "src/components/mds-modal/meta/types.ts::ModalAnimationStateType": {
+      "declaration": "export type ModalAnimationStateType =\n  | 'intro'\n  | 'none'\n  | 'outro'",
       "docstring": "",
       "path": "src/components/mds-modal/meta/types.ts"
     },
@@ -416,21 +452,11 @@
       "docstring": "",
       "path": "src/components/mds-pref-contrast/meta/types.ts"
     },
-    "src/type/language.ts::PrefLanguageType": {
-      "declaration": "export type PrefLanguageType =\n  | 'auto'\n  | `${Lowercase<string>}${Lowercase<string>}`\n  | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`",
-      "docstring": "",
-      "path": "src/type/language.ts"
-    },
     "src/event-detail/language.ts::MdsPrefLanguageEventDetail": {
-      "declaration": "export interface MdsPrefLanguageEventDetail {\n  language?: LanguageType\n}",
+      "declaration": "export interface MdsPrefLanguageEventDetail {\n  /* A string representing the language version as defined in {@link https://datatracker.ietf.org/doc/html/rfc5646 RFC 5646: Tags for Identifying Languages (also known as BCP 47)}.\n   *\n   * `Examples of valid language codes include \"en\", \"en-US\", \"fr\", \"fr-FR\", \"es-ES\", etc.`\n   */\n  language?: string\n}",
       "docstring": "",
       "path": "src/event-detail/language.ts"
     },
-    "src/type/language.ts::LanguageType": {
-      "declaration": "export type LanguageType =\n  | `${Lowercase<string>}${Lowercase<string>}`\n  | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`",
-      "docstring": "",
-      "path": "src/type/language.ts"
-    },
     "src/components/mds-pref-theme/meta/types.ts::ThemeModeType": {
       "declaration": "export type ThemeModeType =\n  | 'light'\n  | 'dark'\n  | 'system'",
       "docstring": "",
@@ -471,6 +497,11 @@
       "docstring": "",
       "path": "src/components/mds-push-notification/meta/event-detail.ts"
     },
+    "src/type/text.ts::TypographyHeadingTagType": {
+      "declaration": "export type TypographyHeadingTagType =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'",
+      "docstring": "",
+      "path": "src/type/text.ts"
+    },
     "src/components/mds-stepper-bar/meta/event-detail.ts::MdsStepperBarEventDetail": {
       "declaration": "export interface MdsStepperBarEventDetail {\n  step: number\n  value: string\n}",
       "docstring": "",
@@ -502,7 +533,7 @@
       "path": "src/components/mds-tab-item/meta/event-detail.ts"
     },
     "src/components/mds-table-header-cell/meta/types.ts::SortDirectionType": {
-      "declaration": "export type SortDirectionType =\n  | 'asc'\n  | 'desc'\n  | 'none'",
+      "declaration": "export type SortDirectionType =\n  | 'ascending'\n  | 'descending'\n  | 'none'",
       "docstring": "",
       "path": "src/components/mds-table-header-cell/meta/types.ts"
     },
@@ -511,10 +542,10 @@
       "docstring": "",
       "path": "src/components/mds-text/meta/types.ts"
     },
-    "src/components/mds-text/meta/types.ts::TypographyTagType": {
+    "src/type/text.ts::TypographyTagType": {
       "declaration": "export type TypographyTagType =\n  | 'abbr'\n  | 'address'\n  | 'article'\n  | 'b'\n  | 'bdo'\n  | 'blockquote'\n  | 'cite'\n  | 'code'\n  | 'dd'\n  | 'del'\n  | 'details'\n  | 'dfn'\n  | 'div'\n  | 'dl'\n  | 'dt'\n  | 'em'\n  | 'figcaption'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'i'\n  | 'ins'\n  | 'kbd'\n  | 'label'\n  | 'legend'\n  | 'li'\n  | 'mark'\n  | 'ol'\n  | 'p'\n  | 'pre'\n  | 'q'\n  | 'rb'\n  | 'rt'\n  | 'ruby'\n  | 's'\n  | 'samp'\n  | 'small'\n  | 'span'\n  | 'strong'\n  | 'sub'\n  | 'summary'\n  | 'sup'\n  | 'time'\n  | 'u'\n  | 'ul'\n  | 'var'",
       "docstring": "",
-      "path": "src/components/mds-text/meta/types.ts"
+      "path": "src/type/text.ts"
     },
     "src/type/variant.ts::ThemeLuminanceVariantType": {
       "declaration": "export type ThemeLuminanceVariantType =\n  | 'dark'\n  | 'light'",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maggioli-design-system/mds-table-row",
-  "version": "4.7.0",
-  "description": "mds-table-row is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
+  "version": "4.8.0",
+  "description": "mds-table-row is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
@@ -23,9 +23,9 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-table-cell": "4.7.0",
-    "@maggioli-design-system/styles": "15.3.2",
-    "@stencil/core": "4.21.0"
+    "@maggioli-design-system/mds-table-cell": "4.7.2",
+    "@maggioli-design-system/styles": "15.5.0",
+    "@stencil/core": "4.22.2"
   },
   "license": "MIT",
   "author": {

package/readme.md

@@ -2,16 +2,17 @@
 
 
 
-This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
+This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property      | Attribute     | Description | Type      | Default     |
-| ------------- | ------------- | ----------- | --------- | ----------- |
-| `interactive` | `interactive` |             | `boolean` | `undefined` |
+| Property         | Attribute         | Description | Type      | Default     |
+| ---------------- | ----------------- | ----------- | --------- | ----------- |
+| `interactive`    | `interactive`     |             | `boolean` | `undefined` |
+| `overlayActions` | `overlay-actions` |             | `boolean` | `undefined` |
 
 
 ## Slots

package/src/common/aria.ts

@@ -20,6 +20,24 @@ const setAttributeIfEmpty = (element: HTMLElement, attribute: string, value: str
   return value
 }
 
+const removeAttributesIf = (element: HTMLElement, attribute: string, valueCheck: string = 'true', cleanAttributes: string | string[]): boolean => {
+  if (ifAttribute(element, attribute, valueCheck)) {
+    const attributesList = Array.isArray(cleanAttributes) ? cleanAttributes : [cleanAttributes]
+    attributesList.forEach(attributeToRemove => {
+      element.removeAttribute(attributeToRemove)
+    })
+    return true
+  }
+  return false
+}
+
+const ifAttribute = (element: HTMLElement, attribute: string, valueCheck: string = 'true'): boolean => {
+  if (element.hasAttribute(attribute) && element.getAttribute(attribute) === valueCheck) {
+    return true
+  }
+  return false
+}
+
 const hashValue = (value: string): string => `${value}-${hash(value)}`
 
 const hashRandomValue = (value?: string): string => {
@@ -32,8 +50,10 @@ const hashRandomValue = (value?: string): string => {
 }
 
 export {
-  unslugName,
-  setAttributeIfEmpty,
   hashRandomValue,
   hashValue,
+  removeAttributesIf,
+  setAttributeIfEmpty,
+  ifAttribute,
+  unslugName,
 }

package/src/common/device.ts

@@ -0,0 +1,9 @@
+const isMobileDevice = (): boolean => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera
+  return /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+}
+
+export {
+  isMobileDevice,
+}

package/src/common/file.ts

@@ -1,11 +1,10 @@
 import { fileExtensionsDictionary, ExtensionInfo } from '@dictionary/file-extensions'
 import { fileFormatsVariant } from '@type/variant-file-format'
+import { ThemeFullVariantType } from '@type/variant'
 
 interface FileFormatsVariants {
-  color: string
   icon: string
-  iconBackground: string
-  variant: string
+  variant: ThemeFullVariantType
 }
 
 const sanitizeFilename = (filename: string, error: string = 'Attribute "filename" is undefined.') => {

package/src/common/keyboard-manager.ts

@@ -36,14 +36,14 @@ export class KeyboardManager {
 
   attachEscapeBehavior = (callback: () => void): void => {
     this.escapeCallback = callback
-    if (window !== undefined) {
+    if (typeof window !== 'undefined') {
       window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))
     }
   }
 
   detachEscapeBehavior = (): void => {
     this.escapeCallback = () => { return }
-    if (window !== undefined) {
+    if (typeof window !== 'undefined') {
       window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this))
     }
   }

package/src/common/locale.ts

@@ -1,4 +1,4 @@
-import Handlebars from 'handlebars'
+import { render } from 'mustache'
 
 type LocaleConfig = {
   el?: Record<string, string | string[]>
@@ -12,6 +12,7 @@ export class Locale {
   language: string
   config: LocaleConfig
   closestElement:HTMLElement
+  element: HTMLElement
 
   constructor (configData?: LocaleConfig) {
     if (configData) {
@@ -23,8 +24,9 @@ export class Locale {
     this.config = configData
   }
 
-  lang = (element: HTMLElement): string => {
-    this.closestElement = element.closest('[lang]') as HTMLElement
+  lang = (el: HTMLElement): string => {
+    this.element = el
+    this.closestElement = this.element.closest('[lang]') as HTMLElement
 
     if (this.closestElement) {
       if (this.closestElement.lang) {
@@ -37,11 +39,24 @@ export class Locale {
     return this.language
   }
 
+  update = (doc?: Document | ShadowRoot): void => {
+    const context = doc ?? this.element.shadowRoot
+    context && context.querySelectorAll('*').forEach(el => {
+      if (el.tagName.toLowerCase().startsWith('mds-')) {
+        // eslint-disable-next-line no-restricted-syntax
+        if (el && 'updateLang' in el) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (el as any).updateLang()
+        }
+      }
+    })
+  }
+
   private pluralize = (tag: string | string[], context: Record<string, string | number>): string => {
 
     const languagePhrase: string | string[] = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
     const phrases: string[] = []
-    
+
     if (Array.isArray(languagePhrase)) {
       phrases.push(languagePhrase[0])
       phrases.push(languagePhrase[1])
@@ -63,8 +78,7 @@ export class Locale {
       }
     }
 
-    const template = Handlebars.compile(translatePhrase)
-    return template(context)
+    return render(translatePhrase, context)
   }
 
   get = (tag: string | string[], context?: Record<string, string | number>): string => {

package/src/common/unit.ts

@@ -23,7 +23,7 @@ const cssSizeToNumber = (size: string, defaultValue = 0): number => {
   if (size.includes('em')) {
     return Number(size.replace('em', '')) * 16
   }
-  
+
   return defaultValue
 }
 

package/src/components/mds-table-row/.gitlab-ci.yml

@@ -2,24 +2,19 @@
   variables:
     COMPONENT: mds-table-row
 
-# ISOLATE
-table-row-isolate:
-  extends: [.base-isolate, .base-table-row]
-  dependencies: [base-stencil-build]
-
 # TEST
 table-row-publish-test:
   extends: [.base-stencil-publish-test, .base-table-row]
-  dependencies: [base-stencil-build, table-row-isolate]
+  dependencies: [base-stencil-build, base-isolate]
 
 # PUBLISH
 table-row-publish:
   extends: [.base-stencil-publish, .base-table-row]
-  dependencies: [base-stencil-build, table-row-isolate]
-  needs: [base-stencil-build, table-row-isolate, table-row-publish-test]
+  dependencies: [base-stencil-build, base-isolate]
+  needs: [base-stencil-build, base-isolate, table-row-publish-test]
 
 # INSTALL TEST
 table-row-install-test:
   extends: [.base-stencil-install-test, .base-table-row]
-  dependencies: [base-stencil-build, table-row-isolate]
-  needs: [base-stencil-build, table-row-isolate, table-row-publish]
+  dependencies: [base-stencil-build, base-isolate]
+  needs: [base-stencil-build, base-isolate, table-row-publish]

package/src/components/mds-table-row/mds-table-row.css

@@ -4,6 +4,8 @@
 
   --mds-table-row-color-hover: var(--mds-table-color-hover, theme('colors.tone-neutral-02'));
   --mds-table-row-color: var(--mds-table-color, theme('colors.tone-neutral-03'));
+  --mds-table-row-actions-gap: var(--mds-table-actions-gap, theme('spacing.400'));
+
 
   @apply
     duration-200
@@ -11,10 +13,68 @@
 
   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: theme('transitionDuration.500');
+  transition-property: transform, background-color;
+  transition-timing-function: theme('transitionTimingFunction.out-expo');
+}
+
+.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/src/components/mds-table-row/mds-table-row.tsx

@@ -1,4 +1,6 @@
-import { Component, Host, h, Listen, Prop } from '@stencil/core'
+import { Component, Host, h, Listen, Prop, Element } from '@stencil/core'
+import { isMobileDevice } from '@common/device'
+import clsx from 'clsx'
 
 /**
  * @slot default - Put `mds-table-cell` element/s.
@@ -11,17 +13,33 @@ import { Component, Host, h, Listen, Prop } from '@stencil/core'
 })
 export class MdsTableRow {
 
+  @Element() host: HTMLMdsTableRowElement
+  private actions: boolean
+
   @Prop({ mutable: true, reflect: true }) interactive: boolean
 
+  @Prop({ mutable: true, reflect: true }) overlayActions: boolean
+
   @Listen('mdsTableInteractiveChange', { target: 'document' })
   tableInteractiveHandler (event: CustomEvent<boolean>): void {
     this.interactive = event.detail
   }
 
+  componentWillLoad (): void {
+    this.actions = this.host.querySelector('[slot="action"]') !== null
+  }
+
   render () {
     return (
       <Host role="row">
         <slot/>
+        { this.actions
+          && <div class={clsx('actions-wrapper', isMobileDevice() && 'actions-wrapper--mobile')} role="cell">
+            <div class="actions">
+              <slot name="action"></slot>
+            </div>
+          </div>
+        }
       </Host>
     )
   }

package/src/components/mds-table-row/readme.md

@@ -7,9 +7,10 @@
 
 ## Properties
 
-| Property      | Attribute     | Description | Type      | Default     |
-| ------------- | ------------- | ----------- | --------- | ----------- |
-| `interactive` | `interactive` |             | `boolean` | `undefined` |
+| Property         | Attribute         | Description | Type      | Default     |
+| ---------------- | ----------------- | ----------- | --------- | ----------- |
+| `interactive`    | `interactive`     |             | `boolean` | `undefined` |
+| `overlayActions` | `overlay-actions` |             | `boolean` | `undefined` |
 
 
 ## Slots

package/src/components.d.ts

@@ -8,6 +8,7 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
     interface MdsTableRow {
         "interactive": boolean;
+        "overlayActions": boolean;
     }
 }
 declare global {
@@ -24,6 +25,7 @@ declare global {
 declare namespace LocalJSX {
     interface MdsTableRow {
         "interactive"?: boolean;
+        "overlayActions"?: boolean;
     }
     interface IntrinsicElements {
         "mds-table-row": MdsTableRow;

package/src/dictionary/button.ts

@@ -4,6 +4,7 @@ const buttonVariantDictionary = [
   'info',
   'light',
   'primary',
+  'secondary',
   'success',
   'warning',
 ]