@flamingo-stack/openframe-frontend-core 0.0.731 → 0.0.732

package/dist/components/ui/tab-navigation.js

@@ -130,7 +130,23 @@ const TabBar = memo(function TabBarImpl({
   const isPlaced = indicator.width > 0;
   const activeProgress = tabs.find((tab) => tab.id === activeTab)?.progress;
   const hasProgress = typeof activeProgress === "number";
-  const progress = hasProgress ? Math.max(0, Math.min(1, activeProgress)) : 1;
+  const target = hasProgress ? Math.max(0, Math.min(1, activeProgress)) : 1;
+  const [run, setRun] = useState({ tab: null, progress: 0 });
+  const startsOver = hasProgress && (run.tab !== activeTab || target < run.progress);
+  if (hasProgress && !startsOver && run.progress !== target) setRun({ tab: activeTab, progress: target });
+  useEffect(() => {
+    if (!startsOver) return void 0;
+    let second = 0;
+    const first = requestAnimationFrame(() => {
+      second = requestAnimationFrame(() => setRun({ tab: activeTab, progress: target }));
+    });
+    return () => {
+      cancelAnimationFrame(first);
+      cancelAnimationFrame(second);
+    };
+  }, [startsOver, activeTab, target]);
+  const progress = startsOver ? 0 : target;
+  const activeAccent = tabs.find((tab) => tab.id === activeTab)?.accent;
   const indicatorStyle = {
     width: `${indicator.width * progress}px`,
     transform: `translateX(${indicator.left}px)`,
@@ -152,7 +168,7 @@ const TabBar = memo(function TabBarImpl({
       "div",
       {
         ref: scrollRef,
-        className: "scrollbar-hide relative flex h-full items-center justify-start gap-[var(--spacing-system-xxs)] overflow-x-auto overflow-y-hidden",
+        className: "scrollbar-hide relative flex h-full items-center justify-start overflow-x-auto overflow-y-hidden",
         children: [
           tabs.map((tab) => {
             const isActive = activeTab === tab.id;
@@ -164,26 +180,19 @@ const TabBar = memo(function TabBarImpl({
                 onClick: () => onTabChange(tab.id),
                 "aria-label": tab.badge ? `${tab.label} (${tab.badge})` : void 0,
                 className: cn(
-                  "relative flex shrink-0 cursor-pointer items-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]",
+                  "group relative flex shrink-0 cursor-pointer items-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]",
                   tabAlign === "start" ? "justify-start text-left" : "justify-center",
                   // Named rather than `transition-all`: the only thing that moves
-                  // here is colour. `all` also made the browser re-check every
-                  // property each frame, including the background GRADIENT — which
-                  // never animated anyway, since the inactive state has no
-                  // background-image to interpolate from.
+                  // here is colour.
                   "border-none bg-transparent outline-none transition-colors duration-200",
                   // `outline-none` above drops the browser's own focus ring, so
                   // put one back or the strip is un-navigable by keyboard — you
                   // can tab through it with nothing to show where you are. Inset,
-                  // so it stays within the button instead of overlapping the tab
-                  // sitting 4px away.
+                  // so it stays within the button: the tabs touch.
                   "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus",
                   stretchTabs && "flex-1",
-                  tab.avatar && "gap-[var(--spacing-system-xsf)]",
-                  // Known limitation: ODS color vars hold hex values, so Tailwind
-                  // alpha modifiers (to-ods-accent/10) silently produce no CSS.
-                  // color-mix() accepts hex, so we derive the 10%-alpha stop from the token.
-                  isActive ? "bg-gradient-to-b from-transparent to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]" : "hover:bg-gradient-to-b hover:from-transparent hover:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]"
+                  tab.avatar && "gap-[var(--spacing-system-xsf)]"
+                  // The open tab is marked by the underline alone: no surface of its own.
                 ),
                 children: [
                   tab.avatar ? /* @__PURE__ */ jsxs("div", { className: "relative flex shrink-0 items-center justify-center", children: [
@@ -195,8 +204,9 @@ const TabBar = memo(function TabBarImpl({
                       {
                         className: cn(
                           "h-4 w-4 transition-colors content-md:h-6 content-md:w-6",
-                          isActive ? "text-ods-accent" : "text-ods-text-secondary"
-                        )
+                          isActive ? !tab.accent && "text-ods-accent" : "text-ods-text-secondary group-hover:text-ods-text-primary"
+                        ),
+                        style: isActive && tab.accent ? { color: tab.accent } : void 0
                       }
                     ),
                     tab.indicator && /* @__PURE__ */ jsx(StatusDot, { indicator: tab.indicator, className: "absolute right-0 top-[-3px]" })
@@ -211,7 +221,7 @@ const TabBar = memo(function TabBarImpl({
                       {
                         className: cn(
                           "whitespace-nowrap transition-colors text-h4",
-                          isActive ? "text-ods-text-primary" : "text-ods-text-secondary"
+                          isActive ? "text-ods-text-primary" : "text-ods-text-secondary group-hover:text-ods-text-primary"
                         ),
                         children: tab.label
                       }
@@ -252,11 +262,11 @@ const TabBar = memo(function TabBarImpl({
               "aria-hidden": true,
               "data-testid": "tab-navigation-underline",
               className: cn(
-                "pointer-events-none absolute bottom-0 left-0 bg-ods-accent motion-reduce:transition-none",
-                hasProgress ? "h-0.5" : "h-1",
+                "pointer-events-none absolute bottom-0 left-0 h-1 motion-reduce:transition-none",
+                !activeAccent && "bg-ods-accent",
                 !hasProgress && shouldAnimateIndicator && "transition-[transform,width,opacity] duration-200 ease-out"
               ),
-              style: indicatorStyle
+              style: activeAccent ? { ...indicatorStyle, backgroundColor: activeAccent } : indicatorStyle
             }
           )
         ]

package/dist/{devices-7MHSJNXS.cjs → devices-A6SFNGE4.cjs}

@@ -11,22 +11,22 @@ require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunk2UNQJVYNcjs = require('./chunk-2UNQJVYN.cjs');
-require('./chunk-HLIJ3U2T.cjs');
-require('./chunk-RAHRDJBP.cjs');
-require('./chunk-FKKUQK4C.cjs');
+var _chunk22ZK7BA3cjs = require('./chunk-22ZK7BA3.cjs');
+require('./chunk-QMTC3BK3.cjs');
+require('./chunk-MEDDKM3A.cjs');
+require('./chunk-G37LT2ID.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-BFHLGEJK.cjs');
+require('./chunk-SJRR745G.cjs');
 require('./chunk-GID62YEN.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
 require('./chunk-OXJ57643.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-A4HNF4MP.cjs');
-require('./chunk-HY2KTQSL.cjs');
-require('./chunk-HEOD765R.cjs');
+require('./chunk-6KDGIOLP.cjs');
+require('./chunk-ZWMPAFGB.cjs');
+require('./chunk-HH4BMYDX.cjs');
 require('./chunk-HZJRERJW.cjs');
 require('./chunk-E3N24573.cjs');
 require('./chunk-MJGX357L.cjs');
@@ -1818,17 +1818,17 @@ require('./chunk-LMBYZITR.cjs');
 require('./chunk-TMVC7S2R.cjs');
 require('./chunk-IYHH5EIO.cjs');
 require('./chunk-XIBCMGBW.cjs');
-require('./chunk-YJFN2W7A.cjs');
-require('./chunk-YUXRIR45.cjs');
-require('./chunk-2WXLQ5R5.cjs');
+require('./chunk-RIXGLS5Y.cjs');
+require('./chunk-CC3LINHF.cjs');
+require('./chunk-HELVKMRG.cjs');
 require('./chunk-JKX2C3I2.cjs');
 require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-6V4GEE55.cjs');
-require('./chunk-RBOIGJYF.cjs');
-require('./chunk-BE2WAMG5.cjs');
+require('./chunk-TLDCSTTQ.cjs');
+require('./chunk-XOQ2UUVS.cjs');
+require('./chunk-AEVGCB3Y.cjs');
 require('./chunk-YADG5Q7C.cjs');
 require('./chunk-NYY25425.cjs');
 require('./chunk-KLXHCNDC.cjs');
@@ -1841,7 +1841,7 @@ require('./chunk-ORO54HDF.cjs');
 require('./chunk-RUHKTWGB.cjs');
 require('./chunk-BLH2SFOO.cjs');
 require('./chunk-EAY6ZUES.cjs');
-require('./chunk-LCTDHLDL.cjs');
+require('./chunk-PX7FY655.cjs');
 require('./chunk-CW3ML76U.cjs');
 require('./chunk-7DUXR4HL.cjs');
 require('./chunk-MANNIJ42.cjs');
@@ -1865,14 +1865,14 @@ require('./chunk-3ATAYP36.cjs');
 // src/components/product-demo/screens/devices.tsx
 var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
-var TOOLBAR = { ..._chunk2UNQJVYNcjs.IDLE_DEVICES_TOOLBAR, searchValue: _chunkWFPCCBOMcjs.DEVICES_SEARCH_QUERY };
+var TOOLBAR = { ..._chunk22ZK7BA3cjs.IDLE_DEVICES_TOOLBAR, searchValue: _chunkWFPCCBOMcjs.DEVICES_SEARCH_QUERY };
 var NO_HEADER = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {});
 var HIDDEN_WHEN_COMPACT = ["organization"];
 function DevicesScreen({ compact = false }) {
   const cast = _chunkII4QMH26cjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => _chunkWFPCCBOMcjs.buildWindowsDevicesFixture.call(void 0, cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk2UNQJVYNcjs.DevicesPanelView,
+    _chunk22ZK7BA3cjs.DevicesPanelView,
     {
       className: "p-[var(--spacing-system-l)]",
       headerSlot: NO_HEADER,