@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/date-time/date-time.css

@@ -0,0 +1,53 @@
+/* Date and time inputs (date, time, month, week, datetime-local) on the text input frame. The
+   focused part of the value fills with --rkui-selected. The picker icon is a calendar (a clock for
+   time), drawn as a mask in currentColor the way search draws its icons. The popup picker and
+   Firefox's icon are the browser's own and can't be styled. Safari on macOS draws no picker icon
+   and shows an empty date as today's date in grey; it and Firefox show month and week as plain
+   text boxes.
+
+   <input class="rkui-input" type="date"> */
+
+.rkui-input::-webkit-calendar-picker-indicator {
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  margin-inline-start: var(--rkui-space-2);
+  padding: 0;
+  background: currentColor;
+  mask: url('../../../dist/icons/calendar-blank.svg') center / contain no-repeat;
+  forced-color-adjust: none;
+  cursor: pointer;
+}
+
+.rkui-input[type='time']::-webkit-calendar-picker-indicator {
+  mask-image: url('../../../dist/icons/clock.svg');
+}
+
+.rkui-input {
+  --rkui-date-part-fill: var(--rkui-selected);
+  --rkui-date-part-text: var(--rkui-on-selected);
+}
+
+/* Forced colours would drop the fill, so the focused part uses system colours there. */
+@media (forced-colors: active) {
+  .rkui-input {
+    --rkui-date-part-fill: Highlight;
+    --rkui-date-part-text: HighlightText;
+  }
+}
+
+/* One rule for every part: browsers treat unknown ::-webkit- names as valid, so the list holds. */
+.rkui-input::-webkit-datetime-edit-year-field:focus,
+.rkui-input::-webkit-datetime-edit-month-field:focus,
+.rkui-input::-webkit-datetime-edit-week-field:focus,
+.rkui-input::-webkit-datetime-edit-day-field:focus,
+.rkui-input::-webkit-datetime-edit-hour-field:focus,
+.rkui-input::-webkit-datetime-edit-minute-field:focus,
+.rkui-input::-webkit-datetime-edit-second-field:focus,
+.rkui-input::-webkit-datetime-edit-millisecond-field:focus,
+.rkui-input::-webkit-datetime-edit-ampm-field:focus,
+.rkui-input::-webkit-datetime-edit-meridiem-field:focus {
+  border-radius: calc(var(--rkui-radius) / 2);
+  background-color: var(--rkui-date-part-fill);
+  color: var(--rkui-date-part-text);
+  forced-color-adjust: none;
+}

package/src/components/dial/Dial.vue

@@ -0,0 +1,247 @@
+<!--
+  A rotary dial for a number: a labelled range drawn as a dial, with its value in a readout.
+  Dragging round the dial sets the value, snapped to `step`, and fires `input` and, on release,
+  `change`; the wheel steps it while the range has focus. The range stays the control for keys,
+  screen readers and forms, lying invisibly over the face. In an Astro page it needs
+  `client:visible`; without it the face stays hidden, holding its place, and the range shows at
+  its foot. `class` and `style` go on the outermost div; other attributes (name, min, max, step,
+  disabled, ...) go on the range, whose `min`, `max` and `step` are 0, 100 and 1 when left out.
+  In a `.vue` file, `v-model` is the range's value, a number. Without one, `value` is the starting
+  value; the middle of the range when left out. In the browser a starting value outside the range
+  or off its steps moves to the nearest one, as the range has it.
+
+  @example
+  <Dial client:visible label="Temperature" min="10" max="30" step="0.5" value="20" variant="arc" />
+  <Dial v-model="temperature" label="Temperature" min="10" max="30" step="0.5" />
+-->
+<script setup lang="ts">
+import { computed, onMounted, ref, useAttrs, useTemplateRef } from 'vue'
+import { useComponentId } from '../../shared/component-id'
+import { useLiveValue } from '../../shared/live-value'
+import { splitAttrs } from '../../shared/split-attrs'
+import {
+  END_ANGLE,
+  MAX_LABEL,
+  MIN_LABEL,
+  START_ANGLE,
+  TICKS,
+  TRACK,
+  TRACK_RADIUS,
+  angleToValue,
+  faceStyle,
+  isBlockLit,
+  rampBlocks,
+  valueToAngle,
+} from '../../shared/dial-face.js'
+import { VIEWBOX, arcPath, pointToAngle } from '../../shared/dial-geometry.js'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** The dial's visible label, which is also its accessible name. */
+  label: string
+  /**
+   * The look: 'arc', a track that fills to the value, with a thumb riding it; 'knob', a raised knob
+   * with a turning notch inside a ring of ticks, when left out. Open, see DECISIONS ("Dial").
+   */
+  variant?: 'knob' | 'arc'
+  /**
+   * A ring of blocks that light up to the value: 'cool' (cool to warm) or 'heat' (yellow to coral);
+   * no ramp when left out. Open, see DECISIONS ("Dial").
+   */
+  ramp?: 'cool' | 'heat'
+}
+
+const { label, variant = 'knob', ramp } = defineProps<Props>()
+
+const attrs = useAttrs()
+/** The range's lowest and highest values, from its attributes; 0 and 100 when left out. */
+function limits() {
+  return { min: Number(attrs.min ?? 0), max: Number(attrs.max ?? 100) }
+}
+
+/**
+ * The range's value (`v-model`), a number; the page's `value` attribute, or the middle of the
+ * range, when left out.
+ */
+const model = defineModel<number>()
+if (model.value === undefined) {
+  const { min, max } = limits()
+  model.value = Number(attrs.value ?? (min + max) / 2)
+}
+// In the browser, the range's own value wins: what was typed before the dial woke up, or a
+// starting value it clamped or snapped to a step.
+const vLiveValue = useLiveValue(model)
+const id = (attrs.id as string | undefined) ?? useComponentId('dial')
+const input = useTemplateRef<HTMLInputElement>('input')
+const face = useTemplateRef<HTMLElement>('face')
+// Set once the dial runs in the browser; until then dial.css hides the face.
+const live = ref(false)
+onMounted(() => (live.value = true))
+
+/** What the face draws round its edge: the ramp's blocks, the arc's track, or tick marks. */
+const marks = computed<'ramp' | 'arc' | 'ticks'>(() => {
+  if (ramp) return 'ramp'
+  if (variant === 'arc') return 'arc'
+  return 'ticks'
+})
+/** The ramp's blocks, in as many colours as dial.css gives the ramp: 3 for heat, 6 for cool. */
+const blocks = computed(() => rampBlocks(ramp === 'heat' ? 3 : 6))
+
+/** Whether a drag is under way. */
+const dragging = ref(false)
+/** The range's value when the drag began, to tell on release whether it changed. */
+let valueAtDragStart = ''
+
+/**
+ * The page's attributes: `class` and `style` for the outermost div (`outer`), the rest for the range
+ * (`inner`). `value` is left out, as the model holds it, and so is `id`, which the range always has.
+ */
+function pageAttrs() {
+  const { value, id: pageId, ...rest } = attrs
+  return splitAttrs(rest)
+}
+
+/** Where the dial points for the value. */
+function angle() {
+  const { min, max } = limits()
+  return valueToAngle(model.value!, min, max)
+}
+
+/** How far round the dial the value is, from 0 to 1. */
+function fraction() {
+  const { min, max } = limits()
+  return (model.value! - min) / (max - min)
+}
+
+/** Sets the range's value, which the browser snaps to a step, and fires `input` if it changed. */
+function setValue(value: number) {
+  const field = input.value!
+  const before = field.value
+  field.value = String(value)
+  if (field.value !== before) field.dispatchEvent(new Event('input', { bubbles: true }))
+}
+
+/**
+ * Sets the value from where the pointer is round the dial's centre. In the gap at the bottom, it
+ * holds at the nearer end, so a drag past either end doesn't jump to the other.
+ */
+function setValueFromPointer(event: PointerEvent) {
+  const box = face.value!.getBoundingClientRect()
+  const pointer = pointToAngle(
+    event.clientX - (box.left + box.width / 2),
+    event.clientY - (box.top + box.height / 2),
+  )
+  const { min, max } = limits()
+  if (Math.abs(pointer) <= END_ANGLE) setValue(angleToValue(pointer, min, max))
+  else setValue(input.value!.valueAsNumber > (min + max) / 2 ? max : min)
+}
+
+function grab(event: PointerEvent) {
+  const field = input.value!
+  if (field.disabled || event.button !== 0) return
+  face.value!.setPointerCapture(event.pointerId)
+  field.focus({ preventScroll: true })
+  valueAtDragStart = field.value
+  dragging.value = true
+  setValueFromPointer(event)
+}
+
+function drag(event: PointerEvent) {
+  if (dragging.value) setValueFromPointer(event)
+}
+
+/** Fires `change` once at the end of a drag, as a native range does on release. */
+function release() {
+  if (!dragging.value) return
+  dragging.value = false
+  const field = input.value!
+  if (field.value !== valueAtDragStart) field.dispatchEvent(new Event('change', { bubbles: true }))
+}
+
+/** Steps the value while the range has focus, so an unfocused dial never traps page scrolling. */
+function wheel(event: WheelEvent) {
+  const field = input.value!
+  if (document.activeElement !== field || event.deltaY === 0) return
+  event.preventDefault()
+  const before = field.value
+  if (event.deltaY < 0) field.stepUp()
+  else field.stepDown()
+  if (field.value === before) return
+  field.dispatchEvent(new Event('input', { bubbles: true }))
+  field.dispatchEvent(new Event('change', { bubbles: true }))
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'rkui-dial',
+      `rkui-dial--${variant}`,
+      { 'rkui-dial--ramp': ramp, 'rkui-dial--ramp-heat': ramp === 'heat' },
+    ]"
+    :data-rkui-live="live ? '' : undefined"
+    :data-dragging="dragging ? '' : undefined"
+    v-bind="pageAttrs().outer"
+    @wheel="wheel"
+  >
+    <label :for="id">{{ label }}</label>
+    <!-- @mousedown.prevent: a mousedown on the face would otherwise move focus off the range. -->
+    <div
+      ref="face"
+      class="rkui-dial-face"
+      aria-hidden="true"
+      :style="faceStyle(angle())"
+      @pointerdown="grab"
+      @pointermove="drag"
+      @lostpointercapture="release"
+      @mousedown.prevent
+    >
+      <svg :viewBox="`0 0 ${VIEWBOX} ${VIEWBOX}`">
+        <text class="rkui-dial-limit" :x="MIN_LABEL.x" :y="MIN_LABEL.y">{{ limits().min }}</text>
+        <text class="rkui-dial-limit" :x="MAX_LABEL.x" :y="MAX_LABEL.y">{{ limits().max }}</text>
+        <template v-if="marks === 'ramp'">
+          <path
+            v-for="(block, i) in blocks"
+            :key="i"
+            class="rkui-dial-block"
+            :d="block.d"
+            :style="{ '--rkui-dial-block-fill': block.fill }"
+            :data-lit="isBlockLit(i, fraction()) ? '' : undefined"
+          />
+        </template>
+        <template v-else-if="marks === 'arc'">
+          <path class="rkui-dial-track-outline" :d="TRACK" />
+          <path class="rkui-dial-track" :d="TRACK" />
+          <path class="rkui-dial-fill" :d="arcPath(TRACK_RADIUS, START_ANGLE, angle())" />
+        </template>
+        <template v-else>
+          <line
+            v-for="(tick, i) in TICKS"
+            :key="i"
+            class="rkui-dial-tick"
+            :x1="tick.x1"
+            :y1="tick.y1"
+            :x2="tick.x2"
+            :y2="tick.y2"
+          />
+        </template>
+      </svg>
+      <span v-if="variant === 'arc'" class="rkui-dial-thumb"></span>
+      <span v-else class="rkui-dial-knob"><span class="rkui-dial-notch"></span></span>
+    </div>
+    <input
+      ref="input"
+      v-live-value
+      v-model.number="model"
+      :id
+      class="rkui-range"
+      type="range"
+      min="0"
+      max="100"
+      step="1"
+      v-bind="pageAttrs().inner"
+    />
+    <output :for="id">{{ model }}</output>
+  </div>
+</template>

package/src/components/dial/dial-element.ts

@@ -0,0 +1,6 @@
+// <rkui-dial> for plain HTML pages, bundled into dist/rkui.js: <rkui-dial label="Temperature"
+// min="10" max="30" step="0.5" value="20"></rkui-dial>.
+import { defineElement } from '../../shared/define-element'
+import Dial from './Dial.vue'
+
+defineElement('rkui-dial', Dial)

package/src/components/dial/dial.css

@@ -0,0 +1,299 @@
+/* Dial: a rotary "thermostat" for a number, in two variants (A knob, B arc), drawn by Dial.vue
+   over a range, which lies invisibly over the face: still focusable and announced, with the
+   dial's bounds, while the face takes the pointer. Dial.vue marks the dial data-rkui-live once it
+   runs in the browser; until then the face stays hidden, holding its place, and the range shows
+   at its foot.
+
+   Dial A, knob: <div class="rkui-dial rkui-dial--knob">
+   Dial B, arc:  <div class="rkui-dial rkui-dial--arc">
+     <label for="t">Label</label>
+     <div class="rkui-dial-face" aria-hidden="true">
+       <svg>…</svg>                            (limits, and ticks, the arc's track or ramp blocks)
+       <span class="rkui-dial-knob">…</span>   (or <span class="rkui-dial-thumb"> for the arc)
+     </div>
+     <input class="rkui-range" id="t" type="range" min="10" max="30" step="0.5" value="20">
+     <output for="t">20</output>
+   </div>
+
+   Add rkui-dial--ramp to either for a ring of blocks that light up to the value, cool to warm; add
+   rkui-dial--ramp-heat as well for yellow to coral. The ramp's colours are --rkui-dial-ramp-1 to
+   --rkui-dial-ramp-<steps>, and Dial.vue colours its blocks in as many runs as the ramp has.
+
+   The face's SVG is 200 units square, so its lengths are pixels at the default --rkui-dial-size. */
+
+.rkui-dial {
+  --rkui-dial-size: 12.5rem;
+
+  display: grid;
+  grid-template-columns: var(--rkui-dial-size);
+  grid-template-areas:
+    'label'
+    'control'
+    'readout';
+  align-items: center;
+  justify-items: center;
+  gap: var(--rkui-space-1) var(--rkui-space-3);
+  max-inline-size: 30rem;
+}
+
+.rkui-dial > label {
+  grid-area: label;
+  font-weight: 600;
+}
+
+.rkui-dial > input,
+.rkui-dial-face {
+  grid-area: control;
+}
+
+.rkui-dial > output {
+  grid-area: readout;
+  min-inline-size: 5ch;
+  font-family: var(--rkui-font-mono);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: end;
+}
+
+/* Until Dial.vue runs in the browser, the face would do nothing: it stays hidden, and the range
+   shows at its foot. */
+.rkui-dial:not([data-rkui-live]) > .rkui-dial-face {
+  visibility: hidden;
+}
+
+.rkui-dial:not([data-rkui-live]) > input {
+  align-self: end;
+}
+
+.rkui-dial[data-rkui-live] > input {
+  inline-size: 100%;
+  block-size: 100%;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.rkui-dial-face {
+  --rkui-dial-shadow: var(--rkui-shadow);
+  --rkui-dial-shift: 0px;
+
+  display: grid;
+  place-items: center;
+  position: relative;
+  inline-size: var(--rkui-dial-size);
+  aspect-ratio: 1;
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+}
+
+.rkui-dial-face > svg {
+  grid-area: 1 / 1;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: visible;
+}
+
+.rkui-dial-limit {
+  fill: var(--rkui-muted);
+  font-family: var(--rkui-font-mono);
+  font-size: var(--rkui-step--1);
+  font-weight: 600;
+  text-anchor: middle;
+  dominant-baseline: middle;
+}
+
+/* The knob and the thumb are the parts that pop. */
+:is(.rkui-dial-knob, .rkui-dial-thumb) {
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+  border-radius: 50%;
+  box-shadow: var(--rkui-dial-shadow);
+  translate: calc(var(--rkui-shadow-dx) * var(--rkui-dial-shift))
+    calc(var(--rkui-shadow-dy) * var(--rkui-dial-shift));
+  transition:
+    translate var(--rkui-duration-fast) ease,
+    box-shadow var(--rkui-duration-fast) ease;
+}
+
+/* Dial A, knob */
+
+.rkui-dial-tick {
+  stroke: var(--rkui-muted);
+  stroke-width: 2px;
+  stroke-linecap: round;
+}
+
+.rkui-dial-knob {
+  grid-area: 1 / 1;
+  position: relative;
+  inline-size: 66%;
+  aspect-ratio: 1;
+  /* As on an unchecked checkbox: in dark mode the outline, not the raised fill, stands out. */
+  border-color: var(--rkui-line-unfilled);
+  background: var(--rkui-raised);
+}
+
+/* The notch turns, not the knob, so the knob's shadow doesn't turn with it. */
+.rkui-dial-notch {
+  position: absolute;
+  inset: 0;
+  rotate: var(--rkui-dial-angle);
+  transition: rotate var(--rkui-duration-fast) ease;
+}
+
+.rkui-dial-notch::before {
+  content: '';
+  position: absolute;
+  inset-block-start: 8%;
+  inset-inline-start: calc(50% - 0.375rem);
+  box-sizing: border-box;
+  inline-size: 0.75rem;
+  block-size: 32%;
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-selected);
+}
+
+/* Dial B, arc */
+
+.rkui-dial-track-outline,
+.rkui-dial-track,
+.rkui-dial-fill {
+  fill: none;
+  stroke-linecap: round;
+}
+
+.rkui-dial-track-outline {
+  stroke: var(--rkui-line-unfilled);
+  stroke-width: 20px;
+}
+
+.rkui-dial-track {
+  stroke: var(--rkui-raised);
+  stroke-width: 16px;
+}
+
+.rkui-dial-fill {
+  stroke: var(--rkui-selected);
+  stroke-width: 16px;
+}
+
+/* Centred on the point Dial.vue sets; the margins centre it, since translate is taken by the
+   pop. */
+.rkui-dial-thumb {
+  --rkui-thumb-size: calc(var(--rkui-dial-size) * 0.14);
+
+  position: absolute;
+  left: var(--rkui-dial-thumb-x);
+  top: var(--rkui-dial-thumb-y);
+  box-sizing: border-box;
+  inline-size: var(--rkui-thumb-size);
+  aspect-ratio: 1;
+  margin: calc(var(--rkui-thumb-size) / -2) 0 0 calc(var(--rkui-thumb-size) / -2);
+  background: var(--rkui-selected);
+}
+
+.rkui-dial--arc > output {
+  grid-area: control;
+  pointer-events: none;
+  font-family: var(--rkui-font-display);
+  font-size: var(--rkui-step-4);
+  font-weight: 700;
+  text-align: center;
+}
+
+/* Ramp */
+
+.rkui-dial--ramp {
+  --rkui-dial-ramp-1: var(--rkui-navy);
+  --rkui-dial-ramp-2: var(--rkui-teal);
+  --rkui-dial-ramp-3: var(--rkui-green);
+  --rkui-dial-ramp-4: var(--rkui-yellow);
+  --rkui-dial-ramp-5: var(--rkui-tangerine);
+  --rkui-dial-ramp-6: var(--rkui-coral);
+}
+
+.rkui-dial--ramp-heat {
+  --rkui-dial-ramp-1: var(--rkui-yellow);
+  --rkui-dial-ramp-2: var(--rkui-tangerine);
+  --rkui-dial-ramp-3: var(--rkui-coral);
+}
+
+/* Unlit blocks are empty, like the arc's track, so the level reads without its colours. */
+.rkui-dial-block {
+  fill: var(--rkui-raised);
+  stroke: var(--rkui-line-unfilled);
+  stroke-width: var(--rkui-outline-width);
+  stroke-linejoin: round;
+  transition: fill var(--rkui-duration-fast) ease;
+}
+
+.rkui-dial-block[data-lit] {
+  fill: var(--rkui-dial-block-fill);
+}
+
+/* States */
+
+@media (hover: hover) {
+  .rkui-dial-face:hover {
+    --rkui-dial-shadow: var(--rkui-shadow-hover);
+    --rkui-dial-shift: calc(-1 * var(--rkui-lift-offset));
+  }
+}
+
+.rkui-dial[data-dragging] > .rkui-dial-face {
+  --rkui-dial-shadow: var(--rkui-shadow-pressed);
+  --rkui-dial-shift: var(--rkui-press-offset);
+}
+
+.rkui-dial:has(> input:focus-visible) :is(.rkui-dial-knob, .rkui-dial-thumb) {
+  outline: var(--rkui-focus-width) solid var(--rkui-focus);
+  outline-offset: var(--rkui-focus-offset);
+  box-shadow: none;
+}
+
+.rkui-dial:has(> input:disabled) > .rkui-dial-face {
+  --rkui-dial-shadow: none;
+  --rkui-dial-shift: 0px;
+
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* Forced colours: the SVG keeps its own colours, so the value stays visible. */
+@media (forced-colors: active) {
+  .rkui-dial-face > svg,
+  .rkui-dial-notch::before {
+    forced-color-adjust: none;
+  }
+
+  .rkui-dial-tick,
+  .rkui-dial-track-outline,
+  .rkui-dial-block {
+    stroke: CanvasText;
+  }
+
+  .rkui-dial-limit {
+    fill: CanvasText;
+  }
+
+  .rkui-dial-track {
+    stroke: Canvas;
+  }
+
+  .rkui-dial-block {
+    fill: Canvas;
+  }
+
+  .rkui-dial-fill {
+    stroke: Highlight;
+  }
+
+  .rkui-dial-block[data-lit] {
+    fill: Highlight;
+  }
+
+  .rkui-dial-notch::before {
+    border-color: CanvasText;
+    background: Highlight;
+  }
+}

package/src/components/drawer/Cabinet.vue

@@ -0,0 +1,67 @@
+<!--
+  A cabinet: Drawers stacked as one, on a raised panel, each front the cabinet's width. The slot
+  holds the Drawers. With
+  `exclusive`, opening a drawer closes the others: the cabinet gives them one generated `name`
+  (native `<details name>`), and a drawer's own `name` wins. Without it, each drawer opens and
+  closes on its own. Its drawers pull out from the bottom (leave their `placement` out). Needs no
+  JavaScript. `class`, `style` and other attributes go on the `<div>`.
+
+  @example
+  <Cabinet exclusive>
+    <Drawer label="Pens"><p>…</p></Drawer>
+    <Drawer label="Paper"><p>…</p></Drawer>
+  </Cabinet>
+-->
+<script setup lang="ts">
+import { cloneVNode, computed, provide, type VNode } from 'vue'
+import { useComponentId } from '../../shared/component-id'
+import { slotHtml } from '../../shared/slot-html'
+
+interface Props {
+  /** One drawer open at a time; each drawer opens and closes on its own when left out. */
+  exclusive?: boolean
+}
+
+const { exclusive = false } = defineProps<Props>()
+const generatedName = useComponentId('cabinet')
+const name = computed(() => (exclusive ? generatedName : undefined))
+// Drawers in a .vue file read the name by inject.
+provide('rkui-cabinet-name', name)
+
+/**
+ * The HTML with the cabinet's name written into its own drawers, the `<details>` at the top level
+ * of it, and not into drawers inside them.
+ */
+function nameTopDrawers(html: string): string {
+  let depth = 0
+  return html.replace(/<details\b[^>]*>|<\/details>/g, (tag) => {
+    if (tag === '</details>') {
+      depth--
+      return tag
+    }
+    depth++
+    const ownDrawer = depth === 1 && /\sclass="([^"]*\s)?rkui-drawer[\s"]/.test(tag)
+    if (!ownDrawer || /\sname="/.test(tag)) return tag
+    return tag.replace('<details', `<details name="${generatedName}"`)
+  })
+}
+
+/**
+ * The slot, with the name written into drawers written in MDX or .astro, which reach the cabinet
+ * already rendered, as HTML (slot-html.ts). A drawer with a name of its own keeps it.
+ */
+function drawers(vnodes: VNode[]): VNode[] {
+  if (!exclusive) return vnodes
+  return vnodes.map((vnode) => {
+    const html = slotHtml(vnode)
+    if (html === undefined) return vnode
+    return cloneVNode(vnode, { value: nameTopDrawers(html) })
+  })
+}
+</script>
+
+<template>
+  <div class="rkui-cabinet">
+    <component :is="drawer" v-for="(drawer, i) in drawers($slots.default?.() ?? [])" :key="i" />
+  </div>
+</template>