@tylertech/forge 3.0.0-next.14 → 3.0.0-next.15

package/esm/app-bar/search/app-bar-search-adapter.js

@@ -3,71 +3,41 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { addClass, getShadowElement, isDefined, removeClass, toggleElementPlaceholder, deepQuerySelectorAll, toggleAttribute, toggleClass } from '@tylertech/forge-core';
+import { getShadowElement } from '@tylertech/forge-core';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { APP_BAR_SEARCH_CONSTANTS } from './app-bar-search-constants';
-/**
- * Provides facilities for interacting with the internal DOM of `AppBarSearchComponent`.
- */
 export class AppBarSearchAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
         this._rootElement = getShadowElement(component, APP_BAR_SEARCH_CONSTANTS.selectors.ROOT);
-        this._globalIconContainer = getShadowElement(component, APP_BAR_SEARCH_CONSTANTS.selectors.GLOBAL_ICON_CONTAINER);
-        this._contextContainerElement = getShadowElement(component, APP_BAR_SEARCH_CONSTANTS.selectors.CONTEXT_CONTAINER);
     }
     initialize() {
-        const inputElements = deepQuerySelectorAll(this._component, APP_BAR_SEARCH_CONSTANTS.selectors.INPUT, false);
-        if (inputElements.length) {
-            this._inputElement = inputElements[0];
+        const inputElement = this._component.querySelector(APP_BAR_SEARCH_CONSTANTS.selectors.INPUT);
+        if (inputElement) {
+            this._inputElement = inputElement;
+            if (!this._inputElement.hasAttribute('slot')) {
+                this._inputElement.slot = 'input';
+            }
+            const focusIndicator = document.createElement('forge-focus-indicator');
+            focusIndicator.targetElement = this._inputElement;
+            this._rootElement.appendChild(focusIndicator);
         }
     }
-    hasInputElement() {
-        return isDefined(this._inputElement);
-    }
-    addRootClass(className) {
-        addClass(className, this._rootElement);
-    }
-    removeRootClass(className) {
-        removeClass(className, this._rootElement);
-    }
-    /**
-     * Adds an event to the search input element.
-     * @param {string} type The event type.
-     * @param {Function} listener The event listener.
-     */
-    addSearchInputEventListener(type, listener) {
-        this._inputElement.addEventListener(type, listener);
+    addInputEventListener(type, listener) {
+        var _a;
+        (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener(type, listener);
     }
-    /**
-     * Removes an event from the search input element.
-     * @param {string} type The event type.
-     * @param {Function} listener The event listener.
-     */
-    removeSearchInputEventListener(type, listener) {
-        this._inputElement.removeEventListener(type, listener);
+    removeInputEventListener(type, listener) {
+        var _a;
+        (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(type, listener);
     }
-    /**
-     * Toggles the disabled attribute on the search input.
-     * @param {boolean} disabled Whether the attribute should be set or not.
-     */
-    setDisabled(disabled) {
-        toggleClass(this._rootElement, disabled, APP_BAR_SEARCH_CONSTANTS.classes.DISABLED);
-        toggleAttribute(this._inputElement, disabled, APP_BAR_SEARCH_CONSTANTS.attributes.DISABLED);
-    }
-    getInputValue() {
-        return this._inputElement.value;
-    }
-    setInputValue(value) {
-        this._inputElement.value = value;
-    }
-    setInputPlaceholder(value) {
-        this._inputElement.placeholder = value;
-    }
-    setGlobalIconVisibility(isVisible) {
-        this._globalIconPlaceholder = toggleElementPlaceholder(this._component, isVisible, APP_BAR_SEARCH_CONSTANTS.elementName, APP_BAR_SEARCH_CONSTANTS.selectors.GLOBAL_ICON_CONTAINER, this._globalIconContainer, this._globalIconPlaceholder);
+    setInputProperty(name, value) {
+        if (this._inputElement) {
+            this._inputElement[name] = value;
+        }
     }
-    setContextVisibility(isVisible) {
-        this._contextContainerPlaceholder = toggleElementPlaceholder(this._component, isVisible, APP_BAR_SEARCH_CONSTANTS.elementName, APP_BAR_SEARCH_CONSTANTS.selectors.CONTEXT_CONTAINER, this._contextContainerElement, this._contextContainerPlaceholder);
+    getInputProperty(name) {
+        var _a;
+        return (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a[name];
     }
 }

package/esm/app-bar/search/app-bar-search-constants.d.ts

@@ -3,36 +3,21 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IOption } from '../../select';
 export declare const APP_BAR_SEARCH_CONSTANTS: {
     elementName: "forge-app-bar-search";
-    classes: {
-        FOCUSED: string;
-        DISABLED: string;
-    };
     selectors: {
         ROOT: string;
         INPUT: string;
-        GLOBAL_ICON_CONTAINER: string;
-        CONTEXT_CONTAINER: string;
     };
     attributes: {
         DISABLED: string;
         VALUE: string;
         PLACEHOLDER: string;
-        COMBINED: string;
-        GLOBAL: string;
     };
     events: {
         INPUT: string;
     };
-    strings: {
-        DEFAULT_CONTEXT: string;
-    };
 };
-export declare const DEFAULT_COMBINED_OPTIONS: IOption[];
 export interface IAppBarSearchInputEventData {
     value: string;
-    combined: boolean;
-    context: string;
 }

package/esm/app-bar/search/app-bar-search-constants.js

@@ -5,38 +5,21 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}app-bar-search`;
-const classes = {
-    FOCUSED: 'forge-app-bar-search--focused',
-    DISABLED: 'forge-app-bar-search--disabled'
-};
 const selectors = {
     ROOT: '.forge-app-bar-search',
-    INPUT: 'input',
-    GLOBAL_ICON_CONTAINER: '.forge-app-bar-search__global-icon-container',
-    CONTEXT_CONTAINER: '.forge-app-bar-search__context'
+    INPUT: 'input'
 };
 const attributes = {
     DISABLED: 'disabled',
     VALUE: 'value',
-    PLACEHOLDER: 'placeholder',
-    COMBINED: 'combined',
-    GLOBAL: 'global'
+    PLACEHOLDER: 'placeholder'
 };
 const events = {
     INPUT: `${elementName}-input`
 };
-const strings = {
-    DEFAULT_CONTEXT: 'global'
-};
 export const APP_BAR_SEARCH_CONSTANTS = {
     elementName,
-    classes,
     selectors,
     attributes,
-    events,
-    strings
+    events
 };
-export const DEFAULT_COMBINED_OPTIONS = [
-    { label: 'in this application', value: 'local' },
-    { label: 'in all products', value: strings.DEFAULT_CONTEXT }
-];

package/esm/app-bar/search/app-bar-search-foundation.d.ts

@@ -5,58 +5,24 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IAppBarSearchAdapter } from './app-bar-search-adapter';
-import { IOption } from '../../select';
 export interface IAppBarSearchFoundation extends ICustomElementFoundation {
     disabled: boolean;
     value: string;
     placeholder: string;
-    combined: boolean;
-    combinedOptions: IOption[];
-    selectedCombinedOption: string;
-    global: boolean;
 }
-/**
- * Provides facilities and helper methods for creating an app-bar-search component.
- */
 export declare class AppBarSearchFoundation implements IAppBarSearchFoundation {
     private _adapter;
     private _disabled;
-    private _combined;
-    private _combinedContext;
-    private _combinedOptions;
-    private _selectedCombinedOption;
-    private _global;
     private _keydownListener;
-    private _focusListener;
-    private _blurListener;
     constructor(_adapter: IAppBarSearchAdapter);
     initialize(): void;
-    /**
-     * Handles keydown events on our search input.
-     * @param {KeyboardEvent} evt
-     */
-    private _onKeyDown;
-    private _onFocus;
-    private _onBlur;
+    private _tryForwardInputState;
+    private _onKeydown;
     disconnect(): void;
-    /** Gets/sets the disabled state of the input. */
     get disabled(): boolean;
     set disabled(value: boolean);
-    /** Gets/sets the input value. */
     get value(): string;
     set value(value: string);
-    /** Sets the placeholder text. */
+    get placeholder(): string;
     set placeholder(value: string);
-    /** Gets/sets the combined bool. */
-    get combined(): boolean;
-    set combined(value: boolean);
-    /** Gets/sets options for the combined search dropdown. */
-    get combinedOptions(): IOption[];
-    set combinedOptions(value: IOption[]);
-    /** Gets/sets selected option for the combined search dropdown. */
-    get selectedCombinedOption(): string;
-    set selectedCombinedOption(value: string);
-    /** Gets/sets the input value. */
-    get global(): boolean;
-    set global(value: boolean);
 }

package/esm/app-bar/search/app-bar-search-foundation.js

@@ -4,123 +4,62 @@
  * License: Apache-2.0
  */
 import { APP_BAR_SEARCH_CONSTANTS } from './app-bar-search-constants';
-/**
- * Provides facilities and helper methods for creating an app-bar-search component.
- */
 export class AppBarSearchFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
         this._disabled = false;
-        this._combined = false;
-        this._combinedContext = APP_BAR_SEARCH_CONSTANTS.strings.DEFAULT_CONTEXT;
-        this._combinedOptions = [];
-        this._global = false;
-        this._keydownListener = evt => this._onKeyDown(evt);
-        this._focusListener = evt => this._onFocus(evt);
-        this._blurListener = evt => this._onBlur(evt);
+        this._keydownListener = (evt) => this._onKeydown(evt);
     }
     initialize() {
         this._adapter.initialize();
-        if (!this._adapter.hasInputElement()) {
-            throw new Error('An input element is required as a child of the app-bar-search component.');
+        this._tryForwardInputState();
+        this._adapter.addInputEventListener('keydown', this._keydownListener);
+    }
+    _tryForwardInputState() {
+        if (this._disabled) {
+            this._adapter.setInputProperty('disabled', this._disabled);
+        }
+        if (this._adapter.hasHostAttribute(APP_BAR_SEARCH_CONSTANTS.attributes.VALUE)) {
+            this._adapter.setInputProperty('value', this._adapter.getHostAttribute(APP_BAR_SEARCH_CONSTANTS.attributes.VALUE));
+        }
+        if (this._adapter.hasHostAttribute(APP_BAR_SEARCH_CONSTANTS.attributes.PLACEHOLDER)) {
+            this._adapter.setInputProperty('placeholder', this._adapter.getHostAttribute(APP_BAR_SEARCH_CONSTANTS.attributes.PLACEHOLDER));
         }
-        this._adapter.setGlobalIconVisibility(this._global);
-        this._adapter.setContextVisibility(this._combined);
-        this._adapter.addSearchInputEventListener('keydown', this._keydownListener);
-        this._adapter.addSearchInputEventListener('focus', this._focusListener);
-        this._adapter.addSearchInputEventListener('blur', this._blurListener);
     }
-    /**
-     * Handles keydown events on our search input.
-     * @param {KeyboardEvent} evt
-     */
-    _onKeyDown(evt) {
-        if (evt.key === 'Enter' || evt.keyCode === 13) {
+    _onKeydown({ key, target }) {
+        if (this._disabled) {
+            return;
+        }
+        if (key === 'Enter') {
             const data = {
-                value: evt.target.value,
-                combined: this._combined,
-                context: this._combinedContext
+                value: target.value
             };
             this._adapter.emitHostEvent(APP_BAR_SEARCH_CONSTANTS.events.INPUT, data, true);
         }
     }
-    _onFocus(evt) {
-        this._adapter.addRootClass(APP_BAR_SEARCH_CONSTANTS.classes.FOCUSED);
-    }
-    _onBlur(evt) {
-        this._adapter.removeRootClass(APP_BAR_SEARCH_CONSTANTS.classes.FOCUSED);
-    }
     disconnect() {
-        this._adapter.removeSearchInputEventListener('keydown', this._keydownListener);
-        this._adapter.removeSearchInputEventListener('focus', this._focusListener);
-        this._adapter.removeSearchInputEventListener('blur', this._blurListener);
+        this._adapter.removeInputEventListener('keydown', this._keydownListener);
     }
-    /** Gets/sets the disabled state of the input. */
     get disabled() {
         return this._disabled;
     }
     set disabled(value) {
         if (value !== this._disabled) {
             this._disabled = value;
-            this._adapter.setDisabled(this._disabled);
+            this._adapter.setInputProperty('disabled', this._disabled);
             this._adapter.toggleHostAttribute(APP_BAR_SEARCH_CONSTANTS.attributes.DISABLED, this._disabled);
         }
     }
-    /** Gets/sets the input value. */
     get value() {
-        return this._adapter.getInputValue();
+        return this._adapter.getInputProperty('value');
     }
     set value(value) {
-        this._adapter.setInputValue(value);
-    }
-    /** Sets the placeholder text. */
-    set placeholder(value) {
-        this._adapter.setInputPlaceholder(value);
-    }
-    /** Gets/sets the combined bool. */
-    get combined() {
-        return this._combined;
+        this._adapter.setInputProperty('value', value);
     }
-    set combined(value) {
-        if (this._combined !== value) {
-            this._combined = value;
-            this._adapter.setContextVisibility(this._combined);
-        }
-    }
-    /** Gets/sets options for the combined search dropdown. */
-    // Note: this is currently the end of the combinedOptions implemention.
-    //   In the future this will feed into a select or menu type dropdown.
-    get combinedOptions() {
-        if (!this._combinedOptions) {
-            return [];
-        }
-        return this._combinedOptions.map(co => (Object.assign({}, co)));
-    }
-    set combinedOptions(value) {
-        if (!value) {
-            this._combinedOptions = [];
-        }
-        this._combinedOptions = value.map(v => (Object.assign({}, v)));
-    }
-    /** Gets/sets selected option for the combined search dropdown. */
-    // Note: this is currently the end of the selectedCombinedOption implemention.
-    //   In the future this will hold the selected select or menu type dropdown value.
-    get selectedCombinedOption() {
-        return this._selectedCombinedOption;
+    get placeholder() {
+        return this._adapter.getInputProperty('placeholder');
     }
-    set selectedCombinedOption(value) {
-        if (this._selectedCombinedOption !== value) {
-            this._selectedCombinedOption = value;
-        }
-    }
-    /** Gets/sets the input value. */
-    get global() {
-        return this._global;
-    }
-    set global(value) {
-        if (this._global !== value) {
-            this._global = value;
-            this._adapter.setGlobalIconVisibility(this._global);
-        }
+    set placeholder(value) {
+        this._adapter.setInputProperty('placeholder', value);
     }
 }

package/esm/app-bar/search/app-bar-search.d.ts

@@ -4,16 +4,11 @@
  * License: Apache-2.0
  */
 import { IAppBarSearchInputEventData } from './app-bar-search-constants';
-import { IOption } from '../../select';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 export interface IAppBarSearchComponent extends IBaseComponent {
     disabled: boolean;
     value: string;
     placeholder: string;
-    combined: boolean;
-    combinedOptions: IOption[];
-    selectedCombinedOption: string;
-    global: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -24,8 +19,6 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-app-bar-search>` custom element.
- *
  * @tag forge-app-bar-search
  *
  * @slot - The default (unnamed) slot is where child `<input>` elements will be placed.
@@ -54,25 +47,12 @@ declare global {
  */
 export declare class AppBarSearchComponent extends BaseComponent implements IAppBarSearchComponent {
     static get observedAttributes(): string[];
-    /** The foundation class that handles business logic for this component. */
     private _foundation;
     constructor();
     connectedCallback(): void;
-    private _initialize;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Gets/sets the value. */
     value: string;
-    /** Gets/sets the disabled state of the search input. */
     disabled: boolean;
-    /** Gets/sets whether this is a combined search box with search options. */
-    combined: boolean;
-    /** Gets/sets seelcted option for the combined search dropdown. */
-    combinedOptions: IOption[];
-    /** Gets/sets selected option for the combined search dropdown. */
-    selectedCombinedOption: string;
-    /** Gets/sets whether the global icon is displayed at the end of the input. */
-    global: boolean;
-    /** Sets the input placeholder value. */
-    set placeholder(value: string);
+    placeholder: string;
 }

package/esm/app-bar/search/app-bar-search.js

@@ -4,19 +4,17 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, attachShadowTemplate, ensureChildren, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
-import { tylIconArrowDropDown, tylIconLanguage, tylIconSearch } from '@tylertech/tyler-icons/standard';
+import { CustomElement, attachShadowTemplate, coerceBoolean, FoundationProperty, ensureInputElement } from '@tylertech/forge-core';
+import { tylIconSearch } from '@tylertech/tyler-icons/standard';
 import { AppBarSearchFoundation } from './app-bar-search-foundation';
 import { AppBarSearchAdapter } from './app-bar-search-adapter';
 import { APP_BAR_SEARCH_CONSTANTS } from './app-bar-search-constants';
-import { TooltipComponent } from '../../tooltip';
+import { FocusIndicatorComponent } from '../../focus-indicator';
 import { IconComponent, IconRegistry } from '../../icon';
 import { BaseComponent } from '../../core/base/base-component';
-const template = '<template><div class=\"forge-app-bar-search\" part=\"root\"><div class=\"forge-app-bar-search__container\" part=\"container\"><div class=\"forge-app-bar-search__search-icon-container\" part=\"icon-container\"><forge-icon name=\"search\" class=\"forge-app-bar-search__icon\" part=\"icon\"></forge-icon></div><slot></slot><div class=\"forge-app-bar-search__context\" part=\"context\"><div class=\"forge-app-bar-search__vertical-divider\" part=\"context-divider\"></div><button type=\"button\" class=\"forge-app-bar-search__context-button\" part=\"context-button\"><span class=\"forge-app-bar-search__context-button-text\" part=\"context-button-text\">in this application</span><forge-icon name=\"arrow_drop_down\" class=\"forge-app-bar-search__context-button-icon\" part=\"context-button-icon\"></forge-icon></button></div><div class=\"forge-app-bar-search__global-icon-container\" part=\"global-icon-container\"><forge-icon slot=\"trailing\" name=\"language\" id=\"app-bar-global-context\" part=\"global-icon\"></forge-icon><forge-tooltip delay=\"500\" position=\"bottom\" target=\"#app-bar-global-context\">Global search</forge-tooltip></div></div><div class=\"forge-app-bar-search__actions\" part=\"actions-container\"><slot name=\"action\"></slot></div></div></template>';
-const styles = '::slotted([slot=action]){margin-left:8px}.forge-app-bar-search{display:-webkit-box;display:flex;height:2.25rem}.forge-app-bar-search__container{background-color:rgba(255,255,255,.08);background-color:var(--forge-app-bar-search-theme-background,rgba(255,255,255,.08));width:100%;-webkit-box-flex:1;flex:1 1 auto;margin:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}.forge-app-bar-search__container::before{border-color:#fff;border-color:var(--mdc-theme-on-primary,#fff);content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:2px;border-width:1px;border-style:solid;z-index:-1;opacity:.54;-webkit-transition-property:border-color,opacity;transition-property:border-color,opacity;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.55,0,0.55,0.2);transition-timing-function:cubic-bezier(0.55,0,0.55,0.2);will-change:border-color,border-width,opacity,top,left,bottom,right}.forge-app-bar-search__container:hover::before{opacity:.87;opacity:var(--forge-app-bar-search-theme-hover-opacity, .87)}.forge-app-bar-search__container ::slotted(input){color:#fff;color:var(--mdc-theme-on-primary,#fff);display:block;overflow:hidden;background:0 0;border:none;font-size:1rem;-webkit-box-flex:1;flex:1 1 auto;margin:0;margin-left:-8px;outline:0;pointer-events:auto;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.55,0,0.55,0.2);transition-timing-function:cubic-bezier(0.55,0,0.55,0.2)}.forge-app-bar-search__container ::slotted(input)::-webkit-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:1rem;opacity:1}.forge-app-bar-search__container ::slotted(input)::-moz-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:1rem;opacity:1}.forge-app-bar-search__container ::slotted(input):-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:1rem;opacity:1}.forge-app-bar-search__container ::slotted(input)::-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:1rem;opacity:1}.forge-app-bar-search__container ::slotted(input)::placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:1rem;opacity:1}.forge-app-bar-search__global-icon-container{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;margin:0 16px}.forge-app-bar-search__search-icon-container{width:56px;height:36px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-flex:0;flex:none}.forge-app-bar-search__icon{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-app-bar-search__actions{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.forge-app-bar-search__context{height:100%;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-left:8px}.forge-app-bar-search__context-button{color:#000;color:var(--mdc-theme-on-surface,#000);outline:0;border:none;background:0 0;min-width:100px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;height:70%;margin-left:8px;margin-right:4px;border-radius:4px;background-color:transparent;-webkit-transition:background-color .2s ease-out;transition:background-color .2s ease-out;will-change:background-color;padding:0;padding-left:8px}.forge-app-bar-search__context-button:hover{background-color:rgba(255,255,255,.12)}.forge-app-bar-search__context-button:focus{background-color:rgba(255,255,255,.2)}.forge-app-bar-search__context-button-text{-webkit-box-flex:1;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.forge-app-bar-search__vertical-divider{border-left-color:#fff;border-left-color:var(--mdc-theme-on-primary,#fff);display:inline-block;position:absolute;top:8px;bottom:8px;border-left-width:1px;border-left-style:solid}.forge-app-bar-search--focused .forge-app-bar-search__container{background-color:rgba(255,255,255,.12);background-color:var(--forge-app-bar-search-theme-background-focused,rgba(255,255,255,.12))}.forge-app-bar-search--focused .forge-app-bar-search__container::before{opacity:.87;border-width:2px;top:-1px;right:-1px;bottom:-1px;left:-1px}.forge-app-bar-search--disabled{opacity:.26;opacity:var(--forge-app-bar-search-theme-disabled-opacity, .26);cursor:not-allowed}.forge-app-bar-search--disabled .forge-app-bar-search__container:hover::before{opacity:54%}.forge-app-bar-search--disabled ::slotted(input){cursor:not-allowed}:host{display:block;width:100%;contain:layout style}:host([hidden]){display:none}';
+const template = '<template><div class=\"forge-app-bar-search\" part=\"root\"><slot name=\"start\"><forge-icon name=\"search\" class=\"icon\" part=\"icon\"></forge-icon></slot><slot name=\"input\"></slot><slot name=\"end\"></slot></div></template>';
+const styles = ':host{display:block}:host([hidden]){display:none}.forge-app-bar-search{--_app-bar-search-color:var(--forge-app-bar-search-color, currentColor);--_app-bar-search-height:var(--forge-app-bar-search-height, 36px);--_app-bar-search-padding:var(--forge-app-bar-search-padding, 8px);--_app-bar-search-shape:var(--forge-app-bar-search-shape, var(--forge-shape-small, 2px));--_app-bar-search-gap:var(--forge-app-bar-search-gap, 4px);--_app-bar-search-input-placeholder-color:var(--forge-app-bar-search-input-placeholder-color, var(--_app-bar-search-color));--_app-bar-search-input-placeholder-opacity:var(--forge-app-bar-search-input-placeholder-opacity, 0.38);--_app-bar-search-background-color:var(--forge-app-bar-search-background-color, var(--_app-bar-search-color));--_app-bar-search-background-color-opacity:var(--forge-app-bar-search-background-color-opacity, 0.08);--_app-bar-search-border-color:var(--forge-app-bar-search-border-color, var(--_app-bar-search-color));--_app-bar-search-border-opacity:var(--forge-app-bar-search-border-opacity, 0.54);--_app-bar-search-border-hover-opacity:var(--forge-app-bar-search-border-hover-opacity, 0.87);--_app-bar-search-transition-duration:var(--forge-app-bar-search-transition-duration, var(--forge-animation-duration-short3, 150ms));--_app-bar-search-transition-timing-function:var(--forge-app-bar-search-transition-timing-function, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-app-bar-search{position:relative;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-flex:1;flex:1 1 auto;gap:var(--_app-bar-search-gap);height:var(--_app-bar-search-height);width:100%;padding-inline:var(--_app-bar-search-padding);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--_app-bar-search-shape)}.forge-app-bar-search:hover::after{opacity:var(--_app-bar-search-border-hover-opacity)}.forge-app-bar-search::before{content:\"\";position:absolute;inset:0;pointer-events:none;background-color:var(--_app-bar-search-background-color);opacity:var(--_app-bar-search-background-color-opacity)}.forge-app-bar-search::after{content:\"\";position:absolute;inset:0;pointer-events:none;opacity:var(--_app-bar-search-border-opacity);border-radius:var(--_app-bar-search-shape);outline:1px solid var(--_app-bar-search-border-color);-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:var(--_app-bar-search-transition-duration);transition-duration:var(--_app-bar-search-transition-duration);-webkit-transition-timing-function:var(--_app-bar-search-transition-timing-function);transition-timing-function:var(--_app-bar-search-transition-timing-function)}:host([disabled]){cursor:not-allowed}:host([disabled]) .forge-app-bar-search{pointer-events:none;opacity:38%}:host([disabled]) ::slotted(input){pointer-events:none}forge-focus-indicator{--forge-focus-indicator-color:currentColor;--forge-focus-indicator-outward-offset:0px}::slotted(input){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);display:block;overflow:hidden;background:0 0;color:currentColor;border:none;width:100%;margin:0;outline:0}::slotted(input)::-webkit-input-placeholder{color:currentColor;opacity:var(--_app-bar-search-input-placeholder-opacity)}::slotted(input)::-moz-placeholder{color:currentColor;opacity:var(--_app-bar-search-input-placeholder-opacity)}::slotted(input):-ms-input-placeholder{color:currentColor;opacity:var(--_app-bar-search-input-placeholder-opacity)}::slotted(input)::-ms-input-placeholder{color:currentColor;opacity:var(--_app-bar-search-input-placeholder-opacity)}::slotted(input)::placeholder{color:currentColor;opacity:var(--_app-bar-search-input-placeholder-opacity)}';
 /**
- * The web component class behind the `<forge-app-bar-search>` custom element.
- *
  * @tag forge-app-bar-search
  *
  * @slot - The default (unnamed) slot is where child `<input>` elements will be placed.
@@ -48,28 +46,23 @@ let AppBarSearchComponent = class AppBarSearchComponent extends BaseComponent {
         return [
             APP_BAR_SEARCH_CONSTANTS.attributes.DISABLED,
             APP_BAR_SEARCH_CONSTANTS.attributes.VALUE,
-            APP_BAR_SEARCH_CONSTANTS.attributes.PLACEHOLDER,
-            APP_BAR_SEARCH_CONSTANTS.attributes.COMBINED,
-            APP_BAR_SEARCH_CONSTANTS.attributes.GLOBAL
+            APP_BAR_SEARCH_CONSTANTS.attributes.PLACEHOLDER
         ];
     }
     constructor() {
         super();
-        IconRegistry.define([tylIconSearch, tylIconArrowDropDown, tylIconLanguage]);
+        IconRegistry.define(tylIconSearch);
         attachShadowTemplate(this, template, styles);
         this._foundation = new AppBarSearchFoundation(new AppBarSearchAdapter(this));
     }
     connectedCallback() {
-        if (this.children.length) {
-            this._initialize();
+        if (this.querySelector(APP_BAR_SEARCH_CONSTANTS.selectors.INPUT)) {
+            this._foundation.initialize();
         }
         else {
-            ensureChildren(this).then(() => this._initialize());
+            ensureInputElement(this).then(() => this._foundation.initialize());
         }
     }
-    _initialize() {
-        this._foundation.initialize();
-    }
     disconnectedCallback() {
         this._foundation.disconnect();
     }
@@ -84,18 +77,8 @@ let AppBarSearchComponent = class AppBarSearchComponent extends BaseComponent {
             case APP_BAR_SEARCH_CONSTANTS.attributes.PLACEHOLDER:
                 this.placeholder = newValue;
                 break;
-            case APP_BAR_SEARCH_CONSTANTS.attributes.COMBINED:
-                this.combined = coerceBoolean(newValue);
-                break;
-            case APP_BAR_SEARCH_CONSTANTS.attributes.GLOBAL:
-                this.global = coerceBoolean(newValue);
-                break;
         }
     }
-    /** Sets the input placeholder value. */
-    set placeholder(value) {
-        this._foundation.placeholder = value;
-    }
 };
 __decorate([
     FoundationProperty()
@@ -105,22 +88,13 @@ __decorate([
 ], AppBarSearchComponent.prototype, "disabled", void 0);
 __decorate([
     FoundationProperty()
-], AppBarSearchComponent.prototype, "combined", void 0);
-__decorate([
-    FoundationProperty()
-], AppBarSearchComponent.prototype, "combinedOptions", void 0);
-__decorate([
-    FoundationProperty()
-], AppBarSearchComponent.prototype, "selectedCombinedOption", void 0);
-__decorate([
-    FoundationProperty()
-], AppBarSearchComponent.prototype, "global", void 0);
+], AppBarSearchComponent.prototype, "placeholder", void 0);
 AppBarSearchComponent = __decorate([
     CustomElement({
         name: APP_BAR_SEARCH_CONSTANTS.elementName,
         dependencies: [
-            TooltipComponent,
-            IconComponent
+            IconComponent,
+            FocusIndicatorComponent
         ]
     })
 ], AppBarSearchComponent);

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

@@ -13,7 +13,6 @@ export interface IBaseButtonAdapter extends IBaseAdapter {
     removeAnchor(): void;
     setAnchorProperty<T extends keyof HTMLAnchorElement>(name: T, value: HTMLAnchorElement[T]): void;
     setDisabled(value: boolean): void;
-    syncDisabled(value: boolean): void;
     clickAnchor(): void;
     clickHost(): void;
     clickFormButton(type: string): void;
@@ -39,7 +38,6 @@ export declare abstract class BaseButtonAdapter extends BaseAdapter<IBaseButton>
     removeAnchor(): void;
     setAnchorProperty<T extends keyof HTMLAnchorElement>(name: T, value: HTMLAnchorElement[T]): void;
     setDisabled(value: boolean): void;
-    syncDisabled(value: boolean): void;
     clickAnchor(): void;
     clickHost(): void;
     forceFocusVisible(): void;

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

@@ -41,11 +41,20 @@ export class BaseButtonAdapter extends BaseAdapter {
     }
     setDisabled(value) {
         if (this._anchorElement) {
+            if (this.hasHostAttribute('aria-disabled')) {
+                this.removeHostAttribute('aria-disabled');
+            }
+            if (!this._focusIndicatorElement.isConnected) {
+                this._rootElement.append(this._focusIndicatorElement);
+            }
+            if (!this._stateLayerElement.isConnected) {
+                if (this._stateLayerElement.disabled) {
+                    this._stateLayerElement.disabled = false;
+                }
+                this._rootElement.append(this._stateLayerElement);
+            }
             return; // Cannot disable an anchor element
         }
-        this.syncDisabled(value);
-    }
-    syncDisabled(value) {
         if (value) {
             this._focusIndicatorElement.remove();
             this._stateLayerElement.remove();
@@ -209,7 +218,7 @@ export class BaseButtonAdapter extends BaseAdapter {
             // Set default role based on the existence of an anchor element
             this._component.role = this._anchorElement ? 'link' : 'button';
         }
-        this._component[isFocusable] = this._anchorElement || !this._component.disabled;
+        this._component[isFocusable] = !!this._anchorElement || !this._component.disabled;
     }
     /**
      * Our anchor element is the interactive element that will be used to trigger the click event when it is present.

package/esm/button/base/base-button-foundation.js

@@ -144,19 +144,17 @@ export class BaseButtonFoundation {
         return this._disabled;
     }
     set disabled(value) {
-        // If we're in anchor mode, we need to ensure that the anchor is always enabled
+        value = Boolean(value);
+        if (this._disabled === value) {
+            return;
+        }
+        // When we're in anchor mode we need to ensure that the anchor is always enabled
         if (this._anchor) {
-            if (this._disabled) {
-                this._adapter.syncDisabled(false);
-            }
             value = false;
         }
-        value = Boolean(value);
-        if (this._disabled !== value) {
-            this._disabled = value;
-            this._adapter.setDisabled(this._disabled);
-            this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.DISABLED, value);
-        }
+        this._disabled = value;
+        this._adapter.setDisabled(this._disabled);
+        this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.DISABLED, value);
     }
     get popoverIcon() {
         return this._popoverIcon;