Components
Input Group
Merged controls: attachments and the entry fused into one seal. The Root draws the single hairline and carries the group's focus halo; the Addon is a recessed cell for the reader's fixed words — a scheme, a unit, a quiet button — placed before or after the entry. Put our Input (or Textarea) inside and its own border and halo step aside in favor of the group's; the stylesheet does the merging, the wrapper adds no visuals of its own.
#Basic usage
.com
<script setup lang="ts">
import { rotate_cw } from "@bysages/icons";
import { Button, Icon, Input, InputGroup } from "@bysages/vue";
</script>
<template>
<InputGroup class="max-w-96">
<InputGroup.Addon>
<Button variant="ghost" square aria-label="Insert handle">
<Icon :glyph="rotate_cw" />
</Button>
</InputGroup.Addon>
<Input placeholder="username" />
<InputGroup.Addon>.com</InputGroup.Addon>
</InputGroup>
</template>
#Props
#InputGroupRoot
A styled part — no props of its own; it takes the anatomy's shared styling.
#InputGroupAddon
A styled part — no props of its own; it takes the anatomy's shared styling.