plutonium 0.49.1 → 0.50.0

data/src/css/components.css

@@ -9,37 +9,33 @@
    =================== */
 
 .pu-btn {
-  @apply inline-flex items-center justify-center gap-2
-         font-semibold
-         transition-all duration-200 ease-out
-         focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+  @apply inline-flex items-center justify-center gap-2 font-semibold transition-all duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
   border-radius: var(--pu-radius-md);
 }
 
 .pu-btn-md {
-  @apply px-5 py-2.5 text-sm;
+  @apply px-3 h-8 text-sm;
 }
 
 .pu-btn-sm {
-  @apply px-4 py-2 text-sm;
+  @apply px-2.5 h-7 text-[13px];
 }
 
 .pu-btn-xs {
-  @apply px-3 py-1.5 text-xs;
+  @apply px-2 h-6 text-xs;
 }
 
 /* Primary - Solid with subtle gradient */
 .pu-btn-primary {
-  @apply bg-primary-600 text-white
-         hover:bg-primary-500
-         active:bg-primary-700
-         focus-visible:ring-primary-500;
+  @apply bg-primary-600 text-white hover:bg-primary-500 active:bg-primary-700 focus-visible:ring-primary-500;
   box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
 }
+
 .pu-btn-primary:hover {
   box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
   transform: translateY(-1px);
 }
+
 .pu-btn-primary:active {
   transform: translateY(0);
   box-shadow: var(--pu-shadow-sm);
@@ -47,12 +43,10 @@
 
 /* Secondary */
 .pu-btn-secondary {
-  @apply bg-secondary-600 text-white
-         hover:bg-secondary-500
-         active:bg-secondary-700
-         focus-visible:ring-secondary-500;
+  @apply bg-secondary-600 text-white hover:bg-secondary-500 active:bg-secondary-700 focus-visible:ring-secondary-500;
   box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
 }
+
 .pu-btn-secondary:hover {
   box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
   transform: translateY(-1px);
@@ -60,12 +54,10 @@
 
 /* Danger */
 .pu-btn-danger {
-  @apply bg-danger-600 text-white
-         hover:bg-danger-500
-         active:bg-danger-700
-         focus-visible:ring-danger-500;
+  @apply bg-danger-600 text-white hover:bg-danger-500 active:bg-danger-700 focus-visible:ring-danger-500;
   box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
 }
+
 .pu-btn-danger:hover {
   box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
   transform: translateY(-1px);
@@ -73,12 +65,10 @@
 
 /* Success */
 .pu-btn-success {
-  @apply bg-success-600 text-white
-         hover:bg-success-500
-         active:bg-success-700
-         focus-visible:ring-success-500;
+  @apply bg-success-600 text-white hover:bg-success-500 active:bg-success-700 focus-visible:ring-success-500;
   box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
 }
+
 .pu-btn-success:hover {
   box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
   transform: translateY(-1px);
@@ -86,12 +76,10 @@
 
 /* Warning */
 .pu-btn-warning {
-  @apply bg-warning-600 text-white
-         hover:bg-warning-500
-         active:bg-warning-700
-         focus-visible:ring-warning-500;
+  @apply bg-warning-600 text-white hover:bg-warning-500 active:bg-warning-700 focus-visible:ring-warning-500;
   box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
 }
+
 .pu-btn-warning:hover {
   box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
   transform: translateY(-1px);
@@ -99,12 +87,10 @@
 
 /* Info */
 .pu-btn-info {
-  @apply bg-info-600 text-white
-         hover:bg-info-500
-         active:bg-info-700
-         focus-visible:ring-info-500;
+  @apply bg-info-600 text-white hover:bg-info-500 active:bg-info-700 focus-visible:ring-info-500;
   box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
 }
+
 .pu-btn-info:hover {
   box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
   transform: translateY(-1px);
@@ -112,12 +98,10 @@
 
 /* Accent */
 .pu-btn-accent {
-  @apply bg-accent-600 text-white
-         hover:bg-accent-500
-         active:bg-accent-700
-         focus-visible:ring-accent-500;
+  @apply bg-accent-600 text-white hover:bg-accent-500 active:bg-accent-700 focus-visible:ring-accent-500;
   box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
 }
+
 .pu-btn-accent:hover {
   box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
   transform: translateY(-1px);
@@ -125,113 +109,73 @@
 
 /* Ghost - Minimal, text-like */
 .pu-btn-ghost {
-  @apply bg-transparent
-         text-slate-600 hover:text-slate-900
-         hover:bg-slate-100
-         active:bg-slate-200
-         focus-visible:ring-slate-500;
+  @apply bg-transparent text-slate-600 hover:text-slate-900 hover:bg-slate-100 active:bg-slate-200 focus-visible:ring-slate-500;
 }
+
 .dark .pu-btn-ghost {
-  @apply text-slate-400 hover:text-slate-100
-         hover:bg-slate-700
-         active:bg-slate-600;
+  @apply text-slate-400 hover:text-slate-100 hover:bg-slate-700 active:bg-slate-600;
 }
 
 /* Outline - Bordered, transparent background */
 .pu-btn-outline {
-  @apply bg-transparent
-         border border-[var(--pu-border)]
-         text-[var(--pu-text-muted)]
-         hover:text-[var(--pu-text)]
-         hover:bg-[var(--pu-surface-alt)]
-         hover:border-[var(--pu-border-strong)]
-         active:bg-[var(--pu-border-muted)]
-         focus-visible:ring-[var(--pu-border)];
+  @apply bg-transparent border border-[var(--pu-border)] text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] hover:border-[var(--pu-border-strong)] active:bg-[var(--pu-border-muted)] focus-visible:ring-[var(--pu-border)];
 }
 
 /* Soft variants - Tinted backgrounds */
 .pu-btn-soft-primary {
-  @apply bg-primary-50 text-primary-700
-         hover:bg-primary-100
-         active:bg-primary-200
-         focus-visible:ring-primary-500;
+  @apply bg-primary-50 text-primary-700 hover:bg-primary-100 active:bg-primary-200 focus-visible:ring-primary-500;
 }
+
 .dark .pu-btn-soft-primary {
-  @apply bg-primary-950/50 text-primary-300
-         hover:bg-primary-900/60
-         active:bg-primary-900/80;
+  @apply bg-primary-950/50 text-primary-300 hover:bg-primary-900/60 active:bg-primary-900/80;
 }
 
 .pu-btn-soft-danger {
-  @apply bg-danger-50 text-danger-700
-         hover:bg-danger-100
-         active:bg-danger-200
-         focus-visible:ring-danger-500;
+  @apply bg-danger-50 text-danger-700 hover:bg-danger-100 active:bg-danger-200 focus-visible:ring-danger-500;
 }
+
 .dark .pu-btn-soft-danger {
-  @apply bg-danger-950/50 text-danger-300
-         hover:bg-danger-900/60
-         active:bg-danger-900/80;
+  @apply bg-danger-950/50 text-danger-300 hover:bg-danger-900/60 active:bg-danger-900/80;
 }
 
 .pu-btn-soft-success {
-  @apply bg-success-50 text-success-700
-         hover:bg-success-100
-         active:bg-success-200
-         focus-visible:ring-success-500;
+  @apply bg-success-50 text-success-700 hover:bg-success-100 active:bg-success-200 focus-visible:ring-success-500;
 }
+
 .dark .pu-btn-soft-success {
-  @apply bg-success-950/50 text-success-300
-         hover:bg-success-900/60
-         active:bg-success-900/80;
+  @apply bg-success-950/50 text-success-300 hover:bg-success-900/60 active:bg-success-900/80;
 }
 
 .pu-btn-soft-warning {
-  @apply bg-warning-50 text-warning-700
-         hover:bg-warning-100
-         active:bg-warning-200
-         focus-visible:ring-warning-500;
+  @apply bg-warning-50 text-warning-700 hover:bg-warning-100 active:bg-warning-200 focus-visible:ring-warning-500;
 }
+
 .dark .pu-btn-soft-warning {
-  @apply bg-warning-950/50 text-warning-300
-         hover:bg-warning-900/60
-         active:bg-warning-900/80;
+  @apply bg-warning-950/50 text-warning-300 hover:bg-warning-900/60 active:bg-warning-900/80;
 }
 
 .pu-btn-soft-info {
-  @apply bg-info-50 text-info-700
-         hover:bg-info-100
-         active:bg-info-200
-         focus-visible:ring-info-500;
+  @apply bg-info-50 text-info-700 hover:bg-info-100 active:bg-info-200 focus-visible:ring-info-500;
 }
+
 .dark .pu-btn-soft-info {
-  @apply bg-info-950/50 text-info-300
-         hover:bg-info-900/60
-         active:bg-info-900/80;
+  @apply bg-info-950/50 text-info-300 hover:bg-info-900/60 active:bg-info-900/80;
 }
 
 .pu-btn-soft-secondary {
-  @apply bg-secondary-50 text-secondary-700
-         hover:bg-secondary-100
-         active:bg-secondary-200
-         focus-visible:ring-secondary-500;
+  @apply bg-secondary-50 text-secondary-700 hover:bg-secondary-100 active:bg-secondary-200 focus-visible:ring-secondary-500;
 }
+
 .dark .pu-btn-soft-secondary {
-  @apply bg-secondary-950/50 text-secondary-300
-         hover:bg-secondary-900/60
-         active:bg-secondary-900/80;
+  @apply bg-secondary-950/50 text-secondary-300 hover:bg-secondary-900/60 active:bg-secondary-900/80;
 }
 
 .pu-btn-soft-accent {
-  @apply bg-accent-50 text-accent-700
-         hover:bg-accent-100
-         active:bg-accent-200
-         focus-visible:ring-accent-500;
+  @apply bg-accent-50 text-accent-700 hover:bg-accent-100 active:bg-accent-200 focus-visible:ring-accent-500;
 }
+
 .dark .pu-btn-soft-accent {
-  @apply bg-accent-950/50 text-accent-300
-         hover:bg-accent-900/60
-         active:bg-accent-900/80;
+  @apply bg-accent-950/50 text-accent-300 hover:bg-accent-900/60 active:bg-accent-900/80;
 }
 
 /* ===================
@@ -246,7 +190,7 @@
 }
 
 .pu-card-body {
-  padding: var(--pu-space-lg);
+  padding: 16px;
 }
 
 /* ===================
@@ -259,46 +203,128 @@
   border-radius: var(--pu-radius-md);
   color: var(--pu-text);
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  @apply w-full px-4 py-3
-         text-base
-         focus:outline-none;
+  @apply w-full px-3 h-9 text-sm focus:outline-none;
 }
+
+.pu-input-toolbar {
+  @apply h-8 text-sm;
+}
+
 .pu-input-icon-left {
   @apply pl-10;
 }
+
 .pu-input::placeholder {
   color: var(--pu-input-placeholder);
 }
+
 .pu-input:hover {
   border-color: var(--pu-border-strong);
 }
+
 .pu-input:focus {
   border-color: var(--pu-input-focus-ring);
   box-shadow: 0 0 0 3px theme(colors.primary.500 / 15%);
 }
 
+.pu-input:-webkit-autofill,
+.pu-input:-webkit-autofill:hover,
+.pu-input:-webkit-autofill:focus,
+.pu-input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px var(--pu-input-bg) inset;
+  -webkit-text-fill-color: var(--pu-text);
+  caret-color: var(--pu-text);
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+.pu-input:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px var(--pu-input-bg) inset,
+    0 0 0 3px theme(colors.primary.500 / 15%);
+}
+
 .pu-input-invalid {
-  @apply border-danger-500 bg-danger-50/50
-         text-danger-900 placeholder:text-danger-400;
+  @apply border-danger-500 bg-danger-50/50 text-danger-900 placeholder:text-danger-400;
 }
+
 .pu-input-invalid:focus {
   box-shadow: 0 0 0 3px theme(colors.danger.500 / 15%);
 }
+
 .dark .pu-input-invalid {
-  @apply bg-danger-950/20 border-danger-500/70
-         text-danger-200 placeholder:text-danger-400;
+  @apply bg-danger-950/20 border-danger-500/70 text-danger-200 placeholder:text-danger-400;
 }
 
 .pu-input-valid {
-  @apply border-success-500 bg-success-50/50
-         text-success-900 placeholder:text-success-400;
+  @apply border-success-500 bg-success-50/50 text-success-900 placeholder:text-success-400;
 }
+
 .pu-input-valid:focus {
   box-shadow: 0 0 0 3px theme(colors.success.500 / 15%);
 }
+
 .dark .pu-input-valid {
-  @apply bg-success-950/20 border-success-500/70
-         text-success-200 placeholder:text-success-400;
+  @apply bg-success-950/20 border-success-500/70 text-success-200 placeholder:text-success-400;
+}
+
+/* Autofill: preserve validation tint + theme-aware text color */
+.pu-input-invalid:-webkit-autofill,
+.pu-input-invalid:-webkit-autofill:hover,
+.pu-input-invalid:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px theme(colors.danger.50 / 50%) inset,
+    0 0 0 1000px var(--pu-input-bg) inset;
+  -webkit-text-fill-color: theme(colors.danger.900);
+  caret-color: theme(colors.danger.900);
+}
+
+.pu-input-invalid:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px theme(colors.danger.50 / 50%) inset,
+    0 0 0 1000px var(--pu-input-bg) inset,
+    0 0 0 3px theme(colors.danger.500 / 15%);
+}
+
+.dark .pu-input-invalid:-webkit-autofill,
+.dark .pu-input-invalid:-webkit-autofill:hover,
+.dark .pu-input-invalid:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px theme(colors.danger.950 / 20%) inset,
+    0 0 0 1000px var(--pu-input-bg) inset;
+  -webkit-text-fill-color: theme(colors.danger.200);
+  caret-color: theme(colors.danger.200);
+}
+
+.dark .pu-input-invalid:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px theme(colors.danger.950 / 20%) inset,
+    0 0 0 1000px var(--pu-input-bg) inset,
+    0 0 0 3px theme(colors.danger.500 / 15%);
+}
+
+.pu-input-valid:-webkit-autofill,
+.pu-input-valid:-webkit-autofill:hover,
+.pu-input-valid:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px theme(colors.success.50 / 50%) inset,
+    0 0 0 1000px var(--pu-input-bg) inset;
+  -webkit-text-fill-color: theme(colors.success.900);
+  caret-color: theme(colors.success.900);
+}
+
+.pu-input-valid:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px theme(colors.success.50 / 50%) inset,
+    0 0 0 1000px var(--pu-input-bg) inset,
+    0 0 0 3px theme(colors.success.500 / 15%);
+}
+
+.dark .pu-input-valid:-webkit-autofill,
+.dark .pu-input-valid:-webkit-autofill:hover,
+.dark .pu-input-valid:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px theme(colors.success.950 / 20%) inset,
+    0 0 0 1000px var(--pu-input-bg) inset;
+  -webkit-text-fill-color: theme(colors.success.200);
+  caret-color: theme(colors.success.200);
+}
+
+.dark .pu-input-valid:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px theme(colors.success.950 / 20%) inset,
+    0 0 0 1000px var(--pu-input-bg) inset,
+    0 0 0 3px theme(colors.success.500 / 15%);
 }
 
 .pu-label {
@@ -319,6 +345,7 @@
 .pu-error {
   @apply mt-2 text-sm font-medium text-danger-600;
 }
+
 .dark .pu-error {
   @apply text-danger-400;
 }
@@ -329,9 +356,6 @@
 
 .pu-table-wrapper {
   background-color: var(--pu-card-bg);
-  border: 1px solid var(--pu-card-border);
-  border-radius: var(--pu-radius-lg);
-  box-shadow: var(--pu-shadow-sm);
   @apply overflow-x-auto;
 }
 
@@ -357,6 +381,7 @@
   transition: background-color 150ms ease;
   @apply last:border-b-0;
 }
+
 .pu-table-body-row:hover {
   background-color: var(--pu-table-row-hover);
 }
@@ -378,9 +403,9 @@
   background: linear-gradient(to right, theme(colors.primary.50), theme(colors.primary.100/50%));
   border: 1px solid theme(colors.primary.200);
   border-radius: var(--pu-radius-lg);
-  @apply items-center gap-4
-         px-5 py-3 mb-4;
+  @apply items-center gap-4 px-5 py-3 mb-4;
 }
+
 .dark .pu-toolbar {
   background: linear-gradient(to right, theme(colors.primary.950/40%), theme(colors.primary.900/30%));
   border-color: theme(colors.primary.800/50%);
@@ -389,6 +414,7 @@
 .pu-toolbar-text {
   @apply text-base font-semibold text-primary-700;
 }
+
 .dark .pu-toolbar-text {
   @apply text-primary-300;
 }
@@ -402,19 +428,11 @@
    =================== */
 
 .pu-checkbox {
-  @apply size-5 rounded-md
-         bg-white border-2 border-slate-300
-         accent-primary-600
-         focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-0
-         cursor-pointer
-         transition-all duration-150
-         checked:bg-primary-600 checked:border-primary-600
-         indeterminate:bg-primary-600 indeterminate:border-primary-600
-         hover:border-primary-400;
+  @apply size-5 rounded-md bg-white border-2 border-slate-300 accent-primary-600 focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-0 cursor-pointer transition-all duration-150 checked:bg-primary-600 checked:border-primary-600 indeterminate:bg-primary-600 indeterminate:border-primary-600 hover:border-primary-400;
 }
+
 .dark .pu-checkbox {
-  @apply bg-slate-700 border-slate-500
-         hover:border-primary-400;
+  @apply bg-slate-700 border-slate-500 hover:border-primary-400;
 }
 
 /* ===================
@@ -422,9 +440,7 @@
    =================== */
 
 .pu-empty-state {
-  @apply flex flex-col items-center justify-center
-         py-16 px-8
-         text-center;
+  @apply flex flex-col items-center justify-center py-16 px-8 text-center;
 }
 
 .pu-empty-state-icon {
@@ -469,3 +485,160 @@
 .pu-selection-cell {
   @apply w-14 px-6 py-4;
 }
+
+/* ===================
+   ICON RAIL — modern shell
+   =================== */
+
+/* Hide labels by default; revealed only when rail is pinned */
+.icon-rail-label {
+  display: none;
+}
+
+/* Caret indicator on parents with children. Default (collapsed):
+   a tiny badge in the bottom-right corner of the trigger button. */
+.icon-rail-chevron {
+  position: absolute;
+  bottom: 1px;
+  right: 1px;
+  width: 12px;
+  height: 12px;
+  padding: 1px;
+  border-radius: 9999px;
+  background: var(--pu-surface);
+  color: var(--pu-text-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  box-shadow: 0 0 0 1px var(--pu-border);
+}
+
+/* Modern rail width (controlled by CSS, not Tailwind utility) */
+aside[data-controller~="icon-rail"] {
+  width: 3.5rem;            /* 56px collapsed */
+  overflow-x: hidden;
+}
+
+/* Pinned mode: rail expands, labels appear */
+body.pu-rail-pinned aside[data-controller~="icon-rail"] {
+  width: 14rem !important;  /* 224px */
+}
+
+body.pu-rail-pinned .icon-rail-label {
+  display: inline-flex !important;
+}
+
+body.pu-rail-pinned .icon-rail-leaf,
+body.pu-rail-pinned .icon-rail-parent-trigger {
+  width: 100%;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 6px 10px;
+}
+
+/* When pinned, chevron flows inline after the label (right-aligned)
+   and rotates to point down — mirrors a typical disclosure caret. */
+body.pu-rail-pinned .icon-rail-chevron {
+  position: static;
+  background: transparent;
+  box-shadow: none;
+  margin-left: auto;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  color: inherit;
+  opacity: 0.7;
+}
+
+/* When pinned, items stretch full width so labels read left-to-right */
+body.pu-rail-pinned #sidebar-navigation-content {
+  align-items: stretch;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+/* When pinned, brand area aligns to the start so it reads as part of the
+   left-aligned column instead of staying centered while items go left. */
+body.pu-rail-pinned aside[data-controller~="icon-rail"] > div:first-child {
+  justify-content: flex-start;
+  padding-left: 14px;
+}
+
+/* When pinned, pin button right-aligns to anchor the collapse affordance
+   to the rail edge it'll snap toward. */
+body.pu-rail-pinned aside[data-controller~="icon-rail"] > div:last-child {
+  justify-content: flex-end;
+  padding-right: 8px;
+}
+
+/* Pin button icon swap */
+body.pu-rail-pinned .icon-rail-pin-collapse {
+  display: inline-flex !important;
+}
+
+body.pu-rail-pinned .icon-rail-pin-expand {
+  display: none !important;
+}
+
+/* Main content padding when pinned: rail width + 1.5rem breathing room
+   (matches the collapsed-state lg:pl-20 = rail 3.5rem + 1.5rem gap). */
+@media (min-width: 1024px) {
+  body.pu-rail-pinned main {
+    padding-left: 15.5rem !important;
+  }
+}
+
+/* Flyout: visibility controlled by Stimulus (data-flyout-open) via position:fixed */
+.icon-rail-parent {
+  position: relative;
+}
+
+.icon-rail-flyout {
+  display: none;
+  z-index: 50;
+  min-width: 200px;
+  /* position is set inline by the Stimulus controller */
+}
+
+.icon-rail-parent[data-flyout-open="true"] .icon-rail-flyout {
+  display: block;
+}
+
+.icon-rail-flyout-inner {
+  background: var(--pu-surface);
+  border: 1px solid var(--pu-border);
+  border-radius: var(--pu-radius-lg);
+  box-shadow: var(--pu-shadow-lg);
+  padding: 6px;
+  animation: pu-rail-flyout-in 120ms ease-out;
+}
+
+@keyframes pu-rail-flyout-in {
+  from { opacity: 0; transform: translateX(-4px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+.icon-rail-flyout-label {
+  padding: 6px 10px 4px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--pu-text-muted);
+}
+
+.icon-rail-flyout-item {
+  display: block;
+  padding: 7px 10px;
+  font-size: 13px;
+  color: var(--pu-text);
+  border-radius: var(--pu-radius-md);
+  white-space: nowrap;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.icon-rail-flyout-item:hover {
+  background: var(--pu-surface-alt);
+  color: var(--pu-text);
+}