Skip to content

feat: slots and states for data table, button, sheet, card, stat card and input - #39

Merged
Shewart merged 4 commits into
mainfrom
feat/component-slots-and-states
Oct 21, 2026
Merged

Shewart merged 4 commits into
mainfrom
feat/component-slots-and-states

Conversation

@Shewart

@Shewart Shewart commented Oct 21, 2026

Copy link
Copy Markdown
Contributor

Slots and states that real apps kept building by hand, for MAUI and Avalonia, with demo sections on both platforms.

Components

  • data-table: DataTableColumn.Cell draws any view in a cell (a badge, a link, a formatted amount). Filter and sort still use Property / Value. Set it before ItemsSource, or call Refresh().
  • button: Size="Inline" (h-auto p-0) for a Link button in a line of text or at a card's edge.
  • sheet: SheetHeader, SheetTitle, SheetDescription and SheetFooter, as on the web. They are new CLI targets, installed with sheet.
  • card: CardHeader.Action at the top right (shadcn's CardAction). Views inside the header sit on the title's line (badges, a count) and wrap under it when there's no room.
  • stat-card:
    • ValueTone (Default, Success, Warning, Destructive) tints the value.
    • The value row wraps, so the change pill drops under a long value instead of being cut off.
    • IsLoading shows skeletons in place of the value, so stat-card now depends on skeleton.
    • Size="Sm" fits six tiles to a row.
  • input, input-group: Variant="Password" masks the text and adds an eye button that shows it. The button keeps the field focused and is named "Show password" / "Hide password" for screen readers. IsPassword still masks without the button. InputVariant lives in Input, so input-group now depends on input.
  • icon: Receipt, ListChecks, CalendarClock, KeyRound (114 icons).

Fix

  • MAUI page layer: the overlay layer is now set up as a page joins the app, before its views load. On a Shell route switch, the page's views were unloaded and loaded again, so a view that cancels its work on Unloaded lost its first load. On Windows, GoToAsync("//route") went from Loaded 2 / Unloaded 1 to 1 / 0. PageAppearing remains the fallback for content set later.

Docs

  • Each component's section in COMPONENTS.md, plus the roadmap.
  • Theme tokens on spans and runs (.Token(Span.TextColorProperty, …) already worked; now documented and shown in the demo).
  • When the page layer wraps a page's content.

Checked

  • Solution builds with 0 warnings and 0 errors (all four MAUI targets and the browser preview).
  • Tests: 1740 core and 190 headless Avalonia, all passing. New ones: headless tests for each feature, and registry tests for the sheet parts and the new dependencies.
  • Format clean on the changed files and the CLI project.
  • Fresh apps outside the repo: Avalonia (add input-group stat-card sheet card data-table, and input-group on its own) and MAUI (add sheet stat-card card input input-group data-table button icon) build 0/0.
  • Both demos driven in light and dark: password reveal, card header, stat cards, badge cells and sorting, sheet parts, span and run colours following the theme.
  • Not run on Android or iOS: the page-layer change is built for them, not run.

The overlay layer wraps a page's content in a Grid. It was set up on
PageAppearing, which on a Shell route switch runs after the page's views
have loaded, so they got Unloaded and Loaded again, and a view that
cancels its work on Unloaded lost its first load.

The layer is now set up on Application.DescendantAdded, as the page joins
the app and before its views load. PageAppearing stays as the fallback
for a page whose content is set later.

Checked on Windows: a GoToAsync("//route") switch gave the page's views
Loaded 2 / Unloaded 1 before and 1 / 0 after; push, window page swap and
start-up were already fine.
Four common dashboard icons from ShellIcons (Lucide 0.475.0), for MAUI and Avalonia; 114 icons in the template now.
… and input

For MAUI and Avalonia, with demo sections on both:

- data-table: DataTableColumn.Cell draws any view in a cell (a badge, a
  link); filter and sort still use Property / Value
- button: ButtonSize.Inline (h-auto p-0) for a link in a line of text or
  at a card's edge
- sheet: SheetHeader, SheetTitle, SheetDescription and SheetFooter, new
  CLI targets installed with sheet
- card: CardHeader.Action at the top right (shadcn's CardAction), and
  views inside the header sit on the title's line and wrap under it
- stat-card: ValueTone (Default, Success, Warning, Destructive), a value
  row that wraps so the pill drops under a long value, IsLoading
  (skeletons; stat-card now depends on skeleton) and Size Sm
- input, input-group: Variant="Password" masks the text and adds an eye
  button that shows it (keeps focus, named for screen readers);
  IsPassword still masks without the button. InputVariant lives in
  Input, so input-group now depends on input

Headless tests for each, and registry tests for the new targets and
dependencies.
…states and password inputs

Also documents theme tokens on spans and runs, and when the page layer wraps a page's content.
@github-actions github-actions Bot added documentation Improvements or additions to documentation templates examples labels Oct 21, 2026
@Shewart
Shewart merged commit 413bcca into main Oct 21, 2026
7 checks passed
@Shewart
Shewart deleted the feat/component-slots-and-states branch October 21, 2026 08:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation examples templates

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant