@flytedan/flytebot-design-system 0.51.3 → 0.51.5

package/package.json

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

package/styles/components.css

@@ -2714,24 +2714,44 @@
   color: var(--text);
   font-size: var(--body-size);
 }
-/* ToastProvider's stack: pinned to the bottom-right of the viewport (z-index is set inline
-   from OVERLAY_CEILING, above every layer). The region itself takes no clicks: it has a real
-   box wherever a toast is, including the gap between two stacked toasts and the shadow around
-   each, and without this a click aimed at the control underneath would land on it. Each toast
-   takes its clicks back, so its close button works. */
-.fd-toast-region {
+/* The corner stack: the one bottom-right box every floating surface (the toasts, the job
+   tray) renders into a slot of, so they lay out one above the next instead of each pinning
+   itself to the same corner (z-index is set inline from OVERLAY_CEILING, above every layer).
+   It is 340px wide, and on a phone the width between two gutters. The stack
+   takes no clicks: it has a real box wherever a surface is, including the gaps between
+   surfaces and the shadow around each, and without this a click aimed at the control
+   underneath would land on it. Each surface takes its clicks back. Slots run bottom to top;
+   two occupied slots are one gap apart, and an empty one (the toast region is always mounted
+   for its live region) takes no room. */
+.fd-corner-stack {
   position: fixed;
   bottom: var(--s-lg);
   right: var(--s-lg);
+  display: flex;
+  flex-direction: column-reverse;
+  width: 340px;
+  pointer-events: none;
+}
+@media (max-width: 640px) {
+  .fd-corner-stack {
+    width: calc(100vw - 2 * var(--s-lg));
+  }
+}
+.fd-corner-stack-slot:has(> :not(:empty)) ~ .fd-corner-stack-slot:has(> :not(:empty)) {
+  margin-bottom: var(--s-sm);
+}
+/* ToastProvider's stack, in the corner stack's toasts slot. */
+.fd-toast-region {
   display: flex;
   flex-direction: column;
   gap: var(--s-sm);
-  max-width: calc(100vw - 2 * var(--s-lg));
-  pointer-events: none;
 }
 .fd-toast-region > * {
   pointer-events: auto;
 }
+.fd-toast-region > .fd-toast {
+  width: auto;
+}
 
 /* ============ Flag / empty ============ */
 .fd-flag {
@@ -3003,20 +3023,23 @@
 }
 
 /* ============ FilterBar (MP-243, SMS-50) ============ */
-/* The bar is two columns on one wrapping row: the MAIN column, which is the "Filter" trigger
-   (its own column, always first) beside the chips (a wrapping area of their own, taking the room
-   left over), and an optional `actions` slot pinned to the right edge (`margin-left: auto`).
-   The columns top-align, so however many lines the chips wrap onto, the trigger and the actions
-   never move. The main column never wraps its two children under each other, at any width; when
-   the row is too narrow for main and actions together (main keeps a floor of
+/* At 30rem and wider the bar is two columns on one wrapping row: the MAIN column, which is the
+   "Filter" trigger (its own column, always first) beside the chips (a wrapping area of their own,
+   taking the room left over), and an optional `actions` slot pinned to the right edge
+   (`margin-left: auto`). The columns top-align, so however many lines the chips wrap onto, the
+   trigger and the actions never move. The main column never wraps its two children under each
+   other; when the row is too narrow for main and actions together (main keeps a floor of
    --filterbar-main-min), the actions wrap onto a row of their own and stay right-aligned.
 
+   Below 30rem (a phone) there is no room for a column beside the button: the main column takes
+   the whole row, the Filter button and Clear all share its first line, the chips wrap underneath
+   on rows of their own, and the actions take the row below that. The switch is a container query
+   on the bar itself, so it follows the room the bar is given, not the viewport.
+
    It is a block-level flex box that fills the row it is put in, and `min-width: 0` lets it
-   shrink inside a flex parent instead of forcing that parent wider. (Until SMS-50 it was
-   inline-flex with `max-width: 100%`: an inline-flex box's shrink-to-fit width comes from its
-   UNWRAPPED content, so wrapping only worked once something capped it. A block-level flex box
-   takes its width from its container, which is what makes wrapping, and the chips column's
-   own width, well defined.) */
+   shrink inside a flex parent instead of forcing that parent wider. A block-level flex box takes
+   its width from its container, which is what makes wrapping, and the chips column's own width,
+   well defined. */
 .fd-filterbar {
   --filterbar-main-min: 20rem;
   /* The most a chip may take. A longer value is shortened in the middle (MiddleEllipsis). */
@@ -3027,6 +3050,7 @@
   align-items: flex-start;
   gap: var(--s-sm) var(--s-md);
   min-width: 0;
+  container: fd-filterbar / inline-size;
 }
 .fd-filterbar-main {
   flex: 1 1 var(--filterbar-main-min);
@@ -3091,6 +3115,24 @@
   gap: var(--s-sm) var(--s-md);
   max-width: 100%;
 }
+/* A phone-width bar: the main column is the whole row, stacked, with Filter and Clear all side
+   by side on its first line and the chips wrapping underneath at up to their max width each.
+   It follows the rules it overrides so the two never tie on source order. */
+@container fd-filterbar (width < 30rem) {
+  .fd-filterbar-main {
+    flex: 1 1 100%;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .fd-filterbar-trigger {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  .fd-filterbar-chips {
+    flex: none;
+    min-height: 0;
+  }
+}
 /* MP-282: seen live at 375px — a chip whose value is long (a full campaign name) painted
    637px wide inside a 297px-wide bar instead of respecting it, because .fd-tag is `flex:
    none; white-space: nowrap; max-width: none` with nothing to clamp it, and the ONLY thing
@@ -7488,16 +7530,9 @@ button.fd-erow-metric:focus-visible {
    A stack of background-job cards (exports, syncs) and an ordered-phase display for the
    same kind of job. Both are entirely props-driven — no timers here, only layout. */
 .fd-job-tray{
-  position:fixed;
-  right:var(--s-16,16px);
-  bottom:var(--s-16,16px);
-  z-index:40;
   display:flex;
   flex-direction:column-reverse;
   gap:10px;
-  width:340px;
-  max-width:calc(100vw - 32px);
-  pointer-events:none;
 }
 .fd-job-tray>.fd-job-card{pointer-events:auto}
 .fd-job-card{
@@ -7519,16 +7554,6 @@ button.fd-erow-metric:focus-visible {
 .fd-job-card-done-note{display:block}
 .fd-job-card-failed{display:flex;align-items:flex-start;gap:8px;color:var(--danger-text);font-size:var(--body-sm-size)}
 .fd-job-card-failed .ph{flex:none;font-size:16px;margin-top:1px}
-@media (max-width:640px){
-  .fd-job-tray{
-    left:16px;
-    right:16px;
-    bottom:0;
-    width:auto;
-    max-width:none;
-    padding-bottom:12px;
-  }
-}
 
 .fd-phased-progress{display:flex;flex-direction:column;gap:12px}
 .fd-phase-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}