frappe-ui 1.0.0-beta.62 → 1.0.0-beta.64

package/experimental/CodeEditor/CodeEditor.api.md

@@ -41,7 +41,7 @@
   },
   {
     name: 'size',
-    description: 'Size token, mirroring frappe-ui inputs. Scales the editor\'s font size and\nminimum height (`sm | md | lg | xl`). Defaults to `md`.',
+    description: 'Size token, mirroring frappe-ui inputs. Scales the editor\'s font size and\nminimum height (`xs | sm | md | lg`). Defaults to `md`.',
     required: false,
     type: 'InputSize',
     default: '"md"'

package/experimental/CodeEditor/CodeEditor.md

@@ -40,7 +40,7 @@ and loses the affordance that it's an editable field.
 
 ## Sizes
 
-`size` mirrors the frappe-ui input sizes (`sm | md | lg | xl`, default `md`),
+`size` mirrors the frappe-ui input sizes (`xs | sm | md | lg`, default `md`),
 scaling the editor's font size and minimum height.
 
 <ComponentPreview name="CodeEditor-Sizes" />

package/experimental/CodeEditor/CodeEditor.playground.vue

@@ -43,10 +43,10 @@ const knobs: Knob[] = [
     type: 'tabs',
     default: 'md',
     options: [
+      { label: 'xs', value: 'xs' },
       { label: 'sm', value: 'sm' },
       { label: 'md', value: 'md' },
       { label: 'lg', value: 'lg' },
-      { label: 'xl', value: 'xl' },
     ],
   },
   { name: 'placeholder', type: 'text', default: '', width: '12rem' },

package/experimental/CodeEditor/CodeEditor.vue

@@ -288,17 +288,17 @@ function buildVariant(v?: string, disabled?: boolean): Extension {
   return cmView.EditorView.theme(fragments[v ?? 'subtle'] ?? fragments.subtle)
 }
 
-// Per-size font scale + content min-height, mirroring frappe-ui's `sm|md|lg|xl`
+// Per-size font scale + content min-height, mirroring frappe-ui's `xs|sm|md|lg`
 // input sizes. This compartment is the SOLE source of `&` font size and
 // `.cm-content` min-height — the base `theme` deliberately omits both so there's
 // no equal-specificity fight whose winner depends on StyleModule order.
 function buildSize(s?: string): Extension {
   if (!cmView) return []
   const sizes: Record<string, { fontSize: string; minHeight: string }> = {
+    xs: { fontSize: '11px', minHeight: '2.5rem' },
     sm: { fontSize: '12px', minHeight: '3.5rem' },
     md: { fontSize: '13px', minHeight: '4.5rem' },
     lg: { fontSize: '14px', minHeight: '6rem' },
-    xl: { fontSize: '16px', minHeight: '7.5rem' },
   }
   const cfg = sizes[s ?? 'md'] ?? sizes.md
   return cmView.EditorView.theme({

package/experimental/CodeEditor/stories/Sizes.vue

@@ -7,9 +7,9 @@ const code = ref(`const sum = (a, b) => a + b`)
 
 <template>
   <div class="w-full max-w-xl space-y-4">
+    <CodeEditor v-model="code" language="javascript" size="xs" />
     <CodeEditor v-model="code" language="javascript" size="sm" />
     <CodeEditor v-model="code" language="javascript" size="md" />
     <CodeEditor v-model="code" language="javascript" size="lg" />
-    <CodeEditor v-model="code" language="javascript" size="xl" />
   </div>
 </template>

package/experimental/CodeEditor/types.ts

@@ -42,7 +42,7 @@ export interface CodeEditorProps extends InputLabelingProps {
   variant?: Exclude<InputVariant, 'ghost'>
   /**
    * Size token, mirroring frappe-ui inputs. Scales the editor's font size and
-   * minimum height (`sm | md | lg | xl`). Defaults to `md`.
+   * minimum height (`xs | sm | md | lg`). Defaults to `md`.
    */
   size?: InputSize
 }

package/experimental/MultiEmailInput/MultiEmailInput.cy.ts

@@ -17,6 +17,7 @@ function host(
     required?: boolean
     error?: string
     disabled?: boolean
+    size?: 'xs' | 'sm' | 'md' | 'lg'
   } = {},
 ) {
   return defineComponent({
@@ -46,6 +47,7 @@ function host(
           required: options.required,
           error: options.error,
           disabled: options.disabled,
+          size: options.size,
           placeholder: 'Add email…',
         }),
       ]
@@ -152,4 +154,29 @@ describe('MultiEmailInput', () => {
     cy.mount(host({ disabled: true }))
     cy.get('[data-slot="input"]').should('have.attr', 'disabled')
   })
+
+  // The option-row avatar has to shrink with the row. `md` (24px) is the whole
+  // height of an `xs` row before its padding, so a size-invariant avatar makes
+  // the smallest control draw the biggest picture.
+  const rowAvatarHeights: Array<[size: 'xs' | 'sm' | 'md' | 'lg', px: number]> =
+    [
+      ['xs', 16],
+      ['sm', 20],
+      ['md', 24],
+      ['lg', 24],
+    ]
+
+  for (const [size, px] of rowAvatarHeights) {
+    it(`draws a ${px}px option-row avatar at size="${size}"`, () => {
+      cy.mount(host({ size }))
+      cy.get('[data-slot="input"]').click()
+      cy.get('[data-slot="item"]')
+        .first()
+        .find('[data-slot="item-prefix"] > div')
+        .first()
+        .then(($avatar) => {
+          expect($avatar[0].getBoundingClientRect().height).to.equal(px)
+        })
+    })
+  }
 })

package/experimental/MultiEmailInput/MultiEmailInput.vue

@@ -166,7 +166,15 @@ const showEmpty = computed(
   () => !props.loading && !suggestions.value.length && !showCreateOption.value,
 )
 
-const rowAvatarSize = computed(() => (props.size === 'sm' ? 'sm' : 'md'))
+// Avatar has its own scale (`xs` 16px, `sm` 20px, `md` 24px), and the option
+// row is `min-h-6`/`min-h-7`/`min-h-8`/`min-h-10` plus `ItemListRow`'s own
+// padding. Step the avatar down with the row for the two small sizes rather
+// than forwarding a size the row cannot draw — a `md` avatar is 24px, the
+// whole height of an `xs` row before its `py-1`. `md` and `lg` rows both fit
+// `md`; a 28px `lg` avatar would leave no room in a 32px `md` row.
+const rowAvatarSize = computed(() =>
+  props.size === 'xs' ? 'xs' : props.size === 'sm' ? 'sm' : 'md',
+)
 
 const boxClasses = computed(() => [
   'flex flex-wrap items-center gap-1.5 rounded-4 bg-surface-gray-2 px-1.5 py-1 transition-colors focus-within:ring-2 focus-within:ring-outline-gray-3',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.62",
+  "version": "1.0.0-beta.64",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"

package/src/charts/areaChartOptions.test.ts

@@ -9,7 +9,7 @@ import type { AxisChartConfig } from './types'
 
 const tokens: ChartTokens = {
   categorical: ['#111111', '#222222', '#333333'],
-  sequential: ['#000011', '#000022', '#000033', '#000044', '#000055'],
+  sequential: ['#000011', '#000022', '#000033'],
   diverging: ['#001100', '#002200', '#003300'],
   axisLabel: 'ink-5',
   axisTitle: 'ink-7',
@@ -169,9 +169,8 @@ describe('area chart option', () => {
       build({
         fillOpacity: 0.5,
         series: [{ name: 'sales', fillOpacity: 0.25 }],
-        // A lone series takes the ramp's mid stop, hence the shifted blue.
       }).series[0].areaStyle.color.colorStops[0].color,
-    ).toBe('rgba(0, 0, 34, 0.25)')
+    ).toBe('rgba(0, 0, 17, 0.25)')
   })
 
   it('falls back to a flat fill for a color it cannot add alpha to', () => {

package/src/charts/barChartOptions.test.ts

@@ -7,8 +7,8 @@ import type { AxisChartConfig, AxisChartSeriesConfig } from './types'
 
 const tokens: ChartTokens = {
   categorical: ['#111111', '#222222', '#333333'],
-  // Five stops so the sequential pale-tail trim and even spacing are visible.
-  sequential: ['#000011', '#000022', '#000033', '#000044', '#000055'],
+  // Three stops so even spacing across the ramp is visible.
+  sequential: ['#000011', '#000022', '#000033'],
   diverging: ['#001100', '#002200', '#003300'],
   axisLabel: 'ink-5',
   axisTitle: 'ink-7',
@@ -70,13 +70,13 @@ describe('resolveSeriesColors', () => {
     ).toEqual({ sales: '#000011', refunds: 'red' })
   })
 
-  it('gives a lone sequential series a mid stop, not the darkest', () => {
+  it('gives a lone sequential series the darkest stop', () => {
     expect(colorsFor({ series: [{ name: 'sales' }] })).toEqual({
-      sales: '#000022',
+      sales: '#000011',
     })
   })
 
-  it('spaces sequential series out dark to light, skipping the palest stops', () => {
+  it('spaces sequential series out dark to light', () => {
     expect(Object.values(colorsFor({ series: named(3) }))).toEqual([
       '#000011',
       '#000022',
@@ -84,10 +84,10 @@ describe('resolveSeriesColors', () => {
     ])
   })
 
-  it('cycles the sequential ramp once there are more series than usable stops', () => {
-    const colors = colorsFor({ series: named(6) })
+  it('cycles the sequential ramp once there are more series than stops', () => {
+    const colors = colorsFor({ series: named(4) })
     expect(colors.a).toBe('#000011')
-    expect(colors.f).toBe(colors.a)
+    expect(colors.d).toBe(colors.a)
   })
 
   it('cycles the categorical ramp in series order', () => {

package/src/charts/chartColors.test.ts

@@ -25,9 +25,6 @@ const tokens: ChartTokens = {
   backdrop: '#ffffff',
 }
 
-/** The sequential ramp minus the two palest stops, as every chart reads it. */
-const USABLE_SEQUENTIAL = tokens.sequential.slice(0, 7)
-
 describe('chartColors: precedence', () => {
   it("draws in the caller's own colors when they passed a list", () => {
     expect(
@@ -56,7 +53,7 @@ describe('chartColors: precedence', () => {
     ).toEqual(tokens.categorical.slice(0, 2))
     expect(
       chartColors([], tokens, { fallback: 'sequential', count: 'ramp' }),
-    ).toEqual(USABLE_SEQUENTIAL)
+    ).toEqual(tokens.sequential)
   })
 })
 
@@ -90,6 +87,38 @@ describe('chartColors: one color per thing drawn', () => {
   })
 })
 
+describe('chartColors: how a sequential ramp is spent', () => {
+  const stops = (count: number) =>
+    chartColors('sequential', tokens, { fallback: 'sequential', count }).map(
+      (color) => tokens.sequential.indexOf(color) + 1,
+    )
+
+  it('gives a lone series the deep end', () => {
+    expect(stops(1)).toEqual([1])
+  })
+
+  it('keeps a small chart a prefix of the next size up', () => {
+    expect(stops(2)).toEqual([1, 4])
+    expect(stops(3)).toEqual([1, 4, 7])
+  })
+
+  it('stays inside the first seven stops up to seven series', () => {
+    expect(stops(4)).toEqual([1, 3, 5, 7])
+    expect(stops(5)).toEqual([1, 3, 4, 6, 7])
+    expect(stops(6)).toEqual([1, 2, 3, 5, 6, 7])
+    expect(stops(7)).toEqual([1, 2, 3, 4, 5, 6, 7])
+  })
+
+  it('reaches the pale stops only once the series outnumber the span', () => {
+    expect(stops(8)).toEqual([1, 2, 3, 4, 5, 6, 7, 8])
+    expect(stops(9)).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9])
+  })
+
+  it('cycles once there are more series than stops', () => {
+    expect(stops(10)).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 1])
+  })
+})
+
 describe('chartColors: the ramp itself', () => {
   it('gives the stops rather than a slot each', () => {
     expect(
@@ -97,16 +126,7 @@ describe('chartColors: the ramp itself', () => {
         fallback: 'sequential',
         count: 'ramp',
       }),
-    ).toEqual(USABLE_SEQUENTIAL)
-  })
-
-  it('trims the sequential stops that vanish against a card', () => {
-    const ramp = chartColors(undefined, tokens, {
-      fallback: 'sequential',
-      count: 'ramp',
-    })
-    expect(ramp).not.toContain('#f5f5f5')
-    expect(ramp).not.toContain('#e0e0e0')
+    ).toEqual(tokens.sequential)
   })
 
   it('takes a diverging ramp end to end', () => {
@@ -151,7 +171,7 @@ describe('chartColors: which end of the ramp leads', () => {
         count: 'ramp',
         deepEnd: 'last',
       }),
-    ).toEqual([...USABLE_SEQUENTIAL].reverse())
+    ).toEqual([...tokens.sequential].reverse())
   })
 
   it('leaves a categorical set alone, having no order to reverse', () => {

package/src/charts/comboChartOptions.test.ts

@@ -9,7 +9,7 @@ import type { AxisChartConfig, ChartMark } from './types'
 
 const tokens: ChartTokens = {
   categorical: ['#111111', '#222222', '#333333'],
-  sequential: ['#000011', '#000022', '#000033', '#000044', '#000055'],
+  sequential: ['#000011', '#000022', '#000033'],
   diverging: ['#001100', '#002200', '#003300'],
   axisLabel: 'ink-5',
   axisTitle: 'ink-7',

package/src/charts/donutChartOptions.test.ts

@@ -6,7 +6,7 @@ import type { DonutChartConfig } from './types'
 
 const tokens: ChartTokens = {
   categorical: ['#111111', '#222222', '#333333'],
-  sequential: ['#000011', '#000022', '#000033', '#000044', '#000055'],
+  sequential: ['#000011', '#000022', '#000033'],
   diverging: ['#001100', '#002200', '#003300'],
   axisLabel: 'ink-5',
   axisTitle: 'ink-7',

package/src/charts/heatmapOptions.test.ts

@@ -203,18 +203,10 @@ describe('buildHeatmapMatrix', () => {
 })
 
 describe('heatmapRampStops', () => {
-  it('reverses the sequential ramp and trims its palest stops', () => {
-    const stops = heatmapRampStops(config(), tokens)
-
-    expect(stops).toEqual([
-      '#cccccc',
-      '#aaaaaa',
-      '#8a8a8a',
-      '#5a5a5a',
-      '#3a3a3a',
-      '#1a1a1a',
-      '#0a0a0a',
-    ])
+  it('reverses the sequential ramp, palest first', () => {
+    expect(heatmapRampStops(config(), tokens)).toEqual(
+      [...tokens.sequential].reverse(),
+    )
   })
 
   it('takes the diverging ramp as authored, cool end first', () => {
@@ -347,7 +339,9 @@ describe('buildHeatmapOption', () => {
       const resting = cells[index].color
       const hovered = item.emphasis.itemStyle.color
       expect(hovered).toBe(hoverCellColor(resting))
-      expect(hexToOklch(hovered).l).toBeGreaterThan(hexToOklch(resting).l)
+      expect(hexToOklch(hovered).l).toBeGreaterThanOrEqual(
+        hexToOklch(resting).l,
+      )
     })
   })
 })

package/src/charts/lineChartOptions.test.ts

@@ -5,7 +5,7 @@ import type { AxisChartConfig } from './types'
 
 const tokens: ChartTokens = {
   categorical: ['#111111', '#222222', '#333333'],
-  sequential: ['#000011', '#000022', '#000033', '#000044', '#000055'],
+  sequential: ['#000011', '#000022', '#000033'],
   diverging: ['#001100', '#002200', '#003300'],
   axisLabel: 'ink-5',
   axisTitle: 'ink-7',

package/src/charts/style.css

@@ -25,7 +25,10 @@
      The red family sits at hue 17. It was authored at 5, a crimson, whose light
      partner lightens into a pink rather than into a warning — so anything
      reading the ramp for a status had to leave it. 17 keeps the family clear of
-     the amber at 75 while its light partner still reads as red. */
+     the amber at 75 while its light partner still reads as red. Its chroma
+     sits at 0.155, under the cap, because the eye weights red above every
+     other hue and at the cap a slice of it reads as an alert. Lower still and
+     it turns brown. */
   --chart-categorical-1: #2283c3;
   --chart-categorical-2: #84c5f9;
   --chart-categorical-3: #289e60;
@@ -34,8 +37,8 @@
   --chart-categorical-6: #bb9df1;
   --chart-categorical-7: #c98c28;
   --chart-categorical-8: #f5ca8e;
-  --chart-categorical-9: #bd2040;
-  --chart-categorical-10: #fc8e94;
+  --chart-categorical-9: #c54b58;
+  --chart-categorical-10: #fca0a4;
 
   --chart-sequential-1: #095895;
   --chart-sequential-2: #2283c3;
@@ -95,8 +98,8 @@
   --chart-categorical-6: #b294e7;
   --chart-categorical-7: #bf8319;
   --chart-categorical-8: #ebc085;
-  --chart-categorical-9: #b20e37;
-  --chart-categorical-10: #f2858b;
+  --chart-categorical-9: #ba4250;
+  --chart-categorical-10: #f2979b;
 
   --chart-sequential-1: #074677;
   --chart-sequential-2: #1b699c;

package/src/charts/tokens.ts

@@ -56,8 +56,8 @@ const LIGHT_CATEGORICAL = [
   '#bb9df1',
   '#c98c28',
   '#f5ca8e',
-  '#bd2040',
-  '#fc8e94',
+  '#c54b58',
+  '#fca0a4',
 ]
 
 const LIGHT_SEQUENTIAL = [
@@ -95,8 +95,8 @@ const DARK_CATEGORICAL = [
   '#b294e7',
   '#bf8319',
   '#ebc085',
-  '#b20e37',
-  '#f2858b',
+  '#ba4250',
+  '#f2979b',
 ]
 
 const DARK_SEQUENTIAL = [
@@ -277,10 +277,6 @@ export function pickSeriesColor(ramp: string[], index: number) {
   return ramp[index % ramp.length]
 }
 
-/** The two palest sequential stops vanish against a white card. */
-const SEQUENTIAL_TAIL_TRIM = 2
-/** A lone series reads best as one confident mid-blue, not the ramp's dark end. */
-const SEQUENTIAL_SOLO_INDEX = 1
 /**
  * Below this relative luminance a fill needs white text on top of it. It is the
  * crossover, not a taste call: white and the near-black inside-label ink
@@ -290,23 +286,57 @@ const SEQUENTIAL_SOLO_INDEX = 1
 const DARK_FILL_LUMINANCE = 0.22
 
 /**
- * `count` evenly spaced stops from a continuous ramp, so a stack reads as one
- * progression rather than n unrelated hues. Cycles instead once there are more
- * series than usable stops, where even spacing would hand out duplicates.
+ * How much of the sequential ramp a chart spends before it must widen. The
+ * last two stops of a nine-stop ramp are pale enough that a series in them is
+ * hard to read against a card, so a chart stays inside the first seven until
+ * it has more series than that.
  */
-function rampStops(ramp: string[], count: number, lastIndex: number): string[] {
-  if (count > lastIndex + 1) {
+const SEQUENTIAL_SPAN = 7
+/**
+ * The most stops apart two neighbouring series sit. Without it two series
+ * take the two ends of the span, and a third then recolors the second. With
+ * it a chart of one, two or three series is a prefix of the next.
+ */
+const SEQUENTIAL_MAX_STEP = 3
+
+/**
+ * `count` stops from the deep end of a sequential ramp: spread evenly over the
+ * first `SEQUENTIAL_SPAN` stops, never more than `SEQUENTIAL_MAX_STEP` apart,
+ * widening past the span only for a chart with more series than it holds.
+ * Cycles once there are more series than stops.
+ */
+function sequentialStops(ramp: string[], count: number): string[] {
+  if (count === 1) return [ramp[0]]
+  if (count > ramp.length) {
     return Array.from({ length: count }, (_, i) => pickSeriesColor(ramp, i))
   }
+  const lastIndex = Math.min(Math.max(SEQUENTIAL_SPAN, count), ramp.length) - 1
   return Array.from(
     { length: count },
-    (_, i) => ramp[Math.round((i * lastIndex) / (count - 1))],
+    (_, i) =>
+      ramp[
+        Math.min(
+          Math.round((i * lastIndex) / (count - 1)),
+          i * SEQUENTIAL_MAX_STEP,
+        )
+      ],
   )
 }
 
-/** The sequential ramp without the stops that vanish against a card. */
-function usableSequential(ramp: string[]) {
-  return ramp.slice(0, Math.max(1, ramp.length - SEQUENTIAL_TAIL_TRIM))
+/**
+ * `count` evenly spaced stops across the whole of a diverging ramp, which is
+ * read by its extremes. Cycles once there are more series than stops.
+ */
+function divergingStops(ramp: string[], count: number): string[] {
+  if (count === 1) return [ramp[0]]
+  if (count > ramp.length) {
+    return Array.from({ length: count }, (_, i) => pickSeriesColor(ramp, i))
+  }
+  const lastIndex = ramp.length - 1
+  return Array.from(
+    { length: count },
+    (_, i) => ramp[Math.round((i * lastIndex) / (count - 1))],
+  )
 }
 
 /**
@@ -328,16 +358,9 @@ export function paletteColors(
 
   const ramp = name === 'diverging' ? tokens.diverging : tokens.sequential
   if (!ramp.length) return cycle(tokens.categorical)
-
-  if (count === 1) {
-    if (name === 'diverging') return [ramp[0]]
-    return [ramp[Math.min(SEQUENTIAL_SOLO_INDEX, ramp.length - 1)]]
-  }
-
-  // A diverging ramp is read by its extremes, so it always spans end to end.
-  const lastIndex =
-    name === 'diverging' ? ramp.length - 1 : usableSequential(ramp).length - 1
-  return rampStops(ramp, count, lastIndex)
+  return name === 'diverging'
+    ? divergingStops(ramp, count)
+    : sequentialStops(ramp, count)
 }
 
 /**
@@ -347,10 +370,7 @@ export function paletteColors(
  */
 function namedRamp(name: ChartPaletteName, tokens: ChartTokens): string[] {
   if (name === 'categorical') return tokens.categorical
-  const ramp =
-    name === 'diverging'
-      ? tokens.diverging
-      : usableSequential(tokens.sequential)
+  const ramp = name === 'diverging' ? tokens.diverging : tokens.sequential
   return ramp.length ? ramp : tokens.categorical
 }
 

package/src/components/Checkbox/Checkbox.cy.ts

@@ -17,7 +17,7 @@ describe('Checkbox', () => {
     cy.get('input[type="checkbox"]').should('be.disabled')
     // A disabled control dims its label — `disabled` outranks `color="gray-7"`.
     cy.get('label')
-      .should('have.class', 'text-base')
+      .should('have.class', 'text-sm')
       .and('have.class', 'text-ink-gray-4')
       .and('not.have.class', 'text-ink-gray-7')
   })
@@ -28,8 +28,8 @@ describe('Checkbox', () => {
     })
 
     cy.get('[data-slot="description"]')
-      .should('have.class', 'text-ink-gray-3')
-      .and('not.have.class', 'text-ink-gray-5')
+      .should('have.class', 'text-ink-gray-4')
+      .and('not.have.class', 'text-ink-gray-6')
   })
 
   it('toggles with the space key', () => {

package/src/components/Combobox/Combobox.api.md

@@ -30,14 +30,14 @@
     name: 'variant',
     description: 'Visual style of the combobox.',
     required: false,
-    type: 'ComboboxVariant',
+    type: 'InputVariant',
     default: '"subtle"'
   },
   {
     name: 'size',
     description: 'Size of the trigger and option rows.',
     required: false,
-    type: 'ComboboxSize',
+    type: 'InputSize',
     default: '"sm"'
   },
   {

package/src/components/Combobox/Combobox.playground.vue

@@ -35,10 +35,10 @@ const knobs: Knob[] = [
     type: 'tabs',
     default: 'sm',
     options: [
+      { label: 'xs', value: 'xs' },
       { label: 'sm', value: 'sm' },
       { label: 'md', value: 'md' },
       { label: 'lg', value: 'lg' },
-      { label: 'xl', value: 'xl' },
     ],
   },
   {

package/src/components/Combobox/Combobox.vue

@@ -88,7 +88,12 @@ const slots = useReactiveSlots<ComboboxSlots>()
 const slotFns = slots as Record<string, ((props?: any) => any) | undefined>
 
 const model = defineModel<ComboboxOptionValue | null>({ default: null })
+// Documented on `open` in `./types.ts`. A JSDoc block here would be appended
+// to that description by `propsgen`, not replace it.
 const open = defineModel<boolean>('open', { default: false })
+// Optional outside-in control of the search box. Unbound, `defineModel` keeps
+// the value local, so `v-model:query` is never required. Documented on `query`
+// in `./types.ts`.
 const query = defineModel<string>('query', { default: '' })
 // Bound, the query is the consumer's — the component never resets it on its
 // own (see `skipInitialDisplaySync` and the open watcher below).

package/src/components/Combobox/stories/Clearable.vue

@@ -11,7 +11,7 @@ const fields: Field[] = [
     label: 'colour',
     options: ['gray', 'blue', 'green', 'red'],
   },
-  { key: 'size', label: 'size', options: ['sm', 'md', 'lg', 'xl'] },
+  { key: 'size', label: 'size', options: ['xs', 'sm', 'md', 'lg'] },
   { key: 'style', label: 'style', options: ['subtle', 'outline', 'ghost'] },
   {
     key: 'fontSize',
@@ -41,10 +41,10 @@ const colourSwatch: Record<string, string> = {
 }
 
 const sizeDot: Record<string, string> = {
-  sm: 'size-1.5',
-  md: 'size-2',
-  lg: 'size-2.5',
-  xl: 'size-3',
+  xs: 'size-1.5',
+  sm: 'size-2',
+  md: 'size-2.5',
+  lg: 'size-3',
 }
 
 const fontSizePx: Record<string, number> = {

package/src/components/Combobox/types.ts

@@ -1,9 +1,16 @@
 import type { Component, VNodeChild } from 'vue'
+import type { InputSize, InputVariant } from '../../composables/inputTypes'
 import type { InputLabelingProps } from '../../composables/useInputLabeling'
 import type { PortalTarget } from '../../composables/usePortalTarget'
 
-export type ComboboxVariant = 'subtle' | 'outline' | 'ghost'
-export type ComboboxSize = 'sm' | 'md' | 'lg' | 'xl'
+/**
+ * Combobox renders the same trigger geometry and surfaces as every other text
+ * input, so these are the input scales under the component's own names. They
+ * stay aliases, not copies — a Combobox-only scale would have to come with a
+ * Combobox-only renderer.
+ */
+export type ComboboxVariant = InputVariant
+export type ComboboxSize = InputSize
 
 import type { PopoverSide, PopoverAlign } from '../shared/selection/types'
 export type { PopoverSide, PopoverAlign }
@@ -312,12 +319,6 @@ export interface ComboboxEmits {
   /** Fired when the committed value changes. */
   'update:modelValue': [value: ComboboxOptionValue | null]
 
-  /** Fired when the open state changes. */
-  'update:open': [value: boolean]
-
-  /** Fired when the query changes. */
-  'update:query': [value: string]
-
   /** Fired when the resolved selected option changes. */
   'update:selectedOption': [
     option: ComboboxSelectableOption | ComboboxCustomOption | null,