@capra/core 1.6.0 → 1.8.0

package/dist/index.cjs

@@ -843,10 +843,9 @@ Switch.displayName = "Switch";
 //#endregion
 //#region src/components/Tag/Tag.module.css
 var Tag_module_default = {
-	"base": "capra-Tag-module-OZG-Nq-base",
-	"delete": "capra-Tag-module-OZG-Nq-delete",
-	"dragHandle": "capra-Tag-module-OZG-Nq-dragHandle",
-	"label": "capra-Tag-module-OZG-Nq-label"
+	"base": "capra-Tag-module-y2Yzjq-base",
+	"dragHandle": "capra-Tag-module-y2Yzjq-dragHandle",
+	"label": "capra-Tag-module-y2Yzjq-label"
 };
 //#endregion
 //#region src/components/Tag/Tag.tsx
@@ -889,7 +888,7 @@ const tagColors = [
 /**
 * A tag component for displaying a label and an optional icon.
 */
-function Tag({ draggable, color = "default", icon: Icon, children, onDelete, onDragStart, onDragEnd, onHandleKeydown, FORCE__className: classNameOverride, ...props }) {
+function Tag({ draggable, color = "default", icon: Icon, children, size = "md", onDelete, onDragStart, onDragEnd, onHandleKeydown, FORCE__className: classNameOverride, ...props }) {
 	const baseRef = react.useRef(null);
 	const draggableDebounceRef = react.useRef(0);
 	const toggleDraggable = (value) => {
@@ -911,6 +910,7 @@ function Tag({ draggable, color = "default", icon: Icon, children, onDelete, onD
 		ref: baseRef,
 		className: clsx(Tag_module_default.base, classNameOverride),
 		"data-color": color,
+		"data-size": size,
 		onDragStart,
 		onDragEnd
 	}, draggable ? /* @__PURE__ */ react.createElement("span", {
@@ -4196,7 +4196,7 @@ const MenuSection = ({ children, "aria-label": ariaLabel, "aria-labelledby": ari
 	}, resolvedChildren));
 };
 MenuSection.displayName = "Menu.Section";
-const MenuItem = ({ as, label, description, ariaLabel, href, disabled = false, active = false, variant = "default", icon, indent: indentProp, shortcut, parent = false, onClick, FORCE__className, children, ...rest }) => {
+const MenuItem = ({ as: Component, label, description, ariaLabel, href, disabled = false, active = false, variant = "default", icon, indent: indentProp, shortcut, parent = false, onPress, onClick, FORCE__className, children, ...rest }) => {
 	const indentFromSectionHeader = react.useContext(MenuSectionIndentContext);
 	const indent = indentProp !== void 0 ? indentProp : indentFromSectionHeader ? true : false;
 	const labelContent = children ?? label;
@@ -4210,59 +4210,27 @@ const MenuItem = ({ as, label, description, ariaLabel, href, disabled = false, a
 		size: "xs",
 		"aria-hidden": true
 	}) : null])));
-	const itemClassName = clsx(Menu_module_default.menuItem, FORCE__className);
-	const menuItemDataAttributes = {
-		"data-variant": variant,
-		"data-active": active || void 0,
-		"data-indent": indent || void 0,
-		"data-has-description": showDescription || void 0
-	};
-	/** React Aria runs menu activation through `onAction` (pointer + Enter/Space), not only `onPress`. */
-	const handleAction = () => {
-		if (!disabled && onClick) onClick({});
-	};
-	if (as) {
-		const Component = as;
-		return /* @__PURE__ */ react.createElement(react_aria_components.MenuItem, {
-			isDisabled: disabled,
-			textValue,
-			"aria-label": ariaLabel,
-			"aria-current": active ? "page" : void 0,
-			className: itemClassName,
-			...menuItemDataAttributes,
-			render: (domProps) => /* @__PURE__ */ react.createElement(Component, {
-				...domProps,
-				...rest
-			}),
-			onAction: handleAction
-		}, /* @__PURE__ */ react.createElement(ListItem, {
-			as: "div",
-			role: "presentation",
-			FORCE__className: Menu_module_default.menuItemListItemShell
-		}, listItemContent));
-	}
-	if (Boolean(href) && !disabled) return /* @__PURE__ */ react.createElement(react_aria_components.MenuItem, {
-		href,
-		isDisabled: disabled,
-		textValue,
-		"aria-label": ariaLabel,
-		"aria-current": active ? "page" : void 0,
-		className: itemClassName,
-		...menuItemDataAttributes,
-		onAction: handleAction
-	}, /* @__PURE__ */ react.createElement(ListItem, {
-		as: "div",
-		role: "presentation",
-		FORCE__className: Menu_module_default.menuItemListItemShell
-	}, listItemContent));
+	const render = Component ? (domProps) => {
+		const Element = Component;
+		return /* @__PURE__ */ react.createElement(Element, {
+			...domProps,
+			...rest
+		});
+	} : void 0;
 	return /* @__PURE__ */ react.createElement(react_aria_components.MenuItem, {
+		href,
 		isDisabled: disabled,
 		textValue,
 		"aria-label": ariaLabel,
 		"aria-current": active ? "page" : void 0,
-		className: itemClassName,
-		...menuItemDataAttributes,
-		onAction: handleAction
+		className: clsx(Menu_module_default.menuItem, FORCE__className),
+		"data-variant": variant,
+		"data-active": active || void 0,
+		"data-indent": indent || void 0,
+		"data-has-description": showDescription || void 0,
+		render,
+		onClick,
+		onPress
 	}, /* @__PURE__ */ react.createElement(ListItem, {
 		as: "div",
 		role: "presentation",
@@ -4294,10 +4262,9 @@ const MenuSubmenu = ({ label, children, itemHoverAppearance = "default", itemAct
 		size: "xs",
 		"aria-hidden": true
 	}))));
-	const triggerClassName = clsx(Menu_module_default.menuItem, classNameOverride);
 	return /* @__PURE__ */ react.createElement(react_aria_components.SubmenuTrigger, { delay }, /* @__PURE__ */ react.createElement(react_aria_components.MenuItem, {
 		textValue,
-		className: triggerClassName
+		className: clsx(Menu_module_default.menuItem, classNameOverride)
 	}, /* @__PURE__ */ react.createElement(ListItem, {
 		as: "div",
 		role: "presentation",
@@ -4708,10 +4675,7 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 		role: "navigation",
 		"aria-label": ariaLabel,
 		className: TabNav_module_default.tabBar
-	}, /* @__PURE__ */ react.createElement("div", {
-		className: TabNav_module_default.tabList,
-		"aria-orientation": tabPlacement === "horizontal" ? "horizontal" : "vertical"
-	}, items.map((item) => {
+	}, /* @__PURE__ */ react.createElement("div", { className: TabNav_module_default.tabList }, items.map((item) => {
 		const hasSubItems = Boolean(item.subItems?.length);
 		const showDropdown = hasSubItems || item.variant === "dropdown";
 		/** Accent “active” tab styling: current route only (not merely flyout open — open + non-route stays grey). */

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as React$2 from "react";
 import React$1, { HTMLAttributeAnchorTarget, HTMLAttributeReferrerPolicy } from "react";
-import { BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, ButtonProps as ButtonProps$1, ComboBoxRenderProps, DatePickerProps, DateRangePickerProps, DateValue, DisclosureProps, Focusable, LinkProps as LinkProps$1, ListBoxItemProps, PopoverProps as PopoverProps$1, RouterProvider } from "react-aria-components";
+import { BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, ButtonProps as ButtonProps$1, ComboBoxRenderProps, DatePickerProps, DateRangePickerProps, DateValue, DisclosureProps, Focusable, LinkProps as LinkProps$1, ListBoxItemProps, PopoverProps as PopoverProps$1, PressEvent, RouterProvider } from "react-aria-components";
 import { SvgIcon } from "@capra/icons";
 import { SvgLogo } from "@capra/icons/logos";
 
@@ -125,7 +125,7 @@ declare const TextInput: React$2.ForwardRefExoticComponent<{
    */
   size?: Size$3; /** Content after the input (e.g. icon or clear button). */
   trailingSlot?: React$2.ReactNode;
-} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "style" | "size" | "className"> & React$2.RefAttributes<HTMLInputElement>>;
+} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "style" | "className" | "size"> & React$2.RefAttributes<HTMLInputElement>>;
 //#endregion
 //#region src/components/input-helpers/fieldLayout.d.ts
 type FieldLayoutProps = {
@@ -172,7 +172,7 @@ declare const AutocompleteField: ((props: {
   leadingSlot?: React$1.ReactNode;
   size?: Size$3;
   trailingSlot?: React$1.ReactNode;
-} & StylingOverrideProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "style" | "size" | "className"> & React$1.RefAttributes<HTMLInputElement>, "ref">, "value" | "onChange"> & React$1.RefAttributes<HTMLInputElement>) => React$1.ReactElement) & {
+} & StylingOverrideProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "style" | "className" | "size"> & React$1.RefAttributes<HTMLInputElement>, "ref">, "onChange" | "value"> & React$1.RefAttributes<HTMLInputElement>) => React$1.ReactElement) & {
   Item: typeof AutocompleteItem;
 };
 //#endregion
@@ -429,7 +429,7 @@ type RadioGroupProps = RadioGroupContextValue & StylingOverrideProps & Omit<Reac
 /**
  * A control wrapper for a group of radio buttons.
  */
-declare const RadioGroup: (props: RadioGroupContextValue & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref">, "onChange" | "className"> & React$2.RefAttributes<HTMLFieldSetElement>) => React$2.ReactElement;
+declare const RadioGroup: (props: RadioGroupContextValue & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref">, "className" | "onChange"> & React$2.RefAttributes<HTMLFieldSetElement>) => React$2.ReactElement;
 //#endregion
 //#region src/components/Radio/Radio.d.ts
 type ChildrenLabel = {
@@ -492,6 +492,8 @@ declare const Switch: React$2.ForwardRefExoticComponent<SwitchProps & React$2.Re
 //#region src/components/Tag/Tag.d.ts
 declare const tagColors: readonly ["default", "accent", "danger", "warning", "info", "success", "highlight", "brand", "amber", "blue", "bronze", "brown", "criblTeal", "crimson", "cyan", "gold", "grass", "green", "indigo", "iris", "jade", "lime", "mint", "orange", "pink", "plum", "purple", "red", "ruby", "sky", "teal", "tomato", "violet", "yellow"];
 type TagColor = (typeof tagColors)[number];
+declare const tagSizes: readonly ["sm", "md"];
+type TagSize = (typeof tagSizes)[number];
 type Draggable = {
   draggable: true;
   onDragStart: React$2.DragEventHandler<HTMLSpanElement>;
@@ -518,6 +520,10 @@ type TagProps = DraggableProps & {
    * The label text to display in the tag.
    */
   children: string;
+  /**
+   * The size of the tag. Defaults to `md`.
+   */
+  size?: TagSize;
   /**
    * The callback function for when the user clicks the delete button.
    */
@@ -531,6 +537,7 @@ declare function Tag({
   color,
   icon: Icon,
   children,
+  size,
   onDelete,
   onDragStart,
   onDragEnd,
@@ -562,7 +569,7 @@ declare const Checkbox: React$2.ForwardRefExoticComponent<{
   checked?: boolean; /** Default checked state for uncontrolled component. */
   defaultChecked?: boolean; /** The label for the checkbox. */
   children?: string | React$2.ReactNode;
-} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "className"> & React$2.RefAttributes<HTMLInputElement>>;
+} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "className" | "type"> & React$2.RefAttributes<HTMLInputElement>>;
 //#endregion
 //#region src/components/Collapse/Collapse.d.ts
 /** Props forwarded to React Aria `Disclosure`; see https://reactaria.adobe.com/Disclosure */
@@ -636,7 +643,7 @@ declare const TextField: React$2.ForwardRefExoticComponent<{
   /** Called with the new string value when the input changes. */onChange?: (value: string) => void; /** When true, shows a character count. */
   showCount?: boolean;
   value?: string | number | undefined;
-} & FieldLayoutProps & Omit<TextInputProps, "value" | "onChange"> & React$2.RefAttributes<HTMLInputElement>>;
+} & FieldLayoutProps & Omit<TextInputProps, "onChange" | "value"> & React$2.RefAttributes<HTMLInputElement>>;
 //#endregion
 //#region src/components/PasswordField/PasswordField.d.ts
 type PasswordFieldProps = Omit<TextFieldProps, 'trailingSlot' | 'type'>;
@@ -660,7 +667,7 @@ type NumberFieldProps = Omit<TextInputProps, 'type' | 'onChange' | 'min' | 'max'
 /**
  * Number field built on React Aria `NumberField`, with custom increment/decrement controls (native spinners hidden).
  */
-declare const NumberField: React$2.ForwardRefExoticComponent<Omit<TextInputProps, "max" | "min" | "step" | "type" | "onChange"> & {
+declare const NumberField: React$2.ForwardRefExoticComponent<Omit<TextInputProps, "onChange" | "max" | "min" | "type" | "step"> & {
   /** Called with the unformatted number value when the number changes. */onChange?: (value: number) => void; /** Locale-aware display and parsing for the displayed value (see https://react-aria.adobe.com/NumberField#format-options) */
   formatOptions?: Intl.NumberFormatOptions; /** Minimum value */
   min?: number; /** Maximum value */
@@ -682,7 +689,7 @@ type DatePickerFieldProps<T extends DateValue = DateValue> = FieldLayoutProps &
   required?: boolean; /** Invalid value; `appearance="danger"` also forces an invalid state for display. */
   isInvalid?: boolean;
 };
-declare const DatePickerField: React$2.ForwardRefExoticComponent<FieldLayoutProps & Pick<TextInputProps, "placeholder" | "size" | "appearance" | "leadingSlot"> & Pick<DatePickerProps<DateValue>, "value" | "onChange" | "defaultValue"> & {
+declare const DatePickerField: React$2.ForwardRefExoticComponent<FieldLayoutProps & Pick<TextInputProps, "placeholder" | "size" | "appearance" | "leadingSlot"> & Pick<DatePickerProps<DateValue>, "defaultValue" | "onChange" | "value"> & {
   /** Smallest date/time unit shown in the field. Only `day` and `second` are supported. */granularity?: "day" | "second";
 } & StylingOverrideProps & {
   /** When true, shows a clear control to the left of the calendar button while the field has a value. */canClear?: boolean; /** Disables the field. */
@@ -710,7 +717,7 @@ type DateRangePickerFieldProps<T extends DateValue = DateValue> = FieldLayoutPro
 };
 declare const DateRangePickerField: React$2.ForwardRefExoticComponent<FieldLayoutProps & Pick<TextInputProps, "size" | "appearance" | "leadingSlot"> & {
   /** Placeholders for empty start and end, shown with a swap icon between them when the group is not focus-within. */placeholder?: DateRangePickerFieldPlaceholder;
-} & Pick<DateRangePickerProps<DateValue>, "value" | "onChange" | "defaultValue" | "shouldCloseOnSelect"> & {
+} & Pick<DateRangePickerProps<DateValue>, "defaultValue" | "onChange" | "value" | "shouldCloseOnSelect"> & {
   /** Smallest date/time unit shown in the fields. Only `day` and `second` are supported. */granularity?: "day" | "second";
 } & StylingOverrideProps & {
   /** When true, shows a clear control to the left of the calendar button while the field has a value. */canClear?: boolean; /** Disables the field. */
@@ -770,7 +777,7 @@ declare const TextArea: React$2.ForwardRefExoticComponent<{
   autoSize?: TextAreaAutoSize; /** When true, shows a character count. */
   showCount?: boolean; /** Called with the new string value when the input changes. */
   onChange?: (value: string) => void;
-} & FieldLayoutProps & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "style" | "size" | "onChange" | "className"> & React$2.RefAttributes<HTMLTextAreaElement>>;
+} & FieldLayoutProps & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "style" | "className" | "onChange" | "size"> & React$2.RefAttributes<HTMLTextAreaElement>>;
 //#endregion
 //#region src/components/Modal/Modal.d.ts
 type ModalSize = 'sm' | 'md' | 'lg';
@@ -1763,8 +1770,13 @@ type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.Componen
    * Whether to show chevron (for submenu/parent items).
    */
   parent?: boolean;
+  /**
+   * Press handler.
+   */
+  onPress?: (e: PressEvent) => void;
   /**
    * Click handler.
+   * @deprecated Use `onPress` instead.
    */
   onClick?: (e: React$2.MouseEvent) => void;
   /**
@@ -1906,7 +1918,7 @@ declare const Menu: {
   displayName: string;
   Item: {
     <As extends React$2.ElementType = "a">({
-      as,
+      as: Component,
       label,
       description,
       ariaLabel,
@@ -1918,6 +1930,7 @@ declare const Menu: {
       indent: indentProp,
       shortcut,
       parent,
+      onPress,
       onClick,
       FORCE__className,
       children,

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React$2 from "react";
 import React$1, { HTMLAttributeAnchorTarget, HTMLAttributeReferrerPolicy } from "react";
 import { SvgIcon } from "@capra/icons";
-import { BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, ButtonProps as ButtonProps$1, ComboBoxRenderProps, DatePickerProps, DateRangePickerProps, DateValue, DisclosureProps, Focusable, LinkProps as LinkProps$1, ListBoxItemProps, PopoverProps as PopoverProps$1, RouterProvider } from "react-aria-components";
+import { BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, ButtonProps as ButtonProps$1, ComboBoxRenderProps, DatePickerProps, DateRangePickerProps, DateValue, DisclosureProps, Focusable, LinkProps as LinkProps$1, ListBoxItemProps, PopoverProps as PopoverProps$1, PressEvent, RouterProvider } from "react-aria-components";
 import { SvgLogo } from "@capra/icons/logos";
 
 //#region src/utils/stylingOverride.d.ts
@@ -125,7 +125,7 @@ declare const TextInput: React$2.ForwardRefExoticComponent<{
    */
   size?: Size$3; /** Content after the input (e.g. icon or clear button). */
   trailingSlot?: React$2.ReactNode;
-} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "style" | "size" | "className"> & React$2.RefAttributes<HTMLInputElement>>;
+} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "style" | "className" | "size"> & React$2.RefAttributes<HTMLInputElement>>;
 //#endregion
 //#region src/components/input-helpers/fieldLayout.d.ts
 type FieldLayoutProps = {
@@ -172,7 +172,7 @@ declare const AutocompleteField: ((props: {
   leadingSlot?: React$1.ReactNode;
   size?: Size$3;
   trailingSlot?: React$1.ReactNode;
-} & StylingOverrideProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "style" | "size" | "className"> & React$1.RefAttributes<HTMLInputElement>, "ref">, "value" | "onChange"> & React$1.RefAttributes<HTMLInputElement>) => React$1.ReactElement) & {
+} & StylingOverrideProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "style" | "className" | "size"> & React$1.RefAttributes<HTMLInputElement>, "ref">, "onChange" | "value"> & React$1.RefAttributes<HTMLInputElement>) => React$1.ReactElement) & {
   Item: typeof AutocompleteItem;
 };
 //#endregion
@@ -429,7 +429,7 @@ type RadioGroupProps = RadioGroupContextValue & StylingOverrideProps & Omit<Reac
 /**
  * A control wrapper for a group of radio buttons.
  */
-declare const RadioGroup: (props: RadioGroupContextValue & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref">, "onChange" | "className"> & React$2.RefAttributes<HTMLFieldSetElement>) => React$2.ReactElement;
+declare const RadioGroup: (props: RadioGroupContextValue & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref">, "className" | "onChange"> & React$2.RefAttributes<HTMLFieldSetElement>) => React$2.ReactElement;
 //#endregion
 //#region src/components/Radio/Radio.d.ts
 type ChildrenLabel = {
@@ -492,6 +492,8 @@ declare const Switch: React$2.ForwardRefExoticComponent<SwitchProps & React$2.Re
 //#region src/components/Tag/Tag.d.ts
 declare const tagColors: readonly ["default", "accent", "danger", "warning", "info", "success", "highlight", "brand", "amber", "blue", "bronze", "brown", "criblTeal", "crimson", "cyan", "gold", "grass", "green", "indigo", "iris", "jade", "lime", "mint", "orange", "pink", "plum", "purple", "red", "ruby", "sky", "teal", "tomato", "violet", "yellow"];
 type TagColor = (typeof tagColors)[number];
+declare const tagSizes: readonly ["sm", "md"];
+type TagSize = (typeof tagSizes)[number];
 type Draggable = {
   draggable: true;
   onDragStart: React$2.DragEventHandler<HTMLSpanElement>;
@@ -518,6 +520,10 @@ type TagProps = DraggableProps & {
    * The label text to display in the tag.
    */
   children: string;
+  /**
+   * The size of the tag. Defaults to `md`.
+   */
+  size?: TagSize;
   /**
    * The callback function for when the user clicks the delete button.
    */
@@ -531,6 +537,7 @@ declare function Tag({
   color,
   icon: Icon,
   children,
+  size,
   onDelete,
   onDragStart,
   onDragEnd,
@@ -562,7 +569,7 @@ declare const Checkbox: React$2.ForwardRefExoticComponent<{
   checked?: boolean; /** Default checked state for uncontrolled component. */
   defaultChecked?: boolean; /** The label for the checkbox. */
   children?: string | React$2.ReactNode;
-} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "className"> & React$2.RefAttributes<HTMLInputElement>>;
+} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "className" | "type"> & React$2.RefAttributes<HTMLInputElement>>;
 //#endregion
 //#region src/components/Collapse/Collapse.d.ts
 /** Props forwarded to React Aria `Disclosure`; see https://reactaria.adobe.com/Disclosure */
@@ -636,7 +643,7 @@ declare const TextField: React$2.ForwardRefExoticComponent<{
   /** Called with the new string value when the input changes. */onChange?: (value: string) => void; /** When true, shows a character count. */
   showCount?: boolean;
   value?: string | number | undefined;
-} & FieldLayoutProps & Omit<TextInputProps, "value" | "onChange"> & React$2.RefAttributes<HTMLInputElement>>;
+} & FieldLayoutProps & Omit<TextInputProps, "onChange" | "value"> & React$2.RefAttributes<HTMLInputElement>>;
 //#endregion
 //#region src/components/PasswordField/PasswordField.d.ts
 type PasswordFieldProps = Omit<TextFieldProps, 'trailingSlot' | 'type'>;
@@ -660,7 +667,7 @@ type NumberFieldProps = Omit<TextInputProps, 'type' | 'onChange' | 'min' | 'max'
 /**
  * Number field built on React Aria `NumberField`, with custom increment/decrement controls (native spinners hidden).
  */
-declare const NumberField: React$2.ForwardRefExoticComponent<Omit<TextInputProps, "max" | "min" | "step" | "type" | "onChange"> & {
+declare const NumberField: React$2.ForwardRefExoticComponent<Omit<TextInputProps, "onChange" | "max" | "min" | "type" | "step"> & {
   /** Called with the unformatted number value when the number changes. */onChange?: (value: number) => void; /** Locale-aware display and parsing for the displayed value (see https://react-aria.adobe.com/NumberField#format-options) */
   formatOptions?: Intl.NumberFormatOptions; /** Minimum value */
   min?: number; /** Maximum value */
@@ -682,7 +689,7 @@ type DatePickerFieldProps<T extends DateValue = DateValue> = FieldLayoutProps &
   required?: boolean; /** Invalid value; `appearance="danger"` also forces an invalid state for display. */
   isInvalid?: boolean;
 };
-declare const DatePickerField: React$2.ForwardRefExoticComponent<FieldLayoutProps & Pick<TextInputProps, "placeholder" | "size" | "appearance" | "leadingSlot"> & Pick<DatePickerProps<DateValue>, "value" | "onChange" | "defaultValue"> & {
+declare const DatePickerField: React$2.ForwardRefExoticComponent<FieldLayoutProps & Pick<TextInputProps, "placeholder" | "size" | "appearance" | "leadingSlot"> & Pick<DatePickerProps<DateValue>, "defaultValue" | "onChange" | "value"> & {
   /** Smallest date/time unit shown in the field. Only `day` and `second` are supported. */granularity?: "day" | "second";
 } & StylingOverrideProps & {
   /** When true, shows a clear control to the left of the calendar button while the field has a value. */canClear?: boolean; /** Disables the field. */
@@ -710,7 +717,7 @@ type DateRangePickerFieldProps<T extends DateValue = DateValue> = FieldLayoutPro
 };
 declare const DateRangePickerField: React$2.ForwardRefExoticComponent<FieldLayoutProps & Pick<TextInputProps, "size" | "appearance" | "leadingSlot"> & {
   /** Placeholders for empty start and end, shown with a swap icon between them when the group is not focus-within. */placeholder?: DateRangePickerFieldPlaceholder;
-} & Pick<DateRangePickerProps<DateValue>, "value" | "onChange" | "defaultValue" | "shouldCloseOnSelect"> & {
+} & Pick<DateRangePickerProps<DateValue>, "defaultValue" | "onChange" | "value" | "shouldCloseOnSelect"> & {
   /** Smallest date/time unit shown in the fields. Only `day` and `second` are supported. */granularity?: "day" | "second";
 } & StylingOverrideProps & {
   /** When true, shows a clear control to the left of the calendar button while the field has a value. */canClear?: boolean; /** Disables the field. */
@@ -770,7 +777,7 @@ declare const TextArea: React$2.ForwardRefExoticComponent<{
   autoSize?: TextAreaAutoSize; /** When true, shows a character count. */
   showCount?: boolean; /** Called with the new string value when the input changes. */
   onChange?: (value: string) => void;
-} & FieldLayoutProps & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "style" | "size" | "onChange" | "className"> & React$2.RefAttributes<HTMLTextAreaElement>>;
+} & FieldLayoutProps & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "style" | "className" | "onChange" | "size"> & React$2.RefAttributes<HTMLTextAreaElement>>;
 //#endregion
 //#region src/components/Modal/Modal.d.ts
 type ModalSize = 'sm' | 'md' | 'lg';
@@ -1763,8 +1770,13 @@ type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.Componen
    * Whether to show chevron (for submenu/parent items).
    */
   parent?: boolean;
+  /**
+   * Press handler.
+   */
+  onPress?: (e: PressEvent) => void;
   /**
    * Click handler.
+   * @deprecated Use `onPress` instead.
    */
   onClick?: (e: React$2.MouseEvent) => void;
   /**
@@ -1906,7 +1918,7 @@ declare const Menu: {
   displayName: string;
   Item: {
     <As extends React$2.ElementType = "a">({
-      as,
+      as: Component,
       label,
       description,
       ariaLabel,
@@ -1918,6 +1930,7 @@ declare const Menu: {
       indent: indentProp,
       shortcut,
       parent,
+      onPress,
       onClick,
       FORCE__className,
       children,

package/dist/index.mjs

@@ -819,10 +819,9 @@ Switch.displayName = "Switch";
 //#endregion
 //#region src/components/Tag/Tag.module.css
 var Tag_module_default = {
-	"base": "capra-Tag-module-OZG-Nq-base",
-	"delete": "capra-Tag-module-OZG-Nq-delete",
-	"dragHandle": "capra-Tag-module-OZG-Nq-dragHandle",
-	"label": "capra-Tag-module-OZG-Nq-label"
+	"base": "capra-Tag-module-y2Yzjq-base",
+	"dragHandle": "capra-Tag-module-y2Yzjq-dragHandle",
+	"label": "capra-Tag-module-y2Yzjq-label"
 };
 //#endregion
 //#region src/components/Tag/Tag.tsx
@@ -865,7 +864,7 @@ const tagColors = [
 /**
 * A tag component for displaying a label and an optional icon.
 */
-function Tag({ draggable, color = "default", icon: Icon, children, onDelete, onDragStart, onDragEnd, onHandleKeydown, FORCE__className: classNameOverride, ...props }) {
+function Tag({ draggable, color = "default", icon: Icon, children, size = "md", onDelete, onDragStart, onDragEnd, onHandleKeydown, FORCE__className: classNameOverride, ...props }) {
 	const baseRef = React$1.useRef(null);
 	const draggableDebounceRef = React$1.useRef(0);
 	const toggleDraggable = (value) => {
@@ -887,6 +886,7 @@ function Tag({ draggable, color = "default", icon: Icon, children, onDelete, onD
 		ref: baseRef,
 		className: clsx(Tag_module_default.base, classNameOverride),
 		"data-color": color,
+		"data-size": size,
 		onDragStart,
 		onDragEnd
 	}, draggable ? /* @__PURE__ */ React$1.createElement("span", {
@@ -4172,7 +4172,7 @@ const MenuSection$1 = ({ children, "aria-label": ariaLabel, "aria-labelledby": a
 	}, resolvedChildren));
 };
 MenuSection$1.displayName = "Menu.Section";
-const MenuItem$1 = ({ as, label, description, ariaLabel, href, disabled = false, active = false, variant = "default", icon, indent: indentProp, shortcut, parent = false, onClick, FORCE__className, children, ...rest }) => {
+const MenuItem$1 = ({ as: Component, label, description, ariaLabel, href, disabled = false, active = false, variant = "default", icon, indent: indentProp, shortcut, parent = false, onPress, onClick, FORCE__className, children, ...rest }) => {
 	const indentFromSectionHeader = React$1.useContext(MenuSectionIndentContext);
 	const indent = indentProp !== void 0 ? indentProp : indentFromSectionHeader ? true : false;
 	const labelContent = children ?? label;
@@ -4186,59 +4186,27 @@ const MenuItem$1 = ({ as, label, description, ariaLabel, href, disabled = false,
 		size: "xs",
 		"aria-hidden": true
 	}) : null])));
-	const itemClassName = clsx(Menu_module_default.menuItem, FORCE__className);
-	const menuItemDataAttributes = {
-		"data-variant": variant,
-		"data-active": active || void 0,
-		"data-indent": indent || void 0,
-		"data-has-description": showDescription || void 0
-	};
-	/** React Aria runs menu activation through `onAction` (pointer + Enter/Space), not only `onPress`. */
-	const handleAction = () => {
-		if (!disabled && onClick) onClick({});
-	};
-	if (as) {
-		const Component = as;
-		return /* @__PURE__ */ React$1.createElement(MenuItem, {
-			isDisabled: disabled,
-			textValue,
-			"aria-label": ariaLabel,
-			"aria-current": active ? "page" : void 0,
-			className: itemClassName,
-			...menuItemDataAttributes,
-			render: (domProps) => /* @__PURE__ */ React$1.createElement(Component, {
-				...domProps,
-				...rest
-			}),
-			onAction: handleAction
-		}, /* @__PURE__ */ React$1.createElement(ListItem, {
-			as: "div",
-			role: "presentation",
-			FORCE__className: Menu_module_default.menuItemListItemShell
-		}, listItemContent));
-	}
-	if (Boolean(href) && !disabled) return /* @__PURE__ */ React$1.createElement(MenuItem, {
-		href,
-		isDisabled: disabled,
-		textValue,
-		"aria-label": ariaLabel,
-		"aria-current": active ? "page" : void 0,
-		className: itemClassName,
-		...menuItemDataAttributes,
-		onAction: handleAction
-	}, /* @__PURE__ */ React$1.createElement(ListItem, {
-		as: "div",
-		role: "presentation",
-		FORCE__className: Menu_module_default.menuItemListItemShell
-	}, listItemContent));
+	const render = Component ? (domProps) => {
+		const Element = Component;
+		return /* @__PURE__ */ React$1.createElement(Element, {
+			...domProps,
+			...rest
+		});
+	} : void 0;
 	return /* @__PURE__ */ React$1.createElement(MenuItem, {
+		href,
 		isDisabled: disabled,
 		textValue,
 		"aria-label": ariaLabel,
 		"aria-current": active ? "page" : void 0,
-		className: itemClassName,
-		...menuItemDataAttributes,
-		onAction: handleAction
+		className: clsx(Menu_module_default.menuItem, FORCE__className),
+		"data-variant": variant,
+		"data-active": active || void 0,
+		"data-indent": indent || void 0,
+		"data-has-description": showDescription || void 0,
+		render,
+		onClick,
+		onPress
 	}, /* @__PURE__ */ React$1.createElement(ListItem, {
 		as: "div",
 		role: "presentation",
@@ -4270,10 +4238,9 @@ const MenuSubmenu = ({ label, children, itemHoverAppearance = "default", itemAct
 		size: "xs",
 		"aria-hidden": true
 	}))));
-	const triggerClassName = clsx(Menu_module_default.menuItem, classNameOverride);
 	return /* @__PURE__ */ React$1.createElement(SubmenuTrigger, { delay }, /* @__PURE__ */ React$1.createElement(MenuItem, {
 		textValue,
-		className: triggerClassName
+		className: clsx(Menu_module_default.menuItem, classNameOverride)
 	}, /* @__PURE__ */ React$1.createElement(ListItem, {
 		as: "div",
 		role: "presentation",
@@ -4684,10 +4651,7 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 		role: "navigation",
 		"aria-label": ariaLabel,
 		className: TabNav_module_default.tabBar
-	}, /* @__PURE__ */ React$1.createElement("div", {
-		className: TabNav_module_default.tabList,
-		"aria-orientation": tabPlacement === "horizontal" ? "horizontal" : "vertical"
-	}, items.map((item) => {
+	}, /* @__PURE__ */ React$1.createElement("div", { className: TabNav_module_default.tabList }, items.map((item) => {
 		const hasSubItems = Boolean(item.subItems?.length);
 		const showDropdown = hasSubItems || item.variant === "dropdown";
 		/** Accent “active” tab styling: current route only (not merely flyout open — open + non-route stays grey). */

package/dist/style.css

@@ -1109,229 +1109,237 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
     transition: none;
   }
 }
-.capra-Tag-module-OZG-Nq-base {
-  padding: 0 var(--cds2-spacing-md);
+.capra-Tag-module-y2Yzjq-base {
+  border-radius: var(--cds2-radius-md);
+  border: var(--cds2-border-default);
   justify-content: space-between;
   align-items: center;
   gap: var(--cds2-spacing-sm);
-  height: var(--cds2-dimension-component-sm);
-  min-width: var(--cds2-dimension-component-sm);
-  border-radius: var(--cds2-radius-md);
-  border: var(--cds2-border-default);
+  padding: 0 var(--cds2-spacing-md);
   display: inline-flex;
-}
 
-.capra-Tag-module-OZG-Nq-dragHandle {
-  cursor: move;
-}
+  &[data-size="md"] {
+    height: var(--cds2-dimension-component-sm);
+    min-width: var(--cds2-dimension-component-sm);
 
-.capra-Tag-module-OZG-Nq-label {
-  font: var(--cds2-typography-body-sm-normal);
+    & .capra-Tag-module-y2Yzjq-label {
+      font: var(--cds2-typography-body-sm-normal);
+    }
+  }
+
+  &[data-size="sm"] {
+    height: var(--cds2-dimension-component-xs);
+    min-width: var(--cds2-dimension-component-xs);
+
+    & .capra-Tag-module-y2Yzjq-label {
+      font: var(--cds2-typography-body-xs-normal);
+    }
+  }
 }
 
-.capra-Tag-module-OZG-Nq-base .capra-Tag-module-OZG-Nq-delete {
-  background-color: #0000;
+.capra-Tag-module-y2Yzjq-dragHandle {
+  cursor: move;
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="default"] {
+.capra-Tag-module-y2Yzjq-base[data-color="default"] {
   background-color: var(--cds2-color-background-neutral-subtle);
   border-color: var(--cds2-color-border-neutral-subtle);
   color: var(--cds2-color-foreground-subtle);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="accent"] {
+.capra-Tag-module-y2Yzjq-base[data-color="accent"] {
   background-color: var(--cds2-color-background-accent-subtle);
   border-color: var(--cds2-color-border-accent-subtle);
   color: var(--cds2-color-foreground-accent-default);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="danger"] {
+.capra-Tag-module-y2Yzjq-base[data-color="danger"] {
   background-color: var(--cds2-color-background-danger-subtle);
   border-color: var(--cds2-color-border-danger-subtle);
   color: var(--cds2-color-foreground-danger-default);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="warning"] {
+.capra-Tag-module-y2Yzjq-base[data-color="warning"] {
   background-color: var(--cds2-color-background-warning-subtle);
   border-color: var(--cds2-color-border-warning-subtle);
   color: var(--cds2-color-foreground-warning-default);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="info"] {
+.capra-Tag-module-y2Yzjq-base[data-color="info"] {
   background-color: var(--cds2-color-background-info-subtle);
   border-color: var(--cds2-color-border-info-subtle);
   color: var(--cds2-color-foreground-info-default);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="success"] {
+.capra-Tag-module-y2Yzjq-base[data-color="success"] {
   background-color: var(--cds2-color-background-success-subtle);
   border-color: var(--cds2-color-border-success-subtle);
   color: var(--cds2-color-foreground-success-default);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="highlight"] {
+.capra-Tag-module-y2Yzjq-base[data-color="highlight"] {
   background-color: var(--cds2-color-background-highlight-subtle);
   border-color: var(--cds2-color-border-highlight-subtle);
   color: var(--cds2-color-foreground-highlight-default);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="brand"] {
+.capra-Tag-module-y2Yzjq-base[data-color="brand"] {
   background-color: var(--cds2-color-background-brand-subtle);
   border-color: var(--cds2-color-border-brand-subtle);
   color: var(--cds2-color-foreground-brand-default);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="amber"] {
+.capra-Tag-module-y2Yzjq-base[data-color="amber"] {
   background-color: var(--cds2-core-color-amber-a2);
   border-color: var(--cds2-core-color-amber-a6);
   color: var(--cds2-core-color-amber-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="blue"] {
+.capra-Tag-module-y2Yzjq-base[data-color="blue"] {
   background-color: var(--cds2-core-color-blue-a2);
   border-color: var(--cds2-core-color-blue-a6);
   color: var(--cds2-core-color-blue-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="bronze"] {
+.capra-Tag-module-y2Yzjq-base[data-color="bronze"] {
   background-color: var(--cds2-core-color-bronze-a2);
   border-color: var(--cds2-core-color-bronze-a6);
   color: var(--cds2-core-color-bronze-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="brown"] {
+.capra-Tag-module-y2Yzjq-base[data-color="brown"] {
   background-color: var(--cds2-core-color-brown-a2);
   border-color: var(--cds2-core-color-brown-a6);
   color: var(--cds2-core-color-brown-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="criblTeal"] {
+.capra-Tag-module-y2Yzjq-base[data-color="criblTeal"] {
   background-color: var(--cds2-core-color-cribl-teal-a2);
   border-color: var(--cds2-core-color-cribl-teal-a6);
   color: var(--cds2-core-color-cribl-teal-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="crimson"] {
+.capra-Tag-module-y2Yzjq-base[data-color="crimson"] {
   background-color: var(--cds2-core-color-crimson-a2);
   border-color: var(--cds2-core-color-crimson-a6);
   color: var(--cds2-core-color-crimson-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="cyan"] {
+.capra-Tag-module-y2Yzjq-base[data-color="cyan"] {
   background-color: var(--cds2-core-color-cyan-a2);
   border-color: var(--cds2-core-color-cyan-a6);
   color: var(--cds2-core-color-cyan-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="gold"] {
+.capra-Tag-module-y2Yzjq-base[data-color="gold"] {
   background-color: var(--cds2-core-color-gold-a2);
   border-color: var(--cds2-core-color-gold-a6);
   color: var(--cds2-core-color-gold-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="grass"] {
+.capra-Tag-module-y2Yzjq-base[data-color="grass"] {
   background-color: var(--cds2-core-color-grass-a2);
   border-color: var(--cds2-core-color-grass-a6);
   color: var(--cds2-core-color-grass-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="green"] {
+.capra-Tag-module-y2Yzjq-base[data-color="green"] {
   background-color: var(--cds2-core-color-green-a2);
   border-color: var(--cds2-core-color-green-a6);
   color: var(--cds2-core-color-green-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="indigo"] {
+.capra-Tag-module-y2Yzjq-base[data-color="indigo"] {
   background-color: var(--cds2-core-color-indigo-a2);
   border-color: var(--cds2-core-color-indigo-a6);
   color: var(--cds2-core-color-indigo-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="iris"] {
+.capra-Tag-module-y2Yzjq-base[data-color="iris"] {
   background-color: var(--cds2-core-color-iris-a2);
   border-color: var(--cds2-core-color-iris-a6);
   color: var(--cds2-core-color-iris-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="jade"] {
+.capra-Tag-module-y2Yzjq-base[data-color="jade"] {
   background-color: var(--cds2-core-color-jade-a2);
   border-color: var(--cds2-core-color-jade-a6);
   color: var(--cds2-core-color-jade-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="lime"] {
+.capra-Tag-module-y2Yzjq-base[data-color="lime"] {
   background-color: var(--cds2-core-color-lime-a2);
   border-color: var(--cds2-core-color-lime-a6);
   color: var(--cds2-core-color-lime-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="mint"] {
+.capra-Tag-module-y2Yzjq-base[data-color="mint"] {
   background-color: var(--cds2-core-color-mint-a2);
   border-color: var(--cds2-core-color-mint-a6);
   color: var(--cds2-core-color-mint-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="orange"] {
+.capra-Tag-module-y2Yzjq-base[data-color="orange"] {
   background-color: var(--cds2-core-color-orange-a2);
   border-color: var(--cds2-core-color-orange-a6);
   color: var(--cds2-core-color-orange-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="pink"] {
+.capra-Tag-module-y2Yzjq-base[data-color="pink"] {
   background-color: var(--cds2-core-color-pink-a2);
   border-color: var(--cds2-core-color-pink-a6);
   color: var(--cds2-core-color-pink-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="plum"] {
+.capra-Tag-module-y2Yzjq-base[data-color="plum"] {
   background-color: var(--cds2-core-color-plum-a2);
   border-color: var(--cds2-core-color-plum-a6);
   color: var(--cds2-core-color-plum-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="purple"] {
+.capra-Tag-module-y2Yzjq-base[data-color="purple"] {
   background-color: var(--cds2-core-color-purple-a2);
   border-color: var(--cds2-core-color-purple-a6);
   color: var(--cds2-core-color-purple-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="red"] {
+.capra-Tag-module-y2Yzjq-base[data-color="red"] {
   background-color: var(--cds2-core-color-red-a2);
   border-color: var(--cds2-core-color-red-a6);
   color: var(--cds2-core-color-red-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="ruby"] {
+.capra-Tag-module-y2Yzjq-base[data-color="ruby"] {
   background-color: var(--cds2-core-color-ruby-a2);
   border-color: var(--cds2-core-color-ruby-a6);
   color: var(--cds2-core-color-ruby-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="sky"] {
+.capra-Tag-module-y2Yzjq-base[data-color="sky"] {
   background-color: var(--cds2-core-color-sky-a2);
   border-color: var(--cds2-core-color-sky-a6);
   color: var(--cds2-core-color-sky-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="teal"] {
+.capra-Tag-module-y2Yzjq-base[data-color="teal"] {
   background-color: var(--cds2-core-color-teal-a2);
   border-color: var(--cds2-core-color-teal-a6);
   color: var(--cds2-core-color-teal-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="tomato"] {
+.capra-Tag-module-y2Yzjq-base[data-color="tomato"] {
   background-color: var(--cds2-core-color-tomato-a2);
   border-color: var(--cds2-core-color-tomato-a6);
   color: var(--cds2-core-color-tomato-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="violet"] {
+.capra-Tag-module-y2Yzjq-base[data-color="violet"] {
   background-color: var(--cds2-core-color-violet-a2);
   border-color: var(--cds2-core-color-violet-a6);
   color: var(--cds2-core-color-violet-a11);
 }
 
-.capra-Tag-module-OZG-Nq-base[data-color="yellow"] {
+.capra-Tag-module-y2Yzjq-base[data-color="yellow"] {
   background-color: var(--cds2-core-color-yellow-a2);
   border-color: var(--cds2-core-color-yellow-a6);
   color: var(--cds2-core-color-yellow-a11);

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

@@ -56,12 +56,12 @@ Tab labels should be one or two words, using title case (Tab Label). Labels shou
 
 ### Keyboard interaction
 
-| Key                          | Function                                                                                                                                                                         |
-| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Tab` / `Shift + Tab`        | Moves focus into the tab list, putting focus onto the active tab. When the tab list has focus, moves focus to the next focusable element (generally within the tab panel).       |
-| `Left Arrow` / `Up Arrow`    | Moves focus to, and activate, the previous tab. If focus is on the first tab, move focus to the last tab. Up performs the same action when `aria-orientation="vertical"` is set. |
-| `Right Arrow` / `Down Arrow` | Moves focus to, and activate, the next tab. If focus is on the last tab, move focus to the first tab. Down performs the same action when `aria-orientation="vertical"` is set.   |
-| `Shift+F10`                  | Opens the menu for tabs with a dropdown.                                                                                                                                         |
+| Key                          | Function                                                                                                                                                                   |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tab` / `Shift + Tab`        | Moves focus into the tab list, putting focus onto the active tab. When the tab list has focus, moves focus to the next focusable element (generally within the tab panel). |
+| `Left Arrow` / `Up Arrow`    | Moves focus to, and activate, the previous tab. If focus is on the first tab, move focus to the last tab. Up performs the same action when `tabPlacement="vertical"`.      |
+| `Right Arrow` / `Down Arrow` | Moves focus to, and activate, the next tab. If focus is on the last tab, move focus to the first tab. Down performs the same action when `tabPlacement="vertical"`.        |
+| `Shift+F10`                  | Opens the menu for tabs with a dropdown.                                                                                                                                   |
 
 ### ARIA considerations
 
@@ -74,4 +74,4 @@ TabNav uses link-based navigation. The following apply:
 
 ### Orientation
 
-Use `tabPlacement="horizontal"` (default) for a horizontal tab bar at the bottom, or `tabPlacement="vertical"` for a vertical tab bar on the left. Vertical tabs have `aria-orientation="vertical"` set.
+Use `tabPlacement="horizontal"` (default) for a horizontal tab bar at the bottom, or `tabPlacement="vertical"` for a vertical tab bar on the left.

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

@@ -2,6 +2,13 @@
 
 A tag component for displaying a label and an optional icon.
 
+## Size
+
+`Tag` supports two sizes:
+
+* `md` is the default size and preserves the existing Tag density.
+* `sm` is a more compact treatment for dense metadata layouts.
+
 ## Accessibility
 
 ### Keyboard interaction
@@ -13,6 +20,10 @@ A tag component for displaying a label and an optional icon.
 
 All buttons exist in the page's natural tab sequence, reachable via `Tab` and `Shift+Tab` keys. Pressing `Spacebar` or `Enter` activates the focused button.
 
+### Target size
+
+The compact `sm` size reduces the visible chip height for dense layouts. When using interactive affordances such as delete or drag, verify the surrounding product layout still provides sufficient pointer spacing and focus visibility for the overall interaction.
+
 ### Draggability
 
 The tag can be made draggable by setting the `draggable` prop to `true`. When the tag is draggable, the user can drag the tag to a new position in the list.

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

@@ -7,5 +7,6 @@ A tag component for displaying a label and an optional icon.
 | `color` | `(typeof tagColors)[number]` | No | 'default' | The color of the tag. Defaults to `default`. |
 | `icon` | `SvgIcon \| SvgLogo` | No | `--` | The icon or logo to display in the tag. |
 | `children` | `string` | Yes | `--` | The label text to display in the tag. |
+| `size` | `(typeof tagSizes)[number]` | No | 'md' | The size of the tag. Defaults to `md`. |
 | `onDelete` | `() => void` | No | `--` | The callback function for when the user clicks the delete button. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

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

@@ -1,5 +1,22 @@
 # History/Changelogs/@capra-core
 
+### 1.8.0
+
+#### Minor Changes
+
+* [c97320b](https://bitbucket.org/cribl/capra-ui/commits/c97320b): Add size support to `Tag`.
+
+### 1.7.0
+
+#### Minor Changes
+
+* [540b651](https://bitbucket.org/cribl/capra-ui/commits/540b651): Add `onPress` event handler to `Menu.Item` and deprecate `onClick`
+
+#### Patch Changes
+
+* [540b651](https://bitbucket.org/cribl/capra-ui/commits/540b651): Fix issue where event in `Menu.Item` `onClick` was not bubbling correctly
+* [684cc26](https://bitbucket.org/cribl/capra-ui/commits/684cc26): Remove invalid `aria-orientation` attribute in TabNav component.
+
 ### 1.6.0
 
 #### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capra/core",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "description": "Core React components for the Capra design system",
@@ -44,11 +44,11 @@
     "antd": "4.24.16",
     "storybook": "^10.4.6",
     "tsdown": "^0.22.0",
+    "@private/building": "0.0.4",
     "@capra/theme": "1.3.0",
     "@private/linting": "0.0.0",
-    "@private/building": "0.0.4",
-    "@private/stories": "0.0.0",
-    "@private/testing": "0.0.7"
+    "@private/testing": "0.0.7",
+    "@private/stories": "0.0.0"
   },
   "scripts": {
     "clean": "rm -rf ./dist",