@capra/core 1.7.0 → 1.8.1

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", {
@@ -4849,7 +4849,7 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 				});
 			}));
 		}
-		if (item.href && !item.disabled) return /* @__PURE__ */ react.createElement("a", {
+		if (item.href && !item.disabled) return /* @__PURE__ */ react.createElement(react_aria_components.Link, {
 			key: item.key,
 			...commonTabProps,
 			href: item.href,

package/dist/index.d.cts

@@ -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" | "className" | "size"> & React$2.RefAttributes<HTMLInputElement>>;
+} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "style" | "size" | "className"> & 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" | "className" | "size"> & React$1.RefAttributes<HTMLInputElement>, "ref">, "onChange" | "value"> & React$1.RefAttributes<HTMLInputElement>) => React$1.ReactElement) & {
+} & 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) & {
   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">, "className" | "onChange"> & React$2.RefAttributes<HTMLFieldSetElement>) => React$2.ReactElement;
+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;
 //#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">, "className" | "type"> & React$2.RefAttributes<HTMLInputElement>>;
+} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "className"> & 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, "onChange" | "value"> & React$2.RefAttributes<HTMLInputElement>>;
+} & FieldLayoutProps & Omit<TextInputProps, "value" | "onChange"> & 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, "onChange" | "max" | "min" | "type" | "step"> & {
+declare const NumberField: React$2.ForwardRefExoticComponent<Omit<TextInputProps, "max" | "min" | "step" | "type" | "onChange"> & {
   /** 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>, "defaultValue" | "onChange" | "value"> & {
+declare const DatePickerField: React$2.ForwardRefExoticComponent<FieldLayoutProps & Pick<TextInputProps, "placeholder" | "size" | "appearance" | "leadingSlot"> & Pick<DatePickerProps<DateValue>, "value" | "onChange" | "defaultValue"> & {
   /** 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>, "defaultValue" | "onChange" | "value" | "shouldCloseOnSelect"> & {
+} & Pick<DateRangePickerProps<DateValue>, "value" | "onChange" | "defaultValue" | "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" | "className" | "onChange" | "size"> & React$2.RefAttributes<HTMLTextAreaElement>>;
+} & FieldLayoutProps & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "style" | "size" | "onChange" | "className"> & React$2.RefAttributes<HTMLTextAreaElement>>;
 //#endregion
 //#region src/components/Modal/Modal.d.ts
 type ModalSize = 'sm' | 'md' | 'lg';

package/dist/index.d.mts

@@ -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" | "className" | "size"> & React$2.RefAttributes<HTMLInputElement>>;
+} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "style" | "size" | "className"> & 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" | "className" | "size"> & React$1.RefAttributes<HTMLInputElement>, "ref">, "onChange" | "value"> & React$1.RefAttributes<HTMLInputElement>) => React$1.ReactElement) & {
+} & 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) & {
   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">, "className" | "onChange"> & React$2.RefAttributes<HTMLFieldSetElement>) => React$2.ReactElement;
+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;
 //#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">, "className" | "type"> & React$2.RefAttributes<HTMLInputElement>>;
+} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "className"> & 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, "onChange" | "value"> & React$2.RefAttributes<HTMLInputElement>>;
+} & FieldLayoutProps & Omit<TextInputProps, "value" | "onChange"> & 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, "onChange" | "max" | "min" | "type" | "step"> & {
+declare const NumberField: React$2.ForwardRefExoticComponent<Omit<TextInputProps, "max" | "min" | "step" | "type" | "onChange"> & {
   /** 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>, "defaultValue" | "onChange" | "value"> & {
+declare const DatePickerField: React$2.ForwardRefExoticComponent<FieldLayoutProps & Pick<TextInputProps, "placeholder" | "size" | "appearance" | "leadingSlot"> & Pick<DatePickerProps<DateValue>, "value" | "onChange" | "defaultValue"> & {
   /** 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>, "defaultValue" | "onChange" | "value" | "shouldCloseOnSelect"> & {
+} & Pick<DateRangePickerProps<DateValue>, "value" | "onChange" | "defaultValue" | "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" | "className" | "onChange" | "size"> & React$2.RefAttributes<HTMLTextAreaElement>>;
+} & FieldLayoutProps & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "style" | "size" | "onChange" | "className"> & React$2.RefAttributes<HTMLTextAreaElement>>;
 //#endregion
 //#region src/components/Modal/Modal.d.ts
 type ModalSize = 'sm' | 'md' | 'lg';

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", {
@@ -4825,7 +4825,7 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 				});
 			}));
 		}
-		if (item.href && !item.disabled) return /* @__PURE__ */ React$1.createElement("a", {
+		if (item.href && !item.disabled) return /* @__PURE__ */ React$1.createElement(Link$1, {
 			key: item.key,
 			...commonTabProps,
 			href: item.href,

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-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,17 @@
 # History/Changelogs/@capra-core
 
+### 1.8.1
+
+#### Patch Changes
+
+* [1ebcee1](https://bitbucket.org/cribl/capra-ui/commits/1ebcee1): Fix issue where top-level links in `TabNav` caused a full page refresh when used with `RouterProvider`
+
+### 1.8.0
+
+#### Minor Changes
+
+* [c97320b](https://bitbucket.org/cribl/capra-ui/commits/c97320b): Add size support to `Tag`.
+
 ### 1.7.0
 
 #### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capra/core",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "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",
-    "@private/linting": "0.0.0",
     "@capra/theme": "1.3.0",
-    "@private/stories": "0.0.0",
-    "@private/testing": "0.0.7"
+    "@private/linting": "0.0.0",
+    "@private/building": "0.0.4",
+    "@private/testing": "0.0.7",
+    "@private/stories": "0.0.0"
   },
   "scripts": {
     "clean": "rm -rf ./dist",