Mixins / foldkit-mixins-ui

CardSlots

const · packages/mixins-ui/src/card.ts:17

const CardSlots: 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 image: 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 media: 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 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 title: 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 description: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Intera …;

A card publishes its regions as slots; it owns no state. Draw the parts the card has and skip the rest: a bare card is a root with content, a full one adds an image, a media tile, a header with an action, and a footer.

A pressable card is one control: overlay is a link or a button stretched over the whole card, named by the title, so the card is one tab stop and one announcement. The action, the footer and the dismiss button sit above it and stay pressable on their own. The root carries data-selected, data-disabled, data-pressable and data-dismissible for a style to read.