rei-kit 2.16.0 → 2.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -1818,6 +1818,68 @@ to {
1818
1818
  width: 14rem;
1819
1819
  }
1820
1820
 
1821
+ .rk-timeline[data-v-08b15ce8] {
1822
+ position: relative;
1823
+ display: flex;
1824
+ flex-direction: column;
1825
+ gap: 1rem;
1826
+ padding-left: 1.5rem;
1827
+ }
1828
+
1829
+ /* Stops short of both ends: a line running past the first and last dots
1830
+ reads as a sequence that continues out of view. */
1831
+ .rk-timeline-rail[data-v-08b15ce8] {
1832
+ position: absolute;
1833
+ top: 0.5rem;
1834
+ bottom: 0.75rem;
1835
+ left: 0.25rem;
1836
+ width: 1px;
1837
+ background: var(--color-hair);
1838
+ }
1839
+ .rk-timeline-event[data-v-08b15ce8] {
1840
+ position: relative;
1841
+ }
1842
+ .rk-timeline-marker[data-v-08b15ce8] {
1843
+ position: absolute;
1844
+ top: 0.125rem;
1845
+ left: -1.5rem;
1846
+ display: grid;
1847
+ place-items: center;
1848
+ }
1849
+
1850
+ /* The ring is the page's own ground, so the dot sits on the rail rather
1851
+ than being crossed by it. */
1852
+ .rk-timeline-dot[data-v-08b15ce8] {
1853
+ display: grid;
1854
+ width: 0.625rem;
1855
+ height: 0.625rem;
1856
+ place-items: center;
1857
+ border-radius: 9999px;
1858
+ border: 2px solid var(--color-canvas);
1859
+ color: var(--color-on-primary);
1860
+ }
1861
+ .rk-timeline-time[data-v-08b15ce8] {
1862
+ font-size: 0.75rem;
1863
+ font-weight: 500;
1864
+ font-variant-numeric: tabular-nums;
1865
+ color: var(--color-ink-soft);
1866
+ }
1867
+ .rk-timeline-title[data-v-08b15ce8] {
1868
+ margin-top: 0.125rem;
1869
+ font-size: 0.875rem;
1870
+ font-weight: 600;
1871
+ color: var(--color-ink);
1872
+ }
1873
+ .rk-timeline-description[data-v-08b15ce8] {
1874
+ margin-top: 0.125rem;
1875
+ font-size: 0.875rem;
1876
+ line-height: 1.5;
1877
+ color: var(--color-ink-soft);
1878
+ }
1879
+ .rk-timeline-body[data-v-08b15ce8] {
1880
+ margin-top: 0.5rem;
1881
+ }
1882
+
1821
1883
  .rk-date[data-v-154e27fb] {
1822
1884
  display: block;
1823
1885
  }
@@ -2772,7 +2834,7 @@ to {
2772
2834
  color: var(--color-ink-soft);
2773
2835
  }
2774
2836
 
2775
- .rk-command[data-v-cce1dd03] {
2837
+ .rk-command[data-v-f72521e7] {
2776
2838
  position: fixed;
2777
2839
  inset: 0;
2778
2840
  z-index: 90;
@@ -2783,13 +2845,13 @@ to {
2783
2845
  grows downwards into space rather than pushing itself off both edges. */
2784
2846
  padding-top: min(12vh, 6rem);
2785
2847
  }
2786
- .rk-command-scrim[data-v-cce1dd03] {
2848
+ .rk-command-scrim[data-v-f72521e7] {
2787
2849
  position: absolute;
2788
2850
  inset: 0;
2789
2851
  background: color-mix(in oklab, var(--color-ink) 45%, transparent);
2790
2852
  backdrop-filter: blur(2px);
2791
2853
  }
2792
- .rk-command-panel[data-v-cce1dd03] {
2854
+ .rk-command-panel[data-v-f72521e7] {
2793
2855
  position: relative;
2794
2856
  display: flex;
2795
2857
  width: 100%;
@@ -2799,14 +2861,14 @@ to {
2799
2861
  overflow: hidden;
2800
2862
  border-radius: var(--radius-card);
2801
2863
  }
2802
- .rk-command-field[data-v-cce1dd03] {
2864
+ .rk-command-field[data-v-f72521e7] {
2803
2865
  display: flex;
2804
2866
  align-items: center;
2805
2867
  gap: 0.625rem;
2806
2868
  border-bottom: 1px solid var(--surface-border-color);
2807
2869
  padding: 0.875rem 1rem;
2808
2870
  }
2809
- .rk-command-input[data-v-cce1dd03] {
2871
+ .rk-command-input[data-v-f72521e7] {
2810
2872
  min-width: 0;
2811
2873
  flex: 1;
2812
2874
  background: transparent;
@@ -2818,15 +2880,15 @@ to {
2818
2880
  /* The field takes focus the moment this opens, so a full ring around it
2819
2881
  would be on the whole time. The rule under it turns instead: enough to
2820
2882
  say where the keyboard is, quiet enough to live with. */
2821
- .rk-command-field[data-v-cce1dd03]:has(.rk-command-input:focus-visible) {
2883
+ .rk-command-field[data-v-f72521e7]:has(.rk-command-input:focus-visible) {
2822
2884
  border-bottom-color: var(--color-primary);
2823
2885
  box-shadow: inset 0 -1px 0 var(--color-primary);
2824
2886
  }
2825
- .rk-command-list[data-v-cce1dd03] {
2887
+ .rk-command-list[data-v-f72521e7] {
2826
2888
  overflow-y: auto;
2827
2889
  padding: 0.375rem;
2828
2890
  }
2829
- .rk-command-group[data-v-cce1dd03] {
2891
+ .rk-command-group[data-v-f72521e7] {
2830
2892
  padding: 0.5rem 0.625rem 0.25rem;
2831
2893
  font-size: 0.6875rem;
2832
2894
  font-weight: 600;
@@ -2834,7 +2896,7 @@ to {
2834
2896
  text-transform: uppercase;
2835
2897
  color: var(--color-ink-soft);
2836
2898
  }
2837
- .rk-command-item[data-v-cce1dd03] {
2899
+ .rk-command-item[data-v-f72521e7] {
2838
2900
  display: flex;
2839
2901
  cursor: pointer;
2840
2902
  align-items: center;
@@ -2844,35 +2906,35 @@ to {
2844
2906
  font-size: 0.875rem;
2845
2907
  color: var(--color-ink);
2846
2908
  }
2847
- .rk-command-item.is-active[data-v-cce1dd03] {
2909
+ .rk-command-item.is-active[data-v-f72521e7] {
2848
2910
  background: var(--color-muted);
2849
2911
  }
2850
- .rk-command-hint[data-v-cce1dd03] {
2912
+ .rk-command-hint[data-v-f72521e7] {
2851
2913
  margin-left: auto;
2852
2914
  flex-shrink: 0;
2853
2915
  font-size: 0.75rem;
2854
2916
  color: var(--color-ink-soft);
2855
2917
  }
2856
- .rk-command-empty[data-v-cce1dd03] {
2918
+ .rk-command-empty[data-v-f72521e7] {
2857
2919
  padding: 1.5rem 0.625rem;
2858
2920
  text-align: center;
2859
2921
  font-size: 0.875rem;
2860
2922
  color: var(--color-ink-soft);
2861
2923
  }
2862
- .rk-command-enter-active[data-v-cce1dd03],
2863
- .rk-command-leave-active[data-v-cce1dd03] {
2924
+ .rk-command-enter-active[data-v-f72521e7],
2925
+ .rk-command-leave-active[data-v-f72521e7] {
2864
2926
  transition: opacity var(--duration-fast) var(--ease-standard);
2865
2927
  }
2866
- .rk-command-enter-active .rk-command-panel[data-v-cce1dd03],
2867
- .rk-command-leave-active .rk-command-panel[data-v-cce1dd03] {
2928
+ .rk-command-enter-active .rk-command-panel[data-v-f72521e7],
2929
+ .rk-command-leave-active .rk-command-panel[data-v-f72521e7] {
2868
2930
  transition: transform var(--duration-fast) var(--ease-standard);
2869
2931
  }
2870
- .rk-command-enter-from[data-v-cce1dd03],
2871
- .rk-command-leave-to[data-v-cce1dd03] {
2932
+ .rk-command-enter-from[data-v-f72521e7],
2933
+ .rk-command-leave-to[data-v-f72521e7] {
2872
2934
  opacity: 0;
2873
2935
  }
2874
- .rk-command-enter-from .rk-command-panel[data-v-cce1dd03],
2875
- .rk-command-leave-to .rk-command-panel[data-v-cce1dd03] {
2936
+ .rk-command-enter-from .rk-command-panel[data-v-f72521e7],
2937
+ .rk-command-leave-to .rk-command-panel[data-v-f72521e7] {
2876
2938
  transform: translateY(-0.5rem) scale(0.98);
2877
2939
  }
2878
2940
 
@@ -3237,18 +3299,18 @@ to {
3237
3299
  }
3238
3300
  }
3239
3301
 
3240
- .rk-mega[data-v-343f9362] {
3302
+ .rk-mega[data-v-9c8be532] {
3241
3303
  position: relative;
3242
3304
  }
3243
- .rk-mega-bar[data-v-343f9362] {
3305
+ .rk-mega-bar[data-v-9c8be532] {
3244
3306
  display: flex;
3245
3307
  align-items: center;
3246
3308
  gap: 0.25rem;
3247
3309
  }
3248
- .rk-mega-item[data-v-343f9362] {
3310
+ .rk-mega-item[data-v-9c8be532] {
3249
3311
  position: static;
3250
3312
  }
3251
- .rk-mega-top[data-v-343f9362] {
3313
+ .rk-mega-top[data-v-9c8be532] {
3252
3314
  display: inline-flex;
3253
3315
  align-items: center;
3254
3316
  gap: 0.25rem;
@@ -3259,25 +3321,25 @@ to {
3259
3321
  color: var(--color-ink-soft);
3260
3322
  transition: color var(--duration-fast) var(--ease-standard);
3261
3323
  }
3262
- .rk-mega-top[data-v-343f9362]:hover,
3263
- .rk-mega-top[aria-expanded='true'][data-v-343f9362] {
3324
+ .rk-mega-top[data-v-9c8be532]:hover,
3325
+ .rk-mega-top[aria-expanded='true'][data-v-9c8be532] {
3264
3326
  color: var(--color-ink);
3265
3327
  }
3266
- .rk-mega-top.is-active[data-v-343f9362] {
3328
+ .rk-mega-top.is-active[data-v-9c8be532] {
3267
3329
  color: var(--color-primary);
3268
3330
  }
3269
- .rk-mega-twist[data-v-343f9362] {
3331
+ .rk-mega-twist[data-v-9c8be532] {
3270
3332
  width: 0.875rem;
3271
3333
  height: 0.875rem;
3272
3334
  transition: rotate var(--duration-fast) var(--ease-standard);
3273
3335
  }
3274
- .rk-mega-twist.is-open[data-v-343f9362] {
3336
+ .rk-mega-twist.is-open[data-v-9c8be532] {
3275
3337
  rotate: 180deg;
3276
3338
  }
3277
3339
 
3278
3340
  /* Full width of the bar rather than of the button: that is what makes it a
3279
3341
  mega menu and not a dropdown. */
3280
- .rk-mega-panel[data-v-343f9362] {
3342
+ .rk-mega-panel[data-v-9c8be532] {
3281
3343
  position: absolute;
3282
3344
  top: calc(100% + 0.5rem);
3283
3345
  left: 0;
@@ -3286,15 +3348,15 @@ to {
3286
3348
  border-radius: var(--radius-card);
3287
3349
  padding: 1.25rem;
3288
3350
  }
3289
- .rk-mega-panel[hidden][data-v-343f9362] {
3351
+ .rk-mega-panel[hidden][data-v-9c8be532] {
3290
3352
  display: none;
3291
3353
  }
3292
- .rk-mega-columns[data-v-343f9362] {
3354
+ .rk-mega-columns[data-v-9c8be532] {
3293
3355
  display: grid;
3294
3356
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
3295
3357
  gap: 1.5rem;
3296
3358
  }
3297
- .rk-mega-column-title[data-v-343f9362] {
3359
+ .rk-mega-column-title[data-v-9c8be532] {
3298
3360
  margin-bottom: 0.5rem;
3299
3361
  font-size: 0.6875rem;
3300
3362
  font-weight: 600;
@@ -3302,26 +3364,26 @@ to {
3302
3364
  text-transform: uppercase;
3303
3365
  color: var(--color-ink-soft);
3304
3366
  }
3305
- .rk-mega-links[data-v-343f9362] {
3367
+ .rk-mega-links[data-v-9c8be532] {
3306
3368
  display: flex;
3307
3369
  flex-direction: column;
3308
3370
  gap: 1px;
3309
3371
  }
3310
- .rk-mega-link[data-v-343f9362] {
3372
+ .rk-mega-link[data-v-9c8be532] {
3311
3373
  display: block;
3312
3374
  border-radius: var(--radius-cell);
3313
3375
  padding: 0.375rem 0.5rem;
3314
3376
  transition: background-color var(--duration-fast) var(--ease-standard);
3315
3377
  }
3316
- .rk-mega-link[data-v-343f9362]:hover {
3378
+ .rk-mega-link[data-v-9c8be532]:hover {
3317
3379
  background: var(--color-muted);
3318
3380
  }
3319
- .rk-mega-link-label[data-v-343f9362] {
3381
+ .rk-mega-link-label[data-v-9c8be532] {
3320
3382
  display: block;
3321
3383
  font-size: 0.875rem;
3322
3384
  color: var(--color-ink);
3323
3385
  }
3324
- .rk-mega-link-note[data-v-343f9362] {
3386
+ .rk-mega-link-note[data-v-9c8be532] {
3325
3387
  display: block;
3326
3388
  margin-top: 0.125rem;
3327
3389
  font-size: 0.75rem;
@@ -3332,10 +3394,10 @@ to {
3332
3394
  /* On a narrow screen the panel is the page width and the columns stack,
3333
3395
  because a four-column grid in a 390px column is four unreadable columns. */
3334
3396
  @media (max-width: 48rem) {
3335
- .rk-mega-panel[data-v-343f9362] {
3397
+ .rk-mega-panel[data-v-9c8be532] {
3336
3398
  padding: 1rem;
3337
3399
  }
3338
- .rk-mega-columns[data-v-343f9362] {
3400
+ .rk-mega-columns[data-v-9c8be532] {
3339
3401
  grid-template-columns: minmax(0, 1fr);
3340
3402
  gap: 1rem;
3341
3403
  }
package/dist/web.js CHANGED
@@ -454,9 +454,26 @@ var CommandMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
454
454
  const field = useTemplateRef("field");
455
455
  const sheetRoot = ensureSheetRoot();
456
456
  let release = null;
457
+ /**
458
+ * Every word has to appear somewhere, rather than the whole query in one
459
+ * place.
460
+ *
461
+ * Matching the query as a single string means "date picker" finds nothing
462
+ * when the name is `BaseDatePicker` and the word "picker" lives in the
463
+ * keywords beside it — the two halves are in different fields, and a person
464
+ * typing has no way of knowing that. Splitting on spaces is what makes a
465
+ * palette feel like it is reading the request rather than the string.
466
+ *
467
+ * The words may land in any order and in any field, which is why the
468
+ * searchable text is joined first.
469
+ */
457
470
  const matches = computed(() => {
458
- const needle = query.value.trim().toLowerCase();
459
- const keep = (item) => needle === "" || [item.label, ...item.keywords ?? []].some((word) => word.toLowerCase().includes(needle));
471
+ const terms = query.value.trim().toLowerCase().split(/\s+/).filter(Boolean);
472
+ const keep = (item) => {
473
+ if (terms.length === 0) return true;
474
+ const haystack = [item.label, ...item.keywords ?? []].join(" ").toLowerCase();
475
+ return terms.every((term) => haystack.includes(term));
476
+ };
460
477
  return __props.groups.map((group) => ({
461
478
  ...group,
462
479
  items: group.items.filter(keep)
@@ -586,7 +603,7 @@ var CommandMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
586
603
  })], 8, ["to"]);
587
604
  };
588
605
  }
589
- }), [["__scopeId", "data-v-cce1dd03"]]);
606
+ }), [["__scopeId", "data-v-f72521e7"]]);
590
607
  //#endregion
591
608
  //#region src/web/DataTable.vue?vue&type=script&setup=true&lang.ts
592
609
  var _hoisted_1$9 = ["aria-label"];
@@ -1602,10 +1619,10 @@ var MegaMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
1602
1619
  "aria-current"
1603
1620
  ])) : (openBlock(), createElementBlock("button", {
1604
1621
  key: 1,
1605
- type: "button",
1606
- class: normalizeClass(["rk-mega-top focus-ring", { "is-active": item.key === __props.active }]),
1607
1622
  ref_for: true,
1608
1623
  ref: (el) => setButton(item.key, el),
1624
+ type: "button",
1625
+ class: normalizeClass(["rk-mega-top focus-ring", { "is-active": item.key === __props.active }]),
1609
1626
  "aria-expanded": open.value === item.key,
1610
1627
  "aria-controls": panelId(item.key),
1611
1628
  onClick: ($event) => toggle(item.key)
@@ -1634,7 +1651,7 @@ var MegaMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
1634
1651
  }), 128))])], 40, _hoisted_1$1);
1635
1652
  };
1636
1653
  }
1637
- }), [["__scopeId", "data-v-343f9362"]]);
1654
+ }), [["__scopeId", "data-v-9c8be532"]]);
1638
1655
  //#endregion
1639
1656
  //#region src/web/NavLinks.vue?vue&type=script&setup=true&lang.ts
1640
1657
  var _hoisted_1 = ["aria-label"];