feat(FE-2977): table primitives, Sheet, ToggleGroup, and the ring utilities

src/assets/styles/ring.styles.ts

@@ -17,5 +17,12 @@ export const groupRingClasses = `${ringClasses} ${groupFocusRing}`;
 export const invalidRingClasses =
   "aria-invalid:outline-[var(--color-danger-ring)]!";
 
+// The always-on counterpart: a surface in a deliberate mode, not one reporting a
+// fault, so primary rather than danger and unconditional rather than state-gated.
+// It carries its own width and offset because nothing has to be reserved — the
+// outline appears and disappears without moving a pixel of the surface it rings.
+export const highlightRingClasses =
+  "outline outline-2 outline-offset-4 outline-[var(--color-primary-default)]";
+
 // Persistent ring (always shown, not just on focus)
 export const persistentRing = "ring-2 ring-control-ring";

src/index.ts

@@ -49,21 +49,26 @@ export * from "./ui/select";
 export * from "./ui/select-cards";
 export * from "./ui/search";
 export * from "./ui/separator";
+export * from "./ui/sheet";
 export * from "./ui/skeleton";
 export * from "./ui/sonner";
 export * from "./ui/spinner";
 export * from "./ui/stepper";
 export * from "./ui/switch";
-export * from "./ui/tabs";
+export * from "./ui/table";
 export * from "./ui/tabs";
 export * from "./ui/textarea";
+export * from "./ui/toggle";
+export * from "./ui/toggle-group";
 export * from "./ui/tooltip";
 
 export { default as plugins } from "./plugins";
 
 export {
   useStyles,
   cn,
+  useHighlightRing,
+  useInvalidRing,
   useTestAttrs,
   useThemes,
   useThemeIcons,

src/ui/button-group/ButtonGroup.ce.vue

@@ -12,8 +12,14 @@
         <Button
           v-if="item.type === ButtonGroup.Button"
           v-bind="item.props"
-          :class="styles.buttonGroup.button"
-          size="lg"
+          :class="
+            cn(
+              styles.buttonGroup.button,
+              item.active && styles.buttonGroup.active
+            )
+          "
+          :size="size"
+          :aria-pressed="item.active"
           :disabled="disabled || item.props.disabled"
           variant="ghost"
           :ring="false"
@@ -25,7 +31,7 @@
           v-bind="item.props"
           :class="styles.buttonGroup.button"
           :ring="false"
-          size="lg"
+          :size="size"
           variant="ghost"
           :to="to"
           @update:modelValue="item.handler?.($event)"

src/ui/button-group/__tests__/button-group.test.ts

@@ -0,0 +1,81 @@
+/**
+ * @module ui/button-group/__tests__/button-group
+ * @description The composed `ButtonGroup`'s selected-position contract: an item
+ * declared `active` announces itself pressed, so a group standing in for a
+ * single-select control says which position it is on rather than only looking
+ * like it.
+ */
+
+import { mount, type VueWrapper } from "@vue/test-utils";
+import { describe, it, expect, afterEach, beforeAll, vi } from "vitest";
+import { ButtonGroup as ButtonGroupTypes } from "../types";
+import { map } from "lodash-es";
+import type { ButtonGroupItem } from "../types";
+
+const POSITIONS = ["All", "Yes", "No"];
+
+const items = (activeIndex?: number): ButtonGroupItem[] =>
+  map(POSITIONS, (label, index) => ({
+    type: ButtonGroupTypes.Button,
+    active: index === activeIndex,
+    props: { label }
+  }));
+
+let barrel: typeof import("../../../index");
+
+beforeAll(async () => {
+  HTMLCanvasElement.prototype.getContext = (() => ({
+    fillStyle: "",
+    fillRect: () => {}
+  })) as unknown as typeof HTMLCanvasElement.prototype.getContext;
+
+  barrel = await import("../../../index");
+});
+
+describe("button-group", () => {
+  let wrapper: VueWrapper | undefined;
+
+  afterEach(() => {
+    wrapper?.unmount();
+    wrapper = undefined;
+  });
+
+  const pressedStates = () =>
+    map(wrapper?.findAll("button") ?? [], node =>
+      node.attributes("aria-pressed")
+    );
+
+  it("draws one position per declared item, labelled from the item", () => {
+    wrapper = mount(barrel.ButtonGroup, { props: { items: items(1) } });
+
+    expect(map(wrapper.findAll("button"), node => node.text())).toEqual(
+      POSITIONS
+    );
+  });
+
+  it("announces the active item as pressed, and every other as not", () => {
+    wrapper = mount(barrel.ButtonGroup, { props: { items: items(1) } });
+
+    expect(pressedStates()).toEqual(["false", "true", "false"]);
+  });
+
+  it("announces no position pressed when no item is active", () => {
+    wrapper = mount(barrel.ButtonGroup, { props: { items: items() } });
+
+    expect(pressedStates()).toEqual(["false", "false", "false"]);
+  });
+
+  it("invokes only the pressed item's own handler", async () => {
+    const yes = vi.fn();
+    const no = vi.fn();
+    const declared = items(0);
+    declared[1].handler = yes;
+    declared[2].handler = no;
+
+    wrapper = mount(barrel.ButtonGroup, { props: { items: declared } });
+    await wrapper.findAll("button")[1].trigger("click");
+
+    expect(yes).toHaveBeenCalledTimes(1);
+    expect(no).not.toHaveBeenCalled();
+  });
+});

src/ui/button-group/buttonGroup.config.ts

@@ -2,16 +2,32 @@
 import { cva } from "class-variance-authority";
 import { focusWithinRing } from "../../assets/styles";
 
+/**
+ * `Button`'s own interactive selector, verbatim from `button.config`'s
+ * compound variants. Repeated here so `tailwind-merge` sees the SAME modifier
+ * and drops the ghost hover background — without it the ghost's light hover
+ * outranks the pressed fill and the active segment washes out on hover/focus.
+ */
+const interactive =
+  "&:hover:not(:disabled),&:focus-within:not(:disabled),&[data-hover=true]:not([data-disabled=true]),&[data-focus=true]:not([data-disabled=true])";
+
 export const rootVariants = cva(
   `control-radius divide-border-control-default shadow-control-default bg-control-surface [&:hover,&:focus-within]:shadow-control-hover flex divide-x overflow-hidden ${focusWithinRing}`
 );
 
-export const buttonVariants = cva("control-radius px-3 py-1");
+export const itemVariants = cva("px-1 py-1 leading-none");
+
+export const buttonVariants = cva("control-radius");
+
+export const activeVariants = cva(
+  `bg-control-checked text-control-checked-contrast shadow-control-checked [${interactive}]:bg-control-checked-hover`
+);
 
 export default {
   buttonGroup: {
     root: rootVariants,
-    item: cva("px-1 py-1 leading-none"),
-    button: buttonVariants
+    item: itemVariants,
+    button: buttonVariants,
+    active: activeVariants
   }
 };

src/ui/button-group/types.ts

@@ -6,6 +6,7 @@ import type { HTMLAttributes } from "vue";
 export type ButtonGroupItem = ButtonGroupButtonItem | ButtonGroupDropdownItem;
 export type ButtonGroupProps = {
   items: ButtonGroupItem[];
+  size?: Exclude<ButtonProps["size"], "icon">;
   disabled?: boolean;
   to?: string;
   uiConfig?: { buttonGroup: CxOptions };

src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -8,6 +8,7 @@ import {
   useForwardPropsEmits
 } from "radix-vue";
 import { type HTMLAttributes, computed } from "vue";
+import { checkboxVariants } from "../checkbox-group/checkboxGroup.config";
 import { cn } from "../../utils";
 
 const props = defineProps<
@@ -29,14 +30,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+        'group data-highlighted:bg-button-ghost-hover relative flex cursor-pointer items-center gap-2 rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
         props.class
       )
     "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span :class="checkboxVariants()">
       <DropdownMenuItemIndicator>
-        <Check class="h-4 w-4" />
+        <Check class="text-control-checked-contrast h-3 w-3" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />

src/ui/dropdown-menu/DropdownMenuContent.vue

@@ -40,7 +40,7 @@ const portalTo = usePortalTarget(() => props.to);
       v-bind="forwarded"
       :class="
         cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 rounded-lg p-1',
+          'bg-control-surface text-display data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 rounded-lg p-1',
           props.class,
           persistentRing
         )

src/ui/form/FormControl.vue

@@ -8,7 +8,7 @@
         : `${props.formDescriptionId} ${props.formMessageId}`
     "
     :aria-invalid="!!props.invalid"
-    class="w-full"
+    :class="cn('w-full', props.class)"
     v-bind="attributesToRemove"
   >
     <slot />
@@ -19,8 +19,9 @@
 import { useIntersectionObserver } from "@vueuse/core"; // or '@vueuse/integrations' in some setups
 import { Slot } from "radix-vue";
 import { ref, computed, watch } from "vue";
+import { cn } from "../../utils";
 import { first, isFunction } from "lodash-es";
-import type { ComponentPublicInstance } from "vue";
+import type { ComponentPublicInstance, HTMLAttributes } from "vue";
 // -----------------------------------------------------------------------------
 
 const props = defineProps<{
@@ -29,6 +30,7 @@ const props = defineProps<{
   formMessageId?: string;
   invalid?: boolean;
   autoFocus?: boolean;
+  class?: HTMLAttributes["class"];
 }>();
 // -----------------------------------------------------------------------------
 

src/ui/form/FormField.vue

@@ -8,8 +8,12 @@
   >
     <slot name="field">
       <!-- label -->
-      <div class="flex w-full flex-col gap-1">
-        <FormLabel v-if="meta.hasLabel" :formItemId="id">
+      <div :class="styles.form.field">
+        <FormLabel
+          v-if="meta.hasLabel"
+          :formItemId="id"
+          :class="styles.form.label"
+        >
           <slot name="label" :label="label">
             <span class="inline-flex w-full items-center gap-x-2">
               <slot v-if="props.icon" name="icon">
@@ -42,7 +46,7 @@
               </Tooltip>
 
               <FormNotRequiredIndicator
-                v-if="!meta.isRequired"
+                v-if="meta.hasOptionalIndicator"
                 :formItemId="id"
                 class="ml-auto"
                 :text="props.optionalText"
@@ -54,6 +58,7 @@
         <!-- input -->
         <FormControl
           :key="props.id"
+          :class="styles.form.control"
           :invalid="meta.isInvalid"
           :disabled="props.disabled"
           :required="props.required"
@@ -92,6 +97,7 @@
 import { ref, computed, useSlots } from "vue";
 import { Icon } from "../icon";
 import { Tooltip } from "../tooltip";
+import config from "./form.config";
 import {
   FormItem,
   FormLabel,
@@ -101,7 +107,7 @@ import {
   FormDescription,
   FormMessage
 } from ".";
-import { cn, useTestAttrs } from "../../utils";
+import { useStyles, cn, useTestAttrs } from "../../utils";
 import { isEmpty, isNil, some, kebabCase } from "lodash-es";
 import type { FormControlProps } from "./types";
 // -----------------------------------------------------------------------------
@@ -145,6 +151,7 @@ const meta = computed(
     isRequired: boolean;
     isVisible: boolean | null;
     isDisabled: boolean;
+    hasOptionalIndicator: boolean;
     hasDescription: boolean;
     hasLabel: boolean;
     hasFeedback: boolean;
@@ -164,6 +171,10 @@ const meta = computed(
     isRequired: props.required,
     isVisible: isNil(props.visible) || props.visible,
     isDisabled: props.disabled,
+    // An EMPTY `optionalText` is the caller saying this field's optionality
+    // needs no indicator — a form whose every control is optional by nature
+    // reads as noise with one on each. Undefined still draws the default text.
+    hasOptionalIndicator: !props.required && props.optionalText !== "",
     hasDescription: !isEmpty(props.description),
     hasLabel: (!isEmpty(props.label) || some(slots, "label")) && !props.noLabel,
     hasFeedback:
@@ -173,6 +184,8 @@ const meta = computed(
   })
 );
 
+const styles = useStyles(["form"], meta, config, props.uiConfig ?? {});
+
 const testAttrs = useTestAttrs({
   key: "form-item",
   value: [kebabCase(props.name), props.id]

src/ui/form/form.config.ts

@@ -37,6 +37,9 @@ export default {
       }
     }),
     description: cva("text-muted w-full text-sm font-normal"),
+    field: cva("flex w-full flex-col gap-1"),
+    label: cva(""),
+    control: cva(""),
     actions: cva("flex w-full flex-wrap gap-2 transition-all duration-200", {
       variants: {
         disabled: {

src/ui/form/types.ts

@@ -112,10 +112,13 @@ export type FormControlProps = InputProps & {
   uiConfig?: {
     input?: CxOptions;
     form?: {
-      root: CxOptions;
-      loading: CxOptions;
-      content: CxOptions;
-      actions: CxOptions;
+      root?: CxOptions;
+      loading?: CxOptions;
+      content?: CxOptions;
+      actions?: CxOptions;
+      field?: CxOptions;
+      label?: CxOptions;
+      control?: CxOptions;
     };
   };
   class?: HTMLAttributes["class"];

src/ui/select/select.config.ts

@@ -14,6 +14,7 @@ export const variants = {
     full: "w-full"
   },
   size: {
+    sm: "text-sm",
     md: "text-sm",
     lg: "text-md"
   },