@charcuterie/ui 4.27.0 → 4.27.1

package/dist/SegmentedControl/SegmentedOption.js

@@ -23,7 +23,7 @@ export const SegmentedOption = ({ isChecked, isFullWidth, item, onChoose, regist
         }
         return registerFocus(value);
     }, [isDisabled, registerFocus, value]);
-    return (_jsx("button", { "aria-checked": isChecked, className: toClassName("cursor-pointer rounded-sm border border-transparent font-medium tabular-nums transition-colors duration-(--duration-fast) ease-standard", 
+    return (_jsx("button", { "aria-checked": isChecked, className: toClassName("inline-flex cursor-pointer items-center justify-center rounded-sm border border-transparent font-medium tabular-nums transition-colors duration-(--duration-fast) ease-standard", 
         // In a very narrow board, three full labels cannot share
         // one row. The minimum lets two fit, then the final option
         // takes a full second row instead of wrapping its label or

package/dist/SegmentedControl/SegmentedOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedOption.js","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedOption.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAoB/C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,SAAS,EACT,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,IAAI,EACJ,QAAQ,EACR,YAAY,GACS,EAAa,EAAE;IACpC,MAAM,EAAE,UAAU,GAAG,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IAEjD,SAAS,CACP,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC9B,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAC3B,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,OAAO,aAAa,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IAEtC,OAAO,CAEL,iCACgB,SAAS,EACvB,SAAS,EAAE,WAAW,CACpB,yIAAyI;QACzI,yDAAyD;QACzD,2DAA2D;QAC3D,2DAA2D;QAC3D,kCAAkC;QAClC,WAAW,IAAI,0BAA0B,EACzC,kBAAkB,CAAC,IAAI,CAAC;QACxB,mDAAmD;QACnD,6DAA6D;QAC7D,0DAA0D;QAC1D,2CAA2C;QAC3C,SAAS;YACP,CAAC,CAAC,oDAAoD;YACtD,CAAC,CAAC,mFAAmF,EACvF,UAAU;YACR,2FAA2F,EAC7F,gBAAgB,CACjB,EACD,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC,EACD,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;QAC9B,CAAC,EACD,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,YAEZ,KAAK,GACC,CACV,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SegmentedOption.js","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedOption.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAoB/C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,SAAS,EACT,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,IAAI,EACJ,QAAQ,EACR,YAAY,GACS,EAAa,EAAE;IACpC,MAAM,EAAE,UAAU,GAAG,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IAEjD,SAAS,CACP,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC9B,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAC3B,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,OAAO,aAAa,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IAEtC,OAAO,CAEL,iCACgB,SAAS,EACvB,SAAS,EAAE,WAAW,CACpB,iLAAiL;QACjL,yDAAyD;QACzD,2DAA2D;QAC3D,2DAA2D;QAC3D,kCAAkC;QAClC,WAAW,IAAI,0BAA0B,EACzC,kBAAkB,CAAC,IAAI,CAAC;QACxB,mDAAmD;QACnD,6DAA6D;QAC7D,0DAA0D;QAC1D,2CAA2C;QAC3C,SAAS;YACP,CAAC,CAAC,oDAAoD;YACtD,CAAC,CAAC,mFAAmF,EACvF,UAAU;YACR,2FAA2F,EAC7F,gBAAgB,CACjB,EACD,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC,EACD,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;QAC9B,CAAC,EACD,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,YAEZ,KAAK,GACC,CACV,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.27.0",
+  "version": "4.27.1",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",

package/src/SegmentedControl/SegmentedControl.stories.tsx

@@ -200,3 +200,44 @@ export const FullWidth: Story = {
 export const Interactive: Story = {
   args: { items: COLUMN_ITEMS, label: "Columns" },
 }
+
+/** Inline rich labels must be centered as boxes, not aligned to an anonymous text baseline. */
+export const RichLabels: Story = {
+  args: {
+    isFullWidth: true,
+    label: "Message type",
+    items: [
+      {
+        value: "text",
+        label: (
+          <span className="inline-flex items-center gap-2 whitespace-nowrap">
+            <span
+              aria-hidden="true"
+              className="size-4 rounded-sm bg-current"
+            />
+            <span className="min-w-0 truncate">
+              Type a message
+            </span>
+          </span>
+        ),
+      },
+      {
+        value: "voice",
+        label: (
+          <span className="inline-flex items-center gap-2 whitespace-nowrap">
+            <span
+              aria-hidden="true"
+              className="size-4 rounded-full bg-current"
+            />
+            <span className="min-w-0 truncate">
+              Your voice
+            </span>
+            <small className="min-w-0 truncate text-xs">
+              Later
+            </small>
+          </span>
+        ),
+      },
+    ],
+  },
+}

package/src/SegmentedControl/SegmentedControl.test.tsx

@@ -7,8 +7,43 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./SegmentedControl.stories.tsx"
 
-const { AllStates, Playground, FullWidth, Interactive } =
-  composeStories(stories)
+const {
+  AllStates,
+  Playground,
+  FullWidth,
+  Interactive,
+  RichLabels,
+} = composeStories(stories)
+
+test("rich label boxes are centered inside both segmented options", async () => {
+  const { canvas } = await mountStory(RichLabels)
+  const group = expectAgentDrivable(canvas, {
+    name: "Message type",
+    role: "radiogroup",
+  })
+  for (const option of getOptions(group)) {
+    const label = option.firstElementChild
+    if (!label) throw new Error("The rich label is missing")
+    const optionBox = option.getBoundingClientRect()
+    const labelBox = label.getBoundingClientRect()
+    expect(
+      Math.abs(
+        optionBox.y +
+          optionBox.height / 2 -
+          labelBox.y -
+          labelBox.height / 2,
+      ),
+    ).toBeLessThan(0.5)
+    expect(
+      Math.abs(
+        optionBox.x +
+          optionBox.width / 2 -
+          labelBox.x -
+          labelBox.width / 2,
+      ),
+    ).toBeLessThan(0.5)
+  }
+})
 
 /**
  * `querySelectorAll` rather than `getAllByRole("radio")`, and not
@@ -237,7 +272,7 @@ test("full-width mode fills its container without wrapping labels", async () =>
       )
       expect(
         Math.max(...widths) - Math.min(...widths),
-      ).toBeLessThan(1)
+      ).toBeLessThan(0.5)
     }
   }
 })

package/src/SegmentedControl/SegmentedOption.tsx

@@ -66,7 +66,7 @@ export const SegmentedOption = ({
     <button
       aria-checked={isChecked}
       className={toClassName(
-        "cursor-pointer rounded-sm border border-transparent font-medium tabular-nums transition-colors duration-(--duration-fast) ease-standard",
+        "inline-flex cursor-pointer items-center justify-center rounded-sm border border-transparent font-medium tabular-nums transition-colors duration-(--duration-fast) ease-standard",
         // In a very narrow board, three full labels cannot share
         // one row. The minimum lets two fit, then the final option
         // takes a full second row instead of wrapping its label or