@flytedan/flytebot-design-system 0.51.0 → 0.51.2

package/package.json

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

package/styles/components.css

@@ -3041,8 +3041,26 @@
 .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 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: none;
+  display: flex;
+  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. */