morya-ui 0.1.1 → 0.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAEhB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAA;AAC/C,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAEhB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAA;AAC/C,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/Input/styles.css

@@ -1,193 +1,193 @@
-.m-input:focus {
-    outline: none;
-}
-
-.m-input:hover:not(:disabled):not(:focus) {
-    border-color: var(--m-color-primary-hover);
-}
-
-.m-input:focus-visible {
-    border-color: var(--m-color-primary-hover);
-    box-shadow: var(--m-focus-shadow);
-    outline: none;
-}
-
-.m-input--invalid:focus-visible {
-    border-color: var(--m-color-danger);
-    box-shadow: var(--m-focus-shadow-danger);
-}
-
-.m-input-field {
-    display: grid;
-    gap: var(--m-space-2);
-}
-
-.m-input-field--fluid {
-    width: 100%;
-}
-
-.m-input-field__label {
-    color: var(--m-color-text);
-    font-size: var(--m-font-size-md);
-    font-weight: 600;
-}
-
-.m-input-field__help {
-    color: var(--m-color-text-muted);
-    font-size: var(--m-font-size-xs);
-}
-
-.m-input-field__help--invalid {
-    color: var(--m-color-danger);
-}
-
-.m-input-field__control {
-    position: relative;
-}
-
-.m-input-field__control--prefixed,
-.m-input-field__control--suffixed {
-    align-items: center;
-    display: flex;
-}
-
-.m-input-field__control--prefixed .m-input,
-.m-input-field__control--suffixed .m-input {
-    flex: 1 1 auto;
-    min-width: 0;
-}
-
-.m-input__prefix,
-.m-input__suffix {
-    align-items: center;
-    color: var(--m-color-text-muted);
-    display: inline-flex;
-    flex: 0 0 auto;
-    font-size: var(--m-font-size-md);
-    gap: var(--m-space-1);
-    line-height: 1;
-    pointer-events: none;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-}
-
-.m-input__prefix {
-    left: var(--m-control-padding-x-medium);
-}
-
-.m-input__suffix {
-    right: var(--m-control-padding-x-medium);
-}
-
-.m-input-field__control--clearable .m-input__suffix {
-    right: var(--m-control-affix-gap);
-}
-
-.m-input--has-prefix {
-    padding-left: var(--m-control-affix-gap);
-}
-
-.m-input--has-suffix {
-    padding-right: var(--m-control-affix-gap);
-}
-
-.m-input-field__control--clearable.m-input-field__control--suffixed
-    .m-input--has-suffix {
-    padding-right: calc(
-        var(--m-control-affix-padding) + var(--m-control-affix-gap)
-    );
-}
-
-.m-input__prefix button,
-.m-input__suffix button,
-.m-input__prefix a,
-.m-input__suffix a {
-    pointer-events: auto;
-}
-
-.m-input {
-    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-size: var(--m-control-font-medium);
-    min-height: var(--m-control-height-medium);
-    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);
-}
-
-.m-input--filled {
-    background: color-mix(
-        in srgb,
-        var(--m-color-text-muted) 12%,
-        var(--m-color-surface)
-    );
-    border-color: transparent;
-}
-
-.m-input--fluid {
-    width: 100%;
-}
-
-.m-input--invalid {
-    border-color: var(--m-color-danger);
-}
-
-.m-input--small,
-.m-input--sm {
-    font-size: var(--m-control-font-small);
-    min-height: var(--m-control-height-small);
-    padding: 0 var(--m-control-padding-x-small);
-}
-
-.m-input--normal {
-    font-size: var(--m-control-font-medium);
-    min-height: var(--m-control-height-medium);
-    padding: 0 var(--m-control-padding-x-medium);
-}
-
-.m-input--large,
-.m-input--lg {
-    font-size: var(--m-control-font-large);
-    min-height: var(--m-control-height-large);
-    padding: 0 var(--m-control-padding-x-large);
-}
-
-.m-input-field__control .m-input {
-    width: 100%;
-}
-
-.m-input__clear {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    border-radius: var(--m-radius-sm);
-    color: var(--m-color-text-muted);
-    cursor: pointer;
-    display: flex;
-    font-size: var(--m-font-size-lg);
-    height: var(--m-control-affix-size);
-    justify-content: center;
-    padding: 0;
-    position: absolute;
-    right: var(--m-space-1);
-    top: 50%;
-    transform: translateY(-50%);
-    width: var(--m-control-affix-size);
-    z-index: 1;
-}
-
-.m-input__clear:focus-visible {
-    box-shadow: var(--m-focus-shadow);
-    outline: none;
-}
-
-.m-input__clear:disabled {
-    cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
-}
+.m-input:focus {
+    outline: none;
+}
+
+.m-input:hover:not(:disabled):not(:focus) {
+    border-color: var(--m-color-primary-hover);
+}
+
+.m-input:focus-visible {
+    border-color: var(--m-color-primary-hover);
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-input--invalid:focus-visible {
+    border-color: var(--m-color-danger);
+    box-shadow: var(--m-focus-shadow-danger);
+}
+
+.m-input-field {
+    display: grid;
+    gap: var(--m-space-2);
+}
+
+.m-input-field--fluid {
+    width: 100%;
+}
+
+.m-input-field__label {
+    color: var(--m-color-text);
+    font-size: var(--m-font-size-md);
+    font-weight: 600;
+}
+
+.m-input-field__help {
+    color: var(--m-color-text-muted);
+    font-size: var(--m-font-size-xs);
+}
+
+.m-input-field__help--invalid {
+    color: var(--m-color-danger);
+}
+
+.m-input-field__control {
+    position: relative;
+}
+
+.m-input-field__control--prefixed,
+.m-input-field__control--suffixed {
+    align-items: center;
+    display: flex;
+}
+
+.m-input-field__control--prefixed .m-input,
+.m-input-field__control--suffixed .m-input {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.m-input__prefix,
+.m-input__suffix {
+    align-items: center;
+    color: var(--m-color-text-muted);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: var(--m-font-size-md);
+    gap: var(--m-space-1);
+    line-height: 1;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+}
+
+.m-input__prefix {
+    left: var(--m-control-padding-x-medium);
+}
+
+.m-input__suffix {
+    right: var(--m-control-padding-x-medium);
+}
+
+.m-input-field__control--clearable .m-input__suffix {
+    right: var(--m-control-affix-gap);
+}
+
+.m-input--has-prefix {
+    padding-left: var(--m-control-affix-gap);
+}
+
+.m-input--has-suffix {
+    padding-right: var(--m-control-affix-gap);
+}
+
+.m-input-field__control--clearable.m-input-field__control--suffixed
+    .m-input--has-suffix {
+    padding-right: calc(
+        var(--m-control-affix-padding) + var(--m-control-affix-gap)
+    );
+}
+
+.m-input__prefix button,
+.m-input__suffix button,
+.m-input__prefix a,
+.m-input__suffix a {
+    pointer-events: auto;
+}
+
+.m-input {
+    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-size: var(--m-control-font-medium);
+    min-height: var(--m-control-height-medium);
+    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);
+}
+
+.m-input--filled {
+    background: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 12%,
+        var(--m-color-surface)
+    );
+    border-color: transparent;
+}
+
+.m-input--fluid {
+    width: 100%;
+}
+
+.m-input--invalid {
+    border-color: var(--m-color-danger);
+}
+
+.m-input--small,
+.m-input--sm {
+    font-size: var(--m-control-font-small);
+    min-height: var(--m-control-height-small);
+    padding: 0 var(--m-control-padding-x-small);
+}
+
+.m-input--normal {
+    font-size: var(--m-control-font-medium);
+    min-height: var(--m-control-height-medium);
+    padding: 0 var(--m-control-padding-x-medium);
+}
+
+.m-input--large,
+.m-input--lg {
+    font-size: var(--m-control-font-large);
+    min-height: var(--m-control-height-large);
+    padding: 0 var(--m-control-padding-x-large);
+}
+
+.m-input-field__control .m-input {
+    width: 100%;
+}
+
+.m-input__clear {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-text-muted);
+    cursor: pointer;
+    display: flex;
+    font-size: var(--m-font-size-lg);
+    height: var(--m-control-affix-size);
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    right: var(--m-space-1);
+    top: 50%;
+    transform: translateY(-50%);
+    width: var(--m-control-affix-size);
+    z-index: 1;
+}
+
+.m-input__clear:focus-visible {
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-input__clear:disabled {
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
+}

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

@@ -1,5 +1,8 @@
+import { MNativeInputProps } from '../../shared/nativeControlProps';
+import { FieldPassThrough, PassThroughPart } from '../../shared/passThrough';
 import { MInputVariant, MSizeInput } from '../../shared/types';
-export interface InputProps {
+export type InputPassThrough = FieldPassThrough & Partial<Record<'prefix' | 'suffix' | 'help' | 'count', PassThroughPart>>;
+export interface InputProps extends MNativeInputProps {
     modelValue?: string;
     label?: string;
     helpText?: string;
@@ -22,6 +25,8 @@ export interface InputProps {
     maxlength?: number;
     /** Show character count (with maxlength when set). */
     showCount?: boolean;
+    /** Pass-through attrs/classes/styles per DOM part. */
+    pt?: InputPassThrough;
 }
 export interface InputEmits {
     (event: 'update:modelValue', value: string): void;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEnE,MAAM,WAAW,UAAU;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAA;IAC/D,iEAAiE;IACjE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wCAAwC;IACxC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,wBAAwB;IACxB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACjD,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IACtB,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;IACzC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;IACxC,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACvC;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEnE,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAC7C,OAAO,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAE,eAAe,CAAC,CAAC,CAAA;AAE1E,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACnD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAA;IAC/D,iEAAiE;IACjE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wCAAwC;IACxC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,wBAAwB;IACxB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sDAAsD;IACtD,EAAE,CAAC,EAAE,gBAAgB,CAAA;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACjD,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IACtB,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;IACzC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;IACxC,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACvC;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"InputColor.vue.d.ts","sourceRoot":"","sources":["../../../src/components/InputColor/InputColor.vue"],"names":[],"mappings":";AAmGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAyJ9C,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"}
+{"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/styles.css

@@ -1,104 +1,104 @@
-/* —— Form: InputColor —— */
-.m-inputcolor-field {
-    display: grid;
-    gap: var(--m-space-2);
-}
-
-.m-inputcolor-field__label {
-    color: var(--m-color-text);
-    font-size: var(--m-font-size-md);
-    font-weight: 600;
-}
-
-.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 {
-    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;
-    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: inherit;
-    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);
-}
-
-.m-inputcolor__text:focus-visible,
-.m-inputcolor__swatch:focus-visible {
-    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;
-    width: var(--m-inputcolor-preset-size);
-}
-
-.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);
-}
-
-.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);
-}
+/* —— Form: InputColor —— */
+.m-inputcolor-field {
+    display: grid;
+    gap: var(--m-space-2);
+}
+
+.m-inputcolor-field__label {
+    color: var(--m-color-text);
+    font-size: var(--m-font-size-md);
+    font-weight: 600;
+}
+
+.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 {
+    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;
+    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: inherit;
+    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);
+}
+
+.m-inputcolor__text:focus-visible,
+.m-inputcolor__swatch:focus-visible {
+    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;
+    width: var(--m-inputcolor-preset-size);
+}
+
+.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);
+}
+
+.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);
+}

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

@@ -1,5 +1,7 @@
+import { MNativeInputProps } from '../../shared/nativeControlProps';
+import { FieldPassThrough } from '../../shared/passThrough';
 import { MSizeInput } from '../../shared/types';
-export interface InputColorProps {
+export interface InputColorProps extends MNativeInputProps {
     modelValue?: string;
     disabled?: boolean;
     id?: string;
@@ -8,6 +10,8 @@ export interface InputColorProps {
     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;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/InputColor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,WAAW,eAAe;IAC9B,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;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAClD"}
+{"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/components/InputGroup/InputGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroup.vue"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAyB9C,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;AAG/C,QAAA,MAAM,UAAU,0SAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"InputGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroup.vue"],"names":[],"mappings":";AAoBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAoC9C,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,0SAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1,4 +1,7 @@
+import { RootPassThrough } from '../../shared/passThrough';
 export interface InputGroupProps {
+    /** Pass-through attrs/classes/styles for the root element. */
+    pt?: RootPassThrough;
 }
 export interface InputGroupAddonProps {
 }