@tylertech/forge 3.10.5 → 3.12.0

package/esm/select/core/base-select-core.d.ts

@@ -17,6 +17,7 @@ export interface IBaseSelectCore extends IListDropdownAwareCore {
     optionBuilder: SelectOptionBuilder;
     selectedTextBuilder: SelectSelectedTextBuilder;
     beforeValueChange: SelectBeforeValueChangeCallback<any>;
+    selectAllLabel: string;
     appendOptions(options: ISelectOption[] | ISelectOptionGroup[]): void;
     selectAll(): void;
     deselectAll(): void;
@@ -30,6 +31,8 @@ export declare abstract class BaseSelectCore<T extends IBaseSelectAdapter> exten
     protected _value: any;
     protected _multiple: boolean;
     protected _open: boolean;
+    protected _showSelectAll: boolean;
+    protected _selectAllLabel: string;
     protected _optionBuilder: SelectOptionBuilder;
     protected _selectedTextBuilder: SelectSelectedTextBuilder;
     protected _selectedValues: string[];
@@ -53,6 +56,9 @@ export declare abstract class BaseSelectCore<T extends IBaseSelectAdapter> exten
     constructor(_adapter: T);
     protected abstract _onDropdownScrollEnd(): void;
     protected _onFocus(evt: Event): void;
+    protected _onSelectAll(): void;
+    /** Updates the select all checkbox state based on current selections */
+    private _updateSelectAllState;
     initialize(): void;
     initializeTarget(): void;
     destroy(): void;
@@ -61,6 +67,10 @@ export declare abstract class BaseSelectCore<T extends IBaseSelectAdapter> exten
     deselectAll(): void;
     protected get _flatOptions(): ISelectOption[];
     private get _nonDividerOptions();
+    /** Adjusts an index from list-dropdown coordinate system to select coordinate system */
+    private _adjustIndexFromDropdown;
+    /** Adjusts an index from select coordinate system to list-dropdown coordinate system */
+    private _adjustIndexToDropdown;
     protected _initializeValue(): void;
     protected _onClick(evt: MouseEvent): void;
     protected _onBlur(evt: FocusEvent): void;
@@ -87,8 +97,12 @@ export declare abstract class BaseSelectCore<T extends IBaseSelectAdapter> exten
     protected _getSelectedText(): string;
     private _onKeydown;
     private _getFirstSelectedOptionIndex;
-    private _getPreviousHighlightableOptionIndex;
-    private _getNextHighlightableOptionIndex;
+    /** Navigation methods that work in dropdown coordinate system (includes select all when enabled) */
+    private _getPreviousHighlightableDropdownIndex;
+    private _getNextHighlightableDropdownIndex;
+    private _getFirstHighlightableDropdownIndex;
+    private _getLastHighlightableDropdownIndex;
+    private _isDropdownOptionDisabled;
     private _filter;
     private _onOptionsChanged;
     private _onActiveOptionChanged;
@@ -126,4 +140,10 @@ export declare abstract class BaseSelectCore<T extends IBaseSelectAdapter> exten
     /** Sets the callback to be executed when the user selects a value. */
     get beforeValueChange(): SelectBeforeValueChangeCallback<any>;
     set beforeValueChange(value: SelectBeforeValueChangeCallback<any>);
+    /** Gets/sets whether to show the select all option when in multiple mode. */
+    get showSelectAll(): boolean;
+    set showSelectAll(value: boolean);
+    /** Gets/sets the label for the select all option. */
+    get selectAllLabel(): string;
+    set selectAllLabel(value: string);
 }

package/esm/select/core/base-select-core.js

@@ -6,6 +6,7 @@
 import { isDefined, isDeepEqual, randomChars } from '@tylertech/forge-core';
 import { BASE_SELECT_CONSTANTS } from './base-select-constants';
 import { isSelectOptionType, SelectOptionType } from './select-utils';
+import { LIST_DROPDOWN_CONSTANTS } from '../../list-dropdown/list-dropdown-constants';
 import { ListDropdownAwareCore } from '../../list-dropdown/list-dropdown-aware-core';
 export class BaseSelectCore extends ListDropdownAwareCore {
     constructor(_adapter) {
@@ -15,6 +16,7 @@ export class BaseSelectCore extends ListDropdownAwareCore {
         this._value = [];
         this._multiple = false;
         this._open = false;
+        this._showSelectAll = false;
         this._selectedValues = [];
         this._selectedLabels = [];
         this._selectedIndexes = [];
@@ -30,6 +32,51 @@ export class BaseSelectCore extends ListDropdownAwareCore {
         this._identifier = randomChars();
     }
     _onFocus(evt) { }
+    _onSelectAll() {
+        if (!this._multiple) {
+            return;
+        }
+        const currentlyAllSelected = this._selectedValues.length === this._nonDividerOptions.length;
+        const willSelectAll = !currentlyAllSelected;
+        // Emit the select all event
+        const newValue = willSelectAll ? this._nonDividerOptions.map(o => o.value) : [];
+        const cancelled = !this._adapter.emitHostEvent('forge-select-all', {
+            value: newValue,
+            isAllSelected: willSelectAll
+        }, true, true);
+        if (!cancelled) {
+            if (willSelectAll) {
+                this.selectAll();
+            }
+            else {
+                this.deselectAll();
+            }
+            // Emit the standard change event
+            const changeData = this._multiple ? [...this._selectedValues] : this._selectedValues[0];
+            this._adapter.emitHostEvent(BASE_SELECT_CONSTANTS.events.CHANGE, changeData, true, true);
+            // Update the dropdown to reflect the new selection state
+            if (this._open) {
+                // Preserve the currently active option index before updating selections
+                const activeOptionIndex = this._adapter.getActiveOptionIndex();
+                this._adapter.patchSelectedValues(this._selectedValues);
+                // Update the select all checkbox to reflect its new state
+                this._updateSelectAllState();
+                // Restore the active option to preserve highlighting
+                if (activeOptionIndex >= 0) {
+                    this._adapter.highlightActiveOption(activeOptionIndex);
+                }
+            }
+        }
+    }
+    /** Updates the select all checkbox state based on current selections */
+    _updateSelectAllState() {
+        if (!this._showSelectAll || !this._multiple || !this._open) {
+            return;
+        }
+        const allSelected = this._selectedValues.length === this._nonDividerOptions.length;
+        // The select all option is always at dropdown index 0
+        this._adapter.toggleOptionMultiple(0, allSelected);
+    }
     initialize() {
         if (this._optionListenerDestructor) {
             this._optionListenerDestructor();
@@ -80,6 +127,23 @@ export class BaseSelectCore extends ListDropdownAwareCore {
     get _nonDividerOptions() {
         return this._flatOptions.filter(o => !o.divider);
     }
+    /** Adjusts an index from list-dropdown coordinate system to select coordinate system */
+    _adjustIndexFromDropdown(dropdownIndex) {
+        // If select all is shown and enabled, the first option (index 0) in the dropdown is select all
+        // So we need to subtract 1 from the dropdown index to get the actual option index
+        if (this._showSelectAll && this._multiple && dropdownIndex > 0) {
+            return dropdownIndex - 1;
+        }
+        return dropdownIndex;
+    }
+    /** Adjusts an index from select coordinate system to list-dropdown coordinate system */
+    _adjustIndexToDropdown(selectIndex) {
+        // If select all is shown and enabled, we need to add 1 to account for the select all option
+        if (this._showSelectAll && this._multiple) {
+            return selectIndex + 1;
+        }
+        return selectIndex;
+    }
     _initializeValue() {
         const options = (this._options.length && this._options) || this._adapter.getOptions();
         if (isDefined(this._value) && options.length) {
@@ -136,8 +200,15 @@ export class BaseSelectCore extends ListDropdownAwareCore {
             optionLimit: this._optionLimit,
             headerBuilder: this._popupHeaderBuilder,
             footerBuilder: this._popupFooterBuilder,
+            showSelectAll: this._showSelectAll && this._multiple,
+            selectAllLabel: this._selectAllLabel,
             closeCallback: () => this._closeDropdown(),
             selectCallback: (value) => {
+                // Handle select all option
+                if (value === LIST_DROPDOWN_CONSTANTS.selectAllOption.VALUE) {
+                    this._onSelectAll();
+                    return;
+                }
                 const flatOptions = this._flatOptions;
                 const option = flatOptions.find(o => o.value === value);
                 if (option) {
@@ -148,6 +219,8 @@ export class BaseSelectCore extends ListDropdownAwareCore {
         };
         this._adapter.open(config);
         this._adapter.setDismissListener(this._dismissListener);
+        // Ensure select all state is synchronized after opening dropdown
+        this._updateSelectAllState();
     }
     /**
      * Closes the dropdown.
@@ -208,7 +281,18 @@ export class BaseSelectCore extends ListDropdownAwareCore {
             // If we're in multiselect mode, we need to toggle the selected option
             if (this._multiple) {
                 const isSelected = this._selectedIndexes.includes(optionIndex);
-                this._adapter.toggleOptionMultiple(optionIndex, isSelected);
+                const dropdownIndex = this._adjustIndexToDropdown(optionIndex);
+                this._adapter.toggleOptionMultiple(dropdownIndex, isSelected);
+                // Update select all checkbox state if it's visible
+                if (this._showSelectAll && this._open) {
+                    // Preserve the currently active option index before updating select all state
+                    const activeOptionIndex = this._adapter.getActiveOptionIndex();
+                    this._updateSelectAllState();
+                    // Restore the active option to preserve highlighting
+                    if (activeOptionIndex >= 0) {
+                        this._adapter.highlightActiveOption(activeOptionIndex);
+                    }
+                }
             }
             this._applySelection();
         };
@@ -240,9 +324,17 @@ export class BaseSelectCore extends ListDropdownAwareCore {
         return !cancelled;
     }
     _selectActiveOption() {
-        const activeOptionIndex = this._adapter.getActiveOptionIndex();
-        if (activeOptionIndex >= 0 && this._nonDividerOptions[activeOptionIndex]) {
-            this._onSelect(this._nonDividerOptions[activeOptionIndex], activeOptionIndex);
+        const activeDropdownIndex = this._adapter.getActiveOptionIndex();
+        if (activeDropdownIndex >= 0) {
+            // Check if the active option is the select all option
+            if (this._showSelectAll && this._multiple && activeDropdownIndex === 0) {
+                this._onSelectAll();
+                return;
+            }
+            const adjustedIndex = this._adjustIndexFromDropdown(activeDropdownIndex);
+            if (this._nonDividerOptions[adjustedIndex]) {
+                this._onSelect(this._nonDividerOptions[adjustedIndex], adjustedIndex);
+            }
         }
     }
     _tryUpdateDropdownPosition() {
@@ -366,39 +458,49 @@ export class BaseSelectCore extends ListDropdownAwareCore {
             if (this._flatOptions.length === 0) {
                 return;
             }
-            let optionIndex = 0;
+            let dropdownIndex = 0;
             if (this._open) {
-                optionIndex = this._adapter.getActiveOptionIndex();
-                if (optionIndex === -1) {
-                    optionIndex = this._getFirstSelectedOptionIndex();
+                dropdownIndex = this._adapter.getActiveOptionIndex();
+                if (dropdownIndex === -1) {
+                    // No option is currently active, so activate the first/last highlightable option based on direction
+                    if (isArrowUp) {
+                        dropdownIndex = this._getLastHighlightableDropdownIndex();
+                    }
+                    else {
+                        dropdownIndex = this._getFirstHighlightableDropdownIndex();
+                    }
+                }
+                else {
+                    // An option is already active, move to the previous/next one
+                    if (isArrowUp) {
+                        dropdownIndex = this._getPreviousHighlightableDropdownIndex(dropdownIndex);
+                    }
+                    else {
+                        dropdownIndex = this._getNextHighlightableDropdownIndex(dropdownIndex);
+                    }
                 }
             }
             else {
-                optionIndex = this._getFirstSelectedOptionIndex();
-            }
-            if (isArrowUp) {
-                optionIndex = this._getPreviousHighlightableOptionIndex(optionIndex, this._nonDividerOptions);
-            }
-            else {
-                optionIndex = this._getNextHighlightableOptionIndex(optionIndex, this._nonDividerOptions);
+                const firstSelectedIndex = this._getFirstSelectedOptionIndex();
+                dropdownIndex = firstSelectedIndex >= 0 ? this._adjustIndexToDropdown(firstSelectedIndex) : 0;
             }
-            this._adapter.highlightActiveOption(optionIndex);
+            this._adapter.highlightActiveOption(dropdownIndex);
         }
         else if (isHomeKey) {
             if (this._open) {
                 evt.preventDefault();
-                this._adapter.highlightActiveOption(this._nonDividerOptions.findIndex(o => !o.disabled));
+                const firstDropdownIndex = this._getFirstHighlightableDropdownIndex();
+                if (firstDropdownIndex >= 0) {
+                    this._adapter.highlightActiveOption(firstDropdownIndex);
+                }
             }
         }
         else if (isEndKey) {
             if (this._open) {
                 evt.preventDefault();
-                const options = this._nonDividerOptions;
-                for (let i = options.length - 1; i >= 0; i--) {
-                    if (!options[i].disabled) {
-                        this._adapter.highlightActiveOption(i);
-                        break;
-                    }
+                const lastDropdownIndex = this._getLastHighlightableDropdownIndex();
+                if (lastDropdownIndex >= 0) {
+                    this._adapter.highlightActiveOption(lastDropdownIndex);
                 }
             }
         }
@@ -409,31 +511,92 @@ export class BaseSelectCore extends ListDropdownAwareCore {
     _getFirstSelectedOptionIndex() {
         return this._nonDividerOptions.findIndex(option => this._selectedValues.includes(option.value));
     }
-    _getPreviousHighlightableOptionIndex(startIndex, options) {
+    /** Navigation methods that work in dropdown coordinate system (includes select all when enabled) */
+    _getPreviousHighlightableDropdownIndex(startIndex) {
+        if (!this._adapter.popupElement) {
+            return startIndex;
+        }
+        const listItems = this._adapter.popupElement.querySelectorAll('forge-list-item');
+        const totalItems = listItems.length;
+        if (totalItems === 0) {
+            return startIndex;
+        }
         let index = startIndex;
-        if (index <= 0) {
-            index = options.length - 1;
+        do {
+            if (index <= 0) {
+                index = totalItems - 1;
+            }
+            else {
+                index--;
+            }
+            const listItem = listItems[index];
+            if (listItem && !this._isDropdownOptionDisabled(listItem)) {
+                return index;
+            }
+        } while (index !== startIndex);
+        return startIndex;
+    }
+    _getNextHighlightableDropdownIndex(startIndex) {
+        if (!this._adapter.popupElement) {
+            return startIndex;
         }
-        else {
-            index--;
+        const listItems = this._adapter.popupElement.querySelectorAll('forge-list-item');
+        const totalItems = listItems.length;
+        if (totalItems === 0) {
+            return startIndex;
         }
-        if (options[index].disabled) {
-            return this._getPreviousHighlightableOptionIndex(index, options);
+        let index = startIndex;
+        do {
+            if (index === totalItems - 1) {
+                index = 0;
+            }
+            else {
+                index++;
+            }
+            const listItem = listItems[index];
+            if (listItem && !this._isDropdownOptionDisabled(listItem)) {
+                return index;
+            }
+        } while (index !== startIndex);
+        return startIndex;
+    }
+    _getFirstHighlightableDropdownIndex() {
+        if (!this._adapter.popupElement) {
+            return 0;
+        }
+        const listItems = this._adapter.popupElement.querySelectorAll('forge-list-item');
+        for (let i = 0; i < listItems.length; i++) {
+            const listItem = listItems[i];
+            if (listItem && !this._isDropdownOptionDisabled(listItem)) {
+                return i;
+            }
         }
-        return index;
+        return 0;
     }
-    _getNextHighlightableOptionIndex(startIndex, options) {
-        let index = startIndex;
-        if (index === options.length - 1) {
-            index = 0;
+    _getLastHighlightableDropdownIndex() {
+        if (!this._adapter.popupElement) {
+            return 0;
         }
-        else {
-            index++;
+        const listItems = this._adapter.popupElement.querySelectorAll('forge-list-item');
+        for (let i = listItems.length - 1; i >= 0; i--) {
+            const listItem = listItems[i];
+            if (listItem && !this._isDropdownOptionDisabled(listItem)) {
+                return i;
+            }
+        }
+        return 0;
+    }
+    _isDropdownOptionDisabled(listItem) {
+        // Check if it's a divider (dividers are not selectable)
+        if (listItem.querySelector && listItem.querySelector('forge-divider')) {
+            return true;
         }
-        if (options[index].disabled) {
-            return this._getNextHighlightableOptionIndex(index, options);
+        // Check if the button inside is disabled
+        const button = listItem.querySelector('button');
+        if (button && button.disabled) {
+            return true;
         }
-        return index;
+        return false;
     }
     _filter(key) {
         // This allows for typing numbers and/or characters while the select is focused to auto-select the closest match
@@ -603,4 +766,18 @@ export class BaseSelectCore extends ListDropdownAwareCore {
     set beforeValueChange(value) {
         this._beforeValueChange = value;
     }
+    /** Gets/sets whether to show the select all option when in multiple mode. */
+    get showSelectAll() {
+        return this._showSelectAll;
+    }
+    set showSelectAll(value) {
+        this._showSelectAll = value;
+    }
+    /** Gets/sets the label for the select all option. */
+    get selectAllLabel() {
+        return this._selectAllLabel;
+    }
+    set selectAllLabel(value) {
+        this._selectAllLabel = value;
+    }
 }

package/esm/select/option/option.d.ts

@@ -15,6 +15,8 @@ declare global {
 }
 /**
  * @tag forge-option
+ *
+ * @summary Options represent individual selectable items within `<forge-select>` components.
  */
 export declare class OptionComponent extends BaseComponent implements IOptionComponent {
     static get observedAttributes(): string[];

package/esm/select/option/option.js

@@ -11,6 +11,8 @@ import { OPTION_CONSTANTS } from './option-constants';
 import { OptionCore } from './option-core';
 /**
  * @tag forge-option
+ *
+ * @summary Options represent individual selectable items within `<forge-select>` components.
  */
 let OptionComponent = class OptionComponent extends BaseComponent {
     static get observedAttributes() {

package/esm/select/option-group/option-group.d.ts

@@ -16,6 +16,8 @@ declare global {
 }
 /**
  * @tag forge-option-group
+ *
+ * @summary Groups related options together with an optional label within select components.
  */
 export declare class OptionGroupComponent extends BaseComponent implements IOptionGroupComponent {
     static get observedAttributes(): string[];

package/esm/select/option-group/option-group.js

@@ -9,6 +9,8 @@ import { BaseComponent } from '../../core/base/base-component';
 import { OPTION_GROUP_CONSTANTS } from './option-group-constants';
 /**
  * @tag forge-option-group
+ *
+ * @summary Groups related options together with an optional label within select components.
  */
 let OptionGroupComponent = class OptionGroupComponent extends BaseComponent {
     static get observedAttributes() {

package/esm/select/select/select-constants.d.ts

@@ -15,6 +15,8 @@ export declare const SELECT_CONSTANTS: {
         PLACEHOLDER: string;
         OBSERVE_SCROLL: string;
         OBSERVE_SCROLL_THRESHOLD: string;
+        SHOW_SELECT_ALL: string;
+        SELECT_ALL_LABEL: string;
     };
     attributes: {
         OPEN: string;
@@ -26,6 +28,8 @@ export declare const SELECT_CONSTANTS: {
         PLACEHOLDER: string;
         OBSERVE_SCROLL: string;
         OBSERVE_SCROLL_THRESHOLD: string;
+        SHOW_SELECT_ALL: string;
+        SELECT_ALL_LABEL: string;
     };
     selectors: {
         FIELD: string;
@@ -34,6 +38,7 @@ export declare const SELECT_CONSTANTS: {
     };
     events: {
         SCROLLED_BOTTOM: string;
+        SELECT_ALL: string;
     };
 };
 export { type FieldDensity as SelectDensityType, type FieldShape as SelectShapeType } from '../../field/base/base-field-constants';

package/esm/select/select/select-constants.js

@@ -19,13 +19,16 @@ const observedAttributes = {
     DISABLED: 'disabled',
     PLACEHOLDER: 'placeholder',
     OBSERVE_SCROLL: 'observe-scroll',
-    OBSERVE_SCROLL_THRESHOLD: 'observe-scroll-threshold'
+    OBSERVE_SCROLL_THRESHOLD: 'observe-scroll-threshold',
+    SHOW_SELECT_ALL: 'show-select-all',
+    SELECT_ALL_LABEL: 'select-all-label'
 };
 const attributes = {
     ...observedAttributes
 };
 const events = {
-    SCROLLED_BOTTOM: `${elementName}-scrolled-bottom`
+    SCROLLED_BOTTOM: `${elementName}-scrolled-bottom`,
+    SELECT_ALL: `${elementName}-select-all`
 };
 export const SELECT_CONSTANTS = {
     elementName,

package/esm/select/select/select.d.ts

@@ -12,12 +12,14 @@ import { IWithElementInternals } from '../../core/mixins/internals/with-element-
 import { IWithLabelAwareness } from '../../core/mixins/label/with-label-aware';
 import { FieldDensity, FieldLabelPosition } from '../../field';
 import { IWithBaseField } from '../../field/base/with-base-field';
-import { BaseSelectComponent, IBaseSelectComponent } from '../core';
+import { BaseSelectComponent, IBaseSelectComponent, SelectSelectAllEventData } from '../core';
 import { SelectCore } from './select-core';
 import { IListDropdownAware } from '../../list-dropdown/list-dropdown-aware';
 export interface ISelectComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria, IWithBaseField, IBaseSelectComponent, IListDropdownAware {
     label: string;
     placeholder: string;
+    showSelectAll: boolean;
+    selectAllLabel: string;
     setFormValue(value: FormValue | null, state?: FormValue | null | undefined): void;
     [setValidity](): void;
 }
@@ -27,15 +29,18 @@ declare global {
     }
     interface HTMLElementEventMap {
         'forge-select-scrolled-bottom': CustomEvent<void>;
+        'forge-select-all': CustomEvent<SelectSelectAllEventData>;
         change: CustomEvent<any>;
     }
 }
 declare const SelectComponent_base: import("../../constants").AbstractConstructor<import("../../core/mixins/form/with-form-associated").WithFormAssociationContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/label/with-label-aware").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/focus/with-focusable").WithFocusableContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-element-internals").WithElementInternalsContract> & import("../../constants").AbstractConstructor<import("../../field/base/with-base-field").WithBaseFieldContract> & ((abstract new () => BaseSelectComponent<SelectCore>) & {
-    readonly observedAttributes: string[];
+    get observedAttributes(): string[];
 });
 /**
  * @tag forge-select
  *
+ * @summary Select components are comboboxes that present a list of options to users for single or multi-selection.
+ *
  * @dependency forge-field
  * @dependency forge-option
  * @dependency forge-option-group
@@ -53,9 +58,12 @@ declare const SelectComponent_base: import("../../constants").AbstractConstructo
  *
  * @event {CustomEvent<void>} forge-select-scrolled-bottom - Dispatched when the dropdown list has scrolled to the bottom.
  * @event {CustomEvent<any>} change - Dispatched when the user selects a value.
+ * @event {CustomEvent<SelectSelectAllEventData>} forge-select-all - Dispatched when the select all option is toggled.
  *
  * @property {string} label - Controls the label text.
  * @property {string} placeholder - Controls the placeholder text.
+ * @property {boolean} showSelectAll - Gets/sets whether to show the select all option when in multiple mode.
+ * @property {string} selectAllLabel - Gets/sets the label for the select all option.
  * @property {any} value - Gets/sets the value.
  * @property {number | number[]} selectedIndex - Gets/sets the selected index.
  * @property {ISelectOption[] | ISelectOptionGroup[]} options - Gets/sets the available options.
@@ -81,6 +89,8 @@ declare const SelectComponent_base: import("../../constants").AbstractConstructo
  *
  * @attribute {string} label - Controls the label text.
  * @attribute {string} placeholder - Controls the placeholder text.
+ * @attribute {boolean} show-select-all - Gets/sets whether to show the select all option when in multiple mode.
+ * @attribute {string} select-all-label - Gets/sets the label for the select all option.
  * @attribute {any} value - Gets/sets the value.
  * @attribute {number | number[]} selected-index - Gets/sets the selected index.
  * @attribute {boolean} multiple - Gets/sets the multiple select state.
@@ -174,6 +184,8 @@ export declare class SelectComponent extends SelectComponent_base implements ISe
     label: string;
     placeholder: string;
     readonly: boolean;
+    showSelectAll: boolean;
+    selectAllLabel: string;
     get floatLabel(): boolean;
     set floatLabel(value: boolean);
     get density(): FieldDensity;

package/esm/select/select/select.js

@@ -28,11 +28,14 @@ import { SelectAdapter } from './select-adapter';
 import { SELECT_CONSTANTS } from './select-constants';
 import { SelectCore } from './select-core';
 import { ListDropdownAware } from '../../list-dropdown/list-dropdown-aware';
-const template = '<template><forge-field id=\"field\" popover-icon focus-indicator-allow-focus focus-indicator-focus-mode=\"focus\"><span id=\"select-label\" slot=\"label\"></span><slot slot=\"start\" name=\"start\"></slot><div data-forge-field-input class=\"selected-text-container\" part=\"text-container\" aria-live=\"assertive\" aria-atomic=\"true\"><slot name=\"value\"><span id=\"selected-text\" class=\"selected-text\" part=\"text\"></span></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
+import { DividerComponent } from '../../divider/divider';
+const template = '<template><forge-field id=\"field\" popover-icon focus-indicator-allow-focus><span id=\"select-label\" slot=\"label\"></span><slot slot=\"start\" name=\"start\"></slot><div data-forge-field-input class=\"selected-text-container\" part=\"text-container\" aria-live=\"assertive\" aria-atomic=\"true\"><slot name=\"value\"><span id=\"selected-text\" class=\"selected-text\" part=\"text\"></span></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
 const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge-field{--_select-placeholder-color:var(--forge-select-placeholder-color, var(--forge-field-placeholder-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6))))}.selected-text-container{display:grid;align-items:center;cursor:pointer}.selected-text,::slotted([slot=value]){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.selected-text:empty::before{content:attr(placeholder);color:var(--_select-placeholder-color);font-size:inherit}:host([disabled]) .selected-text-container{cursor:not-allowed}forge-field{display:contents}';
 /**
  * @tag forge-select
  *
+ * @summary Select components are comboboxes that present a list of options to users for single or multi-selection.
+ *
  * @dependency forge-field
  * @dependency forge-option
  * @dependency forge-option-group
@@ -50,9 +53,12 @@ const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge
  *
  * @event {CustomEvent<void>} forge-select-scrolled-bottom - Dispatched when the dropdown list has scrolled to the bottom.
  * @event {CustomEvent<any>} change - Dispatched when the user selects a value.
+ * @event {CustomEvent<SelectSelectAllEventData>} forge-select-all - Dispatched when the select all option is toggled.
  *
  * @property {string} label - Controls the label text.
  * @property {string} placeholder - Controls the placeholder text.
+ * @property {boolean} showSelectAll - Gets/sets whether to show the select all option when in multiple mode.
+ * @property {string} selectAllLabel - Gets/sets the label for the select all option.
  * @property {any} value - Gets/sets the value.
  * @property {number | number[]} selectedIndex - Gets/sets the selected index.
  * @property {ISelectOption[] | ISelectOptionGroup[]} options - Gets/sets the available options.
@@ -78,6 +84,8 @@ const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge
  *
  * @attribute {string} label - Controls the label text.
  * @attribute {string} placeholder - Controls the placeholder text.
+ * @attribute {boolean} show-select-all - Gets/sets whether to show the select all option when in multiple mode.
+ * @attribute {string} select-all-label - Gets/sets the label for the select all option.
  * @attribute {any} value - Gets/sets the value.
  * @attribute {number | number[]} selected-index - Gets/sets the selected index.
  * @attribute {boolean} multiple - Gets/sets the multiple select state.
@@ -194,6 +202,12 @@ let SelectComponent = class SelectComponent extends WithFormAssociation(WithLabe
             case SELECT_CONSTANTS.observedAttributes.PLACEHOLDER:
                 this.placeholder = newValue;
                 return;
+            case SELECT_CONSTANTS.observedAttributes.SHOW_SELECT_ALL:
+                this.showSelectAll = coerceBoolean(newValue);
+                return;
+            case SELECT_CONSTANTS.observedAttributes.SELECT_ALL_LABEL:
+                this.selectAllLabel = newValue;
+                return;
         }
         super.attributeChangedCallback(name, oldValue, newValue);
     }
@@ -274,6 +288,12 @@ __decorate([
 __decorate([
     coreProperty()
 ], SelectComponent.prototype, "readonly", void 0);
+__decorate([
+    coreProperty()
+], SelectComponent.prototype, "showSelectAll", void 0);
+__decorate([
+    coreProperty()
+], SelectComponent.prototype, "selectAllLabel", void 0);
 SelectComponent = __decorate([
     customElement({
         name: SELECT_CONSTANTS.elementName,
@@ -288,7 +308,8 @@ SelectComponent = __decorate([
             IconComponent,
             ScaffoldComponent,
             ToolbarComponent,
-            IconButtonComponent
+            IconButtonComponent,
+            DividerComponent
         ]
     })
 ], SelectComponent);

package/esm/select/select-dropdown/select-dropdown.d.ts

@@ -20,6 +20,8 @@ declare global {
 }
 /**
  * @tag forge-select-dropdown
+ *
+ * @summary A dropdown variant of the select component that renders options in a popover.
  */
 export declare class SelectDropdownComponent extends BaseSelectComponent<SelectDropdownCore> implements ISelectDropdownComponent {
     static get observedAttributes(): string[];

package/esm/select/select-dropdown/select-dropdown.js

@@ -22,6 +22,8 @@ const template = '<template></template>';
 const styles = ':host{display:none}';
 /**
  * @tag forge-select-dropdown
+ *
+ * @summary A dropdown variant of the select component that renders options in a popover.
  */
 let SelectDropdownComponent = class SelectDropdownComponent extends BaseSelectComponent {
     static get observedAttributes() {