@flytedan/flytebot-design-system 0.2.0 → 0.2.2

package/package.json

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

package/styles/components.css

@@ -197,6 +197,12 @@
 /* ============ Segmented control ============ */
 .fd-seg {
   display: inline-flex;
+  /* .fd-seg is already inline-flex to hug its own content, but any flex-column
+     parent with the default align-items:stretch (e.g. .fd-pop) overrides that by
+     stretching this as a flex ITEM — align-self pins it back to content width
+     regardless of the ambient container, so it never silently goes full-width
+     just because it's dropped inside a popover/panel. */
+  align-self: flex-start;
   background: var(--surface-2);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
@@ -2020,30 +2026,38 @@
 }
 .fd-brand {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 5px;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
 }
 .fd-brand-mark {
   display: inline-flex;
   align-items: center;
   line-height: 0;
-  background: #fff;
-  border-radius: var(--r-sm);
-  padding: 3px 7px;
+  flex: none;
 }
 .fd-brand-mark img {
   display: block;
-  height: 20px;
+  height: 26px;
   width: auto;
 }
+/* The mark's own artwork is a fixed dark navy with no light colorway (see
+   FlytedeskBrand.tsx's comment) — on a dark surface it would otherwise vanish.
+   brightness(0) turns every opaque ink pixel pure black while leaving transparent
+   pixels transparent; invert(1) flips that black to white — same trick as
+   forcing a single-color mark to work on both themes without a second asset to
+   keep in sync. Light theme (the default, no selector needed) gets no filter and
+   shows the real navy ink, which is what the mark was actually drawn in. */
+[data-theme="dark"] .fd-brand-mark img {
+  filter: brightness(0) invert(1);
+}
 .fd-brand-sm .fd-brand-mark img,
 .fd-brand-mark-sm img {
-  height: 15px;
+  height: 19px;
 }
 .fd-brand-lg .fd-brand-mark img,
 .fd-brand-mark-lg img {
-  height: 26px;
+  height: 32px;
 }
 .fd-topbar {
   height: var(--topbar-h);
@@ -4059,7 +4073,7 @@
 
 /* --- menus (extends .fd-pop / .fd-opt) ----------------------------------- */
 .fd-pop-padded {
-  padding: 12px;
+  padding: var(--s-16);
 }
 .fd-menu {
   outline: none;