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

package/esm/button/button.d.ts

@@ -3,9 +3,13 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface IButtonComponent extends IBaseComponent {
-    type: string;
+import { BaseButton, IBaseButton } from './base/base-button';
+import { ButtonTheme, ButtonVariant } from './button-constants';
+import { ButtonFoundation } from './button-foundation';
+export interface IButtonComponent extends IBaseButton {
+    variant: ButtonVariant;
+    pill: boolean;
+    theme: ButtonTheme;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -13,36 +17,128 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-button>` element.
- *
  * @tag forge-button
+ *
+ * @summary Buttons represent actions that a user can take.
+ *
+ * @description
+ * Buttons are used when a user needs to take an action, such as submitting a form or opening a dialog.
+ * Buttons can be used to trigger an action or to navigate to a new location. Buttons can be styled with
+ * a variety of themes and variants.
+ *
+ * @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} 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.
+ * @property {string} value - The form value of the button.
+ * @property {boolean} dense - Whether or not the button is dense.
+ * @property {boolean} anchor - Whether or not the button is an `<a>` element.
+ * @property {string} href - The href of the anchor.
+ * @property {string} target - The target of the anchor.
+ * @property {string} download - The download of the anchor.
+ * @property {string} rel - The rel of the anchor.
+ * @property {HTMLFormElement | null} form - The form reference of the button if within a `<form>` element.
+ * @property {boolean} pill - Whether or not the button is pill-shaped.
+ * @property {ButtonTheme} theme - The theme of the button. Defaults to `primary`.
+ *
+ * @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} 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.
+ * @attribute {string} value - The form value of the button.
+ * @attribute {boolean} dense - Whether or not the button is dense.
+ * @attribute {boolean} anchor - Whether or not the button is an `<a>` element.
+ * @attribute {string} href - The href of the anchor.
+ * @attribute {string} target - The target of the anchor.
+ * @attribute {string} download - The download of the anchor.
+ * @attribute {string} rel - The rel of the anchor.
+ * @attribute {boolean} pill - Whether or not the button is pill-shaped.
+ * @attribute {ButtonTheme} theme - The theme of the button. Defaults to `primary`.
+ *
+ * @event {Event} click - Fires when the button is clicked.
+ *
+ * @cssproperty --forge-button-primary-color - The primary color of the button.
+ * @cssproperty --forge-button-text-color - The text color of the button. Inherits from primary color.
+ * @cssproperty --forge-button-disabled-color - The disabled color of the button.
+ * @cssproperty --forge-button-padding - The padding of the button.
+ * @cssproperty --forge-button-display - The display of the button.
+ * @cssproperty --forge-button-justify - The flex justify of the button.
+ * @cssproperty --forge-button-shape - The shape of the button.
+ * @cssproperty --forge-button-height - The height of the button.
+ * @cssproperty --forge-button-min-width - The min-width of the button.
+ * @cssproperty --forge-button-spacing - The spacing of the button.
+ * @cssproperty --forge-button-border-width - The border-width of the button.
+ * @cssproperty --forge-button-border-style - The border style of the button.
+ * @cssproperty --forge-button-border-color - The border color of the button.
+ * @cssproperty --forge-button-shape-start-start-radius - The shape start start radius of the button.
+ * @cssproperty --forge-button-shape-start-end-radius - The shape start end radius of the button.
+ * @cssproperty --forge-button-shape-end-start-radius - The shape end start radius of the button.
+ * @cssproperty --forge-button-shape-end-end-radius - The shape end end radius of the button.
+ * @cssproperty --forge-button-padding-block - The padding block of the button.
+ * @cssproperty --forge-button-padding-inline - The padding inline of the button.
+ * @cssproperty --forge-button-background - The background color of the button.
+ * @cssproperty --forge-button-hover-background - The background color of the button on hover.
+ * @cssproperty --forge-button-active-background - The background color of the button on active state.
+ * @cssproperty --forge-button-color - The text color of the button.
+ * @cssproperty --forge-button-icon-size - The size of the icon in the button.
+ * @cssproperty --forge-button-shadow - The shadow of the button.
+ * @cssproperty --forge-button-hover-shadow - The shadow of the button on hover.
+ * @cssproperty --forge-button-active-shadow - The shadow of the button on active state.
+ * @cssproperty --forge-button-cursor - The cursor type of the button.
+ * @cssproperty --forge-button-raised-background - The background color of the raised button.
+ * @cssproperty --forge-button-raised-disabled-background - The background color of the disabled raised button.
+ * @cssproperty --forge-button-raised-color - The text color of the raised button.
+ * @cssproperty --forge-button-raised-disabled-color - The text color of the disabled raised button.
+ * @cssproperty --forge-button-raised-shadow - The shadow of the raised button.
+ * @cssproperty --forge-button-raised-hover-shadow - The shadow of the raised button on hover.
+ * @cssproperty --forge-button-raised-active-shadow - The shadow of the raised button on active state.
+ * @cssproperty --forge-button-raised-disabled-shadow - The shadow of the disabled raised button.
+ * @cssproperty --forge-button-raised-transition-duration - The transition duration of the raised button.
+ * @cssproperty --forge-button-raised-transition-timing - The transition timing of the raised button.
+ * @cssproperty --forge-button-flat-background - The background color of the flat button.
+ * @cssproperty --forge-button-flat-disabled-background - The background color of the disabled flat button.
+ * @cssproperty --forge-button-flat-color - The text color of the flat button.
+ * @cssproperty --forge-button-flat-disabled-color - The text color of the disabled flat button.
+ * @cssproperty --forge-button-outlined-background - The background color of the outlined button.
+ * @cssproperty --forge-button-outlined-color - The text color of the outlined button.
+ * @cssproperty --forge-button-outlined-border-width - The border width of the outlined button.
+ * @cssproperty --forge-button-outlined-border-style - The border style of the outlined button.
+ * @cssproperty --forge-button-outlined-border-color - The border color of the outlined button.
+ * @cssproperty --forge-button-link-color - The text color of the link button.
+ * @cssproperty --forge-button-link-text-decoration - The text decoration of the link button.
+ * @cssproperty --forge-button-link-height - The height of the link button.
+ * @cssproperty --forge-button-link-padding - The padding of the link button.
+ * @cssproperty --forge-button-link-line-height - The line height of the link button.
+ * @cssproperty --forge-button-link-width - The width of the link button.
+ * @cssproperty --forge-button-link-hover-text-decoration - The text decoration of the link button on hover.
+ * @cssproperty --forge-button-link-active-opacity - The opacity of the link button on active state.
+ * @cssproperty --forge-button-link-transition-duration - The transition duration of the link button.
+ * @cssproperty --forge-button-link-transition-timing - The transition timing of the link button.
+ * @cssproperty --forge-button-disabled-cursor - The cursor type of the disabled button.
+ * @cssproperty --forge-button-disabled-text-color - The text color of the disabled button.
+ * @cssproperty --forge-button-disabled-background - The background color of the disabled button.
+ * @cssproperty --forge-button-disabled-border-color - The border color of the disabled button.
+ * @cssproperty --forge-button-disabled-shadow - The shadow of the disabled button.
+ * @cssproperty --forge-button-dense-height - The height of the dense button.
+ * @cssproperty --forge-button-pill-shape - The shape of the pill button.
+ * @cssproperty --forge-button-pill-padding-inline - The inline padding of the pill button.
+ *
+ * @csspart root - The root container element.
+ * @csspart focus-indicator - The focus-indicator indicator element.
+ * @csspart state-layer - The state-layer surface element.
+ *
+ * @slot - This is a default/unnamed slot for the label text.
+ * @slot start - Elements to logically render before the label text.
+ * @slot end - Elements to logically render after the label text.
  */
-export declare class ButtonComponent extends BaseComponent implements IButtonComponent {
+export declare class ButtonComponent extends BaseButton<ButtonFoundation> implements IButtonComponent {
     static get observedAttributes(): string[];
-    private _rippleInstance;
-    private _buttonElement;
-    private _type;
-    private _mutationObserver;
-    private _buttonAttrMutationObserver;
-    private _destroyUserInteractionListener;
+    protected readonly _foundation: ButtonFoundation;
     constructor();
-    connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    disconnectedCallback(): void;
-    /**
-     * Sets the type of button decoration.
-     * Possible values are: raised, elevated, outlined, and dense.
-     * Can be combined as: outlined-dense.
-     */
-    get type(): string;
-    set type(value: string);
-    private _applyType;
-    private _initialize;
-    private _initializeButton;
-    private _deferRippleInitialization;
-    private _createRipple;
-    private _initializeButtonChildren;
-    private _initializeMutationObserver;
-    private _buttonWasAdded;
-    private _syncDisabledState;
+    variant: ButtonVariant;
+    pill: boolean;
+    theme: ButtonTheme;
 }

package/esm/button/button.js

@@ -4,179 +4,178 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, ensureChildren, toggleAttribute } from '@tylertech/forge-core';
-import { BaseComponent } from '../core/base/base-component';
-import { ALLOWED_CHILDREN, BUTTON_CONSTANTS } from './button-constants';
-import { createUserInteractionListener } from '../core/utils/utils';
-import { ForgeRipple } from '../ripple';
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+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';
+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}';
 /**
- * The custom element class behind the `<forge-button>` element.
- *
  * @tag forge-button
+ *
+ * @summary Buttons represent actions that a user can take.
+ *
+ * @description
+ * Buttons are used when a user needs to take an action, such as submitting a form or opening a dialog.
+ * Buttons can be used to trigger an action or to navigate to a new location. Buttons can be styled with
+ * a variety of themes and variants.
+ *
+ * @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} 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.
+ * @property {string} value - The form value of the button.
+ * @property {boolean} dense - Whether or not the button is dense.
+ * @property {boolean} anchor - Whether or not the button is an `<a>` element.
+ * @property {string} href - The href of the anchor.
+ * @property {string} target - The target of the anchor.
+ * @property {string} download - The download of the anchor.
+ * @property {string} rel - The rel of the anchor.
+ * @property {HTMLFormElement | null} form - The form reference of the button if within a `<form>` element.
+ * @property {boolean} pill - Whether or not the button is pill-shaped.
+ * @property {ButtonTheme} theme - The theme of the button. Defaults to `primary`.
+ *
+ * @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} 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.
+ * @attribute {string} value - The form value of the button.
+ * @attribute {boolean} dense - Whether or not the button is dense.
+ * @attribute {boolean} anchor - Whether or not the button is an `<a>` element.
+ * @attribute {string} href - The href of the anchor.
+ * @attribute {string} target - The target of the anchor.
+ * @attribute {string} download - The download of the anchor.
+ * @attribute {string} rel - The rel of the anchor.
+ * @attribute {boolean} pill - Whether or not the button is pill-shaped.
+ * @attribute {ButtonTheme} theme - The theme of the button. Defaults to `primary`.
+ *
+ * @event {Event} click - Fires when the button is clicked.
+ *
+ * @cssproperty --forge-button-primary-color - The primary color of the button.
+ * @cssproperty --forge-button-text-color - The text color of the button. Inherits from primary color.
+ * @cssproperty --forge-button-disabled-color - The disabled color of the button.
+ * @cssproperty --forge-button-padding - The padding of the button.
+ * @cssproperty --forge-button-display - The display of the button.
+ * @cssproperty --forge-button-justify - The flex justify of the button.
+ * @cssproperty --forge-button-shape - The shape of the button.
+ * @cssproperty --forge-button-height - The height of the button.
+ * @cssproperty --forge-button-min-width - The min-width of the button.
+ * @cssproperty --forge-button-spacing - The spacing of the button.
+ * @cssproperty --forge-button-border-width - The border-width of the button.
+ * @cssproperty --forge-button-border-style - The border style of the button.
+ * @cssproperty --forge-button-border-color - The border color of the button.
+ * @cssproperty --forge-button-shape-start-start-radius - The shape start start radius of the button.
+ * @cssproperty --forge-button-shape-start-end-radius - The shape start end radius of the button.
+ * @cssproperty --forge-button-shape-end-start-radius - The shape end start radius of the button.
+ * @cssproperty --forge-button-shape-end-end-radius - The shape end end radius of the button.
+ * @cssproperty --forge-button-padding-block - The padding block of the button.
+ * @cssproperty --forge-button-padding-inline - The padding inline of the button.
+ * @cssproperty --forge-button-background - The background color of the button.
+ * @cssproperty --forge-button-hover-background - The background color of the button on hover.
+ * @cssproperty --forge-button-active-background - The background color of the button on active state.
+ * @cssproperty --forge-button-color - The text color of the button.
+ * @cssproperty --forge-button-icon-size - The size of the icon in the button.
+ * @cssproperty --forge-button-shadow - The shadow of the button.
+ * @cssproperty --forge-button-hover-shadow - The shadow of the button on hover.
+ * @cssproperty --forge-button-active-shadow - The shadow of the button on active state.
+ * @cssproperty --forge-button-cursor - The cursor type of the button.
+ * @cssproperty --forge-button-raised-background - The background color of the raised button.
+ * @cssproperty --forge-button-raised-disabled-background - The background color of the disabled raised button.
+ * @cssproperty --forge-button-raised-color - The text color of the raised button.
+ * @cssproperty --forge-button-raised-disabled-color - The text color of the disabled raised button.
+ * @cssproperty --forge-button-raised-shadow - The shadow of the raised button.
+ * @cssproperty --forge-button-raised-hover-shadow - The shadow of the raised button on hover.
+ * @cssproperty --forge-button-raised-active-shadow - The shadow of the raised button on active state.
+ * @cssproperty --forge-button-raised-disabled-shadow - The shadow of the disabled raised button.
+ * @cssproperty --forge-button-raised-transition-duration - The transition duration of the raised button.
+ * @cssproperty --forge-button-raised-transition-timing - The transition timing of the raised button.
+ * @cssproperty --forge-button-flat-background - The background color of the flat button.
+ * @cssproperty --forge-button-flat-disabled-background - The background color of the disabled flat button.
+ * @cssproperty --forge-button-flat-color - The text color of the flat button.
+ * @cssproperty --forge-button-flat-disabled-color - The text color of the disabled flat button.
+ * @cssproperty --forge-button-outlined-background - The background color of the outlined button.
+ * @cssproperty --forge-button-outlined-color - The text color of the outlined button.
+ * @cssproperty --forge-button-outlined-border-width - The border width of the outlined button.
+ * @cssproperty --forge-button-outlined-border-style - The border style of the outlined button.
+ * @cssproperty --forge-button-outlined-border-color - The border color of the outlined button.
+ * @cssproperty --forge-button-link-color - The text color of the link button.
+ * @cssproperty --forge-button-link-text-decoration - The text decoration of the link button.
+ * @cssproperty --forge-button-link-height - The height of the link button.
+ * @cssproperty --forge-button-link-padding - The padding of the link button.
+ * @cssproperty --forge-button-link-line-height - The line height of the link button.
+ * @cssproperty --forge-button-link-width - The width of the link button.
+ * @cssproperty --forge-button-link-hover-text-decoration - The text decoration of the link button on hover.
+ * @cssproperty --forge-button-link-active-opacity - The opacity of the link button on active state.
+ * @cssproperty --forge-button-link-transition-duration - The transition duration of the link button.
+ * @cssproperty --forge-button-link-transition-timing - The transition timing of the link button.
+ * @cssproperty --forge-button-disabled-cursor - The cursor type of the disabled button.
+ * @cssproperty --forge-button-disabled-text-color - The text color of the disabled button.
+ * @cssproperty --forge-button-disabled-background - The background color of the disabled button.
+ * @cssproperty --forge-button-disabled-border-color - The border color of the disabled button.
+ * @cssproperty --forge-button-disabled-shadow - The shadow of the disabled button.
+ * @cssproperty --forge-button-dense-height - The height of the dense button.
+ * @cssproperty --forge-button-pill-shape - The shape of the pill button.
+ * @cssproperty --forge-button-pill-padding-inline - The inline padding of the pill button.
+ *
+ * @csspart root - The root container element.
+ * @csspart focus-indicator - The focus-indicator indicator element.
+ * @csspart state-layer - The state-layer surface element.
+ *
+ * @slot - This is a default/unnamed slot for the label text.
+ * @slot start - Elements to logically render before the label text.
+ * @slot end - Elements to logically render after the label text.
  */
-let ButtonComponent = class ButtonComponent extends BaseComponent {
+let ButtonComponent = class ButtonComponent extends BaseButton {
     static get observedAttributes() {
-        return [BUTTON_CONSTANTS.attributes.TYPE];
+        return [
+            ...Object.values(BASE_BUTTON_CONSTANTS.observedAttributes),
+            ...Object.values(BUTTON_CONSTANTS.observedAttributes)
+        ];
     }
     constructor() {
         super();
-    }
-    connectedCallback() {
-        if (this.children.length) {
-            this._initialize();
-        }
-        else {
-            ensureChildren(this).then(() => this._initialize());
-        }
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ButtonFoundation(new ButtonAdapter(this));
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case BUTTON_CONSTANTS.attributes.TYPE:
-                this.type = newValue;
-                break;
-        }
-    }
-    disconnectedCallback() {
-        if (typeof this._destroyUserInteractionListener === 'function') {
-            this._destroyUserInteractionListener();
-        }
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
-        }
-        if (this._mutationObserver) {
-            this._mutationObserver.disconnect();
-        }
-        if (this._buttonAttrMutationObserver) {
-            this._buttonAttrMutationObserver.disconnect();
-        }
-    }
-    /**
-     * Sets the type of button decoration.
-     * Possible values are: raised, elevated, outlined, and dense.
-     * Can be combined as: outlined-dense.
-     */
-    get type() {
-        return this._type;
-    }
-    set type(value) {
-        if (this._type !== value) {
-            this._type = value;
-            this._applyType(value);
-            this.setAttribute(BUTTON_CONSTANTS.attributes.TYPE, this._type);
-        }
-    }
-    _applyType(type) {
-        if (this._buttonElement) {
-            this._buttonElement.classList.remove(BUTTON_CONSTANTS.classes.BUTTON_RAISED);
-            this._buttonElement.classList.remove(BUTTON_CONSTANTS.classes.BUTTON_UNELEVATED);
-            this._buttonElement.classList.remove(BUTTON_CONSTANTS.classes.BUTTON_OUTLINED);
-            this._buttonElement.classList.remove(BUTTON_CONSTANTS.classes.BUTTON_DENSE);
-            if (type.includes('raised')) {
-                this._buttonElement.classList.add(BUTTON_CONSTANTS.classes.BUTTON_RAISED);
-            }
-            if (type.includes('unelevated')) {
-                this._buttonElement.classList.add(BUTTON_CONSTANTS.classes.BUTTON_UNELEVATED);
-            }
-            if (type.includes('outlined')) {
-                this._buttonElement.classList.add(BUTTON_CONSTANTS.classes.BUTTON_OUTLINED);
-            }
-            if (type.includes('dense')) {
-                this._buttonElement.classList.add(BUTTON_CONSTANTS.classes.BUTTON_DENSE);
-            }
-        }
-    }
-    _initialize() {
-        this._initializeButton();
-        this._initializeMutationObserver();
-    }
-    _initializeButton() {
-        this._buttonElement = this.querySelector(BUTTON_CONSTANTS.selectors.BUTTON);
-        if (!this._buttonElement) {
-            return;
-        }
-        if (this.hasAttribute(BUTTON_CONSTANTS.attributes.TYPE)) {
-            this._type = this.getAttribute(BUTTON_CONSTANTS.attributes.TYPE);
-            this._applyType(this._type);
-        }
-        this._buttonElement.classList.add(BUTTON_CONSTANTS.classes.BUTTON);
-        this._syncDisabledState();
-        this._initializeButtonChildren();
-        // We wait to initialize the ripple instance until the user interacts with the component to avoid unnecessary performance overhead
-        this._deferRippleInitialization();
-    }
-    async _deferRippleInitialization() {
-        const { userInteraction, destroy } = createUserInteractionListener(this._buttonElement);
-        this._destroyUserInteractionListener = destroy;
-        const { type } = await userInteraction;
-        this._destroyUserInteractionListener = undefined;
-        if (!this._rippleInstance) {
-            this._rippleInstance = this._createRipple();
-            if (type === 'focusin') {
-                this._rippleInstance.handleFocus();
-            }
-        }
-    }
-    _createRipple() {
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
-        }
-        return new ForgeRipple(this._buttonElement);
-    }
-    _initializeButtonChildren() {
-        if (!this._buttonElement.querySelector(BUTTON_CONSTANTS.selectors.RIPPLE)) {
-            const rippleElement = document.createElement('span');
-            rippleElement.classList.add(BUTTON_CONSTANTS.classes.RIPPLE);
-            this._buttonElement.appendChild(rippleElement);
-        }
-        const labelElement = this.querySelector(BUTTON_CONSTANTS.selectors.LABEL);
-        if (labelElement) {
-            labelElement.classList.add(BUTTON_CONSTANTS.classes.LABEL);
-        }
-        const iconElements = Array.from(this.querySelectorAll(BUTTON_CONSTANTS.selectors.ICON));
-        iconElements.forEach(iconElement => {
-            iconElement.classList.add(BUTTON_CONSTANTS.classes.ICON);
-            if (!iconElement.hasAttribute('aria-hidden')) {
-                iconElement.setAttribute('aria-hidden', 'true');
-            }
-        });
-    }
-    _initializeMutationObserver() {
-        if (!this._mutationObserver) {
-            const config = { childList: true, subtree: true };
-            const callback = mutationList => {
-                if (this._buttonWasAdded(mutationList)) {
-                    this._initializeButton();
-                }
-                else if (mutationList.some(mutation => mutation.addedNodes.length)) {
-                    this._initializeButtonChildren();
-                }
-            };
-            this._mutationObserver = new MutationObserver(callback);
-            this._mutationObserver.observe(this, config);
-            if (this._buttonElement) {
-                // Watch attributes on the `<button>` element
-                this._buttonAttrMutationObserver = new MutationObserver(mutationList => {
-                    if (mutationList.some(mutation => mutation.attributeName === 'disabled')) {
-                        this._syncDisabledState();
-                    }
-                });
-                this._buttonAttrMutationObserver.observe(this._buttonElement, { attributes: true, attributeFilter: ['disabled'] });
-            }
-        }
-    }
-    _buttonWasAdded(mutationList) {
-        return mutationList.some(mutation => {
-            return Array.from(mutation.addedNodes)
-                .some(node => ALLOWED_CHILDREN.includes(node.nodeName.toLowerCase()));
-        });
-    }
-    _syncDisabledState() {
-        toggleAttribute(this, this._buttonElement.disabled, BUTTON_CONSTANTS.attributes.DISABLED);
+            case BUTTON_CONSTANTS.observedAttributes.VARIANT:
+                this.variant = newValue;
+                return;
+            case BUTTON_CONSTANTS.observedAttributes.PILL:
+                this.pill = coerceBoolean(newValue);
+                return;
+            case BUTTON_CONSTANTS.observedAttributes.THEME:
+                this.theme = newValue;
+                return;
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
     }
 };
+__decorate([
+    FoundationProperty()
+], ButtonComponent.prototype, "variant", void 0);
+__decorate([
+    FoundationProperty()
+], ButtonComponent.prototype, "pill", void 0);
+__decorate([
+    FoundationProperty()
+], ButtonComponent.prototype, "theme", void 0);
 ButtonComponent = __decorate([
     CustomElement({
-        name: BUTTON_CONSTANTS.elementName
+        name: BUTTON_CONSTANTS.elementName,
+        dependencies: [
+            FocusIndicatorComponent,
+            StateLayerComponent,
+            IconComponent
+        ]
     })
 ], ButtonComponent);
 export { ButtonComponent };

package/esm/button/index.d.ts

@@ -4,6 +4,8 @@
  * License: Apache-2.0
  */
 export * from './button';
-export * from './button-constants';
+export * from './button-adapter';
 export * from './button-component-delegate';
+export * from './button-constants';
+export * from './button-foundation';
 export declare function defineButtonComponent(): void;

package/esm/button/index.js

@@ -6,8 +6,10 @@
 import { defineCustomElement } from '@tylertech/forge-core';
 import { ButtonComponent } from './button';
 export * from './button';
-export * from './button-constants';
+export * from './button-adapter';
 export * from './button-component-delegate';
+export * from './button-constants';
+export * from './button-foundation';
 export function defineButtonComponent() {
     defineCustomElement(ButtonComponent);
 }