use-kbd 0.4.0 → 0.5.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "use-kbd",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "description": "Keyboard-first UX for React: action registration, shortcuts modal, omnibar, and sequences",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
package/src/styles.css CHANGED
@@ -47,6 +47,9 @@
47
47
  --kbd-sequence-max-height: 300px;
48
48
  --kbd-sequence-row-padding: 8px 12px;
49
49
  --kbd-sequence-row-gap: 8px;
50
+
51
+ /* Omnibar */
52
+ --kbd-omnibar-max-height: 50vh;
50
53
  }
51
54
 
52
55
  /* === Backdrop === */
@@ -339,7 +342,7 @@
339
342
 
340
343
  @keyframes kbd-timeout {
341
344
  from { width: 100%; }
342
- to { width: 0%; }
345
+ to { width: 0; }
343
346
  }
344
347
 
345
348
  /* === Omnibar === */
@@ -379,7 +382,7 @@
379
382
  }
380
383
 
381
384
  .kbd-omnibar-results {
382
- max-height: 300px;
385
+ max-height: var(--kbd-omnibar-max-height);
383
386
  overflow-y: auto;
384
387
  }
385
388
 
@@ -424,6 +427,43 @@
424
427
  font-size: 0.875rem;
425
428
  }
426
429
 
430
+ .kbd-omnibar-loading {
431
+ padding: var(--kbd-padding);
432
+ text-align: center;
433
+ color: var(--kbd-text-secondary);
434
+ font-size: 0.875rem;
435
+ }
436
+
437
+ .kbd-omnibar-pagination {
438
+ padding: 8px var(--kbd-padding);
439
+ text-align: center;
440
+ font-size: 0.75rem;
441
+ color: var(--kbd-text-secondary);
442
+ border-top: 1px solid var(--kbd-border);
443
+ }
444
+
445
+ .kbd-omnibar-pagination-loading {
446
+ font-style: italic;
447
+ }
448
+
449
+ .kbd-omnibar-pagination-info {
450
+ /* Normal weight for "X of Y" */
451
+ }
452
+
453
+ .kbd-omnibar-pagination-more {
454
+ font-style: italic;
455
+ }
456
+
457
+ .kbd-omnibar-result-description {
458
+ font-size: 0.75rem;
459
+ color: var(--kbd-text-secondary);
460
+ margin-left: auto;
461
+ white-space: nowrap;
462
+ overflow: hidden;
463
+ text-overflow: ellipsis;
464
+ max-width: 150px;
465
+ }
466
+
427
467
  /* === Sequence Modal === */
428
468
  .kbd-sequence-backdrop {
429
469
  position: fixed;
@@ -534,7 +574,7 @@
534
574
  background-color: var(--kbd-bg-secondary);
535
575
  }
536
576
 
537
- .kbd-sequence-completion:first-child {
577
+ .kbd-sequence-completion.selected {
538
578
  background-color: var(--kbd-bg-secondary);
539
579
  outline: 2px solid var(--kbd-accent);
540
580
  outline-offset: -2px;
@@ -657,6 +697,11 @@
657
697
  outline-offset: -2px;
658
698
  }
659
699
 
700
+ .kbd-lookup-binding {
701
+ display: flex;
702
+ gap: 4px;
703
+ }
704
+
660
705
  .kbd-lookup-labels {
661
706
  flex: 1;
662
707
  font-size: 0.875rem;