@tylertech/forge 3.5.1 → 3.6.0

package/esm/button-area/button-area.js

@@ -12,7 +12,7 @@ import { FocusIndicatorComponent } from '../focus-indicator';
 import { StateLayerComponent } from '../state-layer';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-button-area\" id=\"root\" part=\"root\"><div class=\"button\" id=\"button\" part=\"button\"><slot name=\"button\"></slot></div><slot id=\"content\"></slot><forge-state-layer target=\"root\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator target=\"button\" part=\"focus-indicator\" inward></forge-focus-indicator></div></template>';
-const styles = ':host{display:block;position:relative}:host .forge-button-area{cursor:var(--_button-area-cursor)}:host([hidden]){display:none}:host([disabled]) .forge-button-area{cursor:var(--_button-area-disabled-cursor)}.forge-button-area{--_button-area-primary-color:var(--forge-button-area-primary-color, var(--forge-theme-primary, #3f51b5));--_button-area-cursor:var(--forge-button-area-cursor, pointer);--_button-area-disabled-cursor:var(--forge-button-area-disabled-cursor, not-allowed);--_button-area-focus-indicator-color:var(--forge-button-area-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_button-area-focus-indicator-offset:var(--forge-button-area-focus-indicator-offset, 4px)}.forge-button-area{position:relative;overflow:hidden}.forge-button-area .button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}forge-focus-indicator{z-index:1;--forge-focus-indicator-color:var(--_button-area-focus-indicator-color);--forge-focus-indicator-outward-offset:var(--_button-area-focus-indicator-offset)}forge-state-layer{--forge-state-layer-color:var(--_button-area-primary-color);border-radius:inherit}';
+const styles = ':host{display:block;position:relative}:host .forge-button-area{cursor:var(--_button-area-cursor)}:host([hidden]){display:none}:host([disabled]) .forge-button-area{cursor:var(--_button-area-disabled-cursor)}.forge-button-area{--_button-area-primary-color:var(--forge-button-area-primary-color, var(--forge-theme-primary, #3f51b5));--_button-area-cursor:var(--forge-button-area-cursor, pointer);--_button-area-disabled-cursor:var(--forge-button-area-disabled-cursor, not-allowed);--_button-area-focus-indicator-color:var(--forge-button-area-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_button-area-focus-indicator-offset:var(--forge-button-area-focus-indicator-offset, 4px)}.forge-button-area{position:relative;overflow:hidden;block-size:100%;inline-size:100%}.forge-button-area .button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}forge-focus-indicator{z-index:1;--forge-focus-indicator-color:var(--_button-area-focus-indicator-color);--forge-focus-indicator-outward-offset:var(--_button-area-focus-indicator-offset)}forge-state-layer{--forge-state-layer-color:var(--_button-area-primary-color);border-radius:inherit}';
 /**
  * @tag forge-button-area
  *

package/esm/checkbox/checkbox.d.ts

@@ -51,6 +51,7 @@ declare const CheckboxComponent_base: import("../constants").AbstractConstructor
  * @cssproperty --forge-checkbox-elevation - The shadow of the checkbox.
  * @cssproperty --forge-checkbox-gap - The space between the checkbox and label.
  * @cssproperty --forge-checkbox-justify - How the checkbox and label are distributed along their main axis.
+ * @cssproperty --forge-checkbox-align - How the checkbox and label are distributed along their cross axis.
  * @cssproperty --forge-checkbox-direction - Whether the checkbox and label are arranged along the inline or block axis.
  * @cssproperty --forge-checkbox-checked-background - The color of the checkbox background when checked or indeterminate.
  * @cssproperty --forge-checkbox-checked-border-width - The width of the checkbox border when checked or indeterminate.

package/esm/checkbox/checkbox.js

@@ -18,7 +18,7 @@ import { CheckboxAdapter } from './checkbox-adapter';
 import { CHECKBOX_CONSTANTS } from './checkbox-constants';
 import { CheckboxCore } from './checkbox-core';
 const template = '<template><div class=\"forge-checkbox\" part=\"root\"><div id=\"container\" class=\"container\"><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=\":host\" part=\"focus-indicator\"></forge-focus-indicator></div><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div><div id=\"label\" class=\"label\" part=\"label\"><slot></slot></div></div></template>';
-const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color:transparent}: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-dense-size, 24px);--_checkbox-background:var(--forge-checkbox-background, 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, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_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:var(--forge-checkbox-checked-background, 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));--_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-checkbox-justify, start);--_checkbox-direction:var(--forge-checkbox-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-checkbox-state-layer-unchecked-color, var(--_checkbox-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_checkbox-dense-gap:var(--forge-checkbox-dense-gap, 8px);--_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-background-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-icon-animation-timing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;flex-direction:var(--_checkbox-direction);flex-shrink:0;align-items:center;justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:flex}.forge-checkbox .container{position:relative;align-items:center;justify-content:center;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 .background{position:relative;align-items:center;justify-content:center;display:flex;transition-property:background,border-width,border-color;transition-duration:var(--_checkbox-animation-duration);transition-timing-function:var(--_checkbox-background-animation-timing);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);box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background:var(--_checkbox-background)}.forge-checkbox .icon{position:absolute;transition-property:stroke-dashoffset;transition-duration:var(--_checkbox-animation-duration);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;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);cursor:default}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background:var(--_checkbox-checked-background)}:host([checked]) .icon--checked{transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{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:var(--_checkbox-checked-background)}:host([indeterminate]) .icon--checked{transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{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{--_checkbox-gap:var(--_checkbox-dense-gap)}: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 .container{opacity:var(--_checkbox-disabled-opacity);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}';
+const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color:transparent}: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-dense-size, 24px);--_checkbox-background:var(--forge-checkbox-background, 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, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_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:var(--forge-checkbox-checked-background, 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));--_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-checkbox-justify, start);--_checkbox-align:var(--forge-checkbox-align, center);--_checkbox-direction:var(--forge-checkbox-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-checkbox-state-layer-unchecked-color, var(--_checkbox-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_checkbox-dense-gap:var(--forge-checkbox-dense-gap, 8px);--_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-background-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-icon-animation-timing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;flex-direction:var(--_checkbox-direction);align-items:var(--_checkbox-align);justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:flex}.forge-checkbox .container{position:relative;align-items:center;justify-content:center;display:flex;flex-shrink:0;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 .background{position:relative;align-items:center;justify-content:center;display:flex;transition-property:background,border-width,border-color;transition-duration:var(--_checkbox-animation-duration);transition-timing-function:var(--_checkbox-background-animation-timing);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);box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background:var(--_checkbox-background)}.forge-checkbox .icon{position:absolute;transition-property:stroke-dashoffset;transition-duration:var(--_checkbox-animation-duration);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;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);cursor:default}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background:var(--_checkbox-checked-background)}:host([checked]) .icon--checked{transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{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:var(--_checkbox-checked-background)}:host([indeterminate]) .icon--checked{transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{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{--_checkbox-gap:var(--_checkbox-dense-gap)}: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 .container{opacity:var(--_checkbox-disabled-opacity);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
  *
@@ -41,6 +41,7 @@ const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color
  * @cssproperty --forge-checkbox-elevation - The shadow of the checkbox.
  * @cssproperty --forge-checkbox-gap - The space between the checkbox and label.
  * @cssproperty --forge-checkbox-justify - How the checkbox and label are distributed along their main axis.
+ * @cssproperty --forge-checkbox-align - How the checkbox and label are distributed along their cross axis.
  * @cssproperty --forge-checkbox-direction - Whether the checkbox and label are arranged along the inline or block axis.
  * @cssproperty --forge-checkbox-checked-background - The color of the checkbox background when checked or indeterminate.
  * @cssproperty --forge-checkbox-checked-border-width - The width of the checkbox border when checked or indeterminate.

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

@@ -28,6 +28,8 @@ export interface IDialogAdapter extends IBaseAdapter<IDialogComponent> {
     removeSurfaceClass(className: string): void;
     addFullscreenListener(breakpoint: number, listener: (value: boolean) => void): void;
     removeFullscreenListener(listener: (value: boolean) => void): void;
+    setAccessibleLabel(label: string): void;
+    setAccessibleDescription(description: string): void;
 }
 export declare class DialogAdapter extends BaseAdapter<IDialogComponent> implements IDialogAdapter {
     private _dialogElement;
@@ -35,6 +37,8 @@ export declare class DialogAdapter extends BaseAdapter<IDialogComponent> impleme
     private _backdropElement;
     private _moveHandleElement;
     private _fullscreenMediaQuery;
+    private _accessibleLabelElement;
+    private _accessibleDescriptionElement;
     triggerElement: HTMLElement | null;
     get moveHandleElement(): HTMLElement;
     get surfaceElement(): HTMLElement;
@@ -59,4 +63,7 @@ export declare class DialogAdapter extends BaseAdapter<IDialogComponent> impleme
     removeSurfaceClass(className: string): void;
     addFullscreenListener(breakpoint: number, listener: (value: boolean) => void): void;
     removeFullscreenListener(listener: (value: boolean) => void): void;
+    setAccessibleLabel(label: string): void;
+    setAccessibleDescription(description: string): void;
+    private _createVisuallyHiddenElement;
 }

package/esm/dialog/dialog-adapter.js

@@ -5,10 +5,9 @@
  */
 import { getShadowElement, playKeyframeAnimation } from '@tylertech/forge-core';
 import { BACKDROP_CONSTANTS } from '../backdrop';
-import { setDefaultAria } from '../constants';
 import { BaseAdapter } from '../core/base/base-adapter';
 import { DialogComponent } from './dialog';
-import { dialogStack, DIALOG_CONSTANTS, hideBackdrop, showBackdrop } from './dialog-constants';
+import { DIALOG_CONSTANTS, dialogStack, hideBackdrop, showBackdrop } from './dialog-constants';
 export class DialogAdapter extends BaseAdapter {
     get moveHandleElement() {
         return this._moveHandleElement;
@@ -31,15 +30,14 @@ export class DialogAdapter extends BaseAdapter {
         if (this._dialogElement.open) {
             return;
         }
-        const role = this._component.getAttribute('role');
-        if (!role || !['presentation', 'none'].includes(role)) {
-            this._component[setDefaultAria]({
-                role: this._component.type,
-                ariaModal: this._component.mode === 'modal' || this._component.mode === 'inline-modal' ? 'true' : 'false'
-            }, { setAttribute: true });
+        if (this._component.type !== 'dialog') {
+            this._dialogElement.setAttribute('role', this._component.type);
         }
-        // Show the dialog (and backdrop) based on modal vs non-modal
         const isModal = this._component.mode === 'modal' || this._component.mode === 'inline-modal';
+        if (!isModal) {
+            this._dialogElement.setAttribute('aria-modal', 'false');
+        }
+        // Show the dialog (and backdrop) based on modal vs non-modal
         if (isModal) {
             if (this._component.animationType === 'none') {
                 this._backdropElement.show();
@@ -68,13 +66,6 @@ export class DialogAdapter extends BaseAdapter {
             .at(-1)?.[showBackdrop]();
     }
     async hide() {
-        const role = this._component.getAttribute('role');
-        if (!role || !['presentation', 'none'].includes(role)) {
-            this._component[setDefaultAria]({
-                role: null,
-                ariaModal: null
-            }, { setAttribute: true });
-        }
         const close = () => {
             this._surfaceElement.classList.remove(BACKDROP_CONSTANTS.classes.EXITING);
             this._dialogElement.close();
@@ -109,9 +100,13 @@ export class DialogAdapter extends BaseAdapter {
     tryAutofocus() {
         window.requestAnimationFrame(() => {
             window.requestAnimationFrame(() => {
-                if (this._component.open && this._dialogElement.isConnected && !this._component.matches(':focus-within')) {
-                    const autofocusElement = this._component.querySelector(DIALOG_CONSTANTS.selectors.AUTOFOCUS);
-                    autofocusElement?.focus();
+                const alreadyHasFocus = this._component.matches(':focus-within');
+                if (!alreadyHasFocus) {
+                    this._dialogElement.focus();
+                    if (this._component.open && this._dialogElement.isConnected) {
+                        const autofocusElement = this._component.querySelector(DIALOG_CONSTANTS.selectors.AUTOFOCUS);
+                        autofocusElement?.focus();
+                    }
                 }
             });
         });
@@ -153,4 +148,33 @@ export class DialogAdapter extends BaseAdapter {
         this._fullscreenMediaQuery?.removeEventListener('change', event => listener(event.matches));
         this._fullscreenMediaQuery = undefined;
     }
+    setAccessibleLabel(label) {
+        if (label?.trim()) {
+            this._accessibleLabelElement = this._createVisuallyHiddenElement(DIALOG_CONSTANTS.attributes.ARIA_LABEL_ID, label);
+            this._dialogElement.appendChild(this._accessibleLabelElement);
+            this._dialogElement.setAttribute('aria-labelledby', this._accessibleLabelElement.id);
+        }
+        else {
+            this._dialogElement.removeAttribute('aria-labelledby');
+            this._accessibleLabelElement?.remove();
+        }
+    }
+    setAccessibleDescription(description) {
+        if (description?.trim()) {
+            this._accessibleDescriptionElement = this._createVisuallyHiddenElement(DIALOG_CONSTANTS.attributes.ARIA_DESCIPTION_ID, description);
+            this._dialogElement.appendChild(this._accessibleDescriptionElement);
+            this._dialogElement.setAttribute('aria-describedby', this._accessibleDescriptionElement.id);
+        }
+        else {
+            this._dialogElement.removeAttribute('aria-describedby');
+            this._accessibleDescriptionElement?.remove();
+        }
+    }
+    _createVisuallyHiddenElement(id, text) {
+        const element = document.createElement('div');
+        element.classList.add('visually-hidden');
+        element.id = id;
+        element.textContent = text.trim();
+        return element;
+    }
 }

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

@@ -21,12 +21,16 @@ export declare const DIALOG_CONSTANTS: {
         POSITION_STRATEGY: string;
         PLACEMENT: string;
         SIZE_STRATEGY: string;
+        LABEL: string;
+        DESCRIPTION: string;
     };
     classes: {
         MOVED: string;
         MOVING: string;
     };
     attributes: {
+        ARIA_LABEL_ID: string;
+        ARIA_DESCIPTION_ID: string;
         OPEN: string;
         VISIBLE: string;
         MODE: string;
@@ -42,6 +46,8 @@ export declare const DIALOG_CONSTANTS: {
         POSITION_STRATEGY: string;
         PLACEMENT: string;
         SIZE_STRATEGY: string;
+        LABEL: string;
+        DESCRIPTION: string;
     };
     selectors: {
         DIALOG: string;

package/esm/dialog/dialog-constants.js

@@ -20,10 +20,14 @@ const observedAttributes = {
     MOVE_TARGET: 'move-target',
     POSITION_STRATEGY: 'position-strategy',
     PLACEMENT: 'placement',
-    SIZE_STRATEGY: 'size-strategy'
+    SIZE_STRATEGY: 'size-strategy',
+    LABEL: 'label',
+    DESCRIPTION: 'description'
 };
 const attributes = {
-    ...observedAttributes
+    ...observedAttributes,
+    ARIA_LABEL_ID: 'forge-dialog-label',
+    ARIA_DESCIPTION_ID: 'forge-dialog-description'
 };
 const classes = {
     MOVED: 'moved',

package/esm/dialog/dialog-core.d.ts

@@ -20,6 +20,8 @@ export interface IDialogCore {
     sizeStrategy: DialogSizeStrategy;
     placement: DialogPlacement;
     moveable: boolean;
+    label: string;
+    description: string;
     hideBackdrop(): void;
     showBackdrop(): void;
     dispatchBeforeCloseEvent(): boolean;
@@ -37,6 +39,8 @@ export declare class DialogCore implements IDialogCore {
     private _originalFullscreenValue;
     private _trigger;
     private _moveable;
+    private _label;
+    private _description;
     private _sizeStrategy;
     private _placement;
     private _positionStrategy;
@@ -86,6 +90,10 @@ export declare class DialogCore implements IDialogCore {
     set triggerElement(element: HTMLElement | null);
     get moveable(): boolean;
     set moveable(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get description(): string;
+    set description(value: string);
     get positionStrategy(): DialogPositionStrategy;
     set positionStrategy(value: DialogPositionStrategy);
     get sizeStrategy(): DialogSizeStrategy;

package/esm/dialog/dialog-core.js

@@ -19,6 +19,8 @@ export class DialogCore {
         this._fullscreenThreshold = DIALOG_CONSTANTS.defaults.FULLSCREEN_THRESHOLD;
         this._trigger = '';
         this._moveable = false;
+        this._label = '';
+        this._description = '';
         this._sizeStrategy = DIALOG_CONSTANTS.defaults.SIZE_STRATEGY;
         this._placement = DIALOG_CONSTANTS.defaults.PLACEMENT;
         this._positionStrategy = DIALOG_CONSTANTS.defaults.POSITION_STRATEGY;
@@ -29,7 +31,7 @@ export class DialogCore {
         this._fullscreenListener = this._onFullscreenChange.bind(this);
     }
     initialize() {
-        this._adapter.tryApplyGlobalConfiguration(['animationType', 'positionStrategy', 'sizeStrategy', 'persistent', 'moveable', 'fullscreenThreshold']);
+        this._adapter.tryApplyGlobalConfiguration(['mode', 'animationType', 'positionStrategy', 'sizeStrategy', 'persistent', 'moveable', 'fullscreenThreshold']);
         if (this._trigger && !this._adapter.triggerElement) {
             this._adapter.tryLocateTriggerElement(this._trigger);
         }
@@ -319,6 +321,24 @@ export class DialogCore {
             this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.MOVEABLE, this._moveable);
         }
     }
+    get label() {
+        return this._label;
+    }
+    set label(value) {
+        if (this._label !== value) {
+            this._label = value;
+            this._adapter.setAccessibleLabel(this._label);
+        }
+    }
+    get description() {
+        return this._description;
+    }
+    set description(value) {
+        if (this._description !== value) {
+            this._description = value;
+            this._adapter.setAccessibleDescription(this._description);
+        }
+    }
     get positionStrategy() {
         return this._positionStrategy;
     }

package/esm/dialog/dialog.d.ts

@@ -23,6 +23,8 @@ export interface IDialogProperties {
     sizeStrategy: DialogSizeStrategy;
     placement: DialogPlacement;
     moveable: boolean;
+    label: string;
+    description: string;
 }
 export interface IDialogComponent extends IDialogProperties, IWithDefaultAria, IWithElementInternals, IDismissible {
     show(): void;
@@ -50,6 +52,7 @@ declare const DialogComponent_base: import("..").AbstractConstructor<import("../
  *
  * @dependency forge-backdrop
  *
+ * @globalconfig mode
  * @globalconfig animationType
  * @globalconfig positionStrategy
  * @globalconfig sizeStrategy
@@ -241,6 +244,18 @@ export declare class DialogComponent extends DialogComponent_base implements IDi
      * @attribute
      */
     placement: DialogPlacement;
+    /**
+     * The accessible label of the dialog.
+     * @default ''
+     * @attribute
+     */
+    label: string;
+    /**
+     * The accessible description of the dialog.
+     * @default ''
+     * @attribute
+     */
+    description: string;
     /** Shows the dialog. */
     show(): void;
     /** Hides the dialog. */

package/esm/dialog/dialog.js

@@ -15,7 +15,7 @@ import { DialogCore } from './dialog-core';
 import { dialogStack, DIALOG_CONSTANTS, hideBackdrop, showBackdrop } from './dialog-constants';
 import { tryDismiss } from '../core/utils/dismissible-stack';
 const template = '<template><dialog class=\"forge-dialog\" part=\"root\"><forge-backdrop exportparts=\"root:backdrop\"></forge-backdrop><div class=\"surface\" part=\"surface\"><div class=\"move-handle-container\" part=\"move-handle-container\"><div class=\"move-handle\" part=\"move-handle\"><slot name=\"move-handle\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" part=\"move-handle-icon\"><path d=\"M3 15v-2h2v2H3m0-4V9h2v2H3m4 4v-2h2v2H7m0-4V9h2v2H7m4 4v-2h2v2h-2m0-4V9h2v2h-2m4 4v-2h2v2h-2m0-4V9h2v2h-2m4 4v-2h2v2h-2m0-4V9h2v2h-2z\"/></svg></slot></div></div><slot></slot></div></dialog></template>';
-const styles = '@keyframes forge-dialog-zoom-in{from{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}to{opacity:1;scale:1}}@keyframes forge-dialog-zoom-out{from{opacity:1;scale:1}to{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}}@keyframes forge-dialog-fade-in{from{opacity:var(--_dialog-fade-opacity)}to{opacity:1}}@keyframes forge-dialog-fade-out{from{opacity:1}to{opacity:var(--_dialog-fade-opacity)}}@keyframes forge-dialog-slide-in{from{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}to{opacity:1;translate:0 0}}@keyframes forge-dialog-slide-out{from{opacity:1;translate:0 0}to{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}}@layer base,nonmodal,animation,placement,size-strategy,preset,fullscreen,position-strategy,media; @layer base{:host{display:none;--forge-theme-surface:var(--forge-theme-surface-bright, #ffffff)}:host([hidden]){display:none}.forge-dialog{--_dialog-background:var(--forge-dialog-background, var(--forge-theme-surface-bright, #ffffff));--_dialog-shape:var(--forge-dialog-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_dialog-elevation:var(--forge-dialog-elevation, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));--_dialog-spacing:var(--forge-dialog-spacing, auto);--_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, var(--_dialog-spacing));--_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, var(--_dialog-spacing));--_dialog-inline-start-spacing:var(--forge-dialog-inline-start-spacing, var(--_dialog-spacing));--_dialog-inline-end-spacing:var(--forge-dialog-inline-end-spacing, var(--_dialog-spacing));--_dialog-padding:var(--forge-dialog-padding, 0);--_dialog-width:var(--forge-dialog-width, fit-content);--_dialog-height:var(--forge-dialog-height, fit-content);--_dialog-min-width:var(--forge-dialog-min-width, 0);--_dialog-max-width:var(--forge-dialog-max-width, calc(100% - var(--forge-spacing-xxlarge, 48px)));--_dialog-min-height:var(--forge-dialog-min-height, 0);--_dialog-max-height:var(--forge-dialog-max-height, calc(100% - var(--forge-spacing-xxlarge, 48px)));--_dialog-z-index:var(--forge-dialog-z-index, var(--forge-z-index-dialog, 8));--_dialog-move-handle-color:var(--forge-dialog-move-handle-color, currentColor);--_dialog-move-handle-size:var(--forge-dialog-move-handle-size, 24px);--_dialog-move-handle-hover-cursor:var(--forge-dialog-move-handle-hover-cursor, grab);--_dialog-move-handle-active-cursor:var(--forge-dialog-move-handle-active-cursor, grabbing);--_dialog-move-handle-spacing:var(--forge-dialog-move-handle-spacing, calc(var(--forge-spacing-xxsmall, 4px) * -1) 0 0);--_dialog-move-transition-duration:var(--forge-dialog-move-transition-duration, var(--forge-animation-duration-short4, 200ms));--_dialog-move-transition-easing:var(--forge-dialog-move-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_dialog-moving-opacity:var(--forge-dialog-moving-opacity, 0.54);--_dialog-enter-animation-duration:var(--forge-dialog-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-enter-animation-easing:var(--forge-dialog-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_dialog-exit-animation-duration:var(--forge-dialog-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));--_dialog-exit-animation-easing:var(--forge-dialog-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));--_dialog-zoom-opacity:var(--forge-dialog-zoom-opacity, 0);--_dialog-zoom-scale:var(--forge-dialog-zoom-scale, 0.8);--_dialog-fade-opacity:var(--forge-dialog-fade-opacity, 0);--_dialog-slide-opacity:var(--forge-dialog-slide-opacity, 0);--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -30%);--_dialog-backdrop-opacity:var(--forge-dialog-backdrop-opacity, var(--forge-backdrop-opacity, 0.54));--_dialog-nonmodal-elevation:var(--forge-dialog-nonmodal-elevation, 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));--_dialog-fullscreen-enter-animation-duration:var(--forge-dialog-fullscreen-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-fullscreen-exit-animation-duration:var(--forge-dialog-fullscreen-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));--_dialog-position-x:var(--forge-dialog-position-x, 0);--_dialog-position-y:var(--forge-dialog-position-y, 0);--_dialog-preset-sheet-enter-animation-duration:var(--forge-dialog-preset-sheet-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-preset-sheet-exit-animation-duration:var(--forge-dialog-preset-sheet-exit-animation-duration, var(--forge-animation-duration-short3, 150ms))}.forge-dialog{position:fixed;inset:0;z-index:var(--_dialog-z-index);background-color:transparent;color:inherit;border:none;width:auto;height:auto;padding:0;margin:0;overflow:visible;max-width:100%;max-height:100%;box-sizing:border-box}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.surface{position:absolute;inset:0;display:flex;background:var(--_dialog-background);box-shadow:var(--_dialog-elevation);z-index:var(--_dialog-z-index);overflow:hidden;border-radius:var(--_dialog-shape);margin-block-start:var(--_dialog-block-start-spacing);margin-block-end:var(--_dialog-block-end-spacing);margin-inline-start:var(--_dialog-inline-start-spacing);margin-inline-end:var(--_dialog-inline-end-spacing);padding:var(--_dialog-padding);width:var(--_dialog-width);height:var(--_dialog-height);min-width:var(--_dialog-min-width);max-width:var(--_dialog-max-width);min-height:var(--_dialog-min-height);max-height:var(--_dialog-max-height);box-sizing:border-box}dialog.forge-dialog::backdrop{display:none}forge-backdrop{--forge-backdrop-opacity:var(--_dialog-backdrop-opacity);--forge-backdrop-enter-animation-duration:var(--_dialog-enter-animation-duration);--forge-backdrop-enter-animation-easing:var(--_dialog-enter-animation-easing);--forge-backdrop-exit-animation-duration:var(--_dialog-exit-animation-duration);--forge-backdrop-exit-animation-easing:var(--_dialog-exit-animation-easing)}:host(:not([moveable])) .move-handle{display:none}:host([moveable]:not([fullscreen])) .surface{user-select:none;transition-property:opacity;transition-duration:var(--_dialog-move-transition-duration);transition-timing-function:var(--_dialog-move-transition-easing)}:host([moveable]:not([fullscreen])) .surface:not(:hover) .move-handle-container{display:none}:host([moveable]:not([fullscreen])) .surface.moved{margin:0}:host([moveable]:not([fullscreen])) .surface.moving{opacity:var(--_dialog-moving-opacity)}:host([moveable]:not([fullscreen])) .move-handle-container{position:absolute;top:0;z-index:1;display:flex;justify-content:center;width:100%}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle{fill:var(--_dialog-move-handle-color);height:var(--_dialog-move-handle-size);width:var(--_dialog-move-handle-size);margin:var(--_dialog-move-handle-spacing);touch-action:none}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle:hover{cursor:var(--_dialog-move-handle-hover-cursor)}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle:active{cursor:var(--_dialog-move-handle-active-cursor)}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle svg{fill:currentColor}:host([visible]){display:contents}}@layer nonmodal{:host([mode=nonmodal]) .forge-dialog{pointer-events:none}:host([mode=nonmodal]) .container{display:contents}:host([mode=nonmodal]) .surface{--_dialog-elevation:var(--_dialog-nonmodal-elevation);pointer-events:all}:host([mode=nonmodal]) forge-backdrop{display:none}}@layer animation{:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface{animation-duration:var(--_dialog-enter-animation-duration);animation-timing-function:var(--_dialog-enter-animation-easing)}:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface.exiting{animation-duration:var(--_dialog-exit-animation-duration);animation-timing-function:var(--_dialog-exit-animation-easing)}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface{animation-name:forge-dialog-zoom-in}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-zoom-out}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface{animation-name:forge-dialog-fade-in}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-fade-out}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface{animation-name:forge-dialog-slide-in}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-slide-out}}@layer placement{:host([placement=custom]) .surface{margin:0;top:var(--_dialog-position-x);left:var(--_dialog-position-y)}:host([placement=top]) .surface{--_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, 0);top:0;bottom:auto}:host([placement=top-right]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:0;left:auto;right:0;bottom:auto}:host([placement=top-left]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:0;left:0;right:auto;bottom:auto}:host([placement=bottom]) .surface{--_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, 0);top:auto;bottom:0}:host([placement=bottom-right]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:auto;left:auto;right:0;bottom:0}:host([placement=bottom-left]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:auto;left:0;right:auto;bottom:0}}@layer size-strategy{:host([size-strategy=container-inline]) .surface{width:100%}:host([size-strategy=container-block]) .surface{height:100%}}@layer preset{:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .forge-dialog{--_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);--_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration)}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface{animation-name:forge-dialog-slide-in}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface.exiting{animation-name:forge-dialog-slide-out}:host(:is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface{--_dialog-max-width:var(--forge-dialog-max-width, none);--_dialog-max-height:var(--forge-dialog-max-height, none);inset:auto;display:inline-flex}:host([preset=left-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, -100% 0)}:host([preset=left-sheet]) .surface{left:0;bottom:0;top:0;height:100%;border-top-left-radius:0;border-bottom-left-radius:0}:host([preset=right-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 100% 0)}:host([preset=right-sheet]) .surface{right:0;bottom:0;top:0;height:100%;border-top-right-radius:0;border-bottom-right-radius:0}:host([preset=top-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -100%)}:host([preset=top-sheet]) .surface{top:0;left:0;right:0;border-top-left-radius:0;border-top-right-radius:0}:host([preset=bottom-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 100%)}:host([preset=bottom-sheet]) .surface{bottom:0;left:0;right:0;border-bottom-left-radius:0;border-bottom-right-radius:0}}@layer fullscreen{:host([fullscreen]) .forge-dialog{--_dialog-enter-animation-duration:var(--_dialog-fullscreen-enter-animation-duration);--_dialog-exit-animation-duration:var(--_dialog-fullscreen-exit-animation-duration)}:host([fullscreen]) .surface{height:100%;width:100%;max-width:none;max-height:none;border-radius:0;box-shadow:none}:host([fullscreen]) forge-backdrop{display:none}}@layer position-strategy{:host([position-strategy=viewport]) .forge-dialog{position:fixed}:host([position-strategy=container]) .forge-dialog{position:absolute}:host([position-strategy=container][preset$=-sheet]) .forge-dialog{contain:content}}@layer media{@media (prefers-reduced-motion:reduce){.surface{animation-name:forge-dialog-fade-in}.surface.exiting{animation-name:forge-dialog-fade-out}}}';
+const styles = '@keyframes forge-dialog-zoom-in{from{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}to{opacity:1;scale:1}}@keyframes forge-dialog-zoom-out{from{opacity:1;scale:1}to{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}}@keyframes forge-dialog-fade-in{from{opacity:var(--_dialog-fade-opacity)}to{opacity:1}}@keyframes forge-dialog-fade-out{from{opacity:1}to{opacity:var(--_dialog-fade-opacity)}}@keyframes forge-dialog-slide-in{from{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}to{opacity:1;translate:0 0}}@keyframes forge-dialog-slide-out{from{opacity:1;translate:0 0}to{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}}@layer base,nonmodal,animation,placement,size-strategy,preset,fullscreen,position-strategy,media; @layer base{:host{display:none;--forge-theme-surface:var(--forge-theme-surface-bright, #ffffff)}:host([hidden]){display:none}.forge-dialog{--_dialog-background:var(--forge-dialog-background, var(--forge-theme-surface-bright, #ffffff));--_dialog-shape:var(--forge-dialog-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_dialog-elevation:var(--forge-dialog-elevation, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));--_dialog-spacing:var(--forge-dialog-spacing, auto);--_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, var(--_dialog-spacing));--_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, var(--_dialog-spacing));--_dialog-inline-start-spacing:var(--forge-dialog-inline-start-spacing, var(--_dialog-spacing));--_dialog-inline-end-spacing:var(--forge-dialog-inline-end-spacing, var(--_dialog-spacing));--_dialog-padding:var(--forge-dialog-padding, 0);--_dialog-width:var(--forge-dialog-width, fit-content);--_dialog-height:var(--forge-dialog-height, fit-content);--_dialog-min-width:var(--forge-dialog-min-width, 0);--_dialog-max-width:var(--forge-dialog-max-width, calc(100% - var(--forge-spacing-xxlarge, 48px)));--_dialog-min-height:var(--forge-dialog-min-height, 0);--_dialog-max-height:var(--forge-dialog-max-height, calc(100% - var(--forge-spacing-xxlarge, 48px)));--_dialog-z-index:var(--forge-dialog-z-index, var(--forge-z-index-dialog, 8));--_dialog-move-handle-color:var(--forge-dialog-move-handle-color, currentColor);--_dialog-move-handle-size:var(--forge-dialog-move-handle-size, 24px);--_dialog-move-handle-hover-cursor:var(--forge-dialog-move-handle-hover-cursor, grab);--_dialog-move-handle-active-cursor:var(--forge-dialog-move-handle-active-cursor, grabbing);--_dialog-move-handle-spacing:var(--forge-dialog-move-handle-spacing, calc(var(--forge-spacing-xxsmall, 4px) * -1) 0 0);--_dialog-move-transition-duration:var(--forge-dialog-move-transition-duration, var(--forge-animation-duration-short4, 200ms));--_dialog-move-transition-easing:var(--forge-dialog-move-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_dialog-moving-opacity:var(--forge-dialog-moving-opacity, 0.54);--_dialog-enter-animation-duration:var(--forge-dialog-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-enter-animation-easing:var(--forge-dialog-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_dialog-exit-animation-duration:var(--forge-dialog-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));--_dialog-exit-animation-easing:var(--forge-dialog-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));--_dialog-zoom-opacity:var(--forge-dialog-zoom-opacity, 0);--_dialog-zoom-scale:var(--forge-dialog-zoom-scale, 0.8);--_dialog-fade-opacity:var(--forge-dialog-fade-opacity, 0);--_dialog-slide-opacity:var(--forge-dialog-slide-opacity, 0);--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -30%);--_dialog-backdrop-opacity:var(--forge-dialog-backdrop-opacity, var(--forge-backdrop-opacity, 0.54));--_dialog-nonmodal-elevation:var(--forge-dialog-nonmodal-elevation, 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));--_dialog-fullscreen-enter-animation-duration:var(--forge-dialog-fullscreen-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-fullscreen-exit-animation-duration:var(--forge-dialog-fullscreen-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));--_dialog-position-x:var(--forge-dialog-position-x, 0);--_dialog-position-y:var(--forge-dialog-position-y, 0);--_dialog-preset-sheet-enter-animation-duration:var(--forge-dialog-preset-sheet-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-preset-sheet-exit-animation-duration:var(--forge-dialog-preset-sheet-exit-animation-duration, var(--forge-animation-duration-short3, 150ms))}.forge-dialog{position:fixed;inset:0;z-index:var(--_dialog-z-index);background-color:transparent;color:inherit;border:none;width:auto;height:auto;padding:0;margin:0;overflow:visible;max-width:100%;max-height:100%;box-sizing:border-box}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.surface{position:absolute;inset:0;display:flex;background:var(--_dialog-background);box-shadow:var(--_dialog-elevation);z-index:var(--_dialog-z-index);overflow:hidden;border-radius:var(--_dialog-shape);margin-block-start:var(--_dialog-block-start-spacing);margin-block-end:var(--_dialog-block-end-spacing);margin-inline-start:var(--_dialog-inline-start-spacing);margin-inline-end:var(--_dialog-inline-end-spacing);padding:var(--_dialog-padding);width:var(--_dialog-width);height:var(--_dialog-height);min-width:var(--_dialog-min-width);max-width:var(--_dialog-max-width);min-height:var(--_dialog-min-height);max-height:var(--_dialog-max-height);box-sizing:border-box}.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}dialog.forge-dialog::backdrop{display:none}forge-backdrop{--forge-backdrop-opacity:var(--_dialog-backdrop-opacity);--forge-backdrop-enter-animation-duration:var(--_dialog-enter-animation-duration);--forge-backdrop-enter-animation-easing:var(--_dialog-enter-animation-easing);--forge-backdrop-exit-animation-duration:var(--_dialog-exit-animation-duration);--forge-backdrop-exit-animation-easing:var(--_dialog-exit-animation-easing)}:host(:not([moveable])) .move-handle{display:none}:host([moveable]:not([fullscreen])) .surface{user-select:none;transition-property:opacity;transition-duration:var(--_dialog-move-transition-duration);transition-timing-function:var(--_dialog-move-transition-easing)}:host([moveable]:not([fullscreen])) .surface:not(:hover) .move-handle-container{display:none}:host([moveable]:not([fullscreen])) .surface.moved{margin:0}:host([moveable]:not([fullscreen])) .surface.moving{opacity:var(--_dialog-moving-opacity)}:host([moveable]:not([fullscreen])) .move-handle-container{position:absolute;top:0;z-index:1;display:flex;justify-content:center;width:100%}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle{fill:var(--_dialog-move-handle-color);height:var(--_dialog-move-handle-size);width:var(--_dialog-move-handle-size);margin:var(--_dialog-move-handle-spacing);touch-action:none}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle:hover{cursor:var(--_dialog-move-handle-hover-cursor)}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle:active{cursor:var(--_dialog-move-handle-active-cursor)}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle svg{fill:currentColor}:host([visible]){display:contents}}@layer nonmodal{:host([mode=nonmodal]) .forge-dialog{pointer-events:none}:host([mode=nonmodal]) .container{display:contents}:host([mode=nonmodal]) .surface{--_dialog-elevation:var(--_dialog-nonmodal-elevation);pointer-events:all}:host([mode=nonmodal]) forge-backdrop{display:none}}@layer animation{:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface{animation-duration:var(--_dialog-enter-animation-duration);animation-timing-function:var(--_dialog-enter-animation-easing)}:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface.exiting{animation-duration:var(--_dialog-exit-animation-duration);animation-timing-function:var(--_dialog-exit-animation-easing)}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface{animation-name:forge-dialog-zoom-in}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-zoom-out}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface{animation-name:forge-dialog-fade-in}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-fade-out}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface{animation-name:forge-dialog-slide-in}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-slide-out}}@layer placement{:host([placement=custom]) .surface{margin:0;top:var(--_dialog-position-x);left:var(--_dialog-position-y)}:host([placement=top]) .surface{--_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, 0);top:0;bottom:auto}:host([placement=top-right]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:0;left:auto;right:0;bottom:auto}:host([placement=top-left]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:0;left:0;right:auto;bottom:auto}:host([placement=bottom]) .surface{--_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, 0);top:auto;bottom:0}:host([placement=bottom-right]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:auto;left:auto;right:0;bottom:0}:host([placement=bottom-left]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:auto;left:0;right:auto;bottom:0}}@layer size-strategy{:host([size-strategy=container-inline]) .surface{width:100%}:host([size-strategy=container-block]) .surface{height:100%}}@layer preset{:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .forge-dialog{--_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);--_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration)}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface{animation-name:forge-dialog-slide-in}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface.exiting{animation-name:forge-dialog-slide-out}:host(:is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface{--_dialog-max-width:var(--forge-dialog-max-width, none);--_dialog-max-height:var(--forge-dialog-max-height, none);inset:auto;display:inline-flex}:host([preset=left-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, -100% 0)}:host([preset=left-sheet]) .surface{left:0;bottom:0;top:0;height:100%;border-top-left-radius:0;border-bottom-left-radius:0}:host([preset=right-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 100% 0)}:host([preset=right-sheet]) .surface{right:0;bottom:0;top:0;height:100%;border-top-right-radius:0;border-bottom-right-radius:0}:host([preset=top-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -100%)}:host([preset=top-sheet]) .surface{top:0;left:0;right:0;border-top-left-radius:0;border-top-right-radius:0}:host([preset=bottom-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 100%)}:host([preset=bottom-sheet]) .surface{bottom:0;left:0;right:0;border-bottom-left-radius:0;border-bottom-right-radius:0}}@layer fullscreen{:host([fullscreen]) .forge-dialog{--_dialog-enter-animation-duration:var(--_dialog-fullscreen-enter-animation-duration);--_dialog-exit-animation-duration:var(--_dialog-fullscreen-exit-animation-duration)}:host([fullscreen]) .surface{height:100%;width:100%;max-width:none;max-height:none;border-radius:0;box-shadow:none}:host([fullscreen]) forge-backdrop{display:none}}@layer position-strategy{:host([position-strategy=viewport]) .forge-dialog{position:fixed}:host([position-strategy=container]) .forge-dialog{position:absolute}:host([position-strategy=container][preset$=-sheet]) .forge-dialog{contain:content}}@layer media{@media (prefers-reduced-motion:reduce){.surface{animation-name:forge-dialog-fade-in}.surface.exiting{animation-name:forge-dialog-fade-out}}}';
 /**
  * @tag forge-dialog
  *
@@ -23,6 +23,7 @@ const styles = '@keyframes forge-dialog-zoom-in{from{opacity:var(--_dialog-zoom-
  *
  * @dependency forge-backdrop
  *
+ * @globalconfig mode
  * @globalconfig animationType
  * @globalconfig positionStrategy
  * @globalconfig sizeStrategy
@@ -181,6 +182,12 @@ let DialogComponent = class DialogComponent extends WithDefaultAria(WithElementI
             case DIALOG_CONSTANTS.observedAttributes.PLACEMENT:
                 this.placement = newValue ?? DIALOG_CONSTANTS.defaults.PLACEMENT;
                 break;
+            case DIALOG_CONSTANTS.observedAttributes.LABEL:
+                this.label = newValue;
+                break;
+            case DIALOG_CONSTANTS.observedAttributes.DESCRIPTION:
+                this.description = newValue;
+                break;
         }
     }
     /** Shows the dialog. */
@@ -239,6 +246,12 @@ __decorate([
 __decorate([
     coreProperty()
 ], DialogComponent.prototype, "placement", void 0);
+__decorate([
+    coreProperty()
+], DialogComponent.prototype, "label", void 0);
+__decorate([
+    coreProperty()
+], DialogComponent.prototype, "description", void 0);
 DialogComponent = __decorate([
     customElement({
         name: DIALOG_CONSTANTS.elementName,

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

@@ -8,6 +8,8 @@ export declare const ICON_BUTTON_CONSTANTS: {
     elementName: "forge-icon-button";
     observedAttributes: {
         TOGGLE: string;
+        PRESSED: string;
+        /** @deprecated use `PRESSED` instead. */
         ON: string;
         VARIANT: string;
         THEME: string;
@@ -17,6 +19,8 @@ export declare const ICON_BUTTON_CONSTANTS: {
     attributes: {
         ARIA_PRESSED: string;
         TOGGLE: string;
+        PRESSED: string;
+        /** @deprecated use `PRESSED` instead. */
         ON: string;
         VARIANT: string;
         THEME: string;

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

@@ -7,6 +7,8 @@ import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}icon-button`;
 const observedAttributes = {
     TOGGLE: 'toggle',
+    PRESSED: 'pressed',
+    /** @deprecated use `PRESSED` instead. */
     ON: 'on',
     VARIANT: 'variant',
     THEME: 'theme',

package/esm/icon-button/icon-button-core.d.ts

@@ -8,7 +8,7 @@ import { IIconButtonAdapter } from './icon-button-adapter';
 import { IconButtonDensity, IconButtonShape, IconButtonTheme, IconButtonVariant } from './icon-button-constants';
 export interface IIconButtonCore extends IBaseButtonCore {
     toggle: boolean;
-    on: boolean;
+    pressed: boolean;
     variant: IconButtonVariant;
     theme: IconButtonTheme;
     shape: IconButtonShape;
@@ -16,7 +16,7 @@ export interface IIconButtonCore extends IBaseButtonCore {
 }
 export declare class IconButtonCore extends BaseButtonCore<IIconButtonAdapter> implements IIconButtonCore {
     private _toggle;
-    private _on;
+    private _pressed;
     private _variant;
     private _theme;
     private _shape;
@@ -27,8 +27,8 @@ export declare class IconButtonCore extends BaseButtonCore<IIconButtonAdapter> i
     private _onToggle;
     get toggle(): boolean;
     set toggle(value: boolean);
-    get on(): boolean;
-    set on(value: boolean);
+    get pressed(): boolean;
+    set pressed(value: boolean);
     get variant(): IconButtonVariant;
     set variant(value: IconButtonVariant);
     get theme(): IconButtonTheme;

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

@@ -9,7 +9,7 @@ export class IconButtonCore extends BaseButtonCore {
     constructor(adapter) {
         super(adapter);
         this._toggle = false;
-        this._on = false;
+        this._pressed = false;
         this._variant = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_VARIANT;
         this._theme = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
         this._shape = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_SHAPE;
@@ -27,14 +27,14 @@ export class IconButtonCore extends BaseButtonCore {
     }
     _onToggle() {
         // Update internal state first so listeners can access the new state
-        const originalOn = this._on;
-        this._on = !this._on;
-        const cancelled = !this._adapter.emitHostEvent(ICON_BUTTON_CONSTANTS.events.TOGGLE, this.on, true, true);
-        this._on = originalOn;
+        const originalPressed = this._pressed;
+        this._pressed = !this._pressed;
+        const cancelled = !this._adapter.emitHostEvent(ICON_BUTTON_CONSTANTS.events.TOGGLE, this.pressed, true, true);
+        this._pressed = originalPressed;
         if (cancelled) {
             return;
         }
-        this.on = !originalOn;
+        this.pressed = !originalPressed;
     }
     get toggle() {
         return this._toggle;
@@ -43,24 +43,26 @@ export class IconButtonCore extends BaseButtonCore {
         value = !!value;
         if (this._toggle !== value) {
             this._toggle = value;
-            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, this._toggle, `${this._on}`);
+            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, this._toggle, `${this._pressed}`);
             this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.TOGGLE, this._toggle);
         }
     }
-    get on() {
-        return this._on;
+    get pressed() {
+        return this._pressed;
     }
-    set on(value) {
+    set pressed(value) {
         value = !!value;
-        if (this._on !== value) {
-            this._on = value;
+        if (this._pressed !== value) {
+            this._pressed = value;
             if (this._toggle) {
-                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, `${this._on}`);
+                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, `${this._pressed}`);
             }
             else {
                 this._adapter.removeHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED);
             }
-            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ON, this._on);
+            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.PRESSED, this._pressed);
+            // Deprecated but left for legacy support
+            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ON, this._pressed);
         }
     }
     get variant() {