cps-ui-kit 21.1.0 → 21.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cps-ui-kit",
-  "version": "21.1.0",
+  "version": "21.3.0",
   "peerDependencies": {
     "@angular/common": "^21.2.6",
     "@angular/core": "^21.2.6",

package/styles/_colors.scss

@@ -269,7 +269,8 @@
   //Text
   --cps-color-text-lightest: #b5b2b2;
   --cps-color-text-light: #9a9595;
-  --cps-color-text-mild: #787272;
+  --cps-color-text-mild: #6a6565;
+  --cps-color-text-medium: #5e5858;
   --cps-color-text-dark: #524a4a;
   --cps-color-text-darkest: #2d2323;
 }

package/styles/_mixins.scss

@@ -0,0 +1,34 @@
+/**
+ * Focus ring mixin for interactive elements.
+ *
+ * Renders a dual-color focus indicator (inner + outer ring)
+ * to ensure visibility on light and dark backgrounds and meet accessibility requirements.
+ */
+@mixin focus-ring(
+  $radius: 0.375rem,
+  $inner-offset: 0.125rem,
+  $outer-offset: 0.25rem,
+  $inner-width: 0.0625rem,
+  $outer-width: 0.0625rem
+) {
+  &:focus-visible {
+    position: relative;
+  }
+
+  &:focus-visible::before,
+  &:focus-visible::after {
+    content: '';
+    position: absolute;
+    border-radius: $radius;
+  }
+
+  &:focus-visible::before {
+    inset: -#{$inner-offset}; /* inner offset */
+    border: $inner-width solid var(--cps-color-calm);
+  }
+
+  &:focus-visible::after {
+    inset: -#{$outer-offset}; /* outer offset */
+    border: $outer-width solid var(--cps-color-calm-highlighten);
+  }
+}

package/types/cps-ui-kit.d.ts

@@ -1066,6 +1066,11 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
      * @group Props
      */
     label: string;
+    /**
+     * Aria label for the autocomplete component, used for accessibility, it takes precedence over label.
+     * @group Props
+     */
+    ariaLabel: string;
     /**
      * Placeholder text.
      * @group Props
@@ -1312,6 +1317,7 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     error: string;
     cvtWidth: string;
     isOpened: boolean;
+    isActive: boolean;
     inputText: string;
     inputTextDebounced: string;
     filteredOptions: any[];
@@ -1323,9 +1329,13 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     autocompleteBoxWidth: number;
     resizeObserver: ResizeObserver;
     isTimePickerField: boolean;
+    optionsListId: string;
+    selectAllOptionId: string;
+    private _optionIdPrefix;
     private _inputChangeSubject$;
     private _destroy$;
     private _options;
+    private _optionIds;
     constructor(_control: NgControl, document: Document, cdRef: ChangeDetectorRef, _labelByValue: LabelByValuePipe);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -1344,7 +1354,6 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     setDisabledState(disabled: boolean): void;
     onBlur(): void;
     onFocus(): void;
-    isActive(): boolean;
     onBeforeOptionsHidden(reason: CpsMenuHideReason): void;
     onBoxClick(): void;
     onContainerKeyDown(event: any): void;
@@ -1355,6 +1364,13 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     recalcVirtualListHeight(): void;
     isEmptyValue(): boolean;
     clearInput(): void;
+    get computedLabel(): string | null;
+    get isSelectAllVisible(): boolean;
+    get optionsAriaSetSize(): number;
+    get activeDescendantId(): string | null;
+    getOptionAriaPosInSet(itemIndex: number): number;
+    getOptionId(option: any, index: number): string;
+    private _buildOptionId;
     private _getEmptyValue;
     private _toggleOptions;
     private _clickOption;
@@ -1362,14 +1378,18 @@ declare class CpsAutocompleteComponent implements ControlValueAccessor, OnInit,
     private updateValue;
     private _getValueLabel;
     private _closeAndClear;
-    private _getHTMLOptions;
     private _dehighlightOption;
+    private _getHighlightedOptionId;
     private _highlightOption;
     private _navigateOptionsByArrows;
+    private _navigateVirtualOptionsByArrows;
+    private _nextHighlightIndex;
+    private _syncVirtualHighlightedOptionIntoView;
+    private _scrollVirtualListToIndex;
     private _confirmInput;
     private _removeLastValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsAutocompleteComponent, [{ optional: true; self: true; }, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsAutocompleteComponent, "cps-autocomplete", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "returnObject": { "alias": "returnObject"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "width": { "alias": "width"; "required": false; }; "selectAll": { "alias": "selectAll"; "required": false; }; "showChevron": { "alias": "showChevron"; "required": false; }; "withOptionsAliases": { "alias": "withOptionsAliases"; "required": false; }; "useOptionsAliasesWhenNoMatch": { "alias": "useOptionsAliasesWhenNoMatch"; "required": false; }; "optionAlias": { "alias": "optionAlias"; "required": false; }; "chips": { "alias": "chips"; "required": false; }; "closableChips": { "alias": "closableChips"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "openOnClear": { "alias": "openOnClear"; "required": false; }; "keepInitialOrder": { "alias": "keepInitialOrder"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "optionInfo": { "alias": "optionInfo"; "required": false; }; "hideDetails": { "alias": "hideDetails"; "required": false; }; "persistentClear": { "alias": "persistentClear"; "required": false; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; }; "prefixIconSize": { "alias": "prefixIconSize"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; "showLoadingMessage": { "alias": "showLoadingMessage"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "showEmptyMessage": { "alias": "showEmptyMessage"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "numToleratedItems": { "alias": "numToleratedItems"; "required": false; }; "externalError": { "alias": "externalError"; "required": false; }; "infoTooltip": { "alias": "infoTooltip"; "required": false; }; "infoTooltipClass": { "alias": "infoTooltipClass"; "required": false; }; "infoTooltipMaxWidth": { "alias": "infoTooltipMaxWidth"; "required": false; }; "infoTooltipPersistent": { "alias": "infoTooltipPersistent"; "required": false; }; "infoTooltipPosition": { "alias": "infoTooltipPosition"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "emptyOptionIndex": { "alias": "emptyOptionIndex"; "required": false; }; "inputChangeDebounceTime": { "alias": "inputChangeDebounceTime"; "required": false; }; "validating": { "alias": "validating"; "required": false; }; "_value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "valueChanged": "valueChanged"; "inputChanged": "inputChanged"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsAutocompleteComponent, "cps-autocomplete", never, { "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "returnObject": { "alias": "returnObject"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "width": { "alias": "width"; "required": false; }; "selectAll": { "alias": "selectAll"; "required": false; }; "showChevron": { "alias": "showChevron"; "required": false; }; "withOptionsAliases": { "alias": "withOptionsAliases"; "required": false; }; "useOptionsAliasesWhenNoMatch": { "alias": "useOptionsAliasesWhenNoMatch"; "required": false; }; "optionAlias": { "alias": "optionAlias"; "required": false; }; "chips": { "alias": "chips"; "required": false; }; "closableChips": { "alias": "closableChips"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "openOnClear": { "alias": "openOnClear"; "required": false; }; "keepInitialOrder": { "alias": "keepInitialOrder"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "optionInfo": { "alias": "optionInfo"; "required": false; }; "hideDetails": { "alias": "hideDetails"; "required": false; }; "persistentClear": { "alias": "persistentClear"; "required": false; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; }; "prefixIconSize": { "alias": "prefixIconSize"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; "showLoadingMessage": { "alias": "showLoadingMessage"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "showEmptyMessage": { "alias": "showEmptyMessage"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "numToleratedItems": { "alias": "numToleratedItems"; "required": false; }; "externalError": { "alias": "externalError"; "required": false; }; "infoTooltip": { "alias": "infoTooltip"; "required": false; }; "infoTooltipClass": { "alias": "infoTooltipClass"; "required": false; }; "infoTooltipMaxWidth": { "alias": "infoTooltipMaxWidth"; "required": false; }; "infoTooltipPersistent": { "alias": "infoTooltipPersistent"; "required": false; }; "infoTooltipPosition": { "alias": "infoTooltipPosition"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "emptyOptionIndex": { "alias": "emptyOptionIndex"; "required": false; }; "inputChangeDebounceTime": { "alias": "inputChangeDebounceTime"; "required": false; }; "validating": { "alias": "validating"; "required": false; }; "_value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "valueChanged": "valueChanged"; "inputChanged": "inputChanged"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
 }
 
 /**
@@ -1502,6 +1522,11 @@ declare class CpsButtonComponent implements OnChanges {
      * @group Props
      */
     label: string;
+    /**
+     * Aria label for the button, used for accessibility, it takes precedence over label.
+     * @group Props
+     */
+    ariaLabel: string;
     /**
      * Name of the icon on the button.
      * @group Props
@@ -1550,12 +1575,16 @@ declare class CpsButtonComponent implements OnChanges {
     cvtFontSize: string;
     cvtIconSize: string;
     classesList: string[];
+    enterActive: boolean;
     constructor(document: Document);
     ngOnChanges(): void;
     setClasses(): void;
     onClick(event: Event): void;
+    onEnterKeydown(): void;
+    onEnterKeyup(): void;
+    onBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsButtonComponent, "cps-button", never, { "color": { "alias": "color"; "required": false; }; "contentColor": { "alias": "contentColor"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "type": { "alias": "type"; "required": false; }; "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "size": { "alias": "size"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsButtonComponent, "cps-button", never, { "color": { "alias": "color"; "required": false; }; "contentColor": { "alias": "contentColor"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "type": { "alias": "type"; "required": false; }; "label": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "size": { "alias": "size"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "clicked": "clicked"; }, never, never, true, never>;
 }
 
 /**
@@ -3755,6 +3784,11 @@ declare class CpsChipComponent implements OnChanges {
      * @group Props
      */
     disabled: boolean;
+    /**
+     * Aria label for the close button.
+     * @group Props
+     */
+    closeButtonAriaLabel: string;
     /**
      * Callback to invoke on chip close.
      * @param {string} string - Chip closed.
@@ -3766,7 +3800,7 @@ declare class CpsChipComponent implements OnChanges {
     setClasses(): void;
     onCloseClick(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CpsChipComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CpsChipComponent, "cps-chip", never, { "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CpsChipComponent, "cps-chip", never, { "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "closeButtonAriaLabel": { "alias": "closeButtonAriaLabel"; "required": false; }; }, { "closed": "closed"; }, never, never, true, never>;
 }
 
 /**