Mixins / foldkit-mixins-ui

RatingSlots

const · packages/mixins-ui/src/rating.ts:16

const RatingSlots: Slots.Contract<{
  readonly root: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly [Attr.AttrToken<'role'>],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly label: 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 star: Slot.UnnamedSlot<
    Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >,
    readonly [Event.EventToken<'change'>],
    readonly [
      Attr.AttrToken<'aria-label'>,
      Attr.AttrToken<'disabled'>,
      Attr.AttrToken<'value'>,
    ],
    readonly Slot.RequirementName[],
    boolean
  >
}>

A star rating, the APG's radio group of native radios: a root with role="radiogroup" named by its label, and a star per value, an input type="radio" sharing one name, so the browser moves the focus and the choice with the arrows and a form submits the value. The rating is the application's: the view draws value (none before anyone rates) and sends onChange with the star chosen. Each star carries data-filled; the recipe draws the shape in CSS. Read-only, the root is one image whose name says the rating, and the stars are plain marks.