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

package/esm/stack/stack-foundation.js

@@ -12,6 +12,7 @@ export class StackFoundation {
         this._stretch = false;
         this._gap = STACK_CONSTANTS.strings.DEFAULT_GAP;
         this._alignment = 'start';
+        this._justify = 'start';
     }
     /** Controls the direction of the stack. */
     get inline() {
@@ -46,7 +47,7 @@ export class StackFoundation {
             this._adapter.toggleHostAttribute(STACK_CONSTANTS.attributes.STRETCH, this._stretch);
         }
     }
-    /** Controls the gap amount between the children in pixels */
+    /** Controls the gap amount between the children */
     get gap() {
         return this._gap;
     }
@@ -67,4 +68,14 @@ export class StackFoundation {
             this._adapter.setHostAttribute(STACK_CONSTANTS.attributes.ALIGNMENT, this._alignment);
         }
     }
+    /** Controls the justify-content of children */
+    get justify() {
+        return this._justify;
+    }
+    set justify(value) {
+        if (this._justify !== value) {
+            this._justify = value;
+            this._adapter.setHostAttribute(STACK_CONSTANTS.attributes.JUSTIFY, this._justify);
+        }
+    }
 }

package/esm/stack/stack.d.ts

@@ -12,6 +12,7 @@ export interface IStackComponent extends ICustomElement {
     stretch: boolean;
     gap: string;
     alignment: StackAlignMode | StackAlignment;
+    justify: StackAlignment;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -19,9 +20,40 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-stack>` component.
- *
  * @tag forge-stack
+ *
+ * @summary The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis.
+ *
+ * @description
+ * The stack utility component uses flexbox under the hood, but it is not meant to be an abstraction or replacement for CSS flexbox.
+ * Stack is simply a utility component for developer convenience. There are many UI patterns and situations where elements need to be
+ * arranged horizontally or vertically with a specific gap inbetween. Instead of having to use an inline style or create a new CSS class for
+ * these scenarios, you can reach for the stack. This keeps developers within a template and prevents having to jump around from HTML
+ * to CSS. It also helps minimize the number of CSS classes being used for simple situations where basic flexbox is needed.
+ *
+ * @property {boolean} inline - Sets the direction of child items to be horizontal.
+ * @property {boolean} wrap - Wrap is used to wrap child elements to a new row when there's not enough space. This only works when inline is set to true.
+ * @property {boolean} stretch - Stretch allows each child element to take up as much width as possible until the parent container is filled. You can override this on each individual child element by changing its --forge-stack-stretch CSS custom property.
+ * @property {string} gap - Controls the amount of space between child elements within a stack.
+ * @property {StackAlignment} alignment - Controls the align-items property of the stack.
+ * @property {StackAlignment} justify - Controls the justify-content property of the stack.
+ *
+ * @attribute {boolean} inline - Sets the direction of child items to be horizontal.
+ * @attribute {boolean} wrap - Wrap is used to wrap child elements to a new row when there's not enough space. This only works when inline is set to true.
+ * @attribute {boolean} stretch - Stretch allows each child element to take up as much width as possible until the parent container is filled. You can override this on each individual child element by changing its --forge-stack-stretch CSS custom property.
+ * @attribute {string} gap - Controls the amount of space between child elements within a stack.
+ * @attribute {StackAlignment} alignment - Controls the align-items property of the stack. See [justify-content on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
+ * @attribute {StackAlignment} justify - Controls the justify-content property of the stack. See [align-items on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
+ *
+ * @cssproperty --forge-stack-alignment - Controls the align-items CSS property of the root stack element.
+ * @cssproperty --forge-stack-justify - Controls the justify-content CSS property of the root stack element.
+ * @cssproperty --forge-stack-gap - Controls the gap between each child element within a stack.
+ * @cssproperty --forge-stack-height - Controls the height of the root stack element.
+ * @cssproperty --forge-stack-stretch - Controls the flex shorthand property of a child element within the stack.
+ *
+ * @csspart root - The root container element.
+ *
+ * @slot - The default/unnamed slot for stack content.
  */
 export declare class StackComponent extends BaseComponent implements IStackComponent {
     static get observedAttributes(): string[];
@@ -36,6 +68,8 @@ export declare class StackComponent extends BaseComponent implements IStackCompo
     stretch: boolean;
     /** Controls the gap between the children within the stack */
     gap: string;
-    /** Controls if stack items are at the end of the row or column */
+    /** Controls the align-items property of a row or column */
     alignment: StackAlignMode | StackAlignment;
+    /** Controls the justify-content property of a row or column */
+    justify: StackAlignment;
 }

package/esm/stack/stack.js

@@ -10,11 +10,42 @@ import { StackFoundation } from './stack-foundation';
 import { STACK_CONSTANTS } from './stack-constants';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-stack\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-stack{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;width:100%;gap:16px;gap:var(--forge-stack-gap,16px);height:100%;height:var(--forge-stack-height,100%)}.forge-stack ::slotted(*){-webkit-box-flex:var(--forge-stack-stretch,initial);flex:var(--forge-stack-stretch,initial)}:host{display:block}:host([inline]) .forge-stack{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;--forge-stack-height:auto}:host([inline][wrap]) .forge-stack{flex-wrap:wrap}:host([stretch]:not([inline])){height:100%}:host([stretch]){--forge-stack-stretch:1}:host([alignment=start]) .forge-stack{-webkit-box-pack:start;justify-content:start}:host([alignment=center]) .forge-stack{-webkit-box-pack:center;justify-content:center}:host([alignment=end]) .forge-stack{-webkit-box-pack:end;justify-content:end}';
+const styles = '.forge-stack{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:var(--_stack-alignment);align-items:var(--_stack-alignment);-webkit-box-pack:var(--_stack-justify);justify-content:var(--_stack-justify);gap:var(--_stack-gap);height:var(--_stack-height);width:100%;--_stack-gap:var(--forge-stack-gap, var(--forge-spacing-medium, 16px));--_stack-height:var(--forge-stack-height);--_stack-stretch:var(--forge-stack-stretch, initial);--_stack-alignment:var(--forge-stack-alignment, normal);--_stack-justify:var(--forge-stack-justify, normal);--_stack-wrap:var(--forge-stack-wrap, wrap)}.forge-stack ::slotted(*){-webkit-box-flex:var(--_stack-stretch);flex:var(--_stack-stretch)}:host([inline]) .forge-stack{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}:host([inline][wrap]) .forge-stack{flex-wrap:wrap}:host(:not([inline])) .forge-stack{--_stack-height:var(--forge-stack-height, 100%)}:host([stretch]) ::slotted(*){--_stack-stretch:var(--forge-stack-stretch, 1)}:host([alignment=start]) .forge-stack{--_stack-alignment:var(--forge-stack-alignment, start)}:host([alignment=center]) .forge-stack{--_stack-alignment:var(--forge-stack-alignment, center)}:host([alignment=end]) .forge-stack{--_stack-alignment:var(--forge-stack-alignment, end)}:host([justify=start]) .forge-stack{--_stack-justify:var(--forge-stack-justify, start)}:host([justify=center]) .forge-stack{--_stack-justify:var(--forge-stack-justify, center)}:host([justify=end]) .forge-stack{--_stack-justify:var(--forge-stack-justify, end)}';
 /**
- * The custom element class behind the `<forge-stack>` component.
- *
  * @tag forge-stack
+ *
+ * @summary The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis.
+ *
+ * @description
+ * The stack utility component uses flexbox under the hood, but it is not meant to be an abstraction or replacement for CSS flexbox.
+ * Stack is simply a utility component for developer convenience. There are many UI patterns and situations where elements need to be
+ * arranged horizontally or vertically with a specific gap inbetween. Instead of having to use an inline style or create a new CSS class for
+ * these scenarios, you can reach for the stack. This keeps developers within a template and prevents having to jump around from HTML
+ * to CSS. It also helps minimize the number of CSS classes being used for simple situations where basic flexbox is needed.
+ *
+ * @property {boolean} inline - Sets the direction of child items to be horizontal.
+ * @property {boolean} wrap - Wrap is used to wrap child elements to a new row when there's not enough space. This only works when inline is set to true.
+ * @property {boolean} stretch - Stretch allows each child element to take up as much width as possible until the parent container is filled. You can override this on each individual child element by changing its --forge-stack-stretch CSS custom property.
+ * @property {string} gap - Controls the amount of space between child elements within a stack.
+ * @property {StackAlignment} alignment - Controls the align-items property of the stack.
+ * @property {StackAlignment} justify - Controls the justify-content property of the stack.
+ *
+ * @attribute {boolean} inline - Sets the direction of child items to be horizontal.
+ * @attribute {boolean} wrap - Wrap is used to wrap child elements to a new row when there's not enough space. This only works when inline is set to true.
+ * @attribute {boolean} stretch - Stretch allows each child element to take up as much width as possible until the parent container is filled. You can override this on each individual child element by changing its --forge-stack-stretch CSS custom property.
+ * @attribute {string} gap - Controls the amount of space between child elements within a stack.
+ * @attribute {StackAlignment} alignment - Controls the align-items property of the stack. See [justify-content on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
+ * @attribute {StackAlignment} justify - Controls the justify-content property of the stack. See [align-items on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
+ *
+ * @cssproperty --forge-stack-alignment - Controls the align-items CSS property of the root stack element.
+ * @cssproperty --forge-stack-justify - Controls the justify-content CSS property of the root stack element.
+ * @cssproperty --forge-stack-gap - Controls the gap between each child element within a stack.
+ * @cssproperty --forge-stack-height - Controls the height of the root stack element.
+ * @cssproperty --forge-stack-stretch - Controls the flex shorthand property of a child element within the stack.
+ *
+ * @csspart root - The root container element.
+ *
+ * @slot - The default/unnamed slot for stack content.
  */
 let StackComponent = class StackComponent extends BaseComponent {
     static get observedAttributes() {
@@ -23,7 +54,8 @@ let StackComponent = class StackComponent extends BaseComponent {
             STACK_CONSTANTS.attributes.WRAP,
             STACK_CONSTANTS.attributes.STRETCH,
             STACK_CONSTANTS.attributes.GAP,
-            STACK_CONSTANTS.attributes.ALIGNMENT
+            STACK_CONSTANTS.attributes.ALIGNMENT,
+            STACK_CONSTANTS.attributes.JUSTIFY
         ];
     }
     constructor() {
@@ -48,6 +80,9 @@ let StackComponent = class StackComponent extends BaseComponent {
             case STACK_CONSTANTS.attributes.ALIGNMENT:
                 this.alignment = newValue;
                 break;
+            case STACK_CONSTANTS.attributes.JUSTIFY:
+                this.justify = newValue;
+                break;
         }
     }
 };
@@ -66,6 +101,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], StackComponent.prototype, "alignment", void 0);
+__decorate([
+    FoundationProperty()
+], StackComponent.prototype, "justify", void 0);
 StackComponent = __decorate([
     CustomElement({
         name: STACK_CONSTANTS.elementName

package/esm/switch/switch.js

@@ -13,7 +13,7 @@ import { SWITCH_CONSTANTS } from './switch-constants';
 import { SwitchFoundation } from './switch-foundation';
 import { internals } from '../constants';
 const template = '<template><div class=\"forge-switch\" part=\"switch\"><div id=\"container\" class=\"container\"><slot name=\"input\"><input id=\"input\" class=\"input\" type=\"checkbox\" role=\"switch\"></slot><div class=\"track\" part=\"track\"></div><div class=\"handle\" part=\"handle\"><div id=\"icon-off\" class=\"icon icon__off\" part=\"icon-off\"><slot name=\"icon-off\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 13H4v-2h16v2z\"/></svg></slot></div><div id=\"icon-on\" class=\"icon icon__on\" part=\"icon-on\"><slot name=\"icon-on\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"/></svg></slot></div><forge-state-layer target=\"container\" exportparts=\"surface:state-layer\"></forge-state-layer></div><forge-focus-indicator target=\"container\" part=\"focus-indicator\"></forge-focus-indicator></div><label id=\"label\" for=\"input\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
-const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-switch{--_switch-handle-size:var(--forge-switch-handle-size, 20px);--_switch-handle-scale:var(--forge-switch-handle-scale, 1);--_switch-handle-elevation:var(--forge-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_switch-track-border-width:var(--forge-switch-track-border-width, 0);--_switch-track-border-color:var(--forge-switch-track-border-color, transparent);--_switch-icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_switch-icon-size:var(--forge-switch-icon-size, 16px);--_switch-icon-scale:var(--forge-switch-icon-scale, 1);--_switch-state-layer-size:var(--forge-switch-state-layer-size, 40px);--_switch-state-layer-dense-size:var(--forge-switch-state-layer-dense-size, 28px);--_switch-handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_switch-handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_switch-handle-width:var(--forge-switch-handle-width, var(--_switch-handle-size));--_switch-handle-height:var(--forge-switch-handle-height, var(--_switch-handle-size));--_switch-handle-on-scale:var(--forge-switch-handle-on-scale, var(--_switch-handle-scale));--_switch-handle-off-scale:var(--forge-switch-handle-off-scale, var(--_switch-handle-scale));--_switch-handle-shape:var(--forge-switch-handle-shape, var(--forge-shape-round, 50%));--_switch-handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_switch-handle-elevation));--_switch-handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_switch-handle-elevation));--_switch-track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_switch-track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_switch-track-width:var(--forge-switch-track-width, 36px);--_switch-track-height:var(--forge-switch-track-height, 14px);--_switch-track-shape:var(--forge-switch-track-shape, var(--forge-shape-full, 9999px));--_switch-track-on-border-width:var(--forge-switch-track-on-border-width, var(--_switch-track-border-width));--_switch-track-off-border-width:var(--forge-switch-track-off-border-width, var(--_switch-track-border-width));--_switch-track-on-border-color:var(--forge-switch-track-on-border-color, var(--_switch-track-border-color));--_switch-track-off-border-color:var(--forge-switch-track-off-border-color, var(--_switch-track-border-color));--_switch-icon-on-color:var(--forge-switch-icon-on-color, var(--_switch-icon-color));--_switch-icon-off-color:var(--forge-switch-icon-off-color, var(--_switch-icon-color));--_switch-icon-on-size:var(--forge-switch-icon-on-size, var(--_switch-icon-size));--_switch-icon-off-size:var(--forge-switch-icon-off-size, var(--_switch-icon-size));--_switch-icon-on-scale:var(--forge-switch-icon-on-scale, var(--_switch-icon-scale));--_switch-icon-off-scale:var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));--_switch-gap:var(--forge-switch-gap, 0);--_switch-justify:var(--forge-switch-justify, space-between);--_switch-direction:var(--forge-switch-direction, initial);--_switch-state-layer-width:var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));--_switch-state-layer-height:var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));--_switch-state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_switch-handle-on-color));--_switch-state-layer-off-color:var(--forge-switch-state-layer-off-color, var(--_switch-color));--_switch-state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));--_switch-state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));--_switch-disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_switch-handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));--_switch-handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));--_switch-handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_switch-handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_switch-handle-active-scale));--_switch-handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_switch-handle-active-scale));--_switch-handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_switch-handle-elevation));--_switch-handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-handle-active-off-elevation:var(--forge-switch-handle-active-off-elevation, var(--_switch-handle-active-elevation));--_switch-track-active-on-color:var(--forge-switch-track-active-on-color, var(--_switch-track-on-color));--_switch-track-active-off-color:var(--forge-switch-track-active-off-color, var(--_switch-track-off-color));--_switch-track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_switch-track-on-border-width));--_switch-track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_switch-track-off-border-width));--_switch-track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_switch-track-on-border-color));--_switch-track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_switch-track-off-border-color));--_switch-icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_switch-icon-on-color));--_switch-icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_switch-icon-off-color));--_switch-icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_switch-icon-on-scale));--_switch-icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_switch-icon-off-scale));--_switch-animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_switch-animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_switch-active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)))}.forge-switch{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_switch-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_switch-justify);justify-content:var(--_switch-justify);gap:var(--_switch-gap);display:-webkit-box;display:flex;--_switch-current-state-layer-width:var(--_switch-state-layer-width);--_switch-current-state-layer-height:var(--_switch-state-layer-height)}.forge-switch .container{position:relative;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;block-size:max(var(--_switch-handle-height),var(--_switch-track-height),var(--_switch-current-state-layer-height));cursor:pointer}.forge-switch .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{-webkit-transition-property:background-color,border-color,border-width;transition-property:background-color,border-color,border-width;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);-webkit-box-sizing:border-box;box-sizing:border-box;margin-inline:calc(max(var(--_switch-handle-width),var(--_switch-current-state-layer-width))/ 2 - calc(var(--_switch-track-height)/ 2));border-width:var(--_switch-track-off-border-width);border-color:var(--_switch-track-off-border-color);border-style:solid;border-radius:var(--_switch-track-shape);inline-size:var(--_switch-track-width);block-size:var(--_switch-track-height);background-color:var(--_switch-track-off-color)}.forge-switch .handle{position:absolute;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-transition-property:translate;transition-property:translate;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-current-state-layer-width);block-size:var(--_switch-current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_switch-handle-off-scale);-webkit-transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);-webkit-box-shadow:var(--_switch-handle-off-elevation);box-shadow:var(--_switch-handle-off-elevation);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-handle-width);block-size:var(--_switch-handle-height);background-color:var(--_switch-handle-off-color)}.forge-switch .icon{position:absolute;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:opacity,scale;transition-property:opacity,scale;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);inline-size:var(--_switch-icon-off-size);block-size:var(--_switch-icon-off-size);color:var(--_switch-icon-off-color);fill:var(--_switch-icon-off-color);font-size:var(--_switch-icon-off-size);--forge-icon-font-size:var(--_switch-icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_switch-icon-on-size);inline-size:var(--_switch-icon-on-size);block-size:var(--_switch-icon-on-size);color:var(--_switch-icon-on-color);fill:var(--_switch-icon-on-color);font-size:var(--_switch-icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_switch-icon-off-scale)}.forge-switch .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([on]) .track{border-width:var(--_switch-track-on-border-width);border-color:var(--_switch-track-on-border-color);background-color:var(--_switch-track-on-color)}:host([on]) .handle{translate:calc(var(--_switch-track-width) - calc(var(--_switch-track-height)/ 2) * 2)}:host([on]) .handle::before{scale:var(--_switch-handle-on-scale);-webkit-box-shadow:var(--_switch-handle-on-elevation);box-shadow:var(--_switch-handle-on-elevation);background-color:var(--_switch-handle-on-color)}:host([on]) .handle .icon__on{opacity:1;scale:var(--_switch-icon-on-scale)}:host([on]) .handle .icon__off{opacity:0;scale:0.4}:host([on]) forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-on-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .track{border-width:var(--_switch-track-active-off-border-width);border-color:var(--_switch-track-active-off-border-color);background-color:var(--_switch-track-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-off-scale);-webkit-box-shadow:var(--_switch-handle-active-off-elevation);box-shadow:var(--_switch-handle-active-off-elevation);background-color:var(--_switch-handle-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-off-scale);color:var(--_switch-icon-active-off-color);fill:var(--_switch-icon-active-off-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .track{border-width:var(--_switch-track-active-on-border-width);border-color:var(--_switch-track-active-on-border-color);background-color:var(--_switch-track-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-on-scale);-webkit-box-shadow:var(--_switch-handle-active-on-elevation);box-shadow:var(--_switch-handle-active-on-elevation);background-color:var(--_switch-handle-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-on-scale);color:var(--_switch-icon-active-on-color);fill:var(--_switch-icon-active-on-color)}:host([dense]) .forge-switch{--_switch-current-state-layer-width:var(--_switch-state-layer-dense-width);--_switch-current-state-layer-height:var(--_switch-state-layer-dense-height)}:host([disabled]) .forge-switch{opacity:var(--_switch-disabled-opacity)}:host([disabled]) .forge-switch .container{cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{-webkit-box-shadow:none;box-shadow:none}:host([readonly]) .forge-switch .container{cursor:not-allowed}@media (prefers-reduced-motion){.switch{--_switch-animation-duration:var(--forge-switch-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_switch-track-shape);--forge-focus-indicator-outward-offset:0px}';
+const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-switch{--_switch-handle-size:var(--forge-switch-handle-size, 20px);--_switch-handle-scale:var(--forge-switch-handle-scale, 1);--_switch-handle-elevation:var(--forge-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_switch-track-border-width:var(--forge-switch-track-border-width, 0);--_switch-track-border-color:var(--forge-switch-track-border-color, transparent);--_switch-icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_switch-icon-size:var(--forge-switch-icon-size, 16px);--_switch-icon-scale:var(--forge-switch-icon-scale, 1);--_switch-state-layer-size:var(--forge-switch-state-layer-size, 40px);--_switch-state-layer-dense-size:var(--forge-switch-state-layer-dense-size, 28px);--_switch-handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_switch-handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_switch-handle-width:var(--forge-switch-handle-width, var(--_switch-handle-size));--_switch-handle-height:var(--forge-switch-handle-height, var(--_switch-handle-size));--_switch-handle-on-scale:var(--forge-switch-handle-on-scale, var(--_switch-handle-scale));--_switch-handle-off-scale:var(--forge-switch-handle-off-scale, var(--_switch-handle-scale));--_switch-handle-shape:var(--forge-switch-handle-shape, var(--forge-shape-round, 50%));--_switch-handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_switch-handle-elevation));--_switch-handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_switch-handle-elevation));--_switch-track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_switch-track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_switch-track-width:var(--forge-switch-track-width, 36px);--_switch-track-height:var(--forge-switch-track-height, 14px);--_switch-track-shape:var(--forge-switch-track-shape, var(--forge-shape-full, 9999px));--_switch-track-on-border-width:var(--forge-switch-track-on-border-width, var(--_switch-track-border-width));--_switch-track-off-border-width:var(--forge-switch-track-off-border-width, var(--_switch-track-border-width));--_switch-track-on-border-color:var(--forge-switch-track-on-border-color, var(--_switch-track-border-color));--_switch-track-off-border-color:var(--forge-switch-track-off-border-color, var(--_switch-track-border-color));--_switch-icon-on-color:var(--forge-switch-icon-on-color, var(--_switch-icon-color));--_switch-icon-off-color:var(--forge-switch-icon-off-color, var(--_switch-icon-color));--_switch-icon-on-size:var(--forge-switch-icon-on-size, var(--_switch-icon-size));--_switch-icon-off-size:var(--forge-switch-icon-off-size, var(--_switch-icon-size));--_switch-icon-on-scale:var(--forge-switch-icon-on-scale, var(--_switch-icon-scale));--_switch-icon-off-scale:var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));--_switch-gap:var(--forge-switch-gap, 0);--_switch-justify:var(--forge-switch-justify, space-between);--_switch-direction:var(--forge-switch-direction, initial);--_switch-state-layer-width:var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));--_switch-state-layer-height:var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));--_switch-state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_switch-handle-on-color));--_switch-state-layer-off-color:var(--forge-switch-state-layer-off-color, var(--_switch-color));--_switch-state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));--_switch-state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));--_switch-disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_switch-handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));--_switch-handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));--_switch-handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_switch-handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_switch-handle-active-scale));--_switch-handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_switch-handle-active-scale));--_switch-handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_switch-handle-elevation));--_switch-handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-handle-active-off-elevation:var(--forge-switch-handle-active-off-elevation, var(--_switch-handle-active-elevation));--_switch-track-active-on-color:var(--forge-switch-track-active-on-color, var(--_switch-track-on-color));--_switch-track-active-off-color:var(--forge-switch-track-active-off-color, var(--_switch-track-off-color));--_switch-track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_switch-track-on-border-width));--_switch-track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_switch-track-off-border-width));--_switch-track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_switch-track-on-border-color));--_switch-track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_switch-track-off-border-color));--_switch-icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_switch-icon-on-color));--_switch-icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_switch-icon-off-color));--_switch-icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_switch-icon-on-scale));--_switch-icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_switch-icon-off-scale));--_switch-animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_switch-animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_switch-active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)))}.forge-switch{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_switch-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_switch-justify);justify-content:var(--_switch-justify);gap:var(--_switch-gap);display:-webkit-box;display:flex;--_switch-current-state-layer-width:var(--_switch-state-layer-width);--_switch-current-state-layer-height:var(--_switch-state-layer-height)}.forge-switch .container{position:relative;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;block-size:max(var(--_switch-handle-height),var(--_switch-track-height),var(--_switch-current-state-layer-height));cursor:pointer}.forge-switch .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{-webkit-transition-property:background-color,border-color,border-width;transition-property:background-color,border-color,border-width;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);-webkit-box-sizing:border-box;box-sizing:border-box;margin-inline:calc(max(var(--_switch-handle-width),var(--_switch-current-state-layer-width))/ 2 - calc(var(--_switch-track-height)/ 2));border-width:var(--_switch-track-off-border-width);border-color:var(--_switch-track-off-border-color);border-style:solid;border-radius:var(--_switch-track-shape);inline-size:var(--_switch-track-width);block-size:var(--_switch-track-height);background-color:var(--_switch-track-off-color)}.forge-switch .handle{position:absolute;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-transition-property:translate;transition-property:translate;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-current-state-layer-width);block-size:var(--_switch-current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_switch-handle-off-scale);-webkit-transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);-webkit-box-shadow:var(--_switch-handle-off-elevation);box-shadow:var(--_switch-handle-off-elevation);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-handle-width);block-size:var(--_switch-handle-height);background-color:var(--_switch-handle-off-color)}.forge-switch .icon{position:absolute;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:opacity,scale;transition-property:opacity,scale;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);inline-size:var(--_switch-icon-off-size);block-size:var(--_switch-icon-off-size);color:var(--_switch-icon-off-color);fill:var(--_switch-icon-off-color);font-size:var(--_switch-icon-off-size);--forge-icon-font-size:var(--_switch-icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_switch-icon-on-size);inline-size:var(--_switch-icon-on-size);block-size:var(--_switch-icon-on-size);color:var(--_switch-icon-on-color);fill:var(--_switch-icon-on-color);font-size:var(--_switch-icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_switch-icon-off-scale)}.forge-switch .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([on]) .track{border-width:var(--_switch-track-on-border-width);border-color:var(--_switch-track-on-border-color);background-color:var(--_switch-track-on-color)}:host([on]) .handle{translate:calc(var(--_switch-track-width) - calc(var(--_switch-track-height)/ 2) * 2)}:host([on]) .handle::before{scale:var(--_switch-handle-on-scale);-webkit-box-shadow:var(--_switch-handle-on-elevation);box-shadow:var(--_switch-handle-on-elevation);background-color:var(--_switch-handle-on-color)}:host([on]) .handle .icon__on{opacity:1;scale:var(--_switch-icon-on-scale)}:host([on]) .handle .icon__off{opacity:0;scale:0.4}:host([on]) forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-on-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .track{border-width:var(--_switch-track-active-off-border-width);border-color:var(--_switch-track-active-off-border-color);background-color:var(--_switch-track-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-off-scale);-webkit-box-shadow:var(--_switch-handle-active-off-elevation);box-shadow:var(--_switch-handle-active-off-elevation);background-color:var(--_switch-handle-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-off-scale);color:var(--_switch-icon-active-off-color);fill:var(--_switch-icon-active-off-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .track{border-width:var(--_switch-track-active-on-border-width);border-color:var(--_switch-track-active-on-border-color);background-color:var(--_switch-track-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-on-scale);-webkit-box-shadow:var(--_switch-handle-active-on-elevation);box-shadow:var(--_switch-handle-active-on-elevation);background-color:var(--_switch-handle-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-on-scale);color:var(--_switch-icon-active-on-color);fill:var(--_switch-icon-active-on-color)}:host([dense]) .forge-switch{--_switch-current-state-layer-width:var(--_switch-state-layer-dense-width);--_switch-current-state-layer-height:var(--_switch-state-layer-dense-height)}:host([disabled]) .forge-switch{opacity:var(--_switch-disabled-opacity)}:host([disabled]) .forge-switch .container{cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{-webkit-box-shadow:none;box-shadow:none}:host([readonly]) .forge-switch .container{cursor:not-allowed}@media (prefers-reduced-motion){.switch{--_switch-animation-duration:var(--forge-switch-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_switch-track-shape);--forge-focus-indicator-outward-offset:0px}';
 /**
  * @tag forge-switch
  *

package/esm/text-field/index.d.ts

@@ -3,9 +3,9 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+export * from './text-field';
 export * from './text-field-adapter';
-export * from './text-field-component-delegate';
 export * from './text-field-constants';
 export * from './text-field-foundation';
-export * from './text-field';
+export * from './text-field-component-delegate';
 export declare function defineTextFieldComponent(): void;

package/esm/text-field/index.js

@@ -5,11 +5,11 @@
  */
 import { defineCustomElement } from '@tylertech/forge-core';
 import { TextFieldComponent } from './text-field';
+export * from './text-field';
 export * from './text-field-adapter';
-export * from './text-field-component-delegate';
 export * from './text-field-constants';
 export * from './text-field-foundation';
-export * from './text-field';
+export * from './text-field-component-delegate';
 export function defineTextFieldComponent() {
     defineCustomElement(TextFieldComponent);
 }

package/esm/text-field/text-field-adapter.d.ts

@@ -3,32 +3,49 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { IFieldComponent } from '../field-next';
+import { BaseFieldAdapter, IBaseFieldAdapter } from '../field-next/base/base-field-adapter';
 import { ITextFieldComponent } from './text-field';
-import { FieldAdapter, IFieldAdapter } from '../field/field-adapter';
-export interface ITextFieldAdapter extends IFieldAdapter {
-    detectTextarea(): void;
+import { TextFieldInputAttributeObserver, TextFieldValueChangeListener } from './text-field-constants';
+export interface ITextFieldAdapter extends IBaseFieldAdapter {
+    readonly popoverTargetElement: HTMLElement;
+    addRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
+    removeRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
+    disableInput(disabled: boolean): void;
+    handleDefaultSlotChange(slot: HTMLSlotElement, listener: TextFieldInputAttributeObserver): void;
+    tryAddValueChangeListener(context: unknown, listener: TextFieldValueChangeListener): void;
+    removeValueChangeListener(): void;
+    tryFloatLabel(force?: boolean): void;
+    tryConnectSlottedLabel(slot: HTMLSlotElement): void;
+    connectClearButton(listener: EventListener): void;
+    disconnectClearButton(listener: EventListener): void;
+    toggleClearButtonVisibility(visible: boolean): void;
+    clearInput(): void;
 }
-export declare class TextFieldAdapter extends FieldAdapter implements ITextFieldAdapter {
-    protected _inputElements: Array<HTMLInputElement | HTMLTextAreaElement>;
-    protected _inputMutationObserverInstances: MutationObserver[];
+export declare class TextFieldAdapter extends BaseFieldAdapter implements ITextFieldAdapter {
+    protected readonly _fieldElement: IFieldComponent;
+    private readonly _clearButtonSlotElement;
+    private _popoverTargetElement;
+    private _inputElements;
+    private _inputMutationObserver?;
+    private _destroyValueChangerListeners;
+    get hasValue(): boolean;
+    get hasPlaceholder(): boolean;
+    get popoverTargetElement(): HTMLElement;
     constructor(component: ITextFieldComponent);
-    initialize(): void;
-    destroy(): void;
-    detectTextarea(): void;
-    ensureLabelOrder(): void;
-    addInputListener(type: string, listener: (evt: Event) => void): void;
-    removeInputListener(type: string, listener: (evt: Event) => void): void;
-    setValueChangedListener(context: any, listener: (value: any) => void): void;
-    inputHasValue(): boolean;
-    hasPlaceholder(): boolean;
-    inputHasFocus(target?: EventTarget | null): boolean;
-    setInputClass(className: string): void;
-    removeInputClass(className: string): void;
-    setInputAttributeObserver(listener: (name: string, value: string) => void): void;
-    isDisabled(): boolean;
-    isReadonly(): boolean;
-    protected _inputsSome(action: (input: HTMLInputElement) => boolean): boolean;
-    protected _applyToInputs(action: (input: HTMLInputElement, index: number) => void): void;
-    protected _handleMultiInputs(): void;
-    private _createSeperatorElement;
+    addRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
+    removeRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
+    disableInput(disabled: boolean): void;
+    inputIsDisabled(): boolean;
+    click(): void;
+    applyLabel(value: string | null): void;
+    handleDefaultSlotChange(slot: HTMLSlotElement, listener: TextFieldInputAttributeObserver): void;
+    tryAddValueChangeListener(context: unknown, listener: TextFieldValueChangeListener): void;
+    removeValueChangeListener(): void;
+    tryFloatLabel(force?: boolean): void;
+    tryConnectSlottedLabel(slot: HTMLSlotElement): void;
+    connectClearButton(listener: EventListener): void;
+    disconnectClearButton(listener: EventListener): void;
+    toggleClearButtonVisibility(visible: boolean): void;
+    clearInput(): void;
 }

package/esm/text-field/text-field-adapter.js

@@ -3,109 +3,150 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { addClass, listenOwnProperty, getActiveElement, createElementAttributeObserver } from '@tylertech/forge-core';
-import { FieldAdapter } from '../field/field-adapter';
+import { getShadowElement, listenOwnProperty, randomChars, toggleAttribute } from '@tylertech/forge-core';
+import { FIELD_CONSTANTS } from '../field-next';
+import { BaseFieldAdapter } from '../field-next/base/base-field-adapter';
 import { TEXT_FIELD_CONSTANTS } from './text-field-constants';
-import { FIELD_CONSTANTS } from '../field/field-constants';
-export class TextFieldAdapter extends FieldAdapter {
-    constructor(component) {
-        super(component);
-        this._inputElements = [];
-        this._inputMutationObserverInstances = [];
+export class TextFieldAdapter extends BaseFieldAdapter {
+    get hasValue() {
+        return this._inputElements.some(el => !!el.value);
     }
-    initialize() {
-        super.initialize(TEXT_FIELD_CONSTANTS.selectors.ROOT);
-        this._inputElements = Array.from(this._component.querySelectorAll('input:not([type=checkbox]):not([type=radio]), textarea'));
-        if (this._inputElements.length > 1) {
-            this._handleMultiInputs();
-        }
+    get hasPlaceholder() {
+        return this._inputElements.some(el => !!el.placeholder);
     }
-    destroy() {
-        super.destroy();
-        if (this._inputMutationObserverInstances) {
-            this._inputMutationObserverInstances.forEach(mo => mo.disconnect());
+    get popoverTargetElement() {
+        if (!this._popoverTargetElement) {
+            this._popoverTargetElement = getShadowElement(this._fieldElement, FIELD_CONSTANTS.selectors.POPOVER_TARGET);
         }
+        return this._popoverTargetElement;
     }
-    detectTextarea() {
-        this._applyToInputs(input => {
-            if (input instanceof HTMLTextAreaElement) {
-                this._rootElement.classList.add(TEXT_FIELD_CONSTANTS.classes.TEXTAREA);
-            }
-            else {
-                this._rootElement.classList.remove(TEXT_FIELD_CONSTANTS.classes.TEXTAREA);
-            }
-        });
-    }
-    ensureLabelOrder() {
-        if (this._labelElement) {
-            const children = Array.from(this._component.children);
-            if (children.length > 1 && children.indexOf(this._labelElement) < children.indexOf(this._inputElements[0])) {
-                this._component.appendChild(this._labelElement);
-            }
-        }
-    }
-    addInputListener(type, listener) {
-        this._applyToInputs(input => input.addEventListener(type, listener));
+    constructor(component) {
+        super(component);
+        this._inputElements = [];
+        this._destroyValueChangerListeners = [];
+        this._fieldElement = getShadowElement(component, TEXT_FIELD_CONSTANTS.selectors.FIELD);
+        this._clearButtonSlotElement = getShadowElement(component, TEXT_FIELD_CONSTANTS.selectors.CLEAR_BUTTON_SLOT);
+        this._fieldElement.setAttribute('exportparts', Object.values(FIELD_CONSTANTS.parts).join(', '));
+        this._clearButtonSlotElement.remove();
     }
-    removeInputListener(type, listener) {
-        if (this._inputElements && this._inputElements.length > 0) {
-            this._applyToInputs(input => input.removeEventListener(type, listener));
-        }
+    addRootListener(name, listener) {
+        this._fieldElement.addEventListener(name, listener);
     }
-    setValueChangedListener(context, listener) {
-        this.destroyValueChangeListener();
-        this._applyToInputs(input => {
-            const destroyListener = listenOwnProperty(context, input, 'value', listener);
-            this._valueChangeListeners.push(destroyListener);
-        });
+    removeRootListener(name, listener) {
+        this._fieldElement.removeEventListener(name, listener);
     }
-    inputHasValue() {
-        return this._inputsSome(input => input.value ? input.value.trim().length > 0 : false);
+    disableInput(disabled) {
+        this._inputElements.forEach(el => el.disabled = disabled);
     }
-    hasPlaceholder() {
-        return this._inputsSome(input => input.placeholder ? input.placeholder.trim().length > 0 : false);
+    inputIsDisabled() {
+        return this._inputElements.some(el => el.disabled);
     }
-    inputHasFocus(target) {
-        const activeElement = getActiveElement(this._component.ownerDocument);
-        return this._inputsSome(input => input === target || input === activeElement);
+    click() {
+        var _a;
+        (_a = this._inputElements[0]) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    setInputClass(className) {
-        this._applyToInputs(input => input.classList.add(className));
+    applyLabel(value) {
+        this._inputElements.forEach((inputElement) => {
+            toggleAttribute(inputElement, !!value, 'aria-label', value !== null && value !== void 0 ? value : '');
+        });
     }
-    removeInputClass(className) {
-        this._applyToInputs(input => input.classList.remove(className));
+    handleDefaultSlotChange(slot, listener) {
+        var _a;
+        // Destroy the mutation observer if it exists
+        (_a = this._inputMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        // If there are no assigned elements, return
+        const assignedElements = slot.assignedElements();
+        if (!assignedElements.length) {
+            return;
+        }
+        // Get all the slotted inputs and textfields, if a textfield is slotted the field is multiline
+        this._inputElements = assignedElements.filter(el => el.matches(TEXT_FIELD_CONSTANTS.selectors.INPUT));
+        this._fieldElement.multiline = this._inputElements.some(el => el.tagName === TEXT_FIELD_CONSTANTS.tagNames.TEXTAREA);
+        // Create a new mutation observer and observe each input
+        this._inputMutationObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.attributeName) {
+                    const element = mutation.target;
+                    const attribute = element.getAttribute(mutation.attributeName);
+                    const attributeName = mutation.attributeName;
+                    listener(attributeName, attribute);
+                }
+            });
+        });
+        this._inputElements.forEach(el => {
+            var _a;
+            (_a = this._inputMutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { attributes: true, attributeFilter: TEXT_FIELD_CONSTANTS.observedInputAttributes });
+            // Call the listener with each observed attribute to capture the initial state
+            Object.values(TEXT_FIELD_CONSTANTS.observedInputAttributes).forEach(value => {
+                const attributeName = value;
+                listener(attributeName, el.getAttribute(attributeName));
+            });
+        });
     }
-    setInputAttributeObserver(listener) {
-        this._applyToInputs(input => {
-            const observer = createElementAttributeObserver(input, listener, FIELD_CONSTANTS.observedInputAttributes);
-            this._inputMutationObserverInstances.push(observer);
+    tryAddValueChangeListener(context, listener) {
+        // Destroy the previous value change listeners
+        this._destroyValueChangerListeners.forEach(callback => callback());
+        // Add a new value change listener to each input
+        this._destroyValueChangerListeners = this._inputElements.map(el => {
+            return listenOwnProperty(context, el, 'value', listener);
         });
     }
-    isDisabled() {
-        return this._inputsSome(input => input.hasAttribute('disabled'));
+    removeValueChangeListener() {
+        this._destroyValueChangerListeners.forEach(callback => callback());
     }
-    isReadonly() {
-        return this._inputsSome(input => input.hasAttribute('readonly'));
+    tryFloatLabel(force) {
+        // Force the label to float if specified
+        if (force !== undefined) {
+            this._fieldElement.floatLabel = force;
+            return;
+        }
+        // Float the label if no input has a value or a placeholder
+        this._fieldElement.floatLabel = this.hasValue || this.hasPlaceholder;
+    }
+    tryConnectSlottedLabel(slot) {
+        var _a;
+        // Only one input can be automatically connected to a label, return if there are no or more
+        // than one inputs or if the input is already labelled
+        if (this._inputElements.length !== 1 || ((_a = this._inputElements[0].labels) === null || _a === void 0 ? void 0 : _a.length)) {
+            return;
+        }
+        const inputElement = this._inputElements[0];
+        const elements = slot.assignedElements({ flatten: true });
+        // Attempt to find and connect a `<forge-label>` element
+        const forgeLabel = elements.find(el => el.matches(TEXT_FIELD_CONSTANTS.selectors.FORGE_LABEL));
+        if (forgeLabel) {
+            forgeLabel.forElement = this._component;
+            forgeLabel.clickTarget = inputElement;
+            return;
+        }
+        // Attempt to find and connect a `<label>` element
+        const label = elements.find(el => el.tagName === TEXT_FIELD_CONSTANTS.tagNames.LABEL);
+        if (!label || label.control) {
+            return;
+        }
+        const id = inputElement.id || `forge-input-${randomChars()}`;
+        inputElement.id = id;
+        label.htmlFor = id;
     }
-    _inputsSome(action) {
-        return this._inputElements.some(action);
+    connectClearButton(listener) {
+        this._clearButtonSlotElement.addEventListener('click', listener);
     }
-    _applyToInputs(action) {
-        this._inputElements.forEach(action);
+    disconnectClearButton(listener) {
+        this._clearButtonSlotElement.removeEventListener('click', listener);
     }
-    _handleMultiInputs() {
-        addClass(TEXT_FIELD_CONSTANTS.classes.MULTI_INPUT, this._rootElement);
-        this._applyToInputs((input, index) => {
-            input.setAttribute(`${TEXT_FIELD_CONSTANTS.attributes.MULTI_INPUT}-${index}`, '');
-            if (index % 2 !== 1) {
-                Promise.resolve().then(() => input.insertAdjacentElement('afterend', this._createSeperatorElement()));
-            }
-        });
+    toggleClearButtonVisibility(visible) {
+        if (visible) {
+            this._fieldElement.append(this._clearButtonSlotElement);
+        }
+        else {
+            this._clearButtonSlotElement.remove();
+        }
     }
-    _createSeperatorElement() {
-        const divider = document.createElement('span');
-        divider.setAttribute(TEXT_FIELD_CONSTANTS.attributes.MULTI_INPUT_SEPARATOR, '');
-        divider.textContent = '-';
-        return divider;
+    clearInput() {
+        if (!this._inputElements.length) {
+            return;
+        }
+        this._inputElements.forEach(el => el.value = '');
+        this._inputElements[0].focus();
     }
 }

package/esm/text-field/text-field-component-delegate.d.ts

@@ -12,17 +12,23 @@ export interface ITextFieldComponentDelegateOptions extends IFormFieldComponentD
     label?: string;
     type?: string;
     value?: string;
-    helperText?: string;
     placeholder?: string;
+    startElement?: HTMLElement;
+    endElement?: HTMLElement;
+    accessoryElement?: HTMLElement;
+    supportTextStart?: string;
+    supportTextEndElement?: string;
     leadingElement?: HTMLElement;
     trailingElement?: HTMLElement;
+    helperText?: string;
 }
 export interface ITextFieldComponentDelegateConfig extends IBaseComponentDelegateConfig<ITextFieldComponent, ITextFieldComponentDelegateOptions> {
 }
 export declare class TextFieldComponentDelegate extends FormFieldComponentDelegate<ITextFieldComponent, ITextFieldComponentDelegateOptions> {
     private _inputElement;
-    private _labelElement;
-    private _helperTextElement;
+    private _labelElement?;
+    private _supportTextStartElement?;
+    private _supportTextEndElement?;
     constructor(config?: ITextFieldComponentDelegateConfig);
     protected _build(): ITextFieldComponent;
     protected _configure(): void;
@@ -38,7 +44,9 @@ export declare class TextFieldComponentDelegate extends FormFieldComponentDelega
     onFocus(listener: (evt: Event) => void): void;
     onBlur(listener: (evt: Event) => void): void;
     setLabel(text: string | null): void;
+    setSupportTextStart(text: string | null): void;
     setHelperText(text: string | null): void;
+    setSupportTextEnd(text: string | null): void;
     floatLabel(value: boolean): void;
     private _createLabel;
     private _buildInputElement;