@tylertech/forge 3.6.4 → 3.8.0-dev.0

package/esm/dialog/dialog.js

@@ -15,7 +15,7 @@ import { DialogAdapter } from './dialog-adapter';
 import { DIALOG_CONSTANTS, dialogStack, hideBackdrop, showBackdrop } from './dialog-constants';
 import { DialogCore } from './dialog-core';
 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}.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}}}';
+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}::slotted(forge-scaffold){height:auto}.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
  *

package/esm/expansion-panel/expansion-panel-adapter.d.ts

@@ -6,27 +6,58 @@
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { IExpansionPanelComponent } from './expansion-panel';
 export interface IExpansionPanelAdapter extends IBaseAdapter {
+    readonly triggerElement?: HTMLElement | null;
     setAnimationCompleteListener(listener: () => void): void;
+    addContentSlotListener(listener: EventListener): void;
     addHeaderListener(type: keyof HTMLElementEventMap, listener: EventListener): void;
+    removeTriggerListeners(options?: {
+        reset: boolean;
+    }): void;
+    addTriggerListener(type: keyof HTMLElementEventMap, listener: EventListener): void;
     tryToggleOpenIcon(value: boolean): void;
     setContentVisibility(visible: boolean): void;
     animationStart(): void;
     animationEnd(): void;
+    setTriggerElementById(id: string): void;
+    setTriggerElement(el?: HTMLElement | null): void;
+    setContentId(): void;
+    updateAriaControls(): void;
+    updateAriaExpanded(open: boolean): void;
+    detachTriggerAria(): void;
 }
 export declare class ExpansionPanelAdapter extends BaseAdapter<IExpansionPanelComponent> implements IExpansionPanelAdapter {
     private _headerElement;
     private _contentElement;
     private _innerElement;
+    private _defaultSlotElement;
+    private _triggerListenerController;
+    private _triggerElement?;
     private _transitionStartListener;
     private _transitionEndListener;
     private _transitionCompleteListener;
     constructor(component: IExpansionPanelComponent);
+    get triggerElement(): HTMLElement | null | undefined;
+    private get _slottedContentElement();
+    private set _slottedContentId(value);
+    private get _slottedContentId();
+    setTriggerElementById(id: string): void;
     setAnimationCompleteListener(listener: () => void): void;
+    addContentSlotListener(listener: EventListener): void;
     addHeaderListener(type: keyof HTMLElementEventMap, listener: EventListener): void;
+    removeTriggerListeners(options?: {
+        reset: boolean;
+    }): void;
+    addTriggerListener(type: keyof HTMLElementEventMap, listener: EventListener): void;
     tryToggleOpenIcon(value: boolean): void;
     setContentVisibility(visible: boolean): void;
     private _onTransitionStart;
     private _onTransitionEnd;
     animationStart(): void;
     animationEnd(): void;
+    setTriggerElement(el: HTMLElement | null): void;
+    setContentId(): void;
+    updateAriaControls(): void;
+    updateAriaExpanded(open: boolean): void;
+    detachTriggerAria(): void;
+    private _getTriggerElementById;
 }

package/esm/expansion-panel/expansion-panel-adapter.js

@@ -3,7 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement } from '@tylertech/forge-core';
+import { getShadowElement, randomChars, toggleAttribute } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core/base/base-adapter';
 import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
 export class ExpansionPanelAdapter extends BaseAdapter {
@@ -14,15 +14,43 @@ export class ExpansionPanelAdapter extends BaseAdapter {
         this._headerElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.HEADER);
         this._contentElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.CONTENT);
         this._innerElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.INNER);
+        this._defaultSlotElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.DEFAULT_SLOT);
+    }
+    get triggerElement() {
+        return this._triggerElement;
+    }
+    get _slottedContentElement() {
+        return this._defaultSlotElement.assignedElements({ flatten: true })[0];
+    }
+    set _slottedContentId(id) {
+        this._slottedContentElement?.setAttribute('id', id);
+    }
+    get _slottedContentId() {
+        return this._slottedContentElement?.getAttribute('id') ?? '';
+    }
+    setTriggerElementById(id) {
+        this._triggerElement = this._getTriggerElementById(id);
     }
     setAnimationCompleteListener(listener) {
         this._transitionCompleteListener = listener;
         this._contentElement.addEventListener('transitionstart', this._transitionStartListener);
         this._contentElement.addEventListener('transitionend', this._transitionEndListener);
     }
+    addContentSlotListener(listener) {
+        this._defaultSlotElement.addEventListener('slotchange', listener);
+    }
     addHeaderListener(type, listener) {
         this._headerElement.addEventListener(type, listener);
     }
+    removeTriggerListeners(options = { reset: false }) {
+        this._triggerListenerController?.abort();
+        if (options?.reset) {
+            this._triggerListenerController = new AbortController();
+        }
+    }
+    addTriggerListener(type, listener) {
+        this._triggerElement?.addEventListener(type, listener, { signal: this._triggerListenerController.signal });
+    }
     tryToggleOpenIcon(value) {
         const openIconElement = this._component.querySelector(EXPANSION_PANEL_CONSTANTS.selectors.OPEN_ICON);
         if (openIconElement) {
@@ -49,4 +77,35 @@ export class ExpansionPanelAdapter extends BaseAdapter {
     animationEnd() {
         this._innerElement.style.removeProperty('overflow');
     }
+    setTriggerElement(el) {
+        this._triggerElement = el;
+    }
+    setContentId() {
+        if (!this._slottedContentId) {
+            this._slottedContentId = `forge-expansion-panel-content-${randomChars()}`;
+        }
+    }
+    updateAriaControls() {
+        if (this._triggerElement) {
+            toggleAttribute(this._triggerElement, !!this._slottedContentId, 'aria-controls', this._slottedContentId);
+        }
+    }
+    updateAriaExpanded(open) {
+        if (this._triggerElement) {
+            toggleAttribute(this._triggerElement, true, 'aria-expanded', open.toString());
+        }
+    }
+    detachTriggerAria() {
+        this._triggerElement?.removeAttribute('aria-controls');
+        this._triggerElement?.removeAttribute('aria-expanded');
+    }
+    _getTriggerElementById(id) {
+        if (id) {
+            const rootNode = this._component.getRootNode();
+            return rootNode.getElementById(id);
+        }
+        else {
+            return null;
+        }
+    }
 }

package/esm/expansion-panel/expansion-panel-constants.d.ts

@@ -9,12 +9,14 @@ export declare const EXPANSION_PANEL_CONSTANTS: {
         OPEN: string;
         ORIENTATION: string;
         ANIMATION_TYPE: string;
+        TRIGGER: string;
     };
     attributes: {
         OPENING: string;
         OPEN: string;
         ORIENTATION: string;
         ANIMATION_TYPE: string;
+        TRIGGER: string;
     };
     classes: {
         HIDDEN: string;
@@ -23,6 +25,8 @@ export declare const EXPANSION_PANEL_CONSTANTS: {
         HEADER: string;
         CONTENT: string;
         INNER: string;
+        HEADER_SLOT: string;
+        DEFAULT_SLOT: string;
         IGNORE: string;
         OPEN_ICON: string;
     };

package/esm/expansion-panel/expansion-panel-constants.js

@@ -9,7 +9,8 @@ const elementName = `${COMPONENT_NAME_PREFIX}expansion-panel`;
 const observedAttributes = {
     OPEN: 'open',
     ORIENTATION: 'orientation',
-    ANIMATION_TYPE: 'animation-type'
+    ANIMATION_TYPE: 'animation-type',
+    TRIGGER: 'trigger'
 };
 const attributes = {
     ...observedAttributes,
@@ -22,6 +23,8 @@ const selectors = {
     HEADER: '.header',
     CONTENT: '.content',
     INNER: '.inner',
+    HEADER_SLOT: 'slot[name=header]',
+    DEFAULT_SLOT: 'slot:not([name])',
     IGNORE: ':is([data-forge-ignore],[forge-ignore])',
     OPEN_ICON: `:is([slot=header] ${OPEN_ICON_CONSTANTS.elementName}, ${OPEN_ICON_CONSTANTS.elementName}[slot^=header])`
 };

package/esm/expansion-panel/expansion-panel-core.d.ts

@@ -9,6 +9,8 @@ export interface IExpansionPanelCore {
     open: boolean;
     orientation: ExpansionPanelOrientation;
     animationType: ExpansionPanelAnimationType;
+    trigger: string;
+    triggerElement?: HTMLElement | null;
     dispatchToggleEvent(): void;
 }
 export declare class ExpansionPanelCore implements IExpansionPanelCore {
@@ -16,11 +18,17 @@ export declare class ExpansionPanelCore implements IExpansionPanelCore {
     private _open;
     private _orientation;
     private _animationType;
+    private _trigger;
     private _clickListener;
     private _keydownListener;
     private _animationCompleteListener;
+    private _slotListener;
     constructor(_adapter: IExpansionPanelAdapter);
-    initialize(): void;
+    initialize(): Promise<void>;
+    destroy(): void;
+    private _handleContentSlotChange;
+    private _clearTrigger;
+    private _syncTrigger;
     private _onClick;
     private _onKeydown;
     private _onAnimationComplete;
@@ -33,4 +41,8 @@ export declare class ExpansionPanelCore implements IExpansionPanelCore {
     set orientation(value: ExpansionPanelOrientation);
     get animationType(): ExpansionPanelAnimationType;
     set animationType(value: ExpansionPanelAnimationType);
+    get trigger(): string;
+    set trigger(value: string);
+    get triggerElement(): HTMLElement | null | undefined;
+    set triggerElement(el: HTMLElement | null | undefined);
 }

package/esm/expansion-panel/expansion-panel-core.js

@@ -3,6 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { frame } from '../core';
 import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
 export class ExpansionPanelCore {
     constructor(_adapter) {
@@ -10,14 +11,49 @@ export class ExpansionPanelCore {
         this._open = false;
         this._orientation = 'vertical';
         this._animationType = 'default';
+        this._trigger = '';
         this._clickListener = this._onClick.bind(this);
         this._keydownListener = this._onKeydown.bind(this);
         this._animationCompleteListener = this._onAnimationComplete.bind(this);
+        this._slotListener = this._handleContentSlotChange.bind(this);
     }
-    initialize() {
+    async initialize() {
         this._adapter.addHeaderListener('click', this._clickListener);
         this._adapter.addHeaderListener('keydown', this._keydownListener);
         this._adapter.setAnimationCompleteListener(this._animationCompleteListener);
+        this._adapter.addContentSlotListener(this._slotListener);
+        this._adapter.setContentId();
+        await frame();
+        this._syncTrigger();
+    }
+    destroy() {
+        this._adapter.detachTriggerAria();
+        this._adapter.removeTriggerListeners();
+        this._adapter.setTriggerElement(undefined);
+    }
+    _handleContentSlotChange() {
+        this._adapter.setContentId();
+        this._syncTrigger();
+    }
+    _clearTrigger() {
+        this._adapter.removeTriggerListeners({ reset: true });
+        this._adapter.detachTriggerAria();
+    }
+    _syncTrigger() {
+        if (!this._adapter.triggerElement?.isConnected) {
+            this._clearTrigger();
+            if (this._trigger) {
+                this._adapter.setTriggerElementById(this._trigger);
+            }
+            else {
+                this._adapter.setTriggerElement(undefined);
+            }
+        }
+        this._adapter.updateAriaControls();
+        this._adapter.updateAriaExpanded(this._open);
+        this._adapter.removeTriggerListeners({ reset: true });
+        this._adapter.addTriggerListener('click', this._clickListener);
+        this._adapter.addTriggerListener('keydown', this._keydownListener);
     }
     _onClick(evt) {
         const fromIgnoredEl = evt
@@ -50,6 +86,7 @@ export class ExpansionPanelCore {
     _togglePanel() {
         this._adapter.toggleHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.OPEN, this._open);
         this._adapter.tryToggleOpenIcon(this._open);
+        this._adapter.updateAriaExpanded(this._open);
         if (this._open) {
             if (this._animationType !== 'none') {
                 this._adapter.animationStart();
@@ -96,4 +133,29 @@ export class ExpansionPanelCore {
             this._adapter.setHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.ANIMATION_TYPE, this._animationType);
         }
     }
+    get trigger() {
+        return this._trigger;
+    }
+    set trigger(value) {
+        if (this._trigger !== value) {
+            this._clearTrigger();
+            this._trigger = value;
+            this._adapter.setTriggerElementById(this._trigger);
+            if (this._adapter.isConnected) {
+                this._syncTrigger();
+            }
+        }
+    }
+    get triggerElement() {
+        return this._adapter.triggerElement;
+    }
+    set triggerElement(el) {
+        if (this._adapter.triggerElement !== el) {
+            this._clearTrigger();
+            this._adapter.setTriggerElement(el);
+            if (this._adapter.isConnected) {
+                this._syncTrigger();
+            }
+        }
+    }
 }

package/esm/expansion-panel/expansion-panel.d.ts

@@ -9,7 +9,10 @@ export interface IExpansionPanelComponent extends IBaseComponent {
     open: boolean;
     orientation: ExpansionPanelOrientation;
     animationType: ExpansionPanelAnimationType;
+    trigger: string;
+    triggerElement: HTMLElement | null;
     toggle(): void;
+    [emulateUserToggle](open: boolean): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -28,10 +31,13 @@ declare global {
  * @property {boolean} [open=false] - Whether the panel is open or closed.
  * @property {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
  * @property {ExpansionPanelAnimationType} [animationType="default"] - The type of animation to use when opening/closing the panel.
+ * @property {string} trigger - The id of the element that the expansion panel should be toggled by.
+ * @property {HTMLElement | null} triggerElement - The element that the expansion panel should be toggled by.
  *
  * @attribute {boolean} [open=false] - Whether the panel is open or closed.
  * @attribute {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
  * @attribute {ExpansionPanelAnimationType} [animation-type="default"] - The type of animation to use when opening/closing the panel.
+ * @attribute {string} [trigger] - The id of the button that the expansion panel is associated with.
  *
  * @fires {CustomEvent<boolean>} forge-expansion-panel-toggle - Event fired when the panel is toggled open or closed.
  * @fires {CustomEvent<boolean>} forge-expansion-panel-animation-complete - Event fired when the panel has finished animating when toggling.
@@ -55,10 +61,13 @@ export declare class ExpansionPanelComponent extends BaseComponent implements IE
     private _core;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     open: boolean;
     orientation: ExpansionPanelOrientation;
     animationType: ExpansionPanelAnimationType;
+    trigger: string;
+    triggerElement: HTMLElement | null;
     /**
      * Toggles the open state of the panel.
      */

package/esm/expansion-panel/expansion-panel.js

@@ -19,10 +19,13 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-expansio
  * @property {boolean} [open=false] - Whether the panel is open or closed.
  * @property {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
  * @property {ExpansionPanelAnimationType} [animationType="default"] - The type of animation to use when opening/closing the panel.
+ * @property {string} trigger - The id of the element that the expansion panel should be toggled by.
+ * @property {HTMLElement | null} triggerElement - The element that the expansion panel should be toggled by.
  *
  * @attribute {boolean} [open=false] - Whether the panel is open or closed.
  * @attribute {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
  * @attribute {ExpansionPanelAnimationType} [animation-type="default"] - The type of animation to use when opening/closing the panel.
+ * @attribute {string} [trigger] - The id of the button that the expansion panel is associated with.
  *
  * @fires {CustomEvent<boolean>} forge-expansion-panel-toggle - Event fired when the panel is toggled open or closed.
  * @fires {CustomEvent<boolean>} forge-expansion-panel-animation-complete - Event fired when the panel has finished animating when toggling.
@@ -53,6 +56,9 @@ let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponen
     connectedCallback() {
         this._core.initialize();
     }
+    disconnectedCallback() {
+        this._core.destroy();
+    }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
             case EXPANSION_PANEL_CONSTANTS.observedAttributes.OPEN:
@@ -64,6 +70,8 @@ let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponen
             case EXPANSION_PANEL_CONSTANTS.observedAttributes.ANIMATION_TYPE:
                 this.animationType = newValue;
                 break;
+            case EXPANSION_PANEL_CONSTANTS.observedAttributes.TRIGGER:
+                this.trigger = newValue;
         }
     }
     /**
@@ -94,6 +102,12 @@ __decorate([
 __decorate([
     coreProperty()
 ], ExpansionPanelComponent.prototype, "animationType", void 0);
+__decorate([
+    coreProperty()
+], ExpansionPanelComponent.prototype, "trigger", void 0);
+__decorate([
+    coreProperty()
+], ExpansionPanelComponent.prototype, "triggerElement", void 0);
 ExpansionPanelComponent = __decorate([
     customElement({
         name: EXPANSION_PANEL_CONSTANTS.elementName

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

@@ -111,6 +111,7 @@ declare const BaseField_base: import("../..").AbstractConstructor<import("../../
  * @csspart accessory - The element containing the accessory slot.
  * @csspart support-text - The support text element.
  * @csspart support-text-end - The element containing the support text end slot.
+ * @csspart outline - The element containing the forge-focus-indicator element.
  * @csspart focus-indicator - The focus indicator element.
  *
  * @slot - The default/unnamed slot for the field's input.

package/esm/field/base/base-field.js

@@ -92,6 +92,7 @@ import { BASE_FIELD_CONSTANTS } from './base-field-constants';
  * @csspart accessory - The element containing the accessory slot.
  * @csspart support-text - The support text element.
  * @csspart support-text-end - The element containing the support text end slot.
+ * @csspart outline - The element containing the forge-focus-indicator element.
  * @csspart focus-indicator - The focus indicator element.
  *
  * @slot - The default/unnamed slot for the field's input.

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

@@ -77,6 +77,7 @@ export declare const FIELD_CONSTANTS: {
         ACCESSORY: string;
         SUPPORT_TEXT: string;
         SUPPORT_TEXT_END: string;
+        OUTLINE: string;
         FOCUS_INDICATOR: string;
     };
     events: {

package/esm/field/field-constants.js

@@ -48,6 +48,7 @@ const parts = {
     ACCESSORY: 'accessory',
     SUPPORT_TEXT: 'support-text',
     SUPPORT_TEXT_END: 'support-text-end',
+    OUTLINE: 'outline',
     FOCUS_INDICATOR: 'focus-indicator'
 };
 const events = {

package/esm/field/field.d.ts

@@ -137,6 +137,7 @@ declare global {
  * @csspart accessory - The element containing the accessory slot.
  * @csspart support-text - The element containing the support text slot.
  * @csspart support-text-end - The element containing the support text end slot.
+ * @csspart outline - The element containing the forge-focus-indicator element.
  * @csspart focus-indicator - The focus indicator element.
  *
  * @cssclass forge-field - The field container that wraps an `<input>` or `<textarea>`.