@l3mpire/ui 3.2.1 → 3.3.0

package/USAGE.md

@@ -211,15 +211,17 @@ import { faStarOutline } from "@l3mpire/icons";
 <Badge variant="light" type="success" size="sm">Active</Badge>
 <Badge variant="outlined" type="critical" icon={faStarOutline}>99</Badge>
 
-// Categorical tone — overrides variant/type
+// Categorical tone — combines with variant (solid/light/outlined), overrides type
 <Badge tone="indigo">SaaS</Badge>
+<Badge variant="light" tone="amber">Manufacturing</Badge>
+<Badge variant="outlined" tone="emerald">Finance</Badge>
 ```
 
 | Prop | Values |
 |---|---|
 | `variant` | `"solid"`, `"light"`, `"outlined"` |
 | `type` | `"primary"`, `"success"`, `"critical"`, `"warning"`, `"neutral"` |
-| `tone` | `"indigo"`, `"rose"`, `"lime"`, `"violet"`, `"cyan"`, `"orange"`, `"emerald"`, `"fuchsia"`, `"amber"`, `"slate"` — categorical palette; overrides `variant`/`type` |
+| `tone` | `"indigo"`, `"rose"`, `"lime"`, `"violet"`, `"cyan"`, `"orange"`, `"emerald"`, `"fuchsia"`, `"amber"`, `"slate"` — categorical palette; combines with `variant`, overrides `type` |
 | `size` | `"sm"`, `"md"`, `"lg"` |
 | `icon` | `IconDefinition` (optional) |
 
@@ -902,6 +904,8 @@ import { faRocketOutline } from "@l3mpire/icons";
 
 Active tabs render with concave bottom corners that fuse into the bar divider (real browser-tab look). Inactive tabs get a hover fill + soft shadow on the inner pill (active tabs keep their bg on hover).
 
+The close `×` only appears **on hover** of a non-pinned tab, as an absolutely-positioned overlay with a gradient fade — it never takes layout space (the label slides under the gradient instead of being pushed). Set `pinned` to hide the close button entirely and show a **"Pinned tab"** tooltip on hover.
+
 | Prop (BrowserTab) | Values |
 |---|---|
 | `onAddTab` | `() => void` (shows + button) |
@@ -915,7 +919,8 @@ Active tabs render with concave bottom corners that fuse into the bar divider (r
 | `icon` | `IconDefinition` |
 | `badge` | `string` |
 | `isActive` | `boolean` |
-| `onClose` | `(e) => void` |
+| `pinned` | `boolean` (no close button, "Pinned tab" tooltip on hover) |
+| `onClose` | `(e) => void` (close `×` appears on hover only; ignored when `pinned`) |
 | `onRename` | `(newLabel: string) => void` (enables dbl-click rename) |
 
 ---

package/dist/index.d.mts

@@ -26,6 +26,12 @@ interface BrowserTabItemProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     badge?: string;
     isActive?: boolean;
+    /** Pinned tabs can't be closed and show a "Pinned tab" tooltip on hover. */
+    pinned?: boolean;
+    /** When true, an edit (pencil) button appears in the hover overlay, left of the close button. */
+    isEditable?: boolean;
+    /** Called when the edit button is clicked. */
+    onEdit?: (e: React.MouseEvent) => void;
     onClose?: (e: React.MouseEvent) => void;
     /** Called with the new label after double-click rename. Omit to disable rename. */
     onRename?: (newLabel: string) => void;

package/dist/index.d.ts

@@ -26,6 +26,12 @@ interface BrowserTabItemProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     badge?: string;
     isActive?: boolean;
+    /** Pinned tabs can't be closed and show a "Pinned tab" tooltip on hover. */
+    pinned?: boolean;
+    /** When true, an edit (pencil) button appears in the hover overlay, left of the close button. */
+    isEditable?: boolean;
+    /** Called when the edit button is clicked. */
+    onEdit?: (e: React.MouseEvent) => void;
     onClose?: (e: React.MouseEvent) => void;
     /** Called with the new label after double-click rename. Omit to disable rename. */
     onRename?: (newLabel: string) => void;