@leavepulse/ui 0.43.4 → 0.45.0

package/src/components/LpRangeCalendar.vue

@@ -0,0 +1,365 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+
+export interface RangeCalendarLabels extends Record<string, string> {
+  previous: string
+  next: string
+}
+
+/** How a range changed: picked by two clicks, or an end reshaped. */
+export type RangeChange = { via: "pick" | "drag" | "keyboard" }
+</script>
+
+<script setup lang="ts">
+/*
+ * Inline range calendar (reka RangeCalendar). Like LpCalendar the model is ISO
+ * strings, here `{ start, end }`, both inclusive. A range is emitted only once
+ * both ends are picked: the half-picked state lives inside the calendar, so a
+ * consumer never sees a range with a missing end.
+ *
+ * Ranges can be pressed out the way text is selected on a phone: drag across
+ * days to pick one, or grab either end of a finished range and drag it, across
+ * rows and into the other month; dragging past the other end flips them. Shift+arrows move the
+ * focused end from the keyboard. A reshape emits with `{ via: "drag" }` (or
+ * "keyboard"), so a popover around the calendar can stay open while the user
+ * fine-tunes instead of closing on the first nudge.
+ */
+import { type DateValue, getLocalTimeZone, today } from "@internationalized/date"
+import {
+  type DateRange as RekaRange,
+  RangeCalendarCell,
+  RangeCalendarCellTrigger,
+  RangeCalendarGrid,
+  RangeCalendarGridBody,
+  RangeCalendarGridHead,
+  RangeCalendarGridRow,
+  RangeCalendarHeadCell,
+  RangeCalendarHeader,
+  RangeCalendarHeading,
+  RangeCalendarNext,
+  RangeCalendarPrev,
+  RangeCalendarRoot,
+} from "reka-ui"
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue"
+import { useLabels } from "../composables/useLpConfig"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { type DateRange, normalizeRange, parseIsoDay, reshapeRange } from "./dateRange"
+import LpIcon from "./LpIcon.vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** Selected range, ISO "YYYY-MM-DD" ends (v-model). */
+    modelValue?: DateRange
+    min?: string
+    max?: string
+    /** Days that cannot be picked at all. */
+    isDisabled?: (iso: string) => boolean
+    /** Days a range may not include (struck through, and a range cannot span them). */
+    isDateUnavailable?: (iso: string) => boolean
+    /** Months shown side by side. */
+    months?: number
+    /** Longest allowed range, in days. */
+    maximumDays?: number
+    locale?: string
+    weekdayFormat?: "narrow" | "short" | "long"
+    labels?: Partial<RangeCalendarLabels>
+  }>(),
+  { months: 1, weekdayFormat: "short" },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: DateRange, change: RangeChange): void
+}>()
+
+const text = useLabels<RangeCalendarLabels>(
+  "rangeCalendar",
+  { previous: "Previous month", next: "Next month" },
+  () => props.labels,
+)
+
+function toReka(range: DateRange | undefined): RekaRange {
+  const r = normalizeRange(range)
+  return { start: parseIsoDay(r?.start), end: parseIsoDay(r?.end) }
+}
+
+const draft = shallowRef<RekaRange>(toReka(props.modelValue))
+watch(
+  () => [props.modelValue?.start, props.modelValue?.end],
+  () => {
+    draft.value = toReka(props.modelValue)
+  },
+)
+
+const placeholder = shallowRef<DateValue>(draft.value.start ?? today(getLocalTimeZone()))
+
+function onUpdate(v: RekaRange | null) {
+  draft.value = v ?? { start: undefined, end: undefined }
+  if (v?.start && v.end) emit("update:modelValue", { start: v.start.toString(), end: v.end.toString() }, { via: "pick" })
+}
+
+const committed = computed(() => normalizeRange(props.modelValue))
+
+/** Whether a day may sit inside a reshaped range. */
+function allowed(iso: string): boolean {
+  const day = parseIsoDay(iso)
+  if (!day) return false
+  if (minValue.value && day.compare(minValue.value) < 0) return false
+  if (maxValue.value && day.compare(maxValue.value) > 0) return false
+  return !(props.isDisabled?.(iso) ?? false)
+}
+
+function reshape(anchor: string, moving: string): DateRange | null {
+  return reshapeRange(anchor, moving, {
+    allowed,
+    unavailable: props.isDateUnavailable,
+    maximumDays: props.maximumDays,
+  })
+}
+
+const root = ref<HTMLElement | null>(null)
+
+/*
+ * Press-and-drag, the way a phone selects text. A press on either end of the
+ * range drags that end; a press anywhere else starts a new range that follows
+ * the pointer. A mouse or pen drags at once. A finger has to hold still for
+ * HOLD_MS first, so an ordinary swipe still scrolls the page; after that the
+ * page stops scrolling and the finger selects. A press that never moves stays
+ * an ordinary click for reka.
+ */
+const HOLD_MS = 320
+const SLOP_PX = 8
+
+/** The day the range pivots around while the pointer moves. */
+let anchor: string | null = null
+let pointerId = -1
+let armed = false
+let held = false
+let dragged = false
+let swallowClick = false
+let lastDay = ""
+let startX = 0
+let startY = 0
+let holdTimer: ReturnType<typeof setTimeout> | undefined
+const dragging = ref(false)
+
+function cellAt(x: number, y: number): HTMLElement | null {
+  const hit = document.elementFromPoint(x, y)
+  const cell = hit?.closest<HTMLElement>("[data-reka-calendar-cell-trigger]")
+  if (!cell || !root.value?.contains(cell)) return null
+  if (cell.hasAttribute("data-outside-view") || cell.hasAttribute("data-disabled")) return null
+  return cell
+}
+
+function reset() {
+  if (holdTimer) clearTimeout(holdTimer)
+  holdTimer = undefined
+  anchor = null
+  armed = false
+  held = false
+  dragged = false
+  dragging.value = false
+}
+
+function onPointerDown(e: PointerEvent) {
+  if (e.button !== 0) return
+  const cell = (e.target as Element | null)?.closest<HTMLElement>("[data-reka-calendar-cell-trigger]")
+  const day = cell?.dataset.value
+  if (!cell || !day || cell.hasAttribute("data-disabled") || cell.hasAttribute("data-unavailable")) return
+  reset()
+  const range = committed.value
+  const onEdge = !!range && (day === range.start || day === range.end)
+  anchor = onEdge && range ? (day === range.start ? range.end : range.start) : day
+  pointerId = e.pointerId
+  lastDay = day
+  startX = e.clientX
+  startY = e.clientY
+  // A finger on an end drags at once: the end cells don't pan the page
+  // (touch-none), so there is no swipe to tell it apart from.
+  if (e.pointerType !== "touch" || onEdge) {
+    armed = true
+    return
+  }
+  holdTimer = setTimeout(() => {
+    holdTimer = undefined
+    armed = true
+    held = true
+    dragging.value = true
+    draft.value = toReka({ start: day, end: day })
+    navigator.vibrate?.(8)
+  }, HOLD_MS)
+}
+
+function onPointerMove(e: PointerEvent) {
+  if (anchor === null || e.pointerId !== pointerId) return
+  if (!armed) {
+    // Moved before the hold landed: that is a scroll, not a selection.
+    if (Math.hypot(e.clientX - startX, e.clientY - startY) > SLOP_PX) reset()
+    return
+  }
+  const day = cellAt(e.clientX, e.clientY)?.dataset.value
+  if (!day || day === lastDay) return
+  const next = reshape(anchor, day)
+  if (!next) return
+  lastDay = day
+  if (!dragged) {
+    dragged = true
+    dragging.value = true
+    // Capture keeps the drag alive past the grid's edge. A pointer the browser
+    // no longer tracks cannot be captured, and the drag works without it.
+    try {
+      root.value?.setPointerCapture(e.pointerId)
+    } catch {}
+  }
+  draft.value = toReka(next)
+}
+
+function onPointerUp(e: PointerEvent) {
+  if (anchor === null || e.pointerId !== pointerId) return
+  const finished = dragged || held
+  if (root.value?.hasPointerCapture(e.pointerId)) root.value.releasePointerCapture(e.pointerId)
+  reset()
+  if (!finished || e.type === "pointercancel") {
+    if (finished) draft.value = toReka(props.modelValue)
+    return
+  }
+  // The click that follows would read as "start a new range"; it is swallowed.
+  swallowClick = true
+  setTimeout(() => (swallowClick = false), 0)
+  const { start, end } = draft.value
+  if (start && end) emit("update:modelValue", { start: start.toString(), end: end.toString() }, { via: "drag" })
+}
+
+function onClickCapture(e: MouseEvent) {
+  if (!swallowClick) return
+  swallowClick = false
+  e.stopPropagation()
+  e.preventDefault()
+}
+
+// Once a hold has turned a finger into a selection, the page must not scroll
+// under it. Only a non-passive touchmove can say so mid-gesture.
+function onTouchMove(e: TouchEvent) {
+  if (armed && anchor !== null) e.preventDefault()
+}
+function onContextMenu(e: Event) {
+  if (held || dragging.value) e.preventDefault()
+}
+onMounted(() => root.value?.addEventListener("touchmove", onTouchMove, { passive: false }))
+onBeforeUnmount(() => {
+  root.value?.removeEventListener("touchmove", onTouchMove)
+  reset()
+})
+
+const STEP: Record<string, number> = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }
+
+function onKeydownCapture(e: KeyboardEvent) {
+  const step = STEP[e.key]
+  const range = committed.value
+  if (!e.shiftKey || step === undefined || !range) return
+  const day = (e.target as HTMLElement | null)?.dataset?.value
+  if (!day || (day !== range.start && day !== range.end)) return
+  const moved = parseIsoDay(day)?.add({ days: step }).toString()
+  if (!moved) return
+  e.preventDefault()
+  e.stopPropagation()
+  const other = day === range.start ? range.end : range.start
+  const next = reshape(other, moved)
+  if (!next) return
+  placeholder.value = parseIsoDay(moved) ?? placeholder.value
+  emit("update:modelValue", next, { via: "keyboard" })
+  void nextTick(() => root.value?.querySelector<HTMLElement>(`[data-value="${moved}"]:not([data-outside-view])`)?.focus())
+}
+
+const minValue = computed(() => parseIsoDay(props.min))
+const maxValue = computed(() => parseIsoDay(props.max))
+const disabledFor = (date: DateValue) => props.isDisabled?.(date.toString()) ?? false
+const unavailableFor = (date: DateValue) => props.isDateUnavailable?.(date.toString()) ?? false
+
+const navBtn =
+  "flex size-8 items-center justify-center rounded-control text-muted outline-none transition-[color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:bg-surface-soft hover:text-ink active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring"
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "inline-block rounded-card border border-line bg-surface-raised p-3",
+)
+</script>
+
+<template>
+  <RangeCalendarRoot
+    v-slot="{ weekDays, grid }"
+    :ref="(c) => (root = (c as { $el?: HTMLElement } | null)?.$el ?? null)"
+    v-model:placeholder="placeholder"
+    :model-value="draft"
+    :min-value="minValue"
+    :max-value="maxValue"
+    :is-date-disabled="disabledFor"
+    :is-date-unavailable="unavailableFor"
+    :number-of-months="months"
+    :maximum-days="maximumDays"
+    :locale="locale"
+    :weekday-format="weekdayFormat"
+    prevent-deselect
+    paged-navigation
+    fixed-weeks
+    :class="rootClass"
+    v-bind="rest"
+    :data-dragging="dragging || undefined"
+    @update:model-value="onUpdate"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+    @click.capture="onClickCapture"
+    @contextmenu="onContextMenu"
+    @keydown.capture="onKeydownCapture"
+  >
+    <RangeCalendarHeader class="mb-2 flex items-center justify-between gap-2">
+      <RangeCalendarPrev :class="navBtn" :aria-label="text.previous">
+        <LpIcon name="lucide:chevron-left" :size="16" />
+      </RangeCalendarPrev>
+      <RangeCalendarHeading class="text-sm font-semibold text-ink" />
+      <RangeCalendarNext :class="navBtn" :aria-label="text.next">
+        <LpIcon name="lucide:chevron-right" :size="16" />
+      </RangeCalendarNext>
+    </RangeCalendarHeader>
+
+    <div class="flex gap-4">
+      <RangeCalendarGrid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        class="border-collapse select-none"
+      >
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow class="mb-1 flex">
+            <RangeCalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              class="w-9 text-center text-[11px] font-medium text-muted"
+            >
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody>
+          <RangeCalendarGridRow v-for="(weekDates, i) in month.rows" :key="`w-${i}`" class="flex">
+            <RangeCalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              class="py-0.5"
+            >
+              <!-- Inside the range the pill joins its neighbours (no gap, no
+                   rounding); the two ends keep the solid brand pill. The
+                   preview while picking is lighter: with maximumDays reka
+                   highlights the whole reachable window, not the range. -->
+              <RangeCalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+                class="flex h-8 w-9 items-center justify-center rounded-control text-sm text-ink outline-none transition-[color,background-color] duration-[var(--duration-fast)] hover:bg-surface-soft focus-visible:ring-2 focus-visible:ring-ring data-[outside-view]:text-muted/40 data-[today]:font-semibold data-[today]:not-data-[selected]:text-brand data-[selected]:rounded-none data-[selected]:bg-brand-soft data-[highlighted]:rounded-none data-[highlighted]:bg-brand-soft/60 data-[selection-start]:rounded-l-control data-[highlighted-start]:rounded-l-control data-[selection-end]:rounded-r-control data-[highlighted-end]:rounded-r-control data-[selection-start]:bg-brand data-[selection-start]:font-semibold data-[selection-start]:text-ink-inverse data-[selection-end]:bg-brand data-[selection-end]:font-semibold data-[selection-end]:text-ink-inverse data-[outside-view]:data-[selected]:bg-transparent data-[outside-view]:data-[highlighted]:bg-transparent data-[disabled]:pointer-events-none data-[disabled]:opacity-35 data-[unavailable]:pointer-events-none data-[unavailable]:line-through data-[unavailable]:opacity-35 data-[selection-start]:cursor-grab data-[selection-end]:cursor-grab data-[selection-start]:touch-none data-[selection-end]:touch-none [-webkit-touch-callout:none] in-data-[dragging]:cursor-grabbing"
+              />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
+</template>

package/src/components/LpRollingText.vue

@@ -86,6 +86,9 @@ const style = computed(() => ({
 
 .lp-roll__item {
   display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
   backface-visibility: hidden;
 }

package/src/components/LpScrollArea.vue

@@ -55,6 +55,21 @@ const viewportEl = computed<HTMLElement | null>(
 )
 defineExpose({ viewportEl })
 
+/*
+ * The viewport is focusable so the keyboard can scroll it, and Chrome marks it
+ * :focus-visible as soon as any key is pressed after a click inside, so the
+ * browser's white outline framed the whole page on the first shortcut. The
+ * ring is kept for focus that arrived by Tab and dropped for focus a pointer
+ * put there.
+ */
+const pointerFocus = ref(false)
+function onViewportPointerDown() {
+  pointerFocus.value = true
+}
+function onViewportBlur() {
+  pointerFocus.value = false
+}
+
 // `opacity-0` + the hidden-state fade is what keeps the bar invisible at rest:
 // with force-mount the element stays in the DOM, so a one-shot fade-out alone
 // would snap back to visible once the animation finished.
@@ -241,10 +256,15 @@ function onThumbPointerDown() {
 
     <ScrollAreaViewport
       ref="viewportRef"
-      class="w-full min-h-0 min-w-0 flex-1 [&>div]:!block [&>div]:!min-w-0"
-      :class="instant ? '' : 'scroll-smooth motion-reduce:scroll-auto'"
+      class="w-full min-h-0 min-w-0 flex-1 rounded-[inherit] outline-none [&>div]:!block [&>div]:!min-w-0"
+      :class="[
+        instant ? '' : 'scroll-smooth motion-reduce:scroll-auto',
+        pointerFocus ? '' : 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
+      ]"
       :style="fade ? { maskImage: fadeMask, WebkitMaskImage: fadeMask } : undefined"
       @scroll.passive="onViewportScroll"
+      @pointerdown="onViewportPointerDown"
+      @focusout="(e: FocusEvent) => e.target === e.currentTarget && onViewportBlur()"
     >
       <div :class="contentClass">
         <slot />

package/src/components/LpSegmented.vue

@@ -16,6 +16,7 @@ export default { inheritAttrs: false }
 import { Motion } from "motion-v"
 import { ToggleGroupItem, ToggleGroupRoot } from "reka-ui"
 import { useId } from "vue"
+import { useFieldControl } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { usePillTransition } from "../composables/usePillTransition"
 import LpIcon from "./LpIcon.vue"
@@ -25,6 +26,11 @@ export interface SegmentedOption {
   label?: string
   /** Optional iconify name shown before the label (or alone, icon-only). */
   icon?: string
+  /**
+   * Accessible name for an icon-only segment. Without it the raw `value` is
+   * announced, which is an identifier rather than words.
+   */
+  ariaLabel?: string
 }
 
 const props = withDefaults(
@@ -66,6 +72,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
   ].join(" "),
 )
 
+const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
+
 const pillId = `lp-segmented-${useId()}`
 const pillTransition = usePillTransition()
 </script>
@@ -74,7 +82,9 @@ const pillTransition = usePillTransition()
   <ToggleGroupRoot
     :model-value="modelValue"
     type="single"
-    :disabled="disabled"
+    :disabled="field.disabled"
+    :aria-labelledby="field.labelId"
+    :aria-describedby="field.describedBy"
     :rovingFocus="true"
     :class="rootClass"
     v-bind="rest"
@@ -84,7 +94,7 @@ const pillTransition = usePillTransition()
       v-for="opt in options"
       :key="opt.value"
       :value="opt.value"
-      :aria-label="opt.label ? undefined : opt.value"
+      :aria-label="opt.ariaLabel ?? (opt.label ? undefined : opt.value)"
       class="relative inline-flex h-full items-center justify-center gap-1.5 rounded-md px-3 font-medium outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] focus-visible:ring-2 focus-visible:ring-ring data-[state=on]:text-ink data-[state=off]:text-muted data-[state=off]:hover:text-ink disabled:cursor-not-allowed disabled:opacity-55"
       :class="block ? 'flex-1' : ''"
     >

package/src/components/LpShortcutsDialog.vue

@@ -10,7 +10,10 @@
  * of the same title merge, and a combo is listed once.
  *
  * Combos are written the way they read ("Ctrl+Shift+M", "Ctrl++", "←→↑↓") and
- * split on "+" into one <kbd> each.
+ * split on "+" into one <kbd> each; spaces separate the steps of a sequence
+ * ("G I" reads "G then I"). In `live` mode an entry whose keys another mounted
+ * binding also answers carries a marker, so a clash shows up where people
+ * look for keys rather than only in the console.
  */
 import { computed } from "vue"
 import LpModal from "./LpModal.vue"
@@ -18,8 +21,11 @@ import {
   activeShortcuts,
   appleModifierLabel,
   mergeShortcutGroups,
+  useAppleKeyboard,
+  useHotkeys,
   type ShortcutGroup,
 } from "../composables/useHotkeys"
+import { useLabels } from "../composables/useLpConfig"
 
 const props = withDefaults(
   defineProps<{
@@ -31,21 +37,54 @@ const props = withDefaults(
     description?: string
     /** Frosted glass panel, passed to LpModal. Follows `provideGlass` when unset. */
     glass?: boolean
+    /**
+     * A key that toggles the reference, e.g. "F1". Bound only while the dialog
+     * is mounted, also inside inputs and over other overlays, and the browser's
+     * own use of the key (Chrome opens its help page on F1) is suppressed.
+     */
+    hotkey?: string
   }>(),
-  { open: false, groups: () => [], live: false, title: "Keyboard shortcuts", glass: undefined },
+  { open: false, groups: () => [], live: false, title: undefined, glass: undefined },
 )
 
+const text = useLabels("shortcuts", {
+  title: "Keyboard shortcuts",
+  then: "then",
+  conflict: "Also bound elsewhere: only one of them runs",
+  group: "General",
+})
+const apple = useAppleKeyboard()
+
 /*
  * One key per "+", except a "+" that is the key itself: "Ctrl++" is Ctrl and
  * plus, not Ctrl and two blanks.
  */
-function keysOf(combo: string): string[] {
-  return combo.split(/\+(?!$)/)
+function keysOf(chord: string): string[] {
+  return chord.split(/\+(?!$)/)
+}
+
+function stepsOf(combo: string): string[] {
+  return combo.trim().split(/\s+/)
 }
 
 const shown = computed(() => (props.live ? mergeShortcutGroups(props.groups, activeShortcuts.value) : props.groups))
 
 const emit = defineEmits<{ (e: "update:open", value: boolean): void }>()
+
+useHotkeys(() =>
+  props.hotkey
+    ? [
+        {
+          key: props.hotkey,
+          allowInInput: true,
+          overLayers: true,
+          repeat: false,
+          help: { group: text.value.group, label: props.title ?? text.value.title },
+          handler: () => emit("update:open", !props.open),
+        },
+      ]
+    : [],
+)
 </script>
 
 <template>
@@ -53,7 +92,7 @@ const emit = defineEmits<{ (e: "update:open", value: boolean): void }>()
     :glass="props.glass"
     :open="props.open"
     size="lg"
-    :title="props.title"
+    :title="props.title ?? text.title"
     :description="props.description"
     @update:open="(value: boolean) => emit('update:open', value)"
   >
@@ -62,11 +101,23 @@ const emit = defineEmits<{ (e: "update:open", value: boolean): void }>()
         <h3>{{ group.title }}</h3>
         <dl>
           <div v-for="entry in group.entries" :key="entry.combo" class="shortcut-row">
-            <dt>{{ entry.label }}</dt>
+            <dt>
+              {{ entry.label }}
+              <span
+                v-if="entry.conflict"
+                class="shortcut-conflict"
+                role="img"
+                :aria-label="text.conflict"
+                :title="text.conflict"
+              >!</span>
+            </dt>
             <dd>
-              <kbd v-for="(key, index) in keysOf(entry.combo)" :key="`${key}-${index}`">
-                {{ appleModifierLabel(key.trim()) }}
-              </kbd>
+              <template v-for="(step, stepIndex) in stepsOf(entry.combo)" :key="`${step}-${stepIndex}`">
+                <span v-if="stepIndex" class="shortcut-then">{{ text.then }}</span>
+                <kbd v-for="(key, index) in keysOf(step)" :key="`${key}-${index}`">
+                  {{ appleModifierLabel(key.trim(), apple) }}
+                </kbd>
+              </template>
             </dd>
           </div>
         </dl>
@@ -114,6 +165,29 @@ const emit = defineEmits<{ (e: "update:open", value: boolean): void }>()
   min-width: 0;
 }
 
+.shortcut-conflict {
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  margin-left: 6px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--color-danger-soft);
+  color: var(--color-danger);
+  font-size: 0.6rem;
+  font-weight: 700;
+  vertical-align: middle;
+  cursor: help;
+}
+
+.shortcut-then {
+  align-self: center;
+  padding: 0 2px;
+  color: var(--color-muted);
+  font-size: 0.68rem;
+}
+
 .shortcut-row dd {
   display: flex;
   flex-shrink: 0;