# Component showcase audit Reviewed all 102 component routes for loading, empty examples, and desktop page overflow. This is a route and rendering audit, not exhaustive testing of every prop combination. Corrections include: - Corrected the showcase's Tailwind source paths so package-owned icons are generated. - Reduced advanced select and PIN input sizing and corrected search icon padding. - Restored grouped combobox options and verified selection. - Defaulted ToggleCount to its first valid choice and supplied meaningful monthly/yearly examples. - Made the password leading icon optional without reserving empty space. - Added populated accordion examples with plain, bordered, and separated layouts, plus start/end indicators. - Corrected badge examples and theme-aware soft/outline colors. - Normalized structured playground defaults, including tables and time pickers. - Preserved server-rendered composite previews during hydration and subsequent playground updates. - Supplied splitter pane content and made output observation compatible with both runtime registry forms. Validation includes component/showcase tests, compiler and accessibility checks for 201 example pages, production showcase build, browser interaction checks, and responsive checks. Visual-contract checks compare source hashes, not screenshots. ## Follow-up review: component surfaces and playground Reviewed all 102 sidebar routes in order, inspecting the rendered examples for missing icon masks, empty content, and horizontal overflow. This is a structural pass, not exhaustive testing of every prop combination. Manually checked the reported accordion, alert, avatar group, button group, card, and carousel surfaces, plus numeric playground interaction and prop updates. - Playground input/change refreshes are restricted to the settings form. Interacting with the component no longer replaces its state. A regression test checks both paths. - Sidebar active state refreshes on client navigation and scrolls the active entry into view without scrolling the page. - Accordion answers align with trailing indicators, and separate panels no longer get a second outer border. - Alerts use concise examples with zero or one action and theme-aware text colors. - Avatar groups have named members and role details for hover/focus; overflow counts stay on one line. - Button groups include their own button foundation and correctly update selected state. - Cards no longer receive generic group arrays by default; group content has padding and responsive columns. - Carousel supports `framed=false` by default and `framed=true` explicitly. Unframed removes the outer surface as well as the viewport border. Image captions have a contrast overlay. - Preview grid children can shrink within their panels; password popovers and breadcrumbs respect their container width. Validation: 243 UI/showcase tests passed; 201 example pages passed compiler, accessibility, and formatter checks. Browser interaction checks cover numeric value persistence, settings regeneration, accordion expansion, button selection, carousel next-slide, and avatar focus details. Integrations that need external providers and every optional prop permutation are not covered by these checks. Phone-width review: all 102 pages fit the viewport at 390px. Fixed inner overflow in password requirements and pagination. Verified light/dark stylesheet switching and saved appearance preferences; added a regression for switching before the theme runtime loads. ## Catalog and interaction update The catalog now separates 84 primitive components, 14 blocks, and six standalone examples. `/preview` and `/templates` link to working pages with copyable source; the legacy design-system routes and four requested shell components are removed from the showcase. Package exports remain compatible. Rebuilt Rating, StyledIcon, ListGroup, DragAndDrop, DataMap and the basic rich-text editor. Map demonstrates an image-backed office plan with markers and zoom; it is not a geographic tile service. DataMap is an activity heatmap. These examples require no third-party provider. Fixed anchored calendar/time overlays, datetime selection, controlled modal rendering, table page-size selection, optional clipboard labels, input icon placement, slider alignment and stateful stepper navigation. Existing keyed rows stay attached when notifications are appended, avoiding animation restarts. Added image and headerless card examples and meaningful chat, tree, chart and upload data. Validation: 380 UI, showcase and CSR tests pass; 211 example pages pass compiler/accessibility/formatter checks; the showcase production build succeeds. Browser checks confirm external modal open/close, anchored calendar, rating selection, list reordering/editor input, right-click menu, table size 25 with matching selected item, gallery routes and sidebar active state. These checks do not cover every optional configuration or external provider integration. ## Follow-up: controls and gallery separation Added fractional Rating and RangeSlider examples, named Card header/footer slots with visibility controls, custom TimePicker within DatePicker, calendar completion/outside dismissal, implicit switch label association, native search-clear suppression, multi-file names, interactive LegendIndicator, bar/line Chart data props and expanded rich-text formatting. Centered modals use data-modal-close for custom dismissal buttons. Confetti now uses a canvas particle burst with reduced-motion handling. Map defaults to an OpenStreetMap geographic embed; Google Maps supports an Embed API key, query, coordinates, zoom and map type. The showcase allows only the two provider iframe origins. Google rendering still requires a user-supplied provider key. Examples and Blocks now use a gallery layout without a documentation sidebar. Templates provide four distinct product starting pages: dashboard, commerce, marketing and productivity. Removed the legacy v0.6 sidebar group, placed Advanced Forms after Tables, and added practical code to installation/customization/accessibility guides. Playground code initializes from the actual controls and array props use state bindings. Browser checks include calendar Done, nested custom time updates, switch label toggling, centered modal dismissal, loaded geographic map tiles, and visible canvas confetti. Production preview avoids development refresh resets during review.