@flytedan/flytebot-design-system 0.27.1 → 0.29.0

package/package.json

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

package/styles/components.css

@@ -2821,6 +2821,51 @@
   transform: rotate(180deg);
 }
 
+/* ============ FilterBar (MP-243) ============ */
+/* The bar itself: a wrapping row of chips plus the trailing "Filter" trigger. Kept as its
+   own class (rather than composing .fd-row/.fd-wrap utilities) because inline-flex, not
+   flex, is load-bearing here — a consumer drops FilterBar into a toolbar row alongside
+   other inline elements, and a flex (block-level) root would claim the full row width. */
+.fd-filterbar {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-sm);
+  /* MP-243 R1: an inline-flex box's shrink-to-fit width is computed from its UNWRAPPED
+     content first — flex-wrap only kicks in once something already caps the box's own
+     width, which an inline-flex element does not get for free from its containing block
+     the way a block-level flex does. Without this, enough chips run the bar past the
+     viewport edge instead of wrapping onto a second line, at any width narrow enough to
+     matter (found opening three fields' chips on a 375px viewport). */
+  max-width: 100%;
+}
+/* The text field's own inline "chip that is also an input" — its editing state reuses
+   .fd-tag's box but swaps in the selected/brand treatment .fd-tag[aria-pressed] already
+   defines elsewhere, and the raw <input> inside is stripped of its own chrome so it reads
+   as chip text you can type into, not a field dropped inside a chip. */
+.fd-filterbar-text {
+  background: var(--surface-brand);
+  border-color: var(--border-brand);
+  cursor: text;
+}
+.fd-filterbar-text-input {
+  all: unset;
+  min-width: 90px;
+  color: var(--text-on-surface-brand);
+}
+/* The multi-select panel's own option rows are DIVs, not buttons (MP-243 Q3: options are
+   reached by arrow keys via aria-activedescendant, not by Tab), so the checked/unchecked
+   indicator is a plain decorative icon rather than .fd-opt-check's "only present once
+   selected" checkmark. */
+.fd-filterbar-opt-check {
+  flex: none;
+  color: var(--text-muted);
+  font-size: 15px;
+}
+.fd-filterbar-opt-check.is-checked {
+  color: var(--brand);
+}
+
 /* ============ Range slider ============ */
 .fd-range {
   position: relative;
@@ -3175,6 +3220,11 @@
  * `var(--s-xs)`, the day something needs it). min-width sizes are named, not
  * arbitrary, so a consumer picks "sm"/"md" rather than inventing a pixel
  * value. */
+/* MP-243: FilterBar's own stacks (a panel's selected-count line, a tag row) needed the
+ * scale's xs step — the day this comment predicted. */
+.fd-gap-xs {
+  gap: var(--s-xs);
+}
 .fd-gap-sm {
   gap: var(--s-sm);
 }