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

package/esm/button/button-constants.js

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

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

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

package/esm/button/button-foundation.js

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

package/esm/button/button.d.ts

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

package/esm/button/button.js

@@ -5,17 +5,16 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
-import { tylIconArrowDropDown } from '@tylertech/tyler-icons/standard';
+import { IconComponent } from '../icon';
 import { FocusIndicatorComponent } from '../focus-indicator';
-import { IconComponent, IconRegistry } from '../icon';
 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\" exportparts=\"indicator: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, #0f132b));--_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, #3d2e02))}: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, #0f163d))}: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, #0b1e0c))}: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, #2a0008))}: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, #321200))}: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, #05182e))}: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)}';
+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([full-width]){width:100%}:host([dense]) .forge-button{--_button-height:var(--_button-dense-height)}:host([pill]) .forge-button{--_button-shape:var(--_button-pill-shape);--_button-padding-inline:var(--_button-pill-padding-inline)}:host([pill]) forge-focus-indicator{--forge-focus-indicator-shape:var(--_button-pill-shape)}:host(:not([anchor])[disabled]){cursor:var(--_button-disabled-cursor)}:host(:not([anchor])[disabled]) .forge-button{--_button-background:var(--_button-disabled-background);--_button-color:var(--_button-disabled-text-color);--_button-shadow:var(--_button-disabled-shadow);pointer-events:none}:host(:not([anchor])[variant=outlined][disabled]) .forge-button{--_button-border-color:var(--_button-disabled-border-color)}:host(:not([anchor])[variant=tonal][disabled]) .forge-button{--_button-background:var(--_button-tonal-disabled-background);--_button-color:var(--_button-tonal-disabled-color)}:host(:not([anchor]):is([variant=filled],[variant=raised])[disabled]) .forge-button{--_button-background:var(--_button-filled-disabled-background);--_button-color:var(--_button-filled-disabled-color)}:host(:not([anchor])[variant=raised][disabled]) .forge-button{--_button-shadow:var(--_button-raised-disabled-shadow)}:host([popover-icon]) .forge-button__popover-icon{-webkit-transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing);transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing)}:host([popover-icon][aria-expanded=true]) .forge-button__popover-icon{rotate:var(--_button-popover-icon-open-rotation)}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_button-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}';
 /**
  * @tag forge-button
  *
@@ -28,6 +27,7 @@ const styles = ':host{--_button-display:var(--forge-button-display, inline-flex)
  *
  * @property {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
  * @property {ButtonVariant} variant - The variant of the button. Defaults to `text`.
+ * @property {boolean} fullWidth - Whether or not the button is full-width.
  * @property {boolean} disabled - Whether or not the button is disabled.
  * @property {boolean} popoverIcon - Whether or not the button shows a built-in popover icon.
  * @property {string} name - The name of the button.
@@ -44,6 +44,7 @@ const styles = ':host{--_button-display:var(--forge-button-display, inline-flex)
  *
  * @attribute {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
  * @attribute {ButtonVariant} variant - The variant of the button. Defaults to `text`.
+ * @attribute {boolean} full-width - Whether or not the button is full-width.
  * @attribute {boolean} disabled - Whether or not the button is disabled.
  * @attribute {boolean} popover-icon - Whether or not the button shows a built-in popover icon.
  * @attribute {string} name - The name of the button.
@@ -142,7 +143,6 @@ let ButtonComponent = class ButtonComponent extends BaseButton {
     }
     constructor() {
         super();
-        IconRegistry.define(tylIconArrowDropDown);
         attachShadowTemplate(this, template, styles);
         this._foundation = new ButtonFoundation(new ButtonAdapter(this));
     }
@@ -157,6 +157,9 @@ let ButtonComponent = class ButtonComponent extends BaseButton {
             case BUTTON_CONSTANTS.observedAttributes.THEME:
                 this.theme = newValue;
                 return;
+            case BUTTON_CONSTANTS.observedAttributes.FULL_WIDTH:
+                this.fullWidth = coerceBoolean(newValue);
+                return;
         }
         super.attributeChangedCallback(name, oldValue, newValue);
     }
@@ -170,6 +173,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], ButtonComponent.prototype, "theme", void 0);
+__decorate([
+    FoundationProperty()
+], ButtonComponent.prototype, "fullWidth", void 0);
 ButtonComponent = __decorate([
     CustomElement({
         name: BUTTON_CONSTANTS.elementName,

package/esm/checkbox/checkbox.js

@@ -12,7 +12,7 @@ import { StateLayerComponent } from '../state-layer/state-layer';
 import { CheckboxAdapter } from './checkbox-adapter';
 import { CHECKBOX_CONSTANTS } from './checkbox-constants';
 import { CheckboxFoundation } from './checkbox-foundation';
-const template = '<template><div class=\"forge-checkbox\" part=\"checkbox\"><div id=\"container\" class=\"container\"><slot name=\"input\"><input id=\"input\" class=\"input\" type=\"checkbox\"></slot><div class=\"background\" part=\"background\"><svg class=\"icon icon--checked\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"checkmark\"><path d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path></svg> <svg class=\"icon icon--indeterminate\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"mixedmark\"><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"></line></svg><forge-focus-indicator target=\"container\" exportparts=\"indicator:focus-indicator\"></forge-focus-indicator></div><forge-state-layer target=\"container\" exportparts=\"surface:state-layer\"></forge-state-layer></div><label id=\"label\" for=\"input\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
+const template = '<template><div class=\"forge-checkbox\" part=\"checkbox\"><div id=\"container\" class=\"container\"><slot name=\"input\"><input id=\"input\" class=\"input\" type=\"checkbox\"></slot><div class=\"background\" part=\"background\"><svg class=\"icon icon--checked\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"checkmark\"><path d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path></svg> <svg class=\"icon icon--indeterminate\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"mixedmark\"><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"></line></svg><forge-focus-indicator target=\"container\" part=\"focus-indicator\"></forge-focus-indicator></div><forge-state-layer target=\"container\" exportparts=\"surface:state-layer\"></forge-state-layer></div><label id=\"label\" for=\"input\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
 const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-checkbox{--_checkbox-primary-color:var(--forge-checkbox-primary-color, var(--forge-theme-tertiary, #3d5afe));--_checkbox-size:var(--forge-checkbox-size, 16px);--_checkbox-border-width:var(--forge-checkbox-border-width, var(--forge-border-medium, 2px));--_checkbox-icon-color:var(--forge-checkbox-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_checkbox-state-layer-size:var(--forge-checkbox-state-layer-size, 40px);--_checkbox-state-layer-dense-size:var(--forge-checkbox-state-layer-size, 24px);--_checkbox-background-color:var(--forge-checkbox-background-color, var(--forge-theme-surface, #ffffff));--_checkbox-width:var(--forge-checkbox-width, var(--_checkbox-size));--_checkbox-height:var(--forge-checkbox-height, var(--_checkbox-size));--_checkbox-unchecked-border-width:var(--forge-checkbox-unchecked-border-width, var(--_checkbox-border-width));--_checkbox-unchecked-border-color:var(--forge-checkbox-unchecked-border-color, var(--forge-theme-surface-container-high, #9e9e9e));--_checkbox-shape:var(--forge-checkbox-shape, var(--forge-shape-small, 2px));--_checkbox-elevation:var(--forge-checkbox-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));--_checkbox-checked-background-color:var(--forge-checkbox-checked-background-color, var(--_checkbox-primary-color));--_checkbox-checked-border-width:var(--forge-checkbox-checked-border-width, var(--_checkbox-border-width));--_checkbox-checked-border-color:var(--forge-checkbox-checked-border-color, var(--_checkbox-checked-background-color));--_checkbox-icon-checked-color:var(--forge-checkbox-icon-checked-color, var(--_checkbox-icon-color));--_checkbox-icon-indeterminate-color:var(--forge-checkbox-icon-indeterminate-color, var(--_checkbox-icon-color));--_checkbox-icon-stroke-width:var(--forge-checkbox-icon-stroke-width, 4px);--_checkbox-gap:var(--forge-checkbox-gap, 0);--_checkbox-justify:var(--forge-switch-justify, space-between);--_checkbox-direction:var(--forge-switch-direction, initial);--_checkbox-state-layer-width:var(--forge-checkbox-state-layer-width, var(--_checkbox-state-layer-size));--_checkbox-state-layer-height:var(--forge-checkbox-state-layer-height, var(--_checkbox-state-layer-size));--_checkbox-state-layer-checked-color:var(--forge-checkbox-state-layer-checked-color, var(--_checkbox-primary-color));--_checkbox-state-layer-unchecked-color:var(--forge-state-layer-state-layer-unchecked-color, var(--_state-layer-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, var(--forge-shape-full, 9999px));--_checkbox-state-layer-dense-width:var(--forge-checkbox-state-layer-dense-width, var(--_checkbox-state-layer-dense-size));--_checkbox-state-layer-dense-height:var(--forge-checkbox-state-layer-dense-height, var(--_checkbox-state-layer-dense-size));--_checkbox-disabled-opacity:var(--forge-checkbox-disabled-opacity, 0.38);--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, var(--forge-animation-duration-short2, 100ms));--_checkbox-background-animation-timing:var(--forge-checkbox-animation-duration, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-animation-duration, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_checkbox-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_checkbox-justify);justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:-webkit-box;display:flex}.forge-checkbox .container{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;border-radius:var(--_checkbox-state-layer-shape);inline-size:var(--_checkbox-state-layer-width);block-size:var(--_checkbox-state-layer-height);cursor:pointer}.forge-checkbox .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-checkbox .background{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:background-color,border-width,border-color;transition-property:background-color,border-width,border-color;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-background-animation-timing);transition-timing-function:var(--_checkbox-background-animation-timing);-webkit-box-shadow:var(--_checkbox-elevation);box-shadow:var(--_checkbox-elevation);border-style:solid;border-width:var(--_checkbox-unchecked-border-width);border-color:var(--_checkbox-unchecked-border-color);border-radius:var(--_checkbox-shape);-webkit-box-sizing:border-box;box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background-color:var(--_checkbox-background-color)}.forge-checkbox .icon{position:absolute;-webkit-transition-property:stroke-dashoffset;transition-property:stroke-dashoffset;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-icon-animation-timing);transition-timing-function:var(--_checkbox-icon-animation-timing);fill:none;stroke-width:var(--_checkbox-icon-stroke-width)}.forge-checkbox .icon--checked{stroke:var(--_checkbox-icon-checked-color);stroke-dasharray:30;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit)}.forge-checkbox .label:empty{display:none}.forge-checkbox ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([checked]) .icon--checked{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([indeterminate]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([indeterminate]) .icon--checked{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([indeterminate]) .icon--indeterminate:dir(rtl){stroke-dashoffset:40}:host([indeterminate]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([dense]) .forge-checkbox .container{inline-size:var(--_checkbox-state-layer-dense-width);block-size:var(--_checkbox-state-layer-dense-height)}:host([disabled]) .forge-checkbox{opacity:var(--_checkbox-disabled-opacity)}:host([disabled]) .forge-checkbox .container{cursor:not-allowed}:host([readonly]) .forge-checkbox .container{cursor:not-allowed}@media (prefers-reduced-motion){.forge-checkbox{--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-unchecked-color)}forge-focus-indicator{--forge-focus-indicator-shape:0px;--forge-focus-indicator-outward-offset:8px}';
 /**
  * @tag forge-checkbox

package/esm/circular-progress/circular-progress-adapter.d.ts

@@ -6,16 +6,16 @@
 import { ICircularProgressComponent } from './circular-progress';
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 export interface ICircularProgressAdapter extends IBaseAdapter {
+    initialize(): void;
     setDeterminate(value: boolean): void;
     setProgress(value: number): void;
-    setAriaLabel(value: string): void;
 }
 export declare class CircularProgressAdapter extends BaseAdapter<ICircularProgressComponent> implements ICircularProgressAdapter {
     private readonly _rootElement;
     private _determinateProgressCircleElement;
     constructor(component: ICircularProgressComponent);
+    initialize(): void;
     setDeterminate(value: boolean): void;
     setProgress(value: number): void;
-    setAriaLabel(value: string): void;
     private _tryResetTemplate;
 }

package/esm/circular-progress/circular-progress-adapter.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
+import { getShadowElement } from '@tylertech/forge-core';
 import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
 import { BaseAdapter } from '../core/base/base-adapter';
 const indeterminateTemplate = '<svg viewBox=\"0 0 4800 4800\"><circle class=\"track-background\" pathLength=\"100\"></circle></svg><div class=\"spinner\"><div class=\"left\"><div class=\"circle\"></div></div><div class=\"right\"><div class=\"circle\"></div></div></div>';
@@ -13,6 +13,18 @@ export class CircularProgressAdapter extends BaseAdapter {
         super(component);
         this._rootElement = getShadowElement(this._component, CIRCULAR_PROGRESS_CONSTANTS.selectors.ROOT);
     }
+    initialize() {
+        // TODO: Replace with ARIA mixin
+        if (!this._component.hasAttribute('role')) {
+            this._component.setAttribute('role', 'progressbar');
+        }
+        if (!this._component.hasAttribute('aria-valuemin')) {
+            this._component.setAttribute('aria-valuemin', '0');
+        }
+        if (!this._component.hasAttribute('aria-valuemax')) {
+            this._component.setAttribute('aria-valuemax', '1');
+        }
+    }
     setDeterminate(value) {
         this._tryResetTemplate();
         this._rootElement.classList.toggle(CIRCULAR_PROGRESS_CONSTANTS.classes.INDETERMINATE, !value);
@@ -22,18 +34,15 @@ export class CircularProgressAdapter extends BaseAdapter {
         }
         else {
             this._rootElement.insertAdjacentHTML('beforeend', indeterminateTemplate);
-            this._rootElement.removeAttribute('aria-valuenow');
+            this._component.removeAttribute('aria-valuenow');
             this._determinateProgressCircleElement = undefined;
         }
     }
     setProgress(value) {
         var _a;
-        this._rootElement.setAttribute('aria-valuenow', `${value}`);
+        this._component.setAttribute('aria-valuenow', `${value}`);
         (_a = this._determinateProgressCircleElement) === null || _a === void 0 ? void 0 : _a.setAttribute('stroke-dashoffset', `${(1 - value) * 100}`);
     }
-    setAriaLabel(value) {
-        toggleAttribute(this._rootElement, !!value, 'aria-label', value);
-    }
     _tryResetTemplate() {
         var _a;
         const elements = (_a = this._component.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(CIRCULAR_PROGRESS_CONSTANTS.selectors.TEMPLATES);

package/esm/circular-progress/circular-progress-constants.d.ts

@@ -10,8 +10,7 @@ export declare const CIRCULAR_PROGRESS_CONSTANTS: {
         DETERMINATE: string;
         PROGRESS: string;
         THEME: string;
-        NO_TRACK: string;
-        ARIA_LABEL: string;
+        TRACK: string;
     };
     classes: {
         INDETERMINATE: string;

package/esm/circular-progress/circular-progress-constants.js

@@ -9,8 +9,7 @@ const attributes = {
     DETERMINATE: 'determinate',
     PROGRESS: 'progress',
     THEME: 'theme',
-    NO_TRACK: 'no-track',
-    ARIA_LABEL: 'data-aria-label'
+    TRACK: 'track'
 };
 const classes = {
     INDETERMINATE: 'forge-circular-progress--indeterminate'

package/esm/circular-progress/circular-progress-foundation.d.ts

@@ -29,5 +29,4 @@ export declare class CircularProgressFoundation implements ICircularProgressFoun
     set theme(value: CircularProgressTheme);
     get track(): boolean;
     set track(value: boolean);
-    set ariaLabel(value: string);
 }

package/esm/circular-progress/circular-progress-foundation.js

@@ -10,9 +10,10 @@ export class CircularProgressFoundation {
         this._determinate = false;
         this._progress = 0;
         this._theme = 'primary';
-        this._track = true;
+        this._track = false;
     }
     initialize() {
+        this._adapter.initialize();
         this._applyDeterminate();
     }
     _applyDeterminate() {
@@ -60,10 +61,7 @@ export class CircularProgressFoundation {
         value = Boolean(value);
         if (this._track !== value) {
             this._track = value;
-            this._adapter.toggleHostAttribute(CIRCULAR_PROGRESS_CONSTANTS.attributes.NO_TRACK, !this._track);
+            this._adapter.toggleHostAttribute(CIRCULAR_PROGRESS_CONSTANTS.attributes.TRACK, this._track);
         }
     }
-    set ariaLabel(value) {
-        this._adapter.setAriaLabel(value);
-    }
 }

package/esm/circular-progress/circular-progress.d.ts

@@ -35,8 +35,7 @@ declare global {
  * @attribute {boolean} determinate - Controls the determinate state.
  * @attribute {boolean} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
  * @attribute {CircularProgressTheme} theme - Controls the theme of the progress indicator.
- * @attribute {boolean} no-track - Controls the visibility of the track background.
- * @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progressbar element.
+ * @attribute {boolean} track - Controls the visibility of the track background.
  *
  * @slot - The is the default/unnamed slot. Renders content at the center of the progress indicator.
  *

package/esm/circular-progress/circular-progress.js

@@ -9,8 +9,8 @@ import { CircularProgressAdapter } from './circular-progress-adapter';
 import { CircularProgressFoundation } from './circular-progress-foundation';
 import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
 import { BaseComponent } from '../core/base/base-component';
-const template = '<template><div class=\"forge-circular-progress\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"1\" part=\"progressbar\"><slot class=\"center-content\"></slot></div></template>';
-const styles = ':host{--_circular-progress-size:var(--forge-circular-progress-size, 48px)}:host{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;min-block-size:var(--_circular-progress-size);min-inline-size:var(--_circular-progress-size);position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;contain:strict;content-visibility:auto}:host([hidden]){display:none}.forge-circular-progress{--_circular-progress-padding:var(--forge-circular-progress-padding, 0);--_circular-progress-track-width:var(--forge-circular-progress-track-width, 12);--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-tertiary-container, #d0d7ff));--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_circular-progress-arc-duration:var(--forge-circular-progress-arc-duration, 1333ms);--_circular-progress-theme-transition-duration:var(--forge-circular-progress-theme-transition-duration, var(--forge-animation-duration-short3, 150ms));--_circular-progress-theme-transition-timing:var(--forge-circular-progress-theme-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-circular-progress{-webkit-box-flex:1;flex:1;align-self:stretch;margin:var(--_circular-progress-padding)}.forge-circular-progress--indeterminate{will-change:transform;-webkit-animation:linear infinite linear-rotate;animation:linear infinite linear-rotate;-webkit-animation-duration:calc(var(--_circular-progress-arc-duration) * 360 / 306);animation-duration:calc(var(--_circular-progress-arc-duration) * 360 / 306)}.circle,.forge-circular-progress,.left,.right,.spinner,svg{position:absolute;inset:0}.center-content{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;height:100%}.left{overflow:hidden;inset:0 50% 0 0}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.right .circle{rotate:100deg;inset:0 0 0 -100%;-webkit-animation-delay:calc(-.5 * var(--_circular-progress-arc-duration)),0s;animation-delay:calc(-.5 * var(--_circular-progress-arc-duration)),0s}.circle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:50%;border:solid calc(var(--_circular-progress-size) * var(--_circular-progress-track-width)/ 100);border-color:var(--_circular-progress-indicator-color) var(--_circular-progress-indicator-color) transparent transparent;-webkit-transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);will-change:transform;-webkit-animation:expand-arc;animation:expand-arc;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}svg circle{cx:50%;cy:50%;r:calc(50% * (1 - var(--_circular-progress-track-width)/ 100));stroke-width:calc(var(--_circular-progress-track-width) * 1%);stroke-dasharray:100;fill:transparent}.progress{-webkit-transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-indicator-color)}.track{stroke:transparent}.track-background{-webkit-transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-track-color)}.spinner{will-change:transform;-webkit-animation:infinite both rotate-arc;animation:infinite both rotate-arc;-webkit-animation-duration:calc(4 * var(--_circular-progress-arc-duration));animation-duration:calc(4 * var(--_circular-progress-arc-duration));-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}:host([theme=primary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-primary, #3f51b5));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-secondary, #ffc107));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=success]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-success, #2e7d32));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-error, #b00020));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-warning, #d14900));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=info]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-info, #1565c0));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-info-container, #c7daf0))}:host([no-track]) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, transparent)}@media screen and (forced-colors:active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@-webkit-keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@-webkit-keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@-webkit-keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}';
+const template = '<template><div class=\"forge-circular-progress\" part=\"progressbar\"><slot class=\"center-content\"></slot></div></template>';
+const styles = ':host{--_circular-progress-size:var(--forge-circular-progress-size, 48px)}:host{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;min-block-size:var(--_circular-progress-size);min-inline-size:var(--_circular-progress-size);position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-transition:background-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:background-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);contain:strict;content-visibility:auto}:host([hidden]){display:none}.forge-circular-progress{--_circular-progress-padding:var(--forge-circular-progress-padding, 0);--_circular-progress-track-width:var(--forge-circular-progress-track-width, 12);--_circular-progress-track-color:var(--forge-circular-progress-track-color, transparent);--_circular-progress-track-fill-color:var(--forge-circular-progress-track-fill-color, var(--forge-theme-tertiary-container, #d0d7ff));--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_circular-progress-arc-duration:var(--forge-circular-progress-arc-duration, 1333ms);--_circular-progress-theme-transition-duration:var(--forge-circular-progress-theme-transition-duration, var(--forge-animation-duration-short3, 150ms));--_circular-progress-theme-transition-timing:var(--forge-circular-progress-theme-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-circular-progress{-webkit-box-flex:1;flex:1;align-self:stretch;margin:var(--_circular-progress-padding)}.forge-circular-progress--indeterminate{will-change:transform;-webkit-animation:linear infinite linear-rotate;animation:linear infinite linear-rotate;-webkit-animation-duration:calc(var(--_circular-progress-arc-duration) * 360 / 306);animation-duration:calc(var(--_circular-progress-arc-duration) * 360 / 306)}.circle,.forge-circular-progress,.left,.right,.spinner,svg{position:absolute;inset:0}.center-content{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;height:100%}.left{overflow:hidden;inset:0 50% 0 0}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.right .circle{rotate:100deg;inset:0 0 0 -100%;-webkit-animation-delay:calc(-.5 * var(--_circular-progress-arc-duration)),0s;animation-delay:calc(-.5 * var(--_circular-progress-arc-duration)),0s}.circle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:50%;border:solid calc(var(--_circular-progress-size) * var(--_circular-progress-track-width)/ 100);border-color:var(--_circular-progress-indicator-color) var(--_circular-progress-indicator-color) transparent transparent;-webkit-transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);will-change:transform;-webkit-animation:expand-arc;animation:expand-arc;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}svg circle{cx:50%;cy:50%;r:calc(50% * (1 - var(--_circular-progress-track-width)/ 100));stroke-width:calc(var(--_circular-progress-track-width) * 1%);stroke-dasharray:100;fill:transparent}.progress{-webkit-transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-indicator-color)}.track{stroke:transparent}.track-background{-webkit-transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-track-color)}.spinner{will-change:transform;-webkit-animation:infinite both rotate-arc;animation:infinite both rotate-arc;-webkit-animation-duration:calc(4 * var(--_circular-progress-arc-duration));animation-duration:calc(4 * var(--_circular-progress-arc-duration));-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}:host([theme=primary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-primary, #3f51b5));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-secondary, #ffc107));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=success]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-success, #2e7d32));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-error, #b00020));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-warning, #d14900));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=info]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-info, #1565c0));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-info-container, #c7daf0))}:host([track]) .forge-circular-progress{--_circular-progress-track-color:var(--_circular-progress-track-fill-color)}@media screen and (forced-colors:active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@-webkit-keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@-webkit-keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@-webkit-keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}';
 /**
  * @tag forge-circular-progress
  *
@@ -30,8 +30,7 @@ const styles = ':host{--_circular-progress-size:var(--forge-circular-progress-si
  * @attribute {boolean} determinate - Controls the determinate state.
  * @attribute {boolean} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
  * @attribute {CircularProgressTheme} theme - Controls the theme of the progress indicator.
- * @attribute {boolean} no-track - Controls the visibility of the track background.
- * @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progressbar element.
+ * @attribute {boolean} track - Controls the visibility of the track background.
  *
  * @slot - The is the default/unnamed slot. Renders content at the center of the progress indicator.
  *
@@ -52,8 +51,7 @@ let CircularProgressComponent = class CircularProgressComponent extends BaseComp
             CIRCULAR_PROGRESS_CONSTANTS.attributes.DETERMINATE,
             CIRCULAR_PROGRESS_CONSTANTS.attributes.PROGRESS,
             CIRCULAR_PROGRESS_CONSTANTS.attributes.THEME,
-            CIRCULAR_PROGRESS_CONSTANTS.attributes.NO_TRACK,
-            CIRCULAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL
+            CIRCULAR_PROGRESS_CONSTANTS.attributes.TRACK
         ];
     }
     constructor() {
@@ -75,11 +73,8 @@ let CircularProgressComponent = class CircularProgressComponent extends BaseComp
             case CIRCULAR_PROGRESS_CONSTANTS.attributes.THEME:
                 this.theme = newValue;
                 break;
-            case CIRCULAR_PROGRESS_CONSTANTS.attributes.NO_TRACK:
-                this.track = !coerceBoolean(newValue);
-                break;
-            case CIRCULAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL:
-                this._foundation.ariaLabel = newValue;
+            case CIRCULAR_PROGRESS_CONSTANTS.attributes.TRACK:
+                this.track = coerceBoolean(newValue);
                 break;
         }
     }

package/esm/constants.d.ts

@@ -3,14 +3,35 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import type { IBaseComponent } from './core/base/base-component';
 export declare const COMPONENT_NAME_PREFIX = "forge-";
 export declare const KEYSTROKE_DEBOUNCE_THRESHOLD = 500;
 export declare const ICON_CLASS_NAME = "tyler-icons";
 export declare const CDN_BASE_URL = "https://cdn.forge.tylertech.com/";
+/** A method symbol that gets the submitted value of a form-associated component. */
+export declare const getFormValue: unique symbol;
+/** A method symbol that gets the form state of a form-associated component. */
+export declare const getFormState: unique symbol;
+/** A method symbol that gets the validation message of a form-associated component. */
+export declare const getValidationMessage: unique symbol;
 /** A property symbol that references the `ElementInternals` instance of an element. */
 export declare const internals: unique symbol;
+/** A property symbol that sets the type of an internal input element used to create validations messages */
+export declare const inputType: unique symbol;
 /** A property symbol that indicates whether or not a `Focusable` element can be focused. */
 export declare const isFocusable: unique symbol;
+/** A method symbol that sets default ARIA on the `ElementInternals` instance of an element if
+ * supported or sprouts attributes if not. */
+export declare const setDefaultAria: unique symbol;
 export type Theme = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info';
-export type MixinBase<ExpectedBase = object> = abstract new (...args: any[]) => ExpectedBase;
-export type MixinReturn<TBase extends MixinBase, MixinClass = object> = (abstract new (...args: any[]) => MixinClass) & TBase;
+export type Density = 'small' | 'medium' | 'large';
+export type AbstractConstructor<T> = abstract new (...args: any[]) => T;
+export type MixinBase<TBase = IBaseComponent> = AbstractConstructor<TBase>;
+/**
+ * The `focusVisible` property is an experimental feature that is not yet supported by all browsers.
+ *
+ * We will use this to allow for setting focus to elements programmatically and showing the focus indicator.
+ */
+export type ExperimentalFocusOptions = FocusOptions & {
+    focusVisible?: boolean;
+};

package/esm/constants.js

@@ -7,7 +7,18 @@ export const COMPONENT_NAME_PREFIX = 'forge-';
 export const KEYSTROKE_DEBOUNCE_THRESHOLD = 500;
 export const ICON_CLASS_NAME = 'tyler-icons';
 export const CDN_BASE_URL = 'https://cdn.forge.tylertech.com/';
+/** A method symbol that gets the submitted value of a form-associated component. */
+export const getFormValue = Symbol('getFormValue');
+/** A method symbol that gets the form state of a form-associated component. */
+export const getFormState = Symbol('getFormState');
+/** A method symbol that gets the validation message of a form-associated component. */
+export const getValidationMessage = Symbol('getValidityMessage');
 /** A property symbol that references the `ElementInternals` instance of an element. */
 export const internals = Symbol('ElementInternals');
+/** A property symbol that sets the type of an internal input element used to create validations messages */
+export const inputType = Symbol('inputType');
 /** A property symbol that indicates whether or not a `Focusable` element can be focused. */
 export const isFocusable = Symbol('isFocusable');
+/** A method symbol that sets default ARIA on the `ElementInternals` instance of an element if
+ * supported or sprouts attributes if not. */
+export const setDefaultAria = Symbol('setDefaultAria');

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

@@ -8,6 +8,7 @@ export interface IBaseAdapter<T extends HTMLElement = HTMLElement> {
     readonly hostElement: T;
     readonly isConnected: boolean;
     removeHostAttribute(name: string): void;
+    hasHostAttribute(name: string): boolean;
     getHostAttribute(name: string): string | null;
     setHostAttribute(name: string, value?: string): void;
     toggleHostAttribute(name: string, hasAttribute: boolean, value?: string): void;
@@ -17,6 +18,7 @@ export interface IBaseAdapter<T extends HTMLElement = HTMLElement> {
         composed?: boolean;
     }): boolean;
     emitHostEvent(type: string, data?: any, bubble?: boolean, cancelable?: boolean): boolean;
+    dispatchHostEvent<U extends Event>(event: U): boolean;
     addHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
     removeHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
     addWindowListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
@@ -32,6 +34,7 @@ export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapt
     protected _component: T;
     constructor(_component: T);
     get hostElement(): T;
+    hasHostAttribute(name: string): boolean;
     getHostAttribute(name: string): string | null;
     setHostAttribute(name: string, value?: string): void;
     removeHostAttribute(name: string): void;
@@ -42,6 +45,7 @@ export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapt
         composed?: boolean;
     }): boolean;
     emitHostEvent(type: string, data?: any, bubble?: boolean, cancelable?: boolean): boolean;
+    dispatchHostEvent<U extends Event>(event: U): boolean;
     toggleHostListener(event: string, listener: EventListener, value: boolean, options?: boolean | AddEventListenerOptions): void;
     addHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
     removeHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;

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

@@ -11,6 +11,9 @@ export class BaseAdapter {
     get hostElement() {
         return this._component;
     }
+    hasHostAttribute(name) {
+        return this._component.hasAttribute(name);
+    }
     getHostAttribute(name) {
         return this._component.getAttribute(name);
     }
@@ -40,6 +43,9 @@ export class BaseAdapter {
     emitHostEvent(type, data = null, bubble = true, cancelable) {
         return emitEvent(this._component, type, data, bubble, cancelable);
     }
+    dispatchHostEvent(event) {
+        return !this._component.dispatchEvent(event);
+    }
     toggleHostListener(event, listener, value, options) {
         if (value) {
             this.addHostListener(event, listener, options);
@@ -76,7 +82,7 @@ export class BaseAdapter {
         document.body.removeAttribute(name);
     }
     focusHost(options) {
-        this._component.focus(options);
+        HTMLElement.prototype.focus.call(this._component, options);
     }
     get isConnected() {
         return this._component.isConnected;

package/esm/core/base/base-component.d.ts

@@ -4,6 +4,10 @@
  * License: Apache-2.0
  */
 export interface IBaseComponent extends HTMLElement {
+    initializedCallback?(): void;
+    connectedCallback?(): void;
+    disconnectedCallback?(): void;
+    attributeChangedCallback?(name: string, oldValue: string, newValue: string): void;
 }
 export declare abstract class BaseComponent extends HTMLElement implements IBaseComponent {
 }