@expressivecss/expressive 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -0,0 +1,127 @@
+# Changelog
+
+Notable changes to ExpressiveCSS. Versions follow [semver](https://semver.org/);
+the format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+
+## [Unreleased]
+
+## [0.6.0] - 2026-08-21
+
+Adds the Material 3 canonical pane layouts and an LLM-oriented Material 3
+guidelines document. No breaking changes.
+
+### Added
+
+- **Panes** (`.panes`, `.list-detail`, `.supporting-pane-layout`, `.pane-layout`,
+  CSS only) — the M3 canonical adaptive layouts. List-detail (360dp list + 1fr
+  detail), supporting pane (1fr primary + 360dp supporting, leading or trailing),
+  equal, and three-pane. Below 840px one pane shows at a time — the first, or the
+  one marked `.active`. The container is an inline-size query container, so a
+  layout nested in a narrow column collapses on its own width rather than the
+  viewport's. Coplanar by default (full-bleed with an `outline-variant` divider)
+  or `.separated` / `.floating` (16dp `surface-container-low` cards, 24dp gap,
+  with per-pane `.elevated` and `.outlined`). Panes have anatomy: a `header` is a
+  64dp title bar, `main` is the scrolling body, `footer` is a 56dp action bar.
+  Sized by `--md-comp-pane-*` tokens.
+- **`m3-guidelines.md`** — a companion to `llm.md` covering Material 3 usage,
+  anatomy, placement, adaptive design, and component behaviors: what to reach for
+  and when, rather than which classes to write.
+- A **Panes** documentation page, and a `Panes` section in `llm.md`.
+
+### Fixed
+
+- Badges anchored to an icon mirrored to the wrong side in RTL. The badge is
+  positioned with logical `inset-inline-end`, but the `translate(50%, -50%)` that
+  centres it on the icon corner is physical, so it pushed the badge inward. It is
+  now negated under `:dir(rtl)`.
+
+## [0.5.0] - 2026-08-19
+
+The release that finishes moving the vendored Materialize surface onto Material
+Design 3 Expressive. Components with no M3 counterpart are gone, several were
+renamed to their M3 names, and the color layer now carries the full role set.
+Pre-1.0, so the breaking changes below are not gated behind a deprecation cycle
+— but every retired docs URL still 301s to its replacement.
+
+### Added
+
+- **Menu** (`Menu`, `.menu-trigger` + `<menu>`) — M3 vertical menus, replacing
+  `Dropdown`. Nested flyout submenus, a selected-item state, a vibrant color
+  mode, and per-menu sizing.
+- **Navigation bar** (`.navigation-bar`, CSS only) and **navigation rail**
+  (`NavigationRail`, `.navigation-rail`, auto-inits) — compact and medium/large
+  navigation, with stacked, horizontal, collapsed, expanded, and modal layouts.
+- **Bottom sheets** (`.bottom-sheet`, started by `BottomSheets.Init()`) — modal
+  and standard variants with drag-to-dismiss; 28dp top corners, 640dp max width.
+- **Side sheets** (`.side-sheet`, started by `SideSheets.Init()`) — modal and
+  standard variants, 400px wide, drag-to-dismiss from the header or the inner
+  24dp edge.
+- **Lists** (`.list`) — standard and segmented variants, replacing `.collection`.
+- **Dialogs** — basic and full-screen variants on native `<dialog>`, on M3 tokens
+  (`surface-container-high`, `on-surface-variant`).
+- **Snackbar** (`Snackbar`) — `Toast` under its M3 name, with a reworked options
+  object: `snackbarId` replaces `toastId`, `displayLength` accepts `Infinity` to
+  stay until the user acts, and defaults to 10000 when an `action` is set.
+- **Widescreen layout** — an `xxlarge` breakpoint at 1601px, the `.xxl` grid
+  prefix, wider container caps (1920px at `xxlarge`, `.container.wide` 2400px,
+  `.container.max` uncapped), and `.hide-on-xxl-only` / `.show-on-xxl`.
+- **Slider variants** — `.centered` (active track grows from the midpoint),
+  dual-handle ranges in one host, sizes `.s` / `.m` / `.l` / `.xl`, `.stops`
+  discrete ticks, and an optional inset leading icon.
+- **M3 Expressive color roles** — the surface containers
+  (`surface-container-lowest` … `surface-container-highest`), `surface-dim`,
+  `surface-bright`, the fixed roles, and `outline-variant`. Utility classes are
+  generated from the role list, so every role has both `.role` (fill) and
+  `.role-text` (foreground).
+- **Badges** — M3 anatomy: a 6dp dot and a 16dp stadium with a label, positioned
+  against navigation, list, and sidenav icons.
+
+### Changed
+
+- **Breaking:** `Autocomplete`'s `menuOptions.onItemClick` now receives the clicked
+  `li` and is called on the `Menu` instance, matching the documented `MenuOptions`
+  contract. It previously received the autocomplete's `<input>` element, so a
+  handler written against the documented signature got the wrong node. Handlers
+  that used the argument need updating; handlers that ignored it are unaffected.
+- App bars separate from the body on scroll with a `surface-container` fill
+  instead of elevation, interpolated through the new
+  `--md-comp-top-app-bar-scrolled-container-color`.
+- The sidenav trigger stays visible at every breakpoint; it used to be hidden at
+  `large`, which left an M3 app bar with no leading navigation control.
+- Collapsible sections inside the sidenav are now `<details>` / `<summary>`.
+- Components were repointed at accurate M3 container roles rather than
+  `surface-variant` aliases, which is what fixes their dark-mode contrast.
+- **Breaking for direct Sass importers:** component partials were renamed to
+  match the components they now hold — `components/_modal.scss` →
+  `_dialog.scss`, `_dropdown.scss` → `_menu.scss`, `_collection.scss` →
+  `_list.scss`, `_toast.scss` → `_snackbar.scss`. `_collapsible.scss`,
+  `_pushpin.scss`, and `_tapTarget.scss` are gone. Only code that `@use`s a
+  partial by path is affected — the renames themselves change nothing about the
+  compiled CSS, and importing `expressive.scss` still pulls in everything.
+- Retired docs routes 301 to their replacements: `/dropdown` → `/menu`,
+  `/collections` → `/lists`, `/modals` → `/dialogs`, `/toasts` → `/snackbar`,
+  `/range` → `/sliders`, `/collapsible` → `/sidenav`,
+  `/feature-discovery` is gone.
+
+### Removed
+
+Every entry here is breaking. The replacement is named where there is one; there
+are no compatibility aliases.
+
+- `Dropdown` and `.dropdown-trigger` / `.dropdown-content` — use `Menu` and
+  `.menu-trigger`.
+- `Toast` — use `Snackbar`.
+- `.collection` and its modifiers — use `.list`.
+- `Collapsible` and `.collapsible` — use native `<details>` / `<summary>`.
+- `Pushpin` and `.pushpin` / `.pin-*` — use `position: sticky`.
+- Feature Discovery (`TapTarget`, `.tap-target`). It is not an M3 component.
+- `.modal` and its modifiers — dialogs are native `<dialog>` elements.
+- `dialog.top` / `dialog.top-sheet`. M3 has no top sheet; use a side sheet or a
+  bottom sheet. The unused `--md-comp-basic-dialog-sheet-width` token is gone
+  with them.
+- `.tabs` nested in a header or app bar as a secondary row. `.tabs` is a
+  standalone component; the `.tabs.transparent` app bar variant is gone with it.
+
+[Unreleased]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.6.0...HEAD
+[0.6.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.5.0...v0.6.0
+[0.5.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.4.0...v0.5.0

package/README.md

@@ -4,7 +4,7 @@ ExpressiveCSS is a Material Design 3 front-end framework built with Sass and
 TypeScript. It provides theme tokens, layout and utility classes, styled form
 controls, and JavaScript components in browser, ES module, and CommonJS builds.
 
-> ExpressiveCSS is currently at version `0.4.0` and under active development.
+> ExpressiveCSS is currently at version `0.6.0` and under active development.
 
 ## Features
 
@@ -12,8 +12,8 @@ controls, and JavaScript components in browser, ES module, and CommonJS builds.
 - Light and dark themes using CSS custom properties
 - Responsive grid and utility classes
 - Buttons, cards, forms, navigation, and other styled components
-- Interactive components including carousels, collapsibles, date pickers,
-  dropdowns, side navigation, tabs, tooltips, and more
+- Interactive components including carousels, date pickers, menus,
+  side navigation, tabs, tooltips, and more
 - ES module, CommonJS, browser IIFE, CSS, and TypeScript declaration outputs
 - Automatic component initialization with an opt-out mechanism
 
@@ -62,12 +62,7 @@ after the page has loaded:
 ```html
 <link rel="stylesheet" href="dist/css/expressive.min.css">
 
-<div class="collapsible">
-  <details name="intro">
-    <summary>Details</summary>
-    <p>ExpressiveCSS is ready.</p>
-  </details>
-</div>
+<a class="button tooltipped" data-tooltip="ExpressiveCSS is ready.">Hover</a>
 
 <script src="dist/js/expressive.min.js"></script>
 <script>