@tylertech/forge 3.8.0-dev.1 → 3.8.0-dev.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/custom-elements.json +3383 -3319
  2. package/dist/app-bar/forge-app-bar.css +8 -0
  3. package/dist/lib.js +19 -19
  4. package/dist/lib.js.map +3 -3
  5. package/dist/vscode.css-custom-data.json +208 -208
  6. package/dist/vscode.html-custom-data.json +245 -245
  7. package/esm/app-bar/app-bar/app-bar.js +1 -1
  8. package/esm/app-bar/profile-button/app-bar-profile-button.d.ts +1 -1
  9. package/esm/app-bar/profile-button/app-bar-profile-button.js +9 -12
  10. package/esm/avatar/avatar.d.ts +3 -0
  11. package/esm/avatar/avatar.js +5 -0
  12. package/esm/badge/badge.d.ts +3 -0
  13. package/esm/badge/badge.js +6 -2
  14. package/esm/card/card.d.ts +3 -0
  15. package/esm/card/card.js +5 -1
  16. package/esm/dialog/dialog.js +2 -2
  17. package/esm/icon-button/icon-button.js +1 -1
  18. package/esm/key/key/index.js +2 -2
  19. package/esm/key/key/key.d.ts +4 -0
  20. package/esm/key/key/key.js +7 -1
  21. package/esm/key/key-item/index.js +2 -2
  22. package/esm/key/key-item/key-item.d.ts +4 -0
  23. package/esm/key/key-item/key-item.js +7 -1
  24. package/esm/meter/meter/meter.d.ts +3 -0
  25. package/esm/meter/meter/meter.js +6 -1
  26. package/esm/meter/meter-group/index.js +2 -2
  27. package/esm/meter/meter-group/meter-group.d.ts +4 -0
  28. package/esm/meter/meter-group/meter-group.js +7 -2
  29. package/esm/overlay/overlay-adapter.js +9 -4
  30. package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
  31. package/package.json +1 -1
  32. package/sass/app-bar/app-bar/app-bar.scss +21 -11
  33. package/sass/core/styles/tokens/app-bar/app-bar/_tokens.scss +10 -1
  34. package/sass/icon-button/icon-button.scss +15 -0
package/esm/app-bar/app-bar/app-bar.js CHANGED
@@ -10,7 +10,7 @@ import { AppBarCore } from './app-bar-core';
10
10
  import { APP_BAR_CONSTANTS } from './app-bar-constants';
11
11
  import { BaseComponent } from '../../core/base/base-component';
12
12
  const template = '<template><div class=\"forge-app-bar\" part=\"root\"><div class=\"row\"><div class=\"section\"><slot name=\"start\"></slot><div class=\"logo-title-container\"><slot name=\"logo\"></slot><slot name=\"title\"></slot></div></div><div id=\"center-section\" class=\"section\"><slot name=\"center\"></slot></div><div class=\"section\"><slot name=\"end\"></slot></div></div><div><slot name=\"bottom\"></slot></div></div></template>';
13
- const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(--forge-theme-brand, #283593));--_app-bar-foreground:var(--forge-app-bar-foreground, var(--forge-theme-on-brand, #ffffff))}:host{display:block}:host([hidden]){display:none}:host(:not([theme])){--forge-theme-primary:var(--_app-bar-foreground);--forge-theme-on-primary:rgba(0, 0, 0, 0.87);--forge-theme-text-high:rgba(255, 255, 255, 0.87);--forge-theme-text-medium:rgba(255, 255, 255, 0.54);--forge-theme-text-low:rgba(255, 255, 255, 0.38);--forge-theme-outline-high:rgba(255, 255, 255, 0.87);--forge-theme-outline-medium:rgba(255, 255, 255, 0.54);--forge-theme-outline-low:rgba(255, 255, 255, 0.38)}.forge-app-bar{--_app-bar-z-index:var(--forge-app-bar-z-index, var(--forge-z-index-header, 4));--_app-bar-elevation:var(--forge-app-bar-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));--_app-bar-height:var(--forge-app-bar-height, 56px);--_app-bar-row-padding:var(--forge-app-bar-row-padding, var(--forge-spacing-xxsmall, 4px));--_app-bar-logo-gap:var(--forge-app-bar-logo-gap, var(--forge-spacing-medium, 16px));--_app-bar-logo-font-size:var(--forge-app-bar-logo-font-size, calc(var(--forge-typography-font-size, 1rem) * 2.5));--_app-bar-title-padding:var(--forge-app-bar-title-padding, var(--forge-spacing-xsmall, 8px));--_app-bar-columns:var(--forge-app-bar-columns, 1fr 1fr 1fr);--_app-bar-transition-duration:var(--forge-app-bar-transition-duration, var(--forge-animation-duration-short4, 200ms));--_app-bar-transition-timing:var(--forge-app-bar-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-app-bar{background:var(--_app-bar-background);color:var(--_app-bar-foreground);position:relative;z-index:var(--_app-bar-z-index);display:grid;grid-template-rows:1fr auto;transition-property:box-shadow,background-color;transition-duration:var(--_app-bar-transition-duration);transition-timing-function:var(--_app-bar-transition-timing);box-sizing:border-box;width:100%}.forge-app-bar .row{display:grid;align-items:center;grid-template-columns:var(--_app-bar-columns);height:var(--_app-bar-height);padding-inline:var(--_app-bar-row-padding)}.forge-app-bar.no-center .row{grid-template-columns:1fr auto}.forge-app-bar .section{display:inline-flex;flex:1 1 auto;align-items:center;box-sizing:border-box;min-width:0;height:100%}.forge-app-bar .section:not(:last-child):not(:first-child){justify-content:center}.forge-app-bar .section:last-child{justify-self:end}.forge-app-bar h1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading4-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-font-size-scale, 1.25)));font-weight:var(--forge-typography-heading4-font-weight,500);line-height:var(--forge-typography-heading4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-line-height-scale, 1.5)));letter-spacing:var(--forge-typography-heading4-letter-spacing, .005em);text-transform:var(--forge-typography-heading4-text-transform,inherit);text-decoration:var(--forge-typography-heading4-text-decoration,inherit);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-app-bar a{outline:0;text-decoration:none;color:inherit;box-sizing:border-box;height:100%}.forge-app-bar a forge-state-layer{--forge-state-layer-color:var(--_app-bar-foreground)}.forge-app-bar a forge-focus-indicator{--forge-focus-indicator-color:var(--_app-bar-foreground);--forge-focus-indicator-shape:4px;--forge-focus-indicator-offset-block:4px}.forge-app-bar .logo-title-container{position:relative;display:flex;align-items:center;gap:var(--_app-bar-logo-gap);min-width:0;padding-inline:var(--_app-bar-title-padding)}:host(:is(:not([elevation]),[elevation=raised])) .forge-app-bar{box-shadow:var(--_app-bar-elevation)}::slotted(forge-tab-bar){--forge-tab-bar-divider-thickness:0}::slotted([slot=logo]){font-size:var(--_app-bar-logo-font-size);height:1em;width:1em}::slotted(forge-app-bar-search[slot=center]){width:100%}:host([theme=white]){--forge-theme-primary:black;--forge-theme-on-primary:rgba(255, 255, 255, 0.87);--forge-theme-text-medium:rgba(0, 0, 0, 0.54)}:host([theme=white]) .forge-app-bar{--_app-bar-background:var(--forge-app-bar-background, white);--_app-bar-foreground:var(--forge-app-bar-foreground, black)}';
13
+ const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(--forge-theme-brand, #283593));--_app-bar-foreground:var(--forge-app-bar-foreground, var(--forge-theme-on-brand, #ffffff))}:host{display:block}:host([hidden]){display:none}:host{--forge-app-bar-theme-primary:var(--_app-bar-foreground);--forge-app-bar-theme-on-primary:var(--_app-bar-background);--forge-app-bar-theme-text-high:var(--_app-bar-theme-text-high);--forge-app-bar-theme-text-medium:var(--_app-bar-theme-text-medium);--forge-app-bar-theme-text-low:var(--_app-bar-theme-text-low);--forge-app-bar-theme-outline-high:var(--_app-bar-theme-outline-high);--forge-app-bar-theme-outline-medium:var(--_app-bar-theme-outline-medium);--forge-app-bar-theme-outline-low:var(--_app-bar-theme-outline-low)}.forge-app-bar{--_app-bar-z-index:var(--forge-app-bar-z-index, var(--forge-z-index-header, 4));--_app-bar-elevation:var(--forge-app-bar-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));--_app-bar-height:var(--forge-app-bar-height, 56px);--_app-bar-row-padding:var(--forge-app-bar-row-padding, var(--forge-spacing-xxsmall, 4px));--_app-bar-logo-gap:var(--forge-app-bar-logo-gap, var(--forge-spacing-medium, 16px));--_app-bar-logo-font-size:var(--forge-app-bar-logo-font-size, calc(var(--forge-typography-font-size, 1rem) * 2.5));--_app-bar-title-padding:var(--forge-app-bar-title-padding, var(--forge-spacing-xsmall, 8px));--_app-bar-columns:var(--forge-app-bar-columns, 1fr 1fr 1fr);--_app-bar-transition-duration:var(--forge-app-bar-transition-duration, var(--forge-animation-duration-short4, 200ms));--_app-bar-transition-timing:var(--forge-app-bar-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_app-bar-theme-primary:var(--forge-app-bar-theme-primary, var(--_app-bar-foreground));--_app-bar-theme-on-primary:var(--forge-app-bar-theme-on-primary, rgba(0, 0, 0, 0.87));--_app-bar-theme-text-high:var(--forge-app-bar-theme-text-high, rgba(255, 255, 255, 0.87));--_app-bar-theme-text-medium:var(--forge-app-bar-theme-text-medium, rgba(255, 255, 255, 0.54));--_app-bar-theme-text-low:var(--forge-app-bar-theme-text-low, rgba(255, 255, 255, 0.38));--_app-bar-theme-outline-high:var(--forge-app-bar-theme-outline-high, rgba(255, 255, 255, 0.87));--_app-bar-theme-outline-medium:var(--forge-app-bar-theme-outline-medium, rgba(255, 255, 255, 0.54));--_app-bar-theme-outline-low:var(--forge-app-bar-theme-outline-low, rgba(255, 255, 255, 0.38))}.forge-app-bar{background:var(--_app-bar-background);color:var(--_app-bar-foreground);position:relative;z-index:var(--_app-bar-z-index);display:grid;grid-template-rows:1fr auto;transition-property:box-shadow,background-color;transition-duration:var(--_app-bar-transition-duration);transition-timing-function:var(--_app-bar-transition-timing);box-sizing:border-box;width:100%}.forge-app-bar .row{display:grid;align-items:center;grid-template-columns:var(--_app-bar-columns);height:var(--_app-bar-height);padding-inline:var(--_app-bar-row-padding)}.forge-app-bar.no-center .row{grid-template-columns:1fr auto}.forge-app-bar .section{display:inline-flex;flex:1 1 auto;align-items:center;box-sizing:border-box;min-width:0;height:100%}.forge-app-bar .section:not(:last-child):not(:first-child){justify-content:center}.forge-app-bar .section:last-child{justify-self:end}.forge-app-bar h1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading4-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-font-size-scale, 1.25)));font-weight:var(--forge-typography-heading4-font-weight,500);line-height:var(--forge-typography-heading4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-line-height-scale, 1.5)));letter-spacing:var(--forge-typography-heading4-letter-spacing, .005em);text-transform:var(--forge-typography-heading4-text-transform,inherit);text-decoration:var(--forge-typography-heading4-text-decoration,inherit);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forge-app-bar a{outline:0;text-decoration:none;color:inherit;box-sizing:border-box;height:100%}.forge-app-bar a forge-state-layer{--forge-state-layer-color:var(--_app-bar-foreground)}.forge-app-bar a forge-focus-indicator{--forge-focus-indicator-color:var(--_app-bar-foreground);--forge-focus-indicator-shape:4px;--forge-focus-indicator-offset-block:4px}.forge-app-bar .logo-title-container{position:relative;display:flex;align-items:center;gap:var(--_app-bar-logo-gap);min-width:0;padding-inline:var(--_app-bar-title-padding)}:host(:is(:not([elevation]),[elevation=raised])) .forge-app-bar{box-shadow:var(--_app-bar-elevation)}::slotted(forge-tab-bar){--forge-tab-bar-divider-thickness:0}::slotted([slot=logo]){font-size:var(--_app-bar-logo-font-size);height:1em;width:1em}::slotted(forge-app-bar-search[slot=center]){width:100%}:host([theme=white]){--forge-theme-primary:black;--forge-theme-on-primary:rgba(255, 255, 255, 0.87);--forge-theme-text-medium:rgba(0, 0, 0, 0.54)}:host([theme=white]) .forge-app-bar{--_app-bar-background:var(--forge-app-bar-background, white);--_app-bar-foreground:var(--forge-app-bar-foreground, black)}';
14
14
  /**
15
15
  * @tag forge-app-bar
16
16
  *
package/esm/app-bar/profile-button/app-bar-profile-button.d.ts CHANGED
@@ -3,9 +3,9 @@
3
3
  * Copyright Tyler Technologies, Inc.
4
4
  * License: Apache-2.0
5
5
  */
6
- import { AppBarProfileButtonProfileCardBuilder } from './app-bar-profile-button-constants';
7
6
  import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
8
7
  import { IPopoverComponent } from '../../popover/popover';
8
+ import { AppBarProfileButtonProfileCardBuilder } from './app-bar-profile-button-constants';
9
9
  export interface IAppBarProfileButtonComponent extends IBaseComponent {
10
10
  avatarImageUrl: string;
11
11
  avatarLetterCount: number;
package/esm/app-bar/profile-button/app-bar-profile-button.js CHANGED
@@ -4,16 +4,16 @@
4
4
  * License: Apache-2.0
5
5
  */
6
6
  import { __decorate } from "tslib";
7
- import { customElement, attachLightTemplate, coerceNumber, coerceBoolean, coreProperty } from '@tylertech/forge-core';
8
- import { AppBarProfileButtonAdapter } from './app-bar-profile-button-adapter';
9
- import { AppBarProfileButtonCore } from './app-bar-profile-button-core';
10
- import { APP_BAR_PROFILE_BUTTON_CONSTANTS } from './app-bar-profile-button-constants';
11
- import { ProfileCardComponent } from '../../profile-card';
12
- import { IconButtonComponent } from '../../icon-button';
13
- import { defineAvatarComponent } from '../../avatar';
14
- import { TooltipComponent } from '../../tooltip';
7
+ import { attachLightTemplate, coerceBoolean, coerceNumber, coreProperty, customElement } from '@tylertech/forge-core';
15
8
  import { BaseComponent } from '../../core/base/base-component';
9
+ import { IconButtonComponent } from '../../icon-button';
16
10
  import { PopoverComponent } from '../../popover/popover';
11
+ import { ProfileCardComponent } from '../../profile-card';
12
+ import { TooltipComponent } from '../../tooltip';
13
+ import { AppBarProfileButtonAdapter } from './app-bar-profile-button-adapter';
14
+ import { APP_BAR_PROFILE_BUTTON_CONSTANTS } from './app-bar-profile-button-constants';
15
+ import { AppBarProfileButtonCore } from './app-bar-profile-button-core';
16
+ import { AvatarComponent } from '../../avatar';
17
17
  const template = '<template><forge-icon-button><forge-avatar aria-hidden=\"true\"></forge-avatar></forge-icon-button><forge-tooltip type=\"label\" placement=\"bottom-end\">View profile</forge-tooltip></template>';
18
18
  /**
19
19
  * @tag forge-app-bar-profile-button
@@ -119,9 +119,6 @@ let AppBarProfileButtonComponent = class AppBarProfileButtonComponent extends Ba
119
119
  return this._core.popupElement;
120
120
  }
121
121
  };
122
- (() => {
123
- defineAvatarComponent();
124
- })();
125
122
  __decorate([
126
123
  coreProperty()
127
124
  ], AppBarProfileButtonComponent.prototype, "fullName", void 0);
@@ -161,7 +158,7 @@ __decorate([
161
158
  AppBarProfileButtonComponent = __decorate([
162
159
  customElement({
163
160
  name: APP_BAR_PROFILE_BUTTON_CONSTANTS.elementName,
164
- dependencies: [PopoverComponent, ProfileCardComponent, IconButtonComponent, TooltipComponent]
161
+ dependencies: [PopoverComponent, ProfileCardComponent, IconButtonComponent, TooltipComponent, AvatarComponent]
165
162
  })
166
163
  ], AppBarProfileButtonComponent);
167
164
  export { AppBarProfileButtonComponent };
package/esm/avatar/avatar.d.ts CHANGED
@@ -4,6 +4,7 @@
4
4
  * License: Apache-2.0
5
5
  */
6
6
  import { LitElement, PropertyValues, TemplateResult } from 'lit';
7
+ import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
7
8
  export interface IAvatarComponent extends LitElement {
8
9
  text: string;
9
10
  letterCount: number;
@@ -35,6 +36,8 @@ export declare const AVATAR_TAG_NAME: keyof HTMLElementTagNameMap;
35
36
  */
36
37
  export declare class AvatarComponent extends LitElement implements IAvatarComponent {
37
38
  static styles: import("lit").CSSResult;
39
+ /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
40
+ static [CUSTOM_ELEMENT_NAME_PROPERTY]: keyof HTMLElementTagNameMap;
38
41
  /**
39
42
  * The text to display in the avatar.
40
43
  * @default ''
package/esm/avatar/avatar.js CHANGED
@@ -3,12 +3,14 @@
3
3
  * Copyright Tyler Technologies, Inc.
4
4
  * License: Apache-2.0
5
5
  */
6
+ var _a;
6
7
  import { __decorate } from "tslib";
7
8
  import { LitElement, html, nothing, unsafeCSS } from 'lit';
8
9
  import { customElement, property, state } from 'lit/decorators.js';
9
10
  import { styleMap } from 'lit/directives/style-map.js';
10
11
  import { classMap } from 'lit/directives/class-map.js';
11
12
  import { AVATAR_CONSTANTS } from './avatar-constants';
13
+ import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
12
14
  const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-avatar{--_avatar-size:var(--forge-avatar-size, 40px);--_avatar-background:var(--forge-avatar-background, var(--forge-theme-tertiary, #3d5afe));--_avatar-color:var(--forge-avatar-color, var(--forge-theme-on-tertiary, #ffffff));--_avatar-transition-duration:var(--forge-avatar-transition-duration, var(--forge-animation-duration-short4, 200ms));--_avatar-transition-timing:var(--forge-avatar-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_avatar-shape:var(--forge-avatar-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)))}.forge-avatar{display:flex;align-items:center;justify-content:center;overflow:hidden;transition:height var(--_avatar-transition-duration) var(--_avatar-transition-timing),width var(--_avatar-transition-duration) var(--_avatar-transition-timing);border-radius:var(--_avatar-shape);box-sizing:border-box;width:var(--_avatar-size);height:var(--_avatar-size);background-color:var(--_avatar-background);background-position:center;background-repeat:no-repeat;background-size:cover;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-subheading2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-subheading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-font-size-scale, 1)));font-weight:var(--forge-typography-subheading2-font-weight,400);line-height:var(--forge-typography-subheading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-subheading2-letter-spacing, normal);text-transform:var(--forge-typography-subheading2-text-transform,inherit);text-decoration:var(--forge-typography-subheading2-text-decoration,inherit);color:var(--_avatar-color)}.forge-avatar--image{background-color:inherit}';
13
15
  const charsByLetterCount = (text, count) => {
14
16
  if (!text?.trim()) {
@@ -91,7 +93,10 @@ let AvatarComponent = class AvatarComponent extends LitElement {
91
93
  }
92
94
  }
93
95
  };
96
+ _a = CUSTOM_ELEMENT_NAME_PROPERTY;
94
97
  AvatarComponent.styles = unsafeCSS(styles);
98
+ /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
99
+ AvatarComponent[_a] = AVATAR_TAG_NAME;
95
100
  __decorate([
96
101
  property()
97
102
  ], AvatarComponent.prototype, "text", void 0);
package/esm/badge/badge.d.ts CHANGED
@@ -5,6 +5,7 @@
5
5
  */
6
6
  import { LitElement, PropertyValues, TemplateResult } from 'lit';
7
7
  import { BadgeTheme } from './badge-constants';
8
+ import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
8
9
  export interface IBadgeComponent extends LitElement {
9
10
  dot: boolean;
10
11
  theme: BadgeTheme;
@@ -45,6 +46,8 @@ export declare const BADGE_TAG_NAME: keyof HTMLElementTagNameMap;
45
46
  export declare class BadgeComponent extends LitElement implements IBadgeComponent {
46
47
  #private;
47
48
  static styles: import("lit").CSSResult;
49
+ /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
50
+ static [CUSTOM_ELEMENT_NAME_PROPERTY]: keyof HTMLElementTagNameMap;
48
51
  constructor();
49
52
  /** Controls whether the badge will be a small dot without any content visible. */
50
53
  dot: boolean;
package/esm/badge/badge.js CHANGED
@@ -3,12 +3,13 @@
3
3
  * Copyright Tyler Technologies, Inc.
4
4
  * License: Apache-2.0
5
5
  */
6
- var _BadgeComponent_internals;
6
+ var _BadgeComponent_internals, _a;
7
7
  import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
8
8
  import { html, LitElement, unsafeCSS } from 'lit';
9
9
  import { customElement, property } from 'lit/decorators.js';
10
- const styles = ':host{display:flex;box-sizing:border-box}:host([hidden]){display:none}.forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000));--_badge-shape:var(--forge-badge-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_badge-height:var(--forge-badge-height, 20px);--_badge-min-width:var(--forge-badge-min-width, 0);--_badge-max-width:var(--forge-badge-max-width, auto);--_badge-padding-inline:var(--forge-badge-padding-inline, var(--forge-spacing-xsmall, 8px));--_badge-padding-block:var(--forge-badge-padding-block, 0);--_badge-border-width:var(--forge-badge-border-width, var(--forge-border-thin, 1px));--_badge-border-style:var(--forge-badge-border-style, none);--_badge-border-color:var(--forge-badge-border-color, var(--_badge-color));--_badge-gap:var(--forge-badge-gap, var(--forge-spacing-xsmall, 8px));--_badge-font-weight:var(--forge-badge-font-weight, bold);--_badge-dot-size:var(--forge-badge-dot-size, 8px);--_badge-dot-height:var(--forge-badge-dot-height, var(--_badge-dot-size));--_badge-dot-width:var(--forge-badge-dot-width, var(--_badge-dot-size));--_badge-dot-padding:var(--forge-badge-dot-padding, 0);--_badge-transition-duration:var(--forge-badge-transition-duration, var(--forge-animation-duration-short4, 200ms));--_badge-transition-easing:var(--forge-badge-transition-easing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)))}.forge-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);background:var(--_badge-background);color:var(--_badge-color);height:var(--_badge-height);min-width:var(--_badge-min-width);max-width:var(--_badge-max-width);border-width:var(--_badge-border-width);border-style:var(--_badge-border-style);border-color:var(--_badge-border-color);display:inline-flex;align-items:center;gap:var(--_badge-gap);border-radius:var(--_badge-shape);padding-inline:var(--_badge-padding-inline);padding-block:var(--_badge-padding-block);overflow:hidden;box-sizing:border-box;pointer-events:none;transition:transform var(--_badge-transition-duration) var(--_badge-transition-easing);font-weight:var(--_badge-font-weight);text-overflow:ellipsis;white-space:nowrap}.forge-badge .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(:is([slot=start],[slot=end])){font-size:inherit}:host(:where([hide],:state(hidden))) .forge-badge{transform:scale(0)}:host(:where([dot],:state(dot))) .forge-badge{--_badge-height:var(--_badge-dot-height);--_badge-min-width:var(--forge-badge-min-width, auto);padding:var(--_badge-dot-padding);width:var(--_badge-dot-width)}:host(:where([dot],:state(dot))) .content>slot{display:none}:host([theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary-container, #d1d5ed));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary-container, #222c62))}:host(:where([strong],:state(strong))[theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary, #3f51b5));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary, #ffffff))}:host([theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary-container, #fff0c3));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary-container, #8a6804))}:host(:where([strong],:state(strong))[theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000))}:host([theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary-container, #d0d7ff));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary-container, #213189))}:host(:where([strong],:state(strong))[theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary, #3d5afe));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success-container, #cde0ce));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success-container, #19441b))}:host(:where([strong],:state(strong))[theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success, #2e7d32));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success, #ffffff))}:host([theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning-container, #f4d3c2));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning-container, #712700))}:host(:where([strong],:state(strong))[theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning, #d14900));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning, #ffffff))}:host(:not(:where([strong],:state(strong))):is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error-container-low, #f6e0e4));--_badge-color:var(--forge-badge-color, var(--forge-theme-error, #b00020))}:host(:where([strong],:state(strong)):is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error, #b00020));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-error, #ffffff))}:host(:not(:where([strong],:state(strong))):is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info-container, #c7daf0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info-container, #0b3768))}:host(:where([strong],:state(strong)):is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info, #1565c0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info, #ffffff))}:host(:not(:where([strong],:state(strong)))[theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-container-low, #ebebeb));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-container-low, #000000))}:host(:where([strong],:state(strong))[theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-inverse, #333333));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-inverse, #ffffff))}';
11
10
  import { toggleState } from '../core';
11
+ const styles = ':host{display:flex;box-sizing:border-box}:host([hidden]){display:none}.forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000));--_badge-shape:var(--forge-badge-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_badge-height:var(--forge-badge-height, 20px);--_badge-min-width:var(--forge-badge-min-width, 0);--_badge-max-width:var(--forge-badge-max-width, auto);--_badge-padding-inline:var(--forge-badge-padding-inline, var(--forge-spacing-xsmall, 8px));--_badge-padding-block:var(--forge-badge-padding-block, 0);--_badge-border-width:var(--forge-badge-border-width, var(--forge-border-thin, 1px));--_badge-border-style:var(--forge-badge-border-style, none);--_badge-border-color:var(--forge-badge-border-color, var(--_badge-color));--_badge-gap:var(--forge-badge-gap, var(--forge-spacing-xsmall, 8px));--_badge-font-weight:var(--forge-badge-font-weight, bold);--_badge-dot-size:var(--forge-badge-dot-size, 8px);--_badge-dot-height:var(--forge-badge-dot-height, var(--_badge-dot-size));--_badge-dot-width:var(--forge-badge-dot-width, var(--_badge-dot-size));--_badge-dot-padding:var(--forge-badge-dot-padding, 0);--_badge-transition-duration:var(--forge-badge-transition-duration, var(--forge-animation-duration-short4, 200ms));--_badge-transition-easing:var(--forge-badge-transition-easing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)))}.forge-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);background:var(--_badge-background);color:var(--_badge-color);height:var(--_badge-height);min-width:var(--_badge-min-width);max-width:var(--_badge-max-width);border-width:var(--_badge-border-width);border-style:var(--_badge-border-style);border-color:var(--_badge-border-color);display:inline-flex;align-items:center;gap:var(--_badge-gap);border-radius:var(--_badge-shape);padding-inline:var(--_badge-padding-inline);padding-block:var(--_badge-padding-block);overflow:hidden;box-sizing:border-box;pointer-events:none;transition:transform var(--_badge-transition-duration) var(--_badge-transition-easing);font-weight:var(--_badge-font-weight);text-overflow:ellipsis;white-space:nowrap}.forge-badge .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(:is([slot=start],[slot=end])){font-size:inherit}:host(:where([hide],:state(hidden))) .forge-badge{transform:scale(0)}:host(:where([dot],:state(dot))) .forge-badge{--_badge-height:var(--_badge-dot-height);--_badge-min-width:var(--forge-badge-min-width, auto);padding:var(--_badge-dot-padding);width:var(--_badge-dot-width)}:host(:where([dot],:state(dot))) .content>slot{display:none}:host([theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary-container, #d1d5ed));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary-container, #222c62))}:host(:where([strong],:state(strong))[theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary, #3f51b5));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary, #ffffff))}:host([theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary-container, #fff0c3));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary-container, #8a6804))}:host(:where([strong],:state(strong))[theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000))}:host([theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary-container, #d0d7ff));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary-container, #213189))}:host(:where([strong],:state(strong))[theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary, #3d5afe));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success-container, #cde0ce));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success-container, #19441b))}:host(:where([strong],:state(strong))[theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success, #2e7d32));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success, #ffffff))}:host([theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning-container, #f4d3c2));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning-container, #712700))}:host(:where([strong],:state(strong))[theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning, #d14900));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning, #ffffff))}:host(:not(:where([strong],:state(strong))):is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error-container-low, #f6e0e4));--_badge-color:var(--forge-badge-color, var(--forge-theme-error, #b00020))}:host(:where([strong],:state(strong)):is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error, #b00020));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-error, #ffffff))}:host(:not(:where([strong],:state(strong))):is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info-container, #c7daf0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info-container, #0b3768))}:host(:where([strong],:state(strong)):is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info, #1565c0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info, #ffffff))}:host(:not(:where([strong],:state(strong)))[theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-container-low, #ebebeb));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-container-low, #000000))}:host(:where([strong],:state(strong))[theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-inverse, #333333));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-inverse, #ffffff))}';
12
+ import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
12
13
  export const BADGE_TAG_NAME = 'forge-badge';
13
14
  /**
14
15
  * @tag forge-badge
@@ -73,7 +74,10 @@ let BadgeComponent = class BadgeComponent extends LitElement {
73
74
  }
74
75
  };
75
76
  _BadgeComponent_internals = new WeakMap();
77
+ _a = CUSTOM_ELEMENT_NAME_PROPERTY;
76
78
  BadgeComponent.styles = unsafeCSS(styles);
79
+ /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
80
+ BadgeComponent[_a] = BADGE_TAG_NAME;
77
81
  __decorate([
78
82
  property({ type: Boolean, reflect: true })
79
83
  ], BadgeComponent.prototype, "dot", void 0);
package/esm/card/card.d.ts CHANGED
@@ -4,6 +4,7 @@
4
4
  * License: Apache-2.0
5
5
  */
6
6
  import { LitElement, PropertyValues, TemplateResult } from 'lit';
7
+ import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
7
8
  export interface ICardComponent extends LitElement {
8
9
  raised: boolean;
9
10
  }
@@ -41,6 +42,8 @@ export declare const CARD_TAG_NAME: keyof HTMLElementTagNameMap;
41
42
  export declare class CardComponent extends LitElement implements ICardComponent {
42
43
  #private;
43
44
  static styles: import("lit").CSSResult;
45
+ /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
46
+ static [CUSTOM_ELEMENT_NAME_PROPERTY]: keyof HTMLElementTagNameMap;
44
47
  /** Whether the card has elevation or not. */
45
48
  raised: boolean;
46
49
  constructor();
package/esm/card/card.js CHANGED
@@ -3,11 +3,12 @@
3
3
  * Copyright Tyler Technologies, Inc.
4
4
  * License: Apache-2.0
5
5
  */
6
- var _CardComponent_internals;
6
+ var _CardComponent_internals, _a;
7
7
  import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
8
8
  import { html, LitElement, unsafeCSS } from 'lit';
9
9
  import { customElement, property } from 'lit/decorators.js';
10
10
  import { toggleState } from '../core/utils/utils';
11
+ import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
11
12
  const styles = ':host{display:block}:host([hidden]){display:none}.forge-card{--_card-background:var(--forge-card-background, var(--forge-theme-surface, #ffffff));--_card-height:var(--forge-card-height, 100%);--_card-width:var(--forge-card-width, 100%);--_card-outline-color:var(--forge-card-outline-color, var(--forge-theme-outline, #e0e0e0));--_card-outline-width:var(--forge-card-outline-width, var(--forge-border-thin, 1px));--_card-outline-style:var(--forge-card-outline-style, solid);--_card-elevation:var(--forge-card-elevation, none);--_card-padding:var(--forge-card-padding, var(--forge-spacing-medium, 16px));--_card-shape:var(--forge-card-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_card-overflow:var(--forge-card-overflow, initial);--_card-raised-elevation:var(--forge-card-raised-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_card-raised-outline-width:var(--forge-card-raised-outline-width, 0)}.forge-card{background:var(--_card-background);border-color:var(--_card-outline-color);border-width:var(--_card-outline-width);border-style:var(--_card-outline-style);border-radius:var(--_card-shape);box-shadow:var(--_card-elevation);box-sizing:border-box;padding:var(--_card-padding);overflow:var(--_card-overflow);height:var(--_card-height);width:var(--_card-width);-webkit-tap-highlight-color:transparent}:host(:where([raised],:state(raised))) .forge-card{--_card-elevation:var(--_card-raised-elevation);--_card-outline-width:var(--_card-raised-outline-width)}:host([no-padding]) .forge-card{--_card-padding:var(--forge-card-padding, 0)}';
12
13
  export const CARD_TAG_NAME = 'forge-card';
13
14
  /**
@@ -53,7 +54,10 @@ let CardComponent = class CardComponent extends LitElement {
53
54
  }
54
55
  };
55
56
  _CardComponent_internals = new WeakMap();
57
+ _a = CUSTOM_ELEMENT_NAME_PROPERTY;
56
58
  CardComponent.styles = unsafeCSS(styles);
59
+ /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
60
+ CardComponent[_a] = CARD_TAG_NAME;
57
61
  __decorate([
58
62
  property({ type: Boolean, reflect: true })
59
63
  ], CardComponent.prototype, "raised", void 0);
package/esm/dialog/dialog.js CHANGED
@@ -14,7 +14,7 @@ import { tryDismiss } from '../core/utils/dismissible-stack';
14
14
  import { DialogAdapter } from './dialog-adapter';
15
15
  import { DIALOG_CONSTANTS, dialogStack, hideBackdrop, showBackdrop } from './dialog-constants';
16
16
  import { DialogCore } from './dialog-core';
17
- 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>';
17
+ const template = '<template><dialog class=\"forge-dialog\" part=\"root\" autofocus><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>';
18
18
  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}}}';
19
19
  /**
20
20
  * @tag forge-dialog
@@ -132,7 +132,7 @@ let DialogComponent = class DialogComponent extends WithDefaultAria(WithElementI
132
132
  }
133
133
  constructor() {
134
134
  super();
135
- attachShadowTemplate(this, template, styles);
135
+ attachShadowTemplate(this, template, styles, false);
136
136
  this._core = new DialogCore(new DialogAdapter(this));
137
137
  }
138
138
  connectedCallback() {
package/esm/icon-button/icon-button.js CHANGED
@@ -14,7 +14,7 @@ import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
14
14
  import { IconButtonCore } from './icon-button-core';
15
15
  import { IconButtonAdapter } from './icon-button-adapter';
16
16
  const template = '<template><div class=\"forge-icon-button\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"on\"></slot><slot name=\"end\"></slot><slot name=\"badge\"></slot><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
17
- const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed)}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-icon-button{--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-gap, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, currentColor);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);--_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));--_icon-button-toggle-on-background-color:var(--forge-icon-button-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}.forge-icon-button{position:relative;z-index:0;display:var(--_icon-button-display);align-items:center;justify-content:center;gap:var(--_icon-button-gap);box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);user-select:none;transition-property:box-shadow,background;transition-duration:var(--_icon-button-transition-duration);transition-timing-function:var(--_icon-button-transition-timing)}.forge-icon-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_icon-button-icon-size);height:var(--_icon-button-icon-size);width:var(--_icon-button-icon-size);font-weight:inherit}::slotted(a){height:100%;width:100%;outline:0;border-radius:var(--_icon-button-shape);padding-inline:var(--_icon-button-padding);display:flex;align-items:center;justify-content:center;gap:var(--_icon-button-gap);color:var(--_icon-button-icon-color);text-decoration:none}forge-focus-indicator{--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([variant=icon],:not([variant]))){--forge-focus-indicator-outward-offset:0px}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}:host([popover-icon]) .forge-icon-button{--_icon-button-padding:var(--_icon-button-popover-icon-padding)}:host([variant=outlined]) .forge-icon-button{border-width:var(--_icon-button-outlined-border-width);border-style:var(--_icon-button-outlined-border-style);border-color:var(--_icon-button-outlined-border-color)}:host([variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-background-color)}:host(:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-icon-color);--_icon-button-background-color:var(--_icon-button-filled-background-color)}:host([variant=raised]) .forge-icon-button{--_icon-button-shadow:var(--_icon-button-raised-shadow)}:host([variant=raised]) .forge-icon-button:hover{--_icon-button-raised-shadow:var(--_icon-button-raised-hover-shadow)}:host([variant=raised]) .forge-icon-button:active{--_icon-button-raised-shadow:var(--_icon-button-raised-active-shadow)}:host(:is(:not([toggle]),[toggle]:not([pressed]))) slot[name=on]{display:none}:host([toggle][pressed]) slot:not([name]){display:none}:host([toggle][pressed]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color)}:host([toggle][pressed][variant=outlined]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-outlined-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-outlined-toggle-on-icon-color)}:host([toggle]:not([pressed])[variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-tonal-toggle-background-color)}:host([toggle][pressed][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-toggle-on-background-color)}:host([toggle]:not([pressed]):is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-background-color)}:host([toggle][pressed]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-on-background-color)}::slotted([slot=badge]){position:absolute;top:0;left:60%;z-index:1;pointer-events:none}::slotted(forge-badge[slot=badge][dot]){top:8px}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge]:not([dot])){top:-25%}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge][dot]){top:0}:host(:is([dense],[density=small])) ::slotted(forge-badge[slot=badge]){--forge-typography-label1-line-height:normal;--forge-badge-height:auto}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_icon-button-icon-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}:host(:is([dense],[density=small])) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding)}:host(:is([dense],[density=small])) ::slotted(*){font-size:var(--_icon-button-density-small-icon-size)}:host([density=medium]) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([shape=squared]) .forge-icon-button{--_icon-button-shape:var(--_icon-button-shape-squared)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) .forge-icon-button{pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([disabled][variant=raised]) .forge-icon-button{--_icon-button-raised-shadow:var(--_icon-button-raised-disabled-shadow)}:host(:not([toggle])[theme=primary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host(:not([toggle])[theme=secondary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary-container, #8a6804));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle]:not([pressed])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle][theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-secondary-container, #8a6804))}:host(:not([toggle])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary, #000000));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary, #ffc107))}:host([toggle]:not([pressed])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle][theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-secondary, #ffc107));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=tertiary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary-container, #213189));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle]:not([pressed])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle][theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-tertiary-container, #213189))}:host(:not([toggle])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle]:not([pressed])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle][theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=success]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success-container, #19441b));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle]:not([pressed])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle][theme=success][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-success-container, #19441b))}:host(:not([toggle])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success, #2e7d32))}:host([toggle]:not([pressed])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle][theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-success, #2e7d32));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=error]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error-container, #5f0011));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle]:not([pressed])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle][theme=error][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-error-container, #5f0011))}:host(:not([toggle])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error, #b00020))}:host([toggle]:not([pressed])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle][theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-error, #b00020));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=warning]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning-container, #712700));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle]:not([pressed])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle][theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-warning-container, #712700))}:host(:not([toggle])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning, #d14900))}:host([toggle]:not([pressed])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle][theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-warning, #d14900));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=info]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host(:not([toggle])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info-container, #0b3768));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle]:not([pressed])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle][theme=info][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-info-container, #0b3768))}:host(:not([toggle])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info, #1565c0))}:host([toggle]:not([pressed])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle][theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-info, #1565c0));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-info, #1565c0))}';
17
+ const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed)}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-icon-button{--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-gap, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, currentColor);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);--_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));--_icon-button-toggle-on-background-color:var(--forge-icon-button-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}.forge-icon-button{position:relative;z-index:0;display:var(--_icon-button-display);align-items:center;justify-content:center;gap:var(--_icon-button-gap);box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);user-select:none;transition-property:box-shadow,background;transition-duration:var(--_icon-button-transition-duration);transition-timing-function:var(--_icon-button-transition-timing)}.forge-icon-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_icon-button-icon-size);height:var(--_icon-button-icon-size);width:var(--_icon-button-icon-size);font-weight:inherit}::slotted(a){height:100%;width:100%;outline:0;border-radius:var(--_icon-button-shape);padding-inline:var(--_icon-button-padding);display:flex;align-items:center;justify-content:center;gap:var(--_icon-button-gap);color:var(--_icon-button-icon-color);text-decoration:none}forge-focus-indicator{--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([variant=icon],:not([variant]))){--forge-focus-indicator-outward-offset:0px}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}:host([popover-icon]) .forge-icon-button{--_icon-button-padding:var(--_icon-button-popover-icon-padding)}:host([variant=outlined]) .forge-icon-button{border-width:var(--_icon-button-outlined-border-width);border-style:var(--_icon-button-outlined-border-style);border-color:var(--_icon-button-outlined-border-color)}:host([variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-background-color)}:host(:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-icon-color);--_icon-button-background-color:var(--_icon-button-filled-background-color)}:host([variant=raised]) .forge-icon-button{--_icon-button-shadow:var(--_icon-button-raised-shadow)}:host([variant=raised]) .forge-icon-button:hover{--_icon-button-raised-shadow:var(--_icon-button-raised-hover-shadow)}:host([variant=raised]) .forge-icon-button:active{--_icon-button-raised-shadow:var(--_icon-button-raised-active-shadow)}:host(:is(:not([toggle]),[toggle]:not([pressed]))) slot[name=on]{display:none}:host([toggle][pressed]) slot:not([name]){display:none}:host([toggle][pressed]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color)}:host([toggle][pressed][variant=outlined]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-outlined-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-outlined-toggle-on-icon-color)}:host([toggle]:not([pressed])[variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-tonal-toggle-background-color)}:host([toggle][pressed][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-toggle-on-background-color)}:host([toggle]:not([pressed]):is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-background-color)}:host([toggle][pressed]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-on-background-color)}::slotted([slot=badge]){position:absolute;top:0;left:60%;z-index:1;pointer-events:none}::slotted(forge-badge[slot=badge][dot]){top:8px}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge]:not([dot])){top:-25%}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge][dot]){top:0}:host(:is([dense],[density=small])) ::slotted(forge-badge[slot=badge]){--forge-typography-label1-line-height:normal;--forge-badge-height:auto}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_icon-button-icon-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}:host(:is([dense],[density=small])) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding)}:host(:is([dense],[density=small])) ::slotted(*){font-size:var(--_icon-button-density-small-icon-size)}:host([density=medium]) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([shape=squared]) .forge-icon-button{--_icon-button-shape:var(--_icon-button-shape-squared)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) .forge-icon-button{pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([disabled][variant=raised]) .forge-icon-button{--_icon-button-raised-shadow:var(--_icon-button-raised-disabled-shadow)}:host(:not([toggle])[theme=primary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host(:not([toggle])[theme=secondary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary-container, #8a6804));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle]:not([pressed])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle][theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-secondary-container, #8a6804))}:host(:not([toggle])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary, #000000));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary, #ffc107))}:host([toggle]:not([pressed])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle][theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-secondary, #ffc107));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=tertiary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary-container, #213189));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle]:not([pressed])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle][theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-tertiary-container, #213189))}:host(:not([toggle])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle]:not([pressed])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle][theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=success]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success-container, #19441b));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle]:not([pressed])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle][theme=success][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-success-container, #19441b))}:host(:not([toggle])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success, #2e7d32))}:host([toggle]:not([pressed])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle][theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-success, #2e7d32));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=error]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error-container, #5f0011));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle]:not([pressed])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle][theme=error][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-error-container, #5f0011))}:host(:not([toggle])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error, #b00020))}:host([toggle]:not([pressed])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle][theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-error, #b00020));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=warning]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning-container, #712700));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle]:not([pressed])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle][theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-warning-container, #712700))}:host(:not([toggle])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning, #d14900))}:host([toggle]:not([pressed])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle][theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-warning, #d14900));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=info]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host(:not([toggle])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info-container, #0b3768));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle]:not([pressed])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle][theme=info][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-info-container, #0b3768))}:host(:not([toggle])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info, #1565c0))}:host([toggle]:not([pressed])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle][theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-info, #1565c0));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-info, #1565c0))}:host([theme=app-bar]){--forge-theme-primary:var(--forge-app-bar-theme-primary);--forge-theme-on-primary:var(--forge-app-bar-theme-on-primary);--forge-theme-text-high:var(--forge-app-bar-theme-text-high);--forge-theme-text-medium:var(--forge-app-bar-theme-text-medium);--forge-theme-text-low:var(--forge-app-bar-theme-text-low);--forge-theme-outline-high:var(--forge-app-bar-theme-outline-high);--forge-theme-outline-medium:var(--forge-app-bar-theme-outline-medium);--forge-theme-outline-low:var(--forge-app-bar-theme-outline-low)}';
18
18
  /**
19
19
  * @tag forge-icon-button
20
20
  *
package/esm/key/key/index.js CHANGED
@@ -4,8 +4,8 @@
4
4
  * License: Apache-2.0
5
5
  */
6
6
  import { tryDefine } from '@tylertech/forge-core';
7
- import { KeyComponent } from './key';
7
+ import { KEY_TAG_NAME, KeyComponent } from './key';
8
8
  export * from './key';
9
9
  export function defineKeyComponent() {
10
- tryDefine('forge-key', KeyComponent);
10
+ tryDefine(KEY_TAG_NAME, KeyComponent);
11
11
  }
package/esm/key/key/key.d.ts CHANGED
@@ -4,6 +4,8 @@
4
4
  * License: Apache-2.0
5
5
  */
6
6
  import { LitElement, TemplateResult } from 'lit';
7
+ import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
8
+ export declare const KEY_TAG_NAME: keyof HTMLElementTagNameMap;
7
9
  /**
8
10
  * @tag forge-key
9
11
  *
@@ -18,6 +20,8 @@ import { LitElement, TemplateResult } from 'lit';
18
20
  */
19
21
  export declare class KeyComponent extends LitElement {
20
22
  static styles: import("lit").CSSResult;
23
+ /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
24
+ static [CUSTOM_ELEMENT_NAME_PROPERTY]: keyof HTMLElementTagNameMap;
21
25
  private _internals;
22
26
  constructor();
23
27
  connectedCallback(): void;
package/esm/key/key/key.js CHANGED
@@ -3,11 +3,14 @@
3
3
  * Copyright Tyler Technologies, Inc.
4
4
  * License: Apache-2.0
5
5
  */
6
+ var _a;
6
7
  import { __decorate } from "tslib";
7
8
  import { LitElement, html, unsafeCSS } from 'lit';
8
9
  import { customElement } from 'lit/decorators.js';
9
10
  import { setDefaultAria } from '../../core/utils/a11y-utils';
11
+ import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
10
12
  const styles = ':host{display:block}.forge-key{--_key-gap:var(--forge-key-gap, var(--forge-spacing-medium, 16px));--_key-direction:var(--forge-key-direction, row)}.forge-key{box-sizing:border-box;display:flex;flex-direction:var(--_key-direction);gap:var(--_key-gap);flex-wrap:wrap}';
13
+ export const KEY_TAG_NAME = 'forge-key';
11
14
  /**
12
15
  * @tag forge-key
13
16
  *
@@ -36,8 +39,11 @@ let KeyComponent = class KeyComponent extends LitElement {
36
39
  return html `<div part="root" class="forge-key"><slot></slot></div>`;
37
40
  }
38
41
  };
42
+ _a = CUSTOM_ELEMENT_NAME_PROPERTY;
39
43
  KeyComponent.styles = unsafeCSS(styles);
44
+ /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
45
+ KeyComponent[_a] = KEY_TAG_NAME;
40
46
  KeyComponent = __decorate([
41
- customElement('forge-key')
47
+ customElement(KEY_TAG_NAME)
42
48
  ], KeyComponent);
43
49
  export { KeyComponent };
package/esm/key/key-item/index.js CHANGED
@@ -4,8 +4,8 @@
4
4
  * License: Apache-2.0
5
5
  */
6
6
  import { tryDefine } from '@tylertech/forge-core';
7
- import { KeyItemComponent } from './key-item';
7
+ import { KEY_ITEM_TAG_NAME, KeyItemComponent } from './key-item';
8
8
  export * from './key-item';
9
9
  export function defineKeyItemComponent() {
10
- tryDefine('forge-key-item', KeyItemComponent);
10
+ tryDefine(KEY_ITEM_TAG_NAME, KeyItemComponent);
11
11
  }
package/esm/key/key-item/key-item.d.ts CHANGED
@@ -4,6 +4,8 @@
4
4
  * License: Apache-2.0
5
5
  */
6
6
  import { LitElement, TemplateResult } from 'lit';
7
+ import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
8
+ export declare const KEY_ITEM_TAG_NAME: keyof HTMLElementTagNameMap;
7
9
  /**
8
10
  * @tag forge-key-item
9
11
  *
@@ -26,6 +28,8 @@ import { LitElement, TemplateResult } from 'lit';
26
28
  */
27
29
  export declare class KeyItemComponent extends LitElement {
28
30
  static styles: import("lit").CSSResult;
31
+ /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
32
+ static [CUSTOM_ELEMENT_NAME_PROPERTY]: keyof HTMLElementTagNameMap;
29
33
  /**
30
34
  * Whether the label and value dislay on one line.
31
35
  * @default false
package/esm/key/key-item/key-item.js CHANGED
@@ -3,12 +3,15 @@
3
3
  * Copyright Tyler Technologies, Inc.
4
4
  * License: Apache-2.0
5
5
  */
6
+ var _a;
6
7
  import { __decorate } from "tslib";
7
8
  import { LitElement, html, unsafeCSS } from 'lit';
8
9
  import { customElement, property, queryAssignedNodes, state } from 'lit/decorators.js';
9
10
  import { classMap } from 'lit/directives/class-map.js';
10
11
  import { setDefaultAria } from '../../core/utils/a11y-utils';
12
+ import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
11
13
  const styles = ':host{display:inline}.forge-key-item{--_key-item-icon-color:var(--forge-key-item-icon-color, var(--forge-theme-tertiary, #3d5afe));--_key-item-label-color:var(--forge-key-item-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_key-item-value-color:var(--forge-key-item-value-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_key-item-gap:var(--forge-key-item-gap, var(--forge-spacing-xsmall, 8px));--_key-item-icon-size:var(--forge-key-item-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1))}.forge-key-item{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);box-sizing:border-box;display:grid;grid-template:\"icon label\" \"icon value\";column-gap:var(--_key-item-gap);inline-size:fit-content;line-height:normal}.forge-key-item.inline{grid-template:\"icon label value\";grid-template-columns:auto 1fr auto;align-items:center;inline-size:auto}.forge-key-item.no-value{grid-template:\"icon label\";align-items:center}.forge-key-item.no-value .value{display:none}.forge-key-item:not(.inline,.no-value) .label{padding-block-start:1px}.icon{--forge-icon-size:var(--_key-item-icon-size);grid-area:icon;color:var(--_key-item-icon-color)}.label{grid-area:label;color:var(--_key-item-label-color)}.value{grid-area:value;color:var(--_key-item-value-color)}.default-icon{block-size:calc(var(--_key-item-icon-size) - 1px);inline-size:calc(var(--_key-item-icon-size) - 1px);border-radius:50%;background:currentColor}';
14
+ export const KEY_ITEM_TAG_NAME = 'forge-key-item';
12
15
  /**
13
16
  * @tag forge-key-item
14
17
  *
@@ -70,7 +73,10 @@ let KeyItemComponent = class KeyItemComponent extends LitElement {
70
73
  this._hasValue = !!nodes.length;
71
74
  }
72
75
  };
76
+ _a = CUSTOM_ELEMENT_NAME_PROPERTY;
73
77
  KeyItemComponent.styles = unsafeCSS(styles);
78
+ /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
79
+ KeyItemComponent[_a] = KEY_ITEM_TAG_NAME;
74
80
  __decorate([
75
81
  property({ type: Boolean })
76
82
  ], KeyItemComponent.prototype, "inline", void 0);
@@ -81,6 +87,6 @@ __decorate([
81
87
  queryAssignedNodes({ slot: 'value' })
82
88
  ], KeyItemComponent.prototype, "_valueNodes", void 0);
83
89
  KeyItemComponent = __decorate([
84
- customElement('forge-key-item')
90
+ customElement(KEY_ITEM_TAG_NAME)
85
91
  ], KeyItemComponent);
86
92
  export { KeyItemComponent };
package/esm/meter/meter/meter.d.ts CHANGED
@@ -5,6 +5,8 @@
5
5
  */
6
6
  import { LitElement, PropertyValues, TemplateResult } from 'lit';
7
7
  import { Theme } from '../../constants';
8
+ import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
9
+ export declare const METER_TAG_NAME: keyof HTMLElementTagNameMap;
8
10
  export type MeterDirection = 'horizontal' | 'vertical';
9
11
  export type MeterDensity = 'default' | 'small' | 'medium' | 'large';
10
12
  export type MeterShape = 'default' | 'round' | 'squared';
@@ -50,6 +52,7 @@ export type MeterValueMode = 'manual' | 'percentage' | 'value';
50
52
  export declare class MeterComponent extends LitElement {
51
53
  static styles: import("lit").CSSResult;
52
54
  static formAssociated: boolean;
55
+ static [CUSTOM_ELEMENT_NAME_PROPERTY]: keyof HTMLElementTagNameMap;
53
56
  /**
54
57
  * The current value of the meter.
55
58
  * @default 0