@uzum-tech/ui 1.8.1 → 1.9.0

package/lib/_internal/selection/src/Selection.d.ts

@@ -608,7 +608,9 @@ declare const _default: import("vue").DefineComponent<{
     singleElRef: import("vue").Ref<HTMLElement | null>;
     patternInputWrapperRef: import("vue").Ref<HTMLElement | null>;
     overflowRef: import("vue").Ref<{
-        sync: () => void;
+        sync: (options: {
+            showAllItemsBeforeCalculate: boolean;
+        }) => void;
     } | null>;
     inputTagElRef: import("vue").Ref<HTMLElement | null>;
     handleMouseDown: (e: MouseEvent) => void;

package/lib/_internal/selection/src/Selection.js

@@ -113,7 +113,9 @@ exports.default = (0, vue_1.defineComponent)({
                 if (patternInputEl) {
                     patternInputEl.style.width = `${patternInputMirrorEl.offsetWidth}px`;
                     if (props.maxTagCount !== 'responsive') {
-                        (_a = overflowRef.value) === null || _a === void 0 ? void 0 : _a.sync();
+                        (_a = overflowRef.value) === null || _a === void 0 ? void 0 : _a.sync({
+                            showAllItemsBeforeCalculate: false
+                        });
                     }
                 }
             }

package/lib/_utils/css/index.d.ts

@@ -1,3 +1,4 @@
 export { formatLength } from './format-length';
 export { color2Class } from './color-to-class';
 export { resolveSize } from './normalize-size';
+export { rtlInset } from './rtl-inset';

package/lib/_utils/css/index.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveSize = exports.color2Class = exports.formatLength = void 0;
+exports.rtlInset = exports.resolveSize = exports.color2Class = exports.formatLength = void 0;
 var format_length_1 = require("./format-length");
 Object.defineProperty(exports, "formatLength", { enumerable: true, get: function () { return format_length_1.formatLength; } });
 var color_to_class_1 = require("./color-to-class");
 Object.defineProperty(exports, "color2Class", { enumerable: true, get: function () { return color_to_class_1.color2Class; } });
 var normalize_size_1 = require("./normalize-size");
 Object.defineProperty(exports, "resolveSize", { enumerable: true, get: function () { return normalize_size_1.resolveSize; } });
+var rtl_inset_1 = require("./rtl-inset");
+Object.defineProperty(exports, "rtlInset", { enumerable: true, get: function () { return rtl_inset_1.rtlInset; } });

package/lib/_utils/css/rtl-inset.d.ts

@@ -0,0 +1 @@
+export declare function rtlInset(inset: string): string;

package/lib/_utils/css/rtl-inset.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rtlInset = rtlInset;
+const seemly_1 = require("seemly");
+function rtlInset(inset) {
+    const { left, right, top, bottom } = (0, seemly_1.getPadding)(inset);
+    return `${top} ${left} ${bottom} ${right}`;
+}

package/lib/_utils/index.d.ts

@@ -2,7 +2,7 @@ export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, g
 export type { MaybeArray } from './vue';
 export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute, isArrayShallowEqual } from './uzum';
 export type { ExtractPublicPropTypes, ExtractInternalPropTypes, Mutable } from './uzum';
-export { formatLength, color2Class, resolveSize } from './css';
+export { formatLength, color2Class, resolveSize, rtlInset } from './css';
 export { createKey } from './cssr';
 export { isJsdom } from './env/is-jsdom';
 export { isBrowser } from './env/is-browser';

package/lib/_utils/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createStylesWithSingleColor = exports.markEventEffectPerformed = exports.eventEffectNotPerformed = exports.isBrowser = exports.isJsdom = exports.createKey = exports.resolveSize = exports.color2Class = exports.formatLength = exports.isArrayShallowEqual = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.Wrapper = exports.resolveWrappedSlotWithProps = exports.isNodeVShowFalse = exports.mergeEventHandlers = exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
+exports.createStylesWithSingleColor = exports.markEventEffectPerformed = exports.eventEffectNotPerformed = exports.isBrowser = exports.isJsdom = exports.createKey = exports.rtlInset = exports.resolveSize = exports.color2Class = exports.formatLength = exports.isArrayShallowEqual = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.Wrapper = exports.resolveWrappedSlotWithProps = exports.isNodeVShowFalse = exports.mergeEventHandlers = exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
 var vue_1 = require("./vue");
 Object.defineProperty(exports, "call", { enumerable: true, get: function () { return vue_1.call; } });
 Object.defineProperty(exports, "keep", { enumerable: true, get: function () { return vue_1.keep; } });
@@ -48,6 +48,7 @@ var css_1 = require("./css");
 Object.defineProperty(exports, "formatLength", { enumerable: true, get: function () { return css_1.formatLength; } });
 Object.defineProperty(exports, "color2Class", { enumerable: true, get: function () { return css_1.color2Class; } });
 Object.defineProperty(exports, "resolveSize", { enumerable: true, get: function () { return css_1.resolveSize; } });
+Object.defineProperty(exports, "rtlInset", { enumerable: true, get: function () { return css_1.rtlInset; } });
 var cssr_1 = require("./cssr");
 Object.defineProperty(exports, "createKey", { enumerable: true, get: function () { return cssr_1.createKey; } });
 var is_jsdom_1 = require("./env/is-jsdom");

package/lib/auto-complete/src/AutoComplete.d.ts

@@ -100,8 +100,16 @@ export declare const autoCompleteProps: {
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -225,8 +233,16 @@ export declare const autoCompleteProps: {
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -350,8 +366,16 @@ export declare const autoCompleteProps: {
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -533,8 +557,16 @@ declare const _default: import("vue").DefineComponent<{
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -658,8 +690,16 @@ declare const _default: import("vue").DefineComponent<{
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -783,8 +823,16 @@ declare const _default: import("vue").DefineComponent<{
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -952,8 +1000,16 @@ declare const _default: import("vue").DefineComponent<{
                 loadingColor: string;
             }, {
                 Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
                     color: string;
                     colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
                 }, any>;
                 Empty: import("../../_mixins").Theme<"Empty", {
                     iconSizeSmall: string;
@@ -1044,8 +1100,16 @@ declare const _default: import("vue").DefineComponent<{
             InternalSelectMenu?: {
                 peers?: {
                     Scrollbar?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>> | undefined;
                     Empty?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -1177,8 +1241,16 @@ declare const _default: import("vue").DefineComponent<{
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -1302,8 +1374,16 @@ declare const _default: import("vue").DefineComponent<{
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -1427,8 +1507,16 @@ declare const _default: import("vue").DefineComponent<{
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;

package/lib/auto-complete/styles/light.d.ts

@@ -39,8 +39,16 @@ declare const autoCompleteLight: import("../../_mixins").Theme<"AutoComplete", {
         loadingColor: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;

package/lib/back-top/src/BackTop.d.ts

@@ -250,8 +250,8 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }>>, {
     readonly right: string | number;
-    readonly to: string | HTMLElement;
     readonly bottom: string | number;
+    readonly to: string | HTMLElement;
     readonly show: boolean | undefined;
     readonly 'onUpdate:show': Function;
     readonly visibilityHeight: number;

package/lib/button/src/Button.d.ts

@@ -73,16 +73,24 @@ export declare const buttonProps: {
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -284,16 +292,24 @@ export declare const buttonProps: {
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -495,16 +511,24 @@ export declare const buttonProps: {
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -759,16 +783,24 @@ declare const Button: import("vue").DefineComponent<{
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -970,16 +1002,24 @@ declare const Button: import("vue").DefineComponent<{
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -1181,16 +1221,24 @@ declare const Button: import("vue").DefineComponent<{
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -1503,16 +1551,24 @@ declare const Button: import("vue").DefineComponent<{
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -1714,16 +1770,24 @@ declare const Button: import("vue").DefineComponent<{
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -1925,16 +1989,24 @@ declare const Button: import("vue").DefineComponent<{
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;

package/lib/button/src/Button.js

@@ -139,6 +139,7 @@ const Button = (0, vue_1.defineComponent)({
         const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Button', '-button', index_cssr_1.default, styles_1.buttonLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Button', mergedRtlRef, mergedClsPrefixRef);
+        // eslint-disable-next-line complexity
         const cssVarsRef = (0, vue_1.computed)(() => {
             const theme = themeRef.value;
             const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self } = theme;
@@ -187,7 +188,7 @@ const Button = (0, vue_1.defineComponent)({
                         : self[(0, _utils_1.createKey)('textColorTextPressed', mergedType)],
                     '--u-text-color-focus': propTextColor
                         ? (0, index_1.createHoverColor)(propTextColor)
-                        : self[(0, _utils_1.createKey)('textColorTextHover', mergedType)],
+                        : self[(0, _utils_1.createKey)('textColorTextFocus', mergedType)],
                     '--u-text-color-disabled': propTextColor ||
                         self[(0, _utils_1.createKey)('textColorTextDisabled', mergedType)]
                 };
@@ -211,7 +212,7 @@ const Button = (0, vue_1.defineComponent)({
                         : self[(0, _utils_1.createKey)('textColorGhostPressed', mergedType)],
                     '--u-text-color-focus': mergedTextColor
                         ? (0, index_1.createHoverColor)(mergedTextColor)
-                        : self[(0, _utils_1.createKey)('textColorGhostHover', mergedType)],
+                        : self[(0, _utils_1.createKey)('textColorGhostFocus', mergedType)],
                     '--u-text-color-disabled': mergedTextColor ||
                         self[(0, _utils_1.createKey)('textColorGhostDisabled', mergedType)]
                 };
@@ -244,7 +245,7 @@ const Button = (0, vue_1.defineComponent)({
                         ? (0, seemly_1.changeColor)(mergedTextColor, {
                             alpha: Number(self.colorOpacitySecondaryHover)
                         })
-                        : self.colorSecondaryHover,
+                        : self.colorSecondaryFocus,
                     '--u-color-focus-visible': isColoredType
                         ? (0, seemly_1.changeColor)(mergedTextColor, {
                             alpha: +self.colorOpacitySecondaryFocus
@@ -256,7 +257,9 @@ const Button = (0, vue_1.defineComponent)({
                     '--u-text-color-hover': mergedTextColor,
                     '--u-text-color-pressed': mergedTextColor,
                     '--u-text-color-focus': mergedTextColor,
-                    '--u-text-color-disabled': mergedTextColor
+                    '--u-text-color-disabled': isColoredType
+                        ? mergedTextColor
+                        : self.textColorSecondaryDisabled
                 };
             }
             else if (tertiary || quaternary) {
@@ -266,7 +269,7 @@ const Button = (0, vue_1.defineComponent)({
                         ? self.textColorTertiary
                         : self[(0, _utils_1.createKey)('color', mergedType)];
                 const mergedColor = color || typeColor;
-                colorProps['--u-ripple-color'] = '#0000';
+                colorProps['--u-text-color'] = mergedColor;
                 colorProps['--u-text-color'] = mergedColor;
                 colorProps['--u-text-color-hover'] = mergedColor;
                 colorProps['--u-text-color-pressed'] = mergedColor;
@@ -276,7 +279,7 @@ const Button = (0, vue_1.defineComponent)({
                     colorProps['--u-color'] = self.colorTertiary;
                     colorProps['--u-color-hover'] = self.colorTertiaryHover;
                     colorProps['--u-color-pressed'] = self.colorTertiaryPressed;
-                    colorProps['--u-color-focus'] = self.colorTertiaryPressed;
+                    colorProps['--u-color-focus'] = self.colorTertiaryFocus;
                     colorProps['--u-color-disabled'] = self.colorTertiaryDisalbed;
                     colorProps['--u-ripple-color'] = self.colorTertiary;
                     colorProps['--u-text-color'] = self.textColorTextTertiary;
@@ -285,13 +288,16 @@ const Button = (0, vue_1.defineComponent)({
                     colorProps['--u-text-color-focus'] = self.textColorTextTertiary;
                     colorProps['--u-text-color-disabled'] = self.textColorTextTertiary;
                     colorProps['--u-color-focus-visible'] = self.waveColorTertiary;
+                    colorProps['--u-ripple-color'] = self.rippleColorTertiary;
                 }
                 else {
                     colorProps['--u-color'] = self.colorQuaternary;
                     colorProps['--u-color-hover'] = self.colorQuaternaryHover;
                     colorProps['--u-color-pressed'] = self.colorQuaternaryPressed;
-                    colorProps['--u-color-focus'] = self.colorQuaternaryHover;
+                    colorProps['--u-color-focus'] = self.colorQuaternaryFocus;
                     colorProps['--u-color-disabled'] = self.colorQuaternary;
+                    colorProps['--u-ripple-color'] = self.rippleColorQuaternary;
+                    colorProps['--u-color-focus-visible'] = self.waveColorQuaternary;
                 }
             }
             else {

package/lib/button/src/styles/index.cssr.js

@@ -188,8 +188,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
  `), (0, cssr_1.cM)('dashed', [(0, cssr_1.cE)('border, state-border', {
   borderStyle: 'dashed !important'
 })]), (0, cssr_1.cM)('disabled', {
-  cursor: 'not-allowed',
-  opacity: 'var(--u-opacity-disabled)'
+  cursor: 'not-allowed'
 })]), (0, cssr_1.c)('@keyframes button-wave-spread', {
   from: {
     boxShadow: '0 0 0.5px 0 var(--u-ripple-color)'

package/lib/button/styles/light.d.ts

@@ -21,16 +21,24 @@ export declare const self: (vars: ThemeCommonVars) => {
     colorSecondary: string;
     colorSecondaryHover: string;
     colorSecondaryPressed: string;
+    colorSecondaryFocus: string;
+    colorSecondaryDisabled: string;
+    textColorSecondaryDisabled: string;
     waveColorSecondary: string;
     colorTertiary: string;
     colorTertiaryHover: string;
     colorTertiaryPressed: string;
+    colorTertiaryFocus: string;
     colorTertiaryDisalbed: string;
     waveColorTertiary: string;
     textColorTextTertiary: string;
+    rippleColorTertiary: string;
     colorQuaternary: string;
     colorQuaternaryHover: string;
     colorQuaternaryPressed: string;
+    colorQuaternaryFocus: string;
+    rippleColorQuaternary: string;
+    waveColorQuaternary: string;
     color: string;
     colorHover: string;
     colorPressed: string;