@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

package/esm/scaffold/scaffold.js

@@ -7,18 +7,57 @@ import { __decorate } from "tslib";
 import { CustomElement, attachShadowTemplate } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { SCAFFOLD_CONSTANTS } from './scaffold-constants';
-const template = '<template><div class=\"forge-scaffold\" part=\"root\"><slot name=\"left\"></slot><div class=\"forge-scaffold__header\" part=\"header-container\"><slot name=\"header\"></slot></div><div class=\"forge-scaffold__body\" part=\"body-container\"><slot name=\"body-left\"></slot><slot name=\"body-header\"></slot><slot name=\"body\"></slot><slot name=\"body-footer\"></slot><slot name=\"body-right\"></slot></div><slot name=\"footer\"></slot><slot name=\"right\"></slot></div></template>';
-const styles = '.forge-scaffold{height:100%;height:var(--forge-scaffold-height,100%);position:relative;position:var(--forge-scaffold-position,relative);overflow:hidden;overflow:var(--forge-scaffold-overflow,hidden);display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto}.forge-scaffold__header{grid-row:1;grid-column:2;min-width:0}.forge-scaffold__body{width:100%;width:var(--forge-scaffold-width,100%);position:relative;position:var(--forge-scaffold-body-position,relative);display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;grid-row:2;grid-column:2;overflow:hidden}.forge-scaffold__body ::slotted([slot=left]){overflow:auto;grid-column:1;grid-row:1/5}.forge-scaffold__body ::slotted([slot=right]){overflow:auto;grid-column:3;grid-row:1/5}.forge-scaffold__body ::slotted([slot=body-left]){overflow:auto;grid-column:1;grid-row:1/4}.forge-scaffold__body ::slotted([slot=body-right]){overflow:auto;grid-column:3;grid-row:1/4}.forge-scaffold__body ::slotted([slot=body-header]){grid-row:1;grid-column:2}.forge-scaffold__body ::slotted([slot=body]){overflow:auto;grid-row:2;grid-column:2}.forge-scaffold__body ::slotted([slot=body-footer]){grid-row:3;grid-column:2}.forge-scaffold ::slotted([slot=body-left]),.forge-scaffold ::slotted([slot=body-right]),.forge-scaffold ::slotted([slot=left]),.forge-scaffold ::slotted([slot=right]){overflow:auto}.forge-scaffold ::slotted([slot=body-left]){grid-column:1;grid-row:1/4}.forge-scaffold ::slotted([slot=body-right]){grid-column:3;grid-row:1/4}.forge-scaffold ::slotted([slot=footer]){grid-row:3;grid-column:2}.forge-scaffold ::slotted([slot=left]){grid-column:1;grid-row:1/5}.forge-scaffold ::slotted([slot=right]){grid-column:3;grid-row:1/5}:host{display:block;height:100%;width:100%}:host([hidden]){display:none}:host([viewport]){width:100vw;width:var(--forge-scaffold-width,100vw);height:100vh;height:var(--forge-scaffold-height,100vh);--forge-scaffold-height:100vh;--forge-scaffold-width:100vw}:host([viewport]) .forge-scaffold{height:100vh;height:var(--forge-scaffold-height,100vh);--forge-scaffold-height:100vh}:host([viewport]) .forge-scaffold__body{width:100vw;width:var(--forge-scaffold-width,100vw);--forge-scaffold-width:100vw}';
+const template = '<template><div class=\"forge-scaffold\" part=\"root\"><slot name=\"left\"></slot><div class=\"header\" part=\"header\"><slot name=\"header\"></slot></div><div class=\"body\" part=\"body\"><slot name=\"body-left\"></slot><slot name=\"body-header\"></slot><slot name=\"body\"></slot><slot name=\"body-footer\"></slot><slot name=\"body-right\"></slot></div><slot name=\"footer\"></slot><slot name=\"right\"></slot></div></template>';
+const styles = ':host{--_scaffold-height:var(--forge-scaffold-height, 100%);--_scaffold-width:var(--forge-scaffold-width, 100%)}:host{display:block;width:var(--_scaffold-width);height:var(--_scaffold-height)}:host([hidden]){display:none}.forge-scaffold{--_scaffold-overflow:var(--forge-scaffold-overflow, hidden);--_scaffold-body-position:var(--forge-scaffold-body-position, relative)}.forge-scaffold{position:relative;display:grid;grid-template-areas:\"left header right\" \"left body right\" \"left footer right\";grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;height:var(--_scaffold-height);width:var(--_scaffold-width);overflow:var(--_scaffold-overflow)}.header{grid-area:header;min-width:0;min-height:0}.body{position:var(--_scaffold-body-position);display:grid;grid-area:body;grid-template-areas:\"body-left body-header body-right\" \"body-left body-inner body-right\" \"body-left body-footer body-right\";grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;width:var(--_scaffold-width);min-width:0;min-height:0;overflow:hidden}::slotted(*){min-width:0;min-height:0}::slotted([slot=left]){grid-area:left}::slotted([slot=right]){grid-area:right}::slotted([slot=body-left]){grid-area:body-left}::slotted([slot=body-right]){grid-area:body-right}::slotted([slot=body-header]){grid-area:body-header}::slotted([slot=body]){overflow:auto;grid-area:body-inner}::slotted([slot=body-footer]){grid-area:body-footer}::slotted([slot=footer]){grid-area:footer}::slotted([slot=body-left]),::slotted([slot=body-right]),::slotted([slot=body]),::slotted([slot=left]),::slotted([slot=right]){overflow:auto}:host([viewport]){--_scaffold-height:var(--forge-scaffold-height, 100dvh);--_scaffold-width:var(--forge-scaffold-width, 100dvw)}';
 /**
- * The custom element class behind the `<forge-scaffold>` element.
- *
  * @tag forge-scaffold
+ *
+ * @summary A scaffold provides a generic layout structure for your content using common named areas.
+ *
+ * @property {boolean} viewport - Whether the scaffold should be full viewport height.
+ *
+ * @attribute {boolean} viewport - Whether the scaffold should be full viewport height.
+ *
+ * @cssproperty --forge-scaffold-height - The `height` of the scaffold.
+ * @cssproperty --forge-scaffold-width - The `width` of the scaffold.
+ * @cssproperty --forge-scaffold-overflow - The `overflow` of the scaffold.
+ * @cssproperty --forge-scaffold-body-position - The `position` of the scaffold body.
+ *
+ * @csspart root - The root container element.
+ * @csspart header - The header of the scaffold.
+ * @csspart body - The body of the scaffold.
+ *
+ * @slot header - Places content in the header.
+ * @slot body - Places content in the body.
+ * @slot footer - Places content in the footer.
+ * @slot left - Places content to the left of all content.
+ * @slot right - Places content to the right of all content.
+ * @slot body-header - Places content in the header of the body.
+ * @slot body-footer - Places content in the footer of the body.
+ * @slot body-left - Places content to the left of the body content.
+ * @slot body-right - Places content to the right of the body content.
  */
 let ScaffoldComponent = class ScaffoldComponent extends BaseComponent {
+    static get observedAttributes() {
+        return Object.values(SCAFFOLD_CONSTANTS.observedAttributes);
+    }
     constructor() {
         super();
         attachShadowTemplate(this, template, styles);
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case SCAFFOLD_CONSTANTS.observedAttributes.VIEWPORT:
+                this.viewport = newValue !== null;
+                break;
+        }
+    }
+    get viewport() {
+        return this.hasAttribute(SCAFFOLD_CONSTANTS.attributes.VIEWPORT);
+    }
+    set viewport(value) {
+        this.toggleAttribute(SCAFFOLD_CONSTANTS.attributes.VIEWPORT, Boolean(value));
+    }
 };
 ScaffoldComponent = __decorate([
     CustomElement({

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

@@ -17,6 +17,7 @@ export interface IBaseSelectAdapter extends IBaseAdapter {
     setOptions(options: ISelectOption[] | ISelectOptionGroup[], clear?: boolean): void;
     open(config: IListDropdownConfig): void;
     close(): void;
+    destroyListDropdown(): void;
     setDismissListener(listener: () => void): void;
     scrollSelectedOptionIntoView(): void;
     activateSelectedOption(): void;
@@ -34,10 +35,10 @@ export interface IBaseSelectAdapter extends IBaseAdapter {
     queueDropdownPositionUpdate(): void;
     popupElement: HTMLElement | undefined;
 }
-export declare abstract class BaseSelectAdapter extends BaseAdapter<IBaseSelectComponent> implements IBaseSelectAdapter {
+export declare abstract class BaseSelectAdapter<T extends IBaseSelectComponent> extends BaseAdapter<T> implements IBaseSelectAdapter {
     private _listDropdown?;
     protected _targetElement: HTMLElement;
-    constructor(component: IBaseSelectComponent);
+    constructor(component: T);
     abstract initializeAccessibility(): void;
     abstract updateActiveDescendant(id: string): void;
     abstract addClickListener(listener: (evt: Event) => void): void;
@@ -49,7 +50,8 @@ export declare abstract class BaseSelectAdapter extends BaseAdapter<IBaseSelectC
     getOptions(): ISelectOption[] | ISelectOptionGroup[];
     private _createOptionsFromElements;
     open(config: IListDropdownConfig): void;
-    close(): void;
+    close(): Promise<void>;
+    destroyListDropdown(): void;
     setDismissListener(listener: () => void): void;
     toggleOptionMultiple(index: number, isSelected: boolean): void;
     getActiveOptionIndex(): number;

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

@@ -9,7 +9,7 @@ import { ListDropdown } from '../../list-dropdown';
 import { OPTION_CONSTANTS } from '../option';
 import { OPTION_GROUP_CONSTANTS } from '../option-group';
 import { isOptionGroupObject } from './select-utils';
-import { POPUP_CONSTANTS } from '../../popup';
+import { POPOVER_CONSTANTS } from '../../popover';
 export class BaseSelectAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
@@ -68,21 +68,22 @@ export class BaseSelectAdapter extends BaseAdapter {
         this._listDropdown = new ListDropdown(this._targetElement, config);
         this._listDropdown.open();
     }
-    close() {
+    async close() {
         if (this._listDropdown) {
-            this._listDropdown.close();
-            this._listDropdown.destroy();
-            this._listDropdown = undefined;
+            await this._listDropdown.close();
+            this.destroyListDropdown();
         }
     }
+    destroyListDropdown() {
+        var _a;
+        (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._listDropdown = undefined;
+    }
     setDismissListener(listener) {
         if (!this._listDropdown || !this._listDropdown.dropdownElement) {
             return;
         }
-        const dropdownElement = this._listDropdown.dropdownElement;
-        if (dropdownElement.targetElement) {
-            dropdownElement.targetElement.addEventListener(POPUP_CONSTANTS.events.BLUR, listener);
-        }
+        this._listDropdown.dropdownElement.addEventListener(POPOVER_CONSTANTS.events.TOGGLE, listener);
     }
     toggleOptionMultiple(index, isSelected) {
         var _a;

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

@@ -13,6 +13,17 @@ export interface ISelectOption extends IListDropdownOption {
 export interface ISelectOptionGroup extends IListDropdownOptionGroup {
 }
 export declare const BASE_SELECT_CONSTANTS: {
+    observedAttributes: {
+        VALUE: string;
+        MULTIPLE: string;
+        OBSERVE_SCROLL: string;
+        OBSERVE_SCROLL_THRESHOLD: string;
+        POPUP_CLASSES: string;
+        OPTION_LIMIT: string;
+        SYNC_POPUP_WIDTH: string;
+        CONSTRAIN_POPUP_WIDTH: string;
+        WRAP_OPTION_TEXT: string;
+    };
     attributes: {
         VALUE: string;
         MULTIPLE: string;

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

@@ -19,6 +19,7 @@ const events = {
     CHANGE: 'change'
 };
 export const BASE_SELECT_CONSTANTS = {
+    observedAttributes,
     attributes,
     events
 };

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

@@ -50,12 +50,11 @@ export class BaseSelectFoundation extends ListDropdownAwareFoundation {
         this._adapter.removeTargetListener('blur', this._blurListener);
         this._adapter.removeTargetListener('focus', this._focusListener);
         this._adapter.removeTargetListener('keydown', this._keydownListener);
-        if (this._open) {
-            this._closeDropdown();
-        }
         if (this._optionListenerDestructor) {
             this._optionListenerDestructor();
         }
+        this._open = false;
+        this._adapter.destroyListDropdown();
     }
     appendOptions(options) {
         this._adapter.setOptions(options, false);
@@ -338,6 +337,7 @@ export class BaseSelectFoundation extends ListDropdownAwareFoundation {
         }
         if (isSpace) {
             evt.preventDefault();
+            evt.stopPropagation();
             if (!this._open) {
                 this._openDropdown();
             }

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

@@ -6,7 +6,7 @@
 import { SelectOptionBuilder, SelectSelectedTextBuilder, ISelectOption, ISelectOptionGroup, SelectBeforeValueChangeCallback } from './base-select-constants';
 import { IBaseSelectFoundation } from './base-select-foundation';
 import { IListDropdownAware, ListDropdownAware } from '../../list-dropdown/list-dropdown-aware';
-import { IPopupComponent } from '../../popup';
+import type { IPopoverComponent } from '../../popover/popover';
 export interface IBaseSelectComponent extends IListDropdownAware {
     value: any;
     selectedIndex: number | number[];
@@ -15,7 +15,7 @@ export interface IBaseSelectComponent extends IListDropdownAware {
     open: boolean;
     optionBuilder: SelectOptionBuilder;
     selectedTextBuilder: SelectSelectedTextBuilder;
-    popupElement: IPopupComponent | undefined;
+    popupElement: IPopoverComponent | undefined;
     beforeValueChange: SelectBeforeValueChangeCallback<any>;
     appendOptions(options: ISelectOption[] | ISelectOption[]): void;
     selectAll(): void;
@@ -44,7 +44,7 @@ export declare abstract class BaseSelectComponent<T extends IBaseSelectFoundatio
      * Gets the popup element (when the dropdown is open).
      * @readonly
      */
-    popupElement: IPopupComponent | undefined;
+    popupElement: IPopoverComponent | undefined;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     appendOptions(options: ISelectOption[] | ISelectOptionGroup[]): void;
     selectAll(): void;

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

@@ -3,83 +3,37 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IFontInfo } from '@tylertech/forge-core';
-import { IFloatingLabel } from '../../floating-label/floating-label';
 import { ISelectComponent } from './select';
 import { IBaseSelectAdapter, BaseSelectAdapter } from '../core';
 import { IListDropdownConfig } from '../../list-dropdown/list-dropdown-constants';
+import type { IFieldComponent } from '../../field/field';
 export type OptionListenerDestructor = () => void;
 export interface ISelectAdapter extends IBaseSelectAdapter {
-    initializeFloatingLabel(): IFloatingLabel;
-    initializeLabel(): void;
-    hasLabel(): boolean;
+    readonly fieldElement: IFieldComponent;
+    floatLabel(value: boolean): void;
     setLabel(value: string): void;
-    addRootClass(name: string): void;
-    removeRootClass(name: string): void;
     setPlaceholderText(value: string): void;
     setSelectedText(value: string): void;
-    addMouseDownListener(listener: (evt: MouseEvent) => void): void;
-    removeMouseDownListener(listener: (evt: MouseEvent) => void): void;
-    setLeadingListener(listener: (evt: Event) => void): void;
-    removeLeadingListener(listener: (evt: Event) => void): void;
-    setAddonEndListener(listener: (evt: Event) => void): void;
-    removeAddonEndListener(listener: (evt: Event) => void): void;
-    hasLeadingElement(): boolean;
-    setDisabled(isDisabled: boolean): void;
-    setInvalid(isInvalid: boolean): void;
-    setRequired(isRequired: boolean): void;
-    setRoomy(isRoomy: boolean): void;
-    setDense(isDense: boolean): void;
-    getLabelWidth(fontSize: number, fontFamily: string): number;
-    getLabelFontMetrics(): IFontInfo;
-    getTargetWidth(): number;
-    hasAddonEndNodes(): boolean;
-    setFocus(): void;
-    isWithinSelf(element: HTMLElement): boolean;
+    setDisabled(value: boolean): void;
 }
-/**
- * The DOM adapter behind the `<forge-select>` component.
- */
-export declare class SelectAdapter extends BaseSelectAdapter implements ISelectAdapter {
-    private _selectElement;
+export declare class SelectAdapter extends BaseSelectAdapter<ISelectComponent> implements ISelectAdapter {
+    private _fieldElement;
     private _labelElement;
     private _selectedTextElement;
-    private _leadingSlot;
-    private _addonEndSlot;
     constructor(component: ISelectComponent);
-    initializeLabel(): void;
-    hasLabel(): boolean;
+    get fieldElement(): IFieldComponent;
     initializeAccessibility(): void;
-    initializeFloatingLabel(): IFloatingLabel;
     setLabel(value: string): void;
-    addRootClass(name: string): void;
-    removeRootClass(name: string): void;
     setPlaceholderText(value: string): void;
-    addClickListener(listener: (evt: Event) => void): void;
-    removeClickListener(listener: (evt: Event) => void): void;
-    addMouseDownListener(listener: (evt: MouseEvent) => void): void;
-    removeMouseDownListener(listener: (evt: MouseEvent) => void): void;
-    addTargetListener(type: string, listener: (evt: Event) => void): void;
-    removeTargetListener(type: string, listener: (evt: Event) => void): void;
     open(config: IListDropdownConfig): void;
-    close(): void;
+    close(): Promise<void>;
+    floatLabel(value: boolean): void;
     updateActiveDescendant(id: string): void;
     setSelectedText(value: string): void;
-    setLeadingListener(listener: (evt: Event) => void): void;
-    removeLeadingListener(listener: (evt: Event) => void): void;
-    setAddonEndListener(listener: (evt: Event) => void): void;
-    removeAddonEndListener(listener: (evt: Event) => void): void;
-    hasLeadingElement(): boolean;
-    setDisabled(isDisabled: boolean): void;
-    setInvalid(isInvalid: boolean): void;
-    setRequired(isRequired: boolean): void;
-    setRoomy(isRoomy: boolean): void;
-    setDense(isDense: boolean): void;
     setMultiple(multiple: boolean): void;
-    getLabelWidth(fontSize: number, fontFamily: string): number;
-    getLabelFontMetrics(): IFontInfo;
-    getTargetWidth(): number;
-    hasAddonEndNodes(): boolean;
-    setFocus(): void;
-    isWithinSelf(element: HTMLElement): boolean;
+    setDisabled(value: boolean): void;
+    addClickListener(listener: (evt: Event) => void): void;
+    removeClickListener(listener: (evt: Event) => void): void;
+    addTargetListener(type: string, listener: (evt: Event) => void): void;
+    removeTargetListener(type: string, listener: (evt: Event) => void): void;
 }

package/esm/select/select/select-adapter.js

@@ -3,86 +3,76 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { calculateFontWidth, getShadowElement, toggleClass, toggleAttribute } from '@tylertech/forge-core';
-import { FloatingLabel } from '../../floating-label/floating-label';
+import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
 import { SELECT_CONSTANTS } from './select-constants';
 import { BaseSelectAdapter } from '../core';
-import { FIELD_CONSTANTS } from '../../field/field-constants';
-/**
- * The DOM adapter behind the `<forge-select>` component.
- */
+import { FIELD_CONSTANTS } from '../../field';
 export class SelectAdapter extends BaseSelectAdapter {
     constructor(component) {
         super(component);
-        this._selectElement = getShadowElement(component, SELECT_CONSTANTS.selectors.ROOT);
-        this._leadingSlot = getShadowElement(component, SELECT_CONSTANTS.selectors.LEADING_SLOT);
-        this._addonEndSlot = getShadowElement(this._component, SELECT_CONSTANTS.selectors.ADDON_END_SLOT);
+        this._fieldElement = getShadowElement(component, SELECT_CONSTANTS.selectors.FIELD);
+        this._labelElement = getShadowElement(component, SELECT_CONSTANTS.selectors.LABEL);
         this._selectedTextElement = getShadowElement(component, SELECT_CONSTANTS.selectors.SELECTED_TEXT);
-        this._targetElement = this._selectElement;
+        this._fieldElement.setAttribute('exportparts', Object.values(FIELD_CONSTANTS.parts).join(', '));
+        this._fieldElement.focusIndicatorTargetElement = this._component;
     }
-    initializeLabel() {
-        this._labelElement = getShadowElement(this._component, SELECT_CONSTANTS.selectors.LABEL);
-    }
-    hasLabel() {
-        return !!this._labelElement;
+    get fieldElement() {
+        return this._fieldElement;
     }
     initializeAccessibility() {
         this._component.setAttribute('role', 'combobox');
         this._component.setAttribute('aria-haspopup', 'true');
         this._component.setAttribute('aria-expanded', 'false');
-        // We need to ensure the host element receives a non-negative tabindex for our interactions to work properly
-        if (!this._component.hasAttribute('tabindex') || this._component.tabIndex === -1) {
-            this._component.tabIndex = 0;
+        if (this.fieldElement.required) {
+            this.setHostAttribute('aria-required', 'true');
+        }
+        if (this.fieldElement.disabled) {
+            this.setHostAttribute('aria-disabled', 'true');
+        }
+        if (this.fieldElement.invalid) {
+            this.setHostAttribute('aria-invalid', 'true');
+        }
+        if (!this._component.hasAttribute('tabindex')) {
+            this._component.tabIndex = this._component.disabled ? -1 : 0;
         }
-    }
-    initializeFloatingLabel() {
-        return new FloatingLabel(this._labelElement);
     }
     setLabel(value) {
+        const isInsetAndDense = this._fieldElement.labelPosition === 'inset' && (this._fieldElement.density === 'extra-small' || this._fieldElement.dense);
+        const hasLabel = !isInsetAndDense && !!(value === null || value === void 0 ? void 0 : value.trim());
         if (!this._component.hasAttribute('aria-label') || this._component.getAttribute('aria-label') === this._labelElement.textContent) {
             this._component.setAttribute('aria-label', value);
         }
-        this._labelElement.textContent = value;
-    }
-    addRootClass(name) {
-        this._selectElement.classList.add(name);
-    }
-    removeRootClass(name) {
-        this._selectElement.classList.remove(name);
+        if (hasLabel) {
+            if (!this._labelElement.isConnected) {
+                this._fieldElement.insertAdjacentElement('afterbegin', this._labelElement);
+            }
+            this._labelElement.textContent = value;
+        }
+        else {
+            this._labelElement.remove();
+        }
     }
     setPlaceholderText(value) {
-        toggleAttribute(this._selectedTextElement, !!value, 'placeholder', value);
-    }
-    addClickListener(listener) {
-        this._component.addEventListener('click', listener);
-    }
-    removeClickListener(listener) {
-        this._component.removeEventListener('click', listener);
-    }
-    addMouseDownListener(listener) {
-        this._component.addEventListener('mousedown', listener);
-    }
-    removeMouseDownListener(listener) {
-        this._component.removeEventListener('mousedown', listener);
-    }
-    addTargetListener(type, listener) {
-        this._component.addEventListener(type, listener);
-    }
-    removeTargetListener(type, listener) {
-        this._component.removeEventListener(type, listener);
+        toggleAttribute(this._selectedTextElement, !!(value === null || value === void 0 ? void 0 : value.trim()), 'placeholder', value);
     }
     open(config) {
+        if (!this._targetElement) {
+            this._targetElement = getShadowElement(this._fieldElement, FIELD_CONSTANTS.selectors.POPOVER_TARGET);
+        }
         super.open(config);
         this._component.setAttribute('aria-controls', `list-dropdown-popup-${config.id}`);
         this._component.setAttribute('aria-expanded', 'true');
-        toggleClass(this._selectElement, true, SELECT_CONSTANTS.classes.OPENED);
+        this._fieldElement.popoverExpanded = true;
     }
     close() {
         this._component.setAttribute('aria-expanded', 'false');
         this._component.removeAttribute('aria-activedescendant');
         this._component.removeAttribute('aria-controls');
-        toggleClass(this._selectElement, false, SELECT_CONSTANTS.classes.OPENED);
-        super.close();
+        this._fieldElement.popoverExpanded = false;
+        return super.close();
+    }
+    floatLabel(value) {
+        this._fieldElement.floatLabel = value;
     }
     updateActiveDescendant(id) {
         toggleAttribute(this._component, !!id, 'aria-activedescendant', id);
@@ -90,72 +80,23 @@ export class SelectAdapter extends BaseSelectAdapter {
     setSelectedText(value) {
         this._selectedTextElement.textContent = value;
     }
-    setLeadingListener(listener) {
-        this._leadingSlot.addEventListener('slotchange', listener);
-    }
-    removeLeadingListener(listener) {
-        this._leadingSlot.removeEventListener('slotchange', listener);
-    }
-    setAddonEndListener(listener) {
-        this._addonEndSlot.addEventListener('slotchange', listener);
-    }
-    removeAddonEndListener(listener) {
-        this._addonEndSlot.removeEventListener('slotchange', listener);
-    }
-    hasLeadingElement() {
-        return this._leadingSlot.assignedNodes().length > 0;
-    }
-    setDisabled(isDisabled) {
-        toggleClass(this._selectElement, isDisabled, FIELD_CONSTANTS.classes.DISABLED);
-        toggleAttribute(this._component, isDisabled, 'aria-disabled', 'true');
-        this._component.tabIndex = isDisabled ? -1 : 0;
-    }
-    setInvalid(isInvalid) {
-        toggleClass(this._selectElement, isInvalid, FIELD_CONSTANTS.classes.INVALID);
-        toggleAttribute(this._component, isInvalid, 'aria-invalid', 'true');
-    }
-    setRequired(isRequired) {
-        toggleClass(this._selectElement, isRequired, FIELD_CONSTANTS.classes.REQUIRED);
-        toggleAttribute(this._component, isRequired, 'aria-required', 'true');
-    }
-    setRoomy(isRoomy) {
-        toggleClass(this._selectElement, isRoomy, FIELD_CONSTANTS.classes.ROOMY);
-    }
-    setDense(isDense) {
-        toggleClass(this._selectElement, isDense, FIELD_CONSTANTS.classes.DENSE);
-    }
     setMultiple(multiple) {
-        if (multiple) {
-            this.setHostAttribute('aria-multiselectable', 'true');
-        }
-        else {
-            this.removeHostAttribute('aria-multiselectable');
-        }
-    }
-    getLabelWidth(fontSize, fontFamily) {
-        return calculateFontWidth(this._labelElement.innerText, { fontSize, fontFamily });
+        this.toggleHostAttribute('aria-multiselectable', multiple, 'true');
     }
-    getLabelFontMetrics() {
-        const style = getComputedStyle(this._labelElement);
-        return {
-            fontSize: parseInt(style.fontSize || '16', 10),
-            fontFamily: style.fontFamily || 'Roboto'
-        };
+    setDisabled(value) {
+        this._component.tabIndex = value ? -1 : 0;
+        toggleAttribute(this._component, value, 'aria-disabled', 'true');
     }
-    getTargetWidth() {
-        return this._selectElement.getBoundingClientRect().width;
+    addClickListener(listener) {
+        this._component.addEventListener('click', listener);
     }
-    hasAddonEndNodes() {
-        if (!this._addonEndSlot) {
-            return false;
-        }
-        return this._addonEndSlot.assignedNodes().length > 0;
+    removeClickListener(listener) {
+        this._component.removeEventListener('click', listener);
     }
-    setFocus() {
-        this._component.focus();
+    addTargetListener(type, listener) {
+        this._component.addEventListener(type, listener);
     }
-    isWithinSelf(element) {
-        const isShadowChild = !!this._component.shadowRoot && this._component.shadowRoot.contains(element);
-        return isShadowChild || this._component.contains(element);
+    removeTargetListener(type, listener) {
+        this._component.removeEventListener(type, listener);
     }
 }

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

@@ -5,22 +5,19 @@
  */
 export declare const SELECT_CONSTANTS: {
     elementName: "forge-select";
-    classes: {
-        ROOT: string;
-        OPENED: string;
-        SELECTED_TEXT: string;
-        DROPDOWN: string;
-        LABEL_FLOAT: string;
-        GROUP_WRAPPER: string;
-    };
-    selectors: {
-        ROOT: string;
-        SELECTED_TEXT: string;
+    observedAttributes: {
+        OPEN: string;
+        TYPE: string;
+        VALUE: string;
         LABEL: string;
-        LEADING_SLOT: string;
-        ADDON_END_SLOT: string;
+        MULTIPLE: string;
+        DISABLED: string;
+        PLACEHOLDER: string;
+        OBSERVE_SCROLL: string;
+        OBSERVE_SCROLL_THRESHOLD: string;
     };
     attributes: {
+        OPEN: string;
         TYPE: string;
         VALUE: string;
         LABEL: string;
@@ -30,8 +27,13 @@ export declare const SELECT_CONSTANTS: {
         OBSERVE_SCROLL: string;
         OBSERVE_SCROLL_THRESHOLD: string;
     };
+    selectors: {
+        FIELD: string;
+        SELECTED_TEXT: string;
+        LABEL: string;
+    };
     events: {
         SCROLLED_BOTTOM: string;
     };
 };
-export { type FieldDensityType as SelectDensityType, type FieldFloatLabelType as SelectFloatLabelType, type FieldShapeType as SelectShapeType } from '../../field/field-constants';
+export { type FieldDensity as SelectDensityType, type FieldShape as SelectShapeType } from '../../field/base/base-field-constants';

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

@@ -5,22 +5,13 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}select`;
-const classes = {
-    ROOT: 'forge-select',
-    OPENED: 'forge-select--opened',
-    SELECTED_TEXT: 'forge-select__selected-text',
-    DROPDOWN: 'forge-select__dropdown',
-    LABEL_FLOAT: 'forge-select--label-float',
-    GROUP_WRAPPER: 'forge-select__group-wrapper'
-};
 const selectors = {
-    ROOT: `.${classes.ROOT}`,
-    SELECTED_TEXT: `.${classes.SELECTED_TEXT}`,
-    LABEL: 'label#select-label',
-    LEADING_SLOT: 'slot[name=leading]',
-    ADDON_END_SLOT: 'slot[name=addon-end]'
+    FIELD: '#field',
+    SELECTED_TEXT: '#selected-text',
+    LABEL: '#select-label'
 };
-const attributes = {
+const observedAttributes = {
+    OPEN: 'open',
     TYPE: 'type',
     VALUE: 'value',
     LABEL: 'label',
@@ -30,13 +21,14 @@ const attributes = {
     OBSERVE_SCROLL: 'observe-scroll',
     OBSERVE_SCROLL_THRESHOLD: 'observe-scroll-threshold'
 };
+const attributes = Object.assign({}, observedAttributes);
 const events = {
     SCROLLED_BOTTOM: `${elementName}-scrolled-bottom`
 };
 export const SELECT_CONSTANTS = {
     elementName,
-    classes,
-    selectors,
+    observedAttributes,
     attributes,
+    selectors,
     events
 };