@adia-ai/a2ui-corpus 0.0.2 → 0.0.3
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 +44 -0
- package/README.md +2 -2
- package/chunks/_index.json +8056 -0
- package/chunks/accordion-basic.json +15 -0
- package/chunks/accordion-combinations.json +15 -0
- package/chunks/accordion-edge-cases.json +15 -0
- package/chunks/accordion-multiple.json +15 -0
- package/chunks/accordion-open.json +15 -0
- package/chunks/action-list-basic.json +15 -0
- package/chunks/action-list-combo.json +15 -0
- package/chunks/action-list-danger.json +15 -0
- package/chunks/action-list-disabled.json +15 -0
- package/chunks/action-list-edge.json +15 -0
- package/chunks/action-list-icon.json +15 -0
- package/chunks/agent-artifact-code.json +15 -0
- package/chunks/agent-artifact-tone.json +15 -0
- package/chunks/agent-feedback-bar-basic.json +15 -0
- package/chunks/agent-feedback-bar-save.json +15 -0
- package/chunks/agent-questions-multi.json +15 -0
- package/chunks/agent-questions-single.json +15 -0
- package/chunks/agent-reasoning-iterations.json +15 -0
- package/chunks/agent-reasoning-plan-and-thoughts.json +15 -0
- package/chunks/agent-reasoning-steps-only.json +15 -0
- package/chunks/agent-suggestions-basic.json +15 -0
- package/chunks/agent-suggestions-ghost.json +15 -0
- package/chunks/agent-suggestions-icons.json +15 -0
- package/chunks/agent-trace-feedback.json +15 -0
- package/chunks/agent-trace-metrics.json +15 -0
- package/chunks/agent-trace-pills.json +15 -0
- package/chunks/alert-closable.json +15 -0
- package/chunks/alert-combinations.json +15 -0
- package/chunks/alert-edge-cases.json +15 -0
- package/chunks/alert-icon.json +15 -0
- package/chunks/alert-text.json +15 -0
- package/chunks/alert-variant.json +15 -0
- package/chunks/auth-account-deleted-actions.json +15 -0
- package/chunks/auth-account-deleted.json +18 -0
- package/chunks/auth-card-content.json +247 -0
- package/chunks/auth-card-header.json +192 -0
- package/chunks/auth-email-entry.json +16 -0
- package/chunks/auth-email-verify-confirm.json +16 -0
- package/chunks/auth-email-verify.json +18 -0
- package/chunks/auth-forbidden-actions.json +15 -0
- package/chunks/auth-forbidden.json +18 -0
- package/chunks/auth-invite-actions.json +15 -0
- package/chunks/auth-invite-team-card.json +12 -0
- package/chunks/auth-link-expired-form.json +16 -0
- package/chunks/auth-link-expired.json +18 -0
- package/chunks/auth-locked-account.json +18 -0
- package/chunks/auth-locked-recovery-options.json +14 -0
- package/chunks/auth-mfa-enrollment-submit.json +16 -0
- package/chunks/auth-mfa-enrollment.json +18 -0
- package/chunks/auth-mfa-fallback-actions.json +14 -0
- package/chunks/auth-mfa-recovery.json +14 -0
- package/chunks/auth-new-password-form.json +14 -0
- package/chunks/auth-new-password.json +18 -0
- package/chunks/auth-oauth-fallback-actions.json +15 -0
- package/chunks/auth-oauth-interstitial.json +17 -0
- package/chunks/auth-password-challenge.json +14 -0
- package/chunks/auth-password-reset-form.json +16 -0
- package/chunks/auth-password-reset.json +18 -0
- package/chunks/auth-profile-form.json +14 -0
- package/chunks/auth-profile-setup.json +18 -0
- package/chunks/auth-reset-sent.json +17 -0
- package/chunks/auth-session-expired-actions.json +15 -0
- package/chunks/auth-session-expired.json +18 -0
- package/chunks/auth-signin-card-email.json +19 -0
- package/chunks/auth-signin-card-magic-link.json +14 -0
- package/chunks/auth-signin-card-mfa.json +18 -0
- package/chunks/auth-signin-card-otp.json +14 -0
- package/chunks/auth-signin-card-password.json +18 -0
- package/chunks/auth-signin-card-recovery.json +18 -0
- package/chunks/auth-signout-actions.json +15 -0
- package/chunks/auth-signout.json +18 -0
- package/chunks/auth-signup-email-entry.json +16 -0
- package/chunks/auth-signup-entry.json +19 -0
- package/chunks/auth-signup-social-auths.json +14 -0
- package/chunks/auth-signup-verify.json +17 -0
- package/chunks/auth-social-auths.json +14 -0
- package/chunks/auth-sso-providers.json +15 -0
- package/chunks/auth-sso-required.json +18 -0
- package/chunks/auth-team-invite.json +19 -0
- package/chunks/avatar-avatar-group.json +15 -0
- package/chunks/avatar-shape.json +15 -0
- package/chunks/avatar-size.json +15 -0
- package/chunks/avatar-src.json +15 -0
- package/chunks/avatar-text.json +15 -0
- package/chunks/badge-combinations.json +15 -0
- package/chunks/badge-edge-cases.json +15 -0
- package/chunks/badge-size.json +15 -0
- package/chunks/badge-text.json +15 -0
- package/chunks/badge-variant.json +15 -0
- package/chunks/block-combo.json +15 -0
- package/chunks/block-edge.json +15 -0
- package/chunks/block-margin.json +15 -0
- package/chunks/block-padding.json +15 -0
- package/chunks/breadcrumb-basic.json +15 -0
- package/chunks/breadcrumb-combo.json +15 -0
- package/chunks/breadcrumb-edge.json +15 -0
- package/chunks/breadcrumb-links.json +15 -0
- package/chunks/breadcrumb-long.json +15 -0
- package/chunks/breadcrumb-separator.json +15 -0
- package/chunks/bulk-action-toolbar-swap.json +15 -0
- package/chunks/button-block.json +15 -0
- package/chunks/button-combinations.json +15 -0
- package/chunks/button-disabled.json +15 -0
- package/chunks/button-edge-cases.json +15 -0
- package/chunks/button-icon.json +15 -0
- package/chunks/button-size.json +15 -0
- package/chunks/button-text-icon.json +15 -0
- package/chunks/button-text.json +15 -0
- package/chunks/button-trailing.json +15 -0
- package/chunks/button-type.json +15 -0
- package/chunks/button-variant-solid.json +15 -0
- package/chunks/button-variant.json +15 -0
- package/chunks/calendar-picker-default.json +15 -0
- package/chunks/calendar-picker-disabled.json +15 -0
- package/chunks/calendar-picker-format.json +15 -0
- package/chunks/calendar-picker-label.json +15 -0
- package/chunks/calendar-picker-max.json +15 -0
- package/chunks/calendar-picker-min-max.json +15 -0
- package/chunks/calendar-picker-min.json +15 -0
- package/chunks/calendar-picker-name.json +15 -0
- package/chunks/calendar-picker-open.json +15 -0
- package/chunks/calendar-picker-placeholder.json +15 -0
- package/chunks/calendar-picker-required.json +15 -0
- package/chunks/calendar-picker-value.json +15 -0
- package/chunks/canvas-basic.json +15 -0
- package/chunks/canvas-history.json +15 -0
- package/chunks/canvas-theme.json +15 -0
- package/chunks/card-elevation.json +15 -0
- package/chunks/card-header-body-footer.json +15 -0
- package/chunks/card-raw.json +15 -0
- package/chunks/card-size-lg.json +15 -0
- package/chunks/card-size-md.json +15 -0
- package/chunks/card-size.json +15 -0
- package/chunks/card-variant-filled.json +15 -0
- package/chunks/card-variant-ghost.json +15 -0
- package/chunks/card-variant-outlined.json +15 -0
- package/chunks/card-variant.json +15 -0
- package/chunks/chart-average.json +15 -0
- package/chunks/chart-color.json +15 -0
- package/chunks/chart-data-stream.json +15 -0
- package/chunks/chart-deprecated.json +15 -0
- package/chunks/chart-format.json +15 -0
- package/chunks/chart-hideGrid.json +15 -0
- package/chunks/chart-hideValues.json +15 -0
- package/chunks/chart-in-card-chart-plus-breakdown.json +15 -0
- package/chunks/chart-in-card-chart-plus-stat.json +15 -0
- package/chunks/chart-in-card-chart-with-filter-pills.json +15 -0
- package/chunks/chart-in-card-full-chart.json +15 -0
- package/chunks/chart-in-card-sparkline-tile.json +15 -0
- package/chunks/chart-in-card-stat-with-sparkline.json +15 -0
- package/chunks/chart-in-card-trend-footer.json +15 -0
- package/chunks/chart-legend-for.json +15 -0
- package/chunks/chart-legend-on-toggle.json +15 -0
- package/chunks/chart-legend-position.json +15 -0
- package/chunks/chart-legend-shape.json +15 -0
- package/chunks/chart-legend-static.json +15 -0
- package/chunks/chart-radius.json +15 -0
- package/chunks/chart-size.json +15 -0
- package/chunks/chart-sizing.json +15 -0
- package/chunks/chart-smooth.json +15 -0
- package/chunks/chart-states.json +15 -0
- package/chunks/chart-title.json +15 -0
- package/chunks/chart-type.json +15 -0
- package/chunks/chat-basic.json +15 -0
- package/chunks/chat-streaming.json +15 -0
- package/chunks/chat-with-input.json +15 -0
- package/chunks/check-checked.json +15 -0
- package/chunks/check-combinations.json +15 -0
- package/chunks/check-disabled.json +15 -0
- package/chunks/check-edge-cases.json +15 -0
- package/chunks/check-indeterminate.json +15 -0
- package/chunks/check-label.json +15 -0
- package/chunks/check-size.json +15 -0
- package/chunks/code-bare.json +15 -0
- package/chunks/code-combo.json +15 -0
- package/chunks/code-disabled-readonly.json +15 -0
- package/chunks/code-edge.json +15 -0
- package/chunks/code-editable.json +15 -0
- package/chunks/code-form-association.json +15 -0
- package/chunks/code-inline.json +15 -0
- package/chunks/code-language.json +15 -0
- package/chunks/code-line-numbers.json +15 -0
- package/chunks/code-lint-gutter.json +15 -0
- package/chunks/code-long-code.json +15 -0
- package/chunks/code-no-language.json +15 -0
- package/chunks/color-picker-default.json +15 -0
- package/chunks/color-picker-disabled.json +15 -0
- package/chunks/color-picker-format.json +15 -0
- package/chunks/color-picker-name.json +15 -0
- package/chunks/color-picker-value.json +15 -0
- package/chunks/command-combo.json +15 -0
- package/chunks/command-edge.json +15 -0
- package/chunks/command-grouped.json +15 -0
- package/chunks/command-inline.json +15 -0
- package/chunks/command-open.json +15 -0
- package/chunks/command-placeholder.json +15 -0
- package/chunks/command-shortcuts.json +15 -0
- package/chunks/commerce-pricing-tiers.json +16 -0
- package/chunks/conversion-funnel-4-step-funnel.json +15 -0
- package/chunks/conversion-funnel-wide-summary.json +15 -0
- package/chunks/conversion-funnel-with-segment-compare.json +15 -0
- package/chunks/dashboard-acquisition-panel.json +17 -0
- package/chunks/dashboard-admin-page.json +50 -0
- package/chunks/dashboard-audience-kpis.json +15 -0
- package/chunks/dashboard-audience-panel.json +19 -0
- package/chunks/dashboard-behavior-panel.json +17 -0
- package/chunks/dashboard-chart-recent.json +15 -0
- package/chunks/dashboard-cohort-retention.json +12 -0
- package/chunks/dashboard-conversion-panel.json +18 -0
- package/chunks/dashboard-country-list.json +12 -0
- package/chunks/dashboard-filter-bar.json +12 -0
- package/chunks/dashboard-funnel.json +12 -0
- package/chunks/dashboard-kpi-grid.json +15 -0
- package/chunks/dashboard-notifications-feed.json +12 -0
- package/chunks/dashboard-notifications-panel.json +17 -0
- package/chunks/dashboard-overview-panel.json +23 -0
- package/chunks/dashboard-page-header.json +14 -0
- package/chunks/dashboard-pages-table.json +12 -0
- package/chunks/dashboard-quick-actions.json +12 -0
- package/chunks/dashboard-reports-panel.json +17 -0
- package/chunks/dashboard-reports-table.json +12 -0
- package/chunks/dashboard-spark-cards.json +15 -0
- package/chunks/dashboard-storage-card.json +12 -0
- package/chunks/dashboard-tabs.json +14 -0
- package/chunks/dashboard-team-actions-storage.json +19 -0
- package/chunks/dashboard-team-list.json +12 -0
- package/chunks/dashboard-traffic-channels.json +15 -0
- package/chunks/dashboard-transactions-table.json +12 -0
- package/chunks/description-list-align.json +15 -0
- package/chunks/description-list-inline.json +15 -0
- package/chunks/description-list-items.json +15 -0
- package/chunks/description-list-layout.json +15 -0
- package/chunks/description-list-programmatic.json +15 -0
- package/chunks/description-list-stacked.json +15 -0
- package/chunks/divider-combo.json +15 -0
- package/chunks/divider-edge.json +15 -0
- package/chunks/divider-horizontal.json +15 -0
- package/chunks/divider-label.json +15 -0
- package/chunks/divider-vertical-label.json +15 -0
- package/chunks/divider-vertical.json +15 -0
- package/chunks/drawer-2fa-key.json +15 -0
- package/chunks/drawer-2fa-sms.json +15 -0
- package/chunks/drawer-2fa-totp.json +15 -0
- package/chunks/drawer-cancel-sub.json +15 -0
- package/chunks/drawer-change-plan.json +15 -0
- package/chunks/drawer-custom-roles.json +15 -0
- package/chunks/drawer-data-start.json +15 -0
- package/chunks/drawer-delete-account.json +15 -0
- package/chunks/drawer-delete-workspace.json +15 -0
- package/chunks/drawer-discord.json +15 -0
- package/chunks/drawer-edge-cases.json +15 -0
- package/chunks/drawer-figma.json +15 -0
- package/chunks/drawer-first-dashboard.json +15 -0
- package/chunks/drawer-footer.json +15 -0
- package/chunks/drawer-gcal.json +15 -0
- package/chunks/drawer-github.json +15 -0
- package/chunks/drawer-header-grid.json +15 -0
- package/chunks/drawer-invite.json +15 -0
- package/chunks/drawer-multi-section.json +15 -0
- package/chunks/drawer-open.json +15 -0
- package/chunks/drawer-payment-method.json +15 -0
- package/chunks/drawer-permanent.json +15 -0
- package/chunks/drawer-report.json +15 -0
- package/chunks/drawer-revoke-session.json +15 -0
- package/chunks/drawer-role.json +15 -0
- package/chunks/drawer-side.json +15 -0
- package/chunks/drawer-size.json +15 -0
- package/chunks/drawer-slack.json +15 -0
- package/chunks/drawer-smtp.json +15 -0
- package/chunks/drawer-source.json +15 -0
- package/chunks/drawer-text.json +15 -0
- package/chunks/drawer-transaction.json +15 -0
- package/chunks/embed-aspect.json +15 -0
- package/chunks/embed-default.json +15 -0
- package/chunks/embed-height.json +15 -0
- package/chunks/embed-src.json +15 -0
- package/chunks/embed-width.json +15 -0
- package/chunks/empty-state-action.json +15 -0
- package/chunks/empty-state-basic.json +15 -0
- package/chunks/empty-state-description.json +15 -0
- package/chunks/empty-state-error.json +15 -0
- package/chunks/empty-state-heading.json +15 -0
- package/chunks/empty-state-icon.json +15 -0
- package/chunks/error-404-actions.json +15 -0
- package/chunks/error-404.json +18 -0
- package/chunks/error-500-actions.json +15 -0
- package/chunks/error-500.json +18 -0
- package/chunks/error-maintenance-actions.json +15 -0
- package/chunks/error-maintenance.json +18 -0
- package/chunks/field-controls.json +15 -0
- package/chunks/field-default.json +15 -0
- package/chunks/field-error.json +15 -0
- package/chunks/field-hint.json +15 -0
- package/chunks/field-inline.json +15 -0
- package/chunks/field-no-label.json +15 -0
- package/chunks/field-required.json +15 -0
- package/chunks/filter-bar-active-filters.json +15 -0
- package/chunks/filter-bar-filter-bar-with-table.json +15 -0
- package/chunks/filter-bar-saved-views.json +15 -0
- package/chunks/form-drawer-edit-form.json +15 -0
- package/chunks/form-drawer-simple-form.json +15 -0
- package/chunks/form-drawer-tall-form.json +15 -0
- package/chunks/genui-feed-message.json +14 -0
- package/chunks/heatmap-data-stream.json +15 -0
- package/chunks/heatmap-day-grid.json +15 -0
- package/chunks/heatmap-matrix.json +15 -0
- package/chunks/icon-combinations.json +15 -0
- package/chunks/icon-edge-cases.json +15 -0
- package/chunks/icon-label.json +15 -0
- package/chunks/icon-name.json +15 -0
- package/chunks/icon-size.json +15 -0
- package/chunks/image-alt.json +15 -0
- package/chunks/image-default.json +15 -0
- package/chunks/image-fallback.json +15 -0
- package/chunks/image-fit.json +15 -0
- package/chunks/image-height.json +15 -0
- package/chunks/image-radius.json +15 -0
- package/chunks/image-src.json +15 -0
- package/chunks/image-width.json +15 -0
- package/chunks/input-combinations.json +15 -0
- package/chunks/input-disabled.json +15 -0
- package/chunks/input-edge-cases.json +15 -0
- package/chunks/input-error.json +15 -0
- package/chunks/input-label.json +15 -0
- package/chunks/input-name.json +15 -0
- package/chunks/input-pattern.json +15 -0
- package/chunks/input-placeholder.json +15 -0
- package/chunks/input-prefix-suffix.json +15 -0
- package/chunks/input-prefix.json +15 -0
- package/chunks/input-raw.json +15 -0
- package/chunks/input-readonly.json +15 -0
- package/chunks/input-required.json +15 -0
- package/chunks/input-size.json +15 -0
- package/chunks/input-suffix.json +15 -0
- package/chunks/input-type.json +15 -0
- package/chunks/input-value.json +15 -0
- package/chunks/inspector-default.json +15 -0
- package/chunks/inspector-imperative.json +15 -0
- package/chunks/inspector-nested.json +15 -0
- package/chunks/inspector-value.json +15 -0
- package/chunks/kbd-combinations.json +15 -0
- package/chunks/kbd-in-context.json +15 -0
- package/chunks/kbd-single-keys.json +15 -0
- package/chunks/kbd-size.json +15 -0
- package/chunks/layout-align.json +15 -0
- package/chunks/layout-col.json +15 -0
- package/chunks/layout-combo.json +15 -0
- package/chunks/layout-edge.json +15 -0
- package/chunks/layout-grid.json +15 -0
- package/chunks/layout-justify.json +15 -0
- package/chunks/layout-row.json +15 -0
- package/chunks/layout-stack.json +15 -0
- package/chunks/layout-wrap.json +15 -0
- package/chunks/list-basic.json +15 -0
- package/chunks/list-combo.json +15 -0
- package/chunks/list-description.json +15 -0
- package/chunks/list-divider.json +15 -0
- package/chunks/list-edge.json +15 -0
- package/chunks/list-icon.json +15 -0
- package/chunks/list-spacing.json +15 -0
- package/chunks/member-edit-drawer.json +15 -0
- package/chunks/menu-basic.json +15 -0
- package/chunks/menu-combo.json +15 -0
- package/chunks/menu-disabled.json +15 -0
- package/chunks/menu-divider.json +15 -0
- package/chunks/menu-edge.json +15 -0
- package/chunks/menu-gap.json +15 -0
- package/chunks/menu-icon.json +15 -0
- package/chunks/menu-open.json +15 -0
- package/chunks/menu-placement.json +15 -0
- package/chunks/menu-variant.json +15 -0
- package/chunks/modal-basic.json +15 -0
- package/chunks/modal-closable.json +15 -0
- package/chunks/modal-combinations.json +15 -0
- package/chunks/modal-edge-cases.json +15 -0
- package/chunks/modal-open.json +15 -0
- package/chunks/modal-size-xl.json +15 -0
- package/chunks/modal-size.json +15 -0
- package/chunks/modal-text.json +15 -0
- package/chunks/modal-trigger.json +15 -0
- package/chunks/noodles-animated.json +15 -0
- package/chunks/noodles-color.json +15 -0
- package/chunks/noodles-curve.json +15 -0
- package/chunks/noodles-editable.json +15 -0
- package/chunks/noodles-portSize.json +15 -0
- package/chunks/noodles-readonly.json +15 -0
- package/chunks/noodles-showPorts.json +15 -0
- package/chunks/noodles-strokeWidth.json +15 -0
- package/chunks/noodles-tension.json +15 -0
- package/chunks/onb-completion.json +14 -0
- package/chunks/onb-extension-install.json +14 -0
- package/chunks/onb-hero-welcome.json +14 -0
- package/chunks/onb-import-picker.json +14 -0
- package/chunks/onb-mobile-handoff.json +14 -0
- package/chunks/onb-notification-prefs.json +16 -0
- package/chunks/onb-persona-picker.json +14 -0
- package/chunks/onb-provider-tiles.json +14 -0
- package/chunks/onb-settings-review.json +14 -0
- package/chunks/onb-step-footer.json +108 -0
- package/chunks/onb-step-header.json +108 -0
- package/chunks/onb-step-progress.json +108 -0
- package/chunks/onb-story-pane.json +108 -0
- package/chunks/onb-tutorial-steps.json +14 -0
- package/chunks/option-card-default.json +15 -0
- package/chunks/option-card-dense.json +15 -0
- package/chunks/option-card-disabled.json +15 -0
- package/chunks/option-card-heading-rich.json +15 -0
- package/chunks/option-card-icon.json +15 -0
- package/chunks/option-card-spillover.json +15 -0
- package/chunks/otp-input-disabled.json +15 -0
- package/chunks/otp-input-length.json +15 -0
- package/chunks/otp-input-name.json +15 -0
- package/chunks/otp-input-value.json +15 -0
- package/chunks/pagination-basic.json +15 -0
- package/chunks/pagination-combo.json +15 -0
- package/chunks/pagination-edge.json +15 -0
- package/chunks/pagination-first-page.json +15 -0
- package/chunks/pagination-last-page.json +15 -0
- package/chunks/pagination-many-pages.json +15 -0
- package/chunks/pagination-page.json +15 -0
- package/chunks/pagination-siblings.json +15 -0
- package/chunks/pagination-size.json +15 -0
- package/chunks/pagination-total.json +15 -0
- package/chunks/pagination-variant.json +15 -0
- package/chunks/pane-basic.json +15 -0
- package/chunks/pane-collapsed.json +15 -0
- package/chunks/pane-combo.json +15 -0
- package/chunks/pane-edge.json +15 -0
- package/chunks/pane-maxWidth.json +15 -0
- package/chunks/pane-minWidth.json +15 -0
- package/chunks/pane-resizable.json +15 -0
- package/chunks/pane-sections.json +15 -0
- package/chunks/pipeline-status-complete.json +15 -0
- package/chunks/pipeline-status-message.json +15 -0
- package/chunks/pipeline-status-stage.json +15 -0
- package/chunks/playground-a2ui.json +12 -0
- package/chunks/playground-app-shell.json +14 -0
- package/chunks/playground-chat.json +15 -0
- package/chunks/playground-construct-canvas.json +14 -0
- package/chunks/playground-gen-ui.json +14 -0
- package/chunks/playground-render-preview.json +12 -0
- package/chunks/playground-streams-bridge.json +12 -0
- package/chunks/playground-table-toolbar.json +16 -0
- package/chunks/popover-combo.json +15 -0
- package/chunks/popover-edge.json +15 -0
- package/chunks/popover-gap.json +15 -0
- package/chunks/popover-open.json +15 -0
- package/chunks/popover-placement.json +15 -0
- package/chunks/popover-rich-content.json +15 -0
- package/chunks/popover-trigger-click.json +15 -0
- package/chunks/popover-trigger-hover.json +15 -0
- package/chunks/popover-trigger.json +15 -0
- package/chunks/progress-indeterminate.json +15 -0
- package/chunks/progress-row-basic.json +15 -0
- package/chunks/progress-row-combo.json +15 -0
- package/chunks/progress-row-edge.json +15 -0
- package/chunks/progress-row-indeterminate.json +15 -0
- package/chunks/progress-row-label.json +15 -0
- package/chunks/progress-row-meta.json +15 -0
- package/chunks/progress-row-multiple.json +15 -0
- package/chunks/progress-row-value.json +15 -0
- package/chunks/progress-row-variant.json +15 -0
- package/chunks/progress-sizes.json +15 -0
- package/chunks/progress-value.json +15 -0
- package/chunks/progress-variant.json +15 -0
- package/chunks/radio-checked.json +15 -0
- package/chunks/radio-combinations.json +15 -0
- package/chunks/radio-disabled.json +15 -0
- package/chunks/radio-edge-cases.json +15 -0
- package/chunks/radio-error.json +15 -0
- package/chunks/radio-group.json +15 -0
- package/chunks/radio-label.json +15 -0
- package/chunks/radio-name.json +15 -0
- package/chunks/radio-required.json +15 -0
- package/chunks/radio-size.json +15 -0
- package/chunks/radio-value.json +15 -0
- package/chunks/range-combinations.json +15 -0
- package/chunks/range-default.json +15 -0
- package/chunks/range-disabled.json +15 -0
- package/chunks/range-edge-cases.json +15 -0
- package/chunks/range-error.json +15 -0
- package/chunks/range-label.json +15 -0
- package/chunks/range-name.json +15 -0
- package/chunks/range-required.json +15 -0
- package/chunks/range-suffix.json +15 -0
- package/chunks/range-value.json +15 -0
- package/chunks/rating-allowHalf.json +15 -0
- package/chunks/rating-basic.json +15 -0
- package/chunks/rating-icon.json +15 -0
- package/chunks/rating-interactive.json +15 -0
- package/chunks/rating-max.json +15 -0
- package/chunks/rating-name.json +15 -0
- package/chunks/rating-readonly.json +15 -0
- package/chunks/rating-size.json +15 -0
- package/chunks/rating-value.json +15 -0
- package/chunks/record-detail-drawer-simple-detail.json +15 -0
- package/chunks/record-detail-drawer-tabbed-detail.json +15 -0
- package/chunks/reg-address-form.json +14 -0
- package/chunks/reg-billing-card.json +14 -0
- package/chunks/reg-brand-scrape.json +14 -0
- package/chunks/reg-departments-toggle.json +14 -0
- package/chunks/reg-extended-profile.json +14 -0
- package/chunks/reg-final-done.json +14 -0
- package/chunks/reg-helpdesk-grid.json +14 -0
- package/chunks/reg-import-picker.json +14 -0
- package/chunks/reg-integrations-grid.json +14 -0
- package/chunks/reg-invite-form.json +14 -0
- package/chunks/reg-legal-entity.json +14 -0
- package/chunks/reg-org-chart-review.json +14 -0
- package/chunks/reg-profile-identity.json +20 -0
- package/chunks/reg-step-footer.json +188 -0
- package/chunks/reg-step-header.json +189 -0
- package/chunks/reg-step-progress.json +188 -0
- package/chunks/reg-story-pane.json +188 -0
- package/chunks/reg-success-summary.json +14 -0
- package/chunks/reg-team-size.json +14 -0
- package/chunks/reg-usecase-picker.json +16 -0
- package/chunks/reg-workspace-name.json +20 -0
- package/chunks/retention-cohort-default-retention.json +15 -0
- package/chunks/retention-cohort-stat-pair.json +15 -0
- package/chunks/retention-cohort-with-legend.json +15 -0
- package/chunks/richtext-code-blocks.json +15 -0
- package/chunks/richtext-default-slot.json +15 -0
- package/chunks/richtext-markdown.json +15 -0
- package/chunks/richtext-rich-markdown.json +15 -0
- package/chunks/richtext-src.json +15 -0
- package/chunks/search-debounce.json +15 -0
- package/chunks/search-default.json +15 -0
- package/chunks/search-disabled.json +15 -0
- package/chunks/search-name.json +15 -0
- package/chunks/search-placeholder.json +15 -0
- package/chunks/search-value.json +15 -0
- package/chunks/segment-basic.json +15 -0
- package/chunks/segment-disabled.json +15 -0
- package/chunks/segment-icons.json +15 -0
- package/chunks/segment-text.json +15 -0
- package/chunks/segment-value.json +15 -0
- package/chunks/segmented-basic.json +15 -0
- package/chunks/segmented-combo.json +15 -0
- package/chunks/segmented-disabled.json +15 -0
- package/chunks/segmented-edge.json +15 -0
- package/chunks/segmented-pre-selected.json +15 -0
- package/chunks/segmented-value.json +15 -0
- package/chunks/select-avatar.json +15 -0
- package/chunks/select-basic.json +15 -0
- package/chunks/select-combinations.json +15 -0
- package/chunks/select-disabled.json +15 -0
- package/chunks/select-edge-cases.json +15 -0
- package/chunks/select-error.json +15 -0
- package/chunks/select-free-text.json +15 -0
- package/chunks/select-grouped.json +15 -0
- package/chunks/select-icon.json +15 -0
- package/chunks/select-label.json +15 -0
- package/chunks/select-multiple.json +15 -0
- package/chunks/select-name.json +15 -0
- package/chunks/select-open.json +15 -0
- package/chunks/select-placeholder.json +15 -0
- package/chunks/select-readonly.json +15 -0
- package/chunks/select-required.json +15 -0
- package/chunks/select-searchable.json +15 -0
- package/chunks/select-size.json +15 -0
- package/chunks/select-value.json +15 -0
- package/chunks/settings-billing-plan.json +14 -0
- package/chunks/settings-general-form.json +14 -0
- package/chunks/settings-integrations.json +14 -0
- package/chunks/settings-members-invite.json +14 -0
- package/chunks/settings-profile-security.json +14 -0
- package/chunks/skeleton-card-placeholder.json +15 -0
- package/chunks/skeleton-height.json +15 -0
- package/chunks/skeleton-radius.json +15 -0
- package/chunks/skeleton-static.json +15 -0
- package/chunks/skeleton-width-height.json +15 -0
- package/chunks/skeleton-width.json +15 -0
- package/chunks/slider-disabled.json +15 -0
- package/chunks/slider-error.json +15 -0
- package/chunks/slider-label.json +15 -0
- package/chunks/slider-name.json +15 -0
- package/chunks/slider-required.json +15 -0
- package/chunks/slider-suffix.json +15 -0
- package/chunks/slider-value.json +15 -0
- package/chunks/stat-basic.json +15 -0
- package/chunks/stat-change.json +15 -0
- package/chunks/stat-chart-slot.json +15 -0
- package/chunks/stat-data-stream.json +15 -0
- package/chunks/stat-grid.json +15 -0
- package/chunks/stat-icon.json +15 -0
- package/chunks/stat-label.json +15 -0
- package/chunks/stat-trend.json +15 -0
- package/chunks/stat-value.json +15 -0
- package/chunks/stepper-horizontal.json +15 -0
- package/chunks/stepper-interactive.json +15 -0
- package/chunks/stepper-step.json +15 -0
- package/chunks/stepper-vertical.json +15 -0
- package/chunks/stream-basic.json +15 -0
- package/chunks/stream-hide-cursor.json +15 -0
- package/chunks/stream-pace.json +15 -0
- package/chunks/stream-streaming.json +15 -0
- package/chunks/swiper-autoplay.json +15 -0
- package/chunks/swiper-basic.json +15 -0
- package/chunks/swiper-combo.json +15 -0
- package/chunks/swiper-gap.json +15 -0
- package/chunks/swiper-interval.json +15 -0
- package/chunks/swiper-loop.json +15 -0
- package/chunks/swiper-peek.json +15 -0
- package/chunks/swiper-slides-per-view.json +15 -0
- package/chunks/swiper-snap.json +15 -0
- package/chunks/switch-checked.json +15 -0
- package/chunks/switch-combinations.json +15 -0
- package/chunks/switch-disabled.json +15 -0
- package/chunks/switch-edge-cases.json +15 -0
- package/chunks/switch-label.json +15 -0
- package/chunks/switch-size.json +15 -0
- package/chunks/table-cell-types.json +15 -0
- package/chunks/table-data-stream.json +15 -0
- package/chunks/table-density.json +15 -0
- package/chunks/table-expandable.json +15 -0
- package/chunks/table-loading.json +15 -0
- package/chunks/table-paginate.json +15 -0
- package/chunks/table-raw.json +15 -0
- package/chunks/table-search.json +15 -0
- package/chunks/table-selectable.json +15 -0
- package/chunks/table-sortable.json +15 -0
- package/chunks/table-striped.json +15 -0
- package/chunks/tabs-basic.json +15 -0
- package/chunks/tabs-combinations.json +15 -0
- package/chunks/tabs-disabled.json +15 -0
- package/chunks/tabs-edge-cases.json +15 -0
- package/chunks/tabs-icon.json +15 -0
- package/chunks/tabs-keyboard.json +15 -0
- package/chunks/tabs-orientation.json +15 -0
- package/chunks/tabs-value.json +15 -0
- package/chunks/tabs-vertical.json +15 -0
- package/chunks/tag-combinations.json +15 -0
- package/chunks/tag-disabled.json +15 -0
- package/chunks/tag-removable.json +15 -0
- package/chunks/tag-size.json +15 -0
- package/chunks/tag-text.json +15 -0
- package/chunks/tag-variant.json +15 -0
- package/chunks/text-lines.json +15 -0
- package/chunks/text-truncate.json +15 -0
- package/chunks/text-variant.json +15 -0
- package/chunks/textarea-combinations.json +15 -0
- package/chunks/textarea-disabled.json +15 -0
- package/chunks/textarea-edge-cases.json +15 -0
- package/chunks/textarea-error.json +15 -0
- package/chunks/textarea-label.json +15 -0
- package/chunks/textarea-placeholder.json +15 -0
- package/chunks/textarea-readonly.json +15 -0
- package/chunks/textarea-resize.json +15 -0
- package/chunks/textarea-rows.json +15 -0
- package/chunks/timeline-compact.json +15 -0
- package/chunks/timeline-error.json +15 -0
- package/chunks/timeline-horizontal.json +15 -0
- package/chunks/timeline-icons.json +15 -0
- package/chunks/timeline-outcomes.json +15 -0
- package/chunks/timeline-variant.json +15 -0
- package/chunks/timeline-vertical.json +15 -0
- package/chunks/toast-closable.json +15 -0
- package/chunks/toast-combo.json +15 -0
- package/chunks/toast-duration.json +15 -0
- package/chunks/toast-edge.json +15 -0
- package/chunks/toast-position.json +15 -0
- package/chunks/toast-text.json +15 -0
- package/chunks/toast-variant.json +15 -0
- package/chunks/toggle-group-combo.json +15 -0
- package/chunks/toggle-group-disabled.json +15 -0
- package/chunks/toggle-group-edge.json +15 -0
- package/chunks/toggle-group-icon-group.json +15 -0
- package/chunks/toggle-group-pre-selected.json +15 -0
- package/chunks/toggle-group-single-vs-multi.json +15 -0
- package/chunks/toggle-group-single.json +15 -0
- package/chunks/toggle-group-text-group.json +15 -0
- package/chunks/toggle-group-value.json +15 -0
- package/chunks/toolbar-align.json +15 -0
- package/chunks/toolbar-basic.json +15 -0
- package/chunks/toolbar-bordered.json +15 -0
- package/chunks/toolbar-combo.json +15 -0
- package/chunks/toolbar-dividers.json +15 -0
- package/chunks/toolbar-edge.json +15 -0
- package/chunks/toolbar-gap.json +15 -0
- package/chunks/toolbar-overflow-none.json +30 -0
- package/chunks/toolbar-overflow.json +15 -0
- package/chunks/tooltip-combinations.json +15 -0
- package/chunks/tooltip-delay.json +15 -0
- package/chunks/tooltip-edge-cases.json +15 -0
- package/chunks/tooltip-placement.json +15 -0
- package/chunks/tooltip-text.json +15 -0
- package/chunks/tree-basic.json +15 -0
- package/chunks/tree-combo.json +15 -0
- package/chunks/tree-edge.json +15 -0
- package/chunks/tree-expand-collapse.json +15 -0
- package/chunks/tree-selection.json +15 -0
- package/chunks/upload-accept.json +15 -0
- package/chunks/upload-default.json +15 -0
- package/chunks/upload-disabled.json +15 -0
- package/chunks/upload-hint.json +15 -0
- package/chunks/upload-label-hint.json +15 -0
- package/chunks/upload-label.json +15 -0
- package/chunks/upload-multiple.json +15 -0
- package/chunks/upload-name.json +15 -0
- package/chunks/upload-value.json +15 -0
- package/chunks/wizard-drawer-three-step-wizard.json +15 -0
- package/exemplars/prose/auth-login/index.html +3 -9
- package/exemplars/ui/auth-login/index.html +2 -6
- package/package.json +10 -5
- package/scripts/chunk-library.js +123 -0
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-notifications-panel",
|
|
3
|
+
"kind": "panel",
|
|
4
|
+
"primary": "div",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [
|
|
8
|
+
"dashboard-notifications-feed"
|
|
9
|
+
],
|
|
10
|
+
"attrs": {
|
|
11
|
+
"data-tab-panel": "notifications",
|
|
12
|
+
"hidden": ""
|
|
13
|
+
},
|
|
14
|
+
"html": "<div data-tab-panel=\"notifications\" hidden data-chunk=\"dashboard-notifications-panel\" data-chunk-kind=\"panel\">\n <grid-ui data-chunk=\"dashboard-notifications-feed\">\n <card-ui>\n <header>\n <span slot=\"heading\">\n <h3>Notifications</h3>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\">System and team activity</text-ui>\n </span>\n <span slot=\"action\">\n <row-ui gap=\"2\" align=\"center\">\n <segmented-ui value=\"all\">\n <segment-ui value=\"all\" text=\"All\"></segment-ui>\n <segment-ui value=\"unread\" text=\"Unread\"></segment-ui>\n <segment-ui value=\"mentions\" text=\"Mentions\"></segment-ui>\n </segmented-ui>\n <button-ui text=\"Mark all read\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n </span>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui icon=\"check-circle\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Deployment completed</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2m ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">Production deploy v2.14.0 succeeded. 12 files changed.</text-ui>\n </col-ui>\n <badge-ui text=\"New\" variant=\"accent\"></badge-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui text=\"Alex Chen\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Alex Chen mentioned you</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">18m ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">\"@you can you take a look at the Safari issue?\"</text-ui>\n </col-ui>\n <badge-ui text=\"Mention\" variant=\"warning\"></badge-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui icon=\"warning\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Usage threshold reached</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2h ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">API calls at 85% of monthly quota. Consider upgrading your plan.</text-ui>\n </col-ui>\n <badge-ui text=\"Warning\" variant=\"warning\"></badge-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui text=\"Sarah Miller\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Sarah Miller invited you</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Yesterday</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">You were added to the \"Brand refresh\" workspace.</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui icon=\"key\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>API key rotated</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2 days ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">Your production API key was rotated. Old key is revoked.</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>\n </div>",
|
|
15
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
16
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
17
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-overview-panel",
|
|
3
|
+
"kind": "panel",
|
|
4
|
+
"primary": "div",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [
|
|
8
|
+
"dashboard-kpi-grid",
|
|
9
|
+
"dashboard-chart-recent",
|
|
10
|
+
"dashboard-spark-cards",
|
|
11
|
+
"dashboard-transactions-table",
|
|
12
|
+
"dashboard-team-actions-storage",
|
|
13
|
+
"dashboard-team-list",
|
|
14
|
+
"dashboard-quick-actions",
|
|
15
|
+
"dashboard-storage-card"
|
|
16
|
+
],
|
|
17
|
+
"attrs": {
|
|
18
|
+
"data-tab-panel": "overview"
|
|
19
|
+
},
|
|
20
|
+
"html": "<div data-tab-panel=\"overview\" data-chunk=\"dashboard-overview-panel\" data-chunk-kind=\"panel\">\n <!-- ═══ ROW 1: 4 KPI STAT CARDS ═══ -->\n <grid-ui columns=\"4\" gap=\"4\" data-chunk=\"dashboard-kpi-grid\">\n <card-ui size=\"sm\"\n ><section><stat-ui label=\"Total Revenue\" value=\"$45,231.89\" change=\"+20.1%\" trend=\"up\" icon=\"currency-dollar\"></stat-ui></section\n ></card-ui>\n <card-ui size=\"sm\"\n ><section><stat-ui label=\"Subscriptions\" value=\"+2,350\" change=\"+180.1%\" trend=\"up\" icon=\"users\"></stat-ui></section\n ></card-ui>\n <card-ui size=\"sm\"\n ><section><stat-ui label=\"Sales\" value=\"+12,234\" change=\"+19%\" trend=\"up\" icon=\"credit-card\"></stat-ui></section\n ></card-ui>\n <card-ui size=\"sm\"\n ><section><stat-ui label=\"Active Now\" value=\"+573\" change=\"+201\" trend=\"up\" icon=\"chart-bar\"></stat-ui></section\n ></card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 3: OVERVIEW CHART + RECENT SALES (3:2) ═══ -->\n <grid-ui columns=\"5\" gap=\"4\" data-chunk=\"dashboard-chart-recent\">\n <card-ui span=\"3\">\n <header>\n <h3>Overview</h3>\n <text-ui slot=\"description\" color=\"subtle\">Monthly revenue for 2026</text-ui>\n </header>\n <section>\n <col-ui>\n <chart-ui id=\"dash-overview\" type=\"bar\" x=\"month\" y=\"revenue\" hide-values></chart-ui>\n <grid-ui columns=\"2\" gap=\"3\" size=\"sm\">\n <card-ui>\n <section>\n <stat-ui label=\"This Month\" value=\"$5,400\" change=\"+12% vs last month\" trend=\"up\"></stat-ui>\n </section>\n </card-ui>\n <card-ui>\n <section>\n <stat-ui label=\"Yearly Total\" value=\"$59,100\" change=\"On track for $65k target\" trend=\"neutral\"></stat-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n </section>\n <footer>\n <button-ui text=\"View Full Report\" variant=\"outline\" stretch></button-ui>\n </footer>\n </card-ui>\n <card-ui span=\"2\">\n <header>\n <h3>Recent Sales</h3>\n <text-ui slot=\"description\" color=\"subtle\">You made 265 sales this month.</text-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Olivia Martin\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Olivia Martin</text-ui>\n <text-ui strong>+$1,999.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">olivia.martin@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Jackson Lee\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Jackson Lee</text-ui>\n <text-ui strong>+$39.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">jackson.lee@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Isabella Nguyen\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Isabella Nguyen</text-ui>\n <text-ui strong>+$299.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">isabella.nguyen@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"William Kim\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>William Kim</text-ui>\n <text-ui strong>+$99.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">will@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Sofia Davis\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Sofia Davis</text-ui>\n <text-ui strong>+$39.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">sofia.davis@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 4: 4 SPARKLINE METRIC CARDS ═══ -->\n <grid-ui columns=\"4\" gap=\"4\" data-chunk=\"dashboard-spark-cards\">\n <card-ui>\n <header>\n <h3>Page Views</h3>\n <text-ui slot=\"description\" variant=\"title\">84,232</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-views\" type=\"sparkline\" x=\"d\" y=\"v\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Bounce Rate</h3>\n <text-ui slot=\"description\" variant=\"title\">24.3%</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-bounce\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"warning\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Session Duration</h3>\n <text-ui slot=\"description\" variant=\"title\">4m 32s</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-duration\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"success\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Conversion</h3>\n <text-ui slot=\"description\" variant=\"title\">3.2%</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-conv\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"info\"></chart-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 5: TRANSACTIONS TABLE ═══\n Supports ?state=empty|loading|error URL params for state-coverage\n demos; the default state renders the populated table. -->\n <grid-ui data-chunk=\"dashboard-transactions-table\">\n <card-ui>\n <header>\n <h3>Recent Transactions</h3>\n <text-ui slot=\"description\" color=\"subtle\">Manage and track recent customer orders</text-ui>\n <span slot=\"action\">\n <menu-ui id=\"tx-state-menu\">\n <button-ui slot=\"trigger\" text=\"View as\" icon=\"caret-down\" variant=\"ghost\" size=\"sm\"></button-ui>\n <menu-item-ui text=\"Default\" value=\"default\"></menu-item-ui>\n <menu-item-ui text=\"Loading\" value=\"loading\" icon=\"spinner\"></menu-item-ui>\n <menu-item-ui text=\"Empty\" value=\"empty\" icon=\"tray\"></menu-item-ui>\n <menu-item-ui text=\"Error\" value=\"error\" icon=\"warning\"></menu-item-ui>\n </menu-ui>\n </span>\n </header>\n <section bleed data-tx-surface>\n <table-ui id=\"dash-transactions\" sortable striped raw paginate=\"5\"></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 6: TEAM + QUICK ACTIONS + STORAGE ═══ -->\n <grid-ui columns=\"3\" gap=\"4\" data-chunk=\"dashboard-team-actions-storage\">\n <card-ui data-chunk=\"dashboard-team-list\">\n <header>\n <h3>Team Members</h3>\n <text-ui slot=\"description\" color=\"subtle\">Your active collaborators</text-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"Alex Chen\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Alex Chen</text-ui>\n <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Engineering Lead</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"Sarah Miller\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Sarah Miller</text-ui>\n <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Product Designer</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"James Park\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>James Park</text-ui>\n <badge-ui text=\"Away\" variant=\"warning\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Backend Engineer</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"Maria Lopez\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Maria Lopez</text-ui>\n <badge-ui text=\"Offline\" variant=\"muted\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Data Analyst</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n\n <card-ui data-chunk=\"dashboard-quick-actions\">\n <header><h3>Quick Actions</h3></header>\n <section>\n <action-list-ui>\n <action-item-ui icon=\"plus\" text=\"New Project\" value=\"new\"></action-item-ui>\n <action-item-ui icon=\"users\" text=\"Invite Team\" value=\"invite\"></action-item-ui>\n <action-item-ui icon=\"download\" text=\"Export Data\" value=\"export\"></action-item-ui>\n <action-item-ui icon=\"chart-bar\" text=\"View Reports\" value=\"reports\"></action-item-ui>\n <action-item-ui icon=\"gear\" text=\"Settings\" value=\"settings\"></action-item-ui>\n <action-item-ui icon=\"question\" text=\"Help Center\" value=\"help\"></action-item-ui>\n </action-list-ui>\n </section>\n </card-ui>\n\n <card-ui data-chunk=\"dashboard-storage-card\">\n <header>\n <h3>Storage</h3>\n <text-ui slot=\"description\" color=\"subtle\">75% of 100 GB used</text-ui>\n </header>\n <section>\n <col-ui gap=\"2\">\n <progress-row-ui label=\"75 GB used\" value=\"75\" meta=\"100 GB total\"></progress-row-ui>\n <progress-row-ui label=\"Documents\" value=\"42\" meta=\"32 GB\"></progress-row-ui>\n <progress-row-ui label=\"Media\" value=\"37\" meta=\"28 GB\"></progress-row-ui>\n <progress-row-ui label=\"Backups\" value=\"20\" meta=\"15 GB\"></progress-row-ui>\n </col-ui>\n </section>\n <footer>\n <button-ui text=\"Upgrade Plan\" variant=\"primary\" stretch></button-ui>\n </footer>\n </card-ui>\n </grid-ui>\n </div>",
|
|
21
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
22
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
23
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-page-header",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "header",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [
|
|
8
|
+
"dashboard-tabs"
|
|
9
|
+
],
|
|
10
|
+
"attrs": {},
|
|
11
|
+
"html": "<header data-chunk=\"dashboard-page-header\">\n <div>\n <h1>Dashboard</h1>\n <div data-actions>\n <button-ui text=\"Export\" icon=\"download\" variant=\"outline\"></button-ui>\n <button-ui text=\"+ New\" variant=\"primary\"></button-ui>\n </div>\n </div>\n <p>Welcome back. Here's what's happening.</p>\n <tabs-ui value=\"overview\" data-chunk=\"dashboard-tabs\">\n <tab-ui value=\"overview\" text=\"Overview\"></tab-ui>\n <tab-ui value=\"audience\" text=\"Audience\"></tab-ui>\n <tab-ui value=\"acquisition\" text=\"Acquisition\"></tab-ui>\n <tab-ui value=\"behavior\" text=\"Behavior\"></tab-ui>\n <tab-ui value=\"conversion\" text=\"Conversion\"></tab-ui>\n <tab-ui value=\"reports\" text=\"Reports\"></tab-ui>\n <tab-ui value=\"notifications\" text=\"Notifications\"></tab-ui>\n </tabs-ui>\n </header>",
|
|
12
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
13
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
14
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-pages-table",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "grid-ui",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {},
|
|
9
|
+
"html": "<grid-ui data-chunk=\"dashboard-pages-table\">\n <card-ui>\n <header>\n <h3>Top pages</h3>\n <text-ui slot=\"description\" color=\"subtle\">Most-visited routes</text-ui>\n </header>\n <section bleed>\n <table-ui id=\"analytics-pages\" sortable striped raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>",
|
|
10
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
11
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
12
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-quick-actions",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "card-ui",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {},
|
|
9
|
+
"html": "<card-ui data-chunk=\"dashboard-quick-actions\">\n <header><h3>Quick Actions</h3></header>\n <section>\n <action-list-ui>\n <action-item-ui icon=\"plus\" text=\"New Project\" value=\"new\"></action-item-ui>\n <action-item-ui icon=\"users\" text=\"Invite Team\" value=\"invite\"></action-item-ui>\n <action-item-ui icon=\"download\" text=\"Export Data\" value=\"export\"></action-item-ui>\n <action-item-ui icon=\"chart-bar\" text=\"View Reports\" value=\"reports\"></action-item-ui>\n <action-item-ui icon=\"gear\" text=\"Settings\" value=\"settings\"></action-item-ui>\n <action-item-ui icon=\"question\" text=\"Help Center\" value=\"help\"></action-item-ui>\n </action-list-ui>\n </section>\n </card-ui>",
|
|
10
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
11
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
12
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-reports-panel",
|
|
3
|
+
"kind": "panel",
|
|
4
|
+
"primary": "div",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [
|
|
8
|
+
"dashboard-reports-table"
|
|
9
|
+
],
|
|
10
|
+
"attrs": {
|
|
11
|
+
"data-tab-panel": "reports",
|
|
12
|
+
"hidden": ""
|
|
13
|
+
},
|
|
14
|
+
"html": "<div data-tab-panel=\"reports\" hidden data-chunk=\"dashboard-reports-panel\" data-chunk-kind=\"panel\">\n <grid-ui data-chunk=\"dashboard-reports-table\">\n <card-ui>\n <header>\n <span slot=\"heading\">\n <h3>Reports</h3>\n </span>\n <span slot=\"description\">\n <text-ui slot=\"description\" color=\"subtle\">Scheduled reports by category</text-ui>\n </span>\n <span slot=\"action\">\n <segmented-ui id=\"dash-reports-subtabs\" value=\"revenue\">\n <segment-ui value=\"revenue\" text=\"Revenue\"></segment-ui>\n <segment-ui value=\"customers\" text=\"Customers\"></segment-ui>\n <segment-ui value=\"sales\" text=\"Sales\"></segment-ui>\n <segment-ui value=\"errors\" text=\"Errors\"></segment-ui>\n </segmented-ui>\n <button-ui text=\"+ New report\" variant=\"primary\"></button-ui>\n </span>\n </header>\n <section bleed>\n <table-ui id=\"dash-reports-table\" sortable striped raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n </div>",
|
|
15
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
16
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
17
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-reports-table",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "grid-ui",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {},
|
|
9
|
+
"html": "<grid-ui data-chunk=\"dashboard-reports-table\">\n <card-ui>\n <header>\n <span slot=\"heading\">\n <h3>Reports</h3>\n </span>\n <span slot=\"description\">\n <text-ui slot=\"description\" color=\"subtle\">Scheduled reports by category</text-ui>\n </span>\n <span slot=\"action\">\n <segmented-ui id=\"dash-reports-subtabs\" value=\"revenue\">\n <segment-ui value=\"revenue\" text=\"Revenue\"></segment-ui>\n <segment-ui value=\"customers\" text=\"Customers\"></segment-ui>\n <segment-ui value=\"sales\" text=\"Sales\"></segment-ui>\n <segment-ui value=\"errors\" text=\"Errors\"></segment-ui>\n </segmented-ui>\n <button-ui text=\"+ New report\" variant=\"primary\"></button-ui>\n </span>\n </header>\n <section bleed>\n <table-ui id=\"dash-reports-table\" sortable striped raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>",
|
|
10
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
11
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
12
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-spark-cards",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "grid-ui",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"columns": "4",
|
|
10
|
+
"gap": "4"
|
|
11
|
+
},
|
|
12
|
+
"html": "<grid-ui columns=\"4\" gap=\"4\" data-chunk=\"dashboard-spark-cards\">\n <card-ui>\n <header>\n <h3>Page Views</h3>\n <text-ui slot=\"description\" variant=\"title\">84,232</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-views\" type=\"sparkline\" x=\"d\" y=\"v\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Bounce Rate</h3>\n <text-ui slot=\"description\" variant=\"title\">24.3%</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-bounce\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"warning\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Session Duration</h3>\n <text-ui slot=\"description\" variant=\"title\">4m 32s</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-duration\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"success\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Conversion</h3>\n <text-ui slot=\"description\" variant=\"title\">3.2%</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-conv\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"info\"></chart-ui>\n </section>\n </card-ui>\n </grid-ui>",
|
|
13
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-storage-card",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "card-ui",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {},
|
|
9
|
+
"html": "<card-ui data-chunk=\"dashboard-storage-card\">\n <header>\n <h3>Storage</h3>\n <text-ui slot=\"description\" color=\"subtle\">75% of 100 GB used</text-ui>\n </header>\n <section>\n <col-ui gap=\"2\">\n <progress-row-ui label=\"75 GB used\" value=\"75\" meta=\"100 GB total\"></progress-row-ui>\n <progress-row-ui label=\"Documents\" value=\"42\" meta=\"32 GB\"></progress-row-ui>\n <progress-row-ui label=\"Media\" value=\"37\" meta=\"28 GB\"></progress-row-ui>\n <progress-row-ui label=\"Backups\" value=\"20\" meta=\"15 GB\"></progress-row-ui>\n </col-ui>\n </section>\n <footer>\n <button-ui text=\"Upgrade Plan\" variant=\"primary\" stretch></button-ui>\n </footer>\n </card-ui>",
|
|
10
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
11
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
12
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-tabs",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "tabs-ui",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"value": "overview"
|
|
10
|
+
},
|
|
11
|
+
"html": "<tabs-ui value=\"overview\" data-chunk=\"dashboard-tabs\">\n <tab-ui value=\"overview\" text=\"Overview\"></tab-ui>\n <tab-ui value=\"audience\" text=\"Audience\"></tab-ui>\n <tab-ui value=\"acquisition\" text=\"Acquisition\"></tab-ui>\n <tab-ui value=\"behavior\" text=\"Behavior\"></tab-ui>\n <tab-ui value=\"conversion\" text=\"Conversion\"></tab-ui>\n <tab-ui value=\"reports\" text=\"Reports\"></tab-ui>\n <tab-ui value=\"notifications\" text=\"Notifications\"></tab-ui>\n </tabs-ui>",
|
|
12
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
13
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
14
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-team-actions-storage",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "grid-ui",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [
|
|
8
|
+
"dashboard-team-list",
|
|
9
|
+
"dashboard-quick-actions",
|
|
10
|
+
"dashboard-storage-card"
|
|
11
|
+
],
|
|
12
|
+
"attrs": {
|
|
13
|
+
"columns": "3",
|
|
14
|
+
"gap": "4"
|
|
15
|
+
},
|
|
16
|
+
"html": "<grid-ui columns=\"3\" gap=\"4\" data-chunk=\"dashboard-team-actions-storage\">\n <card-ui data-chunk=\"dashboard-team-list\">\n <header>\n <h3>Team Members</h3>\n <text-ui slot=\"description\" color=\"subtle\">Your active collaborators</text-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"Alex Chen\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Alex Chen</text-ui>\n <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Engineering Lead</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"Sarah Miller\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Sarah Miller</text-ui>\n <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Product Designer</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"James Park\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>James Park</text-ui>\n <badge-ui text=\"Away\" variant=\"warning\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Backend Engineer</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"Maria Lopez\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Maria Lopez</text-ui>\n <badge-ui text=\"Offline\" variant=\"muted\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Data Analyst</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n\n <card-ui data-chunk=\"dashboard-quick-actions\">\n <header><h3>Quick Actions</h3></header>\n <section>\n <action-list-ui>\n <action-item-ui icon=\"plus\" text=\"New Project\" value=\"new\"></action-item-ui>\n <action-item-ui icon=\"users\" text=\"Invite Team\" value=\"invite\"></action-item-ui>\n <action-item-ui icon=\"download\" text=\"Export Data\" value=\"export\"></action-item-ui>\n <action-item-ui icon=\"chart-bar\" text=\"View Reports\" value=\"reports\"></action-item-ui>\n <action-item-ui icon=\"gear\" text=\"Settings\" value=\"settings\"></action-item-ui>\n <action-item-ui icon=\"question\" text=\"Help Center\" value=\"help\"></action-item-ui>\n </action-list-ui>\n </section>\n </card-ui>\n\n <card-ui data-chunk=\"dashboard-storage-card\">\n <header>\n <h3>Storage</h3>\n <text-ui slot=\"description\" color=\"subtle\">75% of 100 GB used</text-ui>\n </header>\n <section>\n <col-ui gap=\"2\">\n <progress-row-ui label=\"75 GB used\" value=\"75\" meta=\"100 GB total\"></progress-row-ui>\n <progress-row-ui label=\"Documents\" value=\"42\" meta=\"32 GB\"></progress-row-ui>\n <progress-row-ui label=\"Media\" value=\"37\" meta=\"28 GB\"></progress-row-ui>\n <progress-row-ui label=\"Backups\" value=\"20\" meta=\"15 GB\"></progress-row-ui>\n </col-ui>\n </section>\n <footer>\n <button-ui text=\"Upgrade Plan\" variant=\"primary\" stretch></button-ui>\n </footer>\n </card-ui>\n </grid-ui>",
|
|
17
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
18
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
19
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-team-list",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "card-ui",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {},
|
|
9
|
+
"html": "<card-ui data-chunk=\"dashboard-team-list\">\n <header>\n <h3>Team Members</h3>\n <text-ui slot=\"description\" color=\"subtle\">Your active collaborators</text-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"Alex Chen\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Alex Chen</text-ui>\n <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Engineering Lead</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"Sarah Miller\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Sarah Miller</text-ui>\n <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Product Designer</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"James Park\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>James Park</text-ui>\n <badge-ui text=\"Away\" variant=\"warning\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Backend Engineer</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"Maria Lopez\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Maria Lopez</text-ui>\n <badge-ui text=\"Offline\" variant=\"muted\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Data Analyst</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>",
|
|
10
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
11
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
12
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-traffic-channels",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "grid-ui",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"columns": "3",
|
|
10
|
+
"gap": "4"
|
|
11
|
+
},
|
|
12
|
+
"html": "<grid-ui columns=\"3\" gap=\"4\" data-chunk=\"dashboard-traffic-channels\">\n <card-ui span=\"2\">\n <header>\n <h3>Traffic</h3>\n <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n <div slot=\"action\">\n <segmented-ui value=\"30d\">\n <segment-ui value=\"7d\" text=\"7d\"></segment-ui>\n <segment-ui value=\"30d\" text=\"30d\"></segment-ui>\n <segment-ui value=\"90d\" text=\"90d\"></segment-ui>\n </segmented-ui>\n </div>\n </header>\n <section>\n <chart-ui id=\"analytics-traffic\" type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Acquisition channels</h3>\n <text-ui slot=\"description\" color=\"subtle\">Where sessions come from</text-ui>\n </header>\n <section>\n <chart-ui id=\"analytics-channels\" type=\"donut\" x=\"channel\" y=\"sessions\" hide-values></chart-ui>\n </section>\n </card-ui>\n </grid-ui>",
|
|
13
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dashboard-transactions-table",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "grid-ui",
|
|
5
|
+
"page": "/site/examples/admin-dashboard",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {},
|
|
9
|
+
"html": "<grid-ui data-chunk=\"dashboard-transactions-table\">\n <card-ui>\n <header>\n <h3>Recent Transactions</h3>\n <text-ui slot=\"description\" color=\"subtle\">Manage and track recent customer orders</text-ui>\n <span slot=\"action\">\n <menu-ui id=\"tx-state-menu\">\n <button-ui slot=\"trigger\" text=\"View as\" icon=\"caret-down\" variant=\"ghost\" size=\"sm\"></button-ui>\n <menu-item-ui text=\"Default\" value=\"default\"></menu-item-ui>\n <menu-item-ui text=\"Loading\" value=\"loading\" icon=\"spinner\"></menu-item-ui>\n <menu-item-ui text=\"Empty\" value=\"empty\" icon=\"tray\"></menu-item-ui>\n <menu-item-ui text=\"Error\" value=\"error\" icon=\"warning\"></menu-item-ui>\n </menu-ui>\n </span>\n </header>\n <section bleed data-tx-surface>\n <table-ui id=\"dash-transactions\" sortable striped raw paginate=\"5\"></table-ui>\n </section>\n </card-ui>\n </grid-ui>",
|
|
10
|
+
"source": "site/pages/examples/admin-dashboard/index.html",
|
|
11
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
12
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "description-list-align",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "section",
|
|
5
|
+
"page": "/site/components/description-list",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-section": "",
|
|
10
|
+
"data-property": "align"
|
|
11
|
+
},
|
|
12
|
+
"html": "<section data-section data-property=\"align\" data-chunk=\"description-list-align\">\n <h2 variant=\"section\">align</h2>\n <p data-note>Inline-only alignment. <code>start</code> (default) groups term + value together; <code>between</code> pushes the value to the right edge.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label='align=\"start\"'>\n <description-list-ui layout=\"inline\" align=\"start\">\n <dt>Weight</dt><dd>2.8 lbs</dd>\n <dt>Dimensions</dt><dd>12 × 8 × 1 in</dd>\n <dt>Material</dt><dd>Aluminum</dd>\n </description-list-ui>\n </div>\n <div data-artifact-item data-artifact-label='align=\"between\"'>\n <description-list-ui layout=\"inline\" align=\"between\">\n <dt>Weight</dt><dd>2.8 lbs</dd>\n <dt>Dimensions</dt><dd>12 × 8 × 1 in</dd>\n <dt>Material</dt><dd>Aluminum</dd>\n </description-list-ui>\n </div>\n </div>\n</section>",
|
|
13
|
+
"source": "site/pages/components/description-list/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "description-list-inline",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "section",
|
|
5
|
+
"page": "/site/components/description-list",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-section": "",
|
|
10
|
+
"data-property": "inline"
|
|
11
|
+
},
|
|
12
|
+
"html": "<section data-section data-property=\"inline\" data-chunk=\"description-list-inline\">\n <h2 variant=\"section\">Inline</h2>\n <p data-note>Term + description on one row — for spec tables and metadata summaries.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label=\"inline, align=between\">\n <description-list-ui layout=\"inline\" align=\"between\">\n <dt>Weight</dt><dd>2.8 lbs</dd>\n <dt>Dimensions</dt><dd>12 × 8 × 1 in</dd>\n <dt>Material</dt><dd>Aluminum</dd>\n <dt>Color</dt><dd>Space gray</dd>\n <dt>Warranty</dt><dd>1 year</dd>\n </description-list-ui>\n </div>\n </div>\n</section>",
|
|
13
|
+
"source": "site/pages/components/description-list/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "description-list-items",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "section",
|
|
5
|
+
"page": "/site/components/description-list",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-section": "",
|
|
10
|
+
"data-property": "items"
|
|
11
|
+
},
|
|
12
|
+
"html": "<section data-section data-property=\"items\" data-chunk=\"description-list-items\">\n <h2 variant=\"section\">items</h2>\n <p data-note>JSON array of <code>{term, description}</code> pairs — an alternative to declarative dt/dd children, useful for generator/SSR output.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label=\"items (stacked)\">\n <description-list-ui layout=\"stacked\"\n items='[{\"term\":\"CPU\",\"description\":\"Apple M4\"},{\"term\":\"RAM\",\"description\":\"16 GB\"},{\"term\":\"Storage\",\"description\":\"512 GB SSD\"}]'></description-list-ui>\n </div>\n <div data-artifact-item data-artifact-label=\"items (inline/between)\">\n <description-list-ui layout=\"inline\" align=\"between\"\n items='[{\"term\":\"Order\",\"description\":\"#12345\"},{\"term\":\"Total\",\"description\":\"$128.00\"},{\"term\":\"Status\",\"description\":\"Shipped\"}]'></description-list-ui>\n </div>\n </div>\n</section>",
|
|
13
|
+
"source": "site/pages/components/description-list/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "description-list-layout",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "section",
|
|
5
|
+
"page": "/site/components/description-list",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-section": "",
|
|
10
|
+
"data-property": "layout"
|
|
11
|
+
},
|
|
12
|
+
"html": "<section data-section data-property=\"layout\" data-chunk=\"description-list-layout\">\n <h2 variant=\"section\">layout</h2>\n <p data-note><code>stacked</code> (default) puts the term above the value. <code>inline</code> renders them on the same row.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label='layout=\"stacked\"'>\n <description-list-ui layout=\"stacked\">\n <dt>Status</dt><dd>Active</dd>\n <dt>Plan</dt><dd>Pro</dd>\n <dt>Renewal</dt><dd>April 14, 2027</dd>\n </description-list-ui>\n </div>\n <div data-artifact-item data-artifact-label='layout=\"inline\"'>\n <description-list-ui layout=\"inline\">\n <dt>Status</dt><dd>Active</dd>\n <dt>Plan</dt><dd>Pro</dd>\n <dt>Renewal</dt><dd>April 14, 2027</dd>\n </description-list-ui>\n </div>\n </div>\n</section>",
|
|
13
|
+
"source": "site/pages/components/description-list/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "description-list-programmatic",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "section",
|
|
5
|
+
"page": "/site/components/description-list",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-section": "",
|
|
10
|
+
"data-property": "programmatic"
|
|
11
|
+
},
|
|
12
|
+
"html": "<section data-section data-property=\"programmatic\" data-chunk=\"description-list-programmatic\">\n <h2 variant=\"section\">Programmatic</h2>\n <p data-note>Pass <code>items</code> as a JSON array for generator/ssr scenarios where dt/dd children aren't convenient.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label=\"items JSON\">\n <description-list-ui layout=\"inline\" align=\"between\"\n items='[{\"term\":\"CPU\",\"description\":\"Apple M4\"},{\"term\":\"RAM\",\"description\":\"16 GB\"},{\"term\":\"Storage\",\"description\":\"512 GB SSD\"}]'></description-list-ui>\n </div>\n </div>\n</section>",
|
|
13
|
+
"source": "site/pages/components/description-list/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "description-list-stacked",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "section",
|
|
5
|
+
"page": "/site/components/description-list",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-section": "",
|
|
10
|
+
"data-property": "stacked"
|
|
11
|
+
},
|
|
12
|
+
"html": "<section data-section data-property=\"stacked\" data-chunk=\"description-list-stacked\">\n <h2 variant=\"section\">Stacked (default)</h2>\n <p data-note>Term above description — the default layout, good for readable blocks.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label=\"declarative dt/dd children\">\n <description-list-ui>\n <dt>Status</dt><dd>Active</dd>\n <dt>Plan</dt><dd>Pro</dd>\n <dt>Renewal</dt><dd>April 14, 2027</dd>\n </description-list-ui>\n </div>\n </div>\n</section>",
|
|
13
|
+
"source": "site/pages/components/description-list/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "divider-combo",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "section",
|
|
5
|
+
"page": "/site/components/divider",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-section": "",
|
|
10
|
+
"data-combo": ""
|
|
11
|
+
},
|
|
12
|
+
"html": "<section data-section data-combo data-chunk=\"divider-combo\">\n <h2 variant=\"section\">Combinations</h2>\n <p data-note>Dividers used in context with other components.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label=\"between list groups\">\n <list-ui>\n <list-item-ui icon=\"user\" text=\"Profile\"></list-item-ui>\n <list-item-ui icon=\"gear\" text=\"Settings\"></list-item-ui>\n </list-ui>\n <divider-ui></divider-ui>\n <list-ui>\n <list-item-ui icon=\"sign-out\" text=\"Log out\"></list-item-ui>\n </list-ui>\n </div>\n </div>\n <div data-artifact-container data-mt-sm>\n <div data-artifact-item data-artifact-label=\"vertical in toolbar\">\n <toolbar-ui>\n <button-ui icon=\"text-bold\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui icon=\"text-italic\" variant=\"ghost\" size=\"sm\"></button-ui>\n <divider-ui vertical></divider-ui>\n <button-ui icon=\"text-align-left\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui icon=\"text-align-center\" variant=\"ghost\" size=\"sm\"></button-ui>\n </toolbar-ui>\n </div>\n </div>\n</section>",
|
|
13
|
+
"source": "site/pages/components/divider/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "divider-edge",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "section",
|
|
5
|
+
"page": "/site/components/divider",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-section": "",
|
|
10
|
+
"data-edge": ""
|
|
11
|
+
},
|
|
12
|
+
"html": "<section data-section data-edge data-chunk=\"divider-edge\">\n <h2 variant=\"section\">Edge Cases</h2>\n <p data-note>Boundary conditions.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label=\"long label\">\n <divider-ui label=\"This is a divider with a very long label that tests how the component handles overflow when the text exceeds the available width\"></divider-ui>\n </div>\n </div>\n <div data-artifact-container data-mt-sm>\n <div data-artifact-item data-artifact-label=\"stacked dividers\">\n <divider-ui></divider-ui>\n <divider-ui></divider-ui>\n <divider-ui></divider-ui>\n </div>\n </div>\n</section>",
|
|
13
|
+
"source": "site/pages/components/divider/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "divider-horizontal",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "section",
|
|
5
|
+
"page": "/site/components/divider",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-section": "",
|
|
10
|
+
"data-property": "horizontal"
|
|
11
|
+
},
|
|
12
|
+
"html": "<section data-section data-property=\"horizontal\" data-chunk=\"divider-horizontal\">\n <h2 variant=\"section\">horizontal (default)</h2>\n <p data-note>A simple horizontal line separating content sections.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label=\"default horizontal\">\n <p>Content above the divider</p>\n <divider-ui></divider-ui>\n <p>Content below the divider</p>\n </div>\n </div>\n</section>",
|
|
13
|
+
"source": "site/pages/components/divider/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "divider-label",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "section",
|
|
5
|
+
"page": "/site/components/divider",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-section": "",
|
|
10
|
+
"data-property": "label"
|
|
11
|
+
},
|
|
12
|
+
"html": "<section data-section data-property=\"label\" data-chunk=\"divider-label\">\n <h2 variant=\"section\">with label</h2>\n <p data-note>A centered text label breaks the line, useful for \"or\" separators and section headings.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label='label=\"or\"'>\n <button-ui text=\"Sign in with Google\" variant=\"outline\" style=\"width:100%;\"></button-ui>\n <divider-ui label=\"or\"></divider-ui>\n <button-ui text=\"Sign in with Email\" variant=\"outline\" style=\"width:100%;\"></button-ui>\n </div>\n </div>\n <div data-artifact-container data-mt-sm>\n <div data-artifact-item data-artifact-label='label=\"Section 2\"'>\n <divider-ui label=\"Section 2\"></divider-ui>\n </div>\n </div>\n</section>",
|
|
13
|
+
"source": "site/pages/components/divider/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "divider-vertical-label",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "section",
|
|
5
|
+
"page": "/site/components/divider",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-section": "",
|
|
10
|
+
"data-property": "vertical-label"
|
|
11
|
+
},
|
|
12
|
+
"html": "<section data-section data-property=\"vertical-label\" data-chunk=\"divider-vertical-label\">\n <h2 variant=\"section\">vertical with label</h2>\n <p data-note>Vertical dividers can also have a centered label.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label=\"vertical + label\">\n <div style=\"display:flex; align-items:center; gap:var(--a-space-3); height:60px;\">\n <span>Left content</span>\n <divider-ui vertical label=\"or\"></divider-ui>\n <span>Right content</span>\n </div>\n </div>\n </div>\n</section>",
|
|
13
|
+
"source": "site/pages/components/divider/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "divider-vertical",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "section",
|
|
5
|
+
"page": "/site/components/divider",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-section": "",
|
|
10
|
+
"data-property": "vertical"
|
|
11
|
+
},
|
|
12
|
+
"html": "<section data-section data-property=\"vertical\" data-chunk=\"divider-vertical\">\n <h2 variant=\"section\">vertical</h2>\n <p data-note>A vertical line for separating items in a horizontal flex row.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label=\"vertical in flex row\">\n <div style=\"display:flex; align-items:center; gap:var(--a-space-3); height:40px;\">\n <span>Home</span>\n <divider-ui vertical></divider-ui>\n <span>Products</span>\n <divider-ui vertical></divider-ui>\n <span>About</span>\n <divider-ui vertical></divider-ui>\n <span>Contact</span>\n </div>\n </div>\n </div>\n</section>",
|
|
13
|
+
"source": "site/pages/components/divider/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "drawer-2fa-key",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "drawer-ui",
|
|
5
|
+
"page": "/site/examples/profile-security",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"side": "right",
|
|
10
|
+
"size": "md"
|
|
11
|
+
},
|
|
12
|
+
"html": "<drawer-ui id=\"drawer-2fa-key\" data-chunk=\"drawer-2fa-key\" side=\"right\" size=\"md\">\n <header>\n <span slot=\"icon\">\n <avatar-ui icon=\"key\"></avatar-ui>\n </span>\n <span slot=\"heading\">\n <text-ui strong>Add a security key</text-ui>\n </span>\n <span slot=\"action\"></span>\n </header>\n <section>\n <text-ui color=\"subtle\" size=\"sm\">Hardware factors (YubiKey, Titan, built-in TPM) resist phishing and SIM-swap.</text-ui>\n </section>\n <section>\n <col-ui gap=\"4\">\n <alert-ui\n variant=\"info\"\n icon=\"info\"\n text=\"Your browser will prompt for the key when you click Register. Follow the device's instructions — usually a tap or press.\"\n ></alert-ui>\n <divider-ui></divider-ui>\n <col-ui gap=\"3\">\n <text-ui strong>Key details</text-ui>\n <field-ui label=\"Key name\" hint=\"Pick something you'll recognize later.\">\n <input-ui placeholder=\"e.g. YubiKey 5C adia (desk)\"></input-ui>\n </field-ui>\n <field-ui label=\"Key type\">\n <select-ui value=\"fido2\">\n <option value=\"fido2\">FIDO2 / WebAuthn</option>\n <option value=\"u2f\">U2F (legacy)</option>\n <option value=\"platform\">Platform authenticator (Touch ID, Windows Hello)</option>\n </select-ui>\n </field-ui>\n <field-ui label=\"Require for every sign-in\" inline>\n <switch-ui></switch-ui>\n </field-ui>\n <field-ui label=\"Allow for step-up (sensitive actions only)\" inline>\n <switch-ui checked></switch-ui>\n </field-ui>\n </col-ui>\n <divider-ui></divider-ui>\n <col-ui gap=\"2\">\n <text-ui strong>Registered keys</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">None yet. Registration runs entirely on your device — we only see the public key.</text-ui>\n </col-ui>\n </col-ui>\n </section>\n <footer slot=\"footer\">\n <grid-ui>\n <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n <button-ui text=\"Register key\" icon=\"key\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n </grid-ui>\n </footer>\n</drawer-ui>",
|
|
13
|
+
"source": "site/pages/examples/profile-security/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "drawer-2fa-sms",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "drawer-ui",
|
|
5
|
+
"page": "/site/examples/profile-security",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"side": "right",
|
|
10
|
+
"size": "md"
|
|
11
|
+
},
|
|
12
|
+
"html": "<drawer-ui id=\"drawer-2fa-sms\" data-chunk=\"drawer-2fa-sms\" side=\"right\" size=\"md\">\n <header>\n <span slot=\"icon\">\n <avatar-ui icon=\"chat-circle-text\"></avatar-ui>\n </span>\n <span slot=\"heading\">\n <text-ui strong>SMS authentication</text-ui>\n <badge-ui text=\"Not recommended\" variant=\"warning\"></badge-ui>\n </span>\n <span slot=\"action\"></span>\n </header>\n <section>\n <text-ui color=\"subtle\" size=\"sm\">Only use SMS if you have no access to an authenticator app or hardware key.</text-ui>\n </section>\n <section>\n <col-ui gap=\"4\">\n <alert-ui\n variant=\"warning\"\n icon=\"warning\"\n text=\"SMS codes can be intercepted via SIM-swap attacks. Prefer an authenticator app or hardware key. If you proceed, we'll also require an authenticator as your primary factor.\"\n ></alert-ui>\n <divider-ui></divider-ui>\n <col-ui gap=\"3\">\n <text-ui strong>Phone number</text-ui>\n <row-ui gap=\"2\">\n <field-ui label=\"Country\">\n <select-ui value=\"us\" style=\"flex: 0 0 8rem\">\n <option value=\"us\">🇺🇸 +1</option>\n <option value=\"uk\">🇬🇧 +44</option>\n <option value=\"de\">🇩🇪 +49</option>\n <option value=\"fi\">🇫🇮 +358</option>\n </select-ui>\n </field-ui>\n <field-ui label=\"Number\">\n <input-ui placeholder=\"555 123 4567\" grow></input-ui>\n </field-ui>\n </row-ui>\n <button-ui text=\"Send verification code\" variant=\"outline\" icon=\"paper-plane-tilt\" stretch></button-ui>\n </col-ui>\n <divider-ui></divider-ui>\n <field-ui label=\"6-digit code\" hint=\"Enter the code we just texted you.\">\n <otp-input-ui length=\"6\"></otp-input-ui>\n </field-ui>\n </col-ui>\n </section>\n <footer slot=\"footer\">\n <grid-ui>\n <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n <button-ui text=\"Enable SMS 2FA\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n </grid-ui>\n </footer>\n</drawer-ui>",
|
|
13
|
+
"source": "site/pages/examples/profile-security/index.html",
|
|
14
|
+
"captured_at": "2026-04-28T04:46:20.743Z"
|
|
15
|
+
}
|