@tylertech/forge 3.0.0-next.19 → 3.0.0-next.20

package/esm/chips/chip-set/chip-set.js

@@ -4,68 +4,163 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { attachShadowTemplate, coerceBoolean, CustomElement } from '@tylertech/forge-core';
 import { BaseComponent } from '../../core/base/base-component';
 import { ChipComponent } from '../chip/chip';
-import { ChipSetAdapter } from './chip-set-adapter';
+import { CHIP_CONSTANTS } from '../chip/chip-constants';
 import { CHIP_SET_CONSTANTS } from './chip-set-constants';
-import { ChipSetFoundation } from './chip-set-foundation';
 const template = '<template><div class=\"forge-chip-set\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-chip-set{gap:4px;gap:var(--forge-chip-set-spacing,4px);display:-webkit-box;display:flex;flex-wrap:wrap}.forge-chip-set ::slotted(forge-chip:not(:last-child)){margin-right:4px;margin-right:var(--forge-chip-set-spacing,4px)}.forge-chip-set--vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-chip-set--vertical ::slotted(forge-chip:not(:last-child)){margin-bottom:4px;margin-bottom:var(--forge-chip-set-spacing,4px)}:host{display:inline-block}:host([hidden]){display:none}';
+const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-chip-set{--_chip-set-spacing:var(--forge-chip-set-spacing, var(--forge-spacing-xsmall, 8px))}.forge-chip-set{display:-webkit-box;display:flex;flex-wrap:wrap;gap:var(--_chip-set-spacing)}:host([vertical]) .forge-chip-set{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}';
 /**
- * The web component class behind the `<forge-chip-set>` custom element.
- *
  * @tag forge-chip-set
+ *
+ * @summary Chips sets are used to group multiple chips together and orchestrate their behavior.
+ *
+ * @property {boolean} [vertical=false] - Whether the chip set is vertical.
+ * @property {ChipType} [type='action'] - The type of chip.
+ * @property {boolean} [dense=false] - Whether the chip set is dense.
+ * @property {boolean} [disabled=false] - Whether the chip set is disabled.
+ * @property {boolean} [invalid=false] - Whether the chip set is invalid.
+ * @property {ChipTheme} [theme='primary'] - The theme of the chip set.
+ *
+ * @attribute {boolean} [vertical] - Whether the chip set is vertically oriented.
+ * @attribute {ChipType} [type] - The type of chips.
+ * @attribute {boolean} [dense] - Whether all chips in the chip set are dense.
+ * @attribute {boolean} [disabled] - Whether all chips in the chip set are disabled.
+ * @attribute {boolean} [invalid] - Whether all chips in the chip set are invalid.
+ * @attribute {ChipTheme} [theme] - The theme of the chips.
+ *
+ * @cssproperty --forge-chip-set-spacing - The spacing between chips.
+ *
+ * @csspart root - The component's root element.
+ *
+ * @slot - The chips to display in the chip set.
  */
 let ChipSetComponent = class ChipSetComponent extends BaseComponent {
     static get observedAttributes() {
-        return [
-            CHIP_SET_CONSTANTS.attributes.VERTICAL,
-            CHIP_SET_CONSTANTS.attributes.TYPE,
-            CHIP_SET_CONSTANTS.attributes.DENSE,
-            CHIP_SET_CONSTANTS.attributes.DISABLED
-        ];
+        return Object.values(CHIP_SET_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
+        this._vertical = false;
+        this._type = CHIP_CONSTANTS.defaults.TYPE;
+        this._dense = false;
+        this._disabled = false;
+        this._invalid = false;
+        this._theme = CHIP_CONSTANTS.defaults.THEME;
         attachShadowTemplate(this, template, styles);
-        this._foundation = new ChipSetFoundation(new ChipSetAdapter(this));
     }
     connectedCallback() {
-        this._foundation.initialize();
-    }
-    disconnectedCallback() {
-        this._foundation.destroy();
+        this.addEventListener(CHIP_CONSTANTS.events.NAVIGATE, this._onChipNavigate.bind(this));
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case CHIP_SET_CONSTANTS.attributes.VERTICAL:
+            case CHIP_SET_CONSTANTS.observedAttributes.VERTICAL:
                 this.vertical = coerceBoolean(newValue);
                 break;
-            case CHIP_SET_CONSTANTS.attributes.TYPE:
+            case CHIP_SET_CONSTANTS.observedAttributes.TYPE:
                 this.type = newValue;
                 break;
-            case CHIP_SET_CONSTANTS.attributes.DENSE:
+            case CHIP_SET_CONSTANTS.observedAttributes.DENSE:
                 this.dense = coerceBoolean(newValue);
                 break;
-            case CHIP_SET_CONSTANTS.attributes.DISABLED:
+            case CHIP_SET_CONSTANTS.observedAttributes.DISABLED:
                 this.disabled = coerceBoolean(newValue);
                 break;
+            case CHIP_SET_CONSTANTS.observedAttributes.INVALID:
+                this.invalid = coerceBoolean(newValue);
+                break;
+            case CHIP_SET_CONSTANTS.observedAttributes.THEME:
+                this.theme = newValue;
+                break;
+        }
+    }
+    _onChipNavigate(evt) {
+        const focusableChips = this._findChipDescendants().filter(chip => !chip.disabled);
+        const activeChipIndex = focusableChips.findIndex(chip => chip === evt.target);
+        let index = evt.detail.direction === 'previous' ? activeChipIndex - 1 : activeChipIndex + 1;
+        if (index > focusableChips.length - 1) {
+            index = 0;
+        }
+        const nextChip = focusableChips.at(index);
+        if ((nextChip === null || nextChip === void 0 ? void 0 : nextChip.type) === 'input' && evt.detail.direction === 'previous') {
+            nextChip.focusRemoveButton();
+        }
+        else {
+            nextChip === null || nextChip === void 0 ? void 0 : nextChip.focus();
+        }
+    }
+    _findChipDescendants() {
+        return Array.from(this.querySelectorAll(CHIP_CONSTANTS.elementName));
+    }
+    _syncChipsProperty(property, value) {
+        const chips = this._findChipDescendants();
+        chips.forEach(c => c[property] = value);
+    }
+    get vertical() {
+        return this._vertical;
+    }
+    set vertical(value) {
+        value = Boolean(value);
+        if (this._vertical !== value) {
+            this._vertical = value;
+            this.toggleAttribute(CHIP_SET_CONSTANTS.attributes.VERTICAL, this._vertical);
+        }
+    }
+    get type() {
+        return this._type;
+    }
+    set type(value) {
+        if (this._type !== value) {
+            this._type = value;
+            this._syncChipsProperty('type', this._type);
+            this.setAttribute(CHIP_SET_CONSTANTS.attributes.TYPE, this._type);
+        }
+    }
+    get dense() {
+        return this._dense;
+    }
+    set dense(value) {
+        value = Boolean(value);
+        if (this._dense !== value) {
+            this._dense = value;
+            this._syncChipsProperty('dense', this._dense);
+            this.toggleAttribute(CHIP_SET_CONSTANTS.attributes.DENSE, this._dense);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        value = Boolean(value);
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._syncChipsProperty('disabled', this._disabled);
+            this.toggleAttribute(CHIP_SET_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+    get invalid() {
+        return this._invalid;
+    }
+    set invalid(value) {
+        value = Boolean(value);
+        if (this._invalid !== value) {
+            this._invalid = value;
+            this._syncChipsProperty('invalid', this._invalid);
+            this.toggleAttribute(CHIP_SET_CONSTANTS.attributes.INVALID, this._invalid);
+        }
+    }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value;
+            this._syncChipsProperty('theme', this._theme);
+            this.setAttribute(CHIP_SET_CONSTANTS.attributes.THEME, this._theme);
         }
     }
 };
-__decorate([
-    FoundationProperty()
-], ChipSetComponent.prototype, "vertical", void 0);
-__decorate([
-    FoundationProperty()
-], ChipSetComponent.prototype, "type", void 0);
-__decorate([
-    FoundationProperty()
-], ChipSetComponent.prototype, "dense", void 0);
-__decorate([
-    FoundationProperty()
-], ChipSetComponent.prototype, "disabled", void 0);
 ChipSetComponent = __decorate([
     CustomElement({
         name: CHIP_SET_CONSTANTS.elementName,

package/esm/chips/chip-set/index.d.ts

@@ -3,8 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './chip-set-adapter';
 export * from './chip-set-constants';
-export * from './chip-set-foundation';
 export * from './chip-set';
 export declare function defineChipSetComponent(): void;

package/esm/chips/chip-set/index.js

@@ -5,9 +5,7 @@
  */
 import { defineCustomElement } from '@tylertech/forge-core';
 import { ChipSetComponent } from './chip-set';
-export * from './chip-set-adapter';
 export * from './chip-set-constants';
-export * from './chip-set-foundation';
 export * from './chip-set';
 export function defineChipSetComponent() {
     defineCustomElement(ChipSetComponent);

package/esm/constants.d.ts

@@ -17,12 +17,17 @@ export declare const getFormState: unique symbol;
 export declare const getValidationMessage: unique symbol;
 /** A property symbol that references the `ElementInternals` instance of an element. */
 export declare const internals: unique symbol;
-/** A property symbol that sets the type of an internal input element used to create validations messages */
+/**
+ * A property symbol that sets the type of an internal input element used to create
+ * validation messages
+ */
 export declare const inputType: unique symbol;
 /** A property symbol that indicates whether or not a `Focusable` element can be focused. */
 export declare const isFocusable: unique symbol;
-/** A method symbol that sets default ARIA on the `ElementInternals` instance of an element if
- * supported or sprouts attributes if not. */
+/**
+ * A method symbol that sets default ARIA on the `ElementInternals` instance of an element if
+ * supported or sprouts attributes if not.
+ */
 export declare const setDefaultAria: unique symbol;
 export type Theme = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info';
 export type Density = 'small' | 'medium' | 'large';

package/esm/constants.js

@@ -17,10 +17,15 @@ export const getFormState = Symbol('getFormState');
 export const getValidationMessage = Symbol('getValidityMessage');
 /** A property symbol that references the `ElementInternals` instance of an element. */
 export const internals = Symbol('ElementInternals');
-/** A property symbol that sets the type of an internal input element used to create validations messages */
+/**
+ * A property symbol that sets the type of an internal input element used to create
+ * validation messages
+ */
 export const inputType = Symbol('inputType');
 /** A property symbol that indicates whether or not a `Focusable` element can be focused. */
 export const isFocusable = Symbol('isFocusable');
-/** A method symbol that sets default ARIA on the `ElementInternals` instance of an element if
- * supported or sprouts attributes if not. */
+/**
+ * A method symbol that sets default ARIA on the `ElementInternals` instance of an element if
+ * supported or sprouts attributes if not.
+ */
 export const setDefaultAria = Symbol('setDefaultAria');

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

@@ -31,7 +31,7 @@ export interface IBaseAdapter<T extends HTMLElement = HTMLElement> {
     focusHost(options?: FocusOptions): void;
     clickHost(): void;
 }
-export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapter {
+export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapter<T> {
     protected _component: T;
     constructor(_component: T);
     get hostElement(): T;
@@ -45,6 +45,7 @@ export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapt
         cancelable?: boolean;
         composed?: boolean;
     }): boolean;
+    /** @deprecated Use `dispatchHostEvent` instead. */
     emitHostEvent(type: string, data?: any, bubble?: boolean, cancelable?: boolean): boolean;
     dispatchHostEvent<U extends Event>(event: U): boolean;
     toggleHostListener(event: string, listener: EventListener, value: boolean, options?: boolean | AddEventListenerOptions): void;

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

@@ -40,6 +40,7 @@ export class BaseAdapter {
         }
         return !isCancelled;
     }
+    /** @deprecated Use `dispatchHostEvent` instead. */
     emitHostEvent(type, data = null, bubble = true, cancelable) {
         return emitEvent(this._component, type, data, bubble, cancelable);
     }

package/esm/core/utils/utils.d.ts

@@ -112,6 +112,17 @@ export declare function replaceElement<T extends HTMLElement>(oldElement: HTMLEl
  * @returns An array of strings.
  */
 export declare function coerceStringToArray<T extends string>(value: string, separator?: string): T[];
+/**
+ * Wraps an array of elements in a new element.
+ * @param elements The elements to wrap.
+ * @param wrapper The new wrapper element.
+ */
+export declare function wrapElements(elements: HTMLElement[], wrapper: HTMLElement, exclude?: string[]): void;
+/**
+ * Unwraps an element by moving its children to its parent and removing the element.
+ * @param wrapper The element to unwrap.
+ */
+export declare function unwrapElements(wrapper: HTMLElement): void;
 /**
  * Rounds a value to the nearest pixel based on the device pixel ratio.
  * @param {number} value The value to round.

package/esm/core/utils/utils.js

@@ -214,6 +214,41 @@ export function replaceElement(oldElement, newElement, preserveChildren = true)
 export function coerceStringToArray(value, separator = ',') {
     return value.split(separator).map(p => p.trim());
 }
+/**
+ * Wraps an array of elements in a new element.
+ * @param elements The elements to wrap.
+ * @param wrapper The new wrapper element.
+ */
+export function wrapElements(elements, wrapper, exclude) {
+    if (!elements.length) {
+        return;
+    }
+    const parentNode = elements[0].parentNode;
+    if (!parentNode) {
+        return;
+    }
+    parentNode.insertBefore(wrapper, elements[0]);
+    elements.forEach(el => {
+        if ((exclude === null || exclude === void 0 ? void 0 : exclude.length) && exclude.some(ex => el.matches(ex))) {
+            return;
+        }
+        wrapper.append(el);
+    });
+}
+/**
+ * Unwraps an element by moving its children to its parent and removing the element.
+ * @param wrapper The element to unwrap.
+ */
+export function unwrapElements(wrapper) {
+    const parentNode = wrapper.parentNode;
+    if (!parentNode) {
+        return;
+    }
+    while (wrapper.firstChild) {
+        parentNode.insertBefore(wrapper.firstChild, wrapper);
+    }
+    wrapper.remove();
+}
 /**
  * Rounds a value to the nearest pixel based on the device pixel ratio.
  * @param {number} value The value to round.

package/esm/date-picker/base/base-date-picker-adapter.js

@@ -3,13 +3,13 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, randomChars } from '@tylertech/forge-core';
+import { randomChars } from '@tylertech/forge-core';
 import { CALENDAR_CONSTANTS } from '../../calendar';
 import { BaseAdapter } from '../../core';
 import { ICON_BUTTON_CONSTANTS } from '../../icon-button';
+import { TEXT_FIELD_CONSTANTS } from '../../text-field';
 import { BASE_DATE_PICKER_CONSTANTS } from './base-date-picker-constants';
 import { createToggleElement } from './base-date-picker-utils';
-import { TEXT_FIELD_CONSTANTS } from '../../text-field';
 export class BaseDatePickerAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
@@ -37,9 +37,7 @@ export class BaseDatePickerAdapter extends BaseAdapter {
     }
     attachCalendar(calendarConfig, dropdownConfig) {
         var _a, _b, _c;
-        if (this._calendarDropdown) {
-            (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.destroy();
-        }
+        (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.destroy();
         this._initializeCalendarDropdown();
         if (!this._calendarDropdown) {
             throw new Error('CalendarDropdown was not initialized.');
@@ -132,7 +130,7 @@ export class BaseDatePickerAdapter extends BaseAdapter {
         const textField = this._component.querySelector('forge-text-field');
         const toggleElement = this._component.querySelector(BASE_DATE_PICKER_CONSTANTS.selectors.TOGGLE);
         if (textField) {
-            const existingIconButton = textField.querySelector(`${ICON_BUTTON_CONSTANTS.elementName}[slot=trailing]`);
+            const existingIconButton = textField.querySelector(`${ICON_BUTTON_CONSTANTS.elementName}[slot=end]`);
             if (existingIconButton || toggleElement) {
                 this._toggleElement = (existingIconButton || toggleElement);
                 return;
@@ -151,12 +149,9 @@ export class BaseDatePickerAdapter extends BaseAdapter {
     _getDefaultTargetElement() {
         // This component is often used with the Forge text-field, if so, let's target our popup around
         // one if its internal elements for best alignment
-        const textField = this._component.querySelector('forge-text-field');
-        if (textField && textField.shadowRoot) {
-            const textFieldRoot = getShadowElement(textField, TEXT_FIELD_CONSTANTS.selectors.ROOT);
-            if (textFieldRoot) {
-                return textFieldRoot;
-            }
+        const textField = this._component.querySelector(TEXT_FIELD_CONSTANTS.elementName);
+        if (textField === null || textField === void 0 ? void 0 : textField.popoverTargetElement) {
+            return textField.popoverTargetElement;
         }
         return this._component.querySelector('input') || this._component;
     }

package/esm/date-picker/base/base-date-picker-foundation.js

@@ -132,6 +132,12 @@ export class BaseDatePickerFoundation {
             closeCallback: this._dropdownCloseListener,
             activeChangeCallback: this._activeChangeListener
         };
+        // If the max date is in the past, set the calendar to the min date
+        const currentDate = new Date().getTime();
+        if (this._min && this._max && this._max.getTime() < currentDate) {
+            calendarConfig.year = this._min.getFullYear();
+            calendarConfig.month = this._min.getMonth();
+        }
         this._adapter.attachCalendar(calendarConfig, dropdownConfig);
         this._adapter.addDateSelectListener(this._dateSelectListener);
         this._open = true;

package/esm/date-picker/base/base-date-picker-utils.js

@@ -8,9 +8,8 @@ export function createToggleElement(iconName) {
     iconButtonElement.type = 'button';
     iconButtonElement.tabIndex = -1;
     iconButtonElement.setAttribute('aria-label', 'Toggle calendar');
-    iconButtonElement.slot = 'trailing';
+    iconButtonElement.slot = 'end';
     iconButtonElement.density = 'medium';
-    iconButtonElement.style.marginRight = '4px';
     const iconElement = document.createElement('forge-icon');
     iconElement.name = iconName;
     iconButtonElement.appendChild(iconElement);

package/esm/date-range-picker/date-range-picker-adapter.d.ts

@@ -64,4 +64,5 @@ export declare class DateRangePickerAdapter extends BaseDatePickerAdapter<IDateR
     selectInputText(): void;
     selectToInputText(): void;
     private _applyToInputs;
+    private _createInputSeparator;
 }

package/esm/date-range-picker/date-range-picker-adapter.js

@@ -3,11 +3,12 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { emitEvent, listenOwnProperty, getActiveElement } from '@tylertech/forge-core';
+import { emitEvent, listenOwnProperty, getActiveElement, toggleAttribute } from '@tylertech/forge-core';
 import { CalendarDropdown } from '../calendar/calendar-dropdown';
 import { DateInputMask } from '../core';
 import { BaseDatePickerAdapter } from '../date-picker/base/base-date-picker-adapter';
 import { createToggleElement } from '../date-picker/base/base-date-picker-utils';
+import { FIELD_CONSTANTS } from '../field-next';
 import { DATE_RANGE_PICKER_CONSTANTS } from './date-range-picker-constants';
 export class DateRangePickerAdapter extends BaseDatePickerAdapter {
     constructor(component) {
@@ -20,6 +21,8 @@ export class DateRangePickerAdapter extends BaseDatePickerAdapter {
         if (!this._fromInputElement || !this._fromInputElement) {
             throw new Error(`The ${DATE_RANGE_PICKER_CONSTANTS.elementName} requires two inputs`);
         }
+        const separator = this._createInputSeparator();
+        this._fromInputElement.insertAdjacentElement('afterend', separator);
     }
     _initializeCalendarDropdown() {
         const targetElement = this._getDefaultTargetElement();
@@ -189,4 +192,11 @@ export class DateRangePickerAdapter extends BaseDatePickerAdapter {
     _applyToInputs(action) {
         [this._fromInputElement, this._toInputElement].forEach(action);
     }
+    _createInputSeparator() {
+        const separator = document.createElement('span');
+        toggleAttribute(separator, true, FIELD_CONSTANTS.attributes.MULTI_INPUT_SEPARATOR);
+        separator.setAttribute('aria-hidden', 'true');
+        separator.textContent = '-';
+        return separator;
+    }
 }

package/esm/date-range-picker/date-range-picker-component-delegate.d.ts

@@ -3,8 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions, IBaseComponentDelegateConfig } from '../core/delegates';
-import { FieldDensityType } from '../field/field-constants';
+import { FormFieldComponentDelegate, IBaseComponentDelegateConfig, IFormFieldComponentDelegateOptions } from '../core/delegates';
+import { FieldDensity } from '../field-next';
 import { ITextFieldComponent } from '../text-field';
 import { IDateRangePickerComponent } from './date-range-picker';
 import { IDateRangePickerChangeEventData } from './date-range-picker-constants';
@@ -15,7 +15,7 @@ export interface IDateRangePickerComponentDelegateOptions extends IFormFieldComp
     toPlaceholder?: string;
     label?: string;
     required?: boolean;
-    density?: FieldDensityType;
+    density?: FieldDensity;
 }
 export interface IDateRangePickerComponentDelegateConfig extends IBaseComponentDelegateConfig<IDateRangePickerComponent, IDateRangePickerComponentDelegateOptions> {
 }

package/esm/date-range-picker/date-range-picker-component-delegate.js

@@ -16,10 +16,10 @@ export class DateRangeComponentDelegate extends FormFieldComponentDelegate {
         return dateRangePicker;
     }
     get fromInput() {
-        return this._textField.querySelector(`input[${TEXT_FIELD_CONSTANTS.attributes.MULTI_INPUT}-0]`);
+        return this._textField.querySelector('input:first-of-type');
     }
     get toInput() {
-        return this._textField.querySelector(`input[${TEXT_FIELD_CONSTANTS.attributes.MULTI_INPUT}-1]`);
+        return this._textField.querySelector('input:last-of-type');
     }
     get textField() {
         return this._textField;

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

@@ -26,6 +26,7 @@ export interface IDialogAdapter extends IBaseAdapter {
     addRootClass(name: string): void;
     setFullscreen(value: boolean): void;
     setMoveable(value: boolean): void;
+    tryLayoutRippleChildren(): void;
     setMoveTarget(selector: string): boolean;
     setMoveTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
     removeDragTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
@@ -63,6 +64,7 @@ export declare class DialogAdapter extends BaseAdapter<IDialogComponent> impleme
     addRootClass(name: string): void;
     setFullscreen(value: boolean): void;
     setMoveable(value: boolean): void;
+    tryLayoutRippleChildren(): void;
     setMoveTarget(selector: string): boolean;
     setMoveTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
     removeDragTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;

package/esm/dialog/dialog-adapter.js

@@ -5,7 +5,11 @@
  */
 import { deepQuerySelectorAll, getActiveElement, getShadowElement, removeElement, toggleClass } from '@tylertech/forge-core';
 import { BACKDROP_CONSTANTS } from '../backdrop';
+import { CHECKBOX_CONSTANTS } from '../checkbox/checkbox-constants';
 import { BaseAdapter } from '../core/base/base-adapter';
+import { ICON_BUTTON_CONSTANTS } from '../icon-button/icon-button-constants';
+import { RADIO_CONSTANTS } from '../radio/radio/radio-constants';
+import { SWITCH_CONSTANTS } from '../switch/switch-constants';
 import { DIALOG_CONSTANTS } from './dialog-constants';
 /**
  * Provides facilities for interacting with the internal DOM of `DialogComponent`.
@@ -100,6 +104,16 @@ export class DialogAdapter extends BaseAdapter {
     setMoveable(value) {
         toggleClass(this._containerElement, value, DIALOG_CONSTANTS.classes.MOVEABLE);
     }
+    tryLayoutRippleChildren() {
+        const selectors = [
+            ICON_BUTTON_CONSTANTS.elementName,
+            SWITCH_CONSTANTS.elementName,
+            CHECKBOX_CONSTANTS.elementName,
+            RADIO_CONSTANTS.elementName
+        ];
+        const rippleChildren = deepQuerySelectorAll(this._component, selectors.join(':focus-within,'));
+        rippleChildren.filter(el => typeof el.layout === 'function').forEach(el => el.layout());
+    }
     setMoveTarget(selector) {
         if (!selector) {
             return false;

package/esm/dialog/dialog-foundation.js

@@ -189,6 +189,7 @@ export class DialogFoundation {
         this._adapter.deregisterTransitionEndHandler(this._transitionEndHandler);
         this._adapter.setAnimating(false);
         this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.READY);
+        this._adapter.tryLayoutRippleChildren();
         if (this._moveable) {
             this._initMoveTarget();
         }

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

@@ -5,7 +5,7 @@
  */
 export declare const DIVIDER_CONSTANTS: {
     elementName: "forge-divider";
-    classes: {
-        ROOT: string;
+    attributes: {
+        VERTICAL: string;
     };
 };

package/esm/divider/divider-constants.js

@@ -5,10 +5,10 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}divider`;
-const classes = {
-    ROOT: '.forge-divider'
+const attributes = {
+    VERTICAL: 'vertical'
 };
 export const DIVIDER_CONSTANTS = {
     elementName,
-    classes
+    attributes
 };

package/esm/divider/divider.d.ts

@@ -3,19 +3,40 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface IDividerComponent extends IBaseComponent {
+import { BaseComponent } from '../core/base/base-component';
+import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria';
+import { IWithElementInternals } from '../core/mixins/internals/with-element-internals';
+export interface IDividerComponent extends IWithDefaultAria, IWithElementInternals {
+    vertical: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-divider': IDividerComponent;
     }
 }
+declare const BaseClass: import("../constants").AbstractConstructor<import("../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../constants").AbstractConstructor<import("../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
 /**
- * The custom element class behind the `<forge-divider>` element.
- *
  * @tag forge-divider
+ *
+ * @summary Divider is used to seperate elements.
+ *
+ * @property {boolean} vertical - Controls if the divider is displayed vertically or horizontally.
+ *
+ * @attribute {boolean} vertical - Controls if the divider is displayed vertically or horizontally.
+ *
+ * @cssproperty --forge-divider-color - The color of the divider.
+ * @cssproperty --forge-divider-width - The width of the divider.
+ * @cssproperty --forge-divider-border-style - The border-style (dashed, solid) of the divider.
+ * @cssproperty --forge-divider-margin - The margin of divider.
+ *
+ * @csspart root - The root container element.
  */
-export declare class DividerComponent extends BaseComponent implements IDividerComponent {
+export declare class DividerComponent extends BaseClass implements IDividerComponent {
+    static get observedAttributes(): string[];
     constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    get vertical(): boolean;
+    set vertical(value: boolean);
 }
+export {};