@capra/core 1.7.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", {

package/dist/index.d.cts

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

package/dist/index.d.mts

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

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", {

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,11 @@
 # 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capra/core",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "description": "Core React components for the Capra design system",
@@ -45,10 +45,10 @@
     "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/testing": "0.0.7",
+    "@private/stories": "0.0.0"
   },
   "scripts": {
     "clean": "rm -rf ./dist",