Mixins / foldkit-mixins-ui

AppShellSlots

const · packages/mixins-ui/src/appShell.ts:21

const AppShellSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly skip: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly header: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly brand: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly mark: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly title: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonl …;

An application's page frame: a skip link, a header bar, an optional side column, the main region and a footer. It places what it is given and owns nothing else, with no Model, no Messages and no Mount, so it draws the same on a server.

The side column takes a Sidebar's view, which brings its own navigation landmark, its collapse, and, below the theme's md breakpoint, its opener and Sheet. At that width the frame puts the column beside the header, where the opener belongs. The header's actions and status take components (Segmented, Badge, Avatar) rather than text.

Its landmarks are one of each: the header is the banner, main is the main region, which the skip link focuses, and the footer is the content info. The side column is a plain region, since a Sidebar inside it is the navigation.