Sibling-count Web Component

A web component that allows you to prototype the sibling-count() and sibling-index() functions that are part of the CSS-Values-5 spec. This allows cool things such as https://nerdy.dev/cyclical-radio-group-with-trig-functions-and-grid but without the hard-work of hand-coding the css variables. Here's the CSSWG ticket.

As of March 2025 this feature is being prototyped in Chrome Canary under the "Experimental Web Platform features" flag.

Scripts

• npm run dev - runs the vite dev environment
• npm run build - builds the project with vite build
• npm run local-release - publishes the package to npm (needs One Time Password) after doing all the checks beforehand
• npx changeset - creates a changeset of the latest changes. You can choose if it is a patch, minor, or major change.
• npm run test - runs the tests with vitest in watch mode
• npm run check-test runs the tests

To create a new release

1. run npx changeset this will create a description of the changes, and update the version (patch, minor, or major)
2. run npm run local-release this will run all the checks ahead of doing the release and if it passes, it will create the release on npm. You will need to provide the one-time-password during the process.

Examples

1. https://codepen.io/bigandy/pen/OJovxRW
2. https://stackblitz.com/edit/vitejs-vite-grktabbm?file=src%2FApp.tsx&terminal=dev (with React)

Notes

You can import with esm.sh https://esm.sh/@bigandy/sibling-count and then use in your HTML.

<sibling-count>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</sibling-count>

<ul>
  <li style="--sibling-index: 1; --sibling-count: 10;"></li>
  <li style="--sibling-index: 2; --sibling-count: 10;"></li>
  <li style="--sibling-index: 3; --sibling-count: 10;"></li>
  <li style="--sibling-index: 4; --sibling-count: 10;"></li>
  <li style="--sibling-index: 5; --sibling-count: 10;"></li>
  <li style="--sibling-index: 6; --sibling-count: 10;"></li>
  <li style="--sibling-index: 7; --sibling-count: 10;"></li>
  <li style="--sibling-index: 8; --sibling-count: 10;"></li>
  <li style="--sibling-index: 9; --sibling-count: 10;"></li>
  <li style="--sibling-index: 10; --sibling-count: 10;"></li>
</ul>

and use the following CSS

ul {
  list-style: none;
  padding-left: 0;
  transform: rotate(-90deg);
  width: 500px;
  aspect-ratio: 1;

  li {
    height: 3em;

    background: hsl(
      calc(
          var(--sibling-index, sibling-index()) *
            calc(360 / var(--sibling-count, sibling-count()) * 1deg)
        )
        100% 50%
    );
  }
}

Resulting in this:

Note

If you pass a top-level element with no children, you'll also get a console.warn message. For example:

<sibling-count>
  <p>This paragraph does not contain any children</p>
</sibling-count>

Optional attributes

keepTrackOfUpdates

Should you want the custom element to keep track of updates to the number of children you can use the keep-track-of-updates attribute.

modernOnly

Should you want to force the component to check browser support for sibling-count() with CSS.supports() and not use inline-styles when the browser supports it use the modern-only attribute.

Misc Notes

I converted this package following this tutorial: https://www.totaltypescript.com/how-to-create-an-npm-package