rei-kit 2.11.0 → 2.13.0

package/dist/styles.css

@@ -218,6 +218,34 @@
   opacity: 0;
 }
 
+.rk-skeleton[data-v-37327de6] {
+  display: block;
+  flex-shrink: 0;
+  background: var(--color-muted);
+  animation: rk-skeleton-pulse-37327de6 1.6s ease-in-out infinite;
+}
+.rk-skeleton.is-block[data-v-37327de6] {
+  border-radius: var(--radius-cell);
+}
+
+/* A line of text, rounded like one and a little short of its box. */
+.rk-skeleton.is-text[data-v-37327de6] {
+  border-radius: 9999px;
+}
+.rk-skeleton.is-circle[data-v-37327de6] {
+  border-radius: 9999px;
+}
+@keyframes rk-skeleton-pulse-37327de6 {
+50% {
+    opacity: 0.55;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.rk-skeleton[data-v-37327de6] {
+    animation: none;
+}
+}
+
 .rk-listbox[data-v-7f8cd788] {
   overflow-y: auto;
   border-radius: var(--radius-card);
@@ -276,34 +304,6 @@
   padding: 1rem;
 }
 
-.rk-skeleton[data-v-37327de6] {
-  display: block;
-  flex-shrink: 0;
-  background: var(--color-muted);
-  animation: rk-skeleton-pulse-37327de6 1.6s ease-in-out infinite;
-}
-.rk-skeleton.is-block[data-v-37327de6] {
-  border-radius: var(--radius-cell);
-}
-
-/* A line of text, rounded like one and a little short of its box. */
-.rk-skeleton.is-text[data-v-37327de6] {
-  border-radius: 9999px;
-}
-.rk-skeleton.is-circle[data-v-37327de6] {
-  border-radius: 9999px;
-}
-@keyframes rk-skeleton-pulse-37327de6 {
-50% {
-    opacity: 0.55;
-}
-}
-@media (prefers-reduced-motion: reduce) {
-.rk-skeleton[data-v-37327de6] {
-    animation: none;
-}
-}
-
 .rk-avatar[data-v-47586bec] {
   display: grid;
   place-items: center;
@@ -399,26 +399,58 @@
   background: color-mix(in srgb, var(--color-hair) 70%, transparent);
 }
 
-.rk-combo[data-v-ce4c503f] {
+.rk-combo[data-v-aa2335fa] {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
 }
-.rk-combo-label[data-v-ce4c503f] {
+.rk-combo-label[data-v-aa2335fa] {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--color-ink);
 }
-.rk-combo-field[data-v-ce4c503f] {
+.rk-combo-field[data-v-aa2335fa] {
   position: relative;
   display: flex;
   align-items: center;
 }
 
+/* With chips the field is a box that wraps, and the input is one item in it
+   that grows into whatever is left. */
+.rk-combo-field.is-multiple[data-v-aa2335fa] {
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  min-height: 2.75rem;
+  border-radius: var(--radius-card);
+  padding: 0.3125rem 2rem 0.3125rem 0.375rem;
+}
+.rk-combo-chip[data-v-aa2335fa] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 9999px;
+  background: var(--color-muted);
+  padding: 0.125rem 0.25rem 0.125rem 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--color-ink);
+}
+.rk-combo-chip-x[data-v-aa2335fa] {
+  display: grid;
+  width: 1.125rem;
+  height: 1.125rem;
+  place-items: center;
+  border-radius: 9999px;
+  color: var(--color-ink-soft);
+  line-height: 1;
+}
+.rk-combo-chip-x[data-v-aa2335fa]:hover {
+  color: var(--color-ink);
+}
+
 /* 16px, like every other text control here: iOS zooms the viewport when it
    focuses a field under 16px and never zooms back. */
-.rk-combo-input[data-v-ce4c503f] {
+.rk-combo-input[data-v-aa2335fa] {
   width: 100%;
   height: 2.75rem;
   border-radius: var(--radius-card);
@@ -426,20 +458,40 @@
   font-size: 1rem;
   color: var(--color-ink);
 }
-.rk-combo-input[data-v-ce4c503f]:focus-visible {
+.is-multiple .rk-combo-input[data-v-aa2335fa] {
+  width: auto;
+  height: 1.75rem;
+  min-width: 6rem;
+  flex: 1;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.rk-combo-input[data-v-aa2335fa]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -1px;
+}
+.is-multiple .rk-combo-input[data-v-aa2335fa]:focus-visible {
+  outline: none;
+}
+
+/* The ring belongs to the whole box once the box is the control. */
+.rk-combo-field.is-multiple[data-v-aa2335fa]:focus-within {
   outline: 2px solid var(--color-primary);
   outline-offset: -1px;
 }
-.rk-combo-input[data-v-ce4c503f]:disabled {
+.rk-combo-input[data-v-aa2335fa]:disabled {
   opacity: 0.5;
 }
-.rk-combo-toggle[data-v-ce4c503f] {
+.rk-combo-toggle[data-v-aa2335fa] {
   position: absolute;
   right: 0.5rem;
   color: var(--color-ink-soft);
   font-size: 0.75rem;
 }
-.rk-combo-list[data-v-ce4c503f] {
+.rk-combo-list[data-v-aa2335fa] {
   position: absolute;
   top: calc(100% - 1.25rem);
   z-index: 50;
@@ -449,29 +501,48 @@
   border-radius: var(--radius-card);
   padding: 0.25rem;
 }
-.rk-combo-option[data-v-ce4c503f] {
+.rk-combo-option[data-v-aa2335fa] {
   cursor: pointer;
   border-radius: var(--radius-cell);
   padding: 0.5rem 0.625rem;
   font-size: 0.875rem;
   color: var(--color-ink);
 }
-.rk-combo-option.is-highlighted[data-v-ce4c503f] {
+
+/* A virtual row's height is the arithmetic the spacers are built on, so it
+   cannot be left to the text inside it. */
+.rk-combo-option[style][data-v-aa2335fa] {
+  display: flex;
+  align-items: center;
+  padding-block: 0;
+}
+.rk-combo-option.is-highlighted[data-v-aa2335fa] {
   background: var(--color-muted);
 }
-.rk-combo-option.is-selected[data-v-ce4c503f] {
+.rk-combo-option.is-selected[data-v-aa2335fa] {
   font-weight: 600;
 }
-.rk-combo-empty[data-v-ce4c503f] {
+.rk-combo-empty[data-v-aa2335fa],
+.rk-combo-status[data-v-aa2335fa] {
   padding: 0.75rem 0.625rem;
   font-size: 0.875rem;
   color: var(--color-ink-soft);
 }
-.rk-combo-error[data-v-ce4c503f] {
+.rk-combo-status[data-v-aa2335fa] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.rk-combo-status-rows[data-v-aa2335fa] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.rk-combo-error[data-v-aa2335fa] {
   font-size: 0.75rem;
   color: var(--color-negative);
 }
-.rk-combo-hint[data-v-ce4c503f] {
+.rk-combo-hint[data-v-aa2335fa] {
   font-size: 0.75rem;
   color: var(--color-ink-soft);
 }
@@ -643,20 +714,20 @@ to {
 }
 }
 
-.rk-table-scroll[data-v-89958b5a] {
+.rk-table-scroll[data-v-ab10e9fa] {
   overflow-x: auto;
 }
-.rk-table-scroll[data-v-89958b5a]:focus-visible {
+.rk-table-scroll[data-v-ab10e9fa]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
   border-radius: var(--radius-cell);
 }
-.rk-table[data-v-89958b5a] {
+.rk-table[data-v-ab10e9fa] {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.875rem;
 }
-.rk-table-caption[data-v-89958b5a] {
+.rk-table-caption[data-v-ab10e9fa] {
   padding-bottom: 0.75rem;
   text-align: left;
   font-size: 0.8125rem;
@@ -664,7 +735,7 @@ to {
 }
 
 /* Off screen rather than `display: none`, which is not announced at all. */
-.rk-table-caption-hidden[data-v-89958b5a] {
+.rk-table-caption-hidden[data-v-ab10e9fa] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -672,7 +743,7 @@ to {
   clip-path: inset(50%);
   white-space: nowrap;
 }
-.rk-table th[data-v-89958b5a] {
+.rk-table th[data-v-ab10e9fa] {
   border-bottom: 1px solid var(--color-hair);
   padding: 0.625rem 0.75rem;
   text-align: left;
@@ -680,25 +751,37 @@ to {
   color: var(--color-ink-soft);
   white-space: nowrap;
 }
-.rk-table td[data-v-89958b5a] {
+.rk-table td[data-v-ab10e9fa] {
   border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 50%, transparent);
   padding: 0.75rem;
   color: var(--color-ink);
   vertical-align: top;
 }
-.rk-table tbody tr:last-child td[data-v-89958b5a] {
+.rk-table tbody tr:last-child td[data-v-ab10e9fa] {
   border-bottom: 0;
 }
 
-/* Numbers line up on their last digit, which is the one being compared. */
-.is-end[data-v-89958b5a] {
+/* Numbers line up on their last digit, which is the one being compared.
+   Both the heading and the cells, and named against `.rk-table th` rather
+   than on its own: a bare `.is-end` loses to it, and the column then reads as
+   two columns — a heading on the left and its numbers far off to the right. */
+.rk-table th.is-end[data-v-ab10e9fa],
+.rk-table td.is-end[data-v-ab10e9fa] {
   text-align: right;
   font-variant-numeric: tabular-nums;
 }
-.is-nowrap[data-v-89958b5a] {
+.rk-table th.is-center[data-v-ab10e9fa],
+.rk-table td.is-center[data-v-ab10e9fa] {
+  text-align: center;
+}
+.rk-table th.is-start[data-v-ab10e9fa],
+.rk-table td.is-start[data-v-ab10e9fa] {
+  text-align: left;
+}
+.is-nowrap[data-v-ab10e9fa] {
   white-space: nowrap;
 }
-.rk-table-empty[data-v-89958b5a] {
+.rk-table-empty[data-v-ab10e9fa] {
   padding: 2rem 0.75rem;
   text-align: center;
   color: var(--color-ink-soft);
@@ -2677,26 +2760,26 @@ to {
 
 /* The scroller is focusable: a region only a drag can reach is a region a
    keyboard cannot read at all. */
-.rk-data-scroll[data-v-5920cac0] {
+.rk-data-scroll[data-v-f95c586b] {
   overflow-x: auto;
   border-radius: var(--radius-card);
 }
-.rk-data-scroll[data-v-5920cac0]:focus-visible {
+.rk-data-scroll[data-v-f95c586b]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-data[data-v-5920cac0] {
+.rk-data[data-v-f95c586b] {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.875rem;
 }
-.rk-data-caption[data-v-5920cac0] {
+.rk-data-caption[data-v-f95c586b] {
   padding-bottom: 0.5rem;
   text-align: left;
   font-size: 0.8125rem;
   color: var(--color-ink-soft);
 }
-.rk-data-caption-hidden[data-v-5920cac0] {
+.rk-data-caption-hidden[data-v-f95c586b] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -2704,7 +2787,7 @@ to {
   clip-path: inset(50%);
   white-space: nowrap;
 }
-.rk-data th[data-v-5920cac0] {
+.rk-data th[data-v-f95c586b] {
   border-bottom: 1px solid var(--color-hair);
   padding: 0.625rem 0.75rem;
   text-align: left;
@@ -2714,32 +2797,46 @@ to {
   color: var(--color-ink-soft);
   white-space: nowrap;
 }
-.rk-data.is-sticky thead th[data-v-5920cac0] {
+.rk-data.is-sticky thead th[data-v-f95c586b] {
   position: sticky;
   top: 0;
   z-index: 1;
   background: var(--color-surface);
 }
-.rk-data td[data-v-5920cac0] {
+.rk-data td[data-v-f95c586b] {
   border-bottom: 1px solid color-mix(in oklab, var(--color-hair) 60%, transparent);
   padding: 0.625rem 0.75rem;
   color: var(--color-ink);
   vertical-align: middle;
 }
-.rk-data tbody tr:last-child td[data-v-5920cac0] {
+.rk-data tbody tr:last-child td[data-v-f95c586b] {
   border-bottom: 0;
 }
-.rk-data tbody tr.is-chosen td[data-v-5920cac0] {
+.rk-data tbody tr.is-chosen td[data-v-f95c586b] {
   background: color-mix(in oklab, var(--color-primary) 8%, transparent);
 }
-.is-end[data-v-5920cac0] {
+
+/* Named against `.rk-data th`, which sets `text-align: left` and would
+   otherwise win: the heading stayed on the left while its numbers sat at the
+   far edge, so one column read as two. The sort button is inline-flex, so it
+   follows the heading's alignment and carries the arrow with it. */
+.rk-data th.is-end[data-v-f95c586b],
+.rk-data td.is-end[data-v-f95c586b] {
   text-align: right;
   font-variant-numeric: tabular-nums;
 }
-.is-nowrap[data-v-5920cac0] {
+.rk-data th.is-center[data-v-f95c586b],
+.rk-data td.is-center[data-v-f95c586b] {
+  text-align: center;
+}
+.rk-data th.is-start[data-v-f95c586b],
+.rk-data td.is-start[data-v-f95c586b] {
+  text-align: left;
+}
+.is-nowrap[data-v-f95c586b] {
   white-space: nowrap;
 }
-.rk-data-sort[data-v-5920cac0] {
+.rk-data-sort[data-v-f95c586b] {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -2747,19 +2844,19 @@ to {
   color: inherit;
   transition: color var(--duration-fast) var(--ease-standard);
 }
-.rk-data-sort[data-v-5920cac0]:hover {
+.rk-data-sort[data-v-f95c586b]:hover {
   color: var(--color-ink);
 }
-.rk-data-pick[data-v-5920cac0] {
+.rk-data-pick[data-v-f95c586b] {
   width: 2.75rem;
   padding-right: 0;
 }
-.rk-data-box[data-v-5920cac0] {
+.rk-data-box[data-v-f95c586b] {
   width: 1rem;
   height: 1rem;
   accent-color: var(--color-primary);
 }
-.rk-data-empty[data-v-5920cac0] {
+.rk-data-empty[data-v-f95c586b] {
   padding: 2rem 0.75rem;
   text-align: center;
   color: var(--color-ink-soft);

package/dist/web.js

@@ -1,5 +1,5 @@
 import { n as inertOutside, o as ensureSheetRoot, r as useBoundValue, t as BaseSheet_default } from "./BaseSheet-B7401rS7.js";
-import { n as BaseListbox_default, r as useMediaQuery, t as BaseSkeleton_default } from "./BaseSkeleton-DnqwogzV.js";
+import { n as BaseSkeleton_default, r as useMediaQuery, t as BaseListbox_default } from "./BaseListbox-BnaHlmMN.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
 import { t as BaseButton_default } from "./BaseButton-RN2an975.js";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, useModel, useTemplateRef, vModelText, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
@@ -726,7 +726,7 @@ var DataTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 						key: column.key,
 						scope: "col",
 						"aria-sort": ariaSort(column),
-						class: normalizeClass([column.align === "end" && "is-end", column.nowrap && "is-nowrap"])
+						class: normalizeClass([column.align && `is-${column.align}`, column.nowrap && "is-nowrap"])
 					}, [column.sortable ? (openBlock(), createElementBlock("button", {
 						key: 0,
 						type: "button",
@@ -767,7 +767,7 @@ var DataTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					}, null, 40, _hoisted_10)])) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
 						return openBlock(), createElementBlock("td", {
 							key: column.key,
-							class: normalizeClass([column.align === "end" && "is-end", column.nowrap && "is-nowrap"])
+							class: normalizeClass([column.align && `is-${column.align}`, column.nowrap && "is-nowrap"])
 						}, [renderSlot(_ctx.$slots, column.key, {
 							row,
 							value: row[column.key]
@@ -780,7 +780,7 @@ var DataTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			], 2)], 8, _hoisted_1$8);
 		};
 	}
-}), [["__scopeId", "data-v-5920cac0"]]);
+}), [["__scopeId", "data-v-f95c586b"]]);
 //#endregion
 //#region src/web/BaseSplitter.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$7 = { class: "rk-split-pane is-start" };