@greendrake/ui 0.1.0

package/src/ModalOnClick.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Modal from './Modal.vue'
+
+// Trigger-plus-modal composite: the default slot is the trigger element;
+// clicking it opens the built-in Modal around the `content` slot. The modal
+// chrome props mirror Modal's and are forwarded as-is — undefined falls
+// through to Modal's own defaults; `modalClass` is a distinct prop because
+// class/$attrs on this component land on the trigger element.
+//
+// `ok` is re-emitted WITHOUT auto-closing: async submitters keep the modal
+// open on failure and close programmatically (exposed onCancel) on success.
+// `cancel` auto-closes first, then re-emits for callers that reset form state
+// on dismissal.
+withDefaults(
+    defineProps<{
+        // Forwarded to Modal: titled header with explicit close.
+        title?: string
+        tag?: string
+        // Trigger-element attributes, declared (not $attrs) so strictTemplates
+        // accepts them at call sites.
+        id?: string
+        type?: string
+        modalClass?: string
+        okLabel?: string
+        cancelLabel?: string
+        okDisabled?: boolean
+        hideOk?: boolean
+        closable?: boolean
+        expandable?: boolean
+        buttons?: boolean
+    }>(),
+    {
+        tag: 'a',
+        // Vue casts absent boolean props to false unless a default is
+        // declared; explicit `undefined` defaults keep absent props undefined
+        // so Modal's own defaults (notably `buttons: true`) stay in effect.
+        okDisabled: undefined,
+        hideOk: undefined,
+        closable: undefined,
+        expandable: undefined,
+        buttons: undefined
+    }
+)
+const emit = defineEmits<{ open: []; ok: []; cancel: []; click: [event: MouseEvent] }>()
+const modalOpen = ref(false)
+const onClick = (event: MouseEvent) => {
+    // Re-emitted so callers can react to the trigger interaction itself
+    // (e.g. stop propagation inside a clickable row).
+    emit('click', event)
+    modalOpen.value = true
+    emit('open')
+}
+const onCancel = () => {
+    modalOpen.value = false
+}
+const onModalCancel = () => {
+    onCancel()
+    emit('cancel')
+}
+defineExpose({
+    open: onClick,
+    onCancel
+})
+</script>
+<template>
+    <Modal v-if="modalOpen" :class="modalClass" :title="title" :ok-label="okLabel" :cancel-label="cancelLabel" :ok-disabled="okDisabled" :hide-ok="hideOk" :closable="closable" :expandable="expandable" :buttons="buttons" @ok="emit('ok')" @cancel="onModalCancel">
+        <slot name="content" />
+    </Modal>
+    <component :is="tag" :id="id" :type="type" href="#" v-bind="$attrs" @click.prevent="onClick">
+        <slot />
+    </component>
+</template>

package/src/OptionSwitch.vue

@@ -0,0 +1,110 @@
+<script lang="ts">
+export type OptionValue = string | number | boolean
+// Array form: a bare value renders String(value) as its title; a [value, title]
+// tuple sets the title explicitly. Map form: value → title.
+export type OptionsArray<T extends OptionValue = OptionValue> = Array<T | [T, string]>
+export type OptionsMap<T extends OptionValue = OptionValue> = Map<T, string>
+</script>
+<script setup lang="ts" generic="T extends string | number | boolean">
+import { computed, ref, onUnmounted } from 'vue'
+import Form, { type FormState } from './Form'
+
+// Radio-style switch between a fixed set of values: clicking an option runs
+// saveHandler through the Form state machine (with optional confirmation) and
+// commits the model on success. Each option can carry extra markup via a slot
+// named after its value.
+const props = withDefaults(
+    defineProps<{
+        label?: string
+        options: OptionsArray<T> | OptionsMap<T>
+        requireConfirmation?: boolean
+        disabledOptions?: T[]
+        saveHandler?: (value: T) => Promise<void> | void
+    }>(),
+    {
+        disabledOptions: () => []
+    }
+)
+const model = defineModel<T>()
+
+// Re-emitted from the root so hosts can react to the interaction itself
+// (e.g. dismissing a popper that would cover the confirm step).
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+
+const optionsMap = computed(() => {
+    if (!Array.isArray(props.options)) {
+        return props.options
+    }
+    const map = new Map<T, string>()
+    for (const el of props.options) {
+        if (Array.isArray(el)) {
+            map.set(el[0], el[1])
+        } else {
+            map.set(el, String(el))
+        }
+    }
+    return map
+})
+if (model.value !== undefined && !optionsMap.value.has(model.value)) {
+    throw new Error(`OptionSwitch value is not among the options: ${model.value}`)
+}
+const values = computed(() => Array.from(optionsMap.value.keys()))
+const titles = computed(() => Array.from(optionsMap.value.values()))
+const value2index = computed(() => new Map(values.value.map((v, i) => [v, i])))
+const currentValueIndex = computed(() => (model.value === undefined ? undefined : value2index.value.get(model.value)))
+const candidateValue = ref<T | null>(null)
+const candidateValueIndex = computed(() => (candidateValue.value !== null ? value2index.value.get(candidateValue.value) : undefined))
+const form = new Form({
+    alwaysValid: true,
+    alwaysDirty: true,
+    requireConfirmation: props.requireConfirmation,
+    handler: async () => {
+        // action() is only ever reached via onLabelClick, which sets the candidate.
+        const value = candidateValue.value!
+        await props.saveHandler?.(value)
+        model.value = value
+    },
+    successTimeout: false
+})
+onUnmounted(() => form.destroy())
+const disabledSet = computed(() => new Set(props.disabledOptions))
+const onLabelClick = async (vi: number) => {
+    if (disabledSet.value.has(values.value[vi])) {
+        return
+    }
+    candidateValue.value = values.value[vi]
+    await form.action()
+}
+const stateIs = (s: FormState) => computed(() => form.state.value === s)
+const isInProgress = stateIs('inprogress')
+const isError = stateIs('error')
+const isConfirm = stateIs('confirm')
+</script>
+<template>
+    <div class="OptionSwitch__Wrap">
+        <label v-if="label">{{ label }}</label>
+        <div :class="{ OptionSwitch: true, saving: isInProgress, error: isError }" @click="e => emit('click', e)">
+            <div v-for="(title, i) in titles" :key="String(values[i])" :data-index="i" :class="{ confirm: isConfirm && candidateValueIndex === i, current: currentValueIndex === i, disabled: disabledSet.has(values[i]) }" @click="onLabelClick(i)">
+                <div v-if="title">{{ title }}</div>
+                <slot :name="String(values[i])" />
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="scss">
+.OptionSwitch {
+    position: relative;
+    > div {
+        display: flex;
+        align-items: start;
+        // Let the label and slotted content (e.g. a SelectBox) shrink below
+        // their content width instead of forcing the row past its container.
+        // Flex items default to min-width:auto; a wide, non-wrapping slot value
+        // would otherwise overflow. The radio glyph keeps its fixed width via
+        // its own min-width.
+        > * {
+            min-width: 0;
+        }
+    }
+}
+</style>

package/src/Password.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, nextTick } from 'vue'
+import { hasFinePointer } from '@greendrake/util'
+import FixAndroidTyping from './FixAndroidTyping'
+
+const showPassword = ref(false)
+const plainInput = ref<HTMLInputElement | null>(null)
+const passwordInput = ref<HTMLInputElement | null>(null)
+const model = defineModel<string>({ default: '' })
+const props = withDefaults(
+    defineProps<{
+        autofocus?: boolean
+        minLength?: number
+        // Lands on the wrapper — tests and FieldTip anchor `#<id>`, inner
+        // inputs via `#<id> input`.
+        id?: string
+    }>(),
+    {
+        minLength: 1
+    }
+)
+const currentInput = computed(() => (showPassword.value ? plainInput : passwordInput))
+const onInput = () => FixAndroidTyping(currentInput.value, model)
+const onSwitchVisibility = () => {
+    // Preserve the caret position
+    const caretPos = currentInput.value.value?.selectionStart ?? 0
+    showPassword.value = !showPassword.value
+    nextTick(() => {
+        const input = currentInput.value.value
+        if (input) {
+            input.focus()
+            input.setSelectionRange(caretPos, caretPos)
+        }
+    })
+}
+// Pointer devices only — see TextField for why touch is excluded.
+if (props.autofocus && hasFinePointer()) {
+    onMounted(() => {
+        currentInput.value.value?.focus()
+    })
+}
+</script>
+<template>
+    <div :id="id" class="Password" :class="{ PasswordVisible: showPassword }">
+        <input v-if="showPassword" ref="plainInput" v-model="model" type="text" :minlength="minLength" required spellcheck="false" @input="onInput" />
+        <input v-else ref="passwordInput" v-model="model" type="password" :minlength="minLength" required @input="onInput" />
+        <div @click.prevent="onSwitchVisibility"></div>
+    </div>
+</template>
+<style lang="scss">
+@use '@greendrake/scss-kit' as *;
+.Password {
+    display: flex;
+    border: solid 1px var(--font-color);
+    border-radius: 2px;
+    input {
+        border: 0;
+        flex-grow: 1;
+        &:focus {
+            outline: none;
+        }
+        line-height: var(--line-height-normal);
+        @include monospace;
+    }
+    > div {
+        background-color: green;
+        mask-size: 70%;
+        opacity: 0.8;
+        align-self: stretch;
+        mask-position: 2px center;
+        cursor: default;
+        width: 30px;
+        &:hover {
+            opacity: 1;
+        }
+        @include icon-base;
+        @include i('eye');
+    }
+    &.PasswordVisible {
+        > div {
+            @include i('eye-off');
+        }
+    }
+}
+</style>

package/src/RowSelect.ts

@@ -0,0 +1,211 @@
+import { reactive, ref, onUnmounted, type Ref, type ComputedRef } from 'vue'
+import useSelection from './useSelection'
+
+const INTERACTIVE = 'a,button,input,select,textarea,[role="button"]'
+const DRAG_THRESHOLD = 5
+
+// Pointer-driven selection for a <table> host: row click/ctrl/shift selection
+// (via useSelection), rubber-band drag selection over empty space, and — when
+// onReorder is provided — drag-to-reorder of rows. The host binds containerRef
+// to the table's scroll container and wires onPointerDown/onKeyDown.
+export default function RowSelect<Id extends string | number>(items: Ref<Record<string, unknown>[]> | ComputedRef<Record<string, unknown>[]>, idField: string, onReorder?: (orderedIds: Id[]) => void) {
+    const sel = useSelection<Id>(items, idField)
+    const { selected, getId } = sel
+    const containerRef = ref<HTMLElement | null>(null)
+    const band = reactive({
+        active: false,
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0
+    })
+    const reorder = reactive({
+        active: false,
+        fromIndex: -1,
+        toIndex: -1
+    })
+
+    let startX = 0
+    let startY = 0
+    let dragStarted = false
+    let preClickSnapshot: Set<Id> | null = null
+    let cleanupDrag: (() => void) | null = null
+
+    function getIntersectingIds(top: number, bottom: number): Id[] {
+        const tbody = containerRef.value?.querySelector('tbody')
+        if (!tbody) return []
+        const rows = tbody.children
+        const ids: Id[] = []
+        for (let i = 0; i < rows.length && i < items.value.length; i++) {
+            const r = rows[i].getBoundingClientRect()
+            if (r.bottom > top && r.top < bottom) ids.push(getId(i))
+        }
+        return ids
+    }
+
+    function hitIndex(target: HTMLElement): number {
+        const tbody = containerRef.value?.querySelector('tbody')
+        if (!tbody) return -1
+        const tr = target.closest('tr')
+        if (!tr || tr.parentElement !== tbody) return -1
+        const index = Array.prototype.indexOf.call(tbody.children, tr)
+        return index >= 0 && index < items.value.length ? index : -1
+    }
+
+    function computeDropIndex(clientY: number): number {
+        const tbody = containerRef.value!.querySelector('tbody')!
+        const rows = tbody.children
+        for (let i = 0; i < rows.length && i < items.value.length; i++) {
+            const r = rows[i].getBoundingClientRect()
+            if (clientY < (r.top + r.bottom) / 2) return i
+        }
+        return items.value.length
+    }
+
+    function armBandDrag(): void {
+        const onMove = (me: PointerEvent) => {
+            if (!dragStarted && Math.abs(me.clientX - startX) < DRAG_THRESHOLD && Math.abs(me.clientY - startY) < DRAG_THRESHOLD) return
+
+            if (!dragStarted) {
+                dragStarted = true
+                selected.clear()
+            }
+
+            const cr = containerRef.value!.getBoundingClientRect()
+            band.left = Math.min(startX, me.clientX) - cr.left
+            band.top = Math.min(startY, me.clientY) - cr.top
+            band.width = Math.abs(me.clientX - startX)
+            band.height = Math.abs(me.clientY - startY)
+            band.active = true
+
+            const bandTop = Math.min(startY, me.clientY)
+            const bandBottom = Math.max(startY, me.clientY)
+            selected.clear()
+            for (const rid of getIntersectingIds(bandTop, bandBottom)) selected.add(rid)
+        }
+
+        const onUp = () => {
+            document.removeEventListener('pointermove', onMove)
+            document.removeEventListener('pointerup', onUp)
+            cleanupDrag = null
+            band.active = false
+            dragStarted = false
+        }
+
+        document.addEventListener('pointermove', onMove)
+        document.addEventListener('pointerup', onUp)
+        cleanupDrag = onUp
+    }
+
+    function armReorderDrag(fromIndex: number): void {
+        const onMove = (me: PointerEvent) => {
+            if (!dragStarted && Math.abs(me.clientX - startX) < DRAG_THRESHOLD && Math.abs(me.clientY - startY) < DRAG_THRESHOLD) return
+
+            if (!dragStarted) {
+                dragStarted = true
+                // Restore selection state from before the tentative click
+                if (preClickSnapshot) {
+                    selected.clear()
+                    for (const id of preClickSnapshot) selected.add(id)
+                    preClickSnapshot = null
+                }
+                reorder.fromIndex = fromIndex
+                reorder.active = true
+            }
+
+            reorder.toIndex = computeDropIndex(me.clientY)
+        }
+
+        const onUp = () => {
+            document.removeEventListener('pointermove', onMove)
+            document.removeEventListener('pointerup', onUp)
+            cleanupDrag = null
+
+            if (reorder.active) {
+                const from = reorder.fromIndex
+                let to = reorder.toIndex
+                reorder.active = false
+                reorder.fromIndex = -1
+                reorder.toIndex = -1
+
+                if (to > from) to--
+                if (from !== to) {
+                    const ids = items.value.map(item => item[idField] as Id)
+                    const [moved] = ids.splice(from, 1)
+                    ids.splice(to, 0, moved)
+                    onReorder!(ids)
+                }
+            }
+
+            dragStarted = false
+        }
+
+        document.addEventListener('pointermove', onMove)
+        document.addEventListener('pointerup', onUp)
+        cleanupDrag = onUp
+    }
+
+    function onPointerDown(e: PointerEvent): void {
+        const target = e.target as HTMLElement
+        if (target.closest(INTERACTIVE)) return
+
+        e.preventDefault()
+        containerRef.value?.focus()
+
+        const rowIndex = hitIndex(target)
+        const id = rowIndex >= 0 ? getId(rowIndex) : null
+
+        if (id !== null && e.shiftKey) {
+            sel.rangeTo(id)
+            return
+        }
+
+        preClickSnapshot = new Set(selected)
+
+        if (id !== null) {
+            if (e.ctrlKey || e.metaKey) {
+                sel.toggle(id)
+            } else {
+                sel.replace(id)
+            }
+        }
+
+        startX = e.clientX
+        startY = e.clientY
+        dragStarted = false
+
+        if (id !== null && onReorder) {
+            armReorderDrag(rowIndex)
+        } else {
+            armBandDrag()
+        }
+    }
+
+    function onKeyDown(e: KeyboardEvent): void {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+            e.preventDefault()
+            sel.selectAll()
+            return
+        }
+
+        const isUp = e.key === 'ArrowUp'
+        const isDown = e.key === 'ArrowDown'
+        if (!isUp && !isDown) return
+
+        e.preventDefault()
+        sel.moveCursor(isUp ? 'up' : 'down', e.shiftKey)
+    }
+
+    onUnmounted(() => {
+        if (cleanupDrag) cleanupDrag()
+    })
+
+    return {
+        selected,
+        containerRef,
+        band,
+        reorder,
+        onPointerDown,
+        onKeyDown
+    }
+}

package/src/SearchField.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+// Attrs are placed by hand (see the template): class/style on the root, the
+// rest — placeholder, role, aria-* — on the inner input. That split is what Vue
+// does by default and what this option suspends; forwarding the whole $attrs
+// put a host's class on the <input>, where a rule written against the field
+// silently never matched (the busy affordance `.SearchField.spinner::before`,
+// driven by AsyncSearch, is exactly that case).
+defineOptions({ inheritAttrs: false })
+import { ref, watch } from 'vue'
+import { Debouncer } from '@greendrake/util'
+import TextField from './TextField.vue'
+import { messages } from './messages'
+
+const model = defineModel<string>({ default: '' })
+const internalModel = ref(model.value)
+const props = withDefaults(
+    defineProps<{
+        placeholder?: string
+        autofocus?: boolean
+        // true ⇒ default delay; a number ⇒ fixed delay (ms); a function ⇒ delay
+        // decided per keystroke from the prospective value (e.g. a swift debounce
+        // when the consumer knows the change resolves locally, a longer one when it
+        // triggers a remote fetch).
+        debounce?: boolean | number | ((value: string) => number)
+    }>(),
+    {
+        debounce: undefined
+    }
+)
+// One Debouncer instance for the field's lifetime so each keystroke invalidates the
+// previous pending fire; the delay is resolved per fire (see watch below) to support
+// the function form. ms 0 here is just a placeholder — fire() always gets an explicit delay.
+const debouncer = props.debounce ? new Debouncer(0) : undefined
+const resolveDelay = (value: string): number => {
+    const d = props.debounce
+    if (typeof d === 'function') return d(value)
+    if (d === true) return 600
+    return d || 0
+}
+const clear = () => {
+    model.value = ''
+}
+// Commit the current (un-debounced) value immediately and drop any pending
+// debounced update, so an explicit "search now" (Enter) acts on exactly what's
+// typed right now. Returns whether the value actually changed — letting the caller
+// distinguish a real update (the model watcher will react) from a no-op re-trigger.
+const flush = (): boolean => {
+    debouncer?.cancel()
+    if (model.value === internalModel.value) return false
+    model.value = internalModel.value
+    return true
+}
+defineExpose({ flush })
+watch(model, v => {
+    if (v !== internalModel.value) {
+        internalModel.value = v
+    }
+})
+watch(internalModel, async v => {
+    if (debouncer) {
+        const proceed = await debouncer.fire(resolveDelay(v))
+        if (!proceed()) {
+            return
+        }
+    }
+    model.value = v
+})
+</script>
+<template>
+    <div class="SearchField" :class="$attrs.class" :style="$attrs.style" @keyup.esc="clear">
+        <!-- Escape handled on the root (keyup bubbles from the inner input). A
+             comment ABOVE this div would render the component as a fragment in
+             dev builds and break $el consumers (AsyncSearch anchors its popper
+             on it) — the attr-splitting rationale is in the script instead. -->
+        <TextField v-model="internalModel" :placeholder="placeholder" :autofocus="autofocus" v-bind="{ ...$attrs, class: undefined, style: undefined }" />
+        <button v-if="internalModel" type="button" class="clear" :aria-label="messages.clear" @click="clear" />
+    </div>
+</template>
+<style scoped lang="scss">
+.SearchField {
+    display: flex;
+    position: relative;
+    input {
+        padding-inline: 30px;
+        flex-grow: 1;
+        width: 100%;
+    }
+    .clear {
+        position: absolute;
+        inset-inline-end: 4px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 24px;
+        height: 24px;
+        padding: 0;
+        border: none;
+        background-color: var(--font-color);
+        background-image: none;
+        opacity: 0.5;
+        cursor: default;
+        mask-position: center center;
+        mask-repeat: no-repeat;
+        mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5L15 15M15 5L5 15' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+        &:hover {
+            opacity: 0.8;
+        }
+    }
+    &::after {
+        content: '';
+        background-color: var(--font-color);
+        width: 32px;
+        height: 70%;
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        opacity: 0.5;
+        mask-position: center center;
+        mask-repeat: no-repeat;
+        mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.6923 8.92308C12.6923 11.0012 11.0012 12.6923 8.92308 12.6923C6.84495 12.6923 5.15385 11.0012 5.15385 8.92308C5.15385 6.84495 6.84495 5.15385 8.92308 5.15385C11.0012 5.15385 12.6923 6.84495 12.6923 8.92308ZM17 15.9231C17 15.637 16.8822 15.3594 16.6887 15.1659L13.8029 12.28C14.4844 11.2957 14.8462 10.1178 14.8462 8.92308C14.8462 5.65024 12.1959 3 8.92308 3C5.65024 3 3 5.65024 3 8.92308C3 12.1959 5.65024 14.8462 8.92308 14.8462C10.1178 14.8462 11.2957 14.4844 12.28 13.8029L15.1659 16.6803C15.3594 16.8822 15.637 17 15.9231 17C16.512 17 17 16.512 17 15.9231Z' fill='currentColor'/%3E%3C/svg%3E%0A");
+    }
+}
+</style>

package/src/SegmentedControl.vue

@@ -0,0 +1,85 @@
+<script lang="ts">
+export interface SegmentedOption {
+    value: string
+    label: string
+}
+</script>
+<script setup lang="ts">
+import { randomString } from '@greendrake/util'
+
+// A segmented control backed by real radio inputs: native semantics (arrow-key
+// group navigation, form participation) with pill presentation. Each input is
+// stretched invisibly across its whole segment, so the accessible target IS
+// the segment — no sub-24px radio dots (WCAG 2.5.8).
+// `ariaLabel` names the group for assistive tech (the bare Available/Wanted
+// segments give no context out of the visual layout); when set the container
+// becomes an explicit radiogroup.
+defineProps<{ options: SegmentedOption[]; ariaLabel?: string }>()
+const model = defineModel<string>({ required: true })
+const group = randomString()
+</script>
+<template>
+    <div class="SegmentedControl" :role="ariaLabel ? 'radiogroup' : undefined" :aria-label="ariaLabel">
+        <label v-for="opt in options" :key="opt.value" class="SegmentedControl__segment" :class="{ 'SegmentedControl__segment--active': model === opt.value }">
+            <input v-model="model" type="radio" :name="group" :value="opt.value" />
+            <span>{{ opt.label }}</span>
+        </label>
+    </div>
+</template>
+<style lang="scss">
+.SegmentedControl {
+    display: inline-flex;
+    border: 1px solid var(--border-color-light);
+    border-radius: 999px;
+    overflow: hidden;
+    background: var(--form-background);
+    &__segment {
+        position: relative;
+        // Segments share the track equally, so the control reads symmetric
+        // whether it sizes to content or is stretched by its container.
+        flex: 1 1 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 32px;
+        padding: 0 var(--space-3);
+        cursor: default;
+        white-space: nowrap;
+        input {
+            // Invisible but real: covers the segment so IT is the hit target,
+            // and keyboard focus stays on a native radio.
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            opacity: 0;
+            cursor: default;
+        }
+        &:not(:last-child) {
+            border-inline-end: 1px solid var(--border-color-light);
+        }
+        // End caps carry the track's pill radius so focus rings (inset
+        // box-shadows follow border-radius) hug the curve instead of being
+        // clipped into a broken C by the track's overflow:hidden.
+        &:first-child {
+            border-radius: 999px 0 0 999px;
+        }
+        &:last-child {
+            border-radius: 0 999px 999px 0;
+        }
+        &--active {
+            background: var(--accent-color);
+            color: var(--accent-contrast);
+        }
+        // Two-tone inset ring keeps the app's green focus duty without going
+        // invisible on the green active fill: the outer accent ring reads on
+        // neutral segments, the inner contrast ring reads on the accent fill.
+        &:has(input:focus-visible) {
+            box-shadow:
+                inset 0 0 0 2px var(--accent-color, currentColor),
+                inset 0 0 0 4px var(--accent-contrast, transparent);
+        }
+    }
+}
+</style>