@capra/core 1.9.0 → 1.11.0

package/dist/index.cjs

@@ -577,15 +577,15 @@ const Card = Object.assign(CardRoot, {
 //#endregion
 //#region src/components/Badge/Badge.module.css
 var Badge_module_default = {
-	"badge": "capra-Badge-module-yecu4W-badge",
-	"base": "capra-Badge-module-yecu4W-base"
+	"badge": "capra-Badge-module-_3WihW-badge",
+	"base": "capra-Badge-module-_3WihW-base"
 };
 //#endregion
 //#region src/components/Badge/Badge.tsx
 /**
 * Badges display an indicator/counter on an associated component.
 */
-function Badge({ appearance = "danger", variant, count = 0, showZero = false, overflowCount = 99, FORCE__className, ...props }) {
+function Badge({ appearance = "danger", variant = "counter", size = "md", count = 0, showZero = false, overflowCount = 99, FORCE__className, style, ...props }) {
 	if (variant === "counter" && !showZero && !count) return null;
 	const getBadgeContent = () => {
 		if (variant === "dot") return null;
@@ -593,18 +593,25 @@ function Badge({ appearance = "danger", variant, count = 0, showZero = false, ov
 		return value > overflowCount ? `${overflowCount}+` : value;
 	};
 	return /* @__PURE__ */ react.createElement("span", {
-		role: "status",
 		className: clsx(Badge_module_default.badge, FORCE__className),
 		"data-appearance": appearance,
+		"data-size": size,
 		"data-variant": variant,
+		style,
 		...props
 	}, getBadgeContent());
 }
 /**
 * A convenience component allowing you to easily attach a badge to another component.
 */
-function BadgeLayout({ children }) {
-	return /* @__PURE__ */ react.createElement("div", { className: Badge_module_default.base }, children);
+function BadgeLayout({ children, offset = [0, 0] }) {
+	return /* @__PURE__ */ react.createElement("div", {
+		className: Badge_module_default.base,
+		style: {
+			"--_badge-offset-x": `${offset[0]}px`,
+			"--_badge-offset-y": `${offset[1]}px`
+		}
+	}, children);
 }
 //#endregion
 //#region src/components/ListItem/ListItem.module.css
@@ -3438,21 +3445,29 @@ function lazyLoad(importFn) {
 	}));
 }
 const ILLUSTRATIONS = {
-	EmptyFolder: {
-		light: lazyLoad(() => import("@capra/icons/esm/images/EmptyFolder")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/EmptyFolderDark"))
-	},
 	ArtSupplies: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/ArtSupplies")),
 		dark: lazyLoad(() => import("@capra/icons/esm/images/ArtSuppliesDark"))
 	},
-	Sandcastle: {
-		light: lazyLoad(() => import("@capra/icons/esm/images/Sandcastle")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/SandcastleDark"))
+	Attention: {
+		light: lazyLoad(() => import("@capra/icons/esm/images/Attention")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/AttentionDark"))
+	},
+	Celebration: {
+		light: lazyLoad(() => import("@capra/icons/esm/images/Celebration")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/CelebrationDark"))
+	},
+	Hibernating: {
+		light: lazyLoad(() => import("@capra/icons/esm/images/Hibernating")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/HibernatingDark"))
 	},
 	EmptyBowl: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/EmptyBowl")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/EmptyBowl"))
+		dark: lazyLoad(() => import("@capra/icons/esm/images/EmptyBowlDark"))
+	},
+	EmptyFolder: {
+		light: lazyLoad(() => import("@capra/icons/esm/images/EmptyFolder")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/EmptyFolderDark"))
 	},
 	EmptySuitcase: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/EmptySuitcase")),
@@ -3460,19 +3475,23 @@ const ILLUSTRATIONS = {
 	},
 	Envelope: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/Envelope")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/Envelope"))
+		dark: lazyLoad(() => import("@capra/icons/esm/images/EnvelopeDark"))
 	},
 	MissingSock: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/MissingSock")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/MissingSock"))
+		dark: lazyLoad(() => import("@capra/icons/esm/images/MissingSockDark"))
 	},
 	PizzaBox: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/PizzaBox")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/PizzaBox"))
+		dark: lazyLoad(() => import("@capra/icons/esm/images/PizzaBoxDark"))
 	},
 	PottedPlant: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/PottedPlant")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/PottedPlant"))
+		dark: lazyLoad(() => import("@capra/icons/esm/images/PottedPlantDark"))
+	},
+	Sandcastle: {
+		light: lazyLoad(() => import("@capra/icons/esm/images/Sandcastle")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/SandcastleDark"))
 	}
 };
 /**
@@ -4385,23 +4404,23 @@ const submenuPanelClassName = Menu_module_default.menu;
 //#endregion
 //#region src/components/TabNav/TabNav.module.css
 var TabNav_module_default = {
-	"dropdownIcon": "capra-TabNav-module-qqfvea-dropdownIcon",
-	"extraContent": "capra-TabNav-module-qqfvea-extraContent",
-	"indentSpacer": "capra-TabNav-module-qqfvea-indentSpacer",
-	"panel": "capra-TabNav-module-qqfvea-panel",
-	"root": "capra-TabNav-module-qqfvea-root",
-	"subMenu": "capra-TabNav-module-qqfvea-subMenu",
-	"subMenuItem": "capra-TabNav-module-qqfvea-subMenuItem",
-	"subMenuItemActive": "capra-TabNav-module-qqfvea-subMenuItemActive",
-	"subTab": "capra-TabNav-module-qqfvea-subTab",
-	"subTabList": "capra-TabNav-module-qqfvea-subTabList",
-	"subTabListItem": "capra-TabNav-module-qqfvea-subTabListItem",
-	"tab": "capra-TabNav-module-qqfvea-tab",
-	"tabBar": "capra-TabNav-module-qqfvea-tabBar",
-	"tabGroup": "capra-TabNav-module-qqfvea-tabGroup",
-	"tabIcon": "capra-TabNav-module-qqfvea-tabIcon",
-	"tabLabel": "capra-TabNav-module-qqfvea-tabLabel",
-	"tabList": "capra-TabNav-module-qqfvea-tabList"
+	"dropdownIcon": "capra-TabNav-module-pLDWhG-dropdownIcon",
+	"extraContent": "capra-TabNav-module-pLDWhG-extraContent",
+	"indentSpacer": "capra-TabNav-module-pLDWhG-indentSpacer",
+	"panel": "capra-TabNav-module-pLDWhG-panel",
+	"root": "capra-TabNav-module-pLDWhG-root",
+	"subMenu": "capra-TabNav-module-pLDWhG-subMenu",
+	"subMenuItem": "capra-TabNav-module-pLDWhG-subMenuItem",
+	"subMenuItemActive": "capra-TabNav-module-pLDWhG-subMenuItemActive",
+	"subTab": "capra-TabNav-module-pLDWhG-subTab",
+	"subTabList": "capra-TabNav-module-pLDWhG-subTabList",
+	"subTabListItem": "capra-TabNav-module-pLDWhG-subTabListItem",
+	"tab": "capra-TabNav-module-pLDWhG-tab",
+	"tabBar": "capra-TabNav-module-pLDWhG-tabBar",
+	"tabGroup": "capra-TabNav-module-pLDWhG-tabGroup",
+	"tabIcon": "capra-TabNav-module-pLDWhG-tabIcon",
+	"tabLabel": "capra-TabNav-module-pLDWhG-tabLabel",
+	"tabList": "capra-TabNav-module-pLDWhG-tabList"
 };
 //#endregion
 //#region src/components/TabNav/TabNav.tsx

package/dist/index.d.cts

@@ -309,6 +309,8 @@ type AccessibleLabelProps = LabelledByProp | LabelProp;
 type AccessibleBadgeProps = AccessibleLabelProps & {
   'aria-live'?: React$2.AriaAttributes['aria-live'];
 };
+declare const badgeSizes: readonly ['sm', 'md'];
+type BadgeSize = (typeof badgeSizes)[number];
 type BadgeProps = {
   /**
    * The variant of the badge. 'counter' displays a count, 'dot' displays only a dot.
@@ -319,7 +321,12 @@ type BadgeProps = {
    * Controls the Badge color.
    * @default 'danger'
    */
-  appearance?: 'danger' | 'info' | 'success' | 'warning';
+  appearance?: 'danger' | 'info' | 'success' | 'warning' | 'neutral';
+  /**
+   * Controls the Badge dimensions.
+   * @default 'md'
+   */
+  size?: BadgeSize;
   /**
    * The number to display in the badge. Default is 0.
    */
@@ -336,11 +343,14 @@ type BadgeProps = {
 /**
  * Badges display an indicator/counter on an associated component.
  */
-declare function Badge({ appearance, variant, count, showZero, overflowCount, FORCE__className, ...props }: BadgeProps): React$2.JSX.Element | null;
+declare function Badge({ appearance, variant, size, count, showZero, overflowCount, FORCE__className, style, ...props }: BadgeProps): React$2.JSX.Element | null;
+type BadgeLayoutProps = React$2.PropsWithChildren<{
+  offset?: readonly [x: number, y: number];
+}>;
 /**
  * A convenience component allowing you to easily attach a badge to another component.
  */
-declare function BadgeLayout({ children }: React$2.PropsWithChildren): React$2.JSX.Element;
+declare function BadgeLayout({ children, offset }: BadgeLayoutProps): React$2.JSX.Element;
 //#endregion
 //#region src/components/ListItem/ListItem.d.ts
 type ListItemProps<As extends React$2.ElementType> = {
@@ -1427,7 +1437,7 @@ declare const VerticalNavigation: VerticalNavigationComponent;
 //#endregion
 //#region src/components/EmptyState/EmptyState.d.ts
 /** Valid illustration slugs for the EmptyState component. */
-declare const illustrationSlugs: readonly ['EmptyFolder', 'ArtSupplies', 'EmptyBowl', 'EmptySuitcase', 'Envelope', 'MissingSock', 'PizzaBox', 'PottedPlant', 'Sandcastle'];
+declare const illustrationSlugs: readonly ['ArtSupplies', 'Attention', 'Celebration', 'EmptyBowl', 'EmptyFolder', 'EmptySuitcase', 'Envelope', 'Hibernating', 'MissingSock', 'PizzaBox', 'PottedPlant', 'Sandcastle'];
 type EmptyStateIllustrationSlug = (typeof illustrationSlugs)[number];
 type EmptyStateProps = {
   /** The illustration to display, identified by slug. Use theme to switch between light/dark variants when available. @default "EmptyFolder" */

package/dist/index.d.mts

@@ -309,6 +309,8 @@ type AccessibleLabelProps = LabelledByProp | LabelProp;
 type AccessibleBadgeProps = AccessibleLabelProps & {
   'aria-live'?: React$2.AriaAttributes['aria-live'];
 };
+declare const badgeSizes: readonly ['sm', 'md'];
+type BadgeSize = (typeof badgeSizes)[number];
 type BadgeProps = {
   /**
    * The variant of the badge. 'counter' displays a count, 'dot' displays only a dot.
@@ -319,7 +321,12 @@ type BadgeProps = {
    * Controls the Badge color.
    * @default 'danger'
    */
-  appearance?: 'danger' | 'info' | 'success' | 'warning';
+  appearance?: 'danger' | 'info' | 'success' | 'warning' | 'neutral';
+  /**
+   * Controls the Badge dimensions.
+   * @default 'md'
+   */
+  size?: BadgeSize;
   /**
    * The number to display in the badge. Default is 0.
    */
@@ -336,11 +343,14 @@ type BadgeProps = {
 /**
  * Badges display an indicator/counter on an associated component.
  */
-declare function Badge({ appearance, variant, count, showZero, overflowCount, FORCE__className, ...props }: BadgeProps): React$2.JSX.Element | null;
+declare function Badge({ appearance, variant, size, count, showZero, overflowCount, FORCE__className, style, ...props }: BadgeProps): React$2.JSX.Element | null;
+type BadgeLayoutProps = React$2.PropsWithChildren<{
+  offset?: readonly [x: number, y: number];
+}>;
 /**
  * A convenience component allowing you to easily attach a badge to another component.
  */
-declare function BadgeLayout({ children }: React$2.PropsWithChildren): React$2.JSX.Element;
+declare function BadgeLayout({ children, offset }: BadgeLayoutProps): React$2.JSX.Element;
 //#endregion
 //#region src/components/ListItem/ListItem.d.ts
 type ListItemProps<As extends React$2.ElementType> = {
@@ -1427,7 +1437,7 @@ declare const VerticalNavigation: VerticalNavigationComponent;
 //#endregion
 //#region src/components/EmptyState/EmptyState.d.ts
 /** Valid illustration slugs for the EmptyState component. */
-declare const illustrationSlugs: readonly ['EmptyFolder', 'ArtSupplies', 'EmptyBowl', 'EmptySuitcase', 'Envelope', 'MissingSock', 'PizzaBox', 'PottedPlant', 'Sandcastle'];
+declare const illustrationSlugs: readonly ['ArtSupplies', 'Attention', 'Celebration', 'EmptyBowl', 'EmptyFolder', 'EmptySuitcase', 'Envelope', 'Hibernating', 'MissingSock', 'PizzaBox', 'PottedPlant', 'Sandcastle'];
 type EmptyStateIllustrationSlug = (typeof illustrationSlugs)[number];
 type EmptyStateProps = {
   /** The illustration to display, identified by slug. Use theme to switch between light/dark variants when available. @default "EmptyFolder" */

package/dist/index.mjs

@@ -554,15 +554,15 @@ const Card = Object.assign(CardRoot, {
 //#endregion
 //#region src/components/Badge/Badge.module.css
 var Badge_module_default = {
-	"badge": "capra-Badge-module-yecu4W-badge",
-	"base": "capra-Badge-module-yecu4W-base"
+	"badge": "capra-Badge-module-_3WihW-badge",
+	"base": "capra-Badge-module-_3WihW-base"
 };
 //#endregion
 //#region src/components/Badge/Badge.tsx
 /**
 * Badges display an indicator/counter on an associated component.
 */
-function Badge({ appearance = "danger", variant, count = 0, showZero = false, overflowCount = 99, FORCE__className, ...props }) {
+function Badge({ appearance = "danger", variant = "counter", size = "md", count = 0, showZero = false, overflowCount = 99, FORCE__className, style, ...props }) {
 	if (variant === "counter" && !showZero && !count) return null;
 	const getBadgeContent = () => {
 		if (variant === "dot") return null;
@@ -570,18 +570,25 @@ function Badge({ appearance = "danger", variant, count = 0, showZero = false, ov
 		return value > overflowCount ? `${overflowCount}+` : value;
 	};
 	return /* @__PURE__ */ React$1.createElement("span", {
-		role: "status",
 		className: clsx(Badge_module_default.badge, FORCE__className),
 		"data-appearance": appearance,
+		"data-size": size,
 		"data-variant": variant,
+		style,
 		...props
 	}, getBadgeContent());
 }
 /**
 * A convenience component allowing you to easily attach a badge to another component.
 */
-function BadgeLayout({ children }) {
-	return /* @__PURE__ */ React$1.createElement("div", { className: Badge_module_default.base }, children);
+function BadgeLayout({ children, offset = [0, 0] }) {
+	return /* @__PURE__ */ React$1.createElement("div", {
+		className: Badge_module_default.base,
+		style: {
+			"--_badge-offset-x": `${offset[0]}px`,
+			"--_badge-offset-y": `${offset[1]}px`
+		}
+	}, children);
 }
 //#endregion
 //#region src/components/ListItem/ListItem.module.css
@@ -3415,21 +3422,29 @@ function lazyLoad(importFn) {
 	}));
 }
 const ILLUSTRATIONS = {
-	EmptyFolder: {
-		light: lazyLoad(() => import("@capra/icons/esm/images/EmptyFolder")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/EmptyFolderDark"))
-	},
 	ArtSupplies: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/ArtSupplies")),
 		dark: lazyLoad(() => import("@capra/icons/esm/images/ArtSuppliesDark"))
 	},
-	Sandcastle: {
-		light: lazyLoad(() => import("@capra/icons/esm/images/Sandcastle")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/SandcastleDark"))
+	Attention: {
+		light: lazyLoad(() => import("@capra/icons/esm/images/Attention")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/AttentionDark"))
+	},
+	Celebration: {
+		light: lazyLoad(() => import("@capra/icons/esm/images/Celebration")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/CelebrationDark"))
+	},
+	Hibernating: {
+		light: lazyLoad(() => import("@capra/icons/esm/images/Hibernating")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/HibernatingDark"))
 	},
 	EmptyBowl: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/EmptyBowl")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/EmptyBowl"))
+		dark: lazyLoad(() => import("@capra/icons/esm/images/EmptyBowlDark"))
+	},
+	EmptyFolder: {
+		light: lazyLoad(() => import("@capra/icons/esm/images/EmptyFolder")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/EmptyFolderDark"))
 	},
 	EmptySuitcase: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/EmptySuitcase")),
@@ -3437,19 +3452,23 @@ const ILLUSTRATIONS = {
 	},
 	Envelope: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/Envelope")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/Envelope"))
+		dark: lazyLoad(() => import("@capra/icons/esm/images/EnvelopeDark"))
 	},
 	MissingSock: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/MissingSock")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/MissingSock"))
+		dark: lazyLoad(() => import("@capra/icons/esm/images/MissingSockDark"))
 	},
 	PizzaBox: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/PizzaBox")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/PizzaBox"))
+		dark: lazyLoad(() => import("@capra/icons/esm/images/PizzaBoxDark"))
 	},
 	PottedPlant: {
 		light: lazyLoad(() => import("@capra/icons/esm/images/PottedPlant")),
-		dark: lazyLoad(() => import("@capra/icons/esm/images/PottedPlant"))
+		dark: lazyLoad(() => import("@capra/icons/esm/images/PottedPlantDark"))
+	},
+	Sandcastle: {
+		light: lazyLoad(() => import("@capra/icons/esm/images/Sandcastle")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/SandcastleDark"))
 	}
 };
 /**
@@ -4362,23 +4381,23 @@ const submenuPanelClassName = Menu_module_default.menu;
 //#endregion
 //#region src/components/TabNav/TabNav.module.css
 var TabNav_module_default = {
-	"dropdownIcon": "capra-TabNav-module-qqfvea-dropdownIcon",
-	"extraContent": "capra-TabNav-module-qqfvea-extraContent",
-	"indentSpacer": "capra-TabNav-module-qqfvea-indentSpacer",
-	"panel": "capra-TabNav-module-qqfvea-panel",
-	"root": "capra-TabNav-module-qqfvea-root",
-	"subMenu": "capra-TabNav-module-qqfvea-subMenu",
-	"subMenuItem": "capra-TabNav-module-qqfvea-subMenuItem",
-	"subMenuItemActive": "capra-TabNav-module-qqfvea-subMenuItemActive",
-	"subTab": "capra-TabNav-module-qqfvea-subTab",
-	"subTabList": "capra-TabNav-module-qqfvea-subTabList",
-	"subTabListItem": "capra-TabNav-module-qqfvea-subTabListItem",
-	"tab": "capra-TabNav-module-qqfvea-tab",
-	"tabBar": "capra-TabNav-module-qqfvea-tabBar",
-	"tabGroup": "capra-TabNav-module-qqfvea-tabGroup",
-	"tabIcon": "capra-TabNav-module-qqfvea-tabIcon",
-	"tabLabel": "capra-TabNav-module-qqfvea-tabLabel",
-	"tabList": "capra-TabNav-module-qqfvea-tabList"
+	"dropdownIcon": "capra-TabNav-module-pLDWhG-dropdownIcon",
+	"extraContent": "capra-TabNav-module-pLDWhG-extraContent",
+	"indentSpacer": "capra-TabNav-module-pLDWhG-indentSpacer",
+	"panel": "capra-TabNav-module-pLDWhG-panel",
+	"root": "capra-TabNav-module-pLDWhG-root",
+	"subMenu": "capra-TabNav-module-pLDWhG-subMenu",
+	"subMenuItem": "capra-TabNav-module-pLDWhG-subMenuItem",
+	"subMenuItemActive": "capra-TabNav-module-pLDWhG-subMenuItemActive",
+	"subTab": "capra-TabNav-module-pLDWhG-subTab",
+	"subTabList": "capra-TabNav-module-pLDWhG-subTabList",
+	"subTabListItem": "capra-TabNav-module-pLDWhG-subTabListItem",
+	"tab": "capra-TabNav-module-pLDWhG-tab",
+	"tabBar": "capra-TabNav-module-pLDWhG-tabBar",
+	"tabGroup": "capra-TabNav-module-pLDWhG-tabGroup",
+	"tabIcon": "capra-TabNav-module-pLDWhG-tabIcon",
+	"tabLabel": "capra-TabNav-module-pLDWhG-tabLabel",
+	"tabList": "capra-TabNav-module-pLDWhG-tabList"
 };
 //#endregion
 //#region src/components/TabNav/TabNav.tsx

package/dist/style.css

@@ -628,22 +628,33 @@
   align-items: center;
   display: flex;
 }
-.capra-Badge-module-yecu4W-badge {
+.capra-Badge-module-_3WihW-badge {
   border: var(--cds2-border-badge);
+  border-color: var(--cds2-color-background-application);
   border-radius: var(--cds2-radius-full);
   font: var(--cds2-typography-body-xs-semibold);
-  padding: 0 var(--cds2-spacing-sm);
-  height: var(--cds2-dimension-component-sm);
-  min-width: var(--cds2-dimension-component-sm);
   justify-content: center;
   align-items: center;
   width: fit-content;
   display: flex;
 
+  &[data-size="md"] {
+    height: var(--cds2-dimension-component-sm);
+    min-width: var(--cds2-dimension-component-sm);
+    padding: 0 var(--cds2-spacing-sm);
+  }
+
+  &[data-size="sm"] {
+    height: var(--cds2-dimension-component-xs);
+    min-width: var(--cds2-dimension-component-xs);
+    padding: 0 var(--cds2-spacing-xs);
+  }
+
   &[data-variant="dot"] {
     height: var(--cds2-dimension-icon-xs);
     min-width: unset;
     width: var(--cds2-dimension-icon-xs);
+    padding: 0;
   }
 
   &[data-appearance="info"] {
@@ -665,17 +676,24 @@
     background-color: var(--cds2-color-background-danger-solid-default);
     color: var(--cds2-color-foreground-danger-contrast);
   }
+
+  &[data-appearance="neutral"] {
+    background-color: var(--cds2-color-background-neutral-solid-default);
+    color: var(--cds2-color-foreground-neutral-contrast);
+  }
 }
 
-.capra-Badge-module-yecu4W-base {
+.capra-Badge-module-_3WihW-base {
+  --_badge-offset-x: 0px;
+  --_badge-offset-y: 0px;
   width: fit-content;
   display: inline-block;
   position: relative;
 
-  & .capra-Badge-module-yecu4W-badge {
+  & .capra-Badge-module-_3WihW-badge {
+    top: var(--_badge-offset-y);
+    right: var(--_badge-offset-x);
     position: absolute;
-    top: 0;
-    right: 0;
     transform: translate(50%, -50%);
   }
 }
@@ -3772,21 +3790,21 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
 .capra-Menu-module-3G4VeG-menuItemListItemShell {
   width: 100%;
 }
-.capra-TabNav-module-qqfvea-root {
+.capra-TabNav-module-pLDWhG-root {
   flex-direction: column;
   width: 100%;
   display: flex;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="horizontal"] {
+.capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] {
   flex-direction: column-reverse;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] {
   flex-direction: row;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tabBar {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tabBar {
   border-block-end: none;
   border-inline-end: 1px solid var(--cds2-color-border-neutral-subtle);
   flex-direction: column;
@@ -3795,7 +3813,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   padding-inline-end: var(--cds2-spacing-lg);
 }
 
-.capra-TabNav-module-qqfvea-tabBar {
+.capra-TabNav-module-pLDWhG-tabBar {
   justify-content: space-between;
   align-items: center;
   gap: var(--cds2-spacing-md);
@@ -3804,41 +3822,41 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   display: flex;
 }
 
-.capra-TabNav-module-qqfvea-tabBar:has(.capra-TabNav-module-qqfvea-extraContent) {
+.capra-TabNav-module-pLDWhG-tabBar:has(.capra-TabNav-module-pLDWhG-extraContent) {
   gap: var(--cds2-spacing-xl);
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="horizontal"] .capra-TabNav-module-qqfvea-tabBar {
+.capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] .capra-TabNav-module-pLDWhG-tabBar {
   border: none;
   margin-block-start: 0;
 }
 
-.capra-TabNav-module-qqfvea-tabList {
+.capra-TabNav-module-pLDWhG-tabList {
   gap: var(--cds2-spacing-xl);
   flex-flow: wrap;
   display: flex;
 }
 
-.capra-TabNav-module-qqfvea-root[data-wrap="nowrap"] .capra-TabNav-module-qqfvea-tabList {
+.capra-TabNav-module-pLDWhG-root[data-wrap="nowrap"] .capra-TabNav-module-pLDWhG-tabList {
   flex-wrap: nowrap;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tabList {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tabList {
   flex-flow: column;
   gap: 0;
   width: 100%;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tabList > :not(:last-child), .capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tabGroup > :not(:last-child), .capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-subTabList .capra-TabNav-module-qqfvea-subTabListItem:not(:last-child) {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tabList > :not(:last-child), .capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tabGroup > :not(:last-child), .capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-subTabList .capra-TabNav-module-pLDWhG-subTabListItem:not(:last-child) {
   margin-block-end: var(--cds2-spacing-md);
 }
 
-.capra-TabNav-module-qqfvea-root[data-centered="true"] .capra-TabNav-module-qqfvea-tabList {
+.capra-TabNav-module-pLDWhG-root[data-centered="true"] .capra-TabNav-module-pLDWhG-tabList {
   flex: 1;
   justify-content: center;
 }
 
-.capra-TabNav-module-qqfvea-tab {
+.capra-TabNav-module-pLDWhG-tab {
   appearance: none;
   cursor: pointer;
   justify-content: center;
@@ -3867,59 +3885,59 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   }
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="horizontal"] .capra-TabNav-module-qqfvea-tab {
+.capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] .capra-TabNav-module-pLDWhG-tab {
   border-bottom: 2px solid #0000;
   transition: none;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="horizontal"] .capra-TabNav-module-qqfvea-tab:hover:not(:is(:disabled, [data-disabled="true"])) {
+.capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] .capra-TabNav-module-pLDWhG-tab:hover:not(:is(:disabled, [data-disabled="true"])) {
   border-bottom-color: var(--cds2-color-border-accent-default);
-  color: var(--cds2-color-foreground-neutral-default) !important;
+  color: var(--cds2-color-foreground-accent-default) !important;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="horizontal"] .capra-TabNav-module-qqfvea-tab[data-active="true"][data-disabled="true"] {
+.capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] .capra-TabNav-module-pLDWhG-tab[data-active="true"][data-disabled="true"] {
   border-bottom-color: #0000;
 }
 
-.capra-TabNav-module-qqfvea-tab[data-active="true"] {
+.capra-TabNav-module-pLDWhG-tab[data-active="true"] {
   color: var(--cds2-color-foreground-accent-default);
 }
 
-.capra-TabNav-module-qqfvea-tabIcon {
+.capra-TabNav-module-pLDWhG-tabIcon {
   align-items: center;
   display: inline-flex;
 }
 
-.capra-TabNav-module-qqfvea-tabLabel {
+.capra-TabNav-module-pLDWhG-tabLabel {
   white-space: nowrap;
 }
 
-.capra-TabNav-module-qqfvea-indentSpacer {
+.capra-TabNav-module-pLDWhG-indentSpacer {
   flex-shrink: 0;
   width: 16px;
   min-width: 16px;
 }
 
-.capra-TabNav-module-qqfvea-dropdownIcon {
+.capra-TabNav-module-pLDWhG-dropdownIcon {
   color: inherit;
   flex-shrink: 0;
   align-items: center;
   display: inline-flex;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-dropdownIcon {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-dropdownIcon {
   margin-inline-start: auto;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tab[data-expanded="false"] .capra-TabNav-module-qqfvea-dropdownIcon svg {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tab[data-expanded="false"] .capra-TabNav-module-pLDWhG-dropdownIcon svg {
   transform: rotate(-90deg);
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tab[data-expanded="true"] .capra-TabNav-module-qqfvea-dropdownIcon svg {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tab[data-expanded="true"] .capra-TabNav-module-pLDWhG-dropdownIcon svg {
   transform: none;
 }
 
-.capra-TabNav-module-qqfvea-tabGroup {
+.capra-TabNav-module-pLDWhG-tabGroup {
   flex-direction: column;
   align-items: stretch;
   gap: 0;
@@ -3927,7 +3945,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   display: flex;
 }
 
-.capra-TabNav-module-qqfvea-subTabList {
+.capra-TabNav-module-pLDWhG-subTabList {
   flex-flow: column;
   gap: 0;
   width: 100%;
@@ -3937,20 +3955,20 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   display: flex;
 }
 
-.capra-TabNav-module-qqfvea-subTabListItem {
+.capra-TabNav-module-pLDWhG-subTabListItem {
   margin: 0;
   padding: 0;
 }
 
-.capra-TabNav-module-qqfvea-subTab {
+.capra-TabNav-module-pLDWhG-subTab {
   width: 100%;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="horizontal"] .capra-TabNav-module-qqfvea-tab[data-active="true"], .capra-TabNav-module-qqfvea-root[data-placement="horizontal"] .capra-TabNav-module-qqfvea-tab[data-submenu-open="true"] {
+.capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] .capra-TabNav-module-pLDWhG-tab[data-active="true"], .capra-TabNav-module-pLDWhG-root[data-placement="horizontal"] .capra-TabNav-module-pLDWhG-tab[data-submenu-open="true"] {
   border-bottom-color: var(--cds2-color-border-accent-default);
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tab {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tab {
   border-bottom: none;
   padding-block: 0;
   padding-inline: var(--cds2-spacing-md);
@@ -3959,42 +3977,42 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   width: 100%;
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tab[data-active="true"] {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tab[data-active="true"] {
   background-color: var(--cds2-color-background-accent-subtle);
   border-inline-end-color: var(--cds2-color-border-accent-default);
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tab:hover:not(:is(:disabled, [data-disabled="true"])) {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tab:hover:not(:is(:disabled, [data-disabled="true"])) {
   background-color: var(--cds2-color-background-accent-selected);
   border-inline-end-color: var(--cds2-color-border-accent-strong);
   color: var(--cds2-color-foreground-accent-default);
 }
 
-.capra-TabNav-module-qqfvea-root[data-placement="vertical"] .capra-TabNav-module-qqfvea-tab[data-active="true"][data-disabled="true"] {
+.capra-TabNav-module-pLDWhG-root[data-placement="vertical"] .capra-TabNav-module-pLDWhG-tab[data-active="true"][data-disabled="true"] {
   background-color: #0000;
   border-inline-end-color: #0000;
 }
 
-.capra-TabNav-module-qqfvea-extraContent {
+.capra-TabNav-module-pLDWhG-extraContent {
   align-items: center;
   display: flex;
 }
 
-.capra-TabNav-module-qqfvea-panel {
+.capra-TabNav-module-pLDWhG-panel {
   font: var(--cds2-typography-body-md-normal);
   color: var(--cds2-color-foreground-default);
   flex: 1;
   padding-block-start: var(--cds2-spacing-lg);
 }
 
-.capra-TabNav-module-qqfvea-subMenu {
+.capra-TabNav-module-pLDWhG-subMenu {
   padding: var(--cds2-spacing-xs);
   min-width: 160px;
   margin: 0;
   list-style: none;
 }
 
-.capra-TabNav-module-qqfvea-subMenuItem {
+.capra-TabNav-module-pLDWhG-subMenuItem {
   appearance: none;
   text-align: start;
   width: 100%;
@@ -4022,7 +4040,7 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   }
 }
 
-.capra-TabNav-module-qqfvea-subMenuItemActive {
+.capra-TabNav-module-pLDWhG-subMenuItemActive {
   background-color: var(--cds2-color-background-accent-subtle);
   color: var(--cds2-color-foreground-accent-default);
   font: var(--cds2-typography-body-sm-semibold);

package/docs/core-badge--design.md

@@ -10,7 +10,7 @@ A label is required to indicate the number of notifications.
 
 ### Size
 
-Badges come in 3 sizes to support ones, tens, and values above 100.
+Badges support `md` and `sm` sizes. Use `sm` when composing with smaller controls, such as icon-only buttons, while keeping `md` for standard button and navigation attachments.
 
 ### Dot
 
@@ -26,7 +26,11 @@ Using color as the only means to communicate status should be avoided (WCAG SC 1
 
 ### Corner attachment
 
-Badges are placed in the top-right of the parent component to avoid obscuring the parent content.
+Badges are placed in the top-right of the parent component to avoid obscuring the parent content. Use `BadgeLayout`'s `offset` prop to nudge the badge inward or outward when the anchor component has a tighter visual target.
+
+### Icon button composition
+
+Use `size="sm"` when attaching badges to `IconButton`. Tertiary icon buttons may need a small `offset` so the badge overlaps the icon rather than floating too far outside the control.
 
 ### Inline
 
@@ -44,7 +48,7 @@ Do:
 
 * Do cap displayed values at 99 with a "99+" label.
 * Do use the dot variant for simple presence indicators.
-* Do include count context in the parent's accessible label.
+* Do associate interactive anchors with badge count context using `aria-describedby`.
 
 Don't:
 
@@ -52,11 +56,12 @@ Don't:
 * Don't use Badge for labels or tags — use Tag.
 * Don't place Badge on non-interactive decorative elements.
 * Don't use Badge colors as the only method to communicate status.
+* Don't include badge count context in the anchor's `aria-label`.
 
 ## Accessibility
 
-* The badge is a nested static element; it is announced as part of its parent.
-* The parent element's accessible label should include the count context (e.g., "Notifications, 5 unread").
+* Badge requires an accessible label via `aria-label` or `aria-labelledby` that describes the count or status (e.g., "76 unread").
+* When composing with interactive controls such as `Button` or `IconButton`, set `aria-describedby` on the anchor to the badge's `id`. Keep the anchor's accessible name limited to the control action or label (e.g., "Messages"), not the badge content.
 * Use `aria-live="polite"` on the parent for dynamic badge updates.
 
 ## Content

package/docs/core-badge--usage.md

@@ -4,8 +4,9 @@ Badges display an indicator/counter on an associated component.
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `variant` | `'counter' \| 'dot'` | No | `--` | The variant of the badge. 'counter' displays a count, 'dot' displays only a dot.<br>@default 'counter' |
-| `appearance` | `'danger' \| 'info' \| 'success' \| 'warning'` | No | 'danger' | Controls the Badge color.<br>@default 'danger' |
+| `variant` | `'counter' \| 'dot'` | No | 'counter' | The variant of the badge. 'counter' displays a count, 'dot' displays only a dot.<br>@default 'counter' |
+| `appearance` | `'danger' \| 'info' \| 'success' \| 'warning' \| 'neutral'` | No | 'danger' | Controls the Badge color.<br>@default 'danger' |
+| `size` | `(typeof badgeSizes)[number]` | No | 'md' | Controls the Badge dimensions.<br>@default 'md' |
 | `count` | `number` | No | 0 | The number to display in the badge. Default is 0. |
 | `showZero` | `boolean` | No | false | Whether to display the badge when the count is zero. Default is false. |
 | `overflowCount` | `number` | No | 99 | The number to display in the badge when the count is greater than the overflow count. Default is 99. |

package/docs/history-changelogs-capra-core--docs.md

@@ -1,5 +1,28 @@
 # History/Changelogs/@capra-core
 
+### 1.11.0
+
+#### Minor Changes
+
+* [85ed2f8](https://bitbucket.org/cribl/capra-ui/commits/85ed2f8): Update `EmptyState` to use new images
+
+#### Patch Changes
+
+* Updated dependencies [85ed2f8](https://bitbucket.org/cribl/capra-ui/commits/85ed2f8) — Add missing dark mode images
+* Updated dependencies [85ed2f8](https://bitbucket.org/cribl/capra-ui/commits/85ed2f8) — Add new `Attention`, `Celebration`, and `Hibernating` images
+  * @capra/icons\@1.9.0
+
+### 1.10.0
+
+#### Minor Changes
+
+* [a73a72f](https://bitbucket.org/cribl/capra-ui/commits/a73a72f): Add `Badge` `size` prop and `neutral` appearance.
+* [3d42958](https://bitbucket.org/cribl/capra-ui/commits/3d42958): Add `offset` prop to `BadgeLayout` to support additional positioning options.
+
+#### Patch Changes
+
+* [0b0e03a](https://bitbucket.org/cribl/capra-ui/commits/0b0e03a): Fix tab hover color
+
 ### 1.9.0
 
 #### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capra/core",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "description": "Core React components for the Capra design system",
@@ -35,7 +35,7 @@
   "dependencies": {
     "react-aria": "^3.48.0",
     "react-aria-components": "^1.17.0",
-    "@capra/icons": "^1.8.0"
+    "@capra/icons": "^1.9.0"
   },
   "devDependencies": {
     "clsx": "^2.1.1",