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

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

@@ -11,15 +11,12 @@ export interface IBaseButtonAdapter extends IBaseAdapter {
     initialize(): void;
     initializeAnchor(): void;
     removeAnchor(): void;
-    setAnchorHref(href: string): void;
-    setAnchorTarget(target: string): void;
-    setAnchorDownload(value: string): void;
-    setAnchorRel(value: string): 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;
+    forceFocusVisible(): void;
     addAnchorEventListener(type: string, listener: EventListener): void;
     removeAnchorEventListener(type: string, listener: EventListener): void;
     hasPopoverTarget(): boolean;
@@ -39,14 +36,11 @@ export declare abstract class BaseButtonAdapter extends BaseAdapter<IBaseButton>
     initialize(): void;
     initializeAnchor(): void;
     removeAnchor(): void;
-    setAnchorHref(href: string): void;
-    setAnchorTarget(target: string): void;
-    setAnchorDownload(value: string): void;
-    setAnchorRel(value: string): 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;
     clickFormButton(type: string): void;
     addAnchorEventListener(type: string, listener: EventListener): void;
     removeAnchorEventListener(type: string, listener: EventListener): void;

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

@@ -34,33 +34,27 @@ export class BaseButtonAdapter extends BaseAdapter {
         this._anchorElement = undefined;
         this._applyHostSemantics();
     }
-    setAnchorHref(href) {
+    setAnchorProperty(name, value) {
         if (this._anchorElement) {
-            this._anchorElement.href = href;
-        }
-    }
-    setAnchorTarget(target) {
-        if (this._anchorElement) {
-            this._anchorElement.target = target;
-        }
-    }
-    setAnchorDownload(value) {
-        if (this._anchorElement) {
-            this._anchorElement.download = value;
-        }
-    }
-    setAnchorRel(value) {
-        if (this._anchorElement) {
-            this._anchorElement.rel = value;
+            this._anchorElement[name] = value;
         }
     }
     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();
@@ -80,6 +74,9 @@ export class BaseButtonAdapter extends BaseAdapter {
         // recursion since the host overrides the HTMLElement.click() method
         HTMLElement.prototype.click.call(this._component);
     }
+    forceFocusVisible() {
+        this._focusIndicatorElement.active = true;
+    }
     clickFormButton(type) {
         var _a;
         if (!this._component.form) {
@@ -221,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-constants.d.ts

@@ -39,3 +39,6 @@ export declare const BASE_BUTTON_CONSTANTS: {
 };
 export type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonTarget = '_blank' | '_self' | '_parent' | '_top';
+export type ButtonClickOptions = {
+    animateStateLayer?: boolean;
+};

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

@@ -4,8 +4,9 @@
  * License: Apache-2.0
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { ExperimentalFocusOptions } from '../../constants';
 import { IBaseButtonAdapter } from './base-button-adapter';
-import { ButtonType } from './base-button-constants';
+import { ButtonClickOptions, ButtonType } from './base-button-constants';
 export interface IBaseButtonFoundation extends ICustomElementFoundation {
     type: ButtonType;
     disabled: boolean;
@@ -16,9 +17,8 @@ export interface IBaseButtonFoundation extends ICustomElementFoundation {
     download: string;
     rel: string;
     dense: boolean;
-    click(options: {
-        animateStateLayer: boolean;
-    }): void;
+    click(options: ButtonClickOptions): void;
+    focus(options?: ExperimentalFocusOptions): void;
     proxyLabel(label: string | null): void;
 }
 export declare abstract class BaseButtonFoundation<T extends IBaseButtonAdapter> implements IBaseButtonFoundation {
@@ -40,9 +40,8 @@ export declare abstract class BaseButtonFoundation<T extends IBaseButtonAdapter>
     /**
      * Handles overriding the the `click()` method on the HTMLElement instance
      */
-    click({ animateStateLayer }?: {
-        animateStateLayer?: boolean | undefined;
-    }): void;
+    click({ animateStateLayer }?: ButtonClickOptions): void;
+    focus(options?: ExperimentalFocusOptions): void;
     proxyLabel(label: string | null): void;
     protected _onClick(evt: MouseEvent): Promise<void>;
     /**

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

@@ -51,6 +51,12 @@ export class BaseButtonFoundation {
             this._adapter.animateStateLayer();
         }
     }
+    focus(options) {
+        this._adapter.focusHost(options);
+        if (options === null || options === void 0 ? void 0 : options.focusVisible) {
+            this._adapter.forceFocusVisible();
+        }
+    }
     proxyLabel(label) {
         this._adapter.proxyLabel(label);
     }
@@ -138,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;
@@ -186,7 +190,7 @@ export class BaseButtonFoundation {
             this._href = value;
             this.anchor = this._href.length > 0;
             if (this._anchor) {
-                this._adapter.setAnchorHref(this._href);
+                this._adapter.setAnchorProperty('href', this._href);
             }
             this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.HREF, !!this._href, this._href);
         }
@@ -197,7 +201,7 @@ export class BaseButtonFoundation {
     set target(value) {
         if (this._target !== value) {
             this._target = value !== null && value !== void 0 ? value : '_self';
-            this._adapter.setAnchorTarget(value);
+            this._adapter.setAnchorProperty('target', value);
             this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.TARGET, !!this._target, this._target);
         }
     }
@@ -207,7 +211,7 @@ export class BaseButtonFoundation {
     set download(value) {
         if (this._download !== value) {
             this._download = value;
-            this._adapter.setAnchorDownload(this._download);
+            this._adapter.setAnchorProperty('download', this._download);
             this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.DOWNLOAD, !!this._download, this._download);
         }
     }
@@ -217,7 +221,7 @@ export class BaseButtonFoundation {
     set rel(value) {
         if (this._rel !== value) {
             this._rel = value;
-            this._adapter.setAnchorRel(this._rel);
+            this._adapter.setAnchorProperty('rel', this._rel);
             this._adapter.toggleHostAttribute(BASE_BUTTON_CONSTANTS.attributes.REL, !!this._rel, this._rel);
         }
     }

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

@@ -3,14 +3,14 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseFocusableComponent } from '../../core/base/base-focusable-component';
-import { internals } from '../../constants';
-import { IBaseComponent } from '../../core/base/base-component';
+import { IWithFocusable } from '../../core/base/base-focusable-component';
+import { BaseComponent } from '../../core/base/base-component';
+import { ExperimentalFocusOptions, internals } from '../../constants';
 import { IBaseButtonAdapter } from './base-button-adapter';
 import { ButtonType } from './base-button-constants';
 import { BaseButtonFoundation } from './base-button-foundation';
-import { ILabelAware } from '../../label/label-aware';
-export interface IBaseButton extends IBaseComponent {
+import { IWithLabelAwareness } from '../../core/base/base-label-aware-component';
+export interface IBaseButton extends IWithFocusable, IWithLabelAwareness {
     type: ButtonType;
     disabled: boolean;
     popoverIcon: boolean;
@@ -23,8 +23,10 @@ export interface IBaseButton extends IBaseComponent {
     download: string;
     rel: string;
     form: HTMLFormElement | null;
+    focus(options?: ExperimentalFocusOptions): void;
 }
-export declare abstract class BaseButton<T extends BaseButtonFoundation<IBaseButtonAdapter>> extends BaseFocusableComponent implements IBaseButton, ILabelAware {
+declare const BaseButtonClass: import("../../constants").AbstractConstructor<import("../../core/base/base-label-aware-component").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/base/base-focusable-component").WithFocusableContract> & typeof BaseComponent;
+export declare abstract class BaseButton<T extends BaseButtonFoundation<IBaseButtonAdapter>> extends BaseButtonClass implements IBaseButton {
     static readonly formAssociated = true;
     [internals]: ElementInternals;
     protected abstract _foundation: T;
@@ -48,4 +50,6 @@ export declare abstract class BaseButton<T extends BaseButtonFoundation<IBaseBut
     rel: string;
     dense: boolean;
     click(): void;
+    focus(options: ExperimentalFocusOptions): void;
 }
+export {};

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

@@ -5,12 +5,18 @@
  */
 import { __decorate } from "tslib";
 import { coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
-import { BaseFocusableComponent } from '../../core/base/base-focusable-component';
+import { tylIconArrowDropDown } from '@tylertech/tyler-icons/standard';
+import { IconRegistry } from '../../icon/icon-registry';
+import { WithFocusable } from '../../core/base/base-focusable-component';
+import { BaseComponent } from '../../core/base/base-component';
 import { internals } from '../../constants';
 import { BASE_BUTTON_CONSTANTS } from './base-button-constants';
-export class BaseButton extends BaseFocusableComponent {
+import { WithLabelAwareness } from '../../core/base/base-label-aware-component';
+const BaseButtonClass = WithLabelAwareness(WithFocusable(BaseComponent));
+export class BaseButton extends BaseButtonClass {
     constructor() {
         super();
+        IconRegistry.define(tylIconArrowDropDown);
         this[internals] = this.attachInternals();
     }
     connectedCallback() {
@@ -75,6 +81,9 @@ export class BaseButton extends BaseFocusableComponent {
     click() {
         this._foundation.click({ animateStateLayer: true });
     }
+    focus(options) {
+        this._foundation.focus(options);
+    }
 }
 BaseButton.formAssociated = true;
 __decorate([

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

@@ -10,11 +10,13 @@ export declare const BUTTON_CONSTANTS: {
         VARIANT: string;
         PILL: string;
         THEME: string;
+        FULL_WIDTH: string;
     };
     attributes: {
         VARIANT: string;
         PILL: string;
         THEME: string;
+        FULL_WIDTH: string;
     };
 };
 export type ButtonVariant = 'text' | 'outlined' | 'tonal' | 'filled' | 'raised' | 'link';