0.1.1 alpha

• One font stylesheet. assets/fonts/fonts.css holds every weight of Funnel Display, Geist and Geist Mono that the design system uses. Link it, and a page waits for one font stylesheet where it waited for fifteen, one per font and weight. The fifteen are still there, so pages that link them keep working.
• Footer. A link given active tells screen readers it's the current page. A column link also shows it with the navigation item's current look; a legal link looks as it did. navLabel names the columns' navigation ("Footer" unless you give another), for a page with two footers.
• Header. navLabel names the navigation holding its links ("Main" unless you give another), as the app bar's already could.
• Code block. status says what the last action did, such as "Copied", in a status line the page doesn't show (smbk-code__status) and screen readers read out. Empty it after a moment, so the same result is read again the next time.

• Code block. A bare block shows no bar, but a label given to it now names its code when the code scrolls. Before, every bare block was named "Code".
• Segmented control. The chosen item is now on the raised surface, a shade lighter than before, like the chosen tab and the chosen theme in the theme switch. Its edge and shadow are the same.
• Badge. A badge of the default type now has a thin highlight edge round it, as the Figma file draws it. Its size doesn't change, and the dot look stays as it was.
• Design tokens. The token files no longer hold Figma's code syntax ($extensions.figma.codeSyntax), the name Figma's Dev Mode shows for a variable. Every custom property is still named from its token's path, so the CSS, TypeScript and JSON outputs are the same.
• Conformance checker. The README now says which settings the checker reads from a project's package.json. An exception naming a rule the checker no longer has gets a note on every run. It used to stop the check.

• Sidebar. Its panel has a name now, the sidebar's label, as its navigation had. A page with another side column no longer has two that sound the same to a screen reader.
• Search field. In Safari, Escape now empties a field holding text, as other browsers already did, and the page hears it as a change. In an empty field, Escape is left to the page (to close a dialog, say).
• Select. Safari no longer cuts the tails off letters such as g, p and y in the value and the choices. The select also points assistive technology at its list only while the list is open, as ARIA 1.2 asks.
• Table. The drag handles' column has a heading screen readers read, "Reorder", written out of sight (smbk-table__header-name). A name given only as an aria-label wasn't read everywhere.
• Table of contents. With extra, its aria-label went to the box around it. It now names the navigation, with or without extra, and the heading stays as it is.

• Conformance checker, the folders it reads. It used to skip two more folder names at a project's top. Now it skips node_modules, dot folders, and site, dist, public and design-system at the top, and reads the rest. If a project keeps notes or drafts it shouldn't check, list their folders under ignore in its package.json, as in "simbolik": { "ignore": ["notes"] }.
• Conformance checker, the old-system rule. The rule is gone, and so are its counts at the end of the report and oldClasses and oldProperties in the --json summary. A class it found is now a class without the project prefix (class-prefix). Rebuild it with a component or a Project Piece, or list it under allowClasses if the project needs it as it is. An exception naming old-system no longer explains anything; remove it.

• The app bar has no in-between form. Wide, it holds its links, search and actions in one row; narrow, it moves them into a menu. On a screen wide enough for the wide form but too narrow for everything in it, they run out of the bar. Until the app bar has a form for this, put data-layout="narrow" on a wrapper around a crowded bar.
• The dropdown always opens downward. With too little room below its opener, part of the panel ends up out of view. The select's list already opens upward when there's more room above, and the dropdown's panel doesn't yet.
• 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.1.1-alpha. Clone it, then npm ci, npm run css:bundle and npm run release:bundle write a Release bundle to release/0.1.1-alpha/. It's one folder with what a site builds with and every license, and the README says how to use each part.

A site on 0.1 alpha swaps its copy of the bundle for this one, and its markup stays as it is. If it runs the conformance checker, read What breaks first. To load the fonts from the one stylesheet, link assets/fonts/fonts.css in place of the fifteen.

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.