Tag changelog

Arrow canvases retain fractional host layout dimensions, preventing integer rounding from extending the outline beyond its shell and reducing spacing between tags. Parent transforms are not counted twice; the arrow formula and internal Tag zero spacing remain unchanged.

2026-10-23: Existing tag-group examples reuse Frame single-line layout and local ScrollArea horizontal scrolling, keeping at least 4px between tags. Internal Tag zero spacing, arrows, closing and toggle behavior remain unchanged; documentation and caller-example revision only.

The built-in close button name follows LocaleProvider and supports Provider messages overrides. The caller still owns tag content and removal after onClose.

2026-10-05: Changed the former default Indigo palette to Brand (--brand), retaining opacity, states, and override behavior.

2026-09-21: Unified the usage guide, source property table, and Site / AI reading entry points. Documentation only; component behavior is unchanged.

The close button no longer has a minimum content width and takes no space at rest. On exit it fades out before narrowing; keyboard focus keeps it expanded.

Fixed an extra right-side gap in closable Tags: when not hovered, the shared flex shorthand had restored a 12px slot for the hidden X.

Restored the full transition channels for the Tag root and closable state, and explicitly retained the hover-overlay transition.

TAG-Shape.3 shape="left-arrow" / "right-arrow" now uses an internal SVG background path that generates a fully rounded arrow outline from the current Tag width and height. All outside corners are rounded, avoiding the square body-side corner left by the previous body-plus-pseudo-element construction.

TAG-Close.3 The built-in X uses ComponentIcon name="close" and the Components package’s plain X default icon; IconProvider can replace it centrally. The default shape still comes from close-regular.svg and Workshop 12×12.
TAG-Close.4 The built-in X in the active state now uses --secondary-indigo: 40% when X is not hovered and 100% when it is, preventing X from turning black on hover inside an active Tag.

TAG-Close.2 The built-in X now reuses the shared .snowui-clear-icon-btn base class and <XCircle weight="fill" />, providing opacity: 0.4 → 1 feedback when X itself is hovered.

TAG-Toggle.1 Added the toggle prop as Button-style shorthand. It injects Click={{ Idle: "Active", Active: "Idle" }} and whileClick=false by default, switching between normal and active states on click.

TAG-State.1 Default variant="default" no longer locks the controlled Frame to Idle; an explicit Click state machine can drive data-state="Active" normally.

TAG-Init.1 Created Tag with default and active visual variants.
TAG-Layout.1 Added an inline shell layout matching Button, without a built-in leading Icon.
TAG-Close.1 Added the built-in closable X: it appears on Tag hover, uses currentColor and default opacity 0.4, and reaches opacity 1 when X itself is hovered. Clicking triggers onClose and stopPropagation.
TAG-Shape.1 Added shape="left-arrow" / "right-arrow" path-fragment shapes using CSS clip-path.
TAG-Shape.2 Rounded the arrow path outline according to Workshop node-id=11887-37739, while retaining pure CSS pseudo-elements and clip-path: path() to avoid gaps or overlap between SVG and body.
TAG-A11y.1 Automatically emits aria-pressed like Button (based on currentState, injected by frame-dom-runtime); externally supplied aria-pressed / aria-selected take priority.
TAG-Color.1 The active background uses --secondary-indigo at 10% with --secondary-indigo text, matching Button .snowui-button-active exactly.