ng-hub-ui-forms 22.4.0 → 22.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-hub-ui-forms",
-  "version": "22.4.0",
+  "version": "22.5.0",
   "license": "MIT",
   "description": "Accessible, signal-based form fields for Angular (input, textarea, slider, select, datepicker) with automatic error display for controls, FormGroups and FormArrays. Reactive Forms today, Signal Forms ready. Part of the ng-hub-ui family.",
   "author": "Carlos Morcillo <carlos.morcillo@me.com> (https://www.carlosmorcillo.com)",

package/{src/lib/styles → styles}/_tokens.scss

@@ -221,11 +221,11 @@
 
 	// ── Segmented ───────────────────────────────────────────────────────────────
 	--hub-segmented-bg: var(--hub-sys-surface-elevated, #f8f9fa);
-	// Optional single-slot accent. Its default (transparent) contributes nothing, so the selected
-	// pill keeps the neutral white surface below; set it — or apply a `[color]` / `data-variant` —
-	// to tint the pill. A custom variant re-bases `--hub-segmented-selected-bg` (mirrors the
-	// `--hub-table-accent` model), which both the sliding indicator and the multiple-mode pill read.
-	--hub-segmented-accent: transparent;
+	// Single-slot accent (mirrors `--hub-table-accent` / `--hub-btn-accent`). When a `[color]` is
+	// applied it is set — from a ds token or a literal colour — and the selected pill derives its
+	// surface and contrast text from it (see the `[data-variant]` rule in the component styles).
+	// With no `[color]` the neutral defaults below keep the white-pill look.
+	--hub-segmented-accent: var(--hub-sys-color-primary, #0d6efd);
 	--hub-segmented-selected-bg: var(--hub-sys-surface-page, #fff);
 	--hub-segmented-selected-color: var(--hub-sys-text-primary, #212529);
 	--hub-segmented-radius: var(--hub-ref-radius-md, 0.375rem);

package/{src/lib/styles → styles}/index.scss

@@ -13,4 +13,6 @@
 @use 'field';
 
 // One-call theming mixins (opt-in; forwarded so consumers can `@use` them from the package root).
+// `hub-forms-theme` themes the shared field chrome; `hub-segmented-theme` tunes `<hub-segmented>`.
+@forward 'mixins/forms-theme';
 @forward 'mixins/segmented-theme';

package/styles/mixins/_forms-theme.scss

@@ -0,0 +1,67 @@
+// ─────────────────────────────────────────────────────────────────────────
+// hub-forms-theme — one-call theming for the shared `ng-hub-ui-forms` chrome
+// ─────────────────────────────────────────────────────────────────────────
+//
+// Sets the cross-cutting `--hub-form-*` tokens that EVERY form control reads
+// (focus ring, validation accents, disabled state, motion) in a single include.
+// Every parameter is OPTIONAL and defaults to `null`: only the parameters you
+// pass are emitted, so the rest keep the library defaults. Token-based and
+// self-contained (no Bootstrap dependencies). For a specific control, layer the
+// matching component mixin on top (e.g. `hub-segmented-theme`).
+//
+// Apply it inside any selector that wraps the fields — a form, a container, a
+// route, or `:root` for a global theme.
+//
+// @example — brand focus ring + softer disabled state, globally:
+//
+//   @use 'ng-hub-ui-forms/styles' as *;
+//
+//   :root {
+//     @include hub-forms-theme(
+//       $focus-ring-color: var(--hub-sys-color-info-subtle),
+//       $disabled-opacity: 0.5
+//     );
+//   }
+//
+// scss-docs-start hub-forms-theme
+@mixin hub-forms-theme(
+	// ── Focus ring (shared by every control) ──
+	$focus-ring-color: null,   // focus-ring colour
+	$focus-ring-width: null,   // focus-ring width
+	// ── Validation accents ──
+	$invalid-color: null,      // invalid text + border colour
+	$valid-color: null,        // valid text + border colour
+	// ── State ──
+	$disabled-opacity: null,   // opacity applied to a disabled control
+	// ── Motion ──
+	$transition: null          // border/box-shadow transition shared by inputs
+) {
+	// Focus ring
+	@if $focus-ring-color != null {
+		--hub-form-focus-ring-color: #{$focus-ring-color};
+	}
+	@if $focus-ring-width != null {
+		--hub-form-focus-ring-width: #{$focus-ring-width};
+	}
+
+	// Validation accents (text + border move together)
+	@if $invalid-color != null {
+		--hub-form-invalid-color: #{$invalid-color};
+		--hub-form-invalid-border-color: #{$invalid-color};
+	}
+	@if $valid-color != null {
+		--hub-form-valid-color: #{$valid-color};
+		--hub-form-valid-border-color: #{$valid-color};
+	}
+
+	// State
+	@if $disabled-opacity != null {
+		--hub-form-disabled-opacity: #{$disabled-opacity};
+	}
+
+	// Motion
+	@if $transition != null {
+		--hub-form-transition: #{$transition};
+	}
+}
+// scss-docs-end hub-forms-theme

package/{src/lib/styles → styles}/mixins/_segmented-theme.scss

@@ -12,7 +12,7 @@
 //
 // @example — a compact, brand-accented bar with a rounded frame:
 //
-//   @use 'ng-hub-ui-forms/styles/mixins/segmented-theme' as *;
+//   @use 'ng-hub-ui-forms/styles' as *;
 //
 //   .view-switch {
 //     @include hub-segmented-theme(

package/types/ng-hub-ui-forms.d.ts

@@ -813,14 +813,20 @@ declare class HubSegmentedComponent extends HubFieldControl {
     /** Visual density. */
     readonly size: _angular_core.InputSignal<HubSegmentedSize>;
     /**
-     * Semantic accent for the selected pill. Drives `data-variant` on the bar, which re-bases the
-     * `--hub-segmented-selected-*` tokens. Built-in values map to the design-system palette
-     * (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `neutral`), but the set is
-     * OPEN — any custom string works as long as the consumer supplies the matching
-     * `--hub-segmented-selected-bg` / `--hub-segmented-selected-color` (or `--hub-segmented-accent`)
-     * for that `data-variant`. Empty string (default) keeps the neutral white-pill look.
+     * Accent for the selected pill. Accepts ANY colour value:
+     * - a built-in semantic name (`primary`, `success`, …) or any registered accent → resolves to
+     *   the matching `--hub-sys-color-*` design-system token;
+     * - a literal colour (`#ff0000`, `rgb(...)`, `oklch(...)`, `rebeccapurple`) → used as-is.
+     * Both the sliding indicator and the multiple-mode pill follow it, and the selected label gets a
+     * derived contrast colour automatically. Empty string (default) keeps the neutral white-pill look.
      */
     readonly color: _angular_core.InputSignal<string>;
+    /**
+     * Resolves {@link color} to a paintable accent for the `--hub-segmented-accent` slot: a bareword
+     * becomes a `--hub-sys-color-*` token with the word as raw fallback (so named CSS colours work
+     * too), while a literal `#hex` / `rgb()` / `oklch()` / `var()` is passed through unchanged.
+     */
+    protected readonly accentVar: _angular_core.Signal<string | null>;
     /** Label text. */
     readonly label: _angular_core.InputSignal<string>;
     /** Label display type (`stacked`, `horizontal`). */