Skip to content

1.6.0

Choose a tag to compare

@github-actions github-actions released this 29 Sep 01:48
· 1058 commits to main since this release

Added

  • ScrollZone. A strip of anything laid out in one direction and scrolled in it — a rail of cards, a row of chips, a column of rows. orientation decides which way it runs, lines how many rows it fills before starting a new column, so one scroll can hold twice as much in the same width, and spacing is the gutter on the same Tailwind scale GridContainer uses. The mechanism underneath is an ordinary scroll container, which is the whole design: touch, the wheel, the scrollbar and the arrow keys are the browser's own, nothing is transformed, and the strip runs the other way under RTL without being told.
  • What a press of its buttons does is a prop. mode is item (with step for more than one at a time), page, or hold — which scrolls at speed pixels a second for as long as the button is down, and falls back to one item on a press too short to be a hold, so a quick tap is never a dead press. buttons draws them only when there is somewhere to go, always (with the useless one disabled), or never. buttonPlacement decides whether they sit over the strip or beside it: inline stops the scroller where the button starts, so an item is cut off at its edge rather than sliding under it, and the lane is kept even while that button has nowhere to go. drag adds a mouse and pen drag to the finger's; snap brings the nearest child to the leading edge whenever the scrolling stops.
  • FloatingBottomNavigation. BottomNavigation lifted off the page: the same <nav>, the same aria-current, and the same BottomNavigationItem children, which is why the item's context moved to internal/ — two bars provide it and one item reads it. What differs is everything that follows from offset, the gap it floats above the bottom edge: the sheet is a stadium rather than a bar with two corners, it is only as wide as its destinations, it carries a shadow, position gains absolute for a bar that belongs to a region rather than to the window, and labels defaults to selected, because five drawn names would stretch it back into a bar.
  • Its highlight belongs to the bar rather than to the destination that is current, which is what gives it a position to travel: it is measured off whichever item carries aria-current and animates its left, top, width and height to the next one, transforming nothing. A name the bar is not drawing is collapsed rather than clipped — the box it sits in runs between 0fr and 1fr in both axes — so pressing a destination re-shapes the bar around it: the name grows, its neighbours move over, and the highlight slides under it on one clock.
  • WindowPane. Anything at all, drawn the way an operating system draws a window. It is not a real window and does not pretend to be one — there is no desktop and no z-order — but the frame behaves: the title bar drags, all four edges and all four corners resize, and the three buttons are real buttons with real names, so a screenshot, a feature demo or a piece of a landing page can be shown as the thing it will be rather than as a picture of it.
  • os is eight systems, a version being its own entry wherever the title bar is what changed. macos and macosx (Aqua — a short striped bar, glossy lights, a bold embossed title); windows11 (rounded corners, bar and body one Mica sheet), windows10 (square, white, ruled off from the body), windows8 (flat, with a band of colour around the whole window), windows7 (Aero — a sheet of glass with the content sunk into it and the page blurred through the band as well as the caption) and windowsxp (Luna — the glossy blue caption curve and a band of the same blue down the sides and along the bottom); and linux, a GNOME header bar. The older systems paint their own chrome rather than the page's, so Luna stays blue and Aqua stays grey on a page switched to dark — the choice Mockup's finishes already make. Nothing here is a copy of anything: a minimize is a line, a maximize is a box, a close is a cross, and no mark, wordmark or icon belonging to anyone else is drawn.
  • controls is true, false or exactly the buttons named, in the system's order rather than the array's. open, minimized and maximized are each a controlled/uncontrolled pair: closing an uncontrolled window renders nothing, minimizing rolls it up to its title bar — a page has no dock to send it to — and maximizing fills whatever is holding the window. draggable and resizable report through onOffsetChange and onResize, with minWidth/minHeight bounding them.
  • active looks after itself. Left out, a window is in front until another WindowPane on the page is pressed or takes the focus; a press on the page around the windows changes nothing, because a paragraph is not a desktop. Being in front is drawn the way each system draws it — coloured traffic lights, an accent title bar and border on Windows 10, a tinted header bar on GNOME — and on all of them it is one step more shadow than the windows behind. accent dyes the title bar (and, on the systems with one, the band) with the colour family; transparency lets the page through the chrome and turns the acrylic on with it, never touching the content on top.
  • Maximizing, restoring and rolling up are journeys rather than cuts. left, top, width and height are what move — never a transform, so no glyph in the window is resampled on the way — and a window that was never given a height is measured and pinned for one frame, because auto is not a length a transition can start from. A rolled-up window keeps its body in the tree, inert and clipped; a closed one fades before it goes; a reader who has asked for reduced motion gets every one of them instantly.
  • Two new namespaces in src/internal/i18n.ts, translated into all eighteen locales: scroll for the two buttons that are an arrow and nothing else, and window for minimize, maximize, restore and the corner a keyboard resizes with. The × is action.close, which every other close button in the library already reads.
  • --neba-duration-window — 240ms, longer than a control's 160ms because what is travelling is the whole sheet rather than a colour on one. Nothing but a window may use it.

Documentation

  • Three component pages in both locales — ScrollZone under Layout, FloatingBottomNavigation under Inputs, WindowPane under Surfaces — with their props rows, fifteen demos, three cards in the component gallery, three new blocks on the sample screen, and their entries in llms.txt and the README.
  • The props table's name column wraps at spaces and never inside a word, which is the arrangement the type column already made with the pipes in its unions. One row of five names had been setting the width of a forty-row table; the five are their own rows now, so a reader looking for closeLabel finds a row called closeLabel.

Every release is in the changelog on the docs site and in CHANGELOG.md at this tag.