@open-rlb/ng-bootstrap 3.3.41 → 3.3.42

package/assets/scss/custom/components/_badge.scss

@@ -1,8 +1,7 @@
-@use "sass:color";
-// 
+@use 'sass:color';
+//
 // _badge.scss
-// 
-
+//
 
 .badge {
   &[href] {
@@ -30,42 +29,58 @@
 
 @each $color, $value in $theme-colors {
   .badge {
-  &.bg-#{$color} {
-    &[href] {
-      &:hover,
-      &:focus {
-        background-color: color.adjust($value, $lightness: -4%) !important;
+    &.bg-#{$color} {
+      &[href] {
+        &:hover,
+        &:focus {
+          background-color: color.adjust($value, $lightness: -4%) !important;
+        }
       }
     }
   }
-}
 
-.badge{
-  &.bg-light{
-    color: var(--#{$prefix}body-color);
+  .badge {
+    &.bg-light {
+      color: var(--#{$prefix}body-color);
 
-    &[href] {
-      &:hover,
-      &:focus {
-        color: var(--#{$prefix}body-color);
+      &[href] {
+        &:hover,
+        &:focus {
+          color: var(--#{$prefix}body-color);
+        }
       }
     }
   }
-}
 
-.badge-soft-#{$color} {
-      @include badge-variant-soft($value);
+  .badge-soft-#{$color} {
+    @include badge-variant-soft($value);
   }
-  
 }
 
-.rounded-pill{
-   padding-right: .6em;
-    padding-left: .6em;
+.rounded-pill {
+  padding-right: 0.6em;
+  padding-left: 0.6em;
 }
 
 // Dark badge
 
-.badge.bg-dark{
+.badge.bg-dark {
   color: var(--#{$prefix}light);
-}
+}
+
+// Bootstrap sizes the badge around the font's em box (line-height: 1 plus symmetric padding) and
+// places text on the baseline, so the box always reserves descender room below the baseline. Digits
+// and capitals never use it, leaving the glyphs visibly high in the pill — by 2.8px at a 10.8px font
+// size. Trimming to cap-height..baseline makes the padding wrap the real glyph box instead, so every
+// badge centres identically regardless of its content or its rendered size.
+//
+// Firefox has not shipped text-box-trim: without the @supports guard it would take the padding bump
+// without the trim, which is worse than the status quo.
+@supports (text-box: trim-both cap alphabetic) {
+  .badge {
+    text-box: trim-both cap alphabetic;
+    // Drive Bootstrap's own custom property rather than padding-top/bottom, so consumer overrides
+    // and py-* utilities still compose.
+    --#{$prefix}badge-padding-y: #{$badge-padding-y-trimmed};
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-rlb/ng-bootstrap",
-  "version": "3.3.41",
+  "version": "3.3.42",
   "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

@@ -205,24 +205,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
+    target="home"
+    active
+  >
+    Home
+  </rlb-tab>
+  <rlb-tab target="profile">
+    Profile
+    <span
+      rlb-badge
+      color="secondary"
+      [pill]="true"
+    >
+      3
+    </span>
+  </rlb-tab>
   <rlb-tab
-    title="Tab 3"
+    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.
 
 ---