@flytedan/flytebot-design-system 0.51.4 → 0.51.6

package/package.json

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

package/styles/components.css

@@ -3023,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). */
@@ -3047,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);
@@ -3062,11 +3066,13 @@
   display: none;
 }
 /* The Filter button, and Clear all right after it. Beside each other while the main column has
-   room for both and a chip; below 30rem (the two, a gap and one chip at its max) Clear all stacks
-   under the button, still in this column and never on a row of the chips' own. The column is
-   exactly as wide as what is in it either way, so the chips always start one gap from it. The
-   switch is a container query on the main column, not a wrapping flex row: a wrapped row takes
-   its cap as its width and leaves a hole beside the button. */
+   room for both and a chip; when the actions beside the main column leave it under 30rem (the two,
+   a gap and one chip at its max) Clear all stacks under the button, still in this column and
+   never on a row of the chips' own. The column is exactly as wide as what is in it either way, so
+   the chips always start one gap from it. The switch is a container query on the main column, not
+   a wrapping flex row: a wrapped row takes its cap as its width and leaves a hole beside the
+   button. A bar under 30rem wide is the phone layout below, which puts Clear all beside the
+   button again. */
 .fd-filterbar-main {
   container-type: inline-size;
 }
@@ -3076,7 +3082,7 @@
   align-items: center;
   gap: var(--s-sm) var(--s-md);
 }
-@container (max-width: 30rem) {
+@container (width < 30rem) {
   .fd-filterbar-trigger {
     flex-direction: column;
     align-items: flex-start;
@@ -3111,6 +3117,29 @@
   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;
+    align-items: center;
+  }
+  .fd-filterbar-chips {
+    flex: none;
+    min-height: 0;
+  }
+  /* No chips, no row: an empty chips area would still add a row gap under the button. */
+  .fd-filterbar-chips:empty {
+    display: none;
+  }
+}
 /* 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
@@ -7511,7 +7540,6 @@ button.fd-erow-metric:focus-visible {
   display:flex;
   flex-direction:column-reverse;
   gap:10px;
-  pointer-events:none;
 }
 .fd-job-tray>.fd-job-card{pointer-events:auto}
 .fd-job-card{