@flamingo-stack/openframe-frontend-core 0.0.661 → 0.0.662-snapshot.20260923194332

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.661",
+  "version": "0.0.662-snapshot.20260923194332",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/icons/elestio-logo.tsx

@@ -4,7 +4,10 @@ import React from 'react';
  * Official Elestio logo with unique IDs to prevent gradient/clip-path collisions
  * when the same SVG is rendered multiple times on the page.
  */
-/** @deprecated Use icons from icons-v2-generated instead. */
+/**
+ * @deprecated Use icons from icons-v2-generated instead. This component is retained
+ * only for existing usages; do not add new usages or new icons to this deprecated set.
+ */
 export const ElestioLogo = ({ className, ...props }: { className?: string } & React.SVGProps<SVGSVGElement>) => {
   // Generate unique ID suffix to avoid ID collisions between instances
   const uniqueId = React.useId();

package/src/components/navigation/index.ts

@@ -51,6 +51,8 @@ export { HeaderButton } from './header-button';
 export type { HeaderButtonProps } from './header-button';
 export { UnreadDot, UnreadCountBadge } from './unread-dot';
 export type { UnreadDotProps, UnreadCountBadgeProps } from './unread-dot';
+export { NavigationItemBadge } from './navigation-item-badge';
+export type { NavigationItemBadgeProps } from './navigation-item-badge';
 export { TicketAlertsButton } from './ticket-alerts-button';
 export type { TicketAlertsButtonProps } from './ticket-alerts-button';
 

package/src/components/navigation/mobile-burger-menu.tsx

@@ -8,6 +8,7 @@ import { cn } from '../../utils';
 import { Logout02Icon, PenEditIcon, UserSearchIcon } from '../icons-v2-generated';
 import { Button, SquareAvatar } from '../ui';
 import { OVERLAY_BACKDROP_CLASS } from '../ui/drawer';
+import { NavigationItemBadge } from './navigation-item-badge';
 
 // Header height constant — the unified top-navigation `small` bar (56px on all screens)
 const HEADER_HEIGHT = 56;
@@ -93,6 +94,9 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenuImpl({
           disabled && 'cursor-not-allowed opacity-50',
         )}
         aria-current={isActive ? 'page' : undefined}
+        // The same name the sidebar row announces — "Scripts (Beta)" — rather than
+        // the content read raw, which Chrome hands over as "Scripts BETA".
+        aria-label={item.badge ? `${item.label} (${item.badge})` : undefined}
       >
         {/* Icon */}
         {item.icon && (
@@ -104,14 +108,18 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenuImpl({
           </div>
         )}
 
-        {/* Label */}
-        <span
-          className={cn(
-            'flex-1 truncate text-left text-h6',
-            isActive && !disabled ? 'text-ods-accent' : 'text-ods-text-primary',
-          )}
-        >
-          {item.label}
+        {/* Label, with its stamp when the entry carries one. The button's
+            accessible name is its content, so the stamp reads as part of it. */}
+        <span className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xxs)]">
+          <span
+            className={cn(
+              'min-w-0 truncate text-left text-h6',
+              isActive && !disabled ? 'text-ods-accent' : 'text-ods-text-primary',
+            )}
+          >
+            {item.label}
+          </span>
+          {item.badge && <NavigationItemBadge compact label={item.badge} />}
         </span>
       </button>
     );

package/src/components/navigation/navigation-item-badge.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { cn } from '../../utils/cn';
+import { Tag } from '../ui/tag';
+
+export interface NavigationItemBadgeProps {
+  label: string;
+  /**
+   * The chip at the badge scale — `h-5`, the word at `text-badge` — for the
+   * mobile burger card. The card is a 40px `text-h6` row in a two-column grid,
+   * and the default 32px chip stretches its grid row 16px past its neighbours.
+   * The sidebar row is 56px and takes the default chip, the same one Settings
+   * stamps "Beta" with.
+   */
+  compact?: boolean;
+  className?: string;
+  'aria-hidden'?: boolean;
+}
+
+/**
+ * The stamp a navigation entry carries after its label
+ * (`NavigationSidebarItem.badge`): the `warning` `Tag`, the same chip Settings
+ * stamps "Beta" with, on the two surfaces that draw an entry with its label —
+ * the expanded sidebar row and the mobile burger card. The minimized rail draws
+ * none; there the row's tooltip and accessible name carry the word.
+ */
+export function NavigationItemBadge({ label, compact = false, className, ...rest }: NavigationItemBadgeProps) {
+  // `pointer-events-none`: the chip's hover shade is for chips you act on. In a
+  // nav row the row is the target, and the cursor passes through to it.
+  return (
+    <Tag
+      as="span"
+      label={label}
+      variant="warning"
+      className={cn('pointer-events-none shrink-0', compact && 'h-5 px-[var(--spacing-system-xxs)]', className)}
+      labelClassName={compact ? 'text-badge' : undefined}
+      {...rest}
+    />
+  );
+}

package/src/components/navigation/navigation-sidebar-item.tsx

@@ -4,6 +4,7 @@ import { cloneElement, memo, type ReactElement, type ReactNode, type MouseEvent
 import Link from '../../embed-shims/next-link';
 import type { NavigationSidebarItem } from '../../types/navigation';
 import { cn } from '../../utils';
+import { NavigationItemBadge } from './navigation-item-badge';
 import { UnreadDot } from './unread-dot';
 
 interface IconProps {
@@ -50,6 +51,9 @@ export const NavigationSidebarItemButton = memo(function NavigationSidebarItemBu
 }: NavigationSidebarItemButtonProps) {
   const unreadCount = item.unreadCount ?? 0;
   const hasUnread = unreadCount > 0;
+  // The accessible name carries the stamp — "Devices (Beta)" — because `aria-label`
+  // replaces the content; the rail's tooltip is the same string.
+  const name = item.badge ? `${item.label} (${item.badge})` : item.label;
 
   const className = cn(
     // `isolate` scopes the hover layer's negative z-index to this row, so it
@@ -97,14 +101,21 @@ export const NavigationSidebarItemButton = memo(function NavigationSidebarItemBu
         {hasUnread && !showLabel && <UnreadDot size="fixed" />}
       </div>
 
+      {/* The label column: the label and its stamp, fading together on collapse.
+          The wrapper clips — a `shrink-0` stamp beside a zero-width label would
+          otherwise overflow the rail and hand the sidebar a horizontal scrollbar.
+          The rail draws no stamp of its own: a word under one glyph read as a
+          caption the other rows lack, so there the row's tooltip and accessible
+          name carry it. */}
       <span
         className={cn(
-          'flex-1 truncate text-left transition-[opacity,margin-left] duration-300 text-h4',
+          'flex min-w-0 flex-1 items-center overflow-hidden text-left transition-[opacity,margin-left] duration-300',
           showLabel ? 'ml-[var(--spacing-system-xs)] opacity-100' : 'ml-0 opacity-0',
         )}
         aria-hidden={!showLabel}
       >
-        {item.label}
+        <span className="min-w-0 truncate text-h4">{item.label}</span>
+        {item.badge && <NavigationItemBadge label={item.badge} className="ml-[var(--spacing-system-xs)] shrink-0" />}
       </span>
 
       {hasUnread && showLabel && (
@@ -117,8 +128,8 @@ export const NavigationSidebarItemButton = memo(function NavigationSidebarItemBu
 
   const shared = {
     className,
-    title: !showLabel ? item.label : undefined,
-    'aria-label': item.label,
+    title: !showLabel ? name : undefined,
+    'aria-label': name,
     'aria-current': isActive ? ('page' as const) : undefined,
   };
 

package/src/stories/AppLayout.stories.tsx

@@ -37,6 +37,7 @@ const defaultNavigationItems: NavigationSidebarConfig['items'] = [
     label: 'Scripts',
     icon: <BracketCurlyIcon size={24} />,
     path: '/scripts',
+    badge: 'Beta',
   },
 ];
 

package/src/types/navigation.ts

@@ -165,6 +165,14 @@ export interface NavigationSidebarItem {
   icon: React.ReactNode;
   path?: string;
   unreadCount?: number;
+  /**
+   * A stamp after the label — "Beta" on a module still behind a flag. One short
+   * word, drawn as a chip beside the label in the expanded sidebar and the mobile
+   * menu; the minimized rail carries it only in the row's tooltip and accessible
+   * name. Cased as it should be read ("Beta"): the surfaces upper-case it
+   * themselves, and the accessible name becomes "Devices (Beta)".
+   */
+  badge?: string;
   isActive?: boolean;
   onClick?: () => void;
   children?: NavigationSidebarItem[];