Mixins / foldkit-mixins-ui
Mechanisms
Touch and Icons are style mechanisms, not components: no slots, no views.
Compose them into your own slots. Touch.target floors one control at 44px
where the pointer is coarse; Touch.targets floors every boxed control a
region draws. Icons.glyph(size) draws the icon in --icon before the
element's words, and Icons.byAttribute(attribute, icons) sets --icon from
an attribute's value, where icons maps each value to its resolved url(…):
ts
const TileStyle = Style.forSlots(TileSlots)(
{
tile: Style.compose(
Touch.target,
Icons.glyph('1rem'),
Icons.byAttribute('data-block', { Hero: iconUrl('hero') }),
),
},
{ layer: L.layer('app') },
)