@adia-ai/a2ui-corpus 0.6.41 → 0.6.42
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.
- package/CHANGELOG.md +16 -0
- package/catalog-a2ui_0_9.json +11 -25
- package/catalog-a2ui_0_9_rules.txt +2 -0
- package/chunk-embeddings.json +1 -1
- package/chunks/_index.json +4049 -2389
- package/chunks/accordion-settings.json +1 -1
- package/chunks/activity-feed.json +389 -0
- package/chunks/agent-canvas-shell.json +1 -1
- package/chunks/agent-command-palette-search.json +1 -1
- package/chunks/agent-reasoning-collapsed.json +3 -3
- package/chunks/agent-tool-call-result.json +1 -1
- package/chunks/agent-trace-timeline.json +1 -1
- package/chunks/ai-streaming-response.json +1 -1
- package/chunks/alert-banner.json +1 -1
- package/chunks/analytics-chart.json +155 -0
- package/chunks/{dashboard-spark-cards.json → analytics-sparklines-dashboard.json} +18 -13
- package/chunks/api-key-table.json +116 -0
- package/chunks/app-product-listing-card.json +214 -0
- package/chunks/audit-log.json +133 -0
- package/chunks/auth-account-deleted-actions.json +1 -1
- package/chunks/auth-account-deleted.json +1 -1
- package/chunks/auth-card-content.json +1 -1
- package/chunks/auth-card-header.json +1 -1
- package/chunks/auth-email-entry.json +1 -1
- package/chunks/auth-email-verify-confirm.json +1 -1
- package/chunks/auth-email-verify.json +1 -1
- package/chunks/auth-forbidden-actions.json +1 -1
- package/chunks/auth-forbidden.json +1 -1
- package/chunks/auth-invite-actions.json +1 -1
- package/chunks/auth-invite-team-card.json +1 -1
- package/chunks/auth-link-expired-form.json +1 -1
- package/chunks/auth-link-expired.json +1 -1
- package/chunks/auth-locked-account.json +1 -1
- package/chunks/auth-locked-recovery-options.json +1 -1
- package/chunks/auth-mfa-enrollment-submit.json +1 -1
- package/chunks/auth-mfa-enrollment.json +1 -1
- package/chunks/auth-mfa-fallback-actions.json +1 -1
- package/chunks/auth-mfa-recovery.json +1 -1
- package/chunks/auth-new-password-form.json +1 -1
- package/chunks/auth-new-password.json +1 -1
- package/chunks/auth-oauth-fallback-actions.json +1 -1
- package/chunks/auth-oauth-interstitial.json +1 -1
- package/chunks/auth-password-challenge.json +1 -1
- package/chunks/auth-password-reset-form.json +1 -1
- package/chunks/auth-password-reset.json +1 -1
- package/chunks/auth-profile-form.json +1 -1
- package/chunks/auth-profile-setup.json +1 -1
- package/chunks/auth-reset-sent.json +1 -1
- package/chunks/auth-session-expired-actions.json +1 -1
- package/chunks/auth-session-expired.json +11 -6
- package/chunks/auth-signin-card-email.json +1 -1
- package/chunks/auth-signin-card-magic-link.json +22 -29
- package/chunks/auth-signin-card-mfa.json +1 -1
- package/chunks/auth-signin-card-otp.json +1 -1
- package/chunks/auth-signin-card-password.json +1 -1
- package/chunks/auth-signin-card-recovery.json +1 -1
- package/chunks/auth-signout-actions.json +1 -1
- package/chunks/auth-signout.json +1 -1
- package/chunks/auth-signup-email-entry.json +1 -1
- package/chunks/auth-signup-entry.json +1 -1
- package/chunks/auth-signup-social-auths.json +1 -1
- package/chunks/auth-signup-verify.json +1 -1
- package/chunks/auth-social-auths.json +1 -1
- package/chunks/auth-sso-providers.json +1 -1
- package/chunks/auth-sso-required.json +1 -1
- package/chunks/auth-team-invite.json +1 -1
- package/chunks/avatar-group-overflow.json +1 -1
- package/chunks/{users-table-badge.json → badge-variants-table.json} +27 -12
- package/chunks/billing-overview.json +234 -0
- package/chunks/billing-progress-label.json +101 -0
- package/chunks/blog-post-card.json +189 -0
- package/chunks/{breadcrumb-nav.json → breadcrumb-navigation.json} +13 -9
- package/chunks/calendar-month-view.json +23 -29
- package/chunks/card-grid-images.json +459 -0
- package/chunks/card-header-with-description.json +1 -1
- package/chunks/{agent-activity-feed.json → changelog-activity-feed.json} +22 -11
- package/chunks/chart-with-filter-pills.json +1 -1
- package/chunks/chat-page-shell.json +1 -1
- package/chunks/chat-streaming-surface.json +3 -20
- package/chunks/code-snippet.json +119 -0
- package/chunks/color-picker-swatches.json +1 -1
- package/chunks/command-palette.json +229 -18
- package/chunks/commerce-pricing-tiers.json +1 -1
- package/chunks/comparison-table.json +4 -4
- package/chunks/contact-form.json +156 -0
- package/chunks/conversion-funnel-6step.json +33 -18
- package/chunks/dashboard-acquisition-panel.json +1 -1
- package/chunks/dashboard-admin-page.json +25 -7
- package/chunks/dashboard-audience-kpis.json +1 -1
- package/chunks/dashboard-audience-panel.json +206 -84
- package/chunks/dashboard-behavior-panel.json +1 -1
- package/chunks/dashboard-chart-recent.json +19 -5
- package/chunks/dashboard-cohort-retention.json +1 -1
- package/chunks/dashboard-conversion-panel.json +22 -13
- package/chunks/dashboard-country-list.json +1 -1
- package/chunks/dashboard-filter-bar.json +1 -1
- package/chunks/dashboard-funnel.json +21 -12
- package/chunks/dashboard-notifications-panel.json +122 -73
- package/chunks/dashboard-overview-panel.json +30 -18
- package/chunks/dashboard-page-header.json +1 -1
- package/chunks/dashboard-pages-table.json +1 -1
- package/chunks/dashboard-quick-actions.json +1 -1
- package/chunks/dashboard-reports-panel.json +1 -1
- package/chunks/dashboard-reports-table.json +1 -1
- package/chunks/dashboard-storage-card.json +25 -13
- package/chunks/dashboard-tabs.json +1 -1
- package/chunks/dashboard-team-actions-storage.json +27 -15
- package/chunks/dashboard-team-list.json +1 -1
- package/chunks/dashboard-traffic-channels.json +1 -1
- package/chunks/dashboard-transactions-table.json +1 -1
- package/chunks/data-import-wizard.json +396 -0
- package/chunks/date-range-picker.json +156 -0
- package/chunks/date-time-picker-form.json +19 -16
- package/chunks/divider-text-label.json +1 -1
- package/chunks/doc-editor-shell.json +1 -1
- package/chunks/drawer-2fa-key.json +1 -1
- package/chunks/drawer-2fa-sms.json +1 -1
- package/chunks/drawer-2fa-totp.json +1 -1
- package/chunks/drawer-cancel-sub.json +1 -1
- package/chunks/drawer-change-plan.json +1 -1
- package/chunks/drawer-custom-roles.json +1 -1
- package/chunks/drawer-data-start.json +1 -1
- package/chunks/drawer-delete-account.json +1 -1
- package/chunks/drawer-delete-workspace.json +1 -1
- package/chunks/drawer-discord.json +1 -1
- package/chunks/drawer-figma.json +1 -1
- package/chunks/drawer-first-dashboard.json +1 -1
- package/chunks/drawer-gcal.json +1 -1
- package/chunks/drawer-github.json +1 -1
- package/chunks/drawer-invite.json +15 -5
- package/chunks/drawer-payment-method.json +1 -1
- package/chunks/drawer-report.json +1 -1
- package/chunks/drawer-revoke-session.json +1 -1
- package/chunks/drawer-role.json +1 -1
- package/chunks/drawer-slack.json +1 -1
- package/chunks/drawer-smtp.json +1 -1
- package/chunks/drawer-source.json +1 -1
- package/chunks/drawer-transaction.json +1 -1
- package/chunks/editor-code-pane.json +1 -1
- package/chunks/editor-page-shell.json +1 -1
- package/chunks/email-inbox-list.json +626 -0
- package/chunks/empty-state-danger.json +1 -1
- package/chunks/empty-state-minimal.json +1 -1
- package/chunks/empty-state-warning.json +1 -1
- package/chunks/empty-state.json +18 -16
- package/chunks/error-404-actions.json +1 -1
- package/chunks/error-404.json +1 -1
- package/chunks/error-500-actions.json +1 -1
- package/chunks/error-500.json +1 -1
- package/chunks/error-maintenance-actions.json +1 -1
- package/chunks/error-maintenance.json +1 -1
- package/chunks/error-page-shell.json +1 -1
- package/chunks/faq-accordion.json +40 -149
- package/chunks/feature-grid-icons.json +308 -0
- package/chunks/file-upload-dnd.json +112 -9
- package/chunks/footer-multi-column.json +1 -1
- package/chunks/footer-primary-only.json +1 -1
- package/chunks/form-page-shell.json +1 -1
- package/chunks/gallery-page-shell.json +1 -1
- package/chunks/hero-section-split.json +1 -1
- package/chunks/icon-text-row.json +1 -1
- package/chunks/{image-tile.json → image-caption-tile.json} +11 -3
- package/chunks/image-carousel.json +1 -1
- package/chunks/image-upload-preview.json +1 -1
- package/chunks/import-mapping-flow.json +1 -1
- package/chunks/integrations-grid.json +125 -0
- package/chunks/inventory-list-stock.json +1 -1
- package/chunks/invite-members.json +161 -0
- package/chunks/invoice-line-items.json +482 -0
- package/chunks/kanban-board-3col.json +428 -112
- package/chunks/kanban-page-shell.json +1 -1
- package/chunks/{kbd-shortcuts.json → keyboard-shortcut-display.json} +12 -3
- package/chunks/labeled-textarea.json +1 -1
- package/chunks/leaderboard-table.json +1 -1
- package/chunks/linked-record-row.json +1 -1
- package/chunks/loading-skeleton-placeholder.json +337 -0
- package/chunks/marketing-hero-cta.json +1 -1
- package/chunks/marketing-page-shell.json +1 -1
- package/chunks/masonry-gallery.json +1 -1
- package/chunks/member-edit-drawer.json +1 -1
- package/chunks/metadata-description-list.json +1 -1
- package/chunks/{destructive-confirm-modal.json → modal-dialog-confirm.json} +15 -7
- package/chunks/nav-menu-icons.json +75 -0
- package/chunks/newsletter-subscription.json +193 -0
- package/chunks/{dashboard-notifications-feed.json → notification-badges-feed.json} +141 -76
- package/chunks/{settings-notifications.json → notification-preferences-panel.json} +18 -10
- package/chunks/notification-toast-row.json +21 -21
- package/chunks/onb-completion.json +1 -1
- package/chunks/onb-extension-install.json +1 -1
- package/chunks/onb-hero-welcome.json +1 -1
- package/chunks/onb-import-picker.json +1 -1
- package/chunks/onb-mobile-handoff.json +1 -1
- package/chunks/onb-notification-prefs.json +1 -1
- package/chunks/onb-persona-picker.json +1 -1
- package/chunks/onb-provider-tiles.json +1 -1
- package/chunks/onb-settings-review.json +1 -1
- package/chunks/onb-step-footer.json +1 -1
- package/chunks/onb-step-header.json +1 -1
- package/chunks/onb-step-progress.json +1 -1
- package/chunks/onb-step-shell.json +1 -1
- package/chunks/onb-story-pane.json +1 -1
- package/chunks/onb-tutorial-steps.json +1 -1
- package/chunks/order-tracking-timeline.json +130 -0
- package/chunks/pagination-controls.json +1 -1
- package/chunks/period-comparison.json +233 -0
- package/chunks/permission-matrix-table.json +431 -0
- package/chunks/playground-a2ui.json +1 -1
- package/chunks/playground-app-shell.json +1 -1
- package/chunks/playground-chat.json +1 -1
- package/chunks/playground-construct-canvas.json +1 -1
- package/chunks/playground-css-channel.json +1 -1
- package/chunks/playground-gen-ui.json +12 -3
- package/chunks/playground-render-preview.json +1 -1
- package/chunks/playground-streams-bridge.json +1 -1
- package/chunks/playground-table-toolbar.json +1 -1
- package/chunks/popover-with-content.json +1 -1
- package/chunks/pricing-tiers.json +527 -0
- package/chunks/product-tour.json +156 -0
- package/chunks/progress-tracker-milestones.json +1 -1
- package/chunks/radio-button-group.json +83 -0
- package/chunks/real-time-metrics-dashboard.json +1 -1
- package/chunks/reg-address-form.json +1 -1
- package/chunks/reg-billing-card.json +1 -1
- package/chunks/reg-brand-scrape.json +1 -1
- package/chunks/reg-departments-toggle.json +1 -1
- package/chunks/reg-extended-profile.json +1 -1
- package/chunks/reg-final-done.json +1 -1
- package/chunks/reg-helpdesk-grid.json +1 -1
- package/chunks/reg-import-picker.json +1 -1
- package/chunks/reg-integrations-grid.json +1 -1
- package/chunks/reg-invite-form.json +1 -1
- package/chunks/reg-legal-entity.json +1 -1
- package/chunks/reg-org-chart-review.json +1 -1
- package/chunks/reg-profile-identity.json +1 -1
- package/chunks/reg-step-footer.json +1 -1
- package/chunks/reg-step-header.json +1 -1
- package/chunks/reg-step-progress.json +1 -1
- package/chunks/reg-step-shell.json +1 -1
- package/chunks/reg-story-pane.json +1 -1
- package/chunks/reg-success-summary.json +1 -1
- package/chunks/reg-team-size.json +1 -1
- package/chunks/reg-usecase-picker.json +1 -1
- package/chunks/reg-workspace-name.json +1 -1
- package/chunks/responsive-grid-pattern.json +1 -1
- package/chunks/responsive-kpi-grid.json +1 -1
- package/chunks/responsive-row-pattern.json +1 -1
- package/chunks/responsive-wrap-at-pattern.json +1 -1
- package/chunks/revenue-heatmap.json +81 -0
- package/chunks/role-management.json +268 -0
- package/chunks/search-with-filters.json +30 -17
- package/chunks/section-with-stack.json +1 -1
- package/chunks/{settings-billing-plan.json → segmented-control-billing-tabs.json} +16 -4
- package/chunks/select-multiple-preselected.json +1 -1
- package/chunks/settings-2fa-setup.json +170 -0
- package/chunks/settings-admin-page.json +375 -119
- package/chunks/settings-appearance-theme-panel.json +55 -0
- package/chunks/settings-appearance.json +3 -3
- package/chunks/settings-general-form.json +1 -1
- package/chunks/settings-integrations.json +1 -1
- package/chunks/settings-members-invite.json +1 -1
- package/chunks/settings-page-shell.json +1 -1
- package/chunks/settings-panel.json +248 -0
- package/chunks/settings-profile-security.json +1 -1
- package/chunks/settings-toggle-switches.json +66 -0
- package/chunks/sidebar-nav.json +116 -0
- package/chunks/{sidebar-collapsible-nav.json → sidebar-navigation-panel.json} +30 -15
- package/chunks/slider-range-controls.json +1 -1
- package/chunks/social-media-post-card.json +182 -0
- package/chunks/sortable-search-paginate-table.json +113 -0
- package/chunks/{editor-preview-pane.json → split-pane-editor-preview.json} +11 -3
- package/chunks/{dashboard-kpi-grid.json → stat-cards-kpi-dashboard.json} +22 -10
- package/chunks/status-dashboard.json +240 -0
- package/chunks/{multi-step-wizard.json → stepper-form-wizard.json} +22 -21
- package/chunks/survey-rating-form.json +164 -0
- package/chunks/tabs-with-panels.json +1 -1
- package/chunks/tag-chips-filter.json +93 -0
- package/chunks/team-members-list.json +348 -0
- package/chunks/testimonial-grid.json +1 -1
- package/chunks/testimonials-avatar-cards.json +328 -0
- package/chunks/timeline-events.json +1 -1
- package/chunks/toolbar-icons.json +13 -5
- package/chunks/toolbar-tooltips.json +1 -1
- package/chunks/tooltip-hover-button.json +74 -0
- package/chunks/trial-banner.json +198 -0
- package/chunks/user-identity-row.json +1 -1
- package/chunks/user-onboarding-checklist.json +37 -0
- package/chunks/user-profile-card.json +69 -63
- package/chunks/video-player-controls.json +1 -1
- package/chunks/webhook-config.json +208 -0
- package/package.json +1 -1
- package/chunks/text-card.json +0 -53
|
@@ -0,0 +1,308 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "feature-grid-icons",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "col-ui",
|
|
5
|
+
"page": "/catalog/ui-patterns/app/feature-grid-icons/feature-grid-icons.contents.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"gap": "5"
|
|
10
|
+
},
|
|
11
|
+
"html": "<col-ui gap=\"5\">\n <col-ui align=\"center\" gap=\"1\">\n <text-ui size=\"xl\" weight=\"semibold\">Everything you need to ship faster</text-ui>\n <text-ui color=\"subtle\" text-align=\"center\">Batteries-included primitives, composable by design.</text-ui>\n </col-ui>\n <grid-ui columns=\"1 3@md\" gap=\"5\">\n <col-ui gap=\"3\">\n <icon-ui name=\"lightning\" size=\"32\" color=\"var(--a-accent-strong)\"></icon-ui>\n <col-ui gap=\"1\">\n <text-ui weight=\"semibold\">Blazing fast composition</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">Describe your screen in plain language and get production-ready markup in seconds.</text-ui>\n </col-ui>\n </col-ui>\n\n <col-ui gap=\"3\">\n <icon-ui name=\"lock\" size=\"32\" color=\"var(--a-accent-strong)\"></icon-ui>\n <col-ui gap=\"1\">\n <text-ui weight=\"semibold\">Accessibility built in</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">Every primitive ships with ARIA semantics, keyboard navigation, and focus management.</text-ui>\n </col-ui>\n </col-ui>\n\n <col-ui gap=\"3\">\n <icon-ui name=\"palette\" size=\"32\" color=\"var(--a-accent-strong)\"></icon-ui>\n <col-ui gap=\"1\">\n <text-ui weight=\"semibold\">Fully themeable</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">Token-driven design system with light/dark mode, density, and radius controls out of the box.</text-ui>\n </col-ui>\n </col-ui>\n\n <col-ui gap=\"3\">\n <icon-ui name=\"puzzle-piece\" size=\"32\" color=\"var(--a-accent-strong)\"></icon-ui>\n <col-ui gap=\"1\">\n <text-ui weight=\"semibold\">93+ primitives</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">From atoms to complex shells — cards, tables, modals, charts, and more in a single package.</text-ui>\n </col-ui>\n </col-ui>\n\n <col-ui gap=\"3\">\n <icon-ui name=\"code\" size=\"32\" color=\"var(--a-accent-strong)\"></icon-ui>\n <col-ui gap=\"1\">\n <text-ui weight=\"semibold\">Framework agnostic</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">Vanilla web components — works with React, Vue, Svelte, or plain HTML with no adapter needed.</text-ui>\n </col-ui>\n </col-ui>\n\n <col-ui gap=\"3\">\n <icon-ui name=\"arrow-clockwise\" size=\"32\" color=\"var(--a-accent-strong)\"></icon-ui>\n <col-ui gap=\"1\">\n <text-ui weight=\"semibold\">Light DOM first</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">Full CSS cascade, no shadow-DOM piercing hacks — style any element with your existing toolchain.</text-ui>\n </col-ui>\n </col-ui>\n </grid-ui>\n</col-ui>",
|
|
12
|
+
"source": "catalog/ui-patterns/app/feature-grid-icons/feature-grid-icons.contents.html",
|
|
13
|
+
"metadata": {
|
|
14
|
+
"domain": "content",
|
|
15
|
+
"description": "Feature grid with 6 cells each containing an icon, bold title, and one-line description. Marketing feature showcase layout.",
|
|
16
|
+
"keywords": [
|
|
17
|
+
"feature",
|
|
18
|
+
"grid",
|
|
19
|
+
"icons",
|
|
20
|
+
"icon-ui",
|
|
21
|
+
"grid",
|
|
22
|
+
"marketing",
|
|
23
|
+
"features",
|
|
24
|
+
"highlights",
|
|
25
|
+
"benefits",
|
|
26
|
+
"showcase",
|
|
27
|
+
"6-cell",
|
|
28
|
+
"feature-grid",
|
|
29
|
+
"icon",
|
|
30
|
+
"title",
|
|
31
|
+
"description",
|
|
32
|
+
"grid-ui",
|
|
33
|
+
"landing"
|
|
34
|
+
]
|
|
35
|
+
},
|
|
36
|
+
"captured_at": "2026-05-27T03:59:46.910Z",
|
|
37
|
+
"template": [
|
|
38
|
+
{
|
|
39
|
+
"id": "text",
|
|
40
|
+
"component": "Text",
|
|
41
|
+
"size": "xl",
|
|
42
|
+
"weight": "semibold",
|
|
43
|
+
"textContent": "Everything you need to ship faster"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"id": "text-2",
|
|
47
|
+
"component": "Text",
|
|
48
|
+
"color": "subtle",
|
|
49
|
+
"text-align": "center",
|
|
50
|
+
"textContent": "Batteries-included primitives, composable by design."
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"id": "column",
|
|
54
|
+
"component": "Column",
|
|
55
|
+
"align": "center",
|
|
56
|
+
"gap": "1",
|
|
57
|
+
"children": [
|
|
58
|
+
"text",
|
|
59
|
+
"text-2"
|
|
60
|
+
]
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"id": "lightning",
|
|
64
|
+
"component": "Icon",
|
|
65
|
+
"name": "lightning",
|
|
66
|
+
"size": "32"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"id": "text-3",
|
|
70
|
+
"component": "Text",
|
|
71
|
+
"weight": "semibold",
|
|
72
|
+
"textContent": "Blazing fast composition"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"id": "text-4",
|
|
76
|
+
"component": "Text",
|
|
77
|
+
"color": "subtle",
|
|
78
|
+
"size": "sm",
|
|
79
|
+
"textContent": "Describe your screen in plain language and get production-ready markup in seconds."
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"id": "column-3",
|
|
83
|
+
"component": "Column",
|
|
84
|
+
"gap": "1",
|
|
85
|
+
"children": [
|
|
86
|
+
"text-3",
|
|
87
|
+
"text-4"
|
|
88
|
+
]
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"id": "column-2",
|
|
92
|
+
"component": "Column",
|
|
93
|
+
"gap": "3",
|
|
94
|
+
"children": [
|
|
95
|
+
"lightning",
|
|
96
|
+
"column-3"
|
|
97
|
+
]
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"id": "lock",
|
|
101
|
+
"component": "Icon",
|
|
102
|
+
"name": "lock",
|
|
103
|
+
"size": "32"
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"id": "text-5",
|
|
107
|
+
"component": "Text",
|
|
108
|
+
"weight": "semibold",
|
|
109
|
+
"textContent": "Accessibility built in"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"id": "text-6",
|
|
113
|
+
"component": "Text",
|
|
114
|
+
"color": "subtle",
|
|
115
|
+
"size": "sm",
|
|
116
|
+
"textContent": "Every primitive ships with ARIA semantics, keyboard navigation, and focus management."
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"id": "column-5",
|
|
120
|
+
"component": "Column",
|
|
121
|
+
"gap": "1",
|
|
122
|
+
"children": [
|
|
123
|
+
"text-5",
|
|
124
|
+
"text-6"
|
|
125
|
+
]
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"id": "column-4",
|
|
129
|
+
"component": "Column",
|
|
130
|
+
"gap": "3",
|
|
131
|
+
"children": [
|
|
132
|
+
"lock",
|
|
133
|
+
"column-5"
|
|
134
|
+
]
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"id": "palette",
|
|
138
|
+
"component": "Icon",
|
|
139
|
+
"name": "palette",
|
|
140
|
+
"size": "32"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"id": "text-7",
|
|
144
|
+
"component": "Text",
|
|
145
|
+
"weight": "semibold",
|
|
146
|
+
"textContent": "Fully themeable"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"id": "text-8",
|
|
150
|
+
"component": "Text",
|
|
151
|
+
"color": "subtle",
|
|
152
|
+
"size": "sm",
|
|
153
|
+
"textContent": "Token-driven design system with light/dark mode, density, and radius controls out of the box."
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"id": "column-7",
|
|
157
|
+
"component": "Column",
|
|
158
|
+
"gap": "1",
|
|
159
|
+
"children": [
|
|
160
|
+
"text-7",
|
|
161
|
+
"text-8"
|
|
162
|
+
]
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"id": "column-6",
|
|
166
|
+
"component": "Column",
|
|
167
|
+
"gap": "3",
|
|
168
|
+
"children": [
|
|
169
|
+
"palette",
|
|
170
|
+
"column-7"
|
|
171
|
+
]
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"id": "puzzle-piece",
|
|
175
|
+
"component": "Icon",
|
|
176
|
+
"name": "puzzle-piece",
|
|
177
|
+
"size": "32"
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"id": "text-9",
|
|
181
|
+
"component": "Text",
|
|
182
|
+
"weight": "semibold",
|
|
183
|
+
"textContent": "93+ primitives"
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"id": "text-10",
|
|
187
|
+
"component": "Text",
|
|
188
|
+
"color": "subtle",
|
|
189
|
+
"size": "sm",
|
|
190
|
+
"textContent": "From atoms to complex shells — cards, tables, modals, charts, and more in a single package."
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"id": "column-9",
|
|
194
|
+
"component": "Column",
|
|
195
|
+
"gap": "1",
|
|
196
|
+
"children": [
|
|
197
|
+
"text-9",
|
|
198
|
+
"text-10"
|
|
199
|
+
]
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
"id": "column-8",
|
|
203
|
+
"component": "Column",
|
|
204
|
+
"gap": "3",
|
|
205
|
+
"children": [
|
|
206
|
+
"puzzle-piece",
|
|
207
|
+
"column-9"
|
|
208
|
+
]
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"id": "code",
|
|
212
|
+
"component": "Icon",
|
|
213
|
+
"name": "code",
|
|
214
|
+
"size": "32"
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"id": "text-11",
|
|
218
|
+
"component": "Text",
|
|
219
|
+
"weight": "semibold",
|
|
220
|
+
"textContent": "Framework agnostic"
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"id": "text-12",
|
|
224
|
+
"component": "Text",
|
|
225
|
+
"color": "subtle",
|
|
226
|
+
"size": "sm",
|
|
227
|
+
"textContent": "Vanilla web components — works with React, Vue, Svelte, or plain HTML with no adapter needed."
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
"id": "column-11",
|
|
231
|
+
"component": "Column",
|
|
232
|
+
"gap": "1",
|
|
233
|
+
"children": [
|
|
234
|
+
"text-11",
|
|
235
|
+
"text-12"
|
|
236
|
+
]
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"id": "column-10",
|
|
240
|
+
"component": "Column",
|
|
241
|
+
"gap": "3",
|
|
242
|
+
"children": [
|
|
243
|
+
"code",
|
|
244
|
+
"column-11"
|
|
245
|
+
]
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
"id": "arrow-clockwise",
|
|
249
|
+
"component": "Icon",
|
|
250
|
+
"name": "arrow-clockwise",
|
|
251
|
+
"size": "32"
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
"id": "text-13",
|
|
255
|
+
"component": "Text",
|
|
256
|
+
"weight": "semibold",
|
|
257
|
+
"textContent": "Light DOM first"
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"id": "text-14",
|
|
261
|
+
"component": "Text",
|
|
262
|
+
"color": "subtle",
|
|
263
|
+
"size": "sm",
|
|
264
|
+
"textContent": "Full CSS cascade, no shadow-DOM piercing hacks — style any element with your existing toolchain."
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"id": "column-13",
|
|
268
|
+
"component": "Column",
|
|
269
|
+
"gap": "1",
|
|
270
|
+
"children": [
|
|
271
|
+
"text-13",
|
|
272
|
+
"text-14"
|
|
273
|
+
]
|
|
274
|
+
},
|
|
275
|
+
{
|
|
276
|
+
"id": "column-12",
|
|
277
|
+
"component": "Column",
|
|
278
|
+
"gap": "3",
|
|
279
|
+
"children": [
|
|
280
|
+
"arrow-clockwise",
|
|
281
|
+
"column-13"
|
|
282
|
+
]
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
"id": "grid",
|
|
286
|
+
"component": "Grid",
|
|
287
|
+
"columns": "1 3@md",
|
|
288
|
+
"gap": "5",
|
|
289
|
+
"children": [
|
|
290
|
+
"column-2",
|
|
291
|
+
"column-4",
|
|
292
|
+
"column-6",
|
|
293
|
+
"column-8",
|
|
294
|
+
"column-10",
|
|
295
|
+
"column-12"
|
|
296
|
+
]
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
"id": "root",
|
|
300
|
+
"component": "Column",
|
|
301
|
+
"gap": "5",
|
|
302
|
+
"children": [
|
|
303
|
+
"column",
|
|
304
|
+
"grid"
|
|
305
|
+
]
|
|
306
|
+
}
|
|
307
|
+
]
|
|
308
|
+
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "file-upload-dnd",
|
|
3
3
|
"kind": "block",
|
|
4
|
-
"primary": "
|
|
4
|
+
"primary": "card-ui",
|
|
5
5
|
"page": "/catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<
|
|
9
|
+
"html": "<card-ui>\n <section>\n <col-ui gap=\"3\">\n <field-ui label=\"Attachments\" hint=\"PDF, PNG, JPG up to 10MB each\">\n <upload-ui multiple accept=\".pdf,.png,.jpg\">\n <text-ui>Drop files here or click to browse</text-ui>\n </upload-ui>\n </field-ui>\n <col-ui gap=\"1\">\n <row-ui gap=\"2\" align=\"center\">\n <icon-ui name=\"file-pdf\" size=\"sm\" color=\"subtle\"></icon-ui>\n <text-ui size=\"sm\" grow>report-q4.pdf</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">2.4 MB</text-ui>\n <button-ui icon=\"x\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n <row-ui gap=\"2\" align=\"center\">\n <icon-ui name=\"file-image\" size=\"sm\" color=\"subtle\"></icon-ui>\n <text-ui size=\"sm\" grow>screenshot.png</text-ui>\n <text-ui size=\"sm\" color=\"subtle\">840 KB</text-ui>\n <button-ui icon=\"x\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n </col-ui>\n </col-ui>\n </section>\n </card-ui>",
|
|
10
10
|
"source": "catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "forms",
|
|
13
|
-
"description": "
|
|
13
|
+
"description": "File upload form with drag and drop zone and file list. Upload-ui with browse fallback, file-type hints, and max-size note.",
|
|
14
14
|
"keywords": [
|
|
15
15
|
"file",
|
|
16
16
|
"upload",
|
|
@@ -18,12 +18,14 @@
|
|
|
18
18
|
"dnd",
|
|
19
19
|
"browse",
|
|
20
20
|
"attachments",
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
21
|
+
"form-input",
|
|
22
|
+
"drop",
|
|
23
|
+
"zone",
|
|
24
|
+
"file-list",
|
|
25
|
+
"upload-zone"
|
|
24
26
|
]
|
|
25
27
|
},
|
|
26
|
-
"captured_at": "2026-05-
|
|
28
|
+
"captured_at": "2026-05-27T03:59:46.910Z",
|
|
27
29
|
"template": [
|
|
28
30
|
{
|
|
29
31
|
"id": "upload",
|
|
@@ -41,10 +43,111 @@
|
|
|
41
43
|
]
|
|
42
44
|
},
|
|
43
45
|
{
|
|
44
|
-
"id": "
|
|
46
|
+
"id": "file-pdf",
|
|
47
|
+
"component": "Icon",
|
|
48
|
+
"name": "file-pdf",
|
|
49
|
+
"size": "sm"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"id": "text",
|
|
53
|
+
"component": "Text",
|
|
54
|
+
"size": "sm",
|
|
55
|
+
"textContent": "report-q4.pdf"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"id": "text-2",
|
|
59
|
+
"component": "Text",
|
|
60
|
+
"color": "subtle",
|
|
61
|
+
"size": "sm",
|
|
62
|
+
"textContent": "2.4 MB"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"id": "button",
|
|
66
|
+
"component": "Button",
|
|
67
|
+
"icon": "x",
|
|
68
|
+
"size": "sm",
|
|
69
|
+
"variant": "ghost"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"id": "row",
|
|
73
|
+
"component": "Row",
|
|
74
|
+
"align": "center",
|
|
75
|
+
"gap": "2",
|
|
76
|
+
"children": [
|
|
77
|
+
"file-pdf",
|
|
78
|
+
"text",
|
|
79
|
+
"text-2",
|
|
80
|
+
"button"
|
|
81
|
+
]
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"id": "file-image",
|
|
85
|
+
"component": "Icon",
|
|
86
|
+
"name": "file-image",
|
|
87
|
+
"size": "sm"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"id": "text-3",
|
|
91
|
+
"component": "Text",
|
|
92
|
+
"size": "sm",
|
|
93
|
+
"textContent": "screenshot.png"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"id": "text-4",
|
|
97
|
+
"component": "Text",
|
|
98
|
+
"color": "subtle",
|
|
99
|
+
"size": "sm",
|
|
100
|
+
"textContent": "840 KB"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"id": "button-2",
|
|
104
|
+
"component": "Button",
|
|
105
|
+
"icon": "x",
|
|
106
|
+
"size": "sm",
|
|
107
|
+
"variant": "ghost"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"id": "row-2",
|
|
111
|
+
"component": "Row",
|
|
112
|
+
"align": "center",
|
|
113
|
+
"gap": "2",
|
|
114
|
+
"children": [
|
|
115
|
+
"file-image",
|
|
116
|
+
"text-3",
|
|
117
|
+
"text-4",
|
|
118
|
+
"button-2"
|
|
119
|
+
]
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"id": "column-2",
|
|
123
|
+
"component": "Column",
|
|
124
|
+
"gap": "1",
|
|
125
|
+
"children": [
|
|
126
|
+
"row",
|
|
127
|
+
"row-2"
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"id": "column",
|
|
132
|
+
"component": "Column",
|
|
133
|
+
"gap": "3",
|
|
134
|
+
"children": [
|
|
135
|
+
"field",
|
|
136
|
+
"column-2"
|
|
137
|
+
]
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"id": "section",
|
|
45
141
|
"component": "Section",
|
|
46
142
|
"children": [
|
|
47
|
-
"
|
|
143
|
+
"column"
|
|
144
|
+
]
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"id": "root",
|
|
148
|
+
"component": "Card",
|
|
149
|
+
"children": [
|
|
150
|
+
"section"
|
|
48
151
|
]
|
|
49
152
|
}
|
|
50
153
|
]
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "image-tile",
|
|
2
|
+
"name": "image-caption-tile",
|
|
3
3
|
"kind": "block",
|
|
4
4
|
"primary": "card-ui",
|
|
5
5
|
"page": "/apps/genui/app/gen-ui-feed/gen-ui-feed.contents.html",
|
|
@@ -19,10 +19,18 @@
|
|
|
19
19
|
"media",
|
|
20
20
|
"gallery",
|
|
21
21
|
"aspect",
|
|
22
|
-
"ratio"
|
|
22
|
+
"ratio",
|
|
23
|
+
"caption",
|
|
24
|
+
"image",
|
|
25
|
+
"with",
|
|
26
|
+
"caption",
|
|
27
|
+
"labeled",
|
|
28
|
+
"image",
|
|
29
|
+
"description",
|
|
30
|
+
"photo"
|
|
23
31
|
]
|
|
24
32
|
},
|
|
25
|
-
"captured_at": "2026-05-
|
|
33
|
+
"captured_at": "2026-05-27T03:59:46.910Z",
|
|
26
34
|
"template": [
|
|
27
35
|
{
|
|
28
36
|
"id": "image",
|