rei-kit 2.10.0 → 2.12.0

package/dist/styles.css

@@ -218,16 +218,16 @@
   opacity: 0;
 }
 
-.rk-listbox[data-v-31727bd7] {
+.rk-listbox[data-v-7f8cd788] {
   overflow-y: auto;
   border-radius: var(--radius-card);
   padding: 0.25rem;
 }
-.rk-listbox[data-v-31727bd7]:focus-visible {
+.rk-listbox[data-v-7f8cd788]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 1px;
 }
-.rk-listbox-option[data-v-31727bd7] {
+.rk-listbox-option[data-v-7f8cd788] {
   display: flex;
   cursor: pointer;
   align-items: center;
@@ -241,38 +241,38 @@
 /* The current row shows only while the list has focus. A list that is not
    being used has no "current" row, and a highlight left behind on one reads
    as a selection — which is exactly what it is not. */
-.rk-listbox:focus-within .rk-listbox-option.is-active[data-v-31727bd7] {
+.rk-listbox:focus-within .rk-listbox-option.is-active[data-v-7f8cd788] {
   background: var(--color-muted);
 }
-.rk-listbox-option.is-chosen[data-v-31727bd7] {
+.rk-listbox-option.is-chosen[data-v-7f8cd788] {
   color: var(--color-primary);
   font-weight: 500;
 }
 
 /* Chosen is the tick and the tint, and it holds whether the list is in use
    or not: the current option and the chosen one are different things. */
-.rk-listbox-option.is-chosen[data-v-31727bd7] {
+.rk-listbox-option.is-chosen[data-v-7f8cd788] {
   background: color-mix(in oklab, var(--color-primary) 10%, transparent);
 }
-.rk-listbox:focus-within .rk-listbox-option.is-chosen.is-active[data-v-31727bd7] {
+.rk-listbox:focus-within .rk-listbox-option.is-chosen.is-active[data-v-7f8cd788] {
   background: color-mix(in oklab, var(--color-primary) 20%, transparent);
 }
-.rk-listbox-option.is-disabled[data-v-31727bd7] {
+.rk-listbox-option.is-disabled[data-v-7f8cd788] {
   cursor: not-allowed;
   opacity: 0.45;
 }
-.rk-listbox-label[data-v-31727bd7] {
+.rk-listbox-label[data-v-7f8cd788] {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rk-listbox-description[data-v-31727bd7] {
+.rk-listbox-description[data-v-7f8cd788] {
   display: block;
   font-size: 0.75rem;
   color: var(--color-ink-soft);
 }
-.rk-listbox-empty[data-v-31727bd7] {
+.rk-listbox-empty[data-v-7f8cd788] {
   padding: 1rem;
 }
 
@@ -643,20 +643,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 +664,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 +672,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 +680,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);
@@ -1334,6 +1346,38 @@ to {
   padding: 0;
 }
 
+.rk-dl[data-v-831e205b] {
+  display: grid;
+  gap: 0.75rem;
+}
+.rk-dl.is-inline[data-v-831e205b] {
+  gap: 0.5rem;
+}
+.rk-dl-row[data-v-831e205b] {
+  display: grid;
+  gap: 0.125rem;
+}
+
+/* Inline from a tablet up: below that a term and its value side by side
+   leave neither enough room to read. */
+@media (min-width: 40rem) {
+.is-inline .rk-dl-row[data-v-831e205b] {
+    grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr);
+    gap: 1rem;
+    align-items: baseline;
+}
+}
+.rk-dl-term[data-v-831e205b] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--color-ink-soft);
+}
+.rk-dl-value[data-v-831e205b] {
+  font-size: 0.875rem;
+  color: var(--color-ink);
+}
+
 .rk-drop-box[data-v-a42eab69] {
   display: flex;
   cursor: pointer;
@@ -1506,6 +1550,38 @@ to {
   transform: translateY(4px) scale(0.98);
 }
 
+.rk-time[data-v-0037adb2] {
+  display: block;
+}
+.rk-time-field[data-v-0037adb2] {
+  display: flex;
+  width: 100%;
+  height: 2.75rem;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: var(--radius-card);
+  padding: 0 0.75rem;
+  text-align: left;
+  font-size: 1rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-ink);
+}
+.rk-time-field.is-empty[data-v-0037adb2] {
+  color: var(--color-ink-soft);
+}
+.rk-time-field.is-invalid[data-v-0037adb2] {
+  --surface-border-color: var(--color-negative);
+}
+.rk-time-field[data-v-0037adb2]:disabled {
+  opacity: 0.5;
+}
+.rk-time-columns[data-v-0037adb2] {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+  gap: 0.5rem;
+  width: 14rem;
+}
+
 .rk-date[data-v-154e27fb] {
   display: block;
 }
@@ -1611,6 +1687,29 @@ to {
 }
 }
 
+.rk-confirm[data-v-9453e511] {
+  max-width: 17rem;
+}
+.rk-confirm-title[data-v-9453e511] {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-ink);
+}
+.rk-confirm-message[data-v-9453e511] {
+  margin-top: 0.125rem;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--color-ink-soft);
+}
+
+/* The confirming button last, where the eye and the thumb finish. */
+.rk-confirm-actions[data-v-9453e511] {
+  margin-top: 0.75rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
 .rk-toggles[data-v-9076e36f] {
   display: inline-flex;
   flex-wrap: wrap;
@@ -2590,26 +2689,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;
@@ -2617,7 +2716,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;
@@ -2627,32 +2726,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;
@@ -2660,19 +2773,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);
@@ -2751,17 +2864,17 @@ to {
   align-items: stretch;
 }
 
-.rk-tree[data-v-1ba675c5] {
+.rk-tree[data-v-f91deddf] {
   display: flex;
   flex-direction: column;
   gap: 1px;
   border-radius: var(--radius-card);
 }
-.rk-tree[data-v-1ba675c5]:focus-visible {
+.rk-tree[data-v-f91deddf]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-tree-row[data-v-1ba675c5] {
+.rk-tree-row[data-v-f91deddf] {
   display: flex;
   cursor: pointer;
   align-items: center;
@@ -2772,31 +2885,31 @@ to {
   font-size: 0.875rem;
   color: var(--color-ink);
 }
-.rk-tree-row.is-active[data-v-1ba675c5] {
+.rk-tree-row.is-active[data-v-f91deddf] {
   background: var(--color-muted);
 }
-.rk-tree-row.is-chosen[data-v-1ba675c5] {
+.rk-tree-row.is-chosen[data-v-f91deddf] {
   color: var(--color-primary);
   font-weight: 500;
 }
-.rk-tree-row.is-chosen.is-active[data-v-1ba675c5] {
+.rk-tree-row.is-chosen.is-active[data-v-f91deddf] {
   background: color-mix(in oklab, var(--color-primary) 12%, transparent);
 }
-.rk-tree-row.is-disabled[data-v-1ba675c5] {
+.rk-tree-row.is-disabled[data-v-f91deddf] {
   cursor: not-allowed;
   opacity: 0.45;
 }
-.rk-tree-twist[data-v-1ba675c5],
-.rk-tree-twist-space[data-v-1ba675c5] {
+.rk-tree-twist[data-v-f91deddf],
+.rk-tree-twist-space[data-v-f91deddf] {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
 }
-.rk-tree-twist[data-v-1ba675c5] {
+.rk-tree-twist[data-v-f91deddf] {
   color: var(--color-ink-soft);
   transition: rotate var(--duration-fast) var(--ease-standard);
 }
-.rk-tree-twist.is-open[data-v-1ba675c5] {
+.rk-tree-twist.is-open[data-v-f91deddf] {
   rotate: 90deg;
 }
 
@@ -2833,6 +2946,15 @@ to {
 }
 }
 
+/* The sheet has no actions slot of its own: on a phone the buttons belong in
+   the flow, at the end of what they are about, within reach of a thumb. */
+.rk-responsive-actions[data-v-85131850] {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+  padding-top: 1rem;
+}
+
 .rk-tabs[data-v-8135ecab] {
   display: flex;
   align-items: center;

package/dist/web/ResponsiveDialog.vue.d.ts

@@ -0,0 +1,50 @@
+/**
+ * One question, asked the way the screen it lands on expects: a modal on a
+ * wide screen, a sheet from the bottom edge on a phone.
+ *
+ * The two are the same thing at different sizes, and apps keep writing both
+ * and choosing between them by hand — which is two markups, two sets of
+ * labels and one of them usually left behind.
+ *
+ * The query is read after mount rather than during render: a server has no
+ * screen, and a layout guessed there and swapped on hydration is a page that
+ * jumps. Until it is known, it is the sheet — the narrow answer, because the
+ * narrow one fits on both.
+ */
+type __VLS_Props = {
+    /** The dialog's heading, and its accessible name. Already translated. */
+    title: string;
+    /** Accessible name of the close button. */
+    closeLabel: string;
+    /** A line under the title, on the sheet. */
+    subtitle?: string | undefined;
+    /** `alert` makes the wide one an `alertdialog`: an answer is required. */
+    tone?: 'default' | 'alert' | undefined;
+    dismissible?: boolean | undefined;
+    /** Where it turns from a sheet into a modal. Any media width. */
+    breakpoint?: string | undefined;
+};
+type __VLS_Slots = {
+    /** The body. */
+    default: () => unknown;
+    /** Buttons, at the foot. */
+    actions?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Open or closed, with `v-model`. */
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: boolean) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/web/index.d.ts

@@ -56,6 +56,12 @@ export { default as BaseToolbar } from './BaseToolbar.vue';
 export { default as BaseTree } from './BaseTree.vue';
 export type { TreeNode } from './BaseTree.vue';
 export { default as TransferList } from './TransferList.vue';
+/**
+ * One question, asked the way the screen expects: a modal on a wide screen,
+ * a sheet on a phone. In the wide entry because it needs both, and a phone
+ * app that only ever shows the sheet should reach for `BaseSheet` itself.
+ */
+export { default as ResponsiveDialog } from './ResponsiveDialog.vue';
 export { default as BaseTabs } from './BaseTabs.vue';
 export type { TabPanel } from './BaseTabs.vue';
 export { default as BaseTooltip } from './BaseTooltip.vue';