morya-ui 0.2.8 → 0.3.0

package/dist/components/Icon/icons-types.d.ts

@@ -0,0 +1,36 @@
+export type IconPrimitive = {
+    tag: 'path';
+    d: string;
+} | {
+    tag: 'circle';
+    cx: number;
+    cy: number;
+    r: number;
+    fill?: 'currentColor' | 'none';
+} | {
+    tag: 'line';
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+} | {
+    tag: 'polyline';
+    points: string;
+} | {
+    tag: 'rect';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rx?: number;
+};
+export interface IconDefinition {
+    primitives: readonly IconPrimitive[];
+    /** Optional CSS modifier on the host (e.g. spin for loader). */
+    spin?: boolean;
+    /** SVG viewBox. Defaults to `0 0 16 16` for legacy system icons. */
+    viewBox?: string;
+    /** Stroke width matching the viewBox scale. Defaults to `1.8`. */
+    strokeWidth?: number;
+}
+//# sourceMappingURL=icons-types.d.ts.map

package/dist/components/Icon/icons-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons-types.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/icons-types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GACrB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAC1B;IAAE,GAAG,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;CAAE,GACpF;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC/D;IAAE,GAAG,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAErF,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,SAAS,aAAa,EAAE,CAAA;IACpC,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB"}

package/dist/components/Icon/icons.d.ts

@@ -1,36 +1,79 @@
-/** Built-in system icons: 16×16, stroke currentColor. App icons → Lucide etc. via slot. */
-export type IconPrimitive = {
-    tag: 'path';
-    d: string;
-} | {
-    tag: 'circle';
-    cx: number;
-    cy: number;
-    r: number;
-    fill?: 'currentColor' | 'none';
-} | {
-    tag: 'line';
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-} | {
-    tag: 'polyline';
-    points: string;
-} | {
-    tag: 'rect';
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    rx?: number;
-};
-export interface IconDefinition {
-    primitives: readonly IconPrimitive[];
-    /** Optional CSS modifier on the host (e.g. spin for loader). */
-    spin?: boolean;
-}
+import { IconDefinition } from './icons-types';
+export type { IconDefinition, IconPrimitive } from './icons-types';
 export declare const iconRegistry: {
+    readonly 'layout-dashboard': IconDefinition;
+    readonly 'layout-grid': IconDefinition;
+    readonly users: IconDefinition;
+    readonly 'user-plus': IconDefinition;
+    readonly folder: IconDefinition;
+    readonly 'folder-open': IconDefinition;
+    readonly file: IconDefinition;
+    readonly 'file-text': IconDefinition;
+    readonly paperclip: IconDefinition;
+    readonly clipboard: IconDefinition;
+    readonly activity: IconDefinition;
+    readonly box: IconDefinition;
+    readonly package: IconDefinition;
+    readonly stack: IconDefinition;
+    readonly cloud: IconDefinition;
+    readonly server: IconDefinition;
+    readonly components: IconDefinition;
+    readonly palette: IconDefinition;
+    readonly bell: IconDefinition;
+    readonly logout: IconDefinition;
+    readonly login: IconDefinition;
+    readonly photo: IconDefinition;
+    readonly phone: IconDefinition;
+    readonly 'map-pin': IconDefinition;
+    readonly world: IconDefinition;
+    readonly 'shopping-cart': IconDefinition;
+    readonly 'credit-card': IconDefinition;
+    readonly message: IconDefinition;
+    readonly send: IconDefinition;
+    readonly share: IconDefinition;
+    readonly 'device-floppy': IconDefinition;
+    readonly printer: IconDefinition;
+    readonly 'zoom-in': IconDefinition;
+    readonly 'zoom-out': IconDefinition;
+    readonly ban: IconDefinition;
+    readonly 'help-circle': IconDefinition;
+    readonly 'info-circle': IconDefinition;
+    readonly sun: IconDefinition;
+    readonly moon: IconDefinition;
+    readonly code: IconDefinition;
+    readonly terminal: IconDefinition;
+    readonly building: IconDefinition;
+    readonly briefcase: IconDefinition;
+    readonly list: IconDefinition;
+    readonly table: IconDefinition;
+    readonly 'chart-line': IconDefinition;
+    readonly 'chart-pie': IconDefinition;
+    readonly 'player-play': IconDefinition;
+    readonly 'player-pause': IconDefinition;
+    readonly 'device-desktop': IconDefinition;
+    readonly 'device-mobile': IconDefinition;
+    readonly 'adjustments-horizontal': IconDefinition;
+    readonly rocket: IconDefinition;
+    readonly sparkles: IconDefinition;
+    readonly history: IconDefinition;
+    readonly archive: IconDefinition;
+    readonly key: IconDefinition;
+    readonly wifi: IconDefinition;
+    readonly video: IconDefinition;
+    readonly microphone: IconDefinition;
+    readonly scissors: IconDefinition;
+    readonly 'arrow-back-up': IconDefinition;
+    readonly 'arrow-forward-up': IconDefinition;
+    readonly save: IconDefinition;
+    readonly image: IconDefinition;
+    readonly cut: IconDefinition;
+    readonly play: IconDefinition;
+    readonly pause: IconDefinition;
+    readonly undo: IconDefinition;
+    readonly redo: IconDefinition;
+    readonly layers: IconDefinition;
+    readonly sliders: IconDefinition;
+    readonly grid: IconDefinition;
     readonly check: {
         readonly primitives: readonly [{
             readonly tag: "path";

package/dist/components/Icon/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/icons.ts"],"names":[],"mappings":"AAAA,2FAA2F;AAE3F,MAAM,MAAM,aAAa,GACrB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAC1B;IAAE,GAAG,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;CAAE,GACpF;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC/D;IAAE,GAAG,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAErF,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,SAAS,aAAa,EAAE,CAAA;IACpC,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgR0B,CAAA;AAEnD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,YAAY,CAAA;AAEhD,eAAO,MAAM,SAAS,EAAgC,QAAQ,EAAE,CAAA;AAEhE,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,QAAQ,CAE3D;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,QAAQ,GAAG,cAAc,CAEhE"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/icons.ts"],"names":[],"mappings":"AAAA,wGAAwG;AAGxG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAEnD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAElE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiR0B,CAAA;AAEnD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,YAAY,CAAA;AAEhD,eAAO,MAAM,SAAS,EAAgC,QAAQ,EAAE,CAAA;AAEhE,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,QAAQ,CAE3D;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,QAAQ,GAAG,cAAc,CAEhE"}

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

@@ -1,5 +1,7 @@
 export { default as MIcon } from './Icon.vue';
 export { getIconDefinition, iconNames, iconRegistry, isIconName, } from './icons';
+export { getIconCategory, getIconCategoryGroups, iconCategoryMeta, } from './icon-categories';
+export type { IconCategoryGroup, IconCategoryId, IconCategoryMeta, } from './icon-categories';
 export type { IconDefinition, IconName, IconPrimitive } from './icons';
 export type { IconProps, IconSize } from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAEhB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAA;AAC7C,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,UAAU,GACX,MAAM,SAAS,CAAA;AAChB,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACtE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAChB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAA;AAC7C,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,UAAU,GACX,MAAM,SAAS,CAAA;AAChB,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EACV,iBAAiB,EACjB,cAAc,EACd,gBAAgB,GACjB,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACtE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/Icon/styles.css

@@ -43,7 +43,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .m-icon--spin svg {
+    html:not([data-m-ignore-reduced-motion]) .m-icon--spin svg {
         animation: none;
     }
 }

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

@@ -1,10 +1,12 @@
 import { IconFieldProps } from './types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_11: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_1) => any;
 } & {
     default?: (props: typeof __VLS_3) => any;
+} & {
+    icon?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: DefineComponent<IconFieldProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<IconFieldProps> & Readonly<{}>, {
     iconPosition: "left" | "right";

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

@@ -1 +1 @@
-{"version":3,"file":"IconField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/IconField/IconField.vue"],"names":[],"mappings":";AA8BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAuD7C,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;;6EAGd,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":"IconField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/IconField/IconField.vue"],"names":[],"mappings":";AA8EA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAyH7C,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,QAAQ,IAAY,CAAE;AAChE,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAO7C,QAAA,MAAM,UAAU;;6EAGd,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/IconField/styles.css

@@ -1,75 +1,350 @@
 /* —— Form: IconField —— */
 .m-icon-field {
-    align-items: center;
-    display: inline-flex;
+    display: block;
     max-width: 100%;
     position: relative;
     width: 100%;
 }
 
+.m-icon-field__body {
+    min-width: 0;
+    width: 100%;
+}
+
 .m-icon-field__icon {
     align-items: center;
     color: var(--m-color-text-muted);
     display: inline-flex;
+    flex: 0 0 auto;
+    line-height: 1;
     pointer-events: none;
+    z-index: 1;
+}
+
+/* Fallback when slot is a bare input/textarea (no control shell to anchor into). */
+.m-icon-field:not(.m-icon-field--anchored) .m-icon-field__icon {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    z-index: 1;
 }
 
-.m-icon-field--left .m-icon-field__icon {
-    left: var(--m-control-padding-x-medium);
+.m-icon-field--left:not(.m-icon-field--anchored) .m-icon-field__icon {
+    left: var(--m-space-2);
 }
 
-.m-icon-field--right .m-icon-field__icon {
-    right: var(--m-control-padding-x-medium);
+.m-icon-field--right:not(.m-icon-field--anchored) .m-icon-field__icon {
+    right: var(--m-space-2);
 }
 
-.m-icon-field--left :is(.m-input, .m-textarea, .m-password__input, .m-inputnumber__input) {
+.m-icon-field--left:not(.m-icon-field--anchored)
+    :is(.m-input, .m-textarea, input, textarea) {
     padding-left: var(--m-control-affix-padding);
 }
 
-.m-icon-field--right :is(.m-input, .m-textarea, .m-password__input, .m-inputnumber__input) {
+.m-icon-field--right:not(.m-icon-field--anchored)
+    :is(.m-input, .m-textarea, input, textarea) {
     padding-right: var(--m-control-affix-padding);
 }
 
-.m-icon-field--left:has(.m-input--small, .m-textarea--small, .m-password--small, .m-inputnumber--small)
-    .m-icon-field__icon {
-    left: var(--m-control-padding-x-small);
+/*
+ * Anchored mode: icon teleports into the control shell and participates in
+ * flex flow (same model as Input prefix/suffix).
+ */
+.m-icon-field--anchored :is(
+    .m-input-field__control,
+    .m-textarea-field__control,
+    .m-password,
+    .m-inputnumber__input-wrap,
+    .m-autocomplete__control,
+    .m-datepicker__control
+) {
+    align-items: center;
+    display: flex;
 }
 
-.m-icon-field--right:has(.m-input--small, .m-textarea--small, .m-password--small, .m-inputnumber--small)
-    .m-icon-field__icon {
-    right: var(--m-control-padding-x-small);
+.m-icon-field--anchored .m-icon-field__icon {
+    position: static;
+    transform: none;
+}
+
+.m-icon-field--left.m-icon-field--anchored .m-icon-field__icon {
+    order: -1;
+    padding-inline: var(--m-space-2);
+}
+
+.m-icon-field--right.m-icon-field--anchored .m-icon-field__icon {
+    order: 1;
+    padding-inline: var(--m-space-2);
+}
+
+.m-icon-field--right.m-icon-field--anchored :is(
+    .m-input__clear,
+    .m-password__clear,
+    .m-textarea__clear,
+    .m-inputnumber__clear,
+    .m-autocomplete__clear,
+    .m-autocomplete__spinner,
+    .m-autocomplete__dropdown,
+    .m-datepicker__clear,
+    .m-password__toggle
+) {
+    order: 2;
+}
+
+/* Promote plain bordered inputs into the control shell when IconField anchors. */
+.m-icon-field--anchored
+    .m-input-field__control:not(
+        .m-input-field__control--prefixed,
+        .m-input-field__control--suffixed,
+        .m-input-field__control--clearable
+    ) {
+    background: var(--m-color-surface);
+    border: var(--m-border-width) solid var(--m-color-border);
+    border-radius: var(--m-radius-control);
+    box-sizing: border-box;
+    min-height: var(--m-control-height-medium);
+    transition:
+        border-color var(--m-motion-fast) var(--m-motion-ease),
+        box-shadow var(--m-motion-fast) var(--m-motion-ease);
+}
+
+.m-icon-field--anchored
+    .m-textarea-field__control:not(.m-textarea-field__control--clearable) {
+    background: var(--m-color-surface);
+    border: var(--m-border-width) solid var(--m-color-border);
+    border-radius: var(--m-radius-control);
+    box-sizing: border-box;
+    transition:
+        border-color var(--m-motion-fast) var(--m-motion-ease),
+        box-shadow var(--m-motion-fast) var(--m-motion-ease);
+}
+
+.m-icon-field--anchored
+    .m-input-field__control:not(
+        .m-input-field__control--prefixed,
+        .m-input-field__control--suffixed,
+        .m-input-field__control--clearable
+    )
+    .m-input {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    flex: 1 1 auto;
+    height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
+    line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
+    min-height: 0;
+    min-width: 0;
+    width: auto;
+}
+
+.m-icon-field--anchored
+    .m-textarea-field__control:not(.m-textarea-field__control--clearable)
+    .m-textarea {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto;
+}
+
+.m-icon-field--anchored
+    .m-input-field__control:not(
+        .m-input-field__control--prefixed,
+        .m-input-field__control--suffixed,
+        .m-input-field__control--clearable
+    ):hover:not(:focus-within):has(.m-input:not(:disabled)),
+.m-icon-field--anchored
+    .m-textarea-field__control:not(.m-textarea-field__control--clearable):hover:not(
+        :focus-within
+    ):has(.m-textarea:not(:disabled)) {
+    border-color: var(--m-color-primary-hover);
+}
+
+.m-icon-field--anchored
+    .m-input-field__control:not(
+        .m-input-field__control--prefixed,
+        .m-input-field__control--suffixed,
+        .m-input-field__control--clearable
+    ):has(.m-input--filled),
+.m-icon-field--anchored
+    .m-textarea-field__control:not(.m-textarea-field__control--clearable):has(
+        .m-textarea--filled
+    ) {
+    background: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 12%,
+        var(--m-color-surface)
+    );
+    border-color: transparent;
+}
+
+.m-icon-field--anchored
+    .m-input-field__control:not(
+        .m-input-field__control--prefixed,
+        .m-input-field__control--suffixed,
+        .m-input-field__control--clearable
+    ):has(.m-input--invalid),
+.m-icon-field--anchored
+    .m-textarea-field__control:not(.m-textarea-field__control--clearable):has(
+        .m-textarea--invalid
+    ) {
+    border-color: var(--m-color-danger);
+}
+
+.m-icon-field--anchored
+    .m-input-field__control:has(.m-input:disabled),
+.m-icon-field--anchored
+    .m-textarea-field__control:has(.m-textarea:disabled) {
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
+}
+
+.m-icon-field--anchored
+    .m-input-field__control:not(
+        .m-input-field__control--prefixed,
+        .m-input-field__control--suffixed,
+        .m-input-field__control--clearable
+    ):focus-within,
+.m-icon-field--anchored
+    .m-textarea-field__control:not(.m-textarea-field__control--clearable):focus-within {
+    border-color: var(--m-color-primary-hover);
+    box-shadow: var(--m-focus-shadow);
+}
+
+.m-icon-field--anchored
+    .m-input-field__control:not(
+        .m-input-field__control--prefixed,
+        .m-input-field__control--suffixed,
+        .m-input-field__control--clearable
+    )
+    .m-input:focus-visible,
+.m-icon-field--anchored
+    .m-textarea-field__control:not(.m-textarea-field__control--clearable)
+    .m-textarea:focus-visible {
+    border-color: transparent;
+    box-shadow: none;
+}
+
+.m-icon-field--left.m-icon-field--anchored :is(
+    .m-input,
+    .m-textarea,
+    .m-password__input,
+    .m-inputnumber__input,
+    .m-autocomplete__input,
+    .m-datepicker__input
+) {
+    padding-left: 0;
+}
+
+.m-icon-field--right.m-icon-field--anchored :is(
+    .m-input,
+    .m-textarea,
+    .m-password__input,
+    .m-inputnumber__input,
+    .m-autocomplete__input,
+    .m-datepicker__input
+) {
+    padding-right: 0;
 }
 
-.m-icon-field--left:has(.m-input--large, .m-textarea--large, .m-password--large, .m-inputnumber--large)
+/* Size-aware icon inset */
+.m-icon-field--anchored:has(
+        .m-input--small,
+        .m-textarea--small,
+        .m-password--small,
+        .m-inputnumber--small,
+        .m-autocomplete--small,
+        .m-datepicker--small,
+        .m-input--sm,
+        .m-textarea--sm
+    )
     .m-icon-field__icon {
-    left: var(--m-control-padding-x-large);
+    padding-inline: var(--m-space-2);
 }
 
-.m-icon-field--right:has(.m-input--large, .m-textarea--large, .m-password--large, .m-inputnumber--large)
+.m-icon-field--anchored:has(
+        .m-input--large,
+        .m-textarea--large,
+        .m-password--large,
+        .m-inputnumber--large,
+        .m-autocomplete--large,
+        .m-datepicker--large,
+        .m-input--lg,
+        .m-textarea--lg
+    )
     .m-icon-field__icon {
-    right: var(--m-control-padding-x-large);
+    padding-inline: var(--m-space-3);
 }
 
-.m-icon-field--left:has(.m-input--small, .m-textarea--small, .m-password--small, .m-inputnumber--small)
-    :is(.m-input, .m-textarea, .m-password__input, .m-inputnumber__input) {
-    padding-left: var(--m-control-affix-gap);
+.m-icon-field--anchored:has(
+        .m-input--small,
+        .m-textarea--small,
+        .m-password--small,
+        .m-inputnumber--small,
+        .m-autocomplete--small,
+        .m-datepicker--small,
+        .m-input--sm,
+        .m-textarea--sm
+    )
+    .m-input-field__control:not(
+        .m-input-field__control--prefixed,
+        .m-input-field__control--suffixed,
+        .m-input-field__control--clearable
+    ) {
+    min-height: var(--m-control-height-small);
 }
 
-.m-icon-field--right:has(.m-input--small, .m-textarea--small, .m-password--small, .m-inputnumber--small)
-    :is(.m-input, .m-textarea, .m-password__input, .m-inputnumber__input) {
-    padding-right: var(--m-control-affix-gap);
+.m-icon-field--anchored:has(
+        .m-input--small,
+        .m-inputnumber--small,
+        .m-autocomplete--small,
+        .m-datepicker--small,
+        .m-password--small,
+        .m-input--sm
+    )
+    .m-input-field__control:not(
+        .m-input-field__control--prefixed,
+        .m-input-field__control--suffixed,
+        .m-input-field__control--clearable
+    )
+    .m-input {
+    height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
+    line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
 }
 
-.m-icon-field--left:has(.m-input--large, .m-textarea--large, .m-password--large, .m-inputnumber--large)
-    :is(.m-input, .m-textarea, .m-password__input, .m-inputnumber__input) {
-    padding-left: calc(var(--m-control-affix-padding) + var(--m-space-1));
+.m-icon-field--anchored:has(
+        .m-input--large,
+        .m-password--large,
+        .m-inputnumber--large,
+        .m-autocomplete--large,
+        .m-datepicker--large,
+        .m-input--lg
+    )
+    .m-input-field__control:not(
+        .m-input-field__control--prefixed,
+        .m-input-field__control--suffixed,
+        .m-input-field__control--clearable
+    ) {
+    min-height: var(--m-control-height-large);
 }
 
-.m-icon-field--right:has(.m-input--large, .m-textarea--large, .m-password--large, .m-inputnumber--large)
-    :is(.m-input, .m-textarea, .m-password__input, .m-inputnumber__input) {
-    padding-right: calc(var(--m-control-affix-padding) + var(--m-space-1));
+.m-icon-field--anchored:has(
+        .m-input--large,
+        .m-password--large,
+        .m-inputnumber--large,
+        .m-autocomplete--large,
+        .m-datepicker--large,
+        .m-input--lg
+    )
+    .m-input-field__control:not(
+        .m-input-field__control--prefixed,
+        .m-input-field__control--suffixed,
+        .m-input-field__control--clearable
+    )
+    .m-input {
+    height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
+    line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Input.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.vue"],"names":[],"mappings":";AA4KA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAgFzC,iBAAS,KAAK,SAEb;AAED,iBAAS,IAAI,SAEZ;AAED,iBAAS,MAAM,SAEd;AA+KD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAO9C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;6EAKd,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":"Input.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.vue"],"names":[],"mappings":";AA2KA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAuFzC,iBAAS,KAAK,SAEb;AAED,iBAAS,IAAI,SAEZ;AAED,iBAAS,MAAM,SAEd;AAwKD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAO9C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;6EAKd,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/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,gBAAgB,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;AAChB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAA;AAC/C,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}