@maggioli-design-system/mds-modal 5.3.0 → 5.5.0

package/src/components/mds-modal/test/mds-modal.stories.tsx

@@ -1,7 +1,7 @@
 
 import { h } from '@stencil/core'
 import { useState } from 'react'
-import { modalPositionDictionary } from '../meta/dictionary'
+import { modalPositionDictionary, modalOverflowDictionary } from '../meta/dictionary'
 
 export default {
   title: 'UI / Modal',
@@ -10,6 +10,12 @@ export default {
       description: 'Specifies if the modal is opened or not',
       type: { name: 'boolean' },
     },
+    overflow: {
+      description: 'Specifies if the component prevents the body from scrolling when modal window is opened',
+      control: { type: 'select' },
+      options: modalOverflowDictionary,
+      type: { name: 'string' },
+    },
     position: {
       control: { type: 'select' },
       description: 'Specifies the animation position of the modal window',
@@ -27,7 +33,7 @@ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com
 const Template = args =>
   <mds-modal {...args}>
     <header slot="top" class="p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09 max-w-[400px]">
-      <mds-img class="w-1600" src="/logo-gruppo-maggioli-512w.webp"/>
+      <mds-img class="w-1600" src="./logo-gruppo-maggioli-512w.webp"/>
       <div class="text-tone-neutral-02">
         <mds-text typography="h5" class="truncate min-w-0">Maggioli Editore</mds-text>
         <mds-text typography="detail" class="truncate min-w-0">Menu di servizio</mds-text>
@@ -40,7 +46,7 @@ const Template = args =>
     </div>
     <footer slot="bottom" class="p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09 max-w-[400px]">
       <mds-author class="flex-grow">
-        <mds-avatar slot="avatar" class="w-1600 mobile:w-1200" src="/avatar-01-200x200.jpeg"/>
+        <mds-avatar slot="avatar" class="w-1600 mobile:w-1200" src="./avatar-01-200x200.jpeg"/>
         <mds-text typography="h6">{ fullName }</mds-text>
         <mds-text typography="caption" class="text-tone-neutral-04">{ email }</mds-text>
       </mds-author>
@@ -48,6 +54,41 @@ const Template = args =>
     </footer>
   </mds-modal>
 
+const TemplateOverflow = args =>
+  <div>
+    <div class="grid">
+      {Array(40).fill(null).map((_value, index) => (
+        <div key={index} class="h-[100px] flex items-start justify-center text-center border-0 border-t border-solid border-t-tone-neutral-07">
+          <mds-text class="px-200 py-100 rounded-b-lg bg-tone-neutral-10 border-t-0 border border-solid border-tone-neutral-07" typography="snippet" tag="div">
+            { index === 0 ? '0px' : index + '00px' }
+          </mds-text>
+        </div>
+      ))}
+    </div>
+    <mds-modal {...args}>
+      <header slot="top" class="p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09 max-w-[400px]">
+        <mds-img class="w-1600" src="./logo-gruppo-maggioli-512w.webp"/>
+        <div class="text-tone-neutral-02">
+          <mds-text typography="h5" class="truncate min-w-0">Maggioli Editore</mds-text>
+          <mds-text typography="detail" class="truncate min-w-0">Menu di servizio</mds-text>
+        </div>
+      </header>
+      <div class="p-800 max-w-[400px]">
+        <mds-text>
+          As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we’re future-proofing our components as more brands adopt NewsKit.
+        </mds-text>
+      </div>
+      <footer slot="bottom" class="p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09 max-w-[400px]">
+        <mds-author class="flex-grow">
+          <mds-avatar slot="avatar" class="w-1600 mobile:w-1200" src="./avatar-01-200x200.jpeg"/>
+          <mds-text typography="h6">{ fullName }</mds-text>
+          <mds-text typography="caption" class="text-tone-neutral-04">{ email }</mds-text>
+        </mds-author>
+        <mds-button icon="mdi/dots-vertical" variant="light"></mds-button>
+      </footer>
+    </mds-modal>
+  </div>
+
 const CustomTemplate = args =>
   <mds-modal {...args}>
     <mds-banner slot="window" class="max-w-xl mx-6" deletable headline="Action required">
@@ -80,15 +121,28 @@ const InteractiveTemplate = () => {
 export const Default = Template.bind({})
 Default.args = {
   position: 'right',
+  opened: true,
+}
+
+export const BodyOverflowDisabled = TemplateOverflow.bind({})
+BodyOverflowDisabled.args = {
+  overflow: 'auto',
+  opened: true,
+  position: 'right',
 }
 
 export const DefaultWindowCustomized = Template.bind({})
 DefaultWindowCustomized.args = {
   position: 'right',
+  opened: true,
   style: { '--mds-modal-window-distance': '1rem', '--mds-modal-window-radius': '1rem' },
 }
 export const CustomWindowElement = CustomTemplate.bind({})
+CustomWindowElement.args = {
+  opened: true,
+}
 export const Interactive = InteractiveTemplate.bind({})
+
 export const ARIATest = CustomTemplate.bind({})
 ARIATest.args = {
   opened: true,

package/src/components.d.ts

@@ -5,8 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { ModalAnimationStateType, ModalPositionType } from "./components/mds-modal/meta/types";
-export { ModalAnimationStateType, ModalPositionType } from "./components/mds-modal/meta/types";
+import { ModalAnimationStateType, ModalOverflowType, ModalPositionType } from "./components/mds-modal/meta/types";
+export { ModalAnimationStateType, ModalOverflowType, ModalPositionType } from "./components/mds-modal/meta/types";
 export namespace Components {
     interface MdsModal {
         /**
@@ -17,6 +17,10 @@ export namespace Components {
           * Specifies if the modal is opened or not
          */
         "opened": boolean;
+        /**
+          * Specifies if the component prevents the body from scrolling when modal window is opened
+         */
+        "overflow": ModalOverflowType;
         /**
           * Specifies the animation position of the modal window
          */
@@ -68,6 +72,10 @@ declare namespace LocalJSX {
           * Specifies if the modal is opened or not
          */
         "opened"?: boolean;
+        /**
+          * Specifies if the component prevents the body from scrolling when modal window is opened
+         */
+        "overflow"?: ModalOverflowType;
         /**
           * Specifies the animation position of the modal window
          */

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;

package/src/tailwind/fouc.css

@@ -0,0 +1,118 @@
+:host(:not(:is([hydrated], .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;
+}
+
+/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */
+
+mds-accordion:not(:is([hydrated], .hydrated)),
+mds-accordion-item:not(:is([hydrated], .hydrated)),
+mds-accordion-timer:not(:is([hydrated], .hydrated)),
+mds-accordion-timer-item:not(:is([hydrated], .hydrated)),
+mds-author:not(:is([hydrated], .hydrated)),
+mds-avatar:not(:is([hydrated], .hydrated)),
+mds-badge:not(:is([hydrated], .hydrated)),
+mds-banner:not(:is([hydrated], .hydrated)),
+mds-benchmark-bar:not(:is([hydrated], .hydrated)),
+mds-bibliography:not(:is([hydrated], .hydrated)),
+mds-breadcrumb:not(:is([hydrated], .hydrated)),
+mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
+mds-button:not(:is([hydrated], .hydrated)),
+mds-card:not(:is([hydrated], .hydrated)),
+mds-card-content:not(:is([hydrated], .hydrated)),
+mds-card-footer:not(:is([hydrated], .hydrated)),
+mds-card-header:not(:is([hydrated], .hydrated)),
+mds-card-media:not(:is([hydrated], .hydrated)),
+mds-chip:not(:is([hydrated], .hydrated)),
+mds-details:not(:is([hydrated], .hydrated)),
+mds-dropdown:not(:is([hydrated], .hydrated)),
+mds-entity:not(:is([hydrated], .hydrated)),
+mds-file:not(:is([hydrated], .hydrated)),
+mds-file-preview:not(:is([hydrated], .hydrated)),
+mds-filter:not(:is([hydrated], .hydrated)),
+mds-filter-item:not(:is([hydrated], .hydrated)),
+mds-header:not(:is([hydrated], .hydrated)),
+mds-header-bar:not(:is([hydrated], .hydrated)),
+mds-help:not(:is([hydrated], .hydrated)),
+mds-horizontal-scroll:not(:is([hydrated], .hydrated)),
+mds-hr:not(:is([hydrated], .hydrated)),
+mds-icon:not(:is([hydrated], .hydrated)),
+mds-img:not(:is([hydrated], .hydrated)),
+mds-input:not(:is([hydrated], .hydrated)),
+mds-input-field:not(:is([hydrated], .hydrated)),
+mds-input-range:not(:is([hydrated], .hydrated)),
+mds-input-select:not(:is([hydrated], .hydrated)),
+mds-input-switch:not(:is([hydrated], .hydrated)),
+mds-input-tip:not(:is([hydrated], .hydrated)),
+mds-input-tip-item:not(:is([hydrated], .hydrated)),
+mds-input-upload:not(:is([hydrated], .hydrated)),
+mds-keyboard:not(:is([hydrated], .hydrated)),
+mds-keyboard-key:not(:is([hydrated], .hydrated)),
+mds-kpi:not(:is([hydrated], .hydrated)),
+mds-kpi-item:not(:is([hydrated], .hydrated)),
+mds-label:not(:is([hydrated], .hydrated)),
+mds-list:not(:is([hydrated], .hydrated)),
+mds-list-item:not(:is([hydrated], .hydrated)),
+mds-modal:not(:is([hydrated], .hydrated)),
+mds-note:not(:is([hydrated], .hydrated)),
+mds-notification:not(:is([hydrated], .hydrated)),
+mds-paginator:not(:is([hydrated], .hydrated)),
+mds-paginator-item:not(:is([hydrated], .hydrated)),
+mds-pref:not(:is([hydrated], .hydrated)),
+mds-pref-animation:not(:is([hydrated], .hydrated)),
+mds-pref-consumption:not(:is([hydrated], .hydrated)),
+mds-pref-contrast:not(:is([hydrated], .hydrated)),
+mds-pref-language:not(:is([hydrated], .hydrated)),
+mds-pref-language-item:not(:is([hydrated], .hydrated)),
+mds-pref-theme:not(:is([hydrated], .hydrated)),
+mds-price-table:not(:is([hydrated], .hydrated)),
+mds-price-table-features:not(:is([hydrated], .hydrated)),
+mds-price-table-features-cell:not(:is([hydrated], .hydrated)),
+mds-price-table-features-row:not(:is([hydrated], .hydrated)),
+mds-price-table-header:not(:is([hydrated], .hydrated)),
+mds-price-table-list:not(:is([hydrated], .hydrated)),
+mds-price-table-list-item:not(:is([hydrated], .hydrated)),
+mds-progress:not(:is([hydrated], .hydrated)),
+mds-push-notification:not(:is([hydrated], .hydrated)),
+mds-push-notifications:not(:is([hydrated], .hydrated)),
+mds-quote:not(:is([hydrated], .hydrated)),
+mds-separator:not(:is([hydrated], .hydrated)),
+mds-spinner:not(:is([hydrated], .hydrated)),
+mds-stepper-bar:not(:is([hydrated], .hydrated)),
+mds-stepper-bar-item:not(:is([hydrated], .hydrated)),
+mds-tab:not(:is([hydrated], .hydrated)),
+mds-tab-bar:not(:is([hydrated], .hydrated)),
+mds-tab-bar-item:not(:is([hydrated], .hydrated)),
+mds-tab-item:not(:is([hydrated], .hydrated)),
+mds-table:not(:is([hydrated], .hydrated)),
+mds-table-body:not(:is([hydrated], .hydrated)),
+mds-table-cell:not(:is([hydrated], .hydrated)),
+mds-table-footer:not(:is([hydrated], .hydrated)),
+mds-table-header:not(:is([hydrated], .hydrated)),
+mds-table-header-cell:not(:is([hydrated], .hydrated)),
+mds-table-row:not(:is([hydrated], .hydrated)),
+mds-text:not(:is([hydrated], .hydrated)),
+mds-toast:not(:is([hydrated], .hydrated)),
+mds-tooltip:not(:is([hydrated], .hydrated)),
+mds-tree:not(:is([hydrated], .hydrated)),
+mds-tree-item:not(:is([hydrated], .hydrated)),
+mds-url-view:not(:is([hydrated], .hydrated)),
+mds-usage:not(:is([hydrated], .hydrated)),
+mds-video-wall:not(:is([hydrated], .hydrated)),
+mds-zero:not(:is([hydrated], .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;
+}

package/src/tailwind/index.css

@@ -0,0 +1,4 @@
+@import './components.css';
+@tailwind components;
+@tailwind utilities;
+