@pitchfork-ui/react 0.6.0 → 0.8.0

package/dist/styles.css

@@ -221,6 +221,39 @@
   --pf-select-option-active-bg: var(--color-semantic-action-primary);
   --pf-select-option-active-text: var(--color-semantic-action-primary-text);
 
+  /* Combobox aliases */
+  --pf-combobox-bg: var(--pf-input-bg);
+  --pf-combobox-border: var(--pf-input-border);
+  --pf-combobox-text: var(--pf-input-text);
+  --pf-combobox-placeholder: var(--pf-input-placeholder);
+  --pf-combobox-focus-border: var(--color-semantic-action-primary);
+  --pf-combobox-invalid-border: var(--color-semantic-status-danger-border);
+  --pf-combobox-menu-bg: var(--pf-surface-bg);
+  --pf-combobox-menu-border: var(--pf-surface-border-strong);
+  --pf-combobox-option-active-bg: var(--color-semantic-action-primary);
+  --pf-combobox-option-active-text: var(--color-semantic-action-primary-text);
+
+  /* Command palette aliases */
+  --pf-command-bg: var(--pf-surface-bg);
+  --pf-command-border: var(--pf-surface-border-strong);
+  --pf-command-text: var(--color-semantic-text-default);
+  --pf-command-text-muted: var(--color-semantic-text-muted);
+  --pf-command-shortcut-bg: var(--color-semantic-background-subtle);
+  --pf-command-item-active-bg: var(--color-semantic-action-primary);
+  --pf-command-item-active-text: var(--color-semantic-action-primary-text);
+
+  /* Number input aliases */
+  --pf-numberinput-bg: var(--pf-input-bg);
+  --pf-numberinput-border: var(--pf-input-border);
+  --pf-numberinput-text: var(--pf-input-text);
+  --pf-numberinput-placeholder: var(--pf-input-placeholder);
+  --pf-numberinput-focus-border: var(--color-semantic-action-primary);
+  --pf-numberinput-invalid-border: var(--color-semantic-status-danger-border);
+  --pf-numberinput-step-bg: var(--color-semantic-background-subtle);
+  --pf-numberinput-step-text: var(--color-semantic-text-default);
+  --pf-numberinput-step-hover-bg: var(--color-semantic-action-primary);
+  --pf-numberinput-step-hover-text: var(--color-semantic-action-primary-text);
+
   /* Overlay and elevation color aliases */
   --pf-overlay-backdrop: color-mix(in srgb, var(--color-gray-900) 48%, transparent);
   --pf-elevation-overlay-shadow: 0 24px 60px
@@ -372,6 +405,22 @@
   --pf-utility-btn-danger-text: var(--color-semantic-status-danger-foreground);
   --pf-utility-btn-danger-bg-hover: var(--color-danger-100);
 
+  /* Kbd aliases */
+  --pf-kbd-bg: var(--color-semantic-background-subtle);
+  --pf-kbd-border: var(--color-semantic-border-default);
+  --pf-kbd-text: var(--color-semantic-text-default);
+
+  /* Popover aliases */
+  --pf-popover-bg: var(--color-semantic-background-default);
+  --pf-popover-border: var(--color-semantic-border-default);
+  --pf-popover-text: var(--color-semantic-text-default);
+
+  /* AvatarGroup aliases */
+  --pf-avatar-group-ring: var(--color-semantic-background-default);
+  --pf-avatar-group-overflow-bg: var(--color-semantic-background-subtle);
+  /* default (not muted) text: muted on the subtle chip was only 4.34:1 in light */
+  --pf-avatar-group-overflow-text: var(--color-semantic-text-default);
+
   /* Accordion aliases */
   --pf-accordion-border: var(--color-semantic-border-default);
   --pf-accordion-trigger-text: var(--color-semantic-text-default);
@@ -484,6 +533,21 @@
   --pf-datepicker-focus-border: var(--color-semantic-action-primary);
   --pf-datepicker-invalid-border: var(--color-semantic-status-danger-border);
 
+  /* Date range picker aliases */
+  --pf-daterange-bg: var(--pf-datepicker-bg);
+  --pf-daterange-bg-subtle: var(--pf-datepicker-bg-subtle);
+  --pf-daterange-border: var(--pf-datepicker-border);
+  --pf-daterange-border-strong: var(--pf-datepicker-border-strong);
+  --pf-daterange-text: var(--pf-datepicker-text);
+  --pf-daterange-text-muted: var(--pf-datepicker-text-muted);
+  --pf-daterange-focus-ring: var(--pf-focus-ring);
+  --pf-daterange-invalid-border: var(--color-semantic-status-danger-border);
+  --pf-daterange-menu-bg: var(--pf-surface-bg);
+  --pf-daterange-menu-border: var(--pf-surface-border-strong);
+  /* brand-600 vs white popover = 6.25:1 non-text; white text on brand-600 = 6.25:1 text */
+  --pf-daterange-range-bg: var(--color-brand-600);
+  --pf-daterange-range-text: var(--color-base-white);
+
   /* BadgeGroup aliases */
   --pf-badgegroup-gray-100: var(--color-gray-100);
   --pf-badgegroup-gray-200: var(--color-gray-200);
@@ -760,6 +824,10 @@
   /* Calendar — same border-default contrast issue as TreeView */
   --pf-calendar-border: var(--color-semantic-border-strong);
 
+  /* Dark mode: brand-400 vs gray-800 = 4.08:1 non-text; gray-900 text on brand-400 = 5.58:1 text */
+  --pf-daterange-range-bg: var(--color-brand-400);
+  --pf-daterange-range-text: var(--color-gray-900);
+
   /* GaugeChart — track uses background-subtle (gray-700) which is 1.72:1 against gray-900 */
   --pf-gauge-track-color: var(--color-semantic-border-strong);
 
@@ -1110,6 +1178,32 @@ body {
 .pf-avatar__status--offline {
   background: var(--pf-avatar-status-offline);
 }
+.pf-avatar-group {
+  display: inline-flex;
+  align-items: center;
+  /* Overlap amount between avatars */
+  --pf-avatar-group-overlap: 8px;
+}
+
+.pf-avatar-group--lg,
+.pf-avatar-group--xl {
+  --pf-avatar-group-overlap: 12px;
+}
+
+.pf-avatar-group__item {
+  position: relative;
+  /* Ring in the surface color so overlapping avatars stay visually separated */
+  box-shadow: 0 0 0 2px var(--pf-avatar-group-ring);
+}
+
+.pf-avatar-group__item + .pf-avatar-group__item {
+  margin-inline-start: calc(-1 * var(--pf-avatar-group-overlap));
+}
+
+.pf-avatar-group__overflow {
+  background: var(--pf-avatar-group-overflow-bg);
+  color: var(--pf-avatar-group-overflow-text);
+}
 .pf-button {
   align-items: center;
   border: 1px solid transparent;
@@ -1203,6 +1297,231 @@ body {
     animation-iteration-count: 1;
   }
 }
+/* ── Backdrop ─────────────────────────────────────────────────────────────── */
+
+.pf-command__backdrop {
+  animation: pf-command-backdrop-in var(--pf-transition-fast);
+  background: var(--pf-overlay-backdrop);
+  inset: 0;
+  position: fixed;
+  z-index: 1100;
+}
+
+.pf-command__backdrop--exiting {
+  animation: pf-command-backdrop-out var(--pf-transition-fast) forwards;
+}
+
+@keyframes pf-command-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes pf-command-backdrop-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ── Dialog ───────────────────────────────────────────────────────────────── */
+
+.pf-command {
+  animation: pf-command-in var(--pf-transition-fast) var(--easing-decelerate);
+  background: var(--pf-command-bg);
+  border: 1px solid var(--pf-command-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--pf-elevation-overlay-shadow);
+  display: flex;
+  flex-direction: column;
+  left: 50%;
+  max-height: min(560px, 80vh);
+  max-width: 560px;
+  overflow: hidden;
+  position: fixed;
+  top: 12%;
+  transform: translateX(-50%);
+  width: calc(100vw - var(--space-8));
+  z-index: 1101;
+}
+
+.pf-command--exiting {
+  animation: pf-command-out var(--pf-transition-fast) var(--easing-accelerate) forwards;
+}
+
+@keyframes pf-command-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-8px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+@keyframes pf-command-out {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-8px) scale(0.97);
+  }
+}
+
+/* ── Search bar ───────────────────────────────────────────────────────────── */
+
+.pf-command__search {
+  align-items: center;
+  border-block-end: 1px solid var(--pf-command-border);
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+}
+
+.pf-command__search-icon {
+  color: var(--pf-command-text-muted);
+  flex-shrink: 0;
+  font-size: 1.1rem;
+}
+
+.pf-command__input {
+  background: transparent;
+  border: none;
+  color: var(--pf-command-text);
+  flex: 1;
+  font-size: var(--font-size-md);
+  min-width: 0;
+  outline: none;
+}
+
+.pf-command__input::placeholder {
+  color: var(--pf-command-text-muted);
+}
+
+.pf-command__esc-hint {
+  background: var(--pf-command-shortcut-bg);
+  border: 1px solid var(--pf-command-border);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-sm);
+  color: var(--pf-command-text-muted);
+  flex-shrink: 0;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  padding: 1px 6px;
+}
+
+/* ── Results list ─────────────────────────────────────────────────────────── */
+
+.pf-command__list {
+  overflow-y: auto;
+  padding: var(--space-2);
+}
+
+.pf-command__empty {
+  color: var(--pf-command-text-muted);
+  font-size: var(--font-size-sm);
+  margin: 0;
+  padding: var(--space-6) var(--space-4);
+  text-align: center;
+}
+
+.pf-command__group-label {
+  color: var(--pf-command-text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.04em;
+  margin: 0;
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  text-transform: uppercase;
+}
+
+/* ── Items ────────────────────────────────────────────────────────────────── */
+
+.pf-command__item {
+  align-items: center;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  transition: background 0.1s;
+}
+
+.pf-command__item--active {
+  background: var(--pf-command-item-active-bg);
+}
+
+.pf-command__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.pf-command__item-icon {
+  align-items: center;
+  color: var(--pf-command-text-muted);
+  display: inline-flex;
+  flex-shrink: 0;
+  font-size: 1rem;
+  height: 20px;
+  justify-content: center;
+  width: 20px;
+}
+
+.pf-command__item--active .pf-command__item-icon {
+  color: var(--pf-command-item-active-text);
+}
+
+.pf-command__item-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.pf-command__item-label {
+  color: var(--pf-command-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-command__item--active .pf-command__item-label {
+  color: var(--pf-command-item-active-text);
+}
+
+.pf-command__item-description {
+  color: var(--pf-command-text-muted);
+  font-size: var(--font-size-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-command__item--active .pf-command__item-description {
+  color: var(--pf-command-item-active-text);
+  opacity: 0.85;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-command__backdrop,
+  .pf-command__backdrop--exiting,
+  .pf-command,
+  .pf-command--exiting {
+    animation: none;
+  }
+}
 .pf-badge-group {
   align-items: center;
   display: inline-flex;
@@ -2063,7 +2382,6 @@ body {
 
 .pf-calendar__day--outside {
   color: var(--pf-calendar-text-muted);
-  opacity: 0.55;
 }
 
 .pf-calendar__day--today {
@@ -2367,105 +2685,260 @@ body {
   white-space: nowrap;
   width: 1px;
 }
-.pf-content-divider {
-  align-items: center;
-  color: var(--pf-content-divider-text);
-  display: flex;
-  gap: var(--space-3);
-  width: 100%;
-}
-
-.pf-content-divider--inset {
-  padding-inline-start: var(--space-2);
-  padding-inline-end: var(--space-2);
-}
-
-.pf-content-divider__line {
-  background: var(--pf-content-divider-line);
-  display: block;
-  flex: 1;
-  height: 1px;
-}
-
-.pf-content-divider__label {
-  color: var(--pf-content-divider-text);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  line-height: 1;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.pf-content-divider--vertical {
-  align-self: stretch;
-  background: var(--pf-content-divider-line);
-  display: inline-block;
-  flex: 0 0 auto;
-  height: auto;
-  min-height: 100%;
-  width: 1px;
-}
-.pf-date-picker {
+.pf-combobox {
   position: relative;
 }
 
-.pf-date-picker__trigger {
+.pf-combobox__control {
   align-items: center;
-  background: var(--pf-datepicker-bg);
-  border: 1px solid var(--pf-datepicker-border);
+  background: var(--pf-combobox-bg);
+  border: 1px solid var(--pf-combobox-border);
   border-radius: var(--radius-md);
-  color: var(--pf-datepicker-text);
-  cursor: pointer;
-  display: inline-flex;
-  flex: 1;
-  font-size: var(--font-size-sm);
+  display: flex;
   gap: var(--space-2);
-  justify-content: space-between;
   min-height: 40px;
-  min-width: 0;
   padding: 0 var(--space-3);
-  text-align: start;
-}
-
-.pf-date-picker__trigger:hover:not(:disabled) {
-  border-color: var(--pf-datepicker-border-strong);
+  transition:
+    border 0.2s,
+    box-shadow 0.2s;
 }
 
-.pf-date-picker__trigger:focus-visible {
-  box-shadow: var(--pf-datepicker-focus-ring, var(--pf-focus-ring));
-  outline: none;
+.pf-combobox__control:focus-within {
+  border-color: var(--pf-combobox-focus-border);
+  box-shadow: var(--pf-combobox-focus-ring, var(--pf-focus-ring));
 }
 
-.pf-date-picker__trigger:disabled {
-  background: var(--pf-datepicker-bg-subtle);
-  color: var(--pf-datepicker-text-muted);
-  cursor: not-allowed;
+.pf-combobox__control--invalid {
+  border-color: var(--pf-combobox-invalid-border);
 }
 
-.pf-date-picker__trigger--invalid {
-  border-color: var(--pf-datepicker-invalid-border);
+.pf-combobox__input {
+  background: transparent;
+  border: none;
+  color: var(--pf-combobox-text);
+  flex: 1;
+  font: inherit;
+  min-width: 0;
+  outline: none;
+  padding: 0;
 }
 
-.pf-date-picker__value {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.pf-combobox__input::placeholder {
+  color: var(--pf-combobox-placeholder);
 }
 
-.pf-date-picker__value--placeholder {
-  color: var(--pf-datepicker-text-muted);
+.pf-combobox__input:disabled {
+  cursor: not-allowed;
 }
 
-.pf-date-picker__control-row {
-  align-items: center;
-  display: flex;
-  gap: var(--space-1);
+.pf-combobox__control:has(.pf-combobox__input:disabled) {
+  background: var(--pf-control-bg-disabled);
+  border-color: var(--pf-control-border-disabled);
+  color: var(--pf-control-text-disabled);
+  opacity: 0.6;
 }
 
-.pf-date-picker__icon-button {
+.pf-combobox__icon {
   align-items: center;
-  background: transparent;
-  border: 0;
+  color: var(--pf-combobox-text);
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 20px;
+  justify-content: center;
+  transform-origin: center;
+  transition: transform var(--pf-transition-fast);
+  width: 20px;
+}
+
+.pf-combobox__icon svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+.pf-combobox__icon--open {
+  transform: rotate(180deg);
+}
+
+.pf-combobox__menu {
+  animation: pf-combobox-menu-in var(--duration-fast) var(--easing-decelerate);
+  background: var(--pf-combobox-menu-bg);
+  border: 1px solid var(--pf-combobox-menu-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-combobox-elevation-popover-shadow, var(--pf-elevation-popover-shadow));
+  list-style: none;
+  margin: 0;
+  max-height: 220px;
+  overflow: auto;
+  padding: var(--space-1);
+  position: fixed;
+  transform-origin: top center;
+  z-index: 1000;
+}
+
+.pf-combobox__menu--exiting {
+  animation: pf-combobox-menu-out var(--duration-fast) var(--easing-accelerate) forwards;
+}
+
+@keyframes pf-combobox-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+
+@keyframes pf-combobox-menu-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
+}
+
+.pf-combobox__option {
+  border-radius: var(--radius-sm);
+  color: var(--pf-combobox-text);
+  cursor: pointer;
+  padding: var(--space-2) var(--space-3);
+}
+
+.pf-combobox__option--active {
+  background: var(--pf-combobox-option-active-bg);
+  color: var(--pf-combobox-option-active-text);
+}
+
+.pf-combobox__option--selected {
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-combobox__option--disabled {
+  background: transparent;
+  color: var(--pf-combobox-placeholder);
+  cursor: not-allowed;
+}
+
+.pf-combobox__empty {
+  color: var(--pf-combobox-placeholder);
+  padding: var(--space-2) var(--space-3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-combobox__control,
+  .pf-combobox__icon {
+    transition: none;
+  }
+
+  .pf-combobox__menu,
+  .pf-combobox__menu--exiting {
+    animation: none;
+  }
+}
+.pf-content-divider {
+  align-items: center;
+  color: var(--pf-content-divider-text);
+  display: flex;
+  gap: var(--space-3);
+  width: 100%;
+}
+
+.pf-content-divider--inset {
+  padding-inline-start: var(--space-2);
+  padding-inline-end: var(--space-2);
+}
+
+.pf-content-divider__line {
+  background: var(--pf-content-divider-line);
+  display: block;
+  flex: 1;
+  height: 1px;
+}
+
+.pf-content-divider__label {
+  color: var(--pf-content-divider-text);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.pf-content-divider--vertical {
+  align-self: stretch;
+  background: var(--pf-content-divider-line);
+  display: inline-block;
+  flex: 0 0 auto;
+  height: auto;
+  min-height: 100%;
+  width: 1px;
+}
+.pf-date-picker {
+  position: relative;
+}
+
+.pf-date-picker__trigger {
+  align-items: center;
+  background: var(--pf-datepicker-bg);
+  border: 1px solid var(--pf-datepicker-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-datepicker-text);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 1;
+  font-size: var(--font-size-sm);
+  gap: var(--space-2);
+  justify-content: space-between;
+  min-height: 40px;
+  min-width: 0;
+  padding: 0 var(--space-3);
+  text-align: start;
+}
+
+.pf-date-picker__trigger:hover:not(:disabled) {
+  border-color: var(--pf-datepicker-border-strong);
+}
+
+.pf-date-picker__trigger:focus-visible {
+  box-shadow: var(--pf-datepicker-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-date-picker__trigger:disabled {
+  background: var(--pf-datepicker-bg-subtle);
+  color: var(--pf-datepicker-text-muted);
+  cursor: not-allowed;
+}
+
+.pf-date-picker__trigger--invalid {
+  border-color: var(--pf-datepicker-invalid-border);
+}
+
+.pf-date-picker__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-date-picker__value--placeholder {
+  color: var(--pf-datepicker-text-muted);
+}
+
+.pf-date-picker__control-row {
+  align-items: center;
+  display: flex;
+  gap: var(--space-1);
+}
+
+.pf-date-picker__icon-button {
+  align-items: center;
+  background: transparent;
+  border: 0;
   border-radius: var(--radius-sm);
   color: var(--pf-datepicker-text-muted);
   cursor: pointer;
@@ -2496,6 +2969,264 @@ body {
 .pf-date-picker__popover .pf-field {
   margin: 0;
 }
+.pf-daterange {
+  position: relative;
+}
+
+.pf-daterange__control-row {
+  align-items: center;
+  display: flex;
+  gap: var(--space-1);
+}
+
+/* ── Trigger button ───────────────────────────────────────────────────────── */
+
+.pf-daterange__trigger {
+  align-items: center;
+  background: var(--pf-daterange-bg);
+  border: 1px solid var(--pf-daterange-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-daterange-text);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 1;
+  font-size: var(--font-size-sm);
+  gap: var(--space-2);
+  justify-content: space-between;
+  min-height: 40px;
+  min-width: 0;
+  padding: 0 var(--space-3);
+  text-align: start;
+  transition: border 0.2s;
+}
+
+.pf-daterange__trigger:hover:not(:disabled) {
+  border-color: var(--pf-daterange-border-strong);
+}
+
+.pf-daterange__trigger:focus-visible {
+  box-shadow: var(--pf-daterange-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-daterange__trigger:disabled {
+  background: var(--pf-daterange-bg-subtle);
+  color: var(--pf-daterange-text-muted);
+  cursor: not-allowed;
+}
+
+.pf-daterange__trigger--invalid {
+  border-color: var(--pf-daterange-invalid-border);
+}
+
+.pf-daterange__value {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.pf-daterange__value--placeholder {
+  color: var(--pf-daterange-text-muted);
+}
+
+.pf-daterange__separator {
+  color: var(--pf-daterange-text-muted);
+}
+
+/* ── Popover ──────────────────────────────────────────────────────────────── */
+
+.pf-daterange__popover {
+  background: var(--pf-daterange-menu-bg);
+  border: 1px solid var(--pf-daterange-menu-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--pf-elevation-popover-shadow);
+  color: var(--pf-calendar-text);
+  padding: var(--space-4);
+  position: fixed;
+  z-index: 999;
+}
+
+.pf-daterange__hint {
+  color: var(--pf-daterange-text-muted);
+  font-size: var(--font-size-xs);
+  margin: 0 0 var(--space-3);
+}
+
+/* ── Two-month layout ─────────────────────────────────────────────────────── */
+
+.pf-daterange__months {
+  display: grid;
+  gap: var(--space-4);
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .pf-daterange__months {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+/* ── Individual calendar panel ────────────────────────────────────────────── */
+
+.pf-daterange__calendar {
+  background: var(--pf-calendar-bg);
+  color: var(--pf-calendar-text);
+  display: grid;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.pf-daterange__cal-header {
+  align-items: center;
+  display: grid;
+  grid-template-columns: 28px 1fr 28px;
+}
+
+.pf-daterange__cal-title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  text-align: center;
+}
+
+/* Nav buttons — desktop right-panel hides its own nav (left panel drives both) */
+.pf-daterange__nav {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-calendar-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  height: 28px;
+  justify-content: center;
+  padding: 0;
+  width: 28px;
+}
+
+.pf-daterange__nav:hover:not(:disabled) {
+  background: var(--pf-calendar-bg-subtle);
+  color: var(--pf-calendar-text);
+}
+
+.pf-daterange__nav:focus-visible {
+  box-shadow: var(--pf-calendar-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-daterange__nav svg {
+  display: block;
+  height: 14px;
+  width: 14px;
+}
+
+@media (min-width: 640px) {
+  .pf-daterange__cal-header--hide-nav-desktop .pf-daterange__nav {
+    pointer-events: none;
+    visibility: hidden;
+  }
+}
+
+/* ── Grid & weekday labels ────────────────────────────────────────────────── */
+
+.pf-daterange__grid {
+  display: grid;
+  gap: var(--space-1);
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.pf-daterange__weekday {
+  color: var(--pf-calendar-text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  text-align: center;
+}
+
+/* ── Day cells ────────────────────────────────────────────────────────────── */
+
+.pf-daterange__day,
+.pf-daterange__day-empty {
+  align-items: center;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  justify-content: center;
+}
+
+.pf-daterange__day {
+  background: transparent;
+  border: 0;
+  color: var(--pf-calendar-text);
+  cursor: pointer;
+}
+
+.pf-daterange__day:hover:not(:disabled):not(.pf-daterange__day--selected):not(
+    .pf-daterange__day--in-range
+  ) {
+  background: var(--pf-calendar-bg-subtle);
+}
+
+.pf-daterange__day--outside {
+  color: var(--pf-calendar-text-muted);
+}
+
+.pf-daterange__day--today {
+  background: var(--pf-calendar-today-bg);
+  border: 1.5px solid var(--pf-calendar-today-border);
+}
+
+.pf-daterange__day--selected {
+  background: var(--pf-calendar-selected-bg);
+  color: var(--pf-calendar-selected-text);
+  font-weight: var(--font-weight-semibold);
+}
+
+.pf-daterange__day--selected:hover:not(:disabled) {
+  background: var(--pf-calendar-selected-bg-hover);
+  color: var(--pf-calendar-selected-text);
+}
+
+.pf-daterange__day:disabled {
+  color: var(--pf-calendar-text-muted);
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+/* ── Range highlight ──────────────────────────────────────────────────────── */
+
+.pf-daterange__day--in-range {
+  background: var(--pf-daterange-range-bg);
+  border-radius: 0;
+  color: var(--pf-daterange-range-text);
+}
+
+/* In-range overrides today indicator bg (today border still shows through) */
+.pf-daterange__day--today.pf-daterange__day--in-range {
+  background: var(--pf-daterange-range-bg);
+  color: var(--pf-daterange-range-text);
+}
+
+/* Selected caps already have the right bg/color from --selected;
+   just shape the radius to connect flush with the range band. */
+.pf-daterange__day--range-start:not(.pf-daterange__day--range-end) {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.pf-daterange__day--range-end:not(.pf-daterange__day--range-start) {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-daterange__trigger {
+    transition: none;
+  }
+}
 .pf-empty-state {
   align-items: center;
   display: flex;
@@ -2934,6 +3665,31 @@ body {
   background: color-mix(in srgb, var(--pf-inline-cta-warning-bg) 60%, var(--color-base-white));
   border-color: var(--pf-inline-cta-warning-border);
 }
+.pf-kbd {
+  align-items: center;
+  background: var(--pf-kbd-bg);
+  border: 1px solid var(--pf-kbd-border);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-sm);
+  color: var(--pf-kbd-text);
+  display: inline-flex;
+  font-family: var(--font-family-mono, ui-monospace, monospace);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.pf-kbd--md {
+  font-size: var(--font-size-xs);
+  min-width: 1.5em;
+  padding: 3px 6px;
+}
+
+.pf-kbd--sm {
+  font-size: var(--font-size-2xs);
+  min-width: 1.35em;
+  padding: 2px 5px;
+}
 .pf-gauge {
   position: relative;
   display: inline-flex;
@@ -2999,6 +3755,10 @@ body {
 }
 .pf-heatmap {
   display: inline-block;
+  max-width: 100%;
+  /* A full year is wider than small screens — scroll horizontally instead of
+     overflowing the page. */
+  overflow-x: auto;
   font-family: var(--font-family-sans);
 }
 
@@ -4046,6 +4806,104 @@ body {
   color: var(--pf-notification-text);
   outline: none;
 }
+.pf-numberinput {
+  align-items: stretch;
+  background: var(--pf-numberinput-bg);
+  border: 1px solid var(--pf-numberinput-border);
+  border-radius: var(--radius-md);
+  display: inline-flex;
+  min-height: 40px;
+  overflow: hidden;
+  width: 100%;
+  transition:
+    border 0.2s,
+    box-shadow 0.2s;
+}
+
+.pf-numberinput:focus-within {
+  border-color: var(--pf-numberinput-focus-border);
+  box-shadow: var(--pf-numberinput-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-numberinput--invalid {
+  border-color: var(--pf-numberinput-invalid-border);
+}
+
+.pf-numberinput__input {
+  background: transparent;
+  border: none;
+  color: var(--pf-numberinput-text);
+  flex: 1;
+  font: inherit;
+  min-width: 0;
+  outline: none;
+  padding: 0 var(--space-3);
+  text-align: center;
+  width: 100%;
+}
+
+.pf-numberinput__input::placeholder {
+  color: var(--pf-numberinput-placeholder);
+}
+
+.pf-numberinput__input:disabled {
+  cursor: not-allowed;
+}
+
+.pf-numberinput:has(.pf-numberinput__input:disabled) {
+  background: var(--pf-control-bg-disabled);
+  border-color: var(--pf-control-border-disabled);
+  color: var(--pf-control-text-disabled);
+  opacity: 0.6;
+}
+
+.pf-numberinput__step {
+  align-items: center;
+  align-self: stretch;
+  background: var(--pf-numberinput-step-bg);
+  border: none;
+  color: var(--pf-numberinput-step-text);
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  padding: 0;
+  width: 40px;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+
+.pf-numberinput__step:hover:not(:disabled) {
+  background: var(--pf-numberinput-step-hover-bg);
+  color: var(--pf-numberinput-step-hover-text);
+}
+
+.pf-numberinput__step:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.pf-numberinput__step--decrement {
+  border-inline-end: 1px solid var(--pf-numberinput-border);
+}
+
+.pf-numberinput__step--increment {
+  border-inline-start: 1px solid var(--pf-numberinput-border);
+}
+
+.pf-numberinput__step svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-numberinput,
+  .pf-numberinput__step {
+    transition: none;
+  }
+}
 .pf-page-header {
   display: grid;
   gap: var(--space-4);
@@ -4133,7 +4991,8 @@ body {
 }
 .pf-pagination {
   align-items: center;
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
   gap: var(--space-2);
 }
 
@@ -4149,7 +5008,9 @@ body {
 
 .pf-pagination__list {
   align-items: center;
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   gap: var(--space-2);
   list-style: none;
   margin: 0;
@@ -4347,6 +5208,52 @@ body {
   font-size: var(--font-size-sm);
   font-variant-numeric: tabular-nums;
 }
+.pf-popover {
+  position: fixed;
+  z-index: 1100;
+  max-width: min(360px, calc(100vw - 16px));
+  background: var(--pf-popover-bg);
+  border: 1px solid var(--pf-popover-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-popover-elevation-popover-shadow, var(--pf-elevation-popover-shadow));
+  color: var(--pf-popover-text);
+  padding: var(--space-4);
+  transform-origin: top center;
+  animation: pf-popover-in var(--duration-fast) var(--easing-decelerate);
+}
+
+.pf-popover:focus-visible {
+  outline: none;
+}
+
+@keyframes pf-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.pf-popover--exiting {
+  animation: pf-popover-out var(--duration-fast) var(--easing-accelerate) forwards;
+}
+
+@keyframes pf-popover-out {
+  to {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-popover,
+  .pf-popover--exiting {
+    animation: none;
+  }
+}
 .pf-progress-bar {
   align-items: center;
   display: inline-flex;