diff --git a/src/assets/styles/ring.styles.ts b/src/assets/styles/ring.styles.ts index f4f576a435..123556a88e 100644 --- a/src/assets/styles/ring.styles.ts +++ b/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"; diff --git a/src/index.ts b/src/index.ts index b980916fc6..0bb7e9e28e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -49,14 +49,17 @@ 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"; @@ -64,6 +67,8 @@ export { default as plugins } from "./plugins"; export { useStyles, cn, + useHighlightRing, + useInvalidRing, useTestAttrs, useThemes, useThemeIcons, diff --git a/src/ui/button-group/ButtonGroup.ce.vue b/src/ui/button-group/ButtonGroup.ce.vue index e70de30e82..b45ea10907 100644 --- a/src/ui/button-group/ButtonGroup.ce.vue +++ b/src/ui/button-group/ButtonGroup.ce.vue @@ -12,8 +12,14 @@