dsh-plugin-core 0.8.3 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/design/tokens-css.generated.d.ts +1 -1
- package/dist/design/tokens-css.generated.d.ts.map +1 -1
- package/dist/design/tokens-css.generated.js +1 -1
- package/dist/design/tokens-css.generated.js.map +1 -1
- package/dist/ui/Button.d.ts +1 -1
- package/dist/ui/Button.d.ts.map +1 -1
- package/dist/ui/Button.js +6 -2
- package/dist/ui/Button.js.map +1 -1
- package/dist/ui/Card.d.ts +1 -1
- package/dist/ui/Card.d.ts.map +1 -1
- package/dist/ui/Card.js +4 -1
- package/dist/ui/Card.js.map +1 -1
- package/dist/ui/Chip.d.ts +1 -1
- package/dist/ui/Chip.d.ts.map +1 -1
- package/dist/ui/Chip.js.map +1 -1
- package/dist/ui/Segmented.d.ts +12 -0
- package/dist/ui/Segmented.d.ts.map +1 -1
- package/dist/ui/Segmented.js +11 -2
- package/dist/ui/Segmented.js.map +1 -1
- package/dist/ui/card-css.generated.d.ts +1 -1
- package/dist/ui/card-css.generated.d.ts.map +1 -1
- package/dist/ui/card-css.generated.js +1 -1
- package/dist/ui/card-css.generated.js.map +1 -1
- package/dist/ui/chip-css.generated.d.ts +1 -1
- package/dist/ui/chip-css.generated.d.ts.map +1 -1
- package/dist/ui/chip-css.generated.js +1 -1
- package/dist/ui/chip-css.generated.js.map +1 -1
- package/dist/ui/controls/button-css.generated.d.ts +1 -1
- package/dist/ui/controls/button-css.generated.d.ts.map +1 -1
- package/dist/ui/controls/button-css.generated.js +1 -1
- package/dist/ui/controls/button-css.generated.js.map +1 -1
- package/dist/ui/controls/datetime-css.generated.d.ts +1 -1
- package/dist/ui/controls/datetime-css.generated.d.ts.map +1 -1
- package/dist/ui/controls/datetime-css.generated.js +1 -1
- package/dist/ui/controls/datetime-css.generated.js.map +1 -1
- package/dist/ui/controls/segmented-css.generated.d.ts +1 -1
- package/dist/ui/controls/segmented-css.generated.d.ts.map +1 -1
- package/dist/ui/controls/segmented-css.generated.js +1 -1
- package/dist/ui/controls/segmented-css.generated.js.map +1 -1
- package/dist/ui/index.d.ts +1 -1
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js.map +1 -1
- package/docs/design/style.md +13 -0
- package/docs/help/style.md +1 -1
- package/docs/help/ui.doc.ts +7 -7
- package/docs/help/ui.md +7 -7
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const CHIP_CSS = "\n/* \u4E09\u6761\u5C40\u90E8\u53D8\u91CF\u627F\u8F7D\u914D\u8272\uFF1Aneutral \u8D70\u65E7\u7070\u9762\uFF1B\u8BED\u4E49\u6863\u6362\u5E95\u5B57\u914D\u5BF9\uFF082026-10-20 \u7528\u6237\u8981\u591A\u8272\u591A\u5C3A\u5BF8\u6807\u7B7E\uFF09\u3002 */\n.dshpc-chip{--chip-bg:var(--dshpc-chip-bg);--chip-fg:var(--dshpc-fg);--chip-bg-hover:var(--dshpc-chip-bg-hover);\n display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:1px 8px;\n box-sizing:border-box;border-radius:var(--dshpc-radius-pill,999px);border:none;\n background:var(--chip-bg);color:var(--chip-fg);\n font-family:inherit;font-size:11px;line-height:18px;margin:0;\n /* 2026-10-18\uFF1Achip \u662F flex \u884C\u91CC\u7684\u5E38\u7528\u9879\uFF0C\u7981\u6B62\u88AB\u538B\u7F29\u6362\u884C\uFF08\u9884\u89C8\u7AD9\u51FA\u73B0\u8FC7\u6587\u5B57\u7AD6\u6392\u3001\u4E92\u76F8\u53E0\u538B\u7684\u6324\u538B\uFF09\u3002 */\n white-space:nowrap;flex:none;\n appearance:none;-webkit-appearance:none;\n}\n/* md \u6863\uFF1A\u5361\u7247\u5143\u4FE1\u606F\u884C\u7B49\u7A0D\u5927\u573A\u666F\uFF1Bsm \u5373\u65E7\u7248\u9ED8\u8BA4\uFF0C\u9010\u50CF\u7D20\u4E0D\u52A8\u3002 */\n.dshpc-chip--md{padding:2px 10px;font-size:12px;line-height:20px;}\n/* xs \u6863\uFF1A\u6807\u9898\u540E\u7F00\u7B49\u6781\u7D27\u51D1\u573A\u666F\uFF082026-10-20 \u7528\u6237\u8981\u66F4\u5C0F\u6807\u7B7E\uFF09\uFF1B16px \u9AD8\u3001font 10\u3002 */\n.dshpc-chip--xs{padding:0 6px;font-size:10px;line-height:16px;}\n/* \u8BED\u4E49\u8272\u5B9E\u5FC3\u6863\uFF1A\u5E95 / \u5B57 / hover \u914D\u5BF9\u4E0E Button \u540C\u6E90\uFF08\u9EC4\u5E95\u4E2D\u9AD8\u660E\u5EA6 \u21D2 \u5B57\u7528 --dshpc-on-warning\uFF09\u3002 */\n.dshpc-chip--business{--chip-bg:var(--dshpc-business);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-business-hover);}\n.dshpc-chip--success{--chip-bg:var(--dshpc-success);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-success-hover);}\n.dshpc-chip--warning{--chip-bg:var(--dshpc-warning);--chip-fg:var(--dshpc-on-warning);--chip-bg-hover:var(--dshpc-warning-hover);}\n.dshpc-chip--danger{--chip-bg:var(--dshpc-danger);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-danger-hover);}\n/* \u53EF\u70B9\u6001\uFF1Abutton \u6E32\u67D3\uFF08\u89C1 Chip.ts\uFF09\uFF0C\u5149\u6807 + hover \u52A0\u6DF1\u3002 */\n.dshpc-chip--clickable{cursor:pointer;transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-chip--clickable:hover:not(:disabled){background:var(--chip-bg-hover)}\n.dshpc-chip:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px}\n.dshpc-chip:disabled{cursor:default;color:var(--dshpc-fg-3)}\n/* maxWidth \u5305 MarqueeText \u65F6\uFF1A\u6807\u7B7E\u4F5C\u4E3A flex \u5B50\u9879\u5FC5\u987B\u80FD\u6536\u7F29\u5230\u5185\u5BB9\u4EE5\u4E0B\uFF0C\u5426\u5219\u7701\u7565\u53F7 / \u8DD1\u9A6C\u706F\u6D4B\u4E0D\u51C6 */\n.dshpc-chip .dshpc-chip__label{min-width:0;}\n@media (prefers-reduced-motion: reduce){.dshpc-chip{transition:none}}\n";
|
|
1
|
+
export declare const CHIP_CSS = "\n/* \u4E09\u6761\u5C40\u90E8\u53D8\u91CF\u627F\u8F7D\u914D\u8272\uFF1Aneutral \u8D70\u65E7\u7070\u9762\uFF1B\u8BED\u4E49\u6863\u6362\u5E95\u5B57\u914D\u5BF9\uFF082026-10-20 \u7528\u6237\u8981\u591A\u8272\u591A\u5C3A\u5BF8\u6807\u7B7E\uFF09\u3002 */\n.dshpc-chip{--chip-bg:var(--dshpc-chip-bg);--chip-fg:var(--dshpc-fg);--chip-bg-hover:var(--dshpc-chip-bg-hover);\n display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:1px 8px;\n box-sizing:border-box;border-radius:var(--dshpc-radius-pill,999px);border:none;\n background:var(--chip-bg);color:var(--chip-fg);\n font-family:inherit;font-size:11px;line-height:18px;margin:0;\n /* 2026-10-18\uFF1Achip \u662F flex \u884C\u91CC\u7684\u5E38\u7528\u9879\uFF0C\u7981\u6B62\u88AB\u538B\u7F29\u6362\u884C\uFF08\u9884\u89C8\u7AD9\u51FA\u73B0\u8FC7\u6587\u5B57\u7AD6\u6392\u3001\u4E92\u76F8\u53E0\u538B\u7684\u6324\u538B\uFF09\u3002 */\n white-space:nowrap;flex:none;\n appearance:none;-webkit-appearance:none;\n}\n/* md \u6863\uFF1A\u5361\u7247\u5143\u4FE1\u606F\u884C\u7B49\u7A0D\u5927\u573A\u666F\uFF1Bsm \u5373\u65E7\u7248\u9ED8\u8BA4\uFF0C\u9010\u50CF\u7D20\u4E0D\u52A8\u3002 */\n.dshpc-chip--md{padding:2px 10px;font-size:12px;line-height:20px;}\n/* xs \u6863\uFF1A\u6807\u9898\u540E\u7F00\u7B49\u6781\u7D27\u51D1\u573A\u666F\uFF082026-10-20 \u7528\u6237\u8981\u66F4\u5C0F\u6807\u7B7E\uFF09\uFF1B16px \u9AD8\u3001font 10\u3002 */\n.dshpc-chip--xs{padding:0 6px;font-size:10px;line-height:16px;}\n/* \u8BED\u4E49\u8272\u5B9E\u5FC3\u6863\uFF1A\u5E95 / \u5B57 / hover \u914D\u5BF9\u4E0E Button \u540C\u6E90\uFF08\u9EC4\u5E95\u4E2D\u9AD8\u660E\u5EA6 \u21D2 \u5B57\u7528 --dshpc-on-warning\uFF09\u3002 */\n.dshpc-chip--business{--chip-bg:var(--dshpc-business);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-business-hover);}\n.dshpc-chip--success{--chip-bg:var(--dshpc-success);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-success-hover);}\n.dshpc-chip--warning{--chip-bg:var(--dshpc-warning);--chip-fg:var(--dshpc-on-warning);--chip-bg-hover:var(--dshpc-warning-hover);}\n.dshpc-chip--danger{--chip-bg:var(--dshpc-danger);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-danger-hover);}\n/* \u6269\u5C55\u516B\u8272\uFF082026-10-29\uFF09\uFF1A\u5B9E\u5FC3\u9762\u5B57\u8272\u7EDF\u4E00\u767D\uFF08on-signal\uFF09\uFF0C\u660E\u5EA6\u5747\u4F4E\u4E8E\u9EC4 / \u9752\u67E0\uFF0C\u767D\u5B57\u4E24\u4E3B\u9898\u53EF\u8BFB\u3002 */\n.dshpc-chip--purple{--chip-bg:var(--dshpc-purple);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-purple-hover);}\n.dshpc-chip--pink{--chip-bg:var(--dshpc-pink);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-pink-hover);}\n.dshpc-chip--cyan{--chip-bg:var(--dshpc-cyan);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-cyan-hover);}\n.dshpc-chip--teal{--chip-bg:var(--dshpc-teal);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-teal-hover);}\n.dshpc-chip--orange{--chip-bg:var(--dshpc-orange);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-orange-hover);}\n.dshpc-chip--indigo{--chip-bg:var(--dshpc-indigo);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-indigo-hover);}\n.dshpc-chip--rose{--chip-bg:var(--dshpc-rose);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-rose-hover);}\n.dshpc-chip--slate{--chip-bg:var(--dshpc-slate);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-slate-hover);}\n/* \u53EF\u70B9\u6001\uFF1Abutton \u6E32\u67D3\uFF08\u89C1 Chip.ts\uFF09\uFF0C\u5149\u6807 + hover \u52A0\u6DF1\u3002 */\n.dshpc-chip--clickable{cursor:pointer;transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-chip--clickable:hover:not(:disabled){background:var(--chip-bg-hover)}\n.dshpc-chip:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px}\n.dshpc-chip:disabled{cursor:default;color:var(--dshpc-fg-3)}\n/* maxWidth \u5305 MarqueeText \u65F6\uFF1A\u6807\u7B7E\u4F5C\u4E3A flex \u5B50\u9879\u5FC5\u987B\u80FD\u6536\u7F29\u5230\u5185\u5BB9\u4EE5\u4E0B\uFF0C\u5426\u5219\u7701\u7565\u53F7 / \u8DD1\u9A6C\u706F\u6D4B\u4E0D\u51C6 */\n.dshpc-chip .dshpc-chip__label{min-width:0;}\n@media (prefers-reduced-motion: reduce){.dshpc-chip{transition:none}}\n";
|
|
2
2
|
//# sourceMappingURL=chip-css.generated.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip-css.generated.d.ts","sourceRoot":"","sources":["../../src/ui/chip-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"chip-css.generated.d.ts","sourceRoot":"","sources":["../../src/ui/chip-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,mpIAA2gG,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
// ⚠️ 生成物,勿手改。真源 = src/ui/chip.css
|
|
2
2
|
// 由 scripts/gen-css.mjs 生成(`pnpm run gen:css`):改样式请改那个 .css 文件后重新生成。
|
|
3
|
-
export const CHIP_CSS = "\n/* 三条局部变量承载配色:neutral 走旧灰面;语义档换底字配对(2026-10-20 用户要多色多尺寸标签)。 */\n.dshpc-chip{--chip-bg:var(--dshpc-chip-bg);--chip-fg:var(--dshpc-fg);--chip-bg-hover:var(--dshpc-chip-bg-hover);\n display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:1px 8px;\n box-sizing:border-box;border-radius:var(--dshpc-radius-pill,999px);border:none;\n background:var(--chip-bg);color:var(--chip-fg);\n font-family:inherit;font-size:11px;line-height:18px;margin:0;\n /* 2026-10-18:chip 是 flex 行里的常用项,禁止被压缩换行(预览站出现过文字竖排、互相叠压的挤压)。 */\n white-space:nowrap;flex:none;\n appearance:none;-webkit-appearance:none;\n}\n/* md 档:卡片元信息行等稍大场景;sm 即旧版默认,逐像素不动。 */\n.dshpc-chip--md{padding:2px 10px;font-size:12px;line-height:20px;}\n/* xs 档:标题后缀等极紧凑场景(2026-10-20 用户要更小标签);16px 高、font 10。 */\n.dshpc-chip--xs{padding:0 6px;font-size:10px;line-height:16px;}\n/* 语义色实心档:底 / 字 / hover 配对与 Button 同源(黄底中高明度 ⇒ 字用 --dshpc-on-warning)。 */\n.dshpc-chip--business{--chip-bg:var(--dshpc-business);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-business-hover);}\n.dshpc-chip--success{--chip-bg:var(--dshpc-success);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-success-hover);}\n.dshpc-chip--warning{--chip-bg:var(--dshpc-warning);--chip-fg:var(--dshpc-on-warning);--chip-bg-hover:var(--dshpc-warning-hover);}\n.dshpc-chip--danger{--chip-bg:var(--dshpc-danger);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-danger-hover);}\n/* 可点态:button 渲染(见 Chip.ts),光标 + hover 加深。 */\n.dshpc-chip--clickable{cursor:pointer;transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-chip--clickable:hover:not(:disabled){background:var(--chip-bg-hover)}\n.dshpc-chip:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px}\n.dshpc-chip:disabled{cursor:default;color:var(--dshpc-fg-3)}\n/* maxWidth 包 MarqueeText 时:标签作为 flex 子项必须能收缩到内容以下,否则省略号 / 跑马灯测不准 */\n.dshpc-chip .dshpc-chip__label{min-width:0;}\n@media (prefers-reduced-motion: reduce){.dshpc-chip{transition:none}}\n";
|
|
3
|
+
export const CHIP_CSS = "\n/* 三条局部变量承载配色:neutral 走旧灰面;语义档换底字配对(2026-10-20 用户要多色多尺寸标签)。 */\n.dshpc-chip{--chip-bg:var(--dshpc-chip-bg);--chip-fg:var(--dshpc-fg);--chip-bg-hover:var(--dshpc-chip-bg-hover);\n display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:1px 8px;\n box-sizing:border-box;border-radius:var(--dshpc-radius-pill,999px);border:none;\n background:var(--chip-bg);color:var(--chip-fg);\n font-family:inherit;font-size:11px;line-height:18px;margin:0;\n /* 2026-10-18:chip 是 flex 行里的常用项,禁止被压缩换行(预览站出现过文字竖排、互相叠压的挤压)。 */\n white-space:nowrap;flex:none;\n appearance:none;-webkit-appearance:none;\n}\n/* md 档:卡片元信息行等稍大场景;sm 即旧版默认,逐像素不动。 */\n.dshpc-chip--md{padding:2px 10px;font-size:12px;line-height:20px;}\n/* xs 档:标题后缀等极紧凑场景(2026-10-20 用户要更小标签);16px 高、font 10。 */\n.dshpc-chip--xs{padding:0 6px;font-size:10px;line-height:16px;}\n/* 语义色实心档:底 / 字 / hover 配对与 Button 同源(黄底中高明度 ⇒ 字用 --dshpc-on-warning)。 */\n.dshpc-chip--business{--chip-bg:var(--dshpc-business);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-business-hover);}\n.dshpc-chip--success{--chip-bg:var(--dshpc-success);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-success-hover);}\n.dshpc-chip--warning{--chip-bg:var(--dshpc-warning);--chip-fg:var(--dshpc-on-warning);--chip-bg-hover:var(--dshpc-warning-hover);}\n.dshpc-chip--danger{--chip-bg:var(--dshpc-danger);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-danger-hover);}\n/* 扩展八色(2026-10-29):实心面字色统一白(on-signal),明度均低于黄 / 青柠,白字两主题可读。 */\n.dshpc-chip--purple{--chip-bg:var(--dshpc-purple);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-purple-hover);}\n.dshpc-chip--pink{--chip-bg:var(--dshpc-pink);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-pink-hover);}\n.dshpc-chip--cyan{--chip-bg:var(--dshpc-cyan);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-cyan-hover);}\n.dshpc-chip--teal{--chip-bg:var(--dshpc-teal);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-teal-hover);}\n.dshpc-chip--orange{--chip-bg:var(--dshpc-orange);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-orange-hover);}\n.dshpc-chip--indigo{--chip-bg:var(--dshpc-indigo);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-indigo-hover);}\n.dshpc-chip--rose{--chip-bg:var(--dshpc-rose);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-rose-hover);}\n.dshpc-chip--slate{--chip-bg:var(--dshpc-slate);--chip-fg:var(--dshpc-on-signal);--chip-bg-hover:var(--dshpc-slate-hover);}\n/* 可点态:button 渲染(见 Chip.ts),光标 + hover 加深。 */\n.dshpc-chip--clickable{cursor:pointer;transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-chip--clickable:hover:not(:disabled){background:var(--chip-bg-hover)}\n.dshpc-chip:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px}\n.dshpc-chip:disabled{cursor:default;color:var(--dshpc-fg-3)}\n/* maxWidth 包 MarqueeText 时:标签作为 flex 子项必须能收缩到内容以下,否则省略号 / 跑马灯测不准 */\n.dshpc-chip .dshpc-chip__label{min-width:0;}\n@media (prefers-reduced-motion: reduce){.dshpc-chip{transition:none}}\n";
|
|
4
4
|
//# sourceMappingURL=chip-css.generated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip-css.generated.js","sourceRoot":"","sources":["../../src/ui/chip-css.generated.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,qEAAqE;AACrE,MAAM,CAAC,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"chip-css.generated.js","sourceRoot":"","sources":["../../src/ui/chip-css.generated.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,qEAAqE;AACrE,MAAM,CAAC,MAAM,QAAQ,GAAG,wgGAAwgG,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const BUTTON_CSS = "\n/* \u2500\u2500 \u6309\u94AE / \u56FE\u6807\u94AE P2 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \u4E0E Segmented \u540C\u4E00\u6761\u9AD8\u5EA6\u7EAA\u5F8B\uFF1A--dshpc-control-h-sm(24) / -md(28) / -lg(32)\uFF0C\n \u6709\u8FB9\u6846\u7684 variant \u7528 1px \u771F\u8FB9\u6846 + \u5185\u90E8 padding \u8865\u56DE\uFF0C**\u6709\u8FB9 / \u65E0\u8FB9\u540C\u9AD8**\u3002\n\n \u4E09\u6761\u53D7\u63A7\u8F74\uFF082026-10-19 \u91CD\u5199\uFF0C\u5BF9\u9F50\u4E3B\u6D41 UI \u6846\u67B6\u7684\u5206\u7C7B\u53E3\u5F84\uFF09\uFF1A\n \u00B7 variant \u2014\u2014 \u5916\u89C2\u6863 = \u5F62\u6001 + \u8BED\u4E49\u8272\uFF0C\u5171 10 \u6863\uFF1A\n primary / secondary / outline / ghost / danger / success / warning / info /\n danger-outline\uFF08\u7EA2\u5B57\u63CF\u8FB9\uFF09/ link\uFF08\u884C\u5185\u94FE\u63A5\uFF09\n \u00B7 size \u2014\u2014 sm / md / lg\n \u00B7 block \u2014\u2014 \u6491\u6EE1\u7236\u5BBD\n \u6BCF\u4E00\u6863**\u53EA\u586B 5 \u4E2A\u5C40\u90E8\u53D8\u91CF**\uFF08--btn-bg / -fg / -border / -bg-hover / -bg-active\uFF09\uFF0C\n \u7ED3\u6784\u4E0E\u4EA4\u4E92\u53EA\u6709\u4E0A\u9762\u8FD9\u4E00\u4EFD\uFF1B\u4EFB\u4F55\u6863\u4F4D\u90FD\u4E0D\u8BB8\u518D\u5199\u4E00\u904D display/height/padding\u3002\n \u81EA\u5B9A\u4E49\u989C\u8272\uFF08Button \u7684 color \u53C2\u6570\uFF09\u540C\u6837\u53EA\u8986\u76D6\u8FD9 5 \u4E2A\u53D8\u91CF\uFF08token \u8986\u76D6\uFF0C\u4E0D\u662F\u65B0\u76AE\u80A4\uFF09\u3002\n\n \u26A0\uFE0F hover \u4E0D\u518D\u7528 opacity \u538B\u4E00\u5C42\uFF08\u7528\u6237 2026-10-19\uFF1A\u300C\u9ED1\u8272\u548C\u7EA2\u8272\u7684\u6309\u94AE\u79FB\u4E0A\u53BB\u53D8\u5316\u592A\u5C0F\uFF0C\n \u5B8C\u5168\u611F\u89C9\u4E0D\u5230\u989C\u8272\u53D8\u4E86\u300D\uFF09\u21D2 \u8D70 --dshpc-*-hover / -active \u7684\u660E\u786E\u6DF7\u8272\uFF0C\u89C1 tokens-css.ts\u3002 */\n.dshpc-btn{--btn-bg:transparent;--btn-fg:var(--dshpc-fg);--btn-border:transparent;--btn-pad:12px;\n --btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);--btn-fg-hover:var(--btn-fg);\n appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;\n box-sizing:border-box;border:1px solid var(--btn-border);border-radius:var(--dshpc-radius-md);\n background-color:var(--btn-bg);color:var(--btn-fg);font-family:inherit;font-weight:500;white-space:nowrap;cursor:pointer;\n transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),border-color var(--dshpc-dur-fast) var(--dshpc-ease),color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease),transform var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-btn--sm{--btn-pad:10px;height:var(--dshpc-control-h-sm);padding:0 var(--btn-pad);font-size:var(--dshpc-font-sm);line-height:1;}\n.dshpc-btn--md{--btn-pad:12px;height:var(--dshpc-control-h-md);padding:0 var(--btn-pad);font-size:var(--dshpc-font-md);line-height:1;}\n.dshpc-btn--lg{--btn-pad:14px;height:var(--dshpc-control-h-lg);padding:0 var(--btn-pad);font-size:var(--dshpc-font-md);line-height:1;}\n/* block\uFF1A\u6491\u6EE1\u7236\u5BBD\uFF08\u8868\u5355\u5E95\u680F / \u62BD\u5C49\u5E95\u90E8\u7684\u4E3B\u64CD\u4F5C\uFF09 */\n.dshpc-btn--block{display:flex;width:100%;}\n/* block + \u524D\u7F6E\u56FE\u6807 \u21D2 \u6587\u5B57\u89C6\u89C9\u5C45\u4E2D\uFF082026-10-19 \u7528\u6237\u70B9\u540D\uFF09\uFF1A\n \u5185\u5BB9\u7EC4 [\u56FE\u6807 + \u95F4\u8DDD + \u6587\u5B57] \u6574\u4F53\u5728\u76D2\u5185\u5C45\u4E2D\u65F6\uFF0C**\u6587\u5B57**\u7684\u4E2D\u5FC3\u4F1A\u88AB\u56FE\u6807\u63A8\u53F3\u534A\u683C\u3002\n \u628A\u53F3\u5185\u8FB9\u8DDD\u8865\u4E0A\u300C\u56FE\u6807\u5BBD + \u95F4\u8DDD\u300D\uFF0C\u53EF\u7528\u76D2\u968F\u4E4B\u5DE6\u79FB\u540C\u91CF \u21D2 \u6587\u5B57\u843D\u56DE\u89C6\u89C9\u4E2D\u5FC3\uFF0C\u56FE\u6807\u8D34\u5DE6\u4FA7\u3002\n \u56FE\u6807\u5BBD\u6309 1.2em \u4F30\uFF08\u5B98\u65B9\u56FE\u6807 14/16px vs \u5B57\u53F7 12/13px\uFF09\uFF0Cem \u968F\u5B57\u53F7\u6863\u81EA\u52A8\u7F29\u653E\u3002 */\n.dshpc-btn--block.dshpc-btn--icon-start{padding-right:calc(var(--btn-pad) + 1.2em + 6px);}\n.dshpc-btn__icon,.dshpc-btn__icon-end{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0;}\n.dshpc-btn__icon svg,.dshpc-btn__icon-end svg{display:block;margin:0;}\n/* maxWidth \u5305 MarqueeText \u65F6\uFF1A\u6807\u7B7E\u4F5C\u4E3A flex \u5B50\u9879\u5FC5\u987B\u80FD\u6536\u7F29\u5230\u5185\u5BB9\u4EE5\u4E0B\uFF0C\u5426\u5219\u7701\u7565\u53F7 / \u8DD1\u9A6C\u706F\u6D4B\u4E0D\u51C6 */\n.dshpc-btn .dshpc-btn__label{min-width:0;}\n/* loading\uFF1A\u4E0D\u6362 DOM \u7ED3\u6784\uFF0C\u53EA\u5728\u6587\u6848\u524D\u63D2\u4E00\u4E2A\u540C\u8272\u5C0F\u5708\u3002\n \u26A0\uFE0F 2026-10-20 \u6539\u753B\u6CD5\uFF1A\u539F\u6765\u662F border:1.5px \u52A0 border-radius:999px \u753B\u7684\u73AF \u2014\u2014 \u771F\u673A\u5B9E\u6D4B computed\n radius \u5C31\u662F 999px\u3001\u5BBD\u9AD8\u90FD\u662F 12px\uFF08\u6CA1\u88AB\u4EFB\u4F55\u6837\u5F0F\u8986\u76D6\uFF09\uFF0C\u770B\u7740\u5374\"\u50CF\u5706\u89D2\u65B9\"\uFF0C\u539F\u56E0\u662F**\u6B21\u50CF\u7D20\u8FB9\u6846\n \uFF081.5px\uFF09\u5728 12px \u8FD9\u4E48\u5C0F\u7684\u5706\u4E0A\u88AB\u6297\u952F\u9F7F\u63D2\u503C\u62C9\u6BDB**\u3002\u6539\u7528 SVG \u77E2\u91CF\u5F27\uFF1A\u4EFB\u610F DPR \u4E0B\u90FD\u662F\u771F\u5706\u3002 */\n.dshpc-btn__spinner{display:block;flex:none;width:12px;height:12px;\n animation:dshpc-btn-spin .7s linear infinite;}\n/* shortcut: 12px \u662F\u56FA\u5B9A\u503C\uFF0C\u4E0D\u968F\u6309\u94AE\u5B57\u53F7\u7F29\u653E\uFF1B\u8981\u66F4\u5927\u5C31\u6539\u8FD9\u4E00\u5904\u3002 */\n@keyframes dshpc-btn-spin{to{transform:rotate(360deg)}}\n\n/* \u4EA4\u4E92\u6001\uFF1A\u989C\u8272\u53D8\u5316\u5199\u5728\u53D8\u91CF\u4E0A \u21D2 \u6240\u6709\u6863\u4F4D\u4E00\u6B21\u751F\u6548\uFF0C\u4E14\u53D8\u5316\u5E45\u5EA6\u7531 token \u51B3\u5B9A\uFF08\u591F\u660E\u663E\uFF09 */\n.dshpc-btn:hover:not(:disabled){background-color:var(--btn-bg-hover);color:var(--btn-fg-hover);}\n.dshpc-btn:active:not(:disabled){background-color:var(--btn-bg-active);transform:translateY(1px);}\n.dshpc-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:2px;}\n.dshpc-btn:disabled{cursor:default;opacity:.5;}\n\n.dshpc-btn--primary{--btn-bg:var(--dshpc-accent);--btn-fg:var(--dshpc-fg-inverse);\n --btn-bg-hover:var(--dshpc-accent-hover);--btn-bg-active:var(--dshpc-accent-active);}\n/* secondary\uFF1A\u4E2D\u6027\u5B9E\u5FC3\uFF08\u7070\u9762\uFF09\uFF0C\u7528\u4E8E\u300C\u53D6\u6D88 / \u6B21\u8981\u300D\u8FD9\u7C7B\u4E0E\u4E3B\u64CD\u4F5C\u5E76\u6392\u7684\u6309\u94AE */\n.dshpc-btn--secondary{--btn-bg:var(--dshpc-hover);--btn-fg:var(--dshpc-fg);\n --btn-bg-hover:var(--dshpc-active);--btn-bg-active:var(--dshpc-active);}\n.dshpc-btn--outline{--btn-bg:var(--dshpc-surface-1);--btn-border:var(--dshpc-border-strong);\n --btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);}\n.dshpc-btn--ghost{--btn-fg:var(--dshpc-fg-2);--btn-fg-hover:var(--dshpc-fg);\n --btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);}\n.dshpc-btn--danger{--btn-bg:var(--dshpc-danger);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-danger-hover);--btn-bg-active:var(--dshpc-danger-active);}\n.dshpc-btn--success{--btn-bg:var(--dshpc-success);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-success-hover);--btn-bg-active:var(--dshpc-success-active);}\n.dshpc-btn--warning{--btn-bg:var(--dshpc-warning);--btn-fg:var(--dshpc-on-warning);\n --btn-bg-hover:var(--dshpc-warning-hover);--btn-bg-active:var(--dshpc-warning-active);}\n.dshpc-btn--info{--btn-bg:var(--dshpc-business);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-business-hover);--btn-bg-active:var(--dshpc-business-active);}\n/* danger-outline\uFF1A\u7EA2\u5B57\u63CF\u8FB9\uFF08\u7834\u574F\u6027\u6B21\u8981\u64CD\u4F5C\uFF0C\u5982\u5361\u7247\u4E0A\u7684\u300C\u5220\u9664\u300D\uFF09\u3002\n \u26A0\uFE0F \u65E7\u4FEE\u9970\u7C7B danger-ink \u4FDD\u7559\u4E3A\u522B\u540D\uFF08\u6D88\u8D39\u65B9\u53EF\u80FD\u8FD8\u5728\u6302\uFF09\uFF0C\u4E24\u8005\u540C\u4E00\u5957\u76AE\u80A4\u3002 */\n.dshpc-btn--danger-outline,.dshpc-btn--danger-ink{--btn-border:var(--dshpc-danger);--btn-fg:var(--dshpc-danger);\n --btn-fg-hover:var(--dshpc-danger);--btn-bg-hover:var(--dshpc-danger-soft);--btn-bg-active:var(--dshpc-danger-soft);}\n/* link\uFF1A\u884C\u5185\u6587\u5B57\u94FE\u63A5\u578B\uFF08\u4F1A\u8BDD / \u4EA7\u51FA\u6587\u4EF6\u540D\uFF09\uFF0C\u65E0\u5E95\u65E0\u8FB9\u3001\u54C1\u724C\u84DD\u3001hover \u4E0B\u5212\u7EBF */\n.dshpc-btn--link{--btn-fg:var(--dshpc-link);--btn-fg-hover:var(--dshpc-link);\n --btn-bg-hover:transparent;--btn-bg-active:transparent;\n height:auto;padding:0;border:0;background:none;font-weight:400;text-align:left;}\n.dshpc-btn--link:hover:not(:disabled){text-decoration:underline;}\n\n/* \u56FE\u6807\u94AE\uFF1A\u7EAF\u56FE\u6807\uFF0C\u65B9\u5F62\uFF1B\u5C3A\u5BF8\u6863\u7684\u5BBD\u9AD8\u4E0E\u540C\u6863\u6587\u5B57\u6309\u94AE\u7B49\u9AD8\u3001\u5706\u89D2\u7EDF\u4E00\u5403 md\uFF08\u4E0E .dshpc-btn \u540C\u6B3E\uFF0C2026-10-28 \u62CD\u677F\uFF09 */\n.dshpc-iconbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;\n border:1px solid transparent;border-radius:var(--dshpc-radius-md);background:transparent;color:var(--dshpc-fg-2);\n font-family:inherit;cursor:pointer;flex:none;\n transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),border-color var(--dshpc-dur-fast) var(--dshpc-ease),color var(--dshpc-dur-fast) var(--dshpc-ease),opacity var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-iconbtn--sm{width:var(--dshpc-control-h-sm);height:var(--dshpc-control-h-sm);font-size:var(--dshpc-font-sm);}\n.dshpc-iconbtn--md{width:var(--dshpc-control-h-md);height:var(--dshpc-control-h-md);font-size:var(--dshpc-font-md);}\n.dshpc-iconbtn--lg{width:var(--dshpc-control-h-lg);height:var(--dshpc-control-h-lg);font-size:var(--dshpc-font-md);}\n.dshpc-iconbtn--plain{color:var(--dshpc-fg-2);}\n.dshpc-iconbtn--outline{background:var(--dshpc-surface-1);border-color:var(--dshpc-border);color:var(--dshpc-fg-2);}\n.dshpc-iconbtn--danger{color:var(--dshpc-danger);}\n.dshpc-iconbtn:hover:not(:disabled){background:var(--dshpc-hover);color:var(--dshpc-fg);}\n.dshpc-iconbtn--danger:hover:not(:disabled){background:var(--dshpc-danger-soft);color:var(--dshpc-danger);}\n.dshpc-iconbtn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:2px;}\n.dshpc-iconbtn:disabled{cursor:default;opacity:.4;}\n\n/* \u2500\u2500 \u884C\u5F0F\u6587\u4EF6\u6309\u94AE\uFF08\u56FE\u6807 + \u6587\u4EF6\u540D\uFF09P2\uFF1A**\u5168\u7AD9\u552F\u4E00\u5B9E\u73B0**\uFF082026-10-04 \u6536\u7F16\uFF09\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \u7528\u9014\uFF1A\u300C\u4EA7\u51FA\u7269 / \u9644\u4EF6\u300D\u90A3\u79CD**\u4E00\u884C\u4E00\u4E2A\u6587\u4EF6**\u7684\u6E05\u5355\u9879\uFF08\u57FA\u7840\u4FE1\u606F\u53F3\u680F\u4EA7\u51FA\u7269\u6E05\u5355\u3001\u9644\u4EF6\u533A\u3001\n \u6267\u884C\u8BB0\u5F55\u9875\u7684\u5C55\u5F00\u533A\uFF09\u3002\u5E73\u65F6\u900F\u660E\u3001**\u9F20\u6807\u79FB\u4E0A\u53BB\u624D\u51FA\u6D45\u5E95**\uFF08\u6CBF\u7528\u7528\u6237 2026-10-03 \u5B9A\u7684\u89C2\u611F\uFF09\u3002\n \u4E24\u4E2A\u5F62\u6001\u4FEE\u9970\u7C7B\uFF1A\n --block \u6491\u6EE1\u7236\u5BBD\uFF08\u6E05\u5355\u91CC\u4E00\u9879\u4E00\u884C\uFF09\n --inline \u5185\u5BB9\u5BBD\uFF08\u8DDF\u5728\u6587\u5B57\u540E\u5934\uFF0C\u5982\u9644\u4EF6\u884C\uFF09\n \u6536\u7F16\u539F\u56E0\uFF1A\u8FD9\u4EFD\u76AE\u80A4\u6B64\u524D\u53EA\u5199\u5728 task-list.tsx \u7684 TASK_LIST_CSS \u91CC\uFF08\u65E7\u540D .dshpc-info-out\uFF09\uFF0C\n \u6267\u884C\u8BB0\u5F55\u9875\u5C55\u5F00\u533A\u8981\u7528\u540C\u4E00\u79CD\u89C2\u611F \u21D2 \u4E0A\u63D0\u57FA\u7840\u5C42\uFF0C\u907F\u514D\u518D\u51FA\u73B0\u300C\u5404\u5199\u4E00\u4EFD\u5916\u89C2\u300D\uFF08\u540C\u540D\u4E0D\u540C\u76AE\u7684\u5751\u521A\u8E29\u8FC7\uFF09\u3002 */\n.dshpc-filechip{appearance:none;-webkit-appearance:none;border:0;border-radius:var(--dshpc-radius-xs);\n background:transparent;color:var(--dshpc-fg);font:inherit;text-align:left;cursor:pointer;min-width:0;\n transition:background-color var(--dshpc-dur) var(--dshpc-ease);}\n.dshpc-filechip:hover:not(:disabled){background:var(--dshpc-chip-bg);}\n.dshpc-filechip:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px;}\n.dshpc-filechip:disabled{cursor:default;background:transparent;color:var(--dshpc-fg-3);}\n.dshpc-filechip--block{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;\n padding:4px 6px;font-size:var(--dshpc-font-xs);}\n.dshpc-filechip--inline{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;font-size:var(--dshpc-font-sm);}\n\n@media (prefers-reduced-motion: reduce){.dshpc-btn,.dshpc-iconbtn,.dshpc-filechip{transition:none;}}\n";
|
|
1
|
+
export declare const BUTTON_CSS = "\n/* \u2500\u2500 \u6309\u94AE / \u56FE\u6807\u94AE P2 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \u4E0E Segmented \u540C\u4E00\u6761\u9AD8\u5EA6\u7EAA\u5F8B\uFF1A--dshpc-control-h-sm(24) / -md(28) / -lg(32)\uFF0C\n \u6709\u8FB9\u6846\u7684 variant \u7528 1px \u771F\u8FB9\u6846 + \u5185\u90E8 padding \u8865\u56DE\uFF0C**\u6709\u8FB9 / \u65E0\u8FB9\u540C\u9AD8**\u3002\n\n \u4E09\u6761\u53D7\u63A7\u8F74\uFF082026-10-19 \u91CD\u5199\uFF0C\u5BF9\u9F50\u4E3B\u6D41 UI \u6846\u67B6\u7684\u5206\u7C7B\u53E3\u5F84\uFF09\uFF1A\n \u00B7 variant \u2014\u2014 \u5916\u89C2\u6863 = \u5F62\u6001 + \u8BED\u4E49\u8272\uFF0C\u5171 10 \u6863\uFF1A\n primary / secondary / outline / ghost / danger / success / warning / info /\n danger-outline\uFF08\u7EA2\u5B57\u63CF\u8FB9\uFF09/ link\uFF08\u884C\u5185\u94FE\u63A5\uFF09\n \u00B7 size \u2014\u2014 sm / md / lg\n \u00B7 block \u2014\u2014 \u6491\u6EE1\u7236\u5BBD\n \u6BCF\u4E00\u6863**\u53EA\u586B 5 \u4E2A\u5C40\u90E8\u53D8\u91CF**\uFF08--btn-bg / -fg / -border / -bg-hover / -bg-active\uFF09\uFF0C\n \u7ED3\u6784\u4E0E\u4EA4\u4E92\u53EA\u6709\u4E0A\u9762\u8FD9\u4E00\u4EFD\uFF1B\u4EFB\u4F55\u6863\u4F4D\u90FD\u4E0D\u8BB8\u518D\u5199\u4E00\u904D display/height/padding\u3002\n \u81EA\u5B9A\u4E49\u989C\u8272\uFF08Button \u7684 color \u53C2\u6570\uFF09\u540C\u6837\u53EA\u8986\u76D6\u8FD9 5 \u4E2A\u53D8\u91CF\uFF08token \u8986\u76D6\uFF0C\u4E0D\u662F\u65B0\u76AE\u80A4\uFF09\u3002\n\n \u26A0\uFE0F hover \u4E0D\u518D\u7528 opacity \u538B\u4E00\u5C42\uFF08\u7528\u6237 2026-10-19\uFF1A\u300C\u9ED1\u8272\u548C\u7EA2\u8272\u7684\u6309\u94AE\u79FB\u4E0A\u53BB\u53D8\u5316\u592A\u5C0F\uFF0C\n \u5B8C\u5168\u611F\u89C9\u4E0D\u5230\u989C\u8272\u53D8\u4E86\u300D\uFF09\u21D2 \u8D70 --dshpc-*-hover / -active \u7684\u660E\u786E\u6DF7\u8272\uFF0C\u89C1 tokens-css.ts\u3002 */\n.dshpc-btn{--btn-bg:transparent;--btn-fg:var(--dshpc-fg);--btn-border:transparent;--btn-pad:12px;\n --btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);--btn-fg-hover:var(--btn-fg);\n appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;\n box-sizing:border-box;border:1px solid var(--btn-border);border-radius:var(--dshpc-radius-md);\n background-color:var(--btn-bg);color:var(--btn-fg);font-family:inherit;font-weight:500;white-space:nowrap;cursor:pointer;\n transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),border-color var(--dshpc-dur-fast) var(--dshpc-ease),color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease),transform var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-btn--sm{--btn-pad:10px;height:var(--dshpc-control-h-sm);padding:0 var(--btn-pad);font-size:var(--dshpc-font-sm);line-height:1;}\n.dshpc-btn--md{--btn-pad:12px;height:var(--dshpc-control-h-md);padding:0 var(--btn-pad);font-size:var(--dshpc-font-md);line-height:1;}\n.dshpc-btn--lg{--btn-pad:14px;height:var(--dshpc-control-h-lg);padding:0 var(--btn-pad);font-size:var(--dshpc-font-md);line-height:1;}\n/* block\uFF1A\u6491\u6EE1\u7236\u5BBD\uFF08\u8868\u5355\u5E95\u680F / \u62BD\u5C49\u5E95\u90E8\u7684\u4E3B\u64CD\u4F5C\uFF09 */\n.dshpc-btn--block{display:flex;width:100%;}\n/* block + \u524D\u7F6E\u56FE\u6807 \u21D2 \u6587\u5B57\u89C6\u89C9\u5C45\u4E2D\uFF082026-10-19 \u7528\u6237\u70B9\u540D\uFF09\uFF1A\n \u5185\u5BB9\u7EC4 [\u56FE\u6807 + \u95F4\u8DDD + \u6587\u5B57] \u6574\u4F53\u5728\u76D2\u5185\u5C45\u4E2D\u65F6\uFF0C**\u6587\u5B57**\u7684\u4E2D\u5FC3\u4F1A\u88AB\u56FE\u6807\u63A8\u53F3\u534A\u683C\u3002\n \u628A\u53F3\u5185\u8FB9\u8DDD\u8865\u4E0A\u300C\u56FE\u6807\u5BBD + \u95F4\u8DDD\u300D\uFF0C\u53EF\u7528\u76D2\u968F\u4E4B\u5DE6\u79FB\u540C\u91CF \u21D2 \u6587\u5B57\u843D\u56DE\u89C6\u89C9\u4E2D\u5FC3\uFF0C\u56FE\u6807\u8D34\u5DE6\u4FA7\u3002\n \u56FE\u6807\u5BBD\u6309 1.2em \u4F30\uFF08\u5B98\u65B9\u56FE\u6807 14/16px vs \u5B57\u53F7 12/13px\uFF09\uFF0Cem \u968F\u5B57\u53F7\u6863\u81EA\u52A8\u7F29\u653E\u3002 */\n.dshpc-btn--block.dshpc-btn--icon-start{padding-right:calc(var(--btn-pad) + 1.2em + 6px);}\n.dshpc-btn__icon,.dshpc-btn__icon-end{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0;}\n.dshpc-btn__icon svg,.dshpc-btn__icon-end svg{display:block;margin:0;}\n/* maxWidth \u5305 MarqueeText \u65F6\uFF1A\u6807\u7B7E\u4F5C\u4E3A flex \u5B50\u9879\u5FC5\u987B\u80FD\u6536\u7F29\u5230\u5185\u5BB9\u4EE5\u4E0B\uFF0C\u5426\u5219\u7701\u7565\u53F7 / \u8DD1\u9A6C\u706F\u6D4B\u4E0D\u51C6 */\n.dshpc-btn .dshpc-btn__label{min-width:0;}\n/* loading\uFF1A\u4E0D\u6362 DOM \u7ED3\u6784\uFF0C\u53EA\u5728\u6587\u6848\u524D\u63D2\u4E00\u4E2A\u540C\u8272\u5C0F\u5708\u3002\n \u26A0\uFE0F 2026-10-20 \u6539\u753B\u6CD5\uFF1A\u539F\u6765\u662F border:1.5px \u52A0 border-radius:999px \u753B\u7684\u73AF \u2014\u2014 \u771F\u673A\u5B9E\u6D4B computed\n radius \u5C31\u662F 999px\u3001\u5BBD\u9AD8\u90FD\u662F 12px\uFF08\u6CA1\u88AB\u4EFB\u4F55\u6837\u5F0F\u8986\u76D6\uFF09\uFF0C\u770B\u7740\u5374\"\u50CF\u5706\u89D2\u65B9\"\uFF0C\u539F\u56E0\u662F**\u6B21\u50CF\u7D20\u8FB9\u6846\n \uFF081.5px\uFF09\u5728 12px \u8FD9\u4E48\u5C0F\u7684\u5706\u4E0A\u88AB\u6297\u952F\u9F7F\u63D2\u503C\u62C9\u6BDB**\u3002\u6539\u7528 SVG \u77E2\u91CF\u5F27\uFF1A\u4EFB\u610F DPR \u4E0B\u90FD\u662F\u771F\u5706\u3002 */\n.dshpc-btn__spinner{display:block;flex:none;width:12px;height:12px;\n animation:dshpc-btn-spin .7s linear infinite;}\n/* shortcut: 12px \u662F\u56FA\u5B9A\u503C\uFF0C\u4E0D\u968F\u6309\u94AE\u5B57\u53F7\u7F29\u653E\uFF1B\u8981\u66F4\u5927\u5C31\u6539\u8FD9\u4E00\u5904\u3002 */\n@keyframes dshpc-btn-spin{to{transform:rotate(360deg)}}\n\n/* \u4EA4\u4E92\u6001\uFF1A\u989C\u8272\u53D8\u5316\u5199\u5728\u53D8\u91CF\u4E0A \u21D2 \u6240\u6709\u6863\u4F4D\u4E00\u6B21\u751F\u6548\uFF0C\u4E14\u53D8\u5316\u5E45\u5EA6\u7531 token \u51B3\u5B9A\uFF08\u591F\u660E\u663E\uFF09 */\n.dshpc-btn:hover:not(:disabled){background-color:var(--btn-bg-hover);color:var(--btn-fg-hover);}\n.dshpc-btn:active:not(:disabled){background-color:var(--btn-bg-active);transform:translateY(1px);}\n.dshpc-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:2px;}\n.dshpc-btn:disabled{cursor:default;opacity:.5;}\n\n.dshpc-btn--primary{--btn-bg:var(--dshpc-accent);--btn-fg:var(--dshpc-fg-inverse);\n --btn-bg-hover:var(--dshpc-accent-hover);--btn-bg-active:var(--dshpc-accent-active);}\n/* secondary\uFF1A\u4E2D\u6027\u5B9E\u5FC3\uFF08\u7070\u9762\uFF09\uFF0C\u7528\u4E8E\u300C\u53D6\u6D88 / \u6B21\u8981\u300D\u8FD9\u7C7B\u4E0E\u4E3B\u64CD\u4F5C\u5E76\u6392\u7684\u6309\u94AE */\n.dshpc-btn--secondary{--btn-bg:var(--dshpc-hover);--btn-fg:var(--dshpc-fg);\n --btn-bg-hover:var(--dshpc-active);--btn-bg-active:var(--dshpc-active);}\n.dshpc-btn--outline{--btn-bg:var(--dshpc-surface-1);--btn-border:var(--dshpc-border-strong);\n --btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);}\n.dshpc-btn--ghost{--btn-fg:var(--dshpc-fg-2);--btn-fg-hover:var(--dshpc-fg);\n --btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);}\n.dshpc-btn--danger{--btn-bg:var(--dshpc-danger);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-danger-hover);--btn-bg-active:var(--dshpc-danger-active);}\n.dshpc-btn--success{--btn-bg:var(--dshpc-success);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-success-hover);--btn-bg-active:var(--dshpc-success-active);}\n.dshpc-btn--warning{--btn-bg:var(--dshpc-warning);--btn-fg:var(--dshpc-on-warning);\n --btn-bg-hover:var(--dshpc-warning-hover);--btn-bg-active:var(--dshpc-warning-active);}\n.dshpc-btn--info{--btn-bg:var(--dshpc-business);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-business-hover);--btn-bg-active:var(--dshpc-business-active);}\n/* \u6269\u5C55\u516B\u8272\u5B9E\u5FC3\uFF082026-10-29\uFF09\uFF1A\u767D\u5B57\u4E24\u4E3B\u9898\u5747 \u22654.5:1\uFF1Bhover/active \u8D70\u5404\u81EA token \u6D3E\u751F\u3002 */\n.dshpc-btn--purple{--btn-bg:var(--dshpc-purple);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-purple-hover);--btn-bg-active:var(--dshpc-purple-active);}\n.dshpc-btn--pink{--btn-bg:var(--dshpc-pink);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-pink-hover);--btn-bg-active:var(--dshpc-pink-active);}\n.dshpc-btn--cyan{--btn-bg:var(--dshpc-cyan);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-cyan-hover);--btn-bg-active:var(--dshpc-cyan-active);}\n.dshpc-btn--teal{--btn-bg:var(--dshpc-teal);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-teal-hover);--btn-bg-active:var(--dshpc-teal-active);}\n.dshpc-btn--orange{--btn-bg:var(--dshpc-orange);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-orange-hover);--btn-bg-active:var(--dshpc-orange-active);}\n.dshpc-btn--indigo{--btn-bg:var(--dshpc-indigo);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-indigo-hover);--btn-bg-active:var(--dshpc-indigo-active);}\n.dshpc-btn--rose{--btn-bg:var(--dshpc-rose);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-rose-hover);--btn-bg-active:var(--dshpc-rose-active);}\n.dshpc-btn--slate{--btn-bg:var(--dshpc-slate);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-slate-hover);--btn-bg-active:var(--dshpc-slate-active);}\n/* danger-outline\uFF1A\u7EA2\u5B57\u63CF\u8FB9\uFF08\u7834\u574F\u6027\u6B21\u8981\u64CD\u4F5C\uFF0C\u5982\u5361\u7247\u4E0A\u7684\u300C\u5220\u9664\u300D\uFF09\u3002\n \u26A0\uFE0F \u65E7\u4FEE\u9970\u7C7B danger-ink \u4FDD\u7559\u4E3A\u522B\u540D\uFF08\u6D88\u8D39\u65B9\u53EF\u80FD\u8FD8\u5728\u6302\uFF09\uFF0C\u4E24\u8005\u540C\u4E00\u5957\u76AE\u80A4\u3002 */\n.dshpc-btn--danger-outline,.dshpc-btn--danger-ink{--btn-border:var(--dshpc-danger);--btn-fg:var(--dshpc-danger);\n --btn-fg-hover:var(--dshpc-danger);--btn-bg-hover:var(--dshpc-danger-soft);--btn-bg-active:var(--dshpc-danger-soft);}\n/* link\uFF1A\u884C\u5185\u6587\u5B57\u94FE\u63A5\u578B\uFF08\u4F1A\u8BDD / \u4EA7\u51FA\u6587\u4EF6\u540D\uFF09\uFF0C\u65E0\u5E95\u65E0\u8FB9\u3001\u54C1\u724C\u84DD\u3001hover \u4E0B\u5212\u7EBF */\n.dshpc-btn--link{--btn-fg:var(--dshpc-link);--btn-fg-hover:var(--dshpc-link);\n --btn-bg-hover:transparent;--btn-bg-active:transparent;\n height:auto;padding:0;border:0;background:none;font-weight:400;text-align:left;}\n.dshpc-btn--link:hover:not(:disabled){text-decoration:underline;}\n\n/* \u56FE\u6807\u94AE\uFF1A\u7EAF\u56FE\u6807\uFF0C\u65B9\u5F62\uFF1B\u5C3A\u5BF8\u6863\u7684\u5BBD\u9AD8\u4E0E\u540C\u6863\u6587\u5B57\u6309\u94AE\u7B49\u9AD8\u3001\u5706\u89D2\u7EDF\u4E00\u5403 md\uFF08\u4E0E .dshpc-btn \u540C\u6B3E\uFF0C2026-10-28 \u62CD\u677F\uFF09 */\n.dshpc-iconbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;\n border:1px solid transparent;border-radius:var(--dshpc-radius-md);background:transparent;color:var(--dshpc-fg-2);\n font-family:inherit;cursor:pointer;flex:none;\n transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),border-color var(--dshpc-dur-fast) var(--dshpc-ease),color var(--dshpc-dur-fast) var(--dshpc-ease),opacity var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-iconbtn--sm{width:var(--dshpc-control-h-sm);height:var(--dshpc-control-h-sm);font-size:var(--dshpc-font-sm);}\n.dshpc-iconbtn--md{width:var(--dshpc-control-h-md);height:var(--dshpc-control-h-md);font-size:var(--dshpc-font-md);}\n.dshpc-iconbtn--lg{width:var(--dshpc-control-h-lg);height:var(--dshpc-control-h-lg);font-size:var(--dshpc-font-md);}\n.dshpc-iconbtn--plain{color:var(--dshpc-fg-2);}\n.dshpc-iconbtn--outline{background:var(--dshpc-surface-1);border-color:var(--dshpc-border);color:var(--dshpc-fg-2);}\n.dshpc-iconbtn--danger{color:var(--dshpc-danger);}\n.dshpc-iconbtn:hover:not(:disabled){background:var(--dshpc-hover);color:var(--dshpc-fg);}\n.dshpc-iconbtn--danger:hover:not(:disabled){background:var(--dshpc-danger-soft);color:var(--dshpc-danger);}\n.dshpc-iconbtn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:2px;}\n.dshpc-iconbtn:disabled{cursor:default;opacity:.4;}\n\n/* \u2500\u2500 \u884C\u5F0F\u6587\u4EF6\u6309\u94AE\uFF08\u56FE\u6807 + \u6587\u4EF6\u540D\uFF09P2\uFF1A**\u5168\u7AD9\u552F\u4E00\u5B9E\u73B0**\uFF082026-10-04 \u6536\u7F16\uFF09\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \u7528\u9014\uFF1A\u300C\u4EA7\u51FA\u7269 / \u9644\u4EF6\u300D\u90A3\u79CD**\u4E00\u884C\u4E00\u4E2A\u6587\u4EF6**\u7684\u6E05\u5355\u9879\uFF08\u57FA\u7840\u4FE1\u606F\u53F3\u680F\u4EA7\u51FA\u7269\u6E05\u5355\u3001\u9644\u4EF6\u533A\u3001\n \u6267\u884C\u8BB0\u5F55\u9875\u7684\u5C55\u5F00\u533A\uFF09\u3002\u5E73\u65F6\u900F\u660E\u3001**\u9F20\u6807\u79FB\u4E0A\u53BB\u624D\u51FA\u6D45\u5E95**\uFF08\u6CBF\u7528\u7528\u6237 2026-10-03 \u5B9A\u7684\u89C2\u611F\uFF09\u3002\n \u4E24\u4E2A\u5F62\u6001\u4FEE\u9970\u7C7B\uFF1A\n --block \u6491\u6EE1\u7236\u5BBD\uFF08\u6E05\u5355\u91CC\u4E00\u9879\u4E00\u884C\uFF09\n --inline \u5185\u5BB9\u5BBD\uFF08\u8DDF\u5728\u6587\u5B57\u540E\u5934\uFF0C\u5982\u9644\u4EF6\u884C\uFF09\n \u6536\u7F16\u539F\u56E0\uFF1A\u8FD9\u4EFD\u76AE\u80A4\u6B64\u524D\u53EA\u5199\u5728 task-list.tsx \u7684 TASK_LIST_CSS \u91CC\uFF08\u65E7\u540D .dshpc-info-out\uFF09\uFF0C\n \u6267\u884C\u8BB0\u5F55\u9875\u5C55\u5F00\u533A\u8981\u7528\u540C\u4E00\u79CD\u89C2\u611F \u21D2 \u4E0A\u63D0\u57FA\u7840\u5C42\uFF0C\u907F\u514D\u518D\u51FA\u73B0\u300C\u5404\u5199\u4E00\u4EFD\u5916\u89C2\u300D\uFF08\u540C\u540D\u4E0D\u540C\u76AE\u7684\u5751\u521A\u8E29\u8FC7\uFF09\u3002 */\n.dshpc-filechip{appearance:none;-webkit-appearance:none;border:0;border-radius:var(--dshpc-radius-xs);\n background:transparent;color:var(--dshpc-fg);font:inherit;text-align:left;cursor:pointer;min-width:0;\n transition:background-color var(--dshpc-dur) var(--dshpc-ease);}\n.dshpc-filechip:hover:not(:disabled){background:var(--dshpc-chip-bg);}\n.dshpc-filechip:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px;}\n.dshpc-filechip:disabled{cursor:default;background:transparent;color:var(--dshpc-fg-3);}\n.dshpc-filechip--block{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;\n padding:4px 6px;font-size:var(--dshpc-font-xs);}\n.dshpc-filechip--inline{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;font-size:var(--dshpc-font-sm);}\n\n@media (prefers-reduced-motion: reduce){.dshpc-btn,.dshpc-iconbtn,.dshpc-filechip{transition:none;}}\n";
|
|
2
2
|
//# sourceMappingURL=button-css.generated.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-css.generated.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/button-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"button-css.generated.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/button-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,42cAA0iT,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
// ⚠️ 生成物,勿手改。真源 = src/ui/controls/button.css
|
|
2
2
|
// 由 scripts/gen-css.mjs 生成(`pnpm run gen:css`):改样式请改那个 .css 文件后重新生成。
|
|
3
|
-
export const BUTTON_CSS = "\n/* ── 按钮 / 图标钮 P2 ───────────────────────────────────────────────────\n 与 Segmented 同一条高度纪律:--dshpc-control-h-sm(24) / -md(28) / -lg(32),\n 有边框的 variant 用 1px 真边框 + 内部 padding 补回,**有边 / 无边同高**。\n\n 三条受控轴(2026-10-19 重写,对齐主流 UI 框架的分类口径):\n · variant —— 外观档 = 形态 + 语义色,共 10 档:\n primary / secondary / outline / ghost / danger / success / warning / info /\n danger-outline(红字描边)/ link(行内链接)\n · size —— sm / md / lg\n · block —— 撑满父宽\n 每一档**只填 5 个局部变量**(--btn-bg / -fg / -border / -bg-hover / -bg-active),\n 结构与交互只有上面这一份;任何档位都不许再写一遍 display/height/padding。\n 自定义颜色(Button 的 color 参数)同样只覆盖这 5 个变量(token 覆盖,不是新皮肤)。\n\n ⚠️ hover 不再用 opacity 压一层(用户 2026-10-19:「黑色和红色的按钮移上去变化太小,\n 完全感觉不到颜色变了」)⇒ 走 --dshpc-*-hover / -active 的明确混色,见 tokens-css.ts。 */\n.dshpc-btn{--btn-bg:transparent;--btn-fg:var(--dshpc-fg);--btn-border:transparent;--btn-pad:12px;\n --btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);--btn-fg-hover:var(--btn-fg);\n appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;\n box-sizing:border-box;border:1px solid var(--btn-border);border-radius:var(--dshpc-radius-md);\n background-color:var(--btn-bg);color:var(--btn-fg);font-family:inherit;font-weight:500;white-space:nowrap;cursor:pointer;\n transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),border-color var(--dshpc-dur-fast) var(--dshpc-ease),color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease),transform var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-btn--sm{--btn-pad:10px;height:var(--dshpc-control-h-sm);padding:0 var(--btn-pad);font-size:var(--dshpc-font-sm);line-height:1;}\n.dshpc-btn--md{--btn-pad:12px;height:var(--dshpc-control-h-md);padding:0 var(--btn-pad);font-size:var(--dshpc-font-md);line-height:1;}\n.dshpc-btn--lg{--btn-pad:14px;height:var(--dshpc-control-h-lg);padding:0 var(--btn-pad);font-size:var(--dshpc-font-md);line-height:1;}\n/* block:撑满父宽(表单底栏 / 抽屉底部的主操作) */\n.dshpc-btn--block{display:flex;width:100%;}\n/* block + 前置图标 ⇒ 文字视觉居中(2026-10-19 用户点名):\n 内容组 [图标 + 间距 + 文字] 整体在盒内居中时,**文字**的中心会被图标推右半格。\n 把右内边距补上「图标宽 + 间距」,可用盒随之左移同量 ⇒ 文字落回视觉中心,图标贴左侧。\n 图标宽按 1.2em 估(官方图标 14/16px vs 字号 12/13px),em 随字号档自动缩放。 */\n.dshpc-btn--block.dshpc-btn--icon-start{padding-right:calc(var(--btn-pad) + 1.2em + 6px);}\n.dshpc-btn__icon,.dshpc-btn__icon-end{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0;}\n.dshpc-btn__icon svg,.dshpc-btn__icon-end svg{display:block;margin:0;}\n/* maxWidth 包 MarqueeText 时:标签作为 flex 子项必须能收缩到内容以下,否则省略号 / 跑马灯测不准 */\n.dshpc-btn .dshpc-btn__label{min-width:0;}\n/* loading:不换 DOM 结构,只在文案前插一个同色小圈。\n ⚠️ 2026-10-20 改画法:原来是 border:1.5px 加 border-radius:999px 画的环 —— 真机实测 computed\n radius 就是 999px、宽高都是 12px(没被任何样式覆盖),看着却\"像圆角方\",原因是**次像素边框\n (1.5px)在 12px 这么小的圆上被抗锯齿插值拉毛**。改用 SVG 矢量弧:任意 DPR 下都是真圆。 */\n.dshpc-btn__spinner{display:block;flex:none;width:12px;height:12px;\n animation:dshpc-btn-spin .7s linear infinite;}\n/* shortcut: 12px 是固定值,不随按钮字号缩放;要更大就改这一处。 */\n@keyframes dshpc-btn-spin{to{transform:rotate(360deg)}}\n\n/* 交互态:颜色变化写在变量上 ⇒ 所有档位一次生效,且变化幅度由 token 决定(够明显) */\n.dshpc-btn:hover:not(:disabled){background-color:var(--btn-bg-hover);color:var(--btn-fg-hover);}\n.dshpc-btn:active:not(:disabled){background-color:var(--btn-bg-active);transform:translateY(1px);}\n.dshpc-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:2px;}\n.dshpc-btn:disabled{cursor:default;opacity:.5;}\n\n.dshpc-btn--primary{--btn-bg:var(--dshpc-accent);--btn-fg:var(--dshpc-fg-inverse);\n --btn-bg-hover:var(--dshpc-accent-hover);--btn-bg-active:var(--dshpc-accent-active);}\n/* secondary:中性实心(灰面),用于「取消 / 次要」这类与主操作并排的按钮 */\n.dshpc-btn--secondary{--btn-bg:var(--dshpc-hover);--btn-fg:var(--dshpc-fg);\n --btn-bg-hover:var(--dshpc-active);--btn-bg-active:var(--dshpc-active);}\n.dshpc-btn--outline{--btn-bg:var(--dshpc-surface-1);--btn-border:var(--dshpc-border-strong);\n --btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);}\n.dshpc-btn--ghost{--btn-fg:var(--dshpc-fg-2);--btn-fg-hover:var(--dshpc-fg);\n --btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);}\n.dshpc-btn--danger{--btn-bg:var(--dshpc-danger);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-danger-hover);--btn-bg-active:var(--dshpc-danger-active);}\n.dshpc-btn--success{--btn-bg:var(--dshpc-success);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-success-hover);--btn-bg-active:var(--dshpc-success-active);}\n.dshpc-btn--warning{--btn-bg:var(--dshpc-warning);--btn-fg:var(--dshpc-on-warning);\n --btn-bg-hover:var(--dshpc-warning-hover);--btn-bg-active:var(--dshpc-warning-active);}\n.dshpc-btn--info{--btn-bg:var(--dshpc-business);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-business-hover);--btn-bg-active:var(--dshpc-business-active);}\n/* danger-outline:红字描边(破坏性次要操作,如卡片上的「删除」)。\n ⚠️ 旧修饰类 danger-ink 保留为别名(消费方可能还在挂),两者同一套皮肤。 */\n.dshpc-btn--danger-outline,.dshpc-btn--danger-ink{--btn-border:var(--dshpc-danger);--btn-fg:var(--dshpc-danger);\n --btn-fg-hover:var(--dshpc-danger);--btn-bg-hover:var(--dshpc-danger-soft);--btn-bg-active:var(--dshpc-danger-soft);}\n/* link:行内文字链接型(会话 / 产出文件名),无底无边、品牌蓝、hover 下划线 */\n.dshpc-btn--link{--btn-fg:var(--dshpc-link);--btn-fg-hover:var(--dshpc-link);\n --btn-bg-hover:transparent;--btn-bg-active:transparent;\n height:auto;padding:0;border:0;background:none;font-weight:400;text-align:left;}\n.dshpc-btn--link:hover:not(:disabled){text-decoration:underline;}\n\n/* 图标钮:纯图标,方形;尺寸档的宽高与同档文字按钮等高、圆角统一吃 md(与 .dshpc-btn 同款,2026-10-28 拍板) */\n.dshpc-iconbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;\n border:1px solid transparent;border-radius:var(--dshpc-radius-md);background:transparent;color:var(--dshpc-fg-2);\n font-family:inherit;cursor:pointer;flex:none;\n transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),border-color var(--dshpc-dur-fast) var(--dshpc-ease),color var(--dshpc-dur-fast) var(--dshpc-ease),opacity var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-iconbtn--sm{width:var(--dshpc-control-h-sm);height:var(--dshpc-control-h-sm);font-size:var(--dshpc-font-sm);}\n.dshpc-iconbtn--md{width:var(--dshpc-control-h-md);height:var(--dshpc-control-h-md);font-size:var(--dshpc-font-md);}\n.dshpc-iconbtn--lg{width:var(--dshpc-control-h-lg);height:var(--dshpc-control-h-lg);font-size:var(--dshpc-font-md);}\n.dshpc-iconbtn--plain{color:var(--dshpc-fg-2);}\n.dshpc-iconbtn--outline{background:var(--dshpc-surface-1);border-color:var(--dshpc-border);color:var(--dshpc-fg-2);}\n.dshpc-iconbtn--danger{color:var(--dshpc-danger);}\n.dshpc-iconbtn:hover:not(:disabled){background:var(--dshpc-hover);color:var(--dshpc-fg);}\n.dshpc-iconbtn--danger:hover:not(:disabled){background:var(--dshpc-danger-soft);color:var(--dshpc-danger);}\n.dshpc-iconbtn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:2px;}\n.dshpc-iconbtn:disabled{cursor:default;opacity:.4;}\n\n/* ── 行式文件按钮(图标 + 文件名)P2:**全站唯一实现**(2026-10-04 收编)──────────\n 用途:「产出物 / 附件」那种**一行一个文件**的清单项(基础信息右栏产出物清单、附件区、\n 执行记录页的展开区)。平时透明、**鼠标移上去才出浅底**(沿用用户 2026-10-03 定的观感)。\n 两个形态修饰类:\n --block 撑满父宽(清单里一项一行)\n --inline 内容宽(跟在文字后头,如附件行)\n 收编原因:这份皮肤此前只写在 task-list.tsx 的 TASK_LIST_CSS 里(旧名 .dshpc-info-out),\n 执行记录页展开区要用同一种观感 ⇒ 上提基础层,避免再出现「各写一份外观」(同名不同皮的坑刚踩过)。 */\n.dshpc-filechip{appearance:none;-webkit-appearance:none;border:0;border-radius:var(--dshpc-radius-xs);\n background:transparent;color:var(--dshpc-fg);font:inherit;text-align:left;cursor:pointer;min-width:0;\n transition:background-color var(--dshpc-dur) var(--dshpc-ease);}\n.dshpc-filechip:hover:not(:disabled){background:var(--dshpc-chip-bg);}\n.dshpc-filechip:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px;}\n.dshpc-filechip:disabled{cursor:default;background:transparent;color:var(--dshpc-fg-3);}\n.dshpc-filechip--block{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;\n padding:4px 6px;font-size:var(--dshpc-font-xs);}\n.dshpc-filechip--inline{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;font-size:var(--dshpc-font-sm);}\n\n@media (prefers-reduced-motion: reduce){.dshpc-btn,.dshpc-iconbtn,.dshpc-filechip{transition:none;}}\n";
|
|
3
|
+
export const BUTTON_CSS = "\n/* ── 按钮 / 图标钮 P2 ───────────────────────────────────────────────────\n 与 Segmented 同一条高度纪律:--dshpc-control-h-sm(24) / -md(28) / -lg(32),\n 有边框的 variant 用 1px 真边框 + 内部 padding 补回,**有边 / 无边同高**。\n\n 三条受控轴(2026-10-19 重写,对齐主流 UI 框架的分类口径):\n · variant —— 外观档 = 形态 + 语义色,共 10 档:\n primary / secondary / outline / ghost / danger / success / warning / info /\n danger-outline(红字描边)/ link(行内链接)\n · size —— sm / md / lg\n · block —— 撑满父宽\n 每一档**只填 5 个局部变量**(--btn-bg / -fg / -border / -bg-hover / -bg-active),\n 结构与交互只有上面这一份;任何档位都不许再写一遍 display/height/padding。\n 自定义颜色(Button 的 color 参数)同样只覆盖这 5 个变量(token 覆盖,不是新皮肤)。\n\n ⚠️ hover 不再用 opacity 压一层(用户 2026-10-19:「黑色和红色的按钮移上去变化太小,\n 完全感觉不到颜色变了」)⇒ 走 --dshpc-*-hover / -active 的明确混色,见 tokens-css.ts。 */\n.dshpc-btn{--btn-bg:transparent;--btn-fg:var(--dshpc-fg);--btn-border:transparent;--btn-pad:12px;\n --btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);--btn-fg-hover:var(--btn-fg);\n appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;\n box-sizing:border-box;border:1px solid var(--btn-border);border-radius:var(--dshpc-radius-md);\n background-color:var(--btn-bg);color:var(--btn-fg);font-family:inherit;font-weight:500;white-space:nowrap;cursor:pointer;\n transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),border-color var(--dshpc-dur-fast) var(--dshpc-ease),color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease),transform var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-btn--sm{--btn-pad:10px;height:var(--dshpc-control-h-sm);padding:0 var(--btn-pad);font-size:var(--dshpc-font-sm);line-height:1;}\n.dshpc-btn--md{--btn-pad:12px;height:var(--dshpc-control-h-md);padding:0 var(--btn-pad);font-size:var(--dshpc-font-md);line-height:1;}\n.dshpc-btn--lg{--btn-pad:14px;height:var(--dshpc-control-h-lg);padding:0 var(--btn-pad);font-size:var(--dshpc-font-md);line-height:1;}\n/* block:撑满父宽(表单底栏 / 抽屉底部的主操作) */\n.dshpc-btn--block{display:flex;width:100%;}\n/* block + 前置图标 ⇒ 文字视觉居中(2026-10-19 用户点名):\n 内容组 [图标 + 间距 + 文字] 整体在盒内居中时,**文字**的中心会被图标推右半格。\n 把右内边距补上「图标宽 + 间距」,可用盒随之左移同量 ⇒ 文字落回视觉中心,图标贴左侧。\n 图标宽按 1.2em 估(官方图标 14/16px vs 字号 12/13px),em 随字号档自动缩放。 */\n.dshpc-btn--block.dshpc-btn--icon-start{padding-right:calc(var(--btn-pad) + 1.2em + 6px);}\n.dshpc-btn__icon,.dshpc-btn__icon-end{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0;}\n.dshpc-btn__icon svg,.dshpc-btn__icon-end svg{display:block;margin:0;}\n/* maxWidth 包 MarqueeText 时:标签作为 flex 子项必须能收缩到内容以下,否则省略号 / 跑马灯测不准 */\n.dshpc-btn .dshpc-btn__label{min-width:0;}\n/* loading:不换 DOM 结构,只在文案前插一个同色小圈。\n ⚠️ 2026-10-20 改画法:原来是 border:1.5px 加 border-radius:999px 画的环 —— 真机实测 computed\n radius 就是 999px、宽高都是 12px(没被任何样式覆盖),看着却\"像圆角方\",原因是**次像素边框\n (1.5px)在 12px 这么小的圆上被抗锯齿插值拉毛**。改用 SVG 矢量弧:任意 DPR 下都是真圆。 */\n.dshpc-btn__spinner{display:block;flex:none;width:12px;height:12px;\n animation:dshpc-btn-spin .7s linear infinite;}\n/* shortcut: 12px 是固定值,不随按钮字号缩放;要更大就改这一处。 */\n@keyframes dshpc-btn-spin{to{transform:rotate(360deg)}}\n\n/* 交互态:颜色变化写在变量上 ⇒ 所有档位一次生效,且变化幅度由 token 决定(够明显) */\n.dshpc-btn:hover:not(:disabled){background-color:var(--btn-bg-hover);color:var(--btn-fg-hover);}\n.dshpc-btn:active:not(:disabled){background-color:var(--btn-bg-active);transform:translateY(1px);}\n.dshpc-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:2px;}\n.dshpc-btn:disabled{cursor:default;opacity:.5;}\n\n.dshpc-btn--primary{--btn-bg:var(--dshpc-accent);--btn-fg:var(--dshpc-fg-inverse);\n --btn-bg-hover:var(--dshpc-accent-hover);--btn-bg-active:var(--dshpc-accent-active);}\n/* secondary:中性实心(灰面),用于「取消 / 次要」这类与主操作并排的按钮 */\n.dshpc-btn--secondary{--btn-bg:var(--dshpc-hover);--btn-fg:var(--dshpc-fg);\n --btn-bg-hover:var(--dshpc-active);--btn-bg-active:var(--dshpc-active);}\n.dshpc-btn--outline{--btn-bg:var(--dshpc-surface-1);--btn-border:var(--dshpc-border-strong);\n --btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);}\n.dshpc-btn--ghost{--btn-fg:var(--dshpc-fg-2);--btn-fg-hover:var(--dshpc-fg);\n --btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);}\n.dshpc-btn--danger{--btn-bg:var(--dshpc-danger);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-danger-hover);--btn-bg-active:var(--dshpc-danger-active);}\n.dshpc-btn--success{--btn-bg:var(--dshpc-success);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-success-hover);--btn-bg-active:var(--dshpc-success-active);}\n.dshpc-btn--warning{--btn-bg:var(--dshpc-warning);--btn-fg:var(--dshpc-on-warning);\n --btn-bg-hover:var(--dshpc-warning-hover);--btn-bg-active:var(--dshpc-warning-active);}\n.dshpc-btn--info{--btn-bg:var(--dshpc-business);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-business-hover);--btn-bg-active:var(--dshpc-business-active);}\n/* 扩展八色实心(2026-10-29):白字两主题均 ≥4.5:1;hover/active 走各自 token 派生。 */\n.dshpc-btn--purple{--btn-bg:var(--dshpc-purple);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-purple-hover);--btn-bg-active:var(--dshpc-purple-active);}\n.dshpc-btn--pink{--btn-bg:var(--dshpc-pink);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-pink-hover);--btn-bg-active:var(--dshpc-pink-active);}\n.dshpc-btn--cyan{--btn-bg:var(--dshpc-cyan);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-cyan-hover);--btn-bg-active:var(--dshpc-cyan-active);}\n.dshpc-btn--teal{--btn-bg:var(--dshpc-teal);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-teal-hover);--btn-bg-active:var(--dshpc-teal-active);}\n.dshpc-btn--orange{--btn-bg:var(--dshpc-orange);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-orange-hover);--btn-bg-active:var(--dshpc-orange-active);}\n.dshpc-btn--indigo{--btn-bg:var(--dshpc-indigo);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-indigo-hover);--btn-bg-active:var(--dshpc-indigo-active);}\n.dshpc-btn--rose{--btn-bg:var(--dshpc-rose);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-rose-hover);--btn-bg-active:var(--dshpc-rose-active);}\n.dshpc-btn--slate{--btn-bg:var(--dshpc-slate);--btn-fg:var(--dshpc-on-signal);\n --btn-bg-hover:var(--dshpc-slate-hover);--btn-bg-active:var(--dshpc-slate-active);}\n/* danger-outline:红字描边(破坏性次要操作,如卡片上的「删除」)。\n ⚠️ 旧修饰类 danger-ink 保留为别名(消费方可能还在挂),两者同一套皮肤。 */\n.dshpc-btn--danger-outline,.dshpc-btn--danger-ink{--btn-border:var(--dshpc-danger);--btn-fg:var(--dshpc-danger);\n --btn-fg-hover:var(--dshpc-danger);--btn-bg-hover:var(--dshpc-danger-soft);--btn-bg-active:var(--dshpc-danger-soft);}\n/* link:行内文字链接型(会话 / 产出文件名),无底无边、品牌蓝、hover 下划线 */\n.dshpc-btn--link{--btn-fg:var(--dshpc-link);--btn-fg-hover:var(--dshpc-link);\n --btn-bg-hover:transparent;--btn-bg-active:transparent;\n height:auto;padding:0;border:0;background:none;font-weight:400;text-align:left;}\n.dshpc-btn--link:hover:not(:disabled){text-decoration:underline;}\n\n/* 图标钮:纯图标,方形;尺寸档的宽高与同档文字按钮等高、圆角统一吃 md(与 .dshpc-btn 同款,2026-10-28 拍板) */\n.dshpc-iconbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;\n border:1px solid transparent;border-radius:var(--dshpc-radius-md);background:transparent;color:var(--dshpc-fg-2);\n font-family:inherit;cursor:pointer;flex:none;\n transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),border-color var(--dshpc-dur-fast) var(--dshpc-ease),color var(--dshpc-dur-fast) var(--dshpc-ease),opacity var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-iconbtn--sm{width:var(--dshpc-control-h-sm);height:var(--dshpc-control-h-sm);font-size:var(--dshpc-font-sm);}\n.dshpc-iconbtn--md{width:var(--dshpc-control-h-md);height:var(--dshpc-control-h-md);font-size:var(--dshpc-font-md);}\n.dshpc-iconbtn--lg{width:var(--dshpc-control-h-lg);height:var(--dshpc-control-h-lg);font-size:var(--dshpc-font-md);}\n.dshpc-iconbtn--plain{color:var(--dshpc-fg-2);}\n.dshpc-iconbtn--outline{background:var(--dshpc-surface-1);border-color:var(--dshpc-border);color:var(--dshpc-fg-2);}\n.dshpc-iconbtn--danger{color:var(--dshpc-danger);}\n.dshpc-iconbtn:hover:not(:disabled){background:var(--dshpc-hover);color:var(--dshpc-fg);}\n.dshpc-iconbtn--danger:hover:not(:disabled){background:var(--dshpc-danger-soft);color:var(--dshpc-danger);}\n.dshpc-iconbtn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:2px;}\n.dshpc-iconbtn:disabled{cursor:default;opacity:.4;}\n\n/* ── 行式文件按钮(图标 + 文件名)P2:**全站唯一实现**(2026-10-04 收编)──────────\n 用途:「产出物 / 附件」那种**一行一个文件**的清单项(基础信息右栏产出物清单、附件区、\n 执行记录页的展开区)。平时透明、**鼠标移上去才出浅底**(沿用用户 2026-10-03 定的观感)。\n 两个形态修饰类:\n --block 撑满父宽(清单里一项一行)\n --inline 内容宽(跟在文字后头,如附件行)\n 收编原因:这份皮肤此前只写在 task-list.tsx 的 TASK_LIST_CSS 里(旧名 .dshpc-info-out),\n 执行记录页展开区要用同一种观感 ⇒ 上提基础层,避免再出现「各写一份外观」(同名不同皮的坑刚踩过)。 */\n.dshpc-filechip{appearance:none;-webkit-appearance:none;border:0;border-radius:var(--dshpc-radius-xs);\n background:transparent;color:var(--dshpc-fg);font:inherit;text-align:left;cursor:pointer;min-width:0;\n transition:background-color var(--dshpc-dur) var(--dshpc-ease);}\n.dshpc-filechip:hover:not(:disabled){background:var(--dshpc-chip-bg);}\n.dshpc-filechip:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px;}\n.dshpc-filechip:disabled{cursor:default;background:transparent;color:var(--dshpc-fg-3);}\n.dshpc-filechip--block{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;\n padding:4px 6px;font-size:var(--dshpc-font-xs);}\n.dshpc-filechip--inline{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;font-size:var(--dshpc-font-sm);}\n\n@media (prefers-reduced-motion: reduce){.dshpc-btn,.dshpc-iconbtn,.dshpc-filechip{transition:none;}}\n";
|
|
4
4
|
//# sourceMappingURL=button-css.generated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-css.generated.js","sourceRoot":"","sources":["../../../src/ui/controls/button-css.generated.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qEAAqE;AACrE,MAAM,CAAC,MAAM,UAAU,GAAG,
|
|
1
|
+
{"version":3,"file":"button-css.generated.js","sourceRoot":"","sources":["../../../src/ui/controls/button-css.generated.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qEAAqE;AACrE,MAAM,CAAC,MAAM,UAAU,GAAG,uiTAAuiT,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const DATETIME_CSS = "/* \u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668\uFF08DateTimePicker\uFF09\u3002\u7C7B\u540D dshpc-dt-*\uFF1B\u914D\u8272\u53EA\u5403 token\uFF0C\u660E\u6697\u968F token \u5207\u6362\u3002\n \u7ED3\u6784\uFF1A\u89E6\u53D1\u5668\uFF08range = \u4E00\u4E2A\u6574\u6761\uFF1A\u4E24\u4E2A\u65E5\u671F\u533A + \u6837\u5F0F\u753B\u7684\u7070\u9694\u6761\uFF1Bsingle = \u5355\u65E5\u671F\uFF09\u2192 \u6D6E\u5C42\n \uFF08\u4E24\u4E2A\u72EC\u7ACB\u7AEF\u6846 + \u4E24\u5757\u72EC\u7ACB\u65E5\u5386 + \u5E95\u90E8\u52A8\u4F5C\uFF09\u3002\n \u6D6E\u5C42\u884C\u4E3A\u4E0E Picker \u4E00\u81F4\uFF1Aportal \u5230 body\u3001\u8D34\u8FB9\u7FFB\u8F6C\u3001\u70B9\u5916\u5173\u95ED\u3001\u65E0\u906E\u7F69\u3002 */\n.dshpc-dt{position:relative;display:inline-block;font-size:13px;line-height:20px}\n.dshpc-dt__trigger{\n display:inline-flex;align-items:center;justify-content:space-between;gap:6px;\n max-width:100%;height:var(--dshpc-control-h-md);padding:0 8px;\n color:var(--dshpc-fg);background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border);border-radius:var(--dshpc-radius-md);cursor:pointer;\n}\n.dshpc-dt__trigger--sm{height:var(--dshpc-control-h-sm);font-size:12px}\n.dshpc-dt__trigger--lg{height:var(--dshpc-control-h-lg)}\n.dshpc-dt__trigger:disabled{color:var(--dshpc-fg-dim);cursor:not-allowed;opacity:.7}\n/* \u7126\u70B9\u4E0E\u57FA\u7840 Input \u5B8C\u5168\u540C\u6B3E\uFF08\u70B9\u51FB\u5373\u84DD\u63CF\u8FB9 + 1px \u5149\u73AF\uFF09\u3002 */\n.dshpc-dt__trigger:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus)}\n.dshpc-dt__trigger-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-variant-numeric:tabular-nums}\n.dshpc-dt__trigger-label--empty{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cal{flex:none;color:var(--dshpc-fg-3)}\n/* range \u89E6\u53D1\u5668\uFF1A\u4E00\u4E2A\u6574\u6761\u91CC\u4E24\u4E2A\u65E5\u671F\u533A + \u6837\u5F0F\u753B\u51FA\u6765\u7684\u7070\u9694\u6761\uFF08\u5DE6\u53F3\u4E24\u6761\u7AD6\u8FB9\uFF09\uFF0C\u70B9\u6574\u6761\u90FD\u5C55\u5F00\u3002 */\n/* \u7EC4\u6491\u6EE1\u89E6\u53D1\u5668\u5185\u5BB9\u9AD8\u5EA6\uFF0C\u9694\u6761\u624D\u80FD\u4E0A\u4E0B\u9876\u5230 border\u3002 */\n.dshpc-dt__pair-group{flex:1 1 auto;min-width:0;align-self:stretch;display:flex;align-items:center;gap:8px}\n/* \u4E24\u4E2A\u65E5\u671F\u533A\u5E73\u5206\uFF08flex:1 1 0\uFF09\uFF1A\u5F00\u59CB / \u7ED3\u675F\u6C38\u8FDC\u4E00\u6837\u5BBD\uFF0C\u4E0D\u968F\u5185\u5BB9\u504F\u8892\u3002 */\n.dshpc-dt__pair-date{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__pair-date--empty{color:var(--dshpc-fg-dim)}\n/* \u9694\u6761\uFF1A\u4E0A\u4E0B\u9876\u5230\u89E6\u53D1\u5668 border\uFF08\u4E0E\u8FB9\u6846\u8FDE\u8D77\u6765\uFF09\uFF0C\u4E2D\u95F4\u9694\u51FA\u4E00\u5757\uFF1B\u5757\u91CC\u653E\u300C\u5230\u300D\u7684\u7B26\u53F7\uFF08-\uFF0C\u7528\u6237 2026-10-24 \u62CD\u677F\uFF09\u3002 */\n.dshpc-dt__pair-sep{\n flex:none;align-self:stretch;width:22px;margin:0;\n display:inline-flex;align-items:center;justify-content:center;\n background:var(--dshpc-surface-sunken);\n border-left:1px solid var(--dshpc-border);border-right:1px solid var(--dshpc-border);\n color:var(--dshpc-fg-3);font-size:12px;line-height:1;\n}\n/* \u9ED8\u8BA4\u5BBD\uFF1A**\u56FA\u5B9A**\uFF08\u9009\u4E2D\u524D\u540E\u4E0D\u53D8\uFF09\uFF0C\u6570\u503C\u5BF9\u7167\u53C2\u8003\u56FE\u5B9E\u6D4B\uFF082x \u5C4F\uFF0C\u6362\u7B97 CSS px\uFF09\u540E\n \u7EDF\u4E00 -6px\uFF08\u7528\u6237 2026-10-24\uFF1A\u5B9E\u6D4B\u503C\u7559\u5F97\u504F\u591A\uFF09\uFF1A\n \u5355\u503C day 128 / \u65F6\u00B7\u5206 153.2 / \u79D2 174.8\uFF1B\u533A\u95F4 day 269 / \u5206 341.4 / \u79D2 377.6\u3002\n ch = \u5B57\u4F53\u91CC \"0\" \u7684\u5BBD\uFF08\u65E5\u671F tabular-nums \u7B49\u5BBD\uFF09\u21D2 \u5199\u6210 Nch + \u5E38\u6570\uFF1B\u5E38\u6570\u540C\u65F6\u515C\u4F4F\n \u9ED8\u8BA4\u5360\u4F4D\u300C\u8BF7\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u300D\uFF087 \u6C49\u5B57\uFF09\u4E0D\u7701\u7565\u3002\u8C03\u7528\u65B9\u8981\u53E6\u7ED9\u5BBD\uFF1AclassName \u4F20 width\u3002 */\n.dshpc-dt__trigger--w-day{width:calc(10ch + 56px)}\n.dshpc-dt__trigger--w-minute{width:calc(16ch + 38px)}\n.dshpc-dt__trigger--w-second{width:calc(19ch + 38px)}\n.dshpc-dt__trigger--wr-day{width:calc(20ch + 125px)}\n.dshpc-dt__trigger--wr-minute{width:calc(32ch + 111px)}\n.dshpc-dt__trigger--wr-second{width:calc(38ch + 104px)}\n\n.dshpc-dt__pop{\n z-index:60;padding:10px;user-select:none;\n font-size:13px;line-height:20px;\n background:var(--dshpc-surface-menu);border:1px solid var(--dshpc-border);\n border-radius:var(--dshpc-radius-md);box-shadow:0 8px 24px rgba(15,23,42,.12);\n}\n/* \u4E24\u4E2A\u72EC\u7ACB\u7AEF\u6846\uFF08range\uFF09\uFF1A\u70B9\u54EA\u4E2A\u54EA\u4E2A\u6210\u4E3A\u5F53\u524D\u7F16\u8F91\u7AEF\uFF0C\u4E92\u4E0D\u8054\u52A8\u3001\u53EA\u662F\u6392\u5728\u4E00\u8D77\u3002 */\n.dshpc-dt__ends{display:flex;gap:6px;margin-bottom:8px}\n.dshpc-dt__end{\n flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;padding:4px 8px;\n text-align:left;background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border-faint);border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__end--active{border-color:var(--dshpc-business);background:var(--dshpc-open-bg)}\n.dshpc-dt__end:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px}\n.dshpc-dt__end-label{flex:none;font-size:11px;line-height:16px;color:var(--dshpc-fg-3);white-space:nowrap}\n.dshpc-dt__end-value{font-size:12px;line-height:18px;color:var(--dshpc-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__end-value--empty{color:var(--dshpc-fg-dim)}\n\n.dshpc-dt__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}\n.dshpc-dt__nav-group{display:flex;gap:2px}\n.dshpc-dt__nav-btn{\n display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;\n color:var(--dshpc-fg-2);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__nav-btn:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n.dshpc-dt__nav-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__caption{font-size:13px;font-weight:600;color:var(--dshpc-fg);white-space:nowrap}\n\n.dshpc-dt__grid{display:grid;grid-template-columns:repeat(7,30px);gap:2px}\n.dshpc-dt__wd{height:20px;font-size:11px;line-height:20px;color:var(--dshpc-fg-3);text-align:center}\n.dshpc-dt__cell{\n height:26px;padding:0;font-size:12px;font-variant-numeric:tabular-nums;\n color:var(--dshpc-fg);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__cell:hover{background:var(--dshpc-surface-sunken)}\n.dshpc-dt__cell:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__cell--out{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cell--today{color:var(--dshpc-business);font-weight:600}\n/* \u8D77 / \u6B62\u7AEF\uFF1A\u54C1\u724C\u84DD\u5B9E\u9762\u53CD\u767D\uFF08\u4E0E Segmented weekday \u9009\u4E2D\u540C\u53E3\u5F84\uFF09\u3002 */\n.dshpc-dt__cell--sel{background:var(--dshpc-business);color:var(--dshpc-
|
|
1
|
+
export declare const DATETIME_CSS = "/* \u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668\uFF08DateTimePicker\uFF09\u3002\u7C7B\u540D dshpc-dt-*\uFF1B\u914D\u8272\u53EA\u5403 token\uFF0C\u660E\u6697\u968F token \u5207\u6362\u3002\n \u7ED3\u6784\uFF1A\u89E6\u53D1\u5668\uFF08range = \u4E00\u4E2A\u6574\u6761\uFF1A\u4E24\u4E2A\u65E5\u671F\u533A + \u6837\u5F0F\u753B\u7684\u7070\u9694\u6761\uFF1Bsingle = \u5355\u65E5\u671F\uFF09\u2192 \u6D6E\u5C42\n \uFF08\u4E24\u4E2A\u72EC\u7ACB\u7AEF\u6846 + \u4E24\u5757\u72EC\u7ACB\u65E5\u5386 + \u5E95\u90E8\u52A8\u4F5C\uFF09\u3002\n \u6D6E\u5C42\u884C\u4E3A\u4E0E Picker \u4E00\u81F4\uFF1Aportal \u5230 body\u3001\u8D34\u8FB9\u7FFB\u8F6C\u3001\u70B9\u5916\u5173\u95ED\u3001\u65E0\u906E\u7F69\u3002 */\n.dshpc-dt{position:relative;display:inline-block;font-size:13px;line-height:20px}\n.dshpc-dt__trigger{\n display:inline-flex;align-items:center;justify-content:space-between;gap:6px;\n max-width:100%;height:var(--dshpc-control-h-md);padding:0 8px;\n color:var(--dshpc-fg);background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border);border-radius:var(--dshpc-radius-md);cursor:pointer;\n}\n.dshpc-dt__trigger--sm{height:var(--dshpc-control-h-sm);font-size:12px}\n.dshpc-dt__trigger--lg{height:var(--dshpc-control-h-lg)}\n.dshpc-dt__trigger:disabled{color:var(--dshpc-fg-dim);cursor:not-allowed;opacity:.7}\n/* \u7126\u70B9\u4E0E\u57FA\u7840 Input \u5B8C\u5168\u540C\u6B3E\uFF08\u70B9\u51FB\u5373\u84DD\u63CF\u8FB9 + 1px \u5149\u73AF\uFF09\u3002 */\n.dshpc-dt__trigger:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus)}\n.dshpc-dt__trigger-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-variant-numeric:tabular-nums}\n.dshpc-dt__trigger-label--empty{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cal{flex:none;color:var(--dshpc-fg-3)}\n/* range \u89E6\u53D1\u5668\uFF1A\u4E00\u4E2A\u6574\u6761\u91CC\u4E24\u4E2A\u65E5\u671F\u533A + \u6837\u5F0F\u753B\u51FA\u6765\u7684\u7070\u9694\u6761\uFF08\u5DE6\u53F3\u4E24\u6761\u7AD6\u8FB9\uFF09\uFF0C\u70B9\u6574\u6761\u90FD\u5C55\u5F00\u3002 */\n/* \u7EC4\u6491\u6EE1\u89E6\u53D1\u5668\u5185\u5BB9\u9AD8\u5EA6\uFF0C\u9694\u6761\u624D\u80FD\u4E0A\u4E0B\u9876\u5230 border\u3002 */\n.dshpc-dt__pair-group{flex:1 1 auto;min-width:0;align-self:stretch;display:flex;align-items:center;gap:8px}\n/* \u4E24\u4E2A\u65E5\u671F\u533A\u5E73\u5206\uFF08flex:1 1 0\uFF09\uFF1A\u5F00\u59CB / \u7ED3\u675F\u6C38\u8FDC\u4E00\u6837\u5BBD\uFF0C\u4E0D\u968F\u5185\u5BB9\u504F\u8892\u3002 */\n.dshpc-dt__pair-date{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__pair-date--empty{color:var(--dshpc-fg-dim)}\n/* \u9694\u6761\uFF1A\u4E0A\u4E0B\u9876\u5230\u89E6\u53D1\u5668 border\uFF08\u4E0E\u8FB9\u6846\u8FDE\u8D77\u6765\uFF09\uFF0C\u4E2D\u95F4\u9694\u51FA\u4E00\u5757\uFF1B\u5757\u91CC\u653E\u300C\u5230\u300D\u7684\u7B26\u53F7\uFF08-\uFF0C\u7528\u6237 2026-10-24 \u62CD\u677F\uFF09\u3002 */\n.dshpc-dt__pair-sep{\n flex:none;align-self:stretch;width:22px;margin:0;\n display:inline-flex;align-items:center;justify-content:center;\n background:var(--dshpc-surface-sunken);\n border-left:1px solid var(--dshpc-border);border-right:1px solid var(--dshpc-border);\n color:var(--dshpc-fg-3);font-size:12px;line-height:1;\n}\n/* \u9ED8\u8BA4\u5BBD\uFF1A**\u56FA\u5B9A**\uFF08\u9009\u4E2D\u524D\u540E\u4E0D\u53D8\uFF09\uFF0C\u6570\u503C\u5BF9\u7167\u53C2\u8003\u56FE\u5B9E\u6D4B\uFF082x \u5C4F\uFF0C\u6362\u7B97 CSS px\uFF09\u540E\n \u7EDF\u4E00 -6px\uFF08\u7528\u6237 2026-10-24\uFF1A\u5B9E\u6D4B\u503C\u7559\u5F97\u504F\u591A\uFF09\uFF1A\n \u5355\u503C day 128 / \u65F6\u00B7\u5206 153.2 / \u79D2 174.8\uFF1B\u533A\u95F4 day 269 / \u5206 341.4 / \u79D2 377.6\u3002\n ch = \u5B57\u4F53\u91CC \"0\" \u7684\u5BBD\uFF08\u65E5\u671F tabular-nums \u7B49\u5BBD\uFF09\u21D2 \u5199\u6210 Nch + \u5E38\u6570\uFF1B\u5E38\u6570\u540C\u65F6\u515C\u4F4F\n \u9ED8\u8BA4\u5360\u4F4D\u300C\u8BF7\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u300D\uFF087 \u6C49\u5B57\uFF09\u4E0D\u7701\u7565\u3002\u8C03\u7528\u65B9\u8981\u53E6\u7ED9\u5BBD\uFF1AclassName \u4F20 width\u3002 */\n.dshpc-dt__trigger--w-day{width:calc(10ch + 56px)}\n.dshpc-dt__trigger--w-minute{width:calc(16ch + 38px)}\n.dshpc-dt__trigger--w-second{width:calc(19ch + 38px)}\n.dshpc-dt__trigger--wr-day{width:calc(20ch + 125px)}\n.dshpc-dt__trigger--wr-minute{width:calc(32ch + 111px)}\n.dshpc-dt__trigger--wr-second{width:calc(38ch + 104px)}\n\n.dshpc-dt__pop{\n z-index:60;padding:10px;user-select:none;\n font-size:13px;line-height:20px;\n background:var(--dshpc-surface-menu);border:1px solid var(--dshpc-border);\n border-radius:var(--dshpc-radius-md);box-shadow:0 8px 24px rgba(15,23,42,.12);\n}\n/* \u4E24\u4E2A\u72EC\u7ACB\u7AEF\u6846\uFF08range\uFF09\uFF1A\u70B9\u54EA\u4E2A\u54EA\u4E2A\u6210\u4E3A\u5F53\u524D\u7F16\u8F91\u7AEF\uFF0C\u4E92\u4E0D\u8054\u52A8\u3001\u53EA\u662F\u6392\u5728\u4E00\u8D77\u3002 */\n.dshpc-dt__ends{display:flex;gap:6px;margin-bottom:8px}\n.dshpc-dt__end{\n flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;padding:4px 8px;\n text-align:left;background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border-faint);border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__end--active{border-color:var(--dshpc-business);background:var(--dshpc-open-bg)}\n.dshpc-dt__end:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px}\n.dshpc-dt__end-label{flex:none;font-size:11px;line-height:16px;color:var(--dshpc-fg-3);white-space:nowrap}\n.dshpc-dt__end-value{font-size:12px;line-height:18px;color:var(--dshpc-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__end-value--empty{color:var(--dshpc-fg-dim)}\n\n.dshpc-dt__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}\n.dshpc-dt__nav-group{display:flex;gap:2px}\n.dshpc-dt__nav-btn{\n display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;\n color:var(--dshpc-fg-2);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__nav-btn:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n.dshpc-dt__nav-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__caption{font-size:13px;font-weight:600;color:var(--dshpc-fg);white-space:nowrap}\n\n.dshpc-dt__grid{display:grid;grid-template-columns:repeat(7,30px);gap:2px}\n.dshpc-dt__wd{height:20px;font-size:11px;line-height:20px;color:var(--dshpc-fg-3);text-align:center}\n.dshpc-dt__cell{\n height:26px;padding:0;font-size:12px;font-variant-numeric:tabular-nums;\n color:var(--dshpc-fg);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__cell:hover{background:var(--dshpc-surface-sunken)}\n.dshpc-dt__cell:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__cell--out{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cell--today{color:var(--dshpc-business);font-weight:600}\n/* \u8D77 / \u6B62\u7AEF\uFF1A\u54C1\u724C\u84DD\u5B9E\u9762\u53CD\u767D\uFF08\u4E0E Segmented weekday \u9009\u4E2D\u540C\u53E3\u5F84\uFF09\u3002\n \u26A0\uFE0F \u5B57\u8272\u7528\u5E38\u91CF\u767D --dshpc-on-signal\uFF0C\u4E0D\u7528 --dshpc-fg-inverse\uFF1A\u540E\u8005\u8DDF\u5BBF\u4E3B label-primary-foreground\uFF0C\n \u6697\u8272\u4E3B\u9898\u4E0B\u662F\u8FD1\u9ED1 \u21D2 \u84DD\u5E95\u9ED1\u5B57\uFF08\u4E0E Segmented 2026-10-29 \u540C\u4E00\u4E8B\u6545\uFF09\u3002 */\n.dshpc-dt__cell--sel{background:var(--dshpc-business);color:var(--dshpc-on-signal);font-weight:600}\n.dshpc-dt__cell--sel:hover{background:var(--dshpc-business-hover)}\n\n/* \u4E24\u5757\u65E5\u5386\u9762\u677F\uFF08range\uFF1A\u5DE6\u5F00\u59CB\u3001\u53F3\u7ED3\u675F\uFF0C\u5404\u9009\u5404\u7684\uFF09\u3002 */\n.dshpc-dt__panels{display:flex;gap:14px;align-items:flex-start}\n.dshpc-dt__panel{display:flex;flex-direction:column;gap:6px}\n\n.dshpc-dt__time{display:flex;align-items:flex-end;justify-content:center;gap:4px;margin-top:2px;padding-top:8px;border-top:1px solid var(--dshpc-border-faint)}\n.dshpc-dt__unit{display:flex;flex-direction:column;align-items:center;gap:2px}\n.dshpc-dt__unit-label{font-size:10px;line-height:14px;color:var(--dshpc-fg-3)}\n.dshpc-dt__step-btn{\n display:inline-flex;align-items:center;justify-content:center;width:34px;height:14px;padding:0;\n color:var(--dshpc-fg-2);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__step-btn:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n.dshpc-dt__step-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__step-val{\n width:34px;height:24px;padding:0;box-sizing:border-box;text-align:center;\n font-size:13px;font-variant-numeric:tabular-nums;color:var(--dshpc-fg);\n background:var(--dshpc-surface-sunken);border:1px solid var(--dshpc-border-faint);\n border-radius:var(--dshpc-radius-sm);outline:none;\n}\n.dshpc-dt__step-val:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus)}\n.dshpc-dt__step-val:disabled{color:var(--dshpc-fg-dim);cursor:not-allowed}\n.dshpc-dt__sep{padding-bottom:5px;color:var(--dshpc-fg-3);font-size:12px}\n\n.dshpc-dt__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--dshpc-border-faint)}\n.dshpc-dt__foot-side{display:flex;align-items:center;gap:6px}\n.dshpc-dt__warn{font-size:11px;color:var(--dshpc-warning-label);white-space:nowrap}\n";
|
|
2
2
|
//# sourceMappingURL=datetime-css.generated.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datetime-css.generated.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/datetime-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"datetime-css.generated.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/datetime-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,u6SAAgmO,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
// ⚠️ 生成物,勿手改。真源 = src/ui/controls/datetime.css
|
|
2
2
|
// 由 scripts/gen-css.mjs 生成(`pnpm run gen:css`):改样式请改那个 .css 文件后重新生成。
|
|
3
|
-
export const DATETIME_CSS = "/* 日期时间选择器(DateTimePicker)。类名 dshpc-dt-*;配色只吃 token,明暗随 token 切换。\n 结构:触发器(range = 一个整条:两个日期区 + 样式画的灰隔条;single = 单日期)→ 浮层\n (两个独立端框 + 两块独立日历 + 底部动作)。\n 浮层行为与 Picker 一致:portal 到 body、贴边翻转、点外关闭、无遮罩。 */\n.dshpc-dt{position:relative;display:inline-block;font-size:13px;line-height:20px}\n.dshpc-dt__trigger{\n display:inline-flex;align-items:center;justify-content:space-between;gap:6px;\n max-width:100%;height:var(--dshpc-control-h-md);padding:0 8px;\n color:var(--dshpc-fg);background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border);border-radius:var(--dshpc-radius-md);cursor:pointer;\n}\n.dshpc-dt__trigger--sm{height:var(--dshpc-control-h-sm);font-size:12px}\n.dshpc-dt__trigger--lg{height:var(--dshpc-control-h-lg)}\n.dshpc-dt__trigger:disabled{color:var(--dshpc-fg-dim);cursor:not-allowed;opacity:.7}\n/* 焦点与基础 Input 完全同款(点击即蓝描边 + 1px 光环)。 */\n.dshpc-dt__trigger:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus)}\n.dshpc-dt__trigger-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-variant-numeric:tabular-nums}\n.dshpc-dt__trigger-label--empty{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cal{flex:none;color:var(--dshpc-fg-3)}\n/* range 触发器:一个整条里两个日期区 + 样式画出来的灰隔条(左右两条竖边),点整条都展开。 */\n/* 组撑满触发器内容高度,隔条才能上下顶到 border。 */\n.dshpc-dt__pair-group{flex:1 1 auto;min-width:0;align-self:stretch;display:flex;align-items:center;gap:8px}\n/* 两个日期区平分(flex:1 1 0):开始 / 结束永远一样宽,不随内容偏袒。 */\n.dshpc-dt__pair-date{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__pair-date--empty{color:var(--dshpc-fg-dim)}\n/* 隔条:上下顶到触发器 border(与边框连起来),中间隔出一块;块里放「到」的符号(-,用户 2026-10-24 拍板)。 */\n.dshpc-dt__pair-sep{\n flex:none;align-self:stretch;width:22px;margin:0;\n display:inline-flex;align-items:center;justify-content:center;\n background:var(--dshpc-surface-sunken);\n border-left:1px solid var(--dshpc-border);border-right:1px solid var(--dshpc-border);\n color:var(--dshpc-fg-3);font-size:12px;line-height:1;\n}\n/* 默认宽:**固定**(选中前后不变),数值对照参考图实测(2x 屏,换算 CSS px)后\n 统一 -6px(用户 2026-10-24:实测值留得偏多):\n 单值 day 128 / 时·分 153.2 / 秒 174.8;区间 day 269 / 分 341.4 / 秒 377.6。\n ch = 字体里 \"0\" 的宽(日期 tabular-nums 等宽)⇒ 写成 Nch + 常数;常数同时兜住\n 默认占位「请选择日期时间」(7 汉字)不省略。调用方要另给宽:className 传 width。 */\n.dshpc-dt__trigger--w-day{width:calc(10ch + 56px)}\n.dshpc-dt__trigger--w-minute{width:calc(16ch + 38px)}\n.dshpc-dt__trigger--w-second{width:calc(19ch + 38px)}\n.dshpc-dt__trigger--wr-day{width:calc(20ch + 125px)}\n.dshpc-dt__trigger--wr-minute{width:calc(32ch + 111px)}\n.dshpc-dt__trigger--wr-second{width:calc(38ch + 104px)}\n\n.dshpc-dt__pop{\n z-index:60;padding:10px;user-select:none;\n font-size:13px;line-height:20px;\n background:var(--dshpc-surface-menu);border:1px solid var(--dshpc-border);\n border-radius:var(--dshpc-radius-md);box-shadow:0 8px 24px rgba(15,23,42,.12);\n}\n/* 两个独立端框(range):点哪个哪个成为当前编辑端,互不联动、只是排在一起。 */\n.dshpc-dt__ends{display:flex;gap:6px;margin-bottom:8px}\n.dshpc-dt__end{\n flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;padding:4px 8px;\n text-align:left;background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border-faint);border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__end--active{border-color:var(--dshpc-business);background:var(--dshpc-open-bg)}\n.dshpc-dt__end:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px}\n.dshpc-dt__end-label{flex:none;font-size:11px;line-height:16px;color:var(--dshpc-fg-3);white-space:nowrap}\n.dshpc-dt__end-value{font-size:12px;line-height:18px;color:var(--dshpc-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__end-value--empty{color:var(--dshpc-fg-dim)}\n\n.dshpc-dt__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}\n.dshpc-dt__nav-group{display:flex;gap:2px}\n.dshpc-dt__nav-btn{\n display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;\n color:var(--dshpc-fg-2);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__nav-btn:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n.dshpc-dt__nav-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__caption{font-size:13px;font-weight:600;color:var(--dshpc-fg);white-space:nowrap}\n\n.dshpc-dt__grid{display:grid;grid-template-columns:repeat(7,30px);gap:2px}\n.dshpc-dt__wd{height:20px;font-size:11px;line-height:20px;color:var(--dshpc-fg-3);text-align:center}\n.dshpc-dt__cell{\n height:26px;padding:0;font-size:12px;font-variant-numeric:tabular-nums;\n color:var(--dshpc-fg);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__cell:hover{background:var(--dshpc-surface-sunken)}\n.dshpc-dt__cell:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__cell--out{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cell--today{color:var(--dshpc-business);font-weight:600}\n/* 起 / 止端:品牌蓝实面反白(与 Segmented weekday
|
|
3
|
+
export const DATETIME_CSS = "/* 日期时间选择器(DateTimePicker)。类名 dshpc-dt-*;配色只吃 token,明暗随 token 切换。\n 结构:触发器(range = 一个整条:两个日期区 + 样式画的灰隔条;single = 单日期)→ 浮层\n (两个独立端框 + 两块独立日历 + 底部动作)。\n 浮层行为与 Picker 一致:portal 到 body、贴边翻转、点外关闭、无遮罩。 */\n.dshpc-dt{position:relative;display:inline-block;font-size:13px;line-height:20px}\n.dshpc-dt__trigger{\n display:inline-flex;align-items:center;justify-content:space-between;gap:6px;\n max-width:100%;height:var(--dshpc-control-h-md);padding:0 8px;\n color:var(--dshpc-fg);background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border);border-radius:var(--dshpc-radius-md);cursor:pointer;\n}\n.dshpc-dt__trigger--sm{height:var(--dshpc-control-h-sm);font-size:12px}\n.dshpc-dt__trigger--lg{height:var(--dshpc-control-h-lg)}\n.dshpc-dt__trigger:disabled{color:var(--dshpc-fg-dim);cursor:not-allowed;opacity:.7}\n/* 焦点与基础 Input 完全同款(点击即蓝描边 + 1px 光环)。 */\n.dshpc-dt__trigger:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus)}\n.dshpc-dt__trigger-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-variant-numeric:tabular-nums}\n.dshpc-dt__trigger-label--empty{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cal{flex:none;color:var(--dshpc-fg-3)}\n/* range 触发器:一个整条里两个日期区 + 样式画出来的灰隔条(左右两条竖边),点整条都展开。 */\n/* 组撑满触发器内容高度,隔条才能上下顶到 border。 */\n.dshpc-dt__pair-group{flex:1 1 auto;min-width:0;align-self:stretch;display:flex;align-items:center;gap:8px}\n/* 两个日期区平分(flex:1 1 0):开始 / 结束永远一样宽,不随内容偏袒。 */\n.dshpc-dt__pair-date{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__pair-date--empty{color:var(--dshpc-fg-dim)}\n/* 隔条:上下顶到触发器 border(与边框连起来),中间隔出一块;块里放「到」的符号(-,用户 2026-10-24 拍板)。 */\n.dshpc-dt__pair-sep{\n flex:none;align-self:stretch;width:22px;margin:0;\n display:inline-flex;align-items:center;justify-content:center;\n background:var(--dshpc-surface-sunken);\n border-left:1px solid var(--dshpc-border);border-right:1px solid var(--dshpc-border);\n color:var(--dshpc-fg-3);font-size:12px;line-height:1;\n}\n/* 默认宽:**固定**(选中前后不变),数值对照参考图实测(2x 屏,换算 CSS px)后\n 统一 -6px(用户 2026-10-24:实测值留得偏多):\n 单值 day 128 / 时·分 153.2 / 秒 174.8;区间 day 269 / 分 341.4 / 秒 377.6。\n ch = 字体里 \"0\" 的宽(日期 tabular-nums 等宽)⇒ 写成 Nch + 常数;常数同时兜住\n 默认占位「请选择日期时间」(7 汉字)不省略。调用方要另给宽:className 传 width。 */\n.dshpc-dt__trigger--w-day{width:calc(10ch + 56px)}\n.dshpc-dt__trigger--w-minute{width:calc(16ch + 38px)}\n.dshpc-dt__trigger--w-second{width:calc(19ch + 38px)}\n.dshpc-dt__trigger--wr-day{width:calc(20ch + 125px)}\n.dshpc-dt__trigger--wr-minute{width:calc(32ch + 111px)}\n.dshpc-dt__trigger--wr-second{width:calc(38ch + 104px)}\n\n.dshpc-dt__pop{\n z-index:60;padding:10px;user-select:none;\n font-size:13px;line-height:20px;\n background:var(--dshpc-surface-menu);border:1px solid var(--dshpc-border);\n border-radius:var(--dshpc-radius-md);box-shadow:0 8px 24px rgba(15,23,42,.12);\n}\n/* 两个独立端框(range):点哪个哪个成为当前编辑端,互不联动、只是排在一起。 */\n.dshpc-dt__ends{display:flex;gap:6px;margin-bottom:8px}\n.dshpc-dt__end{\n flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;padding:4px 8px;\n text-align:left;background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border-faint);border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__end--active{border-color:var(--dshpc-business);background:var(--dshpc-open-bg)}\n.dshpc-dt__end:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px}\n.dshpc-dt__end-label{flex:none;font-size:11px;line-height:16px;color:var(--dshpc-fg-3);white-space:nowrap}\n.dshpc-dt__end-value{font-size:12px;line-height:18px;color:var(--dshpc-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__end-value--empty{color:var(--dshpc-fg-dim)}\n\n.dshpc-dt__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}\n.dshpc-dt__nav-group{display:flex;gap:2px}\n.dshpc-dt__nav-btn{\n display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;\n color:var(--dshpc-fg-2);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__nav-btn:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n.dshpc-dt__nav-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__caption{font-size:13px;font-weight:600;color:var(--dshpc-fg);white-space:nowrap}\n\n.dshpc-dt__grid{display:grid;grid-template-columns:repeat(7,30px);gap:2px}\n.dshpc-dt__wd{height:20px;font-size:11px;line-height:20px;color:var(--dshpc-fg-3);text-align:center}\n.dshpc-dt__cell{\n height:26px;padding:0;font-size:12px;font-variant-numeric:tabular-nums;\n color:var(--dshpc-fg);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__cell:hover{background:var(--dshpc-surface-sunken)}\n.dshpc-dt__cell:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__cell--out{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cell--today{color:var(--dshpc-business);font-weight:600}\n/* 起 / 止端:品牌蓝实面反白(与 Segmented weekday 选中同口径)。\n ⚠️ 字色用常量白 --dshpc-on-signal,不用 --dshpc-fg-inverse:后者跟宿主 label-primary-foreground,\n 暗色主题下是近黑 ⇒ 蓝底黑字(与 Segmented 2026-10-29 同一事故)。 */\n.dshpc-dt__cell--sel{background:var(--dshpc-business);color:var(--dshpc-on-signal);font-weight:600}\n.dshpc-dt__cell--sel:hover{background:var(--dshpc-business-hover)}\n\n/* 两块日历面板(range:左开始、右结束,各选各的)。 */\n.dshpc-dt__panels{display:flex;gap:14px;align-items:flex-start}\n.dshpc-dt__panel{display:flex;flex-direction:column;gap:6px}\n\n.dshpc-dt__time{display:flex;align-items:flex-end;justify-content:center;gap:4px;margin-top:2px;padding-top:8px;border-top:1px solid var(--dshpc-border-faint)}\n.dshpc-dt__unit{display:flex;flex-direction:column;align-items:center;gap:2px}\n.dshpc-dt__unit-label{font-size:10px;line-height:14px;color:var(--dshpc-fg-3)}\n.dshpc-dt__step-btn{\n display:inline-flex;align-items:center;justify-content:center;width:34px;height:14px;padding:0;\n color:var(--dshpc-fg-2);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__step-btn:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n.dshpc-dt__step-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__step-val{\n width:34px;height:24px;padding:0;box-sizing:border-box;text-align:center;\n font-size:13px;font-variant-numeric:tabular-nums;color:var(--dshpc-fg);\n background:var(--dshpc-surface-sunken);border:1px solid var(--dshpc-border-faint);\n border-radius:var(--dshpc-radius-sm);outline:none;\n}\n.dshpc-dt__step-val:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus)}\n.dshpc-dt__step-val:disabled{color:var(--dshpc-fg-dim);cursor:not-allowed}\n.dshpc-dt__sep{padding-bottom:5px;color:var(--dshpc-fg-3);font-size:12px}\n\n.dshpc-dt__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--dshpc-border-faint)}\n.dshpc-dt__foot-side{display:flex;align-items:center;gap:6px}\n.dshpc-dt__warn{font-size:11px;color:var(--dshpc-warning-label);white-space:nowrap}\n";
|
|
4
4
|
//# sourceMappingURL=datetime-css.generated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datetime-css.generated.js","sourceRoot":"","sources":["../../../src/ui/controls/datetime-css.generated.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,qEAAqE;AACrE,MAAM,CAAC,MAAM,YAAY,GAAG,
|
|
1
|
+
{"version":3,"file":"datetime-css.generated.js","sourceRoot":"","sources":["../../../src/ui/controls/datetime-css.generated.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,qEAAqE;AACrE,MAAM,CAAC,MAAM,YAAY,GAAG,6lOAA6lO,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const SEGMENTED_CSS = "\n/* \u2500\u2500 \u5206\u6BB5\u63A7\u4EF6 P2 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \u7ED3\u6784\u7167\u5144\u5F1F\u9879\u76EE dsh-task-dispatch-table \u7684 Segmented \u76AE\u80A4\uFF08item \u65E0\u8FB9\u6846\u3001hover \u53EA\u63D0\u4EAE\u6587\u5B57\uFF09\uFF0C\n \u524D\u7F00 / \u53D8\u91CF\u540D\u6362\u6210\u672C\u4ED3\u53E3\u5F84\u3002\u7528\u6237\u989D\u5916\u8981\u7684\u4E24\u5904\uFF08\u5144\u5F1F\u6CA1\u6709\uFF09\uFF1Aweekday \u65B9\u5757\u95F4\u9694\uFF08\u73B0\u4E3A 2px\uFF09\uFF1B\u6BB5\u5185\u4E2D\u6027\u8BA1\u6570 __count\u3002\n \u26A0\uFE0F 2026-10-19 \u4E24\u6B21\u8BEF\u5224\u5747\u5DF2\u6F84\u6E05\uFF1A\u2460 \u300C\u5BBF\u4E3B\u53EA\u8BA4\u5355\u884C CSS\u300D\u2014\u2014\u5047\uFF0C\u591A\u884C\u4E00\u76F4\u6B63\u5E38\uFF1B\n \u2461 \u300C\u5BBF\u4E3B\u5403\u6389 token \u5757\u4E4B\u540E\u7B2C\u4E00\u6761\u89C4\u5219\u300D\u2014\u2014\u4E5F\u5047\uFF0C\u771F\u56E0\u662F tokens \u6A21\u677F\u5B57\u7B26\u4E32\u7ED3\u5C3E\u591A\u4E86\u4E00\u4E2A\u53CD\u659C\u6760\uFF0C\n \u6CE8\u5165\u6587\u672C\u91CC\u7559\u4E0B\u5B57\u9762\u53CD\u5F15\u53F7\uFF0C\u628A\u7D27\u968F\u5176\u540E\u7684\u90A3\u6761\u89C4\u5219\u7684\u9009\u62E9\u5668\u6C61\u67D3\u6389\u4E86\uFF08\u89C1 dsh-host.md \u00A79\uFF09\u3002\n \u6837\u5F0F\u7167\u5E38\u591A\u884C\u4E66\u5199\uFF0C\u4E0D\u5FC5\u538B\u884C\uFF1B\u4E5F\u4E0D\u9700\u8981\u4EFB\u4F55\u300C\u727A\u7272\u89C4\u5219\u300D\u3002 */\n/* \u5916\u89C2\u53EA\u6709\u4E00\u5957\uFF082026-10-26\uFF09\uFF1A\u539F variant \u7684 default / inset \u4E24\u6863\u5728 CSS \u91CC\u53EA\u5DEE 1px \u5185\u8DDD\uFF0C\n \u4E14 default \u6BD4\u6587\u6863\u627F\u8BFA\u77EE 2px\uFF0C\u5374\u8BA9\u4E0B\u6E38\u4EE5\u4E3A\u300C\u6709\u5F97\u9009\u300D\u800C\u53CD\u590D\u5BF9\u56FE \u21D2 \u6574\u8F74\u5220\u9664\u3002\n padding 3px \u662F\u5C3A\u5BF8\u5951\u7EA6\u7684\u4E00\u90E8\u5206\uFF1Aitem \u9AD8\u5EA6 = \u63A7\u5236\u9AD8 \u2212 6px\uFF0C\u52A0\u8D77\u6765\u6B63\u597D 24 / 28 / 32\u3002 */\n.dshpc-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--dshpc-radius-md);--seg-thumb:var(--dshpc-surface-raised);background:var(--dshpc-seg-track);}\n.dshpc-seg__item{appearance:none;display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:calc(var(--dshpc-control-h-sm) - 6px);padding:0 12px;border:0;border-radius:var(--dshpc-radius-sm);background:transparent;color:var(--dshpc-fg-2);font-family:inherit;font-size:var(--dshpc-font-xs);font-weight:500;white-space:nowrap;cursor:pointer;flex:none;transition:color var(--dshpc-dur-fast) var(--dshpc-ease),background-color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-seg--md .dshpc-seg__item{height:calc(var(--dshpc-control-h-md) - 6px);}\n.dshpc-seg--lg .dshpc-seg__item{height:calc(var(--dshpc-control-h-lg) - 6px);}\n.dshpc-seg__item:hover:not([aria-pressed='true']):not(:disabled){color:var(--dshpc-fg);}\n.dshpc-seg__item[aria-pressed='true']{background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);color:var(--dshpc-fg);font-weight:600;}\n.dshpc-seg__item:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-2px;}\n.dshpc-seg__item:disabled{cursor:default;opacity:.4;}\n/* \u6BB5\u5185\u89D2\u6807\uFF08\u5982\u300C\u5F02\u5E38\u300D\u7684\u6570\u91CF\uFF09\uFF1A\u8BED\u4E49\u8272\u5B9E\u9762 + \u53CD\u767D\u5B57\uFF0C0 \u7531\u7EC4\u4EF6\u4FA7\u4E0D\u6E32\u67D3\u3002\u5FC5\u987B\u662F\u6B63\u5706\uFF08\u7528\u6237 2026-10-03\uFF09\u3002 */\n.dshpc-seg__badge{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;padding:0;overflow:hidden;border-radius:50%;background:var(--dshpc-danger);color:var(--dshpc-on-signal);font-size:10px;line-height:16px;font-weight:500;font-variant-numeric:tabular-nums;}\n/* \u6BB5\u5185\u4E2D\u6027\u8BA1\u6570\uFF08\u5982\u7B5B\u9009\u6761\u300C\u5168\u90E8 11\u300D\uFF09\uFF1A\u7EAF\u6587\u5B57\u3001\u65E0\u5E95\u65E0\u8FB9\uFF08\u5BF9\u9F50 task-ledger .dtl-seg__num \u62CD\u677F\u53E3\u5F84\uFF09\uFF1B0 \u7531\u7EC4\u4EF6\u4FA7\u4E0D\u6E32\u67D3\u3002 */\n.dshpc-seg__count{display:inline;flex:none;margin-left:3px;padding:0;border:0;border-radius:0;background:none;color:var(--dshpc-fg-3);font-size:10px;line-height:1;font-weight:400;font-variant-numeric:tabular-nums;}\n/* block\uFF1A\u6491\u6EE1\u7236\u5BBD\uFF08\u8868\u5355\u884C\u7528\uFF09\uFF0C\u5404\u6BB5\u7B49\u5206 */\n.dshpc-seg--block{display:flex;width:100%;}\n.dshpc-seg--block .dshpc-seg__item{flex:1 1 auto;justify-content:center;}\n/* weekday\uFF1A\u661F\u671F\u591A\u9009\u65B9\u5757\u3002\u57FA\u7840\u63D2\u4EF6\u7684\u7279\u6B8A\u5316\u5B9A\u5236\uFF08\u7528\u6237 2026-10-01\uFF1A\u539F WeekdayPicker \u5373\u300C\u84DD\u5E95 + \u8FD1\u4F3C\u65B9\u5F62\u300D\uFF09\uFF1A\n \u6BCF\u683C\u6B63\u65B9\u5F62\uFF08\u5BBD = \u6BB5\u9AD8\uFF09\u3001\u9009\u4E2D\u54C1\u724C\u84DD\u53CD\u767D\u5B57\u3001**\u65E0\u5916\u63CF\u8FB9**\uFF082026-10-18 \u91CD\u7533\uFF09\u3001\n \u65B9\u5757\u4E4B\u95F4\u95F4\u8DDD gap:2px\uFF082026-10-20 \u7528\u6237\u5B9A\u7A3F\uFF1A\u65B9\u5757\u6539\u5C0F\u540E 6px \u663E\u5F97\u592A\u5BBD\u300210-18 \u66FE\u4ECE 2px \u653E\u5BBD\u5230 6px\uFF0C\n \u4E24\u6B21\u90FD\u662F\u7528\u6237\u62CD\u677F \u2014\u2014 \u522B\u81EA\u4F5C\u4E3B\u5F20\u6539\u56DE\u53BB\uFF09\u3002 */\n.dshpc-seg--weekday{--seg-track:var(--dshpc-seg-track);gap:2px;border:0;padding:3px;background:var(--seg-track);}\n.dshpc-seg--weekday .dshpc-seg__item{width:calc(var(--dshpc-control-h-lg) - 8px);padding:0;justify-content:center;}\n.dshpc-seg--weekday .dshpc-seg__item[aria-pressed='true']{background:var(--dshpc-business);color:var(--dshpc-fg-inverse);box-shadow:var(--dshpc-shadow-raised);}\n\n/* \u2500\u2500 \u5355\u9009\u6ED1\u52A8\u5757\uFF082026-10-26 \u7528\u6237\uFF1A\u70B9\u9009\u540E\u9009\u4E2D\u5E95\u5E94\u300C\u6ED1\u8FC7\u53BB\u300D\uFF0C\u4E0D\u662F\u65E7\u6BB5\u6D88\u5931\u3001\u65B0\u6BB5\u76F4\u63A5\u4EAE\uFF09\u3002\n \u7ED3\u6784 = \u4E00\u5757\u7EDD\u5BF9\u5B9A\u4F4D\u7684\u5171\u7528\u5E95 + \u5404\u6BB5\u900F\u660E\uFF1B\u4F4D\u7F6E/\u5C3A\u5BF8\u7531\u7EC4\u4EF6\u91CF\u51FA\u540E\u5185\u8054\uFF0C\u8FD9\u91CC\u53EA\u7BA1\u5916\u89C2\u4E0E\u8FC7\u6E21\u3002\n --slide \u53EA\u5728\u5355\u9009\u6302\u4E0A\uFF1A\u591A\u9009\uFF08\u5982\u661F\u671F\uFF09\u6BCF\u6BB5\u5404\u81EA\u7740\u8272\uFF0C\u6CA1\u6709\u552F\u4E00\u6ED1\u5757\u53EF\u6ED1\uFF0C\u4FDD\u6301\u539F\u6837\u3002 */\n.dshpc-seg--slide{position:relative;}\n.dshpc-seg--slide .dshpc-seg__item{position:relative;z-index:1;}\n.dshpc-seg--slide .dshpc-seg__item[aria-pressed='true']{background:transparent;box-shadow:none;}\n.dshpc-seg__thumb{position:absolute;z-index:0;border-radius:var(--dshpc-radius-sm);background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);pointer-events:none;transition:left var(--dshpc-dur) var(--dshpc-ease),top var(--dshpc-dur) var(--dshpc-ease),width var(--dshpc-dur) var(--dshpc-ease),height var(--dshpc-dur) var(--dshpc-ease);}\n.dshpc-seg--weekday.dshpc-seg--slide .dshpc-seg__thumb{background:var(--dshpc-business);}\n\n/* \u2500\u2500 bordered \u5916\u6846\uFF082026-10-20 \u7528\u6237\u8981\u7684\u7B2C\u4E8C\u79CD\u6A21\u5F0F\uFF09\uFF1A**\u53EA\u5728\u6700\u5916\u9762\u5957\u4E00\u5708 1px \u63CF\u8FB9**\uFF0C\n \u91CC\u9762\u4E00\u6982\u4E0D\u52A8 \u2014\u2014 \u9009\u4E2D\u7247\u7684\u586B\u5145\u8272 / \u9634\u5F71 / \u6587\u5B57\u8272\u5168\u90E8\u4FDD\u6301\u539F\u6837\uFF08weekday \u7684\u84DD\u9762\u7167\u65E7\uFF09\uFF0C\n \u8FD9\u91CC\u4E0D\u5199\u4EFB\u4F55\u9488\u5BF9 __item \u7684\u89C4\u5219\u3002\n \u603B\u9AD8\u5FC5\u987B\u4E0E\u65E0\u6846\u7248\u9010\u50CF\u7D20\u4E00\u81F4\uFF1Aborder 1px\u00D72 \u7531 padding \u5404\u8BA9 1px \u62B5\u6D88\uFF083 \u2192 2\uFF09\uFF1B\n weekday \u81EA\u5DF1\u58F0\u660E\u7684 3px \u5728\u6587\u4EF6\u66F4\u540E\u9762\uFF0C\u9760\u53CC\u7C7B\u9009\u62E9\u5668\u538B\u56DE 2px\u3002 */\n.dshpc-seg--bordered{border:1px solid var(--dshpc-border);padding:2px;}\n.dshpc-seg--bordered.dshpc-seg--weekday{padding:2px;}\n\n@media (prefers-reduced-motion: reduce){.dshpc-seg__item{transition:none;}.dshpc-seg__thumb{transition:none;}}\n";
|
|
1
|
+
export declare const SEGMENTED_CSS = "\n/* \u2500\u2500 \u5206\u6BB5\u63A7\u4EF6 P2 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \u7ED3\u6784\u7167\u5144\u5F1F\u9879\u76EE dsh-task-dispatch-table \u7684 Segmented \u76AE\u80A4\uFF08item \u65E0\u8FB9\u6846\u3001hover \u53EA\u63D0\u4EAE\u6587\u5B57\uFF09\uFF0C\n \u524D\u7F00 / \u53D8\u91CF\u540D\u6362\u6210\u672C\u4ED3\u53E3\u5F84\u3002\u7528\u6237\u989D\u5916\u8981\u7684\u4E24\u5904\uFF08\u5144\u5F1F\u6CA1\u6709\uFF09\uFF1Aweekday \u65B9\u5757\u95F4\u9694\uFF08\u73B0\u4E3A 2px\uFF09\uFF1B\u6BB5\u5185\u4E2D\u6027\u8BA1\u6570 __count\u3002\n \u26A0\uFE0F 2026-10-19 \u4E24\u6B21\u8BEF\u5224\u5747\u5DF2\u6F84\u6E05\uFF1A\u2460 \u300C\u5BBF\u4E3B\u53EA\u8BA4\u5355\u884C CSS\u300D\u2014\u2014\u5047\uFF0C\u591A\u884C\u4E00\u76F4\u6B63\u5E38\uFF1B\n \u2461 \u300C\u5BBF\u4E3B\u5403\u6389 token \u5757\u4E4B\u540E\u7B2C\u4E00\u6761\u89C4\u5219\u300D\u2014\u2014\u4E5F\u5047\uFF0C\u771F\u56E0\u662F tokens \u6A21\u677F\u5B57\u7B26\u4E32\u7ED3\u5C3E\u591A\u4E86\u4E00\u4E2A\u53CD\u659C\u6760\uFF0C\n \u6CE8\u5165\u6587\u672C\u91CC\u7559\u4E0B\u5B57\u9762\u53CD\u5F15\u53F7\uFF0C\u628A\u7D27\u968F\u5176\u540E\u7684\u90A3\u6761\u89C4\u5219\u7684\u9009\u62E9\u5668\u6C61\u67D3\u6389\u4E86\uFF08\u89C1 dsh-host.md \u00A79\uFF09\u3002\n \u6837\u5F0F\u7167\u5E38\u591A\u884C\u4E66\u5199\uFF0C\u4E0D\u5FC5\u538B\u884C\uFF1B\u4E5F\u4E0D\u9700\u8981\u4EFB\u4F55\u300C\u727A\u7272\u89C4\u5219\u300D\u3002 */\n/* \u5916\u89C2\u53EA\u6709\u4E00\u5957\uFF082026-10-26\uFF09\uFF1A\u539F variant \u7684 default / inset \u4E24\u6863\u5728 CSS \u91CC\u53EA\u5DEE 1px \u5185\u8DDD\uFF0C\n \u4E14 default \u6BD4\u6587\u6863\u627F\u8BFA\u77EE 2px\uFF0C\u5374\u8BA9\u4E0B\u6E38\u4EE5\u4E3A\u300C\u6709\u5F97\u9009\u300D\u800C\u53CD\u590D\u5BF9\u56FE \u21D2 \u6574\u8F74\u5220\u9664\u3002\n padding 3px \u662F\u5C3A\u5BF8\u5951\u7EA6\u7684\u4E00\u90E8\u5206\uFF1Aitem \u9AD8\u5EA6 = \u63A7\u5236\u9AD8 \u2212 6px\uFF0C\u52A0\u8D77\u6765\u6B63\u597D 24 / 28 / 32\u3002 */\n/* \u9009\u4E2D\u7247\u914D\u8272\u6536\u5728\u4E24\u6761\u5C40\u90E8\u53D8\u91CF\u91CC\uFF08--seg-thumb \u5E95 / --seg-on \u5B57\uFF09\uFF1A\u9ED8\u8BA4\u8D70\u4E3B\u9898\u4EAE\u7247\uFF0C\n tone \u6863\u4E0E\u81EA\u5B9A\u4E49 {bg, fg} \u90FD\u53EA\u6539\u8FD9\u4E24\u6761\uFF08\u540E\u8005\u7531\u7EC4\u4EF6\u5185\u8054\u5199\u6839\u8282\u70B9\uFF0C\u5185\u8054\u6052\u80DC\uFF09\u3002 */\n.dshpc-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--dshpc-radius-md);--seg-thumb:var(--dshpc-surface-raised);--seg-on:var(--dshpc-fg);background:var(--dshpc-seg-track);}\n.dshpc-seg__item{appearance:none;display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:calc(var(--dshpc-control-h-sm) - 6px);padding:0 12px;border:0;border-radius:var(--dshpc-radius-sm);background:transparent;color:var(--dshpc-fg-2);font-family:inherit;font-size:var(--dshpc-font-xs);font-weight:500;white-space:nowrap;cursor:pointer;flex:none;transition:color var(--dshpc-dur-fast) var(--dshpc-ease),background-color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-seg--md .dshpc-seg__item{height:calc(var(--dshpc-control-h-md) - 6px);}\n.dshpc-seg--lg .dshpc-seg__item{height:calc(var(--dshpc-control-h-lg) - 6px);}\n.dshpc-seg__item:hover:not([aria-pressed='true']):not(:disabled){color:var(--dshpc-fg);}\n.dshpc-seg__item[aria-pressed='true']{background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);color:var(--seg-on);font-weight:600;}\n.dshpc-seg__item:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-2px;}\n.dshpc-seg__item:disabled{cursor:default;opacity:.4;}\n/* \u6BB5\u5185\u89D2\u6807\uFF08\u5982\u300C\u5F02\u5E38\u300D\u7684\u6570\u91CF\uFF09\uFF1A\u8BED\u4E49\u8272\u5B9E\u9762 + \u53CD\u767D\u5B57\uFF0C0 \u7531\u7EC4\u4EF6\u4FA7\u4E0D\u6E32\u67D3\u3002\u5FC5\u987B\u662F\u6B63\u5706\uFF08\u7528\u6237 2026-10-03\uFF09\u3002 */\n.dshpc-seg__badge{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;padding:0;overflow:hidden;border-radius:50%;background:var(--dshpc-danger);color:var(--dshpc-on-signal);font-size:10px;line-height:16px;font-weight:500;font-variant-numeric:tabular-nums;}\n/* \u6BB5\u5185\u4E2D\u6027\u8BA1\u6570\uFF08\u5982\u7B5B\u9009\u6761\u300C\u5168\u90E8 11\u300D\uFF09\uFF1A\u7EAF\u6587\u5B57\u3001\u65E0\u5E95\u65E0\u8FB9\uFF08\u5BF9\u9F50 task-ledger .dtl-seg__num \u62CD\u677F\u53E3\u5F84\uFF09\uFF1B0 \u7531\u7EC4\u4EF6\u4FA7\u4E0D\u6E32\u67D3\u3002 */\n.dshpc-seg__count{display:inline;flex:none;margin-left:3px;padding:0;border:0;border-radius:0;background:none;color:var(--dshpc-fg-3);font-size:10px;line-height:1;font-weight:400;font-variant-numeric:tabular-nums;}\n/* block\uFF1A\u6491\u6EE1\u7236\u5BBD\uFF08\u8868\u5355\u884C\u7528\uFF09\uFF0C\u5404\u6BB5\u7B49\u5206 */\n.dshpc-seg--block{display:flex;width:100%;}\n.dshpc-seg--block .dshpc-seg__item{flex:1 1 auto;justify-content:center;}\n/* weekday\uFF1A\u661F\u671F\u591A\u9009\u65B9\u5757\u3002\u57FA\u7840\u63D2\u4EF6\u7684\u7279\u6B8A\u5316\u5B9A\u5236\uFF08\u7528\u6237 2026-10-01\uFF1A\u539F WeekdayPicker \u5373\u300C\u84DD\u5E95 + \u8FD1\u4F3C\u65B9\u5F62\u300D\uFF09\uFF1A\n \u6BCF\u683C\u6B63\u65B9\u5F62\uFF08\u5BBD = \u6BB5\u9AD8\uFF09\u3001\u9009\u4E2D\u54C1\u724C\u84DD\u53CD\u767D\u5B57\u3001**\u65E0\u5916\u63CF\u8FB9**\uFF082026-10-18 \u91CD\u7533\uFF09\u3001\n \u65B9\u5757\u4E4B\u95F4\u95F4\u8DDD gap:2px\uFF082026-10-20 \u7528\u6237\u5B9A\u7A3F\uFF1A\u65B9\u5757\u6539\u5C0F\u540E 6px \u663E\u5F97\u592A\u5BBD\u300210-18 \u66FE\u4ECE 2px \u653E\u5BBD\u5230 6px\uFF0C\n \u4E24\u6B21\u90FD\u662F\u7528\u6237\u62CD\u677F \u2014\u2014 \u522B\u81EA\u4F5C\u4E3B\u5F20\u6539\u56DE\u53BB\uFF09\u3002 */\n.dshpc-seg--weekday{--seg-track:var(--dshpc-seg-track);gap:2px;border:0;padding:3px;background:var(--seg-track);}\n.dshpc-seg--weekday .dshpc-seg__item{width:calc(var(--dshpc-control-h-lg) - 8px);padding:0;justify-content:center;}\n/* \u84DD\u5E95\u53CD\u767D\uFF1A\u5B57\u8272\u5FC5\u987B\u662F\u5E38\u91CF\u767D\uFF08--dshpc-on-signal\uFF09\u30022026-10-29 \u7528\u6237\u5B9E\u6D4B\uFF1A\u6697\u8272\u4E3B\u9898\u4E0B\u8FD9\u91CC\u66FE\u7528\n --dshpc-fg-inverse\uFF0C\u800C\u5B83\u8DDF\u968F\u5BBF\u4E3B label-primary-foreground\uFF0C\u6697\u8272\u4E0B\u662F\u8FD1\u9ED1 \u21D2 \u84DD\u5E95\u9ED1\u5B57\u770B\u4E0D\u6E05\u3002 */\n.dshpc-seg--weekday{--seg-thumb:var(--dshpc-business);--seg-on:var(--dshpc-on-signal);}\n\n/* \u2500\u2500 tone\uFF082026-10-29 \u7528\u6237\uFF09\uFF1A\u9009\u4E2D\u7247\u4F20\u5185\u7F6E\u57FA\u7840\u8272\u540D\uFF0C\u5E95 / \u5B57\u7531\u6838\u5FC3\u7ED9\uFF0C\u6DF1\u6D45\u4E24\u4E3B\u9898\u5404\u81EA\u6210\u7ACB\u3002\n \u653E\u5728 weekday \u4E4B\u540E\uFF1A\u540C\u540D\u53D8\u91CF\u540E\u5199\u8005\u80DC\uFF0Ctone \u4E0E className=\"dshpc-seg--weekday\" \u540C\u7ED9\u65F6\u4EE5 tone \u4E3A\u51C6\u3002\n \u9EC4\u5E95\u6309 Chip / Button \u540C\u6E90\u53E3\u5F84\u7528 on-warning\uFF08\u4E2D\u9AD8\u660E\u5EA6\uFF0C\u767D\u5B57\u770B\u4E0D\u6E05\uFF09\u3002 */\n.dshpc-seg--tone-business{--seg-thumb:var(--dshpc-business);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-success{--seg-thumb:var(--dshpc-success);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-warning{--seg-thumb:var(--dshpc-warning);--seg-on:var(--dshpc-on-warning);}\n.dshpc-seg--tone-danger{--seg-thumb:var(--dshpc-danger);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-purple{--seg-thumb:var(--dshpc-purple);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-pink{--seg-thumb:var(--dshpc-pink);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-cyan{--seg-thumb:var(--dshpc-cyan);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-teal{--seg-thumb:var(--dshpc-teal);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-orange{--seg-thumb:var(--dshpc-orange);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-indigo{--seg-thumb:var(--dshpc-indigo);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-rose{--seg-thumb:var(--dshpc-rose);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-slate{--seg-thumb:var(--dshpc-slate);--seg-on:var(--dshpc-on-signal);}\n\n/* \u2500\u2500 \u5355\u9009\u6ED1\u52A8\u5757\uFF082026-10-26 \u7528\u6237\uFF1A\u70B9\u9009\u540E\u9009\u4E2D\u5E95\u5E94\u300C\u6ED1\u8FC7\u53BB\u300D\uFF0C\u4E0D\u662F\u65E7\u6BB5\u6D88\u5931\u3001\u65B0\u6BB5\u76F4\u63A5\u4EAE\uFF09\u3002\n \u7ED3\u6784 = \u4E00\u5757\u7EDD\u5BF9\u5B9A\u4F4D\u7684\u5171\u7528\u5E95 + \u5404\u6BB5\u900F\u660E\uFF1B\u4F4D\u7F6E/\u5C3A\u5BF8\u7531\u7EC4\u4EF6\u91CF\u51FA\u540E\u5185\u8054\uFF0C\u8FD9\u91CC\u53EA\u7BA1\u5916\u89C2\u4E0E\u8FC7\u6E21\u3002\n --slide \u53EA\u5728\u5355\u9009\u6302\u4E0A\uFF1A\u591A\u9009\uFF08\u5982\u661F\u671F\uFF09\u6BCF\u6BB5\u5404\u81EA\u7740\u8272\uFF0C\u6CA1\u6709\u552F\u4E00\u6ED1\u5757\u53EF\u6ED1\uFF0C\u4FDD\u6301\u539F\u6837\u3002 */\n.dshpc-seg--slide{position:relative;}\n.dshpc-seg--slide .dshpc-seg__item{position:relative;z-index:1;}\n.dshpc-seg--slide .dshpc-seg__item[aria-pressed='true']{background:transparent;box-shadow:none;}\n.dshpc-seg__thumb{position:absolute;z-index:0;border-radius:var(--dshpc-radius-sm);background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);pointer-events:none;transition:left var(--dshpc-dur) var(--dshpc-ease),top var(--dshpc-dur) var(--dshpc-ease),width var(--dshpc-dur) var(--dshpc-ease),height var(--dshpc-dur) var(--dshpc-ease);}\n\n/* \u2500\u2500 bordered \u5916\u6846\uFF082026-10-20 \u7528\u6237\u8981\u7684\u7B2C\u4E8C\u79CD\u6A21\u5F0F\uFF09\uFF1A**\u53EA\u5728\u6700\u5916\u9762\u5957\u4E00\u5708 1px \u63CF\u8FB9**\uFF0C\n \u91CC\u9762\u4E00\u6982\u4E0D\u52A8 \u2014\u2014 \u9009\u4E2D\u7247\u7684\u586B\u5145\u8272 / \u9634\u5F71 / \u6587\u5B57\u8272\u5168\u90E8\u4FDD\u6301\u539F\u6837\uFF08weekday \u7684\u84DD\u9762\u7167\u65E7\uFF09\uFF0C\n \u8FD9\u91CC\u4E0D\u5199\u4EFB\u4F55\u9488\u5BF9 __item \u7684\u89C4\u5219\u3002\n \u603B\u9AD8\u5FC5\u987B\u4E0E\u65E0\u6846\u7248\u9010\u50CF\u7D20\u4E00\u81F4\uFF1Aborder 1px\u00D72 \u7531 padding \u5404\u8BA9 1px \u62B5\u6D88\uFF083 \u2192 2\uFF09\uFF1B\n weekday \u81EA\u5DF1\u58F0\u660E\u7684 3px \u5728\u6587\u4EF6\u66F4\u540E\u9762\uFF0C\u9760\u53CC\u7C7B\u9009\u62E9\u5668\u538B\u56DE 2px\u3002 */\n.dshpc-seg--bordered{border:1px solid var(--dshpc-border);padding:2px;}\n.dshpc-seg--bordered.dshpc-seg--weekday{padding:2px;}\n\n@media (prefers-reduced-motion: reduce){.dshpc-seg__item{transition:none;}.dshpc-seg__thumb{transition:none;}}\n";
|
|
2
2
|
//# sourceMappingURL=segmented-css.generated.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmented-css.generated.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/segmented-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"segmented-css.generated.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/segmented-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,8hVAAm2L,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
// ⚠️ 生成物,勿手改。真源 = src/ui/controls/segmented.css
|
|
2
2
|
// 由 scripts/gen-css.mjs 生成(`pnpm run gen:css`):改样式请改那个 .css 文件后重新生成。
|
|
3
|
-
export const SEGMENTED_CSS = "\n/* ── 分段控件 P2 ─────────────────────────────────────────────────────\n 结构照兄弟项目 dsh-task-dispatch-table 的 Segmented 皮肤(item 无边框、hover 只提亮文字),\n 前缀 / 变量名换成本仓口径。用户额外要的两处(兄弟没有):weekday 方块间隔(现为 2px);段内中性计数 __count。\n ⚠️ 2026-10-19 两次误判均已澄清:① 「宿主只认单行 CSS」——假,多行一直正常;\n ② 「宿主吃掉 token 块之后第一条规则」——也假,真因是 tokens 模板字符串结尾多了一个反斜杠,\n 注入文本里留下字面反引号,把紧随其后的那条规则的选择器污染掉了(见 dsh-host.md §9)。\n 样式照常多行书写,不必压行;也不需要任何「牺牲规则」。 */\n/* 外观只有一套(2026-10-26):原 variant 的 default / inset 两档在 CSS 里只差 1px 内距,\n 且 default 比文档承诺矮 2px,却让下游以为「有得选」而反复对图 ⇒ 整轴删除。\n padding 3px 是尺寸契约的一部分:item 高度 = 控制高 − 6px,加起来正好 24 / 28 / 32。 */\n.dshpc-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--dshpc-radius-md);--seg-thumb:var(--dshpc-surface-raised);background:var(--dshpc-seg-track);}\n.dshpc-seg__item{appearance:none;display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:calc(var(--dshpc-control-h-sm) - 6px);padding:0 12px;border:0;border-radius:var(--dshpc-radius-sm);background:transparent;color:var(--dshpc-fg-2);font-family:inherit;font-size:var(--dshpc-font-xs);font-weight:500;white-space:nowrap;cursor:pointer;flex:none;transition:color var(--dshpc-dur-fast) var(--dshpc-ease),background-color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-seg--md .dshpc-seg__item{height:calc(var(--dshpc-control-h-md) - 6px);}\n.dshpc-seg--lg .dshpc-seg__item{height:calc(var(--dshpc-control-h-lg) - 6px);}\n.dshpc-seg__item:hover:not([aria-pressed='true']):not(:disabled){color:var(--dshpc-fg);}\n.dshpc-seg__item[aria-pressed='true']{background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);color:var(--
|
|
3
|
+
export const SEGMENTED_CSS = "\n/* ── 分段控件 P2 ─────────────────────────────────────────────────────\n 结构照兄弟项目 dsh-task-dispatch-table 的 Segmented 皮肤(item 无边框、hover 只提亮文字),\n 前缀 / 变量名换成本仓口径。用户额外要的两处(兄弟没有):weekday 方块间隔(现为 2px);段内中性计数 __count。\n ⚠️ 2026-10-19 两次误判均已澄清:① 「宿主只认单行 CSS」——假,多行一直正常;\n ② 「宿主吃掉 token 块之后第一条规则」——也假,真因是 tokens 模板字符串结尾多了一个反斜杠,\n 注入文本里留下字面反引号,把紧随其后的那条规则的选择器污染掉了(见 dsh-host.md §9)。\n 样式照常多行书写,不必压行;也不需要任何「牺牲规则」。 */\n/* 外观只有一套(2026-10-26):原 variant 的 default / inset 两档在 CSS 里只差 1px 内距,\n 且 default 比文档承诺矮 2px,却让下游以为「有得选」而反复对图 ⇒ 整轴删除。\n padding 3px 是尺寸契约的一部分:item 高度 = 控制高 − 6px,加起来正好 24 / 28 / 32。 */\n/* 选中片配色收在两条局部变量里(--seg-thumb 底 / --seg-on 字):默认走主题亮片,\n tone 档与自定义 {bg, fg} 都只改这两条(后者由组件内联写根节点,内联恒胜)。 */\n.dshpc-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--dshpc-radius-md);--seg-thumb:var(--dshpc-surface-raised);--seg-on:var(--dshpc-fg);background:var(--dshpc-seg-track);}\n.dshpc-seg__item{appearance:none;display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:calc(var(--dshpc-control-h-sm) - 6px);padding:0 12px;border:0;border-radius:var(--dshpc-radius-sm);background:transparent;color:var(--dshpc-fg-2);font-family:inherit;font-size:var(--dshpc-font-xs);font-weight:500;white-space:nowrap;cursor:pointer;flex:none;transition:color var(--dshpc-dur-fast) var(--dshpc-ease),background-color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-seg--md .dshpc-seg__item{height:calc(var(--dshpc-control-h-md) - 6px);}\n.dshpc-seg--lg .dshpc-seg__item{height:calc(var(--dshpc-control-h-lg) - 6px);}\n.dshpc-seg__item:hover:not([aria-pressed='true']):not(:disabled){color:var(--dshpc-fg);}\n.dshpc-seg__item[aria-pressed='true']{background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);color:var(--seg-on);font-weight:600;}\n.dshpc-seg__item:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-2px;}\n.dshpc-seg__item:disabled{cursor:default;opacity:.4;}\n/* 段内角标(如「异常」的数量):语义色实面 + 反白字,0 由组件侧不渲染。必须是正圆(用户 2026-10-03)。 */\n.dshpc-seg__badge{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;padding:0;overflow:hidden;border-radius:50%;background:var(--dshpc-danger);color:var(--dshpc-on-signal);font-size:10px;line-height:16px;font-weight:500;font-variant-numeric:tabular-nums;}\n/* 段内中性计数(如筛选条「全部 11」):纯文字、无底无边(对齐 task-ledger .dtl-seg__num 拍板口径);0 由组件侧不渲染。 */\n.dshpc-seg__count{display:inline;flex:none;margin-left:3px;padding:0;border:0;border-radius:0;background:none;color:var(--dshpc-fg-3);font-size:10px;line-height:1;font-weight:400;font-variant-numeric:tabular-nums;}\n/* block:撑满父宽(表单行用),各段等分 */\n.dshpc-seg--block{display:flex;width:100%;}\n.dshpc-seg--block .dshpc-seg__item{flex:1 1 auto;justify-content:center;}\n/* weekday:星期多选方块。基础插件的特殊化定制(用户 2026-10-01:原 WeekdayPicker 即「蓝底 + 近似方形」):\n 每格正方形(宽 = 段高)、选中品牌蓝反白字、**无外描边**(2026-10-18 重申)、\n 方块之间间距 gap:2px(2026-10-20 用户定稿:方块改小后 6px 显得太宽。10-18 曾从 2px 放宽到 6px,\n 两次都是用户拍板 —— 别自作主张改回去)。 */\n.dshpc-seg--weekday{--seg-track:var(--dshpc-seg-track);gap:2px;border:0;padding:3px;background:var(--seg-track);}\n.dshpc-seg--weekday .dshpc-seg__item{width:calc(var(--dshpc-control-h-lg) - 8px);padding:0;justify-content:center;}\n/* 蓝底反白:字色必须是常量白(--dshpc-on-signal)。2026-10-29 用户实测:暗色主题下这里曾用\n --dshpc-fg-inverse,而它跟随宿主 label-primary-foreground,暗色下是近黑 ⇒ 蓝底黑字看不清。 */\n.dshpc-seg--weekday{--seg-thumb:var(--dshpc-business);--seg-on:var(--dshpc-on-signal);}\n\n/* ── tone(2026-10-29 用户):选中片传内置基础色名,底 / 字由核心给,深浅两主题各自成立。\n 放在 weekday 之后:同名变量后写者胜,tone 与 className=\"dshpc-seg--weekday\" 同给时以 tone 为准。\n 黄底按 Chip / Button 同源口径用 on-warning(中高明度,白字看不清)。 */\n.dshpc-seg--tone-business{--seg-thumb:var(--dshpc-business);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-success{--seg-thumb:var(--dshpc-success);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-warning{--seg-thumb:var(--dshpc-warning);--seg-on:var(--dshpc-on-warning);}\n.dshpc-seg--tone-danger{--seg-thumb:var(--dshpc-danger);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-purple{--seg-thumb:var(--dshpc-purple);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-pink{--seg-thumb:var(--dshpc-pink);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-cyan{--seg-thumb:var(--dshpc-cyan);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-teal{--seg-thumb:var(--dshpc-teal);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-orange{--seg-thumb:var(--dshpc-orange);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-indigo{--seg-thumb:var(--dshpc-indigo);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-rose{--seg-thumb:var(--dshpc-rose);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-slate{--seg-thumb:var(--dshpc-slate);--seg-on:var(--dshpc-on-signal);}\n\n/* ── 单选滑动块(2026-10-26 用户:点选后选中底应「滑过去」,不是旧段消失、新段直接亮)。\n 结构 = 一块绝对定位的共用底 + 各段透明;位置/尺寸由组件量出后内联,这里只管外观与过渡。\n --slide 只在单选挂上:多选(如星期)每段各自着色,没有唯一滑块可滑,保持原样。 */\n.dshpc-seg--slide{position:relative;}\n.dshpc-seg--slide .dshpc-seg__item{position:relative;z-index:1;}\n.dshpc-seg--slide .dshpc-seg__item[aria-pressed='true']{background:transparent;box-shadow:none;}\n.dshpc-seg__thumb{position:absolute;z-index:0;border-radius:var(--dshpc-radius-sm);background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);pointer-events:none;transition:left var(--dshpc-dur) var(--dshpc-ease),top var(--dshpc-dur) var(--dshpc-ease),width var(--dshpc-dur) var(--dshpc-ease),height var(--dshpc-dur) var(--dshpc-ease);}\n\n/* ── bordered 外框(2026-10-20 用户要的第二种模式):**只在最外面套一圈 1px 描边**,\n 里面一概不动 —— 选中片的填充色 / 阴影 / 文字色全部保持原样(weekday 的蓝面照旧),\n 这里不写任何针对 __item 的规则。\n 总高必须与无框版逐像素一致:border 1px×2 由 padding 各让 1px 抵消(3 → 2);\n weekday 自己声明的 3px 在文件更后面,靠双类选择器压回 2px。 */\n.dshpc-seg--bordered{border:1px solid var(--dshpc-border);padding:2px;}\n.dshpc-seg--bordered.dshpc-seg--weekday{padding:2px;}\n\n@media (prefers-reduced-motion: reduce){.dshpc-seg__item{transition:none;}.dshpc-seg__thumb{transition:none;}}\n";
|
|
4
4
|
//# sourceMappingURL=segmented-css.generated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmented-css.generated.js","sourceRoot":"","sources":["../../../src/ui/controls/segmented-css.generated.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,qEAAqE;AACrE,MAAM,CAAC,MAAM,aAAa,GAAG,
|
|
1
|
+
{"version":3,"file":"segmented-css.generated.js","sourceRoot":"","sources":["../../../src/ui/controls/segmented-css.generated.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,qEAAqE;AACrE,MAAM,CAAC,MAAM,aAAa,GAAG,g2LAAg2L,CAAA"}
|
package/dist/ui/index.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ export { CARD_ACCENTS, Card, StripCard, type CardAccent, type CardSharedProps, }
|
|
|
14
14
|
export { Chip, type ChipProps, type ChipSize, type ChipTone } from './Chip.js';
|
|
15
15
|
export { showToast, notify, type ToastVariant, type ToastPosition, type ToastOptions, type ToastAction, type NotifyOptions, } from './Toast.js';
|
|
16
16
|
export { Button, IconButton, type ButtonProps, type ButtonSize, type ButtonVariant, type IconButtonProps } from './Button.js';
|
|
17
|
-
export { Segmented, type SegmentedProps } from './Segmented.js';
|
|
17
|
+
export { Segmented, type SegmentedProps, type SegmentedTone } from './Segmented.js';
|
|
18
18
|
export { SplitGroup, type SplitGroupProps } from './SplitGroup.js';
|
|
19
19
|
export { Textarea, type TextareaProps } from './Textarea.js';
|
|
20
20
|
export { Checkbox, type CheckboxProps } from './Checkbox.js';
|
package/dist/ui/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACpF,OAAO,EACL,YAAY,EACZ,cAAc,EACd,OAAO,EACP,QAAQ,EACR,oBAAoB,EACpB,QAAQ,EACR,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,YAAY,GAClB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AACvE,OAAO,EACL,cAAc,EACd,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,YAAY,GAClB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,eAAe,EACf,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,aAAa,EACb,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,OAAO,EACZ,KAAK,MAAM,EACX,KAAK,QAAQ,EACb,KAAK,QAAQ,EACb,KAAK,SAAS,GACf,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAC9F,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AACjF,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AACnE,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,aAAa,GACnB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,WAAW,GACjB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,UAAU,EACV,YAAY,EACZ,KAAK,YAAY,EACjB,KAAK,cAAc,GACpB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,KAAK,UAAU,EACf,KAAK,eAAe,GACrB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAA;AAC9E,OAAO,EACL,SAAS,EACT,MAAM,EACN,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,aAAa,GACnB,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7H,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACpF,OAAO,EACL,YAAY,EACZ,cAAc,EACd,OAAO,EACP,QAAQ,EACR,oBAAoB,EACpB,QAAQ,EACR,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,YAAY,GAClB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AACvE,OAAO,EACL,cAAc,EACd,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,YAAY,GAClB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,eAAe,EACf,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,aAAa,EACb,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,OAAO,EACZ,KAAK,MAAM,EACX,KAAK,QAAQ,EACb,KAAK,QAAQ,EACb,KAAK,SAAS,GACf,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAC9F,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AACjF,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AACnE,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,aAAa,GACnB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,WAAW,GACjB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,UAAU,EACV,YAAY,EACZ,KAAK,YAAY,EACjB,KAAK,cAAc,GACpB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,KAAK,UAAU,EACf,KAAK,eAAe,GACrB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAA;AAC9E,OAAO,EACL,SAAS,EACT,MAAM,EACN,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,aAAa,GACnB,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7H,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAA;AACnF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAClE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,WAAW,EACX,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,gBAAgB,GACtB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,cAAc,GACpB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/D,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,KAAK,kBAAkB,EACvB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/D,OAAO,EAAE,sBAAsB,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAA;AACzE,OAAO,EACL,SAAS,EACT,SAAS,EACT,eAAe,EACf,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,cAAc,GACpB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,aAAa,EACb,SAAS,EACT,WAAW,EACX,WAAW,EACX,MAAM,EACN,SAAS,EACT,WAAW,EACX,aAAa,EACb,KAAK,SAAS,EACd,KAAK,UAAU,GAChB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,KAAK,EACL,WAAW,EACX,aAAa,EACb,cAAc,EACd,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,GACxB,MAAM,YAAY,CAAA"}
|
package/dist/ui/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,sDAAsD;AACtD,gDAAgD;AAChD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACpF,OAAO,EACL,YAAY,EACZ,cAAc,EACd,OAAO,EACP,QAAQ,EACR,oBAAoB,EACpB,QAAQ,EACR,WAAW,GAGZ,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,MAAM,EAAqC,MAAM,aAAa,CAAA;AACvE,OAAO,EACL,cAAc,GAIf,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,eAAe,EACf,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,aAAa,GAQd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAkD,MAAM,kBAAkB,CAAA;AAC9F,OAAO,EAAE,eAAe,EAA6B,MAAM,sBAAsB,CAAA;AACjF,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,aAAa,GAOd,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,KAAK,EAAmC,MAAM,YAAY,CAAA;AACnE,OAAO,EACL,UAAU,GAGX,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,UAAU,EACV,YAAY,GAGb,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,SAAS,GAGV,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,IAAI,EAAgD,MAAM,WAAW,CAAA;AAC9E,OAAO,EACL,SAAS,EACT,MAAM,GAMP,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,MAAM,EAAE,UAAU,EAA+E,MAAM,aAAa,CAAA;AAC7H,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,sDAAsD;AACtD,gDAAgD;AAChD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACpF,OAAO,EACL,YAAY,EACZ,cAAc,EACd,OAAO,EACP,QAAQ,EACR,oBAAoB,EACpB,QAAQ,EACR,WAAW,GAGZ,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,MAAM,EAAqC,MAAM,aAAa,CAAA;AACvE,OAAO,EACL,cAAc,GAIf,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,eAAe,EACf,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,aAAa,GAQd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAkD,MAAM,kBAAkB,CAAA;AAC9F,OAAO,EAAE,eAAe,EAA6B,MAAM,sBAAsB,CAAA;AACjF,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,aAAa,GAOd,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,KAAK,EAAmC,MAAM,YAAY,CAAA;AACnE,OAAO,EACL,UAAU,GAGX,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,UAAU,EACV,YAAY,GAGb,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,SAAS,GAGV,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,IAAI,EAAgD,MAAM,WAAW,CAAA;AAC9E,OAAO,EACL,SAAS,EACT,MAAM,GAMP,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,MAAM,EAAE,UAAU,EAA+E,MAAM,aAAa,CAAA;AAC7H,OAAO,EAAE,SAAS,EAA2C,MAAM,gBAAgB,CAAA;AACnF,OAAO,EAAE,UAAU,EAAwB,MAAM,iBAAiB,CAAA;AAClE,OAAO,EAAE,QAAQ,EAAsB,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAsB,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,WAAW,GAIZ,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,GAKjB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAA;AAC/D,OAAO,EACL,kBAAkB,EAClB,kBAAkB,GAGnB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAA;AAC/D,OAAO,EAAE,sBAAsB,EAAsB,MAAM,cAAc,CAAA;AACzE,OAAO,EACL,SAAS,EACT,SAAS,EACT,eAAe,GAOhB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,aAAa,EACb,SAAS,EACT,WAAW,EACX,WAAW,EACX,MAAM,EACN,SAAS,EACT,WAAW,EACX,aAAa,GAGd,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,KAAK,EACL,WAAW,EACX,aAAa,EACb,cAAc,GAMf,MAAM,YAAY,CAAA"}
|
package/docs/design/style.md
CHANGED
|
@@ -39,6 +39,19 @@ token colors instead.
|
|
|
39
39
|
EN: 22% / 36% for hover / active. Mix against literal `#fff` / `#000`, not host-provided neutrals. If an old
|
|
40
40
|
core ignores `color-mix`, the declaration drops and falls back to the base tier.
|
|
41
41
|
|
|
42
|
+
## 彩色实面上的字:只用常量色
|
|
43
|
+
|
|
44
|
+
> EN: Text on colored surfaces: constants only
|
|
45
|
+
|
|
46
|
+
语义色 / 扩展色实面(选中片、日期选中格、Chip、实心钮)上的字只能用 `--dshpc-on-signal`(白)或
|
|
47
|
+
`--dshpc-on-warning`(黄底深字)—— 这两条与主题无关。**不许用 `--dshpc-fg-inverse`**:它跟的是宿主
|
|
48
|
+
`label-primary-foreground`,暗色主题下是近黑 ⇒ 蓝底黑字。2026-10-29 用户实测发现(`Segmented` 多选蓝底与
|
|
49
|
+
`DateTimePicker` 起止格各中一次),已由 `test/css-contract.test.mjs` 盯着不再回潮。
|
|
50
|
+
|
|
51
|
+
EN: Text on semantic solid faces may only use `--dshpc-on-signal` (white) or `--dshpc-on-warning` (dark on
|
|
52
|
+
yellow); never `--dshpc-fg-inverse` — it follows the host's `label-primary-foreground`, which is near-black in
|
|
53
|
+
the dark theme.
|
|
54
|
+
|
|
42
55
|
## 外观轴:一个属性只有一套答案
|
|
43
56
|
|
|
44
57
|
> EN: Appearance axes: one answer per property
|
package/docs/help/style.md
CHANGED
|
@@ -56,7 +56,7 @@ EN: Categories below; token names are stable and used as-is.
|
|
|
56
56
|
| 边框 | `--dshpc-border` `--dshpc-border-faint` |
|
|
57
57
|
| 间距 | `--dshpc-space-1` … `--dshpc-space-3` |
|
|
58
58
|
| 字号 / 行高 | `--dshpc-font-sm` `--dshpc-font-lg` `--dshpc-line-sm` `--dshpc-line-md` `--dshpc-line-lg` |
|
|
59
|
-
| 语义色 | `--dshpc-business` `--dshpc-success` `--dshpc-danger` `--dshpc-warning` `--dshpc-link` |
|
|
59
|
+
| 语义色 | `--dshpc-business` `--dshpc-success` `--dshpc-danger` `--dshpc-warning` `--dshpc-link` `--dshpc-purple` `--dshpc-pink` `--dshpc-cyan` `--dshpc-teal` `--dshpc-orange` `--dshpc-indigo` `--dshpc-rose` `--dshpc-slate`(后八支为 2026-10-29 扩展的分类/图表常用色,宿主无 alias、写死 hex) |
|
|
60
60
|
| 语义面 | `--dshpc-open-bg` `--dshpc-open-bg-soft` `--dshpc-chip-bg` `--dshpc-chip-bg-hover` |
|
|
61
61
|
| 代码 | `--dshpc-code-surface` `--dshpc-code-font` |
|
|
62
62
|
|
package/docs/help/ui.doc.ts
CHANGED
|
@@ -104,23 +104,23 @@ const doc: DocTopic = {
|
|
|
104
104
|
heading: { zh: 'Button / IconButton / Segmented', en: 'Button / IconButton / Segmented' },
|
|
105
105
|
prose: [
|
|
106
106
|
{
|
|
107
|
-
zh: 'Button
|
|
108
|
-
en: 'Button offers
|
|
107
|
+
zh: 'Button 18 档外观(实心 / 线框 / 无底)。hover / active 走 token 派生色(不用 opacity)。扩展八色(purple/pink/cyan/teal/orange/indigo/rose/slate)为实心面,与 Chip/Card 同源。',
|
|
108
|
+
en: 'Button offers 18 variant tiers (solid / outline / bare). hover/active use token-derived colors (no opacity). The eight extended tiers (purple/pink/cyan/teal/orange/indigo/rose/slate) are solid faces, same source as Chip/Card.',
|
|
109
109
|
},
|
|
110
110
|
{
|
|
111
111
|
zh: 'IconButton:variant: plain|outline|danger(默认 plain)、size(默认 lg)、icon(必填)、label(必填,无障碍名兼 title)。',
|
|
112
112
|
en: 'IconButton: variant plain|outline|danger (default plain), size (default lg), icon (required), label (required, doubles as a11y name and title).',
|
|
113
113
|
},
|
|
114
114
|
{
|
|
115
|
-
zh: 'Segmented:`items`(必填)支持单选 / 多选,`size`(默认 lg;三档总高 24 / 28 / 32)、`bordered`(1px 外框,总高不变)、`multiple`(多选)。外观只有一套:灰底轨道 + 白色选中片,选中片的描边环与阴影由宿主 elevation token
|
|
116
|
-
en: 'Segmented: `items` (required) supports single or multiple selection; `size` (default lg; totals 24 / 28 / 32), `bordered` (1px outer frame, same total height), `multiple` (multi-select). One look only: grey track + white selected pill; its stroke ring and shadow come from the host elevation token (the offline fallback has no ring). An item’s `count` (muted text) and `badge` (red pill) take `number | string`: numbers ≤0 render nothing, strings render as given (e.g. `\'1K\'` / `\'99+\'`).',
|
|
115
|
+
zh: 'Segmented:`items`(必填)支持单选 / 多选,`size`(默认 lg;三档总高 24 / 28 / 32)、`bordered`(1px 外框,总高不变)、`multiple`(多选)。外观只有一套:灰底轨道 + 白色选中片,选中片的描边环与阴影由宿主 elevation token 提供(离线兜底值没有那圈环)。选中片配色只经 `tone`:传内置色名(与 Chip 同名的 business / success / warning / danger / purple / pink / cyan / teal / orange / indigo / rose / slate)时底与字由核心定、深浅两主题各自成立;传 `{ bg, fg }` 时两个主题都用调用方这一对颜色(对比度由调用方负责)。段内 `count`(弱化灰字)/ `badge`(红角标)接受 `number | string`:数字 ≤0 不显示,字符串原样显示(如 `1K` / `99+`)。',
|
|
116
|
+
en: 'Segmented: `items` (required) supports single or multiple selection; `size` (default lg; totals 24 / 28 / 32), `bordered` (1px outer frame, same total height), `multiple` (multi-select). One look only: grey track + white selected pill; its stroke ring and shadow come from the host elevation token (the offline fallback has no ring). The selected pill’s colors go through `tone` only: a built-in color name (business / success / warning / danger / purple / pink / cyan / teal / orange / indigo / rose / slate, same names as Chip) lets the core pick background and text per theme; `{ bg, fg }` uses that pair verbatim in both themes (contrast is the caller’s call). An item’s `count` (muted text) and `badge` (red pill) take `number | string`: numbers ≤0 render nothing, strings render as given (e.g. `\'1K\'` / `\'99+\'`).',
|
|
117
117
|
},
|
|
118
118
|
],
|
|
119
119
|
api: [
|
|
120
120
|
{
|
|
121
121
|
id: 'ui-button',
|
|
122
122
|
rows: [
|
|
123
|
-
{ name: 'variant', type: "上表
|
|
123
|
+
{ name: 'variant', type: "上表 18 档(primary/secondary/danger/success/warning/info/outline/danger-outline/ghost/link + 扩展 purple/pink/cyan/teal/orange/indigo/rose/slate)", def: "'outline'", desc: { zh: '外观档', en: 'Appearance tier' } },
|
|
124
124
|
{ name: 'size', type: "'sm' | 'md' | 'lg'", def: "'lg'", desc: { zh: '高度档(24 / 28 / 32,有边无边同高)', en: 'Height tier (24 / 28 / 32, same height with or without border)' } },
|
|
125
125
|
{ name: 'icon', type: 'ReactNode', def: '—', desc: { zh: '前置图标(官方图标组件 / 字符串均可)', en: 'Leading icon (official icon component or string)' } },
|
|
126
126
|
{ name: 'iconRight', type: 'ReactNode', def: '—', desc: { zh: '后置图标(展开箭头、外链)', en: 'Trailing icon (expand arrow, external link)' } },
|
|
@@ -316,7 +316,7 @@ const doc: DocTopic = {
|
|
|
316
316
|
{
|
|
317
317
|
id: 'ui-card',
|
|
318
318
|
rows: [
|
|
319
|
-
{ name: 'accent', type: "
|
|
319
|
+
{ name: 'accent', type: "13 档 or 任意 CSS 色值(business/success/warning/danger/neutral + 扩展 purple/pink/cyan/teal/orange/indigo/rose/slate)", def: "'business'", desc: { zh: '档位映射到 design 的 token;也可传 \'#f59e0b\' 这类自定义值', en: 'Tiers map to design tokens; also accepts custom values like \'#f59e0b\'' } },
|
|
320
320
|
{ name: 'expanded', type: 'boolean', def: "'false'", desc: { zh: '展开态(箭头朝向 + panel 显隐)', en: 'Expanded state (arrow direction + panel show/hide)' } },
|
|
321
321
|
{ name: 'onToggle', type: '() => void', def: '—', desc: { zh: '传了才显示右侧折叠箭头;展开状态由调用方管', en: 'Only shows the right collapse arrow if provided; caller owns the expanded state' } },
|
|
322
322
|
{ name: 'action', type: 'ReactNode', def: '—', desc: { zh: '右上角操作区', en: 'Top-right action area' } },
|
|
@@ -345,7 +345,7 @@ const doc: DocTopic = {
|
|
|
345
345
|
{
|
|
346
346
|
id: 'ui-chip',
|
|
347
347
|
rows: [
|
|
348
|
-
{ name: 'tone', type: "'neutral' | 'business' | 'success' | 'warning' | 'danger'", def: "'neutral'", desc: { zh: '语义色(neutral
|
|
348
|
+
{ name: 'tone', type: "'neutral' | 'business' | 'success' | 'warning' | 'danger' | 'purple' | 'pink' | 'cyan' | 'teal' | 'orange' | 'indigo' | 'rose' | 'slate'", def: "'neutral'", desc: { zh: '语义色(neutral 灰面,其余为实心信号面;扩展八色同上)', en: 'Semantic color (neutral grey; others are solid signal faces; eight extended tiers as above)' } },
|
|
349
349
|
{ name: 'size', type: "'sm' | 'md' | 'xs'", def: "'sm'", desc: { zh: '尺寸档', en: 'Size tier' } },
|
|
350
350
|
{ name: 'width', type: 'number | string', def: '—', desc: { zh: '固定宽(px 或任意 CSS 宽度);与 minWidth / maxWidth 互斥,一旦设定后两者自动失效', en: 'Fixed width (px or any CSS width); mutually exclusive with minWidth/maxWidth — once set, the other two are ignored' } },
|
|
351
351
|
{ name: 'minWidth', type: 'number | string', def: '—', desc: { zh: '最小宽:width 未设时生效,内容不足此宽时以它为准', en: 'Minimum width: applies only when width is unset; content shorter than this still takes this width' } },
|
package/docs/help/ui.md
CHANGED
|
@@ -34,21 +34,21 @@ ensureControls()
|
|
|
34
34
|
|
|
35
35
|
> EN: Button / IconButton / Segmented
|
|
36
36
|
|
|
37
|
-
Button
|
|
37
|
+
Button 18 档外观(实心 / 线框 / 无底)。hover / active 走 token 派生色(不用 opacity)。扩展八色(purple/pink/cyan/teal/orange/indigo/rose/slate)为实心面,与 Chip/Card 同源。
|
|
38
38
|
|
|
39
|
-
> EN: Button offers
|
|
39
|
+
> EN: Button offers 18 variant tiers (solid / outline / bare). hover/active use token-derived colors (no opacity). The eight extended tiers (purple/pink/cyan/teal/orange/indigo/rose/slate) are solid faces, same source as Chip/Card.
|
|
40
40
|
|
|
41
41
|
IconButton:variant: plain|outline|danger(默认 plain)、size(默认 lg)、icon(必填)、label(必填,无障碍名兼 title)。
|
|
42
42
|
|
|
43
43
|
> EN: IconButton: variant plain|outline|danger (default plain), size (default lg), icon (required), label (required, doubles as a11y name and title).
|
|
44
44
|
|
|
45
|
-
Segmented:`items`(必填)支持单选 / 多选,`size`(默认 lg;三档总高 24 / 28 / 32)、`bordered`(1px 外框,总高不变)、`multiple`(多选)。外观只有一套:灰底轨道 + 白色选中片,选中片的描边环与阴影由宿主 elevation token
|
|
45
|
+
Segmented:`items`(必填)支持单选 / 多选,`size`(默认 lg;三档总高 24 / 28 / 32)、`bordered`(1px 外框,总高不变)、`multiple`(多选)。外观只有一套:灰底轨道 + 白色选中片,选中片的描边环与阴影由宿主 elevation token 提供(离线兜底值没有那圈环)。选中片配色只经 `tone`:传内置色名(与 Chip 同名的 business / success / warning / danger / purple / pink / cyan / teal / orange / indigo / rose / slate)时底与字由核心定、深浅两主题各自成立;传 `{ bg, fg }` 时两个主题都用调用方这一对颜色(对比度由调用方负责)。段内 `count`(弱化灰字)/ `badge`(红角标)接受 `number | string`:数字 ≤0 不显示,字符串原样显示(如 `1K` / `99+`)。
|
|
46
46
|
|
|
47
|
-
> EN: Segmented: `items` (required) supports single or multiple selection; `size` (default lg; totals 24 / 28 / 32), `bordered` (1px outer frame, same total height), `multiple` (multi-select). One look only: grey track + white selected pill; its stroke ring and shadow come from the host elevation token (the offline fallback has no ring). An item’s `count` (muted text) and `badge` (red pill) take `number | string`: numbers ≤0 render nothing, strings render as given (e.g. `'1K'` / `'99+'`).
|
|
47
|
+
> EN: Segmented: `items` (required) supports single or multiple selection; `size` (default lg; totals 24 / 28 / 32), `bordered` (1px outer frame, same total height), `multiple` (multi-select). One look only: grey track + white selected pill; its stroke ring and shadow come from the host elevation token (the offline fallback has no ring). The selected pill’s colors go through `tone` only: a built-in color name (business / success / warning / danger / purple / pink / cyan / teal / orange / indigo / rose / slate, same names as Chip) lets the core pick background and text per theme; `{ bg, fg }` uses that pair verbatim in both themes (contrast is the caller’s call). An item’s `count` (muted text) and `badge` (red pill) take `number | string`: numbers ≤0 render nothing, strings render as given (e.g. `'1K'` / `'99+'`).
|
|
48
48
|
|
|
49
49
|
| 参数 | 类型 | 默认 | 说明(zh) | 说明(en) |
|
|
50
50
|
|---|---|---|---|---|
|
|
51
|
-
| `variant` | `上表
|
|
51
|
+
| `variant` | `上表 18 档(primary/secondary/danger/success/warning/info/outline/danger-outline/ghost/link + 扩展 purple/pink/cyan/teal/orange/indigo/rose/slate)` | 'outline' | 外观档 | Appearance tier |
|
|
52
52
|
| `size` | `'sm' \| 'md' \| 'lg'` | 'lg' | 高度档(24 / 28 / 32,有边无边同高) | Height tier (24 / 28 / 32, same height with or without border) |
|
|
53
53
|
| `icon` | `ReactNode` | — | 前置图标(官方图标组件 / 字符串均可) | Leading icon (official icon component or string) |
|
|
54
54
|
| `iconRight` | `ReactNode` | — | 后置图标(展开箭头、外链) | Trailing icon (expand arrow, external link) |
|
|
@@ -246,7 +246,7 @@ h(DateTimePicker, {
|
|
|
246
246
|
|
|
247
247
|
| 参数 | 类型 | 默认 | 说明(zh) | 说明(en) |
|
|
248
248
|
|---|---|---|---|---|
|
|
249
|
-
| `accent` | `
|
|
249
|
+
| `accent` | `13 档 or 任意 CSS 色值(business/success/warning/danger/neutral + 扩展 purple/pink/cyan/teal/orange/indigo/rose/slate)` | 'business' | 档位映射到 design 的 token;也可传 '#f59e0b' 这类自定义值 | Tiers map to design tokens; also accepts custom values like '#f59e0b' |
|
|
250
250
|
| `expanded` | `boolean` | 'false' | 展开态(箭头朝向 + panel 显隐) | Expanded state (arrow direction + panel show/hide) |
|
|
251
251
|
| `onToggle` | `() => void` | — | 传了才显示右侧折叠箭头;展开状态由调用方管 | Only shows the right collapse arrow if provided; caller owns the expanded state |
|
|
252
252
|
| `action` | `ReactNode` | — | 右上角操作区 | Top-right action area |
|
|
@@ -286,7 +286,7 @@ h(StripCard, {
|
|
|
286
286
|
|
|
287
287
|
| 参数 | 类型 | 默认 | 说明(zh) | 说明(en) |
|
|
288
288
|
|---|---|---|---|---|
|
|
289
|
-
| `tone` | `'neutral' \| 'business' \| 'success' \| 'warning' \| 'danger'` | 'neutral' | 语义色(neutral
|
|
289
|
+
| `tone` | `'neutral' \| 'business' \| 'success' \| 'warning' \| 'danger' \| 'purple' \| 'pink' \| 'cyan' \| 'teal' \| 'orange' \| 'indigo' \| 'rose' \| 'slate'` | 'neutral' | 语义色(neutral 灰面,其余为实心信号面;扩展八色同上) | Semantic color (neutral grey; others are solid signal faces; eight extended tiers as above) |
|
|
290
290
|
| `size` | `'sm' \| 'md' \| 'xs'` | 'sm' | 尺寸档 | Size tier |
|
|
291
291
|
| `width` | `number \| string` | — | 固定宽(px 或任意 CSS 宽度);与 minWidth / maxWidth 互斥,一旦设定后两者自动失效 | Fixed width (px or any CSS width); mutually exclusive with minWidth/maxWidth — once set, the other two are ignored |
|
|
292
292
|
| `minWidth` | `number \| string` | — | 最小宽:width 未设时生效,内容不足此宽时以它为准 | Minimum width: applies only when width is unset; content shorter than this still takes this width |
|