@maggioli-design-system/mds-input-tip 1.0.0 → 1.1.0

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fe2df682.js');
+const index = require('./index-f87612f6.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
-const defineCustomElements = (win, options) => {
+const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
   return index.bootstrapLazy([["mds-input-tip.cjs",[[1,"mds-input-tip",{"active":[516],"position":[513]}]]]], options);
 };
 

package/dist/cjs/mds-input-tip.cjs.entry.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fe2df682.js');
+const index = require('./index-f87612f6.js');
 
-const mdsInputTipCss = ".static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.border{border-width:1px}.bg-label-amaranth-10{--tw-bg-opacity:1;background-color:rgb(var(--label-amaranth-10) / var(--tw-bg-opacity))}.bg-label-aqua-10{--tw-bg-opacity:1;background-color:rgb(var(--label-aqua-10) / var(--tw-bg-opacity))}.bg-label-blue-10{--tw-bg-opacity:1;background-color:rgb(var(--label-blue-10) / var(--tw-bg-opacity))}.bg-label-green-10{--tw-bg-opacity:1;background-color:rgb(var(--label-green-10) / var(--tw-bg-opacity))}.bg-label-lime-10{--tw-bg-opacity:1;background-color:rgb(var(--label-lime-10) / var(--tw-bg-opacity))}.bg-label-orange-10{--tw-bg-opacity:1;background-color:rgb(var(--label-orange-10) / var(--tw-bg-opacity))}.bg-label-orchid-10{--tw-bg-opacity:1;background-color:rgb(var(--label-orchid-10) / var(--tw-bg-opacity))}.bg-label-violet-10{--tw-bg-opacity:1;background-color:rgb(var(--label-violet-10) / var(--tw-bg-opacity))}.bg-label-yellow-10{--tw-bg-opacity:1;background-color:rgb(var(--label-yellow-10) / var(--tw-bg-opacity))}.bg-tone-neutral-10{--tw-bg-opacity:1;background-color:rgb(var(--tone-neutral-10) / var(--tw-bg-opacity))}.fill-label-amaranth-04{fill:rgb(var(--label-amaranth-04))}.fill-label-aqua-04{fill:rgb(var(--label-aqua-04))}.fill-label-blue-04{fill:rgb(var(--label-blue-04))}.fill-label-green-04{fill:rgb(var(--label-green-04))}.fill-label-lime-04{fill:rgb(var(--label-lime-04))}.fill-label-orange-04{fill:rgb(var(--label-orange-04))}.fill-label-orchid-04{fill:rgb(var(--label-orchid-04))}.fill-label-violet-04{fill:rgb(var(--label-violet-04))}.fill-label-yellow-04{fill:rgb(var(--label-yellow-04))}.fill-tone-neutral-04{fill:rgb(var(--tone-neutral-04))}.text-label-amaranth-04{--tw-text-opacity:1;color:rgb(var(--label-amaranth-04) / var(--tw-text-opacity))}.text-label-aqua-04{--tw-text-opacity:1;color:rgb(var(--label-aqua-04) / var(--tw-text-opacity))}.text-label-blue-04{--tw-text-opacity:1;color:rgb(var(--label-blue-04) / var(--tw-text-opacity))}.text-label-green-04{--tw-text-opacity:1;color:rgb(var(--label-green-04) / var(--tw-text-opacity))}.text-label-lime-04{--tw-text-opacity:1;color:rgb(var(--label-lime-04) / var(--tw-text-opacity))}.text-label-orange-04{--tw-text-opacity:1;color:rgb(var(--label-orange-04) / var(--tw-text-opacity))}.text-label-orchid-04{--tw-text-opacity:1;color:rgb(var(--label-orchid-04) / var(--tw-text-opacity))}.text-label-violet-04{--tw-text-opacity:1;color:rgb(var(--label-violet-04) / var(--tw-text-opacity))}.text-label-yellow-04{--tw-text-opacity:1;color:rgb(var(--label-yellow-04) / var(--tw-text-opacity))}.text-tone-neutral-04{--tw-text-opacity:1;color:rgb(var(--tone-neutral-04) / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-input-tip-active-translate:translate(0, 0);left:0.25rem;right:0.25rem;gap:0.25rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;pointer-events:none;position:absolute;-webkit-transform:var(--mds-input-tip-active-translate);transform:var(--mds-input-tip-active-translate)}:host(:empty){display:none}:host([position=\"top\"]){top:0.25rem}:host([position=\"bottom\"]){bottom:0.25rem}:host([position=\"top\"][active]:not([active=\"false\"])){--mds-input-tip-active-translate:translate(calc(0.25rem * -1), calc(0.25rem * -1))}:host([position=\"top\"][active]:not([active=\"false\"])) ::slotted(mds-input-tip-item){border-top-left-radius:0;border-top-right-radius:0}:host([position=\"bottom\"][active]:not([active=\"false\"])){--mds-input-tip-active-translate:translate(calc(0.25rem * -1), 0.25rem)}:host([position=\"bottom\"][active]:not([active=\"false\"])) ::slotted(mds-input-tip-item){border-bottom-left-radius:0;border-bottom-right-radius:0}";
+const mdsInputTipCss = "@tailwind utilities;\n\n:host {\n\n  --mds-input-tip-active-translate: translate(0, 0);\n\n  left: 0.25rem;\n\n  right: 0.25rem;\n\n  gap: 0.25rem;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n  pointer-events: none;\n  position: absolute;\n  -webkit-transform: var(--mds-input-tip-active-translate);\n  transform: var(--mds-input-tip-active-translate);\n}\n\n:host(:empty) {\n  display: none;\n}\n\n:host([position=\"top\"]) {\n  top: 0.25rem;\n}\n\n:host([position=\"bottom\"]) {\n  bottom: 0.25rem;\n}\n\n:host([position=\"top\"][active]:not([active=\"false\"])) {\n\n  --mds-input-tip-active-translate: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n}\n\n:host([position=\"top\"][active]:not([active=\"false\"])) ::slotted( mds-input-tip-item ) {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n:host([position=\"bottom\"][active]:not([active=\"false\"])) {\n\n  --mds-input-tip-active-translate: translate(calc(0.25rem * -1), 0.25rem);\n}\n\n:host([position=\"bottom\"][active]:not([active=\"false\"])) ::slotted( mds-input-tip-item ) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.static{\n\n  position: static;\n}\n\n.fixed{\n\n  position: fixed;\n}\n\n.absolute{\n\n  position: absolute;\n}\n\n.relative{\n\n  position: relative;\n}\n\n.border{\n\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
+const MdsInputTipStyle0 = mdsInputTipCss;
 
 const MdsInputTip = class {
     constructor(hostRef) {
@@ -13,9 +14,9 @@ const MdsInputTip = class {
         this.position = 'top';
     }
     render() {
-        return (index.h(index.Host, null, index.h("slot", null)));
+        return (index.h(index.Host, { key: '0f883b978b66900598d4a7abeed8d8079d72c420' }, index.h("slot", { key: 'cca41852411fe5bc23e2ab27e656a7ad17326a14' })));
     }
 };
-MdsInputTip.style = mdsInputTipCss;
+MdsInputTip.style = MdsInputTipStyle0;
 
 exports.mds_input_tip = MdsInputTip;

package/dist/cjs/mds-input-tip.cjs.js

@@ -2,21 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fe2df682.js');
+const index = require('./index-f87612f6.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v4.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com
  */
-const patchBrowser = () => {
-    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-input-tip.cjs.js', document.baseURI).href));
-    const opts = {};
-    if (importMeta !== '') {
-        opts.resourcesUrl = new URL('.', importMeta).href;
-    }
-    return index.promiseResolve(opts);
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-input-tip.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
 };
 
-patchBrowser().then(options => {
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
   return index.bootstrapLazy([["mds-input-tip.cjs",[[1,"mds-input-tip",{"active":[516],"position":[513]}]]]], options);
 });
 

package/dist/collection/collection-manifest.json

@@ -4,8 +4,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.10.0",
-    "typescriptVersion": "5.3.3"
+    "version": "4.21.0",
+    "typescriptVersion": "5.5.3"
   },
   "collections": [],
   "bundles": []

package/dist/collection/common/locale.js

@@ -1,3 +1,4 @@
+import Handlebars from "handlebars";
 export class Locale {
     constructor(configData) {
         this.defaultLanguage = 'en';
@@ -11,8 +12,37 @@ export class Locale {
             }
             this.language = this.defaultLanguage;
         };
-        this.get = (tag) => {
+        this.pluralize = (tag, context) => {
             var _a;
+            const languagePhrase = (_a = this.config[this.language][tag]) !== null && _a !== void 0 ? _a : this.config[this.defaultLanguage][tag];
+            const phrases = [];
+            if (Array.isArray(languagePhrase)) {
+                phrases.push(languagePhrase[0]);
+                phrases.push(languagePhrase[1]);
+            }
+            else {
+                phrases.push(languagePhrase);
+                phrases.push(languagePhrase);
+            }
+            const [defaultPhrase] = phrases;
+            let translatePhrase = defaultPhrase;
+            const keys = Object.keys(context);
+            if (keys.length > 0) {
+                const [firstKey] = keys;
+                if (typeof context[firstKey] === 'number') {
+                    if (context[firstKey] !== 1) {
+                        translatePhrase = phrases[1];
+                    }
+                }
+            }
+            const template = Handlebars.compile(translatePhrase);
+            return template(context);
+        };
+        this.get = (tag, context) => {
+            var _a;
+            if (context) {
+                return this.pluralize(tag, context);
+            }
             return (_a = this.config[this.language][tag]) !== null && _a !== void 0 ? _a : this.config[this.defaultLanguage][tag];
         };
         this.config = configData;

package/dist/collection/components/mds-input-tip/mds-input-tip.css

@@ -1,219 +1,278 @@
-.static {
+@tailwind utilities;
+
+:host {
+
+  --mds-input-tip-active-translate: translate(0, 0);
+
+  left: 0.25rem;
+
+  right: 0.25rem;
+
+  gap: 0.25rem;
+
+  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  transition-duration: 300ms;
+
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+  display: flex;
+  justify-content: flex-end;
+  pointer-events: none;
+  position: absolute;
+  transform: var(--mds-input-tip-active-translate);
+}
+
+:host(:empty) {
+  display: none;
+}
+
+:host([position="top"]) {
+  top: 0.25rem;
+}
+
+:host([position="bottom"]) {
+  bottom: 0.25rem;
+}
+
+:host([position="top"][active]:not([active="false"])) {
+
+  --mds-input-tip-active-translate: translate(calc(0.25rem * -1), calc(0.25rem * -1));
+}
+
+:host([position="top"][active]:not([active="false"])) ::slotted( mds-input-tip-item ) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+:host([position="bottom"][active]:not([active="false"])) {
+
+  --mds-input-tip-active-translate: translate(calc(0.25rem * -1), 0.25rem);
+}
+
+:host([position="bottom"][active]:not([active="false"])) ::slotted( mds-input-tip-item ) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.static{
 
   position: static;
 }
 
-.fixed {
+.fixed{
 
   position: fixed;
 }
 
-.absolute {
+.absolute{
 
   position: absolute;
 }
 
-.relative {
+.relative{
 
   position: relative;
 }
 
-.border {
+.border{
 
   border-width: 1px;
 }
 
-.bg-label-amaranth-10 {
+.bg-label-amaranth-10{
 
   --tw-bg-opacity: 1;
 
   background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));
 }
 
-.bg-label-aqua-10 {
+.bg-label-aqua-10{
 
   --tw-bg-opacity: 1;
 
   background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));
 }
 
-.bg-label-blue-10 {
+.bg-label-blue-10{
 
   --tw-bg-opacity: 1;
 
   background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));
 }
 
-.bg-label-green-10 {
+.bg-label-green-10{
 
   --tw-bg-opacity: 1;
 
   background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));
 }
 
-.bg-label-lime-10 {
+.bg-label-lime-10{
 
   --tw-bg-opacity: 1;
 
   background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));
 }
 
-.bg-label-orange-10 {
+.bg-label-orange-10{
 
   --tw-bg-opacity: 1;
 
   background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));
 }
 
-.bg-label-orchid-10 {
+.bg-label-orchid-10{
 
   --tw-bg-opacity: 1;
 
   background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));
 }
 
-.bg-label-violet-10 {
+.bg-label-violet-10{
 
   --tw-bg-opacity: 1;
 
   background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));
 }
 
-.bg-label-yellow-10 {
+.bg-label-yellow-10{
 
   --tw-bg-opacity: 1;
 
   background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));
 }
 
-.bg-tone-neutral-10 {
+.bg-tone-neutral-10{
 
   --tw-bg-opacity: 1;
 
   background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));
 }
 
-.fill-label-amaranth-04 {
+.fill-label-amaranth-04{
 
   fill: rgb(var(--label-amaranth-04));
 }
 
-.fill-label-aqua-04 {
+.fill-label-aqua-04{
 
   fill: rgb(var(--label-aqua-04));
 }
 
-.fill-label-blue-04 {
+.fill-label-blue-04{
 
   fill: rgb(var(--label-blue-04));
 }
 
-.fill-label-green-04 {
+.fill-label-green-04{
 
   fill: rgb(var(--label-green-04));
 }
 
-.fill-label-lime-04 {
+.fill-label-lime-04{
 
   fill: rgb(var(--label-lime-04));
 }
 
-.fill-label-orange-04 {
+.fill-label-orange-04{
 
   fill: rgb(var(--label-orange-04));
 }
 
-.fill-label-orchid-04 {
+.fill-label-orchid-04{
 
   fill: rgb(var(--label-orchid-04));
 }
 
-.fill-label-violet-04 {
+.fill-label-violet-04{
 
   fill: rgb(var(--label-violet-04));
 }
 
-.fill-label-yellow-04 {
+.fill-label-yellow-04{
 
   fill: rgb(var(--label-yellow-04));
 }
 
-.fill-tone-neutral-04 {
+.fill-tone-neutral-04{
 
   fill: rgb(var(--tone-neutral-04));
 }
 
-.text-label-amaranth-04 {
+.text-label-amaranth-04{
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));
 }
 
-.text-label-aqua-04 {
+.text-label-aqua-04{
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));
 }
 
-.text-label-blue-04 {
+.text-label-blue-04{
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--label-blue-04) / var(--tw-text-opacity));
 }
 
-.text-label-green-04 {
+.text-label-green-04{
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--label-green-04) / var(--tw-text-opacity));
 }
 
-.text-label-lime-04 {
+.text-label-lime-04{
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--label-lime-04) / var(--tw-text-opacity));
 }
 
-.text-label-orange-04 {
+.text-label-orange-04{
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--label-orange-04) / var(--tw-text-opacity));
 }
 
-.text-label-orchid-04 {
+.text-label-orchid-04{
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));
 }
 
-.text-label-violet-04 {
+.text-label-violet-04{
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--label-violet-04) / var(--tw-text-opacity));
 }
 
-.text-label-yellow-04 {
+.text-label-yellow-04{
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));
 }
 
-.text-tone-neutral-04 {
+.text-tone-neutral-04{
 
   --tw-text-opacity: 1;
 
   color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));
 }
 
-.shadow {
+.shadow{
 
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 
@@ -222,59 +281,18 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-:host {
-
-  --mds-input-tip-active-translate: translate(0, 0);
-
-  left: 0.25rem;
-
-  right: 0.25rem;
-
-  gap: 0.25rem;
-
-  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
-
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-  transition-duration: 300ms;
-
-  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-
-  display: flex;
-  justify-content: flex-end;
-  pointer-events: none;
-  position: absolute;
-  transform: var(--mds-input-tip-active-translate);
-}
-
-:host ( :empty ) {
-  display: none;
-}
-
-:host ( [position="top"] ) {
-  top: 0.25rem;
-}
-
-:host ( [position="bottom"] ) {
-  bottom: 0.25rem;
+@container style(--magma-pref-animation: reduce) {
+  :host {
+    transition-duration: 0s;
+  }
 }
 
-:host ( [position="top"][active]:not([active="false"]) ) {
+@container style(--magma-pref-animation: system) {
 
-  --mds-input-tip-active-translate: translate(calc(0.25rem * -1), calc(0.25rem * -1));
+  @media (prefers-reduced-motion) {
+    :host {
+      transition-duration: 0s;
+    }
+  }
 }
 
-:host( [position="top"][active]:not([active="false"]) ) ::slotted( mds-input-tip-item ) {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-:host ( [position="bottom"][active]:not([active="false"]) ) {
-
-  --mds-input-tip-active-translate: translate(calc(0.25rem * -1), 0.25rem);
-}
-
-:host( [position="bottom"][active]:not([active="false"]) ) ::slotted( mds-input-tip-item ) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}

package/dist/collection/components/mds-input-tip/mds-input-tip.js

@@ -5,7 +5,7 @@ export class MdsInputTip {
         this.position = 'top';
     }
     render() {
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { key: '0f883b978b66900598d4a7abeed8d8079d72c420' }, h("slot", { key: 'cca41852411fe5bc23e2ab27e656a7ad17326a14' })));
     }
     static get is() { return "mds-input-tip"; }
     static get encapsulation() { return "shadow"; }
@@ -33,7 +33,7 @@ export class MdsInputTip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the position of the element relative to its container"
+                    "text": "Specifies if the component is active and shows expanded children or not"
                 },
                 "attribute": "active",
                 "reflect": true,

package/dist/collection/components/mds-input-tip/meta/dictionary.js

@@ -0,0 +1,5 @@
+const inputTipPositionDictionary = [
+    'top',
+    'bottom',
+];
+export { inputTipPositionDictionary, };

package/dist/collection/components/mds-input-tip/test/mds-input-tip.stories.js

@@ -0,0 +1,18 @@
+import { inputTipPositionDictionary } from "../meta/dictionary";
+import { h } from "@stencil/core";
+export default {
+    title: 'Form / Input Tip',
+    argTypes: {
+        active: {
+            type: { name: 'boolean' },
+            description: 'Specifies if the component is active and shows expanded children or not',
+        },
+        position: {
+            description: 'Specifies the position of the element relative to its container',
+            options: inputTipPositionDictionary,
+            control: { type: 'select' },
+        },
+    },
+};
+const Template = args => h("mds-input-tip", Object.assign({}, args), h("mds-input-tip-item", { variant: "required" }), h("mds-input-tip-item", { variant: "disabled" }), h("mds-input-tip-item", { variant: "readonly" }));
+export const Default = Template.bind({});

package/dist/collection/type/preference.js

@@ -0,0 +1 @@
+export {};

package/dist/components/mds-input-tip.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const mdsInputTipCss = ".static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.border{border-width:1px}.bg-label-amaranth-10{--tw-bg-opacity:1;background-color:rgb(var(--label-amaranth-10) / var(--tw-bg-opacity))}.bg-label-aqua-10{--tw-bg-opacity:1;background-color:rgb(var(--label-aqua-10) / var(--tw-bg-opacity))}.bg-label-blue-10{--tw-bg-opacity:1;background-color:rgb(var(--label-blue-10) / var(--tw-bg-opacity))}.bg-label-green-10{--tw-bg-opacity:1;background-color:rgb(var(--label-green-10) / var(--tw-bg-opacity))}.bg-label-lime-10{--tw-bg-opacity:1;background-color:rgb(var(--label-lime-10) / var(--tw-bg-opacity))}.bg-label-orange-10{--tw-bg-opacity:1;background-color:rgb(var(--label-orange-10) / var(--tw-bg-opacity))}.bg-label-orchid-10{--tw-bg-opacity:1;background-color:rgb(var(--label-orchid-10) / var(--tw-bg-opacity))}.bg-label-violet-10{--tw-bg-opacity:1;background-color:rgb(var(--label-violet-10) / var(--tw-bg-opacity))}.bg-label-yellow-10{--tw-bg-opacity:1;background-color:rgb(var(--label-yellow-10) / var(--tw-bg-opacity))}.bg-tone-neutral-10{--tw-bg-opacity:1;background-color:rgb(var(--tone-neutral-10) / var(--tw-bg-opacity))}.fill-label-amaranth-04{fill:rgb(var(--label-amaranth-04))}.fill-label-aqua-04{fill:rgb(var(--label-aqua-04))}.fill-label-blue-04{fill:rgb(var(--label-blue-04))}.fill-label-green-04{fill:rgb(var(--label-green-04))}.fill-label-lime-04{fill:rgb(var(--label-lime-04))}.fill-label-orange-04{fill:rgb(var(--label-orange-04))}.fill-label-orchid-04{fill:rgb(var(--label-orchid-04))}.fill-label-violet-04{fill:rgb(var(--label-violet-04))}.fill-label-yellow-04{fill:rgb(var(--label-yellow-04))}.fill-tone-neutral-04{fill:rgb(var(--tone-neutral-04))}.text-label-amaranth-04{--tw-text-opacity:1;color:rgb(var(--label-amaranth-04) / var(--tw-text-opacity))}.text-label-aqua-04{--tw-text-opacity:1;color:rgb(var(--label-aqua-04) / var(--tw-text-opacity))}.text-label-blue-04{--tw-text-opacity:1;color:rgb(var(--label-blue-04) / var(--tw-text-opacity))}.text-label-green-04{--tw-text-opacity:1;color:rgb(var(--label-green-04) / var(--tw-text-opacity))}.text-label-lime-04{--tw-text-opacity:1;color:rgb(var(--label-lime-04) / var(--tw-text-opacity))}.text-label-orange-04{--tw-text-opacity:1;color:rgb(var(--label-orange-04) / var(--tw-text-opacity))}.text-label-orchid-04{--tw-text-opacity:1;color:rgb(var(--label-orchid-04) / var(--tw-text-opacity))}.text-label-violet-04{--tw-text-opacity:1;color:rgb(var(--label-violet-04) / var(--tw-text-opacity))}.text-label-yellow-04{--tw-text-opacity:1;color:rgb(var(--label-yellow-04) / var(--tw-text-opacity))}.text-tone-neutral-04{--tw-text-opacity:1;color:rgb(var(--tone-neutral-04) / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-input-tip-active-translate:translate(0, 0);left:0.25rem;right:0.25rem;gap:0.25rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;pointer-events:none;position:absolute;-webkit-transform:var(--mds-input-tip-active-translate);transform:var(--mds-input-tip-active-translate)}:host(:empty){display:none}:host([position=\"top\"]){top:0.25rem}:host([position=\"bottom\"]){bottom:0.25rem}:host([position=\"top\"][active]:not([active=\"false\"])){--mds-input-tip-active-translate:translate(calc(0.25rem * -1), calc(0.25rem * -1))}:host([position=\"top\"][active]:not([active=\"false\"])) ::slotted(mds-input-tip-item){border-top-left-radius:0;border-top-right-radius:0}:host([position=\"bottom\"][active]:not([active=\"false\"])){--mds-input-tip-active-translate:translate(calc(0.25rem * -1), 0.25rem)}:host([position=\"bottom\"][active]:not([active=\"false\"])) ::slotted(mds-input-tip-item){border-bottom-left-radius:0;border-bottom-right-radius:0}";
+const mdsInputTipCss = "@tailwind utilities;\n\n:host {\n\n  --mds-input-tip-active-translate: translate(0, 0);\n\n  left: 0.25rem;\n\n  right: 0.25rem;\n\n  gap: 0.25rem;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n  pointer-events: none;\n  position: absolute;\n  -webkit-transform: var(--mds-input-tip-active-translate);\n  transform: var(--mds-input-tip-active-translate);\n}\n\n:host(:empty) {\n  display: none;\n}\n\n:host([position=\"top\"]) {\n  top: 0.25rem;\n}\n\n:host([position=\"bottom\"]) {\n  bottom: 0.25rem;\n}\n\n:host([position=\"top\"][active]:not([active=\"false\"])) {\n\n  --mds-input-tip-active-translate: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n}\n\n:host([position=\"top\"][active]:not([active=\"false\"])) ::slotted( mds-input-tip-item ) {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n:host([position=\"bottom\"][active]:not([active=\"false\"])) {\n\n  --mds-input-tip-active-translate: translate(calc(0.25rem * -1), 0.25rem);\n}\n\n:host([position=\"bottom\"][active]:not([active=\"false\"])) ::slotted( mds-input-tip-item ) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.static{\n\n  position: static;\n}\n\n.fixed{\n\n  position: fixed;\n}\n\n.absolute{\n\n  position: absolute;\n}\n\n.relative{\n\n  position: relative;\n}\n\n.border{\n\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
+const MdsInputTipStyle0 = mdsInputTipCss;
 
 const MdsInputTip$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputTip extends HTMLElement {
     constructor() {
@@ -11,9 +12,9 @@ const MdsInputTip$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputTip extends
         this.position = 'top';
     }
     render() {
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { key: '0f883b978b66900598d4a7abeed8d8079d72c420' }, h("slot", { key: 'cca41852411fe5bc23e2ab27e656a7ad17326a14' })));
     }
-    static get style() { return mdsInputTipCss; }
+    static get style() { return MdsInputTipStyle0; }
 }, [1, "mds-input-tip", {
         "active": [516],
         "position": [513]