morya-ui 0.4.5 → 0.5.0

package/dist/{input-color → color-picker}/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);
 }
@@ -1206,55 +1197,338 @@
     animation: none !important;
 }
 
-/* --- Form: InputColor --- */
-.m-inputcolor-field {
+.m-icon {
+    color: currentColor;
+    display: inline-flex;
+    flex-shrink: 0;
+    height: 1rem;
+    line-height: 0;
+    vertical-align: middle;
+    width: 1rem;
+}
+
+.m-icon svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.m-icon--sm,
+.m-icon--small {
+    height: 0.875rem;
+    width: 0.875rem;
+}
+
+.m-icon--md,
+.m-icon--normal {
+    height: 1rem;
+    width: 1rem;
+}
+
+.m-icon--lg,
+.m-icon--large {
+    height: 1.25rem;
+    width: 1.25rem;
+}
+
+.m-icon--spin svg {
+    animation: m-icon-spin var(--m-motion-spin-fast) linear infinite;
+}
+
+@keyframes m-icon-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+:root[data-m-motion='none'] .m-icon--spin svg,
+:root[data-m-motion='reduced'] .m-icon--spin svg {
+    animation: none;
+}
+
+.m-input:hover:not(:disabled):not(:focus):not(.m-input--invalid):not(
+        .m-input--warning
+    ) {
+    border-color: var(--m-color-primary-hover);
+}
+
+/* Outlined active state: border color + soft control-outline shadow */
+.m-input:focus,
+.m-input:focus-visible {
+    border-color: var(--m-color-primary);
+    box-shadow: var(--m-focus-shadow);
+    outline: 0;
+}
+
+.m-input--invalid:hover:not(:disabled):not(:focus) {
+    border-color: var(--m-color-danger);
+}
+
+.m-input--invalid:focus,
+.m-input--invalid:focus-visible {
+    border-color: var(--m-color-danger);
+    box-shadow: var(--m-focus-shadow-danger);
+    outline: 0;
+}
+
+.m-input--warning:hover:not(:disabled):not(:focus) {
+    border-color: var(--m-color-warning);
+}
+
+.m-input--warning:focus,
+.m-input--warning:focus-visible {
+    border-color: var(--m-color-warning);
+    box-shadow: var(--m-focus-shadow-warning);
+    outline: 0;
+}
+
+.m-input-field {
     display: grid;
     gap: var(--m-space-2);
 }
 
-.m-inputcolor-field__label {
+.m-input-field--fluid {
+    width: 100%;
+}
+
+.m-input-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-input-field__help {
+    color: var(--m-color-text-muted);
+    font-size: var(--m-font-size-xs);
 }
 
-.m-inputcolor--disabled {
-    cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
+.m-input-field__help--invalid {
+    color: var(--m-color-danger);
 }
 
-.m-inputcolor__swatch {
-    background: transparent;
+.m-input-field__control {
+    position: relative;
+}
+
+/*
+ * Affix/clear shell: prefix/suffix participate in flex flow so long slot
+ * content reserves real width instead of fighting fixed input padding.
+ */
+.m-input-field__control--prefixed,
+.m-input-field__control--suffixed,
+.m-input-field__control--clearable {
+    align-items: center;
+    background: var(--m-color-surface);
     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;
+    box-sizing: border-box;
+    display: flex;
+    max-width: 100%;
+    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),
-        opacity var(--m-motion-fast) var(--m-motion-ease);
-    width: var(--m-control-height-medium);
+        background-color var(--m-motion-fast) var(--m-motion-ease);
+}
+
+.m-input-field--fluid .m-input-field__control--prefixed,
+.m-input-field--fluid .m-input-field__control--suffixed,
+.m-input-field--fluid .m-input-field__control--clearable {
+    width: 100%;
+}
+
+.m-input-field__control--prefixed:has(.m-input--small),
+.m-input-field__control--suffixed:has(.m-input--small),
+.m-input-field__control--clearable:has(.m-input--small),
+.m-input-field__control--prefixed:has(.m-input--sm),
+.m-input-field__control--suffixed:has(.m-input--sm),
+.m-input-field__control--clearable:has(.m-input--sm) {
+    min-height: var(--m-control-height-small);
+}
+
+.m-input-field__control--prefixed:has(.m-input--large),
+.m-input-field__control--suffixed:has(.m-input--large),
+.m-input-field__control--clearable:has(.m-input--large),
+.m-input-field__control--prefixed:has(.m-input--lg),
+.m-input-field__control--suffixed:has(.m-input--lg),
+.m-input-field__control--clearable:has(.m-input--lg) {
+    min-height: var(--m-control-height-large);
+}
+
+.m-input-field__control--prefixed:has(.m-input--filled),
+.m-input-field__control--suffixed:has(.m-input--filled),
+.m-input-field__control--clearable:has(.m-input--filled) {
+    background: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 12%,
+        var(--m-color-surface)
+    );
+    border-color: transparent;
+}
+
+.m-input-field__control--prefixed:has(.m-input--invalid),
+.m-input-field__control--suffixed:has(.m-input--invalid),
+.m-input-field__control--clearable:has(.m-input--invalid) {
+    border-color: var(--m-color-danger);
+}
+
+.m-input-field__control--prefixed:has(.m-input--warning),
+.m-input-field__control--suffixed:has(.m-input--warning),
+.m-input-field__control--clearable:has(.m-input--warning) {
+    border-color: var(--m-color-warning);
+}
+
+.m-input-field__control--prefixed:hover:not(:focus-within):has(
+        .m-input:not(:disabled)
+    ),
+.m-input-field__control--suffixed:hover:not(:focus-within):has(
+        .m-input:not(:disabled)
+    ),
+.m-input-field__control--clearable:hover:not(:focus-within):has(
+        .m-input:not(:disabled)
+    ) {
+    border-color: var(--m-color-primary-hover);
+}
+
+.m-input-field__control--prefixed:focus-within,
+.m-input-field__control--suffixed:focus-within,
+.m-input-field__control--clearable:focus-within {
+    border-color: var(--m-color-primary);
+    box-shadow: var(--m-focus-shadow);
+}
+
+.m-input-field__control--prefixed:has(.m-input--invalid):focus-within,
+.m-input-field__control--suffixed:has(.m-input--invalid):focus-within,
+.m-input-field__control--clearable:has(.m-input--invalid):focus-within {
+    border-color: var(--m-color-danger);
+    box-shadow: var(--m-focus-shadow-danger);
+}
+
+.m-input-field__control--prefixed:has(.m-input--warning):focus-within,
+.m-input-field__control--suffixed:has(.m-input--warning):focus-within,
+.m-input-field__control--clearable:has(.m-input--warning):focus-within {
+    border-color: var(--m-color-warning);
+    box-shadow: var(--m-focus-shadow-warning);
+}
+
+.m-input-field__control--prefixed:has(.m-input:disabled),
+.m-input-field__control--suffixed:has(.m-input:disabled),
+.m-input-field__control--clearable:has(.m-input:disabled) {
+    background-color: var(--m-color-bg-disabled);
+    color: var(--m-color-text-disabled);
+    cursor: not-allowed;
+    opacity: 1;
+}
+
+.m-input-field__control--prefixed .m-input,
+.m-input-field__control--suffixed .m-input,
+.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-input-field__control--prefixed:has(.m-input--small) .m-input,
+.m-input-field__control--suffixed:has(.m-input--small) .m-input,
+.m-input-field__control--clearable:has(.m-input--small) .m-input,
+.m-input-field__control--prefixed:has(.m-input--sm) .m-input,
+.m-input-field__control--suffixed:has(.m-input--sm) .m-input,
+.m-input-field__control--clearable:has(.m-input--sm) .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-input-field__control--prefixed:has(.m-input--large) .m-input,
+.m-input-field__control--suffixed:has(.m-input--large) .m-input,
+.m-input-field__control--clearable:has(.m-input--large) .m-input,
+.m-input-field__control--prefixed:has(.m-input--lg) .m-input,
+.m-input-field__control--suffixed:has(.m-input--lg) .m-input,
+.m-input-field__control--clearable:has(.m-input--lg) .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));
+}
+
+.m-input-field__control--prefixed .m-input:hover:not(:disabled):not(:focus),
+.m-input-field__control--suffixed .m-input:hover:not(:disabled):not(:focus),
+.m-input-field__control--clearable .m-input:hover:not(:disabled):not(:focus),
+.m-input-field__control--prefixed .m-input:focus-visible,
+.m-input-field__control--suffixed .m-input:focus-visible,
+.m-input-field__control--clearable .m-input:focus-visible,
+.m-input-field__control--prefixed .m-input--invalid:focus-visible,
+.m-input-field__control--suffixed .m-input--invalid:focus-visible,
+.m-input-field__control--clearable .m-input--invalid:focus-visible {
+    border-color: transparent;
+    box-shadow: none;
 }
 
-.m-inputcolor__text {
+.m-input-field__control--prefixed .m-input {
+    padding-left: 0;
+}
+
+.m-input-field__control--suffixed .m-input,
+.m-input-field__control--clearable.m-input-field__control--suffixed .m-input {
+    padding-right: 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: inherit;
+    gap: var(--m-space-1);
+    line-height: 1;
+    padding-inline: var(--m-space-2);
+    pointer-events: none;
+    white-space: nowrap;
+}
+
+.m-input-field__control--prefixed .m-input__prefix,
+.m-input-field__control--suffixed .m-input__suffix {
+    font-size: var(--m-control-font-medium);
+}
+
+.m-input-field__control:has(.m-input--small) .m-input__prefix,
+.m-input-field__control:has(.m-input--small) .m-input__suffix,
+.m-input-field__control:has(.m-input--sm) .m-input__prefix,
+.m-input-field__control:has(.m-input--sm) .m-input__suffix {
+    font-size: var(--m-control-font-small);
+    padding-inline: var(--m-space-2);
+}
+
+.m-input-field__control:has(.m-input--large) .m-input__prefix,
+.m-input-field__control:has(.m-input--large) .m-input__suffix,
+.m-input-field__control:has(.m-input--lg) .m-input__prefix,
+.m-input-field__control:has(.m-input--lg) .m-input__suffix {
+    font-size: var(--m-control-font-large);
+    padding-inline: var(--m-space-3);
+}
+
+.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-family: var(--m-font-sans);
     font-size: var(--m-control-font-medium);
+    line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
     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),
@@ -1263,85 +1537,1134 @@
         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-input--filled {
+    background: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 12%,
+        var(--m-color-surface)
+    );
+    border-color: transparent;
 }
 
-.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-input--fluid {
+    width: 100%;
+}
+
+.m-input--invalid {
+    border-color: var(--m-color-danger);
+}
+
+.m-input--warning {
+    border-color: var(--m-color-warning);
+}
+
+.m-input--small,
+.m-input--sm {
+    font-size: var(--m-control-font-small);
+    line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
+    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);
+    line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
+    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);
+    line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
+    min-height: var(--m-control-height-large);
+    padding: 0 var(--m-control-padding-x-large);
 }
 
-.m-inputcolor__row {
+.m-input-field__control .m-input {
+    width: 100%;
+}
+
+.m-input-field__control--prefixed .m-input,
+.m-input-field__control--suffixed .m-input,
+.m-input-field__control--clearable .m-input {
+    width: auto;
+}
+
+.m-input__clear {
     align-items: center;
+    align-self: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-text-muted);
+    cursor: pointer;
     display: flex;
+    flex: 0 0 auto;
+    font-size: var(--m-font-size-lg);
+    height: min(
+        var(--m-control-affix-size),
+        calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
+    );
+    justify-content: center;
+    max-height: 100%;
+    padding: 0;
+    width: min(
+        var(--m-control-affix-size),
+        calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
+    );
+}
+
+.m-input-field__control:has(.m-input--small) .m-input__clear {
+    height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
+    width: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
+}
+
+.m-input-field__control:has(.m-input--large) .m-input__clear {
+    height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
+    width: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
+}
+
+.m-input__clear:hover:not(:disabled) {
+    color: var(--m-color-text);
+}
+
+.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);
+}
+
+/* --- Form: InputNumber --- */
+.m-inputnumber-field {
+    display: grid;
     gap: var(--m-space-2);
 }
 
-.m-inputcolor__swatches {
+.m-inputnumber-field--fluid {
+    width: 100%;
+}
+
+.m-inputnumber-field__label {
+    color: var(--m-color-text);
+    font-family: var(--m-font-sans);
+    font-size: var(--m-font-size-md);
+    font-weight: 500;
+}
+
+.m-inputnumber-field__help {
+    color: var(--m-color-text-muted);
+    font-size: var(--m-font-size-xs);
+}
+
+.m-inputnumber-field__help--invalid {
+    color: var(--m-color-danger);
+}
+
+.m-inputnumber {
+    --m-inputnumber-width: 8rem;
+    --m-inputnumber-stack-button-padding-x: var(--m-space-2);
+    align-items: stretch;
+    display: inline-flex;
+    max-width: 100%;
+}
+
+.m-inputnumber--fluid {
     display: flex;
-    flex-wrap: wrap;
-    gap: var(--m-space-1);
-    margin-top: var(--m-space-2);
+    width: 100%;
 }
 
-.m-inputcolor__preset {
+.m-inputnumber__input-wrap {
+    align-items: center;
+    background: var(--m-color-surface);
     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;
+    border-radius: var(--m-radius-control);
+    box-sizing: border-box;
+    display: flex;
+    max-width: 100%;
+    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);
-    width: var(--m-inputcolor-preset-size);
+    width: var(--m-inputnumber-width);
+}
+
+.m-inputnumber--fluid .m-inputnumber__input-wrap {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto;
 }
 
-.m-inputcolor__preset:hover:not(:disabled) {
+.m-inputnumber__input-wrap:hover:has(.m-inputnumber__input:not(:disabled)):not(
+        :focus-within
+    ) {
     border-color: var(--m-color-primary-hover);
 }
 
-.m-inputcolor__preset:focus-visible {
+.m-inputnumber__input-wrap:focus-within {
+    border-color: var(--m-color-primary);
     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-inputnumber--invalid .m-inputnumber__input-wrap {
+    border-color: var(--m-color-danger);
 }
 
-.m-inputcolor--small .m-inputcolor__swatch {
-    width: var(--m-control-height-small);
+.m-inputnumber--invalid .m-inputnumber__input-wrap:focus-within {
+    border-color: var(--m-color-danger);
+    box-shadow: var(--m-focus-shadow-danger);
 }
 
-.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-inputnumber--buttons .m-inputnumber__input-wrap {
+    border-radius: 0;
 }
 
-.m-inputcolor--large .m-inputcolor__swatch {
-    width: var(--m-control-height-large);
+.m-inputnumber--buttons-right .m-inputnumber__input-wrap {
+    border-radius: var(--m-radius-control) 0 0 var(--m-radius-control);
+    border-right: 0;
 }
 
-.m-inputcolor--invalid .m-inputcolor__text,
-.m-inputcolor--invalid .m-inputcolor__swatch {
-    border-color: var(--m-color-danger);
+.m-inputnumber__prefix,
+.m-inputnumber__suffix {
+    align-items: center;
+    color: var(--m-color-text-muted);
+    display: inline-flex;
+    flex: 0 0 auto;
+    padding-inline: var(--m-space-2);
+    white-space: nowrap;
 }
 
-.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);
+.m-inputnumber__input {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    color: var(--m-color-text);
+    flex: 1 1 auto;
+    font-family: var(--m-font-sans);
+    font-size: var(--m-control-font-medium);
+    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;
+    padding: 0 var(--m-control-padding-x-medium);
+    width: 100%;
+}
+
+.m-inputnumber__input-wrap:has(.m-inputnumber__prefix) .m-inputnumber__input {
+    padding-left: 0;
+}
+
+.m-inputnumber__input-wrap:has(.m-inputnumber__suffix) .m-inputnumber__input {
+    padding-right: 0;
+}
+
+.m-inputnumber__input:focus,
+.m-inputnumber__input:focus-visible {
+    box-shadow: none;
+    outline: none;
+}
+
+.m-inputnumber__clear {
+    align-items: center;
+    align-self: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-text-muted);
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
+    height: var(--m-control-affix-size);
+    justify-content: center;
+    padding: 0;
+    width: var(--m-control-affix-size);
+}
+
+.m-inputnumber__clear:hover:not(:disabled) {
+    color: var(--m-color-text);
+}
+
+.m-inputnumber__clear:focus-visible {
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-inputnumber__clear:disabled {
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
+}
+
+.m-inputnumber--buttons .m-inputnumber__input {
+    text-align: center;
+}
+
+.m-inputnumber--small .m-inputnumber__input,
+.m-inputnumber--small .m-inputnumber__button {
+    font-size: var(--m-control-font-small);
+    min-height: var(--m-control-height-small);
+}
+
+.m-inputnumber--small .m-inputnumber__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));
+    min-height: 0;
+}
+
+.m-inputnumber--small .m-inputnumber__input-wrap {
+    min-height: var(--m-control-height-small);
+}
+
+.m-inputnumber--small .m-inputnumber__prefix,
+.m-inputnumber--small .m-inputnumber__suffix {
+    padding-inline: var(--m-space-2);
+}
+
+.m-inputnumber--large .m-inputnumber__input,
+.m-inputnumber--large .m-inputnumber__button {
+    font-size: var(--m-control-font-large);
+    min-height: var(--m-control-height-large);
+}
+
+.m-inputnumber--large .m-inputnumber__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));
+    min-height: 0;
+}
+
+.m-inputnumber--large .m-inputnumber__input-wrap {
+    min-height: var(--m-control-height-large);
+}
+
+.m-inputnumber--large .m-inputnumber__prefix,
+.m-inputnumber--large .m-inputnumber__suffix {
+    padding-inline: var(--m-space-3);
+}
+
+.m-inputnumber__button {
+    align-items: center;
+    background: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 12%,
+        var(--m-color-surface)
+    );
+    border: var(--m-border-width) solid var(--m-color-border);
+    color: var(--m-color-text);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--m-font-sans);
+    font-size: var(--m-control-font-medium);
+    justify-content: center;
+    min-height: var(--m-control-height-medium);
+    min-width: var(--m-control-height-medium);
+    padding: 0;
+    transition:
+        background-color var(--m-motion-fast) var(--m-motion-ease),
+        opacity var(--m-motion-fast) var(--m-motion-ease);
+}
+
+.m-inputnumber__button--decrement {
+    border-radius: var(--m-radius-control) 0 0 var(--m-radius-control);
+    border-right: 0;
+}
+
+.m-inputnumber__button--increment {
+    border-left: 0;
+    border-radius: 0 var(--m-radius-control) var(--m-radius-control) 0;
+}
+
+/* Right-stacked buttons: only the outer corners keep radius, inner seams are square. */
+.m-inputnumber__stack {
+    border: var(--m-border-width) solid var(--m-color-border);
+    border-left: 0;
+    border-radius: 0 var(--m-radius-control) var(--m-radius-control) 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.m-inputnumber__stack .m-inputnumber__button {
+    border: 0;
+    border-radius: 0;
+    flex: 1 1 0;
+    min-height: 0;
+    min-width: 0;
+    padding: 0 var(--m-inputnumber-stack-button-padding-x);
+}
+
+.m-inputnumber__stack .m-inputnumber__button + .m-inputnumber__button {
+    border-top: var(--m-border-width) solid var(--m-color-border);
+}
+
+.m-inputnumber__button:hover:not(:disabled) {
+    background: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 20%,
+        var(--m-color-surface)
+    );
+}
+
+.m-inputnumber__button:disabled,
+.m-inputnumber--disabled .m-inputnumber__input-wrap {
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
+}
+
+.m-inputnumber__button:focus-visible {
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+    z-index: 1;
+}
+
+/* —— Form: Segmented —— */
+.m-segmented {
+    --m-segmented-track-padding: var(--m-space-1);
+    background: color-mix(in srgb, var(--m-color-text-muted) 8%, var(--m-color-surface));
+    border-radius: var(--m-radius-control);
+    display: inline-flex;
+    gap: 0;
+    padding: var(--m-segmented-track-padding);
+    position: relative;
+}
+
+.m-segmented--block {
+    display: flex;
+    width: 100%;
+}
+
+.m-segmented--round {
+    border-radius: var(--m-radius-pill);
+}
+
+.m-segmented--disabled {
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
+    pointer-events: none;
+}
+
+.m-segmented__item {
+    cursor: pointer;
+    flex: 0 1 auto;
+    margin: 0;
+    min-width: 0;
+    position: relative;
+}
+
+.m-segmented--block .m-segmented__item {
+    flex: 1 1 0;
+}
+
+.m-segmented__input {
+    height: 1px;
+    margin: 0;
+    opacity: 0;
+    overflow: hidden;
+    pointer-events: none;
+    position: absolute;
+    width: 1px;
+    clip: rect(0, 0, 0, 0);
+}
+
+.m-segmented__label {
+    align-items: center;
+    border-radius: calc(var(--m-radius-control) - var(--m-space-1));
+    color: var(--m-color-text-muted);
+    display: inline-flex;
+    font-family: var(--m-font-sans);
+    font-size: var(--m-control-font-medium);
+    font-weight: 400;
+    gap: var(--m-space-1);
+    justify-content: center;
+    line-height: 1.4;
+    min-height: calc(var(--m-control-height-medium) - var(--m-segmented-track-padding) * 2);
+    padding: 0 var(--m-space-3);
+    transition:
+        background-color var(--m-motion-fast) var(--m-motion-ease),
+        box-shadow var(--m-motion-fast) var(--m-motion-ease),
+        color var(--m-motion-fast) var(--m-motion-ease);
+    user-select: none;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.m-segmented--round .m-segmented__label {
+    border-radius: var(--m-radius-pill);
+}
+
+.m-segmented__item--checked .m-segmented__label {
+    background: var(--m-color-surface);
+    box-shadow: var(--m-shadow-sm);
+    color: var(--m-color-text);
+}
+
+.m-segmented__item:not(.m-segmented__item--disabled):hover .m-segmented__label {
+    color: var(--m-color-text);
+}
+
+.m-segmented__item--disabled {
+    cursor: not-allowed;
+}
+
+.m-segmented__item--disabled .m-segmented__label {
+    color: var(--m-color-text-disabled);
+}
+
+.m-segmented__input:focus-visible + .m-segmented__label {
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-segmented__icon {
+    flex-shrink: 0;
+    font-size: 1em;
+}
+
+.m-segmented__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.m-segmented--small .m-segmented__label {
+    font-size: var(--m-control-font-small);
+    min-height: calc(var(--m-control-height-small) - var(--m-segmented-track-padding) * 2);
+    padding: 0 var(--m-space-2);
+}
+
+.m-segmented--large .m-segmented__label {
+    font-size: var(--m-control-font-large);
+    min-height: calc(var(--m-control-height-large) - var(--m-segmented-track-padding) * 2);
+    padding: 0 var(--m-space-4);
+}
+
+.m-select__control {
+    position: relative;
+    width: 100%;
+}
+
+.m-select {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    font-family: var(--m-font-sans);
+    font-size: var(--m-control-font-medium);
+    min-height: var(--m-control-height-medium);
+    padding: 0 var(--m-control-padding-x-medium);
+    padding-right: var(--m-control-end-padding);
+    position: relative;
+    text-align: left;
+}
+
+.m-select--small,
+.m-select--sm {
+    font-size: var(--m-control-font-small);
+    min-height: var(--m-control-height-small);
+    padding-left: var(--m-control-padding-x-small);
+    padding-right: var(--m-control-end-padding);
+}
+
+.m-select--normal {
+    font-size: var(--m-control-font-medium);
+    min-height: var(--m-control-height-medium);
+}
+
+.m-select--large,
+.m-select--lg {
+    font-size: var(--m-control-font-large);
+    min-height: var(--m-control-height-large);
+    padding-left: var(--m-control-padding-x-large);
+    padding-right: var(--m-control-end-padding);
+}
+
+.m-select--multiple {
+    align-items: center;
+    gap: var(--m-space-1);
+    padding-bottom: var(--m-space-1);
+    padding-top: var(--m-space-1);
+}
+
+.m-select__tags {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    gap: var(--m-space-1);
+    min-width: 0;
+}
+
+.m-select__spinner {
+    --m-select-spinner-size: 0.85rem;
+    border: var(--m-border-width) solid
+        color-mix(in srgb, var(--m-color-text-muted) 35%, transparent);
+    border-radius: 50%;
+    border-top-color: var(--m-color-primary);
+    flex: 0 0 auto;
+    height: var(--m-select-spinner-size);
+    width: var(--m-select-spinner-size);
+    animation: m-progress-spinner-rotate var(--m-motion-spin-medium) linear infinite;
+}
+
+[data-m-motion="reduced"] .m-select__spinner {
+    animation: none;
+    border-top-color: var(--m-color-text-muted);
+}
+
+.m-select:hover:not(:disabled):not(.m-select--disabled):not(
+        .m-select--open
+    ):not(:focus):not(.m-select--invalid):not(.m-select--warning) {
+    border-color: var(--m-color-primary-hover);
+}
+
+.m-select--open,
+.m-select:focus,
+.m-select:focus-visible {
+    border-color: var(--m-color-primary);
+    box-shadow: var(--m-focus-shadow);
+    outline: 0;
+}
+
+.m-select--placeholder .m-select__value {
+    color: var(--m-color-text-muted);
+}
+
+.m-select--filled {
+    background: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 12%,
+        var(--m-color-surface)
+    );
+    border-color: transparent;
+}
+
+.m-select__value {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.m-select__menu {
+    --m-select-menu-max-height: min(18rem, 45vh);
+    --m-select-list-max-height: var(--m-select-menu-max-height);
+    display: flex;
+    flex-direction: column;
+    max-height: var(--m-select-menu-max-height);
+    min-width: 100%;
+    overscroll-behavior: contain;
+    padding: var(--m-space-1);
+    position: absolute;
+    transform-origin: top center;
+    width: max-content;
+}
+
+.m-select__menu:has(.m-select__filter) {
+    --m-select-list-max-height: calc(
+        var(--m-select-menu-max-height) - var(--m-control-height-small) - var(--m-space-6)
+    );
+}
+
+.m-select__list {
+    max-height: var(--m-select-list-max-height);
+    min-height: 0;
+    overscroll-behavior: contain;
+}
+
+.m-select__menu--bottom-start {
+    left: 0;
+    transform-origin: top left;
+}
+
+.m-select__menu--bottom-end {
+    right: 0;
+    transform-origin: top right;
+}
+
+.m-select__required-input {
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+.m-select--invalid {
+    border-color: var(--m-color-danger);
+}
+
+.m-select--warning {
+    border-color: var(--m-color-warning);
+}
+
+.m-select--invalid:focus,
+.m-select--invalid:focus-visible,
+.m-select--invalid.m-select--open {
+    border-color: var(--m-color-danger);
+    box-shadow: var(--m-focus-shadow-danger);
+    outline: 0;
+}
+
+.m-select--warning:focus,
+.m-select--warning:focus-visible,
+.m-select--warning.m-select--open {
+    border-color: var(--m-color-warning);
+    box-shadow: var(--m-focus-shadow-warning);
+    outline: 0;
+}
+
+.m-select__option--create {
+    color: var(--m-color-primary);
+    font-style: italic;
+}
+
+.m-select__list--virtual .m-virtualscroller__item {
+    display: flex;
+}
+
+.m-select__list--virtual .m-select__option {
+    height: 100%;
+    min-height: 0;
+    width: 100%;
+}
+
+.m-select__group-label {
+    color: var(--m-color-text-muted);
+    font-size: var(--m-font-size-xs);
+    padding: var(--m-space-2) var(--m-control-padding-x-medium) var(--m-space-1);
+}
+
+/* Virtual rows are fixed-height: center the group label like an option row. */
+.m-select__list--virtual .m-select__group-label {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    height: 100%;
+    padding-bottom: 0;
+    padding-top: 0;
+}
+
+.m-select__header,
+.m-select__footer {
+    flex: 0 0 auto;
+    padding: var(--m-space-2) var(--m-control-padding-x-medium);
+}
+
+/* Header/footer live outside the scroll list; let the menu grow past the list
+   cap so the panel's overflow:hidden does not clip them. */
+.m-select__menu:has(.m-select__header),
+.m-select__menu:has(.m-select__footer) {
+    max-height: none;
+}
+
+/* --- Form: ColorPicker --- */
+.m-colorpicker {
+    display: inline-block;
+    position: relative;
+}
+
+.m-colorpicker--disabled {
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
+}
+
+.m-colorpicker__trigger {
+    align-items: center;
+    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;
+    color: var(--m-color-text);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--m-font-sans);
+    font-size: var(--m-control-font-medium);
+    gap: var(--m-space-2);
+    height: var(--m-control-height-medium);
+    justify-content: center;
+    padding: 0 var(--m-space-2);
+    transition:
+        border-color var(--m-motion-fast) var(--m-motion-ease),
+        box-shadow var(--m-motion-fast) var(--m-motion-ease);
+}
+
+.m-colorpicker__trigger:hover:not(:disabled) {
+    border-color: var(--m-color-primary-hover);
+}
+
+.m-colorpicker__trigger:focus-visible {
+    border-color: var(--m-color-primary);
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-colorpicker__trigger:disabled {
+    cursor: not-allowed;
+}
+
+.m-colorpicker--open .m-colorpicker__trigger {
+    border-color: var(--m-color-primary);
+    box-shadow: var(--m-focus-shadow);
+}
+
+.m-colorpicker__trigger-swatch {
+    border: 1px solid rgb(0 0 0 / 10%);
+    border-radius: var(--m-radius-sm);
+    display: inline-block;
+    flex: 0 0 auto;
+    height: calc(var(--m-control-height-medium) - 2 * var(--m-space-2));
+    width: calc(var(--m-control-height-medium) - 2 * var(--m-space-2));
+}
+
+.m-colorpicker--small .m-colorpicker__trigger {
+    font-size: var(--m-control-font-small);
+    height: var(--m-control-height-small);
+    padding: 0 var(--m-space-1);
+}
+
+.m-colorpicker--small .m-colorpicker__trigger-swatch {
+    height: calc(var(--m-control-height-small) - 2 * var(--m-space-1));
+    width: calc(var(--m-control-height-small) - 2 * var(--m-space-1));
+}
+
+.m-colorpicker--large .m-colorpicker__trigger {
+    font-size: var(--m-control-font-large);
+    height: var(--m-control-height-large);
+    padding: 0 var(--m-space-3);
+}
+
+.m-colorpicker--large .m-colorpicker__trigger-swatch {
+    height: calc(var(--m-control-height-large) - 2 * var(--m-space-3));
+    width: calc(var(--m-control-height-large) - 2 * var(--m-space-3));
+}
+
+.m-colorpicker__trigger-text {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.m-colorpicker__arrow {
+    color: var(--m-color-text-muted);
+    transition: transform var(--m-motion-fast) var(--m-motion-ease);
+}
+
+.m-colorpicker--open .m-colorpicker__arrow {
+    transform: rotate(180deg);
+}
+
+.m-colorpicker__clear {
+    color: var(--m-color-text-muted);
+    cursor: pointer;
+}
+
+.m-colorpicker__clear:hover {
+    color: var(--m-color-text);
+}
+
+/* Panel */
+.m-colorpicker__panel {
+    background: var(--m-color-surface);
+    border: var(--m-border-width) solid var(--m-color-border);
+    border-radius: var(--m-radius-control);
+    box-shadow: var(--m-shadow-lg);
+    box-sizing: border-box;
+    padding: var(--m-space-3);
+    position: absolute;
+    width: 260px;
+    z-index: var(--m-z-overlay, 1000);
+}
+
+.m-colorpicker__panel-inner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--m-space-3);
+}
+
+/* Saturation / Brightness area */
+.m-colorpicker__saturation {
+    border-radius: var(--m-radius-sm);
+    cursor: pointer;
+    height: 160px;
+    overflow: hidden;
+    position: relative;
+    touch-action: none;
+    user-select: none;
+    width: 100%;
+}
+
+.m-colorpicker__saturation-white {
+    background: linear-gradient(to right, #fff, rgb(255 255 255 / 0));
+    inset: 0;
+    position: absolute;
+}
+
+.m-colorpicker__saturation-black {
+    background: linear-gradient(to top, #000, rgb(0 0 0 / 0));
+    inset: 0;
+    position: absolute;
+}
+
+.m-colorpicker__saturation-handle {
+    border: 2px solid #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 20%), inset 0 0 0 1px rgb(0 0 0 / 10%);
+    box-sizing: border-box;
+    height: 12px;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    width: 12px;
+}
+
+/* Sliders */
+.m-colorpicker__sliders {
+    display: flex;
+    flex-direction: column;
+    gap: var(--m-space-2);
+}
+
+.m-colorpicker__hue,
+.m-colorpicker__alpha {
+    border-radius: var(--m-radius-sm);
+    cursor: pointer;
+    height: 12px;
+    position: relative;
+    touch-action: none;
+    user-select: none;
+}
+
+.m-colorpicker__hue-track {
+    background: linear-gradient(
+        to right,
+        #f00 0%,
+        #ff0 17%,
+        #0f0 33%,
+        #0ff 50%,
+        #00f 67%,
+        #f0f 83%,
+        #f00 100%
+    );
+    border-radius: inherit;
+    inset: 0;
+    position: absolute;
+}
+
+.m-colorpicker__alpha-track {
+    border-radius: inherit;
+    inset: 0;
+    position: absolute;
+}
+
+.m-colorpicker__hue-handle,
+.m-colorpicker__alpha-handle {
+    border: 2px solid #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 20%);
+    box-sizing: border-box;
+    height: 16px;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 16px;
+}
+
+/* Input */
+.m-colorpicker__input-row {
+    display: flex;
+    gap: var(--m-space-2);
+}
+
+/* Presets */
+.m-colorpicker__presets {
+    border-top: var(--m-border-width) solid var(--m-color-border);
+    display: flex;
+    flex-direction: column;
+    gap: var(--m-space-2);
+    padding-top: var(--m-space-2);
+}
+
+.m-colorpicker__preset-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--m-space-1);
+}
+
+.m-colorpicker__preset-label {
+    color: var(--m-color-text-muted);
+    font-size: var(--m-font-size-xs);
+}
+
+.m-colorpicker__preset-colors {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--m-space-1);
+}
+
+.m-colorpicker__preset-swatch {
+    border: var(--m-border-width) solid rgb(0 0 0 / 10%);
+    border-radius: var(--m-radius-sm);
+    cursor: pointer;
+    height: 20px;
+    padding: 0;
+    transition:
+        transform var(--m-motion-fast) var(--m-motion-ease),
+        box-shadow var(--m-motion-fast) var(--m-motion-ease);
+    width: 20px;
+}
+
+.m-colorpicker__preset-swatch:hover:not(:disabled) {
+    transform: scale(1.1);
+}
+
+.m-colorpicker__preset-swatch--active {
+    box-shadow: 0 0 0 2px var(--m-color-primary);
+}
+
+.m-colorpicker__preset-swatch:disabled {
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
+}
+
+/* Mode Switch */
+.m-colorpicker__mode-switch {
+    margin-bottom: var(--m-space-1);
+}
+
+/* Gradient Bar */
+.m-colorpicker__gradient-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--m-space-2);
+}
+
+.m-colorpicker__gradient-bar {
+    border: var(--m-border-width) solid var(--m-color-border);
+    border-radius: var(--m-radius-sm);
+    cursor: pointer;
+    height: 24px;
+    position: relative;
+    touch-action: none;
+    user-select: none;
+}
+
+.m-colorpicker__gradient-stop {
+    border: 2px solid #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 20%), 0 2px 4px rgb(0 0 0 / 20%);
+    box-sizing: border-box;
+    cursor: grab;
+    height: 16px;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 16px;
+}
+
+.m-colorpicker__gradient-stop:active {
+    cursor: grabbing;
+}
+
+.m-colorpicker__gradient-stop--active {
+    box-shadow: 0 0 0 2px var(--m-color-primary), 0 2px 4px rgb(0 0 0 / 20%);
+    z-index: 1;
+}
+
+.m-colorpicker__gradient-stops-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--m-space-1);
+    max-height: 120px;
+    overflow-y: auto;
+}
+
+.m-colorpicker__gradient-stop-item {
+    align-items: center;
+    border: var(--m-border-width) solid transparent;
+    border-radius: var(--m-radius-sm);
+    cursor: pointer;
+    display: flex;
+    gap: var(--m-space-2);
+    padding: var(--m-space-1) var(--m-space-2);
+    transition: all var(--m-motion-fast) var(--m-motion-ease);
+}
+
+.m-colorpicker__gradient-stop-item:hover {
+    background: var(--m-color-surface-secondary, rgb(0 0 0 / 4%));
+}
+
+.m-colorpicker__gradient-stop-item--active {
+    background: var(--m-color-primary-light, rgb(22 119 255 / 10%));
+    border-color: var(--m-color-primary);
+}
+
+.m-colorpicker__gradient-stop-color {
+    border: 1px solid rgb(0 0 0 / 10%);
+    border-radius: var(--m-radius-sm);
+    display: inline-block;
+    height: 16px;
+    width: 16px;
+}
+
+.m-colorpicker__gradient-stop-pos {
+    color: var(--m-color-text-muted);
+    flex: 1;
+    font-size: var(--m-font-size-xs);
+    font-variant-numeric: tabular-nums;
+}
+
+.m-colorpicker__gradient-stop-delete {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-text-muted);
+    cursor: pointer;
+    display: flex;
+    height: 20px;
+    justify-content: center;
+    padding: 0;
+    width: 20px;
+}
+
+.m-colorpicker__gradient-stop-delete:hover:not(:disabled) {
+    background: rgb(0 0 0 / 8%);
+    color: var(--m-color-danger);
+}
+
+.m-colorpicker__gradient-stop-delete:disabled {
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
+}
+
+/* Gradient Options */
+.m-colorpicker__gradient-options {
+    align-items: center;
+    display: flex;
+    gap: var(--m-space-2);
+}
+
+.m-colorpicker__gradient-options > * {
+    flex: 0 0 auto;
+}
+
+.m-colorpicker__gradient-options .m-select__control {
+    width: 90px;
+}
+
+.m-colorpicker__gradient-options .m-inputnumber {
+    width: 70px;
+}
+
+.m-colorpicker__gradient-options .m-inputnumber .m-inputnumber__input-wrap {
+    width: 100%;
+}
+
+.m-colorpicker__gradient-angle-unit {
+    color: var(--m-color-text-muted);
+    font-size: var(--m-font-size-xs);
 }