@tiny-design/react 1.4.0 → 1.5.1

package/lib/checkbox/style/_index.scss

@@ -4,7 +4,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
   margin-right: 8px;
   color: var(--ty-color-text);
   box-sizing: border-box;
@@ -17,10 +17,7 @@
 
   &__native {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
@@ -43,7 +40,7 @@
     line-height: 1;
     vertical-align: middle;
 
-    &:before {
+    &::before {
       content: '';
       position: absolute;
       display: block;
@@ -56,7 +53,7 @@
       transform: scale(0);
     }
 
-    &:after {
+    &::after {
       transform: rotate(45deg) scaleY(1);
       pointer-events: none;
       box-sizing: content-box;
@@ -83,12 +80,12 @@
         background-color: var(--ty-color-primary);
         border-color: var(--ty-color-primary);
 
-        &:after {
+        &::after {
           content: '';
           transform: rotate(45deg) scale(1);
         }
 
-        &:before {
+        &::before {
           transform: scale(0);
         }
       }
@@ -101,11 +98,11 @@
         background-color: var(--ty-color-primary);
         border-color: var(--ty-color-primary);
 
-        &:before {
+        &::before {
           transform: scale(1);
         }
 
-        &:after {
+        &::after {
           transform: rotate(45deg) scale(0);
         }
       }
@@ -122,7 +119,7 @@
         background-color: var(--ty-checkbox-disabled-bg);
         border-color: var(--ty-checkbox-border) !important;
 
-        &:after {
+        &::after {
           border-color: var(--ty-color-text-quaternary);
         }
 

package/lib/checkbox/style/index.css

@@ -2,7 +2,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   margin-right: 8px;
   color: var(--ty-color-text);
   box-sizing: border-box;
@@ -12,10 +12,7 @@
 }
 .ty-checkbox__native {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
@@ -37,7 +34,7 @@
   line-height: 1;
   vertical-align: middle;
 }
-.ty-checkbox__inner:before {
+.ty-checkbox__inner::before {
   content: "";
   position: absolute;
   display: block;
@@ -49,7 +46,7 @@
   transition: all 200ms;
   transform: scale(0);
 }
-.ty-checkbox__inner:after {
+.ty-checkbox__inner::after {
   transform: rotate(45deg) scaleY(1);
   pointer-events: none;
   box-sizing: content-box;
@@ -71,21 +68,21 @@
   background-color: var(--ty-color-primary);
   border-color: var(--ty-color-primary);
 }
-.ty-checkbox_checked .ty-checkbox__inner:after {
+.ty-checkbox_checked .ty-checkbox__inner::after {
   content: "";
   transform: rotate(45deg) scale(1);
 }
-.ty-checkbox_checked .ty-checkbox__inner:before {
+.ty-checkbox_checked .ty-checkbox__inner::before {
   transform: scale(0);
 }
 .ty-checkbox_indeterminate .ty-checkbox__inner {
   background-color: var(--ty-color-primary);
   border-color: var(--ty-color-primary);
 }
-.ty-checkbox_indeterminate .ty-checkbox__inner:before {
+.ty-checkbox_indeterminate .ty-checkbox__inner::before {
   transform: scale(1);
 }
-.ty-checkbox_indeterminate .ty-checkbox__inner:after {
+.ty-checkbox_indeterminate .ty-checkbox__inner::after {
   transform: rotate(45deg) scale(0);
 }
 .ty-checkbox_disabled .ty-checkbox__native {
@@ -95,7 +92,7 @@
   background-color: var(--ty-checkbox-disabled-bg);
   border-color: var(--ty-checkbox-border) !important;
 }
-.ty-checkbox_disabled .ty-checkbox__inner:after {
+.ty-checkbox_disabled .ty-checkbox__inner::after {
   border-color: var(--ty-color-text-quaternary);
 }
 .ty-checkbox_disabled .ty-checkbox__inner + span {

package/lib/collapse/collapse-panel.js

@@ -49,31 +49,31 @@ const CollapsePanel = (props) => {
 	const renderHeader = () => {
 		const headerCls = (0, classnames.default)(`${prefixCls}__header`, { [`${prefixCls}__header_disabled`]: disabled });
 		const arrowCls = (0, classnames.default)(`${prefixCls}__arrow`, { [`${prefixCls}__arrow_active`]: active });
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			type: "button",
-			id: headerId,
+		const hasExtra = deletable || extra;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: headerCls,
-			onClick: headerOnClick,
-			"aria-expanded": active,
-			"aria-controls": panelId,
-			"aria-disabled": disabled || void 0,
-			children: [
-				showArrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.ArrowDown, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				id: headerId,
+				className: `${prefixCls}__toggle`,
+				onClick: headerOnClick,
+				"aria-expanded": active,
+				"aria-controls": panelId,
+				"aria-disabled": disabled || void 0,
+				children: [showArrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.ArrowDown, {
 					size: 10,
 					className: arrowCls
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: `${prefixCls}__title`,
 					children: richNode(header, active)
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: `${prefixCls}__extra`,
-					children: deletable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						onClick: removeItem,
-						children: "✕"
-					}) : richNode(extra, active)
-				})
-			]
+				})]
+			}), hasExtra && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefixCls}__extra`,
+				children: deletable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					onClick: removeItem,
+					children: "✕"
+				}) : richNode(extra, active)
+			})]
 		});
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {

package/lib/collapse/collapse-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-panel.js","names":["ConfigContext","CollapseContext","getPrefixCls","ArrowDown","CollapseTransition"],"sources":["../../src/collapse/collapse-panel.tsx"],"sourcesContent":["import React, { useContext, useId, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CollapsePanelProps } from './types';\nimport { ArrowDown } from '../_utils/components';\nimport CollapseTransition from '../collapse-transition';\nimport { CollapseContext } from './collapse-context';\n\n/**\n * Allow to parse active status to a node\n * @param node\n * @param isActive\n */\nconst richNode = (node: React.ReactNode | ((isActive: boolean) => React.ReactNode), isActive: boolean) => {\n  return typeof node === 'function' ? node(isActive) : node;\n};\n\nconst CollapsePanel = (props: CollapsePanelProps): React.ReactElement => {\n  const {\n    showArrow = true,\n    itemKey,\n    header,\n    disabled,\n    extra,\n    deletable,\n    onHeaderOnClick,\n    className,\n    style,\n    children,\n    prefixCls: customisedCls,\n  } = props;\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const panelId = useId();\n  const headerId = useId();\n  const configContext = useContext(ConfigContext);\n  const { activeKeys, onItemClick } = useContext(CollapseContext);\n  const prefixCls = getPrefixCls('collapse-item', configContext.prefixCls, customisedCls);\n  const active = activeKeys.includes(itemKey);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_active`]: active,\n  });\n\n  const headerOnClick = (e: React.MouseEvent) => {\n    if (!disabled) {\n      onHeaderOnClick && onHeaderOnClick(e);\n      onItemClick && onItemClick(itemKey);\n    }\n  };\n\n  /**\n   * Remove a item from collapse only the header is enabled\n   * @param e\n   * @private\n   */\n  const removeItem = (e: React.MouseEvent<HTMLSpanElement>) => {\n    e.stopPropagation();\n    if (!disabled) {\n      const node = itemRef.current;\n      node && node.parentNode?.removeChild(node);\n    }\n  };\n\n  const renderHeader = () => {\n    const headerCls = classNames(`${prefixCls}__header`, {\n      [`${prefixCls}__header_disabled`]: disabled,\n    });\n    const arrowCls = classNames(`${prefixCls}__arrow`, {\n      [`${prefixCls}__arrow_active`]: active,\n    });\n\n    return (\n      <button\n        type=\"button\"\n        id={headerId}\n        className={headerCls}\n        onClick={headerOnClick}\n        aria-expanded={active}\n        aria-controls={panelId}\n        aria-disabled={disabled || undefined}>\n        {showArrow && <ArrowDown size={10} className={arrowCls} />}\n        <div className={`${prefixCls}__title`}>{richNode(header, active)}</div>\n        <div className={`${prefixCls}__extra`}>\n          {deletable ? <span onClick={removeItem}>✕</span> : richNode(extra, active)}\n        </div>\n      </button>\n    );\n  };\n\n  return (\n    <div className={cls} style={style} ref={itemRef}>\n      {renderHeader()}\n      <CollapseTransition isShow={active}>\n        <div className={`${prefixCls}__content`} id={panelId} role=\"region\" aria-labelledby={headerId}>{richNode(children, active)}</div>\n      </CollapseTransition>\n    </div>\n  );\n};\n\nCollapsePanel.displayName = 'CollapsePanel';\n\nexport default CollapsePanel;\n"],"mappings":";;;;;;;;;;;;;;;;;AAcA,MAAM,YAAY,MAAkE,aAAsB;AACxG,QAAO,OAAO,SAAS,aAAa,KAAK,SAAS,GAAG;;AAGvD,MAAM,iBAAiB,UAAkD;CACvE,MAAM,EACJ,YAAY,MACZ,SACA,QACA,UACA,OACA,WACA,iBACA,WACA,OACA,UACA,WAAW,kBACT;CACJ,MAAM,WAAA,GAAA,MAAA,QAAwC,KAAK;CACnD,MAAM,WAAA,GAAA,MAAA,QAAiB;CACvB,MAAM,YAAA,GAAA,MAAA,QAAkB;CACxB,MAAM,iBAAA,GAAA,MAAA,YAA2BA,uBAAAA,cAAc;CAC/C,MAAM,EAAE,YAAY,iBAAA,GAAA,MAAA,YAA2BC,yBAAAA,gBAAgB;CAC/D,MAAM,YAAYC,gBAAAA,aAAa,iBAAiB,cAAc,WAAW,cAAc;CACvF,MAAM,SAAS,WAAW,SAAS,QAAQ;CAC3C,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW,GAC1C,GAAG,UAAU,WAAW,QAC1B,CAAC;CAEF,MAAM,iBAAiB,MAAwB;AAC7C,MAAI,CAAC,UAAU;AACb,sBAAmB,gBAAgB,EAAE;AACrC,kBAAe,YAAY,QAAQ;;;;;;;;CASvC,MAAM,cAAc,MAAyC;AAC3D,IAAE,iBAAiB;AACnB,MAAI,CAAC,UAAU;GACb,MAAM,OAAO,QAAQ;AACrB,WAAQ,KAAK,YAAY,YAAY,KAAK;;;CAI9C,MAAM,qBAAqB;EACzB,MAAM,aAAA,GAAA,WAAA,SAAuB,GAAG,UAAU,WAAW,GAClD,GAAG,UAAU,qBAAqB,UACpC,CAAC;EACF,MAAM,YAAA,GAAA,WAAA,SAAsB,GAAG,UAAU,UAAU,GAChD,GAAG,UAAU,kBAAkB,QACjC,CAAC;AAEF,SACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;GACE,MAAK;GACL,IAAI;GACJ,WAAW;GACX,SAAS;GACT,iBAAe;GACf,iBAAe;GACf,iBAAe,YAAY,KAAA;aAP7B;IAQG,aAAa,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,WAAD;KAAW,MAAM;KAAI,WAAW;KAAY,CAAA;IAC1D,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAAW,SAAS,QAAQ,OAAO;KAAO,CAAA;IACvE,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAC1B,YAAY,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,SAAS;gBAAY;MAAQ,CAAA,GAAG,SAAS,OAAO,OAAO;KACtE,CAAA;IACC;;;AAIb,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAW;EAAY;EAAO,KAAK;YAAxC,CACG,cAAc,EACf,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD;GAAoB,QAAQ;aAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAW,GAAG,UAAU;IAAY,IAAI;IAAS,MAAK;IAAS,mBAAiB;cAAW,SAAS,UAAU,OAAO;IAAO,CAAA;GAC9G,CAAA,CACjB;;;AAIV,cAAc,cAAc"}
+{"version":3,"file":"collapse-panel.js","names":["ConfigContext","CollapseContext","getPrefixCls","ArrowDown","CollapseTransition"],"sources":["../../src/collapse/collapse-panel.tsx"],"sourcesContent":["import React, { useContext, useId, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CollapsePanelProps } from './types';\nimport { ArrowDown } from '../_utils/components';\nimport CollapseTransition from '../collapse-transition';\nimport { CollapseContext } from './collapse-context';\n\n/**\n * Allow to parse active status to a node\n * @param node\n * @param isActive\n */\nconst richNode = (node: React.ReactNode | ((isActive: boolean) => React.ReactNode), isActive: boolean) => {\n  return typeof node === 'function' ? node(isActive) : node;\n};\n\nconst CollapsePanel = (props: CollapsePanelProps): React.ReactElement => {\n  const {\n    showArrow = true,\n    itemKey,\n    header,\n    disabled,\n    extra,\n    deletable,\n    onHeaderOnClick,\n    className,\n    style,\n    children,\n    prefixCls: customisedCls,\n  } = props;\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const panelId = useId();\n  const headerId = useId();\n  const configContext = useContext(ConfigContext);\n  const { activeKeys, onItemClick } = useContext(CollapseContext);\n  const prefixCls = getPrefixCls('collapse-item', configContext.prefixCls, customisedCls);\n  const active = activeKeys.includes(itemKey);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_active`]: active,\n  });\n\n  const headerOnClick = (e: React.MouseEvent) => {\n    if (!disabled) {\n      onHeaderOnClick && onHeaderOnClick(e);\n      onItemClick && onItemClick(itemKey);\n    }\n  };\n\n  /**\n   * Remove a item from collapse only the header is enabled\n   * @param e\n   * @private\n   */\n  const removeItem = (e: React.MouseEvent<HTMLSpanElement>) => {\n    e.stopPropagation();\n    if (!disabled) {\n      const node = itemRef.current;\n      node && node.parentNode?.removeChild(node);\n    }\n  };\n\n  const renderHeader = () => {\n    const headerCls = classNames(`${prefixCls}__header`, {\n      [`${prefixCls}__header_disabled`]: disabled,\n    });\n    const arrowCls = classNames(`${prefixCls}__arrow`, {\n      [`${prefixCls}__arrow_active`]: active,\n    });\n\n    const hasExtra = deletable || extra;\n\n    return (\n      <div className={headerCls}>\n        <button\n          type=\"button\"\n          id={headerId}\n          className={`${prefixCls}__toggle`}\n          onClick={headerOnClick}\n          aria-expanded={active}\n          aria-controls={panelId}\n          aria-disabled={disabled || undefined}>\n          {showArrow && <ArrowDown size={10} className={arrowCls} />}\n          <div className={`${prefixCls}__title`}>{richNode(header, active)}</div>\n        </button>\n        {hasExtra && (\n          <div className={`${prefixCls}__extra`}>\n            {deletable ? <span onClick={removeItem}>✕</span> : richNode(extra, active)}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={cls} style={style} ref={itemRef}>\n      {renderHeader()}\n      <CollapseTransition isShow={active}>\n        <div className={`${prefixCls}__content`} id={panelId} role=\"region\" aria-labelledby={headerId}>{richNode(children, active)}</div>\n      </CollapseTransition>\n    </div>\n  );\n};\n\nCollapsePanel.displayName = 'CollapsePanel';\n\nexport default CollapsePanel;\n"],"mappings":";;;;;;;;;;;;;;;;;AAcA,MAAM,YAAY,MAAkE,aAAsB;AACxG,QAAO,OAAO,SAAS,aAAa,KAAK,SAAS,GAAG;;AAGvD,MAAM,iBAAiB,UAAkD;CACvE,MAAM,EACJ,YAAY,MACZ,SACA,QACA,UACA,OACA,WACA,iBACA,WACA,OACA,UACA,WAAW,kBACT;CACJ,MAAM,WAAA,GAAA,MAAA,QAAwC,KAAK;CACnD,MAAM,WAAA,GAAA,MAAA,QAAiB;CACvB,MAAM,YAAA,GAAA,MAAA,QAAkB;CACxB,MAAM,iBAAA,GAAA,MAAA,YAA2BA,uBAAAA,cAAc;CAC/C,MAAM,EAAE,YAAY,iBAAA,GAAA,MAAA,YAA2BC,yBAAAA,gBAAgB;CAC/D,MAAM,YAAYC,gBAAAA,aAAa,iBAAiB,cAAc,WAAW,cAAc;CACvF,MAAM,SAAS,WAAW,SAAS,QAAQ;CAC3C,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW,GAC1C,GAAG,UAAU,WAAW,QAC1B,CAAC;CAEF,MAAM,iBAAiB,MAAwB;AAC7C,MAAI,CAAC,UAAU;AACb,sBAAmB,gBAAgB,EAAE;AACrC,kBAAe,YAAY,QAAQ;;;;;;;;CASvC,MAAM,cAAc,MAAyC;AAC3D,IAAE,iBAAiB;AACnB,MAAI,CAAC,UAAU;GACb,MAAM,OAAO,QAAQ;AACrB,WAAQ,KAAK,YAAY,YAAY,KAAK;;;CAI9C,MAAM,qBAAqB;EACzB,MAAM,aAAA,GAAA,WAAA,SAAuB,GAAG,UAAU,WAAW,GAClD,GAAG,UAAU,qBAAqB,UACpC,CAAC;EACF,MAAM,YAAA,GAAA,WAAA,SAAsB,GAAG,UAAU,UAAU,GAChD,GAAG,UAAU,kBAAkB,QACjC,CAAC;EAEF,MAAM,WAAW,aAAa;AAE9B,SACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAW;aAAhB,CACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;IACE,MAAK;IACL,IAAI;IACJ,WAAW,GAAG,UAAU;IACxB,SAAS;IACT,iBAAe;IACf,iBAAe;IACf,iBAAe,YAAY,KAAA;cAP7B,CAQG,aAAa,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,WAAD;KAAW,MAAM;KAAI,WAAW;KAAY,CAAA,EAC1D,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAAW,SAAS,QAAQ,OAAO;KAAO,CAAA,CAChE;OACR,YACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAW,GAAG,UAAU;cAC1B,YAAY,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,SAAS;eAAY;KAAQ,CAAA,GAAG,SAAS,OAAO,OAAO;IACtE,CAAA,CAEJ;;;AAIV,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAW;EAAY;EAAO,KAAK;YAAxC,CACG,cAAc,EACf,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD;GAAoB,QAAQ;aAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAW,GAAG,UAAU;IAAY,IAAI;IAAS,MAAK;IAAS,mBAAiB;cAAW,SAAS,UAAU,OAAO;IAAO,CAAA;GAC9G,CAAA,CACjB;;;AAIV,cAAc,cAAc"}

package/lib/collapse/style/_index.scss

@@ -27,17 +27,9 @@
       align-items: center;
       box-sizing: border-box;
       position: relative;
-      padding: 12px 16px;
       color: var(--ty-color-text);
       line-height: 22px;
-      cursor: pointer;
       transition: all 300ms;
-      background: none;
-      border: none;
-      width: 100%;
-      text-align: left;
-      font-size: inherit;
-      font-family: inherit;
 
       &:hover {
         background-color: var(--ty-collapse-header-hover-bg);
@@ -49,11 +41,33 @@
       }
     }
 
+    &__toggle {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+      box-sizing: border-box;
+      padding: 12px 16px;
+      cursor: pointer;
+      background: none;
+      border: none;
+      width: 100%;
+      text-align: left;
+      font-size: inherit;
+      font-family: inherit;
+      color: inherit;
+      line-height: inherit;
+    }
+
+    &__header_disabled &__toggle {
+      cursor: not-allowed;
+    }
+
     &__arrow {
       margin-right: 10px;
       transform: rotate(-90deg);
       text-align: center;
-      color: currentColor;
+      color: currentcolor;
       transition: all 300ms;
 
       &_active {
@@ -66,9 +80,12 @@
     }
 
     &__extra {
+      display: flex;
+      align-items: center;
       color: inherit;
       font-size: 11px;
-      margin-left: 15px;
+      padding-right: 16px;
+      margin-left: auto;
     }
 
     &__content {

package/lib/collapse/style/index.css

@@ -1,6 +1,6 @@
 .ty-collapse {
   box-sizing: border-box;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   color: var(--ty-color-text);
   font-size: 14px;
   border: 1px solid var(--ty-collapse-border);
@@ -13,40 +13,52 @@
   border-bottom: 1px solid var(--ty-collapse-border);
 }
 .ty-collapse-item:last-child {
-  border-radius: 0 0 2px 2px;
+  border-radius: 0 0 var(--ty-border-radius) var(--ty-border-radius);
 }
 .ty-collapse-item:last-child .ty-collapse-item__content {
-  border-radius: 0 0 2px 2px;
+  border-radius: 0 0 var(--ty-border-radius) var(--ty-border-radius);
 }
 .ty-collapse-item__header {
   display: flex;
   align-items: center;
   box-sizing: border-box;
   position: relative;
-  padding: 12px 16px;
   color: var(--ty-color-text);
   line-height: 22px;
-  cursor: pointer;
   transition: all 300ms;
+}
+.ty-collapse-item__header:hover {
+  background-color: var(--ty-collapse-header-hover-bg);
+}
+.ty-collapse-item__header_disabled {
+  color: var(--ty-color-text-quaternary);
+  cursor: not-allowed;
+}
+.ty-collapse-item__toggle {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 12px 16px;
+  cursor: pointer;
   background: none;
   border: none;
   width: 100%;
   text-align: left;
   font-size: inherit;
   font-family: inherit;
+  color: inherit;
+  line-height: inherit;
 }
-.ty-collapse-item__header:hover {
-  background-color: var(--ty-collapse-header-hover-bg);
-}
-.ty-collapse-item__header_disabled {
-  color: var(--ty-color-text-quaternary);
+.ty-collapse-item__header_disabled .ty-collapse-item__toggle {
   cursor: not-allowed;
 }
 .ty-collapse-item__arrow {
   margin-right: 10px;
   transform: rotate(-90deg);
   text-align: center;
-  color: currentColor;
+  color: currentcolor;
   transition: all 300ms;
 }
 .ty-collapse-item__arrow_active {
@@ -56,9 +68,12 @@
   flex: 1;
 }
 .ty-collapse-item__extra {
+  display: flex;
+  align-items: center;
   color: inherit;
   font-size: 11px;
-  margin-left: 15px;
+  padding-right: 16px;
+  margin-left: auto;
 }
 .ty-collapse-item__content {
   overflow: hidden;

package/lib/color-picker/style/_index.scss

@@ -23,7 +23,7 @@
   &__swatch {
     width: 32px;
     height: 32px;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     border: 1px solid var(--ty-color-picker-border, #{$gray-300});
     padding: 3px;
     cursor: pointer;
@@ -39,7 +39,7 @@
     padding: 12px;
     background: var(--ty-color-picker-bg, #fff);
     border-radius: 8px;
-    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);
     width: 240px;
   }
 
@@ -70,7 +70,7 @@
     height: 12px;
     border-radius: 50%;
     border: 2px solid #fff;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 2px rgb(0 0 0 / 30%);
     transform: translate(-50%, -50%);
     pointer-events: none;
   }
@@ -128,7 +128,7 @@
     height: 14px;
     border-radius: 50%;
     border: 2px solid #fff;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 2px rgb(0 0 0 / 30%);
     transform: translate(-50%, -50%);
     pointer-events: none;
     background: transparent;
@@ -144,7 +144,7 @@
   &__format-btn {
     border: 1px solid var(--ty-color-picker-border, #{$gray-300});
     background: transparent;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     padding: 2px 6px;
     cursor: pointer;
     font-size: 12px;
@@ -159,7 +159,7 @@
   &__hex-input {
     flex: 1;
     border: 1px solid var(--ty-color-picker-border, #{$gray-300});
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     padding: 2px 6px;
     font-size: 12px;
     font-family: $font-family-monospace;
@@ -184,7 +184,7 @@
   &__preset {
     width: 20px;
     height: 20px;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     cursor: pointer;
     border: 1px solid var(--ty-color-picker-border, #{$gray-300});
     transition: transform 0.15s;

package/lib/color-picker/style/index.css

@@ -18,7 +18,7 @@
 .ty-color-picker__swatch {
   width: 32px;
   height: 32px;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   border: 1px solid var(--ty-color-picker-border, #dee2e6);
   padding: 3px;
   cursor: pointer;
@@ -124,7 +124,7 @@
 .ty-color-picker__format-btn {
   border: 1px solid var(--ty-color-picker-border, #dee2e6);
   background: transparent;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   padding: 2px 6px;
   cursor: pointer;
   font-size: 12px;
@@ -137,7 +137,7 @@
 .ty-color-picker__hex-input {
   flex: 1;
   border: 1px solid var(--ty-color-picker-border, #dee2e6);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   padding: 2px 6px;
   font-size: 12px;
   font-family: lucida console, consolas, monaco, andale mono, ubuntu mono, monospace;
@@ -159,7 +159,7 @@
 .ty-color-picker__preset {
   width: 20px;
   height: 20px;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   cursor: pointer;
   border: 1px solid var(--ty-color-picker-border, #dee2e6);
   transition: transform 0.15s;

package/lib/date-picker/style/_index.scss

@@ -5,7 +5,7 @@ $dp: #{$prefix}-date-picker;
 .#{$dp} {
   display: inline-flex;
   position: relative;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
 
   // ---- Input ----
   &__input {

package/lib/date-picker/style/index.css

@@ -1,7 +1,7 @@
 .ty-date-picker {
   display: inline-flex;
   position: relative;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-date-picker__input {
   display: inline-flex;

package/lib/descriptions/style/_index.scss

@@ -1,7 +1,6 @@
 @use '../../style/variables' as *;
 
 .#{$prefix}-descriptions {
-
   &__body {
     width: 100%;
     overflow: hidden;
@@ -24,7 +23,7 @@
     font-size: 16px;
   }
 
-  &__item_colon:after {
+  &__item_colon::after {
     content: ':';
     margin-left: 2px;
     margin-right: 5px;
@@ -32,15 +31,15 @@
 
   &__item-label {
     color: var(--ty-color-text-label);
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
     font-weight: 400;
-    line-height: $line-height-base;
+    line-height: var(--ty-line-height-base);
   }
 
   &__item-content {
     color: var(--ty-color-text-secondary);
-    font-size: $font-size-base;
-    line-height: $line-height-base;
+    font-size: var(--ty-font-size-base);
+    line-height: var(--ty-line-height-base);
   }
 
   &_bordered {

package/lib/descriptions/style/index.css

@@ -17,25 +17,25 @@
   font-weight: 600;
   font-size: 16px;
 }
-.ty-descriptions__item_colon:after {
+.ty-descriptions__item_colon::after {
   content: ":";
   margin-left: 2px;
   margin-right: 5px;
 }
 .ty-descriptions__item-label {
   color: var(--ty-color-text-label);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   font-weight: 400;
-  line-height: 1.5;
+  line-height: var(--ty-line-height-base);
 }
 .ty-descriptions__item-content {
   color: var(--ty-color-text-secondary);
-  font-size: 1rem;
-  line-height: 1.5;
+  font-size: var(--ty-font-size-base);
+  line-height: var(--ty-line-height-base);
 }
 .ty-descriptions_bordered .ty-descriptions__body {
   border: 1px solid var(--ty-descriptions-border);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
 }
 .ty-descriptions_bordered .ty-descriptions__row {
   border-bottom: 1px solid var(--ty-descriptions-border);

package/lib/empty/style/_index.scss

@@ -16,7 +16,7 @@
 
   &__desc {
     color: var(--ty-empty-desc-color);
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
     margin: 0;
   }
 

package/lib/empty/style/index.css

@@ -12,7 +12,7 @@
 }
 .ty-empty__desc {
   color: var(--ty-empty-desc-color);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   margin: 0;
 }
 .ty-empty__footer {

package/lib/form/style/_index.scss

@@ -1,7 +1,6 @@
 @use '../../style/variables' as *;
 
 .#{$prefix}-form {
-
   &_vertical {
     .#{$prefix}-form-item__label {
       text-align: left;
@@ -23,15 +22,15 @@
     text-align: right;
     vertical-align: top;
     color: var(--ty-color-text);
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
 
-    &_required:before {
+    &_required::before {
       content: '*';
       margin-right: 3px;
       color: var(--ty-form-error-color);
     }
 
-    &_colon:after {
+    &_colon::after {
       content: ':';
       margin: 0 8px 0 2px;
     }
@@ -65,7 +64,7 @@
 
   &__notice {
     font-size: 13px;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     background: var(--ty-form-notice-bg);
     color: var(--ty-form-notice-color);
     padding: 5px;
@@ -86,7 +85,7 @@
 
       &:focus{
         border-color: var(--ty-form-error-hover);
-        box-shadow: 0 0 0 2px rgba(255,77,79,.2);
+        box-shadow: 0 0 0 2px rgb(255 77 79 / 20%);
       }
     }
   }

package/lib/form/style/index.css

@@ -15,14 +15,14 @@
   text-align: right;
   vertical-align: top;
   color: var(--ty-color-text);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
-.ty-form-item__label_required:before {
+.ty-form-item__label_required::before {
   content: "*";
   margin-right: 3px;
   color: var(--ty-form-error-color);
 }
-.ty-form-item__label_colon:after {
+.ty-form-item__label_colon::after {
   content: ":";
   margin: 0 8px 0 2px;
 }
@@ -50,7 +50,7 @@
 }
 .ty-form-item__notice {
   font-size: 13px;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   background: var(--ty-form-notice-bg);
   color: var(--ty-form-notice-color);
   padding: 5px;

package/lib/index.d.ts

@@ -40,6 +40,7 @@ import { Link } from "./link/link.js";
 import { DefaultList } from "./list/index.js";
 import { Loader } from "./loader/loader.js";
 import { _default } from "./loading-bar/index.js";
+import { Marquee } from "./marquee/marquee.js";
 import { DefaultMenu } from "./menu/index.js";
 import { messageContainer } from "./message/message-container.js";
 import { DefaultSelect } from "./native-select/index.js";
@@ -87,4 +88,4 @@ import { en_US } from "./locale/en_US.js";
 import { zh_CN } from "./locale/zh_CN.js";
 import { useLocale } from "./_utils/use-locale.js";
 import { ThemeMode, useTheme } from "./_utils/use-theme.js";
-export { Alert, DefaultAnchor as Anchor, AspectRatio, AutoComplete, DefaultAvatar as Avatar, BackTop, Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, Calendar, DefaultCard as Card, DefaultCarousel as Carousel, Cascader, DefaultCheckbox as Checkbox, Col, DefaultCollapse as Collapse, ColorPicker, ConfigProvider, CopyToClipboard, Countdown, DatePicker, DefaultDesc as Descriptions, Divider, Drawer, Dropdown, Empty, Flex, DefaultFlip as Flip, DefaultForm as Form, Image, DefaultInput as Input, InputNumber, InputOTP, InputPassword, IntlProvider, Keyboard, DefaultLayout as Layout, Link, DefaultList as List, Loader, _default as LoadingBar, type Locale, DefaultMenu as Menu, messageContainer as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notificationContainer as Notification, Overlay, Pagination, PopConfirm, Popover, Progress, DefaultRadio as Radio, Rate, Result, Row, ScrollIndicator, Segmented, DefaultSelect$1 as Select, Skeleton, Slider, Space, DefaultSpeedDial as SpeedDial, Split, SplitButton, Statistic, DefaultSteps as Steps, Sticky, StrengthIndicator, Switch, Table, DefaultTabs as Tabs, DefaultTag as Tag, Textarea, type ThemeMode, TimePicker, DefaultTimeline as Timeline, Tooltip, Transfer, Transition, Tree, DefaultTypo as Typography, Upload, Waterfall, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };
+export { Alert, DefaultAnchor as Anchor, AspectRatio, AutoComplete, DefaultAvatar as Avatar, BackTop, Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, Calendar, DefaultCard as Card, DefaultCarousel as Carousel, Cascader, DefaultCheckbox as Checkbox, Col, DefaultCollapse as Collapse, ColorPicker, ConfigProvider, CopyToClipboard, Countdown, DatePicker, DefaultDesc as Descriptions, Divider, Drawer, Dropdown, Empty, Flex, DefaultFlip as Flip, DefaultForm as Form, Image, DefaultInput as Input, InputNumber, InputOTP, InputPassword, IntlProvider, Keyboard, DefaultLayout as Layout, Link, DefaultList as List, Loader, _default as LoadingBar, type Locale, Marquee, DefaultMenu as Menu, messageContainer as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notificationContainer as Notification, Overlay, Pagination, PopConfirm, Popover, Progress, DefaultRadio as Radio, Rate, Result, Row, ScrollIndicator, Segmented, DefaultSelect$1 as Select, Skeleton, Slider, Space, DefaultSpeedDial as SpeedDial, Split, SplitButton, Statistic, DefaultSteps as Steps, Sticky, StrengthIndicator, Switch, Table, DefaultTabs as Tabs, DefaultTag as Tag, Textarea, type ThemeMode, TimePicker, DefaultTimeline as Timeline, Tooltip, Transfer, Transition, Tree, DefaultTypo as Typography, Upload, Waterfall, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };