@tylertech/forge 3.1.3 → 3.3.0

package/esm/tabs/tab-bar/tab-bar.js

@@ -29,7 +29,7 @@ const styles = ':host{position:relative;display:block}:host([hidden]){display:no
  * @dependency forge-icon-button
  * @dependency forge-icon
  *
- * @property {boolean} [disabled=false] - The disabled state of the tab bar.
+ * @property {boolean} [disabled=false] - Sets the disabled state of all child tabs.  If true, any new tabs added to the DOM will be disabled by default. This can be used instead of setting individual tab disabled properties, mixing the two methods of disabling is not supported.
  * @property {number} [activeTab=null] - The index of the active tab.
  * @property {boolean} [vertical=false] - Controls whether the tab bar is vertical or horizontal.
  * @property {boolean} [clustered=false] - Controls whether the tabs stretch the full width of their container or cluster together at their minimum width.

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

@@ -12,19 +12,22 @@ export interface ITextFieldAdapter extends IBaseFieldAdapter {
     addRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
     removeRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
     disableInput(disabled: boolean): void;
-    handleDefaultSlotChange(slot: HTMLSlotElement, listener: TextFieldInputAttributeObserver): void;
+    handleDefaultSlotChange(listener: TextFieldInputAttributeObserver): void;
     tryAddValueChangeListener(context: unknown, listener: TextFieldValueChangeListener): void;
     removeValueChangeListener(): void;
     tryFloatLabel(force?: boolean): void;
-    tryConnectSlottedLabel(slot: HTMLSlotElement): void;
+    tryConnectSlottedLabel(): void;
     connectClearButton(listener: EventListener): void;
     disconnectClearButton(listener: EventListener): void;
     toggleClearButtonVisibility(visible: boolean): void;
     clearInput(): void;
+    getAllSlotElements(): HTMLSlotElement[];
 }
 export declare class TextFieldAdapter extends BaseFieldAdapter implements ITextFieldAdapter {
     protected readonly _fieldElement: IFieldComponent;
     private readonly _clearButtonSlotElement;
+    private readonly _defaultSlotElement;
+    private readonly _labelSlotElement;
     private _popoverTargetElement;
     private _inputElements;
     private _inputMutationObserver?;
@@ -39,13 +42,14 @@ export declare class TextFieldAdapter extends BaseFieldAdapter implements ITextF
     inputIsDisabled(): boolean;
     click(): void;
     applyLabel(value: string | null): void;
-    handleDefaultSlotChange(slot: HTMLSlotElement, listener: TextFieldInputAttributeObserver): void;
+    handleDefaultSlotChange(listener: TextFieldInputAttributeObserver): void;
     tryAddValueChangeListener(context: unknown, listener: TextFieldValueChangeListener): void;
     removeValueChangeListener(): void;
     tryFloatLabel(force?: boolean): void;
-    tryConnectSlottedLabel(slot: HTMLSlotElement): void;
+    tryConnectSlottedLabel(): void;
     connectClearButton(listener: EventListener): void;
     disconnectClearButton(listener: EventListener): void;
     toggleClearButtonVisibility(visible: boolean): void;
     clearInput(): void;
+    getAllSlotElements(): HTMLSlotElement[];
 }

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

@@ -26,6 +26,8 @@ export class TextFieldAdapter extends BaseFieldAdapter {
         this._destroyValueChangerListeners = [];
         this._fieldElement = getShadowElement(component, TEXT_FIELD_CONSTANTS.selectors.FIELD);
         this._clearButtonSlotElement = getShadowElement(component, TEXT_FIELD_CONSTANTS.selectors.CLEAR_BUTTON_SLOT);
+        this._defaultSlotElement = getShadowElement(component, TEXT_FIELD_CONSTANTS.selectors.DEFAULT_SLOT);
+        this._labelSlotElement = getShadowElement(component, TEXT_FIELD_CONSTANTS.selectors.LABEL_SLOT);
         this._fieldElement.setAttribute('exportparts', Object.values(FIELD_CONSTANTS.parts).join(', '));
         this._clearButtonSlotElement.remove();
     }
@@ -49,11 +51,11 @@ export class TextFieldAdapter extends BaseFieldAdapter {
             toggleAttribute(inputElement, !!value, 'aria-label', value ?? '');
         });
     }
-    handleDefaultSlotChange(slot, listener) {
+    handleDefaultSlotChange(listener) {
         // Destroy the mutation observer if it exists
         this._inputMutationObserver?.disconnect();
         // If there are no assigned elements, return
-        const assignedElements = slot.assignedElements();
+        const assignedElements = this._defaultSlotElement.assignedElements();
         if (!assignedElements.length) {
             return;
         }
@@ -106,14 +108,14 @@ export class TextFieldAdapter extends BaseFieldAdapter {
         // Float the label if no input has a value or a placeholder
         this._fieldElement.floatLabel = this.hasValue || this.hasPlaceholder;
     }
-    tryConnectSlottedLabel(slot) {
+    tryConnectSlottedLabel() {
         // 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 || this._inputElements[0].labels?.length) {
             return;
         }
         const inputElement = this._inputElements[0];
-        const elements = slot.assignedElements({ flatten: true });
+        const elements = this._labelSlotElement.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) {
@@ -151,4 +153,7 @@ export class TextFieldAdapter extends BaseFieldAdapter {
         this._inputElements.forEach(el => (el.value = ''));
         this._inputElements[0].focus();
     }
+    getAllSlotElements() {
+        return Array.from(this._component.shadowRoot?.querySelectorAll('slot') ?? []);
+    }
 }

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

@@ -14,6 +14,8 @@ export declare const TEXT_FIELD_CONSTANTS: {
     };
     selectors: {
         FIELD: string;
+        DEFAULT_SLOT: string;
+        LABEL_SLOT: string;
         CLEAR_BUTTON_SLOT: string;
         FORGE_LABEL: "forge-label";
         INPUT: string;

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

@@ -14,6 +14,8 @@ const attributes = {
 };
 const selectors = {
     FIELD: '#field',
+    DEFAULT_SLOT: 'slot:not([name])',
+    LABEL_SLOT: 'slot[name=label]',
     CLEAR_BUTTON_SLOT: 'slot[name=clear-button]',
     FORGE_LABEL: LABEL_CONSTANTS.elementName,
     INPUT: ':where(input:not([type=button], [type=checkbox], [type=color], [type=hidden], [type=image], [type=radio], [type=range], [type=reset], [type=submit]), textarea)'

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

@@ -22,7 +22,9 @@ export declare class TextFieldCore extends BaseFieldCore<ITextFieldAdapter> impl
     initialize(): void;
     destroy(): void;
     get popoverTargetElement(): HTMLElement;
+    private _initializeSlots;
     private _onSlotChange;
+    private _handleSlotChange;
     private _onInputAttributeChange;
     private _onClearButtonClick;
     private _onValueChange;

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

@@ -21,6 +21,7 @@ export class TextFieldCore extends BaseFieldCore {
         this._adapter.tryApplyGlobalConfiguration(['labelPosition', 'variant']);
         this._adapter.addRootListener('slotchange', this._slotChangeListener);
         this._adapter.addRootListener('input', this._inputListener);
+        this._initializeSlots();
     }
     destroy() {
         this._adapter.removeRootListener('slotchange', this._slotChangeListener);
@@ -30,14 +31,20 @@ export class TextFieldCore extends BaseFieldCore {
     get popoverTargetElement() {
         return this._adapter.popoverTargetElement;
     }
+    _initializeSlots() {
+        this._adapter.getAllSlotElements().forEach(slot => this._handleSlotChange(slot.name));
+    }
     _onSlotChange(evt) {
         const target = evt.target;
-        switch (target.name) {
+        this._handleSlotChange(target.name);
+    }
+    _handleSlotChange(name) {
+        switch (name) {
             case 'label':
-                this._adapter.tryConnectSlottedLabel(target);
+                this._adapter.tryConnectSlottedLabel();
                 break;
             case '':
-                this._adapter.handleDefaultSlotChange(target, this._inputAttributeListener);
+                this._adapter.handleDefaultSlotChange(this._inputAttributeListener);
                 this._adapter.tryAddValueChangeListener(this, this._valueChangeListener);
                 this._tryFloatLabel();
                 break;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.1.3",
+  "version": "3.3.0",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {

package/sass/chip-field/chip-field.scss

@@ -77,7 +77,8 @@ $themes: (primary, secondary, tertiary, success, warning, error, info);
       @include chip.provide-theme(
         (
           field-background: theme.variable($theme),
-          field-color: theme.variable(on-#{$theme})
+          field-color: theme.variable(on-#{$theme}),
+          focus-indicator-color: theme.variable($theme)
         )
       );
     }

package/sass/chips/chip/chip.scss

@@ -64,7 +64,7 @@
 forge-focus-indicator {
   @include focus-indicator.provide-theme(
     (
-      color: #{token(color)},
+      color: #{token(focus-indicator-color)},
       shape: #{token(shape)}
     )
   );

package/sass/circular-progress/_core.scss

@@ -14,8 +14,8 @@ $_cycle-duration: calc(4 * #{token(arc-duration)});
 @mixin container {
   display: inline-flex;
   vertical-align: middle;
-  min-block-size: #{token(size)};
-  min-inline-size: #{token(size)};
+  block-size: #{token(size)};
+  inline-size: #{token(size)};
   position: relative;
   align-items: center;
   justify-content: center;

package/sass/core/styles/tokens/chips/chip/_tokens.scss

@@ -22,6 +22,7 @@ $tokens: (
   padding-block: utils.module-val(chip, padding-block, 0),
   cursor: utils.module-val(chip, cursor, pointer),
   icon-font-size: utils.module-val(chip, icon-font-size, 1.5rem),
+  focus-indicator-color: utils.module-ref(chip, focus-indicator-color, color),
   // Disabled
   disabled-opacity: utils.module-val(chip, disabled-opacity, theme.emphasis(medium-low)),
   disabled-cursor: utils.module-val(chip, disabled-cursor, not-allowed),

package/sass/field/_core.scss

@@ -83,6 +83,7 @@
   outline-style: #{token(outline-style)};
   outline-width: #{token(outline-width)};
   outline-color: #{token(outline-color, custom)};
+  outline-offset: calc(#{token(outline-width)} * -1);
   pointer-events: none;
 }
 

package/sass/field/field.scss

@@ -676,7 +676,7 @@ forge-focus-indicator {
   @include focus-indicator.provide-theme(
     (
       color: #{token(focus-indicator-color, custom)},
-      outward-offset: 0px,
+      outward-offset: calc(#{token(outline-width)} * -1),
       shape: #{token(shape)},
       width: #{token(focus-indicator-width)}
     )

package/sass/field/forge-field.scss

@@ -46,6 +46,7 @@ $_input-selector: ':where(input, textarea, select, .forge-field__input)';
     outline-style: #{token(outline-style)};
     outline-width: #{token(outline-width)};
     outline-color: #{theme.variable(outline-low)};
+    outline-offset: calc(#{token(outline-width)} * -1);
 
     background: #{token(background)};
 
@@ -329,7 +330,8 @@ $_input-selector: ':where(input, textarea, select, .forge-field__input)';
       &.forge-field:has(#{$_input-selector}:focus) {
         @include focus-indicator.provide-theme(
           (
-            color: #{theme.variable(error)}
+            color: #{theme.variable(error)},
+            outward-offset: calc(#{token(outline-width)} * -1)
           )
         );
       }

package/sass/inline-message/_core.scss

@@ -24,6 +24,7 @@
   border-color: #{token(border-color)};
 
   display: flex;
+  align-items: center;
   gap: #{token(icon-gap)};
   box-sizing: border-box;
   padding-inline: #{token(padding-inline)};
@@ -42,4 +43,5 @@
 
 @mixin icon {
   color: #{token(icon-color)};
+  align-self: start;
 }