@ntmats/hc-ui 0.10.0 → 0.12.0

package/README.md

@@ -95,4 +95,4 @@ Fixed colors that stay the same in both themes are HeroClix tokens: `color-dial-
 
 `PhysicalCardView` is the printed card in HCUnits' format (375×525 px, absolute positions), scaled to its container's width: front and back side by side while each keeps about 86% of its size, otherwise one under the other, never above 1.2×. With `fitHeight` the front also fits the visible height of the scrolling area found by `fitHeightWithin`. Everything comes resolved: the backgrounds (`images.front`, `images.back`, `images.legacy`, `layout.rarityImage`, `layout.dialImage`: addresses the app serves; HCUI's are in its `public/card/` and do not ship here), the title (its type shrinks from 28px to fit), header lines, team abilities (buttons that open a tip, with the shield the caller passes in `teamAbilityIcon`), the collection number and set symbol, the token (`portrait` drawn by the caller with the class the card gives, `terrain` art or an `object` ring in its color), the bystander's token replica, keyphrases, the rules (already translated, with an optional `icon`; tapping a paragraph calls `onCopy(copyText)`), improved abilities, the printed dial as a node (`dial.node`, usually `CombatDialView` with `presentation="printed"`), the terrain dial, points (buttons that call `onSelectPoint`, an object's line or nothing) and the black back bar. Rules that do not fit the front move to the backs, two columns each, one block at a time (`nextPhysicalCardDistribution`); the split starts over when `contentKey` changes. Under a mouse the card tilts up to 3° toward the pointer, with parallax and a shine (nearly still over the dial); on a phone only the focus view moves, by the motion sensor (`requestPhysicalCardMotionAccess` asks iOS on the first touch). Holding the card with a finger for 450 ms calls `onRequestFocus`; the caller opens `PhysicalCardFocusView` (a modal `<dialog>` over a dimmed, blurred backdrop; Esc and a tap outside, once the opening finger is lifted, call `onClose`) with a second card with `focus`, which shows one side at a time and draws `focusActions({ nextSide, backs, flip })` under it (the library's `Button` `outline` there gets the surface fill). Tips are controlled as in the dial: hover with a mouse opens a passive tip described by the control, a press or Enter opens it as a dialog, leaving closes the passive one; the caller keeps `tip` and draws it in `tipSlot`. Paper, ink, shine and grain follow the theme (`color-card-*`, `filter-card-background`, `blend-card-*`, `opacity-card-grain*`); the printed black and white, the team-up band and the terrain dial are fixed (`color-card-print-*`, `color-card-team-up`, `color-card-terrain-panel*`). Letters are upright (`--hc-rond: 0` on the card, which its printed dial reads too). Motion only with a fine pointer or in the phone's focus view, and none under `prefers-reduced-motion`.
 
-`MapBoardView` draws a map already fetched (`map`: the hcmaps JSON, `HCMapJson`) with the hcmaps engine (`HCMap`) in a canvas named by `canvasLabel`, square-cornered and white in both themes (`color-map-board`), and shades the inspected square or draws the inspected edge (`selection`, from `inspectMap`; `color-map-selection*`). `onInspect(x, y, clientX, clientY)` gets the pointer in squares: mouse and pen while passing over, touch on press; `onLeave` when the mouse leaves. Other attributes (role, `tabIndex`, `onKeyDown`, `aria-*`) go to the container, so the caller adds the keyboard (HCUI: arrows move one square, Esc closes). `MapBoardPlaceholder` is the empty grid while it loads, a busy status whose `label` is visually hidden by the library. `MapTooltipView` is fixed next to `anchor` without leaving the screen (portal it out of a clipping container): the title, a wall's color, and for each square (one, or two on an edge) its coordinate, terrain and elevation swatches with the caller's names, the environment (a node, e.g. `MapEnvironmentView`, or `environmentNote`) and notes. `MapSwatch` is the board's square in a legend; `MapLegendView` lists them (the 3D model's legend) with children after; `MapEnvironmentView` shows indoor/outdoor with the caller's icons (black line icons, turned light in the dark theme by `filter-map-environment-icon`) and names. `renderMapThumbnail(json, height)` returns a PNG data URL. The engines are plain functions with no DOM beyond a canvas context: `inspectMap` (square, edge or wall at a point, in squares), `mapSquare`, `mapMaxLevel`, `mapElevationLevel`, `mapSquareCoordinate`; `buildMapScene` (the 3D model's heights, walls, ramps and ziplines), the camera (`makeMapProjection`, `pickMapScene`, `zoomMapCamera`, `clampMapPan`) and `drawMapScene` (Canvas 2D). The camera is parallel by default; `makeMapProjection(scene, camera, viewport, { perspective: MAP_PERSPECTIVE_DISTANCE })` adds a light perspective (near squares larger, far ones smaller) in the same screen box, with `ground` still exact and `factor(x, y, z)` telling how much a point grew, e.g. to size a figure drawn over the model. `MapBoardView` draws again when the browser gives its canvas back blank (`contextrestored`). The 3D model's component, its gestures and its icons stay in the app.
+`MapBoardView` draws a map already fetched (`map`: the hcmaps JSON, `HCMapJson`) with the hcmaps engine (`HCMap`) in a canvas named by `canvasLabel`, square-cornered and white in both themes (`color-map-board`), and shades the inspected square or draws the inspected edge (`selection`, from `inspectMap`; `color-map-selection*`). `onInspect(x, y, clientX, clientY)` gets the pointer in squares: mouse and pen while passing over, touch on press; `onLeave` when the mouse leaves. Other attributes (role, `tabIndex`, `onKeyDown`, `aria-*`) go to the container, so the caller adds the keyboard (HCUI: arrows move one square, Esc closes). `MapBoardPlaceholder` is the empty grid while it loads, a busy status whose `label` is visually hidden by the library. `MapTooltipView` is fixed next to `anchor` without leaving the screen (portal it out of a clipping container): the title, a wall's color, and for each square (one, or two on an edge) its coordinate, terrain and elevation swatches with the caller's names, the environment (a node, e.g. `MapEnvironmentView`, or `environmentNote`) and notes. `MapSwatch` is the board's square in a legend; `MapLegendView` lists them (the 3D model's legend) with children after; `MapEnvironmentView` shows indoor/outdoor with the caller's icons (black line icons, turned light in the dark theme by `filter-map-environment-icon`) and names. `renderMapThumbnail(json, height)` returns a PNG data URL. The engines are plain functions with no DOM beyond a canvas context: `inspectMap` (square, edge or wall at a point, in squares), `mapSquare`, `mapMaxLevel`, `mapElevationLevel`, `mapSquareCoordinate`; `buildMapScene` (the 3D model's heights, walls, ramps and ziplines), the camera (`makeMapProjection`, `pickMapScene`, `zoomMapCamera`, `clampMapPan`) and `drawMapScene` (Canvas 2D). The camera is parallel by default; `makeMapProjection(scene, camera, viewport, { perspective: MAP_PERSPECTIVE_DISTANCE })` adds a light perspective (near squares larger, far ones smaller) in the same screen box, with `ground` still exact and `factor(x, y, z)` telling how much a point grew, e.g. to size a figure drawn over the model. `MapBoardView` draws again when the browser gives its canvas back blank (`contextrestored`). `drawMapScene(..., { decorate })` lets the app paint a side over its default face (`side(ctx, face)`, with the face's screen `quad`) and draw what stands on a square right after it in the painter's order (`cell(ctx, cell)`), or draw a ramp its own way (`ramp(ctx, ramp)` returning `true`), e.g. facades, props and stairs, without changing terrain or picking. The 3D model's component, its gestures and its icons stay in the app.

package/dist/index.d.ts

@@ -97,7 +97,14 @@ export declare const IconButton: ForwardRefExoticComponent<IconButtonProps & Ref
 interface ChipBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Toggle state for filters; omit for a plain action chip. */
     selected?: boolean;
+    /** Decorative icon before the label (18px at `md`); its side of the pill gets a little less room than text. */
     icon?: ReactNode;
+    /**
+     * Round picture before the label, concentric with the pill's start: 24px at `md` and `sm`, 18px at
+     * `xs` (a character, a player). Pass an `img` (or an `AvatarView`); the chip sizes and rounds it.
+     * Decorative: the label names the chip. Takes the place of `icon` when both are given.
+     */
+    avatar?: ReactNode;
     /**
      * `md` (default): 36px, 13px text (HCUI `chip`). `sm`: 36px, 12px text and 12px padding (HCUI's
      * desktop filter pills and sort trigger). `xs`: 26px, 11px text, muted fill without ring (HCUI's
@@ -1591,6 +1598,31 @@ export declare function mapFootprintOutline({ x, y, width, height, cells }: {
     edges: [Point, Point][];
     corners: Point[];
 };
+/** A square's visible side, as `drawMapScene` draws it: from the neighbor's top (`low`) to the square's. */
+export interface MapSceneFace {
+    cell: MapSceneCell;
+    /** The side's outward direction (one of `MAP_CELL_SIDES`). */
+    dx: number;
+    dy: number;
+    low: number;
+    top: number;
+    /** Screen corners: low at the side's start, low at its end, top at its end, top at its start. */
+    quad: [[number, number], [number, number], [number, number], [number, number]];
+    /** How lit the side is, 0..1 (the default face is shaded by it). */
+    light: number;
+}
+/**
+ * What the app adds to the 3D model, in the painter's order of `drawMapScene`: a side
+ * drawn over the default face (a facade, a wall's stones), and whatever stands on a
+ * square, drawn right after that square (a car, a tree, a pillar), so nearer squares
+ * and walls still cover it. Terrain, heights and picking do not change.
+ */
+export interface MapSceneDecoration {
+    side?(ctx: CanvasRenderingContext2D, face: MapSceneFace): void;
+    cell?(ctx: CanvasRenderingContext2D, cell: MapSceneCell): void;
+    /** Draws a ramp (e.g. as stairs) in place of the default wedge; return `true` when it did. */
+    ramp?(ctx: CanvasRenderingContext2D, ramp: MapSceneRamp): boolean;
+}
 export interface MapSceneFootprint {
     x: number;
     y: number;
@@ -1615,8 +1647,9 @@ export interface MapSceneHighlight {
     /** The target of a piece being moved: floor and volume, cut to the board. */
     footprint?: MapSceneFootprint;
 }
-export declare function drawMapScene(ctx: CanvasRenderingContext2D, scene: MapScene, view: MapProjection, texture: HTMLCanvasElement, highlight?: MapSceneHighlight | null, { tufts }?: {
+export declare function drawMapScene(ctx: CanvasRenderingContext2D, scene: MapScene, view: MapProjection, texture: HTMLCanvasElement, highlight?: MapSceneHighlight | null, { tufts, decorate }?: {
     tufts?: boolean;
+    decorate?: MapSceneDecoration;
 }): void;
 /** The thumbnail's default height, in pixels. */
 export declare const MAP_THUMBNAIL_HEIGHT = 192;

package/dist/index.js

@@ -156,18 +156,18 @@ var glyph = (size, d) => /* @__PURE__ */ jsx("svg", { width: size, height: size,
 var CHEVRON_DOWN = "M6 9L12 15L18 9";
 var XMARK = "M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426";
 var visible = (node) => node !== void 0 && node !== null && node !== false && node !== "";
-var Chip = forwardRef(function Chip2({ selected, icon, size = "md", variant = "outline", applied = false, count, badge, badgePlacement = "inline", informative = false, chevron, onClear, clearLabel, type = "button", className, children, ...props }, ref) {
+var Chip = forwardRef(function Chip2({ selected, icon, avatar, size = "md", variant = "outline", applied = false, count, badge, badgePlacement = "inline", informative = false, chevron, onClear, clearLabel, type = "button", className, children, ...props }, ref) {
   const popup = props["aria-haspopup"];
   const withChevron = chevron ?? (popup !== void 0 && popup !== false && popup !== "false");
   const look = {
     "data-size": size === "md" ? void 0 : size,
     "data-variant": variant === "outline" ? void 0 : variant,
     "data-applied": applied || void 0,
-    "data-icon-only": icon && !visible(children) || void 0,
+    "data-icon-only": icon && !avatar && !visible(children) || void 0,
     "data-informative": informative || void 0
   };
   const content = /* @__PURE__ */ jsxs(Fragment2, { children: [
-    icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__icon", "aria-hidden": "true", children: icon }),
+    avatar ? /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__avatar", "aria-hidden": "true", children: avatar }) : icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__icon", "aria-hidden": "true", children: icon }),
     children,
     visible(count) && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__count", children: count }),
     visible(badge) && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__badge", "data-placement": badgePlacement === "corner" ? "corner" : void 0, children: badge }),
@@ -2962,7 +2962,7 @@ function sideColor(cell) {
   if (cell.terrain === "window") return MAP_TERRAIN_EDGE_COLORS.window;
   return SIDE_COLORS[cell.environment] ?? SIDE_COLORS.unknown;
 }
-function drawCellSides(ctx, scene, view, cell) {
+function drawCellSides(ctx, scene, view, cell, decorate) {
   const { point } = view;
   for (const side of MAP_CELL_SIDES) {
     if (side.dx * view.sin + side.dy * view.cos <= 0) continue;
@@ -2971,7 +2971,13 @@ function drawCellSides(ctx, scene, view, cell) {
     if (low >= cell.top) continue;
     const ax = cell.x + side.ax, ay = cell.y + side.ay, bx = cell.x + side.bx, by = cell.y + side.by;
     const light = faceLight(view, side.dx, side.dy);
-    face(ctx, [point(ax, ay, low), point(bx, by, low), point(bx, by, cell.top), point(ax, ay, cell.top)], shade(sideColor(cell), light));
+    const quad = [point(ax, ay, low), point(bx, by, low), point(bx, by, cell.top), point(ax, ay, cell.top)];
+    face(ctx, quad, shade(sideColor(cell), light));
+    if (decorate?.side) {
+      ctx.save();
+      decorate.side(ctx, { cell, dx: side.dx, dy: side.dy, low, top: cell.top, quad, light });
+      ctx.restore();
+    }
     ctx.strokeStyle = "rgba(0,0,0,.26)";
     ctx.lineWidth = 1;
     for (let z = 0; z < cell.top - 0.01; z += MAP_SCENE_LEVEL_HEIGHT) {
@@ -3153,7 +3159,7 @@ function drawHighlight(ctx, scene, view, highlight) {
   ctx.lineWidth = 2;
   ctx.stroke();
 }
-function drawMapScene(ctx, scene, view, texture, highlight, { tufts = true } = {}) {
+function drawMapScene(ctx, scene, view, texture, highlight, { tufts = true, decorate } = {}) {
   const pad = 0.35;
   polygon(ctx, [view.point(-pad, -pad, MAP_SCENE_BASE_Z - 0.16), view.point(scene.width + pad, -pad, MAP_SCENE_BASE_Z - 0.16), view.point(scene.width + pad, scene.height + pad, MAP_SCENE_BASE_Z - 0.16), view.point(-pad, scene.height + pad, MAP_SCENE_BASE_Z - 0.16)]);
   ctx.fillStyle = "rgba(0,0,0,.14)";
@@ -3176,11 +3182,24 @@ function drawMapScene(ctx, scene, view, texture, highlight, { tufts = true } = {
     items.push({
       depth: view.depth(cell.x + 0.5, cell.y + 0.5),
       draw() {
-        drawCellSides(ctx, scene, view, cell);
+        drawCellSides(ctx, scene, view, cell, decorate);
         drawCellTop(ctx, scene, view, cell, texture, shadows);
         if (mixed && cell.environment === "indoor") drawIndoorCurb(ctx, scene, view, cell);
-        for (const ramp of rampsByCell.get(cell.y * scene.width + cell.x) ?? []) drawRamp(ctx, view, ramp);
+        for (const ramp of rampsByCell.get(cell.y * scene.width + cell.x) ?? []) {
+          let drawn = false;
+          if (decorate?.ramp) {
+            ctx.save();
+            drawn = decorate.ramp(ctx, ramp);
+            ctx.restore();
+          }
+          if (!drawn) drawRamp(ctx, view, ramp);
+        }
         if (tufts && cell.terrain === "hindering") drawHindering(ctx, view, cell);
+        if (decorate?.cell) {
+          ctx.save();
+          decorate.cell(ctx, cell);
+          ctx.restore();
+        }
       }
     });
   }

package/dist/styles.css

@@ -64,7 +64,8 @@
   min-width: var(--hc-segmented-option-min-width, 0);
   min-height: 38px;
   margin: 0;
-  padding: 0 var(--hc-space-3);
+  /* Text gets the pill's room (as Chip); an icon before the label, a little less. */
+  padding: 0 var(--hc-space-4);
   color: var(--hc-color-text-secondary);
   font-family: var(--hc-font-body);
   font-size: var(--hc-font-size-sm);
@@ -84,7 +85,8 @@
     box-shadow var(--hc-transition-fast), font-weight 220ms var(--hc-ease-standard);
 }
 
-[data-hc-ds] .hc-ui-segmented[data-density='compact'] .hc-ui-segmented__option { min-height: 32px; }
+[data-hc-ds] .hc-ui-segmented[data-density='compact'] .hc-ui-segmented__option { min-height: 32px; padding: 0 14px; }
+[data-hc-ds] .hc-ui-segmented:not([data-labels='hidden']) .hc-ui-segmented__option:has(> .hc-ui-segmented__icon + .hc-ui-segmented__label) { padding-inline-start: var(--hc-space-3); }
 
 [data-hc-ds] .hc-ui-segmented[data-labels='hidden'] .hc-ui-segmented__option {
   width: 40px;
@@ -216,9 +218,11 @@
 
 /* Button — HCUI btn-base / btn-primary / btn-outline / btn-danger / btn-lg. */
 [data-hc-ds] .hc-ui-button {
+  --hc-button-pad: var(--hc-space-5);
+  --hc-button-pad-icon: var(--hc-space-4);
   gap: var(--hc-space-2);
   min-height: var(--hc-control-height-md);
-  padding: 0 var(--hc-space-5);
+  padding: 0 var(--hc-button-pad);
   color: var(--hc-color-text-primary);
   background-color: var(--hc-color-bg-muted);
   font-size: var(--hc-font-size-md);
@@ -237,8 +241,11 @@
 [data-hc-ds] .hc-ui-button:is([data-variant='secondary'], [data-variant='outline'], [data-variant='ghost'])[data-tone='danger'] { color: var(--hc-color-danger); }
 /* An open popup trigger: the 1.5px ring in the text color, as Chip (HCUI's Importar, Entrar and Convidar). */
 [data-hc-ds] .hc-ui-button:is([data-variant='secondary'], [data-variant='outline'], [data-variant='ghost'])[aria-haspopup]:not([aria-haspopup='false'])[aria-expanded='true'] { box-shadow: inset 0 0 0 1.5px var(--hc-color-text-primary); }
-[data-hc-ds] .hc-ui-button[data-size='sm'] { min-height: var(--hc-control-height-chip); padding: 0 var(--hc-space-4); font-size: var(--hc-font-size-sm); }
-[data-hc-ds] .hc-ui-button[data-size='lg'] { min-height: var(--hc-control-height-lg); padding: 0 var(--hc-space-6); font-size: var(--hc-font-size-base); }
+[data-hc-ds] .hc-ui-button[data-size='sm'] { --hc-button-pad: var(--hc-space-4); --hc-button-pad-icon: var(--hc-space-3); min-height: var(--hc-control-height-chip); font-size: var(--hc-font-size-sm); }
+[data-hc-ds] .hc-ui-button[data-size='lg'] { --hc-button-pad: var(--hc-space-6); --hc-button-pad-icon: var(--hc-space-5); min-height: var(--hc-control-height-lg); font-size: var(--hc-font-size-base); }
+/* An icon (or the spinner) at a side takes a little less room than text (Material 3: 16 and 24 at 40). */
+[data-hc-ds] .hc-ui-button:has(> :is(.hc-ui-button__icon, .hc-ui-button__spinner):first-child) { padding-inline-start: var(--hc-button-pad-icon); }
+[data-hc-ds] .hc-ui-button:has(> .hc-ui-button__icon:last-child) { padding-inline-end: var(--hc-button-pad-icon); }
 [data-hc-ds] .hc-ui-button[data-full-width] { width: 100%; }
 [data-hc-ds] .hc-ui-button:disabled { opacity: 0.4; cursor: default; }
 [data-hc-ds] .hc-ui-button { max-width: 100%; }
@@ -297,11 +304,21 @@
 [data-hc-ds] .hc-ui-icon-button:disabled { opacity: 0.4; cursor: default; }
 
 /* Chip — HCUI chip / chip-active. */
+/*
+ * Side space of a pill (Chip, Button, SegmentedControl): text needs more room than an icon or an
+ * avatar, because the round end eats into the text and a glyph is already round. A side with text
+ * gets about half the height (Material 3: 16/32 and 24/40; eBay Playbook: 16/32 and 20/40); a side
+ * that starts or ends with an icon gets a little less; an avatar sits concentric with the end.
+ */
 [data-hc-ds] .hc-ui-chip {
+  --hc-chip-pad: 16px;
+  --hc-chip-pad-icon: 12px;
+  --hc-chip-pad-avatar: 6px;
+  --hc-chip-avatar: 24px;
   flex: 0 0 auto;
   gap: 6px;
   min-height: var(--hc-control-height-chip);
-  padding: 0 14px;
+  padding: 0 var(--hc-chip-pad);
   color: var(--hc-color-text-primary);
   background-color: var(--hc-color-bg-surface);
   box-shadow: inset 0 0 0 1px var(--hc-color-border-strong);
@@ -335,16 +352,33 @@
   font-variant-numeric: tabular-nums;
 }
 [data-hc-ds] .hc-ui-chip__chevron { display: inline-flex; flex: 0 0 auto; }
+/* An icon or avatar at the start, a chevron or an inline badge at the end: less room on that side. */
+[data-hc-ds] .hc-ui-chip:not([data-icon-only]):has(> .hc-ui-chip__icon:first-child) { padding-inline-start: var(--hc-chip-pad-icon); }
+[data-hc-ds] .hc-ui-chip:not([data-icon-only]):has(> .hc-ui-chip__avatar:first-child) { padding-inline-start: var(--hc-chip-pad-avatar); }
+[data-hc-ds] .hc-ui-chip:has(> :is(.hc-ui-chip__chevron, .hc-ui-chip__badge:not([data-placement='corner'])):last-child) { padding-inline-end: var(--hc-chip-pad-icon); }
+/* Avatar: a round picture concentric with the pill's start (24px at 36px, 18px at 26px). */
+[data-hc-ds] .hc-ui-chip__avatar {
+  display: inline-flex;
+  flex: 0 0 auto;
+  width: var(--hc-chip-avatar);
+  height: var(--hc-chip-avatar);
+  overflow: hidden;
+  border-radius: var(--hc-radius-full);
+}
+[data-hc-ds] .hc-ui-chip__avatar > :is(img, svg, .hc-ui-avatar) { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
 [data-hc-ds] .hc-ui-chip__chevron svg { display: block; }
 /* Applied filter, or the trigger of an open popup: a 1.5px ring (the selected fill below wins). */
 [data-hc-ds] .hc-ui-chip:is([data-applied], [aria-expanded='true']):not([aria-pressed='true'], [aria-checked='true'], [data-selected]) { box-shadow: inset 0 0 0 1.5px var(--hc-color-text-primary); }
 /* Line height `normal`, as HCUI's filter pills: on 2x screens 18px moves the text by half a pixel. */
-[data-hc-ds] .hc-ui-chip[data-size='sm'] { padding: 0 var(--hc-space-3); font-size: var(--hc-font-size-xs); line-height: normal; }
+[data-hc-ds] .hc-ui-chip[data-size='sm'] { --hc-chip-pad: 14px; --hc-chip-pad-icon: 10px; font-size: var(--hc-font-size-xs); line-height: normal; }
 [data-hc-ds] .hc-ui-chip[data-size='xs'] {
   gap: var(--hc-space-1);
+  --hc-chip-pad: 10px;
+  --hc-chip-pad-icon: 7px;
+  --hc-chip-pad-avatar: 4px;
+  --hc-chip-avatar: 18px;
   min-height: 26px;
   height: 26px;
-  padding: 0 var(--hc-space-2);
   background-color: var(--hc-color-bg-muted);
   box-shadow: none;
   font-size: var(--hc-font-size-2xs);
@@ -352,8 +386,9 @@
 [data-hc-ds] .hc-ui-chip[data-size='xs']:is([data-applied], [aria-expanded='true']):not([aria-pressed='true'], [aria-checked='true'], [data-selected]) { box-shadow: inset 0 0 0 1.5px var(--hc-color-text-primary); }
 /* Quiet: HCUI's rule filter pills, lighter until applied. */
 [data-hc-ds] .hc-ui-chip[data-variant='quiet'] {
+  --hc-chip-pad: 15px;
+  --hc-chip-pad-icon: 11px;
   gap: 5px;
-  padding: 0 13px;
   color: var(--hc-color-text-secondary);
   box-shadow: inset 0 0 0 1px var(--hc-color-border);
   font-weight: 560;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntmats/hc-ui",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "type": "module",
   "description": "Shared HCUI/Arena React presentation primitives.",
   "license": "UNLICENSED",