@chassis-ui/css v0.6.0

Added

• @chassis-ui/css/tailwind/merge.js: the grid classes are now part of the generated tailwind-merge classGroups config, so twMerge('col-6', 'col-4'), twMerge('g-md', 'g-lg'), twMerge('offset-2', 'offset-4'), and the row-cols-*, gx-*, gy-*, g-col-*, g-start-* equivalents resolve to the last class
• Nav: .sm and .lg size modifiers on .nav, for the base nav and the tabs, segments, and underline variants. They scale the link padding, gap, icon size, caret size, and font from Chassis Tokens; segments also scale the bar padding and corner radius, and underline scales the gap between links. Without a modifier the medium size applies
• @chassis-ui/css/postcss: the preset now has type declarations, so a TypeScript PostCSS configuration gets chassisPrefix(), chassisPostcss(), mergeLayerBlocks, and the ChassisPrefixOptions type checked
• package.json is now an export (@chassis-ui/css/package.json), for the tools that read a package's version or fields
• Nav: .nav-link is now a centered flex row with a gap, so an icon placed inside the link aligns with the label and scales with the nav size. New --cx-nav-link-gap, --cx-nav-link-icon-size, --cx-nav-link-caret-size, and --cx-nav-link-caret-spacing custom properties, and --cx-nav-segments-idle-fg-color/--cx-nav-segments-idle-bg-color for the idle segment links

Changed

• Breaking: JavaScript entry: import { Tooltip } from '@chassis-ui/css' now resolves to compiled JavaScript (js/dist/index.js) with type declarations (js/dist/index.d.ts), instead of the TypeScript source (js/index.ts). Node.js could not import the source from node_modules, a bundler had to compile it, and a TypeScript project checked it with its own compiler options: a strict project got 209 errors from 0.5.0. Imports from @chassis-ui/css and from @chassis-ui/css/js/dist/* need no change. @chassis-ui/css/js/src/* is no longer an export; import the module from @chassis-ui/css/js/dist/ instead (js/dist/tooltip.js for js/src/tooltip.ts). js/index.ts moved to js/src/index.ts, so a bundler alias that names the file by its path needs the new path, js/dist/index.js
• Source maps no longer hold a copy of their sources. They name the Sass files in scss/ and the modules in js/src/, which the package ships, so the browser's developer tools show the same source as before when the package is installed from npm or loaded from a CDN that serves the whole package. The installed package is 7.2 MB instead of 14.4 MB. Two kinds of source are not in the package and no longer show: the Chassis Tokens file the CSS is compiled with, and the dependencies inside chassis.bundle.js. A copy of dist/ alone, without scss/ and js/src/ next to it, shows no source
• package.json declares engines.node >=22, the version the PostCSS preset and the Sass build are tested with. The CSS and the JavaScript in the browser are not affected
• Tailwind entry: grid column, offset, gutter, and CSS grid placement classes (col-6, md:col-4, lg:offset-2, g-md, g-col-4, …) are now Tailwind @utility rules, so a Tailwind build only generates the ones a project uses, at the breakpoints it uses them, instead of every class at every breakpoint. Class names are unchanged; grid class names built at runtime need an @source inline(...) safelist entry. The classes sit in a layout sublayer of Tailwind's utilities layer, so utilities still override them at every breakpoint (w-100 md:col-6 stays full width). Two results differ from 0.5.2: with g-* and gx-*/gy-* on one element the axis-specific class now wins (g-md gx-0 has no horizontal gutter), and grid classes now rank above the content, components, and helpers layers instead of below them. dist/css is unaffected
• Sass: the Tailwind entry's mixins moved from scss/mixins/ to scss/tailwind/mixins/, and scss/mixins no longer forwards generate-tailwind-utilities, generate-tailwind-merge-manifest, emit-source-config, or the Tailwind grid mixins. Only affects projects that called these directly from scss/mixins; the documented @chassis-ui/css/scss/tailwind entry is unchanged
• Breaking: Nav: .nav-pills renamed to .nav-segments and .card-header-pills to .card-header-segments, with no aliases; the --cx-nav-pills-* custom properties are now --cx-nav-segments-*. The variant is restyled as a segmented control, with its colors, padding, corner radius, font, and shadow resolved from Chassis Tokens
• Breaking: Nav: the Sass variables are now size-specific. $nav-link-padding-y, $nav-link-padding-x, and $nav-link-font are replaced by $nav-link-{small,medium,large}-*; $nav-tabs-border-width by $nav-tabs-main-border-width; $nav-tabs-border-radius by $nav-tabs-medium-border-radius; $nav-underline-gap by $nav-underline-{small,medium,large}-gap; and every $nav-pills-* variable by a $nav-segments-* one. A @use ... with (...) that configures a removed variable no longer compiles
• Nav: the active link's default colors now resolve from --fg-active/--bg-active (previously --fg-main/--bg-even), and a pressed link (:active) no longer takes the active link's style
• Nav: a .nav-link whose menu is open now keeps its hover style in every variant; .nav-tabs and .nav-pills previously gave it the active style
• Nav: .nav-underline links no longer show the underline on hover and keyboard focus; only the active link is underlined
• Docs: the Nav page is rewritten to the style guide's standard section order, with new sections for size variants, icons, Sass variables, and design tokens

Fixed

• Nav: opening a menu from a toggle placed directly inside a .nav-pills nav, without a .nav-item wrapper, gave every sibling link the active style, because the open state was matched on the toggle's parent. It is now matched on the toggle itself
• Docs: the vertical example on the Tab page used .nav-pills-vertical and .me-4, neither of which exists, so the links never stacked; it now uses .flex-column and .me-md. The Nav page's link to the Tab plugin pointed at an anchor that does not exist
• Types: 16 of the type declarations in js/dist/ were older than their modules, because the build did not write them. NavOverflow's moreText: string | false and the null a Toggler value can hold were missing, among others. The build now writes the declarations with the modules, and a release fails when any file in dist/ or js/dist/ differs from a fresh build

Minor Changes

• b60c264: Breaking: .grid is the grid system of Chassis, with gutters, column counts and container padding from the design tokens per breakpoint. The flexbox grid is deprecated.

  • Placement classes with Tailwind's names and declarations, generated for every breakpoint: col-span-{1…12}, col-span-full, col-start-{1…13}, row-span-{1…6} and row-start-{1…7}, with col-start-auto and row-start-auto to reset a start line at a wider breakpoint. g-col-{n} and g-start-{n} keep working as second selectors of col-span-{n} and col-start-{n}, deprecated. The declaration of g-col-{n} is now grid-column: span n / span n instead of auto / span n: the same placement, unless an element sets grid-column-end itself.
  • The gap of .grid and .grid-fill is the gutter token of the breakpoint, --cx-grid-gutter on :root (0.5rem at xs to 3rem at 2xl, from $grid-gutters), where it was $grid-gutter-x (1.5rem) at every width. --cx-grid-gap on an element still sets the gap of one grid. The tracks are minmax(0, 1fr), so content no longer widens a column. .grid-fill takes --cx-grid-min as the minimum column width.
  • The column count comes from $grid-column-counts (--cx-grid-columns on :root, 12 at every breakpoint until the Figma library defines the counts). grid-cols-{1…12} are utilities with Tailwind's repeat(n, minmax(0, 1fr)); grid-cols-fill is deprecated in favour of col-span-full.
  • The padding of .container is --cx-container-padding from $container-paddings, the page margin per breakpoint, independent of the gutter (0.75rem at every breakpoint, today's value). A --cx-gutter-x set on a container still works until 0.7.0. $container-padding-x is deprecated: when a project sets it, half of it is the padding at every breakpoint, as before, and the build warns.
  • In the Tailwind entry, the placement classes are Tailwind core's own col-span-*, col-start-*, row-span-* and row-start-* utilities: the entry no longer emits grid placement rules of its own, only the deprecated g-col-* and g-start-* aliases, which now carry the declarations of the classes they alias and sit in the utilities layer with them instead of the utilities.layout sublayer. In @chassis-ui/css/tailwind/merge.js the aliases join tailwind-merge's col-start-end and col-start groups, so col-span-4 g-col-6 resolves to one class.
  • Responsive fraction widths w-{1…11}/12 (md:w-6/12), the names and values of Tailwind's w-<fraction>, replace col-{n} used as a width outside a .row, as on skeletons; w-100, w-auto and flex-fill replace col-12, col-auto and col.
  • Deprecated as of 0.6.0, removed in 0.7.0: the flexbox grid (.row, .col-*, .offset-*, .row-cols-*, .g-*, .gx-*, .gy-*), its mixins (make-row(), make-col-ready(), make-col(), make-col-auto(), make-col-offset(), row-cols(), make-grid-columns()) and its variables ($grid-gutter-y, $grid-row-columns, $gutters). The build warns once per compile while $enable-grid-classes is true; set it to false to drop the flexbox grid now, or $enable-deprecation-messages: false to silence the notice. Migrate .row to .grid, .col-4 to .col-span-4, .offset-2 to .col-start-3, .md:offset-0 to .md:col-start-auto, .row-cols-3 to .grid-cols-3, .g-md to .gap-md, .gx-* and .gy-* to .column-gap-* and .row-gap-*.
  • The grid bundle (chassis-grid.css) declares the --cx-space-* custom properties its gap and gutter classes read.

Patch Changes

• e58ef47: Fix the defects the end-to-end tests found in Dialog, Combobox, Menu and Datepicker.

  • Dialog: Escape pressed repeatedly no longer closes a dialog with data-cx-keyboard="false", and a dialog the browser closes by itself releases the scroll lock of the page and fires hidden. A non-modal dialog is centered in the viewport.
  • Combobox: ArrowDown and ArrowUp on a closed menu leave the focus on the first or the last item. Escape in the input closes the menu. Tab on an item moves on to the next control in Safari.
  • Combobox, Menu: the arrow keys wrap at the ends of the list, as documented.
  • Menu: Escape closes the menu when a click left the focus on the page, as Safari does.
  • Datepicker: show, shown, hide and hidden also fire when the calendar opens on a click on its input and closes on Escape or a click outside. The focus returns from the calendar to its trigger when the calendar closes.

• e58ef47: Build the CSS with @chassis-ui/tokens 0.6.0. Half-pixel values keep their full precision: 0.03125rem instead of 0.0313rem in --cx-border-width-sm, --cx-border-width-lg, --cx-box-shadow-sm and the shadows and letter spacing built on them.

• 5c1cbfe: Rebuild the JavaScript with rolldown 1.2.12. The modules run the same code: a nested if now has its braces, and the last case of a switch no longer ends with a break. The minified builds do not change.

• cce6918: Rebuild the minified CSS with lightningcss 1.33, which collapses light-dark() calls whose two values are the same.

• c7e01b9: Build chassis.bundle.js with @floating-ui/dom 1.8.0, which positions a floating element against a scrollbar-gutter: stable viewport and a left-side scrollbar correctly. The peer dependency range stays ^1.7.6.