# Focus Siblings (Moonarc) A group whose item pointed at or focused stays as it is while its siblings step back: dimmed, and a little smaller or softer if you ask. One :has() rule on the group reads which child is pointed at, so the items are the group's own children, whatever they are: cards, rows of a list, portraits. The pointer counts only on a screen that can hover, since a tap leaves :hover behind; a focus ring from the keyboard counts everywhere, and a click's focus does not. Zero JavaScript. - Import: `import FocusSiblings from '@moonarc/core/FocusSiblings'` - Install: `npx astro add moonarc` · copy-paste: `npx shadcn@latest add https://moonarc.dev/r/focus-siblings.json` - Tier A · category pointer · trigger hover, pointer - Readout: `…` - Browser support: widely (Chrome 105 · Firefox 121 · Safari 15.4); elsewhere: without :has() every item stays as it is - Measured cost: 0 B JS (CSS 4.9 kB raw) - Page: https://moonarc.dev/components/focus-siblings/ ## Props | Prop | Type | Default | Description | |---|---|---|---| | `as` | `'div' | 'ul' | 'ol'` | `'div'` | The group's element: a list when its children are

``` ## Reduced motion The others still dim, at once and without shrinking. ## With ClientRouter No script: it works on any page however it was reached. ## Craft - The rule is :has(> :hover) > :not(:hover) on the group, inside :where(), so a class on an item overrides it without a fight. - The pointer rule sits under (hover: hover): on a phone a tap would leave the item it hit hovered and the rest dimmed until the next tap. - The keyboard rule reads :focus-visible anywhere in the group, so a link inside a card counts, and a mouse click's focus does not dim the rest. - A dimmed item stays where it is and keeps its size by default: the step back is opacity, which moves nothing around it. - Opacity lowers the contrast of the text it dims, and axe reports it while an item is pointed at: for cards of text, grey={1} with dim={1} steps the others back in grey and keeps every line at its contrast. ## Replaces - Focus Cards (Aceternity) - Hover focus (Animata) - Focus list (React Bits) ## Source ```astro --- /** * FocusSiblings — a group whose item pointed at or focused stays as it is while its siblings step back: dimmed, and * a little smaller or softer if you ask. One :has() rule on the group reads which child is pointed at; the items are * the group's own children, whatever they are (cards, rows, list items). The pointer only counts on a screen that can * hover; the keyboard's focus counts everywhere. Dimmed text loses contrast while it is dimmed; `grey` steps the * others back in grey at full opacity instead, which keeps it. Zero JavaScript. */ import type { HTMLAttributes } from 'astro/types'; interface Props extends HTMLAttributes<'div'> { /** The group's element: a list when its children are

. */ as?: 'div' | 'ul' | 'ol'; /** The opacity of the items stepped back, 0 to 1. */ dim?: number; /** How far they blur, a CSS length: '0px' for none. */ blur?: string; /** How far they shrink, 1 for not at all. */ scale?: number; /** How far they turn grey, 0 to 1: a step back that keeps the text's contrast, where `dim` lowers it. */ grey?: number; /** A name for the group, when it is a list a screen reader should name. */ label?: string; } const { as: Tag = 'div', dim = 0.4, blur = '0px', scale = 1, grey = 0, label, class: className, style, ...rest } = Astro.props; const vars = [`--ma-fsib-dim:${dim}`, `--ma-fsib-blur:${blur}`, `--ma-fsib-scale:${scale}`, `--ma-fsib-grey:${grey}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';'); --- ```