@maggioli-design-system/mds-table-row 5.1.0 → 5.3.0

package/documentation.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-02-10T11:17:06",
+  "timestamp": "2025-03-05T16:16:01",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.25.1",
+    "version": "4.27.2",
     "typescriptVersion": "5.5.4"
   },
   "components": [
@@ -399,6 +399,11 @@
       "docstring": "",
       "path": "src/components/mds-header/meta/event-detail.ts"
     },
+    "src/components/mds-header/meta/event-detail.ts::MdsHeaderVisibilityEventDetail": {
+      "declaration": "export interface MdsHeaderVisibilityEventDetail {\n  visibility: boolean\n}",
+      "docstring": "",
+      "path": "src/components/mds-header/meta/event-detail.ts"
+    },
     "src/components/mds-horizontal-scroll/meta/types.ts::ViewportType": {
       "declaration": "export type ViewportType =\n  | 'all'\n  | 'tv'\n  | 'xlarge'\n  | 'large'\n  | 'wide'\n  | 'desktop'\n  | 'tablet'\n  | 'none'",
       "docstring": "",
@@ -514,6 +519,16 @@
       "docstring": "",
       "path": "src/components/mds-input-upload/meta/types.ts"
     },
+    "src/components/mds-keyboard/meta/type.ts::KeyboardTest": {
+      "declaration": "export type KeyboardTest =\n  | 'pass'\n  | 'fail'",
+      "docstring": "",
+      "path": "src/components/mds-keyboard/meta/type.ts"
+    },
+    "src/type/keyboard.ts::KeyboardKeyName": {
+      "declaration": "export type KeyboardKeyName =\n  | '0'\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | 'a'\n  | 'alt'\n  | 'altleft'\n  | 'altright'\n  | 'arrowdown'\n  | 'arrowleft'\n  | 'arrowright'\n  | 'arrowup'\n  | 'b'\n  | 'backspace'\n  | 'c'\n  | 'capslock'\n  | 'command'\n  | 'commandleft'\n  | 'commandright'\n  | 'control'\n  | 'controlleft'\n  | 'controlright'\n  | 'd'\n  | 'delete'\n  | 'e'\n  | 'end'\n  | 'enter'\n  | 'escape'\n  | 'f'\n  | 'f1'\n  | 'f10'\n  | 'f11'\n  | 'f12'\n  | 'f2'\n  | 'f3'\n  | 'f4'\n  | 'f5'\n  | 'f6'\n  | 'f7'\n  | 'f8'\n  | 'f9'\n  | 'g'\n  | 'h'\n  | 'home'\n  | 'i'\n  | 'j'\n  | 'k'\n  | 'l'\n  | 'm'\n  | 'n'\n  | 'o'\n  | 'option'\n  | 'optionleft'\n  | 'optionright'\n  | 'p'\n  | 'pagedown'\n  | 'pageup'\n  | 'q'\n  | 'r'\n  | 's'\n  | 'shift'\n  | 'shiftleft'\n  | 'shiftright'\n  | 'space'\n  | 't'\n  | 'tab'\n  | 'u'\n  | 'v'\n  | 'w'\n  | 'windows'\n  | 'windowsleft'\n  | 'windowsright'\n  | 'x'\n  | 'y'\n  | 'z'",
+      "docstring": "",
+      "path": "src/type/keyboard.ts"
+    },
     "src/type/typography.ts::TypographyType": {
       "declaration": "export type TypographyType =\n  | 'action'\n  | 'caption'\n  | 'snippet'\n  | 'detail'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'hack'\n  | 'label'\n  | 'option'\n  | 'paragraph'\n  | 'tip'",
       "docstring": "",
@@ -534,6 +549,11 @@
       "docstring": "",
       "path": "src/components/mds-modal/meta/types.ts"
     },
+    "src/components/mds-modal/meta/types.ts::ModalOverflowType": {
+      "declaration": "export type ModalOverflowType =\n  | 'auto'\n  | 'manual'",
+      "docstring": "",
+      "path": "src/components/mds-modal/meta/types.ts"
+    },
     "src/type/variant.ts::LabelVariantType": {
       "declaration": "export type LabelVariantType =\n  | 'amaranth'\n  | 'aqua'\n  | 'blue'\n  | 'green'\n  | 'lime'\n  | 'orange'\n  | 'orchid'\n  | 'sky'\n  | 'violet'\n  | 'yellow'",
       "docstring": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-table-row",
-  "version": "5.1.0",
+  "version": "5.3.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",
@@ -23,9 +23,9 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-table-cell": "5.0.1",
-    "@maggioli-design-system/styles": "15.7.0",
-    "@stencil/core": "4.25.1"
+    "@maggioli-design-system/mds-table-cell": "5.2.0",
+    "@maggioli-design-system/styles": "15.9.0",
+    "@stencil/core": "4.27.2"
   },
   "license": "MIT",
   "author": {

package/src/common/floating-controller.ts

@@ -214,21 +214,21 @@ export class FloatingController {
 }
 
 export class Backdrop {
-  private readonly defaultBackdropId = 'mds-backdrop'
+  private readonly defaultBackdropId = 'magma-backdrop'
   private readonly backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))'
   private readonly backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)'
 
-  private readonly backdropId
-  private readonly cssBackdropZIndex
-  private readonly cssBackdropDuration
+  private readonly backdropId: string
+  private readonly cssBackdropZIndex: string
+  private readonly cssBackdropDuration: string
 
   private backdropEl: HTMLElement
   private backdropTimer: NodeJS.Timeout
 
   constructor (backdropId?: string) {
     this.backdropId = backdropId ?? this.defaultBackdropId
-    this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`
-    this.cssBackdropDuration = `var(--${this.backdropId}-duration)`
+    this.cssBackdropZIndex = `var(--${this.backdropId}-z-index, 4000)`
+    this.cssBackdropDuration = `var(--${this.backdropId}-animation-duration, 300ms)`
   }
 
   attachBackdrop (): void {

package/src/common/string.ts

@@ -0,0 +1,42 @@
+const levenshteinDistance = (a: string, b: string): number => {
+  const dp: number[][] = Array.from({ length: a.length + 1 }, (_, i) =>
+    // eslint-disable-next-line no-nested-ternary
+    Array.from({ length: b.length + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0)),
+  )
+
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) {
+      if (a[i - 1] === b[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1]
+      } else {
+        dp[i][j] = 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1])
+      }
+    }
+  }
+
+  return dp[a.length][b.length]
+}
+
+
+const closest = (input: string, validCodes: string[]): string => {
+  let [closest] = validCodes
+  let minDistance = levenshteinDistance(input, closest)
+
+  for (const code of validCodes) {
+    const distance = levenshteinDistance(input, code)
+    if (distance < minDistance) {
+      minDistance = distance
+      closest = code
+    }
+  }
+
+  return closest
+}
+
+const firstLetterUppercase = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1)
+
+export {
+  closest,
+  firstLetterUppercase,
+  levenshteinDistance,
+}

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

@@ -8,7 +8,6 @@
 }
 
 .actions {
-
   --mds-table-row-actions-background: var(--mds-table-row-background);
 
   align-items: center;
@@ -31,6 +30,8 @@
 }
 
 :host(:hover) .actions {
+
+  /* :host-context(:not(.safari)) */
   transform: translateX(100%);
 }
 
@@ -40,22 +41,19 @@
 }
 
 :host([overlay-actions]:hover) .actions {
-
   --mds-table-row-actions-background: var(--mds-table-row-background);
 
   transform: translateX(0);
 }
 
-:host(:hover):host-context(mds-table[interactive="false"]) .actions,
-:host(:hover):host-context(mds-table:not([interactive])) .actions {
-
+:host-context(mds-table[interactive="false"]):host(:hover) .actions,
+:host-context(mds-table:not([interactive])):host(:hover) .actions {
   --mds-table-row-actions-background: var(--mds-table-row-background-hover);
 }
 
-:host(:not([selected]):hover):host-context(mds-table[selection]:not([interactive])) .actions,
-:host(:not([selected]):hover):host-context(mds-table[selection][interactive="false"]) .actions,
-:host([selected="false"]:hover):host-context(mds-table[selection]:not([interactive])) .actions,
-:host([selected="false"]:hover):host-context(mds-table[selection][interactive="false"]) .actions {
-
+:host-context(mds-table[selection]:not([interactive])):host(:not([selected]):hover) .actions,
+:host-context(mds-table[selection][interactive="false"]):host(:not([selected]):hover) .actions,
+:host-context(mds-table[selection]:not([interactive])):host([selected="false"]:hover) .actions,
+:host-context(mds-table[selection][interactive="false"]):host([selected="false"]:hover) .actions {
   --mds-table-row-actions-background: var(--mds-table-row-background-alt);
 }

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

@@ -1,5 +1,4 @@
 :host([interactive]:hover) {
-
   --mds-table-row-actions-background: var(--mds-table-row-background-hover);
   --mds-table-row-background: var(--mds-table-row-background-hover);
   --mds-table-row-color: var(--mds-table-row-color-hover);

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

@@ -1,18 +1,9 @@
-@tailwind utilities;
-
-@container style(--magma-pref-animation: reduce) {
-  :host,
-  .actions {
-    transition-duration: 0s;
-  }
+:host-context(.pref-animation-reduce) {
+  transition-duration: 0s;
 }
 
-@container style(--magma-pref-animation: system) {
-
-  @media (prefers-reduced-motion) {
-    :host,
-    .actions {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion) {
+  :host-context(.pref-animation-system) {
+    transition-duration: 0s;
   }
 }

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

@@ -1,5 +1,4 @@
 :host([selected]) {
-
   --mds-table-row-background: var(--mds-table-row-background-hover);
   --mds-table-row-color: var(--mds-table-row-color-hover);
 }

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

@@ -1,11 +1,9 @@
 :host([sorted]) {
-
   --mds-table-row-background: var(--mds-table-row-background-alt);
   --mds-table-row-color: var(--mds-table-row-color-alt);
 }
 
 :host([sorted][selected]) {
-
   --mds-table-row-background: var(--mds-table-row-background-hover);
   --mds-table-row-color: var(--mds-table-row-color-hover);
 }

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

@@ -1,7 +1,4 @@
-@tailwind utilities;
-
 :host {
-
   --mds-table-row-color-hover: var(--mds-table-color, theme('colors.tone-neutral-02'));
   --mds-table-row-color-alt: var(--mds-table-color-alt, theme('colors.tone-neutral-02'));
   --mds-table-row-background-hover: var(--mds-table-background, theme('colors.tone-neutral'));
@@ -32,3 +29,4 @@
 @import './css/mds-table-row-sorted.css';
 @import './css/mds-table-row-actions.css';
 @import './css/mds-table-row-pref-animation.css';
+@import '../../tailwind/fouc.css';

package/src/dictionary/keyboard.ts

@@ -0,0 +1,87 @@
+const keyboardKeyNameDictionary = [
+  '0',
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  'a',
+  'alt',
+  'altleft',
+  'altright',
+  'arrowdown',
+  'arrowleft',
+  'arrowright',
+  'arrowup',
+  'b',
+  'backspace',
+  'c',
+  'capslock',
+  'command',
+  'commandleft',
+  'commandright',
+  'control',
+  'controlleft',
+  'controlright',
+  'd',
+  'delete',
+  'e',
+  'end',
+  'enter',
+  'escape',
+  'f',
+  'f1',
+  'f10',
+  'f11',
+  'f12',
+  'f2',
+  'f3',
+  'f4',
+  'f5',
+  'f6',
+  'f7',
+  'f8',
+  'f9',
+  'g',
+  'h',
+  'home',
+  'i',
+  'j',
+  'k',
+  'l',
+  'm',
+  'n',
+  'o',
+  'option',
+  'optionleft',
+  'optionright',
+  'p',
+  'pagedown',
+  'pageup',
+  'q',
+  'r',
+  's',
+  'shift',
+  'shiftleft',
+  'shiftright',
+  'space',
+  't',
+  'tab',
+  'u',
+  'v',
+  'w',
+  'windows',
+  'windowsleft',
+  'windowsright',
+  'x',
+  'y',
+  'z',
+]
+
+export {
+  keyboardKeyNameDictionary,
+}

package/src/fixtures/icons.json

@@ -1,5 +1,6 @@
 [
     "mdi/alien",
+    "mdi/apple-keyboard-shift",
     "mdi/barley",
     "mdi/baseball",
     "mdi/crown",
@@ -12,8 +13,10 @@
     "mdi/folder-open",
     "mdi/handshake",
     "mdi/harddisk",
+    "mdi/keyboard-space",
     "mdi/license",
     "mdi/map-marker",
+    "mdi/npm",
     "mdi/replay",
     "mdi/vector-curve",
     "mgg/abitazione-principale",
@@ -368,8 +371,16 @@
     "mi/baseline/indeterminate-check-box",
     "mi/baseline/info",
     "mi/baseline/insert-drive-file",
+    "mi/baseline/keyboard",
     "mi/baseline/keyboard-arrow-down",
+    "mi/baseline/keyboard-arrow-left",
+    "mi/baseline/keyboard-arrow-right",
     "mi/baseline/keyboard-arrow-up",
+    "mi/baseline/keyboard-capslock",
+    "mi/baseline/keyboard-command-key",
+    "mi/baseline/keyboard-option-key",
+    "mi/baseline/keyboard-return",
+    "mi/baseline/keyboard-tab",
     "mi/baseline/light-mode",
     "mi/baseline/local-activity",
     "mi/baseline/location-city",
@@ -379,6 +390,7 @@
     "mi/baseline/meeting-room",
     "mi/baseline/more-vert",
     "mi/baseline/navigate-next",
+    "mi/baseline/north",
     "mi/baseline/panorama",
     "mi/baseline/person",
     "mi/baseline/pets",
@@ -389,6 +401,7 @@
     "mi/baseline/route",
     "mi/baseline/send",
     "mi/baseline/settings",
+    "mi/baseline/south",
     "mi/baseline/sports",
     "mi/baseline/sports-soccer",
     "mi/baseline/stadium",
@@ -397,6 +410,8 @@
     "mi/baseline/tv",
     "mi/baseline/unfold-less",
     "mi/baseline/unfold-more",
+    "mi/baseline/vertical-align-bottom",
+    "mi/baseline/vertical-align-top",
     "mi/baseline/videocam",
     "mi/baseline/visibility",
     "mi/baseline/visibility-off",
@@ -405,6 +420,7 @@
     "mi/baseline/web",
     "mi/baseline/wysiwyg",
     "mi/outline/auto-awesome",
+    "mi/outline/backspace",
     "mi/outline/circle",
     "mi/outline/dark-mode",
     "mi/outline/help-outline",
@@ -413,5 +429,6 @@
     "mi/round/email",
     "mi/round/menu",
     "mi/round/more-vert",
-    "mi/round/person"
+    "mi/round/person",
+    "mi/sharp/window"
 ]

package/src/meta/keyboard/keys.json

@@ -0,0 +1,83 @@
+{
+  "0": { "description": "keyNumber", "group": "Number", "alias": "0", "keyCodes": ["Digit0", "Numpad0"] },
+  "1": { "description": "keyNumber", "group": "Number", "alias": "1", "keyCodes": ["Digit1", "Numpad1"] },
+  "2": { "description": "keyNumber", "group": "Number", "alias": "2", "keyCodes": ["Digit2", "Numpad2"] },
+  "3": { "description": "keyNumber", "group": "Number", "alias": "3", "keyCodes": ["Digit3", "Numpad3"] },
+  "4": { "description": "keyNumber", "group": "Number", "alias": "4", "keyCodes": ["Digit4", "Numpad4"] },
+  "5": { "description": "keyNumber", "group": "Number", "alias": "5", "keyCodes": ["Digit5", "Numpad5"] },
+  "6": { "description": "keyNumber", "group": "Number", "alias": "6", "keyCodes": ["Digit6", "Numpad6"] },
+  "7": { "description": "keyNumber", "group": "Number", "alias": "7", "keyCodes": ["Digit7", "Numpad7"] },
+  "8": { "description": "keyNumber", "group": "Number", "alias": "8", "keyCodes": ["Digit8", "Numpad8"] },
+  "9": { "description": "keyNumber", "group": "Number", "alias": "9", "keyCodes": ["Digit9", "Numpad9"] },
+  "a": { "description": "keyCharacter", "group": "Character", "alias": "A", "keyCodes": ["KeyA"] },
+  "alt": { "description": "modAlt", "group": "Modificator", "alias": "Alt", "keyCodes": ["AltLeft", "AltRight"] },
+  "altleft": { "description": "modAlt", "group": "Modificator", "alias": "Alt", "keyboardPosition": {"left": true}, "keyCodes": ["AltLeft"] },
+  "altright": { "description": "modAlt", "group": "Modificator", "alias": "Alt", "keyboardPosition": {"right": true}, "keyCodes": ["AltRight"] },
+  "arrowdown": { "description": "navArrowDown", "group": "Arrow", "alias": "ArrowDown", "keyCodes": ["ArrowDown"] },
+  "arrowleft": { "description": "navArrowLeft", "group": "Arrow", "alias": "ArrowLeft", "keyCodes": ["ArrowLeft"] },
+  "arrowright": { "description": "navArrowRight", "group": "Arrow", "alias": "ArrowRight", "keyCodes": ["ArrowRight"] },
+  "arrowup": { "description": "navArrowUp", "group": "Arrow", "alias": "ArrowUp", "keyCodes": ["ArrowUp"] },
+  "b": { "description": "keyCharacter", "group": "Character", "alias": "B", "keyCodes": ["KeyB"] },
+  "backspace": { "description": "specBackspace", "group": "Special", "alias": "Backspace", "keyCodes": ["Backspace"] },
+  "c": { "description": "keyCharacter", "group": "Character", "alias": "C", "keyCodes": ["KeyC"] },
+  "capslock": { "description": "specCapsLock", "group": "Special", "alias": "CapsLock", "keyCodes": ["CapsLock"] },
+  "command": { "description": "modMeta", "group": "Modificator", "alias": "Cmd", "keyCodes": ["MetaLeft", "MetaRight"] },
+  "commandleft": { "description": "modMeta", "group": "Modificator", "alias": "Cmd", "keyboardPosition": {"left": true}, "keyCodes": ["MetaLeft"] },
+  "commandright": { "description": "modMeta", "group": "Modificator", "alias": "Cmd", "keyboardPosition": {"right": true}, "keyCodes": ["MetaRight"] },
+  "control": { "description": "modControl", "group": "Modificator", "alias": "Ctrl", "keyCodes": ["ControlLeft", "ControlRight"] },
+  "controlleft": { "description": "modControl", "group": "Modificator", "alias": "Ctrl", "keyboardPosition": {"left": true}, "keyCode": "Control", "keyCodes": ["ControlLeft"] },
+  "controlright": { "description": "modControl", "group": "Modificator", "alias": "Ctrl", "keyboardPosition": {"right": true}, "keyCode": "Control", "keyCodes": ["ControlRight"] },
+  "d": { "description": "keyCharacter", "group": "Character", "alias": "D", "keyCodes": ["KeyD"] },
+  "delete": { "description": "specDelete", "group": "Special", "alias": "Delete", "keyCodes": ["Delete"] },
+  "e": { "description": "keyCharacter", "group": "Character", "alias": "E", "keyCodes": ["KeyE"] },
+  "end": { "description": "navEnd", "group": "Navigator", "alias": "End", "keyCodes": ["End"] },
+  "enter": { "description": "specEnter", "group": "Special", "alias": "Enter", "keyCodes": ["Enter"] },
+  "escape": { "description": "specEscape", "group": "Special", "alias": "Esc", "keyCodes": ["Escape"] },
+  "f": { "description": "keyCharacter", "group": "Character", "alias": "F", "keyCodes": ["KeyF"] },
+  "f1": { "description": "keyFunction", "group": "Function", "alias": "F1", "keyCodes": ["F1"] },
+  "f10": { "description": "keyFunction", "group": "Function", "alias": "F10", "keyCodes": ["F10"] },
+  "f11": { "description": "keyFunction", "group": "Function", "alias": "F11", "keyCodes": ["F11"] },
+  "f12": { "description": "keyFunction", "group": "Function", "alias": "F12", "keyCodes": ["F12"] },
+  "f2": { "description": "keyFunction", "group": "Function", "alias": "F2", "keyCodes": ["F2"] },
+  "f3": { "description": "keyFunction", "group": "Function", "alias": "F3", "keyCodes": ["F3"] },
+  "f4": { "description": "keyFunction", "group": "Function", "alias": "F4", "keyCodes": ["F4"] },
+  "f5": { "description": "keyFunction", "group": "Function", "alias": "F5", "keyCodes": ["F5"] },
+  "f6": { "description": "keyFunction", "group": "Function", "alias": "F6", "keyCodes": ["F6"] },
+  "f7": { "description": "keyFunction", "group": "Function", "alias": "F7", "keyCodes": ["F7"] },
+  "f8": { "description": "keyFunction", "group": "Function", "alias": "F8", "keyCodes": ["F8"] },
+  "f9": { "description": "keyFunction", "group": "Function", "alias": "F9", "keyCodes": ["F9"] },
+  "g": { "description": "keyCharacter", "group": "Character", "alias": "G", "keyCodes": ["KeyG"] },
+  "h": { "description": "keyCharacter", "group": "Character", "alias": "H", "keyCodes": ["KeyH"] },
+  "home": { "description": "navHome", "group": "Navigator", "alias": "Home", "keyCodes": ["Home"] },
+  "i": { "description": "keyCharacter", "group": "Character", "alias": "I", "keyCodes": ["KeyI"] },
+  "j": { "description": "keyCharacter", "group": "Character", "alias": "J", "keyCodes": ["KeyJ"] },
+  "k": { "description": "keyCharacter", "group": "Character", "alias": "K", "keyCodes": ["KeyK"] },
+  "l": { "description": "keyCharacter", "group": "Character", "alias": "L", "keyCodes": ["KeyL"] },
+  "m": { "description": "keyCharacter", "group": "Character", "alias": "M", "keyCodes": ["KeyM"] },
+  "n": { "description": "keyCharacter", "group": "Character", "alias": "N", "keyCodes": ["KeyN"] },
+  "o": { "description": "keyCharacter", "group": "Character", "alias": "O", "keyCodes": ["KeyO"] },
+  "option": { "description": "modAlt", "group": "Modificator", "alias": "Alt", "keyCodes": ["AltLeft", "AltRight"] },
+  "optionleft": { "description": "modAlt", "group": "Modificator", "alias": "Alt", "keyboardPosition": {"left": true}, "keyCodes": ["AltLeft"] },
+  "optionright": { "description": "modAlt", "group": "Modificator", "alias": "Alt", "keyboardPosition": {"right": true}, "keyCodes": ["AltRight"] },
+  "p": { "description": "keyCharacter", "group": "Character", "alias": "P", "keyCodes": ["KeyP"] },
+  "pagedown": { "description": "navPageDown", "group": "Navigator", "alias": "PageDown", "keyCodes": ["PageDown"] },
+  "pageup": { "description": "navPageUp", "group": "Navigator", "alias": "PageUp", "keyCodes": ["PageUp"] },
+  "q": { "description": "keyCharacter", "group": "Character", "alias": "Q", "keyCodes": ["KeyQ"] },
+  "r": { "description": "keyCharacter", "group": "Character", "alias": "R", "keyCodes": ["KeyR"] },
+  "s": { "description": "keyCharacter", "group": "Character", "alias": "S", "keyCodes": ["KeyS"] },
+  "shift": { "description": "modShift", "group": "Modificator", "alias": "Shift", "keyCodes": ["ShiftLeft", "ShiftRight"] },
+  "shiftleft": { "description": "modShift", "group": "Modificator", "alias": "Shift", "keyboardPosition": {"left": true}, "keyCodes": ["ShiftLeft"] },
+  "shiftright": { "description": "modShift", "group": "Modificator", "alias": "Shift", "keyboardPosition": {"right": true}, "keyCodes": ["ShiftRight"] },
+  "space": { "description": "specSpace", "group": "Special", "alias": "Space", "keyCodes": ["Space"] },
+  "t": { "description": "keyCharacter", "group": "Character", "alias": "T", "keyCodes": ["KeyT"] },
+  "tab": { "description": "specTab", "group": "Special", "alias": "Tab", "keyCodes": ["Tab"] },
+  "u": { "description": "keyCharacter", "group": "Character", "alias": "U", "keyCodes": ["KeyU"] },
+  "v": { "description": "keyCharacter", "group": "Character", "alias": "V", "keyCodes": ["KeyV"] },
+  "w": { "description": "keyCharacter", "group": "Character", "alias": "W", "keyCodes": ["KeyW"] },
+  "windows": { "description": "modMeta", "group": "Modificator", "alias": "Win", "keyCodes": ["MetaLeft", "MetaRight"] },
+  "windowsleft": { "description": "modMeta", "group": "Modificator", "alias": "Win", "keyboardPosition": {"left": true}, "keyCodes": ["MetaLeft"] },
+  "windowsright": { "description": "modMeta", "group": "Modificator", "alias": "Win", "keyboardPosition": {"right": true}, "keyCodes": ["MetaRight"] },
+  "x": { "description": "keyCharacter", "group": "Character", "alias": "X", "keyCodes": ["KeyX"] },
+  "y": { "description": "keyCharacter", "group": "Character", "alias": "Y", "keyCodes": ["KeyY"] },
+  "z": { "description": "keyCharacter", "group": "Character", "alias": "Z", "keyCodes": ["KeyZ"] }
+}

package/src/tailwind/components.css

@@ -1,6 +1,4 @@
 @import '~@maggioli-design-system/styles/dist/tailwind/components.css';
-@tailwind components;
-@tailwind utilities;
 
 @layer components {
   .svg {
@@ -38,49 +36,16 @@
     box-shadow: theme('boxShadow.outline') inset;
   }
 
-  @container style(--magma-pref-contrast: more) {
-    .contrast-area,
-    .contrast-area-50 {
-      @apply
-        block
-        opacity-100;
-
-      /* @starting-style {
-        opacity: 0;
-      } */
-    }
-  }
-
-  @container style(--magma-pref-contrast: system) {
-
-    @media (prefers-contrast: more) {
-      .contrast-area,
-      .contrast-area-50 {
-        @apply
-          block
-          opacity-100;
-
-        /* @starting-style {
-          opacity: 0;
-        } */
-      }
-    }
-  }
-
-  @container style(--magma-pref-animation: reduce) {
-    .contrast-area,
-    .contrast-area-50 {
-      @apply duration-0;
-    }
-  }
-
-  @container style(--magma-pref-animation: system) {
-
-    @media (prefers-reduced-motion) {
-      .contrast-area,
-      .contrast-area-50 {
-        @apply duration-0;
-      }
-    }
+  .not-hydrated {
+      animation-duration: 0s;
+      border-color: transparent;
+      box-shadow: 0 0 0 transparent;
+      opacity: 0;
+      outline-color: transparent;
+      transition-delay: 0s;
+      transition-duration: 0s;
+      visibility: hidden;
   }
 }
+
+@tailwind components;