Repository navigation
1.6.0
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.orientationdecides which way it runs,lineshow many rows it fills before starting a new column, so one scroll can hold twice as much in the same width, andspacingis the gutter on the same Tailwind scaleGridContaineruses. 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.
modeisitem(withstepfor more than one at a time),page, orhold— which scrolls atspeedpixels 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.buttonsdraws them only when there is somewhere to go, always (with the useless one disabled), or never.buttonPlacementdecides whether they sit over the strip or beside it:inlinestops 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.dragadds a mouse and pen drag to the finger's;snapbrings the nearest child to the leading edge whenever the scrolling stops. FloatingBottomNavigation.BottomNavigationlifted off the page: the same<nav>, the samearia-current, and the sameBottomNavigationItemchildren, which is why the item's context moved tointernal/— two bars provide it and one item reads it. What differs is everything that follows fromoffset, 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,positiongainsabsolutefor a bar that belongs to a region rather than to the window, andlabelsdefaults toselected, 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-currentand animates itsleft,top,widthandheightto the next one, transforming nothing. A name the bar is not drawing is collapsed rather than clipped — the box it sits in runs between0frand1frin 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.osis eight systems, a version being its own entry wherever the title bar is what changed.macosandmacosx(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) andwindowsxp(Luna — the glossy blue caption curve and a band of the same blue down the sides and along the bottom); andlinux, 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 choiceMockup'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.controlsistrue,falseor exactly the buttons named, in the system's order rather than the array's.open,minimizedandmaximizedare 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.draggableandresizablereport throughonOffsetChangeandonResize, withminWidth/minHeightbounding them.activelooks after itself. Left out, a window is in front until anotherWindowPaneon 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.accentdyes the title bar (and, on the systems with one, the band) with the colour family;transparencylets 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,widthandheightare what move — never a transform, so no glyph in the window is resampled on the way — and a window that was never given aheightis measured and pinned for one frame, becauseautois not a length a transition can start from. A rolled-up window keeps its body in the tree,inertand 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:scrollfor the two buttons that are an arrow and nothing else, andwindowfor minimize, maximize, restore and the corner a keyboard resizes with. The × isaction.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 —
ScrollZoneunder Layout,FloatingBottomNavigationunder Inputs,WindowPaneunder Surfaces — with their props rows, fifteen demos, three cards in the component gallery, three new blocks on the sample screen, and their entries inllms.txtand 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
closeLabelfinds a row calledcloseLabel.
Every release is in the changelog on the docs site and in CHANGELOG.md at this tag.