[nency-canyon]

Ticket(s) or GitHub Issue

• N/A

Technical Description

• Added shared portal components so apps stop keeping local copies:
  • BaseSection (heading, description, icon, #actions slot);
  • the BaseTable family, with #toolbar, #footer and #empty slots, a loading state, sortable header cells and CSS line-clamp cell text;
  • BaseSelect, BaseSearchInput (with a debounce prop) and BaseInputError (role="alert");
  • BaseCallout with BaseCalloutMeta (success, warning, danger, info and neutral tones, in sm and lg sizes);
  • BaseStatCard.
• Tabs gained an optional per-tab count badge, label and idPrefix, plus full tab accessibility markup (tablist, tab, aria-selected, aria-controls).
• BaseBadge now supports every Color enum case (adds black, light-gray, dark-gray and navy), gained an optional dot, and uses themed rounded.
• Aligned PageCard, EmptyState, Tabs and Pagination with the themed rounding scale (rounded-lg for containers, rounded-md for controls), so they respect the tenant's rounding setting instead of fixed rounded-xl.
• Inputs use the Filament-style field look: a subtle ring, a soft shadow and a brand-coloured focus ring.
• Backward compatible: no props, events or slots were removed or renamed, and every new prop is optional.
• Visible changes in consuming portals:
  • slightly smaller corners on tab items, pagination buttons and badges;
  • a slightly stronger PageCard shadow.
• Cards, empty states and the tabs bar look the same at the default rounding.

Any deployment steps required?

No

Are any Feature Flags and/or Data Migrations that can eventually be removed Added?

No

---

Before contributing and submitting this PR, make sure you have Read, agree, and are compliant with the contributing guidelines.

[Copilot]

🟡 Changes recommended

Native control attributes, keyboard accessibility, loading announcements, and section visibility need correction.

5 open findings

• Forward native attributes to the input control · New
• Show descriptions and icons without headings or actions · New
• Forward native attributes to the select control · New
• Fix permanently busy loading live region · New
• Implement keyboard navigation for tab roles · New

What changed in this PR

Adds shared Vue components for portal advisory interfaces, reducing app-local duplication and standardizing styling.

Changes:

• Introduces reusable tables, form controls, sections, callouts, and statistics cards.
• Adds tab badges and accessibility markup, plus additional badge colors.
• Aligns portal components with tenant-themed rounding.

File	Description
resources/​js/​components/​portal/​Tabs.vue	Adds badges and tab accessibility markup.
resources/​js/​components/​portal/​Pagination.vue	Updates control rounding.
resources/​js/​components/​portal/​PageCard.vue	Updates rounding and shadow.
resources/​js/​components/​portal/​EmptyState.vue	Applies themed container rounding.
resources/​js/​components/​BaseTableRow.vue	Adds animated table rows.
resources/​js/​components/​BaseTableLoadingState.vue	Adds loading skeletons.
resources/​js/​components/​BaseTableHeaderCell.vue	Adds sortable column headers.
resources/​js/​components/​BaseTableHeader.vue	Provides styled table headers.
resources/​js/​components/​BaseTableCellText.vue	Adds line-clamped cell text.
resources/​js/​components/​BaseTableCell.vue	Standardizes cell spacing.
resources/​js/​components/​BaseTableBody.vue	Provides styled table bodies.
resources/​js/​components/​BaseTable.vue	Adds table layout and state slots.
resources/​js/​components/​BaseStatCard.vue	Displays summary statistics.
resources/​js/​components/​BaseSelect.vue	Adds a styled select control.
resources/​js/​components/​BaseSection.vue	Adds section headings and actions.
resources/​js/​components/​BaseSearchInput.vue	Adds debounced search input.
resources/​js/​components/​BaseInputError.vue	Displays validation alerts.
resources/​js/​components/​BaseCalloutMeta.vue	Displays callout metadata.
resources/​js/​components/​BaseCallout.vue	Adds configurable advisory callouts.
resources/​js/​components/​BaseBadge.vue	Expands colors and adds optional dots.

🧠 Review effort: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[danharrin]

A few small things before we release it:

1. Tone colours: please match the app's Filament panel colours (success green, warning amber, danger red, info blue).
   • In BaseBadge, change info from sky to blue.
   • In BaseCallout, change warning from orange to amber (surface and icon).
2. Table alignment: the toolbar is px-4 sm:px-6, cells are px-4 and Pagination is px-6. So from sm up the search box and pagination text sit 8px further in than the first column, and on mobile the pagination is off instead. Could you:
   • add sm:first:ps-6 sm:last:pe-6 to BaseTableHeaderCell and BaseTableCell, and
   • change Pagination to px-4 sm:px-6?
3. Callout role: please default BaseCallout to role="note" instead of role="status". Most callouts are static. Callers whose content updates live, like the service status summary banner, can pass role="status" to change it.
4. BaseTableLoadingState renders its sr-only span inside the <table>, which is invalid HTML. :aria-label="label" on the BaseTable would avoid that.

[nency-canyon]

A few small things before we release it:

1. Tone colours: please match the app's Filament panel colours (success green, warning amber, danger red, info blue).

   • In BaseBadge, change info from sky to blue.
   • In BaseCallout, change warning from orange to amber (surface and icon).

2. Table alignment: the toolbar is px-4 sm:px-6, cells are px-4 and Pagination is px-6. So from sm up the search box and pagination text sit 8px further in than the first column, and on mobile the pagination is off instead. Could you:

   • add sm:first:ps-6 sm:last:pe-6 to BaseTableHeaderCell and BaseTableCell, and
   • change Pagination to px-4 sm:px-6?

3. Callout role: please default BaseCallout to role="note" instead of role="status". Most callouts are static. Callers whose content updates live, like the service status summary banner, can pass role="status" to change it.

4. BaseTableLoadingState renders its sr-only span inside the <table>, which is invalid HTML. :aria-label="label" on the BaseTable would avoid that.

Thanks, all four are done:

1. Tone colours: BaseBadge info is now blue, and BaseCallout warning is now amber (surface, icon, title and text).
2. Table alignment: added sm:first:ps-6 sm:last:pe-6 to BaseTableHeaderCell and BaseTableCell, and Pagination is now px-4 sm:px-6, so the toolbar, first column and pagination line up at every breakpoint.
3. Callout role: BaseCallout now takes a role prop that defaults to note. Callers with live content pass role="status"; I did that for the service status summary banner in the app.
4. Loading state: removed the sr-only span from inside the <table>; the label is now :aria-label on the BaseTable wrapper.

One note: Pagination is also used outside tables (for example advisingapp's Resource Hub), where the narrower mobile padding now applies too. That seems consistent with the intent, so I left it.