[Do not merge] [DRAFT] App bundle: AppFrame + AppHeader + AppFooter

[vdepizzol]

✨ DRAFT ✨

The App bundle provides top-level structure to all pages, with the introduction of AppFrame, AppHeader, and AppFooter components.

AppFrame

AppFrame is a thin wrapper that holds the page together, while making sure that the page's global footer is always visible "after the fold". This guarantees that loading states won't show the footer temporarily, and allows the footer to include richer interactions without obfuscating or competing with the page contents.

Features

• Accessible navigation with "Skip to content"-style anchors
• Generic slots/regions for header, body, and footer

AppHeader

AppHeader provides a responsive global header, with logo and avatar triggers, scalable breadcrumb-style context region, search and system action buttons, local navigation support.

Features

• Support for navigation drawer openers, with keyboard + click event compatibility
• Breadcrumb-style region context with simplified Narrow viewport behavior that turns breadcrumbs into a single-anchor interaction.
• Responsive search + actions

Pending tasks

• Text overflow/ellipsis support for context region
• Leading visual for context item
• Navigation drawer markup
• Validate theming + forced-colors

AppFooter

Coming soon

Pending tasks

• Validate minimum adoption with current footer markup

Can these changes ship as is?

• Yes, this PR does not depend on additional changes. 🚢

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2477610

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[langermank]

Do you think the auto token for this type of behavior needs to be updated? 🤔 looks like we want 32px for fine. When would we want 16px?

--primer-control-minTarget-fine: var(--base-size-16);

[vdepizzol]

Superseded by #2147. AppHeader and AppFooter will have their own PRs.