@q1travel/design-system 0.30.13 → 0.30.14
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/README.md +1 -1
- package/contracts/app-base.css +0 -7
- package/contracts/button-api-compatibility.md +10 -0
- package/contracts/design.dark.md +1 -1
- package/contracts/design.md +1 -1
- package/dist-pkg/design-system.d.ts +2 -1
- package/dist-pkg/design-system.js +2724 -2722
- package/dist-pkg/style.css +14 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -89,7 +89,7 @@ mkdir -p src/styles
|
|
|
89
89
|
cp .claude/skills/product-design/contracts/app-base.css src/styles/app-base.css
|
|
90
90
|
```
|
|
91
91
|
|
|
92
|
-
在应用入口先引入 `@q1travel/design-system/tokens.css`(已引入 `style.css` 时无需重复),再引入 `./styles/app-base.css`。应用可修改该副本或在之后加载覆盖样式;升级并重新 `sync` 后自行审阅模板差异再采纳,CLI
|
|
92
|
+
在应用入口先引入 `@q1travel/design-system/tokens.css`(已引入 `style.css` 时无需重复),再引入 `./styles/app-base.css`。应用可修改该副本或在之后加载覆盖样式;升级并重新 `sync` 后自行审阅模板差异再采纳,CLI 不覆盖应用副本。模板只包含盒模型、页面边距与最小高度、画布文字字体与字体平滑、点按高亮;根容器、读屏工具与组件运动/触控行为由各自所属层管理。组件自带字体继承;应用中的非设计系统原生控件需自行处理字体。已复制旧模板的应用可保留或删除 `button, input, textarea, select { font: inherit; }`,按自身原生控件需求决定。
|
|
93
93
|
|
|
94
94
|
## 版本
|
|
95
95
|
|
package/contracts/app-base.css
CHANGED
|
@@ -30,6 +30,16 @@ Package-owned semantics are applied after native props. `type`, `className`, `di
|
|
|
30
30
|
|
|
31
31
|
Button preserves an explicitly supplied native `aria-busy` when `busy` is false, including during `loading`; `loading` alone still does not add it. This lets consumers announce an external task immediately while controlling visual loading separately. `busy=true` always sets `aria-busy="true"`, even when a consumer passes false. ButtonLink keeps its existing package-owned busy semantics.
|
|
32
32
|
|
|
33
|
+
## IconButton Attention
|
|
34
|
+
|
|
35
|
+
`attention?: boolean` is opt-in. Only `attention={true}` adds `data-icon-button-attention="true"` to the existing button. Omitting it or passing false preserves the previous markup and styling without a new class or wrapper.
|
|
36
|
+
|
|
37
|
+
The first direct child must be an icon or an icon-only container. Subsequent children may include a static Badge. Only that first element rotates, once, using the existing slow duration and in-out easing tokens. The button, Badge, layout, accessible name, native keyboard activation, and focus remain unchanged.
|
|
38
|
+
|
|
39
|
+
A persistent true value does not replay on rerender, hover, or focus. A committed false state observed by the browser, followed by true, starts another finite cycle. Batched false-to-true updates do not promise replay. No timer or background replay queue is provided.
|
|
40
|
+
|
|
41
|
+
Under `prefers-reduced-motion: reduce`, no attention animation runs and the static count remains visible. Consumers include the unread count in the accessible name and own count positioning.
|
|
42
|
+
|
|
33
43
|
## Loading and Busy States
|
|
34
44
|
|
|
35
45
|
`loading` and `busy` are intentionally different public states:
|
package/contracts/design.dark.md
CHANGED
|
@@ -385,7 +385,7 @@ components:
|
|
|
385
385
|
backgroundColor: "{semantic-colors.surface-panel}"
|
|
386
386
|
textColor: "{semantic-colors.text-primary}"
|
|
387
387
|
placeholderColor: "{semantic-colors.text-muted}"
|
|
388
|
-
borderColor: "{semantic-colors.border}"
|
|
388
|
+
borderColor: "{semantic-colors.border-control}"
|
|
389
389
|
focusColor: "{semantic-colors.focus-ring}"
|
|
390
390
|
typography: "{typography.label-14}"
|
|
391
391
|
rounded: "{rounded.sm}"
|
package/contracts/design.md
CHANGED
|
@@ -385,7 +385,7 @@ components:
|
|
|
385
385
|
backgroundColor: "{semantic-colors.surface-panel}"
|
|
386
386
|
textColor: "{semantic-colors.text-primary}"
|
|
387
387
|
placeholderColor: "{semantic-colors.text-muted}"
|
|
388
|
-
borderColor: "{semantic-colors.border}"
|
|
388
|
+
borderColor: "{semantic-colors.border-control}"
|
|
389
389
|
focusColor: "{semantic-colors.focus-ring}"
|
|
390
390
|
typography: "{typography.label-14}"
|
|
391
391
|
rounded: "{rounded.sm}"
|
|
@@ -1325,7 +1325,7 @@ export declare type HoverCardProps = {
|
|
|
1325
1325
|
className?: string;
|
|
1326
1326
|
};
|
|
1327
1327
|
|
|
1328
|
-
export declare function IconButton({ 'aria-label': canonicalAriaLabel, ariaLabel: legacyAriaLabel, 'aria-pressed': ariaPressed, disabled, loading, onClick, onBlur, onKeyDown, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, onLostPointerCapture, ...rest }: IconButtonProps): JSX.Element;
|
|
1328
|
+
export declare function IconButton({ 'aria-label': canonicalAriaLabel, ariaLabel: legacyAriaLabel, 'aria-pressed': ariaPressed, disabled, loading, attention, onClick, onBlur, onKeyDown, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, onLostPointerCapture, ...rest }: IconButtonProps): JSX.Element;
|
|
1329
1329
|
|
|
1330
1330
|
declare type IconButtonAccessibleName = {
|
|
1331
1331
|
'aria-label': string;
|
|
@@ -1347,6 +1347,7 @@ declare type IconButtonBaseProps = {
|
|
|
1347
1347
|
variant?: ButtonVariant;
|
|
1348
1348
|
size?: ButtonSize;
|
|
1349
1349
|
circle?: boolean;
|
|
1350
|
+
attention?: boolean;
|
|
1350
1351
|
loading?: boolean;
|
|
1351
1352
|
loadingLabel?: string;
|
|
1352
1353
|
disabled?: boolean;
|