morya-ui 0.4.5 → 0.5.0

package/dist/typography/style.css

@@ -405,7 +405,7 @@
 
 :root {
     /* Shared minimum width for menu-like panels (select/orderlist/picklist) */
-    --m-menu-min-width: 12rem;
+    --m-overlay-menu-min-width: 12rem;
 }
 
 .m-button,
@@ -463,7 +463,7 @@
 .m-progress-spinner,
 .m-cascadeselect,
 .m-treeselect,
-.m-inputcolor,
+.m-colorpicker,
 .m-inputtags,
 .m-label,
 .m-speeddial,
@@ -489,8 +489,7 @@
 .m-password__input:disabled,
 .m-inputnumber__input:disabled,
 .m-inputotp__input:disabled,
-.m-inputcolor__text:disabled,
-.m-inputcolor__swatch:disabled,
+.m-colorpicker__trigger:disabled,
 .m-inputtags--disabled {
     background-color: var(--m-color-bg-disabled);
     color: var(--m-color-text-disabled);
@@ -513,8 +512,7 @@
 .m-textarea::placeholder,
 .m-password__input::placeholder,
 .m-inputnumber__input::placeholder,
-.m-inputtags__input::placeholder,
-.m-inputcolor__text::placeholder {
+.m-inputtags__input::placeholder {
     color: var(--m-color-text-muted);
     opacity: 1;
 }
@@ -858,9 +856,7 @@
     font-family: var(--m-font-sans);
     gap: var(--m-space-2);
     max-width: 100%;
-    min-width: var(--m-menu-min-width);
     position: relative;
-    width: fit-content;
 }
 
 .m-textarea-field--fluid,
@@ -1051,7 +1047,7 @@
     flex: 1;
     max-height: 16rem;
     min-height: 12rem;
-    min-width: var(--m-menu-min-width);
+    min-width: var(--m-overlay-menu-min-width);
 }
 
 .m-orderlist__list,
@@ -1119,7 +1115,6 @@
     .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
 .m-treeselect:not(.m-treeselect--open)
     .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
-.m-inputcolor__text:hover:not(:disabled):not(:focus),
 .m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
 .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
 .m-inplace__display:hover:not(:focus-visible) {
@@ -1134,8 +1129,6 @@
 .m-treeselect--open .m-treeselect__trigger,
 .m-treeselect__trigger:focus,
 .m-treeselect__trigger:focus-visible,
-.m-inputcolor__text:focus,
-.m-inputcolor__text:focus-visible,
 .m-inputtags:focus-within,
 .m-togglebutton:focus-visible,
 .m-selectbutton__button:focus-visible,
@@ -1150,9 +1143,7 @@
 
 .m-inputotp--invalid .m-inputotp__input:focus,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
-.m-inputtags--invalid:focus-within,
-.m-inputcolor--invalid .m-inputcolor__text:focus,
-.m-inputcolor--invalid .m-inputcolor__text:focus-visible {
+.m-inputtags--invalid:focus-within {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
 }

package/dist/virtual-scroller/style.css

@@ -405,7 +405,7 @@
 
 :root {
     /* Shared minimum width for menu-like panels (select/orderlist/picklist) */
-    --m-menu-min-width: 12rem;
+    --m-overlay-menu-min-width: 12rem;
 }
 
 .m-button,
@@ -463,7 +463,7 @@
 .m-progress-spinner,
 .m-cascadeselect,
 .m-treeselect,
-.m-inputcolor,
+.m-colorpicker,
 .m-inputtags,
 .m-label,
 .m-speeddial,
@@ -489,8 +489,7 @@
 .m-password__input:disabled,
 .m-inputnumber__input:disabled,
 .m-inputotp__input:disabled,
-.m-inputcolor__text:disabled,
-.m-inputcolor__swatch:disabled,
+.m-colorpicker__trigger:disabled,
 .m-inputtags--disabled {
     background-color: var(--m-color-bg-disabled);
     color: var(--m-color-text-disabled);
@@ -513,8 +512,7 @@
 .m-textarea::placeholder,
 .m-password__input::placeholder,
 .m-inputnumber__input::placeholder,
-.m-inputtags__input::placeholder,
-.m-inputcolor__text::placeholder {
+.m-inputtags__input::placeholder {
     color: var(--m-color-text-muted);
     opacity: 1;
 }
@@ -858,9 +856,7 @@
     font-family: var(--m-font-sans);
     gap: var(--m-space-2);
     max-width: 100%;
-    min-width: var(--m-menu-min-width);
     position: relative;
-    width: fit-content;
 }
 
 .m-textarea-field--fluid,
@@ -1051,7 +1047,7 @@
     flex: 1;
     max-height: 16rem;
     min-height: 12rem;
-    min-width: var(--m-menu-min-width);
+    min-width: var(--m-overlay-menu-min-width);
 }
 
 .m-orderlist__list,
@@ -1119,7 +1115,6 @@
     .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
 .m-treeselect:not(.m-treeselect--open)
     .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
-.m-inputcolor__text:hover:not(:disabled):not(:focus),
 .m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
 .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
 .m-inplace__display:hover:not(:focus-visible) {
@@ -1134,8 +1129,6 @@
 .m-treeselect--open .m-treeselect__trigger,
 .m-treeselect__trigger:focus,
 .m-treeselect__trigger:focus-visible,
-.m-inputcolor__text:focus,
-.m-inputcolor__text:focus-visible,
 .m-inputtags:focus-within,
 .m-togglebutton:focus-visible,
 .m-selectbutton__button:focus-visible,
@@ -1150,9 +1143,7 @@
 
 .m-inputotp--invalid .m-inputotp__input:focus,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
-.m-inputtags--invalid:focus-within,
-.m-inputcolor--invalid .m-inputcolor__text:focus,
-.m-inputcolor--invalid .m-inputcolor__text:focus-visible {
+.m-inputtags--invalid:focus-within {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
 }

package/dist/watermark/style.css

@@ -405,7 +405,7 @@
 
 :root {
     /* Shared minimum width for menu-like panels (select/orderlist/picklist) */
-    --m-menu-min-width: 12rem;
+    --m-overlay-menu-min-width: 12rem;
 }
 
 .m-button,
@@ -463,7 +463,7 @@
 .m-progress-spinner,
 .m-cascadeselect,
 .m-treeselect,
-.m-inputcolor,
+.m-colorpicker,
 .m-inputtags,
 .m-label,
 .m-speeddial,
@@ -489,8 +489,7 @@
 .m-password__input:disabled,
 .m-inputnumber__input:disabled,
 .m-inputotp__input:disabled,
-.m-inputcolor__text:disabled,
-.m-inputcolor__swatch:disabled,
+.m-colorpicker__trigger:disabled,
 .m-inputtags--disabled {
     background-color: var(--m-color-bg-disabled);
     color: var(--m-color-text-disabled);
@@ -513,8 +512,7 @@
 .m-textarea::placeholder,
 .m-password__input::placeholder,
 .m-inputnumber__input::placeholder,
-.m-inputtags__input::placeholder,
-.m-inputcolor__text::placeholder {
+.m-inputtags__input::placeholder {
     color: var(--m-color-text-muted);
     opacity: 1;
 }
@@ -858,9 +856,7 @@
     font-family: var(--m-font-sans);
     gap: var(--m-space-2);
     max-width: 100%;
-    min-width: var(--m-menu-min-width);
     position: relative;
-    width: fit-content;
 }
 
 .m-textarea-field--fluid,
@@ -1051,7 +1047,7 @@
     flex: 1;
     max-height: 16rem;
     min-height: 12rem;
-    min-width: var(--m-menu-min-width);
+    min-width: var(--m-overlay-menu-min-width);
 }
 
 .m-orderlist__list,
@@ -1119,7 +1115,6 @@
     .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
 .m-treeselect:not(.m-treeselect--open)
     .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
-.m-inputcolor__text:hover:not(:disabled):not(:focus),
 .m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
 .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
 .m-inplace__display:hover:not(:focus-visible) {
@@ -1134,8 +1129,6 @@
 .m-treeselect--open .m-treeselect__trigger,
 .m-treeselect__trigger:focus,
 .m-treeselect__trigger:focus-visible,
-.m-inputcolor__text:focus,
-.m-inputcolor__text:focus-visible,
 .m-inputtags:focus-within,
 .m-togglebutton:focus-visible,
 .m-selectbutton__button:focus-visible,
@@ -1150,9 +1143,7 @@
 
 .m-inputotp--invalid .m-inputotp__input:focus,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
-.m-inputtags--invalid:focus-within,
-.m-inputcolor--invalid .m-inputcolor__text:focus,
-.m-inputcolor--invalid .m-inputcolor__text:focus-visible {
+.m-inputtags--invalid:focus-within {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "morya-ui",
   "type": "module",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "description": "Open-source Vue 3 component library with design tokens, themes, and interactive docs.",
   "license": "MIT",
   "homepage": "https://morya-space.github.io/morya-ui/",
@@ -34,6 +34,7 @@
     "**/cascade-select/index.js",
     "**/checkbox/index.js",
     "**/chip/index.js",
+    "**/color-picker/index.js",
     "**/command-menu/index.js",
     "**/config-provider/index.js",
     "**/confirm-dialog/index.js",
@@ -61,7 +62,6 @@
     "**/image/index.js",
     "**/inplace/index.js",
     "**/input/index.js",
-    "**/input-color/index.js",
     "**/input-group/index.js",
     "**/input-number/index.js",
     "**/input-otp/index.js",
@@ -232,6 +232,12 @@
     },
     "./chip/style": "./dist/chip/style.js",
     "./chip/style.css": "./dist/chip/style.css",
+    "./color-picker": {
+      "types": "./dist/components/ColorPicker/index.d.ts",
+      "import": "./dist/color-picker/index.js"
+    },
+    "./color-picker/style": "./dist/color-picker/style.js",
+    "./color-picker/style.css": "./dist/color-picker/style.css",
     "./command-menu": {
       "types": "./dist/components/CommandMenu/index.d.ts",
       "import": "./dist/command-menu/index.js"
@@ -394,12 +400,6 @@
     },
     "./input/style": "./dist/input/style.js",
     "./input/style.css": "./dist/input/style.css",
-    "./input-color": {
-      "types": "./dist/components/InputColor/index.d.ts",
-      "import": "./dist/input-color/index.js"
-    },
-    "./input-color/style": "./dist/input-color/style.js",
-    "./input-color/style.css": "./dist/input-color/style.css",
     "./input-group": {
       "types": "./dist/components/InputGroup/index.d.ts",
       "import": "./dist/input-group/index.js"

package/dist/components/InputColor/InputColor.vue.d.ts

@@ -1,24 +0,0 @@
-import { InputColorProps } from './types';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    trigger?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: DefineComponent<InputColorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-    "update:modelValue": (value: string) => any;
-}, string, PublicProps, Readonly<InputColorProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {
-    modelValue: string;
-    disabled: boolean;
-    invalid: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=InputColor.vue.d.ts.map

package/dist/components/InputColor/InputColor.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputColor.vue.d.ts","sourceRoot":"","sources":["../../../src/components/InputColor/InputColor.vue"],"names":[],"mappings":";AA4GA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAqK9C,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InputColor/index.d.ts

@@ -1,3 +0,0 @@
-export { default as MInputColor } from './InputColor.vue';
-export type { InputColorEmits, InputColorProps } from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/InputColor/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InputColor/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAChB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACzD,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/InputColor/styles.css

@@ -1,139 +0,0 @@
-/* --- Form: InputColor --- */
-.m-inputcolor-field {
-    display: grid;
-    gap: var(--m-space-2);
-}
-
-.m-inputcolor-field__label {
-    color: var(--m-color-text);
-    font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-md);
-    font-weight: 500;
-}
-
-.m-inputcolor {
-    --m-inputcolor-text-min-width: 7rem;
-    --m-inputcolor-preset-size: 1.25rem;
-    display: inline-flex;
-    flex-direction: column;
-    gap: var(--m-space-2);
-}
-
-.m-inputcolor--disabled {
-    cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
-}
-
-.m-inputcolor__swatch {
-    background: transparent;
-    border: var(--m-border-width) solid var(--m-color-border);
-    border-radius: var(--m-radius-control);
-    cursor: pointer;
-    height: var(--m-control-height-medium);
-    padding: 0;
-    transition:
-        border-color var(--m-motion-fast) var(--m-motion-ease),
-        box-shadow var(--m-motion-fast) var(--m-motion-ease),
-        opacity var(--m-motion-fast) var(--m-motion-ease);
-    width: var(--m-control-height-medium);
-}
-
-.m-inputcolor__text {
-    background: var(--m-color-surface);
-    border: var(--m-border-width) solid var(--m-color-border);
-    border-radius: var(--m-radius-control);
-    color: var(--m-color-text);
-    font-family: var(--m-font-sans);
-    font-size: var(--m-control-font-medium);
-    min-height: var(--m-control-height-medium);
-    min-width: var(--m-inputcolor-text-min-width);
-    padding: 0 var(--m-control-padding-x-medium);
-    transition:
-        border-color var(--m-motion-fast) var(--m-motion-ease),
-        box-shadow var(--m-motion-fast) var(--m-motion-ease),
-        background-color var(--m-motion-fast) var(--m-motion-ease),
-        opacity var(--m-motion-fast) var(--m-motion-ease);
-}
-
-.m-inputcolor__text:hover:not(:disabled):not(:focus),
-.m-inputcolor__swatch:hover:not(:disabled):not(:focus) {
-    border-color: var(--m-color-primary-hover);
-}
-
-.m-inputcolor__text:focus,
-.m-inputcolor__text:focus-visible,
-.m-inputcolor__swatch:focus,
-.m-inputcolor__swatch:focus-visible {
-    border-color: var(--m-color-primary);
-    box-shadow: var(--m-focus-shadow);
-    outline: none;
-}
-
-.m-inputcolor__row {
-    align-items: center;
-    display: flex;
-    gap: var(--m-space-2);
-}
-
-.m-inputcolor__swatches {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--m-space-1);
-    margin-top: var(--m-space-2);
-}
-
-.m-inputcolor__preset {
-    border: var(--m-border-width) solid var(--m-color-border);
-    border-radius: var(--m-radius-sm);
-    cursor: pointer;
-    height: var(--m-inputcolor-preset-size);
-    padding: 0;
-    transition:
-        border-color var(--m-motion-fast) var(--m-motion-ease),
-        box-shadow var(--m-motion-fast) var(--m-motion-ease);
-    width: var(--m-inputcolor-preset-size);
-}
-
-.m-inputcolor__preset:hover:not(:disabled) {
-    border-color: var(--m-color-primary-hover);
-}
-
-.m-inputcolor__preset:focus-visible {
-    box-shadow: var(--m-focus-shadow);
-    outline: none;
-}
-
-.m-inputcolor--small .m-inputcolor__swatch,
-.m-inputcolor--small .m-inputcolor__text {
-    min-height: var(--m-control-height-small);
-    height: var(--m-control-height-small);
-    font-size: var(--m-control-font-small);
-}
-
-.m-inputcolor--small .m-inputcolor__swatch {
-    width: var(--m-control-height-small);
-}
-
-.m-inputcolor--large .m-inputcolor__swatch,
-.m-inputcolor--large .m-inputcolor__text {
-    min-height: var(--m-control-height-large);
-    height: var(--m-control-height-large);
-    font-size: var(--m-control-font-large);
-}
-
-.m-inputcolor--large .m-inputcolor__swatch {
-    width: var(--m-control-height-large);
-}
-
-.m-inputcolor--invalid .m-inputcolor__text,
-.m-inputcolor--invalid .m-inputcolor__swatch {
-    border-color: var(--m-color-danger);
-}
-
-.m-inputcolor--invalid .m-inputcolor__text:focus,
-.m-inputcolor--invalid .m-inputcolor__text:focus-visible,
-.m-inputcolor--invalid .m-inputcolor__swatch:focus,
-.m-inputcolor--invalid .m-inputcolor__swatch:focus-visible {
-    border-color: var(--m-color-danger);
-    box-shadow: var(--m-focus-shadow-danger);
-}

package/dist/components/InputColor/types.d.ts

@@ -1,19 +0,0 @@
-import { MNativeInputProps } from '../../shared/nativeControlProps';
-import { FieldPassThrough } from '../../shared/passThrough';
-import { MSizeInput } from '../../shared/types';
-export interface InputColorProps extends MNativeInputProps {
-    modelValue?: string;
-    disabled?: boolean;
-    id?: string;
-    label?: string;
-    invalid?: boolean;
-    size?: MSizeInput;
-    /** Preset hex colors shown under the input. */
-    swatches?: string[];
-    /** Pass-through attrs/classes/styles per DOM part. */
-    pt?: FieldPassThrough;
-}
-export interface InputColorEmits {
-    (event: 'update:modelValue', value: string): void;
-}
-//# sourceMappingURL=types.d.ts.map

package/dist/components/InputColor/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/InputColor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,sDAAsD;IACtD,EAAE,CAAC,EAAE,gBAAgB,CAAA;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAClD"}

package/dist/input-color/index.js

@@ -1,118 +0,0 @@
-import { i as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../useFieldFeedback-C5qIqYMK.js";
-import { t as n } from "../useMId-BXFYayPP.js";
-import { o as r } from "../config-Cd20zAyW.js";
-import { n as i } from "../locale-BcxMPufl.js";
-import "./style.js";
-import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useAttrs as y } from "vue";
-//#region src/components/InputColor/InputColor.vue?vue&type=script&setup=true&lang.ts
-var b = ["for"], x = { class: "m-inputcolor__row" }, S = [
-	"value",
-	"disabled",
-	"aria-label"
-], C = [
-	"id",
-	"value",
-	"disabled",
-	"placeholder",
-	"name",
-	"autocomplete",
-	"autofocus",
-	"aria-invalid",
-	"aria-label"
-], w = {
-	key: 0,
-	class: "m-inputcolor__swatches"
-}, T = [
-	"disabled",
-	"aria-label",
-	"onClick"
-], E = /* @__PURE__ */ u({
-	inheritAttrs: !1,
-	__name: "InputColor",
-	props: {
-		modelValue: { default: "#000000" },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		id: {},
-		label: {},
-		invalid: {
-			type: Boolean,
-			default: !1
-		},
-		size: {},
-		swatches: {},
-		pt: {},
-		placeholder: {},
-		name: {},
-		autocomplete: {},
-		autofocus: { type: Boolean }
-	},
-	emits: ["update:modelValue"],
-	setup(u, { emit: E }) {
-		let D = u, O = E, k = y(), { rootAttrs: A, controlAttrs: j } = e(k, () => D.pt), M = i(), N = r("InputColor", () => D.size), P = n("m-inputcolor"), F = o(() => D.id ?? P), { isInvalid: I } = t(D), L = o(() => {
-			let e = D.modelValue?.trim() || "#000000";
-			return /^#[0-9a-f]{6}$/i.test(e) ? e : "#000000";
-		}), R = o(() => [
-			"m-inputcolor",
-			`m-inputcolor--${N.value}`,
-			{
-				"m-inputcolor--disabled": D.disabled,
-				"m-inputcolor--invalid": I.value
-			}
-		]);
-		function z(e) {
-			let t = e.target;
-			O("update:modelValue", t.value);
-		}
-		function B(e) {
-			let t = e.target;
-			O("update:modelValue", t.value);
-		}
-		function V(e) {
-			D.disabled || O("update:modelValue", e);
-		}
-		return (e, t) => (m(), c("div", d(v(A), { class: "m-inputcolor-field" }), [u.label ? (m(), c("label", {
-			key: 0,
-			class: "m-inputcolor-field__label",
-			for: F.value
-		}, _(u.label), 9, b)) : s("", !0), l("div", { class: f(R.value) }, [g(e.$slots, "trigger", {}, () => [l("div", x, [
-			l("input", {
-				class: "m-inputcolor__swatch",
-				type: "color",
-				value: L.value,
-				disabled: u.disabled,
-				"aria-label": v(M).selectColor,
-				onInput: z
-			}, null, 40, S),
-			l("input", d(v(j), {
-				id: F.value,
-				class: "m-inputcolor__text",
-				type: "text",
-				value: u.modelValue,
-				disabled: u.disabled,
-				placeholder: u.placeholder ?? "#000000",
-				name: u.name,
-				autocomplete: u.autocomplete,
-				autofocus: u.autofocus || void 0,
-				spellcheck: "false",
-				"aria-invalid": v(I) || void 0,
-				"aria-label": u.label ?? v(M).colorHexValue,
-				onInput: B
-			}), null, 16, C),
-			u.swatches?.length ? (m(), c("div", w, [(m(!0), c(a, null, h(u.swatches, (e) => (m(), c("button", {
-				key: e,
-				type: "button",
-				class: "m-inputcolor__preset",
-				style: p({ background: e }),
-				disabled: u.disabled,
-				"aria-label": e,
-				onClick: (t) => V(e)
-			}, null, 12, T))), 128))])) : s("", !0)
-		])])], 2)], 16));
-	}
-});
-//#endregion
-export { E as MInputColor };

package/dist/input-color/style.js

@@ -1,3 +0,0 @@
-import '../theme/styles.css'
-import '../styles/base.css'
-import '../components/InputColor/styles.css'