You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
20 lines
715 B
20 lines
715 B
5 months ago
|
<script lang="ts">
|
||
|
|
/**
|
||
|
|
* Eidos `<ToggleGroup.Item>`. Visual styling for the item lives in
|
||
|
|
* `toggle-group.css` and reads `data-variant` / `data-color` /
|
||
|
|
* `data-size` from the ancestor root (set by `<ToggleGroup>`).
|
||
|
|
*
|
||
|
|
* The morfo emits `data-state="on"|"off"`, `data-disabled` and
|
||
|
|
* `data-value` on the item — the recipe consumes those for the
|
||
|
|
* pressed-state visuals.
|
||
|
|
*/
|
||
|
|
import * as ToggleGroup from '$soma/components/toggle-group';
|
||
|
|
import type { ToggleGroupItemProps } from './types';
|
||
|
|
|
||
|
|
let { iconOnly = false, children, ...rest }: ToggleGroupItemProps = $props();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<ToggleGroup.Item {...rest} data-icon-only={iconOnly ? '' : undefined}>
|
||
|
|
{@render children?.()}
|
||
|
|
</ToggleGroup.Item>
|