@q1travel/design-system 0.30.13 → 0.30.15

package/README.md

@@ -89,7 +89,7 @@ mkdir -p src/styles
 cp .claude/skills/product-design/contracts/app-base.css src/styles/app-base.css
 ```
 
-在应用入口先引入 `@q1travel/design-system/tokens.css`（已引入 `style.css` 时无需重复），再引入 `./styles/app-base.css`。应用可修改该副本或在之后加载覆盖样式；升级并重新 `sync` 后自行审阅模板差异再采纳，CLI 不覆盖应用副本。模板只包含盒模型、页面边距与最小高度、画布文字字体与字体平滑、点按高亮、原生表单字体继承；根容器、读屏工具与组件运动/触控行为由各自所属层管理。
+在应用入口先引入 `@q1travel/design-system/tokens.css`（已引入 `style.css` 时无需重复），再引入 `./styles/app-base.css`。应用可修改该副本或在之后加载覆盖样式；升级并重新 `sync` 后自行审阅模板差异再采纳，CLI 不覆盖应用副本。模板只包含盒模型、页面边距与最小高度、画布文字字体与字体平滑、点按高亮；根容器、读屏工具与组件运动/触控行为由各自所属层管理。组件自带字体继承；应用中的非设计系统原生控件需自行处理字体。已复制旧模板的应用可保留或删除 `button, input, textarea, select { font: inherit; }`，按自身原生控件需求决定。
 
 ## 版本
 

package/contracts/app-base.css

@@ -29,10 +29,3 @@ html {
   height: 100%;
   -webkit-tap-highlight-color: transparent;
 }
-
-button,
-input,
-textarea,
-select {
-  font: inherit;
-}

package/contracts/button-api-compatibility.md

@@ -30,6 +30,16 @@ Package-owned semantics are applied after native props. `type`, `className`, `di
 
 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.
 
+## IconButton Attention
+
+`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.
+
+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.
+
+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.
+
+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.
+
 ## Loading and Busy States
 
 `loading` and `busy` are intentionally different public states:

package/contracts/design.dark.md

@@ -385,7 +385,7 @@ components:
     backgroundColor: "{semantic-colors.surface-panel}"
     textColor: "{semantic-colors.text-primary}"
     placeholderColor: "{semantic-colors.text-muted}"
-    borderColor: "{semantic-colors.border}"
+    borderColor: "{semantic-colors.border-control}"
     focusColor: "{semantic-colors.focus-ring}"
     typography: "{typography.label-14}"
     rounded: "{rounded.sm}"
@@ -528,7 +528,7 @@ Static WCAG stroke contrast against canvas/panel (2026-10-07): light neutral 5.3
 CheckCircleFill accepts `tone?: 'default' | 'success'` (default `default`); success adds `.check-circle-fill--success`, using the same derived solid success fill as Badge and `--q1-color-action-on-primary` foreground; existing calls retain their DOM and appearance, and adjacent text conveys completion.
 
 
-**Images and proportions.** AspectRatio requires a finite positive width/height ratio (invalid values render as 1 with one development warning) and only reserves layout space. Image requires alt (empty for decoration), defaults to contain and eager, accepts optional src, fit, loading, sm/md/lg square sizes (32/40/48), onError and root className; omitted size follows host width and natural image ratio. Loading keeps img mounted under a decorative Skeleton; missing and failed sources show a single named image fallback, and source changes isolate stale events. Decorative states are hidden from assistive technology; neither Image nor its host becomes inert. Inside AspectRatio, omit size: the Image root and img fill the ratio frame and object-fit controls complete centered containment or cropping. No new tokens or existing-consumer migration; remove new usages before reverting the additive exports.
+**Images and proportions.** AspectRatio requires a finite positive width/height ratio (invalid values render as 1 with one development warning) and only reserves layout space. Image requires alt (empty for decoration), defaults to contain and eager, accepts optional src, fit, loading, sm/md/lg square sizes (32/40/48), onError and root className; omitted size follows host width and natural image ratio. Loading keeps img mounted under a decorative Skeleton; missing and failed sources show a single named image fallback, and source changes isolate stale events. Decorative states are hidden from assistive technology; neither Image nor its host becomes inert. Inside AspectRatio, omit size: the Image root and img fill the ratio frame and object-fit controls complete centered containment or cropping. Image also accepts opt-in frame="none": only none emits data-frame="none" on the existing .image root, removing its border and radius while preserving background, dimensions, fit, loading, empty/error text and accessible names. Omitted frame and frame="default" preserve the previous markup and appearance exactly; the host may provide the outer frame. No new tokens or existing-consumer migration; remove new usages before reverting the additive exports.
 
 **Status and feedback.** Banner, ProjectBanner, Note, ErrorCard, RegionErrorState, ErrorMessage, EmptyState, Badge, Pill, CheckCircleFill, StatusDot, ToastProvider, useToast, Feedback, PageFeedback, Spinner, LoadingDots, Skeleton, StatusPage, SkeletonIllustration, EmptyListIllustration.
 

package/contracts/design.md

@@ -385,7 +385,7 @@ components:
     backgroundColor: "{semantic-colors.surface-panel}"
     textColor: "{semantic-colors.text-primary}"
     placeholderColor: "{semantic-colors.text-muted}"
-    borderColor: "{semantic-colors.border}"
+    borderColor: "{semantic-colors.border-control}"
     focusColor: "{semantic-colors.focus-ring}"
     typography: "{typography.label-14}"
     rounded: "{rounded.sm}"
@@ -528,7 +528,7 @@ Static WCAG stroke contrast against canvas/panel (2026-10-07): light neutral 5.3
 CheckCircleFill accepts `tone?: 'default' | 'success'` (default `default`); success adds `.check-circle-fill--success`, using the same derived solid success fill as Badge and `--q1-color-action-on-primary` foreground; existing calls retain their DOM and appearance, and adjacent text conveys completion.
 
 
-**Images and proportions.** AspectRatio requires a finite positive width/height ratio (invalid values render as 1 with one development warning) and only reserves layout space. Image requires alt (empty for decoration), defaults to contain and eager, accepts optional src, fit, loading, sm/md/lg square sizes (32/40/48), onError and root className; omitted size follows host width and natural image ratio. Loading keeps img mounted under a decorative Skeleton; missing and failed sources show a single named image fallback, and source changes isolate stale events. Decorative states are hidden from assistive technology; neither Image nor its host becomes inert. Inside AspectRatio, omit size: the Image root and img fill the ratio frame and object-fit controls complete centered containment or cropping. No new tokens or existing-consumer migration; remove new usages before reverting the additive exports.
+**Images and proportions.** AspectRatio requires a finite positive width/height ratio (invalid values render as 1 with one development warning) and only reserves layout space. Image requires alt (empty for decoration), defaults to contain and eager, accepts optional src, fit, loading, sm/md/lg square sizes (32/40/48), onError and root className; omitted size follows host width and natural image ratio. Loading keeps img mounted under a decorative Skeleton; missing and failed sources show a single named image fallback, and source changes isolate stale events. Decorative states are hidden from assistive technology; neither Image nor its host becomes inert. Inside AspectRatio, omit size: the Image root and img fill the ratio frame and object-fit controls complete centered containment or cropping. Image also accepts opt-in frame="none": only none emits data-frame="none" on the existing .image root, removing its border and radius while preserving background, dimensions, fit, loading, empty/error text and accessible names. Omitted frame and frame="default" preserve the previous markup and appearance exactly; the host may provide the outer frame. No new tokens or existing-consumer migration; remove new usages before reverting the additive exports.
 
 **Status and feedback.** Banner, ProjectBanner, Note, ErrorCard, RegionErrorState, ErrorMessage, EmptyState, Badge, Pill, CheckCircleFill, StatusDot, ToastProvider, useToast, Feedback, PageFeedback, Spinner, LoadingDots, Skeleton, StatusPage, SkeletonIllustration, EmptyListIllustration.
 

package/dist-pkg/design-system.d.ts

@@ -1325,7 +1325,7 @@ export declare type HoverCardProps = {
     className?: string;
 };
 
-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;
+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;
 
 declare type IconButtonAccessibleName = {
     'aria-label': string;
@@ -1347,6 +1347,7 @@ declare type IconButtonBaseProps = {
     variant?: ButtonVariant;
     size?: ButtonSize;
     circle?: boolean;
+    attention?: boolean;
     loading?: boolean;
     loadingLabel?: string;
     disabled?: boolean;
@@ -1360,7 +1361,7 @@ export declare type IconButtonProps = IconButtonAccessibleName & IconButtonBaseP
     ref?: Ref<HTMLButtonElement>;
 };
 
-declare function Image_2({ src, alt, loading, fit, size, onError, className }: ImageProps): JSX.Element;
+declare function Image_2({ src, alt, loading, fit, size, frame, onError, className }: ImageProps): JSX.Element;
 export { Image_2 as Image }
 
 export declare type ImageProps = {
@@ -1369,6 +1370,7 @@ export declare type ImageProps = {
     loading?: 'eager' | 'lazy';
     fit?: 'contain' | 'cover';
     size?: 'sm' | 'md' | 'lg';
+    frame?: 'default' | 'none';
     onError?: ReactEventHandler<HTMLImageElement>;
     className?: string;
 };