@q1travel/design-system 0.30.14 → 0.30.16

package/contracts/design.dark.md

@@ -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

@@ -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

@@ -1361,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 = {
@@ -1370,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;
 };