Status Matrix

One grid engine for every rows × columns status surface: a role-permission matrix (role × capability → allow / deny / inherit), a heat grid (cohort × period → value), a controls matrix (control × framework → met / at-risk / failing), or a preferences grid (type × channel → on / off). Pick the cell-type and the matrix renders the right interactive (or read-only) cell — on sticky row and column headers, inside a keyboard-reachable scroll region.

Every encoding is conveyed in text or shape, never color alone: tristate cells use distinct check / cross / dash glyphs, heat cells always print their value, and status cells render a labeled badge.

Role Permission Matrix

cell-type="tristate" with editable cycles each cell inherit → allow → deny on click or Enter/Space. Edited cells get a "changed" ring and the legend counts unsaved changes — ideal for an IAM grant editor.

<x-wirekit::status-matrix
    cell-type="tristate"
    editable
    corner-label="Role"
    aria-label="Role permissions"
    :rows="[
        ['key' => 'owner', 'label' => 'Owner'],
        ['key' => 'admin', 'label' => 'Admin'],
        ['key' => 'member', 'label' => 'Member'],
        ['key' => 'guest', 'label' => 'Guest'],
    ]"
    :columns="[
        ['key' => 'billing', 'label' => 'Billing'],
        ['key' => 'members', 'label' => 'Members'],
        ['key' => 'projects', 'label' => 'Projects'],
        ['key' => 'settings', 'label' => 'Settings'],
    ]"
    :cells="[
        'owner:billing' => 'allow', 'owner:members' => 'allow', 'owner:projects' => 'allow', 'owner:settings' => 'allow',
        'admin:billing' => 'deny', 'admin:members' => 'allow', 'admin:projects' => 'allow', 'admin:settings' => 'allow',
        'member:projects' => 'allow', 'member:members' => 'inherit',
        'guest:projects' => 'deny',
    ]"
/>

Heat Grid

cell-type="heat" color-mixes each cell's background from the surface toward the scale color by its normalized value — and always prints the value, so the grid stays legible for colorblind readers.

<x-wirekit::status-matrix
    cell-type="heat"
    corner-label="Cohort"
    aria-label="Weekly retention"
    heat-unit="%"
    :heat-min="0"
    :heat-max="100"
    :rows="[
        ['key' => 'jan', 'label' => 'January'],
        ['key' => 'feb', 'label' => 'February'],
        ['key' => 'mar', 'label' => 'March'],
    ]"
    :columns="[
        ['key' => 'w0', 'label' => 'Week 0'],
        ['key' => 'w1', 'label' => 'Week 1'],
        ['key' => 'w2', 'label' => 'Week 2'],
        ['key' => 'w3', 'label' => 'Week 3'],
    ]"
    :cells="[
        'jan:w0' => 100, 'jan:w1' => 68, 'jan:w2' => 54, 'jan:w3' => 41,
        'feb:w0' => 100, 'feb:w1' => 72, 'feb:w2' => 60, 'feb:w3' => 48,
        'mar:w0' => 100, 'mar:w1' => 75, 'mar:w2' => 63, 'mar:w3' => 52,
    ]"
/>

Controls Matrix

cell-type="status" renders each value as an intent badge — common status words (met, at-risk, failing) map to success / warning / danger automatically. Perfect for a compliance control × framework grid.

<x-wirekit::status-matrix
    cell-type="status"
    corner-label="Control"
    aria-label="Compliance controls"
    :rows="[
        ['key' => 'mfa', 'label' => 'MFA enforced'],
        ['key' => 'encryption', 'label' => 'Encryption at rest'],
        ['key' => 'backups', 'label' => 'Tested backups'],
    ]"
    :columns="[
        ['key' => 'soc2', 'label' => 'SOC 2'],
        ['key' => 'iso', 'label' => 'ISO 27001'],
        ['key' => 'hipaa', 'label' => 'HIPAA'],
    ]"
    :cells="[
        'mfa:soc2' => 'met', 'mfa:iso' => 'met', 'mfa:hipaa' => 'met',
        'encryption:soc2' => 'met', 'encryption:iso' => 'met', 'encryption:hipaa' => 'at-risk',
        'backups:soc2' => 'at-risk', 'backups:iso' => 'failing', 'backups:hipaa' => 'failing',
    ]"
/>

Preferences Grid

cell-type="toggle" with editable gives a type × channel on/off grid — e.g. a notification-preferences matrix.

<x-wirekit::status-matrix
    cell-type="toggle"
    editable
    corner-label="Notify me about"
    aria-label="Notification preferences"
    name="prefs"
    :rows="[
        ['key' => 'mentions', 'label' => 'Mentions'],
        ['key' => 'comments', 'label' => 'Comments'],
        ['key' => 'digest', 'label' => 'Weekly digest'],
    ]"
    :columns="[
        ['key' => 'email', 'label' => 'Email'],
        ['key' => 'push', 'label' => 'Push'],
        ['key' => 'sms', 'label' => 'SMS'],
    ]"
    :cells="[
        'mentions:email' => true, 'mentions:push' => true,
        'comments:email' => true,
        'digest:email' => true,
    ]"
/>

Cell Types

On paper the column and row labels wrap between words, so a matrix needs less of the sheet's width than of the screen's, and its cells keep their size. A sheet does not scroll, so a matrix still wider than the sheet prints the columns that fit. A landscape sheet holds more of them: give the page that prints the matrix @page { size: landscape; }.

Data Shapes

rows and columns are each [{key, label}]. cells is a value map keyed by "rowKey:colKey" — or a nested [rowKey => [colKey => value]] map; both are accepted.

// 1. Flat key shape
$cells = ['admin:billing' => 'allow', 'admin:users' => 'deny'];

// 2. Nested shape (equivalent)
$cells = ['admin' => ['billing' => 'allow', 'users' => 'deny']];

Status Value → Intent

status cells map these words automatically (case-insensitive); any other value renders neutral:

The Emitted Value (Editable)

When editable, every cell change emits the normalized map two ways — a bubbling cell-change event and a JSON hidden input — so wire:model and forms both bridge:

{{-- 1. Bind the JSON bridge to a Livewire property --}}
<x-wirekit::status-matrix
    cell-type="tristate"
    editable
    :rows="$roles"
    :columns="$capabilities"
    :cells="$grants"
    wire:model.live="grantsJson"
/>

// 2. Decode + persist the edited grants
public string $grantsJson = '{}';

public function save(): void
{
    $grants = json_decode($this->grantsJson, true) ?: [];
    // 3. $grants is ['admin:billing' => 'deny', ...] — persist as you like
    foreach ($grants as $key => $value) {
        [$role, $capability] = explode(':', $key);
        Grant::updateOrCreate(compact('role', 'capability'), ['value' => $value]);
    }
}

Props

Accessibility

• The matrix is a <table> with scope="col" / scope="row" headers, and it is always named — ariaLabel when you set one, "Status matrix" otherwise. A table with no accessible name is worse than a duplicated region, so this fallback stays.
• role="grid" is added only for cell-type="tristate" and cell-type="toggle". The grid role is a promise of a keyboard model — one tab stop into the widget, arrows from there — and only those two cell types render something focusable to hold it. A status or heat matrix is a data table with nothing to operate, so it stays a plain table and your reader keeps their own table-navigation mode, which announces the row and column header as they move. A grid role there would replace that with an application-widget model and hand them no way in.
• The scroll wrapper carries tabindex="0" and a focus ring in every configuration, so it is reachable and operable by keyboard (WCAG 2.1.1).
• The wrapper becomes a screen-reader landmark only when you set ariaLabel. It then also gets role="region" under that name. Without one it stays a plain focusable scroller — role="region" plus a name is a landmark, and three matrices on a page all falling back to "Status matrix" would be three landmarks announcing the same thing, which axe reports as landmark-unique.
• Every cell's state is in text or shape, never color alone: tristate cells carry the state word in their aria-label ("Admin, Billing: Denied") and use distinct glyphs; toggle cells expose role="switch" + aria-checked; heat cells always print their value; status cells render a labeled badge.
• Interactive cells use a single tab stop (roving focus) into the grid; arrow keys then move between cells.
• An editable tristate matrix with its legend says the number of unsaved changes through a role="status" live region each time it changes, from the first change on. The region is in the page before that change, because one that appears together with its text is announced unreliably; the count in the legend is the same text for the eye.
• An aria-labelledby of yours names the matrix and its scroll region, as aria-label does.

Keyboard Interaction

This table describes cell-type="tristate" and cell-type="toggle". A status or heat matrix has no focusable cells and no grid role: Tab reaches its scroll region and stops there, and the cells are read with your screen reader's own table navigation.

Navigation works whether or not the matrix is editable — only Enter / Space are gated on it. A read-only tristate or toggle matrix marks its cells aria-disabled="true", so they stay focusable and readable while announcing that there is nothing to activate.

Design Tokens

Customization

Override the cell-type default and legend visibility via config/wirekit.php:

'components' => [
    'status-matrix' => [
        'cell-type' => 'tristate',
        'legend' => true,
    ],
],

Further Reading

• WAI-ARIA Authoring Practices — Grid
• WCAG 1.4.1 — Use of Color