@flytedan/flytebot-design-system 0.51.1 → 0.51.3

package/package.json

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

package/styles/components.css

@@ -3041,18 +3041,27 @@
 .fd-filterbar-main:not(:has(.fd-filterbar-trigger, .fd-tag)) {
   display: none;
 }
-/* The Filter button, and Clear all right after it. Beside each other while the column can hold
-   both; on a bar too narrow for that (capped at 45% of the main column, so the chips keep the
-   rest) Clear all drops under the button, still in this column and never on a row of the
-   chips' own. */
+/* 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. */
+.fd-filterbar-main {
+  container-type: inline-size;
+}
 .fd-filterbar-trigger {
-  flex: 0 1 auto;
-  max-width: 45%;
+  flex: none;
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   gap: var(--s-sm) var(--s-md);
 }
+@container (max-width: 30rem) {
+  .fd-filterbar-trigger {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
 /* The count of applied filters, inside the Filter button: the kit's blue count pill, shrunk to
    sit beside the button's text without making the button taller. */
 .fd-filterbar-count {