Mixins / foldkit-mixins-ui

ImageSlots

const · packages/mixins-ui/src/image.ts:20

const ImageSlots: Slots.Contract<{
  readonly frame: 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 source: 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
  >
}>

An image publishes its frame (a picture), a source per format, and the img; it owns no state or messages, and the browser owns loading and which candidate to fetch. The img carries the original's ratio as --fk-image-ratio and the placeholder's background as --fk-image-placeholder, the focal point as --fk-image-focus, and data-layout (fixed, constrained, full). A frame whose provider has no URL for the image is drawn empty, marked data-unavailable, holding the image's box (--fk-image-ratio, --fk-image-width) and its alt text.