@signal9/era-ui 2.18.0 → 2.18.1

package/dist/dev/measure.d.ts

@@ -43,7 +43,17 @@ export interface Gaps {
     readonly bottom: number;
     readonly left: number;
 }
-/** Rect + resolved radius, relative to the viewport. */
+/**
+ * Rect + the radius the browser ACTUALLY PAINTS, relative to the viewport.
+ *
+ * getComputedStyle returns the SPECIFIED radius, but CSS clamps a radius to half
+ * the box — a 7px dot asking for an 8px radius renders as a 3.5px circle, not an
+ * 8px one. Reading the specified value therefore lies about round things, and it
+ * lied here: the radio group's dot (h=7, specified 8.06) inside its button (h=14,
+ * specified 8.06) looked like "radius step 0 against a 3.5px gap" — a violation —
+ * when both are in fact perfect circles, which are trivially concentric. Clamping
+ * gives step 3.5 == implied 3.5 == gap 3.5, and the finding correctly disappears.
+ */
 export declare function getRect(el: Element): Box;
 /** Rect relative to an offset root, so overlays can draw in the root's space. */
 export declare function getRelativeRect(el: Element, root: Element): Box;

package/dist/dev/measure.js

@@ -72,15 +72,26 @@ export function cssPath(el, root) {
     }
     return parts.join(' > ');
 }
-/** Rect + resolved radius, relative to the viewport. */
+/**
+ * Rect + the radius the browser ACTUALLY PAINTS, relative to the viewport.
+ *
+ * getComputedStyle returns the SPECIFIED radius, but CSS clamps a radius to half
+ * the box — a 7px dot asking for an 8px radius renders as a 3.5px circle, not an
+ * 8px one. Reading the specified value therefore lies about round things, and it
+ * lied here: the radio group's dot (h=7, specified 8.06) inside its button (h=14,
+ * specified 8.06) looked like "radius step 0 against a 3.5px gap" — a violation —
+ * when both are in fact perfect circles, which are trivially concentric. Clamping
+ * gives step 3.5 == implied 3.5 == gap 3.5, and the finding correctly disappears.
+ */
 export function getRect(el) {
     const r = el.getBoundingClientRect();
+    const specified = parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0;
     return {
         x: r.x,
         y: r.y,
         width: r.width,
         height: r.height,
-        radius: parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0
+        radius: Math.min(specified, r.width / 2, r.height / 2)
     };
 }
 /** Rect relative to an offset root, so overlays can draw in the root's space. */
@@ -115,14 +126,31 @@ export function isEven(g, tol = TOL) {
     const { top, right, bottom, left } = g;
     return (Math.abs(top - bottom) <= tol && Math.abs(left - right) <= tol && Math.abs(top - left) <= tol);
 }
+/**
+ * The corner radius a box paints given its HEIGHT — the radius the tier system
+ * is actually talking about.
+ *
+ * Box.radius clamps by width as well, because that is what the browser paints.
+ * But the concentricity law is a statement about VERTICAL nesting (a tier inside
+ * a tier), and width-clamping is driven by CONTENT, not by design: the ":"
+ * literal in a time field is a ~6px-wide span, so its rd-sm corners get pinched
+ * to ~3px by its own narrowness. Measured with the painted radius it reported
+ * "step 4.1 ≠ gap 1.0" — a violation of nothing, since its siblings on the same
+ * tier paint the correct 7px and the literal has no fill to show a corner with.
+ * Clamping by height only asks the question the law actually poses.
+ */
+function tierRadius(el) {
+    const specified = parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0;
+    return Math.min(specified, el.getBoundingClientRect().height / 2);
+}
 /**
  * The concentricity law. Nested corners share a centre of curvature only when
  * the radius step equals the gap — checking any two of the three terms passes
  * boxes that are visibly wrong, so assert all three at once.
  */
 export function getConcentricity(child, container, tol = TOL) {
-    const inner = getRect(child);
-    const outer = getRect(container);
+    const inner = { ...getRect(child), radius: tierRadius(child) };
+    const outer = { ...getRect(container), radius: tierRadius(container) };
     const gaps = getGaps(child, container);
     const radiusDelta = outer.radius - inner.radius;
     const impliedGap = (outer.height - inner.height) / 2;

package/dist/ui/date-field/date-field-segment.svelte

@@ -8,7 +8,7 @@
 <DateField.Segment
 	bind:ref
 	class={cn(
-		'rounded-(--era-rd-md) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'inline-flex h-(--era-h-sm) items-center rounded-(--era-rd-sm) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/date-picker/date-picker-segment.svelte

@@ -8,7 +8,7 @@
 <DatePicker.Segment
 	bind:ref
 	class={cn(
-		'rounded-(--era-rd-md) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'inline-flex h-(--era-h-sm) items-center rounded-(--era-rd-sm) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/date-range-field/date-range-field-segment.svelte

@@ -12,7 +12,7 @@
 <DateRangeField.Segment
 	bind:ref
 	class={cn(
-		'rounded-(--era-rd-md) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'inline-flex h-(--era-h-sm) items-center rounded-(--era-rd-sm) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/date-range-picker/date-range-picker-segment.svelte

@@ -12,7 +12,7 @@
 <DateRangePicker.Segment
 	bind:ref
 	class={cn(
-		'rounded-(--era-rd-md) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'inline-flex h-(--era-h-sm) items-center rounded-(--era-rd-sm) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/time-field/time-field-segment.svelte

@@ -8,7 +8,7 @@
 <TimeField.Segment
 	bind:ref
 	class={cn(
-		'rounded-(--era-rd-md) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'inline-flex h-(--era-h-sm) items-center rounded-(--era-rd-sm) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/time-range-field/time-range-field-segment.svelte

@@ -12,7 +12,7 @@
 <TimeRangeField.Segment
 	bind:ref
 	class={cn(
-		'rounded-(--era-rd-md) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'inline-flex h-(--era-h-sm) items-center rounded-(--era-rd-sm) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
 		className
 	)}
 	{...restProps}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "2.18.0",
+	"version": "2.18.1",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",