@open-rlb/ng-bootstrap 3.3.41 → 3.3.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-rlb/ng-bootstrap",
-  "version": "3.3.41",
+  "version": "3.3.43",
   "peerDependencies": {
     "@angular/cdk": ">=21.0.0 <22.0.0",
     "@angular/common": ">=21.0.0 <22.0.0",

package/schematics/ng-add/claude-skills/rlb-components/SKILL.md

@@ -125,9 +125,21 @@ type TextAlignment = 'left' | 'center' | 'right';
 >
   3
 </span>
+<span
+  rlb-badge
+  color="warning"
+  [soft]="true"
+>
+  Pending
+</span>
 ```
 
-**Inputs:** `color`, `pill`, `border`, `hidden-text`, `class`, `badge-text-color`
+**Inputs:** `color`, `pill`, `border`, `soft`, `hidden-text`, `class`, `badge-text-color`
+
+`soft` (default `false`) swaps the solid fill for a tinted surface with emphasis text. It is
+theme-aware (re-derives under `[data-bs-theme]`) and AA-legible in both light and dark, unlike the
+solid variants whose fixed text colour fails on several colours. Also on the `[badge]` directive as
+`badge-soft` — ignored for `badge-dot`, which stays solid.
 
 ---
 
@@ -205,24 +217,55 @@ type TextAlignment = 'left' | 'center' | 'right';
 
 ## Tabs
 
+`rlb-tabs` holds the tab strip; `rlb-tab-content` holds the panes. Each `rlb-tab`'s `target`
+must equal its `rlb-tab-pane`'s `id`. Seed the initially-open tab/pane with `active`. The tab
+label is projected content, so you can put a `rlb-badge` count inside it.
+
 ```html
-<rlb-tabs
-  view="tab"
-  [vertical]="false"
-  fill="fill"
->
-  <rlb-tab title="Tab 1">Content for tab 1</rlb-tab>
-  <rlb-tab title="Tab 2">Content for tab 2</rlb-tab>
+<rlb-tabs view="tab">
   <rlb-tab
-    title="Tab 3"
+    target="home"
+    active
+  >
+    Home
+  </rlb-tab>
+  <rlb-tab target="profile">
+    Profile
+    <span
+      rlb-badge
+      color="secondary"
+      [pill]="true"
+    >
+      3
+    </span>
+  </rlb-tab>
+  <rlb-tab
+    target="messages"
     [disabled]="true"
   >
-    Disabled
+    Messages
   </rlb-tab>
 </rlb-tabs>
+
+<rlb-tab-content>
+  <rlb-tab-pane
+    id="home"
+    active
+  >
+    Home content.
+  </rlb-tab-pane>
+  <rlb-tab-pane id="profile">Profile content.</rlb-tab-pane>
+  <rlb-tab-pane id="messages">Messages content.</rlb-tab-pane>
+</rlb-tab-content>
 ```
 
-**Inputs:** `view` ('tab'|'pills'|'underline'|'none'), `vertical`, `fill` ('fill'|'justified'), `horizontal-alignment` ('center'|'end'), `id`, `class`
+**`rlb-tabs` inputs:** `view` ('tab'|'pills'|'underline'|'none'), `vertical`, `fill` ('fill'|'justified'), `horizontal-alignment` ('center'|'end'), `id`, `class`
+**`rlb-tab` inputs:** `target` (**required** — matches a pane `id`), `active`, `disabled`, `class`
+**`rlb-tab-pane` inputs:** `id` (**required**), `active`, `fade`
+
+> Switching is driven by Bootstrap's tab plugin — there is **no select/change output**, and
+> `active` only seeds the initial tab. For router-controlled or deep-linked tabs (active state
+> lives in the URL), drive the markup yourself with plain `nav-tabs` instead.
 
 ---
 

package/types/open-rlb-ng-bootstrap.d.ts

@@ -438,6 +438,7 @@ declare class BadgeComponent implements OnInit {
     color: _angular_core.InputSignal<Color | undefined>;
     hiddenText: _angular_core.InputSignal<string | undefined>;
     border: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    soft: _angular_core.InputSignalWithTransform<boolean, unknown>;
     cssClass: _angular_core.InputSignal<string | undefined>;
     textColor: _angular_core.InputSignal<string | undefined>;
     template: _angular_core.Signal<TemplateRef<any>>;
@@ -446,7 +447,7 @@ declare class BadgeComponent implements OnInit {
     constructor();
     ngOnInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "span[rlb-badge], img[rlb-badge]", never, { "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "hiddenText": { "alias": "hidden-text"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "cssClass": { "alias": "class"; "required": false; "isSignal": true; }; "textColor": { "alias": "badge-text-color"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "span[rlb-badge], img[rlb-badge]", never, { "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "hiddenText": { "alias": "hidden-text"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "soft": { "alias": "soft"; "required": false; "isSignal": true; }; "cssClass": { "alias": "class"; "required": false; "isSignal": true; }; "textColor": { "alias": "badge-text-color"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class BadgeDirective implements AfterViewInit {
@@ -459,6 +460,7 @@ declare class BadgeDirective implements AfterViewInit {
     textColor: _angular_core.InputSignal<string>;
     hiddenText: _angular_core.InputSignal<string | undefined>;
     dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    soft: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private badgeContent;
     private badgeElement;
     private elementRef;
@@ -469,7 +471,7 @@ declare class BadgeDirective implements AfterViewInit {
     private createBadgeElement;
     private castToString;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BadgeDirective, "[badge]", never, { "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "pill": { "alias": "badge-pill"; "required": false; "isSignal": true; }; "border": { "alias": "badge-border"; "required": false; "isSignal": true; }; "top": { "alias": "badge-top"; "required": false; "isSignal": true; }; "start": { "alias": "badge-start"; "required": false; "isSignal": true; }; "color": { "alias": "badge-color"; "required": false; "isSignal": true; }; "textColor": { "alias": "badge-text-color"; "required": false; "isSignal": true; }; "hiddenText": { "alias": "hidden-text"; "required": false; "isSignal": true; }; "dot": { "alias": "badge-dot"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BadgeDirective, "[badge]", never, { "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "pill": { "alias": "badge-pill"; "required": false; "isSignal": true; }; "border": { "alias": "badge-border"; "required": false; "isSignal": true; }; "top": { "alias": "badge-top"; "required": false; "isSignal": true; }; "start": { "alias": "badge-start"; "required": false; "isSignal": true; }; "color": { "alias": "badge-color"; "required": false; "isSignal": true; }; "textColor": { "alias": "badge-text-color"; "required": false; "isSignal": true; }; "hiddenText": { "alias": "hidden-text"; "required": false; "isSignal": true; }; "dot": { "alias": "badge-dot"; "required": false; "isSignal": true; }; "soft": { "alias": "badge-soft"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface BreadcrumbItem {