The building blocks, audited

Ships asButton

• ColorsMetTen solid and nine outline colors plus link and ai. More than a semantic system needs; the Foundations semantic roles would cut this to six.
• VariantsMetSolid, outline, and link.
• SizesMetsm, md, lg.
• Icon supportPartialIcons render as children. No icon-only mode, and aria-label is not forwarded, so an icon-only button has no name.
• Hover stateMet
• Active stateMissingNo pressed or selected state, no aria-pressed.
• Loading stateMissing
• Disabled stateMetopacity-50 and the disabled attribute. A disabled href button falls back to a real button.
• Accessibility roleMetRenders <button> or next/link <a> based on href.
• Focus indicatorMetfocus:ring-2. Uses focus: rather than focus-visible:, so the ring also shows on mouse click.

Ships asGlobal a style in globals.css, next/link, Button variant="link"

• Icon supportPartialThe Outbound icon exists. No convention for when to add it.
• ColorsPartialOne color, blue-400, which fails AA on white (see Foundations). Opt out with the non-standard class; no inherit variant.
• Disabled stateMissing
• Font inheritanceMetThe element style sets only color and underline.
• Multiline displayMet
• Accessibility roleMetNative <a>.

Ships asnothing yet

• Icon supportMissing
• Disabled stateMissing
• Collapsed stateMissing
• Custom separatorMissing

Ships asTabs (uncontrolled), TabLinks (controlled)

• Content compositionMetPanels are children matched by index.
• VariantsMetdefault, pills, underlined.
• Selected stateMetaria-selected on the trigger.
• Disabled stateMet
• Icon supportMissingTab label is a string.
• Equal width layoutMissing
• Keyboard supportPartialTriggers are focusable buttons, but no arrow, Home, or End navigation. aria-labelledby points at tab-{i}, an id that is never rendered, and panel ids collide when two Tabs share a page.

Ships asPagination

• Selected page statePartialHighlighted blue and re-selecting is a no-op. aria-current is passed to Button, which drops it.
• Page display rangesMetTwo pages either side of the current one, with ellipses.
• Amount of items per pageMissing
• Indeterminate amount of pagesMethasMore adds a load-more control.
• Full page label announcementsPartialaria-label="Page n" is written but Button does not forward it.
• State announcementMissing

Ships asnothing yet

• Content compositionMissing
• Hover triggerMissing
• Dynamic positioningMissing
• ResponsivenessMissing
• Focus trappingMissing
• Keyboard navigationMissing

Ships asNative <input> styled by base.css; Password

• LabelMet<label> is styled. Pairing with htmlFor is up to the author.
• Error statePartial:invalid turns the border red once the field has content. No slot for an error message.
• Disabled stateMet
• PlaceholderMet
• Helper textMissing
• Icon supportMissingPassword has a trailing show/hide button only.
• Prefix / SuffixMissing
• SizesMissingOne size, py-3.
• Accessibility labelMetNative element; aria-label passes through.

Ships asNative <textarea> styled by base.css

• LabelMet
• Error statePartialSame :invalid border as the text field.
• Disabled stateMet
• PlaceholderMet
• Helper textMissing
• SizesPartialrows only.
• Accessibility labelMet

Ships asDropdown; native <select> styled by base.css

• LabelPartialid is applied, but the trigger is a div with role=button, so clicking a label does not open it.
• Error stateMissing
• Disabled stateMet
• PlaceholderMetPlus a clear control to return to it.
• Helper textMissing
• Icon supportPartialOptions can carry an icon. No leading icon on the field.
• PrefixMissing
• SizesMissing
• Accessibility labelMissingNo aria-label prop, and no combobox or listbox semantics. Arrow, Enter, and Escape keys work.

Ships asNative <input type=checkbox>, unstyled

• LabelPartialNative label pairing works; nothing styles the pair.
• Checked statePartialBrowser default.
• Error stateMissing
• Disabled statePartialBrowser default.
• Indeterminate stateMissing
• Checkbox groupMissing
• Keyboard supportMetNative.

Ships asNative <input type=radio>, unstyled

• LabelPartialNative label pairing works; nothing styles the pair.
• Checked statePartialBrowser default.
• Error stateMissing
• Disabled statePartialBrowser default.
• Radio groupMissing
• Keyboard supportMetNative.

Ships asToggle

• LabelMissingNo label prop. Pair an external <label htmlFor> with the id prop, as in the demo.
• Checked stateMetrole=switch with aria-checked.
• Disabled stateMet
• Keyboard navigationMetNative button.
• Accessibility labelPartialHard-coded sr-only text "Toggle". No aria-label prop.

Ships asNative <input type=date>, styled by base.css

• Display modesMissing
• Selected statePartialSingle date via the native picker. No range.
• Month selectionPartialNative picker.
• Day namesPartialNative picker.
• InternationalisationPartialNative picker follows the OS locale.
• Keyboard navigationPartialNative picker.
• State announcementPartialNative picker.

Ships asCallout

• ColorsMetNine variants; 800-on-50 text pairs pass AA.
• Title supportMet
• Icon supportMetAny icon from the set.
• Supplementary actionsPartialChildren accept anything; no dedicated action slot.
• ResponsivenessMetBlock element, full width of its container.
• Accessibility rolesMissingPlain div. Needs role=status (or alert for red).

Ships asToast via ToastProvider and useToast()

• Content compositionMissingmessage is a string.
• ColorsMetNine variants.
• Icon supportMetChosen automatically by variant; not overridable.
• TimeoutPartial5 s with a close button. Toast accepts duration but addToast() does not expose it.
• StackingMetBottom center, newest last, animated with AnimatePresence.
• Supplementary actionMissing
• Focus managementMissingTimer does not pause on hover or focus. Close button has no accessible name.
• Reduced motionMissing

Ships asInfo

• PositioningPartialFour fixed positions via prop. No flipping when it would leave the viewport.
• TimeoutMissingOpens immediately on mouseenter.
• Keyboard supportMissingHover only. The trigger is not focusable and there is no aria-describedby.

Ships asModal

• Content compositionMet
• Supplementary actionsMissingNo footer slot; put actions in children.
• Close actionMetX button and backdrop click. The X has no accessible name.
• PositioningPartialCentered only. No side sheet.
• SizesMetsm, md, lg, xl (width). Height follows content.
• Focus trappingMissing
• Keyboard navigationMissingNo Escape handler.
• Title and subtitle labelingPartialtitle is required and rendered as h2, but there is no role=dialog, aria-modal, or aria-labelledby.

Ships asLoading

• ColorsMissingFixed blue.
• SizesMissingFixed 64px spinner with py-12 around it. No inline size.
• Loading durationPartialIndeterminate only, with rotating messages.
• Reduced motionMissing
• Accessibility labelMissingNo role=status or aria-live.

Ships asnothing yet

• LabelMissing
• SizesMissing
• DurationMissing
• Accessibility labelMissing

Ships asLoadingSkeleton

• SizesPartialLine count is configurable; bar heights are fixed.
• ShapesMissingRectangles only. No circle for avatars or squares for media.
• CompositionPartialpage, card, and inline variants. No single-bar primitive to build custom layouts from.
• Reduced motionMissingUses animate-pulse, a Tailwind animation, rather than motion/react.

Ships asCard

• Content compositionMet
• Media sectionsMissing
• Supplementary actionsMissingNo footer slot and no clickable card.
• ResponsivenessMetFills its container.
• Card groupsPartialGrid utilities do the job; nothing enforces consistent gaps.

Ships asNative <details>, unstyled

• Active stateMissing
• CompositionMissing
• Toggle transitionMissing
• Content and trigger relationMissing

Ships asnothing yet

• Navigation controlsMissing
• Item compositionMissing
• Item sizesMissing
• Touch navigationMissing
• ResponsivenessMissing
• Keyboard navigationMissing

Ships asNative ul and ol styled by base.css

• OrderMetdisc and decimal. Nested lists are handled.
• Content compositionMet
• Accessibility roleMetNative elements.

Ships asNative hr styled in this app, not in base.css

• DirectionPartialHorizontal only. Vertical dividers are hand-built with border-l.
• Accessibility roleMethr has the separator role natively.

Ships asnext/image

next/image with explicit width and height. The mark is an SVG so density is moot; raster images get a srcset.

• SizesMetwidth and height, or fill with sizes. aspect-ratio via a wrapper class.
• Image fallbackMissingA broken src shows the browser default.
• Screen density supportMetnext/image generates srcset.
• Alt textMetalt is required by the type.

Ships asnothing yet

• ImageMissing
• Image fallbackMissing
• SizesMissing
• ColorsMissing
• ShapeMissing
• Avatar groupsMissing
• Accessibility labelMissing

Ships asTag

• ColorsMetNine variants, 800-on-100 text pairs.
• VariantsMissingOne faded style.
• SizesMissing
• Icon supportPartialAn Icon as a child works; gap-1 is set. No prop.
• Dismissible actionMetonClose renders an X. The X has no accessible name.
• Empty stateMissing
• PositioningMissingNo notification-dot mode.

Ships asIcon

• ColorsMetcurrentColor, so any text-* utility applies.
• SizesMetsm 16, md 20, lg 28, xl 36.
• InteractivityMetNever interactive on its own; wrap in Button. Accessible names are the open item on Foundations.