@signal9/era-ui 23.1.1 → 23.3.0

package/dist/ui/toggle-group/toggle-group-item.svelte

@@ -1,17 +1,47 @@
+<script lang="ts" module>
+	import { tv } from '../../utils/index.js';
+
+	export const toggleGroupItemVariants = tv({
+		// not-has-[svg]: the same guard Button carries. A TEXT-only option holds
+		// nothing but a label, so it has no reason to be a flex row — and as one,
+		// its text is an anonymous flex item that text-box-trim can never reach,
+		// which is the audit's fixable case. As a block with era-label-ink the ink
+		// is centred by its typographic band instead of by font metrics.
+		// text-center because blockifying drops the horizontal centring
+		// justify-center was doing. An option holding an ICON keeps the flex row,
+		// because that pair still needs laying out.
+		base: 'inline-flex items-center justify-center text-body text-fg era-interactive not-has-[svg]:era-label-ink not-has-[svg]:text-center hover:bg-highlight focus:outline-none disabled:opacity-50 data-[state=on]:bg-fill data-[state=on]:text-bright data-[state=on]:shadow-pressed data-[state=on]:hover:shadow-pressed',
+		variants: {
+			variant: {
+				plain:
+					'h-control min-w-control rounded-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed',
+				segmented: 'h-chip min-w-chip rounded-chip px-inset-chip'
+			}
+		},
+		defaultVariants: { variant: 'plain' }
+	});
+</script>
+
 <script lang="ts">
 	import { ToggleGroup } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { getToggleGroupVariant } from './context.svelte.js';
 
 	// Pattern A pass-through: bits-ui's typed children snippet flows through
 	// restProps untouched.
 	let { ref = $bindable(null), class: className, ...restProps }: ToggleGroup.ItemProps = $props();
+
+	const variant = getToggleGroupVariant();
 </script>
 
+<!--
+	An option takes its tier from the GROUP, because that is what it has to nest
+	concentrically inside: control tier standing alone, one rung down to chip
+	inside a segmented well. The latched face is the same in both — bg-fill and
+	the pressed shadow, held on hover so it does not spring back up on bevel.
+-->
 <ToggleGroup.Item
 	bind:ref
-	class={cn(
-		'inline-flex h-control min-w-control items-center justify-center rounded-control px-inset-control text-body text-fg shadow-sm hover:bg-highlight hover:shadow-highlight focus:outline-none active:shadow-pressed disabled:opacity-50 data-[state=on]:bg-fill data-[state=on]:text-bright data-[state=on]:shadow-pressed',
-		className
-	)}
+	class={cn(toggleGroupItemVariants({ variant: variant() }), className)}
 	{...restProps}
 />

package/dist/ui/toggle-group/toggle-group-item.svelte.d.ts

@@ -1,3 +1,19 @@
+export declare const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        plain: "h-control min-w-control rounded-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
+        segmented: "h-chip min-w-chip rounded-chip px-inset-chip";
+    };
+}, undefined, "inline-flex items-center justify-center text-body text-fg era-interactive not-has-[svg]:era-label-ink not-has-[svg]:text-center hover:bg-highlight focus:outline-none disabled:opacity-50 data-[state=on]:bg-fill data-[state=on]:text-bright data-[state=on]:shadow-pressed data-[state=on]:hover:shadow-pressed", {
+    variant: {
+        plain: "h-control min-w-control rounded-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
+        segmented: "h-chip min-w-chip rounded-chip px-inset-chip";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        plain: "h-control min-w-control rounded-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
+        segmented: "h-chip min-w-chip rounded-chip px-inset-chip";
+    };
+}, undefined>>;
 import { ToggleGroup } from 'bits-ui';
 declare const ToggleGroupItem: import("svelte").Component<ToggleGroup.ItemProps, {}, "ref">;
 type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;

package/dist/ui/toggle-group/toggle-group-root.svelte

@@ -1,18 +1,58 @@
+<script lang="ts" module>
+	import { tv } from '../../utils/index.js';
+
+	// tv(), not a ternary in the markup. era declares its variants here by
+	// convention, and check:specimen-coverage reads exactly this block to prove
+	// the board renders every axis — an axis expressed as an inline ternary is
+	// invisible to it, so the gate would have passed while measuring one of two.
+	export const toggleGroupVariants = tv({
+		base: 'inline-flex items-center',
+		variants: {
+			variant: {
+				plain: 'gap-gutter',
+				segmented:
+					'h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well'
+			}
+		},
+		defaultVariants: { variant: 'plain' }
+	});
+</script>
+
 <script lang="ts">
 	import { ToggleGroup } from 'bits-ui';
 	import { cn, type PartProps } from '../../utils/index.js';
+	import { setToggleGroupVariant, type ToggleGroupVariant } from './context.svelte.js';
 
 	let {
 		ref = $bindable(null),
+		variant = 'plain',
 		children,
 		class: className,
 		...restProps
-	}: PartProps<ToggleGroup.RootProps> = $props();
+	}: PartProps<ToggleGroup.RootProps> & { variant?: ToggleGroupVariant } = $props();
+
+	setToggleGroupVariant(() => variant);
 </script>
 
+<!--
+	THE SEGMENTED WELL IS THE LADDER, not a new set of numbers.
+
+	The group is a control-tier box; its options are one rung down at chip; and
+	the wall between them is chip-inset-control — (h-control − h-chip)/2, the same
+	1/2/3 that centres any chip in any control. Because the gap between options
+	uses that same token, the wall and the gap are one number, which is the
+	even-gap law holding with nothing restated: rd-control − rd-chip is also
+	chip-inset-control, so the options' corners are concentric with the well's
+	for free.
+
+	bg-field, not bg-well: this is the tier a control's CONTENT sits in — the
+	same fill an Input uses — and it is the one that stays visible on flat, where
+	shadow-well resolves to none and a fill is the only edge there is.
+-->
 <ToggleGroup.Root
 	bind:ref
-	class={cn('inline-flex items-center gap-gutter', className)}
+	data-variant={variant}
+	class={cn(toggleGroupVariants({ variant }), className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/ui/toggle-group/toggle-group-root.svelte.d.ts

@@ -1,5 +1,25 @@
+export declare const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        plain: "gap-gutter";
+        segmented: "h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well";
+    };
+}, undefined, "inline-flex items-center", {
+    variant: {
+        plain: "gap-gutter";
+        segmented: "h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        plain: "gap-gutter";
+        segmented: "h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well";
+    };
+}, undefined>>;
 import { ToggleGroup } from 'bits-ui';
 import { type PartProps } from '../../utils/index.js';
-declare const ToggleGroupRoot: import("svelte").Component<PartProps<ToggleGroup.RootProps>, {}, "ref">;
+import { type ToggleGroupVariant } from './context.svelte.js';
+type $$ComponentProps = PartProps<ToggleGroup.RootProps> & {
+    variant?: ToggleGroupVariant;
+};
+declare const ToggleGroupRoot: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type ToggleGroupRoot = ReturnType<typeof ToggleGroupRoot>;
 export default ToggleGroupRoot;

package/package.json

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