fix(ui): styles pass — input bg, toggle checkbox, gradient titles, themeable tooltip/grid/scrollbar

Patch (no API/behaviour breaks; release-please → 3.4.x):
- ColorInput/NumberInput: pin --bim-input--bgc to bg-contrast-20 (#3C3C41),
  not the base Input's contrast-50 (#76767B); slider fill radius.
- Checkbox: [toggle] switch mode (sliding knob in a pill track).
- Label: [gradient] text mode + --bim-label--gradient.
- Panel/Section: gradient header titles via bim-label.
- Tooltip: themeable vars + self-healing reparent fix (no orphaning).
- Grid: themeable divider colour. Manager: scrollbar colour vars.

Author: agviegas

packages/core/src/components/Button/index.ts

@@ -210,6 +210,15 @@ export class Button extends LitElement {
   /** @deprecated Use `<bim-tooltip>` inside the button instead. */
   private _tooltipText?: string;
 
+  /**
+   * The text of the tooltip to be displayed when hovering over the button.
+   * @type {string}
+   * @default undefined
+   * @example <bim-button label="Click me" tooltip-text="This is a tooltip"></bim-button>
+   * @example const button = document.createElement('bim-button');
+   *          button.label = 'Click me';
+   *          button.tooltipText = 'This is a tooltip';
+   */
   @property({ type: String, attribute: "tooltip-text", reflect: true })
   get tooltipText() { return this._tooltipText; }
   set tooltipText(value: string | undefined) {

packages/core/src/components/Checkbox/index.ts

@@ -141,6 +141,56 @@ export class Checkbox extends LitElement implements HasValue<boolean> {
         transform: translateY(-100%) scale(1);
       }
     }
+
+    /* ── Toggle / switch mode: bim-checkbox[toggle] ──────────────────
+       Renders a sliding knob in a pill track instead of the check box.
+       Knob is a dark ball with an outline; track turns main-base when on. */
+    .switch-knob {
+      display: none;
+    }
+
+    :host([toggle]) .input-container {
+      width: 2rem;
+      height: 1.1rem;
+    }
+
+    :host([toggle]) input {
+      width: 100%;
+      height: 100%;
+      border-radius: 1rem;
+      box-shadow: none;
+      background: var(--bim-checkbox--toggle-track-c, var(--bim-ui_bg-contrast-30));
+      transition: background-color 0.2s;
+    }
+
+    :host([toggle]) input:checked,
+    :host([toggle]) input:indeterminate {
+      background: var(--bim-checkbox--toggle-track-on-c, var(--bim-ui_main-base));
+    }
+
+    :host([toggle]) input + svg {
+      display: none;
+    }
+
+    :host([toggle]) .switch-knob {
+      display: block;
+      position: absolute;
+      top: 50%;
+      left: 0.15rem;
+      width: 0.8rem;
+      height: 0.8rem;
+      border-radius: 50%;
+      background: var(--bim-checkbox--toggle-knob-c, var(--bim-ui_bg-contrast-80));
+      border: 1px solid var(--bim-checkbox--toggle-knob-bd-c, var(--bim-ui_bg-contrast-40));
+      box-sizing: border-box;
+      transform: translateY(-50%);
+      transition: left 0.2s ease;
+      pointer-events: none;
+    }
+
+    :host([toggle]) input:checked ~ .switch-knob {
+      left: calc(100% - 0.95rem);
+    }
   `;
 
   /**
@@ -223,6 +273,17 @@ export class Checkbox extends LitElement implements HasValue<boolean> {
   @property({ type: Boolean, reflect: true })
   inverted = false;
 
+  /**
+   * Renders the checkbox as a toggle SWITCH (a sliding knob in a pill track)
+   * instead of a checkbox box. The knob is a dark ball with an outline; the
+   * track turns `--bim-ui_main-base` when on. Customise via
+   * `--bim-checkbox--toggle-track-c` / `-track-on-c` / `-knob-c` / `-knob-bd-c`.
+   * @default false
+   * @example <bim-checkbox toggle checked></bim-checkbox>
+   */
+  @property({ type: Boolean, reflect: true })
+  toggle = false;
+
   /**
    * A getter that returns the current checked state of the checkbox. This is useful for retrieving the checkbox's value in form submissions or JavaScript interactions as it provides a consistent `value` property as many other components.
    * @type {boolean}
@@ -280,6 +341,7 @@ export class Checkbox extends LitElement implements HasValue<boolean> {
             .disabled="${this.disabled}"
           />
           ${this.indeterminate ? ICON_INDETERMINATE : ICON_CHECK}
+          <span class="switch-knob"></span>
         </div>
       </label>
     `;

packages/core/src/components/ColorInput/index.ts

@@ -17,6 +17,11 @@ export class ColorInput extends LitElement implements HasValue, HasName {
     :host {
       /* flex: 1; */
       display: block;
+      /* Give the field a single dark surface (the SAME way NumberInput does),
+         so the control reads as one box. The swatch/hex sit inside bim-input's
+         padded field — NOT in a second nested background (which looked like a
+         "double background"). */
+      --bim-input--bgc: var(--bim-color-input--bgc, var(--bim-ui_bg-contrast-20));
     }
 
     :host(:focus) {

packages/core/src/components/Grid/index.ts

@@ -84,7 +84,7 @@ export class Grid<
     }
     
     .grid-divider:hover > div {
-      background-color: var(--bim-ui_accent-base);
+      background-color: var(--bim-grid--divider-c, var(--bim-ui_main-base));
     }
     
     .divider-horizontal {

packages/core/src/components/Label/index.ts

@@ -48,6 +48,22 @@ export class Label extends LitElement {
       overflow: hidden;
     }
 
+    /* Gradient text: the label text fades along a gradient (the icon is not
+       affected). Customise the gradient via --bim-label--gradient. */
+    :host([gradient]) .parent p {
+      background: var(
+        --bim-label--gradient,
+        linear-gradient(
+          90deg,
+          var(--bim-ui_bg-contrast-100) 0%,
+          var(--bim-ui_bg-contrast-60) 100%
+        )
+      );
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
     :host([label-hidden]) .parent p,
     :host(:empty) .parent p {
       display: none;
@@ -116,6 +132,14 @@ export class Label extends LitElement {
   @property({ type: Boolean, reflect: true })
   vertical = false;
 
+  /**
+   * When `true`, the label text is painted with a gradient (the icon is left
+   * untouched). Customise the gradient via the `--bim-label--gradient` CSS var.
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  gradient = false;
+
   /**
    * Sets the label text programmatically, bypassing the slot.
    * Useful when building a dynamic UI via `document.createElement`.

packages/core/src/components/NumberInput/index.ts

@@ -14,7 +14,8 @@ export class NumberInput extends LitElement implements HasValue, HasName {
     :host {
       --bim-input--olw: var(--bim-number-input--olw, 2px);
       --bim-input--olc: var(--bim-number-input--olc, transparent);
-      --bim-input--bdrs: var(--bim-number-input--bdrs, var(--bim-ui_size-4xs));
+      --bim-input--bdrs: var(--bim-number-input--bdrs, var(--bim-ui_size-2xs));
+      --bim-input--bgc: var(--bim-number-input--bgc, var(--bim-ui_bg-contrast-20));
       --bim-input--p: 0 0.375rem;
       /* flex: 1; */
       display: block;
@@ -79,7 +80,11 @@ export class NumberInput extends LitElement implements HasValue, HasName {
       position: absolute;
       top: 0;
       left: 0;
-      border-radius: var(--bim-input--bdrs, var(--bim-ui_size-4xs));
+      /* No radius on the fill itself — the field (.input) is rounded with
+         overflow:hidden, so the fill's LEFT edge is clipped to the field's
+         corner while its right edge stays a straight cut mid-field (the
+         expected slider look). Rounding the fill would round it mid-field. */
+      border-radius: 0;
     }
 
     bim-input {

packages/core/src/components/Panel/src/Panel.ts

@@ -211,6 +211,15 @@ export class Panel extends LitElement implements HasName {
   @property({ type: Boolean, attribute: "header-hidden", reflect: true })
   headerHidden = false;
 
+  /**
+   * When `true` (default), the panel's header title is rendered with gradient
+   * text (via the underlying bim-label). Set `false` for a flat title color.
+   * Customise the gradient with the `--bim-label--gradient` CSS variable.
+   * @default true
+   */
+  @property({ type: Boolean, reflect: true })
+  gradient = true;
+
   /**
    * A record that maps element names or labels to transformation functions.
    * This record is used to transform the values from elements before they are returned as part of the `value` property.
@@ -301,7 +310,7 @@ export class Panel extends LitElement implements HasName {
         ${this.label || this.name || this.icon
           ? html`
             <div class="header">
-              <bim-label .icon=${this.icon}>${this.label || this.name}</bim-label>
+              <bim-label ?gradient=${this.gradient} .icon=${this.icon}>${this.label || this.name}</bim-label>
               <div class="header-end">
                 <slot name="header-end"></slot>
               </div>

packages/core/src/components/Panel/src/Section.ts

@@ -185,6 +185,15 @@ export class PanelSection extends LitElement implements HasName {
   @property({ type: Boolean, reflect: true })
   fixed?: boolean;
 
+  /**
+   * When `true` (default), the section's header title is rendered with gradient
+   * text (matching bim-panel). Set `false` for a flat title color. Customise via
+   * the `--bim-label--gradient` CSS variable.
+   * @default true
+   */
+  @property({ type: Boolean, reflect: true })
+  gradient = true;
+
   /**
    * Controls the collapsed state of the panel section. When `collapsed` is true, the content of the section is hidden, and only the header is visible. This property can be toggled to show or hide the section's content, and is reflected to an attribute for easy HTML or JavaScript manipulation. Note that sections marked as `fixed` ignore changes to this property.
    * @type {Boolean}
@@ -287,7 +296,7 @@ export class PanelSection extends LitElement implements HasName {
         @keydown=${this.onHeaderKeydown}
       >
         ${this.label || this.icon || this.name
-          ? html`<bim-label aria-hidden="true" .icon=${this.icon}>${this.label}</bim-label>`
+          ? html`<bim-label aria-hidden="true" ?gradient=${this.gradient} .icon=${this.icon}>${this.label}</bim-label>`
           : null}
         <div class="header-end">
           <slot name="header-end"></slot>