@michaelthielemann/kestrel 1.2.1

package/layers/ui/app/components/ui/NumberInput.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+// Attrs (id, aria-*) must land on the inner <input>, not the suffix wrapper, so the field label's
+// `for` keeps pointing at the control. With no suffix the input still receives them via v-bind="$attrs".
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    min?: number
+    max?: number
+    step?: number | 'any'
+    placeholder?: string
+    disabled?: boolean
+    // Display-only suffix (e.g. 'rem'). When set, the input gains a trailing adornment; the emitted
+    // model value is still a bare number. When absent, the plain `<input class="ui-number">` renders.
+    suffix?: string
+    /** Tighter padding for dense chrome (toolbars). Still meets the AA minimum target size. */
+    slim?: boolean
+  }>(),
+  { disabled: false, slim: false },
+)
+
+const model = defineModel<number | null>()
+
+// Bound with `v-model` rather than :value/@input on purpose: mid-edit text like '1.0' parses to the
+// number 1, and a plain :value binding would write that back over the text, deleting the trailing digit
+// and moving the caret ('1.05' would end up as 15). v-model's directive skips the DOM write while the
+// field is focused and its text still parses to the same number, so typing stays intact.
+// The proxy only maps the empty field to null; v-model already hands over a number for a number input.
+const text = computed<number | string>({
+  get: () => model.value ?? '',
+  set: (v) => { model.value = v === '' ? null : Number(v) },
+})
+
+// A number input can hold editing text the browser can't parse ('-', '1e'); its DOM value is then ''
+// and the model already null, so a save would silently drop what the user still sees in the field.
+// Snap the text back to the model so the field never shows a value that wouldn't be saved.
+// (Assigning `value` clears the unparsable editing text even though the raw value is already ''.)
+function snapBack(el: HTMLInputElement) {
+  if (el.validity?.badInput) el.value = model.value == null ? '' : String(model.value)
+}
+function onBlur(e: Event) {
+  snapBack(e.target as HTMLInputElement)
+}
+// Enter fires the ancestor form's implicit submission WITHOUT a preceding blur, so the blur guard
+// can't run — with the form's native validation off, a null would be saved while unparsable text
+// still shows. Suppress that submit and snap back so the mismatch is corrected and visible instead.
+function onKeydown(e: KeyboardEvent) {
+  if (e.key !== 'Enter' || e.isComposing) return
+  const el = e.target as HTMLInputElement
+  if (el.validity?.badInput) { e.preventDefault(); snapBack(el) }
+}
+</script>
+
+<template>
+  <div v-if="suffix" class="ui-number-wrap" :class="{ 'ui-number-wrap--slim': slim }" :data-disabled="disabled || undefined">
+    <input
+      v-model="text"
+      type="number"
+      :min="min"
+      :max="max"
+      :step="step"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      class="ui-number-wrap__input"
+      v-bind="$attrs"
+      @blur="onBlur"
+      @keydown="onKeydown"
+    >
+    <span class="ui-number-wrap__suffix" aria-hidden="true">{{ suffix }}</span>
+  </div>
+  <input
+    v-else
+    v-model="text"
+    type="number"
+    :min="min"
+    :max="max"
+    :step="step"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    class="ui-number"
+    :class="{ 'ui-number--slim': slim }"
+    v-bind="$attrs"
+    @blur="onBlur"
+    @keydown="onKeydown"
+  >
+</template>
+
+<style lang="scss">
+@use '../../assets/scss/mixins' as *;
+
+.ui-number {
+  @include input-base;
+  width: 100%;
+
+  &::placeholder {
+    color: var(--color-text-muted);
+  }
+  &--slim {
+    @include input-slim;
+  }
+}
+
+// Suffix variant (opt-in via the `suffix` prop). The border/radius live on the wrapper; the inner input
+// is borderless + transparent so it reads as one control, mirroring the slug prefix adornment.
+.ui-number-wrap {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--color-control-border, var(--color-border));
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  overflow: hidden; // clip the square-cornered suffix background to the wrapper's rounded border
+
+  &:focus-within {
+    outline: 2px solid var(--color-focus);
+    outline-offset: -2px;
+  }
+  &[data-disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  // input-base flags the invalid state on the input's own border; here the border lives on the wrapper
+  // while the inner input is borderless, so mirror it so a unit field shows the same red invalid border.
+  &:has(.ui-number-wrap__input[aria-invalid='true']) {
+    border-color: var(--color-danger);
+  }
+
+  &__input {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: var(--space-2) var(--space-3);
+    border: 0;
+    background: transparent;
+    color: var(--color-text);
+    font-size: var(--text-base);
+
+    &:focus-visible {
+      outline: none;
+    }
+    &::placeholder {
+      color: var(--color-text-muted);
+    }
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__suffix {
+    display: inline-flex;
+    align-items: center;
+    padding-inline: var(--space-3);
+    background: var(--color-surface-2);
+    color: var(--color-text-muted);
+    border-left: 1px solid var(--color-control-border, var(--color-border));
+    font-size: var(--text-sm);
+    white-space: nowrap;
+  }
+}
+
+// Slim adornment variant: the wrapper keeps its border/radius, only the inner box tightens. Written as a
+// separate rule (not nested) so `.ui-number-wrap--slim .ui-number-wrap__input` outranks the base element rule.
+.ui-number-wrap--slim {
+  .ui-number-wrap__input {
+    @include input-slim;
+  }
+  .ui-number-wrap__suffix {
+    padding-inline: var(--space-2);
+  }
+}
+</style>

package/layers/ui/app/components/ui/Richtext.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { watch, watchEffect } from 'vue'
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import { StarterKit } from '@tiptap/starter-kit'
+import { Highlight } from '@tiptap/extension-highlight'
+import { Subscript } from '@tiptap/extension-subscript'
+import { Superscript } from '@tiptap/extension-superscript'
+import { TextAlign } from '@tiptap/extension-text-align'
+import RichtextToolbar from './RichtextToolbar.vue'
+import { RichtextSpanClass, RichtextBlockClass } from '../../utils/richtext-preserve-class'
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    locale?: string
+    // a11y: the editing surface is a contenteditable with no native label; the field name + error/state
+    // are set on the ProseMirror DOM node (editor.view.dom) so AT announces a named multiline textbox.
+    ariaLabel?: string
+    describedby?: string
+    invalid?: boolean
+    required?: boolean
+  }>(),
+  { disabled: false },
+)
+const model = defineModel<string | null>()
+
+// StarterKit (v3) already bundles Link + Underline; only the rest are added here.
+const editor = useEditor({
+  content: model.value ?? '',
+  editable: !props.disabled,
+  // (no `immediatelyRender` — not in tiptap v3's EditorOptions type; the admin editor is SPA-only so the
+  // browser default applies.)
+  extensions: [
+    StarterKit.configure({
+      heading: { levels: [1, 2, 3, 4, 5, 6] },
+      link: { openOnClick: false },
+    }),
+    Highlight,
+    Subscript,
+    Superscript,
+    TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    RichtextSpanClass, RichtextBlockClass, // preserve consumer presentational classes on round-trip
+  ],
+  onUpdate: ({ editor }) => {
+    model.value = editor.isEmpty ? '' : editor.getHTML()
+  },
+})
+
+watch(model, (value) => {
+  const e = editor.value
+  if (!e) return
+  const next = value ?? ''
+  const current = e.isEmpty ? '' : e.getHTML()
+  // `emitUpdate: false`: this value came FROM the model, so re-emitting it would reach the edit form as
+  // a user edit — clearing the redo stack and turning a restored null back into ''.
+  if (next !== current) e.commands.setContent(next, { emitUpdate: false })
+})
+
+watch(() => props.disabled, (d) => editor.value?.setEditable(!d))
+
+// Apply the accessible name + textbox semantics directly to the ProseMirror surface, reactively (the
+// error-driven describedby/invalid arrive after mount). `editor.view.dom` is the contenteditable element.
+function setAttr(el: HTMLElement, name: string, value?: string) {
+  if (value) el.setAttribute(name, value)
+  else el.removeAttribute(name)
+}
+watchEffect(() => {
+  const dom = editor.value?.view?.dom as HTMLElement | undefined
+  if (!dom) return
+  dom.setAttribute('role', 'textbox')
+  dom.setAttribute('aria-multiline', 'true')
+  setAttr(dom, 'aria-label', props.ariaLabel)
+  setAttr(dom, 'aria-describedby', props.describedby)
+  setAttr(dom, 'aria-invalid', props.invalid ? 'true' : undefined)
+  setAttr(dom, 'aria-required', props.required ? 'true' : undefined)
+})
+</script>
+
+<template>
+  <div class="ui-richtext">
+    <RichtextToolbar :editor="editor" :locale="locale" :disabled="disabled" />
+    <EditorContent :editor="editor" class="ui-richtext__content" />
+  </div>
+</template>
+
+<style lang="scss">
+.ui-richtext {
+  border: 1px solid var(--color-control-border, var(--color-border));
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+
+  &__content {
+    .tiptap {
+      padding: var(--space-3);
+      min-height: 8rem;
+      outline: none;
+
+      :where(p, ul, ol, blockquote, pre, h1, h2, h3, h4, h5, h6) { margin: 0 0 var(--space-3); }
+      :where(p, ul, ol, blockquote, pre, h1, h2, h3, h4, h5, h6):last-child { margin-bottom: 0; }
+      ul, ol { padding-inline-start: var(--space-5); }
+      blockquote {
+        border-inline-start: 3px solid var(--color-border);
+        padding-inline-start: var(--space-3);
+        color: var(--color-text-muted);
+      }
+      pre {
+        background: var(--color-bg);
+        padding: var(--space-3);
+        border-radius: var(--radius-sm);
+        overflow-x: auto;
+      }
+      code { font-family: monospace; }
+      a { color: var(--color-primary); }
+      mark { background: var(--color-highlight); color: var(--color-on-highlight); }
+      hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }
+    }
+  }
+}
+</style>

package/layers/ui/app/components/ui/RichtextToolbar.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { Editor } from '@tiptap/vue-3'
+import UiButton from './Button.vue'
+import UiIcon from './Icon.vue'
+import UiSelect from './Select.vue'
+import UiTextInput from './TextInput.vue'
+import LinkInternalPicker from '../field/LinkInternalPicker.vue'
+import type { IconName } from '../../utils/icons'
+import { richtextLinkHref, parseRichtextLinkHref } from '../../../../fields/app/utils/richtext-links'
+
+const props = defineProps<{ editor: Editor | undefined; locale?: string; disabled?: boolean }>()
+
+interface Item {
+  name: string
+  label: string
+  icon: IconName
+  run: (e: Editor) => void
+  active?: (e: Editor) => boolean
+  disabled?: (e: Editor) => boolean
+}
+
+const { t } = useT()
+
+const MARKS = computed((): Item[] => [
+  { name: 'bold', label: t('richtext.bold'), icon: 'bold', run: (e) => e.chain().focus().toggleBold().run(), active: (e) => e.isActive('bold') },
+  { name: 'italic', label: t('richtext.italic'), icon: 'italic', run: (e) => e.chain().focus().toggleItalic().run(), active: (e) => e.isActive('italic') },
+  { name: 'underline', label: t('richtext.underline'), icon: 'underline', run: (e) => e.chain().focus().toggleUnderline().run(), active: (e) => e.isActive('underline') },
+  { name: 'strike', label: t('richtext.strikethrough'), icon: 'strikethrough', run: (e) => e.chain().focus().toggleStrike().run(), active: (e) => e.isActive('strike') },
+  { name: 'code', label: t('richtext.inlineCode'), icon: 'code', run: (e) => e.chain().focus().toggleCode().run(), active: (e) => e.isActive('code') },
+  { name: 'highlight', label: t('richtext.highlight'), icon: 'highlighter', run: (e) => e.chain().focus().toggleHighlight().run(), active: (e) => e.isActive('highlight') },
+  { name: 'subscript', label: t('richtext.subscript'), icon: 'subscript', run: (e) => e.chain().focus().toggleSubscript().run(), active: (e) => e.isActive('subscript') },
+  { name: 'superscript', label: t('richtext.superscript'), icon: 'superscript', run: (e) => e.chain().focus().toggleSuperscript().run(), active: (e) => e.isActive('superscript') },
+])
+const BLOCKS = computed((): Item[] => [
+  { name: 'bulletList', label: t('richtext.bulletList'), icon: 'list', run: (e) => e.chain().focus().toggleBulletList().run(), active: (e) => e.isActive('bulletList') },
+  { name: 'orderedList', label: t('richtext.orderedList'), icon: 'list-ordered', run: (e) => e.chain().focus().toggleOrderedList().run(), active: (e) => e.isActive('orderedList') },
+  { name: 'blockquote', label: t('richtext.blockquote'), icon: 'quote', run: (e) => e.chain().focus().toggleBlockquote().run(), active: (e) => e.isActive('blockquote') },
+  { name: 'codeBlock', label: t('richtext.codeBlock'), icon: 'square-code', run: (e) => e.chain().focus().toggleCodeBlock().run(), active: (e) => e.isActive('codeBlock') },
+  { name: 'horizontalRule', label: t('richtext.horizontalRule'), icon: 'minus', run: (e) => e.chain().focus().setHorizontalRule().run() },
+])
+const ALIGN = computed((): Item[] => [
+  { name: 'left', label: t('richtext.alignLeft'), icon: 'align-left', run: (e) => e.chain().focus().setTextAlign('left').run(), active: (e) => e.isActive({ textAlign: 'left' }) },
+  { name: 'center', label: t('richtext.alignCenter'), icon: 'align-center', run: (e) => e.chain().focus().setTextAlign('center').run(), active: (e) => e.isActive({ textAlign: 'center' }) },
+  { name: 'right', label: t('richtext.alignRight'), icon: 'align-right', run: (e) => e.chain().focus().setTextAlign('right').run(), active: (e) => e.isActive({ textAlign: 'right' }) },
+  { name: 'justify', label: t('richtext.justify'), icon: 'align-justify', run: (e) => e.chain().focus().setTextAlign('justify').run(), active: (e) => e.isActive({ textAlign: 'justify' }) },
+])
+const EXTRA = computed((): Item[] => [
+  { name: 'clear', label: t('richtext.clearFormatting'), icon: 'eraser', run: (e) => e.chain().focus().unsetAllMarks().clearNodes().run() },
+  { name: 'undo', label: t('richtext.undo'), icon: 'undo', run: (e) => e.chain().focus().undo().run(), disabled: (e) => !e.can().undo() },
+  { name: 'redo', label: t('richtext.redo'), icon: 'redo', run: (e) => e.chain().focus().redo().run(), disabled: (e) => !e.can().redo() },
+])
+
+const BLOCK_OPTIONS = computed(() => [
+  { label: t('richtext.paragraph'), value: 'p' },
+  { label: t('richtext.heading1'), value: 'h1' }, { label: t('richtext.heading2'), value: 'h2' }, { label: t('richtext.heading3'), value: 'h3' },
+  { label: t('richtext.heading4'), value: 'h4' }, { label: t('richtext.heading5'), value: 'h5' }, { label: t('richtext.heading6'), value: 'h6' },
+])
+
+// Re-render the toolbar on every editor transaction so active/disabled states stay live.
+const tick = ref(0)
+watch(() => props.editor, (editor, _old, onCleanup) => {
+  if (!editor) return
+  const bump = () => { tick.value++ }
+  editor.on('transaction', bump)
+  onCleanup(() => { editor.off('transaction', bump) })
+}, { immediate: true })
+
+const blockValue = computed(() => {
+  void tick.value
+  const e = props.editor
+  if (!e) return 'p'
+  for (let l = 1; l <= 6; l++) if (e.isActive('heading', { level: l })) return `h${l}`
+  return 'p'
+})
+function onBlock(v: string | null | undefined) {
+  const e = props.editor
+  if (!e || !v) return
+  if (v === 'p') e.chain().focus().setParagraph().run()
+  else e.chain().focus().toggleHeading({ level: Number(v[1]) as 1 | 2 | 3 | 4 | 5 | 6 }).run()
+}
+
+const linkOpen = ref(false)
+const linkUrl = ref('')
+function toggleLink() {
+  const e = props.editor!
+  if (e.isActive('link')) { e.chain().focus().unsetLink().run(); return }
+  linkInternalOpen.value = false
+  linkUrl.value = (e.getAttributes('link').href as string) ?? ''
+  linkOpen.value = true
+}
+function applyLink() {
+  const e = props.editor!
+  const href = linkUrl.value.trim()
+  if (href) e.chain().focus().extendMarkRange('link').setLink({ href }).run()
+  linkOpen.value = false
+  linkUrl.value = ''
+}
+
+// Internal links: pick a record, store it as a `kestrel:<collection>:<id>` marker on a normal link
+// mark (resolved to the real localized path at read time / in the preview).
+const linkInternalOpen = ref(false)
+const pickCollection = ref<string | null>(null)
+const pickRecordId = ref<number | null>(null)
+function toggleInternalLink() {
+  linkOpen.value = false
+  const opening = !linkInternalOpen.value
+  linkInternalOpen.value = opening
+  if (!opening) return
+  // Prefill from the link under the cursor: an existing internal marker re-selects its record (the
+  // picker loads + highlights it); an external/absent link opens the picker blank.
+  const parsed = parseRichtextLinkHref(props.editor!.getAttributes('link').href as string | undefined)
+  pickCollection.value = parsed?.collection ?? null
+  pickRecordId.value = parsed?.id ?? null
+}
+function applyInternalLink() {
+  const e = props.editor!
+  if (pickCollection.value && pickRecordId.value != null) {
+    e.chain().focus().extendMarkRange('link').setLink({ href: richtextLinkHref(pickCollection.value, pickRecordId.value) }).run()
+  }
+  linkInternalOpen.value = false
+  pickCollection.value = null
+  pickRecordId.value = null
+}
+</script>
+
+<template>
+  <div v-if="editor" class="ui-rt-toolbar" :data-rev="tick">
+    <UiSelect
+      class="ui-rt-toolbar__block"
+      :model-value="blockValue"
+      :options="BLOCK_OPTIONS"
+      :aria-label="t('richtext.blockType')"
+      :disabled="disabled"
+      @update:model-value="onBlock"
+    />
+
+    <div class="ui-rt-toolbar__group">
+      <UiButton
+        v-for="item in MARKS" :key="item.name"
+        type="button" size="sm" variant="ghost"
+        :class="{ 'rt-on': item.active!(editor) }"
+        :aria-label="item.label"
+        :aria-pressed="item.active!(editor) ? 'true' : 'false'"
+        :disabled="disabled"
+        @click="item.run(editor)"
+      ><UiIcon :name="item.icon" :size="16" /></UiButton>
+    </div>
+
+    <div class="ui-rt-toolbar__group">
+      <UiButton
+        type="button" size="sm" variant="ghost"
+        :class="{ 'rt-on': editor.isActive('link') }"
+        :aria-label="t('richtext.link')"
+        :aria-pressed="editor.isActive('link') ? 'true' : 'false'"
+        :disabled="disabled"
+        @click="toggleLink"
+      ><UiIcon name="link" :size="16" /></UiButton>
+      <UiButton
+        type="button" size="sm" variant="ghost"
+        :class="{ 'rt-on': linkInternalOpen }"
+        :aria-label="t('richtext.linkInternal')"
+        :aria-pressed="linkInternalOpen ? 'true' : 'false'"
+        :disabled="disabled"
+        @click="toggleInternalLink"
+      ><UiIcon name="link-2" :size="16" /></UiButton>
+    </div>
+
+    <div class="ui-rt-toolbar__group">
+      <UiButton
+        v-for="item in BLOCKS" :key="item.name"
+        type="button" size="sm" variant="ghost"
+        :class="{ 'rt-on': item.active && item.active(editor) }"
+        :aria-label="item.label"
+        :aria-pressed="item.active ? (item.active(editor) ? 'true' : 'false') : undefined"
+        :disabled="disabled"
+        @click="item.run(editor)"
+      ><UiIcon :name="item.icon" :size="16" /></UiButton>
+    </div>
+
+    <div class="ui-rt-toolbar__group">
+      <UiButton
+        v-for="item in ALIGN" :key="item.name"
+        type="button" size="sm" variant="ghost"
+        :class="{ 'rt-on': item.active!(editor) }"
+        :aria-label="item.label"
+        :aria-pressed="item.active!(editor) ? 'true' : 'false'"
+        :disabled="disabled"
+        @click="item.run(editor)"
+      ><UiIcon :name="item.icon" :size="16" /></UiButton>
+    </div>
+
+    <div class="ui-rt-toolbar__group">
+      <UiButton
+        v-for="item in EXTRA" :key="item.name"
+        type="button" size="sm" variant="ghost"
+        :aria-label="item.label"
+        :disabled="disabled || (item.disabled ? item.disabled(editor) : false)"
+        @click="item.run(editor)"
+      ><UiIcon :name="item.icon" :size="16" /></UiButton>
+    </div>
+
+    <div v-if="linkOpen" class="ui-rt-toolbar__link">
+      <UiTextInput v-model="linkUrl" type="url" :placeholder="t('richtext.urlPlaceholder')" :aria-label="t('richtext.linkUrl')" @keydown.enter.prevent="applyLink" />
+      <UiButton type="button" size="sm" variant="primary" @click="applyLink">{{ t('richtext.apply') }}</UiButton>
+    </div>
+
+    <div v-if="linkInternalOpen" class="ui-rt-toolbar__link">
+      <LinkInternalPicker v-model:collection="pickCollection" v-model:record-id="pickRecordId" :locale="locale ?? 'en'" />
+      <UiButton type="button" size="sm" variant="primary" :disabled="pickRecordId == null" @click="applyInternalLink">{{ t('richtext.apply') }}</UiButton>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.ui-rt-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border-bottom: 1px solid var(--color-border);
+
+  &__group {
+    display: inline-flex;
+    gap: var(--space-1);
+  }
+  &__block {
+    width: auto;
+    min-width: 8rem;
+  }
+  &__link {
+    display: flex;
+    gap: var(--space-2);
+    flex-basis: 100%;
+    align-items: center;
+  }
+
+  // Active toggle: a calm neutral fill with the accent carried only by the icon — matching the
+  // calmed active-nav treatment, instead of a solid-indigo button per active mark.
+  &__group .ui-button.rt-on {
+    background: var(--color-active, var(--color-surface-2));
+    color: var(--color-text);
+
+    &:hover:not(:disabled) {
+      background: var(--color-active, var(--color-surface-2));
+    }
+    .ui-icon {
+      color: var(--color-primary);
+    }
+  }
+}
+</style>

package/layers/ui/app/components/ui/Select.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import UiIcon from './Icon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    options: { label: string; value: string }[]
+    placeholder?: string
+    disabled?: boolean
+  }>(),
+  { disabled: false },
+)
+
+const model = defineModel<string | null>()
+</script>
+
+<template>
+  <span class="ui-select">
+    <select v-model="model" :disabled="disabled" class="ui-select__field" v-bind="$attrs">
+      <option v-if="placeholder" value="" disabled>{{ placeholder }}</option>
+      <option v-for="o in options" :key="o.value" :value="o.value">{{ o.label }}</option>
+    </select>
+    <UiIcon name="chevron-down" :size="14" class="ui-select__icon" />
+  </span>
+</template>
+
+<style lang="scss">
+@use '../../assets/scss/mixins' as *;
+
+.ui-select {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+.ui-select__field {
+  @include input-base;
+  width: 100%;
+  appearance: none;
+  // leave room for the overlaid chevron so long values don't run under it
+  padding-right: calc(var(--space-3) + 1.25rem);
+}
+.ui-select__icon {
+  position: absolute;
+  top: 50%;
+  right: var(--space-3);
+  transform: translateY(-50%);
+  pointer-events: none; // clicks fall through to the native select
+  color: var(--color-text-muted);
+}
+</style>