@mintplayer/ng-bootstrap 21.30.0 → 21.31.0

package/fesm2022/mintplayer-ng-bootstrap-color-picker.mjs

@@ -1,8 +1,10 @@
 import * as i0 from '@angular/core';
 import { viewChild, input, model, signal, computed, ChangeDetectionStrategy, Component, Directive, inject, forwardRef, output, effect } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { Subject } from 'rxjs';
+import { BsToggleButtonComponent } from '@mintplayer/ng-bootstrap/toggle-button';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
  * Single source of truth for color-space conversions used by the picker.
@@ -166,9 +168,19 @@ class BsSliderComponent {
         this.thumb = viewChild.required('thumb');
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.value = model(0.5, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Accessible name for SR users. e.g. "Brightness", "Alpha", "Hue". */
+        this.ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Multiplier applied to the 0..1 value when reporting it through aria-valuenow / aria-valuemax / aria-valuetext. 100 = percent (default); 360 = degrees; 255 = byte; etc. */
+        this.valueScale = input(100, ...(ngDevMode ? [{ debugName: "valueScale" }] : /* istanbul ignore next */ []));
+        /** Suffix appended to aria-valuetext after the scaled number. Defaults to "%". Use "°" for hue, "" for unitless. */
+        this.valueUnit = input('%', ...(ngDevMode ? [{ debugName: "valueUnit" }] : /* istanbul ignore next */ []));
         this.isPointerDown = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDown" }] : /* istanbul ignore next */ []));
         this.thumbLeft = computed(() => `${this.value() * 100}%`, ...(ngDevMode ? [{ debugName: "thumbLeft" }] : /* istanbul ignore next */ []));
         this.cursorClass = computed(() => 'position-absolute top-0 ' + (this.isPointerDown() ? 'cursor-grabbing' : 'cursor-grab'), ...(ngDevMode ? [{ debugName: "cursorClass" }] : /* istanbul ignore next */ []));
+        /** Scaled current value for aria-valuenow (e.g. 0..100 for percent, 0..360 for hue). */
+        this.ariaValueNow = computed(() => Math.round(this.value() * this.valueScale()), ...(ngDevMode ? [{ debugName: "ariaValueNow" }] : /* istanbul ignore next */ []));
+        /** Human-readable value for SR with the configured unit. */
+        this.ariaValueText = computed(() => `${this.ariaValueNow()}${this.valueUnit()}`, ...(ngDevMode ? [{ debugName: "ariaValueText" }] : /* istanbul ignore next */ []));
     }
     onPointerDown(ev) {
         if (this.disabled())
@@ -188,6 +200,41 @@ class BsSliderComponent {
     onPointerUp(_ev) {
         this.isPointerDown.set(false);
     }
+    onKeydown(ev) {
+        if (this.disabled())
+            return;
+        const cur = this.value();
+        const step = ev.shiftKey ? 0.001 : 0.01; // 1% default, 0.1% with Shift
+        const pageStep = 0.1; // 10% with PageUp/PageDown
+        let next = null;
+        switch (ev.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                next = Math.min(1, cur + step);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                next = Math.max(0, cur - step);
+                break;
+            case 'PageUp':
+                next = Math.min(1, cur + pageStep);
+                break;
+            case 'PageDown':
+                next = Math.max(0, cur - pageStep);
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = 1;
+                break;
+            default:
+                return;
+        }
+        ev.preventDefault();
+        if (next !== cur)
+            this.value.set(next);
+    }
     updateColor(ev) {
         const rect = this.track().nativeElement.getBoundingClientRect();
         const clientX = 'touches' in ev ? ev.touches[0].clientX : ev.clientX;
@@ -195,16 +242,26 @@ class BsSliderComponent {
         this.value.set(Math.max(0, Math.min(1, percent)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: BsSliderComponent, isStandalone: true, selector: "bs-slider", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:mouseup": "onPointerUp($event)" }, classAttribute: "d-block position-relative" }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper d-block position-relative\">\n    <div #track class=\"track2\"\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\">\n        <ng-content select=\"[bsTrack]\"></ng-content>\n    </div>\n    <div #thumb\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\"\n        [class]=\"cursorClass()\"\n        [style.left]=\"thumbLeft()\">\n        <ng-content select=\"[bsThumb]\"></ng-content>\n    </div>\n</div>\n", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: BsSliderComponent, isStandalone: true, selector: "bs-slider", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, valueScale: { classPropertyName: "valueScale", publicName: "valueScale", isSignal: true, isRequired: false, transformFunction: null }, valueUnit: { classPropertyName: "valueUnit", publicName: "valueUnit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "slider", "aria-valuemin": "0", "aria-orientation": "horizontal" }, listeners: { "document:mousemove": "onPointerMove($event)", "document:mouseup": "onPointerUp($event)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-valuemax": "valueScale()", "attr.aria-valuenow": "ariaValueNow()", "attr.aria-valuetext": "ariaValueText()", "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? -1 : 0" }, classAttribute: "d-block position-relative" }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper d-block position-relative\">\n    <div #track class=\"track2\"\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\">\n        <ng-content select=\"[bsTrack]\"></ng-content>\n    </div>\n    <div #thumb\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\"\n        [class]=\"cursorClass()\"\n        [style.left]=\"thumbLeft()\">\n        <ng-content select=\"[bsThumb]\"></ng-content>\n    </div>\n</div>\n", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}:host ::ng-deep .track{height:8px;border-radius:8px}:host ::ng-deep .thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-slider', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'd-block position-relative',
+                        'role': 'slider',
+                        'aria-valuemin': '0',
+                        'aria-orientation': 'horizontal',
+                        '[attr.aria-valuemax]': 'valueScale()',
+                        '[attr.aria-valuenow]': 'ariaValueNow()',
+                        '[attr.aria-valuetext]': 'ariaValueText()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.tabindex]': 'disabled() ? -1 : 0',
                         '(document:mousemove)': 'onPointerMove($event)',
                         '(document:mouseup)': 'onPointerUp($event)',
-                    }, template: "<div class=\"wrapper d-block position-relative\">\n    <div #track class=\"track2\"\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\">\n        <ng-content select=\"[bsTrack]\"></ng-content>\n    </div>\n    <div #thumb\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\"\n        [class]=\"cursorClass()\"\n        [style.left]=\"thumbLeft()\">\n        <ng-content select=\"[bsThumb]\"></ng-content>\n    </div>\n</div>\n", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}\n"] }]
-        }], propDecorators: { track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], thumb: [{ type: i0.ViewChild, args: ['thumb', { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                        '(keydown)': 'onKeydown($event)',
+                    }, template: "<div class=\"wrapper d-block position-relative\">\n    <div #track class=\"track2\"\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\">\n        <ng-content select=\"[bsTrack]\"></ng-content>\n    </div>\n    <div #thumb\n        (mousedown)=\"onPointerDown($event)\"\n        (touchstart)=\"onPointerDown($event)\"\n        (touchmove)=\"onPointerMove($event)\"\n        (touchend)=\"onPointerUp($event)\"\n        [class]=\"cursorClass()\"\n        [style.left]=\"thumbLeft()\">\n        <ng-content select=\"[bsThumb]\"></ng-content>\n    </div>\n</div>\n", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}:host ::ng-deep .track{height:8px;border-radius:8px}:host ::ng-deep .thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"] }]
+        }], propDecorators: { track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], thumb: [{ type: i0.ViewChild, args: ['thumb', { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueScale", required: false }] }], valueUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueUnit", required: false }] }] } });
 class BsThumbDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsThumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: BsThumbDirective, isStandalone: true, selector: "[bsThumb]", host: { classAttribute: "thumb position-absolute" }, ngImport: i0 }); }
@@ -254,11 +311,11 @@ class BsAlphaStripComponent {
         }, ...(ngDevMode ? [{ debugName: "resultBackground" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsAlphaStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: BsAlphaStripComponent, isStandalone: true, selector: "bs-alpha-strip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hs: "hsChange", brightness: "brightnessChange", alpha: "alphaChange" }, ngImport: i0, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"alpha()\" (valueChange)=\"alpha.set($event)\">\n    <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n    <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{height:8px;border-radius:8px;background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}.thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: BsAlphaStripComponent, isStandalone: true, selector: "bs-alpha-strip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hs: "hsChange", brightness: "brightnessChange", alpha: "alphaChange" }, ngImport: i0, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"alpha()\" (valueChange)=\"alpha.set($event)\" ariaLabel=\"Alpha\">\n    <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n    <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}\n"], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["disabled", "value", "ariaLabel", "valueScale", "valueUnit"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsAlphaStripComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-alpha-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"alpha()\" (valueChange)=\"alpha.set($event)\">\n    <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n    <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{height:8px;border-radius:8px;background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}.thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"] }]
+            args: [{ selector: 'bs-alpha-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"alpha()\" (valueChange)=\"alpha.set($event)\" ariaLabel=\"Alpha\">\n    <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n    <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], brightness: [{ type: i0.Input, args: [{ isSignal: true, alias: "brightness", required: false }] }, { type: i0.Output, args: ["brightnessChange"] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }, { type: i0.Output, args: ["alphaChange"] }] } });
 
 class BsBrightnessStripComponent {
@@ -279,11 +336,11 @@ class BsBrightnessStripComponent {
         }, ...(ngDevMode ? [{ debugName: "resultBackground" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsBrightnessStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: BsBrightnessStripComponent, isStandalone: true, selector: "bs-brightness-strip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hs: "hsChange", brightness: "brightnessChange" }, ngImport: i0, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"brightness()\" (valueChange)=\"brightness.set($event)\">\n    <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n    <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{height:8px;border-radius:8px}.thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: BsBrightnessStripComponent, isStandalone: true, selector: "bs-brightness-strip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hs: "hsChange", brightness: "brightnessChange" }, ngImport: i0, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"brightness()\" (valueChange)=\"brightness.set($event)\" ariaLabel=\"Brightness\">\n    <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n    <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [""], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["disabled", "value", "ariaLabel", "valueScale", "valueUnit"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsBrightnessStripComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-brightness-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"brightness()\" (valueChange)=\"brightness.set($event)\">\n    <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n    <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{height:8px;border-radius:8px}.thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"] }]
+            args: [{ selector: 'bs-brightness-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"brightness()\" (valueChange)=\"brightness.set($event)\" ariaLabel=\"Brightness\">\n    <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n    <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n" }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], brightness: [{ type: i0.Input, args: [{ isSignal: true, alias: "brightness", required: false }] }, { type: i0.Output, args: ["brightnessChange"] }] } });
 
 class BsColorPickerValueAccessor {
@@ -345,12 +402,17 @@ class BsColorWheelComponent {
         this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : /* istanbul ignore next */ []));
         this.hsChange = output();
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input('Color wheel: arrow left and right adjust hue, arrow up and down adjust saturation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.isPointerDown = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDown" }] : /* istanbul ignore next */ []));
         this.squareSize = computed(() => Math.min(this.width(), this.height()), ...(ngDevMode ? [{ debugName: "squareSize" }] : /* istanbul ignore next */ []));
         this.shiftX = computed(() => Math.max(0, (this.width() - this.height()) / 2), ...(ngDevMode ? [{ debugName: "shiftX" }] : /* istanbul ignore next */ []));
         this.shiftY = computed(() => Math.max(0, (this.height() - this.width()) / 2), ...(ngDevMode ? [{ debugName: "shiftY" }] : /* istanbul ignore next */ []));
         this.outerRadius = computed(() => this.squareSize() / 2, ...(ngDevMode ? [{ debugName: "outerRadius" }] : /* istanbul ignore next */ []));
         this.overlayOpacity = computed(() => 1 - this.brightness(), ...(ngDevMode ? [{ debugName: "overlayOpacity" }] : /* istanbul ignore next */ []));
+        this.ariaValueText = computed(() => {
+            const hs = this.hs();
+            return `Hue ${Math.round(hs.hue)}°, saturation ${Math.round(hs.saturation * 100)}%`;
+        }, ...(ngDevMode ? [{ debugName: "ariaValueText" }] : /* istanbul ignore next */ []));
         this.markerPosition = computed(() => {
             const hs = this.hs();
             const radius = this.outerRadius();
@@ -384,6 +446,59 @@ class BsColorWheelComponent {
     onPointerUp(_ev) {
         this.isPointerDown.set(false);
     }
+    /**
+     * Keyboard model for the 2-D wheel:
+     *  ArrowLeft  / ArrowRight  → -1° / +1° hue          (Shift: stays 1° for "fine")
+     *  ArrowDown / ArrowUp      → -1% / +1% saturation   (Shift: stays 1% for "fine")
+     *  PageDown / PageUp        → -30° / +30° hue
+     *  Home / End               → saturation 100% / 0%
+     *
+     * Hue wraps around; saturation clamps. Sighted-keyboard users get the same
+     * wheel as mouse users; blind users typically prefer the channel sliders
+     * (toggleable in bs-color-picker), since aria-valuetext on a 2-D widget is
+     * harder to spatialise than two 1-D sliders.
+     */
+    onKeydown(ev) {
+        if (this.disabled())
+            return;
+        const cur = this.hs();
+        const hueStep = ev.shiftKey ? 1 : 5;
+        const satStep = ev.shiftKey ? 0.01 : 0.05;
+        let nextHue = cur.hue;
+        let nextSat = cur.saturation;
+        switch (ev.key) {
+            case 'ArrowRight':
+                nextHue = (cur.hue + hueStep) % 360;
+                break;
+            case 'ArrowLeft':
+                nextHue = (cur.hue - hueStep + 360) % 360;
+                break;
+            case 'ArrowUp':
+                nextSat = Math.min(1, cur.saturation + satStep);
+                break;
+            case 'ArrowDown':
+                nextSat = Math.max(0, cur.saturation - satStep);
+                break;
+            case 'PageUp':
+                nextHue = (cur.hue + 30) % 360;
+                break;
+            case 'PageDown':
+                nextHue = (cur.hue - 30 + 360) % 360;
+                break;
+            case 'Home':
+                nextSat = 1;
+                break;
+            case 'End':
+                nextSat = 0;
+                break;
+            default:
+                return;
+        }
+        ev.preventDefault();
+        if (nextHue !== cur.hue || nextSat !== cur.saturation) {
+            this.hs.set({ hue: nextHue, saturation: nextSat });
+        }
+    }
     updateColor(ev) {
         const rect = this.surface().nativeElement.getBoundingClientRect();
         const clientX = 'touches' in ev ? ev.touches[0].clientX : ev.clientX;
@@ -395,16 +510,86 @@ class BsColorWheelComponent {
         this.hs.set(hs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsColorWheelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsColorWheelComponent, isStandalone: true, selector: "bs-color-wheel", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange", brightness: "brightnessChange", hs: "hsChange", hsChange: "hsChange" }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:mouseup": "onPointerUp($event)" }, classAttribute: "position-relative" }, viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.width.px]=\"width()\" [style.height.px]=\"height()\" class=\"position-relative\">\n    <div class=\"wheel-surface position-absolute\"\n         [style.left.px]=\"shiftX()\"\n         [style.top.px]=\"shiftY()\"\n         [style.width.px]=\"squareSize()\"\n         [style.height.px]=\"squareSize()\"\n         (mousedown)=\"onPointerDown($event)\"\n         (touchstart)=\"onPointerDown($event)\"\n         (touchmove)=\"onPointerMove($event)\"\n         (touchend)=\"onPointerUp($event)\"\n         #surface></div>\n\n    <div class=\"brightness-overlay position-absolute pe-none\"\n         [style.opacity]=\"overlayOpacity()\"\n         [style.left.px]=\"shiftX()\"\n         [style.top.px]=\"shiftY()\"\n         [style.width.px]=\"squareSize()\"\n         [style.height.px]=\"squareSize()\"></div>\n\n    @if (markerPosition(); as markerPosition) {\n        <div class=\"marker position-absolute pe-none\" [style.left.px]=\"markerPosition.x\" [style.top.px]=\"markerPosition.y\"></div>\n    }\n</div>\n", styles: [".wheel-surface{border-radius:50%;background:radial-gradient(circle closest-side,#fff,transparent),conic-gradient(from 90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);touch-action:none;cursor:crosshair}.brightness-overlay{background:#000;border-radius:50%;transition:opacity 60ms linear}.marker{width:30px;height:30px;border-radius:15px;margin-top:-15px;margin-left:-15px;box-sizing:border-box;border:2px solid white;box-shadow:#0000001a 0 0 10px 5px;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsColorWheelComponent, isStandalone: true, selector: "bs-color-wheel", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange", brightness: "brightnessChange", hs: "hsChange", hsChange: "hsChange" }, host: { attributes: { "role": "application" }, listeners: { "document:mousemove": "onPointerMove($event)", "document:mouseup": "onPointerUp($event)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuetext": "ariaValueText()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? -1 : 0" }, classAttribute: "position-relative" }, viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.width.px]=\"width()\" [style.height.px]=\"height()\" class=\"position-relative\">\n    <div class=\"wheel-surface position-absolute\"\n         [style.left.px]=\"shiftX()\"\n         [style.top.px]=\"shiftY()\"\n         [style.width.px]=\"squareSize()\"\n         [style.height.px]=\"squareSize()\"\n         (mousedown)=\"onPointerDown($event)\"\n         (touchstart)=\"onPointerDown($event)\"\n         (touchmove)=\"onPointerMove($event)\"\n         (touchend)=\"onPointerUp($event)\"\n         #surface></div>\n\n    <div class=\"brightness-overlay position-absolute pe-none\"\n         [style.opacity]=\"overlayOpacity()\"\n         [style.left.px]=\"shiftX()\"\n         [style.top.px]=\"shiftY()\"\n         [style.width.px]=\"squareSize()\"\n         [style.height.px]=\"squareSize()\"></div>\n\n    @if (markerPosition(); as markerPosition) {\n        <div class=\"marker position-absolute pe-none\" [style.left.px]=\"markerPosition.x\" [style.top.px]=\"markerPosition.y\"></div>\n    }\n</div>\n", styles: [".wheel-surface{border-radius:50%;background:radial-gradient(circle closest-side,#fff,transparent),conic-gradient(from 90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);touch-action:none;cursor:crosshair}.brightness-overlay{background:#000;border-radius:50%;transition:opacity 60ms linear}.marker{width:30px;height:30px;border-radius:15px;margin-top:-15px;margin-left:-15px;box-sizing:border-box;border:2px solid white;box-shadow:#0000001a 0 0 10px 5px;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsColorWheelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-color-wheel', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'position-relative',
+                        'role': 'application',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-valuetext]': 'ariaValueText()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.tabindex]': 'disabled() ? -1 : 0',
                         '(document:mousemove)': 'onPointerMove($event)',
                         '(document:mouseup)': 'onPointerUp($event)',
+                        '(keydown)': 'onKeydown($event)',
                     }, template: "<div [style.width.px]=\"width()\" [style.height.px]=\"height()\" class=\"position-relative\">\n    <div class=\"wheel-surface position-absolute\"\n         [style.left.px]=\"shiftX()\"\n         [style.top.px]=\"shiftY()\"\n         [style.width.px]=\"squareSize()\"\n         [style.height.px]=\"squareSize()\"\n         (mousedown)=\"onPointerDown($event)\"\n         (touchstart)=\"onPointerDown($event)\"\n         (touchmove)=\"onPointerMove($event)\"\n         (touchend)=\"onPointerUp($event)\"\n         #surface></div>\n\n    <div class=\"brightness-overlay position-absolute pe-none\"\n         [style.opacity]=\"overlayOpacity()\"\n         [style.left.px]=\"shiftX()\"\n         [style.top.px]=\"shiftY()\"\n         [style.width.px]=\"squareSize()\"\n         [style.height.px]=\"squareSize()\"></div>\n\n    @if (markerPosition(); as markerPosition) {\n        <div class=\"marker position-absolute pe-none\" [style.left.px]=\"markerPosition.x\" [style.top.px]=\"markerPosition.y\"></div>\n    }\n</div>\n", styles: [".wheel-surface{border-radius:50%;background:radial-gradient(circle closest-side,#fff,transparent),conic-gradient(from 90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);touch-action:none;cursor:crosshair}.brightness-overlay{background:#000;border-radius:50%;transition:opacity 60ms linear}.marker{width:30px;height:30px;border-radius:15px;margin-top:-15px;margin-left:-15px;box-sizing:border-box;border:2px solid white;box-shadow:#0000001a 0 0 10px 5px;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], brightness: [{ type: i0.Input, args: [{ isSignal: true, alias: "brightness", required: false }] }, { type: i0.Output, args: ["brightnessChange"] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], hsChange: [{ type: i0.Output, args: ["hsChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], brightness: [{ type: i0.Input, args: [{ isSignal: true, alias: "brightness", required: false }] }, { type: i0.Output, args: ["brightnessChange"] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], hsChange: [{ type: i0.Output, args: ["hsChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Hue picker — a horizontal rainbow strip backed by `bs-slider`. Two-way
+ * `[(hs)]` keeps the saturation untouched; only `hs.hue` (0–360°) changes.
+ * Inherits the slider's APG keyboard model (Arrow keys, Home/End, PageUp/Down).
+ */
+class BsHueStripComponent {
+    constructor() {
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : /* istanbul ignore next */ []));
+        /** Hue normalized to 0..1 for the underlying bs-slider (which works in 0..1). */
+        this.normalizedHue = computed(() => this.hs().hue / 360, ...(ngDevMode ? [{ debugName: "normalizedHue" }] : /* istanbul ignore next */ []));
+        /** Rainbow gradient — every hue at full saturation/lightness. */
+        this.trackGradient = 'linear-gradient(to right,' +
+            ' hsl(0, 100%, 50%),' +
+            ' hsl(60, 100%, 50%),' +
+            ' hsl(120, 100%, 50%),' +
+            ' hsl(180, 100%, 50%),' +
+            ' hsl(240, 100%, 50%),' +
+            ' hsl(300, 100%, 50%),' +
+            ' hsl(360, 100%, 50%))';
+        this.thumbBackground = computed(() => `hsl(${Math.round(this.hs().hue)}, 100%, 50%)`, ...(ngDevMode ? [{ debugName: "thumbBackground" }] : /* istanbul ignore next */ []));
+    }
+    onValueChange(v) {
+        this.hs.set({ ...this.hs(), hue: v * 360 });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsHueStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: BsHueStripComponent, isStandalone: true, selector: "bs-hue-strip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hs: "hsChange" }, ngImport: i0, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"normalizedHue()\" (valueChange)=\"onValueChange($event)\" ariaLabel=\"Hue\" [valueScale]=\"360\" valueUnit=\"\u00B0\">\n    <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient\"></div>\n    <div bsThumb [style.background]=\"thumbBackground()\"></div>\n</bs-slider>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["disabled", "value", "ariaLabel", "valueScale", "valueUnit"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsHueStripComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-hue-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"normalizedHue()\" (valueChange)=\"onValueChange($event)\" ariaLabel=\"Hue\" [valueScale]=\"360\" valueUnit=\"\u00B0\">\n    <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient\"></div>\n    <div bsThumb [style.background]=\"thumbBackground()\"></div>\n</bs-slider>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }] } });
+
+/**
+ * Saturation picker — a horizontal grey-to-pure-colour strip backed by
+ * `bs-slider`. Two-way `[(hs)]` keeps the hue untouched; only `hs.saturation`
+ * (0–1) changes. The track gradient re-derives from the current hue so the
+ * preview always matches what the user is about to pick.
+ */
+class BsSaturationStripComponent {
+    constructor() {
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : /* istanbul ignore next */ []));
+        this.trackGradient = computed(() => {
+            const hue = Math.round(this.hs().hue);
+            return `linear-gradient(to right, hsl(${hue}, 0%, 50%), hsl(${hue}, 100%, 50%))`;
+        }, ...(ngDevMode ? [{ debugName: "trackGradient" }] : /* istanbul ignore next */ []));
+        this.thumbBackground = computed(() => {
+            const hue = Math.round(this.hs().hue);
+            const sat = Math.round(this.hs().saturation * 100);
+            return `hsl(${hue}, ${sat}%, 50%)`;
+        }, ...(ngDevMode ? [{ debugName: "thumbBackground" }] : /* istanbul ignore next */ []));
+    }
+    onValueChange(v) {
+        this.hs.set({ ...this.hs(), saturation: v });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsSaturationStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: BsSaturationStripComponent, isStandalone: true, selector: "bs-saturation-strip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hs: "hsChange" }, ngImport: i0, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"hs().saturation\" (valueChange)=\"onValueChange($event)\" ariaLabel=\"Saturation\">\n    <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n    <div bsThumb [style.background]=\"thumbBackground()\"></div>\n</bs-slider>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["disabled", "value", "ariaLabel", "valueScale", "valueUnit"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsSaturationStripComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-saturation-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"hs().saturation\" (valueChange)=\"onValueChange($event)\" ariaLabel=\"Saturation\">\n    <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n    <div bsThumb [style.background]=\"thumbBackground()\"></div>\n</bs-slider>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }] } });
 
 class BsColorPickerComponent {
     constructor() {
@@ -412,6 +597,17 @@ class BsColorPickerComponent {
         this.size = input(150, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.allowAlpha = input(true, ...(ngDevMode ? [{ debugName: "allowAlpha" }] : /* istanbul ignore next */ []));
+        /**
+         * When true (default), a "Show hue + saturation sliders" toggle is rendered
+         * below the picker. Toggling it reveals dedicated 1-D sliders for hue and
+         * saturation alongside the existing brightness/alpha strips, giving keyboard
+         * and screen-reader users a 1-D path for every channel without having to
+         * spatialise the 2-D wheel. Set to false to hide both the toggle and the
+         * channel sliders entirely (e.g. when the consuming app provides its own
+         * accessibility settings UI).
+         */
+        this.showAccessibilityToggle = input(true, ...(ngDevMode ? [{ debugName: "showAccessibilityToggle" }] : /* istanbul ignore next */ []));
+        this.channelSlidersVisible = model(false, ...(ngDevMode ? [{ debugName: "channelSlidersVisible" }] : /* istanbul ignore next */ []));
         this.hs = signal({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : /* istanbul ignore next */ []));
         this.brightness = signal(1, ...(ngDevMode ? [{ debugName: "brightness" }] : /* istanbul ignore next */ []));
         this.alpha = model(1, ...(ngDevMode ? [{ debugName: "alpha" }] : /* istanbul ignore next */ []));
@@ -435,16 +631,24 @@ class BsColorPickerComponent {
         this.userChanged.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsColorPickerComponent, isStandalone: true, selector: "bs-color-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowAlpha: { classPropertyName: "allowAlpha", publicName: "allowAlpha", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { alpha: "alphaChange" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["wheel"], descendants: true, isSignal: true }], hostDirectives: [{ directive: BsColorPickerValueAccessor }], ngImport: i0, template: "@let letDisabled = disabled();\n@let letHS = hs();\n@let letBrightness = brightness();\n@let letAlpha = alpha();\n\n<bs-color-wheel [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"onUserHsChange($event)\" [brightness]=\"letBrightness\" [width]=\"size()\" [height]=\"size()\" #wheel></bs-color-wheel>\n<bs-brightness-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" (brightnessChange)=\"onUserBrightnessChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #strip></bs-brightness-strip>\n@if (allowAlpha()) {\n    <bs-alpha-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" [alpha]=\"letAlpha\" (alphaChange)=\"onUserAlphaChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #alphaStrip></bs-alpha-strip>\n}\n", styles: [""], dependencies: [{ kind: "component", type: BsColorWheelComponent, selector: "bs-color-wheel", inputs: ["width", "height", "brightness", "hs", "disabled"], outputs: ["widthChange", "heightChange", "brightnessChange", "hsChange"] }, { kind: "component", type: BsBrightnessStripComponent, selector: "bs-brightness-strip", inputs: ["disabled", "hs", "brightness"], outputs: ["hsChange", "brightnessChange"] }, { kind: "component", type: BsAlphaStripComponent, selector: "bs-alpha-strip", inputs: ["disabled", "hs", "brightness", "alpha"], outputs: ["hsChange", "brightnessChange", "alphaChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsColorPickerComponent, isStandalone: true, selector: "bs-color-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowAlpha: { classPropertyName: "allowAlpha", publicName: "allowAlpha", isSignal: true, isRequired: false, transformFunction: null }, showAccessibilityToggle: { classPropertyName: "showAccessibilityToggle", publicName: "showAccessibilityToggle", isSignal: true, isRequired: false, transformFunction: null }, channelSlidersVisible: { classPropertyName: "channelSlidersVisible", publicName: "channelSlidersVisible", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { channelSlidersVisible: "channelSlidersVisibleChange", alpha: "alphaChange" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["wheel"], descendants: true, isSignal: true }], hostDirectives: [{ directive: BsColorPickerValueAccessor }], ngImport: i0, template: "@let letDisabled = disabled();\n@let letHS = hs();\n@let letBrightness = brightness();\n@let letAlpha = alpha();\n\n<bs-color-wheel [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"onUserHsChange($event)\" [brightness]=\"letBrightness\" [width]=\"size()\" [height]=\"size()\" #wheel></bs-color-wheel>\n<bs-brightness-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" (brightnessChange)=\"onUserBrightnessChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #strip></bs-brightness-strip>\n@if (allowAlpha()) {\n    <bs-alpha-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" [alpha]=\"letAlpha\" (alphaChange)=\"onUserAlphaChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #alphaStrip></bs-alpha-strip>\n}\n@if (showAccessibilityToggle()) {\n    <bs-toggle-button class=\"mt-2 d-block\" type=\"switch\" [(ngModel)]=\"channelSlidersVisible\" [style.width.px]=\"size()\">Show hue + saturation sliders</bs-toggle-button>\n    @if (channelSlidersVisible()) {\n        <bs-hue-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"onUserHsChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\"></bs-hue-strip>\n        <bs-saturation-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"onUserHsChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\"></bs-saturation-strip>\n    }\n}\n", styles: [""], dependencies: [{ kind: "component", type: BsColorWheelComponent, selector: "bs-color-wheel", inputs: ["width", "height", "brightness", "hs", "disabled", "ariaLabel"], outputs: ["widthChange", "heightChange", "brightnessChange", "hsChange"] }, { kind: "component", type: BsBrightnessStripComponent, selector: "bs-brightness-strip", inputs: ["disabled", "hs", "brightness"], outputs: ["hsChange", "brightnessChange"] }, { kind: "component", type: BsAlphaStripComponent, selector: "bs-alpha-strip", inputs: ["disabled", "hs", "brightness", "alpha"], outputs: ["hsChange", "brightnessChange", "alphaChange"] }, { kind: "component", type: BsHueStripComponent, selector: "bs-hue-strip", inputs: ["disabled", "hs"], outputs: ["hsChange"] }, { kind: "component", type: BsSaturationStripComponent, selector: "bs-saturation-strip", inputs: ["disabled", "hs"], outputs: ["hsChange"] }, { kind: "component", type: BsToggleButtonComponent, selector: "bs-toggle-button", inputs: ["type", "isToggled", "name", "value", "group"], outputs: ["isToggledChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-color-picker', imports: [BsColorWheelComponent, BsBrightnessStripComponent, BsAlphaStripComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [BsColorPickerValueAccessor], template: "@let letDisabled = disabled();\n@let letHS = hs();\n@let letBrightness = brightness();\n@let letAlpha = alpha();\n\n<bs-color-wheel [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"onUserHsChange($event)\" [brightness]=\"letBrightness\" [width]=\"size()\" [height]=\"size()\" #wheel></bs-color-wheel>\n<bs-brightness-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" (brightnessChange)=\"onUserBrightnessChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #strip></bs-brightness-strip>\n@if (allowAlpha()) {\n    <bs-alpha-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" [alpha]=\"letAlpha\" (alphaChange)=\"onUserAlphaChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #alphaStrip></bs-alpha-strip>\n}\n" }]
-        }], propDecorators: { colorWheel: [{ type: i0.ViewChild, args: ['wheel', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], allowAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAlpha", required: false }] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }, { type: i0.Output, args: ["alphaChange"] }] } });
+            args: [{ selector: 'bs-color-picker', imports: [
+                        BsColorWheelComponent,
+                        BsBrightnessStripComponent,
+                        BsAlphaStripComponent,
+                        BsHueStripComponent,
+                        BsSaturationStripComponent,
+                        BsToggleButtonComponent,
+                        FormsModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [BsColorPickerValueAccessor], template: "@let letDisabled = disabled();\n@let letHS = hs();\n@let letBrightness = brightness();\n@let letAlpha = alpha();\n\n<bs-color-wheel [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"onUserHsChange($event)\" [brightness]=\"letBrightness\" [width]=\"size()\" [height]=\"size()\" #wheel></bs-color-wheel>\n<bs-brightness-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" (brightnessChange)=\"onUserBrightnessChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #strip></bs-brightness-strip>\n@if (allowAlpha()) {\n    <bs-alpha-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" [alpha]=\"letAlpha\" (alphaChange)=\"onUserAlphaChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #alphaStrip></bs-alpha-strip>\n}\n@if (showAccessibilityToggle()) {\n    <bs-toggle-button class=\"mt-2 d-block\" type=\"switch\" [(ngModel)]=\"channelSlidersVisible\" [style.width.px]=\"size()\">Show hue + saturation sliders</bs-toggle-button>\n    @if (channelSlidersVisible()) {\n        <bs-hue-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"onUserHsChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\"></bs-hue-strip>\n        <bs-saturation-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"onUserHsChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\"></bs-saturation-strip>\n    }\n}\n" }]
+        }], propDecorators: { colorWheel: [{ type: i0.ViewChild, args: ['wheel', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], allowAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAlpha", required: false }] }], showAccessibilityToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAccessibilityToggle", required: false }] }], channelSlidersVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "channelSlidersVisible", required: false }] }, { type: i0.Output, args: ["channelSlidersVisibleChange"] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }, { type: i0.Output, args: ["alphaChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BsAlphaStripComponent, BsBrightnessStripComponent, BsColorPickerComponent, BsColorPickerValueAccessor, BsColorWheelComponent, BsSliderComponent, BsThumbDirective, BsTrackDirective, hex2hsv, hex2rgb, hs2polar, hsl2hsv, hsl2rgb, hsv2hex, hsv2hsl, hsv2rgb, polar2hs, rgb2hex, rgb2hsl, rgb2hsv };
+export { BsAlphaStripComponent, BsBrightnessStripComponent, BsColorPickerComponent, BsColorPickerValueAccessor, BsColorWheelComponent, BsHueStripComponent, BsSaturationStripComponent, BsSliderComponent, BsThumbDirective, BsTrackDirective, hex2hsv, hex2rgb, hs2polar, hsl2hsv, hsl2rgb, hsv2hex, hsv2hsl, hsv2rgb, polar2hs, rgb2hex, rgb2hsl, rgb2hsv };
 //# sourceMappingURL=mintplayer-ng-bootstrap-color-picker.mjs.map