@equal-experts/kuat-vue 0.15.1 → 0.15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/agent-docs/AGENTS.md +1 -1
  2. package/agent-docs/README.md +1 -1
  3. package/agent-docs/external/kuat-agent-rules/reference/design-language/borders.md +49 -36
  4. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/emails.md +97 -34
  5. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/design.md +174 -3
  6. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/emails.md +98 -32
  7. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/figma-build-checklist.md +13 -0
  8. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/README.md +4 -0
  9. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/browse-and-filter.md +226 -0
  10. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/complete-a-form.md +1 -1
  11. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/dashboard.md +14 -53
  12. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/detail-page.md +196 -0
  13. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/give-feedback-on-an-action.md +184 -0
  14. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/section-hub.md +174 -0
  15. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/sign-in.md +1 -1
  16. package/agent-docs/manifest.json +3 -3
  17. package/agent-docs/rules/LOADING-consumer.md +1 -1
  18. package/dist/{AlertDialogTrigger.vue_vue_type_script_setup_true_lang-DosgAcSM.js → AlertDialogTrigger.vue_vue_type_script_setup_true_lang-Ccs_lGKx.js} +1 -1
  19. package/dist/alert-dialog.js +1 -1
  20. package/dist/index.js +1 -1
  21. package/dist/style.css +1 -1
  22. package/package.json +1 -1
@@ -0,0 +1,196 @@
1
+ # Detail page
2
+
3
+ **User goal:** See everything about one record — a profile, a business unit, a case — understand its
4
+ current state, and act on it, without leaving the page to piece together context from elsewhere.
5
+
6
+ > **Pattern:** *Pages* · single-medium (web-product) — concept and implementation together.
7
+ > Covers profile pages, business-unit pages, and single-record views reached from a list, search, or hub.
8
+
9
+ ## Context
10
+
11
+ A detail page exists once a user has found the record they want (from
12
+ [browse and filter](./browse-and-filter.md) or a [section hub](./section-hub.md)) and needs the full
13
+ picture: identity, current status, related data, and the actions available on this specific record.
14
+
15
+ ## Principles
16
+
17
+ | Principle | Implementation |
18
+ |-----------|-----------------|
19
+ | Identity first | Name, status, and key identifiers visible without scrolling |
20
+ | Related data is one click away | Group related content into tabs or sections, not one long scroll |
21
+ | Actions stay attached to context | Primary actions live near the identity block, not in a footer |
22
+ | A way back | Breadcrumb or back link to the list/hub the user came from |
23
+
24
+ Success shows up as: time to find a specific fact about the record, task completion rate for the actions
25
+ offered on the page, and navigation-back rate (whether users needed to bounce back to search again).
26
+
27
+ ## Solution in web-product
28
+
29
+ ### Layout
30
+
31
+ **Base Layout:** Sidebar Navigation
32
+
33
+ #### Structure
34
+
35
+ ```
36
+ ┌──────┬──────────────────────────────────┐
37
+ │ │ Breadcrumb: List > Record Name │
38
+ │ Side ├──────────────────────────────────┤
39
+ │ bar │ ┌────┐ Record Name [Edit] │
40
+ │ │ │Avat│ Status badge · Metadata │
41
+ │ │ │ar │ │
42
+ │ │ └────┘ │
43
+ │ ├──────────────────────────────────┤
44
+ │ │ [Overview] [Activity] [Related] │ ← tabs
45
+ │ ├──────────────────────────────────┤
46
+ │ │ │
47
+ │ │ Tab content │
48
+ │ │ (fields, chart, table, list) │
49
+ │ │ │
50
+ └──────┴──────────────────────────────────┘
51
+ ```
52
+
53
+ #### Specifications
54
+
55
+ | Element | Value |
56
+ |---------|-------|
57
+ | Sidebar width | 240-280px (collapsible to 64px) |
58
+ | Identity block height | Auto, generous padding (24-32px) |
59
+ | Content padding | 24-32px |
60
+ | Tabs | Underline style, horizontal, below the identity block |
61
+
62
+ ### Design
63
+
64
+ #### Colour Tokens
65
+
66
+ | Element | Token |
67
+ |---------|-------|
68
+ | Page background | `bg-background` |
69
+ | Identity block | `bg-card` or transparent with a bottom `border` |
70
+ | Status badge | Semantic colour per state (e.g. `bg-green-*` active, `bg-muted` inactive) — never colour alone |
71
+ | Tab active indicator | `border-primary` |
72
+
73
+ #### Identity Block Pattern
74
+
75
+ | Element | Specification |
76
+ |---------|-----------------|
77
+ | Avatar/logo | Left, fixed size (e.g. 64-96px) |
78
+ | Title | `text-2xl font-bold` — record name |
79
+ | Status/metadata row | `text-sm text-muted-foreground`, badges + key facts inline |
80
+ | Primary actions | Right-aligned, at the same height as the title |
81
+
82
+ #### Typography Hierarchy
83
+
84
+ | Element | Style |
85
+ |---------|-------|
86
+ | Record name | `text-2xl font-bold` |
87
+ | Section headers (within tabs) | `text-lg font-semibold` |
88
+ | Field labels | `text-sm text-muted-foreground` |
89
+ | Field values | `text-base` |
90
+
91
+ Charts within a detail page (e.g. a trend for this record) reuse
92
+ [dashboard](./dashboard.md)'s Chart Container Pattern rather than a separate spec.
93
+
94
+ ### Content
95
+
96
+ #### Identity Block Copy
97
+
98
+ **Structure:**
99
+
100
+ 1. Record name (title)
101
+ 2. Status badge (current state, in plain language — "Active", "On hold", not a raw enum)
102
+ 3. Key metadata inline ("Joined Mar 2023", "12 direct reports")
103
+
104
+ #### Tab Labels
105
+
106
+ - Name tabs for what's inside, not generic labels ("Engagements", not "Tab 2")
107
+ - Default to the tab most users need first (usually "Overview")
108
+
109
+ #### Empty States
110
+
111
+ | Scenario | Message |
112
+ |----------|---------|
113
+ | No activity/history yet | "No activity yet" |
114
+ | A related list is empty | "No [related items] yet" + a create/add action, if applicable |
115
+ | Field has no value | Show "—" or "Not set", never a blank space |
116
+
117
+ #### Loading States
118
+
119
+ - Identity block: skeleton for avatar + title + badge
120
+ - Tab content: skeleton matching the eventual layout (fields, table, or chart)
121
+
122
+ ### Accessibility
123
+
124
+ **Base requirements:** See [accessibility foundations](../../../accessibility/accessibility.md) and
125
+ [web accessibility](../accessibility.md)
126
+
127
+ **Scenario-specific:**
128
+
129
+ | Requirement | Implementation |
130
+ |--------------|------------------|
131
+ | Status conveyed beyond colour | Badge carries a text label, not colour alone |
132
+ | Tabs | Use the native tab pattern (`role="tablist"`, arrow-key navigation), not styled links |
133
+ | Heading structure | Record name is the page's single H1; tab section headers are H2 |
134
+ | Back navigation | Breadcrumb is a real link, keyboard-reachable before the identity block |
135
+
136
+ ### Implementation
137
+
138
+ #### State Management
139
+
140
+ | State | Handling |
141
+ |-------|----------|
142
+ | Loading | Skeleton identity block + tab content |
143
+ | Not found | Explain the record doesn't exist or was removed; link back to the list |
144
+ | No permission | Explain access is restricted; do not reveal partial data |
145
+ | Error | Show error message with retry |
146
+
147
+ #### Responsive Behaviour
148
+
149
+ | Breakpoint | Identity block | Tabs |
150
+ |------------|------------------|------|
151
+ | Mobile | Stacks: avatar, then name, then actions | Horizontal scroll |
152
+ | Tablet | Inline, actions may wrap below | Horizontal, all visible if they fit |
153
+ | Desktop | Fully inline | Horizontal |
154
+
155
+ ## Best Practices
156
+
157
+ ### Do's
158
+
159
+ 1. **Put identity above the fold** - Name and status visible without scrolling
160
+ 2. **Keep actions near identity** - Not buried in a tab
161
+ 3. **Provide a way back** - Breadcrumb to the list/hub the user came from
162
+
163
+ ### Don'ts
164
+
165
+ 1. **Don't split identity across tabs** - Name, status, and primary actions stay in the identity block
166
+ 2. **Don't use colour alone for status** - Pair with a text label
167
+ 3. **Don't nest another full page inside a tab** - Tabs hold sections of this record, not separate pages
168
+
169
+ ### Common Mistakes
170
+
171
+ | Mistake | Solution |
172
+ |---------|----------|
173
+ | No way back to the list | Add a breadcrumb or back link above the identity block |
174
+ | Status shown only as a colour dot | Add a text label alongside |
175
+ | Everything crammed onto one scrolling page | Split into tabs once there are 3+ distinct sections |
176
+
177
+ ### Edge Cases
178
+
179
+ | Case | Handling |
180
+ |------|----------|
181
+ | Record has no name/title | Fall back to a stable identifier (ID, email) |
182
+ | Record was deleted after being linked to | Show a "not found" state, not a blank page |
183
+ | User lacks permission for one tab only | Disable that tab with a reason, rather than hiding the whole page |
184
+
185
+ ## Examples
186
+
187
+ The sidebar-navigation frame above is the canonical detail page: identity block, tabs, and tab content
188
+ reached from [browse and filter](./browse-and-filter.md) or a [section hub](./section-hub.md). Charts
189
+ inside a tab reuse [dashboard](./dashboard.md)'s chart container pattern rather than a separate spec.
190
+
191
+ ## Related
192
+
193
+ - [Product Design](../design.md) - Sidebar Navigation layout
194
+ - [Browse and filter](./browse-and-filter.md) - Where a detail page is usually reached from
195
+ - [Dashboard](./dashboard.md) - Chart container pattern, reused here
196
+ - [Accessibility foundations](../../../accessibility/accessibility.md) - Colour and contrast
@@ -0,0 +1,184 @@
1
+ # Help users to know the outcome of their action
2
+
3
+ **User goal:** Know, immediately and unambiguously, whether an action worked — and what, if
4
+ anything, to do next.
5
+
6
+ > **Pattern:** *Help users to…* · single-medium (web-product) — concept and implementation together.
7
+ > Covers what happens immediately after a user takes an action: form submissions, saves, deletes,
8
+ > multi-step transactions, and system-triggered status changes.
9
+
10
+ ## Context
11
+
12
+ A user has just done something — submitted a form, saved a setting, deleted a record, started a
13
+ process. Two failure modes sit on either side of this moment: under-communicating (the user isn't
14
+ sure the action landed, so they retry or abandon) and over-communicating (every action triggers a
15
+ banner or dialog, so real warnings get tuned out).
16
+
17
+ This pattern is scoped to feedback after an action completes or fails. It is not:
18
+
19
+ - Confirmation *before* a destructive action — see [content/confirmations.md](../content/confirmations.md).
20
+ - Validation *while* filling in a form — see [content/errors.md](../content/errors.md) and the
21
+ form-validation section of [complete a form](./complete-a-form.md).
22
+ - Persistent status indicators (RAG dots on a progress tracker) — a separate, related gap; see
23
+ the Badge row in [component-registry.md](../component-registry.md).
24
+
25
+ ## Principles
26
+
27
+ | Principle | Implementation |
28
+ |-----------|----------------|
29
+ | Match feedback weight to the significance of the action | A completed, committed transaction needs a stopping point; a small in-place update doesn't |
30
+ | Write the message before choosing the component | Draft the copy first, then pick the component that matches its severity/weight — not the reverse |
31
+ | One message per priority tier, on screen, at a time | Avoids alert fatigue |
32
+ | Be specific, not generic | Real values (names, numbers, dates), not "an error occurred" |
33
+ | Don't blame the user | "Your changes couldn't be saved," not "You entered invalid data" |
34
+ | Always pair colour with icon + label | Never rely on red/green alone (CVD) |
35
+
36
+ Success shows up as: task completion confirmed without a support contact, low retry/duplicate-submit
37
+ rate, and low dismissal-without-reading rate on assertive messages.
38
+
39
+ ## Solution in web-product
40
+
41
+ ### Layout
42
+
43
+ Placement communicates priority. Cap how many messages can be visible per zone at once.
44
+
45
+ | Zone | Where | Used for | Cap |
46
+ |------|-------|----------|-----|
47
+ | Global | Full-width, above the app shell (see the [system banner region](../design.md#region-breakdown)) | System-wide status only (outage, deprecation, access changes) | 1 at a time, app-wide |
48
+ | Top of content area | Full-width, above the page's main heading or form (see the [Feedback row](../design.md#region-breakdown) in the main content composition table) | Page/section-level feedback tied to a submitted action: error summary, inline confirmation banner | 1 at a time, per content area |
49
+ | Inline | Directly beside/below the specific element it concerns | Field-level validation, helper text | No hard cap, but consolidate rather than crowd — summarise if more than one |
50
+ | Toast | Fixed position, top-right by default | Lightweight, transient task feedback that doesn't need a persistent record | Treat the component's visible-toast default as a ceiling, not a target; most screens should show one at a time |
51
+
52
+ Reserve warning/danger states for when they're genuinely necessary. A page that regularly shows
53
+ more than one top-of-content-area or global message at once signals an underlying issue to
54
+ consolidate, not a reason to stack messages.
55
+
56
+ A confirmation page (application/order/payment/account-creation submitted, with a reference number
57
+ or "what happens next") uses the narrow/centred [Single Column](../design.md#option-3-single-column)
58
+ layout — the same shape as auth/forms/wizards, not a distinct page type. It answers, in order: what
59
+ was completed, what happens next and when, contact/help info, and a way to keep a record (print,
60
+ PDF, email).
61
+
62
+ ### Design
63
+
64
+ | Element | Token |
65
+ |---------|-------|
66
+ | Positive feedback | `bg-callout-positive`, `border-callout-positive-foreground` |
67
+ | Informational feedback | `bg-callout-info`, `border-callout-info-foreground` |
68
+ | Warning feedback | `bg-callout-warning`, `border-callout-warning-foreground` |
69
+ | Error/issue feedback | `bg-callout-issue`, `border-callout-issue-foreground` |
70
+ | Success text (inline, non-callout) | `text-success` |
71
+
72
+ Every state pairs its colour with an icon and a text label — never colour alone.
73
+
74
+ ### Content
75
+
76
+ Use the existing anatomy in [content/errors.md](../content/errors.md) (what went wrong → why, if
77
+ it helps → how to fix) for failures, and [content/confirmations.md](../content/confirmations.md)
78
+ for pre-action dialogs. For the feedback copy this pattern adds:
79
+
80
+ - Lead with the outcome, not the mechanism: "Your changes were saved," not "Update successful."
81
+ - State the outcome before any secondary detail.
82
+ - Confirmation-page body copy answers, in order: what was completed, what happens next, and when.
83
+ - Keep toast copy to one short sentence; if it needs more than that, it's a callout or a page, not
84
+ a toast.
85
+
86
+ ### Accessibility
87
+
88
+ - Toasts: reserve an assertive announcement for errors that need immediate attention; default to a
89
+ polite announcement for success/info so screen reader users aren't interrupted mid-task.
90
+ - Confirmation pages: the page `<title>` reflects completion (e.g. "Application complete").
91
+ - Error summaries: move keyboard focus to the summary on submission failure; each error links to
92
+ its field via `aria-describedby` (see [complete a form](./complete-a-form.md)'s Form Validation
93
+ Pattern). A validation-failure summary needs assertive announcement on submit, which a passive
94
+ live region doesn't give — the composing component takes on this behaviour itself.
95
+ - Never rely on colour alone — every state pairs an icon with its colour and label.
96
+
97
+ ### Implementation
98
+
99
+ Choose the mechanism in order:
100
+
101
+ 1. Is this warning the user *before* an irreversible/destructive action? → Not this pattern; use
102
+ the confirmation-dialog pattern in [content/confirmations.md](../content/confirmations.md).
103
+ 2. Did the action complete (or fail) a distinct task the user came to this page/flow to do — an
104
+ application, an order, an onboarding step, a payment, a submission with a reference number —
105
+ such that the user would want a stopping point, a record, or a "you're done, here's what's next"
106
+ moment? → Confirmation page.
107
+ 3. Did it complete a meaningful sub-task while the user stays on a multi-purpose page — one card in
108
+ a settings page, one step submitted mid-wizard — where a persistent record isn't needed, but a
109
+ toast alone would be too easy to miss or dismiss before the user has registered it? → Inline
110
+ confirmation banner, in the page/section, above or below the content it relates to.
111
+ 4. Is this a small, low-stakes, in-place update — a single field, a toggle, a preference — where the
112
+ user stays in flow and keeps working immediately? → Toast.
113
+ 5. Did something fail? → Component depends on whether the failure is field-level, form-level, or
114
+ system-level; see the table below.
115
+
116
+ | Scenario | Component | Why not the alternatives |
117
+ |----------|-----------|---------------------------|
118
+ | Application/order/payment/account-creation submitted; reference number or "what happens next" exists | Confirmation page | A toast can be dismissed or missed and leaves nothing to point back to |
119
+ | One settings card saved, user stays on a multi-section settings page | Inline confirmation banner in that card/section | A page navigation would be disproportionate; a toast risks being missed if the user has scrolled away |
120
+ | Single field/toggle/preference updated in place | Toast | Lightweight, non-blocking, matches the size of the change |
121
+ | Field-level validation error | Inline error message next to the field | See [content/errors.md](../content/errors.md) / [complete a form](./complete-a-form.md) |
122
+ | Multiple fields fail on submit | Error summary at top of form, focus moved to it | Same |
123
+ | System-wide status (outage, deprecation, maintenance) | Global banner, top of the app, above navigation | Not tied to a single user action; needs the highest-priority placement |
124
+
125
+ **Component guide:** see [component-registry.md](../component-registry.md) for the Callout,
126
+ Sonner, AlertDialog, and Error Summary entries — the consumer package `agent-docs/` or overlay
127
+ carries each component's implementation doc.
128
+
129
+ ## Best Practices
130
+
131
+ ### Do's
132
+
133
+ 1. **Choose the mechanism by weight, not habit** — match the component to the significance of the
134
+ action, not what's fastest to implement.
135
+ 2. **Keep exactly one message per priority zone visible at a time.**
136
+ 3. **Write the message first, then pick the component.**
137
+
138
+ ### Don'ts
139
+
140
+ 1. **Don't use a toast for anything the user might need to reference later** — receipts, reference
141
+ numbers.
142
+ 2. **Don't stack multiple callouts of the same priority on one page.**
143
+ 3. **Don't use warning/danger styling for routine, expected outcomes.**
144
+
145
+ ### Common Mistakes
146
+
147
+ | Mistake | Solution |
148
+ |---------|----------|
149
+ | Toast for a completed transaction with a reference number | Use a confirmation page instead |
150
+ | Multiple top-of-content-area messages at once | Consolidate into one summary |
151
+ | Generic error copy ("An error occurred") | Name the real field/value that failed |
152
+ | Colour-only status signalling | Pair every state with an icon and label |
153
+
154
+ ### Edge Cases
155
+
156
+ | Case | Handling |
157
+ |------|----------|
158
+ | Action succeeds but a secondary effect fails (e.g. save succeeds, notification email fails) | Report the secondary failure separately, don't block on it |
159
+ | User navigates away before a toast is read | Escalate to an inline banner or confirmation page instead of relying on the toast |
160
+ | Repeated identical toasts in quick succession | Consolidate rather than stack — respect the component's visible-toast ceiling |
161
+
162
+ ## Examples
163
+
164
+ A settings page where one card saves independently uses an inline confirmation banner in that
165
+ card, not a page-level toast or navigation. A multi-step application ending in a reference number
166
+ uses a confirmation page. A single preference toggle uses a toast. A failed multi-field form
167
+ submission uses an error summary at the top of the form with focus moved to it.
168
+
169
+ ## Open questions
170
+
171
+ - **Naming:** is "Help users to know the outcome of their action" the right outcome-framed name, or
172
+ should this split into a `confirm-completion.md` "Pages" pattern plus a separate "Help users
173
+ to…" pattern for the toast/inline tiers?
174
+ - Does an internal business tool need a "feature discovery" message state, distinct from this
175
+ pattern's scope?
176
+
177
+ ## Related
178
+
179
+ - [Confirmations](../content/confirmations.md) — pre-action dialogs
180
+ - [Errors](../content/errors.md) — error copy anatomy
181
+ - [Complete a form](./complete-a-form.md) — form validation timing and layout
182
+ - [Product Design](../design.md) — region model and layout options
183
+ - [Component decision tree](../component-decision-tree.md)
184
+ - [Component registry](../component-registry.md) — Callout, Sonner, AlertDialog, Error Summary
@@ -0,0 +1,174 @@
1
+ # Section hub
2
+
3
+ **User goal:** Get an overview of what's available in a section, and choose the right sub-page to go
4
+ into next — without a table or a task, just clear options.
5
+
6
+ > **Pattern:** *Pages* · single-medium (web-product) — concept and implementation together.
7
+ > Covers category landing pages, navigation hubs, and index pages that fan out to detail or sub-pages.
8
+
9
+ ## Context
10
+
11
+ A section hub exists when there is no single task to complete — the user is orienting themselves inside
12
+ a part of the product and choosing where to go. They want to see what's inside the section at a glance,
13
+ understand what each option leads to before clicking, and reach the right sub-page in as few clicks as
14
+ possible.
15
+
16
+ ## Principles
17
+
18
+ | Principle | Implementation |
19
+ |-----------|-----------------|
20
+ | Scannable options | Consistent card layout, one glance per option |
21
+ | Descriptive, not decorative | Card copy states what's inside, not just a label |
22
+ | Flat where possible | Avoid hubs that just lead to more hubs — reach real content in 1-2 clicks |
23
+ | Recency/relevance surfaced | Highlight recently used or most relevant sub-pages, if the data exists |
24
+
25
+ Success shows up as: time to reach a sub-page, click-through rate per card, and bounce rate on the hub
26
+ itself (users leaving without picking anything).
27
+
28
+ ## Solution in web-product
29
+
30
+ ### Layout
31
+
32
+ **Base Layout:** Sidebar Navigation
33
+
34
+ #### Structure
35
+
36
+ ```
37
+ ┌──────┬──────────────────────────────────┐
38
+ │ │ Header: Section Title + Actions │
39
+ │ Side ├──────────────────────────────────┤
40
+ │ bar │ Optional: intro text / search │
41
+ │ ├──────────────────────────────────┤
42
+ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
43
+ │ │ │Card│ │Card│ │Card│ │Card│ │
44
+ │ │ └────┘ └────┘ └────┘ └────┘ │
45
+ │ │ ┌────┐ ┌────┐ ┌────┐ │
46
+ │ │ │Card│ │Card│ │Card│ │
47
+ │ │ └────┘ └────┘ └────┘ │
48
+ └──────┴──────────────────────────────────┘
49
+ ```
50
+
51
+ #### Specifications
52
+
53
+ | Element | Value |
54
+ |---------|-------|
55
+ | Sidebar width | 240-280px (collapsible to 64px) |
56
+ | Card grid | 3-4 columns desktop, 2 tablet, 1 mobile |
57
+ | Grid gap | 16-24px |
58
+ | Content padding | 24-32px |
59
+
60
+ ### Design
61
+
62
+ #### Colour Tokens
63
+
64
+ | Element | Token |
65
+ |---------|-------|
66
+ | Page background | `bg-background` |
67
+ | Card background | `bg-card` |
68
+ | Card border | `border` |
69
+ | Card hover | `bg-accent` or subtle elevation, not colour alone |
70
+
71
+ #### Card Pattern
72
+
73
+ | Element | Specification |
74
+ |---------|-----------------|
75
+ | Container | `bg-card`, `border`, 6px radius, whole card is the click target |
76
+ | Icon or thumbnail | Top or left, optional |
77
+ | Title | `text-base font-semibold` |
78
+ | Description | `text-sm text-muted-foreground`, 1-2 lines |
79
+ | Metadata | Optional: item count, last updated |
80
+
81
+ #### Typography Hierarchy
82
+
83
+ | Element | Style |
84
+ |---------|-------|
85
+ | Page title | `text-2xl font-bold` |
86
+ | Card title | `text-base font-semibold` |
87
+ | Card description | `text-sm text-muted-foreground` |
88
+
89
+ ### Content
90
+
91
+ #### Card Copy
92
+
93
+ **Structure:**
94
+
95
+ 1. Title (the sub-page name)
96
+ 2. Description (what the user will find there, not a repeat of the title)
97
+ 3. Optional metadata (count, last updated)
98
+
99
+ **Example Content:**
100
+
101
+ | Title | Description |
102
+ |-------|--------------|
103
+ | "Client Accounts" | "128 active accounts across 6 regions" |
104
+ | "Engagement Reports" | "Weekly status reports by engagement" |
105
+
106
+ #### Empty States
107
+
108
+ | Scenario | Message |
109
+ |----------|---------|
110
+ | Section has no sub-pages yet | "Nothing here yet" + guidance or a create action, if the user can add one |
111
+ | Access-restricted sub-pages | Show the card, disabled, with a short reason ("Ask an admin for access") rather than hiding it |
112
+
113
+ ### Accessibility
114
+
115
+ **Base requirements:** See [accessibility foundations](../../../accessibility/accessibility.md) and
116
+ [web accessibility](../accessibility.md)
117
+
118
+ **Scenario-specific:**
119
+
120
+ | Requirement | Implementation |
121
+ |--------------|------------------|
122
+ | Card as link | Whole card is a single `<a>`/link element, not a div with a click handler |
123
+ | Focus order | Cards in reading order (left to right, top to bottom), matching the visual grid |
124
+ | Disabled cards | `aria-disabled`, with the reason available to screen readers, not just a visual dim |
125
+
126
+ ### Implementation
127
+
128
+ #### Responsive Behaviour
129
+
130
+ | Breakpoint | Card grid |
131
+ |------------|------------|
132
+ | Mobile | 1 column |
133
+ | Tablet | 2 columns |
134
+ | Desktop | 3-4 columns |
135
+
136
+ ## Best Practices
137
+
138
+ ### Do's
139
+
140
+ 1. **Make the whole card clickable** - Not just the title
141
+ 2. **Write descriptions that inform the choice** - Not filler text
142
+ 3. **Keep the grid flat** - Don't nest another hub behind a hub card unless unavoidable
143
+
144
+ ### Don'ts
145
+
146
+ 1. **Don't mix hub cards with task actions** - A hub orients; a dashboard KPI row asks for a decision. Keep them on separate pages
147
+ 2. **Don't hide restricted sections** - Show them disabled with a reason, so users understand the section exists
148
+
149
+ ### Common Mistakes
150
+
151
+ | Mistake | Solution |
152
+ |---------|----------|
153
+ | Cards with no description | Add a one-line description of what's inside |
154
+ | Inconsistent card heights | Fix a minimum height or truncate description consistently |
155
+ | Hub leads to another hub leads to another hub | Flatten navigation; link deep sections directly from the sidebar instead |
156
+
157
+ ### Edge Cases
158
+
159
+ | Case | Handling |
160
+ |------|----------|
161
+ | Single sub-page in a section | Consider skipping the hub and linking directly to it |
162
+ | Very long list of sub-pages (20+) | Add search/filter above the grid, or group under sub-headings |
163
+
164
+ ## Examples
165
+
166
+ A section hub is a card grid inside the same sidebar-navigation shell as [dashboard](./dashboard.md) and
167
+ [browse and filter](./browse-and-filter.md) — only the main-content body differs: cards instead of KPIs
168
+ or a table.
169
+
170
+ ## Related
171
+
172
+ - [Product Design](../design.md) - Sidebar Navigation layout
173
+ - [Detail page](./detail-page.md) - Where a hub card usually leads
174
+ - [Accessibility foundations](../../../accessibility/accessibility.md) - Colour and contrast
@@ -156,7 +156,7 @@ Authentication pages should minimise distraction and focus users on the task.
156
156
  - Show requirements list below password field
157
157
  - Check/uncheck as requirements are met
158
158
  - Unmet: `text-muted-foreground`
159
- - Met: `text-green-600` with checkmark
159
+ - Met: `text-success` with checkmark
160
160
 
161
161
  #### Password Reset Flow
162
162
 
@@ -1,8 +1,8 @@
1
1
  {
2
- "packageVersion": "0.15.1",
2
+ "packageVersion": "0.15.2",
3
3
  "rules": {
4
- "snapshotRef": "bdf7dafd019a6dadb8369bc4fd2d13964f6a111c",
5
- "snapshotDate": "2026-07-14T12:19:21.257Z",
4
+ "snapshotRef": "2048d9c4b1951142ff4aba363a9d50917837796c",
5
+ "snapshotDate": "2026-07-15T11:15:23.609Z",
6
6
  "sourceRepo": "equalexperts/kuat-agent-docs",
7
7
  "loadingPath": "agent-docs/rules/LOADING-consumer.md"
8
8
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  **Package:** @equal-experts/kuat-core (and mirrored in kuat-react / kuat-vue agent-docs)
4
4
 
5
- **Snapshot:** bdf7dafd019a
5
+ **Snapshot:** 2048d9c4b195
6
6
 
7
7
  ## Default load (web product / marketing UI)
8
8
 
@@ -82,7 +82,7 @@ const G = /* @__PURE__ */ l({
82
82
  _: 3
83
83
  }));
84
84
  }
85
- }), Q = /* @__PURE__ */ _(E, [["__scopeId", "data-v-630d3e5f"]]), z = /* @__PURE__ */ l({
85
+ }), Q = /* @__PURE__ */ _(E, [["__scopeId", "data-v-8ee0a42e"]]), z = /* @__PURE__ */ l({
86
86
  __name: "AlertDialogDescription",
87
87
  props: {
88
88
  asChild: { type: Boolean },
@@ -1,5 +1,5 @@
1
1
  import { c as l } from "./utils-DLUjLwnh.js";
2
- import { _ as r, A as t, a as i, b as g, c as s, d as A, e as D, f as c, g as n } from "./AlertDialogTrigger.vue_vue_type_script_setup_true_lang-DosgAcSM.js";
2
+ import { _ as r, A as t, a as i, b as g, c as s, d as A, e as D, f as c, g as n } from "./AlertDialogTrigger.vue_vue_type_script_setup_true_lang-Ccs_lGKx.js";
3
3
  export {
4
4
  r as AlertDialog,
5
5
  t as AlertDialogAction,
package/dist/index.js CHANGED
@@ -13,7 +13,7 @@ import { a as yo, I as Co, d as wo, c as Ao, b as To, i as $o } from "./index-lZ
13
13
  import { _ as Lo, a as xo, b as Ho, d as Vo, c as Do } from "./CarouselNext.vue_vue_type_script_setup_true_lang-BvnpmYmA.js";
14
14
  import { _ as Mo, a as Oo, b as Ro, d as No, c as Bo } from "./KuatCarouselNext.vue_vue_type_script_setup_true_lang-BnDrXaGV.js";
15
15
  import { _ as Uo, b as Fo, A as Go, a as Zo } from "./AccordionTrigger-BGVFRlgt.js";
16
- import { _ as qo, A as Wo, a as zo, b as Yo, c as Xo, d as jo, e as Jo, f as Qo, g as el } from "./AlertDialogTrigger.vue_vue_type_script_setup_true_lang-DosgAcSM.js";
16
+ import { _ as qo, A as Wo, a as zo, b as Yo, c as Xo, d as jo, e as Jo, f as Qo, g as el } from "./AlertDialogTrigger.vue_vue_type_script_setup_true_lang-Ccs_lGKx.js";
17
17
  import { B as tl, b as sl } from "./index-DgHHiJiZ.js";
18
18
  import { b as ll, a as rl, S as nl, s as il } from "./index-DMDbjdfX.js";
19
19
  import { a as dl, b as cl, T as _l, t as hl } from "./index-BMnFWBPu.js";