@floegence/floe-webapp-core 0.86.62 → 0.86.63

package/dist/surface.css

@@ -121,7 +121,12 @@
       .floe-floating-presence,
       [data-floe-surface-part='switch-thumb'],
       [data-floe-surface-part='radio-dot'],
-      [data-floe-surface-part='progress-fill']
+      [data-floe-surface-part='progress-fill'],
+      /* The travelling pill's transition is a motion timeline, not a palette
+       * fade. This rule sits after the segment-pill rule and shares its
+       * specificity, so without this exemption it would win and freeze the
+       * pill's transform. */
+      [data-floe-surface-part='segment-pill']
     )
   ) {
   transition-property: color, background-color, border-color, opacity;
@@ -171,6 +176,45 @@
   transition: none;
 }
 
+/* A tab strip that continues past its box fades toward that edge. The fade is
+ * part of the rail, not a decoration on the tabs, so it follows the scroll
+ * state instead of any one item's position. */
+[data-floe-surface-part='tab-rail'] {
+  --floe-rail-fade: 20px;
+  mask-image: none;
+}
+[data-floe-surface-part='tab-rail'][data-floe-overflow-start][data-floe-overflow-end] {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--floe-rail-fade),
+    #000 calc(100% - var(--floe-rail-fade)),
+    transparent 100%
+  );
+}
+[data-floe-surface-part='tab-rail'][data-floe-overflow-start]:not([data-floe-overflow-end]) {
+  mask-image: linear-gradient(to right, transparent 0, #000 var(--floe-rail-fade));
+}
+[data-floe-surface-part='tab-rail'][data-floe-overflow-end]:not([data-floe-overflow-start]) {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--floe-rail-fade)), transparent 100%);
+}
+
+/* A travelling pill is the selection, not a second copy of it: the faces under
+ * it stay flat so the only thing that moves is the material. It keeps the
+ * language's one motion family, and a reduced-motion request lands it in place
+ * without the sweep. */
+[data-floe-surface-part='segment-pill'] {
+  transition:
+    transform var(--floe-duration-base) var(--floe-ease-out),
+    width var(--floe-duration-base) var(--floe-ease-out);
+  will-change: transform, width;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-floe-surface-part='segment-pill'] {
+    transition: none;
+  }
+}
+
 /* A compound input has one decorative boundary, including host compositions
  * that contain an Input component. Dense nested actions stay flat. */
 [data-floe-input-surface] [data-floe-surface],
@@ -334,6 +378,14 @@
       border-color: var(--floe-line);
       --floe-surface-decoration: var(--floe-elevation-raised);
     }
+    /* The travelling pill is a selected tab at rest: same fill, same hairline,
+     * same first elevation step. It carries them by itself because it has no
+     * per-option state to inherit from. */
+    & [data-floe-surface-part='segment-pill'] {
+      background-color: var(--card);
+      border: 1px solid var(--floe-line);
+      --floe-surface-decoration: var(--floe-elevation-raised);
+    }
     & [data-floe-surface-part='segment'][aria-checked='false'] {
       background-color: transparent;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.86.62",
+  "version": "0.86.63",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",

package/dist/components/layout/BottomBar.d.ts

@@ -1,29 +0,0 @@
-import { type JSX } from 'solid-js';
-export interface BottomBarProps {
-    children?: JSX.Element;
-    class?: string;
-    /** Height class, defaults to 'h-5' (20px). Use Tailwind height classes like 'h-7' (28px). */
-    height?: string;
-}
-/**
- * Status bar at the bottom of the application
- */
-export declare function BottomBar(props: BottomBarProps): JSX.Element;
-/**
- * Bottom bar item
- */
-export interface BottomBarItemProps {
-    children: JSX.Element;
-    icon?: JSX.Element;
-    onClick?: () => void;
-    class?: string;
-}
-export declare function BottomBarItem(props: BottomBarItemProps): JSX.Element;
-/**
- * Status indicator dot
- */
-export interface StatusIndicatorProps {
-    status: 'connected' | 'disconnected' | 'connecting' | 'error';
-    label?: string;
-}
-export declare function StatusIndicator(props: StatusIndicatorProps): JSX.Element;

package/dist/components/layout/BottomBar.js

@@ -1,70 +0,0 @@
-import { insert as n, effect as c, className as i, createComponent as a, template as s, delegateEvents as m } from "solid-js/web";
-import { Show as u } from "solid-js";
-import { cn as f } from "../../utils/cn.js";
-import { useResolvedFloeConfig as b } from "../../context/FloeConfigContext.js";
-var h = /* @__PURE__ */ s("<footer data-floe-shell-slot=bottom-bar style=background-color:var(--activity-bar);border-top-color:var(--bottom-bar-border)>"), g = /* @__PURE__ */ s('<span class="w-2.5 h-2.5">'), v = /* @__PURE__ */ s("<button type=button>"), d = /* @__PURE__ */ s("<span>");
-function C(t) {
-  return (() => {
-    var r = h();
-    return n(r, () => t.children), c(() => i(r, f(t.height ?? "h-5", "shrink-0 flex items-center justify-between px-1.5", "bg-background border-t border-[var(--floe-line)]", "text-caption text-[var(--floe-ink-soft)] font-mono", t.class))), r;
-  })();
-}
-function $(t) {
-  const r = () => f("flex items-center gap-1 px-1 py-0.5 rounded-sm", t.onClick && "hover:bg-[var(--floe-state-hover)] cursor-pointer", "transition-colors duration-[var(--floe-duration-instant)]", t.class);
-  return a(u, {
-    get when() {
-      return t.onClick;
-    },
-    get fallback() {
-      return (() => {
-        var e = d();
-        return n(e, a(u, {
-          get when() {
-            return t.icon;
-          },
-          get children() {
-            var o = g();
-            return n(o, () => t.icon), o;
-          }
-        }), null), n(e, () => t.children, null), c(() => i(e, r())), e;
-      })();
-    },
-    get children() {
-      var e = v();
-      return e.$$click = () => t.onClick?.(), n(e, a(u, {
-        get when() {
-          return t.icon;
-        },
-        get children() {
-          var o = g();
-          return n(o, () => t.icon), o;
-        }
-      }), null), n(e, () => t.children, null), c(() => i(e, r())), e;
-    }
-  });
-}
-function y(t) {
-  const r = b(), e = {
-    connected: "bg-success",
-    disconnected: "bg-[var(--floe-ink-ghost)]",
-    connecting: "bg-warning animate-pulse",
-    error: "bg-error"
-  }, o = () => r.config.strings.statusIndicator;
-  return a($, {
-    get children() {
-      return [(() => {
-        var l = d();
-        return c(() => i(l, f("w-1.5 h-1.5 rounded-full", e[t.status]))), l;
-      })(), (() => {
-        var l = d();
-        return n(l, () => t.label ?? o()[t.status]), l;
-      })()];
-    }
-  });
-}
-m(["click"]);
-export {
-  C as BottomBar,
-  $ as BottomBarItem,
-  y as StatusIndicator
-};