@pitchfork-ui/react 0.8.0 → 0.10.0

package/dist/styles.css

@@ -242,6 +242,46 @@
   --pf-command-item-active-bg: var(--color-semantic-action-primary);
   --pf-command-item-active-text: var(--color-semantic-action-primary-text);
 
+  /* Timeline aliases */
+  --pf-timeline-connector: var(--color-semantic-border-default);
+  --pf-timeline-title: var(--color-semantic-text-default);
+  --pf-timeline-timestamp: var(--color-semantic-text-muted);
+  --pf-timeline-description: var(--color-semantic-text-muted);
+  --pf-timeline-default-bg: var(--color-brand-100);
+  --pf-timeline-default-border: var(--color-semantic-action-primary);
+  --pf-timeline-default-icon: var(--color-semantic-action-primary);
+  --pf-timeline-success-bg: var(--color-semantic-status-success-background);
+  --pf-timeline-success-border: var(--color-semantic-status-success-foreground);
+  --pf-timeline-success-icon: var(--color-semantic-status-success-foreground);
+  --pf-timeline-warning-bg: var(--color-semantic-status-warning-background);
+  --pf-timeline-warning-border: var(--color-semantic-status-warning-foreground);
+  --pf-timeline-warning-icon: var(--color-semantic-status-warning-foreground);
+  --pf-timeline-danger-bg: var(--color-semantic-status-danger-background);
+  --pf-timeline-danger-border: var(--color-semantic-status-danger-foreground);
+  --pf-timeline-danger-icon: var(--color-semantic-status-danger-foreground);
+
+  /* Tag input aliases */
+  --pf-taginput-bg: var(--pf-input-bg);
+  --pf-taginput-border: var(--pf-input-border);
+  --pf-taginput-text: var(--pf-input-text);
+  --pf-taginput-placeholder: var(--pf-input-placeholder);
+  --pf-taginput-focus-border: var(--color-semantic-action-primary);
+  --pf-taginput-invalid-border: var(--color-semantic-status-danger-border);
+
+  /* Time picker aliases */
+  --pf-timepicker-bg: var(--pf-input-bg);
+  --pf-timepicker-border: var(--pf-input-border);
+  --pf-timepicker-text: var(--pf-input-text);
+  --pf-timepicker-text-muted: var(--pf-input-placeholder);
+  --pf-timepicker-placeholder: var(--pf-input-placeholder);
+  --pf-timepicker-focus-border: var(--color-semantic-action-primary);
+  --pf-timepicker-invalid-border: var(--color-semantic-status-danger-border);
+  --pf-timepicker-menu-bg: var(--pf-surface-bg);
+  --pf-timepicker-menu-border: var(--pf-surface-border-strong);
+  --pf-timepicker-option-hover-bg: var(--color-semantic-background-subtle);
+  --pf-timepicker-option-active-bg: var(--color-semantic-action-primary);
+  --pf-timepicker-option-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);
@@ -428,6 +468,40 @@
   --pf-accordion-icon: var(--color-semantic-text-muted);
   --pf-accordion-content-text: var(--color-semantic-text-muted);
 
+  /* Context menu aliases */
+  --pf-contextmenu-bg: var(--pf-surface-bg);
+  --pf-contextmenu-border: var(--pf-surface-border-strong);
+  --pf-contextmenu-text: var(--color-semantic-text-default);
+  --pf-contextmenu-text-muted: var(--color-semantic-text-muted);
+  --pf-contextmenu-text-danger: var(--color-semantic-status-danger-foreground);
+  --pf-contextmenu-separator: var(--color-semantic-border-default);
+  --pf-contextmenu-item-active-bg: var(--color-semantic-action-primary);
+  --pf-contextmenu-item-active-text: var(--color-semantic-action-primary-text);
+  /* Solid red works on both themes; white text = 4.83:1 */
+  --pf-contextmenu-danger-active-bg: var(--color-danger-600);
+  --pf-contextmenu-danger-active-text: var(--color-base-white);
+
+  /* Resizable aliases */
+  --pf-resizable-handle-bg: var(--color-semantic-border-default);
+  --pf-resizable-handle-active-bg: var(--color-semantic-action-primary);
+  --pf-resizable-grip: var(--color-semantic-text-muted);
+
+  /* Toolbar aliases */
+  --pf-toolbar-bg: var(--color-semantic-background-default);
+  --pf-toolbar-border: var(--color-semantic-border-default);
+  --pf-toolbar-separator: var(--color-semantic-border-default);
+
+  /* Scroll area aliases */
+  --pf-scrollarea-thumb: var(--color-semantic-border-strong);
+  --pf-scrollarea-thumb-hover: var(--color-semantic-text-muted);
+
+  /* Collapsible aliases */
+  --pf-collapsible-border: var(--color-semantic-border-default);
+  --pf-collapsible-trigger-text: var(--color-semantic-text-default);
+  --pf-collapsible-trigger-hover-bg: var(--color-semantic-background-subtle);
+  --pf-collapsible-icon: var(--color-semantic-text-muted);
+  --pf-collapsible-content-text: var(--color-semantic-text-muted);
+
   /* Heatmap aliases */
   --pf-heatmap-color: var(--color-semantic-action-primary);
   --pf-heatmap-empty: var(--color-semantic-background-subtle);
@@ -809,6 +883,9 @@
   --pf-badge-brand-background: var(--color-brand-900);
   --pf-badge-brand-foreground: var(--color-brand-300);
 
+  /* Timeline — brand-100 default marker fill is near-white; darken for dark mode */
+  --pf-timeline-default-bg: var(--color-brand-900);
+
   --pf-badgegroup-brand-100: var(--color-brand-900);
   --pf-badgegroup-brand-300: var(--color-brand-700);
   --pf-badgegroup-brand-700: var(--color-brand-300);
@@ -1522,6 +1599,128 @@ body {
     animation: none;
   }
 }
+.pf-context-menu {
+  display: contents;
+}
+
+.pf-context-menu__menu {
+  animation: pf-context-menu-in var(--duration-fast) var(--easing-decelerate);
+  background: var(--pf-contextmenu-bg);
+  border: 1px solid var(--pf-contextmenu-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-elevation-popover-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 180px;
+  outline: none;
+  padding: var(--space-1);
+  z-index: 1100;
+}
+
+.pf-context-menu__menu--exiting {
+  animation: pf-context-menu-out var(--duration-fast) var(--easing-accelerate) forwards;
+}
+
+@keyframes pf-context-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes pf-context-menu-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+.pf-context-menu__item {
+  align-items: center;
+  background: var(--pf-contextmenu-bg);
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-contextmenu-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  text-align: start;
+  width: 100%;
+}
+
+.pf-context-menu__item--active {
+  background: var(--pf-contextmenu-item-active-bg);
+  color: var(--pf-contextmenu-item-active-text);
+}
+
+.pf-context-menu__item:disabled {
+  color: var(--pf-contextmenu-text-muted);
+  cursor: not-allowed;
+}
+
+.pf-context-menu__item--destructive {
+  color: var(--pf-contextmenu-text-danger);
+}
+
+.pf-context-menu__item--destructive.pf-context-menu__item--active {
+  background: var(--pf-contextmenu-danger-active-bg);
+  color: var(--pf-contextmenu-danger-active-text);
+}
+
+.pf-context-menu__item-icon {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 1rem;
+  justify-content: center;
+  width: 1rem;
+}
+
+.pf-context-menu__item-icon svg {
+  display: block;
+  height: 1rem;
+  width: 1rem;
+}
+
+.pf-context-menu__item-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.pf-context-menu__item-shortcut {
+  color: var(--pf-contextmenu-text-muted);
+  flex-shrink: 0;
+  font-family: var(--font-family-mono, ui-monospace, monospace);
+  font-size: var(--font-size-xs);
+}
+
+.pf-context-menu__item--active .pf-context-menu__item-shortcut {
+  color: inherit;
+}
+
+.pf-context-menu__separator {
+  background: var(--pf-contextmenu-separator);
+  height: 1px;
+  margin: var(--space-1) 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-context-menu__menu,
+  .pf-context-menu__menu--exiting {
+    animation: none;
+  }
+}
 .pf-badge-group {
   align-items: center;
   display: inline-flex;
@@ -2685,6 +2884,92 @@ body {
   white-space: nowrap;
   width: 1px;
 }
+.pf-collapsible {
+  border: 1px solid var(--pf-collapsible-border);
+  border-radius: var(--radius-md);
+}
+
+.pf-collapsible__trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--pf-collapsible-trigger-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  gap: var(--space-2);
+  justify-content: space-between;
+  padding: var(--space-3);
+  text-align: start;
+  width: 100%;
+}
+
+.pf-collapsible__trigger:hover:not(:disabled) {
+  background: var(--pf-collapsible-trigger-hover-bg);
+}
+
+.pf-collapsible__trigger:focus-visible {
+  box-shadow: var(--pf-collapsible-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-collapsible__trigger:disabled {
+  color: var(--pf-control-text-disabled);
+  cursor: not-allowed;
+}
+
+.pf-collapsible__label {
+  min-width: 0;
+}
+
+.pf-collapsible__icon {
+  align-items: center;
+  color: var(--pf-collapsible-icon);
+  display: inline-flex;
+  flex-shrink: 0;
+  transition: transform var(--pf-transition-fast);
+}
+
+.pf-collapsible__icon svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+.pf-collapsible--open .pf-collapsible__icon {
+  transform: rotate(180deg);
+}
+
+/* Height animation via the grid-template-rows 0fr → 1fr technique. */
+.pf-collapsible__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--pf-transition-medium);
+}
+
+.pf-collapsible__panel--open {
+  grid-template-rows: 1fr;
+}
+
+.pf-collapsible__content {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.pf-collapsible__content-inner {
+  border-top: 1px solid var(--pf-collapsible-border);
+  color: var(--pf-collapsible-content-text);
+  padding: var(--space-3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-collapsible__panel,
+  .pf-collapsible__icon {
+    transition: none;
+  }
+}
 .pf-combobox {
   position: relative;
 }
@@ -4224,10 +4509,11 @@ body {
 .pf-modal {
   background: var(--pf-modal-bg);
   border: 1px solid color-mix(in srgb, var(--pf-modal-border) 85%, transparent);
-  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  border-radius: var(--radius-lg);
   box-shadow: var(--pf-modal-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));
   color: var(--pf-modal-text);
-  display: grid;
+  display: flex;
+  flex-direction: column;
   max-height: 92vh;
   overflow: hidden;
   width: 100%;
@@ -4235,7 +4521,6 @@ body {
 
 @media (min-width: 768px) {
   .pf-modal {
-    border-radius: var(--radius-lg);
     max-height: min(90vh, 720px);
   }
 }
@@ -4260,6 +4545,7 @@ body {
 .pf-modal__footer {
   align-items: start;
   display: flex;
+  flex-shrink: 0;
   gap: var(--space-3);
   justify-content: space-between;
   padding: var(--space-3);
@@ -4284,7 +4570,9 @@ body {
 
 .pf-modal__body {
   display: grid;
+  flex: 1 1 auto;
   gap: var(--space-4);
+  min-height: 0;
   overflow-y: auto;
   padding: var(--space-3);
 }
@@ -5819,6 +6107,85 @@ body {
   color: var(--pf-rating-badge-reviews);
   font-weight: var(--font-weight-medium);
 }
+.pf-resizable {
+  display: flex;
+  overflow: hidden;
+}
+
+.pf-resizable--horizontal {
+  flex-direction: row;
+}
+
+.pf-resizable--vertical {
+  flex-direction: column;
+}
+
+.pf-resizable__panel {
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+}
+
+.pf-resizable__panel--fill {
+  flex: 1 1 0;
+}
+
+/* ── Handle ───────────────────────────────────────────────────────────────── */
+
+.pf-resizable__handle {
+  align-items: center;
+  background: var(--pf-resizable-handle-bg);
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  position: relative;
+  touch-action: none;
+  transition: background var(--pf-transition-fast);
+}
+
+.pf-resizable__handle:hover,
+.pf-resizable__handle:focus-visible {
+  background: var(--pf-resizable-handle-active-bg);
+}
+
+.pf-resizable__handle:focus-visible {
+  outline: none;
+  box-shadow: var(--pf-resizable-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-resizable--horizontal .pf-resizable__handle {
+  cursor: col-resize;
+  width: var(--pf-resizable-handle-size, 6px);
+}
+
+.pf-resizable--vertical .pf-resizable__handle {
+  cursor: row-resize;
+  height: var(--pf-resizable-handle-size, 6px);
+}
+
+/* Grip affordance (dots/line) centered in the handle. */
+.pf-resizable__grip {
+  background: var(--pf-resizable-grip);
+  border-radius: var(--radius-full);
+}
+
+.pf-resizable--horizontal .pf-resizable__grip {
+  height: 24px;
+  width: 2px;
+}
+
+.pf-resizable--vertical .pf-resizable__grip {
+  height: 2px;
+  width: 24px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-resizable__handle {
+    transition: none;
+  }
+}
 .pf-rte {
   background: var(--pf-rte-bg);
   border: 1px solid var(--pf-rte-border);
@@ -5913,6 +6280,60 @@ body {
   margin: var(--space-2) 0 0;
   text-align: end;
 }
+.pf-scroll-area {
+  /* Standard scrollbar styling (Firefox + modern browsers). */
+  scrollbar-color: var(--pf-scrollarea-thumb) transparent;
+  scrollbar-width: thin;
+  /* Reserve a gutter so the scrollbar never overlays (and obscures) content. */
+  scrollbar-gutter: stable;
+}
+
+.pf-scroll-area:focus-visible {
+  border-radius: var(--radius-sm);
+  box-shadow: var(--pf-scrollarea-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-scroll-area--vertical {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.pf-scroll-area--horizontal {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.pf-scroll-area--both {
+  overflow: auto;
+}
+
+/* WebKit / Blink scrollbar styling. */
+.pf-scroll-area::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+.pf-scroll-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.pf-scroll-area::-webkit-scrollbar-thumb {
+  background: var(--pf-scrollarea-thumb);
+  /* Transparent border + padding-box clip insets the thumb so it reads slimmer. */
+  background-clip: padding-box;
+  border: 2px solid transparent;
+  border-radius: var(--radius-full);
+}
+
+.pf-scroll-area::-webkit-scrollbar-thumb:hover {
+  background: var(--pf-scrollarea-thumb-hover);
+  background-clip: padding-box;
+}
+
+.pf-scroll-area::-webkit-scrollbar-corner {
+  background: transparent;
+}
 .pf-section-footer {
   align-items: flex-start;
   display: flex;
@@ -6777,6 +7198,78 @@ body {
   height: 12px;
   width: 12px;
 }
+.pf-taginput {
+  background: var(--pf-taginput-bg);
+  border: 1px solid var(--pf-taginput-border);
+  border-radius: var(--radius-md);
+  cursor: text;
+  min-height: 40px;
+  padding: var(--space-1);
+  transition:
+    border 0.2s,
+    box-shadow 0.2s;
+}
+
+.pf-taginput:focus-within {
+  border-color: var(--pf-taginput-focus-border);
+  box-shadow: var(--pf-taginput-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-taginput--invalid {
+  border-color: var(--pf-taginput-invalid-border);
+}
+
+.pf-taginput--disabled {
+  background: var(--pf-control-bg-disabled);
+  border-color: var(--pf-control-border-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pf-taginput__tags {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-taginput__tag {
+  display: inline-flex;
+}
+
+.pf-taginput__field {
+  display: inline-flex;
+  flex: 1;
+  min-width: 8ch;
+}
+
+.pf-taginput__input {
+  background: transparent;
+  border: none;
+  color: var(--pf-taginput-text);
+  flex: 1;
+  font: inherit;
+  min-width: 0;
+  outline: none;
+  padding: var(--space-1) var(--space-2);
+}
+
+.pf-taginput__input::placeholder {
+  color: var(--pf-taginput-placeholder);
+}
+
+.pf-taginput__input:disabled {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-taginput {
+    transition: none;
+  }
+}
 .pf-table {
   background: var(--pf-table-bg);
   border: 1px solid var(--pf-table-border);
@@ -7093,6 +7586,350 @@ body {
 .pf-textarea--invalid {
   border-color: var(--pf-textarea-invalid-border);
 }
+.pf-timeline {
+  display: grid;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-timeline__item {
+  /* Shared line height for the title; markers center themselves on it. */
+  --pf-timeline-line: 1.375rem;
+  --pf-timeline-marker-size: 16px;
+  column-gap: var(--space-3);
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+/* ── Rail (marker + connector) ────────────────────────────────────────────── */
+
+.pf-timeline__rail {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.pf-timeline__marker {
+  align-items: center;
+  background: var(--pf-timeline-marker-bg);
+  border: 2px solid var(--pf-timeline-marker-border);
+  border-radius: var(--radius-full);
+  color: var(--pf-timeline-marker-icon);
+  display: inline-flex;
+  flex-shrink: 0;
+  height: var(--pf-timeline-marker-size);
+  justify-content: center;
+  /* Vertically center the marker on the title's first line. */
+  margin-top: calc((var(--pf-timeline-line) - var(--pf-timeline-marker-size)) / 2);
+  width: var(--pf-timeline-marker-size);
+}
+
+/* Markers carrying an icon are larger to fit it. */
+.pf-timeline__marker:has(.pf-timeline__marker-icon) {
+  --pf-timeline-marker-size: 28px;
+}
+
+.pf-timeline__marker-icon {
+  align-items: center;
+  display: inline-flex;
+  font-size: 0.8rem;
+  justify-content: center;
+}
+
+.pf-timeline__marker-icon svg {
+  display: block;
+  height: 14px;
+  width: 14px;
+}
+
+.pf-timeline__marker--default {
+  background: var(--pf-timeline-default-bg);
+  border-color: var(--pf-timeline-default-border);
+  color: var(--pf-timeline-default-icon);
+}
+
+.pf-timeline__marker--success {
+  background: var(--pf-timeline-success-bg);
+  border-color: var(--pf-timeline-success-border);
+  color: var(--pf-timeline-success-icon);
+}
+
+.pf-timeline__marker--warning {
+  background: var(--pf-timeline-warning-bg);
+  border-color: var(--pf-timeline-warning-border);
+  color: var(--pf-timeline-warning-icon);
+}
+
+.pf-timeline__marker--danger {
+  background: var(--pf-timeline-danger-bg);
+  border-color: var(--pf-timeline-danger-border);
+  color: var(--pf-timeline-danger-icon);
+}
+
+.pf-timeline__connector {
+  background: var(--pf-timeline-connector);
+  flex: 1;
+  margin: var(--space-1) 0;
+  min-height: var(--space-4);
+  width: 2px;
+}
+
+/* ── Content ──────────────────────────────────────────────────────────────── */
+
+.pf-timeline__content {
+  padding-bottom: var(--space-5);
+}
+
+.pf-timeline__item--last .pf-timeline__content {
+  padding-bottom: 0;
+}
+
+.pf-timeline__header {
+  align-items: baseline;
+  column-gap: var(--space-2);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.pf-timeline__title {
+  color: var(--pf-timeline-title);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--pf-timeline-line);
+  margin: 0;
+}
+
+.pf-timeline__timestamp {
+  color: var(--pf-timeline-timestamp);
+  font-size: var(--font-size-xs);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.pf-timeline__description {
+  color: var(--pf-timeline-description);
+  font-size: var(--font-size-sm);
+  margin-top: var(--space-1);
+}
+.pf-timepicker {
+  position: relative;
+}
+
+/* ── Trigger ──────────────────────────────────────────────────────────────── */
+
+.pf-timepicker__trigger {
+  align-items: center;
+  background: var(--pf-timepicker-bg);
+  border: 1px solid var(--pf-timepicker-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-timepicker-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: var(--space-2);
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 0 var(--space-3);
+  text-align: start;
+  width: 100%;
+  transition:
+    border 0.2s,
+    box-shadow 0.2s;
+}
+
+.pf-timepicker__trigger:focus {
+  outline: none;
+}
+
+.pf-timepicker__trigger:focus-visible,
+.pf-timepicker__trigger--open {
+  border-color: var(--pf-timepicker-focus-border);
+  box-shadow: var(--pf-timepicker-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-timepicker__trigger--invalid {
+  border-color: var(--pf-timepicker-invalid-border);
+}
+
+.pf-timepicker__trigger:disabled {
+  background: var(--pf-control-bg-disabled);
+  border-color: var(--pf-control-border-disabled);
+  color: var(--pf-control-text-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pf-timepicker__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-timepicker__value--placeholder {
+  color: var(--pf-timepicker-placeholder);
+}
+
+.pf-timepicker__icon {
+  align-items: center;
+  color: var(--pf-timepicker-text-muted);
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.pf-timepicker__icon svg {
+  display: block;
+  height: 18px;
+  width: 18px;
+}
+
+/* ── Panel ────────────────────────────────────────────────────────────────── */
+
+.pf-timepicker__panel {
+  animation: pf-timepicker-in var(--duration-fast) var(--easing-decelerate);
+  background: var(--pf-timepicker-menu-bg);
+  border: 1px solid var(--pf-timepicker-menu-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-elevation-popover-shadow);
+  display: flex;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  position: fixed;
+  z-index: 1000;
+}
+
+.pf-timepicker__panel--exiting {
+  animation: pf-timepicker-out var(--duration-fast) var(--easing-accelerate) forwards;
+}
+
+@keyframes pf-timepicker-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pf-timepicker-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+/* ── Columns ──────────────────────────────────────────────────────────────── */
+
+.pf-timepicker__column {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 220px;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: thin;
+}
+
+.pf-timepicker__column--meridiem {
+  overflow-y: visible;
+}
+
+.pf-timepicker__option {
+  appearance: none;
+  /* Explicit opaque background (matching the panel) so axe can determine the
+     contrast background directly on each option, even when it's partially
+     clipped by the scrolling column. */
+  background: var(--pf-timepicker-menu-bg);
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-timepicker-text);
+  cursor: pointer;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  min-width: 3ch;
+  padding: var(--space-2) var(--space-3);
+  text-align: center;
+}
+
+.pf-timepicker__option:hover {
+  background: var(--pf-timepicker-option-hover-bg);
+}
+
+.pf-timepicker__option:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--pf-timepicker-focus-border);
+}
+
+.pf-timepicker__option--selected {
+  background: var(--pf-timepicker-option-active-bg);
+  color: var(--pf-timepicker-option-active-text);
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-timepicker__option--selected:hover {
+  background: var(--pf-timepicker-option-active-bg);
+  color: var(--pf-timepicker-option-active-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-timepicker__trigger {
+    transition: none;
+  }
+
+  .pf-timepicker__panel,
+  .pf-timepicker__panel--exiting {
+    animation: none;
+  }
+
+  .pf-timepicker__column {
+    scroll-behavior: auto;
+  }
+}
+.pf-toolbar {
+  align-items: center;
+  background: var(--pf-toolbar-bg);
+  border: 1px solid var(--pf-toolbar-border);
+  border-radius: var(--radius-md);
+  display: flex;
+  gap: var(--space-1);
+  padding: var(--space-1);
+}
+
+.pf-toolbar--horizontal {
+  flex-direction: row;
+}
+
+.pf-toolbar--vertical {
+  align-items: stretch;
+  flex-direction: column;
+  width: fit-content;
+}
+
+/* ── Separator ────────────────────────────────────────────────────────────── */
+
+.pf-toolbar__separator {
+  background: var(--pf-toolbar-separator);
+  flex-shrink: 0;
+}
+
+.pf-toolbar--horizontal .pf-toolbar__separator {
+  align-self: stretch;
+  margin: var(--space-1) var(--space-1);
+  width: 1px;
+}
+
+.pf-toolbar--vertical .pf-toolbar__separator {
+  height: 1px;
+  margin: var(--space-1) var(--space-1);
+}
 .pf-tooltip__trigger {
   border-radius: var(--radius-sm);
   display: inline-flex;
@@ -7394,3 +8231,29 @@ body {
   padding: var(--space-4);
   text-align: center;
 }
+.pf-visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/* Reveal on keyboard focus (skip-link pattern). */
+.pf-visually-hidden--focusable:focus,
+.pf-visually-hidden--focusable:focus-within {
+  clip: auto;
+  clip-path: none;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  /* Flow back into layout so the revealed content doesn't overlap siblings. */
+  position: static;
+  white-space: normal;
+  width: auto;
+}