@maggioli-design-system/mds-input-select 2.0.5 → 3.0.1

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

@@ -2,233 +2,6 @@
 @tailwind utilities;
 
 
-
-*, ::before, ::after{
-
-  --tw-border-spacing-x: 0;
-
-  --tw-border-spacing-y: 0;
-
-  --tw-translate-x: 0;
-
-  --tw-translate-y: 0;
-
-  --tw-rotate: 0;
-
-  --tw-skew-x: 0;
-
-  --tw-skew-y: 0;
-
-  --tw-scale-x: 1;
-
-  --tw-scale-y: 1;
-
-  --tw-pan-x:  ;
-
-  --tw-pan-y:  ;
-
-  --tw-pinch-zoom:  ;
-
-  --tw-scroll-snap-strictness: proximity;
-
-  --tw-gradient-from-position:  ;
-
-  --tw-gradient-via-position:  ;
-
-  --tw-gradient-to-position:  ;
-
-  --tw-ordinal:  ;
-
-  --tw-slashed-zero:  ;
-
-  --tw-numeric-figure:  ;
-
-  --tw-numeric-spacing:  ;
-
-  --tw-numeric-fraction:  ;
-
-  --tw-ring-inset:  ;
-
-  --tw-ring-offset-width: 0px;
-
-  --tw-ring-offset-color: #fff;
-
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-
-  --tw-ring-offset-shadow: 0 0 #0000;
-
-  --tw-ring-shadow: 0 0 #0000;
-
-  --tw-shadow: 0 0 #0000;
-
-  --tw-shadow-colored: 0 0 #0000;
-
-  --tw-blur:  ;
-
-  --tw-brightness:  ;
-
-  --tw-contrast:  ;
-
-  --tw-grayscale:  ;
-
-  --tw-hue-rotate:  ;
-
-  --tw-invert:  ;
-
-  --tw-saturate:  ;
-
-  --tw-sepia:  ;
-
-  --tw-drop-shadow:  ;
-
-  --tw-backdrop-blur:  ;
-
-  --tw-backdrop-brightness:  ;
-
-  --tw-backdrop-contrast:  ;
-
-  --tw-backdrop-grayscale:  ;
-
-  --tw-backdrop-hue-rotate:  ;
-
-  --tw-backdrop-invert:  ;
-
-  --tw-backdrop-opacity:  ;
-
-  --tw-backdrop-saturate:  ;
-
-  --tw-backdrop-sepia:  ;
-
-  --tw-contain-size:  ;
-
-  --tw-contain-layout:  ;
-
-  --tw-contain-paint:  ;
-
-  --tw-contain-style:  ;
-}
-
-
-
-::backdrop{
-
-  --tw-border-spacing-x: 0;
-
-  --tw-border-spacing-y: 0;
-
-  --tw-translate-x: 0;
-
-  --tw-translate-y: 0;
-
-  --tw-rotate: 0;
-
-  --tw-skew-x: 0;
-
-  --tw-skew-y: 0;
-
-  --tw-scale-x: 1;
-
-  --tw-scale-y: 1;
-
-  --tw-pan-x:  ;
-
-  --tw-pan-y:  ;
-
-  --tw-pinch-zoom:  ;
-
-  --tw-scroll-snap-strictness: proximity;
-
-  --tw-gradient-from-position:  ;
-
-  --tw-gradient-via-position:  ;
-
-  --tw-gradient-to-position:  ;
-
-  --tw-ordinal:  ;
-
-  --tw-slashed-zero:  ;
-
-  --tw-numeric-figure:  ;
-
-  --tw-numeric-spacing:  ;
-
-  --tw-numeric-fraction:  ;
-
-  --tw-ring-inset:  ;
-
-  --tw-ring-offset-width: 0px;
-
-  --tw-ring-offset-color: #fff;
-
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-
-  --tw-ring-offset-shadow: 0 0 #0000;
-
-  --tw-ring-shadow: 0 0 #0000;
-
-  --tw-shadow: 0 0 #0000;
-
-  --tw-shadow-colored: 0 0 #0000;
-
-  --tw-blur:  ;
-
-  --tw-brightness:  ;
-
-  --tw-contrast:  ;
-
-  --tw-grayscale:  ;
-
-  --tw-hue-rotate:  ;
-
-  --tw-invert:  ;
-
-  --tw-saturate:  ;
-
-  --tw-sepia:  ;
-
-  --tw-drop-shadow:  ;
-
-  --tw-backdrop-blur:  ;
-
-  --tw-backdrop-brightness:  ;
-
-  --tw-backdrop-contrast:  ;
-
-  --tw-backdrop-grayscale:  ;
-
-  --tw-backdrop-hue-rotate:  ;
-
-  --tw-backdrop-invert:  ;
-
-  --tw-backdrop-opacity:  ;
-
-  --tw-backdrop-saturate:  ;
-
-  --tw-backdrop-sepia:  ;
-
-  --tw-contain-size:  ;
-
-  --tw-contain-layout:  ;
-
-  --tw-contain-paint:  ;
-
-  --tw-contain-style:  ;
-}
-.svg{
-
-  display: flex;
-}
-.svg svg{
-
-  aspect-ratio: 1/1;
-
-  height: 100%;
-
-  width: 100%;
-}
-@tailwind utilities;
-
-
 :host{
 
   min-height: 1.5rem;
@@ -261,19 +34,14 @@
           user-select: none;
 }
 
-:host( [required]:not([required="false"]):focus-within ) .icon{
-
-  --tw-translate-y: 0.375rem;
-
-  --tw-translate-x: 0.375rem;
-
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+:host([required]:not([required="false"]):focus-within) .icon {
+  transform: translate(0.375rem, 0.375rem);
 }
 
-:host( :hover ),
-:host( :focus-within ) {
+:host(:hover),
+:host(:focus-within) {
 
-  --mds-input-select-variant-color: var(--brand-maggioli-03);
+  --mds-input-select-variant-color: var(--variant-primary-03);
   --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);
   --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);
   --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);
@@ -308,10 +76,6 @@
 
   padding-right: 3rem;
 
-  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);
@@ -329,6 +93,7 @@
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
+  transition-property: background-color, border-color, box-shadow, color, fill;
 }
 
 .input:hover,
@@ -338,10 +103,6 @@
 
   outline-offset: 2px;
 
-  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);
@@ -370,15 +131,9 @@
   pointer-events: none;
 }
 
-:host([disabled]:not([disabled="false"])) .icon{
-
-  --tw-translate-y: 0.5rem;
-
-  --tw-translate-x: 0.625rem;
-
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-
+:host([disabled]:not([disabled="false"])) .icon {
   fill: rgb(var(--tone-neutral-06));
+  transform: translate(0.625rem, 0.5rem);
 }
 
 .icon-container{
@@ -396,16 +151,27 @@
 
 .icon{
 
-  border-radius: 9999px;
+  display: flex;
+}
+
+.icon svg{
+
+  aspect-ratio: 1/1;
+
+  height: 100%;
+
+  width: 100%;
+}
 
-  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+.icon{
 
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 9999px;
 
   transition-duration: 200ms;
 
-  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));
-  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));
+  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));
+  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));
+  transition-property: background-color, fill;
 }
 
 .option-container {
@@ -426,7 +192,7 @@
 
   :host {
 
-    --mds-input-select-background: rgb(var(--brand-maggioli-07));
+    --mds-input-select-background: rgb(var(--variant-primary-07));
   }
 }
 
@@ -434,18 +200,18 @@
 
 :host {
 
-  --mds-input-select-icon-color: var(--brand-maggioli-03);
+  --mds-input-select-icon-color: var(--variant-primary-03);
   --mds-input-select-variant-color: 0 0 0;
-  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));
-  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));
-  --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));
-  --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));
+  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));
+  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));
+  --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));
+  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));
 }
 
 :host( :hover ),
 :host( :focus-within ) {
 
-  --mds-input-select-variant-color: var(--brand-maggioli-04);
+  --mds-input-select-variant-color: var(--variant-primary-04);
 }
 
 :host( [variant="info"] ) {
@@ -550,7 +316,7 @@
 
     --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);
     --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);
-    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));
+    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));
     --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));
     --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);
     --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));
@@ -569,7 +335,7 @@
 
       --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);
       --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);
-      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));
+      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));
       --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));
       --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);
       --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));
@@ -582,242 +348,6 @@
   }
 }
 
-.visible{
-
-  visibility: visible;
-}
-
-.static{
-
-  position: static;
-}
-
-.fixed{
-
-  position: fixed;
-}
-
-.absolute{
-
-  position: absolute;
-}
-
-.flex{
-
-  display: flex;
-}
-
-.gap-x-400{
-
-  -moz-column-gap: 1rem;
-
-       column-gap: 1rem;
-}
-
-.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);
-
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 @container style(--magma-pref-contrast: more) {
   :host {
 

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

@@ -81,20 +81,20 @@ export class MdsInputSelect {
      * Emits the change event when the component value changes
      */
     valueChanged() {
-        var _a;
+        var _a, _b, _c;
         this.selected = this.value !== '';
-        this.changeEvent.emit({ value: this.value });
-        this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
+        this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
+        this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
     }
     componentDidLoad() {
         if (this.value) {
             this.selected = true;
-            this.internals.setFormValue(this.value);
+            this.internals.setFormValue(this.value.toString());
         }
     }
     render() {
-        return (h(Host, { key: 'd46653b843b54f01df7bfdd50b01fc6d9eeb051f' }, h("select", { key: 'd15111f4a32cc58a2ae199868dfda722cd04857f', class: clsx('input', this.selected && 'input--selected'), onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select" }, this.placeholder && h("option", { key: 'f9e417ceeaf4894328865140411e4568b4578c47', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: 'd50c4755426ef6bd54a54a80a07cc44390493e3d', class: "icon-container" }, h("i", { key: 'ba3287b543e7f39489eba7066763805e054138d3', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '70c1d89ba1a94e8117d4ed61d457bc6ff71ddacb', class: "option-container" }, h("slot", { key: '7c63d09662ff18ecbc5e3c7222ff63553e5165fa', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'e40bdd6ee45206329e48d1d8ab3410b1a7988c2a', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '09e2b09522c70af6deee9a7d7cb28a586786c4a1', expanded: true, variant: "disabled" }), this.required &&
-            h("mds-input-tip-item", { key: '78d0c80d7a3bdf721ec5c755304dce207512c74b', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (h(Host, { key: '81ab7f5b366ae9e842612a276b8efe1d52d21dd0' }, h("select", { key: '130119ceb7447ee4f8b80b5a6f7b7ac712c9f347', class: clsx('input', this.selected && 'input--selected'), onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select" }, this.placeholder && h("option", { key: 'f56c4a89209571e5f57c0fd9edc5a3fb34e62664', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: '65564368c9fc116b98a0c9159cf3191e03d49193', class: "icon-container" }, h("i", { key: 'd35fb6bb42e9ed84f5d7d5a2b432c7da03164eab', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'd8515da7da334fbd00ff6df9ee81f8d46cfb6c8c', class: "option-container" }, h("slot", { key: '2209933b74c5a1dfab7673eaaaac8e23b8e15a74', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'a794103ca26e4d2312059108448e5d0643edca5d', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '1415ed93d80ad27f2e922ea5c5176f78cf0ffa65', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: '36807554f81acc5c312835587493b5be0c632157', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get is() { return "mds-input-select"; }
     static get encapsulation() { return "shadow"; }
@@ -312,13 +312,13 @@ export class MdsInputSelect {
                     "text": "Emits an InputChangeEventDetail when the value of the input element changes"
                 },
                 "complexType": {
-                    "original": "InputValue",
-                    "resolved": "InputValue",
+                    "original": "MdsInputEventDetail",
+                    "resolved": "MdsInputEventDetail",
                     "references": {
-                        "InputValue": {
+                        "MdsInputEventDetail": {
                             "location": "import",
-                            "path": "@interface/input-value",
-                            "id": "src/interface/input-value.ts::InputValue"
+                            "path": "@type/input",
+                            "id": "src/type/input.ts::MdsInputEventDetail"
                         }
                     }
                 }

package/dist/collection/dictionary/button.js

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