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

package/esm/icon-button/icon-button.js

@@ -4,241 +4,135 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { coerceBoolean, coerceNumber, CustomElement, emitEvent, ensureChild, toggleClass } from '@tylertech/forge-core';
-import { BaseComponent } from '../core/base/base-component';
-import { ForgeRipple } from '../ripple';
-import { createUserInteractionListener } from '../core/utils';
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { tylIconArrowDropDown } from '@tylertech/tyler-icons/standard';
+import { IconComponent, IconRegistry } from '../icon';
+import { BaseButton } from '../button/base/base-button';
+import { BASE_BUTTON_CONSTANTS } from '../button/base/base-button-constants';
+import { FocusIndicatorComponent } from '../focus-indicator';
+import { StateLayerComponent } from '../state-layer';
 import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
+import { IconButtonFoundation } from './icon-button-foundation';
+import { IconButtonAdapter } from './icon-button-adapter';
+const template = '<template><div class=\"forge-icon-button\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"on\"></slot><slot name=\"end\"></slot><forge-focus-indicator target=\":host\" exportparts=\"indicator:focus-indicator\"></forge-focus-indicator><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
+const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed)}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-icon-button{--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-spacing, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, inherit);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, var(--forge-shape-full, 9999px));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, var(--forge-shape-medium, 4px));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #0f132b));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-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));--_icon-button-raised-hover-shadow:var(--forge-icon-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));--_icon-button-raised-active-shadow:var(--forge-icon-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));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);--_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container-low, #e8eaf6));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}.forge-icon-button{position:relative;z-index:0;display:var(--_icon-button-display);-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;gap:var(--_icon-button-gap);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);-webkit-box-shadow:var(--_icon-button-shadow);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-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(--_icon-button-transition-duration);transition-duration:var(--_icon-button-transition-duration);-webkit-transition-timing-function:var(--_icon-button-transition-timing);transition-timing-function:var(--_icon-button-transition-timing)}.forge-icon-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_icon-button-icon-size);height:var(--_icon-button-icon-size);width:var(--_icon-button-icon-size);font-weight:inherit}a{position:absolute;inset:0;text-decoration:none}forge-focus-indicator{--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([variant=icon],:not([variant]))){--forge-focus-indicator-outward-offset:0px}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}:host([popover-icon]) .forge-icon-button{--_icon-button-padding:var(--_icon-button-popover-icon-padding)}:host([variant=outlined]) .forge-icon-button{border-width:var(--_icon-button-outlined-border-width);border-style:var(--_icon-button-outlined-border-style);border-color:var(--_icon-button-outlined-border-color)}:host([variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-background-color)}:host(:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-icon-color);--_icon-button-background-color:var(--_icon-button-filled-background-color)}:host([variant=raised]) .forge-icon-button{--_icon-button-shadow:var(--_icon-button-raised-shadow)}:host([variant=raised]) .forge-icon-button:hover{--_icon-button-raised-shadow:var(--_icon-button-raised-hover-shadow)}:host([variant=raised]) .forge-icon-button:active{--_icon-button-raised-shadow:var(--_icon-button-raised-active-shadow)}:host(:is(:not([toggle]),[toggle]:not([on]))) slot[name=on]{display:none}:host([toggle][on]) slot:not([name]){display:none}:host([toggle][on]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color)}:host([toggle][on][variant=outlined]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-outlined-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-outlined-toggle-on-icon-color)}:host([toggle]:not([on])[variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-tonal-toggle-background-color)}:host([toggle][on][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-toggle-on-background-color)}:host([toggle]:not([on]):is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-background-color)}:host([toggle][on]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-on-background-color)}:host(:is([dense],[density=small])) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding)}:host(:is([dense],[density=small])) ::slotted(*){font-size:var(--_icon-button-density-small-icon-size)}:host([density=medium]) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([shape=squared]) .forge-icon-button{--_icon-button-shape:var(--_icon-button-shape-squared)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) .forge-icon-button{pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([disabled][variant=raised]) .forge-icon-button{--_icon-button-raised-shadow:var(--_icon-button-raised-disabled-shadow)}:host(:not([toggle])[theme=primary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container-low, #e8eaf6));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host(:not([toggle])[theme=secondary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-secondary-container-low, #fff8e1));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary-container, #3d2e02));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle]:not([on])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container-low, #fff8e1))}:host([toggle][theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-secondary-container, #3d2e02))}:host(:not([toggle])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary, #000000));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary, #ffc107))}:host([toggle]:not([on])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container-low, #fff8e1))}:host([toggle][theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-secondary, #ffc107));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=tertiary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-tertiary-container-low, #e8ebff));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary-container, #0f163d));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle]:not([on])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container-low, #e8ebff))}:host([toggle][theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-tertiary-container, #0f163d))}:host(:not([toggle])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle]:not([on])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container-low, #e8ebff))}:host([toggle][theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=success]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-success-container-low, #e6efe6));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success-container, #0b1e0c));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle]:not([on])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container-low, #e6efe6))}:host([toggle][theme=success][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-success-container, #0b1e0c))}:host(:not([toggle])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success, #2e7d32))}:host([toggle]:not([on])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container-low, #e6efe6))}:host([toggle][theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-success, #2e7d32));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=error]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-error-container-low, #f6e0e4));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error-container, #2a0008));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle]:not([on])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container-low, #f6e0e4))}:host([toggle][theme=error][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-error-container, #2a0008))}:host(:not([toggle])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error, #b00020))}:host([toggle]:not([on])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container-low, #f6e0e4))}:host([toggle][theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-error, #b00020));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=warning]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-warning-container-low, #f9e9e0));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning-container, #321200));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle]:not([on])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container-low, #f9e9e0))}:host([toggle][theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-warning-container, #321200))}:host(:not([toggle])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning, #d14900))}:host([toggle]:not([on])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container-low, #f9e9e0))}:host([toggle][theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-warning, #d14900));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=info]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-info-container-low, #e3edf7));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host(:not([toggle])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info-container, #05182e));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle]:not([on])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container-low, #e3edf7))}:host([toggle][theme=info][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-info-container, #05182e))}:host(:not([toggle])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info, #1565c0))}:host([toggle]:not([on])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container-low, #e3edf7))}:host([toggle][theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-info, #1565c0));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-info, #1565c0))}';
 /**
- * The custom element class behind the `<forge-icon-button>` element.
- *
  * @tag forge-icon-button
+ *
+ * @summary Icons buttons are used to trigger an action or event.
+ *
+ * @property {boolean} toggle - Whether or not the icon button can be toggled.
+ * @property {boolean} on - Whether or not the button is on. Only applies when `toggle` is `true`.
+ * @property {IconButtonVariant} variant - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
+ * @property {IconButtonTheme} theme - The theme of the button. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @property {string} shape - The shape of the button. Valid values are `circular` and `squared`.
+ * @property {IconButtonDensity} density - The density of the button. Valid values are `small`, `medium`, and `large`.
+ * @property {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
+ * @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.
+ *
+ * @attribute {boolean} toggle - Whether or not the icon button can be toggled.
+ * @attribute {boolean} on - Whether or not the button is on. Only applies when `toggle` is `true`.
+ * @attribute {IconButtonVariant} variant - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
+ * @attribute {IconButtonTheme} theme - The theme of the button. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @attribute {string} shape - The shape of the button. Valid values are `circular` and `squared`.
+ * @attribute {IconButtonDensity} density - The density of the button. Valid values are `small`, `medium`, and `large`.
+ * @attribute {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
+ * @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.
+ *
+ * @event {Event} click - Fires when the button is clicked.
+ * @event {Event} forge-icon-button-toggle - Fires when the icon button is toggled.
+ *
+ * @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 icon.
+ * @slot on - The icon to show when in `toggle` mode when toggled "on".
+ * @slot start - Elements to logically render before the icon.
+ * @slot end - Elements to logically render after the icon.
  */
-let IconButtonComponent = class IconButtonComponent extends BaseComponent {
+let IconButtonComponent = class IconButtonComponent extends BaseButton {
     static get observedAttributes() {
         return [
-            ICON_BUTTON_CONSTANTS.attributes.IS_ON,
-            ICON_BUTTON_CONSTANTS.attributes.DENSE,
-            ICON_BUTTON_CONSTANTS.attributes.DENSITY_LEVEL,
-            ICON_BUTTON_CONSTANTS.attributes.TOGGLE
+            ...Object.values(BASE_BUTTON_CONSTANTS.observedAttributes),
+            ...Object.values(ICON_BUTTON_CONSTANTS.observedAttributes)
         ];
     }
     constructor() {
         super();
-        this._toggle = false;
-        this._isOn = false;
-        this._dense = false;
-        this._densityLevel = 5;
-    }
-    connectedCallback() {
-        if (this.querySelector(ICON_BUTTON_CONSTANTS.selectors.BUTTON)) {
-            this._initialize();
-        }
-        else {
-            ensureChild(this, ICON_BUTTON_CONSTANTS.selectors.BUTTON).then(() => this._initialize());
-        }
-    }
-    disconnectedCallback() {
-        if (typeof this._destroyUserInteractionListener === 'function') {
-            this._destroyUserInteractionListener();
-            this._destroyUserInteractionListener = undefined;
-        }
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
-        }
+        IconRegistry.define(tylIconArrowDropDown);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new IconButtonFoundation(new IconButtonAdapter(this));
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case ICON_BUTTON_CONSTANTS.attributes.IS_ON:
-                this.isOn = coerceBoolean(newValue);
+            case ICON_BUTTON_CONSTANTS.attributes.TOGGLE:
+                this.toggle = coerceBoolean(newValue);
                 break;
-            case ICON_BUTTON_CONSTANTS.attributes.DENSE:
-                this.dense = coerceBoolean(newValue);
+            case ICON_BUTTON_CONSTANTS.attributes.ON:
+                this.on = coerceBoolean(newValue);
                 break;
-            case ICON_BUTTON_CONSTANTS.attributes.DENSITY_LEVEL:
-                this.densityLevel = coerceNumber(newValue);
+            case ICON_BUTTON_CONSTANTS.attributes.VARIANT:
+                this.variant = newValue;
                 break;
-            case ICON_BUTTON_CONSTANTS.attributes.TOGGLE:
-                this.toggle = coerceBoolean(newValue);
+            case ICON_BUTTON_CONSTANTS.attributes.THEME:
+                this.theme = newValue;
+                break;
+            case ICON_BUTTON_CONSTANTS.attributes.SHAPE:
+                this.shape = newValue;
+                break;
+            case ICON_BUTTON_CONSTANTS.attributes.DENSITY:
+                this.density = newValue;
                 break;
         }
-    }
-    /** Gets/sets whether the button is togglable. */
-    get toggle() {
-        return this._toggle;
-    }
-    set toggle(value) {
-        this._toggle = value;
-        if (this._toggle) {
-            this._initializeToggle();
-        }
-        else {
-            this._destroyToggle();
-        }
-    }
-    /** Gets/sets the toggled state of the icon button. Only applies when `toggle = true`. */
-    get isOn() {
-        return this._isOn;
-    }
-    set isOn(value) {
-        if (this._isOn !== value) {
-            this._isOn = value;
-            this._applyToggle();
-        }
-    }
-    /** Gets/sets whether the icon button is dense. */
-    get dense() {
-        return this._dense;
-    }
-    set dense(value) {
-        if (this._dense !== value) {
-            this._dense = value;
-            this._applyDensity();
-        }
-    }
-    /** Controls the density level. 1 (least dense) to 6 (most dense). */
-    get densityLevel() {
-        return this._densityLevel;
-    }
-    set densityLevel(value) {
-        if (this._densityLevel !== value) {
-            this._densityLevel = value;
-            if (this._densityLevel <= 0) {
-                this._densityLevel = 1;
-            }
-            else if (this._densityLevel > 6) {
-                this._densityLevel = 6;
-            }
-            else if (typeof this._densityLevel !== 'number') {
-                this._densityLevel = 5;
-            }
-            this._applyDensity();
-        }
-    }
-    _initialize() {
-        this._buttonElement = this.querySelector(ICON_BUTTON_CONSTANTS.selectors.BUTTON);
-        if (!this._buttonElement) {
-            return;
-        }
-        this._buttonElement.classList.add(ICON_BUTTON_CONSTANTS.classes.BUTTON);
-        this._applyToggle();
-        this._applyDensity();
-        this._toggleHandler = () => {
-            this._toggleValue();
-            emitEvent(this, ICON_BUTTON_CONSTANTS.events.CHANGE, this._isOn, true);
-        };
-        if (this._toggle) {
-            this._initializeToggle();
-        }
-        // 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();
-        }
-        const ripple = new ForgeRipple(this._buttonElement);
-        ripple.unbounded = true;
-        return ripple;
-    }
-    _toggleValue() {
-        this._isOn = !this._isOn;
-        this._applyToggle();
-    }
-    _applyToggle() {
-        if (!this._buttonElement) {
-            return;
-        }
-        toggleClass(this._buttonElement, this._isOn, ICON_BUTTON_CONSTANTS.classes.BUTTON_ON);
-        if (this._toggle) {
-            this._buttonElement.setAttribute('aria-pressed', `${this._isOn}`);
-        }
-    }
-    _applyDensity() {
-        if (!this._buttonElement) {
-            return;
-        }
-        // Remove all other density classes first
-        ICON_BUTTON_CONSTANTS.classes.DENSITY.forEach(c => this._buttonElement.classList.remove(c));
-        if (this._dense) {
-            this.setAttribute(ICON_BUTTON_CONSTANTS.attributes.DENSE, '');
-            this._buttonElement.classList.add(ICON_BUTTON_CONSTANTS.classes.BUTTON_DENSE);
-            // 5 is the default density level (we apply 5 implicitly in the regular dense class)
-            // Exclude 5 since its already covered by dense class
-            if (this._densityLevel < 7 && this._densityLevel > 0 && this.densityLevel !== 5) {
-                const densityLevelClass = ICON_BUTTON_CONSTANTS.classes.DENSITY[this._densityLevel - 1];
-                this._buttonElement.classList.add(densityLevelClass);
-                this.setAttribute(ICON_BUTTON_CONSTANTS.attributes.DENSITY_LEVEL, this._densityLevel.toString());
-            }
-        }
-        else {
-            this.removeAttribute(ICON_BUTTON_CONSTANTS.attributes.DENSE);
-            this._buttonElement.classList.remove(ICON_BUTTON_CONSTANTS.classes.BUTTON_DENSE);
-        }
-        // re-layout the ripple for cases where dense was changed after initial layout
-        if (this._rippleInstance) {
-            this._rippleInstance.layout();
-        }
-    }
-    _initializeToggle() {
-        if (!this._buttonElement) {
-            return;
-        }
-        const icons = Array.from(this._buttonElement.querySelectorAll(ICON_BUTTON_CONSTANTS.selectors.ICON));
-        // We require two icon/image elements to be specified for the "on" and "off" states
-        if (icons.length !== 2) {
-            console.error('You must specify two icons, one for "on" and one for "off".');
-            return;
-        }
-        // Add the icon class to each icon
-        icons.forEach(icon => icon.classList.add(ICON_BUTTON_CONSTANTS.classes.ICON));
-        // If there are no icons that specify the "on" class, then automatically choose the first icon as the "on" icon and add the class,
-        // alternatively we check for the existence of a `forge-icon-button-on` attribute on any of the icons and use that.
-        if (!icons.some(icon => icon.classList.contains(ICON_BUTTON_CONSTANTS.classes.ICON_ON))) {
-            const requestedOnIcon = icons.find(icon => icon.hasAttribute(ICON_BUTTON_CONSTANTS.attributes.ICON_ON));
-            if (requestedOnIcon) {
-                requestedOnIcon.classList.add(ICON_BUTTON_CONSTANTS.classes.ICON_ON);
-            }
-            else {
-                icons[0].classList.add(ICON_BUTTON_CONSTANTS.classes.ICON_ON);
-            }
-        }
-        this._buttonElement.addEventListener('click', this._toggleHandler);
-        // Wait a frame to ensure the value of the `on` property has been set
-        window.requestAnimationFrame(() => {
-            if (this._isOn) {
-                this._buttonElement.classList.add(ICON_BUTTON_CONSTANTS.classes.BUTTON_ON);
-                this._buttonElement.setAttribute('aria-pressed', `${this._isOn}`);
-            }
-        });
-    }
-    _destroyToggle() {
-        if (!this._buttonElement) {
-            return;
-        }
-        this._buttonElement.removeEventListener('click', this._toggleHandler);
-    }
-    layout() {
-        if (this._rippleInstance) {
-            this._rippleInstance.layout();
-        }
+        super.attributeChangedCallback(name, oldValue, newValue);
     }
 };
+__decorate([
+    FoundationProperty()
+], IconButtonComponent.prototype, "toggle", void 0);
+__decorate([
+    FoundationProperty()
+], IconButtonComponent.prototype, "on", void 0);
+__decorate([
+    FoundationProperty()
+], IconButtonComponent.prototype, "theme", void 0);
+__decorate([
+    FoundationProperty()
+], IconButtonComponent.prototype, "variant", void 0);
+__decorate([
+    FoundationProperty()
+], IconButtonComponent.prototype, "shape", void 0);
+__decorate([
+    FoundationProperty()
+], IconButtonComponent.prototype, "density", void 0);
 IconButtonComponent = __decorate([
     CustomElement({
-        name: ICON_BUTTON_CONSTANTS.elementName
+        name: ICON_BUTTON_CONSTANTS.elementName,
+        dependencies: [
+            FocusIndicatorComponent,
+            StateLayerComponent,
+            IconComponent
+        ]
     })
 ], IconButtonComponent);
 export { IconButtonComponent };

package/esm/index.d.ts

@@ -37,6 +37,7 @@ export * from './focus-indicator';
 export * from './icon-button';
 export * from './inline-message';
 export * from './keyboard-shortcut';
+export * from './label';
 export * from './label-value';
 export * from './linear-progress';
 export * from './list';
@@ -53,6 +54,7 @@ export * from './scaffold';
 export * from './select';
 export * from './skeleton';
 export * from './slider';
+export * from './split-button';
 export * from './split-view';
 export * from './state-layer';
 export * from './stepper';

package/esm/index.js

@@ -39,6 +39,7 @@ import { FocusIndicatorComponent } from './focus-indicator';
 import { IconButtonComponent } from './icon-button';
 import { InlineMessageComponent } from './inline-message';
 import { KeyboardShortcutComponent } from './keyboard-shortcut';
+import { LabelComponent } from './label';
 import { LabelValueComponent } from './label-value';
 import { LinearProgressComponent } from './linear-progress';
 import { ListComponent } from './list';
@@ -107,6 +108,7 @@ export * from './focus-indicator';
 export * from './icon-button';
 export * from './inline-message';
 export * from './keyboard-shortcut';
+export * from './label';
 export * from './label-value';
 export * from './linear-progress';
 export * from './list';
@@ -123,6 +125,7 @@ export * from './scaffold';
 export * from './select';
 export * from './skeleton';
 export * from './slider';
+export * from './split-button';
 export * from './split-view';
 export * from './state-layer';
 export * from './stepper';
@@ -175,6 +178,7 @@ const CUSTOM_ELEMENTS = [
     IconButtonComponent,
     InlineMessageComponent,
     KeyboardShortcutComponent,
+    LabelComponent,
     LabelValueComponent,
     LinearProgressComponent,
     ListComponent,

package/esm/label/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './label-adapter';
+export * from './label-constants';
+export * from './label-foundation';
+export * from './label';
+export * from './label-aware';
+export declare function defineLabelComponent(): void;

package/esm/label/index.js

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { LabelComponent } from './label';
+export * from './label-adapter';
+export * from './label-constants';
+export * from './label-foundation';
+export * from './label';
+export * from './label-aware';
+export function defineLabelComponent() {
+    defineCustomElement(LabelComponent);
+}

package/esm/label/label-adapter.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core';
+import { ILabelComponent } from './label';
+export interface ILabelAdapter extends IBaseAdapter {
+    destroy(): void;
+    hasTargetElement(): boolean;
+    getTargetElement(): HTMLElement | null;
+    setTargetElement(el: HTMLElement | null): void;
+    trySetTarget(value: string | null): void;
+    clickTarget(): void;
+    updateTargetLabel(): void;
+    addSlotChangeListener(callback: EventListener): void;
+    addMutationObserver(callback: MutationCallback): void;
+    removeMutationObserver(): void;
+}
+export declare class LabelAdapter extends BaseAdapter<ILabelComponent> implements ILabelAdapter {
+    private _slotElement;
+    private _targetElement;
+    private _mutationObserver?;
+    constructor(component: ILabelComponent);
+    destroy(): void;
+    hasTargetElement(): boolean;
+    getTargetElement(): HTMLElement | null;
+    setTargetElement(el: HTMLElement | null): void;
+    trySetTarget(value: string | null): void;
+    /**
+     * Calls the target's `labelClickedCallback`.
+     */
+    clickTarget(): void;
+    /**
+     * Computes the text content of the label then passes it to the target's `labelChangedCallback`.
+     */
+    updateTargetLabel(): void;
+    addSlotChangeListener(callback: EventListener): void;
+    addMutationObserver(callback: MutationCallback): void;
+    removeMutationObserver(): void;
+    /**
+     * Returns `true` if the provided element is label aware, `false` otherwise. If `false` a warning
+     * is logged to the console.
+     */
+    private _checkLabelAwareness;
+    /**
+     * Returns a label aware element queried from the provided id or a child element of the
+     * component or `null` if none exists.
+     */
+    private _locateTargetElement;
+}

package/esm/label/label-adapter.js

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core';
+import { isLabelAware } from './label-aware';
+import { LABEL_CONSTANTS } from './label-constants';
+export class LabelAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._targetElement = null;
+        this._slotElement = getShadowElement(component, LABEL_CONSTANTS.selectors.SLOT);
+    }
+    destroy() {
+        var _a;
+        (_a = this._targetElement) === null || _a === void 0 ? void 0 : _a.labelChangedCallback(null);
+        this._targetElement = null;
+    }
+    hasTargetElement() {
+        return !!this._targetElement;
+    }
+    getTargetElement() {
+        return this._targetElement;
+    }
+    setTargetElement(el) {
+        if (el && this._checkLabelAwareness(el)) {
+            this._targetElement = el;
+            return;
+        }
+        this._targetElement = null;
+    }
+    trySetTarget(value) {
+        this._targetElement = this._locateTargetElement(value);
+    }
+    /**
+     * Calls the target's `labelClickedCallback`.
+     */
+    clickTarget() {
+        var _a;
+        (_a = this._targetElement) === null || _a === void 0 ? void 0 : _a.labelClickedCallback();
+    }
+    /**
+     * Computes the text content of the label then passes it to the target's `labelChangedCallback`.
+     */
+    updateTargetLabel() {
+        var _a;
+        const value = this._component.innerText.trim();
+        (_a = this._targetElement) === null || _a === void 0 ? void 0 : _a.labelChangedCallback(value);
+    }
+    addSlotChangeListener(callback) {
+        this._slotElement.addEventListener('slotchange', callback);
+    }
+    addMutationObserver(callback) {
+        this._mutationObserver = new MutationObserver(callback);
+        this._mutationObserver.observe(this._component, {
+            subtree: true,
+            characterData: true,
+            childList: true
+        });
+        // Run the callback once to capture the current state of the label
+        callback([], this._mutationObserver);
+    }
+    ;
+    removeMutationObserver() {
+        var _a;
+        (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._mutationObserver = undefined;
+    }
+    /**
+     * Returns `true` if the provided element is label aware, `false` otherwise. If `false` a warning
+     * is logged to the console.
+     */
+    _checkLabelAwareness(el) {
+        if (!isLabelAware(el)) {
+            console.warn('Label target element is not label aware.', el);
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Returns a label aware element queried from the provided id or a child element of the
+     * component or `null` if none exists.
+     */
+    _locateTargetElement(id) {
+        let targetEl;
+        if (id) {
+            const rootNode = this._component.getRootNode();
+            targetEl = rootNode.querySelector(`#${id}`);
+        }
+        else {
+            // Used for nested elements within the label component
+            const selector = LABEL_CONSTANTS.labelableChildSelectors.join(',');
+            targetEl = this._component.querySelector(selector);
+        }
+        if (targetEl && !this._checkLabelAwareness(targetEl)) {
+            return null;
+        }
+        return targetEl;
+    }
+}

package/esm/label/label-aware.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export interface ILabelAware {
+    labelClickedCallback(): void;
+    labelChangedCallback(value: string | null): void;
+}
+/**
+ * Determines if an object is label aware.
+ * @param obj - The object to check.
+ * @returns True if the object is label aware, false otherwise.
+ */
+export declare const isLabelAware: (obj: any) => obj is ILabelAware;