@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/chips/Chip.js

@@ -1,188 +1,362 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
+import Skeleton, { SkeletonSize, SkeletonVariant } from "../feedback/Skeleton.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
-import FlexItem from "../containers/FlexItem.js";
+import Tooltip from "../tooltip/Tooltip.js";
+import Beacon, { BeaconSize, BeaconVariant } from "../beacons/Beacon.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
-import FlexWrapper from "../containers/FlexWrapper.js";
-import TextShimmer from "../text/TextShimmer.js";
-import Ellipsis from "../text/Ellipsis.js";
-import AvatarShimmer from "../avatar/AvatarShimmer.js";
 /* empty css               */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
+import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 import { XIcon } from "@phosphor-icons/react";
 //#region src/chips/Chip.tsx
-/** Chip color. Tints the background, border and label together. */
+/**
+* A compact, tinted label for one short value: a tag, a category, a type, a filter, a role, or a
+* count. `variant` is a meaning from the canonical color set and `color` a categorical palette
+* family (one or the other), so a chip says "warehouse", "beta" or "3 unread" in a color that
+* follows the theme. It can carry a leading mark (a status dot, an
+* icon, an avatar), show a `count` (the 1.x `Badge`), be dismissed with a trailing × button, and
+* become a toggle button when it has `onClick` (a filter chip).
+*
+* Structure: a `<span>` root carries the fill, border, radius and height; inside it a body (a
+* `<span>`, or a `<button>` with `onClick`) holds the marks, the label and the count, and an
+* optional × `<button>` follows it. The body and the × are siblings, so a clickable, dismissible
+* chip has two tab stops and no nested interactives.
+*
+* Color is CSS: the variant (or `color`) map sets `color` and the `--gx-chip-fill` /
+* `--gx-chip-border` custom properties on the root, and the label, count, dot and × inherit `currentColor`, so `hex`,
+* `INHERIT` and the disabled look share one path and a theme switch needs no re-render.
+*
+* Not a live status (a labeled `Beacon`), not an action (`Button`), not a list with overflow (`ChipGroup`),
+* not a tag input (`TagInput`).
+*/
+/** Canonical rungs; the member names the control rung the chip sits in. */
+var ChipSize = /* @__PURE__ */ function(ChipSize) {
+	/** 16px tall, `caption` text, 10px icon. */
+	ChipSize["X_SMALL"] = "X_SMALL";
+	/** 20px tall, `body_sm` text, 12px icon (1.x `SMALL` 18px; 1.x Badge `SMALL` 16px). */
+	ChipSize["SMALL"] = "SMALL";
+	/** 24px tall, `body_md` text, 14px icon. The default (1.x `MEDIUM` 20px). */
+	ChipSize["MEDIUM"] = "MEDIUM";
+	/** 28px tall, `body_lg` text, 16px icon (1.x `LARGE` 24px). */
+	ChipSize["LARGE"] = "LARGE";
+	/** 32px tall, `body_lg` text, 16px icon. */
+	ChipSize["X_LARGE"] = "X_LARGE";
+	return ChipSize;
+}({});
+/**
+* Color role (Constitution V-A color set; meaning only): tints the fill, the text and the border
+* together. Categories take `color` instead.
+*/
 var ChipVariant = /* @__PURE__ */ function(ChipVariant) {
+	/** `background.primary` fill, `text.primary`. */
 	ChipVariant["PRIMARY"] = "PRIMARY";
-	ChipVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
+	/** `background.secondary` fill, `text.primary`. The default (1.x default). */
 	ChipVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill, `text.primary`. */
 	ChipVariant["TERTIARY"] = "TERTIARY";
+	/** `background.secondary` fill, `text.disabled`. */
+	ChipVariant["DISABLED"] = "DISABLED";
+	/** The parent's `currentColor`, with a fill and border mixed from it. */
+	ChipVariant["INHERIT"] = "INHERIT";
+	/** Status: success fill and text. */
 	ChipVariant["SUCCESS"] = "SUCCESS";
+	/** Status: warning fill and text. */
 	ChipVariant["WARNING"] = "WARNING";
+	/** Status: error fill and text. */
 	ChipVariant["ERROR"] = "ERROR";
-	ChipVariant["PINK"] = "PINK";
-	ChipVariant["ORANGE"] = "ORANGE";
-	ChipVariant["YELLOW"] = "YELLOW";
-	ChipVariant["LIME"] = "LIME";
-	ChipVariant["BLUE"] = "BLUE";
-	ChipVariant["PURPLE"] = "PURPLE";
-	ChipVariant["TEAL"] = "TEAL";
 	return ChipVariant;
 }({});
-/** Chip height. Also drives label and icon size. */
-var ChipSize = /* @__PURE__ */ function(ChipSize) {
-	ChipSize["SMALL"] = "SMALL";
-	ChipSize["MEDIUM"] = "MEDIUM";
-	ChipSize["LARGE"] = "LARGE";
-	return ChipSize;
-}({});
-var _exp = () => ({ $isClickable }) => $isClickable ? "pointer" : "inherit";
-var _exp2 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "18px").with("MEDIUM", () => "20px").with("LARGE", () => "24px").exhaustive();
+/**
+* The fill, border, radius and height. The transparent hairline gives every chip the same box
+* with or without `hasBorder`, and becomes visible in forced colors.
+*/
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-Chip-rhdcix9",
+	propsAsIs: false
+});
+/** Holds the dot, `leading`, the icon, the label and the count, in that order. Only the label shrinks. */
+var Body = /*#__PURE__*/ styled("span")({
+	name: "Body",
+	class: "gx-Chip-Body-b1792b5d",
+	propsAsIs: false
+});
+/** The `leading` slot: never squeezed. */
+var LeadingSlot = /*#__PURE__*/ styled("span")({
+	name: "LeadingSlot",
+	class: "gx-Chip-LeadingSlot-larvjas",
+	propsAsIs: false
+});
+/**
+* The trailing × button. It rests at 64% of the chip's color and goes full strength on hover and
+* keyboard focus. `INTERACTIVE_RESET` comes first so the rules after it win.
+*/
+var Dismiss = /*#__PURE__*/ styled("button")({
+	name: "Dismiss",
+	class: "gx-Chip-Dismiss-drtsg2v",
+	propsAsIs: false
+});
+/**
+* The body as a `<button>` (with `onClick`): the reset, then the body rules it clears, the focus
+* ring, and the hover and press paint. The paint is on the body only, so hovering the × does not
+* light it up. `aria-disabled` is a state attribute, not a variant selector.
+*/
+var INTERACTIVE_BODY_CSS = "gx-Chip-INTERACTIVE_BODY_CSS-i10wo102";
+/**
+* No label (icon-only or count-only): the inset narrows to the gap, so a single icon or digit
+* fits inside `min-width` and the chip is a square (a circle with `isPill`) at every rung.
+* Declared after the interactive body, which re-sets the padding.
+*/
+var UNLABELLED_BODY_CSS = "gx-Chip-UNLABELLED_BODY_CSS-uw0i2x";
+/** With `onDismiss`: the × supplies the end padding and the end corners. Declared after the interactive body. */
+var DISMISSIBLE_BODY_CSS = "gx-Chip-DISMISSIBLE_BODY_CSS-d1umqpnl";
+/** `isDisabled` on the body button and the ×. */
+var DISABLED_CURSOR_CSS = "gx-Chip-DISABLED_CURSOR_CSS-d1tlslh5";
+/** `isLoading` on the body button. */
+var LOADING_CURSOR_CSS = "gx-Chip-LOADING_CURSOR_CSS-l17p62o9";
+/** A mark (icon, count) that never shrinks; only the label does. */
+var NO_SHRINK_CSS = "gx-Chip-NO_SHRINK_CSS-n113l4kw";
+/**
+* Loading: the Skeleton placeholder lays its hidden children out exactly as the body does (same
+* gap, centered), so the chip keeps its width. Doubled class so it wins over Skeleton's own
+* `display` at any stylesheet order.
+*/
+var SKELETON_GROUP_CSS = "gx-Chip-SKELETON_GROUP_CSS-s19yp9be";
+/** The marks group while loading never shrinks. */
+var SKELETON_MARKS_CSS = "gx-Chip-SKELETON_MARKS_CSS-s16e2y3o";
+/** The text group while loading may shrink, like the label. */
+var SKELETON_TEXT_CSS = "gx-Chip-SKELETON_TEXT_CSS-s1ryzn2p";
+/**
+* Height and `min-width` (equal, so a one-digit count or an icon-only chip is a square, or a
+* circle with `isPill`) and the padding and gap the body and × read. Each height is the rung's
+* line height plus an even inset, so text and icons land on whole pixels.
+*/
+var CHIP_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-Chip-X_SMALL-x655h5d",
+	["SMALL"]: "gx-Chip-SMALL-s19l6inr",
+	["MEDIUM"]: "gx-Chip-MEDIUM-mya1ucz",
+	["LARGE"]: "gx-Chip-LARGE-ldd03ku",
+	["X_LARGE"]: "gx-Chip-X_LARGE-xxrjjby"
 };
-var _exp3 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "0 5px").with("MEDIUM", () => "0 6px").with("LARGE", () => "0 8px").exhaustive();
+/** Sets `color` on the root and the fill and border custom properties per color role. */
+var CHIP_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-Chip-PRIMARY-p1ydunl3",
+	["SECONDARY"]: "gx-Chip-SECONDARY-s1g96kbw",
+	["TERTIARY"]: "gx-Chip-TERTIARY-t10q6vgd",
+	["DISABLED"]: "gx-Chip-DISABLED-d1vwq9sr",
+	["INHERIT"]: "gx-Chip-INHERIT-i1pttgxr",
+	["SUCCESS"]: "gx-Chip-SUCCESS-sxbabla",
+	["WARNING"]: "gx-Chip-WARNING-wmla4eg",
+	["ERROR"]: "gx-Chip-ERROR-ey90mc4"
 };
-var _exp4 = () => ({ theme, $variant, $noBackground }) => {
-	if ($noBackground) return "transparent";
-	return match($variant).with("PRIMARY", () => theme.color.background.primary).with("PRIMARY_ALT", () => theme.color.background.primaryAlt).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).with("SUCCESS", () => theme.color.background.success).with("WARNING", () => theme.color.background.warning).with("ERROR", () => theme.color.background.error).with("PINK", () => theme.color.background.pink).with("ORANGE", () => theme.color.background.orange).with("YELLOW", () => theme.color.background.yellow).with("LIME", () => theme.color.background.lime).with("BLUE", () => theme.color.background.blue).with("PURPLE", () => theme.color.background.purple).with("TEAL", () => theme.color.background.teal).exhaustive();
+/** Categorical `color`: the family's text, fill and border, as a status variant renders. */
+var CHIP_COLOR_TO_CSS_MAP = {
+	red: "gx-Chip-red-r1buqu4j",
+	orange: "gx-Chip-orange-o1xofe8u",
+	amber: "gx-Chip-amber-alle9kf",
+	yellow: "gx-Chip-yellow-yvehr9v",
+	lime: "gx-Chip-lime-l6qjmz2",
+	green: "gx-Chip-green-gtd4jog",
+	emerald: "gx-Chip-emerald-evlk44e",
+	teal: "gx-Chip-teal-t1pq316v",
+	cyan: "gx-Chip-cyan-cm0lqld",
+	sky: "gx-Chip-sky-syyt7c0",
+	blue: "gx-Chip-blue-b11ah2de",
+	indigo: "gx-Chip-indigo-izbiez9",
+	violet: "gx-Chip-violet-v9o9u3v",
+	purple: "gx-Chip-purple-p1ec95in",
+	fuchsia: "gx-Chip-fuchsia-fptfyqj",
+	pink: "gx-Chip-pink-p1fzme42",
+	rose: "gx-Chip-rose-riztats"
 };
-var _exp5 = () => ({ $isPill }) => $isPill ? "200px" : "4px";
-var StyledChip = withTheme(/*#__PURE__*/ styled("div")({
-	name: "StyledChip",
-	class: "shdcix9",
-	propsAsIs: false,
-	vars: {
-		"shdcix9-0": [_exp()],
-		"shdcix9-1": [_exp2()],
-		"shdcix9-2": [_exp3()],
-		"shdcix9-3": [_exp4()],
-		"shdcix9-4": [_exp5()]
-	}
-}));
-var CHIP_SIZE_TO_SHIMMER_HEIGHT = {
-	["SMALL"]: 10,
-	["MEDIUM"]: 12,
-	["LARGE"]: 14
+/** `hex`: declared after the variant and color maps so it wins over them. */
+var HEX_CSS = "gx-Chip-HEX_CSS-h1g78mhs";
+var HAS_BORDER_CSS = "gx-Chip-HAS_BORDER_CSS-h1t4qqih";
+/** Declared after `HAS_BORDER_CSS`, so selection wins. */
+var SELECTED_CSS = "gx-Chip-SELECTED_CSS-s1na9n10";
+var PILL_CSS = "gx-Chip-PILL_CSS-py859dk";
+/** Label and count type step per rung (Constitution III-A.4). */
+var CHIP_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/** Icon px per rung; even, so the icon centers on whole pixels in the chip's height. */
+var CHIP_SIZE_TO_ICON_PX_MAP = {
+	["X_SMALL"]: 10,
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 16,
+	["X_LARGE"]: 16
 };
-var CHIP_SIZE_TO_SHIMMER_WIDTH = {
-	["SMALL"]: 14,
-	["MEDIUM"]: 18,
-	["LARGE"]: 22
+/** Identity: BeaconSize names the text step the dot sits beside, which is the chip's own. */
+var CHIP_SIZE_TO_BEACON_SIZE_MAP = {
+	["X_SMALL"]: BeaconSize.X_SMALL,
+	["SMALL"]: BeaconSize.SMALL,
+	["MEDIUM"]: BeaconSize.MEDIUM,
+	["LARGE"]: BeaconSize.LARGE,
+	["X_LARGE"]: BeaconSize.X_LARGE
 };
-var CHIP_SIZE_TO_ICON_SIZE = {
-	["SMALL"]: 10,
-	["MEDIUM"]: 12,
-	["LARGE"]: 14
+/** Identity (the Skeleton host contract); wrapper mode ignores `size`. */
+var CHIP_SIZE_TO_SKELETON_SIZE_MAP = {
+	["X_SMALL"]: SkeletonSize.X_SMALL,
+	["SMALL"]: SkeletonSize.SMALL,
+	["MEDIUM"]: SkeletonSize.MEDIUM,
+	["LARGE"]: SkeletonSize.LARGE,
+	["X_LARGE"]: SkeletonSize.X_LARGE
 };
-var CHIP_VARIANT_TO_ICON_VARIANT = {
+/** A neutral chip's icon is one step quieter than its label (1.x); every other role inherits. */
+var CHIP_VARIANT_TO_ICON_VARIANT_MAP = {
 	["PRIMARY"]: IconVariant.PRIMARY,
-	["PRIMARY_ALT"]: IconVariant.PRIMARY_ALT,
 	["SECONDARY"]: IconVariant.SECONDARY,
 	["TERTIARY"]: IconVariant.TERTIARY,
-	["SUCCESS"]: IconVariant.SUCCESS,
-	["WARNING"]: IconVariant.WARNING,
-	["ERROR"]: IconVariant.ERROR,
-	["PINK"]: IconVariant.PINK,
-	["ORANGE"]: IconVariant.ORANGE,
-	["YELLOW"]: IconVariant.YELLOW,
-	["LIME"]: IconVariant.LIME,
-	["BLUE"]: IconVariant.BLUE,
-	["PURPLE"]: IconVariant.PURPLE,
-	["TEAL"]: IconVariant.TEAL
+	["DISABLED"]: IconVariant.INHERIT,
+	["INHERIT"]: IconVariant.INHERIT,
+	["SUCCESS"]: IconVariant.INHERIT,
+	["WARNING"]: IconVariant.INHERIT,
+	["ERROR"]: IconVariant.INHERIT
 };
-var CHIP_VARIANT_TO_TEXT_VARIANT = {
-	["PRIMARY"]: TextVariant.PRIMARY,
-	["PRIMARY_ALT"]: TextVariant.PRIMARY_ALT,
-	["SECONDARY"]: TextVariant.PRIMARY,
-	["TERTIARY"]: TextVariant.PRIMARY,
-	["SUCCESS"]: TextVariant.SUCCESS,
-	["WARNING"]: TextVariant.WARNING,
-	["ERROR"]: TextVariant.ERROR,
-	["PINK"]: TextVariant.PINK,
-	["ORANGE"]: TextVariant.ORANGE,
-	["YELLOW"]: TextVariant.YELLOW,
-	["LIME"]: TextVariant.LIME,
-	["BLUE"]: TextVariant.BLUE,
-	["PURPLE"]: TextVariant.PURPLE,
-	["TEAL"]: TextVariant.TEAL
-};
-var CHIP_SIZE_TO_TEXT_SIZE = {
-	["SMALL"]: TextSize.BODY_SM,
-	["MEDIUM"]: TextSize.BODY_MD,
-	["LARGE"]: TextSize.BODY_LG
-};
-/**
-* A compact tag for a value, filter, or status.
-*
-* Renders `null` when neither `label` nor `icon` is set. Adding `onDismiss`
-* appends a × button; adding `onClick` makes the whole chip clickable.
-*/
-var Chip = ({ label, variant = "SECONDARY", size = "MEDIUM", svg, icon, onDismiss, onClick, isPill, noBackground, isLoading, isEllipsis, isActive }) => {
-	if (!label && !icon) return null;
-	if (isLoading) return /* @__PURE__ */ jsxs(StyledChip, {
-		$variant: variant,
-		$size: size,
-		$isPill: isPill,
-		$isClickable: false,
-		$noBackground: noBackground,
-		$isActive: isActive,
-		children: [(icon || svg) && /* @__PURE__ */ jsx(FlexItem, {
-			shrink: 0,
-			grow: 0,
-			children: /* @__PURE__ */ jsx(AvatarShimmer, { size: CHIP_SIZE_TO_ICON_SIZE[size] })
-		}), /* @__PURE__ */ jsx(FlexItem, {
-			shrink: 0,
-			grow: 0,
-			children: /* @__PURE__ */ jsx(TextShimmer, {
-				height: CHIP_SIZE_TO_SHIMMER_HEIGHT[size],
-				width: CHIP_SIZE_TO_SHIMMER_WIDTH[size]
-			})
-		})]
-	});
-	return /* @__PURE__ */ jsxs(StyledChip, {
-		$variant: variant,
-		$size: size,
-		$isPill: isPill,
-		$isClickable: !!onClick,
-		$noBackground: noBackground,
-		$isActive: isActive,
-		onClick,
+/** True when a `tooltip` value would open (the Tooltip empty-body rule). */
+function hasContent(node) {
+	return node !== void 0 && node !== null && node !== false && node !== "";
+}
+/** A compact, tinted label for one short value: a tag, a category, a filter, or a count. */
+var Chip = forwardRef(function Chip({ label, icon, leading, hasDot = false, count, max = 99, variant = "SECONDARY", color, size = "MEDIUM", hex, isPill = false, hasBorder = false, isSelected, isDisabled = false, isLoading = false, tooltip, onClick, onDismiss, ariaLabel, id, className, style, ...rest }, ref) {
+	const hasLabel = label !== void 0 && label !== "";
+	const flooredCount = count === void 0 ? 0 : Math.floor(count);
+	const hasCount = flooredCount > 0;
+	const hasLeading = leading !== void 0 && leading !== null && leading !== false;
+	const hasMarks = hasDot || hasLeading || icon !== void 0;
+	if (!hasLabel && !hasCount && !hasMarks) return null;
+	const isInteractive = onClick !== void 0;
+	const isDismissible = onDismiss !== void 0;
+	const hasTooltip = hasContent(tooltip);
+	const isBlocked = isDisabled || isLoading;
+	const isNativeDisabled = isDisabled && !isLoading && !hasTooltip;
+	const ariaRest = {};
+	const rootRest = {};
+	for (const [key, value] of Object.entries(rest)) if (isInteractive && key.startsWith("aria-")) ariaRest[key] = value;
+	else rootRest[key] = value;
+	const blockedProps = {};
+	if (isNativeDisabled) blockedProps.disabled = true;
+	else if (isBlocked) blockedProps["aria-disabled"] = true;
+	if (isLoading) blockedProps["aria-busy"] = true;
+	const handleClick = (event) => {
+		if (isBlocked) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	};
+	const handleDismiss = (event) => {
+		if (isBlocked) {
+			event.preventDefault();
+			return;
+		}
+		onDismiss?.();
+	};
+	const bodyProps = {};
+	if (!isInteractive && ariaLabel !== void 0) {
+		bodyProps.role = "img";
+		bodyProps["aria-label"] = ariaLabel;
+	}
+	if (isInteractive) {
+		const computedAria = {};
+		const name = ariaLabel ?? (isLoading && hasLabel ? label : void 0);
+		if (name !== void 0) computedAria["aria-label"] = name;
+		if (isSelected !== void 0) computedAria["aria-pressed"] = isSelected;
+		Object.assign(bodyProps, computedAria, ariaRest, blockedProps, {
+			as: "button",
+			type: "button",
+			onClick: handleClick
+		});
+	}
+	const hasColor = color !== void 0 && !isDisabled;
+	const shownVariant = isDisabled ? "DISABLED" : variant;
+	const hasHex = hex !== void 0 && !isDisabled;
+	const iconVariant = isDisabled ? IconVariant.DISABLED : hasHex || hasColor ? IconVariant.INHERIT : CHIP_VARIANT_TO_ICON_VARIANT_MAP[variant];
+	const iconPx = CHIP_SIZE_TO_ICON_PX_MAP[size];
+	const textSize = CHIP_SIZE_TO_TEXT_SIZE_MAP[size];
+	const skeletonSize = CHIP_SIZE_TO_SKELETON_SIZE_MAP[size];
+	const shownCount = flooredCount > Math.floor(max) ? `${Math.floor(max)}+` : String(flooredCount);
+	const variables = {};
+	if (hasHex) variables["--gx-chip-hex"] = hex;
+	const marks = hasMarks && /* @__PURE__ */ jsxs(Skeleton, {
+		variant: SkeletonVariant.CIRCLE,
+		size: skeletonSize,
+		isLoading,
+		className: cx(SKELETON_GROUP_CSS, SKELETON_MARKS_CSS),
 		children: [
-			icon && /* @__PURE__ */ jsx(FlexItem, {
-				shrink: 0,
-				grow: 0,
-				children: /* @__PURE__ */ jsx(Icon, {
-					component: icon,
-					size: CHIP_SIZE_TO_ICON_SIZE[size],
-					variant: CHIP_VARIANT_TO_ICON_VARIANT[variant]
-				})
-			}),
-			svg && /* @__PURE__ */ jsx(FlexItem, {
-				shrink: 0,
-				grow: 0,
-				children: svg
-			}),
-			label && /* @__PURE__ */ jsx(FlexItem, {
-				shrink: 0,
-				grow: 0,
-				children: /* @__PURE__ */ jsxs(Text, {
-					variant: CHIP_VARIANT_TO_TEXT_VARIANT[variant],
-					size: CHIP_SIZE_TO_TEXT_SIZE[size],
-					children: [label, isEllipsis && /* @__PURE__ */ jsx(Ellipsis, { isPulse: true })]
-				})
+			hasDot && /* @__PURE__ */ jsx(Beacon, {
+				size: CHIP_SIZE_TO_BEACON_SIZE_MAP[size],
+				variant: BeaconVariant.INHERIT
 			}),
-			onDismiss && /* @__PURE__ */ jsx(FlexWrapper, {
-				onClick: onDismiss,
-				children: /* @__PURE__ */ jsx(Icon, {
-					component: XIcon,
-					size: 12,
-					variant: IconVariant.TERTIARY
-				})
+			hasLeading && /* @__PURE__ */ jsx(LeadingSlot, { children: leading }),
+			icon !== void 0 && /* @__PURE__ */ jsx(Icon, {
+				component: icon,
+				size: iconPx,
+				variant: iconVariant,
+				className: NO_SHRINK_CSS
 			})
 		]
 	});
-};
+	const copy = (hasLabel || hasCount) && /* @__PURE__ */ jsxs(Skeleton, {
+		variant: SkeletonVariant.TEXT,
+		size: skeletonSize,
+		isLoading,
+		className: cx(SKELETON_GROUP_CSS, SKELETON_TEXT_CSS),
+		children: [hasLabel && /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: textSize,
+			variant: TextVariant.INHERIT,
+			lineClamp: 1,
+			shouldTooltipOnOverflow: !hasTooltip,
+			children: label
+		}), hasCount && /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: textSize,
+			variant: TextVariant.INHERIT,
+			isTabular: true,
+			className: NO_SHRINK_CSS,
+			children: shownCount
+		})]
+	});
+	const dismissName = hasLabel ? label : ariaLabel;
+	const body = /* @__PURE__ */ jsxs(Body, {
+		...bodyProps,
+		className: cx(isInteractive && INTERACTIVE_BODY_CSS, !hasLabel && UNLABELLED_BODY_CSS, isDismissible && DISMISSIBLE_BODY_CSS, isInteractive && isDisabled && DISABLED_CURSOR_CSS, isInteractive && isLoading && LOADING_CURSOR_CSS),
+		children: [marks, copy]
+	});
+	return /* @__PURE__ */ jsxs(Root, {
+		...rootRest,
+		ref,
+		id,
+		className: cx(CHIP_SIZE_TO_CSS_MAP[size], hasColor ? CHIP_COLOR_TO_CSS_MAP[color] : CHIP_VARIANT_TO_CSS_MAP[shownVariant], hasHex && HEX_CSS, hasBorder && HAS_BORDER_CSS, isSelected === true && SELECTED_CSS, isPill && PILL_CSS, className),
+		style: {
+			...variables,
+			...style
+		},
+		children: [hasTooltip || tooltip === "" ? /* @__PURE__ */ jsx(Tooltip, {
+			body: hasTooltip ? tooltip : "",
+			isDisabled: !hasTooltip,
+			children: body
+		}) : body, isDismissible && /* @__PURE__ */ jsx(Dismiss, {
+			...blockedProps,
+			type: "button",
+			"aria-label": dismissName === void 0 ? "Remove" : `Remove ${dismissName}`,
+			onClick: handleDismiss,
+			className: cx(isBlocked && DISABLED_CURSOR_CSS),
+			children: /* @__PURE__ */ jsx(Icon, {
+				component: XIcon,
+				size: iconPx,
+				variant: IconVariant.INHERIT
+			})
+		})]
+	});
+});
+Chip.displayName = "Chip";
 //#endregion
 export { ChipSize, ChipVariant, Chip as default };

package/dist/chips/ChipGroup.d.ts

@@ -0,0 +1,53 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Canonical rungs; the member names the rung of the chips in the group. */
+export declare enum ChipGroupSize {
+    /** `ChipSize.X_SMALL` toggle (16px), 4px gap. */
+    X_SMALL = "X_SMALL",
+    /** `ChipSize.SMALL` toggle (20px), 4px gap. */
+    SMALL = "SMALL",
+    /** `ChipSize.MEDIUM` toggle (24px), 4px gap. The default. */
+    MEDIUM = "MEDIUM",
+    /** `ChipSize.LARGE` toggle (28px), 8px gap. */
+    LARGE = "LARGE",
+    /** `ChipSize.X_LARGE` toggle (32px), 8px gap. */
+    X_LARGE = "X_LARGE"
+}
+export interface ChipGroupProps extends AriaAttributes {
+    /**
+     * The chips: `Chip` elements or Chip presets. Falsy children are skipped and not counted. Every
+     * child should be the same size as the group.
+     */
+    children?: ReactNode;
+    /**
+     * Show at most this many children, then a `+N` chip for the rest. Floored; below 0 counts as 0.
+     * Omit to always show all.
+     */
+    max?: number;
+    /**
+     * The rung of the `+N` / "Show less" chip and of the gap. Match it to the children's `ChipSize`.
+     * @default ChipGroupSize.MEDIUM
+     */
+    size?: ChipGroupSize;
+    /** Controlled show-all state. When set, the group calls `onOpenChange` and lets the caller decide. */
+    isOpen?: boolean;
+    /**
+     * Initial show-all state while uncontrolled.
+     * @default false
+     */
+    defaultIsOpen?: boolean;
+    /** Called with the requested state when the `+N` or "Show less" chip is pressed. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Accessible name of the group (`aria-label`), such as "Tags". */
+    ariaLabel?: string;
+    /** DOM id on the root; also the toggle chip's `aria-controls` target. @default a `useId()` value */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A wrapping row of related chips, with an optional `+N` / "Show less" toggle past `max`. */
+declare const ChipGroup: import("react").ForwardRefExoticComponent<ChipGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ChipGroup;