@uzum-tech/ui 1.4.1 → 1.5.0

package/lib/steps/src/Steps.d.ts

@@ -1,8 +1,8 @@
 import { type PropType, ExtractPropTypes, Ref, Slots } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import type { ExtractPublicPropTypes } from '../../_utils';
-import type { StepsTheme } from '../styles';
 import { OnUpdateValue, StepsStatus, StepsVariant } from './interface';
+import type { StepsTheme } from '../styles';
 export declare const stepsProps: {
     current: NumberConstructor;
     status: {
@@ -23,16 +23,21 @@ export declare const stepsProps: {
     theme: PropType<import("../../_mixins").Theme<"Steps", {
         stepHeaderFontSizeSmall: string;
         stepHeaderFontSizeMedium: string;
+        stepHeaderFontSizeLarge: string;
         indicatorIndexFontSizeSmall: string;
         indicatorIndexFontSizeMedium: string;
         indicatorSizeSmall: string;
         indicatorSizeMedium: string;
+        indicatorSizeDotted: string;
         indicatorIconSizeSmall: string;
         indicatorIconSizeMedium: string;
+        indicatorIconSizeOutline: string;
         indicatorIconColorProcess: string;
         indicatorIconColorWait: string;
         indicatorIconColorFinish: string;
         indicatorIconColorError: string;
+        indicatorIconColorOutline: string;
+        indicatorIconColorFinishDotted: string;
         stepHeaderFontWeight: string;
         indicatorTextColorProcess: string;
         indicatorTextColorWait: string;
@@ -42,36 +47,50 @@ export declare const stepsProps: {
         indicatorBorderColorWait: string;
         indicatorBorderColorFinish: string;
         indicatorBorderColorError: string;
+        indicatorBorderColorFinishOutline: string;
+        indicatorBorderRadiusOutline: string;
+        indicatorBorderRadiusFinishOutline: string;
         indicatorColorProcess: string;
         indicatorColorWait: string;
         indicatorColorFinish: string;
         indicatorColorError: string;
+        indicatorColorDotted: string;
+        indicatorBackgroundFinishOutline: string;
         splitorColorProcess: string;
         splitorColorWait: string;
         splitorColorFinish: string;
         splitorColorError: string;
+        splitorColorFinishDotted: string;
+        splitorColorDotted: string;
         headerTextColorProcess: string;
         headerTextColorWait: string;
         headerTextColorFinish: string;
         headerTextColorError: string;
         descriptionTextColorProcess: string;
         descriptionTextColorWait: string;
+        descriptionTextColorDotted: string;
         descriptionTextColorFinish: string;
         descriptionTextColorError: string;
+        stepHeight: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Steps", {
         stepHeaderFontSizeSmall: string;
         stepHeaderFontSizeMedium: string;
+        stepHeaderFontSizeLarge: string;
         indicatorIndexFontSizeSmall: string;
         indicatorIndexFontSizeMedium: string;
         indicatorSizeSmall: string;
         indicatorSizeMedium: string;
+        indicatorSizeDotted: string;
         indicatorIconSizeSmall: string;
         indicatorIconSizeMedium: string;
+        indicatorIconSizeOutline: string;
         indicatorIconColorProcess: string;
         indicatorIconColorWait: string;
         indicatorIconColorFinish: string;
         indicatorIconColorError: string;
+        indicatorIconColorOutline: string;
+        indicatorIconColorFinishDotted: string;
         stepHeaderFontWeight: string;
         indicatorTextColorProcess: string;
         indicatorTextColorWait: string;
@@ -81,36 +100,50 @@ export declare const stepsProps: {
         indicatorBorderColorWait: string;
         indicatorBorderColorFinish: string;
         indicatorBorderColorError: string;
+        indicatorBorderColorFinishOutline: string;
+        indicatorBorderRadiusOutline: string;
+        indicatorBorderRadiusFinishOutline: string;
         indicatorColorProcess: string;
         indicatorColorWait: string;
         indicatorColorFinish: string;
         indicatorColorError: string;
+        indicatorColorDotted: string;
+        indicatorBackgroundFinishOutline: string;
         splitorColorProcess: string;
         splitorColorWait: string;
         splitorColorFinish: string;
         splitorColorError: string;
+        splitorColorFinishDotted: string;
+        splitorColorDotted: string;
         headerTextColorProcess: string;
         headerTextColorWait: string;
         headerTextColorFinish: string;
         headerTextColorError: string;
         descriptionTextColorProcess: string;
         descriptionTextColorWait: string;
+        descriptionTextColorDotted: string;
         descriptionTextColorFinish: string;
         descriptionTextColorError: string;
+        stepHeight: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Steps", {
         stepHeaderFontSizeSmall: string;
         stepHeaderFontSizeMedium: string;
+        stepHeaderFontSizeLarge: string;
         indicatorIndexFontSizeSmall: string;
         indicatorIndexFontSizeMedium: string;
         indicatorSizeSmall: string;
         indicatorSizeMedium: string;
+        indicatorSizeDotted: string;
         indicatorIconSizeSmall: string;
         indicatorIconSizeMedium: string;
+        indicatorIconSizeOutline: string;
         indicatorIconColorProcess: string;
         indicatorIconColorWait: string;
         indicatorIconColorFinish: string;
         indicatorIconColorError: string;
+        indicatorIconColorOutline: string;
+        indicatorIconColorFinishDotted: string;
         stepHeaderFontWeight: string;
         indicatorTextColorProcess: string;
         indicatorTextColorWait: string;
@@ -120,22 +153,31 @@ export declare const stepsProps: {
         indicatorBorderColorWait: string;
         indicatorBorderColorFinish: string;
         indicatorBorderColorError: string;
+        indicatorBorderColorFinishOutline: string;
+        indicatorBorderRadiusOutline: string;
+        indicatorBorderRadiusFinishOutline: string;
         indicatorColorProcess: string;
         indicatorColorWait: string;
         indicatorColorFinish: string;
         indicatorColorError: string;
+        indicatorColorDotted: string;
+        indicatorBackgroundFinishOutline: string;
         splitorColorProcess: string;
         splitorColorWait: string;
         splitorColorFinish: string;
         splitorColorError: string;
+        splitorColorFinishDotted: string;
+        splitorColorDotted: string;
         headerTextColorProcess: string;
         headerTextColorWait: string;
         headerTextColorFinish: string;
         headerTextColorError: string;
         descriptionTextColorProcess: string;
         descriptionTextColorWait: string;
+        descriptionTextColorDotted: string;
         descriptionTextColorFinish: string;
         descriptionTextColorError: string;
+        stepHeight: string;
     }, any>>>;
 };
 export type StepsProps = ExtractPublicPropTypes<typeof stepsProps>;
@@ -166,16 +208,21 @@ declare const _default: import("vue").DefineComponent<{
     theme: PropType<import("../../_mixins").Theme<"Steps", {
         stepHeaderFontSizeSmall: string;
         stepHeaderFontSizeMedium: string;
+        stepHeaderFontSizeLarge: string;
         indicatorIndexFontSizeSmall: string;
         indicatorIndexFontSizeMedium: string;
         indicatorSizeSmall: string;
         indicatorSizeMedium: string;
+        indicatorSizeDotted: string;
         indicatorIconSizeSmall: string;
         indicatorIconSizeMedium: string;
+        indicatorIconSizeOutline: string;
         indicatorIconColorProcess: string;
         indicatorIconColorWait: string;
         indicatorIconColorFinish: string;
         indicatorIconColorError: string;
+        indicatorIconColorOutline: string;
+        indicatorIconColorFinishDotted: string;
         stepHeaderFontWeight: string;
         indicatorTextColorProcess: string;
         indicatorTextColorWait: string;
@@ -185,36 +232,50 @@ declare const _default: import("vue").DefineComponent<{
         indicatorBorderColorWait: string;
         indicatorBorderColorFinish: string;
         indicatorBorderColorError: string;
+        indicatorBorderColorFinishOutline: string;
+        indicatorBorderRadiusOutline: string;
+        indicatorBorderRadiusFinishOutline: string;
         indicatorColorProcess: string;
         indicatorColorWait: string;
         indicatorColorFinish: string;
         indicatorColorError: string;
+        indicatorColorDotted: string;
+        indicatorBackgroundFinishOutline: string;
         splitorColorProcess: string;
         splitorColorWait: string;
         splitorColorFinish: string;
         splitorColorError: string;
+        splitorColorFinishDotted: string;
+        splitorColorDotted: string;
         headerTextColorProcess: string;
         headerTextColorWait: string;
         headerTextColorFinish: string;
         headerTextColorError: string;
         descriptionTextColorProcess: string;
         descriptionTextColorWait: string;
+        descriptionTextColorDotted: string;
         descriptionTextColorFinish: string;
         descriptionTextColorError: string;
+        stepHeight: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Steps", {
         stepHeaderFontSizeSmall: string;
         stepHeaderFontSizeMedium: string;
+        stepHeaderFontSizeLarge: string;
         indicatorIndexFontSizeSmall: string;
         indicatorIndexFontSizeMedium: string;
         indicatorSizeSmall: string;
         indicatorSizeMedium: string;
+        indicatorSizeDotted: string;
         indicatorIconSizeSmall: string;
         indicatorIconSizeMedium: string;
+        indicatorIconSizeOutline: string;
         indicatorIconColorProcess: string;
         indicatorIconColorWait: string;
         indicatorIconColorFinish: string;
         indicatorIconColorError: string;
+        indicatorIconColorOutline: string;
+        indicatorIconColorFinishDotted: string;
         stepHeaderFontWeight: string;
         indicatorTextColorProcess: string;
         indicatorTextColorWait: string;
@@ -224,36 +285,50 @@ declare const _default: import("vue").DefineComponent<{
         indicatorBorderColorWait: string;
         indicatorBorderColorFinish: string;
         indicatorBorderColorError: string;
+        indicatorBorderColorFinishOutline: string;
+        indicatorBorderRadiusOutline: string;
+        indicatorBorderRadiusFinishOutline: string;
         indicatorColorProcess: string;
         indicatorColorWait: string;
         indicatorColorFinish: string;
         indicatorColorError: string;
+        indicatorColorDotted: string;
+        indicatorBackgroundFinishOutline: string;
         splitorColorProcess: string;
         splitorColorWait: string;
         splitorColorFinish: string;
         splitorColorError: string;
+        splitorColorFinishDotted: string;
+        splitorColorDotted: string;
         headerTextColorProcess: string;
         headerTextColorWait: string;
         headerTextColorFinish: string;
         headerTextColorError: string;
         descriptionTextColorProcess: string;
         descriptionTextColorWait: string;
+        descriptionTextColorDotted: string;
         descriptionTextColorFinish: string;
         descriptionTextColorError: string;
+        stepHeight: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Steps", {
         stepHeaderFontSizeSmall: string;
         stepHeaderFontSizeMedium: string;
+        stepHeaderFontSizeLarge: string;
         indicatorIndexFontSizeSmall: string;
         indicatorIndexFontSizeMedium: string;
         indicatorSizeSmall: string;
         indicatorSizeMedium: string;
+        indicatorSizeDotted: string;
         indicatorIconSizeSmall: string;
         indicatorIconSizeMedium: string;
+        indicatorIconSizeOutline: string;
         indicatorIconColorProcess: string;
         indicatorIconColorWait: string;
         indicatorIconColorFinish: string;
         indicatorIconColorError: string;
+        indicatorIconColorOutline: string;
+        indicatorIconColorFinishDotted: string;
         stepHeaderFontWeight: string;
         indicatorTextColorProcess: string;
         indicatorTextColorWait: string;
@@ -263,22 +338,31 @@ declare const _default: import("vue").DefineComponent<{
         indicatorBorderColorWait: string;
         indicatorBorderColorFinish: string;
         indicatorBorderColorError: string;
+        indicatorBorderColorFinishOutline: string;
+        indicatorBorderRadiusOutline: string;
+        indicatorBorderRadiusFinishOutline: string;
         indicatorColorProcess: string;
         indicatorColorWait: string;
         indicatorColorFinish: string;
         indicatorColorError: string;
+        indicatorColorDotted: string;
+        indicatorBackgroundFinishOutline: string;
         splitorColorProcess: string;
         splitorColorWait: string;
         splitorColorFinish: string;
         splitorColorError: string;
+        splitorColorFinishDotted: string;
+        splitorColorDotted: string;
         headerTextColorProcess: string;
         headerTextColorWait: string;
         headerTextColorFinish: string;
         headerTextColorError: string;
         descriptionTextColorProcess: string;
         descriptionTextColorWait: string;
+        descriptionTextColorDotted: string;
         descriptionTextColorFinish: string;
         descriptionTextColorError: string;
+        stepHeight: string;
     }, any>>>;
 }, {
     mergedClsPrefix: Ref<string>;
@@ -303,16 +387,21 @@ declare const _default: import("vue").DefineComponent<{
     theme: PropType<import("../../_mixins").Theme<"Steps", {
         stepHeaderFontSizeSmall: string;
         stepHeaderFontSizeMedium: string;
+        stepHeaderFontSizeLarge: string;
         indicatorIndexFontSizeSmall: string;
         indicatorIndexFontSizeMedium: string;
         indicatorSizeSmall: string;
         indicatorSizeMedium: string;
+        indicatorSizeDotted: string;
         indicatorIconSizeSmall: string;
         indicatorIconSizeMedium: string;
+        indicatorIconSizeOutline: string;
         indicatorIconColorProcess: string;
         indicatorIconColorWait: string;
         indicatorIconColorFinish: string;
         indicatorIconColorError: string;
+        indicatorIconColorOutline: string;
+        indicatorIconColorFinishDotted: string;
         stepHeaderFontWeight: string;
         indicatorTextColorProcess: string;
         indicatorTextColorWait: string;
@@ -322,36 +411,50 @@ declare const _default: import("vue").DefineComponent<{
         indicatorBorderColorWait: string;
         indicatorBorderColorFinish: string;
         indicatorBorderColorError: string;
+        indicatorBorderColorFinishOutline: string;
+        indicatorBorderRadiusOutline: string;
+        indicatorBorderRadiusFinishOutline: string;
         indicatorColorProcess: string;
         indicatorColorWait: string;
         indicatorColorFinish: string;
         indicatorColorError: string;
+        indicatorColorDotted: string;
+        indicatorBackgroundFinishOutline: string;
         splitorColorProcess: string;
         splitorColorWait: string;
         splitorColorFinish: string;
         splitorColorError: string;
+        splitorColorFinishDotted: string;
+        splitorColorDotted: string;
         headerTextColorProcess: string;
         headerTextColorWait: string;
         headerTextColorFinish: string;
         headerTextColorError: string;
         descriptionTextColorProcess: string;
         descriptionTextColorWait: string;
+        descriptionTextColorDotted: string;
         descriptionTextColorFinish: string;
         descriptionTextColorError: string;
+        stepHeight: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Steps", {
         stepHeaderFontSizeSmall: string;
         stepHeaderFontSizeMedium: string;
+        stepHeaderFontSizeLarge: string;
         indicatorIndexFontSizeSmall: string;
         indicatorIndexFontSizeMedium: string;
         indicatorSizeSmall: string;
         indicatorSizeMedium: string;
+        indicatorSizeDotted: string;
         indicatorIconSizeSmall: string;
         indicatorIconSizeMedium: string;
+        indicatorIconSizeOutline: string;
         indicatorIconColorProcess: string;
         indicatorIconColorWait: string;
         indicatorIconColorFinish: string;
         indicatorIconColorError: string;
+        indicatorIconColorOutline: string;
+        indicatorIconColorFinishDotted: string;
         stepHeaderFontWeight: string;
         indicatorTextColorProcess: string;
         indicatorTextColorWait: string;
@@ -361,36 +464,50 @@ declare const _default: import("vue").DefineComponent<{
         indicatorBorderColorWait: string;
         indicatorBorderColorFinish: string;
         indicatorBorderColorError: string;
+        indicatorBorderColorFinishOutline: string;
+        indicatorBorderRadiusOutline: string;
+        indicatorBorderRadiusFinishOutline: string;
         indicatorColorProcess: string;
         indicatorColorWait: string;
         indicatorColorFinish: string;
         indicatorColorError: string;
+        indicatorColorDotted: string;
+        indicatorBackgroundFinishOutline: string;
         splitorColorProcess: string;
         splitorColorWait: string;
         splitorColorFinish: string;
         splitorColorError: string;
+        splitorColorFinishDotted: string;
+        splitorColorDotted: string;
         headerTextColorProcess: string;
         headerTextColorWait: string;
         headerTextColorFinish: string;
         headerTextColorError: string;
         descriptionTextColorProcess: string;
         descriptionTextColorWait: string;
+        descriptionTextColorDotted: string;
         descriptionTextColorFinish: string;
         descriptionTextColorError: string;
+        stepHeight: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Steps", {
         stepHeaderFontSizeSmall: string;
         stepHeaderFontSizeMedium: string;
+        stepHeaderFontSizeLarge: string;
         indicatorIndexFontSizeSmall: string;
         indicatorIndexFontSizeMedium: string;
         indicatorSizeSmall: string;
         indicatorSizeMedium: string;
+        indicatorSizeDotted: string;
         indicatorIconSizeSmall: string;
         indicatorIconSizeMedium: string;
+        indicatorIconSizeOutline: string;
         indicatorIconColorProcess: string;
         indicatorIconColorWait: string;
         indicatorIconColorFinish: string;
         indicatorIconColorError: string;
+        indicatorIconColorOutline: string;
+        indicatorIconColorFinishDotted: string;
         stepHeaderFontWeight: string;
         indicatorTextColorProcess: string;
         indicatorTextColorWait: string;
@@ -400,22 +517,31 @@ declare const _default: import("vue").DefineComponent<{
         indicatorBorderColorWait: string;
         indicatorBorderColorFinish: string;
         indicatorBorderColorError: string;
+        indicatorBorderColorFinishOutline: string;
+        indicatorBorderRadiusOutline: string;
+        indicatorBorderRadiusFinishOutline: string;
         indicatorColorProcess: string;
         indicatorColorWait: string;
         indicatorColorFinish: string;
         indicatorColorError: string;
+        indicatorColorDotted: string;
+        indicatorBackgroundFinishOutline: string;
         splitorColorProcess: string;
         splitorColorWait: string;
         splitorColorFinish: string;
         splitorColorError: string;
+        splitorColorFinishDotted: string;
+        splitorColorDotted: string;
         headerTextColorProcess: string;
         headerTextColorWait: string;
         headerTextColorFinish: string;
         headerTextColorError: string;
         descriptionTextColorProcess: string;
         descriptionTextColorWait: string;
+        descriptionTextColorDotted: string;
         descriptionTextColorFinish: string;
         descriptionTextColorError: string;
+        stepHeight: string;
     }, any>>>;
 }>>, {
     size: "small" | "medium";

package/lib/steps/src/Steps.js

@@ -7,6 +7,7 @@ exports.stepsInjectionKey = exports.stepsProps = void 0;
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
+const interface_1 = require("./interface");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 function stepWithIndex(step, i) {
@@ -51,11 +52,13 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
+        var _a, _b;
         const { mergedClsPrefix } = this;
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-steps`,
+                `${mergedClsPrefix}-steps--${this.variant}-variant`,
                 this.rtlEnabled && `${mergedClsPrefix}-steps--rtl`,
-                (this.vertical || this.variant === 'history') &&
+                ((_b = (_a = interface_1.variantConfigs[this.variant]) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : this.vertical) &&
                     `${mergedClsPrefix}-steps--vertical`
             ] }, stepsWithIndex((0, _utils_1.flatten)((0, _utils_1.getSlot)(this)))));
     }

package/lib/steps/src/interface.d.ts

@@ -1,13 +1,21 @@
 import { VNodeChild } from 'vue';
 import { MaybeArray } from '../../_utils';
 export type StepsStatus = 'process' | 'finish' | 'error' | 'wait';
-export type StepsVariant = 'default' | 'history';
+export type StepsVariant = 'default' | 'history' | 'outline' | 'dotted';
 export type OnUpdateValue = MaybeArray<(current: number) => void>;
+export interface VariantConfig {
+    rendersSplitor?: boolean;
+    vertical?: boolean;
+    showDescription?: boolean;
+}
+export declare const defaultVariantConfig: Required<VariantConfig>;
+export declare const variantConfigs: Partial<Record<StepsVariant, VariantConfig>>;
 export type IconRenderer = {
     [K in StepsVariant]: Record<string, () => VNodeChild | null>;
 };
 export interface VariantBehaviors {
     variant: StepsVariant;
-    isVerticalOrHistory: boolean;
+    isVertical: boolean;
     shouldRenderSplitor: boolean;
+    showDescription: boolean;
 }

package/lib/steps/src/interface.js

@@ -1,2 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.variantConfigs = exports.defaultVariantConfig = void 0;
+exports.defaultVariantConfig = {
+    rendersSplitor: true,
+    vertical: false,
+    showDescription: true
+};
+exports.variantConfigs = {
+    history: { vertical: true, rendersSplitor: true },
+    outline: { rendersSplitor: false, showDescription: false },
+    dotted: { rendersSplitor: true, showDescription: true }
+};

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

@@ -19,16 +19,117 @@ const icon_switch_cssr_1 = require("../../../_styles/transitions/icon-switch.css
 // --u-step-header-font-size
 // --u-step-header-font-weight
 // --u-step-icon-color
+// --u-indicator-border-radius--outline
+// --u-indicator-border-radius-finish--outline
+// --u-indicator-background-finish--outline
+// --u-indicator-icon-color--outline
+// --u-indicator-icon-color-finish--outline
+// --u-indicator-icon-size--outline
+// --u-indicator-index-font-size--outline
+// --u-step-header-font-size--dotted
+// --u-description-text-color--dotted
+// --u-indicator-color--dotted
+// --u-splitor-color--dotted
+// --u-splitor-color-finish--dotted
+// --u-indicator-size--dotted
+// --u-indicator-color-finish--dotted
 exports.default = (0, cssr_1.cB)('steps', `
  width: 100%;
  display: flex;
-`, [(0, cssr_1.cB)('step', `
+`, [(0, cssr_1.cM)('outline-variant', `
+ gap: 16px;
+ width: fit-content;
+ `), (0, cssr_1.cB)('step', `
  position: relative;
  display: flex;
  flex: 1;
  `, [(0, cssr_1.cM)('disabled', 'cursor: not-allowed'), (0, cssr_1.cM)('clickable', `
  cursor: pointer;
- `), (0, cssr_1.c)('&:last-child', [(0, cssr_1.cB)('step-splitor', 'display: none;')])]), (0, cssr_1.cB)('step-splitor', `
+ `), (0, cssr_1.c)('&:last-child', [(0, cssr_1.cB)('step-splitor', 'display: none;')]), (0, cssr_1.cM)('outline-variant', [(0, cssr_1.c)('&', `
+ box-shadow: 0 0 0 2px var(--u-splitor-color);
+ display: flex;
+ height: var(--u-step-height);
+ padding: 0 12px 0 8px;
+ align-items: center;
+ gap: 12px; 
+ border-radius: var(--u-indicator-border-radius--outline);
+ `), (0, cssr_1.cB)('step-content-header', `
+ margin: 0px;
+ `), (0, cssr_1.c)('>', [(0, cssr_1.cB)('step-indicator', `
+ box-shadow: none;
+ border: none;
+ `, [(0, cssr_1.cB)('step-indicator-slot', `
+ `, [(0, cssr_1.cE)('index', `
+ font-size: var(--u-indicator-index-font-size--outline);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ `), (0, cssr_1.cB)('base-icon', `
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ `)])])]), (0, cssr_1.cM)('process-status', [(0, cssr_1.cB)('step-indicator', `
+ background-color: var(--u-indicator-icon-color--outline);
+ `, [(0, cssr_1.cB)('step-indicator-slot', [(0, cssr_1.cE)('index', `
+ color: var(--u-indicator-text-color--outline);
+ `), (0, cssr_1.cB)('base-icon', `
+ color: var(--u-indicator-icon-color--outline);
+ `)])])]), (0, cssr_1.cM)('finish-status', [`
+ box-shadow: 0 0 0 2px var(--u-indicator-border-color-finish--outline);
+ `, (0, cssr_1.c)('>', [(0, cssr_1.cB)('step-indicator', `
+ border-radius: var(--u-indicator-border-radius-finish--outline);
+ background-color: var(--u-indicator-background-finish--outline);
+ `, [(0, cssr_1.cB)('step-indicator-slot', `
+ height: var(--u-indicator-icon-size--outline);
+ width: var(--u-indicator-icon-size--outline);
+ font-size: var(--u-indicator-icon-size--outline);
+ line-height: var(--u-indicator-icon-size--outline);
+ `, [(0, cssr_1.cB)('base-icon', `
+ color: var(--u-indicator-icon-color-finish--outline);
+ `)])])])])]), (0, cssr_1.cM)('dotted-variant', [(0, cssr_1.c)('&', `
+ align-items: baseline;
+ `, [(0, cssr_1.cM)('process-status', [(0, cssr_1.cB)('step-indicator', [(0, cssr_1.cB)('step-indicator-slot', `
+ background-color: var(--u-indicator-color);
+ `), (0, cssr_1.cB)('step-splitor', `
+ background-color: var(--u-indicator-color);
+ `)])]), (0, cssr_1.cM)('finish-status', [(0, cssr_1.cB)('step-indicator', [(0, cssr_1.cB)('step-indicator-slot', `
+ background-color: var(--u-indicator-color-finish--dotted);
+ `), (0, cssr_1.cB)('step-splitor', `
+ background-color: var(--u-splitor-color-finish--dotted);
+ `)])]), (0, cssr_1.cM)('error-status', [(0, cssr_1.cB)('step-indicator', [(0, cssr_1.cB)('step-indicator-slot', `
+ background-color: var(--u-indicator-color);
+ `), (0, cssr_1.cB)('step-splitor', `
+ background-color: var(--u-splitor-color);
+ `)])])]), (0, cssr_1.cB)('step', `
+ align-items: baseline;
+ `), (0, cssr_1.cB)('step-indicator', `
+ background-color: transparent;
+ box-shadow: none;
+ width: var(--u-indicator-size--dotted);
+ height: var(--u-indicator-size--dotted);
+ `, [(0, cssr_1.cB)('step-indicator-slot', `
+ background-color: var(--u-indicator-color--dotted);
+ border-radius: 50%;
+ height: 10px;
+ width: 10px;
+ `)]), (0, cssr_1.cB)('step-content', `
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ margin-left: 6px;
+ `, [(0, cssr_1.cB)('step-content-header', `
+ margin: 0;
+ font-size: var(--u-step-header-font-size--dotted);
+ font-weight: 500;
+ `), (0, cssr_1.cE)('description', `
+ margin-left: 0;
+ color: var(--u-description-text-color--dotted);
+ font-size: var(--u-step-header-font-size--dotted);
+ font-weight: 500;
+ line-height: 24px;
+ `)])])]), (0, cssr_1.cB)('step-splitor', `
  background-color: var(--u-splitor-color);
  margin-top: calc(var(--u-step-header-font-size) / 2);
  height: 6px;
@@ -142,4 +243,15 @@ exports.default = (0, cssr_1.cB)('steps', `
  margin: 0 !important;
  left: calc(var(--u-indicator-size) / 2);
  height: calc(100% - var(--u-indicator-size));
- `)])]), (0, cssr_1.cB)('step-content', [(0, cssr_1.cE)('description', 'margin-top: 8px;')])])])])])]);
+ `)])]), (0, cssr_1.cB)('step-content', [(0, cssr_1.cE)('description', 'margin-top: 8px;')])])])]), (0, cssr_1.cM)('outline-variant', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('step', `
+ margin: 0;
+ padding: 0 12px 0 8px;
+ height: var(--u-step-height);
+ flex: auto;
+ `)])]), (0, cssr_1.cM)('dotted-variant', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('step', [(0, cssr_1.cB)('step-splitor', `
+ background-color: var(--u-splitor-color--dotted);
+ bottom: -8px;
+ width: 2px;
+ left: calc(var(--u-indicator-size--dotted) / 2 - 1px);
+ height: calc(100% - var(--u-indicator-size--dotted)/2 - 10px);
+ `)])])])])]);