@arc-ui/components 13.4.0 → 13.6.0

package/lib/index.d.cts

@@ -712,7 +712,7 @@ interface BannerImageProps extends Pick<ImageProps, "src" | "alt" | "loading" |
 }
 
 /** Use `TemplateBanner` as a base structure for banner components; other banner variants extend or consume this template. */
-declare const TemplateBanner: ({ heading, fontStyle, label, labelLevel, text, img, contentRatio, contentRatios, children, alignment, additionalTopMargin, minHeight, minHeightM, minHeightL, minHeightXL, headingSize, isReversed, isElevated, headingLevel, headingWordWrap, type, ...props }: TemplateBannerProps) => React__default.JSX.Element;
+declare const TemplateBanner: ({ heading, fontStyle, headingColor, label, labelLevel, labelColor, text, img, contentRatio, contentRatios, children, alignment, additionalTopMargin, minHeight, minHeightM, minHeightL, minHeightXL, headingSize, isReversed, isElevated, headingLevel, headingWordWrap, type, ...props }: TemplateBannerProps) => React__default.JSX.Element;
 type TemplateBannerStyle = "light" | "dark" | "contained";
 type TemplateBannerAlignment = "top" | "bottom" | "center";
 interface TemplateBannerImage extends BannerImageProps {
@@ -819,10 +819,18 @@ interface TemplateBannerProps {
      * Whether long words in heading should be wrapped.
      */
     headingWordWrap?: boolean;
+    /**
+     * The color of the Heading
+     */
+    headingColor?: HeadingColor;
+    /**
+     * The color of the Label
+     */
+    labelColor?: HeadingColor;
 }
 
 /** Use `Banner` to promote key content or products with bold visuals and messaging. */
-declare const Banner: ({ heading, label, text, img, contentRatio, contentRatios, children, minHeight, isReversed, isElevated, headingLevel, type, alignment, headingWordWrap, ...props }: BannerProps) => React__default.JSX.Element;
+declare const Banner: ({ heading, label, text, img, contentRatio, contentRatios, children, minHeight, isReversed, isElevated, headingLevel, type, alignment, fontStyle, headingWordWrap, headingColor, labelColor, ...props }: BannerProps) => React__default.JSX.Element;
 type BannerProps = Omit<TemplateBannerProps, "headingSize" | "additionalTopMargin">;
 
 type SurfaceBackground = "light" | "dark";
@@ -2248,7 +2256,7 @@ interface DisclosureMiniProps {
     size?: "l" | "s";
 }
 
-declare const iconNames: readonly ["alertDismiss", "alertError", "alertGeneral", "alertSuccess", "alertWarning", "avatarUser", "breadcrumbLeft", "breadcrumbRight", "buttonLeft", "buttonRight", "calendarLeft", "calendarRight", "cardRight", "cardPlay", "carouselRight", "carouselLeft", "checkboxChecked", "checkboxError", "comboboxTagRemove", "comboboxAutoComplete", "comboboxSelected", "comboboxNoResults", "comboboxClear", "datePickerCalendar", "disclosureExpand", "disclosureMiniExpand", "downloadFile", "downloadAccessibility", "drawerClose", "formControlAlert", "linkExternal", "modalClose", "navigationHeaderSideMenuBack", "navigationHeaderClose", "navigationHeaderDisclosure", "navigationHeaderArrowRight", "navigationHeaderMenuLinkSmall", "navigationHeaderMenuLinkLarge", "navigationHeaderBasket", "navigationHeaderSearch", "navigationHeaderUser", "paginationPrevious", "paginationNext", "paginationSimplePrevious", "paginationSimpleNext", "progressBarSuccess", "progressBarError", "progressBarRefresh", "progressStepperComplete", "progressStepperCurrent", "progressStepperWarning", "progressStepperError", "scrollToTop", "selectTrigger", "selectScrollUp", "selectScrollDown", "selectIndicator", "siteFooterExpand", "siteHeaderBack", "siteHeaderBurger", "siteHeaderLink", "siteHeaderItemGroupExpand", "siteHeaderNavItemExpand", "siteHeaderNavItemExpandAlt", "siteHeaderViewAll", "siteHeaderSubNavOpen", "switchToggle", "tabsNext", "tabsPrevious", "tagRemove", "textInputShowPassword", "textInputHidePassword", "textInputClear", "toastGeneral", "toastSuccess", "toastWarning", "toastError", "toastDismiss", "videoPlayerTranscript", "videoPlayerPlay"];
+declare const iconNames: readonly ["alertDismiss", "alertError", "alertGeneral", "alertSuccess", "alertWarning", "avatarUser", "breadcrumbLeft", "breadcrumbRight", "buttonLeft", "buttonRight", "calendarLeft", "calendarRight", "cardRight", "cardPlay", "carouselRight", "carouselLeft", "checkboxChecked", "checkboxError", "comboboxTagRemove", "comboboxAutoComplete", "comboboxSelected", "comboboxNoResults", "comboboxClear", "datePickerCalendar", "disclosureExpand", "disclosureMiniExpand", "downloadFile", "downloadAccessibility", "drawerClose", "formControlAlert", "linkExternal", "modalClose", "navigationHeaderSideMenuBack", "navigationHeaderClose", "navigationHeaderDisclosure", "navigationHeaderMenuLink", "navigationHeaderBasket", "navigationHeaderSearch", "navigationHeaderUser", "paginationPrevious", "paginationNext", "paginationSimplePrevious", "paginationSimpleNext", "progressBarSuccess", "progressBarError", "progressBarRefresh", "progressStepperComplete", "progressStepperCurrent", "progressStepperWarning", "progressStepperError", "scrollToTop", "selectTrigger", "selectScrollUp", "selectScrollDown", "selectIndicator", "siteFooterExpand", "siteHeaderBack", "siteHeaderBurger", "siteHeaderLink", "siteHeaderItemGroupExpand", "siteHeaderNavItemExpand", "siteHeaderNavItemExpandAlt", "siteHeaderViewAll", "siteHeaderSubNavOpen", "switchToggle", "tabsNext", "tabsPrevious", "tagRemove", "textInputShowPassword", "textInputHidePassword", "textInputClear", "toastGeneral", "toastSuccess", "toastWarning", "toastError", "toastDismiss", "videoPlayerTranscript", "videoPlayerPlay"];
 
 /** Use `ThemeIcon` to display an icon that allows switching between theme-specific icons. */
 declare const ThemeIcon: ({ size, icon, color, ...props }: ThemeIconProps) => React__default.JSX.Element;
@@ -2547,8 +2555,8 @@ interface FilterControlProps {
 /**
  *  Use `GhostedHeroBanner` to grab attention and convey the main message or purpose of a webpage
  */
-declare const GhostedHeroBanner: ({ heading, headingLevel, label, text, img, children, fontStyle, headingWordWrap, ...props }: GhostedHeroBannerProps) => React__default.JSX.Element;
-type GhostedHeroBannerProps = Pick<TemplateBannerProps, "heading" | "img" | "children" | "label" | "text" | "headingLevel" | "fontStyle" | "headingWordWrap">;
+declare const GhostedHeroBanner: ({ heading, headingLevel, label, text, img, children, fontStyle, headingWordWrap, headingColor, labelColor, ...props }: GhostedHeroBannerProps) => React__default.JSX.Element;
+type GhostedHeroBannerProps = Pick<TemplateBannerProps, "heading" | "img" | "children" | "label" | "text" | "headingLevel" | "fontStyle" | "headingWordWrap" | "headingColor" | "labelColor">;
 
 /**
  * Provides an object of breakpoints for responsive designs.
@@ -2729,7 +2737,7 @@ interface GroupItemProps {
 }
 
 /** Use `HeroBanner` to promote key content or products with bold visuals and messaging. */
-declare const HeroBanner: ({ heading, label, text, img, contentRatio, contentRatios, children, minHeight, isReversed, isElevated, headingLevel, extendBeyondContainer, type, fontStyle, headingWordWrap, ...props }: HeroBannerProps) => React__default.JSX.Element;
+declare const HeroBanner: ({ heading, label, text, img, contentRatio, contentRatios, children, minHeight, isReversed, isElevated, headingLevel, extendBeyondContainer, type, fontStyle, headingWordWrap, headingColor, labelColor, ...props }: HeroBannerProps) => React__default.JSX.Element;
 interface HeroBannerProps extends Omit<TemplateBannerProps, "headingSize" | "alignment" | "additionalTopMargin"> {
     /**
      * Extend HeroBanner 56px beyond its container on both sides at larger breakpoints (e.g., 1440px and above).
@@ -3769,7 +3777,7 @@ interface PopoverProps {
     /**
      * Background theme of the Popover
      */
-    background?: "dark" | "light" | "brand";
+    background?: "dark" | "light" | "brand" | "white";
     /**
      * Called when focus moves into the popover
      */
@@ -5630,7 +5638,9 @@ interface ThemeProps {
     children: any;
 }
 
-/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
+/** ThumbnailSignpost` has been **deprecated from arc component package** and moved into the **community-components package**. It can be seen on the community components storybook.
+ *
+ * Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon.*/
 declare const ThumbnailSignpost: ({ text, title, img, button, ...props }: ThumbnailSignpostProps) => React__default.JSX.Element;
 interface ThumbnailSignpostProps {
     /**
@@ -6077,9 +6087,9 @@ type ConfigurableHeaderVisibility = Partial<Record<Exclude<ArcBreakpointSizes, "
 
 type MenuColorPathway = "invert" | "match";
 
-type ContainerBackgroundColor = "light" | "lightElevated" | "neutral" | "ghostedOnDark" | "ghostedOnLight" | "transparentOnDark" | "transparentOnLight";
+type ContainerBackgroundColor = "light" | "lightElevated" | "lightElevatedTight" | "neutral" | "ghostedOnDark" | "ghostedOnLight" | "transparentOnDark" | "transparentOnLight";
 
-type NavBarBackground = Exclude<ContainerBackgroundColor, "neutral">;
+type NavBarBackground = Exclude<ContainerBackgroundColor, "neutral" | "lightElevatedTight">;
 
 interface SideMenuAction {
     /**

package/lib/index.d.mts

@@ -712,7 +712,7 @@ interface BannerImageProps extends Pick<ImageProps, "src" | "alt" | "loading" |
 }
 
 /** Use `TemplateBanner` as a base structure for banner components; other banner variants extend or consume this template. */
-declare const TemplateBanner: ({ heading, fontStyle, label, labelLevel, text, img, contentRatio, contentRatios, children, alignment, additionalTopMargin, minHeight, minHeightM, minHeightL, minHeightXL, headingSize, isReversed, isElevated, headingLevel, headingWordWrap, type, ...props }: TemplateBannerProps) => React__default.JSX.Element;
+declare const TemplateBanner: ({ heading, fontStyle, headingColor, label, labelLevel, labelColor, text, img, contentRatio, contentRatios, children, alignment, additionalTopMargin, minHeight, minHeightM, minHeightL, minHeightXL, headingSize, isReversed, isElevated, headingLevel, headingWordWrap, type, ...props }: TemplateBannerProps) => React__default.JSX.Element;
 type TemplateBannerStyle = "light" | "dark" | "contained";
 type TemplateBannerAlignment = "top" | "bottom" | "center";
 interface TemplateBannerImage extends BannerImageProps {
@@ -819,10 +819,18 @@ interface TemplateBannerProps {
      * Whether long words in heading should be wrapped.
      */
     headingWordWrap?: boolean;
+    /**
+     * The color of the Heading
+     */
+    headingColor?: HeadingColor;
+    /**
+     * The color of the Label
+     */
+    labelColor?: HeadingColor;
 }
 
 /** Use `Banner` to promote key content or products with bold visuals and messaging. */
-declare const Banner: ({ heading, label, text, img, contentRatio, contentRatios, children, minHeight, isReversed, isElevated, headingLevel, type, alignment, headingWordWrap, ...props }: BannerProps) => React__default.JSX.Element;
+declare const Banner: ({ heading, label, text, img, contentRatio, contentRatios, children, minHeight, isReversed, isElevated, headingLevel, type, alignment, fontStyle, headingWordWrap, headingColor, labelColor, ...props }: BannerProps) => React__default.JSX.Element;
 type BannerProps = Omit<TemplateBannerProps, "headingSize" | "additionalTopMargin">;
 
 type SurfaceBackground = "light" | "dark";
@@ -2248,7 +2256,7 @@ interface DisclosureMiniProps {
     size?: "l" | "s";
 }
 
-declare const iconNames: readonly ["alertDismiss", "alertError", "alertGeneral", "alertSuccess", "alertWarning", "avatarUser", "breadcrumbLeft", "breadcrumbRight", "buttonLeft", "buttonRight", "calendarLeft", "calendarRight", "cardRight", "cardPlay", "carouselRight", "carouselLeft", "checkboxChecked", "checkboxError", "comboboxTagRemove", "comboboxAutoComplete", "comboboxSelected", "comboboxNoResults", "comboboxClear", "datePickerCalendar", "disclosureExpand", "disclosureMiniExpand", "downloadFile", "downloadAccessibility", "drawerClose", "formControlAlert", "linkExternal", "modalClose", "navigationHeaderSideMenuBack", "navigationHeaderClose", "navigationHeaderDisclosure", "navigationHeaderArrowRight", "navigationHeaderMenuLinkSmall", "navigationHeaderMenuLinkLarge", "navigationHeaderBasket", "navigationHeaderSearch", "navigationHeaderUser", "paginationPrevious", "paginationNext", "paginationSimplePrevious", "paginationSimpleNext", "progressBarSuccess", "progressBarError", "progressBarRefresh", "progressStepperComplete", "progressStepperCurrent", "progressStepperWarning", "progressStepperError", "scrollToTop", "selectTrigger", "selectScrollUp", "selectScrollDown", "selectIndicator", "siteFooterExpand", "siteHeaderBack", "siteHeaderBurger", "siteHeaderLink", "siteHeaderItemGroupExpand", "siteHeaderNavItemExpand", "siteHeaderNavItemExpandAlt", "siteHeaderViewAll", "siteHeaderSubNavOpen", "switchToggle", "tabsNext", "tabsPrevious", "tagRemove", "textInputShowPassword", "textInputHidePassword", "textInputClear", "toastGeneral", "toastSuccess", "toastWarning", "toastError", "toastDismiss", "videoPlayerTranscript", "videoPlayerPlay"];
+declare const iconNames: readonly ["alertDismiss", "alertError", "alertGeneral", "alertSuccess", "alertWarning", "avatarUser", "breadcrumbLeft", "breadcrumbRight", "buttonLeft", "buttonRight", "calendarLeft", "calendarRight", "cardRight", "cardPlay", "carouselRight", "carouselLeft", "checkboxChecked", "checkboxError", "comboboxTagRemove", "comboboxAutoComplete", "comboboxSelected", "comboboxNoResults", "comboboxClear", "datePickerCalendar", "disclosureExpand", "disclosureMiniExpand", "downloadFile", "downloadAccessibility", "drawerClose", "formControlAlert", "linkExternal", "modalClose", "navigationHeaderSideMenuBack", "navigationHeaderClose", "navigationHeaderDisclosure", "navigationHeaderMenuLink", "navigationHeaderBasket", "navigationHeaderSearch", "navigationHeaderUser", "paginationPrevious", "paginationNext", "paginationSimplePrevious", "paginationSimpleNext", "progressBarSuccess", "progressBarError", "progressBarRefresh", "progressStepperComplete", "progressStepperCurrent", "progressStepperWarning", "progressStepperError", "scrollToTop", "selectTrigger", "selectScrollUp", "selectScrollDown", "selectIndicator", "siteFooterExpand", "siteHeaderBack", "siteHeaderBurger", "siteHeaderLink", "siteHeaderItemGroupExpand", "siteHeaderNavItemExpand", "siteHeaderNavItemExpandAlt", "siteHeaderViewAll", "siteHeaderSubNavOpen", "switchToggle", "tabsNext", "tabsPrevious", "tagRemove", "textInputShowPassword", "textInputHidePassword", "textInputClear", "toastGeneral", "toastSuccess", "toastWarning", "toastError", "toastDismiss", "videoPlayerTranscript", "videoPlayerPlay"];
 
 /** Use `ThemeIcon` to display an icon that allows switching between theme-specific icons. */
 declare const ThemeIcon: ({ size, icon, color, ...props }: ThemeIconProps) => React__default.JSX.Element;
@@ -2547,8 +2555,8 @@ interface FilterControlProps {
 /**
  *  Use `GhostedHeroBanner` to grab attention and convey the main message or purpose of a webpage
  */
-declare const GhostedHeroBanner: ({ heading, headingLevel, label, text, img, children, fontStyle, headingWordWrap, ...props }: GhostedHeroBannerProps) => React__default.JSX.Element;
-type GhostedHeroBannerProps = Pick<TemplateBannerProps, "heading" | "img" | "children" | "label" | "text" | "headingLevel" | "fontStyle" | "headingWordWrap">;
+declare const GhostedHeroBanner: ({ heading, headingLevel, label, text, img, children, fontStyle, headingWordWrap, headingColor, labelColor, ...props }: GhostedHeroBannerProps) => React__default.JSX.Element;
+type GhostedHeroBannerProps = Pick<TemplateBannerProps, "heading" | "img" | "children" | "label" | "text" | "headingLevel" | "fontStyle" | "headingWordWrap" | "headingColor" | "labelColor">;
 
 /**
  * Provides an object of breakpoints for responsive designs.
@@ -2729,7 +2737,7 @@ interface GroupItemProps {
 }
 
 /** Use `HeroBanner` to promote key content or products with bold visuals and messaging. */
-declare const HeroBanner: ({ heading, label, text, img, contentRatio, contentRatios, children, minHeight, isReversed, isElevated, headingLevel, extendBeyondContainer, type, fontStyle, headingWordWrap, ...props }: HeroBannerProps) => React__default.JSX.Element;
+declare const HeroBanner: ({ heading, label, text, img, contentRatio, contentRatios, children, minHeight, isReversed, isElevated, headingLevel, extendBeyondContainer, type, fontStyle, headingWordWrap, headingColor, labelColor, ...props }: HeroBannerProps) => React__default.JSX.Element;
 interface HeroBannerProps extends Omit<TemplateBannerProps, "headingSize" | "alignment" | "additionalTopMargin"> {
     /**
      * Extend HeroBanner 56px beyond its container on both sides at larger breakpoints (e.g., 1440px and above).
@@ -3769,7 +3777,7 @@ interface PopoverProps {
     /**
      * Background theme of the Popover
      */
-    background?: "dark" | "light" | "brand";
+    background?: "dark" | "light" | "brand" | "white";
     /**
      * Called when focus moves into the popover
      */
@@ -5630,7 +5638,9 @@ interface ThemeProps {
     children: any;
 }
 
-/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
+/** ThumbnailSignpost` has been **deprecated from arc component package** and moved into the **community-components package**. It can be seen on the community components storybook.
+ *
+ * Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon.*/
 declare const ThumbnailSignpost: ({ text, title, img, button, ...props }: ThumbnailSignpostProps) => React__default.JSX.Element;
 interface ThumbnailSignpostProps {
     /**
@@ -6077,9 +6087,9 @@ type ConfigurableHeaderVisibility = Partial<Record<Exclude<ArcBreakpointSizes, "
 
 type MenuColorPathway = "invert" | "match";
 
-type ContainerBackgroundColor = "light" | "lightElevated" | "neutral" | "ghostedOnDark" | "ghostedOnLight" | "transparentOnDark" | "transparentOnLight";
+type ContainerBackgroundColor = "light" | "lightElevated" | "lightElevatedTight" | "neutral" | "ghostedOnDark" | "ghostedOnLight" | "transparentOnDark" | "transparentOnLight";
 
-type NavBarBackground = Exclude<ContainerBackgroundColor, "neutral">;
+type NavBarBackground = Exclude<ContainerBackgroundColor, "neutral" | "lightElevatedTight">;
 
 interface SideMenuAction {
     /**