@flytedan/flytebot-design-system 0.74.0 → 0.75.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.74.0",
+  "version": "0.75.0",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles/components.css

@@ -2572,6 +2572,63 @@
   opacity: 0;
   pointer-events: none;
 }
+/* DS-26: AppShell's docked side panel. The outer box animates width in and out (the content beside it reflows
+   with it); the inner box keeps the full width so what is inside slides rather than rewraps. Both keyframes
+   leave one end implicit, so it is the panel's live width: a resized panel opens to the width it was left at.
+   The exit runs for PANEL_EXIT_MS (kits/useClosingAnimation.ts), like .fd-drawer.is-closing. Only an open that follows
+   a close slides in (.is-entering): a panel that is open when it mounts is simply there. */
+.fd-sidepanel {
+  flex: none;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+}
+.fd-sidepanel.is-entering {
+  animation: fd-sidepanel-in 220ms var(--ease-out) backwards;
+}
+.fd-sidepanel.is-closing {
+  animation: fd-sidepanel-out 220ms var(--ease) both;
+}
+@keyframes fd-sidepanel-in {
+  from {
+    width: 0;
+  }
+}
+@keyframes fd-sidepanel-out {
+  to {
+    width: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fd-sidepanel.is-entering,
+  .fd-sidepanel.is-closing {
+    animation-duration: 1ms;
+  }
+}
+.fd-sidepanel-inner {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.fd-sidepanel-grip {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  touch-action: none;
+  z-index: 4;
+  transition: background var(--dur-fast) var(--ease);
+}
+.fd-sidepanel-grip:hover,
+.fd-sidepanel-grip:focus-visible,
+.fd-sidepanel.is-resizing .fd-sidepanel-grip {
+  background: color-mix(in oklab, var(--brand) 26%, transparent);
+}
 .fd-side-group {
   font-size: var(--overline-size);
   letter-spacing: var(--overline-track);
@@ -6610,10 +6667,10 @@ button.fd-erow-metric:focus-visible {
 }
 
 /* surfaces */
+/* DS-26: fills the panel it is put in; AppShell's side panel (.fd-sidepanel) owns the width and the edge. */
 .fdc-panel.is-sidebar {
   height: 100%;
-  border-left: 1px solid var(--chat-border);
-  flex: none;
+  width: 100%;
 }
 .fdc-panel.is-inline {
   border: 1px solid var(--chat-border);
@@ -6649,23 +6706,7 @@ button.fd-erow-metric:focus-visible {
   width: 100%;
 }
 
-.fdc-grip {
-  position: absolute;
-  left: -3px;
-  top: 0;
-  bottom: 0;
-  width: 7px;
-  cursor: col-resize;
-  z-index: 4;
-  background: none;
-  transition: background var(--dur-fast) var(--ease);
-}
-.fdc-grip:hover,
-.fdc-grip:focus-visible {
-  background: color-mix(in oklab, var(--brand) 26%, transparent);
-}
-
-/* header — height tracks the app topbar so a docked panel lines up with it exactly */
+/* header — the same height as the app topbar (--topbar-h), the one header size across the shell */
 .fdc-head {
   display: flex;
   align-items: center;
@@ -7651,10 +7692,6 @@ button.fd-erow-metric:focus-visible {
 }
 
 @media (max-width: 768px) {
-  .fdc-panel.is-sidebar {
-    width: 100% !important;
-    border-left: 0;
-  }
   .fdc-log {
     padding-left: 14px;
     padding-right: 14px;