@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/Popover/hooks/usePopoverPosition.js

@@ -0,0 +1,105 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { useState, useEffect, useRef } from "react";
+import {
+  getStylesAndLocation,
+  parsePlacement,
+  throttle
+} from "@bifrostui/utils";
+const anchorOriginToPlacement = (anchorOrigin) => {
+  const { vertical, horizontal } = anchorOrigin;
+  if (vertical === "center" && horizontal === "center") {
+    return "top";
+  }
+  if (horizontal === "center") {
+    return vertical;
+  }
+  const horizontalMap = {
+    left: "Left",
+    right: "Right"
+  };
+  if (vertical === "center") {
+    return horizontal;
+  }
+  return `${vertical}${horizontalMap[horizontal]}`;
+};
+const usePopoverPosition = ({
+  anchorOrigin,
+  offsetSpacing,
+  isOpen
+}) => {
+  const placement = anchorOriginToPlacement(anchorOrigin);
+  const { direction, location = "center" } = parsePlacement(placement);
+  const childrenRef = useRef();
+  const [arrowDirection, setArrowDirection] = useState(direction);
+  const [arrowLocation, setArrowLocation] = useState(location);
+  const [toolStyles, setToolStyles] = useState({});
+  const tipRef = useRef(null);
+  const clearRef = (status) => {
+    if (status === false) {
+      tipRef.current = null;
+    }
+  };
+  const onMounted = throttle(() => __async(void 0, null, function* () {
+    if (!tipRef.current)
+      return;
+    const {
+      direction: newParsedDirection,
+      location: newParsedLocation = "center"
+    } = parsePlacement(placement);
+    const result = yield getStylesAndLocation({
+      childrenRef,
+      arrowDirection: newParsedDirection,
+      arrowLocation: newParsedLocation,
+      offsetSpacing,
+      tipRef
+    });
+    if (!result)
+      return;
+    const { styles, newArrowDirection, newArrowLocation } = result;
+    if (newArrowDirection !== arrowDirection) {
+      setArrowDirection(newArrowDirection);
+    }
+    if (newArrowLocation !== arrowLocation) {
+      setArrowLocation(newArrowLocation);
+    }
+    setToolStyles(styles);
+  }), 16);
+  useEffect(() => {
+    if (!isOpen) {
+      setToolStyles({
+        visibility: "hidden"
+      });
+    }
+  }, [isOpen]);
+  return {
+    arrowDirection,
+    arrowLocation,
+    toolStyles,
+    tipRef,
+    childrenRef,
+    onMounted,
+    clearRef
+  };
+};
+export {
+  usePopoverPosition
+};

package/es/Popover/hooks/usePopoverState.js

@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+const usePopoverState = ({
+  defaultOpen = false,
+  open,
+  onOpenChange
+}) => {
+  const controlByUser = typeof open !== "undefined";
+  const [openStatus, setOpenStatus] = useState(defaultOpen);
+  const isOpen = controlByUser ? open : openStatus;
+  const changeOpenStatus = (event, status) => {
+    if (controlByUser)
+      return;
+    setOpenStatus(status);
+    onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
+  };
+  useEffect(() => {
+    if (!controlByUser)
+      return;
+    setOpenStatus(open);
+  }, [open, controlByUser]);
+  return {
+    isOpen,
+    openStatus,
+    controlByUser,
+    changeOpenStatus,
+    setOpenStatus
+  };
+};
+export {
+  usePopoverState
+};

package/es/Popover/index.css

@@ -0,0 +1,99 @@
+: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 {
+  max-width: var(--bui-popover-max-width);
+  font-size: var(--bui-text-size-1);
+  position: absolute;
+  visibility: hidden;
+  z-index: var(--bui-z-index-tooltip);
+}
+.bui-popover .bui-popover-arrow {
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.bui-popover .bui-popover-arrow.location-left {
+  left: var(--bui-popover-location-position);
+}
+.bui-popover .bui-popover-arrow.location-right {
+  right: var(--bui-popover-location-position);
+}
+.bui-popover .bui-popover-arrow.location-top {
+  top: var(--bui-popover-location-position);
+}
+.bui-popover .bui-popover-arrow.location-bottom {
+  bottom: var(--bui-popover-location-position);
+}
+.bui-popover.popover-top .location-center,
+.bui-popover.popover-bottom .location-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bui-popover.popover-left .location-center,
+.bui-popover.popover-right .location-center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.bui-popover.popover-top {
+  padding-bottom: var(--bui-popover-arrow-size);
+}
+.bui-popover.popover-top .bui-popover-arrow {
+  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(--bui-popover-arrow-size);
+}
+.bui-popover.popover-bottom .bui-popover-arrow {
+  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(--bui-popover-arrow-size);
+}
+.bui-popover.popover-left .bui-popover-arrow {
+  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(--bui-popover-arrow-size);
+}
+.bui-popover.popover-right .bui-popover-arrow {
+  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(--bui-popover-content-min-width);
+  color: var(--bui-color-fg-muted);
+  padding: var(--bui-popover-content-padding);
+  text-align: left;
+  text-decoration: none;
+  word-wrap: break-word;
+  background-color: var(--bui-color-bg-popover);
+  border-radius: var(--bui-shape-radius-poster);
+  box-shadow:
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+.bui-popover .bui-popover-content .bui-popover-title + .bui-popover-inner-content {
+  margin-top: var(--bui-spacing-md);
+}

package/es/Portal/PortalCore.js

@@ -11,7 +11,7 @@ const PortalCore = /* @__PURE__ */ React.forwardRef(
       container,
       disablePortal = false,
       rootElement,
-      onRootElementMouted
+      onMounted
     } = props;
     const [mountNode, setMountNode] = React.useState(null);
     const handleRef = useForkRef(
@@ -27,7 +27,7 @@ const PortalCore = /* @__PURE__ */ React.forwardRef(
     useLayoutEffect(() => {
       if (mountNode && !disablePortal) {
         setRef(ref, mountNode);
-        onRootElementMouted == null ? void 0 : onRootElementMouted(mountNode);
+        onMounted == null ? void 0 : onMounted(mountNode);
         return () => {
           setRef(ref, null);
         };

package/es/Progress/Progress.js

@@ -28,7 +28,8 @@ var __objRest = (source, exclude) => {
 };
 import clsx from "clsx";
 import React from "react";
-import "./Progress.css";
+import { useLocaleText } from "../locales";
+import "./index.css";
 const prefixCls = "bui-progress";
 function validProgress(progress) {
   if (!progress || progress < 0) {
@@ -63,20 +64,55 @@ const handleGradient = (strokeColor) => {
   }
   return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` };
 };
+function getAriaValueText(progress, t) {
+  const validatedProgress = validProgress(progress);
+  if (validatedProgress === 0)
+    return t.notStarted;
+  if (validatedProgress < 10)
+    return t.justBegun;
+  if (validatedProgress < 25)
+    return t.gettingStarted;
+  if (validatedProgress < 50)
+    return t.inProgress;
+  if (validatedProgress < 75)
+    return t.moreThanHalfway;
+  if (validatedProgress < 90)
+    return t.nearingCompletion;
+  if (validatedProgress < 100)
+    return t.almostComplete;
+  return t.complete;
+}
 const Progress = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
+    const progressText = useLocaleText("progress");
     const _a = props, {
       className,
-      percent,
-      strokeWidth,
-      strokeColor,
-      trailColor
+      percent = 0,
+      strokeWidth: strokeWidth,
+      strokeColor: strokeColor,
+      trailColor: trailColor,
+      // 轨道颜色
+      "aria-label": ariaLabel = progressText.labelName,
+      "aria-labelledby": ariaLabelledby = "",
+      "aria-valuenow": ariaValueNow,
+      "aria-valuemin": ariaValueMin = 0,
+      "aria-valuemax": ariaValueMax = 100,
+      "aria-valuetext": ariaValueText
     } = _a, others = __objRest(_a, [
       "className",
       "percent",
+      // 当前进度百分比
       "strokeWidth",
+      // 进度条高度
       "strokeColor",
-      "trailColor"
+      // 进度条颜色或渐变
+      "trailColor",
+      "aria-label",
+      "aria-labelledby",
+      "aria-valuenow",
+      "aria-valuemin",
+      "aria-valuemax",
+      "aria-valuetext"
     ]);
     const backgroundProps = strokeColor && typeof strokeColor !== "string" ? handleGradient(strokeColor) : {
       background: strokeColor
@@ -88,7 +124,26 @@ const Progress = /* @__PURE__ */ React.forwardRef(
     const trailStyle = {
       background: trailColor || void 0
     };
-    return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: clsx(prefixCls, className), ref }, others), /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-inner`, style: trailStyle }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-bg`, style: percentStyle })));
+    const accessibilityProps = {
+      "aria-valuenow": typeof ariaValueNow === "number" ? ariaValueNow : validProgress(percent),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-valuemin": ariaValueMin,
+      "aria-valuemax": ariaValueMax,
+      "aria-valuetext": ariaValueText !== void 0 ? ariaValueText : getAriaValueText(percent, progressText),
+      role: "progressbar"
+    };
+    return (
+      // 外层容器
+      /* @__PURE__ */ React.createElement(
+        "div",
+        __spreadValues(__spreadValues({
+          className: clsx(prefixCls, className),
+          ref
+        }, accessibilityProps), others),
+        /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-inner`, style: trailStyle }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-bg`, style: percentStyle }))
+      )
+    );
   }
 );
 Progress.displayName = "BuiProgress";

package/es/Progress/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,62 @@
+import React from "react";
+import Progress from "../../Progress";
+const basicProgressDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Progress, { percent: 40 }));
+};
+const coloredProgressDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Progress, { percent: 40, strokeColor: "var(--bui-color-primary)" }), /* @__PURE__ */ React.createElement(Progress, { percent: 50, strokeColor: "var(--bui-color-info)" }), /* @__PURE__ */ React.createElement(Progress, { percent: 30, strokeColor: "var(--bui-color-success)" }), /* @__PURE__ */ React.createElement(Progress, { percent: 80, strokeColor: "var(--bui-color-warning)" }), /* @__PURE__ */ React.createElement(Progress, { percent: 90, strokeColor: "var(--bui-color-vip)" }));
+};
+const sizedProgressDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Progress, { percent: 60, strokeWidth: 10 }), /* @__PURE__ */ React.createElement(Progress, { percent: 60, strokeWidth: 15 }), /* @__PURE__ */ React.createElement(Progress, { percent: 60, strokeWidth: 20 }));
+};
+const gradientProgressDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Progress,
+    {
+      percent: 60,
+      strokeColor: {
+        from: "var(--bui-color-primary)",
+        to: "var(--bui-color-primary-light)"
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Progress,
+    {
+      percent: 90,
+      strokeColor: {
+        "0%": "var(--bui-color-orange)",
+        "100%": "var(--bui-color-orange-light)"
+      }
+    }
+  ));
+};
+const customTrailColorProgressDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Progress, { percent: 60, trailColor: "var(--bui-color-primary-light)" }), /* @__PURE__ */ React.createElement(Progress, { percent: 80, trailColor: "var(--bui-color-gray-light)" }));
+};
+const accessibilityProgressDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Progress, { percent: 50, "aria-label": "\u6587\u4EF6\u4E0B\u8F7D\u8FDB\u5EA6" }), /* @__PURE__ */ React.createElement(
+    Progress,
+    {
+      percent: 75,
+      "aria-label": "\u6570\u636E\u52A0\u8F7D\u8FDB\u5EA6",
+      "aria-valuetext": "\u5DF2\u5B8C\u621075%"
+    }
+  ), /* @__PURE__ */ React.createElement(Progress, { percent: 30, "aria-describedby": "progress-description" }), /* @__PURE__ */ React.createElement("span", { id: "progress-description", style: { display: "none" } }, "\u8FD9\u662F\u8FDB\u5EA6\u6761\u7684\u8BE6\u7EC6\u63CF\u8FF0\u4FE1\u606F"));
+};
+var A11yDemos_default = {
+  basicProgressDemo,
+  coloredProgressDemo,
+  sizedProgressDemo,
+  gradientProgressDemo,
+  customTrailColorProgressDemo,
+  accessibilityProgressDemo
+};
+export {
+  accessibilityProgressDemo,
+  basicProgressDemo,
+  coloredProgressDemo,
+  customTrailColorProgressDemo,
+  A11yDemos_default as default,
+  gradientProgressDemo,
+  sizedProgressDemo
+};

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.js

@@ -34,13 +34,13 @@ 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, {
     className,
-    defaultChecked,
-    checked,
+    defaultChecked = false,
+    checked = false,
     inputProps,
     inputRef,
     name,
@@ -48,7 +48,7 @@ const Radio = forwardRef((props, ref) => {
     disabled,
     icon,
     checkedIcon,
-    labelPlacement,
+    labelPlacement = "right",
     onChange,
     children
   } = _a, others = __objRest(_a, [
@@ -66,6 +66,7 @@ const Radio = forwardRef((props, ref) => {
     "onChange",
     "children"
   ]);
+  const ariaProps = __spreadValues({}, disabled && { "aria-disabled": disabled });
   const groupContext = useContext(RadioContext);
   let validDefaultChecked = defaultChecked;
   let validChecked = checked;
@@ -86,7 +87,7 @@ const Radio = forwardRef((props, ref) => {
   }
   const radioCheckIcon = checkedIcon || /* @__PURE__ */ React.createElement(RadioButtonIcon, { checked: true });
   const radioUncheckIcon = icon || /* @__PURE__ */ React.createElement(RadioButtonIcon, { checked: false });
-  const radioDisabled = disabled !== void 0 ? disabled : groupContext == null ? void 0 : groupContext.disabled;
+  const radioDisabled = disabled !== void 0 ? disabled : (groupContext == null ? void 0 : groupContext.disabled) || false;
   const changeAction = (e, isChecked) => {
     var _a2;
     if (!groupContext) {
@@ -130,14 +131,14 @@ const Radio = forwardRef((props, ref) => {
     }),
     /* @__PURE__ */ React.createElement(
       "input",
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadValues({
         ref: inputRef,
         type: "radio",
         value,
         name,
         checked: radioChecked,
         disabled: radioDisabled
-      }, inputProps), {
+      }, ariaProps), inputProps), {
         onChange: handleChange,
         className: clsx(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
       })
@@ -147,10 +148,6 @@ const Radio = forwardRef((props, ref) => {
   );
 });
 Radio.displayName = "BuiRadio";
-Radio.defaultProps = {
-  defaultChecked: false,
-  labelPlacement: "right"
-};
 var Radio_default = Radio;
 export {
   Radio_default as default

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.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, {
@@ -38,7 +38,7 @@ const RadioGroup = forwardRef((props, ref) => {
     defaultValue,
     value,
     onChange,
-    disabled,
+    disabled = false,
     children
   } = _a, others = __objRest(_a, [
     "className",
@@ -70,9 +70,6 @@ const RadioGroup = forwardRef((props, ref) => {
   );
 });
 RadioGroup.displayName = "BuiRadioGroup";
-RadioGroup.defaultProps = {
-  disabled: false
-};
 var RadioGroup_default = RadioGroup;
 export {
   RadioGroup_default as default

package/es/Radio/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Radio from "../../Radio";
+const basicRadioDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement(Radio, { checked: true }), "Radio"));
+};
+const disabledRadioDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement(Radio, { disabled: true }), "Radio"));
+};
+const ariaLabelRadioDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Radio, { inputProps: { "aria-label": "\u5355\u9009\u6846" } }, "Radio"));
+};
+var A11yDemos_default = {
+  basicRadioDemo,
+  disabledRadioDemo,
+  ariaLabelRadioDemo
+};
+export {
+  ariaLabelRadioDemo,
+  basicRadioDemo,
+  A11yDemos_default as default,
+  disabledRadioDemo
+};

package/es/Radio/index.css

@@ -0,0 +1,69 @@
+: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 {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-family: var(--bui-font-family);
+}
+.bui-radio-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.bui-radio-label-left {
+  flex-direction: row-reverse;
+}
+.bui-radio-label-top {
+  flex-direction: column-reverse;
+}
+.bui-radio-label-bottom {
+  flex-direction: column;
+}
+.bui-radio-input {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.bui-radio-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--bui-radio-icon-padding);
+  box-sizing: border-box;
+}
+.bui-radio-label {
+  font-size: var(--bui-radio-label-font-size);
+  color: var(--bui-radio-label-color);
+}
+.bui-radio-btn-icon {
+  position: relative;
+  display: flex;
+}
+.bui-radio-btn-icon .bui-svg-icon {
+  font-size: var(--icon-font-size);
+}
+.bui-radio-btn-icon-outline {
+  transform: scale(1);
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+.bui-radio-btn-icon-contained {
+  position: absolute;
+  left: 0;
+  transform: scale(0);
+  transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms;
+}
+.bui-radio-btn-icon-checked .bui-radio-btn-icon-contained {
+  transform: scale(1);
+  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+}