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

package/esm/banner/banner.js

@@ -13,7 +13,7 @@ import { TooltipComponent } from '../tooltip';
 import { BannerAdapter } from './banner-adapter';
 import { BANNER_CONSTANTS } from './banner-constants';
 import { BannerFoundation } from './banner-foundation';
-const template = '<template><div class=\"forge-banner\" part=\"root\"><div class=\"forge-banner__container\" part=\"container\"><div class=\"forge-banner__container-wrapper\" part=\"wrapper\"><div class=\"forge-banner__container-wrapper-icon\" part=\"icon-container\"><slot name=\"icon\"></slot></div><div class=\"forge-banner__container-wrapper-subsection\" part=\"subsection-wrapper\"><div class=\"forge-banner__container-wrapper-subsection-text forge-typography--body2\" part=\"subsection-text\"><slot></slot></div><div class=\"forge-banner__container-wrapper-subsection-action\" part=\"action-subsection\"><slot name=\"button\"></slot></div></div></div><forge-icon-button class=\"forge-banner__container-dismiss\" part=\"dismiss-icon-button\" aria-label=\"Dismiss this banner\" part=\"dismiss-button\"><forge-icon name=\"cancel\" part=\"dismiss-button-icon\"></forge-icon></forge-icon-button><forge-tooltip>Dismiss</forge-tooltip></div></div></template>';
+const template = '<template><div class=\"forge-banner\" part=\"root\"><div class=\"forge-banner__container\" part=\"container\"><div class=\"forge-banner__container-wrapper\" part=\"wrapper\"><div class=\"forge-banner__container-wrapper-icon\" part=\"icon-container\"><slot name=\"icon\"></slot></div><div class=\"forge-banner__container-wrapper-subsection\" part=\"subsection-wrapper\"><div class=\"forge-banner__container-wrapper-subsection-text forge-typography--body2\" part=\"subsection-text\"><slot></slot></div><div class=\"forge-banner__container-wrapper-subsection-action\" part=\"action-subsection\"><slot name=\"button\"></slot></div></div></div><forge-icon-button class=\"forge-banner__container-dismiss\" part=\"dismiss-icon-button\" part=\"dismiss-button\"><forge-icon name=\"cancel\" part=\"dismiss-button-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\">Dismiss</forge-tooltip></div></div></template>';
 const styles = '@media (min-width:600px){.forge-banner{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:600px;max-height:600px}.forge-banner.forge-banner--dismissed{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:0}.forge-banner__container{border-bottom-color:#e0e0e0;border-bottom-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom-width:1px;border-bottom-style:solid;min-height:48px;-webkit-box-align:center;align-items:center;padding:0 24px 0 24px}.forge-banner__container-wrapper{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.forge-banner__container-wrapper-icon{margin-right:16px}.forge-banner__container-wrapper-subsection{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center}.forge-banner__container-wrapper-subsection-text{padding:14px 0 14px 0;margin-right:24px}.forge-banner__container-wrapper-subsection-action ::slotted(forge-button){margin-right:16px}.forge-banner__container-dismiss[hidden]{display:none}}@media (max-width:599px){.forge-banner{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:600px;max-height:600px}.forge-banner.forge-banner--dismissed{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:0}.forge-banner__container{border-bottom-color:#e0e0e0;border-bottom-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom-width:1px;border-bottom-style:solid;min-height:48px;padding:16px 12px 16px 12px}.forge-banner__container-wrapper{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-banner__container-wrapper-icon{margin-right:16px}.forge-banner__container-wrapper-subsection{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-banner__container-wrapper-subsection-action ::slotted(forge-button){margin-top:12px}.forge-banner__container-dismiss{margin-top:-12px;margin-right:-12px}.forge-banner__container-dismiss[hidden]{display:none}}:host{display:block}:host([hidden]){display:none}:host(:not([theme])) .forge-banner,:host([theme=\"\"]) .forge-banner,:host([theme=default]) .forge-banner{background:#e8eaf6;background:var(--forge-banner-theme-background,var(--forge-banner-theme-default-background,#e8eaf6));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-default-font-color,rgba(0,0,0,.87)))}:host(:not([theme])) .forge-banner .forge-banner__container-wrapper-icon,:host([theme=\"\"]) .forge-banner .forge-banner__container-wrapper-icon,:host([theme=default]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-default-icon-color,rgba(0,0,0,.54)))}:host(:not([theme])) .forge-banner .forge-banner__container-dismiss,:host([theme=\"\"]) .forge-banner .forge-banner__container-dismiss,:host([theme=default]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-default-icon-color,rgba(0,0,0,.54)))}:host([theme=danger]) .forge-banner{background:#ffcdd2;background:var(--forge-banner-theme-background,var(--forge-banner-theme-danger-background,#ffcdd2));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-danger-font-color,rgba(0,0,0,.87)))}:host([theme=danger]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-danger-icon-color,rgba(0,0,0,.54)))}:host([theme=danger]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-danger-icon-color,rgba(0,0,0,.54)))}:host([theme=warning]) .forge-banner{background:#ffdba6;background:var(--forge-banner-theme-background,var(--forge-banner-theme-warning-background,#ffdba6));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-warning-font-color,rgba(0,0,0,.87)))}:host([theme=warning]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-warning-icon-color,rgba(0,0,0,.54)))}:host([theme=warning]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-warning-icon-color,rgba(0,0,0,.54)))}:host([theme=success]) .forge-banner{background:#a5d6a7;background:var(--forge-banner-theme-background,var(--forge-banner-theme-success-background,#a5d6a7));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-success-font-color,rgba(0,0,0,.87)))}:host([theme=success]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-success-icon-color,rgba(0,0,0,.54)))}:host([theme=success]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-success-icon-color,rgba(0,0,0,.54)))}:host([theme=info-primary]) .forge-banner{background:#bbdefb;background:var(--forge-banner-theme-background,var(--forge-banner-theme-info-primary-background,#bbdefb));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-info-primary-font-color,rgba(0,0,0,.87)))}:host([theme=info-primary]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-primary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-primary]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-primary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-secondary]) .forge-banner{background:#e0e0e0;background:var(--forge-banner-theme-background,var(--forge-banner-theme-info-secondary-background,#e0e0e0));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-info-secondary-font-color,rgba(0,0,0,.87)))}:host([theme=info-secondary]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-secondary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-secondary]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-secondary-icon-color,rgba(0,0,0,.54)))}';
 /**
  * The custom element class behind the `<forge-banner>` element.

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;
@@ -24,7 +23,6 @@ export interface IBaseButtonAdapter extends IBaseAdapter {
     managePopover(): boolean;
     toggleDefaultPopoverIcon(value: boolean): void;
     animateStateLayer(): void;
-    proxyLabel(value: string | null): void;
 }
 export declare abstract class BaseButtonAdapter extends BaseAdapter<IBaseButton> implements IBaseButtonAdapter {
     protected _rootElement: HTMLElement;
@@ -32,14 +30,12 @@ export declare abstract class BaseButtonAdapter extends BaseAdapter<IBaseButton>
     protected _focusIndicatorElement: IFocusIndicatorComponent;
     protected _stateLayerElement: IStateLayerComponent;
     protected _endSlotElement: HTMLSlotElement;
-    private _labelAwareText?;
     constructor(component: IBaseButton);
     initialize(): void;
     initializeAnchor(): void;
     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;
@@ -55,7 +51,6 @@ export declare abstract class BaseButtonAdapter extends BaseAdapter<IBaseButton>
     managePopover(): boolean;
     toggleDefaultPopoverIcon(value: boolean): void;
     animateStateLayer(): void;
-    proxyLabel(value: string | null): void;
     private _locatePopoverTargetElement;
     private _applyHostSemantics;
     /**

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

@@ -3,14 +3,14 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
+import { getShadowElement } from '@tylertech/forge-core';
 import { tylIconArrowDropDown } from '@tylertech/tyler-icons/standard';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { FOCUS_INDICATOR_CONSTANTS } from '../../focus-indicator';
 import { STATE_LAYER_CONSTANTS } from '../../state-layer';
 import { BASE_BUTTON_CONSTANTS } from './base-button-constants';
 import { BUTTON_FORM_ATTRIBUTES, cloneAttributes } from '../../core/utils/reflect-utils';
-import { internals, isFocusable } from '../../constants';
+import { internals, isFocusable, setDefaultAria } from '../../constants';
 import { supportsPopover } from '../../core/utils/feature-detection';
 export class BaseButtonAdapter extends BaseAdapter {
     constructor(component) {
@@ -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();
@@ -54,7 +63,7 @@ export class BaseButtonAdapter extends BaseAdapter {
             this._rootElement.append(this._focusIndicatorElement, this._stateLayerElement);
         }
         this._component[isFocusable] = !value;
-        toggleAttribute(this._component, value, 'aria-disabled', 'true');
+        this._component[setDefaultAria]({ ariaDisabled: value ? 'true' : null });
     }
     clickAnchor() {
         var _a;
@@ -183,12 +192,6 @@ export class BaseButtonAdapter extends BaseAdapter {
         }
         (_a = this._stateLayerElement) === null || _a === void 0 ? void 0 : _a.playAnimation();
     }
-    proxyLabel(value) {
-        var _a;
-        this._labelAwareText = value !== null && value !== void 0 ? value : undefined;
-        const hasAriaLabel = this._component.hasAttribute('aria-label') || !!this._labelAwareText;
-        toggleAttribute(this._component, hasAriaLabel, 'aria-label', (_a = this._component.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : this._labelAwareText);
-    }
     _locatePopoverTargetElement() {
         var _a;
         let popoverElement = (_a = this._component.popoverTargetElement) !== null && _a !== void 0 ? _a : null;
@@ -204,12 +207,9 @@ export class BaseButtonAdapter extends BaseAdapter {
     }
     _applyHostSemantics() {
         const role = this._component.getAttribute('role');
-        // Allow user provided roles to override our default role
-        if (!role || ['button', 'link'].includes(role)) {
-            // 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;
+        const setAttribute = !role || ['button', 'link'].includes(role);
+        this._component[setDefaultAria]({ role: this._anchorElement ? 'link' : 'button' }, { setAttribute });
+        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

@@ -4,37 +4,37 @@
  * License: Apache-2.0
  */
 export declare const BASE_BUTTON_CONSTANTS: {
-    observedAttributes: {
-        TYPE: string;
-        DISABLED: string;
-        POPOVER_ICON: string;
-        ANCHOR: string;
-        HREF: string;
-        TARGET: string;
-        DOWNLOAD: string;
-        REL: string;
-        DENSE: string;
-        TABINDEX: string;
+    readonly observedAttributes: {
+        readonly TYPE: "type";
+        readonly DISABLED: "disabled";
+        readonly POPOVER_ICON: "popover-icon";
+        readonly ANCHOR: "anchor";
+        readonly HREF: "href";
+        readonly TARGET: "target";
+        readonly DOWNLOAD: "download";
+        readonly REL: "rel";
+        readonly DENSE: "dense";
+        readonly TABINDEX: "tabindex";
     };
-    attributes: {
-        TYPE: string;
-        DISABLED: string;
-        POPOVER_ICON: string;
-        ANCHOR: string;
-        HREF: string;
-        TARGET: string;
-        DOWNLOAD: string;
-        REL: string;
-        DENSE: string;
-        TABINDEX: string;
+    readonly attributes: {
+        readonly TYPE: "type";
+        readonly DISABLED: "disabled";
+        readonly POPOVER_ICON: "popover-icon";
+        readonly ANCHOR: "anchor";
+        readonly HREF: "href";
+        readonly TARGET: "target";
+        readonly DOWNLOAD: "download";
+        readonly REL: "rel";
+        readonly DENSE: "dense";
+        readonly TABINDEX: "tabindex";
     };
-    selectors: {
-        ROOT: string;
-        END_SLOT: string;
+    readonly selectors: {
+        readonly ROOT: "[part=root]";
+        readonly END_SLOT: "slot[name=end]";
     };
-    classes: {
-        ROOT: string;
-        POPOVER_ICON: string;
+    readonly classes: {
+        readonly ROOT: "forge-button";
+        readonly POPOVER_ICON: "forge-button__popover-icon";
     };
 };
 export type ButtonType = 'button' | 'submit' | 'reset';

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

@@ -19,7 +19,6 @@ export interface IBaseButtonFoundation extends ICustomElementFoundation {
     dense: boolean;
     click(options: ButtonClickOptions): void;
     focus(options?: ExperimentalFocusOptions): void;
-    proxyLabel(label: string | null): void;
 }
 export declare abstract class BaseButtonFoundation<T extends IBaseButtonAdapter> implements IBaseButtonFoundation {
     protected _adapter: T;
@@ -42,7 +41,6 @@ export declare abstract class BaseButtonFoundation<T extends IBaseButtonAdapter>
      */
     click({ animateStateLayer }?: ButtonClickOptions): void;
     focus(options?: ExperimentalFocusOptions): void;
-    proxyLabel(label: string | null): void;
     protected _onClick(evt: MouseEvent): Promise<void>;
     /**
      * Handle keydown events on the host element to manually trigger click events.

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

@@ -53,13 +53,10 @@ export class BaseButtonFoundation {
     }
     focus(options) {
         this._adapter.focusHost(options);
-        if (options === null || options === void 0 ? void 0 : options.focusVisible) {
+        if ((options === null || options === void 0 ? void 0 : options.focusVisible) !== false) {
             this._adapter.forceFocusVisible();
         }
     }
-    proxyLabel(label) {
-        this._adapter.proxyLabel(label);
-    }
     async _onClick(evt) {
         const isFormType = this._type === 'submit' || this._type === 'reset';
         // Custom elements do not work with the popover* attributes by default so we need to manually
@@ -144,19 +141,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;

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

@@ -3,14 +3,16 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseFocusableComponent } from '../../core/base/base-focusable-component';
-import { ExperimentalFocusOptions, internals } from '../../constants';
-import { IBaseComponent } from '../../core/base/base-component';
+import { IWithFocusable } from '../../core/mixins/focus/with-focusable';
+import { BaseComponent } from '../../core/base/base-component';
+import { ExperimentalFocusOptions } 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/mixins/label/with-label-aware';
+import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+export interface IBaseButton extends IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria {
     type: ButtonType;
     disabled: boolean;
     popoverIcon: boolean;
@@ -25,9 +27,10 @@ export interface IBaseButton extends IBaseComponent {
     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/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-element-internals").WithElementInternalsContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/label/with-label-aware").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/focus/with-focusable").WithFocusableContract> & typeof BaseComponent;
+export declare abstract class BaseButton<T extends BaseButtonFoundation<IBaseButtonAdapter>> extends BaseButtonClass implements IBaseButton {
+    static get observedAttributes(): string[];
     static readonly formAssociated = true;
-    [internals]: ElementInternals;
     protected abstract _foundation: T;
     constructor();
     connectedCallback(): void;
@@ -51,3 +54,4 @@ export declare abstract class BaseButton<T extends BaseButtonFoundation<IBaseBut
     click(): void;
     focus(options: ExperimentalFocusOptions): void;
 }
+export {};

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

@@ -7,14 +7,21 @@ import { __decorate } from "tslib";
 import { coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
 import { tylIconArrowDropDown } from '@tylertech/tyler-icons/standard';
 import { IconRegistry } from '../../icon/icon-registry';
-import { BaseFocusableComponent } from '../../core/base/base-focusable-component';
-import { internals } from '../../constants';
+import { WithFocusable } from '../../core/mixins/focus/with-focusable';
+import { BaseComponent } from '../../core/base/base-component';
+import { internals, setDefaultAria } from '../../constants';
 import { BASE_BUTTON_CONSTANTS } from './base-button-constants';
-export class BaseButton extends BaseFocusableComponent {
+import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+const BaseButtonClass = WithDefaultAria(WithElementInternals(WithLabelAwareness(WithFocusable(BaseComponent))));
+export class BaseButton extends BaseButtonClass {
+    static get observedAttributes() {
+        return Object.values(BASE_BUTTON_CONSTANTS.observedAttributes);
+    }
     constructor() {
         super();
         IconRegistry.define(tylIconArrowDropDown);
-        this[internals] = this.attachInternals();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -24,31 +31,31 @@ export class BaseButton extends BaseFocusableComponent {
         switch (name) {
             case BASE_BUTTON_CONSTANTS.observedAttributes.TYPE:
                 this.type = newValue;
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.DISABLED:
                 this.disabled = coerceBoolean(newValue);
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.POPOVER_ICON:
                 this.popoverIcon = coerceBoolean(newValue);
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.ANCHOR:
                 this.anchor = coerceBoolean(newValue);
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.HREF:
                 this.href = newValue;
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.TARGET:
                 this.target = newValue;
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.DOWNLOAD:
                 this.download = newValue;
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.REL:
                 this.rel = newValue;
-                break;
+                return;
             case BASE_BUTTON_CONSTANTS.observedAttributes.DENSE:
                 this.dense = coerceBoolean(newValue);
-                break;
+                return;
         }
         super.attributeChangedCallback(name, oldValue, newValue);
     }
@@ -56,7 +63,7 @@ export class BaseButton extends BaseFocusableComponent {
         this._foundation.click({ animateStateLayer: true });
     }
     labelChangedCallback(value) {
-        this._foundation.proxyLabel(value);
+        this[setDefaultAria]({ ariaLabel: value }, { setAttribute: !this.hasAttribute('aria-label') });
     }
     get form() {
         return this[internals].form;

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';

package/esm/button/button-constants.js

@@ -8,7 +8,8 @@ const elementName = `${COMPONENT_NAME_PREFIX}button`;
 const observedAttributes = {
     VARIANT: 'variant',
     PILL: 'pill',
-    THEME: 'theme'
+    THEME: 'theme',
+    FULL_WIDTH: 'full-width'
 };
 const attributes = Object.assign({}, observedAttributes);
 export const BUTTON_CONSTANTS = {

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

@@ -10,11 +10,13 @@ export interface IButtonFoundation extends IBaseButtonFoundation {
     variant: ButtonVariant;
     pill: boolean;
     theme: ButtonTheme;
+    fullWidth: boolean;
 }
 export declare class ButtonFoundation extends BaseButtonFoundation<IButtonAdapter> implements IButtonFoundation {
     private _variant;
     private _pill;
     private _theme;
+    private _fullWidth;
     constructor(adapter: IButtonAdapter);
     get variant(): ButtonVariant;
     set variant(value: ButtonVariant);
@@ -22,4 +24,6 @@ export declare class ButtonFoundation extends BaseButtonFoundation<IButtonAdapte
     set pill(value: boolean);
     get theme(): ButtonTheme;
     set theme(value: ButtonTheme);
+    get fullWidth(): boolean;
+    set fullWidth(value: boolean);
 }

package/esm/button/button-foundation.js

@@ -11,6 +11,7 @@ export class ButtonFoundation extends BaseButtonFoundation {
         this._variant = 'text';
         this._pill = false;
         this._theme = 'primary';
+        this._fullWidth = false;
     }
     get variant() {
         return this._variant;
@@ -46,4 +47,13 @@ export class ButtonFoundation extends BaseButtonFoundation {
             this._adapter.setHostAttribute(BUTTON_CONSTANTS.attributes.THEME, this._theme);
         }
     }
+    get fullWidth() {
+        return this._fullWidth;
+    }
+    set fullWidth(value) {
+        if (this._fullWidth !== value) {
+            this._fullWidth = value;
+            this._adapter.toggleHostAttribute(BUTTON_CONSTANTS.attributes.FULL_WIDTH, this._fullWidth);
+        }
+    }
 }

package/esm/button/button.d.ts

@@ -10,6 +10,7 @@ export interface IButtonComponent extends IBaseButton {
     variant: ButtonVariant;
     pill: boolean;
     theme: ButtonTheme;
+    fullWidth: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -28,6 +29,7 @@ declare global {
  *
  * @property {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
  * @property {ButtonVariant} variant - The variant of the button. Defaults to `text`.
+ * @property {boolean} fullWidth - Whether or not the button is full-width.
  * @property {boolean} disabled - Whether or not the button is disabled.
  * @property {boolean} popoverIcon - Whether or not the button shows a built-in popover icon.
  * @property {string} name - The name of the button.
@@ -44,6 +46,7 @@ declare global {
  *
  * @attribute {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
  * @attribute {ButtonVariant} variant - The variant of the button. Defaults to `text`.
+ * @attribute {boolean} full-width - Whether or not the button is full-width.
  * @attribute {boolean} disabled - Whether or not the button is disabled.
  * @attribute {boolean} popover-icon - Whether or not the button shows a built-in popover icon.
  * @attribute {string} name - The name of the button.
@@ -141,4 +144,5 @@ export declare class ButtonComponent extends BaseButton<ButtonFoundation> implem
     variant: ButtonVariant;
     pill: boolean;
     theme: ButtonTheme;
+    fullWidth: boolean;
 }

package/esm/button/button.js

@@ -9,12 +9,12 @@ import { IconComponent } from '../icon';
 import { FocusIndicatorComponent } from '../focus-indicator';
 import { StateLayerComponent } from '../state-layer';
 import { BaseButton } from './base/base-button';
-import { BASE_BUTTON_CONSTANTS } from './base/base-button-constants';
 import { ButtonAdapter } from './button-adapter';
 import { BUTTON_CONSTANTS } from './button-constants';
 import { ButtonFoundation } from './button-foundation';
+import { BASE_BUTTON_CONSTANTS } from './base/base-button-constants';
 const template = '<template><div class=\"forge-button\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"end\"></slot><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
-const styles = ':host{--_button-display:var(--forge-button-display, inline-flex);--_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed)}:host{display:var(--_button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));--_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));--_button-disabled-color:var(--forge-button-disabled, var(--forge-theme-surface-container, #e0e0e0));--_button-padding:var(--forge-button-padding, 8px);--_button-justify:var(--forge-button-justify, center);--_button-shape:var(--forge-button-shape, var(--forge-shape-medium, 4px));--_button-height:var(--forge-button-height, 36px);--_button-min-width:var(--forge-button-min-width, 64px);--_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));--_button-border-width:var(--forge-button-border-width, medium);--_button-border-style:var(--forge-button-border-style, none);--_button-border-color:var(--forge-button-border-color, currentColor);--_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));--_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));--_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));--_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));--_button-padding-block:var(--forge-button-padding-block, var(--_button-padding));--_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));--_button-background:var(--forge-button-background, transparent);--_button-hover-background:var(--forge-button-hover-background, var(--_button-background));--_button-active-background:var(--forge-button-active-background, var(--_button-background));--_button-color:var(--forge-button-color, var(--_button-text-color));--_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_button-shadow:var(--forge-button-shadow, none);--_button-hover-shadow:var(--forge-button-hover-shadow, none);--_button-active-shadow:var(--forge-button-active-shadow, none);--_button-cursor:var(--forge-button-cursor, pointer);--_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-outlined-background:var(--forge-button-outlined-background, var(--_button-background));--_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));--_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));--_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);--_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));--_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));--_button-tonal-color:var(--forge-button-flat-color, var(--forge-theme-on-primary-container, #222c62));--_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));--_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));--_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));--_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));--_button-raised-shadow:var(--forge-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_button-raised-hover-shadow:var(--forge-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_button-raised-active-shadow:var(--forge-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);--_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));--_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);--_button-link-height:var(--forge-button-link-height, auto);--_button-link-padding:var(--forge-button-link-padding, 0);--_button-link-line-height:var(--forge-button-link-line-height, normal);--_button-link-width:var(--forge-button-link-width, auto);--_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);--_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);--_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_button-disabled-background:var(--forge-button-disabled-background, transparent);--_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));--_button-disabled-shadow:var(--forge-button-disabled-shadow, none);--_button-dense-height:var(--forge-button-dense-height, 24px);--_button-pill-shape:var(--forge-button-pill-shape, var(--forge-shape-full, 9999px));--_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));--_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);--_button-text-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 0px);--_button-link-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 2px);--_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg)}.forge-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);position:relative;display:var(--_button-display);-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_button-justify);justify-content:var(--_button-justify);gap:var(--_button-spacing);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;min-inline-size:var(--_button-min-width);height:var(--_button-height);inline-size:100%;border-width:var(--_button-border-width);border-style:var(--_button-border-style);border-color:var(--_button-border-color);border-start-start-radius:var(--_button-shape-start-start-radius);border-start-end-radius:var(--_button-shape-start-end-radius);border-end-start-radius:var(--_button-shape-end-start-radius);border-end-end-radius:var(--_button-shape-end-end-radius);padding-block:var(--_button-padding-block);padding-inline:var(--_button-padding-inline);-webkit-box-shadow:var(--_button-shadow);box-shadow:var(--_button-shadow);outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;white-space:nowrap;background:var(--_button-background);color:var(--_button-color);cursor:var(--_button-cursor);-webkit-transition-property:background,-webkit-box-shadow;transition-property:background,-webkit-box-shadow;transition-property:box-shadow,background;transition-property:box-shadow,background,-webkit-box-shadow;-webkit-transition-duration:var(--_button-transition-duration);transition-duration:var(--_button-transition-duration);-webkit-transition-timing-function:var(--_button-transition-timing);transition-timing-function:var(--_button-transition-timing)}.forge-button::-moz-focus-inner{padding:0;border:0}.forge-button:hover{--_button-shadow:var(--_button-hover-shadow);background:var(--_button-hover-background)}.forge-button:active{--_button-shadow:var(--_button-active-shadow);background:var(--_button-active-background)}.forge-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_button-icon-size)}a{position:absolute;inset:0;text-decoration:none}forge-state-layer{--forge-state-layer-color:var(--_button-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_button-primary-color);--forge-focus-indicator-outward-offset:var(--_button-focus-indicator-offset)}:host([theme=secondary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-secondary-container, #fff0c3));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-secondary-container, #8a6804))}:host([theme=tertiary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-tertiary-container, #d0d7ff));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-tertiary-container, #213189))}:host([theme=success]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-success, #2e7d32))}:host([theme=success][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-success-container, #cde0ce));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-success-container, #19441b))}:host([theme=error]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-error, #b00020))}:host([theme=error][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-error-container, #ecc2c9));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-error-container, #5f0011))}:host([theme=warning]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-warning, #d14900))}:host([theme=warning][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-warning-container, #f4d3c2));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-warning-container, #712700))}:host([theme=info]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-info, #1565c0))}:host([theme=info][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-info-container, #c7daf0));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-info-container, #0b3768))}:host(:is(:not([variant],[variant=text]))) .forge-button{--_button-focus-indicator-offset:var(--_button-text-focus-indicator-offset)}:host(:is([variant=filled],[variant=raised])) .forge-button{--_button-background:var(--_button-filled-background);--_button-color:var(--_button-filled-color)}:host(:is([variant=filled],[variant=raised])) forge-state-layer{--forge-state-layer-color:var(--_button-filled-color)}:host([variant=raised]) .forge-button{--_button-shadow:var(--_button-raised-shadow)}:host([variant=raised]) .forge-button:hover{--_button-shadow:var(--_button-raised-hover-shadow)}:host([variant=raised]) .forge-button:active{--_button-shadow:var(--_button-raised-active-shadow)}:host([variant=tonal]) .forge-button{--_button-background:var(--_button-tonal-background);--_button-color:var(--_button-tonal-color)}:host([variant=tonal]) forge-state-layer{--forge-state-layer-color:var(--_button-tonal-color)}:host([variant=outlined]) .forge-button{--_button-background:var(--_button-outlined-background);--_button-color:var(--_button-outlined-color);--_button-border-width:var(--_button-outlined-border-width);--_button-border-style:var(--_button-outlined-border-style);--_button-border-color:var(--_button-outlined-border-color)}:host([variant=link]) .forge-button{--_button-color:var(--_button-link-color);--_button-height:var(--_button-link-height);--_button-padding:var(--_button-link-padding);--_button-focus-indicator-offset:var(--_button-link-focus-indicator-offset);-webkit-text-decoration:var(--_button-link-text-decoration);text-decoration:var(--_button-link-text-decoration);line-height:var(--_button-link-line-height);-webkit-transition:opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);transition:opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);inline-size:var(--_button-link-width)}:host([variant=link]) .forge-button:hover{-webkit-text-decoration:var(--_button-link-hover-text-decoration);text-decoration:var(--_button-link-hover-text-decoration)}:host([variant=link]) .forge-button:active{opacity:var(--_button-link-active-opacity)}:host([dense]) .forge-button{--_button-height:var(--_button-dense-height)}:host([pill]) .forge-button{--_button-shape:var(--_button-pill-shape);--_button-padding-inline:var(--_button-pill-padding-inline)}:host([pill]) forge-focus-indicator{--forge-focus-indicator-shape:var(--_button-pill-shape)}:host(:not([anchor])[disabled]){cursor:var(--_button-disabled-cursor)}:host(:not([anchor])[disabled]) .forge-button{--_button-background:var(--_button-disabled-background);--_button-color:var(--_button-disabled-text-color);--_button-shadow:var(--_button-disabled-shadow);pointer-events:none}:host(:not([anchor])[variant=outlined][disabled]) .forge-button{--_button-border-color:var(--_button-disabled-border-color)}:host(:not([anchor])[variant=tonal][disabled]) .forge-button{--_button-background:var(--_button-tonal-disabled-background);--_button-color:var(--_button-tonal-disabled-color)}:host(:not([anchor]):is([variant=filled],[variant=raised])[disabled]) .forge-button{--_button-background:var(--_button-filled-disabled-background);--_button-color:var(--_button-filled-disabled-color)}:host(:not([anchor])[variant=raised][disabled]) .forge-button{--_button-shadow:var(--_button-raised-disabled-shadow)}:host([popover-icon]) .forge-button__popover-icon{-webkit-transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing);transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing)}:host([popover-icon][aria-expanded=true]) .forge-button__popover-icon{rotate:var(--_button-popover-icon-open-rotation)}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_button-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}';
+const styles = ':host{--_button-display:var(--forge-button-display, inline-flex);--_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed)}:host{display:var(--_button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));--_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));--_button-disabled-color:var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));--_button-padding:var(--forge-button-padding, 8px);--_button-justify:var(--forge-button-justify, center);--_button-shape:var(--forge-button-shape, var(--forge-shape-medium, 4px));--_button-height:var(--forge-button-height, 36px);--_button-min-width:var(--forge-button-min-width, 64px);--_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));--_button-border-width:var(--forge-button-border-width, medium);--_button-border-style:var(--forge-button-border-style, none);--_button-border-color:var(--forge-button-border-color, currentColor);--_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));--_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));--_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));--_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));--_button-padding-block:var(--forge-button-padding-block, var(--_button-padding));--_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));--_button-background:var(--forge-button-background, transparent);--_button-hover-background:var(--forge-button-hover-background, var(--_button-background));--_button-active-background:var(--forge-button-active-background, var(--_button-background));--_button-color:var(--forge-button-color, var(--_button-text-color));--_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_button-shadow:var(--forge-button-shadow, none);--_button-hover-shadow:var(--forge-button-hover-shadow, none);--_button-active-shadow:var(--forge-button-active-shadow, none);--_button-cursor:var(--forge-button-cursor, pointer);--_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-outlined-background:var(--forge-button-outlined-background, var(--_button-background));--_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));--_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));--_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);--_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));--_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));--_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));--_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));--_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));--_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));--_button-raised-shadow:var(--forge-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_button-raised-hover-shadow:var(--forge-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_button-raised-active-shadow:var(--forge-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);--_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));--_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);--_button-link-height:var(--forge-button-link-height, auto);--_button-link-padding:var(--forge-button-link-padding, 0);--_button-link-line-height:var(--forge-button-link-line-height, normal);--_button-link-width:var(--forge-button-link-width, auto);--_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);--_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);--_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_button-disabled-background:var(--forge-button-disabled-background, transparent);--_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));--_button-disabled-shadow:var(--forge-button-disabled-shadow, none);--_button-dense-height:var(--forge-button-dense-height, 24px);--_button-pill-shape:var(--forge-button-pill-shape, var(--forge-shape-full, 9999px));--_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));--_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);--_button-text-focus-indicator-offset:var(--forge-button-text-focus-indicator-offset, 0px);--_button-link-focus-indicator-offset:var(--forge-button-link-focus-indicator-offset, 2px);--_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg)}.forge-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);position:relative;display:var(--_button-display);-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_button-justify);justify-content:var(--_button-justify);gap:var(--_button-spacing);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;min-inline-size:var(--_button-min-width);height:var(--_button-height);inline-size:100%;border-width:var(--_button-border-width);border-style:var(--_button-border-style);border-color:var(--_button-border-color);border-start-start-radius:var(--_button-shape-start-start-radius);border-start-end-radius:var(--_button-shape-start-end-radius);border-end-start-radius:var(--_button-shape-end-start-radius);border-end-end-radius:var(--_button-shape-end-end-radius);padding-block:var(--_button-padding-block);padding-inline:var(--_button-padding-inline);-webkit-box-shadow:var(--_button-shadow);box-shadow:var(--_button-shadow);outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;white-space:nowrap;background:var(--_button-background);color:var(--_button-color);cursor:var(--_button-cursor);-webkit-transition-property:background,-webkit-box-shadow;transition-property:background,-webkit-box-shadow;transition-property:box-shadow,background;transition-property:box-shadow,background,-webkit-box-shadow;-webkit-transition-duration:var(--_button-transition-duration);transition-duration:var(--_button-transition-duration);-webkit-transition-timing-function:var(--_button-transition-timing);transition-timing-function:var(--_button-transition-timing)}.forge-button::-moz-focus-inner{padding:0;border:0}.forge-button:hover{--_button-shadow:var(--_button-hover-shadow);background:var(--_button-hover-background)}.forge-button:active{--_button-shadow:var(--_button-active-shadow);background:var(--_button-active-background)}.forge-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_button-icon-size)}a{position:absolute;inset:0;text-decoration:none}forge-state-layer{--forge-state-layer-color:var(--_button-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_button-primary-color);--forge-focus-indicator-outward-offset:var(--_button-focus-indicator-offset)}:host([theme=secondary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary]:is([variant=filled],[variant=raised])) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-secondary-container, #fff0c3));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-secondary-container, #8a6804))}:host([theme=tertiary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary]:is([variant=filled],[variant=raised])) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-tertiary-container, #d0d7ff));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-tertiary-container, #213189))}:host([theme=success]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-success, #2e7d32))}:host([theme=success]:is([variant=filled],[variant=raised])) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-success-container, #cde0ce));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-success-container, #19441b))}:host([theme=error]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-error, #b00020))}:host([theme=error]:is([variant=filled],[variant=raised])) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-error-container, #ecc2c9));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-error-container, #5f0011))}:host([theme=warning]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-warning, #d14900))}:host([theme=warning]:is([variant=filled],[variant=raised])) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-warning-container, #f4d3c2));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-warning-container, #712700))}:host([theme=info]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-info, #1565c0))}:host([theme=info]:is([variant=filled],[variant=raised])) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-info-container, #c7daf0));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-info-container, #0b3768))}:host(:is(:not([variant],[variant=text]))) .forge-button{--_button-focus-indicator-offset:var(--_button-text-focus-indicator-offset)}:host(:is([variant=filled],[variant=raised])) .forge-button{--_button-background:var(--_button-filled-background);--_button-color:var(--_button-filled-color)}:host(:is([variant=filled],[variant=raised])) forge-state-layer{--forge-state-layer-color:var(--_button-filled-color)}:host([variant=raised]) .forge-button{--_button-shadow:var(--_button-raised-shadow)}:host([variant=raised]) .forge-button:hover{--_button-shadow:var(--_button-raised-hover-shadow)}:host([variant=raised]) .forge-button:active{--_button-shadow:var(--_button-raised-active-shadow)}:host([variant=tonal]) .forge-button{--_button-background:var(--_button-tonal-background);--_button-color:var(--_button-tonal-color)}:host([variant=tonal]) forge-state-layer{--forge-state-layer-color:var(--_button-tonal-color)}:host([variant=outlined]) .forge-button{--_button-background:var(--_button-outlined-background);--_button-color:var(--_button-outlined-color);--_button-border-width:var(--_button-outlined-border-width);--_button-border-style:var(--_button-outlined-border-style);--_button-border-color:var(--_button-outlined-border-color)}:host([variant=link]) .forge-button{--_button-color:var(--_button-link-color);--_button-height:var(--_button-link-height);--_button-padding:var(--_button-link-padding);--_button-focus-indicator-offset:var(--_button-link-focus-indicator-offset);-webkit-text-decoration:var(--_button-link-text-decoration);text-decoration:var(--_button-link-text-decoration);line-height:var(--_button-link-line-height);-webkit-transition:opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);transition:opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);inline-size:var(--_button-link-width)}:host([variant=link]) .forge-button:hover{-webkit-text-decoration:var(--_button-link-hover-text-decoration);text-decoration:var(--_button-link-hover-text-decoration)}:host([variant=link]) .forge-button:active{opacity:var(--_button-link-active-opacity)}:host([full-width]){width:100%}:host([dense]) .forge-button{--_button-height:var(--_button-dense-height)}:host([pill]) .forge-button{--_button-shape:var(--_button-pill-shape);--_button-padding-inline:var(--_button-pill-padding-inline)}:host([pill]) forge-focus-indicator{--forge-focus-indicator-shape:var(--_button-pill-shape)}:host(:not([anchor])[disabled]){cursor:var(--_button-disabled-cursor)}:host(:not([anchor])[disabled]) .forge-button{--_button-background:var(--_button-disabled-background);--_button-color:var(--_button-disabled-text-color);--_button-shadow:var(--_button-disabled-shadow);pointer-events:none}:host(:not([anchor])[variant=outlined][disabled]) .forge-button{--_button-border-color:var(--_button-disabled-border-color)}:host(:not([anchor])[variant=tonal][disabled]) .forge-button{--_button-background:var(--_button-tonal-disabled-background);--_button-color:var(--_button-tonal-disabled-color)}:host(:not([anchor]):is([variant=filled],[variant=raised])[disabled]) .forge-button{--_button-background:var(--_button-filled-disabled-background);--_button-color:var(--_button-filled-disabled-color)}:host(:not([anchor])[variant=raised][disabled]) .forge-button{--_button-shadow:var(--_button-raised-disabled-shadow)}:host([popover-icon]) .forge-button__popover-icon{-webkit-transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing);transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing)}:host([popover-icon][aria-expanded=true]) .forge-button__popover-icon{rotate:var(--_button-popover-icon-open-rotation)}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_button-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}';
 /**
  * @tag forge-button
  *
@@ -27,6 +27,7 @@ const styles = ':host{--_button-display:var(--forge-button-display, inline-flex)
  *
  * @property {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
  * @property {ButtonVariant} variant - The variant of the button. Defaults to `text`.
+ * @property {boolean} fullWidth - Whether or not the button is full-width.
  * @property {boolean} disabled - Whether or not the button is disabled.
  * @property {boolean} popoverIcon - Whether or not the button shows a built-in popover icon.
  * @property {string} name - The name of the button.
@@ -43,6 +44,7 @@ const styles = ':host{--_button-display:var(--forge-button-display, inline-flex)
  *
  * @attribute {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
  * @attribute {ButtonVariant} variant - The variant of the button. Defaults to `text`.
+ * @attribute {boolean} full-width - Whether or not the button is full-width.
  * @attribute {boolean} disabled - Whether or not the button is disabled.
  * @attribute {boolean} popover-icon - Whether or not the button shows a built-in popover icon.
  * @attribute {string} name - The name of the button.
@@ -155,6 +157,9 @@ let ButtonComponent = class ButtonComponent extends BaseButton {
             case BUTTON_CONSTANTS.observedAttributes.THEME:
                 this.theme = newValue;
                 return;
+            case BUTTON_CONSTANTS.observedAttributes.FULL_WIDTH:
+                this.fullWidth = coerceBoolean(newValue);
+                return;
         }
         super.attributeChangedCallback(name, oldValue, newValue);
     }
@@ -168,6 +173,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], ButtonComponent.prototype, "theme", void 0);
+__decorate([
+    FoundationProperty()
+], ButtonComponent.prototype, "fullWidth", void 0);
 ButtonComponent = __decorate([
     CustomElement({
         name: BUTTON_CONSTANTS.elementName,