0.2.2 alpha

• Tag. A tag can now be pressed to open something about what it names, such as a small card about a person. Give it onClick, or make it a popover's opener, and it becomes a button in the tag's own shape, with hover, pressed and focus looks. A tag that can be removed can't also be pressed.
• Link. A piece of text can now open something where it stands, such as a name that opens its card, with as="button". The words keep the color and size of the text around them and break across lines with it, the link's underline says they can be pressed, and a screen reader hears a button. Give them onClick, or make them a popover's opener.
• Tag. A tag can show a picture of your own before its words, such as an inline SVG, in the icon's place and at the icon's size. Pass it as leadingContent.
• Table. A row can be marked as the current one, such as the plan in use, in a table with or without checkboxes. It takes the chosen row's fill, and screen readers hear that it is current. Give the row current: true, and say it in words in the row too.
• Table. A whole row can now be pressed to open something, with href for a link or onClick for an action. A real link stays a real link, so opening in a new tab works from anywhere on the row. A checkbox, a button or anything else in the row still does only its own job, and the keyboard reaches the row as one stop, with a ring round it that moves no column. Mark the row current while what it opened is open, and it keeps the chosen row's fill. A table that doesn't use it stays as it was.
• Table. A new flat look for a small table inside a card, with look="flat". It has no frame and no shaded heading row, a thin rule over every row and no room at the sides, so the table's words line up with the card's own. Its rows are one line of text high. A long table with sticking headings, or a wide one with its first column held, keeps the framed look, which stays the default.
• Table. A row's details can now open from a button of your own in one of its cells, such as a count that opens the list it counts, with detailTrigger="cell". The table then draws no arrow at the start of the rows and keeps no room for one. Give the table an id and keep the open rows in expanded; tableDetailId gives each details row's id, so your button can say what it opens and whether it is open.
• Table. A long table can now keep its heading row in view while the page itself scrolls, with page-sticky-header. The table needs no height of its own, so the page keeps one scroll and the mouse wheel always moves the page. The heading row stays under the room the page keeps clear at its top for a fixed bar (its scroll-padding-top), and the table's foot stays at the bottom of the window, until the table ends. The table still scrolls sideways, its headings with it, and a sort pressed far down the table leaves the page where it is. Use it in place of a long table in a frame lower than the window.
• Table. A column can now be given a width, and the table then keeps all its columns where they are while its rows change, through a filter, pages, a search or a row opening. Give a column width: a share of the table, a size token, or rest for the room the others leave. Long text wraps inside its column. On a narrow screen the table stops at a least width and scrolls sideways; choose it with minWidth. A table that gives no column a width doesn't change.
• Table. A new filled look for a calmer table on the page, with look="filled". The heading row and the foot sit on a soft fill with no lines between the headings, group rows are sunken and low, and a column that is not sorted shows its arrow only under the pointer or the keyboard. The foot grows with what it holds, and the look works with every other table option, including long tables and a pinned first column.
• Table. A column can now be headed by a block taller than one line, such as a name, a line of facts and its own buttons, with tallHeader. The heading row grows to the tallest heading, and the other headings keep their one line. A block can hold buttons, so in such a heading the arrow alone sorts. In a long table, whatever gets focus lands clear of the heading, and a heading that would take more than half of what shows scrolls away with the rows.
• Table. One table can now sit tighter than the page around it, with density="compact". Its rows, heading row and foot step down together, with the pagination and tags in them, and nothing else on the page changes. In plain HTML, set data-density="compact" on the table's frame.
• Table. Every cell can now start at the top of its row instead of in its middle, with align-top, for cells of very different heights. Each cell's first line stands level with the others, so a figure stays beside the name it belongs to, in a phone's held first column too. A row of one line looks the same either way.
• Popover. A popover can now also open while the pointer rests on its opener, for a card that previews what a name or a tag points at, with openOnHover. It waits as long as a tooltip does, stays while the pointer moves into it and closes a moment after the pointer has left both. It leaves keyboard focus where it is. A press, the keyboard and touch open it as before, and without the switch nothing changes.
• Popover. A popover can now open from a button it does not draw, such as a table row's own, with openerId. The panel hangs on that button and gives focus back to it, and a press on the button closes what it opened. Use hangOnId to hang the panel on something else, such as the name in a row.
• Table. A press on a row can now open a popover with no button of your own, so the row stays one Tab stop. Give the popover the row's button with tableRowPressId, and Escape puts focus back on the row, a press on a held first column included.
• Popover. A popover can now open to the left or right of its opener as well as below or above it, with side="left" or side="right". Without room on either side, as on a phone, it opens below.
• Popover. A popover can now point at what opened it, with pointer: a small triangle on the edge facing the opener, on whichever side it opened. Without the switch nothing changes.
• Cockpit chart colors. A second set of data colors, calmer and less bright, for dashboards and tools people read for long stretches. Set data-palette="cockpit" on <html> and every chart color changes, in light and dark. Without it, nothing changes.
• Status colors for chart marks. Good, warning and bad, for a mark that shows a real state, such as a bar over its limit. They are calmer than the alert colors, which stay for badges, banners, icons and text, and they never match a series color.

• Section heading. The gap between the title and the line under it is now 8, one step smaller than the 16 it was, as the design system's Figma component now draws it. Every page that uses a section heading, and anything that holds one such as a collapsible section, gets a little tighter between the two. The space between the heading and its action in a narrow space stays as it was.
• Link. The underline sits further below the words and is much quieter at rest, in both themes, so it no longer reads nearly as strong as the words. It grows stronger under the pointer and strongest while pressed. Your own links can draw the same line with the design tokens --smbk-color-text-link-underline, its new -pressed partner, --smbk-border-width-link-underline and --smbk-space-link-underline.
• Link. An icon in a link is no longer underlined, in any browser, at rest, under the pointer or pressed. The line runs under the words only, not under the icon or the gap before it, and the icon still stays on the same line as the word beside it. When you write a link with an icon by hand, keep its words in the label part, which now draws the underline.
• Table. In a long table with its own lower frame (sticky-header), the foot now stays at the bottom of the frame while the rows scroll under it, as the heading row stays at its top. A row's control that gets focus no longer lands under either of them.
• Table. An open row no longer draws a line between itself and its details, so the two read as one. The details row keeps the line under it.
• Reduced motion in the rules every project keeps. They now say what the components already do: when a reader asks for reduced motion, there is less motion, not none. Anything that slides, rises, grows or turns lands at once, and fades still play. The motion design tokens' description says the same.
• Pagination. Large numbers are now written the way the page's language writes them, so 1,116 and 11,151-11,157 in English. That holds for the page numbers and their names, the counts and the range's choices. Name another language with locale. Words you give yourself, such as countText, still receive the bare numbers.
• Pagination. The range type's select is now the small one unless you ask for another with selectSize, since the range type sits in a table's foot.
• Drawings and extra colors in the rules every project keeps. Before reporting that a component differs from a drawing, a project now checks that the drawing uses the component: a part drawn by hand is the project's own variation. A color a project has beyond the system's stays in a palette of its own, and is not asked for as a token.
• Checker. A new rule, removed-prop, finds a prop that a Release took off a component, such as aria-keyshortcuts on ToolbarTool and SegmentedControl, and names what to use instead. Nothing warned of these before: TypeScript doesn't check a hyphenated name in JSX, and a name the element also knows goes through to the element.
• Segmented control. Its page now says a bar may have nothing chosen, when what the page shows is none of the choices, such as days picked on a calendar. Give value an empty string, and say near the bar what is showing. The bar always drew this correctly, and it doesn't change.

• Pagination. A page number of three digits or more now fits its button. A button stays a square up to two digits and grows with a longer number, and a page turning current moves nothing beside it.
• Donut chart. A long figure in the middle no longer runs into the ring. It steps down in size by itself, so $99,999 and $1,250,000 keep clear, and a figure that already fit stays as it was. The middle holds ten characters; give a longer total a shorter form with figure. In plain HTML, add smbk-donut-chart__figure--size-md or --size-sm yourself.
• Date and time picker. Its page no longer tells you not to use it for a range of dates, which it does with type="date-range".
• Popover, dropdown, select and navigation menu. In Safari, pressing the opener of an open panel could close it and open it again at once, so the panel stayed open. It happened when a part around the opener could take focus, such as a main with tabindex="-1" for a skip link, or a table's scrolling frame. The press now closes it, as in other browsers. In Firefox, pressing the words inside an open navigation panel no longer closes it.
• Breadcrumbs. On hover, the line under a crumb now runs under its name only, not under its icon or the gap beside it. The name has a new label part.
• Popover, dropdown and tooltip. A panel left open when a part of the page around its opener goes full screen no longer ends up hidden behind that part. It stays shown and moves with its opener.
• Navigation menu. In a narrow space, a press elsewhere in the moment just after a panel opened could close it. The panel now stays open from the start, as it does later.
• Table. A chosen or current row now keeps its fill while the pointer rests on it. A row pressed with a mouse used to show the hover fill until the pointer left, so it did not look current straight after the press.
• Scrollbar. In Chrome, a page could stop scrolling for a whole swipe when the pointer was over a table or another part with its own scrollbar. It happened even when the part had nothing to scroll. The bar no longer lays a clear box over the part's content, so the page keeps moving.
• Scrollbar. A table's frame, or any other part with the system's scrollbar, now gives its true width the moment it gets narrower. Before, a page that measured it right then got the old, wider width, and a layout deciding what fits beside it could choose wrong. While the bar is hidden, it now takes no part in the page's layout.
• Table. In a long table with its own lower frame (sticky-header), pressing a heading to sort no longer throws the rows in the frame away from where the reader was. The browser used to follow a row the sort moved.
• Table. In a long table, nothing shows through the heading row any more as the rows pass under it. Words and lines used to show along its top edge and between two headings, and the line under it stopped short at every column. It now runs unbroken from one side of the table to the other, in the framed and filled looks.
• Table. In a long table that follows the page, the foot's top line now stays one clean line as the rows pass behind it. On a standard screen it used to blur across two pixels, with the rows showing through and the foot's words gone soft, wherever the table landed between two pixels.
• Table. In a long table that follows the page, the line under the heading row now stays one clean line as the rows pass behind it. On a standard screen it used to blur across two pixels, with the rows showing through, wherever the table landed between two pixels.
• Segmented control. A choice that shows a count, such as "Short 8", no longer changes width when the count changes. Every digit now takes the same room, so the bar and anything after it on the line stay still.

• Page bounce. A page built on the system no longer bounces past its top or bottom, on a phone or a Mac. In Chrome on Android, pulling down no longer reloads the page either. A project that wants both back sets overscroll-behavior-y: auto on its <html>.
• Checker. A project that still gives one of these removed props to a component now fails its check: aria-keyshortcuts on ToolbarTool and SegmentedControl (use shortcut), scheme on Avatar and variant on Checkbox (use tone), underline on Link (every link is underlined; set standalone on one that stands on its own), media on Card (use layout), and onClose on Modal, Drawer and CommandPalette (use onOpenChange).

• Table rows can't be reordered. The table has no drag handle in this Release, so a site that needs to move rows builds that itself for now.
• Five components are still Proposed. The alert dialog, collapsible, one-time code input, navigation menu and menubar stay marked Proposed, so their look and props may still change in a later Release.
• A sideways scrollbar can cover a short part's content. While the bar shows, its track takes presses along a thin strip at the part's lower edge. On a line of small chips that strip is the lower half of each chip, so a press there grabs the bar instead of the chip.
• Some color pairs fall short of contrast. A few colors measure below the contrast ratio WCAG asks for against the background they sit on. Text needs 4.5 to 1; the edge or mark that shows a control or its state needs 3 to 1. Some pairs are still to be fixed. Others are kept on purpose, a choice of taste for the system's look. The Contrast section of the color page lists every pair, what it measures and what it needs.

The code is on GitHub, https://github.com/simbolik-lab/simbolik-design-system (opens in a new tab), tagged v0.2.2-alpha. On that Release, download simbolik-0.2.2-alpha.zip. It holds one design-system/ folder with what a site builds with and every license, ready to use with no build. The README on GitHub says how to use each part.

A site on 0.2.1 alpha swaps its copy of the bundle for this one, then reads What breaks. The conformance checker names each class, custom property and removed React prop the site still uses. A site on 0.2 alpha reads the 0.2.1 alpha notes first, and a site on 0.1.2 alpha or earlier reads the 0.2 alpha notes before those.

The Figma file the design is drawn in is on Figma Community, https://www.figma.com/community/file/1688324308358870630 (opens in a new tab), where anyone can open it and copy it.

The code is under the MIT License and the Figma file under CC BY 4.0. The Licenses page says what each one asks.