@adia-ai/a2ui-corpus 0.6.37 → 0.6.39

package/catalog-a2ui_0_9_rules.txt

@@ -257,6 +257,7 @@
 - One notification entry inside <feed-ui>. Title + description + optional icon + auto-dismiss timer.
 - Typically created programmatically via UIFeed.post(...); do not place declaratively.
 - Different from <alert-ui> (inline persistent) and <toast-ui> (standalone ephemeral); feed-item is feed-scoped.
+- For "notification deep-link" pattern: post with action + onAction. Click navigates and auto-dismisses (router.push() / location.href / api.markRead()).
 
 ## Feed
 - Top-layer notification feed channel — singleton per position (top-right, bottom-center, etc.) mounted lazily into document.body.
@@ -309,6 +310,12 @@
 - Set aspect-ratio attribute to lock dimensions and prevent layout shift during load.
 - For decorative-only images, set alt='' and aria-hidden='true' so screen readers skip them.
 
+## InlineEdit
+- Use inline-edit-ui for click-to-edit titles, draft names, table-cell text, breadcrumb labels — anywhere the user expects to edit text without opening a dialog.
+- inline-edit-ui IS form-participating (extends UIFormElement). Pair with a hidden <form> + name="..." to submit edits as a field.
+- Distinct from <input-ui> (always shows input chrome) and from <field-ui> (stacked label + input composition). inline-edit reads as text in the static state.
+- Listen to `change` event (detail.value, detail.oldValue) for commit; `cancel` for Escape. Default commit=blur saves on focusout + Enter.
+
 ## InlineMessage
 - In-flow annotation under a form input (validation feedback, hint copy, inline confirmation). Severity via [variant] (info, success, warning, danger).
 - For overlay / banner-style notices use <alert-ui> instead; for transient toasts use <toast-ui>.
@@ -374,6 +381,11 @@
 - Do NOT use <LoadingOverlay> to disable a form during submit — use <Button type="submit" loading> for the submit affordance.
 - The default slot accepts any busy indicator. When empty, a centered <Spinner size="lg"> is auto-stamped. Slot a <Skeleton> stack for placeholder-shaped loading; slot <Progress value=…> when the wait is determinate.
 
+## Mark
+- Use mark-ui for search-result match highlighting — wrap the matched substring in <mark-ui> within the surrounding text. Inline; preserves text flow.
+- variant=warning (default) is the conventional yellow-marker tone; info for brand-color highlights; success for "new since" / "added" emphasis; danger for "removed" / "deleted-line" in diff prose.
+- Distinct from <text-ui strong> (weight emphasis), <tag-ui> (block pill), <code-ui> (monospace). mark-ui is specifically the "visual rail behind matched text" use case.
+
 ## MenuDivider
 - <menu-divider-ui> MUST be a direct child of <menu-ui>; a raw <hr> will render OUTSIDE the popover because <menu-ui> only hoists <menu-item-ui> and <menu-divider-ui> children via its direct-child selector.
 - Use to group items by semantic tier — primary actions → secondary → destructive (danger). Avoid leading / trailing dividers and consecutive dividers; they produce visual noise without grouping value.
@@ -741,6 +753,18 @@
 - Set [delay=0] only for high-frequency exploratory surfaces (sparkline ticks, chart hover). Keep the default 400ms delay elsewhere to avoid hover noise.
 - [indicator] (dot | line | dashed) is meaningful only in pointer mode for per-series swatches. Omit it or leave default "none" for text-mode tooltips.
 
+## TourStep
+- Single step inside <tour-ui>. Declares target (CSS selector) + title + body content.
+- target is a CSS selector (e.g. "#dashboard", ".filters button"), NOT a bare ID. Use the # prefix.
+- Renders nothing on its own — tour-ui orchestrates the popover stamping when the step becomes active.
+
+## Tour
+- Use tour-ui for spotlight-driven product tours / walkthroughs — sequence of steps each targeting a CSS-selector-resolved element.
+- Children are <tour-step target="..." title="..."> with body content as the default slot. tour-ui reads them in DOM order.
+- Set [auto-start] for first-run flows (paired with [storage-key] so it only shows once). Otherwise call .start() programmatically from a "Take the tour" button.
+- Distinct from <onboarding-checklist-ui> (persistent setup todo-list, user-paced) and <tooltip-ui> (single hover hint, no orchestration).
+- Listen to `tour-finish` for "user completed the tour" analytics; `tour-skip` for "user opted out". Both fire once per session.
+
 ## TreeItem
 - <tree-item-ui> MUST be a direct or nested descendant of <tree-ui>. It is not a standalone primitive — outside a <tree-ui> parent, selection / expansion / keyboard nav don't wire.
 - Provide a stable [value] attribute on every <tree-item-ui> that consumers will select. The `tree-select` event's detail.value is the identifier downstream code reads to know which node was picked.