1.1.0

Released 2026-07-24 · MINOR release — fully backward-compatible, no required code changes except for one documented edge case below.

This release focuses on accessibility, print support, scroll UX, and giving developers direct access to internal design primitives (focus rings, sizing tokens) that were previously hardcoded. See Versioning for how this release fits into the overall SemVer scale.

Added

Responsive Vertical Nav

The Nav component can now switch from a horizontal to a column (is-vertical) layout at a specific breakpoint, using the same mobile-first prefixing covered in Breakpoints.

<nav class="nav md:is-vertical">
  <a href="/" class="nav-link">Home</a>
  <a href="/docs" class="nav-link">Docs</a>
  <a href="/pricing" class="nav-link">Pricing</a>
</nav>

This nav stays horizontal below md and becomes a vertical stack starting at md and up — useful for collapsing a top nav into a sidebar on larger screens, or the reverse depending on which prefix you choose.

Tab Indicator Sizing Token

The Tabview's sliding indicator now exposes --tab-indicator-size, sitting alongside the existing --tab-indicator-color token, so you can resize it without overriding component internals.

.tabview {
  --tab-indicator-color: var(--primary);
  --tab-indicator-size: 3px;
}

Accessibility: Screen-Reader-Only Utilities

.sr-only visually hides an element while keeping it in the accessibility tree. .sr-only-focusable does the same, but reveals the element the moment it (or a child) receives keyboard focus — the standard pattern for skip links.

<a href="#main-content" class="sr-only sr-only-focusable">Skip to main content</a>
<button class="btn">
  <svg aria-hidden="true">...</svg>
  <span class="sr-only">Delete item</span>
</button>

Print Utilities

New @media print helpers let you control what renders when a page is printed, without writing a separate print stylesheet.

<header class="navbar print-hidden">...</header>
<aside class="sidebar print-hidden">...</aside>

<div class="invoice-summary is-hidden print-block">
  <!-- only shows up when the page is printed -->
</div>

A common use case: hiding a navbar and sidebar chrome on an invoice page while forcing a print-only summary block to appear.

Scroll & Snap Controls

A full set of cross-browser scroll utilities, including native CSS scroll snapping — no JS carousel library required for simple cases.

<div class="flex snap-x snap-mandatory scroll-smooth no-scrollbar overflow-x-auto">
  <div class="snap-center shrink-0 w-80">Slide 1</div>
  <div class="snap-center shrink-0 w-80">Slide 2</div>
  <div class="snap-center shrink-0 w-80">Slide 3</div>
</div>

Typography Extras

<span class="tabular-nums">$1,204.50</span>
<h1 class="tracking-tight">Product Launch</h1>
<p class="tracking-wide">SUBSCRIBE NOW</p>

.tabular-nums switches digits to a fixed width so numbers in pricing tables, dashboards, and live counters don't shift the layout as they update. The new tracking utilities (.tracking-tight, .tracking-wide, etc.) give finer letter-spacing control for headlines and all-caps labels.

Layout & Display

<div class="grid grid-cols-3 gap-4">
  <div class="is-contents">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
  <div>Item 3</div>
</div>

.is-contents (display: contents) removes an element from the visual box tree while keeping it in the DOM — useful when a Grid or Flex layout needs its direct children exposed but a wrapper <div> is required for semantic HTML. .isolate (isolation: isolate) creates a new stacking context, handy for scoping z-index inside a component without it leaking into the rest of the page.

Focus Management

The default focus rings baked into components are now available as standalone utilities, so custom interactive elements can match the framework's focus style exactly.

<button class="btn focus-ring">Save</button>
<button class="btn focus-ring-danger">Delete account</button>

Performance

<div class="will-change-transform animate-slide-in">...</div>

.will-change-transform and .will-change-opacity hint the browser to promote an element to its own GPU layer ahead of a heavy custom animation. Apply them only while the animation is active — leaving will-change on permanently can waste memory instead of saving it.

Changed

Internal State Class Standardization

The internal "open" state class used by Dropdown, Collapse, Drawer, Accordion, Tooltip, Popover, and Modal has been standardized from .opened to .is-open, aligning it with the is-* convention already used elsewhere (is-active, is-disabled, is-vertical).

/* Before — 1.0.x */
.opened .dropdown-menu {
  opacity: 1;
}

/* After — 1.1.0 */
.is-open .dropdown-menu {
  opacity: 1;
}

This class is toggled internally by FrontAlign's JS and was never part of the documented configuration API — you control open/close state through the relevant data-* attributes, not by touching this class yourself. As a result:

• No HTML changes are required.
• No attribute or JS API changes are required.
• This is a MINOR release, not a MAJOR one, because the public API is untouched.

The one exception: if you wrote custom CSS that selects .opened directly (e.g. .opened .my-custom-panel), update those selectors to .is-open — this is the only manual step needed to fully adopt 1.1.0.

Removed

Nothing was removed in this release. No utilities, components, tokens, or dependencies were dropped.

Upgrading to 1.1.0

npm install frontalign@1.1.0

Since this is a MINOR release, running the command above is the only required step for the vast majority of projects. Do a quick project-wide search for .opened in your own stylesheets — if nothing matches, you're fully up to date.