@bifrostui/react 2.0.0-beta.2 → 2.0.0-beta.5

package/es/Popover/Popover.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './Popover.less';
 import { PopoverProps } from './Popover.types';
+import './index.less';
 declare const Popover: React.ForwardRefExoticComponent<Omit<PopoverProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Popover;

package/es/Popover/Popover.js

@@ -36,7 +36,7 @@ import {
   throttle
 } from "@bifrostui/utils";
 import Portal from "../Portal";
-import "./Popover.css";
+import "./index.css";
 const prefixCls = "bui-popover";
 const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {

package/{dist/Popover/Popover.css → es/Popover/index.css}

@@ -1,10 +1,14 @@
+:root,
+page,
+xhs-page {
+  --bui-popover-arrow-size: 8PX;
+  --bui-popover-location-position: 8PX;
+  --bui-popover-max-width: 350px;
+  --bui-popover-content-min-width: 30px;
+  --bui-popover-content-padding: 6px 8px;
+}
 .bui-popover {
-  --arrow-size: var(--bui-popover-arrow-size, 8PX);
-  --location-position: var(--bui-popover-location-position, 8PX);
-  --max-width: var(--bui-popover-max-width, 350px);
-  --content-min-width: var(--bui-popover-content-min-width, 30px);
-  --content-padding: var(--bui-popover-content-padding, 6px 8px);
-  max-width: var(--max-width);
+  max-width: var(--bui-popover-max-width);
   font-size: var(--bui-text-size-1);
   position: absolute;
   visibility: hidden;
@@ -16,16 +20,16 @@
   position: absolute;
 }
 .bui-popover .bui-popover-arrow.location-left {
-  left: var(--location-position);
+  left: var(--bui-popover-location-position);
 }
 .bui-popover .bui-popover-arrow.location-right {
-  right: var(--location-position);
+  right: var(--bui-popover-location-position);
 }
 .bui-popover .bui-popover-arrow.location-top {
-  top: var(--location-position);
+  top: var(--bui-popover-location-position);
 }
 .bui-popover .bui-popover-arrow.location-bottom {
-  bottom: var(--location-position);
+  bottom: var(--bui-popover-location-position);
 }
 .bui-popover.popover-top .location-center,
 .bui-popover.popover-bottom .location-center {
@@ -38,48 +42,48 @@
   transform: translateY(-50%);
 }
 .bui-popover.popover-top {
-  padding-bottom: var(--arrow-size);
+  padding-bottom: var(--bui-popover-arrow-size);
 }
 .bui-popover.popover-top .bui-popover-arrow {
-  border-left: var(--arrow-size) solid transparent;
-  border-right: var(--arrow-size) solid transparent;
-  border-top: var(--arrow-size) solid var(--bui-color-bg-view);
+  border-left: var(--bui-popover-arrow-size) solid transparent;
+  border-right: var(--bui-popover-arrow-size) solid transparent;
+  border-top: var(--bui-popover-arrow-size) solid var(--bui-color-bg-view);
   bottom: 0;
 }
 .bui-popover.popover-bottom {
-  padding-top: var(--arrow-size);
+  padding-top: var(--bui-popover-arrow-size);
 }
 .bui-popover.popover-bottom .bui-popover-arrow {
-  border-left: var(--arrow-size) solid transparent;
-  border-right: var(--arrow-size) solid transparent;
-  border-bottom: var(--arrow-size) solid var(--bui-color-bg-view);
+  border-left: var(--bui-popover-arrow-size) solid transparent;
+  border-right: var(--bui-popover-arrow-size) solid transparent;
+  border-bottom: var(--bui-popover-arrow-size) solid var(--bui-color-bg-view);
   top: 0;
 }
 .bui-popover.popover-left {
-  padding-right: var(--arrow-size);
+  padding-right: var(--bui-popover-arrow-size);
 }
 .bui-popover.popover-left .bui-popover-arrow {
-  border-top: var(--arrow-size) solid transparent;
-  border-bottom: var(--arrow-size) solid transparent;
-  border-left: var(--arrow-size) solid var(--bui-color-bg-view);
+  border-top: var(--bui-popover-arrow-size) solid transparent;
+  border-bottom: var(--bui-popover-arrow-size) solid transparent;
+  border-left: var(--bui-popover-arrow-size) solid var(--bui-color-bg-view);
   right: 0;
 }
 .bui-popover.popover-right {
-  padding-left: var(--arrow-size);
+  padding-left: var(--bui-popover-arrow-size);
 }
 .bui-popover.popover-right .bui-popover-arrow {
-  border-top: var(--arrow-size) solid transparent;
-  border-bottom: var(--arrow-size) solid transparent;
-  border-right: var(--arrow-size) solid var(--bui-color-bg-view);
+  border-top: var(--bui-popover-arrow-size) solid transparent;
+  border-bottom: var(--bui-popover-arrow-size) solid transparent;
+  border-right: var(--bui-popover-arrow-size) solid var(--bui-color-bg-view);
   left: 0;
 }
 .bui-popover .bui-popover-title {
   font-weight: var(--bui-font-weight-bold);
 }
 .bui-popover .bui-popover-content {
-  min-width: var(--content-min-width);
+  min-width: var(--bui-popover-content-min-width);
   color: var(--bui-color-fg-muted);
-  padding: var(--content-padding);
+  padding: var(--bui-popover-content-padding);
   text-align: left;
   text-decoration: none;
   word-wrap: break-word;

package/es/Progress/Progress.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ProgressGradient, ProgressProps } from './Progress.types';
-import './Progress.less';
+import './index.less';
 export declare const handleGradient: (strokeColor: ProgressGradient) => {
     backgroundImage: string;
 };

package/es/Progress/Progress.js

@@ -28,7 +28,7 @@ var __objRest = (source, exclude) => {
 };
 import clsx from "clsx";
 import React from "react";
-import "./Progress.css";
+import "./index.css";
 const prefixCls = "bui-progress";
 function validProgress(progress) {
   if (!progress || progress < 0) {

package/es/Progress/index.css

@@ -0,0 +1,28 @@
+:root,
+page,
+xhs-page {
+  --bui-progress-fill-color: var(--bui-color-primary);
+  --bui-progress-trail-color: rgba(156, 156, 165, 0.2);
+  --bui-progress-stroke-width: 8px;
+  --bui-progress-width: 100%;
+  --bui-progress-border-radius: 100px;
+}
+.bui-progress {
+  width: var(--bui-progress-width);
+  font-family: var(--bui-font-family);
+}
+.bui-progress-inner {
+  position: relative;
+  display: inline-block;
+  width: var(--bui-progress-width);
+  overflow: hidden;
+  vertical-align: middle;
+  background-color: var(--bui-progress-trail-color);
+  border-radius: var(--bui-progress-border-radius);
+}
+.bui-progress-bg {
+  position: relative;
+  border-radius: var(--bui-progress-border-radius);
+  background-color: var(--bui-progress-fill-color);
+  height: var(--bui-progress-stroke-width);
+}

package/es/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { RadioProps } from './Radio.types';
-import './Radio.less';
+import './index.less';
 declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Radio;

package/es/Radio/Radio.js

@@ -34,7 +34,7 @@ import clsx from "clsx";
 import React, { forwardRef, useContext } from "react";
 import RadioButtonIcon from "./RadioButtonIcon";
 import RadioContext from "./RadioContext";
-import "./Radio.css";
+import "./index.css";
 const prefixCls = "bui-radio";
 const Radio = forwardRef((props, ref) => {
   const _a = props, {

package/es/Radio/RadioButtonIcon.js

@@ -6,7 +6,12 @@ import clsx from "clsx";
 import React from "react";
 const prefixCls = "bui-radio-btn-icon";
 function RadioButtonIcon(props) {
-  const { checked, size = "medium", color, htmlColor = "#959aa5" } = props;
+  const {
+    checked,
+    size = "medium",
+    color,
+    htmlColor = "var(--bui-color-fg-subtle)"
+  } = props;
   return /* @__PURE__ */ React.createElement(
     "span",
     {

package/es/Radio/RadioGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './Radio.less';
 import { RadioGroupProps } from './Radio.types';
+import './index.less';
 declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default RadioGroup;

package/es/Radio/RadioGroup.js

@@ -29,8 +29,8 @@ var __objRest = (source, exclude) => {
 import { useValue } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { forwardRef } from "react";
-import "./Radio.css";
 import { RadioContextProvider } from "./RadioContext";
+import "./index.css";
 const prefixCls = "bui-radio-group";
 const RadioGroup = forwardRef((props, ref) => {
   const _a = props, {

package/es/Radio/{Radio.css → index.css}

@@ -1,7 +1,11 @@
+:root,
+page,
+xhs-page {
+  --bui-radio-label-color: var(--bui-color-fg-default);
+  --bui-radio-label-font-size: var(--bui-text-size-1);
+  --bui-radio-icon-padding: 5px;
+}
 .bui-radio {
-  --label-color: var(--bui-radio-label-color, var(--bui-color-fg-default));
-  --label-font-size: var(--bui-radio-label-font-size, var(--bui-text-size-1));
-  --icon-padding: var(--bui-radio-icon-padding, 5px);
   display: inline-flex;
   align-items: center;
   position: relative;
@@ -35,12 +39,12 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  padding: var(--icon-padding);
+  padding: var(--bui-radio-icon-padding);
   box-sizing: border-box;
 }
 .bui-radio-label {
-  font-size: var(--label-font-size);
-  color: var(--label-color);
+  font-size: var(--bui-radio-label-font-size);
+  color: var(--bui-radio-label-color);
 }
 .bui-radio-btn-icon {
   position: relative;

package/es/Rating/Rating.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { RatingProps } from './Rating.types';
-import './Rating.less';
+import './index.less';
 declare const Rating: React.ForwardRefExoticComponent<Omit<RatingProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Rating;

package/es/Rating/Rating.js

@@ -30,7 +30,7 @@ import { StarFilledIcon } from "@bifrostui/icons";
 import { useValue } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { forwardRef } from "react";
-import "./Rating.css";
+import "./index.css";
 const classes = {
   root: "bui-rating",
   item: "bui-rating-item",
@@ -42,7 +42,7 @@ const Rating = forwardRef((props, ref) => {
     size = "medium",
     defaultValue,
     allowHalf = false,
-    icon = /* @__PURE__ */ React.createElement(StarFilledIcon, { htmlColor: "#ced1d6" }),
+    icon = /* @__PURE__ */ React.createElement(StarFilledIcon, { color: "disabled" }),
     checkedIcon = /* @__PURE__ */ React.createElement(StarFilledIcon, { color: "warning" }),
     count = 5,
     readOnly = false,

package/es/Rating/{Rating.css → index.css}

@@ -1,3 +1,15 @@
+:root,
+page,
+xhs-page {
+  --bui-rating-xsmall-font-size: var(--bui-text-size-5);
+  --bui-rating-xsmall-margin-right: 0;
+  --bui-rating-small-margin-right: 0.5px;
+  --bui-rating-small-font-size: var(--bui-text-size-1);
+  --bui-rating-margin-right: 1px;
+  --bui-rating-font-size: var(--bui-title-size-3);
+  --bui-rating-large-margin-right: 2px;
+  --bui-rating-large-font-size: 22px;
+}
 .bui-rating {
   --small-margin-right: var(--bui-rating-small-margin-right, 0.5px);
   --medium-margin-right: var(--bui-rating-medium-margin-right, 1px);
@@ -19,19 +31,20 @@
   margin-right: 0;
 }
 .bui-rating-container-xsmall {
-  font-size: var(--bui-text-size-5);
+  font-size: var(--bui-rating-xsmall-font-size);
+  margin-right: var(--bui-rating-xsmall-margin-right);
 }
 .bui-rating-container-small {
-  font-size: var(--bui-text-size-1);
-  margin-right: var(--small-margin-right);
+  font-size: var(--bui-rating-small-font-size);
+  margin-right: var(--bui-rating-small-margin-right);
 }
 .bui-rating-container-medium {
-  font-size: var(--bui-title-size-3);
-  margin-right: var(--medium-margin-right);
+  font-size: var(--bui-rating-font-size);
+  margin-right: var(--bui-rating-margin-right);
 }
 .bui-rating-container-large {
-  font-size: var(--large-font-size);
-  margin-right: var(--large-margin-right);
+  font-size: var(--bui-rating-large-font-size);
+  margin-right: var(--bui-rating-large-margin-right);
 }
 .bui-rating-item {
   display: flex;

package/es/ScrollView/ScrollView.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './ScrollView.less';
+import './index.less';
 import { ScrollViewProps } from './ScrollView.types';
 declare const ScrollView: React.ForwardRefExoticComponent<Omit<ScrollViewProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default ScrollView;

package/es/ScrollView/ScrollView.js

@@ -1,7 +1,7 @@
 import { useForkRef } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { forwardRef, useCallback, useEffect, useRef } from "react";
-import "./ScrollView.css";
+import "./index.css";
 function easeOutScroll(from, to, callback) {
   if (from === to || typeof from !== "number") {
     return;

package/es/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { SelectProps } from './Select.types';
-import './Select.less';
+import './index.less';
 declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Select;

package/es/Select/Select.js

@@ -45,7 +45,7 @@ import Slide from "../Slide";
 import BuiSelectContext from "./selectContext";
 import Backdrop from "../Backdrop";
 import Portal from "../Portal";
-import "./Select.css";
+import "./index.css";
 const prefixCls = "bui-select";
 const defaultPlacement = "bottom";
 const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
@@ -163,13 +163,7 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
       };
     }
   }, []);
-  const defaultIcon = isOpen ? /* @__PURE__ */ React.createElement(CaretUpIcon, { className: `${prefixCls}-selector-icon`, htmlColor: "#9c9ca5" }) : /* @__PURE__ */ React.createElement(
-    CaretDownIcon,
-    {
-      className: `${prefixCls}-selector-icon`,
-      htmlColor: "#9c9ca5"
-    }
-  );
+  const defaultIcon = isOpen ? /* @__PURE__ */ React.createElement(CaretUpIcon, { className: `${prefixCls}-selector-icon`, color: "neutral" }) : /* @__PURE__ */ React.createElement(CaretDownIcon, { className: `${prefixCls}-selector-icon`, color: "neutral" });
   const renderOptions = () => {
     var _a2;
     return /* @__PURE__ */ React.createElement(

package/es/Select/SelectOption.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { SelectOptionProps } from './Select.types';
-import './Select.less';
+import './index.less';
 declare const SelectOption: React.ForwardRefExoticComponent<Omit<SelectOptionProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SelectOption;

package/es/Select/SelectOption.js

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 import clsx from "clsx";
 import React, { useContext, useEffect } from "react";
 import BuiSelectContext from "./selectContext";
-import "./Select.css";
+import "./index.css";
 const prefixCls = "bui-select-option";
 const SelectOption = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {

package/{dist/Select/Select.css → es/Select/index.css}

@@ -1,13 +1,23 @@
+:root,
+page,
+xhs-page {
+  --bui-select-height: 32px;
+  --bui-select-min-width: 100px;
+  --bui-select-font-size: var(--bui-text-size-1);
+  --bui-select-selector-container-padding: 0 14px;
+  --bui-select-option-main-padding: 3px 0;
+  --bui-select-option-padding: 0 14px;
+  --bui-select-option-border-radius: 5px;
+  --bui-select-option-margin: 0 3px;
+  --bui-select-option-height: 32px;
+  --bui-select-option-active-bg-color: #fff2f0;
+}
 .bui-select {
-  --height: var(--bui-select-height, 27px);
-  --mini-width: var(--bui-select-min-width, 100px);
-  --font-size: var(--bui-select-font-size, var(--bui-title-size-3));
-  --padding: var(--bui-select-selector-container, 0 14px);
   position: relative;
   cursor: pointer;
-  height: var(--height);
-  min-width: var(--mini-width);
-  font-size: var(--font-size);
+  height: var(--bui-select-height);
+  min-width: var(--bui-select-min-width);
+  font-size: var(--bui-select-font-size);
   border-radius: 5px;
   background-color: var(--bui-color-bg-view);
   font-family: var(--bui-font-family);
@@ -19,7 +29,7 @@
 .bui-select-selector-container {
   display: flex;
   align-items: center;
-  padding: var(--padding);
+  padding: var(--bui-select-selector-container-padding);
   height: 100%;
 }
 .bui-select-input {
@@ -37,7 +47,7 @@
   justify-content: space-between;
   align-items: center;
   flex: 1;
-  height: var(--height);
+  height: var(--bui-select-height);
   background-color: transparent;
   outline: none;
   border: 0;
@@ -69,29 +79,26 @@
 }
 .bui-select-option-main {
   border-radius: 3px;
-  padding: var(--bui-select-option-container-padding, 3px 0);
+  padding: var(--bui-select-option-main-padding);
   box-shadow: 0 0 0 2px var(--bui-color-bg-default);
   overflow: hidden;
 }
 .bui-select-option {
-  --option-padding: var(--bui-select-option-padding, 0 14px);
-  --option-margin: var(--bui-select-option-margin, 0 3px);
-  --option-height: var(--bui-select-option-height, 27px);
   display: flex;
   align-items: center;
-  height: var(--option-height);
-  padding: var(--option-padding);
-  border-radius: 5px;
-  margin: var(--option-margin);
+  height: var(--bui-select-option-height);
+  padding: var(--bui-select-option-padding);
+  border-radius: var(--bui-select-option-border-radius);
+  margin: var(--bui-select-option-margin);
 }
 .bui-select-option:hover {
-  background-color: var(---bui-select-options-active-bg, #fff2f0);
+  background-color: var(--bui-select-option-active-bg-color);
   color: var(--bui-color-primary);
 }
 .bui-select-option-active {
   font-weight: var(--bui-font-weight-medium);
   color: var(--bui-color-primary);
-  background-color: var(---bui-select-options-active-bg, #fff2f0);
+  background-color: var(--bui-select-option-active-bg-color);
 }
 .bui-select-option-hide {
   opacity: 0;

package/es/Skeleton/Skeleton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './Skeleton.less';
 import { SkeletonProps } from './Skeleton.types';
+import './index.less';
 declare const Skeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps<"div", {}>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export default Skeleton;

package/es/Skeleton/Skeleton.js

@@ -28,7 +28,7 @@ var __objRest = (source, exclude) => {
 };
 import clsx from "clsx";
 import React from "react";
-import "./Skeleton.css";
+import "./index.css";
 const prefixCls = "bui-skeleton";
 const Skeleton = /* @__PURE__ */ React.forwardRef(
   (_a, ref) => {

package/{dist/Skeleton/Skeleton.css → es/Skeleton/index.css}

@@ -1,5 +1,9 @@
+:root,
+page,
+xhs-page {
+  --bui-skeleton-height: 1.2em;
+}
 .bui-skeleton {
-  --height: var(--bui-skeleton-height, 1.2em);
   display: block;
 }
 .bui-skeleton-animation-wave {
@@ -26,10 +30,10 @@
   content: "\a0";
 }
 .bui-skeleton-rectangular {
-  height: var(--height);
+  height: var(--bui-skeleton-height);
 }
 .bui-skeleton-rounded {
-  height: var(--height);
+  height: var(--bui-skeleton-height);
   border-radius: var(--bui-shape-radius-label);
 }
 .bui-skeleton-circular {

package/es/Slider/Slider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './Slider.less';
 import { SliderProps } from './Slider.types';
+import './index.less';
 declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Slider;

package/es/Slider/Slider.js

@@ -62,8 +62,8 @@ import React, {
   useRef,
   useState
 } from "react";
-import "./Slider.css";
 import { formatValue, isSameValue, sortValue } from "./utils";
+import "./index.css";
 const classes = {
   root: "bui-slider",
   button: "bui-slider-button",
@@ -116,7 +116,7 @@ const Slider = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const touchStartLeft = useRef();
   const buttonIndex = useRef(0);
   const beforeMoveValue = useRef([0, 0]);
-  const defaultIcon = /* @__PURE__ */ React.createElement(GripperBarVerticalIcon, { htmlColor: "#2e333e" });
+  const defaultIcon = /* @__PURE__ */ React.createElement(GripperBarVerticalIcon, { htmlColor: "var(--bui-color-fg-default)" });
   const initialRange = useRef(
     value !== void 0 && Array.isArray(value) || defaultValue !== void 0 && Array.isArray(defaultValue)
   );

package/es/Slider/index.css

@@ -0,0 +1,111 @@
+:root,
+page,
+xhs-page {
+  --bui-slider-line-color: var(--bui-color-primary);
+  --bui-slider-line-bg-color: var(--bui-color-border-default);
+  --bui-slider-width: 100%;
+  --bui-slider-height: 2px;
+  --bui-slider-padding: 19px 0;
+  --bui-slider-button-width: 26px;
+  --bui-slider-button-height: 26px;
+  --bui-slider-button-font-size: var(--bui-title-size-3);
+  --bui-slider-button-box-shadow: #ddd 0 0 10px;
+  --bui-slider-button-border-radius: 50%;
+  --bui-slider-tooltip-width: 46px;
+  --bui-slider-tooltip-height: 24px;
+  --bui-slider-tooltip-line-height: 24px;
+  --bui-slider-tooltip-border-radius: 24px;
+  --bui-slider-tooltip-font-size: var(--bui-text-size-3);
+  --bui-slider-tooltip-color: var(--bui-color-white);
+  --bui-slider-tooltip-bg-color: var(--bui-slider-line-color);
+}
+.bui-slider {
+  position: relative;
+  width: var(--bui-slider-width);
+  height: var(--bui-slider-height);
+  padding: var(--bui-slider-padding);
+  box-sizing: border-box;
+  font-family: var(--bui-font-family);
+}
+.bui-slider-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.bui-slider-line {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: var(--bui-slider-height);
+  transform: translateY(-50%);
+  background-color: var(--bui-slider-line-color);
+}
+.bui-slider-rail {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: var(--bui-slider-height);
+  transform: translateY(-50%);
+  background-color: var(--bui-slider-line-bg-color);
+}
+.bui-slider-button {
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  width: var(--bui-slider-button-width);
+  height: var(--bui-slider-button-height);
+  background-color: var(--bui-color-white);
+  box-shadow: var(--bui-slider-button-box-shadow);
+  border-radius: var(--bui-slider-button-border-radius);
+  transform: translate(-50%, -50%);
+  font-size: var(--bui-slider-button-font-size);
+  cursor: grab;
+}
+.bui-slider-button::after {
+  position: absolute;
+  content: "";
+  top: -10px;
+  bottom: -10px;
+  left: -10px;
+  right: -10px;
+}
+.bui-slider-button-0 {
+  left: 0%;
+  top: 50%;
+  z-index: var(--bui-z-index-affix);
+}
+.bui-slider-button-1 {
+  left: 0%;
+  top: 50%;
+  z-index: var(--bui-z-index-affix);
+}
+.bui-slider-tooltip {
+  position: absolute;
+  top: -14px;
+  width: var(--bui-slider-tooltip-width);
+  height: var(--bui-slider-tooltip-height);
+  line-height: var(--bui-slider-tooltip-line-height);
+  font-size: var(--bui-slider-tooltip-font-size);
+  border-radius: var(--bui-slider-tooltip-border-radius);
+  color: var(--bui-slider-tooltip-color);
+  text-align: center;
+  background-color: var(--bui-slider-tooltip-bg-color);
+  transform: translate(-50%, -50%);
+  z-index: var(--bui-z-index-affix);
+}
+.bui-slider-tooltip::after {
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  content: "";
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+  border-top: 6px solid var(--bui-slider-tooltip-bg-color);
+}
+.bui-slider-tooltip-hidden {
+  display: none;
+}