Styleframe Logo
Utility Modifiers

Other State

Create other state modifiers for targeting open and inert elements with full type safety.

Overview

Other state modifiers let you apply utility styles conditionally based on miscellaneous element states. They target elements that are open (like <details> and popovers) or inert (non-interactive), generating variant utility classes for these specific conditions.

Why Use Other State Modifiers?

Other state modifiers help you:

  • Style disclosure widgets: Apply styles to open <details> elements and popovers
  • Handle inert state: Style elements that are non-interactive due to the inert attribute
  • Build accessible patterns: Create visual feedback for native HTML patterns like disclosure and popover

useOpenModifier

The useOpenModifier() function creates a modifier that applies styles to elements that are in an open state. This includes <details> elements with the open attribute and elements using the Popover API.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useRotateUtility, useDisplayUtility, useOpacityUtility } from "@styleframe/theme";
import { useOpenModifier } from "@styleframe/theme";

const s = styleframe();

const open = useOpenModifier(s);

useRotateUtility(s, {
    90: '90deg',
}, [open]);

useOpacityUtility(s, {
    100: '1',
}, [open]);

export default s;

CSS Selector

Modifier NameCSS Selector
open&:is([open], :popover-open)
Pro tip: The open modifier uses :is([open], :popover-open) to match both the <details> element's open attribute and the Popover API's :popover-open pseudo-class, giving you a single modifier for both patterns.

useInertModifier

The useInertModifier() function creates a modifier that applies styles to inert elements and their descendants. The inert HTML attribute makes an element and all its descendants non-interactive and invisible to assistive technology.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useOpacityUtility, usePointerEventsUtility } from "@styleframe/theme";
import { useInertModifier } from "@styleframe/theme";

const s = styleframe();

const inert = useInertModifier(s);

useOpacityUtility(s, {
    50: '0.5',
}, [inert]);

usePointerEventsUtility(s, {
    none: 'none',
}, [inert]);

export default s;

CSS Selector

Modifier NameCSS Selector
inert&:is([inert], [inert] *)
Good to know: The inert modifier targets both the inert element itself and all its descendants using &:is([inert], [inert] *). This ensures that styles are applied consistently throughout the entire inert subtree.

useOtherStateModifiers

The useOtherStateModifiers() function registers all other state modifiers at once and returns them as a destructurable object.

Returned Modifiers

KeyModifier NameCSS Selector
openopen&:is([open], :popover-open)
inertinert&:is([inert], [inert] *)

Examples

Animated Details Element

styleframe.config.ts
import { styleframe } from "styleframe";
import { useRotateUtility, useTransitionDurationUtility } from "@styleframe/theme";
import { useOpenModifier, useMotionSafeModifier } from "@styleframe/theme";

const s = styleframe();

const open = useOpenModifier(s);
const motionSafe = useMotionSafeModifier(s);

useRotateUtility(s, {
    0: '0deg',
    90: '90deg',
}, [open]);

useTransitionDurationUtility(s, {
    200: '200ms',
}, [motionSafe]);

export default s;

Modal with Inert Background

styleframe.config.ts
import { styleframe } from "styleframe";
import { useOpacityUtility, useBlurUtility } from "@styleframe/theme";
import { useInertModifier } from "@styleframe/theme";

const s = styleframe();

const inert = useInertModifier(s);

useOpacityUtility(s, {
    50: '0.5',
}, [inert]);

useBlurUtility(s, {
    sm: '4px',
}, [inert]);

export default s;

Best Practices

  • Use open for native disclosure patterns: Style <details> and popover elements with the open modifier instead of JavaScript class toggling
  • Use inert for background content: When showing modals or dialogs, apply inert to background content for both accessibility and visual dimming
  • Combine with motion modifiers: Use motion-safe with open transitions for accessible animated disclosure widgets
  • Test popover support: The :popover-open pseudo-class is a newer API; verify browser support for your target audience

FAQ

Directional

Create directional modifiers for targeting elements based on text direction (RTL/LTR) with full type safety.

Styleframe Documentation Site

This directory contains the source content for the Styleframe documentation site. It uses Nuxt Content with Markdown files organized into numbered sections. An AI agent working here should understand the site structure, formatting conventions, and content patterns to write or modify documentation pages that are indistinguishable from existing ones.